/* ============================================================
   Outrings — design system
   Light-first, generous whitespace, system typography.
   Colour is reserved for meaning: status and the single accent.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* surfaces */
  --bg:          #fbfbfd;
  --bg-elev:     #ffffff;
  --card:        #ffffff;
  --card-hover:  #f5f5f7;
  --fill:        #f5f5f7;
  --fill-strong: #ececee;

  /* hairlines */
  --line:        rgba(0, 0, 0, .09);
  --line-strong: rgba(0, 0, 0, .16);

  /* text */
  --fg:         #1d1d1f;
  --fg-2:       #45464b;
  --fg-3:       #63676e;   /* 5.50:1 on --bg */
  --fg-4:       #6b7079;   /* 4.82:1 on --bg — the floor for body text */

  /* accent */
  --accent:      #0071e3;
  --accent-ink:  #0058b0;   /* accent as text: 5.87:1 on accent-soft */
  --accent-hi:   #0077ed;
  --accent-fg:   #ffffff;
  --accent-soft: rgba(0, 113, 227, .10);
  --ring:        rgba(0, 113, 227, .35);

  /* status */
  --pass:      #106b36;  --pass-soft:  rgba(52, 199, 89, .13);   /* 5.77:1 on its own pill */
  --warn:      #7d4200;  --warn-soft:  rgba(255, 149, 0, .14);   /* 6.87:1 */
  --fail:      #b01e16;  --fail-soft:  rgba(255, 59, 48, .12);   /* 5.70:1 */
  --info:      #0058b0;  --info-soft:  rgba(0, 113, 227, .10);   /* 5.87:1 */
  --na:        #63676e;  --na-soft:    rgba(134, 134, 139, .12);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --sh-2: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-3: 0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04);

  --ease: cubic-bezier(.32, .72, 0, 1);
}

:root[data-theme="light"] { color-scheme: light; }

/* Dark tokens live in a reusable block so both the media query and the manual
   [data-theme] override apply exactly the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #05060a;
    --bg-elev:     #0c0e14;
    --card:        #0b0d12;
    --card-hover:  #12151d;
    --fill:        #0a0c11;
    --fill-strong: #151922;

    --line:        rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .15);

    --fg:   #f5f5f7;
    --fg-2: #d1d1d6;
    --fg-3: #a8aeb9;   /* 8.4:1 on --card */
    --fg-4: #8a8f99;   /* 5.99:1 on --card */

    --accent:      #0a84ff;
    --accent-ink:  #6cb6ff;   /* accent as text on dark surfaces */
    --accent-hi:   #339cff;
    --accent-soft: rgba(10, 132, 255, .16);
    --ring:        rgba(10, 132, 255, .45);

    --pass: #37d067; --pass-soft: rgba(48, 209, 88, .16);
    --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, .16);
    --fail: #ff6961; --fail-soft: rgba(255, 69, 58, .16);
    --info: #0a84ff; --info-soft: rgba(10, 132, 255, .16);
    --na:   #a8aeb9; --na-soft:   rgba(152, 152, 157, .16);

    --sh-1: 0 1px 2px rgba(0,0,0,.5);
    --sh-2: 0 4px 14px rgba(0,0,0,.55);
    --sh-3: 0 14px 40px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:          #05060a;
    --bg-elev:     #0c0e14;
    --card:        #0b0d12;
    --card-hover:  #12151d;
    --fill:        #0a0c11;
    --fill-strong: #151922;

    --line:        rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .15);

    --fg:   #f5f5f7;
    --fg-2: #d1d1d6;
    --fg-3: #a8aeb9;   /* 8.4:1 on --card */
    --fg-4: #8a8f99;   /* 5.99:1 on --card */

    --accent:      #0a84ff;
    --accent-ink:  #6cb6ff;   /* accent as text on dark surfaces */
    --accent-hi:   #339cff;
    --accent-soft: rgba(10, 132, 255, .16);
    --ring:        rgba(10, 132, 255, .45);

    --pass: #37d067; --pass-soft: rgba(48, 209, 88, .16);
    --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, .16);
    --fail: #ff6961; --fail-soft: rgba(255, 69, 58, .16);
    --info: #0a84ff; --info-soft: rgba(10, 132, 255, .16);
    --na:   #a8aeb9; --na-soft:   rgba(152, 152, 157, .16);

    --sh-1: 0 1px 2px rgba(0,0,0,.5);
    --sh-2: 0 4px 14px rgba(0,0,0,.55);
    --sh-3: 0 14px 40px rgba(0,0,0,.7);
  }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 96px; }
@media (min-width: 768px) { .wrap { padding: 0 32px 120px; } }

h1, h2, h3, h4 {
  margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.12;
}
p { margin: 0; }

a { color: var(--accent); text-decoration: none; }

/* Visible only on keyboard focus; the first thing in the tab order. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  padding: 11px 18px; border-radius: 0 0 12px 12px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 500;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; text-decoration: none; outline: 3px solid var(--ring); }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--mono); font-size: .88em; letter-spacing: 0; }

::selection { background: var(--accent-soft); }

/* ---------- icons ---------- */
.i {
  width: 20px; height: 20px; flex: none; display: inline-block;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.22em; overflow: visible;
}
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 26px; height: 26px; }

/* ---------- header ---------- */
/* Full-bleed bar with the content column re-created inside it. Previously the
   header lived inside .wrap, so it was only as wide as the text column and page
   content scrolled past it on both sides — which is what made the translucent
   panel read as a hard-edged rectangle. Solid background, no blur: a partially
   blurred strip over an unblurred page is the artefact, not the fix. */
.top {
  position: sticky; top: 0; z-index: 40;
  width: 100%;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.top.stuck { border-bottom-color: var(--line); }
.top-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: nowrap; min-width: 0;
}
@media (min-width: 768px) { .top-inner { padding: 14px 32px; } }
.brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.brand .mark .i { width: 17px; height: 17px; stroke-width: 2.25; }
.nav-wide { display: none; align-items: center; gap: 2px; min-width: 0; }
/* Six links plus the brand and actions need real room; below this the sheet takes over. */
@media (min-width: 900px) { .nav-wide { display: flex; } }
.nav-wide a {
  color: var(--fg-2); font-size: 14.5px; font-weight: 500; white-space: nowrap;
  padding: 7px 12px; border-radius: 980px; transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-wide a:hover { background: var(--fill-strong); color: var(--fg); text-decoration: none; }
.nav-wide a[aria-current="page"] { color: var(--fg); background: var(--fill-strong); }

.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* ---------- mobile menu ---------- */
.menu-toggle {
  width: 38px; height: 38px; padding: 0; border-radius: 11px; flex: none;
  background: transparent; border: 1px solid var(--line); color: var(--fg);
}
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle:hover { background: var(--fill-strong); }
.menu-toggle .bars { display: block; width: 17px; height: 12px; position: relative; }
.menu-toggle .bars i {
  position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px;
  background: currentColor; transition: transform .28s var(--ease), opacity .18s var(--ease);
}
.menu-toggle .bars i:nth-child(1) { top: 0; }
.menu-toggle .bars i:nth-child(2) { top: 5.1px; }
.menu-toggle .bars i:nth-child(3) { top: 10.2px; }
/* Collapse to an X while the sheet is open. */
.menu-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5.1px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 38; background: rgba(0,0,0,.28);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .26s var(--ease);
}
.nav-scrim.open { opacity: 1; }
@media (min-width: 900px) { .nav-scrim { display: none !important; } }

.mobile-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 39;
  padding: 72px 14px 18px;
  /* Same surface as the bar it drops out of. A lighter panel under a darker bar
     was the visible seam. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transform: translateY(-102%);
  transition: transform .34s var(--ease);
  max-height: 100dvh; overflow-y: auto;
}
.mobile-nav.open { transform: translateY(0); }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 14px; border-radius: 13px;
  color: var(--fg); font-size: 16.5px; font-weight: 500; text-decoration: none;
  min-height: 48px;   /* comfortable tap target */
}
.mobile-nav a:hover, .mobile-nav a:active { background: var(--fill-strong); text-decoration: none; }
.mobile-nav a .i { color: var(--fg-3); flex: none; }
.mobile-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.mobile-nav a[aria-current="page"] .i { color: var(--accent); }
.mobile-nav a .tick { margin-left: auto; }
.mobile-nav-sep { height: 1px; background: var(--line); margin: 8px 12px; }

body.nav-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 8px; text-align: center; }
@media (min-width: 768px) { .hero { padding: 96px 0 16px; } }
.hero h1 {
  font-size: clamp(38px, 7.5vw, 66px); line-height: 1.05;
  letter-spacing: -0.035em; margin-bottom: 20px;
}
.hero .sub {
  color: var(--fg-3); font-size: clamp(17px, 2.3vw, 21px); line-height: 1.45;
  max-width: 40ch; margin: 0 auto 40px; letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 10px; margin-bottom: 24px;
  border-radius: 980px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em;
}
.eyebrow .i { width: 15px; height: 15px; }

/* ---------- search ---------- */
.search { max-width: 620px; margin: 0 auto; }
.search-row {
  display: flex; gap: 10px; flex-direction: column;
}
@media (min-width: 620px) { .search-row { flex-direction: row; } }

.input-shell { position: relative; flex: 1; display: flex; align-items: center; }
.input-shell > .i {
  position: absolute; left: 16px; color: var(--fg-4); pointer-events: none;
  transition: color .2s var(--ease);
}
.input-shell:focus-within > .i { color: var(--accent); }

input[type="text"], input[type="search"] {
  width: 100%; padding: 15px 16px 15px 46px;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: 17px; letter-spacing: -0.01em;
  outline: none; box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
}
input::placeholder { color: var(--fg-4); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }

button {
  /* Explicit, never `buttontext`. A forced theme leaves the UA system colour
     resolving to the *other* scheme, which is how category cards ended up with
     white text on a white card. */
  color: var(--fg);
  font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; border: 1px solid transparent; border-radius: var(--r);
  padding: 15px 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease), opacity .2s;
}
/* Only the genuinely button-shaped controls stay on one line. Card-sized buttons
   (category cards, check and fix rows) must wrap, or their min-content width
   forces grid columns far wider than the container. */
.btn-primary, .btn-secondary, .btn-ghost, .btn-sm, .tab, .pillbtn, .segmented button {
  white-space: nowrap;
}
button:active:not(:disabled) { transform: scale(.975); }
button:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-1); }
.btn-primary:not(:disabled):hover { background: var(--accent-hi); }
.btn-secondary { background: var(--fill-strong); color: var(--fg); }
.btn-secondary:not(:disabled):hover { background: var(--line-strong); }
.btn-ghost { background: var(--bg-elev); color: var(--fg-2); border-color: var(--line); }
.btn-ghost:not(:disabled):hover { background: var(--card-hover); color: var(--fg); }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: 10px; }

/* segmented control, iOS style */
.segmented {
  display: inline-flex; padding: 3px; gap: 3px; margin: 20px auto 0;
  background: var(--fill-strong); border-radius: 11px;
}
.segmented button {
  padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 8px;
  background: transparent; color: var(--fg-2); border: none; box-shadow: none;
}
.segmented button[aria-pressed="true"] {
  background: var(--bg-elev); color: var(--fg); box-shadow: var(--sh-1);
}
.center { display: flex; justify-content: center; }

.hint { color: var(--fg-4); font-size: 13.5px; margin-top: 18px; text-align: center; }

/* ---------- progress ---------- */
.progress {
  max-width: 620px; margin: 40px auto 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.progress-head {
  display: flex; align-items: center; gap: 11px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500;
}
.progress-track { height: 3px; background: var(--fill-strong); overflow: hidden; }
.progress-fill {
  height: 100%; background: var(--accent); width: 0;
  transition: width .5s var(--ease);
}
.progress-body { padding: 8px 20px 16px; max-height: 210px; overflow-y: auto; }
.pline {
  display: flex; gap: 12px; align-items: baseline; padding: 6px 0;
  font-size: 14px; color: var(--fg-3);
  animation: slidein .32s var(--ease) both;
}
.pline .t { font-family: var(--mono); font-size: 11.5px; color: var(--fg-4);
            min-width: 44px; text-align: right; flex: none; }
.pline.active { color: var(--fg); }
@keyframes slidein { from { opacity: 0; transform: translateY(5px); } }

.spinner {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- alerts ---------- */
.alert {
  display: flex; gap: 12px; padding: 15px 18px; border-radius: var(--r);
  font-size: 15px; line-height: 1.45; align-items: flex-start; margin: 20px 0;
  border: 1px solid transparent;
}
.alert .i { margin-top: 1px; }
.alert-fail { background: var(--fail-soft); color: var(--fail); border-color: color-mix(in srgb, var(--fail) 24%, transparent); }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert strong { font-weight: 600; }
.alert a { color: inherit; text-decoration: underline; }

/* ---------- result header ---------- */
.summary {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); padding: 28px; margin: 24px 0;
  display: flex; flex-direction: column; gap: 26px;
  animation: rise .5s var(--ease) both;
}
@media (min-width: 860px) { .summary { flex-direction: row; align-items: center; padding: 34px; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.gauge { display: flex; align-items: center; gap: 22px; flex: none; }
.gauge-ring { position: relative; width: 116px; height: 116px; flex: none; }
.gauge-ring svg { width: 116px; height: 116px; transform: rotate(-90deg); }
.gauge-ring .track { stroke: var(--fill-strong); }
.gauge-ring .val { stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease), stroke .4s; }
.gauge-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.gauge-num { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gauge-of { font-size: 12px; color: var(--fg-4); margin-top: 3px; }
.grade {
  font-size: 15px; font-weight: 600; padding: 5px 13px; border-radius: 980px;
  display: inline-block;
}
.verdict { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 5px; }

.summary-main { flex: 1; min-width: 0; }
.summary-url {
  font-size: 15px; color: var(--fg-2); word-break: break-all; margin-bottom: 4px;
}
.summary-meta {
  font-size: 13px; color: var(--fg-4); font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px;
}
.tallies { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tally {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 980px; font-size: 13px; font-weight: 500;
}
.tally.pass { background: var(--pass-soft); color: var(--pass); }
.tally.warn { background: var(--warn-soft); color: var(--warn); }
.tally.fail { background: var(--fail-soft); color: var(--fail); }
.tally.info { background: var(--info-soft); color: var(--info); }
.tally.na   { background: var(--na-soft);   color: var(--na); }

.summary-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 860px) { .summary-actions { flex-direction: column; flex: none; } }

/* ---------- tabs ---------- */
.tabs {
  display: flex; gap: 3px; padding: 4px; margin: 26px 0 24px;
  background: var(--fill-strong); border-radius: 13px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1; padding: 9px 16px; font-size: 14.5px; font-weight: 500;
  border-radius: 9px; background: transparent; color: var(--fg-2);
  border: none; white-space: nowrap; box-shadow: none;
}
.tab[aria-selected="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: var(--sh-1); }
.tab .count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 980px;
  background: var(--fill-strong); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .count { background: var(--accent-soft); color: var(--accent-ink); }

.panel { animation: fade .35s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(7px); } }

/* ---------- category cards ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cat {
  min-width: 0; white-space: normal;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; text-align: left; width: 100%; display: block;
  box-shadow: var(--sh-1); font-family: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  animation: rise .45s var(--ease) both;
}
.cat:hover { transform: translateY(-2px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cat-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.cat-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill-strong); color: var(--fg-2);
}
.cat-icon .i { width: 18px; height: 18px; }
.cat-score { font-size: 27px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cat-bar { height: 6px; border-radius: 980px; background: var(--fill-strong); overflow: hidden; margin: 16px 0 12px; }
.cat-bar > i { display: block; height: 100%; border-radius: 980px; width: 0;
               transition: width 1s var(--ease); }
.cat-affects { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.chiplet {
  font-size: 11.5px; padding: 3px 9px; border-radius: 980px;
  background: var(--fill-strong); color: var(--fg-3); white-space: nowrap;
}
.cat-desc { color: var(--fg-3); font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
.cat-foot { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg-4);
            font-variant-numeric: tabular-nums; }
.cat-foot .dot { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- recommendations ---------- */
.rec-hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 26px; box-shadow: var(--sh-1); margin-bottom: 22px;
  display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .rec-hero { grid-template-columns: repeat(3, 1fr); } }
.stat .n { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--fg-3); font-size: 13.5px; margin-top: 3px; line-height: 1.35; }

.rec {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 12px; overflow: hidden; box-shadow: var(--sh-1);
  animation: rise .4s var(--ease) both;
}
.rec-head { white-space: normal; display: flex; gap: 15px; padding: 18px 20px; align-items: flex-start;
            width: 100%; background: none; border: none; text-align: left; color: inherit;
            font-family: inherit; border-radius: 0; }
.rec-head:hover { background: var(--card-hover); }
.rank {
  width: 30px; height: 30px; border-radius: 9px; flex: none; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill-strong); color: var(--fg-2); font-variant-numeric: tabular-nums;
}
/* The head is built from spans, so each part needs to be told to stack. */
.rec-main { flex: 1; min-width: 0; display: block; }
.rec-title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.rec-found { display: block; color: var(--fg-3); font-size: 14px; margin-top: 3px; word-break: break-word; }
.rec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.gain {
  font-size: 15px; font-weight: 600; color: var(--pass); flex: none;
  font-variant-numeric: tabular-nums; text-align: right;
}
.gain small { display: block; font-size: 11px; color: var(--fg-4); font-weight: 400; }

.sev { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 980px; text-transform: capitalize; }
.sev.critical { background: var(--fail-soft); color: var(--fail); }
.sev.high     { background: var(--fail-soft); color: var(--fail); }
.sev.medium   { background: var(--warn-soft); color: var(--warn); }
.sev.low      { background: var(--na-soft);   color: var(--na); }
.effort { font-size: 11.5px; padding: 3px 9px; border-radius: 980px;
          background: var(--fill-strong); color: var(--fg-3); }

.rec-body { padding: 0 20px 20px 65px; border-top: 1px solid var(--line); }

/* ---------- checks ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.pillbtn {
  padding: 8px 15px; border-radius: 980px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--fg-2); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
}
.pillbtn:hover { background: var(--card-hover); color: var(--fg); }
.pillbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pillbtn[aria-pressed="true"] .i { color: #fff; }

select {
  padding: 8px 15px; border-radius: 980px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--fg-2); font-size: 14px; font-family: inherit;
  font-weight: 500; cursor: pointer; -webkit-appearance: none; appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}

.check {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 9px; overflow: hidden; box-shadow: var(--sh-1);
}
.check-head {
  white-space: normal;
  display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start; width: 100%;
  background: none; border: none; text-align: left; color: inherit;
  font-family: inherit; border-radius: 0;
}
.check-head:hover { background: var(--card-hover); }
.badge {
  width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.badge .i { width: 15px; height: 15px; stroke-width: 2.5; }
.badge.pass { background: var(--pass-soft); color: var(--pass); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.fail { background: var(--fail-soft); color: var(--fail); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.na   { background: var(--na-soft);   color: var(--na); }

.check-main { flex: 1; min-width: 0; display: block; }
.check-title { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; }
.check-found { display: block; color: var(--fg-3); font-size: 14px; margin-top: 2px; word-break: break-word; }
.check-meta { display: block; font-size: 11.5px; color: var(--fg-4); margin-top: 7px; font-family: var(--mono); }
.chev { color: var(--fg-4); flex: none; margin-top: 3px; transition: transform .25s var(--ease); }
.check.open .chev, .rec.open .chev { transform: rotate(180deg); }

.check-body { padding: 2px 18px 18px 58px; border-top: 1px solid var(--line); }
.field { margin-top: 15px; }
.field-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-4); margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.field-body { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.field-body.act { color: var(--fg); }

pre.ev {
  margin: 8px 0 0; padding: 14px; background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: var(--mono); font-size: 12px; line-height: 1.55;
  overflow-x: auto; max-height: 340px; color: var(--fg-2); white-space: pre-wrap; word-break: break-word;
}

/* ---------- tables ---------- */
.table-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
              background: var(--card); box-shadow: var(--sh-1); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-4); white-space: nowrap; cursor: pointer; user-select: none;
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
th:hover { color: var(--fg-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card-hover); }
/* break-all splits mid-word anywhere; anywhere-with-break-word keeps whole tokens
   together when they fit and only breaks the ones that genuinely cannot. */
td.wrap-any { overflow-wrap: anywhere; word-break: break-word; max-width: 34rem; }
.url-cell { line-height: 1.45; }
.muted-dash { color: var(--fg-4); }

/* Rows that become cards.
   A six-column table on a 375px screen gives a URL column a few characters wide,
   which renders long URLs one letter per line. Below the breakpoint each row is
   re-laid-out as a labelled block instead. */
@media (max-width: 760px) {
  .table-stack .table-scroll { overflow-x: visible; }
  .table-stack table, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  /* Headers stay in the accessibility tree; they are just not painted. */
  .table-stack thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .table-stack tr {
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 9px;
  }
  .table-stack tbody tr:last-child { border-bottom: none; }
  .table-stack td { border: none; padding: 0; max-width: none; font-size: 14.5px; }
  .table-stack td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--fg-4);
  }
  .table-stack td:not([data-label])::before { content: none; }
  /* An empty value still needs its label, or the card silently loses a field. */
  .table-stack td.is-empty { opacity: .6; }
  .table-stack .url-cell { font-size: 13px; }
}

/* Sort control that replaces clickable headers once they are hidden. */
.only-narrow { display: none; }
@media (max-width: 760px) { .only-narrow { display: inline-flex; } }
.sort-shell {
  align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-4);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.sort-shell select {
  font-family: inherit; font-size: 13.5px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--fg); background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: 980px; padding: 7px 12px; min-height: 38px;
}
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 980px; font-size: 12px;
  background: var(--fill-strong); color: var(--fg-3); font-variant-numeric: tabular-nums;
}
.pill.ok  { background: var(--pass-soft); color: var(--pass); }
.pill.bad { background: var(--fail-soft); color: var(--fail); }
.pill.mid { background: var(--warn-soft); color: var(--warn); }

/* Search form on the error page: side by side when there is room, stacked when not. */
.err-form { display: flex; gap: 10px; flex-wrap: wrap; }
.err-form .btn-primary { flex: none; }
@media (max-width: 560px) {
  .err-form { flex-direction: column; }
  .err-form .btn-primary { width: 100%; justify-content: center; }
}

.empty { padding: 56px 20px; text-align: center; color: var(--fg-4); font-size: 15px; }
.empty .i { width: 34px; height: 34px; margin-bottom: 12px; color: var(--fg-4); stroke-width: 1.25; }

/* ---------- share preview ---------- */
.pv-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 920px) { .pv-grid { grid-template-columns: repeat(2, 1fr); } }
.pv { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
      overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.pv-head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px;
           font-weight: 500; color: var(--fg-2); display: flex; align-items: center; gap: 9px; }
.pv-stage { padding: 24px; display: flex; justify-content: center; flex: 1; align-items: center; }
.pv-stage.light { background: #f0f0f2; }
.pv-stage.dark  { background: #16181d; }
.pv-note { padding: 13px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-4); }
.pv-note code { color: var(--fg-3); }

.g-result { width: 100%; max-width: 34rem; font-family: Arial, sans-serif; }
.g-line { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.g-fav { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #dadce0; background: #fff;
         display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.g-fav img { width: 16px; height: 16px; object-fit: contain; }
.g-site { font-size: 14px; line-height: 1.2; }
.g-url { font-size: 12px; }
.g-title { font-size: 20px; line-height: 1.3; margin: 2px 0 3px; }
.g-desc { font-size: 14px; line-height: 1.58; }
.light .g-site { color: #202124; } .light .g-url { color: #4d5156; }
.light .g-title { color: #1a0dab; } .light .g-desc { color: #4d5156; }
.dark .g-site { color: #dadce0; } .dark .g-url { color: #bdc1c6; }
.dark .g-title { color: #8ab4f8; } .dark .g-desc { color: #bdc1c6; }

.card-large { width: 100%; max-width: 32rem; border-radius: 10px; overflow: hidden;
              font-family: Helvetica, Arial, sans-serif; }
.light .card-large { border: 1px solid #dcdee1; background: #fff; }
.dark .card-large { border: 1px solid #303236; background: #1e2024; }
.card-img { width: 100%; aspect-ratio: 1200/630; background: #e4e6eb;
            display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dark .card-img { background: #2a2c31; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 11px 14px; }
.card-site { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.card-title { font-size: 15px; font-weight: 600; margin: 3px 0; line-height: 1.35; }
.card-desc { font-size: 13px; line-height: 1.4; }
.light .card-site { color: #606770; } .light .card-title { color: #1d2129; } .light .card-desc { color: #606770; }
.dark .card-site { color: #8a9099; } .dark .card-title { color: #e4e6eb; } .dark .card-desc { color: #b0b3b8; }

.card-compact { width: 100%; max-width: 28rem; display: flex; gap: 12px; padding: 11px;
                border-radius: 12px; font-family: Helvetica, Arial, sans-serif; align-items: center; }
.light .card-compact { border: 1px solid #dcdee1; background: #fff; }
.dark .card-compact { border: 1px solid #303236; background: #1e2024; }
.card-thumb { width: 72px; height: 72px; border-radius: 8px; flex: none; overflow: hidden;
              background: #e4e6eb; display: flex; align-items: center; justify-content: center; }
.dark .card-thumb { background: #2a2c31; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bubble { width: 100%; max-width: 21rem; border-radius: 17px; overflow: hidden;
          font-family: Helvetica, Arial, sans-serif; background: #007aff; color: #fff; }
.bubble .card-img { aspect-ratio: 16/9; }
.bubble-body { padding: 10px 13px; }
.bubble-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.bubble-url { font-size: 11px; opacity: .82; margin-top: 2px; }

.icon-set { display: flex; flex-wrap: wrap; gap: 18px; padding: 22px; }
.icon-demo { text-align: center; font-size: 11.5px; color: var(--fg-4); }
.icon-demo .frame { border: 1px solid var(--line); border-radius: 8px; background: var(--fill);
                    display: flex; align-items: center; justify-content: center;
                    margin: 0 auto 7px; overflow: hidden; }
.tab-strip { display: flex; align-items: center; gap: 8px; background: var(--fill-strong);
             border-radius: 9px 9px 0 0; padding: 9px 13px; max-width: 16rem; }
.tab-strip img { width: 16px; height: 16px; flex: none; }
.tab-strip span { font-size: 13px; color: var(--fg-2); overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }

/* ---------- misc ---------- */
.note {
  display: flex; gap: 11px; padding: 15px 18px; border-radius: var(--r);
  background: var(--fill); border: 1px solid var(--line);
  font-size: 14px; color: var(--fg-3); margin-bottom: 20px; align-items: flex-start; line-height: 1.5;
}
.note .i { margin-top: 1px; color: var(--fg-4); }

.section-title { font-size: 21px; margin: 34px 0 16px; display: flex; align-items: center; gap: 10px;
                 letter-spacing: -0.02em; }
.section-sub { color: var(--fg-3); font-size: 14.5px; margin: -8px 0 18px; line-height: 1.5; }

.impact-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 760px) { .impact-grid { grid-template-columns: 1fr 1fr; } }
.impact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
               padding: 18px; box-shadow: var(--sh-1); }
.impact-card h3, .impact-card h4 { font-size: 13px; color: var(--fg-4); text-transform: uppercase;
                  letter-spacing: .05em; margin-bottom: 8px; font-weight: 600; }
.impact-card p { font-size: 14.5px; color: var(--fg-2); line-height: 1.5; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

footer { border-top: 1px solid var(--line); margin-top: 72px; padding-top: 26px;
         color: var(--fg-4); font-size: 13px; line-height: 1.6; }
footer strong { color: var(--fg-3); font-weight: 600; }
footer a { color: var(--fg-3); text-decoration: underline; }

.hidden { display: none !important; }

/* docs page */
.doc { max-width: 780px; margin: 0 auto; }
.doc h2 { font-size: 28px; margin: 48px 0 14px; letter-spacing: -0.025em; }
.doc h3 { font-size: 19px; margin: 30px 0 10px; }
.doc p, .doc li { color: var(--fg-2); font-size: 16px; line-height: 1.62; }
.doc ul, .doc ol { padding-left: 22px; margin: 12px 0; }
.doc li { margin: 6px 0; }
.doc pre {
  background: var(--fill); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px;
  line-height: 1.6; margin: 14px 0; color: var(--fg-2);
}
.doc code:not(pre code) {
  background: var(--fill-strong); padding: 2px 6px; border-radius: 5px; font-size: 13.5px;
}
.endpoint {
  display: flex; align-items: baseline; gap: 11px; padding: 13px 16px; margin: 8px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 13.5px; flex-wrap: wrap;
}
.method { font-weight: 700; color: var(--pass); font-size: 12px; }
.endpoint .desc { color: var(--fg-4); font-family: var(--sans); font-size: 13.5px; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}


/* ---------- theme toggle ---------- */
.theme-toggle {
  padding: 7px; width: 34px; height: 34px; border-radius: 980px;
  background: transparent; border: 1px solid var(--line); color: var(--fg-2);
  position: relative; flex: none;
}
.theme-toggle:hover { background: var(--fill-strong); color: var(--fg); }
.theme-toggle .i { width: 17px; height: 17px; position: absolute; inset: 0; margin: auto; }
/* Show the icon for the mode the button will switch you to. */
/* The icon shows what a press will give you, not what is currently active —
   the label says "switch to dark" and the icon is a moon, which agree. */
.theme-toggle .i-auto { display: none; }
.theme-toggle .i-sun  { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme]) .theme-toggle .i-sun  { display: block; }
}


/* ---------- accordion ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
       margin-bottom: 10px; box-shadow: var(--sh-1); overflow: hidden; }
.acc > summary {
  list-style: none; cursor: pointer; padding: 17px 20px; font-size: 16.5px; font-weight: 600;
  display: flex; align-items: flex-start; gap: 12px; letter-spacing: -0.014em;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--card-hover); }
.acc > summary .chev { margin-left: auto; color: var(--fg-4); transition: transform .25s var(--ease); flex: none; }
.acc[open] > summary .chev { transform: rotate(180deg); }
.acc-body { padding: 0 20px 20px 20px; color: var(--fg-2); font-size: 15.5px; line-height: 1.62; }
.acc-body > * + * { margin-top: 12px; }
.acc-body ul { padding-left: 20px; }
.acc-body li { margin: 5px 0; }

/* ---------- footer ---------- */
.foot-grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 30px; }
@media (min-width: 620px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-title { font-weight: 600; color: var(--fg); font-size: 14px; margin-bottom: 10px; }
.foot-grid p { font-size: 13.5px; line-height: 1.6; max-width: 34ch; }
.foot-grid a { display: block; color: var(--fg-3); font-size: 13.5px; padding: 3px 0; text-decoration: none; }
.foot-grid a:hover { color: var(--accent); }
.foot-note { padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 22px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 20px; box-shadow: var(--sh-1); }
.tile .n { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
           line-height: 1.1; }
.tile .l { color: var(--fg-3); font-size: 13px; margin-top: 5px; }

/* ---------- simple bar chart ---------- */
.bars { display: flex; flex-direction: column; gap: 9px; }
.barrow { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; gap: 12px; align-items: center;
          font-size: 13.5px; }
.barrow .lab { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .track { height: 9px; background: var(--fill-strong); border-radius: 980px; overflow: hidden; }
.barrow .track > i { display: block; height: 100%; border-radius: 980px; background: var(--accent);
                     width: 0; transition: width .8s var(--ease); }
.barrow .val { color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 46px;
               text-align: right; }

/* spark columns */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.spark > i { flex: 1; background: var(--accent-soft); border-radius: 3px 3px 0 0; min-height: 2px;
             position: relative; transition: background .2s; }
.spark > i:hover { background: var(--accent); }

/* ---------- badge builder ---------- */
.builder { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .builder { grid-template-columns: 340px 1fr; align-items: start; } }
.panel-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
              padding: 22px; box-shadow: var(--sh-1); }
.control { margin-bottom: 18px; }
.control > label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--fg-4); margin-bottom: 8px; }
.control select, .control input[type="text"] {
  width: 100%; padding: 11px 14px; font-size: 15px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg); font-family: inherit;
}
.control select { padding-right: 34px; }
.opts-row { display: flex; gap: 7px; flex-wrap: wrap; }
.opt {
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--fg-2); font-size: 14px; font-family: inherit; cursor: pointer; font-weight: 500;
}
.opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.badge-stage {
  display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 30px;
  border-radius: var(--r); border: 1px dashed var(--line-strong); margin-bottom: 18px;
  background: repeating-conic-gradient(var(--fill) 0% 25%, transparent 0% 50%) 50%/18px 18px;
}
.badge-stage.on-light { background: #ffffff; }
.badge-stage.on-dark  { background: #101114; }
.code-box {
  position: relative; background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 15px 16px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; color: var(--fg-2);
}

/* ---------- check catalogue ---------- */
.cat-block { margin-bottom: 34px; }
.check-row { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.check-row:last-child { border-bottom: none; }
.check-row .idx { font-family: var(--mono); font-size: 11.5px; color: var(--fg-4); min-width: 118px; flex: none;
                  padding-top: 2px; }
.check-row .body { flex: 1; min-width: 0; }
.check-row .t { font-weight: 600; font-size: 15px; }
.check-row .d { color: var(--fg-3); font-size: 14px; margin-top: 3px; line-height: 1.5; }

.lede { font-size: 19px; line-height: 1.55; color: var(--fg-2); max-width: 62ch; margin-bottom: 8px; }
.toc { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 32px; }
.toc a { padding: 7px 13px; border-radius: 980px; background: var(--fill-strong); color: var(--fg-2);
         font-size: 13.5px; text-decoration: none; }
.toc a:hover { background: var(--accent); color: #fff; }

/* ============================================================
   OUTRINGS — the ring system
   Concentric rings are the through-line: the mark, the loader,
   every score dial, the section markers and the page backdrop
   are all the same shape at different scales.
   ============================================================ */

:root {
  --ring-1: rgba(0, 113, 227, .95);
  --ring-2: rgba(0, 113, 227, .62);
  --ring-3: rgba(0, 113, 227, .34);
  --ring-4: rgba(0, 113, 227, .16);
  --ring-line: rgba(0, 113, 227, .12);
  --ring-deep: #cfe0f7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ring-1: rgba(10, 132, 255, 1);
    --ring-2: rgba(10, 132, 255, .66);
    --ring-3: rgba(10, 132, 255, .38);
    --ring-4: rgba(10, 132, 255, .18);
    --ring-line: rgba(10, 132, 255, .16);
    --ring-deep: #10243d;
  }
}
:root[data-theme="dark"] {
  --ring-deep: #10243d;
  --ring-1: rgba(10, 132, 255, 1);
  --ring-2: rgba(10, 132, 255, .66);
  --ring-3: rgba(10, 132, 255, .38);
  --ring-4: rgba(10, 132, 255, .18);
  --ring-line: rgba(10, 132, 255, .16);
}

/* ---------- the mark ---------- */
.orings { width: 100%; height: 100%; display: block; overflow: visible; }
.orings .or { fill: none; stroke: currentColor; stroke-linecap: round; transform-origin: 24px 24px; }
.orings .or-3 { stroke-width: 2.6; opacity: .38; stroke-dasharray: 88 38; }
.orings .or-2 { stroke-width: 2.9; opacity: .7; }
.orings .or-1 { stroke-width: 3.2; opacity: 1; }
.orings .or-dot { fill: currentColor; }

.brand .mark {
  width: 30px; height: 30px; border-radius: 0; background: none;
  color: var(--accent); display: grid; place-items: center; flex: none;
}
.brand .orings .or { transition: transform .55s var(--ease), opacity .55s var(--ease); }
/* On hover the rings push outward — the name, demonstrated. */
.brand:hover .or-3 { transform: scale(1.1) rotate(28deg); opacity: .6; }
.brand:hover .or-2 { transform: scale(1.14); opacity: .9; }
.brand:hover .or-1 { transform: scale(1.2); }
.brand-word { font-weight: 600; letter-spacing: -.022em; }

@media (prefers-reduced-motion: reduce) {
  .brand:hover .or-1, .brand:hover .or-2, .brand:hover .or-3 { transform: none; }
}

/* ---------- ring loader ---------- */
/* Rings expanding outward from a point: the mark, mid-motion. */
.oload { display: inline-flex; align-items: center; gap: 12px; }
.oload-rings { position: relative; width: 30px; height: 30px; flex: none; display: block; }
.oload-rings i {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: 0; animation: oring 1.8s var(--ease) infinite;
}
.oload-rings i:nth-child(2) { animation-delay: .6s; }
.oload-rings i:nth-child(3) { animation-delay: 1.2s; }
.oload-label { font-size: 14px; color: var(--fg-3); }
@keyframes oring {
  0%   { transform: scale(.18); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* The old spinner is redefined rather than removed, so every existing usage
   picks up the ring treatment without each call site being rewritten. */
.spinner {
  position: relative; display: inline-block; width: 18px; height: 18px;
  border: 0 !important; animation: none !important; vertical-align: middle;
}
.spinner::before, .spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0; animation: oring 1.6s var(--ease) infinite;
}
.spinner::after { animation-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
  .oload-rings i, .spinner::before, .spinner::after {
    animation: none; opacity: .5; transform: scale(.75);
  }
}

/* ---------- ring statistics ---------- */
/* Every proportion on the site is drawn as an arc rather than a bar. */
.ringstat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ringstat-dial { position: relative; width: 92px; height: 92px; }
.ringstat-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ringstat-dial .rs-track { fill: none; stroke: var(--fill-strong); stroke-width: 7; }
.ringstat-dial .rs-val {
  fill: none; stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease), stroke .4s;
}
.ringstat-mid {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ringstat-num {
  font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ringstat-lab { font-size: 12.5px; color: var(--fg-3); text-align: center; line-height: 1.35; }

/* Concentric multi-ring chart: several proportions in one figure. */
.multiring { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; margin: 0 auto; }
.multiring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.multiring .mr-track { fill: none; stroke: var(--fill-strong); }
.multiring .mr-val { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }

/* The hero previously carried a pointer-reactive canvas of rings. Removed: it
   competed with the headline it sat behind and added a canvas repaint to every
   frame for decoration. The mark carries the motif; the page does not need to. */

/* Section headings get a small ring marker instead of a bare icon. */
.section-title { position: relative; }

/* ---------- reveal on scroll ---------- */
/* The "reactive" behaviour: content settles into place as it enters. Opt-out is
   respected, and elements are visible by default so nothing depends on JS. */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs { margin: 30px 0 26px; font-size: 13px; padding-bottom: 2px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--fg-4); }
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px; border: 1px solid var(--fg-4);
  border-radius: 50%; flex: none; opacity: .7;
}
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--fg-2); font-weight: 500; }

/* ---------- accordion ---------- */
/* Native <details> so it works with JavaScript off; the single-open behaviour is
   layered on in theme.js rather than replacing the element with divs. */
.acc { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--sh-1); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: none; }
.acc summary {
  list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 500; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--fg); transition: color .2s, background .2s; min-height: 56px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--card-hover); }
.acc summary:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.acc summary .i { flex: none; color: var(--fg-4); transition: transform .3s var(--ease); }
.acc details[open] summary { color: var(--accent-ink); }
.acc details[open] summary .i { transform: rotate(180deg); color: var(--accent); }
.acc-body { padding: 0 22px 20px; color: var(--fg-2); font-size: 15.5px; line-height: 1.7; }
.acc-body p { margin: 0 0 12px; }
.acc-body p:last-child { margin-bottom: 0; }
/* Content slides rather than snapping. */
html.js .acc details[open] .acc-body { animation: accIn .28s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .acc details[open] .acc-body { animation: none; }
  .acc summary .i { transition: none; }
}

/* ---------- collapsible ---------- */
.collapsible { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.collapsible > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; font-size: 14.5px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; color: var(--fg-2); min-height: 48px;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 1.6px solid var(--fg-4); border-bottom: 1.6px solid var(--fg-4);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease);
}
.collapsible[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.collapsible > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; border-radius: var(--r); }
.collapsible-body { padding: 0 18px 16px; color: var(--fg-2); font-size: 14.5px; line-height: 1.65; }

/* ---------- hover card ---------- */
.hc { position: relative; display: inline-block; }
.hc-trigger {
  border-bottom: 1px dashed var(--fg-4); cursor: help; text-decoration: none; color: inherit;
}
.hc-panel {
  position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 10px);
  width: max-content; max-width: min(20rem, 78vw); transform: translateX(-50%) translateY(4px);
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 14px 16px; font-size: 13.5px; line-height: 1.6;
  color: var(--fg-2); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  white-space: normal; text-align: left; font-weight: 400;
}
.hc-panel strong { color: var(--fg); display: block; margin-bottom: 4px; font-size: 14px; }
.hc-panel .hc-meta { color: var(--fg-4); font-size: 12.5px; margin-top: 8px; }
.hc:hover .hc-panel, .hc:focus-within .hc-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Flip below the trigger when there is no room above. */
.hc.hc-below .hc-panel { bottom: auto; top: calc(100% + 10px); }
@media (max-width: 600px) { .hc-panel { left: 0; transform: none; } .hc:hover .hc-panel { transform: none; } }

/* ---------- navigation menu ---------- */
.navmenu { position: relative; }
.navmenu-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { transition: transform .25s var(--ease); opacity: .6; }
.navmenu-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.navmenu-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(30rem, 88vw); background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 10px; z-index: 70;
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.navmenu-panel:not([hidden]) { display: block; }
.navmenu-panel.open { opacity: 1; transform: translateX(-50%) translateY(0); }
.navmenu-item {
  display: flex; gap: 13px; padding: 12px 13px; border-radius: var(--r); text-decoration: none;
  align-items: flex-start; transition: background .18s;
}
/* Colour shift only. A filled plate under each row made the menu feel heavy and
   drew more attention than the label it was meant to highlight. */
.navmenu-item:hover strong, .navmenu-item:focus-visible strong { color: var(--accent-ink); }
.navmenu-item:hover em, .navmenu-item:focus-visible em { color: var(--fg-2); }
.navmenu-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.navmenu-item strong, .navmenu-item em { transition: color .18s var(--ease); }
.navmenu-ico {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.navmenu-ico .i { width: 17px; height: 17px; }
.navmenu-item strong { display: block; font-size: 14.5px; font-weight: 550; color: var(--fg); }
.navmenu-item em { display: block; font-style: normal; font-size: 13px; color: var(--fg-3); margin-top: 2px; line-height: 1.5; }
.navmenu-count { display: inline-block; font-size: 11.5px; color: var(--fg-4); margin-top: 5px; }
.navmenu-all {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px;
  padding: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.navmenu-all:hover { color: var(--accent-hi); }

/* ---------- sidebar ---------- */
.with-sidebar { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) { .with-sidebar { grid-template-columns: 15rem 1fr; } }
.sidebar { position: sticky; top: 92px; align-self: start; }
@media (max-width: 1039px) {
  .sidebar { position: static; border: 1px solid var(--line); border-radius: var(--r-lg);
             background: var(--card); padding: 6px 4px; }
}
.sidebar-title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-4); padding: 0 12px 10px;
}
.sidebar a {
  display: block; padding: 8px 12px; font-size: 14px; color: var(--fg-3); text-decoration: none;
  border-left: 2px solid transparent; line-height: 1.45; transition: color .2s, border-color .2s;
}
.sidebar a:hover { color: var(--fg); }
.sidebar a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
@media (max-width: 1039px) { .sidebar a { border-left: none; border-radius: var(--r-sm); } }

/* ============================================================
   GUIDES
   Long-form reading: a measured column, generous rhythm, and
   the ring motif used sparingly so it never fights the text.
   ============================================================ */

.guide { max-width: 46rem; }
.with-sidebar .guide { max-width: 44rem; }

.g-head { padding: 10px 0 6px; }
.g-head h1 {
  font-size: clamp(30px, 5.2vw, 46px); line-height: 1.1; letter-spacing: -.032em;
  margin: 14px 0 0; text-wrap: balance;
}
.g-head .lede { margin-top: 16px; }
.g-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--fg-4);
}
.g-meta span { display: inline-flex; align-items: center; gap: 7px; }

/* The short answer, given before the explanation. Marked by a ring rather than
   a coloured bar, so it reads as part of the system. */
.g-answer {
  position: relative; margin: 30px 0 6px; padding: 24px 26px 24px 30px;
  background: var(--accent-soft); border-radius: var(--r-lg);
  border: 1px solid var(--ring-line); overflow: hidden;
}
.g-answer-label {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-ink); margin-bottom: 9px;
}
.g-answer p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--fg); }

.g-body { margin-top: 8px; }
.g-body > p {
  font-size: 16.5px; line-height: 1.75; color: var(--fg-2); margin: 0 0 20px; max-width: 42rem;
}
.g-h2 {
  font-size: clamp(21px, 3vw, 27px); line-height: 1.25; letter-spacing: -.022em;
  margin: 46px 0 16px; scroll-margin-top: 92px; text-wrap: balance;
}
.g-h3 { font-size: 18.5px; line-height: 1.3; margin: 32px 0 12px; letter-spacing: -.014em; }
.g-list { margin: 0 0 22px; padding-left: 0; list-style: none; max-width: 42rem; }
.g-list li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 16px; line-height: 1.7; color: var(--fg-2);
}
/* A small open ring as the bullet — the motif at its smallest scale. */
.g-list > li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px;
  border: 1.8px solid var(--accent); border-radius: 50%; opacity: .55;
}
.g-steps { counter-reset: gstep; }
.g-steps > li { padding-left: 40px; }
.g-steps > li::before {
  counter-increment: gstep; content: counter(gstep);
  width: 26px; height: 26px; left: 0; top: .1em; border: 1.6px solid var(--ring-line);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 600; opacity: 1;
}
.g-body .note { margin: 26px 0; }
.g-body .table-card { margin: 8px 0 26px; }
.g-body table { font-size: 14.5px; }
.g-body td { line-height: 1.6; color: var(--fg-2); }

.g-code {
  margin: 8px 0 26px; padding: 18px 20px; background: var(--fill);
  border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--fg-2);
  white-space: pre; tab-size: 2;
}
.g-code code { font-size: inherit; font-family: inherit; }
.g-body code, .g-answer code, .acc-body code {
  background: var(--fill-strong); padding: 1.5px 6px; border-radius: 5px;
  font-size: .875em; color: var(--fg);
}
.g-code code { background: none; padding: 0; }

/* What the audit measures — the bridge from reading to doing. */
.g-check-card {
  margin: 46px 0 0; padding: 28px 30px; border-radius: var(--r-xl);
  border: 1px solid var(--line-strong); background: var(--card); box-shadow: var(--sh-2);
  position: relative; overflow: hidden;
}
.g-check-card > * { position: relative; }
@media (max-width: 560px) { .g-check-card { padding: 22px 20px; border-radius: var(--r-lg); } }

/* ---------- guide cards ---------- */
.g-topic { margin-top: 46px; scroll-margin-top: 88px; }
.g-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .g-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.g-card {
  display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
  text-decoration: none; box-shadow: var(--sh-1); position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.g-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.g-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.g-card h3 {
  font-size: 16.5px; line-height: 1.35; letter-spacing: -.014em; margin: 0; color: var(--fg);
  position: relative; text-wrap: balance;
}
.g-card p {
  font-size: 14px; line-height: 1.6; color: var(--fg-3); margin: 0; flex: 1; position: relative;
}
.g-card-go {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500;
  color: var(--accent); margin-top: 6px; position: relative;
}
.g-card-go .i { transition: transform .3s var(--ease); }
.g-card:hover .g-card-go .i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .g-card, .g-card::after, .g-card-go .i { transition: none; }
  .g-card:hover { transform: none; }
}

/* ---------- sidebar placement ---------- */
/* Below the two-column breakpoint the table of contents would sit between the
   breadcrumb and the headline — a screenful of links before the reader reaches
   the article. On a phone it is not worth that cost, so it is removed rather
   than reordered; the headings are a swipe away regardless. */
@media (max-width: 1039px) { .with-sidebar > .sidebar { display: none; } }

/* The last breadcrumb is the page title and can be long; let it truncate rather
   than wrap onto its own line under a bullet. */
@media (max-width: 640px) {
  .crumbs li:last-child { min-width: 0; }
  .crumbs li:last-child [aria-current="page"] {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 62vw;
  }
}

/* ---------- rounded bars ---------- */
/* Ranked lists stay as bars — a ring is a poor way to compare fifteen hosts —
   but every cap is fully rounded so they read as arcs unrolled, matching the
   dials rather than fighting them. */
.barrow .track { border-radius: 980px; overflow: hidden; background: var(--fill-strong); }
.barrow .track > i { border-radius: 980px; }
.progress-track { border-radius: 980px; overflow: hidden; }
.progress-fill { border-radius: 980px; }
.spark i { border-radius: 980px 980px 3px 3px; }

/* Grid of score dials — used wherever several out-of-100 values sit together. */
.dial-grid {
  display: grid; gap: 24px 14px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  padding: 8px 0;
}

/* The floating scroll-progress ring was removed with the other ambient effects. */

/* Hero proof strip: what an integrator actually wants to see first. */
.hero-proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-top: 26px; font-size: 13px; color: var(--fg-4);
}
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof code {
  background: var(--fill-strong); color: var(--fg-2);
  padding: 3px 9px; border-radius: 7px; font-size: 12.5px;
}

/* ============================================================
   VIEWPORT CONTAINMENT
   Nothing may exceed the viewport width. Rather than chasing
   individual offenders, the guarantee is made structurally:
   the page cannot scroll sideways, and the usual culprits —
   long URLs, code blocks, tables, wide grids — are each given
   an explicit way to fit or to scroll inside their own box.
   ============================================================ */

html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }

/* Grid and flex children default to min-content width, which is what lets a long
   unbroken string push a whole layout wider than the screen. */
.grid > *, .g-cards > *, .impact-grid > *, .pv-grid > *, .tiles > *, .dial-grid > * { min-width: 0; }

/* Long strings that have no break opportunity of their own. */
.wrap a, .wrap p, .wrap li, .wrap td, .wrap dd, .wrap h1, .wrap h2, .wrap h3 { overflow-wrap: anywhere; }
code, .mono { overflow-wrap: anywhere; }
pre, .g-code, pre.ev { max-width: 100%; overflow-x: auto; }

/* Media never exceeds its container. */
img, svg, canvas, video, iframe, table { max-width: 100%; }

@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .top-inner { padding-left: 16px; padding-right: 16px; }
  /* Inline styles set generous desktop padding on several cards; on a narrow
     screen that padding is most of the width. */
  .panel-card, .impact-card, .g-check-card { padding-left: 18px; padding-right: 18px; }
  .hero { padding-left: 0; padding-right: 0; }
  h1 { font-size: clamp(28px, 8vw, 38px); }
  .lede, .sub { font-size: 16px; }
  .section-title { font-size: 20px; }
  /* Buttons that sit side by side on desktop stack rather than overflow. */
  .search-row { flex-direction: column; align-items: stretch; }
  .search-row .btn-primary { width: 100%; justify-content: center; }
  .toolbar { gap: 8px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- dashboard gate ---------- */
/* Rebuilt as a form. The PIN field previously carried inline font-size and
   letter-spacing, and the trailing letter-space pushed the caret past the
   field's own edge — the box was sized for text that no longer fitted it. */
.gate-wrap { display: flex; justify-content: center; margin-top: 32px; }
.gate { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.gate .control { margin: 0; }
.pin-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 20px; text-align: center;
  letter-spacing: .3em; text-indent: .3em;   /* offsets the trailing letter-space */
  padding: 14px 12px; min-height: 52px;
}
.gate-select { width: 100%; box-sizing: border-box; min-height: 48px; }
.gate-go { width: 100%; justify-content: center; }
.gate-note { font-size: 12.5px; color: var(--fg-4); line-height: 1.55; margin: 0; }

/* ---------- concentric ranked chart ---------- */
.mr-wrap { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 720px) { .mr-wrap { grid-template-columns: 300px 1fr; } }
.multiring { width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1; }
.multiring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.multiring .mr-track { fill: none; stroke: var(--fill-strong); }
.multiring .mr-val {
  fill: none; transition: stroke-dashoffset 1.1s var(--ease), opacity .2s;
}
.multiring:hover .mr-val { opacity: .45; }
.multiring .mr-val:hover { opacity: 1; }

.mr-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: mr; }
.mr-legend li {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center;
  font-size: 13.5px; color: var(--fg-2); min-width: 0;
}
.mr-key { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mr-val-n { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .multiring .mr-val { transition: none; } }

/* ---------- interactive ring chart ---------- */
/* Smaller than the first version: 300px dominated the card without carrying more
   information. 232 reads as a figure rather than a centrepiece. */
.multiring { position: relative; width: 100%; max-width: 232px; }
.multiring .mr-val { cursor: pointer; outline: none; }
.multiring .mr-val.dim { opacity: .22; }
.multiring .mr-val.hot { filter: brightness(1.15); }
.multiring .mr-val:focus-visible { stroke-width: 12; }

/* The readout sits in the hole the rings already leave. */
.mr-center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none; padding: 0 22%;
}
.mr-c-label {
  display: block; font-size: 10.5px; line-height: 1.3; color: var(--fg-4);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.mr-c-value {
  display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  color: var(--fg); font-variant-numeric: tabular-nums; margin-top: 3px;
}
.mr-center.active .mr-c-label { color: var(--accent-ink); }
.mr-hint { font-size: 12px; color: var(--fg-4); text-align: center; margin-top: 10px; }

/* ---------- category sub-groups in the report ---------- */
.gsplit { margin-bottom: 16px; }
.gsplit h3 { font-size: 16.5px; margin-bottom: 4px; }
.gsplit-note { font-size: 13.5px; color: var(--fg-3); margin-bottom: 16px; line-height: 1.5; }
.gsplit-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gsplit-item {
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px 15px;
  background: var(--fill); min-width: 0;
}
.gsplit-score { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.gsplit-name { font-size: 13.5px; font-weight: 600; color: var(--fg); margin-top: 7px; }
.gsplit-ep { font-size: 12px; color: var(--fg-4); margin-top: 5px; line-height: 1.45; }
.gsplit-n { font-size: 11.5px; color: var(--fg-4); margin-top: 6px; font-variant-numeric: tabular-nums; }