/* rl-ui.css - THE canonical design system for the Supply Chain Lab.
   ---------------------------------------------------------------------------
   The lab grew three different button vocabularies:
       old A (dashboard, part2) : .btn.solve  /  .btn.ghost
       old B (part3, part4)     : .solve      /  .gbtn
       new   (chain-game, …)    : .btn.red    /  .btn.gh  /  .btn.navy
   rmit-lab.css only ever covered the topbar/footer, so every page invented its
   own look. This file normalises EVERY alias to one system, so all 85+ pages
   render identically without editing them one by one.

   It is injected just before </body> by the Lambda, i.e. AFTER each page's own
   <style> block - so equal-specificity rules win on document order and we do
   not need !important (which would be unoverridable for genuine one-offs).

   Tokens: RMIT navy #000054 · red #E60028 · line #e6e8f2 · ink #0a0a23.

   2026-09-06 design-audit contrast pass (probe2): --rl-mut was 4.455:1 on --rl-bg (fails
   WCAG AA 4.5:1 for normal text on ~190 elements site-wide); --rl-ok was 3.16:1 on its own
   .pill.ok tint and 3.49:1 as white-on-.tog.on. Both darkened just enough to clear 4.5:1
   with margin; hue kept close to the original so nothing reads as a different colour.
   -------------------------------------------------------------------------*/
:root{
  --rl-navy:#000054; --rl-navy-2:#0a0a6e; --rl-red:#E60028; --rl-red-2:#c60023;
  --rl-ink:#0a0a23; --rl-mut:#5c6088; --rl-line:#e6e8f2; --rl-bg:#f6f7fb;
  --rl-ok:#127536; --rl-amber:#e8a13a;
  --rl-r:12px;                       /* canonical control radius */
  --rl-surface-r:18px;
  --rl-tile-r:14px;
  --rl-compact-r:10px;
  --rl-surface-shadow:0 1px 2px rgba(10,10,40,.04),0 16px 34px -26px rgba(8,8,60,.22);
  --rl-content-pad:clamp(16px,2.2vw,24px);
  --rl-control-h:42px;
  --rl-control-compact-h:34px;
  --rl-touch-h:44px;
  --rl-tile-h:80px;
  --rl-kpi-h:76px;
  --rl-grid-gap:12px;
  --rl-spring:cubic-bezier(.2,.9,.25,1);
  --lab-max:min(1440px,calc(100vw - 48px));
}

/* ===== BUTTONS =========================================================== */
/* shared skeleton for every alias */
.btn, .solve, .gbtn, .solvebtn, .ghostbtn{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:700; font-size:14px; line-height:1;
  border:0; border-radius:var(--rl-r);
  padding:13px 18px; cursor:pointer;
  min-height:var(--rl-control-h); box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s var(--rl-spring), box-shadow .2s var(--rl-spring),
             background .2s, border-color .2s, filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover, .solve:hover, .gbtn:hover, .solvebtn:hover, .ghostbtn:hover{
  transform:translateY(-2px);
}
.btn:active, .solve:active, .gbtn:active, .solvebtn:active, .ghostbtn:active{
  transform:translateY(0) scale(.985);
}
.btn:disabled, .solve:disabled, .gbtn:disabled{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}
.btn:focus-visible, .solve:focus-visible, .gbtn:focus-visible{
  outline:2px solid var(--rl-red); outline-offset:2px;
}

/* PRIMARY - the one action that runs the model. Red, and only ever one. */
.btn.solve, .btn.red, .solve, .solvebtn, .btn.primary{
  background:var(--rl-red); color:#fff;
  box-shadow:0 10px 24px -12px rgba(230,0,40,.65);
}
.btn.solve:hover, .btn.red:hover, .solve:hover, .solvebtn:hover, .btn.primary:hover{
  background:var(--rl-red-2); box-shadow:0 14px 30px -12px rgba(230,0,40,.75);
}

/* SECONDARY - supporting actions. White with a hairline. */
.btn.ghost, .btn.gh, .gbtn, .ghostbtn, .btn.secondary{
  background:#fff; color:var(--rl-navy); border:1.5px solid var(--rl-line);
  box-shadow:none;
}
.btn.ghost:hover, .btn.gh:hover, .gbtn:hover, .ghostbtn:hover, .btn.secondary:hover{
  border-color:var(--rl-navy); background:#fff;
}

/* TERTIARY / emphasis - navy. Used for "open", "host", confirm. */
.btn.navy{
  background:var(--rl-navy); color:#fff;
  box-shadow:0 10px 24px -12px rgba(0,0,84,.6);
}
.btn.navy:hover{ background:var(--rl-navy-2); }

/* a story button is never the primary action - it loads data, it doesn't solve */
#btn_story, #story{
  background:#fff; color:var(--rl-navy);
  border:1.5px solid var(--rl-navy); font-weight:700; box-shadow:none;
}
#btn_story:hover, #story:hover{ background:#f4f6ff; }

/* button rows never overflow their card (.btnrow is the newer pages' alias) */
.btns, .btnrow{ display:flex; gap:10px; flex-wrap:wrap; }
.btns > .btn, .btns > .solve, .btns > .gbtn,
.btnrow > .btn, .btnrow > .solve, .btnrow > .gbtn{ flex:1 1 auto; min-width:0; }

/* Small in-panel controls the pages invented on their own (.tog = ripple's
   mitigation switches, .chip = filters, .tab = section switchers). They were
   never part of any system, so they drifted to their own radii and weights. */
.tog, .chip, .tab{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:700; font-size:12.5px; line-height:1;
  border-radius:9px; cursor:pointer;
  min-height:var(--rl-control-compact-h); box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .18s var(--rl-spring), background .2s, border-color .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.tog:active, .chip:active, .tab:active{ transform:scale(.96); }
.tog:focus-visible, .chip:focus-visible, .tab:focus-visible{
  outline:2px solid var(--rl-red); outline-offset:2px;
}
/* an inactive toggle is a choice, not an action - don't dress it as primary */
.tog{ background:var(--rl-navy); color:#fff; border:0; padding:8px 14px; }
.tog.on{ background:var(--rl-ok); color:#fff; }
.chip, .tab{ background:#fff; color:var(--rl-navy); border:1.5px solid var(--rl-line); padding:7px 13px; }
.chip.on, .tab.on, .chip[aria-selected="true"], .tab[aria-selected="true"]{
  background:var(--rl-navy); color:#fff; border-color:var(--rl-navy);
}

/* ===== SURFACES ========================================================== */
.card, .panel, .mapcard{
  min-width:0; box-sizing:border-box;
  background:#fff; border:1px solid var(--rl-line); border-radius:var(--rl-surface-r)!important;
  box-shadow:var(--rl-surface-shadow)!important;
}
body .card.card,body .panel.panel,body .mapcard.mapcard{border-radius:var(--rl-surface-r)!important;}

/* ===== PAGE GEOMETRY ==================================================== */
/* The teaching note at the bottom of each activity used to come from several
   generations of templates (1120px, 1240px, 1464px and bespoke offsets).
   lab-layout.js measures the activity's real content frame and gives the note
   exactly the same outer edges. These rules are the no-JS fallback and the
   shared surface vocabulary for all generations of page. */
.edu-band{
  width:min(1280px,calc(100% - 44px))!important;
  max-width:none!important;
  margin:26px auto 40px!important;
  padding:0!important;
  box-sizing:border-box;
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
.edu-card{
  width:100%; min-width:0; height:100%; box-sizing:border-box;
  background:#fff!important; border:1px solid var(--rl-line)!important;
  border-left:1px solid var(--rl-line)!important;
  border-radius:var(--rl-surface-r)!important;
  padding:var(--rl-content-pad)!important;
  box-shadow:var(--rl-surface-shadow)!important;
}
.edu-grid{
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important; align-items:stretch!important;
}
.edu-grid>*{min-width:0;height:100%;}
.edu-grid h4{margin-top:0;}
.edu-formula{border-radius:10px!important;}

/* One surface language across old, new and utility templates. Padding stays
   owned by each simulation because maps, tables and controls need different
   interiors; the outer geometry and elevation no longer drift. */
.rl-panel,.lp-panel,.data-card,.control-card,.profile,.answer{
  min-width:0; box-sizing:border-box;
  border:1px solid var(--rl-line);
  border-radius:var(--rl-surface-r)!important;
  box-shadow:var(--rl-surface-shadow)!important;
}
.profile{width:100%;min-width:0;min-height:116px;}
.sc-grid,.answer-strip,.edu-grid{align-items:stretch;}
.sc-grid>.sc-card,.answer-strip>.answer{height:100%;}
.rl-footer{box-sizing:border-box;width:100%;}

/* ===== KPI TILES ========================================================= */
.tiles,.kpis,.answer-strip{gap:var(--rl-grid-gap)!important;align-items:stretch;}
.tiles>.tile,.kpis>.kpi,.answer-strip>.answer{height:auto!important;box-sizing:border-box;}
.tiles>.tile{min-height:var(--rl-tile-h)!important;}
.kpis>.kpi{min-height:var(--rl-kpi-h)!important;}
.answer-strip>.answer{min-height:73px!important;}
.tile{
  min-width:0; min-height:var(--rl-tile-h);
  padding:12px 14px!important;
  border-radius:var(--rl-tile-r)!important;
}
.kpi{
  min-width:0; min-height:var(--rl-kpi-h);
  padding:12px 14px!important;
  border-radius:var(--rl-tile-r)!important;
  box-sizing:border-box;
}
.answer{
  min-height:73px;
  padding:14px 16px!important;
  border-radius:var(--rl-tile-r)!important;
}
.stat{border-radius:var(--rl-tile-r)!important;}
.metric{border-radius:var(--rl-compact-r)!important;}
.stage .box{border-radius:var(--rl-surface-r)!important;}
.tile .v, .tile .big{ font-weight:800; letter-spacing:-.02em; }
.tile .k, .tile .cap{
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}

/* ===== PILLS / BADGES ==================================================== */
.pill{
  font-family:Inter,system-ui,sans-serif; font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:100px; background:#f1f1f6; color:#40405c;
}
.pill.ok{ background:#e9f7ee; color:var(--rl-ok); }
.pill.warn{ background:#fff4e5; color:#8a5200; }

/* ===== RANGE SLIDERS ===================================================== */
input[type=range]{ accent-color:var(--rl-red); }
input[type=text],input[type=number],input[type=email],input[type=password],
input[type=search],input[type=url],input[type=tel],input[type=date],input[type=time],
select,textarea{
  min-height:var(--rl-control-compact-h);
  max-width:100%; box-sizing:border-box;
  border-radius:var(--rl-compact-r)!important;
}
.as-i.as-time,.blk .fields input,.db input,.stp input{
  min-height:var(--rl-control-compact-h)!important;
  box-sizing:border-box!important;
  border-radius:var(--rl-compact-r)!important;
}
.stp button{min-height:var(--rl-control-compact-h)!important;box-sizing:border-box!important;}
input[type=submit],.as-btn,.cg-btn{
  min-height:var(--rl-control-h);
  box-sizing:border-box;
}
button.seg,.seg button,.mode,.cg-tab,.pro-tab{
  min-height:var(--rl-control-compact-h);
  box-sizing:border-box;
}

/* ===== ACCESSIBILITY BASELINE ========================================== */
/* !important here on purpose: probe2 found a few pages whose own `:focus{outline:none}`
   (higher selector specificity, e.g. black-mount-water-optimiser.html's `.controls
   input:focus`) or inline `style.outline` (dp-adp-game.html's order buttons) silently wins
   over this baseline, leaving keyboard users with no focus indicator at all. This rule only
   ever ADDS an outline on :focus-visible; it never touches border/background/box-shadow, so
   a page's own focus styling for those still shows through underneath it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[role="button"]:focus-visible,[role="tab"]:focus-visible{
  outline:3px solid rgba(230,0,40,.42)!important;outline-offset:3px!important;
}
.rl-skip{position:fixed;left:12px;top:8px;z-index:12000;transform:translateY(-150%);
  padding:10px 14px;border-radius:8px;background:var(--rl-navy);color:#fff;
  font:800 13px Inter,system-ui,sans-serif;text-decoration:none}
.rl-skip:focus{transform:translateY(0)}
.rl-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.rl-table-scroll{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.rl-table-scroll:focus-visible{outline:3px solid rgba(230,0,40,.32);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== LEARNING TOOLS: part of the layout, never on top of content ======= */
/* Some of the newer pages never reset the UA margin, so they sat 8px off the
   viewport while every older page was flush. One baseline for all of them. */
body{ margin:0; background:var(--rl-bg); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
.rl-copyright{
  width:100vw!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
}
#rl-tools-dock{display:flex;align-items:center;gap:8px;min-width:0}
#rl-tools-dock>#ll-pill,#rl-tools-dock>#as-pill{position:static!important;inset:auto!important;transform:none!important;margin:0!important;min-height:var(--rl-control-compact-h)!important;box-sizing:border-box!important;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none!important}
#rl-tools-dock.rl-tools-inbar{position:static;flex:0 0 auto;z-index:auto;margin-left:auto}
#rl-tools-dock.rl-tools-inbar>#ll-pill,#rl-tools-dock.rl-tools-inbar>#as-pill{padding:8px 12px!important;font-size:11px!important;border:1px solid rgba(255,255,255,.32)!important}
#rl-tools-dock.rl-tools-inline{position:relative;z-index:20;width:min(1440px,100%);box-sizing:border-box;margin:0 auto;padding:10px clamp(12px,3vw,28px);justify-content:flex-end;background:#fff;border-bottom:1px solid #e6e8ee}
#rl-tools-dock>#rlh-fab{display:none}

@media (max-width:640px){
  button,[role="button"]{min-height:40px!important;box-sizing:border-box!important;}
  [role="button"]:not(button){display:inline-flex!important;align-items:center;justify-content:center;}
  .btn, .solve, .gbtn, .solvebtn, .ghostbtn{ min-height:var(--rl-touch-h)!important; padding:12px 14px; font-size:13.5px; }
  .as-btn,.cg-btn{min-height:var(--rl-touch-h);}
  .tog,.chip,.tab,button.seg,.seg button,.mode,.cg-tab,.pro-tab{min-height:40px;}
  .lp-btn,#ll-pill,#as-pill,.rlh-pill,.rl-home,.host-pill{min-height:var(--rl-touch-h)!important;box-sizing:border-box!important;}
  input[type=text],input[type=number],input[type=email],input[type=password],
  input[type=search],input[type=url],input[type=tel],input[type=date],input[type=time],
  select,textarea{min-height:40px;font-size:16px!important;}
  .as-i.as-time,.blk .fields input,.db input,.stp input,.stp button{min-height:40px!important;}
  .btns > .btn, .btns > .solve, .btns > .gbtn,
  .btnrow > .btn, .btnrow > .solve, .btnrow > .gbtn{ flex:1 1 46%; }
  .edu-band{width:calc(100% - 24px)!important;margin:20px auto 30px!important;}
  .edu-grid{grid-template-columns:1fr!important;gap:16px!important;}
  #rl-tools-dock.rl-tools-inline{width:100%;justify-content:flex-end;gap:6px;padding:8px 12px}
  #rl-tools-dock>#ll-pill,#rl-tools-dock>#as-pill{flex:1 1 0;justify-content:center!important;min-width:0;min-height:var(--rl-touch-h)!important;padding:10px 11px!important;font-size:11px!important}
  #rl-tools-dock>#rlh-fab{display:block!important;position:static!important;inset:auto!important;transform:none!important;z-index:auto!important;flex:1 1 0;min-width:0}
  #rl-tools-dock>#rlh-fab button{width:100%;min-width:0;min-height:var(--rl-touch-h)!important;padding:10px 12px!important;border-radius:999px!important;font-size:11px!important;box-shadow:none!important;overflow:hidden;text-overflow:ellipsis}
}

/* 2026-09-05 public-readiness: OSM tiles replace CARTO (API key now required). Keep the light house look and hide Leaflet 1.9 attribution flag site-wide. */
.leaflet-tile-pane{filter:saturate(.62) brightness(1.03)}
.leaflet-attribution-flag{display:none!important}
/* A dynamically rendered Australian shell can race the host layer's fallback
   row. Once its real topbar exists, the temporary row is redundant. */
body:has(.as-top) .rlh-fallback-row{display:none!important}
/* The injected copyright band is the canonical footer for Australian shells. */
.as-footer{display:none!important}

/* 2026-09-05 one content width for the whole lab (decision: 1440px, fluid). Pages declare 560-1900px on
   their own wrappers; this token wins on specificity so topbar, hero, panels, About band and footer share
   one column. lab-layout.js aligns the sticky bar and About band to whatever column results. */
html:root{--max-width:var(--lab-max);--max:var(--lab-max)}
html body main,html body .wrap,html body .rl-hero,html body .rl-topbar-in,html body .rl-foot-inner,html body .edu-band,
html body div.topbar,html body div.hero,html body .container,html body .shell,html body .lp-main,html body .lp-wrap,
html body .cg-wrap,html body .tg-wrap,html body .tg-hero,html body .page,html body>h1,html body>table,html body .labhelp-band>*{max-width:var(--lab-max)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box;min-width:0}
html body main,html body .wrap,html body .rl-hero,html body .rl-topbar-in,html body .rl-foot-inner,html body .edu-band,
html body div.topbar,html body div.hero,html body .container,html body .shell,html body .lp-main,html body .lp-wrap,
html body .cg-wrap,html body .tg-wrap,html body .tg-hero,html body .page{width:min(var(--lab-max),calc(100% - 48px))!important;box-sizing:border-box;min-width:0}
@media(max-width:640px){html body main,html body .wrap,html body .rl-hero,html body .rl-topbar-in,html body .rl-foot-inner,html body .edu-band,html body div.topbar,html body div.hero,html body .container,html body .shell,html body .lp-main,html body .lp-wrap,html body .cg-wrap,html body .tg-wrap,html body .tg-hero,html body .page{width:calc(100% - 24px)!important}}
.rl-sticky-top{position:sticky;top:0;z-index:40}
.rl-brand img.rl-logo,.brand img.rl-logo,.support-brand img.rl-logo{height:18px;width:auto;display:block}
/* house eyebrow chip, available to every page */
.rl-kick{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:999px;background:#fdeef1;color:#E60028;font:700 11px/1.4 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}
/* About-box fallback for shells that never defined it (pages with their own .edu-* rules keep them) */
.edu-band{margin:22px auto 0}
.edu-card{background:#fffdfa;border:1px solid #e7e9f5;border-left:4px solid #E60028;border-radius:10px;padding:20px 22px;font-family:Inter,system-ui,sans-serif;color:#191933}
.edu-card h3{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#000054;margin:0 0 10px}
.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.edu-grid h4{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#E60028;margin:0 0 5px}
.edu-grid p{font-size:13px;line-height:1.5;color:#33365c;margin:0}
.edu-src{margin-top:12px;font-size:12.5px;color:#6b6b88}.edu-src a{color:#000054;font-weight:600}
@media(max-width:760px){.edu-grid{grid-template-columns:1fr}}
/* one page-title scale lab-wide (lab-layout.js tags the first real h1; the home hero is excluded) */
.rl-page-title{font-size:clamp(30px,4.2vw,42px)!important;line-height:1.12!important;letter-spacing:-.02em!important;font-weight:800!important}

/* W1 mobile: any data table scrolls inside itself instead of widening the page */
@media(max-width:640px){table{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* W10 accessibility: honour the OS "reduce motion" setting everywhere (CSS motion only; canvas loops are unaffected) */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* W2 mobile: the two help-band buttons must wrap instead of pushing the page 8px wide */
@media(max-width:520px){.labhelp-actions{flex-wrap:wrap}.labhelp-actions>*{flex:1 1 100%!important;box-sizing:border-box!important;min-width:0;max-width:100%;text-align:center}}

/* W9 readability floor: nothing textual below ~11px on any screen (SVG map labels are excluded on purpose) */
small{font-size:max(11px,.82em)!important}
.tag,.ov-tag,.qa-pill,.lp-label,.lbl,.po-printer-tag,.decision-help,.sc5-note,.k,.lp-panel-head p,.lp-muted,.chip,.badge,.pill,.meta,.hint,.note,.legend,.caption{font-size:max(11px,.82em)!important}   /* QA 2026-10-03: 1em was the PARENT size (16px), which inflated every KPI caption and clipped nowrap labels; keep the 11px floor only */
@media(max-width:640px){td,th,label,.lp-main span,.lp-main b,.lp-main small,.card-top .tag{font-size:max(11.5px,1em)!important}}
/* W8 house radii: panels 20px, cards 14px, everywhere (page rules below the token used 0-24px) */
.panel,.rl-panel,.lp-panel,.cg-panel{border-radius:20px!important}
.cg-card,.edu-card,.grid .card,.door,.stat,.kpi,.tile{border-radius:14px!important}

/* 2026-09-06 design-audit (probe2): the "kicker" eyebrow chip (red text on a light red
   tint) was re-implemented under a different class name by nearly every page generation
   -- .rl-kick, .kick, .stage-badge, .eyebrow, .sec-eyebrow, .sec-k, .pillcat, .lp-ey,
   .as-kick, .cg-kick, span.tag -- always at ~4.15-4.25:1, just under the 4.5:1 floor for
   normal text (measured on 171 pages). Plain red text-on-white is itself only 4.78:1, so
   the fix reuses the darker red already defined for hover states, not a new colour.
   .badge is deliberately excluded: it is reused elsewhere as a solid icon swatch with its
   own background + white text, so a blanket colour override would break that instead. */
.stage-badge,.sec-eyebrow,.sec-k,.pillcat,.lp-ey,.kick,.as-kick,.cg-kick,span.tag{
  color:var(--rl-red-2);
}
/* These specific compound selectors carry their own !important in several legacy page
   templates (verified byte-identical across 76 pages), so this override needs it too. */
.rl-kick,section.hero .kick,header.top .eyebrow,.industry-showcase .sec-k{
  color:var(--rl-red-2)!important;
}

/* 2026-09-06 design-audit (probe2): KPI-tile captions (.k/.cap) are set uppercase with
   letter-spacing, which widens them past a 2-column phone tile's ~129px content box; the
   Australian-sim family (and others) already answers with text-overflow:ellipsis, which
   is graceful but silently drops meaning ("Network back…"). Below 480px let them wrap to
   a second line instead -- .tile/.kpi already have enough min-height to hold it. */
@media(max-width:480px){
  .k,.cap{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
}

/* QA UX 2026-10-03: the Decision-Logic Coach and the round log are blank until the first run on ~25 template pages; say so */
.coach .formula:empty,.coach .act:empty{display:none}
.coach .nums:empty::before{content:"Press Run or Step: the coach then shows the formula, the numbers and what to do next.";display:block;color:#6b7099;font-size:12.5px;line-height:1.5}
.log:empty::before{content:"The round-by-round log fills in as you play.";display:block;color:#6b7099;font-size:12.5px;line-height:1.5}