/* ============================================================================
   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("/fonts/poppins-latin-700.woff2") format("woff2");
}
/* CSUITE-1: the 700 face reads the self-hosted woff2 (8 KB, the same Poppins Bold the header uses); a glyph outside it falls
   through to the header's latin-ext face. CSUITE-1B: the TTF fallback is retired, every page reads the one shared fonts/ set. */

: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 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}}

/* ============================================================================
   B311 THE BUTTON STANDARD (Dave's ruling, D230G-73, site-wide). Exactly two
   button styles, nothing else: one filled mint pill (primary) and one outlined
   pill (secondary), full tap size. Use these classes so every button across the
   site is one shape and color. em-dash zero.
   ============================================================================ */
.bwBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bwf-mint,#3ddc97);color:#08131d;border:0;border-radius:999px;
  padding:13px 26px;min-height:44px;font-family:inherit;font-weight:800;font-size:15px;
  line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .12s}
.bwBtn:hover{filter:brightness(1.06)}
.bwBtn.bwBtn-block{display:flex;width:100%}
.bwBtnSec{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--bwf-mint,#3ddc97);border:1.5px solid var(--bwf-mint,#3ddc97);
  border-radius:999px;padding:12px 24px;min-height:44px;font-family:inherit;font-weight:800;
  font-size:15px;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.bwBtnSec:hover{background:rgba(61,220,151,.12)}

/* ============================================================================
   CSUITE-1B THE FRAME ON EVERY PAGE (R-230T-FRAME, no bare pages). A page brought onto the governed frame opts its
   body into the one type family with this class, exactly as the dressed pages do (cs1 / cs3): Poppins from the shared
   fonts/ set, form controls inherit it. Font only: the page keeps its own colors, layout and wording.
   ============================================================================ */
html body.bwf-body{font-family:Poppins,-apple-system,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif!important;-webkit-font-smoothing:antialiased}
body.bwf-body input,body.bwf-body button,body.bwf-body select,body.bwf-body textarea{font-family:inherit}

/* ============================================================================
   TRAIN2-FIX item 3, THE FULL-BOTTOM LAW (W-T2-2, frame law, desk Oct 18): every governed page lays out as a
   full-viewport column (min-height 100vh flex column) with the footer pinned by margin-top auto, so the footer is
   always the true bottom edge at any content height, desktop and phone, EN and ES. bw_footer.js col() sets
   html.bwf-col on a page whose standalone footer is a direct child of a plain block body and moves the body's bottom
   margin/padding (the band that showed under the footer) into the footer itself. The same rules ride inside
   bw_footer.js for the pages that do not link this sheet.
   ============================================================================ */
html.bwf-col body{display:flex;flex-direction:column;min-height:calc(100vh - var(--bwf-mv,0px));min-height:calc(100dvh - var(--bwf-mv,0px));margin-bottom:0;padding-bottom:0}
html.bwf-col body>*{flex-shrink:0}
html.bwf-col body>footer.bwft{margin-top:0}html.bwf-col .bwf-gap{flex:1 0 12px}html.bwf-col .bwf-gap.sp{flex-basis:0}
/* TRAIN2-FIX-B B1: while the main list is loading the spacer holds a full screen (bw_footer.js holdWire) */
html.bwf-col.bwf-hold .bwf-gap{flex-basis:100vh}html.bwf-col body>.bwft-spinebar{width:calc(100% - 32px)}