/* ==========================================================================
   Narvy design system (2026-10-31)
   --------------------------------------------------------------------------
   Source of truth: the home v2 page (website/templates/home_v2.html) and its
   founder mockup (accueil Main.dc.html). DESIGN.md documents every value
   below; .impeccable/design.json carries the sidecar.

   - Tokens are namespaced --n-* so they never collide with the legacy
     variables (--accent, --bg-card...) that v4-theme.css still defines.
   - Components are opt-in classes prefixed .n-*: loading this file changes
     nothing on a page that does not use them (only tokens on :root).
   - Light ground only. Square corners. 1px ink rules. Geist / Geist Mono.
   - No inline handlers anywhere (CSP): behaviour lives in static JS.
   ========================================================================== */

:root {
  /* Colour: neutrals */
  --n-paper: #FFFFFF;          /* page ground, card face */
  --n-ink: #1A1530;            /* text, rules, dark band, primary button */
  --n-ink-2: #3D3654;          /* secondary text (lead paragraphs) */
  --n-muted: #5E5873;          /* captions, meta, nav links (6.7:1 on paper) */
  --n-hair: #E8E4F3;           /* quiet dividers (nav, sections, footer) */
  --n-tint: #F6F4FD;           /* hover wash, proof band, zebra rows */
  --n-sel: #E9E3FF;            /* on-dark hover */
  /* Text selection: a see-through wash that keeps each glyph its own colour
     (status red stays red, white on violet stays white). An opaque fill plus
     a forced ink colour turned every coloured or reversed word to ink. */
  --n-sel-wash: color-mix(in srgb, var(--n-accent) 18%, transparent);
  --n-sel-wash-on-dark: color-mix(in srgb, var(--n-paper) 34%, transparent);

  /* Colour: the one accent */
  --n-accent: #5B2EE5;         /* the violet: primary action, active state */
  --n-accent-ink: #4B23D6;     /* accent hover, links on paper */
  --n-deep: #2A1477;           /* darkest violet (critical cell in proof) */
  --n-lilac: #C9BDFB;          /* lightest violet (low cell in proof) */
  --n-kicker-on-ink: #A996F7;  /* mono kicker on the ink band (7:1) */

  /* Colour: status and severity (product UI only, never decoration) */
  --n-danger: #B3272C;         /* critical, destructive, error (6.5:1) */
  --n-danger-ink: #942025;     /* danger hover */
  --n-danger-tint: #FDF1F1;
  --n-warn: #B45309;           /* high, warning (5.0:1) */
  --n-warn-tint: #FEF5EA;
  --n-med: #8A6400;            /* medium (5.4:1) */
  --n-med-tint: #FBF6E4;
  --n-info: #1D5BC6;           /* low, information (6.2:1) */
  --n-info-tint: #EEF3FC;
  --n-ok: #1E7A46;             /* success, resolved (5.4:1) */
  --n-ok-tint: #EDF7F1;

  /* Rule = the 1px structural line of grids, inputs, tables */
  --n-rule: var(--n-ink);

  /* Type */
  --n-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --n-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --n-fs-micro: 12px;          /* mono kicker small, card number, tile list */
  --n-fs-meta: 13px;           /* kicker, hints, footer, lang switch */
  --n-fs-ui: 14px;             /* nav links, tabs, table cells */
  --n-fs-body-sm: 15px;        /* buttons, card text, inputs */
  --n-fs-body: 16px;           /* running text */
  --n-fs-lead: 18px;           /* brand name, lead on phones */
  --n-fs-lead-lg: 20px;        /* hero sub, lead paragraph */
  --n-fs-title-touch: 24px;    /* card title on touch screens */
  --n-fs-title: 28px;          /* card title, sub-section */
  --n-fs-section: 32px;        /* section heading */
  --n-fs-figure: 40px;         /* price, interior page title */
  --n-fs-headline: clamp(32px, 4vw, 48px);
  --n-fs-display: clamp(64px, 10vw, 144px);

  /* Space (4px base, the mockup's steps) */
  --n-s-1: 4px;
  --n-s-2: 8px;
  --n-s-3: 12px;
  --n-s-4: 16px;
  --n-s-5: 20px;
  --n-s-6: 24px;
  --n-s-7: 28px;
  --n-s-8: 32px;
  --n-s-10: 40px;
  --n-s-12: 48px;
  --n-s-14: 56px;
  --n-s-16: 64px;
  --n-s-18: 72px;
  --n-s-20: 80px;
  --n-s-24: 96px;
  --n-s-28: 112px;

  /* Shape */
  --n-radius: 0;               /* every surface, button, input */
  --n-radius-full: 9999px;     /* avatars and status dots only */
  --n-control-h: 44px;         /* tap target floor */
  --n-control-h-lg: 56px;
  --n-wrap: 1200px;
  --n-prose: 72ch;

  /* Motion: colour and transform only, never layout */
  --n-ease: ease;
  --n-ease-flip: cubic-bezier(.45, .05, .25, 1);
  --n-dur: .2s;
  --n-dur-slow: .25s;
}

/* Metric-matched fallbacks (same values as home v2): no layout shift while
   Geist loads with display=swap. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104.76%; ascent-override: 95.94%; descent-override: 28.16%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 134.59%; ascent-override: 74.67%; descent-override: 21.92%; line-gap-override: 0%; }

/* --------------------------------------------------------------------------
   Page shell: opt in with <body class="n-page">.
   -------------------------------------------------------------------------- */
.n-page {
  margin: 0;
  padding: 0;
  background: var(--n-paper);
  color: var(--n-ink);
  font-family: var(--n-sans);
  font-size: var(--n-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}
.n-page *, .n-page *::before, .n-page *::after { box-sizing: border-box; }
.n-page ::selection { background: var(--n-sel-wash); }
/* Reversed surfaces (violet or ink ground, paper text). */
.n-band-ink ::selection, .n-band-ink::selection,
:is(.n-btn--primary, .ts-btn-primary, .btn-primary, .dash-mark, .n-card-on) ::selection,
:is(.n-btn--primary, .ts-btn-primary, .btn-primary, .dash-mark, .n-card-on)::selection { background: var(--n-sel-wash-on-dark); }
.n-page :focus-visible { outline: 2px solid var(--n-ink); outline-offset: 2px; }
.n-page a { color: var(--n-accent-ink); text-decoration: none; }
.n-page a:hover { color: var(--n-ink); }

.n-wrap { max-width: var(--n-wrap); margin: 0 auto; padding-left: var(--n-s-6); padding-right: var(--n-s-6); }
.n-mono { font-family: var(--n-mono); }
.n-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.n-skip { position: absolute; left: var(--n-s-4); top: -60px; background: var(--n-ink); color: var(--n-paper); padding: 10px 14px; z-index: 10; }
.n-skip:focus { top: var(--n-s-3); color: var(--n-paper); }

/* --------------------------------------------------------------------------
   Navigation (inside body.n-page, or body.n-chrome on a standalone page
   that keeps its own body rules, e.g. /pricing, rel43)
   <header class="n-nav"><div class="n-wrap">
     <a class="n-brand" href="/"><span class="n-mark"></span><span class="n-brand-name">narvy</span></a>
     <nav class="n-nav-links">... <span class="n-lang">FR / EN</span> <a class="n-cta">...</a></nav>
   </div></header>
   -------------------------------------------------------------------------- */
.n-nav { border-bottom: 1px solid var(--n-hair); background: var(--n-paper); }
.n-nav > .n-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--n-s-4); flex-wrap: wrap; }
.n-brand { display: flex; align-items: center; gap: 10px; color: var(--n-ink); }
:is(.n-page, .n-chrome) .n-brand, :is(.n-page, .n-chrome) .n-brand:hover { color: var(--n-ink); }
.n-mark { width: 44px; height: 28px; display: block; flex: 0 0 auto; color: inherit; }
.n-mark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.n-auth-mark .n-mark-svg { color: var(--n-ink); }
.n-brand-name { font-size: var(--n-fs-lead); font-weight: 600; letter-spacing: -0.02em; }
.n-nav-links { display: flex; align-items: center; gap: var(--n-s-7); flex-wrap: wrap; font-size: var(--n-fs-ui); }
:is(.n-page, .n-chrome) .n-nav-links a { color: var(--n-muted); }
:is(.n-page, .n-chrome) .n-nav-links a:hover, :is(.n-page, .n-chrome) .n-nav-links a[aria-current="page"] { color: var(--n-ink); }
.n-lang { font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-muted); white-space: nowrap; }
:is(.n-page, .n-chrome) .n-lang a[aria-current] { color: var(--n-ink); font-weight: 500; }
:is(.n-page, .n-chrome) .n-nav-links .n-cta { background: var(--n-ink); color: var(--n-paper); padding: 0 var(--n-s-4); height: var(--n-control-h); display: flex; align-items: center; font-weight: 500; transition: background var(--n-dur) var(--n-ease); }
:is(.n-page, .n-chrome) .n-nav-links .n-cta:hover { background: var(--n-accent); color: var(--n-paper); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.n-foot { border-top: 1px solid var(--n-hair); background: var(--n-paper); }
.n-foot > .n-wrap { padding-top: var(--n-s-10); padding-bottom: var(--n-s-10); display: flex; flex-wrap: wrap; gap: var(--n-s-6); justify-content: space-between; align-items: center; font-size: var(--n-fs-meta); color: var(--n-muted); }
.n-foot-brand { display: flex; align-items: center; gap: 10px; }
.n-foot-brand .n-mark { width: 25px; height: 16px; color: var(--n-ink); }
.n-foot-micro { flex-basis: 100%; margin: 0; font-family: var(--n-mono); }
.n-foot ul { display: flex; flex-wrap: wrap; gap: var(--n-s-3) var(--n-s-5); margin: 0; padding: 0; list-style: none; }
:is(.n-page, .n-chrome) .n-foot a { color: var(--n-muted); }
:is(.n-page, .n-chrome) .n-foot a:hover { color: var(--n-ink); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.n-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); }
.n-display { margin: 0; font-size: var(--n-fs-display); line-height: .92; letter-spacing: -0.05em; font-weight: 600; }
.n-headline { margin: 0; font-size: var(--n-fs-headline); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.n-h1 { margin: 0; font-size: var(--n-fs-figure); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
.n-h2 { margin: 0; font-size: var(--n-fs-section); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }
.n-h3 { margin: 0; font-size: var(--n-fs-lead-lg); line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; }
.n-lead { margin: 0; max-width: 560px; font-size: var(--n-fs-lead-lg); line-height: 1.5; color: var(--n-ink-2); }
.n-meta { font-size: var(--n-fs-meta); color: var(--n-muted); }
.n-acc { color: var(--n-accent); }

/* Interior page header: kicker + title + lead, then a hairline. */
.n-page-head { border-bottom: 1px solid var(--n-hair); }
.n-page-head > .n-wrap { padding-top: var(--n-s-18); padding-bottom: var(--n-s-12); }
.n-page-head .n-lead { margin-top: var(--n-s-5); }

/* Sections */
.n-sec { border-top: 1px solid var(--n-hair); }
.n-sec > .n-wrap { padding-top: var(--n-s-24); padding-bottom: var(--n-s-24); }
.n-sec-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--n-s-4); margin-bottom: var(--n-s-10); }
.n-sec-head p { margin: 0; font-family: var(--n-mono); font-size: var(--n-fs-meta); line-height: 17px; color: var(--n-muted); }
.n-band-ink { background: var(--n-ink); color: var(--n-paper); }
.n-band-ink .n-kicker { color: var(--n-kicker-on-ink); }
.n-band-ink :focus-visible { outline-color: var(--n-paper); }
.n-band-tint { background: var(--n-tint); }

/* --------------------------------------------------------------------------
   Buttons: square, 44px floor, colour-only transitions.
   -------------------------------------------------------------------------- */
.n-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-6);
  border: 1px solid var(--n-ink); border-radius: var(--n-radius);
  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;
  text-decoration: none; cursor: pointer; 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);
}
.n-page a.n-btn { color: var(--n-ink); }
.n-btn:hover, .n-page a.n-btn:hover { background: var(--n-tint); color: var(--n-ink); }
.n-btn:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 2px; }
.n-btn--primary, .n-page a.n-btn--primary { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-paper); }
.n-btn--primary:hover, .n-page a.n-btn--primary:hover { background: var(--n-accent-ink); border-color: var(--n-accent-ink); color: var(--n-paper); }
.n-btn--ink, .n-page a.n-btn--ink { background: var(--n-ink); border-color: var(--n-ink); color: var(--n-paper); }
.n-btn--ink:hover, .n-page a.n-btn--ink:hover { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-paper); }
.n-btn--ghost, .n-page a.n-btn--ghost { background: transparent; border-color: transparent; color: var(--n-accent-ink); padding: 0 var(--n-s-3); }
.n-btn--ghost:hover, .n-page a.n-btn--ghost:hover { background: var(--n-tint); color: var(--n-ink); }
.n-btn--danger, .n-page a.n-btn--danger { background: var(--n-danger); border-color: var(--n-danger); color: var(--n-paper); }
.n-btn--danger:hover, .n-page a.n-btn--danger:hover { background: var(--n-danger-ink); border-color: var(--n-danger-ink); color: var(--n-paper); }
.n-btn--lg { min-height: var(--n-control-h-lg); padding: 0 var(--n-s-7); }
.n-btn--block { display: flex; width: 100%; }
.n-btn[disabled], .n-btn[aria-disabled="true"] { background: var(--n-tint); border-color: var(--n-hair); color: var(--n-muted); cursor: not-allowed; }
.n-band-ink .n-btn { background: var(--n-paper); border-color: var(--n-paper); color: var(--n-ink); }
.n-band-ink .n-btn:hover { background: var(--n-sel); color: var(--n-ink); }

/* --------------------------------------------------------------------------
   Grid of square cells (home forces / pricing): the outer border is drawn
   by the grid (top, left) and each cell (right, bottom), so rules never
   double up.
   -------------------------------------------------------------------------- */
.n-grid { display: flex; flex-wrap: wrap; border-top: 1px solid var(--n-rule); border-left: 1px solid var(--n-rule); }
.n-grid > * { flex: 1 1 260px; border-right: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); }

/* Card: a ruled box. No shadow, no radius. */
.n-card { background: var(--n-paper); color: var(--n-ink); border: 1px solid var(--n-rule); padding: var(--n-s-6) var(--n-s-7); }
.n-grid > .n-card { border-top: 0; border-left: 0; }
.n-card--quiet { border-color: var(--n-hair); }
.n-card--tint { background: var(--n-tint); border-color: var(--n-hair); }
.n-card--link { display: block; transition: background var(--n-dur) var(--n-ease); }
.n-page a.n-card--link { color: var(--n-ink); }
.n-card--link:hover, .n-page a.n-card--link:hover { background: var(--n-tint); color: var(--n-ink); }
.n-card--on { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-paper); }
.n-card-title { margin: 0; font-size: var(--n-fs-title); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.n-card-text { margin: 10px 0 0; font-size: var(--n-fs-body-sm); line-height: 1.45; color: var(--n-muted); }
.n-card-num { font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); }

/* Stat: big figure + mono label. */
.n-stat-v { font-size: var(--n-fs-figure); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.n-stat-k { font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); }

/* Code line (pip install ...) */
.n-code { border: 1px solid var(--n-rule); padding: var(--n-s-6) var(--n-s-7); font-family: var(--n-mono); font-size: var(--n-fs-body-sm); overflow-x: auto; }
.n-code code { font-family: inherit; font-size: inherit; color: var(--n-ink); }

/* --------------------------------------------------------------------------
   Tables: ink top rule, hairline rows, mono header.
   Wrap wide tables in .n-table-scroll so the page never scrolls sideways.
   -------------------------------------------------------------------------- */
.n-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.n-table { width: 100%; border-collapse: collapse; font-size: var(--n-fs-ui); line-height: 1.5; color: var(--n-ink); background: var(--n-paper); }
.n-table th, .n-table td { padding: var(--n-s-3) var(--n-s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--n-hair); }
.n-table thead th { font-family: var(--n-mono); font-size: var(--n-fs-micro); font-weight: 500; color: var(--n-muted); border-top: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); white-space: nowrap; }
.n-table tbody tr:hover { background: var(--n-tint); }
.n-table td.n-num, .n-table th.n-num { text-align: right; font-variant-numeric: tabular-nums; }
.n-table caption { caption-side: top; text-align: left; padding: 0 0 var(--n-s-3); font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-muted); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.n-field { display: flex; flex-direction: column; gap: var(--n-s-2); margin: 0 0 var(--n-s-5); }
.n-label { font-size: var(--n-fs-ui); font-weight: 500; color: var(--n-ink); }
.n-input, .n-select, .n-textarea {
  width: 100%; min-height: var(--n-control-h); padding: 0 var(--n-s-4);
  border: 1px solid var(--n-rule); border-radius: var(--n-radius);
  background: var(--n-paper); color: var(--n-ink);
  font-family: var(--n-sans); font-size: var(--n-fs-body-sm);
  -webkit-appearance: none; appearance: none;
  transition: box-shadow var(--n-dur) var(--n-ease);
}
.n-input--mono { font-family: var(--n-mono); }
.n-textarea { min-height: 120px; padding: var(--n-s-3) var(--n-s-4); line-height: 1.5; resize: vertical; }
.n-select { padding-right: var(--n-s-10); background-image: linear-gradient(45deg, transparent 50%, var(--n-ink) 50%), linear-gradient(135deg, var(--n-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.n-input::placeholder, .n-textarea::placeholder { color: var(--n-muted); opacity: 1; }
.n-input:focus-visible, .n-select:focus-visible, .n-textarea:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--n-accent); }
.n-input[aria-invalid="true"], .n-select[aria-invalid="true"], .n-textarea[aria-invalid="true"] { border-color: var(--n-danger); }
.n-input:disabled, .n-select:disabled, .n-textarea:disabled { background: var(--n-tint); color: var(--n-muted); border-color: var(--n-hair); }
.n-help { font-size: var(--n-fs-meta); color: var(--n-muted); }
.n-error { font-size: var(--n-fs-meta); color: var(--n-danger); }
.n-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--n-fs-ui); line-height: 1.5; }
.n-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--n-accent); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Alerts: a full 1px border in the status colour on its tint, never a side
   stripe. Text stays ink; the status colour carries the meaning.
   -------------------------------------------------------------------------- */
.n-alert { display: flex; gap: var(--n-s-3); align-items: flex-start; padding: var(--n-s-4) var(--n-s-5); border: 1px solid var(--n-rule); background: var(--n-paper); color: var(--n-ink); font-size: var(--n-fs-ui); line-height: 1.5; }
.n-alert-title { font-weight: 600; }
.n-alert--info { border-color: var(--n-info); background: var(--n-info-tint); }
.n-alert--ok { border-color: var(--n-ok); background: var(--n-ok-tint); }
.n-alert--warn { border-color: var(--n-warn); background: var(--n-warn-tint); }
.n-alert--danger { border-color: var(--n-danger); background: var(--n-danger-tint); }

/* --------------------------------------------------------------------------
   Chips (badges): mono, square, 1px border. Severity uses the status
   colours. Named "chip", not "badge": v4-theme styles every class that
   contains "badge" ([class*="badge"], !important).
   -------------------------------------------------------------------------- */
.n-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--n-s-2); border: 1px solid var(--n-hair); background: var(--n-paper); color: var(--n-ink-2); font-family: var(--n-mono); font-size: var(--n-fs-micro); line-height: 1.5; white-space: nowrap; }
.n-chip--accent { border-color: var(--n-accent); background: var(--n-accent); color: var(--n-paper); }
.n-chip--ink { border-color: var(--n-ink); background: var(--n-ink); color: var(--n-paper); }
.n-chip--crit { border-color: var(--n-danger); background: var(--n-danger-tint); color: var(--n-danger); }
.n-chip--high { border-color: var(--n-warn); background: var(--n-warn-tint); color: var(--n-warn); }
.n-chip--med { border-color: var(--n-med); background: var(--n-med-tint); color: var(--n-med); }
.n-chip--low { border-color: var(--n-info); background: var(--n-info-tint); color: var(--n-info); }
.n-chip--ok { border-color: var(--n-ok); background: var(--n-ok-tint); color: var(--n-ok); }
/* Labelled severity chips (partials/_n_cells.html n_sevchips). */
.n-sevchips { display: inline-flex; flex-wrap: wrap; gap: var(--n-s-1); max-width: 100%; }
.n-sevchips b { font-weight: 600; font-variant-numeric: tabular-nums; }
.n-dot { width: 8px; height: 8px; border-radius: var(--n-radius-full); background: currentColor; display: inline-block; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Finding cells: one square per finding (or a proportional share), the
   home proof band's grammar. Violet ramp, not the status colours: the
   counts next to them carry the status colour. Decorative, always
   aria-hidden. Markup comes from partials/_n_cells.html.
   Size with --n-cell (default 16px), spacing with --n-cell-gap.
   -------------------------------------------------------------------------- */
.n-cells { display: flex; flex-wrap: wrap; gap: var(--n-cell-gap, var(--n-s-1)); max-width: 100%; margin: 0; padding: 0; }
.n-cells[hidden] { display: none; }
.n-cells > span { display: block; flex: 0 0 auto; width: var(--n-cell, 16px); height: var(--n-cell, 16px); background: var(--n-accent); }
.n-cells > .critical { background: var(--n-deep); }
.n-cells > .high { background: var(--n-accent); }
.n-cells > .medium { background: var(--n-lilac); }
.n-cells > .low { background: var(--n-tint); outline: 1px solid var(--n-hair); outline-offset: -1px; }

/* Severity strip: a 6px proportional bar in the status colours (data).
   Each segment's flex-grow is its count. */
.n-sevstrip { display: inline-flex; flex: 0 0 auto; gap: 1px; width: 56px; height: 6px; vertical-align: middle; }
.n-sevstrip > i { display: block; min-width: 2px; }
.n-sevstrip > .critical { background: var(--n-danger); }
.n-sevstrip > .high { background: var(--n-warn); }
.n-sevstrip > .medium { background: var(--n-med); }
.n-sevstrip > .low { background: var(--n-info); }

/* Surface glyph: 24px line icon (phone, globe, code, server, cube, cloud),
   stroke in the accent. Markup: partials/_n_glyph.html. */
.n-glyph { display: block; flex: 0 0 auto; color: var(--n-accent); }

/* Results pages: the surface glyph beside the title, the finding cells
   under the severity strip. */
.n-titlerow { display: flex; align-items: flex-start; gap: var(--n-s-4); }
.n-titlerow > .n-glyph { margin-top: var(--n-s-1); }
.n-titlerow-text { min-width: 0; flex: 1 1 auto; }
.n-findcells { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-s-2) var(--n-s-3); margin: var(--n-s-3) 0 var(--n-s-4); }
.n-findcells > :not(.n-cells) { margin: 0 !important; }
.n-findcells:not(:has(> .n-cells)) { margin-top: 0; }
@media (max-width: 640px) { .n-titlerow > .n-glyph { width: 28px; height: 28px; } }

/* --------------------------------------------------------------------------
   Prose and legal documents (privacy, terms, DPA, subprocessors, security,
   legal notice, blog posts). A reading column with an optional sticky table
   of contents on wide screens.
   <main class="n-doc"><div class="n-wrap n-doc-grid">
     <nav class="n-toc">...</nav><article class="n-prose">...</article>
   </div></main>
   -------------------------------------------------------------------------- */
.n-doc > .n-wrap { padding-top: var(--n-s-16); padding-bottom: var(--n-s-24); }
.n-doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--n-s-12); }
@media (min-width: 1024px) {
  .n-doc-grid--toc { grid-template-columns: 240px minmax(0, 1fr); }
  .n-toc { position: sticky; top: var(--n-s-6); align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; }
}
.n-toc { font-size: var(--n-fs-meta); }
.n-toc-k { margin: 0 0 var(--n-s-3); font-family: var(--n-mono); font-size: var(--n-fs-micro); color: var(--n-muted); }
.n-toc ol, .n-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--n-hair); }
.n-toc li a { display: block; padding: 6px 0 6px var(--n-s-3); color: var(--n-muted); line-height: 1.4; }
.n-page .n-toc li a { color: var(--n-muted); }
.n-page .n-toc li a:hover, .n-page .n-toc li a[aria-current="true"] { color: var(--n-ink); }

.n-prose { max-width: var(--n-prose); font-size: var(--n-fs-body); line-height: 1.65; color: var(--n-ink-2); overflow-wrap: anywhere; }
.n-prose > :first-child { margin-top: 0; }
.n-prose h1 { margin: 0 0 var(--n-s-6); font-size: var(--n-fs-figure); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; color: var(--n-ink); }
.n-prose h2 { margin: var(--n-s-12) 0 var(--n-s-4); padding-top: var(--n-s-6); border-top: 1px solid var(--n-hair); font-size: var(--n-fs-title); line-height: 1.2; letter-spacing: -0.03em; font-weight: 600; color: var(--n-ink); scroll-margin-top: var(--n-s-6); }
.n-prose h3 { margin: var(--n-s-8) 0 var(--n-s-3); font-size: var(--n-fs-lead-lg); line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: var(--n-ink); scroll-margin-top: var(--n-s-6); }
.n-prose h4 { margin: var(--n-s-6) 0 var(--n-s-2); font-size: var(--n-fs-body); line-height: 1.4; font-weight: 600; color: var(--n-ink); }
.n-prose p, .n-prose ul, .n-prose ol, .n-prose dl, .n-prose blockquote, .n-prose pre, .n-prose .n-table-scroll { margin: 0 0 var(--n-s-4); }
.n-prose ul, .n-prose ol { padding-left: var(--n-s-6); }
.n-prose li { margin: 0 0 var(--n-s-2); }
.n-prose li::marker { color: var(--n-muted); }
.n-prose strong, .n-prose b { color: var(--n-ink); font-weight: 600; }
.n-prose a { color: var(--n-accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.n-prose a:hover { color: var(--n-ink); }
.n-prose code { font-family: var(--n-mono); font-size: .9em; background: var(--n-tint); padding: 1px 4px; color: var(--n-ink); }
.n-prose pre { padding: var(--n-s-4) var(--n-s-5); border: 1px solid var(--n-rule); overflow-x: auto; font-family: var(--n-mono); font-size: var(--n-fs-meta); line-height: 1.6; background: var(--n-paper); }
.n-prose pre code { background: none; padding: 0; }
.n-prose blockquote { padding: var(--n-s-4) var(--n-s-5); border: 1px solid var(--n-hair); background: var(--n-tint); color: var(--n-ink); }
.n-prose hr { border: 0; border-top: 1px solid var(--n-hair); margin: var(--n-s-10) 0; }
.n-prose table { width: 100%; border-collapse: collapse; font-size: var(--n-fs-ui); line-height: 1.5; }
.n-prose th, .n-prose td { padding: 10px var(--n-s-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--n-hair); }
.n-prose thead th { font-family: var(--n-mono); font-size: var(--n-fs-micro); font-weight: 500; color: var(--n-muted); border-top: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); }
.n-prose dt { font-weight: 600; color: var(--n-ink); }
.n-prose dd { margin: 0 0 var(--n-s-3); }
.n-doc-meta { margin: 0 0 var(--n-s-8); font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-muted); }

/* --------------------------------------------------------------------------
   Legacy shield (temporary, delete once v4-theme.css / shell.css retire).
   The app shell still styles bare elements globally, several with
   !important ([data-theme="dark"] input[type=text], h1-h6, table td,
   [class*="badge"]). Inside a Narvy surface (.n-page, an .n-island, a card,
   an alert) those rules would paint dark-theme text and fields on paper.
   "html body" lifts specificity to (0,2,2)+ so these win the !important tie.
   -------------------------------------------------------------------------- */
html body :is(.n-page, .n-island, .n-card, .n-alert) { font-family: var(--n-sans); }
html body :is(.n-island, .n-card, .n-alert) { color: var(--n-ink); }
html body .n-card.n-card--on { color: var(--n-paper); }
html body :is(.n-page, .n-island, .n-card) :is(h1, h2, h3, h4, h5, h6) { color: inherit !important; font-family: var(--n-sans) !important; text-align: inherit; }
html body :is(.n-page, .n-island, .n-card, .n-alert) :is(p, li, dt, dd, label, td, caption, strong, b) { color: inherit !important; }
html body :is(.n-page, .n-island, .n-card) .n-table thead th { color: var(--n-muted) !important; font-family: var(--n-mono) !important; background: var(--n-paper) !important; }
html body :is(.n-page, .n-island, .n-card) .n-table tbody tr:hover td { background: var(--n-tint) !important; }
html body :is(.n-page, .n-island, .n-card) :is(input.n-input, select.n-select, textarea.n-textarea) {
  color: var(--n-ink) !important; background-color: var(--n-paper) !important; border: 1px solid var(--n-rule) !important;
  border-radius: var(--n-radius) !important; font-family: var(--n-sans) !important; box-shadow: none !important;
}
html body :is(.n-page, .n-island, .n-card) input.n-input--mono { font-family: var(--n-mono) !important; }
html body :is(.n-page, .n-island, .n-card) select.n-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--n-ink) 50%), linear-gradient(135deg, var(--n-ink) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50% !important;
  background-size: 5px 5px !important; background-repeat: no-repeat !important;
}
html body :is(.n-page, .n-island, .n-card) :is(input.n-input, select.n-select, textarea.n-textarea):focus-visible { box-shadow: inset 0 -3px 0 var(--n-accent) !important; }
html body :is(.n-page, .n-island, .n-card) :is(input.n-input, textarea.n-textarea)::placeholder { color: var(--n-muted) !important; }
html body :is(.n-page, .n-island, .n-card) :is(code, pre) { font-family: var(--n-mono) !important; color: var(--n-ink) !important; background: var(--n-tint) !important; border-radius: var(--n-radius) !important; }
/* v4-theme paints every link inside .main-content green (0,6,1). */
html body :is(.n-page, .n-island, .n-card, .n-alert) a:not([class*="btn"]):not(.n-cta):not(.n-brand):not(.n-card--link) { color: var(--n-accent-ink) !important; }
html body :is(.n-page, .n-island, .n-card, .n-alert) a:not([class*="btn"]):not(.n-cta):not(.n-brand):not(.n-card--link):hover,
html body :is(.n-page, .n-island, .n-card, .n-alert) a[aria-current]:not([class*="btn"]):not(.n-cta) { color: var(--n-ink) !important; }
html body :is(.n-nav-links, .n-foot, .n-toc) a:not([class*="btn"]):not(.n-cta) { color: var(--n-muted) !important; }
html body :is(.n-nav-links, .n-foot, .n-toc) a:not([class*="btn"]):not(.n-cta):hover,
html body :is(.n-nav-links, .n-foot, .n-toc) a[aria-current]:not([class*="btn"]):not(.n-cta) { color: var(--n-ink) !important; }
html body .n-nav-links a.n-cta, html body .n-nav-links a.n-cta:hover { color: var(--n-paper) !important; }
html body .n-band-ink a:not([class*="btn"]) { color: var(--n-paper) !important; }

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .n-wrap { padding-left: var(--n-s-4); padding-right: var(--n-s-4); }
  .n-nav > .n-wrap { padding-top: var(--n-s-3); padding-bottom: var(--n-s-3); min-height: 64px; }
  .n-nav-links { gap: 10px 18px; }
  .n-page .n-nav-links .n-cta { height: 40px; padding: 0 14px; }
  .n-page-head > .n-wrap { padding-top: var(--n-s-12); padding-bottom: var(--n-s-8); }
  .n-sec > .n-wrap { padding-top: var(--n-s-16); padding-bottom: var(--n-s-16); }
  .n-sec-head { margin-bottom: var(--n-s-7); }
  .n-h1 { font-size: var(--n-fs-section); }
  .n-lead { font-size: var(--n-fs-lead); }
  .n-doc > .n-wrap { padding-top: var(--n-s-10); padding-bottom: var(--n-s-16); }
  .n-prose h1 { font-size: var(--n-fs-section); }
  .n-prose h2 { font-size: var(--n-fs-lead-lg); }
  .n-card { padding: var(--n-s-5); }
  .n-code { padding: var(--n-s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .n-btn, .n-card--link, .n-input, .n-select, .n-textarea, .n-page .n-nav-links .n-cta { transition: none; }
}

@media print {
  .n-nav, .n-foot, .n-toc, .n-skip { display: none; }
  .n-page { background: var(--n-paper); color: var(--n-ink); }
  .n-prose { max-width: none; }
  .n-prose a { color: var(--n-ink); }
}