/* 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:1.15fr 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}

/* ══ 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}
.fd-bar i{display:block;height:100%;border-radius:4px}
.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)}
/* THE VALUE MAY WRAP; THE RAIL MAY NOT. `white-space:nowrap` on the value made
   "Safety, dosing and interactions · 95.4%" an unbreakable 400px 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. 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{gap:12px 0;flex-wrap:wrap}
  .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:1.1fr 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)}
@media(max-width:1000px){.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. */
#sources .cols{grid-template-columns:1.62fr 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:1000px){#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}
.tmapk{margin-left:auto;font-size:11px;color:var(--faint)}
.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)}
.tmapf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;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)}
.tmapf span:last-child{margin-left:auto}
@media(max-width:820px){.tmapf span:last-child{display:none}}

/* 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 ─────────────────────────────────────────────────────── */
.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)}
.tmapk{margin-left:auto}

/* ── the selection strip ──────────────────────────────────────────────── */
/* `hidden` loses to `display:flex`, so the empty strip was drawing a 16px
   band of elevated paper across the top of the map */
.tmfocus[hidden]{display:none}
.tmfocus{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 2px;
  padding:8px 12px;background:var(--elevated);border-radius:9px;font-size:12px;color:var(--muted)}
.tmfl{font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.015em}
.tmfv{font-variant-numeric:tabular-nums;color:var(--body)}
.tmfn{min-width:0;flex:1}
.tmfn b{font-weight:650;color:var(--body)}
.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}
.tmixh{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:0 0 8px 2px}
.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)}
.tmix.me .tmixb i{background:var(--accent)}
@media(max-width:980px){
  .tmbody{grid-template-columns:1fr}
  .tmindex{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
  .tmixh{grid-column:1/-1}
}

/* ══ 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)}
#src-net .tmindex{max-height:520px;overflow-y:auto;overscroll-behavior:contain}
#src-net .tmindex::-webkit-scrollbar{width:8px}
#src-net .tmindex::-webkit-scrollbar-thumb{background:#241a1024;border-radius:4px}
#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 .tmapk:empty{display:none}
#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}
#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}

/* ══ v29: the lens, the hover card, and the strip ═════════════════════════ */

/* ── the lens: four questions of one field ──────────────────────────────
   The sixteen bodies never change under it. What changes is the order of the
   list and the one fact each row states, so the same sphere answers "what gets
   read", "what gets read without naming us", "what already works" and "who
   owns a subject" without the reader having to hold four maps in their head. */
#srcmap .tmlens{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
#srcmap .tmlens button{font:600 10.5px/1.55 var(--sans);color:#efe7daad;
  background:#ffffff0a;border:1px solid #ffffff1f;border-radius:7px;padding:5px 9px;cursor:pointer}
#srcmap .tmlens button:hover{background:#ffffff1a;color:#fff8ec}
#srcmap .tmlens button[aria-pressed="true"]{background:#efe7da;border-color:#efe7da;color:#14100c}
/* .tmlensn is gone: the lens buttons name themselves and a sentence repeating
   the pressed one is the commentary this map was asked to lose */
#srcmap .tmlens{margin-bottom:12px}

/* the headline is a button, because the finding it states has a view */
#srcmap .tmfind{display:block;width:100%;text-align:left;font:11.5px/1.55 var(--sans);
  color:#efe7dab8;background:#e2b56a14;border:1px solid #e2b56a38;border-radius:9px;
  padding:9px 11px;margin-bottom:14px;cursor:pointer}
#srcmap .tmfind:hover{background:#e2b56a24;border-color:#e2b56a66;color:#fff8ec}
#srcmap .tmfind b{color:#f0c87e;font-weight:700}

/* A RANK COLUMN ONLY WHERE THERE IS A RANK. This was written as a blanket
   three-column rule and the levels below the field have no rank cell, so their
   rows put the favicon in the 16px rank track and the DOMAIN NAME in the 22px
   favicon track: every name in the list rendered as one letter and an ellipsis.
   Every level carries a rank now, and the selector still refuses to reshape a
   row that does not have one. */
#srcmap .tmix:has(.tmixr){grid-template-columns:16px 22px minmax(0,1fr)}
#srcmap .tmixr{grid-row:1;font:600 10px var(--sans);color:#efe7da5c;
  font-variant-numeric:tabular-nums;text-align:right}
#srcmap .tmix .tmixb{grid-column:1/-1}

/* ── the hover card ─────────────────────────────────────────────────────
   A tooltip on a network has one job the picture cannot do: state in figures
   what the geometry only implies. The card carries the body's identity, its
   three figures, and the topic profile its POSITION encodes. */
/* the card sits ON the dark field, so it needs a harder edge than a tooltip on
   paper does or it reads as part of the galaxy behind it */
#tip:has(.tipc){max-width:min(330px,calc(100vw - 20px));padding:0;background:#1b1610;
  border:1px solid #ffffff42;max-height:none;
  box-shadow:0 2px 6px #00000070,0 18px 42px -12px #000000a8}
.tipc{padding:11px 12px 10px}
.tiph{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tiph img{width:19px;height:19px;border-radius:5px;object-fit:contain;background:#efe7da;
  padding:1px;flex:none}
.tipt{font:700 13px var(--sans);color:#fff8ec;letter-spacing:-.015em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tipchip{margin-left:auto;font:700 8.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tc,#efe7da);border:1px solid currentColor;border-radius:4px;padding:2px 5px;
  opacity:.85;flex:none}
.tipst{display:flex;gap:14px;padding:8px 0;border-top:1px solid #ffffff14;
  border-bottom:1px solid #ffffff14}
.ts{display:flex;flex-direction:column;gap:1px;min-width:0}
.ts b{font:700 14px var(--sans);color:#fff8ec;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ts small{font-size:9.5px;color:#efe7da7a;white-space:nowrap}
.tipb{padding-top:9px}
.tipbh{font:700 8.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#efe7da61;
  margin-bottom:6px}
.tipbr{display:grid;grid-template-columns:minmax(0,1fr) 54px 36px;gap:8px;align-items:center;
  padding:2px 0;font-size:11px;color:#efe7dad1}
.tipbr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipbr i{display:block;height:5px;border-radius:3px;background:#ffffff1f;overflow:hidden}
.tipbr u{display:block;height:100%;border-radius:3px;background:var(--tc,#e2b56a);min-width:3px}
.tipbr em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:#efe7da9c;
  font-size:10.5px}
.tipn{padding-top:8px;font-size:10.5px;line-height:1.5}
.tipf{margin-top:9px;padding-top:8px;border-top:1px solid #ffffff14;font-size:10px;color:#efe7da61}

/* ── the strip: a readout with one shape, every time ───────────────────── */
#srcmap .tmfocus{gap:14px;padding:9px 12px;flex-wrap:wrap}
#srcmap .tmfid{display:flex;align-items:center;gap:8px;min-width:0}
#srcmap .tmfid img{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#efe7da;
  padding:1px;flex:none}
#srcmap .tmftag{font:700 8.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--sc);border:1px solid currentColor;border-radius:4px;padding:2px 5px;opacity:.8;
  flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#srcmap .tmfstats{display:flex;gap:18px;margin-left:4px}
.tmfs{display:flex;flex-direction:column;gap:1px}
.tmfs b{font:650 14px var(--sans);color:#fff8ec;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap}
.tmfs small{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#efe7da6b;
  white-space:nowrap}
.tmfs.good b{color:#7fd6a8}
.tmfs.bad b{color:#ff9e99}
#srcmap .tmfocus .tmfb{margin-left:auto}
#srcmap .tmfocus .tmfb+.tmfb,#srcmap .tmfocus .tmfb~.tmfx{margin-left:0}
@media(max-width:820px){
  #srcmap .tmfstats{gap:12px;flex-wrap:wrap}
  .tmfs b{font-size:12.5px}
}


/* ══ v30: 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 ended. A one-line topic put
   "Leading" at 210px and a two-line topic put it at 340px, and down the column
   the standings staggered. Nothing lined up with the header either, because
   the header 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 columns are fixed so every badge, bar and count
   sits in the same place on every line. */
.trhead,.trmain,.trprompt{display:grid;
  grid-template-columns:13px minmax(120px,1fr) 104px 172px 62px max-content;
  gap:11px;align-items:center}
.trhead{padding:9px 16px}
.trmain{padding:10px 16px}
.trprompt{padding:8px 16px}
.trhead .th-b{font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:var(--faint)}
.trmain .trspacer,.trprompt .trspacer{display:none}
.trbadge{margin-left:0;justify-self:start;white-space:nowrap}
.trname{align-self:center}
.trp{margin-right:0}
/* the prompt rows inherit the same columns, so their slot marks sit directly
   under the topic's own */
.trprompt .trptext{grid-column:2/4;max-width:none}
.trprompt .trslots{grid-column:6}
.trprompt .trbadge{grid-column:4}

/* an empty slot is the absence of a brand, not a missing datum: it should read
   as space with a rule through it, not as a grey disc waiting to be filled */
.slot.empty{background:none;box-shadow:inset 0 0 0 1px #241a100f}

@media(max-width:1100px){
  .trhead,.trmain,.trprompt{grid-template-columns:13px minmax(100px,1fr) 96px 132px 52px max-content;
    gap:9px}
}

/* ── Brīt Klik additions ──────────────────────────────────
   The unbranded rank under the Category rank figure, and the head-to-head note
   that fires when the branded questions reverse the order. Both are derived and
   print nothing when the two bases agree, so neither can leave a stale caption. */
.fd-caveat{margin-top:6px;font:600 11px var(--sans);color:var(--gold);
  letter-spacing:.01em;cursor:default}
.h2lift{color:var(--ink);font-weight:500}

/* ── burst-mode tile figures ───────────────────────────────
   These replace the per-wave dot matrix on a project whose runs all landed in
   one burst. The matrix is a time series and needs many columns to read; three
   columns under a date axis invites a reader to find a trend in noise. */

/* One cell per tracked question, lit when an engine named the brand. Sized so a
   50-cell grid fills the tile without scrolling and a 150-cell one still does. */
.ugrid{display:grid;grid-template-columns:repeat(var(--ucols,10),11px);
  gap:3px;margin:14px 0 9px;justify-content:start}
.ugrid i{width:11px;height:11px;border-radius:2px;background:var(--track);display:block}
.ugrid i.on{background:var(--accent)}
.ugrid-x{display:flex;justify-content:space-between;gap:12px;
  font:500 11px var(--sans);color:var(--faint)}
.ugrid-x span:only-child{margin:0 auto;text-align:center}

/* The citation split reuses .split and .split-key from the sentiment tile, so
   the two tiles read as the same kind of figure. Only the spacing differs. */
.tile .split{margin-top:14px}

/* The burst plot: a spread band and its mean, in place of a connected curve. */
.trend .tr-band{fill:var(--trend);fill-opacity:.13}
.trend .tr-mean{stroke:var(--trend);stroke-width:1.5;stroke-dasharray:4 4;stroke-opacity:.75}