/* ==========================================================================
   Frontier OSINT Design System v1: components.css
   Every value comes from tokens.css: no hex, no raw colour. Raw px appear only
   as 1px/2px hairlines; other geometry is derived from tokens with calc().
   Also raw: 3px underline offset, focus halo and arrow travel.
   Deliberate exceptions: the spinner period (700ms, kept under reduced motion
   because it is the only progress signal) and the fixed widths of dialog,
   palette and toast containers (560 / 640 / 384px caps, min() with the viewport).
   Class prefixes: fo- component, l- layout, t- type role (tokens.css).
   Hover rules sit inside @media (hover: hover) so touch taps never stick.
   ========================================================================== */

/* ---- 1. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;                 /* no faux italic or bold, ever */
  -webkit-font-smoothing: antialiased;  /* one weight rendering on every page */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  interpolate-size: allow-keywords;     /* animatable details / height:auto */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-tap-highlight-color: transparent; /* the :active press is the one tap feedback */
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: var(--t-body);
  letter-spacing: var(--t-body-track);
  font-optical-sizing: auto;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; text-wrap: balance; }
p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: var(--text-primary); }

/* One focus treatment everywhere: 2px ring, 2px offset, follows radius. */
:focus-visible { outline: var(--indicator-width) solid var(--focus-ring); outline-offset: var(--space-0-5); }
:focus:not(:focus-visible) { outline: none; }
/* Inside scroll containers the ring goes inset so it can never be clipped. */
.fo-inset-focus:focus-visible, .fo-scroll :focus-visible { outline-offset: calc(var(--indicator-width) * -1); }
/* Text links and summaries have no radius of their own; the ring rounds with the rest. */
:where(a, summary):where(:focus-visible) { border-radius: var(--radius-xs); }

a, button, summary, input, select, textarea, [role="tab"], [role="option"], [role="menuitem"], [role="switch"] {
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    text-decoration-color var(--dur-fast) linear,
    opacity var(--dur-fast) linear,
    transform var(--dur-press) var(--ease-out);
}
.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;
}
.fo-skip-link {
  position: absolute; left: var(--gutter); top: var(--space-2); z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--accent-solid); color: var(--text-on-accent); font: var(--t-label);
  transform: translateY(-200%);
}
.fo-skip-link:focus-visible { transform: none; }

@keyframes fo-spin { to { transform: rotate(360deg); } }
@keyframes fo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fo-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- 2. Icons and the arrow affordance ----------------------------------- */
.fo-icon {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  display: inline-block; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: var(--icon-sm-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.fo-icon--md { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-md-stroke); }
.fo-icon--lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: var(--icon-lg-stroke); }

/* Chevron at rest, arrow on hover: the shaft fades in and the group moves
   +3px (Stripe HDS: 300ms cubic-bezier(.25,1,.5,1)). Internal navigation only. */
.fo-arrow {
  width: 0.75em; height: 0.75em; flex: none; display: inline-block; vertical-align: -0.02em;
  margin-inline-start: var(--space-1-5); overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-move) var(--ease-out);
}
.fo-arrow__shaft { opacity: 0; transition: opacity var(--dur-move) var(--ease-out); }
/* External: arrow-up-right, used only when the link leaves the site. */
.fo-ext {
  width: 0.875em; height: 0.875em; flex: none; display: inline-block; vertical-align: -0.08em;
  margin-inline-start: var(--space-1); fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-move) var(--ease-out);
}
:is(a, button):focus-visible .fo-arrow { transform: translateX(3px); }
:is(a, button):focus-visible .fo-arrow__shaft { opacity: 1; }
@media (hover: hover) {
  :is(a, button, .fo-card--link):hover .fo-arrow { transform: translateX(3px); }
  :is(a, button, .fo-card--link):hover .fo-arrow__shaft { opacity: 1; }
  a:hover .fo-ext { transform: translate(1px, -1px); }
}

/* ---- 3. Layout ------------------------------------------------------------ */
.l-container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-8);
}
@media (min-width: 640px) { .l-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .l-grid { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); } }
.l-span-full { grid-column: 1 / -1; }
.l-doc { grid-column: 1 / -1; }
.l-aside { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .l-doc { grid-column: 1 / span 8; }
  .l-aside { grid-column: 10 / span 3; }
  .l-span-4 { grid-column: span 4; }
  .l-span-6 { grid-column: span 6; }
  .l-span-8 { grid-column: span 8; }
}
.l-section { padding-block: var(--section-pad); }
.l-section + .l-section { border-top: var(--border-width) dashed var(--border); }
/* Visible grid: hairline rails on the container edges (Stripe HDS draws
   1px rails at x=87 / x=1352 on a 1440 viewport). Desktop only. */
.l-rails { position: relative; }
@media (min-width: 1024px) {
  .l-rails::before, .l-rails::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: var(--border-width);
    background: var(--border-subtle); pointer-events: none;
  }
  .l-rails::before { left: 0; }
  .l-rails::after { right: 0; }
}
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.l-measure { max-width: var(--measure); }
/* Workspace template: canvas + docked inspector (>= 1280), overlay below. */
.l-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100dvh - var(--header-h));
}
@media (min-width: 1280px) {
  .l-workspace { grid-template-columns: minmax(0, 1fr) var(--drawer-w); }
}

/* ---- 4. Header ------------------------------------------------------------ */
.fo-header {
  position: relative; z-index: var(--z-header);
  background: var(--bg-canvas);
  border-bottom: var(--border-width) solid var(--border);
}
.fo-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-8);
}
.fo-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-lg);
  font: var(--weight-wordmark) var(--t-body-size)/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
.fo-brand__mark { width: var(--space-6); height: var(--space-6); flex: none; border-radius: var(--radius-sm); }
.fo-nav { display: flex; align-items: stretch; gap: var(--space-6); height: 100%; margin-inline-end: auto; }
.fo-nav__link {
  position: relative; display: inline-flex; align-items: center;
  font: var(--t-label); color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.fo-nav__link[aria-current="page"] { color: var(--text-primary); }
.fo-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--border-width) * -1);
  height: var(--indicator-width); background: var(--accent-solid); border-radius: var(--radius-full);
}
.fo-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.fo-search-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  width: calc(var(--space-32) * 2); height: var(--control-md);
  padding-inline: var(--space-3) var(--space-1-5);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-field); color: var(--text-tertiary); font: var(--t-body-sm);
}
.fo-search-trigger { text-decoration: none; cursor: pointer; }
.fo-search-trigger .fo-kbd { margin-inline-start: auto; }
.fo-search-trigger:active { background: var(--bg-pressed); }
/* One search box at a time: while a page's own search field is on screen, the header's steps aside. */
.fo-search-trigger.is-redundant { opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
.fo-header__menu { display: none; }
@media (hover: hover) {
  .fo-brand:hover { opacity: 0.8; }
  .fo-nav__link:hover { color: var(--text-primary); }
  .fo-search-trigger:hover { border-color: var(--border-strong); color: var(--text-secondary); }
}
@media (max-width: 1023px) {
  .fo-header__inner { gap: var(--space-6); }
  .fo-search-trigger { width: var(--control-md); padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--text-secondary); }
  .fo-search-trigger > :not(.fo-icon) { display: none; }
}
@media (max-width: 1023px) and (hover: hover) {
  .fo-search-trigger:hover { border-color: transparent; background: var(--bg-hover); color: var(--text-primary); }
}
@media (max-width: 359px) {
  .fo-brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 639px) {
  .fo-header__inner { gap: var(--space-2); }
  .fo-nav { display: none; }
  .fo-brand { margin-inline-end: auto; }
  .fo-header__menu { display: inline-flex; }
}

/* Version banner: frozen /slug/v{n} pages (ADR-004). Never shown on /slug. */
.fo-version {
  background: var(--bg-subtle);
  border-bottom: var(--border-width) solid var(--border);
  font: var(--t-body-sm); color: var(--text-secondary);
}
.fo-version__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--control-lg); padding-block: var(--space-2); }
.fo-version__text { flex: 1 1 calc(var(--space-32) * 2); min-width: 0; }
.fo-version__inner > .fo-icon { flex: none; }
.fo-version strong { color: var(--text-primary); font-weight: var(--weight-medium); }

/* ---- 5. Footer ------------------------------------------------------------ */
.fo-footer {
  background: var(--bg-subtle);
  border-top: var(--border-width) solid var(--border);
  padding-block: var(--space-12) var(--space-8);
  color: var(--text-secondary);
}
.fo-footer__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap);
}
@media (min-width: 1024px) {
  .fo-footer__cols { grid-template-columns: 2fr repeat(3, 1fr); gap: 0; }
  .fo-footer__col + .fo-footer__col { border-left: var(--border-width) dashed var(--border); padding-inline-start: var(--space-6); }
}
.fo-footer__brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .fo-footer__brand { grid-column: auto; padding-inline-end: var(--space-8); } }
.fo-footer__title { font: var(--t-label); color: var(--text-primary); margin-bottom: var(--space-2); }
.fo-footer__links { list-style: none; padding: 0; }
.fo-footer__link {
  display: inline-flex; align-items: center; min-height: var(--space-8);
  font: var(--t-body-sm); color: var(--text-secondary); text-decoration: none;
}
.fo-footer__meta {
  margin-top: var(--space-10); padding-top: var(--space-4);
  border-top: var(--border-width) dashed var(--border);
  font: var(--t-caption); color: var(--text-tertiary);
}
@media (hover: hover) { .fo-footer__link:hover { color: var(--text-primary); } }

/* ---- 6. Buttons ------------------------------------------------------------ */
.fo-btn {
  --btn-h: var(--control-md);
  --spin: currentColor;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--btn-h); min-width: var(--btn-h);
  padding-inline: var(--space-4);
  border: var(--border-width) solid transparent; border-radius: var(--radius-sm);
  font: var(--t-label); letter-spacing: var(--t-label-track);
  white-space: nowrap; text-decoration: none; user-select: none; cursor: pointer;
}
.fo-btn--sm { --btn-h: var(--control-sm); padding-inline: var(--space-3); }
.fo-btn--lg { --btn-h: var(--control-lg); padding-inline: var(--space-5); font-size: var(--t-body-size); }
.fo-btn--icon { padding-inline: 0; width: var(--btn-h); }
.fo-btn--block { width: 100%; }

.fo-btn--primary { background: var(--accent-solid); color: var(--text-on-accent); --spin: var(--text-on-accent); }
.fo-btn--secondary { background: var(--bg-raised); color: var(--text-primary); border-color: var(--border-strong); }
.fo-btn--ghost { background: transparent; color: var(--text-secondary); }
.fo-btn--link {
  height: auto; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--accent-text);
  text-decoration: underline; text-decoration-color: transparent;
}
@media (hover: hover) {
  .fo-btn--primary:hover { background: var(--accent-solid-hover); }
  .fo-btn--secondary:hover { background: var(--bg-hover); }
  .fo-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
  .fo-btn--link:hover { color: var(--accent-text-hover); text-decoration-color: currentColor; }
}
.fo-btn:active { transform: translateY(1px); }
.fo-btn--primary:active { background: var(--accent-solid-active); }
.fo-btn--secondary:active, .fo-btn--ghost:active { background: var(--bg-pressed); }
.fo-btn--link:active { transform: none; }

/* Disabled: colour, not opacity, so the label stays readable; always pair
   with aria-describedby naming the reason. */
.fo-btn:disabled, .fo-btn[aria-disabled="true"] {
  cursor: not-allowed; transform: none;
  background: var(--bg-pressed); color: var(--text-disabled); border-color: transparent;
}
.fo-btn--ghost:disabled, .fo-btn--ghost[aria-disabled="true"],
.fo-btn--link:disabled, .fo-btn--link[aria-disabled="true"] { background: transparent; }

/* Pending: same width, spinner replaces the label (Stripe Button pending). Fast work never
   shows it: the label stays for --delay-spinner (300ms), then crossfades to the spinner. */
.fo-btn[aria-busy="true"] { pointer-events: none; animation: fo-label-out var(--dur-fast) linear var(--delay-spinner) both; }
.fo-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--radius-full);
  border: var(--indicator-width) solid var(--spin); border-right-color: transparent;
  animation: fo-spin 700ms linear infinite, fo-fade-in var(--dur-fast) linear var(--delay-spinner) both;
}
@keyframes fo-label-out { to { color: transparent; } }
.fo-btn--secondary[aria-busy="true"], .fo-btn--ghost[aria-busy="true"] { --spin: var(--text-secondary); }

/* ---- 7. Links -------------------------------------------------------------- */
.fo-link {
  color: var(--accent-text); font-weight: var(--weight-medium);
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  border-radius: var(--radius-xs);
}
.fo-link--inline {
  color: inherit; font-weight: inherit;
  text-decoration-color: var(--border-strong);
}
.fo-link--quiet { color: var(--text-tertiary); font-weight: var(--weight-regular); }
@media (hover: hover) {
  .fo-link:hover { color: var(--accent-text-hover); text-decoration-color: currentColor; }
  .fo-link--inline:hover { color: var(--text-primary); text-decoration-color: currentColor; }
  .fo-link--quiet:hover { color: var(--text-secondary); text-decoration-color: transparent; }
}
.fo-prose { max-width: var(--measure); color: var(--text-secondary); }
.fo-prose p + p { margin-top: var(--space-4); }
.fo-prose a:not([class]) {
  color: var(--text-primary); text-decoration: underline;
  text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
@media (hover: hover) { .fo-prose a:not([class]):hover { text-decoration-color: currentColor; } }

/* ---- 8. Keyboard hint ------------------------------------------------------ */
.fo-kbd {
  display: inline-grid; place-items: center;
  min-width: var(--space-5); height: var(--space-5); padding-inline: var(--space-1);
  border: var(--border-width) solid var(--border); border-bottom-width: var(--indicator-width);
  border-radius: var(--radius-xs); background: var(--bg-subtle);
  font: var(--t-caption); font-weight: var(--weight-medium); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ---- 9. Form fields and search ---------------------------------------------- */
.fo-field { display: grid; gap: var(--space-1-5); }
.fo-label { font: var(--t-label); color: var(--text-primary); }
.fo-hint { font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-tertiary); }
.fo-error-text { display: flex; gap: var(--space-1-5); align-items: center; font: var(--t-caption); color: var(--danger-text); }
.fo-input, .fo-select, .fo-textarea {
  width: 100%; height: var(--control-md);
  padding-inline: var(--space-3);
  background: var(--bg-field); color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
  font: var(--t-body-sm);
  appearance: none;
}
.fo-textarea { height: auto; min-height: calc(var(--space-24) + var(--space-4)); padding-block: var(--space-2); resize: vertical; }
.fo-input::placeholder, .fo-textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
@media (pointer: coarse) { .fo-input, .fo-select, .fo-textarea, .fo-search__input { font-size: var(--t-body-size); } }
@media (hover: hover) {
  .fo-input:hover, .fo-select:hover, .fo-textarea:hover, .fo-search:hover {
    border-color: color-mix(in srgb, var(--border-strong), var(--text-primary) 18%);
  }
}
.fo-input:focus-visible, .fo-select:focus-visible, .fo-textarea:focus-visible {
  outline: none; border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent);
}
.fo-input[aria-invalid="true"] { border-color: var(--danger-text); }
.fo-input:disabled, .fo-select:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }
.fo-select-wrap { position: relative; display: block; }
.fo-select { padding-inline-end: var(--space-8); cursor: pointer; }
.fo-select-wrap::after {
  content: ""; position: absolute; right: var(--space-3); top: 50%;
  width: var(--icon-sm); height: var(--icon-sm); translate: 0 -50%; pointer-events: none;
  background: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fo-search {
  --search-h: calc(var(--control-md) + var(--space-1));
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--search-h); padding-inline: var(--space-3) var(--space-1-5);
  background: var(--bg-field);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}
.fo-search--hero { --search-h: calc(var(--control-lg) + var(--space-1)); padding-inline: var(--space-4) var(--space-1); border-radius: var(--radius-md); }
.fo-search--hero .fo-search__input { font-size: var(--t-body-size); }
.fo-search__input {
  flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; outline: none;
  font: var(--t-body-sm); color: var(--text-primary);
}
.fo-search__input::placeholder { color: var(--text-tertiary); opacity: 1; }
/* The wrapper draws the focus halo (:focus-within below), so the input itself shows none. */
.fo-search__input:focus-visible { outline: none; }
.fo-search__input::-webkit-search-cancel-button { display: none; }
.fo-search__clear { display: none; }
.fo-search:has(.fo-search__input:not(:placeholder-shown)) .fo-search__clear { display: inline-flex; }
.fo-search:has(.fo-search__input:not(:placeholder-shown)) .fo-kbd,
.fo-search:focus-within .fo-kbd { display: none; }
.fo-search:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent);
  color: var(--text-secondary);
}
.fo-search .fo-btn { flex: none; }
/* Phones: Enter submits, so the text button and the key hint go; the full
   prompt fits at 320px (ux-layout-26). */
@media (max-width: 479px) { .fo-search .fo-btn--primary { display: none; } }
@media (pointer: coarse) { .fo-search .fo-kbd, .fo-search-trigger .fo-kbd { display: none; } }

/* ---- 10. Command palette (⌘K, /) and search typeahead ------------------------- */
.fo-palette {
  width: min(640px, calc(100vw - 2 * var(--gutter))); max-width: none;
  max-height: min(560px, calc(100dvh - 2 * var(--space-16)));
  margin: 12vh auto auto; padding: 0;
  display: flex; flex-direction: column;
  background: var(--bg-overlay); color: var(--text-primary);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
.fo-palette:not([open]) { display: none; opacity: 0; transform: translateY(calc(var(--space-2) * -1)) scale(0.98); }
@starting-style { .fo-palette[open] { opacity: 0; transform: translateY(calc(var(--space-2) * -1)) scale(0.98); } }
.fo-palette::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
html:has(.fo-palette[open]) { overflow: hidden; }
.fo-palette__head {
  display: flex; align-items: center; gap: var(--space-3); flex: none;
  height: calc(var(--space-12) + var(--space-2)); padding-inline: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text-tertiary);
}
.fo-palette__input {
  flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; outline: none; background: transparent;
  font: var(--t-body); color: var(--text-primary);
}
.fo-palette__input::placeholder { color: var(--text-tertiary); }
.fo-palette__input:focus-visible { outline: none; }
.fo-palette__esc { flex: none; }
.fo-palette__cancel { display: none; flex: none; margin-inline-end: calc(var(--space-2) * -1); }
.fo-palette__body { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); flex: 1; }
.fo-palette__group + .fo-palette__group { margin-top: var(--space-2); }
.fo-palette__group--action { padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); }
.fo-palette__group-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font: var(--t-overline); letter-spacing: var(--t-overline-track); text-transform: uppercase;
  color: var(--text-tertiary);
}
.fo-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: var(--space-12); padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); text-decoration: none;
}
.fo-option__text { display: grid; min-width: 0; }
.fo-option__title { font: var(--t-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-option__alias { font-weight: var(--weight-regular); color: var(--text-tertiary); }
.fo-option__alias::before { content: " · "; }
.fo-option__meta { font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-option .fo-avatar, .fo-option .fo-logo, .fo-option__mark { --size: var(--space-8); width: var(--size); height: var(--size); }
.fo-option__enter { color: var(--text-secondary); opacity: 0; }
.fo-option[aria-selected="true"] { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-border); }
.fo-option[aria-selected="true"] .fo-option__enter { opacity: 1; }
.fo-option[aria-selected="true"] .fo-option__meta { color: var(--text-secondary); }
.fo-option:active { background: var(--accent-subtle-hover); }
.fo-option mark, .fo-highlight {
  background: var(--selection); color: inherit; border-radius: 2px; padding-inline: 1px;
}
.fo-option--action .fo-option__title { color: var(--accent-text); }
/* Marks for records without an image: an icon or initials on a plate tinted by kind (DESIGN.md 3.5). */
.fo-logo--icon .fo-icon { width: var(--icon-sm); height: var(--icon-sm); }
.fo-logo.fo-logo--lab { background: color-mix(in srgb, var(--kind-lab) 24%, var(--bg-raised)); color: var(--text-primary); }
.fo-logo.fo-logo--capital { background: color-mix(in srgb, var(--kind-capital) 24%, var(--bg-raised)); color: var(--text-primary); }
.fo-logo.fo-logo--work { background: color-mix(in srgb, var(--kind-work) 24%, var(--bg-raised)); color: var(--text-primary); }
.fo-logo.fo-logo--other { background: var(--bg-pressed); color: var(--text-secondary); }
.fo-logo.fo-logo--accent { background: var(--accent-subtle); color: var(--accent-text); }
.fo-logo.fo-logo--plain { background: transparent; color: var(--accent-text); }
.fo-logo.fo-logo--plain::after { box-shadow: none; }
.fo-option--skeleton { cursor: default; }
.fo-option--skeleton .fo-option__text { gap: var(--space-2); }
.fo-option--skeleton .fo-skeleton { width: var(--w, 50%); }
.fo-option--skeleton .fo-skeleton--meta { height: var(--space-2); }
.fo-option--skeleton .fo-option__mark { width: var(--space-8); height: var(--space-8); }
.fo-palette__empty, .fo-palette__message { padding: var(--space-8) var(--space-4) var(--space-6); text-align: center; font: var(--t-body-sm); color: var(--text-secondary); text-wrap: pretty; }
.fo-palette__message strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.fo-palette__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; flex: none;
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--border); background: var(--bg-subtle);
  font: var(--t-caption); color: var(--text-tertiary);
}
.fo-palette__foot > span { display: inline-flex; gap: var(--space-1-5); align-items: center; }
.fo-palette__count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
/* Touch: no key legends or key caps; a Cancel button instead of esc. */
@media (pointer: coarse) {
  .fo-palette__foot > .fo-palette__keys, .fo-palette__esc, .fo-option__enter { display: none; }
  .fo-palette__cancel { display: inline-flex; }
}
/* Phones: the palette is a full-screen sheet. */
@media (max-width: 639px) {
  .fo-palette { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .fo-palette__foot > .fo-palette__keys, .fo-palette__esc { display: none; }
  .fo-palette__cancel { display: inline-flex; }
}

/* Typeahead: suggestions under a .fo-search field; its form is .fo-search-form. */
.fo-search-form { position: relative; }
.fo-typeahead {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-popover);
  display: flex; flex-direction: column;
  background: var(--bg-overlay); color: var(--text-primary);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@starting-style { .fo-typeahead { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); } }
.fo-typeahead__body {
  max-height: var(--typeahead-max, min(calc(var(--space-32) * 3), 60vh));
  overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1-5);
}
.fo-typeahead .fo-palette__group + .fo-palette__group { margin-top: var(--space-1); }
.fo-typeahead .fo-palette__message { padding: var(--space-6) var(--space-4); }
.fo-typeahead__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; flex: none;
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-width) solid var(--border); background: var(--bg-subtle);
  font: var(--t-caption); color: var(--text-tertiary);
}
.fo-typeahead__foot > span { display: inline-flex; gap: var(--space-1-5); align-items: center; }
@media (pointer: coarse) { .fo-typeahead__foot { display: none; } }

/* ---- 11. Segmented control ------------------------------------------------- */
.fo-segmented {
  display: inline-flex; gap: var(--space-0-5); padding: var(--space-0-5);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--bg-subtle); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
}
.fo-segmented__item {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: calc(var(--control-sm) - 2 * var(--space-0-5) - 2 * var(--border-width));
  padding-inline: var(--space-3); border-radius: var(--radius-xs);
  font: var(--t-label); color: var(--text-secondary); white-space: nowrap;
}
.fo-segmented__item[aria-checked="true"], .fo-segmented__item[aria-pressed="true"] {
  background: var(--bg-thumb); color: var(--text-primary);
  box-shadow: var(--shadow-xs), 0 0 0 1px var(--border);
}
.fo-segmented__item:focus-visible { outline-offset: calc(var(--indicator-width) * -1); }
@media (hover: hover) {
  .fo-segmented__item:not([aria-checked="true"]):not([aria-pressed="true"]):hover { color: var(--text-primary); }
}
.fo-segmented--block { display: flex; }
.fo-segmented--block .fo-segmented__item { flex: 1; justify-content: center; }

/* ---- 12. Tabs -------------------------------------------------------------- */
.fo-tabs {
  position: relative; display: flex; gap: var(--space-6);
  border-bottom: var(--border-width) solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.fo-tabs::-webkit-scrollbar { display: none; }
.fo-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: var(--control-lg); flex: none;
  font: var(--t-label); color: var(--text-secondary); white-space: nowrap;
}
.fo-tab[aria-selected="true"] { color: var(--text-primary); }
.fo-tab__count { font: var(--t-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* Without JS each selected tab draws its own indicator ... */
.fo-tabs:not([data-indicator]) .fo-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--indicator-width); background: var(--accent-solid); border-radius: var(--radius-full);
}
/* ... with JS one indicator slides between tabs (--x, --w set by script). */
.fo-tabs__indicator {
  position: absolute; left: 0; bottom: 0; height: var(--indicator-width);
  width: var(--w, 0); transform: translateX(var(--x, 0));
  background: var(--accent-solid); border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.fo-tab:focus-visible { outline-offset: calc(var(--space-1) * -1); border-radius: var(--radius-sm); }
@media (hover: hover) { .fo-tab:hover { color: var(--text-primary); } }

/* ---- 13. Tags, status pills, filter chips, counts --------------------------- */
.fo-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--space-5); padding-inline: var(--space-1-5);
  border-radius: var(--radius-xs); background: var(--bg-hover);
  font: var(--t-caption); font-weight: var(--weight-medium); color: var(--text-secondary);
  white-space: nowrap;
}
.fo-status {
  --st-fg: var(--text-secondary); --st-bg: var(--bg-hover); --st-bd: var(--border);
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: calc(var(--space-5) + var(--space-0-5)); padding-inline: var(--space-2);
  border: var(--border-width) solid var(--st-bd); border-radius: var(--radius-full);
  background: var(--st-bg); color: var(--st-fg);
  font: var(--t-caption); font-weight: var(--weight-medium); white-space: nowrap;
}
.fo-status::before {
  content: ""; width: var(--space-1-5); height: var(--space-1-5); flex: none;
  border-radius: var(--radius-full); background: currentColor;
}
.fo-status--plain::before { display: none; }
.fo-status .fo-icon { width: calc(var(--icon-sm) - var(--space-1)); height: calc(var(--icon-sm) - var(--space-1)); }
.fo-status:has(.fo-icon)::before { display: none; }
.fo-status--success { --st-fg: var(--success-text); --st-bg: var(--success-bg); --st-bd: var(--success-border); }
.fo-status--warning { --st-fg: var(--warning-text); --st-bg: var(--warning-bg); --st-bd: var(--warning-border); }
.fo-status--danger  { --st-fg: var(--danger-text);  --st-bg: var(--danger-bg);  --st-bd: var(--danger-border); }
.fo-status--info    { --st-fg: var(--info-text);    --st-bg: var(--info-bg);    --st-bd: var(--info-border); }
.fo-status--accent  { --st-fg: var(--accent-text);  --st-bg: var(--accent-subtle); --st-bd: var(--accent-border); }

.fo-chip {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: var(--control-sm); padding-inline: var(--space-3);
  border: var(--border-width) dashed var(--border-strong); border-radius: var(--radius-full);
  background: transparent; color: var(--text-secondary);
  font: var(--t-label); font-size: var(--t-caption-size); white-space: nowrap;
}
.fo-chip[aria-pressed="true"], .fo-chip--active {
  border-style: solid; border-color: var(--border-strong); background: var(--bg-raised); color: var(--text-primary);
}
.fo-chip__value { color: var(--accent-text); }
.fo-chip__sep { width: var(--border-width); align-self: stretch; margin-block: var(--space-2); background: var(--border); }
.fo-chip__clear { display: inline-grid; place-items: center; width: var(--space-5); height: var(--space-5); margin-inline-end: calc(var(--space-1-5) * -1); border-radius: var(--radius-full); color: var(--text-tertiary); }
@media (hover: hover) {
  .fo-chip:hover { border-color: color-mix(in srgb, var(--border-strong), var(--text-primary) 18%); color: var(--text-primary); }
  .fo-chip__clear:hover { background: var(--bg-hover); color: var(--text-primary); }
}
.fo-chip:active { background: var(--bg-pressed); }
.fo-count {
  display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--space-5);
  padding-inline: var(--space-1-5); border-radius: var(--radius-full);
  background: var(--bg-hover); color: var(--text-secondary);
  font: var(--t-caption); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums;
}

/* ---- 14. Avatars and logo plates -------------------------------------------- */
.fo-avatar, .fo-logo {
  --size: var(--space-10);
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  width: var(--size); height: var(--size);
  overflow: hidden; isolation: isolate;
  background: var(--bg-pressed); color: var(--text-secondary);
  font: var(--weight-semibold) calc(var(--size) * 0.38)/1 var(--font-sans);
  letter-spacing: -0.01em; user-select: none;
}
.fo-avatar { border-radius: var(--radius-full); text-transform: uppercase; }
.fo-logo { border-radius: var(--radius-logo); background: var(--logo-plate-light); color: var(--text-secondary); }
.fo-logo--dark { background: var(--logo-plate-dark); }
.fo-logo--initials { background: var(--bg-pressed); }
.fo-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fo-logo img, .fo-logo svg { width: 68%; height: 68%; object-fit: contain; }
.fo-avatar::after, .fo-logo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--ring-image);
}
.fo-avatar--xs, .fo-logo--xs { --size: var(--space-5); }
.fo-avatar--sm, .fo-logo--sm { --size: var(--space-6); }
.fo-avatar--md, .fo-logo--md { --size: var(--space-8); }
.fo-avatar--lg, .fo-logo--lg { --size: var(--space-12); }
.fo-avatar--xl, .fo-logo--xl { --size: var(--space-16); }
.fo-avatar--focal { box-shadow: 0 0 0 var(--indicator-width) var(--bg-canvas), 0 0 0 calc(var(--indicator-width) * 2) var(--accent-solid); overflow: visible; }
.fo-avatar--focal img { border-radius: inherit; }
.fo-avatar-stack { display: inline-flex; }
.fo-avatar-stack > * { box-shadow: 0 0 0 var(--indicator-width) var(--bg-canvas); }
.fo-avatar-stack > * + * { margin-inline-start: calc(var(--size) * -0.18); }

/* ---- 15. Meta line, list rows ---------------------------------------------- */
/* Separators live at the start of each item and the list is shifted left by
   one separator, so a wrapped line never starts with "·" (ux-layout-19). */
.fo-meta { overflow-x: clip; overflow-clip-margin: 2px; font: var(--t-body-sm); color: var(--text-secondary); }
.fo-meta__list {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin: 0 0 0 calc(var(--space-4) * -1); padding: 0; list-style: none;
}
.fo-meta__list > li { display: inline-flex; align-items: baseline; min-width: 0; }
.fo-meta__list > li::before {
  content: "\00B7"; display: inline-block; width: var(--space-4); text-align: center; color: var(--text-tertiary);
}
.fo-meta--caption { font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-tertiary); }

.fo-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-width) solid var(--border-subtle); }
/* Bleed rows into the gutter so row text sits on the page's left edge while
   the hover fill still has an inset. */
@media (min-width: 640px) { .fo-list--bleed { margin-inline: calc(var(--space-4) * -1); } }
.fo-row {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--space-4);
  min-height: calc(var(--space-16) + var(--space-2));
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.fo-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.fo-row--compact { min-height: 0; padding: var(--space-2) 0; column-gap: var(--space-3); }
.fo-row--compact .fo-row__title { font: var(--t-label); }
.fo-row__main { min-width: 0; display: grid; gap: var(--space-0-5); }
.fo-row__title { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font: var(--t-title); color: var(--text-primary); }
.fo-row__title > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-row__handle { font: var(--t-body-sm); color: var(--text-tertiary); white-space: nowrap; }
.fo-row__aside { display: flex; align-items: center; gap: var(--space-3); color: var(--text-tertiary); font: var(--t-caption); font-variant-numeric: tabular-nums; }
.fo-row__link { color: inherit; text-decoration: none; outline: none; }
.fo-row__link::after { content: ""; position: absolute; inset: 0; }
.fo-row:has(.fo-row__link:focus-visible) { outline: var(--indicator-width) solid var(--focus-ring); outline-offset: calc(var(--indicator-width) * -1); border-radius: var(--radius-sm); }
.fo-row .fo-chevron { color: var(--text-tertiary); transition: transform var(--dur-move) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.fo-row:active { background: var(--bg-pressed); }
@media (hover: hover) {
  .fo-row:has(.fo-row__link):hover { background: var(--bg-hover); }
  .fo-row:hover .fo-chevron { transform: translateX(2px); color: var(--text-secondary); }
}
@media (max-width: 639px) {
  .fo-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: 0; }
  .fo-row__aside { grid-column: 2; }
  .fo-row--plain { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .fo-row--plain .fo-row__aside { grid-column: 1; }
  .fo-row--compact { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* ---- 16. Data table --------------------------------------------------------- */
.fo-table-wrap { overflow-x: auto; border-top: var(--border-width) solid var(--border); }
.fo-table-wrap--framed { border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.fo-table { width: 100%; border-collapse: collapse; font: var(--t-body-sm); color: var(--text-primary); }
.fo-table caption { caption-side: bottom; text-align: left; }
.fo-table th {
  height: calc(var(--control-md)); padding: 0 var(--space-4);
  text-align: left; vertical-align: middle; white-space: nowrap;
  font: var(--t-caption); font-weight: var(--weight-medium); letter-spacing: var(--t-caption-track);
  color: var(--text-secondary); background: var(--bg-subtle);
  border-bottom: var(--border-width) solid var(--border);
}
.fo-table td {
  padding: var(--space-3) var(--space-4); vertical-align: middle;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.fo-table tbody tr:last-child td { border-bottom: 0; }
.fo-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-table .is-num.t-numeric { font-size: var(--t-body-size); }
.fo-table .is-muted { color: var(--text-tertiary); }
.fo-table__primary { font: var(--t-label); color: var(--text-primary); }
.fo-table__sub { display: block; font: var(--t-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fo-table tbody tr[data-href] { cursor: pointer; }
@media (hover: hover) { .fo-table tbody tr[data-href]:hover td { background: var(--bg-hover); } }
.fo-table-source {
  padding-top: var(--space-3); font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-tertiary);
  max-width: var(--measure);
}
@media (max-width: 639px) {
  .fo-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fo-table--stack tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-subtle); }
  .fo-table--stack td { display: block; padding: 0; border: 0; }
  .fo-table--stack td:first-child { grid-column: 1 / -1; }
  .fo-table--stack td.is-num { text-align: left; }
  .fo-table--stack td[data-label]::before { content: attr(data-label); display: block; font: var(--t-caption); color: var(--text-tertiary); }
}

/* ---- 17. Cards, stats, quotes --------------------------------------------- */
.fo-card {
  display: block; position: relative;
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-6);
  color: inherit; text-decoration: none;
}
.fo-card--flush { padding: 0; overflow: hidden; }
.fo-card__eyebrow { font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-tertiary); margin-bottom: var(--space-2); }
.fo-card__title { font: var(--t-heading-md); letter-spacing: var(--t-heading-md-track); color: var(--text-primary); }
.fo-card__body { margin-top: var(--space-2); font: var(--t-body-sm); color: var(--text-secondary); }
.fo-card__foot { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.fo-card--link { cursor: pointer; }
.fo-card--link:active { background: var(--bg-hover); }
.fo-card--feature { padding: var(--space-8); }
.fo-card--feature .fo-card__title { font: var(--t-heading-lg); letter-spacing: var(--t-heading-lg-track); }
@media (hover: hover) {
  .fo-card--link:hover { border-color: var(--border-strong); }
}

/* Each stat draws a left hairline; the grid is shifted left by one inset and
   clipped, so the first stat of every wrapped row never shows its rule. */
.fo-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-32) + var(--space-12)), 1fr)); gap: var(--space-6) 0;
  margin-inline-start: calc((var(--space-6) + var(--border-width)) * -1);
  clip-path: inset(0 0 0 calc(var(--space-6) + var(--border-width)));
}
.fo-stat { display: grid; gap: var(--space-1); align-content: start; padding-inline: var(--space-6); border-left: var(--border-width) solid var(--border); }
.fo-stat__value { font: var(--t-numeric-xl); letter-spacing: var(--t-numeric-xl-track); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.fo-stat__unit { color: var(--text-tertiary); }
.fo-stat__label { font: var(--t-body-sm); color: var(--text-secondary); max-width: 24ch; }
.fo-stat__source { font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-tertiary); }

.fo-quote { padding-inline-start: var(--space-4); border-inline-start: var(--indicator-width) solid var(--border-strong); }
.fo-quote__text { font: var(--t-quote); letter-spacing: var(--t-quote-track); color: var(--text-primary); }
.fo-quote__cite { margin-top: var(--space-3); display: block; font: var(--t-caption); font-style: normal; color: var(--text-tertiary); }

.fo-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--t-body-sm); color: var(--text-secondary); list-style: none; padding: 0; }
.fo-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--text-tertiary); }
.fo-breadcrumb a { color: inherit; text-decoration: none; }
.fo-breadcrumb [aria-current="page"] { color: var(--text-primary); }
@media (hover: hover) { .fo-breadcrumb a:hover { color: var(--text-primary); } }

/* Section head: overline + two-tone thesis heading + optional action. */
.fo-section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: calc(var(--measure) + var(--space-24)); }
.fo-section-head__overline { font: var(--t-overline); letter-spacing: var(--t-overline-track); text-transform: uppercase; color: var(--text-tertiary); font-feature-settings: "case"; }

/* Copyable identifier. */
.fo-copy {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: var(--space-6); padding-inline: var(--space-2) var(--space-1);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg-subtle); font: var(--t-mono); color: var(--text-secondary);
}
.fo-copy__btn { display: inline-grid; place-items: center; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-xs); color: var(--text-tertiary); }
.fo-copy__btn[data-copied] { color: var(--success-text); }
@media (hover: hover) { .fo-copy__btn:hover { background: var(--bg-hover); color: var(--text-primary); } }

/* Switch (role="switch"). */
.fo-switch { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--t-label); color: var(--text-secondary); min-height: var(--control-sm); }
.fo-switch__track {
  position: relative; width: var(--space-8); height: var(--space-5); flex: none;
  border-radius: var(--radius-full); background: var(--bg-pressed);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-out);
}
.fo-switch__track::after {
  content: ""; position: absolute; top: var(--space-0-5); left: var(--space-0-5);
  width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full);
  background: var(--text-secondary); transition: transform var(--dur-move) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.fo-switch[aria-checked="true"] .fo-switch__track { background: var(--accent-solid); box-shadow: none; }
.fo-switch[aria-checked="true"] .fo-switch__track::after { transform: translateX(var(--space-3)); background: var(--text-on-accent); }
.fo-switch[aria-checked="true"] { color: var(--text-primary); }

/* ---- 18. Menus and popovers ---------------------------------------------- */
.fo-menu {
  min-width: calc(var(--space-32) + var(--space-16)); padding: var(--space-1);
  background: var(--bg-overlay); color: var(--text-primary);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.fo-menu[popover] { margin: 0; inset: auto; opacity: 1; transform: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete; }
.fo-menu[popover]:not(:popover-open) { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); }
@starting-style { .fo-menu[popover]:popover-open { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); } }
/* Anchoring. The trigger names an anchor and the menu points position-anchor at
   it (one name per menu, set in page CSS). The menu opens under the trigger,
   start-aligned (--end: end-aligned), and flips when it would leave the
   viewport. Without anchor positioning it opens as a centred panel, never in
   a corner. Escape and a click outside close it (popover="auto"). */
.fo-menu[popover] { max-inline-size: calc(100vw - 2 * var(--gutter)); }
@supports (anchor-name: --fo-menu) {
  .fo-menu[popover] {
    top: anchor(bottom); left: anchor(left);
    margin-block: var(--space-1);
    position-try-fallbacks: flip-block, flip-inline;
  }
  .fo-menu--end[popover] { left: auto; right: anchor(right); }
}
@supports not (anchor-name: --fo-menu) {
  .fo-menu[popover] { inset: 0; margin: auto; block-size: fit-content; }
}
/* A menu that holds a short form (filters, a date) rather than a list of items. */
.fo-menu--panel { padding: var(--space-4); }
.fo-menu__label { padding: var(--space-2) var(--space-2) var(--space-1); font: var(--t-caption); color: var(--text-tertiary); }
.fo-menu__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  height: var(--control-sm); padding-inline: var(--space-2);
  border-radius: var(--radius-xs); font: var(--t-body-sm); color: var(--text-primary); text-align: left; text-decoration: none;
}
.fo-menu__item .fo-icon { color: var(--text-tertiary); }
.fo-menu__item[aria-checked="true"] .fo-menu__check { visibility: visible; }
.fo-menu__check { margin-inline-start: auto; visibility: hidden; color: var(--accent-text); }
.fo-menu__item:focus-visible { outline: none; background: var(--bg-hover); }
.fo-menu__sep { height: var(--border-width); margin: var(--space-1) 0; background: var(--border-subtle); border: 0; }
@media (hover: hover) { .fo-menu__item:hover { background: var(--bg-hover); } }
.fo-menu__item:active { background: var(--bg-pressed); }

/* ---- 19. Tooltip ------------------------------------------------------------ */
.fo-tip { position: relative; display: inline-flex; }
.fo-tooltip {
  position: absolute; bottom: calc(100% + var(--space-2)); left: 50%;
  z-index: var(--z-tooltip);
  width: max-content; max-width: calc(var(--space-32) * 2);
  padding: var(--space-1-5) var(--space-2);
  background: var(--bg-inverse); color: var(--text-inverse);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  font: var(--t-caption); letter-spacing: var(--t-caption-track); text-align: left; white-space: normal;
  opacity: 0; translate: -50% var(--space-1); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}
.fo-tip:focus-within .fo-tooltip { opacity: 1; translate: -50% 0; }
@media (hover: hover) {
  .fo-tip:hover .fo-tooltip { opacity: 1; translate: -50% 0; transition-delay: var(--delay-tooltip); }
}

/* ---- 20. Disclosure --------------------------------------------------------- */
.fo-disclosure > summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-md); cursor: pointer; list-style: none;
  font: var(--t-label); color: var(--text-primary); border-radius: var(--radius-xs);
}
.fo-disclosure > summary::-webkit-details-marker { display: none; }
.fo-disclosure > summary .fo-disclosure__chevron { color: var(--text-tertiary); transition: transform var(--dur-move) var(--ease-out); }
.fo-disclosure[open] > summary .fo-disclosure__chevron { transform: rotate(90deg); }
.fo-disclosure__meta { margin-inline-start: auto; font: var(--t-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fo-disclosure::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size var(--dur-move) var(--ease-out), content-visibility var(--dur-move) allow-discrete;
}
.fo-disclosure[open]::details-content { block-size: auto; }
.fo-disclosure__body { padding: var(--space-2) 0 var(--space-4) calc(var(--icon-sm) + var(--space-2)); color: var(--text-secondary); font: var(--t-body-sm); }
.fo-disclosure--boxed { border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.fo-disclosure--boxed > summary { padding-inline: var(--space-3); }
.fo-disclosure--boxed .fo-disclosure__body { padding: 0 var(--space-4) var(--space-4) calc(var(--space-3) + var(--icon-sm) + var(--space-2)); }
.fo-disclosure--rule { border-top: var(--border-width) solid var(--border); }
@media (hover: hover) { .fo-disclosure > summary:hover .fo-disclosure__chevron { color: var(--text-primary); } }

/* ---- 21. Skeleton ------------------------------------------------------------ */
.fo-skeleton-group { animation: fo-fade-in var(--dur-fast) var(--ease-out) var(--delay-skeleton) both; }
.fo-skeleton {
  display: block; position: relative; overflow: hidden;
  height: var(--space-3); border-radius: var(--radius-xs); background: var(--skeleton);
}
.fo-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: fo-shimmer var(--dur-shimmer) linear infinite;
}
.fo-skeleton--title { height: var(--space-6); }
.fo-skeleton--meta { height: var(--space-2); }
.fo-skeleton--circle { border-radius: var(--radius-full); }
.fo-skeleton-words { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-1-5); }
@media (prefers-reduced-motion: reduce) { .fo-skeleton::after { animation: none; opacity: 0; } }
/* A block of word-shaped rows (FrontierUI.skeleton): 12px bars on a 24px pitch, widths set per
   row through --w so the block reads like the text it stands in for. */
.fo-skeleton-block { display: grid; gap: var(--space-5); padding-block: var(--space-2); }
.fo-skeleton-block .fo-skeleton { width: var(--w, 60%); }
.fo-skeleton-block .fo-skeleton-block__title { width: 45%; }
.fo-skeleton-block__row { display: flex; align-items: center; gap: var(--space-3); }
.fo-skeleton-block__avatar { width: var(--space-8); height: var(--space-8); flex: none; }
.fo-skeleton-block .fo-skeleton-block__avatar { width: var(--space-8); }
.fo-skeleton-block__lines { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
/* Server-rendered rows cannot set --w inline (the CSP allows no style attributes): six steps. */
.fo-skeleton-block .fo-skeleton--w1 { --w: 28%; } .fo-skeleton-block .fo-skeleton--w2 { --w: 36%; }
.fo-skeleton-block .fo-skeleton--w3 { --w: 48%; } .fo-skeleton-block .fo-skeleton--w4 { --w: 60%; }
.fo-skeleton-block .fo-skeleton--w5 { --w: 72%; } .fo-skeleton-block .fo-skeleton--w6 { --w: 84%; }

/* Spinner: only for slow work. It is in the page at once and appears after --delay-spinner
   (300ms); it keeps turning under reduced motion because it is the only progress signal. */
.fo-spinner {
  --spin: var(--text-tertiary);
  display: inline-block; flex: none; vertical-align: -0.2em;
  width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--radius-full);
  border: var(--indicator-width) solid var(--spin); border-right-color: transparent;
  animation: fo-spin 700ms linear infinite, fo-fade-in var(--dur-fast) linear var(--delay-spinner) both;
}
.fo-spinner--md { width: var(--icon-md); height: var(--icon-md); }

/* ---- 22. Empty, filtered and error states ------------------------------------ */
.fo-empty {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  border: var(--border-width) dashed var(--border-strong); border-radius: var(--radius-md);
  text-align: center;
}
.fo-empty__icon {
  display: grid; place-items: center; width: var(--space-10); height: var(--space-10); margin-bottom: var(--space-1);
  border-radius: var(--radius-full); background: var(--bg-hover); color: var(--text-tertiary);
}
.fo-empty--error .fo-empty__icon { background: var(--warning-bg); color: var(--warning-text); }
.fo-empty__title { font: var(--t-title); color: var(--text-primary); }
.fo-empty__body { font: var(--t-body-sm); color: var(--text-secondary); max-width: 44ch; }
.fo-empty__actions { margin-top: var(--space-2); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
/* Page styles never add paragraph spacing inside the block. */
.fo-empty :is(p, h2, h3) { margin: 0; }
/* Compact: an empty section inside a record or panel. The disc sits beside the text, top
   aligned, with the title centred on it, so a quiet section never outweighs its neighbours. */
.fo-empty--compact {
  grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: start;
  column-gap: var(--space-3); row-gap: 0;
  padding: var(--space-4); text-align: start;
}
.fo-empty--compact .fo-empty__icon { grid-row: 1 / span 3; width: var(--space-8); height: var(--space-8); margin: 0; }
.fo-empty--compact .fo-empty__icon .fo-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-sm-stroke); }
.fo-empty--compact .fo-empty__title { display: flex; align-items: center; min-height: var(--space-8); font: var(--t-label); letter-spacing: var(--t-label-track); }
.fo-empty--compact .fo-empty__body { max-width: none; }
.fo-empty--compact .fo-empty__actions { grid-column: 2; margin-top: var(--space-3); justify-content: flex-start; }

/* ---- 23. Drawer (inspector) and bottom sheet ----------------------------------- */
.fo-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: var(--scrim); display: none; opacity: 0;
  transition: opacity var(--dur-fast) linear, display var(--dur-fast) allow-discrete;
}
.fo-scrim.is-open { display: block; opacity: 1; }
@starting-style { .fo-scrim.is-open { opacity: 0; } }
.fo-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-scrim) + 1);
  width: min(var(--drawer-w), 100vw);
  display: none; flex-direction: column;
  background: var(--bg-overlay); color: var(--text-primary);
  border-left: var(--border-width) solid var(--border); box-shadow: var(--shadow-xl);
  opacity: 0; transform: translateX(var(--space-6));
  transition: transform var(--dur-move) var(--ease-out), opacity var(--dur-base) var(--ease-out),
              display var(--dur-move) allow-discrete;
}
/* Closed drawers are display:none so they never widen the page; the enter
   animation starts from @starting-style (FocusView: ~140px in ~256ms). */
.fo-drawer.is-open { display: flex; opacity: 1; transform: none; }
@starting-style { .fo-drawer.is-open { opacity: 0.8; transform: translateX(var(--space-6)); } }
.fo-drawer--docked { position: relative; inset: auto; z-index: auto; width: auto; display: flex; opacity: 1; transform: none; box-shadow: none; }
.fo-drawer__head { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); }
.fo-drawer__bar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); }
.fo-drawer__kind { font: var(--t-overline); letter-spacing: var(--t-overline-track); text-transform: uppercase; color: var(--text-tertiary); margin-inline-end: auto; font-feature-settings: "case"; }
.fo-drawer__identity { display: flex; align-items: center; gap: var(--space-3); }
.fo-drawer__title { font: var(--t-heading-md); letter-spacing: var(--t-heading-md-track); }
.fo-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-6) var(--space-6); overscroll-behavior: contain; }
.fo-drawer__section { padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); }
.fo-drawer__section:last-child { border-bottom: 0; }
.fo-drawer__section-title { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); font: var(--t-label); color: var(--text-primary); }
.fo-drawer__section-title .fo-count { margin-inline-start: auto; }
.fo-drawer__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-top: var(--border-width) solid var(--border); background: var(--bg-overlay); }

.fo-kv { display: grid; grid-template-columns: minmax(calc(var(--space-24) + var(--space-4)), auto) 1fr; gap: var(--space-2) var(--space-4); font: var(--t-body-sm); }
.fo-kv dt { color: var(--text-tertiary); }
.fo-kv dd { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.fo-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-scrim) + 1);
  max-height: 85dvh; display: flex; flex-direction: column;
  background: var(--bg-overlay); color: var(--text-primary);
  border-top: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-xl);
  padding-bottom: env(safe-area-inset-bottom);
  display: none; transform: translateY(100%);
  transition: transform var(--dur-move) var(--ease-out), display var(--dur-move) allow-discrete;
}
.fo-sheet.is-open { display: flex; transform: none; }
@starting-style { .fo-sheet.is-open { transform: translateY(100%); } }
.fo-sheet__grabber { width: var(--space-10); height: var(--space-1); margin: var(--space-2) auto var(--space-1); border-radius: var(--radius-full); background: var(--border-strong); }
.fo-sheet__body { overflow-y: auto; padding: var(--space-2) var(--gutter) var(--space-6); overscroll-behavior: contain; }

/* ---- 24. Dialog --------------------------------------------------------------- */
.fo-dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--space-8));
  padding: 0; margin: auto;
  background: var(--bg-overlay); color: var(--text-primary);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-move) var(--ease-out),
              overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
.fo-dialog:not([open]) { display: none; opacity: 0; transform: translateY(var(--space-2)) scale(0.98); }
@starting-style { .fo-dialog[open] { opacity: 0; transform: translateY(var(--space-4)) scale(0.98); } }
.fo-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.fo-dialog__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-2); }
.fo-dialog__title { font: var(--t-heading-md); letter-spacing: var(--t-heading-md-track); margin-inline-end: auto; }
.fo-dialog__body { padding: 0 var(--space-6) var(--space-6); font: var(--t-body-sm); color: var(--text-secondary); overflow-y: auto; }
.fo-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--border-subtle); background: var(--bg-subtle); }

/* ---- 25. Toasts ------------------------------------------------------------------ */
.fo-toast-region {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(384px, calc(100vw - 2 * var(--gutter)));
  pointer-events: none;
}
.fo-toast {
  pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--bg-overlay); color: var(--text-primary);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font: var(--t-body-sm);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@starting-style { .fo-toast { opacity: 0; transform: translateY(var(--space-2)); } }
.fo-toast.is-leaving { opacity: 0; transform: translateY(var(--space-1)); transition-duration: var(--dur-fast); transition-timing-function: var(--ease-in); }
.fo-toast__icon { margin-top: var(--space-0-5); }
.fo-toast__text { min-width: 0; }
.fo-toast p { margin: 0; }
.fo-toast__body { margin-top: var(--space-0-5); }
.fo-toast--success .fo-toast__icon { color: var(--success-text); }
.fo-toast--warning .fo-toast__icon { color: var(--warning-text); }
.fo-toast--danger .fo-toast__icon { color: var(--danger-text); }
.fo-toast--info .fo-toast__icon { color: var(--info-text); }
.fo-toast__title { font: var(--t-label); }
.fo-toast__body { color: var(--text-secondary); }
.fo-toast__action { margin-top: var(--space-1); }
.fo-toast .fo-btn--icon { --btn-h: var(--space-6); margin: calc(var(--space-0-5) * -1) 0; }
@media (max-width: 639px) {
  .fo-toast-region { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); }
}

/* ---- 26. Graph chrome (the canvas itself is field-graph.js) ----------------------- */
.fo-graph {
  position: relative; overflow: hidden;
  background: var(--graph-bg);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
}
.fo-graph__status {
  position: absolute; left: var(--space-4); top: var(--space-3);
  font: var(--t-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.fo-graph-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  font: var(--t-caption); letter-spacing: var(--t-caption-track); color: var(--text-secondary);
}
.fo-graph-legend__item { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.fo-graph-legend__count { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fo-swatch { --sw-size: calc(var(--space-2) + var(--space-0-5)); width: var(--sw-size); height: var(--sw-size); flex: none; background: var(--sw); }
.fo-swatch--person { border-radius: var(--radius-full); background: transparent; box-shadow: inset 0 0 0 var(--indicator-width) var(--kind-person); }
.fo-swatch--org { border-radius: var(--radius-logo); }
.fo-swatch--work { transform: rotate(45deg) scale(0.85); border-radius: var(--border-width); }
.fo-swatch--edge { width: var(--space-4); height: var(--indicator-width); border-radius: var(--radius-full); }
.fo-swatch--edge-dashed { width: var(--space-4); height: var(--indicator-width); background: repeating-linear-gradient(90deg, var(--sw) 0 var(--space-1), transparent var(--space-1) var(--space-2)); }
.fo-graph-toolbar {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  display: flex; gap: var(--space-0-5); padding: var(--space-0-5);
  background: var(--bg-overlay); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.fo-graph-toolbar .fo-btn { --btn-h: var(--control-sm); border-radius: var(--radius-sm); }
.fo-graph-toolbar__sep { width: var(--border-width); margin-block: var(--space-1); background: var(--border); }
.fo-graph-label {
  position: absolute; transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: calc(var(--space-32) + var(--space-8));
  padding: var(--space-0-5) var(--space-2);
  background: var(--graph-label-bg); color: var(--text-primary);
  border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-xs);
  font: var(--weight-medium) var(--t-caption-size)/var(--t-caption-lh) var(--font-sans);
  white-space: nowrap; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fo-graph-label > span { overflow: hidden; text-overflow: ellipsis; }
.fo-graph-label.is-selected { box-shadow: 0 0 0 var(--indicator-width) var(--accent-solid), var(--shadow-sm); }
.fo-graph-label.is-dim { opacity: 0.25; }
.fo-graph-label__meta { color: var(--text-tertiary); font-weight: var(--weight-regular); }

/* ---- 27. Error page (404 / unavailable record) ---------------------------------------- */
/* Overline code, display title, one sentence, the search field (prefilled from the address),
   the closest records by name, then three ways on. Document template: it reads in .l-doc. */
.fo-error-page { padding-block: var(--space-24) var(--space-16); }
.fo-error-page__code { font: var(--t-overline); letter-spacing: var(--t-overline-track); text-transform: uppercase; font-feature-settings: "case"; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fo-error-page__title { margin-top: var(--space-3); }
.fo-error-page__lede { margin-top: var(--space-3); max-width: var(--measure-narrow); font: var(--t-body-lg); letter-spacing: var(--t-body-lg-track); color: var(--text-secondary); }
.fo-error-page__search { margin-top: var(--space-8); }
.fo-error-page__matches { margin-top: var(--space-6); }
.fo-error-page__matches-label { padding-inline: var(--space-3); margin-bottom: var(--space-1); font: var(--t-overline); letter-spacing: var(--t-overline-track); text-transform: uppercase; font-feature-settings: "case"; color: var(--text-tertiary); }
.fo-suggest { list-style: none; margin: 0 calc(var(--space-3) * -1); padding: 0; }
.fo-suggest .fo-option { grid-template-columns: auto minmax(0, 1fr) auto; }
.fo-suggest .fo-option__go { color: var(--text-tertiary); transition: transform var(--dur-move) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.fo-suggest .fo-option:active { background: var(--bg-pressed); }
.fo-suggest .fo-option:focus-visible { outline-offset: calc(var(--indicator-width) * -1); }
@media (hover: hover) {
  .fo-suggest .fo-option:hover { background: var(--bg-hover); }
  .fo-suggest .fo-option:hover .fo-option__go { transform: translateX(2px); color: var(--text-secondary); }
}
.fo-error-page__links { list-style: none; padding: 0; margin-top: var(--space-8); display: grid; gap: var(--space-1); justify-items: start; }
.fo-error-page__links .fo-link { display: inline-flex; align-items: center; min-height: var(--control-md); }
.fo-error-page__detail { margin-top: var(--space-6); font: var(--t-body-sm); color: var(--text-tertiary); }
@media (max-width: 639px) { .fo-error-page { padding-block: var(--space-12); } }
@media (pointer: coarse) { .fo-error-page__links .fo-link { min-height: var(--control-lg); } }