/* ============================================================
   CuratedBets — Board Shell (SHARED, sport-agnostic)

   The board page shell every sport renders: the navy command-zone hero
   (eyebrow / H1 / date row / help tooltip), the section tab rail, and the
   stat strip. These are BRAND primitives, not MLB components — the same
   markup appears on /mlb/today and on every /nfl/* board page.

   They previously lived in mlb-board-today.css. Because the NFL pages load
   nfl-board.css INSTEAD of that sheet (it is full of MLB-only .cb-mc-* /
   .cb-attn-* components), every NFL page rendered this markup unstyled:
   the eyebrow fell back to 15px/400 body text instead of 12px/700 uppercase,
   the H1 to 30px instead of clamp(34–54px), and the stat-strip figures to
   15px body grey — which on the navy zone measured 1.26–1.99:1 against WCAG's
   4.5:1. Extracting them here is what makes the two sports one product.

   Loaded globally from public_base.html, AFTER public-brand.css and BEFORE
   any per-sport component sheet, so a sport can still override deliberately.
   Token-only: every value is a var(--*) from curatedbets-theme.css.
   ============================================================ */

/* ------------------------------------------------------------------ hero */
/* The board hero now lives in the SHARED navy command zone
   (public_base.html → .cb-shell-top.signal-room → .cb-hero), not in a contained
   dark card. It therefore renders NO background, border, radius or shadow of
   its own — the navy gradient behind it is the background, and every colour
   below comes from a token that .signal-room has already re-mapped to its dark
   value. The geometry (44px / 38px padding, 1240px rail) is the theme's. */
.cb-hero-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:18px 40px; margin:0 0 32px;
}
.cb-hero-id{display:flex; flex-direction:column; gap:12px; min-width:0;}
.cb-hero-aside{display:flex; align-items:center; gap:12px; padding-bottom:6px; margin-left:auto;}

.cb-hero-titlerow{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.cb-hero-updated{font-family:var(--font-text); font-size:12.5px; color:var(--text-muted); white-space:nowrap;}
.cb-hero-updated b{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-strong);}
.cb-hero-refresh{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  border-radius:var(--radius-md); border:1px solid var(--border-hairline);
  background:var(--surface-glass); box-shadow:none; color:var(--text-muted);
  transition:color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.cb-hero-refresh:hover{color:var(--text-strong); border-color:var(--border-strong); background:var(--accent-wash); box-shadow:none;}
.cb-hero-refresh:focus-visible{outline:none; box-shadow:var(--shadow-focus);}
.cb-hero-refresh .cb-i{width:16px; height:16px;}

.cb-board-eyebrow-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.cb-board-eyebrow{
  font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cb-blue-300);
}
.cb-live-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  border-radius:var(--radius-pill); border:1px solid var(--border-soft);
  background:var(--surface-glass); color:var(--text-body);
  font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.cb-live-dot{width:6px; height:6px; border-radius:50%; flex:none; background:var(--cb-positive);}
/* Page H1 — the locked ramp: Archivo 800 / 54px / -.035em / hero ink. */
.cb-board-h1{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(34px,4.4vw,54px); line-height:1; letter-spacing:-0.035em; color:var(--cb-hero-ink);
}
.cb-hero-daterow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0;}
.cb-hero-date{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-text); font-size:13.5px; font-weight:500; color:var(--text-muted);
}
.cb-hero-date .cb-i{width:14px; height:14px; flex:none; color:var(--text-faint);}
/* Scope line, separated by the meta row's hairline rule. */
.cb-hero-scope{
  padding-left:14px; border-left:1px solid var(--border-soft);
  font-family:var(--font-text); font-size:13.5px; font-weight:500; color:var(--text-muted);
}

/* "How rankings work" — now an icon-only disclosure beside the title. The
   compliance note it holds is unchanged and still rendered in the hero. */
.cb-hero-help{position:relative; margin:0; flex:none;}
.cb-hero-help > summary{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; list-style:none;
  width:20px; height:20px; border-radius:50%; color:rgba(226,236,248,.55);
  transition:color .12s ease;
}
.cb-hero-help > summary::-webkit-details-marker{display:none;}
.cb-hero-help > summary::marker{content:"";}
.cb-hero-help > summary:hover{color:#fff;}
.cb-hero-help > summary:focus-visible{outline:2px solid var(--cb-blue-300, #6FB0FF); outline-offset:3px;}
.cb-hero-help > summary .cb-i{width:18px; height:18px; flex:none;}
/* Tooltip panel — the theme's locked treatment: #04101B, hairline, radius 12,
   12.5px copy, shadow-lg. Text also stays available via the summary's title. */
.cb-hero .cb-compliance-note{
  position:absolute; z-index:30; top:calc(100% + 8px); left:-12px; width:min(330px,78vw);
  margin:0; padding:14px 16px; border-radius:12px;
  background:var(--cb-tooltip-bg); border:1px solid var(--border-soft);
  box-shadow:var(--shadow-lg);
  font-family:var(--font-text); font-size:12.5px; line-height:1.55; color:#DCE8F6;
  text-wrap:pretty;
}
/* -------------------------------------------------------------- tab rail
   The rail sits between the hero and the first panel, as a sibling of the
   .cb-section panels below it, so it inherits their content width and gutters
   and needs no width rule of its own.

   .cb-tabs is used by NO other template, so these rules deliberately and
   completely override the shared pill treatment in public-brand.css:
   background, border, border-radius and pill padding are all reset to nothing.
   Nothing of the old pill styling survives — the tabs are flat text on the page
   background with a single hairline running the width of the rail.

   The active underline is a border-bottom that every tab carries as
   `transparent`, so activating one only changes its colour: zero layout shift.
   The anchors' -1px bottom margin sits that 2px underline directly on top of
   the rail's own hairline. */
.cb-tabrail{margin:0 0 26px; border-bottom:1px solid var(--border-hairline);}
.cb-tabs{
  display:flex; flex-wrap:nowrap; gap:30px; margin:0;
  /* Narrow screens scroll the rail instead of wrapping or re-pilling it. */
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cb-tabs::-webkit-scrollbar{display:none;}
.cb-tabs a{
  flex:none; white-space:nowrap;
  /* 44px is the theme's --tap-min. The text alone occupies ~35px, which is
     under it; the extra height is added ABOVE the text (align-items:flex-end)
     so the 12px gap between label and underline is unchanged. Carried over
     from the NFL restatement of this rail — it was the one thing that
     restatement got right, so both sports now get it. */
  display:inline-flex; align-items:flex-end; min-height:var(--tap-min);
  font-family:var(--font-text); font-size:14px; font-weight:700;
  color:var(--text-muted);
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:0 0 12px; margin:0 0 -1px;
  border-bottom:2px solid transparent;
  transition:color .12s ease, border-color .12s ease;
}
.cb-tabs a:hover{color:var(--text-body); background:none; border-color:transparent;}
.cb-tabs a.is-active,
.cb-tabs a.is-active:hover{color:var(--text-strong); border-bottom-color:var(--accent-strong);}
.cb-tabs a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}
/* Panels are toggled with the [hidden] attribute; .cb-section sets no display
   of its own today, but this makes the hide independent of that staying true. */
.cb-section[hidden]{display:none;}

/* Stat strip — one glass card with N equal cells, a hairline between each, and
   the figure ABOVE its label. At most one cell carries .is-highlight to mark
   the hero metric. Theme §4 ("Shell classes"), token-only. */
.cb-statstrip{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; padding:0; min-width:0;
  background:var(--surface-card);
  -webkit-backdrop-filter:blur(var(--blur-md)); backdrop-filter:blur(var(--blur-md));
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md), var(--edge-light); overflow:hidden;
}
.cb-statstrip-item{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:20px 24px; min-width:0; text-align:left;
  border-left:1px solid var(--border-hairline);
}
.cb-statstrip-item:first-child{border-left:0;}
.cb-statstrip-item.is-highlight{background:rgba(46,139,255,.12);}
.cb-statstrip-num,
.cb-statstrip-clock{
  display:block; font-family:var(--font-display); font-weight:800; font-size:var(--fs-stat-lg);
  line-height:1; letter-spacing:var(--ls-tight); color:var(--text-strong);
  font-variant-numeric:tabular-nums;
}
.cb-statstrip-clock{white-space:nowrap;}
.cb-statstrip-label{
  display:block; margin-top:8px; font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap;
}


/* --------------------------------------------------------------- responsive */
/* The stat strip reflows rather than hiding metrics: 5 cells on desktop, 3 on
   tablet, 2 on small phones. Wrapped rows swap the vertical divider for an
   inset shadow pair so a new row never opens with a stray rule. The legacy
   --optional / --optional-sm hooks are kept on the markup for compatibility but
   no longer hide anything. The navy → white two-zone structure survives at
   every width; only the ramp steps down. */
@media (max-width:1024px){
  .cb-statstrip{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;}
  .cb-statstrip-item{border-left:0; box-shadow:inset 1px 0 0 var(--border-hairline), inset 0 1px 0 var(--border-hairline);}
  .cb-statstrip-item:nth-child(3n+1){box-shadow:inset 0 1px 0 var(--border-hairline);}
  .cb-statstrip-item:nth-child(-n+3){box-shadow:inset 1px 0 0 var(--border-hairline);}
  .cb-statstrip-item:first-child{box-shadow:none;}
}
@media (max-width:767px){
  .cb-hero-head{margin-bottom:24px;}
  .cb-hero-aside{margin-left:0;}
  .cb-statstrip{grid-template-columns:repeat(2,1fr);}
  .cb-statstrip-item{padding:16px 18px;}
  .cb-statstrip-item:nth-child(3n+1),
  .cb-statstrip-item:nth-child(-n+3){box-shadow:inset 1px 0 0 var(--border-hairline), inset 0 1px 0 var(--border-hairline);}
  .cb-statstrip-item:nth-child(2n+1){box-shadow:inset 0 1px 0 var(--border-hairline);}
  .cb-statstrip-item:first-child,
  .cb-statstrip-item:nth-child(2){box-shadow:none;}
  .cb-statstrip-item:nth-child(2){box-shadow:inset 1px 0 0 var(--border-hairline);}
}
@media (max-width:460px){
  .cb-statstrip-num, .cb-statstrip-clock{font-size:var(--fs-stat-md);}
  .cb-hero-scope{padding-left:0; border-left:0;}
}