/* Direction switches: each direction maps the shared roles to its own type, radius and density. */
:root, [data-theme="registre"] {
  --na-font-title: var(--font-registre-serif);
  --na-font-ui: var(--font-registre-sans);
  --na-radius: var(--radius-registre);
  --na-pad: var(--space-4);
  --na-ctl: 36px;
  --na-fs: 14px;
}
[data-theme="atelier"] {
  --na-font-title: var(--font-atelier);
  --na-font-ui: var(--font-atelier);
  --na-radius: var(--radius-atelier);
  --na-pad: var(--space-3);
  --na-ctl: 32px;
  --na-fs: 13px;
}
[data-theme="signal"] {
  --na-font-title: var(--font-signal);
  --na-font-ui: var(--font-signal);
  --na-radius: var(--radius-signal);
  --na-pad: var(--space-6);
  --na-ctl: 48px;
  --na-fs: 17px;
}

[data-theme] { color: var(--ink); font-family: var(--na-font-ui); font-size: var(--na-fs); }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--na-font-ui); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Side-by-side comparison used by component previews */
.na-trio { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 100%; }
.na-trio > [data-theme] { background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.na-trio-label { font: 600 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* Code */
.na-code { font-family: var(--font-mono); font-size: .92em; letter-spacing: .01em; white-space: nowrap; }
.na-code b { font-weight: 500; color: var(--ink-muted); }

/* Button */
.na-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--na-ctl); padding: 0 calc(var(--na-pad) + 2px);
  border-radius: var(--na-radius); border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: 600 var(--na-fs)/1 var(--na-font-ui); cursor: pointer; white-space: nowrap; }
.na-btn.is-secondary { background: transparent; color: var(--ink); border-color: var(--ink-muted); }
.na-btn.is-danger { background: transparent; color: var(--status-fail); border-color: var(--status-fail); }
.na-btn.is-quiet { background: transparent; border-color: transparent; color: var(--accent); padding: 0 var(--space-2); }
.na-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Status badge: glyph + word, never colour alone */
.na-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border-radius: var(--radius-pill);
  border: 1.5px solid currentColor; font: 600 calc(var(--na-fs) - 2px)/1.4 var(--na-font-ui); white-space: nowrap; color: var(--ink-muted); }
.na-badge::before { content: "○"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; font-size: .85em; }
.na-badge.is-ok { color: var(--status-ok); } .na-badge.is-ok::before { content: "✓"; }
.na-badge.is-warn { color: var(--status-warn); } .na-badge.is-warn::before { content: "!"; font-weight: 700; }
.na-badge.is-fail { color: var(--status-fail); } .na-badge.is-fail::before { content: "✕"; }
.na-badge.is-active { color: var(--accent); } .na-badge.is-active::before { content: "●"; }

/* Confidentiality mark */
.na-conf { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 8px; border: 1px solid var(--ink-muted); border-radius: var(--na-radius); color: var(--ink); }
.na-conf.is-high { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Page thumbnail */
.na-thumb { position: relative; display: flex; flex-direction: column; gap: 4px; width: 88px; }
.na-sheet { aspect-ratio: 210/297; background: var(--surface-raised); border: 1px solid var(--line); border-radius: min(var(--na-radius), 4px);
  padding: 12% 12%; display: flex; flex-direction: column; gap: 5px; }
.na-sheet i { display: block; height: 2px; background: var(--line); }
.na-sheet i:nth-child(1) { width: 55%; height: 3px; background: var(--ink-muted); margin-bottom: 4px; }
.na-sheet i:nth-child(3n) { width: 80%; } .na-sheet i:nth-child(4n) { width: 65%; }
.na-thumb.is-blurry .na-sheet i { filter: blur(1.5px); }
.na-thumb.is-blank .na-sheet i { display: none; }
.na-thumb.is-selected .na-sheet { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.na-thumb.has-flag .na-sheet { border: 2px solid var(--status-fail); }
.na-thumb-meta { display: flex; justify-content: space-between; align-items: center; font: 500 11px/14px var(--font-mono); color: var(--ink-muted); }
.na-flag { white-space: nowrap; font: 700 10px/1 var(--na-font-ui); color: var(--status-fail); text-transform: uppercase; letter-spacing: .04em; }
.na-flag.is-warn { color: var(--status-warn); }

/* KPI */
.na-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--na-pad); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--na-radius); min-width: 0; }
.na-kpi-value { font: 600 32px/1.1 var(--na-font-title); font-variant-numeric: tabular-nums; }
[data-theme="signal"] .na-kpi-value { font-size: 44px; font-weight: 700; }
.na-kpi-label { font-size: calc(var(--na-fs) - 1px); color: var(--ink-muted); }
.na-kpi-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); margin-top: var(--space-2); overflow: hidden; }
.na-kpi-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* Autocomplete */
.na-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.na-field label { font-size: calc(var(--na-fs) - 1px); font-weight: 600; color: var(--ink-muted); }
.na-input { height: var(--na-ctl); padding: 0 var(--space-3); background: var(--surface-raised); border: 1.5px solid var(--ink-muted); border-radius: var(--na-radius);
  font: 500 var(--na-fs)/1 var(--font-mono); color: var(--ink); display: flex; align-items: center; width: 100%; }
.na-input.is-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.na-caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--ink); margin-left: 1px; }
.na-suggest { margin: 0; padding: 4px; list-style: none; background: var(--surface-raised); border: 1px solid var(--ink-muted); border-radius: var(--na-radius); width: 100%; }
.na-suggest li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 10px; border-radius: max(calc(var(--na-radius) - 2px), 0px); }
.na-suggest li.is-active { background: var(--accent-soft); }
.na-suggest mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.na-suggest small { color: var(--ink-muted); font-size: calc(var(--na-fs) - 2px); }

/* Checklist item */
.na-check { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); width: 100%; }
.na-check-title { font-weight: 600; }
.na-check-hint { grid-column: 1 / -1; font-size: calc(var(--na-fs) - 2px); color: var(--ink-muted); margin-top: -4px; }
.na-seg { display: inline-flex; border: 1.5px solid var(--ink-muted); border-radius: var(--na-radius); overflow: hidden; }
.na-seg span { padding: 4px 12px; font-weight: 600; font-size: calc(var(--na-fs) - 2px); color: var(--ink-muted); }
.na-seg span + span { border-left: 1.5px solid var(--ink-muted); }
.na-seg span.on-ok { background: var(--status-ok); color: var(--surface); }
.na-seg span.on-fail { background: var(--status-fail); color: var(--surface); }
.na-auto { font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); border: 1px dashed var(--accent); padding: 2px 4px; border-radius: 3px; margin-left: 6px; vertical-align: 2px; }

/* Screens */
.na-screen { background: var(--surface); color: var(--ink); min-height: 100%; display: flex; flex-direction: column; }
.na-topbar { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); height: 52px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.na-brand { font: 600 15px/1 var(--na-font-title); }
.na-nav { display: flex; gap: var(--space-1); flex: 1; }
.na-nav a { padding: 8px 12px; border-radius: var(--na-radius); color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.na-nav a.is-on { color: var(--ink); background: var(--accent-soft); }
.na-user { font-size: 12px; color: var(--ink-muted); text-align: right; line-height: 1.3; }
.na-user b { color: var(--ink); display: block; }
.na-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--na-radius); padding: var(--na-pad); }
.na-table { width: 100%; border-collapse: collapse; }
.na-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-muted); padding: 8px 12px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.na-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.na-table tr.is-new td { background: var(--accent-soft); }

/* Icons: inline SVG, stroke inherits currentColor */
.na-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.na-nav a { display: inline-flex; align-items: center; gap: 6px; }
.na-nav a .na-ico { width: 18px; height: 18px; }
[data-theme="signal"] .na-nav a { min-height: 44px; }

/* Empty, loading, error and restricted states */
.na-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--na-pad); background: var(--surface-raised);
  border: 1px solid var(--line); border-radius: var(--na-radius); width: 100%; }
.na-state .na-ico { width: 28px; height: 28px; color: var(--ink-muted); }
.na-state.is-fail .na-ico { color: var(--status-fail); }
.na-state.is-restricted { border: 1.5px solid var(--ink); }
.na-state h3 { margin: 0; font: 600 calc(var(--na-fs) + 1px)/1.3 var(--na-font-title); }
.na-state p { margin: 0; color: var(--ink-muted); font-size: calc(var(--na-fs) - 1px); line-height: 1.45; }
.na-skel { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--line); width: 100%; }
.na-skel + .na-skel { width: 70%; }
.na-textarea { width: 100%; min-height: 56px; padding: 8px 10px; background: var(--surface); border: 1.5px solid var(--ink-muted); border-radius: var(--na-radius); color: var(--ink-muted); font-size: calc(var(--na-fs) - 1px); }
@media (prefers-reduced-motion: no-preference) { .na-skel { animation: na-pulse 1.4s ease-in-out infinite; } }
@keyframes na-pulse { 50% { opacity: .55; } }