/* Web Lens design system: one file for the Web Lens app and every report (prospect audits,
   client reports), so they look the same and change together. The app links it
   (/design.css); reports inline it so each stays one self-contained file.

   Rules (Sunny, 2026-10-15): color only where it means something. Status colors mean
   good / needs work / behind / urgent; topic colors name a topic and nothing else; chart
   series colors name a series. A gradient only as a scale (red to green). No decorative
   gradients, no colored border on one side of a card, no dark cards. Light only. Calm,
   roomy, minimal: cards without borders on a cool-gray page, generous spacing, pill shapes. */

:root {
  color-scheme: light;
  /* Surfaces and ink */
  --bg: #eceef2; --card: #fbfbfd; --sunk: #f3f4f7; --ink: #16161d; --ink2: #4f5060; --muted: #8a8b98; --line: #e1e3ea; --hover: #f1f2f6;
  /* One accent for links and selection; accent2 is its pressed or hovered shade */
  --accent: #2a78d6; --accent2: #1f5fae; --accent-bg: #e3eefb;
  /* Text on an ink surface (a primary button, a pressed pill, a tooltip); the one shadow */
  --on-ink: #fff; --shadow: 0 0 40px rgba(20, 20, 30, .18);
  /* Status: fills (marks, gauges) and inks (text on a tint), with their tints */
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;
  --good-ink: #157a15; --warning-ink: #8a5a00; --serious-ink: #a8481f; --critical-ink: #b42f2f;
  --good-bg: #e6f5e6; --warning-bg: #fff3d9; --serious-bg: #fde9e0; --critical-bg: #fbe7e7;
  /* Scales for tracks: green to yellow to red */
  --zone-good: #dbf0db; --zone-ok: #fff0cf; --zone-poor: #f9dcdc;
  /* Topics: each names one topic everywhere */
  --t-speed: #2a78d6; --t-security: #6250d6; --t-access: #1baf7a; --t-search: #eda100; --t-content: #e87ba4; --t-own: #eb6834; --t-care: #008300; --t-ai: #6250d6;
  /* Chart series, in this fixed order (validated: dataviz palette) */
  --c0: #2a78d6; --c1: #eb6834; --c2: #1baf7a; --c3: #eda100; --c4: #e87ba4; --c5: #6250d6;
  /* Shape and space */
  --r-lg: 28px; --r-md: 20px; --r-sm: 12px; --r-pill: 999px;
  --gap: 24px; --pad: 28px;
  --font: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Older names the app still uses */
  --ok: var(--good-ink); --warn: var(--warning-ink); --bad: var(--critical-ink);
  --ok-bg: var(--good-bg); --warn-bg: var(--warning-bg); --bad-bg: var(--critical-bg);
  --clicks: var(--c0); --impressions: var(--c5); --ctr: var(--c2); --position: var(--c1); --on-metric: #fff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
.published-report { max-width: 1080px; margin: auto; padding: 32px 20px; }
.published-report > * { margin-bottom: 24px; }
.published-report h1 { overflow-wrap: anywhere; }
.published-report table { width: 100%; border-collapse: collapse; }
.published-report th, .published-report td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.published-report td { overflow-wrap: anywhere; }
.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.report-table { overflow-x: auto; }
@media print { .published-report { max-width: none; padding: 0; } .published-report .card { break-inside: auto; } .published-report tr { break-inside: avoid; } }
a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Card: the one container. No border; space does the separating. */
.card { background: var(--card); border: 0; border-radius: var(--r-lg); padding: var(--pad); min-width: 0; }

/* Pill: a status, a count or a label. data-status picks the meaning. */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.6; padding: 2px 11px; border-radius: var(--r-pill); background: var(--hover); color: var(--ink2); white-space: nowrap; }
[data-status=good] { --s: var(--good); --sb: var(--good-bg); --si: var(--good-ink); }
[data-status=warning] { --s: var(--warning); --sb: var(--warning-bg); --si: var(--warning-ink); }
[data-status=serious] { --s: var(--serious); --sb: var(--serious-bg); --si: var(--serious-ink); }
[data-status=critical] { --s: var(--critical); --sb: var(--critical-bg); --si: var(--critical-ink); }
/* Not a judgement: info marks a note or a kind, neutral a state with no color meaning */
[data-status=info] { --s: var(--accent); --sb: var(--accent-bg); --si: var(--ink); }
[data-status=neutral] { --s: var(--muted); --sb: var(--sunk); --si: var(--ink2); }
.pill[data-status] { background: var(--sb); color: var(--ink); }
.pill[data-status] > span[aria-hidden] { color: var(--s); font-weight: 800; }

/* Topic label: a small dot in the topic's color, then the name. */
.topic { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.topic::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t, var(--muted)); }
/* Work log categories (the four Lighthouse categories) */
.topic[data-topic="performance"] { --t: var(--t-speed); }
.topic[data-topic="accessibility"] { --t: var(--t-access); }
.topic[data-topic="best-practices"] { --t: var(--t-security); }
.topic[data-topic="seo"] { --t: var(--t-search); }

/* Buttons: pill shaped. Primary is ink; the rest are quiet. */
.btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #2b2b36; }

/* Segmented toggle: pills in a pill. */
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--card); max-width: 100%; overflow-x: auto; }
.seg button { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink2); background: none; border: 0; border-radius: var(--r-pill); padding: 7px 15px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--ink); background: var(--hover); }
.seg button[aria-pressed=true] { background: var(--ink); color: #fff; }

/* Tile: one number with its label. */
.tile { background: var(--sunk); border-radius: var(--r-md); padding: 18px 20px; min-width: 0; }
.tile .label, .tile > span { display: block; font-size: 13px; color: var(--muted); }
.tile .value, .tile > b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Tables: airy rows, quiet headers. */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; white-space: nowrap; }
td { padding: 14px; border-top: 1px solid var(--line); vertical-align: top; }

/* A section's lead paragraph. */
.lede { color: var(--ink2); margin: 0 0 20px; max-width: 720px; }

/* ---------- Charts (tools/design/charts.mjs) ---------- */
.line-chart{width:100%;height:auto;display:block;max-height:260px;overflow:visible}.line-chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}.line-chart .base{stroke:var(--line);stroke-width:1}
.line-chart .ax{font-size:12px;fill:var(--muted)}.line-chart .line{fill:none;stroke:var(--s);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.line-chart .area{fill:var(--s);opacity:.1}
.line-chart .dot{fill:var(--card);stroke:var(--s);stroke-width:2;opacity:0}.line-chart .hit{fill:transparent}.line-chart .pt:hover .dot{opacity:1}.line-chart .last{font-size:13px;font-weight:700;fill:var(--ink)}
.line-chart .mark{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}.line-chart .mk{font-size:12px;fill:var(--muted);font-weight:600}
.chart-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gap)}.chart-one figure,.chart-pair figure{margin:0}.chart-one h3,.chart-pair h3{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 8px}.chart-one figcaption,.chart-pair figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.semi{width:100%;display:block}.semi .tk{stroke:var(--muted);stroke-width:1.2;opacity:.6}.semi .tk.big{stroke-width:2;opacity:1}.semi .tl{font-size:11px;fill:var(--muted)}
.semi-track{fill:none;stroke:url(#rg);stroke-width:18;stroke-linecap:round;opacity:.16}.semi-val{fill:none;stroke:url(#rg);stroke-width:18;stroke-linecap:round}
.semi-dot{fill:var(--card);stroke:var(--ink);stroke-width:4}.semi-n{font-size:56px;font-weight:800;fill:var(--ink);letter-spacing:-2px}.semi-g{font-size:14px;fill:var(--muted);font-weight:600}
.gauges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.gauge{margin:0;text-align:center}.gauge svg{width:100%;max-width:120px}
.gauge .track{fill:none;stroke:var(--line);stroke-width:8}.gauge .arc{fill:none;stroke-width:8;stroke-linecap:round;stroke:var(--s)}
.gauge text{font-size:22px;font-weight:700;fill:var(--ink)}
.gauge figcaption strong{display:block;font-size:14px}.gauge figcaption span{font-size:12px;color:var(--muted)}
.donut{width:100%;max-width:200px}.donut .dseg{fill:none;stroke-width:28;outline:none}.donut .dseg:hover,.donut .dseg:focus{stroke-width:34}.donut .dn{font-size:22px;font-weight:800;fill:var(--ink)}.donut .dl{font-size:12px;fill:var(--muted)}
.bars{width:100%;height:auto;display:block;max-height:260px}.bars .bar{fill:var(--s,var(--accent))}.bars .bar.part{fill-opacity:.45}.bars g:hover .bar,.bars g:focus .bar{fill:var(--accent2)}.bars g{outline:none}.bars .base{stroke:var(--line);stroke-width:1}.bars .v{font-size:13px;font-weight:700;fill:var(--ink)}.bars .y{font-size:12px;fill:var(--muted)}