/* Eddy site: layout, components and motion. Every colour, size, radius and duration comes from tokens.css.

   Layout follows Vortex's shell (playvortex.io/css/site.css, read 2026-10-10): a sticky 82px top bar, a 200px
   navigation rail that collapses to 40px with a 300ms width transition, and a bordered content panel with 12px
   corners. Below 800px the rail becomes a floating tab bar and the panel dissolves into the page, as on Vortex.
   Motion follows Vortex's motion.css: 150ms state changes, a 500ms staggered section reveal, popups that scale
   from 0.98, and nothing at all under prefers-reduced-motion (tokens.css zeroes every duration). No view
   transitions: Chrome sends all input to <html> while one runs, which would make controls ignore clicks. */

/* --- Base ----------------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchors, the skip link and keyboard focus stop clear of the sticky top bar. */
  scroll-padding-top: calc(var(--topbar-height) + var(--space-16));
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-shell);
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3 {
  color: var(--color-text);
  line-height: var(--leading-tight);
}

a {
  color: var(--color-link);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px var(--space-4);
  border-radius: var(--radius-mark);
  background: var(--color-control);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

ul[role='list'] {
  list-style: none;
  padding: 0;
}

[hidden] {
  display: none !important;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
}

.icon-sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Vortex: 2px ring, 2px offset, focus purple. The ring follows each element's own radius. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.page:focus {
  outline: none;
}

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

/* Vortex .site-skip: fixed, purple, radius 8; slides in on keyboard focus. */
.skip-link {
  position: fixed;
  z-index: 200;
  top: var(--space-8);
  left: var(--space-32);
  padding: var(--space-12);
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - var(--space-16)));
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* --- Top bar (Vortex .site-topbar: sticky, 82px, padding 24 32 16, shell colour) ----------------- */

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: var(--topbar-height);
  padding: var(--space-24) var(--site-gutter) var(--space-16);
  background: var(--color-shell);
}

.topbar-start,
.topbar-end {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.topbar-end {
  gap: var(--space-12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  min-height: var(--control-height);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  color: var(--color-text);
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  color: var(--color-primary-mark);
}

.brand-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

/* Vortex .site-icon-button: 40×40, radius 8, transparent; control colour on hover. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) {
  .icon-btn:hover {
    background: var(--color-control);
  }
}

.icon-btn:active {
  background: var(--color-control-hover);
}

/* Two icons stacked in one cell, cross-fading with a small scale (Vortex .site-nav-toggle-icon). */
.icon-btn > .icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.nav-toggle-collapsed,
.nav-collapsed .nav-toggle-expanded,
.theme-icon-moon,
[data-theme='light'] .theme-icon-sun {
  opacity: 0;
  transform: scale(0.8);
}

.nav-collapsed .nav-toggle-collapsed,
[data-theme='light'] .theme-icon-moon {
  opacity: 1;
  transform: none;
}

/* The toggles need JavaScript: hidden without it, and kept invisible (but laid out) until it has loaded. */
html:not(.js) .nav-toggle,
html:not(.js) .theme-toggle {
  display: none;
}

html.js:not(.js-ready) :is(.nav-toggle, .theme-toggle) {
  visibility: hidden;
}

/* --- Shell: rail + content panel ------------------------------------------------------------------ */

.shell {
  --nav-width: var(--nav-width-expanded);
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  column-gap: var(--space-32);
  padding: 0 var(--site-gutter) var(--space-24);
  transition: grid-template-columns var(--motion-layout) var(--ease-out);
}

.nav-collapsed .shell {
  --nav-width: var(--nav-width-collapsed);
}

.is-resizing .shell {
  transition: none;
}

.rail {
  min-width: 0;
}

/* Sticky under the top bar, scrolling on its own if the window is short. The 4px inset keeps focus rings
   inside the scroll box, which would otherwise clip them. */
.side-nav {
  position: sticky;
  top: var(--topbar-height);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-height: calc(100dvh - var(--topbar-height) - var(--space-24));
  margin: calc(-1 * var(--space-4));
  padding: var(--space-4) var(--space-4) var(--space-32);
  overflow: hidden auto;
  scrollbar-width: none;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Vortex: the tools group sits under a hairline that shrinks to 24px with the rail. */
.nav-group-tools {
  position: relative;
  padding-top: var(--space-24);
}

.nav-group-tools::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-8);
  width: calc(100% - var(--space-16));
  border-top: 1px solid var(--color-border);
  transition: width var(--motion-layout) var(--ease-out);
}

.nav-collapsed .nav-group-tools::before {
  width: var(--space-24);
}

/* Vortex #site-navigation a: 40px, padding 8, gap 12, radius 8, 16/600; control colour on hover. While the rail
   narrows, the label is clipped by .side-nav's overflow (not the link's, so the indicator can travel). */
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: var(--control-height);
  padding: var(--space-8);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) {
  .nav-link:hover {
    background: var(--color-control);
  }
}

.nav-link[aria-current='page'] {
  color: var(--color-on-primary);
}

@media (hover: hover) {
  .nav-link[aria-current='page']:hover {
    background: transparent;
  }
}

.nav-icon {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 2px;
}

/* Labels slide and fade with the rail (Vortex .site-nav-label). Opacity 0 keeps them as the link's
   accessible name; the tooltip shows them while collapsed. */
.nav-label {
  position: relative;
  white-space: nowrap;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-layout) var(--ease-out);
}

.nav-collapsed .nav-label {
  opacity: 0;
  transform: translateX(calc(-1 * var(--space-8)));
}

/* The current page's fill (Vortex .ui-selection-indicator). On arrival from another page it slides over from
   the link that was clicked (assets/js/components/indicator.js); until it lands, the link keeps its normal
   text colour. */
.nav-indicator,
.tab-indicator {
  --indicator-duration: var(--motion-layout);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary);
  pointer-events: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.nav-link.is-arriving,
.tab-link.is-arriving {
  color: var(--color-text);
}

/* One stacking order for the whole rail and tab bar (both are stacking contexts: sticky / fixed): the sliding
   fill always passes *under* every link's icon and label. Without explicit layers, paint order followed the DOM,
   so a fill moving down covered the labels it crossed and a fill moving up did not. */
.nav-indicator,
.tab-indicator {
  z-index: 0;
}

.nav-icon,
.nav-label,
.tab-icon,
.tab-label {
  z-index: 1;
}

/* Set by the inline <head> script when this page was reached from a nav link and the fill is about to slide in:
   the fill stays hidden until indicator.js starts the slide, so a page that paints before its scripts load
   never shows the fill at its destination first and then jumps back. */
.indicator-pending :is(.nav-indicator, .tab-indicator) {
  visibility: hidden;
}

.indicator-pending :is(.nav-link, .tab-link)[aria-current='page'] {
  color: var(--color-text);
}

@media (hover: hover) {
  .nav-link:hover .nav-indicator,
  .tab-link:hover .tab-indicator {
    background: var(--color-primary-hover);
  }
}

/* Content panel (Vortex .site-main: content colour, 1px border, 12px corners). */
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100dvh - var(--topbar-height) - var(--space-24));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-content);
}

.page {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-inline));
  padding: var(--space-32) var(--page-inline) var(--space-48);
  --page-inline: clamp(var(--space-16), 2vw, var(--space-32));
}

/* --- Footer (Vortex footer: hairline, muted links, ghost buttons) --------------------------------- */

.site-footer {
  margin-inline: clamp(var(--space-16), 2vw, var(--space-32));
  padding-block: var(--space-24) var(--space-32);
  border-top: 1px solid var(--color-border);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
}

.footer-note {
  max-width: 60ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.footer-meta {
  margin-top: var(--space-8);
  color: var(--color-faint);
  font-size: var(--text-caption);
}

/* The Ko-fi link: a ghost button, secondary to everything else on the page. */
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-height);
  margin-inline-start: calc(-1 * var(--space-12));
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) {
  .footer-link:hover {
    background: var(--color-control);
    color: var(--color-text);
  }
}

.footer-link .icon:first-child {
  width: 18px;
  height: 18px;
}

/* --- Tooltip portal (Vortex .ui-tooltip-portal; driven by assets/js/components/tooltip.js) --------- */

.tooltip {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  max-width: min(280px, calc(100vw - var(--space-16)));
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-tooltip);
  background: var(--color-control);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: var(--popup-origin, top center);
}

.tooltip[data-motion-state='open'] {
  animation: popup-in var(--motion-fast) var(--ease-menu-in) backwards;
}

.tooltip[data-motion-state='closing'] {
  animation: popup-out var(--motion-menu-exit) var(--ease-menu-out) both;
}

/* --- Mobile: floating tab bar (Vortex .site-mobile-bar; Voltimons' bottom tabs) ------------------- */

.tab-bar {
  display: none;
}

@media (max-width: 800px) {
  :root {
    --tab-bar-padding: var(--space-4);
    --tab-bar-height: calc(var(--tab-item-height) + 2 * var(--tab-bar-padding) + 2px);
    --tab-bar-radius: calc(var(--tab-bar-height) / 2);
  }

  html {
    /* The top bar scrolls away on phones; keep focus and anchors clear of the fixed tab bar instead. */
    scroll-padding-top: var(--space-16);
    scroll-padding-bottom: calc(var(--tab-bar-height) + var(--space-32));
  }

  .topbar {
    position: relative;
    height: auto;
    min-height: 64px;
    padding: var(--space-12) var(--site-gutter);
  }

  .nav-toggle,
  .rail {
    display: none;
  }

  .shell {
    display: block;
    padding: var(--space-16) var(--site-gutter) calc(var(--tab-bar-height) + var(--space-32) + env(safe-area-inset-bottom, 0px));
  }

  /* As on Vortex, the panel dissolves: content sits directly on the page. */
  .panel {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page {
    --page-inline: 0px;
    padding-block: var(--space-8) var(--space-32);
  }

  .site-footer {
    margin-inline: 0;
    padding-bottom: 0;
  }

  .tab-bar {
    position: fixed;
    z-index: 40;
    left: 50%;
    bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--space-2);
    width: min(26rem, calc(100% - 2 * var(--site-gutter)));
    padding: var(--tab-bar-padding);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--tab-bar-radius);
    background: var(--color-surface);
    transform: translateX(-50%);
  }

  /* Nested radius: the bar's radius minus its padding and border, so the curves stay concentric. */
  .tab-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    height: var(--tab-item-height);
    padding: var(--space-4);
    border-radius: calc(var(--tab-bar-radius) - var(--tab-bar-padding) - 1px);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
  }

  @media (hover: hover) {
    .tab-link:hover {
      color: var(--color-text);
    }
  }

  .tab-link[aria-current='page'] {
    color: var(--color-on-primary);
  }

  .tab-icon,
  .tab-label {
    position: relative;
  }

  .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .topbar-end .pill {
    display: none;
  }
}

/* Very narrow phones: keep all five labels whole (Vortex's 11px micro size). */
@media (max-width: 380px) {
  .tab-bar {
    width: calc(100% - var(--space-16));
    gap: 0;
  }

  .tab-link {
    padding-inline: var(--space-2);
    font-size: var(--text-micro);
  }
}

/* --- Page header and sections --------------------------------------------------------------------- */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 72ch;
}

.page-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
}

.lead {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-32);
}

.hero-title {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.hero-title .mark {
  width: 48px;
  height: 48px;
  color: var(--color-primary-mark);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

/* Vortex .profile-section: sections 32–40px apart; .section-header h2 18/600. */
.section {
  margin-top: var(--space-40);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--control-height);
  margin-bottom: var(--space-12);
}

.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.section-meta {
  color: var(--color-faint);
  font-size: var(--text-sm);
}

.prose {
  max-width: 72ch;
}

.prose > * + * {
  margin-top: var(--space-12);
}

.prose ul,
.card ul {
  padding-left: var(--space-20);
}

.prose li + li,
.card li + li {
  margin-top: var(--space-6);
}

.muted {
  color: var(--color-muted);
}

/* --- Cards (Vortex .ui-card: surface, 1px border, radius 16, padding 20, clips its content) -------- */

.card {
  padding: var(--space-20);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.card > * + * {
  margin-top: var(--space-8);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.card-title .icon {
  color: var(--color-link);
}

.card p,
.card li {
  color: var(--color-muted);
  font-size: var(--text-body-sm);
}

.card strong,
.rows strong {
  color: var(--color-text);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-16);
}

/* A whole card as one link: the heading's link stretches over the card. Hover strengthens the border (Vortex
   .ui-card transitions border-color) and nudges the arrow; keyboard focus rings the whole card. */
.card-link {
  position: relative;
}

.card-cover {
  color: inherit;
  text-decoration: none;
}

.card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-cover:focus-visible {
  outline: none;
}

.card-link:has(.card-cover:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.card-link .card-title > .icon:last-child {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--color-muted);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) {
  .card-link:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
  }
}

.card-link:focus-within .card-title > .icon:last-child {
  color: var(--color-link);
  transform: translateX(2px);
}

@media (hover: hover) {
  .card-link:hover .card-title > .icon:last-child {
    color: var(--color-link);
    transform: translateX(2px);
  }
}

/* --- Buttons (Vortex .btn-primary / .btn-secondary: 40px, 14/600, padding 8 16, radius 8) --------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--control-height);
  padding: var(--space-8) var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.btn .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-fast) var(--ease-standard);
}

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

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

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

@media (hover: hover) {
  .btn-primary:hover .icon:last-child {
    transform: translateX(2px);
  }
}

.btn-secondary {
  border-color: var(--color-border-strong);
  background: var(--color-control);
  color: var(--color-text);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--color-control-hover);
  }
}

.btn-secondary:active {
  border-color: var(--color-border-strong);
  background: var(--color-control);
}

/* Disabled (Vortex): half opacity, no pointer interaction. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Pills (Vortex badges: radius 999, 12/600) ---------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 22px;
  padding: var(--space-2) var(--space-8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-control);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}

.pill .icon {
  width: 12px;
  height: 12px;
}

.pill-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}

.pill-success {
  border-color: var(--color-success-border);
  background: var(--color-success-surface);
  color: var(--color-success-text);
}

.pill-info {
  border-color: var(--color-info-border);
  background: var(--color-info-surface);
  color: var(--color-info-text);
}

/* --- Banners (12px, like Vortex widgets) ---------------------------------------------------------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-widget);
  background: var(--color-info-surface);
  color: var(--color-text-subtle);
  font-size: var(--text-body-sm);
}

.banner > .icon {
  margin-top: 2px;
  color: var(--color-info-text);
}

.banner strong {
  color: var(--color-text);
}

.banner-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-surface);
}

.banner-warning > .icon {
  color: var(--color-warning-text);
}

/* --- Rows (Vortex .settings-row: label 15/600, description 13px faint, hairline between) ---------- */

.rows {
  --rows-inline: var(--space-20);
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding-inline: var(--rows-inline);
}

.row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-16);
}

.row + .row {
  border-top: 1px solid var(--color-border);
}

/* A row reached by a link (e.g. from a Home card) is briefly highlighted, then fades back. Under reduced
   motion the highlight simply stays. */
.row:target::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--rows-inline));
  background: var(--color-highlight);
  animation: highlight-fade var(--motion-highlight) var(--ease-standard) var(--motion-reveal) forwards;
}

.row-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.row-label {
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
}

.row-desc {
  color: var(--color-faint);
  font-size: var(--text-caption);
  line-height: 1.4;
}

.row-aside {
  flex: none;
  padding-top: 1px;
}

@media (max-width: 560px) {
  .row {
    flex-direction: column;
    gap: var(--space-8);
  }
}

/* Facts list (a rows group used as <dl>). */
.facts {
  min-width: 260px;
}

.facts .row {
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-12);
}

.facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* --- Definition cards: the values glossary -------------------------------------------------------- */

.term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.estimate {
  font-style: italic;
}

/* --- Tables (rounded wrapper clips the table and scrolls it if ever too wide) --------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-12) var(--space-20);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--color-border);
}

.table tbody th {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.table tbody td {
  color: var(--color-muted);
}

.table tbody tr + tr > * {
  border-top: 1px solid var(--color-border);
}

/* --- Empty state ---------------------------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-40) var(--space-20);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-widget);
  background: var(--color-control);
  color: var(--color-muted);
}

.empty-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.empty p {
  max-width: 52ch;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
}

/* --- Checklist ------------------------------------------------------------------------------------ */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.checklist li {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
}

.checklist .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.checklist .is-done {
  color: var(--color-success-text);
}

.checklist .is-open {
  color: var(--color-warning-text);
}

/* --- Responsive page parts ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .page-title {
    font-size: var(--text-2xl);
  }

  .hero-title {
    font-size: var(--text-4xl);
  }

  .hero-title .mark {
    width: 36px;
    height: 36px;
  }

  .lead {
    font-size: var(--text-md);
  }

  .section {
    margin-top: var(--space-32);
  }

  .card,
  .rows {
    --rows-inline: var(--space-16);
    padding-inline: var(--space-16);
  }

  .table th,
  .table td {
    padding-inline: var(--space-16);
  }
}

/* --- Motion --------------------------------------------------------------------------------------- */

/* Section entrance (Vortex .ui-reveal): fade up 8px, staggered 18ms per section, capped at 180ms. Only
   opacity and translate animate, so nothing reflows. */
.page > * {
  animation: reveal var(--motion-reveal) var(--ease-out) backwards;
  animation-delay: min(var(--motion-stagger-max), var(--reveal-order, 0) * var(--motion-stagger));
}

.page > :nth-child(2) { --reveal-order: 1; }
.page > :nth-child(3) { --reveal-order: 2; }
.page > :nth-child(4) { --reveal-order: 3; }
.page > :nth-child(5) { --reveal-order: 4; }
.page > :nth-child(6) { --reveal-order: 5; }
.page > :nth-child(n + 7) { --reveal-order: 6; }

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 var(--motion-reveal-distance);
  }
}

@keyframes popup-in {
  from {
    opacity: 0;
    scale: var(--motion-popup-scale);
  }
}

@keyframes popup-out {
  to {
    opacity: 0;
    scale: var(--motion-popup-scale);
  }
}

@keyframes highlight-fade {
  to {
    opacity: 0;
  }
}

/* Theme switches and restored preferences apply in one frame (assets/js/lib/motion.js withoutTransitions).
   A click on the theme button keeps that button's own icon cross-fade as feedback; a restore animates nothing. */
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after,
.theme-switching *:not(.theme-toggle > .icon),
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}