/* MTN Uganda call quality (audit) dashboard. Loads after ../app.css (palette, fonts, .btn, .pill, .card, .kicker, .ph, .sr).
   One rule per selector, consolidated 2026-11-03 (spec: docs/specs/2026-11-03-audit-dashboard-redesign.md).
   Two grounds: navy frames (filters, hero, live band, downloads), cream carries the content. Yellow only on navy.
   One grid: .g12, 12 columns, --gap, stretch; spans .s2–.s12 at two breakpoints (768, 1100). One table: .dt (charts.table). */

/* ---------- tokens ---------- */
:root{
  --track:#C4C4C1; --fill:#DDD8CC; --ghost:#9ea8cb;               /* chart off-state on cream (= --lg-rule, --lg-fill) */
  --warn:#8a5a00; --warn-bg:#fbefd2; --bad:#8a2b1a; --bad-bg:#f6dcd5; --ok-bg:#dcefe3; --ok-t:#24694a; --red-d:#f2a493;
  --gut:clamp(16px,2.4vw,40px); --maxw:1440px; --lab:11px;
  --gap:24px; --pad:24px; --sec:56px; --tb:44px; --numw:100px; --fr:44px;   /* grid gap, card padding, section spacing, sticky nav, number column, feed row */
}
@media (min-width:1800px){ :root{ --maxw:1680px; --lab:12px } }
@media (max-width:767px){ :root{ --gap:16px; --pad:18px; --sec:40px; --fr:60px } }
.on-navy{ --track:#52587A; --fill:#2A3361; --ghost:#52587A; color:var(--cream) }

/* ---------- base ---------- */
html{scroll-padding-top:calc(var(--tb) + 12px);scroll-behavior:smooth}
body{background:var(--cream);font-size:15px}
a{color:inherit;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--yellow);color:var(--navy);padding:10px 14px;border-radius:12px;font-weight:600}
.skip:focus{top:8px}
.kicker{letter-spacing:.2em;font-size:var(--lab)}
.on-navy .kicker{color:var(--dim-d)}
.kicker.y,.on-navy .kicker.y{color:var(--yellow)}
.kicker.blk{margin:18px 0 8px}
.tag{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:4px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px currentColor;color:var(--dim);vertical-align:2px;white-space:nowrap}
.on-navy .tag{color:var(--dim-d)}
.tag.live{background:var(--navy);color:var(--yellow);box-shadow:none}
.on-navy .tag.live{background:var(--yellow);color:var(--navy)}
.ph{color:var(--navy);border-bottom:2px dotted currentColor}
.on-navy .ph{color:var(--yellow)}
.vh{font:700 clamp(28px,3vw,44px)/1.08 var(--display);letter-spacing:-.02em;margin:6px 0 10px;text-wrap:balance}
.lead-n{font-size:clamp(16px,1.3vw,19px);max-width:70ch;margin:4px 0 18px}
.sowhat{font-size:clamp(16px,1.3vw,19px);line-height:1.45;max-width:72ch;margin-top:6px;color:var(--navy)}
.sowhat b{font-weight:600;font-variant-numeric:tabular-nums}
.sec>.sowhat{margin-bottom:20px}
.sh .sowhat{max-width:none}   /* section lines are one line: no measure to wrap at */
.sub-h{font:600 17px/1.3 var(--body);letter-spacing:0;margin:28px 0 12px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.g12>.sub-h{margin:8px 0 -8px}
.crumb{font-size:14px;padding-top:clamp(16px,2vw,28px);color:var(--dim)}
.crumb a{color:var(--navy);font-weight:600}
.sec>.crumb:first-child{padding-top:0}
.note-r{font-size:13.5px;color:var(--dim);margin-top:8px}
.foot-n{font-size:12.5px;color:var(--dim);line-height:1.45;max-width:80ch}
.foot-n.pad{padding:12px var(--pad) 16px;border-top:1px solid var(--line);max-width:none}
.empty{padding:24px 0;color:var(--dim);font-size:15px}
.mono-t{font:500 12px var(--mono);letter-spacing:.04em;color:var(--dim)}
.on-navy .mono-t{color:var(--dim-d)}
.off{color:var(--red)}
.bd-warn{color:var(--red);font-size:14px;margin:6px 0}
.sp{margin-top:var(--gap)}
.btn{text-decoration:none}
select:focus-visible,input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ---------- header, section nav, filters ---------- */
.top{display:flex;align-items:center;gap:18px;height:60px;padding:0 24px;background:var(--navy);color:var(--cream)}
.top .brand{font-size:20px;color:var(--cream);text-decoration:none}
.top .who{font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d)}
.top nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.top nav a{color:var(--dim-d);text-decoration:none;font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:8px 12px;border-radius:99px}
.top nav a[aria-current]{background:var(--panel);color:var(--yellow)}
.secnav{position:sticky;top:0;z-index:30;height:var(--tb);display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;
  padding-inline:max(var(--gut),calc((100% - var(--maxw))/2 + var(--gut)));box-shadow:inset 0 1px 0 var(--panel)}
.secnav::-webkit-scrollbar{display:none}
.secnav a{flex:none;color:var(--dim-d);font-size:13.5px;font-weight:500;padding:8px 9px;text-decoration:none;white-space:nowrap}
.secnav a:hover,.secnav a[aria-current]{color:var(--cream);box-shadow:inset 0 -2px 0 var(--yellow)}
.fbar{box-shadow:inset 0 1px 0 var(--panel)}
.fbar[hidden]{display:none}
.fb-in{display:flex;align-items:center;gap:10px 16px;min-height:56px;flex-wrap:wrap;padding-block:8px}
.flt{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.asof{margin-left:auto;font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.on-navy .asof{color:var(--dim-d)}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--surface-2);border-radius:12px;padding:3px;gap:2px}
.seg button{min-height:36px;padding:0 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap;transition:background .18s,color .18s,transform .12s var(--ease)}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed=true]{background:var(--navy);color:var(--cream)}
.seg.sm button{min-height:32px;font-size:13px;padding:0 10px}
.seg button .num{font:500 11px var(--mono);opacity:.8;margin-left:4px}
.on-navy .seg{background:var(--panel)}
.on-navy .seg button{color:var(--dim-d)}
.on-navy .seg button[aria-pressed=true]{background:var(--yellow);color:var(--navy)}
#fDays button{min-height:40px;padding:0 16px;font-size:15px}
.fsel{display:inline-flex;align-items:center;gap:8px}
.fsel>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fsel select{width:auto;max-width:220px;min-height:40px;font-size:14px;padding:6px 30px 6px 12px;border-radius:12px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231b2557' stroke-width='1.7'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 11px center;appearance:none;-webkit-appearance:none}
.on-navy .fsel select{background-color:var(--panel);color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F0EBDF' stroke-width='1.7'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")}
.on-navy select:focus-visible{outline-color:var(--yellow)}
@media (max-width:767px){
  .top{gap:10px;padding:0 12px}.top .who{display:none}.top nav{flex-wrap:nowrap;gap:2px}.top nav a{padding:6px;font-size:10px;letter-spacing:.06em;white-space:nowrap}
  .secnav a{font-size:13px;padding:8px 7px}
  .fb-in{gap:8px;min-height:0}
  .flt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  #fDays{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  #fDays button{min-height:38px;padding:0 10px;font-size:14px}
  .fsel select{width:100%;max-width:none}
  #fSrc{display:grid;grid-template-columns:1fr 1fr}
  .asof{margin-left:0;letter-spacing:.08em;align-self:center}
  .fbar .seg button{min-height:34px;font-size:13px}
}

/* ---------- one grid ---------- */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.g12>*{grid-column:span 12;min-width:0}
@media (min-width:768px){ .s2{grid-column:span 4} .s3,.s4,.s6{grid-column:span 6} }
@media (min-width:1100px){ .s2{grid-column:span 2} .s3{grid-column:span 3} .s4{grid-column:span 4} .s5{grid-column:span 5} .s7{grid-column:span 7} .s8{grid-column:span 8} }
@media (max-width:767px){ .s2{grid-column:span 6} }

/* ---------- sections and cards ---------- */
.sec{padding-top:var(--sec)}
.sh{margin-bottom:20px;border-top:2px solid var(--navy);padding-top:14px}   /* the 2px accent rule: every section starts here */
.sh h2{font-size:clamp(24px,2.1vw,34px);text-wrap:balance}
.sh-row{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.ttl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ttl h1,.ttl h2,.ttl h3{margin:0}
.card.c{padding:var(--pad);container-type:inline-size;border-radius:18px;display:flex;flex-direction:column}
.card.flush{padding:0;overflow:hidden;container-type:inline-size}
.ch{margin-bottom:14px}
.ch h3{font:600 16px/1.3 var(--body);letter-spacing:0}
.ch-sub{font-size:13.5px;color:var(--dim);margin-top:2px}
.cb{flex:1}
.cb:has(>.fill){display:flex;flex-direction:column}
.fig{font:700 clamp(32px,2.9vw,50px)/1 var(--display);letter-spacing:-.02em}
.fig small{font-size:.42em;letter-spacing:0;margin-left:.1em}
.cmp{font-size:14px;color:var(--dim);margin-top:8px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:99px;background:var(--surface-2);font-size:13.5px;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--gap)}
.st{display:inline-flex;align-items:center;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:99px;white-space:nowrap}
.st.ok{background:var(--ok-bg);color:var(--ok-t)}.st.bad{background:var(--bad-bg);color:var(--bad)}.st.warn{background:var(--warn-bg);color:var(--warn)}.st.mute{background:var(--surface-2);color:var(--dim)}

/* ---------- hero (navy) ---------- */
.hb{position:relative;overflow:hidden;padding-block:28px 32px}
.hb>.wrap{position:relative;z-index:1}
.hb-top{display:flex;align-items:center;gap:6px;margin-left:-6px}
.hb-back{color:var(--cream);margin-left:0}.hb-back:hover{background:var(--panel)}
.hb-q{font:700 clamp(30px,3.2vw,48px)/1.05 var(--display);letter-spacing:-.02em;color:var(--cream)}
.hb-lead{font-size:clamp(16px,1.3vw,19px);color:var(--dim-d);margin-top:6px}
.hb-fig{margin-top:10px;font:700 clamp(64px,7vw,112px)/.95 var(--display);letter-spacing:-.03em;display:inline-block}
.hb-lab{font:600 clamp(17px,1.6vw,23px)/1.25 var(--display);margin-top:8px}
.hb-sub{font-size:clamp(16px,1.3vw,19px);color:var(--dim-d);margin-top:6px}
.hb-sub b{font-weight:600;color:var(--cream)}
.hb .info{max-width:72ch}
.rg{position:absolute;right:-240px;bottom:-300px;width:680px;height:680px;pointer-events:none;z-index:0}   /* ring motif: bleeds off an edge */
.rg i{position:absolute;border-radius:50%;border:1.5px solid var(--yellow);opacity:.18}
.rg i:nth-child(1){inset:0}.rg i:nth-child(2){inset:70px}.rg i:nth-child(3){inset:140px}.rg i:nth-child(4){inset:210px}.rg i:nth-child(5){inset:280px}
.rg-bl{right:auto;left:-300px;bottom:-420px}
@media (max-width:767px){ .rg{right:-380px;bottom:-420px} }
.lights{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:768px){ .lights{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .lights{grid-template-columns:repeat(5,minmax(0,1fr))} }
.lt{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:10px;height:100%;background:var(--panel);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--cream)}
.lt:hover{box-shadow:inset 0 0 0 1.5px var(--rule-d)}
.lt i{grid-row:1/4;width:12px;height:12px;border-radius:50%;margin-top:7px;background:var(--ok)}
.lt.bad i{background:#f07a62}
.lt-v{font:700 24px/1.15 var(--display)}
.lt-l,.lt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-l{font-size:14px}
.lt small{font-size:12px;color:var(--dim-d);margin-top:2px}
/* just in: fixed lines (one-line fields, a 2-line verdict, one row of checks), so a new call never changes the hero's height */
.ji{background:var(--panel);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px;min-width:0;overflow:hidden}
.ji>*{flex:none}
@media (max-width:1099px){ .ticks{flex-wrap:wrap;min-height:46px} }   /* two rows reserved: a new call never changes the hero's height */
.ji-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.ji-h{font:700 clamp(22px,1.9vw,28px)/1.15 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ji-money{font:600 clamp(17px,1.4vw,20px)/1.3 var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.ji-m{font-size:14px;color:var(--dim-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ji-v{font-size:13.5px;color:var(--cream);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.ji-v b{color:var(--yellow);font-weight:600}
.ji-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ji-acts .btn{width:auto}
.ticks{list-style:none;display:flex;gap:6px 14px;margin:8px 0 2px;font-size:13.5px;white-space:nowrap;overflow:hidden}
.ticks li{display:flex;align-items:center;gap:6px}
.tk-i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--ok);color:var(--navy)}
.ticks .miss .tk-i{background:var(--red);color:#fff}
.ticks .na .tk-i{background:var(--rule-d);color:var(--cream)}
.ji .ticks .miss{color:var(--cream)}   /* app.css paints .miss red: 2.4:1 on the Just-in card */

/* ---------- live band (navy, slim): a ticker of fixed rows in a box of fixed height ---------- */
.tick{padding-block:20px 18px;box-shadow:inset 0 1px 0 var(--rule-d)}
.tick-h{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-bottom:10px}
.tick-s{font-size:15px;color:var(--dim-d);font-variant-numeric:tabular-nums}
.tick-s b{color:var(--cream);font-weight:600}
.tick-c{width:220px;height:40px;color:var(--yellow)}
.tick-all{margin-left:auto;font-weight:600;color:var(--yellow);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.tick-sc{height:calc(6 * var(--fr));overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;border-radius:8px;scrollbar-width:thin;scrollbar-color:var(--rule-d) transparent}
.tick-sc:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.tick-f{display:flex;align-items:start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.feednote{font-size:13px;color:var(--dim-d)}
.fd-off{display:none;color:var(--red-d)}
.feednote.off .fd-off{display:inline}
.feed{list-style:none}
.feed li{border-top:1px solid var(--rule-d)}
.feed li:first-child{border-top:0}
.fd{display:grid;grid-template-columns:64px minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1.6fr) 150px 92px;gap:12px;align-items:center;height:calc(var(--fr) - 1px);padding:0 6px;font-size:14px;text-decoration:none;color:inherit;border-radius:8px;transition:background 2.4s}
.fd>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd:hover{background:var(--panel)}
.fd-t{font:500 12.5px var(--mono);color:var(--dim-d);font-variant-numeric:tabular-nums}
.fd-c{font-weight:600}
.fd-a{color:var(--dim-d);font-size:13px}
.fd-w{color:var(--ok)}
.fd-w.fatal{color:var(--red-d);font-weight:600}
.fd-w.issue{color:var(--yellow)}
.fd-w.line{color:var(--cream)}
.fd-k .pill{font-size:10.5px;padding:2px 7px;margin-right:4px}
.fd-s{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.feed .new .fd{background:rgba(254,205,115,.07)}
.feed .glow .fd{background:rgba(254,205,115,.3)}
.fd-empty{padding:14px 6px;color:var(--dim-d);font-size:14px}
.sc-zero{color:var(--red)}.sc-low{color:var(--warn)}
.on-navy .sc-zero{color:var(--red-d)}.on-navy .sc-low{color:var(--yellow)}.on-navy .sc-ok{color:var(--cream)}
@media (max-width:767px){
  .tick-c{display:none}
  .fd{grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:2px;column-gap:10px;align-content:center}
  .fd-t{grid-row:1/3}.fd-c{grid-column:2}.fd-w{grid-column:2;grid-row:2;font-size:13px}.fd-s{grid-column:3;grid-row:1/3}
  .fd-a,.fd-k{display:none}
}

/* ---------- tiles ---------- */
.tile{border-top:2px solid var(--navy);padding-top:12px;display:grid;align-content:start;gap:4px}
.tf{font:700 clamp(30px,2.6vw,44px)/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.tc,.ts{font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc{color:var(--navy);font-variant-numeric:tabular-nums}
.ts{color:var(--dim)}
.tsp{height:36px;margin-top:4px}

/* ---------- one table (.dt): cells 11/14 px, 24 px at the edges, body top-aligned, headers bottom-aligned ---------- */
.tw{overflow:auto}
table.dt{width:100%;border-collapse:collapse;font-size:14px}
.dt th,.dt td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-weight:400}
.dt th:first-child,.dt td:first-child{padding-left:var(--pad)}
.dt th:last-child,.dt td:last-child{padding-right:var(--pad)}
.dt thead th{vertical-align:bottom;background:var(--surface);font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.dt tbody th{font-weight:500}
.dt tbody tr:last-child>*{border-bottom:0}
.dt .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt small{display:block;font-size:12px;color:var(--dim);margin-top:2px;font-weight:400}
.dt thead th button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;min-height:28px}
.dt.lk tbody tr{position:relative}
.dt.lk tbody tr:hover{background:var(--surface-2)}
.rowb{text-decoration:none;color:var(--navy)}
.rowb::after{content:"";position:absolute;inset:0}
.rowb:focus-visible{outline:none}
.rowb:focus-visible::after{outline:2px solid var(--navy);outline-offset:-3px;border-radius:8px}
.dt tr.real{background:#f3efe4}
.dt tr.risk th{font-weight:600}
.dt tr.tot>*,.dt tr.all>*{font-weight:600;border-bottom:2px solid var(--line)}
details.tbl{margin-top:10px}
details.tbl summary{display:inline-flex;gap:8px;align-items:center;min-height:32px;cursor:pointer;font:500 var(--lab) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
details.tbl summary::after{content:"+";font-family:var(--body);letter-spacing:0}
details.tbl[open] summary::after{content:"–"}
details.tbl .tw{max-height:420px;margin-top:6px}
details.tbl.pad{padding:0 var(--pad) 12px}
.on-navy details.tbl summary{color:var(--dim-d)}
.on-navy .dt thead th{background:var(--navy);color:var(--dim-d)}
.on-navy .dt th,.on-navy .dt td{border-color:var(--rule-d)}
.tick-f details.tbl{margin-top:0}
.tick-f details.tbl[open]{flex-basis:100%}
.ht{display:inline-block;min-width:52px;padding:3px 8px;margin:-3px 0;border-radius:6px;background:color-mix(in srgb,var(--navy) var(--m),var(--surface-2))}
.ht.d{color:var(--cream)}
/* 390 px: a row becomes a card, the name on a full row, then a grid of numbers */
@container (width < 560px){
  table.dt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.dt,table.dt tbody{display:block}
  table.dt tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px;align-items:end;padding:12px 16px;border-bottom:1px solid var(--line)}
  table.dt tr:last-child{border-bottom:0}
  table.dt th,table.dt td,table.dt th:first-child,table.dt td:first-child,table.dt th:last-child,table.dt td:last-child{display:block;padding:0;border:0;white-space:normal;text-align:left}
  table.dt tbody th{grid-column:1/-1;font-weight:600}
  table.dt td.n{text-align:left}
  table.dt td[data-l]::before{content:attr(data-l);display:block;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:1px}
  table.dt td:not(.n){grid-column:span 2}
  table.dt td:not(.n):last-child{grid-column:1/-1}
}

/* ---------- rules: clocks, about to breach ---------- */
.clk{list-style:none;display:grid;gap:14px}
.clk li{display:grid;gap:4px}
.clk small{font-size:12.5px;color:var(--dim)}
.clk-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.clk-h b{font:700 18px var(--display)}
.clk-h span{font-weight:600}
.clk-r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk1{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--fill);gap:2px}
.stk1 i{display:block;min-width:3px}
.stk1 .met,.lgd .k{background:var(--navy)}.stk1 .br,.lgd .b{background:var(--red)}.stk1 .op,.lgd .o{background:#c99a2e}
.lgd{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin-top:12px}
.lgd li{display:flex;align-items:center;gap:6px}
.lgd .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.cq-l{list-style:none;display:grid}
.cq-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.cq-t{font-weight:600}
.cq-c{grid-row:2;font-size:12.5px;color:var(--dim)}
.cq-s{grid-row:1/3;align-self:center;font:500 12px var(--mono);letter-spacing:.06em}
.cq-s.urgent{color:var(--red);font-weight:600}

/* ---------- who acts: tiers, owners, QA plan ---------- */
.tier,.own{display:grid;gap:2px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--navy);text-align:left;font:inherit}
.tier{border-top:6px solid var(--navy)}
.tier.t0{border-top-color:var(--red)}.tier.t1{border-top-color:#c99a2e}
.tier b{font:700 34px/1.1 var(--display)}
.tier small{font-size:13px;color:var(--dim)}
.tier:hover,.own:hover,.own.on{box-shadow:inset 0 0 0 2px var(--navy)}
.own{gap:6px}
.own-h{font:700 19px/1.2 var(--display)}
.own-k,.own-l{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.own dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin:6px 0 2px}
.own dt{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.own dd{font:700 24px/1.1 var(--display);margin:2px 0 0;white-space:nowrap}
.own dd:not(.num){font-size:17px}
.age{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;background:var(--fill);margin-top:4px}
.age i{display:block;min-width:3px}.age .a0{background:#9ea8cb}.age .a1{background:var(--navy)}.age .a2{background:#c99a2e}.age .a3{background:var(--red)}
.owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:16px 0}
.owners .own{padding:12px 14px;cursor:pointer}
.owners .own span{font-size:13.5px;color:var(--dim)}
.owners .own span b{color:var(--navy);font-weight:700}
.qap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.role{list-style:none;display:grid}
.role li{padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.role li:first-child{border-top:0}
.role a{text-decoration:none;font-weight:500}
.role a::after{content:" →";color:var(--dim)}
.qap-v{background:var(--surface-2);border-radius:14px;padding:16px 18px;display:grid;gap:10px}
.qap-v p{display:grid;gap:2px}
.qap-v b{font:700 32px/1 var(--display)}
.qap-v small{font-size:13px;color:var(--dim)}
@container (width < 640px){ .qap{grid-template-columns:minmax(0,1fr)} }

/* ---------- fix once: process vs people, bars, heat map ---------- */
.split{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin-bottom:var(--gap)}
.split i{display:block;min-width:3px;background:var(--navy)}
.split i+i{background:#c99a2e}
.lost{--gap:32px}
.lost .kicker{margin-bottom:8px}
.bars{list-style:none;display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr) max-content;gap:4px 12px}
.bars li{display:contents}
.br{grid-column:1/-1;width:100%;display:grid;grid-template-columns:subgrid;align-items:center;min-height:38px;text-align:left;font-size:14px;border-radius:8px;padding:2px 0}
.br.on{background:var(--surface-2)}
.br:focus-visible{outline-offset:-2px;border-radius:8px}
.bl{line-height:1.25}
.bl .tag{font-size:11px;padding:3px 5px;margin-left:4px;letter-spacing:.08em}
.bt{position:relative;height:14px;display:block}
.bt::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--track);border-radius:1px}
.bt i{position:absolute;left:0;top:0;bottom:0;width:var(--w);min-width:2px;background:currentColor;border-radius:0 4px 4px 0}
.bn{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.bn small{display:block;font-size:11.5px;font-weight:400;color:var(--dim)}
@container (width < 520px){
  .bars{grid-template-columns:minmax(0,1fr) max-content}
  .br{row-gap:4px}.br .bt{grid-column:1/-1;grid-row:2}
  .bn small{white-space:normal;max-width:22ch;margin-left:auto}
}
.spike{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px;background:var(--warn-bg);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.spike.none{background:var(--surface-2)}

/* ---------- teams: weekday x hour ---------- */
.hg{display:grid;grid-template-columns:36px repeat(24,minmax(0,1fr));gap:2px;align-items:center}
.hg i{height:24px;border-radius:3px;background:color-mix(in srgb,var(--navy) calc(8% + var(--a,0) * 80%),var(--surface))}
.hg i:not([style]){background:var(--surface-2)}
.hg i.on{outline:2px solid var(--yellow);outline-offset:-1px}
.hg-k,.hg-x{font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--dim)}
.hg-x{height:16px}

/* ---------- trust ---------- */
.gov{list-style:none;display:grid}
.gov li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.gov li:first-child{border-top:0}
.gov-s{font-weight:600;text-align:right}
.gov-d{display:grid;gap:6px;padding-left:18px}

/* ---------- downloads (navy) ---------- */
.dls{position:relative;overflow:hidden;margin-top:clamp(48px,6vw,88px);padding-block:clamp(36px,4.4vw,64px)}
.dls-in{position:relative;z-index:1}
.dlh{font-size:clamp(24px,2.1vw,34px)}
.dls-note{color:var(--dim-d);margin-top:8px}
.dl-l{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px;margin-top:16px}
@media (min-width:1100px){ .dl-l{grid-template-columns:1fr 1fr} }
.dl-l li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:64px;border-top:1px solid var(--rule-d);padding:8px 0}
.dl-n b{display:block;font-weight:600}
.dl-n small{display:block;font-size:13px;color:var(--dim-d)}
@media (max-width:560px){ .dl-l .tag{display:none} }
.foot{padding-block:20px 28px;font-size:12.5px;color:var(--dim);border-top:1px solid var(--line);margin-top:40px}
.view{padding-bottom:24px}

/* ---------- charts (svg marks: lit = currentColor, track/ghost = --track, mass = --fill) ---------- */
.chart{position:relative;min-width:0;color:var(--navy)}
.on-navy .chart{color:var(--yellow)}
.chart:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:8px}
.on-navy .chart:focus-visible{outline-color:var(--yellow)}
.chart svg{display:block;overflow:visible}
.ch-m{height:220px;margin-top:6px}
.chart.fill{flex:1;min-height:220px}   /* fills its card, so it is never shorter than the card beside it */
.chart .ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .ln.ctl{stroke:var(--dim);stroke-width:1.5;stroke-dasharray:.006 .005}   /* paths use pathLength=1: dashes are fractions of the line */
.on-navy .chart .ln.ctl{stroke:var(--dim-d)}
.chart .mass:not(.fade),.chart .ci{fill:var(--fill)}
.chart .base{stroke:var(--track);stroke-width:1}
.chart .gl{stroke:var(--line);stroke-width:1}
.on-navy .chart .gl{stroke:var(--rule-d)}
.chart .ax{font:500 var(--lab) var(--mono);letter-spacing:.06em;fill:var(--dim)}
.on-navy .chart .ax{fill:var(--dim-d)}
.chart .dl{font:600 12px var(--body);fill:var(--navy)}
.chart .dl.ctl{fill:var(--dim)}
.chart .band{fill:var(--surface-2)}
.chart .today{fill:currentColor;stroke:var(--surface);stroke-width:2.5}
.on-navy .chart .today{stroke:var(--navy)}
.chart .hit .xh{stroke:currentColor;stroke-width:1;opacity:0;stroke-dasharray:2 3}
.chart .hit .hd{fill:currentColor;stroke:var(--surface);stroke-width:2;opacity:0}
.chart .hit .hd.ctl{fill:var(--dim)}
.on-navy .chart .hit .hd{stroke:var(--navy)}
.chart .hit.on .xh,.chart .hit.on .hd{opacity:1}
.chart .col{fill:currentColor}
.chart .col.ghost{fill:var(--ghost)}
.chart .hit .xb{fill:currentColor;opacity:0}
.chart .hit.on .xb{opacity:.08}

/* ---------- tooltip, toast, the "i" ---------- */
.tip{position:fixed;left:0;top:0;z-index:70;pointer-events:none;background:var(--surface);color:var(--navy);border-radius:12px;padding:8px 12px 9px;box-shadow:0 10px 30px -14px rgba(27,37,87,.5),0 0 0 1px var(--line);max-width:260px;opacity:0;translate:0 4px;transition:opacity .12s,translate .12s var(--ease)}
.tip.in{opacity:1;translate:0 0}
.tip .tl{display:block;font:500 var(--lab) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tip b{display:block;font:600 15px/1.25 var(--display);margin-top:2px;font-variant-numeric:tabular-nums}
.tip .td{display:block;font-size:12.5px;color:var(--dim);margin-top:1px}
.tip.d{background:var(--navy);color:var(--cream);box-shadow:0 0 0 1px var(--rule-d)}
.tip.d .tl,.tip.d .td{color:var(--dim-d)}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--navy);color:var(--cream);border-radius:14px;padding:12px 18px;font-size:14.5px;box-shadow:var(--shadow);transition:opacity .22s,transform .22s var(--ease);max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ii{position:relative;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;background:none;color:inherit;font:italic 600 13px/1 var(--display);cursor:pointer;padding:0;letter-spacing:0;text-transform:none;vertical-align:middle;transition:background var(--t),color var(--t)}
.ii::after{content:"";position:absolute;inset:-10px}
.ii:hover{background:var(--surface-2)}
.ii[aria-expanded="true"]{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.on-navy .ii:hover{background:var(--panel)}
.on-navy .ii[aria-expanded="true"]{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.ii:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.info{font:400 14px/1.55 var(--body);color:var(--navy);background:var(--surface-2);border-radius:10px;padding:12px 14px;margin:10px 0 14px;max-width:78ch;text-transform:none;letter-spacing:0}
.info p{margin:0}.info p+p{margin-top:8px}
.on-navy .info{background:var(--panel);color:var(--cream)}
.on-navy .info b{color:var(--yellow)}
.sh .info{margin-bottom:0}

/* ---------- drill-down: action queue ---------- */
.qbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px}
.ql{list-style:none;display:grid;gap:10px;margin-top:12px}
.qi{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:12px 18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;animation:rise .26s var(--ease) both}
.qi.od{border-color:#e7b3a6}
.qi-k{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.qi-h{font-size:15.5px}.qi-h a{color:var(--navy)}
.qi-s{font-size:13.5px;color:var(--dim);margin-top:2px}
.qi-why{font-size:14px;margin-top:2px}
.qi-a{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:flex-end}
.qi-time{min-width:110px;text-align:right}
.qi-left{font:500 13px var(--mono);color:var(--dim)}
.qi .fsel{flex:0 1 160px;display:block}
.qi .fsel select{width:100%;max-width:100%;min-height:38px;border:1.5px solid var(--line)}
.qi .btn.sm{min-height:38px;font-size:14px;padding:0 12px}
.ex-n{font-size:12px;color:var(--dim)}
@media (max-width:1279px){ .qi-a{flex-wrap:wrap} }
@media (max-width:1100px){ .qi{grid-template-columns:minmax(0,1fr)} .qi-k{flex-direction:row;flex-wrap:wrap} .qi-a{justify-content:flex-start} .qi-time{text-align:left;flex-basis:100%} }
.tt{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--surface-2);color:var(--navy)}
.tt.t0{background:var(--bad-bg);color:var(--bad)}.tt.t1{background:var(--warn-bg);color:var(--warn)}
.pager{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pager .btn{width:auto}
.pill{display:inline-block;white-space:nowrap;padding:5px 10px;font-size:10.5px}
.pill.ok{background:var(--ok-bg);color:var(--ok-t)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.mute{background:var(--surface-2);color:var(--dim)}
.pill.out{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px var(--fine)}
.on-navy .pill.mute{background:var(--panel);color:var(--cream)}
.on-navy .pill.out{color:var(--dim-d);box-shadow:inset 0 0 0 1px var(--rule-d)}
.clipb{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:99px;background:var(--navy);color:var(--cream);font-weight:600;font-size:14px;justify-self:start;transition:transform .12s var(--ease)}
.clipb:active{transform:scale(.97)}
.clipb.ex{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.clipb.on{background:var(--red);color:#fff;box-shadow:none}

/* ---------- drill-down: every call, run ---------- */
.sc{display:inline-block;min-width:34px;text-align:center;font:700 15px/1 var(--display);padding:5px 7px;border-radius:8px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.sc.low{background:var(--warn-bg);color:var(--warn)}
.sc.zero{background:var(--bad-bg);color:var(--bad)}
.sc.big{font-size:26px;padding:8px 12px;border-radius:12px;min-width:58px}
.rc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.rc-i{display:grid;gap:4px;align-content:start;text-decoration:none;color:var(--navy);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);transition:transform .12s var(--ease)}
.rc-i:active{transform:scale(.98)}
.rc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.rc-i b{font:700 18px/1.2 var(--display)}
.rc-i small{font-size:13px;color:var(--dim)}
.rc-q{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cbar{margin-top:20px;align-items:center}
.cf2{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cf2 input{min-height:40px;border:1.5px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--surface);min-width:min(280px,100%);font-size:15px}
.abar{margin:14px 0 4px}
.abar .fsel select{border:1.5px solid var(--line)}
.calls-f{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:4px var(--pad) 18px;border-top:1px solid var(--line)}
.drop{border:1.5px dashed var(--fine);border-radius:18px;padding:34px 16px;text-align:center;display:grid;gap:8px;justify-items:center;background:var(--surface);cursor:pointer;transition:background .18s}
.drop.over{border-color:var(--navy);background:var(--surface-2)}
.drop b{font:700 20px var(--display)}
.drop small{color:var(--dim);font-size:14px}
.drop:focus-within{outline:2px solid var(--navy);outline-offset:3px}
.samp{margin-top:18px}
.samp-b{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.samp-b .btn{width:auto}
.jobs{list-style:none;display:grid;gap:16px;margin-top:24px}
.job{animation:rise .26s var(--ease) both}
.job-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.job-h b{font:700 19px var(--display);overflow-wrap:anywhere}
.job-h .mono-t{margin-left:auto}
.pipe{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ps{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-content:start;padding:12px;border-radius:12px;background:var(--surface-2);min-height:96px;transition:background .3s}
@media (max-width:1100px){ .pipe{grid-template-columns:minmax(0,1fr)} .ps{min-height:0} }
.ps.wait{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--fine)}
.ps.on{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--navy)}
.ps.fail{background:var(--bad-bg)}
.ps-i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--line)}
.ps.done .ps-i{background:var(--ok-l);color:#fff}
.ps.on .ps-i{background:transparent}
.ps.fail .ps-i{background:var(--red);color:#fff}
.ps-b{display:grid;gap:4px;min-width:0}
.ps-b b{font-weight:600;font-size:14.5px;line-height:1.3}
.ps.wait .ps-b b{color:#8a8476}
.ps-b small{font-size:13px;color:var(--dim);overflow-wrap:anywhere}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--navy);animation:spin .8s linear infinite;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.pbar{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:4px}
.pbar i{display:block;height:100%;background:var(--navy);transition:width .5s var(--ease)}
.plines{list-style:none;display:grid;gap:6px;margin-top:6px;font-size:13px}
.plines li{animation:rise .26s var(--ease) both;border-left:2px solid var(--line);padding-left:8px}
.plines .t{font:500 11px var(--mono);color:var(--dim)}
.pchk{list-style:none;display:grid;gap:4px;margin-top:6px;font-size:13px}
.pchk li{display:flex;gap:6px;align-items:center}
.pchk .tk-i{width:18px;height:18px;font-size:11px;background:var(--ok-l);color:#fff}
.pchk .miss .tk-i{background:var(--red)}
.job-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.job-r .btn{width:auto;margin-left:auto}
.job-q{font-size:14px;flex:1;min-width:200px}
.ln-en{display:block;color:var(--dim);font-size:.92em;margin-top:2px}

/* ---------- drill-down: call review ---------- */
.rv{padding:28px 0 22px;position:relative}
.rv .kicker a{color:inherit}
.rv-crumb{padding-top:0;margin-bottom:8px}.rv-crumb,.rv-crumb a{color:var(--dim-d)}
.rv .rv-crumb a{color:var(--cream)}
.rv-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;margin-top:10px}
.rv-h{font:700 clamp(28px,3.2vw,46px)/1.05 var(--display);letter-spacing:-.02em}
.rv-m{color:var(--dim-d);margin-top:8px}
.rv-s{margin-top:12px;max-width:78ch;font-size:15.5px;line-height:1.55}
.rv-q{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rv-own{font-size:14px;color:var(--dim-d)}
.rv-sc{background:var(--panel);border-radius:18px;padding:16px 18px;display:grid;justify-items:start;gap:2px;min-width:180px;position:relative}
.rv-sc b{font:700 64px/1 var(--display);color:var(--yellow)}
.rv-sc b.zero{color:var(--red-d)}
.rv-sc small{font-size:13px;color:var(--dim-d);line-height:1.4}
.rv-sc .ii{position:absolute;top:14px;right:14px;color:var(--yellow)}
.how-t{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0}
.how-t td,.how-t th{padding:4px 6px;border-bottom:1px solid var(--rule-d);text-align:left}
.how-t .n{text-align:right}
.pl{margin-top:20px;background:var(--panel);border-radius:14px;padding:14px}
.pl audio{display:block;width:100%;height:44px;margin-top:10px;color-scheme:light;border-radius:22px}
.tlm{position:relative;height:30px;cursor:pointer}
.tlm-bar{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:var(--rule-d)}
.tlm-bar i{position:absolute;top:-5px;width:2px;height:14px;background:var(--cream);left:0}
.tlm-m{position:absolute;top:5px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:2.5px solid var(--navy)}
.tlm-m::after{content:"";position:absolute;inset:-8px}
.tlm-m.fail,.tlm-lg i.fail{background:#f07a62}
.tlm-m.partial,.tlm-lg i.partial{background:var(--yellow)}
.tlm-m.flag,.tlm-lg i.flag{background:var(--cream)}
.tlm-lg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--dim-d);margin-top:8px}
.tlm-lg span{display:flex;align-items:center;gap:6px}
.tlm-lg i{width:10px;height:10px;border-radius:50%}
.tlm-n{margin-left:auto}
.rv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:24px;align-items:start}
@media (min-width:1100px){ .rv-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} .rv-tx{position:sticky;top:calc(var(--tb) + 12px)} }
.crit2{list-style:none;display:grid}
.cr{display:grid;grid-template-columns:118px minmax(0,1fr);gap:4px 12px;padding:14px 0;border-top:1px solid var(--line)}
.cr:first-child{border-top:0;padding-top:4px}
.cr>.pill{justify-self:start;align-self:start;letter-spacing:.08em}
.cr-h{font-size:15px}
.cr-w{font:500 11px var(--mono);letter-spacing:.06em;color:var(--dim);margin-left:4px}
.cr-q{display:block;margin-top:6px;font-size:14.5px;quotes:"“" "”"}
.cr-en{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.cr-n{font-size:13.5px;color:var(--dim);margin-top:4px}
.cr-qa{font-size:13.5px;margin-top:6px;background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:6px 10px}
.cr-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
@media (max-width:560px){ .cr{grid-template-columns:minmax(0,1fr)} }
.cf{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:var(--surface-2)}
.cf.low{background:var(--warn-bg);color:var(--warn)}
.tbtn{font:500 12.5px var(--mono);letter-spacing:.04em;min-height:32px;padding:0 10px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy)}
.lnk{font-size:13.5px;font-weight:600;text-decoration:underline;min-height:32px;padding:0 4px;color:var(--navy)}
.ovf{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:10px;background:var(--surface-2);border-radius:12px;padding:10px}
.ovf label{display:grid;gap:2px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ovf select,.ovf input{min-height:40px;border:1.5px solid var(--line);border-radius:10px;padding:4px 10px;background:var(--surface);font:15px var(--body);letter-spacing:0;text-transform:none;color:var(--navy)}
.ovr{flex:1;min-width:200px}
.ovf .btn{width:auto;min-height:40px}
.fl{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--dim)}
.fl input{accent-color:var(--navy);width:18px;height:18px}
.tx2{list-style:none;display:grid;gap:2px;max-height:min(74vh,820px);overflow-y:auto;overscroll-behavior:contain;position:relative;padding-right:4px}
.tx2 .ln{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;padding:8px 6px;border-radius:10px;transition:background .2s}
.ln-t{font:500 12px var(--mono);color:var(--dim);text-align:left;align-self:start;min-height:28px;border-radius:6px}
.ln-b{font-size:14.5px;line-height:1.45}
.ln-b>b{display:block;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.tx2 .ln.agent .ln-b>b{color:var(--navy)}
.ln-x{display:block}
.tx2 .ln.customer{background:#f3efe4}
.tx2 .ln.ev{box-shadow:inset 3px 0 0 var(--navy)}
.tx2 .ln.ev-fail{box-shadow:inset 3px 0 0 var(--red)}
.tx2 .ln.on{background:var(--navy);color:var(--cream)}
.tx2 .ln.on .ln-t,.tx2 .ln.on .ln-b>b,.tx2 .ln.on .ln-en{color:var(--dim-d)}
.tx2 .ln.unclear .ln-x{color:var(--dim)}
.fl2{list-style:none;display:grid;gap:10px;font-size:14px}
.fl2 li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fl2 li span:last-child{flex-basis:100%;color:var(--dim)}
.coach{padding-left:18px;font-size:14.5px;display:grid;gap:6px}
.sc-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.sc-acts .btn{width:auto}
.sc-acts .rv-k{margin-right:auto}
@media (max-width:700px){ .rv-top{grid-template-columns:1fr} .rv-sc{grid-template-columns:auto 1fr;align-items:center;column-gap:14px} .rv-sc .kicker{grid-column:1/-1} .tlm-n{margin-left:0} }

/* ---------- drill-down: agent, scorecard ---------- */
.vs{list-style:none;display:grid;gap:8px}
.vs li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:14px}
.vs-b{position:relative;height:14px}
.vs-b::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--track)}
.vs-b i{position:absolute;left:0;top:2px;height:10px;width:var(--w);background:var(--navy);border-radius:0 4px 4px 0}
.vs-b s{position:absolute;top:-2px;left:var(--x);width:2px;height:18px;background:var(--red);margin-left:-1px}
.vs-n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.vs-n small{display:block;font-weight:400;font-size:11.5px;color:var(--dim);white-space:nowrap}
@container (width < 460px){ .vs li{grid-template-columns:minmax(0,1fr) 64px} .vs-b{grid-column:1/-1;grid-row:2} }
.plan{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.plan h3{font:700 20px/1.2 var(--display);margin-top:4px}
.plan-n{font-size:14px;color:var(--dim);margin-top:6px}
.plan-n b{color:var(--navy)}
.plan-tip{font-size:15px;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.plan-c{display:grid;gap:4px;margin-top:12px;justify-items:start}
.plan-c small{font-size:12.5px;color:var(--dim);margin-bottom:6px}
.how{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:24px}
.how li{border-top:2px solid var(--navy);padding-top:10px;display:grid;gap:4px;align-content:start}
.how b{font:700 17px var(--display)}
.how span{font-size:14px;color:var(--dim)}
.dt input[type=number]{width:72px;min-height:40px;border:1.5px solid var(--line);border-radius:10px;padding:4px 8px;text-align:right;background:var(--surface);font-size:15px}
.tg input{width:20px;height:20px;accent-color:var(--navy)}
.cost{font-size:13.5px;margin-top:14px;padding:10px 12px;background:var(--surface-2);border-radius:10px;line-height:1.45}
.cost span{color:var(--dim)}.cost b{font-weight:600}

/* ---------- motion: transforms and colour only, nothing waits at opacity 0 ---------- */
@keyframes up{from{transform:translateY(8px)}}
@keyframes ringin{from{transform:scale(.4);opacity:0}}
@keyframes bump{from{background:var(--warn-bg);border-radius:4px}}
@keyframes bumpd{from{background:rgba(254,205,115,.22);border-radius:4px}}
@media (prefers-reduced-motion:no-preference){
  .intro .rg i{animation:ringin .9s var(--ease) both}
  .intro .rg i:nth-child(2){animation-delay:.12s}.intro .rg i:nth-child(3){animation-delay:.24s}.intro .rg i:nth-child(4){animation-delay:.36s}.intro .rg i:nth-child(5){animation-delay:.48s}
  .intro .hb-lab,.intro .hb-sub{animation:up .45s .35s var(--ease) both}
  .intro .ji{animation:up .45s .4s var(--ease) both}
  .feed .new{animation:up .26s var(--ease) both}
  .feed .new .fd{background:rgba(254,205,115,.07)}
  .bump{animation:bump 1.4s ease-out}
  .on-navy .bump{animation-name:bumpd}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

/* ---------- print: a short cream report ---------- */
@media print{
  @page{size:A4;margin:12mm}
  html{scroll-behavior:auto}
  body{background:#fff;font-size:11pt}
  .top,.secnav,.fbar,.tick,.dls,.tip,.toast,.skip,details.tbl,.rg,.seg,.tsp,.ii,.info,.crumb,.hb-back,.ji-acts,.foot,.view:not(#v-overview){display:none!important}
  .hb{background:#fff!important;color:var(--navy);padding:0 0 6mm;--track:#C4C4C1;--fill:#DDD8CC}
  .hb .kicker,.hb .kicker.y,.hb-q,.hb-lab,.hb-sub,.hb-sub b,.ji-h,.ji-money,.ji-v,.ji-v b{color:var(--navy)!important}
  .hb-lead,.lt small,.ji-m,.ji .kicker{color:var(--dim)!important}
  .hb-fig{font-size:44pt}
  .ji{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
  .lt{background:none;border:1px solid var(--line);color:var(--navy)}
  .sec{padding-top:5mm}
  .sh{margin-bottom:3mm;break-inside:avoid;break-after:avoid}.sh h2{font-size:16pt}
  .ch-m{height:150px}
  .card,.card.c{box-shadow:none;border:1px solid var(--line);break-inside:avoid}
  .g12{gap:4mm}
  .tf{font-size:20pt}
  .chart svg{width:100%;height:auto}
  main,.hb{zoom:.74}
  *{animation:none!important;transition:none!important}
}