/* ADOPTED from Briefing App public/shared/ro-tokens.css — the Row Ontario
   design-token system. DO NOT EDIT HERE: change the Briefing App source and
   re-copy. tools/lint/brand-lint.js fails the gate if this copy drifts from
   the source (sha256 pinned in ro-tokens.source-sha256). */
/* ============================================================================
   ro-tokens.css — Row Ontario design tokens + generic components
   RowOn Indoor Hat Trick partner briefing app

   HARD RULES (non-negotiable, from Row Ontario brand standards):
   - Flat colour only. NO gradients anywhere.
   - NO box shadows, NO text shadows, no decorative effects.
   - All spacing on the 8px grid (8 / 16 / 24 / 32 / 40 / 48).
   - Red is committed: large areas, never thin timid accents.
   - Sentence case for all headings — enforced by convention;
     NO text-transform:uppercase anywhere in this codebase.
   - One Row Ontario logo variant per screen.
   - Accent colours (blue / yellow / green) are for data visualisation and
     functional states ONLY — never identity, never replacing red.
   - Dark "board" theme: background #231F20, white text, panels on #231F20
     with 1px rgba(255,255,255,.12) rules; #332E2F is the ONLY elevation
     step. No other darks.
   ============================================================================ */

:root{
  /* palette */
  --ro-red:#E4002B;
  --ro-red-2:#C82029;
  --ro-ink:#231F20;
  --ro-paper:#FFFFFF;
  --ro-neutral:#F5F5F5;
  --ro-line:#E6E2E2;
  --ro-dim:#6E6868;
  /* data-viz / demo accents only — never identity */
  --ro-blue:#0078D0;
  --ro-yellow:#FFB114;
  --ro-green:#00A651;
  /* single dark elevation step — board theme only */
  --ro-elev:#332E2F;

  /* theme-flipping semantics (light defaults) */
  --bg:var(--ro-paper);
  --fg:var(--ro-ink);
  --fg-dim:var(--ro-dim);
  --hairline:var(--ro-line);
  --panel-bg:var(--ro-paper);

  /* 8px spacing grid */
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:40px;
  --s6:48px;

  /* radius */
  --radius:12px;
  --radius-sm:8px;

  /* type — scale 1.25 from 16px */
  --font:'Mont','Montserrat','Avenir Next','Segoe UI',Arial,sans-serif;
  --fs-0:16px;
  --fs-1:20px;
  --fs-2:25px;
  --fs-3:31px;
  --fs-4:39px;
  --fs-5:49px;
}

/* ============================================================================
   FONT KILL SWITCH — this is the ONLY @font-face block in the app.
   To drop the self-hosted Mont files, comment out or delete this one block;
   everything falls back to the system stack.
   ============================================================================ */
@font-face{font-family:'Mont';src:url('fonts/Mont-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Mont';src:url('fonts/Mont-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Mont';src:url('fonts/Mont-Heavy.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
/* ======================================================= end kill switch == */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-0);
  font-weight:400;
  line-height:1.5;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:900;line-height:1.1;margin:0 0 var(--s2);letter-spacing:-0.01em;}
h1{font-size:var(--fs-4);}
h2{font-size:var(--fs-2);}
h3{font-size:var(--fs-1);}
h4{font-size:var(--fs-0);font-weight:700;}
@media (min-width:720px){
  h1{font-size:var(--fs-5);}
  h2{font-size:var(--fs-3);}
}
p{margin:0 0 var(--s2);}
a{color:var(--ro-red);}
img,svg{max-width:100%;height:auto;}
ol,ul{margin:0 0 var(--s2);padding-left:var(--s3);}
li{margin:var(--s1) 0;}
strong,b{font-weight:700;}
.caption{font-size:12px;color:var(--fg-dim);}
.small{font-size:14px;}
:focus-visible{outline:3px solid var(--fg);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ---------- board theme (dark) ---------- */
[data-theme="board"]{
  --bg:var(--ro-ink);
  --fg:#FFFFFF;
  --fg-dim:rgba(255,255,255,.72);
  --hairline:rgba(255,255,255,.12);
  --panel-bg:var(--ro-ink);
  background:var(--ro-ink);
  color:#FFFFFF;
}
[data-theme="board"] a{color:#FFFFFF;}
[data-theme="board"] :focus-visible{outline-color:#FFFFFF;}

/* ---------- .section — page section wrapper ---------- */
.section{padding:var(--s5) 0;}
.section + .section{border-top:1px solid var(--hairline);}

/* ---------- .fact-strip — key facts in one wrapping row ---------- */
.fact-strip{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2) var(--s4);
  padding:var(--s2) 0;
}
.fact{min-width:0;}
.fact__label{display:block;font-size:12px;font-weight:700;color:var(--fg-dim);margin-bottom:2px;}
.fact__value{display:block;font-size:var(--fs-0);font-weight:700;}

/* ---------- .expand — depth-on-demand <details> panel ---------- */
.expand{
  border-left:8px solid var(--ro-red);
  border-radius:var(--radius-sm);
  background:var(--ro-neutral);
  margin:var(--s2) 0;
}
.expand > summary{
  cursor:pointer;
  font-weight:700;
  font-size:var(--fs-0);
  line-height:1.3;
  padding:var(--s2);
  display:flex;
  align-items:center;
  gap:var(--s1);
  list-style:none;
  border-radius:var(--radius-sm);
}
.expand > summary::-webkit-details-marker{display:none;}
.expand > summary::after{
  content:'+';
  margin-left:auto;
  flex-shrink:0;
  font-weight:700;
  font-size:var(--fs-1);
  line-height:1;
  color:var(--ro-red);
}
.expand[open] > summary::after{content:'\2212';}
.expand > *:not(summary){margin-left:var(--s2);margin-right:var(--s2);}
.expand > *:not(summary):last-child{padding-bottom:var(--s2);margin-bottom:0;}
/* nested depth-2 panel */
.expand .expand{
  background:var(--ro-paper);
  border:1px solid var(--ro-line);
  border-left:8px solid var(--ro-red-2);
}
[data-theme="board"] .expand{background:var(--ro-elev);}
[data-theme="board"] .expand .expand{background:var(--ro-ink);border-color:var(--hairline);border-left-color:var(--ro-red-2);}

/* ---------- .card — bordered content panel ---------- */
.card{
  background:var(--panel-bg);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:var(--s3);
}
.card > :last-child{margin-bottom:0;}
.card-grid{display:grid;gap:var(--s2);grid-template-columns:1fr;}
@media (min-width:720px){
  .card-grid--2{grid-template-columns:1fr 1fr;}
  .card-grid--3{grid-template-columns:1fr 1fr 1fr;}
}

/* ---------- .promise — Simple / Fun / Fair blocks ---------- */
.promise-row{display:grid;gap:var(--s3);grid-template-columns:1fr;margin:var(--s3) 0;}
@media (min-width:720px){.promise-row{grid-template-columns:1fr 1fr 1fr;}}
.promise{border-top:8px solid var(--ro-red);padding-top:var(--s2);}
.promise__word{font-size:var(--fs-3);font-weight:900;line-height:1.1;margin:0 0 var(--s1);}
.promise__copy{margin:0;color:var(--fg-dim);}

/* ---------- .table — horizontally scrollable table wrapper ---------- */
/* width:auto, not 100%: inside .expand this element also carries the
   var(--s2) side margins from `.expand > *:not(summary)`, so a 100% width
   resolved against the panel's content box made the wrapper 2×--s2 too
   wide and pushed it past the panel's right edge. auto subtracts them. */
.table{width:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s2) 0;}
.table table{width:100%;border-collapse:collapse;font-size:14px;}
.table th{
  font-size:12px;
  font-weight:700;
  color:var(--fg-dim);
  text-align:left;
  padding:var(--s1);
  border-bottom:1px solid var(--fg);
  white-space:nowrap;
}
.table td{padding:var(--s1);border-bottom:1px solid var(--hairline);vertical-align:top;}
.table .num{text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- .demo-launch — solid red demo launcher ---------- */
.demo-launch{
  display:block;
  /* Every launcher sits inside an .expand panel and picks up that panel's
     var(--s2) side margins, so a plain width:100% overhung the panel's
     right edge by one --s2. A button shrink-to-fits on width:auto, so
     subtract the two margins explicitly instead. */
  width:calc(100% - var(--s2) * 2);
  background:var(--ro-red);
  color:#FFFFFF;
  border:0;
  border-radius:var(--radius-sm);
  font:inherit;
  font-weight:700;
  font-size:var(--fs-0);
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  padding:var(--s2) var(--s3);
  cursor:pointer;
  margin:var(--s2) 0;
}
.demo-launch:hover{background:var(--ro-red-2);}
.demo-launch:active{transform:translateY(1px);}
.demo-launch:focus-visible{outline:3px solid var(--fg);outline-offset:2px;}
.demo-launch .caption{display:block;color:#FFFFFF;font-weight:400;margin-top:2px;}

/* ---------- .chip-illustrative — fictional-data marker ---------- */
.chip-illustrative{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--ro-yellow);
  color:var(--ro-ink);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  border-radius:999px;
  padding:6px 12px;
}
.chip-illustrative--fixed{position:fixed;top:var(--s1);right:var(--s1);z-index:50;max-width:calc(100% - var(--s3));}
/* Below 720px the fixed chip would sit on top of the header wordmark and title,
   so it returns to the normal flow and the header keeps its identity visible. */
@media (max-width:900px){
  .chip-illustrative--fixed{position:static;display:block;margin:var(--s1) var(--s2) 0;max-width:none;}
}

/* ---------- .overlay — full-screen demo iframe shell ---------- */
.overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  background:var(--ro-ink);
}
.overlay[hidden]{display:none;}
.overlay__bar{
  display:flex;
  align-items:center;
  gap:var(--s2);
  min-height:56px;
  padding:var(--s1) var(--s2);
  background:var(--ro-ink);
  color:#FFFFFF;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.overlay__title{
  flex:1;
  min-width:0;
  font-weight:700;
  font-size:var(--fs-0);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.overlay__close{
  flex-shrink:0;
  background:var(--ro-red);
  color:#FFFFFF;
  border:0;
  border-radius:var(--radius-sm);
  font:inherit;
  font-weight:700;
  font-size:var(--fs-0);
  padding:var(--s1) var(--s2);
  min-height:40px;
  cursor:pointer;
}
.overlay__close:hover{background:var(--ro-red-2);}
.overlay__close:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;}
.overlay__frame{flex:1;width:100%;border:0;display:block;background:var(--ro-ink);}

/* ---------- utilities ---------- */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}