/* ============================================================================
   room-lineage-dial.css — the interior of the Family Navigator Room.

   furnishing-vessel-interiors S1 (DT authoring). Presentation only.
   Spec: docs/room-specs/13-family-navigator.md — committed before this file.

   ── THE SEAM ───────────────────────────────────────────────────────────────
   buildWindow() stamps `.ffrw-shell.ffrw-vessel.ffrw-family-navigator`; the
   view-room factory reparents `#view-family-navigator` into `.ffrw-body` with
   `.ffrw-hosted`. Everything below rides

       .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted

   so the flat App-Panel view and family-mobile.js are untouched by
   construction, and the single-step revert is this file plus its one <link>.

   ── WHAT THIS FILE MAY NOT DO ──────────────────────────────────────────────
   No handler, no label, no route, no truthful string, no bang-important, no
   second scroll owner. The `--member-accent` per-person edge and the
   `.fnav-member-me` green are truthful data-driven marks and are KEPT.
   Family headshots are content, never texture (D1 §10.4) — no filter, no
   crop, no tint touches an <img>.

   WITHHELD (spec §6): the Fergi aperture, the person panel's own dress and
   focus behaviour, the breadcrumb's inline separator. They render as today.
   ============================================================================ */

/* ── The well, and the ONE scroll owner ───────────────────────────────────
   Base gives .family-navigator `height: calc(100vh - var(--nav-height))` — a
   viewport height. Inside the vessel the well is not viewport-tall, so the
   hosted view scrolled the whole navigator while the content pane kept its
   own scrollbar: two competing vertical scrollbars, the exact case D1 §8.2
   forbids. Room-scoped 100% makes the navigator fit the well and leaves
   `.family-navigator-content` as the single owner it already was in flat
   view. Geometry inside the well; window custody untouched. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted {
  --dl-gutter: 20px;
  --dl-ink: var(--ffvr-ink, #EEF8FF);
  --dl-ink-muted: var(--ffvr-ink-muted, #B5C0C8);
  --dl-rule: color-mix(in srgb, var(--ffvr-rule, #55B8FF) 32%, transparent);
  --dl-rule-strong: color-mix(in srgb, var(--ffvr-rule, #55B8FF) 58%, transparent);
  --dl-plane: var(--ffvr-surface-raised, #1C2933);
  --dl-plane-hover: color-mix(in srgb, var(--ffvr-surface-raised, #1C2933) 90%, var(--ffvr-ink, #EEF8FF) 10%);
  --dl-accent: var(--ffvr-accent, #38D4C7);

  color: var(--dl-ink);
  height: 100%;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .family-navigator {
  height: 100%;
  min-height: 0;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .family-navigator-content {
  padding: 16px var(--dl-gutter) 24px;
  scroll-padding-block-start: 16px;
  scroll-padding-block-end: 24px;
}

/* ── One hierarchy: the chassis title is the title ─────────────────────────
   The vessel header already says `Family Navigator / LINEAGE DIAL`. The
   hosted <h3> repeats it. VISUALLY RETIRED, NOT REMOVED — the container's
   aria-label and the heading node survive; only the pixels go. The stats
   line beneath it is a truthful existing string and becomes the rail's
   context slot. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-info h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── The operational rail (D1 §2.3) ───────────────────────────────────────
   The gray SaaS gradient (#1f2937→#111827) yields to the Room's own rail
   ground; one bottom divider, no perimeter. Controls keep their DOM order:
   back · context · tabs · search · actions. Wraps to two rows at narrow
   width rather than hiding a canonical control. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .family-navigator-header-compact {
  background: color-mix(in srgb, var(--dl-plane) 8%, var(--ffvr-surface, #0A1722));
  border-bottom: 1px solid var(--dl-rule);
  padding: 6px var(--dl-gutter);
  min-height: 52px;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 16px;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-info {
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
}

/* The context slot: the eyebrow register (D1 §2.3) — it never repeats the
   Room name; it says what is on the dial: "43 members • 4 generations". */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-stats-compact {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dl-ink-muted);
  opacity: 1;
  white-space: nowrap;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-back-btn-compact {
  background: transparent;
  border: 1px solid var(--dl-rule);
  color: var(--dl-ink-muted);
  border-radius: 8px;
  min-height: 36px;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-back-btn-compact:hover {
  background: color-mix(in srgb, var(--dl-plane) 60%, transparent);
  color: var(--dl-ink);
}

/* Tabs: the Room's pill pair. The white active chip retires; active is the
   accent-tinted state on the Room ground. role/aria custody untouched. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-toggle {
  background: transparent;
  border: 1px solid var(--dl-rule);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn {
  color: var(--dl-ink-muted);
  min-height: 30px;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn:hover {
  color: var(--dl-ink);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn.active {
  background: color-mix(in srgb, var(--dl-accent) 18%, transparent);
  color: var(--dl-ink);
  box-shadow: inset 0 0 0 1px var(--dl-accent);
}

/* Search: a control ground on the Room's own material. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-search-input {
  background: color-mix(in srgb, var(--dl-plane) 72%, var(--ffvr-surface-sunken, #000) 28%);
  border: 1px solid var(--dl-rule-strong);
  color: var(--dl-ink);
  border-radius: 8px;
  min-height: 36px;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-search-input::placeholder {
  color: var(--dl-ink-muted);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-search-input:focus {
  background: color-mix(in srgb, var(--dl-plane) 84%, var(--ffvr-surface-sunken, #000) 16%);
  border-color: var(--dl-accent);
}

/* Focus is the universal treatment on every rail control (D1 §3.6). */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-back-btn-compact:focus-visible,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn:focus-visible,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-search-input:focus-visible,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .btn-icon-modern:focus-visible,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-action-btn:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #000000;
}

/* ── The plates: etched instrument glass (D1 §6.1) ────────────────────────
   The indigo #667eea→#764ba2 gradient belongs to no part of this vessel.
   Couples and units become glass plates on the Room's raised surface with
   the §6.1 inset highlight; the member card trades white for the same
   plate. The renderer's `--member-accent` left edge is truthful per-person
   data and is preserved exactly. Lift capped at −1px (D1 §3.7). */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-card,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-unit-header {
  background: var(--dl-plane);
  color: var(--dl-ink);
  border: 1px solid var(--dl-rule);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-card:hover {
  transform: translateY(-1px);
  background: var(--dl-plane-hover);
  border-color: var(--dl-rule-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 18px rgba(0, 0, 0, .24);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-card:active {
  transform: translateY(0);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-meta,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-arrow,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-unit-subtitle {
  color: var(--dl-ink-muted);
  opacity: 1;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-card {
  background: var(--dl-plane);
  border-color: var(--dl-rule);
  border-left-color: var(--member-accent, var(--dl-rule-strong));
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-card:hover {
  transform: translateY(-1px);
  background: var(--dl-plane-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 18px rgba(0, 0, 0, .24);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-name {
  color: var(--dl-ink);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-dates {
  color: var(--dl-ink-muted);
}

/* Badges keep their words; light chips become Room pills. The me-badge's
   green is a truthful state colour from the base and is not restyled. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-type-badge {
  background: color-mix(in srgb, var(--dl-accent) 16%, transparent);
  color: var(--dl-ink);
}

/* The monogram that shows when a person has no headshot: the Room's own
   plane and ink, not a stranger's indigo. The <img> itself is untouched. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-headshot-fallback {
  background: color-mix(in srgb, var(--dl-plane) 72%, var(--ffvr-surface-sunken, #000) 28%);
  color: var(--dl-ink-muted);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-headshot {
  border-color: var(--dl-rule-strong);
}

/* ── The action row: four quiet Room controls ─────────────────────────────
   Handlers and titles untouched; the light chip and the blue hover fill
   yield to the Room's control grammar. */
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-action-btn {
  background: transparent;
  border: 1px solid var(--dl-rule);
  color: var(--dl-ink-muted);
  border-radius: 8px;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-action-btn:hover {
  background: color-mix(in srgb, var(--dl-accent) 14%, transparent);
  border-color: var(--dl-accent);
  color: var(--dl-ink);
}

/* ── Friend groups as shelf headings, and the search note ─────────────────*/
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-friend-group-header {
  border-bottom: 1px solid var(--dl-rule);
  padding-bottom: 6px;
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-friend-group-title {
  color: var(--dl-ink);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-friend-group-count {
  color: var(--dl-ink-muted);
}

.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-search-note {
  background: color-mix(in srgb, var(--dl-accent) 10%, transparent);
  border-left: 3px solid var(--dl-accent);
  color: var(--dl-ink-muted);
}

/* ── The other surfaces of the same Room ──────────────────────────────────*/
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-loading,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-empty,
.ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-error {
  color: var(--dl-ink-muted);
}

/* ── Reduced motion (the floor plus the list — pilot pattern) ─────────────*/
@media (prefers-reduced-motion: reduce) {
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted * {
    transition: none;
  }

  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-card,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-card,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-action-btn,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn {
    transition: none;
  }

  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-card:hover,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-card:hover {
    transform: none;
  }
}

/* ── Forced colours ───────────────────────────────────────────────────────
   Restore system borders so plates and controls keep their shapes; the
   active tab gets the system's selected pairing; essential text never sits
   under an opacity (the pilots' masthead trap). */
@media (forced-colors: active) {
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-card,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-member-card,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-action-btn,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-back-btn-compact,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-header-search-input {
    border: 1px solid ButtonBorder;
  }

  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-mode-btn.active {
    border: 2px solid Highlight;
  }

  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .nav-stats-compact,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-couple-meta,
  .ffrw-family-navigator .ffrw-body > #view-family-navigator.ffrw-hosted .fnav-unit-subtitle {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE v13 LINEAGE DIAL — mounting-lineage-composer S1.

   Everything below this line is reached ONLY through `html.ffv-fnav-v13`, the
   reflection FFAFlags writes for `ffa_fnav_v13`. With the flag off — which is
   its declared default and the production posture — not one selector here
   matches, and the room renders exactly as the 337 lines above render it.

   WHY THE REFLECTION AND NOT A JS BRANCH. The SVG half of this chassis gates
   itself inside `layers()`: flag-off simply never emits a v13 element, so the
   v13 linework rules below could never match anyway and are belt-and-braces.
   The APERTURE half cannot work that way. It overrides `.ffrw-header`'s and
   `.ffrw-body`'s insets, which exist in both states, so it needs a real
   condition in the cascade. CSS cannot call isOn(); the narrowest honest form
   of a flag a stylesheet must read is a class on <html>, which is exactly what
   the REFLECT map in ffa-flags.js is for and why this flag was added to it.

   ── THE PRAISE-PROTECTED APERTURE ────────────────────────────────────────
   The pilot's eleventh pass set the workspace at `left/right 7.5%, top 20.5%,
   bottom 12.5%`; Joe declared that fit correct, and the twelfth pass's rule is
   "spend only perimeter space and preserve the aperture byte-for-byte." The
   third pass was REJECTED for treating a smaller CSS inset as equivalent to a
   thinner container. So this is a carry, not a choice:

     top 20.5%  -> the theme's headerKeepOut, 143.5 of 700, height-resolved by
                   FFVChassis into --ffrw-keepout. The integrated header's TOP
                   edge lands on the pilot's well top.
     bottom 12.5% -> the theme's footKeepOut, 87.5 of 700, height-resolved into
                   --ffrw-footkeepout. With the skirt plate collapsed to a zero
                   box below (see there for why it is collapsed and not hidden),
                   the working panel's BOTTOM edge lands on the pilot's well
                   floor.
     left/right 7.5% -> width-resolved here, which is the correct axis for a
                   horizontal inset and the one the normalization law in
                   room-windows.css insists on. 7.5% of the shell IS x=75 in the
                   silhouette's own coordinates, at every shell size.

   Both vertical numbers ride the HEIGHT axis because the chassis resolves them
   there; a percentage margin would resolve them against WIDTH and diverge from
   the silhouette on every resize. That divergence is the fleet-wide control
   collision Joe reported 2026-08-09, and it is not being reintroduced here.

   ── ONE INTEGRATED APPLICATION HEADER ────────────────────────────────────
   The tenth and eleventh passes settled the hierarchy: instrument perimeter ->
   ONE application header -> working canvas, with minimize+restore at the
   header's upper LEFT and close alone at its upper RIGHT, and with no separate
   window-control panel and no front-bezel rectangle between the two. This room
   already has that DOM: `.ffrw-steps` carries `order: -1` so the sizing pair
   leads the band, `.ffrw-titles` takes the slack, and `.ffrw-close` is held
   hard right. What v13 changes is not the order but the ENCLOSURE — the header
   and the panel share one bordered well, so the header reads as the
   application's own top rail rather than as chrome floating above it. No
   handler, no control and no DOM node moves to achieve that.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bespoke only (settling-modal-residue S1, D3) ─────────────────────────
   The aperture below is the Bespoke dress's: a 7.5% inset that seats the panel
   inside the drawn vessel. Thin and Stripped draw no vessel (applyDress stamps
   `ffrw-stripped` on BOTH, and the chassis is never built), so the inset only
   threw away ~190 px of the Navigator's width, and the header's 8px padding
   out-ranked Thin's 5px ribbon (0,4,1 over 0,4,0), making the Navigator's Thin
   header 48 px where every other room's is 40. Each aperture rule therefore
   carries `:not(.ffrw-stripped)`; Bespoke matches exactly as before. Pinned by
   tests/settling-modal-residue/d3_navigator_well.mjs. */
/* ── the aperture ────────────────────────────────────────────────────────── */
html.ffv-fnav-v13 .ffrw-shell.ffrw-family-navigator:not(.ffrw-stripped) > .ffrw-header {
  margin-inline: 7.5%;
  padding: 8px 14px;
  border: 1px solid rgba(80, 216, 255, .67);
  border-bottom: 1px solid rgba(80, 216, 255, .26);
  border-radius: 15px 15px 0 0;
  background: rgba(7, 21, 32, .96);
}

html.ffv-fnav-v13 .ffrw-shell.ffrw-family-navigator:not(.ffrw-stripped) > .ffrw-body {
  /* The bottom inset is the SKIRT'S margin, not this element's: collapsing the
     plate to a zero box leaves --ffrw-footkeepout as the only thing between the
     panel and the shell foot, which is precisely the 12.5% the pilot wants.
     A margin-bottom here would double it. */
  margin: 0 7.5%;
  border: 1px solid rgba(80, 216, 255, .67);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: #07141f;
  box-shadow: inset 0 0 0 1px rgba(255, 184, 79, .13), inset 0 0 28px rgba(2, 8, 14, .42);
}

/* The lower lettering the TWELFTH pass removed. "The lower FFV Lineage Dial
   lettering is removed. Its dark instrument mount is raised into the foot and
   retained as a purely decorative bracket with an illuminated center gem" — so
   the pair name may not be painted on the skirt, and the SVG cradle and gem in
   the theme's foot group are what stand in its place.

   COLLAPSED, NOT `display: none`. The plate keeps its box and its
   margin-bottom, so it still contributes the foot keep-out that positions the
   panel above it — and, just as load-bearing, it still has a real rect for
   silhouette-probe to measure. A display:none plate reports a zero rect at the
   page origin, which every containment probe would then score as an escape
   from the vessel: a false failure that would have to be special-cased in the
   guard, and a guard with a special case for the thing being changed is not a
   guard. The node and its text survive for the accessibility tree; only the
   pixels go, which is the same treatment the hosted <h3> gets above. */
html.ffv-fnav-v13 .ffrw-shell.ffrw-family-navigator:not(.ffrw-stripped) > .ffrw-nameplate {
  height: 0;
  padding-block: 0;
  /* border-WIDTH, not border-colour. `.ffrw-nameplate` carries `border: 1px
     solid`, so making it transparent leaves a 2px-tall box that pushes the
     working panel 2px off the pilot's well floor. The census measured exactly
     that (-2.0px at all four geometries) before this line said `0`, which is
     the whole reason the aperture is asserted numerically rather than looked
     at: 2px is invisible and it is still a broken contract. */
  border-width: 0;
  overflow: hidden;
  opacity: 0;
}

/* ═══ THE v13 LINEWORK ═══════════════════════════════════════════════════════
   Translated from the accepted pilot's stylesheet. Colours and opacities carry
   over unchanged — they are unitless and the coordinate change cannot touch
   them. STROKE WIDTHS DO NOT CARRY EXACTLY, and it is worth being plain about
   why: the pilot draws in a 1600x1000 viewBox and this fleet in 1000x700, both
   stretched to their container, so a horizontal stroke wants scaling by 0.625
   and a vertical one by 0.7 — and one number cannot be both. Every width below
   is the pilot's times the GEOMETRIC MEAN, sqrt(0.625 * 0.7) = 0.6614, which
   preserves stroke area and splits the residual evenly (+5.9% one axis, -5.5%
   the other; under a pixel at every width the pilot uses). The same scalar is
   applied to the dash arrays and dash offsets, which are lengths along a path
   and distort identically. This is the ONLY judgement in the translation; every
   coordinate came out of logs/mounting-lineage-composer/translate-pilot-
   geometry.cjs, whose --verify pass re-proves them against the stamped SVG.

   `.ffvc-v13-*` names appear nowhere else in the fleet, so these rules cannot
   reach another room's chassis even if a selector were mis-scoped. They are
   scoped to `.ffrw-family-navigator` regardless.
   ═══════════════════════════════════════════════════════════════════════════ */

html.ffv-fnav-v13 .ffrw-family-navigator {
  --v13-cyan: #50d8ff;
  --v13-teal: #28efd4;
  --v13-brass: #ffb84f;
  --v13-orchid: #ff43aa;
}

/* The shell itself: the pilot's thin multicolor rim, its deep aura, and the
   pale inner lip. These three override the fleet-wide widths in
   room-windows.css, which is why they carry the room class. */
html.ffv-fnav-v13 .ffrw-family-navigator .ffvc-rim-glow { stroke-width: 5.95; opacity: .28; }
html.ffv-fnav-v13 .ffrw-family-navigator .ffvc-body     { stroke-width: 2.65; }
html.ffv-fnav-v13 .ffrw-family-navigator .ffvc-lip      { stroke: rgba(184, 237, 255, .48); stroke-width: .99; opacity: 1; }

/* the armillary across the crown band */
html.ffv-fnav-v13 .ffvc-v13-armillary path { fill: none; stroke: rgba(80, 216, 255, .38); stroke-width: 1.19; }
html.ffv-fnav-v13 .ffvc-v13-ticks          { stroke: rgba(255, 184, 79, .68); stroke-width: 1.65; }
html.ffv-fnav-v13 .ffvc-v13-signal {
  stroke: var(--v13-cyan);
  stroke-width: 2.32;
  stroke-linecap: round;
  stroke-dasharray: 2 96;
}
html.ffv-fnav-v13 .ffvc-v13-signal-b { stroke: var(--v13-brass); stroke-dasharray: 2 136; opacity: .8; }

/* the upper signal filigree — the twelfth pass's paired lineage lattices */
html.ffv-fnav-v13 .ffvc-v13-top-lattice path,
html.ffv-fnav-v13 .ffvc-v13-lower-lattice path { fill: none; }
html.ffv-fnav-v13 .ffvc-v13-lattice-shell   { stroke-width: 1.32; opacity: .72; }
html.ffv-fnav-v13 .ffvc-v13-branch          { stroke-width: 1.12; }
html.ffv-fnav-v13 .ffvc-v13-branch-a        { stroke: rgba(40, 239, 212, .58); }
html.ffv-fnav-v13 .ffvc-v13-branch-b        { stroke: rgba(255, 67, 170, .52); }
html.ffv-fnav-v13 .ffvc-v13-branch-faint    { stroke: rgba(80, 216, 255, .3); stroke-width: .79; }
html.ffv-fnav-v13 .ffvc-v13-lattice-signal  { stroke: var(--v13-cyan); stroke-width: 1.98; stroke-linecap: round; stroke-dasharray: 2 61; }
html.ffv-fnav-v13 .ffvc-v13-lattice-signal.ffvc-v13-signal-right { stroke: var(--v13-orchid); }
html.ffv-fnav-v13 .ffvc-v13-top-nodes ellipse { fill: #071522; stroke: var(--v13-brass); stroke-width: 1.32; }

/* the two navigation medallions */
html.ffv-fnav-v13 .ffvc-v13-medallions ellipse { fill: rgba(4, 16, 28, .95); stroke-width: 1.19; }
html.ffv-fnav-v13 .ffvc-v13-medallions path    { fill: none; stroke: rgba(80, 216, 255, .55); stroke-width: .86; }
html.ffv-fnav-v13 .ffvc-v13-medallion-core     { fill: var(--v13-teal); stroke: #eaffff; }

/* the crown instrument and its counter-rotating register */
html.ffv-fnav-v13 .ffvc-v13-crown ellipse   { fill: rgba(4, 16, 28, .94); stroke-width: 1.32; }
html.ffv-fnav-v13 .ffvc-v13-crown-register  { fill: none; stroke-dasharray: 2 5.3; opacity: .7; transform-origin: 500px 54.6px; }
html.ffv-fnav-v13 .ffvc-v13-needle          { stroke: #ffe7a6; stroke-width: .66; }
html.ffv-fnav-v13 .ffvc-v13-needle-minor    { opacity: .76; }
html.ffv-fnav-v13 .ffvc-v13-crown-pin       { fill: #082437; stroke: var(--v13-teal); stroke-width: 1.98; }
html.ffv-fnav-v13 .ffvc-v13-crown-core      { fill: #fff; stroke: none; }
html.ffv-fnav-v13 .ffvc-v13-crown-rays      { fill: none; stroke: rgba(255, 184, 79, .64); stroke-width: .99; transform-origin: 500px 54.6px; }
html.ffv-fnav-v13 .ffvc-v13-ray-orbit       { stroke: rgba(80, 216, 255, .55); stroke-width: 1.32; }

/* the side generation registers */
html.ffv-fnav-v13 .ffvc-v13-rail ellipse { fill: rgba(5, 19, 31, .94); stroke-width: 1.12; }
html.ffv-fnav-v13 .ffvc-v13-rail-line    { fill: none; stroke-width: 2.12; }
html.ffv-fnav-v13 .ffvc-v13-rail-inner,
html.ffv-fnav-v13 .ffvc-v13-rail-branch  { fill: none; stroke: rgba(80, 216, 255, .43); stroke-width: .99; }

/* the foot: the thirteenth pass's balanced lower filigree, the travelling
   signals, the sequenced beads, and the raised unlabeled instrument mount */
html.ffv-fnav-v13 .ffvc-v13-foot-rail,
html.ffv-fnav-v13 .ffvc-v13-cradle      { fill: none; stroke-width: 1.79; }
html.ffv-fnav-v13 .ffvc-v13-cradle      { fill: rgba(4, 15, 26, .96); stroke-width: 2.32; }
html.ffv-fnav-v13 .ffvc-v13-lower-branch      { stroke-width: .96; }
html.ffv-fnav-v13 .ffvc-v13-lower-branch.ffvc-v13-branch-faint { stroke-width: .69; }
html.ffv-fnav-v13 .ffvc-v13-lower-signal      { stroke: var(--v13-cyan); stroke-width: 1.59; stroke-linecap: round; stroke-dasharray: 2 58; }
html.ffv-fnav-v13 .ffvc-v13-lower-signal.ffvc-v13-signal-right { stroke: var(--v13-orchid); }
html.ffv-fnav-v13 .ffvc-v13-lower-nodes ellipse { fill: #071522; stroke: var(--v13-brass); stroke-width: 1.12; }
html.ffv-fnav-v13 .ffvc-v13-travel      { fill: none; stroke: var(--v13-teal); stroke-width: 2.32; stroke-linecap: round; stroke-dasharray: 2 74; }
html.ffv-fnav-v13 .ffvc-v13-beads ellipse { fill: #07131f; stroke: var(--v13-brass); stroke-width: 1.32; }

/* the illuminated centre gem left where the lettering was */
html.ffv-fnav-v13 .ffvc-v13-plate-line { fill: none; stroke-width: 1.32; }
html.ffv-fnav-v13 .ffvc-v13-plate-gem  { fill: rgba(5, 20, 31, .96); stroke: var(--v13-teal); stroke-width: 1.32; }
html.ffv-fnav-v13 .ffvc-v13-plate-core { fill: var(--v13-brass); stroke: none; }

/* ── narrow shells ────────────────────────────────────────────────────────
   The chassis marks its layer `.ffvc-compact` below 700px of shell width. The
   flank mechanisms have no margin left to live in there, so they stand down —
   the same treatment room-windows.css already gives `.ffvc-branchwork` and the
   fleet's other flank flourishes. Room-scoped rather than appended to that
   shared list, because these classes belong to one room's demonstration. */
html.ffv-fnav-v13 .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-v13-rail,
html.ffv-fnav-v13 .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-v13-medallions,
html.ffv-fnav-v13 .ffrw-shell .ffv-chassis-layer.ffvc-compact .ffvc-v13-top-lattice { display: none; }

/* ── motion ───────────────────────────────────────────────────────────────
   REDUCED MOTION IS THE FLOOR, NOT AN OVERRIDE. Every animation below is
   declared inside `prefers-reduced-motion: no-preference`, so a member who has
   asked their device for less motion never has a rule to override — there is
   simply nothing declared. That is the pilot's own pattern ("all new motion
   collapses under prefers-reduced-motion") and it is stronger than a `reduce`
   block that must remember to name each animation, because forgetting one here
   fails toward stillness.

   Durations carry over unchanged; dash offsets are lengths along a path and so
   carry the same 0.6614 scalar as the widths (-290 -> -192, 420 -> 278,
   +/-190 -> +/-126). The keyframe names are prefixed `ffvfnav-` because this
   stylesheet shares a global keyframe namespace with the whole vault. */
@media (prefers-reduced-motion: no-preference) {
  html.ffv-fnav-v13 .ffvc-v13-signal-a { animation: ffvfnav-run-forward 8s linear infinite; }
  html.ffv-fnav-v13 .ffvc-v13-signal-b { animation: ffvfnav-run-back 12s linear infinite; }

  html.ffv-fnav-v13 .ffvc-v13-top-lattice .ffvc-v13-signal-left  { animation: ffvfnav-lattice-run 6s linear infinite; }
  html.ffv-fnav-v13 .ffvc-v13-top-lattice .ffvc-v13-signal-right { animation: ffvfnav-lattice-run-back 6s linear infinite; }
  html.ffv-fnav-v13 .ffvc-v13-top-nodes ellipse { animation: ffvfnav-node-breathe 5.4s ease-in-out infinite; }
  html.ffv-fnav-v13 .ffvc-v13-top-nodes ellipse:nth-child(2n) { animation-delay: -2.7s; }

  html.ffv-fnav-v13 .ffvc-v13-lower-lattice .ffvc-v13-signal-left  { animation: ffvfnav-lattice-run 6.4s linear infinite; }
  html.ffv-fnav-v13 .ffvc-v13-lower-lattice .ffvc-v13-signal-right { animation: ffvfnav-lattice-run-back 6.4s linear infinite; }
  html.ffv-fnav-v13 .ffvc-v13-lower-nodes ellipse { animation: ffvfnav-node-breathe 5.8s ease-in-out infinite; }
  html.ffv-fnav-v13 .ffvc-v13-lower-nodes ellipse:nth-child(2n) { animation-delay: -2.9s; }

  html.ffv-fnav-v13 .ffvc-v13-travel { animation: ffvfnav-run-forward 7s linear infinite; }

  html.ffv-fnav-v13 .ffvc-v13-crown { animation: ffvfnav-crown-breathe 7s ease-in-out infinite; transform-origin: 500px 54.6px; }
  html.ffv-fnav-v13 .ffvc-v13-crown-register { animation: ffvfnav-register-turn 38s linear infinite; }
  html.ffv-fnav-v13 .ffvc-v13-crown-rays     { animation: ffvfnav-register-turn-back 52s linear infinite; }

  html.ffv-fnav-v13 .ffvc-v13-rail ellipse { animation: ffvfnav-node-breathe 5s ease-in-out infinite; }
  html.ffv-fnav-v13 .ffvc-v13-rail ellipse:nth-of-type(2n) { animation-delay: -2.4s; }

  html.ffv-fnav-v13 .ffvc-v13-beads ellipse { animation: ffvfnav-bead-sequence 5s ease-in-out infinite; }
  html.ffv-fnav-v13 .ffvc-v13-beads ellipse:nth-child(2n) { animation-delay: -1.25s; }
}

@keyframes ffvfnav-run-forward       { to { stroke-dashoffset: -192px; } }
@keyframes ffvfnav-run-back          { to { stroke-dashoffset: 278px; } }
@keyframes ffvfnav-lattice-run       { to { stroke-dashoffset: -126px; } }
@keyframes ffvfnav-lattice-run-back  { to { stroke-dashoffset: 126px; } }
@keyframes ffvfnav-crown-breathe     { 0%, 100% { opacity: .82; transform: scale(.99); } 50% { opacity: 1; transform: scale(1.015); } }
@keyframes ffvfnav-register-turn     { to { transform: rotate(360deg); } }
@keyframes ffvfnav-register-turn-back { to { transform: rotate(-360deg); } }
@keyframes ffvfnav-node-breathe      { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes ffvfnav-bead-sequence     { 0%, 100% { opacity: .3; } 45%, 60% { opacity: 1; fill: #d8ffff; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE ASK-FERGI COMPOSER + THE RELOCATED LIST CONTROLS
   mounting-lineage-composer S2.

   Same gate as everything above: `html.ffv-fnav-v13` only. The composer's DOM
   does not exist at all with the flag off (fnav-fergi-composer.js refuses to
   mount), so these rules are unreachable in two independent ways.

   ── THE GEOMETRY IS THE PILOT'S, CARRIED ────────────────────────────────
   `pilot.css` `.fergi-search` / `.voice-control` are authoritative and are
   translated here rather than re-derived: 218x36 shell, radius 10, border
   rgba(80,216,255,.42), ground rgba(10,25,37,.94), the 16px teal inset breath,
   the focus-within ring, the 11px input at `0 4px 0 12px`, and a 36x28 mic
   with NO border except a hairline on its left and radius `0 7px 7px 0`. Those
   numbers are not improved on.

   ── WHERE THIS COMPOSER IS WIDER THAN THE PILOT'S, AND WHY ──────────────
   The pilot draws two affordances: a field and a mic. The frozen control-board
   contract (fergi-contracts.js §4 CONTROL_BOARD_DOM) requires FOUR roles on
   every manifestation — text, mic, conversation, send — and states that a host
   may restyle but may not ship a subset. Both are design law and they are not
   actually in conflict: the pilot's mic keeps the pilot's exact geometry, and
   the two affordances the pilot never drew are rendered SUBORDINATE to it,
   narrower and quieter. Drawing them at the mic's weight would misreport which
   controls the thirteen passes actually settled. The shell grows by exactly
   their width (218 -> 274), which is less than the two management buttons this
   session moved OUT of the rail, so the header is not more crowded than the
   day before.

   The conversation control is present and INERT by Joe's I.2 ruling. It is
   styled to look unavailable because it IS unavailable; the component already
   marks it `aria-disabled` and refuses to route it into the voice service.
   ═══════════════════════════════════════════════════════════════════════════ */

html.ffv-fnav-v13 .fnav-fergi-composer {
  position: relative;
  flex: 0 1 auto;
}

html.ffv-fnav-v13 .fnav-fergi-board {
  width: 274px;
  height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(80, 216, 255, .42);
  border-radius: 10px;
  background: rgba(10, 25, 37, .94);
  box-shadow: inset 0 0 16px rgba(40, 239, 212, .035);
}

html.ffv-fnav-v13 .fnav-fergi-board:focus-within {
  border-color: rgba(40, 239, 212, .78);
  box-shadow: 0 0 0 2px rgba(40, 239, 212, .09), inset 0 0 18px rgba(40, 239, 212, .06);
}

/* Say It leads, then the field (Joe 2026-10-08, RO-10 2026-10-14: the voice
   control on every input is the Say It control, LEFT of the field). The board
   already renders mic-first; the `order` values below only pin that reading
   order. Until 2026-10-14 this host set the field first (the pilot's drawing),
   which put the Navigator's Say It on the right, the one desktop room that did. */
html.ffv-fnav-v13 .fnav-fergi-text {
  order: 1;
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 4px 0 12px;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--dl-ink, #edf9ff);
  font: inherit;
  font-size: 11px;
  line-height: 34px;
}

html.ffv-fnav-v13 .fnav-fergi-text::placeholder { color: rgba(237, 249, 255, .55); }

/* The pilot's mic geometry, now the room's Say It, on the left (RO-10). */
html.ffv-fnav-v13 .fnav-fergi-mic {
  order: 0;
  margin-left: 3px;
  width: 36px;
  min-width: 36px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-right-color: rgba(80, 216, 255, .22);
  border-radius: 0;
  background: transparent;
  color: var(--v13-cyan, #50d8ff);
  cursor: pointer;
}

html.ffv-fnav-v13 .fnav-fergi-mic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

html.ffv-fnav-v13 .fnav-fergi-mic:hover:not(:disabled) {
  color: #eaffff;
  background: rgba(40, 239, 212, .1);
}

/* Recording. The pilot expresses the live state in orchid; the board writes
   `data-fic-mic-state` and toggles `.active`, so the state is read from the
   component's own contract rather than from a class this file invents. */
html.ffv-fnav-v13 .fnav-fergi-mic[data-fic-mic-state="recording"] {
  color: #fff;
  background: rgba(255, 67, 170, .2);
  border-right-color: rgba(255, 67, 170, .48);
  box-shadow: 0 0 12px rgba(255, 67, 170, .24);
}

html.ffv-fnav-v13 .fnav-fergi-mic[data-fic-mic-state="transcribing"] {
  color: var(--v13-brass, #ffb84f);
  background: rgba(255, 184, 79, .12);
}

/* Denied and failed are FALLBACKS, not dead ends (contract §4): the control
   stays pressable and only its colour admits what happened. */
html.ffv-fnav-v13 .fnav-fergi-mic[data-fic-mic-state="denied"],
html.ffv-fnav-v13 .fnav-fergi-mic[data-fic-mic-state="failed"] {
  color: rgba(255, 67, 170, .82);
}

html.ffv-fnav-v13 .fnav-fergi-mic:disabled { cursor: default; }

/* The two the pilot never drew: present, correct, subordinate. */
html.ffv-fnav-v13 .fnav-fergi-conv,
html.ffv-fnav-v13 .fnav-fergi-send {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-left-color: rgba(80, 216, 255, .16);
  border-radius: 0;
  background: transparent;
  color: rgba(237, 249, 255, .62);
  cursor: pointer;
}

html.ffv-fnav-v13 .fnav-fergi-conv svg,
html.ffv-fnav-v13 .fnav-fergi-send svg { width: 14px; height: 14px; }

html.ffv-fnav-v13 .fnav-fergi-conv { order: 3; }
html.ffv-fnav-v13 .fnav-fergi-send { order: 4; margin-right: 3px; border-radius: 0 7px 7px 0; }

html.ffv-fnav-v13 .fnav-fergi-send:hover { color: #eaffff; background: rgba(40, 239, 212, .1); }

/* Honestly unavailable, and it looks it. */
html.ffv-fnav-v13 .fnav-fergi-conv[data-fic-inert="true"] {
  color: rgba(237, 249, 255, .28);
  cursor: not-allowed;
}

/* Stop. The send control IS the stop control while a turn is in flight
   (fergi-input-control-board.js, S5) — one control, never a fifth button. */
html.ffv-fnav-v13 .fnav-fergi-send[data-fic-busy="true"] {
  color: #ffd5e8;
  border-left-color: rgba(255, 67, 170, .44);
}

/* The board's own polite live region: present for screen readers, never drawn. */
html.ffv-fnav-v13 .fnav-fergi-board .fic-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The sighted mirror of what the live region just said. Absolute, so a
   transient "Transcribing…" cannot reflow a rail that is already wrapping;
   `:empty` keeps it out of the layout entirely at rest. */
html.ffv-fnav-v13 .fnav-fergi-status {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  max-width: 320px;
  padding: 3px 8px;
  border: 1px solid rgba(80, 216, 255, .3);
  border-radius: 7px;
  background: rgba(7, 21, 32, .97);
  color: rgba(237, 249, 255, .82);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.ffv-fnav-v13 .fnav-fergi-status:empty { display: none; }

/* ── the relocated list controls ─────────────────────────────────────────
   The local family/friend filter and the two management buttons, moved out of
   the dressed header by fnav-fergi-composer.js and landed directly above the
   list they act on. These are the SAME nodes — their own class rules in
   styles.css and the `.nav-header-search-input` dressing 150 lines above still
   apply, because none of those selectors was ever scoped to the header. All
   this strip does is hold them. */
html.ffv-fnav-v13 .fnav-v13-utility {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px var(--dl-gutter, 16px);
  border-bottom: 1px solid var(--dl-rule);
  background: color-mix(in srgb, var(--dl-plane) 5%, var(--ffvr-surface, #0A1722));
}

html.ffv-fnav-v13 .fnav-v13-utility .nav-header-search {
  flex: 0 1 260px;
  min-width: 140px;
}

/* Right-anchored, because they act on the whole tree rather than on the
   filtered list — the same relationship they had to the rail. */
html.ffv-fnav-v13 .fnav-v13-utility .nav-header-actions { margin-left: auto; }

/* The pilot's own narrow rule shrinks the composer rather than hiding a
   canonical control; the wrap in `.family-navigator-header-compact` does the
   rest. Nothing here ever hides an affordance to save space. */
@media (max-width: 1100px) {
  html.ffv-fnav-v13 .fnav-fergi-board { width: 246px; }
}

@media (max-width: 900px) {
  html.ffv-fnav-v13 .fnav-v13-utility { flex-wrap: wrap; row-gap: 8px; }
  html.ffv-fnav-v13 .fnav-v13-utility .nav-header-search { flex: 1 1 100%; }
  html.ffv-fnav-v13 .fnav-v13-utility .nav-header-actions { margin-left: 0; }
}

/* Reduced motion: this composer declares no animation of its own, so there is
   nothing to collapse — the mic's state changes are colour, not movement. The
   rule is written rather than assumed so a later hand adding a pulse to the
   recording state finds the collapse already waiting for it. */
@media (prefers-reduced-motion: reduce) {
  html.ffv-fnav-v13 .fnav-fergi-board,
  html.ffv-fnav-v13 .fnav-fergi-board *,
  html.ffv-fnav-v13 .fnav-fergi-status {
    animation: none !important;
    transition: none !important;
  }
}