/* Cavelux systems page — governed route, token-only consumer layer. */

body[data-page="system"] {
  min-width: 0;
  margin: 0;
  background-color: var(--cvl-bg);
  background-image:
    linear-gradient(var(--cvl-ink-wash-03) var(--cvl-master-rule), transparent var(--cvl-master-rule)),
    linear-gradient(to right, var(--cvl-ink-wash-03) var(--cvl-master-rule), transparent var(--cvl-master-rule));
  background-size: var(--cvl-master-grid) var(--cvl-master-grid);
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
}

body[data-page="system"] *,
body[data-page="system"] *::before,
body[data-page="system"] *::after {
  box-sizing: border-box;
}

body[data-page="system"] a {
  color: inherit;
  text-decoration: none;
}

body[data-page="system"] button {
  font: inherit;
}

body[data-page="system"] img {
  display: block;
  max-width: var(--cvl-full);
  height: auto;
}

body[data-page="system"] .wrap {
  width: var(--cvl-full);
  max-width: var(--cvl-max);
  margin-inline: auto;
  padding-inline: var(--cvl-gutter);
}

body[data-page="system"] .skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--cvl-full) * -1);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--cvl-master-control-h);
  padding: var(--cvl-space-3) var(--cvl-space-4);
  background: var(--cvl-lime);
  color: var(--cvl-bg);
}

body[data-page="system"] .skip:focus {
  inset-block-start: var(--cvl-space-4);
  inset-inline-start: var(--cvl-space-4);
  outline: var(--cvl-master-rule) solid var(--cvl-ink);
  outline-offset: var(--cvl-space-2);
}

body[data-page="system"] .nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  min-height: var(--cvl-master-nav-h);
  border-block-end: var(--cvl-master-rule) solid var(--cvl-border);
  background: var(--cvl-bg);
}

body[data-page="system"] .nav-inner {
  display: flex;
  align-items: center;
  gap: var(--cvl-space-5);
  min-height: var(--cvl-master-nav-h);
  padding-block: var(--cvl-space-3);
}

body[data-page="system"] .nav-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--cvl-space-3);
  min-width: var(--cvl-master-control-h);
  min-height: var(--cvl-master-control-h);
}

body[data-page="system"] .nav-mark {
  width: var(--cvl-master-mark);
  height: var(--cvl-master-mark);
  flex: 0 0 auto;
  object-fit: contain;
}

body[data-page="system"] .nav-brand-word {
  color: var(--cvl-ink);
  font-family: var(--cvl-font);
  font-size: var(--cvl-fs-1p15rem);
  font-weight: 700;
  letter-spacing: var(--cvl-launch-word-tracking);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="system"] .nav-links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--cvl-space-6);
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--cvl-ink-dim);
}

body[data-page="system"] .nav-links a {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--cvl-master-control-h);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-font);
  font-size: var(--cvl-fs-0p8125rem);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-nav-lockup);
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="system"] .nav-links a::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--cvl-master-rule);
  background: transparent;
  content: "";
}

body[data-page="system"] .nav-links a:hover,
body[data-page="system"] .nav-links a:focus-visible,
body[data-page="system"] .nav-links a.is-active {
  color: var(--cvl-lime);
}

body[data-page="system"] .nav-links a.is-active::after {
  background: var(--cvl-lime);
}

body[data-page="system"] .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--cvl-master-control-h);
  min-height: var(--cvl-master-control-h);
  padding: var(--cvl-space-2) var(--cvl-space-3);
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  border-radius: var(--cvl-radius);
  background: var(--cvl-bg);
  color: var(--cvl-ink);
  cursor: pointer;
  font-family: var(--cvl-font);
  font-size: var(--cvl-fs-0p75rem);
  letter-spacing: var(--cvl-tracking-nav-lockup);
  text-transform: uppercase;
}

body[data-page="system"] .nav-toggle:hover,
body[data-page="system"] .nav-toggle:focus-visible {
  border-color: var(--cvl-lime);
  color: var(--cvl-lime);
}

html.cvl-compact body[data-page="system"] .nav-inner {
  display: grid;
  grid-template-columns: minmax(0, var(--cvl-track)) auto;
  gap: var(--cvl-space-4);
}

html.cvl-compact body[data-page="system"] .nav-toggle {
  display: inline-flex;
  grid-column: 2;
  justify-self: end;
}

html.cvl-compact body[data-page="system"] .nav-links {
  display: none;
}

/* Compact menu: same full-bleed overlay geometry as the master.js pages (cvl-visual-master.css .nav-links.is-open). */
html.cvl-compact body[data-page="system"] .nav-links.is-open {
  position: absolute;
  inset-block-start: var(--cvl-master-nav-h);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-block: var(--cvl-space-3);
  border-block-end: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-bg);
}

html.cvl-compact body[data-page="system"] .nav-links.is-open a {
  min-height: var(--cvl-master-control-h);
  padding: var(--cvl-space-3) var(--cvl-gutter);
}

body[data-page="system"].nav-menu-open {
  position: fixed;
  width: var(--cvl-full);
  overflow: hidden;
}

body[data-page="system"] .system-hero,
body[data-page="system"] .system-practice,
body[data-page="system"] .system-governance {
  border-block-end: var(--cvl-master-rule) solid var(--cvl-border);
}

body[data-page="system"] .system-hero {
  background: var(--cvl-bg);
}

body[data-page="system"] .system-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--cvl-col-gap);
  align-items: end;
  padding-block: var(--cvl-space-9);
}

body[data-page="system"] .system-hero-copy,
body[data-page="system"] .system-hero-summary,
body[data-page="system"] .route-board-heading,
body[data-page="system"] .route-readout-copy,
body[data-page="system"] .method-cadence,
body[data-page="system"] .method-check,
body[data-page="system"] .governance-heading,
body[data-page="system"] .governance-copy {
  min-width: 0;
}

body[data-page="system"] .section-label {
  margin: 0 0 var(--cvl-space-4);
  color: var(--cvl-lime);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-label);
  line-height: var(--cvl-leading-tight);
  text-transform: uppercase;
}

body[data-page="system"] h1,
body[data-page="system"] h2,
body[data-page="system"] h3 {
  margin-block: 0;
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
  font-weight: 700;
  line-height: var(--cvl-leading-display);
}

body[data-page="system"] h1 {
  max-width: var(--cvl-master-copy-col);
  font-size: var(--cvl-fs-fluid-23);
  letter-spacing: calc(var(--cvl-tracking-nav) * -0.5);
}

body[data-page="system"] h2 {
  max-width: var(--cvl-master-reading);
  font-size: var(--cvl-fs-fluid-19);
  letter-spacing: calc(var(--cvl-tracking-nav) * -0.25);
}

body[data-page="system"] p {
  max-width: var(--cvl-content-measure);
}

body[data-page="system"] .hero-supporting,
body[data-page="system"] .launch-identity-stamp,
body[data-page="system"] .system-hero-summary > p:not(.section-label),
body[data-page="system"] .route-intro,
body[data-page="system"] .route-board-meta,
body[data-page="system"] .system-method p:not(.section-label),
body[data-page="system"] .system-governance p:not(.section-label) {
  margin-block: 0;
  color: var(--cvl-ink-dim);
  font-size: var(--cvl-fs-fluid-05);
  line-height: var(--cvl-leading-body);
}

body[data-page="system"] .hero-supporting {
  margin-block-start: var(--cvl-space-5);
  color: var(--cvl-ink);
  font-size: var(--cvl-fs-fluid-08);
}

body[data-page="system"] .launch-identity-stamp {
  margin-block-start: var(--cvl-space-5);
  color: var(--cvl-muted);
  font-size: var(--cvl-fs-0p8125rem);
}

body[data-page="system"] .system-hero-summary {
  padding-inline-start: var(--cvl-space-6);
  border-inline-start: calc(var(--cvl-master-rule) * 2) solid var(--cvl-lime);
}

body[data-page="system"] .system-hero-summary h2 {
  margin-block-end: var(--cvl-space-5);
}

body[data-page="system"] .system-practice {
  padding-block: var(--cvl-space-8);
  background-color: var(--cvl-bg);
  background-image:
    linear-gradient(var(--cvl-ink-wash-03) var(--cvl-master-rule), transparent var(--cvl-master-rule)),
    linear-gradient(to right, var(--cvl-ink-wash-03) var(--cvl-master-rule), transparent var(--cvl-master-rule));
  background-size: var(--cvl-master-grid) var(--cvl-master-grid);
}

body[data-page="system"] .route-board {
  min-width: 0;
  overflow: hidden;
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  border-radius: var(--cvl-radius);
  background: var(--cvl-bg);
}

body[data-page="system"] .route-board-heading {
  display: grid;
  grid-template-columns: minmax(0, var(--cvl-track)) auto;
  column-gap: var(--cvl-space-8);
  align-items: end;
  padding: var(--cvl-space-6);
  border-block-end: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-panel-deep);
}

body[data-page="system"] .route-board-heading .section-label {
  grid-column: 1;
}

body[data-page="system"] .route-intro {
  grid-column: 1;
  max-width: var(--cvl-content-measure);
  color: var(--cvl-ink);
  font-size: var(--cvl-fs-fluid-08);
  font-weight: 500;
}

body[data-page="system"] .route-board-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: none;
  color: var(--cvl-muted);
  font-size: var(--cvl-fs-0p75rem);
  letter-spacing: var(--cvl-tracking-label);
  text-align: end;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="system"] .route-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, var(--cvl-track)));
  gap: var(--cvl-master-rule);
  min-width: 0;
  background: var(--cvl-border-control);
}

body[data-page="system"] .route-step {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--cvl-space-3);
  min-width: 0;
  min-height: calc(var(--cvl-space-10) + var(--cvl-space-2));
  padding: var(--cvl-space-5);
  border: 0;
  border-radius: var(--cvl-radius);
  background: var(--cvl-bg);
  color: var(--cvl-ink-dim);
  cursor: pointer;
  text-align: start;
  box-shadow: inset 0 calc(var(--cvl-master-rule) * 2) 0 transparent;
  transition: background-color var(--cvl-motion-fast) linear, box-shadow var(--cvl-motion-fast) linear, color var(--cvl-motion-fast) linear;
}

body[data-page="system"] .route-step:hover,
body[data-page="system"] .route-step:focus-visible {
  background: var(--cvl-ink-wash-03);
  box-shadow: inset 0 calc(var(--cvl-master-rule) * 2) 0 var(--cvl-lime);
}

body[data-page="system"] .route-step.is-active {
  background: var(--cvl-panel-tint);
  box-shadow: inset 0 calc(var(--cvl-master-rule) * 2) 0 var(--cvl-lime);
  color: var(--cvl-ink);
}

body[data-page="system"] .route-number {
  color: var(--cvl-muted);
  font-size: var(--cvl-fs-0p75rem);
  letter-spacing: var(--cvl-tracking-label);
}

body[data-page="system"] .route-step.is-active .route-number,
body[data-page="system"] .route-step:hover .route-number,
body[data-page="system"] .route-step:focus-visible .route-number {
  color: var(--cvl-lime);
}

body[data-page="system"] .route-copy {
  min-width: 0;
}

body[data-page="system"] .route-name {
  display: block;
  min-width: 0;
  color: var(--cvl-ink);
  font-size: var(--cvl-fs-0p875rem);
  font-weight: 600;
  letter-spacing: var(--cvl-tracking-nav);
  line-height: var(--cvl-leading-tight);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body[data-page="system"] .route-gloss {
  position: absolute;
  width: var(--cvl-master-rule);
  height: var(--cvl-master-rule);
  margin: calc(var(--cvl-master-rule) * -1);
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-page="system"] .route-readout {
  display: grid;
  grid-template-columns: minmax(var(--cvl-space-10), 0.15fr) minmax(0, var(--cvl-track));
  align-items: center;
  gap: var(--cvl-space-6);
  min-width: 0;
  max-width: none;
  min-height: calc(var(--cvl-space-10) + var(--cvl-space-8));
  margin: 0;
  padding: var(--cvl-space-6);
  border-block-start: var(--cvl-master-rule) solid var(--cvl-border-control);
  border-block-end: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-panel);
  color: var(--cvl-ink);
}

body[data-page="system"] .route-readout-index {
  color: var(--cvl-lime);
  font-size: var(--cvl-fs-fluid-23);
  line-height: var(--cvl-leading-tight);
  letter-spacing: var(--cvl-tracking-label);
}

body[data-page="system"] .route-readout-copy {
  display: grid;
  gap: var(--cvl-space-2);
}

body[data-page="system"] .route-readout-name {
  color: var(--cvl-ink);
  font-size: var(--cvl-fs-fluid-19);
  font-weight: 600;
  line-height: var(--cvl-leading-tight);
}

body[data-page="system"] .route-readout-gloss {
  min-width: 0;
  color: var(--cvl-ink-dim);
  font-size: var(--cvl-fs-fluid-05);
  line-height: var(--cvl-leading-body);
  overflow-wrap: anywhere;
}

body[data-page="system"] .system-method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--cvl-track)));
  gap: var(--cvl-master-rule);
  min-width: 0;
  background: var(--cvl-border-control);
}

body[data-page="system"] .method-cadence,
body[data-page="system"] .method-check {
  padding: var(--cvl-space-6);
  background: var(--cvl-bg);
}

body[data-page="system"] .system-method h3 {
  max-width: var(--cvl-master-copy-col);
  font-size: var(--cvl-fs-fluid-19);
  letter-spacing: calc(var(--cvl-tracking-nav) * -0.25);
}

body[data-page="system"] .system-method p:not(.section-label),
body[data-page="system"] .system-governance p:not(.section-label, .governance-capability) {
  margin-block: var(--cvl-space-5) 0;
}

body[data-page="system"] .method-kicker,
body[data-page="system"] .governance-capability,
body[data-page="system"] .governance-close {
  color: var(--cvl-lime-light) !important;
}

body[data-page="system"] .system-governance {
  padding-block: var(--cvl-space-8);
  background: var(--cvl-bg);
}

body[data-page="system"] .governance-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--cvl-master-rule);
  min-width: 0;
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-border-control);
}

body[data-page="system"] .governance-heading,
body[data-page="system"] .governance-copy {
  padding: var(--cvl-space-6);
  background: var(--cvl-bg);
}

body[data-page="system"] .governance-capability {
  margin-block: 0 var(--cvl-space-4) !important;
  color: var(--cvl-lime-light);
  font-size: var(--cvl-fs-0p8125rem) !important;
  letter-spacing: var(--cvl-tracking-nav);
  text-transform: uppercase;
}

body[data-page="system"] .governance-action {
  display: inline-flex;
  min-height: var(--cvl-master-control-h);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--cvl-space-6);
  padding: var(--cvl-space-3) var(--cvl-space-5);
  border: var(--cvl-master-rule) solid var(--cvl-lime);
  border-radius: var(--cvl-radius);
  background: var(--cvl-lime);
  color: var(--cvl-bg);
  font-size: var(--cvl-fs-0p8125rem);
  font-weight: 600;
  letter-spacing: var(--cvl-tracking-nav);
  text-transform: uppercase;
  transition: background-color var(--cvl-motion-fast) linear, border-color var(--cvl-motion-fast) linear, color var(--cvl-motion-fast) linear;
}

body[data-page="system"] .governance-action:hover,
body[data-page="system"] .governance-action:focus-visible {
  border-color: var(--cvl-lime-light);
  background: var(--cvl-lime-light);
}

body[data-page="system"] .launch-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cvl-space-4);
  width: var(--cvl-full);
  max-width: var(--cvl-max);
  min-height: var(--cvl-launch-legal-h);
  margin-inline: auto;
  padding: var(--cvl-space-6) var(--cvl-gutter);
  border-block-start: var(--cvl-master-rule) solid var(--cvl-border);
  color: var(--cvl-muted);
  font-size: var(--cvl-fs-0p75rem);
}

body[data-page="system"] .launch-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cvl-space-5);
  align-items: center;
}

body[data-page="system"] .launch-legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cvl-master-control-h);
  min-height: var(--cvl-master-control-h);
  padding-block: var(--cvl-space-3);
}

body[data-page="system"] .launch-legal a:hover,
body[data-page="system"] .launch-legal a:focus-visible {
  color: var(--cvl-lime);
}

body[data-page="system"] :is(.nav-brand, .nav-toggle, .nav-links a, .route-step, .governance-action, .launch-legal a):focus-visible {
  outline: calc(var(--cvl-master-rule) * 2) solid var(--cvl-lime);
  outline-offset: var(--cvl-space-2);
}

@media (max-width: 48rem) {
  body[data-page="system"] .system-hero-inner,
  body[data-page="system"] .governance-grid {
    grid-template-columns: minmax(0, var(--cvl-track));
  }

  body[data-page="system"] .system-hero-inner {
    gap: var(--cvl-space-7);
    padding-block: var(--cvl-space-7);
  }

  body[data-page="system"] .system-hero-summary {
    padding-block-start: var(--cvl-space-6);
    padding-inline-start: 0;
    border-block-start: calc(var(--cvl-master-rule) * 2) solid var(--cvl-lime);
    border-inline-start: 0;
  }

  body[data-page="system"] .system-practice,
  body[data-page="system"] .system-governance {
    padding-block: var(--cvl-space-6);
  }

  body[data-page="system"] .route-board-heading {
    grid-template-columns: minmax(0, var(--cvl-track));
    row-gap: var(--cvl-space-4);
    padding: var(--cvl-space-5);
  }

  body[data-page="system"] .route-board-meta {
    grid-column: 1;
    grid-row: auto;
    text-align: start;
    white-space: normal;
  }

  body[data-page="system"] .route-step {
    min-height: calc(var(--cvl-master-control-h) + var(--cvl-space-5));
    padding: var(--cvl-space-3) var(--cvl-space-2);
  }

  body[data-page="system"] .route-name {
    font-size: var(--cvl-fs-0p68rem);
    letter-spacing: 0;
    /* 353-374 px: inner width < the word; `anywhere` split REVIEW as REVIE/W. Let it use the padding. */
    white-space: nowrap;
    overflow-wrap: normal;
  }

  body[data-page="system"] .route-readout {
    grid-template-columns: var(--cvl-space-9) minmax(0, var(--cvl-track));
    gap: var(--cvl-space-4);
    padding: var(--cvl-space-5);
  }

  body[data-page="system"] .route-readout-index {
    font-size: var(--cvl-fs-fluid-19);
  }

  body[data-page="system"] .system-method {
    grid-template-columns: minmax(0, var(--cvl-track));
  }

  body[data-page="system"] .method-cadence,
  body[data-page="system"] .method-check,
  body[data-page="system"] .governance-heading,
  body[data-page="system"] .governance-copy {
    padding: var(--cvl-space-5);
  }
}

@media (max-width: 22rem) {
  body[data-page="system"] .route-step {
    justify-items: center;
  }

  body[data-page="system"] .route-name {
    display: none;
  }

  body[data-page="system"] .route-readout {
    grid-template-columns: var(--cvl-space-8) minmax(0, var(--cvl-track));
    gap: var(--cvl-space-3);
    padding-inline: var(--cvl-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="system"] *,
  body[data-page="system"] *::before,
  body[data-page="system"] *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  body[data-page="system"] .nav,
  body[data-page="system"] .nav-toggle,
  body[data-page="system"] .nav-links a,
  body[data-page="system"] .route-board,
  body[data-page="system"] .route-step,
  body[data-page="system"] .route-readout,
  body[data-page="system"] .system-method,
  body[data-page="system"] .governance-grid,
  body[data-page="system"] .governance-action {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  body[data-page="system"] .nav-links a.is-active {
    background: Canvas;
    color: CanvasText;
  }

  body[data-page="system"] .nav-links a.is-active::after {
    background: Highlight;
  }

  body[data-page="system"] .route-step.is-active,
  body[data-page="system"] .governance-action {
    background: Highlight;
    color: HighlightText;
  }

  /* Chromium paints a Canvas-coloured backplate behind text in forced-colors
     mode, and HighlightText is identical to Canvas in both synthetic HC
     palettes, so a HighlightText label on this button renders invisible in
     every state. Colour the label CanvasText (which contrasts with the
     backplate) and hold the Highlight field across hover/focus-visible, whose
     normal-mode rule would otherwise drop the background to Canvas. */
  body[data-page="system"] .governance-action,
  body[data-page="system"] .governance-action:hover,
  body[data-page="system"] .governance-action:focus-visible {
    border-color: CanvasText;
    background: Highlight;
    color: CanvasText;
  }

  body[data-page="system"] :is(.nav-brand, .nav-toggle, .nav-links a, .route-step, .governance-action, .launch-legal a):focus-visible {
    outline-color: Highlight;
  }
}