/* =============================================================================
   Weaion Labs — design selection board
   -----------------------------------------------------------------------------
   Four bays in one dark room, each lit in its own build's signature pair so the
   panels are a preview of the thing they link to rather than grey placeholders.

   This page exists to be deleted. It is deliberately plain about that.
   ========================================================================== */

:root {
  --room: #131316;
  --room-panel: #1b1b20;
  --room-edge: #2b2b33;
  --room-edge-hot: #3f3f4a;

  --ink: #e8e7e2;
  --dim: #a09f99;
  --faint: #918e87;

  --live: #4ade9b;

  --font: "Saira Condensed", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  /* --foot-h is set from chooser.js once the bar's real height is known, so the
     fixed bar never covers the end of the page. */
  padding-bottom: calc(var(--foot-h, 68px) + 1.5rem);
  background: var(--room);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  ::selection {
    background: var(--live);
    color: var(--room);
  }
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--live);
  color: var(--room);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.room {
  max-width: 104rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 3rem;
}

/* The document's own status banner: above the title as a page header, not
   above the heading as a kicker. */
.room-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--room-edge);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.room-status-field {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--room-edge-hot);
}

.board-head h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.board-lede {
  margin: 1.25rem 0 0;
  max-width: 72ch;
  font-size: 1.125rem;
  color: var(--dim);
}

/* ---- Grouping ------------------------------------------------------------ */

/* Reading order is the only grouping on this page, so it is stated rather than
   implied by grid position. */
.rounds {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--room-edge);
}
.board-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.board-tag:last-child {
  color: var(--live);
}
.round-note {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--faint);
  max-width: 76ch;
}

/* ---- The bays ------------------------------------------------------------ */

.bays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.bay {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--room-edge);
  background: var(--room-panel);
  transition: border-color 300ms var(--ease), transform 300ms var(--ease),
    opacity 300ms var(--ease);
}
.bay[data-picked="true"] {
  border-color: var(--live);
}
.bays:has(.bay[data-picked="true"]) .bay:not([data-picked="true"]) {
  opacity: 0.55;
  transform: translateY(4px);
}

.bay-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
}
.bay-open-label {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.3rem 0.5rem;
  background: rgba(10, 10, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.bay:hover .bay-open-label,
.bay-open:focus-visible .bay-open-label {
  opacity: 1;
}

/* ---- The miniature -------------------------------------------------------
   One material system for all four: each bay is lit in its own build's ground
   and ink, with that build's mark drawn on it.  Four different palettes from one
   set of rules, which is the only way four panels stay comparable.
   ------------------------------------------------------------------------- */

.mini {
  --mini-bg: #e6e7e1;
  --mini-ink: #16365c;
  --mini-accent: #b8390f;
  position: relative;
  height: clamp(180px, 17vw, 230px);
  border-bottom: 1px solid var(--room-edge);
  background: var(--mini-bg);
  overflow: hidden;
}

.mini-mark {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 2rem;
  height: 2rem;
}
.mini-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mini-lines {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 3.5rem;
  display: grid;
  gap: 0.5rem;
}
.mini-bar {
  display: block;
  width: var(--w);
  height: 3px;
  background: var(--mini-ink);
  opacity: 0.85;
}
.mini-bar-short {
  background: var(--mini-accent);
}

.mini-world {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.1rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mini-ink);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A: the sheet. */
.mini-a { --mini-bg: #e6e7e1; --mini-ink: #16365c; --mini-accent: #b8390f; }
/* B: the container. */
.mini-b { --mini-bg: #d8d5cc; --mini-ink: #1f4e79; --mini-accent: #f5c518; }
/* C: the gallery. */
.mini-c { --mini-bg: #0c0c0e; --mini-ink: #f0efe9; --mini-accent: #ff3b21; }
/* D: the signal. Ink black, mint. */
.mini-d { --mini-bg: #0b0d18; --mini-ink: #eceef5; --mini-accent: #7cf5d0; }
/* E: the kinetic. Warm paper, vermilion. */
.mini-e { --mini-bg: #f1ece3; --mini-ink: #14110d; --mini-accent: #d9482a; }
/* G: the observatory. Deep navy, gold and aurora. */
.mini-g { --mini-bg: #e7e3d8; --mini-ink: #1b1917; --mini-accent: #5c2a4d; }

/* ---- Bay body ------------------------------------------------------------ */

.bay-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.25rem 1.4rem;
}
.bay-rank {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.bay-body h2 {
  margin: 0 0 1rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.axes {
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.3rem;
  border-top: 1px solid var(--room-edge);
  padding-top: 0.85rem;
}
.axes > div {
  display: grid;
  grid-template-columns: 4.75rem 1fr;
  gap: 0.5rem;
}
.axes dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 0.15rem;
}
.axes dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
}

.bay-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
}
.act {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 0.75rem;
  border: 1px solid var(--room-edge-hot);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease),
    color 200ms var(--ease);
}
.act-open:hover {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.act-pick[aria-pressed="true"] {
  background: var(--live);
  border-color: var(--live);
  color: var(--room);
}

/* ---- Board note ---------------------------------------------------------- */

.board-note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--room-edge);
  border-top: 2px solid var(--live);
  padding: 1.5rem 1.75rem 1.75rem;
  background: var(--room-panel);
}
.board-note h2 {
  margin: 0 0 0.85rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.board-note ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  max-width: 88ch;
}
.board-note li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  color: var(--dim);
}
.board-note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.7rem;
  height: 1px;
  background: var(--live);
}
.board-note code {
  font-size: 0.875em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.35rem;
}

/* ---- Foot ---------------------------------------------------------------- */

.board-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(12, 12, 14, 0.95);
  border-top: 1px solid var(--room-edge-hot);
  backdrop-filter: blur(6px);
}
.foot-state {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}
.foot-field {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.foot-value {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.foot-value[data-set="true"] {
  color: var(--live);
}
.foot-actions {
  display: flex;
  gap: 0.6rem;
}
.foot-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--live);
  background: var(--live);
  color: var(--room);
  cursor: pointer;
}
.foot-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.foot-btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--room-edge-hot);
}
.foot-btn-quiet:hover {
  border-color: var(--ink);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
  .bays {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bays:has(.bay[data-picked="true"]) .bay:not([data-picked="true"]) {
    opacity: 1;
    transform: none;
  }
  .mini {
    height: 180px;
  }
}

@media (max-width: 640px) {
  .bays {
    grid-template-columns: minmax(0, 1fr);
  }
  .board-foot {
    align-items: stretch;
  }
  .foot-actions {
    width: 100%;
  }
  .foot-btn {
    flex: 1;
  }
}