/* SWT Conversion Lens — Brand Kit v2.0 (Graphite / Chartreuse / Deep Ocean Blue).
   Three brand colours plus black and white. No other hues are introduced: status
   is carried by text, weight, borders and fill patterns, never by colour alone
   (WCAG 1.4.1 — and it keeps the dashboard on-brand).
   Mobile-first: every layout starts single-column and widens at 760/1100px. */
:root{
  --graphite:#1A1D21; --chartreuse:#DAEC0C; --blue:#0077B6;
  --bg:#F5F6F4; --surface:#FFFFFF; --ink:#1A1D21; --muted:#565B61; --line:#DDDFDA;
  --ink-soft:#3A3F45;
  /* Spacing rhythm — 4/8px scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink);
      font-family:"DM Sans","Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.5; }
h1,h2,h3,h4,.teko{ font-family:"Teko","Arial Narrow",sans-serif; font-weight:600;
      letter-spacing:.5px; text-transform:uppercase; line-height:1.1; margin:0 0 var(--s2); }
h1{ font-size:32px; } h2{ font-size:24px; } h3{ font-size:20px; } h4{ font-size:18px; }
@media(min-width:760px){ h1{ font-size:40px; } h2{ font-size:32px; } }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- top bar ---------- */
.topbar{ background:var(--graphite); color:#fff; position:sticky; top:0; z-index:50; }
.topbar .inner{ max-width:1400px; margin:0 auto; padding:10px var(--s4);
      display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:var(--s3); padding-right:var(--s4);
      white-space:nowrap; border-right:1px solid rgba(255,255,255,.18); }
.brand:hover{ text-decoration:none; }
.brand .stack{ display:flex; flex-direction:column; line-height:1; gap:2px; }
.brand .top{ font-family:"Teko","Arial Narrow",sans-serif; font-weight:600; font-size:23px;
      letter-spacing:1.5px; color:#fff; }
.brand .bottom{ font-family:"DM Sans",sans-serif; font-size:9px; font-weight:500;
      letter-spacing:3.6px; color:#fff; opacity:.75; }
.brand .tag{ background:var(--chartreuse); color:var(--graphite);
      font-family:"Teko","Arial Narrow",sans-serif; font-weight:600; font-size:17px;
      letter-spacing:1.2px; padding:3px 10px 1px; border-radius:7px; line-height:1.1; }
.nav{ display:flex; gap:var(--s1); flex-wrap:wrap; }
.nav a{ color:#fff; font-family:"Teko","Arial Narrow",sans-serif; font-size:19px;
      letter-spacing:.8px; text-transform:uppercase; padding:var(--s2) var(--s3);
      border-radius:8px; min-height:44px; display:flex; align-items:center; }
.nav a[aria-current="page"], .nav a:hover{ background:rgba(218,236,12,.14);
      color:var(--chartreuse); text-decoration:none; }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.who{ font-size:12.5px; color:#fff; opacity:.7; }

.wrap{ max-width:1400px; margin:0 auto; padding:var(--s5) var(--s4) 64px; }
.pagehead{ display:flex; align-items:flex-end; justify-content:space-between;
      gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4); }
.crumb{ font-size:13px; color:var(--muted); margin-bottom:var(--s1); }
.sub{ color:var(--muted); font-size:14px; margin:0; }

/* ---------- grids & cards ---------- */
/* minmax(0,1fr), never plain 1fr. A bare `1fr` track is minmax(auto,1fr), and
   `auto` floors at the item's min-content width — so a wide table inside a card
   forces its track wider than half the row, the grid overflows to the right, and
   the whole block looks shoved off-centre. minmax(0,…) lets the track shrink and
   hands scrolling back to .tablewrap, where it belongs. */
.grid{ display:grid; gap:var(--s3); }
.grid.cols2, .grid.cols3, .grid.cols4{ grid-template-columns:minmax(0,1fr); }
@media(min-width:560px){ .grid.cols4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
                         .grid.cols2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:900px){ .grid.cols3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
                         .grid.cols4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Same reason: a grid child must be allowed to be narrower than its content. */
.grid > *{ min-width:0; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
      padding:var(--s4) var(--s5); }
.card h2,.card h3{ margin-bottom:var(--s3); }
.card + .card{ margin-top:var(--s3); }

/* ---------- stat tiles ---------- */
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
      padding:var(--s4); }
.tile .num{ font-family:"Teko","Arial Narrow",sans-serif; font-weight:600; font-size:42px;
      line-height:1; font-variant-numeric:tabular-nums; }
.tile .lbl{ font-size:13.5px; color:var(--muted); margin-top:var(--s1); }
.tile .sub2{ font-size:12.5px; color:var(--muted); margin-top:var(--s2);
      font-variant-numeric:tabular-nums; }
.tile.hero{ background:var(--graphite); border-color:var(--graphite); color:#fff; }
.tile.hero .num{ color:var(--chartreuse); }
.tile.hero .lbl,.tile.hero .sub2{ color:#fff; opacity:.85; }
.tile.accent .num{ color:var(--blue); }

/* ---------- buttons — radius = height/4 per brand kit ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px;
      padding:6px 20px; border-radius:11px; border:none; cursor:pointer;
      font-family:"Teko","Arial Narrow",sans-serif; font-weight:600; font-size:20px;
      letter-spacing:1px; text-transform:uppercase; }
.btn.primary{ background:var(--chartreuse); color:var(--graphite); }
.btn.secondary{ background:var(--blue); color:#fff; }
.btn.ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.btn.ondark{ background:transparent; border:1.5px solid var(--ink-soft); color:#fff; }
.btn:hover{ filter:brightness(.95); text-decoration:none; }
.btn.small{ min-height:36px; font-size:17px; padding:4px 14px; border-radius:9px; }

/* ---------- controls bar (date range + segment) ---------- */
.controls{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
      padding:var(--s3) var(--s4); margin-bottom:var(--s4);
      display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap; }
.controls .field{ flex:1 1 150px; min-width:130px; }
.controls .field.grow{ flex:2 1 260px; }
.chips{ display:flex; gap:var(--s1); flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; min-height:38px; padding:4px 12px;
      border-radius:10px; border:1.5px solid var(--line); background:#fff;
      color:var(--ink); font-size:13.5px; font-weight:500; }
.chip:hover{ text-decoration:none; border-color:var(--blue); }
.chip[aria-pressed="true"]{ background:var(--graphite); border-color:var(--graphite);
      color:var(--chartreuse); font-weight:600; }

/* ---------- badges — text always carries the meaning ---------- */
.badge{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700;
      letter-spacing:.6px; padding:3px 9px; border-radius:10px; white-space:nowrap;
      font-family:"DM Sans",sans-serif; text-transform:uppercase; }
.badge.clean{ background:#fff; color:var(--graphite); border:1.5px solid var(--graphite); }
.badge.suspect{ background:var(--blue); color:#fff; }
.badge.polluted{ background:var(--graphite); color:var(--chartreuse); }
.badge.unknown{ background:var(--bg); color:var(--muted); border:1px dashed var(--line); }
.badge.gated{ background:var(--bg); color:var(--muted); border:1px dashed var(--line); }
.badge.bundle{ background:#fff; color:var(--blue); border:1.5px solid var(--blue); }
.badge.prov{ background:var(--chartreuse); color:var(--graphite); }
.badge.ok{ background:#fff; color:var(--muted); border:1px solid var(--line); }

/* ---------- tables ---------- */
.tablewrap{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
      overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size:14px;
      font-variant-numeric:tabular-nums; }
th{ font-family:"Teko","Arial Narrow",sans-serif; font-weight:600; font-size:15px;
    letter-spacing:.7px; text-transform:uppercase; text-align:right; background:var(--graphite);
    color:#fff; padding:9px 10px; white-space:nowrap; position:sticky; top:0; z-index:2; }
th a{ color:#fff; display:inline-flex; align-items:center; gap:3px; }
th a:hover{ color:var(--chartreuse); text-decoration:none; }
th[aria-sort] a{ color:var(--chartreuse); }
th.l, td.l{ text-align:left; }
td{ padding:8px 10px; border-top:1px solid var(--line); text-align:right;
    white-space:nowrap; }
/* Only product-name cells get a min-width and wrap. Applying it to every .l cell
   made narrow left-aligned columns (the leaderboard rank "#") 180px wide, which
   pushed all the data columns to the right edge of the card. */
td.l{ white-space:normal; }
td.name, th.name{ min-width:170px; }
/* Inside a half-width card (leaderboards, frozen reports) the name column has
   less room, so it gets a smaller floor rather than forcing a horizontal scroll. */
.grid.cols2 td.name, .grid.cols2 th.name{ min-width:130px; }
.grid.cols2 details.exp summary{ font-size:12.5px; }
td.rank{ width:1%; min-width:0; padding-right:4px; }
td.mut{ color:var(--muted); }
tbody tr:hover td{ background:#FAFBF7; }
tr.gatedrow td{ background:#FBFBF9; color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }
.ci{ font-size:11.5px; color:var(--muted); display:block; }
.dim{ opacity:.45; }
caption{ caption-side:top; text-align:left; font-size:13px; color:var(--muted);
      padding:var(--s3) var(--s4); }

/* ---------- pagination ----------
   Styled as a surface bar matching .controls, and joined to the bottom of the
   table it belongs to (flat top corners, no doubled border) so it reads as part
   of the table rather than loose controls floating on the page background. */
.tablewrap.attached{ border-bottom-left-radius:0; border-bottom-right-radius:0;
      border-bottom:none; }
.pager{ display:flex; align-items:center; gap:var(--s3) var(--s4); flex-wrap:wrap;
      background:var(--surface); border:1px solid var(--line);
      border-top:1px solid var(--line); border-radius:0 0 14px 14px;
      padding:var(--s3) var(--s4); }
.pager.standalone{ border-radius:14px; margin-top:var(--s3); }
.pager .count{ font-size:13.5px; color:var(--muted); font-weight:500;
      font-variant-numeric:tabular-nums; white-space:nowrap; }
.pager .pages{ display:flex; gap:var(--s1); flex-wrap:wrap; align-items:center; }
.pager a, .pager .here, .pager .gap, .pager .step{ display:inline-flex;
      align-items:center; justify-content:center; min-width:44px; min-height:44px;
      padding:0 12px; border-radius:11px; font-size:15px; font-weight:600;
      font-variant-numeric:tabular-nums; text-decoration:none; }
.pager a{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink); }
.pager a:hover{ border-color:var(--blue); color:var(--blue); text-decoration:none; }
.pager .here{ background:var(--graphite); color:var(--chartreuse); border:1.5px solid var(--graphite); }
.pager .gap{ color:var(--muted); min-width:20px; padding:0 2px; border:none;
      font-weight:400; }
/* Prev / Next read as buttons — Teko uppercase, brand radius. */
.pager .step{ font-family:"Teko","Arial Narrow",sans-serif; font-size:19px;
      letter-spacing:.8px; text-transform:uppercase; padding:0 16px; }
.pager a.step{ background:var(--blue); border-color:var(--blue); color:#fff; }
.pager a.step:hover{ filter:brightness(.93); color:#fff; border-color:var(--blue); }
.pager span.step.disabled{ background:var(--bg); border:1.5px solid var(--line);
      color:var(--muted); opacity:1; pointer-events:none; }
.pager .perpage{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.pager .perpage label{ margin:0; white-space:nowrap; font-size:13px; }
.pager .perpage select{ min-height:44px; width:auto; min-width:80px; }
@media(max-width:759px){
  .pager{ justify-content:center; }
  .pager .count{ width:100%; text-align:center; }
  .pager .perpage{ margin-left:0; width:100%; justify-content:center; }
}

/* ---------- funnel ---------- */
.funnel{ display:flex; flex-direction:column; gap:var(--s2); }
.fstage{ display:grid; grid-template-columns:1fr; gap:var(--s1); }
.fstage .top{ display:flex; justify-content:space-between; align-items:baseline;
      gap:var(--s2); flex-wrap:wrap; }
.fstage .name{ font-family:"Teko","Arial Narrow",sans-serif; font-size:18px;
      letter-spacing:.6px; text-transform:uppercase; }
.fstage .count{ font-variant-numeric:tabular-nums; font-weight:600; }
.fbar{ height:26px; border-radius:6px; background:var(--bg); border:1px solid var(--line);
      overflow:hidden; }
.fbar span{ display:block; height:100%; background:var(--graphite); }
.fbar.trusted span{ background:var(--blue); }
.fdrop{ font-size:12.5px; color:var(--muted); display:flex; gap:var(--s2);
      align-items:center; flex-wrap:wrap; }
.fdrop.worst{ color:var(--ink); font-weight:600; }
.fdrop.worst::before{ content:"BIGGEST DROP"; background:var(--chartreuse);
      color:var(--graphite); font-size:10px; font-weight:700; letter-spacing:.8px;
      padding:2px 7px; border-radius:8px; }

/* ---------- bullet bar: rate vs benchmark, with the CI as the range band ---------- */
.bullet{ position:relative; height:22px; background:var(--bg); border:1px solid var(--line);
      border-radius:6px; overflow:hidden; min-width:120px; }
.bullet .band{ position:absolute; top:0; bottom:0; background:rgba(0,119,182,.16); }
.bullet .val{ position:absolute; top:6px; bottom:6px; left:0; background:var(--graphite);
      border-radius:3px; }
.bullet .target{ position:absolute; top:0; bottom:0; width:3px; background:var(--chartreuse);
      box-shadow:0 0 0 1px var(--graphite); }
.bulletkey{ font-size:12px; color:var(--muted); display:flex; gap:var(--s4);
      flex-wrap:wrap; margin-top:var(--s2); }
.bulletkey b{ color:var(--ink); }

.ladder{ display:flex; flex-direction:column; gap:var(--s1); margin-top:var(--s3); }
.ladder .rung{ display:flex; align-items:baseline; gap:var(--s3); padding:8px 12px;
      border-radius:10px; background:var(--bg); font-size:14px; color:var(--muted); }
.ladder .rung.used{ background:var(--graphite); color:#fff; }
.ladder .rung .mark{ width:16px; text-align:center; font-weight:700; }
.ladder .rung.used .mark{ color:var(--chartreuse); }
.ladder .rung .nm{ font-weight:600; min-width:150px; }
.ladder .rung.used .nm{ color:var(--chartreuse); }
.ladder .rung .why{ font-size:13px; opacity:.85; }
/* Benchmark figures link through to the peer group that produced them. */
a.peerlink{ border-bottom:1px dashed var(--blue); }
a.peerlink:hover{ text-decoration:none; border-bottom-style:solid; }

.reach{ margin-top:var(--s3); }
.reach .bar{ height:34px; border-radius:8px; overflow:hidden; background:var(--bg);
      border:1px solid var(--line); display:flex; }
/* Two brand fills only — the "never saw a product" remainder is the plain track,
   so the split reads without relying on a second hue. */
.reach .bar .saw{ display:block; height:100%; background:var(--blue); }
.reach .legend{ display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s3); }
.reach .legend .item{ display:flex; align-items:baseline; gap:var(--s2);
      font-size:13.5px; color:var(--muted); }
.reach .legend .item b{ font-family:"Teko","Arial Narrow",sans-serif; font-size:26px;
      line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.reach .legend .key{ width:12px; height:12px; border-radius:3px; flex:0 0 auto;
      align-self:center; }
.reach .legend .key.saw{ background:var(--blue); }
.reach .legend .key.none{ background:var(--bg); border:1.5px solid var(--line); }

/* ---------- line chart with hover readouts ----------
   Geometry is shared between the stretched SVG (the line) and the HTML overlay
   (hover targets, dot, tooltip): both position on the same percentage scale, so
   the dot always sits exactly on the line. Labels are HTML so they stay crisp at
   any width — SVG <text> in a stretched viewBox scales with the container. */
.chart{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 var(--s2);
      align-items:stretch; }
.chart .ylab{ display:flex; flex-direction:column; justify-content:space-between;
      height:var(--plot-h); font-size:11px; color:var(--muted); text-align:right;
      font-variant-numeric:tabular-nums; padding-right:2px; }
.chart .plot{ position:relative; height:var(--plot-h); background:#FAFBF7;
      border:1px solid var(--line); border-radius:10px; }
/* Deliberately NOT overflow:hidden — that clips the tooltip of any day near the
   top of the chart. The SVG is clipped instead, so the area fill still respects
   the rounded corners while tooltips can escape the box. */
.chart .plot > svg.line{ border-radius:9px; overflow:hidden; }
.chart svg.line{ display:block; width:100%; height:100%; }
.chart svg .grid{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.chart svg .area{ fill:rgba(0,119,182,.10); stroke:none; }
.chart svg .stroke{ fill:none; stroke:var(--blue); stroke-width:2.5;
      stroke-linejoin:round; stroke-linecap:round; }

/* hover overlay */
.chart .zones{ position:absolute; inset:0; }
.chart .zone{ position:absolute; top:0; bottom:0; width:34px; margin-left:-17px;
      cursor:crosshair; }
.chart .zone .guide{ position:absolute; left:17px; top:0; bottom:0; width:1px;
      background:var(--graphite); opacity:0; }
.chart .zone .dot{ position:absolute; left:17px; width:11px; height:11px;
      margin:0 0 -5.5px -5.5px; border-radius:50%; background:var(--chartreuse);
      border:2px solid var(--graphite); opacity:0; }
.chart .zone .tip{ position:absolute; left:17px; margin:0 0 14px 12px; opacity:0;
      pointer-events:none; z-index:3; background:var(--graphite); color:#fff;
      border-radius:10px; padding:7px 11px; min-width:96px;
      display:flex; flex-direction:column; gap:1px;
      box-shadow:0 6px 18px rgba(26,29,33,.28); }
.chart .zone .tip.flip{ margin-left:0; transform:translateX(-100%) translateX(-12px); }
/* High points put their tooltip below the dot so it can't be clipped off the top. */
.chart .zone .tip.below{ margin:14px 0 0 12px; }
.chart .zone .tip.below.flip{ margin-left:0; }
.chart .zone .tip b{ font-family:"Teko","Arial Narrow",sans-serif; font-size:22px;
      line-height:1.05; letter-spacing:.5px; color:var(--chartreuse);
      font-variant-numeric:tabular-nums; }
.chart .zone .tip em{ font-style:normal; font-size:11.5px; opacity:.85;
      white-space:nowrap; }
.chart .zone .tip i{ font-style:normal; font-size:11px; opacity:.7;
      white-space:nowrap; font-variant-numeric:tabular-nums; }
.chart .zone:hover .guide, .chart .zone:focus-visible .guide,
.chart .zone:hover .dot,   .chart .zone:focus-visible .dot,
.chart .zone:hover .tip,   .chart .zone:focus-visible .tip{ opacity:1; }
.chart .zone:focus-visible{ outline:none; }

.chart .xlab{ grid-column:2; position:relative; height:20px; margin-top:var(--s1); }
.chart .xlab span{ position:absolute; transform:translateX(-50%); font-size:11px;
      color:var(--muted); white-space:nowrap; }
@media(max-width:559px){
  .chart .zone{ width:26px; margin-left:-13px; }
  .chart .zone .guide, .chart .zone .dot, .chart .zone .tip{ left:13px; }
  .chart .xlab span{ font-size:10px; }
}

/* ---------- notices ---------- */
.note{ font-size:13.5px; color:var(--muted); }
.callout{ background:var(--surface); border:1px solid var(--line);
      border-left:4px solid var(--chartreuse); border-radius:12px;
      padding:var(--s3) var(--s4); margin-bottom:var(--s4); font-size:14px; }
.callout.blue{ border-left-color:var(--blue); }
.callout h3{ margin-bottom:var(--s1); }
.callout ul{ margin:var(--s2) 0 0; padding-left:18px; }
.callout li{ margin:var(--s1) 0; color:var(--muted); }
.callout li b{ color:var(--ink); }
.flash{ background:var(--chartreuse); color:var(--graphite); border-radius:10px;
      padding:10px 14px; font-weight:600; margin-bottom:var(--s4); }
.reasons{ margin:var(--s2) 0 0; padding-left:18px; font-size:13.5px; color:var(--muted); }
.reasons li{ margin:var(--s1) 0; }

/* ---------- forms ---------- */
label{ display:block; font-size:13px; color:var(--muted); margin:var(--s2) 0 var(--s1);
       font-weight:500; }
input,select,textarea{ width:100%; font:inherit; font-size:16px; padding:10px 12px;
      border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
      min-height:44px; }
.help{ font-size:12.5px; color:var(--muted); margin-top:var(--s1); }
.login-box{ max-width:400px; margin:8vh auto; }
.login-brand{ text-align:center; margin-bottom:var(--s4); }

/* ---------- misc ---------- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4);
     font-size:14px; }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; font-variant-numeric:tabular-nums; }
.split{ display:flex; gap:var(--s4); flex-wrap:wrap; }
.split > *{ flex:1 1 260px; }
details.exp{ border-top:1px solid var(--line); padding:var(--s2) 0; }
details.exp summary{ cursor:pointer; font-size:13.5px; color:var(--blue);
      min-height:32px; display:flex; align-items:center; }
pre.mono{ background:var(--graphite); color:#E8EAE6; border-radius:12px;
      padding:var(--s4); overflow-x:auto; font-size:12.5px; line-height:1.55; }
footer.app{ text-align:center; color:var(--muted); font-size:12.5px; margin-top:var(--s7); }
footer.app a{ color:var(--muted); text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
@media print{
  .topbar,.controls,.btn{ display:none !important; }
  .card,.tablewrap{ border:1px solid #999; break-inside:avoid; }
  body{ background:#fff; }
}