/* 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}
.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);overflow:hidden;box-shadow:var(--shadow)}
.trhead{display:flex;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--elevated)}
.trhead .th-t{flex:1;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{display:flex;align-items:center;padding:10px 16px;cursor:pointer;gap:11px}
.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)}
.trname{font-size:13.5px;font-weight:600;letter-spacing:-.008em}
.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)}
.trspacer{flex:1}
.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}
.trprompt{display:flex;align-items:center;padding:8px 16px 8px 40px;gap:11px;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;max-width:44ch;cursor:pointer}
.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{width:172px;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{width:62px;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{width:172px;flex:none;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)}
.trp{width:62px;flex:none;text-align:right;margin-right:16px;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;
}
.wrap{max-width:1320px}

/* ── 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}
.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 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-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}
.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}
.h2ent b{font-size:17px;font-weight:700;letter-spacing:-.02em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.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. */
.h2stats{display:grid;grid-template-columns:minmax(118px,1.15fr) 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)}
.h2sn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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}
#srcmap .tmtn{fill:#f6ecdc;font-weight:700;font-size:13px;
  paint-order:stroke;stroke:#14100c;stroke-width:4px;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}

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

   THREE OF THE RULES DIRECTLY BELOW ARE UPSTREAM FIXES, ported from the parent
   build's 2026-09-17 commit c6e65fb. They are not nesto-specific and they are
   defects on every sibling on this template: a section rail that cannot fit
   four cells on a line, a topics table whose badges stagger down the column,
   and an empty standings slot drawn as a filled grey disc. They sit under this
   banner rather than above it only because the shared files here have not been
   rebased onto that commit; fold them back up on the next rebase. */

/* ── UPSTREAM FIX 1: the value may wrap, the rail may not ────────────────
   `white-space:nowrap` on the value made "Behind Royal Bank of Canada · 2.6 pts"
   an unbreakable cell, so a four-cell rail could not fit on one line and
   flex-wrap broke it into a ragged three-plus-one with a divider stranded under
   the first column. All four rails in this report were doing it. The cells
   shrink and the long ones take a second line instead. */
.srail{flex-wrap:nowrap}
.srail>div{flex:0 1 auto}
.srail b{white-space:normal;line-height:1.28;align-items:flex-start}
.srail b img{margin-top:1px}
@media(max-width:900px){ .srail{flex-wrap:wrap} }

/* ── UPSTREAM FIX 2: the topics table is a grid, not a row of floats ─────
   .trmain was a flex line - chevron, name, badge, spacer, visibility, prompts,
   slots - so the badge sat wherever the name happened to end. A one-line topic
   name put "Leading" at one x-position and a two-line name put it at another,
   and down the column the standings staggered. The header did not line up with
   any of it either, because it had four cells against the rows' seven.

   One grid, declared once, used by the header, the topic rows and the prompt
   rows underneath them. */
/* THE LAST COLUMN IS A LENGTH, NOT `max-content`, and that is not a style
   preference. Ported verbatim from upstream it declared `max-content` for the
   engine slots - and this build's rows carry a `.trspacer` the upstream rows do
   not, so with the spacer removed the six children land on the six tracks and
   the `1fr` name column absorbs every remaining pixel BEFORE the max-content
   track is sized. The slots resolved to 0px while their content measured 246,
   and the rank marks painted 169px outside the card.

   `minmax(108px,max-content)` fixes it: the minimum is a real length, so the
   track can no longer collapse to nothing however the `1fr` behaves, and the
   maximum still lets it grow with the number of brands a topic surfaced. The
   table is inside `.scroll` and is meant to scroll sideways when the marks
   outrun the card - what it is not meant to do is paint them past its edge. */
.trhead,.trmain,.trprompt{display:grid;
  grid-template-columns:13px minmax(150px,1fr) 104px 150px 62px minmax(108px,max-content);
  gap:11px;align-items:center}
.trhead{padding:9px 16px}
.trmain{padding:10px 16px}
.trprompt{padding:8px 16px}
.trhead .th-t{flex:none}
.trmain .trspacer,.trprompt .trspacer{display:none}
.trbadge{margin-left:0;justify-self:start;white-space:nowrap}
.trname{align-self:center}
.trp{margin-right:0}
.trprompt .trptext{grid-column:2/4;max-width:none}
.trprompt .trslots{grid-column:6;justify-self:start}
.trmain .trslots,.trhead .trslots{justify-self:start}
.trprompt .trbadge{grid-column:4}
@media(max-width:1100px){
  .trhead,.trmain,.trprompt{grid-template-columns:13px minmax(90px,1fr) 96px 132px 52px minmax(102px,max-content);
    gap:9px}
}

/* ── UPSTREAM FIX 3 ──────────────────────────────────────────────────────
   An empty slot is the absence of a brand, not a missing datum: it should read
   as space with a rule around it, not as a grey disc waiting to be filled. */
.slot.empty{background:none;box-shadow:inset 0 0 0 1px #241a100f}
/* an empty map caption should take no room rather than reserve a line */
#srcmap .tmapk:empty{display:none}

/* 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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body);
  display:flex;align-items:center;gap:7px}
.clorow.me .cloL{color:var(--accent);font-weight:650}
.clobar{height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.clobar i{display:block;height:100%;border-radius:3px;background:var(--s-none)}
.clorow.me .clobar i{background:var(--accent)}
.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 */
.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}
.clist{display:flex;flex-direction:column;gap:12px}
.clitem{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:var(--card)}
.clih{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:9px}
.clrung{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--rc)}
.clrung i{width:8px;height:8px;border-radius:50%;background:var(--rc);flex:none}
.clx,.clianch{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-md);border-radius:4px;padding:2px 5px;color:var(--muted)}
.clx{color:#2a78d6;border-color:#2a78d659}
.clieng,.clisub{font-size:11px;color:var(--faint)}
.clisub{margin-left:auto;text-align:right}
/* THE QUOTATION IS THE POINT and it reads as one: a quote, not a table cell. */
.clq{margin:0;padding:0 0 0 13px;border-left:2px solid var(--line-md);
  font-size:13px;line-height:1.6;color:var(--ink)}
.clq mark,.clland mark{background:#f0bd6340;color:inherit;border-radius:2px;padding:0 1px}
.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}
.clurl{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-md);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.clurl:hover{color:var(--ink)}
.clown{margin-left:auto;color:var(--faint);white-space:nowrap;flex:none}
@media(max-width:620px){.clown{margin-left:0;width:100%}}
/* the answer's own words, visibly a different voice from the page's */
.clland{margin-top:11px;padding:10px 12px;background:var(--elevated);border-radius:8px}
.clland i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.clland p{margin:0;font-size:12.5px;line-height:1.6;color:var(--body)}

/* ══ STANDING: the four readings of one leaderboard ════════════════════════
   The section carries the report's argument, so it is the one place where the
   page shows a reader four numbers for the same thing on purpose. The layout
   has to make "these are the same measurement under different rules" legible
   at a glance, which is why 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}

/* ══ SOURCE MARKETS ════════════════════════════════════════════════════════
   Six rows, each one country's share of the evidence. A ranked bar list rather
   than a ring, because the reader's question is "how much" and a ring answers
   "how the whole divides" - and at 77/10/6/4/2/0.3 a ring is one wedge and five
   slivers. */
#src-markets{margin:var(--gap) 0 0;padding:16px 18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift)}
.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}
@media(max-width:820px){
  .mkrow{grid-template-columns:minmax(96px,1fr) minmax(0,1.4fr) 44px 52px;gap:8px}
}

/* An empty response is not a low score, and the card that says so needs to read
   as a measurement caveat rather than as another ranked list. */
.dgsil .dgsn{margin:0 0 11px;font-size:12.5px;line-height:1.6;color:var(--body)}
.dgsil .dgsn b{color:var(--ink);font-weight:700}
.dgsq{border-top:1px solid var(--line);padding-top:10px}
.dgsqh{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px}
.dgsrow{font-size:12px;line-height:1.5;color:var(--body);padding:4px 0 4px 11px;
  border-left:2px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.dgsrow+.dgsrow{margin-top:3px}
.dgsf{margin:10px 0 0;font-size:11.5px;color:var(--muted)}

/* ══ CLAIMS, v2: a ladder you can read and a claim you can open ════════════
   Two things replaced here, and both were the same fault in different shapes:
   a summary drawn so small that the rung this layer exists to report could not
   be pointed at, and a list that printed the same sentence once per engine
   that carried it. */

/* ── the ladder ─────────────────────────────────────────────────────────
   One row per rung in fidelity order. The bar is against the COMMONEST rung
   rather than the total, because against the total a 5-of-555 rung is one
   pixel and the whole argument of the section is that the small rungs matter.
   The row is a button: it filters the evidence below it. */
.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)}
/* The step number IS the scale. Without it the rows read as an unordered key,
   which is what the stacked bar and its legend were. */
.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 evidence list: one row per CLAIM ───────────────────────────────── */
.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)}
.clrh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.clrsub{font-size:11px;color:var(--muted)}
.clrn{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.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}
.clrgo{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--accent);
  font-weight:600;flex:none}
.clrgo svg{width:13px;height:13px}

/* ── the claim's own screen ─────────────────────────────────────────────
   Opened on the same modal stack as the prompt drill-down, so Back and the
   breadcrumb behave the way they do everywhere else. */
.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}
.clsh{display:flex;align-items:baseline;gap:12px;margin-bottom:-6px}
.clsh .smeta{margin-left:auto;font-size:11.5px;color:var(--faint)}
.clslands{display:flex;flex-direction:column;gap:11px}
.clsland{border:1px solid var(--line);border-left:3px solid var(--rc,var(--line-md));
  border-radius:var(--r-lg);padding:12px 14px;background:var(--card)}
.clslh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.clieng{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--body)}
/* The question that carried it, as a way down to the answer itself. */
.clslq{display:block;width:100%;text-align:left;font:600 13.5px/1.45 var(--sans);color:var(--accent);
  background:transparent;border:0;padding:0;cursor:pointer;margin-bottom:9px}
.clslq:hover{text-decoration:underline}
.clslno{margin:0;font-size:12px;color:var(--muted);line-height:1.55}
.clsfoot{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.modal .dd-chip.rung{border-color:var(--rc);color:var(--rc)}
/* Which collection run carried it. Only renders when there is more than one. */
.clrun{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--faint);
  border:1px solid var(--line-md);border-radius:4px;padding:2px 6px;white-space:nowrap}

/* The tracked brand is marked by tone and by its row, never by a badge naming a
   relationship: this report is prepared FOR nesto, and "the client" asserted
   something about who works for whom that a badge has no business asserting. */
table.stt tr.me{background:color-mix(in srgb,var(--accent) 7%,transparent)}
table.stt tr.me td{border-color:color-mix(in srgb,var(--accent) 18%,transparent)}
table.stt tr.me .stn b{color:var(--accent)}
.tmfl.tracked{color:#ffd27a;font-weight:700}

/* Which engines read the out-of-market citations. It was a clause in the middle
   of a paragraph; it is a readout beside the bars now. */
.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)}
.sttied{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}