/* AdRadar design system, v1 (10 Nov 2026). Tokens first, then components. Docs: v2/DESIGN-SYSTEM.md, live: v2/ds/styleguide.html
   Rule of thumb: lime = brand and highlight only. Green / red / amber mean good / bad / watch. Categories (blue, teal, grey) never mean good or bad. */
:root{
  --ink:#101114;--ink-2:#2c2e33;--grey:#55575c;--paper:#f2f1ed;--card:#fafaf7;--line:#d4d2ca;--track:#e4e2da;--lime:#cff53d;
  --pos:#17583a;--pos-bg:#e1efe5;--pos-line:#b7d8c4;--pos-fill:#28804f;
  --neg:#7a1a14;--neg-bg:#f6e0dc;--neg-line:#e3b8b2;--neg-fill:#c23b2e;
  --warn:#6b4500;--warn-bg:#f8ecd0;--warn-line:#e8cf94;--warn-fill:#b87a00;
  --neu-fill:#b4b2a9;
  --cat-brand:#101114;--cat-content:#1f6f6a;--cat-product:#2b5ba8;--cat-company:#8a877f;--cat-other:#c9c7be;
  --cat-content-t:#1f6f6a;--cat-product-t:#2b5ba8;--cat-company-t:#5f5d57;
}
/* series colours: one class sets --c (fill) and --t (text) so meters, legends, bars and chips stay in sync */
.s-pos{--c:var(--pos-fill);--t:var(--pos)}.s-neg{--c:var(--neg-fill);--t:var(--neg)}.s-warn{--c:var(--warn-fill);--t:var(--warn)}.s-neu{--c:var(--neu-fill);--t:var(--grey)}
.s-brand{--c:var(--cat-brand);--t:var(--ink)}.s-content{--c:var(--cat-content);--t:var(--cat-content-t)}.s-product{--c:var(--cat-product);--t:var(--cat-product-t)}
.s-company{--c:var(--cat-company);--t:var(--cat-company-t)}.s-other{--c:var(--cat-other);--t:var(--grey)}

/* label: mono, short strings only. Long labels switch to sentence case (see .ds-label--sentence) */
.ds-label{font:12px/1.4 var(--mono);color:var(--grey);letter-spacing:.06em;text-transform:uppercase}
.ds-label--sentence{text-transform:none;letter-spacing:.01em;font-size:13px}

/* verdict: the one-line answer that opens a block */
.ds-verdict{display:flex;align-items:flex-start;gap:12px;border-radius:8px;padding:13px 16px;margin:0 0 28px;font-size:17px;font-weight:500;line-height:1.4;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.ds-verdict::before{content:"";flex:0 0 11px;height:11px;border-radius:50%;background:currentColor;margin-top:.45em}
.ds-verdict--neg{background:var(--neg-bg);border-color:var(--neg-line);color:var(--neg)}
.ds-verdict--pos{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos)}
.ds-verdict--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.ds-verdict--hl{background:var(--lime);border-color:var(--ink);color:var(--ink)}
.ds-verdict--info{border-color:var(--ink)}
.ds-verdict small{display:block;font-size:14px;font-weight:400;opacity:1;margin-top:2px}

/* meter: stacked share bar + legend */
.ds-meter{display:flex;height:16px;border-radius:8px;overflow:hidden;gap:2px}
.ds-meter>i{display:block;min-width:4px;background:var(--c)}
.ds-meter--lg{height:36px;border-radius:6px}
.ds-meter--lg>i{display:flex;align-items:center;padding:0 12px;font:500 13px/1 var(--sans);color:#fff;white-space:nowrap;overflow:hidden;font-style:normal}
.ds-meter--lg>i.s-other,.ds-meter--lg>i.s-neu,.ds-meter--lg>i.s-company{color:var(--ink)}
.ds-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.4;color:var(--grey)}
.ds-legend li::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:-1px}
.ds-legend b{font-weight:600;color:var(--ink)}

/* chips */
.ds-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ds-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px;font-size:13px;line-height:1.2;color:var(--ink-2)}
.ds-chip b{font-weight:600}
.ds-chip--neg{background:var(--neg-bg);border-color:var(--neg-line);color:var(--neg)}
.ds-chip--pos{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos)}
.ds-chip--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}

/* rating block */
.ds-rating{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:20px 36px;align-items:start;margin-bottom:32px}
.ds-rating__num{font-family:var(--serif);font-size:76px;line-height:.9;letter-spacing:-.03em}
.ds-stars{display:block;margin-top:8px;color:var(--warn-fill);letter-spacing:3px;font-size:19px;line-height:1}
.ds-stars span{color:#cfcdc4}
.ds-rating__note{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--grey)}
.ds-rating__themes{margin:16px 0 0}
.ds-rating__themes .ds-label{display:block;margin-bottom:8px}

/* quote cards */
.ds-quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:16px}
.ds-quote{--c:var(--neu-fill);background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px}
.ds-quote--pos{--c:var(--pos-fill)}.ds-quote--neg{--c:var(--neg-fill)}
.ds-quote__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ds-quote__tag{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--track);color:var(--ink-2)}
.ds-quote--pos .ds-quote__tag{background:var(--pos-bg);color:var(--pos)}.ds-quote--neg .ds-quote__tag{background:var(--neg-bg);color:var(--neg)}
.ds-quote__stars{color:var(--warn-fill);font-size:14px;letter-spacing:1px}.ds-quote__stars span{color:#cfcdc4}
.ds-quote p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.ds-quote__meta{margin-top:auto;display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--grey)}
.ds-quote__meta a{font-weight:500;text-underline-offset:4px}
mark.ds-hit{background:var(--neg-bg);color:var(--neg);padding:0 3px;border-radius:2px;font-weight:500}
.ds-quote--pos mark.ds-hit{background:var(--pos-bg);color:var(--pos)}

/* ranked rows with inline bars */
.ds-rows{list-style:none;margin:0;padding:0}
.ds-rowhead,.ds-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 84px;gap:8px 24px;align-items:center}
.ds-rowhead{padding:0 0 10px;border-bottom:1px solid var(--ink)}
.ds-row{padding:14px 0;border-bottom:1px solid var(--line)}
.ds-row__title{margin:0;font-size:17px;font-weight:500;line-height:1.3}
.ds-row__sub{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--grey);overflow-wrap:anywhere}
.ds-row__cat{font-weight:600;color:var(--t)}
.ds-bar{height:10px;background:var(--track);border-radius:5px;overflow:hidden}
.ds-bar>i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:5px}
.ds-num{font-family:var(--mono);font-size:15px;text-align:right}
.ds-more>summary{cursor:pointer;list-style:none;padding:16px 0 0;font-size:15px;font-weight:500}
.ds-more>summary::-webkit-details-marker{display:none}
.ds-more>summary::after{content:" ↓"}.ds-more[open]>summary::after{content:" ↑"}
.ds-more[open]>summary{padding-bottom:0}

/* channel cards */
.ds-chans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.ds-chan{background:var(--card);border:1px solid var(--line);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.ds-chan__name{margin:0;font:400 28px/1 var(--serif)}
.ds-chan__big{margin:0;font:400 60px/.9 var(--serif);letter-spacing:-.03em}
.ds-chan__big small{font:400 14px var(--sans);letter-spacing:0;color:var(--grey)}
.ds-chan__found{margin:0;font-size:14px;line-height:1.5;color:var(--grey)}.ds-chan__found b{color:var(--ink);font-weight:600}
.ds-chan__facts{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.ds-chan__facts dt{color:var(--grey)}.ds-chan__facts dd{margin:0;font-family:var(--mono);text-align:right}

/* evidence level: three dots, colour says how solid the sources are */
.ds-ev{display:inline-flex;align-items:center;gap:8px;font:12px/1.2 var(--mono);color:var(--t)}
.ds-ev i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--c);box-sizing:border-box}
.ds-ev i.on{background:var(--c)}
.ds-ev--low{--c:var(--warn-fill);--t:var(--warn)}.ds-ev--med{--c:var(--cat-product);--t:var(--cat-product-t)}.ds-ev--high{--c:var(--pos-fill);--t:var(--pos)}

@media (max-width:700px){
  .ds-rating{grid-template-columns:minmax(0,1fr)}
  .ds-rowhead{display:none}
  .ds-row{grid-template-columns:minmax(0,1fr) 56px}
  .ds-row .ds-bar{grid-column:1/-1;grid-row:2}
  .ds-meter--lg{height:30px}
  .ds-meter--lg>i{font-size:0;padding:0}
}

/* ---- mark: one yes / no / not-stated cell on a comparison page (comparison pages, gen_vs_pages.py) */
.ds-mark{display:inline-flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.ds-mark i{flex:0 0 auto;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--track);border:1px solid var(--line)}
.ds-mark--pos{color:var(--pos)}.ds-mark--pos i{background:var(--pos-fill);border-color:var(--pos-fill)}
.ds-mark--neg{color:var(--neg)}.ds-mark--neg i{background:var(--neg-fill);border-color:var(--neg-fill)}
.ds-mark--warn{color:var(--warn)}.ds-mark--warn i{background:var(--warn-fill);border-color:var(--warn-fill)}
.ds-mark small{display:block;font-size:13px;line-height:1.45;color:var(--grey);margin-top:2px}
/* ---- comparison table: one row per question, two product columns */
.ds-cmp{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.ds-cmp th,.ds-cmp td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid var(--line)}
.ds-cmp thead th{padding:12px 20px 10px 0;border-bottom:1px solid var(--ink);font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1}
.ds-cmp thead th:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:500;vertical-align:bottom}
.ds-cmp tbody th{font-weight:500;font-size:15px;line-height:1.4;color:var(--ink);width:26%}
.ds-cmp tbody th small{display:block;font-weight:400;font-size:13px;color:var(--grey);margin-top:2px}
.ds-cmp td{width:37%}
.ds-cmp td.ds-cmp__us{background:var(--card);padding-left:16px;box-shadow:inset 3px 0 0 var(--lime)}
.ds-cmp thead th.ds-cmp__us{background:var(--card);padding-left:16px;box-shadow:inset 3px 0 0 var(--lime)}
@media (max-width:760px){
  .ds-cmp thead{display:none}
  .ds-cmp tr{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;border-bottom:1px solid var(--line);padding:14px 0}
  .ds-cmp tbody th{grid-column:1/-1;width:auto;padding:0 0 8px;border:0}
  .ds-cmp td{width:auto;padding:0;border:0}
  .ds-cmp td::before{content:attr(data-col);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
  .ds-cmp td.ds-cmp__us{padding-left:12px}
}

/* ---- brand marks (v2/icons, monochrome, fill=currentColor; never brand colours: they would clash with good/bad) */
.ico{display:inline-block;vertical-align:-4px;flex:none}
.ico--img{filter:grayscale(1) contrast(1.15)}
.ico-w{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;white-space:nowrap}
.ico-row{display:inline-flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.ico-row .ico-w{font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.01em}
/* ---- channel tag (category colours) */
.ds-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;line-height:1;color:#fff}
.ds-tag--ads{background:var(--ink)}
.ds-tag--reviews{background:var(--cat-content)}
.ds-tag--site{background:var(--cat-product)}
.ds-tag--project{background:var(--cat-company);color:var(--ink)}
.ds-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ds-kicker__tags{display:inline-flex;gap:6px}
.ds-kicker__name{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--grey)}
.ds-try{display:inline-block;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;margin-right:8px;line-height:1;vertical-align:1px}
/* ---- sources strip on the home page */
.ds-src{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ds-src__name{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.1}
.ds-src__note{font-family:var(--mono);font-size:12px;color:var(--grey)}
/* ---- persona card: the question that person would type, then why */
.ds-persona__q{margin:0 0 14px;padding:12px 16px;background:#fff;border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:15px;line-height:1.45;font-weight:500;color:var(--ink)}
/* ---- plaque under a card grid */
.ds-plaque{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:20px 24px;border:1px solid var(--ink);border-top:0;background:var(--card);text-decoration:none;color:var(--ink)}
.ds-plaque:hover{background:var(--paper)}
.ds-plaque__text{flex:1 1 360px;font-size:16px;line-height:1.5}
.ds-plaque__text strong{font-weight:600}
.ds-plaque__arrow{font-family:var(--mono);font-size:16px}

/* ---- status tags (same palette as the verdict plates) and small helpers for feature pages */
.ds-tag--pos{background:var(--pos-bg);color:var(--pos);border:1px solid var(--pos-line)}
.ds-tag--neg{background:var(--neg-bg);color:var(--neg);border:1px solid var(--neg-line)}
.ds-tag--warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.ds-tag--neu{background:var(--track);color:var(--grey);border:1px solid var(--line)}
.ds-tag .ico{vertical-align:-2px}
.ds-days{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
/* event feed: one coloured tag per event type */
.ds-events{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ds-events li{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px 20px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.ds-events .ds-tag{justify-self:start;margin-top:3px}
@media (max-width:560px){.ds-events li{grid-template-columns:1fr}}
/* number cards */
.ds-facts{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);grid-template-columns:repeat(4,1fr)}
.ds-facts>div{background:var(--card);padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;min-height:150px}
.ds-facts small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.ds-facts b{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4vw,54px);line-height:.95;letter-spacing:-.02em}
.ds-facts b.neg{color:var(--neg)}
.ds-facts b.pos{color:var(--pos)}
.ds-facts span{font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:auto}
@media (max-width:900px){.ds-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.ds-facts{grid-template-columns:1fr}}
/* a notification card (alert example) */
.ds-alert{background:#fff;border:1px solid var(--ink);border-left:5px solid var(--neg-fill);box-shadow:6px 6px 0 var(--ink);padding:16px 18px;max-width:34em}
.ds-alert__head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--grey);margin-bottom:10px}
.ds-alert__title{font-weight:600;font-size:15.5px;margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ds-alert p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* a live sample of components, framed */
.ds-sample{background:#fff;border:1px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:22px 24px}
.ds-sample__cap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin:12px 0 0}
/* illustration box above a step */
.ds-illus{height:150px;border:1px solid var(--ink);background:var(--card);display:flex;align-items:center;justify-content:center;margin-bottom:26px}

/* ---- product screenshot with a caption, and a two-up grid of them */
.ds-shot{margin:0;background:#fff;border:1px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.ds-shot img{display:block;width:100%;height:auto}
.ds-shot figcaption{padding:10px 14px 12px;border-top:1px solid var(--ink);background:var(--card);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);line-height:1.5}
.ds-shots{display:grid;gap:32px;grid-template-columns:repeat(2,1fr);align-items:start}
@media (max-width:760px){.ds-shots{grid-template-columns:1fr}}