/* ============================================================
 * Nova.css — LPWD Design System · Zenith Standard
 * Load AFTER nova-tokens.css (generated per client).
 * All values reference CSS custom properties — never hardcoded.
 * ACSS-compatible token vocabulary.
 * ============================================================ */

/* ── Reset ────────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%; /* 1rem = 10px — required for ACSS rem math */
}

body {
  margin: 0;
  font-family: var(--text-font-family, system-ui, sans-serif);
  font-size: var(--text-m);
  font-weight: var(--text-font-weight);
  line-height: var(--text-line-height);
  color: var(--body-color);
  background-color: var(--body-bg-color);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family, inherit);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  text-wrap: var(--heading-text-wrap, pretty);
  margin-block: 0 var(--heading-spacing, 1.2em);
}

h1 { font-size: var(--h1); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); color: var(--h1-color, var(--heading-color)); }
h2 { font-size: var(--h2); color: var(--h2-color, var(--heading-color)); }
h3 { font-size: var(--h3); color: var(--h3-color, var(--heading-color)); }
h4 { font-size: var(--h4); color: var(--h4-color, var(--heading-color)); }
h5 { font-size: var(--h5); color: var(--h5-color, var(--heading-color)); }
h6 { font-size: var(--h6); color: var(--h6-color, var(--heading-color)); }

p {
  margin-block: 0 var(--paragraph-spacing, 1em);
  color: var(--text-color, inherit);
}

a {
  color: var(--link-color);
  text-decoration: var(--link-decoration, none);
  font-weight: var(--link-weight, inherit);
  transition: color var(--transition-duration) var(--transition-timing);
}

a:hover { color: var(--link-color-hover); }

img, video, svg { display: block; max-width: 100%; height: auto; }

ul, ol { padding-inline-start: 1.5em; margin-block: 0 var(--paragraph-spacing); }
li + li { margin-block-start: 0.4em; }

/* ── Focus ────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color);
  outline-offset: var(--focus-offset, 2px);
  border-radius: var(--radius-xs, 2px);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--content-width-safe);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-x);
}

.section--xs  { padding-block: var(--section-space-xs); }
.section--s   { padding-block: var(--section-space-s); }
.section--m   { padding-block: var(--section-space-m); }
.section--l   { padding-block: var(--section-space-l); }
.section--xl  { padding-block: var(--section-space-xl); }
.section--xxl { padding-block: var(--section-space-xxl); }

/* ── Content grid — full-bleed zones ────────────────────────────────────────── */

/* Four named zones on ONE grid: content (the default) · feature · feature-max · full.
   A child opts out of the container BY NAME instead of fighting it with negative margins or
   `width: 100vw` (which overflows whenever a scrollbar is present). Documented in Bible §6 and
   listed in nova-essentials' LAYOUT vocabulary long before it existed — shipped 2026-09-24.

   The feature tracks are the EXTRA width each side. The content track reads --content-inner,
   the SAME token `.container` resolves to once its gutter padding is taken off — measured at
   1280px before that: container 575px, grid 600px, a 12.5px step every time a page used both.
   One page width, two syntaxes, one token. `minmax(0, …)` lets every
   zone collapse on a narrow viewport rather than forcing a horizontal scrollbar — that is what
   makes this safe at 375px with no media query. */
.content-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [feature-max-start] minmax(0, var(--feature-max-width))
    [feature-start] minmax(0, var(--feature-width))
    [content-start] min(var(--content-inner), 100%) [content-end]
    minmax(0, var(--feature-width)) [feature-end]
    minmax(0, var(--feature-max-width)) [feature-max-end]
    minmax(var(--gutter), 1fr) [full-end];
}

/* Everything lands in the content zone unless it says otherwise. */
.content-grid > * { grid-column: content; }

.content--feature     { grid-column: feature; }
.content--feature-max { grid-column: feature-max; }
.content--full        { grid-column: full; }

/* Full width, but the content inside still respects the gutter — for a full-bleed coloured band
   rather than a full-bleed image. */
.content--full-safe   { grid-column: full; padding-inline: var(--gutter); }

/* ── Grid ─────────────────────────────────────────────────────────────────── */

/* ACSS-compatible behavior: any .grid--* class auto-applies display:grid + gap.
   No .grid base class needed — .grid--auto-3 alone wires up the full grid context.
   Mirrors ACSS's [class*="grid--auto"] pattern without ACSS's !important. */
.grid,
[class*="grid--"]:not([class*="rows"]) {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2  { grid-template-columns: var(--grid-2); }
.grid--3  { grid-template-columns: var(--grid-3); }
.grid--4  { grid-template-columns: var(--grid-4); }
.grid--6  { grid-template-columns: var(--grid-6); }
.grid--12 { grid-template-columns: var(--grid-12); }

.grid--auto-2 { grid-template-columns: var(--grid-auto-2); }
.grid--auto-3 { grid-template-columns: var(--grid-auto-3); }
.grid--auto-4 { grid-template-columns: var(--grid-auto-4); }
.grid--auto-5 { grid-template-columns: var(--grid-auto-5); }
.grid--auto-6 { grid-template-columns: var(--grid-auto-6); }

/* ── Ratio grids ──────────────────────────────────────────────────────────────
   The uneven pairs. nova-tokens.js has emitted --grid-1-2 / --grid-2-1 / … into
   EVERY project's tokens.css since the generator was written, and the Bible has
   documented these classes all along — but the classes themselves were never in
   any implementation. So `class="grid--2-1"` silently did nothing on every LPWD
   site, and authors reaching for the documented utility quietly fell back to
   custom CSS carrying its own breakpoint.

   Caught on the agency FAQ, 2026-08-07. The utility was hard to use because what
   we shipped was a thin subset of what we documented: the tokens and the docs both
   existed, only the classes were missing. */
.grid--1-2 { grid-template-columns: var(--grid-1-2); }
.grid--2-1 { grid-template-columns: var(--grid-2-1); }
.grid--1-3 { grid-template-columns: var(--grid-1-3); }
.grid--3-1 { grid-template-columns: var(--grid-3-1); }
.grid--2-3 { grid-template-columns: var(--grid-2-3); }
.grid--3-2 { grid-template-columns: var(--grid-3-2); }

/* ── Responsive grid columns ──────────────────────────────────────────────────
   .grid--{bp}-{N} collapses a grid at a breakpoint and below. Desktop-down, and
   each query uses the BOUNDARY ITSELF (768, not 767) — standards/zenith-responsive
   -standard.json → breakpoint_usage. Written as literals because a media query
   cannot read a custom property.

   Also absent from every implementation until now: a ratio grid is only usable if
   you can collapse it on a phone, so shipping .grid--2-1 without .grid--m-1 would
   have been half a feature. */
@media (max-width: 1440px) {  /* xxl */
  .grid--xxl-1 { grid-template-columns: var(--grid-1); }
  .grid--xxl-2 { grid-template-columns: var(--grid-2); }
  .grid--xxl-3 { grid-template-columns: var(--grid-3); }
  .grid--xxl-4 { grid-template-columns: var(--grid-4); }
}
@media (max-width: 1366px) {  /* xl */
  .grid--xl-1 { grid-template-columns: var(--grid-1); }
  .grid--xl-2 { grid-template-columns: var(--grid-2); }
  .grid--xl-3 { grid-template-columns: var(--grid-3); }
  .grid--xl-4 { grid-template-columns: var(--grid-4); }
}
@media (max-width: 992px) {   /* l */
  .grid--l-1 { grid-template-columns: var(--grid-1); }
  .grid--l-2 { grid-template-columns: var(--grid-2); }
  .grid--l-3 { grid-template-columns: var(--grid-3); }
  .grid--l-4 { grid-template-columns: var(--grid-4); }
}
@media (max-width: 768px) {   /* m */
  .grid--m-1 { grid-template-columns: var(--grid-1); }
  .grid--m-2 { grid-template-columns: var(--grid-2); }
  .grid--m-3 { grid-template-columns: var(--grid-3); }
  .grid--m-4 { grid-template-columns: var(--grid-4); }
}
@media (max-width: 480px) {   /* s */
  .grid--s-1 { grid-template-columns: var(--grid-1); }
  .grid--s-2 { grid-template-columns: var(--grid-2); }
  .grid--s-3 { grid-template-columns: var(--grid-3); }
}

/* ── Flex ─────────────────────────────────────────────────────────────────── */

/* Same pattern as grid: any .flex--* modifier auto-applies display:flex + gap.
   .flex--col alone works; no .flex base needed. */
.flex,
[class*="flex--"] {
  display: flex;
  gap: var(--grid-gap);
}

.flex--col    { flex-direction: column; }
.flex--center { align-items: center; justify-content: center; }
.flex--between{ align-items: center; justify-content: space-between; }
.flex--wrap   { flex-wrap: wrap; }
.flex--start  { align-items: flex-start; }
.flex--end    { align-items: flex-end; }

/* ── Surfaces ─────────────────────────────────────────────────────────────── */

.surface-1       { background-color: var(--surface-1); color: var(--on-surface); }
.surface-2       { background-color: var(--surface-2); color: var(--on-surface); }
.surface-3       { background-color: var(--surface-3); color: var(--on-surface); }
.surface-4       { background-color: var(--surface-4); color: var(--on-surface); }
.surface--primary   { background-color: var(--primary); color: var(--white); }
.surface--secondary { background-color: var(--secondary); color: var(--text-dark); }
.surface--dark      { background-color: var(--neutral-ultra-dark); color: var(--white); }
.surface--light     { background-color: var(--primary-ultra-light); color: var(--text-dark); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  min-width: var(--btn-min-width);
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-radius, var(--btn-border-radius));
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn--primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}

.btn--secondary {
  background-color: var(--secondary);
  color: var(--text-dark);
  border-color: var(--secondary);
}
.btn--secondary:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--primary);
  border-color: transparent;
}
.btn--ghost:hover {
  background-color: var(--primary-ultra-light);
  color: var(--primary-dark);
}

.btn--outline {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn--outline:hover {
  background-color: var(--primary);
  color: var(--white);
}

.btn--outline-light {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white-trans-70);
}
.btn--outline-light:hover {
  background-color: var(--white);
  color: var(--text-dark);
  border-color: var(--white);
}

.btn--sm { padding-block: 0.3em; padding-inline: 0.9em; min-width: 0; font-size: var(--text-s); }
.btn--lg { padding-block: 0.75em; padding-inline: 1.75em; font-size: var(--text-l); }

/* ── Prose ────────────────────────────────────────────────────────────────── */

.prose {
  max-width: 72ch;
  color: var(--text-color, var(--body-color));
}

.prose > * + * { margin-block-start: var(--flow-spacing); }

.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
  margin-block-start: calc(var(--heading-spacing) * 1.5);
}

.prose blockquote {
  border-inline-start: 4px solid var(--primary);
  margin-inline: 0;
  padding-inline: var(--space-m);
  color: var(--on-surface-muted, var(--text-dark-muted));
  font-style: italic;
}

.prose code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.875em;
  background-color: var(--surface-2);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
}

.prose pre {
  background-color: var(--surface-2);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  overflow-x: auto;
}

.prose pre code { background: none; padding: 0; font-size: inherit; }

/* ── Text utilities ───────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Text size scale — ACSS-compatible double-dash naming (.text--xs through .text--xxl).
   Cascades to inline children via descendant selector, matching ACSS behavior. */
.text--xs,  .text--xs  > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, em, cite, a)  { font-size: var(--text-xs); }
.text--s,   .text--s   > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, em, cite, a)  { font-size: var(--text-s); }
.text--m,   .text--m   > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, em, cite, a)  { font-size: var(--text-m); }
.text--l,   .text--l   > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, em, cite, a)  { font-size: var(--text-l); }
.text--xl,  .text--xl  > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, em, cite, a)  { font-size: var(--text-xl); }
.text--xxl, .text--xxl > :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, em, cite, a)  { font-size: var(--text-xxl); }

.text-muted    { color: var(--on-surface-muted, var(--text-dark-muted)); }
.text-primary  { color: var(--primary); }
.text-secondary{ color: var(--secondary); }
.text-white    { color: var(--white); }

/* ── Spacing utilities ────────────────────────────────────────────────────── */

.space-xs  { margin-block-end: var(--space-xs); }
.space-s   { margin-block-end: var(--space-s); }
.space-m   { margin-block-end: var(--space-m); }
.space-l   { margin-block-end: var(--space-l); }
.space-xl  { margin-block-end: var(--space-xl); }
.space-xxl { margin-block-end: var(--space-xxl); }

.pad-xs  { padding: var(--space-xs); }
.pad-s   { padding: var(--space-s); }
.pad-m   { padding: var(--space-m); }
.pad-l   { padding: var(--space-l); }
.pad-xl  { padding: var(--space-xl); }

/* ── Radius utilities ─────────────────────────────────────────────────────── */

.radius-none { border-radius: 0; }
.radius-s    { border-radius: var(--radius-s); }
.radius-m    { border-radius: var(--radius-m); }
.radius-l    { border-radius: var(--radius-l); }
.radius-xl   { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-circle); }

/* ── Shadow utilities ─────────────────────────────────────────────────────── */

.shadow-m  { box-shadow: var(--box-shadow-m); }
.shadow-l  { box-shadow: var(--box-shadow-l); }
.shadow-xl { box-shadow: var(--box-shadow-xl); }

/* ── Navigation ───────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--surface-1);
  border-bottom: 1px solid var(--border-color-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--transition-duration) var(--transition-timing);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height, 6rem);
  max-width: var(--content-width-safe);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--on-surface);
  font-weight: 700;
  font-size: var(--text-l);
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  text-decoration: none;
  color: var(--on-surface-muted, var(--text-dark-muted));
  font-weight: 500;
  font-size: var(--text-m);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-m);
  transition: color var(--transition-duration) var(--transition-timing),
              background-color var(--transition-duration) var(--transition-timing);
}

.nav__link:hover {
  color: var(--primary);
  background-color: var(--primary-ultra-light);
}

.nav__link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

.nav__cta { margin-inline-start: var(--space-xs); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--on-surface);
  border-radius: 2px;
  transition: transform var(--motion-duration-s, 0.2s) var(--motion-ease-in-out, ease-in-out),
              opacity   var(--motion-duration-s, 0.2s) var(--motion-ease-in-out, ease-in-out);
}

/* Hamburger → X */
.nav[data-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav[data-open="true"] .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav { position: relative; }
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--surface-1);
    border-bottom: 1px solid var(--border-color-dark);
    padding-block: var(--space-xs);
    transform: translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--motion-duration-m, 0.35s) var(--motion-ease-out, ease),
                opacity   var(--motion-duration-m, 0.35s) var(--motion-ease-out, ease);
  }

  .nav[data-open="true"] .nav__links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__link {
    padding: var(--space-s) var(--gutter);
    border-radius: 0;
    border-bottom: 1px solid var(--border-color-dark);
  }

  .nav__cta { margin: var(--space-xs) var(--gutter); }
}

/* ── Motion utilities ─────────────────────────────────────────────────────── */

.motion-fade-up {
  animation: lpwd-fade-up var(--motion-duration-m) var(--motion-ease-out) both;
}

.motion-fade-in {
  animation: lpwd-fade-in var(--motion-duration-m) var(--motion-ease-out) both;
}

.motion-scale-in {
  animation: lpwd-scale-in var(--motion-duration-m) var(--motion-ease-spring) both;
}

@keyframes lpwd-fade-up {
  from { opacity: 0; translate: 0 var(--motion-distance-m); }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes lpwd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lpwd-scale-in {
  from { opacity: 0; scale: var(--motion-scale-origin); }
  to   { opacity: 1; scale: 1; }
}

/* Stagger helpers — add data-delay="1"..data-delay="6" */
[data-delay="1"] { animation-delay: calc(var(--motion-stagger) * 1); }
[data-delay="2"] { animation-delay: calc(var(--motion-stagger) * 2); }
[data-delay="3"] { animation-delay: calc(var(--motion-stagger) * 3); }
[data-delay="4"] { animation-delay: calc(var(--motion-stagger) * 4); }
[data-delay="5"] { animation-delay: calc(var(--motion-stagger) * 5); }
[data-delay="6"] { animation-delay: calc(var(--motion-stagger) * 6); }

/* Scroll reveal — makes the three utilities above work BELOW THE FOLD, and play once.
   Wrap them: <div class="reveal-once"><p class="motion-fade-up" data-delay="1">…</p></div>
   The children keep their own .motion-* animation and their data-delay stagger; this only
   decides WHEN it is allowed to run.

   Why it exists: .motion-fade-up/-fade-in/-scale-in run on the DOCUMENT timeline, so an element
   three viewports down finishes its reveal at load, unseen — measured, opacity 1 in all three
   engines. The Bible's `.on-visible--*` would fix it but is an ACSS *plugin* utility that vanilla
   Nova does not ship (grep: zero hits in this file, components/ and standards/).

   How it plays ONCE: view() drives a custom property, a style query turns the child's animation
   from paused to running, and out of view it pauses again — at 100%. So it sticks instead of
   reversing, which is the one thing a plain scroll-driven reveal cannot do.

   Measured 2026-09-23 · `node scripts/css-feature-probe.mjs scroll-reveal-guarded`
     chromium 147 PASS · webkit 26.4 PASS · firefox 148 PASS (no animation-timeline → guard
     keeps the content plainly visible). UNGUARDED, Firefox measured 0/0/0: a card that NEVER
     appears. The @supports wrapper is the recipe, not a nicety. */
@keyframes lpwd-in-view { to { --in-view: true; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-once {
      --in-view: false;
      animation: lpwd-in-view 1s linear both;
      animation-timeline: view();
      animation-range: entry var(--reveal-start, 20%) entry var(--reveal-end, 60%);
    }
    .reveal-once > * { animation-play-state: paused; }
    @container style(--in-view: true) { .reveal-once > * { animation-play-state: running; } }
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Accessibility ────────────────────────────────────────────────────────── */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 9999;
  padding: var(--space-xs) var(--space-m);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-m);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus { top: var(--space-s); }

/* ── Accessible table ──────────────────────────────────────────────────────
 * Pattern: .nova-table__scroll[tabindex=0][role=region][aria-label] wraps the
 * <table>. Caption is required (visible or .visually-hidden). <th scope> on
 * every header cell. Keyboard users can scroll the region; focus ring shows it.
 * Harvested from W3C techniques (see components/nova-a11y/). */

.nova-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-color-dark);
}

.nova-table__scroll:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color);
  outline-offset: var(--focus-offset, 2px);
}

.nova-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
  color: var(--on-surface);
  background: var(--surface-1);
}

.nova-table caption {
  caption-side: top;
  text-align: start;
  padding: var(--space-xs) var(--space-s);
  font-weight: 700;
  color: var(--on-surface);
}

.nova-table th,
.nova-table td {
  padding: var(--space-xs) var(--space-s);
  text-align: start;
  border-bottom: 1px solid var(--border-color-dark);
}

.nova-table thead th,
.nova-table th[scope="col"] {
  background: var(--surface-2);
  font-weight: 700;
  position: sticky;
  top: 0;
}

.nova-table th[scope="row"] {
  background: var(--surface-2);
  font-weight: 600;
}

.nova-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.nova-table tbody tr:hover td { background: var(--primary-ultra-light); }

/* ── Accessible slider / carousel ──────────────────────────────────────────
 * Behaviour: zenith-core [ZC-07]. Markup keyed off [data-zc-slider].
 * Region: role=group aria-roledescription=carousel aria-label="…".
 * Auto-rotation (data-zc-slider-autoplay=ms) pauses on hover/focus and is
 * disabled under prefers-reduced-motion. See components/nova-a11y/. */

.nova-slider { position: relative; }

.nova-slider__viewport { overflow: hidden; border-radius: var(--radius-m); }

.nova-slider__track {
  display: flex;
  transition: transform var(--transition-duration, .4s) var(--transition-timing, ease);
}

.nova-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.nova-slider__slide[hidden] { display: none; }

.nova-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  font-size: var(--text-l);
  line-height: 1;
}

.nova-slider__btn:hover { background: var(--primary-hover); }
.nova-slider__btn:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color);
  outline-offset: var(--focus-offset, 2px);
}
.nova-slider__btn--prev { left: var(--space-s); }
.nova-slider__btn--next { right: var(--space-s); }

.nova-slider__dots {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  padding: var(--space-s) 0 0;
  list-style: none;
  margin: 0;
}

.nova-slider__dot {
  width: 1em;
  height: 1em;
  padding: 0;
  border: 1px solid var(--primary);
  border-radius: var(--radius-circle);
  background: transparent;
  cursor: pointer;
}

.nova-slider__dot[aria-current="true"] { background: var(--primary); }
.nova-slider__dot:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color);
  outline-offset: var(--focus-offset, 2px);
}