/* ══════════════════════════════════════════════════════════════════════
   HOT BOARDS — dashboard2.css
   The entitlement-gate dashboard (HANDOFF_dashboard-redesign.md).

   LOAD ORDER MATTERS. This file pairs with hotboards-components.css:

     <link href="hotboards-components.css">   <- their file, VERBATIM
     <link href="dashboard2.css">             <- this file

   hotboards-components.css is an unmodified copy of the design handoff's
   component CSS (nav / week tabs / filter bar / schedule row). It is NOT
   edited here and must not be edited in place -- if the design ships a new
   version, drop the whole file in and leave this one alone.

   WHAT THIS FILE ADDS
   -------------------
   1. The token block from handoff §3, SCOPED to #dashboard2.
   2. The shell / topbar / pane / empty-state / tier CSS, which exists only
      inside dashboard-wireframe_1.html's <style> tag and is not in
      hotboards-components.css. Roughly 40% of the page.
   3. Two selectors from that wireframe CSS that COLLIDE with live app
      styles and are therefore scoped rather than pasted global -- see the
      COLLISION notes below. These are the only two deviations from the
      mockup's CSS in this entire build.

   ── WHY THE TOKENS ARE SCOPED, NOT GLOBAL ──────────────────────────────
   Handoff §3 says "these already exist in the app. Do not introduce new
   hex values -- every color below is already in use." Verified against
   styles.css on 2026-07-27: that is true of about half of them. These
   are NOT in the app and are new values (close cousins of existing tokens,
   but not equal):

     --ink-900 #121317   app --ink-900 is #101216
     --panel   #16181D   app --ink-850 is #15181D
     --card    #1C1F25   app --ink-800 is #181B21
     --raised  #212530   --input #262A32   --hair #2C313B   --soft #3C424E
     --txt2    #CBC8C0   app --ink-300 is #BDB7AB
     --txt3    #94908A   --txt4 #6E6A65    --heat-lo #8A6A38

   The mockup is the visual source of truth, so the mockup's values win.
   Scoping them to #dashboard2 is what keeps that from re-shading the
   spotter board, the print sheets and the player card, all of which are
   built on the app's canonical --ink- and --heat- ramps.
   (Do not write those as glob patterns here: "--ink-" followed by a star
   and a slash closes this comment and silently deletes the token block
   below. That exact typo cost a debugging cycle on 2026-07-27.)

   --font-d is Oswald here. The app's --font-display leads with Saira
   Condensed; every plate, nav name and week tab in the mockup is drawn in
   Oswald and does not match in Saira. Oswald is already loaded by
   index.html, so this costs nothing but it does mean this screen's display
   face differs from the rest of the app on purpose.
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────── TOKENS (handoff §3) — scoped ───────────── */
#dashboard2{
  --ink-950:#0B0C0E; --ink-900:#121317; --panel:#16181D; --card:#1C1F25;
  --raised:#212530; --input:#262A32; --hair:#2C313B; --soft:#3C424E;
  --txt:#F3F1EB; --txt2:#CBC8C0; --txt3:#94908A; --txt4:#6E6A65;
  --heat:#B68A4E; --heat-hi:#D8AE6E; --heat-lo:#8A6A38; --on-heat:#15110A;
  --grn:#58C08C; --red:#DE5B41; --amb:#E2B85E; --gry:#9A958A;
  --font-d:Oswald,'Arial Narrow',sans-serif;
  --font-b:Archivo,-apple-system,Segoe UI,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:14px;

  background:var(--ink-950);
  color:var(--txt);
  font-family:var(--font-b);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
/* ⚠️ :where() IS LOAD-BEARING, DO NOT SIMPLIFY TO `#dashboard2 *`.
   The mockup's reset is `*{margin:0;padding:0}` / `button{font:inherit;
   background:none;border:none}` at specificity 0-0-0, so every component
   class in hotboards-components.css outranks it. Scoping it the obvious way
   (`#dashboard2 *`) raises it to 1-0-0, which then BEATS `.row`, `.wk`,
   `.fchip` and `.mini` — it strips the nav padding and renders the week tabs
   as bare text with no chamfer and no gradient. :where() contributes zero
   specificity, so this is scoped to the screen AND still ranks 0-0-0,
   exactly like the mockup. */
:where(#dashboard2) *{box-sizing:border-box;margin:0;padding:0}
:where(#dashboard2) button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* The mockup sets body{overflow:hidden}. Applied globally that would break
   every other screen in the app, so it rides a body class that goDashboard2()
   adds and every other screen switcher removes. */
body.hb-dash2{overflow:hidden}

/* ───────────── SHELL ───────────── */
/* padding-bottom clears #dash2bar, the entitlement-state switcher. Handoff §6:
   delete the bar and this 42px together when real entitlement lands. */
#dashboard2 .shell{display:grid;grid-template-columns:248px 1fr;height:100vh;padding-bottom:42px}

#dashboard2 .main{overflow-y:auto;position:relative;background:
  radial-gradient(1100px 520px at 46% -8%, #191C22 0%, rgba(11,12,14,0) 62%),
  radial-gradient(760px 400px at 100% 0%, rgba(182,138,78,.055) 0%, rgba(11,12,14,0) 60%),
  var(--ink-950)}

#dashboard2 .topbar{display:flex;align-items:center;gap:10px;padding:13px 26px;
  border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,rgba(14,16,20,.96),rgba(11,12,14,.82));
  backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 1px 0 rgba(0,0,0,.6)}

#dashboard2 .dt{font-family:var(--font-m);font-size:10.5px;color:var(--txt4);margin-right:auto;margin-left:4px}
/* Was a near-invisible hairline outline at 10px in a muted gray -- legible in
   isolation, but with no fill and a border barely a shade off the background
   it read as "not really a button", and every one of these plus the avatar
   carried equal weight, so nothing anchored the eye. A quiet filled surface
   (not the brand gold -- that's reserved for the one primary action per
   screen) plus a size bump gives them actual presence without competing with
   BUILD BOARD. */
#dashboard2 .tb{font-family:var(--font-m);font-size:11.5px;color:var(--txt2);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);padding:7px 13px;letter-spacing:.5px;transition:.14s}
#dashboard2 .tb:hover{color:var(--txt);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
/* Groups the avatar apart from the utility buttons instead of it just
   trailing off the end of the row. */
#dashboard2 .topbar-sep{width:1px;align-self:stretch;margin:2px 2px;background:rgba(255,255,255,.08)}
#dashboard2 .av{width:32px;height:32px;border-radius:50%;
  background:linear-gradient(160deg,var(--heat-lo),var(--heat));border:1px solid rgba(0,0,0,.25);
  font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--on-heat);
  display:grid;place-items:center;transition:filter .14s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
#dashboard2 .av:hover{filter:brightness(1.08)}

/* ───────────── PANE HEADINGS ───────────── */
#dashboard2 .pane{padding:24px 26px 40px}
#dashboard2 .h1{font-family:var(--font-d);font-size:27px;font-weight:700;letter-spacing:.3px;line-height:1.1}
#dashboard2 .kick{font-family:var(--font-m);font-size:10px;color:var(--heat);letter-spacing:2.2px;
  text-transform:uppercase;margin-bottom:6px;font-weight:700}
#dashboard2 .sub{color:var(--txt3);font-size:13.5px;margin-top:6px}
#dashboard2 .note{font-family:var(--font-m);font-size:9.5px;color:var(--txt4);margin-top:16px;letter-spacing:.3px}

/* ───────────── BROADCAST WINDOW GROUPS ───────────── */
#dashboard2 .wingrp{margin-top:26px}
#dashboard2 .winhd{display:flex;align-items:center;gap:11px;padding-bottom:9px;position:relative}
#dashboard2 .winhd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(182,138,78,.55),rgba(182,138,78,.10) 42%,rgba(255,255,255,.05))}
#dashboard2 .winhd .tick{width:9px;height:15px;background:linear-gradient(180deg,var(--heat-hi),var(--heat-lo));
  transform:skewX(-11deg);border-radius:1px;box-shadow:0 0 12px rgba(216,174,110,.45);flex:none}
#dashboard2 .winhd .wl{font-family:var(--font-d);font-size:14px;color:var(--txt);letter-spacing:2.4px;
  font-weight:600;text-transform:uppercase}
#dashboard2 .winhd .wc{font-family:var(--font-m);font-size:9.5px;color:var(--txt4);margin-left:auto;
  letter-spacing:1.4px}

#dashboard2 .rdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grn);
  margin-left:8px;vertical-align:middle;box-shadow:0 0 8px var(--grn)}

@media (prefers-reduced-motion:reduce){#dashboard2 .rw,#dashboard2 .mini,#dashboard2 .row{transition:none}}

/* ───────────── BADGES / BUTTONS ───────────── */
/* COLLISION 2 — `.badge` is scoped.
   styles.css:505 already defines a global .badge (7px inline-block chip) and
   data.js:260 emits <span class="badge b-XX"> for EVERY player badge on EVERY
   spotter board. Pasting the mockup's .badge global would restyle all of them
   and it would show up on the printed 8.5x11. Same declarations, scoped. */
#dashboard2 .badge{display:inline-block;font-family:var(--font-m);font-size:8.5px;letter-spacing:.8px;
  padding:2px 6px;border-radius:999px;border:1px solid;font-weight:700;line-height:normal;
  margin-left:0;text-transform:none;vertical-align:baseline}
#dashboard2 .badge.ready{color:var(--grn);border-color:#295741;background:#12261C}

#dashboard2 .btn{font-family:var(--font-m);font-size:10.5px;letter-spacing:.7px;font-weight:700;padding:7px 13px;
  border-radius:var(--r-md);white-space:nowrap;transition:.14s;flex:none}
#dashboard2 .btn.open{background:var(--heat);color:var(--on-heat)}
#dashboard2 .btn.open:hover{background:var(--heat-hi)}
#dashboard2 .btn.build{border:1px solid var(--heat-lo);color:var(--heat-hi)}
#dashboard2 .btn.build:hover{border-color:var(--heat);background:#1E1810}
#dashboard2 .btn.buy{border:1px solid var(--hair);color:var(--txt3)}
#dashboard2 .btn.buy:hover{border-color:var(--heat-lo);color:var(--heat-hi);background:#1A1610}

/* ───────────── MY BOARDS CARDS ───────────── */
/* Handoff §6: plate() and .plate are legacy, still used at large size by these
   cards, and get deleted together with them when the cards are converted to
   the same plate language as the rundown. Not this pass. */
#dashboard2 .bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:13px;margin-top:18px}
#dashboard2 .bc{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
  transition:.14s}
#dashboard2 .bc:hover{border-color:var(--soft)}
#dashboard2 .bc .top{display:flex;height:78px;position:relative}
#dashboard2 .bc .side{flex:1;display:grid;place-items:center;font-family:var(--font-d);font-size:23px;
  font-weight:700;letter-spacing:1px}
#dashboard2 .bc .at2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;
  border-radius:50%;background:var(--ink-950);border:1px solid var(--soft);display:grid;
  place-items:center;font-family:var(--font-m);font-size:8.5px;color:var(--txt3)}
#dashboard2 .bc .meta{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  border-top:1px solid var(--hair)}
#dashboard2 .bc .wk2{font-family:var(--font-m);font-size:10.5px;color:var(--txt2)}
#dashboard2 .bc .ed{font-family:var(--font-m);font-size:9.5px;color:var(--txt4)}
#dashboard2 .bc .rb{position:absolute;top:8px;right:8px}

/* ───────────── EMPTY / LOCKED PANE ───────────── */
#dashboard2 .empty{max-width:560px;margin:8vh auto 0;text-align:center}
#dashboard2 .empty .lk{width:44px;height:44px;color:var(--heat-lo);margin:0 auto 16px}
#dashboard2 .empty h2{font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:.3px}
#dashboard2 .empty p{color:var(--txt3);margin-top:9px;line-height:1.5;font-size:14px}
#dashboard2 .tiers{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:24px;text-align:left}
#dashboard2 .tier{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:15px}
#dashboard2 .tier.hi{border-color:var(--heat-lo);background:#1A1710}
#dashboard2 .tier .tn{font-family:var(--font-d);font-size:16px;font-weight:600;letter-spacing:.4px}
#dashboard2 .tier .tp{font-family:var(--font-m);font-size:19px;color:var(--heat-hi);font-weight:700;margin-top:7px}
#dashboard2 .tier .tg{font-family:var(--font-m);font-size:10.5px;color:var(--txt4);margin-top:3px}
#dashboard2 .tier .tb2{margin-top:12px;width:100%;text-align:center;background:var(--heat);color:var(--on-heat);
  font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.7px;padding:8px;
  border-radius:var(--r-md)}
#dashboard2 .tier .tb3{margin-top:12px;width:100%;text-align:center;border:1px solid var(--hair);color:var(--txt3);
  font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.7px;padding:8px;
  border-radius:var(--r-md)}
#dashboard2 .freebar{margin-top:22px;border:1px dashed var(--heat-lo);border-radius:var(--r-lg);padding:13px 16px;
  display:flex;align-items:center;gap:12px;text-align:left;background:#141210}
#dashboard2 .freebar .fg{flex:1}
#dashboard2 .freebar b{font-family:var(--font-d);font-size:14.5px;letter-spacing:.3px}
#dashboard2 .freebar span{display:block;color:var(--txt3);font-size:12.5px;margin-top:2px}

/* ═════════ COMPOSER + BOARDS SECTION ═════════
   Owner direction 2026-07-27: "I want a regular drop down menu - this is too
   clunky", and "bigger cards like this - the old way".

   So this screen does NOT style a picker or a card. It reuses the app's own
   .dash-composer / .dash-field / .dash-select and .dash-board-card, which
   styles.css already owns and which dashboard.js already renders. The only
   rules here are the seam between them and this screen's darker shell.

   That is why the schedule-row block that used to live below is gone: there
   is no rundown any more. .rw / .blk / .mini / .net in
   hotboards-components.css are now UNUSED by the app. They are left in place
   because that file is the design handoff's, kept verbatim, and because the
   rail (.row/.nav/.navsec/.divider/.addrow) in the same file is very much
   still live. */

#dashboard2 .dash-composer{margin-top:20px;margin-bottom:0;
  background:linear-gradient(180deg,#1B1F26,#141619);
  border-color:rgba(255,255,255,.06)}
#dashboard2 .dash-composer-title{font-family:var(--font-d);letter-spacing:.4px}
#dashboard2 .dash-select{font-family:var(--font-b)}
#dashboard2 .dash-build-btn{font-family:var(--font-d)}
#dashboard2 .dash-build-btn[disabled]{opacity:.45;cursor:not-allowed}
#dashboard2 .dash-select[disabled]{opacity:.55;cursor:not-allowed}

/* Section header above the board grid — same skewed gold tick as the rail's
   active row, so the two halves of the screen read as one system. */
#dashboard2 .boardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:34px;padding-bottom:10px;position:relative}
#dashboard2 .boardhead::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(182,138,78,.55),rgba(182,138,78,.10) 42%,rgba(255,255,255,.05))}
#dashboard2 .boardhead .bh{display:flex;align-items:center;gap:11px}
#dashboard2 .boardhead .tick{width:9px;height:15px;flex:none;border-radius:1px;
  background:linear-gradient(180deg,var(--heat-hi),var(--heat-lo));
  transform:skewX(-11deg);box-shadow:0 0 12px rgba(216,174,110,.45)}
#dashboard2 .boardhead .wl{font-family:var(--font-d);font-size:14px;color:var(--txt);
  letter-spacing:2.4px;font-weight:600;text-transform:uppercase}
#dashboard2 .boardhead .wc{font-family:var(--font-m);font-size:9.5px;color:var(--txt4);letter-spacing:1.4px}
#dashboard2 .dash-boards-grid{margin-top:16px}

/* ───────────── LOADING / EMPTY / FAILED ───────────── */
#dashboard2 .slatemsg{margin-top:16px;padding:28px 22px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.003));
  border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(0,0,0,.6)}
#dashboard2 .slatemsg b{display:block;font-family:var(--font-d);font-size:16px;letter-spacing:.5px;
  color:var(--txt);margin-bottom:6px}
#dashboard2 .slatemsg span{color:var(--txt3);font-size:13px}

#dashboard2 .slatemsg .tb{margin-top:12px;display:inline-block}


/* ───────────── COVERAGE NOTICE ───────────── */
/* "Accurate or nothing": a division that is not fully mapped in TEAMS does not
   appear in the rail (handoff §6). When that suppresses something, say so here
   rather than silently rendering a shorter list. */
#dashboard2 .covnote{font-family:var(--font-m);font-size:9.5px;color:var(--txt4);letter-spacing:.3px;
  padding:10px 16px 4px;line-height:1.5}
#dashboard2 .covnote b{color:var(--heat);font-weight:700}

/* Build stamp — the only reliable way to tell, by looking, whether a browser
   is on the current build. Three rounds of "it looks the same" here were a
   stale cache and a script-order race, both invisible from the screen. */
#dashboard2 .dash2ver{font-family:var(--font-m);font-size:9px;color:var(--txt4);
  letter-spacing:1px;text-align:center;padding-top:9px;opacity:.75}

/* ───────────── STUB: entitlement-state switcher ───────────── */
/* Handoff §6: "Delete #devbar and the STATES object entirely before shipping."
   Renamed #dash2bar so it can never be confused with the mockup's own bar.
   It is also hidden unless the new-dashboard flag is on, which is itself
   local-only -- see dashboard2.js hbDash2Enabled(). */
#dash2bar{position:fixed;left:0;right:0;bottom:0;z-index:99;background:#07080A;
  border-top:1px solid #2C313B;padding:9px 16px;display:flex;align-items:center;gap:10px}
#dash2bar .lbl{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;color:#6E6A65;
  letter-spacing:1.4px;text-transform:uppercase;margin-right:4px}
#dash2bar button{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;color:#94908A;
  padding:5px 11px;border:1px solid #2C313B;border-radius:999px;transition:.15s;background:none;cursor:pointer}
#dash2bar button:hover{color:#F3F1EB;border-color:#3C424E}
#dash2bar button.on{background:#B68A4E;color:#15110A;border-color:#B68A4E;font-weight:700}
#dash2bar .sp{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;
  color:#6E6A65;letter-spacing:.6px}