/*
 * FashionUnited Developer Docs — stylesheet
 * ============================================
 * Sibling of apps/prompts/static/site.css — same token approach, same
 * --fu-* naming, same theme-block structure. That file is the precedent;
 * this one diverges only where the docs site's shape differs (three-column
 * docs layout with a sticky sidebar + table of contents, instead of a
 * prompt browse/detail grid).
 *
 * Design tokens below are sourced from the root DESIGN.md
 * (FashionUnited Frontend Design System). DESIGN.md is the source of
 * truth — if a value here and DESIGN.md ever disagree, DESIGN.md wins
 * and this file should be updated to match.
 *
 * Rules:
 *   - Every design value lives as a --fu-* custom property in the
 *     :root block (and its theme-override blocks) below.
 *   - Every rule after the token blocks references tokens via var()
 *     only — no bare color literals past this point.
 *   - Rose (#ea0151 / --fu-color-primary) is the only accent color for
 *     links, CTAs, and selected states.
 *   - Deliberately NOT carried over: Starlight-generated selectors
 *     (.sl-markdown-content, .sidebar-pane, --sl-color-*, etc). That
 *     markup does not exist on this Zola-rendered site — only the design
 *     TOKEN VALUES from Starlight's old theme were reusable, and those
 *     are already folded into the --fu-* tokens below.
 *
 * Breakpoints (DESIGN.md "Layout"), used directly in @media queries
 * since custom properties cannot be interpolated into media queries:
 *   xs 0px · xssm 480px · sm 600px · md 840px · lg 1024px · xl 1920px
 * One extra breakpoint is used below (1220px) to decide when there is
 * room for the third (table-of-contents) column — it isn't in the
 * DESIGN.md scale because it's a docs-shell-specific layout decision,
 * not a shared design token. See the DOCS LAYOUT section.
 */

/* ==========================================================================
   TOKENS — light (default) theme
   ========================================================================== */
:root {
  /* --- Brand / primary ------------------------------------------------ */
  --fu-color-primary: #ea0151;
  --fu-color-primary-hover: #d30045;
  --fu-color-primary-pressed: #b40036;
  --fu-color-primary-container: #ffe9ea;
  --fu-color-on-primary: #ffffff;
  --fu-color-on-primary-container: #a2002f;

  /* --- Rose scale ------------------------------------------------------ */
  --fu-color-rose-50: #fff1f2;
  --fu-color-rose-100: #ffe9ea;
  --fu-color-rose-200: #ffd5d9;
  --fu-color-rose-300: #ffb1bc;
  --fu-color-rose-400: #ff7f98;
  --fu-color-rose-500: #ff2468;
  --fu-color-rose-600: #ea0151;
  --fu-color-rose-700: #d30045;
  --fu-color-rose-800: #b40036;
  --fu-color-rose-900: #a2002f;
  --fu-color-rose-950: #5d0918;

  /* Text-accent (link) color: rose-700, not rose-600 — rose-600 falls
     just under WCAG AA for body-sized text on the page surface. */
  --fu-color-link: var(--fu-color-rose-700);
  --fu-color-link-hover: var(--fu-color-rose-800);
  --fu-color-link-visited: var(--fu-color-rose-900);

  /* --- Semantic ---------------------------------------------------------- */
  --fu-color-success: #679937;
  --fu-color-error: #d32f2f;
  --fu-color-warning: #ed6c02;
  --fu-color-info: #376d99;

  /* --- Neutrals ----------------------------------------------------------- */
  --fu-color-black: #000000;
  --fu-color-white: #ffffff;
  --fu-color-white-light: rgba(255, 255, 255, 0.7);
  --fu-color-grey-dark: #58595b;
  --fu-color-grey-light: #dbdbdb;

  /* --- Surfaces ------------------------------------------------------------ */
  --fu-color-surface: #ffffff;
  --fu-color-surface-page: #fafafa;
  --fu-color-surface-subdued: #f5f5f5;
  --fu-color-surface-raised: #ffffff;
  --fu-color-border: #dbdbdb;
  --fu-color-divider: #e0e0e0;

  /* --- Text emphasis (Material overlay scale) ------------------------------ */
  --fu-color-on-surface: rgba(0, 0, 0, 0.87);
  --fu-color-on-surface-medium: rgba(0, 0, 0, 0.6);
  --fu-color-on-surface-inactive: rgba(0, 0, 0, 0.54);
  --fu-color-on-surface-disabled: rgba(0, 0, 0, 0.38);

  /* --- Focus ring ----------------------------------------------------------- */
  --fu-color-focus-ring: var(--fu-color-rose-600);
  --fu-color-focus-ring-on-primary: #ffffff;

  /* --- Shadows (kept as tokens: literal rgba values live only here) -------- */
  --fu-shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.04),
    0 12px 24px rgba(15, 23, 42, 0.06);
  --fu-shadow-card-hover:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 16px rgba(15, 23, 42, 0.06),
    0 20px 36px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(234, 1, 81, 0.1);
  --fu-shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.14);
  --fu-shadow-header: 0 1px 0 rgba(15, 23, 42, 0.06);

  /* --- Typography ----------------------------------------------------------- */
  --fu-font-family-base: "Helvetica Neue", Helvetica, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    Arial, sans-serif;
  --fu-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --fu-text-h1-size: 3rem;
  --fu-text-h1-weight: 700;
  --fu-text-h1-line: 3rem;
  --fu-text-h1-tracking: -0.104rem;

  --fu-text-h2-size: 2.25rem;
  --fu-text-h2-weight: 700;
  --fu-text-h2-line: 2.5rem;
  --fu-text-h2-tracking: -0.097rem;

  --fu-text-h3-size: 1.875rem;
  --fu-text-h3-weight: 700;
  --fu-text-h3-line: 2.25rem;
  --fu-text-h3-tracking: -0.03rem;

  --fu-text-h4-size: 1.5rem;
  --fu-text-h4-weight: 700;
  --fu-text-h4-line: 2rem;
  --fu-text-h4-tracking: -0.042rem;

  --fu-text-h5-size: 1.25rem;
  --fu-text-h5-weight: 700;
  --fu-text-h5-line: 1.75rem;
  --fu-text-h5-tracking: 0rem;

  --fu-text-h6-size: 1.125rem;
  --fu-text-h6-weight: 700;
  --fu-text-h6-line: 1.75rem;
  --fu-text-h6-tracking: 0rem;

  --fu-text-subtitle-1-size: 0.875rem;
  --fu-text-subtitle-1-weight: 700;
  --fu-text-subtitle-1-line: 1.5rem;
  --fu-text-subtitle-1-tracking: 0.011rem;

  --fu-text-subtitle-2-size: 0.75rem;
  --fu-text-subtitle-2-weight: 700;
  --fu-text-subtitle-2-line: 1.25rem;
  --fu-text-subtitle-2-tracking: 0.008rem;

  --fu-text-body-1-size: 1rem;
  --fu-text-body-1-weight: 400;
  --fu-text-body-1-line: 1.5rem;
  --fu-text-body-1-tracking: 0rem;

  --fu-text-body-2-size: 0.9375rem;
  --fu-text-body-2-weight: 400;
  --fu-text-body-2-line: 1.25rem;
  --fu-text-body-2-tracking: 0rem;

  --fu-text-button-size: 0.875rem;
  --fu-text-button-weight: 700;
  --fu-text-button-line: 1.25rem;
  --fu-text-button-tracking: 0rem;

  --fu-text-caption-size: 0.75rem;
  --fu-text-caption-weight: 700;
  --fu-text-caption-line: 1rem;
  --fu-text-caption-tracking: 0.033rem;

  --fu-text-overline-size: 0.625rem;
  --fu-text-overline-weight: 700;
  --fu-text-overline-line: 0.875rem;
  --fu-text-overline-tracking: 0.15rem;

  --fu-text-article-size: 1.125rem;
  --fu-text-article-weight: 400;
  --fu-text-article-line: 1.7;

  /* --- Radius ----------------------------------------------------------------- */
  --fu-radius-sm: 2px;
  --fu-radius-md: 4px;
  --fu-radius-lg: 8px;
  --fu-radius-pill: 999px;

  /* --- Spacing (8px base grid) ------------------------------------------------ */
  --fu-space-xs: 4px;
  --fu-space-sm: 8px;
  --fu-space-md: 16px;
  --fu-space-lg: 24px;
  --fu-space-xl: 32px;
  --fu-space-2xl: 48px;

  /* --- Motion ------------------------------------------------------------------ */
  --fu-transition-fast: 150ms ease;
  --fu-transition-base: 200ms ease;
  --fu-transition-slow: 300ms ease;

  /* --- Layout ------------------------------------------------------------------- */
  --fu-container-max: 1200px;
  --fu-container-wide-max: 1440px;
  --fu-header-height: 64px;
  --fu-sidebar-width: 260px;
  --fu-toc-width: 220px;

  /* --- Z-index scale -------------------------------------------------------------- */
  --fu-z-header: 30;
  --fu-z-search-results: 40;
  --fu-z-sidebar: 20;
}

/* ==========================================================================
   TOKENS — dark theme overrides
   Redefines the same custom-property names for dark surfaces. Applied via
   OS preference by default, and overridden either way by an explicit
   data-theme attribute set by a theme toggle.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --fu-color-link: var(--fu-color-rose-400);
    --fu-color-link-hover: var(--fu-color-rose-300);
    --fu-color-link-visited: var(--fu-color-rose-500);

    --fu-color-surface: #16171b;
    --fu-color-surface-page: #101114;
    --fu-color-surface-subdued: #1b1e24;
    --fu-color-surface-raised: #1b1e24;
    --fu-color-border: #2f333b;
    --fu-color-divider: #26292f;

    --fu-color-on-surface: rgba(255, 255, 255, 0.92);
    --fu-color-on-surface-medium: rgba(255, 255, 255, 0.7);
    --fu-color-on-surface-inactive: rgba(255, 255, 255, 0.6);
    --fu-color-on-surface-disabled: rgba(255, 255, 255, 0.38);

    --fu-color-focus-ring: var(--fu-color-rose-400);

    --fu-shadow-card:
      0 1px 2px rgba(0, 0, 0, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 12px 24px rgba(0, 0, 0, 0.2);
    --fu-shadow-card-hover:
      0 2px 4px rgba(0, 0, 0, 0.2),
      0 8px 16px rgba(0, 0, 0, 0.2),
      0 20px 36px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 127, 152, 0.15);
    --fu-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.4);
    --fu-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --fu-color-link: var(--fu-color-rose-400);
  --fu-color-link-hover: var(--fu-color-rose-300);
  --fu-color-link-visited: var(--fu-color-rose-500);

  --fu-color-surface: #16171b;
  --fu-color-surface-page: #101114;
  --fu-color-surface-subdued: #1b1e24;
  --fu-color-surface-raised: #1b1e24;
  --fu-color-border: #2f333b;
  --fu-color-divider: #26292f;

  --fu-color-on-surface: rgba(255, 255, 255, 0.92);
  --fu-color-on-surface-medium: rgba(255, 255, 255, 0.7);
  --fu-color-on-surface-inactive: rgba(255, 255, 255, 0.6);
  --fu-color-on-surface-disabled: rgba(255, 255, 255, 0.38);

  --fu-color-focus-ring: var(--fu-color-rose-400);

  --fu-shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 12px 24px rgba(0, 0, 0, 0.2);
  --fu-shadow-card-hover:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 20px 36px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 127, 152, 0.15);
  --fu-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.4);
  --fu-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* Explicit light override — wins over prefers-color-scheme:dark whenever a
   theme toggle stamps data-theme="light" on the root, in either direction. */
:root[data-theme="light"] {
  --fu-color-link: var(--fu-color-rose-700);
  --fu-color-link-hover: var(--fu-color-rose-800);
  --fu-color-link-visited: var(--fu-color-rose-900);

  --fu-color-surface: #ffffff;
  --fu-color-surface-page: #fafafa;
  --fu-color-surface-subdued: #f5f5f5;
  --fu-color-surface-raised: #ffffff;
  --fu-color-border: #dbdbdb;
  --fu-color-divider: #e0e0e0;

  --fu-color-on-surface: rgba(0, 0, 0, 0.87);
  --fu-color-on-surface-medium: rgba(0, 0, 0, 0.6);
  --fu-color-on-surface-inactive: rgba(0, 0, 0, 0.54);
  --fu-color-on-surface-disabled: rgba(0, 0, 0, 0.38);

  --fu-color-focus-ring: var(--fu-color-rose-600);

  --fu-shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.04),
    0 12px 24px rgba(15, 23, 42, 0.06);
  --fu-shadow-card-hover:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 16px rgba(15, 23, 42, 0.06),
    0 20px 36px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(234, 1, 81, 0.1);
  --fu-shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.14);
  --fu-shadow-header: 0 1px 0 rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   RESET / BASE
   No color literals below this line — every value is var(--fu-*).
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--fu-font-family-base);
  font-size: var(--fu-text-body-1-size);
  font-weight: var(--fu-text-body-1-weight);
  line-height: var(--fu-text-body-1-line);
  letter-spacing: var(--fu-text-body-1-tracking);
  color: var(--fu-color-on-surface);
  background: var(--fu-color-surface-page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--fu-space-md);
  font-family: var(--fu-font-family-base);
  font-weight: 700;
  color: var(--fu-color-on-surface);
  scroll-margin-top: calc(var(--fu-header-height) + var(--fu-space-md));
}

h1 {
  font-size: var(--fu-text-h1-size);
  font-weight: var(--fu-text-h1-weight);
  line-height: var(--fu-text-h1-line);
  letter-spacing: var(--fu-text-h1-tracking);
}

h2 {
  font-size: var(--fu-text-h2-size);
  font-weight: var(--fu-text-h2-weight);
  line-height: var(--fu-text-h2-line);
  letter-spacing: var(--fu-text-h2-tracking);
}

h3 {
  font-size: var(--fu-text-h3-size);
  font-weight: var(--fu-text-h3-weight);
  line-height: var(--fu-text-h3-line);
  letter-spacing: var(--fu-text-h3-tracking);
}

h4 {
  font-size: var(--fu-text-h4-size);
  font-weight: var(--fu-text-h4-weight);
  line-height: var(--fu-text-h4-line);
  letter-spacing: var(--fu-text-h4-tracking);
}

h5 {
  font-size: var(--fu-text-h5-size);
  font-weight: var(--fu-text-h5-weight);
  line-height: var(--fu-text-h5-line);
  letter-spacing: var(--fu-text-h5-tracking);
}

h6 {
  font-size: var(--fu-text-h6-size);
  font-weight: var(--fu-text-h6-weight);
  line-height: var(--fu-text-h6-line);
  letter-spacing: var(--fu-text-h6-tracking);
}

p {
  margin: 0 0 var(--fu-space-md);
}

ul,
ol {
  margin: 0 0 var(--fu-space-md);
  padding-left: 1.5em;
}

li + li {
  margin-top: 4px;
}

hr {
  margin: var(--fu-space-xl) 0;
  border: none;
  border-top: 1px solid var(--fu-color-divider);
}

blockquote {
  margin: 0 0 var(--fu-space-md);
  padding: var(--fu-space-sm) var(--fu-space-md);
  border-left: 3px solid var(--fu-color-primary);
  background: var(--fu-color-surface-subdued);
  color: var(--fu-color-on-surface-medium);
  border-radius: 0 var(--fu-radius-md) var(--fu-radius-md) 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

a {
  color: var(--fu-color-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fu-color-link) 45%, transparent);
  text-underline-offset: 0.15em;
  transition: color var(--fu-transition-fast);
}

a:hover {
  color: var(--fu-color-link-hover);
  text-decoration-color: currentColor;
}

a:visited {
  color: var(--fu-color-link-visited);
}

/* Uniform, always-visible focus treatment on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fu-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--fu-radius-sm);
}

code,
pre,
kbd {
  font-family: var(--fu-font-family-mono);
}

pre {
  margin: 0 0 var(--fu-space-md);
  padding: var(--fu-space-md);
  background: var(--fu-color-surface-subdued);
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-md);
  overflow-x: auto;
  max-width: 100%;
}

pre code {
  background: none;
  padding: 0;
  font-size: var(--fu-text-body-2-size);
  line-height: var(--fu-text-body-2-line);
  color: var(--fu-color-on-surface);
}

:not(pre) > code {
  background: var(--fu-color-surface-subdued);
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  font-size: 0.85em;
  background: var(--fu-color-surface);
  border: 1px solid var(--fu-color-border);
  border-bottom-width: 2px;
  border-radius: var(--fu-radius-sm);
  color: var(--fu-color-on-surface);
}

/* Visually hide content while keeping it available to assistive tech. */
.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;
}

/* Visible only when the element receives focus — used by the skip link. */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--fu-space-md);
  z-index: 100;
  padding: var(--fu-space-sm) var(--fu-space-md);
  background: var(--fu-color-primary);
  color: var(--fu-color-on-primary);
  border-radius: var(--fu-radius-md);
  text-decoration: none;
  transition: top var(--fu-transition-fast);
}

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

/* ==========================================================================
   LAYOUT — containers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--fu-container-max);
  margin-inline: auto;
  padding-inline: var(--fu-space-md);
}

.container--wide {
  max-width: var(--fu-container-wide-max);
}

@media (min-width: 600px) {
  .container,
  .container--wide {
    padding-inline: var(--fu-space-lg);
  }
}

@media (min-width: 1024px) {
  .container,
  .container--wide {
    padding-inline: var(--fu-space-xl);
  }
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--fu-z-header);
  background: var(--fu-color-surface);
  border-bottom: 1px solid var(--fu-color-border);
  box-shadow: var(--fu-shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--fu-space-md);
  min-height: var(--fu-header-height);
  padding-block: var(--fu-space-sm);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fu-space-sm);
  font-size: var(--fu-text-h6-size);
  font-weight: var(--fu-text-h6-weight);
  line-height: var(--fu-text-h6-line);
  color: var(--fu-color-on-surface);
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__brand:hover {
  color: var(--fu-color-primary);
  text-decoration: none;
}

.site-header__brand:visited {
  color: var(--fu-color-on-surface);
}

.site-header__brand img,
.site-header__brand svg {
  height: 28px;
  width: 28px;
}

/* Mobile sidebar-toggle button. Only shown on docs pages below `lg`, where
   the sidebar collapses off-canvas — see DOCS LAYOUT below. Templates that
   don't render a sidebar (home, posts) should simply omit this button;
   site.js no-ops if #docs-sidebar-toggle isn't present. */
.site-header__sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-md);
  background: var(--fu-color-surface);
  color: var(--fu-color-on-surface);
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__sidebar-toggle:hover {
  border-color: var(--fu-color-primary);
  color: var(--fu-color-primary);
}

.site-header__sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1023px) {
  .site-header__sidebar-toggle {
    display: inline-flex;
  }
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--fu-space-xs);
  flex-wrap: wrap;
  min-width: 0;
  font-size: var(--fu-text-body-2-size);
}

.site-header__nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--fu-space-xs) var(--fu-space-sm);
  border-radius: var(--fu-radius-md);
  color: var(--fu-color-on-surface-medium);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--fu-transition-fast),
    background-color var(--fu-transition-fast);
}

.site-header__nav a:hover {
  color: var(--fu-color-primary);
  background: var(--fu-color-primary-container);
  text-decoration: none;
}

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

@media (max-width: 767px) {
  .site-header__nav {
    display: none;
  }
}

/* ==========================================================================
   SITE SEARCH
   Contract (see static/search.js): #site-search-input inside .site-search,
   #site-search-results as the results dropdown, results rendered as
   a.site-search__result > .site-search__result-title +
   .site-search__result-meta. Matches apps/prompts' search.js contract.
   ========================================================================== */
.site-search {
  position: relative;
  width: 100%;
  max-width: 20rem;
  flex: 1 1 12rem;
  min-width: 0;
  margin-left: auto;
}

.site-search__input {
  width: 100%;
  height: 40px;
  padding: var(--fu-space-sm) var(--fu-space-md);
  font-family: var(--fu-font-family-base);
  font-size: var(--fu-text-body-2-size);
  color: var(--fu-color-on-surface);
  background: var(--fu-color-surface-subdued);
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-md);
  transition:
    border-color var(--fu-transition-fast),
    background-color var(--fu-transition-fast);
}

.site-search__input::placeholder {
  color: var(--fu-color-on-surface-inactive);
}

.site-search__input:hover {
  border-color: var(--fu-color-grey-dark);
}

.site-search__input:focus {
  outline: none;
  background: var(--fu-color-surface);
  border-color: var(--fu-color-primary);
  box-shadow: 0 0 0 3px var(--fu-color-primary-container);
}

.site-search__results {
  position: absolute;
  top: calc(100% + var(--fu-space-xs));
  left: 0;
  right: 0;
  z-index: var(--fu-z-search-results);
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fu-color-surface);
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-md);
  box-shadow: var(--fu-shadow-panel);
  padding: var(--fu-space-xs);
}

.site-search__result {
  display: block;
  padding: var(--fu-space-sm);
  border-radius: var(--fu-radius-sm);
  text-decoration: none;
  color: var(--fu-color-on-surface);
}

.site-search__result + .site-search__result {
  margin-top: 2px;
}

.site-search__result:hover,
.site-search__result:focus-visible {
  background: var(--fu-color-primary-container);
  text-decoration: none;
}

.site-search__result-title {
  display: block;
  font-size: var(--fu-text-subtitle-1-size);
  font-weight: var(--fu-text-subtitle-1-weight);
  line-height: var(--fu-text-subtitle-1-line);
  color: var(--fu-color-on-surface);
  overflow-wrap: anywhere;
}

.site-search__result-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fu-text-caption-size);
  font-weight: 400;
  color: var(--fu-color-on-surface-medium);
  overflow-wrap: anywhere;
}

.site-search__empty {
  padding: var(--fu-space-md);
  font-size: var(--fu-text-body-2-size);
  color: var(--fu-color-on-surface-medium);
  text-align: center;
}

@media (max-width: 767px) {
  .site-search {
    max-width: none;
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   HOME PAGE HERO
   Matches templates/index.html exactly: .docs-hero wraps an h1.docs-hero__title,
   optional p.docs-hero__tagline, optional img.docs-hero__image, and optional
   div.docs-hero__actions of .btn links. .docs-hero__intro is section.content
   (freeform markdown) rendered below the hero block, and is prose, so it
   reuses the same h2/h3/p/a rules as .docs-page__body rather than
   duplicating them — see the DOCS CONTENT (prose) section further down,
   which several selectors below deliberately also target.
   ========================================================================== */
.docs-hero {
  position: relative;
  padding-block: var(--fu-space-xl) var(--fu-space-lg);
  background: linear-gradient(
    180deg,
    var(--fu-color-primary-container) 0%,
    var(--fu-color-surface-page) 100%
  );
  border-bottom: 1px solid var(--fu-color-border);
  text-align: center;
  /* base.html wraps {% block content %} in .container.container--wide with
     no padding-block of its own — the hero supplies its own so it reaches
     full viewport width via a negative-margin bleed. */
  margin-inline: calc(-1 * var(--fu-space-md));
  padding-inline: var(--fu-space-md);
}

@media (min-width: 600px) {
  .docs-hero {
    margin-inline: calc(-1 * var(--fu-space-lg));
    padding-inline: var(--fu-space-lg);
  }
}

@media (min-width: 1024px) {
  .docs-hero {
    margin-inline: calc(-1 * var(--fu-space-xl));
    padding-inline: var(--fu-space-xl);
  }
}

.docs-hero__title {
  margin: 0 0 var(--fu-space-sm);
  font-size: var(--fu-text-h2-size);
  font-weight: var(--fu-text-h2-weight);
  line-height: var(--fu-text-h2-line);
  letter-spacing: var(--fu-text-h2-tracking);
  color: var(--fu-color-on-surface);
}

.docs-hero__tagline {
  margin: 0 auto var(--fu-space-lg);
  max-width: 42rem;
  font-size: var(--fu-text-body-1-size);
  line-height: var(--fu-text-body-1-line);
  color: var(--fu-color-on-surface-medium);
}

.docs-hero__image {
  margin: 0 auto var(--fu-space-lg);
  max-height: 240px;
  width: auto;
  border-radius: var(--fu-radius-md);
}

.docs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fu-space-sm);
}

.docs-hero__intro {
  padding-block: var(--fu-space-lg);
  max-width: 72ch;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .docs-hero {
    padding-block: var(--fu-space-2xl) var(--fu-space-xl);
  }

  .docs-hero__title {
    font-size: var(--fu-text-h1-size);
    letter-spacing: var(--fu-text-h1-tracking);
    line-height: var(--fu-text-h1-line);
  }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fu-space-xs);
  height: 40px;
  padding: 12px var(--fu-space-md);
  border-radius: var(--fu-radius-md);
  border: 1px solid transparent;
  font-family: var(--fu-font-family-base);
  font-size: var(--fu-text-button-size);
  font-weight: var(--fu-text-button-weight);
  line-height: var(--fu-text-button-line);
  letter-spacing: var(--fu-text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--fu-transition-fast),
    border-color var(--fu-transition-fast),
    color var(--fu-transition-fast),
    transform var(--fu-transition-fast);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

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

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

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

.btn--primary:focus-visible {
  outline-color: var(--fu-color-focus-ring-on-primary);
  box-shadow: 0 0 0 4px var(--fu-color-primary-container);
}

.btn--secondary {
  background: var(--fu-color-surface);
  border-color: var(--fu-color-border);
  color: var(--fu-color-on-surface);
}

.btn--secondary:hover {
  border-color: var(--fu-color-primary);
  color: var(--fu-color-primary);
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--fu-space-md);
  font-size: var(--fu-text-subtitle-2-size);
  font-weight: 400;
  line-height: var(--fu-text-subtitle-2-line);
  color: var(--fu-color-on-surface-medium);
}

.breadcrumb a {
  color: var(--fu-color-on-surface-medium);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--fu-color-primary);
  text-decoration: underline;
}

.breadcrumb__sep {
  color: var(--fu-color-on-surface-disabled);
}

/* The trailing, non-link crumb — macros::breadcrumb in templates/macros.html
   renders it as <span aria-current="page">{{ current_title }}</span>. */
.breadcrumb [aria-current="page"] {
  color: var(--fu-color-on-surface);
  font-weight: 700;
}

/* ==========================================================================
   CARD GRID (used on the home page / section indexes to list child pages)
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fu-space-md);
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fu-space-lg);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fu-space-sm);
  min-width: 0;
  padding: var(--fu-space-md);
  background: var(--fu-color-surface);
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-md);
  box-shadow: var(--fu-shadow-card);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--fu-transition-base),
    box-shadow var(--fu-transition-base),
    border-color var(--fu-transition-fast);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--fu-color-rose-300);
  box-shadow: var(--fu-shadow-card-hover);
  text-decoration: none;
}

.card:focus-visible {
  outline: 2px solid var(--fu-color-focus-ring);
  outline-offset: 3px;
}

.card__title {
  margin: 0;
  font-size: var(--fu-text-h6-size);
  font-weight: var(--fu-text-h6-weight);
  line-height: var(--fu-text-h6-line);
  color: var(--fu-color-on-surface);
  overflow-wrap: anywhere;
}

.card__desc {
  margin: 0;
  font-size: var(--fu-text-body-2-size);
  line-height: var(--fu-text-body-2-line);
  color: var(--fu-color-on-surface-medium);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   DOCS LAYOUT
   Matches the real Zola/Tera template markup already landed in
   apps/docs/templates/ (page.html, section.html, partials/sidebar.html) —
   this is written against that markup, not an independently-invented
   contract. Structure, outermost to innermost:

   <div class="docs-shell">                          (page.html / section.html)
     <aside class="docs-sidebar">                     (partials/sidebar.html)
       <nav class="docs-sidebar__nav">
         <div class="docs-sidebar__group">
           <h2 class="docs-sidebar__group-title">…</h2>
           <ul class="docs-sidebar__list">
             <li class="docs-sidebar__item">
               <a class="docs-sidebar__link" aria-current="page">…</a>
     <div class="docs-content">                       (the whole main column)
       <nav class="breadcrumb">…</nav>
       <div class="docs-page">
         <div class="docs-page__body">                (actual prose lives here)
           <div class="docs-page__header"><h1>…</h1><a class="docs-page__markdown-link">…</a></div>
           <p class="docs-page__lede">…</p>
           {{ page.content | safe }}                  (h2s, tables, pre, etc.)
         <nav class="docs-toc">                        (only when page.toc is non-empty)
           <h2 class="docs-toc__title">On this page</h2>
           <ul class="docs-toc__list"><li class="docs-toc__item"><a class="docs-toc__link">

   No #docs-sidebar-toggle button exists in base.html and .docs-sidebar has
   no id — rather than require a template change out of this task's file
   scope (apps/docs/static/ only), site.js injects the mobile toggle button
   itself and stamps an id onto whichever .docs-sidebar it finds. See the
   "Mobile sidebar toggle" section of site.js.

   .docs-sidebar and .docs-toc are optional per-page — templates/index.html
   (the home page) already renders .docs-hero / .container content directly
   with no .docs-shell; see the GENERIC MAIN COLUMN section further down
   for a plainer single-column case (e.g. a future posts template).
   ========================================================================== */
.docs-shell {
  display: flex;
  flex-direction: column;
  gap: var(--fu-space-xl);
  align-items: flex-start;
  padding-block: var(--fu-space-lg) var(--fu-space-2xl);
}

@media (min-width: 1024px) {
  .docs-shell {
    flex-direction: row;
  }
}

/* ---------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------- */
.docs-sidebar {
  flex: 0 0 var(--fu-sidebar-width);
  width: 100%;
}

@media (min-width: 1024px) {
  .docs-sidebar {
    position: sticky;
    /* header height + the shell's own top padding */
    top: calc(var(--fu-header-height) + var(--fu-space-lg));
    max-height: calc(100vh - var(--fu-header-height) - var(--fu-space-lg) - var(--fu-space-lg));
    overflow-y: auto;
    padding-right: var(--fu-space-sm);
  }
}

/* Off-canvas below `lg`: hidden by default, toggled open by site.js via
   the .docs-sidebar--open modifier (driven by the toggle button site.js
   injects into .site-header__inner — see site.js). */
@media (max-width: 1023px) {
  .docs-sidebar {
    position: fixed;
    inset: var(--fu-header-height) 0 0 0;
    z-index: var(--fu-z-sidebar);
    background: var(--fu-color-surface);
    padding: var(--fu-space-md);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--fu-transition-base);
  }

  .docs-sidebar--open {
    transform: translateX(0);
  }
}

/* Set on <body> by site.js while the off-canvas sidebar is open, so the
   page behind the overlay can't be scrolled at the same time. */
.docs-sidebar-open-lock {
  overflow: hidden;
}

.docs-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--fu-space-md);
  font-size: var(--fu-text-body-2-size);
}

.docs-sidebar__group-title {
  margin: 0 0 4px;
  padding: 0 var(--fu-space-sm);
  font-size: var(--fu-text-overline-size);
  font-weight: var(--fu-text-overline-weight);
  letter-spacing: var(--fu-text-overline-tracking);
  text-transform: uppercase;
  color: var(--fu-color-on-surface-medium);
}

.docs-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-sidebar__item {
  margin: 0;
}

.docs-sidebar__link {
  display: block;
  padding: 6px var(--fu-space-sm);
  border-radius: var(--fu-radius-md);
  color: var(--fu-color-on-surface-medium);
  text-decoration: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition:
    color var(--fu-transition-fast),
    background-color var(--fu-transition-fast);
}

.docs-sidebar__link:hover {
  color: var(--fu-color-primary);
  background: var(--fu-color-primary-container);
  text-decoration: none;
}

.docs-sidebar__link[aria-current="page"] {
  color: var(--fu-color-primary);
  background: var(--fu-color-primary-container);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Content column — everything to the right of the sidebar: breadcrumb,
   then .docs-page (body + toc).
   ------------------------------------------------------------------- */
.docs-content {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* .docs-page splits the content column into the prose body and the
   sticky table-of-contents aside once there's room for both. */
.docs-page {
  display: flex;
  flex-direction: column;
  gap: var(--fu-space-xl);
  align-items: flex-start;
}

/* Custom breakpoint (see file header note): only run the body/TOC side by
   side once the viewport has room for the sidebar + body + TOC without
   cramming the body column. Not part of the DESIGN.md breakpoint scale. */
@media (min-width: 1220px) {
  .docs-page {
    flex-direction: row;
  }
}

.docs-page__body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 72ch;
}

.docs-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fu-space-sm);
}

.docs-page__header h1 {
  margin-bottom: var(--fu-space-xs);
}

.docs-page__markdown-link {
  flex-shrink: 0;
  font-size: var(--fu-text-caption-size);
  font-weight: var(--fu-text-caption-weight);
  letter-spacing: var(--fu-text-caption-tracking);
  color: var(--fu-color-on-surface-medium);
  text-decoration: none;
  white-space: nowrap;
}

.docs-page__markdown-link:hover {
  color: var(--fu-color-primary);
  text-decoration: underline;
}

.docs-page__lede {
  font-size: var(--fu-text-body-1-size);
  line-height: var(--fu-text-body-1-line);
  color: var(--fu-color-on-surface-medium);
  margin-bottom: var(--fu-space-lg);
}

/* ---------------------------------------------------------------------
   Table of contents (right column)
   ------------------------------------------------------------------- */
.docs-toc {
  display: none;
  flex: 0 0 var(--fu-toc-width);
  font-size: var(--fu-text-caption-size);
}

@media (min-width: 1220px) {
  .docs-toc {
    display: block;
    position: sticky;
    top: calc(var(--fu-header-height) + var(--fu-space-lg));
    max-height: calc(100vh - var(--fu-header-height) - var(--fu-space-lg) - var(--fu-space-lg));
    overflow-y: auto;
  }
}

.docs-toc__title {
  margin: 0 0 var(--fu-space-sm);
  font-size: var(--fu-text-overline-size);
  font-weight: var(--fu-text-overline-weight);
  letter-spacing: var(--fu-text-overline-tracking);
  text-transform: uppercase;
  color: var(--fu-color-on-surface-medium);
}

.docs-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--fu-color-border);
}

.docs-toc__list .docs-toc__list {
  border-left: none;
  padding-left: var(--fu-space-md);
}

.docs-toc__item {
  margin: 0;
}

.docs-toc__link {
  display: block;
  padding: 4px var(--fu-space-sm);
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--fu-color-on-surface-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--fu-transition-fast), border-color var(--fu-transition-fast);
}

.docs-toc__link:hover {
  color: var(--fu-color-primary);
  text-decoration: none;
}

/* Active state is toggled by site.js (scroll-spy) as the reader scrolls
   past each heading in .docs-page__body. */
.docs-toc__link--active {
  color: var(--fu-color-primary);
  border-left-color: var(--fu-color-primary);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Pager (prev/next page links at the bottom of a docs page)
   Not wired up by templates yet as of this writing — styled ahead of time
   so a future page.html addition (Zola's `page.lower`/`page.higher` for
   pages in the same section) can use it without a CSS round-trip.
   ------------------------------------------------------------------- */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fu-space-md);
  margin-top: var(--fu-space-2xl);
  padding-top: var(--fu-space-lg);
  border-top: 1px solid var(--fu-color-divider);
}

.docs-pager__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--fu-space-md);
  border: 1px solid var(--fu-color-border);
  border-radius: var(--fu-radius-md);
  color: var(--fu-color-on-surface);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--fu-transition-fast), box-shadow var(--fu-transition-fast);
}

.docs-pager__link:hover {
  border-color: var(--fu-color-primary);
  box-shadow: var(--fu-shadow-card);
  text-decoration: none;
}

.docs-pager__link--next {
  grid-column: 2;
  text-align: right;
  align-items: flex-end;
}

.docs-pager__label {
  font-size: var(--fu-text-caption-size);
  font-weight: var(--fu-text-caption-weight);
  letter-spacing: var(--fu-text-caption-tracking);
  text-transform: uppercase;
  color: var(--fu-color-on-surface-medium);
}

.docs-pager__title {
  font-size: var(--fu-text-body-1-size);
  font-weight: 700;
  color: var(--fu-color-primary);
  overflow-wrap: anywhere;
}

@media (max-width: 479px) {
  .docs-pager {
    grid-template-columns: 1fr;
  }

  .docs-pager__link--next {
    grid-column: 1;
    text-align: left;
    align-items: flex-start;
  }
}

/* ==========================================================================
   DOCS CONTENT (prose)
   The rendered Markdown body ({{ page.content | safe }}) is emitted
   directly inside .docs-page__body — there is no separate wrapper div
   around just the markdown output, so these rules target
   .docs-page__body as a descendant selector, alongside its sibling
   .docs-page__header (h1 + "View as Markdown" link) and optional
   .docs-page__lede. Base reset above already styles h1–h6, p, ul/ol,
   blockquote, hr, a, code, pre, and kbd — this section adds prose-
   specific spacing/overrides plus things the reset doesn't cover
   (images, tables).
   ========================================================================== */
.docs-page__body h2 {
  margin-top: var(--fu-space-2xl);
  padding-top: var(--fu-space-xs);
}

.docs-page__body h3,
.docs-page__body h4 {
  margin-top: var(--fu-space-xl);
}

.docs-page__body img {
  margin: var(--fu-space-md) 0;
  border-radius: var(--fu-radius-md);
  border: 1px solid var(--fu-color-border);
}

.docs-page__body figure {
  margin: var(--fu-space-md) 0;
}

.docs-page__body figcaption {
  margin-top: var(--fu-space-xs);
  font-size: var(--fu-text-caption-size);
  color: var(--fu-color-on-surface-medium);
  text-align: center;
}

/* Heading anchor links — injected by site.js next to each heading with an
   id inside .docs-page__body. Hidden until the heading is hovered/focused
   so they don't clutter normal reading. Deliberately scoped to
   .docs-page__body (not .docs-content, which also contains the h2 inside
   .docs-toc's own "On this page" title) so the TOC heading never grows a
   permalink icon of its own. */
.heading-anchor {
  margin-left: 0.4em;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--fu-color-on-surface-inactive);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--fu-transition-fast);
}

.docs-page__body h2:hover .heading-anchor,
.docs-page__body h3:hover .heading-anchor,
.docs-page__body h4:hover .heading-anchor,
.docs-page__body h5:hover .heading-anchor,
.docs-page__body h6:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}

/* ==========================================================================
   CODE BLOCKS — copy-to-clipboard wrapper
   Injected by site.js around every <pre> in .docs-page__body, so no
   template markup is required: <div class="code-block"><pre>...</pre>
   <button class="code-block__copy">Copy</button></div>
   ========================================================================== */
.code-block {
  position: relative;
}

.code-block pre {
  margin-bottom: var(--fu-space-md);
}

.code-block__copy {
  position: absolute;
  top: var(--fu-space-sm);
  right: var(--fu-space-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 var(--fu-space-sm);
  border-radius: var(--fu-radius-sm);
  border: 1px solid var(--fu-color-border);
  background: var(--fu-color-surface);
  color: var(--fu-color-on-surface-medium);
  font-family: var(--fu-font-family-base);
  font-size: var(--fu-text-caption-size);
  font-weight: var(--fu-text-caption-weight);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--fu-transition-fast), border-color var(--fu-transition-fast), color var(--fu-transition-fast);
}

.code-block:hover .code-block__copy,
.code-block:focus-within .code-block__copy,
.code-block__copy:focus-visible {
  opacity: 1;
}

.code-block__copy:hover {
  border-color: var(--fu-color-primary);
  color: var(--fu-color-primary);
}

.code-block__copy--copied {
  border-color: var(--fu-color-success);
  color: var(--fu-color-success);
  opacity: 1;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.docs-page__body table {
  width: 100%;
  margin: 0 0 var(--fu-space-md);
  border-collapse: collapse;
  font-size: var(--fu-text-body-2-size);
  line-height: var(--fu-text-body-2-line);
}

/* Markdown tables can run wider than the content column (long code samples,
   many columns) — scroll the table itself rather than the page. Wrapper
   div is injected by site.js (initTableWrappers), not by the template. */
.docs-page__body .table-wrap {
  overflow-x: auto;
  margin-bottom: var(--fu-space-md);
}

.docs-page__body .table-wrap table {
  margin-bottom: 0;
}

.docs-page__body th,
.docs-page__body td {
  padding: var(--fu-space-sm) var(--fu-space-md);
  text-align: left;
  border-bottom: 1px solid var(--fu-color-divider);
  vertical-align: top;
}

.docs-page__body th {
  background: var(--fu-color-surface-subdued);
  font-weight: 700;
  color: var(--fu-color-on-surface);
  white-space: nowrap;
}

.docs-page__body tbody tr:hover {
  background: var(--fu-color-surface-subdued);
}

/* ==========================================================================
   SECTION INDEX LIST (section.html: pages directly in a section)
   ========================================================================== */
.docs-index-list {
  margin: 0 0 var(--fu-space-lg);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--fu-space-md);
}

.docs-index-list__item {
  padding-bottom: var(--fu-space-md);
  border-bottom: 1px solid var(--fu-color-divider);
}

.docs-index-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.docs-index-list__item > a {
  font-size: var(--fu-text-h6-size);
  font-weight: var(--fu-text-h6-weight);
  line-height: var(--fu-text-h6-line);
}

.docs-index-list__desc {
  margin: 4px 0 0;
  color: var(--fu-color-on-surface-medium);
  font-size: var(--fu-text-body-2-size);
  line-height: var(--fu-text-body-2-line);
}

/* ==========================================================================
   EMPTY STATE (section.html: a section with no pages or subsections yet)
   ========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--fu-space-2xl) var(--fu-space-md);
  text-align: center;
  color: var(--fu-color-on-surface-medium);
}

.empty-state__message {
  font-size: var(--fu-text-h6-size);
  font-weight: var(--fu-text-h6-weight);
  color: var(--fu-color-on-surface);
}

/* ==========================================================================
   GENERIC MAIN COLUMN
   For pages that need a simple single-column main content area with no
   sidebar/TOC split (e.g. a future posts/<slug> template) — not currently
   used by page.html/section.html, which use .docs-content/.docs-page
   instead. Kept available so that template doesn't need a CSS round-trip
   when it's added: <main id="main-content" class="docs-main">
   <h1 class="docs-main__title">…</h1> … </main>
   ========================================================================== */
.docs-main {
  max-width: 72ch;
  margin-inline: auto;
}

.docs-main__title {
  margin: 0 0 var(--fu-space-md);
  font-size: var(--fu-text-h3-size);
  font-weight: var(--fu-text-h3-weight);
  line-height: var(--fu-text-h3-line);
  letter-spacing: var(--fu-text-h3-tracking);
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .docs-main__title {
    font-size: var(--fu-text-h2-size);
    line-height: var(--fu-text-h2-line);
    letter-spacing: var(--fu-text-h2-tracking);
  }
}

/* ==========================================================================
   LEGACY INLINE TYPOGRAPHY UTILITIES
   Some migrated content (e.g. the style-guide page) contains raw HTML spans
   using these class names to demonstrate the DESIGN.md type scale outside
   of a heading element — <span class="subtitle1">, <p class="body2">, etc.
   Kept intentionally separate from the --fu-text-* driven h1–h6/body rules
   above so a content edit to headings never accidentally touches these.
   ========================================================================== */
.subtitle1 {
  font-size: var(--fu-text-subtitle-1-size);
  font-weight: var(--fu-text-subtitle-1-weight);
  line-height: var(--fu-text-subtitle-1-line);
  letter-spacing: var(--fu-text-subtitle-1-tracking);
}

.subtitle2 {
  font-size: var(--fu-text-subtitle-2-size);
  font-weight: var(--fu-text-subtitle-2-weight);
  line-height: var(--fu-text-subtitle-2-line);
  letter-spacing: var(--fu-text-subtitle-2-tracking);
}

.body2 {
  font-size: var(--fu-text-body-2-size);
  font-weight: var(--fu-text-body-2-weight);
  line-height: var(--fu-text-body-2-line);
}

.overline {
  font-size: var(--fu-text-overline-size);
  font-weight: var(--fu-text-overline-weight);
  line-height: var(--fu-text-overline-line);
  letter-spacing: var(--fu-text-overline-tracking);
  text-transform: uppercase;
}

.caption {
  font-size: var(--fu-text-caption-size);
  font-weight: var(--fu-text-caption-weight);
  line-height: var(--fu-text-caption-line);
  letter-spacing: var(--fu-text-caption-tracking);
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
  margin-top: auto;
  padding-block: var(--fu-space-lg);
  border-top: 1px solid var(--fu-color-border);
  background: var(--fu-color-surface);
  color: var(--fu-color-on-surface-medium);
  font-size: var(--fu-text-body-2-size);
  text-align: center;
}

.site-footer a {
  color: var(--fu-color-on-surface-medium);
}

.site-footer a:hover {
  color: var(--fu-color-primary);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fu-space-md);
  margin-top: var(--fu-space-xs);
}

/* ==========================================================================
   404 PAGE
   Matches templates/404.html: <div class="docs-404"><h1>…</h1><p>…</p>
   <div class="docs-404__actions"> two .btn links </div>
   <p>…</p><ul><li><a>…</a></li></ul></div>. The heading/paragraph/list
   inside aren't given their own classes in the template, so they're styled
   here as plain descendant selectors rather than BEM-style children.
   ========================================================================== */
.docs-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fu-space-sm);
  min-height: 50vh;
  padding: var(--fu-space-2xl) var(--fu-space-md);
  text-align: center;
}

.docs-404 h1 {
  margin: 0;
  font-size: var(--fu-text-h4-size);
  font-weight: var(--fu-text-h4-weight);
  line-height: var(--fu-text-h4-line);
}

.docs-404 h1::before {
  content: "404";
  display: block;
  margin-bottom: var(--fu-space-sm);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fu-color-primary);
}

.docs-404 > p {
  max-width: 32rem;
  color: var(--fu-color-on-surface-medium);
}

.docs-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fu-space-sm);
  margin-block: var(--fu-space-sm);
}

.docs-404 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fu-space-sm) var(--fu-space-md);
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   SMALL-SCREEN SAFETY NET (320px)
   ========================================================================== */
@media (max-width: 359px) {
  .docs-hero__title {
    font-size: var(--fu-text-h3-size);
    line-height: var(--fu-text-h3-line);
    letter-spacing: var(--fu-text-h3-tracking);
  }

  .docs-404 h1::before {
    font-size: 3.5rem;
  }
}