/* ============================================================================
   bw_frame.css  .  B309 THE ONE FRAME  .  build lane (Opus 4.8)
   Order: WORK ORDER B309 item A, as amended by ANSWERS B309 rulings 1 and 4 and
   ANSWERS B309 . ITEM A STOP rulings A-1, A-2, A-3.
   ----------------------------------------------------------------------------
   Layout code authored by the build lane (not a visual asset). Every governed
   page links this FIRST, then keeps its own styles for page content only. Chrome
   (header, one width, one type scale) comes ONLY from here; the footer is
   styled in bw_footer.js against these same --bwf-* tokens (Ruling 4, Option 1).
   A-1: every token namespaces to --bwf-*; this file defines ONLY --bwf-* names
        and never reads or redefines any other file's variables.
   A-2: .bwH1 and .bwKick carry size, weight, line-height, and letter-spacing
        ONLY. Color stays with the page that uses them. The header bar is
        self-colored from --bwf-*, so it is one identical dark bar on every page,
        light or dark; bw_footer.js paints both footer shapes from the same tokens.
   A-3: one @font-face (Poppins 700, already shipped in the repo), used ONLY by
        .bwH1, .bwKick, and the wordmark. Nav links, body text, and everything
        else keep the system stack. No external font host.
   Gates: em-dash zero. No backslash (D230G-26 write-path safe).
   ============================================================================ */

@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/Poppins-Bold.ttf") format("truetype");
}

:root{
  --bwf-bg:#0b1622;
  --bwf-panel:#12202e;
  --bwf-gold:#e9c46a;
  --bwf-mint:#3ddc97;
  --bwf-ice:#dbe7f2;
  --bwf-mut:#93a3b2;
  --bwf-crown:#f4a259;
  --bwf-line:rgba(233,196,106,.18);
}

/* ---- the one content column (Every-Width law: 320px up, 16px gutters, no horizontal scroll) ---- */
.bwWrap{max-width:1060px;margin:0 auto;padding:0 16px}

/* ---- the type scale (size / weight / line-height / spacing only; color is the page's, A-2) ---- */
.bwH1{font-family:"Poppins",system-ui,sans-serif;font-size:28px;line-height:34px;font-weight:700}
.bwKick{font-family:"Poppins",system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:1px}

/* ============================================================================
   THE HEADER . a restyle of the existing bw_header.js .bwh classes (Ruling 1).
   bw_header.js keeps ALL its wiring (language select, account button, BWID/BWT,
   Today strip) and stops injecting the bar's visual CSS; the look lives here.
   The bar is self-colored from --bwf-*, so one identical dark bar on every page.
   Nav stays the live six items; My Picks does not join it (Ruling 1).
   ============================================================================ */
.bwh-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;height:64px;padding:0 16px;
  background:var(--bwf-bg);border-bottom:1px solid var(--bwf-line);
  font-family:-apple-system,'Segoe UI',system-ui,Roboto,sans-serif}
.bwh-bar.bwh-onlight{border-bottom:1px solid var(--bwf-line);box-shadow:none}   /* one bar look; no light-page seam variant */
.bwh-lock{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.bwh-word{font-family:"Poppins",system-ui,sans-serif;font-size:19px;font-weight:700;color:var(--bwf-ice);letter-spacing:.2px}
.bwh-pill{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--bwf-ice);
  border:1px solid var(--bwf-line);border-radius:999px;padding:3px 10px}
.bwh-nav{display:flex;align-items:center;gap:20px;margin-left:auto;min-width:0}
.bwh-nav a{font-size:15px;font-weight:600;color:var(--bwf-ice);text-decoration:none;padding:4px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.bwh-nav a:hover{color:#ffffff}
.bwh-nav a.bwh-on{color:var(--bwf-gold);border-bottom-color:var(--bwf-gold)}
.bwh-right{display:flex;align-items:center;gap:12px;flex:none}
.bwh-lang{background:transparent;color:var(--bwf-ice);border:1px solid var(--bwf-line);border-radius:8px;
  font-size:12.5px;font-weight:600;padding:5px 8px;font-family:inherit}
.bwh-lang option{color:#1d2340}
.bwh-acct{font-size:12.5px;font-weight:700;color:var(--bwf-ice);text-decoration:none;
  border:1px solid var(--bwf-line);border-radius:999px;padding:7px 14px;white-space:nowrap}
.bwh-acct:hover{background:var(--bwf-mint);color:var(--bwf-bg);border-color:var(--bwf-mint)}
.bwh-burger{display:none;background:transparent;border:0;color:var(--bwf-ice);cursor:pointer;padding:8px;width:44px;height:44px;align-items:center;justify-content:center}
.bwh-burger svg{width:24px;height:24px}
/* the full-screen phone sheet (kept: bw_header.js still wires it; hidden under 720 in favor of the scroll nav) */
.bwh-sheet{position:fixed;inset:0;z-index:70;background:var(--bwf-bg);display:none;flex-direction:column;padding:18px}
.bwh-sheet.bwh-open{display:flex}
.bwh-sheet a,.bwh-sheet .bwh-sheetlang b{color:var(--bwf-ice);text-decoration:none}
.bwh-sheet .bwh-sheetnav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.bwh-sheet .bwh-sheetnav a{font-size:18px;font-weight:700;padding:12px 4px;border-bottom:2px solid transparent;width:max-content}
.bwh-sheet .bwh-sheetnav a.bwh-on{border-bottom-color:var(--bwf-gold);color:var(--bwf-gold)}
.bwh-sheet .bwh-div{height:1px;background:var(--bwf-line);margin:12px 0}
.bwh-sheet .bwh-sheetlang{display:flex;gap:18px;align-items:center;font-size:15px;font-weight:700}
.bwh-sheet .bwh-sheetlang b{opacity:.6;cursor:pointer}
.bwh-sheet .bwh-sheetlang b.bwh-on{opacity:1;text-decoration:underline}
.bwh-sheettop{display:flex;align-items:center;justify-content:space-between}
.bwh-x{background:transparent;border:0;color:var(--bwf-ice);font-size:26px;line-height:1;cursor:pointer;width:44px;height:44px}

/* heights and the under-720 nav (order: 56px bar; nav scrolls horizontally, no wrap, no scrollbar chrome) */
@media (max-width:719px){
  .bwh-bar{height:56px;gap:12px;padding:0 16px}
  .bwh-nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:16px}
  .bwh-nav::-webkit-scrollbar{display:none;height:0;width:0}
  .bwh-burger{display:none}
}

/* ---- the shimmer skeleton placeholder (item D4; a panel waiting on a first read) ---- */
.bwSkel{position:relative;overflow:hidden;background:var(--bwf-panel);border-radius:12px;min-height:16px}
.bwSkel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(219,231,242,.10),transparent);animation:bwSkelPulse 1.15s ease-in-out infinite}
@keyframes bwSkelPulse{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.bwSkel::after{animation:none}}