/* ── 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; }