/* SPDX-FileCopyrightText: Cadasto B.V. */
/* SPDX-License-Identifier: BUSL-1.1 */
/* FerroUI: the role tokens and the component classes of the FerroHEALTH
   consoles. Plain CSS with cascade layers, so a console loads it as it
   stands, beside its own Tailwind build or imported into it, and needs no
   scan of this crate: every class a FerroUI component writes is defined
   here, prefixed `fui-`. A console sets its brand in a theme file of its own
   (themes/*.css): five custom properties per theme and the two accents its
   theme previews draw.

   The layer order is Tailwind 4's, declared first, so whichever stylesheet
   loads first the order is the same and a console's utilities still win.
   https://developer.mozilla.org/en-US/docs/Web/CSS/@layer */
@layer theme, base, components, utilities;

/* The role layer. A component names a role and never a palette entry, so the
   palette is measured once and a theme is one block. The neutrals are
   Tailwind's slate, the status families emerald, amber, red and blue.
   tests/it/contrast.rs holds every pairing to WCAG 2.2 AA in every theme of
   every brand (https://www.w3.org/TR/WCAG22/#contrast-minimum). */
@layer theme {
  :root {
    color-scheme: light;
    /* The top bar's height from the first breakpoint up, where it is one row
       and stays in view; the scroll padding keeps a focused control out from
       under it (WCAG 2.2 SC 2.4.11). */
    --bar: 3.5rem;
    --surface: #f8fafc;
    --surface-raised: #ffffff;
    --surface-sunken: #f1f5f9;
    --surface-head: #f8fafc;
    --edge: #e2e8f0;
    --edge-strong: #cbd5e1;
    /* The edge of a control, held to 3:1 against its ground
       (https://www.w3.org/TR/WCAG22/#non-text-contrast). */
    --edge-control: #64748b;
    --ink: #0f172a;
    --muted: #526073;
    /* The accent a brand overrides; the default is the FerroHEALTH steel. */
    --accent: #3f6070;
    --accent-hover: #2f4a57;
    --accent-ink: #ffffff;
    --accent-tint: rgb(63 96 112 / 0.1);
    --focus: #3f6070;
    /* The accents the theme previews in Your preferences draw, one per
       theme, whatever theme the page itself is in; a brand's theme file
       sets its own. */
    --preview-accent-light: #3f6070;
    --preview-accent-dark: #93b4c4;
    --ok: #047857;
    --ok-ground: #ecfdf5;
    --ok-dot: #10b981;
    --warn: #b45309;
    --warn-ground: #fffbeb;
    --warn-dot: #f59e0b;
    --bad: #b91c1c;
    --bad-ground: #fef2f2;
    --bad-dot: #ef4444;
    --info: #1d4ed8;
    --info-ground: #eff6ff;
    --info-dot: #3b82f6;
    --neutral: #334155;
    --neutral-ground: #f1f5f9;
    --neutral-dot: #94a3b8;
    --scrim: rgb(2 6 23 / 0.4);
    --syntax-key: #1d4ed8;
    --syntax-string: #065f46;
    --syntax-number: #9a3412;
    --syntax-keyword: #6d28d9;
    --syntax-comment: #475569;
    --syntax-tag: #9f1239;
    --syntax-attribute: #92400e;
    --syntax-path: #155e75;
    --syntax-parameter: #a21caf;
    --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 1px 3px 0 rgb(15 23 42 / 0.04);
    /* The elevation of a dialog, a menu or a panel over the page. */
    --shadow-overlay: 0 12px 32px -4px rgb(15 23 42 / 0.22), 0 4px 12px -4px rgb(15 23 42 / 0.14);
    --radius-card: 0.5rem;
    --radius-control: 0.375rem;
    /* The six steps of type, FerroEHR's scale: a measure's value, the page
       title, a heading, the body, the code face and the micro step of table
       heads and labels; and the four steps of space. A component names a
       step, never a size. */
    --text-display: 1.5rem;
    --text-title: 1.25rem;
    --text-heading: 1rem;
    --text-body: 0.875rem;
    --text-small: 0.8125rem;
    --text-micro: 0.75rem;
    --leading-display: 2rem;
    --leading-title: 1.75rem;
    --leading-heading: 1.5rem;
    --leading-body: 1.25rem;
    --leading-small: 1.125rem;
    --leading-micro: 1rem;
    --leading-code: 1.375rem;
    --space-tight: 0.25rem;
    --space-default: 0.5rem;
    --space-loose: 1rem;
    --space-section: 2rem;
    --row-y: 0.5rem;
    /* One control height per size: a button, an input and a select share
       it. */
    --control: 2.25rem;
    --control-small: 1.875rem;
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --motion-state: 120ms;
  }

  /* The compact density: the same steps, tighter, chosen by `data-density`
     on <html>. */
  :root[data-density="compact"] {
    --space-tight: 0.125rem;
    --space-default: 0.375rem;
    --space-loose: 0.625rem;
    --space-section: 1rem;
    --row-y: 0.25rem;
    --control: 2rem;
    --control-small: 1.75rem;
  }

  /* The dark block, written twice: once for an operator who chose dark, and
     once for one who follows a system that asks for it. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface: #0b1020;
    --surface-raised: #0f172a;
    --surface-sunken: #1e293b;
    --surface-head: #131c31;
    --edge: #1e293b;
    --edge-strong: #334155;
    --edge-control: #748297;
    --ink: #f1f5f9;
    --muted: #94a3b8;
    --accent: #93b4c4;
    --accent-hover: #b8cfda;
    --accent-ink: #0f172a;
    --accent-tint: rgb(147 180 196 / 0.12);
    --focus: #93b4c4;
    --ok: #6ee7b7;
    --ok-ground: rgb(16 185 129 / 0.12);
    --ok-dot: #34d399;
    --warn: #fcd34d;
    --warn-ground: rgb(245 158 11 / 0.12);
    --warn-dot: #fbbf24;
    --bad: #fca5a5;
    --bad-ground: rgb(239 68 68 / 0.12);
    --bad-dot: #f87171;
    --info: #93c5fd;
    --info-ground: rgb(59 130 246 / 0.14);
    --info-dot: #60a5fa;
    --neutral: #cbd5e1;
    --neutral-ground: #1e293b;
    --neutral-dot: #94a3b8;
    --scrim: rgb(2 6 23 / 0.7);
    --syntax-key: #93c5fd;
    --syntax-string: #6ee7b7;
    --syntax-number: #fdba74;
    --syntax-keyword: #c4b5fd;
    --syntax-comment: #94a3b8;
    --syntax-tag: #fda4af;
    --syntax-attribute: #fcd34d;
    --syntax-path: #67e8f9;
    --syntax-parameter: #f0abfc;
    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-overlay: 0 12px 32px -4px rgb(0 0 0 / 0.6), 0 4px 12px -4px rgb(0 0 0 / 0.4);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"], [data-theme="dark"]) {
      color-scheme: dark;
      --surface: #0b1020;
      --surface-raised: #0f172a;
      --surface-sunken: #1e293b;
      --surface-head: #131c31;
      --edge: #1e293b;
      --edge-strong: #334155;
      --edge-control: #748297;
      --ink: #f1f5f9;
      --muted: #94a3b8;
      --accent: #93b4c4;
      --accent-hover: #b8cfda;
      --accent-ink: #0f172a;
      --accent-tint: rgb(147 180 196 / 0.12);
      --focus: #93b4c4;
      --ok: #6ee7b7;
      --ok-ground: rgb(16 185 129 / 0.12);
      --ok-dot: #34d399;
      --warn: #fcd34d;
      --warn-ground: rgb(245 158 11 / 0.12);
      --warn-dot: #fbbf24;
      --bad: #fca5a5;
      --bad-ground: rgb(239 68 68 / 0.12);
      --bad-dot: #f87171;
      --info: #93c5fd;
      --info-ground: rgb(59 130 246 / 0.14);
      --info-dot: #60a5fa;
      --neutral: #cbd5e1;
      --neutral-ground: #1e293b;
      --neutral-dot: #94a3b8;
      --scrim: rgb(2 6 23 / 0.7);
      --syntax-key: #93c5fd;
      --syntax-string: #6ee7b7;
      --syntax-number: #fdba74;
      --syntax-keyword: #c4b5fd;
      --syntax-comment: #94a3b8;
      --syntax-tag: #fda4af;
      --syntax-attribute: #fcd34d;
      --syntax-path: #67e8f9;
      --syntax-parameter: #f0abfc;
      --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3);
      --shadow-overlay: 0 12px 32px -4px rgb(0 0 0 / 0.6), 0 4px 12px -4px rgb(0 0 0 / 0.4);
    }
  }
}

/* The elements every console draws, and what server-rendered HTML relies on
   as it stands. */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* The elements Leptos islands mode wraps an island and its children in
     draw no box of their own, so a flex or grid parent lays out what an
     island draws as its own children; each container's rhythm between its
     children reaches through them too. */
  leptos-island,
  leptos-children {
    display: contents;
  }

  html {
    background: var(--surface);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* From the first breakpoint up the top bar stays in view, so a control the
     keyboard moves to is scrolled clear of it (WCAG 2.2 SC 2.4.11). */
  @media (width >= 48rem) {
    html {
      scroll-padding-top: calc(var(--bar) + var(--space-default));
    }
  }

  body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  /* A heading wraps a long word, a German or Dutch compound, hyphenated in
     the page's language where the browser knows its words and broken where
     the word alone cannot fit its line, so it never widens the page (WCAG
     2.2 SC 1.4.10) and never splits a word that fits. */
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-weight: 600;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: var(--text-title);
    line-height: var(--leading-title);
  }

  h2 {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }

  h3,
  h4 {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  p {
    margin: 0;
  }

  /* A link is told by its colour and takes its underline under the
     pointer; a link inside running prose keeps the underline, so it is told
     from the words around it by more than colour (WCAG 2.2 SC 1.4.1). Every
     component that draws an anchor sets its own decoration. */
  a {
    color: var(--accent);
    text-decoration: none;
    text-underline-offset: 2px;
  }

  a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
  }

  :is(p, li, dd, figcaption) > a:not([class]) {
    text-decoration: underline;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  code {
    overflow-wrap: anywhere;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  /* A visible focus indicator on every control, at 3:1 or more against each
     ground (https://www.w3.org/TR/WCAG22/#non-text-contrast). */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  [hidden] {
    display: none !important;
  }

  /* State changes only, and none for a reader who asks for less
     (https://www.w3.org/TR/WCAG22/#animation-from-interactions). */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* The same for a reader who chose Reduce motion in Your preferences,
     which the console writes as data-motion on <html>. */
  :root[data-motion="reduce"] *,
  :root[data-motion="reduce"] *::before,
  :root[data-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@layer components {
  /* Text that a screen reader reads and the page does not show. */
  .fui-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* The operator's name, visually hidden below 48 rem, where the top bar
     wraps and the icon and the chevron name the menu; the name still names
     the button. */
  @media (width < 48rem) {
    .fui-operator-name {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }

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

  .fui-mono {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* A long identifier or URL that breaks anywhere rather than widen the
     page (WCAG 2.2 SC 1.4.10). */
  .fui-break {
    overflow-wrap: anywhere;
  }

  /* A bulleted list of prose. */
  .fui-bullets {
    margin: 0;
    padding-inline-start: 1.25rem;
    list-style: disc;
  }

  .fui-bullets > li {
    overflow-wrap: break-word;
  }

  .fui-bullets > li + li {
    margin-top: var(--space-tight);
  }

  /* Tiles in a row that wraps: a small bordered box per thing. */
  .fui-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-default);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-tile {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: 0.375rem 0.75rem;
  }

  /* A checkbox drawn as a switch: the knob's place says on or off as well
     as its colour. */
  .fui-check > input.fui-switch,
  input.fui-switch {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    border: 1px solid var(--edge-control);
    border-radius: 9999px;
    background: var(--surface-sunken);
    cursor: pointer;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-check > input.fui-switch::before,
  input.fui-switch::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    background: var(--edge-control);
    transition: transform var(--motion-state) ease-out;
  }

  .fui-check > input.fui-switch:hover,
  input.fui-switch:hover {
    border-color: var(--ink);
  }

  .fui-check > input.fui-switch:checked,
  input.fui-switch:checked {
    border-color: var(--accent);
    background: var(--accent);
  }

  .fui-check > input.fui-switch:checked::before,
  input.fui-switch:checked::before {
    transform: translateX(1rem);
    background: var(--accent-ink);
  }

  .fui-check > input.fui-switch:disabled,
  input.fui-switch:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Checkbox chips: a real checkbox and its label in a round box, edged in
     the accent once ticked. */
  .fui-chip-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-default);
  }

  .fui-chip-check {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--edge-strong);
    border-radius: 9999px;
    background: var(--surface-raised);
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-chip-check:hover {
    background: var(--surface-sunken);
  }

  .fui-chip-check:has(:checked) {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-chip-check:has(:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .fui-chip-check > input {
    margin: 0;
    accent-color: var(--accent);
  }

  /* The glyph and word before a segmented group's choices. */
  .fui-segmented-prefix {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    padding-inline: var(--space-default);
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
  }

  /* A number is one word: it never breaks between its digits or its
     group marks, a stacked phone card included. */
  .fui-num,
  .fui-num > span,
  :is(.fui-list-count, .fui-tab-count, .fui-nav-count, .fui-nav-badge) {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .fui-num {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .fui-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
  }

  /* Text a step smaller, in the muted ink. */
  .fui-small {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* Children in a wrapping row, centred on the cross axis. */
  .fui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
  }

  /* A wrapping row whose first child starts and whose last ends. */
  .fui-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default) var(--space-loose);
  }

  /* Shown from 40 rem up, and below it, so a top bar can move a control
     into its menu on a narrow screen. */
  @media (width < 40rem) {
    .fui-wide-only {
      display: none !important;
    }
  }

  @media (width >= 40rem) {
    .fui-narrow-only {
      display: none !important;
    }
  }

  /* Shown from 64 rem up, where a top bar with a search box has room for a
     status pill's full words beside its controls. */
  @media (width < 64rem) {
    .fui-roomy-only {
      display: none !important;
    }
  }

  /* ---- The shell ---- */

  .fui-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
  }

  .fui-skip {
    position: absolute;
    top: var(--space-default);
    left: var(--space-default);
    z-index: 60;
    transform: translateY(-200%);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    padding: var(--space-default) var(--space-loose);
    color: var(--accent);
    text-decoration: none;
  }

  .fui-skip:focus {
    transform: none;
  }

  .fui-topbar {
    border-bottom: 1px solid var(--edge);
    background: var(--surface-raised);
  }

  @media (width >= 48rem) {
    .fui-topbar {
      position: sticky;
      top: 0;
      z-index: 30;
    }
  }

  .fui-topbar-row {
    display: flex;
    min-height: 3.5rem;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) 0.75rem;
    padding: var(--space-default) var(--space-loose);
  }

  /* The start and the end share one row at every width: the lockup's
     accent word folds away first, then the end's status words shorten to an
     ellipsis; only a search box takes a row of its own below 48rem. */
  .fui-topbar-row > .fui-lockup {
    min-width: 0;
    flex: 0 1 auto;
  }

  .fui-topbar-row > .fui-lockup > .fui-lockup-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (width < 30rem) {
    .fui-topbar-row > .fui-lockup .fui-lockup-accent {
      display: none;
    }
  }

  @media (width >= 48rem) {
    .fui-topbar-row {
      height: calc(var(--bar) - 1px);
      flex-wrap: nowrap;
      padding-block: 0;
    }
  }

  /* The middle of the top bar: a search box in the free width, capped and
     centred; below 48rem it takes a row of its own under the lockup. */
  .fui-topbar-middle {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: center;
  }

  /* From 48rem the search gives up its width first: it shrinks to 12rem
     before the end does, and the end then shortens the operator's name. */
  @media (width >= 48rem) {
    .fui-topbar-middle {
      order: 0;
      width: auto;
      min-width: 12rem;
      flex: 1 1000 auto;
    }

    .fui-topbar-middle + .fui-topbar-end {
      margin-inline-start: 0;
    }
  }

  .fui-search {
    display: flex;
    width: 100%;
    max-width: 28rem;
    align-items: center;
    gap: var(--space-default);
  }

  .fui-search .fui-input {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* The button keeps its word on one line; the input gives way. */
  .fui-search .fui-button {
    flex: none;
    white-space: nowrap;
  }

  .fui-topbar-end {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    margin-inline-start: auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-default);
  }

  .fui-topbar-end > *,
  .fui-topbar-end > :where(leptos-island, leptos-children) > * {
    flex-shrink: 0;
  }

  /* The operator's button is the one part of the end that gives way: its
     name ends in an ellipsis, and the button's title carries all of it. */
  .fui-topbar-end > .fui-operator {
    min-width: 0;
    flex-shrink: 1;
  }

  /* From 48rem the end takes its own width, so the search, not the end, is
     what gives way; on a phone the search has a row of its own and the end
     shares the lockup's row. */
  @media (width >= 48rem) {
    .fui-topbar-end {
      flex: 0 1 auto;
    }
  }

  .fui-operator-name {
    min-width: 0;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A status pill in the end draws its shape before its words; below 64 rem
     the top bar's status keeps the shape alone (`fui-topbar-status`). */
  .fui-topbar-end .fui-pill::before {
    display: inline-block;
    margin-inline-end: 0.375rem;
    vertical-align: middle;
  }

  .fui-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-default);
    color: var(--ink);
    text-decoration: none;
  }

  .fui-lockup:hover {
    color: var(--ink);
  }

  .fui-lockup-name {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .fui-lockup-accent {
    color: var(--accent);
  }

  /* A product's mark when it has no drawn one: its glyph in the accent,
     beside the wordmark, as FerroEHR's lockup draws its own. */
  .fui-mark {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  /* A console's own drawn mark: the light image, and the dark one under the
     dark theme, chosen by the stylesheet before any script runs. */
  .fui-brand-mark {
    display: inline-flex;
    flex-shrink: 0;
  }

  .fui-brand-mark > img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }

  .fui-brand-mark > .fui-brand-dark {
    display: none;
  }

  :root[data-theme="dark"] .fui-brand-mark > .fui-brand-light {
    display: none;
  }

  :root[data-theme="dark"] .fui-brand-mark > .fui-brand-dark {
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"], [data-theme="dark"]) .fui-brand-mark > .fui-brand-light {
      display: none;
    }

    :root:not([data-theme="light"], [data-theme="dark"]) .fui-brand-mark > .fui-brand-dark {
      display: block;
    }
  }

  /* A square button holding an icon alone, its name in `aria-label`: the
     drawer's Menu, the theme menu, a copy. */
  .fui-icon-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0;
    color: var(--muted);
    transition: color var(--motion-state) ease-out, background-color var(--motion-state) ease-out;
  }

  .fui-icon-button:hover,
  .fui-icon-button[aria-expanded="true"] {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  /* An icon button that cannot be used, such as a picker's arrow past the
     field's last allowed month: faded, no pointer, no hover ground. */
  .fui-icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .fui-icon-button:disabled:hover {
    background: transparent;
    color: var(--muted);
  }

  .fui-body {
    display: flex;
    flex: 1;
  }

  .fui-main {
    min-width: 0;
    flex: 1;
    padding: 1.5rem var(--space-loose);
  }

  @media (width >= 48rem) {
    .fui-main {
      padding: 1.5rem;
    }
  }

  .fui-column {
    max-width: 80rem;
    margin-inline: auto;
  }

  .fui-stack {
    display: grid;
    gap: var(--space-loose);
  }

  /* A page header in a stack leaves the stack's gap below it and no more. */
  .fui-stack > .fui-page-header,
  .fui-well > .fui-page-header {
    margin-block-end: 0;
  }

  /* A part of a stack or a grid never grows past its track for a long
     unbroken line inside it (a URL, a scrolling code box): a grid item's
     automatic minimum is its content, which would widen the page. */
  .fui-stack > *,
  .fui-grid > *,
  .fui-stack > :where(leptos-island, leptos-children) > *,
  .fui-grid > :where(leptos-island, leptos-children) > * {
    min-width: 0;
  }

  .fui-stack.fui-gap-tight {
    gap: var(--space-tight);
  }

  .fui-stack.fui-gap-default {
    gap: var(--space-default);
  }

  .fui-stack.fui-gap-section {
    gap: var(--space-section);
  }

  /* Three reading panes, a list beside its item, a form beside its answer:
     side by side from 64rem, one above the other below it. */
  .fui-panes,
  .fui-master-detail,
  .fui-main-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-loose);
    align-items: start;
  }

  .fui-pane {
    min-width: 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    padding: var(--space-loose);
    box-shadow: var(--shadow-card);
  }

  .fui-master,
  .fui-detail,
  .fui-main-part,
  .fui-aside-part {
    min-width: 0;
  }

  @media (width >= 64rem) {
    .fui-panes {
      grid-template-columns: 20rem minmax(0, 1fr) 24rem;
      align-items: stretch;
    }

    .fui-pane {
      max-height: clamp(24rem, 100vh - 20rem, 48rem);
      overflow: auto;
      overscroll-behavior: contain;
    }

    .fui-master-detail {
      grid-template-columns: 24rem minmax(0, 1fr);
    }

    .fui-main-aside {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }

  /* Items one under the other, a hairline between and none after the
     last. */
  .fui-divided {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-divided > li {
    padding-block: var(--row-y);
  }

  .fui-divided > li + li {
    border-top: 1px solid var(--edge);
  }

  /* A list that runs to a panel's edges keeps its words off them, in line
     with the panel's title. */
  .fui-panel > .fui-divided > li {
    padding-inline: var(--space-loose);
  }

  /* A row of fields with columns of its own from 40rem; an action sits at
     the foot of its column, level with the controls. */
  .fui-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-default) 0.75rem;
  }

  /* A field and its actions, such as a value and its remove button, keep
     one row at every width: the actions are short, and stacked on a phone
     each would sit alone under its field. */
  .fui-field-row-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  /* An action in a row of fields keeps its own width when the row stacks. */
  .fui-field-row > .fui-button {
    justify-self: start;
  }

  @media (width >= 40rem) {
    .fui-field-row {
      align-items: end;
    }

    .fui-field-row-halves {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fui-field-row-narrow-wide {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .fui-field-row-code-display {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto;
    }

    .fui-field-row-definition {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto;
    }
  }

  /* A proportion as an SVG whose bar length is an attribute, so the strict
     style policy holds; the bar is the accent on the sunken ground. */
  .fui-proportion {
    display: block;
    width: 100%;
    min-width: 4rem;
    height: 0.375rem;
  }

  .fui-proportion-ground {
    fill: var(--surface-sunken);
  }

  .fui-proportion-fill {
    fill: var(--accent);
  }

  /* A grid whose columns, at least 16 rem wide, share the whole row: two
     cards of four columns' room each take half, so no row is left half
     empty. */
  .fui-grid {
    display: grid;
    gap: var(--space-loose);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  /* A grid whose cards keep their own heights, for cards of unlike
     length side by side. */
  .fui-grid.fui-grid-start {
    align-items: start;
  }

  /* The stat cards across the top of a dashboard, closer together. */
  /* Stat tiles take two to a row on a phone: a tile holds a figure and a
     short label, and one per row leaves most of each empty. */
  .fui-grid-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 0.75rem;
  }

  /* One compact stat per row on a phone, so every label stays on one
     line. */
  @media (width < 30rem) {
    .fui-grid-stats {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-default);
    }
  }

  .fui-footer {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    border-top: 1px solid var(--edge);
    background: var(--surface-raised);
    padding: var(--space-default) var(--space-loose);
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* A short link label never breaks inside itself; the line wraps before it. */
  .fui-footer a {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
  }

  .fui-footer a:hover {
    color: var(--ink);
  }

  .fui-centred {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem var(--space-loose);
    text-align: center;
  }

  /* The navigation: a drawer the browser opens as a modal dialog below the
     first breakpoint, and from it the closed dialog drawn as the column
     beside the page. */
  .fui-sidebar {
    flex-shrink: 0;
    background: var(--surface-raised);
    padding: 0.75rem;
    color: var(--ink);
  }

  .fui-sidebar[open] {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(18rem, 85vw);
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--edge);
    overflow-y: auto;
  }

  /* The drawer's Close stands apart from the navigation by the loose gap
     and the rule the groups take. */
  .fui-sidebar > .fui-drawer-only {
    margin-block-end: 0.375rem;
  }

  @media (width < 48rem) {
    .fui-sidebar > .fui-drawer-only + .fui-sidebar-nav > .fui-nav-group:first-child + .fui-nav-list,
    .fui-sidebar > .fui-drawer-only + .fui-sidebar-nav > leptos-children > .fui-nav-group:first-child + .fui-nav-list {
      border-top: 1px solid var(--edge);
      padding-block-start: 0.375rem;
    }
  }

  .fui-sidebar::backdrop {
    background: var(--scrim);
  }

  @media (width >= 48rem) {
    .fui-sidebar {
      display: block;
      position: sticky;
      inset: var(--bar) auto auto auto;
      align-self: stretch;
      width: 13rem;
      height: auto;
      max-height: calc(100dvh - var(--bar));
      margin: 0;
      overflow-y: auto;
      border: 0;
      border-right: 1px solid var(--edge);
    }
  }

  /* A group's heading names its list for assistive technology; the eye
     reads the groups by the hairline between them, as FerroEHR's
     navigation draws them. */
  .fui-nav-group {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fui-nav-list {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: var(--space-tight);
    list-style: none;
  }

  .fui-nav-list + .fui-nav-group + .fui-nav-list {
    margin-block-start: 0.375rem;
    border-top: 1px solid var(--edge);
    padding-block-start: 0.375rem;
  }

  /* A navigation entry: muted until the pointer is on it, and while it is
     the page, on the accent's tint in the accent and the heavier weight. */
  .fui-nav-entry {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--radius-control);
    padding: var(--space-default) 0.75rem;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--motion-state) ease-out, background-color var(--motion-state) ease-out;
  }

  .fui-nav-entry:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .fui-nav-entry[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
  }

  /* An entry's words wrap, a long translated word broken at a hyphenation
     point or anywhere, so the column never scrolls sideways (WCAG 2.2
     SC 1.4.10). */
  .fui-nav-word {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* ---- Buttons ---- */

  /* A label that cannot fit its column breaks between words, so a button
     never makes a phone page scroll sideways (WCAG 2.2 SC 1.4.10); the glyph
     keeps its place beside the first line, in a box one line tall. */
  .fui-button {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    min-height: var(--control);
    padding: 0.375rem 0.75rem;
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--leading-body);
    text-align: start;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    cursor: pointer;
    transition: color var(--motion-state) ease-out, background-color var(--motion-state) ease-out,
      border-color var(--motion-state) ease-out;
  }

  .fui-button-primary {
    background: var(--accent);
    color: var(--accent-ink);
  }

  .fui-button-primary:hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
  }

  .fui-button-secondary {
    border-color: var(--edge-strong);
    background: var(--surface-raised);
    color: var(--ink);
  }

  .fui-button-secondary:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .fui-button-danger {
    border-color: color-mix(in srgb, var(--bad) 40%, transparent);
    background: transparent;
    color: var(--bad);
  }

  .fui-button-danger:hover {
    background: var(--bad-ground);
    color: var(--bad);
  }

  /* The confirming action of a danger dialog: solid in the bad tone. */
  .fui-button-destructive,
  .fui-dialog-danger .fui-dialog-actions .fui-button-danger {
    border-color: var(--bad);
    background: var(--bad);
    color: var(--surface-raised);
  }

  .fui-button-destructive:hover,
  .fui-dialog-danger .fui-dialog-actions .fui-button-danger:hover {
    border-color: var(--bad);
    background: color-mix(in srgb, var(--bad) 85%, var(--ink));
    color: var(--surface-raised);
  }

  .fui-button-ghost {
    background: transparent;
    color: var(--muted);
  }

  .fui-button-ghost:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  /* A control that cannot be used keeps its variant's look, faded, and takes
     no pointer, so it is never read as an enabled secondary action; an
     inactive control is exempt from the contrast minimum (WCAG 2.2 SC
     1.4.3). */
  .fui-button:disabled,
  .fui-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .fui-button-small {
    min-height: var(--control-small);
    padding: var(--space-tight) 0.625rem;
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-button > .fui-icon {
    height: var(--leading-body);
  }

  .fui-button-small > .fui-icon {
    height: var(--leading-small);
  }

  /* The segmented control, after FerroEHR's format selector: joined
     segments in one edged box, the pressed one filled with the accent; a
     pressed segment is also `aria-pressed` (or a checked radio), so a
     reader is told which is chosen in words. */
  .fui-segmented {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
  }

  .fui-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.375rem 0.75rem;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 500;
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: color var(--motion-state) ease-out, background-color var(--motion-state) ease-out;
  }

  /* Every segment draws its start and top edge 1px outside itself, which
     the group's clip hides on its first row and column, so a row that
     wraps, or a stack, keeps a hairline between every two segments and a
     long word wraps inside its segment (WCAG 2.2 SC 1.4.10). */
  .fui-segmented > .fui-segment {
    margin-block-start: -1px;
    margin-inline-start: -1px;
    border-block-start: 1px solid var(--edge-strong);
    border-inline-start: 1px solid var(--edge-strong);
  }

  .fui-segmented-prefix + .fui-segment {
    border-inline-start-color: transparent;
  }

  .fui-segment:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  /* Every rule that fills a segment with the accent also sets
     `--segment-ring` to the accent ink, and every rule that empties one sets
     it back to transparent. */
  .fui-segment[aria-pressed="true"],
  .fui-segment[aria-current="true"],
  .fui-segment:has(> input:checked) {
    --segment-ring: var(--accent-ink);
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* The focus ring of a segment, pressed or not: the focus colour on the
     segment's edge against the surface, and inside it, on a pressed
     segment, a band of the accent ink against the fill, since the focus
     colour is the accent in every brand (WCAG 2.2 SC 1.4.11, SC 2.4.7). */
  .fui-segment:focus-visible,
  .fui-segment:has(> input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--segment-ring, transparent);
  }

  /* ---- Status ---- */

  .fui-tone-ok {
    --tone: var(--ok);
    --tone-ground: var(--ok-ground);
    --tone-dot: var(--ok-dot);
  }

  .fui-tone-warn {
    --tone: var(--warn);
    --tone-ground: var(--warn-ground);
    --tone-dot: var(--warn-dot);
  }

  .fui-tone-bad {
    --tone: var(--bad);
    --tone-ground: var(--bad-ground);
    --tone-dot: var(--bad-dot);
  }

  .fui-tone-info {
    --tone: var(--info);
    --tone-ground: var(--info-ground);
    --tone-dot: var(--info-dot);
  }

  .fui-tone-neutral {
    --tone: var(--neutral);
    --tone-ground: var(--neutral-ground);
    --tone-dot: var(--neutral-dot);
  }

  .fui-tone-accent {
    --tone: var(--accent);
    --tone-ground: var(--accent-tint);
    --tone-dot: var(--accent);
  }

  /* A status pill: the tone's dot and the word in the tone, on the raised
     ground inside a hairline, as FerroEHR's status chip reads. */
  .fui-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--edge);
    border-radius: 9999px;
    background: var(--surface-raised);
    padding: var(--space-tight) 0.625rem;
    color: var(--tone);
    font-size: var(--text-micro);
    font-weight: 500;
    line-height: var(--leading-micro);
    white-space: nowrap;
  }

  .fui-pill::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--tone-dot);
  }

  /* A chip: a short code or name on the accent's tint, in the code face
     (an API group, a tag, a scope). */
  .fui-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: var(--accent-tint);
    padding: 0.125rem var(--space-default);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    white-space: nowrap;
  }

  /* A badge: a word on the tone's ground, with no dot. */
  .fui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    border-radius: var(--radius-control);
    background: var(--tone-ground);
    padding: 0.125rem var(--space-default);
    color: var(--tone);
    font-size: var(--text-micro);
    font-weight: 500;
    line-height: var(--leading-micro);
    white-space: nowrap;
  }

  /* A status indicator: an icon and a word, with an optional detail. */
  .fui-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-control);
    background: var(--tone-ground);
    padding: var(--space-tight) var(--space-default);
    color: var(--tone);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 500;
  }

  /* The detail reads in the status's own tone, which the contrast test
     holds on its ground, at the body weight. */
  .fui-status-detail {
    color: var(--tone);
    font-weight: 400;
  }

  /* A banner across the page: the sandbox or development notice. */
  .fui-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-default);
    border-bottom: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
    background: var(--tone-ground);
    padding: var(--space-default) var(--space-loose);
    color: var(--tone);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* The glyph keeps its size beside text that wraps. */
  .fui-banner > .fui-icon {
    flex-shrink: 0;
  }

  /* The text wraps a word longer than the banner (a URL, an identifier, a
     long compound in a translation), so nothing runs past the screen
     (WCAG 2.2 SC 1.4.10). */
  .fui-banner > p {
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* The link a banner ends with keeps the banner's tone, underlined. */
  .fui-banner a {
    color: inherit;
    text-decoration: underline;
  }

  /* ---- Surfaces ---- */

  .fui-page-header {
    margin-block-end: 1.5rem;
  }

  .fui-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .fui-page-title-mono {
    font-family: var(--font-mono);
  }

  /* A title longer than its line, a code or a compound word, wraps inside
     the header and never widens the page (WCAG 2.2 SC 1.4.10). It takes a
     line of its own before it shrinks, so the actions move under it and
     never squeeze it below its words. */
  .fui-page-heading > :is(h1, .fui-page-title-line),
  .fui-page-title-line > h1 {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .fui-page-heading > .fui-actions {
    max-width: 100%;
  }

  .fui-page-subtitle {
    margin-block-start: var(--space-tight);
    color: var(--muted);
  }

  /* The line under the header that names who answered the page. */
  .fui-page-meta {
    margin-block: -1rem 1.25rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* The trail of a page's ancestors above its title, the separators hidden
     from assistive technology. */
  .fui-crumbs {
    margin-block-end: var(--space-tight);
  }

  .fui-crumbs > ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .fui-crumbs li {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
  }

  /* A crumb that cannot fit its line, a canonical URL, breaks inside it. */
  .fui-crumbs a {
    min-width: 0;
    color: var(--muted);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .fui-crumbs a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .fui-crumb-sep {
    color: var(--muted);
  }

  .fui-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
  }

  .fui-card {
    min-width: 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    padding: var(--space-loose);
  }

  .fui-card > * + *,
  .fui-card > :where(leptos-island, leptos-children) > * + *,
  .fui-card > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0.75rem;
  }

  /* A list laid out by a layout class draws no marker and keeps no indent: the
     layout, not the bullet, shows its items apart. At no weight of its own,
     so a container's rhythm still sets its outer margin. */
  :where(ul, ol):where(.fui-stack, .fui-grid, .fui-cluster, .fui-split, .fui-columns) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A card in a grid row is as tall as the row; an empty state inside it
     fills what is left and centres its content, so no card ends in an
     empty band. */
  .fui-grid > .fui-card:has(> .fui-empty),
  .fui-grid > .fui-card:has(> .fui-code-panel) {
    display: flex;
    flex-direction: column;
  }

  .fui-grid > .fui-card > .fui-empty {
    flex: 1 1 auto;
    align-content: center;
  }

  .fui-grid > .fui-card > .fui-code-panel {
    flex: 1 1 auto;
  }

  /* A card that spans the whole row of the grid it sits in. */
  .fui-card-wide {
    grid-column: 1 / -1;
  }

  .fui-card-title {
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: var(--space-default);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: var(--leading-body);
  }

  /* A link that is a whole card (a stat, a namespace tile): its edge turns
     to the accent under the pointer, and the focus ring draws round it. */
  a.fui-card {
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--motion-state) ease-out;
  }

  a.fui-card:hover {
    border-color: var(--accent);
    color: var(--ink);
  }

  .fui-card-link {
    display: block;
  }

  /* A link card says it leads somewhere: a chevron after its title, the
     accent edge under the pointer, the focus ring from the keyboard. */
  .fui-card-link > .fui-card-title > .fui-card-go {
    margin-inline-start: auto;
    color: var(--muted);
  }

  .fui-card-link:hover > .fui-card-title > .fui-card-go {
    color: var(--accent);
  }

  .fui-card-link:focus-visible {
    border-color: var(--accent);
  }

  /* A radio choice whose chosen option reveals the part at its place;
     the parts follow the segments in order. Child combinators keep a reveal
     nested in a part of another answering to its own choice alone. */
  .fui-reveal {
    display: grid;
    gap: var(--space-default);
  }

  .fui-reveal-parts {
    display: grid;
    gap: var(--space-default);
  }

  .fui-revealed {
    display: none;
  }

  .fui-reveal:has(> .fui-choice > .fui-segmented > .fui-segment:nth-child(1) > input:checked)
    > .fui-reveal-parts
    > .fui-revealed:nth-child(1),
  .fui-reveal:has(> .fui-choice > .fui-segmented > .fui-segment:nth-child(2) > input:checked)
    > .fui-reveal-parts
    > .fui-revealed:nth-child(2),
  .fui-reveal:has(> .fui-choice > .fui-segmented > .fui-segment:nth-child(3) > input:checked)
    > .fui-reveal-parts
    > .fui-revealed:nth-child(3),
  .fui-reveal:has(> .fui-choice > .fui-segmented > .fui-segment:nth-child(4) > input:checked)
    > .fui-reveal-parts
    > .fui-revealed:nth-child(4),
  .fui-reveal:has(> .fui-choice > .fui-segmented > .fui-segment:nth-child(5) > input:checked)
    > .fui-reveal-parts
    > .fui-revealed:nth-child(5) {
    display: block;
  }

  /* A stat card, as FerroEHR draws its tiles: the glyph centred in a
     2.5 rem square on the accent's tint, the value large in tabular
     figures, the label under it, muted, cut short with an ellipsis. */
  /* The glyph and the value keep to the card's top, the glyph centred on
     the value and label of a card with no mark, so a mark under the label
     (a pill, a badge) moves neither and a row's figures stay in line. */
  .fui-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .fui-stat > .fui-stat-glyph {
    margin-block-start: calc((var(--leading-display) + var(--leading-body) - 2.5rem) / 2);
  }

  .fui-stat-glyph {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-stat-text {
    min-width: 0;
  }

  .fui-stat-value {
    color: var(--ink);
    font-size: var(--text-display);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: var(--leading-display);
  }

  .fui-stat-label {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight) var(--space-default);
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  /* A label wraps rather than be cut: a stat read as "With a war..." has
     lost its meaning. */
  .fui-stat-label > span:first-child {
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* A mark after the label (a pill, a badge) is never wider than its card:
     in a narrow tile its words wrap inside it, so it never runs past the
     card and the page (WCAG 2.2 SC 1.4.10). */
  .fui-stat-label > :not(:first-child) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Below 30rem a tile is one line: the glyph, the figure and the label
     side by side in a smaller tile, the label cut with an ellipsis (its
     title carries all of it) and a mark under it, so a dashboard's tiles
     no longer fill a phone. */
  @media (width < 30rem) {
    .fui-stat {
      gap: 0.625rem;
      padding: 0.375rem 0.75rem;
    }

    .fui-stat > .fui-stat-text {
      margin-block-start: 0;
    }

    .fui-stat > .fui-stat-glyph {
      width: 1.75rem;
      height: 1.75rem;
      margin-block-start: calc((var(--leading-heading) - 1.75rem) / 2);
    }

    .fui-stat-text {
      display: flex;
      flex: 1 1 auto;
      align-items: baseline;
      gap: var(--space-default);
    }

    .fui-stat-value {
      flex: none;
      font-size: var(--text-heading);
      line-height: var(--leading-heading);
    }

    .fui-stat-label {
      display: grid;
      flex: 1 1 auto;
      justify-items: start;
      gap: 0;
    }

    .fui-stat-label > span:first-child {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* A panel: a card whose first row holds its title and actions over a
     body that runs to its edges (a table, a list). */
  .fui-panel {
    padding: 0;
  }

  .fui-panel > * + *,
  .fui-panel > :where(leptos-island, leptos-children) > * + *,
  .fui-panel > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0;
  }

  .fui-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default);
    border-bottom: 1px solid var(--edge);
    padding: 0.75rem var(--space-loose);
  }

  .fui-panel > .fui-table-scroll {
    border: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: none;
  }

  /* The action at the far end of a card's or a panel's header that leads to
     the whole of what the card previews ("All members"): the accent's words,
     the arrow after them a tight space apart, and the sunken ground under the
     pointer like every other interactive surface. */
  .fui-card-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    border-radius: var(--radius-control);
    padding: var(--space-tight) var(--space-default);
    color: var(--accent);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: var(--leading-small);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-card-action:hover {
    background: var(--surface-sunken);
    color: var(--accent-hover);
    text-decoration: none;
  }

  .fui-card-action > svg {
    flex: none;
  }

  .fui-panel-body {
    padding: var(--space-loose);
  }

  /* A definition grid: each label beside its value from 40 rem up, so a card
     of facts reads in half the height of one label above each value. */
  :where(.fui-facts, .fui-facts-row) {
    margin: 0;
  }

  .fui-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-tight) 1.5rem;
  }

  /* A pair may sit in a <div> of its own (HTML Living Standard, the dl
     element), which takes no box of its own in the grid. */
  .fui-facts > div {
    display: contents;
  }

  .fui-facts > dt,
  .fui-facts > div > dt {
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
  }

  /* A value breaks at its spaces and hyphens, and inside a token only when
     the token cannot fit. */
  .fui-facts > dd,
  .fui-facts > div > dd {
    min-width: 0;
    margin: 0 0 0.375rem;
    overflow-wrap: break-word;
  }

  @media (width >= 40rem) {
    .fui-facts {
      grid-template-columns: max-content minmax(0, 1fr);
    }

    .fui-facts > dd,
    .fui-facts > div > dd {
      margin: 0;
    }
  }

  /* Facts across a row, as a detail page opens: each label small and upper
     case over its value, the columns sharing the width. */
  /* Facts across a row: each fact as wide as its value, so an identifier
     stays on one line, the facts wrapping whole onto the next line. */
  .fui-facts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
  }

  .fui-facts-row > div {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
  }

  .fui-facts-row dt {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 500;
  }

  .fui-facts-row dd {
    margin: 0;
    overflow-wrap: break-word;
  }

  /* A well: a sunken box inside a card, for a passage set apart. */
  .fui-well {
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
    padding: 0.75rem;
  }

  .fui-disclosure {
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
  }

  .fui-disclosure > summary {
    border-radius: var(--radius-card);
    padding: var(--space-default) 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-disclosure > summary:hover {
    background: var(--surface-sunken);
  }

  .fui-disclosure[open] > summary {
    border-bottom: 1px solid var(--edge);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .fui-disclosure > summary + * {
    padding: 0.75rem;
  }

  /* ---- Tables ---- */

  /* A table is never bounded in height: every row of the page shows, so the
     pager's range label names the rows a reader sees. On a narrow screen a
     table wider than its card scrolls sideways inside it, never the page
     (WCAG 2.2 SC 1.4.10). */
  /* Positioned, so a visually hidden part of the table (its caption, a
     step's words) is clipped by the box and never widens the page. */
  .fui-table-scroll {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
  }

  /* A table inside a card sits on the card's own ground and edge. */
  .fui-card > .fui-table-scroll {
    box-shadow: none;
  }

  /* From 64rem up a table fits its card beside the sidebar, so the box stops
     being a scroll container and the header sticks to the viewport below the
     sticky top bar, inside the scroll padding (SC 2.4.11). An overflow box
     would hold the header to itself, so sticky is given up below 64rem, and
     at every width by a table no console bounds (`fui-table-wide`, a query's
     result set), which scrolls inside its card and never widens the page
     (SC 1.4.10). */
  @media (width >= 64rem) {
    .fui-table-scroll:not(.fui-table-wide) {
      overflow: visible;
    }

    /* With no scroll box, an identifier that cannot fit its column wraps
       inside it, so the table never runs past its card. */
    .fui-table-scroll:not(.fui-table-wide) .fui-table code {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .fui-table-scroll:not(.fui-table-wide) .fui-table :is(thead, tbody) :is(td, th) {
      overflow-wrap: break-word;
    }

    .fui-table-scroll:not(.fui-table-wide) .fui-table thead th {
      position: sticky;
      top: var(--bar);
      z-index: 1;
    }
  }

  .fui-table {
    width: 100%;
    border-collapse: collapse;
  }

  /* One line that ends in an ellipsis when its box is narrower than it,
     such as a canonical under a name; the title carries all of it. */
  .fui-truncate {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* In a table the line keeps to 28rem, since a table cell grows to its
     content and would otherwise never cut it. */
  .fui-table .fui-truncate {
    max-width: 28rem;
  }

  /* Beside the sidebar below 80rem a bounded table has no scroll box and
     little room, so a cut line gives its column no width of its own: the
     column takes the width of its other content and the line ends in its
     ellipsis there (WCAG 2.2 SC 1.4.10). */
  @media (64rem <= width < 80rem) {
    .fui-table-scroll:not(.fui-table-wide) .fui-table .fui-truncate {
      width: 0;
      min-width: 100%;
    }
  }

  /* A timestamp is one value on one line wherever it sits, a stacked card
     that breaks anywhere included; its title holds the value as sent. */
  .fui-time {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  /* The caption names the table for assistive technology; the card's title
     or the page names it for the eye. */
  .fui-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fui-table :is(th, td) {
    border-bottom: 1px solid var(--edge);
    padding: var(--row-y) 0.75rem;
    text-align: start;
    vertical-align: top;
  }

  /* A hierarchy row's leading cell steps in one loose space per level, so a
     concept reads under its parent while the other cells keep their column;
     level 0 keeps the cell's own inset. */
  .fui-table :is(th, td).fui-depth-0 {
    padding-inline-start: 0.75rem;
  }
  .fui-table :is(th, td).fui-depth-1 {
    padding-inline-start: calc(0.75rem + 1 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-2 {
    padding-inline-start: calc(0.75rem + 2 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-3 {
    padding-inline-start: calc(0.75rem + 3 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-4 {
    padding-inline-start: calc(0.75rem + 4 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-5 {
    padding-inline-start: calc(0.75rem + 5 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-6 {
    padding-inline-start: calc(0.75rem + 6 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-7 {
    padding-inline-start: calc(0.75rem + 7 * var(--space-loose));
  }

  .fui-table :is(th, td).fui-depth-8 {
    padding-inline-start: calc(0.75rem + 8 * var(--space-loose));
  }

  /* The header in the small step and sentence case, read as a word and
     narrower than upper case in a table that may scroll sideways
     (WCAG 2.2 SC 1.4.10). It wraps between its words, a long word
     hyphenated in the page's language, so a header never sets the width of
     its column alone; a code header breaks after a slash, a dot or an
     opening bracket (`view::path`). */
  .fui-table thead th {
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
    hyphens: auto;
  }

  .fui-table thead th.fui-th-mono {
    font-family: var(--font-mono);
    font-weight: 500;
  }

  /* Only the last row of the last body loses its edge, so a table of
     several bodies keeps the edge between them. */
  .fui-table tbody:last-of-type tr:last-child > * {
    border-bottom: 0;
  }

  /* A row's header names the row in the body's weight; a name that opens
     the row is a link. */
  .fui-table tbody th {
    font-weight: 400;
  }

  /* An identifier in a cell keeps its line: the table scrolls sideways in
     its box rather than break a name into letters. */
  .fui-table code {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .fui-table tbody tr {
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-table tbody tr:hover {
    background: color-mix(in srgb, var(--surface-sunken) 60%, transparent);
  }

  /* A stacked table on a phone: each row a block, each cell its column's
     name (its `data-label`) beside its value, the first cell, which names the
     row, across the top. */
  @media (width < 40rem) {
    .fui-table-stack {
      overflow: visible;
    }

    /* The table takes its container's width, never its widest cell's: a
       table box sizes itself to its content's min-content, so one cell that
       keeps its line would carry every card past a phone's edge. */
    .fui-table-stack .fui-table {
      display: block;
      width: 100%;
    }

    .fui-table-stack .fui-table .fui-truncate {
      max-width: 100%;
      font-weight: 400;
    }

    .fui-table-stack .fui-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .fui-table-stack .fui-table :is(tbody, tr) {
      display: block;
    }

    .fui-table-stack {
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    /* A panel's table runs to the panel's edge; its cards keep the panel's
       inset instead. */
    .fui-panel > .fui-table-stack {
      padding: var(--space-loose);
    }

    .fui-table-stack .fui-table tbody tr {
      border: 1px solid var(--edge);
      border-radius: var(--radius-card);
      background: var(--surface-raised);
      padding: 0.625rem 0.75rem;
    }

    .fui-table-stack .fui-table tbody tr + tr,
    .fui-table-stack .fui-table tbody + tbody {
      margin-block-start: 0.5rem;
    }

    .fui-table-stack .fui-table tbody tr:hover {
      background: var(--surface-raised);
    }

    .fui-table-stack .fui-table tbody :is(td, th) {
      display: grid;
      grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
      justify-items: start;
      align-items: baseline;
      gap: 0.75rem;
      border: 0;
      padding-block: 0.125rem;
      text-align: start;
    }

    /* The cell that heads a card, a loading bar or the empty state spans
       the card: `justify-items` applies to a block box too (CSS Box
       Alignment 3), so the grid's `start` is put back to `normal`. */
    .fui-table-stack .fui-table tbody :is(td, th):not([data-label]) {
      display: block;
      justify-items: normal;
      margin-block-end: var(--space-tight);
      padding-inline: 0;
      font-weight: 600;
    }

    .fui-table-stack .fui-table tbody [data-label] {
      padding-inline: 0;
    }

    /* A stacked row keeps its level in the card's heading, a default step
       per level, narrower than the wide table's loose one. */
    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-1 {
      padding-inline-start: calc(1 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-2 {
      padding-inline-start: calc(2 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-3 {
      padding-inline-start: calc(3 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-4 {
      padding-inline-start: calc(4 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-5 {
      padding-inline-start: calc(5 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-6 {
      padding-inline-start: calc(6 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-7 {
      padding-inline-start: calc(7 * var(--space-default));
    }

    .fui-table-stack .fui-table tbody :is(td, th).fui-depth-8 {
      padding-inline-start: calc(8 * var(--space-default));
    }

    /* A card has no sideways scroll, so an identifier wraps inside it,
       whether a code element or a cell in the code face. */
    .fui-table-stack .fui-table code {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .fui-table-stack .fui-table tbody :is(td, th) {
      overflow-wrap: anywhere;
    }

    /* A pill, a badge or a state in a card wraps its words inside the value
       column, so a long state never carries the card past a phone's edge
       (WCAG 2.2 SC 1.4.10). */
    .fui-table-stack .fui-table tbody :is(.fui-pill, .fui-badge, .fui-state) {
      max-width: 100%;
      white-space: normal;
    }

    /* A cell whose value is a timestamp keeps the label's column while the
       value fits beside it, and moves the whole value under the label when
       it does not, since a timestamp never breaks (WCAG 2.2 SC 1.4.10), whether
       it is the cell's child or the one node a cell helper wraps it in. */
    .fui-table-stack .fui-table tbody [data-label]:has(> .fui-time, > :where(span) > .fui-time) {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 0.75rem;
    }

    .fui-table-stack .fui-table tbody [data-label]:has(> .fui-time, > :where(span) > .fui-time)::before {
      flex: 0 0 max(6rem, 35%);
    }

    .fui-table-stack .fui-table tbody [data-label]::before {
      content: attr(data-label);
      color: var(--muted);
      font-family: var(--font-sans);
      font-size: var(--text-body);
      line-height: var(--leading-body);
      font-weight: 500;
    }

    /* The actions of a card sit together beside their name, however many
       links and forms they are; the name keeps the grid's column. */
    .fui-table-stack .fui-table tbody .fui-table-actions[data-label] {
      display: flex;
      width: auto;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: var(--space-default) 0.75rem;
    }

    .fui-table-stack .fui-table tbody .fui-table-actions[data-label]::before {
      flex: 0 0 max(6rem, 35%);
    }

    .fui-table-stack .fui-table .fui-table-actions :is(.fui-button, .fui-button-small) {
      margin-block: 0;
    }
  }

  /* A link in a cell names the row it opens: the accent, underlined under
     the pointer, whatever a console's own anchor style says. */
  .fui-table tbody a:not(.fui-button, .fui-sort) {
    color: var(--accent);
    text-decoration: none;
  }

  .fui-table tbody a:not(.fui-button, .fui-sort):hover {
    color: var(--accent-hover);
    text-decoration: underline;
  }

  .fui-table .fui-num {
    text-align: end;
  }

  .fui-table th.fui-num {
    text-align: end;
  }

  .fui-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    color: inherit;
    text-decoration: none;
  }

  .fui-sort:hover {
    color: var(--ink);
  }

  .fui-table-actions {
    width: 1%;
    text-align: end;
    white-space: nowrap;
  }

  /* A button in the actions cell sits on the row's first line of text, as
     the cells beside it start at the top. */
  .fui-table-actions > :is(.fui-button, button, a) {
    margin-block: calc((var(--leading-body) - var(--control)) / 2);
  }

  /* An action that is a form (a removal behind a confirmation) sits on the
     row beside the links, its button on the same first line. */
  .fui-table-actions > form {
    display: inline-flex;
    gap: var(--space-default);
  }

  /* Every action hangs from the top of the line, whatever its font's
     baseline, so a link and a form's button share their top edge. */
  .fui-table-actions > :is(.fui-button, button, a, form) {
    vertical-align: top;
  }

  /* A row menu in the actions cell (its island draws no box) sits on the
     same first line, its 2 rem trigger centred on the line. */
  .fui-table-actions > :where(leptos-island, leptos-children) > .fui-anchor,
  .fui-table-actions > .fui-anchor {
    margin-block: calc((var(--leading-body) - 2rem) / 2);
    vertical-align: top;
  }

  .fui-table-actions > form > :is(.fui-button, button, a):not(.fui-button-small) {
    margin-block: calc((var(--leading-body) - var(--control)) / 2);
  }

  .fui-table-actions .fui-button-small {
    margin-block: calc((var(--leading-body) - var(--control-small)) / 2);
  }

  /* The tools over a table: the filter and, beside it, how many rows it
     keeps. */
  .fui-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-default) 0.75rem;
  }

  .fui-table-tools > p {
    padding-block-end: 0.4375rem;
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .fui-table-tools > .fui-field {
    flex: 1 1 16rem;
    max-width: 28rem;
  }

  /* On a phone a pager step is its glyph, its words and "(unavailable)"
     kept for assistive technology, so the steps and the position fit one
     row; a step that cannot be taken also takes a dashed edge. */
  @media (width < 40rem) {
    .fui-pager .fui-step-words {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .fui-pager .fui-pager-steps {
      flex-wrap: nowrap;
    }
  }

  /* One pager layout: the range at the start, the steps in the centre and
     the sizes at the end of one row; on a narrow screen one under another. */
  .fui-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-default) var(--space-loose);
    margin-block-start: 0.75rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-pager-steps,
  .fui-pager-sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
  }

  /* The size choices wrap together, never one alone under the others. */
  .fui-pager-size-choices {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-tight);
  }

  .fui-pager > [role="status"] {
    justify-self: start;
  }

  .fui-pager .fui-pager-steps {
    justify-self: center;
  }

  .fui-pager .fui-pager-sizes {
    grid-column: 3;
    justify-self: end;
  }

  @media (width < 48rem) {
    .fui-pager {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-pager .fui-pager-steps,
    .fui-pager .fui-pager-sizes {
      grid-column: auto;
      justify-self: start;
    }
  }

  .fui-pager-position {
    padding-inline: var(--space-default);
  }

  /* A page size: the one in force on the accent's tint and marked current,
     the others links in the accent. */
  .fui-pager-size {
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0.125rem var(--space-default);
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
  }

  .fui-pager-size:hover {
    background: var(--surface-sunken);
    text-decoration: underline;
  }

  .fui-pager-size[aria-current="true"],
  .fui-pager-size[aria-pressed="true"] {
    background: var(--accent-tint);
    text-decoration: none;
  }

  /* A skeleton bar standing in for content that is loading. */
  .fui-skeleton {
    display: block;
    height: 0.875rem;
    border-radius: var(--radius-control);
    background: linear-gradient(90deg, var(--surface-sunken), var(--edge), var(--surface-sunken));
    background-size: 200% 100%;
    animation: fui-shimmer 1.4s ease-in-out infinite;
  }

  .fui-skeleton + .fui-skeleton {
    margin-block-start: var(--space-default);
  }

  /* The busy indicator: a ring that turns beside its words. */
  .fui-spinner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-default);
    color: var(--muted);
  }

  .fui-spinner-ring {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 2px solid var(--edge-strong);
    border-top-color: var(--accent);
    border-radius: 9999px;
    animation: fui-turn 0.8s linear infinite;
  }

  .fui-spinner-text {
    min-width: 0;
  }

  .fui-spinner-section {
    padding-block: var(--space-default);
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }

  .fui-spinner-section .fui-spinner-ring {
    width: 1.25rem;
    height: 1.25rem;
  }

  @keyframes fui-turn {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes fui-shimmer {
    from {
      background-position: 100% 0;
    }

    to {
      background-position: -100% 0;
    }
  }

  /* ---- Forms ---- */

  .fui-form {
    display: grid;
    gap: 0.75rem;
  }

  /* A form's button keeps its own width at the start of the column. */
  .fui-form > .fui-button {
    justify-self: start;
  }

  /* A field's parts start at the top of its cell, so two fields side by
     side keep their labels and controls on one line whatever help each
     carries. */
  .fui-field {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-tight);
  }

  /* A button among a field's parts keeps its own width at the start of
     the field, as one in a form does. */
  .fui-field > :is(button, .fui-button) {
    justify-self: start;
  }

  /* The one label style of every field; a long word wraps as a heading's
     does. */
  .fui-label {
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--leading-body);
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Fields in one row share its width, each growing from 10rem, and the
     row's buttons keep their own; the row wraps on a phone. */
  .fui-field-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
  }

  .fui-field-flow > *,
  .fui-field-flow > :where(leptos-island, leptos-children) > * {
    min-width: 0;
    flex: 1 1 10rem;
  }

  .fui-field-flow > :is(button, .fui-button, .fui-check, .fui-segmented, .fui-control-narrow) {
    flex: 0 0 auto;
  }

  /* Below 30rem each field and button takes the whole row, the label above
     its control and the button on its own line after it, so no field
     narrows until its label wraps beside the controls. */
  @media (width < 30rem) {
    .fui-field-flow > :is(.fui-field, button, .fui-button) {
      flex: 1 1 100%;
    }
  }

  /* A checkbox beside fields sits on their controls' line, not their
     labels'. */
  :is(.fui-field-flow, .fui-field-row, .fui-columns) > .fui-check {
    min-height: var(--control);
    align-self: end;
    align-items: center;
  }

  :is(.fui-field-flow, .fui-field-row, .fui-columns) > .fui-check > input {
    margin-block-start: 0;
  }

  /* A row whose field carries a help line under its control aligns the
     fields by their tops, and its buttons and checkboxes sit one label
     down, so each stays on the controls' line, not the help's. */
  @media (width >= 30rem) {
    .fui-field-flow:has(> .fui-field > .fui-help) {
      align-items: flex-start;
    }

    .fui-field-flow:has(> .fui-field > .fui-help) > :is(button, .fui-button, .fui-check) {
      align-self: flex-start;
      margin-block-start: calc(var(--leading-body) + var(--space-tight));
    }
  }

  .fui-help {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* The help switch: a checkbox drawn as a switch beside its words, the
     height of a small control. */
  .fui-help-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--control-small);
    color: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    cursor: pointer;
  }

  .fui-help-switch > input.fui-switch {
    margin: 0;
  }

  /* A help line under a form's switch: visually hidden while the switch is
     off and still read, as `fui-sr-only` hides text (WCAG 2.2 technique
     C7), so it shows with no script at all. */
  form:has(.fui-help-switch > input:not(:checked)) .fui-explain {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* A field's error line: the help's size in the refusal's colour. */
  .fui-error {
    color: var(--bad);
  }

  /* A control keeps to its field: a date and time input's own minimum,
     which differs from one platform's fonts to another's, never widens it. */
  .fui-input,
  .fui-select,
  .fui-textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    padding: 0.375rem 0.75rem;
    color: var(--ink);
    transition: border-color var(--motion-state) ease-out;
  }

  .fui-input,
  .fui-select {
    min-height: var(--control);
  }

  /* The select draws FerroUI's chevron (Lucide's chevron-down, a 16 px box
     inset 12 px from the edge) as two stroked gradients, so no image is
     fetched under any image policy; the padding reserves its room and the
     chosen words end in an ellipsis before it. */
  .fui-select {
    appearance: none;
    overflow: hidden;
    padding-inline-end: 2.5rem;
    background-image:
      linear-gradient(45deg, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
      linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px));
    background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9375rem) 50%;
    background-size: 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The combobox: an input with the select's chevron over a listbox that
     opens under it, each row its words over a muted second line, the
     chosen row checked, the highlighted row ringed. */
  .fui-combobox {
    position: relative;
  }

  .fui-combobox-box {
    position: relative;
  }

  .fui-combobox-input {
    padding-inline-end: 2.5rem;
    background-image:
      linear-gradient(45deg, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
      linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px));
    background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9375rem) 50%;
    background-size: 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
  }

  .fui-combobox-list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 0.25rem);
    max-height: 16rem;
    margin: 0;
    overflow-y: auto;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-tight);
    list-style: none;
  }

  .fui-combobox-option {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    border-radius: var(--radius-control);
    padding: 0.375rem 0.5rem;
    color: var(--ink);
    cursor: pointer;
  }

  .fui-combobox-option:hover,
  .fui-combobox-option[data-active] {
    background: var(--surface-sunken);
  }

  .fui-combobox-option[data-active] {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-combobox-text {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
  }

  .fui-combobox-label {
    overflow-wrap: break-word;
  }

  .fui-combobox-detail {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fui-combobox-check {
    display: inline-flex;
    width: 1rem;
    flex-shrink: 0;
    color: var(--accent);
  }

  .fui-combobox-empty {
    padding: 0.375rem 0.5rem;
    color: var(--muted);
  }

  .fui-select:is([multiple], [size]) {
    padding-inline-end: 0.75rem;
    background-image: none;
    white-space: normal;
  }

  /* A control that cannot be used: the sunken ground, muted words, no
     pointer. It keeps the control's edge, so on a well's sunken ground, in
     the dark theme as in the light, it still reads as a field. */
  :is(.fui-input, .fui-select, .fui-textarea):disabled {
    border-color: var(--edge-control);
    background-color: var(--surface-sunken);
    color: var(--muted);
    cursor: not-allowed;
  }

  :is(.fui-input, .fui-select, .fui-textarea):disabled:hover {
    border-color: var(--edge-control);
  }

  .fui-input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) {
    font-variant-numeric: tabular-nums;
  }

  .fui-input::-webkit-calendar-picker-indicator {
    opacity: 0.7;
    cursor: pointer;
  }

  .fui-input:hover,
  .fui-select:hover,
  .fui-textarea:hover {
    border-color: var(--ink);
  }

  .fui-input:focus-visible,
  .fui-select:focus-visible,
  .fui-textarea:focus-visible {
    border-color: var(--focus);
    outline: 2px solid var(--focus);
    outline-offset: 0;
  }

  /* Related controls under a legend, the browser's fieldset frame reset to
     the card's look. */
  .fui-fieldset {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    border: 0;
    padding: 0;
  }

  /* The browser's margin goes at no weight of its own, so a fieldset that is
     a card's child keeps the card's rhythm above it (`.fui-card > * + *`). */
  :where(.fui-fieldset) {
    margin: 0;
  }

  /* A group's heading outranks the labels of its fields: a step up in size
     and weight, and a rule under it. */
  /* A visually hidden legend keeps the hidden box: the heading's width and
     padding would carry it past the page's edge. */
  .fui-fieldset > legend:not(.fui-sr-only) {
    width: 100%;
    margin-block-end: var(--space-default);
    border-bottom: 1px solid var(--edge);
    padding: 0 0 var(--space-tight);
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    font-weight: 600;
  }

  /* A fieldset set apart as a well keeps the well's frame and padding, its
     legend inside the frame. */
  .fui-fieldset.fui-well {
    border: 1px solid var(--edge);
    padding: 0.75rem;
  }

  /* On the well's sunken ground the heading's rule takes the stronger
     edge, which the dark theme's edge would match. */
  .fui-fieldset.fui-well > legend {
    float: left;
    width: 100%;
    border-bottom-color: var(--edge-strong);
  }

  /* A choice's legend is a field's label, not a group's heading: the
     fieldset's class in the selector matches the heading rule's weight, and
     this rule comes after it, so the label wins wherever the group sits. */
  .fui-fieldset.fui-choice > legend {
    margin-block-end: var(--space-tight);
    border-bottom: 0;
    padding: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 500;
  }

  /* One side of a change: the sign and the value in the removed or the
     added tone, on its ground. */
  .fui-change {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-tight);
    border-radius: var(--radius-control);
    padding: 0 var(--space-tight);
  }

  .fui-change-removed {
    background: var(--bad-ground);
    color: var(--bad);
  }

  .fui-change-added {
    background: var(--ok-ground);
    color: var(--ok);
  }

  .fui-change-sign {
    font-weight: 700;
  }

  /* Fields in pairs from 40 rem up. */
  .fui-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem var(--space-loose);
  }

  @media (width >= 40rem) {
    .fui-columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .fui-textarea {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-code);
    tab-size: 2;
  }

  .fui-textarea.fui-textarea-prose {
    min-height: calc(2 * var(--leading-body) + 0.75rem + 2px);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  /* A control that holds a number or a short code, or a name or a version,
     never takes the full row. */
  .fui-control-narrow {
    width: 100%;
    max-width: 8rem;
  }

  .fui-control-medium {
    width: 100%;
    max-width: 20rem;
  }

  .fui-check-text {
    display: grid;
    gap: 0.125rem;
  }

  .fui-input::placeholder,
  .fui-textarea::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  /* A checkbox and its label on one row, the box clear of the words. */
  .fui-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .fui-check > input {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin: 0.1875rem 0 0;
    accent-color: var(--accent);
  }

  /* The picker's input, hidden once the page has hydrated and a listed
     choice is chosen; before hydration both controls show. */
  .fui-picker {
    gap: var(--space-default);
  }

  .fui-picker-hidden {
    display: none;
  }

  /* ---- Tree ---- */

  /* The tree view: each child list indented by its nesting, one row per
     item, the focus ring on the row of the focused item. */
  .fui-tree,
  .fui-tree-group {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-tree-group {
    padding-inline-start: 1.25rem;
  }

  .fui-tree-item {
    outline: none;
  }

  .fui-tree-row {
    display: flex;
    min-height: 2rem;
    align-items: center;
    gap: var(--space-tight);
    border-radius: var(--radius-control);
    padding: 0.125rem var(--space-tight);
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-tree-row:hover {
    background: var(--surface-sunken);
  }

  .fui-tree-item:focus-visible > .fui-tree-row {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .fui-tree-item[aria-selected="true"] > .fui-tree-row {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
  }

  .fui-tree-toggle,
  .fui-tree-spacer {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }

  .fui-tree-toggle {
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0;
    color: var(--muted);
    cursor: pointer;
  }

  .fui-tree-toggle:hover {
    color: var(--ink);
  }

  .fui-tree-label {
    min-width: 0;
    color: inherit;
    overflow-wrap: anywhere;
    text-decoration: none;
  }

  a.fui-tree-label:hover {
    text-decoration: underline;
  }

  .fui-tree-code {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 400;
    line-height: var(--leading-small);
  }

  .fui-tree-actions {
    display: inline-flex;
    margin-inline-start: auto;
    gap: var(--space-tight);
  }

  /* ---- Tabs ---- */

  /* Tabs, as FerroEHR's tab bar draws them: rounded tabs in a row, muted
     until the pointer is on one, the current one on the accent's tint in
     the accent and named current or selected for assistive technology. */
  .fui-tabs {
    --fade-ground: var(--surface);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
  }

  :is(.fui-card, .fui-panel, .fui-dialog) .fui-tabs {
    --fade-ground: var(--surface-raised);
  }

  /* Below 40rem the strip is one row that scrolls inside itself; a shade
     marks the edge that has more tabs, covered at an end the strip has
     reached (the covers scroll with the tabs, the shades stay put). */
  @media (width < 40rem) {
    .fui-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      background:
        linear-gradient(to right, var(--fade-ground) 40%, transparent) left / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--fade-ground) 40%, transparent) right / 2rem 100% no-repeat local,
        linear-gradient(to right, color-mix(in srgb, var(--ink) 14%, transparent), transparent) left / 1rem 100% no-repeat scroll,
        linear-gradient(to left, color-mix(in srgb, var(--ink) 14%, transparent), transparent) right / 1rem 100% no-repeat scroll;
    }

    .fui-tabs > .fui-tab {
      flex-shrink: 0;
    }
  }

  .fui-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0.375rem 0.75rem;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--motion-state) ease-out, background-color var(--motion-state) ease-out;
  }

  .fui-tab:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .fui-tab[aria-current="page"],
  .fui-tab[aria-current="true"],
  .fui-tab[aria-selected="true"] {
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-tab-panel {
    padding-block-start: var(--space-loose);
  }

  /* ---- Popovers: the menu and the dialog ---- */

  .fui-menu {
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0.75rem;
    color: var(--ink);
  }

  .fui-menu:popover-open {
    position: fixed;
    inset: 6.5rem var(--space-loose) auto auto;
  }

  @media (width >= 48rem) {
    .fui-menu:popover-open {
      inset-block-start: calc(var(--bar) + var(--space-tight));
    }
  }

  .fui-menu-title {
    font-weight: 600;
  }

  .fui-menu-compact {
    min-width: 10rem;
    padding: 0.375rem;
  }

  .fui-menu-items {
    display: grid;
    gap: 0.125rem;
  }

  /* One choice of a menu: a row the pointer tints, the chosen one on the
     accent's tint and checked. */
  .fui-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--space-default);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0.375rem var(--space-default);
    color: var(--ink);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-align: start;
    text-decoration: none;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-menu-item > span {
    flex: 1;
  }

  .fui-menu-item:hover {
    background: var(--surface-sunken);
  }

  .fui-menu-item[aria-pressed="true"],
  .fui-menu-item[aria-current="true"] {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 500;
  }

  /* The operator's name in the top bar reads in the ink. */
  .fui-topbar-end > .fui-button-ghost,
  .fui-topbar-end .fui-operator {
    color: var(--ink);
  }

  /* The sign-in card, after FerroEHR's: a compact column, the lockup centred
     at its top, every method and notice at its full width. */
  .fui-sign-in {
    display: flex;
    width: min(24rem, 100%);
    flex-direction: column;
    gap: var(--space-loose);
    text-align: start;
  }

  .fui-sign-in > * + *,
  .fui-sign-in > :where(leptos-island, leptos-children) > * + *,
  .fui-sign-in > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0;
  }

  .fui-sign-in-lockup {
    display: flex;
    justify-content: center;
  }

  .fui-sign-in .fui-button {
    width: 100%;
  }

  .fui-sign-in-notice {
    border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
    border-radius: var(--radius-control);
    background: var(--tone-ground);
    padding: var(--space-default) 0.75rem;
    color: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    white-space: pre-line;
  }

  /* The "or" between two methods, a hairline either side. */
  .fui-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-divider::before,
  .fui-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--edge);
  }

  .fui-sign-in-links a {
    text-decoration: underline;
  }

  .fui-sign-in-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-tight) var(--space-loose);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-menu > * + *,
  .fui-menu > :where(leptos-island, leptos-children) > * + *,
  .fui-menu > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0.75rem;
  }

  /* A dialog never runs past the viewport: past its height it scrolls, and
     a long word in it (a canonical URL) breaks (WCAG 2.2 SC 1.4.10). */
  .fui-dialog {
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    overflow-wrap: anywhere;
    /* A dialog drawn in a table's actions cell inherits neither its nowrap
       nor its end alignment. */
    white-space: normal;
    text-align: start;
    margin: auto;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 1.25rem;
    color: var(--ink);
  }

  .fui-dialog::backdrop {
    background: var(--scrim);
  }

  .fui-dialog-title {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }

  .fui-dialog-danger .fui-dialog-title > .fui-icon {
    color: var(--bad);
  }

  .fui-dialog-wide {
    width: min(48rem, calc(100vw - 2rem));
  }

  /* A confirmation with fields draws its parts inside the one form it
     posts, which keeps the dialog's rhythm between them. */
  .fui-dialog > * + *,
  .fui-dialog > .fui-dialog-form > * + *,
  .fui-dialog > :where(leptos-island, leptos-children) > * + *,
  .fui-dialog > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0.75rem;
  }

  .fui-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-default);
  }

  /* ---- Toasts ---- */

  /* The region spans the viewport's height at its inline end, its toasts
     packed at its foot; past its height it scrolls, and only the toasts
     take the pointer, so the empty part covers nothing (WCAG 2.2 SC 1.4.10,
     SC 2.4.11). */
  .fui-toasts {
    position: fixed;
    inset: var(--space-default) var(--space-loose) var(--space-loose) auto;
    z-index: 50;
    display: grid;
    align-content: safe end;
    width: min(24rem, calc(100vw - 2rem));
    gap: var(--space-default);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
  }

  .fui-toasts .fui-toast {
    pointer-events: auto;
  }

  /* With a decision bar on the page (R4) the region's foot is the bar's top
     while the bar is on the screen, so a toast never covers the decisions;
     where the bar leaves no room the region keeps one toast's height at the
     top of the screen. */
  @supports (anchor-name: --fui-dock) {
    .fui-dock {
      anchor-name: --fui-dock;
    }

    :root:has(.fui-dock) .fui-toasts {
      position-anchor: --fui-dock;
      inset-block-end: max(var(--space-loose), calc(anchor(top, var(--space-loose)) + var(--space-default)));
      min-height: 4.5rem;
    }
  }

  /* Dismiss before the page hydrates: a native disclosure whose summary is
     the button; closing it hides its toast. */
  .fui-toast-close > summary {
    list-style: none;
    cursor: pointer;
  }

  .fui-toast-close > summary::-webkit-details-marker {
    display: none;
  }

  .fui-toast:has(> .fui-toast-close:not([open])) {
    display: none;
  }

  .fui-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-default);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0.75rem var(--space-loose);
    color: var(--ink);
  }

  .fui-toast > .fui-icon {
    color: var(--tone);
  }

  .fui-toast-text {
    flex: 1;
  }

  /* ---- Empty states and refusals ---- */

  /* An empty state, as FerroEHR draws one: a dashed frame, the glyph in a
     sunken round, the title and the line under it, and the way forward. */
  .fui-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-default);
    border: 1px dashed var(--edge-strong);
    border-radius: var(--radius-card);
    padding: 2.5rem 1.5rem;
    text-align: center;
  }

  .fui-empty > h2 {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 500;
  }

  .fui-empty > :last-child:not(.fui-empty-body) {
    margin-block-start: var(--space-tight);
  }

  .fui-empty-glyph {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--surface-sunken);
    color: var(--muted);
  }

  .fui-empty-body {
    max-width: 32rem;
    color: var(--muted);
  }

  /* The quiet form inside a card: no frame, less room. An empty state in a
     card or a panel takes it on its own. */
  .fui-empty-quiet,
  :is(.fui-card, .fui-panel) .fui-empty {
    border: 0;
    padding: 1.25rem var(--space-loose);
  }

  /* A refusal or a fault the page reports: a status and words in a box, the
     upstream's issues listed with their text. */
  .fui-alert {
    border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
    border-radius: var(--radius-card);
    background: var(--bad-ground);
    padding: 0.625rem var(--space-loose);
    color: var(--bad);
    white-space: pre-line;
  }

  .fui-alert > * + *,
  .fui-alert > :where(leptos-island, leptos-children) > * + *,
  .fui-alert > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: var(--space-default);
  }

  .fui-alert-title {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    font-weight: 600;
  }

  /* A notice in a tone beside what it is about: a warning, an information,
     a state; the tone's glyph beside the words. */
  .fui-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-default);
    border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
    border-radius: var(--radius-card);
    background: var(--tone-ground);
    padding: var(--space-default) 0.75rem;
    color: var(--tone);
    white-space: pre-line;
  }

  .fui-notice > .fui-icon {
    margin-block-start: 0.125rem;
  }

  /* The body wraps a word longer than the notice, as a banner's text does
     (WCAG 2.2 SC 1.4.10). */
  .fui-notice > div {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .fui-notice a {
    color: inherit;
    font-weight: 500;
  }

  /* A list of issues or matches: rows under a hairline, the badge, the
     place and the words aligned, no bullets. */
  .fui-issues {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink);
  }

  .fui-issues > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-tight) var(--space-default);
    padding-block: 0.375rem;
  }

  .fui-issues > li + li {
    border-top: 1px solid var(--edge);
  }

  .fui-issue-head {
    color: var(--muted);
  }

  .fui-issue-text {
    flex: 1 1 16rem;
    min-width: 0;
  }

  /* On a narrow screen the badge keeps its column and the head and the text
     stack beside it, each breaking inside that column. */
  @media (width < 40rem) {
    .fui-issues > li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
    }

    .fui-issue-head,
    .fui-issue-text {
      grid-column: 2;
      overflow-wrap: anywhere;
    }
  }

  .fui-issue-detail {
    display: inline-block;
    margin-inline-start: var(--space-tight);
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-control);
    padding: 0 var(--space-tight);
    background: var(--surface-raised);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* The request a refusal answered, in the code face, breaking anywhere so
     a long URL never widens the page (WCAG 2.2 SC 1.4.10). */
  .fui-alert-request {
    margin-top: var(--space-tight);
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  .fui-alert-request code {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-alert-evidence {
    margin-top: var(--space-default);
    max-height: 12rem;
    color: var(--ink);
  }

  .fui-alert .fui-issues > li + li {
    border-top-color: color-mix(in srgb, var(--bad) 20%, transparent);
  }

  /* The issues past the first ones, folded under a summary that opens
     them with no script. */
  .fui-issues-more > summary {
    cursor: pointer;
    padding-block: 0.375rem;
    color: var(--ink);
    font-weight: 500;
  }

  /* ---- Code ---- */

  /* A bounded code panel: highlighted text in a box that scrolls in both
     directions, never at the page's full height. */
  .fui-code-panel {
    max-height: min(60vh, 28rem);
    overflow: auto;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
  }

  .fui-code-panel > pre {
    margin: 0;
    padding: var(--space-default) 0.75rem;
    color: var(--ink);
    line-height: var(--leading-code);
    tab-size: 2;
  }

  .fui-code-panel-numbered > pre {
    counter-reset: fui-line;
    padding-inline-start: 3.75rem;
  }

  /* About's self-description: capped at 24 rem with its own scroll, and
     sideways on a phone; a line never wraps. */
  .fui-code-panel.fui-self-description {
    max-height: 24rem;
    max-width: 100%;
  }

  .fui-self-description > pre {
    white-space: pre;
    overflow-wrap: normal;
  }

  .fui-code-line {
    display: block;
    min-height: var(--leading-code);
  }

  /* A line a link scrolls to keeps the gutter beside it in view. */
  .fui-code-panel-numbered .fui-code-line,
  .fui-editor-layer .fui-code-line {
    position: relative;
    counter-increment: fui-line;
    scroll-margin-block: var(--space-section);
    scroll-margin-inline-start: 3.75rem;
  }

  .fui-code-panel-numbered .fui-code-line::before,
  .fui-editor-layer .fui-code-line::before {
    content: counter(fui-line);
    position: absolute;
    inset-inline-start: -3.5rem;
    width: 2.75rem;
    color: var(--muted);
    text-align: end;
  }

  .fui-code-line:target {
    background: var(--accent-tint);
    box-shadow: -3.75rem 0 0 var(--accent-tint), inset 3px 0 0 var(--accent);
  }

  /* A line a diagnostic names: its number in the tone's colour and bold,
     and the line on the tone's ground; the diagnostic's words say why. */
  .fui-code-line.fui-mark-error {
    background: var(--bad-ground);
  }

  .fui-code-line.fui-mark-warning {
    background: var(--warn-ground);
  }

  .fui-code-line.fui-mark-error::before {
    color: var(--bad);
    font-weight: 700;
  }

  .fui-code-line.fui-mark-warning::before {
    color: var(--warn);
    font-weight: 700;
  }

  .fui-tok-key {
    color: var(--syntax-key);
  }

  .fui-tok-string {
    color: var(--syntax-string);
  }

  .fui-tok-number {
    color: var(--syntax-number);
  }

  .fui-tok-keyword {
    color: var(--syntax-keyword);
  }

  .fui-tok-comment {
    color: var(--syntax-comment);
  }

  .fui-tok-tag {
    color: var(--syntax-tag);
  }

  .fui-tok-attribute {
    color: var(--syntax-attribute);
  }

  .fui-tok-path {
    color: var(--syntax-path);
  }

  .fui-tok-parameter {
    color: var(--syntax-parameter);
  }

  /* The highlighted editor: a transparent text area over the highlighted
     layer, in one grid cell of one scrolling box. Both draw the text with the
     same face, size, padding and wrapping, so every character of the layer
     sits under the one typed; the token classes change colour alone, never
     the width of a glyph. */
  .fui-editor {
    max-height: min(70vh, 40rem);
    overflow: auto;
    border: 1px solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-sunken);
  }

  .fui-editor:focus-within {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .fui-editor-stack {
    display: grid;
    min-height: 16rem;
  }

  .fui-editor-stack > .fui-editor-layer,
  .fui-editor-stack > .fui-editor-input {
    grid-area: 1 / 1;
    margin: 0;
    border: 0;
    padding: var(--space-default) 0.75rem var(--space-default) 3.75rem;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: var(--leading-code);
    tab-size: 2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .fui-editor-layer {
    counter-reset: fui-line;
    color: var(--ink);
  }

  /* The text area paints above the layer, whose numbered lines are
     positioned, so every click and selection reaches the text area. */
  .fui-editor-input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    resize: none;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    color: transparent;
    caret-color: var(--ink);
    outline: none;
  }

  .fui-editor-input::selection {
    background: var(--accent-tint);
  }

  /* The placeholder of an empty editor, in the muted ink the transparent
     text would otherwise hide. */
  .fui-editor-input::placeholder {
    color: var(--muted);
  }

  /* A short editor, for a value of a few lines such as a parameter object. */
  .fui-editor-short .fui-editor-stack {
    min-height: 6rem;
  }

  .fui-editor-input:focus-visible {
    outline: none;
  }

  /* Until its island runs, with no WebAssembly too, the text area shows
     its own text in ink and scrolls itself, and the layer keeps only its
     gutter and marks, so a key typed before the page hydrates shows. */
  .fui-editor-stack.is-static > .fui-editor-input {
    overflow: auto;
    color: var(--ink);
  }

  .fui-editor-stack.is-static > .fui-editor-layer :where(.fui-code-line, .fui-code-line *) {
    color: transparent;
  }

  /* ---- The copy button ---- */

  .fui-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-default);
  }

  .fui-copy-refused {
    color: var(--bad);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* ---- The modal dialog ---- */

  /* The modal: the dialog's box in the top layer over the dimmed page. */
  .fui-modal {
    max-height: calc(100dvh - 4rem);
    overflow: auto;
  }

  .fui-modal:not([open]) {
    display: none;
  }

  .fui-modal-body > * + *,
  .fui-modal-body > :where(leptos-island, leptos-children) > * + *,
  .fui-modal-body > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0.75rem;
  }

  /* ---- The side panel ---- */

  /* A panel from the inline end, full height; below 40 rem a sheet over the
     whole viewport. Its edges are the viewport's, so it is sized to the
     layout viewport, scrollbar excluded, with nothing showing under it. */
  .fui-side-panel {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    border: 0;
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0;
    color: var(--ink);
  }

  .fui-side-panel[open] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
  }

  @media (width >= 40rem) {
    .fui-side-panel {
      width: 24rem;
      border-inline-start: 1px solid var(--edge);
    }

    .fui-side-panel[open] {
      inset-inline-start: auto;
    }
  }

  .fui-side-panel::backdrop {
    background: var(--scrim);
  }

  .fui-side-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default);
    border-bottom: 1px solid var(--edge);
    padding: 0.75rem var(--space-loose);
  }

  .fui-side-panel-close {
    margin-inline-start: auto;
  }

  .fui-side-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-loose);
  }

  .fui-side-panel-body > * + *,
  .fui-side-panel-body > :where(leptos-island, leptos-children) > * + *,
  .fui-side-panel-body > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0.75rem;
  }

  /* ---- The upload field ---- */

  .fui-upload {
    display: grid;
    gap: 0.75rem;
  }

  /* The drop zone: a dashed frame that takes the accent while a file is over
     it, and the bad tone when it refused one. */
  .fui-drop {
    display: grid;
    justify-items: center;
    gap: var(--space-default);
    border: 1px dashed var(--edge-control);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
    padding: 1.5rem var(--space-loose);
    text-align: center;
    transition: border-color var(--motion-state) ease-out, background-color var(--motion-state) ease-out;
  }

  .fui-drop-over {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-tint);
  }

  .fui-drop-refused {
    border-color: var(--bad);
  }

  .fui-drop-glyph {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--surface-raised);
    color: var(--muted);
  }

  .fui-drop-over .fui-drop-glyph {
    color: var(--accent);
  }

  .fui-drop-words {
    font-weight: 500;
  }

  .fui-drop-state {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    color: var(--ok);
  }

  .fui-drop-state-refused {
    color: var(--bad);
  }

  .fui-drop-state-warn {
    color: var(--warn);
  }

  /* The file input is visually hidden, so its focus shows on the chooser
     that names it (WCAG 2.2 SC 2.4.7). */
  .fui-drop:has(> input[type="file"]:focus-visible) > label.fui-button {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* ---- Charts ---- */

  .fui-chart {
    margin: 0;
  }

  .fui-chart-plot {
    min-width: 0;
  }

  .fui-chart-activity {
    max-width: 100%;
  }

  /* A chart's frame: the Y labels in a gutter left of the plot, spaced to
     the grid lines (the plot's top and bottom margins less half a line). */
  .fui-chart-frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-default);
  }

  .fui-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 0.125rem 1.125rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .fui-chart-svg {
    display: block;
    width: 100%;
    overflow: visible;
  }

  /* The X labels a narrow chart has no room for: each label the server
     thinned names the chart width it shows from. */
  .fui-chart-frame {
    container-type: inline-size;
  }

  @container (width < 15rem) {
    .fui-chart-tick-15 {
      display: none;
    }
  }

  @container (width < 20rem) {
    .fui-chart-tick-20 {
      display: none;
    }
  }

  @container (width < 25rem) {
    .fui-chart-tick-25 {
      display: none;
    }
  }

  @container (width < 30rem) {
    .fui-chart-tick-30 {
      display: none;
    }
  }

  @container (width < 40rem) {
    .fui-chart-tick-40 {
      display: none;
    }
  }

  @container (width < 50rem) {
    .fui-chart-tick-50 {
      display: none;
    }
  }

  @container (width < 60rem) {
    .fui-chart-tick-60 {
      display: none;
    }
  }

  @container (width < 80rem) {
    .fui-chart-tick-80 {
      display: none;
    }
  }

  .fui-chart-point {
    fill: var(--surface-raised);
    stroke: var(--series);
    stroke-width: 2;
  }

  /* A run of missing values, bridged by a dashed line in the series'
     colour so the gap reads as no value rather than as a break. */
  .fui-chart-gap {
    fill: none;
    stroke: var(--series);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.7;
  }

  .fui-legend-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-swatch-gap {
    width: 1.25rem;
    border-top: 2px dashed var(--muted);
  }

  .fui-chart-grid,
  .fui-chart-axis,
  .fui-chart-line,
  .fui-chart-gap {
    vector-effect: non-scaling-stroke;
  }

  .fui-chart-plot-lines {
    overflow: visible;
  }

  .fui-chart-grid {
    stroke: var(--edge);
    stroke-width: 1;
  }

  .fui-chart-axis {
    stroke: var(--edge-strong);
    stroke-width: 1;
  }

  /* A label keeps the type scale at every width, on a halo of the card's
     ground so a line passing under it never hides it. */
  .fui-chart-label {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    paint-order: stroke;
    stroke: var(--surface-raised);
    stroke-width: 3px;
    stroke-linejoin: round;
  }

  .fui-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .fui-chart-accent {
    stroke: var(--accent);
  }

  .fui-chart-point.fui-chart-accent {
    stroke: var(--accent);
  }

  .fui-series-0 {
    --series: var(--accent);
  }

  .fui-series-1 {
    --series: var(--info);
  }

  .fui-series-2 {
    --series: var(--ok);
  }

  .fui-series-3 {
    --series: var(--warn);
  }

  .fui-series-4 {
    --series: var(--bad);
  }

  .fui-series-5 {
    --series: var(--neutral);
  }

  .fui-chart-line[class*="fui-series-"] {
    stroke: var(--series);
  }

  /* The legend: a chip per series, its swatch beside its name, pressed while
     the series shows. */
  .fui-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    margin-block-start: var(--space-default);
  }

  .fui-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--edge);
    border-radius: 9999px;
    background: var(--surface-raised);
    padding: var(--space-tight) 0.625rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    text-decoration: line-through;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-legend-chip:hover {
    background: var(--surface-sunken);
  }

  .fui-legend-chip[aria-pressed="true"] {
    color: var(--ink);
    text-decoration: none;
  }

  /* The last series shown: pressed, and it takes no press. */
  .fui-legend-chip:disabled {
    cursor: not-allowed;
  }

  .fui-legend-chip:disabled:hover {
    background: var(--surface-raised);
  }

  /* A series' swatch: its point mark (a circle, a square, a diamond or a
     triangle) in its colour, as the plot draws it. */
  .fui-swatch {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    overflow: visible;
    fill: var(--series);
    stroke: var(--series);
    stroke-width: 1.5;
  }

  /* The legend as a static key, before the page hydrates or with no
     WebAssembly: each swatch beside its name, no control. */
  .fui-legend-key {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--space-tight) 0.625rem;
    color: var(--ink);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-legend-chip[aria-pressed="false"] .fui-swatch {
    fill: transparent;
  }

  /* ---- The document pane ---- */

  /* The format links and the view switch share a row over the views. */
  .fui-document {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .fui-document-views {
    order: 1;
    flex: 1 0 100%;
    min-width: 0;
  }

  /* Copy ends the row of the switches, above the views. */
  .fui-document .fui-copy {
    margin-inline-start: auto;
  }

  /* A view a link targets keeps its switch in sight above it. */
  .fui-document-view {
    scroll-margin-block-start: 4rem;
  }

  .fui-document-view > .fui-codeview,
  .fui-document-view > .fui-code-panel {
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .fui-document-view > .fui-code-panel {
    overflow: auto;
  }

  .fui-document-view pre {
    white-space: pre;
    overflow-wrap: normal;
  }

  .fui-document-rendered {
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    padding: 0.75rem;
  }

  /* The view chosen shows and the others hide. */
  .fui-document-views[data-shown="highlighted"] .fui-document-view:not([data-view="highlighted"]),
  .fui-document-views[data-shown="raw"] .fui-document-view:not([data-view="raw"]),
  .fui-document-views[data-shown="rendered"] .fui-document-view:not([data-view="rendered"]) {
    display: none;
  }

  /* With no WebAssembly a view's link targets it, and the view targeted
     shows in place of the chosen one, its segment marked. */
  .fui-document-views:not(.is-live):has(.fui-document-view:target) .fui-document-view:not(:target) {
    display: none;
  }

  .fui-document-views:not(.is-live) .fui-document-view:target {
    display: block;
  }

  .fui-document:has(.fui-document-views:not(.is-live) .fui-document-view:target) .fui-document-switch > .fui-segment[aria-current="true"] {
    --segment-ring: transparent;
    background: transparent;
    color: var(--muted);
  }

  .fui-document:has(.fui-document-views:not(.is-live) [data-view="highlighted"]:target) .fui-document-switch > .fui-segment[data-view="highlighted"],
  .fui-document:has(.fui-document-views:not(.is-live) [data-view="raw"]:target) .fui-document-switch > .fui-segment[data-view="raw"],
  .fui-document:has(.fui-document-views:not(.is-live) [data-view="rendered"]:target) .fui-document-switch > .fui-segment[data-view="rendered"] {
    --segment-ring: var(--accent-ink);
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* ==== The console layer: the family rules as CSS and the class of every
     console component, each component of design/COMPONENTS.md drawn once
     for every console. ==== */

  /* ---- 1. The record compare (view::compare) ---- */

  /* Records side by side: the field names down the first column, the
     leading record next, every other record marked against it per field.
     The mark is a glyph and a word; agreement is quiet, a difference is
     loud, so the eye lands on what the steward must weigh. */
  .fui-compare {
    width: 100%;
    border-collapse: collapse;
  }

  /* The picker inside a dialog: no frame of its own (the Defer dialog). */
  .fui-datepicker.fui-datepicker-inline {
    display: grid;
    gap: 0.625rem;
    width: auto;
    max-width: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .fui-datepicker-inline :is(.fui-datepicker-quick, .fui-datepicker-status) {
    max-width: none;
  }

  .fui-compare caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fui-compare :is(th, td) {
    border-bottom: 1px solid var(--edge);
    padding: var(--row-y) 0.75rem;
    text-align: start;
    vertical-align: top;
  }

  .fui-compare thead th {
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
    white-space: nowrap;
  }

  .fui-compare thead th .fui-compare-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight) var(--space-default);
    color: var(--ink);
  }

  .fui-compare thead th .fui-compare-sub {
    display: block;
    font-weight: 400;
    white-space: normal;
  }

  .fui-compare tbody tr:last-child > * {
    border-bottom: 0;
  }

  /* The field name: the row's header, muted and never wrapped. */
  .fui-compare tbody th {
    width: 1%;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
  }

  /* The leading record reads a step heavier, and its column is told by
     the accent's tint in the head. */
  .fui-compare th.fui-compare-leading {
    background: var(--accent-tint);
  }

  .fui-compare td.fui-compare-leading {
    font-weight: 500;
  }

  /* A row that differs carries a warn bar at its head, so the differing
     rows read as a block when they are sorted first. */
  .fui-compare tr.fui-compare-row-differ > th {
    box-shadow: inset 3px 0 0 var(--warn-dot);
  }

  /* The mark sits right after its value (review round 1, item 19), so
     the eye reads the value and its verdict together. */
  .fui-compare-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-tight) var(--space-default);
  }

  .fui-compare-value {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .fui-compare-value.fui-compare-none {
    color: var(--muted);
  }

  /* The mark: a glyph in the tone, the word beside it when the difference
     must be read, and the word for a screen reader always. */
  .fui-compare-mark {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius-control);
    padding: 0 0.375rem;
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
    white-space: nowrap;
  }

  .fui-compare-mark > .fui-icon {
    height: var(--leading-micro);
  }

  .fui-compare-agree {
    color: var(--ok);
  }

  .fui-compare-differ {
    background: var(--warn-ground);
    color: var(--warn);
  }

  .fui-compare-absent {
    color: var(--muted);
  }

  /* The one-record form on a phone: the records as a segmented switch,
     the chosen record as a card of field rows, the marks kept. */
  .fui-compare-stacked {
    display: grid;
    gap: var(--space-default);
  }

  .fui-compare-stacked-rows {
    display: grid;
    margin: 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
  }

  .fui-compare-stacked-rows > div {
    display: grid;
    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: var(--row-y) 0.75rem;
  }

  .fui-compare-stacked-rows > div + div {
    border-top: 1px solid var(--edge);
  }

  .fui-compare-stacked-rows > div.fui-compare-row-differ {
    box-shadow: inset 3px 0 0 var(--warn-dot);
  }

  .fui-compare-stacked-rows dt {
    color: var(--muted);
    font-weight: 500;
  }

  .fui-compare-stacked-rows dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* The table from 64 rem, the stacked form below it. */
  .fui-compare-wide {
    display: none;
  }

  @media (width >= 64rem) {
    .fui-compare-wide {
      display: block;
    }

    .fui-compare-stacked {
      display: none;
    }
  }

  /* The table form at every width (view::compare::compare): fixed
     columns, so a value revealed or hidden in a cell moves nothing; the
     table scrolls sideways inside its own box, never the page (WCAG 2.2
     SC 1.4.10), with the field and the leading record held at the start. */
  .fui-table-scroll.fui-compare-scroll {
    overflow-x: auto;
  }

  .fui-compare-scroll > .fui-compare {
    table-layout: fixed;
  }

  .fui-compare-col-field {
    width: 10rem;
  }

  .fui-compare-col {
    width: 14rem;
  }

  .fui-compare-scroll > .fui-compare :is(thead th:first-child, tbody th) {
    position: sticky;
    left: 0;
    z-index: 1;
    width: auto;
    white-space: normal;
  }

  .fui-compare-scroll > .fui-compare tbody th {
    background: var(--surface-raised);
  }

  .fui-compare-scroll > .fui-compare .fui-compare-leading {
    position: sticky;
    left: 10rem;
    z-index: 1;
    background-color: var(--surface-raised);
  }

  .fui-compare-scroll > .fui-compare th.fui-compare-leading {
    background-image: linear-gradient(var(--accent-tint), var(--accent-tint));
  }

  .fui-compare-scroll > .fui-compare thead th {
    white-space: normal;
  }

  /* The stacked form alone (view::compare::compare_stacked) shows at
     every width; every mark ends its value's line, so the agree, differ
     and absent marks read as one column. */
  .fui-compare-stacked-rows .fui-compare-cell > .fui-compare-mark {
    margin-inline-start: auto;
  }

  .fui-compare-lead {
    display: block;
  }

  /* A record's title in the stacked form wraps inside its segment, and a
     long leading title inside its line, so the choice never widens the
     page (WCAG 2.2 SC 1.4.10). */
  .fui-compare-stacked .fui-segment {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .fui-compare-stacked p {
    overflow-wrap: anywhere;
  }

  /* Past five other records, each record is a disclosure of its own: the
     title over its quiet line in the summary, the fields inside it, the
     rows flush with the disclosure's edge. */
  .fui-compare-records {
    display: grid;
    gap: var(--space-default);
  }

  .fui-compare-record > summary {
    overflow-wrap: anywhere;
  }

  .fui-compare-record > summary .fui-compare-sub {
    display: block;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 400;
  }

  .fui-compare-record > summary + div {
    padding: 0;
  }

  .fui-compare-record .fui-compare-stacked-rows {
    border: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }

  @media (width >= 64rem) {
    .fui-compare-stacked.fui-compare-alone {
      display: grid;
    }
  }

  /* ---- 2. The score breakdown (view::score) ---- */

  .fui-score {
    display: grid;
    gap: 0.375rem;
  }

  /* One contribution: the field, its comparator's reading under it, the
     bar from the zero line, the weight in tabular figures at the end. */
  .fui-score-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr) 3rem;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .fui-score-label {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .fui-score-reading {
    display: block;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fui-score-bar {
    display: block;
    width: 100%;
    height: 0.875rem;
    overflow: visible;
  }

  .fui-score-bar-ground {
    fill: var(--surface-sunken);
  }

  .fui-score-bar-zero {
    stroke: var(--edge-control);
    stroke-width: 1;
  }

  .fui-score-bar-add {
    fill: var(--ok);
  }

  .fui-score-bar-remove {
    fill: var(--bad);
  }

  .fui-score-weight {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: end;
    white-space: nowrap;
  }

  .fui-score-weight.fui-score-add {
    color: var(--ok);
  }

  .fui-score-weight.fui-score-remove {
    color: var(--bad);
  }

  .fui-score-weight.fui-score-zero {
    color: var(--muted);
    font-weight: 500;
  }

  .fui-score-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-default);
    margin-block-start: var(--space-default);
    border-top: 1px solid var(--edge);
    padding-block-start: 0.625rem;
    font-weight: 500;
  }

  .fui-score-total .fui-score-figure {
    font-size: var(--text-title);
    line-height: var(--leading-title);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  /* The scale: the thresholds as labelled marks on one track, the grade
     bands tinted between them, and the score as the point. */
  .fui-score-scale {
    display: block;
    width: 100%;
    height: 4.25rem;
    margin-block-start: var(--space-default);
    overflow: visible;
  }

  .fui-score-scale-band-none {
    fill: var(--surface-sunken);
  }

  .fui-score-scale-band-possible {
    fill: var(--warn-ground);
  }

  .fui-score-scale-band-probable {
    fill: var(--info-ground);
  }

  .fui-score-scale-band-certain {
    fill: var(--ok-ground);
  }

  .fui-score-mark {
    stroke: var(--edge-control);
    stroke-width: 1;
  }

  .fui-score-mark-label {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-score-point {
    fill: var(--accent);
    stroke: var(--surface-raised);
    stroke-width: 2;
  }

  .fui-score-point-label {
    fill: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--surface-raised);
    stroke-width: 3px;
    stroke-linejoin: round;
  }

  /* The queue's cell: a short bar in the grade's tone beside the number. */
  .fui-score-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-default);
    min-width: 7rem;
  }

  .fui-score-cell > .fui-proportion {
    width: 3.5rem;
    min-width: 3.5rem;
  }

  .fui-score-cell > .fui-num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  .fui-score-cell.fui-tone-info .fui-proportion-fill {
    fill: var(--info-dot);
  }

  .fui-score-cell.fui-tone-warn .fui-proportion-fill {
    fill: var(--warn-dot);
  }

  .fui-score-cell.fui-tone-ok .fui-proportion-fill {
    fill: var(--ok-dot);
  }

  /* ---- 3. The timeline (view::timeline) ---- */

  .fui-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A windowed timeline's foot: how many events show, then the link to
     the older ones, wrapping between the two. */
  .fui-timeline-more {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: var(--space-default) 0 0;
  }

  /* The rail runs behind the dots, from the first to the last. */
  .fui-timeline::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: calc(0.625rem - 1px);
    width: 2px;
    background: var(--edge-strong);
  }

  .fui-timeline-event {
    position: relative;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block: 0.625rem;
  }

  .fui-timeline-dot {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0.1875rem auto 0;
    border: 2px solid var(--surface-raised);
    border-radius: 9999px;
    background: var(--tone-dot);
    box-shadow: 0 0 0 1px var(--edge-strong);
  }

  .fui-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
  }

  /* A long event code, title, actor or reason wraps inside the event, so
     the timeline never widens the page (WCAG 2.2 SC 1.4.10); the time
     keeps to one line. */
  :is(.fui-timeline-code, .fui-timeline-title, .fui-timeline-meta, .fui-timeline-reason) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .fui-timeline-title {
    font-weight: 500;
  }

  .fui-timeline-meta {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-timeline-body {
    margin-block-start: 0.375rem;
    display: grid;
    gap: var(--space-default);
  }

  .fui-timeline-reason {
    color: var(--muted);
  }

  .fui-timeline-reason:not(:has(> .fui-timeline-reason-label))::before {
    content: "Reason: ";
    color: var(--muted);
    font-weight: 500;
  }

  /* The library's own label before the reason, in the page's words. */
  .fui-timeline-reason-label {
    font-weight: 500;
  }

  /* The raw event code after the kind: a quiet hint in the code face. */
  .fui-timeline-code {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* The identifiers an event concerns, masked, on one wrapping line. */
  .fui-timeline-identifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-block-start: 0.25rem;
  }

  /* ---- 4. The masked identifier with its reveal (widget::identifier) ---- */

  .fui-identifier {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    max-width: 100%;
  }

  /* The masked value in the code face: the mask glyphs muted, the tail
     the steward matches by in the ink. */
  .fui-identifier-mask {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .fui-identifier-dots {
    color: var(--muted);
  }

  .fui-identifier-value {
    border-radius: var(--radius-control);
    background: var(--accent-tint);
    padding: 0 0.375rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .fui-identifier-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .fui-identifier-countdown > svg {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    transform: rotate(-90deg);
  }

  .fui-identifier-countdown-track {
    fill: none;
    stroke: var(--edge-strong);
    stroke-width: 3;
  }

  .fui-identifier-countdown-left {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
  }

  /* The static listing form: the domain chip and the mask alone. */
  .fui-identifier-static {
    gap: 0.375rem;
  }

  /* The reserved slot: the masked face and the revealed face share one
     grid cell, the one not shown kept invisible at its size, so
     revealing, counting down and hiding move nothing around it. */
  .fui-identifier-slot {
    display: inline-grid;
    grid-template-columns: minmax(0, auto);
    max-width: 100%;
  }

  .fui-identifier-face {
    display: inline-flex;
    flex-wrap: wrap;
    grid-area: 1 / 1;
    align-items: center;
    gap: 0.375rem 0.5rem;
  }

  .fui-identifier-press {
    display: inline-grid;
  }

  .fui-identifier-press > * {
    grid-area: 1 / 1;
  }

  .fui-identifier-press[hidden] {
    display: none;
  }

  .fui-identifier .is-away {
    visibility: hidden;
  }

  .fui-identifier-reveal {
    white-space: nowrap;
  }

  /* A revealed value keeps the room of a common identifier, so the
     countdown beside it stays put while the seconds change. */
  .fui-identifier-face .fui-identifier-value {
    min-width: 12ch;
  }

  .fui-identifier-refused {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    gap: 0.25rem;
  }

  /* A record's identifiers, one per line, each with its domain. */
  .fui-identifier-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- 5. The keyboard shortcut legend (widget::shortcuts, view::kbd) ---- */

  /* A key as it is printed on the keyboard: the UI face, a capital
     letter, a cap with a heavier lower edge (review round 1, item 32). */
  .fui-kbd {
    display: inline-block;
    min-width: 1.5rem;
    border: 1px solid var(--edge-strong);
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background: var(--surface-raised);
    padding: 0 0.375rem;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    line-height: 1.125rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }

  /* Inside a control the cap is quiet: no ground, the label's own colour
     at a lower contrast, so it never competes with the label. */
  :is(.fui-button, .fui-menu-item, .fui-label) .fui-kbd {
    min-width: 1.25rem;
    margin-inline-start: 0.125rem;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    background: transparent;
    padding: 0 0.25rem;
    color: inherit;
    font-weight: 500;
    line-height: 1rem;
    opacity: 0.8;
  }

  .fui-menu-item .fui-kbd {
    margin-inline-start: auto;
  }

  .fui-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-loose) 1.5rem;
  }

  .fui-shortcuts-group > h3 {
    margin-block-end: var(--space-default);
    border-bottom: 1px solid var(--edge);
    padding-block-end: var(--space-tight);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
  }

  .fui-shortcuts-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin: 0;
    align-items: baseline;
  }

  .fui-shortcuts-list dt {
    display: flex;
    gap: 0.25rem;
  }

  .fui-shortcuts-list dd {
    margin: 0;
  }

  /* The one-line foot of a listing. */
  .fui-shortcut-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.875rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-shortcut-hint > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* ---- 6. The work-list (widget::worklist) ---- */

  .fui-worklist {
    position: relative;
  }

  .fui-worklist .fui-table tbody tr {
    cursor: pointer;
  }

  /* The focused row: the accent's tint and a bar at its edge, and
     `aria-current` for a reader. */
  .fui-worklist .fui-table tbody tr[aria-current="true"] {
    background: var(--accent-tint);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .fui-worklist .fui-table tbody tr[aria-current="true"] > :first-child {
    font-weight: 600;
  }

  /* The foot stays in view below the rows inside the card: the shortcut
     hint at the start and the pager at the end. */
  .fui-worklist-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default) var(--space-loose);
    border-top: 1px solid var(--edge);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: var(--surface-raised);
    padding: var(--space-default) var(--space-loose);
  }

  .fui-worklist-foot > .fui-pager {
    margin: 0;
    flex: 1 1 100%;
  }

  .fui-worklist-foot > .fui-shortcut-hint {
    flex: 1 1 100%;
  }

  @media (width < 40rem) {
    .fui-worklist .fui-table tbody tr[aria-current="true"] {
      border-color: var(--accent);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .fui-worklist-foot {
      position: static;
      border: 0;
      padding-inline: 0;
    }
  }

  /* The work-list island adds no box of its own. */
  .fui-worklist-grid {
    display: contents;
  }

  /* One focus outline round the whole focused row, its row menu
     included (WCAG 2.2 SC 2.4.7). */
  .fui-worklist .fui-table tbody tr:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-select-all {
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    accent-color: var(--accent);
  }

  /* A row the keys move to is scrolled clear of the sticky foot
     (WCAG 2.2 SC 2.4.11). */
  @media (width >= 40rem) {
    html:has(.fui-worklist-foot) {
      scroll-padding-bottom: 7rem;
    }
  }

  /* ---- The joined search (FerroUI #144, over view::search::search_box) ---- */

  /* One shape: a bordered group with the control radius, the icon and the
     `/` hint inside the field, the submit joined on the end edge. The
     group, never the input alone, takes the hover edge and the focus
     ring. */
  .fui-search {
    display: flex;
    width: 100%;
    max-width: 28rem;
    min-height: var(--control);
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    transition: border-color var(--motion-state) ease-out;
  }

  .fui-search:hover {
    border-color: var(--ink);
  }

  .fui-search:focus-within {
    border-color: var(--focus);
    outline: 2px solid var(--focus);
    outline-offset: 0;
  }

  .fui-search-field {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
  }

  .fui-search-glyph {
    position: absolute;
    inset-inline-start: 0.625rem;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    pointer-events: none;
  }

  .fui-search-glyph > .fui-spinner-ring {
    width: 0.875rem;
    height: 0.875rem;
  }

  .fui-search .fui-input {
    min-height: calc(var(--control) - 2px);
    border: 0;
    border-radius: var(--radius-control) 0 0 var(--radius-control);
    background: transparent;
    padding-inline: 2rem 2.25rem;
  }

  .fui-search .fui-input:focus-visible {
    border: 0;
    outline: none;
  }

  .fui-search .fui-input::-webkit-search-cancel-button {
    display: none;
  }

  /* The hint: quiet, the text's height, gone while the field is filled or
     focused and on a phone. */
  .fui-search-hint {
    position: absolute;
    inset-inline-end: 0.5rem;
    min-width: 1.25rem;
    border-color: var(--edge);
    border-bottom-width: 1px;
    background: transparent;
    color: var(--muted);
    line-height: 1.125rem;
    pointer-events: none;
  }

  .fui-search .fui-input:focus ~ .fui-search-hint,
  .fui-search .fui-input:not(:placeholder-shown) ~ .fui-search-hint {
    display: none;
  }

  .fui-search .fui-input:focus,
  .fui-search .fui-input:not(:placeholder-shown) {
    padding-inline-end: 0.75rem;
  }

  /* The submit: joined on the end edge, the shared hairline between, the
     outer corners rounded only; its own ring sits inside the group's. */
  .fui-search-submit {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    border-inline-start: 1px solid var(--edge-control);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: var(--surface-sunken);
    padding: 0 0.75rem;
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--leading-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-state) ease-out;
  }

  .fui-search-submit:hover {
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-search-submit:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -3px;
  }

  .fui-search:has(.fui-input:disabled) {
    background: var(--surface-sunken);
    color: var(--muted);
  }

  .fui-search:has(.fui-input:disabled):hover {
    border-color: var(--edge-control);
  }

  .fui-search-submit:disabled {
    cursor: not-allowed;
    color: var(--muted);
  }

  @media (width < 40rem) {
    .fui-search-hint {
      display: none;
    }

    .fui-search .fui-input {
      padding-inline-end: 0.75rem;
    }

    .fui-search-word {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }

  /* The control measures itself, so a field squeezed by a long operator's
     name keeps room for its words: the submit gives up its word first (its
     name stays in aria-label), then the key cap goes. The box sizes from
     its row, never from its content, so the containment moves nothing. */
  .fui-search {
    container: fui-search / inline-size;
  }

  @container fui-search (width < 22rem) {
    .fui-search-word {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }

  @container fui-search (width < 16rem) {
    .fui-search-hint {
      display: none;
    }

    .fui-search .fui-input {
      padding-inline-end: 0.75rem;
    }
  }

  /* ==== Review round 1: the components every console takes from FerroUI ==== */

  /* ---- R1. Responsive key hints (one rule for every hint) ---- */

  /* A phone has no keyboard: below 40 rem, and on a touch-only device,
     every key hint goes, in a button, a tab, a label, a menu, a field or a
     listing's foot. The legend dialog is the full reference and keeps its
     keys; the shortcuts themselves stay announced by aria-keyshortcuts.
     The Shortcut hints preference, written as data-hints on <html>, keeps
     them on a wide touch screen (always) or takes them away (never). */
  @media (width < 40rem) {
    .fui-kbd:not(.fui-shortcuts .fui-kbd),
    .fui-shortcut-hint {
      display: none !important;
    }
  }

  @media (hover: none) and (pointer: coarse) {
    :root:not([data-hints="always"]) :is(.fui-kbd:not(.fui-shortcuts .fui-kbd), .fui-shortcut-hint) {
      display: none !important;
    }
  }

  :root[data-hints="never"] :is(.fui-kbd:not(.fui-shortcuts .fui-kbd), .fui-shortcut-hint) {
    display: none !important;
  }

  /* ---- R2. The tag: a short name in the UI face (domains, channels) ---- */

  /* The chip keeps the code face for an id; a name (a domain, a channel,
     a kind) is a tag in the UI face (review round 1, item 10). A tag
     stays on one line while it fits; one wider than its box (a canonical
     URL, an OID) wraps between its words and breaks inside a word only
     where the word alone is wider, so it never widens the page (WCAG 2.2
     SC 1.4.10). In a row it keeps its width and gives none to a
     neighbour, as a word that never broke did. */
  .fui-tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-tight);
    max-width: 100%;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
    background: var(--surface-sunken);
    padding: 0 0.375rem;
    color: var(--ink);
    font-size: var(--text-micro);
    line-height: 1.125rem;
    font-weight: 500;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* A tag's raw code after its word: quiet, in the code face. */
  .fui-tag-code {
    color: var(--muted);
    font-family: var(--font-mono);
    font-weight: 400;
  }

  /* An identifier-like tag (a version, an RM type) in the code face. */
  .fui-tag.fui-tag-mono {
    font-family: var(--font-mono);
    font-weight: 400;
  }

  .fui-tag > .fui-icon {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
  }

  /* ---- R3. Binder tabs, joined to their panel (review round 1, item 5) ---- */

  /* The tabs of a card divider: the inactive ones sit behind on the sunken
     ground with a visible edge; the active one is raised to the panel's
     surface and opens into it, so tab and panel read as one sheet. Flat:
     no shadow, the edges carry it. */
  .fui-tabbed {
    display: grid;
    min-width: 0;
  }

  /* The row is one line at every width and scrolls inside itself when its
     tabs outrun it, so it never widens the page (WCAG 2.2 SC 1.4.10); its
     current tab is scrolled into view within the row alone. */
  .fui-tabbed > .fui-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.25rem;
    margin-block-end: -1px;
    padding-inline: 0.75rem;
    background: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 2.5rem;
    scrollbar-width: none;
  }

  /* A row that scrolls fades out at each edge that has more tabs behind
     it, driven by its own scroll position: a row that fits has no
     timeline, so no fade, and a row at its end loses the end's fade. */
  @supports (animation-timeline: scroll(self inline)) {
    .fui-tabbed > .fui-tabs {
      mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--fui-tabs-fade-start),
        #000 calc(100% - var(--fui-tabs-fade-end)),
        transparent
      );
      animation: fui-tabs-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }

  @property --fui-tabs-fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --fui-tabs-fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @keyframes fui-tabs-fade {
    0% {
      --fui-tabs-fade-start: 0px;
      --fui-tabs-fade-end: 2.5rem;
    }

    10% {
      --fui-tabs-fade-start: 2.5rem;
    }

    90% {
      --fui-tabs-fade-end: 2.5rem;
    }

    100% {
      --fui-tabs-fade-start: 2.5rem;
      --fui-tabs-fade-end: 0px;
    }
  }

  .fui-tabbed > .fui-tabs > .fui-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    margin-block-start: 0.375rem;
    border: 1px solid var(--edge-strong);
    border-radius: 0.5rem 0.5rem 0 0;
    background: var(--surface-sunken);
    padding: 0.375rem 1rem;
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  .fui-tabbed > .fui-tabs > .fui-tab:hover {
    background: color-mix(in srgb, var(--surface-sunken) 45%, var(--surface-raised));
    color: var(--ink);
  }

  .fui-tabbed > .fui-tabs > .fui-tab:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -4px;
  }

  /* The active tab: raised (taller by its own top margin), the panel's
     ground, the panel's edge on three sides and open at the foot. */
  .fui-tabbed > .fui-tabs > .fui-tab[aria-current="page"],
  .fui-tabbed > .fui-tabs > .fui-tab[aria-selected="true"] {
    min-height: 2.625rem;
    margin-block-start: 0;
    border-bottom-color: var(--surface-raised);
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 600;
  }

  /* A real count only: a quiet number, never a shortcut. */
  .fui-tab-count {
    min-width: 1.25rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--edge-strong) 55%, transparent);
    padding: 0 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: 1.125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .fui-tab[aria-current="page"] .fui-tab-count {
    background: var(--accent-tint);
    color: var(--accent);
  }

  /* The sheet: the panel's edge runs under the inactive tabs. */
  .fui-tabbed > .fui-tab-panel,
  .fui-tabbed > leptos-children > .fui-tab-panel {
    min-width: 0;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    padding: var(--space-loose);
  }

  /* A card inside the sheet is the sheet: no second frame. */
  .fui-tabbed > .fui-tab-panel > :is(.fui-card, .fui-panel),
  .fui-tabbed > leptos-children > .fui-tab-panel > :is(.fui-card, .fui-panel) {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  /* A titled table fills the sheet edge to edge: the sheet gives up its
     padding and the head keeps it. */
  .fui-tabbed > .fui-tab-panel:has(> .fui-panel),
  .fui-tabbed > leptos-children > .fui-tab-panel:has(> .fui-panel) {
    padding: 0;
  }

  .fui-tabbed > .fui-tab-panel > .fui-panel > .fui-panel-head,
  .fui-tabbed > leptos-children > .fui-tab-panel > .fui-panel > .fui-panel-head {
    padding: 0.75rem var(--space-loose);
  }

  .fui-tabbed > .fui-tab-panel > .fui-panel > .fui-table-scroll,
  .fui-tabbed > leptos-children > .fui-tab-panel > .fui-panel > .fui-table-scroll {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }

  /* On a phone the row keeps room at its end for the fade that says there
     is more; with no scroll timeline the fade is drawn there alone. */
  @media (width < 40rem) {
    .fui-tabbed > .fui-tabs {
      padding-inline: 0.5rem 1.5rem;
    }

    @supports not (animation-timeline: scroll(self inline)) {
      .fui-tabbed > .fui-tabs {
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
      }
    }

    .fui-tabbed > .fui-tabs > .fui-tab {
      flex-shrink: 0;
      padding-inline: 0.75rem;
    }

    .fui-tabbed > .fui-tab-panel,
    .fui-tabbed > leptos-children > .fui-tab-panel {
      padding: 0.75rem;
    }

    .fui-tabbed > .fui-tab-panel > .fui-panel > .fui-table-stack,
    .fui-tabbed > leptos-children > .fui-tab-panel > .fui-panel > .fui-table-stack {
      padding: 0 0.75rem 0.75rem;
    }
  }

  /* ---- R4. The docked decision bar (FerroUI #145) ---- */

  /* The page's one decision, docked to the foot of the main area: one top
     rule, the raised ground, no shadow and no margin; the reason at the
     start, the decisions at the end. Sticky, so it is at the window foot
     while the page scrolls and the page's end is never under it. */
  .fui-dock {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: var(--space-loose) -1.5rem -1.5rem;
    border-top: 1px solid var(--edge-strong);
    background: var(--surface-raised);
    padding: 0.75rem 1.5rem;
  }

  /* One grid: the label over the field, its error or help under it, and
     the decisions on the field's own row, so an error never moves them. */
  .fui-dock-row {
    display: grid;
    max-width: 80rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-inline: auto;
  }

  .fui-dock-field {
    display: contents;
  }

  .fui-dock-field > .fui-label {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    align-items: center;
    gap: 0.375rem;
  }

  .fui-dock-field > .fui-input {
    grid-row: 2;
    grid-column: 1;
  }

  .fui-dock-field > :is(.fui-error, .fui-help) {
    grid-row: 3;
    grid-column: 1;
  }

  .fui-dock-actions {
    display: flex;
    grid-row: 2;
    grid-column: 2;
    gap: var(--space-default);
  }

  .fui-dock-actions > .fui-button {
    align-items: center;
  }

  /* The bar's own line above the row: an error, a confirmation, a stale
     notice; it never moves the decisions. */
  .fui-dock-message {
    display: flex;
    max-width: 80rem;
    align-items: center;
    gap: var(--space-default);
    margin: 0 auto 0.625rem;
  }

  .fui-dock-message > .fui-notice {
    flex: 1 1 auto;
  }

  .fui-dock-message.fui-dock-done {
    color: var(--ok);
    font-weight: 500;
  }

  .fui-input[aria-invalid="true"] {
    border-color: var(--bad);
  }

  .fui-dock .fui-input[aria-invalid="true"] {
    border-color: var(--bad);
    outline: 2px solid var(--bad);
    outline-offset: 0;
  }

  .fui-dock-field > .fui-error {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  @media (width < 48rem) {
    .fui-dock {
      margin-inline: calc(-1 * var(--space-loose));
      padding: 0.625rem var(--space-loose) calc(0.625rem + env(safe-area-inset-bottom));
    }
  }

  /* On a phone the reason takes its own row and the decisions share the
     row under it equally. */
  @media (width < 40rem) {
    .fui-dock-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-dock-actions {
      display: grid;
      grid-row: 4;
      grid-column: 1;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      margin-block-start: 0.375rem;
    }

    .fui-dock-actions > .fui-button {
      justify-content: center;
      padding-inline: 0.5rem;
      white-space: nowrap;
    }

    .fui-dock-actions > .fui-button > .fui-icon {
      display: none;
    }
  }

  /* A busy button: the spinner in place of its glyph. */
  .fui-button[aria-busy="true"] {
    opacity: 1;
    cursor: progress;
  }

  .fui-button > .fui-spinner-ring {
    width: 0.875rem;
    height: 0.875rem;
    margin-block: 0.1875rem;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
  }

  /* ---- R5. Previous and next in the page header ---- */

  .fui-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-default);
  }

  .fui-stepper-position {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (width < 40rem) {
    .fui-stepper .fui-step-words {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* ---- R6. The breadcrumb on a phone is a back link ---- */

  /* Below 40 rem only the parent shows, as a back link; the current page
     is the title under it, never said twice. */
  .fui-crumb-back {
    display: none;
  }

  @media (width < 40rem) {
    .fui-crumbs li {
      display: none;
    }

    .fui-crumbs li:nth-last-child(2) {
      display: inline-flex;
    }

    .fui-crumbs li:nth-last-child(2) .fui-crumb-sep {
      display: none;
    }

    .fui-crumbs li:nth-last-child(2) .fui-crumb-back {
      display: inline-flex;
    }

    .fui-crumbs li:nth-last-child(2) a {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--accent);
    }
  }

  /* ---- R7. Page actions that fold into one menu on a phone ---- */

  .fui-actions-fold {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-default);
  }

  .fui-actions-fold > .fui-actions-fold-menu {
    display: none;
  }

  @media (width < 40rem) {
    .fui-actions-fold > :not(.fui-actions-fold-menu) {
      display: none;
    }

    .fui-actions-fold > .fui-actions-fold-menu {
      display: inline-flex;
    }
  }

  /* ---- R8. A menu anchored to its trigger, and the row menu ---- */

  .fui-anchor {
    position: relative;
    display: inline-flex;
  }

  .fui-menu.fui-menu-anchored {
    position: absolute;
    inset: calc(100% + 0.25rem) 0 auto auto;
    z-index: 35;
    width: max-content;
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.375rem;
    text-align: start;
  }

  .fui-menu.fui-menu-anchored.fui-menu-up {
    inset: auto 0 calc(100% + 0.25rem) auto;
  }

  .fui-menu.fui-menu-anchored.fui-menu-start {
    inset-inline: 0 auto;
  }

  .fui-menu-anchored > * + *,
  .fui-menu-anchored > :where(leptos-island, leptos-children) > * + *,
  .fui-menu-anchored > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0;
  }

  .fui-menu-sep {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--edge);
  }

  /* The user menu's head: who is signed in, the role and the provider. */
  .fui-menu-header {
    display: grid;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem 0.25rem;
    overflow-wrap: anywhere;
  }

  .fui-menu-header > span {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-menu-label {
    padding: 0.25rem var(--space-default) 0.125rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
  }

  .fui-menu-item:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-menu-item.fui-menu-danger {
    color: var(--bad);
  }

  .fui-menu-anchored:has(.fui-segmented) {
    min-width: 17.5rem;
  }

  .fui-menu .fui-segmented {
    display: flex;
    flex-wrap: nowrap;
    margin: 0.125rem 0 0.25rem;
  }

  /* Each segment keeps its word on one line, whichever is chosen, and the
     menu grows to the row's width rather than breaking a word. */
  .fui-menu .fui-segmented > .fui-segment {
    flex: 1 1 0;
    justify-content: center;
    min-width: max-content;
    padding-inline: 0.5rem;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  /* ---- R9. The work-list rows: the row opens, one row menu, a phone card ---- */

  /* The row is the link: the first cell's link covers the row, the row
     menu sits above it. */
  .fui-worklist .fui-table tbody tr {
    position: relative;
  }

  /* A row link hands its focus ring to its row only where the row draws
     one: a table row (R9) or a match (M1). Anywhere else, M2's link inline
     in a concept's facts among them, it is a plain link with its own ring
     that covers nothing (WCAG 2.2 SC 2.4.7). */
  :is(.fui-table, .fui-match-list) .fui-row-link:focus-visible {
    outline: none;
  }

  .fui-worklist .fui-table tbody tr:has(.fui-row-link:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  /* On a wide screen the cells draw the focused row's ring: the raised
     checkbox and menu cells paint the current row's tint over an outline
     on the row (WCAG 2.2 SC 2.4.7). */
  @media (width >= 40rem) {
    .fui-worklist .fui-table tbody tr:is(:focus-visible, :has(.fui-row-link:focus-visible)) {
      outline: none;
    }

    .fui-worklist .fui-table tbody tr:is(:focus-visible, :has(.fui-row-link:focus-visible)) > * {
      box-shadow:
        inset 0 2px 0 var(--focus),
        inset 0 -2px 0 var(--focus);
    }

    .fui-worklist .fui-table tbody tr:is(:focus-visible, :has(.fui-row-link:focus-visible)) > :first-child {
      box-shadow:
        inset 2px 0 0 var(--focus),
        inset 0 2px 0 var(--focus),
        inset 0 -2px 0 var(--focus);
    }

    .fui-worklist .fui-table tbody tr:is(:focus-visible, :has(.fui-row-link:focus-visible)) > :last-child {
      box-shadow:
        inset -2px 0 0 var(--focus),
        inset 0 2px 0 var(--focus),
        inset 0 -2px 0 var(--focus);
    }
  }

  .fui-worklist .fui-table tbody tr:hover {
    background: var(--surface-sunken);
  }

  .fui-worklist .fui-table tbody tr[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent-tint) 70%, transparent);
  }

  .fui-worklist .fui-table td:is(.fui-row-menu, .fui-row-check) {
    position: relative;
    z-index: 1;
  }

  .fui-row-check {
    width: 1%;
  }

  .fui-row-check input {
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    accent-color: var(--accent);
  }

  .fui-worklist .fui-table td.fui-row-menu {
    width: 1%;
    padding-block: 0;
    vertical-align: middle;
    text-align: end;
  }

  /* The selection's own bar above the rows. */
  .fui-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) 0.75rem;
    border-bottom: 1px solid var(--edge);
    background: var(--accent-tint);
    padding: 0.5rem var(--space-loose);
    font-weight: 500;
  }

  .fui-selection-bar > .fui-actions {
    margin-inline-start: auto;
  }

  .fui-selection-bar {
    position: relative;
  }

  /* On a phone a popover takes the width of the bar it opens from. */
  @media (width < 40rem) {
    .fui-selection-bar .fui-anchor {
      position: static;
    }

    .fui-selection-bar .fui-popover {
      inset: calc(100% + 0.25rem) 0 auto 0;
      width: auto;
    }
  }

  /* The tools line of a work-list: the filters at the start, the count
     on the same baseline at the end (review round 1, item 18). */
  .fui-worklist-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-default) 0.75rem;
  }

  .fui-worklist-tools > .fui-field {
    flex: 1 1 11rem;
    max-width: 16rem;
  }

  .fui-worklist-tools > .fui-field.fui-field-grow {
    flex: 2 1 14rem;
    max-width: 22rem;
  }

  .fui-worklist-tools > .fui-check {
    min-height: var(--control);
    align-items: center;
  }

  @media (width < 40rem) {
    .fui-worklist-tools {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fui-worklist-tools > .fui-field,
    .fui-worklist-tools > .fui-field.fui-field-grow {
      max-width: none;
    }
  }

  /* The work-list's own head: the count at the start, the order at the
     end, on one baseline (review round 1, item 18). */
  .fui-worklist-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem var(--space-loose);
    border-bottom: 1px solid var(--edge);
    padding: 0.625rem var(--space-loose);
  }

  .fui-worklist-head > p:first-child {
    font-weight: 600;
  }

  .fui-worklist-head .fui-muted {
    font-weight: 400;
  }

  /* The active filters as removable tags, with Clear filters. */
  .fui-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
  }

  .fui-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 9999px;
    background: var(--accent-tint);
    padding: 0.0625rem 0.25rem 0.0625rem 0.625rem;
    color: var(--accent);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 500;
  }

  .fui-filter-chip > :is(button, a) {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    padding: 0;
    color: inherit;
  }

  .fui-filter-chip > :is(button, a):hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .fui-sort-note {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* The compact work-list card on a phone: the pair on one line, then the
     score with its grade and the wait on one line; no label column. */
  @media (width < 40rem) {
    .fui-worklist .fui-table-stack .fui-table tbody tr {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25rem 0.5rem;
      padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    }

    /* The break between the pair's line and the facts' line. */
    .fui-worklist .fui-table-stack .fui-table tbody tr::after {
      content: "";
      order: 3;
      flex-basis: 100%;
      height: 0;
    }

    .fui-worklist .fui-table-stack .fui-table tbody :is(td, th) {
      display: block;
      min-width: 0;
      margin: 0;
      padding: 0;
      font-weight: 400;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-label]::before {
      display: none;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="title"] {
      order: 1;
      flex: 0 0 auto;
      font-weight: 600;
      white-space: nowrap;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="title-2"] {
      order: 1;
      flex: 1 1 0;
      overflow: hidden;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="title-2"] > span {
      display: inline;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="title-2"]::before {
      display: inline;
      content: "and ";
      color: var(--muted);
      font-weight: 400;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="menu"] {
      order: 2;
      width: auto;
      flex: 0 0 auto;
      margin-block: -0.25rem;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role^="meta"] {
      order: 4;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="meta-3"] {
      color: var(--muted);
      text-align: start;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="meta-3"]::after {
      content: " waiting";
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="wide"] {
      display: none;
    }

    .fui-worklist .fui-table-stack .fui-table tbody .fui-muted {
      font-weight: 400;
    }

    .fui-worklist .fui-score-cell {
      min-width: 0;
    }

    .fui-worklist .fui-score-cell > .fui-proportion {
      width: 2.5rem;
      min-width: 2.5rem;
    }

    .fui-worklist .fui-table-stack .fui-table tbody tr + tr {
      margin-block-start: 0.375rem;
    }
  }

  /* ---- R10. A field with its control inside: one edge round the input and
     its prefix, suffix or button, which sit beside the typed text and never
     over it ---- */

  .fui-input-group {
    display: flex;
    min-width: 0;
    min-height: var(--control);
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    padding-inline-end: 0.25rem;
    transition: border-color var(--motion-state) ease-out;
  }

  .fui-input-group:hover {
    border-color: var(--ink);
  }

  .fui-input-group:focus-within {
    border-color: var(--focus);
    outline: 2px solid var(--focus);
    outline-offset: 0;
  }

  .fui-input-group:has(> .fui-input[aria-invalid="true"]) {
    border-color: var(--bad);
  }

  .fui-input-group:has(> .fui-input:disabled) {
    border-color: var(--edge-control);
    background: var(--surface-sunken);
  }

  .fui-input-group > .fui-input {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: calc(var(--control) - 2px);
    border: 0;
    background: transparent;
  }

  .fui-input-group > .fui-input:focus-visible {
    outline: 0;
  }

  .fui-input-prefix,
  .fui-input-suffix {
    flex: none;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    white-space: nowrap;
  }

  .fui-input-prefix {
    padding-inline-start: 0.75rem;
  }

  .fui-input-prefix + .fui-input {
    padding-inline-start: 0.125rem;
  }

  .fui-input-group > .fui-input:has(+ :is(.fui-input-suffix, .fui-input-toggle, leptos-island)) {
    padding-inline-end: 0.25rem;
  }

  .fui-input-suffix {
    padding-inline-end: 0.5rem;
  }

  .fui-input-group > .fui-input-toggle {
    width: 1.875rem;
    height: 1.875rem;
  }

  .fui-input-group > .fui-input-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  /* An inner button that is an island, such as a masked input's eye, sits
     in the group through its island's box-less wrapper. */
  .fui-input-group > leptos-island > .fui-input-toggle {
    width: 1.875rem;
    height: 1.875rem;
  }

  .fui-input-group > leptos-island > .fui-input-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-input-toggle:disabled {
    color: var(--muted);
    opacity: 0.6;
    cursor: not-allowed;
  }

  .fui-input-toggle:disabled:hover {
    background: transparent;
  }

  .fui-input-toggle[aria-pressed="true"],
  .fui-input-toggle[aria-expanded="true"] {
    background: var(--accent-tint);
    color: var(--accent);
  }

  /* A masked input's hold-to-show eye: a long press on a touch screen
     holds it, so it neither scrolls the page nor selects its glyph. */
  .fui-input-hold {
    touch-action: none;
    user-select: none;
  }

  /* ---- R23. The date field: year first, the calendar behind a button ---- */

  .fui-date > .fui-input {
    font-variant-numeric: tabular-nums;
  }

  /* A range's From and To fields, which show in place of its button until
     the page's WebAssembly runs. */
  .fui-date-range-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-default);
  }

  .fui-date-range-fields > .fui-field {
    flex: 1 1 10rem;
  }

  /* ---- R24. The page title line and the deployment's mode badge ---- */

  .fui-page-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  /* Quiet: an outline and the muted ink, the TOML line on hover or focus. */
  .fui-mode-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--edge-strong);
    border-radius: 9999px;
    padding: 0 0.5rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: 1.375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
  }

  .fui-mode-badge:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .fui-mode-badge > .fui-mode-tip {
    display: none;
    inset: calc(100% + 0.375rem) auto auto 0;
    transform: none;
  }

  .fui-mode-badge:is(:hover, :focus-visible) > .fui-mode-tip {
    display: block;
  }

  .fui-mode-tip code {
    color: inherit;
    font-size: var(--text-micro);
    line-height: var(--leading-small);
  }

  /* ---- R25. The date picker: a popover on a desktop, a sheet on a phone ---- */

  .fui-date-field {
    position: relative;
  }

  .fui-date-field > .fui-datepicker {
    position: absolute;
    inset: calc(100% + 0.25rem) auto auto 0;
    z-index: 35;
  }

  /* A wide range picker opens towards the start from the field's end. */
  .fui-date-field > .fui-datepicker.fui-datepicker-range {
    inset: calc(100% + 0.25rem) 0 auto auto;
  }

  /* A picker that would run past the screen's edge opens the other way. */
  .fui-date-field > .fui-datepicker.is-end {
    inset: calc(100% + 0.25rem) 0 auto auto;
  }

  .fui-date-field > .fui-datepicker.fui-datepicker-range.is-start {
    inset: calc(100% + 0.25rem) auto auto 0;
  }

  .fui-datepicker {
    width: max-content;
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0.75rem;
    color: var(--ink);
  }

  .fui-datepicker-label {
    margin-block-end: 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
  }

  .fui-datepicker-body {
    display: flex;
    gap: 0.75rem;
  }

  .fui-datepicker-main {
    display: grid;
    gap: 0.625rem;
    min-width: 0;
  }

  .fui-datepicker-pair {
    display: flex;
    gap: 1.25rem;
  }

  .fui-datepicker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-block-end: 0.25rem;
  }

  .fui-datepicker-navgap {
    width: 2rem;
  }

  .fui-datepicker-title {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0.25rem 0.5rem;
    color: var(--ink);
    font-weight: 600;
  }

  button.fui-datepicker-title:hover {
    background: var(--surface-sunken);
  }

  .fui-datepicker-grid {
    border-collapse: separate;
    border-spacing: 0 0.125rem;
  }

  .fui-datepicker-grid th {
    width: 2.25rem;
    height: 1.75rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
    text-align: center;
  }

  .fui-datepicker-grid td {
    padding: 0;
  }

  .fui-day {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
  }

  .fui-day:hover {
    background: var(--surface-sunken);
  }

  .fui-day.fui-day-out {
    color: var(--muted);
  }

  .fui-day:disabled {
    color: var(--muted);
    opacity: 0.45;
    cursor: not-allowed;
  }

  .fui-day:disabled:hover {
    background: transparent;
  }

  /* Today: ringed and in the accent, never filled. */
  td[aria-current="date"] > .fui-day {
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--accent);
    font-weight: 600;
  }

  /* The chosen day, and a range's two ends: filled. */
  td[aria-selected="true"] > .fui-day {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }

  .fui-day.fui-day-between {
    border-radius: 0;
    background: var(--accent-tint);
  }

  .fui-day.fui-day-between.fui-day-tentative {
    background: color-mix(in srgb, var(--accent-tint) 55%, transparent);
  }

  .fui-day.fui-day-start {
    border-radius: var(--radius-control) 0 0 var(--radius-control);
  }

  .fui-day.fui-day-end {
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
  }

  .fui-day.fui-day-tentative-end {
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--accent-tint);
  }

  .fui-day:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    position: relative;
    z-index: 1;
  }

  .fui-datepicker-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    width: 15.75rem;
  }

  .fui-datepicker-cell {
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0.625rem 0;
    color: var(--ink);
  }

  .fui-datepicker-cell:hover {
    background: var(--surface-sunken);
  }

  .fui-datepicker-cell:disabled {
    color: var(--muted);
    opacity: 0.45;
    cursor: not-allowed;
  }

  .fui-datepicker-cell:disabled:hover {
    background: transparent;
  }

  .fui-datepicker-cell[aria-current="date"] {
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--accent);
  }

  .fui-datepicker-cell[aria-selected="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }

  .fui-datepicker-presets {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    min-width: 8.5rem;
    border-inline-end: 1px solid var(--edge);
    padding-inline-end: 0.75rem;
  }

  .fui-datepicker-preset {
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0.375rem 0.5rem;
    color: var(--ink);
    text-align: start;
  }

  .fui-datepicker-preset:hover {
    background: var(--surface-sunken);
  }

  .fui-datepicker-preset[aria-pressed="true"] {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 500;
  }

  .fui-datepicker-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    max-width: 16rem;
  }

  .fui-datepicker-chip {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    padding: 0.125rem 0.625rem;
  }

  .fui-datepicker-chip[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-datepicker-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--edge);
    padding-block-start: 0.625rem;
  }

  .fui-datepicker-time-fields {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .fui-datepicker-time-fields > .fui-input {
    width: 3rem;
    min-height: var(--control-small);
    padding: 0.125rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .fui-datepicker-status {
    max-width: 16rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-datepicker-range .fui-datepicker-status {
    max-width: none;
  }

  .fui-datepicker-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-start: 0.625rem;
    border-top: 1px solid var(--edge);
    padding-block-start: 0.625rem;
  }

  .fui-datepicker-handle {
    display: none;
  }

  /* A range's later month keeps a back arrow for the phone, where it is the
     one month shown; from 40 rem the earlier month's arrow does that job. */
  .fui-datepicker-phone-prev {
    visibility: hidden;
  }

  /* A phone: the same picker as a bottom sheet over a scrim, one month,
     larger days, the presets as a row. */
  @media (width < 40rem) {
    .fui-date-field > .fui-datepicker,
    .fui-date-field > .fui-datepicker.is-end,
    .fui-date-field > .fui-datepicker.fui-datepicker-range,
    .fui-date-field > .fui-datepicker.fui-datepicker-range.is-start {
      position: fixed;
      inset: auto 0 0 0;
      width: auto;
      max-width: none;
      border-radius: 0.75rem 0.75rem 0 0;
      box-shadow: 0 0 0 100vmax var(--scrim);
      padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .fui-datepicker-handle {
      display: block;
      width: 2.5rem;
      height: 0.25rem;
      margin: 0 auto 0.5rem;
      border-radius: 9999px;
      background: var(--edge-strong);
    }

    .fui-datepicker-body {
      flex-direction: column;
    }

    .fui-datepicker-presets {
      display: flex;
      flex-wrap: wrap;
      min-width: 0;
      border: 0;
      padding: 0;
    }

    .fui-datepicker-pair > .fui-datepicker-month:first-child {
      display: none;
    }

    .fui-datepicker-pair .fui-datepicker-navgap {
      display: none;
    }

    .fui-datepicker-grid {
      width: 100%;
    }

    .fui-datepicker-grid th {
      width: auto;
    }

    .fui-day {
      width: 100%;
      height: 2.75rem;
    }

    .fui-datepicker-quick,
    .fui-datepicker-status {
      max-width: none;
    }

    .fui-datepicker-pair .fui-datepicker-phone-prev {
      visibility: visible;
    }

    .fui-datepicker-foot .fui-button {
      min-height: 2.75rem;
      align-items: center;
    }
  }

  .fui-field > .fui-empty {
    border: 1px dashed var(--edge-strong);
    padding: 1.25rem var(--space-loose);
  }

  /* ---- R26. The settings page: a sub-navigation and a readable column ---- */

  .fui-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-loose) 2rem;
    align-items: start;
  }

  @media (width >= 48rem) {
    .fui-settings {
      grid-template-columns: 12rem minmax(0, 46rem);
    }
  }

  .fui-settings-nav {
    position: sticky;
    top: calc(var(--bar) + 1.5rem);
    display: none;
  }

  .fui-settings-nav-select {
    display: grid;
    gap: 0.25rem;
  }

  @media (width >= 48rem) {
    .fui-settings-nav {
      display: block;
    }

    .fui-settings-nav-select {
      display: none;
    }
  }

  .fui-settings-column {
    display: grid;
    gap: var(--space-loose);
    min-width: 0;
  }

  .fui-settings-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-inline: 0.25rem;
  }

  /* ---- R27. Setting rows: the label and its line at the start, the
     control at the end, on one grid ---- */

  .fui-setting-card {
    padding: 0;
  }

  .fui-setting-card > .fui-card-title {
    padding: 0.875rem var(--space-loose) 0;
  }

  .fui-setting-card > * + *,
  .fui-setting-card > :where(leptos-island, leptos-children) > * + *,
  .fui-setting-card > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0;
  }

  .fui-setting-rows {
    margin-block-start: 0.375rem;
  }

  .fui-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.875rem var(--space-loose);
  }

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

  /* A row whose control is a set of preview cards puts them under the
     text, still in the row. */
  .fui-setting-row:has(.fui-choice-cards) {
    grid-template-columns: minmax(0, 1fr);
  }

  .fui-setting-label {
    display: block;
    font-weight: 500;
  }

  /* A word longer than the label column (a key, a URL, a long compound in
     a translation) wraps inside it, never past the panel (WCAG 2.2 SC
     1.4.10). */
  .fui-setting-desc {
    margin-block-start: 0.125rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    overflow-wrap: break-word;
  }

  .fui-setting-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
  }

  .fui-setting-row:has(.fui-choice-cards) .fui-setting-control {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .fui-setting-row:has(.fui-choice-cards) .fui-setting-saved {
    order: 1;
  }

  /* The section in view, in the sub-navigation. */
  .fui-settings-nav .fui-nav-entry[aria-current="true"] {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
  }

  .fui-setting-value {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .fui-setting-strong {
    font-weight: 600;
  }

  .fui-setting-select {
    width: auto;
    min-width: 13rem;
  }

  .fui-setting-row .fui-setting-saved {
    animation: fui-saved-fade 2.4s ease-out forwards;
  }

  @keyframes fui-saved-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* With reduced motion the saved mark stays, since a fade cut to nothing
     would never show it. */
  @media (prefers-reduced-motion: reduce) {
    .fui-setting-row .fui-setting-saved {
      animation: none;
    }
  }

  :root[data-motion="reduce"] .fui-setting-row .fui-setting-saved {
    animation: none;
  }

  /* The form of one preference adds no box: its control and its Save
     button lay out in the row's control column. */
  .fui-preference-form {
    display: contents;
  }

  /* A capture shows the saved mark at its full strength. */
  .fui-setting-row.is-saved .fui-setting-saved {
    animation: none;
  }

  @media (width < 40rem) {
    .fui-setting-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-setting-control {
      justify-content: flex-start;
    }

    .fui-setting-value {
      text-align: start;
    }

    .fui-setting-select,
    .fui-select-anchor {
      width: 100%;
    }
  }

  /* ---- R28. Radio preview cards ---- */

  .fui-choice-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .fui-choice-card {
    position: relative;
    display: grid;
    width: 9.5rem;
    gap: 0.5rem;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    padding: 0.5rem;
    cursor: pointer;
    transition: border-color var(--motion-state) ease-out;
  }

  .fui-choice-card:hover {
    border-color: var(--edge-control);
  }

  .fui-choice-card:has(input:checked) {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .fui-choice-card:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .fui-choice-card-text {
    display: grid;
    padding-inline: 0.125rem;
  }

  .fui-choice-card-title {
    font-weight: 500;
  }

  .fui-choice-card-sub {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-choice-card-check {
    position: absolute;
    inset: 0.875rem 0.875rem auto auto;
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 0 2px var(--surface-raised);
  }

  .fui-choice-card:has(input:checked) .fui-choice-card-check {
    display: inline-flex;
  }

  /* The thumbnail of the console: fixed colours, so a preview shows its
     own theme whatever the page's. */
  .fui-preview {
    display: grid;
    grid-template-rows: 0.5rem 1fr;
    height: 4.5rem;
    overflow: hidden;
    border-radius: 0.3125rem;
  }

  .fui-preview-light {
    --pv-ground: #f8fafc;
    --pv-raised: #ffffff;
    --pv-edge: #e2e8f0;
    --pv-line: #cbd5e1;
    --pv-accent: var(--preview-accent-light);
    border: 1px solid #e2e8f0;
    background: #f8fafc;
  }

  .fui-preview-dark {
    --pv-ground: #0b1020;
    --pv-raised: #0f172a;
    --pv-edge: #1e293b;
    --pv-line: #334155;
    --pv-accent: var(--preview-accent-dark);
    border: 1px solid #1e293b;
    background: #0b1020;
  }

  .fui-preview .pv-top {
    background: var(--pv-raised);
    border-bottom: 1px solid var(--pv-edge);
  }

  .fui-preview .pv-body {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
  }

  .fui-preview .pv-side {
    display: grid;
    align-content: start;
    gap: 0.1875rem;
    border-right: 1px solid var(--pv-edge);
    background: var(--pv-raised);
    padding: 0.25rem;
  }

  .fui-preview i {
    display: block;
    height: 0.1875rem;
    border-radius: 9999px;
    background: var(--pv-line);
  }

  .fui-preview .pv-side i:first-child {
    background: var(--pv-accent);
  }

  .fui-preview .pv-main {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding: 0.375rem;
  }

  .fui-preview .pv-main .pv-title {
    width: 55%;
    height: 0.25rem;
    background: var(--pv-line);
  }

  .fui-preview .pv-main .pv-short {
    width: 40%;
  }

  .fui-preview .pv-main b {
    display: block;
    width: 1.5rem;
    height: 0.4375rem;
    margin-block-start: 0.125rem;
    border-radius: 0.125rem;
    background: var(--pv-accent);
  }

  .fui-preview-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    border: 0;
  }

  .fui-preview-split > .fui-preview {
    height: 100%;
    border-radius: 0;
  }

  .fui-preview-split > .fui-preview-light {
    border-radius: 0.3125rem 0 0 0.3125rem;
  }

  .fui-preview-split > .fui-preview-dark {
    border-radius: 0 0.3125rem 0.3125rem 0;
  }

  /* The density thumbnail: a table at that spacing, in the page's theme. */
  .fui-preview-table {
    display: grid;
    grid-template-rows: none;
    align-content: start;
    border: 1px solid var(--edge);
    background: var(--surface-raised);
    padding: 0.375rem;
  }

  .fui-preview-table .pv-head {
    height: 0.4375rem;
    border-radius: 0.125rem;
    background: var(--surface-sunken);
  }

  .fui-preview-table i {
    height: 0.1875rem;
    background: var(--edge-strong);
  }

  .fui-preview-comfortable {
    gap: 0.625rem;
  }

  .fui-preview-compact {
    gap: 0.375rem;
  }

  /* ---- R29. The select as a button with its listbox ---- */

  .fui-select-anchor {
    position: relative;
    display: inline-flex;
  }

  .fui-select-button {
    display: inline-flex;
    min-width: 13rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-image: none;
    padding-inline-end: 0.625rem;
    text-align: start;
    cursor: pointer;
  }

  .fui-select-anchor-wide,
  .fui-select-anchor-wide > .fui-select-button {
    width: 100%;
  }

  .fui-select-button[aria-expanded="true"] {
    border-color: var(--focus);
    outline: 2px solid var(--focus);
    outline-offset: 0;
  }

  /* The listbox opens as F13 does: a solid raised surface with a full
     border, the card radius and the overlay shadow, 4 px under its trigger
     and aligned to the trigger's start (`is-end` flips it to the end edge
     where the start has no room). It is as wide as its widest option and
     at least as wide as its trigger, never clipped: past 20 rem an
     option's words wrap, and past the viewport's height it scrolls. */
  .fui-listbox {
    position: absolute;
    inset: calc(100% + 0.25rem) auto auto 0;
    z-index: 35;
    width: max-content;
    min-width: 100%;
    max-width: min(20rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    margin: 0;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0.25rem;
    list-style: none;
  }

  /* In dark, the open listbox lifts clear of the cards it opens over. */
  :root[data-theme="dark"] .fui-listbox {
    background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"], [data-theme="dark"]) .fui-listbox {
      background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
    }
  }

  .fui-listbox.is-end {
    inset: calc(100% + 0.25rem) 0 auto auto;
  }

  /* A select in the title area (an artefact's release version) sits
     clear of the subtitle above it. */
  .fui-title-select {
    margin-block-start: 0.75rem;
  }

  .fui-listbox.is-up {
    inset-block: auto calc(100% + 0.25rem);
  }

  .fui-listbox-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: var(--radius-control);
    padding: 0.4375rem 0.625rem;
    cursor: pointer;
  }

  .fui-listbox-text {
    min-width: 0;
  }

  .fui-listbox-text > span:first-child {
    overflow-wrap: anywhere;
  }

  .fui-listbox-option:hover {
    background: var(--surface-sunken);
  }

  .fui-listbox-option[aria-selected="true"] {
    color: var(--accent);
    font-weight: 500;
  }

  .fui-listbox-text {
    display: grid;
  }

  .fui-listbox-note {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 400;
  }

  .fui-listbox-sep {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--edge);
  }

  @media (width < 40rem) {
    .fui-listbox {
      inset-inline: 0;
    }

    .fui-listbox-option {
      min-height: 2.75rem;
    }
  }

  /* ---- R11. A form on a grid: the fields share columns ---- */

  .fui-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    align-items: start;
    gap: 0.75rem var(--space-loose);
  }

  .fui-form-grid > .fui-span-2 {
    grid-column: span 2;
  }

  /* A button in the grid has no label, so it sits on the inputs' line. */
  .fui-form-grid > :not(.fui-field) {
    align-self: end;
  }

  /* A field that holds a URL, a path or another long token takes the row. */
  .fui-form-grid > .fui-span-row {
    grid-column: 1 / -1;
  }

  @media (width < 40rem) {
    .fui-form-grid > .fui-span-2 {
      grid-column: auto;
    }
  }

  .fui-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default) var(--space-loose);
  }

  /* ---- R12. The navigation's count, honest ---- */

  .fui-nav-count {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  .fui-nav-entry[aria-current="page"] .fui-nav-count {
    color: inherit;
  }

  .fui-nav-count.fui-nav-count-unknown {
    color: var(--muted);
  }

  /* A count past 99 shows whole in the full sidebar, and as "99+" on the
     rail's badge, which stays on its glyph; its phrase is its name. */
  .fui-nav-count {
    flex: none;
  }

  .fui-nav-count-short {
    display: none;
  }

  @media (width >= 48rem) {
    .fui-sidebar-rail .fui-nav-count.is-long > .fui-nav-count-whole {
      display: none;
    }

    .fui-sidebar-rail .fui-nav-count.is-long > .fui-nav-count-short {
      display: inline;
    }

    /* The wider badge starts at the glyph's middle, so it covers only its
       corner and stays inside the rail. */
    .fui-sidebar-rail .fui-nav-count.is-long {
      inset: 0.125rem auto auto calc(50% + 0.125rem);
    }
  }

  /* The navigation is the shell's: the same metrics on every page,
     whatever the page's density (review round 1, item 7). */
  .fui-sidebar {
    --space-tight: 0.25rem;
    --space-default: 0.5rem;
    --control: 2.25rem;
  }

  /* The collapsed rail: the glyphs alone, each named by its title and its
     accessible name; the count rides on the glyph as a dot. */
  @media (width >= 48rem) {
    /* It stacks above the page's sticky heads and below the top bar, so an
       entry's tooltip is drawn over the page. */
    .fui-sidebar.fui-sidebar-rail {
      z-index: 25;
      width: 3.75rem;
      padding-inline: 0.5rem;
      overflow: visible;
    }

    /* A rail that draws no tooltip box of its own scrolls as the full
       sidebar does, so its foot stays in reach. */
    .fui-sidebar.fui-sidebar-rail:not(:has(.fui-tooltip)) {
      overflow-y: auto;
    }

    /* A rail entry's words show as its tooltip on hover and on keyboard
       focus, until Escape (WCAG 2.2 SC 1.4.13). */
    .fui-sidebar-rail:not([data-tips="off"]) .fui-nav-entry:is(:hover, :focus-visible) > .fui-tooltip {
      display: block;
    }

    .fui-sidebar-rail .fui-nav-entry {
      position: relative;
      justify-content: center;
      padding-inline: 0;
    }

    .fui-sidebar-rail .fui-nav-word {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .fui-sidebar-rail .fui-nav-count {
      position: absolute;
      inset: 0.125rem 0.125rem auto auto;
      min-width: 1rem;
      border-radius: 9999px;
      background: var(--accent);
      padding: 0 0.25rem;
      color: var(--accent-ink);
      font-size: var(--text-micro);
      line-height: var(--leading-micro);
      text-align: center;
    }
  }

  .fui-sidebar-foot {
    margin-block-start: 0.75rem;
    border-top: 1px solid var(--edge);
    padding-block-start: 0.5rem;
  }

  .fui-sidebar-foot > .fui-button {
    width: 100%;
    justify-content: flex-start;
  }

  .fui-sidebar-rail .fui-sidebar-foot > .fui-button {
    justify-content: center;
    padding-inline: 0;
  }

  /* The tooltip a rail glyph shows on hover or focus. */
  .fui-nav-entry > .fui-tooltip {
    display: none;
  }

  /* With anchor positioning the tooltip is placed beside its entry in the
     viewport's coordinates, so the rail keeps scrolling, by the wheel and
     by the focus, with no scrollbar that would squeeze its glyphs. */
  @supports (position-area: center inline-end) {
    @media (width >= 48rem) {
      .fui-sidebar.fui-sidebar-rail {
        overflow-y: auto;
        scrollbar-width: none;
      }

      .fui-sidebar-rail .fui-nav-list > li {
        anchor-scope: --fui-rail-entry;
      }

      .fui-sidebar-rail .fui-nav-list > li > .fui-nav-entry {
        anchor-name: --fui-rail-entry;
      }

      .fui-sidebar-rail .fui-nav-entry > .fui-tooltip {
        position: fixed;
        inset: auto;
        position-anchor: --fui-rail-entry;
        position-area: center inline-end;
        margin-inline-start: 0.5rem;
        transform: none;
      }
    }
  }

  .fui-tooltip {
    white-space: nowrap;
    position: absolute;
    inset: 50% auto auto calc(100% + 0.5rem);
    z-index: 36;
    transform: translateY(-50%);
    border-radius: var(--radius-control);
    background: var(--ink);
    padding: 0.25rem 0.5rem;
    color: var(--surface-raised);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 500;
    white-space: nowrap;
  }

  .fui-tooltip.fui-tooltip-below {
    inset: calc(100% + 0.375rem) 50% auto auto;
    transform: translateX(50%);
  }

  /* ---- R13. The masked identifier revealed, at any width ---- */

  /* The revealed value keeps its countdown beside it, and Hide and Copy
     keep each other's company on the next line when the row is narrow. */
  .fui-identifier-shown,
  .fui-identifier-tools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
  }

  .fui-identifier-shown > *,
  .fui-identifier-tools > *,
  .fui-identifier-shown > :where(leptos-island, leptos-children) > *,
  .fui-identifier-tools > :where(leptos-island, leptos-children) > * {
    white-space: nowrap;
  }

  /* A revealed value longer than its row breaks anywhere inside it, so
     it never widens the page (WCAG 2.2 SC 1.4.10). */
  .fui-identifier-shown > .fui-identifier-value {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .fui-identifier-expired {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-copy-done {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ok);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
  }

  /* ---- R14. The filter-aware empty state ---- */

  .fui-empty-filtered {
    border-style: solid;
    border-color: var(--edge);
    background: var(--surface-raised);
  }

  .fui-empty .fui-actions {
    justify-content: center;
  }

  /* ---- R15. Configuration editing (file and console) ---- */

  /* The revision strip under a page heading: what runs, what is drafted,
     who owns the section. */
  .fui-revision {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) var(--space-loose);
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    padding: 0.625rem var(--space-loose);
  }

  .fui-revision-text {
    display: grid;
    min-width: 0;
    flex: 1 1 18rem;
    gap: 0.125rem;
  }

  .fui-revision-text > strong {
    font-weight: 600;
  }

  .fui-revision-text > span {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-revision.fui-revision-draft {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent-tint) 60%, var(--surface-raised));
  }

  .fui-revision.fui-tone-warn,
  .fui-revision.fui-tone-bad,
  .fui-revision.fui-tone-ok {
    border-color: color-mix(in srgb, var(--tone) 40%, transparent);
    background: var(--tone-ground);
  }

  .fui-revision > .fui-icon {
    flex-shrink: 0;
    color: var(--tone, var(--accent));
  }

  /* How a change takes effect: at once, or at the next start. */
  .fui-effect {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 500;
    white-space: nowrap;
  }

  .fui-effect-live {
    color: var(--ok);
  }

  .fui-effect-restart {
    color: var(--warn);
  }

  /* Where a value came from when the file does not set it: the environment
     or the product's default, quiet beside the value. */
  .fui-setting-source {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .fui-setting-source > .fui-icon {
    flex-shrink: 0;
  }

  /* An editable value in place: the control where the value was, its
     running value under it while it differs. */
  .fui-config-input {
    display: grid;
    gap: 0.125rem;
    justify-items: end;
  }

  .fui-config-input > .fui-input {
    width: 5.5rem;
    min-height: var(--control-small);
    padding: 0.125rem 0.5rem;
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .fui-config-input > .fui-input.fui-config-changed {
    border-color: var(--accent);
    background: var(--accent-tint);
  }

  .fui-config-input > .fui-input[aria-invalid="true"] {
    border-color: var(--bad);
    background: var(--bad-ground);
  }

  .fui-config-was {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    white-space: nowrap;
  }

  .fui-config-error {
    max-width: 14rem;
    color: var(--bad);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    text-align: end;
  }

  .fui-error-summary {
    border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
    border-radius: var(--radius-card);
    background: var(--bad-ground);
    padding: 0.625rem var(--space-loose);
    color: var(--bad);
  }

  .fui-error-summary > p:first-child {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    font-weight: 600;
  }

  .fui-error-summary ul {
    margin: 0.25rem 0 0;
    padding-inline-start: 1.5rem;
  }

  .fui-error-summary a {
    color: inherit;
  }

  .fui-table:has(.fui-config-input) :is(th, td) {
    vertical-align: middle;
  }

  /* The mode card: the core that always stays in the file beside the
     one place everything else lives. */
  .fui-ownership {
    display: grid;
    gap: var(--space-loose);
  }

  @media (width >= 48rem) {
    .fui-ownership {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .fui-ownership > div {
    display: grid;
    align-content: start;
    gap: 0.375rem;
  }

  :is(.fui-small, .fui-help) code {
    font-size: var(--text-micro);

    line-height: var(--leading-small);
  }

  .fui-ownership code {
    font-size: var(--text-micro);

    line-height: var(--leading-small);
  }

  .fui-table-actions .fui-button {
    white-space: nowrap;
  }

  .fui-ownership h3 {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  /* ---- R16. The score scale, labelled at its marks ---- */

  .fui-score-scale-tick {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  svg.fui-score-scale {
    height: 2.75rem;
  }

  /* Labels too close for one row take more: the server works out the
     rows of a phone's card, drawn as they stand, and the row each takes
     from 40 rem, which the container query moves it to. A row is 14 px,
     the step of the labels' `y`. */
  .fui-score-scale-box {
    container-type: inline-size;
  }

  .fui-score-scale.fui-score-rows-2 {
    height: 58px;
  }

  .fui-score-scale.fui-score-rows-3 {
    height: 72px;
  }

  .fui-score-scale.fui-score-rows-4 {
    height: 86px;
  }

  @container (width >= 40rem) {
    .fui-score-scale.fui-score-wide-1 {
      height: 2.75rem;
    }

    .fui-score-scale.fui-score-wide-2 {
      height: 58px;
    }

    .fui-score-scale.fui-score-wide-3 {
      height: 72px;
    }

    .fui-score-scale.fui-score-wide-4 {
      height: 86px;
    }

    .fui-score-up-1 {
      transform: translateY(-14px);
    }

    .fui-score-up-2 {
      transform: translateY(-28px);
    }

    .fui-score-up-3 {
      transform: translateY(-42px);
    }

    .fui-score-down-1 {
      transform: translateY(14px);
    }

    .fui-score-down-2 {
      transform: translateY(28px);
    }

    .fui-score-down-3 {
      transform: translateY(42px);
    }
  }

  @media (width < 40rem) {
    .fui-score-scale-tick {
      display: none;
    }
  }

  /* ---- R17. Toasts in their region, and the popover form ---- */

  .fui-toast .fui-toast-text > strong {
    display: block;
    font-weight: 600;
  }

  .fui-toast .fui-toast-text > span {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-toast > :is(.fui-icon-button, .fui-toast-close) {
    margin: -0.25rem -0.375rem 0 0;
  }

  .fui-popover {
    position: absolute;
    z-index: 35;
    width: min(20rem, calc(100vw - 2rem));
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0.75rem var(--space-loose) var(--space-loose);
  }

  .fui-popover > * + *,
  .fui-popover > :where(leptos-island, leptos-children) > * + *,
  .fui-popover > * + :where(leptos-island, leptos-children) > :where(:first-child) {
    margin-block-start: 0.75rem;
  }

  .fui-popover-title {
    font-weight: 600;
  }

  /* ---- R19. The sign-in page: the card and its caption in one centred
     column, the title and the lines centred in the card. ---- */
  .fui-sign-in-stack {
    justify-items: center;
  }

  .fui-sign-in-title {
    margin: 0;
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    font-weight: 600;
    text-align: center;
  }

  .fui-sign-in-line {
    margin: 0;
    text-align: center;
  }

  /* ---- R19. A sign-in caption that keeps to the card ---- */

  .fui-sign-in-caption {
    width: min(24rem, 100%);
    margin-inline: auto;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    text-align: center;
  }

  /* ---- R20. An error page: the status, the sentence, the way on ---- */

  .fui-status-page {
    display: grid;
    justify-items: center;
    gap: var(--space-default);
    padding: 3rem var(--space-loose);
    text-align: center;
  }

  .fui-status-page-code {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }

  .fui-status-page h1 {
    font-size: var(--text-title);
    line-height: var(--leading-title);
  }

  .fui-status-page p {
    max-width: 34rem;
    color: var(--muted);
  }

  .fui-status-page .fui-actions {
    justify-content: center;
    margin-block-start: var(--space-default);
  }

  /* ---- R21. Settings rows: a label, its control hugging its options ---- */

  .fui-setting {
    display: grid;
    gap: 0.375rem;
  }

  .fui-setting + .fui-setting {
    margin-block-start: var(--space-loose);
    border-top: 1px solid var(--edge);
    padding-block-start: var(--space-loose);
  }

  .fui-setting > .fui-segmented {
    justify-self: start;
  }

  .fui-setting > .fui-label {
    font-weight: 500;
  }

  /* An option outside what the server allows: shown, struck, not offered. */
  .fui-segment:disabled {
    color: var(--muted);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.7;
  }

  .fui-segment:disabled:hover {
    background: transparent;
    color: var(--muted);
  }

  .fui-setting-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ok);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 500;
  }

  /* ---- R22. The history filter and the plain-text diff ---- */

  .fui-change-plain {
    font-family: var(--font-sans);
  }

  del.fui-change,
  ins.fui-change {
    text-decoration: none;
  }

  del.fui-change > .fui-change-text {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* A choice hugs its options (review round 1, item 33). */
  .fui-choice > .fui-segmented {
    width: fit-content;
    max-width: 100%;
  }

  /* The topbar search's answer list. */
  .fui-search {
    position: relative;
  }

  .fui-compare-switch {
    display: grid;
    gap: 0.375rem;
    justify-items: start;
  }

  /* ================================================================
     NEW (FerroFED): the components FerroFED needs beyond R1 to R29,
     designed once in the family's style for every console.
     ================================================================ */

  /* ---- F1. NEW (FerroFED). The revision lifecycle: saved, approved,
     applied, confirmed. One line of steps under a pending revision, so an
     operator reads where it stands and whose turn it is. A step is done
     (a filled check), current (a ring in the accent), waiting (a hollow
     dot) or not needed (a dash, its words muted). A phone stacks it. ---- */
  .fui-lifecycle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  .fui-lifecycle > li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.375rem;
    flex: 1 1 10rem;
    min-width: 0;
    padding-inline-end: 1rem;
  }

  /* The rule that joins a step's dot to the next step's, on the dots' line;
     the words sit under it, so the rule never crosses them. */
  .fui-lifecycle > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset: 0.625rem 0.25rem auto 1.75rem;
    border-top: 2px solid var(--edge-strong);
  }

  .fui-lifecycle > li.is-done:not(:last-child)::after {
    border-top-color: var(--ok);
  }

  .fui-lifecycle-dot {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--edge-strong);
    border-radius: 9999px;
    color: var(--muted);
  }

  .is-done > .fui-lifecycle-dot {
    border-color: var(--ok);
    background: var(--ok);
    color: var(--surface-raised);
  }

  .is-current > .fui-lifecycle-dot {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
  }

  .is-current > .fui-lifecycle-dot::after {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--accent);
  }

  .is-skipped > .fui-lifecycle-dot {
    border-style: dashed;
  }

  .is-failed > .fui-lifecycle-dot {
    border-color: var(--bad);
    background: var(--bad);
    color: var(--surface-raised);
  }

  .fui-lifecycle-text {
    display: grid;
    min-width: 0;
  }

  .fui-lifecycle-text > strong {
    font-size: var(--text-small);
    line-height: 1.25rem;
    font-weight: 600;
  }

  .fui-lifecycle-text > span {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .is-skipped .fui-lifecycle-text > strong,
  .is-waiting .fui-lifecycle-text > strong {
    color: var(--muted);
    font-weight: 500;
  }

  .is-failed .fui-lifecycle-text > strong {
    color: var(--bad);
  }

  @media (width < 40rem) {
    .fui-lifecycle {
      flex-direction: column;
      gap: 0;
    }

    .fui-lifecycle > li {
      flex: none;
      grid-template-columns: 1.25rem minmax(0, 1fr);
      column-gap: 0.625rem;
      padding: 0 0 0.75rem;
    }

    .fui-lifecycle > li:not(:last-child)::after {
      inset: 1.5rem auto 0.125rem 0.5625rem;
      border-top: 0;
      border-inline-start: 2px solid var(--edge-strong);
    }

    .fui-lifecycle > li.is-done:not(:last-child)::after {
      border-inline-start-color: var(--ok);
    }
  }

  /* The pending-revision card: the strip's words, its lifecycle under them,
     its actions at the end. */
  .fui-pending {
    display: grid;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--accent-tint) 60%, var(--surface-raised));
    padding: 0.75rem var(--space-loose);
    --lifecycle-ground: color-mix(in srgb, var(--accent-tint) 60%, var(--surface-raised));
  }

  .fui-pending.fui-tone-warn,
  .fui-pending.fui-tone-bad,
  .fui-pending.fui-tone-ok {
    border-color: color-mix(in srgb, var(--tone) 40%, transparent);
    background: var(--tone-ground);
    --lifecycle-ground: var(--tone-ground);
  }

  .fui-pending-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) var(--space-loose);
  }

  .fui-pending-head > .fui-icon {
    flex-shrink: 0;
    color: var(--tone, var(--accent));
  }

  .fui-pending-head > .fui-revision-text {
    flex: 1 1 18rem;
  }

  /* ---- F2. NEW (FerroFED). The commit-confirm countdown: an applied change
     to a credential or a binding section runs on trial until an operator
     confirms it; the ring empties toward the deadline and the time left is
     said in words beside it, with the clock time it ends. ---- */
  .fui-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  .fui-countdown > svg {
    width: 2rem;
    height: 2rem;
    transform: rotate(-90deg);
  }

  .fui-countdown-track {
    fill: none;
    stroke: color-mix(in srgb, var(--tone, var(--warn)) 22%, transparent);
    stroke-width: 3;
  }

  /* The ring sweeps between the seconds; reduced motion stops the sweep,
     and the ring steps. */
  .fui-countdown-left {
    fill: none;
    stroke: var(--tone, var(--warn));
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
  }

  .fui-countdown-words {
    display: grid;
    line-height: 1.15;
  }

  .fui-countdown-words > strong {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .fui-countdown-words > span {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* ---- F3. NEW (FerroFED). The write-only secret field: what is set now
     (by reference, never by value), and one choice of Keep, Set a value,
     Read from a file or Clear, which shows the one control it needs. The
     password field is never filled by the page. ---- */
  .fui-secret {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
    padding: 0.75rem;
  }

  .fui-secret-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem var(--space-loose);
  }

  .fui-secret-head > .fui-label {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-secret-now {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-secret-now > code {
    overflow-wrap: anywhere;
    font-size: var(--text-micro);
    line-height: var(--leading-small);
  }

  .fui-secret-now.is-unset {
    font-style: italic;
  }

  .fui-secret-now.is-broken {
    color: var(--bad);
  }

  .fui-secret .fui-segmented {
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* On a phone the choices stack whatever their number, so a secret that
     is not set (three choices) never wraps one under two. */
  @media (width < 40rem) {
    .fui-secret .fui-segmented {
      display: grid;
      width: 100%;
      grid-auto-flow: row;
    }
  }

  /* The chosen choice's control follows the choices at the field's own
     gap; Keep reveals no control, and so no gap. */
  .fui-secret > .fui-reveal {
    gap: 0;
  }

  .fui-secret > .fui-reveal > .fui-reveal-parts > .fui-revealed:not(:empty) {
    margin-block-start: 0.5rem;
  }

  .fui-secret-control {
    display: grid;
    gap: 0.25rem;
  }

  .fui-secret-control .fui-input {
    max-width: 32rem;
  }

  .fui-secret-clear {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--warn);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* ---- F4. NEW (FerroFED). The provenance tag: where a resource comes from
     when the console cannot change it, whatever the mode: the care
     services directory, the gateway's reserved namespace, or the
     stored-query store whose versions never change. A lock says
     read-only before the words do. ---- */
  .fui-tag.fui-tag-locked {
    border-style: dashed;
    background: transparent;
    color: var(--muted);
  }

  .fui-tag.fui-tag-locked > .fui-icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* ---- F5. NEW (FerroFED). The fan-out outcome: what each member endpoint
     did for one federated answer. A completeness line first, in words, then
     one entry per endpoint: its status as a word and a dot, its rows and
     latency, and the node's error when it failed. An endpoint left out of
     scope is drawn dashed, never hidden. ---- */
  .fui-fanout {
    display: grid;
    gap: 0.75rem;
  }

  .fui-fanout-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .fui-fanout-summary > strong {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    font-variant-numeric: tabular-nums;
  }

  .fui-fanout-summary > .fui-muted {
    font-size: var(--text-small);

    line-height: var(--leading-body);
  }

  .fui-fanout-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-fanout-item {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    border: 1px solid var(--edge);
    border-inline-start: 3px solid var(--tone, var(--edge-strong));
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    padding: 0.5rem 0.75rem;
  }

  .fui-fanout-item.is-excluded {
    border-style: dashed;
    border-inline-start-style: solid;
    background: transparent;
  }

  .fui-fanout-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
  }

  /* A node's name wraps after its dots, or anywhere when a label is
     longer than the row, so it never runs into the next node. */
  .fui-fanout-line > code {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
  }

  .fui-fanout-meta {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
  }

  .fui-fanout-error {
    color: var(--bad);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    overflow-wrap: anywhere;
  }

  /* ---- F6. NEW (FerroFED). The replica line and the replica list. A view
     that one gateway replica answered says which, quietly, under its
     panel; configuration lists each replica with the revision it runs and
     whether it is in step with the store. ---- */
  .fui-replica-line {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-replica-line code {
    font-size: var(--text-micro);

    line-height: var(--leading-micro);
  }

  .fui-replicas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-replicas > li {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
  }

  .fui-replicas code {
    font-size: var(--text-micro);

    line-height: var(--leading-small);
  }

  /* ---- F5 and F6 drawn by the library. A node's protocol term sits
     quietly after its state; the replica line sits under the page header,
     closer to it than to the first card, its words wrapping as a unit. ---- */
  .fui-fanout-item.is-excluded .fui-fanout-error {
    color: var(--muted);
  }

  .fui-fanout-term {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-fanout-term > code {
    font-size: inherit;
    line-height: inherit;
  }

  .fui-page-header:has(+ .fui-replica-line) {
    margin-block-end: 0.5rem;
  }

  .fui-page-header + .fui-replica-line {
    display: flex;
    margin-block: 0 1.5rem;
  }

  /* ---- F9 drawn by the library: the canvas scrolls inside its frame, so
     the zoom cluster and the minimap stay put while it pans; a zoomed
     drawing takes the width its attributes give it, never a style, and a
     federation taller than the frame scrolls in it at any zoom. ---- */
  .fui-topology-scroll {
    max-height: 70vh;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .fui-topology-scroll:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .fui-topology-scroll > .fui-pipeline-stage {
    justify-content: center;
  }

  .fui-topology-scroll > .fui-pipeline-stage > .fui-topology-svg {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .fui-topology-scroll > .fui-pipeline-stage.is-zoomed {
    width: max-content;
    justify-content: start;
  }

  .fui-topology-scroll > .fui-pipeline-stage.is-zoomed > .fui-topology-svg {
    max-width: none;
  }

  /* A cluster control names itself above it only under the pointer or
     the focus, paint only (family rule 3). */
  .fui-topology-zoom .fui-tooltip {
    visibility: hidden;
    pointer-events: none;
  }

  .fui-topology-zoom .fui-anchor:is(:hover, :focus-within) > .fui-tooltip {
    visibility: visible;
  }

  .fui-tree-fold {
    display: inline-flex;
    flex: none;
    color: var(--muted);
  }

  .fui-tree-fold:hover {
    color: var(--ink);
  }

  .fui-topology-list .fui-tree-name > a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* ---- F7. NEW (FerroFED). Repeatable rows: a list of the same few fields
     (a query parameter, an endpoint of a member), each row removable by
     its own labelled button at its end, and one Add button under the
     list. A row with several fields is a sub-card with its own heading.
     On a phone the fields stack and the remove button stays on the row's
     first line, beside the first field (or the sub-card's heading). ---- */
  .fui-repeater {
    display: grid;
    gap: 0.5rem;
  }

  .fui-repeater-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    align-items: end;
    gap: 0.5rem;
  }

  .fui-repeater-row > .fui-icon-button {
    margin-block-end: 0.125rem;
  }

  /* A row of one field: the field takes the row, Remove its end. */
  .fui-repeater-row.fui-repeater-one {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fui-repeater-row .fui-field {
    min-width: 0;
  }

  .fui-repeater-head {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 2.25rem;
    gap: 0.5rem;
  }

  .fui-repeater-head.is-one {
    grid-template-columns: minmax(0, 1fr) 2.25rem;
  }

  .fui-repeater-head > .fui-label {
    font-size: var(--text-small);

    line-height: var(--leading-body);
  }

  .fui-repeater-row .fui-input[aria-invalid="true"] {
    border-color: var(--bad);
  }

  .fui-repeater-card {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
    padding: 0.75rem var(--space-loose) var(--space-loose);
  }

  .fui-repeater-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default);
  }

  .fui-repeater-card-head h3 {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  .fui-repeater-card.is-new {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }

  /* The island's list and the wrapper that keeps a row and its error line
     together, so Remove takes both; neither draws a box, so the rows lay
     out as the list's own children. */
  .fui-repeat,
  .fui-repeat-rows {
    min-width: 0;
  }

  .fui-repeat-item {
    display: contents;
  }

  /* Why a kept row cannot be removed, under it. */
  .fui-repeat-kept {
    margin: 0;
  }

  @media (width < 40rem) {
    .fui-repeater-head {
      display: none;
    }

    .fui-repeater-row {
      grid-template-columns: minmax(0, 1fr) auto;
      border-bottom: 1px solid var(--edge);
      padding-block-end: 0.5rem;
    }

    .fui-repeater-row > :not(.fui-icon-button):not(:first-child) {
      grid-column: 1 / -1;
    }

    .fui-repeater-row > .fui-icon-button {
      grid-column: 2;
      grid-row: 1;
    }
  }

  /* ---- F8. NEW (FerroFED). The editor's toolbar: the editor's own state
     line above the AQL (the language, the line count, the parameters it
     names) with its tools at the end, and the run row under it. ---- */
  .fui-editor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem var(--space-default);
    margin-block-end: 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-editor-bar .fui-actions {
    gap: 0.25rem;
  }

  .fui-run-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) var(--space-loose);
  }

  .fui-run-row > p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-editor.is-readonly {
    background: var(--surface-sunken);
  }

  .fui-editor.is-readonly .fui-editor-stack {
    min-height: 0;
  }

  .fui-editor[aria-invalid="true"],
  .fui-editor:has(> .fui-editor-stack > .fui-editor-input[aria-invalid="true"]) {
    border-color: var(--bad);
  }

  /* R9, extended for FerroFED: a work-list row whose second line is a
     quiet subtitle (no "and") and whose facts carry no "waiting" suffix,
     so any list of records (members, stored queries) takes the compact
     phone card. NEW (FerroFED). */
  @media (width < 40rem) {
    .fui-worklist .fui-table-stack .fui-table tbody [data-role="sub"] {
      order: 1;
      flex: 1 1 0;
      overflow: hidden;
      color: var(--muted);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="sub"] > span {
      display: inline;
    }

    .fui-worklist .fui-table-stack .fui-table tbody [data-role="meta-q"] {
      order: 4;
      flex: 0 0 auto;
      color: var(--muted);
      white-space: nowrap;
    }
  }

  /* F3's companion, a unit after a number field (ms, s, rows), is R10's
     suffix (`fui-input-suffix`). */

  @media (width < 40rem) {
    .fui-worklist-tools > .fui-field.fui-field-grow {
      grid-column: 1 / -1;
    }
  }

  /* ---- F10. NEW (FerroFED). The nested sidebar section: a parent entry
     whose current item expands under it with its children, each child with
     a health dot, the parent with a count badge and its worst child's dot;
     only the current parent expands. Navigation items only: finding another
     parent is the top-bar search's job. A tree line ties the children to it. ---- */
  .fui-nav-entry[aria-current="location"] {
    color: var(--ink);
    font-weight: 600;
  }

  .fui-nav-tree,
  .fui-nav-children {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-nav-tree {
    margin-block: 0.125rem 0.25rem;
    margin-inline-start: 1.25rem;
    border-inline-start: 1px solid var(--edge-strong);
    padding-inline-start: 0.375rem;
  }

  .fui-nav-children {
    margin-inline-start: 0.875rem;
  }

  .fui-nav-tree .fui-nav-entry {
    gap: 0.5rem;
    padding-block: 0.3125rem;
    padding-inline: 0.5rem;
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-nav-tree .fui-nav-word {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The link to every child past the ones drawn reads as a link. */
  .fui-nav-tree .fui-nav-all {
    color: var(--accent);
  }

  .fui-nav-child code {
    font-size: var(--text-micro);

    line-height: var(--leading-small);
    color: inherit;
  }

  .fui-nav-badge {
    margin-inline-start: auto;
    min-width: 1.25rem;
    border-radius: 9999px;
    background: var(--surface-sunken);
    padding: 0 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: 1.125rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .fui-nav-entry[aria-current="page"] .fui-nav-badge {
    background: var(--surface-raised);
    color: var(--accent);
  }

  /* A health dot: a filled circle in the tone, a ring when excluded; its
     state is its accessible name, never the colour alone. */
  .fui-dot {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--tone-dot, var(--tone));
  }

  .fui-dot.fui-tone-warn {
    border-radius: 0.125rem;
    transform: rotate(45deg);
  }

  /* Unreachable is a cross (F12, family rule 12), the same mark the
     topology draws at the end of an unreachable edge. A touch larger than
     the box it keeps, so the arms read at 1x. */
  .fui-dot.fui-tone-bad {
    border-radius: 0;
    width: 0.625rem;
    height: 0.625rem;
    margin: -0.0625rem;
    clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
  }

  .fui-dot.is-muted,
  .fui-dot.fui-tone-neutral {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--muted);
  }

  /* The rail leaves the nested section out; the drawer below 48 rem keeps
     it, whatever the rail's state. */
  @media (width >= 48rem) {
    .fui-sidebar-rail .fui-nav-tree {
      display: none;
    }
  }

  /* ---- F12. NEW (FerroFED). A state in words with its dot (the shape
     differs per state: circle, diamond, cross, ring), and the probe
     sparkline: the last probes' latency, the degraded threshold dashed, a
     failed probe marked. ---- */
  .fui-state {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--tone);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 500;
    white-space: nowrap;
  }

  .fui-state.is-muted {
    color: var(--muted);
  }

  .fui-state .fui-status-detail {
    color: var(--muted);
    font-weight: 400;
  }

  .fui-spark {
    display: block;
    width: 100%;
    height: 3.5rem;
    overflow: visible;
  }

  .fui-spark-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }

  .fui-spark-budget {
    stroke: var(--warn);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
  }

  .fui-spark-fail {
    fill: var(--bad);
  }

  .fui-spark-legend {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  /* ---- F9. NEW (FerroFED). The topology graph (FerroUI `topology`): a
     left-to-right layered graph in one SVG, the root at the start, groups
     drawn as quiet bands that collapse to their parent; nodes are cards with
     a tone bar, a glyph, a name and a state line; edges say their state by
     colour and line style and carry a quiet label (p50 and last probe). The
     canvas zooms, pans and fits, with a minimap when the graph is large; a
     side-panel slot opens beside it; the List twin holds the same data. ---- */
  .fui-topology {
    display: grid;
    gap: 0.75rem;
  }

  .fui-topology-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .fui-topology-find {
    position: relative;
    flex: 0 1 15rem;
    min-width: 12rem;
  }

  .fui-topology-find > .fui-search-glyph {
    position: absolute;
    inset: 0 auto 0 0.625rem;
    display: flex;
    align-items: center;
    color: var(--muted);
  }

  .fui-topology-find > .fui-input {
    width: 100%;
    padding-inline-start: 2.125rem;
  }

  .fui-topology-states .fui-chip-check {
    gap: 0.375rem;
  }

  .fui-topology-live .fui-check {
    align-items: center;
  }

  .fui-topology-updated {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-inline-start: auto;
  }

  .fui-topology-updated .fui-select {
    width: auto;
  }

  .fui-topology-map {
    display: grid;
    gap: 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    overflow: hidden;
  }

  .fui-topology-map.has-panel {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .fui-topology-canvas {
    position: relative;
    min-height: 16rem;
    overflow: hidden;
    clip-path: inset(0);
    background-color: var(--surface);
    background-image: radial-gradient(var(--edge) 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 1rem 1rem 3.5rem;
    cursor: grab;
  }

  .fui-topology > .fui-topology-canvas {
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
  }

  .fui-topology-stage {
    transform-origin: 0 0;
  }

  .fui-topology-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-sans);
  }

  .fui-topology-stage > .fui-topology-svg {
    width: auto;
    max-width: none;
  }

  .fui-topology-band {
    fill: var(--surface-raised);
    stroke: var(--edge);
    stroke-dasharray: 3 3;
  }

  .fui-topology-skel {
    fill: var(--surface-sunken);
    stroke: var(--edge);
  }

  /* Nodes. */
  .fui-tnode {
    cursor: pointer;
  }

  .fui-tnode-box {
    fill: var(--surface-raised);
    stroke: var(--edge-strong);
    stroke-width: 1;
  }

  .fui-tnode-bar {
    fill: var(--tone);
  }

  .fui-tnode-glyph {
    color: var(--muted);
  }

  .fui-tnode-name {
    fill: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-weight: 600;
  }

  .fui-tnode-mono {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-tnode-line {
    fill: var(--tone);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 500;
  }

  .fui-tnode.fui-tone-ok .fui-tnode-line {
    fill: var(--muted);
  }

  .fui-tnode-toggle {
    color: var(--muted);
  }

  .fui-tnode-gateway .fui-tnode-box {
    fill: var(--accent-tint);
    stroke: var(--accent);
    stroke-width: 1.5;
  }

  .fui-tnode-gateway .fui-tnode-glyph,
  .fui-tnode-gateway .fui-tnode-name {
    color: var(--accent);
    fill: var(--accent);
  }

  .fui-tnode-gateway .fui-tnode-bar {
    fill: var(--accent);
  }

  .fui-tnode-org .fui-tnode-box,
  .fui-tnode-group .fui-tnode-box {
    stroke-width: 1.5;
  }

  .fui-tnode.is-muted {
    opacity: 0.55;
  }

  .fui-tnode.is-planned .fui-tnode-box {
    fill: transparent;
    stroke-dasharray: 5 4;
  }

  .fui-tnode.is-planned .fui-tnode-bar {
    fill: var(--edge-strong);
  }

  .fui-tnode.is-planned .fui-tnode-line {
    fill: var(--muted);
  }

  .fui-tnode:hover .fui-tnode-box,
  .fui-tnode.is-path .fui-tnode-box {
    stroke: var(--ink);
  }

  .fui-tnode.is-selected .fui-tnode-box {
    stroke: var(--accent);
    stroke-width: 2.5;
  }

  .fui-tnode.is-focused .fui-tnode-box,
  .fui-tnode:focus-visible .fui-tnode-box {
    outline: none;
    stroke: var(--focus);
    stroke-width: 2.5;
  }

  .fui-tnode.is-focused,
  .fui-tnode:focus-visible {
    outline: none;
    filter: drop-shadow(0 0 0.1px var(--focus));
  }

  .fui-tnode.is-dim,
  .fui-edge.is-dim,
  .fui-edge-label.is-dim {
    opacity: 0.22;
  }

  /* Edges: colour and line style both say the state. */
  .fui-edge {
    fill: none;
    stroke-width: 2;
  }

  .fui-edge-ok {
    stroke: var(--ok);
  }

  .fui-edge-warn {
    stroke: var(--warn);
    stroke-dasharray: 9 5;
  }

  .fui-edge-bad {
    stroke: var(--bad);
    stroke-width: 2.5;
    stroke-dasharray: 0.1 6;
    stroke-linecap: round;
  }

  .fui-edge-neutral {
    stroke: var(--muted);
    stroke-dasharray: 10 4 1.5 4;
  }

  .fui-edge-muted {
    stroke: var(--edge-strong);
    stroke-width: 1.25;
    opacity: 0.7;
  }

  .fui-edge-planned {
    stroke: var(--muted);
    stroke-width: 1.25;
    stroke-dasharray: 4 4;
  }

  .fui-edge-cross circle {
    fill: var(--surface-raised);
    stroke: var(--bad);
    stroke-width: 1.5;
  }

  .fui-edge-cross path {
    stroke: var(--bad);
    stroke-width: 1.75;
    stroke-linecap: round;
  }

  .fui-edge-label rect {
    fill: var(--surface-raised);
    stroke: var(--edge);
  }

  .fui-edge-label text {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
  }

  .has-hover .fui-edge:not(.is-path),
  .has-hover .fui-edge-label:not(.is-path),
  .has-hover .fui-tnode-node:not(.is-path),
  .has-hover .fui-tnode-svc,
  .has-hover .fui-tnode-org:not(.is-path),
  .has-hover .fui-tnode-group {
    opacity: 0.3;
  }

  .has-hover .fui-edge.is-path {
    stroke-width: 3.5;
  }

  .fui-tdot {
    stroke: none;
  }

  .fui-tdot.fui-tone-ok,
  .fui-tdot.fui-tone-warn,
  .fui-tdot.fui-tone-bad {
    fill: var(--tone);
  }

  .fui-tdot-ring {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.5;
  }

  /* Unreachable on a card is a cross drawn as two strokes (family rule 12). */
  .fui-tdot.fui-tdot-cross {
    fill: none;
    stroke: var(--tone);
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  .fui-traffic {
    fill: var(--accent);
    stroke: var(--surface-raised);
    stroke-width: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .fui-topology-traffic {
      display: none;
    }
  }

  /* Zoom, minimap, hint. */
  .fui-topology-zoom {
    position: absolute;
    inset: auto 0.75rem 0.75rem auto;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    padding: 0.125rem;
  }

  .fui-topology-zoom-level {
    min-width: 2.75rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .fui-topology-minimap {
    position: absolute;
    inset: auto auto 0.75rem 0.75rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    padding: 0.25rem;
  }

  .fui-topology-minimap svg {
    display: block;
  }

  .fui-minimap-node {
    fill: var(--tone, var(--edge-strong));
    opacity: 0.75;
  }

  .fui-minimap-view {
    fill: var(--accent-tint);
    stroke: var(--accent);
    stroke-width: 1.5;
  }

  .fui-topology-hint {
    position: absolute;
    inset: 0.75rem 50% auto auto;
    transform: translateX(50%);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    border-radius: 9999px;
    background: var(--ink);
    padding: 0.25rem 0.75rem;
    color: var(--surface-raised);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    white-space: nowrap;
  }

  .fui-topology-canvas-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-loose);
    padding-block: 2rem;
  }

  .fui-topology-svg-lone {
    width: 15rem;
  }

  /* The side panel slot: beside the canvas, never over it. */
  .fui-topology-panel {
    border-inline-start: 1px solid var(--edge);
    background: var(--surface-raised);
    min-width: 0;
  }

  .fui-topology-panel .fui-side-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--edge);
    padding: 0.75rem var(--space-loose);
  }

  .fui-topology-panel .fui-side-panel-body {
    padding: 0.75rem var(--space-loose) var(--space-loose);
  }

  /* The legend. */
  .fui-topology-legend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
  }

  .fui-topology-legend-list > li {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.5rem;
    align-items: center;
  }

  .fui-topology-legend-list > li > .fui-small {
    grid-column: 2;
  }

  .fui-legend-word {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
  }

  /* The List twin: an indented tree, the same columns at every width, scoped
     to the list so the base tree (and M1) keep their own rows. */
  .fui-topology-list {
    margin: 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    padding: 0.25rem 0;
    list-style: none;
  }

  .fui-topology-list .fui-tree-row {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1fr) minmax(7rem, 1fr) minmax(9rem, 1.2fr) auto;
    align-items: center;
    gap: 0.25rem 1rem;
    border-bottom: 1px solid var(--edge);
    padding: 0.375rem var(--space-loose);
    min-height: 2.75rem;
  }

  .fui-topology-list .fui-tree-row:last-child {
    border-bottom: 0;
  }

  .fui-topology-list .fui-tree-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .fui-topology-list .fui-tree-name > .fui-icon {
    flex: none;
    color: var(--muted);
  }

  .fui-topology-list .fui-tree-l2 > .fui-tree-name {
    padding-inline-start: 1.25rem;
    font-weight: 600;
  }

  .fui-topology-list .fui-tree-l3 > .fui-tree-name {
    padding-inline-start: 3.625rem;
  }

  .fui-topology-list .fui-tree-row.is-planned {
    color: var(--muted);
  }

  .fui-topology-list .fui-tree-act {
    justify-self: end;
  }

  /* Map and List: the view switch decides; "auto" is the map on a wide
     screen and the list on a phone. */
  .fui-topology-view-map .fui-topology-listwrap,
  .fui-topology-view-list .fui-topology-mapwrap,
  .fui-topology-view-auto .fui-topology-listwrap {
    display: none;
  }

  .fui-view-switch .fui-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
  }

  @media (width < 48rem) {
    .fui-topology-view-auto .fui-topology-listwrap {
      display: block;
    }

    .fui-topology-view-auto .fui-topology-mapwrap {
      display: none;
    }

    .fui-view-auto .fui-view-map[aria-pressed="true"] {
      --segment-ring: transparent;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
    }

    .fui-view-auto .fui-view-list {
      --segment-ring: var(--accent-ink);
      background: var(--accent);
      color: var(--accent-ink);
    }

    .fui-topology-map.has-panel {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-topology-panel {
      border-inline-start: 0;
      border-top: 1px solid var(--edge);
    }

    /* A name keeps its words whole beside its state, which wraps instead,
       and a note takes a line of its own. */
    .fui-topology-list .fui-tree-row {
      grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content);
      gap: 0.125rem 0.5rem;
    }

    .fui-topology-list .fui-tree-row > :nth-child(3),
    .fui-topology-list .fui-tree-row > :nth-child(4) {
      grid-column: 1;
      padding-inline-start: inherit;
    }

    .fui-topology-list .fui-tree-row > :nth-child(4) {
      grid-column: 1 / -1;
    }

    .fui-topology-list .fui-tree-row > :nth-child(2) > .fui-state {
      flex-wrap: wrap;
      row-gap: 0;
    }

    .fui-topology-list .fui-tree-l3 > :nth-child(3),
    .fui-topology-list .fui-tree-l3 > :nth-child(4) {
      padding-inline-start: 3.625rem;
    }

    .fui-topology-list .fui-tree-l2 > :nth-child(3),
    .fui-topology-list .fui-tree-l2 > :nth-child(4) {
      padding-inline-start: 1.25rem;
    }

    .fui-topology-list .fui-tree-row > :nth-child(2) {
      grid-row: 1;
      grid-column: 2;
    }

    .fui-topology-list .fui-tree-act {
      grid-row: 2;
      grid-column: 2;
    }

    .fui-topology-list .fui-tree-l3 > .fui-tree-name {
      padding-inline-start: 2rem;
    }

    .fui-topology-list .fui-tree-l3 > :nth-child(3),
    .fui-topology-list .fui-tree-l3 > :nth-child(4) {
      padding-inline-start: 2rem;
    }

    .fui-topology-updated {
      margin-inline-start: 0;
    }

    .fui-topology-find {
      flex: 1 1 100%;
    }
  }

  /* ---- F13. NEW (FerroFED, for every console). The anchored menu, redone:
     4 px from its trigger, aligned to its end edge, flipped up when there is
     no room; a raised surface with a full border, the card radius and a soft
     shadow, above the content and never clipped by it. Items in the ink with
     a muted icon, 36 px rows (40 on touch), fitted to the longest label
     between 12 and 20 rem; hover and keyboard focus share a neutral tint, the
     keyboard adds the ring; a destructive item is danger-coloured at rest,
     on the danger ground when hovered, last after a separator; disabled is
     muted with its reason in the tooltip. A row menu is a bottom sheet with
     48 px rows and Cancel below 40 rem. ---- */
  .fui-menu.fui-menu-anchored {
    inset: calc(100% + 4px) 0 auto auto;
    z-index: 60;
    width: max-content;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: 0 8px 24px -6px rgb(15 23 42 / 0.18), 0 2px 6px -2px rgb(15 23 42 / 0.12);
    padding: 0.25rem;
  }

  .fui-menu.fui-menu-anchored.fui-menu-up {
    inset: auto 0 calc(100% + 4px) auto;
  }

  .fui-menu .fui-menu-items {
    gap: 1px;
  }

  .fui-menu :is(a, button).fui-menu-item,
  .fui-column .fui-menu a.fui-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    border-radius: calc(var(--radius-card) - 0.25rem);
    padding: 0.375rem 0.625rem;
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--leading-small);
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .fui-menu .fui-menu-item > .fui-icon {
    flex: none;
    color: var(--muted);
  }

  .fui-menu-item-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* An item's words: the menu fitted to the longest, up to its widest,
     past which they wrap. */
  .fui-menu-item-label {
    min-width: 0;
  }

  .fui-menu-item-desc {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    white-space: normal;
  }

  .fui-menu .fui-menu-item > .fui-kbd {
    margin-inline-start: 1rem;
    border-color: var(--edge);
    background: transparent;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-menu .fui-menu-item:is(:hover, :focus-visible) {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .fui-menu .fui-menu-item:is(:hover, :focus-visible) > .fui-icon {
    color: var(--ink);
  }

  .fui-menu .fui-menu-item:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-menu :is(a, button).fui-menu-item.fui-menu-danger,
  .fui-menu .fui-menu-item.fui-menu-danger > .fui-icon {
    color: var(--bad);
  }

  .fui-menu .fui-menu-item.fui-menu-danger:is(:hover, :focus-visible) {
    background: var(--bad-ground);
    color: var(--bad);
  }

  .fui-menu .fui-menu-item.fui-menu-danger:is(:hover, :focus-visible) > .fui-icon {
    color: var(--bad);
  }

  .fui-menu .fui-menu-item[aria-disabled="true"],
  .fui-menu .fui-menu-item[aria-disabled="true"] > .fui-icon {
    color: var(--muted);
    opacity: 0.7;
    cursor: not-allowed;
  }

  .fui-menu .fui-menu-item[aria-disabled="true"]:hover {
    background: transparent;
  }

  .fui-menu .fui-menu-sep {
    margin: 0.25rem 0.375rem;
  }

  .fui-menu-cancel,
  .fui-menu-sheet-title {
    display: none;
  }

  /* A form inside a menu (the theme choice, Sign out) draws no box: its
     label, its group and its button are the menu's own rows. */
  .fui-menu-theme,
  .fui-menu-form {
    display: contents;
  }

  /* The user menu is a popover in the top layer, so it is placed under the
     top bar's end, where its button sits; below 40 rem it is the sheet. */
  @media (width >= 40rem) {
    .fui-menu.fui-menu-anchored.fui-user-menu:popover-open {
      position: fixed;
      inset: calc(var(--bar) / 2 + 1.25rem) var(--space-loose) auto auto;
      max-height: calc(100dvh - var(--bar) / 2 - 1.25rem - var(--space-loose));
    }
  }

  /* From 48 rem up the operator's button gives way in the end through its
     anchor: its name ends in an ellipsis, and the button's title carries all
     of it. Below 48 rem the name is hidden, so the end keeps its parts'
     width and the lockup's name gives way, even when a classic scrollbar
     takes 15 px of a 40 rem window (FerroUI #234). */
  @media (width >= 48rem) {
    .fui-topbar-end .fui-anchor:has(> .fui-operator > .fui-operator-name) {
      min-width: 0;
      flex-shrink: 1;
    }
  }

  @media (width < 48rem) {
    .fui-topbar-end {
      min-width: max-content;
    }

    /* The lockup starts from nothing, so the row never breaks before the
       end, and grows to its whole name where the end leaves room. */
    .fui-topbar-row > .fui-lockup {
      max-width: max-content;
      flex: 1 1 0;
    }
  }

  .fui-anchor > .fui-operator {
    min-width: 0;
  }

  /* The trigger says the menu is open. */
  :is(.fui-icon-button, .fui-button)[aria-haspopup][aria-expanded="true"] {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  /* An open menu rises above the rows and panels after it; a menu in a
     closed `<details>` is not open. */
  tr:has(> td .fui-menu:not(details:not([open]) *)),
  td:has(> .fui-anchor > .fui-menu),
  td:has(details[open] > .fui-menu),
  .fui-table-scroll:has(.fui-menu:not(details:not([open]) *)) {
    z-index: 50;
  }

  .fui-table-scroll:has(.fui-menu:not(details:not([open]) *)) {
    overflow: visible;
    clip-path: none;
  }

  @media (pointer: coarse) {
    .fui-menu :is(a, button).fui-menu-item {
      min-height: 2.5rem;
    }
  }

  @media (width < 40rem) {
    .fui-menu.fui-menu-anchored.fui-menu-sheet {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 80;
      width: 100%;
      max-width: none;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      max-height: calc(100dvh - 1rem);
      border-width: 1px 0 0;
      padding: 0.5rem 0.75rem 1rem;
      box-shadow: 0 -8px 24px -8px rgb(15 23 42 / 0.25);
    }

    .fui-menu-sheet .fui-menu-sheet-title {
      display: block;
      margin: 0.25rem 0.5rem 0.5rem;
      color: var(--muted);
      font-size: var(--text-small);
      line-height: var(--leading-body);
      font-weight: 600;
      white-space: normal;
    }

    .fui-menu-sheet :is(a, button).fui-menu-item {
      min-height: 3rem;
      font-size: var(--text-body);
      line-height: var(--leading-small);
    }

    /* A sheet taller than the screen scrolls under its Cancel, which stays
       in sight at its foot. */
    .fui-menu-sheet .fui-menu-cancel {
      position: sticky;
      inset-block-end: 0;
      display: block;
      width: 100%;
      min-height: 3rem;
      margin-block-start: 0.5rem;
      border: 1px solid var(--edge-strong);
      border-radius: var(--radius-control);
      background: var(--surface-raised);
      color: var(--ink);
      font: inherit;
      font-weight: 600;
    }

    /* The sheet carries its own scrim: a spread shadow drawn under the
       sheet, so no stacking context between them can put the scrim on top. */
    .fui-menu.fui-menu-anchored.fui-menu-sheet {
      box-shadow: 0 -8px 24px -8px rgb(15 23 42 / 0.25), 0 0 0 100vmax var(--scrim);
    }
  }

  /* The nested sidebar's parent keeps its full name: two lines at most. */
  .fui-nav-tree .fui-nav-parent .fui-nav-word {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  .fui-nav-tree .fui-nav-parent {
    align-items: flex-start;
  }

  .fui-nav-tree .fui-nav-parent > .fui-dot {
    margin-block-start: 0.375rem;
  }

  /* ---- F14. NEW (FerroFED, for every console). The action group: one
     primary action and one More menu button in a title row; an optional
     split button whose menu holds variants of the same action. ---- */
  /* The group stays on one line while it fits; on a narrow screen More
     wraps under a long primary instead of leaving the window, and the
     primary's words wrap inside it (WCAG 2.2 SC 1.4.10). */
  .fui-action-group {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .fui-more > .fui-icon:last-child {
    margin-inline-start: 0.125rem;
  }

  .fui-split-button {
    display: inline-flex;
  }

  .fui-split-button > .fui-button {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .fui-split-button .fui-split-toggle {
    min-width: 2.25rem;
    border-inline-start: 1px solid color-mix(in srgb, var(--accent-ink) 40%, var(--accent));
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    padding-inline: 0.5rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }

  .fui-split-button .fui-split-toggle[aria-expanded="true"] {
    background: var(--accent-hover);
    color: var(--accent-ink);
  }

  /* F13 and R29 on their native floor: the trigger is the summary of a
     `<details>`, so the menu opens with no script; its marker is dropped,
     an open menu's trigger looks pressed as aria-expanded makes it once
     the island runs, and a form around an item adds no box. */
  details.fui-anchor,
  details.fui-select-anchor {
    display: inline-block;
  }

  :is(.fui-anchor, .fui-select-anchor) > summary {
    list-style: none;
    cursor: pointer;
  }

  :is(.fui-anchor, .fui-select-anchor) > summary::-webkit-details-marker {
    display: none;
  }

  details[open] > summary:is(.fui-icon-button, .fui-button):not(.fui-split-toggle) {
    background: var(--surface-sunken);
    color: var(--ink);
  }

  .fui-split-button details[open] > .fui-split-toggle {
    background: var(--accent-hover);
    color: var(--accent-ink);
  }

  details[open] > .fui-select-button {
    border-color: var(--focus);
    outline: 2px solid var(--focus);
    outline-offset: 0;
  }

  .fui-menu-form,
  .fui-action-form {
    display: contents;
  }

  /* An option of the listbox is a link or a form's button: the row the
     listbox draws, with the menu's focus ring. */
  :is(a, button).fui-listbox-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
  }

  :is(a, button).fui-listbox-option[aria-selected="true"] {
    color: var(--accent);
  }

  .fui-listbox-option:focus-visible {
    background: var(--surface-sunken);
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  @media (width < 40rem) {
    .fui-select-anchor > .fui-listbox {
      overflow-y: auto;
      padding: 0.5rem 0.75rem 1rem;
    }
  }

  .fui-setting-card.is-editing {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }

  .fui-setting-card.is-editing > .fui-revision {
    margin: 0 var(--space-loose) 0.5rem;
  }

  .fui-setting-row.is-changed {
    background: var(--accent-tint);
  }

  .fui-setting-row.is-invalid {
    background: var(--bad-ground);
  }

  .fui-setting-row .fui-config-was {
    flex-basis: 100%;
    text-align: end;
  }

  @media (width < 40rem) {
    .fui-setting-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-setting-row .fui-setting-control {
      justify-content: flex-start;
    }

    .fui-setting-row .fui-config-was {
      text-align: start;
    }
  }

  /* ---- R9, extended (NEW, FerroFED, family rule): a name in a table, a
     list or a card is ink with no underline, at rest and on hover; the row
     is the target, tinted with the pointer on hover, and the keyboard
     shows the row's ring. An underline stays only in running prose. ---- */
  .fui-table :is(th, td) a:not(.fui-button):not(.fui-tag, .fui-menu-item),
  .fui-table a.fui-row-link,
  .fui-topology-list a {
    color: var(--ink);
    text-decoration: none;
  }

  .fui-table :is(th, td) a:not(.fui-button):not(.fui-tag, .fui-menu-item):hover {
    color: var(--ink);
    text-decoration: none;
  }

  .fui-table tbody tr:has(a.fui-row-link) {
    cursor: pointer;
  }

  .fui-table tbody tr:has(a.fui-row-link):hover {
    background: var(--surface-sunken);
  }

  .fui-table tbody tr:has(a.fui-row-link) {
    position: relative;
  }

  .fui-table a.fui-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .fui-table tbody tr:has(a.fui-row-link:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-table td :is(.fui-row-menu, .fui-table-actions),
  .fui-table td.fui-row-menu,
  .fui-table td.fui-table-actions {
    position: relative;
    z-index: 1;
  }

  .fui-crumbs a,
  .fui-crumbs a:hover,
  a.fui-button-ghost:hover {
    text-decoration: none;
  }

  .fui-crumbs a:hover {
    color: var(--ink);
  }

  a.fui-tag {
    color: var(--ink);
    text-decoration: none;
  }

  a.fui-tag:hover {
    background: var(--edge);
    text-decoration: none;
  }

  /* ---- F9, revised: the topology on buses. A neutral stub and trunk, the
     state's colour and line on each branch, the marker at the child end,
     a quiet latency above a branch only where it matters, lane labels, and
     the path to a hovered or focused card raised with one soft pulse. ---- */
  .fui-bus {
    fill: none;
    stroke: var(--edge-strong);
    stroke-width: 1.5;
  }

  .fui-edge-mark circle {
    fill: var(--surface-raised);
    stroke-width: 1.5;
  }

  .fui-edge-mark path {
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
  }

  .fui-edge-mark-bad circle,
  .fui-edge-mark-bad path {
    stroke: var(--bad);
  }

  .fui-edge-mark-warn circle,
  .fui-edge-mark-warn path {
    stroke: var(--warn);
  }

  text.fui-edge-label {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
  }

  .fui-topology-lane {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .fui-path-glow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linejoin: round;
    opacity: 0.18;
  }

  .fui-path-pulse {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 9 91;
    stroke-dashoffset: 9;
    animation: fui-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .fui-path-pulse.is-frame {
    animation: none;
    stroke-dashoffset: -46;
  }

  @keyframes fui-pulse {
    0% { stroke-dashoffset: 9; opacity: 0; }
    5% { opacity: 1; }
    25% { stroke-dashoffset: -91; opacity: 1; }
    30%, 100% { stroke-dashoffset: -91; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fui-path-pulse {
      display: none;
    }
  }

  .has-hover .fui-bus {
    opacity: 0.3;
  }

  .has-hover .fui-tnode:not(.is-path),
  .has-hover .fui-edge:not(.is-path),
  .has-hover text.fui-edge-label:not(.is-path) {
    opacity: 0.3;
  }

  .fui-edge.is-path {
    stroke-width: 3;
  }

  .fui-tnode.is-path .fui-tnode-box {
    stroke: var(--ink);
    stroke-width: 1.5;
  }

  .fui-flow {
    fill: none;
    stroke: none;
  }

  .fui-line-sample {
    flex: none;
  }

  .fui-topology-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .fui-topology-help-pop {
    position: absolute;
    inset: calc(100% + 4px) auto auto 0;
    z-index: 60;
    width: min(26rem, calc(100vw - 2rem));
  }

  /* The edge rule: one state a line, its line sample before its words. */
  .fui-topology-rule {
    display: grid;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }

  .fui-topology-rule > li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-block: 0.25rem;
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  @media (width < 48rem) {
    .fui-topology-help-pop {
      inset-inline: auto 0;
    }
  }

  /* The settings layout, widened once for longer section names; a section
     with a wide table (History) takes the full width beside the nav. */
  @media (width >= 48rem) {
    .fui-settings {
      grid-template-columns: 14rem minmax(0, 48rem);
    }
  }

  .fui-settings-nav .fui-nav-entry {
    white-space: nowrap;
  }

  .fui-secret-now {
    min-width: 0;
    max-width: 100%;
  }

  .fui-secret-now > code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .fui-state.is-long {
    white-space: normal;
  }

  /* Topology toolbar, round 2: one bar; the Status menu is the legend. */
  .fui-topology-bar {
    justify-content: space-between;
  }

  .fui-topology-bar-start {
    flex: 1 1 auto;
  }

  .fui-topology-bar-start,
  .fui-topology-bar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }

  /* A filter menu that keeps only some of its choices says so in the
     accent, wherever it sits (T1's toolbar, F9's bar). */
  .fui-topology-bar .fui-button.is-filtered,
  .fui-anchor > summary.fui-button.is-filtered {
    border-color: var(--accent);
    color: var(--accent);
  }

  .fui-topology-bar .fui-chip-check[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-topology-bar .fui-chip-check {
    gap: 0.375rem;
  }

  .fui-menu .fui-menu-item.fui-menu-check {
    gap: 0.5rem;
  }

  .fui-menu-check > input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent);
  }

  .fui-menu-count {
    margin-inline-start: auto;
    min-width: 1.5rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .fui-menu-foot {
    display: grid;
    gap: 0.25rem;
    max-width: 17rem;
    padding: 0.25rem 0.625rem 0.5rem;
    white-space: normal;
  }

  .fui-topology-hairline {
    stroke: var(--edge);
    stroke-width: 1;
  }

  .fui-topology-zoom-sep {
    width: 1px;
    height: 1.25rem;
    margin-inline: 0.125rem;
    background: var(--edge);
  }

  .fui-topology-zoom .fui-icon-button[aria-pressed="true"] {
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-topology-canvas {
    background-image: none;
  }

  .fui-topology-svg {
    max-width: 72rem;
  }

  @media (width < 48rem) {
    .fui-topology-bar-start,
    .fui-topology-bar-end {
      width: 100%;
    }

    .fui-topology-bar-end {
      justify-content: space-between;
    }
  }

  .fui-menu .fui-menu-item > :is(.fui-dot, .fui-line-sample, input, .fui-kbd, .fui-menu-count) {
    flex: none;
  }

  .fui-setting-card > .fui-setting-section-desc {
    margin: 0.25rem 0 0;
    padding: 0 var(--space-loose);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-setting-card .fui-setting-rows {
    margin-block-start: 0.5rem;
    border-top: 1px solid var(--edge);
  }

  .fui-row-menu .fui-button,
  td.fui-row-menu .fui-button {
    white-space: nowrap;
  }

  button.fui-chip-check {
    font: inherit;
    cursor: pointer;
  }

  button.fui-chip-check[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
  }

  .fui-tree-lane {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    border-bottom: 1px solid var(--edge);
    background: var(--surface-sunken);
    padding: 0.375rem var(--space-loose);
  }

  .fui-tree-lane > span:first-child {
    font-size: var(--text-micro);

    line-height: var(--leading-body);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .fui-edge,
  .fui-bus,
  .fui-path-glow,
  .fui-path-pulse {
    vector-effect: non-scaling-stroke;
  }

  .fui-edge-label rect {
    fill: var(--surface-raised);
    stroke: var(--edge);
  }

  .fui-edge-label text {
    fill: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-variant-numeric: tabular-nums;
  }

  .fui-tnode-name {
    font-size: var(--text-small);

    line-height: var(--leading-small);
  }

  .fui-secret-now {
    flex-wrap: wrap;
  }

  .fui-secret-now > code {
    max-width: 100%;
  }

  .fui-secret-control .fui-input {
    width: 100%;
  }

  .fui-dock-actions {
    flex-wrap: wrap;
  }

  :is(.fui-notice, .fui-help, .fui-small, .fui-page-subtitle, .fui-alert, .fui-bullets) code:not(.fui-break) {
    white-space: nowrap;
  }

  /* On a phone an issue's text takes the whole row under its badge and
     head, so a whole id in it (kept unbroken above) still fits. */
  @media (width < 40rem) {
    .fui-issues > li > .fui-issue-text {
      grid-column: 1 / -1;
    }
  }

  /* A card is a link: the pointer and the path on hover; the Details button
     for the quick look shows on hover and focus, and stays on the selected
     card. */
  .fui-tnode-link {
    cursor: pointer;
    text-decoration: none;
  }

  .fui-tnode-link:focus-visible {
    outline: none;
  }

  .fui-tnode-link:focus-visible .fui-tnode-box {
    stroke: var(--focus);
    stroke-width: 2.5;
  }

  .fui-tnode-info {
    visibility: hidden;
    cursor: pointer;
    color: var(--muted);
  }

  .fui-tnode-info rect {
    fill: var(--surface-sunken);
    stroke: var(--edge-strong);
  }

  .fui-tnode:is(:hover, :focus-within, .is-selected, .is-focused) .fui-tnode-info {
    visibility: visible;
  }

  .fui-tnode.is-selected .fui-tnode-info rect {
    fill: var(--accent-tint);
    stroke: var(--accent);
  }

  .fui-tnode.is-selected .fui-tnode-info {
    color: var(--accent);
  }

  .fui-tnode-toggle {
    cursor: pointer;
  }

  /* ================================================================
     NEW (FerroFED, for every console): the three page templates.
     T1 the list page, T2 the detail page, T3 the settings and reference
     page. One rhythm: title, intro, summary, toolbar, card.
     ================================================================ */

  /* T1. The list page: a summary strip of counts as filter chips, one
     toolbar (search, filter menu buttons, active chips), the table directly
     in one card (binder tabs above it where needed). */
  .fui-list-page {
    display: grid;
    gap: 0.75rem;
  }

  .fui-summary-chips {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .fui-summary-chips > .fui-chip-check {
    flex: none;
    gap: 0.375rem;
  }

  .fui-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
  }

  .fui-list-toolbar-start,
  .fui-list-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .fui-list-toolbar-start {
    flex: 1 1 auto;
  }

  .fui-list-find {
    position: relative;
    flex: 0 1 18rem;
    min-width: 12rem;
  }

  .fui-list-find > .fui-search-glyph {
    position: absolute;
    inset: 0 auto 0 0.625rem;
    display: flex;
    align-items: center;
    color: var(--muted);
  }

  .fui-list-find > .fui-input {
    width: 100%;
    padding-inline-start: 2.125rem;
  }

  .fui-list-toolbar .fui-button.is-filtered {
    border-color: var(--accent);
    color: var(--accent);
  }

  .fui-list-card,
  .fui-list-panel {
    padding: 0;
    overflow: visible;
  }

  .fui-tab-panel:has(> .fui-list-panel) {
    padding: 0;
  }

  .fui-list-foot {
    border-top: 1px solid var(--edge);
    padding: 0.5rem var(--space-loose);
  }

  .fui-table tbody tr.is-excluded > :is(th, td) {
    color: var(--muted);
  }

  .fui-table tbody tr.is-excluded .fui-row-link {
    color: var(--muted);
  }

  @media (width < 40rem) {
    .fui-list-find {
      flex: 1 1 100%;
    }
  }

  @media (width < 40rem) {
    .fui-dock-actions > *,
    .fui-dock-actions > :where(leptos-island, leptos-children) > * {
      flex: 1 1 100%;
    }
  }

  /* ---- T3. The settings and reference page (NEW (FerroFED), owner
     decision 2026-10-21): the title, binder tabs, one tab panel. No in-page
     sidebar: each section is a tab and its own route, so the panel uses the
     page's width and rarely scrolls. ---- */
  .fui-settings-tabbed > .fui-tab-panel {
    padding: 0;
  }

  .fui-settings-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
    padding: 0.75rem var(--space-loose);
  }

  .fui-settings-panel-intro {
    max-width: 80ch;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-settings-panel > .fui-setting-rows {
    margin: 0;
  }

  /* A button in running prose that opens a dialog, drawn as the link
     beside it would be: the accent, underlined, in the words' own font. */
  .fui-link-button {
    display: inline;
    margin: 0;
    border: 0;
    padding: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    text-align: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .fui-link-button:hover {
    color: var(--accent-hover);
  }

  .fui-settings-panel > :is(.fui-error-summary, .fui-revision) {
    margin: 0.75rem var(--space-loose) 0;
  }

  /* A readable label column and the value in a fixed column, so values
     line up down the tab however wide the page is. */
  @media (width >= 48rem) {
    .fui-settings-panel .fui-setting-row {
      grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr);
    }

    .fui-settings-panel .fui-setting-text {
      max-width: 80ch;
    }

    .fui-settings-panel .fui-setting-control {
      justify-content: flex-start;
    }

    .fui-settings-panel .fui-setting-value {
      text-align: start;
    }
  }

  /* A tab that holds a pending draft. */
  .fui-tab-draft {
    border-radius: 9999px;
    background: var(--accent-tint);
    padding: 0 0.375rem;
    color: var(--accent);
    font-size: var(--text-micro);
    line-height: 1.125rem;
    font-weight: 600;
  }

  /* R15. A setting's TOML key on its label's line: a labelled copy button,
     shown on hover and focus, always on a phone, reserving its room so
     nothing moves (family rule 3). */
  .fui-key-hint {
    display: inline-flex;
    opacity: 0;
    overflow-wrap: break-word;
    word-break: normal;
    border: 0;
    font: inherit;
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0 0.5rem;
    border-radius: var(--radius-control);
    background: var(--surface-sunken);
    padding: 0 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 400;
    vertical-align: 0.0625rem;
  }

  .fui-setting-row:is(:hover, :focus-within) .fui-key-hint,
  .fui-key-hint:focus-visible {
    opacity: 1;
  }

  /* Until the page hydrates the key is text to select, with no button. */
  .fui-key-hint.is-text {
    cursor: text;
  }

  /* A long key keeps to one line and scrolls inside the hint. */
  .fui-key-hint > code {
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    font-size: inherit;
  }

  @media (width < 40rem) {
    .fui-key-hint {
      opacity: 1;
    }
  }

  /* T3's revision line: one line where the settings are revisioned. */
  .fui-revision.fui-revision-compact {
    padding-block: 0.5rem;
  }

  .fui-revision-compact > p {
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* Many tabs on a phone: a select names every section at once, and its Go
     button leads there, so choosing alone changes nothing (WCAG 3.2.2). It
     takes the row's place only once it works (enabled, which the island does
     as it hydrates); until then the row of links serves. */
  .fui-tabs-select {
    display: none;
  }

  @media (width < 40rem) {
    .fui-tabbed-many:has(.fui-tabs-select select:enabled) > .fui-tabs {
      display: none;
    }

    .fui-tabbed-many .fui-tabs-select:has(select:enabled) {
      display: flex;
      gap: 0.5rem;
      margin-block-end: 0.5rem;
    }

    .fui-tabs-select > :is(select, .fui-tabs-select-field) {
      display: flex;
      flex: 1;
      min-inline-size: 0;
    }

    .fui-tabs-select-field > select {
      flex: 1;
      min-inline-size: 0;
    }

    .fui-tabbed-many:has(.fui-tabs-select select:enabled) > .fui-tab-panel {
      border-radius: var(--radius-card);
    }
  }

  /* ---- T1 table, matched to the FerroPIX domains table (NEW (FerroFED),
     owner feedback 2026-10-21). Measured at 1440 px on domains.html: the card
     header row 12px 16px with a hairline under it; the column header 35px
     high, 8px 12px, 13px at weight 600 on --surface-sunken; body rows 43px,
     8px 12px, hairline separators, no vertical borders. The card edge is the
     only frame: a table inside a card or a tab panel has no box of its own. */
  :is(.fui-card, .fui-tab-panel, .fui-settings-panel) .fui-table-scroll {
    border: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: none;
  }

  :is(.fui-card, .fui-tab-panel) .fui-table tbody tr:last-child > :is(th, td) {
    border-bottom: 0;
  }

  .fui-list-head {
    border-bottom: 1px solid var(--edge);
    padding: 0.75rem 1rem;
  }

  /* The count after the card header row's title, after a middle dot. */
  .fui-list-count {
    color: var(--muted);
    font-weight: 400;
  }

  /* One rhythm on every list page: 24px under the title and intro (the page
     header's own margin), then 16px between chips, toolbar and card. */
  .fui-list-page {
    gap: 1rem;
  }

  /* Comfortable is the default for lists. Compact tightens the rows only:
     the column header and the card header keep their room. */
  :root[data-density="compact"] .fui-table thead th {
    padding: 0.5rem 0.75rem;
  }

  :root[data-density="compact"] :is(.fui-list-head, .fui-panel-head) {
    padding: 0.75rem 1rem;
  }

  /* In the fixed value column, what runs now sits under the control, at
     its start. */
  .fui-settings-panel .fui-setting-row .fui-config-was {
    text-align: start;
  }

  /* A long identifier as a stacked row's title breaks at its hyphens. */
  @media (width < 40rem) {
    .fui-table-stack .fui-table tbody th[data-role="title"],
    .fui-table-stack .fui-table tbody th[data-role="title"] :is(a, code) {
      min-width: 0;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  /* A tooltip above its control (NEW (FerroFED)): the canvas controls sit
     at the foot of the map, so their names open upward. */
  .fui-tooltip.fui-tooltip-above {
    inset: auto 50% calc(100% + 0.375rem) auto;
    transform: translateX(50%);
  }

  .fui-topology-zoom .fui-anchor {
    display: inline-flex;
  }

  /* A stacked row on a phone (shared library): a cell's quiet note takes its
     own line, and an id or a changed value never breaks inside itself. */
  @media (width < 40rem) {
    .fui-table-stack td > span > .fui-muted {
      display: block;
    }

    .fui-table-stack td :is(.fui-muted, .fui-change, .fui-change-text) {
      overflow-wrap: normal;
      word-break: normal;
    }
  }

  /* ---- The FerroBRIDGE components, B1 to B10, for every console. Every
     colour is a role of ferrohealth-ui.css, so both themes hold by
     construction. ---- */

  /* ---- B1 Code viewer: a mapping file with its diagnostics in place (FerroBRIDGE, for every console) ---- */

  .fui-card.fui-codeview-card {
    padding: 0;
    overflow: hidden;
  }

  .fui-codeview {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* A viewer card in a grid row is as tall as the row; its box fills it, so
     the card ends in code, never in an empty band. */
  .fui-grid > .fui-codeview-card {
    display: flex;
    flex-direction: column;
  }

  .fui-codeview-card > .fui-codeview,
  .fui-codeview-card > .fui-codeview > .fui-code-panel {
    flex: 1 1 auto;
  }

  .fui-codeview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--edge);
  }

  /* The path is the head's title: the prose font at the title weight, never
     bold mono, breaking only after a slash. */
  .fui-codeview-path {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 600;
    overflow-wrap: break-word;
  }

  .fui-codeview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-codeview-sha {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
  }

  /* The panel inside a card: the card edge is the frame. */
  .fui-codeview .fui-code-panel {
    max-height: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-codeview .fui-code-panel {
    overflow-x: auto;
  }

  /* Code never wraps inside a token: a long line scrolls sideways. */
  .fui-codeview .fui-code-panel > pre {
    padding-block: 0.75rem;
    white-space: pre;
    overflow-wrap: normal;
  }

  /* The line a link or a selected diagnostic points at. */
  .fui-code-line.is-current {
    background: var(--accent-tint);
    box-shadow: -3.75rem 0 0 var(--accent-tint), inset 3px 0 0 var(--accent);
  }

  /* A diagnostic drawn under the line it names: not a line of the file, so it
     takes no number and no counter step. */
  .fui-code-diag {
    position: sticky;
    left: 0;
    display: flex;
    width: min(44rem, calc(100vw - 8rem));
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.125rem 0 0.375rem;
    padding: 0.25rem 0.5rem;
    border-inline-start: 3px solid currentcolor;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    white-space: normal;
  }

  .fui-code-diag.fui-tone-bad {
    background: var(--bad-ground);
    color: var(--bad);
  }

  .fui-code-diag.fui-tone-warn {
    background: var(--warn-ground);
    color: var(--warn);
  }

  .fui-code-diag > .fui-icon {
    flex: none;
    margin-top: 0.125rem;
  }

  .fui-code-diag-text {
    color: var(--ink);
  }

  .fui-code-diag-code {
    margin-inline-end: 0.375rem;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-small);
    font-weight: 600;
  }

  .fui-code-diag.fui-tone-bad .fui-code-diag-code {
    color: var(--bad);
  }

  .fui-code-diag.fui-tone-warn .fui-code-diag-code {
    color: var(--warn);
  }

  /* ---- Scroll cue (B1, B2, B5, B8): a pane that clips long lines says so ----
     A thin scrollbar, and a soft shadow on the clipped edge that the content's
     own end covers once you reach it (the background-attachment local and
     scroll pair), so the cue shows only while there is more to the side. */

  .fui-scroll-cue,
  .fui-mapping-editor .fui-editor,
  .fui-transform-pane .fui-code-panel,
  .fui-transform-pane .fui-editor,
  .fui-hl7-raw {
    scrollbar-width: thin;
    scrollbar-color: var(--edge-strong) transparent;
    background:
      linear-gradient(to left, var(--surface-sunken) 40%, transparent) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 1.25rem 100% no-repeat scroll,
      var(--surface-sunken);
  }

  /* ---- B2 Code editor: the library editor with a status line and gutter marks (FerroBRIDGE, for every console) ---- */

  .fui-mapping-editor {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .fui-mapping-editor .fui-editor {
    border-radius: 0;
    border-inline: 0;
    max-height: none;
  }

  .fui-mapping-editor .fui-editor-stack {
    min-height: 24rem;
  }

  .fui-mapping-editor .fui-editor-stack > .fui-editor-layer,
  .fui-mapping-editor .fui-editor-stack > .fui-editor-input {
    white-space: pre;
    overflow-wrap: normal;
  }

  .fui-mapping-editor .fui-editor {
    overflow: auto;
  }

  .fui-mapping-editor .fui-editor-bar {
    padding: 0.5rem 0.75rem 0.5rem 1rem;
  }

  .fui-editor-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.375rem 1rem;
    border-top: 1px solid var(--edge);
    background: var(--surface-head);
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
  }

  .fui-editor-status-end {
    display: flex;
    gap: 1rem;
    margin-inline-start: auto;
  }

  .fui-editor-dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ink);
    font-weight: 600;
  }

  .fui-editor-dirty::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
  }

  /* The editor beside its diagnostics at wide widths, stacked on a phone. */
  .fui-editor-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    align-items: start;
    gap: var(--space-loose);
  }

  @media (width < 64rem) {
    .fui-editor-split {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- B3 Diagnostics list: the check result, in sync with the lines (FerroBRIDGE, for every console) ---- */

  .fui-diags {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The head holds its file's row link, which covers the head alone. */
  .fui-diags-file {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-default);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
    background: var(--surface-sunken);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  /* A file's path breaks after a slash, and inside a name only when one
     name is wider than the row (WCAG 2.2 SC 1.4.10). */
  .fui-diags-file > :is(a, code) {
    min-width: 0;
  }

  .fui-diags-file code {
    overflow-wrap: anywhere;
  }

  .fui-diags-file .fui-muted {
    margin-inline-start: auto;
    font-weight: 400;
    white-space: nowrap;
  }

  .fui-diag {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.125rem 0.625rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--edge);
  }

  .fui-diags > .fui-diag:last-child,
  .fui-diags > li:last-child > .fui-diag:last-child {
    border-bottom: 0;
  }

  .fui-diag-sev {
    display: inline-flex;
    grid-row: span 2;
    align-self: start;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.75rem;
    font-size: var(--text-small);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  .fui-diag.fui-tone-bad .fui-diag-sev {
    color: var(--bad);
  }

  .fui-diag.fui-tone-warn .fui-diag-sev {
    color: var(--warn);
  }

  .fui-diag-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.625rem;
    min-width: 0;
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* A code, message or mapping longer than the row breaks rather than
     widen the page (WCAG 2.2 SC 1.4.10). */
  .fui-diag-code {
    min-width: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .fui-diag-where {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
    white-space: nowrap;
  }

  a.fui-diag-where:hover {
    color: var(--accent);
  }

  .fui-diag-msg {
    min-width: 0;
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-small);
    overflow-wrap: anywhere;
  }

  .fui-diag-mapping {
    display: block;
    margin-top: 0.125rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-small);
  }

  /* A list with no finding says so in one quiet line; a window ends in one
     quiet row with the link to every finding. */
  .fui-diags-empty,
  .fui-diags-more {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    padding: 0.625rem 1rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-diags-empty > .fui-icon {
    flex: none;
    color: var(--ok);
  }

  .fui-diags-more a {
    color: var(--accent);
  }

  /* The diagnostic that points at the current line, in step with the gutter. */
  .fui-diag.is-current {
    background: var(--surface-sunken);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* The current diagnostic's bar takes its severity's colour. */
  .fui-diag.fui-tone-bad.is-current {
    box-shadow: inset 3px 0 0 var(--bad);
  }

  .fui-diag.fui-tone-warn.is-current {
    box-shadow: inset 3px 0 0 var(--warn);
  }

  @media (width < 40rem) {
    .fui-diag {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-diag-sev {
      grid-row: auto;
    }
  }

  /* ---- B4 Load report: the running set's outcome in one line (FerroBRIDGE, for every console) ---- */

  .fui-load-report {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) 0.75rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .fui-load-report > .fui-icon {
    flex: none;
  }

  /* Inside a panel, above the list it sums up. */
  .fui-panel > .fui-load-report {
    margin: 0.75rem 1rem;
  }

  .fui-load-report.fui-tone-ok > .fui-icon {
    color: var(--ok);
  }

  .fui-load-report.fui-tone-bad {
    border-color: var(--bad);
    background: var(--bad-ground);
  }

  .fui-load-report.fui-tone-bad > .fui-icon {
    color: var(--bad);
  }

  .fui-load-report.fui-tone-warn > .fui-icon {
    color: var(--warn);
  }

  .fui-load-report-title {
    font-weight: 600;
  }

  .fui-load-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-load-counts strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .fui-load-report .fui-actions {
    margin-inline-start: auto;
  }

  /* ---- B5 Transform pair: input and answer side by side (FerroBRIDGE, for every console) ---- */

  /* The operation's options, one row, with Run at its end aligned to the
     inputs, so Run sits next to what it runs. */
  /* Fields share their label line, so help or an error under one field
     never lifts its neighbours; Run and a check group sit at the row's
     foot, on the inputs' line when no field carries help. */
  .fui-transform-options {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-loose);
    padding: var(--space-loose);
  }

  .fui-transform-options .fui-field {
    flex: 0 1 16rem;
    margin: 0;
  }

  .fui-transform-options .fui-field:has(.fui-segmented) {
    flex: none;
  }

  /* An id field (a uuid or a versioned object uid) is wide enough for the
     whole id, so neither its value nor its placeholder clips. */
  .fui-transform-options .fui-field.is-id {
    flex: 1 1 24rem;
  }

  .fui-transform-options .fui-segmented {
    display: inline-flex;
    width: max-content;
  }

  .fui-transform-options .fui-segmented > .fui-segment {
    flex: none;
  }

  .fui-transform-run {
    align-self: flex-end;
    margin-inline-start: auto;
  }

  .fui-field-key {
    margin-inline-start: 0.375rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
    font-weight: 400;
  }

  /* Two panes, flat inside their panel, a hairline between them: no card in a
     card and nothing between them that looks like a control. */
  .fui-transform {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--edge);
  }

  .fui-transform-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .fui-transform-pane + .fui-transform-pane {
    border-inline-start: 1px solid var(--edge);
  }

  .fui-transform-head {
    position: sticky;
    top: var(--bar);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
    min-height: 3.25rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
    background: var(--surface-raised);
  }

  .fui-transform-title {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  .fui-transform-head .fui-actions {
    margin-inline-start: auto;
  }

  /* The answer's state in its own pane's head, where the answer is. */
  .fui-transform-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-transform-status .fui-muted {
    font-variant-numeric: tabular-nums;
  }

  /* Code never wraps inside a token: it scrolls sideways in its pane. */
  .fui-transform-pane .fui-code-panel,
  .fui-transform-pane .fui-editor {
    flex: 1;
    max-height: 36rem;
    min-height: 20rem;
    border: 0;
    border-radius: 0;
    overflow: auto;
  }

  .fui-transform-pane .fui-editor-stack {
    min-height: 20rem;
  }

  /* An editor stops at its most height, so a pane beside a taller answer
     keeps the editor's ground to the pair's foot. */
  .fui-transform-pane:has(.fui-editor) {
    background: var(--surface-sunken);
  }

  .fui-transform-pane .fui-editor-stack > .fui-editor-layer,
  .fui-transform-pane .fui-editor-stack > .fui-editor-input,
  .fui-transform-pane .fui-code-panel > pre {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-code);
    white-space: pre;
    overflow-wrap: normal;
  }

  .fui-transform-pane .fui-editor-input {
    overflow: hidden;
  }

  .fui-transform-pane > .fui-transform-body {
    flex: 1;
    padding: 1rem;
  }

  /* Before the first run, one quiet line where the answer will be. */
  .fui-transform-empty {
    margin: auto;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    text-align: center;
  }

  /* An empty answer sits compact in the middle of its pane. */
  .fui-transform-pane > .fui-empty {
    flex: none;
    margin-block: auto;
    padding: 2rem 1rem;
  }

  .fui-transform-error {
    margin: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--edge);
  }

  @media (width < 64rem) {
    .fui-transform {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-transform-pane + .fui-transform-pane {
      border-inline-start: 0;
      border-top: 1px solid var(--edge);
    }

    .fui-transform-head {
      position: static;
    }
  }

  @media (width < 40rem) {
    .fui-transform-pane .fui-editor,
    .fui-transform-pane .fui-editor-stack,
    .fui-transform-pane .fui-code-panel {
      min-height: 10rem;
    }

    .fui-transform-run {
      width: 100%;
      margin-inline-start: 0;
    }

    .fui-transform-run .fui-button {
      width: 100%;
      justify-content: center;
    }
  }

  /* ---- B6 OMOP row preview: the record graph, table by table (FerroBRIDGE, for every console) ---- */

  .fui-rowgraph {
    display: flex;
    flex-direction: column;
    gap: var(--space-loose);
    padding: 1rem;
  }

  .fui-rowgraph-table {
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  /* The table name is a code: it never hyphenates or breaks inside the word,
     and the row count wraps under it on a narrow card instead. */
  .fui-rowgraph-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-default);
    hyphens: manual;
    overflow-wrap: normal;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--edge);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  .fui-rowgraph-name .fui-muted {
    min-width: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .fui-rowgraph-fields {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-rowgraph-fields > div {
    display: contents;
  }

  .fui-rowgraph-fields dt,
  .fui-rowgraph-fields dd {
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--edge);
  }

  .fui-rowgraph-fields > div:first-child > * {
    border-top: 0;
  }

  .fui-rowgraph-fields dt {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
  }

  .fui-rowgraph-fields dd {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* No value and an empty text never look alike: NULL in the code face,
     an empty text in muted words. */
  .fui-rowgraph-null {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
  }

  .fui-rowgraph-empty {
    color: var(--muted);
    font-style: italic;
  }

  .fui-concept-zero {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--warn);
    font-weight: 600;
  }

  /* A table of several rows: a sunken band between two rows, so a row's
     end reads apart from the hairline between its fields. */
  .fui-rowgraph-fields + .fui-rowgraph-fields {
    border-top: 0.375rem solid var(--surface-sunken);
  }

  /* On a phone each column stacks over its value, which keeps the full
     width, so an id breaks inside only where it alone is wider. */
  @media (width < 40rem) {
    .fui-rowgraph-fields {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-rowgraph-fields dt {
      padding-bottom: 0;
    }

    .fui-rowgraph-fields dd {
      padding-top: 0.125rem;
      border-top: 0;
    }
  }

  /* ---- B7 ETL run report: where the compositions went, and the rows (FerroBRIDGE, for every console) ---- */

  .fui-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .fui-funnel-bar {
    display: flex;
    height: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
  }

  .fui-funnel-part {
    height: 100%;
  }

  .fui-funnel-part + .fui-funnel-part {
    border-inline-start: 2px solid var(--surface-raised);
  }

  .fui-funnel-part.fui-tone-ok {
    background: var(--ok-dot);
  }

  .fui-funnel-part.fui-tone-neutral {
    background: var(--neutral-dot);
  }

  .fui-funnel-part.fui-tone-bad {
    background: var(--bad-dot);
  }

  .fui-funnel-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
  }

  .fui-funnel-legend > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .fui-funnel-legend dt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-funnel-legend dd {
    margin: 0;
    font-size: var(--text-title);
    font-weight: 600;
    line-height: var(--leading-title);
    font-variant-numeric: tabular-nums;
  }

  .fui-funnel-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
  }

  .fui-funnel-swatch.fui-tone-ok {
    background: var(--ok-dot);
  }

  .fui-funnel-swatch.fui-tone-neutral {
    background: var(--neutral-dot);
  }

  .fui-funnel-swatch.fui-tone-bad {
    background: var(--bad-dot);
  }

  .fui-funnel-swatch.is-total {
    border: 1px solid var(--edge-control);
  }

  .fui-barlist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }

  .fui-barlist li {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-barlist-name {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
    overflow-wrap: anywhere;
  }

  .fui-barlist-track {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
  }

  .fui-barlist-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
  }

  .fui-barlist-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  @media (width < 40rem) {
    .fui-barlist li {
      grid-template-columns: minmax(0, 1fr) 4rem;
    }

    .fui-barlist-track {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }

  /* B7 drawn by the library: the bars are SVG, each length an attribute. */
  svg.fui-funnel-bar {
    display: block;
    width: 100%;
  }

  rect.fui-funnel-part.fui-tone-ok {
    fill: var(--ok-dot);
  }

  rect.fui-funnel-part.fui-tone-neutral {
    fill: var(--neutral-dot);
  }

  rect.fui-funnel-part.fui-tone-bad {
    fill: var(--bad-dot);
  }

  /* A part far under its least width: a stroke of its own colour widens
     it by a few pixels at any width. */
  rect.fui-funnel-part.fui-funnel-least {
    stroke: var(--tone-dot);
    stroke-width: 3px;
  }

  .fui-funnel-cut {
    stroke: var(--surface-raised);
    stroke-width: 2;
  }

  svg.fui-barlist-track {
    display: block;
    width: 100%;
  }

  rect.fui-barlist-fill {
    fill: var(--accent);
  }

  /* ---- B8 HL7 v2 message viewer: segments, fields by position (FerroBRIDGE, for every console) ---- */

  .fui-hl7-raw {
    margin: 0;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-code);
    white-space: pre;
  }

  .fui-transform-pane > .fui-hl7-raw {
    flex: 1;
    border: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }

  .fui-hl7-raw .fui-hl7-sep {
    color: var(--syntax-keyword);
    font-weight: 600;
  }

  .fui-hl7-raw .fui-hl7-segid {
    color: var(--syntax-key);
    font-weight: 600;
  }

  .fui-hl7-segs {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-hl7-seg {
    border-bottom: 1px solid var(--edge);
  }

  .fui-hl7-seg:last-child {
    border-bottom: 0;
  }

  .fui-hl7-seg-head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    background: var(--surface-sunken);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-hl7-seg-id {
    font-family: var(--font-mono);
    font-weight: 700;
  }

  .fui-hl7-fields {
    display: grid;
    grid-template-columns: 4.5rem minmax(8rem, 13rem) minmax(0, 1fr);
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-hl7-fields > div {
    display: contents;
  }

  .fui-hl7-fields dt,
  .fui-hl7-fields dd {
    margin: 0;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--edge);
  }

  .fui-hl7-fields dt:first-child {
    padding-inline-start: 1rem;
    white-space: nowrap;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
  }

  .fui-hl7-fields dd {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
  }

  .fui-hl7-fields .fui-hl7-name {
    font-family: var(--font-sans);
    color: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  @media (width < 40rem) {
    .fui-hl7-fields {
      grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .fui-hl7-fields .fui-hl7-name {
      display: none;
    }
  }

  /* ---- B9 Flow: the F9 topology as a pipeline with no hub (FerroBRIDGE, for every console) ---- */

  .fui-pipeline .fui-topology-canvas {
    min-height: 0;
  }

  .fui-pipeline .fui-topology-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .fui-pipeline-foot {
    margin: 0;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--edge);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-pipeline-list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-pipeline-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-pipeline-lane {
    margin: 0;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .fui-pipeline-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
    color: var(--ink);
    text-decoration: none;
  }

  .fui-pipeline-list a:hover {
    background: var(--surface-sunken);
  }

  .fui-pipeline-list a:focus-visible {
    outline-offset: -2px;
  }

  .fui-pipeline-name {
    font-weight: 600;
  }

  .fui-pipeline-line {
    grid-column: 2;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* On a phone the flow opens as its list, as F9 opens as its List. */
  @media (width < 40rem) {
    .fui-pipeline .fui-topology-canvas {
      display: none;
    }

    .fui-pipeline-list {
      display: block;
    }
  }

  /* B9 drawn by the library: two layers of one size, the edges an image
     and the cards over them; a hovered or focused card shows its path and
     the pulse, paint only, and the other edges fade. */
  .fui-pipeline-stage {
    display: grid;
    isolation: isolate;
  }

  .fui-pipeline-stage > svg {
    grid-area: 1 / 1;
  }

  /* The cards stay above the edges, which a hovered card fades into a
     layer of their own, so a click lands on the card it pressed. */
  .fui-pipeline-cards {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  .fui-pipeline-cards :is(.fui-tnode, .fui-tnode-toggle) {
    pointer-events: auto;
  }

  .fui-pipeline-path {
    visibility: hidden;
    pointer-events: none;
  }

  .fui-pipeline-card:has(.fui-tnode-link:is(:hover, :focus-visible)) .fui-pipeline-path {
    visibility: visible;
  }

  .fui-pipeline-card:has(.fui-tnode-link:hover) .fui-tnode-box {
    stroke: var(--ink);
  }

  .fui-pipeline-stage:has(.fui-tnode-link:is(:hover, :focus-visible)) .fui-pipeline-edges {
    opacity: 0.3;
  }

  /* ---- B10 Panel section: a tab panel's parts, a heading and a hairline, never a card in a card (FerroBRIDGE, for every console) ---- */

  .fui-panel-section {
    padding: var(--space-loose);
  }

  .fui-panel-section + .fui-panel-section {
    border-top: 1px solid var(--edge);
  }

  .fui-panel-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-default);
    margin-bottom: 0.75rem;
  }

  .fui-panel-section-title {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  /* A table in a section runs edge to edge, to the panel's frame. */
  .fui-panel-section > .fui-table-scroll {
    max-width: none;
    margin-inline: calc(var(--space-loose) * -1);
    border-top: 1px solid var(--edge);
  }

  .fui-panel-section > .fui-table-scroll:last-child {
    margin-bottom: calc(var(--space-loose) * -1);
  }

  .fui-panel-section > .fui-diags {
    margin-inline: calc(var(--space-loose) * -1);
    margin-bottom: calc(var(--space-loose) * -1);
    border-top: 1px solid var(--edge);
  }

  /* The Source tab: the file beside its diagnostics, split by a hairline. */
  .fui-source-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    align-items: stretch;
  }

  .fui-source-split > .fui-panel-section {
    border-inline-start: 1px solid var(--edge);
  }

  .fui-source-split > .fui-codeview {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    overflow: hidden;
  }

  @media (width < 64rem) {
    .fui-source-split {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-source-split > .fui-panel-section {
      border-inline-start: 0;
      border-top: 1px solid var(--edge);
    }
  }

  /* ---- Planned and proposed mark (FerroBRIDGE, for every console): a quiet badge and one line ---- */

  .fui-proposed {
    display: flex;
    align-items: flex-start;
    gap: var(--space-default);
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--edge-strong);
    border-radius: var(--radius-card);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-proposed > .fui-badge {
    flex: none;
  }

  /* ---- F9, a canvas with no zoom cluster (the B9 flow, a small map):
     nothing sits at its foot and nothing pans, so no bottom padding and no
     grab cursor. ---- */
  .fui-topology-canvas:not(:has(.fui-topology-zoom)) {
    padding-bottom: 1rem;
    cursor: default;
  }

  /* ---- Family rule 4, group headers: a link in a list's group header (a
     file over its diagnostics, a table's group row) is a name. It is in
     the ink with no underline; the pointer tints it in the accent, paint
     only. A button keeps its own look. ---- */
  :is(.fui-diags-file, .fui-group-row) a:not(.fui-button, .fui-tag) {
    color: var(--ink);
    text-decoration: none;
  }

  .fui-group-row a:not(.fui-button, .fui-tag) {
    white-space: nowrap;
  }

  :is(.fui-diags-file, .fui-group-row) a:not(.fui-button, .fui-tag):hover {
    color: var(--accent);
  }

  /* ---- F9, the canvas hint: a spinner inside the dark pill takes the
     pill's own light text, never the muted ink (WCAG 2.2 SC 1.4.3). ---- */
  .fui-topology-hint .fui-spinner {
    color: inherit;
  }

  /* ---- The FerroTERM components, M1 to M6, for every console. Every
     colour is a role of ferrohealth-ui.css, so both themes hold by
     construction. ---- */

  /* ---- M1 Concept tree (FerroTERM, for every console): the base tree as
     a hierarchy read one level at a time. A name in it is a name in a list
     (family rule 4): ink, no underline, the row is the target. ---- */
  .fui-concept-tree {
    padding: 0.5rem;
    overflow-x: auto;
  }

  /* A concept's name never wraps in the tree: a deep level scrolls. */
  .fui-concept-tree .fui-tree-label {
    white-space: nowrap;
  }

  .fui-concept-tree .fui-tree-row {
    position: relative;
    cursor: pointer;
  }

  .fui-concept-tree a.fui-tree-label {
    color: var(--ink);
    text-decoration: none;
  }

  .fui-concept-tree a.fui-tree-label::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .fui-concept-tree a.fui-tree-label:hover {
    text-decoration: none;
  }

  .fui-concept-tree .fui-tree-toggle {
    position: relative;
    z-index: 1;
  }

  .fui-concept-tree .fui-tree-item[aria-selected="true"] > .fui-tree-row a.fui-tree-label {
    color: var(--accent);
  }

  /* The path from the root to the selected concept, in the ink's weight. */
  .fui-concept-tree .fui-tree-item.is-on-path > .fui-tree-row .fui-tree-label {
    font-weight: 600;
  }

  .fui-tree-item.is-inactive > .fui-tree-row .fui-tree-label {
    color: var(--muted);
  }

  /* A level the server pages: one quiet row says how many more there are. */
  .fui-tree-more,
  .fui-tree-loading {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    min-height: 2rem;
    padding: 0.125rem var(--space-tight) 0.125rem 2rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-tree-more a {
    color: var(--accent);
  }

  /* The concept browser: the search, the tree and the concept as three
     panes of one panel, split by hairlines, stacked under 64 rem. */
  .fui-browser {
    display: grid;
    grid-template-columns: minmax(14rem, 0.9fr) minmax(16rem, 1fr) minmax(18rem, 1.3fr);
    border-top: 1px solid var(--edge);
  }

  .fui-browser-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .fui-browser-pane + .fui-browser-pane {
    border-inline-start: 1px solid var(--edge);
  }

  .fui-browser-head {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
  }

  .fui-browser-head .fui-actions {
    margin-inline-start: auto;
  }

  .fui-browser-title {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-heading);
    font-weight: 600;
  }

  .fui-browser-body {
    padding: 1rem;
  }

  .fui-browser-pane > .fui-empty {
    margin-block: auto;
  }

  .fui-browser-find {
    display: flex;
    align-items: flex-end;
    gap: var(--space-default);
    margin-bottom: 0.75rem;
  }

  .fui-browser-find > .fui-list-find {
    flex: 1;
    max-width: none;
  }

  .fui-browser-find > .fui-field {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .fui-browser-rel {
    margin-top: 0.75rem;
  }

  .fui-browser-rel-item {
    display: block;
  }

  .fui-browser-rel a {
    color: var(--ink);
    text-decoration: none;
  }

  .fui-browser-rel a:hover {
    color: var(--accent);
  }

  .fui-browser-sub {
    margin: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--edge);
    background: var(--surface-sunken);
  }

  /* The search's matches: a list of codings, the row is the target. */
  .fui-match-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-match-list > li {
    position: relative;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--edge);
    overflow-wrap: anywhere;
  }

  .fui-match-list .fui-coding-display {
    overflow-wrap: anywhere;
  }

  .fui-match-list > li:hover {
    background: var(--surface-sunken);
  }

  /* The match the page reads: its link carries aria-current (WAI-ARIA 1.2). */
  .fui-match-list > li:has([aria-current]:not([aria-current="false"])) {
    background: var(--accent-tint);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .fui-match-list a.fui-row-link {
    color: var(--ink);
    text-decoration: none;
  }

  .fui-match-list a.fui-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* The keyboard sees the match it is on: the row takes the ring its link
     gives up, as a table row does (WCAG 2.2 SC 2.4.7). */
  .fui-match-list > li:has(a.fui-row-link:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  /* The concept read: its display as a heading, its code and version. */
  .fui-concept-title {
    margin: 0 0 0.25rem;
    font-size: var(--text-title);
    font-weight: 600;
    line-height: var(--leading-title);
  }

  @media (width < 64rem) {
    .fui-browser {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-browser-pane + .fui-browser-pane {
      border-inline-start: 0;
      border-top: 1px solid var(--edge);
    }
  }

  /* ---- M2 Coding (FerroTERM, for every console): a display over its code
     and its system. The code never breaks inside itself; the display may
     wrap. ---- */
  .fui-coding {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.0625rem;
    vertical-align: top;
  }

  .fui-coding-display {
    color: var(--ink);
    overflow-wrap: break-word;
  }

  .fui-coding-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.375rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-coding-code {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    white-space: nowrap;
  }

  /* A long code breaks only after the pieces the view writes. */
  .fui-coding-code:has(> wbr) {
    white-space: normal;
  }

  .fui-coding-code > span {
    white-space: nowrap;
  }

  .fui-coding-system {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* One line: the display, then the code in mono. */
  .fui-coding-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
  }

  /* A canonical breaks only after a slash (the <wbr> the view writes),
     never inside a segment. */
  .fui-canonical {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    overflow-wrap: normal;
    word-break: normal;
  }

  .fui-coding.is-inactive .fui-coding-display {
    color: var(--muted);
  }

  /* A list of codes the server pages ends in one quiet row that says how
     many it shows and links to the next ones. */
  .fui-code-more {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-code-more a {
    color: var(--accent);
  }

  /* Inactive is a hollow ring, a muted colour and the word (rule 12). */
  .fui-inactive-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted);
    font-size: var(--text-micro);
    font-weight: 600;
    line-height: var(--leading-micro);
    white-space: nowrap;
  }

  .fui-inactive-mark::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentcolor;
  }

  /* A row's name over a quiet second line in its title cell: a canonical,
     an id. The row stays the target; the line never takes an underline. */
  .fui-row-sub {
    display: block;
    margin-top: 0.125rem;
    color: var(--muted);
    font-weight: 400;
  }

  .fui-row-sub .fui-canonical {
    font-size: var(--text-micro);

    line-height: var(--leading-small);
  }

  /* ---- M3 Version select (FerroTERM, for every console): the FHIR
     version as one compact control in the top bar, its label in the
     tooltip. Below 40 rem it moves into the user menu. ---- */
  .fui-version-select {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0 0.5rem 0 0.625rem;
    border: 1px solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-small);
    line-height: var(--leading-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }

  .fui-version-select:hover {
    border-color: var(--edge-strong);
  }

  .fui-version-select[aria-expanded="true"] {
    border-color: var(--accent);
  }

  .fui-version-select > .fui-icon {
    color: var(--muted);
  }

  /* The check marks the root in view; the others keep its room. */
  .fui-menu-item[aria-checked="false"] > .fui-version-check {
    visibility: hidden;
  }

  .fui-version-item .fui-menu-item-text {
    flex: 0 0 2.75rem;
  }

  .fui-version-item-line {
    margin-inline-start: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    font-variant-numeric: tabular-nums;
  }

  .fui-menu-version {
    display: none;
  }

  @media (width < 40rem) {
    .fui-topbar .fui-version-anchor {
      display: none;
    }

    .fui-menu-version {
      display: block;
    }
  }

  /* ---- M4 Clause (FerroTERM, for every console): one compose clause of a
     value set, a panel section with its mark, its source, its filters and
     codes, and the sentence of what it selects. ---- */
  .fui-clause {
    position: relative;
    padding: var(--space-loose) var(--space-loose) var(--space-loose) calc(var(--space-loose) + 0.25rem);
  }

  .fui-clause + .fui-clause {
    border-top: 1px solid var(--edge);
  }

  /* Include is a solid edge, exclude a dashed one, with the word beside. */
  .fui-clause::before {
    content: "";
    position: absolute;
    inset: var(--space-loose) auto var(--space-loose) 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
  }

  .fui-clause.is-exclude::before {
    background: repeating-linear-gradient(to bottom, var(--warn) 0 6px, transparent 6px 10px);
  }

  /* The head wraps: on a narrow card the actions move under the title
     instead of squeezing it narrower than one of its words. */
  .fui-clause-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
    margin-bottom: 0.5rem;
  }

  .fui-clause-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 600;
  }

  .fui-clause-head .fui-actions {
    margin-inline-start: auto;
  }

  .fui-clause-sentence {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-clause-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-loose);
  }

  .fui-clause-sub {
    margin: 0.75rem 0 0.375rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .fui-clause-filter {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.8fr) minmax(8rem, 1.4fr) auto;
    align-items: end;
    gap: var(--space-default);
    margin-bottom: 0.5rem;
  }

  .fui-clause-filter .fui-field {
    margin: 0;
  }

  .fui-clause-codes {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
  }

  .fui-clause-codes > li {
    display: flex;
    align-items: center;
    gap: var(--space-default);
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  }

  .fui-clause-codes > li + li {
    border-top: 1px solid var(--edge);
  }

  .fui-clause-codes > li > .fui-icon-button {
    margin-inline-start: auto;
  }

  /* The invariant a clause breaks, named by its own number, inline. */
  .fui-clause-issue {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
    padding: 0.375rem 0.625rem;
    border-inline-start: 3px solid var(--bad);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: var(--bad-ground);
    color: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-clause-issue > .fui-icon {
    flex: none;
    margin-top: 0.125rem;
    color: var(--bad);
  }

  .fui-clause-issue > span {
    min-width: 0;
  }

  /* An invariant's number never breaks at its hyphen. */
  .fui-clause-issue code {
    margin-inline-end: 0.25rem;
    color: var(--bad);
    font-weight: 600;
    white-space: nowrap;
  }

  /* Two or more broken invariants: one issue each, in a list. */
  .fui-clause-issues {
    display: grid;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }

  .fui-clause-issues > .fui-clause-issue {
    margin: 0;
  }

  @media (width < 40rem) {
    .fui-clause-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    /* A filter row is an F7 row: its Remove stays on the first line. */
    .fui-clause-filter {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .fui-clause-filter > :not(.fui-icon-button):not(:first-child) {
      grid-column: 1 / -1;
    }

    .fui-clause-filter > .fui-icon-button {
      grid-column: 2;
      grid-row: 1;
    }
  }

  /* ---- M5 Root matrix (FerroTERM, for every console): a table whose
     columns are the FHIR roots, each head with its release and whether it
     answered. The first column stays while the rest scroll sideways. ---- */
  .fui-root-matrix th[scope="col"] {
    vertical-align: bottom;
  }

  /* The matrix scrolls sideways in its own box at every width, so its
     header keeps to the top of that box, never under the top bar: it
     outranks the wide table's sticky header, which sits a bar's height down
     and would cover the first rows inside this box. */
  .fui-root-matrix .fui-table-scroll .fui-table thead th {
    top: 0;
  }

  .fui-root-head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-weight: 400;
  }

  .fui-root-head strong {
    color: var(--ink);
    font-weight: 600;
  }

  .fui-root-head .fui-state {
    font-size: var(--text-micro);

    line-height: var(--leading-small);
  }

  .fui-root-matrix :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-raised);
  }

  .fui-root-matrix thead :is(th, td):first-child {
    background: var(--surface-sunken);
  }

  .fui-root-matrix td {
    min-width: 10rem;
  }

  .fui-root-matrix td.is-none {
    color: var(--muted);
  }

  .fui-root-matrix .fui-table {
    min-width: 46rem;
  }

  /* ---- M6 Mapping row (FerroTERM, for every console): a source coding,
     the relationship as a word with its arrow, and the target coding. ---- */
  .fui-relation {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ink);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    white-space: nowrap;
  }

  .fui-relation > .fui-icon {
    color: var(--muted);
  }

  .fui-relation.is-none {
    color: var(--muted);
  }

  @media (width < 40rem) {
    .fui-table-stack td.fui-relation-cell {
      padding-block: 0;
    }
  }

  /* ---- Editor parts (FerroTERM, for every console): what an editor page
     builds its sections from. ---- */

  /* B10, extended: one sentence under a section's heading, before its body. */
  .fui-section-intro {
    margin: 0 0 0.75rem;
  }

  /* The Add buttons under a list of rows or clauses. */
  .fui-add-row {
    margin-top: 0.75rem;
  }

  /* B5's options row inside a section: the section gives the padding. */
  .fui-panel-section > .fui-transform-options {
    padding: 0 0 0.75rem;
  }

  /* There Run sits beside the fields it runs, not at the far edge. */
  .fui-panel-section > .fui-transform-options .fui-transform-run {
    margin-inline-start: 0;
  }

  /* M4 clauses inside a section run edge to edge, a hairline between. */
  .fui-panel-section > .fui-clauses {
    margin-inline: calc(var(--space-loose) * -1);
    border-top: 1px solid var(--edge);
  }

  .fui-panel-section > .fui-clauses:last-child {
    margin-bottom: calc(var(--space-loose) * -1);
  }

  /* A table's group row: the group's name in the sunken band (rule 4 for
     its links). */
  .fui-table tbody tr.fui-group-row > th {
    padding-block: 0.375rem;
    background: var(--surface-sunken);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    font-weight: 600;
    text-align: start;
  }

  /* M6 in an editor: one block per source code, its targets under it. */
  .fui-map-elements {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--edge);
    border-radius: var(--radius-card);
  }

  .fui-map-element {
    padding: 0.75rem;
  }

  .fui-map-element + .fui-map-element {
    border-top: 1px solid var(--edge);
  }

  .fui-map-element-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default);
    margin-bottom: 0.5rem;
  }

  .fui-map-element-head .fui-actions {
    margin-inline-start: auto;
  }

  .fui-map-element .fui-clause-filter:last-child {
    margin-bottom: 0;
  }

  /* ---- Operation answers (FerroTERM, for every console): the request an
     answer came from, with Copy; a hairline between the options and the
     answer; check boxes stacked as one field in an options row. ---- */
  .fui-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-default) 0.75rem;
  }

  .fui-request > .fui-alert-request {
    flex: 1 1 20rem;
    min-width: 0;
    margin: 0;
  }

  .fui-request + .fui-disclosure {
    margin-top: 0.75rem;
  }

  .fui-transform-options + :is(.fui-panel-section, .fui-transform-empty) {
    border-top: 1px solid var(--edge);
  }

  /* A section after the pair, such as the message as read. */
  .fui-transform + .fui-panel-section {
    border-top: 1px solid var(--edge);
  }

  .fui-transform-options .fui-field-checks {
    align-self: flex-end;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.25rem;
  }

  /* R4 with no field (a save that takes no reason): the bar's one line of
     state sits in the field's place, beside Discard and Save. */
  .fui-dock-row > .fui-dock-message {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
  }

  /* B5, dense: an options row of four or more fields shares the row, so
     Run stays on it at wide widths. */
  .fui-transform-options.is-dense .fui-field:not(:has(.fui-segmented), .fui-field-checks) {
    flex: 1 1 auto;
  }

  /* A dense row's id field keeps its 24 rem start. */
  .fui-transform-options.is-dense .fui-field.is-id {
    flex: 1 1 24rem;
  }

  /* A select is never narrower than its chosen value. */
  .fui-transform-options.is-dense .fui-select {
    min-width: max-content;
  }

  /* Stacked rows on a phone (FerroTERM, for every console): a title cell
     with a second line wraps across the card, and an empty cell takes no
     line of its own. */
  @media (width < 40rem) {
    .fui-worklist .fui-table-stack .fui-table tbody [data-role="title"]:has(.fui-row-sub) {
      flex: 1 1 100%;
      white-space: normal;
    }

    .fui-table-stack .fui-table tbody td:has(> span:empty) {
      display: none;
    }
  }

  /* B4: a count in the title stays on one line. */
  .fui-load-report-title strong {
    white-space: nowrap;
  }

  /* R6 for an editor: the trail ends with the resource it edits (the
     title says Edit or New), so on a phone that last item is the back link. */
  @media (width < 40rem) {
    .fui-crumbs.is-parent li:nth-last-child(2) {
      display: none;
    }

    .fui-crumbs.is-parent li:last-child {
      display: inline-flex;
    }

    .fui-crumbs.is-parent li:last-child .fui-crumb-back {
      display: inline-flex;
    }

    .fui-crumbs.is-parent li:last-child a {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--accent);
    }
  }

  /* ---- The FerroEHR components, E1 to E8, for every console. Every
     colour is a role of ferrohealth-ui.css, so both themes hold by
     construction. ---- */

  /* ---- E1 Subject line: whose record this is (a masked identifier with
     its namespace, or "No external subject" in words) and the record's
     capability states as F12, on one line that wraps between its parts. ---- */
  .fui-subject {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.25rem 0 0;
  }

  .fui-subject-who {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }

  .fui-subject-label {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .fui-subject-none {
    color: var(--muted);
  }

  .fui-subject-states {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
  }

  /* ---- E2 Version history: the At a time lookup, one row of a label, a
     date and time field and Open, under a versioned object's revision
     table. A version cell keeps its number and its Current mark together. ---- */
  .fui-at-time {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-default);
  }

  .fui-at-time > .fui-field,
  .fui-at-time > :where(leptos-island, leptos-children) > .fui-field {
    margin: 0;
    min-width: 0;
    flex: 0 1 18rem;
  }

  .fui-version-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  /* ---- E3 Clinical reading: a canonical document read without its
     template. Each RM section is a heading with its archetype node id as a
     quiet hint that never breaks inside itself; each ELEMENT is a label and
     value row; a value keeps its unit; a null flavour is said in words. ---- */
  .fui-reading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .fui-reading-section {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--edge);
  }

  .fui-reading-section:first-child {
    border-top: 0;
  }

  .fui-reading-section .fui-reading-section {
    margin: 0.5rem 0 0 0.25rem;
    padding: 0.25rem 0 0 0.875rem;
    border-top: 0;
    border-inline-start: 2px solid var(--edge);
  }

  /* Past four levels a cluster indents no further: a dashed hairline over
     it sets it apart, so a deep document never runs off a phone (WCAG 2.2
     SC 1.4.10). */
  .fui-reading-section .fui-reading-section.is-deep {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px dashed var(--edge-strong);
    padding-top: 0.375rem;
  }

  .fui-reading-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.625rem;
    margin: 0 0 0.375rem;
    font-size: var(--text-body);
    font-weight: 600;
    line-height: var(--leading-body);
    overflow-wrap: anywhere;
  }

  .fui-reading-section .fui-reading-section > .fui-reading-title {
    font-size: var(--text-small);

    line-height: var(--leading-body);
  }

  .fui-reading-node {
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-small);
    font-weight: 400;
  }

  /* An archetype id or an ADL 2 HRID breaks only after a dot, and a path
     only after a slash or a dot, never inside a segment (E3, E5). */
  .fui-archetype {
    font-family: var(--font-mono);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .fui-archetype > span {
    white-space: nowrap;
  }

  .fui-reading-rows {
    display: grid;
    margin: 0;
  }

  .fui-reading-rows > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.25rem 1rem;
    padding: 0.3125rem 0;
    border-top: 1px solid var(--edge);
  }

  .fui-reading-rows > div:first-child {
    border-top: 0;
  }

  .fui-reading-rows dt {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    overflow-wrap: anywhere;
  }

  .fui-reading-rows dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .fui-reading-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  .fui-reading-unit {
    color: var(--muted);
    white-space: nowrap;
  }

  .fui-reading-null {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted);
  }

  .fui-reading-null::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
  }

  @media (width < 40rem) {
    .fui-reading-rows > div {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
  }

  /* ---- E4 Folder tree: M1's tree for a directory. A folder carries the
     folder glyph and its item count; an item is a reference, a composition
     by name (a name in a list, rule 4) over its short uid. In edit, each row
     has its actions at the end and a rename is an inline field. ---- */
  /* In every tree (M1, E4, E5) a name keeps its width, so a deep or narrow
     tree scrolls sideways and nothing in the row overlaps it. */
  :is(.fui-concept-tree, .fui-folder-tree, .fui-path-tree) .fui-tree-label,
  :is(.fui-concept-tree, .fui-folder-tree, .fui-path-tree) .fui-tree-code,
  :is(.fui-concept-tree, .fui-folder-tree, .fui-path-tree) .fui-tree-count,
  :is(.fui-concept-tree, .fui-folder-tree, .fui-path-tree) .fui-rm-type {
    flex: none;
  }

  .fui-folder-tree .fui-tree-glyph {
    display: inline-flex;
    flex: none;
    color: var(--muted);
  }

  .fui-folder-tree .fui-tree-item.is-ref > .fui-tree-row .fui-tree-glyph {
    color: var(--accent);
  }

  .fui-folder-tree .fui-tree-count {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    white-space: nowrap;
  }

  .fui-folder-tree.is-editing .fui-tree-row {
    min-height: 2.5rem;
  }

  .fui-folder-tree.is-editing .fui-tree-row:hover {
    background: transparent;
  }

  .fui-folder-tree .fui-tree-actions {
    position: relative;
    z-index: 1;
    padding-inline-start: 1rem;
  }

  /* The rename field grows with the name it holds; on a phone it takes its
     own line under the row's glyph and actions (F7: actions on the first
     line). */
  .fui-folder-tree .fui-tree-row > .fui-input {
    flex: 1 1 12rem;
    min-width: 12rem;
    max-width: 28rem;
    min-height: 2rem;
    padding-block: 0.125rem;
  }

  @media (width < 40rem) {
    .fui-folder-tree.is-editing .fui-tree-row:has(> .fui-input) {
      flex-wrap: wrap;
    }

    .fui-folder-tree .fui-tree-row > .fui-input {
      order: 1;
      flex-basis: 100%;
      min-width: 0;
      max-width: none;
    }
  }

  /* ---- E5 Path browser: a template's paths as M1's tree beside the node
     inspector, two panes of one panel (the M1 browser with two panes),
     stacked under 64 rem. The RM type is a quiet mono tag in the row. ---- */
  .fui-browser.is-two {
    grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 1.15fr);
  }

  .fui-rm-type {
    flex: none;
    padding: 0 0.3125rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: 1.25rem;
    white-space: nowrap;
  }

  .fui-path {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: top;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .fui-path > span {
    white-space: nowrap;
  }

  .fui-table td > span:has(> .fui-path) {
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }

  .fui-code-list {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (width < 64rem) {
    .fui-browser.is-two {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- E6 Condition groups: the query builder's criteria. A group is
     All or Any, may be negated, and holds conditions (F7 rows: the path,
     an operator, a typed value, Remove) and nested groups, each with an
     accent edge; a negated group's edge is dashed and says Not. ---- */
  .fui-cond-group {
    display: grid;
    gap: 0.625rem;
    padding: 0.625rem 0 0.625rem 0.875rem;
    border-inline-start: 3px solid var(--accent);
  }

  .fui-cond-group.is-not {
    border-inline-start-style: dashed;
  }

  .fui-cond-group .fui-cond-group {
    margin-inline-start: 0.25rem;
    border-inline-start-color: var(--edge-strong);
  }

  .fui-cond-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
  }

  .fui-cond-head > .fui-actions {
    margin-inline-start: auto;
  }

  .fui-cond-head .fui-check {
    margin: 0;
  }

  /* The group reads as one phrase: Match [All | Any] of these conditions. */
  .fui-cond-phrase {
    color: var(--ink);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  /* The list is a size container, so a row measures the room its group
     leaves it, nested groups' indents included. */
  .fui-cond-list {
    container-type: inline-size;
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-cond {
    display: grid;
    grid-template-columns: minmax(10rem, 1.3fr) minmax(7rem, 0.7fr) minmax(9rem, 1.2fr) auto;
    align-items: start;
    gap: var(--space-default);
  }

  .fui-cond > .fui-field {
    margin: 0;
    min-width: 0;
  }

  /* Remove sits level with the controls, under the labels' line. */
  .fui-cond > .fui-icon-button {
    margin-block-start: 1.75rem;
  }

  .fui-cond-path {
    display: block;
    margin-block-start: 0.25rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-body);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A condition row is an F7 row: on a phone, and in a group too narrow
     for its three fields side by side, its Remove stays on the first
     line, beside the path, so the row never widens the page (WCAG 2.2 SC
     1.4.10). */
  @media (width < 40rem) {
    .fui-cond {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .fui-cond > :not(.fui-icon-button):not(:first-child) {
      grid-column: 1 / -1;
    }

    .fui-cond > .fui-icon-button {
      grid-column: 2;
      grid-row: 1;
    }
  }

  @container (width < 30rem) {
    .fui-cond {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .fui-cond > :not(.fui-icon-button):not(:first-child) {
      grid-column: 1 / -1;
    }

    .fui-cond > .fui-icon-button {
      grid-column: 2;
      grid-row: 1;
    }
  }

  /* ---- E7 Results pane: a query's answer. Its head holds the count, the
     row window in words, Table or Chart, and Export; the table or the base
     line chart runs edge to edge under it (B10). ---- */
  .fui-results-window {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* ---- E8 Scope grant: one SMART scope parsed. The raw scope in mono,
     breaking only after a slash, a dot or a query mark; what it delegates
     in words; the operations it permits as tags, an absent one muted and
     struck, so the grant never rests on colour; the search constraint that
     narrows it; a broad grant carries the warn mark. ---- */
  .fui-scopes {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fui-scope {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 0.375rem 1rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--edge);
  }

  .fui-scope:first-child {
    border-top: 0;
  }

  .fui-scope-raw {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .fui-scope-constraint {
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .fui-scope-constraint > code {
    color: var(--ink);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
  }

  .fui-scope-reads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    min-width: 0;
  }

  .fui-scope-ops {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .fui-scope-op {
    position: relative;
    padding: 0 0.375rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-control);
    font-size: var(--text-micro);
    line-height: 1.25rem;
    white-space: nowrap;
  }

  .fui-scope-op.is-on {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: var(--accent-tint);
    color: var(--ink);
  }

  .fui-scope-op:not(.is-on) {
    color: var(--muted);
    text-decoration: line-through;
  }

  .fui-scope.is-refused .fui-scope-raw {
    color: var(--bad);
  }

  @media (width < 40rem) {
    .fui-scope {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- R17 anchored (FerroEHR pass): a popover form inside an anchor
     opens 4 px under its trigger, aligned to the trigger's end edge, as
     the F13 menu does; on a phone it spans the content width. It is a
     modal dialog in the top layer, where no ancestor holds it, so it is
     placed against its trigger by CSS anchor positioning, the anchor's
     name scoped to its own anchor; a browser without it centres the
     form in the viewport. Its backdrop stays clear from 40 rem, where it
     reads as a popover; the page behind is inert all the same. A popover
     drawn in the page (a mockup's) keeps its place under its trigger. ---- */
  .fui-anchor > .fui-popover {
    inset: calc(100% + 0.25rem) 0 auto auto;
    text-align: start;
  }

  @media (width < 40rem) {
    .fui-anchor > .fui-popover {
      position: fixed;
      inset: auto 0.75rem 0.75rem 0.75rem;
      z-index: 80;
      width: auto;
      box-shadow: var(--shadow-overlay), 0 0 0 100vmax var(--scrim);
    }
  }

  .fui-anchor > dialog.fui-popover {
    position: fixed;
    inset: 0;
    max-width: none;
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    margin: auto;
    color: var(--ink);
    text-align: start;
  }

  .fui-anchor > dialog.fui-popover::backdrop {
    background: transparent;
  }

  @media (width < 40rem) {
    .fui-anchor > dialog.fui-popover {
      inset: auto 0.75rem 0.75rem 0.75rem;
      width: auto;
      max-width: none;
      max-height: calc(100dvh - 1.5rem);
      margin: 0;
      box-shadow: var(--shadow-overlay);
    }

    .fui-anchor > dialog.fui-popover::backdrop {
      background: var(--scrim);
    }
  }

  @supports (position-area: block-end) {
    .fui-anchor {
      anchor-scope: --fui-anchor;
    }

    .fui-anchor > [commandfor] {
      anchor-name: --fui-anchor;
    }

    @media (width >= 40rem) {
      .fui-anchor > dialog.fui-popover {
        inset: auto;
        margin: 0;
        margin-block-start: 0.25rem;
        position-anchor: --fui-anchor;
        position-area: block-end span-inline-start;
        position-try-fallbacks: flip-block;
      }
    }
  }

  /* ---- A row's actions on a phone (FerroEHR pass): in every stacked
     table, the row-menu cell sits on the card's first line,
     at its end, as F7 keeps Remove on a repeatable row's first line. ---- */
  @media (width < 40rem) {
    .fui-table-stack .fui-table tbody tr:has(> td.fui-row-menu) {
      position: relative;
      padding-inline-end: 3rem;
    }

    .fui-table-stack .fui-table tbody tr > td.fui-row-menu {
      position: absolute;
      inset-block-start: 0.375rem;
      inset-inline-end: 0.375rem;
    }

    .fui-worklist .fui-table-stack .fui-table tbody tr:has(> [data-role="title-2"]):has(> td.fui-row-menu) {
      padding-inline-end: 0.25rem;
    }

    .fui-worklist .fui-table-stack .fui-table tbody tr:has(> [data-role="title-2"]) > td.fui-row-menu {
      position: static;
    }
  }

  /* ---- One overlay surface (FerroEHR pass): every open popup, the F13
     menu, R29's listbox, R17's popover and the search answer, stands
     clear of what it opens over: a full border in the strong hairline,
     and in dark a ground lifted above the raised cards. ---- */
  :is(.fui-menu, .fui-popover, .fui-listbox) {
    border-color: var(--edge-strong);
  }

  :root[data-theme="dark"] :is(.fui-menu, .fui-popover) {
    background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"], [data-theme="dark"]) :is(.fui-menu, .fui-popover) {
      background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
    }
  }

  :is(.fui-datepicker) {
    border-color: var(--edge-strong);
  }

  :root[data-theme="dark"] .fui-datepicker {
    background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"], [data-theme="dark"]) .fui-datepicker {
      background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
    }
  }

  /* ---- Verified review round (FerroEHR): shared fixes ---- */

  /* F12 shapes in the status pill (rule 12): degraded a diamond,
     unreachable a cross, unknown a hollow ring. */
  .fui-pill.fui-tone-warn::before {
    border-radius: 0.0625rem;
    transform: rotate(45deg);
  }

  .fui-pill.fui-tone-bad::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0;
    clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
  }

  .fui-pill.fui-tone-neutral::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--muted);
  }

  /* Below 64 rem the top bar's status keeps its shape: its words are
     visually hidden, as `fui-sr-only` hides text, and stay the pill's
     accessible name and its tooltip (F12). */
  @media (width < 64rem) {
    .fui-topbar-end .fui-topbar-status {
      position: relative;
      gap: 0;
      padding: 0.4375rem;
    }

    .fui-topbar-end .fui-topbar-status::before {
      margin: 0;
    }

    .fui-roomy-text {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }

  /* A theme choice in the user menu is a menuitemradio. */
  .fui-segment[aria-checked="true"] {
    --segment-ring: var(--accent-ink);
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* Menu separators stand out on the dark overlay surface. */
  :root[data-theme="dark"] .fui-menu-sep {
    background: var(--edge-strong);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fui-menu-sep {
      background: var(--edge-strong);
    }
  }

  /* A toast's action sits under its text, so the text keeps its width. */
  .fui-toast:has(> .fui-button) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
  }

  .fui-toast:has(> .fui-button) > .fui-button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .fui-toast:has(> .fui-button) > :is(.fui-icon-button, .fui-toast-close) {
    grid-column: 3;
    grid-row: 1;
  }

  /* M1: a tree's focus ring is drawn on the row, not on the item. */
  .fui-tree-item:focus-visible {
    outline: none;
  }

  .fui-tree-item:focus-visible > .fui-tree-row {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: var(--radius-control);
  }

  /* On a phone the subtitle stays under the title; the actions follow. */
  @media (width < 40rem) {
    .fui-page-header:has(> .fui-page-heading > .fui-actions) {
      display: flex;
      flex-direction: column;
    }

    .fui-page-header > .fui-page-heading:has(> .fui-actions) {
      display: contents;
    }

    .fui-page-header > .fui-page-heading > .fui-actions {
      order: 1;
      margin-block-start: 0.75rem;
    }
  }

  /* T1/T3: a tab row that scrolls starts with its current tab in view. The
     target is set only where the row is its own scroll container, so the
     page itself never scrolls to a tab on load (WCAG 2.2 SC 1.4.10). */
  .fui-tabbed > .fui-tabs > .fui-tab:is([aria-current="page"], [aria-current="true"], [aria-selected="true"]) {
    scroll-initial-target: nearest;
  }

  @media (width < 40rem) {
    .fui-tabs > .fui-tab:is([aria-current="page"], [aria-current="true"], [aria-selected="true"]) {
      scroll-initial-target: nearest;
    }
  }

  /* B1 in a B10 section runs edge to edge; a section head is its only head. */
  .fui-panel-section > .fui-codeview {
    margin-inline: calc(var(--space-loose) * -1);
    border-top: 1px solid var(--edge);
  }

  .fui-panel-section > .fui-codeview:last-child {
    margin-block-end: calc(var(--space-loose) * -1);
  }

  .fui-panel-section > .fui-codeview:first-child {
    margin-block-start: calc(var(--space-loose) * -1);
    border-top: 0;
  }

  .fui-panel-section > .fui-codeview .fui-code-panel {
    border-radius: 0;
  }

  /* B2 in a B10 section has no card frame and runs edge to edge, drawn
     there itself or as an island. */
  .fui-panel-section > .fui-mapping-editor,
  .fui-panel-section > leptos-island > .fui-mapping-editor {
    margin-inline: calc(var(--space-loose) * -1);
    border: 0;
    border-top: 1px solid var(--edge);
    border-radius: 0;
    box-shadow: none;
  }

  .fui-panel-section > .fui-mapping-editor:last-child,
  .fui-panel-section > leptos-island:last-child > .fui-mapping-editor {
    margin-block-end: calc(var(--space-loose) * -1);
  }

  /* On a phone the code view's head puts its meta under the title. */
  @media (width < 40rem) {
    .fui-codeview-head {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* B4 on a phone: the glyph keeps its line beside the title. */
  @media (width < 40rem) {
    .fui-load-report {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
    }

    .fui-load-report > :not(.fui-icon, .fui-load-report-title) {
      grid-column: 2;
    }
  }

  /* A field's segmented control is as wide as its segments. */
  .fui-field > .fui-segmented {
    width: fit-content;
    max-width: 100%;
  }

  /* An issue's severity badge starts with a capital. */
  .fui-issues .fui-badge {
    text-transform: capitalize;
  }

  /* On a phone the options row's fields take the full width. */
  @media (width < 40rem) {
    .fui-transform-options .fui-field:not(.fui-field-checks, :has(.fui-segmented)) {
      flex: 1 1 100%;
    }
  }

  /* A count cell on a phone card carries its noun (data-unit). */
  @media (width < 40rem) {
    .fui-table-stack .fui-table tbody td[data-unit]::after {
      content: "\00a0" attr(data-unit);
      color: var(--muted);
    }
  }

  /* A search value longer than the field ends in an ellipsis while the
     field is not being edited, so the cut is visible. */
  .fui-search .fui-input:not(:focus) {
    text-overflow: ellipsis;
  }

  /* A column sort is the submit button of a GET form that carries the
     sort, so a page sorts with no script; the form adds no box. */
  button.fui-sort {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .fui-sort-form {
    display: contents;
  }

  /* The forms a pager's buttons submit hold only hidden fields: no box. */
  .fui-pager-form {
    display: contents;
  }

  /* The card header row states a multi-key order beside the count, the
     actions at the end. */
  .fui-list-head > .fui-sort-note {
    margin: 0;
    margin-inline-end: auto;
  }

  /* A row's checkbox sits on the row's first line, at its start, in every
     stacked table; in a work-list card it leads the first line. */
  @media (width < 40rem) {
    .fui-table-stack .fui-table tbody tr:has(> td.fui-row-check) {
      position: relative;
      padding-inline-start: calc(var(--space-loose) + 1.75rem);
    }

    .fui-table-stack .fui-table tbody tr > td.fui-row-check {
      position: absolute;
      inset-block-start: 0.625rem;
      inset-inline-start: var(--space-loose);
      padding: 0;
      width: auto;
    }

    .fui-worklist .fui-table-stack .fui-table tbody tr:has(> td.fui-row-check) {
      padding-inline-start: 0.75rem;
    }

    .fui-worklist .fui-table-stack .fui-table tbody tr > td.fui-row-check {
      position: static;
      order: 0;
      flex: 0 0 auto;
      width: auto;
    }
  }

  /* A loading bar in a number column sits at the column's end. */
  .fui-num .fui-skeleton {
    margin-inline-start: auto;
  }

  /* A table that declares its columns keeps them, however few its rows. */
  .fui-table:has(> colgroup) {
    table-layout: fixed;
  }

  /* An empty end of a list toolbar takes no room, so the find field
     reaches the card edge on a phone. */
  .fui-list-toolbar-end:empty {
    display: none;
  }

  /* E2: the version being read is marked in its table; the worklist marks
     its focused row its own way. */
  .fui-table tbody tr[aria-current="true"]:not(.fui-worklist *) > :is(th, td) {
    background: var(--surface-sunken);
  }

  .fui-table tbody tr[aria-current="true"]:not(.fui-worklist *) > :first-child {
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* A stacked row is marked whole: the bar at the row's edge, its text
     inset from it. */
  @media (width < 40rem) {
    .fui-table-stack .fui-table tbody tr[aria-current="true"]:not(.fui-worklist *) {
      background: var(--surface-sunken);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .fui-table-stack .fui-table tbody tr[aria-current="true"]:not(.fui-worklist *) > :is(th, td) {
      background: none;
      box-shadow: none;
    }
  }

  @media (forced-colors: active) and (width < 40rem) {
    .fui-table-stack .fui-table tbody tr[aria-current="true"]:not(.fui-worklist *) {
      border-inline-start: 3px solid Highlight;
    }

    .fui-table-stack .fui-table tbody tr[aria-current="true"]:not(.fui-worklist *) > :first-child {
      border-inline-start: 0;
    }
  }

  /* E4 in edit: a removed item stays in place, struck through, with Undo. */
  .fui-folder-tree .fui-tree-item.is-removed > .fui-tree-row :is(.fui-tree-label, .fui-tree-code) {
    color: var(--muted);
    text-decoration: line-through;
  }

  /* E4 in edit on a phone: the row's icon actions stay on its first line,
     inside the panel; the name gives way with an ellipsis. */
  @media (width < 40rem) {
    .fui-folder-tree.is-editing .fui-tree-row > .fui-tree-label {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fui-folder-tree.is-editing .fui-tree-row > :is(.fui-tree-code, .fui-tree-count) {
      display: none;
    }

    .fui-folder-tree.is-editing .fui-tree-actions {
      flex: none;
      margin-inline-start: auto;
      padding-inline-start: 0.25rem;
    }
  }

  /* M1/E4: a tree wider than its panel scrolls sideways under the scroll
     cue, and a uid in a row never breaks inside itself. */
  .fui-concept-tree {
    scrollbar-width: thin;
    scrollbar-color: var(--edge-strong) transparent;
    background:
      linear-gradient(to left, var(--surface-raised) 40%, transparent) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 1.25rem 100% no-repeat scroll,
      var(--surface-raised);
  }

  .fui-concept-tree .fui-tree-code {
    white-space: nowrap;
  }

  /* M4's row on a phone: with no Remove beside it, the first field takes
     the whole row too. */
  @media (width < 40rem) {
    .fui-clause-filter:not(:has(> .fui-icon-button)) > :first-child {
      grid-column: 1 / -1;
    }
  }

  /* B2's toolbar on a phone keeps its tools on the line; the status words
     give way. */
  @media (width < 40rem) {
    .fui-editor-bar {
      flex-wrap: nowrap;
    }

    .fui-editor-bar > span:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* A path or an archetype id in a phone card breaks only where it offers
     a break (after a slash, a bracket or a dot), so each dot stays with
     its segment. */
  @media (width < 40rem) {
    .fui-table-stack .fui-table :is(.fui-path, .fui-archetype),
    .fui-table-stack .fui-table :is(td, th):has(> span > :is(.fui-path, .fui-archetype)) {
      overflow-wrap: normal;
    }
  }

  /* B2 with nothing in it is a few lines tall, not a full editor. */
  .fui-mapping-editor.is-empty .fui-editor-stack {
    min-height: 6rem;
  }

  /* E2: At a time sits under its table with a hairline and a gap. */
  .fui-table-scroll + .fui-at-time {
    margin-block-start: var(--space-loose);
    border-top: 1px solid var(--edge);
    padding-block-start: var(--space-loose);
  }

  /* A short field (a version, a number) keeps a short width. */
  .fui-field.is-short {
    max-width: 14rem;
  }

  /* R14 on a phone: Clear filters keeps one line and lines up with the chips. */
  @media (width < 40rem) {
    .fui-filter-chips > .fui-button {
      padding-inline: 0.25rem;
      white-space: nowrap;
    }
  }

  /* A chart's legend: plain keys, not toggles. */
  .fui-legend-key {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* A repeater on a phone: the column heads leave, each field shows its label. */
  @media (width < 40rem) {
    .fui-repeater-head {
      display: none;
    }

    .fui-repeater-row .fui-field > label.fui-sr-only {
      position: static;
      width: auto;
      height: auto;
      margin: 0 0 0.25rem;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      color: var(--muted);
      font-size: var(--text-small);
      line-height: var(--leading-body);
    }
  }

  /* A path in facts keeps to one line and scrolls sideways. */
  .fui-facts dd .fui-path {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: bottom;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  /* An id, a path or a URI breaks only where it offers a break (<wbr>),
     never inside a segment. */
  :is(.fui-archetype, .fui-path, .fui-request) {
    overflow-wrap: normal;
    word-break: normal;
  }

  .fui-alert .fui-alert-request code {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* R28: Saved has a fixed slot above the control's end, so it never moves
     the control; under preview cards it takes its own line below them. */
  .fui-setting-control {
    position: relative;
  }

  .fui-setting-row .fui-setting-control > .fui-setting-saved {
    position: absolute;
    inset: auto 0 calc(100% + 0.125rem) auto;
    white-space: nowrap;
  }

  .fui-setting-row:has(.fui-choice-cards) .fui-setting-control > .fui-setting-saved {
    position: static;
    flex-basis: 100%;
  }

  @media (width < 40rem) {
    .fui-setting-row .fui-setting-control > .fui-setting-saved {
      position: static;
      order: 1;
      flex-basis: 100%;
    }

    /* On a phone the preview cards are one column, each the full width,
       so no card is left alone on a row and no preview is squeezed. */
    .fui-choice-cards {
      flex-direction: column;
      gap: 0.5rem;
    }

    .fui-choice-card {
      width: 100%;
      min-width: 0;
      flex: none;
    }
  }

  /* A row's settings start at the section's edge. */
  .fui-panel-section > .fui-setting-rows > .fui-setting-row {
    padding-inline: 0;
  }

  /* A name, a queue or a file name never breaks inside itself, except in a
     toast, which is narrower than a long file name. */
  .fui-dialog code,
  .fui-table-stack .fui-table [data-role="title"] code {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .fui-toast code {
    overflow-wrap: anywhere;
  }

  /* On a phone the toast region keeps clear of the page's last row. */
  @media (width < 40rem) {
    :root:has(.fui-toasts > .fui-toast) .fui-main {
      padding-block-end: 7rem;
    }
  }

  /* Flat marks: a scope's permission letters are not buttons. */
  .fui-scope-ops {
    gap: 0.25rem 0.75rem;
  }

  .fui-scope-op,
  .fui-scope-op.is-on {
    border: 0;
    background: none;
    padding: 0;
    cursor: default;
  }

  .fui-scope-op.is-on::before {
    content: "✓\00a0";
    color: var(--ok);
  }

  /* Facts in a panel's sections share one label column, so the values line
     up from section to section. */
  @media (width >= 40rem) {
    .fui-panel-section .fui-facts {
      grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    }
  }

  /* A row of numbers in a section: the stat cards lose their frame. */
  .fui-stat-row > .fui-stat {
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
  }

  /* One stacked-row style on a phone: in a card or a panel the rows are
     hairline-separated lines that keep the panel's inset, never cards in
     a card; a group row is a full-width band between them. */
  @media (width < 40rem) {
    .fui-panel > .fui-table-stack,
    .fui-panel-section > .fui-table-stack {
      padding: 0;
    }

    .fui-panel-section > .fui-table-stack {
      margin-inline: calc(var(--space-loose) * -1);
    }

    .fui-table-stack .fui-table tbody tr {
      border: 0;
      border-radius: 0;
      border-top: 1px solid var(--edge);
      background: transparent;
      padding: 0.625rem var(--space-loose);
    }

    .fui-table-stack .fui-table tbody:first-child tr:first-child,
    .fui-table-stack .fui-table thead + tbody tr:first-child {
      border-top: 0;
    }

    .fui-table-stack .fui-table tbody tr + tr,
    .fui-table-stack .fui-table tbody + tbody {
      margin-block-start: 0;
    }

    .fui-table-stack .fui-table tbody tr.fui-group-row {
      background: var(--surface-sunken);
      padding-block: 0.375rem;
    }

    .fui-table-stack .fui-table tbody tr.fui-group-row > th {
      display: block;
      margin: 0;
      background: none;
      padding: 0;
    }
  }

  /* A path in a phone card takes the card's width under its label. */
  @media (width < 40rem) {
    .fui-table-stack .fui-table tbody td[data-label]:has(.fui-path) {
      display: block;
    }

    .fui-table-stack .fui-table tbody td[data-label]:has(.fui-path)::before {
      display: block;
    }
  }

  /* A sheet whose menu opens with its own header (the user menu) needs no
     second title. */
  .fui-menu-sheet:has(.fui-menu-header) .fui-menu-sheet-title {
    display: none !important;
  }

  /* ---- Library items from the FerroTERM fixer ---- */

  /* M1 browser over a flat code system: no hierarchy to walk, so the
     concept takes the room of two panes (adopted from FerroTERM). */
  @media (width >= 64rem) {
    .fui-browser.is-two-pane {
      grid-template-columns: minmax(14rem, 0.9fr) minmax(18rem, 2.3fr);
    }
  }

  /* B1's scroll cue on every code box, the About manifest's included, and
     on M5's matrix. */
  .fui-code-panel,
  .fui-root-matrix .fui-table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--edge-strong) transparent;
  }

  .fui-root-matrix .fui-table-scroll {
    background:
      linear-gradient(to left, var(--surface-raised) 40%, transparent) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 1.25rem 100% no-repeat scroll,
      var(--surface-raised);
  }

  /* Card heads keep one height, with or without actions. */
  .fui-panel-head {
    min-height: 3rem;
  }

  /* A menu item's focus ring stays inside the menu. */
  .fui-menu .fui-menu-item:focus-visible {
    outline-offset: -2px;
  }

  /* B4 inside a B10 section is a line of the section, not a card. */
  .fui-panel-section > .fui-load-report {
    border: 0;
    background: none;
    padding-inline: 0;
  }

  /* A select in a field takes the field's width on a phone. */
  @media (width < 40rem) {
    .fui-field .fui-select:not(.fui-select-button) {
      width: 100%;
    }
  }

  /* A code in a phone card breaks only when it cannot fit its line
     ("v3-ActCode" stays whole). */
  @media (width < 40rem) {
    .fui-table-stack .fui-table td code {
      overflow-wrap: break-word;
    }
  }

  /* A code value in facts (a canonical URL, an id) keeps to one line and
     scrolls sideways; a <wbr> in it is no longer needed. */
  .fui-facts dd > code {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: bottom;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  /* A row's hover tint reads in light too. */
  .fui-table tbody tr:hover {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
  }

  /* Skeleton bars show in the phone table stack. */
  .fui-table-stack .fui-skeleton {
    display: block;
    min-width: 4rem;
    min-height: 0.75rem;
  }

  /* A unit or a product name that must stay whole, in a table card too. */
  :is(.fui-unit, .fui-nowrap),
  .fui-table-stack .fui-table :is(.fui-unit, .fui-nowrap) {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  /* A bottom sheet stands above sticky pane heads. */
  @media (width < 40rem) {
    .fui-menu.fui-menu-anchored.fui-menu-sheet {
      z-index: 90;
    }

    body:has(.fui-menu-sheet:not(details:not([open]) *)) .fui-transform-head {
      z-index: auto;
    }

    /* The user menu's theme group keeps the content inset; a stacked
       group fills the inset instead of the full width. */
    .fui-menu-sheet .fui-segmented {
      margin-inline: 0.5rem;
    }

    .fui-menu-sheet .fui-segmented:has(> :nth-child(4)) {
      width: auto;
    }
  }

  /* The lockup keeps its accent word at every width. */
  .fui-topbar-row > .fui-lockup .fui-lockup-accent {
    display: inline !important;
  }

  /* The dock's message glyph sits on the first line. */
  .fui-dock-message {
    align-items: flex-start;
  }

  .fui-dock-message > .fui-icon {
    flex: none;
    margin-block-start: 0.125rem;
  }

  /* A refusal inside a transform pane is flat: no box in a box. */
  .fui-transform-body > .fui-alert {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* An invalid editor carries the bad tone on its edge. */
  .fui-editor[aria-invalid="true"] {
    box-shadow: inset 3px 0 0 var(--bad);
  }

  /* In the rail a group's name leaves the layout and stays its list's
     accessible name; a hairline keeps the groups apart. */
  .fui-sidebar-rail .fui-nav-group {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fui-sidebar-rail .fui-nav-group + .fui-nav-list:not(:first-of-type) {
    margin-block-start: 0.5rem;
    border-top: 1px solid var(--edge);
    padding-block-start: 0.5rem;
  }

  /* A B3 line reference is a link and looks like one. */
  a.fui-diag-where {
    color: var(--accent);
  }

  /* R25 on a phone: the date sheet's grid takes the sheet's width and each
     day's label sits in its middle. */
  @media (width < 40rem) {
    .fui-date-field > .fui-datepicker table {
      width: 100%;
    }

    .fui-date-field > .fui-datepicker .fui-day {
      display: grid;
      width: 100%;
      place-items: center;
    }
  }

  /* On a phone the score scale keeps its middle tick. */
  @media (width < 40rem) {
    .fui-score-scale-tick:nth-child(odd) {
      display: revert;
    }
  }

  /* The toast region keeps clear of the page's last row at every width. */
  :root:has(.fui-toasts > .fui-toast) .fui-main {
    padding-block-end: 7rem;
  }

  /* F12: excluded is its own mark (a bar), and an excluded row's links are muted. */
  .fui-dot.is-excluded {
    height: 0.125rem;
    border-radius: 0.0625rem;
    background: var(--muted);
    box-shadow: none;
  }

  .fui-table tbody tr.is-excluded a:not(.fui-button) {
    color: var(--muted);
  }

  /* A segmented control of four or more options stacks on a phone. */
  @media (width < 40rem) {
    .fui-segmented:has(> :nth-child(4)) {
      display: grid;
      width: 100%;
      grid-auto-flow: row;
    }
  }

  /* Facts across a row are a column grid, never a ragged wrap. */
  .fui-facts-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }

  /* An open menu stacks above the next row's controls. */
  .fui-table tbody tr:has(.fui-menu:not(details:not([open]) *)) {
    position: relative;
    z-index: 60;
  }

  /* Mono text keeps a plain hyphen (no ligature or contextual dash). */
  :is(code, kbd, .fui-mono, pre) {
    font-variant-ligatures: none;
    font-feature-settings: "calt" 0, "liga" 0;
  }

  /* R28 on a phone: the cards keep a compact padding and a small title,
     so "Comfortable" fits whole in a third of the row. */
  @media (width < 40rem) {
    .fui-choice-card {
      padding: 0.375rem;
    }

    .fui-choice-card :is(strong, .fui-choice-card-title, .fui-choice-title) {
      font-size: var(--text-small);

      line-height: var(--leading-body);
    }

    .fui-choice-card {
      font-size: var(--text-small);

      line-height: var(--leading-body);
    }
  }

  /* ---- Library items from the FerroFED and FerroPIX fixers (final pass) ---- */

  /* R17: the toast region keeps clear of the footer too. */
  :root:has(.fui-toasts > .fui-toast) .fui-page > .fui-footer {
    padding-block-end: 7rem;
  }

  /* Skeleton bars read on the dark ground. */
  :root[data-theme="dark"] .fui-skeleton {
    background: color-mix(in srgb, var(--ink) 16%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fui-skeleton {
      background: color-mix(in srgb, var(--ink) 16%, transparent);
    }
  }

  /* R28: a choice card reserves its check corner; an option card without a
     preview takes the full width on a phone. */
  .fui-choice-card-text {
    padding-inline-end: 1.25rem;
  }

  @media (width < 40rem) {
    .fui-choice-cards:not(:has(.fui-preview)) {
      flex-direction: column;
    }

    .fui-choice-cards:not(:has(.fui-preview)) > .fui-choice-card {
      width: 100%;
      flex: none;
    }
  }

  /* Fan-out results are hairline rows with their tone edge, not cards. */
  .fui-fanout-item {
    border: 0;
    border-top: 1px solid var(--edge);
    border-inline-start: 3px solid var(--tone, var(--edge-strong));
    border-radius: 0;
    background: transparent;
  }

  .fui-fanout-item:first-child {
    border-top: 0;
  }

  /* Topology on a phone: no minimap over the graph; the touch hint shows
     only where there is touch. */
  @media (width < 40rem) {
    .fui-topology-minimap {
      display: none;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .fui-topology-hint.is-touch {
      display: none;
    }
  }

  /* R4 on a phone: the dock's actions stack, the primary full width. */
  @media (width < 40rem) {
    .fui-dock-actions {
      flex-wrap: wrap;
    }

    .fui-dock-actions > .fui-button-primary {
      order: -1;
    }
  }

  /* R29 on a phone: the open listbox is a bottom sheet over a scrim. */
  @media (width < 40rem) {
    .fui-select-anchor > .fui-listbox {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 80;
      width: auto;
      max-width: none;
      max-height: 60vh;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      box-shadow: 0 0 0 100vmax var(--scrim);
    }
  }

  /* The effect words stay readable on a changed row's tint. */
  .fui-setting-row.is-changed .fui-effect-live {
    color: color-mix(in srgb, var(--ok) 80%, var(--ink));
  }

  .fui-setting-row.is-changed .fui-effect-restart {
    color: color-mix(in srgb, var(--warn) 80%, var(--ink));
  }

  /* A tool in an editor's bar keeps its words on one line. */
  .fui-editor-bar .fui-button {
    white-space: nowrap;
  }

  /* A link in a notice keeps its words on one line while they fit, moving
     whole to the next line, and wraps only when it alone is wider than the
     notice (WCAG 2.2 SC 1.4.10). */
  :is(.fui-notice, .fui-alert) a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .fui-editor-bar > .fui-actions {
    flex: none;
  }

  /* A changed value in a phone card (a URL) wraps inside its cell. */
  @media (width < 40rem) {
    td .fui-change {
      display: inline;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  /* On a phone the preview cards' column takes the content width. */
  @media (width < 40rem) {
    .fui-setting-control:has(.fui-choice-cards),
    .fui-choice-cards {
      width: 100%;
    }

    .fui-choice-cards > .fui-choice-card {
      width: 100%;
    }

    /* Phones have no keyboard: the Keyboard tab (data-tab="keyboard", the
       family hook) leaves the tab row. */
    .fui-tabs > .fui-tab[data-tab="keyboard"] {
      display: none !important;
    }
  }

  /* A repeatable list's blank row: a disabled fieldset that hydrates with the
     page, never shows and never posts; Add copies its rows. */
  .fui-repeat-blank[hidden] {
    display: none;
  }

  /* ---- The search answer (FerroUI #144, the search result row) ---- */

  /* The typeahead panel: one overlay surface anchored under the joined
     search, solid, the strong hairline, the overlay shadow, and in dark a
     ground lifted above the raised cards. It is out of the flow, so it moves
     nothing on the page, and it sits above the sticky top bar's other
     content. It opens from the field's start edge at least as wide as the
     field and at most 40rem, never past the window's 16px gutter; the island
     opens it from the end edge (`is-end`) or as wide as the field
     (`is-narrow`) when the window has no room. It ends above the window's
     foot and scrolls inside itself, so every hit stays reachable under the
     sticky top bar (WCAG 2.2 SC 1.4.10). */
  .fui-search-results {
    position: absolute;
    top: calc(100% + 0.375rem);
    inset-inline: -1px;
    z-index: 35;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    padding: 0.375rem;
    max-height: min(32rem, calc(100dvh - var(--bar) - 1rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: start;
  }

  .fui-search-results[hidden] {
    display: none;
  }

  @media (width >= 48rem) {
    .fui-search-results {
      inset-inline: -1px auto;
      width: max(calc(100% + 2px), min(40rem, 100vw - 2rem));
    }

    .fui-search-results.is-end {
      inset-inline: auto -1px;
    }

    .fui-search-results.is-narrow {
      inset-inline: -1px;
      width: auto;
    }
  }

  :root[data-theme="dark"] .fui-search-results {
    background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"], [data-theme="dark"]) .fui-search-results {
      background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink));
    }
  }

  .fui-search-results-list,
  .fui-search-results-list > [role="group"] {
    display: grid;
    gap: 0.125rem;
  }

  .fui-search-results-list > [role="group"] + [role="group"] {
    margin-block-start: 0.25rem;
  }

  /* A hit, in the panel and on the find page: the mark, then the name over
     its line, the line on a row of its own, a tag at the end across both
     rows, so the tag never clips the line. */
  .fui-hit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 0.75rem;
    border-radius: var(--radius-control);
    padding: 0.375rem 0.5rem;
    color: var(--ink);
    text-decoration: none;
  }

  .fui-hit > .fui-hit-line {
    grid-row: 2;
  }

  .fui-hit > :is(.fui-identifier, .fui-tag) {
    grid-row: 1 / 3;
    grid-column: 2;
  }

  .fui-hit:has(> :is(.fui-dot, .fui-icon, svg):first-child) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .fui-hit:has(> :is(.fui-dot, .fui-icon, svg):first-child) > :is(.fui-dot, .fui-icon, svg) {
    grid-row: 1 / 3;
    align-self: start;
    margin-block-start: 0.125rem;
  }

  .fui-hit:has(> :is(.fui-dot, .fui-icon, svg):first-child) > :is(.fui-hit-name, .fui-hit-line) {
    grid-column: 2;
  }

  .fui-hit:has(> :is(.fui-dot, .fui-icon, svg):first-child) > :is(.fui-identifier, .fui-tag) {
    grid-column: 3;
  }

  .fui-hit > .fui-dot {
    margin-inline: 0.25rem;
  }

  /* A long name or line wraps inside its column, under neither the mark
     nor the tag. */
  .fui-hit-name,
  .fui-hit-line {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .fui-hit-name {
    font-weight: 500;
  }

  /* The words that match the query: the heavier weight, never a colour
     alone, so a match reads in forced colours too (family rule 14). */
  mark.fui-search-match {
    background: transparent;
    color: inherit;
    font-weight: 700;
  }

  /* The active option: the accent tint and an accent edge at its start, so
     it never rests on the tint alone (WCAG 2.2 SC 1.4.11). */
  .fui-search-results [role="option"] {
    cursor: pointer;
  }

  .fui-search-results [role="option"][aria-selected="true"] {
    background: var(--accent-tint);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .fui-search-results-head {
    margin: 0;
    padding: 0.25rem 0.5rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
  }

  .fui-search-results-group {
    margin: 0;
    padding: 0.375rem 0.5rem 0.125rem;
    color: var(--muted);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    font-weight: 600;
    text-transform: none;
  }

  /* The row of what is happening: asking, an error, an answer that may not
     be whole. */
  .fui-search-results-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem;
    color: var(--muted);
  }

  .fui-search-results-status.fui-tone-bad,
  .fui-search-results-status.fui-tone-warn {
    color: var(--ink);
  }

  .fui-search-results-status.fui-tone-bad > svg {
    color: var(--bad);
  }

  .fui-search-results-status.fui-tone-warn > svg {
    color: var(--warn);
  }

  .fui-search-results-more {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-start: 0.25rem;
    border-top: 1px solid var(--edge);
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    padding: 0.5rem;
    color: var(--accent);
    font-weight: 500;
  }

  .fui-search-results-more + .fui-search-results-more {
    margin-block-start: 0;
    border-top: 0;
  }

  .fui-search-results-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    color: var(--muted);
  }

  .fui-search-results-empty strong {
    display: block;
    color: var(--ink);
  }

  @media (forced-colors: active) {
    .fui-search-results [role="option"][aria-selected="true"] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }

  /* ---- The find page's results: in the page, one list card per kind ---- */

  .fui-find-results {
    display: grid;
    gap: var(--space-loose);
  }

  .fui-find-head {
    margin: 0;
  }

  .fui-find-list {
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
  }

  .fui-find-list > li + li {
    border-top: 1px solid var(--edge);
  }

  .fui-find-list .fui-hit {
    border-radius: 0;
    padding: 0.625rem var(--space-loose);
  }

  .fui-find-list .fui-hit:hover {
    background: var(--surface-sunken);
  }

  .fui-find-list .fui-hit:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .fui-find-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--muted);
  }

  .fui-find-empty strong {
    display: block;
    color: var(--ink);
  }

  .fui-find-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-self: start;
    color: var(--accent);
    font-weight: 500;
  }

  /* ---- R4, the docked decision bar: two fields, the phone stack and the
     room a focused control keeps (FerroUI #145) ---- */

  /* A reason and a path side by side, the decisions after them. */
  .fui-dock-row:has(> .fui-dock-field ~ .fui-dock-field) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .fui-dock-field ~ .fui-dock-field > :is(.fui-label, .fui-input, .fui-error, .fui-help) {
    grid-column: 2;
  }

  .fui-dock-row:has(> .fui-dock-field ~ .fui-dock-field) > .fui-dock-actions {
    grid-column: 3;
  }

  /* A control the keyboard reaches is scrolled clear of the bar (WCAG 2.2
     SC 2.4.11): the bar's height with a field and its line, and a gap. */
  @media (width >= 40rem) and (height >= 30rem) {
    html:has(.fui-dock) {
      scroll-padding-bottom: 9rem;
    }
  }

  /* In a window too short to keep the bar and the page both in view (a
     phone held sideways, 400% zoom), the bar stops sticking and sits at the
     main area's foot, so it never covers the page it decides (WCAG 2.2
     SC 1.4.10, SC 2.4.11); it sticks only where the scroll padding above
     keeps a focused control clear of it. */
  @media (height < 30rem), (width < 40rem) and (height < 40rem) {
    .fui-dock {
      position: static;
    }
  }

  /* On a phone each field takes its own rows and the decisions stack
     under them at full width, the primary first. */
  @media (width < 40rem) {
    .fui-dock-row:has(> .fui-dock-field ~ .fui-dock-field) {
      grid-template-columns: minmax(0, 1fr);
    }

    .fui-dock-field ~ .fui-dock-field > .fui-label {
      grid-row: 4;
      grid-column: 1;
    }

    .fui-dock-field ~ .fui-dock-field > .fui-input {
      grid-row: 5;
      grid-column: 1;
    }

    .fui-dock-field ~ .fui-dock-field > :is(.fui-error, .fui-help) {
      grid-row: 6;
      grid-column: 1;
    }

    .fui-dock-row .fui-dock-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .fui-dock-row:has(> .fui-dock-field ~ .fui-dock-field) > .fui-dock-actions {
      grid-row: 7;
      grid-column: 1;
    }
  }

  @media (width < 40rem) and (height >= 40rem) {
    html:has(.fui-dock) {
      scroll-padding-bottom: 16rem;
    }
  }

  /* A control for the narrow screen's drawer alone (its Menu and Close),
     hidden from the first breakpoint up; last in the layer, so it outranks
     the display of the button classes. */
  @media (width >= 48rem) {
    .fui-drawer-only {
      display: none;
    }
  }
}

/* ---- Forced colours ----
   Under forced colours the user's palette replaces every colour, and box
   shadows and gradient images are dropped, so each mark drawn by them is
   drawn here again in system colours: the state shapes, the swatches, the
   switch, the pressed and current controls, the select's chevron, the
   state edges of rows, and the frame of a chart or a score. The marks of
   a data series keep their own colour beside their shape and word.
   WCAG 2.2 SC 1.4.1 and SC 1.4.11; CSS Color Adjustment Module Level 1,
   § 3 (https://www.w3.org/TR/css-color-adjust-1/#forced). */
@layer components {
  @media (forced-colors: active) {
    /* A state's shape in the text colour (F12, family rule 12): the
       filled dot, the diamond and the cross keep their outline, the
       hollow ring its ring. */
    .fui-pill::before,
    .fui-dot,
    .fui-editor-dirty::before,
    .is-current > .fui-lifecycle-dot::after {
      forced-color-adjust: none;
      background: CanvasText;
    }

    .fui-pill.fui-tone-neutral::before,
    .fui-dot.is-muted,
    .fui-dot.fui-tone-neutral,
    .fui-inactive-mark::before {
      forced-color-adjust: none;
      border: 1.5px solid CanvasText;
      background: transparent;
    }

    .fui-dot.is-excluded {
      border: 0;
      background: GrayText;
    }

    /* Rules drawn as a ground: the divider's lines and the timeline's
       rail. */
    .fui-divider::before,
    .fui-divider::after,
    .fui-timeline::before {
      forced-color-adjust: none;
      background: GrayText;
    }

    .fui-skeleton {
      outline: 1px solid GrayText;
      outline-offset: -1px;
    }

    /* The switch: its knob, and its on state in the highlight. */
    :is(.fui-check > input.fui-switch, input.fui-switch)::before {
      forced-color-adjust: none;
      background: ButtonText;
    }

    :is(.fui-check > input.fui-switch, input.fui-switch):checked {
      border-color: Highlight;
      background: Highlight;
    }

    :is(.fui-check > input.fui-switch, input.fui-switch):checked::before {
      background: HighlightText;
    }

    :is(.fui-check > input.fui-switch, input.fui-switch):disabled {
      border-color: GrayText;
    }

    :is(.fui-check > input.fui-switch, input.fui-switch):disabled::before {
      background: GrayText;
    }

    /* A pressed or chosen segment, the theme choice of the user menu
       among them, and a checked chip: the highlight, as the system draws
       a chosen item. Kept from the forced palette, so no backplate of the
       canvas colour hides its words. */
    .fui-segment:is([aria-pressed="true"], [aria-current="true"], [aria-checked="true"], :has(> input:checked)),
    .fui-chip-check:has(:checked) {
      forced-color-adjust: none;
      border-color: Highlight;
      background: Highlight;
      color: HighlightText;
    }

    .fui-segment:is([aria-pressed="true"], [aria-current="true"], [aria-checked="true"]):focus-visible,
    .fui-segment:has(> input:checked:focus-visible),
    .fui-chip-check:has(:checked:focus-visible) {
      outline-color: CanvasText;
      box-shadow: inset 0 0 0 4px HighlightText;
    }

    /* The current or selected item of a list: a ring in the highlight,
       which the focus ring replaces while it is focused. */
    .fui-nav-entry[aria-current="page"]:not(:focus-visible),
    .fui-settings-nav .fui-nav-entry[aria-current="true"]:not(:focus-visible),
    .fui-tab:is([aria-current="page"], [aria-current="true"], [aria-selected="true"]):not(:focus-visible),
    .fui-menu-item:is([aria-pressed="true"], [aria-current="true"]):not(:focus-visible),
    .fui-pager-size:is([aria-current="true"], [aria-pressed="true"]):not(:focus-visible),
    .fui-listbox-option[aria-selected="true"]:not(:focus-visible),
    .fui-search-results li[aria-selected="true"] > a:not(:focus-visible),
    .fui-search-results li > a[aria-current="true"]:not(:focus-visible),
    .fui-tree-item[aria-selected="true"]:not(:focus-visible) > .fui-tree-row,
    .fui-choice-card:has(input:checked):not(:has(input:focus-visible)) {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }

    /* The day that is today, and the end of a range being chosen. */
    td[aria-current="date"] > .fui-day,
    .fui-day.fui-day-tentative-end,
    .fui-datepicker-cell[aria-current="date"] {
      outline: 1px solid CanvasText;
      outline-offset: -1px;
    }

    /* A row's state edge, an inset shadow elsewhere, as a border. */
    .fui-worklist .fui-table tbody tr[aria-current="true"] > :first-child,
    .fui-table tbody tr[aria-current="true"] > :first-child,
    .fui-match-list > li[aria-selected="true"],
    .fui-diag.is-current,
    .fui-code-line.is-current,
    .fui-code-line:target {
      border-inline-start: 3px solid Highlight;
    }

    .fui-compare tr.fui-compare-row-differ > th,
    .fui-compare-stacked-rows > div.fui-compare-row-differ,
    .fui-editor[aria-invalid="true"] {
      border-inline-start: 3px solid CanvasText;
    }

    .fui-worklist .fui-table tbody tr:is(:focus-visible, :has(.fui-row-link:focus-visible)) {
      outline: 2px solid CanvasText;
      outline-offset: -2px;
    }

    /* A clause's edge: include solid, exclude dashed. */
    .fui-clause::before {
      forced-color-adjust: none;
      background: CanvasText;
    }

    .fui-clause.is-exclude::before {
      border-inline-start: 3px dashed CanvasText;
      background: none;
    }

    /* The select and the combobox keep their chevron, drawn in the field
       text colour. */
    .fui-select:not([multiple], [size]),
    .fui-combobox-input {
      forced-color-adjust: none;
      border-color: FieldText;
      background-color: Field;
      background-image:
        linear-gradient(45deg, transparent calc(50% - 0.75px), FieldText calc(50% - 0.75px), FieldText calc(50% + 0.75px), transparent calc(50% + 0.75px)),
        linear-gradient(-45deg, transparent calc(50% - 0.75px), FieldText calc(50% - 0.75px), FieldText calc(50% + 0.75px), transparent calc(50% + 0.75px));
      color: FieldText;
    }

    .fui-combobox-input::placeholder {
      color: GrayText;
    }

    :is(.fui-select:not([multiple], [size]), .fui-combobox-input):is(:hover, :focus-visible) {
      border-color: Highlight;
    }

    :is(.fui-select:not([multiple], [size]), .fui-combobox-input):focus-visible {
      outline-color: Highlight;
    }

    :is(.fui-select:not([multiple], [size]), .fui-combobox-input):disabled {
      border-color: GrayText;
      background-image:
        linear-gradient(45deg, transparent calc(50% - 0.75px), GrayText calc(50% - 0.75px), GrayText calc(50% + 0.75px), transparent calc(50% + 0.75px)),
        linear-gradient(-45deg, transparent calc(50% - 0.75px), GrayText calc(50% - 0.75px), GrayText calc(50% + 0.75px), transparent calc(50% + 0.75px));
      color: GrayText;
    }

    /* Charts: the frame and the labels in system colours, each series in
       its own colour and mark, and the swatches beside their names. */
    .fui-chart-label,
    .fui-score-mark-label,
    .fui-score-point-label {
      fill: CanvasText;
      stroke: Canvas;
    }

    .fui-score-mark-label {
      stroke: none;
    }

    .fui-chart-grid {
      stroke: GrayText;
    }

    .fui-chart-axis,
    .fui-score-mark,
    .fui-score-bar-zero {
      stroke: CanvasText;
    }

    .fui-chart-point {
      fill: Canvas;
    }

    .fui-score-point {
      stroke: Canvas;
    }

    .fui-funnel-cut {
      stroke: Canvas;
    }

    .fui-swatch,
    .fui-chart-line,
    .fui-chart-gap,
    .fui-chart-point {
      forced-color-adjust: none;
    }

    .fui-funnel-swatch {
      forced-color-adjust: none;
      border: 1px solid CanvasText;
    }
  }
}