/* dac.css — the DIRECT ACTION theme layer for the command centre (Fable, 2026-10-28).
   Loaded after cb.css / sc.css (and each page's own sheets) on every command-centre page, so the signed-in site and the public
   splash (da.css) read as one site. cb.css stays the design system; this file only:
     1. maps cb.css's tokens onto the splash's Gunmetal palette (da.css palette A) and the splash's fonts;
     2. draws the header band around the DIRECT ACTION key art (assets/hero-banner.png, 1983x793, the logotype is IN the art, so it
        is always shown whole, never cropped);
     3. adds the few military details: the splash's brand mark, the red index stroke under panel heads, the stencilled menu.
   House rules (Docs/RV-Theme & UI Design Doc.md, 80 · The Codex/Anti-AI-slop): no raw value outside the token block; chrome is
   solid (no gradient, glow or glass on bars, panels or buttons); the red is a FILL with white text, and red as text or an icon is
   --rv-accent-contrast (#E5383F, 4.7:1 on the ground) at large sizes only. The key art keeps its own light: the blurred copy of
   it behind the band is art, not chrome. */

/* ---------- 1. tokens ---------- */
:root{
  /* Gunmetal (da.css palette A) */
  --da-deep:#050606;                 /* the key art's own black */
  --rv-bg:#0A0B0C;
  --rv-surface-1:#121417;
  --rv-surface-2:#181B1F;
  --rv-surface-3:#1F2328;
  --rv-elev:#262B31;
  --rv-hairline:#1C1F24;
  --rv-border-1:#2B3036;
  --rv-border-2:#3A4048;
  --rv-text-strong:#E6E9EC;
  --rv-text:#B4BBC2;                 /* 10.2:1 on the ground */
  --rv-text-dim:#858D96;             /* 5.9:1 on the ground, 4.7:1 on surface-3 */
  --rv-text-faint:#5E666F;
  --rv-accent:#C1121F;               /* fill only; white on it 6.2:1 */
  --rv-accent-hover:#D11A27;
  --rv-accent-press:#9E0E19;
  --rv-accent-weak:#1E0809;
  --rv-accent-line:#5A1016;
  --rv-accent-contrast:#E5383F;      /* icons, the focus ring, large text only */
  --rv-text-on-accent:#FFFFFF;
  --rv-focus:#E5383F;
  --rv-scrim:rgba(5,6,6,.8);         /* the one translucent surface */
  --cb-band-scrim:rgba(5,6,6,.5);
  --cb-brk-color:var(--rv-border-2);
  --cb-texture:rgba(230,233,236,.06);
  --cb-texture-strong:rgba(230,233,236,.12);
  /* the splash's type */
  --cb-font-display:"Saira Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --cb-font-sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --cb-font-mono:"IBM Plex Mono",Consolas,"Liberation Mono",Menlo,monospace;
  /* the band: the key art's box (its own ratio) and the copy box's fixed height, so the art sits in one place on every page */
  --dac-art-ratio:1983/793;
  --dac-art-w:520px;                 /* 520 x 208 */
  --dac-art-blur:28px;
  --sc-hero-copy-h:0px;              /* no fixed height: the full-width art sets the box's height (2026-10-28, owner) */
  --dac-tick:var(--rv-s-6);          /* the red index stroke under a panel head */
  --dac-tick-h:2px;
}
html,body{background:var(--rv-bg)}

/* ---------- 2. the top bar: the splash's mark and name, a solid bar on the art's black ---------- */
.cb-nav{background:var(--da-deep);border-bottom:2px solid var(--rv-accent)}
.dac-brand{gap:var(--rv-s-2);color:var(--rv-text-strong)}
.dac-brand:hover{color:var(--rv-text-strong)}
.dac-brand__mark{width:var(--rv-s-6);height:var(--rv-s-6);flex:0 0 auto}
.dac-brand__mark path{fill:var(--rv-text-strong)}
.dac-brand__mark .dac-brand__tip{fill:var(--rv-accent)}
.dac-brand .cb-brand__name{font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:var(--rv-fs-h1);line-height:1}
.cb-nav__link{letter-spacing:.02em}
.cb-nav__link .cb-icon{color:var(--rv-text-dim)}
.dac-short{display:none}
@media(max-width:559px){
  .dac-long{display:none}
  .dac-short{display:inline}
  .dac-brand .cb-brand__name{font-size:var(--rv-fs-h2)}
}
/* the account menu on the art's black */
.sc-acctmenu__pop{background:var(--rv-surface-1);border-color:var(--rv-border-2)}

/* ---------- 3. the header band ---------- */
.cb-hero{background:var(--da-deep);border-color:var(--rv-accent)}
/* behind everything: the key art again, soft and dark, so the band's edges carry its red and black instead of a flat fill.
   Scaled up so the blur never shows an edge. */
.cb-hero__media{filter:blur(var(--dac-art-blur)) brightness(.6) saturate(1.15);transform:scale(1.25);object-position:50% 45%}
.cb-hero--band .cb-hero__scrim{background:var(--cb-band-scrim)}
/* the strip across the top: breadcrumb, development note, stamp */
.cb-hero--band .cb-docbar{background:var(--da-deep);border-color:var(--rv-border-2)}
.cb-crumbs{font-family:var(--cb-font-mono);letter-spacing:.06em}
.cb-stamp{color:var(--rv-text)}
/* the copy box: solid, the art's own black, so the key art inside it meets no seam */
.cb-hero--band .cb-hero__copy{background:var(--da-deep);border-color:var(--rv-border-2);border-radius:var(--rv-r-md)}
/* the key art where the old logo was: whole, at its own ratio */
.cb-hero__logo{width:min(100%,var(--dac-art-w));height:auto;aspect-ratio:var(--dac-art-ratio);object-fit:contain}
/* ...and in the header band it fills its box edge to edge (owner, 2026-10-28: "the game banner on the Command Center top needs to
   fit the full box its in"): the box's padding is cancelled above and at the sides, the art keeps its ratio so the logotype stays
   whole, the box's rounded corners clip it, and the text sits under it. The box no longer has a fixed height: the art sets it. */
.cb-hero--band .cb-hero__copy{overflow:hidden}
.cb-hero--band .cb-hero__title,html.sc-hero-centred .cb-hero--band .cb-hero__title{align-self:stretch;margin:calc(-1 * var(--rv-s-4)) calc(-1 * var(--rv-s-5)) var(--rv-s-4)}
.cb-hero--band .cb-hero__logo,html.sc-hero-centred .cb-hero--band .cb-hero__logo{display:block;width:100%;max-width:none;margin:0}
/* in the centred layout Home's buttons sit in the box's bottom corners (sc.css): room for them under the text */
html.sc-hero-centred .cb-hero--band .cb-hero__copy:has(.cb-hero__ctas){padding-bottom:calc(var(--cb-ctl-h) + 2 * var(--rv-s-5))}
.cb-hero__sub{color:var(--rv-text);font-size:var(--rv-fs-body);max-width:72ch}
.cb-hero--band .cb-stats{background:var(--da-deep);border-color:var(--rv-border-2)}
/* item pages (a clan, a player, a battle, an event) keep their own name as the title, in the splash's display face */
.cb-hero__title.cb-h1,.cb-hero__title.tn-feat__name{font-family:var(--cb-font-display);text-transform:none}
@media (min-width:1880px){
  html.sc-hero-centred .cb-hero--band .cb-hero__sub{min-height:2lh}
}

/* ---------- 4. the site menu: stencilled capitals on the art's black, the active section a red bar ---------- */
.cb-tabs{background:var(--da-deep);border-bottom-color:var(--rv-border-2)}
#sc-tabs .cb-tab{text-transform:uppercase;letter-spacing:.06em;font-size:var(--rv-fs-small);font-weight:700}
#sc-tabs .cb-tab[aria-current="page"]{border-bottom-width:3px}
.cb-tabs--inpage{background:transparent}
.cb-tabs--inpage .cb-tab{letter-spacing:.02em}

/* ---------- 5. panels: the red index stroke under each head (a flat stroke, the brackets' sibling) ---------- */
.cb-panel__head{position:relative}
.cb-panel__head::after{content:"";position:absolute;left:0;bottom:-1px;width:var(--dac-tick);height:var(--dac-tick-h);background:var(--rv-accent)}
.cb-panel--flush .cb-panel__head::after{left:var(--rv-s-4)}
.cb-panel__title,.cb-h2,.cb-empty__title,.cb-clanhead__name,.cb-season__title{letter-spacing:.01em}
.cb-clanhead__tag,.cb-tag{font-family:var(--cb-font-mono)}
.cb-badge{font-family:var(--cb-font-display);font-weight:800;letter-spacing:.04em}
.cb-empty{border-color:var(--rv-border-2)}
/* the side rails' widgets: square, a red top edge, the head in stencilled capitals */
@media (min-width:1880px){
  .sc-rail .cb-panel__title{font-weight:700;letter-spacing:.06em}
  .sc-rail .cb-panel__head::after{display:none}
  html.sc-rails-solid .sc-rail{background:var(--da-deep);border-color:var(--rv-border-2)}
}

/* ---------- 6. footer ---------- */
.cb-footer{background:var(--da-deep);border-top-color:var(--rv-border-2);margin-top:var(--rv-s-8)}

/* ---------- 7. a notice for something DIRECT ACTION does not have yet (Tactical Room, Briefing Rooms feed) ---------- */
.dac-later{display:flex;gap:var(--rv-s-4);align-items:flex-start;padding:var(--rv-s-5);background:var(--rv-surface-1);border:1px solid var(--rv-border-2);border-left:3px solid var(--rv-accent);border-radius:var(--rv-r-md)}
.dac-later__icon{flex:0 0 auto;color:var(--rv-accent-contrast)}
.dac-later__icon .cb-icon{width:var(--cb-icon-lg);height:var(--cb-icon-lg)}
.dac-later__title{font-family:var(--cb-font-display);font-size:var(--rv-fs-h1);font-weight:700;line-height:1.15;color:var(--rv-text-strong)}
.dac-later__text{margin-top:var(--rv-s-2);font-size:var(--rv-fs-small);color:var(--rv-text-dim);max-width:68ch}
.dac-later__list{margin-top:var(--rv-s-3);display:flex;flex-direction:column;gap:var(--rv-s-1);font-size:var(--rv-fs-small);color:var(--rv-text);max-width:68ch}
.dac-later__list li{position:relative;padding-left:var(--rv-s-4)}
.dac-later__list li::before{content:"";position:absolute;left:0;top:.6em;width:var(--rv-s-2);height:var(--dac-tick-h);background:var(--rv-text-dim)}
.dac-later .cb-btns{margin-top:var(--rv-s-4)}