/* pruuf.css — PRUUF's design system, extracted from the v1 CTO handoff.
 *
 * Source: design/pruuf-components.html (the component library) — 13 components,
 * each with its exact CSS. This file is that CSS, unmodified, plus the token
 * block it depends on. Where a component's rules are copied verbatim, they are
 * marked with the library section they came from so the two can be diffed.
 *
 * WHY THIS FILE EXISTS. Before it, every surface carried its own :root block in
 * an inline <style>: 18 files, 24 token names, five palettes that had already
 * drifted. --green was defined four different ways (#22c55e / #15803d /
 * #059669 / #16a34a). Applying a redesign file-by-file would recreate that
 * within a release.
 *
 * THE EXTENSIONS ARE THE EXCEPTION. A browser extension cannot link a remote
 * stylesheet, so extension/popup.css carries a copy of everything below.
 * check-extensions.js hash-compares the four extension variants against each
 * other; keeping that copy in step with this file is manual.
 *
 * The typeface is Source Sans 3. The web pages load it from Google Fonts; the
 * extensions must bundle it, since an extension cannot rely on a remote font.
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800&display=swap');


/* ── 0 · Design tokens ─────────────────────────────────── */
:root{
  --slate:#476F95; --navy:#173E5A; --grayblue:#8092A6; --pink:#FADEF5; --off:#F9F6F3;
  --ink:#3A4756; --soft:#69788A; --border:#DDE2E8; --track:#E2E6EB; --hover:#F4F6F8;
  --ok:#5FA27D;   --ok-bg:#D4EADE;   /* checks out  70–100 */
  --warn:#A16840; --warn-bg:#F8C7A3; /* closer look 35–69  */
  --bad:#94364C;  --bad-bg:#FFC2CD;  /* didn't check out 0–34 */
  --info:#328B88; --info-bg:#C6E7E6;
}
font-family:'Source Sans 3',-apple-system,'Segoe UI',Roboto,sans-serif;
/* text sizes: 15 / 17 / 20px (user A/A/A control) */

/* ── 1 · Logo chip ─────────────────────────────────── */
.logochip{background:#fff;border-radius:7px;padding:4px 9px;display:inline-flex;align-items:center}
.logochip img{height:22px;display:block}
.logochip.sm{padding:3px 7px;border-radius:5px}
.logochip.sm img{height:17px}

/* ── 2 · Mark family (organic taper) ─────────────────────────────────── */
.mk{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center}
.mk svg{width:24px;height:24px}
.mk.ok{background:var(--ok-bg)} .mk.warn{background:var(--warn-bg)}
.mk.bad{background:var(--bad-bg)} .mk.info{background:var(--info-bg)}
/* SVG paths: copy from prototype source, const MARK = {...} */

/* ── 3 · Verdict card (compact) ─────────────────────────────────── */
.vcard{background:#EAF0F6;border:2px solid #BCCEDF;padding:12px 14px;display:flex;flex-direction:column;gap:9px;max-width:372px}
.vcard .src{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .vrow{display:flex;align-items:center;gap:12px}
.vcard .verdict{font-size:17px;font-weight:700;color:var(--navy);flex:1}
.vcard .big{font-weight:800;font-size:27px;color:var(--navy)}
.vcard .big small{font-size:12px;font-weight:700;opacity:.65}

/* ── 4 · Facts / opinion bar ─────────────────────────────────── */
.fbar{height:10px;display:flex;background:var(--track)}
.fbar span{display:block;height:100%}
.fcap{display:flex;justify-content:space-between;font-size:10px;color:var(--soft);margin-top:-4px}
.fcap .tag{font-weight:700;letter-spacing:.06em}

/* ── 5 · Score chip (minimized bar) ─────────────────────────────────── */
.score-chip{font-weight:800;font-size:15px;padding:4px 11px;display:inline-block}
.score-chip.trust{background:var(--ok-bg);color:#2F6247}
.score-chip.look{background:var(--warn-bg);color:#6E4322}
.score-chip.care{background:var(--bad-bg);color:var(--bad)}

/* ── 6 · Bottom bar — the 5 states ─────────────────────────────────── */
.pbar{background:var(--slate);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:41px;font-weight:700;font-size:15px;max-width:372px}
.pbar .cta-btn{background:var(--navy);padding:8px 22px;cursor:pointer}
.pbar .x{background:rgba(255,255,255,.18);padding:1px 9px;cursor:pointer}
.pbar.center{justify-content:center}

/* ── 7 · Lens spinner (Pruufreading) ─────────────────────────────────── */
.spin{width:26px;height:15px;display:inline-block;position:relative;vertical-align:-3px}
.spin i{position:absolute;left:0;right:0;height:2.5px;background:rgba(255,255,255,.34)}
.spin i:nth-child(1){top:2px}.spin i:nth-child(2){top:6.5px}.spin i:nth-child(3){top:11px;right:6px}
.spin b{position:absolute;top:.5px;width:13px;height:13px;border-radius:50%;border:2.5px solid #fff;
  background:rgba(255,255,255,.14);box-sizing:border-box;animation:lens 1.6s ease-in-out infinite}
@keyframes lens{0%,100%{left:-2px}50%{left:15px}}

/* ── 8 · Scorecard category row ─────────────────────────────────── */
.cat{background:#fff;border:1.5px solid var(--border);max-width:372px}
.cat .row{display:flex;align-items:center;gap:10px;padding:13px 14px;min-height:48px}
.cat .icon{width:27px;height:27px;display:flex;align-items:center;justify-content:center}
.cat .icon svg{width:60%;height:60%}
.cat .q{font-size:14px;font-weight:700;flex:1;color:var(--ink)}
.cat .pts{font-weight:800;font-size:13px}
.cat .a{font-size:13px;color:var(--soft);line-height:1.6;padding:0 14px 13px 51px}

/* ── 9 · Takeaway card + contextual disclaimer ─────────────────────────────────── */
.take{background:var(--navy);color:#fff;padding:16px 18px;max-width:372px}
.take .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;color:#9FB3C4;margin-bottom:6px}
.take .txt{font-size:16px;font-weight:700;line-height:1.45}
.take .disc{font-size:12px;color:#C7D3DD;font-style:italic;border-top:1px solid rgba(255,255,255,.18);margin-top:12px;padding-top:10px}

/* ── 10 · Settings row + toggle ─────────────────────────────────── */
.set-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid #EEF1F4;font-size:14px;min-height:44px;cursor:pointer;background:#fff;max-width:372px}
.set-row:hover{background:var(--hover)}
.set-row .lab{flex:1}
.set-row .lab small{display:block;font-size:12px;color:var(--soft)}
.sw{width:40px;height:22px;background:#C9CFD6;position:relative;transition:background .15s;cursor:pointer;flex-shrink:0}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;transition:left .15s}
.sw.on{background:var(--slate)}
.sw.on::after{left:20px}

/* ── 11 · Buttons ─────────────────────────────────── */
.btn{border:2px solid var(--slate);background:#fff;color:var(--slate);font-weight:700;font-size:14px;padding:12px 18px;cursor:pointer;min-height:46px}
.btn.primary{background:var(--slate);color:#fff;border-color:var(--slate)}
.btn.primary:hover{background:var(--navy)}
.btn-confirm{background:var(--navy);color:#fff;border:none;font-weight:700;font-size:14px;padding:12px 22px;cursor:pointer}

/* ── 12 · Header icons + text size ─────────────────────────────────── */
.hicon{color:#D9DEE4;cursor:pointer;transition:color .15s;font-size:17px}
.hicon:hover{color:#fff}
.tsize span{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;color:#D9DEE4;font-weight:700;cursor:pointer}
.tsize span.on{background:#fff;color:var(--slate)}
.tsize span:nth-child(1){font-size:11px}.tsize span:nth-child(2){font-size:14px}.tsize span:nth-child(3){font-size:17px}