/* ascenvo-tokens.css - the Ascenvo design system, 2026-09-23.
   Spec: ../DESIGN_SYSTEM_2026-09-23.md. Every page links css/fonts.css, then
   css/site.css (where it uses it), then this file, so these rules win the
   cascade over site.css; a tool page without site.css links this file BEFORE
   its own stylesheet, so its layout keeps winning. It keeps every variable name site.css already uses
   (--ink, --bg-2, --accent-fill ...) with the SAME values, and adds the new
   tokens and components beside them. ONE scheme: near-black blue ground, light
   text, electric blue accent. No light "paper" surface anywhere on this site.
   Contrast numbers beside tokens are WCAG ratios, measured. */

:root{
  /* existing palette, unchanged values (site.css :root) */
  --bg:#070b11; --bg-1:#0c1219; --bg-2:#111a24; --bg-soft:#0a1017;
  --line:#23303f;        /* decorative hairlines only (1.47:1) */
  --line-soft:#1a2430;
  --line-strong:#5a6e88; /* NEW: control borders, 3.36 on bg-2, 3.78 on bg */
  --ink:#f3f6fb;         /* 18.20 on bg */
  --ink-soft:#aab4c4;    /* 8.38 on bg-2 */
  --dim:#7c8799;         /* 4.83 on bg-2, 5.43 on bg: captions only */
  --accent:#3b82f6;      /* links on dark: 5.36 on bg, 4.77 on bg-2 */
  --accent-2:#1d4ed8;
  --accent-fill:#2563eb; /* white text on it 5.17 */
  --accent-ink:#ffffff;
  --accent-light:#9cc3ff;/* NEW name for the literal site.css uses 16x: 9.74 */
  --accent-hover:#7dabff;
  --accent-soft:rgba(59,130,246,.14);
  --accent-line:rgba(59,130,246,.42);
  --good:#34d399;
  /* traffic light: hue AND lightness differ (L .64 / .44 / .23), plus shape + word */
  --go:#6ee7b7;          /* 11.51 on bg-2 */
  --caution:#f59e0b;     /* 8.17 */
  --stop:#ef4444;        /* 4.66 */
  /* retention metals (assets/badge_icons/star_*.svg) */
  --metal-gold:#e0a526; --metal-platinum:#e6edf5; --flame:#fb923c;
  /* type: one display, one body, system mono for scores/timers */
  --font-display:"Barlow Condensed","Arial Narrow",ui-sans-serif,sans-serif;
  --font-body:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font:var(--font-body); /* site.css reads --font on body */
  --fs-1:.75rem; --fs-2:.875rem; --fs-3:1rem; --fs-4:1.25rem;
  --fs-5:clamp(1.625rem,1.2rem + 1.8vw,2.25rem);  /* 26-36 h2 (condensed runs larger) */
  --fs-6:clamp(2.5rem,1.6rem + 4vw,4rem);        /* 40-64 h1 */
  --lh-tight:1.05; --lh-body:1.6;
  --sp-h:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px;
  --r-frame:20px; --r-inner:16px; --r-card:12px; --r-ctl:8px; --r-pill:999px;
  --radius:var(--r-card);  /* site.css cards/tiers read --radius (was 2px) */
  --maxw:1120px; --gutter:16px; --touch:44px;
  --focus:0 0 0 3px var(--bg),0 0 0 5px var(--accent-light);
  color-scheme:dark;
}

body{overflow-wrap:anywhere}
h1,h2,h3,.band-head h2,h1.hero-h{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.005em}
h1,h1.hero-h{font-size:var(--fs-6)} h2{font-size:var(--fs-5)} h3{font-size:var(--fs-4)}
.eyebrow{font:600 var(--fs-2)/1 var(--font-display);letter-spacing:.1em;border-radius:var(--r-pill)}
.caption{font-size:var(--fs-1);color:var(--dim)}
/* focus: a 2 px light-blue ring outside a 3 px gap, on every tab stop. An outline,
   not a box-shadow, so a tool stylesheet that sets its own box-shadow on a button
   cannot erase it. Mouse focus stays quiet. */
:focus:not(:focus-visible){outline:none}
:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,.nav-toggle:focus-visible,
[role=button]:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
.wrap{padding:0 var(--gutter)}
@media (min-width:720px){.wrap{padding:0 var(--sp-3)}}

/* logo: a.brand > span.mark + "Ascenvo". The mark is drawn here in full so it
   renders on tool pages that do not load site.css; corners match the favicon (rx 6/24). */
.brand{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--ink);text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-4);line-height:1;min-height:var(--touch)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand .mark{display:inline-block;flex:0 0 auto;position:relative;width:28px;height:28px;border-radius:7px;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));box-shadow:0 4px 16px -4px rgba(59,130,246,.7)}
.brand .mark::before{content:"";position:absolute;inset:8px 8px auto 8px;height:3px;border-radius:3px;background:var(--accent-ink);
  box-shadow:0 5px 0 rgba(255,255,255,.55),0 10px 0 rgba(255,255,255,.3)}

/* standard header, self-sufficient: the same header.site renders on pages that
   load site.css and on tool pages that do not. Scoped to header.site so it
   cannot restyle a tool's own layout. */
header.site{position:sticky;top:0;z-index:20;background:rgba(7,11,17,.72);-webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);font-family:var(--font-body);line-height:1.6}
header.site .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);height:66px;
  max-width:var(--maxw);margin:0 auto;position:relative}
header.site .nav-links{display:flex;align-items:center;gap:var(--sp-3)}
header.site .nav-links a{color:var(--ink-soft);font-size:15px;font-weight:500;text-decoration:none}
header.site .nav-links a:hover{color:var(--ink)}
header.site .nav-links a.btn{display:inline-flex;align-items:center;justify-content:center;padding:0 20px;
  border:1px solid transparent;color:var(--accent-ink);background:var(--accent-fill);white-space:nowrap}
header.site .nav-links a.btn:hover{background:var(--accent-2);color:var(--accent-ink)}
header.site .nav-toggle{display:none;width:44px;height:44px;padding:0;flex:0 0 auto;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer}
header.site .nav-toggle-bar{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
header.site .nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(7px) rotate(45deg)}
header.site .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
header.site .nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-7px) rotate(-45deg)}

/* standard footer, fallback only (Slice D): tool pages that do not load site.css
   get the same footer.site layout. Every selector sits inside :where(), so it has
   zero specificity and site.css's own footer rules keep winning where it loads. */
:where(footer.site){border-top:1px solid var(--line);padding:var(--sp-5) 0;color:var(--dim);font-size:var(--fs-2);
  background:var(--bg-soft);font-family:var(--font-body);line-height:1.6}
:where(footer.site .wrap){max-width:var(--maxw);margin-left:auto;margin-right:auto}
:where(footer.site .foot-row){display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
:where(footer.site .foot-links){display:flex;flex-wrap:wrap;gap:0 var(--sp-3)}
:where(footer.site .foot-links a){display:inline-flex;align-items:center;min-height:var(--touch);color:var(--ink-soft)}
@media (max-width:719px){:where(footer.site .foot-row){flex-direction:column;text-align:center}
  :where(footer.site .foot-links){justify-content:center;gap:0 var(--sp-2)}}

/* page bar: the product title (and its own links) that a page's old header carried */
.page-bar{border-bottom:1px solid var(--line);background:var(--bg-soft);font-family:var(--font-body)}
.page-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);min-height:var(--touch);
  max-width:var(--maxw);margin:0 auto;font-size:var(--fs-2);color:var(--ink-soft)}
.page-bar-title{font:600 var(--fs-4)/1.2 var(--font-display);color:var(--ink)}
.page-bar-links{display:flex;flex-wrap:wrap;gap:0 var(--sp-2)}
.page-bar-links a{display:inline-flex;align-items:center;min-height:var(--touch);color:var(--accent);text-decoration:none}

/* buttons: 8 px radius, 44 px min */
.btn{min-height:var(--touch);border-radius:var(--r-ctl);font-family:var(--font-body);font-weight:600}
.btn-primary{background:var(--accent-fill);box-shadow:none}
.btn-primary:hover{background:var(--accent-2);filter:none;transform:none}
.btn-secondary,.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--accent-light);color:var(--accent-light);background:transparent}
.nav-toggle{border-radius:var(--r-ctl)}
.nav-links a{min-height:var(--touch);display:inline-flex;align-items:center}

.ax-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-3)}

/* PRODUCT FRAME: simulators and drills live inside it.
   <figure class="ax-frame"><div class="ax-frame-bar"><span class="ax-frame-dots"></span>
   <span class="ax-frame-title">911 Call-Taking Simulator</span><span class="ax-frame-meta">DRILL 3 of 10</span></div>
   <div class="ax-frame-body">...</div><figcaption class="ax-frame-cap">...</figcaption></figure> */
.ax-frame{margin:0;background:var(--bg-soft);border:1px solid var(--line-strong);border-radius:var(--r-frame);
  padding:var(--sp-h);box-shadow:0 24px 60px -28px rgba(0,0,0,.85);position:relative;max-width:100%}
.ax-frame-bar{display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-2);
  font:600 var(--fs-2)/1 var(--font-display);letter-spacing:.04em;color:var(--ink-soft)}
.ax-frame-dots{flex:none;width:34px;height:10px;background:radial-gradient(circle,var(--line-strong) 4px,transparent 4.5px) 0 50%/12px 10px repeat-x}
.ax-frame-live .ax-frame-dots{background-image:radial-gradient(circle,var(--stop) 4px,transparent 4.5px)}
.ax-frame-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-frame-meta{font-family:var(--font-mono);font-size:var(--fs-1);color:var(--dim)}
.ax-frame-body{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-inner);padding:var(--sp-3);overflow:auto;min-width:0}
.ax-frame-cap{padding:var(--sp-1) var(--sp-2) var(--sp-h);font-size:var(--fs-2);color:var(--ink-soft)}
/* every control inside a product frame is a 44 x 44 touch target (Slice D item 97) */
.ax-frame-body button,.ax-frame-body [role=button],.ax-frame-bar button{min-height:var(--touch);min-width:var(--touch)}
.ax-frame-showcase{background:linear-gradient(135deg,rgba(59,130,246,.14),transparent 45%),var(--bg-soft)}
.ax-frame-showcase::before,.ax-frame-showcase::after{content:"";position:absolute;width:28px;height:28px;border:2px solid var(--accent);pointer-events:none}
.ax-frame-showcase::before{top:-9px;left:-9px;border-right:0;border-bottom:0;border-top-left-radius:12px}
.ax-frame-showcase::after{bottom:-9px;right:-9px;border-left:0;border-top:0;border-bottom-right-radius:12px}

/* traffic-light status: never color alone (dot / triangle / square + word) */
.ax-status{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:var(--r-pill);
  border:1px solid currentColor;font:600 var(--fs-1)/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.ax-status::before{content:"";width:9px;height:9px;background:currentColor}
.ax-status-go{color:var(--go)} .ax-status-go::before{border-radius:50%}
.ax-status-caution{color:var(--caution)} .ax-status-caution::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ax-status-stop{color:var(--stop)} .ax-status-stop::before{border-radius:1px}

/* level chip + badge chip (retention: levels 1-60, star tiers) */
.ax-level-chip{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;padding:4px 12px 4px 4px;
  border-radius:var(--r-pill);background:var(--accent-soft);border:1px solid var(--accent-line);
  font:600 var(--fs-2)/1 var(--font-display);color:var(--accent-light);letter-spacing:.04em}
.ax-level-chip b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--accent-fill);color:var(--accent-ink);font-family:var(--font-mono);font-size:var(--fs-1)}
.ax-badge-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--bg-1);border:1px solid var(--line-strong);font-size:var(--fs-2);color:var(--ink)}
.ax-badge-chip img,.ax-badge-chip svg{width:20px;height:20px}
.ax-badge-chip .stars{color:var(--metal-gold);letter-spacing:1px}
.ax-badge-chip.platinum{border-color:var(--metal-platinum)} .ax-badge-chip.platinum .stars{color:var(--metal-platinum)}
.ax-xp-bar{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.ax-xp-bar>span{display:block;height:100%;background:var(--accent);border-radius:inherit}

input,select,textarea{min-height:var(--touch);border-radius:var(--r-ctl);border:1px solid var(--line-strong);font:inherit;max-width:100%}

@media (max-width:880px){
  header.site .nav-links a:not(.btn){display:none}
  header.site .nav-toggle{display:inline-flex}
  header.site .wrap.nav .brand{margin-right:auto}
  header.site .nav-links.open{position:absolute;top:100%;left:0;right:0;z-index:30;display:flex;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:var(--sp-1) var(--sp-3) var(--sp-2);background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(0,0,0,.7);max-height:80vh;overflow-y:auto}
  header.site .nav-links.open a:not(.btn){display:flex;padding:0 4px;min-height:var(--touch);border-bottom:1px solid var(--line-soft);font-size:16px}
  header.site .nav-links.open a.btn{margin-top:var(--sp-2);width:100%}
  /* phone logo. site.css hid the mark here because at 28 px beside the
     hamburger it read as a second toggle (QA C1, 2026-07-07). It returns at
     20 px, 8 px from the wordmark, so mark + word read as one logo, and the
     brand's margin-right:auto keeps the menu button at the far edge. */
  .brand{gap:var(--sp-1)}
  .brand .mark{display:inline-block;width:20px;height:20px;border-radius:5px}
  .brand .mark::before{inset:5px 5px auto 5px;height:2px;box-shadow:0 4px 0 rgba(255,255,255,.55),0 8px 0 rgba(255,255,255,.3)}
}
@media (max-width:480px){
  /* the phone logo is 28 px wider than the old hidden mark, so the signed-in
     bar gives the email label less room, and a long button label wraps
     instead of widening the page */
  .app-nav{gap:var(--sp-1)}
  .app-user #email-label{max-width:18vw}
  .btn{max-width:100%;white-space:normal;text-align:center}
}
@media print{header.site,.page-bar{display:none}}
@media (max-width:719px){
  .ax-frame{border-radius:var(--r-inner)}
  .ax-frame-body{padding:var(--sp-2);border-radius:var(--r-card)}
  .ax-frame-showcase::before,.ax-frame-showcase::after{display:none}
  .hero-cta .btn{width:100%}
  pre{white-space:pre-wrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}