/* ==========================================================================
   Narvy public tools (2026-10-31): /store-check, /app-grade, /website-grade
   and the public grade pages (/website-grade/<host>, /app-grade/<package>).
   --------------------------------------------------------------------------
   Same world as the home v2 page (DESIGN.md, "The Ruled Ledger"): white
   page, 1px ink rules, one violet for the action, Geist for words and Geist
   Mono for facts. Reads only --n-* tokens from narvy.css; no hex here.

   Layout of an input view: a hero split in two columns on wide screens.
   Left: kicker, headline, lead, then the tool (a ruled box: tabs on top,
   the stage, captcha and the violet action at the bottom). Right: a
   specimen of what the tool returns (the A-F rubric, or the shape of a
   store-check report), drawn as a ledger. Under the hero: the sibling tools
   as a grid of ruled cells, then (store check) the CLI on the ink band.

   Class prefixes: .nt-* = layout of these pages. .sc-* (store check) and
   .pg-* (grades) are the hooks static/js/store_check.js and
   static/js/public_grade.js rely on: renaming one breaks the page.
   ========================================================================== */

/* -------------------------------------------------------------- frame */
.nt { color: var(--n-ink); font-family: var(--n-sans); }
.nt [hidden] { display: none !important; }
.nt-sr, .sc-sr, .pg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nt-wrap { max-width: var(--n-wrap); margin: 0 auto; padding-left: var(--n-s-6); padding-right: var(--n-s-6); }

/* Base theme paints h1 with gradient text in some sheets: the verdict and
   the target carry meaning in their colour, so pin plain ink. */
.nt h1, .nt h2, .nt h3 { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; text-align: left; }
.nt h1:focus { outline: none; }
.nt h1:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 4px; }

/* -------------------------------------------------------------- hero */
.nt-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--n-s-12); padding-top: var(--n-s-24); padding-bottom: var(--n-s-24); }
@media (min-width: 1024px) {
  .nt-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--n-s-16); align-items: start; }
}
.nt-kicker { margin: 0 0 var(--n-s-7); font-family: var(--n-mono); font-size: var(--n-fs-meta); line-height: 17px; color: var(--n-muted); }
.nt-title { margin: 0; font-size: var(--n-fs-headline); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: var(--n-ink); text-wrap: balance; max-width: 18ch; }
.nt-title .n-acc { color: var(--n-accent); }
.nt-lead { margin: var(--n-s-8) 0 0; max-width: 560px; font-size: var(--n-fs-lead-lg); line-height: 1.5; color: var(--n-ink-2); }
.nt-admin { display: inline-block; margin: var(--n-s-6) 0 0; padding: var(--n-s-1) var(--n-s-3); border: 1px solid var(--n-warn); background: var(--n-warn-tint); color: var(--n-ink); font-family: var(--n-mono); font-size: var(--n-fs-micro); }

/* -------------------------------------------------------------- the tool */
.nt-tool { margin: var(--n-s-10) 0 0; border: 1px solid var(--n-rule); background: var(--n-paper); }
.nt-tool-foot { display: flex; flex-wrap: wrap; gap: var(--n-s-4); align-items: center; justify-content: space-between; padding: var(--n-s-4) var(--n-s-5); border-top: 1px solid var(--n-rule); background: var(--n-paper); }
.nt-tool-foot[hidden] { display: none !important; }

/* Tabs: the home scan tabs. A row of ruled cells on top of the stage. */
.sc-tabs, .pg-tabs { display: flex; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--n-rule); background: var(--n-paper); }
.sc-tab, .pg-tab { flex: 1 1 0; min-height: var(--n-control-h); padding: 0 var(--n-s-4); border: 0; border-right: 1px solid var(--n-rule); border-radius: 0; background: var(--n-paper); color: var(--n-ink);
  font-family: var(--n-sans); font-size: var(--n-fs-ui); font-weight: 500; cursor: pointer; transition: background var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease); }
.sc-tab:last-child, .pg-tab:last-child { border-right: 0; }
.sc-tab:hover, .pg-tab:hover { background: var(--n-tint); }
.sc-tab[aria-selected="true"], .pg-tab[aria-selected="true"] { background: var(--n-ink); color: var(--n-paper); }
.sc-tab:focus-visible, .pg-tab:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -4px; }

.nt-stage { padding: var(--n-s-5); }

/* Drop zone: the one dashed rule of the system. */
.sc-drop, .pg-drop { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--n-s-2); min-height: 200px; padding: var(--n-s-8) var(--n-s-5);
  text-align: center; border: 1px dashed var(--n-rule); background: var(--n-paper); cursor: pointer; font-weight: 400; color: var(--n-ink-2);
  transition: background var(--n-dur) var(--n-ease), border-color var(--n-dur) var(--n-ease); }
.sc-drop:hover, .pg-drop:hover { background: var(--n-tint); }
.sc-drop.is-over, .pg-drop.is-over { border-style: solid; border-color: var(--n-accent); background: var(--n-tint); }
.sc-drop:focus-within, .pg-drop:focus-within { outline: 2px solid var(--n-ink); outline-offset: 3px; }
.sc-drop.has-file, .pg-drop.has-file { border-style: solid; background: var(--n-tint); }
.sc-drop-icon, .pg-drop-icon { font-size: var(--n-fs-title-touch); color: var(--n-accent); margin-bottom: var(--n-s-1); }
.sc-drop.has-file .sc-drop-icon, .pg-drop.has-file .pg-drop-icon { color: var(--n-ok); }
.sc-drop-title, .pg-drop-title { margin: 0; font-size: var(--n-fs-lead); font-weight: 600; letter-spacing: -0.02em; color: var(--n-ink); }
.sc-drop-sub, .pg-drop-sub { margin: 0; font-size: var(--n-fs-ui); color: var(--n-ink-2); }
.sc-drop-sub u, .pg-drop-sub u { text-decoration-color: var(--n-accent); text-underline-offset: 3px; }
.sc-limits, .pg-limits { margin: var(--n-s-2) 0 0; font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); }
.sc-file, .pg-file { margin: 0; font-family: var(--n-mono); font-size: var(--n-fs-ui); word-break: break-all; color: var(--n-ink); }

/* URL / link field: mono, 56px, ink rule, violet underline on focus. */
.sc-url, .pg-url { display: block; width: 100%; min-height: var(--n-control-h-lg); box-sizing: border-box; padding: 0 var(--n-s-4); border: 1px solid var(--n-rule); border-radius: 0;
  background: var(--n-paper); color: var(--n-ink); font-family: var(--n-mono); font-size: var(--n-fs-body-sm); -webkit-appearance: none; appearance: none; }
.sc-url::placeholder, .pg-url::placeholder { color: var(--n-muted); opacity: 1; }
.sc-url:focus-visible, .pg-url:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--n-accent); }
.nt .sc-url[aria-invalid="true"], .nt .pg-url[aria-invalid="true"] { border-color: var(--n-danger); }
/* Website grade: the field fills the stage edge to edge, like the home. */
.nt-stage--flush { padding: 0; }
.nt-stage--flush .pg-url { border: 0; min-height: 64px; padding: 0 var(--n-s-5); font-size: var(--n-fs-lead); }

/* Store rows under the link field. */
.sc-stores, .pg-stores { list-style: none; margin: var(--n-s-4) 0 0; padding: 0; border-top: 1px solid var(--n-hair); }
.sc-stores li, .pg-stores li { display: flex; gap: var(--n-s-4); align-items: baseline; padding: var(--n-s-2) 0; border-bottom: 1px solid var(--n-hair); font-size: var(--n-fs-ui); color: var(--n-ink-2); }
.sc-stores b, .pg-stores b { flex: 0 0 7.5rem; font-family: var(--n-mono); font-size: var(--n-fs-micro); font-weight: 500; color: var(--n-ink); }
.sc-stores .is-off b, .pg-stores .is-off b { color: var(--n-muted); }
.sc-stores li.is-match b, .pg-stores li.is-match b { color: var(--n-ok); }
.sc-stores li.is-err, .sc-stores li.is-err b, .pg-stores li.is-err, .pg-stores li.is-err b { color: var(--n-danger); }

/* Busy: the stage turns into a progress ledger. */
.sc-busy, .pg-busy { display: flex; flex-direction: column; justify-content: center; gap: var(--n-s-4); min-height: 200px; margin: 0; padding: var(--n-s-6) var(--n-s-5); background: var(--n-tint); }
.sc-busy-file, .pg-busy-target { margin: 0; font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-muted); word-break: break-all; }
.sc-busy-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--n-s-4); }
.sc-busy-phase, .pg-busy-phase { margin: 0; font-size: var(--n-fs-title-touch); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--n-ink); }
.sc-busy-pct { font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-ink-2); font-variant-numeric: tabular-nums; }
.sc-bar, .pg-bar { height: 4px; background: var(--n-hair); overflow: hidden; }
.sc-bar span, .pg-bar span { display: block; height: 100%; width: 100%; background: var(--n-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--n-dur) ease-out; }
.sc-bar.is-indet span, .pg-bar span { width: 35%; transform: none; transition: none; animation: nt-indet 1.3s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes nt-indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.sc-busy .sc-btn { align-self: flex-start; }

.sc-captcha, .pg-captcha { max-width: 100%; overflow: hidden; min-height: 78px; }
.sc-status, .pg-status { margin: var(--n-s-3) 0 0; min-height: 1.5rem; font-size: var(--n-fs-body); line-height: 1.5; }
.sc-status:empty, .pg-status:empty { min-height: 0; margin: 0; }
/* An error under the tool reads as an alert: full rule in the status colour. */
#sc-status.sc-error:not(:empty), #pg-status.pg-error:not(:empty) { margin: 0; padding: var(--n-s-3) var(--n-s-5); border: 1px solid var(--n-danger); border-top: 0; background: var(--n-danger-tint); color: var(--n-ink); }
.sc-status.sc-error, .pg-status.pg-error { color: var(--n-danger); }
.nt-tool-foot .sc-status, .nt-tool-foot .pg-status { margin: 0; flex: 1 1 100%; }

/* -------------------------------------------------------------- buttons */
.sc-btn, .pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--n-s-2); min-height: var(--n-control-h); padding: 0 var(--n-s-5);
  border: 1px solid var(--n-rule); border-radius: 0; background: var(--n-paper); color: var(--n-ink); font-family: var(--n-sans); font-size: var(--n-fs-body-sm); font-weight: 500; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease), border-color var(--n-dur) var(--n-ease); }
.sc-btn:hover, .pg-btn:hover { background: var(--n-tint); color: var(--n-ink); }
.sc-btn:focus-visible, .pg-btn:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 2px; }
/* Link buttons carry the element in the selector: `.n-page a` (0,1,1) would
   otherwise win and paint the label violet on violet (rel35: invisible
   "Full scan" CTA). */
.sc-btn-primary, a.sc-btn-primary, .n-page a.sc-btn-primary,
.pg-btn-primary, a.pg-btn-primary, .n-page a.pg-btn-primary { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-paper); padding: 0 var(--n-s-7); }
.sc-btn-primary:hover, .n-page a.sc-btn-primary:hover, .pg-btn-primary:hover, .n-page a.pg-btn-primary:hover { background: var(--n-accent-ink); border-color: var(--n-accent-ink); color: var(--n-paper); }
.n-page a.sc-btn, .n-page a.pg-btn { color: var(--n-ink); }
.n-page a.sc-btn.sc-btn-primary, .n-page a.pg-btn.pg-btn-primary { color: var(--n-paper); }
.sc-btn[disabled], .pg-btn[disabled] { background: var(--n-tint); border-color: var(--n-hair); color: var(--n-muted); cursor: not-allowed; }
.sc-btn i, .pg-btn i { font-size: .85em; }
#sc-submit, #pg-submit { min-height: var(--n-control-h-lg); min-width: 160px; }

/* Mono link row under a tool. */
.sc-links, .pg-links { display: flex; flex-wrap: wrap; gap: var(--n-s-2) var(--n-s-3); align-items: center; margin: var(--n-s-6) 0 0; font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-muted); }
.nt .sc-links a, .nt .pg-links a { color: var(--n-ink-2); text-decoration: none; text-underline-offset: 3px; }
.nt .sc-links a:hover, .nt .pg-links a:hover { color: var(--n-ink); text-decoration: underline; }
.sc-links span[aria-hidden], .pg-links span[aria-hidden] { color: var(--n-hair); }

/* -------------------------------------------------------------- specimen
   The right column: what the tool returns, drawn as a ledger. Decorative
   (aria-hidden): the same facts are in the page text. */
.nt-spec { border: 1px solid var(--n-rule); background: var(--n-paper); font-size: var(--n-fs-ui); }
@media (min-width: 1024px) { .nt-spec { margin-top: 45px; position: sticky; top: var(--n-s-6); } }
.nt-spec-head { display: flex; justify-content: space-between; gap: var(--n-s-4); padding: var(--n-s-3) var(--n-s-5); border-bottom: 1px solid var(--n-rule); font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); }
.nt-spec-head code { font-family: inherit; color: var(--n-ink); background: none; padding: 0; }
.nt-spec-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--n-hair); }
.nt-spec-row:last-child { border-bottom: 0; }
.nt-spec-l { align-self: stretch; display: grid; place-items: center; font-size: var(--n-fs-title-touch); font-weight: 600; letter-spacing: -0.03em; color: var(--n-paper); background: var(--c, var(--n-ink)); }
.nt-spec-v { padding: var(--n-s-3) var(--n-s-4); font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-ink); font-variant-numeric: tabular-nums; }
.nt-spec-bar { width: 96px; height: 8px; margin-right: var(--n-s-5); background: var(--n-tint); }
.nt-spec-bar span { display: block; height: 100%; background: var(--c, var(--n-ink)); }
.nt-spec-group { padding: var(--n-s-3) var(--n-s-5) var(--n-s-1); font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); }
.nt-spec-item { display: flex; align-items: center; justify-content: space-between; gap: var(--n-s-3); padding: var(--n-s-2) var(--n-s-5); font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-ink); border-bottom: 1px solid var(--n-hair); }
.nt-spec-item:last-child { border-bottom: 0; }
.nt-spec-verdict { padding: var(--n-s-5); border-bottom: 1px solid var(--n-rule); font-size: var(--n-fs-title-touch); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--n-danger); }

/* -------------------------------------------------------------- grade ramp
   A/B ok, C medium, D high, E/F critical: status colours, because a grade
   is product state. */
.nt, .pg { --g-a: var(--n-ok); --g-b: var(--n-ok); --g-c: var(--n-med); --g-d: var(--n-warn); --g-e: var(--n-danger); --g-f: var(--n-danger-ink); }
[data-l="A"] { --c: var(--g-a); } [data-l="B"] { --c: var(--g-b); } [data-l="C"] { --c: var(--g-c); }
[data-l="D"] { --c: var(--g-d); } [data-l="E"] { --c: var(--g-e); } [data-l="F"] { --c: var(--g-f); }

/* -------------------------------------------------------------- siblings */
.nt-more { border-top: 1px solid var(--n-hair); }
.nt-more > .nt-wrap { padding-top: var(--n-s-20); padding-bottom: var(--n-s-24); }
.nt-more-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--n-s-4); margin: 0 0 var(--n-s-8); }
.nt-more-head h2 { margin: 0; font-size: var(--n-fs-section); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; color: var(--n-ink); }
.nt-cells { display: flex; flex-wrap: wrap; border-top: 1px solid var(--n-rule); border-left: 1px solid var(--n-rule); }
.nt-cell { flex: 1 1 220px; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--n-s-6); padding: var(--n-s-6);
  border-right: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); background: var(--n-paper); transition: background var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease); }
.n-page a.nt-cell, .nt a.nt-cell { color: var(--n-ink) !important; text-decoration: none; }
.n-page a.nt-cell:hover, .nt a.nt-cell:hover { background: var(--n-accent); color: var(--n-paper) !important; }
.nt-cell:focus-visible { outline: 2px solid var(--n-ink); outline-offset: -4px; }
.nt-cell-path { font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); transition: color var(--n-dur) var(--n-ease); }
.nt-cell:hover .nt-cell-path { color: var(--n-sel); }
.nt-cell-t { font-size: var(--n-fs-title-touch); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
.nt-cell-t::after { content: " \2192"; }
.nt-cell[aria-current="page"] { background: var(--n-tint); }

/* Ink band: the CLI line (store check). */
.nt-band { background: var(--n-ink); color: var(--n-paper); }
.nt-band > .nt-wrap { padding-top: var(--n-s-16); padding-bottom: var(--n-s-16); display: flex; flex-wrap: wrap; gap: var(--n-s-6); align-items: center; justify-content: space-between; }
.nt-band-k { margin: 0 0 var(--n-s-3); font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-kicker-on-ink); }
.nt-band code { font-family: var(--n-mono); font-size: clamp(18px, 2.4vw, 28px); color: var(--n-paper) !important; background: none !important; padding: 0; letter-spacing: -0.01em; }
.nt-band code .n-acc { color: var(--n-kicker-on-ink); user-select: none; -webkit-user-select: none; }
.nt-band :focus-visible { outline-color: var(--n-paper); }
.n-page .nt-band a.nt-band-link { color: var(--n-paper) !important; font-family: var(--n-mono); font-size: var(--n-fs-meta); text-decoration: underline; text-underline-offset: 3px; }
.n-page .nt-band a.nt-band-link:hover { color: var(--n-sel) !important; }

/* ==================================================================== result */
.nt-result { padding-top: var(--n-s-12); padding-bottom: var(--n-s-24); }
.nt-result-col { max-width: 880px; }
.sc-bar-top, .pg-top { display: flex; flex-wrap: wrap; gap: var(--n-s-2); align-items: center; margin: 0 0 var(--n-s-12); }
.sc-bar-top .sc-spacer, .pg-top .pg-spacer { flex: 1 1 auto; }

/* Store check verdict: the headline itself carries the state. */
.sc-verdict { margin: 0; font-size: var(--n-fs-headline); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: var(--n-ink); text-wrap: balance; }
.nt h1.sc-verdict.is-block { color: var(--n-danger); }
.sc-verdict-sub { margin: var(--n-s-4) 0 0; font-size: var(--n-fs-lead-lg); line-height: 1.5; color: var(--n-ink-2); }
.sc-verdict-sub:empty { display: none; }
/* Identity of the build: a ruled two-column ledger. */
.sc-ident { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: var(--n-s-10) 0 0; border-top: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); font-size: var(--n-fs-ui); }
.sc-ident dt, .sc-ident dd { margin: 0; padding: var(--n-s-2) 0; border-bottom: 1px solid var(--n-hair); }
.sc-ident dt { padding-right: var(--n-s-8); font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); align-self: stretch; display: flex; align-items: center; }
.sc-ident dd { font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-ink); word-break: break-all; }
.sc-ident dt:nth-last-of-type(1), .sc-ident dd:last-child { border-bottom: 0; }
.sc-facts { margin: var(--n-s-3) 0 0; font-family: var(--n-mono); font-size: var(--n-fs-micro); line-height: 1.6; color: var(--n-muted); }

/* Grade hero: the letter is the one authored moment. */
.pg-grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--n-s-6) var(--n-s-10); align-items: end; padding: 0; border: 0; }
.pg-letter { width: 184px; height: 184px; display: grid; place-items: center; background: var(--c, var(--n-ink)); color: var(--n-paper);
  font-size: var(--n-fs-display); line-height: 1; font-weight: 600; letter-spacing: -0.05em; animation: nt-letter .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes nt-letter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.pg-grade-text { min-width: 0; padding-bottom: var(--n-s-1); }
.pg-grade-text h1 { margin: 0; font-size: var(--n-fs-headline); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: var(--n-ink); }
.pg-target { margin: var(--n-s-3) 0 0; font-family: var(--n-mono); font-size: var(--n-fs-body-sm); color: var(--n-ink-2); word-break: break-all; }
.pg-score { margin: var(--n-s-2) 0 0; font-size: var(--n-fs-body); color: var(--n-ink-2); }
.pg-score b { font-family: var(--n-mono); font-weight: 500; color: var(--n-ink); font-variant-numeric: tabular-nums; }
.pg-target-h1 { word-break: break-all; }
/* The A-F scale: six ruled cells sharing borders; the current one filled. */
.pg-scale { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); margin: var(--n-s-4) 0 0; padding: 0; list-style: none; border-left: 1px solid var(--n-rule); border-top: 1px solid var(--n-rule); }
.pg-scale li { height: 44px; display: grid; place-items: center; border-right: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); background: var(--n-paper);
  font-family: var(--n-mono); font-size: var(--n-fs-meta); font-weight: 500; color: var(--n-muted); position: relative; }
.pg-scale li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.pg-scale li:nth-child(1)::before { background: var(--g-a); } .pg-scale li:nth-child(2)::before { background: var(--g-b); } .pg-scale li:nth-child(3)::before { background: var(--g-c); }
.pg-scale li:nth-child(4)::before { background: var(--g-d); } .pg-scale li:nth-child(5)::before { background: var(--g-e); } .pg-scale li:nth-child(6)::before { background: var(--g-f); }
.pg-scale li.is-on { color: var(--n-paper); font-weight: 600; }
.pg-scale li.is-on::before { height: 100%; z-index: 0; }
.pg-scale li.is-on { isolation: isolate; }
.pg-scale li.is-on::before { z-index: -1; }
.pg-scope { grid-column: 1 / -1; margin: 0; font-family: var(--n-mono); font-size: var(--n-fs-micro); line-height: 1.6; color: var(--n-muted); }
.pg-public-link { grid-column: 1 / -1; margin: 0; font-size: var(--n-fs-ui); }
.nt .pg-public-link a { color: var(--n-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Groups of checks: section head like the home (heading left, mono count
   right), rows as a ledger (chip column, then the text). */
.sc-group, .pg-group { margin-top: var(--n-s-16); }
.sc-group h2, .pg-group h2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--n-s-4); margin: 0; padding: 0 0 var(--n-s-3);
  border-bottom: 1px solid var(--n-rule); font-size: var(--n-fs-title); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; color: var(--n-ink); }
.sc-group h2 .sc-count, .pg-count { font-family: var(--n-mono); font-size: var(--n-fs-meta); font-weight: 400; letter-spacing: 0; color: var(--n-muted); }
.sc-group > p { margin: var(--n-s-3) 0 0; color: var(--n-ink-2); font-size: var(--n-fs-body-sm); }
.sc-list, .pg-list { list-style: none; margin: 0; padding: 0; }
.sc-item, .pg-item { padding: var(--n-s-5) 0; border-top: 1px solid var(--n-hair); }
.sc-item:first-child, .pg-item:first-child { border-top: 0; }
.sc-item-head, .pg-item-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--n-s-4); align-items: start; }
.sc-item h3, .pg-item h3 { margin: 0; font-size: var(--n-fs-lead); line-height: 1.35; letter-spacing: -0.015em; font-weight: 600; color: var(--n-ink); }
.sc-id, .pg-fam { display: block; margin-top: var(--n-s-1); font-family: var(--n-mono); font-size: var(--n-fs-micro); font-weight: 400; color: var(--n-muted); }
.sc-item > :not(.sc-item-head), .pg-item > :not(.pg-item-head) { margin-left: calc(112px + var(--n-s-4)); }
.sc-chip, .pg-chip { justify-self: start; margin-top: 3px; padding: 2px var(--n-s-2); border: 1px solid var(--n-hair); border-radius: 0; background: var(--n-paper); color: var(--n-ink-2);
  font-family: var(--n-mono); font-size: var(--n-fs-micro); font-weight: 400; line-height: 1.5; letter-spacing: 0; white-space: nowrap; text-align: center; }
.sc-chip.blocker, .pg-chip.critical { border-color: var(--n-danger); background: var(--n-danger-tint); color: var(--n-danger); }
.pg-chip.high { border-color: var(--n-warn); background: var(--n-warn-tint); color: var(--n-warn); }
.sc-chip.warning, .pg-chip.medium { border-color: var(--n-med); background: var(--n-med-tint); color: var(--n-med); }
.pg-chip.low { border-color: var(--n-info); background: var(--n-info-tint); color: var(--n-info); }
.sc-chip.pass, .pg-chip.pass { border-color: var(--n-ok); background: var(--n-ok-tint); color: var(--n-ok); }
.sc-msg, .pg-fix { margin-top: var(--n-s-3); margin-bottom: 0; max-width: 68ch; font-size: var(--n-fs-body); line-height: 1.6; color: var(--n-ink-2); }
.pg-fix b { color: var(--n-ink); font-weight: 600; }
.sc-ev, .pg-ev { list-style: none; margin-top: var(--n-s-3); margin-bottom: 0; padding: var(--n-s-3) var(--n-s-4); border: 1px solid var(--n-hair); background: var(--n-tint);
  font-family: var(--n-mono); font-size: var(--n-fs-meta); line-height: 1.55; color: var(--n-ink); overflow-wrap: anywhere; }
.sc-ev li + li, .pg-ev li + li { margin-top: var(--n-s-1); }
.sc-ev .sc-path, .pg-ev .pg-ev-label { color: var(--n-muted); }
.pg-ev .pg-ev-label { font-family: var(--n-sans); }
.nt .pg-ev code, .nt .sc-ev code { font-family: var(--n-mono); font-size: inherit; background: none !important; padding: 0; color: var(--n-ink); }
.sc-doc { margin-top: var(--n-s-3); margin-bottom: 0; display: flex; flex-wrap: wrap; gap: var(--n-s-1) var(--n-s-5); font-size: var(--n-fs-ui); }
.nt .sc-doc a { color: var(--n-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.sc-doc i { font-size: .75em; margin-left: var(--n-s-1); }
.sc-ev-more summary { cursor: pointer; margin: var(--n-s-2) 0 0; padding: var(--n-s-1) 0; font-size: var(--n-fs-ui); color: var(--n-ink-2); }

/* Folded groups (passed, not applicable, not checked). */
.sc-more, .pg-more { margin-top: var(--n-s-12); border-top: 1px solid var(--n-rule); }
.sc-more details, .pg-more details { border-bottom: 1px solid var(--n-hair); }
.sc-more summary, .pg-more summary { cursor: pointer; padding: var(--n-s-4) 0; font-size: var(--n-fs-body); font-weight: 600; color: var(--n-ink); list-style-position: inside; }
.sc-more summary:hover, .pg-more summary:hover { color: var(--n-accent-ink); }
.sc-more summary:focus-visible, .pg-more summary:focus-visible, .sc-ev-more summary:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 2px; }
.sc-more .sc-list, .pg-more .pg-list { padding-bottom: var(--n-s-3); }

/* Deadline alert: a ruled card, the one form after a result. */
.sc-alert { margin-top: var(--n-s-16); padding: var(--n-s-7); border: 1px solid var(--n-rule); background: var(--n-paper); }
.sc-alert h2 { margin: 0 0 var(--n-s-5); font-size: var(--n-fs-title); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; color: var(--n-ink); }
.sc-alert-dates { list-style: none; margin: 0 0 var(--n-s-5); padding: 0; border-top: 1px solid var(--n-rule); }
.sc-alert-dates li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--n-s-1) var(--n-s-4); padding: var(--n-s-3) 0; border-bottom: 1px solid var(--n-hair); color: var(--n-ink-2); line-height: 1.5; font-size: var(--n-fs-ui); }
.sc-alert-date { font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-ink); white-space: nowrap; grid-row: span 2; }
.sc-alert-label { font-weight: 600; color: var(--n-ink); }
.sc-alert-change { display: block; font-size: var(--n-fs-ui); }
.sc-alert-row { display: flex; flex-wrap: wrap; }
.sc-alert-row input { flex: 1 1 16rem; min-width: 0; min-height: var(--n-control-h-lg); padding: 0 var(--n-s-4); border: 1px solid var(--n-rule); border-right: 0; border-radius: 0; background: var(--n-paper); color: var(--n-ink); font-family: var(--n-mono); font-size: var(--n-fs-body-sm); }
.sc-alert-row input::placeholder { color: var(--n-muted); opacity: 1; }
.sc-alert-row input:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--n-accent); }
.sc-alert-row .sc-btn { min-height: var(--n-control-h-lg); }
.sc-alert-note { margin: var(--n-s-3) 0 0; font-size: var(--n-fs-meta); line-height: 1.5; color: var(--n-muted); }
.nt .sc-alert-note a { color: var(--n-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sc-alert-status { min-height: 1.4rem; margin: var(--n-s-3) 0 0; font-size: var(--n-fs-body); }
.sc-alert-status.is-error { color: var(--n-danger); }
.sc-alert-status.is-ok { color: var(--n-ok); }

/* End of a result: the ink band, the next step. */
.pg-end { margin-top: var(--n-s-12); display: flex; flex-wrap: wrap; gap: var(--n-s-4); }
.sc-end { margin-top: var(--n-s-16); padding: var(--n-s-10) var(--n-s-8); display: flex; flex-wrap: wrap; gap: var(--n-s-6); align-items: center; justify-content: space-between; background: var(--n-ink); color: var(--n-paper); }
.sc-end :focus-visible { outline-color: var(--n-paper); }
.n-page .sc-end a.sc-btn-primary { background: var(--n-paper); border-color: var(--n-paper); color: var(--n-ink); min-height: var(--n-control-h-lg); }
.n-page .sc-end a.sc-btn-primary:hover { background: var(--n-sel); border-color: var(--n-sel); color: var(--n-ink); }
.sc-cli { margin: 0; font-size: var(--n-fs-body-sm); color: var(--n-sel); order: -1; }
.sc-cli code { display: block; margin-top: var(--n-s-2); font-family: var(--n-mono); font-size: var(--n-fs-lead-lg); color: var(--n-paper) !important; background: none !important; padding: 0; }

/* Consent dialog (native <dialog>). */
.pg-dialog { margin: auto; inset: 0; max-height: calc(100% - 32px); overflow: auto; text-align: left; max-width: 480px; width: calc(100% - 32px); padding: var(--n-s-8);
  border: 1px solid var(--n-rule); border-radius: 0; background: var(--n-paper); color: var(--n-ink); box-shadow: none; font-family: var(--n-sans); }
.pg-dialog::backdrop { background: color-mix(in srgb, var(--n-ink) 64%, transparent); }
.pg-dialog h2 { margin: 0 0 var(--n-s-4); font-size: var(--n-fs-title); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; color: var(--n-ink); text-align: left; }
.pg-dialog p { margin: 0 0 var(--n-s-4); color: var(--n-ink-2); line-height: 1.55; }
.pg-check { display: flex; gap: var(--n-s-3); align-items: flex-start; margin: 0 0 var(--n-s-3); padding: var(--n-s-3) var(--n-s-4); border: 1px solid var(--n-hair); line-height: 1.45; cursor: pointer; font-size: var(--n-fs-body-sm); font-weight: 400; color: var(--n-ink); }
.pg-check:has(input:checked) { border-color: var(--n-accent); background: var(--n-tint); }
.pg-check input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--n-accent); }
.pg-vis { border: 0; margin: 0 0 var(--n-s-3); padding: 0; display: grid; gap: 0; }
.pg-vis .pg-check { margin: 0; }
.pg-vis .pg-check + .pg-check { border-top: 0; }
.pg-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--n-s-3); justify-content: flex-end; margin-top: var(--n-s-6); }
.nt .pg-dialog a { color: var(--n-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Takedown form on the target page. */
.pg-takedown { display: grid; gap: var(--n-s-2); padding: 0 0 var(--n-s-5); max-width: 560px; }
.pg-takedown label { font-size: var(--n-fs-ui); font-weight: 500; color: var(--n-ink); }
.pg-takedown .pg-url { min-height: var(--n-control-h); }
.pg-textarea { min-height: 96px !important; padding: var(--n-s-3) var(--n-s-4) !important; font-family: var(--n-sans) !important; resize: vertical; }

/* Stored text in both languages: the page language wins. */
html:lang(fr) .nt .pg-en, html:not(:lang(fr)) .nt .pg-fr { display: none; }

/* Views appear without movement under reduced motion. */
.sc-view, .pg-view { animation: nt-in .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes nt-in { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------- phones */
@media (max-width: 640px) {
  .nt-wrap { padding-left: var(--n-s-4); padding-right: var(--n-s-4); }
  .nt-hero { padding-top: var(--n-s-12); padding-bottom: var(--n-s-16); gap: var(--n-s-10); }
  .nt-kicker { margin-bottom: var(--n-s-5); }
  .nt-lead { margin-top: var(--n-s-5); font-size: var(--n-fs-lead); }
  .nt-tool { margin-top: var(--n-s-8); }
  .nt-stage { padding: var(--n-s-3); }
  .sc-drop, .pg-drop { min-height: 168px; }
  .nt-tool-foot { padding: var(--n-s-3); }
  .nt-tool-foot .sc-btn, .nt-tool-foot .pg-btn { flex: 1 1 100%; }
  .sc-stores li, .pg-stores li { flex-direction: column; gap: 0; }
  .sc-stores b, .pg-stores b { flex-basis: auto; }
  .nt-more > .nt-wrap { padding-top: var(--n-s-14); padding-bottom: var(--n-s-16); }
  .nt-cell { flex-basis: 100%; min-height: 0; flex-direction: row; align-items: baseline; padding: var(--n-s-5); }
  .nt-cell-t { font-size: var(--n-fs-lead); }
  .nt-cell-path { display: none; }
  .nt-spec { display: none; }
  .nt-band > .nt-wrap { padding-top: var(--n-s-12); padding-bottom: var(--n-s-12); }

  .nt-result { padding-top: var(--n-s-8); padding-bottom: var(--n-s-16); }
  .sc-bar-top, .pg-top { margin-bottom: var(--n-s-8); }
  .sc-bar-top .sc-spacer, .pg-top .pg-spacer { display: none; }
  .sc-bar-top .sc-again, .pg-top .pg-again, .pg-top > a.pg-btn:first-child { flex: 1 1 auto; }
  .sc-bar-top .sc-download span, .pg-top .pg-download span { display: none; }
  .sc-bar-top .sc-download, .pg-top .pg-download { flex: none; min-width: 44px; padding: 0 var(--n-s-3); }
  .sc-bar-top .sc-cta-link, .pg-top .pg-cta { flex: 1 1 100%; }
  .sc-ident { grid-template-columns: 1fr; }
  .sc-ident dt { padding: var(--n-s-2) 0 0; border-bottom: 0; }
  .sc-ident dd { padding-top: 0; }
  .pg-grade { grid-template-columns: 1fr; gap: var(--n-s-5); align-items: start; }
  .pg-letter { width: 120px; height: 120px; }
  .sc-item-head, .pg-item-head { grid-template-columns: 1fr; gap: var(--n-s-2); }
  .sc-item > :not(.sc-item-head), .pg-item > :not(.pg-item-head) { margin-left: 0; }
  .sc-group h2, .pg-group h2 { font-size: var(--n-fs-title-touch); }
  .sc-alert { padding: var(--n-s-5); }
  .sc-alert-dates li { grid-template-columns: 1fr; }
  .sc-alert-row input { flex-basis: 100%; border-right: 1px solid var(--n-rule); border-bottom: 0; }
  .sc-alert-row .sc-btn { flex: 1 1 100%; }
  .sc-end { padding: var(--n-s-7) var(--n-s-5); }
  .sc-end .sc-btn, .pg-end .pg-btn { flex: 1 1 100%; }
  .sc-cli code { font-size: var(--n-fs-body-sm); overflow-wrap: anywhere; }
  .pg-dialog { padding: var(--n-s-5); }
  .pg-dialog-actions .pg-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-view, .pg-view, .pg-letter { animation: none; }
  .sc-bar span { transition: none; }
  .sc-bar.is-indet span, .pg-bar span { animation: none; width: 100%; opacity: .55; }
  .sc-tab, .pg-tab, .sc-drop, .pg-drop, .sc-btn, .pg-btn, .nt-cell, .nt-cell-path { transition: none; }
}

/* Free-scan gate: summary for a visitor without an account (public_grade_claims). */
.pg-sev { margin: var(--n-s-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--n-s-2); }
.pg-blur .pg-item, .pg-blur .sc-item { filter: blur(5px); user-select: none; pointer-events: none; }
.pg-blur .pg-item h3 { color: var(--n-ink-2); }
.pg-lock-card { margin-top: var(--n-s-8); padding: var(--n-s-8); border: 1px solid var(--n-rule); background: var(--n-paper); }
.pg-lock-card h2 { margin: 0 0 var(--n-s-3); font-size: var(--n-fs-lead); font-weight: 600; color: var(--n-ink); }
.pg-lock-card p { margin: 0 0 var(--n-s-6); color: var(--n-ink-2); }
.pg-lock-actions { display: flex; flex-wrap: wrap; gap: var(--n-s-4); }
@media (max-width: 600px) {
  .pg-lock-card { padding: var(--n-s-5); }
  .pg-lock-actions .pg-btn { flex: 1 1 100%; justify-content: center; }
}
.pg-mode-note { grid-column: 1 / -1; margin: var(--n-s-3) 0 0; font-size: var(--n-fs-ui); color: var(--n-ink-2); }
.nt .pg-mode-note a { color: var(--n-accent-ink); text-decoration: underline; text-underline-offset: 3px; }