:root,
[data-theme="light"] {
  color-scheme: light;

  --color-bg-canvas: oklch(0.985 0.006 235);
  --color-bg-surface: oklch(0.970 0.008 235);
  --color-bg-panel: oklch(0.945 0.010 235);
  --color-bg-subtle: oklch(0.925 0.012 235);
  --color-bg-accent: oklch(0.940 0.030 224);

  --color-text-primary: oklch(0.235 0.020 235);
  --color-text-secondary: oklch(0.420 0.018 235);
  --color-text-muted: oklch(0.560 0.014 235);
  --color-text-inverse: oklch(0.980 0.006 235);
  --color-text-link: oklch(0.430 0.115 235);

  --color-border-subtle: oklch(0.865 0.012 235);
  --color-border-strong: oklch(0.735 0.018 235);
  --color-border-focus: oklch(0.560 0.150 235);

  --color-brand-primary: oklch(0.520 0.150 235);
  --color-brand-primary-hover: oklch(0.465 0.155 235);
  --color-brand-primary-active: oklch(0.410 0.145 235);
  --color-brand-primary-soft: oklch(0.925 0.045 235);
  --color-brand-secondary: oklch(0.500 0.085 165);
  --color-brand-secondary-soft: oklch(0.925 0.035 165);

  --color-state-info: oklch(0.560 0.125 235);
  --color-state-info-bg: oklch(0.940 0.035 235);
  --color-state-success: oklch(0.510 0.105 155);
  --color-state-success-bg: oklch(0.935 0.040 155);
  --color-state-warning: oklch(0.680 0.115 78);
  --color-state-warning-bg: oklch(0.955 0.050 78);
  --color-state-danger: oklch(0.560 0.150 28);
  --color-state-danger-bg: oklch(0.940 0.045 28);

  --shadow-focus-ring: 0 0 0 3px oklch(0.560 0.150 235 / 0.28);
  --shadow-xs: 0 1px 2px oklch(0.300 0.020 235 / 0.08);
  --shadow-sm: 0 6px 18px oklch(0.300 0.020 235 / 0.10);
  --shadow-md: 0 14px 36px oklch(0.300 0.020 235 / 0.14);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: oklch(0.180 0.018 235);
  --color-bg-surface: oklch(0.220 0.020 235);
  --color-bg-panel: oklch(0.270 0.022 235);
  --color-bg-subtle: oklch(0.320 0.024 235);
  --color-bg-accent: oklch(0.300 0.045 224);

  --color-text-primary: oklch(0.930 0.010 235);
  --color-text-secondary: oklch(0.780 0.014 235);
  --color-text-muted: oklch(0.660 0.014 235);
  --color-text-inverse: oklch(0.190 0.018 235);
  --color-text-link: oklch(0.760 0.115 235);

  --color-border-subtle: oklch(0.390 0.024 235);
  --color-border-strong: oklch(0.500 0.028 235);
  --color-border-focus: oklch(0.720 0.135 235);

  --color-brand-primary: oklch(0.700 0.135 235);
  --color-brand-primary-hover: oklch(0.760 0.130 235);
  --color-brand-primary-active: oklch(0.640 0.140 235);
  --color-brand-primary-soft: oklch(0.310 0.060 235);
  --color-brand-secondary: oklch(0.690 0.090 165);
  --color-brand-secondary-soft: oklch(0.300 0.050 165);

  --color-state-info: oklch(0.760 0.115 235);
  --color-state-info-bg: oklch(0.300 0.050 235);
  --color-state-success: oklch(0.720 0.105 155);
  --color-state-success-bg: oklch(0.300 0.045 155);
  --color-state-warning: oklch(0.780 0.105 78);
  --color-state-warning-bg: oklch(0.330 0.055 78);
  --color-state-danger: oklch(0.730 0.135 28);
  --color-state-danger-bg: oklch(0.320 0.055 28);

  --shadow-focus-ring: 0 0 0 3px oklch(0.720 0.135 235 / 0.34);
  --shadow-xs: 0 1px 2px oklch(0.050 0.010 235 / 0.28);
  --shadow-sm: 0 8px 22px oklch(0.050 0.010 235 / 0.34);
  --shadow-md: 0 18px 42px oklch(0.050 0.010 235 / 0.42);
}

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Arial", sans-serif;
  --font-mono: "Segoe UI Mono", "Roboto Mono", Consolas, monospace;

  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 2.875rem;

  --line-height-tight: 1.15;
  --line-height-heading: 1.22;
  --line-height-body: 1.55;
  --line-height-ui: 1.35;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --measure-text: 68ch;
  --measure-narrow: 52ch;
  --measure-wide: 84ch;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --container-page: 72rem;
  --container-wide: 86rem;
  --container-admin: 90rem;
  --gutter-page: clamp(1rem, 3vw, 2rem);
  --section-y-sm: clamp(2rem, 6vw, 4rem);
  --section-y-md: clamp(3rem, 8vw, 6rem);
  --section-y-lg: clamp(4rem, 10vw, 7.5rem);

  --grid-gap-sm: var(--space-4);
  --grid-gap-md: var(--space-6);
  --grid-gap-lg: var(--space-8);

  --radius-0: 0;
  --radius-1: 0.25rem;
  --radius-2: 0.375rem;
  --radius-3: 0.5rem;
  --radius-pill: 999px;

  --border-width-1: 1px;
  --border-width-2: 2px;

  --outline-focus-width: 2px;
  --outline-focus-offset: 2px;

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --state-hover-bg: var(--color-bg-subtle);
  --state-active-bg: var(--color-brand-primary-soft);
  --state-selected-bg: var(--color-brand-primary-soft);
  --state-disabled-opacity: 0.52;
  --state-loading-opacity: 0.68;
  --state-draft-bg: var(--color-bg-panel);
  --state-published-bg: var(--color-state-success-bg);
  --state-archived-bg: var(--color-bg-subtle);
  --state-pending-bg: var(--color-state-warning-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg-canvas: oklch(0.180 0.018 235);
    --color-bg-surface: oklch(0.220 0.020 235);
    --color-bg-panel: oklch(0.270 0.022 235);
    --color-bg-subtle: oklch(0.320 0.024 235);
    --color-bg-accent: oklch(0.300 0.045 224);
    --color-text-primary: oklch(0.930 0.010 235);
    --color-text-secondary: oklch(0.780 0.014 235);
    --color-text-muted: oklch(0.660 0.014 235);
    --color-text-inverse: oklch(0.190 0.018 235);
    --color-text-link: oklch(0.760 0.115 235);
    --color-border-subtle: oklch(0.390 0.024 235);
    --color-border-strong: oklch(0.500 0.028 235);
    --color-border-focus: oklch(0.720 0.135 235);
    --color-brand-primary: oklch(0.700 0.135 235);
    --color-brand-primary-hover: oklch(0.760 0.130 235);
    --color-brand-primary-active: oklch(0.640 0.140 235);
    --color-brand-primary-soft: oklch(0.310 0.060 235);
    --color-brand-secondary: oklch(0.690 0.090 165);
    --color-brand-secondary-soft: oklch(0.300 0.050 165);
    --color-state-info: oklch(0.760 0.115 235);
    --color-state-info-bg: oklch(0.300 0.050 235);
    --color-state-success: oklch(0.720 0.105 155);
    --color-state-success-bg: oklch(0.300 0.045 155);
    --color-state-warning: oklch(0.780 0.105 78);
    --color-state-warning-bg: oklch(0.330 0.055 78);
    --color-state-danger: oklch(0.730 0.135 28);
    --color-state-danger-bg: oklch(0.320 0.055 28);
    --shadow-focus-ring: 0 0 0 3px oklch(0.720 0.135 235 / 0.34);
    --shadow-xs: 0 1px 2px oklch(0.050 0.010 235 / 0.28);
    --shadow-sm: 0 8px 22px oklch(0.050 0.010 235 / 0.34);
    --shadow-md: 0 18px 42px oklch(0.050 0.010 235 / 0.42);
  }
}

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: var(--space-0);
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  letter-spacing: 0;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: var(--color-text-link);
  text-decoration-thickness: var(--border-width-1);
  text-underline-offset: var(--space-1);
}

a:hover {
  color: var(--color-brand-primary-hover);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: var(--outline-focus-width) solid var(--color-border-focus);
  outline-offset: var(--outline-focus-offset);
  box-shadow: var(--shadow-focus-ring);
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(100% - (var(--gutter-page) * 2), var(--container-page));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  border-block-end: var(--border-width-1) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-xs);
}

.site-header__inner {
  width: min(100% - (var(--gutter-page) * 2), var(--container-wide));
  min-height: 4.5rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-primary);
  text-decoration: none;
}

.brand__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.brand__caption {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

.menu-toggle,
.theme-toggle,
.button {
  min-height: 2.75rem;
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.menu-toggle,
.theme-toggle {
  padding: var(--space-2) var(--space-3);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  text-align: center;
}

.button--primary,
.button--external {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.button--secondary {
  border-color: var(--color-brand-secondary);
  background: var(--color-brand-secondary-soft);
  color: var(--color-text-primary);
}

.button--quiet {
  background: var(--color-bg-surface);
  color: var(--color-text-link);
}

.button--disabled,
.button[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
}

.menu-toggle:hover,
.theme-toggle:hover,
.button:hover {
  background: var(--state-hover-bg);
  color: var(--color-text-primary);
}

.button--primary:hover,
.button--external:hover {
  background: var(--color-brand-primary-hover);
  color: var(--color-text-inverse);
}

.button:active,
.menu-toggle:active,
.theme-toggle:active {
  background: var(--state-active-bg);
}

.site-nav {
  display: none;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-block-start: var(--border-width-1) solid var(--color-border-subtle);
}

.site-nav.is-open {
  display: flex;
}

.site-nav a,
.footer-nav a {
  border-radius: var(--radius-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.site-nav a {
  padding: var(--space-2) var(--space-3);
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.footer-nav a:hover,
.footer-nav a[aria-current="page"] {
  background: var(--state-selected-bg);
  color: var(--color-text-primary);
}

.site-actions {
  display: none;
  grid-column: 1 / -1;
  gap: var(--space-3);
  align-items: stretch;
}

.site-actions.is-open {
  display: grid;
}

.external-helper {
  width: min(100% - (var(--gutter-page) * 2), var(--container-wide));
  margin: var(--space-0) auto;
  padding-block: 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}

.route-view {
  min-height: 58vh;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.route-view.is-transitioning {
  opacity: var(--state-loading-opacity);
  transform: translateY(var(--space-2));
}

.breadcrumbs {
  margin-block-end: var(--space-4);
}

.breadcrumbs__list {
  margin: var(--space-0);
  padding: var(--space-0);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

.breadcrumbs__item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--color-text-muted);
}

.breadcrumbs a {
  color: var(--color-text-link);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

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

.hero {
  padding-block: var(--space-4);
  background: var(--color-bg-canvas);
}

.hero__inner {
  width: min(100% - (var(--gutter-page) * 2), var(--container-wide));
  margin-inline: auto;
  display: grid;
  gap: var(--grid-gap-lg);
}

h1,
h2,
h3 {
  margin-block: var(--space-0);
  line-height: var(--line-height-heading);
  letter-spacing: 0;
}

h1 {
  max-width: var(--measure-narrow);
  font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-4xl));
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-lg);
}

.lead {
  max-width: var(--measure-text);
  margin-block: var(--space-4) var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.hero-actions,
.cta-row {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.hero-panel,
.info-panel,
.empty-state,
.status-note,
.fact-list,
.document-list,
.faq-list,
.route-not-found {
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
}

.hero-panel {
  padding: var(--space-5);
}

.hero-panel__title,
.panel-title {
  margin-block: var(--space-0) var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
}

.hero-panel ul,
.check-list,
.plain-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.hero-panel li,
.check-list li,
.plain-list li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-text-secondary);
}

.hero-panel li::before,
.check-list li::before,
.plain-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.72em;
  inset-inline-start: var(--space-1);
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-secondary);
}

.section {
  padding-block: var(--section-y-sm);
}

.section--compact {
  padding-block: var(--space-6);
}

.section--surface {
  background: var(--color-bg-surface);
}

.section__header {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure-text);
  margin-block-end: var(--space-8);
}

.section__header p {
  margin: var(--space-0);
  color: var(--color-text-secondary);
}

.grid {
  display: grid;
  gap: var(--grid-gap-md);
}

.grid--two,
.grid--three {
  grid-template-columns: 1fr;
}

.info-panel,
.empty-state,
.status-note,
.route-not-found,
.visual-slot,
.placeholder-card,
.status-item,
.notice,
.official-section {
  padding: var(--space-5);
}

.info-panel p,
.empty-state p,
.status-note p,
.route-not-found p,
.visual-slot p,
.placeholder-card p,
.notice p,
.official-section p {
  margin-block: var(--space-2) var(--space-0);
  color: var(--color-text-secondary);
}

.status-strip,
.route-state,
.placeholder-grid,
.document-placeholders,
.debt-board,
.official-stack,
.fact-summary,
.process-list,
.readiness-list,
.summary-grid {
  display: grid;
  gap: var(--space-3);
}

.status-strip {
  grid-template-columns: 1fr;
}

.route-state {
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

.route-state span:first-child {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.status-item {
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
}

.notice,
.official-section {
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
}

.notice {
  margin-block-start: var(--space-6);
}

.official-stack {
  grid-template-columns: 1fr;
}

.official-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
}

.official-section h2 {
  font-size: var(--font-size-xl);
}

.status-item span,
.status-item strong {
  display: block;
  line-height: var(--line-height-ui);
}

.status-item span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.status-item strong {
  margin-block-start: var(--space-1);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.status-item--ok {
  background: var(--color-brand-secondary-soft);
}

.status-item--info {
  background: var(--color-state-info-bg);
}

.status-item--pending {
  background: var(--state-pending-bg);
}

.fact-summary {
  grid-template-columns: 1fr;
}

.fact-summary-card,
.process-item,
.readiness-row,
.official-toc {
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
}

.fact-summary-card {
  padding: var(--space-5);
}

.fact-summary-card dl {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-0) var(--space-0);
}

.fact-summary-card dl > div {
  display: grid;
  gap: var(--space-1);
}

.fact-summary-card dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
}

.fact-summary-card dd {
  margin: var(--space-0);
  color: var(--color-text-primary);
  line-height: var(--line-height-ui);
}

.process-list {
  counter-reset: process;
}

.process-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
}

.process-item__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary-soft);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-ui);
}

.readiness-row {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
}

.readiness-row h3,
.readiness-row p,
.process-item h3,
.process-item p {
  margin-block: var(--space-0);
}

.readiness-row p,
.process-item p {
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
}

.official-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
  padding: var(--space-3);
}

.official-toc a {
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.official-toc a:hover,
.official-toc a:focus-visible {
  background: var(--state-hover-bg);
  color: var(--color-text-primary);
}

.summary-grid {
  grid-template-columns: 1fr;
  margin-block-end: var(--space-6);
}

.visual-slot {
  min-height: 12rem;
  display: grid;
  align-content: end;
  gap: var(--space-5);
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-accent);
}

.visual-slot__mark {
  position: relative;
  display: block;
  width: min(100%, 8rem);
  aspect-ratio: 4 / 3;
  border: var(--border-width-2) dashed var(--color-border-strong);
  border-radius: var(--radius-3);
  background: var(--color-bg-panel);
}

.visual-slot__mark::before,
.visual-slot__mark::after,
.placeholder-card__icon::before,
.placeholder-card__icon::after {
  content: "";
  position: absolute;
  display: block;
}

.visual-slot__mark::before {
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  width: 28%;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--color-brand-secondary);
}

.visual-slot__mark::after {
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 36%;
  height: 24%;
  border-radius: var(--radius-2);
  background: var(--color-brand-primary-soft);
}

.visual-slot__title {
  margin: var(--space-0);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
}

.placeholder-grid,
.document-placeholders,
.debt-board {
  margin-block-end: var(--space-6);
}

.placeholder-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4);
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-bg-surface);
}

.placeholder-card__icon {
  position: relative;
  width: 2.25rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: var(--radius-2);
  background: var(--color-bg-accent);
}

.placeholder-card__icon::before {
  inset: 0.62rem;
  border: var(--border-width-2) solid var(--color-brand-primary);
  border-radius: var(--radius-1);
}

.placeholder-card__icon::after {
  inset-inline-start: 0.78rem;
  inset-block-start: 0.78rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-secondary);
}

.placeholder-card h3 {
  font-size: var(--font-size-md);
}

.placeholder-card .badge {
  margin-block-start: var(--space-3);
}

.badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--state-pending-bg);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
}

.badge--ok {
  background: var(--state-published-bg);
}

.badge--info {
  background: var(--color-state-info-bg);
}

.fact-list {
  overflow: hidden;
}

.fact-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-block-start: var(--border-width-1) solid var(--color-border-subtle);
}

.fact-row:first-child {
  border-block-start: 0;
}

.fact-row dt {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.fact-row dd {
  margin: var(--space-0);
  color: var(--color-text-primary);
  display: grid;
  gap: var(--space-2);
}

.pending-value {
  color: var(--color-text-muted);
}

.document-list {
  display: grid;
  gap: var(--space-0);
  overflow: hidden;
}

.document-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-block-start: var(--border-width-1) solid var(--color-border-subtle);
}

.document-item:first-child {
  border-block-start: 0;
}

.faq-list {
  display: grid;
  gap: var(--space-0);
  overflow: hidden;
}

.faq-item {
  border-block-start: var(--border-width-1) solid var(--color-border-subtle);
}

.faq-item:first-child {
  border-block-start: 0;
}

.faq-item summary {
  cursor: pointer;
  padding: var(--space-4);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.faq-item summary:hover {
  background: var(--state-hover-bg);
}

.faq-item p {
  margin: var(--space-0);
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text-secondary);
}

.loading-state {
  margin: var(--space-0);
  padding-block: var(--section-y-md);
  color: var(--color-text-secondary);
}

.site-footer {
  border-block-start: var(--border-width-1) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.site-footer__brand {
  margin: var(--space-0) var(--space-0) var(--space-2);
  font-weight: var(--font-weight-bold);
}

.site-footer__text {
  max-width: var(--measure-text);
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.footer-nav {
  display: grid;
  gap: var(--space-2);
}

.footer-nav a {
  width: fit-content;
  padding: var(--space-1) var(--space-2);
}

@media (min-width: 480px) {
  .hero-actions,
  .cta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-strip,
  .route-state,
  .placeholder-grid,
  .document-placeholders,
  .debt-board,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .site-header__inner {
    grid-template-columns: auto 1fr;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    grid-column: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-block: var(--space-0);
    border-block-start: 0;
  }

  .site-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: end;
  }

  .external-helper {
    text-align: end;
  }

  .grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-strip,
  .route-state {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fact-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readiness-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .fact-row {
    grid-template-columns: minmax(12rem, 0.35fr) 1fr;
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .hero {
    padding-block: var(--space-12);
  }

  .visual-slot {
    min-height: 18rem;
  }

  .visual-slot__mark {
    width: min(100%, 18rem);
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .site-actions {
    grid-column: auto;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: center;
  }

  .grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .placeholder-grid,
  .document-placeholders,
  .debt-board,
  .process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .hero-actions,
  .cta-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 1ms;
  }

  .route-view {
    transform: none;
  }
}