/* ==========================================================================
   Narvy public shell (base.html with n_shell, 2026-10-31)
   --------------------------------------------------------------------------
   Only loaded on pages that opt into the Narvy chrome. Reads the --n-*
   tokens of narvy.css; adds nothing to the token set. Holds the shell glue
   (main, flashes) and the small public-page kit shared by the store check,
   the grade pages, the error pages and the feature pages: a page head, a
   narrow form column, a drop zone, a status line.
   ========================================================================== */

html[data-shell="narvy"] { background: var(--n-paper); overflow-x: clip; }

/* Bridge: public page templates written for the legacy theme read its
   variables (--text-primary, --bg-secondary, --accent, --radius-sm...).
   On a Narvy page v4-theme.css is not loaded, so those names are defined
   here once, on the Narvy tokens: the page styles land on ink, paper,
   hairlines, one violet and square corners without rewriting each rule. */
html[data-shell="narvy"] {
  --text-primary: var(--n-ink);
  --text-secondary: var(--n-ink-2);
  --text-muted: var(--n-muted);
  --text-tertiary: var(--n-muted);
  --bg-primary: var(--n-paper);
  --bg-secondary: var(--n-tint);
  --bg-card: var(--n-paper);
  --surface: var(--n-paper);
  --background: var(--n-paper);
  --border-subtle: var(--n-hair);
  --border-strong: var(--n-rule);
  --accent: var(--n-accent);
  --accent-text: var(--n-accent-ink);
  --primary-color: var(--n-accent);
  --success-color: var(--n-ok);
  --warning-color: var(--n-warn);
  --error-color: var(--n-danger);
  --gray-400: var(--n-muted);
  --gray-700: var(--n-ink-2);
  --font-display: var(--n-sans);
  --font-title: var(--n-sans);
  --font-body: var(--n-sans);
  --font-mono: var(--n-mono);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-sm: none;
  --shadow-md: none;
}
.n-public { min-height: 100vh; display: flex; flex-direction: column; }
.n-public .n-main { flex: 1 0 auto; }
.n-public .n-foot { flex: 0 0 auto; }
.n-public h1, .n-public h2, .n-public h3, .n-public h4 { color: var(--n-ink); font-family: var(--n-sans); }
.n-public img { max-width: 100%; height: auto; }

/* The FAQ assistant (chatbot.css) on a Narvy page: violet launcher, square,
   ink header, paper panel. Variables only; chatbot.css keeps its layout. */
html[data-shell="narvy"] #ts-chatbot {
  --tsc-accent: var(--n-accent); --tsc-accent-ink: var(--n-paper); --tsc-accent-dark: var(--n-ink);
  --tsc-panel-bg: var(--n-paper); --tsc-panel-fg: var(--n-ink);
  --tsc-header-bg: var(--n-ink); --tsc-header-fg: var(--n-paper);
  --tsc-bot-bubble: var(--n-tint); --tsc-bot-fg: var(--n-ink);
  --tsc-user-bubble: var(--n-accent); --tsc-user-fg: var(--n-paper);
  --tsc-border: var(--n-hair); --tsc-muted: var(--n-muted); --tsc-input-bg: var(--n-paper);
  --tsc-shadow: none;
  font-family: var(--n-sans);
}
html[data-shell="narvy"] #ts-chatbot .ts-chatbot-launcher { border-radius: 0; width: 48px; height: 48px; font-size: var(--n-fs-lead); }
html[data-shell="narvy"] #ts-chatbot .ts-chatbot-launcher:hover { background: var(--n-accent-ink); }
html[data-shell="narvy"] #ts-chatbot * { border-radius: 0; }

.n-flash { display: grid; gap: var(--n-s-2); padding-top: var(--n-s-4); }
.n-flash:not(:has(*)) { display: none; }

/* Page head used by every public tool page: kicker, title, lead. */
.np-head > .n-wrap { padding-top: var(--n-s-18); padding-bottom: var(--n-s-10); }
.np-head .n-lead { margin-top: var(--n-s-5); }
.np-body > .n-wrap { padding-bottom: var(--n-s-24); }
.np-narrow { max-width: 720px; }

/* A ruled panel (form, result, notice). */
.np-panel { border: 1px solid var(--n-rule); background: var(--n-paper); padding: var(--n-s-7); }
.np-panel + .np-panel { margin-top: var(--n-s-6); }
.np-panel--quiet { border-color: var(--n-hair); }
.np-panel--tint { background: var(--n-tint); border-color: var(--n-hair); }

/* Segmented control: the home scan tabs, reused. */
.np-tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--n-rule); }
.np-tabs > * { min-height: var(--n-control-h); padding: 0 var(--n-s-5); display: inline-flex; align-items: center; border: 0; border-right: 1px solid var(--n-rule); background: var(--n-paper); color: var(--n-ink); font: 500 var(--n-fs-ui)/1.2 var(--n-sans); cursor: pointer; transition: background var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease); }
.np-tabs > *:last-child { border-right: 0; }
.np-tabs > *:hover { background: var(--n-tint); }
.np-tabs > [aria-pressed="true"], .np-tabs > [aria-selected="true"], .np-tabs > .active, .np-tabs > .is-active { background: var(--n-accent); color: var(--n-paper); }

/* File drop zone: dashed is the only non-solid rule in the system. */
.np-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--n-s-2); min-height: 180px; padding: var(--n-s-8) var(--n-s-6); border: 1px dashed var(--n-rule); background: var(--n-paper); color: var(--n-ink-2); text-align: center; transition: background var(--n-dur) var(--n-ease); }
.np-drop:hover, .np-drop.is-over, .np-drop.dragover, .np-drop.drag-over { background: var(--n-tint); }

/* Small status line under a form. */
.np-status { font-family: var(--n-mono); font-size: var(--n-fs-meta); color: var(--n-muted); }

/* Row of mono links under a tool. */
.np-links { display: flex; flex-wrap: wrap; gap: var(--n-s-3) var(--n-s-6); margin: var(--n-s-8) 0 0; padding: 0; list-style: none; font-family: var(--n-mono); font-size: var(--n-fs-meta); }

@media (max-width: 640px) {
  .np-head > .n-wrap { padding-top: var(--n-s-12); padding-bottom: var(--n-s-8); }
  .np-body > .n-wrap { padding-bottom: var(--n-s-16); }
  .np-panel { padding: var(--n-s-5); }
  .np-tabs { display: flex; width: 100%; }
  .np-tabs > * { flex: 1 1 auto; justify-content: center; padding: 0 var(--n-s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .np-tabs > *, .np-drop { transition: none; }
}