/* 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 ───────────────────────────────────────── */

/* ── 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}
/* Proportional figures on a standalone stat-tile value: at 36px, equal-width
   digits make "121" read loose and gappy. tabular-nums stays where numbers align
   vertically down a column, which is table rows and axis ticks, not here. */
.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:proportional-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}
@media(max-width:940px){.kpis{grid-template-columns:repeat(2,1fr)}.kpis>div{padding-left:0!important;border-left:0!important;border-top:1px solid var(--line)}}

/* ── 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}}
/* a bar list whose labels are page paths needs the width to keep the segment
   that distinguishes them; at 184px the CSS ellipsis cropped the tail */
.bars.wide .bar{grid-template-columns:274px 1fr 58px}
@media(max-width:980px){.bars.wide .bar{grid-template-columns:200px 1fr 52px}}

/* ── 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}
/* Below 900px the four columns used to collapse to one, so every prompt became a
   five-line stack — text, then a lone Type badge, then a lone Topic chip, then
   the engine icons, then the city — 181px tall and mostly empty, under a header
   row whose "Prompt / Type / Topic" labels no longer sat above anything.

   Narrow rows are now two lines: the question, then one meta line carrying type,
   topic and city with the engine icons pushed to the right edge. The header is
   hidden there, because a column header that labels nothing is furniture. */
@media(max-width:900px){
  .pr .prow{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;padding:12px 0}
  /* the city chip is the fifth child in source order but reads best as a header
     above the question; ordered explicitly rather than left to default:0 */
  .pr .prow > .loc{order:0;flex:0 0 100%;margin-bottom:1px}
  .pr .prow > :nth-child(1){flex:0 0 100%;order:1}
  .pr .prow > :nth-child(2){order:2;flex:none}
  .pr .prow > :nth-child(3){order:3;flex:1 1 auto;min-width:0}
  .pr .prow > .engs{order:4;flex:none;margin-left:auto;
    display:flex;gap:5px;align-items:center;justify-items:initial}
  .pr .prow .tpc{max-width:100%}
  .prow.prhead{display:none}
  .engcell{width:26px;height:26px;border-radius:8px}
  .engcell img{width:15px;height:15px}
}
/* under ~560px the meta line itself needs a second row rather than a squeeze */
@media(max-width:560px){
  .pr .prow > :nth-child(3){flex:0 0 100%;order:4}
  .pr .prow > .engs{order:3}
}
.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}
/* A client name and a domain are as long as they are: "Teaching Entrepreneurship"
   and teachingentrepreneurship.org are twice the length of the two this sidebar
   was measured against, and with nothing allowed to wrap they pushed the 236px
   column into its own horizontal scroll and clipped the domain to
   "teachingentrepreneurship.o". Both may wrap now, the long domain breaks
   anywhere, and the block cannot exceed the column. */
.side-head h1{font-size:18px;font-weight:700;letter-spacing:-.022em;line-height:1.15;
  overflow-wrap:anywhere}
.side-head .dom{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:5px;
  line-height:1.35;overflow-wrap:break-word}
/* the domain gets the full column width, so a long one never has to break mid-word */
.side-head .dom.loc{margin-top:1px;font-family:inherit;font-size:11px}
.side-head .who{display:flex;align-items:flex-start;gap:8px;min-width:0}
.side-head .who > div{min-width:0}
.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;max-width:100%}
/* Anchors as well as spans. The rule used to name spans only, so a bar label that
   is a LINK (every row of the most-cited-domains chart) could not shrink: a
   28-character host then set the row's minimum width, the single-column grid it
   sits in resolved wider than the viewport, and the whole page scrolled sideways
   on a phone. */
.withlogo span,.withlogo a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.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(6,1fr)}
.pmeta>div{padding:12px 18px}
.pmeta>div+div{border-left:1px solid var(--line)}
.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)}.pmeta>div+div{border-left:0;border-top:1px solid var(--line)}}
.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 */
#tip{position:fixed;z-index:200;pointer-events:none;background:var(--ink);color:#fbf5ea;
  font:500 11.5px/1.45 var(--sans);padding:7px 10px;border-radius:7px;box-shadow:0 6px 18px #241a1040;
  max-width:250px;opacity:0;transition:opacity .1s}
#tip.on{opacity:1}
#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}

/* The template shipped a SECOND `.adrow` block here, an earlier version of the
   same component, dead for as long as no advertiser had a favicon. Its
   `.adrow img{width:26px}` then out-specified `.emark{width:22px}` the moment
   icons arrived, so every mark in the ranked list rendered 4px oversized and the
   rows grew with it. Deleted rather than overridden; the live rules are the
   `.adrow` block further down, next to `.adcore` and `.adout`. */

/* ══ 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)}
/* named, but the competitive field is unobserved: a neutral state, deliberately
   not the green of "Leading" — it is not a rank claim */
.trbadge.named{background:#241a100d;color:var(--muted)}
.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}

/* Out-links, from xlink(). These sit inside chart labels and table cells that
   already carry their own colour and weight, so the link inherits both and
   announces itself on hover instead of painting the report blue. */
.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}
/* inside a truncating chart label the anchor has to inherit the ellipsis */
.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}

.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}
.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 carry TWO actions, so the row is a wrapper, not a button:
   .adcore opens the drill-down, .adout opens the advertiser's own site. An <a>
   may not be nested inside a <button>, which is what forced the split. */
.adrow{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.adrow:first-child{border-top:0}
.adrow:hover{background:var(--elevated)}
.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}
.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;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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)}
/* the out-link keeps a full-height hit area of its own so it is never a 10px target */
.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}
/* the same out-link inside a table cell */
.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}
/* a header label that only screen readers and the title tooltip need */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── the advertiser frequency chart ──────────────────────────────────────
   Single-series columns per collection day; peers repeat it as small multiples
   on the same scale. Container height includes the x-axis band, so the card
   never grows a nested scrollbar around its own axis labels. */
.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)}

/* ── sponsored placements on one question (prompt drill-down) ────────── */
.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}
.adqer{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);font-size:12px;color:var(--muted)}
.adqer.on{border-color:color-mix(in srgb, var(--s-blue) 34%, transparent);
  background:color-mix(in srgb, var(--s-blue) 7%, transparent);color:var(--ink)}
.adqer.on img{filter:none}
.adqer:not(.on) img{opacity:.42;filter:grayscale(1)}
.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}}

/* the show-all control on the ranked advertiser list */
.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)}
/* the class key, in the panel footer beside the counts */
.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}
/* a tag that carries a class colour rather than a status */
.tag .tdotc{width:7px;height:7px;border-radius:2px;background:var(--tc,currentColor);
  display:inline-block;margin-right:5px;vertical-align:middle}
/* a legend divider, so "what the bar colour means" and "what the dot means" read
   as two separate statements instead of one run-on list */
.legend .lgsep{color:var(--faint);font-style:italic}
@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)}
/* a row that belongs to the open entity but sits outside the active filter
   slice: still openable, visibly not part of what the filters selected */
tr.rowlink.dim>td{opacity:.5}
tr.rowlink.dim:hover>td{opacity:1}
.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}
/* The favicon branch of entityMark: the same box as the letter tile, real artwork.
   Deliberately NOT called `.img` — that class is already used for the creative and
   product image frames, and `.phero .img` (132px square) would have matched this
   inside the advertiser modal's hero. */
.emark.fav{object-fit:contain;background:var(--card);box-sizing:border-box;padding:1px}

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

/* the report leads with one figure. exactly one hero per view.
   The headline and the engine split share one row: alone, the hero left two
   thirds of a 1220px column empty, and the engine bars sat in a block of their
   own doing the same. Paired, they read as one statement — the number, and
   what it is made of. */
.ovtop{display:grid;grid-template-columns:minmax(270px,330px) 1fr;
  border-top:1px solid var(--line);margin-top:16px}
.ovtop>.hero{padding:24px 34px 26px 0}
.ovtop>.ovengine{padding:24px 0 26px 34px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;max-width:none}
.ovtop>.ovengine .bar{grid-template-columns:168px 1fr 54px}
.ovtop>.ovengine .legend{margin-top:14px;padding-top:12px}
/* an empty selection is a sentence, not a figure: it wants the whole row */
.ovtop.solo{grid-template-columns:1fr}
.ovtop.solo>.hero{padding-right:0}
.ovtop.solo>.ovengine{display:none}
@media(max-width:1080px){
  .ovtop{grid-template-columns:1fr}
  .ovtop>.hero{padding:22px 0 20px}
  .ovtop>.ovengine{padding:20px 0 24px;border-left:0;border-top:1px solid var(--line)}
}
.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}
/* the trend is a 17-point time series — it earns the full column */
.trendblock{max-width:none;margin-top:30px}
.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;min-width:0;position:relative}
/* the fill is clipped to the track, but the whole-window reference tick must be
   able to sit at the very end of it, so the tick rides outside the clip */
.trtrk{overflow:visible}
.trfil{overflow:hidden}
.trref{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.42;
  border-radius:1px;transform:translateX(-1px)}
.trvis .trfil{display:block;height:100%;border-radius:4px;background:var(--s-blue);max-width:100%}
.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.noev{cursor:default}
.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;min-width:0}
@media(max-width:1180px){.dwrap{gap:16px}}
/* Phone widths: the donut is a fixed 140px and the share list beside it will not
   go below its own labels, so the pair set a floor of ~396px and pushed the whole
   PAGE sideways on a 375px screen (the grid column they sit in resolved to their
   combined minimum). Stacked instead, each gets the full width and nothing
   overflows. */
@media(max-width:620px){.dwrap{flex-wrap:wrap;justify-content:center}
  .dwrap>svg{flex:none}
  .dwrap .tc{flex:1 1 100%}}
.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}
/* the centre carries the total, and swaps to a slice on hover — so it has to
   hold both "3,732" and "24.2%" without reflowing the ring */
.dcentre .dv{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;transition:none}
.dcentre .dl{max-width:88px;overflow:hidden;text-overflow:ellipsis}
.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}
/* neither side scored: the split carries no comparison, so it must not read as one */
.h2split.unknown i{background:var(--line-md);opacity:.6}
/* a prompt in more than one topic: the extra memberships are real filter
   dimensions, so the row admits them rather than showing only the first */
.tpc .tpmore{font-style:normal;font-size:9.5px;font-weight:700;color:var(--gold);
  margin-left:4px;vertical-align:1px}

/* 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}
.claim-empty .cesub{margin:7px 0 0;font-size:12px;color:var(--faint)}

/* ── one trait row, both columns ─────────────────────────────────────────
   The row is a single line so the two columns have the same silhouette; the
   verbatim sentences it was extracted from open underneath on demand. */
.h2k.tr{padding:0;position:static}
.h2k.tr:before{display:none}
.trhead{display:flex;align-items:baseline;gap:8px;width:100%;padding:4px 0 4px 13px;position:relative;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:5px}
.trhead:before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.42}
.trhead:disabled{cursor:default}
.trhead:hover:not(:disabled) .trlab{text-decoration:underline;text-underline-offset:2px}
.trhead .car{width:12px;height:12px;flex:none;opacity:.5;transition:transform .14s;margin-left:2px}
.trhead[aria-expanded="true"] .car{transform:rotate(180deg)}
.trlab{flex:1;min-width:0;font-size:12.5px;line-height:1.5;font-weight:600}
.trsub{display:block;font-size:11px;font-weight:400;opacity:.72;letter-spacing:0}
.trn{font-size:11px;font-variant-numeric:tabular-nums;opacity:.72;flex:none}
.trq{padding:2px 0 8px 13px;display:flex;flex-direction:column;gap:7px}
.trqrow{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.55}
.trqe{flex:none;padding-top:2px}
.trqt{min-width:0;opacity:.86}
.trqf{font-size:10.5px;opacity:.6;letter-spacing:.01em}

/* Searchable's own writing: same shape, deliberately a different surface, so it
   never reads as part of the extracted measurement above it */
.h2kgroup.own{background:var(--elevated);border:1px solid var(--line)}
.h2kgroup.own .h2kgh{color:var(--muted)}
.h2k.own{display:flex;gap:8px;align-items:baseline;padding-left:0;color:var(--body)}
.h2k.own:before{display:none}
.owndot{width:6px;height:6px;border-radius:50%;flex:none;margin-top:6px}
.owndot.pos{background:var(--pos)}
.owndot.neg{background:var(--neg)}
.owndot.gap{background:var(--s-none)}
.ownfoot{font-size:10.5px;color:var(--faint);margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
/* the client's column carries a hairline so the pair reads as a comparison */
.h2kside.me{background:linear-gradient(180deg,#a66a1207,transparent 120px)}
@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(3,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}}

/* ── markets ──────────────────────────────────────────────
   City cards double as the market filter, so they are buttons; the pressed
   state is the same treatment the engine bars use. */
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px 14px}
  display:flex;gap:10px;flex-wrap:wrap}

/* a stated limit, not a warning banner: same paper, gold rule, no alarm colour */
.callout{border-left:2px solid var(--gold);padding:2px 0 2px 18px;max-width:88ch}
.callout p{margin:9px 0 0;font-size:13px;line-height:1.65;color:var(--body)}
.callout p:first-of-type{margin-top:8px}

/* ── trend ────────────────────────────────────────────── */
.trendsvg{width:100%;height:auto;display:block;overflow:visible}
.trendsvg .tk{font:500 10.5px var(--sans);fill:var(--faint)}
.trendsvg circle[data-tip]{cursor:crosshair}

/* the AI traffic strip is four cards rather than five; it folds at the same
   breakpoint as the main KPI strip so the two never disagree */
.kpis.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.kpis.four{grid-template-columns:repeat(2,1fr)}}

/* data quality: a definition list, not paragraphs */
.dqline{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--body)}
.dqline:first-of-type{border-top:0}
.dqline b{font-weight:650;color:var(--ink)}
@media(max-width:620px){.dqline{grid-template-columns:1fr;gap:2px}}

/* ── prompt drill-down: annotated answer ──────────────────
   A hatched header stating the verdict, the answer read the way a person
   reads it, and a rail carrying the brands and the pages behind the markers. */
.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-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}

/* ── reader ── */
.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)}

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)}
.ansbody.nohl mark.bm{background:transparent;box-shadow:none;padding:0;font-weight:inherit}

.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}

/* ── rail ── */
.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}

.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}

/* ── claims ── */
.dd-claims{margin-bottom:18px}
.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}

.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)}
.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)}
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)}
.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)}
.ctype{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.cmark{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.csrc{font-size:12px;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.conf{margin-left:7px;font-size:10.5px;font-weight:600;color:var(--gold-deep);background:var(--warn-bg);border-radius:4px;padding:1px 6px}
.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}

/* ══ claims analysis ═════════════════════════════════════
   The drill-down shows one answer's claims; this section shows the population
   they come from. Four figures, one outcome bar, two panels, one explorer. */
.kpis.four{grid-template-columns:repeat(4,1fr)}
.clfunnel{margin-top:30px;padding-top:24px}
.ladderbar.big{height:14px;border-radius:7px;margin-bottom:14px}
.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}
@media(max-width:620px){.ok small{display:none}}

.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)}
@media(max-width:1020px){.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}
.cpg{display:flex;align-items:flex-start;gap:9px;min-width:0}
.cpg img,.cpg .emark{margin-top:2px;flex:none}
.cpg span{min-width:0}
.cpg b{display:block;font-weight:600;font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:270px}
.cpg small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:270px}
.clpages .n b.hit{color:var(--ink);font-weight:700}
.clpages .n b.miss{color:var(--faint);font-weight:500}
.cbar{width:74px}
.cbar .dgtrk{display:block;width:66px}

.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}
.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}
.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)}
.rungtag.sm{font-size:10.5px;flex:none;min-width:92px}
.conf.plain{background:transparent;color:var(--faint);padding:0 0 0 7px;font-variant-numeric:tabular-nums}
.btn.clmore{margin-top:14px}
.claimbasis{padding:12px 0 0;border-top:1px solid var(--line);margin-top:16px}
/* 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:104px 1fr 62px;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}
/* a landing of zero must draw nothing: a min-width floor on the fill drew a
   3px green head on every 0-of-N row */
.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}
/* 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}
/* the four-up figure row collapses with the five-up one — declared last so it
   is not overridden by the unconditional .kpis.four rule above */
@media(max-width:940px){.kpis.four{grid-template-columns:repeat(2,1fr)}}

/* ══ 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)}
/* rows carry four columns now: label, volume bar, landed/published, rate */
.ctrow{grid-template-columns:150px 1fr 74px 46px}
.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}
.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}
@media(max-width:900px){.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}
.conf{display:inline-block;font-size:10.5px;font-weight:600;color:var(--gold);background:var(--elevated);
  border-radius:4px;padding:1px 6px;margin-left:7px;white-space:nowrap}
/* trend: the active prompt type leads, the other two sit behind it */
.trendsvg .tk.dim{fill:var(--faint);opacity:.8}
.trendsvg .tk.act{fill:var(--s-blue);font-weight:700}
/* the other prompt types, each on its own scale, as a context strip */
.tsparks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line)}
.tspark{display:grid;grid-template-columns:88px 1fr auto auto;align-items:center;gap:12px;
  background:transparent;border:1px solid var(--line);border-radius:10px;padding:9px 13px;cursor:pointer;
  font:inherit;text-align:left}
.tspark:hover{border-color:var(--gold);background:var(--elevated)}
.tspark .tsl{font-size:12px;font-weight:650;color:var(--body)}
.tspark svg{width:100%;height:32px;display:block;overflow:visible}
.tspark .tsv{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tspark .tsv small{font-size:11px;color:var(--faint);font-weight:500}
.tspark .tsr{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
@media(max-width:640px){.tspark{grid-template-columns:78px 1fr auto}.tspark .tsr{display:none}}

/* ══ rival perception, derived from the collected answers ═══ */
.rvrate{display:flex;align-items:baseline;gap:8px;padding:9px 12px;margin-bottom:12px;
  background:var(--elevated);border:1px solid var(--line);border-radius:9px;cursor:default}
.rvrate b{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.03em}
.rvrate small{font-size:12px;color:var(--faint);font-weight:500}
.rvrate span{margin-left:auto;font-size:11.5px;color:var(--muted)}
.h2k.rv{display:block;cursor:default}
.h2k.rv .rvq{display:block;font-size:12.5px;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h2k.rv .rvm{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.h2k.rv .rvm b{color:var(--body);font-weight:700}
.rvgaps{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.rvfoot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11px;color:var(--faint);line-height:1.55}

/* 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}
@media(max-width:900px){
  .clbar{gap:8px}
  .clbar #clq{flex:1 1 100%}
  .clsel{flex:1 1 auto;max-width:none}
  .clchips{flex-wrap:wrap}
  .clcols{gap:26px}
}

/* ══ claims v3: composition of what actually got quoted ═══ */
/* 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}
.clsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:44px;align-items:start}
@media(max-width:1020px){.clsplit{grid-template-columns:1fr;gap:28px}}
.clside{border-left:1px solid var(--line);padding-left:32px}
@media(max-width:1020px){.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}

/* 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}

/* 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}
@media(max-width:760px){.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}
@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}
}
/* 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)}

/* ══ links out to the cited page ═════════════════════════ */
.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}
.cpglink{color:var(--muted);text-decoration:none}
.cpglink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ══ landing panel: grouped askings ══════════════════════ */
/* .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}

/* ══ page map (quadrant) and page-to-question network ════ */
.qmap,.netmap{width:100%;height:auto;display:block;overflow:visible}
.qmap .tk,.netmap .tk{font:500 10.5px var(--sans);fill:var(--faint)}
.qmap .tk.dim{fill:var(--faint);opacity:.75}
.qmap .axl,.netmap .axl{font:700 10px var(--sans);fill:var(--faint);letter-spacing:.07em;text-transform:uppercase}
.qmap .qlab{font:700 10px var(--sans);fill:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.qmap .qlab .qn{fill:var(--muted);font-weight:800}
/* .qdot is a <g> now, because a mixed stack is two half-discs rather than one
   circle, so the hover state has to reach its children */
.qdot{cursor:pointer}
.qdot>circle,.qdot>path{transition:fill-opacity .12s ease}
.qdot:hover>circle,.qdot:hover>path{fill-opacity:1;stroke:var(--ink);stroke-width:1.4}
.qdot:focus-visible>circle,.qdot:focus-visible>path{stroke:var(--accent);stroke-width:2}

/* the marginal under the quadrant: carry rate by publish-volume band */
.qband{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.qbandh{font:700 10px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.qbandh span{font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px}
.qbandrows{display:flex;flex-direction:column;gap:5px;max-width:640px}
.qbandrow{display:grid;grid-template-columns:56px 1fr 54px 62px;align-items:center;gap:12px;font-size:12px}
.qbl{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.qbt{display:block;height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.qbt i{display:block;height:100%;border-radius:4px;background:var(--s-blue)}
.qbv{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.qbv small{font-size:10px;color:var(--faint);font-weight:400}
.qbn{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}

.netmap{min-width:980px}
.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}

/* the chip that says what the maps scoped the table to */
.clpick{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 12px}
.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)}

/* ── demand-against-rank scatter ─────────────────────────────────────── */
.dmap{width:100%;height:auto;display:block;overflow:visible}
.dmap .tk{font:500 10.5px var(--sans);fill:var(--faint)}
.dmap .axl{font:700 10px var(--sans);fill:var(--faint);letter-spacing:.07em;text-transform:uppercase}
.dmap .qlab{font:700 10px var(--sans);fill:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.dmap .qlab.dim{fill:var(--faint);opacity:.7}
.dmap .dlab{font:600 10.5px var(--sans);fill:var(--body)}
.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}

/* ── device rows: share of clicks beside what each converts at ────────── */
.dvrows{display:flex;flex-direction:column;gap:7px}
.dvrow{display:grid;grid-template-columns:62px 1fr 44px 1fr 62px 40px;align-items:center;gap:9px;font-size:12px}
.dvn{color:var(--body);font-weight:600}
.dvshare,.dvctr{display:block;height:8px;background:var(--track);border-radius:4px;overflow:hidden}
.dvshare i{display:block;height:100%;border-radius:4px;background:var(--s-none)}
.dvctr i{display:block;height:100%;border-radius:4px;background:var(--s-blue)}
.dvpct,.dvctrv{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.dvpct small,.dvctrv small{font-size:9.5px;color:var(--faint);font-weight:400}
.dvpos{text-align:right;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
@media(max-width:980px){.dvrow{grid-template-columns:56px 1fr 40px 1fr 58px}.dvpos{display:none}}

/* ── one assistant, one row ───────────────────────────────────────────── */
.asrows{display:flex;flex-direction:column;gap:8px}
.asrow{display:grid;grid-template-columns:132px 1fr 52px 44px;align-items:center;gap:11px;font-size:12.5px}
.asn{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--body)}
.asn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.astrk{display:flex;height:9px;background:var(--track);border-radius:5px;overflow:hidden;gap:2px}
.astrk i{display:block;height:100%;border-radius:5px;min-width:2px}
.asv{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.asp{text-align:right;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ── the pages named behind a cross-surface segment ───────────────────── */
.xnamed{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.xnamed .eyebrow .k{font-weight:400;letter-spacing:0;text-transform:none;color:var(--faint)}
.xchips{display:flex;gap:8px;flex-wrap:wrap}
.xchip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.xchip b{font-weight:700;color:var(--body);font-variant-numeric:tabular-nums}
.xchip:hover{border-color:#241a1030}

/* ══ 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}
.splitbar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;margin-bottom:14px}
.splitbar i{display:block}
.qlist{display:flex;flex-direction:column;gap:9px}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) 96px 48px 44px;gap:12px;align-items:center;font-size:12.5px}
.qq{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.qtrk{height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.qtrk i{display:block;height:100%;border-radius:4px;min-width:2px}
.qc{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink)}
.qp{text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--faint)}
@media(max-width:620px){.qrow{grid-template-columns:minmax(0,1fr) 44px 40px}.qtrk{display:none}}
.xsurf{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.xbar{display:flex;gap:2px;height:16px;border-radius:8px;overflow:hidden;margin-bottom:14px}
.xseg{display:block;min-width:4px}
.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}