/* Design system lifted from bayerdemo.thepromptgroup.com — cream editorial.
   Single committed light look, as per the reference. */
:root{
  --paper:#f6f1e7; --surface:#fbf5ea; --elevated:#f0e9da; --card:#fffdf8; --halo:#fffdf8;
  --ink:#241a10; --body:#241a10bd; --muted:#241a108c; --faint:#241a1061;
  --line:#241a1017; --line-md:#241a1029; --track:#241a100e; --grid:#241a1012;
  --accent:#2b62d9; --gold:#a66a12; --gold-deep:#996311;
  --c1:#2b62d9; --c2:#b07818; --c3:#8a3fc9; --c4:#0e8a6d;
  /* categorical series - validated: worst adjacent CVD dE 16.3, normal-vision 19.6 on #f6f1e7 */
  --s-blue:#2a78d6; --s-orange:#eb6834; --s-aqua:#1baf7a; --s-yellow:#eda100;
  --s-magenta:#e87ba4; --s-green:#008300; --s-violet:#4a3aa7; --s-red:#e34948;
  --s-none:#b9ae9c;
  --pos:#0e7a4e; --neg:#c42b2b; --warn:#b07818;
  --pos-bg:#0e7a4e17; --neg-bg:#c42b2b14; --warn-bg:#b0781814;
  --shadow:0 1px 2px #241a100a,0 10px 28px -14px #241a101f;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --pad:26px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1220px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--display);margin:0}

/* eyebrow */
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-family:var(--sans)}
.eyebrow.gold{color:var(--gold)}

/* ── masthead ─────────────────────────────────────────── */
.mast{border-bottom:1px solid var(--line);background:var(--paper)}
.mast-in{max-width:1220px;margin:0 auto;padding:13px var(--pad);display:flex;align-items:center;gap:14px}
.mark{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.02em}
.dots{display:grid;grid-template-columns:repeat(2,4px);gap:2px}
.dots i{width:4px;height:4px;border-radius:1px;background:var(--gold);display:block}
.dots i:nth-child(2){background:var(--accent)}
.dots i:nth-child(3){background:var(--c3)}
.dots i:nth-child(4){background:var(--c4)}
.pill{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;background:#2b62d914;color:var(--accent)}
.mast-r{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}

/* ── brand bar ────────────────────────────────────────── */
.brandbar{border-bottom:1px solid var(--line);background:var(--surface)}
.brandbar-in{max-width:1220px;margin:0 auto;padding:15px var(--pad);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brandbar h1{font-size:17px;font-weight:700;letter-spacing:-.02em}
.brandbar .dom{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:1px}
.seg{display:flex;background:var(--elevated);border-radius:9px;padding:2px}
.seg button{border:0;background:transparent;font:600 12.5px/1.35 var(--sans);color:var(--muted);
  padding:6px 13px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #241a1012}
.btn{font:600 12px/1.55 var(--sans);color:var(--body);background:var(--card);
  border:1px solid var(--line-md);border-radius:8px;padding:6px 12px;cursor:pointer}
.btn:hover{color:var(--ink);border-color:#241a1040}

/* ── filter rail ──────────────────────────────────────── */
.rail{background:var(--surface);border-bottom:1px solid var(--line)}
.rail-in{max-width:1220px;margin:0 auto;padding:12px var(--pad);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.fg{display:flex;align-items:center;gap:8px}
select{font:500 12.5px/1.4 var(--sans);padding:6px 10px;border-radius:8px;border:1px solid var(--line-md);
  background:var(--card);color:var(--ink);max-width:250px;cursor:pointer}
.scope{width:100%;font-size:11.5px;color:var(--faint);font-family:var(--mono)}

/* ── meta strip ───────────────────────────────────────── */
.metastrip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.metastrip>div{padding:14px 0}
.metastrip>div+div{border-left:1px solid var(--line);padding-left:22px}
.metastrip .v{font-size:14px;margin-top:3px}
.metastrip .v b{font-weight:600}

/* ── sections ─────────────────────────────────────────── */
section{border-bottom:1px solid var(--line);padding:30px 0 34px;scroll-margin-top:52px}
section:last-of-type{border-bottom:0}
.shead{display:flex;align-items:baseline;gap:14px;margin-bottom:5px}
.shead h2{font-size:24px;font-weight:700;letter-spacing:-.025em}
.shead .smeta{margin-left:auto;font-size:12.5px;color:var(--faint)}
.lede{font-size:14px;color:var(--muted);margin:0 0 20px;max-width:88ch}

/* ── KPI strip ────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis>div{padding:16px 0 17px}
.kpis>div+div{border-left:1px solid var(--line);padding-left:20px}
.kpi .v{font-family:var(--display);font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:7px 0 0;
  font-variant-numeric:tabular-nums}
.kpi .v small{font-size:15px;font-weight:500;color:var(--faint);letter-spacing:0}
.kpi .s{font-size:12.5px;color:var(--muted);margin-top:6px}
/* stat-row responsive rules live in the overview-header block at the end */
@media(max-width:940px){.metastrip{grid-template-columns:repeat(2,1fr)}.metastrip>div+div{border-left:0;padding-left:0}}

/* ── bars ─────────────────────────────────────────────── */
.bars{display:flex;flex-direction:column;gap:11px}
.bar{display:grid;grid-template-columns:184px 1fr 58px;gap:14px;align-items:center;font-size:13px}
.bar .nm{color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .nm b{font-weight:700;color:var(--ink)}
.trk{display:block;height:8px;background:var(--track);border-radius:4px;overflow:hidden;min-width:0}
.fil{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.bar .vv{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--body);font-weight:600}
@media(max-width:620px){.bar{grid-template-columns:120px 1fr 48px;gap:9px}}

/* ── tables ───────────────────────────────────────────── */
.scroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:var(--faint);padding:0 12px 9px 0;border-bottom:1px solid var(--line-md);white-space:nowrap;cursor:pointer;user-select:none}
table.t th.no{cursor:default}
table.t th[aria-sort]:after{margin-left:5px;opacity:.6}
table.t th[aria-sort="descending"]:after{content:"▾"}
table.t th[aria-sort="ascending"]:after{content:"▴"}
table.t td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.t tbody tr:last-child td{border-bottom:0}
table.t td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:14px}
table.t th.n{text-align:right;padding-right:14px}
.rowlab{font-size:13.5px;font-weight:700;letter-spacing:-.01em}

/* ── dot markers & chips ──────────────────────────────── */
.dot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;white-space:nowrap}
.dot:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot.pos{color:var(--pos)} .dot.neg{color:var(--neg)} .dot.warn{color:var(--warn)} .dot.off{color:var(--faint)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;
  background:var(--elevated);color:var(--muted);white-space:nowrap}
.tag.blue{background:#2b62d914;color:var(--accent)}
.tag.gold{background:var(--warn-bg);color:var(--gold-deep)}
.tag.pos{background:var(--pos-bg);color:var(--pos)}
.tag.neg{background:var(--neg-bg);color:var(--neg)}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.legend .dot{margin-right:5px}

/* ── two-col ──────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:38px}
@media(max-width:900px){.cols{grid-template-columns:1fr;gap:26px}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow)}

/* ── explorer ─────────────────────────────────────────── */
.expbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
input[type=search]{font:500 13px/1.4 var(--sans);padding:7px 12px;border-radius:8px;border:1px solid var(--line-md);
  background:var(--card);color:var(--ink);min-width:260px;flex:1;max-width:400px}
.cnt{font-size:11.5px;color:var(--faint);font-family:var(--mono)}
.pr{border-bottom:1px solid var(--line)}
/* the grid template lives on .prow alone (header and rows share it) - see the
   explorer block at the end of this file */
.pr .prow{padding:11px 0}
.pr:hover{background:var(--surface)}
.pt{font-size:13.5px;font-weight:500;letter-spacing:-.005em}
.tp{font-size:11.5px;color:var(--muted)}
.engs{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:900px){.pr .prow{grid-template-columns:1fr;gap:7px}}
.ev{padding:4px 0 18px}
.evr{margin-bottom:13px}
.evr:last-child{margin-bottom:0}
.evh{font-size:12.5px;font-weight:700;margin-bottom:5px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.doms{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.7;word-break:break-word}
.doms .own{color:var(--pos);font-weight:600}
.doms .us{color:var(--neg)}
.quote{border-left:2px solid var(--gold);padding:2px 0 2px 13px;margin-top:11px;font-size:13px;color:var(--body);font-style:italic}
.quote span{font-style:normal;color:var(--faint);font-size:11.5px}
.none{font-size:12px;color:var(--faint);padding:6px 0 16px;font-style:italic}

/* ── notice ───────────────────────────────────────────── */
.notice{background:var(--warn-bg);border:1px solid #b0781833;border-radius:10px;padding:12px 15px;font-size:12.5px;
  color:var(--body);margin:22px 0 0}
.notice b{color:var(--gold-deep)}

footer{padding:30px 0 60px;font-size:12px;color:var(--faint)}
footer h3{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
footer ul{margin:0 0 18px;padding-left:17px;line-height:1.75}
footer li{margin-bottom:6px}
footer b{color:var(--body)}

/* ══ shell: fixed sidebar + content ═══════════════════════ */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{position:fixed;top:0;left:0;bottom:0;width:236px;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;z-index:40}
.side-head{padding:18px 20px 16px;border-bottom:1px solid var(--line)}
.side-head .mark{margin-bottom:13px}
.side-head h1{font-size:18px;font-weight:700;letter-spacing:-.022em}
.side-head .dom{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px}
.side-head .who{display:flex;align-items:center;gap:8px}
/* CCN: THE NAME BLOCK HAS TO BE ABLE TO SHRINK. A flex item's default
   min-width is auto, so this div refused to go below the width of the longest
   unbreakable run inside it and pushed straight out through the card's border:
   "Canadian Cybersecu" then a clipped edge, with the domain cut mid-word. Every
   earlier client of this template had a name and a host short enough to fit
   236px, so the fault shipped four times without showing. min-width:0 lets the
   name wrap; the domain gets an ellipsis because a hostname must not break. */
.side-head .who>div{min-width:0;flex:1}
.side-head .who h1{overflow-wrap:anywhere;line-height:1.2}
.side-head .who .dom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The prompt count moved off the domain line: behind an ellipsis on a host this
   long it was the half that got cut. It carries the domain's own title so a
   truncated host is still readable on hover. */
.side-head .who .dom.sub{margin-top:1px}
.side-head .who img{width:22px;height:22px;border-radius:5px;flex:none;object-fit:contain;background:var(--card);
  border:1px solid var(--line);padding:2px}
nav.snav{padding:12px 10px;flex:1}
nav.snav .grp{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  padding:10px 10px 6px}
nav.snav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
  color:var(--body);font-size:14px;font-weight:500;position:relative;transition:background .12s}
nav.snav a .ico{width:15px;height:15px;flex:none;opacity:.5}
nav.snav a .n{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
nav.snav a:hover{background:var(--elevated);color:var(--ink)}
nav.snav a.on{background:var(--card);color:var(--ink);font-weight:650;box-shadow:0 1px 2px #241a1010}
nav.snav a.on .ico{opacity:1;color:var(--gold)}
nav.snav a.on:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2.5px;
  background:var(--gold);border-radius:0 2px 2px 0}
.side-foot{padding:14px 20px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);line-height:1.6}
.side-foot b{color:var(--muted);font-weight:600}
.side-foot .prog{height:3px;background:var(--track);border-radius:2px;margin:7px 0 5px;overflow:hidden}
.side-foot .prog i{display:block;height:100%;background:var(--gold);border-radius:2px}
.main{grid-column:2;min-width:0}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  nav.snav{display:flex;gap:4px;overflow-x:auto;padding:8px 12px}
  nav.snav .grp,nav.snav a .n{display:none}
  nav.snav a{white-space:nowrap}
  nav.snav a.on:before{display:none}
  .side-foot{display:none}
  .main{grid-column:1}
}

/* ══ top bar with dropdown filters ════════════════════════ */
.topbar{position:sticky;top:0;z-index:35;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{padding:11px var(--pad);display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:1220px;margin:0 auto}
.dd{position:relative}
.dd>button{display:flex;align-items:center;gap:8px;font:600 12.5px/1.4 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line-md);border-radius:9px;padding:7px 11px;cursor:pointer}
.dd>button:hover{border-color:#241a1040}
.dd>button[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px #2b62d914}
.dd>button .lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.dd>button .cur{display:flex;align-items:center;gap:6px}
.dd>button .cur img{width:14px;height:14px;border-radius:3px;object-fit:contain}
.dd>button .car{width:9px;height:9px;opacity:.45;margin-left:1px}
.dd>button.act{background:#2b62d90d;border-color:#2b62d940}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--card);
  border:1px solid var(--line-md);border-radius:11px;box-shadow:0 4px 8px #241a1010,0 16px 40px -12px #241a1030;
  padding:5px;z-index:50;max-height:340px;overflow-y:auto}
.dd-menu[hidden]{display:none}
.dd-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  font:500 13px/1.4 var(--sans);color:var(--body);padding:8px 10px;border-radius:7px;cursor:pointer}
.dd-menu button:hover{background:var(--elevated);color:var(--ink)}
.dd-menu button[aria-selected="true"]{background:#2b62d90f;color:var(--ink);font-weight:650}
.dd-menu button img{width:16px;height:16px;border-radius:4px;object-fit:contain;flex:none}
.dd-menu button .tick{margin-left:auto;color:var(--accent);opacity:0}
.dd-menu button[aria-selected="true"] .tick{opacity:1}
.dd-menu button .sub{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.dd-sep{height:1px;background:var(--line);margin:5px 6px}
.chipbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-left:auto}
.fchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 9px;
  border-radius:999px;background:#2b62d914;color:var(--accent)}
.fchip button{border:0;background:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.65}
.fchip button:hover{opacity:1}
.clearall{font:600 12px/1 var(--sans);color:var(--faint);background:none;border:0;cursor:pointer;padding:4px}
.clearall:hover{color:var(--ink)}

/* ══ logos ════════════════════════════════════════════════ */
.lg{width:16px;height:16px;border-radius:4px;object-fit:contain;flex:none;vertical-align:-3px;background:var(--card)}
.lg.sm{width:13px;height:13px;border-radius:3px;vertical-align:-2px}
.lg.lgg{width:20px;height:20px;border-radius:5px}
.lg.ph{background:var(--elevated);display:inline-block}
.withlogo{display:inline-flex;align-items:center;gap:8px;min-width:0}
.withlogo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 8px 3px 4px;
  border-radius:999px;background:var(--elevated);color:var(--muted)}
.engchip.yes{background:var(--pos-bg);color:var(--pos)}
.engchip.no{background:var(--neg-bg);color:var(--neg)}
.engchip.na{background:var(--elevated);color:var(--faint)}
.engchip img{width:14px;height:14px;border-radius:50%;object-fit:contain;background:#fff}
.domlist{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:5px}
.dom1{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.dom1 img{width:12px;height:12px;border-radius:2px;object-fit:contain}
.dom1.own{color:var(--pos);font-weight:600}
.dom1.rival{color:var(--neg)}

/* ══ per-prompt detail ════════════════════════════════════ */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);margin-bottom:14px}
.crumb button{border:0;background:none;font:inherit;color:var(--accent);cursor:pointer;padding:0}
.crumb button:hover{text-decoration:underline}
.crumb .sep{opacity:.5}
.crumb .now{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.pcard .q{padding:16px 20px 15px;border-bottom:1px solid var(--line)}
.pcard .q .eyebrow{margin-bottom:5px}
.pcard .q h3{font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1.35}
.pmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line)}
.pmeta>div{padding:12px 18px;background:var(--card)}
.pmeta .v{margin-top:6px;font-size:13px;display:flex;align-items:center;gap:7px}
@media(max-width:900px){.pmeta{grid-template-columns:repeat(2,1fr)}}
.vol{display:flex;gap:2px;align-items:flex-end;height:14px}
.vol i{width:4px;background:var(--line-md);border-radius:1px}
.vol i.on{background:var(--c4)}
.panel2{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.panel2 .ph{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel2 .ph b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.panel2 .ph span{font-size:12px;color:var(--faint)}
.panel2 .ph svg{width:15px;height:15px;color:var(--gold);flex:none}
.panel2 .pb{padding:4px 16px 8px}
.panel2 .pf{padding:10px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

/* heatmap */
.hm{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.hm th{padding:9px 6px;text-align:center;font-weight:600;border-bottom:1px solid var(--line)}
.hm th.c1{text-align:left;width:34%}
.hm td{padding:0;text-align:center;border-bottom:1px solid var(--card)}
.hm td.c1{padding:8px 6px 8px 0;text-align:left}
.hm .cell{display:block;padding:12px 4px;font-weight:650;font-variant-numeric:tabular-nums;color:#0a5c3c}
.hm .cell.off{color:var(--faint);font-weight:400;background:var(--elevated)}
.scale{display:flex;align-items:center;gap:6px;margin-left:auto}
.scale i{width:15px;height:9px;border-radius:2px;display:block}
.youpill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--pos-bg);color:var(--pos)}

/* response history */
.rh{width:100%;border-collapse:collapse;font-size:13px}
.rh th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--faint);
  padding:0 12px 9px 0;border-bottom:1px solid var(--line-md);white-space:nowrap}
.rh td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rh tr:last-child td{border-bottom:0}
.rh td.eng{width:38px;padding-right:0}
.rh td.eng img{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line)}
.rh .snip{color:var(--body);line-height:1.6}
.rh .snip b{color:var(--ink)}
.rh .snip.na{font-style:italic;color:var(--faint)}
.rh td.st{width:112px;white-space:nowrap}
.rh td.pos,.rh td.ran{width:88px;color:var(--faint);font-size:12px;white-space:nowrap}
.rh .more{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:5px 11px;
  border:1px solid var(--line-md);border-radius:999px;background:var(--card);cursor:pointer;
  color:var(--body);font:600 12px/1 var(--sans);transition:border-color .12s,box-shadow .12s}
.rh .more:hover{border-color:#241a1045;box-shadow:var(--shadow);color:var(--ink)}
.rh .more svg{width:12px;height:12px;color:var(--faint)}
.rh .more:hover svg{color:var(--accent)}
.rowlink{cursor:pointer}
.rowlink:hover .pt{color:var(--accent)}

/* ══ logo lockup ══════════════════════════════════════════ */
.lockup{display:flex;align-items:center;gap:9px;margin-bottom:14px;text-decoration:none}
.lmark{width:23px;height:auto;flex:none}
.lword{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;font-size:14px;
  letter-spacing:-.015em;color:var(--ink)}

/* ══ prompt modal ═════════════════════════════════════════ */
.mask{position:fixed;inset:0;background:#241a1059;backdrop-filter:blur(3px);z-index:80;
  display:flex;align-items:flex-start;justify-content:center;padding:36px 24px;overflow-y:auto;
  animation:fade .14s ease}
.mask[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal{background:var(--paper);border-radius:16px;width:min(1080px,100%);
  box-shadow:0 8px 20px #241a1024,0 40px 90px -20px #241a104d;animation:rise .18s cubic-bezier(.2,.8,.3,1);
  margin:auto 0}
.modal-head{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;z-index:2}
.modal-head .eyebrow{margin-bottom:4px}
.modal-head h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1.32}
.xbtn{margin-left:auto;flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line-md);
  background:var(--card);color:var(--muted);cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.xbtn:hover{color:var(--ink);border-color:#241a1040}
.modal-body{padding:18px 20px 22px}
@media(max-width:640px){.mask{padding:0}.modal{border-radius:0;min-height:100%}}

/* ══ linear-style tickets ═════════════════════════════════ */
.tickets{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.tgroup{display:flex;align-items:center;gap:9px;padding:9px 16px;background:var(--elevated);
  border-bottom:1px solid var(--line);font-size:12px;font-weight:650}
.tgroup .n{margin-left:auto;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
.tgroup .sq{width:9px;height:9px;border-radius:3px;flex:none}
.ticket{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--line);cursor:default}
.ticket:last-child{border-bottom:0}
.ticket:hover{background:var(--surface)}
.tprio{width:14px;height:14px;flex:none;display:grid;place-items:center}
.tprio i{display:block;width:100%;height:100%}
.tid{font-family:var(--mono);font-size:11.5px;color:var(--faint);width:62px;flex:none}
.ttitle{font-size:13.5px;font-weight:500;color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlabels{display:flex;gap:5px;flex:none}
.tlab{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;border:1px solid var(--line-md);
  color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tlab .d{width:6px;height:6px;border-radius:50%;flex:none}
.tlab img{width:11px;height:11px;border-radius:2px}
.tstat{width:74px;flex:none;text-align:right;font-size:11.5px;color:var(--faint)}
@media(max-width:820px){.ticket{flex-wrap:wrap}.ttitle{flex-basis:100%;white-space:normal}.tid{width:auto}}

/* ══ quality collapse ═════════════════════════════════════ */
.dqrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.dqchip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  border:1px solid var(--line-md);background:var(--card);font-size:12.5px;font-weight:600;color:var(--body)}
.dqchip img{width:16px;height:16px;border-radius:3px;object-fit:contain}
.dqchip .st{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--neg-bg);color:var(--neg)}
.dqchip .st.ok{background:var(--pos-bg);color:var(--pos)}

/* ══ type charts ══════════════════════════════════════════ */
.tc{display:flex;flex-direction:column;gap:9px}
.tcrow{display:grid;grid-template-columns:118px 1fr 66px;gap:12px;align-items:center;font-size:12.5px}
.tcrow .lb{display:flex;align-items:center;gap:7px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcrow .lb i{width:9px;height:9px;border-radius:3px;flex:none}
.tcrow .vv{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--body);font-weight:600}
.tcrow .vv small{color:var(--faint);font-weight:400;margin-left:4px}
.tcbar{display:block;height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.tcbar i{display:block;height:100%;border-radius:4px}
.stack{display:flex;height:11px;border-radius:6px;overflow:hidden;margin-bottom:12px}
.stack i{display:block;height:100%}
@media(max-width:620px){.tcrow{grid-template-columns:96px 1fr 56px;gap:8px}}
.topicrow{cursor:pointer}
.topicrow.on{background:#2b62d90d}
.topicrow.on td:first-child{box-shadow:inset 2px 0 0 var(--accent)}

/* ══ chart marks (dataviz spec: 4px rounded ends, 2px surface gaps) ══ */
.stack{display:flex;height:13px;border-radius:5px;overflow:visible;margin-bottom:14px;gap:2px}
.stack i{display:block;height:100%;border-radius:3px}
.stack i:first-child{border-radius:5px 3px 3px 5px}
.stack i:last-child{border-radius:3px 5px 5px 3px}
.tcbar{display:block;height:9px;background:var(--track);border-radius:4px;overflow:hidden}
.tcbar i{display:block;height:100%;border-radius:4px}
.trk{border-radius:4px}
.fil{border-radius:4px}

/* hover tooltip */
/* Anchored to the element it explains, so it holds still and never sits under
   the pointer. Capped in both directions: an uncapped tooltip on a long quoted
   passage grew to fifteen lines and covered the rows it was describing. */
#tip{position:fixed;z-index:200;pointer-events:none;background:var(--ink);color:#fbf5ea;
  font:500 11.5px/1.5 var(--sans);padding:8px 11px;border-radius:8px;box-shadow:0 8px 24px #241a1052;
  max-width:min(340px,calc(100vw - 20px));max-height:38vh;overflow:hidden;
  opacity:0;transform:translateY(2px);transition:opacity .12s,transform .12s}
#tip.on{opacity:1;transform:none}
#tip b{color:#fff;font-weight:700}
#tip .k{color:#fbf5eaad}
[data-tip]{cursor:default}

/* ══ the map tooltip ══════════════════════════════════════
   A structured card rather than a title and three grey lines, because the marks
   it describes carry four encoded channels and the flat version named none of
   them. The order is fixed and matches the mark: identity and type (the ring),
   the headline count (the size), the client line (the arc), then the rows the
   geometry cannot hold. The hint is ruled off so it stops reading as data.

   It is wider than the report's other tooltips - a domain, a topic name and an
   engine split do not fit in 340px without wrapping every line - and it carries
   its own padding, so #tip's own box shrinks to it. */
#tip:has(.mt){padding:0;max-width:min(384px,calc(100vw - 20px));border-radius:11px}
.mt{padding:11px 13px 12px;display:flex;flex-direction:column;gap:9px}
.mth{display:flex;align-items:center;gap:8px}
.mtico{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fffdf8;
  padding:1.5px;flex:none}
.mtico.ph{display:grid;place-items:center;font:700 8.5px/1 var(--sans);color:#241a10;
  background:#e8dfd0;padding:0}
.mtnm{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
/* the ownership badge, as text - never colour alone, the same rule the rest of
   the report follows for M3-owned rows */
.mtbadge{display:inline-block;margin-left:7px;font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#ffd27a;border:1px solid #ffd27a55;
  border-radius:4px;padding:1px 4px;vertical-align:1px}
.mttype{display:flex;align-items:center;gap:5px;flex:none;font-size:10px;font-weight:600;
  letter-spacing:.03em;color:#fbf5eabb;white-space:nowrap}
.mttype i{width:7px;height:7px;border-radius:50%;background:var(--tc);flex:none}
.mtfig{font-size:11.5px;color:#fbf5eab8;line-height:1.45}
.mtfig b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;
  color:#fff;margin-right:4px}
.mtfig span{display:block;font-size:11px;color:#fbf5ea8f}
/* the arc, restated as a bar: the one channel this map exists to carry */
.mtrate{display:flex;flex-direction:column;gap:5px;padding:8px 0 0;border-top:1px solid #fbf5ea1f}
.mtrl{font-size:11.5px;color:#fbf5eac9}
.mtrl b{color:#ffd27a;font-weight:700}
.mtbar{display:block;height:4px;border-radius:2px;background:#fbf5ea1f;overflow:hidden}
.mtbar i{display:block;height:100%;border-radius:2px;background:#ffd27a;min-width:2px}
.mtrows{display:flex;flex-direction:column;gap:4px}
.mtrows span{display:flex;gap:7px;font-size:11px;color:#fbf5eadb;line-height:1.4}
.mtrows i{font-style:normal;color:#fbf5ea7d;flex:none;min-width:78px}
.mtrows b{color:#fff;font-weight:650}
.mtrows em{font-style:normal;color:#ffd27a;font-weight:650}
.mthint{margin-top:1px;padding-top:8px;border-top:1px solid #fbf5ea1f;
  font-size:10.5px;color:#fbf5ea82;line-height:1.4}
@media(max-width:560px){
  .mtrows i{min-width:0}
  .mtrows span{flex-direction:column;gap:0}
}

/* ══ shopping ═════════════════════════════════════════════ */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1050px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shelf{grid-template-columns:1fr}}
.prod{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.prod.me{border-color:#0e7a4e59;box-shadow:0 0 0 1px #0e7a4e2e,var(--shadow)}
.prod .img{height:118px;background:#fff;display:grid;place-items:center;padding:11px;border-bottom:1px solid var(--line)}
.prod .img img{max-width:100%;max-height:100%;object-fit:contain}
.prod .b{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .rk{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.prod .nm{font-size:12.5px;font-weight:600;line-height:1.35;flex:1}
.prod .pr{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.prod .mt{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.prod .st{color:var(--s-yellow);font-weight:600}

/* ══ ads ══════════════════════════════════════════════════ */
.adrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.adrow:last-child{border-bottom:0}
.adrow img{width:26px;height:26px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.adrow .an{font-size:13.5px;font-weight:650;flex:1;min-width:0}
.adrow .ac{font-size:11.5px;color:var(--faint)}
.adrow .abar{width:150px;flex:none}
.adrow .av{width:64px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
@media(max-width:720px){.adrow .abar{display:none}}

/* ══ tickets, refined ═════════════════════════════════════ */
.tickets{border:1px solid var(--line);border-radius:14px}
.tgroup{padding:10px 18px;font-size:11.5px;letter-spacing:.02em;background:var(--elevated)}
.tgroup .sq{width:8px;height:8px;border-radius:50%}
.ticket{padding:0;align-items:stretch;gap:0}
.ticket>*{padding-top:11px;padding-bottom:11px}
.ticket .tprio{width:36px;justify-content:center;padding-left:14px;box-sizing:content-box}
.tid{width:66px;letter-spacing:.02em;padding-top:12px}
.tmain{flex:1;min-width:0;padding-right:14px}
.ttitle{font-size:13.5px;font-weight:600;letter-spacing:-.008em}
.tlabels{align-items:center;padding-right:14px}
.tlab{background:var(--surface);border-color:transparent;font-weight:600;padding:3px 9px;color:var(--body)}
.tlab img{border-radius:3px}
.tstat{display:flex;align-items:center;justify-content:flex-end;gap:7px;width:96px;padding-right:16px;
  color:var(--muted);font-size:11.5px;font-weight:500}
.tstat .ring{width:11px;height:11px;border-radius:50%;border:1.8px dashed var(--line-strong,#c6ccd4);flex:none}
.ticket:hover .tstat .ring{border-color:var(--muted)}

/* ══ topic rankings ═══════════════════════════════════════ */
.trank{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);
  overflow-x:auto;overflow-y:hidden}
/* ONE GRID, ACTUALLY SHARED. Declaring the same `grid-template-columns` on the
   header and on every row is NOT the same as sharing a grid, and that was the
   real fault: each row is its own formatting context, so `minmax(140px,1fr)`
   resolved against that row's own content. A row whose topic is called
   "Renouvellement et refinancement" computed a 290px name column where the
   header computed 265px - so its nine logos sat 25px right of the "#1..#9"
   headings and the last one was clipped by the card. Three different templates
   were live at once. Matching declarations cannot fix that; only one grid can.

   The table is the grid now and every row is a `subgrid` of it, so the columns
   are resolved once, for all rows together, from the widest content in each. */
.trank{--tcols:14px minmax(140px,1fr) 172px 62px max-content;
  display:grid;grid-template-columns:var(--tcols)}
.trhead,.trow,.trmain,.trsub,.trprompt{grid-column:1/-1}
.trhead,.trmain,.trprompt{display:grid;grid-template-columns:subgrid;
  gap:11px;align-items:center}
/* .trsub has to pass the columns through too, or the prompt rows inside it have
   no subgrid parent and fall back to a single column - which put their slots
   557px left of the heading. */
.trow,.trsub{display:grid;grid-template-columns:subgrid}
@supports not (grid-template-columns:subgrid){
  /* Without subgrid the columns cannot be resolved together, so the name column
     stops being fluid - a fixed width is the only way every row agrees. */
  .trank{display:block}
  .trhead,.trmain,.trprompt{grid-template-columns:14px 265px 172px 62px max-content}
}
.trhead{padding:9px 16px;border-bottom:1px solid var(--line);background:var(--elevated)}
.trhead .th-t{font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--faint)}
.trslots{display:flex;gap:6px;flex:none}
.trslot-h{width:30px;text-align:center;font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.04em}
.trow{border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trmain{padding:10px 16px;cursor:pointer}
.trmain:hover{background:var(--surface)}
.trmain .chev{width:13px;height:13px;color:var(--faint);transition:transform .15s;flex:none}
.trow.open .trmain .chev{transform:rotate(90deg)}
/* the name owns a real column now, so it stops wrapping to three lines */
.trname{font-size:13.5px;font-weight:600;letter-spacing:-.008em;min-width:0;
  display:flex;align-items:center;gap:9px}
.trname>span{flex:none}
.trbadge{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:9px}
.trbadge.lead{background:var(--pos-bg);color:var(--pos)}
.trbadge.comp{background:var(--warn-bg);color:var(--gold-deep)}
.trbadge.miss{background:var(--neg-bg);color:var(--neg)}
.trprompt>.trptext{grid-column:2/5;min-width:0}
.slot{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--elevated)}
.slot img{width:19px;height:19px;border-radius:50%;object-fit:contain;background:#fff}
.slot.empty{background:#241a1010}
.slot.me{background:var(--pos-bg);box-shadow:inset 0 0 0 1.5px var(--pos)}
.trsub{background:var(--surface);border-top:1px solid var(--line)}
.trsub[hidden]{display:none}
/* SAME PADDING AS THE MAIN ROW, and no display of its own. This re-declared
   `display:flex` after the shared grid rule and so quietly won it back, and its
   40px left padding put every sub-row's slots 24px right of the column heading
   even once the grid was restored. The indent comes from the text starting in
   the name column instead, which indents it AND keeps it on the grid. */
.trprompt{padding:8px 16px;border-bottom:1px solid var(--line)}
.trprompt:last-child{border-bottom:0}
.trprompt:hover{background:var(--elevated)}
.trptext{font-size:12.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:9px}
.trprompt:hover .trptext{color:var(--accent)}
@media(max-width:900px){.trslots{display:none}}

/* ══ head to head ═════════════════════════════════════════ */
.h2{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.h2top{display:flex;align-items:flex-start;gap:16px;padding:20px 22px 6px}
.h2side{flex:1;min-width:0}
.h2side.r{text-align:right}
.h2who{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--body)}
.h2side.r .h2who{justify-content:flex-end}
.h2big{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.035em;line-height:1.05;margin-top:5px}
.h2div{width:1px;align-self:stretch;background:var(--line);margin-top:4px}
.h2note{padding:2px 22px 16px;font-size:12.5px;color:var(--muted);line-height:1.55}
.h2bar{display:flex;height:16px;margin:0 22px 18px;border-radius:8px;overflow:hidden;gap:2px}
.h2bar i{display:block;height:100%}
.h2bar i:first-child{border-radius:8px 3px 3px 8px}
.h2bar i:last-child{border-radius:3px 8px 8px 3px}
.h2known{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.h2known>div{padding:16px 22px}
.h2known>div+div{border-left:1px solid var(--line)}
.h2known .eyebrow{margin-bottom:11px}
.h2k{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;padding:5px 0;line-height:1.45}
.h2k .ic{width:14px;height:14px;flex:none;margin-top:1px}
.h2k.pos .ic{color:var(--pos)} .h2k.neg .ic{color:var(--neg)}
.h2metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.h2metrics>div{padding:13px 18px}
.h2metrics>div+div{border-left:1px solid var(--line)}
.h2m{display:flex;align-items:baseline;gap:8px;margin-top:5px;font-variant-numeric:tabular-nums}
.h2m .a{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.h2m .vs{font-size:11px;color:var(--faint)}
.h2m .b{font-size:14px;color:var(--muted);font-weight:600}
.h2m .win{color:var(--pos)} .h2m .lose{color:var(--neg)}
@media(max-width:860px){.h2known,.h2metrics{grid-template-columns:1fr}.h2known>div+div,.h2metrics>div+div{border-left:0;border-top:1px solid var(--line)}}

/* ── v9: commerce detail views ─────────────────────────── */
.basis{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.6;color:var(--muted);
  margin:0 0 18px;padding:10px 13px;background:var(--elevated);border-radius:9px}
.basis b{color:var(--body);font-weight:650}
.basis .dot{flex:none;margin-top:5px}
.dot.warn{background:var(--gold)}

.crumb{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px;flex-wrap:wrap}
.crumb svg{width:11px;height:11px;flex:none;opacity:.6}
.crumb span{max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .cur{color:var(--gold-deep)}
.msub{margin-top:6px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.msub b{color:var(--ink);font-weight:650}
.msub .k{color:var(--faint)}
.xbtn.back{font-size:19px;line-height:1}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--gold-deep);cursor:pointer;letter-spacing:inherit}
.linkish:hover{text-decoration:underline}
.ext{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none}
.ext:hover{text-decoration:underline}

.phero{display:flex;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line);align-items:flex-start}
.phero h4{font-family:var(--display);font-size:18px;font-weight:650;letter-spacing:-.025em;line-height:1.3;margin:3px 0 0}
.phero .img{width:132px;height:132px;flex:none;background:#fff;border:1px solid var(--line);border-radius:10px;
  display:grid;place-items:center;padding:10px;overflow:hidden}
.phero .img img{max-width:100%;max-height:100%;object-fit:contain}
.phero.crt .img{width:212px;height:150px;padding:0}
.phero.crt .img img{width:100%;height:100%;object-fit:cover}
.phero .bd{font-size:13px;color:var(--body);line-height:1.6;margin:8px 0 0;max-width:62ch}
.phero.adv .alogo{width:52px;height:52px;flex:none;border:1px solid var(--line);border-radius:12px;
  background:#fff;display:grid;place-items:center}
.noimg{font-size:10.5px;color:var(--faint);font-style:italic;text-align:center;padding:0 6px}
.mt2{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.mt2 b{color:var(--ink);font-weight:650}
.mt2 .rv,.mt2 .k{color:var(--faint)}
.stars{color:var(--s-yellow);letter-spacing:-1px;font-size:12px}
.stars i{font-style:normal;opacity:.28}
.stars i.on{opacity:1}
.pmeta .v .big{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.03em}
.pmeta .v .k{font-size:11.5px;color:var(--faint);font-weight:400}
.bignum{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:6px 0 16px}

/* wave columns — two collection dates, drawn as columns not a line */
.wavechart{padding:2px 0 0}
.wc-grid{display:grid;gap:10px;align-items:end;height:168px;padding-top:18px}
.wc-col{display:flex;flex-direction:column;height:100%;min-width:0}
.wc-stack{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:6px;
  border-bottom:1px solid var(--line-md);padding:0 4px}
.wc-bar{position:relative;flex:1;max-width:44px;min-height:2px;border-radius:4px 4px 0 0;
  display:flex;align-items:flex-start;justify-content:center;transition:opacity .12s}
.wc-bar:hover{opacity:.82}
.wc-bar.me{outline:2px solid #241a1024;outline-offset:1px}
/* a zero wave is a real reading, so it keeps a hairline stub on the axis rather
   than vanishing — but it must not read as a bar */
.wc-bar.zero{min-height:2px;background:var(--line-md)!important;border-radius:2px;opacity:.9}
.wc-bar.zero.me{outline-color:#241a1012}
.wc-bar i{position:absolute;top:-16px;left:0;right:0;text-align:center;font-style:normal;
  font-size:10.5px;font-weight:700;color:var(--body);font-variant-numeric:tabular-nums}
.wc-x{text-align:center;font-size:11px;color:var(--faint);padding-top:7px;font-variant-numeric:tabular-nums}
.wc-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.wc-key span{display:inline-flex;align-items:center;gap:6px}
.wc-key i{width:9px;height:9px;border-radius:3px;flex:none}

/* categories table */
table.cats .catrow{cursor:pointer}
table.cats .catrow:hover{background:var(--elevated)}
table.cats .catrow .car{width:13px;height:13px;color:var(--faint);transition:transform .14s}
table.cats .catrow[aria-expanded="true"] .car{transform:rotate(180deg)}
table.cats .catbody>td{padding:4px 0 18px;background:var(--elevated)}
table.cats .catbody .shelf{padding:0 4px}
.rt{color:var(--s-yellow);font-weight:650}

/* product cards are buttons now */
.prod{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;padding:0;transition:box-shadow .13s,border-color .13s}
.prod:hover{border-color:#241a1033;box-shadow:0 3px 12px #241a1014}
.prod .mt2{margin-top:0}
.prod .occ{font-weight:700;color:var(--body);font-variant-numeric:tabular-nums}

/* ad creatives */
.crtgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1050px){.crtgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.crtgrid{grid-template-columns:1fr}}
.crt{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:left;
  font:inherit;color:inherit;padding:0;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:box-shadow .13s,border-color .13s}
.crt:hover{border-color:#241a1033;box-shadow:0 3px 12px #241a1014}
.crt .img{position:relative;aspect-ratio:16/10;background:var(--elevated);display:grid;place-items:center;overflow:hidden}
.crt .img img{width:100%;height:100%;object-fit:cover}
.crt .spon{position:absolute;top:8px;right:8px;font-size:10px;font-weight:650;padding:2px 7px;border-radius:5px;
  background:#fffdf8e6;color:var(--muted);border:1px solid var(--line)}
.crt .b{padding:12px 14px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.crt .adv{font-size:11.5px;color:var(--muted)}
.crt .nm{font-size:13.5px;font-weight:650;line-height:1.35;letter-spacing:-.012em}
.crt .bd{font-size:12px;color:var(--muted);line-height:1.5;flex:1}
.crt .tags{display:flex;gap:5px;flex-wrap:wrap}
.crt .mt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.crt .mt b{color:var(--ink)}
.crt .mt .k{color:var(--faint)}
.tag.sm{font-size:10.5px;padding:1px 6px}

/* advertiser rows are buttons */
.adrow{display:flex;align-items:center;gap:11px;padding:11px 16px;width:100%;text-align:left;
  border:0;border-top:1px solid var(--line);background:none;font:inherit;color:inherit;cursor:pointer}
.adrow:first-child{border-top:0}
.adrow:hover{background:var(--elevated)}
.adrow .rk{width:18px;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.adrow .an{flex:1;min-width:0;font-size:13px;font-weight:600}
.adrow .ac{font-size:11.5px;font-weight:400;color:var(--faint);margin-top:2px}
.adrow .abar{width:150px;flex:none}
.adrow .abar .trk{display:block;height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.adrow .abar .fil{display:block;height:100%;border-radius:4px}
.adrow .av{width:78px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.adrow .av b{font-size:14px;font-weight:650}
.adrow .av small{display:block;font-size:11px;color:var(--faint)}
@media(max-width:720px){.adrow .abar{display:none}}

.crtcell{display:flex;gap:10px;align-items:flex-start;min-width:0}
.crtcell img,.crtcell .ph2{width:46px;height:32px;flex:none;border-radius:5px;object-fit:cover;
  background:var(--elevated);border:1px solid var(--line)}
.sub2{font-size:11.5px;color:var(--faint);margin-top:3px;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
tr.rowlink{cursor:pointer}
tr.rowlink:hover{background:var(--elevated)}
.legend.tight{border-top:0;margin-top:8px;padding-top:0}
.legend>span{display:block;line-height:1.65}
.legend b{color:var(--body);font-weight:650}
/* the card is a flex column: without min-height:0 the image's intrinsic height
   wins over the 118px box and spills over the copy below it */
.prod .img{flex:none;min-height:0;height:124px}
.prod .img img{display:block;max-height:100px}
.kpi .v.txt{font-size:21px;letter-spacing:-.01em;line-height:1.25}
.phero{flex-direction:row}
@media(max-width:700px){.phero{flex-direction:column}}
/* .emark, not .mark: .mark is already the sidebar lockup */
.emark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:none;
  color:#fff;font:700 10px/1 var(--sans);letter-spacing:.02em}
.emark.lg{width:17px;height:17px;border-radius:5px;font-size:8px}
.emark.lg.sm{width:15px;height:15px;font-size:7.5px}
.emark.big{width:36px;height:36px;border-radius:9px;font-size:14px}

/* ══ v10: hierarchy, focus, motion ═══════════════════════ */

/* the report leads with one figure. exactly one hero per view. */
.hero{display:block;padding:6px 0 26px}
.hero-fig .eyebrow{margin-bottom:12px}
/* proportional figures: tabular-nums makes a display-size number read loose */
.hero-v{font-family:var(--display);font-size:76px;font-weight:600;letter-spacing:-.045em;
  line-height:.86;margin:0;font-variant-numeric:proportional-nums}
.hero-v small{font-size:28px;font-weight:500;color:var(--faint);letter-spacing:-.01em;margin-left:1px}
.hero-d{margin-top:16px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.hero-s{font-size:13px;color:var(--muted);line-height:1.62;margin:16px 0 0;max-width:40ch}

/* direction is carried by the arrow and the word, not by colour alone */
.delta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;
  padding:3px 9px 3px 7px;border-radius:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta i{font-style:normal;font-size:12px;line-height:1}
.delta.up{background:var(--pos-bg);color:var(--pos)}
.delta.down{background:var(--neg-bg);color:var(--neg)}
.delta.flat{background:var(--elevated);color:var(--muted)}
.since{font-size:11.5px;color:var(--faint)}
.kpi .s .delta{font-size:11.5px;padding:2px 7px 2px 6px}
.kpi .s{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:18px}


.shead2{display:flex;align-items:baseline;gap:14px;margin-bottom:15px}
.shead2 .smeta{margin-left:auto;font-size:11.5px;color:var(--faint)}
/* at 1440 an unconstrained bar leaves 600px between label and value */
.engblock{max-width:840px}
.engblock .trk{height:10px;border-radius:5px}
.engblock .bar{grid-template-columns:200px 1fr 62px}
/* the 30-day average, on the same track rather than as a competing bar */
.trk{position:relative}
.ref{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.42;border-radius:1px}
.bar[data-tip]{cursor:default;border-radius:7px;outline-offset:3px}

/* keyboard users got nothing before this */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.bar:focus-visible,.wc-bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.prod:focus-visible,.crt:focus-visible,.adrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* topics: the table's own headline number, which it was missing */
.trhead .th-v{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.085em;
  text-transform:uppercase;color:var(--faint);flex:none;padding-left:2px}
.trhead .th-p{text-align:right;font-size:10.5px;font-weight:700;letter-spacing:.085em;
  text-transform:uppercase;color:var(--faint);flex:none;margin-right:16px}
.trvis{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.trvis .trtrk{flex:1;height:7px;background:var(--track);border-radius:4px;overflow:hidden;min-width:0}
.trvis .trfil{display:block;height:100%;border-radius:4px;background:var(--s-blue)}
.trvis b{width:48px;text-align:right;font-size:13px;font-weight:650}
.trvis b small{font-size:10.5px;font-weight:500;color:var(--faint)}
/* NO margin-right. That 16px was the whole misalignment: the header's matching
   cell never had it, so every slot in the table sat 16px right of its heading. */
.trp{text-align:right;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
@media(max-width:1180px){.trhead .th-v,.trvis{width:120px}}
@media(max-width:900px){.trhead .th-v,.trhead .th-p{display:none}.trvis{width:82px}.trvis .trtrk{display:none}.trp{display:none}}

/* one continuous baseline, not one per column */
.wc-grid{border-bottom:1px solid var(--line-md)}
.wc-stack{border-bottom:0}

/* prompt explorer: 150 rows, so density and a scannable state column matter most */
.expbar{margin-bottom:14px}
.seg.sm button{padding:5px 11px;font-size:12px}
/* the header is not inside a .pr, so the grid has to live on .prow itself */
.prow{display:grid;grid-template-columns:1fr 96px 178px 176px;gap:16px;align-items:center}
.pr .prow{padding:9px 0}
.prow.prhead{padding:0 0 9px;border-bottom:1px solid var(--line-md)}
.prow.prhead .engs{justify-items:center}
.pr{border-bottom:1px solid var(--line);cursor:pointer}
.pr:hover{background:var(--surface)}
.pr .pt{font-size:13.5px;line-height:1.45}
.pr:hover .pt{color:var(--accent)}
.engs{display:grid;grid-template-columns:repeat(3,30px) 1fr;gap:6px;align-items:center;justify-items:center}
.engcell{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--elevated)}
.engcell img{width:17px;height:17px;border-radius:50%;object-fit:contain;background:#fff}
/* three states, three treatments: present, measured-and-absent, never answered */
.engcell.yes{background:var(--pos-bg);box-shadow:inset 0 0 0 1.5px #0e7a4e4d}
.engcell.no{background:transparent;box-shadow:inset 0 0 0 1px var(--line-md)}
.engcell.no img{opacity:.3;filter:grayscale(1)}
.engcell.na{background:repeating-linear-gradient(45deg,transparent,transparent 3px,#241a1010 3px,#241a1010 6px);
  box-shadow:inset 0 0 0 1px var(--line)}
.engcell.na img{opacity:.22;filter:grayscale(1)}
.engcell.hd{background:transparent;box-shadow:none;height:auto}
.engcell.hd img{opacity:.5;filter:grayscale(1)}
.enghits{font-size:12.5px;font-weight:700;color:var(--body);font-variant-numeric:tabular-nums;justify-self:end}
.enghits small{font-weight:500;color:var(--faint)}
.enghits.hd{font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--faint)}
.engs.out .enghits{color:var(--faint)}
@media(max-width:1080px){.prow{grid-template-columns:1fr 90px 150px 176px;gap:12px}}
@media(max-width:900px){.prow{grid-template-columns:1fr;gap:8px}.prow.prhead{display:none}.engs{justify-items:start;grid-template-columns:repeat(3,30px) 60px}}

/* one ownership treatment, used wherever the client's own entity appears */
.prod.me{border-color:#0e7a4e;box-shadow:0 0 0 1px #0e7a4e,var(--shadow)}
.prod.me .img{border-bottom-color:#0e7a4e2e}
.prod .rk{display:flex;align-items:center;gap:8px;min-height:17px}
.ownpill{background:var(--pos);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;line-height:1.35}

/* the breadcrumb and close stay reachable on a long detail page.
   .modal used to be overflow:hidden for its corner radius, which silently
   disabled the sticky header - the radius now lives on the head and body instead */
.modal-head{border-radius:16px 16px 0 0;box-shadow:0 1px 0 var(--line),0 8px 16px -14px #241a1040}
.modal-body{border-radius:0 0 16px 16px;background:var(--paper)}
.modal{position:relative}
@media(max-width:640px){.modal-head,.modal-body{border-radius:0}}

/* ══ print / PDF ═════════════════════════════════════════
   Clients export these to send on. Without this the fixed sidebar covers the
   content and every section splits mid-panel. */
@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff}
  .side,.topbar,.mask,#tip,.seg,.expbar,#dq-toggle,.dd{display:none!important}
  .shell{display:block}
  .wrap{max-width:none;padding:0}
  section{break-inside:auto;padding:16px 0 18px}
  .shead,.shead2,.hero,.kpis,.panel2,.pcard,.prod,.crt,.trow,.pr,.wavechart{break-inside:avoid}
  .panel2,.prod,.crt,.trank,.panel{box-shadow:none!important;border-color:#0003}
  .hero{grid-template-columns:1fr 1fr;gap:28px}
  .hero-v{font-size:56px}
  /* panes are tab-switched on screen; on paper every one prints */
  [data-pane]{display:block!important}
  [data-pane]+[data-pane]{margin-top:18px}
  .trsub,.catbody{display:table-row!important}
  .trsub[hidden]{display:block!important}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9px;color:#666;word-break:break-all}
  .scroll{overflow:visible!important}
}
/* between 900 and 1180 the 9 rank slots + name + visibility overran the card */
@media(max-width:1180px){
  .trhead .th-p,.trp{display:none}
  .trslots>:nth-child(n+8){display:none}
  .trhead .th-v,.trvis{width:150px}
}
@media(max-width:1040px){.trslots>:nth-child(n+6){display:none}}
/* long opportunity titles were pushing the ticket row wider than its column */
.tmain{overflow-wrap:anywhere}
.ttitle{display:block}

/* ══ v11: donuts, named platforms ════════════════════════ */
.dwrap{display:flex;align-items:center;gap:22px}
@media(max-width:1180px){.dwrap{gap:16px}}
.donut{position:relative;width:140px;height:140px;flex:none}
.donut svg{width:100%;height:100%;display:block;overflow:visible}
.dslice{transition:opacity .12s;cursor:default}
.donut:hover .dslice{opacity:.42}
.donut .dslice:hover,.donut .dslice:focus-visible{opacity:1}
.donut .dslice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcentre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;text-align:center;padding:0 22px}
.dcentre .dv{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.03em;line-height:1}
.dcentre .dv small{font-size:13px;font-weight:500;color:var(--faint)}
.dcentre .dl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-top:5px;line-height:1.25}
.dwrap .tc{flex:1;min-width:0;gap:7px}
.dwrap .tcrow{display:flex;align-items:center;gap:10px}
.dwrap .tcrow .lb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwrap .tcrow .lb i{width:9px;height:9px;border-radius:3px;flex:none}
.dwrap .tcrow .vv{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:6px;flex:none}
.dwrap .tcrow .vv small{font-weight:500;color:var(--faint);font-size:11px}

/* named platforms: identity is the logo, so every bar is one neutral */
.pfrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.pfrow:last-child{border-bottom:0}
.pfrow.head{border-bottom:1px solid var(--line-md);padding-bottom:10px;margin-bottom:4px;gap:8px}
.pfshare{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.03em}
.pfsub{font-size:11.5px;color:var(--muted);line-height:1.4}
.pfn{flex:1;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pftrk{width:82px;flex:none;height:7px;background:var(--track);border-radius:4px;overflow:hidden}
.pftrk i{display:block;height:100%;border-radius:4px;background:var(--gold)}
.pfv{width:74px;flex:none;text-align:right;font-size:12.5px;font-weight:650;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:flex-end;gap:6px}
.pfv small{font-weight:500;color:var(--faint);font-size:11px}
.pfnone{font-size:11.5px;color:var(--faint);padding-top:10px;line-height:1.5}
/* platform marks in a detail KPI strip were a 17px dot */
.pmeta .v.plats{gap:9px}
.platmark img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:#fff;
  border:1px solid var(--line);padding:3px}
.wc-key span{display:inline-flex;align-items:center;gap:6px}
.wc-key span.on{color:var(--ink);font-weight:650}
.wc-key img{width:15px;height:15px;border-radius:4px;object-fit:contain;background:#fff}
.showmore{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:14px;
  padding:11px;border:1px solid var(--line-md);border-radius:10px;background:var(--card);cursor:pointer;
  font:650 12.5px/1 var(--sans);color:var(--body)}
.showmore:hover{border-color:#241a1040;color:var(--ink)}
.showmore svg{width:14px;height:14px;transition:transform .16s}
.showmore[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ══ v11: head-to-head ═══════════════════════════════════ */
.rchips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.rchips button{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;
  border:1px solid var(--line-md);background:var(--card);cursor:pointer;font:600 12.5px/1.35 var(--sans);
  color:var(--muted)}
.rchips button:hover{border-color:#241a1040;color:var(--ink)}
.rchips button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rchips button[aria-selected="true"] small{color:#f6f1e7a8}
.rchips small{font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.rchips img{width:17px;height:17px;border-radius:4px;object-fit:contain;background:#fff}
#h2-meta{display:inline-flex;align-items:baseline;gap:8px}

.h2mcell .h2split{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-top:9px;gap:2px}
.h2split i{display:block;height:100%;border-radius:3px}
.h2split .me{background:var(--pos)}
.h2split .them{background:var(--neg);opacity:.5}

/* the diverging view: which topics carry the lead, and which give it back */
.h2topics{border-top:1px solid var(--line);padding:18px 20px 16px}
.h2th{display:flex;align-items:baseline;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.h2th .smeta{font-size:11.5px;color:var(--faint)}
.h2trow{display:grid;grid-template-columns:200px 1fr 64px;gap:14px;align-items:center;padding:5px 0}
.h2trow:hover{background:var(--surface)}
.h2tn{font-size:12.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2tbar{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;min-width:0}
.h2tbar .lhs{display:flex;justify-content:flex-end}
.h2tbar .rhs{display:flex;justify-content:flex-start}
.h2tbar i{display:block;height:9px;border-radius:3px}
.h2tbar .lhs i{background:var(--neg);opacity:.62}
.h2tbar .rhs i{background:var(--pos)}
.h2tbar .axis{height:16px;background:var(--line-md)}
.h2tv{text-align:right;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.h2tv.win{color:var(--pos)} .h2tv.lose{color:var(--neg)}
.h2tkey{display:flex;gap:18px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted)}
.h2tkey span{display:inline-flex;align-items:center;gap:6px}
.h2tkey i{width:9px;height:9px;border-radius:3px}
.h2tkey .me{background:var(--pos)} .h2tkey .them{background:var(--neg);opacity:.62}
@media(max-width:820px){.h2trow{grid-template-columns:1fr 56px}.h2tbar{grid-column:1/-1;order:3}}
/* the engine bars double as the engine filter */
button.bar{width:100%;border:0;background:none;font:inherit;color:inherit;padding:4px 8px;margin:-4px -8px;
  cursor:pointer;text-align:left;border-radius:9px}
button.bar:hover{background:var(--surface)}
button.bar.on{background:var(--elevated)}
button.bar.on .nm b{color:var(--ink)}
button.bar.on:after{content:"";position:absolute}
.bars{gap:7px}

/* ══ v12 ═════════════════════════════════════════════════ */

/* source type reads off a dot beside the name, not only off the bar */
.tdot{width:8px;height:8px;border-radius:3px;flex:none;margin-left:-1px}
.bar .nm .withlogo{gap:7px}

/* prompt explorer: bigger marks, a tick on the ones that named the brand */
.engs{grid-template-columns:repeat(3,34px) 1fr;gap:7px}
.engcell{width:34px;height:34px;border-radius:10px;position:relative}
.engcell img{width:20px;height:20px;border-radius:50%;background:#fff;padding:1px;
  box-shadow:0 0 0 1px #241a1012}
.engcell.yes{background:var(--pos-bg);box-shadow:inset 0 0 0 1.5px #0e7a4e55}
.engcell.yes .tick2{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;color:#fff;
  background:var(--pos);border-radius:50%;padding:2.5px;box-shadow:0 0 0 2px var(--card)}
.pr:hover .engcell.yes .tick2{box-shadow:0 0 0 2px var(--surface)}
.engcell.no img{opacity:.34;filter:grayscale(1)}
.engcell.na img{opacity:.24;filter:grayscale(1)}
.engcell.hd{width:34px;height:22px;background:transparent;box-shadow:none}
.enghits{font-size:13px}

/* the prompt column was wrapping to three lines while the row had spare width */
.prow{grid-template-columns:minmax(0,1fr) 92px 150px 172px;gap:20px}
.pr .pt{line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr .tp{font-size:12px;line-height:1.35}
@media(max-width:1180px){.prow{grid-template-columns:minmax(0,1fr) 86px 130px 172px;gap:14px}}

/* known for: two grouped blocks per brand rather than one mixed tick/cross list */
.h2known{display:grid;grid-template-columns:1fr 1fr;gap:0}
.h2kside{padding:18px 20px}
.h2kside+.h2kside{border-left:1px solid var(--line)}
.h2khead{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.h2khead b{font-size:13.5px;font-weight:700;letter-spacing:-.012em}
.h2khead img{width:19px;height:19px;border-radius:5px;object-fit:contain;background:#fff}
.h2kcount{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.h2kgroup{border-radius:10px;padding:11px 13px 12px;margin-bottom:10px}
.h2kgroup:last-child{margin-bottom:0}
.h2kgroup.pos{background:var(--pos-bg)}
.h2kgroup.neg{background:var(--neg-bg)}
.h2kgh{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:8px}
.h2kgh svg{width:12px;height:12px;flex:none}
.h2kgh span{margin-left:auto;font-size:11px;letter-spacing:0;font-variant-numeric:tabular-nums;opacity:.7}
.h2kgroup.pos .h2kgh{color:var(--pos)}
.h2kgroup.neg .h2kgh{color:var(--neg)}
.h2k{font-size:12.5px;line-height:1.5;color:var(--body);padding:3px 0 3px 13px;position:relative}
.h2k:before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.42}
.h2kgroup.pos .h2k{color:#0a5c3c}
.h2kgroup.neg .h2k{color:#9c2222}
.h2kempty{font-size:12.5px;color:var(--faint);font-style:italic;line-height:1.55}
@media(max-width:820px){.h2known{grid-template-columns:1fr}.h2kside+.h2kside{border-left:0;border-top:1px solid var(--line)}}

/* actions: a summary bar, and the full brief instead of a mid-word ellipsis */
.oppbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.oppchips{display:flex;gap:8px;flex-wrap:wrap}
.oppchip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-md);background:var(--card);cursor:pointer;font:600 12px/1.35 var(--sans);color:var(--muted)}
.oppchip:hover{border-color:#241a1040;color:var(--ink)}
.oppchip i{width:8px;height:8px;border-radius:50%}
.oppchip b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.oppmix{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:11.5px;color:var(--muted)}
.oppmixi{display:inline-flex;align-items:center;gap:6px}
.oppmixi i{width:8px;height:8px;border-radius:3px}
.oppmixi b{color:var(--body)}
.tickets{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.tgroup{display:flex;align-items:center;gap:9px;font-weight:650}
.tgroup .n{margin-left:0;font-variant-numeric:tabular-nums;color:var(--faint)}
.tgdesc{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--faint)}
.ticket{display:flex;border-top:1px solid var(--line)}
.ticket:hover{background:var(--surface)}
.tid{width:74px;flex:none;padding-left:16px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.tmain{flex:1;min-width:0;padding-right:16px}
.tdesc{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.55;max-width:78ch;
  white-space:normal;overflow:visible;text-overflow:clip}
.tlabels{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;padding:0;align-items:center}
.tlab{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;font-size:11px;font-weight:600;padding:3px 9px;color:var(--body)}
.tlab.act{color:var(--c);border-color:color-mix(in srgb, var(--c) 30%, transparent);
  background:color-mix(in srgb, var(--c) 9%, transparent)}
.tlab.act svg{width:12px;height:12px}
.tlab.ghost{color:var(--faint);background:transparent}
.tlab .d{width:8px;height:8px;border-radius:50%;flex:none}
.tlab img{width:13px;height:13px;border-radius:3px;object-fit:contain;background:#fff}
.tstat{width:104px;flex:none;padding-right:16px}
@media(max-width:820px){.tid{width:60px}.tstat{display:none}}
.platmark.off img{opacity:.3;filter:grayscale(1)}

/* ══ v13 ═════════════════════════════════════════════════ */

/* named platforms ride inside their source-type row */
.pfin{display:inline-flex;align-items:center;gap:3px;margin-left:6px}
.pfin img{width:14px;height:14px;border-radius:4px;object-fit:contain;background:#fff;
  box-shadow:0 0 0 1px #241a1012}

/* the topics that surfaced a product, on the card itself */
.ptopics{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.ptopics .tag{font-size:9.5px;padding:1px 6px;line-height:1.5}
.also{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
/* the question that put this product on the shelf - the actual relationship,
   and the one thing that differs card to card inside a category */
.pask{display:flex;gap:6px;align-items:flex-start;font-size:11px;color:var(--muted);line-height:1.42}
.pask svg{width:11px;height:11px;flex:none;color:var(--faint);margin-top:2px}
.pask span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .b{gap:5px}

/* actions: a Linear issue row - id, title, one line of context, quiet metadata */
.oppbar{align-items:baseline;margin-bottom:14px}
.oppnote{margin-left:auto;font-size:11.5px;color:var(--faint)}
.tickets{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.tgroup{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--elevated);
  font-size:11.5px;font-weight:650;color:var(--body);border-bottom:1px solid var(--line)}
.tgroup .sq{width:7px;height:7px;border-radius:50%;flex:none}
.tgroup .n{color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.ticket{display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--line);
  min-height:44px}
.ticket:last-child{border-bottom:0}
.ticket:hover{background:var(--surface)}
.tid{width:66px;flex:none;padding:0;font-family:var(--mono);font-size:11px;color:var(--faint);
  letter-spacing:-.02em}
.tmain{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;padding:0}
.ttitle{font-size:13px;font-weight:600;letter-spacing:-.008em;flex:none;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdesc{font-size:12.5px;color:var(--muted);margin:0;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none;line-height:1.5}
.tmeta{display:flex;gap:6px;flex:none;align-items:center}
.tlab{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--line-md);
  border-radius:6px;font-size:11px;font-weight:600;padding:2px 8px;color:var(--muted);white-space:nowrap}
.tlab i{width:7px;height:7px;border-radius:50%;flex:none}
.tstat{width:88px;flex:none;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:7px;
  color:var(--faint);font-size:11.5px;font-weight:500}
.tstat .ring{width:10px;height:10px;border-radius:50%;border:1.6px dashed var(--line-md);flex:none}
@media(max-width:1120px){.ttitle{max-width:none}.tdesc{display:none}}
@media(max-width:860px){.tmeta,.tstat{display:none}}

/* data quality: coverage, and what each missing source would add */
.dqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1100px){.dqgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.dqgrid{grid-template-columns:1fr}}
.dqcard{border:1px solid var(--line);border-radius:12px;padding:13px 15px 14px;background:var(--card)}
.dqcard.on{border-color:#0e7a4e40;background:var(--card);box-shadow:0 0 0 1px #0e7a4e1f}
.dqh{display:grid;grid-template-columns:17px 1fr;gap:8px 8px;align-items:center;margin-bottom:10px}
.dqh img{width:17px;height:17px;border-radius:5px;object-fit:contain;background:#fff}
.dqh b{font-size:12.5px;font-weight:650;letter-spacing:-.01em;min-width:0;line-height:1.35}
.dqh .st{grid-column:2;justify-self:start;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--neg-bg);color:var(--neg)}
.dqh .st.ok{background:var(--pos-bg);color:var(--pos)}
.dqw{font-size:11.5px;color:var(--body);margin-bottom:9px}
.dqm{font-size:11.5px;color:var(--muted);line-height:1.5}
.dqm span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:2px}
.dqprog{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.dqprog .trk{display:block;height:5px;background:var(--track);border-radius:3px;overflow:hidden}
.dqprog .trk i{display:block;height:100%;background:var(--pos);border-radius:3px}
.dqprog .lbl{display:block;font-size:10.5px;color:var(--faint);margin-top:6px}

/* ══ tickets, compact + clickable ═════════════════════════
   The row is now just prio · id · title · status; description and
   labels moved into the pop-out the row opens. */
.ticket{padding:6px 16px;gap:11px;cursor:pointer;min-height:0}
.ticket>*{padding-top:0;padding-bottom:0}
.ticket .tprio{width:15px;height:15px;padding:0;box-sizing:border-box;display:grid;place-items:center}
.ticket .tid{width:60px;padding:0}
.ticket .ttitle{flex:1;max-width:none;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket:hover .ttitle{color:var(--accent)}
.ticket .tstat{width:auto;gap:6px}
.ticket:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:860px){.ticket .tstat{display:none}}

/* ══ overview digest ══════════════════════════════════════ */
.digest{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:30px}
@media(max-width:1020px){.digest{grid-template-columns:1fr}}
.dg{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:15px 17px 12px;display:flex;flex-direction:column;min-width:0}
.dgh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.dglink{border:0;background:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:0;white-space:nowrap}
.dglink:hover{text-decoration:underline}
.dgrow{display:grid;grid-template-columns:minmax(0,1.35fr) 1fr 48px;gap:10px;align-items:center;
  padding:5px 0;font-size:13.5px;cursor:pointer}
.dgrow:hover .dgnm,.dgact:hover .dgnm{color:var(--accent)}
.dgnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body);
  display:flex;align-items:center;gap:7px;min-width:0}
.dgnm img{width:14px;height:14px;border-radius:3px;flex:none;object-fit:contain;background:#fff}
.dgrow.me .dgnm{font-weight:700;color:var(--ink)}
.dgtrk{height:7px;background:var(--track);border-radius:4px;overflow:hidden;min-width:0}
.dgtrk i{display:block;height:100%;border-radius:4px}
.dgv{text-align:right;font-size:12px;font-weight:600;color:var(--body);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.dgsplit{display:flex;align-items:center;gap:8px;margin:8px 0 3px}
.dgsplit:before,.dgsplit:after{content:"";flex:1;border-top:1px dashed var(--line-md)}
.dgsplit span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.dgact{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px;cursor:pointer;
  border-top:1px solid var(--line)}
.dgact:first-of-type{border-top:0}
.dgfoot{margin-top:auto;padding-top:10px;font-size:11px;color:var(--faint)}

/* entity logo slot on a ticket row, left of the id */
.tlogo{width:16px;height:16px;flex:none;display:grid;place-items:center}
.tlogo img{width:14px;height:14px;border-radius:3px;object-fit:contain;background:#fff}

/* ══ engine-styled response viewers ═══════════════════════
   Verbatim response content inside a recreation of each engine's own
   chrome. These deliberately break the cream palette - they should look
   like the product they imitate, not like the report. */
.mock{border-radius:16px;border:1px solid #e4e4e0;overflow:hidden}
.mockmd{font-size:14.5px;line-height:1.68;color:#1b1b1b}
.mockmd p{margin:0 0 13px}
.mockmd p:last-child{margin-bottom:0}
.mockmd h4{font-size:15.5px;font-weight:700;margin:19px 0 8px;font-family:inherit}
.mockmd ul,.mockmd ol{margin:0 0 13px;padding-left:22px}
.mockmd li{margin-bottom:6px}
.mockmd b{font-weight:650}
.mockmd code{font-family:var(--mono);font-size:12.5px;background:#0000000d;border-radius:4px;padding:1px 5px}
.mockmd a{color:inherit;text-decoration:underline;text-decoration-color:#00000038;cursor:default}
.mockmd hr{border:0;border-top:1px solid #00000014;margin:16px 0}
.mocktbl{overflow-x:auto;margin:0 0 13px}
.mocktbl table{border-collapse:collapse;font-size:13px;min-width:60%}
.mocktbl th,.mocktbl td{border:1px solid #00000018;padding:7px 11px;text-align:left;vertical-align:top}
.mocktbl th{font-weight:650;background:#00000006}
.mockfavtxt{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:#00000012;font-size:9px;font-weight:700;color:#555}

/* ChatGPT: the chat thread */
.mock-gpt{background:#fff;padding:30px 34px 20px;font-family:var(--sans)}
.mock-gpt .gpt-q{max-width:72%;margin-left:auto;background:#f4f4f4;color:#0d0d0d;
  border-radius:22px;padding:11px 19px;font-size:14.5px;line-height:1.55;width:fit-content}
.mock-gpt .gpt-a{display:flex;gap:14px;margin-top:26px}
.mock-gpt .gpt-av{flex:none;width:30px;height:30px;border:1px solid #e4e4e4;border-radius:50%;
  display:grid;place-items:center;background:#fff}
.mock-gpt .gpt-av img{width:18px;height:18px}
.mock-gpt .gpt-srcs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 0 44px}
.mock-gpt .gpt-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  background:#f4f4f4;font-size:12px;font-weight:500;color:#3d3d3d}
.mock-gpt .gpt-chip img{width:14px;height:14px;border-radius:50%}
.mock-gpt .gpt-chip.dim{color:#8f8f8f}
.mock-gpt .gpt-comp{display:flex;align-items:center;justify-content:space-between;margin-top:26px;
  border:1px solid #e0e0e0;border-radius:999px;padding:12px 9px 12px 20px;color:#8f8f8f;font-size:14px;
  box-shadow:0 2px 10px #0000000a}
.mock-gpt .gpt-comp i{width:30px;height:30px;border-radius:50%;background:#0d0d0d;color:#fff;
  display:grid;place-items:center;font-style:normal}
.mock-gpt .gpt-comp i svg{width:16px;height:16px}

/* Perplexity: sources first, then the answer */
.mock-pplx{background:#fcfcf9;padding:28px 32px 22px;font-family:var(--sans);border-color:#e8e8e3}
.mock-pplx .pplx-q{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  color:#13343b;margin:0 0 20px;font-family:var(--sans)}
.mock-pplx .pplx-lab{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;
  color:#13343b;margin:0 0 10px}
.mock-pplx .pplx-lab svg{width:15px;height:15px;color:#20808d}
.mock-pplx .pplx-lab span{color:#8d9a9e;font-weight:500}
.mock-pplx .pplx-srcs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
@media(max-width:760px){.mock-pplx .pplx-srcs{grid-template-columns:repeat(2,1fr)}}
.mock-pplx .pplx-card{background:#f3f3ee;border-radius:11px;padding:10px 12px;min-width:0}
.mock-pplx .pplx-card:hover{background:#ecece5}
.mock-pplx .pplx-t{font-size:12px;font-weight:550;color:#13343b;line-height:1.4;height:2.8em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-transform:capitalize}
.mock-pplx .pplx-d{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:#8d9a9e;
  white-space:nowrap;overflow:hidden}
.mock-pplx .pplx-d img{width:14px;height:14px;border-radius:50%}
.mock-pplx .pplx-d b{font-weight:500}
.mock-pplx .mockmd{color:#13343b}
.mock-pplx .pplx-follow{display:flex;align-items:center;justify-content:space-between;margin-top:24px;
  background:#fff;border:1px solid #e8e8e3;border-radius:999px;padding:11px 9px 11px 20px;
  color:#8d9a9e;font-size:14px;box-shadow:0 2px 10px #0000000a}
.mock-pplx .pplx-follow i{width:30px;height:30px;border-radius:50%;background:#20808d;color:#fff;
  display:grid;place-items:center;font-style:normal}
.mock-pplx .pplx-follow i svg{width:15px;height:15px}

/* Google: the AI Overview card under the search box */
.mock-aio{background:#fff;padding:22px 26px 24px;font-family:arial,var(--sans)}
.mock-aio .aio-search{display:flex;align-items:center;gap:13px;border:1px solid #dfe1e5;border-radius:999px;
  padding:11px 18px;font-size:14.5px;color:#202124;box-shadow:0 1px 6px #20212414;margin-bottom:22px}
.mock-aio .aio-g{font:700 17px/1 arial;background:linear-gradient(135deg,#4285f4 20%,#ea4335 45%,#fbbc05 60%,#34a853 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mock-aio .aio-qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-aio .aio-mag{width:17px;height:17px;color:#4285f4;flex:none}
.mock-aio .aio-card{border-radius:18px;padding:19px 21px 15px;
  background:linear-gradient(160deg,#eef3fd 0%,#f6f3fb 26%,#fff 58%)}
.mock-aio .aio-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.mock-aio .aio-head b{font-size:15px;color:#202124;letter-spacing:0}
.mock-aio .aio-spark{width:20px;height:20px}
.mock-aio .mockmd{color:#202124;font-size:14px}
.mock-aio .aio-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.mock-aio .aio-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid #dfe1e5;background:#fff;
  border-radius:14px;padding:7px 13px 7px 9px;max-width:230px}
.mock-aio .aio-chip img{width:18px;height:18px;border-radius:50%}
.mock-aio .aio-cd{display:flex;flex-direction:column;min-width:0}
.mock-aio .aio-cd b{font-size:11.5px;color:#202124;font-weight:500;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-transform:capitalize}
.mock-aio .aio-cd small{font-size:10.5px;color:#70757a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-aio .aio-foot{margin-top:15px;padding-top:11px;border-top:1px solid #00000010;
  font-size:11px;color:#70757a}

/* ══ prompt explorer, aligned + declutter ═════════════════
   One grid template for header and rows, so the column labels sit exactly
   over their columns. Engine marks are bare logos - colour = named,
   greyscale = not named; no badge chrome. Named count replaced by the
   collection location. */
.prow{display:grid;grid-template-columns:minmax(0,1fr) 100px 224px 132px 92px;gap:18px;align-items:center}
.prow.prhead{padding:0 0 10px}
.prow.prhead .engs{justify-items:center}
.engs{display:grid;grid-template-columns:repeat(3,36px);gap:6px;align-items:center;justify-items:center}
.engcell,.engcell.yes,.engcell.no,.engcell.na{background:transparent;box-shadow:none;border-radius:0}
.engcell{width:36px;height:36px}
.engcell img{width:26px;height:26px;border-radius:50%;background:#fff;padding:1px;
  box-shadow:0 0 0 1px var(--line)}
.engcell.yes img{box-shadow:0 0 0 1px var(--line-md);opacity:1;filter:none}
.engcell.no img{opacity:.3;filter:grayscale(1)}
.engcell.na img{opacity:.16;filter:grayscale(1)}
.engcell .tick2{display:none}
.engcell.hd{width:36px;height:22px}
.engcell.hd img{width:16px;height:16px;box-shadow:none}

/* prompt type: a proper chip, not a washed tag */
.ptag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;padding:4px 11px 4px 9px;border-radius:999px;white-space:nowrap}
.ptag i{width:6px;height:6px;border-radius:50%;flex:none}
.ptag.b{background:var(--warn-bg);color:var(--gold-deep);box-shadow:inset 0 0 0 1px #b0781833}
.ptag.b i{background:var(--gold)}
.ptag.u{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-md)}
.ptag.u i{background:var(--faint)}

/* topic: legible at a glance instead of a grey whisper */
.tpc{display:inline-block;max-width:100%;font-size:12px;font-weight:650;color:var(--ink);
  background:var(--elevated);padding:4px 11px;border-radius:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em}

/* collection location */
.loc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--body);
  font-weight:550;white-space:nowrap;justify-self:start}
.loc:first-letter{font-size:15px}

@media(max-width:1180px){.prow{grid-template-columns:minmax(0,1fr) 96px 150px 126px 84px;gap:12px}}
@media(max-width:980px){.prow{grid-template-columns:minmax(0,1fr) 96px 126px 84px}
  .prow>span:nth-child(3){display:none}}
@media(max-width:900px){.prow{grid-template-columns:1fr;gap:8px}
  .prow>span:nth-child(3){display:block}
  .engs{justify-items:start}.loc{justify-self:start}}

/* ══ prompt drill-down: signals + brands named ═════════════
   Panels that run off the per-prompt grain, so they render for all 150
   prompts rather than the 47 with a collected raw response. */
.pmeter{display:inline-block;width:64px;height:7px;background:var(--track);border-radius:4px;
  overflow:hidden;flex:none}
.pmeter i{display:block;height:100%;border-radius:4px}
.sigrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
@media(max-width:620px){.sigrow{grid-template-columns:1fr}}
.sigrow .v{margin-top:6px;display:flex;align-items:center;gap:8px}
/* the mention-count bar sits inside a right-aligned numeric cell */
.mbar{display:inline-block;width:52px;height:7px;background:var(--track);border-radius:4px;
  overflow:hidden;margin-right:9px;vertical-align:middle}
.mbar i{display:block;height:100%;border-radius:4px}
/* engine marks inside the rankings table, in place of the dead position column */
.engmini{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end}
.engmini img{width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line)}

/* a section that is deliberately empty for now, rather than broken or loading */
.parked{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:46px 24px;border:1px dashed var(--line-md);border-radius:14px;background:var(--card)}
.parked svg{width:26px;height:26px;color:var(--faint)}
.parked b{font-size:15px;font-weight:650;color:var(--body);letter-spacing:-.01em}
.parked span{font-size:13px;color:var(--faint);max-width:46ch;line-height:1.6}

/* ══ cleaner filter bar + report header ═══════════════════
   Above the fold there were thirteen uppercase micro-labels competing with
   the headline figure: four on the filter pills, four on the metadata band,
   five on the stat row. The stat row keeps its labels (it is a stat row);
   the other two give theirs up. */

/* filter pills: the label orients you, so it stays - it just stops shouting */
.dd>button{gap:7px;padding:7px 12px;border-radius:10px}
.dd>button .lbl{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint)}
.dd>button .car{opacity:.35}

/* report provenance: one quiet line, not a four-cell bordered grid */
.metastrip{display:flex;flex-wrap:wrap;align-items:baseline;grid-template-columns:none;
  padding:12px 0 13px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.metastrip>span{padding:1px 0}
.metastrip>span+span:before{content:"";display:inline-block;width:1px;height:10px;
  margin:0 15px;background:var(--line-md);vertical-align:-1px}
.metastrip b{font-weight:650;color:var(--ink)}

/* the headline gets the room the band was taking */
.hero{padding:20px 0 26px}
.hero-fig .eyebrow{margin-bottom:10px}
.shead{margin-bottom:0}
/* wrapping the one-line strip left an orphan separator opening the second
   line, so below the sidebar breakpoint it becomes a plain two-column list */
@media(max-width:900px){
  .metastrip{display:grid;grid-template-columns:1fr 1fr;gap:3px 20px}
  .metastrip>span+span:before{display:none}
}
@media(max-width:560px){.metastrip{grid-template-columns:1fr}}

/* ══ tighter overview header ══════════════════════════════
   Two sources of dead space: the hero went full-width but only ever filled
   its left edge (a leftover from removing the What-changed panel beside it),
   and five stat cells in a fixed 5-then-2 grid left a half-empty row at
   middle widths. */
.hero{padding:16px 0 20px}
.hero-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hero-v{line-height:.82}
.hero-side{display:flex;flex-direction:column;gap:10px;min-width:220px;flex:1}
.hero-d{margin-top:0}
.hero-s{margin:0;max-width:58ch;font-size:13.5px}
@media(max-width:700px){.hero-row{gap:16px}.hero-side{min-width:0}}


/* Five stat cells. Column counts are fixed rather than auto-fit, and the cell
   that starts each row drops its left rule via nth-child, so a partial last
   row leaves no orphan divider. (A 1px-grid-gap divider was tried first: it
   showed the line colour through the empty tail cell.) */
.kpis .eyebrow{font-size:10.5px;letter-spacing:.06em}
.kpis{grid-template-columns:repeat(5,1fr);gap:0;background:transparent;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis>div{padding:15px 14px 16px;background:transparent;
  border-left:1px solid var(--line);border-top:0}
.kpis>div:nth-child(5n+1){border-left:0;padding-left:0}
@media(max-width:1040px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpis>div{border-left:1px solid var(--line);padding-left:14px}
  .kpis>div:nth-child(3n+1){border-left:0;padding-left:0}
  .kpis>div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpis>div:nth-child(3n+1){border-left:1px solid var(--line);padding-left:14px}
  .kpis>div:nth-child(2n+1){border-left:0;padding-left:0}
  .kpis>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* a split with no comparison to draw reads as inert, not as a 50/50 result */
.h2split.none i{opacity:.28}

/* ── claims ─────────────────────────────────────────────────────────────
   A section that quotes medical pages has to read like a citation, not a
   verdict: every quote is set apart, every card names its source in full and
   links to it, and no rung is coloured as good or bad. */
.clpanel{border:1px solid var(--line);border-radius:12px;padding:16px 18px 17px;background:var(--card);margin:26px 0 0}
/* NAME COLLISION, and it produced the worst-looking bug in the report. This
   file defined .clsplit as a 10px stacked bar for the old claims section — the
   one this build replaced — and the ported section uses .clsplit for its
   two-column layout. So the whole "What the engines quote" panel was being
   rendered as a 10px-tall box with overflow:hidden, drawing a grey bar straight
   through its own headings. The old rule had no JS user left; this is the
   layout the markup now expects. */
.clsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:44px;align-items:start}
@media(max-width:1100px){ .clsplit{grid-template-columns:1fr;gap:28px} }

/* claim-kind rows: length is volume, the head is what landed */
.ctbars{display:flex;flex-direction:column;gap:12px}
.ctrow{display:grid;grid-template-columns:150px 1fr 74px 46px;gap:14px;align-items:center;font-size:13px;
  border-radius:7px;outline-offset:3px}
.ctrow .nm b{font-weight:650;color:var(--ink)}
.ctrow .ctrk{height:10px;border-radius:5px;background:var(--s-none);opacity:.5;position:relative;
  min-width:6px;overflow:hidden}
.ctrow .ctrk i{display:block;height:100%;background:var(--s-green);border-radius:5px;min-width:3px}
.ctrow .vv{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--faint)}
.ctrow .vv b{color:var(--ink);font-weight:700}
.ctrow .rt{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:650;color:var(--body)}
.ctrow.me .nm b{color:var(--gold)}
.ctrow.me .ctrk{outline:1px solid var(--gold);outline-offset:2px;border-radius:5px}
/* a composition bar's length already is its share, so the fill is solid */
.ctrk.comp{background:transparent;opacity:1;min-width:4px}
.ctrk.comp i{border-radius:5px}
.cllegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.cllegend span{display:inline-flex;align-items:center;gap:6px}
.cllegend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.cllegend b{color:var(--ink);font-variant-numeric:tabular-nums}

.clladder{display:flex;flex-direction:column;gap:7px}
.cllrow{display:grid;grid-template-columns:230px 1fr 70px;align-items:center;gap:12px;font-size:12.5px}
@media(max-width:700px){.cllrow{grid-template-columns:150px 1fr 56px}}
.cllname{color:var(--body)}
.clltrk{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.clltrk i{display:block;height:100%}
.cllv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ── the claim row ───────────────────────────────────────
   Closed by default. A row is scannable at a glance — publisher, market, what
   the page says, what the answer did with it — and the evidence opens beneath
   it. One column, not two: twenty-four two-up cards is a wall, and a claim is a
   sentence, which wants width rather than height. */
.clcarried{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);
  border-radius:11px;overflow:hidden;background:var(--card)}
.clc{min-width:0;border-bottom:1px solid var(--line)}
.clc:last-child{border-bottom:0}
.clc[open]{background:var(--paper)}

.clsum{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;
  list-style:none;min-width:0}
.clsum::-webkit-details-marker{display:none}
.clsum:hover{background:#241a1008}
.clc[open] .clsum{border-bottom:1px solid var(--line)}
.clchev{flex:none;display:inline-grid;place-items:center;width:14px;color:var(--faint);
  transition:transform .15s ease}
.clchev svg{width:12px;height:12px}
.clc[open] .clchev{transform:rotate(180deg)}
.clsum > img,.clsum > .emark{flex:none}
.clsumhost{flex:none;font-size:12px;font-weight:650;color:var(--ink)}
.clsumq{flex:1;min-width:0;font-size:12.5px;color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkpill{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--line);color:var(--muted)}
.mkpill.sm{padding:1px 6px;letter-spacing:.04em}
.mkpill.ca{background:#2b62d91f;color:#2b62d9}
.mkpill.us{background:#c42b2b1f;color:#c42b2b}
.rungpill{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 9px;
  border-radius:999px;background:var(--line);color:var(--muted);white-space:nowrap}
.rungpill.yes{background:#0e7a4e1a;color:#0e7a4e}
.rungpill.part{background:#2b62d91a;color:#2b62d9}
.rungpill.diff{background:#a66a121f;color:var(--gold)}

.clbody{padding:14px 16px 16px 37px;display:flex;flex-direction:column;gap:12px}
.clbody blockquote{margin:0;padding:0 0 0 12px;border-left:2px solid var(--gold);
  font-size:13.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.clmeta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:11px}
.clurl{min-width:0;text-decoration:none;color:var(--accent);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.clurl span{color:var(--muted);font-weight:400;
  font-family:var(--mono,SFMono-Regular,Menlo,monospace)}
.clurl:hover{text-decoration:underline}

.numswap{font-size:12.5px;color:var(--body);padding:8px 11px;border-radius:8px;
  background:#a66a1214;border:1px solid #a66a1226}
.numswap b{font-variant-numeric:tabular-nums;color:var(--gold)}

.clanswer .clflabel{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.clland{font-size:12.5px;line-height:1.55;color:var(--body);padding:0 0 0 12px;
  border-left:2px solid var(--line)}
.clshared{font-size:11px;color:var(--faint);overflow-wrap:anywhere}
.clshared code{font-family:var(--mono,SFMono-Regular,Menlo,monospace);font-size:10.5px;
  background:var(--line);padding:1px 5px;border-radius:4px;color:var(--muted)}

.clsrc{display:inline-block;margin-top:10px;font-size:11.5px;color:var(--accent);text-decoration:none}
.clsrc:hover{text-decoration:underline}


/* ══ ported from the XYZ Storage build ════════════════════
   The prompt drill-down (dd-*, ans*, src*, rail*), the sponsored-placement
   panels (adq*, adcols, adpeer*, ad*), out-links (.xl) and the in-panel tab
   strips (.tabs). Extracted by selector rather than retyped, so the two builds
   stay diffable: any rule here that also exists above is the newer one and wins
   by cascade order. */
.xl{color:inherit;text-decoration:none;border-bottom:1px solid transparent; transition:color .12s,border-color .12s}
.xl:hover,.xl:focus-visible{color:var(--accent);border-bottom-color:currentColor}
.xl.own{font-weight:700}
.xl.mono{font-family:var(--mono);font-size:11.5px}
.bar .nm .xl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block; max-width:100%;vertical-align:bottom}
.qrow .qq .xl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adcore{display:flex;align-items:center;gap:11px;padding:11px 4px 11px 16px;flex:1;min-width:0; text-align:left;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.adcore:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.adout{flex:none;width:40px;display:grid;place-items:center;color:var(--faint); border-left:1px solid transparent;transition:color .12s,background .12s}
.adout:hover{color:var(--accent);background:#241a100a}
.adout svg{width:13px;height:13px}
.adout.none{pointer-events:none;opacity:.28}
.tout{display:inline-grid;place-items:center;width:24px;height:24px;color:var(--faint);border-radius:5px; transition:color .12s,background .12s}
.tout:hover{color:var(--accent);background:#241a100a}
.tout svg{width:12px;height:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.adcols{display:block;width:100%;height:auto;overflow:visible}
.adcols rect[tabindex]{cursor:default;outline:none}
.adcols rect[tabindex]:focus-visible{fill:#241a1008}
.adpeerwrap{padding:14px 16px 16px;border-top:1px solid var(--line)}
.adpeers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}
@media(max-width:760px){.adpeers{grid-template-columns:repeat(2,1fr)}}
.adpeer{display:grid;grid-template-columns:1fr 78px 34px;align-items:center;gap:10px; padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--card); font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0; transition:border-color .12s,box-shadow .12s}
.adpeer:hover{border-color:#241a1033;box-shadow:0 2px 8px #241a1010}
.adpeer .apl{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:var(--muted)}
.adpeer .apl>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adpeer svg{width:78px;height:26px;display:block}
.adpeer .apv{text-align:right;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--body)}
.adpeer:hover svg rect{fill:var(--s-blue)}
.adq{margin-bottom:16px}
.adqtop{display:grid;grid-template-columns:auto auto 1fr;gap:26px;align-items:start;padding:16px}
.adqfig{min-width:96px}
.adqfig .big{display:block;font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em; line-height:1;margin:6px 0 5px;font-variant-numeric:proportional-nums}
.adqfig .big small{font-size:14px;color:var(--faint)}
.adqfig .k{font-size:11.5px;color:var(--faint);line-height:1.45;display:block;max-width:23ch}
.adqeng{min-width:0}
.adqengrows{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.adqertag{font-size:11px;font-weight:650;font-variant-numeric:tabular-nums; padding-left:7px;border-left:1px solid var(--line)}
.adqer.on .adqertag{color:var(--s-blue)}
.adqcr{border-top:1px solid var(--line);padding:14px 16px 16px}
.adqlist{display:flex;flex-direction:column;gap:8px}
.adqrow{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px; background:var(--card);overflow:hidden}
.adqrow:hover{border-color:#241a1030}
.adqmain{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:9px 10px; border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.adqimg{flex:none;width:74px;height:48px;border-radius:6px;overflow:hidden;background:var(--elevated); display:grid;place-items:center}
.adqimg img{width:100%;height:100%;object-fit:cover}
.adqtxt{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.adqadv{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--faint)}
.adqttl{font-size:12.5px;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adqbody{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adqn{flex:none;width:82px;text-align:right;font-variant-numeric:tabular-nums}
.adqn b{display:block;font-size:14px;font-weight:650}
.adqn small{font-size:10px;color:var(--faint)}
.adqmore{font-size:11.5px;color:var(--faint);margin-top:9px}
@media(max-width:820px){.adqtop{grid-template-columns:1fr 1fr;gap:18px}.adqeng{grid-column:span 2}}
.admore{display:block;width:100%;padding:11px 16px;border:0;border-top:1px solid var(--line); background:none;font:inherit;font-size:12px;font-weight:600;color:var(--accent); text-align:left;cursor:pointer}
.admore:hover{background:var(--elevated)}
.adkey{display:inline-flex;flex-wrap:wrap;gap:5px 14px;margin-right:auto}
.adkey span{display:inline-flex;align-items:center;gap:6px}
.adkey i{width:9px;height:9px;border-radius:3px;flex:none}
.tag .tdotc{width:7px;height:7px;border-radius:2px;background:var(--tc,currentColor); display:inline-block;margin-right:5px;vertical-align:middle}
.trendsvg .tk{font:500 10.5px var(--sans);fill:var(--faint)}
.dd-hero{ background:var(--surface); background-image:repeating-linear-gradient(135deg,#241a1008 0 1px,transparent 1px 7px); border:1px solid var(--line);border-radius:12px; padding:22px 24px 20px;margin-bottom:18px; display:flex;flex-direction:column;gap:18px; }
.dd-q{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.dd-rows{display:flex;flex-direction:column;gap:11px}
.dd-row{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.dd-k{font-size:12px;font-weight:600;color:var(--muted);padding-top:6px}
.dd-v{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.dd-chip{ display:inline-flex;align-items:center;gap:6px; background:var(--card);border:1px solid var(--line-md);border-radius:999px; padding:5px 12px;font-size:12.5px;font-weight:500;color:var(--ink); }
.dd-chip svg{width:13px;height:13px;color:var(--faint)}
.dd-verdict{ display:inline-flex;align-items:center;gap:7px; border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600; }
.dd-verdict::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dd-verdict.pos{background:var(--pos-bg);color:var(--pos)}
.dd-verdict.warn{background:var(--warn-bg);color:var(--gold-deep)}
.dd-verdict.neg{background:var(--neg-bg);color:var(--neg)}
.dd-reader{margin-bottom:18px}
.tabs.dd-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs.dd-tabs button{ display:inline-flex;align-items:center;gap:7px; background:var(--surface);border:1px solid var(--line-md);border-radius:9px; padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted); cursor:pointer; }
.tabs.dd-tabs button[aria-pressed="true"]{background:var(--card);color:var(--ink);border-color:var(--line-md);box-shadow:var(--shadow)}
.tabs.dd-tabs button img,.tabs.dd-tabs button .ph{width:15px;height:15px}
.dd-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px;align-items:start}
@media (max-width:900px){.dd-grid{grid-template-columns:minmax(0,1fr)}}
.dd-main{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.anspane{padding:18px 22px 22px}
.anshead{display:flex;align-items:center;gap:9px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.anshead b{font-family:var(--display);font-size:14px;letter-spacing:-.01em}
.anshead .k{margin-left:auto;font-size:11.5px;color:var(--faint)}
.anshead img,.anshead .ph{width:19px;height:19px}
.ansnote{ background:var(--warn-bg);border:1px solid #b0781833;border-radius:8px; padding:9px 12px;margin-bottom:14px;font-size:12px;color:var(--gold-deep); }
.ansbody{font-size:14.5px;line-height:1.68;color:var(--body)}
.ansbody b{color:var(--ink)}
/* THE BRAND HIGHLIGHT. Only the "highlighting off" rule existed here, so every
   highlighted brand fell through to the browser's default <mark> — flat yellow,
   the same for all of them, ignoring the --bc each mark already carried. The
   colour is the point: it is what ties a name in the answer to its row in the
   Brands rail, and one yellow for eight brands ties nothing to anything. */
mark.bm{background:color-mix(in srgb,var(--bc) 17%,transparent);
  color:var(--ink);border-radius:4px;padding:1px 4px;
  box-shadow:inset 0 -1.5px 0 color-mix(in srgb,var(--bc) 45%,transparent)}
mark.bm.me{font-weight:700;background:color-mix(in srgb,var(--bc) 26%,transparent)}
mark.bm.ent{font-weight:600}
mark.bm.ent.unk{background:var(--track);box-shadow:inset 0 -1.5px 0 var(--line-md);color:var(--body)}
.ansbody.nohl mark.bm{background:transparent;box-shadow:none;padding:0;font-weight:inherit}
.dd-rail{display:flex;flex-direction:column;gap:12px;align-self:start}
.railp{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.railh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.railh svg{width:15px;height:15px;color:var(--faint)}
.railh b{font-family:var(--display);font-size:13px;letter-spacing:-.01em}
.railn{margin-left:auto;font-size:11px;font-weight:600;color:var(--faint);font-family:var(--mono)}
.railb{padding:7px;display:flex;flex-direction:column;gap:2px;max-height:330px;overflow-y:auto}
.hltoggle{margin-left:auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.hltoggle span{font-size:11px;color:var(--faint)}
.hltoggle input{position:absolute;opacity:0;pointer-events:none}
.hltoggle i{width:28px;height:16px;border-radius:999px;background:var(--line-md);position:relative;transition:background .15s}
.hltoggle i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--card);transition:transform .15s}
.hltoggle input:checked + i{background:var(--ink)}
.hltoggle input:checked + i::after{transform:translateX(12px)}
.hltoggle input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
/* The brands rail carried a swatch rule and nothing to hang it on: no layout,
   no tint, and no weight on the client's own row, so every brand read the same
   and the colours that key the in-answer highlights were invisible. Restored
   from the SentinelOne build, where the rail and the highlight share one scale. */
.brandrow{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  background:color-mix(in srgb,var(--bc) 9%,transparent);font-size:12.5px;
}
.brandrow.me{font-weight:700;background:color-mix(in srgb,var(--bc) 18%,transparent)}
.brandrow .swatch{width:3px;height:15px;border-radius:2px;background:var(--bc);flex:none}
.brandrow img.sm,.brandrow .ph.sm{width:15px;height:15px;flex:none}
.brandrow .bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.brandrow .brank{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
.srcrow{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:8px}
.srcrow.lit{background:color-mix(in srgb,var(--accent) 11%,transparent);outline:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.srcnum{ font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--muted); background:var(--elevated);border-radius:4px;padding:1px 5px;flex:none;margin-top:1px; }
.srcfav{flex:none;display:flex;margin-top:1px}
.srcfav img{width:15px;height:15px;border-radius:3px}
.srcmeta{min-width:0;display:flex;flex-direction:column;gap:2px}
.srcmeta b{font-size:12px;font-weight:600;color:var(--ink);line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srcmeta small{font-family:var(--mono);font-size:10px;color:var(--faint);word-break:break-all}
.trendsvg .tk.dim{fill:var(--faint);opacity:.8}
.trendsvg .tk.act{fill:var(--s-blue);font-weight:700}
.srcrow{text-decoration:none;color:inherit;position:relative}
.srcrow:hover{background:var(--elevated)}
.srcrow:hover .srcmeta b{color:var(--accent)}
.srcout{width:12px;height:12px;color:var(--faint);flex:none;opacity:0;transition:opacity .12s ease}
.srcrow:hover .srcout{opacity:1}
.qmap .tk,.netmap .tk{font:500 10.5px var(--sans);fill:var(--faint)}
.qmap .tk.dim{fill:var(--faint);opacity:.75}
.dmap .tk{font:500 10.5px var(--sans);fill:var(--faint)}

/* The named-brand chips in the prompt hero, and the tick inside them. Missing,
   the tick's SVG had no box and rendered 107px square in the middle of the row. */
.dd-menu button .tick{margin-left:auto;color:var(--accent);opacity:0}
.dd-menu button[aria-selected="true"] .tick{opacity:1}
.dd-mchip{ display:inline-flex;align-items:center;gap:7px; background:var(--card);border:1px solid var(--line-md);border-radius:999px; padding:5px 12px 5px 8px;font-size:12.5px;color:var(--ink); box-shadow:inset 3px 0 0 -1px var(--bc); }
.dd-mchip.me{font-weight:700;background:color-mix(in srgb,var(--bc) 12%,var(--card));border-color:color-mix(in srgb,var(--bc) 34%,transparent)}
.dd-mchip .tick{width:13px;height:13px;color:var(--pos)}
.dd-mchip img.sm,.dd-mchip .ph.sm{width:15px;height:15px}
/* `--line-md` and `--pos` come from the XYZ token set; map them to this report's
   own so the ported rules need no rewriting. */
:root{--line-md:#241a1026}

/* ── content format, per page ───────────────────────────────
   A ranked list rather than a ring: eight formats where three carry 85% of the
   weight read better as bars, and the Content/Social tag needs a column of its
   own — it is the split a reader actually asks about. */
.fmtrows{display:flex;flex-direction:column}
.fmtrow{display:grid;grid-template-columns:minmax(96px,1.15fr) minmax(40px,1fr) 62px 74px;gap:12px;
  align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.fmtrow:first-child{border-top:0}
.fmtlab{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);min-width:0}
.fmtlab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmtlab i{width:8px;height:8px;border-radius:2px;flex:none}
.fmttrk{height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.fmttrk i{display:block;height:100%;border-radius:4px}
.fmtkind{font-size:10px;letter-spacing:.04em;text-transform:uppercase;text-align:center;
  padding:3px 0;border-radius:999px;border:1px solid var(--line);color:var(--faint)}
.fmtkind.con{color:#2a5f9e;border-color:color-mix(in srgb,#2a78d6 32%,var(--line))}
.fmtkind.soc{color:#9a5a00;border-color:color-mix(in srgb,#eda100 42%,var(--line))}
.fmtv{text-align:right;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.fmtv b{font-size:13px;font-weight:650;color:var(--ink)}
.fmtv small{display:block;font-size:10.5px;color:var(--faint)}
@media(max-width:520px){
  .fmtrow{grid-template-columns:minmax(90px,1fr) 56px 66px;gap:9px}
  .fmtrow .fmttrk{display:none}
}

/* ══ claims: the section and the per-prompt panel ═════════════════════════
   Ported from the SentinelOne build along with the renderer. The section this
   replaces drew four KPI tiles and two lists off a payload that carried 65 of
   7,085 claims, so its charts had almost nothing to plot; this one is built
   for the whole ladder, every engine, and the page-to-prompt network. */
.claim-empty .cesub{margin:7px 0 0;font-size:12px;color:var(--faint)}
.srcbadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin:0 1px;
  background:var(--elevated);border:1px solid var(--line-md);border-radius:5px;
  font:inherit;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--muted);
  cursor:pointer;vertical-align:1px;
}
.srcbadge:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* ── claims ── */
.dd-claims{margin-bottom:18px}
.claim-empty{
  background:var(--surface);border:1px dashed var(--line-md);border-radius:10px;
  padding:18px 20px;font-size:13.5px;line-height:1.6;color:var(--body);
  display:flex;flex-direction:column;gap:8px;
}
.claim-empty b{color:var(--ink)}
.claim-empty .k{font-size:11.5px;color:var(--faint)}
.claim-empty code{font-family:var(--mono);font-size:11.5px;background:var(--elevated);border-radius:4px;padding:1px 4px}
.claimt .cq{max-width:420px;font-size:13px;line-height:1.5;color:var(--ink)}
.claim-empty p{margin:0}
.claimt .cq{max-width:340px;font-size:13px;line-height:1.5;color:var(--ink)}
.claimt .cl{max-width:320px;font-size:12.5px;line-height:1.5;color:var(--body)}
.claimmore{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.claimmore summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);list-style:none}
.claimmore summary::-webkit-details-marker{display:none}
.claimmore summary::before{content:"▸ ";color:var(--faint)}
.claimmore[open] summary::before{content:"▾ "}
.claimmore table{margin-top:10px}
.clfunnel{margin-top:30px;padding-top:24px}
.clcols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:34px;margin-top:32px;
  padding-top:26px;border-top:1px solid var(--line)}
.clcols{grid-template-columns:1fr;gap:30px}
.clpanel .bar{grid-template-columns:126px 1fr 58px}
.clpages{max-height:330px;overflow:auto}
.clpages table.t th{position:sticky;top:0;background:var(--bg);z-index:1}
.clpages .n b.hit{color:var(--ink);font-weight:700}
.clpages .n b.miss{color:var(--faint);font-weight:500}
.clexp{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.clchips{display:flex;gap:0}
.clchip{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--muted);padding:5px 11px;border-radius:7px}
.clchip span{font-variant-numeric:tabular-nums;font-weight:500;color:var(--faint);font-size:11px}
.clchip.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.clchip.on span{color:var(--muted)}
.clt td{vertical-align:top}
.clt .cq{max-width:none;width:46%;position:relative;padding-right:18px}
.clt .ct{white-space:nowrap}
.clt .cpgs{display:flex;align-items:center;gap:7px;max-width:230px}
.clt .cpgs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.clt .cout{white-space:nowrap}
.cland{display:flex;gap:11px;padding:9px 0;align-items:flex-start}
.cland+.cland{border-top:1px solid var(--line)}
.cland>div{min-width:0}
.cland b{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.cland p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--ink)}
.claimbasis{padding:12px 0 0;border-top:1px solid var(--line);margin-top:16px}
/* drill-down → Claims section */
.claimjump{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:11px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--elevated);cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--muted);text-align:left}
.claimjump:hover{border-color:var(--gold)}
.claimjump b{color:var(--ink);font-weight:700}
.claimjump .cj{margin-left:auto;color:var(--gold);font-weight:600;white-space:nowrap}
/* ══ claims v2: subjects, brands, page types, the unused grid ═══ */
.clhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.clhead .k{font-size:12px;color:var(--faint)}
.clsection{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.clpanel .ctrow{grid-template-columns:148px 1fr 66px 40px;gap:10px}
/* brand names wrap to two lines and double the row height; one line, clipped */
.clpanel .ctrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the unused grid: area is volume, tint is density, a landed cell gets a rule */
.clgrid{display:grid;gap:3px;font-size:11.5px}
.clgrid .gh{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  padding:0 0 6px;text-align:center;line-height:1.3}
.clgrid .gr{display:flex;align-items:center;font-weight:600;color:var(--body);padding-right:10px;font-size:12px}
.clgrid .gc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:44px;border-radius:7px;background:color-mix(in srgb, var(--s-none) calc(var(--h) * 78%), var(--elevated));
  border:1px solid var(--line)}
.clgrid .gc b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.clgrid .gc small{color:var(--faint);font-size:10.5px}
.clgrid .gc.has{border-color:var(--s-green);box-shadow:inset 0 -2px 0 var(--s-green)}
.clgrid .gc.has small{color:var(--s-green);font-weight:700}
.clgrid .gc.some small{color:var(--body);font-weight:650}
.clgrid .gc.empty{background:transparent;border-color:transparent}
.clgrid{overflow-x:auto}
/* explorer bar now carries two selects as well as the chips */
.clbar{flex-wrap:wrap;gap:10px}
.clsel{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;max-width:220px}
.clsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.clt .cwho{white-space:nowrap;font-size:12px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.clt .cwho .me{color:var(--gold);font-weight:650}
.clt .cq .ctype{display:block;margin-top:3px}
/* A table in a horizontal-scroll container only scrolls if it refuses to shrink.
   Without a floor the claims table squeezed its Claim column to ~55px at 720px
   wide and wrapped the sentence one word per line. */
.clt{min-width:760px}
.clpages table.t{min-width:520px}
.clbar{gap:8px}
.clbar #clq{flex:1 1 100%}
.clsel{flex:1 1 auto;max-width:none}
.clchips{flex-wrap:wrap}
.clcols{gap:26px}
.clside{border-left:1px solid var(--line);padding-left:32px}
.clside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
/* the map counts what was quoted, so shading runs with that count and an empty
   square is empty rather than tinted */
.clgrid .gc{min-height:40px}
.clgrid .gc.has{background:color-mix(in srgb, var(--s-green) calc(var(--h) * 62%), var(--elevated));
  border-color:color-mix(in srgb, var(--s-green) calc(var(--h) * 55%), var(--line));box-shadow:none}
.clgrid .gc.has b{font-size:14px}
.clgrid .gc.empty{background:transparent;border-color:transparent}
/* source sentence against answer sentence, shared wording marked in both */
.cland2{padding:12px 0}
.cland2 + .cland2{border-top:1px solid var(--line)}
.cl2h{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.cl2q{font-size:12px;font-weight:600;color:var(--muted);min-width:0;flex:1 1 auto}
.cl2c{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  background:var(--elevated);border-radius:5px;padding:2px 7px;flex:none}
.cl2g{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cl2g{grid-template-columns:1fr}
.cl2g > div{padding:10px 14px;border:1px solid var(--line);background:var(--card)}
.cl2s{border-radius:9px 0 0 9px;border-right-width:0}
.cl2a{border-radius:0 9px 9px 0}
.cl2s{border-radius:9px 9px 0 0;border-right-width:1px;border-bottom-width:0}
.cl2a{border-radius:0 0 9px 9px}
/* Each pane names its own end of the comparison: the publisher's favicon and
   page on the left, the engine's icon on the right. The old uppercase "ON THE
   PAGE" / "IN THE ANSWER" labels said nothing the icons do not. */
.cl2l{display:flex;align-items:center;gap:7px;min-width:0;margin-bottom:7px;min-height:22px}
.cl2lt{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.cl2engc{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:7px;padding:3px 9px}
.cl2engc b{font-weight:650;color:var(--body)}
.cl2l .cl2n{margin-left:auto}
.cl2g p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.cl2g mark{background:color-mix(in srgb, var(--s-green) 22%, transparent);color:inherit;
  border-radius:3px;padding:0 2px;box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--s-green) 55%, transparent)}
/* .cl2top is gone: the engine and the source pages it carried now label the two
   panes they belong to, which is where a reader is looking when they need them. */
.cl2src{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;text-decoration:none;
  font-size:11.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);
  border-radius:7px;padding:3px 9px}
.cl2src:hover{border-color:var(--gold);color:var(--ink)}
.cl2src b{font-weight:650;color:var(--body);flex:none}
.cl2src span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.cl2src svg{width:11px;height:11px;flex:none;color:var(--faint)}
.cl2c + .cl2c{margin-left:-4px}
.cl2foot{display:flex;gap:14px;flex-wrap:wrap;padding:9px 0 0!important}
.cl2foot span:last-child{margin-left:auto;text-align:right}
/* the chip that says what the maps scoped the table to */
.clpick{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 12px}
.ddot{cursor:default}
.ddot>circle:first-child{transition:fill-opacity .12s ease}
.ddot:hover>circle:first-child{fill-opacity:.62}
.ddot:focus-visible>circle:first-child{fill-opacity:.62;stroke-width:2.4}
/* ══ Search Console ══════════════════════════════════════ */
.srchead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.srchead .k{font-size:12px;color:var(--faint);margin-left:auto}
.srcdiv{margin-top:34px;border-top:1px solid var(--line)}
/* a paraphrase can share no contiguous phrase; the panel says so rather than
   showing an unhighlighted pair and leaving the reader to wonder */
.cl2n{font-weight:600;letter-spacing:0;text-transform:none;color:var(--s-blue);margin-left:6px}
/* ══ source pages: the URLs behind each cited domain ═════ */
.srcpg{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.srcpg .lede{max-width:78ch;margin-bottom:18px}
/* eleven type chips do not fit one line under 1100px, and .clchips (the claims
   filter it borrows) does not wrap - so this instance wraps and the count sits
   under them rather than being pushed off the right edge */
.srcpg .expbar{align-items:flex-start}
.srcpg .clchips{flex-wrap:wrap;row-gap:2px}
.srcpg .cnt{padding-top:7px}
/* .showmore is display:flex, which outranks the UA [hidden] rule - so a button
   the list hides would otherwise still draw ("Show all 6 domains" over 6 rows) */
.srcpg .showmore[hidden]{display:none}
/* ── accuracy checks ────────────────────────────────────────
   Inside the collapsed Data quality block, because that is where a reader goes
   looking for what to distrust. Each finding leads with the verbatim quote: the
   claim is that an engine said this, so the sentence has to be on the page. */
.dxwrap{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.dx{padding:14px 0;border-top:1px solid var(--line)}
.dx:first-of-type{border-top:0}
.dxh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.dxh i{width:8px;height:8px;border-radius:50%;flex:none}
.dxh b{font-weight:650;color:var(--ink);font-size:13px}
.dx blockquote{margin:0 0 8px;padding:11px 13px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;font-size:12.5px;line-height:1.55}
.dx blockquote::before{content:'\201C'}
.dx blockquote::after{content:'\201D'}
.dxq{font-size:11px;color:var(--faint);font-style:italic;margin-bottom:9px}
.dx p{margin:0 0 7px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:78ch}
.dx .dxa{color:var(--ink)}
.dx .dxa b{font-weight:650}
/* ── a finding under the source bars ────────────────────────
   The same-name practice is not a legend item and used to be pushed into the
   legend's grey run-on with five other lines. It is a finding: it gets a label,
   a border and its own reading width. */
.srcnote{display:flex;gap:12px;margin-top:16px;padding:12px 14px;background:var(--bg);
  border:1px solid var(--line);border-left:2px solid var(--neg);border-radius:9px}
.srcnh{flex:none;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--neg);
  font-weight:650;padding-top:1px}
.srcnote p{margin:0;font-size:12px;line-height:1.6;color:var(--muted);max-width:62ch}
.srcnote p b{font-weight:650;color:var(--ink)}
.srcnote{flex-direction:column;gap:6px}

@media(max-width:1020px){
  .clcols{grid-template-columns:1fr;gap:30px}
}
@media(max-width:900px){
  .clgrid{overflow-x:auto}
}
@media(max-width:900px){
  .clbar{gap:8px}
  .clbar #clq{flex:1 1 100%}
  .clchips{flex-wrap:wrap}
  .clcols{gap:26px}
}
@media(max-width:1020px){
  .clside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
}
@media(max-width:760px){
  .cl2g{grid-template-columns:1fr}
}
@media(max-width:760px){
  .cl2s{border-radius:9px 9px 0 0;border-right-width:1px;border-bottom-width:0}
  .cl2a{border-radius:0 0 9px 9px}
}
@media(max-width:620px){
  .srcnote{flex-direction:column;gap:6px}
}

/* the rung ladder key and the stacked bar that summarises it */
.ladderkey{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.lk{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:6px 11px}
.lk i{width:8px;height:8px;border-radius:2px;background:var(--lc);flex:none}
.lk b{font-size:12px;font-weight:600;color:var(--ink)}
.lk small{font-size:11px;color:var(--faint)}
.ladderbar{display:flex;gap:2px;height:9px;border-radius:5px;overflow:hidden;margin-bottom:16px}
.ladderbar span{min-width:3px}
.ladderbar.big{height:14px;border-radius:7px;margin-bottom:14px}

/* ── shopping categories: emphasis that carries information ──────────────
   The category rows were the quietest thing in the panel they organise. The
   name now carries display weight, a share-of-shelf bar ranks them before any
   number is read, and the open category is tinted so the shelf below it is
   unambiguously attached to the row above. */
table.cats .catname{font-family:var(--display);font-size:14.5px;font-weight:650;
  letter-spacing:-.01em;color:var(--ink)}
table.cats .catrank{font-family:var(--mono);font-size:11px;color:var(--faint)}
table.cats .catrow{cursor:pointer;transition:background .13s}
table.cats .catrow.open{background:color-mix(in srgb,var(--gold) 9%,transparent)}
table.cats .catrow.open .catname{color:var(--ink)}
table.cats .catrow.open td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
table.cats .catbar{display:inline-block;vertical-align:middle;width:72px;height:7px;border-radius:4px;
  background:var(--track);overflow:hidden;margin-right:9px}
table.cats .catbar i{display:block;height:100%;border-radius:4px;background:var(--gold)}
table.cats .catocc{font-variant-numeric:tabular-nums}
table.cats .catbody.open > td{background:color-mix(in srgb,var(--gold) 4%,transparent)}
@media(max-width:760px){ table.cats .catbar{display:none} }

/* ── the per-prompt claims table ─────────────────────────────────────────
   The page cell carries a favicon and a full page title, and with auto layout
   it took 667px of a 1,080px dialog — leaving the claim itself 150px and the
   passage it landed in 126px, both wrapping two or three words to a line. The
   two text columns are the content here; the page is an attribution. Fixed
   layout, with the page title allowed to ellipsis instead of pushing. */
.dd-claims table.claimt{table-layout:fixed;width:100%}
/* widths live on the table's own <colgroup> — see claimsSection() */
.dd-claims table.claimt td.cq,.dd-claims table.claimt td.cl{max-width:none}
/* Keyed by class, not by nth-child. An Engine column was inserted third, so the
   positional rules that clipped the page cell were suddenly clipping the engine
   cell and letting the page title run over the outcome again. */
.dd-claims table.claimt td.cpg{overflow:hidden}
.dd-claims table.claimt td.cpg .withlogo{display:flex;min-width:0;max-width:100%}
.dd-claims table.claimt td.cpg .csrc{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dd-claims table.claimt td.cot{overflow:hidden}
.dd-claims table.claimt td.cot .rungtag{display:inline-block;max-width:100%}
.dd-claims table.claimt td.cot .conf{display:block;margin-top:3px}
/* the engine that carried the claim, so a reader can find it in the right pane */
.ceng{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--body);min-width:0}
.ceng span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ceng img{width:14px;height:14px;flex:none}
@media(max-width:900px){
  .dd-claims table.claimt{table-layout:auto;min-width:720px}
}

/* ── the rest of the ported claims UI: the rung key, the claim detail
   pop-out and the page-to-question network. Missed by the first pass,
   which filtered on class-name prefixes and so skipped .ok/.outkey and
   every n* network class — which is why the rung key printed its labels
   and notes run together ("18 verbatimlifted word for word") and the
   network drew its two column headings on top of each other. */
.dqchip .st.ok{background:var(--pos-bg);color:var(--pos)}
.dqh .st.ok{background:var(--pos-bg);color:var(--pos)}
.cmark{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.outkey{display:flex;flex-wrap:wrap;gap:10px 26px}
.ok{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--muted)}
.ok i{width:9px;height:9px;border-radius:3px;background:var(--lc);flex:none;transform:translateY(1px)}
.ok b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.ok small{color:var(--faint);font-size:11.5px}
.ok small{display:none}
.crow.can{cursor:pointer}
.crow.can:hover td{background:var(--elevated)}
.cchev{display:inline-block;width:0;height:0;border:4px solid transparent;border-left-color:var(--faint);
  margin-right:8px;transform:translateY(-1px);transition:transform .14s ease}
.crow.open .cchev{transform:translateY(-1px) rotate(90deg)}
.crow.open td{background:var(--elevated)}
.cdet td{padding:0;border-bottom:1px solid var(--line);background:var(--elevated)}
.cdetb{padding:12px 14px 14px}
* several pages publish the same sentence; the row names one and counts the rest */
.pgn{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--elevated);border-radius:4px;padding:1px 5px;vertical-align:middle}
.cpglink{color:var(--muted);text-decoration:none}
.cpglink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.qmap .axl,.netmap .axl{font:700 10px var(--sans);fill:var(--faint);letter-spacing:.07em;text-transform:uppercase}
.netmap .nlab{font:500 11.5px var(--sans);fill:var(--body)}
.netmap .nlab.dom{font-weight:650;fill:var(--ink)}
.netmap .nlab.pth{fill:var(--faint);font-size:11px}
.netmap .nown{fill:var(--gold);font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase}
.netmap .axl.dim{fill:var(--faint);opacity:.75}
.nnode{cursor:pointer}
.nnode:hover .nlab{fill:var(--accent)}
.nnode:hover .nlab.pth{fill:var(--accent);opacity:.8}
.nnode:hover rect{fill:var(--elevated)}
.nnode:focus-visible rect{fill:var(--elevated);stroke:var(--accent);stroke-width:2}
.nedge{pointer-events:none;transition:stroke-opacity .12s ease}
* hovering either column dims every edge that does not touch it: on a diagram
   whose whole point is the crossings, this is the difference between reading it
   and guessing */
.netmap:has(.nnode:hover) .nedge{stroke-opacity:.05!important}
.netmap .nedge.lit{stroke-opacity:.85!important}
.pickchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink);
  background:var(--elevated);border:1px solid var(--line-md);border-radius:8px;padding:4px 6px 4px 10px}
.pickchip button{border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;line-height:1;
  color:var(--faint);padding:0 4px}
.pickchip button:hover{color:var(--ink)}
.dmap .axl{font:700 10px var(--sans);fill:var(--faint);letter-spacing:.07em;text-transform:uppercase}
* the disclosure triangle is the claims table's, so the two read as one gesture;
   a domain with no page list keeps the column width and shows nothing */
.cchev.off{visibility:hidden}
.crow.can{cursor:pointer}
.crow.can:hover{background:var(--surface)}
.crow.can:hover .cqline{text-decoration:underline;text-underline-offset:2px}

@media(max-width:620px){
  .ok small{display:none}
}

/* ── content format, given its own width ─────────────────────────────────
   Twenty format rows in the narrow right column had 112px for a label — enough
   to clip "Other social post" and "Instagram Reel" — and ran well past the
   bottom of the source bars beside them. Full width, and the rows split into
   two columns once there is room, so the block is about as tall as the chart
   it sits under instead of twice as tall. */
.fmtblock{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
/* Column flow, so the descending order reads down one column and then the
   next. Row flow put ranks 1 and 2 side by side and the reader had to zig-zag. */
.fmtblock .fmtrows{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--fmt-rows,10),auto);
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;row-gap:0}
.fmtblock .fmtrow{grid-template-columns:minmax(120px,1.3fr) minmax(60px,1fr) 66px 78px;gap:14px}
/* The first row of EACH column loses its rule. nth-child cannot read the row
   count, which is a custom property, so the renderer marks the two heads. */
.fmtblock .fmtrows > .fmtrow{border-top:1px solid var(--line)}
.fmtblock .fmtrows > .fmtrow.colhead{border-top:0}
@media(max-width:900px){
  .fmtblock .fmtrows{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
  /* stacked, only the very first row is a head */
  .fmtblock .fmtrows > .fmtrow.colhead{border-top:1px solid var(--line)}
  .fmtblock .fmtrows > .fmtrow:first-child{border-top:0}
}

/* the network's left node: the page title carries the weight, the domain is
   the attribution under it */
.netmap .nlab.ttl{font:600 11.5px var(--sans);fill:var(--ink)}
.netmap .nlab.dom{font:500 11px var(--sans);fill:var(--muted)}

/* ── claims: one line per claim, evidence in a pop-out ───────────────────
   The last of the ported claims CSS, and the part that makes the list legible:
   colour on the left edge carries the outcome, so the table can be read down
   the margin instead of by scanning the tag column. Missed by both earlier
   extractions because the rules sit behind a comment block, which the selector
   scan treated as a selector. */
.clt .cq{max-width:none;position:relative;padding-left:14px}
.clt .cq:before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:2px;
  background:var(--rc,var(--line-md))}
.clt .ctype{display:block;font-size:10.5px;color:var(--faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clt .cgo{width:26px;text-align:right;color:var(--faint)}
.clt .cgo svg{width:12px;height:12px;transform:rotate(-90deg)}

/* The published-on cell truncates its page title. The nowrap rule beside it
   targets `span`, and the title is an <a class="cpglink"> — so a long title
   ("Back Pain Treatment & Management Methods | Voltaren") wrapped to four lines
   and set the height of the whole row, which defeats the one-line-per-claim
   layout the rest of the table is built on. */
.clt .cpgs{max-width:none;min-width:0}
.clt .cpgs .cpglink{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12px}
.clt td.cpgs{width:200px}
.clt td.cq{width:42%}

/* ── the drill-down scrolls inside itself ────────────────────────────────
   The mask was the scroll container and carried 36px of top padding, so the
   sticky header stuck 36px below the top of the scrollport and the body scrolled
   up THROUGH that gap: the prompt's own hero title appeared above the dialog
   header, overlapping the page behind. Making the dialog its own scroll
   container puts the header at the top of the thing it is sticky inside, so
   nothing can pass above it, and the rounded corners clip properly again. */
.mask{align-items:flex-start;overflow:hidden}
.modal{max-height:calc(100vh - 72px);overflow:auto;overscroll-behavior:contain;margin:0 auto}
@media(max-width:720px){
  .mask{padding:0}
  .modal{max-height:100vh;border-radius:0}
}

/* ── the outcome tag ─────────────────────────────────────────────────────
   Neither .rungtag nor .conf had a base rule here, only the drill-down's own
   width overrides — so the ladder colour never drew and the count ran straight
   into the label: "Near-verbatim18×". The swatch carries the rung's colour, the
   count sits in its own chip, and the two never touch. */
.rungtag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink)}
.rungtag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lc);flex:none}
.rungtag.sm{font-size:10.5px;flex:none;min-width:92px}
.rungtag.big{font-size:11.5px;padding:4px 11px}
.conf{display:inline-block;font-size:10.5px;font-weight:600;color:var(--gold-deep);
  background:var(--warn-bg);border-radius:4px;padding:1px 6px;margin-left:7px;white-space:nowrap}
.conf.plain{background:transparent;color:var(--faint);padding:0 0 0 7px;font-variant-numeric:tabular-nums}

/* the drill-down claims table now shares the section's row design, so the
   landing passage is clamped rather than setting the row height */
/* Clamp an inner span, not the cell. -webkit-box on a <td> replaces its
   table-cell display and the column stops participating in the table layout. */
.dd-claims table.clt td.cl{font-size:12.5px;line-height:1.5;color:var(--body)}
.dd-claims table.clt .clamp4{display:-webkit-box;-webkit-line-clamp:4;
  -webkit-box-orient:vertical;overflow:hidden}
.dd-claims table.clt td.cq{padding-left:14px}

/* the window average, beside the latest-wave headline: the figure the Window
   control actually moves, so the control is visibly doing something */
.hero-avg{display:flex;flex-direction:column;gap:2px;padding:0 0 0 22px;margin:6px 0 0 20px;
  border-left:1px solid var(--line);align-self:center}
.hero-avg .ha-v{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em;
  color:var(--muted);line-height:1}
.hero-avg .ha-v small{font-size:15px;font-weight:500;margin-left:1px}
.hero-avg .ha-l{font-size:11px;color:var(--faint);letter-spacing:.02em}
@media(max-width:720px){
  .hero-avg{padding:10px 0 0;margin:10px 0 0;border-left:0;border-top:1px solid var(--line);
    flex-direction:row;align-items:baseline;gap:8px}
  .hero-avg .ha-v{font-size:22px}
}

/* ══ v11: elevated surfaces ═══════════════════════════════════════════════
   The report has been a flat editorial sheet since v1: hairline rules, no
   elevation, everything on one plane. This pass keeps the cream paper, the
   Bricolage display face and every figure exactly as computed, and lifts the
   frame and the Overview onto floating cards - the language of the reference
   dashboards. OVERVIEW ONLY: the tile and card rules below are scoped to
   #overview on purpose, so the rest of the report is untouched while the
   direction is being judged. The chrome (sidebar, top bar) is not scoped,
   because it frames every section and cannot be half-redesigned. */
:root{
  --r-xl:24px; --r-lg:18px; --r-md:13px;
  /* three stacked shadows: a hairline to seat the card, a short spread to
     separate it from the paper, a long soft one to give it height */
  --lift:0 1px 1px #241a1008, 0 3px 8px -2px #241a100f, 0 20px 44px -24px #241a1029;
  --lift-hi:0 1px 1px #241a100a, 0 6px 14px -3px #241a1014, 0 30px 60px -26px #241a1038;
}
/* CENTRED ON THE VIEWPORT, not on the content column. `margin:0 auto` inside a
   grid column that starts after a 236px fixed rail centres the content in what
   is LEFT of the rail, which is not where a reader's eye expects it: at 1600px
   the content's centre sat at 918 against a viewport centre of 800, so the
   whole report read as shifted right, and the further the window widened the
   worse it got.

   The left margin pulls it back by exactly the amount needed to sit on the
   viewport's centre line - and clamps at 0, so when the window is too narrow to
   centre without sliding under the rail it simply fills the column instead.
   Applied to the filter bar too, or the controls would stop lining up with the
   content they filter. */
.wrap,.topbar-in{
  /* never wider than the column minus a gutter on each side, so the cramped
     widths keep a symmetric margin instead of running flush to the edges -
     which is what "it gets messed up once it shrinks" was: at 1400 the content
     had 0px of gap on the left of the rail and 15px on the right */
  width:min(1320px, calc(100% - 32px));
  /* and pulled back onto the viewport's centre line whenever there is room for
     it, clamping to the gutter when there is not */
  margin-left:max(16px, calc((100vw - 1320px) / 2 - 236px));
  margin-right:16px}
@media(max-width:900px){
  /* the rail is not fixed at this width, so there is nothing to compensate for */
  .wrap,.topbar-in{width:auto;margin-left:0;margin-right:0}
}

/* ── chrome: sidebar ──────────────────────────────────────────────────── */
.side{background:var(--paper);border-right-color:var(--line)}
.side-head{border-bottom:0;padding:20px 16px 8px}
.side-head .who{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;box-shadow:0 1px 2px #241a1008}
.side-head .who img{width:26px;height:26px;border-radius:7px}
nav.snav{padding:6px 12px}
nav.snav a{padding:9px 12px;border-radius:11px;font-size:13.5px}
nav.snav a .ico{width:16px;height:16px}
nav.snav a:hover{background:#241a1008}
/* the active item is a filled pill, not a tinted panel with a gold ticker */
nav.snav a.on{background:var(--ink);color:var(--paper);font-weight:600;box-shadow:0 2px 8px -2px #241a1052}
nav.snav a.on .ico{opacity:1;color:var(--paper)}
nav.snav a.on .n{color:#f6f1e7a8}
nav.snav a.on:before{display:none}
.side-foot{border-top:0;margin:0 12px 14px;padding:13px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md)}

/* ── chrome: filter bar ───────────────────────────────────────────────── */
.topbar{border-bottom:0;background:color-mix(in srgb,var(--paper) 86%,transparent)}
.topbar-in{max-width:1320px;padding:14px var(--pad) 10px}
.dd>button{border-radius:999px;padding:8px 15px;background:var(--card);
  border-color:#241a1014;box-shadow:0 1px 2px #241a100a,0 6px 14px -10px #241a1033}
.dd>button:hover{border-color:#241a1024;box-shadow:var(--lift)}
.dd>button.act{background:var(--card);border-color:#2b62d945;box-shadow:0 0 0 3px #2b62d90f}

/* ── Overview: the sections stop being ruled bands ────────────────────── */
#overview{border-bottom:0;padding:16px 0 30px}
#overview .shead{margin-bottom:0}

/* ── the headline card ────────────────────────────────────────────────── */
#overview .hero{padding:14px 0 0}
.hcard{display:grid;grid-template-columns:minmax(300px,0.86fr) 1.14fr;gap:34px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:26px 30px 24px;box-shadow:var(--lift);align-items:center}
.hcard .hero-fig{min-width:0}
.hcard .hero-row{display:flex;align-items:flex-start;flex-wrap:wrap}
.hcard .hero-v{font-size:82px}
.hcard .hero-s{max-width:46ch;font-size:12.5px}
.hcard .hero-avg{margin-top:4px}
@media(max-width:1080px){.hcard{grid-template-columns:1fr;gap:22px;padding:22px 20px}
  .hcard .hero-v{font-size:62px}}

/* ── the curve ────────────────────────────────────────────────────────── */
.hcard-trend{min-width:0}
.tr-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.tr-head .tr-meta{margin-left:auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.tr-plot{position:relative}
svg.trend{width:100%;height:auto;display:block;overflow:visible}
.tr-grid line{stroke:var(--ink);stroke-opacity:.09;stroke-width:1;stroke-dasharray:2 5}
.tr-grid text{fill:var(--faint);font:500 11px var(--sans);text-anchor:end}
.tr-line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tr-guide{stroke:var(--ink);stroke-opacity:.2;stroke-width:1;stroke-dasharray:3 4}
.tr-pt .hit{fill:transparent}
.tr-pt .dot{fill:var(--card);stroke:var(--accent);stroke-width:2.2;transition:r .12s}
.tr-pt.last .dot{fill:var(--accent);stroke:var(--card);stroke-width:3}
.tr-pt:hover .dot{r:6}
.tr-pt{cursor:default}
/* The within-day spread. Drawn thinner and dimmer than the line it hangs off:
   it is the uncertainty around a reading, not a second reading. */
.tr-spread line{stroke:var(--accent);stroke-opacity:.42;stroke-width:1.6;stroke-linecap:round}
.tr-x{fill:var(--faint);font:500 11px var(--sans)}
/* the snapshot floats over the plot and dodges the curve - see trendChart() */
.snapcard{position:absolute;right:2px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px 13px 11px;box-shadow:var(--lift-hi);min-width:132px;
  pointer-events:none}
.snapcard.sc-tr{top:0;right:2px} .snapcard.sc-br{bottom:22px;right:2px}
.snapcard.sc-tl{top:0;left:30px}  .snapcard.sc-bl{bottom:22px;left:30px}
.sc-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.sc-h i{margin-left:auto;font-style:normal;font-size:12px;color:var(--accent)}
.sc-v{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1.1;
  margin-top:4px;font-variant-numeric:tabular-nums}
.sc-v small{font-size:14px;font-weight:500;color:var(--faint)}
.sc-d{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:2px}
.sc-d b.up{color:var(--pos)} .sc-d b.down{color:var(--neg)}

/* ── the five figures, as tiles ───────────────────────────────────────── */
#overview .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;border:0;margin-top:16px}
#overview .kpis>div{padding:17px 17px 16px;border:1px solid var(--line)}
#overview .kpis>div+div{border-left:1px solid var(--line)}
#overview .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);position:relative;overflow:hidden;
  transition:box-shadow .16s,transform .16s}
#overview .kpi:hover{box-shadow:var(--lift-hi);transform:translateY(-1px)}
/* a wash of the tile's own accent in the corner, so the five read apart at a
   glance; the tint is identity, never a value */
#overview .kpi:after{content:"";position:absolute;right:-42px;top:-52px;width:118px;height:118px;
  border-radius:50%;background:var(--kc);opacity:.06;pointer-events:none}
.ktop{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.kico{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--kc) 13%,transparent);color:var(--kc)}
.kico svg{width:15px;height:15px}
.ktop .eyebrow{font-size:10.5px;letter-spacing:.07em;line-height:1.2;min-width:0}
#overview .kpi .v{font-size:32px;margin-top:0}
#overview .kpi .s{margin-top:8px;font-size:11.5px;line-height:1.45;align-items:flex-start}
@media(max-width:1180px){#overview .kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){#overview .kpis{grid-template-columns:repeat(2,1fr)}}

/* ── engines ──────────────────────────────────────────────────────────── */
#overview .engblock{max-width:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:20px 24px 22px;box-shadow:var(--lift);margin-top:26px}
#overview .engblock .bars{gap:14px}
#overview .engblock .bar{grid-template-columns:200px 1fr;gap:16px}
#overview .engblock .vv{display:none}
#overview .engblock .bar:has(.vv:not(:empty)){grid-template-columns:200px 1fr 58px}
#overview .engblock .bar:has(.vv:not(:empty)) .vv{display:block}
/* the empty part of the track is hatched, so a short bar reads as a shortfall
   against a stated whole rather than as a bar that happens to be short */
#overview .engblock .trk{height:30px;border-radius:11px;
  background:repeating-linear-gradient(-45deg,#241a1010 0 2px,transparent 2px 7px),var(--track)}
#overview .engblock .fil{border-radius:11px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:12px;box-shadow:inset 0 -1px 0 #0000000f}
.infil{font-size:12.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px #0000002e}
#overview .engblock .ref{top:-1px;bottom:-1px;width:2.5px;background:var(--ink);opacity:.5;border-radius:2px}
#overview .engblock .withlogo{display:flex;align-items:center;gap:10px}
#overview .engblock .bar.on{outline:0}
#overview .engblock button.bar{border:0;background:transparent;padding:0;text-align:left;
  font:inherit;cursor:pointer;width:100%}
#overview .engblock button.bar:hover .fil{filter:saturate(1.12) brightness(1.04)}
#overview .engblock button.bar.on .nm b{color:var(--accent)}

/* ── digest cards pick up the same elevation ──────────────────────────── */
#overview .digest{gap:16px;margin-top:26px}
#overview .dg{border-radius:var(--r-lg);box-shadow:var(--lift);padding:17px 19px 14px}

/* the engine mark was a 14px favicon floating beside 14px type - it read as a
   smudge. It gets a tile, like the KPI marks. */
#overview .engblock .withlogo>img,#overview .engblock .withlogo .emark{
  width:26px;height:26px;border-radius:8px;padding:4px;flex:none;
  background:var(--elevated);border:1px solid var(--line);object-fit:contain}
#overview .engblock .bar .nm{font-size:13.5px}

/* the snapshot when no corner is clear: a row above the plot rather than a
   card over the readings */
.tr-plot.has-inline{display:flex;flex-direction:column-reverse;gap:6px}
.snapcard.sc-inline{position:static;display:flex;align-items:baseline;gap:10px;
  padding:8px 13px;min-width:0;align-self:flex-end;box-shadow:var(--lift)}
.snapcard.sc-inline .sc-h{font-size:10px}
.snapcard.sc-inline .sc-h i{display:none}
.snapcard.sc-inline .sc-v{font-size:19px;margin-top:0}
.snapcard.sc-inline .sc-v small{font-size:11px}
.snapcard.sc-inline .sc-d{margin-top:0}

/* the sentiment tile carries a delta chip AND a basis line, so its strap is
   twice the height of the other four; pin the strap to the foot of the tile so
   the bottom padding survives instead of being eaten */
#overview .kpi{display:flex;flex-direction:column}
#overview .kpi .s{margin-top:auto;padding-top:9px}
#overview .kpi .s .since{font-size:10.5px;line-height:1.35}

/* ══ v12: the bento ═══════════════════════════════════════════════════════
   v11 lifted the Overview onto cards but kept its shape: hero, then five equal
   tiles, then a block of bars, each the full width and each the same tonal
   weight. Nothing told the eye where to land, and every figure claimed the
   same importance as every other. This pass changes the structure, not just
   the surface - a mosaic with one inverted anchor, figures given the room they
   earn, and a chart vocabulary per figure instead of one bar chart for all of
   them. Still Overview-only. */
:root{
  --trend:var(--accent);
  --fill-green:#cfe3c4; --fill-blue:#cfdcf2; --fill-lilac:#ded6f0;
  --fill-apricot:#f6ddc4; --fill-rose:#f2d5dd;
  --onink:#f6f1e7; --onink-2:#f6f1e7b8; --onink-3:#f6f1e77a; --onink-line:#f6f1e71f;
}

.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:20px}
.bx{min-width:0}
.bx-hero{grid-column:span 8;grid-row:span 2}
.bx-rank,.bx-sov{grid-column:span 4}
.bx-eng{grid-column:span 12;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bx-sent,.bx-cov,.bx-cite{grid-column:span 4}
@media(max-width:1180px){
  .bx-hero{grid-column:span 12;grid-row:auto}
  .bx-rank,.bx-sov{grid-column:span 6}
  .bx-eng{grid-template-columns:1fr}
  .bx-sent,.bx-cov,.bx-cite{grid-column:span 12}
}
@media(max-width:700px){.bx-rank,.bx-sov{grid-column:span 12}}

/* The headline's composition, inside the hero card. Two figures on the ink
   plate, set smaller than the headline they qualify and larger than the rail
   below them, because they are the second thing a reader should read and not
   the first. */
.hc-split{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin:16px 0 0;padding:13px 0 0;border-top:1px solid #f4ece01f;cursor:default}
.hcs-l{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#f4ece080;flex:none}
.hcs-i{display:flex;align-items:baseline;gap:8px;min-width:0}
.hcs-i b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;
  color:var(--onink);font-variant-numeric:tabular-nums;flex:none}
.hcs-i b i{font-size:13px;font-style:normal;opacity:.6;margin-left:1px}
.hcs-i>span{font-size:11.5px;line-height:1.35;color:#f4ece0a6;min-width:0}
@media(max-width:700px){.hc-split{gap:12px}.hcs-i{width:100%}}

/* ── the inverted hero ───────────────────────────────────────────────── */
.hcard.dark{display:block;position:relative;overflow:hidden;height:100%;
  background:linear-gradient(152deg,#2c2015 0%,#1b130b 62%,#211812 100%);
  border:0;border-radius:var(--r-xl);padding:26px 30px 20px;color:var(--onink);
  box-shadow:0 2px 6px -1px #241a1033,0 26px 56px -26px #241a1085}
/* a single warm bloom behind the figure, in place of the reference set's 3D
   blobs - texture that cannot be mistaken for data */
.hc-glow{position:absolute;inset:auto auto -40% -18%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#e8a94a3d 0%,#e8a94a12 46%,transparent 70%);pointer-events:none}
.hc-body{position:relative}
.hcard.dark .eyebrow{color:var(--onink-3)}
.hc-top{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
.hc-fig{min-width:0}
.hc-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:8px}
.hcard.dark .hero-v{font-size:88px;color:var(--onink);line-height:.86;margin:0;
  font-family:var(--display);font-weight:600;letter-spacing:-.045em}
.hcard.dark .hero-v small{font-size:30px;color:var(--onink-3)}
.hc-d{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.hcard.dark .delta.up{background:#3ec98a1f;color:#6fdcaa}
.hcard.dark .delta.down{background:#ff6b6b1f;color:#ff9b9b}
.hcard.dark .delta.flat{background:#f6f1e714;color:var(--onink-2)}
.hcard.dark .since{color:var(--onink-3)}
.hc-avg{margin-left:auto;text-align:right;padding-left:22px;border-left:1px solid var(--onink-line)}
.hc-avg .ha-v{display:block;font-family:var(--display);font-size:32px;font-weight:600;
  letter-spacing:-.03em;color:var(--onink-2);line-height:1}
.hc-avg .ha-v small{font-size:15px;color:var(--onink-3)}
.hc-avg .ha-l{font-size:11px;color:var(--onink-3)}
.hcard.dark .hero-s{color:var(--onink-2);max-width:78ch;margin:14px 0 6px;font-size:12.5px}
@media(max-width:860px){
  .hcard.dark{padding:22px 20px 16px}
  .hcard.dark .hero-v{font-size:60px}
  .hc-avg{margin-left:0;padding-left:0;border-left:0;text-align:left}
}

/* ── the curve, on ink ───────────────────────────────────────────────── */
.tr-dot{fill:var(--ink);opacity:.07}
.hcard.dark{--trend:#f0bd63}
.hcard.dark .tr-dot{fill:var(--onink);opacity:.09}
.hcard.dark .tr-head .tr-meta{color:var(--onink-3)}
.hcard.dark .tr-grid line{stroke:var(--onink);stroke-opacity:.14}
.hcard.dark .tr-grid text{fill:var(--onink-3)}
.hcard.dark .tr-line{stroke:var(--trend);stroke-width:2.8}
.hcard.dark .tr-guide{stroke:var(--onink);stroke-opacity:.26}
.hcard.dark .tr-pt .dot{fill:#20170e;stroke:var(--trend);stroke-width:2.2}
.hcard.dark .tr-spread line{stroke:var(--trend);stroke-opacity:.5}
/* A withheld movement is set in the same muted weight the flat delta chips use,
   so "within noise" never reads as a result. */
.snapcard .sc-d b.flat{color:var(--onink);opacity:.6;font-weight:600}
.hcard.dark .tr-pt.last .dot{fill:var(--trend);stroke:#20170e;stroke-width:3}
.hcard.dark .tr-x{fill:var(--onink-3)}
.hcard.dark .snapcard{background:#f6f1e70f;border-color:var(--onink-line);
  backdrop-filter:blur(6px);box-shadow:none}
.hcard.dark .sc-h{color:var(--onink-3)}
.hcard.dark .sc-v{color:var(--onink)}
.hcard.dark .sc-v small{color:var(--onink-3)}
.hcard.dark .sc-d{color:var(--onink-3)}
.hcard.dark .sc-d b.up{color:#6fdcaa} .hcard.dark .sc-d b.down{color:#ff9b9b}

/* ── tiles ───────────────────────────────────────────────────────────── */
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px 15px;box-shadow:var(--lift);height:100%;display:flex;flex-direction:column;
  transition:box-shadow .16s,transform .16s}
.tile:hover{box-shadow:var(--lift-hi);transform:translateY(-1px)}
/* the one standing on the page gets a filled tile */
.tile.fill{background:var(--fill);border-color:#241a1014;box-shadow:0 1px 1px #241a100a,0 18px 36px -22px #241a1040}
.t-head{display:flex;align-items:center;gap:10px;margin-bottom:auto;min-height:26px}
.t-go{margin-left:auto;width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid #241a1017;background:var(--card);color:var(--body);cursor:pointer;padding:0}
.t-go svg{width:12px;height:12px}
.t-go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.t-chip{margin-left:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* A figure reported from the feed rather than drawn as a movement. Set in the
   faint weight with no arrow and no up/down colour, because the whole point of
   withholding it is that its direction is not supportable. */
.t-chip.flat{font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;cursor:default;border-bottom:1px dotted var(--line)}
.t-v{font-family:var(--display);font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1;
  margin:14px 0 0;font-variant-numeric:tabular-nums}
.t-v small{font-size:16px;font-weight:500;color:var(--faint);letter-spacing:0;margin-left:2px}
.tile.fill .t-v{font-size:52px}
.t-s{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:11px}

/* ── share of voice ring ─────────────────────────────────────────────── */
.sov-wrap{display:flex;align-items:center;gap:16px;margin-top:10px}
.sov-ring{position:relative;width:118px;flex:none}
.sov-ring svg{width:100%;height:auto;display:block}
.sov-ring .dn{transition:stroke-width .14s}
.sov-ring .dn:hover{stroke-width:24}
.sov-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.sov-mid b{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block;line-height:1}
.sov-mid b small{font-size:13px;color:var(--faint)}
.sov-mid span{font-size:10.5px;color:var(--faint);letter-spacing:.04em}
.sov-key{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.sov-key li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--body);min-width:0}
.sov-key li i{width:8px;height:8px;border-radius:2px;flex:none}
.sov-key li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sov-key li b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650}
.sov-key li.me{font-weight:700;color:var(--ink)}

/* ── sentiment split ─────────────────────────────────────────────────── */
.split{display:flex;gap:2px;height:12px;margin-top:13px;border-radius:6px;overflow:hidden}
.split .sg{display:block;min-width:3px;transition:filter .14s}
.split .sg:hover{filter:brightness(1.12)}
.split-key{list-style:none;margin:9px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap;
  font-size:11px;color:var(--muted)}
.split-key li{display:flex;align-items:center;gap:6px}
.split-key i{width:7px;height:7px;border-radius:2px}
.split-key b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650}

/* ── dot matrix ──────────────────────────────────────────────────────── */
.dmx{display:flex;gap:3px;margin-top:14px;align-items:flex-end}
.dmc{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;cursor:default}
.dmc i{display:block;width:100%;aspect-ratio:1;max-height:6px;border-radius:50%;background:var(--track)}
.dmc i.on{background:var(--accent);opacity:.32}
.dmc:last-child i.on{opacity:1}
.dmc:hover i.on{opacity:.75}
.dmc:hover:last-child i.on{opacity:1}

/* ── engine dials ────────────────────────────────────────────────────── */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 17px 13px;box-shadow:var(--lift);cursor:pointer;text-align:left;width:100%;
  font:inherit;color:inherit;display:flex;flex-direction:column;
  transition:box-shadow .16s,transform .16s,border-color .16s}
.gcard:hover{box-shadow:var(--lift-hi);transform:translateY(-1px)}
.gcard.on{border-color:var(--gc);box-shadow:var(--lift-hi),0 0 0 2px color-mix(in srgb,var(--gc) 22%,transparent)}
.g-head{display:flex;align-items:center;gap:10px;font-size:13.5px}
.g-head b{font-weight:700;letter-spacing:-.01em}
.g-head>img,.g-head .emark{width:26px;height:26px;border-radius:8px;padding:4px;flex:none;
  background:var(--elevated);border:1px solid var(--line);object-fit:contain}
.g-gap{margin-left:auto;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums}
.g-gap.up{background:var(--pos-bg);color:var(--pos)}
.g-gap.down{background:var(--neg-bg);color:var(--neg)}
.g-dial{position:relative;width:158px;margin:6px auto 2px}
.g-dial svg{width:100%;height:auto;display:block;overflow:visible}
.g-trk{fill:none;stroke:var(--track);stroke-width:13;stroke-linecap:round}
.g-val{fill:none;stroke:var(--gc);stroke-width:13;stroke-linecap:round;
  transition:d .3s cubic-bezier(.2,.8,.3,1)}
.g-tick{stroke:var(--ink);stroke-width:2.5;stroke-opacity:.55;stroke-linecap:round}
.g-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.g-mid b{display:block;font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums}
.g-mid b small{font-size:15px;color:var(--faint)}
.g-mid span{font-size:10px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
.g-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px;
  border-top:1px solid var(--line)}
.g-spark{width:104px;height:auto;flex:none;overflow:visible}
.g-spark path{fill:none;stroke:var(--gc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.g-spark circle{fill:var(--gc)}
.g-avg{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ── the derived engine line, and the digest below it ────────────────── */
.englegend{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* the matrix dots were sized by their column, so an 18-wave history at tile
   width drew ovals; they are dots at a fixed size, centred in the column */
.dmc{align-items:center}
.dmc i{width:6px;height:6px;max-height:none;aspect-ratio:auto}
/* the dial's caption sat on the baseline of the figure above it */
.g-mid b{margin-bottom:3px}
.englegend{grid-column:span 12;margin:2px 0 4px;display:flex;gap:9px}

/* ══ v13: enterprise density ══════════════════════════════════════════════
   The bento was right but soft: 24px radii, 16px gutters, and three tiles that
   each carried one figure on two-thirds empty paper. Enterprise is not a
   different palette, it is information per square inch - tighter corners,
   tighter gutters, labelled metric blocks in place of grey prose straps, and
   every brand and engine carrying its own mark at a size you can read. */
:root{ --r-xl:16px; --r-lg:12px; --r-md:9px; }
.bento{gap:12px}
.bx-field{grid-column:span 4;grid-row:span 2}
@media(max-width:1180px){.bx-field{grid-column:span 12;grid-row:auto}}

/* ── all straps removed; what is left is labelled ─────────────────────── */
.t-s{display:none}
.tile{padding:14px 16px 14px}
.t-head{min-height:24px;margin-bottom:0}
.t-v{margin-top:10px}

/* ── the hero ─────────────────────────────────────────────────────────── */
.hcard.dark{padding:22px 26px 16px;border-radius:var(--r-xl)}
.hc-lock{display:flex;align-items:center;gap:11px}
.hc-mark{width:34px;height:34px;border-radius:9px;flex:none;object-fit:contain;padding:4px;
  background:#f6f1e70f;border:1px solid var(--onink-line)}
.hc-lock>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.hc-lock b{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--onink)}
.hc-lock span{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--onink-3)}
.hcard.dark .hero-v{font-size:80px}
/* the paragraph under the figure is now a rail of labelled values: the same
   provenance, read at a glance instead of parsed as a sentence */
.hc-rail{display:flex;flex-wrap:wrap;gap:0 26px;margin:16px 0 4px;padding:11px 0 0;
  border-top:1px solid var(--onink-line)}
.hc-rail>div{display:flex;flex-direction:column;gap:3px;padding-right:26px;position:relative}
.hc-rail>div+div:before{content:"";position:absolute;left:-13px;top:2px;bottom:2px;width:1px;
  background:var(--onink-line)}
.hc-rail span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--onink-3)}
.hc-rail b{font-size:14.5px;font-weight:650;color:var(--onink);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}

/* ── the competitive field ────────────────────────────────────────────── */
.tile.field{padding:14px 16px 12px}
.fd-top{display:flex;align-items:center;gap:14px;margin:10px 0 12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.fd-stand{min-width:0}
.fd-stand .t-v{margin:0;font-size:52px}
.fd-lab{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:6px}
.tile.field .sov-ring{width:112px;margin-left:auto}
.fd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fd-list li{display:grid;grid-template-columns:16px 26px minmax(0,1fr) 62px 46px;gap:9px;
  align-items:center;padding:5px 6px;border-radius:7px;font-size:12.5px;cursor:default}
.fd-list li:hover{background:var(--elevated)}
.fd-list li.me{background:#241a100a;font-weight:700}
.fd-n{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.fd-list li.me .fd-n{color:var(--ink)}
.fd-logo{width:26px;height:26px;border-radius:7px;object-fit:contain;padding:3px;flex:none;
  background:var(--card);border:1px solid var(--line)}
.fd-logo.ph{background:var(--elevated)}
.fd-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body)}
.fd-list li.me .fd-nm{color:var(--ink)}
.fd-bar{height:7px;background:var(--track);border-radius:4px;overflow:hidden}
/* max-width belt to the clamp in the renderer's braces: the "further brands"
   row is an aggregate of 215 entities and can exceed the single leader the bars
   are scaled against, which on this project it does - 66.5% against Nesto's
   9.6% asked for a bar 693% wide. */
.fd-bar i{display:block;height:100%;border-radius:4px;max-width:100%}
.fd-v{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:650;color:var(--body)}
.fd-list li.me .fd-v{color:var(--ink)}

/* ── engine cards: a mark, a metric block and a dial, side by side ────── */
.gcard{padding:13px 15px 10px;border-radius:var(--r-lg)}
.g-top{display:flex;align-items:center;gap:11px;font-size:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.g-top b{font-weight:700;letter-spacing:-.012em}
.g-logo{width:34px;height:34px;border-radius:9px;padding:5px;flex:none;object-fit:contain;
  background:var(--elevated);border:1px solid var(--line)}
.g-logo.ph{background:var(--elevated)}
.g-main{display:flex;align-items:center;gap:12px;padding:10px 0 4px}
.g-stats{margin:0;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.g-stats>div{display:flex;align-items:baseline;gap:8px}
.g-stats dt{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.g-stats dd{margin:0 0 0 auto;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;
  color:var(--ink);letter-spacing:-.01em}
.g-stats dd em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--faint)}
.g-dial{width:128px;margin:0;flex:none}
.g-trk,.g-val{stroke-width:14}
.g-mid b{font-size:27px;margin-bottom:0}
.g-foot{border-top:0;padding-top:0;margin-top:0}
.g-spark{width:100%;height:auto}
.g-spark path{opacity:.6}

/* ── the derived engine line ──────────────────────────────────────────── */
.englegend{margin:0 0 2px;padding:11px 16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--lift);font-size:12.5px}

/* ── the two history tiles fill their box ─────────────────────────────── */
.dmx{margin-top:auto;padding-top:16px;gap:4px}
.dmc{gap:4px}
.dmc i{width:7px;height:7px}
.split{margin-top:auto}
.split-key{margin-top:10px}
.fd-list li.rest{color:var(--faint);margin-top:2px;border-top:1px dashed var(--line-md);border-radius:0;padding-top:8px}
.fd-list li.rest .fd-nm,.fd-list li.rest .fd-v{color:var(--faint)}
.fd-list li.rest .fd-logo{border-style:dashed;background:transparent}

/* ══ v14: the language, everywhere ════════════════════════════════════════
   Overview was rebuilt; the other seven sections were still the original flat
   editorial sheet - ruled bands, a grey lede under every heading, tables
   sitting directly on the paper. Same rules applied throughout: no prose
   straps, a labelled rail per section, content on cards, marks at a readable
   size, denser gutters. */

/* sections are blocks, not ruled bands */
section{border-bottom:0;padding:24px 0 10px}
section:first-of-type{padding-top:14px}
.shead{align-items:center;margin-bottom:0}
.shead h2{font-size:22px;letter-spacing:-.03em}
/* the prose and the grey count the rail replaces */
.lede{display:none}
.shead .smeta{display:none}

/* ── the rail ─────────────────────────────────────────────────────────── */
.srail{display:flex;flex-wrap:wrap;align-items:stretch;margin:12px 0 14px;padding:12px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift)}
.srail>div{display:flex;flex-direction:column;gap:4px;padding:1px 24px;position:relative;min-width:0}
.srail>div:first-child{padding-left:0}
.srail>div+div:before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:1px;background:var(--line)}
.srail span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap}
.srail b{font-size:15px;font-weight:650;letter-spacing:-.012em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px;white-space:nowrap}
.srail b img{width:19px;height:19px;border-radius:5px;object-fit:contain;flex:none;padding:2px;
  background:var(--elevated);border:1px solid var(--line)}
@media(max-width:900px){
  .srail{gap:12px 0}
  .srail>div{padding:1px 16px;flex:1 0 46%}
  .srail>div:nth-child(odd){padding-left:0}
  .srail>div:nth-child(odd):before{display:none}
}

/* ── tables sit on a card, and breathe ────────────────────────────────── */
.scroll:not(.pb):not(.panel2){background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--lift);padding:2px 18px 10px}
table.t th{padding:14px 14px 11px 0;font-size:10px}
table.t td{padding:11px 14px 11px 0;vertical-align:middle}
table.t tbody tr{transition:background .12s}
table.t tbody tr:hover{background:var(--elevated)}
.rowlab{font-size:13px}
/* Favicons in a table get the Overview's tile. SCOPED BY WHAT THE IMAGE IS,
   never by where it sits: `table.t td img` also matched the Shopping product
   photographs, because a category's shelf of product cards is rendered inside a
   table cell - so every product shot was forced to 22x22 inside its 274x124
   frame. The product rule only sets max-width/max-height, so nothing pushed
   back. Only the two columns that actually hold a mark are named here. */
.dgnm img,.clt .cpgs img{width:22px;height:22px;border-radius:6px;object-fit:contain;padding:2px;
  background:var(--card);border:1px solid var(--line);flex:none}

/* ── panels ───────────────────────────────────────────────────────────── */
.panel,.panel2{border-radius:var(--r-lg);box-shadow:var(--lift)}
.panel2 .ph{padding:13px 18px}
.panel2 .pb{padding:4px 18px 10px}
.panel2 .pf{padding:11px 18px}

/* ── controls ─────────────────────────────────────────────────────────── */
.seg{border-radius:10px;padding:3px;background:var(--elevated)}
.seg button{border-radius:8px;padding:6px 14px}
.seg button[aria-pressed="true"]{background:var(--card);box-shadow:0 1px 2px #241a1014}
.btn{border-radius:8px}
.expbar{margin:0 0 12px;padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--lift)}
#q{border-radius:9px}

/* ── sources: the two charts become two cards ─────────────────────────── */
.cols{gap:12px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
#sources .cols>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:16px 18px}
.fmtblock{margin-top:12px;padding:16px 18px;border-top:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift)}
/* 1080, not 1000, and the number was measured rather than guessed: minmax(0,...)
   stops the tracks from pushing the page wide, but the right column still has a
   real floor - the source-type ring plus a 118px label, a bar and a 66px value -
   so everything from 1001 to about 1070 still overflowed once the 236px sidebar
   took its share. Collapsing to one column 80px earlier is cheaper than
   compressing a chart nobody can then read. */
@media(max-width:1080px){.cols{grid-template-columns:1fr}}

/* ── the digest closes the Overview, so it matches its tiles ──────────── */
#overview .dg{border-radius:var(--r-lg);padding:15px 17px 13px}
#overview .digest{gap:12px;margin-top:12px}

/* ── head-to-head, claims and the ported panels ───────────────────────── */
#h2h .pcard,#ads .pcard,#shopping .pcard{border-radius:var(--r-lg)}
.dgfoot{display:none}

/* ══ v14b: the same tiles and the same silence, in every section ══════════ */

/* the stat strip in Claims, Shopping and Advertising was still the original
   ruled band - hairline top and bottom, a divider between cells, no card. It
   is the Overview's tile, everywhere. The nth-child selectors below match the
   specificity of the v10 rules they replace, which set borders inside media
   queries and would otherwise draw a rule across the new tiles. */
.kpis{display:grid;gap:12px;border:0}
.kpis>div:nth-child(n){padding:14px 16px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift);
  display:flex;flex-direction:column;transition:box-shadow .16s,transform .16s}
.kpis>div:nth-child(n):hover{box-shadow:var(--lift-hi);transform:translateY(-1px)}
.kpis .v{font-size:30px;margin-top:8px}
.kpis .eyebrow{font-size:10px;letter-spacing:.09em}
/* the strap under each figure goes, exactly as it did on the Overview - unless
   it carries a movement, which is a figure and not a description */
.kpi .s{display:none}
.kpi .s:has(.delta){display:flex;margin-top:auto;padding-top:9px}

/* ── the prompt explorer ──────────────────────────────────────────────── */
#exp-head{background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:0 16px;box-shadow:var(--lift)}
#exp-list{background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);padding:0 16px 6px;box-shadow:var(--lift)}

/* ── claims: each block on its own card ──────────────────────────────── */
.clsection{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:16px 18px 14px;margin-top:12px}
.clhead{margin-bottom:12px}
.clhead>span.k{display:none}

/* ── basis notes stay, as a note strip rather than loose grey prose ───── */
.basis{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:11px 16px;margin:0 0 12px;font-size:12px}
/* but the "how to read this bar" instructions go: the tooltip already says it */
.legend>span.k{display:none}

/* ── every source mark gets the same tile as every brand mark ─────────── */
#source-bars img,#source-legend img,.srcfav img{width:22px;height:22px;border-radius:6px;
  object-fit:contain;padding:2px;background:var(--card);border:1px solid var(--line);flex:none}
#source-bars .bar{grid-template-columns:230px 1fr 92px}
#source-bars .withlogo,#source-bars .nm{display:flex;align-items:center;gap:9px}

/* ── the shopping and advertising panels ─────────────────────────────── */
.panel2{margin-top:12px}
.pcard{border-radius:var(--r-lg)}
/* .kpis.four had no column rule of its own, so four tiles laid out in the base
   five-column grid and left an empty column on the right of the Claims strip */
.kpis.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.kpis,.kpis.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kpis,.kpis.four{grid-template-columns:1fr}}

/* The content-type block stacked its two columns at 900px. Putting it on a card
   added 36px of padding, and the two columns have a hard 776px minimum between
   them, so between 900 and ~1100 it pushed the page into a horizontal scroll.
   It stacks earlier now. */
@media(max-width:1100px){
  .fmtblock .fmtrows{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
  .fmtblock .fmtrows > .fmtrow.colhead{border-top:1px solid var(--line)}
  .fmtblock .fmtrows > .fmtrow:first-child{border-top:0}
}

/* ══ v15: head-to-head, said once ═════════════════════════════════════════
   Visibility appeared four times on this panel - two big numbers, a sentence,
   a split bar and a metric cell - and sentiment and average position twice
   each. The paragraph existed mostly to hedge in prose whenever a figure was
   missing. One matchup header, one table, every figure exactly once. */

/* a card and its header, shared by the three blocks below ─────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:16px 18px 14px;margin-top:12px}
.cardh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cardh b{font-size:14px;font-weight:700;letter-spacing:-.012em}
.cardh .lg{width:26px;height:26px;border-radius:7px;object-fit:contain;padding:3px;flex:none;
  background:var(--elevated);border:1px solid var(--line)}
.tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px}
.cardh .tag:first-of-type{margin-left:auto}
.tag.win{background:var(--pos-bg);color:var(--pos)}
.tag.lose{background:var(--neg-bg);color:var(--neg)}

/* ── the matchup ──────────────────────────────────────────────────────── */
.h2card{margin-top:0}
.h2head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.h2ent{display:flex;align-items:center;gap:12px;min-width:0}
.h2ent.r{justify-content:flex-end;text-align:right}
.h2ent>div{display:flex;flex-direction:column;gap:2px;min-width:0}
/* A NAME LONG ENOUGH TO NEED TWO LINES GETS TWO LINES. On one line with an
   ellipsis this read "Canadian Cybersecuri…" in the header of the panel that
   compares the client to a rival — the one place on the page the client's name
   has to be unambiguous. Wrapping costs one line of height in a card that has
   it, and the domain underneath still identifies the entity. */
.h2ent b{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.h2ent span{font-family:var(--mono);font-size:11px;color:var(--faint)}
.h2logo{width:44px;height:44px;border-radius:12px;object-fit:contain;padding:6px;flex:none;
  background:var(--elevated);border:1px solid var(--line)}
.h2gap{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.h2gv{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums}
.h2gv.up{color:var(--pos)} .h2gv.down{color:var(--neg)}
.h2gl{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}

/* ── one row per figure ───────────────────────────────────────────────── */
.h2cmp{display:flex;flex-direction:column}
.h2r{display:grid;grid-template-columns:118px 74px minmax(90px,1fr) 74px;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);cursor:default}
.h2r:last-child{border-bottom:0;padding-bottom:2px}
.h2lab{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.h2a,.h2b{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  color:var(--muted)}
.h2b{text-align:right}
.h2a.win,.h2b.win{color:var(--ink)}
.h2a .na,.h2b .na{font-size:11px;font-weight:500;color:var(--faint);letter-spacing:0}
.h2sp{display:flex;gap:3px;height:9px}
.h2sp i{display:block;border-radius:5px}
.h2sp .me{background:var(--ink)}
.h2sp .them{background:var(--s-none)}
.h2r.none .h2sp i{background:var(--track)}

/* ── where the lead comes from ────────────────────────────────────────── */
.h2topics .h2tkey{display:flex;gap:18px;justify-content:center;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.h2topics .h2tkey span{display:flex;align-items:center;gap:6px}
.h2topics .h2tkey i{width:8px;height:8px;border-radius:2px}
.h2topics .h2tkey .me{background:var(--ink)} .h2topics .h2tkey .them{background:var(--s-none)}

/* ── traits, as chips ─────────────────────────────────────────────────── */
.h2known{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h2kside{margin-top:12px}
.h2kgroup+.h2kgroup{margin-top:14px}
.h2kgh{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.h2kgh svg{width:13px;height:13px}
.h2kgroup.pos .h2kgh{color:var(--pos)} .h2kgroup.neg .h2kgh{color:var(--neg)}
.h2kgh span{margin-left:auto;font-variant-numeric:tabular-nums}
.h2kchips{display:flex;flex-wrap:wrap;gap:6px}
.h2k{font-size:12px;line-height:1.35;padding:5px 11px;border-radius:999px;
  background:var(--elevated);color:var(--body);border:1px solid var(--line)}
.h2kgroup.pos .h2k{background:var(--pos-bg);border-color:transparent;color:#0b5c3b}
.h2kgroup.neg .h2k{background:var(--neg-bg);border-color:transparent;color:#8f1f1f}
.h2kempty{font-size:12px;color:var(--faint)}
@media(max-width:900px){
  .h2known{grid-template-columns:1fr}
  .h2head{grid-template-columns:1fr;gap:12px}
  .h2ent.r{justify-content:flex-start;text-align:left;flex-direction:row-reverse}
  .h2r{grid-template-columns:100px 1fr 1fr;gap:10px}
  .h2sp{grid-column:1/-1}
}

/* the rival chips pick up the tile treatment */
.rchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rchips button{display:flex;align-items:center;gap:9px;padding:7px 13px 7px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;font:inherit;
  box-shadow:0 1px 2px #241a100a;transition:box-shadow .14s,border-color .14s}
.rchips button:hover{box-shadow:var(--lift)}
.rchips button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rchips button span{font-size:13px;font-weight:600;letter-spacing:-.01em}
.rchips button small{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.rchips button[aria-selected="true"] small{color:#f6f1e7a3}
.rchips .lg,.rchips .emark{width:22px;height:22px;border-radius:6px;object-fit:contain;padding:2px;
  flex:none;background:var(--elevated);border:1px solid var(--line)}

/* ══ v15b: the source table ═══════════════════════════════════════════════
   A bar list gave a name, a bar, a percentage and a grey number whose meaning
   lived in a caption underneath. Share of answers and total citations are
   different questions - canada.ca is read in about as many answers as
   healthlinkbc.ca and cited two and a half times as often inside them - so each
   gets its own column instead of one being hidden in grey. */
/* minmax(0,...), NOT a bare fr. An `fr` track never shrinks below its content's
   MIN-CONTENT width, so the Sources pair sized itself to 464px + 436px inside a
   797px column and pushed the whole page sideways by 89px on any window between
   about 1000 and 1400. The 1000px breakpoint below hid it at small widths and
   the 1440px design width hid it at large ones, so the band in the middle - which
   is most laptops - was the only place it showed. Same fault, same fix, as the
   claim-card grid in ~/aleve-dashboard. Worth porting back there. */
#sources .cols{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.srctbl{display:flex;flex-direction:column}
.srch,.srcr{display:grid;
  grid-template-columns:20px 26px minmax(96px,1fr) 88px 52px 52px minmax(56px,90px) 60px;
  gap:10px;align-items:center}
.srch{padding:0 0 9px;border-bottom:1px solid var(--line-md)}
.srch span{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.srch span.n{text-align:right}
.srcr{padding:7px 0;border-bottom:1px solid var(--line);cursor:default;border-radius:6px}
.srcr:last-child{border-bottom:0}
.srcr:hover{background:var(--elevated)}
.srcn{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.srclogo{width:26px;height:26px;border-radius:7px;object-fit:contain;padding:3px;flex:none;
  background:var(--card);border:1px solid var(--line)}
.srclogo.ph{background:var(--elevated)}
.srcd{font-size:12.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:7px}
.srcr.own .srcd{font-weight:700;color:var(--ink)}
.own-t{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;background:var(--ink);color:var(--paper);flex:none}
.own-t.us{background:var(--elevated);color:var(--muted);border:1px solid var(--line-md)}
/* the type is a tinted badge, so the colour key under the table is a key to
   something the reader can actually see in the row */
.srct{font-size:10px;font-weight:650;letter-spacing:.02em;padding:3px 8px;border-radius:5px;
  background:color-mix(in srgb,var(--tc) 13%,transparent);color:var(--tc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.srceng{display:flex;gap:3px;align-items:center}
.se{width:15px;height:15px;border-radius:4px;object-fit:contain;flex:none;opacity:.85}
.srcu{text-align:right;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.srcbar{height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.srcbar i{display:block;height:100%;border-radius:4px}
.srcc{text-align:right;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
#source-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
@media(max-width:1240px){
  .srch,.srcr{grid-template-columns:20px 26px minmax(80px,1fr) 78px 52px minmax(50px,80px) 56px}
  .srch span:nth-child(5),.srcr .srceng{display:none}
}
@media(max-width:1080px){#sources .cols{grid-template-columns:1fr}}

/* ══ v15c: claims, on the same footing ════════════════════════════════════
   The section was already the densest in the report; what it lacked was the
   frame. Each block gets the card, the two bar panels get their labels the
   room to stay on one line, and the claim table gets the header and hover the
   source table has. */

/* the two side-by-side panels were the only blocks in the section still
   sitting straight on the paper */
.clcols{grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:12px;margin-top:12px}
.clcols>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:16px 18px 14px}
.clsection{margin-top:12px;padding-top:0;border-top:0}
.clsplit{gap:24px;grid-template-columns:minmax(0,1fr) minmax(250px,320px)}
/* the subject labels were folding onto three lines in a 140px column */
.clsection .ctrow{grid-template-columns:minmax(210px,0.6fr) 1fr 74px 46px}
.clsection .ctrow .nm{overflow:hidden;text-overflow:ellipsis}

/* the basis line beside the tab pills: it says which of the two bases is on
   screen, which the pills already say */
.clhead{margin:12px 0;padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--lift);gap:12px}
.clhead .k{display:none}

/* the claim table and its filters ───────────────────────────────────────── */
.clexp{margin-top:12px;padding-top:0;border-top:0}
.clexp .clbar{margin:0 0 12px;padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--lift)}
.clexp .scroll{padding:2px 18px 10px}
.clt th{padding:14px 12px 11px 0;font-size:10px}
.clt td{padding:12px 12px 12px 0;vertical-align:top}
.clt tbody tr:hover{background:var(--elevated)}

.clsel{border-radius:9px}
/* the same fixed label column truncated "Condition and symptom guides" and
   "Drug records and labels" in the two panels below */
.clcols .ctrow{grid-template-columns:minmax(206px,0.55fr) 1fr 54px 46px;gap:12px}

/* ══ v16: one spacing system ══════════════════════════════════════════════
   The Overview was designed; everything after it was styled block by block, and
   it showed - nine different paddings across card-like blocks (16/18, 14/16,
   13/15, 15/17, 12/18, 11/16, 10/14, 2/18, 0), two different grid gaps, and a
   stray 26px margin under the claims panels. Three sizes now, by the job the
   block does, and one gap everywhere. */
:root{
  --gap:12px;
  --pad-card:16px 18px;   /* a block with content inside it */
  --pad-tile:14px 16px;   /* a small figure tile */
  --pad-strip:11px 16px;  /* a single line of controls or numbers */
}

/* blocks that hold content */
.card,.clcols>div,#sources .cols>div,.fmtblock,.clsection,.dg,#overview .dg,.h2kside{
  padding:var(--pad-card)}
.scroll:not(.pb):not(.panel2){padding:2px 18px 6px}
.panel2 .ph,.panel2 .pf{padding:13px 18px}
.panel2 .pb{padding:4px 18px 10px}

/* figure tiles */
.tile,.kpis>div:nth-child(n),.gcard{padding:var(--pad-tile)}
#overview .kpis>div{padding:var(--pad-tile)}

/* single-line strips */
.srail,.expbar,.clbar,.clexp .clbar,.clhead,.basis,.englegend{padding:var(--pad-strip)}

/* one gap, and one margin between stacked siblings */
.bento,.digest,.cols,.clcols,.h2known,.bx-eng,.kpis,.shelf{gap:var(--gap)}
.card,.clsection,.clhead,.panel2,.fmtblock,.clexp,.clcols{margin-top:var(--gap)}
.clcols>div{margin-top:0}
.srail{margin:var(--gap) 0}
.expbar,.clexp .clbar,.englegend,.basis{margin:0 0 var(--gap)}
.h2card{margin-top:0}
.h2kside{margin-top:0}
.rchips{margin:0 0 var(--gap)}
.bento{margin-top:14px}
/* The source-type card is about half the height of the domain table beside it,
   and stretching it to match left ~145px of empty card under its last line.
   Sized to its content, the space below reads as the page's own margin instead
   of as an unfinished card. */
#sources .cols{align-items:start}

/* ── the advertiser table ─────────────────────────────────────────────────
   Two faults that only show at width. The name block is flex:1 and the bar is
   a fixed 150px, so at 1188px the name column absorbed ~700px of slack and
   pushed the chart against the right edge - the bar should take the slack, not
   the label. And .adrow carries 11px of vertical padding while the .adcore
   button inside it carries another 11px, which is why a two-line row stood
   84px tall. */
#ad-advertisers .adrow{padding:0}
#ad-advertisers .adrow .an{flex:0 0 260px;max-width:260px;min-width:0;overflow:hidden}
#ad-advertisers .adrow .an>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ad-advertisers .adrow .abar{flex:1 1 auto;width:auto;min-width:140px;margin-left:auto}
#ad-advertisers .adcore{padding:9px 6px 9px 16px;gap:12px}
/* an advertiser with no favicon gets an initials mark, which was 22px against
   the image's 26px - so those rows' bars started 4px left of every other one */
#ad-advertisers .adcore>img,#ad-advertisers .adcore>.emark{width:26px;height:26px;flex:none;
  border-radius:7px}
/* the per-category and per-table "show all" controls share one look */
.shelfmore,.clmore{margin:12px 0 2px;display:block}
.shelfmore{margin-left:auto;margin-right:auto}

/* ══ v18: drill-down panels, claim rows, and the claims charts ════════════ */

/* ── the two source panels are one size, and they scroll ───────────────────
   Mention Sources holds three brands where Citation Sources holds forty urls.
   Side by side in an equal-height grid, the short panel carried ~600px of empty
   card. Both bodies are now the same bounded height with their own scroll, and
   the citation list is no longer truncated at fourteen with "26 more not
   shown" - the rest is a scroll away. */
.grid2{gap:12px;margin-bottom:12px}
.grid2 .panel2{display:flex;flex-direction:column}
.grid2 .panel2 .pb{flex:1;max-height:330px;overflow-y:auto;overscroll-behavior:contain}
.grid2 .panel2 .pb table.t thead th{position:sticky;top:0;z-index:1;background:var(--card);
  box-shadow:0 1px 0 var(--line-md)}
.grid2 .panel2 .pb::-webkit-scrollbar{width:9px}
.grid2 .panel2 .pb::-webkit-scrollbar-thumb{background:#241a1024;border-radius:5px;
  border:2px solid var(--card)}

/* ── claim rows: condensed, and no margin stripe ───────────────────────────
   The coloured bar down the left edge duplicated the Outcome tag at the other
   end of the same row, and read as decoration rather than as data. The tag
   stays; the stripe goes, and the row closes up around it. */
.clt .cq{padding-left:0}
.clt .cq:before{display:none}
.clt td{padding:8px 14px 8px 0;vertical-align:middle}
.clt td.cq{padding-right:20px;line-height:1.45}
.clt .ctype{margin-top:3px}
/* `display:flex` on a <td> stops it being a table cell, so this one stood 45px
   tall inside an 81px row - which is why the hover highlight broke in two with
   a white band through the middle of it */
.clt td.cpgs{display:table-cell;vertical-align:middle}
.clt .cpgin{display:flex;align-items:center;gap:8px;min-width:0}
/* a hover that tints the whole row rather than washing it */
.clt tbody tr:hover{background:#241a1007}
.clt tbody tr{border-left:0}

/* ── the claims bars carry their shortfall, like the engine bars ──────────
   These were flat fills on an empty track: a reader could see that "active
   ingredient & class" is the longest bar without seeing that it is 48% of
   everything quoted. The unfilled part is hatched, so the bar is read against
   a stated whole. */
.ctrow .ctrk{height:18px;border-radius:7px;opacity:1;
  background:repeating-linear-gradient(-45deg,#241a1010 0 2px,transparent 2px 7px),var(--track)}
.ctrow .ctrk i{border-radius:7px;box-shadow:inset 0 -1px 0 #0000000f}

/* ── the matrix ───────────────────────────────────────────────────────────
   44px cells on 3px gaps with 7px corners read as a grid of buttons. Tighter
   cells, a hairline gutter and square-ish corners make it a matrix, and the
   scale below says what the colour means. */
.clgrid{gap:2px}
.clgrid .gc{min-height:34px;border-radius:4px}
.clgrid .gh{padding-bottom:8px;font-size:10px}
.clgrid .gr{font-size:11.5px;padding-right:12px}
.clgrid .gc b{font-size:12.5px}
.hmscale{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.hmscale i{display:block;width:34px;height:9px;border-radius:2px}
/* The url column is set in mono at up to 64 characters, so the citation table
   was wider than the panel: it scrolled sideways inside its own card and cut
   off the Type column. One line per url, clipped, and the panel scrolls in one
   direction only. */
.grid2 .panel2 .pb{overflow-x:hidden}
.grid2 .panel2 table.t{table-layout:fixed;width:100%}
.grid2 .panel2 td .mono,.grid2 .panel2 td a{display:block;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.grid2 .panel2 td .withlogo{display:flex;align-items:center;gap:8px;min-width:0}
.grid2 .panel2 td .withlogo>*{min-width:0}
.grid2 .panel2 .lg{width:18px;height:18px;border-radius:5px;flex:none;object-fit:contain;
  padding:2px;background:var(--card);border:1px solid var(--line)}
.grid2 .panel2 th.n,.grid2 .panel2 td.n{width:78px}
.grid2 .panel2 tbody tr:hover{background:#241a1007}
/* the hatch was carried at 6% on an 18px track, which is legible on the
   Overview's 30px bars and almost invisible here */
.ctrow .ctrk{background:repeating-linear-gradient(-45deg,#241a1017 0 2px,transparent 2px 6px),var(--track)}

/* ── a claim opens like a product, an advertiser or a creative ────────────
   The caret that unfolded the row in place is replaced by the same open arrow
   every other drillable row in the report carries. */
.clt .cchev{display:none}
.clt .crow.can{cursor:pointer}
.clt .cout{position:relative;padding-right:30px}
.copen{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--faint);opacity:0;transition:opacity .12s,color .12s}
.copen svg{width:13px;height:13px;display:block}
.clt .crow.can:hover .copen,.clt .crow.can:focus-visible .copen{opacity:1;color:var(--accent)}
/* the landing panel is a modal body now, so it stops paying for a table cell */
.modal-body .cland{padding:10px 0}
.modal-body .msub .rungtag{vertical-align:-1px}

/* ══ v20: the claim screen, the ad strip, the category rank, the product ══ */

/* ── filters on the claim screen ──────────────────────────────────────── */
.lfilt{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:0 0 14px;padding:11px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift)}
.lfg{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.lfg .eyebrow{margin-right:3px}
.lchip{display:inline-flex;align-items:center;gap:6px;font:600 12px/1.3 var(--sans);color:var(--body);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;
  white-space:nowrap;transition:border-color .12s,background .12s}
.lchip i{width:8px;height:8px;border-radius:2px;background:var(--lc,var(--line-md));flex:none}
.lchip .lg.sm{width:14px;height:14px;border-radius:4px;object-fit:contain;flex:none}
.lchip span{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:600}
.lchip:hover{border-color:#241a1030}
.lchip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.lchip.on span{color:#f6f1e7a3}
.lnone{padding:26px 0;text-align:center;font-size:13px;color:var(--faint)}

/* ── sponsored placements: the engine strip ───────────────────────────────
   Three engines, their marks, their names and their counts all ran together on
   one wrapping line, so "ChatGPT 4 ads Perplexity no ads AI Overview no ads"
   read as one sentence with pictures in it. One row per engine, aligned. */
.adqengrows{display:flex;flex-direction:column;gap:6px;margin-top:8px;flex-wrap:nowrap}
.adqer{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;align-items:center;
  font-size:12.5px;color:var(--muted);cursor:default}
.adqer .lg,.adqer img{width:20px;height:20px;border-radius:6px;object-fit:contain;flex:none;
  padding:2px;background:var(--elevated);border:1px solid var(--line)}
.adqer.on{color:var(--ink);font-weight:600}
.adqertag{border-left:0;padding-left:0;text-align:right;color:var(--faint);font-weight:600}
.adqer.on .adqertag{color:var(--s-blue)}
.adqeng{min-width:220px}
@media(max-width:820px){.adqeng{min-width:0}}

/* ── the category rank sat under its own open-state marker ────────────────
   The open row draws `inset 3px 0 0` on its first cell and that cell carries no
   left padding, so the gold bar was painted straight over the digit. */
table.cats .catrank{padding-left:13px;width:38px}
table.cats th:first-child{padding-left:13px}

/* ── the product screen, condensed ────────────────────────────────────────
   A product that occurs twice was given a full-height bar chart of eighteen
   waves, a six-cell stat block and three tab panes - several screens of
   scrolling for two data points. */
.modal .phero{padding:14px 18px;gap:14px}
.modal .phero .img{width:84px;height:84px;flex:none}
.modal .phero h4{font-size:17px;margin:2px 0 4px}
.modal .pmeta{gap:0}
.modal .pmeta>div{padding:11px 14px}
.modal .pmeta .big{font-size:22px}
.modal .panel2 .ph{padding:11px 16px}
/* A product that occurred twice was given the same 168px-tall chart the whole
   project's timeline uses. Inside a product screen the series is one or two
   bars on an eighteen-day axis, so the chart is shorter there - it still shows
   the shape, without spending half a screen on it. */
.modal .wc-grid{height:104px;padding-top:16px;gap:7px}
.modal .bignum{font-size:34px;margin:4px 0 12px}
.modal .pcard{margin-bottom:12px}
.modal .panel2[style*="margin-bottom"]{margin-bottom:12px!important}

/* ══ v21: engine cards, matrix axis ═══════════════════════════════════════ */
/* one statistic beside the dial, not three: the 18-wave average is already the
   tick on the ring and the best wave is a number nobody acts on */
.g-stats>div{flex-direction:column;align-items:flex-start;gap:5px}
.g-stats dt{font-size:9.5px}
.g-stats dd{margin:0;font-size:24px;font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.g-stats dd em{font-size:14px}
.g-main{align-items:center;padding:14px 0 6px}
.englegend:empty{display:none}

/* the matrix was a field of dots with nothing saying what an axis was */
.dmx-x{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.dmx-x .dmx-mid{margin:0 auto;letter-spacing:.06em;font-weight:600;text-transform:none;font-size:10px}

/* ══ v21b: topics as cards ════════════════════════════════════════════════
   The table gave every topic nine fixed logo slots, so a topic where four
   brands are named printed five empty circles - and the one rank that matters,
   the client's own, had to be found by scanning a row of favicons for the one
   with a ring on it. A card says the standing in words. */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:1100px){.tgrid{grid-template-columns:1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);overflow:hidden;transition:box-shadow .16s,border-color .16s}
.tcard:hover{box-shadow:var(--lift-hi)}
.tcard.open{border-color:#241a1024}
.tcmain{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;color:inherit;
  cursor:pointer;padding:15px 17px 12px}
.tch{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tcname{font-family:var(--display);font-size:15px;font-weight:650;letter-spacing:-.015em;
  color:var(--ink);min-width:0}
.tcstat{margin-left:auto;flex:none;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.tcstat.lead{background:var(--pos-bg);color:var(--pos)}
.tcstat.comp{background:var(--warn-bg);color:var(--gold-deep)}
.tcstat.miss{background:var(--neg-bg);color:var(--neg)}

.tcfig{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;gap:14px;align-items:center;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.tcv b{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1;
  display:block;font-variant-numeric:tabular-nums}
.tcv b small{font-size:14px;color:var(--faint)}
.tcv span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-top:4px;display:block}
.tcbar{height:9px;border-radius:5px;background:repeating-linear-gradient(-45deg,#241a1017 0 2px,transparent 2px 6px),var(--track);overflow:hidden}
.tcbar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.tcn{text-align:right}
.tcn b{display:block;font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
.tcn span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* the podium: only the brands actually named, in order, with ours marked */
.tcpod{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.tcpod li{display:grid;grid-template-columns:14px 22px minmax(0,1fr) 64px;gap:9px;align-items:center;
  font-size:12px;padding:3px 5px;border-radius:6px}
.tcpod li.me{background:#241a100a;font-weight:700}
.tcpod li.tcnone{display:block;color:var(--faint);font-size:12px;padding:6px 0}
.tcr{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.tcpod li.me .tcr{color:var(--ink)}
.tcpod img{width:22px;height:22px;border-radius:6px;object-fit:contain;padding:2px;
  background:var(--card);border:1px solid var(--line)}
.tcph{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:8.5px;
  font-weight:700;color:var(--muted);background:var(--elevated);border:1px solid var(--line)}
.tcb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body)}
.tcpod li.me .tcb{color:var(--ink)}
.tct{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.tct i{display:block;height:100%;border-radius:3px;background:var(--s-none)}
.tcpod li.me .tct i{background:var(--ink)}

.tcmore{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line);font-size:11px;font-weight:650;color:var(--accent)}
.tcmore svg{width:13px;height:13px;transition:transform .16s}
.tcard.open .tcmore svg{transform:rotate(180deg)}

/* the prompts behind a topic */
.tcsub{border-top:1px solid var(--line);background:var(--elevated);padding:6px 10px 10px}
.tcsub[hidden]{display:none}
.tcp{display:grid;grid-template-columns:minmax(0,1fr) 34px auto;gap:10px;align-items:center;
  padding:7px 7px;border-radius:7px;cursor:pointer;font-size:12px}
.tcp:hover{background:var(--card)}
.tcpq{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body)}
.tcpr{text-align:right;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.tcpr.lead{color:var(--pos)} .tcpr.comp{color:var(--gold-deep)} .tcpr.miss{color:var(--faint)}
.tcpl{display:flex;gap:3px}
.tcpl img,.tcph.sm{width:17px;height:17px;border-radius:5px;object-fit:contain;padding:1px;
  background:var(--card);border:1px solid var(--line);flex:none}
.tcph.sm{font-size:7px}
.tcpl img.me,.tcph.sm.me{box-shadow:0 0 0 2px var(--accent);border-color:transparent}

/* ── head-to-head: the traits fold away ──────────────────────────────────── */
.h2known{display:block}
.h2ktog{display:flex;align-items:center;gap:10px;width:100%;margin-top:var(--gap);
  padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);font:650 12.5px/1.3 var(--sans);color:var(--body);cursor:pointer;
  letter-spacing:-.005em}
.h2ktog:hover{color:var(--ink)}
.h2ktog .k{margin-left:auto;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.h2ktog svg{width:14px;height:14px;flex:none;color:var(--faint);transition:transform .16s}
.h2known.on .h2ktog{border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:none;margin-bottom:0}
.h2known.on .h2ktog svg{transform:rotate(180deg)}
.h2known.on{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.h2known.on .h2ktog{grid-column:1/-1}
.h2kside[hidden]{display:none}
@media(max-width:900px){.h2known.on{grid-template-columns:1fr}}

/* ══ v22: the association map, the ad screen, the last duplicates ═════════ */

/* the engine dial is the whole card body now that the count has gone */
.g-main{justify-content:center;padding:10px 0 4px}
.g-dial{width:172px;margin:0 auto}
.g-mid b{font-size:32px}
.g-foot{padding-top:6px}

/* the sidebar footer block is empty; it must not leave its border and padding */
.side-foot:empty{display:none}

/* ── topics: the association map ────────────────────────────────────────── */
.tmap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:var(--pad-card);margin-bottom:var(--gap)}
.tmap .cardh{margin-bottom:4px}
/* Was pushed to the far right of the header by margin-left:auto, where it read
   as a stray caption belonging to the control cluster beside it. It is a
   subtitle under the title, which is what it always was. */
.tmapk{margin:0 0 2px;font-size:11.5px;line-height:1.5;color:var(--faint);max-width:68ch}
.tmap svg{width:100%;height:auto;display:block}
.tml{stroke:var(--s-none);stroke-linecap:round}
.tml.me{stroke:var(--accent)}
/* topics are the fixed frame the brands are read against, so they are quiet
   and square-on; the brands are the marks that move */
.tmt{cursor:pointer}
.tmt circle{fill:var(--card);stroke:var(--ink);stroke-width:2;stroke-opacity:.45}
.tmt text{fill:var(--body);font:650 12px var(--sans);letter-spacing:-.01em}
.tmt .tmtv{fill:var(--faint);font:500 10.5px var(--sans);font-variant-numeric:tabular-nums}
.tmt:hover circle{stroke-opacity:1;fill:var(--elevated)}
.tmt:hover text{fill:var(--ink)}
.tmb circle{fill:var(--card);stroke:var(--line-md);stroke-width:1.5;
  filter:drop-shadow(0 2px 6px #241a1014)}
.tmb.me circle{stroke:var(--accent);stroke-width:2.5}
.tmb .tmbi{fill:var(--muted);font:700 10px var(--sans)}
.tmb{cursor:default}
.tmb:hover circle{stroke:var(--ink)}
/* two labelled groups - what the colours mean, what the geometry means - so the
   key stops being one long wrapping sentence of mixed kinds */
.smgrp{display:flex;align-items:baseline;gap:9px;min-width:0}
/* An <i> in this footer IS a swatch dot - `.tmapf i` says so, and `#srcmap
   .tmapf i` says it again at ID specificity, which a class override cannot
   reach. These two group labels are <b> for that reason: resetting four
   properties to un-draw a circle worked at one specificity and silently lost at
   the next, and the markup was the honest place to fix it. */
.smgl{font-size:9px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--onink-3);flex:none}
.smgrp .smkey{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}
.tmapf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-top:8px;padding-top:11px;
  border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.tmapf span{display:flex;align-items:center;gap:7px}
.tmapf i{width:9px;height:9px;border-radius:50%;background:var(--s-none);flex:none}
.tmapf i.me{background:var(--accent)}

/* the restored table sits on its own card again */
.trank{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:2px 18px 8px}

/* ── the advertiser screen, on the product screen's diet ────────────────── */
.modal .adfreq .wc-grid,.modal .advchart .wc-grid{height:118px;padding-top:16px}
.modal .adpeers{gap:8px}
.modal .adpeer{padding:9px 12px}
/* ── the advertiser screen, on the product screen's diet ────────────────── */
.modal .adpeerwrap{padding-top:4px}
.modal .adpeers,.adpeerwrap .adpeers{gap:8px}
.modal .pmeta>div{padding:10px 14px}
.modal .phero .eyebrow{margin-bottom:3px}
/* The creative table stood 1,053px of a 2,246px screen: each row carried a
   96px thumbnail against 12px body copy, so the artwork - not the numbers -
   set the row height. The thumbnail is the size of every other mark in the
   report and the copy is clamped to two lines. */
.modal .crtcell{display:flex;align-items:flex-start;gap:11px;min-width:0}
.modal .crtcell img,.modal .crtcell .ph2{width:46px;height:46px;border-radius:8px;object-fit:cover;
  flex:none;background:var(--elevated);border:1px solid var(--line)}
.modal .crtcell .sub2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:11.5px;line-height:1.4;color:var(--faint);margin-top:2px}
.modal .crtcell .rowlab{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden}
.modal table.t td{padding:9px 12px 9px 0}
.modal .tag.sm{font-size:9.5px;padding:2px 7px}
/* "Questions reached" was 14 rows at 71px - the tallest block on the screen,
   and each row is one line of question text over one word of qualifier. The
   qualifier moves onto the same line as a quiet suffix. */
.modal .panel2 .sub2{font-size:11px;color:var(--faint);margin-top:1px;line-height:1.35}
.modal .panel2 tbody tr td{padding-top:8px;padding-bottom:8px}
.modal .rowlab{font-size:12.5px;line-height:1.4}

/* ── v23: the map reads at full size ──────────────────────────────────────
   Topic names were clipped at 26 characters and the brand marks were 26px
   logos inside a bordered disc, so the outline was as loud as the logo. The
   names wrap instead of truncating, and the logo IS the mark - clipped round,
   no ring, with only a soft shadow to lift it off the links behind it. */
.tmb circle{fill:none;stroke:none;filter:none}
.tmb image{filter:drop-shadow(0 2px 5px #241a1029)}
.tmb .tmbg{fill:var(--elevated);stroke:var(--line-md);stroke-width:1}
.tmb .tmbi{fill:var(--muted);font:700 12px var(--sans)}
/* the client is marked by a halo behind the logo rather than a ring on it */
.tmb .tmhalo{fill:var(--accent);opacity:.16;stroke:none}
.tmb:hover image{filter:drop-shadow(0 3px 10px #241a1047)}
.tmt text{font-size:12.5px}
.tmap svg{overflow:visible}

/* ══ v25: sources — colour that separates, a tag that recedes ═════════════
   Two complaints, both fair. The type column was a tinted pill in one of four
   near-identical blues, which is the most decorated element in the row saying
   the least; and the right rail stopped 330px above the bottom of the table
   beside it.

   The tag is now a swatch and a word: the colour is a 7px mark, the label is
   quiet text at the row's own weight, and nothing about it competes with the
   domain. It also costs less width, which is what let "Institutional" stop
   truncating to "Institutio…". */
.srct{display:flex;align-items:center;gap:6px;min-width:0;
  font-size:10.5px;font-weight:500;letter-spacing:0;padding:0;border-radius:0;
  background:none;color:var(--muted);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srct i{width:7px;height:7px;border-radius:2px;background:var(--tc);flex:none}
.srcr:hover .srct{color:var(--body)}
/* the label needs the room the pill's padding was using */
.srch,.srcr{grid-template-columns:20px 26px minmax(96px,1fr) 96px 52px 52px minmax(56px,84px) 58px}
/* Below 1240 the "Read by" column is hidden, and the eight-column template
   above kept holding 52px open for a cell with nothing in it - which is where
   the citation bar's width had gone. Seven columns when that one is out. */
@media(max-width:1240px){
  /* and the citation BAR is the cell to give up next, not the domain name.
     Both measures are still printed as numbers in their own columns; the bar
     only ranks them, and a 57px bar ranks nothing. Dropping it hands 66px
     back to the domain, which is the column a reader actually reads. */
  .srch,.srcr{grid-template-columns:20px 26px minmax(96px,1fr) 94px 52px 58px}
  .srch span:nth-child(7),.srcr .srcbar{display:none}
}
/* and the legend dots become the same square swatch, so the key and the row
   are visibly the same mark */
#source-legend .dot{border-radius:2px}

/* ── the content-type panel, inside the right rail ──────────────────────
   Not a card inside a card: it is the second block of the rail it now lives
   in, separated by the rule the rail's own blocks use. One column, at the full
   width of the rail. */
#sources .cols .fmtblock{margin-top:18px;padding:18px 0 0;border-top:1px solid var(--line);
  border-left:0;border-right:0;border-bottom:0;border-radius:0;background:none;box-shadow:none}
#sources .cols .fmtblock .fmtrows{display:flex;flex-direction:column;
  grid-template-rows:none;grid-template-columns:none;column-gap:0}
#sources .cols .fmtblock .fmtrow{grid-template-columns:minmax(0,1fr) minmax(52px,0.78fr) 50px 62px;
  gap:10px;padding:5px 0}
#sources .cols .fmtblock .fmtrows>.fmtrow{border-top:1px solid var(--line)}
#sources .cols .fmtblock .fmtrows>.fmtrow:first-child{border-top:0}
#sources .cols .fmtblock .fmtrows>.fmtrow.colhead{border-top:1px solid var(--line)}
#sources .cols .fmtblock .fmtrows>.fmtrow.colhead:first-child{border-top:0}
#sources .cols .fmtblock .fmtlab{font-size:11.5px}
#sources .cols .fmtblock .fmtkind{font-size:9px;padding:2px 0}
#sources .cols .fmtblock .fmtv b{font-size:12px}
/* the page count goes back on the percentage's line: twenty rows of two lines
   each is 880px of rail, and the second line is a number in brackets */
#sources .cols .fmtblock .fmtv small{display:inline;font-size:10px;margin-left:5px}
#sources .cols .fmtblock .shead2{margin-bottom:10px}

/* ══ v25: the association map is an orbit ════════════════════════════════
   A ring you could only read from one angle became a sphere you turn. The
   marks move now, so everything that used to be baked into the markup - the
   position, the size, the fade, the draw order - is written per frame, and the
   CSS here only says what a mark IS. */
.tmap svg{overflow:hidden;touch-action:none;cursor:grab;border-radius:10px;
  background:radial-gradient(ellipse 62% 62% at 50% 46%,#241a1006,transparent 70%)}
.tmap svg.drag{cursor:grabbing}
.tmap svg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tmt,.tmb{cursor:pointer}
/* the selected mark keeps a ring, which is the only thing on the map that says
   "this one" once everything else is dimmed rather than hidden */
.tmt.sel circle{stroke:var(--ink);stroke-opacity:1;stroke-width:2.5}
/* drop-shadow() has no spread argument, so a selected logo gets a real ring
   element rather than a filter pretending to be one */
.tmring{fill:none;stroke:var(--ink);stroke-width:2;opacity:0}
.tmb.sel .tmring{opacity:1}
.tmb.sel image{filter:drop-shadow(0 4px 12px #241a1047)}
.tmb.sel .tmhalo{opacity:.3}
/* a paper-coloured stroke UNDER the glyphs, so a label stays readable wherever
   the rotation happens to put it - over a link, over a logo, over another label */
.tmtn,.tmtv{paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round}
.tmtn{fill:var(--body);font:650 12.5px var(--sans);letter-spacing:-.01em}
.tmtv{fill:var(--faint);font:500 10.5px var(--sans);font-variant-numeric:tabular-nums}
.tmlabels{pointer-events:none}

/* ── the controls ─────────────────────────────────────────────────────── */
/* ── the header breadcrumb ────────────────────────────────────────────── */
.tmcrumb{display:flex;align-items:center;gap:6px;min-width:0;flex:1;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--s-yellow)}
.tmcrumb i{display:grid;place-items:center;color:var(--faint);flex:none}
.tmcrumb i svg{width:11px;height:11px}
.tmcrumb span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-transform:none;letter-spacing:-.01em;font-size:12.5px;color:var(--ink)}
.tmcrumb > span:only-child{text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;
  color:var(--s-yellow)}
/* the parent crumb IS the way back out - the only one now, in the place a
   reader looks for it */
.tmcup{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;flex:none;
  border-bottom:1px solid transparent}
.tmcup:hover{border-bottom-color:currentColor}

.tmctl{display:flex;align-items:center;gap:4px;margin-left:12px}
.tmctl button{display:grid;place-items:center;width:27px;height:27px;padding:0;
  border:1px solid var(--line-md);background:var(--card);border-radius:8px;
  color:var(--muted);cursor:pointer}
.tmctl button:hover{color:var(--ink);border-color:#241a1045;background:var(--elevated)}
.tmctl button svg{width:14px;height:14px}
.tmctl button[data-tm="reset"] svg{width:15px;height:15px}
.tmctl button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ── the selection strip ──────────────────────────────────────────────── */
/* It is never hidden now - an empty strip shifted the sphere up and down the
   page on every click - so it keeps a steady height and carries the invitation
   when nothing is selected. */
.tmfocus{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:8px 0 2px;
  padding:8px 12px;background:var(--elevated);border-radius:9px;font-size:12px;color:var(--muted);
  min-height:44px}
.tmfocus.idle{background:transparent;border:1px dashed var(--line-md)}
.tmfico{width:21px;height:21px;border-radius:6px;object-fit:contain;flex:none}
.tmfl{font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.015em;
  display:flex;align-items:center;gap:7px;min-width:0}
.tmfown{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--s-yellow);border:1px solid currentColor;
  border-radius:4px;padding:1px 4px;flex:none}
/* A LABELLED CELL PER MEASURE. Three measurements punctuated as one sentence
   made the reader parse prose to find a number; each gets its own label and
   its own figure, and `key` marks the one the map was built to carry. */
.tmfs{display:flex;flex-direction:column;gap:1px;flex:none}
.tmfs i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.tmfs b{font-size:13px;font-weight:650;color:var(--ink);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tmfs.key b{color:var(--s-yellow)}
.tmfi{min-width:0;flex:1;font-size:11.5px;color:var(--faint)}
.tmfv{font-variant-numeric:tabular-nums;color:var(--body)}
.tmfn{min-width:0;flex:1}
.tmfn b{font-weight:650;color:var(--body)}
/* the action and the dismiss sit at the end of the row whatever precedes them */
.tmfocus .tmfb.go{margin-left:auto}
.tmfb{font:600 11.5px var(--sans);color:var(--body);background:var(--card);
  border:1px solid var(--line-md);border-radius:7px;padding:4px 10px;cursor:pointer;flex:none}
.tmfb:hover{color:var(--ink);border-color:#241a1045}
.tmfx{font-size:16px;line-height:1;color:var(--faint);background:none;border:0;cursor:pointer;
  padding:0 2px;flex:none}
.tmfx:hover{color:var(--ink)}
.tmhint{margin-left:auto;font-variant-numeric:tabular-nums}
@media(max-width:820px){.tmhint{display:none}}

/* ── the orbit and its index, side by side ────────────────────────────── */
.tmbody{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}
.tmindex{display:flex;flex-direction:column;gap:2px;padding-top:4px;min-width:0}
/* Two-part: what the list is ordered by, and what the bar under every row
   measures. The second used to live only in the footer, below the last row. */
.tmixh{display:flex;align-items:baseline;gap:10px;font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0 2px 8px}
.tmixh span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmixh i{margin-left:auto;font-style:normal;font-weight:600;letter-spacing:.04em;
  text-transform:none;font-size:9.5px;opacity:.85;white-space:nowrap}
/* THE LIST SCROLLS, NOT THE PANEL. The panel already had a 520px cap with
   overflow on the whole column, which scrolled the lens buttons, the ordering
   note and the finding out of sight to reach row nine - the controls that
   decide what the list says were the first thing a reader lost by using it.
   The controls are pinned now and only the rows move. The list takes whatever
   height is left beside the sphere (`flex:1` against a panel stretched to the
   grid row), so it is exactly as tall as the map and never taller.

   Below 980px the panel becomes a grid under the map, where a nested scroller
   would trap the page scroll, so it reverts to a plain full-height grid. */
.tmixl{display:flex;flex-direction:column;gap:2px;min-width:0}
@media(min-width:981px){
  .tmixl{flex:1 1 auto;min-height:140px;overflow-y:auto;overscroll-behavior:contain;
    margin-right:-6px;padding-right:6px}
  .tmixl::-webkit-scrollbar{width:6px}
  .tmixl::-webkit-scrollbar-thumb{background:#efe7da26;border-radius:3px}
  .tmixl::-webkit-scrollbar-thumb:hover{background:#efe7da42}
  .tmixl::-webkit-scrollbar-track{background:transparent}
}
.tmix{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:9px;row-gap:5px;align-items:center;width:100%;text-align:left;
  padding:7px 9px;border:1px solid transparent;border-radius:9px;background:none;cursor:pointer}
.tmix:hover{background:var(--elevated)}
.tmix.on{background:var(--elevated);border-color:var(--line-md)}
.tmix img,.tmixph{width:22px;height:22px;border-radius:6px;object-fit:contain;grid-row:1;
  background:var(--card);border:1px solid var(--line)}
.tmixph{display:grid;place-items:center;font:700 9px var(--sans);color:var(--muted)}
.tmixn{grid-row:1;min-width:0;font-size:12.5px;font-weight:650;color:var(--ink);
  letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmixn small{display:block;font-size:10.5px;font-weight:500;color:var(--faint);
  letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmixb{grid-row:2;grid-column:1/-1;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.tmixb i{display:block;height:100%;border-radius:2px;background:var(--s-none);min-width:2px}
.tmix.me .tmixn{color:var(--accent)}
/* the bar is the client-presence measure and keeps its own hue on every row.
   It used to be repainted accent-green on our own domains, which made one bar
   mean the measure on most rows and ownership on a few. Ownership is the name's
   colour and the badge; the bar stays the measure. */
@media(max-width:980px){
  .tmbody{grid-template-columns:1fr}
  .tmixl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
}

/* ══ v25: head-to-head, two columns instead of a stack ═══════════════════
   Nothing on this panel folds away any more, and it ends up shorter than the
   version that hid its bottom third: the matchup band is the only block that
   wants the whole width, so the five figures and the topic strip sit side by
   side and the two trait cards were already a pair. */
.h2matchup{margin-top:0}
.h2grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.h2grid>.card{margin-top:0}
/* the topic strip was a band welded under the figures with a rule across the
   top of it; as a card of its own it needs the card's own padding */
.h2grid .h2topics{border-top:0;padding:var(--pad-card,16px 18px)}
.h2card .cardh{margin-bottom:12px}
/* Always open. The disclosure button is gone, so the rules that only applied
   when it was open apply always, and the two sides stay a pair down to the
   width where everything in the report goes single file. */
.h2known{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.h2known>.h2kside{margin-top:0}
.h2kside .cardh{margin-bottom:13px}
.h2kside .cardh .smeta{margin-left:auto;font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums}
/* at a half-width column the label column can give up a little */
.h2grid .h2r{grid-template-columns:100px 66px minmax(64px,1fr) 66px;gap:11px}
.h2grid .h2trow{grid-template-columns:minmax(0,1fr) minmax(90px,1.15fr) 58px;gap:11px}
/* Topic names wrap to two lines rather than truncating. "Safety, dosing and
   int…", "Sport and activity sor…" and "Fever and general bo…" are three of the
   eight rows, and the clipped word is the one that identifies the topic. */
.h2grid .h2tn{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;line-height:1.3;text-overflow:clip}
.h2grid .h2trow{padding:6px 0}
/* An older rule sent the split bar onto its own row below 900px, from when the
   whole panel was one column and a metric row had the section's full width to
   play with. In a half column the four cells still fit in one line at 329px,
   and the three-line version made each of the five rows 104px tall. */
.h2grid .h2sp{grid-column:auto}
.h2matchup .h2head{grid-template-columns:1fr auto 1fr}
.h2matchup .h2ent.r{justify-content:flex-end;text-align:right;flex-direction:row}
/* 780, not 900: the figure table needs 329px and the topic strip 170px, so a
   half column holds both a long way below the width at which the rest of the
   report goes single file. Collapsing at 900 sent a 1,100px-wide window back to
   one column for no reason. */
@media(max-width:780px){
  .h2grid,.h2known{grid-template-columns:1fr}
  .h2grid>.card+.card,.h2known>.h2kside+.h2kside{margin-top:var(--gap)}
  .h2grid .h2r{grid-template-columns:100px 1fr 1fr;gap:10px}
  .h2grid .h2sp{grid-column:1/-1}
  .h2matchup .h2head{grid-template-columns:1fr;gap:12px}
  .h2matchup .h2ent.r{justify-content:flex-start;text-align:left;flex-direction:row-reverse}
}

/* ══ v25: claims — a funnel, a ladder, and bars with room ════════════════ */

/* ── the funnel ───────────────────────────────────────────────────────────
   Three equal bands in order, each with one bar measuring its share of the
   band above. The bands do not taper because 6,565 to 168 is 250:1 and any
   silhouette drawn to that ratio is a hairline; the bar carries the
   proportion, and it gets the full width of the card to carry it in. */
.clfunnel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:4px 20px 18px;margin-top:var(--gap)}
.cfstep{padding:15px 0 14px;border-top:1px solid var(--line)}
.cfstep:first-child{border-top:0}
.cftop{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:13px;align-items:baseline}
.cfn{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--ink);
  font:700 11px var(--sans);font-variant-numeric:tabular-nums;align-self:center}
.cflab{font-size:14px;font-weight:650;color:var(--ink);letter-spacing:-.015em;min-width:0}
.cflab small{display:block;font-size:11.5px;font-weight:500;color:var(--faint);
  letter-spacing:0;margin-top:2px;line-height:1.4}
.cffig{text-align:right;white-space:nowrap}
.cffig b{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.035em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cffig small{display:block;font-size:11px;color:var(--faint);margin-top:1px}
.cfbot{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:16px;align-items:center;
  margin-top:11px;padding-left:37px}
.cftrk{height:12px;border-radius:6px;background:var(--track);overflow:hidden;
  box-shadow:inset 0 0 0 1px #241a100a}
.cftrk i{display:block;height:100%;border-radius:6px;background:var(--c);min-width:2px}
.cfpct{font-variant-numeric:tabular-nums}
.cfpct b{font-size:14px;font-weight:700;color:var(--ink)}
.cfpct small{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}

/* reach is not attrition: pages and questions are what the quoted claims
   touch, not a subset of them, so they sit under the funnel and not in it */
.cfreach{margin-top:4px;padding-top:15px;border-top:1px solid var(--line-md)}
.cfrh{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:11px}
.cfr{display:grid;grid-template-columns:150px 92px minmax(80px,1fr) minmax(0,1.5fr);
  gap:14px;align-items:center;padding:6px 0}
.cfrl{font-size:12.5px;font-weight:650;color:var(--ink)}
.cfrv{font-variant-numeric:tabular-nums;text-align:right}
.cfrv b{font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.02em}
.cfrv small{font-size:11.5px;color:var(--faint)}
.cfrt{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.cfrt i{display:block;height:100%;border-radius:4px;background:var(--gold);min-width:2px}
.cfrn{font-size:11.5px;color:var(--faint)}
@media(max-width:780px){
  .cfbot{grid-template-columns:1fr;gap:7px;padding-left:0}
  .cfr{grid-template-columns:1fr auto;gap:6px 12px}
  .cfr .cfrt,.cfr .cfrn{grid-column:1/-1}
}

/* ── the fidelity ladder ──────────────────────────────────────────────────
   The order is the argument, so it is a ladder and not a stack: one rung per
   outcome, most faithful at the top, each with its own bar. The rung this
   project exists to report - cited a page, then printed another number - was
   three pixels of a stacked bar before this. */
.clladder{display:flex;flex-direction:column}
.clrung{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(70px,1.1fr) 62px;
  gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.clrung:first-child{border-top:0}
.clrung:hover{background:var(--surface)}
.crstep{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;
  background:color-mix(in srgb,var(--lc) 16%,var(--card));color:var(--ink);
  font:700 10px var(--sans);font-variant-numeric:tabular-nums}
.crn{font-size:12.5px;font-weight:650;color:var(--ink);letter-spacing:-.012em;min-width:0}
.crn small{display:block;font-size:10.5px;font-weight:500;color:var(--faint);
  letter-spacing:0;margin-top:1px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crt{height:14px;border-radius:7px;background:var(--track);overflow:hidden}
.crt i{display:block;height:100%;border-radius:7px;background:var(--lc);min-width:2px}
.crv{text-align:right;font-variant-numeric:tabular-nums}
.crv b{font-size:15px;font-weight:700;color:var(--ink)}
.crv small{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}

/* ── composition bars with room to compare ───────────────────────────────
   Three tracks, the count inside the bar at the end of its own fill, and a
   real track behind it so the unfilled part reads too. The fill stops at 90%
   of the track so the largest count always has somewhere to sit. */
.ctbars.big .ctrow{grid-template-columns:minmax(0,1.05fr) minmax(88px,1.55fr) 48px;
  gap:13px;align-items:center;padding:3px 0}
/* Names wrap rather than truncate. "Active ingredient & class" and "Interactions
   & who should not take it" are the two biggest rows in this chart, and
   "Active ingr…" identifies neither of them. */
.ctbars.big .ctrow .nm{min-width:0;white-space:normal;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctbars.big .ctrow{padding:5px 0}
.ctbars.big .ctrow .ctrk{position:relative;width:auto;height:24px;border-radius:7px;
  background:var(--track);opacity:1;overflow:visible;box-shadow:inset 0 0 0 1px #241a1008}
.ctbars.big .ctrow .ctrk i{position:absolute;left:0;top:0;height:100%;border-radius:7px;
  width:calc(var(--w) * .9);min-width:3px;background:var(--bc);
  box-shadow:inset 0 -1px 0 #0000000f}
.ctbars.big .ctin{position:absolute;top:0;height:24px;display:flex;align-items:center;
  left:calc(var(--w) * .9 + 9px);font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ctbars.big .ctrow .rt{text-align:right;font-size:12.5px;font-weight:650;color:var(--body);
  font-variant-numeric:tabular-nums}
.ctbars.big .ctrow.me .ctrk{outline:none}
.ctbars.big .ctrow.me .ctrk i{box-shadow:inset 0 -1px 0 #0000001f,0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}

/* ── the matrix says zero ────────────────────────────────────────────────── */
.clgrid .gc.zero{background:var(--track);border-color:transparent;color:var(--faint);
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}

/* the Content/Social column gets the same treatment as the source type: the
   word, quietly, not an outlined badge. It is a column of a table, and every
   row has one, so it needs no chrome to be found. */
#sources .cols .fmtblock .fmtkind{border:0;background:none;border-radius:0;padding:0;
  text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.07em}
#sources .cols .fmtblock .fmtkind.con{color:var(--gold)}
#sources .cols .fmtblock .fmtkind.soc{color:var(--muted)}
.h2basis{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);flex-direction:column;
  align-items:flex-start;gap:5px}
.h2card{display:flex;flex-direction:column}

/* ══ v26: the donut's own caption ════════════════════════════════════════
   The hole holds the figure; the name of the slice sits under the ring, where
   a long taxonomy label has room. `.dcol` is the donut plus that caption, so
   the two stay a unit inside the flex row with the share list. */
.dcol{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px}
.dcap{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--body);white-space:nowrap}
.dcap i{width:8px;height:8px;border-radius:2px;flex:none}
.dcap span{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--faint)}
.dcentre .dv{font-size:27px}

/* the two number headers ran into each other once the citation bar's column
   was dropped: both right-aligned, 10px apart, reading "ANSWERS CITATIONS" */
@media(max-width:1240px){
  .srch,.srcr{column-gap:16px}
  .srch span:nth-child(6){padding-right:4px}
}

/* ══ v26: head-to-head — headline figures, no marks ══════════════════════
   Five figures across, two rows, names once on the left. The split bars are
   gone: a bar that renders 62.4 against 40.9 as a 60/40 fill invents a third
   quantity out of two that already said everything, and on average position it
   had to be drawn backwards to stay honest. */
/* The name column is 1.55fr, not 1.15fr. At 1.15 the entity column was 88px of
   usable width, which truncated a thirty-character client name to "Canadian C…"
   directly beside its own figures. The five figure columns hold short numbers
   and give the width up without crowding. */
.h2stats{display:grid;grid-template-columns:minmax(150px,1.55fr) repeat(5,minmax(0,1fr));
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.h2sh{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:0 10px 10px;line-height:1.35;cursor:default}
.h2sh em{display:block;font-style:normal;font-weight:500;letter-spacing:.02em;
  text-transform:none;font-size:10px;margin-top:2px}
.h2sc{padding-bottom:10px}
.h2sn{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px 9px 0;
  font-size:12.5px;font-weight:650;color:var(--body);border-top:1px solid var(--line)}
/* The row label in the figures table. At 88px of usable width this cut the
   client to "Canadian C…" beside its own numbers. Two lines, and the row grows
   to fit rather than the name being thrown away. */
.h2sn span{overflow:hidden;overflow-wrap:anywhere;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.h2sn .xs,.h2sn .emark{width:19px;height:19px;border-radius:5px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line);padding:1px}
.h2sn .emark{display:grid;place-items:center;font:700 8px var(--sans);color:var(--muted)}
/* The figure itself: the winner in ink, the other in the neutral the report
   uses for a rival everywhere else. Nothing is coloured green or red - being
   behind on one of five figures is not a status. */
.h2sv{padding:8px 10px 9px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.03em;
  color:var(--s-none);font-variant-numeric:tabular-nums;line-height:1.1}
.h2sv.win{color:var(--ink)}
.h2sv.none{color:var(--faint)}
.h2sv .na{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--faint);
  letter-spacing:0}
.h2basis{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  flex-direction:column;align-items:flex-start;gap:5px}
/* the lead-source panel is the report now, so it gets the full width back */
.h2topics{margin-top:var(--gap);border-top:0;padding:16px 18px}
.h2topics .h2trow{grid-template-columns:minmax(0,1.1fr) minmax(160px,2.4fr) 64px;gap:16px;padding:6px 0}
.h2topics .h2tn{white-space:normal;line-height:1.35}
@media(max-width:820px){
  .h2stats{grid-template-columns:minmax(96px,1fr) repeat(5,minmax(0,1fr))}
  .h2sh{font-size:9px;padding:0 6px 8px}
  .h2sv{font-size:18px;padding:7px 6px 8px}
}
@media(max-width:620px){
  .h2stats{grid-template-columns:1fr 1fr 1fr}
  .h2sc,.h2sn{grid-column:1/-1}
}

/* ══ v26: level two — one topic, from the inside ══════════════════════════
   The topic sits at the centre with its own visibility in it, and every
   question inside that topic is a mark on the shell: sized by how many brands
   the question surfaces at all, shaded from the neutral to the client's blue
   by how often the answers name the client. So a pale mark is a question the
   client is missing and a big pale mark is a crowded question they are missing,
   which is the whole reading. */
.tmc{cursor:pointer}
.tmcbg{fill:var(--elevated);stroke:var(--line-md);stroke-width:1.5}
.tmc:hover .tmcbg{stroke:var(--ink)}
.tmcv{fill:var(--ink);font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:var(--elevated);stroke-width:3px;stroke-linejoin:round}
.tmp{cursor:pointer}
.tmpr{fill:var(--card);stroke:none}
.tmpd{stroke:#241a1024;stroke-width:1}
.tmp.me .tmpd{stroke:var(--accent);stroke-width:2}
.tmp:hover .tmpd,.tmp.sel .tmpd{stroke:var(--ink);stroke-width:2.5}
.tml.pl{stroke:var(--s-none)}
.tml.pl.me{stroke:var(--accent)}
.tmapf i.pl0{background:#ddd5c6}
.tmapf i.pl1{background:#2b62d9}

/* the index, at level two: the questions themselves, which is the one place
   the full text of a prompt can be read without opening anything */
.tmixh span{margin-left:6px;font-weight:500;letter-spacing:.02em;text-transform:none;
  color:var(--faint)}
.tmix.pr{grid-template-columns:minmax(0,1fr);row-gap:4px;padding:8px 9px}
.tmixq{grid-row:1;grid-column:1;font-size:11.5px;font-weight:500;line-height:1.4;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tmixm{grid-row:2;grid-column:1;display:flex;align-items:center;gap:7px;font-size:11px;
  color:var(--faint);font-variant-numeric:tabular-nums}
.tmixm i{width:9px;height:9px;border-radius:3px;flex:none;border:1px solid #241a1024}
.tmixm b{font-size:12.5px;font-weight:700;color:var(--ink)}
.tmixm em{font-style:normal;margin-left:auto}
/* the number and its per-cent sign are one item, or the row's flex gap lands
   between them and prints "98.1 %" */
.tmixv{display:inline-flex;align-items:baseline}
.tmix.pr:hover .tmixq,.tmix.pr.on .tmixq{color:var(--ink)}
/* at level two the index is a list of questions, so it gets to scroll rather
   than making the card as tall as the longest topic in the taxonomy */
.tmbody .tmindex{max-height:540px;overflow-y:auto;overscroll-behavior:contain}
.tmbody .tmindex::-webkit-scrollbar{width:8px}
.tmbody .tmindex::-webkit-scrollbar-thumb{background:#241a1024;border-radius:4px}

/* the two moves between levels */
.tmfb.up{margin-right:2px}
.tmfb.go{background:var(--ink);border-color:var(--ink);color:var(--paper);
  display:inline-flex;align-items:center;gap:4px}
.tmfb.go:hover{background:#000;color:#fff}
.tmfb.go svg{width:12px;height:12px}
.tmfocus .tmfn b{font-weight:600;color:var(--body)}

/* ══ v27: the source network ══════════════════════════════════════════════
   The same sphere as the association map, with domains instead of brands. A
   source mark is its favicon inside a ring, and the RING carries the figure
   the map exists for: the share of that source's answers that name the client.
   A pale ring on a big mark is a page the engines read constantly while barely
   naming us, which is the one thing this report could not say before. */
.sms{cursor:pointer}
.smring{fill:var(--card);stroke-width:3.5}
.sms.sm2 .smring{stroke-width:3}
.smsel{fill:none;stroke:var(--ink);stroke-width:2;opacity:0}
.sms.sel .smsel{opacity:1}
.sms:hover .smsel{opacity:.4}
.sms image{filter:drop-shadow(0 1px 3px #241a1017)}
.sms.me .smring{stroke-dasharray:none}
/* the client's own property gets the halo the association map gives the brand */
.sms.me::before{content:none}
.sms.me .smsel{stroke:var(--accent);opacity:.55}

/* the hub at level two, when it is a topic rather than a source */
.tmcl2{fill:var(--ink);font-family:var(--display);font-size:17px;font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:var(--elevated);stroke-width:3px;stroke-linejoin:round}
.tmcl3{fill:var(--faint);font:700 7.5px var(--sans);letter-spacing:.11em;text-transform:uppercase}
.tmc.smc .tmcbg{fill:var(--card);stroke:var(--line-md)}

/* the network card carries the section's own spacing rather than the topic
   table's, and its index is a list of domains so it scrolls like the prompts one */
#src-net .tmap{margin-bottom:var(--gap)}
/* Superseded by the list-level scroller above: the panel itself no longer
   scrolls, so its controls stay put.

   ITS HEIGHT IS SET IN JS, and that is not laziness. The panel should be
   exactly as tall as the sphere beside it, but in a grid whose row is
   max-content each one sizes the other: stretch the panel to the row and the
   row grows to the panel, so a sixteen-row list makes itself fit by making the
   row taller. The sphere's own height is the only non-circular input, it is a
   fixed aspect ratio against a fluid column, and this component already
   measures and repaints on every resize. `fitPanel` reads it and sets it. */
#src-net .tmindex{max-height:none;overflow:visible}
#src-net .tmixn{font-family:var(--sans);font-size:12px}
#src-net .tmixn small{font-family:var(--sans)}

/* ══ v28: the source network is a window, not a panel ═════════════════════
   The report is cream editorial paper and the network is a hole cut in it.
   That is a deliberate break rather than a second theme: the sphere is the one
   place in the report you move a camera around inside, and a dark field is
   what makes depth legible - a star behind a mark, a link glowing through,
   a body lit from its own colour. Everything in this block is scoped to
   #srcmap so not one rule of it can leak into the cream sections.

   Colour does two jobs here and they are kept apart. The RING says what kind
   of source a body is, from the dark-surface palette validated in the script.
   The bright ARC over that ring says how much good it does us: the share of
   that source's answers naming the client. Collapsing the two would have lost
   the finding the map exists for. */
#srcmap{background:#14100c;border-color:#000;color:#efe7da;
  box-shadow:0 1px 2px #0000002e,0 18px 50px -20px #00000070}
#srcmap .cardh .eyebrow.gold{color:#e2b56a}
#srcmap .tmapk{color:#efe7da5c}
#srcmap .tmsvg{background:none;border-radius:12px;cursor:grab}
#srcmap .smfield{fill:#14100c}
#srcmap .smneb{pointer-events:none}
#srcmap .tmstars circle{fill:#fff6e4;pointer-events:none}
/* the filaments read as light rather than ink: round caps and a soft additive
   blend, so where two links cross they brighten instead of muddying */
#srcmap .tml{stroke-linecap:round;mix-blend-mode:screen}

/* topics are the frame the whole thing is read against, so they are the one
   thing on the field that is not coloured: a white anchor with a soft corona */
#srcmap .tmtcore{fill:#fff8ec;stroke:none}
#srcmap .tmtglow{fill:#ffe9c2;opacity:.13;stroke:none}
#srcmap .tmt:hover .tmtglow{opacity:.3}
#srcmap .tmt.sel .tmtcore{fill:#fff}
#srcmap .tmt.sel .tmtglow{opacity:.42}
#srcmap .tmtl.pick{pointer-events:auto;cursor:pointer}
#srcmap .tmtl.pick:hover .tmtn{fill:#fff}
/* THE TOPIC LABELS ARE THE FRAME THE WHOLE MAP IS READ AGAINST — a source's
   position only means anything relative to the topic it sits toward — and they
   were set two points smaller than the panel's body copy, on a dark plate, at
   the same weight as the source captions they have to dominate. 16px, and a
   heavier halo so they hold up where a bright mark passes behind one. */
#srcmap .tmtn{fill:#faf3e8;font-weight:700;font-size:16px;letter-spacing:-.008em;
  paint-order:stroke;stroke:#14100c;stroke-width:5px;stroke-linejoin:round}
#srcmap .tmtv{fill:#efe7da85;paint-order:stroke;stroke:#14100c;stroke-width:3.5px}

/* a source body: its own colour in the ring, its own colour in the corona */
#srcmap .sms .smring{fill:#1d1812;stroke:var(--sc);stroke-width:3.2}
#srcmap .sms.sm2 .smring{stroke-width:2.6}
#srcmap .sms .smglow{fill:var(--sc);opacity:.17;stroke:none}
#srcmap .sms:hover .smglow{opacity:.34}
#srcmap .sms .smrate{fill:none;stroke:#ffd27a;stroke-width:3.2;stroke-linecap:butt}
#srcmap .sms.sm2 .smrate{stroke-width:2.6}
#srcmap .sms .smsel{fill:none;stroke:#fff8ec;stroke-width:1.6;opacity:0}
#srcmap .sms.sel .smsel{opacity:.9}
#srcmap .sms:hover .smsel{opacity:.35}
#srcmap .sms.me .smglow{opacity:.34}
#srcmap .sms image{filter:none}
#srcmap .tmbg{fill:#2a2219;stroke:var(--sc);stroke-width:1}
#srcmap .tmbi{fill:#efe7da}

/* the hub at level two */
#srcmap .tmcbg{fill:#221b13;stroke:#efe7da3d;stroke-width:1.5}
#srcmap .tmcglow{fill:var(--sc,#ffe9c2);opacity:.14;stroke:none}
#srcmap .tmcl2,#srcmap .tmcv{fill:#fff8ec;stroke:#221b13}
#srcmap .tmcl3{fill:#efe7da7a}
#srcmap .tmhalo{fill:#ffd27a;opacity:.2}
#srcmap .tmring{stroke:#fff8ec;opacity:0}
#srcmap .tmb.sel .tmring{opacity:.9}

/* chrome on the dark surface */
#srcmap .tmctl button{background:#221b13;border-color:#efe7da26;color:#efe7dab8}
#srcmap .tmctl button:hover{background:#2e2519;border-color:#efe7da4d;color:#fff8ec}
#srcmap .tmctl button[aria-pressed="true"]{background:#efe7da;border-color:#efe7da;color:#14100c}
#srcmap .tmfocus{background:#221b13;color:#efe7dab8}
/* the dark card's own steps for the strip, the breadcrumb and the panel head */
#srcmap .tmcrumb span{color:#fff8ec}
#srcmap .tmcrumb i{color:#efe7da61}
#srcmap .tmapk{color:#efe7da96}
#srcmap .tmfocus{background:#ffffff0a}
#srcmap .tmfocus.idle{background:transparent;border-color:#efe7da26}
#srcmap .tmfi{color:#efe7da8f}
#srcmap .tmfs i{color:#efe7da7a}
#srcmap .tmfs b{color:#fff8ec}
#srcmap .tmfs.key b{color:#f0bd63}
#srcmap .tmfown{color:#f0bd63}
#srcmap .tmfico{background:#fffdf8;padding:1.5px}
#srcmap .tmixh{color:#efe7da7a}
#srcmap .tmfl{color:#fff8ec}
#srcmap .tmfv{color:#efe7dad1}
#srcmap .tmfn b{color:#f6ecdc}
#srcmap .tmfb{background:#2e2519;border-color:#efe7da2e;color:#efe7dad1}
#srcmap .tmfb:hover{background:#3a2f20;color:#fff8ec;border-color:#efe7da59}
#srcmap .tmfb.go{background:#e2b56a;border-color:#e2b56a;color:#14100c}
#srcmap .tmfb.go:hover{background:#f0c87e;color:#14100c}
#srcmap .tmfx{color:#efe7da7a}
#srcmap .tmfx:hover{color:#fff8ec}
#srcmap .tmapf{border-top-color:#efe7da1f;color:#efe7da7a}
#srcmap .tmapf i{background:#efe7da4d}
#srcmap .smkey{display:flex;flex-wrap:wrap;gap:6px 13px}
#srcmap .smkey span{display:inline-flex;align-items:center;gap:5px}
#srcmap .smkey i{width:8px;height:8px;border-radius:50%}
#srcmap .smarc i{width:9px;height:9px;border-radius:50%;background:none;
  border:2.5px solid #ffd27a;box-sizing:border-box}

/* the list beside the sphere */
#srcmap .tmixh{color:#efe7da70}
#srcmap .tmixh span{color:#efe7da52}
#srcmap .tmix:hover{background:#ffffff0f}
#srcmap .tmix.on{background:#ffffff17;border-color:#efe7da33}
#srcmap .tmixn{color:#f6ecdc}
#srcmap .tmixn small{color:#efe7da75}
#srcmap .tmix img,#srcmap .tmixph{background:#efe7da;border-color:#efe7da2e}
#srcmap .tmixph{color:#14100c}
#srcmap .tmixb{background:#ffffff14}
#srcmap .tmix.me .tmixn{color:#ffd27a}
#srcmap .tmindex::-webkit-scrollbar-thumb{background:#efe7da33}

/* ══ M3: what this build adds to the shared design ═════════════════════════
   Everything above this line is the house system, kept byte-identical to
   ~/aleve-dashboard so the two stay diffable. Everything below exists because
   of something true about THIS project. */

/* The "M3-owned" badge. Searchable files eleven of M3's own companies as rivals,
   so wherever one of them is ranked against the client it is marked. Text plus a
   gold edge, never colour alone, so it survives a greyscale print and any
   colour-vision deficiency. */
.fambadge{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
  border-radius:4px;padding:1px 5px;background:color-mix(in srgb,var(--gold) 9%,transparent);
  line-height:1.5;margin-left:6px}
.fd-nm .fambadge,.dgnm .fambadge{vertical-align:middle}
.rchips button.house{border-color:color-mix(in srgb,var(--gold) 42%,transparent)}
.rchips button.house[aria-selected="true"]{background:color-mix(in srgb,var(--gold) 12%,transparent)}
/* an M3 property the source feed classifies as a competitor domain */
.dom1.house{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,transparent)}

/* RUN BY RUN, the block that stands in for the hero's trend curve while every
   collection run is the same day. It sits inside the dark hero card, so it
   borrows the card's own light-on-ink tokens rather than the page's. */
.runstrip{margin-top:20px;padding-top:18px;border-top:1px solid #ffffff1f}
.rs-head{display:flex;align-items:baseline;gap:12px;margin-bottom:13px}
.rs-head .eyebrow{color:#ffffff8c}
.rs-note{margin-left:auto;font-size:11.5px;color:#ffffff6b}
.rs-rows{display:flex;flex-direction:column;gap:9px}
.rs-row{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) 64px;gap:14px;align-items:center}
.rs-t{font-family:var(--mono);font-size:11.5px;color:#ffffff8c;white-space:nowrap}
.rs-trk{height:9px;border-radius:5px;background:#ffffff14;overflow:hidden;min-width:0}
.rs-trk i{display:block;height:100%;border-radius:5px;background:#ffffff4d}
.rs-row.last .rs-trk i{background:var(--gold)}
.rs-row.last .rs-t{color:#fffdf8}
.rs-v{text-align:right;font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:#ffffffc7;font-variant-numeric:tabular-nums}
.rs-row.last .rs-v{color:#fffdf8}
.rs-v small{font-size:10px;font-weight:500;color:#ffffff6b;letter-spacing:0}
.rs-foot{margin-top:14px;font-size:11.5px;line-height:1.6;color:#ffffff6b;max-width:64ch}

/* the derived source findings: composed from the figures above them, so they
   are set as reading text rather than as another stat block */
.findlist{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.findlist p{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;
  color:var(--body);margin:0 0 14px;max-width:88ch}
.findlist p:last-child{margin-bottom:0}
.findlist .dot{flex:none;margin-top:8px}
.findlist b{font-weight:650;color:var(--ink)}

/* closing provenance + the verification result */
#foot{margin-top:56px;padding-top:26px;border-top:1px solid var(--line-md)}
.ftline{font-size:12.5px;line-height:1.75;color:var(--muted);margin-bottom:12px;max-width:96ch}
.ftline b{font-weight:650;color:var(--body)}
.ftline.ver{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--elevated)}
.ftline.k{font-size:11.5px;color:var(--faint)}
.ftline.k b{color:var(--muted)}

/* ── one-pull: the pictures that stand in for a history ────────────────────
   See the note above cellGrid() in dashboard.js. These two only render while
   the window holds fewer than three runs. */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9px,1fr));gap:3px;margin-top:14px}
.cg{aspect-ratio:1;border-radius:2px;background:var(--track);min-width:0}
.cg.on{background:var(--gold)}
.cg-x{display:flex;justify-content:space-between;gap:12px;margin-top:9px;
  font-size:10.5px;color:var(--faint);letter-spacing:.01em}

.sbar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:14px;background:var(--track)}
.sbar .sb{display:block;min-width:2px}
.sbkey{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.sbkey li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.sbkey li i{width:8px;height:8px;border-radius:2px;flex:none}
.sbkey li b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

/* the engine card's stat rows, where its sparkline sits once there is one */
.g-rows{display:flex;flex-direction:column;gap:0;margin-top:auto;
  border-top:1px solid var(--line);padding-top:2px}
.g-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.g-rows>div:last-child{border-bottom:0}
.g-rows span{font-size:11px;color:var(--faint);letter-spacing:.01em}
.g-rows b{font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── the engine cards inside the dark hero ────────────────────────────────
   Only while there is no series to draw. The cards keep their shape and
   swap to the card's own light-on-ink tokens; see the note in hero(). */
.hc-eng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px;
  padding-top:20px;border-top:1px solid #ffffff1f}
.hc-eng .gcard{background:#ffffff08;border:1px solid #ffffff1a;box-shadow:none;
  padding:14px 15px 4px;min-height:0}
.hc-eng .gcard:hover{background:#ffffff0f;border-color:#ffffff2e}
.hc-eng .gcard.on{background:#ffffff14;border-color:#ffffff47}
.hc-eng .g-top b{color:var(--onink);font-size:12.5px}
.hc-eng .g-dial{margin:2px auto 0}
.hc-eng .g-trk{stroke:#ffffff1f}
.hc-eng .g-mid b{color:var(--onink);font-size:23px}
.hc-eng .g-mid b small{color:var(--onink-3);font-size:11px}
.hc-eng .g-rows{border-top-color:#ffffff1a}
.hc-eng .g-rows>div{border-bottom-color:#ffffff14;padding:6px 0}
.hc-eng .g-rows span{color:var(--onink-3);font-size:10.5px}
.hc-eng .g-rows b{color:var(--onink-2);font-size:11.5px}
@media(max-width:980px){.hc-eng{grid-template-columns:1fr}}

/* ── the perception phrases ───────────────────────────────────────────────
   Quotations, not tags. Searchable's annotations run to whole clauses, and a
   pill around a seventy-character sentence is a lozenge, not a chip. */
.h2klist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.h2klist li{position:relative;padding:5px 0 5px 15px;font-size:12.5px;line-height:1.55;
  color:var(--body)}
.h2klist li:before{content:"";position:absolute;left:3px;top:12px;width:4px;height:4px;
  border-radius:50%;background:currentColor;opacity:.4}
.h2kgroup.pos .h2klist li:before{background:var(--pos);opacity:.75}
.h2kgroup.neg .h2klist li:before{background:var(--neg);opacity:.75}
.h2knote{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--muted)}
.h2knote b{color:var(--ink);font-weight:650}

/* ── the source map's lens control and its finding ────────────────────────
   Dark, because they sit in the galaxy panel beside the sphere. */
/* A DELIBERATE 2x2, not a wrap. Four buttons in a flex row broke 2-and-2 at the
   panel's width by accident, so the grouping a reader saw was a consequence of
   character counts. The label above says what they do; without it four bare
   verbs ("Most read", "Best for us") read as filters rather than orderings. */
.tmlensw{margin-bottom:10px}
.tmlensl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--onink-3);margin:0 0 6px 1px}
.tmlens{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tmlens button{font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.01em;
  padding:5px 9px;border-radius:7px;cursor:pointer;
  background:#ffffff0a;border:1px solid #ffffff1a;color:var(--onink-3)}
.tmlens button:hover{background:#ffffff14;color:var(--onink-2)}
.tmlens button[aria-pressed="true"]{background:#ffffff1f;border-color:#ffffff40;color:var(--onink)}
.tmlensn{margin:0 0 12px;font-size:11px;line-height:1.55;color:var(--onink-3);max-width:44ch}
.tmfind{display:block;width:100%;text-align:left;font:inherit;font-size:11.5px;line-height:1.55;
  color:var(--onink-2);background:#f0bd6314;border:1px solid #f0bd6338;border-radius:9px;
  padding:9px 11px;margin-bottom:14px;cursor:pointer}
.tmfind:hover{background:#f0bd631f;border-color:#f0bd6359}
.tmfind.flat{cursor:default;background:#ffffff08;border-color:#ffffff1a}
.tmfind b{color:var(--onink);font-weight:650}
.tmfindgo{display:block;margin-top:6px;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#f0bd63}
.tmfindgo::after{content:' \2192'}
.tmfind.flat .tmfindgo{display:none}

/* ══ v28: the claims layer ════════════════════════════════
   Its own block rather than reuse of the source tables, because it renders a
   different kind of thing: a quotation beside the passage that carried it. The
   report's other panels rank entities; this one shows evidence, and evidence
   needs reading width and a clear boundary between the two texts. */
.clpanel{padding:16px 18px 18px}
.clpanel .shead2{margin-bottom:12px}

/* the ladder, as one bar plus a key that says what each rung MEANS. The colours
   are the report's own registry: green for carried faithfully, red for the
   divergence, blue for the cross-language rung (a hue no other panel here uses,
   because it is a different kind of claim about a claim), gold for reworded. */
.clbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--track);gap:2px}
.clbar i{display:block;min-width:3px;border-radius:2px}
.clkey{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.clkrow{display:grid;grid-template-columns:10px minmax(150px,auto) minmax(0,1fr);gap:10px;
  align-items:baseline;font-size:12px}
.clkd{width:10px;height:10px;border-radius:3px;align-self:center}
.clkn{font-weight:650;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.clkn b{font-variant-numeric:tabular-nums;color:var(--body);font-weight:600}
.clkx{color:var(--faint);line-height:1.5}
@media(max-width:760px){
  .clkrow{grid-template-columns:10px minmax(0,1fr)}
  .clkx{grid-column:2}
}

/* THE TWO COVERAGE LIMITS. Panels, not footnotes: both of them make a negative
   result weaker than it looks, and a section reporting "23,421 claims ignored"
   without them overstates its own evidence. */
.cllim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);margin-top:var(--gap)}
@media(max-width:860px){.cllim{grid-template-columns:1fr}}
.clwarn{padding:14px 16px;border-left:3px solid var(--s-yellow)}
.clwarn b{display:block;font-size:13px;line-height:1.45;color:var(--ink);margin-bottom:6px}
.clwarn p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}

/* whose pages assert them, and what they are about */
.clorow{display:grid;grid-template-columns:minmax(0,1fr) 92px 58px 44px;gap:10px;align-items:center;
  padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.clorow:last-of-type{border-bottom:0}
.cloL{min-width:0;color:var(--body);display:flex;align-items:center;gap:8px}
.cloL{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clorow.me .cloL{color:var(--accent);font-weight:650}
/* ONE BAR, TWO FACTS: the total in the row's own hue at low strength, and the
   part that reached an answer drawn inside it at full. The reader sees how much
   was found and how much of it travelled as one mark instead of dividing two
   numbers in separate columns. */
.clobar{position:relative;height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.clobar i{position:absolute;left:0;top:0;height:100%;border-radius:4px;display:block}
.clobar i.tot{background:var(--hue);opacity:.3}
.clobar i.car{background:var(--hue);min-width:2px}
.clodot{width:8px;height:8px;border-radius:2px;flex:none}
.cloN{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink)}
.cloC{text-align:right;font-variant-numeric:tabular-nums;color:var(--s-yellow);font-weight:650}
.clnote{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--faint)}
.clnote b{color:var(--body);font-weight:650}
@media(max-width:560px){
  .clorow{grid-template-columns:minmax(0,1fr) 52px 40px}
  .clobar{display:none}
}

/* the evidence list — rows, not cards ═══════════════════
   Every claim used to be a bordered card about 150px tall, so twelve filled a
   screen and 368 were unreadable as a set. The evidence is a list of things
   that happened, and a list has to be scannable before it is legible: one line
   each, the rung as a dot, the claim as its own title, the source and engine as
   quiet metadata. The quotation and the passage that carried it open on the
   row rather than being printed 368 times. */
.evfilt{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}
.evfilt button{font:600 10px var(--sans);color:var(--muted);background:transparent;
  border:1px solid var(--line-md);border-radius:5px;padding:2px 7px;cursor:pointer;
  display:flex;gap:5px;align-items:center}
.evfilt button i{width:6px;height:6px;border-radius:50%;flex:none}
.evfilt button b{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:600}
.evfilt button:hover{color:var(--ink);border-color:#241a1045}
.evfilt button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.evfilt button[aria-pressed="true"] b{color:#ffffffa8}

.evlist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.evrow{border-bottom:1px solid var(--line)}
/* the row itself: one line, 34px, the whole thing a hit target */
/* CONDENSED. 34px a row with 8px of padding left too much air between one-line
   items: the list reads as a set, and a set wants its rows close enough to be
   scanned in one pass rather than travelled down. */
/* THE ROWS WERE INHERITING A CARD. `.clhead` is declared four times in this
   stylesheet and one of the earlier ones is a bordered card with `margin:12px
   0` - so every evidence row picked up 24px of margin, a background and a
   border that the later rule never overrode, because it only re-declared
   display and padding. That, not the padding, was the negative space. The list
   has its own namespace now so nothing else can reach it. */
.evrowh{display:grid;grid-template-columns:7px minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;text-align:left;background:none;border:0;margin:0;padding:3px 6px;cursor:pointer;
  font:inherit;min-height:24px;border-radius:0;box-shadow:none}
.evrowh:hover{background:var(--elevated)}
.evrowh[aria-expanded="true"]{background:var(--elevated)}
.evdot{width:7px;height:7px;border-radius:50%;background:var(--rc);flex:none}
.evtxt{font-size:12.5px;line-height:1.3;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evrowh[aria-expanded="true"] .evtxt{white-space:normal}
.evmeta{display:flex;align-items:center;gap:9px;flex:none;font-size:11px;color:var(--muted)}
/* the domain is the second thing a reader looks for after the claim, so it is
   read at body strength rather than at the weight of a caption */
.evsrc{display:flex;align-items:center;gap:5px;max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--body);font-weight:550}
.evsrc img{width:13px;height:13px;border-radius:3px;object-fit:contain;flex:none}
/* the engine is its logo now: a 64px column of repeated grey words became a
   mark the reader recognises without reading it */
.eveng{display:grid;place-items:center;width:18px;flex:none}
.evengl{width:14px;height:14px;border-radius:4px;object-fit:contain}
.evx,.evanch{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--line-md);border-radius:3px;padding:1px 4px;color:var(--muted)}
.evx{color:#2a78d6;border-color:#2a78d659}
@media(max-width:860px){
  .evsrc{max-width:110px}
}
@media(max-width:620px){
  .evsrc{display:none}
}

/* the row opens a page now, so it carries an affordance instead of a caret */
.evgo{display:grid;place-items:center;width:15px;height:15px;color:var(--faint);
  opacity:0;transition:opacity .12s}
.evgo svg{width:12px;height:12px}
.evrowh:hover .evgo,.evrowh:focus-visible .evgo{opacity:1}
mark{background:#f0bd6340;color:inherit;border-radius:2px;padding:0 1px}

/* ══ the claim drill-down ═════════════════════════════════
   A record gets a surface of its own. The point of the page is the
   confrontation: the page's wording and the answer's wording side by side with
   the shared span marked in both, so the rung is visible rather than asserted. */
.cvsub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
/* The numbered 01/02/03 markers are gone. A column of them down the left is
   the generated-template tell: the label stops being read and becomes a rail. */
.cvlabel{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px}

/* the rung as a CATEGORY chip beside the title, not as the title */
.cvtag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--rc) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.cvtag i{width:7px;height:7px;border-radius:50%;background:var(--rc);flex:none}
.cvtagn{color:var(--muted);font-size:11.5px;min-width:0}
.cvhero{padding:2px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
/* the claim in the DISPLAY face and a size that means it. It is the thing the
   page is about; setting it in the body face at 16px made it one more paragraph
   among the label blocks. */
/* no left rule either - it was the second vertical line down the same edge */
.cvq{margin:0;padding:14px 18px;border-radius:12px;background:var(--elevated);
  font-family:var(--display);font-size:17px;line-height:1.55;color:var(--ink);
  letter-spacing:-.014em;font-weight:500}
/* the answer is a different voice and reads as one: the engine's own words, in
   the body face on its own ground, against the page's words in the display face
   on the paper. The confrontation is the point of this screen. */
.cvq.ans{font-family:var(--sans);font-size:13px;font-weight:400;line-height:1.65;
  letter-spacing:0;border-left-color:var(--line-md);background:var(--elevated);
  padding:13px 15px;border-radius:0 10px 10px 0;color:var(--body)}
.cvside.ans .cvlabel span{color:var(--accent)}
.cvnone{margin:0;font-size:12.5px;color:var(--faint);font-style:italic}
.cvpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
@media(max-width:780px){.cvpair{grid-template-columns:1fr;gap:20px}}
.cvside{min-width:0}
.cvsrc{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.cvico{width:30px;height:30px;border-radius:8px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line);padding:4px}
.cvsrcb{min-width:0}
.cvsrcb b{display:block;font-size:13px;font-weight:650;color:var(--ink);line-height:1.4;
  margin-bottom:3px}
.cvurl{font-size:11.5px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line-md)}
.cvurl:hover{color:var(--ink)}
/* the facts as CHIPS. A column of label-over-value rows split by hairlines
   reads as a form; bordered, each carrying its own mark, they become things the
   eye lands on - and the two sides of the page then scan at one rhythm. */
.cvfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.cvf{display:grid;grid-template-columns:15px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:8px;row-gap:1px;align-items:center;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);min-width:0}
.cvfi{grid-row:1;display:grid;place-items:center;color:color-mix(in srgb,var(--rc) 70%,var(--faint))}
.cvfi svg{width:13px;height:13px}
.cvfl{width:14px;height:14px;border-radius:4px;object-fit:contain}
.cvf i{grid-row:1;font-style:normal;color:var(--faint);font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cvfv{grid-row:2;grid-column:2;font-size:12px;line-height:1.45;color:var(--ink);
  font-weight:600;min-width:0;overflow-wrap:anywhere}
/* the question is a sentence and wants the whole row */
.cvfacts .cvf:has(i:first-of-type){}
.cvf.wide{grid-column:1/-1}
/* the shared span, stated once as the literal evidence for the rung */
.cvspan{margin-top:18px;padding:12px 14px;border-radius:10px;background:var(--elevated);
  border:1px solid var(--line)}
.cvspan i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.cvspan code{font-family:var(--mono);font-size:12px;color:var(--ink);line-height:1.6}
.cvfoot{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:20px;padding-top:15px;
  border-top:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--faint)}
.cvfoot b{font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;margin-right:3px}

/* ══ v29: where the evidence is published ═════════════════
   A magnitude grid, not a map. Canada is 82% of the reading and the finding is
   in an 11% tail, so a map would spend its largest area on its least
   informative fact. Position here is a label with six values, which is what a
   reader reads off a map anyway.

   MAGNITUDE IS ONE HUE AND THAT HUE IS THE INK. Geography is not a source type,
   and the registry's rule is that a hue means exactly one thing - a blue cell
   here beside the blue `institutional` slice in the donut below would break it.
   Emphasis is carried by the callouts instead. */
.geop{padding:var(--pad-card);margin-top:var(--gap)}

/* Canada as CONTEXT, stated as its own bar so it is never compared by area with
   the grid underneath, which is deliberately scaled to the tail. */
.geoctx{margin-bottom:14px}
.geoctxbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--track);gap:2px}
.geoctxbar i{display:block;min-width:2px;border-radius:2px}
/* ONE HUE, and it is the ink — the same ramp the grid below uses. The parent
   build drew "Elsewhere" in var(--accent), which on this page is #2b62d9, four
   units away from the #4187d2 that means `institutional` in the source-type
   legend directly beneath it. Two blues, two meanings, one screen: exactly the
   collision this panel's own comment says a hue registry exists to prevent.
   Darkest is the segment the panel is about, which is emphasis carried by the
   ramp rather than by a second colour. */
.geoctxbar i.ca{background:#241a1052}
.geoctxbar i.un{background:#241a1021}
.geoctxbar i.off{background:var(--ink)}
.geoctxk{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:11px;color:var(--faint)}
.geoctxk span{display:flex;align-items:center;gap:6px}
.geoctxk i{width:8px;height:8px;border-radius:2px;flex:none}
.geoctxk i.ca{background:#241a1052}
.geoctxk i.un{background:#241a1021}
.geoctxk i.off{background:var(--ink)}
.geoctxk b{color:var(--body);font-weight:650;font-variant-numeric:tabular-nums}

.geofind{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:74ch}
.geofind b{color:var(--ink);font-weight:650}

.geogrid{display:grid;grid-template-columns:132px repeat(var(--cols),minmax(0,1fr));
  gap:3px;align-items:stretch}
.geoh{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);padding:0 0 5px;text-align:center;align-self:end;line-height:1.3}
.geoe{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:var(--ink);
  padding-right:10px;min-width:0}
.geoe span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geolg{width:17px;height:17px;border-radius:5px;object-fit:contain;flex:none}
/* the cell: a tinted plate carrying its own value. The tint is opacity on one
   ink, so a dense cell and a sparse one are the same colour at two strengths
   and nothing in the grid claims an identity it does not have. */
.geoc{position:relative;display:grid;place-items:center;min-height:42px;border-radius:7px;
  overflow:hidden;isolation:isolate}
.geoc i{position:absolute;inset:0;background:var(--ink);z-index:0}
.geoc b{position:relative;z-index:1;font-size:13px;font-weight:650;
  font-variant-numeric:tabular-nums;color:var(--ink);mix-blend-mode:normal}
/* No text flip, and that is the point: the tint ramp is capped below the band
   where ink-on-plate and paper-on-plate both fail 4.5:1, so one ink serves every
   cell at 5.13:1 or better. The version this replaces selected on a substring of
   the inline opacity, which worked by luck on the values this cut happens to
   produce and would have failed silently on the next. */
.geoc.nil{background:var(--track)}
/* the two cells the data picked out, ringed rather than recoloured: the ring is
   a second channel, so the magnitude hue keeps meaning only magnitude */
.geoc.call{box-shadow:inset 0 0 0 2px var(--gold)}
@media(max-width:820px){
  .geogrid{grid-template-columns:96px repeat(var(--cols),minmax(0,1fr));gap:2px}
  .geoh{font-size:8.5px}
  .geoe{font-size:11px;gap:6px}
  .geoc{min-height:36px}
  .geoc b{font-size:11.5px}
}

/* Orion's callout pills, attached to the cells the data picked and placed under
   the grid where they cannot cover it */
.geocall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);margin-top:14px}
@media(max-width:760px){.geocall{grid-template-columns:1fr}}
.geocallr{display:grid;grid-template-columns:17px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:9px;row-gap:3px;align-items:center;padding:11px 13px;border-radius:10px;
  background:var(--elevated);border:1px solid var(--line)}
.geocallr .geolg{grid-row:1}
.geocn{grid-row:1;font-size:12.5px;color:var(--body)}
.geocn b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-right:5px}
.geocx{grid-row:2;grid-column:2;font-size:11px;line-height:1.5;color:var(--faint)}

/* ══ v29: reading against naming ══════════════════════════
   A flow rather than a rate bar, because the finding is the RELATIONSHIP
   between volume and conversion and a rate bar shows only the conversion. Band
   height is how much is read; where the band goes is what it produced.

   Two channels, two meanings: the left column keeps the source-type hues the
   rest of the report uses (colour follows the entity), and the ribbons carry
   the outcome instead, so nothing has to read a rainbow to see which way the
   volume went. */
.flowp{padding:var(--pad-card);margin-top:var(--gap)}
.flowsvg{width:100%;height:auto;display:block;margin:4px 0 2px;overflow:visible}
/* the ribbons: the ones that produced a mention carry the accent, the rest a
   recessive neutral. Deliberately low-alpha so overlaps read as denser rather
   than as a different colour. */
.flowrib path{stroke:none}
.flowrib path.on{fill:var(--accent);fill-opacity:.42}
.flowrib path.off{fill:var(--ink);fill-opacity:.09}
.flowrib path:hover{fill-opacity:.62}
.flowl text,.flowo text{font-family:var(--sans)}
.flown{font-size:11.5px;font-weight:650;fill:var(--ink)}
.flowv{font-size:10.5px;fill:var(--faint);font-variant-numeric:tabular-nums}
/* the hairline that carries an evenly-spaced label back to its proportional
   band; recessive by design - it is a pointer, not data */
/* the leader lines are gone: with a minimum band height every label sits on
   its own band and there is nothing left to point at */
.flowband{stroke:var(--card);stroke-width:1}
.flowo rect.on{fill:var(--accent)}
.flowo rect.off{fill:var(--ink);fill-opacity:.22}
.flowon{font-size:11.5px;font-weight:650;fill:var(--ink)}
.flowov{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .flown{font-size:10px}
  .flowv,.flowov{font-size:9.5px}
  .flowon{font-size:10px}
}

/* ══ v29: the brands M3 owns, read against named ══════════
   A diverging bar because the finding IS the divergence: a brand that is read
   and named sits balanced, and the two failure modes fall off opposite ends.
   Two bars side by side would show the same numbers and leave the reader to
   compute the difference.

   Both hues are already learned. Ink-neutral is volume of reading, as in the
   source panels; gold has meant "answers naming the client" since the source
   map's arc. Nothing new is introduced for a panel about the relationship
   between two things already on screen elsewhere. */
.hbp{padding:var(--pad-card);margin-top:var(--gap)}
/* the hub: the holding company the eleven belong to, stated once at the top so
   the rows below read as its brands rather than as a second rival list */
.hbhub{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--elevated);border:1px solid var(--line);margin-bottom:14px}
.hbhubi{width:26px;height:26px;border-radius:7px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line);padding:3px}
.hbhubn{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.hbhubn small{display:block;font-size:11px;font-weight:500;color:var(--faint);letter-spacing:0}

.hbkey{display:flex;gap:18px;margin-bottom:8px;font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.hbkey span{display:flex;align-items:center;gap:6px}
.hbkey i{width:9px;height:9px;border-radius:2px;flex:none}
.hbkey i.hbl,.hbbar i.hbl{background:#241a1052}
.hbkey i.hbr,.hbbar i.hbr{background:var(--s-yellow)}

.hbrows{display:flex;flex-direction:column}
.hbrow{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(140px,240px) 34px;
  gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.hbrow:last-child{border-bottom:0}
.hbn{display:flex;align-items:center;gap:8px;min-width:0}
.hbn img,.hbph{width:18px;height:18px;border-radius:5px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line)}
.hbn b{font-size:12.5px;font-weight:650;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hbv{font-size:12px;font-variant-numeric:tabular-nums;color:var(--body);font-weight:650}
.hbv.l{text-align:right}
.hbv.r{text-align:left;color:var(--gold-deep)}
/* the bar is centred: reading grows left, naming grows right, and a balanced
   brand is symmetrical about the middle */
.hbbar{position:relative;display:flex;height:7px;align-items:stretch}
.hbbar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;
  background:var(--line-md)}
.hbhalf{flex:0 0 50%;display:flex;min-width:0}
.hbhalf.l{justify-content:flex-end;padding-right:1px}
.hbhalf.r{justify-content:flex-start;padding-left:1px}
.hbbar i{display:block;border-radius:2px;min-width:0}
.hbbar i.hbl{border-radius:2px 0 0 2px}
.hbbar i.hbr{border-radius:0 2px 2px 0}
@media(max-width:700px){
  .hbrow{grid-template-columns:minmax(0,1fr) 30px minmax(90px,1fr) 30px;gap:7px}
  .hbn b{font-size:11.5px}
}

/* one tooltip per source type, and the whole type lights with it */
.flowsvg [data-t]{transition:opacity .12s}
.flowsvg [data-t].dim{opacity:.32}

/* ══ a rail whose cells use the width ════════════════════
   The four head-to-head cells sat at their natural width and left two thirds of
   the strip empty. Putting the rival chips in that gap was tried and reverted:
   six chips carrying real company names do not fit a third of a strip, so they
   wrapped into four ragged rows and the selected one lost its own name.

   The cells spread across the strip instead, which is what the empty space was
   actually asking for. */
.srail.wide{justify-content:space-between}
.srail.wide>div{flex:1;min-width:0}
.srail.wide>div:last-child{flex:0 0 auto;padding-right:0}

/* a claim headline is a sentence, not a two-word title, so it needs sentence
   setting: smaller, tighter leading, and room to run to two lines */
.mask .modal-head h3:has(+ .msub .cvsub),
.modal-head:has(.cvsub) h3{font-size:18px;line-height:1.4;font-weight:600;
  letter-spacing:-.018em;max-width:62ch}

/* ══ prompts: the narrow columns sit under their headings ═
   The header and the rows already shared one grid template, so the columns
   never drifted - but every cell was left-aligned inside its track, which left
   a Branded pill, three engine marks and a flag stranded at the left edge of
   tracks up to 224px wide, reading as though they belonged to the column
   before. Text columns stay left (a sentence is read from its start); the
   short, fixed-shape ones centre under their own heading. */
.prow>:nth-child(2),.prow>:nth-child(4),.prow>:nth-child(5){justify-self:center;text-align:center}
.prow.prhead>:nth-child(2),.prow.prhead>:nth-child(4),.prow.prhead>:nth-child(5){text-align:center}
.prow>:nth-child(4){display:flex;justify-content:center}

/* ── the verdict colours the claim page ───────────────────
   The rung used to be a 7px dot in a chip and nothing else, so a claim the
   answer had repeated word for word and one where it had substituted a
   different figure were the same cream screen. The hue now runs through the
   page, which makes it mean what it means in the ladder and the list. */
.cvbody{--rc:var(--line-md)}
.cvbody .cvq{background:color-mix(in srgb,var(--rc) 9%,var(--card));
  border-left:3px solid var(--rc);border-radius:0 12px 12px 0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 18%,transparent)}
.cvbody .cvlabel{color:color-mix(in srgb,var(--rc) 62%,var(--muted))}
.cvbody .cvspan{border-color:color-mix(in srgb,var(--rc) 24%,transparent);
  background:color-mix(in srgb,var(--rc) 5%,var(--elevated))}
.cvbody .cvspan code{color:color-mix(in srgb,var(--rc) 70%,var(--ink))}
/* the answer keeps its own voice and its own colour: it is the engine talking,
   not the page, and the accent is what this report spends on the client's
   presence in an answer */
.cvbody .cvq.ans{background:var(--elevated);border-left-color:var(--accent);
  box-shadow:none;border-radius:0 10px 10px 0}
.cvbody .cvside.ans .cvlabel{color:var(--accent)}
.cvbody .cvfoot b{color:var(--rc)}

/* ── topics: shed slots before clipping them ──────────────
   With the columns finally resolved together, the only overflow left is honest
   arithmetic: 14 + 140 + 172 + 62 + nine 30px slots + gaps needs 782px and the
   card has less than that under about 1150. Something has to give, and a
   scrollbar was the wrong answer - it is what put a half-logo against the card
   edge in the first place.

   So the RANKS GO FROM THE RIGHT, which is where the least information is: #9
   is the ninth-most-mentioned brand on a topic. The slot column is max-content,
   so hiding the trailing cells shrinks it by exactly what they occupied and the
   grid re-resolves on its own. The header labels go with them, so the table
   never shows a "#8" with nothing under it. */
@media(max-width:1320px){
  .trslot-h:nth-child(n+8),.trslots .slot:nth-child(n+8){display:none}
  .trank{--tcols:14px minmax(130px,1fr) 150px 58px max-content}
}
@media(max-width:1150px){
  .trslot-h:nth-child(n+6),.trslots .slot:nth-child(n+6){display:none}
  .trank{--tcols:14px minmax(112px,1fr) 128px 52px max-content}
  .trhead,.trmain,.trprompt{gap:9px}
}
@media(max-width:1010px){
  .trslot-h:nth-child(n+5),.trslots .slot:nth-child(n+5){display:none}
}


/* ══ claims rail: tiles with a tinted mark ═══════════════
   Four counts of four different kinds of thing - pages fetched, sentences
   extracted, claims that travelled, pages that landed one - read as one series
   in a plain rail, which invites subtracting across them. The puck gives each
   tile an identity of its own. It identifies the TILE and encodes no value,
   which is why four unrelated hues are legitimate here and would not be on a
   chart. */
/* four across, not flex-wrapped. With a puck each the tiles no longer fit a
   flex row and broke 3 + 1, which reads as though the fourth belongs to
   something else. */
/* FOUR ACROSS ONLY WHEN FOUR FIT. The breakpoint was 980px, which on this
   client put four cells into 704px of rail — 176px each for labels that need up
   to 315px ("3,345 retrieved, 626 blocked or empty", "in 147 claim-and-answer
   pairings") — and every cell's caption ran straight through its neighbour. The
   captions are composed from the figures, so their length is a property of the
   data and not something a fixed breakpoint can know in advance.

   So: the caption wraps rather than overflowing, the cells get a real minimum,
   and the grid drops to two columns when four of that minimum will not fit.
   auto-fit does the arithmetic instead of a guessed pixel value. */
#rail-claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:12px 0}
#rail-claims>div:first-child{padding-left:0}
#rail-claims .clbody i,#rail-claims .clbody small{white-space:normal;overflow-wrap:anywhere}
@media(max-width:560px){#rail-claims{grid-template-columns:1fr}}
.cltile{flex-direction:row!important;align-items:center;gap:11px!important}
.clpuck{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;
  color:var(--ph);background:color-mix(in srgb,var(--ph) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ph) 24%,transparent)}
.clpuck svg{width:16px;height:16px}
.clbody{display:flex;flex-direction:column;gap:2px;min-width:0}
@media(max-width:760px){.clpuck{display:none}}

/* The count badge on a claim carried into more than one answer. Quiet: the
   quote is what the reader is scanning, the multiplier is the aside. */
.evn{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--faint);
  background:var(--track);border-radius:5px;padding:2px 5px;flex:none;cursor:default;
  font-variant-numeric:tabular-nums}

/* The claims caveats, set apart from the lede that precedes them: they qualify
   every figure in the section and must not read as more prose. */
.clcav{display:block;margin-top:9px;padding-left:11px;border-left:2px solid var(--line);
  color:var(--faint);font-size:12px;line-height:1.6}
.clcav b{color:var(--muted);font-weight:650}
.clcav em{font-style:normal;font-weight:650;color:var(--muted)}

/* ── WHO OWNS WHICH NUMBER, IN COLOUR ─────────────────────────────────────
   Ported from ~/citc-associates-dashboard. The head-to-head table set the
   winning figure in ink and the loser in grey, which says WHICH number is
   bigger but not WHOSE, so a reader had to keep matching rows back to the
   names at the left. Gold is the client everywhere else in this report and the
   rival takes the accent blue; both are already in the palette, so nothing new
   is introduced here, they are only used.

   The tints are 6% and the text colours are the full-strength tokens, which
   keeps every cell well clear of the ink-over-paper contrast dead band. */
.h2stats .h2sn.me{box-shadow:inset 3px 0 0 var(--gold)}
.h2stats .h2sn.them{box-shadow:inset 3px 0 0 var(--accent)}
.h2stats .h2sn{padding-left:11px}
.h2stats .h2sv.win.me{color:var(--gold-deep);font-weight:680;background:#a66a120e}
.h2stats .h2sv.win.them{color:var(--accent);font-weight:680;background:#2b62d90e}
.h2stats .h2sv.me,.h2stats .h2sv.them{transition:background .12s}
.h2head .h2ent.me b{color:var(--gold-deep)}
.h2head .h2ent.them b{color:var(--accent)}
.h2head .h2ent.me .h2logo,.h2head .h2ent.me img{box-shadow:0 0 0 2px #a66a1233}
.h2head .h2ent.them .h2logo,.h2head .h2ent.them img{box-shadow:0 0 0 2px #2b62d933}
/* the rival picker: the chosen rival wears the colour it is drawn in below */
#rivalpick button[aria-pressed="true"],#rivalpick .on{box-shadow:inset 0 -2px 0 var(--accent)}

/* The gap, on the client's row only, with its direction. Not a significance
   claim -- no test has been run on these figures -- just which way and by how
   much, so a reader does not have to subtract two numbers in their head. */
.h2sv .h2d{display:block;margin-top:3px;font-size:11px;font-weight:600;font-style:normal;
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.h2sv .h2d.up{color:#0b6b48}
.h2sv .h2d.down{color:#a32c2c}
.h2sv .h2d.level{color:var(--faint);font-weight:500}

/* An engine that never cited the client's own site says so in the negative
   colour: it is a finding, not a blank. */
.gcard .g-rows b.g-never{color:#a32c2c;font-weight:600}

/* ══ THE CLAIMS LIST AND THE CLAIM SCREEN ═════════════════════════════════
   Brought over from ~/citc-associates-dashboard with the markup that uses it.
   The list is one line per CLAIM rather than per claim-and-answer pairing, and
   the screen sets the page's words beside the answer's instead of stacking
   them, which is the only reason to open a claim at all.

   The rules below are taken verbatim and carry no comments: the first attempt
   to lift them sliced whole top-level constructs by brace depth, which picked
   up comment OPENERS whose closers belonged to the previous construct. The
   result balanced its braces and still commented out every rule that followed
   one, so  never reached the browser and the question row rendered as a
   953px box around a 929px chevron. Comments are stripped before extraction
   now, which removes the whole class of fault. */
.clsrc{display:inline-block;margin-top:10px;font-size:11.5px;color:var(--accent);text-decoration:none}
.clsrc:hover{text-decoration:underline}
.clcols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:34px;margin-top:32px;
  padding-top:26px;border-top:1px solid var(--line)}
.clcols{grid-template-columns:1fr;gap:30px}
.clcols{gap:26px}
@media(max-width:1020px){ .clcols{grid-template-columns:1fr;gap:30px} }
@media(max-width:900px){ .clcols{gap:26px} }
.clcols{grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:12px;margin-top:12px}
.clcols>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:16px 18px 14px}
.clcols .ctrow{grid-template-columns:minmax(206px,0.55fr) 1fr 54px 46px;gap:12px}
.card,.clcols>div,#sources .cols>div,.fmtblock,.clsection,.dg,#overview .dg,.h2kside{padding:var(--pad-card)}
.bento,.digest,.cols,.clcols,.h2known,.bx-eng,.kpis,.shelf{gap:var(--gap)}
.card,.clsection,.clhead,.panel2,.fmtblock,.clexp,.clcols{margin-top:var(--gap)}
.clcols>div{margin-top:0}
.clfilt{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.clfilt button{font:600 11.5px var(--sans);color:var(--muted);background:var(--card);
  border:1px solid var(--line-md);border-radius:7px;padding:5px 10px;cursor:pointer;
  display:flex;gap:6px;align-items:baseline}
.clfilt button b{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:600}
.clfilt button:hover{color:var(--ink);border-color:#241a1045}
.clfilt button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.clfilt button[aria-pressed="true"] b{color:#ffffffb8}
.clsrc{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;min-width:0}
.clico{width:16px;height:16px;border-radius:4px;object-fit:contain;flex:none}
.clfilt button{display:inline-flex;align-items:center;gap:6px}
.clfilt button i{width:8px;height:8px;border-radius:2px;background:var(--rc,var(--s-none));flex:none}
.cllist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.clrow{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--rc,var(--line-md));
  border-radius:var(--r-lg);padding:11px 13px}
.clrow:hover{border-color:var(--line-md);border-left-color:var(--rc,var(--line-md));
  box-shadow:var(--lift)}
.clrq{display:block;font-size:13.5px;line-height:1.55;color:var(--ink)}
.clrq mark{background:color-mix(in srgb,var(--accent) 16%,transparent);color:inherit;
  border-radius:3px;padding:0 1px}
.clrf{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;color:var(--muted)}
.clrd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clscreen{display:flex;flex-direction:column;gap:18px}
.clsq{padding:16px 18px;background:var(--elevated);border-radius:var(--r-lg)}
.clsq blockquote{margin:9px 0 12px;font:400 17px/1.6 var(--display);color:var(--ink);
  letter-spacing:-.01em}
.clsq blockquote mark{background:color-mix(in srgb,var(--accent) 18%,transparent);color:inherit;
  border-radius:3px;padding:0 2px}
.clslno{margin:0;font-size:12px;color:var(--muted);line-height:1.55}
#cl-evidence .clrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:11px;width:100%;text-align:left;padding:9px 12px;
  border:0;border-radius:8px;background:none;cursor:pointer;font:inherit;
  border-bottom:1px solid var(--line)}
#cl-evidence .clrow:last-child{border-bottom:0}
#cl-evidence .clrow:hover{background:var(--surface)}
#cl-evidence .clrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.clpip{width:7px;height:7px;border-radius:50%;background:var(--rc,var(--muted));flex:none}
#cl-evidence .clrq{font-size:13px;line-height:1.5;color:var(--body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#cl-evidence .clrf{display:flex;align-items:center;gap:7px;flex:none;
  font-variant-numeric:tabular-nums}
#cl-evidence .clrd{font-size:11.5px;color:var(--muted);max-width:170px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cl-evidence .clrx{font-size:10.5px;font-weight:650;color:var(--faint);
  padding:1px 5px;border-radius:999px;background:var(--track)}
#cl-evidence .clre{display:flex;align-items:center;gap:3px}
@media(max-width:820px){ #cl-evidence .clrd{display:none} }
.clsdef{font-size:12px;color:var(--muted);line-height:1.45}
.clscreen .clsq{margin:0 0 18px;padding:14px 16px;border-radius:10px;
  background:var(--elevated);border-left:3px solid var(--rc,var(--gold))}
.clscreen .clsq blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.clcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;
  padding-top:16px;border-top:1px solid var(--line)}
.clcol .eyebrow{margin-bottom:11px}
.clshare{margin-top:20px;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--elevated)}
.clshare code{display:block;margin-top:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.6;color:var(--ink);word-break:break-word}
.clsfoot2{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:18px;padding-top:13px;
  border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.clsfoot2 b{color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:860px){ .clcols{grid-template-columns:minmax(0,1fr);gap:20px} }
.clq2{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:
  "k k" "t m";gap:4px 18px;align-items:center;width:100%;margin-top:20px;
  padding:15px 18px;border:1px solid var(--line-md);border-radius:12px;
  background:var(--surface);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .12s,background .12s}
.clq2:hover{border-color:var(--accent);background:var(--card)}
.clq2:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.clq2k{grid-area:k;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.clq2t{grid-area:t;font-size:15.5px;line-height:1.45;font-weight:600;color:var(--ink);
  letter-spacing:-.008em}
.clq2:hover .clq2t{color:var(--accent)}
.clq2m{grid-area:m;display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--muted)}
.clq2m em{font-style:normal;font-size:11.5px}
.clq2m img{width:15px;height:15px;border-radius:3px}
.clq2m svg{width:15px;height:15px;color:var(--faint)}
.clq2:hover .clq2m svg{color:var(--accent)}
.clscreen .clsq{margin-bottom:6px}
.clcols{padding-top:18px}
@media(max-width:640px){ .clq2{grid-template-areas:"k k" "t t" "m m"} }
.clsrcrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:11px;margin-top:10px;padding:11px 13px;border:1px solid var(--line-md);
  border-radius:11px;background:var(--surface);text-decoration:none;
  transition:border-color .12s,background .12s}
.clsrcrow:hover{border-color:var(--gold);background:var(--card)}
.clsrcm img,.clsrcm .emark{width:22px;height:22px;border-radius:5px}
.clsrct{min-width:0}
.clsrct b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clsrct em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clsrcgo{width:14px;height:14px;color:var(--faint);flex:none}
.clsrcrow:hover .clsrcgo{color:var(--gold-deep)}
.clfacts{margin:14px 0 0;display:grid;gap:0}
.clfact{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:14px;
  align-items:baseline;padding:8px 2px;border-top:1px solid var(--line)}
.clfact:last-child{border-bottom:1px solid var(--line)}
.clfact dt{margin:0;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.clfact dd{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink)}
.clbyline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line-md)}
.clby-e{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink)}
.clby-e b{font-weight:600}
.clby-e img{width:16px;height:16px;border-radius:4px}
.clby-r{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:999px;background:var(--track)}
.clby-a{font-size:11px;padding:2px 9px;border-radius:999px;cursor:help;
  border:1px solid transparent}
.clby-a.said{color:#0b6b48;background:#0e8a6d16;border-color:#0e8a6d2e}
.clby-a.inferred{color:var(--muted);background:var(--track);border-style:dashed;
  border-color:var(--line-md)}
.clansq{margin:13px 0 0;padding:0;font-size:14px;line-height:1.65;color:var(--body);
  max-width:62ch}
.clansq mark,.clansq .clhit{background:#a66a1226;color:var(--ink);border-radius:2px;padding:0 1px}
.clansq{font-size:14.5px;line-height:1.68;color:var(--ink);max-width:60ch;
  overflow-wrap:anywhere}
.clansq mark,.clansq .clhit{background:#a66a1226;color:var(--ink);border-radius:2px;
  padding:0 2px;box-shadow:0 0 0 1px #a66a1220}
.clurlchip{display:inline;font-size:11.5px;color:var(--muted);
  background:var(--track);border-radius:4px;padding:1px 5px;margin:0 1px;
  font-variant-numeric:tabular-nums;word-break:break-all}
.clchrome{display:inline;font-size:11.5px;color:var(--faint);background:var(--track);
  border-radius:5px;padding:2px 6px;margin-right:3px;cursor:help;
  overflow-wrap:anywhere;line-height:1.9}

/* ── NOT A CARD INSIDE A CARD ─────────────────────────────────────────────
   Ported from ~/citc-associates-dashboard. The topics table sat in a bordered,
   shadowed panel inside a section that already carries a stat rail above it, so
   the page read as a box holding a box. It is a flat table on the page's own
   paper now, the way the Sources table is: one rule under the header, hairlines
   between rows, nothing drawn around the outside. */
#topic-tbl.trank{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#topic-tbl .trhead{background:none;border-bottom:1px solid var(--line-md)}
#topic-tbl .trow{border-bottom:1px solid var(--line)}
#topic-tbl .trow:last-child{border-bottom:0}
#topic-tbl .trhead,#topic-tbl .trmain,#topic-tbl .trprompt{padding-left:4px;padding-right:4px}
#topic-tbl .trmain:hover{background:var(--surface);border-radius:8px}

/* ── the geography panel, made legible ───────────────────────────────────
   Three complaints, all the same complaint: a reader could not tell what the
   panel was asking, and the parts that would have told them were the faintest
   things on it.

   THE COLUMN HEADERS WERE 9.5px UPPERCASE AT `--faint`. They are the only
   labels that say which country a column is, on the panel whose entire subject
   is which country — set at the weight of a footnote. They are ink now, and
   the United States column is marked as the one the finding is about rather
   than left to be found by reading five numbers.

   THE CONTEXT BAR GETS THE COLOUR. Magnitude inside the grid stays a single
   ink ramp — a hue there would collide with the source-type registry, which is
   the fault this panel already had once. But the bar above it is not magnitude,
   it is three named categories, and gold is this report's emphasis colour
   everywhere else. "Elsewhere" is what the panel is about, so it is the one
   that carries it. */
.geoq{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted);max-width:70ch}
.geoq b{color:var(--ink);font-weight:650}

.geoh{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;
  color:var(--body);padding:0 0 7px;text-align:center;align-self:end;line-height:1.3}
.geoh.lead{color:var(--gold-deep)}

.geoctxbar{height:12px}
.geoctxbar i.ca{background:#241a1052}
.geoctxbar i.un{background:#241a1017}
.geoctxbar i.off{background:var(--gold)}
.geoctxk{font-size:11.5px;color:var(--muted)}
.geoctxk i.ca{background:#241a1052}
.geoctxk i.un{background:#241a1017}
.geoctxk i.off{background:var(--gold)}
.geoctxk b{color:var(--ink)}

/* the callout pair, tinted to the side they speak for */
.geocallr{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.geocallr:first-child{background:#a66a1208;border-color:#a66a1226}
.geoc.call{box-shadow:inset 0 0 0 2px var(--gold)}

/* ── the claims ladder, as a ranked graph ────────────────────────────────
   Replaces a stacked bar that shared the class  with this report's
   filter strips, so the strip's padding and flex-wrap collapsed every segment
   to zero height: colour and width intact, nothing drawn. */
.phero.crt .img{width:212px;height:150px;padding:0}
.phero.crt .img img{width:100%;height:100%;object-fit:cover}
.crt{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:left;
  font:inherit;color:inherit;padding:0;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:box-shadow .13s,border-color .13s}
.crt:hover{border-color:#241a1033;box-shadow:0 3px 12px #241a1014}
.crt .img{position:relative;aspect-ratio:16/10;background:var(--elevated);display:grid;place-items:center;overflow:hidden}
.crt .img img{width:100%;height:100%;object-fit:cover}
.crt .spon{position:absolute;top:8px;right:8px;font-size:10px;font-weight:650;padding:2px 7px;border-radius:5px;
  background:#fffdf8e6;color:var(--muted);border:1px solid var(--line)}
.crt .b{padding:12px 14px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.crt .adv{font-size:11.5px;color:var(--muted)}
.crt .nm{font-size:13.5px;font-weight:650;line-height:1.35;letter-spacing:-.012em}
.crt .bd{font-size:12px;color:var(--muted);line-height:1.5;flex:1}
.crt .tags{display:flex;gap:5px;flex-wrap:wrap}
.crt .mt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.crt .mt b{color:var(--ink)}
.crt .mt .k{color:var(--faint)}
.prod:focus-visible,.crt:focus-visible,.adrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{ .shead,.shead2,.hero,.kpis,.panel2,.pcard,.prod,.crt,.trow,.pr,.wavechart{break-inside:avoid} .panel2,.prod,.crt,.trank,.panel{box-shadow:none!important;border-color:#0003} }
.clladder{display:flex;flex-direction:column;gap:7px}
.clladder{display:flex;flex-direction:column}
.crstep{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;
  background:color-mix(in srgb,var(--lc) 16%,var(--card));color:var(--ink);
  font:700 10px var(--sans);font-variant-numeric:tabular-nums}
.crn{font-size:12.5px;font-weight:650;color:var(--ink);letter-spacing:-.012em;min-width:0}
.crn small{display:block;font-size:10.5px;font-weight:500;color:var(--faint);
  letter-spacing:0;margin-top:1px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crt{height:14px;border-radius:7px;background:var(--track);overflow:hidden}
.crt i{display:block;height:100%;border-radius:7px;background:var(--lc);min-width:2px}
.crv{text-align:right;font-variant-numeric:tabular-nums}
.crv b{font-size:15px;font-weight:700;color:var(--ink)}
.crv small{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}
.clladder{display:flex;flex-direction:column;gap:4px}
.clrungrow{display:grid;grid-template-columns:22px minmax(120px,190px) minmax(0,1fr) 78px;
  gap:12px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;
  background:transparent;border:1px solid transparent;border-radius:9px;padding:8px 10px;
  cursor:pointer}
.clrungrow:hover{background:var(--elevated);border-color:var(--line)}
.clrungrow.on{background:color-mix(in srgb,var(--lc) 10%,transparent);border-color:var(--lc)}
.crstep{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,var(--lc) 16%,transparent);color:var(--lc);
  font:700 11px var(--sans);font-variant-numeric:tabular-nums}
.crn{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.crt{display:block;height:11px;border-radius:6px;background:var(--track);overflow:hidden}
.crt i{display:block;height:100%;border-radius:6px;background:var(--lc);min-width:3px}
.crv{display:flex;align-items:baseline;gap:6px;justify-content:flex-end;
  font-variant-numeric:tabular-nums}
.crv b{font:650 15px var(--sans);color:var(--ink);letter-spacing:-.02em}
.crv small{font-size:11px;color:var(--muted)}
.clladk{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}
@media(max-width:760px){ .clrungrow{grid-template-columns:22px minmax(0,1fr) 64px;gap:9px} .clrungrow .crt{grid-column:1/-1} }

/* The claims rail is a plain strip like the others now; its bespoke tile and
   coloured puck are gone. `auto-fit` stays because these captions are composed
   from figures and their length is a property of the data. */
#rail-claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px 0}
#rail-claims .rcell{display:flex;flex-direction:column;gap:3px;padding:1px 22px;position:relative;min-width:0}
#rail-claims .rcell:first-child{padding-left:0}
#rail-claims .rcell+.rcell:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
#rail-claims .rcell i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);white-space:normal}
#rail-claims .rcell b{font-size:19px;font-weight:650;letter-spacing:-.018em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
#rail-claims .rcell small{font-size:10.5px;color:var(--faint);line-height:1.4;overflow-wrap:anywhere}

/* the single-brand form of "the brands the client owns" */
.hbone{margin:2px 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:74ch}
.hbone b{color:var(--ink);font-weight:650}
.hbsolo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:22px;align-items:center;
  padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.hbsolon{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.hbsolon img{width:24px;height:24px;border-radius:6px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line);padding:2px}
.hbsolon b{font-size:14.5px;font-weight:700;color:var(--ink)}
.hbsolon em{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--faint)}
.hbsolof{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
.hbsolof b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.hbsolof i{font-style:normal;font-size:10.5px;color:var(--faint)}
.hbonek{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:74ch}
@media(max-width:700px){.hbsolo{grid-template-columns:1fr;gap:12px}
  .hbsolof{align-items:flex-start;flex-direction:row;align-items:baseline;gap:8px}}

/* ── the geography matrix and its callouts, second pass ──────────────────
   Every explanatory paragraph is off the panel. What remains has to carry the
   argument on its own, so the type does the work the prose was doing.

   THE COUNTRY HEADERS ARE THE POINT OF THE TABLE and were set smaller than its
   cell values. 15px, ink, and the United States column — the one the finding is
   about — in gold at the same size as the numbers beneath it. */
.geoh{font-size:15px;font-weight:650;letter-spacing:-.012em;text-transform:none;
  color:var(--ink);padding:0 0 9px;text-align:center;align-self:end;line-height:1.25}
.geoh.lead{color:var(--gold-deep);font-weight:750}

/* The cell tint is per column (see cell()), so the ink columns read against
   themselves. The US column is gold, which is the only hue in the grid and is
   the second channel: WHICH column matters. */
.geoc i{background:var(--ink)}
.geoc.us i{background:var(--gold)}
.geoc b{font-size:14.5px}
.geoc.us b{color:var(--gold-deep);font-weight:750}
.geoc{min-height:48px}

/* THE CALLOUTS: a logo, a number, two words. */
.geocall{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:18px}
.geocallr{display:flex;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:default}
.geocallr.lead{background:#a66a120f;border-color:#a66a1238}
.geocallg{width:44px;height:44px;border-radius:11px;object-fit:contain;flex:none;
  background:var(--card);border:1px solid var(--line);padding:5px}
.geocallv{font-family:var(--display);font-size:46px;font-weight:600;letter-spacing:-.035em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.geocallv i{font-style:normal;font-size:22px;opacity:.5;margin-left:1px}
.geocallr.lead .geocallv{color:var(--gold-deep)}
.geocalll{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:650;
  color:var(--ink);line-height:1.2;min-width:0}
.geocalll em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--faint)}
@media(max-width:820px){.geocall{grid-template-columns:1fr}
  .geocallv{font-size:38px}.geocallg{width:36px;height:36px}}

/* ── the claim screen, scaled up ─────────────────────────────────────────
   It had drifted to UI sizes — 10px labels, 12.5px values, 16px marks — on a
   full-screen surface whose whole job is to set two pieces of TEXT side by side
   and let a reader compare them. Everything here is reading matter, so it is
   sized as reading matter: the two passages lead, the labels that frame them
   step down from 10px to 11px, and every mark roughly doubles. */
.clscreen .clico{width:26px;height:26px;border-radius:7px}
.clsrcrow{padding:13px 15px}
.clsrcm img,.clsrcm .emark{width:34px;height:34px;border-radius:9px}
.clsrct b{font-size:15.5px;line-height:1.4}
.clsrct em{font-size:12px;margin-top:3px}

.clfacts{margin:18px 0 0}
.clfact{grid-template-columns:minmax(110px,32%) minmax(0,1fr);gap:16px;padding:10px 0}
.clfact dt{font-size:11px;letter-spacing:.06em}
.clfact dd{font-size:14.5px;line-height:1.45;font-weight:500}

.clbyline{gap:10px;margin-top:13px}
.clby-e{font-size:15px;gap:8px}
.clby-e img{width:24px;height:24px;border-radius:6px}
.clby-e b{font-weight:650}
.clby-r{font-size:12px;padding:3px 9px}
.clby-a{font-size:12px;padding:3px 11px}

/* the two passages: the reason the screen exists */
.clansq{font-size:17px;line-height:1.72;max-width:64ch;margin-top:16px}
.clansq mark,.clansq .clhit{background:#a66a1233;padding:1px 2px;border-radius:3px}

.clscreen .clcols{gap:40px;margin-top:26px;padding-top:24px}
.clcol .eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:14px}

.clq2{padding:18px 20px;margin-top:26px}
.clq2k{font-size:11px;letter-spacing:.06em}
.clq2t{font-size:18.5px;line-height:1.4;font-weight:650}
.clq2m em{font-size:12.5px}
.clq2m img{width:19px;height:19px;border-radius:4px}
.clq2m svg{width:18px;height:18px}

.clshare{margin-top:24px;padding:15px 17px}
.clshare code{font-size:13.5px;line-height:1.7;margin-top:9px}
.clsfoot2{font-size:13px;gap:8px 30px;margin-top:22px;padding-top:16px}
.clsfoot2 b{font-size:14.5px}

/* A topic no mapped source specialises in: dimmed, with the reason on the face
   of it. Two of this project's eight sit like this, and without the note an
   unconnected node reads as a rendering fault. */
#srcmap .tmtl.unlinked .tmtn{fill:#efe7da7a}
#srcmap .tmtu{fill:#efe7da5c;font-size:10.5px;font-style:italic;
  paint-order:stroke;stroke:#14100c;stroke-width:4px;stroke-linejoin:round}



/* ── Standing: four readings of one leaderboard ───────────────────────────
   Ported from the sibling build that established it. The four are a row of
   equal cards rather than a dropdown: a control that shows one at a time
   makes the comparison cost a click, and the comparison IS the finding. */
.stbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 var(--gap)}
.stb{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:12px 13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);cursor:pointer;font:inherit;color:inherit;min-width:0}
.stb:hover{border-color:var(--line-md)}
.stb[aria-pressed="true"]{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--lift)}
.stb-l{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);line-height:1.35}
.stb-r{font:650 27px/1 var(--display);letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:2px}
/* THE RANK IS GREEN ONLY WHERE IT IS REALLY FIRST. A shared rank is not a lead,
   and on the unbranded reading nesto is level with RBC on exactly 30 answers -
   so the winning colour is withheld from a tie rather than awarded to whichever
   name the sort happened to print first. */
.stb.win .stb-r{color:var(--pos)}
.stb-v{font-size:11.5px;color:var(--body);font-variant-numeric:tabular-nums}
.stb-w{font-size:11px;color:var(--muted);line-height:1.4}
@media(max-width:1000px){ .stbar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .stbar{grid-template-columns:minmax(0,1fr)} }

.sthead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 9px}
.sthead span{font:650 14px var(--display);letter-spacing:-.015em;color:var(--ink)}
.sthead em{font-style:normal;font-size:11.5px;color:var(--muted)}
table.stt{width:100%}
table.stt tr.me{background:color-mix(in srgb,var(--accent) 5%,transparent)}
table.stt td.w,table.stt th.w{width:38px;text-align:right;color:var(--faint);
  font-variant-numeric:tabular-nums}
table.stt .sttie{font-style:normal;color:var(--gold);margin-left:1px}
.stn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.stn b{font-weight:650}
/* What was folded into a row, ON the row. A corrected figure whose correction
   is invisible is an assertion; naming the members lets a reader check it
   against the column to its left. */
.stfold{font-style:normal;font-size:10.5px;color:var(--muted);
  border-left:2px solid var(--line-md);padding-left:7px;line-height:1.35}
.stfold.house{border-left-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold-deep)}
.stbarr{display:block;height:7px;border-radius:4px;background:var(--track);overflow:hidden;min-width:60px}
.stbarr i{display:block;height:100%;border-radius:4px;min-width:2px}

.stnotes{margin-top:var(--gap)}
.stlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.stlist li{font-size:12.5px;line-height:1.5;padding-left:11px;border-left:2px solid var(--line-md)}
.stlist li b{font-weight:650;color:var(--ink)}
.stlist .k{color:var(--muted);font-size:11.5px}
.stwhy{display:block;color:var(--body);font-size:11.5px;line-height:1.55;margin-top:2px}
.stwhy.warn{color:var(--gold-deep)}
.stun li{border-left-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.stfoot{font-size:11.5px;line-height:1.6;color:var(--muted);margin:12px 0 0}
/* The sentence that keeps this report reconcilable with the client's own
   screen. It is set apart because it is a scope statement, not a finding. */
.stwarn{margin:var(--gap) 0 0;padding:10px 13px;background:var(--elevated);
  border-radius:var(--r-lg);font-size:12px;line-height:1.55;color:var(--body)}

/* The section's argument, composed from its own figures. Same role as the
   source map's finding button: a sentence that states something actionable and
   takes you to the view that shows it. Not a lede - the design suppresses
   those, and rightly: a paragraph under a heading is what a reader skips. */
.stfind{display:block;width:100%;text-align:left;font:13px/1.65 var(--sans);color:var(--body);
  background:color-mix(in srgb,var(--gold) 7%,var(--card));
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  border-radius:var(--r-lg);padding:13px 16px;margin:0 0 var(--gap);cursor:pointer;
  box-shadow:var(--lift)}
.stfind:hover{background:color-mix(in srgb,var(--gold) 12%,var(--card));
  border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.stfind b{color:var(--ink);font-weight:700}


/* ── Which market the evidence describes ─────────────────────────────────
   Ported from the sibling build. Two readings of the same citations:
   where the publisher is, and what country's rules the page states. */
.mkbars{display:flex;flex-direction:column;gap:7px}
.mkrow{display:grid;grid-template-columns:minmax(120px,168px) minmax(0,1fr) 52px 62px;
  gap:12px;align-items:center}
.mkl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--body);min-width:0}
.mkl i{width:9px;height:9px;border-radius:3px;flex:none}
.mkb{display:block;height:9px;border-radius:5px;background:var(--track);overflow:hidden}
.mkb i{display:block;height:100%;border-radius:5px;min-width:2px}
.mkn{font:650 13px var(--sans);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.mkc{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.mkfind{margin:14px 0 0;padding:11px 13px;background:color-mix(in srgb,var(--warn) 8%,transparent);
  border-radius:var(--r-lg);font-size:12.5px;line-height:1.6;color:var(--body)}
.mkfind b{color:var(--ink);font-weight:700}
/* The correction, set apart from the finding above it. It is the reason this
   panel exists in this shape, so it reads as method and not as a caveat. */
.mksplit{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mkwhy{margin:7px 0 10px;font-size:12px;line-height:1.6;color:var(--muted);max-width:92ch}
.mksl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mksl li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
.mksld{display:flex;align-items:center;gap:7px}
.mksld b{font-weight:650;color:var(--ink)}
.mksl .k{color:var(--muted)}
.mksl .k b{color:var(--ink);font-weight:650}
.mkeng{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}
.mke{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--body)}
.mke b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.mkel{font-size:11.5px;color:var(--muted)}
.mkpill{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--line);color:var(--muted)}
.mkpill.sm{padding:1px 6px;letter-spacing:.04em}
.mkpill.ca{background:#2b62d91f;color:#2b62d9}
.mkpill.us{background:#c42b2b1f;color:#c42b2b}


/* ── the geography grid's home column ────────────────────────────────────
   Canada is in the table now, and it is not on the foreign columns' tint
   scale (see dashboard.js). The header says which column is the home market
   so the two scales are not read as one, and the cells are set in the ink
   ramp rather than the gold that marks the column the finding is about. */
.geoh.home{color:var(--ink)}
.geoh.home::after{content:'home market';display:block;font-size:9.5px;font-weight:600;
  letter-spacing:.04em;text-transform:none;color:var(--faint);margin-top:1px}
.geoc.home i{background:var(--ink)}
.geoc.home b{color:var(--ink)}
/* The home column is separated from the foreign ones by a rule rather than by
   a gap, because a gap at this width reads as two tables. */
.geogrid .geoh.home,.geogrid .geoc.home{border-right:1px solid var(--line-md)}


/* ══ opportunities ══════════════════════════════════════════════════════
   The one section that says what to do next rather than what happened, and the
   only one whose rows are a TO-DO list. It is a ranked list with a picture over
   it, and a topic opens its own screen the way a prompt or a claim does: the
   six cards it replaces were open on the page and ran to five screens of detail
   nobody had asked for yet. */
.oppmap{padding:18px 20px 10px;margin-bottom:14px}
.oppsvg{width:100%;height:auto;display:block;overflow:visible}
.oppax{stroke:var(--line-md);stroke-width:1}
.oppiso{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-opacity:.3;stroke-dasharray:4 5}
.oppisot{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--gold);
  fill-opacity:.65;font-variant-numeric:tabular-nums}
.oppt{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.oppal{font-family:var(--sans);font-size:11.5px;font-weight:650;fill:var(--muted)}
.oppdot{cursor:pointer}
.oppdot circle{stroke-width:1.5;transition:filter .12s}
/* a paper ring, so two discs that touch still read as two discs */
.opphalo{fill:none;stroke:var(--card);stroke-width:3}
.oppdot:hover circle,.oppdot:focus-visible circle{filter:brightness(1.08)}
.oppdot:hover circle{stroke-width:3}
.oppdot:focus-visible{outline:none}
.oppdot:focus-visible circle{stroke:var(--ink);stroke-width:3}
.oppn{font-family:var(--display);font-size:14px;font-weight:700;pointer-events:none}
/* the chart's own key, one line, in place of a paragraph under it */
.oppkey{display:flex;flex-wrap:wrap;gap:6px 22px;margin:2px 0 0;padding-top:11px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.oppkey span{display:inline-flex;align-items:center;gap:8px}
.oppkey i{flex:none}
.oppkey .k-size{width:14px;height:14px;border-radius:50%;background:var(--line-md);
  box-shadow:0 0 0 1px var(--line-md)}
.oppkey .k-iso{width:18px;height:0;border-top:1.5px dashed var(--gold);opacity:.6}
.oppkey .k-nudge{width:16px;height:9px;border-radius:999px;background:var(--line-md);
  box-shadow:5px 0 0 -1px var(--line-md)}

/* ── the ranked list ──────────────────────────────────────────────────── */
.oprow{display:grid;grid-template-columns:minmax(0,3fr) 116px 74px 86px 112px 24px;
  gap:14px;align-items:center}
.ophead{padding:0 12px 9px;color:var(--ink)}
.ophead span:not(:first-child){text-align:right}
.ophead span:last-child{text-align:center}
.oplist{border-top:1px solid var(--line)}
.op{padding:13px 12px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .12s}
.op:hover{background:var(--surface)}
.op:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.opnm{display:flex;align-items:center;gap:12px;min-width:0}
.opdot{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--display);font-size:13px;font-weight:700;color:#fbf5ea;font-style:normal;
  box-shadow:inset 0 0 0 1px #241a1024}
/* The badge's ink is set inline from the RANK, not from the row's position:
   sorting the list by another column moves the rows and must not move a
   colour. */
.opnm b{font-size:15.5px;font-weight:650;letter-spacing:-.012em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op:hover .opnm b{color:var(--accent)}
.oplev{display:flex;align-items:center;gap:10px}
.oplev i{flex:1;height:8px;border-radius:4px;min-width:2px}
.oplev b{flex:none;width:28px;text-align:right;font-family:var(--display);font-size:16px;
  font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.opv{text-align:right;font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.opv small{font-size:11.5px;font-weight:500;color:var(--faint);letter-spacing:0}
.opgo{display:grid;place-items:center}
.opgo svg{width:17px;height:17px;color:var(--faint)}
.op:hover .opgo svg{color:var(--accent)}
.expbar .cnt{font-size:12px;color:var(--faint);line-height:1.5;max-width:64ch}

/* ── one topic, as its own screen ─────────────────────────────────────── */
.modal-opp .opplev{display:inline-flex;align-items:baseline;gap:7px;padding:5px 13px;
  border-radius:999px;background:var(--oc);color:#fbf5ea;font-size:12px;font-weight:650;
  letter-spacing:.03em;text-transform:uppercase}
.modal-opp .opplev b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;
  text-transform:none;font-variant-numeric:tabular-nums}
.oppscreen .oppstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px 20px;
  padding:0 0 22px;border-bottom:1px solid var(--line);margin:0}
.oppstat dt{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px;line-height:1.3}
.oppstat dd{margin:0;font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.oppstat dd small{font-size:15px;color:var(--faint);font-weight:500}
.oppna{font-family:var(--sans);font-size:14px;font-style:normal;font-weight:500;color:var(--faint);
  letter-spacing:0;border-bottom:1px dashed var(--line-md)}
.oppcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:24px}
.oppcol .eyebrow{margin-bottom:14px}
.oppsub+.oppsub{margin-top:24px}
.oppsubk{display:flex;align-items:baseline;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.oppsubk b{margin-left:auto;font-family:var(--display);font-size:17px;font-weight:650;
  letter-spacing:-.02em;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
.oppsubk b small{font-size:12px;color:var(--faint);font-weight:500}
.oppqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.oppqs li{border-top:1px solid var(--line)}
.oppqs li:last-child{border-bottom:1px solid var(--line)}
.oppqs button{display:flex;align-items:baseline;gap:14px;width:100%;padding:13px 4px;border:0;
  background:none;font:inherit;text-align:left;cursor:pointer}
.oppqs button:hover{background:var(--surface)}
.oppqs button span{flex:1;min-width:0;font-size:16px;line-height:1.42;font-weight:550;color:var(--ink)}
.oppqs button:hover span{color:var(--accent)}
.oppqs button em{flex:none;font-style:normal;font-size:12.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.opplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.opplist li{display:flex;align-items:baseline;gap:12px;font-size:15px;color:var(--body)}
.opplist li span{flex:1;min-width:0}
.opplist li b{font-variant-numeric:tabular-nums;color:var(--ink)}
.oppsrcs{display:flex;flex-wrap:wrap;gap:8px}
.oppsrc{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;
  border:1px solid var(--line-md);background:var(--card);font-size:14px;color:var(--ink);cursor:help}
.oppsrc img{width:19px;height:19px;border-radius:5px;object-fit:contain;background:#fff}
.oppph{width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
  background:var(--elevated);font-size:8.5px;font-weight:700;color:var(--muted)}
.oppsrc b{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:650;font-size:13px}
/* a source read on this topic that has never once named the practice: the most
   actionable state on the screen, so it is marked rather than left to a hover */
.oppsrc.silent{border-style:dashed;border-color:var(--gold);background:#a66a1210}
.oppmark{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.oppmark i{flex:none;width:15px;height:15px;border-radius:999px;border:1px dashed var(--gold);
  background:#a66a1210}
@media(max-width:1000px){
  .oprow{grid-template-columns:minmax(0,2fr) 104px 70px 84px 100px 22px;gap:10px}
  .opnm b{font-size:14.5px}
}
@media(max-width:820px){
  .oprow{grid-template-columns:minmax(0,1fr) 84px 76px 22px}
  .ophead span:nth-child(3),.ophead span:nth-child(5),
  .op .opv:nth-of-type(1),.op .opv:nth-of-type(3){display:none}
  .oppscreen .oppstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .oppcols{grid-template-columns:minmax(0,1fr);gap:28px}
}


/* A topic the client already leads: the Behind column has nothing to report, and
   the word is set quiet so it reads as an absence rather than as a score. */
.op .opv.ahead{color:var(--pos);font-weight:650;font-size:12.5px;cursor:default}

/* ── opportunities: what the market published, and the pages to write ─────
   BOTH LISTS ARE `clsrcrow`, the row the claim screen already uses for a cited
   page. They had their own markup and their own type scale, which made the one
   new thing on the screen the only thing on it that did not look like the rest
   of the report. What is left here is the little that genuinely differs: the
   rows stack instead of carrying a top margin each, and each one gains a
   measure at its right edge. */
.oppgl,.oppbl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.oppgl .clsrcrow,.oppbl .clsrcrow{margin-top:0;width:100%}
/* The published-page row is the house row plus a measure, so four columns. The
   brief row has no measure — it is a page that does not exist yet — so it keeps
   the house three. Declaring four on both left an empty 0px track on every
   brief and pulled its chevron a column inboard of the one above it. */
.oppgrow{grid-template-columns:auto minmax(0,1fr) auto auto}
.oppbrow{grid-template-columns:auto minmax(0,1fr) auto;
  text-align:left;font:inherit;color:inherit;cursor:pointer}
/* THE MARKS IN THESE TWO LISTS MUST BE ONE SIZE. `.clico` is 16px on the claim
   screen and 26px inside `.clscreen`, and this modal carries neither scope, so
   the favicon came out at its 22px `.clsrcm img` rule while the emark fell
   through to something else entirely — 34px against the 22px count beside it,
   two lists that are meant to read as one. Pinned here for both. */
.oppgrow .clsrcm,.oppgrow .clsrcm img,.oppgrow .clsrcm .emark,.oppgrow .clico{
  width:22px;height:22px;border-radius:5px;font-size:9px}
/* The measure at the right: what kind of page it is, over how many of this
   topic's answers carried it. */
.oppgn{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;line-height:1.2}
.oppgn i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.oppgn b{font-size:12.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.oppgn b small{font-size:11px;font-weight:500;color:var(--faint)}
/* A page that does not exist yet has no favicon, so its mark is the number of
   answers the question was asked in. Same 22px square as the marks beside it. */
.oppbn{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;flex:none;
  background:#a66a1218;color:var(--gold-deep);font:700 11.5px/1 var(--sans);
  font-variant-numeric:tabular-nums}
/* THE TITLE WRAPS HERE AND DOES NOT ON THE CLAIM SCREEN, and the difference is
   deliberate. There, the row is a LINK to the page a claim came from and its
   title is a label on it — one line, ellipsised, is right. Here the title IS
   the content: the whole point of the list is what the market called the thing
   it published, and "Bank of Canada Interest Rate Explained and How It Shap…"
   answers the question worse than not showing it. Twenty of the rows on this
   project's topics were being cut. Two lines, then ellipsis.

   The line under it — the URL, or which pages answer a question today — keeps
   the single-line rule, because that one is a label. */
.oppgrow .clsrct b,.oppbrow .clsrct b{white-space:normal;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oppbrow .clsrct b{font-size:13.5px;line-height:1.4}
/* The mark and the chevron sit on the first line of a title that now wraps,
   rather than floating in the middle of a two-line row. */
.oppgrow,.oppbrow{align-items:start}
.oppgrow .clsrcm,.oppbn,.oppgrow .clsrcgo,.oppbrow .clsrcgo,.oppgn{margin-top:1px}

.oppfmt{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--faint)}
.oppfmt b{color:var(--muted);font-weight:650}
@media(max-width:640px){
  .oppgrow,.oppbrow{grid-template-columns:auto minmax(0,1fr) auto}
  .oppgn{display:none}
}