/* ── BOARD / VOTING ─────────────────────────────────────────────────────────────────────────
   Styles for the board-formation and member-voting subsystem. Kept out of styles.css so a subsystem this size does
   not absorb the shared sheet — same reasoning as splitting tokens/fonts out during modularization.
   Uses the shared tokens (tokens.css); defines no colours of its own. */

/* Two columns on desktop, stacked on mobile. Percentages rather than fr so the split matches the
   rest of the app's 38/62 language; the rail holds fixed-width telemetry, the main column holds
   seat cards that run 11+ rows deep. */
.voting-grid { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
    .voting-grid { display: grid; grid-template-columns: 38fr 62fr; gap: 16px; align-items: start; }
    /* Independent scroll per column: the right side is far taller than the rail, and a single page
       scroll would drag the rail out of view while reading a seat's tallies. */
    .voting-grid > * { max-height: 1068px; overflow-y: auto; }
}

/* Seat code chip (B-01 … B-11). Sized to the 2-digit form so the column never reflows. */
.vote-seat-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 18px; padding: 0 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 900; letter-spacing: 0.1em;
    color: var(--foundation-blue);
    background: color-mix(in srgb, var(--foundation-blue) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--foundation-blue) 33%, transparent);
    border-radius: 2px; white-space: nowrap;
}


/* ── PORTED FROM board-formation-portal-v19.html (2026-09-04) ───────────────────────────────
   The ONLY two classes that page defined which the app did not already have. Everything else it
   carried — flip-container/flipper/front/back, blueprint-card, text-label, tactile-btn, btn-chip,
   custom-scrollbar, mono, serif, status-dot-pulse, hidden-view, bcc-cb, dj-select — already exists
   in styles.css, so the page's whole <style> block was dropped rather than merged. */

/* Interest bar behind each seat's 1ST / 2ND / 3RD / FLEX counts. The fill colour is set inline per
   tier (green/amber/blue/muted), so this defines geometry only and stays theme-neutral. */
.board-bar-track {
    height: 10px; width: 100%;
    background: var(--terminal-recess);
    border: 1px solid var(--bg-obsidian);
    border-radius: 1px; overflow: hidden;
}
.board-bar-fill { height: 100%; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }

/* REJECTION checkbox — "positions I would not accept". Scoped variant rather than an override of
   .bcc-cb, which the console uses in six other places and which is deliberately foundation-blue
   with a drawn checkmark. Here a tick means a REFUSAL, so blue-and-checked reads as the opposite of
   what it means; red with a hollow fill reads as a strike. Same 14px box so the grid does not shift. */
.bcc-cb.board-reject-cb:checked {
    background: var(--status-red);
    border-color: var(--status-red);
}
.bcc-cb.board-reject-cb:checked::after { border-color: #fff; }
.bcc-cb.board-reject-cb:hover { border-color: var(--status-red); }

/* ── FLIP HEIGHTS — GONE, 2026-09-08 ───────────────────────────────────────────────────────────
   This file used to carry `#seat-viewer .flip-container { height: ... }` twice, once for desktop
   and once !important under 1024px, to answer styles.css's unlayered `.flip-container{height:100%}`
   and its `height:480px !important` mobile override. Both are removed: the board has no flip card
   left. The seat card was the last one — eleven of them in a scroll pane, then one in a viewer
   pane, then none once the position list took over the right card and put the spec in a push-down
   panel instead of a back face.

   .flip-container itself is very much alive — index.html uses it for the portal's deck cards and
   the funded/intent trackers. It just has no instance in the board any more, so nothing here needs
   to fight styles.css for its height.

   THE TRAP THIS BLOCK RECORDED IS STILL REAL and is written up in styles.css:40 and :1096: an
   unlayered rule beats any Tailwind utility regardless of specificity, so `h-[216px]` on a
   .flip-container compiles fine and is then silently overridden. If a flip card ever comes back
   here, it needs a real height in THIS file, unlayered, where it can win.

   #left-flip-container went 2026-09-04 with the application card's back face. */




/* ── WHY THE BADGE BUTTONS DO NOT SINK ─────────────────────────────────────────────────────────
   styles.css: `.tactile-btn:active:not(:disabled) { transform: translateY(2px) }`. That 2px is
   right for a 32-44px control and BREAKS an 18px one.

   THE FAILURE, exactly: press near the button's top edge. mousedown fires, the transform drops the
   button 2px, and the pointer is now OUTSIDE it. mouseup therefore lands on the parent, and a
   `click` event is dispatched on the nearest common ancestor of the two — the row, not the button.
   The handler never runs. You see it sink, because mousedown worked, and nothing happens, because
   the click went somewhere else. On an 18px badge the shift is 11% of the height; on a 44px button
   it is 4.5% and you would have to be within 2px of the very top edge to notice.

   It cannot be fixed with a bigger hit area: a pseudo-element or padding travels WITH the transform,
   because it is a child of the thing that moved. The only fixes are to shrink the box or to not
   move it, and these badges are already the smallest control in the app.

   So they keep the tactile-btn family and opt out of the movement. Feedback is not lost — every one
   of them fills on lg:hover, and the two that toggle also change their word (INFO/CLOSE,
   SEE FULL LIST/CLOSE), which is stronger confirmation than 2px ever was.

   Loaded after styles.css (index.html:14 vs :11) and identical specificity (0,3,0), so source
   order settles it without !important. */
.badge-btn:active:not(:disabled) { transform: none; }

/* LEGEND — ONE CHIP, TWO WORDS. The ballot column has two states, VOTE and VOTED, and the legend
   has four slots per row. Rather than spend two of them on one column, the chip alternates.

   Cycling is fine HERE and wrong on a data badge: this declares a vocabulary, so a reader can wait
   for the other face. A tally that did it would change under you mid-read and could not be
   screenshotted — which is why the seat total shows a bare number instead.

   6s, 3s a face. Fast enough that both are seen without watching for them, slow enough to read one
   and look away. The two words are GRID-STACKED in the same cell so the chip is sized by the wider
   of them (VOTED) and never resizes mid-cycle, which would shove the three chips beside it.

   prefers-reduced-motion stops the animation on the first face rather than hiding a word: a legend
   that omits a badge is a broken legend. */
/* min-width:0 — a grid ITEM also defaults to min-width:auto, so without this the stacked words
   (VOTED, the wider) would push this cell past its track and shove the three beside it. The row is
   grid-cols-4 now, which fixes the track widths; this stops the content arguing with them. Safe to
   zero: every chip is overflow-hidden, and VOTED at 9px mono is ~35px in a ~56px cell. */
.legend-flip { display: grid; min-width: 0; }
.legend-flip > span { grid-area: 1 / 1; animation: legend-flip 6s steps(1, end) infinite; }
.legend-flip > span:last-child { animation-delay: 3s; }
@keyframes legend-flip { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .legend-flip > span { animation: none; }
  .legend-flip > span:last-child { display: none; }
}

/* SEAT HEADER, OPEN — the band that says "this section starts here".

   A seat with INFO or SEE FULL LIST open pushes the rest of the list down, and until now the only
   thing marking where that block began was an amber border a pixel wide. The header fills instead:
   amber at the left edge, where the B-01 code is, fading back to the card's own graphite by the
   middle. A fade rather than a flat tint so it reads as a band with a START, which is exactly what
   it is announcing, and so the badges in the right half keep their normal contrast.

   color-mix, not a hardcoded rgba: --status-amber is a console-editable chroma token, so a literal
   would silently stop matching the INFO badge the first time someone re-themes the palette. 22% is
   the strongest tint that leaves the 13px muted title readable in both light and dark.

   background-image, so the bg-[var(--card-graphite)] utility underneath still paints the base
   colour. The two compose instead of fighting, and nothing needs !important. */
.seat-head-open {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--status-amber) 22%, transparent) 0%,
    color-mix(in srgb, var(--status-amber) 8%, transparent) 38%,
    transparent 60%
  );
}