/* Canonical component library styles (UI_SPEC §1.2/§3). One shared sheet for the .syn-* primitive and
   chrome classes — components reference tokens.css only, never literals. Page/layout components keep
   their own scoped .razor.css; this is the design-system layer the whole app composes from. */

/* ---- Avatar ---------------------------------------------------------------- */
.syn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--syn-avatar-border-radius, var(--shape-radius-pill));
    font-weight: var(--syn-avatar-font-weight, var(--font-semibold));
    overflow: hidden;
    flex-shrink: 0;
    line-height: var(--syn-avatar-line-height, 1);
    /* d-demo-faces (row 169; [AF-349]): a headshot crops as Claude Design's comps crop every face — cover, a little above
       centre (object-position 50% 25% in the FD mock); d-avatar-photo (row 197): the headshot is the img itself */
    object-fit: cover;
    object-position: 50% 25%;
}
.syn-avatar.is-initials { background-color: var(--syn-avatar-is-initials-background-color, var(--surface-inset)); color: var(--syn-avatar-is-initials-color, var(--text-muted)); }   /* p-top-bar (row 181): the initials grey, as the comps draw them */

/* ---- Chip ------------------------------------------------------------------ */
.syn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--syn-chip-gap, var(--space-1));
    padding: var(--syn-chip-padding, 2px 9px);
    border-radius: var(--syn-chip-border-radius, var(--shape-radius-pill));
    font-size: var(--syn-chip-font-size, var(--text-xs));
    font-weight: var(--syn-chip-font-weight, var(--font-medium));
    /* Q341 (CONTROL-ANATOMY §5 M1): the one chip BREAKS its label — never an unbreakable box
       overflowing its container; a chip rack still wraps chip-by-chip first (M5). */
    max-width: 100%;
    min-width: 0;
    text-align: left;
    overflow-wrap: break-word;
}
/* QB77 (PL-P8): a chip whose label breaks to a second line leaves the oval for the rectangular tag grammar
   (--radius-sm); the stamp is theme.js synergyPills' (JS-local, purely visual). */
.syn-chip.is-multiline { border-radius: var(--syn-chip-is-multiline-border-radius, var(--radius-sm)); }
/* Tinted tones compute the fill from the tone color over the current surface, so the tint
   survives the theme flip (the old --*-muted tokens were a flat light-only value — dark had no tint).
   Mockup formula (CaptureCockpit/MissionControl): color-mix(<tone> 14%, surface). */
.syn-chip-neutral { background: var(--syn-chip-neutral-background, var(--surface-inset)); color: var(--syn-chip-neutral-color, var(--text-muted)); }
.syn-chip-accent  { background: var(--syn-chip-accent-background, color-mix(in srgb, var(--accent-action-active) 14%, var(--surface-plane))); color: var(--syn-chip-accent-color, var(--accent-action-active)); }
.syn-chip-success { background: var(--syn-chip-success-background, color-mix(in srgb, var(--state-success) 14%, var(--surface-plane))); color: var(--syn-chip-success-color, var(--state-success)); }
.syn-chip-warning { background: var(--syn-chip-warning-background, color-mix(in srgb, var(--state-warning) 14%, var(--surface-plane))); color: var(--syn-chip-warning-color, var(--state-warning)); }
.syn-chip-error   { background: var(--syn-chip-error-background, color-mix(in srgb, var(--state-attention) 14%, var(--surface-plane))); color: var(--syn-chip-error-color, var(--state-attention)); }
.syn-chip-info    { background: var(--syn-chip-info-background, color-mix(in srgb, var(--state-info) 14%, var(--surface-plane))); color: var(--syn-chip-info-color, var(--state-info)); }
.syn-chip-capture { background: var(--syn-chip-capture-background, color-mix(in srgb, var(--category-3) 14%, var(--surface-plane))); color: var(--syn-chip-capture-color, var(--category-3)); }

/* ---- StatusDot ------------------------------------------------------------- */
.syn-statusdot-wrap { display: inline-flex; align-items: center; gap: var(--syn-statusdot-wrap-gap, var(--space-2)); }
.syn-statusdot { width: var(--syn-statusdot-width, 8px); height: var(--syn-statusdot-height, 8px); border-radius: var(--syn-statusdot-border-radius, var(--shape-radius-pill)); flex-shrink: 0; }
.syn-statusdot-label { font-size: var(--syn-statusdot-label-font-size, var(--read-sm)); color: var(--syn-statusdot-label-color, var(--text-muted)); }   /* Q342(c): a status VALUE = reading, scales */
/* QC54: the indicator species (StatusMark) — hollow (Not Started), ring (a white tone keeps its edge), check (Submission-Ready) */
.syn-statusdot.is-hollow { background: transparent; border: var(--syn-statusdot-is-hollow-border, 1.5px solid var(--text-tertiary)); box-sizing: border-box; }
.syn-statusdot.is-ring { box-shadow: var(--syn-statusdot-is-ring-box-shadow, var(--statusdot-ring)); }
.syn-statusdot-check { display: inline-flex; align-items: center; width: var(--syn-statusdot-check-width, 11px); height: var(--syn-statusdot-check-height, 11px); flex-shrink: 0; }

/* ---- StagePill ------------------------------------------------------------- */
.syn-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--syn-pill-padding, 1px var(--space-2));
    border-radius: var(--syn-pill-border-radius, var(--shape-radius-pill));
    font-size: var(--syn-pill-font-size, var(--text-xs));
    font-weight: var(--syn-pill-font-weight, var(--font-medium));
    white-space: nowrap;
}
/* leading colored dot before the stage label (mockup identity-line pill, MissionControl.jsx:188) */
.syn-pill-dot { width: var(--syn-pill-dot-width, 7px); height: var(--syn-pill-dot-height, 7px); border-radius: var(--syn-pill-dot-border-radius, var(--shape-radius-pill)); margin-right: var(--syn-pill-dot-margin-right, 5px); flex: 0 0 auto; }

/* ---- EntityRef ------------------------------------------------------------- */
.syn-ref { color: var(--syn-ref-color, var(--accent-action)); font-weight: var(--syn-ref-font-weight, var(--font-medium)); }
.syn-ref-missing { color: var(--syn-ref-missing-color, var(--text-tertiary)); font-weight: var(--syn-ref-missing-font-weight, var(--font-regular)); font-style: var(--syn-ref-missing-font-style, italic); }
.syn-ref-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--syn-ref-chip-padding, 1px var(--space-2));
    border-radius: var(--syn-ref-chip-border-radius, var(--shape-radius-pill));
    background: var(--syn-ref-chip-background, var(--surface-inset));
    font-size: var(--syn-ref-chip-font-size, var(--text-xs));
}

/* ---- Buttons --------------------------------------------------------------- */
.syn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--syn-btn-gap, var(--space-2));
    padding: var(--syn-btn-padding, var(--space-2) var(--space-4));
    border-radius: var(--syn-btn-border-radius, var(--shape-radius-control));
    font-family: var(--syn-btn-font-family, var(--type-family));
    font-size: var(--syn-btn-font-size, var(--text-sm));
    font-weight: var(--syn-btn-font-weight, var(--font-medium));
    cursor: pointer;
    border: var(--syn-btn-border, 1px solid transparent);
    transition: var(--syn-btn-transition, background var(--motion-duration-fast) var(--motion-easing), border-color var(--motion-duration-fast) var(--motion-easing), opacity var(--motion-duration-fast) var(--motion-easing));
}
.syn-btn:disabled { opacity: var(--syn-btn-disabled-opacity, 0.5); cursor: default; }
/* J64 (Ken's sight 2026-08-26) — THE BUTTON WORKING FACE: an Ask-Jane door that is busy keeps its chrome and
   geometry. The resting label stays in the box as an invisible ghost (grid-stacked under the working words) so
   the width is max(label, working) and the seat never jumps; the box is not dimmed (it is working, not
   disabled) and does not hover; the one ✦ carries the motion (JaneWorking.razor.css). */
.syn-btn.is-working { display: inline-grid; grid-template-columns: minmax(0, 1fr); justify-items: center; cursor: progress; }
.syn-btn.is-working > * { grid-area: 1 / 1; }
.syn-btn.is-working:disabled { opacity: var(--syn-btn-is-working-disabled-opacity, 1); }
.syn-btn.is-working .syn-btn-ghost { visibility: hidden; white-space: nowrap; }
.syn-seat-jane-chip.is-working:hover { background: var(--syn-seat-jane-chip-is-working-hover-background, var(--surface-plane)); }
/* Q342(a) (BUTTON-REGISTERS M6/M7, the systemic root): the pre-R10 registers are RETIRED as the canonical
   buttons' fallback — a seat-less PrimaryButton/SecondaryButton now resolves to a TABLE seat by context
   (PrimaryButton -> PrimaryInk; SecondaryButton -> CommitPairBordered, Small -> RowAct, Danger -> DestructiveArm),
   so no call site renders a register outside the table. These rules remain only for the raw
   `class="syn-btn syn-btn-…"` markup seats; the danger ink is the table's --overdue (M7: raw --error fails
   AA on white); the small size is px (chrome class, text-scale C4). */
.syn-btn-primary { background: var(--syn-btn-primary-background, var(--primary-fill)); color: var(--syn-btn-primary-color, var(--primary-ink)); }   /* d-harbor: the primary seat is accent.action (--primary-fill; Synergy re-pins ink) */
.syn-btn-primary:not(:disabled):hover { opacity: var(--syn-btn-primary-not-disabled-hover-opacity, 0.85); }
.syn-btn-secondary { background: var(--syn-btn-secondary-background, var(--surface-plane)); color: var(--syn-btn-secondary-color, var(--text-ink)); border-color: var(--syn-btn-secondary-border-color, var(--border-default)); }
.syn-btn-danger { color: var(--syn-btn-danger-color, var(--state-attention-text)); border-color: var(--syn-btn-danger-border-color, var(--state-attention-text)); }
.syn-btn-secondary:not(:disabled):hover { background: var(--syn-btn-secondary-not-disabled-hover-background, var(--surface-hover)); border-color: var(--syn-btn-secondary-not-disabled-hover-border-color, var(--border-emphasis)); }
.syn-btn-sm { padding: var(--syn-btn-sm-padding, 5px 10px); font-size: var(--syn-btn-sm-font-size, 12px); gap: var(--syn-btn-sm-gap, var(--space-1)); }

/* ── Q231 — THE BOLD-GHOST RESERVATION (Ken's shell-clearance finding, 2026-08-17): a label whose
   ACTIVE state flips weight (500->600, the rail items, tabs, segments…) widens and its row "jumps".
   Every such label carries a hidden bold twin (its own text via data-label at the flipped weight)
   reserving the max width, so the visible weight flip changes NO box — a class-wide sweep, never
   a geometry change; declared values untouched. `--bg-weight` = the family's flipped weight. ── */
.syn-bg { display: inline-flex; flex-direction: column; align-items: flex-start; }
.syn-bg::after { content: attr(data-label); font-weight: var(--bg-weight, 600); height: 0; overflow: hidden;
                 visibility: hidden; pointer-events: none; user-select: none; white-space: nowrap; }
.syn-segmented .syn-seg .syn-bg { --bg-weight: 500; }
.syn-admin .syn-segmented .syn-seg .syn-bg, .syn-dir .syn-segmented .syn-seg .syn-bg { --bg-weight: 600; }
.syn-cap-covseg-btn .syn-bg { --bg-weight: 700; }

/* ── Q236 (CD audit finding 2): ROW-SHAPED BUTTONS INHERIT THE INK. A <button> does not inherit color —
   the UA's buttontext (black) leaked into the row primaries of the transparent/bordered row buttons
   (KP glance titles, Experience card titles, team cells, workload rows, partner cards, tray cards, LCAT/
   picker rows, chips, the band stops, the collapsible toggles …), reading dim brown-gray in dark
   instead of --text-primary. Swept as ONE rule: every row-shaped button reads its parent's ink; a child
   that names its own colour still wins. (A global `button { color: inherit }` was rejected for now — it
   would move the UA-black computed value on every pinned comp button that declares no colour.) ── */
.syn-glance-item, .syn-wl-row, .syn-kpw-chip,
.syn-lcat-row, .syn-lcat-trigger, .syn-picker-row, .syn-org-pocresult,
.syn-collapsible-toggle, .syn-crt-check-btn, .syn-cal-chip { color: inherit; }

/* ── Q216 — BUTTONS.md SEAT TABLE (RATIFIED Ken 2026-08-16/17) — the canonical buttons' vocabulary.
   FIELD · BORDER TIER · INK · WEIGHT/SIZE are bound to the seat; never varied with theme (the field
   never changes with the ground). Values are the ratified drawings' (shell/jane-panel/mc-pursuit/
   capture-gates/blackbird packages); CHROME class — literal px. `.syn-btn` supplies display/gap/
   cursor; each seat overrides border/field/ink/font/padding/radius wholesale. ── */
.syn-btn[class*="syn-seat-"] { line-height: normal; box-sizing: content-box; transition: none; }
.syn-btn[class*="syn-seat-"]:disabled { opacity: var(--syn-btn-class-seat-disabled-opacity, 1); }
/* page-level heading action (14b-1's one action; Pursuit Schedule — the calendar-glyph exception) */
.syn-seat-page-heading-action { gap: var(--syn-seat-page-heading-action-gap, 7px); font: var(--syn-seat-page-heading-action-font, 500 12.5px var(--type-family)); color: var(--syn-seat-page-heading-action-color, var(--text-ink)); border: var(--syn-seat-page-heading-action-border, 1px solid var(--border-emphasis));
                                border-radius: var(--syn-seat-page-heading-action-border-radius, var(--radius-nav)); padding: var(--syn-seat-page-heading-action-padding, 5px 12px); background: var(--syn-seat-page-heading-action-background, var(--surface-plane)); }
.syn-seat-page-heading-action:hover { background: var(--syn-seat-page-heading-action-hover-background, var(--surface-hover)); }
.syn-seat-page-heading-action .syn-icon { color: var(--syn-seat-page-heading-action-icon-color, var(--text-muted)); }
/* commit-pair bordered member (Cancel-adjacent bordered acts, e.g. Revise) */
.syn-seat-commit-pair-bordered { gap: var(--syn-seat-commit-pair-bordered-gap, 6px); font: var(--syn-seat-commit-pair-bordered-font, 500 12px var(--type-family)); color: var(--syn-seat-commit-pair-bordered-color, var(--text-ink)); border: var(--syn-seat-commit-pair-bordered-border, 1px solid var(--border-emphasis));
                                 border-radius: var(--syn-seat-commit-pair-bordered-border-radius, var(--shape-radius-control)); padding: var(--syn-seat-commit-pair-bordered-padding, 5px 14px); background: var(--syn-seat-commit-pair-bordered-background, var(--surface-plane)); }
.syn-seat-commit-pair-bordered:hover { background: var(--syn-seat-commit-pair-bordered-hover-background, var(--surface-hover)); }
/* section-line door (12k outside-label line: Manage {object} · Configure package · + Add {object}) — TRANSPARENT field */
.syn-seat-section-line-door { gap: var(--syn-seat-section-line-door-gap, 6px); font: var(--syn-seat-section-line-door-font, 500 11.5px var(--type-family)); color: var(--syn-seat-section-line-door-color, var(--text-body)); border: var(--syn-seat-section-line-door-border, 1px solid var(--border-default));
                              border-radius: var(--syn-seat-section-line-door-border-radius, var(--shape-radius-control)); padding: var(--syn-seat-section-line-door-padding, 5px 11px); background: transparent; }
.syn-seat-section-line-door:hover { background: var(--syn-seat-section-line-door-hover-background, var(--surface-hover)); }
/* row / in-plane act (Mark all read · Download · row-level doors inside planes) */
.syn-seat-row-act { gap: var(--syn-seat-row-act-gap, 6px); font: var(--syn-seat-row-act-font, 500 11.5px var(--type-family)); color: var(--syn-seat-row-act-color, var(--text-body)); border: var(--syn-seat-row-act-border, 1px solid var(--border-default));
                    border-radius: var(--syn-seat-row-act-border-radius, var(--shape-radius-control)); padding: var(--syn-seat-row-act-padding, 5px 11px); background: var(--syn-seat-row-act-background, var(--surface-plane)); }
.syn-seat-row-act:hover { background: var(--syn-seat-row-act-hover-background, var(--surface-hover)); }
/* PRIMARY INK COMMIT — Q250(i) ADJUDICATED (HB-QC2-3): BUTTONS.md's own "600, +shadow at page level" + two view
   comps (32a Add users; Q216's flag) — the seat at PAGE level is 600 12px, h30, pad 0/14, r8, `0 1px 2px
   rgba(0,0,0,.18)`; the SHELL-HEADING instance keeps its shell-comp form (500 12.5, r7, 6/12, no shadow —
   seat-per-context, as BUTTONS.md words it; the shell + pipeline manifests pin it); a MODAL commit is the
   12-2 comp's h28. TF-6 (Q235): gap NORMAL on the shell instance (the comp declares none). */
.syn-seat-primary-ink { gap: var(--syn-seat-primary-ink-gap, 6px); height: var(--syn-seat-primary-ink-height, 30px); box-sizing: border-box; font: var(--syn-seat-primary-ink-font, 600 12px var(--type-family)); color: var(--syn-seat-primary-ink-color, var(--primary-ink)); border: none; border-radius: var(--syn-seat-primary-ink-border-radius, var(--shape-radius-control)); padding: var(--syn-seat-primary-ink-padding, 0 14px);
                        background: var(--syn-seat-primary-ink-background, var(--primary-fill)); box-shadow: var(--syn-seat-primary-ink-box-shadow, var(--shadow-ink-button)); }
.syn-modal-foot .syn-seat-primary-ink, .syn-commit-foot .syn-seat-primary-ink { height: var(--syn-modal-foot-seat-primary-ink-height, 28px); }   /* THE COMMIT PAIR'S ONE HEIGHT: wherever the ink commit sits beside its bordered Cancel in a foot (a modal's, a forming card's) it stands at the pair's 28 — SOL-5 t36s (e) */
.syn-shell-listheading-action.syn-seat-primary-ink { gap: normal; height: auto; font: var(--syn-shell-listheading-action-seat-primary-ink-font, 500 12.5px var(--type-family)); border-radius: var(--syn-shell-listheading-action-seat-primary-ink-border-radius, var(--radius-nav)); padding: var(--syn-shell-listheading-action-seat-primary-ink-padding, 6px 12px); box-shadow: none; }
.syn-seat-primary-ink:not(:disabled):hover { opacity: var(--syn-seat-primary-ink-not-disabled-hover-opacity, .9); }
/* PRIMARY INK COMMIT — in place (the armed editor's Save): 500 12px flat */
.syn-seat-primary-ink-inline { gap: normal; font: var(--syn-seat-primary-ink-inline-font, 500 12px var(--type-family)); color: var(--syn-seat-primary-ink-inline-color, var(--primary-ink)); border: none; border-radius: var(--syn-seat-primary-ink-inline-border-radius, var(--radius-nav)); padding: var(--syn-seat-primary-ink-inline-padding, 5px 14px);
                               background: var(--syn-seat-primary-ink-inline-background, var(--primary-fill)); }
/* d-panels-cards (row 215 (f), [AF-426]; d-faces-fix's routed (b)): THE DISABLED INK COMMIT TAKES THE ACT'S WASH — the
   [AF-400] / [AF-414] primary face (--surface-inset, the muted label, no shadow), never --border-default, a dark slate field under Harbor */
.syn-seat-primary-ink:disabled, .syn-seat-primary-ink-inline:disabled { color: var(--syn-seat-primary-ink-disabled-color, var(--text-muted)); background: var(--syn-seat-primary-ink-disabled-background, var(--surface-inset)); box-shadow: none; cursor: default; }
/* dark ink commits: the D-6 pair is RATIFIED (Q229 / CD-17) — field var(--text-ink), ink var(--text-on-ink);
   the token carries the dark inversion (#1b1a18), so no theme override lives here. */
/* Ask Jane chip/door with a label (the ✦ mark, never an icon) */
.syn-seat-jane-chip { gap: var(--syn-seat-jane-chip-gap, 6px); font: var(--syn-seat-jane-chip-font, 500 12px var(--type-family)); color: var(--syn-seat-jane-chip-color, var(--accent-ai)); border: var(--syn-seat-jane-chip-border, 1px solid var(--jane-border-muted)); border-radius: var(--syn-seat-jane-chip-border-radius, var(--shape-radius-control));
                      padding: var(--syn-seat-jane-chip-padding, 5px 12px); background: var(--syn-seat-jane-chip-background, var(--surface-plane)); }
.syn-seat-jane-chip:hover { background: var(--syn-seat-jane-chip-hover-background, var(--accent-ai-tint)); }
/* quiet text act (Cancel · Dismiss · Skip): padding only. TF-6 class (Q235): gap NORMAL + radius 0 — the shell
   comp's shell-titleeditor-cancel declares neither (comp wins; the adjudicated title-armed verdict carried no
   gap/radius delta before Q216 seated it). */
.syn-seat-quiet-text { gap: normal; font: var(--syn-seat-quiet-text-font, 500 11.5px var(--type-family)); color: var(--syn-seat-quiet-text-color, var(--text-body)); border: none; border-radius: 0; padding: var(--syn-seat-quiet-text-padding, 4px 8px); background: transparent; }
.syn-seat-quiet-text:hover { color: var(--syn-seat-quiet-text-hover-color, var(--text-ink)); }
/* destructive ARMING act (Delete/Remove in armed footers): quiet red; arming swaps the footer for the inline confirm */
.syn-seat-destructive-arm { gap: var(--syn-seat-destructive-arm-gap, 6px); font: var(--syn-seat-destructive-arm-font, 500 11.5px var(--type-family)); color: var(--syn-seat-destructive-arm-color, var(--state-attention-text)); border: none; border-radius: var(--syn-seat-destructive-arm-border-radius, var(--radius-sm)); padding: var(--syn-seat-destructive-arm-padding, 4px 8px); background: transparent; }
.syn-seat-destructive-arm:hover { background: var(--syn-seat-destructive-arm-hover-background, var(--state-attention-tint)); }
/* destructive COMMIT (the inline confirm's Remove/Delete): the destructive mirror of the ink commit — sits LEFT of Cancel */
.syn-seat-destructive-commit { gap: var(--syn-seat-destructive-commit-gap, 6px); font: var(--syn-seat-destructive-commit-font, 600 11.5px var(--type-family)); color: var(--syn-seat-destructive-commit-color, var(--text-on-accent)); border: none; border-radius: var(--syn-seat-destructive-commit-border-radius, var(--radius-nav)); padding: var(--syn-seat-destructive-commit-padding, 5px 12px); background: var(--syn-seat-destructive-commit-background, var(--state-attention-text)); }
.syn-seat-destructive-commit:hover { opacity: var(--syn-seat-destructive-commit-hover-opacity, .9); }
/* Q246: destructive DOOR (a direct destructive act, no inline confirm — Sign out): surface field, the
   --destructive-border ring (D-12), quiet-red ink; hover = the --bg-hover lift */
.syn-seat-destructive-door { gap: var(--syn-seat-destructive-door-gap, 6px); font: var(--syn-seat-destructive-door-font, 500 11.5px var(--type-family)); color: var(--syn-seat-destructive-door-color, var(--state-attention-text)); border: var(--syn-seat-destructive-door-border, 1px solid var(--destructive-border)); border-radius: var(--syn-seat-destructive-door-border-radius, var(--radius-sm)); padding: var(--syn-seat-destructive-door-padding, 5px 10px); background: var(--syn-seat-destructive-door-background, var(--surface-plane)); }
.syn-seat-destructive-door:not(:disabled):hover { background: var(--syn-seat-destructive-door-not-disabled-hover-background, var(--surface-hover)); }

/* THE THREE ACT-ORDER SPECIES (Ken 2026-08-17; ActRow composes them, never borrowed one for another):
   commit pair = Cancel LEFT · ink primary RIGHT · inline confirm = red commit LEFT · Cancel RIGHT
   (rightmost = safe) · ask = Deny LEFT · Allow RIGHT (the ask invariant). */
.syn-actrow { display: flex; align-items: center; justify-content: flex-end; gap: var(--syn-actrow-gap, 10px); }
.syn-actrow.is-inline-confirm { justify-content: flex-start; gap: var(--syn-actrow-is-inline-confirm-gap, 8px); }

/* ---- SectionCard ----------------------------------------------------------- */
/* Mockup SectionCard (MissionControl.jsx:683): the title + action sit in a borderless strip ABOVE the card;
   the border wraps the BODY only. (Was: one border around header+body with a header divider — a pervasive
   structural deviation.) */
.syn-section-card { margin-bottom: var(--syn-section-card-margin-bottom, var(--space-1)); }
.syn-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--syn-section-head-gap, var(--space-3));
    margin-bottom: var(--syn-section-head-margin-bottom, 8px);
    min-height: 24px;
}
.syn-section-headline { display: inline-flex; align-items: center; gap: var(--syn-section-headline-gap, 10px); min-width: 0; }
/* Q132 (CD 2a): the one heading grammar — 600 10px uppercase .08em muted above the plane. */
.syn-section-title { margin: 0; font-size: var(--syn-section-title-font-size, 10px); /* Q342(c) C2: a sans data-label = CHROME, never scales */ font-weight: var(--syn-section-title-font-weight, var(--font-semibold)); letter-spacing: var(--syn-section-title-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-section-title-text-transform, var(--type-label-transform)); color: var(--syn-section-title-color, var(--text-tertiary)); }
.syn-section-titlecount { color: var(--syn-section-titlecount-color, var(--text-faint)); font-weight: var(--syn-section-titlecount-font-weight, var(--font-medium)); font-variant-numeric: var(--syn-section-titlecount-font-variant-numeric, tabular-nums); }   /* faint · N (round-9 section grammar) */
/* Q389 - ONE INNER LEFT EDGE, STRUCTURALLY: the mc-pursuit right rail's cards (SectionCard bodies AND the bespoke
   Blackbird card) consume THE ONE RAIL INSET at the frame; every row inside sits at padding-x 0 (Q389's net walks
   the rail's components from the page markup and reads their row rules). The glance rows' own 6px died here. */
.syn-mc-col.is-rail .syn-section-body, .syn-mc-col.is-rail .syn-bbf { padding: var(--syn-mc-col-is-rail-section-body-padding, var(--card-inset-rail)); }
.syn-section-body { border: var(--syn-section-body-border, 1px solid var(--plane-edge));   /* row 101 ([AF-254]): the plane edge token */ border-radius: var(--syn-section-body-border-radius, var(--shape-radius-plane)); background: var(--syn-section-body-background, var(--surface-plane)); box-shadow: var(--syn-section-body-box-shadow, var(--elevation-plane)); padding: var(--syn-section-body-padding, var(--card-inset)); overflow: hidden; }

/* ---- Collapsible ----------------------------------------------------------- */
.syn-collapsible { border: var(--syn-collapsible-border, 1px solid var(--border-default)); border-radius: var(--syn-collapsible-border-radius, var(--shape-radius-control)); background: var(--syn-collapsible-background, var(--surface-plane)); margin-bottom: var(--syn-collapsible-margin-bottom, var(--space-4)); }
.syn-collapsible-head { display: flex; align-items: center; gap: var(--syn-collapsible-head-gap, var(--space-2)); padding: var(--syn-collapsible-head-padding, var(--space-3) var(--space-4)); }
.syn-collapsible-toggle {
    flex: 1; min-width: 0; min-height: 24px; display: flex; align-items: center; gap: var(--syn-collapsible-toggle-gap, var(--space-2));   /* 24px: the Standard density floor (AF-DESIGN-SYSTEM.md §3.1a, §3.2) */
    background: none; border: none; cursor: pointer; padding: 0; text-align: left;
}
.syn-collapsible-chevron { display: inline-flex; color: var(--syn-collapsible-chevron-color, var(--text-tertiary)); transition: var(--syn-collapsible-chevron-transition, transform var(--motion-duration-base) var(--motion-easing)); }
.syn-collapsible-chevron.is-open { transform: rotate(90deg); }
.syn-collapsible-title { font-size: var(--syn-collapsible-title-font-size, 0.8125rem); font-weight: var(--syn-collapsible-title-font-weight, 600); letter-spacing: var(--syn-collapsible-title-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-collapsible-title-text-transform, var(--type-label-transform)); color: var(--syn-collapsible-title-color, var(--text-muted)); }
.syn-collapsible-count { font-size: var(--syn-collapsible-count-font-size, 0.75rem); color: var(--syn-collapsible-count-color, var(--text-tertiary)); }
.syn-collapsible-actions { margin-left: auto; display: inline-flex; align-items: center; }
.syn-collapsible-body { padding: var(--syn-collapsible-body-padding, 14px var(--space-4) var(--space-4)); border-top: var(--syn-collapsible-body-border-top, 1px solid var(--border-default)); }

/* ---- LabeledValue (formerly Field; renamed so the new schema-driven <Field> editor can't inherit
        this styling) / FieldRow ----------------------------------------------- */
/* Field labels wear the uppercase microlabel grain APP-WIDE (owner ruling 2026-07-31, OPEN-DECISIONS
   [REBUILD-P2-14]: the mockups' modal L() — 11px/600/uppercase/0.03em/tertiary — is the one label
   voice; the scoped uppercase patches this sweep replaced are deleted). Hints stay sentence-case
   (the hint span nests inside the label, so it must undo the transform). */
.syn-labeledvalue { display: flex; flex-direction: column; gap: var(--syn-labeledvalue-gap, 5px); }
.syn-labeledvalue-label { font-size: var(--syn-labeledvalue-label-font-size, 0.71875rem); font-weight: var(--syn-labeledvalue-label-font-weight, var(--font-semibold)); text-transform: var(--syn-labeledvalue-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-labeledvalue-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-labeledvalue-label-color, var(--text-tertiary)); }
.syn-labeledvalue-hint { color: var(--syn-labeledvalue-hint-color, var(--text-tertiary)); font-weight: var(--syn-labeledvalue-hint-font-weight, var(--font-medium)); text-transform: var(--syn-labeledvalue-hint-text-transform, none); letter-spacing: normal; }
.syn-labeledvalue-value { font-size: var(--syn-labeledvalue-value-font-size, var(--read-sm)); color: var(--syn-labeledvalue-value-color, var(--text-ink)); }   /* Q342(c): a field VALUE = reading */

.syn-fieldrow { display: flex; align-items: baseline; gap: var(--syn-fieldrow-gap, var(--space-4)); padding: var(--syn-fieldrow-padding, var(--space-2) 0); }
/* Row labels: the same ruling at the record-row size (Experience.jsx:315 / People.jsx:1315 — 11.5px). */
.syn-fieldrow-label { flex: 0 0 9rem; font-size: var(--syn-fieldrow-label-font-size, 0.71875rem); font-weight: var(--syn-fieldrow-label-font-weight, 600); text-transform: var(--syn-fieldrow-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-fieldrow-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-fieldrow-label-color, var(--text-tertiary)); }
.syn-fieldrow-value { flex: 1; min-width: 0; font-size: var(--syn-fieldrow-value-font-size, var(--read-sm)); color: var(--syn-fieldrow-value-color, var(--text-ink)); }   /* Q342(c): reading */

/* ---- InlineDeleteButton ---------------------------------------------------- */
.syn-inlinedel {
    display: inline-flex;
    align-items: center;
    gap: var(--syn-inlinedel-gap, var(--space-1));
    padding: var(--syn-inlinedel-padding, var(--space-1));
    background: none;
    border: none;
    border-radius: var(--syn-inlinedel-border-radius, var(--radius-sm));
    color: var(--syn-inlinedel-color, var(--text-tertiary));
    font-size: var(--syn-inlinedel-font-size, var(--text-sm));
    cursor: pointer;
    transition: var(--syn-inlinedel-transition, background var(--motion-duration-fast) var(--motion-easing));
}
.syn-inlinedel:hover { background: var(--syn-inlinedel-hover-background, var(--surface-hover)); }
/* Confirm state swaps the the close act in place for two real buttons (mockup InlineDelete People.jsx:782-786) —
   a red filled action + a bordered Cancel. No "Delete?" prompt. */
.syn-inlinedel-confirm { display: inline-flex; align-items: center; gap: var(--syn-inlinedel-confirm-gap, 5px); position: relative; z-index: 41; }
/* transparent catcher so a click anywhere outside the confirm dismisses it (mockup useDismiss) */
.syn-inlinedel-backdrop { position: fixed; inset: 0; z-index: 40; }
/* Q342(a) (BUTTON-REGISTERS M10/M12): the canonical inline confirm's commit IS the DestructiveCommit seat —
   SOLID --overdue · #fff · 600 11.5px, no border; the resting arm wears the DestructiveArm size (11.5px).
   The bordered Cancel (M11) stands pending the adjudicator's read of the People.jsx drawing vs the table. */
/* QB78(d): the confirm pair never towers (image20's three-line "Remove from team" in a 28px track) — a
   host that cannot give the width shrinks its neighbours instead. */
.syn-inlinedel-yes { font: var(--syn-inlinedel-yes-font, 600 11.5px var(--type-family)); padding: var(--syn-inlinedel-yes-padding, 5px 12px); border-radius: var(--syn-inlinedel-yes-border-radius, var(--radius-nav)); border: none; background: var(--syn-inlinedel-yes-background, var(--state-attention-text)); color: var(--syn-inlinedel-yes-color, var(--text-on-accent)); cursor: pointer; white-space: nowrap; }
.syn-inlinedel-yes:hover { opacity: var(--syn-inlinedel-yes-hover-opacity, .9); }
/* Q181 (comp 4d D15/D16, TK-F2/TK-F4): the arm-in-place modal-footer variant — resting 500
   12px semantic red; armed = the SAME control filled red. */
.syn-inlinedel-arm { appearance: none; border: none; background: transparent; padding: var(--syn-inlinedel-arm-padding, 4px 8px); margin: var(--syn-inlinedel-arm-margin, -4px -8px); border-radius: var(--syn-inlinedel-arm-border-radius, var(--radius-sm)); font-family: inherit; font-size: var(--syn-inlinedel-arm-font-size, 11.5px); font-weight: var(--syn-inlinedel-arm-font-weight, 500); color: var(--syn-inlinedel-arm-color, var(--state-attention-text)); cursor: pointer; }
.syn-inlinedel-arm.is-armed { position: relative; z-index: 41; background: var(--syn-inlinedel-arm-is-armed-background, var(--state-attention-text)); color: var(--syn-inlinedel-arm-is-armed-color, var(--text-on-accent)); font-weight: var(--syn-inlinedel-arm-is-armed-font-weight, 600); }
.syn-inlinedel-no { font-size: var(--syn-inlinedel-no-font-size, 0.71875rem); padding: var(--syn-inlinedel-no-padding, 3px 8px); border-radius: var(--syn-inlinedel-no-border-radius, var(--radius-sm)); border: var(--syn-inlinedel-no-border, 1px solid var(--border-default)); background: var(--syn-inlinedel-no-background, var(--surface-plane)); color: var(--syn-inlinedel-no-color, var(--text-muted)); cursor: pointer; white-space: nowrap; }

/* ---- EnumSelect (canonical StatusSelect; mockup StatusSelect MissionControl.jsx:629 + SelectMini) -------- */
.syn-enum-wrap { display: inline-flex; max-width: 100%; }
/* Q301 — THE CANONICAL PICKER CHEVRON (CHEVRON-CANON §1, ratified): the one chrome. Rem-declared
   (scales with the root text size): standalone 1rem · dense in-table 0.75rem; --text-tertiary
   rest -> --text-secondary on trigger hover/focus/open; 180° rotation on --transition-fast in a
   RESERVED 1em slot (rotation only — never a reflow). The svg reads 1em so the size is the
   span's font-size, never a px attribute. */
.syn-chevron { display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: var(--syn-chevron-font-size, 1rem); width: var(--syn-chevron-width, 1em); height: var(--syn-chevron-height, 1em); color: var(--syn-chevron-color, var(--text-tertiary)); transition: var(--syn-chevron-transition, transform var(--motion-duration-fast) var(--motion-easing)); }
.syn-chevron.is-dense { font-size: var(--syn-chevron-is-dense-font-size, 0.875rem); }   /* QB62 (Relay 35 delta 8, Ken in-sitting — the rule, not an exception): the dense picker chevron is a 14px box app-wide, aligned with the Relay 34 act-glyph metric; amends CHEVRON-CANON's 0.75rem; the 1rem standalone stands */
.syn-chevron .syn-icon { width: var(--syn-chevron-icon-width, 1em); height: var(--syn-chevron-icon-height, 1em); }
.syn-chevron.is-open { transform: rotate(180deg); color: var(--syn-chevron-is-open-color, var(--text-muted)); }

/* UD13 (Relay 34 delta 5, THE GLYPH RULING): the ONE act glyph (ActGlyph) — a stroked Lucide icon at
   --text-tertiary, 4px side-bearing off its label; a door turns down while open. Inherits the act's
   hover ink where the act sets `color` on hover (the glyph reads currentColor only via the token). */
.syn-actglyph { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--syn-actglyph-color, var(--text-tertiary)); vertical-align: var(--syn-actglyph-vertical-align, -2px); line-height: var(--syn-actglyph-line-height, 0); }
.syn-actglyph.is-trail { margin-left: var(--syn-actglyph-is-trail-margin-left, 4px); }
.syn-actglyph.is-lead { margin-right: var(--syn-actglyph-is-lead-margin-right, 4px); }
.syn-actglyph .syn-icon { display: block; }
button:hover > .syn-chevron, button:focus-visible > .syn-chevron,
.syn-menu button:hover .syn-chevron, .syn-menu button:focus-visible .syn-chevron { color: var(--kit-button-hover-syn-chevron-color, var(--text-muted)); }
.syn-enum {
    display: inline-flex; align-items: center; border-radius: var(--syn-enum-border-radius, var(--radius-nav));
    font-weight: var(--syn-enum-font-weight, 500); font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: var(--syn-enum-transition, border-color var(--motion-duration-base), background var(--motion-duration-base));
}
/* bordered form mode (mockup SelectMini) */
.syn-enum-bordered {
    gap: var(--syn-enum-bordered-gap, 6px); padding: var(--syn-enum-bordered-padding, 5px 9px); font-size: var(--ctl-size, 0.75rem);
    border: var(--syn-enum-bordered-border, 1px solid var(--border-default)); background: var(--syn-enum-bordered-background, var(--surface-plane)); color: var(--syn-enum-bordered-color, var(--text-ink));
}
.syn-enum-bordered:hover { background: var(--syn-enum-bordered-hover-background, var(--surface-hover)); }
/* inline borderless-at-rest mode (mockup StatusSelect): flush via negative margin, bordered on hover/open */
.syn-enum-inline {
    gap: var(--syn-enum-inline-gap, 5px); padding: var(--syn-enum-inline-padding, 5px 8px); margin: var(--syn-enum-inline-margin, -1px -8px); font-size: var(--ctl-size, 0.8125rem);
    border: var(--syn-enum-inline-border, 1px solid transparent); background: transparent; color: var(--syn-enum-inline-color, var(--text-muted));
}
.syn-enum-inline:hover { border-color: var(--syn-enum-inline-hover-border-color, var(--border-default)); }
.syn-enum-inline.is-open { border-color: var(--syn-enum-inline-is-open-border-color, var(--border-default)); background: var(--syn-enum-inline-is-open-background, var(--surface-plane)); }
/* flex:1 pins the chevron to the right edge when the trigger is stretched (form contexts);
   in a hugging trigger there is no free space, so the compact look is unchanged. */
/* Q341 (CONTROL-ANATOMY §4 E4): the closed trigger's selected value WRAPS (white-space: normal
   under the trigger's nowrap) — never an ellipsis; the chevron keeps its reserved slot. */
.syn-enum-label { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; overflow-wrap: break-word; }
/* Q337(b): the Identification card's Functional-category select carries the composed
   "FC-n — {name}" label inside the admin column — the trigger wraps it (QB37: wrapping, never
   truncation); the chevron stays on the first line's baseline. */
.syn-mc-fcselect { white-space: normal; align-items: flex-start; height: auto; }
.syn-mc-fcselect .syn-enum-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: var(--syn-mc-fcselect-enum-label-line-height, 1.3); }
.syn-enum-empty { color: var(--syn-enum-empty-color, var(--text-tertiary)); }

.syn-enum-panel {
    display: flex; flex-direction: column;
    background: var(--syn-enum-panel-background, var(--surface-plane)); border: var(--syn-enum-panel-border, 1px solid var(--border-default)); border-radius: var(--syn-enum-panel-border-radius, var(--radius-md-plus));
    box-shadow: var(--syn-enum-panel-box-shadow, var(--elevation-overlay)); overflow-y: auto; max-height: var(--syn-enum-panel-max-height, 240px);
}
.syn-enum-row {
    display: flex; align-items: center; gap: var(--syn-enum-row-gap, 8px); width: 100%; text-align: left;
    padding: var(--syn-enum-row-padding, 7px 11px); border: none; background: transparent;
    font-size: var(--ctl-size, 0.8125rem); font-family: inherit; color: var(--syn-enum-row-color, var(--text-ink)); cursor: pointer;
}
.syn-enum-row:hover { background: var(--syn-enum-row-hover-background, var(--surface-hover)); }
.syn-enum-row.is-sel { background: var(--syn-enum-row-is-sel-background, var(--surface-hover)); }
/* Q118: the dot-less select's selected marker — plain label + ✓ (the edit affordance renders
   the column's read-mode vocabulary; dots only where the read display keeps color). */
.syn-enum-check { margin-left: auto; padding-left: var(--syn-enum-check-padding-left, 10px); display: inline-flex; color: var(--syn-enum-check-color, var(--accent-action)); }
.syn-enum-dot { width: var(--syn-enum-dot-width, 8px); height: var(--syn-enum-dot-height, 8px); border-radius: var(--syn-enum-dot-border-radius, var(--shape-radius-pill)); flex-shrink: 0; }
/* Pill trigger (status pill — mockup StatusLevelPill / StatusPicker). Quiet by default (dot carries color);
   the trigger carries the value color as ONE --pc custom property (Q22 markup diet) and .is-filled tints
   bg/border/label from it here — .is-filled is only stamped when a value color exists. The .is-filled rules
   sit LAST in this group on purpose: they must out-cascade :hover and .is-open exactly as the old inline
   styles did. */
.syn-enum-pill { gap: var(--syn-enum-pill-gap, 7px); padding: var(--syn-enum-pill-padding, 4px 11px); font-size: var(--syn-enum-pill-font-size, 0.71875rem); font-weight: var(--syn-enum-pill-font-weight, 600); border-radius: var(--syn-enum-pill-border-radius, var(--shape-radius-pill)); border: var(--syn-enum-pill-border, 1px solid var(--border-default)); background: var(--syn-enum-pill-background, var(--surface-plane)); color: var(--syn-enum-pill-color, var(--text-muted)); }
/* QB77 (PL-P8, Ken 2026-08-27 "Accepted"; relay-38 §4): a value that WRAPS past one line leaves the oval — the
   trigger renders in the rectangular tag grammar (the chip's --radius-sm) — in read and edit modes alike. The
   JS-local line-count stamp (theme.js synergyPills) sets the class; ovals stay single-line-only. CD trues up the
   drawn form at its next grid touch. */
.syn-enum-pill.is-multiline { border-radius: var(--syn-enum-pill-is-multiline-border-radius, var(--radius-sm)); }
.syn-enum-pill:hover { background: var(--syn-enum-pill-hover-background, var(--surface-hover)); }
.syn-enum-pill.is-open { border-color: var(--syn-enum-pill-is-open-border-color, var(--border-strong)); }
.syn-enum-pilldot { width: var(--syn-enum-pilldot-width, 7px); height: var(--syn-enum-pilldot-height, 7px); border-radius: var(--syn-enum-pilldot-border-radius, var(--shape-radius-pill)); flex-shrink: 0; background: var(--pc, var(--text-tertiary)); }
/* Q378: an option may carry a divider BEFORE it (SelectOption.DividerBefore) — the composer's "Custom volume…" last seat. */
.syn-enum-divider { height: var(--syn-enum-divider-height, 1px); background: var(--syn-enum-divider-background, var(--border-hairline)); margin: var(--syn-enum-divider-margin, 4px 6px); flex: none; }
.syn-enum-pill.is-filled {
    background: var(--syn-enum-pill-is-filled-background, color-mix(in srgb, var(--pc) 14%, var(--surface-plane)));
    border-color: var(--syn-enum-pill-is-filled-border-color, color-mix(in srgb, var(--pc) 45%, var(--surface-plane)));
    color: var(--syn-enum-pill-is-filled-color, var(--pc));
}

/* ---- MultiSelect (canonical multi-value selector; mockup MultiSelect MissionControl.jsx:545) ----------- */
.syn-ms-wrap { display: block; max-width: 100%; }
.syn-ms-trigger, .syn-ms-tagbox {
    display: flex; align-items: center; gap: var(--syn-ms-trigger-gap, 6px); flex-wrap: wrap; width: 100%; min-height: var(--syn-ms-trigger-min-height, 32px);
    text-align: left; border-radius: var(--syn-ms-trigger-border-radius, var(--shape-radius-control)); font-family: inherit;
    transition: var(--syn-ms-trigger-transition, border-color var(--motion-duration-base), background var(--motion-duration-base), box-shadow var(--motion-duration-base));
}
.syn-ms-trigger { cursor: pointer; }
.syn-ms-bordered { padding: var(--syn-ms-bordered-padding, 5px 9px); border: var(--syn-ms-bordered-border, 1px solid var(--border-default)); background: var(--syn-ms-bordered-background, var(--surface-plane)); }
.syn-ms-inline { padding: var(--syn-ms-inline-padding, 4px 8px); margin: var(--syn-ms-inline-margin, -1px -8px); border: var(--syn-ms-inline-border, 1px solid transparent); background: transparent; }
.syn-ms-inline:hover, .syn-ms-inline.is-open { border-color: var(--syn-ms-inline-hover-border-color, var(--border-default)); background: var(--syn-ms-inline-hover-background, var(--surface-plane)); }
.syn-ms-ph { font-size: var(--ctl-size, 0.84375rem); color: var(--syn-ms-ph-color, var(--text-tertiary)); }
/* Reference-list trigger ghost — "Add…" once chips exist, the placeholder before
   (mockup SearchableSelect multi, Experience.jsx:490). */
.syn-ms-add { flex: 1 1 80px; min-width: var(--syn-ms-add-min-width, 80px); font-size: var(--ctl-size, 0.8125rem); color: var(--syn-ms-add-color, var(--text-tertiary)); text-align: left; }
.syn-ms-spacer { flex: 1; }

.syn-ms-panel {
    display: flex; flex-direction: column; background: var(--syn-ms-panel-background, var(--surface-plane));
    border: var(--syn-ms-panel-border, 1px solid var(--border-default)); border-radius: var(--syn-ms-panel-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-ms-panel-box-shadow, var(--elevation-overlay));
    overflow-y: auto; max-height: var(--syn-ms-panel-max-height, 260px);
}
.syn-ms-row {
    display: flex; align-items: center; gap: var(--syn-ms-row-gap, 9px); width: 100%; text-align: left; padding: var(--syn-ms-row-padding, 8px 12px);
    border: none; border-bottom: var(--syn-ms-row-border-bottom, 1px solid var(--border-default)); background: transparent;
    font-size: var(--ctl-size, 0.84375rem); font-family: inherit; color: var(--syn-ms-row-color, var(--text-ink)); cursor: pointer;
}
.syn-ms-row:last-child { border-bottom: none; }
.syn-ms-row:hover { background: var(--syn-ms-row-hover-background, var(--surface-hover)); }
.syn-ms-check {
    width: var(--syn-ms-check-width, 16px); height: var(--syn-ms-check-height, 16px); border-radius: var(--syn-ms-check-border-radius, var(--radius-xs-plus)); border: var(--syn-ms-check-border, 1px solid var(--border-emphasis)); background: transparent;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.syn-ms-check.is-on { border-color: var(--syn-ms-check-is-on-border-color, var(--text-ink)); background: var(--syn-ms-check-is-on-background, var(--text-ink)); color: var(--syn-ms-check-is-on-color, var(--surface-plane)); }   /* AF-2308: ink with its tick */

.syn-ms-tagbox { cursor: text; }
.syn-ms-tagbox:focus-within { border-color: var(--syn-ms-tagbox-focus-within-border-color, var(--accent-action)); background: var(--syn-ms-tagbox-focus-within-background, var(--surface-plane)); box-shadow: var(--syn-ms-tagbox-focus-within-box-shadow, var(--accent-ring)); }
.syn-ms-tagx {
    display: inline-flex; align-items: center; justify-content: center; margin-left: var(--syn-ms-tagx-margin-left, 2px); padding: 0;
    border: none; background: transparent; color: inherit; cursor: pointer; opacity: var(--syn-ms-tagx-opacity, 0.6); border-radius: var(--syn-ms-tagx-border-radius, var(--shape-radius-pill));
}
.syn-ms-tagx:hover { opacity: var(--syn-ms-tagx-hover-opacity, 1); }
.syn-ms-input {
    flex: 1; min-width: var(--syn-ms-input-min-width, 90px); border: none; background: transparent; outline: none;
    font-family: inherit; font-size: var(--ctl-size, 0.84375rem); color: var(--syn-ms-input-color, var(--text-ink)); padding: var(--syn-ms-input-padding, 2px 0);
}

/* ---- EditableField (inline scalar edit; mockup EditableScalar MissionControl.jsx:268) ------------------- */
.syn-ef { display: flex; flex-direction: row; align-items: center; gap: var(--syn-ef-gap, 12px); padding: var(--syn-ef-padding, 5px 0); min-height: var(--syn-ef-min-height, 30px); }
/* QB76 (THE EDITOR-TEXT LAW, Ken's punch PL-P3/P6 2026-08-27): the armed control wears the idle value's
   rung — .syn-ef-idle is R6 12.5 (Q373), so every picker/input/select inside an EditableField binds 12.5. */
.syn-ef { --ctl-size: 0.78125rem; }
.syn-ef.is-wide { flex-direction: column; align-items: stretch; gap: var(--syn-ef-is-wide-gap, 4px); }
/* QB78(a) (MP-2): THE ARM-WIDE POSTURE — a composite editor's ARMED face drops under its label at full
   width (the rest face stays label-beside). The label-beside column is ~160px in the identity grid; a
   number · picker · move-pair · delete row cannot live there (the agency picker rendered 50px wide). */
   The identity grid's admin rows are a 132px/1fr GRID (Q180 C12), so the posture speaks both grammars:
   the flex row wraps, the grid row spans the control across both columns under the label. */
.syn-ef.is-armwide.is-editing { flex-wrap: wrap; row-gap: var(--syn-ef-is-armwide-is-editing-row-gap, 4px); }
.syn-ef.is-armwide.is-editing > .syn-ef-control { flex: 1 1 100%; grid-column: 1 / -1; }
/* Q373(a) THE DETAILS-RAIL FAMILY (Ken 2026-08-25, "no law at all"): the shared field-row faces bind ramp roles HERE, so
   every details rail conforms at once — label = C2 data-label (chrome) · value = R6 fact-value (ONE reading role) ·
   mono ids = the same role's size in the mono face (mono is a face, not a size license). */
.syn-ef-label {
    flex-shrink: 0; width: var(--kit-grid-s-admin-rows-are-a-132px-1fr-grid-q180-c12-width, 132px); font: var(--kit-grid-s-admin-rows-are-a-132px-1fr-grid-q180-c12-font, var(--type-c2));
    letter-spacing: var(--kit-grid-s-admin-rows-are-a-132px-1fr-grid-q180-c12-letter-spacing, var(--type-label-tracking)); text-transform: var(--kit-grid-s-admin-rows-are-a-132px-1fr-grid-q180-c12-text-transform, var(--type-label-transform)); color: var(--kit-grid-s-admin-rows-are-a-132px-1fr-grid-q180-c12-color, var(--text-tertiary));
}
.syn-ef.is-wide .syn-ef-label { width: auto; }
.syn-ef-control { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--syn-ef-control-gap, 8px); }
/* idle: borderless value + hover pencil (editable-on-intent) */
.syn-ef-idle {
    display: flex; align-items: center; gap: var(--syn-ef-idle-gap, 8px); flex: 1; min-width: 0; text-align: left;
    background: transparent; border: var(--syn-ef-idle-border, 1px solid transparent); border-radius: var(--syn-ef-idle-border-radius, var(--radius-sm));
    padding: var(--syn-ef-idle-padding, 3px 7px); margin: var(--syn-ef-idle-margin, -3px -7px); font: var(--syn-ef-idle-font, var(--type-r6));   /* Q373(a): R6 fact-value (was a local 13.5/400) */
    color: var(--syn-ef-idle-color, var(--text-ink)); cursor: pointer; transition: var(--syn-ef-idle-transition, background var(--motion-duration-base), border-color var(--motion-duration-base));
}
.syn-ef-idle:hover { background: var(--syn-ef-idle-hover-background, var(--surface-hover)); }
.syn-ef-idle.is-empty { color: var(--syn-ef-idle-is-empty-color, var(--text-faint)); }   /* Q342(d) VACANCY R8: the frame's empty register = the ruled DISABLED register, one token with the word inside */
.syn-ef-idle.is-mono { font-family: var(--syn-ef-idle-is-mono-font-family, var(--type-family-mono)); }
.syn-ef-val { flex: 1; min-width: 0; overflow-wrap: break-word; }   /* Q341 V2: the idle value wraps, never ellipsizes */
.syn-ef-pencil { display: inline-flex; opacity: var(--syn-ef-pencil-opacity, 0); transition: var(--syn-ef-pencil-transition, opacity var(--motion-duration-base)); }
.syn-ef-idle:hover .syn-ef-pencil { opacity: var(--syn-ef-idle-hover-ef-pencil-opacity, 1); }
.syn-ef-saving { font-size: var(--syn-ef-saving-font-size, 0.71875rem); color: var(--syn-ef-saving-color, var(--text-tertiary)); white-space: nowrap; }
/* Q171: the partner-resume intake composer (t9 comp 9a). */
.syn-kpi-charter { font-size: var(--syn-kpi-charter-font-size, 0.78125rem); color: var(--syn-kpi-charter-color, var(--text-tertiary)); line-height: var(--syn-kpi-charter-line-height, 1.5); margin: var(--syn-kpi-charter-margin, 0 0 12px); }
.syn-kpi-field { display: flex; flex-direction: column; gap: var(--syn-kpi-field-gap, 5px); margin-bottom: var(--syn-kpi-field-margin-bottom, 12px); }
.syn-kpi-drop { display: flex; flex-direction: column; align-items: center; gap: var(--syn-kpi-drop-gap, 3px); padding: var(--syn-kpi-drop-padding, 22px 14px); border: var(--syn-kpi-drop-border, 1.5px dashed var(--border-emphasis)); border-radius: var(--syn-kpi-drop-border-radius, var(--shape-radius-plane)); background: var(--syn-kpi-drop-background, var(--bg-secondary)); cursor: pointer; font-size: var(--syn-kpi-drop-font-size, 0.78125rem); color: var(--syn-kpi-drop-color, var(--text-muted)); position: relative; }
.syn-kpi-drop:hover { border-color: var(--syn-kpi-drop-hover-border-color, var(--border-strong)); }
.syn-kpi-browse { color: var(--syn-kpi-browse-color, var(--accent-action)); font-weight: var(--syn-kpi-browse-font-weight, 500); }
.syn-kpi-drophint { font-size: var(--syn-kpi-drophint-font-size, 0.71875rem); color: var(--syn-kpi-drophint-color, var(--text-faint)); }
.syn-kpi-fileinput { position: absolute; inset: 0; opacity: var(--syn-kpi-fileinput-opacity, 0); cursor: pointer; }
.syn-kpi-filerow { display: flex; align-items: center; gap: var(--syn-kpi-filerow-gap, 8px); padding: var(--syn-kpi-filerow-padding, 8px 11px); border: var(--syn-kpi-filerow-border, 1px solid var(--border-default)); border-radius: var(--syn-kpi-filerow-border-radius, var(--shape-radius-control)); }
.syn-kpi-filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--syn-kpi-filename-font-size, 0.78125rem); }
.syn-kpi-parsed { font-size: var(--syn-kpi-parsed-font-size, 0.75rem); color: var(--syn-kpi-parsed-color, var(--text-muted)); margin-bottom: var(--syn-kpi-parsed-margin-bottom, 10px); line-height: var(--syn-kpi-parsed-line-height, 1.5); }
.syn-kpi-parsednote { color: var(--syn-kpi-parsednote-color, var(--text-faint)); font-size: var(--syn-kpi-parsednote-font-size, 0.71875rem); }
.syn-kpi-dims { display: grid; grid-template-columns: 1fr 1fr; gap: var(--syn-kpi-dims-gap, 10px 14px); }
.syn-kpi-dims label { display: flex; flex-direction: column; gap: var(--syn-kpi-dims-label-gap, 4px); font-size: var(--syn-kpi-dims-label-font-size, 0.65625rem); font-weight: var(--syn-kpi-dims-label-font-weight, 600); text-transform: var(--syn-kpi-dims-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-kpi-dims-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-kpi-dims-label-color, var(--text-tertiary)); }
/* (Q171 pick controls ride SynMenu — no native select; the row grain is SynMenu's own.) */
/* The workbench's local-candidate name (no PersonRef — there is no directory page to open). */
.syn-kpw-localname { font-size: var(--syn-kpw-localname-font-size, 0.84375rem); font-weight: var(--syn-kpw-localname-font-weight, 600); color: var(--syn-kpw-localname-color, var(--text-ink)); }

/* Q168: the MarkdownEditor link popover — canonical anchored anatomy, URL field + apply. */
.syn-mdlink-pop { display: flex; align-items: center; gap: var(--syn-mdlink-pop-gap, 8px); padding: var(--syn-mdlink-pop-padding, 10px); background: var(--syn-mdlink-pop-background, var(--surface-plane)); border: var(--syn-mdlink-pop-border, 1px solid var(--border-default)); border-radius: var(--syn-mdlink-pop-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-mdlink-pop-box-shadow, var(--shadow-dropdown)); }
.syn-mdlink-input { width: var(--syn-mdlink-input-width, 240px); border: var(--syn-mdlink-input-border, 1px solid var(--border-default)); border-radius: var(--syn-mdlink-input-border-radius, var(--radius-nav)); padding: var(--syn-mdlink-input-padding, 6px 9px); font: inherit; font-size: var(--syn-mdlink-input-font-size, 0.78125rem); background: var(--syn-mdlink-input-background, var(--surface-plane)); color: var(--syn-mdlink-input-color, var(--text-ink)); }
.syn-mdlink-input:focus { outline: none; border-color: var(--syn-mdlink-input-focus-border-color, var(--border-strong)); }
/* read-only row (dates owned here but edited in the Pursuit Schedule; identification-card projection) */
.syn-ef-ro { font: var(--syn-ef-ro-font, var(--type-r6)); color: var(--syn-ef-ro-color, var(--text-ink)); padding: var(--syn-ef-ro-padding, 3px 0); }   /* Q373(a): R6 fact-value */
.syn-ef-ro.is-empty { color: var(--syn-ef-ro-is-empty-color, var(--text-tertiary)); }
.syn-ef-ro.is-mono { font-family: var(--syn-ef-ro-is-mono-font-family, var(--type-family-mono)); }
/* read-only value that is a doorway to its owning surface (click opens the Pursuit Schedule) */
.syn-ef-rolink { display: flex; align-items: center; gap: var(--syn-ef-rolink-gap, 8px); flex: 1; min-width: 0; text-align: left; background: transparent; border: var(--syn-ef-rolink-border, 1px solid transparent); border-radius: var(--syn-ef-rolink-border-radius, var(--radius-sm)); padding: var(--syn-ef-rolink-padding, 3px 7px); margin: var(--syn-ef-rolink-margin, -3px -7px); cursor: pointer; transition: var(--syn-ef-rolink-transition, background var(--motion-duration-base), border-color var(--motion-duration-base)); }
.syn-ef-rolink:hover { background: var(--syn-ef-rolink-hover-background, var(--surface-hover)); }
.syn-ef-rolink:hover .syn-ef-pencil { opacity: var(--syn-ef-rolink-hover-ef-pencil-opacity, 1); }
/* editing: editor slot + inline confirm/cancel; the wrap stacks the error under the editor row.
   [REBUILD-P1-6] width policy: the slot claims a per-kind minimum width (--ef-minw, set by the data-kind
   floors below or a per-field [EditWidth] hint inlined by the shell) and the control FILLS the slot; a
   scalar value never inner-scrolls at its realistic length. (QB79: the ✓/the close act pair that used to wrap beneath
   the slot is gone — the row holds the control alone.) */
.syn-ef-editwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-ef-editwrap-gap, 4px); }
.syn-ef-editor { display: flex; align-items: center; gap: var(--syn-ef-editor-gap, 6px); flex: 1; min-width: 0; flex-wrap: wrap; }
.syn-ef-editwrap > .syn-ef-editor { flex: 0 0 auto; }
.syn-ef-slot { flex: 1 1 auto; min-width: var(--syn-ef-slot-min-width, min(var(--ef-minw, 60px), 100%)); display: flex; align-items: center; }
.syn-ef-slot > * { min-width: 0; max-width: 100%; }
.syn-ef-slot > .syn-enum-wrap { flex: 1 1 auto; }
.syn-ef-slot .syn-enum-wrap > .syn-enum { flex: 1 1 auto; min-width: 0; }
/* per-kind edit-width floors (the control-registry defaults); an [EditWidth] hint overrides via the
   shell's inline --ef-minw */
.syn-ef[data-kind="Text"] { --ef-minw: 200px; }
.syn-ef[data-kind="TextArea"], .syn-ef[data-kind="Markdown"] { --ef-minw: 240px; }
.syn-ef[data-kind="Select"] { --ef-minw: 160px; }
.syn-ef[data-kind="Number"] { --ef-minw: 110px; }
.syn-ef[data-kind="Currency"] { --ef-minw: 170px; }
/* a bare input fills its slot (nested composite internals — currency amount, popover search — keep
   their own sizing) */
.syn-ef-slot > .syn-input { width: 100%; }
/* the text/number editor matches the idle value's size + wears the mockup's accent ring (EditableScalar
   inputStyle, MissionControl.jsx:325) so flipping idle->edit never changes the glyph size */
.syn-ef-slot .syn-input { padding: var(--syn-ef-slot-input-padding, 5px 9px); font-size: var(--ctl-size, 0.84375rem); border-color: var(--syn-ef-slot-input-border-color, var(--accent-action)); box-shadow: var(--syn-ef-slot-input-box-shadow, var(--accent-ring)); }
/* QB79 (Ken's MP-3/4/5): the inline ✓/the close act pair DIED — leaving the editor or Enter commits, Esc reverts (the
   commit-as-you-go ceremony, EditableField.razor). Nothing sits beside the armed control any more. */
.syn-ef-error { font-size: var(--syn-ef-error-font-size, 0.75rem); color: var(--syn-ef-error-color, var(--state-attention)); padding-top: var(--syn-ef-error-padding-top, 2px); }
/* QB79: the LIST-family armed seats (nicknames · family & ventures · capabilities · the person plane's lists) commit
   EVERY ACT as it happens (whole-list patch per add/remove) — their quiet the close act is a DONE door that closes the armed
   register, never a confirm. It wore the dead confirm glyph's class; it wears its own now. */
.syn-pdet-done { display: inline-flex; flex-shrink: 0; padding: var(--syn-pdet-done-padding, 4px); border-radius: var(--syn-pdet-done-border-radius, var(--radius-sm)); border: var(--syn-pdet-done-border, 1px solid var(--border-default)); background: var(--syn-pdet-done-background, var(--surface-plane)); color: var(--syn-pdet-done-color, var(--text-tertiary)); cursor: pointer; }
.syn-pdet-done:hover { background: var(--syn-pdet-done-hover-background, var(--surface-hover)); }

/* Block edit mode (EditableField Block) — tall structured editors (PerformancePeriod; later collection editors)
   take full content width and move ✓/the close act to a bottom action row, instead of the scalar row's actions floating at
   the tall editor's vertical midpoint. Pairs with is-wide (label above). The editor's own width fill is its
   styling concern; this only provides the block container + bottom actions. */
/* UD12 (Relay 33 §10): the block shell IS the armed plane — the one --border-emphasis frame with the commit
   row (Cancel · Save) at its bottom on --bg-secondary. A MarkdownEditor inside folds its own plane chrome into
   this frame (one frame, never two); a structured editor (PerformancePeriod) sits on the plane's padding. */
.syn-ef-editor.is-block { flex-direction: column; align-items: stretch; gap: 0; border: var(--syn-ef-editor-is-block-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-ef-editor-is-block-border-radius, var(--shape-radius-control)); background: var(--syn-ef-editor-is-block-background, var(--surface-plane)); }
/* QB44: in the block shell the slot STACKS its control's parts (the MarkdownEditor's toolbar above its
   editor, both full width) — the row slot's align-items:center squeezed the toolbar into a column. */
.syn-ef-editor.is-block > .syn-ef-slot { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: var(--syn-ef-editor-is-block-ef-slot-padding, 10px 12px); }
.syn-ef-editor.is-block > .syn-ef-slot:has(> .syn-mdplane) { padding: 0; }
.syn-ef-editor.is-block > .syn-ef-slot > * { max-width: none; }
.syn-ef-editor.is-block .syn-mdplane { border: 0; border-radius: var(--syn-ef-editor-is-block-mdplane-border-radius, var(--shape-radius-control) var(--shape-radius-control) 0 0); }
.syn-ef-actions {
    display: flex; align-items: center; gap: var(--syn-ef-actions-gap, 10px);
    padding: var(--syn-ef-actions-padding, 8px 14px); position: sticky; bottom: 0; z-index: 5;
    border-top: var(--syn-ef-actions-border-top, 1px solid var(--border-hairline)); border-radius: var(--syn-ef-actions-border-radius, 0 0 var(--radius-nav) var(--radius-nav));
    background: var(--syn-ef-actions-background, var(--bg-secondary));
}
.syn-ef-actions > .syn-actrow { margin-left: auto; }
.syn-ef-discardwords { font: var(--syn-ef-discardwords-font, 400 12px var(--type-family)); color: var(--syn-ef-discardwords-color, var(--text-muted)); }

/* PerformancePeriodEditor — the Contract Structure "Structure" editor, shown in the block-mode shell above.
   Base + option rows share an aligned label column so every month input lines up; the inputs stay compact and
   the editor fills the block width. Per-row labels (Base period / Option N) instead of an "Option periods"
   header avoid a second label tier under the card's "Structure" eyebrow. Reconciled to the live card (no mockup). */
.syn-period { display: flex; flex-direction: column; gap: var(--syn-period-gap, 7px); width: 100%; }
.syn-period-opt { display: flex; align-items: center; gap: var(--syn-period-opt-gap, 10px); }
.syn-period-rowlabel { flex: 0 0 84px; font-size: var(--syn-period-rowlabel-font-size, 0.8125rem); color: var(--syn-period-rowlabel-color, var(--text-muted)); }
.syn-period .syn-num-field { width: auto; flex: 0 0 auto; }
.syn-period .syn-num { width: var(--syn-period-num-width, 58px); text-align: right; }
.syn-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--syn-icon-btn-padding, 3px); border-radius: var(--syn-icon-btn-border-radius, var(--radius-sm)); border: var(--syn-icon-btn-border, 1px solid transparent); background: none; color: var(--syn-icon-btn-color, var(--text-tertiary)); cursor: pointer; transition: var(--syn-icon-btn-transition, color var(--motion-duration-base), background var(--motion-duration-base)); }
.syn-icon-btn:hover { background: var(--syn-icon-btn-hover-background, var(--surface-hover)); color: var(--syn-icon-btn-hover-color, var(--state-attention)); }
.syn-period-add { align-self: flex-start; margin-top: var(--syn-period-add-margin-top, 1px); }
.syn-period-total { font-size: var(--syn-period-total-font-size, 0.8125rem); color: var(--syn-period-total-color, var(--text-muted)); margin-top: var(--syn-period-total-margin-top, 4px); padding-top: var(--syn-period-total-padding-top, 9px); border-top: var(--syn-period-total-border-top, 1px solid var(--border-default)); }

/* ---- ModalShell ------------------------------------------------------------ */
/* The overlay + container chrome live on the native <dialog> (see "ModalShell on <dialog>" below); the width
   classes apply to the inner shell. [AF-82]: the element supplies the scrim, the focus trap and the top layer;
   ModalShell.razor.js the scroll lock, the opener's focus and the light-dismiss door. */
.syn-modal-compact  { max-width: var(--syn-modal-compact-max-width, 480px); }
.syn-modal-standard { max-width: var(--syn-modal-standard-max-width, 640px); }
.syn-modal-wide     { max-width: var(--syn-modal-wide-max-width, 780px); }
.syn-modal-extra    { max-width: var(--syn-modal-extra-max-width, 900px); }
/* Q378 (Relay 35 CANON-DELTA 1 — THE MODAL SPECIES LAW): WORK = min(92vw, 1560px) × 90vh FIXED (the species
   is the room, not the content); header · sub-header (tab row) · footer sticky, only the body pane scrolls;
   padding 20px 24px; the R3 WORK title. The dialog width rides the shell's WidthCss; the height is this box. */
/* Q380: the panel's hook re-insets ONLY what its drawing differs in from the WORK species (the room, bands, foot
   are the species'): the head has no hairline (the tab row below carries it, comp `tcp-header`) and sits 18px
   from the top; the body stacks its panes as a positioned column. */
/* (0,3,0) on purpose: the species bands are (0,2,0) and sit LATER in this sheet — a hook at equal specificity
   loses by order (the Q380 lesson, both directions). */
.syn-tcp-dx .syn-modal-inner .syn-modal-head { padding: var(--syn-tcp-dx-modal-inner-modal-head-padding, 18px 24px 0); border-bottom: 0; align-items: flex-start; }
.syn-tcp-dx .syn-modal-inner .syn-modal-titlewrap { flex: 1; min-width: 0; }
.syn-tcp-dx .syn-modal-inner .syn-modal-titletext { flex: 1; min-width: 0; }
.syn-tcp-dx .syn-modal-inner .syn-modal-body { position: relative; flex-direction: column; }
.syn-modal-titlerow { display: flex; align-items: center; gap: var(--syn-modal-titlerow-gap, 10px); min-width: 0; }
/* Q249 — D-13 RULED (Cowork 2026-08-18; CD no-objection, relay 14): the R10 MODAL CHROME is ModalShell's
   DEFAULT app-wide — the 12-2 / 10a family every R10 modal comp draws (the second consumer arrived with
   HB-QC2-2): r12, `0 12px 32px -8px rgba(23,23,23,.35)`, NO border, NO head hairline, inner 16×18 with a
   12px column gap, title 700 15px --text-primary, subtitle 400 12/1.5 --text-secondary (text-wrap:pretty),
   the close act 14px --text-disabled, the footer BAND (full-bleed inside the padding: margin 0 −18 −16, 12×18,
   --border-row top, gap 12). Per-modal KNOBS = WidthPx (exists) + a CssClass scope for the exceptions
   (settings-modal: title 19 / padding 20×22 / gap 14). Pre-R10 modals inherit — flag any that read wrong.
   TEXT-SIZE: title/subtitle READING (rem); the the close act and paddings CHROME (px). */
.syn-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--syn-modal-head-gap, 10px);
    padding: 0;
}
.syn-modal-titlewrap { display: inline-flex; align-items: center; gap: var(--syn-modal-titlewrap-gap, var(--space-2)); min-width: 0; }
.syn-modal-titletext { display: flex; flex-direction: column; gap: var(--syn-modal-titletext-gap, 4px); min-width: 0; }
.syn-modal-title { font: var(--syn-modal-title-font, var(--type-r3-form)); line-height: normal; color: var(--syn-modal-title-color, var(--text-ink)); margin: 0; }   /* R3 FORM 15 (Relay 35 delta 2) — the ONE base; WORK/CONFIRM re-bind per species */
/* Optional description line + status tile under/beside the title (mockup modal headers; ModalShell Subtitle /
   TitleIconTone). Both are opt-in — untoned/subtitle-less modals render exactly as before. */
.syn-modal-subtitle { font-size: var(--syn-modal-subtitle-font-size, 0.75rem); color: var(--syn-modal-subtitle-color, var(--text-muted)); margin: 0; line-height: var(--syn-modal-subtitle-line-height, 1.5); text-wrap: pretty; }
.syn-modal-icontile { width: var(--syn-modal-icontile-width, 30px); height: var(--syn-modal-icontile-height, 30px); border-radius: var(--syn-modal-icontile-border-radius, var(--shape-radius-control)); flex-shrink: 0; display: inline-flex;
    align-items: center; justify-content: center; background: var(--syn-modal-icontile-background, color-mix(in srgb, var(--tile) 14%, var(--surface-plane))); }
.syn-modal-x {
    display: inline-flex;
    background: none;
    border: none;
    color: var(--syn-modal-x-color, var(--text-faint));
    cursor: pointer;
    padding: 0;
    margin-top: var(--syn-modal-x-margin-top, 1px);
    border-radius: 0;
    flex: none;
}
.syn-modal-x .syn-icon { width: var(--syn-modal-x-icon-width, 14px); height: var(--syn-modal-x-icon-height, 14px); }
.syn-modal-x:hover { color: var(--syn-modal-x-hover-color, var(--text-ink)); background: transparent; }
.syn-modal-body { padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.syn-modal-feedback {
    display: flex;
    align-items: center;
    gap: var(--syn-modal-feedback-gap, var(--space-2));
    margin: 0;
    padding: var(--syn-modal-feedback-padding, var(--space-2) var(--space-3));
    border-radius: var(--syn-modal-feedback-border-radius, var(--shape-radius-control));
    font-size: var(--syn-modal-feedback-font-size, var(--text-sm));
}
.syn-modal-feedback-error { background: var(--syn-modal-feedback-error-background, var(--state-attention-tint)); color: var(--syn-modal-feedback-error-color, var(--state-attention)); }
.syn-modal-feedback-success { background: var(--syn-modal-feedback-success-background, var(--state-success-tint)); color: var(--syn-modal-feedback-success-color, var(--state-success)); }
.syn-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--syn-modal-foot-gap, 12px);
    margin: var(--syn-modal-foot-margin, 0 -18px -16px);
    padding: var(--syn-modal-foot-padding, 12px 18px);
    border-top: var(--syn-modal-foot-border-top, 1px solid var(--border-hairline));
}
.syn-modal-dirty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--syn-modal-dirty-gap, var(--space-3));
    margin: var(--syn-modal-dirty-margin, 0 -18px -16px);
    padding: var(--syn-modal-dirty-padding, var(--space-3) 18px);
    background: var(--syn-modal-dirty-background, var(--state-warning-tint));
    color: var(--syn-modal-dirty-color, var(--text-ink));
    font-size: var(--syn-modal-dirty-font-size, var(--text-sm));
}
.syn-modal-dirty-actions { display: flex; gap: var(--syn-modal-dirty-actions-gap, var(--space-2)); }
.syn-modal-busy {
    position: absolute;
    inset: 0;
    background: var(--syn-modal-busy-background, color-mix(in srgb, var(--surface-plane) 65%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--syn-modal-busy-border-radius, var(--shape-radius-sheet));
}
.syn-spinner {
    width: var(--syn-spinner-width, 28px);
    height: var(--syn-spinner-height, 28px);
    border: var(--syn-spinner-border, 3px solid var(--border-emphasis));
    border-top-color: var(--syn-spinner-border-top-color, var(--accent-action));
    border-radius: var(--syn-spinner-border-radius, var(--shape-radius-pill));
    animation: syn-spin var(--spinner-turn) var(--spinner-easing) infinite;
}
@keyframes syn-spin { to { transform: rotate(360deg); } }

/* ---- ModalShell on <dialog> ([AF-82]) ---------------------------------------- */
/* The dialog root carries the ruled R10 chrome (Q249, D-13: r12, `0 12px 32px -8px rgba(23,23,23,.35)`, NO
   border) and the shell's CssClass (Q210's per-modal knob); the syn-modal chrome renders inside it. The element's
   own padding and border are zeroed so the design is unchanged from the popup years; it sits in the top layer,
   centered by the UA's own margin:auto; the width is the shell's inline WidthCss. */
dialog.syn-modal-dx {
    padding: 0;
    border: none;
    border-radius: var(--kit-dialog-syn-modal-dx-border-radius, var(--shape-radius-sheet));
    box-shadow: var(--kit-dialog-syn-modal-dx-box-shadow, var(--shadow-tip-deep));
    background: var(--kit-dialog-syn-modal-dx-background, var(--surface-plane));
    color: var(--kit-dialog-syn-modal-dx-color, var(--text-ink));
    overflow: hidden;
    box-sizing: border-box;
    max-width: var(--kit-dialog-syn-modal-dx-max-width, calc(100vw - 40px));   /* the shell never out-runs a slim viewport (20px of desk either side) */
    outline: none;                   /* the ringless seat (DIALOG-1): the container paints no outline; only a tabbable act inside rings */
}
/* The ruled R10 modal scrim — var(--surface-scrim), drawn identically across every R10 modal comp (37 instances). */
dialog.syn-modal-dx::backdrop { background: var(--kit-dialog-syn-modal-dx-backdrop-background, var(--surface-scrim)); }
/* The scroll lock: the page behind an open shell does not scroll (ModalShell.razor.js holds the class while any is open). */
html.syn-modal-open { overflow: hidden; }
/* [AF-36]: modals are full-screen at compact — the package's own breakpoint, never an app's media query. */
/* d-board (AF-C-1 row 93): a board's card and a banner arrive by blocks.css's fade; the preference for less motion stops it */
@media (prefers-reduced-motion: reduce) { .af-board-column.is-filling .af-board-card, .af-banner { animation: none; } }
@media (max-width: 639px) {
    dialog.syn-modal-dx { width: var(--kit-dialog-syn-modal-dx-at-to639-width, 100vw) !important; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
    dialog.syn-modal-dx .syn-modal-inner { max-width: none; max-height: none; height: 100%; }
}
/* ---- The reconnect modal (p-shell-words, row 178; [AF-355]) ------------------------------------ */
/* The host's <dialog id="components-reconnect-modal"> in the ModalShell dress — the plane, the sheet radius, the overlay
   elevation, the scrim — with the framework's two expanding lines in the action token, never its blue. The framework
   names the state by class; the words follow it: Reconnecting… while it tries, the lost line and Reload when it gives up. */
dialog.af-reconnect {
    padding: var(--kit-dialog-af-reconnect-padding, var(--space-5) var(--space-6));
    border: none;
    border-radius: var(--kit-dialog-af-reconnect-border-radius, var(--shape-radius-sheet));
    box-shadow: var(--kit-dialog-af-reconnect-box-shadow, var(--elevation-overlay));
    background: var(--kit-dialog-af-reconnect-background, var(--surface-plane));
    color: var(--kit-dialog-af-reconnect-color, var(--text-ink));
    width: var(--kit-dialog-af-reconnect-width, var(--reconnect-width));
    max-width: var(--kit-dialog-af-reconnect-max-width, calc(100vw - var(--space-6) - var(--space-6)));
    box-sizing: border-box;
    outline: none;
    text-align: center;
}
dialog.af-reconnect[open] { display: flex; flex-direction: column; align-items: center; gap: var(--kit-dialog-af-reconnect-open-gap, var(--space-3)); }
dialog.af-reconnect::backdrop { background: var(--kit-dialog-af-reconnect-backdrop-background, var(--surface-scrim)); }
.af-reconnect-lines { position: relative; width: var(--af-reconnect-lines-width, var(--reconnect-lines-size)); height: var(--af-reconnect-lines-height, var(--reconnect-lines-size)); }
.af-reconnect-lines div {
    position: absolute;
    inset: 0;
    border: var(--af-reconnect-lines-div-border, var(--reconnect-line-width) solid var(--accent-action));
    border-radius: var(--af-reconnect-lines-div-border-radius, var(--shape-radius-pill));
    opacity: var(--af-reconnect-lines-div-opacity, 0);
    animation: af-reconnect-wave var(--reconnect-wave) var(--reconnect-wave-easing) infinite;
}
.af-reconnect-lines div:nth-child(2) { animation-delay: calc(var(--reconnect-wave) / -3); }
@keyframes af-reconnect-wave { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .af-reconnect-lines div { animation: none; opacity: var(--af-reconnect-lines-div-at-reduced-opacity, 1); } .af-reconnect-lines div:nth-child(2) { display: none; } }
.af-reconnect-words { font: var(--af-reconnect-words-font, var(--type-r3-form)); color: var(--af-reconnect-words-color, var(--text-ink)); margin: 0; }
.af-reconnect-lost, .af-reconnect-reload { display: none; }
dialog.af-reconnect:is(.components-reconnect-failed, .components-reconnect-resume-failed, .components-reconnect-rejected) .af-reconnect-trying,
dialog.af-reconnect:is(.components-reconnect-failed, .components-reconnect-resume-failed, .components-reconnect-rejected) .af-reconnect-lines { display: none; }
dialog.af-reconnect:is(.components-reconnect-failed, .components-reconnect-resume-failed, .components-reconnect-rejected) .af-reconnect-lost { display: inline; }
dialog.af-reconnect:is(.components-reconnect-failed, .components-reconnect-resume-failed, .components-reconnect-rejected) .af-reconnect-reload { display: inline-flex; }
.syn-modal-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--syn-modal-inner-gap, 12px);                                             /* Q249: the R10 column gap */
    padding: var(--syn-modal-inner-padding, 16px 18px);                                    /* Q249: the R10 inner padding (12-2) */
    max-height: var(--syn-modal-inner-max-height, 85vh);                                      /* QB62: a FORM modal grows to 85vh, then its body scrolls (SPECIES-ASSIGNMENT §1) */
    box-sizing: border-box;
    background: var(--syn-modal-inner-background, var(--surface-plane));
}
/* QB62 (Relay 35 SPECIES-ASSIGNMENT §1–2, RATIFIED 2026-08-25) — THE MODAL SPECIES LAW on the shell. FORM = the
   four tiers above (content-driven to 85vh, then the body scrolls under the sticky head/foot) · WORK =
   min(92vw, 1560px) × 90vh FIXED (the species is the room, not the content; the ruled 20×24 padding) · CONFIRM =
   480, never scrolls. R3 modal-title (TYPE-RAMP's held slot, ratified there) = 700 · WORK 18 / FORM 15 (the
   .syn-modal-title default) / CONFIRM 14 — per-seat title inventions died with this sweep. THE TOPR CHIP (§2):
   mono 600 10px · --text-tertiary on --bg-secondary · --border-default · r6 · 2px 7px, immediately right of the
   title in the title row. Chrome class: px. */
/* Q380 (Ken's prod shot: the panel's foot spilled below the room): the WORK room is PADDING-LESS by construction —
   the head/sub-head/foot BANDS own the ruled 20×24 inset and the body is the room between them. The old
   `padding: 20px 24px` + a foot bleeding negative 24/20 margins broke the moment a per-modal hook zeroed the
   inner padding (the .syn-tcp-dx seam): the negative margins pushed the foot 20px past the box. No negative
   margins on a species band, ever; a hook may re-inset a band, never the room. */
/* FIX-2 ([REBUILD-FIX-2], Ken 2026-09-15: "it should not be vertically any taller than it needs to be") — the 90vh
   FIXED room is STRUCK: a WORK modal's height is CONTENT-DRIVEN with 90vh as the CAP. Under the cap the modal is
   exactly as tall as its bands + the body's content; past it the inner clamps at 90vh, the head/sub-head/foot bands
   stay put (flex: none) and the seat's ONE pane scrolls inside the body (min-height: 0, overflow: hidden). A seat's
   pane therefore sizes from its CONTENT, never from the room: no percentage heights, no absolutely-positioned
   inset:0 panes (the control panel's pane grammar re-cut at its block), no block stacked as row-flex siblings
   (the two pre-R10 KP seats got their one scrolling pane). The width law unchanged. */
.syn-modal-species-work { height: auto; max-height: var(--syn-modal-species-work-max-height, 90vh); padding: 0; gap: 0; }
.syn-modal-species-work .syn-modal-head { align-items: center; padding: var(--syn-modal-species-work-modal-head-padding, 20px 24px 12px); border-bottom: var(--syn-modal-species-work-modal-head-border-bottom, 1px solid var(--border-hairline)); flex: none; }
.syn-modal-species-work .syn-modal-subhead { padding: var(--syn-modal-species-work-modal-subhead-padding, 0 24px); flex: none; }
.syn-modal-species-work .syn-modal-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.syn-modal-species-work .syn-modal-feedback { margin: var(--syn-modal-species-work-modal-feedback-margin, 8px 24px 0); }
.syn-modal-species-work .syn-modal-title { font: var(--syn-modal-species-work-modal-title-font, var(--type-r3-work)); line-height: normal; }
.syn-modal-species-work .syn-modal-foot, .syn-modal-species-work .syn-modal-dirty { margin: 0; padding: var(--syn-modal-species-work-modal-foot-padding, 12px 24px); flex: none; }
.syn-modal-species-confirm .syn-modal-title { font: var(--syn-modal-species-confirm-modal-title-font, var(--type-r3-confirm)); line-height: normal; }
.syn-modal-species-confirm .syn-modal-body { overflow: visible; }
.syn-modal-titlerow { display: flex; align-items: center; gap: var(--syn-modal-titlerow-gap, 8px); min-width: 0; }
.syn-modal-chip { flex: none; white-space: nowrap; font: var(--syn-modal-chip-font, 600 10px var(--type-family-mono)); color: var(--syn-modal-chip-color, var(--text-tertiary)); background: var(--syn-modal-chip-background, var(--bg-secondary)); border: var(--syn-modal-chip-border, 1px solid var(--border-default)); border-radius: var(--syn-modal-chip-border-radius, var(--radius-sm)); padding: var(--syn-modal-chip-padding, 2px 7px); }

/* ---- Form controls (UI_SPEC §3) -------------------------------------------- */
.syn-input {
    width: 100%;
    padding: var(--syn-input-padding, var(--space-2) var(--space-3));
    border: var(--syn-input-border, 1px solid var(--border-default));
    border-radius: var(--syn-input-border-radius, var(--shape-radius-control));
    background: var(--syn-input-background, var(--surface-plane));
    color: var(--syn-input-color, var(--text-ink));
    font-family: var(--syn-input-font-family, var(--type-family));
    font-size: var(--syn-input-font-size, var(--read-sm));   /* Q342(c): input text = reading, scales */
    transition: var(--syn-input-transition, border-color var(--motion-duration-fast) var(--motion-easing));
}
.syn-input:focus { outline: none; border-color: var(--syn-input-focus-border-color, var(--accent-action)); }
.syn-input::placeholder { color: var(--syn-input-placeholder-color, var(--text-tertiary)); }
/* Q344 (HB-QC43-1) — THE CANONICAL WRAP-ENTRY (the TEXT-ENTRY WRAP LAW), [AF-1056] — EVERY FREE-TEXT FIELD GROWS WITH ITS TEXT:
   two lines when empty (three where the control asks rows="3"), growing with the words (field-sizing: content), capped at ten
   lines and scrolling past the cap; never a resize grip. The heights are lines (lh) plus the box's own padding and edge, so a
   theme's type moves them together. The read-only face and print show the whole text. */
.syn-input.syn-wrapentry { display: block; resize: none; field-sizing: content; padding-block: var(--syn-wrapentry-padding-block, var(--space-2)); min-block-size: var(--syn-wrapentry-min-height, calc(2lh + 2 * var(--syn-wrapentry-padding-block, var(--space-2)) + 2 * var(--syn-wrapentry-edge, 1px))); max-block-size: var(--syn-wrapentry-max-height, calc(10lh + 2 * var(--syn-wrapentry-padding-block, var(--space-2)) + 2 * var(--syn-wrapentry-edge, 1px))); overflow-y: auto; line-height: var(--syn-wrapentry-line-height, 1.5); overflow-wrap: break-word; }
.syn-input.syn-wrapentry[rows="3"] { min-block-size: var(--syn-wrapentry-rows3-min-height, calc(3lh + 2 * var(--syn-wrapentry-padding-block, var(--space-2)) + 2 * var(--syn-wrapentry-edge, 1px))); }
.syn-input.syn-wrapentry:read-only { max-block-size: none; overflow-y: visible; }
@media print { .syn-input.syn-wrapentry { max-block-size: none; overflow-y: visible; } }
.syn-select { cursor: pointer; }
textarea.syn-input { resize: vertical; min-height: var(--kit-textarea-syn-input-min-height, 60px); line-height: var(--kit-textarea-syn-input-line-height, var(--leading-normal)); }

/* An editor wrapped by a canonical control fills its field cell. */
.syn-input-dx { width: 100%; }

/* QB82(a) (Ken's C13, the THIRD picker-size catch): a picker FILLS its host — it never sizes to its own trigger
   label, so a flex/inline host cannot starve it (the competition firm picker rendered ~110px in a flex row). The
   trigger's own floor is QB80's 8rem; the popup's is QB76's 320. Qb82Tests is the census-backed NET: any local
   rule narrowing the family below the floors is a permanent red. */
.syn-picker { display: flex; gap: var(--syn-picker-gap, var(--space-2)); align-items: center; width: 100%; min-width: 0; }
.syn-picker > .syn-input-dx { flex: 1; min-width: 0; }
.syn-picker > .syn-pickerbtn { flex: 1; min-width: var(--syn-picker-pickerbtn-min-width, 8rem); }   /* QB80: the BOX floor (the trigger is an inline-size container — see the trigger law below) */

/* ---- THE EDITOR-TEXT LAW (QB76; Ken's punch PL-P3/P6 2026-08-27; the CONTROL ANATOMY LAW's text half) ----
   ALL picker/editor text — the committed value in the trigger, the armed helper text ("+ assign", "Add…",
   placeholders), the search box, the option rows — renders at the size the selection shows at ONCE
   COMMITTED in its destination. Mechanism: every canonical control's text reads ONE custom property,
   `--ctl-size`, whose fallback is the control's own resting rung (the form/modal seat, where no
   destination face sits beside it); a DESTINATION binds `--ctl-size` to its committed value's rung —
   the list grid cell (ListRenderer.razor.css, R5 12.5) and the EditableField (below, R6 12.5). A
   control never names a second size; a host never restyles a control — it names its rung. */
/* picker trigger + searchable popover (PersonPicker / OrgPicker; mockup MissionControl.jsx:496 / 1528) */
.syn-pickerbtn {
    display: flex; align-items: center; gap: var(--syn-pickerbtn-gap, 8px); width: 100%; text-align: left;
    padding: var(--syn-pickerbtn-padding, 7px 11px); border: var(--syn-pickerbtn-border, 1px solid var(--border-default)); border-radius: var(--syn-pickerbtn-border-radius, var(--shape-radius-control)); background: var(--syn-pickerbtn-background, var(--surface-plane));
    font-size: var(--ctl-size, 0.84375rem); font-family: inherit; color: var(--syn-pickerbtn-color, var(--text-ink)); cursor: pointer;
    transition: var(--syn-pickerbtn-transition, border-color var(--motion-duration-base), background var(--motion-duration-base));
}
.syn-pickerbtn:hover { background: var(--syn-pickerbtn-hover-background, var(--surface-hover)); }
/* QB82(c) (Ken's C2, the Forum picker's double highlight): ONE state owns the ground — an OPEN control never also
   wears the hover tint. The family: picker triggers · the select · the menu · the date trigger. */
.syn-pickerbtn.is-open:hover, .syn-enum.is-open:hover, .syn-menu-btn.is-open:hover, .syn-dtp.is-open:hover { background: var(--syn-pickerbtn-is-open-hover-background, var(--surface-plane)); }
.syn-pickerbtn.is-empty { color: var(--syn-pickerbtn-is-empty-color, var(--text-tertiary)); }
/* QB80 — THE TRIGGER LAW (Ken's live catch 2026-08-27: committed org names spilling past the trigger box):
   a picker TRIGGER renders its committed value on ONE LINE, truncated with a title — the POPUP is where full
   values live (QB76's floor + wrap law governs the popup; the trigger is the opposite species: fixed to its
   box, never wrapping, never spilling), and the box stays one row (UD28's row-stability posture). This
   RETIRES Q341 P6 / Q348's trigger-label floor-and-wrap (the 9rem floor was the spill: icon + floor + role
   chip + chevron exceeded a narrow column). Option ROWS keep Q341's wrap. Chips inside the trigger never
   wrap either — the label gives, the chrome stays whole. Every picker family member rides the one rule. */
.syn-pickerbtn-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-pickerbtn > .syn-chip { flex: none; white-space: nowrap; }
/* The trigger is its own inline-size container: below 240px of box there is no room for the label AND its chips
   (linked / free text / the role chip) — the chips FOLD (the popup row and the title carry what they said) and
   the label keeps the box. Containment strips the box's intrinsic width, so the BOX carries the readable minimum
   (8rem — the floor moved from the label to the box; an auto-sized host sizes to it, a fixed column beyond it
   fills) and a picker that is a flex item grows to its slot. */
.syn-pickerbtn { container-type: inline-size; min-width: var(--syn-pickerbtn-min-width, 8rem); }   /* the same floor on the bare button (the .syn-picker > rule above wins where it applies) */
@container (max-width: 239px) { .syn-pickerbtn > .syn-chip { display: none; } }
.syn-ef-slot > .syn-picker { flex: 1 1 auto; }
/* QB82(b): the group label inside the person picker's list ("On this TOPR" · "Directory") */
.syn-picker-group { font: var(--syn-picker-group-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-picker-group-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-picker-group-text-transform, var(--type-label-transform)); color: var(--syn-picker-group-color, var(--text-faint)); padding: var(--syn-picker-group-padding, 8px 12px 3px); }
.syn-picker-panel {
    display: flex; flex-direction: column; background: var(--syn-picker-panel-background, var(--surface-plane));
    border: var(--syn-picker-panel-border, 1px solid var(--border-default)); border-radius: var(--syn-picker-panel-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-picker-panel-box-shadow, var(--elevation-overlay));
    overflow: hidden; max-height: var(--syn-picker-panel-max-height, 300px);
}
.syn-picker-search {
    display: flex; align-items: center; gap: var(--syn-picker-search-gap, 7px); padding: var(--syn-picker-search-padding, 8px 11px); flex-shrink: 0;
    border-bottom: var(--syn-picker-search-border-bottom, 1px solid var(--border-default));
}
.syn-picker-searchinput {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: var(--ctl-size, 0.8125rem); font-family: inherit; color: var(--syn-picker-searchinput-color, var(--text-ink));
}
.syn-picker-list { overflow-y: auto; }
.syn-picker-row {
    display: flex; align-items: center; gap: var(--syn-picker-row-gap, 9px); width: 100%; text-align: left; padding: var(--syn-picker-row-padding, 8px 12px);
    border: none; border-bottom: var(--syn-picker-row-border-bottom, 1px solid var(--border-default)); background: transparent; cursor: pointer; font-family: inherit;
}
.syn-picker-row:last-child { border-bottom: none; }
.syn-picker-row:hover { background: var(--syn-picker-row-hover-background, var(--surface-hover)); }
.syn-picker-row.is-sel, .syn-picker-row.is-sel:hover { background: var(--syn-picker-row-is-sel-background, var(--accent-muted)); }
.syn-picker-rowtext { flex: 1; min-width: 0; }
.syn-picker-rowname { font-size: var(--ctl-size, 0.84375rem); font-weight: var(--syn-picker-rowname-font-weight, 500); color: var(--syn-picker-rowname-color, var(--text-ink)); overflow-wrap: break-word; }
/* Q368(b): the TOPR picker's row wears the assigned value's roles — the mono number seat (the ToprRef face) + the title (R4) */
.syn-picker-rowname.is-topr { display: flex; align-items: baseline; gap: var(--syn-picker-rowname-is-topr-gap, 8px); }
.syn-picker-rowtopr { font-family: var(--syn-picker-rowtopr-font-family, var(--type-family-mono)); font-size: var(--syn-picker-rowtopr-font-size, 0.75rem); font-weight: var(--syn-picker-rowtopr-font-weight, 600); white-space: nowrap; }
.syn-picker-rowtitle { font: var(--syn-picker-rowtitle-font, 600 0.8125rem/1.4 var(--type-family)); min-width: 0; }   /* QB65(b) (Ken 2026-08-26): the TOPR picker row wears the SAME roles the picked row wears on the page — this is `.syn-org-iftitle` verbatim (600 13/1.4); the mono ref seat above is `.syn-org-ifid .syn-ref` already; no picker-local sizes */
.syn-picker-rowname-flex { flex: 1; min-width: 0; }
.syn-picker-rowsub { font-size: var(--syn-picker-rowsub-font-size, 0.75rem); color: var(--syn-picker-rowsub-color, var(--text-tertiary)); overflow-wrap: break-word; }
.syn-picker-empty { padding: var(--syn-picker-empty-padding, 14px); font-size: var(--ctl-size, 0.8125rem); color: var(--syn-picker-empty-color, var(--text-tertiary)); }

.syn-address { display: flex; flex-direction: column; gap: var(--syn-address-gap, var(--space-2)); }
.syn-address-row { display: flex; gap: var(--syn-address-row-gap, var(--space-2)); }
.syn-address-state { max-width: var(--syn-address-state-max-width, 90px); }
.syn-address-zip { max-width: var(--syn-address-zip-max-width, 120px); }

/* ---- FilterChip (stable footprint — guardrail §4) -------------------------- */
.syn-filterchip {
    --fc: var(--accent-action);
    display: inline-flex;
    align-items: center;
    gap: var(--syn-filterchip-gap, 6px);
    padding: var(--syn-filterchip-padding, 5px 11px);
    border: none;
    border-radius: var(--syn-filterchip-border-radius, var(--shape-radius-pill));
    background: var(--syn-filterchip-background, var(--surface-inset));
    color: var(--syn-filterchip-color, var(--text-muted));
    font-size: var(--syn-filterchip-font-size, var(--text-xs));
    font-weight: var(--syn-filterchip-font-weight, var(--font-medium));
    cursor: pointer;
    transition: var(--syn-filterchip-transition, background var(--motion-duration-fast) var(--motion-easing), color var(--motion-duration-fast) var(--motion-easing));
}
.syn-filterchip:hover { background: var(--syn-filterchip-hover-background, var(--surface-hover)); }
.syn-filterchip-check { display: inline-flex; width: var(--syn-filterchip-check-width, 12px); justify-content: center; flex-shrink: 0; opacity: var(--syn-filterchip-check-opacity, 0); transition: var(--syn-filterchip-check-transition, opacity var(--motion-duration-fast) var(--motion-easing)); }
.syn-filterchip.is-active { background: var(--syn-filterchip-is-active-background, color-mix(in srgb, var(--fc) 12%, var(--mix-white))); color: var(--syn-filterchip-is-active-color, var(--fc)); }
.syn-filterchip.is-active .syn-filterchip-check { opacity: var(--syn-filterchip-is-active-filterchip-check-opacity, 1); }
.syn-filterchip-count { font-size: var(--syn-filterchip-count-font-size, 11px); font-weight: var(--syn-filterchip-count-font-weight, var(--font-semibold)); padding: var(--syn-filterchip-count-padding, 0 6px); border-radius: var(--syn-filterchip-count-border-radius, var(--shape-radius-pill)); background: var(--syn-filterchip-count-background, var(--surface-hover)); color: var(--syn-filterchip-count-color, var(--text-tertiary)); font-variant-numeric: var(--syn-filterchip-count-font-variant-numeric, tabular-nums); }
.syn-filterchip.is-active .syn-filterchip-count { background: var(--syn-filterchip-is-active-filterchip-count-background, color-mix(in srgb, var(--fc) 20%, var(--mix-white))); color: var(--syn-filterchip-is-active-filterchip-count-color, var(--fc)); }

/* ---- MarkdownEditor + rendered markdown (UI_SPEC §3, .syn-md) -------------- */
/* Q342(c): prose = reading — the markdown body and its headings ride the rem ramp. */
.syn-md { font-size: var(--syn-md-font-size, var(--read-sm)); line-height: var(--syn-md-line-height, var(--leading-normal)); color: var(--syn-md-color, var(--text-ink)); }
.syn-md > :first-child { margin-top: 0; }
.syn-md > :last-child { margin-bottom: 0; }
.syn-md h1 { font: var(--syn-md-h1-font, var(--type-t1)); margin: var(--syn-md-h1-margin, 0.7em 0 0.3em); }        /* UD24: markdown prose binds T1's rungs (h1 = section 20, h2 = file 16); at rest DocumentFace's relative cap out-ranks this base by one class (UD23) */
.syn-md h2 { font: var(--syn-md-h2-font, var(--type-t1-file)); margin: var(--syn-md-h2-margin, 0.7em 0 0.3em); }
.syn-md h3 { font-size: var(--syn-md-h3-font-size, var(--read-base)); font-weight: var(--syn-md-h3-font-weight, var(--font-semibold)); margin: var(--syn-md-h3-margin, 0.7em 0 0.3em); }
.syn-md p { margin: var(--syn-md-p-margin, 0 0 0.6em); }
/* Self-drawn list markers via ::before. Milkdown is headless (renders no marker, expecting a theme), and native
   list-style does not take in the editor context — so draw bullets/numbers ourselves for BOTH the editor and the
   saved view, with list-style:none to avoid any double marker. Pseudo-elements aren't editable, so they don't
   disturb the cursor/selection in the contentEditable. */
.syn-md ul, .syn-md ol { margin: var(--syn-md-ul-margin, 0 0 0.6em); padding-left: var(--syn-md-ul-padding-left, 1.5em); list-style: none; }
.syn-md li { margin: var(--syn-md-li-margin, 0.15em 0); position: relative; }
.syn-md li > p { margin: 0; } /* edit mode: Milkdown wraps each list item's text in a <p> */
.syn-md ul > li::before { content: "•"; position: absolute; left: var(--syn-md-ul-li-before-left, -1.1em); color: var(--syn-md-ul-li-before-color, var(--text-muted)); }
.syn-md ul ul > li::before { content: "◦"; }
.syn-md ul ul ul > li::before { content: "▪"; }
.syn-md ol { counter-reset: synol; }
.syn-md ol > li { counter-increment: synol; }
.syn-md ol > li::before { content: counter(synol) "."; position: absolute; left: var(--syn-md-ol-li-before-left, -1.5em); width: var(--syn-md-ol-li-before-width, 1.2em); text-align: right; color: var(--syn-md-ol-li-before-color, var(--text-muted)); }
.syn-md a { color: var(--syn-md-a-color, var(--accent-action)); }
.syn-md code { font-family: var(--syn-md-code-font-family, var(--type-family-mono)); font-size: var(--syn-md-code-font-size, 0.92em); background: var(--syn-md-code-background, var(--surface-inset)); padding: var(--syn-md-code-padding, 1px 4px); border-radius: var(--syn-md-code-border-radius, var(--radius-sm)); }
.syn-md pre { background: var(--syn-md-pre-background, var(--surface-inset)); padding: var(--syn-md-pre-padding, var(--space-3)); border-radius: var(--syn-md-pre-border-radius, var(--radius-sm)); overflow: auto; }
.syn-md pre code { background: none; padding: 0; }
.syn-md blockquote { margin: var(--syn-md-blockquote-margin, 0 0 0.6em); padding-left: var(--syn-md-blockquote-padding-left, var(--space-3)); border-left: var(--syn-md-blockquote-border-left, 2px solid var(--border-default)); color: var(--syn-md-blockquote-color, var(--text-muted)); }
.syn-md table { border-collapse: collapse; margin: var(--syn-md-table-margin, 0 0 0.6em); font-size: var(--syn-md-table-font-size, 0.95em); }
.syn-md th, .syn-md td { border: var(--syn-md-th-border, 1px solid var(--border-default)); padding: var(--syn-md-th-padding, 3px 8px); text-align: left; }
.syn-md del { color: var(--syn-md-del-color, var(--text-tertiary)); }
/* Q342(d) VACANCY R6/P1: the prose seat's vacancy word renders in the ruled DISABLED register (reading size). */
.syn-md-empty { font-size: var(--syn-md-empty-font-size, var(--read-sm)); color: var(--syn-md-empty-color, var(--text-faint)); margin: 0; }

/* MarkdownEditor edit chrome — toolbar + editor read as one connected unit (MissionControl.jsx:600-623):
   a rounded-top toolbar on bg-secondary sits flush (-1px) over an accent-bordered, rounded-bottom editor that
   carries a focus ring the whole time it is open. (View mode is the bare `.syn-md` block — no chrome.)
   QC23: the toolbar is sticky — in any scrolling host (modal body or window) it pins to the top of the
   scrollport while the content scrolls; inert where nothing scrolls. Opaque ground; z above editor content. */
/* UD12 (Relay 33 §10, THE ONE IN-PLACE EDITOR ANATOMY): the armed PLANE is one --border-emphasis frame —
   the frame IS the focus chrome (no inner ring ever) — holding the sticky toolbar at its top and the commit
   row at its bottom; both ride --bg-secondary behind a --border-row seam. No overflow clip on the plane (sticky
   needs the scrollport above it); the bars carry their own inner radii so the frame's corners stay clean. */
.syn-mdplane { border: var(--syn-mdplane-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-mdplane-border-radius, var(--shape-radius-control)); background: var(--syn-mdplane-background, var(--surface-plane)); }
.syn-mdtoolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--syn-mdtoolbar-gap, 2px);
    padding: var(--syn-mdtoolbar-padding, 6px 10px); position: sticky; top: 0; z-index: 5;
    border-bottom: var(--syn-mdtoolbar-border-bottom, 1px solid var(--border-hairline));
    border-radius: var(--syn-mdtoolbar-border-radius, var(--radius-nav) var(--radius-nav) 0 0);
    background: var(--syn-mdtoolbar-background, var(--bg-secondary));
}
.syn-mdcommit {
    display: flex; align-items: center; gap: var(--syn-mdcommit-gap, 10px);
    padding: var(--syn-mdcommit-padding, 8px 14px); position: sticky; bottom: 0; z-index: 5;
    border-top: var(--syn-mdcommit-border-top, 1px solid var(--border-hairline));
    border-radius: var(--syn-mdcommit-border-radius, 0 0 var(--radius-nav) var(--radius-nav));
    background: var(--syn-mdcommit-background, var(--bg-secondary));
}
.syn-mdcommit > .syn-actrow { margin-left: auto; }
.syn-mdcommit-words { font: var(--syn-mdcommit-words-font, 400 12px var(--type-family)); color: var(--syn-mdcommit-words-color, var(--text-muted)); }
.syn-mdtoolbar button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--syn-mdtoolbar-button-padding, 6px); border: none; background: transparent;
    border-radius: var(--syn-mdtoolbar-button-border-radius, var(--radius-sm)); color: var(--syn-mdtoolbar-button-color, var(--text-muted)); cursor: pointer;
    transition: var(--syn-mdtoolbar-button-transition, background var(--motion-duration-fast), color var(--motion-duration-fast));
}
.syn-mdtoolbar button:hover { background: var(--syn-mdtoolbar-button-hover-background, var(--surface-hover)); color: var(--syn-mdtoolbar-button-hover-color, var(--text-ink)); }
.syn-mdtoolbar-sep { width: var(--syn-mdtoolbar-sep-width, 1px); height: var(--syn-mdtoolbar-sep-height, 18px); align-self: center; margin: var(--syn-mdtoolbar-sep-margin, 0 3px); background: var(--syn-mdtoolbar-sep-background, var(--border-default)); flex: 0 0 auto; }
/* QC25 (relay-23 item 7.3): Delete table is the Table group's one quiet-red act; a table with
   content swaps in the inline confirm strip (red commit LEFT — the act-order species). */
.syn-mdtoolbar button.syn-mdtoolbar-danger { color: var(--syn-mdtoolbar-button-mdtoolbar-danger-color, var(--state-attention-text)); }
.syn-mdtoolbar button.syn-mdtoolbar-danger:hover { background: var(--syn-mdtoolbar-button-mdtoolbar-danger-hover-background, var(--surface-hover)); color: var(--syn-mdtoolbar-button-mdtoolbar-danger-hover-color, var(--state-attention-text)); }
.syn-mdtoolbar-confirm {
    flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; gap: var(--syn-mdtoolbar-confirm-gap, 12px);
    padding: var(--syn-mdtoolbar-confirm-padding, 4px 6px 2px); margin-top: var(--syn-mdtoolbar-confirm-margin-top, 2px); border-top: var(--syn-mdtoolbar-confirm-border-top, 1px solid var(--border-default));
}
.syn-mdtoolbar-confirmwords { font: var(--syn-mdtoolbar-confirmwords-font, 400 12px var(--type-family)); color: var(--syn-mdtoolbar-confirmwords-color, var(--text-muted)); }
/* Q342(a) (BUTTON-REGISTERS Q2/X7): the confirm's two acts ride the canonical seats (DestructiveCommit ·
   QuietText) — the bespoke outline-red commit and quiet cancel classes died here. */

/* The editing surface wears NO chrome of its own — the plane's frame is the focus chrome (UD12; the accent
   ring + accent border died here). */
.syn-mdedit {
    border: 0; border-radius: 0; box-shadow: none;
    padding: var(--syn-mdedit-padding, 12px 14px); min-height: var(--syn-mdedit-min-height, 120px); line-height: var(--syn-mdedit-line-height, 1.65);
}
/* Milkdown mounts .milkdown > .ProseMirror inside; strip its outline + reset edge margins so it reads as the field. */
.syn-mdedit .milkdown, .syn-mdedit .ProseMirror { outline: none; }
.syn-mdedit .ProseMirror { white-space: pre-wrap; word-wrap: break-word; min-height: var(--syn-mdedit-prosemirror-min-height, 96px); }
/* Create-modal prose fields are a 2-row summary in the mockups (rows=2, Experience.jsx:1550) —
   the page-size 96px floor reads as a wall there. */
.syn-modal-body .syn-mdedit .ProseMirror { min-height: var(--syn-modal-body-mdedit-prosemirror-min-height, 56px); }
.syn-mdedit .ProseMirror > :first-child { margin-top: 0; }
.syn-mdedit .ProseMirror > :last-child { margin-bottom: 0; }
/* Placeholder on a truly-empty editor: the ProseMirror decoration tags the lone empty paragraph with
   .syn-md-ph + data-ph; float + height:0 overlays the text without nudging the cursor. */
.syn-mdedit .ProseMirror .syn-md-ph::before {
    content: attr(data-ph); color: var(--syn-mdedit-prosemirror-md-ph-before-color, var(--text-tertiary));
    float: left; height: 0; pointer-events: none;
}

/* ---- Directory + detail page chrome (UI_SPEC §5.2–5.4) --------------------- */
.syn-page { display: flex; flex-direction: column; gap: var(--syn-page-gap, var(--space-4)); padding: var(--syn-page-padding, var(--space-6) var(--space-8)); max-width: var(--syn-page-max-width, 1320px); }
.syn-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--syn-page-head-gap, var(--space-4)); }
.syn-page-head h1 { font-size: var(--syn-page-head-h1-font-size, var(--read-xl)); }   /* Q342(c): page titles + subtitles = reading */
.syn-page-sub { margin: var(--syn-page-sub-margin, var(--space-1) 0 0); color: var(--syn-page-sub-color, var(--text-muted)); font-size: var(--syn-page-sub-font-size, var(--read-sm)); max-width: var(--syn-page-sub-max-width, 74ch); }
.syn-toolbar { display: flex; align-items: center; gap: var(--syn-toolbar-gap, var(--space-3)); flex-wrap: wrap; }
.syn-search {
    display: flex; align-items: center; gap: var(--syn-search-gap, var(--space-2));
    flex: 1 1 240px; max-width: var(--syn-search-max-width, 360px);
    padding: var(--syn-search-padding, var(--space-2) var(--space-3));
    border: var(--syn-search-border, 1px solid var(--border-default)); border-radius: var(--syn-search-border-radius, var(--shape-radius-control));
    background: var(--syn-search-background, var(--surface-plane)); color: var(--syn-search-color, var(--text-tertiary));
}
.syn-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--syn-search-input-color, var(--text-ink)); font-family: var(--syn-search-input-font-family, var(--type-family)); font-size: var(--syn-search-input-font-size, var(--read-sm)); }   /* Q342(c): input text = reading */
.syn-search-input::placeholder { color: var(--syn-search-input-placeholder-color, var(--text-tertiary)); }
.syn-count { color: var(--syn-count-color, var(--text-tertiary)); font-size: var(--syn-count-font-size, var(--text-xs)); font-variant-numeric: var(--syn-count-font-variant-numeric, tabular-nums); margin-left: auto; }
.syn-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--syn-filterbar-gap, var(--space-2)); }
.syn-filterbar-label { color: var(--syn-filterbar-label-color, var(--text-tertiary)); font-size: var(--syn-filterbar-label-font-size, var(--text-xs)); text-transform: var(--syn-filterbar-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-filterbar-label-letter-spacing, var(--type-label-tracking)); margin-right: var(--syn-filterbar-label-margin-right, var(--space-1)); }
.syn-clear { display: inline-flex; align-items: center; gap: var(--syn-clear-gap, var(--space-1)); border: none; background: none; cursor: pointer; color: var(--syn-clear-color, var(--text-muted)); font-size: var(--syn-clear-font-size, var(--text-xs)); }
.syn-clear:hover { color: var(--syn-clear-hover-color, var(--text-ink)); }
.syn-grid { font-size: var(--syn-grid-font-size, var(--text-sm)); }
.syn-cell-name { display: flex; align-items: center; gap: var(--syn-cell-name-gap, var(--space-2)); min-width: 0; }
.syn-cell-chips { display: inline-flex; flex-wrap: wrap; gap: var(--syn-cell-chips-gap, var(--space-1)); }
.syn-muted { color: var(--syn-muted-color, var(--text-tertiary)); font-size: var(--syn-muted-font-size, var(--read-xs)); }   /* Q342(c): a muted VALUE register = reading */
.syn-nowrap { white-space: nowrap; }
.syn-num { font-variant-numeric: var(--syn-num-font-variant-numeric, tabular-nums); }
/* number fields take the tighter 6px corner the mockup specifies, vs .syn-input's 8px */
.syn-input.syn-num { border-radius: var(--syn-input-num-border-radius, var(--radius-sm)); }
/* no native number spinners — they don't match the field system's flat chrome (Chromium pseudo-elements + Firefox) */
.syn-num::-webkit-outer-spin-button, .syn-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.syn-num { -moz-appearance: textfield; }
.syn-empty { padding: var(--syn-empty-padding, var(--space-6)); text-align: center; color: var(--syn-empty-color, var(--text-tertiary)); font-size: var(--syn-empty-font-size, var(--read-sm)); }   /* Q342(c): empty copy = reading */

/* Detail / profile two-column layout. */
.syn-detail { display: flex; flex-direction: column; gap: var(--syn-detail-gap, var(--space-4)); padding: var(--syn-detail-padding, var(--space-6) var(--space-8)); max-width: var(--syn-detail-max-width, 1320px); }
.syn-back { display: inline-flex; align-items: center; gap: var(--syn-back-gap, var(--space-1)); color: var(--syn-back-color, var(--text-muted)); font-size: var(--syn-back-font-size, var(--text-sm)); background: none; border: none; cursor: pointer; padding: 0; }
.syn-back:hover { color: var(--syn-back-hover-color, var(--text-ink)); }
.syn-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--syn-detail-head-gap, var(--space-4)); }
.syn-detail-head-main { display: flex; align-items: flex-start; gap: var(--syn-detail-head-main-gap, var(--space-4)); min-width: 0; }
.syn-detail-title { font-size: var(--syn-detail-title-font-size, var(--read-xl)); margin: 0; }   /* Q342(c): reading */
.syn-detail-subtitle { color: var(--syn-detail-subtitle-color, var(--text-muted)); font-size: var(--syn-detail-subtitle-font-size, var(--read-sm)); margin: var(--syn-detail-subtitle-margin, var(--space-1) 0 0); }
.syn-detail-chips { display: inline-flex; flex-wrap: wrap; gap: var(--syn-detail-chips-gap, var(--space-2)); margin-top: var(--syn-detail-chips-margin-top, var(--space-2)); align-items: center; }
.syn-detail-actions { display: flex; gap: var(--syn-detail-actions-gap, var(--space-2)); flex-shrink: 0; }
.syn-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--syn-cols-gap, var(--space-4)); align-items: start; }
.syn-col { display: flex; flex-direction: column; gap: var(--syn-col-gap, var(--space-4)); min-width: 0; }
@media (max-width: 880px) { .syn-cols { grid-template-columns: 1fr; } }
.syn-stack { display: flex; flex-direction: column; gap: var(--syn-stack-gap, var(--space-3)); }
.syn-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-row-between-gap, var(--space-3)); }
.syn-section-count { color: var(--syn-section-count-color, var(--text-tertiary)); font-size: var(--syn-section-count-font-size, var(--text-xs)); font-weight: var(--syn-section-count-font-weight, var(--font-regular)); margin-left: var(--syn-section-count-margin-left, var(--space-2)); font-variant-numeric: var(--syn-section-count-font-variant-numeric, tabular-nums); }
.syn-pills { display: inline-flex; gap: var(--syn-pills-gap, var(--space-1)); }
.syn-pilltab { padding: var(--syn-pilltab-padding, 3px var(--space-3)); border-radius: var(--syn-pilltab-border-radius, var(--shape-radius-pill)); border: var(--syn-pilltab-border, 1px solid var(--border-default)); background: var(--syn-pilltab-background, var(--surface-plane)); color: var(--syn-pilltab-color, var(--text-muted)); font-size: var(--syn-pilltab-font-size, var(--text-xs)); font-weight: var(--syn-pilltab-font-weight, var(--font-medium)); cursor: pointer; }
.syn-pilltab.is-active { background: var(--syn-pilltab-is-active-background, var(--surface-inset)); color: var(--syn-pilltab-is-active-color, var(--text-ink)); border-color: var(--syn-pilltab-is-active-border-color, var(--border-emphasis)); }
.syn-pilltab-n { margin-left: var(--syn-pilltab-n-margin-left, 5px); font-variant-numeric: var(--syn-pilltab-n-font-variant-numeric, tabular-nums); color: var(--syn-pilltab-n-color, var(--text-tertiary)); }
.syn-pilltab.is-active .syn-pilltab-n { color: var(--syn-pilltab-is-active-pilltab-n-color, var(--text-muted)); }
/* Borderless count-pill tabs rendered inside a SectionCard title (mockup Tasks Tab:1305). Distinct from the
   bordered .syn-pilltab used in section bodies. */
.syn-titletabs { display: inline-flex; gap: var(--syn-titletabs-gap, 2px); }
.syn-titletab { display: inline-flex; align-items: center; gap: var(--syn-titletab-gap, 6px); padding: var(--syn-titletab-padding, 3px 10px); border: none; border-radius: var(--syn-titletab-border-radius, var(--shape-radius-pill)); background: transparent; color: var(--syn-titletab-color, var(--text-tertiary)); font-size: var(--syn-titletab-font-size, var(--text-xs)); font-weight: var(--syn-titletab-font-weight, var(--font-medium)); cursor: pointer; }
.syn-titletab.is-active { background: var(--syn-titletab-is-active-background, var(--surface-inset)); color: var(--syn-titletab-is-active-color, var(--text-ink)); font-weight: var(--syn-titletab-is-active-font-weight, var(--font-semibold)); }
.syn-titletab-n { font-variant-numeric: var(--syn-titletab-n-font-variant-numeric, tabular-nums); color: var(--syn-titletab-n-color, var(--text-tertiary)); }
.syn-titletab.is-active .syn-titletab-n { color: var(--syn-titletab-is-active-titletab-n-color, var(--text-muted)); }

/* ---- Modal / inline form layout -------------------------------------------- */
.syn-form-full { grid-column: 1 / -1; }
.syn-check { display: flex; align-items: flex-start; gap: var(--syn-check-gap, var(--space-2)); font-size: var(--syn-check-font-size, var(--text-sm)); color: var(--syn-check-color, var(--text-ink)); cursor: pointer; }
.syn-check input { margin-top: var(--syn-check-input-margin-top, 3px); }
.syn-check-hint { color: var(--syn-check-hint-color, var(--text-tertiary)); font-size: var(--syn-check-hint-font-size, var(--text-xs)); }
/* QB46 (text-scale R6): helper sentences are READING class — rem, they scale with the setting. */
.syn-hint { color: var(--syn-hint-color, var(--text-tertiary)); font-size: var(--syn-hint-font-size, 0.75rem); margin: 0; }
.syn-req { color: var(--syn-req-color, var(--text-muted)); }   /* AF-2034 (Harbor's Field; [AF-1043]): at rest *Required* is a word with no tone — Attention only after *Next* or at signature */

/* ---- Profile sections (UI_SPEC §5.2) -------------------------------------- */
.syn-name-edit { display: flex; gap: var(--syn-name-edit-gap, var(--space-2)); margin-bottom: var(--syn-name-edit-margin-bottom, var(--space-1)); }
.syn-name-edit .syn-input { max-width: var(--syn-name-edit-input-max-width, 180px); }
.syn-listrow { display: flex; align-items: center; gap: var(--syn-listrow-gap, var(--space-2)); padding: var(--syn-listrow-padding, var(--space-2) 0); border-bottom: var(--syn-listrow-border-bottom, 1px solid var(--border-default)); }
.syn-listrow:last-child { border-bottom: none; }
.syn-listrow-main { display: flex; flex: 1; align-items: center; gap: var(--syn-listrow-main-gap, var(--space-2)); min-width: 0; }
.syn-listrow-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--syn-listrow-end-gap, var(--space-2)); }
.syn-listrow-roles { display: inline-flex; flex-wrap: wrap; gap: var(--syn-listrow-roles-gap, var(--space-1)); }
.syn-overdue { color: var(--syn-overdue-color, var(--state-attention)); }
.syn-section-action { display: inline-flex; align-items: center; gap: var(--syn-section-action-gap, var(--space-2)); }

/* Out-of-office + résumé sections. */
.syn-composer { display: flex; flex-wrap: wrap; gap: var(--syn-composer-gap, var(--space-2)); align-items: center; margin-top: var(--syn-composer-margin-top, var(--space-3)); }
.syn-composer .syn-input-dx { min-width: var(--syn-composer-input-dx-min-width, 150px); }
.syn-composer .syn-input { width: auto; flex: 1 1 160px; }
.syn-resume-row { display: flex; align-items: center; gap: var(--syn-resume-row-gap, var(--space-2)); width: 100%; padding: var(--syn-resume-row-padding, var(--space-2) 0); border: none; border-bottom: var(--syn-resume-row-border-bottom, 1px solid var(--border-default)); background: none; cursor: pointer; text-align: left; }
.syn-resume-row:last-child { border-bottom: none; }
.syn-resume-row:hover { background: var(--syn-resume-row-hover-background, var(--surface-hover)); }
.syn-resume-main { display: flex; flex-direction: column; min-width: 0; }
.syn-resume-label { color: var(--syn-resume-label-color, var(--accent-action)); font-size: var(--syn-resume-label-font-size, var(--text-sm)); }
.syn-resume-date { color: var(--syn-resume-date-color, var(--text-tertiary)); font-size: var(--syn-resume-date-font-size, var(--text-xs)); }
.syn-resume-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--syn-resume-end-gap, var(--space-2)); }
.syn-seg-head { font-size: var(--syn-seg-head-font-size, var(--text-xs)); text-transform: var(--syn-seg-head-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-seg-head-letter-spacing, var(--type-label-tracking)); color: var(--syn-seg-head-color, var(--text-tertiary)); margin: var(--syn-seg-head-margin, var(--space-4) 0 var(--space-2)); font-weight: var(--syn-seg-head-font-weight, var(--font-semibold)); }
.syn-seg-head:first-child { margin-top: 0; }
.syn-employer { border-left: var(--syn-employer-border-left, 2px solid var(--border-default)); padding-left: var(--syn-employer-padding-left, 14px); margin-bottom: var(--syn-employer-margin-bottom, var(--space-4)); }
.syn-employer-head { display: flex; justify-content: space-between; gap: var(--syn-employer-head-gap, var(--space-2)); font-weight: var(--syn-employer-head-font-weight, var(--font-medium)); font-size: var(--syn-employer-head-font-size, var(--text-sm)); }
.syn-position { margin-top: var(--syn-position-margin-top, var(--space-2)); margin-left: var(--syn-position-margin-left, 2px); }
.syn-position-head { display: flex; justify-content: space-between; gap: var(--syn-position-head-gap, var(--space-2)); font-size: var(--syn-position-head-font-size, var(--text-sm)); }
.syn-pos-range, .syn-emp-range { color: var(--syn-pos-range-color, var(--text-tertiary)); font-size: var(--syn-pos-range-font-size, var(--text-xs)); white-space: nowrap; }

/* ---- FC vetting strip — Q132 (CD 1b): the four-position INK RUN. Mono I·II·III·IV, attained
   700 ink / missing faint; shape holds position (fixed slots); the green boxes are dead. The
   edit variant stays togglable — dotted-underline letters. */
.syn-fcstrip { display: inline-flex; gap: var(--syn-fcstrip-gap, 8px); }
.syn-fc {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--syn-fc-min-width, 18px);
    border: none; background: transparent; padding: 0;
    font-family: var(--syn-fc-font-family, var(--type-family-mono)); font-size: var(--syn-fc-font-size, var(--text-xs));
    font-weight: var(--syn-fc-font-weight, 400); color: var(--syn-fc-color, var(--text-faint));
}
button.syn-fc { cursor: pointer; text-decoration: var(--kit-button-syn-fc-text-decoration, underline dotted var(--border-strong)); text-underline-offset: var(--kit-button-syn-fc-text-underline-offset, 3px); }
.syn-fc.is-on { font-weight: var(--syn-fc-is-on-font-weight, 700); color: var(--syn-fc-is-on-color, var(--text-ink)); }
.syn-fcstrip.is-compact { gap: var(--syn-fcstrip-is-compact-gap, 6px); }
.syn-fcstrip.is-compact .syn-fc { min-width: var(--syn-fcstrip-is-compact-fc-min-width, 14px); font-size: var(--syn-fcstrip-is-compact-fc-font-size, 11px); }

/* Role toggle buttons (create-org modal, package modal). */
.syn-roletoggles { display: flex; flex-wrap: wrap; gap: var(--syn-roletoggles-gap, var(--space-2)); }
.syn-roletoggle {
    padding: var(--syn-roletoggle-padding, var(--space-1) var(--space-3)); border: var(--syn-roletoggle-border, 1px solid var(--border-default)); border-radius: var(--syn-roletoggle-border-radius, var(--shape-radius-pill));
    background: var(--syn-roletoggle-background, var(--surface-plane)); color: var(--syn-roletoggle-color, var(--text-muted)); font-size: var(--syn-roletoggle-font-size, var(--text-sm)); cursor: pointer;
}
.syn-roletoggle.is-on { background: var(--syn-roletoggle-is-on-background, var(--accent-muted)); border-color: var(--syn-roletoggle-is-on-border-color, var(--accent-action)); color: var(--syn-roletoggle-is-on-color, var(--accent-action)); }
.syn-subtoggles { display: flex; gap: var(--syn-subtoggles-gap, var(--space-2)); margin-top: var(--syn-subtoggles-margin-top, var(--space-2)); padding-left: var(--syn-subtoggles-padding-left, var(--space-3)); }

/* ---- Organization profile (UI_SPEC §5.3) ---------------------------------- */
.syn-detail-title-row { display: flex; align-items: center; gap: var(--syn-detail-title-row-gap, var(--space-3)); flex-wrap: wrap; }
.syn-title-input { max-width: var(--syn-title-input-max-width, 320px); }
.syn-org-summary { font-size: var(--syn-org-summary-font-size, var(--text-base)); line-height: var(--syn-org-summary-line-height, var(--leading-normal)); max-width: var(--syn-org-summary-max-width, 820px); }
.syn-cols-wide-left { grid-template-columns: var(--syn-cols-wide-left-grid-template-columns, minmax(0, 1fr) 352px); }   /* Q132 (2c) */
.syn-stack-tight { display: flex; flex-direction: column; }
.syn-inline-actions { display: inline-flex; gap: var(--syn-inline-actions-gap, var(--space-2)); }
.syn-subfield { margin-top: var(--syn-subfield-margin-top, var(--space-3)); display: flex; flex-direction: column; gap: var(--syn-subfield-gap, var(--space-1)); }
.syn-sub-link { display: inline-flex; align-items: center; gap: var(--syn-sub-link-gap, var(--space-1)); color: var(--syn-sub-link-color, var(--accent-action)); font-size: var(--syn-sub-link-font-size, var(--text-xs)); margin-top: var(--syn-sub-link-margin-top, 2px); }
.syn-sub-link:hover { color: var(--syn-sub-link-hover-color, var(--accent-action-hover)); }

/* Logo plate in the Details box. No border; image is aspect-preserving, monogram is the fallback. */
.syn-logo-plate { display: flex; align-items: center; justify-content: center; height: var(--syn-logo-plate-height, 92px); width: 100%; padding: var(--syn-logo-plate-padding, var(--space-2) var(--space-3)); background: var(--syn-logo-plate-background, var(--surface-plane)); border-radius: var(--syn-logo-plate-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-logo-plate img { max-height: 100%; max-width: 100%; object-fit: contain; }
.syn-logo-mono { width: var(--syn-logo-mono-width, 44px); height: var(--syn-logo-mono-height, 44px); border-radius: var(--syn-logo-mono-border-radius, var(--shape-radius-control)); display: inline-flex; align-items: center; justify-content: center; font-size: var(--syn-logo-mono-font-size, var(--text-md)); font-weight: var(--syn-logo-mono-font-weight, var(--font-semibold)); }
.syn-addr span { display: block; line-height: var(--syn-addr-span-line-height, var(--leading-normal)); }

/* Locked org field (POC create-new reuse of the person modal). */
.syn-locked-field { display: inline-flex; align-items: center; gap: var(--syn-locked-field-gap, var(--space-2)); width: 100%; padding: var(--syn-locked-field-padding, var(--space-2) var(--space-3)); background: var(--syn-locked-field-background, var(--bg-secondary)); border: var(--syn-locked-field-border, 1px solid var(--border-default)); border-radius: var(--syn-locked-field-border-radius, var(--radius-sm)); color: var(--syn-locked-field-color, var(--text-muted)); font-size: var(--syn-locked-field-font-size, var(--text-sm)); }
.syn-locked-tag { color: var(--syn-locked-tag-color, var(--text-tertiary)); font-size: var(--syn-locked-tag-font-size, var(--text-xs)); }

/* POC picker modal. */
.syn-search-block { width: 100%; margin: var(--syn-search-block-margin, var(--space-3) 0 var(--space-2)); }
.syn-pick-list { display: flex; flex-direction: column; max-height: var(--syn-pick-list-max-height, 260px); overflow-y: auto; }
.syn-pick-row { display: flex; align-items: center; gap: var(--syn-pick-row-gap, var(--space-2)); width: 100%; padding: var(--syn-pick-row-padding, var(--space-2)); border: none; border-radius: var(--syn-pick-row-border-radius, var(--radius-sm)); background: none; cursor: pointer; text-align: left; }
.syn-pick-row:hover { background: var(--syn-pick-row-hover-background, var(--surface-hover)); }
.syn-pick-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.syn-pick-name { font-size: var(--syn-pick-name-font-size, var(--text-sm)); font-weight: var(--syn-pick-name-font-weight, var(--font-medium)); color: var(--syn-pick-name-color, var(--text-ink)); }
.syn-pick-sub { font-size: var(--syn-pick-sub-font-size, var(--text-xs)); color: var(--syn-pick-sub-color, var(--text-tertiary)); overflow-wrap: break-word; }   /* Q341 P7: wraps */
.syn-pick-create { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-pick-create-gap, var(--space-3)); margin-top: var(--syn-pick-create-margin-top, var(--space-3)); padding: var(--syn-pick-create-padding, var(--space-3)); border-top: var(--syn-pick-create-border-top, 1px solid var(--border-default)); background: var(--syn-pick-create-background, var(--bg-secondary)); border-radius: var(--syn-pick-create-border-radius, var(--radius-sm)); font-size: var(--syn-pick-create-font-size, var(--text-sm)); color: var(--syn-pick-create-color, var(--text-muted)); }

/* Organization Package role list. */
.syn-rolelist { display: flex; flex-direction: column; gap: var(--syn-rolelist-gap, var(--space-1)); margin-top: var(--syn-rolelist-margin-top, var(--space-3)); }
.syn-rolecheck { --rc: var(--accent-action); display: flex; align-items: center; gap: var(--syn-rolecheck-gap, 10px); padding: var(--syn-rolecheck-padding, 9px 10px); border-radius: var(--syn-rolecheck-border-radius, var(--shape-radius-control)); cursor: pointer; font-size: var(--syn-rolecheck-font-size, var(--text-sm)); font-weight: var(--syn-rolecheck-font-weight, var(--font-medium)); }
.syn-rolecheck.is-on { background: var(--syn-rolecheck-is-on-background, color-mix(in srgb, var(--rc) 8%, var(--mix-white))); }
.syn-rolebox { width: var(--syn-rolebox-width, 16px); height: var(--syn-rolebox-height, 16px); border-radius: var(--syn-rolebox-border-radius, var(--radius-xs-plus)); flex-shrink: 0; border: var(--syn-rolebox-border, 1px solid var(--border-emphasis)); background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.syn-rolebox.is-on { border-color: var(--syn-rolebox-is-on-border-color, var(--rc)); background: var(--syn-rolebox-is-on-background, var(--rc)); }
.syn-genrow { display: inline-flex; align-items: center; gap: var(--syn-genrow-gap, 7px); cursor: pointer; font-size: var(--syn-genrow-font-size, var(--text-sm)); }
.syn-genbox { width: var(--syn-genbox-width, 15px); height: var(--syn-genbox-height, 15px); border-radius: var(--syn-genbox-border-radius, var(--radius-xs)); flex-shrink: 0; border: var(--syn-genbox-border, 1px solid var(--border-emphasis)); background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.syn-genbox.is-on { border-color: var(--syn-genbox-is-on-border-color, var(--state-success)); background: var(--syn-genbox-is-on-background, var(--state-success)); }
.syn-rolesub { margin: var(--syn-rolesub-margin, 2px 0 var(--space-2) var(--space-6)); padding: var(--syn-rolesub-padding, var(--space-2) var(--space-3)); border-left: var(--syn-rolesub-border-left, 2px solid var(--border-default)); display: flex; flex-direction: column; gap: var(--syn-rolesub-gap, var(--space-2)); }
.syn-gentoggles { display: flex; gap: var(--syn-gentoggles-gap, var(--space-4)); }

/* Q348(b) (HB-UD8-3): the pre-27c "Experience directory / Recency timeline" legacy block died here —
   no razor consumer remained, and its unscoped .syn-tl-* rules leaked into the QB4b/UD8 scoped board
   (the 210px axis margin slid every year label off its gridline since QB4b). The board's rules live
   in RecencyTimeline.razor.css alone. */

/* ---- Experience record (UI_SPEC §5.4) ------------------------------------- */
.syn-exp-cols { display: grid; grid-template-columns: var(--syn-exp-cols-grid-template-columns, minmax(0, 1fr) 352px); gap: var(--syn-exp-cols-gap, var(--space-5)); align-items: start; }   /* Q132 (2d) */
@media (max-width: 880px) { .syn-exp-cols { grid-template-columns: 1fr; } }
.syn-exp-subline { display: inline-flex; align-items: center; gap: var(--syn-exp-subline-gap, var(--space-2)); flex-wrap: wrap; }
.syn-mono { font-family: var(--syn-mono-font-family, var(--type-family-mono)); font-size: var(--syn-mono-font-size, var(--text-xs)); }
.syn-subnote { font-size: var(--syn-subnote-font-size, var(--text-xs)); color: var(--syn-subnote-color, var(--text-tertiary)); margin-top: var(--syn-subnote-margin-top, 3px); line-height: var(--syn-subnote-line-height, var(--leading-normal)); }
.syn-popnote { font-size: var(--syn-popnote-font-size, var(--text-xs)); color: var(--syn-popnote-color, var(--state-warning)); margin-top: var(--syn-popnote-margin-top, 3px); display: inline-flex; align-items: flex-start; gap: var(--syn-popnote-gap, var(--space-1)); line-height: var(--syn-popnote-line-height, var(--leading-normal)); }
.syn-section-foot { display: flex; align-items: center; gap: var(--syn-section-foot-gap, var(--space-3)); flex-wrap: wrap; margin-top: var(--syn-section-foot-margin-top, var(--space-3)); }

/* Metric strip. */
/* Stacked record-header metric cells (Experience.jsx:178, :1379-1389 — icon+label / value / sub;
   rendered by MetricStripRenderer's Stacked mode, [REBUILD-P2-15]). Trued to the mockup: 28px cell
   gap, 11px label with 4px drop, 14.5px value. */
.syn-metrics { display: flex; gap: var(--syn-metrics-gap, 28px); flex-wrap: wrap; }
.syn-metric { min-width: 0; }
.syn-metric-label { display: flex; align-items: center; gap: var(--syn-metric-label-gap, 5px); font-size: var(--syn-metric-label-font-size, 0.71875rem); font-weight: var(--syn-metric-label-font-weight, var(--font-semibold)); text-transform: var(--syn-metric-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-metric-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-metric-label-color, var(--text-tertiary)); margin-bottom: var(--syn-metric-label-margin-bottom, 4px); }
.syn-metric-value { font-size: var(--syn-metric-value-font-size, 14.5px); font-weight: var(--syn-metric-value-font-weight, var(--font-semibold)); letter-spacing: var(--syn-metric-value-letter-spacing, -0.01em); }
.syn-metric-sub { font-size: var(--syn-metric-sub-font-size, 11.5px); color: var(--syn-metric-sub-color, var(--text-tertiary)); margin-top: var(--syn-metric-sub-margin-top, 1px); }

/* MetricCard (capture-shell MetricCard:119) + the expanded strip + the collapsed condensed bar. */
.syn-metric-strip { display: grid; grid-template-columns: var(--syn-metric-strip-grid-template-columns, repeat(auto-fit, minmax(150px, 1fr))); gap: var(--syn-metric-strip-gap, 10px); margin: var(--syn-metric-strip-margin, var(--space-4) 0); }
.syn-metric-bar { display: flex; align-items: center; gap: var(--syn-metric-bar-gap, var(--space-4)); flex-wrap: wrap; margin: var(--syn-metric-bar-margin, 0 0 8px); font-size: var(--syn-metric-bar-font-size, 0.8125rem); }
.syn-metric-bar-sep { width: var(--syn-metric-bar-sep-width, 1px); height: var(--syn-metric-bar-sep-height, 16px); background: var(--syn-metric-bar-sep-background, var(--border-default)); }
.syn-metric-bar-item { display: inline-flex; align-items: baseline; gap: var(--syn-metric-bar-item-gap, 6px); }
.syn-metric-bar-label { font-size: var(--syn-metric-bar-label-font-size, 0.71875rem); font-weight: var(--syn-metric-bar-label-font-weight, var(--font-semibold)); letter-spacing: var(--syn-metric-bar-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-metric-bar-label-text-transform, var(--type-label-transform)); color: var(--syn-metric-bar-label-color, var(--text-tertiary)); }
.syn-metric-bar-value { font-weight: var(--syn-metric-bar-value-font-weight, 700); }

/* ComplianceMeter — Q85 (DESIGN_LANGUAGE §6): 4px track, INK fill, 600 11px tabular label. */
.syn-cmeter { display: flex; align-items: center; gap: var(--syn-cmeter-gap, var(--space-2)); flex-shrink: 0; }
.syn-cmeter-track { width: var(--syn-cmeter-track-width, 90px); height: var(--syn-cmeter-track-height, 4px); border-radius: var(--syn-cmeter-track-border-radius, var(--shape-radius-pill)); background: var(--syn-cmeter-track-background, var(--surface-inset)); overflow: hidden; }
.syn-cmeter-track.is-compact { width: var(--syn-cmeter-track-is-compact-width, 54px); }
.syn-cmeter-fill { height: 100%; background: var(--syn-cmeter-fill-background, var(--text-ink)); }
.syn-cmeter-label { font-size: var(--syn-cmeter-label-font-size, 0.71875rem); font-weight: var(--syn-cmeter-label-font-weight, 600); color: var(--syn-cmeter-label-color, var(--text-muted)); font-variant-numeric: var(--syn-cmeter-label-font-variant-numeric, tabular-nums); white-space: nowrap; }

/* IdentityGrid (OverviewTab Identification:2704) — dense 2-col fact grid, responsive to its OWN width.
   The grid sits in the narrower left column of .syn-mc-grid, so the breakpoint must key off the grid's own
   container (syn-idgrid on the wrap), not the full tab body — otherwise a wide body forces 2 cramped columns
   into a narrow space and clips them instead of reflowing to 1 column. */
.syn-identity-gridwrap { container: syn-idgrid / inline-size; }
.syn-identity-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--syn-identity-grid-column-gap, 28px); }
/* Modal form rhythm (Ken, 2026-07-31 — "obvious crowding"): the mockups stack modal fields at
   gap 14 with 12px pair-grid gutters (Experience.jsx:1540-1542, People.jsx:499-500). Scoped to
   modal bodies so read-heavy identity cards keep their dense grain. */
.syn-modal-body .syn-identity-grid { row-gap: var(--syn-modal-body-identity-grid-row-gap, 14px); column-gap: var(--syn-modal-body-identity-grid-column-gap, 12px); }
.syn-identity-grid > .syn-ef.is-wide, .syn-identity-grid > .syn-field.is-wide, .syn-identity-grid > .syn-subnote { grid-column: 1 / -1; }
/* minmax(0,1fr) — NOT 1fr: a plain 1fr track has an auto (min-content) floor, so a wide cell (the Title /
   Stage editors) blows its track past half-width and clips. minmax(0,…) lets the cell shrink and wrap. */
@container syn-idgrid (min-width: 560px) { .syn-identity-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Q155 (as amended by Q161/ruling 16): the DECISION-tier MC ViewSection grid keeps the
   comp'd grammar (Capture round 17a) — a UNIFORM three-column grid, label-ABOVE-value, labels
   never wrapping. Renderer-level on purpose. Scope: `.syn-modal-body` keeps the 1d modal
   grammar; profile Details plates keep their ratified label-beside; `.is-admin` grids take the
   admin tier below. */
.syn-mc-page .syn-identity-grid:not(.is-admin):not(.syn-modal-body *) { row-gap: var(--syn-mc-page-identity-grid-not-is-admin-not-modal-body-row-gap, 12px); column-gap: var(--syn-mc-page-identity-grid-not-is-admin-not-modal-body-column-gap, 18px); }
@container syn-idgrid (min-width: 620px) {
    .syn-mc-page .syn-identity-grid:not(.is-admin):not(.syn-modal-body *) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Every field stacks label-above (the .syn-ef row grain and any .syn-fieldrow template both re-grain). */
.syn-mc-page .syn-identity-grid:not(.is-admin):not(.syn-modal-body *) > .syn-ef,
.syn-mc-page .syn-identity-grid:not(.is-admin):not(.syn-modal-body *) > .syn-fieldrow { flex-direction: column; align-items: stretch; gap: var(--syn-mc-page-identity-grid-not-is-admin-not-modal-body-ef-gap, 4px); padding: 0; min-height: 0; }
.syn-mc-page .syn-identity-grid:not(.is-admin):not(.syn-modal-body *) .syn-ef-label,
.syn-mc-page .syn-identity-grid:not(.is-admin):not(.syn-modal-body *) .syn-fieldrow-label { width: auto; flex: none; white-space: nowrap; }
/* Values wear the TEXT face (mono is ids-only); a money figure reads 600. */
.syn-mc-page .syn-identity-grid:not(.syn-modal-body *) .syn-value[data-kind="Currency"] { font-weight: var(--kit-page-identity-grid-not-modal-body-value-kind-currency-font-weight, 600); }

/* ── Q161 (round 9, ruling 16): the ADMIN tier — label-beside dense rows, app-wide wherever a
   descriptor says Tier: Admin. 132px label column, hairline row separators, roughly half the
   stacked height; labels NEVER wrap values onto new lines (the fixed column owns that).
   Wrap-capable values (agency breadcrumb, Consideration chips, prose) wrap in the VALUE column
   under a top-aligned label. */
.syn-identity-grid.is-admin { display: block; }
/* Q180 (C12): admin row anatomy — label column 132 (right column re-grids to 110 below),
   10px gap, baseline-aligned ~30px rows, row hairline between rows, none after the last. */
.syn-identity-grid.is-admin > .syn-ef,
.syn-identity-grid.is-admin > .syn-fieldrow {
    display: grid; grid-template-columns: var(--syn-identity-grid-is-admin-ef-grid-template-columns, 132px minmax(0, 1fr)); align-items: baseline; column-gap: var(--syn-identity-grid-is-admin-ef-column-gap, 10px);
    padding: var(--syn-identity-grid-is-admin-ef-padding, 5px 0); min-height: var(--syn-identity-grid-is-admin-ef-min-height, 30px); border-bottom: var(--syn-identity-grid-is-admin-ef-border-bottom, 1px solid var(--border-hairline));
}
.syn-identity-grid.is-admin > .syn-ef:last-child,
.syn-identity-grid.is-admin > .syn-fieldrow:last-child { border-bottom: none; }
/* Wide loses its meaning in a single-column row stack — every row already spans. */
.syn-identity-grid.is-admin > .syn-ef.is-wide { grid-column: auto; }
/* Labels WRAP within their fixed column (comp 1a renders "FUNCTIONAL / CAPABILITY" on two
   lines) — the never-wrap rule protects the VALUE's column, not the label's own text.
   C13: 600 9.5px uppercase .08em tertiary. */
.syn-identity-grid.is-admin .syn-ef-label,
.syn-identity-grid.is-admin .syn-fieldrow-label { width: auto; flex: none; white-space: normal; line-height: var(--syn-identity-grid-is-admin-ef-label-line-height, 1.35); font-size: var(--syn-identity-grid-is-admin-ef-label-font-size, 0.59375rem); letter-spacing: var(--syn-identity-grid-is-admin-ef-label-letter-spacing, 0.08em); color: var(--syn-identity-grid-is-admin-ef-label-color, var(--text-faint)); }   /* Q271 (21a): the fact labels read --text-disabled (the drawn register; was tertiary) */
.syn-identity-grid.is-admin .syn-ef-control { min-width: 0; }
/* C14: admin values 400 12.5 body; an empty value is a DISABLED "—". C16: identifiers mono
   12px ls .02em. */
.syn-identity-grid.is-admin .syn-ef-idle { font-size: var(--syn-identity-grid-is-admin-ef-idle-font-size, 0.78125rem); font-weight: var(--syn-identity-grid-is-admin-ef-idle-font-weight, 400); color: var(--syn-identity-grid-is-admin-ef-idle-color, var(--text-body)); }
.syn-identity-grid.is-admin .syn-ef-idle.is-empty { color: var(--syn-identity-grid-is-admin-ef-idle-is-empty-color, var(--text-faint)); }
.syn-identity-grid.is-admin .syn-ef-idle.is-mono { font-size: var(--syn-identity-grid-is-admin-ef-idle-is-mono-font-size, 0.75rem); letter-spacing: var(--syn-identity-grid-is-admin-ef-idle-is-mono-letter-spacing, 0.02em); }
/* C19: the Consideration row — top-aligned label (7px row, label 5px down); chips wrap in the
   value column; chip = 500 11px INK on bg-tertiary radius 6, 2px 8px. */
.syn-identity-grid.is-admin > .syn-ef:has(.syn-ms-wrap) { align-items: start; padding: var(--syn-identity-grid-is-admin-ef-has-ms-wrap-padding, 7px 0); }
.syn-identity-grid.is-admin > .syn-ef:has(.syn-ms-wrap) .syn-ef-label { padding-top: var(--syn-identity-grid-is-admin-ef-has-ms-wrap-ef-label-padding-top, 5px); }
.syn-identity-grid.is-admin .syn-chip { font-size: var(--syn-identity-grid-is-admin-chip-font-size, 0.71875rem); font-weight: var(--syn-identity-grid-is-admin-chip-font-weight, 500); color: var(--syn-identity-grid-is-admin-chip-color, var(--text-ink)); background: var(--syn-identity-grid-is-admin-chip-background, var(--surface-inset)); border: none; border-radius: var(--syn-identity-grid-is-admin-chip-border-radius, var(--radius-sm)); padding: var(--syn-identity-grid-is-admin-chip-padding, 2px 8px); }   /* Q183 (3): the comp's quiet tint, never bordered */
/* C20: the Agency hierarchy wraps IN-COLUMN — 400 12.5/1.5 body, faint  > separators. */
.syn-identity-grid.is-admin > .syn-ef:has(.syn-mc-agencycrumb) { align-items: start; }
.syn-identity-grid.is-admin .syn-mc-agencycrumb { font-size: var(--syn-identity-grid-is-admin-mc-agencycrumb-font-size, 0.78125rem); font-weight: var(--syn-identity-grid-is-admin-mc-agencycrumb-font-weight, 400); line-height: var(--syn-identity-grid-is-admin-mc-agencycrumb-line-height, 1.5); color: var(--syn-identity-grid-is-admin-mc-agencycrumb-color, var(--text-body)); }

/* Q317(d) — the admin block conformed to the RATIFIED 21a package grain (handback/mc-pursuit
   comp.html; supersedes the comp-1a C11/C-F1 values): TWO columns 1fr 1fr, 36px column gap,
   the decision divider at 12px/12px rhythm; ONE 150px label grid BOTH columns (the 132/110
   pair died); fact rows 5px 0 with NO row hairlines (the drawn grid is airy — hairlines were
   the pre-21a grain); values read --text-primary; chips ride the drawn bordered tinted-inset
   register. Scoped to the pursuit card's wrapper so other admin-tier surfaces keep their own
   comps' grain. */
.syn-mc-adminsplit { display: grid; grid-template-columns: var(--syn-mc-adminsplit-grid-template-columns, repeat(auto-fit, minmax(280px, 1fr))); gap: var(--syn-mc-adminsplit-gap, 0 36px); margin-top: var(--syn-mc-adminsplit-margin-top, 12px); padding-top: var(--syn-mc-adminsplit-padding-top, 12px); border-top: var(--syn-mc-adminsplit-border-top, 1px solid var(--border-hairline)); }
/* Q317(d): the Contract Structure card's split — same grain, no decision divider (the comp's
   card opens directly on the grid). */
.syn-mc-adminsplit.is-bare { margin-top: 0; padding-top: 0; border-top: none; }
.syn-mc-admincol { min-width: 0; }
.syn-mc-admincol .syn-identity-grid.is-admin > .syn-ef,
.syn-mc-admincol .syn-identity-grid.is-admin > .syn-fieldrow {
    grid-template-columns: var(--syn-mc-admincol-identity-grid-is-admin-ef-grid-template-columns, 150px minmax(0, 1fr)); column-gap: var(--syn-mc-admincol-identity-grid-is-admin-ef-column-gap, 12px);
    padding: var(--syn-mc-admincol-identity-grid-is-admin-ef-padding, 5px 0); min-height: 0; border-bottom: none;
}
.syn-mc-admincol .syn-identity-grid.is-admin .syn-ef-idle { color: var(--syn-mc-admincol-identity-grid-is-admin-ef-idle-color, var(--text-ink)); }
.syn-mc-admincol .syn-identity-grid.is-admin .syn-ef-idle.is-empty { color: var(--syn-mc-admincol-identity-grid-is-admin-ef-idle-is-empty-color, var(--text-faint)); }
.syn-mc-admincol .syn-identity-grid.is-admin .syn-chip {
    font: var(--syn-mc-admincol-identity-grid-is-admin-chip-font, 500 11.5px/15px var(--type-family)); color: var(--syn-mc-admincol-identity-grid-is-admin-chip-color, var(--text-body));
    background: var(--syn-mc-admincol-identity-grid-is-admin-chip-background, var(--tinted-inset)); border: var(--syn-mc-admincol-identity-grid-is-admin-chip-border, 1px solid var(--border-default)); border-radius: var(--syn-mc-admincol-identity-grid-is-admin-chip-border-radius, var(--radius-sm)); padding: var(--syn-mc-admincol-identity-grid-is-admin-chip-padding, 0 8px);
}
/* Q317(d): a WIDE field in the pursuit admin columns takes the drawn Summary-block shape —
   label ABOVE, prose at the column's full width (the 21a comp draws Summary and Description
   label-above; the label-left grid squeezed the prose into a sliver). */
.syn-mc-admincol .syn-identity-grid.is-admin > .syn-ef.is-wide { display: block; padding: var(--syn-mc-admincol-identity-grid-is-admin-ef-is-wide-padding, 5px 0); }
.syn-mc-admincol .syn-identity-grid.is-admin > .syn-ef.is-wide .syn-ef-label { display: block; margin-bottom: var(--kit-mc-admincol-identity-grid-is-admin-ef-is-wide-ef-label-margin-bottom, 4px); }
.syn-mc-admintail { margin-top: 0; }

/* Glance cards (KpGlanceBlock:1794, ExperienceBlock:2397) — clickable summary rows into the KP/Experience tabs. */
.syn-glance-item { display: flex; align-items: center; gap: var(--syn-glance-item-gap, var(--space-3)); width: 100%; text-align: left; padding: var(--syn-glance-item-padding, 10px 0); background: transparent; border: none; border-radius: var(--syn-glance-item-border-radius, var(--radius-sm)); transition: var(--syn-glance-item-transition, background var(--motion-duration-base)); cursor: pointer; }
.syn-glance-item + .syn-glance-item { border-top: var(--syn-glance-item-glance-item-border-top, 1px solid var(--border-default)); }
.syn-glance-item:hover { background: var(--syn-glance-item-hover-background, var(--surface-hover)); }
.syn-glance-item-main { flex: 1; min-width: 0; }
.syn-glance-item-title { font-size: var(--syn-glance-item-title-font-size, 0.84375rem); font-weight: var(--syn-glance-item-title-font-weight, var(--font-medium)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-glance-item-sub { font-size: var(--syn-glance-item-sub-font-size, 0.75rem); color: var(--syn-glance-item-sub-color, var(--text-tertiary)); margin-top: var(--syn-glance-item-sub-margin-top, 1px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-glance-item-sub.is-warn { color: var(--syn-glance-item-sub-is-warn-color, var(--text-ink)); font-weight: var(--syn-glance-item-sub-is-warn-font-weight, 600); }   /* Q99 flag 13: de-ambered */
/* KP candidate name reads --text-secondary when filled (mockup KpGlance:1813); the shared sub stays tertiary
   for the Experience meta line (mockup:2424). */
.syn-glance-item-sub.is-filled { color: var(--syn-glance-item-sub-is-filled-color, var(--text-muted)); }
.syn-glance-empty { font-size: var(--syn-glance-empty-font-size, 0.8125rem); color: var(--syn-glance-empty-color, var(--text-tertiary)); padding: var(--syn-glance-empty-padding, 6px 0); }
.syn-glance-note { font-size: var(--syn-glance-note-font-size, 0.75rem); color: var(--syn-glance-note-color, var(--state-warning)); padding: var(--syn-glance-note-padding, 10px 0 2px); display: flex; align-items: center; gap: var(--syn-glance-note-gap, 6px); }

/* ---- Proposal Package display rows + PackageConfigModal -------------------------------- */
.syn-center { display: flex; justify-content: center; text-align: center; }

/* Display rows (ProposalPackageBlock:2350) */
.syn-pkg-list { display: flex; flex-direction: column; }
.syn-pkg-row { display: flex; align-items: center; gap: var(--syn-pkg-row-gap, 10px); padding: var(--syn-pkg-row-padding, 9px 0); }
.syn-pkg-row + .syn-pkg-row { border-top: var(--syn-pkg-row-pkg-row-border-top, 1px solid var(--border-default)); }
.syn-pkg-main { flex: 1; min-width: 0; }
.syn-pkg-title { font-size: var(--syn-pkg-title-font-size, 0.84375rem); font-weight: var(--syn-pkg-title-font-weight, var(--font-medium)); display: flex; align-items: center; gap: var(--syn-pkg-title-gap, 7px); }
.syn-pkg-limit { font-size: var(--syn-pkg-limit-font-size, 0.75rem); color: var(--syn-pkg-limit-color, var(--text-tertiary)); }

/* Segmented toggle (From list / Custom) */
.syn-seg { display: flex; border: var(--syn-seg-border, 1px solid var(--border-default)); border-radius: var(--syn-seg-border-radius, var(--radius-nav)); overflow: hidden; }
.syn-seg-btn { padding: var(--syn-seg-btn-padding, 4px 11px); border: none; font-size: var(--syn-seg-btn-font-size, 0.75rem); font-weight: var(--syn-seg-btn-font-weight, var(--font-medium)); font-family: inherit; background: var(--syn-seg-btn-background, var(--surface-plane)); color: var(--syn-seg-btn-color, var(--text-muted)); cursor: pointer; }
.syn-seg-btn.is-active { background: var(--syn-seg-btn-is-active-background, var(--text-ink)); color: var(--syn-seg-btn-is-active-color, var(--surface-canvas)); }

/* ---- Roster modals (ManagePartnersModal:1621 / ManageTeamModal:1698) + deliverable remove ---------- */
/* Q271 (comp modal 5): the "Team · n" roster head — drawn 9px 600 sans uppercase .08em disabled. */
.syn-roster-teamhead { font-size: var(--syn-roster-teamhead-font-size, 9.5px); font-weight: var(--syn-roster-teamhead-font-weight, 600); letter-spacing: var(--syn-roster-teamhead-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-roster-teamhead-text-transform, var(--type-label-transform)); color: var(--syn-roster-teamhead-color, var(--text-faint)); margin-bottom: var(--syn-roster-teamhead-margin-bottom, 8px); }
.syn-roster { display: flex; flex-direction: column; gap: var(--syn-roster-gap, 8px); }
.syn-roster-row { display: flex; align-items: center; gap: var(--syn-roster-row-gap, 11px); padding: var(--syn-roster-row-padding, 10px 12px); border: var(--syn-roster-row-border, 1px solid var(--border-default)); border-radius: var(--syn-roster-row-border-radius, var(--radius-md-plus)); }
/* QB78(d) (Ken's MP-21, image20): the delete track is a FLOOR, not a fixed 28px — the armed inline confirm
   (Remove from team · Cancel) takes its width from the fr columns, in place at the row; it never overflowed
   the modal body into a horizontal scroll again. */
.syn-roster-row-team { display: grid; grid-template-columns: var(--syn-roster-row-team-grid-template-columns, 1.1fr 1.4fr minmax(28px, auto)); gap: var(--syn-roster-row-team-gap, 12px); }
.syn-roster-person { display: flex; align-items: center; gap: var(--syn-roster-person-gap, 9px); min-width: 0; }
.syn-roster-main { flex: 1; min-width: 0; }
.syn-roster-name { font-size: var(--syn-roster-name-font-size, 0.84375rem); font-weight: var(--syn-roster-name-font-weight, var(--font-medium)); }
/* Q408(c) (r38-5a pinned final): the ONE roster sub-line register — 400 11 --text-tertiary, interpunct
   join at the seat; the vacancy word ("No role") reads the DISABLED register (a state word, render-only). */
.syn-roster-sub { font: var(--syn-roster-sub-font, 400 0.6875rem var(--type-family)); color: var(--syn-roster-sub-color, var(--text-tertiary)); margin-top: var(--syn-roster-sub-margin-top, 1px); }
.syn-roster-sub.is-vacant { color: var(--syn-roster-sub-is-vacant-color, var(--text-faint)); }
.syn-roster-empty { font-size: var(--syn-roster-empty-font-size, 0.8125rem); color: var(--syn-roster-empty-color, var(--text-tertiary)); padding: var(--syn-roster-empty-padding, 4px 0); }
.syn-roster-add { margin-top: var(--syn-roster-add-margin-top, 14px); padding-top: var(--syn-roster-add-padding-top, 14px); border-top: var(--syn-roster-add-border-top, 1px solid var(--border-default)); }
.syn-roster-addlabel { font-size: var(--syn-roster-addlabel-font-size, 0.71875rem); font-weight: var(--syn-roster-addlabel-font-weight, var(--font-semibold)); text-transform: var(--syn-roster-addlabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-roster-addlabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-roster-addlabel-color, var(--text-muted)); margin-bottom: var(--syn-roster-addlabel-margin-bottom, 8px); }

/* Subcontractors inline editor. */
.syn-subs { display: flex; flex-direction: column; gap: var(--syn-subs-gap, var(--space-2)); }
.syn-subs-row { display: flex; align-items: center; gap: var(--syn-subs-row-gap, var(--space-2)); }
.syn-subs-pick { flex: 1; min-width: 0; }

/* Client hierarchy levels. */
.syn-level-num { font-size: var(--syn-level-num-font-size, var(--text-xs)); font-weight: var(--syn-level-num-font-weight, var(--font-semibold)); color: var(--syn-level-num-color, var(--text-tertiary)); width: var(--syn-level-num-width, 16px); text-align: right; flex-shrink: 0; }
.syn-composer-pick { flex: 1 1 200px; min-width: var(--syn-composer-pick-min-width, 160px); }

/* Contract personnel rows. */
.syn-person-row { display: flex; align-items: flex-start; gap: var(--syn-person-row-gap, var(--space-3)); padding: var(--syn-person-row-padding, var(--space-3) 0); border-bottom: var(--syn-person-row-border-bottom, 1px solid var(--border-default)); }
.syn-person-row:last-child { border-bottom: none; }
.syn-person-main { flex: 1; min-width: 0; }
/* QB46 (text-scale R6): a field VALUE — reading class, rem so the text-size setting reaches it. */
.syn-person-role { font-size: var(--syn-person-role-font-size, 0.875rem); font-weight: var(--syn-person-role-font-weight, var(--font-semibold)); line-height: var(--syn-person-role-line-height, 1.3); }
.syn-person-name { display: flex; align-items: center; gap: var(--syn-person-name-gap, var(--space-2)); flex-wrap: wrap; margin-top: var(--syn-person-name-margin-top, 1px); font-size: var(--syn-person-name-font-size, var(--text-sm)); }
.syn-person-contact { display: flex; flex-direction: column; gap: var(--syn-person-contact-gap, 2px); margin-top: var(--syn-person-contact-margin-top, var(--space-1)); font-size: var(--syn-person-contact-font-size, var(--text-sm)); color: var(--syn-person-contact-color, var(--text-muted)); }
.syn-person-contact span { display: inline-flex; align-items: center; gap: var(--syn-person-contact-span-gap, var(--space-1)); }
.syn-tag { display: inline-flex; align-items: center; gap: var(--syn-tag-gap, 3px); font-size: var(--syn-tag-font-size, var(--text-xs)); color: var(--syn-tag-color, var(--text-tertiary)); }

/* Contract-personnel link banner (in the modal). */
.syn-link-banner { display: flex; align-items: center; gap: var(--syn-link-banner-gap, var(--space-3)); padding: var(--syn-link-banner-padding, var(--space-3)); border: var(--syn-link-banner-border, 1px solid var(--accent-muted)); background: var(--syn-link-banner-background, var(--accent-muted)); border-radius: var(--syn-link-banner-border-radius, var(--shape-radius-control)); }
.syn-link-name { font-size: var(--syn-link-name-font-size, var(--text-sm)); font-weight: var(--syn-link-name-font-weight, var(--font-semibold)); color: var(--syn-link-name-color, var(--accent-action-active)); display: inline-flex; align-items: center; gap: var(--syn-link-name-gap, var(--space-1)); }
.syn-link-sub { font-size: var(--syn-link-sub-font-size, var(--text-xs)); color: var(--syn-link-sub-color, var(--accent-action-active)); }

/* CPARS rating periods. */
.syn-cpars { border: var(--syn-cpars-border, 1px solid var(--border-default)); border-radius: var(--syn-cpars-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-cpars-head { display: flex; align-items: center; gap: var(--syn-cpars-head-gap, var(--space-2)); padding: var(--syn-cpars-head-padding, var(--space-2) var(--space-3)); background: var(--syn-cpars-head-background, var(--bg-secondary)); border-bottom: var(--syn-cpars-head-border-bottom, 1px solid var(--border-default)); font-size: var(--syn-cpars-head-font-size, var(--text-sm)); }
.syn-cpars-range { font-weight: var(--syn-cpars-range-font-weight, var(--font-semibold)); color: var(--syn-cpars-range-color, var(--text-muted)); }
/* Single column by owner ruling (Ken 2026-07-31 — the mockup's auto-fit two-up "would be better
   in a single column"); the edit selects share one width so the six rows align. */
.syn-cpars-areas { display: grid; gap: var(--syn-cpars-areas-gap, var(--space-1) var(--space-4)); grid-template-columns: 1fr; padding: var(--syn-cpars-areas-padding, var(--space-3)); }
.syn-cpars-arearow { display: flex; align-items: center; gap: var(--syn-cpars-arearow-gap, var(--space-2)); font-size: var(--syn-cpars-arearow-font-size, var(--text-sm)); }
.syn-cpars-area { flex: 1; color: var(--syn-cpars-area-color, var(--text-muted)); }
.syn-cpars-arearow .syn-enum-wrap { flex-shrink: 0; }
.syn-cpars-arearow .syn-enum { min-width: var(--syn-cpars-arearow-enum-min-width, 138px); }
/* Period dates fill the header strip two-up (mockup .syn-fit-sm, Experience.jsx:926-929). */
.syn-cpars-dates { display: grid; grid-template-columns: var(--syn-cpars-dates-grid-template-columns, repeat(auto-fit, minmax(150px, 1fr))); gap: var(--syn-cpars-dates-gap, 8px); }
.syn-cpars-comment { padding: var(--syn-cpars-comment-padding, 0 var(--space-3) var(--space-3)); }

/* ---- Pipeline (UI_SPEC §5.5 / Pipeline.jsx via the P3 extraction annex) -------------------
   The P1 pilot grid's CSS (syn-pipeline-*, syn-stagechip, syn-facets, syn-toolbtn, …) was
   removed with the pilot page — the P3 tranche's syn-pipe-* classes replace it wholesale. */

/* Segmented view toggle — ONE grain for every segmented control (directory view toggles + the
   Pipeline preset and density controls; Ken's consistent-visual-language ruling). The mockup's
   pl-seg black-fill active (Pipeline.jsx:80) is reconciled to this canonical accent-muted
   active; documented at P3 integration. */
.syn-segmented { display: inline-flex; border: var(--syn-segmented-border, 1px solid var(--border-default)); border-radius: var(--syn-segmented-border-radius, var(--shape-radius-control)); overflow: hidden; }
/* .syn-seg here is scoped under .syn-segmented: outside a segmented group the bare class is the
   two-segment GROUP CONTAINER (the .syn-seg/.syn-seg-btn pair above — PackageConfigModal's add
   switch); unscoped it shadowed that container rule at equal specificity (C3-2). */
.syn-segmented .syn-seg { display: inline-flex; align-items: center; gap: var(--syn-segmented-seg-gap, var(--space-2)); padding: var(--syn-segmented-seg-padding, var(--space-2) var(--space-4)); background: var(--syn-segmented-seg-background, var(--surface-plane)); border: none; border-right: var(--syn-segmented-seg-border-right, 1px solid var(--border-default)); font-size: var(--syn-segmented-seg-font-size, var(--text-sm)); color: var(--syn-segmented-seg-color, var(--text-muted)); cursor: pointer; text-decoration: var(--syn-segmented-seg-text-decoration, none); }
.syn-segmented .syn-seg:last-child { border-right: none; }
.syn-segmented .syn-seg:hover { background: var(--syn-segmented-seg-hover-background, var(--surface-hover)); }
.syn-segmented .syn-seg.is-active { background: var(--syn-segmented-seg-is-active-background, var(--accent-muted)); color: var(--syn-segmented-seg-is-active-color, var(--accent-action-active)); font-weight: var(--syn-segmented-seg-is-active-font-weight, var(--font-medium)); }

/* Q211 (R10 pipeline package, 2c-i — supersedes the Q84 segmented block): the control row's
   segmented controls — lens tabs · density · the DL-2 mode seg — ONE anatomy: --bg-tertiary track,
   3px pad, r8; segments 11px 3/10 (500 --text-secondary; active 600 --text-primary on --seg-active
   r6 + the .07 shadow). Lens counts = the faint inline register (--text-disabled; NOT the
   count-dot species — the manifest note). CHROME class: px, never scales. */
.syn-pipe-lenstabs, .syn-pipe-seg { display: flex; align-items: center; background: var(--syn-pipe-lenstabs-background, var(--surface-inset)); border-radius: var(--syn-pipe-lenstabs-border-radius, var(--shape-radius-control)); padding: var(--syn-pipe-lenstabs-padding, 3px); flex: none; }
.syn-pipe-lens, .syn-pipe-segbtn { display: inline-flex; align-items: center; gap: var(--syn-pipe-lens-gap, 4px); padding: var(--syn-pipe-lens-padding, 3px 10px); background: transparent; border: none; border-radius: var(--syn-pipe-lens-border-radius, var(--radius-sm)); font-size: var(--syn-pipe-lens-font-size, 11px); line-height: normal; font-weight: var(--syn-pipe-lens-font-weight, 500); font-family: var(--syn-pipe-lens-font-family, var(--type-family)); color: var(--syn-pipe-lens-color, var(--text-muted)); cursor: pointer; white-space: nowrap; }
.syn-pipe-lens.on, .syn-pipe-segbtn.on { background: var(--syn-pipe-lens-on-background, var(--segment-active)); color: var(--syn-pipe-lens-on-color, var(--text-ink)); font-weight: var(--syn-pipe-lens-on-font-weight, 600); box-shadow: var(--syn-pipe-lens-on-box-shadow, var(--segment-active-shadow)); }
.syn-pipe-lenscount { color: var(--syn-pipe-lenscount-color, var(--text-faint)); }

/* Page skeleton (annex §1: paddings verbatim; the grid fills the remaining height). 100vh, not
   100%: the layout is still the bare @Body (no sized ancestor until the P4 app shell) — when the
   shell lands and owns the viewport frame, this hands back to height:100%. */
/* UD14 (Relay 34 item 12 REVISED — the Pipeline JOINS the entity-grid viewport grammar, Ken): overflow: clip
   on the frame — html/body never overflow even at a short window; the three-row chrome pins above the one
   scrolling table region. */
.syn-pipe-page { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: clip; }
/* The heading is the shell's ListHeading since Q209 (the Q84 .syn-pipe-header rules retired in Q211). */
.syn-pipe-error { color: var(--syn-pipe-error-color, var(--state-attention)); font-size: var(--syn-pipe-error-font-size, var(--text-xs)); padding: var(--syn-pipe-error-padding, 6px 32px 0); }

/* Q292 (the ratified filter sheet — supersedes Q211's two-row facet stack): the FILTER BLOCK is
   the control row (six preset lenses · the 1px saved-views datum · search flex:1 h26 · segs ·
   Filters · Columns — the Q211 control-row values carried verbatim) plus the one-line text
   RECEIPT exactly while any constraint is live (the chip row is DEAD): 400 11px --text-tertiary,
   members verbatim, the quiet "Clear all" (500 11px --text-secondary) trailing. Pad 20/32/12,
   10px between rows. CHROME class throughout: px, never scales. */
.syn-pipe-filterblock { display: flex; flex-direction: column; gap: var(--syn-pipe-filterblock-gap, 10px); padding: var(--syn-pipe-filterblock-padding, 20px 32px 12px); }
.syn-pipe-lensdatum { width: var(--syn-pipe-lensdatum-width, 1px); height: var(--syn-pipe-lensdatum-height, 16px); background: var(--syn-pipe-lensdatum-background, var(--border-default)); flex: none; }
.syn-pipe-receipt { font-size: var(--syn-pipe-receipt-font-size, 11.5px); font-weight: var(--syn-pipe-receipt-font-weight, 400); font-family: var(--syn-pipe-receipt-font-family, var(--type-family)); color: var(--syn-pipe-receipt-color, var(--text-tertiary)); line-height: var(--syn-pipe-receipt-line-height, 1.5); margin-top: var(--syn-pipe-receipt-margin-top, -2px); }   /* the drawn 8px under the block's 10px gap */
.syn-pipe-receiptclear { border: none; background: transparent; padding: 0; margin-left: var(--syn-pipe-receiptclear-margin-left, 8px); font-size: var(--syn-pipe-receiptclear-font-size, 11.5px); font-weight: var(--syn-pipe-receiptclear-font-weight, 500); font-family: var(--syn-pipe-receiptclear-font-family, var(--type-family)); color: var(--syn-pipe-receiptclear-color, var(--text-muted)); cursor: pointer; }
.syn-pipe-receiptclear:hover { color: var(--syn-pipe-receiptclear-hover-color, var(--text-ink)); }
.syn-pipe-stagedot { width: var(--syn-pipe-stagedot-width, 6px); height: var(--syn-pipe-stagedot-height, 6px); border-radius: 50%; display: inline-block; flex-shrink: 0; }
.syn-pipe-controlrow { display: flex; align-items: center; gap: var(--syn-pipe-controlrow-gap, 8px); }
.syn-pipe-search { display: flex; align-items: center; gap: var(--syn-pipe-search-gap, 6px); flex: 1; min-width: 0; height: var(--syn-pipe-search-height, 26px); box-sizing: border-box; padding: var(--syn-pipe-search-padding, 0 10px); border: var(--syn-pipe-search-border, 1px solid var(--border-default)); border-radius: var(--syn-pipe-search-border-radius, var(--shape-radius-control)); background: var(--syn-pipe-search-background, var(--surface-plane)); font-size: var(--syn-pipe-search-font-size, 11.5px); font-weight: var(--syn-pipe-search-font-weight, 400); font-family: var(--syn-pipe-search-font-family, var(--type-family)); color: var(--syn-pipe-search-color, var(--text-faint)); }
.syn-pipe-search:focus-within { border-color: var(--syn-pipe-search-focus-within-border-color, var(--accent-action)); }
.syn-pipe-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: var(--syn-pipe-search-input-font-size, 11.5px); padding: 0; color: var(--syn-pipe-search-input-color, var(--text-ink)); }
.syn-pipe-search input::placeholder { color: var(--syn-pipe-search-input-placeholder-color, var(--text-faint)); }
.syn-pipe-controlrow .syn-toolpanel-btn, .syn-pipe-controlrow .syn-filterpanel-btn { display: flex; align-items: center; gap: var(--syn-pipe-controlrow-toolpanel-btn-gap, 6px); height: var(--syn-pipe-controlrow-toolpanel-btn-height, 26px); box-sizing: border-box; padding: var(--syn-pipe-controlrow-toolpanel-btn-padding, 0 10px); border: var(--syn-pipe-controlrow-toolpanel-btn-border, 1px solid var(--border-default)); border-radius: var(--syn-pipe-controlrow-toolpanel-btn-border-radius, var(--shape-radius-control)); background: var(--syn-pipe-controlrow-toolpanel-btn-background, var(--surface-plane)); font-size: var(--syn-pipe-controlrow-toolpanel-btn-font-size, 11px); line-height: normal; font-weight: var(--syn-pipe-controlrow-toolpanel-btn-font-weight, 500); font-family: var(--syn-pipe-controlrow-toolpanel-btn-font-family, var(--type-family)); color: var(--syn-pipe-controlrow-toolpanel-btn-color, var(--text-body)); cursor: pointer; white-space: nowrap; flex: none; }
.syn-pipe-controlrow .syn-toolpanel-btn:hover, .syn-pipe-controlrow .syn-filterpanel-btn:hover { background: var(--syn-pipe-controlrow-toolpanel-btn-hover-background, var(--surface-hover)); }

/* ── Q292 — THE PIPELINE FILTER SHEET (spec of record: Relay 24 Filter Sheet Returns, Candidate A
   ratified; the exhibit's drawn values verbatim). The TRIGGER matches the Columns control at rest
   (h26 r8 bordered 500 11px) and wears the ACTIVE register exactly while any constraint is live
   (B6): 600 · --text-primary ink · --border-emphasis · the faint count. The SHEET: 920px, three
   columns (gap 4/22), --surface on --border-emphasis r10 + the 0 8px 24px .12 shadow, pad
   14/16/10; internal scroll under a max-height with the FOOTER sticky (B5). Group labels = the
   mono-caps register (600 9px .08em uppercase --text-disabled) with the always-present "Any"
   slot (500 10px — disabled register while unconstrained, tertiary while constraining). Members:
   500 12px --text-body rows (pad 4/6 r6, gap 8), the 14px r4 check (off 1.5px --border-strong;
   on --text-primary fill + --text-on-ink ✓), counts 400 11px --text-faint right. Helper
   definitions 400 10.5/1.45 --text-tertiary. CHROME class: px, never scales. ── */
.syn-pfs-trigger { display: flex; align-items: center; gap: var(--syn-pfs-trigger-gap, 6px); height: var(--syn-pfs-trigger-height, 26px); box-sizing: border-box; padding: var(--syn-pfs-trigger-padding, 0 10px); border: var(--syn-pfs-trigger-border, 1px solid var(--border-default)); border-radius: var(--syn-pfs-trigger-border-radius, var(--shape-radius-control)); background: var(--syn-pfs-trigger-background, var(--surface-plane)); font-size: var(--syn-pfs-trigger-font-size, 11px); line-height: normal; font-weight: var(--syn-pfs-trigger-font-weight, 500); font-family: var(--syn-pfs-trigger-font-family, var(--type-family)); color: var(--syn-pfs-trigger-color, var(--text-body)); cursor: pointer; white-space: nowrap; flex: none; }
.syn-pfs-trigger:hover { background: var(--syn-pfs-trigger-hover-background, var(--surface-hover)); }
.syn-pfs-trigger.is-live { border-color: var(--syn-pfs-trigger-is-live-border-color, var(--border-emphasis)); font-weight: var(--syn-pfs-trigger-is-live-font-weight, 600); color: var(--syn-pfs-trigger-is-live-color, var(--text-ink)); }
.syn-pfs-trigcount { font-size: var(--syn-pfs-trigcount-font-size, 11.5px); font-weight: var(--syn-pfs-trigcount-font-weight, 400); color: var(--syn-pfs-trigcount-color, var(--text-rider)); }
.syn-popover.syn-pfs-pop { border: none; background: transparent; box-shadow: none; padding: 0; --popover-max: 920px; }   /* Q341: the sheet owns its drawn 920 */
.syn-pfs-sheet { width: var(--syn-pfs-sheet-width, 920px); box-sizing: border-box; max-height: var(--syn-pfs-sheet-max-height, 640px); display: flex; flex-direction: column; background: var(--syn-pfs-sheet-background, var(--surface-plane)); border: var(--syn-pfs-sheet-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-pfs-sheet-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-pfs-sheet-box-shadow, var(--elevation-overlay)); padding: var(--syn-pfs-sheet-padding, 14px 16px 10px); }
.syn-pfs-body { flex: 1; min-height: 0; overflow-y: auto; }
.syn-pfs-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--syn-pfs-cols-gap, 4px 22px); }
.syn-pfs-col { min-width: 0; }
.syn-pfs-glabel { display: flex; align-items: baseline; padding: var(--syn-pfs-glabel-padding, 10px 6px 4px); font: var(--syn-pfs-glabel-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-pfs-glabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-pfs-glabel-text-transform, var(--type-label-transform)); color: var(--syn-pfs-glabel-color, var(--text-faint)); }
.syn-pfs-col > .syn-pfs-glabel:first-child { padding-top: var(--syn-pfs-col-pfs-glabel-first-child-padding-top, 2px); }
.syn-pfs-any { border: none; background: transparent; padding: 0; font: var(--syn-pfs-any-font, 500 10px var(--type-family)); letter-spacing: 0; text-transform: var(--syn-pfs-any-text-transform, none); color: var(--syn-pfs-any-color, var(--text-faint)); cursor: default; }
.syn-pfs-any.is-live { color: var(--syn-pfs-any-is-live-color, var(--text-tertiary)); cursor: pointer; }
.syn-pfs-any.is-live:hover { color: var(--syn-pfs-any-is-live-hover-color, var(--text-ink)); }
.syn-pfs-mem { display: flex; align-items: center; gap: var(--syn-pfs-mem-gap, 8px); width: 100%; box-sizing: border-box; padding: var(--syn-pfs-mem-padding, 4px 6px); border: none; border-radius: var(--syn-pfs-mem-border-radius, var(--radius-sm)); background: transparent; font: var(--syn-pfs-mem-font, 500 12px var(--type-family)); color: var(--syn-pfs-mem-color, var(--text-body)); text-align: left; cursor: pointer; }
.syn-pfs-mem:hover { background: var(--syn-pfs-mem-hover-background, var(--surface-hover)); }
.syn-pfs-memlabel { min-width: 0; overflow-wrap: break-word; }   /* Q341 C3: a facet member wraps in its column */
.syn-pfs-memcount { margin-left: auto; font: var(--syn-pfs-memcount-font, 400 11.5px var(--type-family)); color: var(--syn-pfs-memcount-color, var(--text-rider)); }
.syn-pfs-ck { width: var(--syn-pfs-ck-width, 14px); height: var(--syn-pfs-ck-height, 14px); border-radius: var(--syn-pfs-ck-border-radius, var(--radius-xs)); border: var(--syn-pfs-ck-border, 1.5px solid var(--border-strong)); background: var(--syn-pfs-ck-background, var(--surface-plane)); box-sizing: border-box; flex: none; }
.syn-pfs-ckon { width: var(--syn-pfs-ckon-width, 14px); height: var(--syn-pfs-ckon-height, 14px); border-radius: var(--syn-pfs-ckon-border-radius, var(--radius-xs)); background: var(--syn-pfs-ckon-background, var(--text-ink)); display: inline-flex; align-items: center; justify-content: center; font: var(--syn-pfs-ckon-font, 600 9.5px var(--type-family)); color: var(--syn-pfs-ckon-color, var(--text-on-ink)); flex: none; }
.syn-pfs-def { font: var(--syn-pfs-def-font, 400 10.5px/1.45 var(--type-family)); color: var(--syn-pfs-def-color, var(--text-tertiary)); padding: var(--syn-pfs-def-padding, 0 6px 4px); margin-top: var(--syn-pfs-def-margin-top, -2px); }
/* Q312 / Q292 leg (b) — the exhibit's drawn divider between the Outcome members and the
   sole-source flag row (x1 line 67: border-row rule, 8px above; the row sat 6px below —
   carried here as the divider's bottom margin, one home). */
.syn-pfs-ssdiv { border-top: var(--syn-pfs-ssdiv-border-top, 1px solid var(--border-hairline)); margin: var(--syn-pfs-ssdiv-margin, 8px 6px 6px); }
/* Q292 leg (a) — the Functional category 2×2 toggle-card grid (the exhibit's drawn card:
   border-default r8 pad 5/9, head 600 10.5 --text-body + faint count, name 400 10
   --text-tertiary; multi-select OR; the selected card wears the sheet's active register). */
.syn-pfs-fcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--syn-pfs-fcgrid-gap, 4px); padding: var(--syn-pfs-fcgrid-padding, 2px 6px 4px); }
.syn-pfs-fccard { display: flex; flex-direction: column; gap: var(--syn-pfs-fccard-gap, 1px); border: var(--syn-pfs-fccard-border, 1px solid var(--border-default)); border-radius: var(--syn-pfs-fccard-border-radius, var(--shape-radius-control)); padding: var(--syn-pfs-fccard-padding, 5px 9px); background: transparent; text-align: left; cursor: pointer; }
.syn-pfs-fccard:hover { background: var(--syn-pfs-fccard-hover-background, var(--surface-hover)); }
.syn-pfs-fccard.on { border-color: var(--syn-pfs-fccard-on-border-color, var(--border-emphasis)); }
.syn-pfs-fchead { font: var(--syn-pfs-fchead-font, 600 10.5px var(--type-family)); color: var(--syn-pfs-fchead-color, var(--text-body)); }
.syn-pfs-fccard.on .syn-pfs-fchead { color: var(--syn-pfs-fccard-on-pfs-fchead-color, var(--text-ink)); }
.syn-pfs-fccount { font-weight: var(--syn-pfs-fccount-font-weight, 400); color: var(--syn-pfs-fccount-color, var(--text-rider)); margin-left: var(--syn-pfs-fccount-margin-left, 2px); }
.syn-pfs-fcname { font: var(--syn-pfs-fcname-font, 400 10px/1.35 var(--type-family)); color: var(--syn-pfs-fcname-color, var(--text-tertiary)); }
/* The sliders (the drawn anatomy: bound field · 3px rail + inked span + 13px thumbs · bound
   field; the mono scale beneath). The stacked native ranges take pointer events on their THUMBS
   only; commits ride change (release). */
.syn-pfs-slider { padding: var(--syn-pfs-slider-padding, 2px 6px 6px); }
.syn-pfs-sliderrow { display: flex; align-items: center; gap: var(--syn-pfs-sliderrow-gap, 8px); }
/* The bound fields ride the canonical NumberInput compact mode; the drawn 44/56px boxes carry
   their unit INSIDE, so the compact register tightens here (no stepper column reserved — the
   16px right pad would starve the input to zero content at 44px total). */
.syn-num-field.syn-num-compact.syn-pfs-bound { gap: var(--syn-num-field-num-compact-pfs-bound-gap, 2px); padding: var(--syn-num-field-num-compact-pfs-bound-padding, 0 5px 0 0); flex: none; font: var(--syn-num-field-num-compact-pfs-bound-font, 500 11px var(--type-family-mono)); line-height: normal; color: var(--syn-num-field-num-compact-pfs-bound-color, var(--text-body)); }
.syn-num-field.syn-num-compact.syn-pfs-bound > .syn-input { padding: var(--syn-num-field-num-compact-pfs-bound-input-padding, 3px 0 3px 5px); font: var(--syn-num-field-num-compact-pfs-bound-input-font, 500 11px var(--type-family-mono)); text-align: center; }
.syn-num-field.syn-num-compact.syn-pfs-bound .syn-num-prefix, .syn-num-field.syn-num-compact.syn-pfs-bound .syn-num-suffix { font: var(--syn-num-field-num-compact-pfs-bound-num-prefix-font, 500 11px var(--type-family-mono)); color: var(--syn-num-field-num-compact-pfs-bound-num-prefix-color, var(--text-tertiary)); }
.syn-pfs-track { flex: 1; position: relative; height: var(--syn-pfs-track-height, 15px); }
.syn-pfs-rail { position: absolute; top: var(--syn-pfs-rail-top, 6px); left: 0; right: 0; height: var(--syn-pfs-rail-height, 3px); border-radius: var(--syn-pfs-rail-border-radius, var(--radius-2xs)); background: var(--syn-pfs-rail-background, var(--surface-inset)); }
.syn-pfs-fill { position: absolute; top: var(--syn-pfs-fill-top, 6px); height: var(--syn-pfs-fill-height, 3px); border-radius: var(--syn-pfs-fill-border-radius, var(--radius-2xs)); background: var(--syn-pfs-fill-background, var(--text-ink)); }
.syn-pfs-range { position: absolute; inset: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.syn-pfs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: var(--syn-pfs-range-webkit-slider-thumb-width, 13px); height: var(--syn-pfs-range-webkit-slider-thumb-height, 13px); border-radius: 50%; background: var(--syn-pfs-range-webkit-slider-thumb-background, var(--surface-plane)); border: var(--syn-pfs-range-webkit-slider-thumb-border, 1.5px solid var(--text-ink)); box-sizing: border-box; box-shadow: var(--syn-pfs-range-webkit-slider-thumb-box-shadow, var(--shadow-button)); cursor: pointer; }
.syn-pfs-range::-moz-range-thumb { pointer-events: auto; width: var(--syn-pfs-range-moz-range-thumb-width, 13px); height: var(--syn-pfs-range-moz-range-thumb-height, 13px); border-radius: 50%; background: var(--syn-pfs-range-moz-range-thumb-background, var(--surface-plane)); border: var(--syn-pfs-range-moz-range-thumb-border, 1.5px solid var(--text-ink)); box-sizing: border-box; box-shadow: var(--syn-pfs-range-moz-range-thumb-box-shadow, var(--shadow-button)); cursor: pointer; }
.syn-pfs-scale { display: flex; align-items: center; margin-top: var(--syn-pfs-scale-margin-top, 5px); font: var(--syn-pfs-scale-font, 400 10px var(--type-family-mono)); color: var(--syn-pfs-scale-color, var(--text-rider)); }
/* The dates seat: the segmented anatomy at 10.5px, seats flex:1 centered; the 4px ink dot slot
   is RESERVED (stable footprint) and inks only on an off-view seat carrying picks. */
.syn-pfs-dateseg { display: flex; background: var(--syn-pfs-dateseg-background, var(--surface-inset)); border-radius: var(--syn-pfs-dateseg-border-radius, var(--shape-radius-control)); padding: var(--syn-pfs-dateseg-padding, 3px); margin: var(--syn-pfs-dateseg-margin, 0 6px 6px); }
.syn-pfs-datesegbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: var(--syn-pfs-datesegbtn-padding, 3px 10px); border: none; border-radius: var(--syn-pfs-datesegbtn-border-radius, var(--radius-sm)); background: transparent; font: var(--syn-pfs-datesegbtn-font, 500 10.5px var(--type-family)); color: var(--syn-pfs-datesegbtn-color, var(--text-muted)); cursor: pointer; white-space: nowrap; }
.syn-pfs-datesegbtn.on { background: var(--syn-pfs-datesegbtn-on-background, var(--segment-active)); color: var(--syn-pfs-datesegbtn-on-color, var(--text-ink)); font-weight: var(--syn-pfs-datesegbtn-on-font-weight, 600); box-shadow: var(--syn-pfs-datesegbtn-on-box-shadow, var(--segment-active-shadow)); }
.syn-pfs-datedot { display: inline-block; width: var(--syn-pfs-datedot-width, 4px); height: var(--syn-pfs-datedot-height, 4px); border-radius: 50%; background: transparent; margin-left: var(--syn-pfs-datedot-margin-left, 5px); flex: none; }
.syn-pfs-datedot.is-on { background: var(--syn-pfs-datedot-is-on-background, var(--text-muted)); }
.syn-pfs-datechips { display: flex; flex-wrap: wrap; gap: var(--syn-pfs-datechips-gap, 4px); padding: var(--syn-pfs-datechips-padding, 2px 6px 4px); }
.syn-pfs-datechip { display: inline-flex; align-items: center; gap: var(--syn-pfs-datechip-gap, 4px); border: var(--syn-pfs-datechip-border, 1px solid var(--border-default)); border-radius: var(--syn-pfs-datechip-border-radius, var(--shape-radius-pill)); padding: var(--syn-pfs-datechip-padding, 2.5px 9px); background: transparent; font: var(--syn-pfs-datechip-font, 500 10.5px var(--type-family)); color: var(--syn-pfs-datechip-color, var(--text-body)); cursor: pointer; white-space: nowrap; }
.syn-pfs-datechip:hover { background: var(--syn-pfs-datechip-hover-background, var(--surface-hover)); }
.syn-pfs-datechip.on { border-color: var(--syn-pfs-datechip-on-border-color, var(--border-emphasis)); color: var(--syn-pfs-datechip-on-color, var(--text-ink)); font-weight: var(--syn-pfs-datechip-on-font-weight, 600); }
.syn-pfs-chipcount { font-weight: var(--syn-pfs-chipcount-font-weight, 400); color: var(--syn-pfs-chipcount-color, var(--text-rider)); }
.syn-pfs-daterange { display: flex; align-items: center; gap: var(--syn-pfs-daterange-gap, 6px); padding: var(--syn-pfs-daterange-padding, 4px 6px 2px); }
.syn-pfs-daterange .syn-dtp-wrap { flex: 1; min-width: 0; }
.syn-pfs-rangeword { font: var(--syn-pfs-rangeword-font, 400 10.5px var(--type-family)); color: var(--syn-pfs-rangeword-color, var(--text-tertiary)); flex: none; }
.syn-pfs-seatclear { display: flex; justify-content: flex-end; padding: var(--syn-pfs-seatclear-padding, 0 6px 2px); }
.syn-pfs-custsearch { display: flex; align-items: center; border: var(--syn-pfs-custsearch-border, 1px solid var(--border-default)); border-radius: var(--syn-pfs-custsearch-border-radius, var(--radius-sm)); background: var(--syn-pfs-custsearch-background, var(--surface-plane)); padding: var(--syn-pfs-custsearch-padding, 4px 8px); margin: var(--syn-pfs-custsearch-margin, 0 6px 4px); font: var(--syn-pfs-custsearch-font, 400 11.5px var(--type-family)); color: var(--syn-pfs-custsearch-color, var(--text-faint)); }
.syn-pfs-custsearch:focus-within { border-color: var(--syn-pfs-custsearch-focus-within-border-color, var(--border-emphasis)); }
.syn-pfs-custsearch input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: var(--syn-pfs-custsearch-input-font, 400 11.5px var(--type-family)); color: var(--syn-pfs-custsearch-input-color, var(--text-body)); padding: 0; }
.syn-pfs-custsearch input::placeholder { color: var(--syn-pfs-custsearch-input-placeholder-color, var(--text-faint)); }
/* The sticky footer (B5, ruling 11): the live match line left-anchored · quiet Clear all · the
   ink-commit Done. */
.syn-pfs-footer { display: flex; align-items: center; flex: none; border-top: var(--syn-pfs-footer-border-top, 1px solid var(--border-hairline)); margin-top: var(--syn-pfs-footer-margin-top, 10px); padding: var(--syn-pfs-footer-padding, 9px 6px 2px); }
.syn-pfs-matchline { font: var(--syn-pfs-matchline-font, 500 12px var(--type-family)); color: var(--syn-pfs-matchline-color, var(--text-ink)); }
.syn-pfs-clearall { border: none; background: transparent; padding: var(--syn-pfs-clearall-padding, 0 12px); font: var(--syn-pfs-clearall-font, 500 11.5px var(--type-family)); color: var(--syn-pfs-clearall-color, var(--text-tertiary)); cursor: pointer; }
.syn-pfs-clearall:hover { color: var(--syn-pfs-clearall-hover-color, var(--text-ink)); }
.syn-pfs-done { border: none; background: var(--syn-pfs-done-background, var(--text-ink)); border-radius: var(--syn-pfs-done-border-radius, var(--radius-nav)); padding: var(--syn-pfs-done-padding, 5px 14px); font: var(--syn-pfs-done-font, 500 11.5px var(--type-family)); color: var(--syn-pfs-done-color, var(--text-on-ink)); cursor: pointer; }

.syn-pipe-controlrow .syn-filterpanel-btn.is-active { border-color: var(--syn-pipe-controlrow-filterpanel-btn-is-active-border-color, var(--text-ink)); color: var(--syn-pipe-controlrow-filterpanel-btn-is-active-color, var(--text-ink)); font-weight: var(--syn-pipe-controlrow-filterpanel-btn-is-active-font-weight, 600); }
.syn-pipe-controlrow .syn-filterpanel-chevron { display: none; }   /* Ken 2026-08-17: no chevron on the anchored-popover openers */
.syn-pipe-controlrow .syn-filterpanel-summary { flex: none; }

/* Q116 (Ken's 2026-08-07 ruling): the canonical FilterPanel — the ONE grid-filter idiom
   app-wide (the Q111 bar treatment + trial toggle DIED with the ruling). The trigger keeps the
   Q84 de-accent posture (flag 18: border-strong + ink when active, accent only on the count
   badge); chevron rotation is instant (motion posture: none, flag 13). */
/* Q132: trued to the ratified ToolbarButton grammar (one treatment for Filters + Columns). */
/* Q250(iii) — the 27a POPOVER anatomy (R10 entity-people/orgs/experiences comps; HB-QC2-3, lane B files the
   same): trigger h28 (+1 border) surface/--border-default r8, 500 11.5 --text-body, gap 6, 0/11, NO CHEVRON
   (Ken 2026-08-17 — anchored-popover openers stay visible; the ⌄ dies app-wide); popover w300 surface /
   --border-emphasis r10 `0 12px 32px rgba(23,23,23,.16)` pad 10/14/12; sections gap 2 pad 8/0/4; eyebrow
   600 9 .08em uppercase --text-disabled + All · None 500 10.5 accent (· --text-faint); rows gap 8 pad 4/0
   with the 13×13 r3 check box (off: 1px --border-emphasis on --surface; on: --text-primary fill, #fff ✓ 9px),
   400 12 --text-body, count 400 11 --text-disabled tabular; foot --border-row mt6 pt10 gap 10, help 400
   10.5/1.5 --text-tertiary, Reset bordered r7 4/10 500 11 --text-body. CHROME class: px. */
.syn-filterpanel-btn { display: inline-flex; align-items: center; gap: var(--syn-filterpanel-btn-gap, 6px); height: var(--syn-filterpanel-btn-height, 28px); box-sizing: content-box; padding: var(--syn-filterpanel-btn-padding, 0 11px); border: var(--syn-filterpanel-btn-border, 1px solid var(--border-default)); border-radius: var(--syn-filterpanel-btn-border-radius, var(--shape-radius-control)); background: var(--syn-filterpanel-btn-background, var(--surface-plane)); font-size: var(--syn-filterpanel-btn-font-size, 11.5px); line-height: normal; font-weight: var(--syn-filterpanel-btn-font-weight, 500); font-family: var(--syn-filterpanel-btn-font-family, var(--type-family)); color: var(--syn-filterpanel-btn-color, var(--text-body)); cursor: pointer; white-space: nowrap; }
.syn-filterpanel-btn:hover { background: var(--syn-filterpanel-btn-hover-background, var(--surface-hover)); }
.syn-filterpanel-btn.is-active { border-color: var(--syn-filterpanel-btn-is-active-border-color, var(--text-ink)); color: var(--syn-filterpanel-btn-is-active-color, var(--text-ink)); font-weight: var(--syn-filterpanel-btn-is-active-font-weight, 600); }
/* QB11 (relay-18 F-3, held to here): the Filters applied-count badge IS the one count-dot species — the
   canonical values verbatim (QC7 32l): --text-primary fill, white mono figure 600 9px, 15px round, pill at
   two digits; the DARK register = Ken's ratified ink-inversion pair (Q267): the dot --text-primary dark,
   the figure #171717. Never an accent variant. (Q267's promotion to one shared rule absorbs this line.) */
.syn-filterpanel-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--syn-filterpanel-badge-min-width, 15px); height: var(--syn-filterpanel-badge-height, 15px); padding: var(--syn-filterpanel-badge-padding, 0 4px); border-radius: var(--syn-filterpanel-badge-border-radius, var(--shape-radius-pill)); background: var(--syn-filterpanel-badge-background, var(--text-ink)); color: var(--syn-filterpanel-badge-color, var(--text-on-accent)); font: var(--syn-filterpanel-badge-font, 600 9.5px var(--type-family-mono)); line-height: var(--syn-filterpanel-badge-line-height, 1); }
.dark .syn-filterpanel-badge { color: var(--syn-filterpanel-badge-color, var(--text-on-accent-dark)); }   /* Q291 (F-6): the count-dot canon's dark pair */
.dark .syn-filterpanel-badge { color: var(--syn-filterpanel-badge-color, var(--text-on-accent-dark)); }
.syn-filterpanel-chevron { display: none; }   /* Q250: the chevron is DEAD app-wide (Ken 2026-08-17) */
.syn-filterpanel-summary { font-size: var(--syn-filterpanel-summary-font-size, 11.5px); color: var(--syn-filterpanel-summary-color, var(--text-tertiary)); max-width: var(--syn-filterpanel-summary-max-width, 320px); overflow-wrap: break-word; }   /* Q341 C2: wraps inside the cap */
.syn-popover.syn-filterpanel-pop { width: var(--syn-popover-filterpanel-pop-width, 300px); box-sizing: border-box; max-height: var(--syn-popover-filterpanel-pop-max-height, 460px); display: flex; flex-direction: column; border: var(--syn-popover-filterpanel-pop-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-popover-filterpanel-pop-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-popover-filterpanel-pop-box-shadow, var(--shadow-menu)); padding: var(--syn-popover-filterpanel-pop-padding, 10px 14px 12px); }
.syn-filterpanel-body { overflow: auto; padding: 0; display: flex; flex-direction: column; gap: 0; }
.syn-filterpanel-footer { border-top: var(--syn-filterpanel-footer-border-top, 1px solid var(--border-hairline)); background: transparent; margin-top: var(--syn-filterpanel-footer-margin-top, 6px); padding: var(--syn-filterpanel-footer-padding, 10px 0 0); display: flex; align-items: center; justify-content: space-between; gap: var(--syn-filterpanel-footer-gap, 10px); }
.syn-filterpanel-help { font-size: var(--syn-filterpanel-help-font-size, 10.5px); line-height: var(--syn-filterpanel-help-line-height, 1.5); color: var(--syn-filterpanel-help-color, var(--text-tertiary)); flex: 1; }
.syn-filterpanel-reset { display: inline-flex; align-items: center; gap: var(--syn-filterpanel-reset-gap, 6px); flex-shrink: 0; padding: var(--syn-filterpanel-reset-padding, 4px 10px); border: var(--syn-filterpanel-reset-border, 1px solid var(--border-default)); border-radius: var(--syn-filterpanel-reset-border-radius, var(--radius-nav)); background: var(--syn-filterpanel-reset-background, var(--surface-plane)); font-size: var(--syn-filterpanel-reset-font-size, 11.5px); font-weight: var(--syn-filterpanel-reset-font-weight, 500); font-family: var(--syn-filterpanel-reset-font-family, var(--type-family)); color: var(--syn-filterpanel-reset-color, var(--text-body)); cursor: pointer; white-space: nowrap; }
.syn-filterpanel-reset:hover { background: var(--syn-filterpanel-reset-hover-background, var(--surface-hover)); color: var(--syn-filterpanel-reset-hover-color, var(--text-ink)); }
.syn-filterpanel-reset .syn-icon { display: none; }   /* the 27a Reset carries no glyph */

/* The shared facet-section grain inside the panel (mockup FacetSection :496-514): uppercase
   micro-label + All/None links + check-rows (selected = accent check + 600, unselected quiet). */
.syn-facetsec { display: flex; flex-direction: column; gap: var(--syn-facetsec-gap, 2px); padding: var(--syn-facetsec-padding, 8px 0 4px); }
.syn-facetsechead { display: flex; align-items: baseline; gap: var(--syn-facetsechead-gap, 8px); padding: 0; }
.syn-facetseclabel { font-size: var(--syn-facetseclabel-font-size, 9.5px); font-weight: var(--syn-facetseclabel-font-weight, 600); text-transform: var(--syn-facetseclabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-facetseclabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-facetseclabel-color, var(--text-faint)); flex: 1; }
.syn-facetlinks { display: inline-flex; gap: var(--syn-facetlinks-gap, 8px); flex-shrink: 0; align-items: baseline; }
.syn-facetlinks button, .syn-facetlinks .syn-link { border: none; background: none; padding: 0; font: var(--syn-facetlinks-button-font, 500 10.5px var(--type-family)); color: var(--syn-facetlinks-button-color, var(--accent-action)); cursor: pointer; text-decoration: var(--syn-facetlinks-button-text-decoration, none); }
.syn-facetlinks button:hover, .syn-facetlinks .syn-link:hover { text-decoration: var(--syn-facetlinks-button-hover-text-decoration, underline); }
.syn-facetlinks-sep { font: var(--syn-facetlinks-sep-font, 400 10.5px var(--type-family)); color: var(--syn-facetlinks-sep-color, var(--text-rider)); }
.syn-facetopt { display: flex; align-items: center; gap: var(--syn-facetopt-gap, 8px); width: 100%; padding: var(--syn-facetopt-padding, 4px 0); border: none; border-radius: 0; background: none; font-family: var(--syn-facetopt-font-family, var(--type-family)); font-size: var(--syn-facetopt-font-size, 12px); line-height: normal; font-weight: var(--syn-facetopt-font-weight, 400); text-align: left; white-space: nowrap; color: var(--syn-facetopt-color, var(--text-body)); cursor: pointer; }
.syn-facetopt:hover .syn-facetcheck { border-color: var(--syn-facetopt-hover-facetcheck-border-color, var(--border-strong)); }
.syn-facetopt.on { font-weight: var(--syn-facetopt-on-font-weight, 400); color: var(--syn-facetopt-on-color, var(--text-body)); }
.syn-facetcheck { width: var(--syn-facetcheck-width, 13px); height: var(--syn-facetcheck-height, 13px); box-sizing: border-box; border-radius: var(--syn-facetcheck-border-radius, var(--radius-3xs)); border: var(--syn-facetcheck-border, 1px solid var(--border-emphasis)); background: var(--syn-facetcheck-background, var(--surface-plane)); flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--syn-facetcheck-color, var(--text-on-accent)); }
.syn-facetopt.on .syn-facetcheck { background: var(--syn-facetopt-on-facetcheck-background, var(--text-ink)); border-color: var(--syn-facetopt-on-facetcheck-border-color, var(--text-ink)); }
.syn-facetcheck .syn-icon { width: var(--syn-facetcheck-icon-width, 9px); height: var(--syn-facetcheck-icon-height, 9px); }
.syn-facetopt-dot { width: var(--syn-facetopt-dot-width, 6px); height: var(--syn-facetopt-dot-height, 6px); border-radius: 50%; flex-shrink: 0; }
.syn-facetopt-count { margin-left: auto; font-size: var(--syn-facetopt-count-font-size, 11.5px); font-weight: var(--syn-facetopt-count-font-weight, 400); color: var(--syn-facetopt-count-color, var(--text-faint)); font-variant-numeric: var(--syn-facetopt-count-font-variant-numeric, tabular-nums); }

/* The grid host (annex §1.5/§2): fills the remaining page height; the DxGrid scrolls both axes
   inside the renderer's rounded frame. The .syn-listgrid-dx class in these selectors is
   specificity ballast — the renderer's scoped rules compile to three class-level simple
   selectors, and these hosting overrides must out-rank them deterministically. */
/* UD1 (Relay 30 §2 REVISED): the table surface re-seats as a TOP-LEVEL PLANE on the canvas at the
   20px gutter (Q84's full-bleed edge-to-edge ground is superseded at frame level); the three-row
   chrome stays on the canvas and the 2px gradient hairline stays the table's crown — seated INSIDE
   the plane's top edge (first child; the plane is now a flex column). */
.syn-pipe-hairline { margin-top: 0; height: var(--syn-pipe-hairline-height, 2px); flex-shrink: 0; background: var(--syn-pipe-hairline-background, linear-gradient(90deg, var(--hairline-accent) 0%, color-mix(in srgb, var(--hairline-accent) 40%, transparent) 38%, transparent 75%)); }
/* Q408(a) (relay 38 delta 1 — the fifth signal-economy seat): the Awarded To cell's OrgRef folds its
   accent ink to plain (the .syn-wl-name precedent); the ref stays inert (the number link is the door). */
.syn-pipe-awardee .syn-ref { color: var(--syn-pipe-awardee-ref-color, var(--text-ink)); }

.syn-pipe-grid { flex: 1; min-height: 0; padding: 0; background: var(--syn-pipe-grid-background, var(--surface-plane)); margin: var(--syn-pipe-grid-margin, 0 20px 20px); border: var(--syn-pipe-grid-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-pipe-grid-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-pipe-grid-box-shadow, var(--elevation-plane)); overflow: clip; display: flex; flex-direction: column; }
/* Q151: the ballast class is REQUIRED on the border/radius kills — the bare two-class selector
   ties the renderer's scoped rule (0,2,0) and loses on load order, so prod kept the rounded
   bordered frame. The comp's grid is SQUARE and full-bleed (border-top only, no radius). */
.syn-pipe-grid .syn-listgrid.syn-listgrid-dx { border: 0; border-radius: 0; }
/* (UD14: the fill chain — the grid + DX scroll viewer filling the clipped plane — is the renderer's own
   since the directories became the second host; ListRenderer.razor.css.) */
/* UD19 (the four-grid harmonization): the row seams (--border-row, radius 0 — Q151), the header band (Q358's C1
   binding — 600 10px +.08em, once this sheet's (0,4,1) override of the directories' head), the full-bleed table,
   the filler-column seams, the Verbose/Condensed cell grammar and the left-align neutralizer are THE ONE GRID
   GRAMMAR in ListRenderer.razor.css — every grid's, no host copy. Only the Pipeline's own species stay here. */
/* The sticky-column edge shadow — the page's ONLY motion (0.25s, driven by synergyDom.watchXScroll). */
.syn-pipe-grid .syn-listgrid-dx td.syn-listgrid-fixed-last,
.syn-pipe-grid .syn-listgrid-dx th.syn-listgrid-fixed-last { transition: var(--syn-pipe-grid-listgrid-dx-td-listgrid-fixed-last-transition, box-shadow var(--motion-duration-slow)); }
.syn-pipe-grid.is-xscrolled .syn-listgrid-dx td.syn-listgrid-fixed-last,
.syn-pipe-grid.is-xscrolled .syn-listgrid-dx th.syn-listgrid-fixed-last { box-shadow: var(--kit-grid-is-xscrolled-listgrid-dx-td-listgrid-fixed-last-box-shadow, var(--shadow-sticky-edge)); }
/* Verbose wraps cell content (annex §9); Condensed is the one-line nowrap/ellipsis treatment at the tighter
   row height — the renderer's grammar since UD19 (.syn-listgrid.is-condensed). Condensed also compacts the
   in-cell control chrome (Ken, P3 breakpoint: "more compact") — pills, picker triggers, and cell editors
   drop to the mockup's tight grain inside the condensed grid only; Verbose and every other surface keep
   the canonical sizes. */
.syn-pipe-grid.is-condensed .syn-enum-pill { padding: var(--syn-pipe-grid-is-condensed-enum-pill-padding, 1px 9px); }
.syn-pipe-grid.is-condensed .syn-enum-inline { padding: var(--syn-pipe-grid-is-condensed-enum-inline-padding, 2px 8px); }
.syn-pipe-grid.is-condensed .syn-ms-trigger { min-height: 0; padding-top: var(--syn-pipe-grid-is-condensed-ms-trigger-padding-top, 1px); padding-bottom: var(--syn-pipe-grid-is-condensed-ms-trigger-padding-bottom, 1px); }
.syn-pipe-grid.is-condensed .syn-pickerbtn { padding-top: var(--syn-pipe-grid-is-condensed-pickerbtn-padding-top, 2px); padding-bottom: var(--syn-pipe-grid-is-condensed-pickerbtn-padding-bottom, 2px); }
.syn-pipe-grid.is-condensed .syn-ef-ro { padding: 0; }
/* One-line cells all the way: the single-person people list lays out horizontally (person + the close act +
   the assign ghost inline — the verbose vertical stack is a Verbose treatment), and the
   multi-select trigger keeps its chips on one clipped line instead of wrapping. */
.syn-pipe-grid.is-condensed .syn-pipe-peoplelist { flex-direction: row; align-items: center; gap: var(--syn-pipe-grid-is-condensed-pipe-peoplelist-gap, 8px); }
.syn-pipe-grid.is-condensed .syn-ms-trigger { flex-wrap: nowrap; overflow: hidden; }
/* Header column dividers — the resize-grab affordance (Ken, P3 breakpoint) — are CANONICAL on the
   ListRenderer channel since QB11 / R10-K32 (every grid inherits). The pinned seam already draws
   the emphasis divider, so the cell right after it stays clean (the pipeline's one exception). */
.syn-pipe-grid .syn-listgrid-dx th.syn-listgrid-fixed-last + th.syn-listgrid-th { border-left-width: 0; }
/* Inactive rows (Result No-Bid / Canceled, revealed by the Inactive facet): de-emphasized —
   tertiary fill + tertiary text (annex §2). Hover still lifts the row (the mockup's generic
   row hover), stated explicitly so it out-ranks this rule regardless of sheet order. */
/* Q84 flag 21: the inactive wash remaps to --bg-secondary (--bg-tertiary is now the segmented
   track and too heavy for a row fill). */
.syn-pipe-grid .syn-listgrid-dx tr.syn-listgrid-row.is-inactive { background: var(--syn-pipe-grid-listgrid-dx-tr-listgrid-row-is-inactive-background, var(--bg-secondary)); color: var(--syn-pipe-grid-listgrid-dx-tr-listgrid-row-is-inactive-color, var(--text-tertiary)); }
.syn-pipe-grid .syn-listgrid-dx tr.syn-listgrid-row.is-inactive:hover { background: var(--kit-pipe-grid-listgrid-dx-tr-listgrid-row-is-inactive-hover-background, var(--surface-hover)); }

/* Grid cells (Q84 de-pilled treatments per the patched mockup §2 table). */
.syn-pipe-numcell { display: inline-flex; align-items: center; gap: var(--syn-pipe-numcell-gap, 6px); }
.syn-pipe-numlink { font: var(--syn-pipe-numlink-font, var(--type-c4)); font-family: var(--syn-pipe-numlink-font-family, var(--type-family-mono)); color: var(--syn-pipe-numlink-color, var(--accent-action)); text-decoration: var(--syn-pipe-numlink-text-decoration, none); white-space: nowrap; font-variant-numeric: var(--syn-pipe-numlink-font-variant-numeric, tabular-nums); }   /* UD19: the id link binds the C4 rung (500 11.5) in the mono face */
.syn-pipe-numlink:hover { text-decoration: var(--syn-pipe-numlink-hover-text-decoration, underline); }
/* Title: THE ROW PRIMARY — the renderer's .syn-cell-primary register (UD19: R6 ink, no hover underline, the
   density state decides wrap/ellipsis); the id link carries the accent (DESIGN_LANGUAGE §3 color economy). */
.syn-pipe-untitled { font-style: var(--syn-pipe-untitled-font-style, italic); color: var(--syn-pipe-untitled-color, var(--text-tertiary)); }
/* Q393: Condensed = ONE line — the title (the renderer's block/ellipsis primary) shrinks, the badge keeps its box. */
.syn-pipe-grid.is-condensed .syn-pipe-titlecell { display: flex; align-items: center; min-width: 0; }
/* Q260: the PLAIN interim demo badge (CD's drawing pending) — a quiet mono tag, chrome class */
/* Q393 (relay 37 SS4, d4's 9001 row): THE DRAWN QUIET DEMO FACE — 9px mono uppercase .07em, --border-default edge,
   --bg-secondary fill, 8px off the title; in Condensed the title truncates and the badge does not (flex: none). */
.syn-demo-badge { display: inline-block; flex: none; margin-left: var(--syn-demo-badge-margin-left, 8px); padding: var(--syn-demo-badge-padding, 1px 5px); border: var(--syn-demo-badge-border, 1px solid var(--border-default)); border-radius: var(--syn-demo-badge-border-radius, var(--radius-xs)); background: var(--syn-demo-badge-background, var(--bg-secondary)); font: var(--syn-demo-badge-font, 600 9px var(--type-family-mono)); letter-spacing: var(--syn-demo-badge-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-demo-badge-text-transform, var(--type-label-transform)); color: var(--syn-demo-badge-color, var(--text-tertiary)); vertical-align: var(--syn-demo-badge-vertical-align, 1px); }
.syn-pipe-empty { color: var(--syn-pipe-empty-color, var(--text-faint)); }
/* Q393 (d4): THE EMPTY FACES — filters active = the honest line + the one quiet act; bare no-rows = the teach line
   (the + New TOPR page act is the one creator; no phantom button). Seated in the renderer's sticky empty area. */
.syn-pipe-emptyline { font: var(--syn-pipe-emptyline-font, 400 13px var(--type-family)); color: var(--syn-pipe-emptyline-color, var(--text-tertiary)); }
.syn-pipe-emptyact { display: inline-block; margin-top: var(--syn-pipe-emptyact-margin-top, 8px); border: none; background: transparent; padding: 0; font: var(--syn-pipe-emptyact-font, 500 11.5px var(--type-family)); color: var(--syn-pipe-emptyact-color, var(--text-body)); cursor: pointer; }
.syn-pipe-emptyact:hover { color: var(--syn-pipe-emptyact-hover-color, var(--text-ink)); }
.syn-pipe-none { color: var(--syn-pipe-none-color, var(--text-tertiary)); }
/* De-pilled enum rest states: plain body text; Stage = 6px dot + 500 text. */
.syn-pipe-plainval { font: var(--syn-pipe-plainval-font, var(--type-r5)); color: var(--syn-pipe-plainval-color, var(--text-body)); }   /* UD19: R5 by token (the cell's own role) */
.syn-pipe-stageval { display: inline-flex; align-items: center; gap: var(--syn-pipe-stageval-gap, 7px); font: var(--syn-pipe-stageval-font, var(--type-r6)); color: var(--syn-pipe-stageval-color, var(--text-body)); }   /* UD19: R6 by token */
/* P-win: the big decision figure — 17px/650 tabular, banded ceiling-relative ([REBUILD-DL-4]). UD24: F4 row-figure by token (Relay 36 §4's named specimen, blessed as drawn). */
.syn-pipe-pwin { font: var(--syn-pipe-pwin-font, var(--type-f4)); line-height: inherit; font-variant-numeric: var(--syn-pipe-pwin-font-variant-numeric, tabular-nums); letter-spacing: var(--syn-pipe-pwin-letter-spacing, -0.01em); color: var(--syn-pipe-pwin-color, var(--text-ink)); }   /* Q393: F4 re-valued 17->13 at the token (canon delta 2); bands kept */
.syn-pipe-pwin.is-strong { color: var(--syn-pipe-pwin-is-strong-color, var(--pwin-strong)); }
.syn-pipe-pwin.is-weak { color: var(--syn-pipe-pwin-is-weak-color, var(--pwin-weak)); }

/* Debrief cell (Q50 / [REBUILD-P8-17]): quiet status chip + the Received-only ↗ deep link. */
/* Q284(d): the shrink contract — the link text carries the debrief URL's {host} (unbounded). */
.syn-pipe-debrief { display: inline-flex; align-items: center; gap: var(--syn-pipe-debrief-gap, 8px); max-width: 100%; }
.syn-pipe-debrieflink { display: inline-flex; align-items: center; gap: var(--syn-pipe-debrieflink-gap, 3px); color: var(--syn-pipe-debrieflink-color, var(--accent-action-active)); text-decoration: var(--syn-pipe-debrieflink-text-decoration, none); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* UD19: the cell's size (R5), no size of its own */
.syn-pipe-debrieflink:hover { text-decoration: var(--syn-pipe-debrieflink-hover-text-decoration, underline); }
.syn-pipe-chiplist { display: flex; flex-wrap: wrap; gap: var(--syn-pipe-chiplist-gap, 4px); }
/* Q393 (d4 .chip): the ONE neutral chip family at the GRID register — 500 11px/15px, --text-body ink over --bg-tertiary
   (the canonical .syn-chip's 12px/--text-secondary is the card register; this is the grid's density inset, the
   .is-condensed pill/inline insets' precedent). */
.syn-pipe-grid tr.syn-listgrid-row .syn-chip { font: var(--syn-pipe-grid-tr-listgrid-row-chip-font, 500 11px/15px var(--type-family)); color: var(--syn-pipe-grid-tr-listgrid-row-chip-color, var(--text-body)); padding: var(--syn-pipe-grid-tr-listgrid-row-chip-padding, 2px 9px); }
/* Q393 (d4, condensed): a chip list folds to the first entry + a faint "+n" rider; a name list is the people grammar
   (plain names — the avatar tiles retired from grid rows; canon delta 1). */
.syn-pipe-chiplist.is-condensed { flex-wrap: nowrap; align-items: center; }
.syn-pipe-chipmore { font: var(--syn-pipe-chipmore-font, 500 11px var(--type-family)); color: var(--syn-pipe-chipmore-color, var(--text-rider)); white-space: nowrap; }
.syn-pipe-namelist { display: flex; flex-direction: column; gap: var(--syn-pipe-namelist-gap, 5px); align-items: flex-start; }
.syn-pipe-namelist.is-condensed { flex-direction: row; align-items: center; gap: var(--syn-pipe-namelist-is-condensed-gap, 6px); }
.syn-pipe-name { white-space: nowrap; }
/* Due: 15px date-only, urgency-graded by text intensity — red reserved for overdue (§5). UD24: F5 due-figure by token (named out of R3's path; the states re-weight). */
.syn-pipe-due { white-space: nowrap; font: var(--syn-pipe-due-font, var(--type-f5)); }
.syn-pipe-due.is-overdue { color: var(--syn-pipe-due-is-overdue-color, var(--state-attention-text)); font-weight: var(--syn-pipe-due-is-overdue-font-weight, 700); }
.syn-pipe-due.is-urgent { color: var(--syn-pipe-due-is-urgent-color, var(--text-ink)); font-weight: var(--syn-pipe-due-is-urgent-font-weight, 700); }
.syn-pipe-due.is-warn { color: var(--syn-pipe-due-is-warn-color, var(--due-warn)); font-weight: var(--syn-pipe-due-is-warn-font-weight, 600); }
.syn-pipe-due.is-far { color: var(--syn-pipe-due-is-far-color, var(--due-far)); font-weight: var(--syn-pipe-due-is-far-font-weight, 500); }
.syn-pipe-due.is-none { color: var(--syn-pipe-due-is-none-color, var(--text-faint)); font-weight: var(--syn-pipe-due-is-none-font-weight, 400); }
.syn-pipe-mono { font: var(--syn-pipe-mono-font, var(--type-c4)); font-weight: var(--syn-pipe-mono-font-weight, 400); font-family: var(--syn-pipe-mono-font-family, var(--type-family-mono)); color: var(--syn-pipe-mono-color, var(--text-tertiary)); }   /* UD19: the C4 rung's size in the mono face */
/* Money: 600 tabular INK, sans (the mockup de-monos money; exact figure stays the tooltip). */
.syn-pipe-money { font-variant-numeric: var(--syn-pipe-money-font-variant-numeric, tabular-nums); font-weight: var(--syn-pipe-money-font-weight, 600); color: var(--syn-pipe-money-color, var(--text-ink)); }
/* Jump cells: hover lifts the target and turns the ↗ accent (annex §2). */
.syn-pipe-jump { display: inline-flex; align-items: center; gap: var(--syn-pipe-jump-gap, 5px); padding: var(--syn-pipe-jump-padding, 2px 6px); margin: var(--syn-pipe-jump-margin, -2px -6px); border-radius: var(--syn-pipe-jump-border-radius, var(--radius-sm)); color: inherit; text-decoration: var(--syn-pipe-jump-text-decoration, none); }
.syn-pipe-jump:hover { background: var(--syn-pipe-jump-hover-background, var(--bg-secondary)); }
.syn-pipe-jump:hover svg { color: var(--syn-pipe-jump-hover-svg-color, var(--accent-action)); }
.syn-pipe-jump-stack { align-items: flex-start; }
.syn-pipe-notes-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.syn-pipe-notes.is-condensed .syn-pipe-notes-text { -webkit-line-clamp: 1; }
.syn-pipe-editcell { display: block; min-width: 0; }
.syn-pipe-cellerror { display: block; color: var(--syn-pipe-cellerror-color, var(--state-attention)); font: var(--syn-pipe-cellerror-font, var(--type-c4)); font-weight: var(--syn-pipe-cellerror-font-weight, 400); margin-top: var(--syn-pipe-cellerror-margin-top, 2px); }   /* UD19: C4's size */

/* People cells (annex §3 people columns; G10-5 presentation). The the close act shows on person-row hover;
   the ghost "+ assign" shows on cell hover. */
.syn-pipe-peoplecell { display: block; min-width: 0; }
.syn-pipe-peoplelist { display: flex; flex-direction: column; gap: var(--syn-pipe-peoplelist-gap, 5px); align-items: flex-start; }
.syn-pipe-personrow { display: flex; align-items: center; gap: var(--syn-pipe-personrow-gap, 6px); }
.syn-pipe-personremove { border: none; background: none; padding: var(--syn-pipe-personremove-padding, 0 2px); font-size: var(--syn-pipe-personremove-font-size, 0.75rem); line-height: var(--syn-pipe-personremove-line-height, 1); color: var(--syn-pipe-personremove-color, var(--text-tertiary)); cursor: pointer; border-radius: var(--syn-pipe-personremove-border-radius, var(--radius-xs)); opacity: var(--syn-pipe-personremove-opacity, 0); }
.syn-pipe-personrow:hover .syn-pipe-personremove { opacity: var(--syn-pipe-personrow-hover-pipe-personremove-opacity, 1); }
.syn-pipe-personremove:hover { color: var(--syn-pipe-personremove-hover-color, var(--state-attention)); }
.syn-pipe-assign { color: var(--syn-pipe-assign-color, var(--text-tertiary)); }
.syn-pipe-assign.is-ghost { opacity: var(--syn-pipe-assign-is-ghost-opacity, 0); }
td.syn-listgrid-cell:hover .syn-pipe-assign.is-ghost { opacity: var(--kit-td-syn-listgrid-cell-hover-pipe-assign-is-ghost-opacity, 1); }

/* Column chooser popover (G5 owner enhancement; AnchoredPopover supplies the chrome). */
/* Q261: the pipeline Columns chooser RETIRED — the pipeline rides the canonical ColumnsPanel (.syn-colpanel-*). */

/* ── Anchored popover (UI_SPEC §2) + the canonical DateTimePicker (§3) ─────────
   Ported verbatim from the mockup DateTimePicker inline styles (CaptureCockpit…jsx:3956-4043);
   pixel/rem literals and CSS-var tokens are 1:1 with the JSX. See docs/ui-fidelity/DateTimePicker.md. */
/* Q341 — THE POPUP-ANATOMY LAW AT THE SHELL (CONTROL-ANATOMY §1 R1–R4; Ken's amendment:
   a popup carries a REASONABLE MINIMUM width and WRAPS long values; the failure classes are
   truncation AND outlier-max sizing). The one shell now declares the policy every anchored
   popup inherits: a floor (--popover-floor, 160px = the smallest standing precedent: EnumSelect's
   panel / the rail menu), a cap (--popover-max, 520px — an outlier-long member wraps instead of
   driving the width), the viewport clamp (never wider than the window less the 8px insets —
   place() narrows, it no longer only slides), and wrapping by default (an unbreakable run breaks
   rather than overflowing). matchWidth seats take width = max(anchor, floor) from the positioner
   and pin their own max-width to it inline (a full-width field's popup still matches its field
   exactly, wider than the cap when the field is). Shells that own a wider drawn width
   (.syn-pfs-sheet 920) raise --popover-max on their own class. */
.syn-popover {
    background: var(--syn-popover-background, var(--surface-plane)); border: var(--syn-popover-border, 1px solid var(--border-default)); border-radius: var(--syn-popover-border-radius, var(--shape-radius-sheet)); box-shadow: var(--syn-popover-box-shadow, var(--elevation-overlay));
    box-sizing: border-box;
    min-width: var(--popover-floor, 160px);
    max-width: var(--syn-popover-max-width, min(var(--popover-max, 520px), calc(100vw - 16px)));
    overflow-wrap: break-word;
}

@keyframes synFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.syn-fade-in { animation: synFadeIn var(--motion-duration-fast) var(--motion-easing); }
@keyframes synFadeOut { to { opacity: 0; } }

.syn-dtp-wrap { position: relative; }
/* Q181 (C15, comps 8b/4d): bordered radius-8 trigger 8px/11px — set value 600 13 ink, empty
   400 tertiary, the faint calendar glyph right (markup order). */
.syn-dtp { appearance: none; display: flex; align-items: center; gap: var(--syn-dtp-gap, 8px); width: 100%; text-align: left; padding: var(--syn-dtp-padding, 8px 11px); border: var(--syn-dtp-border, 1px solid var(--border-default)); border-radius: var(--syn-dtp-border-radius, var(--shape-radius-control)); background: var(--syn-dtp-background, var(--surface-plane)); font-size: var(--ctl-size, 0.8125rem); font-weight: var(--syn-dtp-font-weight, 600); font-family: inherit; color: var(--syn-dtp-color, var(--text-ink)); cursor: pointer; transition: var(--syn-dtp-transition, border-color var(--motion-duration-base), background var(--motion-duration-base)); }
.syn-dtp.is-empty { font-weight: var(--syn-dtp-is-empty-font-weight, 400); color: var(--syn-dtp-is-empty-color, var(--text-tertiary)); }
.syn-dtp.is-inline { padding: var(--syn-dtp-is-inline-padding, 5px 8px); border-color: transparent; background: transparent; }
.syn-dtp.is-inline:hover, .syn-dtp.is-open { border-color: var(--syn-dtp-is-inline-hover-border-color, var(--border-default)); background: var(--syn-dtp-is-inline-hover-background, var(--surface-plane)); }
.syn-dtp.is-expected { border: var(--syn-dtp-is-expected-border, 1px dashed var(--accent-action-active)); background: var(--syn-dtp-is-expected-background, var(--accent-muted)); color: var(--syn-dtp-is-expected-color, var(--accent-action-active)); }
/* Q277 (1) — THE CANONICAL FIX: a date value NEVER shatters. `word-break: break-word` let a
   squeezed seat wrap the armed value one character per line (Ken's 2026-08-19 catch on the
   schedule modal — a property of the control-in-a-squeezed-seat, app-wide). The label is
   single-line by law and ELLIPSIZES as the graceful floor; the anchored popover carries the
   full value for editing (the drawn armed anatomy). min-width:0 keeps the chain shrinkable. */
.syn-dtp-label { flex: 1; min-width: 0; line-height: var(--syn-dtp-label-line-height, 1.3); overflow-wrap: break-word; }   /* Q341 V4: wraps */
.syn-dtp-clear { display: inline-flex; flex-shrink: 0; color: var(--syn-dtp-clear-color, var(--text-tertiary)); cursor: pointer; }

/* Q119: the declared cap makes the picker a scroll container for the positioner's room clamp —
   a mid-screen anchor with short room BOTH sides used to push the time/TZ foot past the fold
   (the other half of Ken's "missing tz" report); now the panel clamps and scrolls instead. */
/* QB78(b) (MP-12, image11): the date panel's cap was a fixed 520px — with the end-date and expected
   seats open the panel runs ~540, so its own cap hid "+ end date" under an internal scroll even when
   the window had the room. The cap is now THE WINDOW (the positioner's inset); the panel scrolls
   only when the window itself is shorter than the calendar. */
.syn-dtp-pop { width: var(--syn-dtp-pop-width, 316px); padding: var(--syn-dtp-pop-padding, 14px 16px); max-height: var(--syn-dtp-pop-max-height, calc(100vh - 16px)); overflow: auto; }
.syn-dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--syn-dtp-head-margin-bottom, 8px); }
/* Q181 (C7): borderless ‹  > steppers — 400 13px tertiary, padding 0 4. */
.syn-dtp-step { appearance: none; border: none; background: transparent; padding: var(--syn-dtp-step-padding, 0 4px); font-family: inherit; font-size: var(--syn-dtp-step-font-size, 0.8125rem); font-weight: var(--syn-dtp-step-font-weight, 400); color: var(--syn-dtp-step-color, var(--text-tertiary)); cursor: pointer; }
.syn-dtp-month { appearance: none; display: inline-flex; align-items: center; gap: var(--syn-dtp-month-gap, 4px); border: none; background: transparent; padding: var(--syn-dtp-month-padding, 3px 8px); border-radius: var(--syn-dtp-month-border-radius, var(--radius-sm)); font-size: var(--syn-dtp-month-font-size, 0.84375rem); font-weight: var(--syn-dtp-month-font-weight, 600); color: var(--syn-dtp-month-color, var(--text-ink)); font-family: inherit; cursor: pointer; }
.syn-dtp-month:hover { background: var(--syn-dtp-month-hover-background, var(--surface-hover)); }
.syn-iconbtn { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: var(--syn-iconbtn-padding, 4px); border-radius: var(--syn-iconbtn-border-radius, var(--radius-sm)); border: var(--syn-iconbtn-border, 1px solid var(--border-default)); background: var(--syn-iconbtn-background, var(--surface-plane)); color: var(--syn-iconbtn-color, var(--text-muted)); cursor: pointer; }
.syn-iconbtn:hover { background: var(--syn-iconbtn-hover-background, var(--surface-hover)); }

.syn-dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--syn-dtp-grid-gap, 2px); margin-bottom: var(--syn-dtp-grid-margin-bottom, 8px); }
/* Q181 (C9): weekday letters 600 9px ls .06em DISABLED. */
.syn-dtp-wd { text-align: center; font-size: var(--syn-dtp-wd-font-size, 0.59375rem); font-weight: var(--syn-dtp-wd-font-weight, 600); letter-spacing: var(--syn-dtp-wd-letter-spacing, 0.06em); color: var(--syn-dtp-wd-color, var(--text-faint)); padding: var(--syn-dtp-wd-padding, 2px 0); margin-bottom: var(--syn-dtp-wd-margin-bottom, 4px); }
/* Q181 (C10–C12): day cells 400 12px body, radius FULL; today = 1px --border-emphasis OUTLINE;
   the pick = filled INK, white 600 (zero accent in the grid). */
.syn-dtp-day { appearance: none; aspect-ratio: 1; border-radius: var(--syn-dtp-day-border-radius, var(--shape-radius-pill)); border: none; background: transparent; color: var(--syn-dtp-day-color, var(--text-body)); font-size: var(--syn-dtp-day-font-size, 0.75rem); font-weight: var(--syn-dtp-day-font-weight, 400); font-family: inherit; cursor: pointer; }
.syn-dtp-day:hover { background: var(--syn-dtp-day-hover-background, var(--surface-hover)); }
.syn-dtp-day.is-sel, .syn-dtp-day.is-sel:hover { background: var(--syn-dtp-day-is-sel-background, var(--text-ink)); color: var(--syn-dtp-day-is-sel-color, var(--surface-plane)); font-weight: var(--syn-dtp-day-is-sel-font-weight, 600); }
.syn-dtp-day.is-today:not(.is-sel) { box-shadow: var(--syn-dtp-day-is-today-not-is-sel-box-shadow, var(--chip-inset-ring)); }
.syn-dtp-monthwrap { display: inline-flex; align-items: center; gap: var(--syn-dtp-monthwrap-gap, 2px); }
.syn-dtp-basis { display: flex; flex-direction: column; gap: var(--syn-dtp-basis-gap, 6px); }
/* Q181 (C5): the picker's Known/Expected segments are 11.5px on 5px/12px (the Work-Status
   idiom at picker scale). C6: microcopy 400 11/1.5 tertiary; EXPECTED = the small-caps meta
   word (600 9px .08em disabled). The ruled verbatim carries the closing period. */
.syn-dtp-basis .syn-life-segbtn { font-size: var(--syn-dtp-basis-life-segbtn-font-size, 0.71875rem); padding: var(--syn-dtp-basis-life-segbtn-padding, 5px 12px); }
.syn-dtp-basis-help { font-size: var(--syn-dtp-basis-help-font-size, 0.71875rem); font-weight: var(--syn-dtp-basis-help-font-weight, 400); color: var(--syn-dtp-basis-help-color, var(--text-tertiary)); line-height: var(--syn-dtp-basis-help-line-height, 1.5); margin-bottom: var(--syn-dtp-basis-help-margin-bottom, 12px); }
.syn-dtp-basis-help strong { font-weight: var(--syn-dtp-basis-help-strong-font-weight, 600); font-size: var(--syn-dtp-basis-help-strong-font-size, 0.59375rem); letter-spacing: var(--syn-dtp-basis-help-strong-letter-spacing, 0.08em); color: var(--syn-dtp-basis-help-strong-color, var(--text-faint)); }
.syn-dtp-footrow { display: flex; align-items: center; gap: var(--syn-dtp-footrow-gap, 8px); }
/* Q181 (C13): the quiet foot acts — "+ Add time" tertiary left, "Clear" disabled right. */
.syn-dtp-footclear { appearance: none; border: none; background: transparent; padding: 0; font-family: inherit; font-size: var(--syn-dtp-footclear-font-size, 0.75rem); font-weight: var(--syn-dtp-footclear-font-weight, 400); color: var(--syn-dtp-footclear-color, var(--text-faint)); cursor: pointer; }
/* Q378 (delta 4 — pickers open on CLICK in the anchored popover; the row's quiet acts seat in the popover FOOTER
   through DateTimePicker.FootActs): 400 12px tertiary, faint · separators; the destructive word quiet-red. */
.syn-dtp-footacts { display: inline-flex; align-items: baseline; gap: var(--syn-dtp-footacts-gap, 6px); flex-wrap: wrap; }
.syn-dtp-footact { appearance: none; border: none; background: transparent; padding: 0; font-family: inherit; font-size: var(--syn-dtp-footact-font-size, 0.75rem); font-weight: var(--syn-dtp-footact-font-weight, 400); color: var(--syn-dtp-footact-color, var(--text-tertiary)); cursor: pointer; }
.syn-dtp-footact:hover:not(:disabled) { color: var(--syn-dtp-footact-hover-not-disabled-color, var(--text-muted)); }
.syn-dtp-footact:disabled { opacity: var(--syn-dtp-footact-disabled-opacity, .45); cursor: default; }
.syn-dtp-footact.is-red:hover:not(:disabled) { color: var(--syn-dtp-footact-is-red-hover-not-disabled-color, var(--state-attention-text)); }
.syn-dtp-footsep { font-size: var(--syn-dtp-footsep-font-size, 0.75rem); color: var(--syn-dtp-footsep-color, var(--text-faint)); }

.syn-dtp-foot { border-top: var(--syn-dtp-foot-border-top, 1px solid var(--border-hairline)); margin-top: var(--syn-dtp-foot-margin-top, 10px); padding-top: var(--syn-dtp-foot-padding-top, 10px); display: flex; flex-direction: column; gap: var(--syn-dtp-foot-gap, 8px); }
.syn-dtp-time { display: flex; align-items: center; gap: var(--syn-dtp-time-gap, 8px); padding: var(--syn-dtp-time-padding, 5px 8px); border: var(--syn-dtp-time-border, 1px solid var(--border-default)); border-radius: var(--syn-dtp-time-border-radius, var(--radius-sm)); color: var(--syn-dtp-time-color, var(--text-tertiary)); }
.syn-dtp-time input { flex: 1; min-width: 0; border: none; font-size: var(--syn-dtp-time-input-font-size, 0.8125rem); font-family: inherit; outline: none; background: transparent; padding: 0; cursor: pointer; color: var(--syn-dtp-time-input-color, var(--text-ink)); color-scheme: light; }
.syn-dtp-opt { font-size: var(--syn-dtp-opt-font-size, 0.71875rem); color: var(--syn-dtp-opt-color, var(--text-tertiary)); flex-shrink: 0; pointer-events: none; }
.syn-dtp-tz { display: flex; align-items: center; gap: var(--syn-dtp-tz-gap, 8px); }
.syn-dtp-tz.is-disabled { opacity: var(--syn-dtp-tz-is-disabled-opacity, 0.5); }
.syn-dtp-tzlabel { font-size: var(--syn-dtp-tzlabel-font-size, 0.71875rem); color: var(--syn-dtp-tzlabel-color, var(--text-tertiary)); width: var(--syn-dtp-tzlabel-width, 14px); text-align: center; flex-shrink: 0; }
.syn-dtp-tz select { flex: 1; padding: var(--syn-dtp-tz-select-padding, 5px 8px); border: var(--syn-dtp-tz-select-border, 1px solid var(--border-default)); border-radius: var(--syn-dtp-tz-select-border-radius, var(--radius-sm)); font-size: var(--syn-dtp-tz-select-font-size, 0.8125rem); font-family: inherit; background: var(--syn-dtp-tz-select-background, var(--surface-plane)); color: var(--syn-dtp-tz-select-color, var(--text-ink)); outline: none; }

.syn-dtp-toggle { display: flex; align-items: center; gap: var(--syn-dtp-toggle-gap, 8px); padding: var(--syn-dtp-toggle-padding, 8px 2px 2px); border-top: var(--syn-dtp-toggle-border-top, 1px solid var(--border-default)); cursor: pointer; }
/* .syn-switch — the canonical role=switch toggle, shared by ToggleSwitch and the DateTimePicker's
   Estimated/Actual toggle (one source so every switch is identical by construction). */
.syn-switch { appearance: none; flex-shrink: 0; width: var(--syn-switch-width, 34px); height: var(--syn-switch-height, 20px); border-radius: var(--syn-switch-border-radius, var(--shape-radius-pill)); border: none; padding: var(--syn-switch-padding, 2px); cursor: pointer; background: var(--syn-switch-background, var(--border-strong)); transition: var(--syn-switch-transition, background var(--motion-duration-base)); display: inline-flex; justify-content: flex-start; }
/* Q255 (relay-16 F-1, RULED at sight Ken 2026-08-18): the ON fill is the INK register (--text-primary) —
   accent is the doors-and-links register and stays out of controls; the knob is --surface (the drawn
   R10 toggle, both themes: light knob on ink in light, dark knob on the light ink in dark). Geometry kept. */
.syn-switch.is-on { background: var(--syn-switch-is-on-background, var(--text-ink)); justify-content: flex-end; }
.syn-switch > span { width: var(--syn-switch-span-width, 16px); height: var(--syn-switch-span-height, 16px); border-radius: var(--syn-switch-span-border-radius, var(--shape-radius-pill)); background: var(--syn-switch-span-background, var(--surface-plane)); }
.syn-switch:disabled { opacity: var(--syn-switch-disabled-opacity, 0.5); cursor: default; }
.syn-janestamp { display: inline-flex; align-items: center; margin-left: var(--syn-janestamp-margin-left, 4px); vertical-align: middle; }
.syn-dtp-toggle > span { font-size: var(--syn-dtp-toggle-span-font-size, 0.78125rem); color: var(--syn-dtp-toggle-span-color, var(--text-muted)); }
.syn-dtp-strong { color: var(--syn-dtp-strong-color, var(--text-ink)); font-weight: var(--syn-dtp-strong-font-weight, 600); }
.syn-dtp-strong.is-on { color: var(--syn-dtp-strong-is-on-color, var(--accent-action-active)); }
.syn-dtp-hint { font-size: var(--syn-dtp-hint-font-size, 0.71875rem); color: var(--syn-dtp-hint-color, var(--text-tertiary)); line-height: var(--syn-dtp-hint-line-height, 1.4); }
.syn-dtp-end { display: flex; align-items: center; gap: var(--syn-dtp-end-gap, 8px); padding: var(--syn-dtp-end-padding, 8px 2px 2px); border-top: var(--syn-dtp-end-border-top, 1px solid var(--border-default)); }
.syn-dtp-endlabel { font-size: var(--syn-dtp-endlabel-font-size, 0.78125rem); color: var(--syn-dtp-endlabel-color, var(--text-tertiary)); font-weight: var(--syn-dtp-endlabel-font-weight, 500); }
/* Q181 (C13/C14): "+ Add time" is a quiet tertiary act — the accent spend died. */
.syn-dtp-endadd { background: none; border: none; padding: 0; font: inherit; font-size: var(--syn-dtp-endadd-font-size, 0.75rem); font-weight: var(--syn-dtp-endadd-font-weight, 400); color: var(--syn-dtp-endadd-color, var(--text-tertiary)); cursor: pointer; }
.syn-dtp-endadd:disabled { color: var(--syn-dtp-endadd-disabled-color, var(--text-tertiary)); cursor: default; }
.syn-dtp-end input[type=date] { font: inherit; font-size: var(--syn-dtp-end-input-type-date-font-size, 0.8125rem); padding: var(--syn-dtp-end-input-type-date-padding, 3px 6px); border: var(--syn-dtp-end-input-type-date-border, 1px solid var(--border-default)); border-radius: var(--syn-dtp-end-input-type-date-border-radius, var(--radius-sm)); background: var(--syn-dtp-end-input-type-date-background, var(--surface-plane)); color: var(--syn-dtp-end-input-type-date-color, var(--text-ink)); color-scheme: light; }

/* ---- Field (the schema-driven generic editor) + FieldValue + the dev gallery --------------- */
/* Always-editable form field: label-to-control 5px, label on the app-wide uppercase microlabel
   grain ([REBUILD-P2-14] — the mockup modal L(), People.jsx:481 / Experience.jsx:1518). */
.syn-field { display: flex; flex-direction: column; gap: var(--syn-field-gap, 5px); }
.syn-field > .syn-field-label { font-size: var(--syn-field-field-label-font-size, 0.71875rem); font-weight: var(--syn-field-field-label-font-weight, var(--font-semibold)); text-transform: var(--syn-field-field-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-field-field-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-field-field-label-color, var(--text-tertiary)); }
.syn-field-help { font-size: var(--syn-field-help-font-size, 0.71875rem); color: var(--syn-field-help-color, var(--text-tertiary)); line-height: var(--syn-field-help-line-height, 1.4); }
/* Q342(c) (TEXT-SCALE R2/R3/R4, the systemic root): the canonical VALUE class = reading — rem, scales with the
   root; the People-directory Title column no longer stands still beside its rem siblings at XL. */
.syn-value { font: var(--syn-value-font, var(--type-r6)); color: var(--syn-value-color, var(--text-ink)); }   /* Q373(a): the FieldValue face = R6 fact-value (was --read-sm 13/400) */
/* Q342(d) VACANCY (root 1 + R11): the ruled vacancy register is GLOBAL so any hand-built fact slot can
   mount it — it no longer depends on FieldValue's scoped css reaching the host. Q346(b) (HB-QB46-2):
   THE ONE register — QB46's interim "fact-vacant" twin died here; every vacant fact seat app-wide wears
   this class. */
.syn-fv-vacant { color: var(--syn-fv-vacant-color, var(--text-faint)); }
.syn-value.syn-mono, .syn-mono { font-family: var(--syn-value-mono-font-family, var(--type-family-mono)); }

/* number adornments (NumberInputCore) */
.syn-num-field { display: inline-flex; align-items: center; gap: var(--syn-num-field-gap, 6px); }
.syn-num-field .syn-num { flex: 1; min-width: 0; }
.syn-num-prefix { color: var(--syn-num-prefix-color, var(--text-tertiary)); font-size: var(--syn-num-prefix-font-size, var(--text-sm)); }
.syn-num-suffix { color: var(--syn-num-suffix-color, var(--text-tertiary)); font-size: var(--syn-num-suffix-font-size, var(--text-sm)); white-space: nowrap; }

/* currency + Estimated/Actual toggle (EstimableMoney) */
.syn-currency { display: inline-flex; align-items: center; gap: var(--syn-currency-gap, 10px); flex-wrap: wrap; }
.syn-currency-axis { display: inline-flex; align-items: center; gap: var(--syn-currency-axis-gap, 6px); white-space: nowrap; }
.syn-currency-basis { font-size: var(--syn-currency-basis-font-size, 0.75rem); color: var(--syn-currency-basis-color, var(--text-tertiary)); }

/* entity-reference multi editor (EntityRefList): resolved-record chips + the canonical picker, wrapping */
.syn-entitylist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--syn-entitylist-gap, var(--space-2)); }

/* collection editor / summary (Step-1 minimal) */
.syn-collection { display: flex; flex-direction: column; gap: var(--syn-collection-gap, var(--space-1)); }
.syn-collection-item { display: flex; flex-wrap: wrap; gap: var(--syn-collection-item-gap, var(--space-3)); padding: var(--syn-collection-item-padding, 4px 0); border-bottom: var(--syn-collection-item-border-bottom, 1px solid var(--border-default)); font-size: var(--syn-collection-item-font-size, var(--text-sm)); }
.syn-collection-cell { color: var(--syn-collection-cell-color, var(--text-ink)); }
.syn-collection-k { color: var(--syn-collection-k-color, var(--text-tertiary)); }
.syn-collection-empty, .syn-collection-summary { font-size: var(--syn-collection-empty-font-size, var(--text-sm)); color: var(--syn-collection-empty-color, var(--text-tertiary)); }

/* dev gallery (/_dev/fields) */
.syn-gallery { width: 100%; border-collapse: collapse; font-size: var(--syn-gallery-font-size, var(--text-sm)); }
.syn-gallery th, .syn-gallery td { text-align: left; padding: var(--syn-gallery-th-padding, 10px 12px); border-bottom: var(--syn-gallery-th-border-bottom, 1px solid var(--border-default)); vertical-align: top; }
.syn-gallery th { font-size: var(--syn-gallery-th-font-size, var(--text-xs)); text-transform: var(--syn-gallery-th-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-gallery-th-letter-spacing, var(--type-label-tracking)); color: var(--syn-gallery-th-color, var(--text-muted)); }
.syn-gallery td:first-child, .syn-gallery td:nth-child(2) { white-space: nowrap; }
.syn-gallery-patches { margin: 0; padding-left: var(--syn-gallery-patches-padding-left, 18px); display: flex; flex-direction: column; gap: var(--syn-gallery-patches-gap, 4px); font-size: var(--syn-gallery-patches-font-size, var(--text-sm)); }

/* ==== Mission Control (P4 T1) — the TOPR detail page frame + regular sections ====
   Transcribed at Q23 integration from the tranche's CSS contract (MissionControlPage.razor header
   comment; annex A). Replaces the pre-P4 pilot page's syn-mc block wholesale — that page is gone.
   Content sizing is CONTAINER-driven: .syn-mc-body carries container-type, and the 880 breakpoint
   keys off the BODY's width (the rail and chat panel change it), never the viewport. */
.syn-mc-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Q85: header on CANVAS (the band below supplies the plane edge); breadcrumb row + 24px H1. */
/* Q182 (comp 1a header region, F-2): header zone 14/28/14; breadcrumb row gap 10, 8px below;
   the backlink CENTERS with its row (the shared class's align-self:flex-start was the
   misalignment Ken caught — scoped correction, the register-header caller keeps its own).
   Q183 delta (5)/Q182 part 4: the RIGHT padding reserves the jane panel toggle's docked slot
   (fixed top-8/right-14, 34px — the panel's own 56px convention) so the closed-state toggle
   never clips the header's action cluster at any width; the toggle itself is jane-owned. */
.syn-mc-header { padding: var(--syn-mc-header-padding, 14px 56px 14px 28px); }
.syn-mc-identrow > .syn-backlink { align-self: center; }
/* Q284(d): the shrink contract — the meta line carries PERSON NAMES (unbounded prod data). */
.syn-mc-headmeta { font-size: var(--syn-mc-headmeta-font-size, 0.78125rem); color: var(--syn-mc-headmeta-color, var(--text-muted)); white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.syn-mc-identrow { display: flex; align-items: center; gap: var(--syn-mc-identrow-gap, 10px); flex-wrap: wrap; margin-bottom: var(--syn-mc-identrow-margin-bottom, 8px); }        /* ← Pipeline backlink folds inline, first (comp 1a: gap 10, mb 8) */
.syn-mc-number { font-family: var(--syn-mc-number-font-family, var(--type-family-mono)); font-weight: var(--syn-mc-number-font-weight, 600); }
.syn-mc-vehicle { font-size: var(--syn-mc-vehicle-font-size, 0.71875rem); padding: var(--syn-mc-vehicle-padding, 2px 8px); border-radius: var(--syn-mc-vehicle-border-radius, var(--shape-radius-pill)); background: var(--syn-mc-vehicle-background, var(--surface-inset)); color: var(--syn-mc-vehicle-color, var(--text-muted)); white-space: nowrap; }
.syn-mc-provisional { font-size: var(--syn-mc-provisional-font-size, 0.71875rem); padding: var(--syn-mc-provisional-padding, 2px 8px); border-radius: var(--syn-mc-provisional-border-radius, var(--shape-radius-pill)); background: var(--syn-mc-provisional-background, var(--state-warning-tint)); color: var(--syn-mc-provisional-color, var(--state-warning)); white-space: nowrap; }
.syn-mc-headspacer { flex: 1; }
.syn-mc-titlerow { padding: var(--syn-mc-titlerow-padding, 6px 0 12px); }
.syn-mc-titlebtn { background: none; border: none; padding: 0; font: inherit; font-size: var(--syn-mc-titlebtn-font-size, 1.5rem); font-weight: var(--syn-mc-titlebtn-font-weight, 700); line-height: var(--syn-mc-titlebtn-line-height, 1.25); letter-spacing: var(--syn-mc-titlebtn-letter-spacing, -0.01em); color: var(--syn-mc-titlebtn-color, var(--text-ink)); cursor: pointer; text-align: left; }
.syn-mc-titlebtn:hover { text-decoration: var(--syn-mc-titlebtn-hover-text-decoration, underline); text-decoration-thickness: var(--syn-mc-titlebtn-hover-text-decoration-thickness, 1px); text-underline-offset: var(--syn-mc-titlebtn-hover-text-underline-offset, 3px); }
.syn-mc-untitled { font-style: var(--syn-mc-untitled-font-style, italic); color: var(--syn-mc-untitled-color, var(--text-tertiary)); }
.syn-mc-metricstrip { padding: var(--syn-mc-metricstrip-padding, 10px 28px); border-bottom: var(--syn-mc-metricstrip-border-bottom, 1px solid var(--border-default)); }   /* hosts .syn-metric-bar */
/* Q85: the tab bar rides the status band's bottom edge — same surface plane, one seam. */
/* Ruling 33 (Q162): comp geometry — container gap 26, tab padding 11px 2px 8px so the active
   2px underline sits flush with the band edge. */
.syn-mc-tabs { display: flex; gap: var(--syn-mc-tabs-gap, 26px); padding: var(--syn-mc-tabs-padding, 0 28px); overflow-x: auto; border-bottom: var(--syn-mc-tabs-border-bottom, 1px solid var(--border-default)); background: var(--syn-mc-tabs-background, var(--surface-plane)); }
/* margin-bottom:-1px lets the active underline sit ON the strip's border (the pre-P4 tab idiom). */
/* Q182: 13px tabs (comp 1a; the 2px ink underline + ruling 33's 8px bottom padding were
   computed-proven true on BOTH renders — F-4 stands satisfied). */
/* Q194: tabs are anchors now (real hrefs — middle-click works); the link chrome stays off. */
.syn-mc-tab { appearance: none; background: none; border: none; border-bottom: var(--syn-mc-tab-border-bottom, 2px solid transparent); margin-bottom: var(--syn-mc-tab-margin-bottom, -1px); padding: var(--syn-mc-tab-padding, 11px 2px 8px); font: inherit; font-size: var(--syn-mc-tab-font-size, 0.8125rem); font-weight: var(--syn-mc-tab-font-weight, 450); color: var(--syn-mc-tab-color, var(--text-muted)); cursor: pointer; white-space: nowrap; flex: 0 0 auto; text-decoration: var(--syn-mc-tab-text-decoration, none); }
.syn-mc-tab:hover { color: var(--syn-mc-tab-hover-color, var(--text-ink)); }
.syn-mc-tab.is-active { color: var(--syn-mc-tab-is-active-color, var(--text-ink)); font-weight: var(--syn-mc-tab-is-active-font-weight, 600); border-bottom-color: var(--syn-mc-tab-is-active-border-bottom-color, var(--text-ink)); }   /* no count bubbles */
/* Q275 (1): overflow-y:auto DELETED — no ancestor gives .syn-mc-page a definite height, so the
   body never actually scrolled (the WINDOW is the app's scroller, like the rail's own sticky
   assumes) — yet the dead overflow made the body the readers' nearest scrollport and KILLED every
   position:sticky inside (the outline rails and marginalia scrolled away with the page, both
   readers, Ken's prod eyeball). With the body transparent to scroll, sticky tracks the window. */
.syn-mc-body { flex: 1; min-height: 0; padding: var(--syn-mc-body-padding, 22px 28px 60px); container-type: inline-size; }
.syn-mc-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--syn-mc-grid-gap, var(--space-4)); align-items: start; }
@container (max-width: 880px) { .syn-mc-grid { grid-template-columns: minmax(0, 1fr); } }
.syn-mc-col { display: flex; flex-direction: column; gap: var(--syn-mc-col-gap, var(--space-4)); min-width: 0; }
.syn-mc-fullwidth { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--syn-mc-fullwidth-gap, var(--space-4)); }
/* .syn-mc-identity-grid is a structural hook only: the annex's "values WRAP, never truncate" is
   already delivered by the owner-ratified `.syn-identity-grid .syn-ef-val` wrap rules in the
   SHELL-IDENT-REDESIGN block below — the IdentityGrid renderer emits that class inside this wrap. */
.syn-mc-sectionerror { color: var(--syn-mc-sectionerror-color, var(--state-attention)); font-size: var(--syn-mc-sectionerror-font-size, var(--text-xs)); margin-bottom: var(--syn-mc-sectionerror-margin-bottom, 8px); }

/* Composite mount placeholder (T1 boundary marker — replaced by each composite's tranche). */

/* Q317(a): the response-team strip (.syn-mc-teamstrip family) DIED with its component — the
   role quartet was PRE-COMP trash in the identification section; the ratified 21a comp carries
   the roles in the page-header strip (McHeader, 16a) only. */

/* Tasks (annex A §8) — section pill pair (the retired OOO-pill grain, counts tabular), quick-add,
   task rows with the RESERVED 56px action slot: visibility (not display) preserves the box, so
   hover reveal cannot shift the row (the contract's "no layout shift"). */
.syn-mc-taskpills { display: inline-flex; gap: var(--syn-mc-taskpills-gap, 4px); }
.syn-mc-taskpill { font-size: var(--syn-mc-taskpill-font-size, 0.78125rem); font-weight: var(--syn-mc-taskpill-font-weight, 500); padding: var(--syn-mc-taskpill-padding, 4px 10px); border-radius: var(--syn-mc-taskpill-border-radius, var(--radius-nav)); border: none; background: transparent; color: var(--syn-mc-taskpill-color, var(--text-tertiary)); cursor: pointer; font-family: inherit; }
.syn-mc-taskpill.is-active { font-weight: var(--syn-mc-taskpill-is-active-font-weight, 600); background: var(--syn-mc-taskpill-is-active-background, var(--surface-inset)); color: var(--syn-mc-taskpill-is-active-color, var(--text-ink)); }
.syn-mc-taskpill-count { color: var(--syn-mc-taskpill-count-color, var(--text-tertiary)); font-weight: var(--syn-mc-taskpill-count-font-weight, 400); font-variant-numeric: var(--syn-mc-taskpill-count-font-variant-numeric, tabular-nums); }
.syn-mc-quickadd { display: flex; gap: var(--syn-mc-quickadd-gap, 8px); margin-bottom: var(--syn-mc-quickadd-margin-bottom, 10px); }
.syn-mc-quickadd-input { flex: 1; padding: var(--syn-mc-quickadd-input-padding, var(--space-2) var(--space-3)); border: var(--syn-mc-quickadd-input-border, 1px solid var(--border-default)); border-radius: var(--syn-mc-quickadd-input-border-radius, var(--shape-radius-control)); font: inherit; font-size: var(--syn-mc-quickadd-input-font-size, var(--text-sm)); background: var(--syn-mc-quickadd-input-background, var(--surface-plane)); color: var(--syn-mc-quickadd-input-color, var(--text-ink)); }
.syn-mc-quickadd-input:focus { outline: none; border-color: var(--syn-mc-quickadd-input-focus-border-color, var(--accent-action)); }
.syn-mc-quickadd-input::placeholder { color: var(--syn-mc-quickadd-input-placeholder-color, var(--text-tertiary)); }
.syn-mc-taskrows > * + * { border-top: var(--syn-mc-taskrows-border-top, 1px solid var(--border-default)); }
.syn-mc-taskrow { display: flex; align-items: flex-start; gap: var(--syn-mc-taskrow-gap, 10px); padding: var(--syn-mc-taskrow-padding, 9px 0); }
.syn-mc-taskcheck { width: var(--syn-mc-taskcheck-width, 17px); height: var(--syn-mc-taskcheck-height, 17px); margin-top: var(--syn-mc-taskcheck-margin-top, 1px); border-radius: var(--syn-mc-taskcheck-border-radius, var(--shape-radius-pill)); border: var(--syn-mc-taskcheck-border, 1.5px solid var(--border-strong)); background: transparent; color: var(--syn-mc-taskcheck-color, var(--text-on-accent)); cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
/* Ruling 30 (Q166): the completed check is QUIET FILLED ink — no green. */
.syn-mc-taskcheck.is-checked { background: var(--syn-mc-taskcheck-is-checked-background, var(--text-muted)); border-color: var(--syn-mc-taskcheck-is-checked-border-color, var(--text-muted)); color: var(--syn-mc-taskcheck-is-checked-color, var(--surface-plane)); }
.syn-mc-taskmain { flex: 1; min-width: 0; }
.syn-mc-taskname { font-size: var(--syn-mc-taskname-font-size, 0.84375rem); line-height: var(--syn-mc-taskname-line-height, 1.4); }
/* Ruling 30 (Q166): the title RECEDES — NO strikethrough. */
.syn-mc-taskname.is-receded { color: var(--syn-mc-taskname-is-receded-color, var(--text-tertiary)); }
.syn-mc-taskoutcome { font-size: var(--syn-mc-taskoutcome-font-size, 0.75rem); color: var(--syn-mc-taskoutcome-color, var(--text-muted)); line-height: var(--syn-mc-taskoutcome-line-height, 1.4); }
.syn-mc-taskstamp { margin-left: auto; font-size: var(--syn-mc-taskstamp-font-size, 0.71875rem); color: var(--syn-mc-taskstamp-color, var(--text-faint)); white-space: nowrap; flex-shrink: 0; }
.syn-mc-taskmeta { display: flex; align-items: center; gap: var(--syn-mc-taskmeta-gap, 10px); font-size: var(--syn-mc-taskmeta-font-size, 0.75rem); color: var(--syn-mc-taskmeta-color, var(--text-muted)); margin-top: var(--syn-mc-taskmeta-margin-top, 3px); flex-wrap: wrap; }
/* (Q166: the green "Completed" meta died with ruling 30.) */
.syn-mc-taskdue { display: inline-flex; align-items: center; gap: var(--syn-mc-taskdue-gap, 4px); }
/* Ruling 14 / §5: row-level overdue speaks as the red 700 due date (--overdue is the AA
   text-on-surface red; raw --error fails at text sizes). */
.syn-mc-taskdue.is-overdue { color: var(--syn-mc-taskdue-is-overdue-color, var(--state-attention-text)); font-weight: var(--syn-mc-taskdue-is-overdue-font-weight, 700); }
.syn-mc-taskowner { display: inline-flex; align-items: center; gap: var(--syn-mc-taskowner-gap, 5px); }
.syn-mc-taskactions { width: var(--syn-mc-taskactions-width, 56px); flex-shrink: 0; display: inline-flex; gap: var(--syn-mc-taskactions-gap, 2px); justify-content: flex-end; visibility: hidden; }
.syn-mc-taskrow:hover .syn-mc-taskactions, .syn-mc-taskactions:focus-within { visibility: visible; }
.syn-mc-taskaction { background: none; border: none; padding: var(--syn-mc-taskaction-padding, 3px); color: var(--syn-mc-taskaction-color, var(--text-tertiary)); cursor: pointer; display: inline-flex; border-radius: var(--syn-mc-taskaction-border-radius, var(--radius-sm)); }
.syn-mc-taskaction:hover { color: var(--syn-mc-taskaction-hover-color, var(--text-ink)); background: var(--syn-mc-taskaction-hover-background, var(--surface-hover)); }

/* Notes' Blockers sub-section (annex A §9). */
/* Q363(c): the .syn-mc-blockers seat retired with the field's render (McNotesSection). */

/* Solicitation content tabs (annex A §10). */
.syn-mc-soltab { max-width: var(--syn-mc-soltab-max-width, 820px); }
.syn-mc-soltab-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--syn-mc-soltab-head-margin-bottom, 12px); }
.syn-mc-soltab-label { font-size: var(--syn-mc-soltab-label-font-size, 0.71875rem); font-weight: var(--syn-mc-soltab-label-font-weight, 600); text-transform: var(--syn-mc-soltab-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-mc-soltab-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-mc-soltab-label-color, var(--text-tertiary)); }
.syn-mc-soltab-actions { display: inline-flex; gap: var(--syn-mc-soltab-actions-gap, var(--space-2)); }
.syn-mc-soltab-body { border: var(--syn-mc-soltab-body-border, 1px solid var(--border-default)); border-radius: var(--syn-mc-soltab-body-border-radius, var(--shape-radius-control)); background: var(--syn-mc-soltab-body-background, var(--surface-plane)); padding: var(--syn-mc-soltab-body-padding, var(--space-4)); min-height: var(--syn-mc-soltab-body-min-height, 280px); }
.syn-mc-soltab-body.is-editing { border-color: var(--syn-mc-soltab-body-is-editing-border-color, var(--border-emphasis)); box-shadow: var(--syn-mc-soltab-body-is-editing-box-shadow, var(--accent-ring)); }   /* edit ring */
.syn-mc-solfield-label { display: block; font-size: var(--syn-mc-solfield-label-font-size, 0.78125rem); font-weight: var(--syn-mc-solfield-label-font-weight, 600); margin: var(--syn-mc-solfield-label-margin, 14px 0 6px); }
.syn-mc-solfield:first-child .syn-mc-solfield-label { margin-top: 0; }
.syn-mc-soltab-help { font-size: var(--syn-mc-soltab-help-font-size, 0.75rem); color: var(--syn-mc-soltab-help-color, var(--text-tertiary)); margin-top: var(--syn-mc-soltab-help-margin-top, 10px); }

/* Submission Snapshots — summary rows (annex B §5.1) + tab cards (§5.2). */
/* -snaprows/-snaprow/-snapview removed with the summary block ([REBUILD-P4-13], Q44);
   -snaplabel/-snapmeta stay — the Snapshots tab's cards use them. */
/* Q262: the Q84 snapshots-tab card rules RETIRED — the tab is the 24a receipt roster (.syn-rcpt-*). */

/* Related TOPRs (annex A §12) — relationship microlabel over the ref. */
.syn-mc-linkrows { display: flex; flex-direction: column; }
.syn-mc-linkrows > * + * { border-top: var(--syn-mc-linkrows-border-top, 1px solid var(--border-default)); }
.syn-mc-linkrow { display: flex; align-items: flex-start; gap: var(--syn-mc-linkrow-gap, 10px); padding: var(--syn-mc-linkrow-padding, 8px 0); }
.syn-mc-linkmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-mc-linkmain-gap, 2px); align-items: flex-start; }
.syn-mc-linkkind { font-size: var(--syn-mc-linkkind-font-size, 0.625rem); font-weight: var(--syn-mc-linkkind-font-weight, 600); text-transform: var(--syn-mc-linkkind-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-mc-linkkind-letter-spacing, var(--type-label-tracking)); color: var(--syn-mc-linkkind-color, var(--text-tertiary)); }
.syn-mc-linknote { font-size: var(--syn-mc-linknote-font-size, 0.75rem); color: var(--syn-mc-linknote-color, var(--text-tertiary)); }

/* Documents & Links (annex A §12) — pinned well-known rows, ad-hoc rows, inline composer. */
.syn-mc-linkdocs { display: flex; flex-direction: column; }
.syn-mc-docrow { display: flex; align-items: center; gap: var(--syn-mc-docrow-gap, 10px); padding: var(--syn-mc-docrow-padding, 7px 0); }
.syn-mc-docrow + .syn-mc-docrow { border-top: var(--syn-mc-docrow-mc-docrow-border-top, 1px solid var(--border-default)); }
.syn-mc-doclabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--syn-mc-doclabel-font-size, 0.8125rem); }
.syn-mc-docopen { display: inline-flex; align-items: center; gap: var(--syn-mc-docopen-gap, 4px); font-size: var(--syn-mc-docopen-font-size, 0.75rem); color: var(--syn-mc-docopen-color, var(--accent-action-active)); text-decoration: var(--syn-mc-docopen-text-decoration, none); white-space: nowrap; }
.syn-mc-docopen:hover { text-decoration: var(--syn-mc-docopen-hover-text-decoration, underline); }

/* Debrief tab (Q50): the narrative block sits below the descriptor grid inside the card. */
.syn-mc-debriefnarr { margin-top: var(--syn-mc-debriefnarr-margin-top, var(--space-3)); }
/* The eyebrow leads the composer (comp modal 7: border-top seam, 8px above, 6px to the inputs). */
.syn-mc-addlink { display: inline-flex; align-items: center; gap: var(--syn-mc-addlink-gap, 4px); background: none; border: none; padding: 0; font: inherit; font-size: var(--syn-mc-addlink-font-size, var(--text-xs)); color: var(--syn-mc-addlink-color, var(--accent-action-active)); cursor: pointer; }
.syn-mc-addlink:hover { text-decoration: var(--syn-mc-addlink-hover-text-decoration, underline); }
/* ── Q310 — CAPABILITY AREAS (Relay 27 d1, captions = spec of record): the Government's
   standardized FC/CA table on ModalShell Extra. Columns flex gap 22; FC group heads = the
   mono-caps register (600 9 .08em uppercase --text-disabled, 6px under); rows gap 7 pad
   3.5/6 (bleed -6 via border-radius 5 ground), code eyebrow 500 9.5 MONO --text-disabled 16px
   (chrome class), the 13×13 r3 box (unchecked 1.5px --border-default on --surface; EDIT
   hardens to --border-strong; checked --text-primary fill + 600 9 --text-on-ink ✓), name 400
   11.5/1.35 --text-body (checked 500 --text-primary; the row ground --tinted-inset r5).
   Footer: the count sentence 400 12 --text-tertiary / the edit save-note in the same register.
   THE LAUNCHER (d1-C): the section-line act — inline-flex baseline gap 6, 1px --border-default
   r7, 3/10, 500 11.5 --text-body, TRANSPARENT ground, NO glyph; count rider 400 11
   --text-faint; "None recorded" 400 11 --text-disabled (the vacant seat still doors). ── */
.syn-cam-cols { display: flex; gap: var(--syn-cam-cols-gap, 22px); align-items: flex-start; }
.syn-cam-col { flex: 1; min-width: 0; }
.syn-cam-fchead { font: var(--syn-cam-fchead-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-cam-fchead-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-cam-fchead-text-transform, var(--type-label-transform)); color: var(--syn-cam-fchead-color, var(--text-faint)); padding: var(--syn-cam-fchead-padding, 0 0 6px); }
.syn-cam-fc4 { margin-top: var(--syn-cam-fc4-margin-top, 14px); }
/* CA-2 (Relay 49, THE ONE FACE): the grid is live from open — every row is the control, no read dress exists. */
.syn-cam-row { display: flex; gap: var(--syn-cam-row-gap, 7px); align-items: flex-start; width: var(--syn-cam-row-width, calc(100% + 12px)); box-sizing: border-box; padding: var(--syn-cam-row-padding, 3.5px 6px); margin: var(--syn-cam-row-margin, 0 -6px); border: none; background: transparent; border-radius: var(--syn-cam-row-border-radius, var(--radius-xs-plus)); text-align: left; cursor: pointer; }
.syn-cam-row:hover { background: var(--syn-cam-row-hover-background, var(--surface-hover)); }
.syn-cam-row.is-on { background: var(--syn-cam-row-is-on-background, var(--tinted-inset)); }
.syn-cam-code { font: var(--syn-cam-code-font, 500 9.5px var(--type-family-mono)); color: var(--syn-cam-code-color, var(--text-faint)); flex: none; width: var(--syn-cam-code-width, 16px); margin-top: var(--syn-cam-code-margin-top, 2px); }
.syn-cam-ck { width: var(--syn-cam-ck-width, 13px); height: var(--syn-cam-ck-height, 13px); border-radius: var(--syn-cam-ck-border-radius, var(--radius-3xs)); border: var(--syn-cam-ck-border, 1.5px solid var(--border-strong)); background: var(--syn-cam-ck-background, var(--surface-plane)); box-sizing: border-box; flex: none; margin-top: var(--syn-cam-ck-margin-top, 1px); }
.syn-cam-ckon { width: var(--syn-cam-ckon-width, 13px); height: var(--syn-cam-ckon-height, 13px); border-radius: var(--syn-cam-ckon-border-radius, var(--radius-3xs)); background: var(--syn-cam-ckon-background, var(--text-ink)); display: inline-flex; align-items: center; justify-content: center; font: var(--syn-cam-ckon-font, 600 9.5px var(--type-family)); color: var(--syn-cam-ckon-color, var(--text-on-ink)); flex: none; margin-top: var(--syn-cam-ckon-margin-top, 1px); }
.syn-cam-name { font: var(--syn-cam-name-font, 400 11.5px/1.35 var(--type-family)); color: var(--syn-cam-name-color, var(--text-body)); min-width: 0; }
.syn-cam-row.is-on .syn-cam-name { font-weight: var(--syn-cam-row-is-on-cam-name-font-weight, 500); color: var(--syn-cam-row-is-on-cam-name-color, var(--text-ink)); }
/* CA-1 → CA-2 (Relay 49): the FOOT's act "Fill from solicitation" is the canonical row act, one line. RESTING DISABLED while the
   read runs or when nothing is readable, as the comp draws it: .45, no hover paint, the default cursor. The seat table gives a
   disabled row act no face of its own (a seated button rests at opacity 1), so the drawn face binds to THIS seat alone (HB-CA1: the
   canon's question). The button is ModalShell's foot's child — outside the modal's scoped sheet, so the rule lives here. */
.syn-cam-fillbtn { white-space: nowrap; height: var(--syn-cam-fillbtn-height, 16px); }   /* the foot's three acts share the pair's 28 box (the drawn metric; line 173's law): a seated button is content-box, so 16 + the row act's 5·2 + 1·2 = 28 — the foot's height, and the centred modal, never move when the pair appears */
.syn-btn.syn-cam-fillbtn:disabled { opacity: var(--syn-btn-cam-fillbtn-disabled-opacity, .45); }
.syn-cam-fillbtn:disabled:hover { background: var(--syn-cam-fillbtn-disabled-hover-background, var(--surface-plane)); }
.syn-mc-cagrid { margin-top: var(--syn-mc-cagrid-margin-top, 5px); }
.syn-mc-cadoor { display: inline-flex; align-items: baseline; gap: var(--syn-mc-cadoor-gap, 6px); border: var(--syn-mc-cadoor-border, 1px solid var(--border-default)); border-radius: var(--syn-mc-cadoor-border-radius, var(--radius-nav)); padding: var(--syn-mc-cadoor-padding, 3px 10px); font: var(--syn-mc-cadoor-font, 500 11.5px var(--type-family)); color: var(--syn-mc-cadoor-color, var(--text-body)); background: transparent; cursor: pointer; }
.syn-mc-cadoor:hover { background: var(--syn-mc-cadoor-hover-background, var(--surface-hover)); }
.syn-mc-cadoor-count { font: var(--syn-mc-cadoor-count-font, 400 11px var(--type-family)); color: var(--syn-mc-cadoor-count-color, var(--text-rider)); }
.syn-mc-cadoor-none { font: var(--syn-mc-cadoor-none-font, 400 11px var(--type-family)); color: var(--syn-mc-cadoor-none-color, var(--text-faint)); }
/* Q382(b): the ATOMS honest empty — the seat stands unlinked, its value the vacancy register + the one quiet door to the Notices lens */
.syn-mc-atomsvalue[data-spec="mc-pursuit-atoms-empty"] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--syn-mc-atomsvalue-spec-mc-pursuit-atoms-empty-gap, 5px); }
.syn-mc-atomsvalue[data-spec="mc-pursuit-atoms-empty"] .syn-fv-vacant { white-space: nowrap; }
/* Q398(c) MP-7: align-items center — the ActGlyph (line-height 0) sat low on a baseline-aligned row. */
.syn-mc-atomslink { display: inline-flex; align-items: center; gap: var(--syn-mc-atomslink-gap, 4px); font: var(--syn-mc-atomslink-font, 500 11px var(--type-family)); color: var(--syn-mc-atomslink-color, var(--text-body)); text-decoration: var(--syn-mc-atomslink-text-decoration, none); border: var(--syn-mc-atomslink-border, 1px solid var(--border-default)); border-radius: var(--syn-mc-atomslink-border-radius, var(--radius-nav)); padding: var(--syn-mc-atomslink-padding, 1px 8px); background: var(--syn-mc-atomslink-background, var(--surface-plane)); white-space: nowrap; }
.syn-mc-atomslink:hover { background: var(--syn-mc-atomslink-hover-background, var(--surface-hover)); color: var(--syn-mc-atomslink-hover-color, var(--text-ink)); text-decoration: var(--syn-mc-atomslink-hover-text-decoration, none); }

/* Q304 — THE MANAGE LINKS MODAL (Relay 26 d1, captions = spec of record; LinksConfigModal
   absorbed WorkspaceUrlsModal — the .syn-mc-workspacelinks opener died with it). Group labels =
   the mono-caps register; the SharePoint URL = chrome-class mono 11 (never scales), ellipsized;
   the unset seat wears the disabled register; ad-hoc rows = 500-12 ink label over mono-10.5
   tertiary URL (single-line ellipsis); the quiet Edit/Remove acts 400 11 tertiary; the armed
   inline-confirm row takes the hover ground; the composer = Label (200px) + URL (flex) + Save. */
.syn-lcm-glabel { font: var(--syn-lcm-glabel-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-lcm-glabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-lcm-glabel-text-transform, var(--type-label-transform)); color: var(--syn-lcm-glabel-color, var(--text-faint)); padding: var(--syn-lcm-glabel-padding, 0 0 6px); }
.syn-lcm-glabel.is-second { padding-top: var(--syn-lcm-glabel-is-second-padding-top, 14px); }
.syn-lcm-row { display: flex; align-items: center; gap: var(--syn-lcm-row-gap, 10px); padding: var(--syn-lcm-row-padding, 8px 0); border-bottom: var(--syn-lcm-row-border-bottom, 1px solid var(--border-hairline)); }
/* The armed row's drawn hover ground bleeds 8px past the row — painted as a SPREAD SHADOW so
   the bleed never extends the modal body's scroll box (the T19 overflow class; a negative-margin
   bleed grows scrollWidth inside the zero-padding scroll container). */
.syn-lcm-row:has(.syn-inlinedel-confirm) { background: var(--syn-lcm-row-has-inlinedel-confirm-background, var(--surface-hover)); box-shadow: var(--syn-lcm-row-has-inlinedel-confirm-box-shadow, var(--row-halo-wide)); border-radius: var(--syn-lcm-row-has-inlinedel-confirm-border-radius, var(--radius-2xs)); }
.syn-lcm-spurl { flex: 1; min-width: 0; font: var(--syn-lcm-spurl-font, 400 11.5px var(--type-family-mono)); color: var(--syn-lcm-spurl-color, var(--text-body)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-lcm-unset { flex: 1; font: var(--syn-lcm-unset-font, 400 11.5px var(--type-family)); color: var(--syn-lcm-unset-color, var(--text-faint)); font-style: var(--syn-lcm-unset-font-style, italic); }
.syn-lcm-urlinput { flex: 1; min-width: 0; box-sizing: border-box; border: var(--syn-lcm-urlinput-border, 1px solid var(--border-default)); border-radius: var(--syn-lcm-urlinput-border-radius, var(--radius-sm)); background: var(--syn-lcm-urlinput-background, var(--surface-plane)); padding: var(--syn-lcm-urlinput-padding, 4px 8px); font: var(--syn-lcm-urlinput-font, 400 11.5px var(--type-family-mono)); color: var(--syn-lcm-urlinput-color, var(--text-body)); outline: none; }
.syn-lcm-urlinput:focus { border-color: var(--syn-lcm-urlinput-focus-border-color, var(--border-emphasis)); }
.syn-lcm-act { border: none; background: transparent; padding: 0; font: var(--syn-lcm-act-font, 400 11px var(--type-family)); color: var(--syn-lcm-act-color, var(--text-tertiary)); cursor: pointer; flex: none; }
.syn-lcm-act:hover { color: var(--syn-lcm-act-hover-color, var(--text-ink)); }
.syn-lcm-linkmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-lcm-linkmain-gap, 1px); }
.syn-lcm-linklabel { font: var(--syn-lcm-linklabel-font, 500 12px var(--type-family)); color: var(--syn-lcm-linklabel-color, var(--text-ink)); }
.syn-lcm-linkurl { font: var(--syn-lcm-linkurl-font, 400 10.5px var(--type-family-mono)); color: var(--syn-lcm-linkurl-color, var(--text-tertiary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--syn-lcm-linkurl-max-width, 380px); }
.syn-lcm-row .syn-inlinedel { font-size: var(--syn-lcm-row-inlinedel-font-size, 11.5px); color: var(--syn-lcm-row-inlinedel-color, var(--text-tertiary)); }
.syn-lcm-compose { display: flex; align-items: center; gap: var(--syn-lcm-compose-gap, 8px); padding: var(--syn-lcm-compose-padding, 10px 0 12px); }
.syn-lcm-composelabel { width: var(--syn-lcm-composelabel-width, 200px); box-sizing: border-box; border: var(--syn-lcm-composelabel-border, 1px solid var(--border-default)); border-radius: var(--syn-lcm-composelabel-border-radius, var(--radius-sm)); background: var(--syn-lcm-composelabel-background, var(--surface-plane)); padding: var(--syn-lcm-composelabel-padding, 4px 8px); font: var(--syn-lcm-composelabel-font, 400 11.5px var(--type-family)); color: var(--syn-lcm-composelabel-color, var(--text-body)); outline: none; }
.syn-lcm-composeurl { flex: 1; min-width: 0; box-sizing: border-box; border: var(--syn-lcm-composeurl-border, 1px solid var(--border-default)); border-radius: var(--syn-lcm-composeurl-border-radius, var(--radius-sm)); background: var(--syn-lcm-composeurl-background, var(--surface-plane)); padding: var(--syn-lcm-composeurl-padding, 4px 8px); font: var(--syn-lcm-composeurl-font, 400 11.5px var(--type-family)); color: var(--syn-lcm-composeurl-color, var(--text-body)); outline: none; }
.syn-lcm-composelabel:focus, .syn-lcm-composeurl:focus { border-color: var(--syn-lcm-composelabel-focus-border-color, var(--border-emphasis)); }
.syn-lcm-composelabel::placeholder, .syn-lcm-composeurl::placeholder { color: var(--syn-lcm-composelabel-placeholder-color, var(--text-faint)); }

/* Agency breadcrumb (annex A §6.3). */
.syn-mc-agencycrumb { display: inline; text-wrap: pretty; }
.syn-mc-agencysep { color: var(--syn-mc-agencysep-color, var(--text-faint)); margin: var(--syn-mc-agencysep-margin, 0 3px); }

/* Event-modal CSS removed with McEventModal ([REBUILD-P4-12](a), Q45 — the calendar is a
   read-only projection; pursuit dates author in the Pursuit Schedule master editor). */

/* Identity modal grids. The page header ALSO uses .syn-mc-identrow (flex, above) — inside the
   modal's identform the 2-col grid wins by descent (tranche name collision, scoped here). */
.syn-mc-identform { display: flex; flex-direction: column; gap: var(--syn-mc-identform-gap, 14px); }
.syn-mc-identform .syn-mc-identrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--syn-mc-identform-mc-identrow-gap, 12px); }
/* Q189: the identity modal's admin delete row — hairline-topped danger zone; the armed state
   swaps in the typed-number guard (semantic red rides var(--state-attention-text), the ruling-30 port). */

/* Q331 (Relay 31 §1 — the rd-* pins verbatim; Ken's in-sitting B ruling): the Reset-demo
   BORDERED ROW-ACT in the shell title row + its in-place inline confirm. Chrome class: px.
   Both themes derive from tokens; the armed commit keeps #fff ink on the solid --overdue field
   in dark (the destructive-commit seat pair — pinned). The transparent commit border keeps the
   armed height at the rest act's bordered height (KF-1's row invariance). */
.syn-mc-resetdemo { color: var(--syn-mc-resetdemo-color, var(--state-attention-text)); }   /* the danger INK only — chrome/size ride the canonical PageHeadingAction seat (the hand-rolled variant died 2026-08-26, Ken's sight: the odd-sized button) */
.syn-mc-resetdemo-armrow { display: flex; align-items: center; gap: var(--syn-mc-resetdemo-armrow-gap, 10px); outline: none; }
/* Q399->Q402 (Ken's third word, 2026-08-27): THE TOPR DELETE seat lives INSIDE the armed title editor's act row — a QUIET
   TEXT control (the canonical QuietText seat with the danger ink) left of Cancel, arming in place to the inline confirm. */
.syn-mc-deletetopr { color: var(--syn-mc-deletetopr-color, var(--state-attention-text)); }
.syn-mc-deletetopr:hover { color: var(--syn-mc-deletetopr-hover-color, var(--state-attention-text)); }
.syn-mc-deletetopr-armrow { display: flex; align-items: center; gap: var(--syn-mc-deletetopr-armrow-gap, 10px); outline: none; }
.syn-mc-deletetopr-hint { font: var(--syn-mc-deletetopr-hint-font, 400 11.5px var(--type-family)); color: var(--syn-mc-deletetopr-hint-color, var(--text-tertiary)); white-space: nowrap; }
.syn-mc-deletetopr-error { margin-top: var(--syn-mc-deletetopr-error-margin-top, 6px); font: var(--syn-mc-deletetopr-error-font, 400 11.5px var(--type-family)); color: var(--syn-mc-deletetopr-error-color, var(--state-attention-text)); }   /* Q402: the refusal, verbatim, under the editor's act row */   /* one line — the title row never grows (KF-1); the longer explanation rides the title */
.syn-mc-resetdemo-hint { font: var(--syn-mc-resetdemo-hint-font, 400 11.5px var(--type-family)); color: var(--syn-mc-resetdemo-hint-color, var(--text-tertiary)); max-width: var(--syn-mc-resetdemo-hint-max-width, 260px); }
.syn-mc-resetdemo-error { margin-top: var(--syn-mc-resetdemo-error-margin-top, 6px); font: var(--syn-mc-resetdemo-error-font, 400 11.5px var(--type-family)); color: var(--syn-mc-resetdemo-error-color, var(--state-attention-text)); text-align: right; }
/* Q391: the success half of the same seat - the success tone, fades on its own (the razor clears the state after). */
.syn-mc-resetdemo-notice { margin-top: var(--syn-mc-resetdemo-notice-margin-top, 6px); font: var(--syn-mc-resetdemo-notice-font, 400 11.5px var(--type-family)); color: var(--syn-mc-resetdemo-notice-color, var(--state-success)); text-align: right; animation: synFadeIn var(--motion-duration-fast) var(--motion-easing), synFadeOut var(--notice-fade) var(--notice-fade-easing) var(--notice-linger) forwards; }

/* Q332 (Relay 31 §2 — the ll-* pins verbatim): the LONG-LIST GRAMMAR's two shared registers.
   Dense vacancy row: title only, 400 12px --text-secondary, 5px rhythm on the row seam (its
   state lives once in the header count, never per row). Tail door: 500 11.5px accent, a plain
   navigation act. Chrome class: px. */
.syn-raildense { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: var(--syn-raildense-padding, 5px 0); border-bottom: var(--syn-raildense-border-bottom, 1px solid var(--border-hairline)); font: var(--syn-raildense-font, 400 12px var(--type-family)); color: var(--syn-raildense-color, var(--text-muted)); }
.syn-raildense:last-of-type { border-bottom: none; }
.syn-raildense:hover { color: var(--syn-raildense-hover-color, var(--text-ink)); }
.syn-railtail { display: block; border: none; background: transparent; cursor: pointer; padding: var(--syn-railtail-padding, 7px 0 0); font: var(--syn-railtail-font, 500 11.5px var(--type-family)); color: var(--syn-railtail-color, var(--accent-action)); }
.syn-railtail:hover { text-decoration: var(--syn-railtail-hover-text-decoration, underline); text-underline-offset: var(--syn-railtail-hover-text-underline-offset, 2px); }

/* Core Response Team — selectable rows + firm groups (mockup TeamBlock:1952) + Partners / deliverables. */
.syn-crt { display: flex; flex-direction: column; gap: var(--syn-crt-gap, 4px); }
.syn-crt-group-sep { padding-top: var(--syn-crt-group-sep-padding-top, 10px); margin-top: var(--syn-crt-group-sep-margin-top, 6px); border-top: var(--syn-crt-group-sep-border-top, 1px solid var(--border-default)); }
.syn-crt-firm { display: flex; align-items: center; gap: var(--syn-crt-firm-gap, 9px); padding: var(--syn-crt-firm-padding, 2px 0 8px); }
.syn-crt-firm-label { font-size: var(--syn-crt-firm-label-font-size, var(--text-xs)); font-weight: var(--syn-crt-firm-label-font-weight, var(--font-semibold)); text-transform: var(--syn-crt-firm-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-crt-firm-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-crt-firm-label-color, var(--text-muted)); }
.syn-crt-firm-label.is-internal { color: var(--syn-crt-firm-label-is-internal-color, var(--accent-action)); }
.syn-crt-firm-count { font-size: var(--syn-crt-firm-count-font-size, var(--text-xs)); color: var(--syn-crt-firm-count-color, var(--text-tertiary)); }
.syn-crt-member { display: flex; align-items: center; gap: var(--syn-crt-member-gap, 9px); padding: var(--syn-crt-member-padding, 5px 0); }
.syn-crt-check-btn { border: none; background: transparent; padding: 0; cursor: pointer; display: inline-flex; }
.syn-crt-check-btn.is-partial { opacity: var(--syn-crt-check-btn-is-partial-opacity, 0.6); }   /* group checkbox at partial selection (mockup :1989) */
.syn-checkbox { width: var(--syn-checkbox-width, 16px); height: var(--syn-checkbox-height, 16px); border-radius: var(--syn-checkbox-border-radius, var(--radius-xs-plus)); border: var(--syn-checkbox-border, 1px solid var(--border-emphasis)); background: transparent; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-checkbox.is-on { border-color: var(--syn-checkbox-is-on-border-color, var(--text-ink)); background: var(--syn-checkbox-is-on-background, var(--text-ink)); color: var(--syn-checkbox-is-on-color, var(--surface-plane)); }   /* AF-2308: ink with its tick */
.syn-crt-mailbtn { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--syn-crt-mailbtn-color, var(--text-tertiary)); cursor: pointer; padding: var(--syn-crt-mailbtn-padding, 4px); border-radius: var(--syn-crt-mailbtn-border-radius, var(--radius-sm)); }
.syn-crt-mailbtn:hover { background: var(--syn-crt-mailbtn-hover-background, var(--surface-hover)); color: var(--syn-crt-mailbtn-hover-color, var(--text-ink)); }
.syn-crt-selbar { margin-top: var(--syn-crt-selbar-margin-top, 12px); padding-top: var(--syn-crt-selbar-padding-top, 12px); border-top: var(--syn-crt-selbar-border-top, 1px solid var(--border-default)); display: flex; align-items: center; gap: var(--syn-crt-selbar-gap, 10px); }
.syn-crt-selcount { font-size: var(--syn-crt-selcount-font-size, 0.78125rem); color: var(--syn-crt-selcount-color, var(--text-muted)); }
.syn-spacer { flex: 1; }
/* EmailDraftModal (mockup:1737) — people-chip To/Cc, subject, body. */
.syn-email-field { display: flex; flex-direction: column; gap: var(--syn-email-field-gap, 5px); }
.syn-email-label { font-size: var(--syn-email-label-font-size, 0.75rem); font-weight: var(--syn-email-label-font-weight, var(--font-medium)); color: var(--syn-email-label-color, var(--text-muted)); }
.syn-email-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--syn-email-chips-gap, 6px); border: var(--syn-email-chips-border, 1px solid var(--border-default)); border-radius: var(--syn-email-chips-border-radius, var(--shape-radius-control)); padding: var(--syn-email-chips-padding, 7px 9px); min-height: var(--syn-email-chips-min-height, 40px); }
.syn-email-chip { display: inline-flex; align-items: center; gap: var(--syn-email-chip-gap, 5px); padding: var(--syn-email-chip-padding, 3px 6px 3px 4px); border-radius: var(--syn-email-chip-border-radius, var(--shape-radius-pill)); background: var(--syn-email-chip-background, var(--surface-inset)); font-size: var(--syn-email-chip-font-size, 0.78125rem); }
.syn-email-chipx { border: none; background: transparent; padding: 0; color: var(--syn-email-chipx-color, var(--text-tertiary)); cursor: pointer; display: inline-flex; }
.syn-email-chipx:hover { color: var(--syn-email-chipx-hover-color, var(--text-ink)); }
.syn-email-add { min-width: var(--syn-email-add-min-width, 150px); flex: 1; }
.syn-clickable { cursor: pointer; border-radius: var(--syn-clickable-border-radius, var(--radius-sm)); }
.syn-clickable:hover { background: var(--syn-clickable-hover-background, var(--surface-hover)); }
/* Q271: the old DeliverablesModal grid rows (.syn-deliv-*), .syn-modal-sub, and .syn-danger-link
   died with the corrected partner model (Ken 2026-08-16) — see .syn-pdm-* below. */

/* Section header right slot (title + actions) — referenced by SectionCard; aligns multi-element headers. */
.syn-section-head-actions { display: inline-flex; align-items: center; gap: var(--syn-section-head-actions-gap, var(--space-2)); }

/* Quiet underline tabs in a SectionCard header — the org-Tasks grain, promoted to a shared name at
   its second caller (People OOO, [REBUILD-P2-21]): microlabel left, tabs with counts right, box below. */
.syn-tabs         { display:inline-flex; gap:var(--syn-tabs-gap, 14px); }
.syn-tab          { display:inline-flex; align-items:center; gap:var(--syn-tab-gap, 5px); border:none; background:transparent; padding:var(--syn-tab-padding, 2px 0);
                    font-size:var(--syn-tab-font-size, 0.75rem); font-weight:var(--syn-tab-font-weight, 500); cursor:pointer; color:var(--syn-tab-color, var(--text-tertiary)); border-bottom:var(--syn-tab-border-bottom, 2px solid transparent); }
.syn-tab.is-active{ font-weight:var(--syn-tab-is-active-font-weight, 600); color:var(--syn-tab-is-active-color, var(--text-ink)); border-bottom-color:var(--syn-tab-is-active-border-bottom-color, var(--text-ink)); }   /* Q317(b): the INK active — the house tab canon; the pre-canon accent-blue underline died (the last holdout: every conformed tab species reads --text-primary) */
.syn-tabcount     { font-size:var(--syn-tabcount-font-size, 11.5px); color:var(--syn-tabcount-color, var(--text-tertiary)); }   /* Q342(c) C3: a count on a tab = chrome, px */

/* Link-style button (inline navigation / toggles). */
.syn-link { display: inline-flex; align-items: center; gap: var(--syn-link-gap, 2px); background: none; border: none; padding: 0; font: inherit; font-size: var(--syn-link-font-size, var(--text-xs)); color: var(--syn-link-color, var(--accent-action-active)); cursor: pointer; }
.syn-link:hover { text-decoration: var(--syn-link-hover-text-decoration, underline); }

/* Tasks. */
.syn-task-row { display: flex; align-items: flex-start; gap: var(--syn-task-row-gap, var(--space-3)); padding: var(--syn-task-row-padding, 12px 4px); border-top: var(--syn-task-row-border-top, 1px solid var(--border-default)); }
.syn-task-toggle { flex-shrink: 0; margin-top: var(--syn-task-toggle-margin-top, 1px); padding: 0; border: none; background: transparent; cursor: pointer; display: inline-flex; color: var(--syn-task-toggle-color, var(--border-strong)); }
.syn-task-toggle.is-done { color: var(--syn-task-toggle-is-done-color, var(--state-success)); }
.syn-task-main { flex: 1; min-width: 0; }
.syn-task-title { font-size: var(--syn-task-title-font-size, 0.84375rem); font-weight: var(--syn-task-title-font-weight, 450); line-height: var(--syn-task-title-line-height, 1.4); color: var(--syn-task-title-color, var(--text-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-task-title.is-done { color: var(--syn-task-title-is-done-color, var(--text-tertiary)); text-decoration: var(--syn-task-title-is-done-text-decoration, line-through); }
.syn-task-meta { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--syn-task-meta-gap, 14px); margin-top: var(--syn-task-meta-margin-top, 6px); overflow: hidden; }
.syn-task-due { display: inline-flex; align-items: center; gap: var(--syn-task-due-gap, 4px); font-size: var(--syn-task-due-font-size, var(--text-xs)); color: var(--syn-task-due-color, var(--text-tertiary)); font-variant-numeric: var(--syn-task-due-font-variant-numeric, tabular-nums); white-space: nowrap; flex-shrink: 0; }
.syn-task-due.is-overdue { color: var(--syn-task-due-is-overdue-color, var(--state-attention)); }
.syn-task-owner { display: inline-flex; align-items: center; gap: var(--syn-task-owner-gap, 6px); font-size: var(--syn-task-owner-font-size, var(--text-xs)); color: var(--syn-task-owner-color, var(--text-tertiary)); white-space: nowrap; min-width: 0; }
.syn-task-owner-name { overflow: hidden; text-overflow: ellipsis; }
.syn-task-done { display: inline-flex; align-items: center; gap: var(--syn-task-done-gap, 5px); font-size: var(--syn-task-done-font-size, var(--text-xs)); color: var(--syn-task-done-color, var(--state-success)); white-space: nowrap; flex-shrink: 0; }
.syn-task-actions { display: inline-flex; align-items: center; gap: var(--syn-task-actions-gap, var(--space-1)); flex-shrink: 0; opacity: var(--syn-task-actions-opacity, 0); transition: var(--syn-task-actions-transition, opacity var(--motion-duration-fast) var(--motion-easing)); }
.syn-task-row:hover .syn-task-actions, .syn-task-row:focus-within .syn-task-actions { opacity: var(--syn-task-row-hover-task-actions-opacity, 1); }
.syn-task-quickadd { display: flex; gap: var(--syn-task-quickadd-gap, var(--space-2)); margin-bottom: var(--syn-task-quickadd-margin-bottom, 6px); }
.syn-task-empty { font-size: var(--syn-task-empty-font-size, var(--text-sm)); color: var(--syn-task-empty-color, var(--text-tertiary)); padding: var(--syn-task-empty-padding, 16px 4px); text-align: center; margin: 0; }

/* ── Partners — THE CORRECTED-MODEL DIGEST (Q271; r10 Returns comp, Ken 2026-08-16). The plane
   rides .syn-section-body with an emphasis border (the drawn card); the empty state is the dashed
   plane. Species: identity (logo slot + name door + workshare micro-pair) · TA declared fact
   (neutral ramp, date-column law) · deliverables sub-zone · the total-workshare foot. ── */
.syn-partner-sec .syn-section-body { border-color: var(--syn-partner-sec-section-body-border-color, var(--border-emphasis)); }
.syn-partner-sec.is-empty .syn-section-body { border: var(--syn-partner-sec-is-empty-section-body-border, 1.5px dashed var(--border-emphasis)); box-shadow: none; }
.syn-partner-none { font-size: var(--syn-partner-none-font-size, 11.5px); color: var(--syn-partner-none-color, var(--text-faint)); text-align: center; }
.syn-partner-blk { padding: var(--syn-partner-blk-padding, 12px 0); border-bottom: var(--syn-partner-blk-border-bottom, 1px solid var(--border-hairline)); }
.syn-partner-identline { display: flex; align-items: center; gap: var(--syn-partner-identline-gap, 10px); }
.syn-partner-door { display: flex; align-items: center; gap: var(--syn-partner-door-gap, 10px); flex: 1; min-width: 0; text-decoration: var(--syn-partner-door-text-decoration, none); color: inherit; border-radius: var(--syn-partner-door-border-radius, var(--radius-sm)); }
.syn-partner-door:hover { background: var(--syn-partner-door-hover-background, var(--surface-hover)); }
.syn-partner-door:hover .syn-partner-name { text-decoration: var(--syn-partner-door-hover-partner-name-text-decoration, underline); }
/* Q330 (the dead-link guard): an absent target keeps the identity's footprint but the link
   affordance DIES — no hover lift, no underline, the muted name (the honest inert register). */
.syn-partner-door.is-inert:hover { background: transparent; }
.syn-partner-door.is-inert:hover .syn-partner-name { text-decoration: var(--syn-partner-door-is-inert-hover-partner-name-text-decoration, none); }
.syn-partner-door.is-inert .syn-partner-name { color: var(--syn-partner-door-is-inert-partner-name-color, var(--text-tertiary)); font-style: var(--syn-partner-door-is-inert-partner-name-font-style, italic); }
/* The standing LOGO placeholder ([REBUILD-LOGO-1]) — aspect-preserving slot per the prod logo-plate law. */
/* UD4 (LOGO BOX LAW): .syn-partner-logoslot died — the partner-row seat rides the shared .syn-logobox.is-28. */
/* Q294(c) — KF-2: the bound logo rides the slot aspect-preserved (the logo-plate law, 2px inset). */
.syn-partner-name { font-size: var(--syn-partner-name-font-size, 12.5px); font-weight: var(--syn-partner-name-font-weight, 500); color: var(--syn-partner-name-color, var(--text-ink)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-partner-ws { display: inline-flex; align-items: baseline; gap: var(--syn-partner-ws-gap, 5px); flex: none; }
.syn-partner-micro { font-size: var(--syn-partner-micro-font-size, 8.5px); font-weight: var(--syn-partner-micro-font-weight, 600); letter-spacing: var(--syn-partner-micro-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-partner-micro-text-transform, var(--type-label-transform)); color: var(--syn-partner-micro-color, var(--text-faint)); }
.syn-partner-wsval { font-size: var(--syn-partner-wsval-font-size, 11.5px); font-weight: var(--syn-partner-wsval-font-weight, 500); color: var(--syn-partner-wsval-color, var(--text-body)); }
.syn-partner-taline { display: flex; align-items: baseline; gap: var(--syn-partner-taline-gap, 8px); margin-top: var(--syn-partner-taline-margin-top, 7px); }
.syn-partner-taval { font-size: var(--syn-partner-taval-font-size, 11.5px); color: var(--syn-partner-taval-color, var(--text-body)); flex: 1; }
.syn-partner-tadate { font-size: var(--syn-partner-tadate-font-size, 10.5px); color: var(--syn-partner-tadate-color, var(--text-tertiary)); flex: none; }
.syn-partner-delivzone { margin-top: var(--syn-partner-delivzone-margin-top, 9px); border-top: var(--syn-partner-delivzone-border-top, 1px solid var(--border-hairline)); padding-top: var(--syn-partner-delivzone-padding-top, 7px); display: flex; flex-direction: column; gap: var(--syn-partner-delivzone-gap, 4px); }
.syn-partner-delivcount { letter-spacing: 0; text-transform: var(--syn-partner-delivcount-text-transform, none); font-size: var(--syn-partner-delivcount-font-size, 10px); font-weight: var(--syn-partner-delivcount-font-weight, 400); }
.syn-partner-delivrow { display: flex; align-items: baseline; gap: var(--syn-partner-delivrow-gap, 8px); }
.syn-partner-delivtext { font-size: var(--syn-partner-delivtext-font-size, 11.5px); line-height: var(--syn-partner-delivtext-line-height, 1.4); color: var(--syn-partner-delivtext-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-partner-delivdate { font-size: var(--syn-partner-delivdate-font-size, 10.5px); color: var(--syn-partner-delivdate-color, var(--text-tertiary)); flex: none; }
.syn-partner-delivdate.is-overdue { font-weight: var(--syn-partner-delivdate-is-overdue-font-weight, 700); color: var(--syn-partner-delivdate-is-overdue-color, var(--state-attention-text)); }
.syn-partner-total { display: flex; align-items: baseline; gap: var(--syn-partner-total-gap, 8px); padding: var(--syn-partner-total-padding, 8px 0 6px); }
.syn-partner-totalval { font-size: var(--syn-partner-totalval-font-size, 11.5px); font-weight: var(--syn-partner-totalval-font-weight, 500); color: var(--syn-partner-totalval-color, var(--text-ink)); }

/* Q272: the pipeline toolbar's demo-mode toggle — label + canonical ToggleSwitch. */

/* ── The Partner-deliverables modal (Q271; comp modal 4 — the corrected model). ── */
.syn-pdm-intro { margin: var(--syn-pdm-intro-margin, 0 0 10px); font-size: var(--syn-pdm-intro-font-size, 12px); line-height: var(--syn-pdm-intro-line-height, 1.5); color: var(--syn-pdm-intro-color, var(--text-muted)); }
.syn-pdm-group { margin-bottom: var(--syn-pdm-group-margin-bottom, 10px); }
.syn-pdm-grouplabel { font-size: var(--syn-pdm-grouplabel-font-size, 9.5px); font-weight: var(--syn-pdm-grouplabel-font-weight, 600); letter-spacing: var(--syn-pdm-grouplabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-pdm-grouplabel-text-transform, var(--type-label-transform)); color: var(--syn-pdm-grouplabel-color, var(--text-faint)); }
.syn-pdm-groupcount { letter-spacing: 0; text-transform: var(--syn-pdm-groupcount-text-transform, none); font-size: var(--syn-pdm-groupcount-font-size, 10px); font-weight: var(--syn-pdm-groupcount-font-weight, 400); }
.syn-pdm-card { border: var(--syn-pdm-card-border, 1px solid var(--border-default)); border-radius: var(--syn-pdm-card-border-radius, var(--shape-radius-control)); padding: var(--syn-pdm-card-padding, 2px 12px 8px); margin-top: var(--syn-pdm-card-margin-top, 4px); }
.syn-pdm-row { display: flex; gap: var(--syn-pdm-row-gap, 8px); align-items: baseline; padding: var(--syn-pdm-row-padding, 7px 0); border-bottom: var(--syn-pdm-row-border-bottom, 1px solid var(--border-hairline)); cursor: pointer; }
.syn-pdm-row:hover { background: var(--syn-pdm-row-hover-background, var(--surface-hover)); }
.syn-pdm-check { width: var(--syn-pdm-check-width, 14px); height: var(--syn-pdm-check-height, 14px); border-radius: var(--syn-pdm-check-border-radius, var(--shape-radius-pill)); border: var(--syn-pdm-check-border, 1.5px solid var(--border-emphasis)); background: var(--syn-pdm-check-background, var(--surface-plane)); flex: none; align-self: center; padding: 0; cursor: pointer; font: var(--syn-pdm-check-font, 600 8px/14px var(--type-family)); text-align: center; color: transparent; }
.syn-pdm-check.is-received { border: none; background: var(--syn-pdm-check-is-received-background, var(--text-ink)); color: var(--syn-pdm-check-is-received-color, var(--text-on-accent)); }
.dark .syn-pdm-check.is-received { color: var(--syn-pdm-check-is-received-color, var(--text-on-accent-dark)); }   /* Q291 (F-6): the same inverted-disc dark pair (a spotted sibling of the chip class) */
.syn-pdm-text { font-size: var(--syn-pdm-text-font-size, 12px); color: var(--syn-pdm-text-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-pdm-date { font-size: var(--syn-pdm-date-font-size, 11.5px); color: var(--syn-pdm-date-color, var(--text-tertiary)); flex: none; }
.syn-pdm-date.is-overdue { font-weight: var(--syn-pdm-date-is-overdue-font-weight, 700); color: var(--syn-pdm-date-is-overdue-color, var(--state-attention-text)); }
.syn-pdm-compose { display: flex; gap: var(--syn-pdm-compose-gap, 8px); align-items: center; padding-top: var(--syn-pdm-compose-padding-top, 6px); }
.syn-pdm-composeinput { flex: 1; min-width: 0; border: var(--syn-pdm-composeinput-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-pdm-composeinput-border-radius, var(--radius-nav)); background: var(--syn-pdm-composeinput-background, var(--surface-plane)); padding: var(--syn-pdm-composeinput-padding, 5px 9px); font: var(--syn-pdm-composeinput-font, 400 11.5px var(--type-family)); color: var(--syn-pdm-composeinput-color, var(--text-ink)); }
.syn-pdm-composeinput::placeholder { color: var(--syn-pdm-composeinput-placeholder-color, var(--text-faint)); }
.syn-pdm-composedue { width: var(--syn-pdm-composedue-width, 118px); flex: none; }

/* Team Workload — internal CRT load, each member expands to Assignments + this-TOPR open tasks (mockup WorkloadBlock:2253). */
/* Q179 (comp 8c rev d, B1–B19): the comp pins the SECTION at 1040 (B-F1 — slot uncomped,
   kept in the full-width band, capped). */
.syn-wl-cap { max-width: var(--syn-wl-cap-max-width, 1040px); }
.syn-wl { display: flex; flex-direction: column; }
/* B4: member rows separated by the ROW hairline, 13px rhythm, gap 12. */
.syn-wl-item { border-top: var(--syn-wl-item-border-top, 1px solid var(--border-hairline)); }
.syn-wl-item:first-child { border-top: none; }
.syn-wl-row { width: 100%; display: flex; align-items: center; gap: var(--syn-wl-row-gap, 12px); padding: var(--syn-wl-row-padding, 13px 0); background: transparent; border: none; text-align: left; cursor: pointer; font-family: inherit; }
/* The canonical door glyph (UD13 CHEVRON-CANON; r38-5c confirms the stroked pair) in a fixed 14px column. */
.syn-wl-chev { color: var(--syn-wl-chev-color, var(--text-faint)); width: var(--syn-wl-chev-width, 14px); flex-shrink: 0; }
/* UD33 (r38-5c drawn): member name 600 12.5 (was 14 — the drawn row reads at the fold's own size). */
.syn-wl-name { font-size: var(--syn-wl-name-font-size, 0.78125rem); font-weight: var(--syn-wl-name-font-weight, var(--font-semibold)); flex-shrink: 0; color: var(--syn-wl-name-color, var(--text-ink)); }
/* Q183 delta (2b) — RULED 2026-08-11 (Gate-4 fix-wave verdict): member names read INK here,
   a recorded one-off (the comp wins); the EntityRef law stands everywhere else, and the
   TOPR numbers beside them stay the row's accent links. */
.syn-wl-name .syn-ref { color: var(--syn-wl-name-ref-color, var(--text-ink)); }
/* UD33 (r38-5c drawn): the collapsed right summary is the honest counts sentence —
   "N open pursuits · N open tasks [· N overdue]", 400 12.5 tertiary tabular; UD29's chip-run
   preview and its client fit module are retired with the drawing. */
.syn-wl-load { flex: none; margin-left: auto; font-size: var(--syn-wl-load-font-size, 0.78125rem); font-weight: var(--syn-wl-load-font-weight, 400); color: var(--syn-wl-load-color, var(--text-tertiary)); font-variant-numeric: var(--syn-wl-load-font-variant-numeric, tabular-nums); white-space: nowrap; }
.syn-wl-zeroopen { color: var(--syn-wl-zeroopen-color, var(--text-faint)); }   /* B8: "0 open tasks" dims */
.syn-wl-overdue { font-weight: var(--syn-wl-overdue-font-weight, 700); color: var(--syn-wl-overdue-color, var(--state-attention-text)); }
/* UD33 (r38-5c drawn): the fold seats at 50px (chevron 14 + gap 12 + avatar 24 — the name edge),
   width-capped at the drawn 860. */
.syn-wl-detail { padding: var(--syn-wl-detail-padding, 2px 0 6px 50px); max-width: var(--syn-wl-detail-max-width, 860px); }
.syn-wl-asghead { font-size: var(--syn-wl-asghead-font-size, 0.59375rem); font-weight: var(--syn-wl-asghead-font-weight, 600); text-transform: var(--syn-wl-asghead-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-wl-asghead-letter-spacing, var(--type-label-tracking)); color: var(--syn-wl-asghead-color, var(--text-tertiary)); padding-bottom: var(--syn-wl-asghead-padding-bottom, 7px); border-bottom: var(--syn-wl-asghead-border-bottom, 1px solid var(--border-default)); }
.syn-wl-asgcount { font-weight: var(--syn-wl-asgcount-font-weight, 500); color: var(--syn-wl-asgcount-color, var(--text-faint)); }
/* UD33 (r38-5c drawn): the task run aligns to the TITLE edge — 84px = the 74px id rail + gap 10;
   dot bullets, wrapping titles, no hairlines. */
.syn-wl-tasklist { padding: var(--syn-wl-tasklist-padding, 4px 0 2px 84px); display: flex; flex-direction: column; }
.syn-wl-task { display: flex; align-items: baseline; gap: var(--syn-wl-task-gap, 10px); padding: var(--syn-wl-task-padding, 5px 0); }
.syn-wl-taskdot { width: var(--syn-wl-taskdot-width, 5px); height: var(--syn-wl-taskdot-height, 5px); border-radius: var(--syn-wl-taskdot-border-radius, var(--shape-radius-pill)); background: var(--syn-wl-taskdot-background, var(--text-faint)); flex-shrink: 0; align-self: center; }
/* Rev d (Q167): titles NEVER truncate — they wrap. */
.syn-wl-taskname { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: var(--syn-wl-taskname-line-height, 1.4); }
/* B16/B17: task titles 400 12.5/1.45 body that WRAP; dates 12px right on a 44px-min column,
   §5 urgency-graded. */
.syn-wl-taskname { font-size: var(--syn-wl-taskname-font-size, 0.78125rem); font-weight: var(--syn-wl-taskname-font-weight, 400); line-height: var(--syn-wl-taskname-line-height, 1.45); color: var(--syn-wl-taskname-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-wl-taskdue { font-size: var(--syn-wl-taskdue-font-size, 0.75rem); font-variant-numeric: var(--syn-wl-taskdue-font-variant-numeric, tabular-nums); flex-shrink: 0; min-width: var(--syn-wl-taskdue-min-width, 56px); text-align: right; }
.syn-wl-taskdue.is-overdue { color: var(--syn-wl-taskdue-is-overdue-color, var(--state-attention-text)); font-weight: var(--syn-wl-taskdue-is-overdue-font-weight, 700); }
.syn-wl-taskdue.is-urgent { color: var(--syn-wl-taskdue-is-urgent-color, var(--text-ink)); font-weight: var(--syn-wl-taskdue-is-urgent-font-weight, 700); }
.syn-wl-taskdue.is-warn { color: var(--syn-wl-taskdue-is-warn-color, var(--due-warn)); font-weight: var(--syn-wl-taskdue-is-warn-font-weight, 600); }
.syn-wl-taskdue.is-far { color: var(--syn-wl-taskdue-is-far-color, var(--due-far)); font-weight: var(--syn-wl-taskdue-is-far-font-weight, 500); }
/* B6: role WORDS 400 12.5 tertiary ·-joined. */
.syn-wl-roles { font-size: var(--syn-wl-roles-font-size, 0.78125rem); font-weight: var(--syn-wl-roles-font-weight, 400); color: var(--syn-wl-roles-color, var(--text-tertiary)); }
/* B12–B14: one group per TOPR — 10/0/4 rows on the row hairline (none after the last);
   baseline key row gap 10: mono id (min 38, breathes — B-F3) · wrapping title (this = ink,
   others = body) · role word · the fixed 64px right cell. */
.syn-wl-group { padding: var(--syn-wl-group-padding, 10px 0 4px); }
.syn-wl-group:not(:last-child) { border-bottom: var(--syn-wl-group-not-last-child-border-bottom, 1px solid var(--border-hairline)); }
.syn-wl-grouphead { display: flex; align-items: baseline; gap: var(--syn-wl-grouphead-gap, 10px); }
/* UD33 (r38-5c drawn): the id rail is a fixed 74px seat for the ratified word form ("TOPR 0038"). */
.syn-wl-groupid { width: var(--syn-wl-groupid-width, 74px); flex-shrink: 0; }
.syn-wl-groupid .syn-ref { font-family: var(--syn-wl-groupid-ref-font-family, var(--type-family-mono)); font-size: var(--syn-wl-groupid-ref-font-size, 0.71875rem); font-weight: var(--syn-wl-groupid-ref-font-weight, 600); font-variant-numeric: var(--syn-wl-groupid-ref-font-variant-numeric, tabular-nums); }
.syn-wl-grouptitle { font-size: var(--syn-wl-grouptitle-font-size, 0.78125rem); font-weight: var(--syn-wl-grouptitle-font-weight, 500); line-height: var(--syn-wl-grouptitle-line-height, 1.45); color: var(--syn-wl-grouptitle-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-wl-grouptitle.is-this { color: var(--syn-wl-grouptitle-is-this-color, var(--text-ink)); }
.syn-wl-grouproles { font-size: var(--syn-wl-grouproles-font-size, 0.71875rem); font-weight: var(--syn-wl-grouproles-font-weight, 400); color: var(--syn-wl-grouproles-color, var(--text-tertiary)); flex-shrink: 0; }
.syn-wl-groupright { font-size: var(--syn-wl-groupright-font-size, 0.71875rem); font-weight: var(--syn-wl-groupright-font-weight, 400); color: var(--syn-wl-groupright-color, var(--text-tertiary)); flex-shrink: 0; width: var(--syn-wl-groupright-width, 64px); text-align: right; }
.syn-wl-groupright.is-this { font-weight: var(--syn-wl-groupright-is-this-font-weight, 600); color: var(--syn-wl-groupright-is-this-color, var(--text-ink)); }
/* UD33 (r38-5c drawn): the honest in-place tail door — the long-list grammar's tail-door FORM
   applied to a fold (this card has no owning tab to door to; RailTailDoor's own register is the
   rail's, accent — the drawn workload door reads 500 11 tertiary with the canonical stroked  >).
   Chrome class: px. */
.syn-wl-taildoor { display: inline-flex; align-items: center; border: none; background: transparent; cursor: pointer; padding: 0; font: var(--syn-wl-taildoor-font, 500 11px var(--type-family)); color: var(--syn-wl-taildoor-color, var(--text-tertiary)); }
.syn-wl-taildoor:hover { color: var(--syn-wl-taildoor-hover-color, var(--text-ink)); }
.syn-wl-tasktailrow { padding: var(--syn-wl-tasktailrow-padding, 3px 0 4px); }
.syn-wl-asgtailrow { padding: var(--syn-wl-asgtailrow-padding, 8px 0 4px); }
.syn-wl-empty { font-size: var(--syn-wl-empty-font-size, 0.8125rem); color: var(--syn-wl-empty-color, var(--text-tertiary)); padding: var(--syn-wl-empty-padding, 10px 0); }

/* Proposal Package volumes + gated-section glance. */
.syn-vol-row { display: flex; align-items: flex-start; gap: var(--syn-vol-row-gap, var(--space-3)); padding: var(--syn-vol-row-padding, var(--space-2) 0); border-bottom: var(--syn-vol-row-border-bottom, 1px solid var(--border-default)); }
.syn-vol-row:last-child { border-bottom: none; }
.syn-vol-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-vol-main-gap, var(--space-1)); }
.syn-vol-title { font-size: var(--syn-vol-title-font-size, var(--text-sm)); font-weight: var(--syn-vol-title-font-weight, var(--font-medium)); color: var(--syn-vol-title-color, var(--text-ink)); }
.syn-glance { margin-top: var(--syn-glance-margin-top, var(--space-3)); border-top: var(--syn-glance-border-top, 1px solid var(--border-default)); padding-top: var(--syn-glance-padding-top, var(--space-3)); display: flex; flex-direction: column; gap: var(--syn-glance-gap, var(--space-2)); }
.syn-glance-row { display: flex; align-items: center; gap: var(--syn-glance-row-gap, var(--space-2)); font-size: var(--syn-glance-row-font-size, var(--text-sm)); }
.syn-glance-label { font-weight: var(--syn-glance-label-font-weight, var(--font-medium)); color: var(--syn-glance-label-color, var(--text-ink)); }
.syn-glance-row .syn-link { margin-left: auto; }

/* Key Personnel slots. */
.syn-kp-slot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-kp-slot-head-gap, var(--space-3)); padding-bottom: var(--syn-kp-slot-head-padding-bottom, var(--space-3)); margin-bottom: var(--syn-kp-slot-head-margin-bottom, var(--space-2)); border-bottom: var(--syn-kp-slot-head-border-bottom, 1px solid var(--border-default)); }
.syn-kp-role { display: flex; align-items: center; gap: var(--syn-kp-role-gap, var(--space-2)); min-width: 0; }
.syn-kp-rolename { font-size: var(--syn-kp-rolename-font-size, var(--text-sm)); font-weight: var(--syn-kp-rolename-font-weight, var(--font-semibold)); color: var(--syn-kp-rolename-color, var(--text-ink)); }
.syn-kp-add { display: flex; align-items: center; gap: var(--syn-kp-add-gap, var(--space-2)); margin-top: var(--syn-kp-add-margin-top, var(--space-3)); }
.syn-kp-add .syn-picker { flex: 1; }
.syn-loc-select { width: auto; min-width: var(--syn-loc-select-min-width, 132px); padding: var(--syn-loc-select-padding, 2px var(--space-2)); font-size: var(--syn-loc-select-font-size, var(--text-xs)); }
.syn-person-row.is-selected { background: var(--syn-person-row-is-selected-background, var(--accent-muted)); border-radius: var(--syn-person-row-is-selected-border-radius, var(--radius-sm)); }
.syn-inline-check { font-size: var(--syn-inline-check-font-size, var(--text-xs)); white-space: nowrap; align-items: center; }
.syn-inline-check input { margin-top: 0; }

/* Documents & links rows. */
.syn-link-row { display: flex; align-items: center; gap: var(--syn-link-row-gap, var(--space-3)); padding: var(--syn-link-row-padding, var(--space-1) 0); }
.syn-url-label { font-size: var(--syn-url-label-font-size, var(--text-sm)); color: var(--syn-url-label-color, var(--text-muted)); min-width: var(--syn-url-label-min-width, 116px); }
.syn-ext-link { display: inline-flex; align-items: center; gap: var(--syn-ext-link-gap, var(--space-1)); font-size: var(--syn-ext-link-font-size, var(--text-sm)); color: var(--syn-ext-link-color, var(--accent-action-active)); text-decoration: var(--syn-ext-link-text-decoration, none); min-width: 0; }
.syn-ext-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-ext-link:hover { text-decoration: var(--syn-ext-link-hover-text-decoration, underline); }
.syn-link-row .syn-listrow-end { margin-left: auto; }

/* Schedule — custom month calendar (mockup ScheduleBlock:2046): multi-day events as lane-packed spanning bars.
   Per-type colors are set inline via --bar-color; the tint uses --surface (theme-aware, vs the mockup's hardcoded
   white) so the bars read correctly in dark mode too. */
/* Q163 (rulings 18–19, comp 8a): the plane's first row — steppers + month/year jump menus
   (the date-picker idiom, one law) + quiet Today + the type legend right. */
.syn-cal-toolrow { display: flex; align-items: center; gap: var(--syn-cal-toolrow-gap, 10px); padding-bottom: var(--syn-cal-toolrow-padding-bottom, 10px); }
/* A5: 26×26 bordered ‹  > steppers — radius 7, 500 13px text-body glyphs. */
.syn-cal-step { width: var(--syn-cal-step-width, 26px); height: var(--syn-cal-step-height, 26px); display: inline-flex; align-items: center; justify-content: center; border: var(--syn-cal-step-border, 1px solid var(--border-default)); border-radius: var(--syn-cal-step-border-radius, var(--radius-nav)); background: var(--syn-cal-step-background, var(--surface-plane)); font-family: inherit; font-size: var(--syn-cal-step-font-size, 0.8125rem); font-weight: var(--syn-cal-step-font-weight, 500); color: var(--syn-cal-step-color, var(--text-body)); cursor: pointer; }
/* A6: the month/year cluster — 600 13px ink, minWidth 118 centered; each half is a
   click-to-jump with a faint ▾; the menus speak the canonical dropdown anatomy. */
.syn-cal-mylabel { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--syn-cal-mylabel-gap, 4px); min-width: var(--syn-cal-mylabel-min-width, 118px); font-size: var(--syn-cal-mylabel-font-size, 0.8125rem); font-weight: var(--syn-cal-mylabel-font-weight, 600); color: var(--syn-cal-mylabel-color, var(--text-ink)); text-align: center; }
.syn-cal-jumpbtn { border: none; background: transparent; padding: 0; font-family: inherit; font-size: var(--syn-cal-jumpbtn-font-size, 0.8125rem); font-weight: var(--syn-cal-jumpbtn-font-weight, 600); color: var(--syn-cal-jumpbtn-color, var(--text-ink)); cursor: pointer; }
/* Q398(j) MP-22: THE ONE JUMP POPOVER — no scroll-lists: a year stepper row over a 3×4 month grid (the full
   set on the page at once); the canonical popover chrome; CD's true-up rides relay-38 §5. */
/* A7: quiet Today — disabled when already on the current month (dimmed, FLAG A-F1). */
.syn-cal-todaybtn { display: inline-flex; align-items: center; border: var(--syn-cal-todaybtn-border, 1px solid var(--border-default)); border-radius: var(--syn-cal-todaybtn-border-radius, var(--radius-nav)); padding: var(--syn-cal-todaybtn-padding, 5px 11px); margin-left: var(--syn-cal-todaybtn-margin-left, 4px); background: var(--syn-cal-todaybtn-background, var(--surface-plane)); font-family: inherit; font-size: var(--syn-cal-todaybtn-font-size, 0.71875rem); font-weight: var(--syn-cal-todaybtn-font-weight, 600); color: var(--syn-cal-todaybtn-color, var(--text-muted)); cursor: pointer; }
.syn-cal-todaybtn:disabled { color: var(--syn-cal-todaybtn-disabled-color, var(--text-faint)); cursor: default; }
/* A8: legend items ride the toolrow's gap — 9×9 radius-3 swatch + 400 11px label. */
.syn-cal-legitem { display: inline-flex; align-items: center; gap: var(--syn-cal-legitem-gap, 5px); font-size: var(--syn-cal-legitem-font-size, 0.71875rem); color: var(--syn-cal-legitem-color, var(--text-muted)); }
.syn-cal-swatch2 { width: var(--syn-cal-swatch2-width, 9px); height: var(--syn-cal-swatch2-height, 9px); border-radius: var(--syn-cal-swatch2-border-radius, var(--radius-3xs)); flex-shrink: 0; }
/* A22: the empty-month line takes the legend's slot (copy FLAG A-F4). */
.syn-cal-emptynote { font-size: var(--syn-cal-emptynote-font-size, 0.71875rem); font-style: var(--syn-cal-emptynote-font-style, italic); color: var(--syn-cal-emptynote-color, var(--text-tertiary)); }
.syn-cal-emptynote .syn-link { font-size: inherit; font-style: inherit; cursor: pointer; }
/* A9: weekday header — 600 9px uppercase .08em DISABLED, 5px 8px. */
.syn-cal-dow2 { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: var(--syn-cal-dow2-border-bottom, 1px solid var(--border-default)); }
.syn-cal-dowcell2 { font-size: var(--syn-cal-dowcell2-font-size, 0.59375rem); font-weight: var(--syn-cal-dowcell2-font-weight, var(--font-semibold)); text-transform: var(--syn-cal-dowcell2-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-cal-dowcell2-letter-spacing, var(--type-label-tracking)); color: var(--syn-cal-dowcell2-color, var(--text-faint)); padding: var(--syn-cal-dowcell2-padding, 5px 8px); }
/* A10: weeks separated by the STRONGER hairline (border-default); day cells by border-row. */
.syn-cal-weeks { border: var(--syn-cal-weeks-border, 1px solid var(--border-default)); border-top: none; border-radius: var(--syn-cal-weeks-border-radius, 0 0 var(--shape-radius-control) var(--shape-radius-control)); overflow: hidden; }
.syn-cal-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.syn-cal-week:not(:first-child) { border-top: var(--syn-cal-week-not-first-child-border-top, 1px solid var(--border-default)); }
/* A11–A13: 88px day cells that GROW to the busiest day; hovered in-month cells wash bg-hover. */
.syn-cal-cell2 { position: relative; padding: var(--syn-cal-cell2-padding, 4px 6px); background: transparent; min-height: var(--syn-cal-cell2-min-height, 88px); display: flex; flex-direction: column; }
.syn-cal-cell2:not(:first-child) { border-left: var(--syn-cal-cell2-not-first-child-border-left, 1px solid var(--border-hairline)); }
.syn-cal-cell2.is-out { background: var(--syn-cal-cell2-is-out-background, var(--bg-secondary)); }
.syn-cal-cell2:not(.is-out):hover { background: var(--syn-cal-cell2-not-is-out-hover-background, var(--surface-hover)); }
.syn-cal-dayhead { display: flex; align-items: center; justify-content: space-between; }
.syn-cal-daynum2 { font-size: var(--syn-cal-daynum2-font-size, 0.71875rem); font-weight: var(--syn-cal-daynum2-font-weight, var(--font-medium)); font-variant-numeric: var(--syn-cal-daynum2-font-variant-numeric, tabular-nums); color: var(--syn-cal-daynum2-color, var(--text-muted)); }
.syn-cal-cell2.is-out .syn-cal-daynum2 { color: var(--syn-cal-cell2-is-out-cal-daynum2-color, var(--text-faint)); }
/* A12: today = the ONE accent day number — a 20×20 round pill. */
.syn-cal-daynum2.is-today { display: inline-flex; align-items: center; justify-content: center; width: var(--syn-cal-daynum2-is-today-width, 20px); height: var(--syn-cal-daynum2-is-today-height, 20px); line-height: var(--syn-cal-daynum2-is-today-line-height, 20px); border-radius: var(--syn-cal-daynum2-is-today-border-radius, var(--shape-radius-pill)); background: var(--syn-cal-daynum2-is-today-background, var(--accent-action)); color: var(--syn-cal-daynum2-is-today-color, var(--text-on-accent)); font-weight: var(--syn-cal-daynum2-is-today-font-weight, 700); }
/* A13 / Q173 (scoping (d)): the per-day "+" — 20×20 top-4/right-5, bg-tertiary plane, accent
   glyph, radius 5; appears on cell hover and deep-opens the Other-date creator prefilled. */
.syn-cal-dayadd { display: none; position: absolute; top: var(--syn-cal-dayadd-top, 4px); right: var(--syn-cal-dayadd-right, 5px); width: var(--syn-cal-dayadd-width, 20px); height: var(--syn-cal-dayadd-height, 20px); align-items: center; justify-content: center; background: var(--syn-cal-dayadd-background, var(--surface-inset)); color: var(--syn-cal-dayadd-color, var(--accent-action)); border: none; border-radius: var(--syn-cal-dayadd-border-radius, var(--radius-xs-plus)); font-family: inherit; font-size: var(--syn-cal-dayadd-font-size, 0.8125rem); font-weight: var(--syn-cal-dayadd-font-weight, 600); cursor: pointer; z-index: 1; }
.syn-cal-cell2:not(.is-out):hover .syn-cal-dayadd { display: inline-flex; }
/* A20 (Q172/Q163, comp 8a): multi-day span bars — 19px lanes at 24 + lane×22, SOLID event color
   with theme bar-text (white on the deepened light palette, ink on the bright dark palette — the
   AA pass owns both); spans TRUNCATE (only chips wrap); deep-open the Pursuit Schedule. */
.syn-cal-bar { position: absolute; display: block; box-sizing: border-box; padding: var(--syn-cal-bar-padding, 0 6px); background: var(--syn-cal-bar-background, var(--bar-color)); border: none; border-radius: var(--syn-cal-bar-border-radius, var(--radius-xs)); color: var(--syn-cal-bar-color, var(--event-bar-text)); font-family: inherit; font-size: var(--syn-cal-bar-font-size, 0.625rem); font-weight: var(--syn-cal-bar-font-weight, 600); line-height: var(--syn-cal-bar-line-height, 19px); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.syn-cal-bar.is-ooo { cursor: default; }
.syn-cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.syn-cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Reserve height when the uncapped lane stack outgrows the 88px cell minimum (grow-to-busiest). */
.syn-cal-reserve { grid-column: 1 / -1; }
/* A14–A17 (ruling 20, comp 8a): single-day CHIP STACKS — quiet plane, 3px type tick -> mono 24h
   time (only when set) -> ink label that WRAPS; chips deep-open the Pursuit Schedule. */
.syn-cal-chipstack { display: flex; flex-direction: column; gap: var(--syn-cal-chipstack-gap, 2px); margin-top: var(--syn-cal-chipstack-margin-top, 2px); align-self: stretch; }
.syn-cal-chip { display: flex; align-items: flex-start; gap: var(--syn-cal-chip-gap, 4px); background: var(--syn-cal-chip-background, var(--bg-secondary)); border: none; border-radius: var(--syn-cal-chip-border-radius, var(--radius-xs)); padding: var(--syn-cal-chip-padding, 2px 4px); text-align: left; width: 100%; font-family: inherit; cursor: pointer; }
.syn-cal-chip.is-ooo { cursor: default; }
.syn-cal-chiptick { width: var(--syn-cal-chiptick-width, 3px); height: var(--syn-cal-chiptick-height, 11px); border-radius: var(--syn-cal-chiptick-border-radius, var(--radius-2xs)); flex: none; }
.syn-cal-chiptime { font-family: var(--syn-cal-chiptime-font-family, var(--type-family-mono)); font-size: var(--syn-cal-chiptime-font-size, 0.59375rem); font-weight: var(--syn-cal-chiptime-font-weight, 400); color: var(--syn-cal-chiptime-color, var(--text-tertiary)); flex: none; }
.syn-cal-chiplabel { font-size: var(--syn-cal-chiplabel-font-size, 0.65625rem); line-height: var(--syn-cal-chiplabel-line-height, 1.35); font-weight: var(--syn-cal-chiplabel-font-weight, 500); color: var(--syn-cal-chiplabel-color, var(--text-ink)); min-width: 0; }
.syn-cal-morebtn { background: none; border: none; padding: var(--syn-cal-morebtn-padding, 2px 4px); text-align: left; font-family: inherit; font-size: var(--syn-cal-morebtn-font-size, 0.65625rem); font-weight: var(--syn-cal-morebtn-font-weight, 600); color: var(--syn-cal-morebtn-color, var(--accent-action)); cursor: pointer; }
/* A18/A19: the DAY POPOVER — canonical card; row order time (34px mono col) -> FULL-HEIGHT tick
   -> label (deliberately NOT the chip order); hidden-by-cap rows highlighted bg-hover. */
.syn-cal-daypop { position: absolute; top: var(--syn-cal-daypop-top, 22px); left: var(--syn-cal-daypop-left, 2px); z-index: 40; width: var(--syn-cal-daypop-width, 300px); max-width: var(--syn-cal-daypop-max-width, 70vw); background: var(--syn-cal-daypop-background, var(--surface-plane)); border: var(--syn-cal-daypop-border, 1px solid var(--border-default)); border-radius: var(--syn-cal-daypop-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-cal-daypop-box-shadow, var(--shadow-dropdown)); overflow: hidden; cursor: default; }
.syn-cal-cell2:nth-child(6) .syn-cal-daypop, .syn-cal-cell2:nth-child(7) .syn-cal-daypop { left: auto; right: var(--syn-cal-cell2-nth-child-6-cal-daypop-right, 2px); }
.syn-cal-daypop-head { padding: var(--syn-cal-daypop-head-padding, 10px 14px 8px); border-bottom: var(--syn-cal-daypop-head-border-bottom, 1px solid var(--border-hairline)); display: flex; justify-content: space-between; align-items: baseline; }
.syn-cal-daypop-title { font-size: var(--syn-cal-daypop-title-font-size, 0.78125rem); font-weight: var(--syn-cal-daypop-title-font-weight, 600); color: var(--syn-cal-daypop-title-color, var(--text-ink)); }
.syn-cal-daypop-count { font-size: var(--syn-cal-daypop-count-font-size, 0.71875rem); font-weight: var(--syn-cal-daypop-count-font-weight, 400); color: var(--syn-cal-daypop-count-color, var(--text-faint)); }
.syn-cal-daypop-rows { padding: var(--syn-cal-daypop-rows-padding, 6px 8px 8px); max-height: var(--syn-cal-daypop-rows-max-height, 300px); overflow-y: auto; }
.syn-cal-daypop-row { display: flex; gap: var(--syn-cal-daypop-row-gap, 8px); padding: var(--syn-cal-daypop-row-padding, 5px 6px); border-radius: var(--syn-cal-daypop-row-border-radius, var(--radius-sm)); align-items: flex-start; }
.syn-cal-daypop-row.is-hidden-chip { background: var(--syn-cal-daypop-row-is-hidden-chip-background, var(--surface-hover)); }
.syn-cal-daypop-time { font-family: var(--syn-cal-daypop-time-font-family, var(--type-family-mono)); font-size: var(--syn-cal-daypop-time-font-size, 0.625rem); font-weight: var(--syn-cal-daypop-time-font-weight, 400); color: var(--syn-cal-daypop-time-color, var(--text-tertiary)); width: var(--syn-cal-daypop-time-width, 34px); flex: none; padding-top: var(--syn-cal-daypop-time-padding-top, 1px); }
.syn-cal-daypop-tick { width: var(--syn-cal-daypop-tick-width, 3px); border-radius: var(--syn-cal-daypop-tick-border-radius, var(--radius-2xs)); flex: none; align-self: stretch; }
.syn-cal-daypop-label { font-size: var(--syn-cal-daypop-label-font-size, 0.75rem); line-height: var(--syn-cal-daypop-label-line-height, 1.4); font-weight: var(--syn-cal-daypop-label-font-weight, 500); color: var(--syn-cal-daypop-label-color, var(--text-ink)); min-width: 0; }
.syn-cal-popaway { position: fixed; inset: 0; z-index: 35; background: transparent; border: none; }
/* Q271 drag-redate (CD-9): our own dates drag to a new day; the hovered cell answers with an inset
   ring; core (Deadline-type) chips keep the plain pointer — the 15-2 lock cue rides the title. */
.syn-cal-chip.is-draggable, .syn-cal-bar.is-draggable { cursor: grab; }
.syn-cal-chip.is-draggable:active, .syn-cal-bar.is-draggable:active { cursor: grabbing; }
.syn-cal-cell2.is-droptarget { box-shadow: var(--focus-inset-ring); border-radius: var(--syn-cal-cell2-is-droptarget-border-radius, var(--radius-xs)); }
.syn-cal-dragerror { margin: var(--syn-cal-dragerror-margin, 0 0 8px); padding: var(--syn-cal-dragerror-padding, 6px 10px); border: var(--syn-cal-dragerror-border, 1px solid color-mix(in srgb, var(--state-attention) 40%, transparent)); background: var(--syn-cal-dragerror-background, var(--severity-error-tint)); border-radius: var(--syn-cal-dragerror-border-radius, var(--radius-sm)); font-size: var(--syn-cal-dragerror-font-size, 0.71875rem); color: var(--syn-cal-dragerror-color, var(--state-attention)); }

/* Snapshot viewer (the .syn-dossier-* block that lived here was removed with the Opportunity dossier —
   2026-07-08 owner ruling, SHELL-IDENT-REDESIGN; .syn-conf/.syn-def survive as SnapshotViewer's). */
.syn-conf { font-size: var(--syn-conf-font-size, var(--text-xs)); text-transform: var(--syn-conf-text-transform, capitalize); padding: var(--syn-conf-padding, 0 8px); border-radius: var(--syn-conf-border-radius, var(--shape-radius-pill)); border: var(--syn-conf-border, 1px solid var(--border-default)); color: var(--syn-conf-color, var(--text-tertiary)); }
.syn-conf-known { color: var(--syn-conf-known-color, var(--state-success)); border-color: var(--syn-conf-known-border-color, color-mix(in srgb, var(--state-success) 35%, transparent)); }
.syn-conf-estimated { color: var(--syn-conf-estimated-color, var(--state-warning)); border-color: var(--syn-conf-estimated-border-color, color-mix(in srgb, var(--state-warning) 35%, transparent)); }
.syn-conf-unknown { color: var(--syn-conf-unknown-color, var(--text-tertiary)); }
.syn-def { display: grid; grid-template-columns: var(--syn-def-grid-template-columns, repeat(auto-fit, minmax(220px, 1fr))); gap: var(--syn-def-gap, var(--space-1) var(--space-4)); }
.syn-def-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--syn-def-row-gap, var(--space-3)); padding: var(--syn-def-row-padding, var(--space-1) 0); border-bottom: var(--syn-def-row-border-bottom, 1px solid var(--border-default)); min-width: 0; }
.syn-def-label { font-size: var(--syn-def-label-font-size, var(--text-xs)); color: var(--syn-def-label-color, var(--text-muted)); white-space: nowrap; }
.syn-def-val { font-size: var(--syn-def-val-font-size, var(--text-sm)); color: var(--syn-def-val-color, var(--text-ink)); text-align: right; min-width: 0; }
.syn-snap-meta { display: flex; flex-direction: column; gap: var(--syn-snap-meta-gap, 2px); }
.syn-snap-title { font: var(--syn-snap-title-font, var(--type-t2)); line-height: inherit; }   /* UD24: T2 plate-title (700 16; was 600) */

/* ============================================================================
   Capture cockpit (CAPTURE.md) — Slice 2: the one action stream ("membrane").
   ========================================================================== */
/* (the tail of an earlier wave's comment, healed here — Q385) collapsed the cockpit shell (rail full-width, pane below). The lede class lives on. */

/* The activities list + its tab / add header. */

.syn-activities { display: flex; flex-direction: column; }
/* The stream uses the mockup's explicit-margin rhythm (:1042-1063), not a uniform flex-gap: head->list is a
   5px head margin (not 12), the add affordance sits 9px below the list, and the composer carries its own 8px. */
.syn-activities-head { display: flex; align-items: center; gap: var(--syn-activities-head-gap, 10px); margin-bottom: var(--syn-activities-head-margin-bottom, 5px); }
.syn-pillgroup { display: inline-flex; gap: var(--syn-pillgroup-gap, var(--space-1)); }
.syn-pillcount { font-variant-numeric: var(--syn-pillcount-font-variant-numeric, tabular-nums); opacity: var(--syn-pillcount-opacity, 0.7); margin-left: var(--syn-pillcount-margin-left, 4px); }
/* Bottom add-activity wrapper (ACT-2): a plain block so the button sits at its natural width, left-aligned;
   9px below the list per the mockup add button (:1063). */
.syn-add-activity { display: block; margin-top: var(--syn-add-activity-margin-top, 9px); }

/* The activity-stream category chip — a tinted colored pill (mockup ActionRow 936), distinct from the
   bare dot+muted-label .syn-comp-chip used in the risk-register row meta. */

.syn-microlabel { font-size: var(--syn-microlabel-font-size, var(--text-xs)); color: var(--syn-microlabel-color, var(--text-tertiary)); font-weight: var(--syn-microlabel-font-weight, var(--font-medium)); }

/* Resolve modal bits. */
/* Resolve modal body (mockup ActionResolveModal:2919-2925): an uppercase field label over the (read-only) action
   text, then over the outcome editor, with the "outcome required" helper. */
/* Q181 (comp 4a D4/D5): the completion modal's recap plane + Outcome label anatomy. */
.syn-resolve-recap { display: flex; align-items: flex-start; gap: var(--syn-resolve-recap-gap, 10px); background: var(--syn-resolve-recap-background, var(--bg-secondary)); border: var(--syn-resolve-recap-border, 1px solid var(--border-default)); border-radius: var(--syn-resolve-recap-border-radius, var(--shape-radius-control)); padding: var(--syn-resolve-recap-padding, 10px 12px); margin-bottom: var(--syn-resolve-recap-margin-bottom, 14px); }
.syn-resolve-recapcircle { width: var(--syn-resolve-recapcircle-width, 15px); height: var(--syn-resolve-recapcircle-height, 15px); border: var(--syn-resolve-recapcircle-border, 1.5px solid var(--border-emphasis)); border-radius: var(--syn-resolve-recapcircle-border-radius, var(--shape-radius-pill)); flex: none; margin-top: var(--syn-resolve-recapcircle-margin-top, 1px); }
.syn-resolve-recaptitle { font-size: var(--syn-resolve-recaptitle-font-size, 0.8125rem); font-weight: var(--syn-resolve-recaptitle-font-weight, 600); line-height: var(--syn-resolve-recaptitle-line-height, 1.4); color: var(--syn-resolve-recaptitle-color, var(--text-ink)); flex: 1; min-width: 0; }
.syn-resolve-recapdue { font-size: var(--syn-resolve-recapdue-font-size, 0.75rem); font-weight: var(--syn-resolve-recapdue-font-weight, 500); color: var(--syn-resolve-recapdue-color, var(--due-far)); flex: none; }
.syn-resolve-recapdue.is-overdue { font-weight: var(--syn-resolve-recapdue-is-overdue-font-weight, 700); color: var(--syn-resolve-recapdue-is-overdue-color, var(--state-attention-text)); }
.syn-resolve-flabel { font-size: var(--syn-resolve-flabel-font-size, 0.59375rem); font-weight: var(--syn-resolve-flabel-font-weight, var(--font-semibold)); text-transform: var(--syn-resolve-flabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-resolve-flabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-resolve-flabel-color, var(--text-tertiary)); margin: var(--syn-resolve-flabel-margin, 14px 0 7px); }
.syn-resolve-flabel-sub { font-weight: var(--syn-resolve-flabel-sub-font-weight, var(--font-regular)); font-size: var(--syn-resolve-flabel-sub-font-size, 0.65625rem); text-transform: var(--syn-resolve-flabel-sub-text-transform, lowercase); letter-spacing: normal; color: var(--syn-resolve-flabel-sub-color, var(--text-faint)); }
.syn-foot-spacer { flex: 1; }

/* Slice 3 — Opportunity Status Dashboard (mockup StatusDashboard 1139–1245): a header (label + gate-derived
   Capture-stage breadcrumb) over a two-column block — LEFT the dashboard card (report-card strip + workstream
   rows), RIGHT the one activity list scoped by quick-filter. */
.syn-dashboard { min-width: 0; }
.syn-dash-head { display: flex; align-items: center; gap: var(--syn-dash-head-gap, var(--space-3)); margin-bottom: var(--syn-dash-head-margin-bottom, var(--space-3)); flex-wrap: wrap; }
.syn-dash-title { font-size: var(--syn-dash-title-font-size, var(--text-sm)); font-weight: var(--syn-dash-title-font-weight, var(--font-semibold)); letter-spacing: var(--syn-dash-title-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-dash-title-text-transform, var(--type-label-transform)); color: var(--syn-dash-title-color, var(--text-muted)); }
.syn-dash-stage { margin-left: auto; display: inline-flex; align-items: center; gap: var(--syn-dash-stage-gap, 6px); font-size: var(--syn-dash-stage-font-size, 0.71875rem); color: var(--syn-dash-stage-color, var(--text-tertiary)); }
.syn-dash-stage .syn-icon { color: var(--syn-dash-stage-icon-color, var(--border-strong)); }
.syn-dash-stage-step { color: var(--syn-dash-stage-step-color, var(--text-tertiary)); }
.syn-dash-stage-step.is-current { font-weight: var(--syn-dash-stage-step-is-current-font-weight, var(--font-bold)); color: var(--syn-dash-stage-step-is-current-color, var(--category-3)); }

.syn-dash-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--syn-dash-grid-gap, 18px); align-items: start; }
@media (max-width: 880px) { .syn-dash-grid { grid-template-columns: 1fr; } }
.syn-dash-card { border: var(--syn-dash-card-border, 1px solid var(--border-default)); border-radius: var(--syn-dash-card-border-radius, var(--shape-radius-plane)); background: var(--syn-dash-card-background, var(--surface-plane)); overflow: hidden; min-width: 0; }

.syn-reportcard { display: flex; border-bottom: var(--syn-reportcard-border-bottom, 1px solid var(--border-default)); border-left: var(--syn-reportcard-border-left, 3px solid transparent); background: var(--syn-reportcard-background, var(--bg-secondary)); }
.syn-rc-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-rc-cell-gap, 4px); padding: var(--syn-rc-cell-padding, 10px 13px); border: none; border-bottom: var(--syn-rc-cell-border-bottom, 2px solid transparent); background: transparent; text-align: left; cursor: pointer; }
.syn-rc-cell + .syn-rc-cell { border-left: var(--syn-rc-cell-rc-cell-border-left, 1px solid var(--border-default)); }
.syn-rc-cell:hover { background: var(--syn-rc-cell-hover-background, var(--surface-hover)); }
.syn-rc-cell.is-focused { border-bottom-color: var(--syn-rc-cell-is-focused-border-bottom-color, var(--accent-action)); }
.syn-rc-name { font-size: var(--syn-rc-name-font-size, 0.71875rem); font-weight: var(--syn-rc-name-font-weight, var(--font-semibold)); color: var(--syn-rc-name-color, var(--text-tertiary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-rc-status { display: inline-flex; align-items: center; gap: var(--syn-rc-status-gap, 5px); font-size: var(--syn-rc-status-font-size, 0.78125rem); font-weight: var(--syn-rc-status-font-weight, var(--font-semibold)); color: var(--lvl, var(--text-muted)); }
.syn-rc-dot { width: var(--syn-rc-dot-width, 7px); height: var(--syn-rc-dot-height, 7px); border-radius: var(--syn-rc-dot-border-radius, var(--shape-radius-pill)); background: var(--lvl, var(--text-tertiary)); flex-shrink: 0; }

.syn-workstreams { display: flex; flex-direction: column; }
.syn-ws-row { border-bottom: var(--syn-ws-row-border-bottom, 1px solid var(--border-default)); border-left: var(--syn-ws-row-border-left, 3px solid transparent); }
.syn-ws-row:last-child { border-bottom: none; }
.syn-ws-row.is-active { border-left-color: var(--syn-ws-row-is-active-border-left-color, var(--accent-action)); }
.syn-ws-top { padding: var(--syn-ws-top-padding, 12px 15px); }
.syn-ws-head { display: flex; align-items: center; gap: var(--syn-ws-head-gap, var(--space-3)); }
.syn-ws-headmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--syn-ws-headmain-gap, 11px); cursor: pointer; }
.syn-ws-headmain > .syn-icon { color: var(--syn-ws-headmain-icon-color, var(--text-tertiary)); flex-shrink: 0; }
.syn-ws-tile { width: var(--syn-ws-tile-width, 28px); height: var(--syn-ws-tile-height, 28px); border-radius: var(--syn-ws-tile-border-radius, var(--radius-nav)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--syn-ws-tile-background, color-mix(in srgb, var(--comp) 14%, var(--surface-plane))); color: var(--syn-ws-tile-color, var(--comp)); }
.syn-ws-main { flex: 1; min-width: 0; }
.syn-ws-name { font-size: var(--syn-ws-name-font-size, var(--text-sm)); font-weight: var(--syn-ws-name-font-weight, var(--font-semibold)); }
.syn-ws-goal { font-size: var(--syn-ws-goal-font-size, var(--text-xs)); color: var(--syn-ws-goal-color, var(--text-tertiary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--syn-ws-goal-margin-top, 1px); }
.syn-ws-openchip { flex-shrink: 0; padding: var(--syn-ws-openchip-padding, 2px 7px); border-radius: var(--syn-ws-openchip-border-radius, var(--shape-radius-pill)); border: var(--syn-ws-openchip-border, 1px solid var(--border-default)); background: var(--syn-ws-openchip-background, var(--surface-plane)); font-size: var(--syn-ws-openchip-font-size, 0.71875rem); color: var(--syn-ws-openchip-color, var(--text-muted)); cursor: pointer; }
.syn-ws-openchip:hover { border-color: var(--syn-ws-openchip-hover-border-color, var(--border-emphasis)); color: var(--syn-ws-openchip-hover-color, var(--text-ink)); }
.syn-ws-body { padding: var(--syn-ws-body-padding, 4px 15px 16px 39px); display: flex; flex-direction: column; gap: var(--syn-ws-body-gap, var(--space-1)); }
.syn-ws-narrative { display: flex; flex-direction: column; gap: var(--syn-ws-narrative-gap, var(--space-3)); }
.syn-ws-editactions { display: flex; justify-content: flex-end; gap: var(--syn-ws-editactions-gap, var(--space-2)); }

.syn-dash-activity { min-width: 0; }
.syn-dash-activity-head { display: flex; align-items: center; gap: var(--syn-dash-activity-head-gap, var(--space-2)); margin-bottom: var(--syn-dash-activity-head-margin-bottom, 9px); flex-wrap: wrap; }
.syn-dash-activity-head > .syn-icon { color: var(--syn-dash-activity-head-icon-color, var(--text-muted)); }
.syn-dash-activity-title { font-size: var(--syn-dash-activity-title-font-size, var(--text-sm)); font-weight: var(--syn-dash-activity-title-font-weight, var(--font-semibold)); letter-spacing: var(--syn-dash-activity-title-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-dash-activity-title-text-transform, var(--type-label-transform)); color: var(--syn-dash-activity-title-color, var(--text-muted)); }
.syn-dash-chips { display: flex; gap: var(--syn-dash-chips-gap, 6px); margin-bottom: var(--syn-dash-chips-margin-bottom, var(--space-3)); flex-wrap: wrap; }
.syn-dash-chip { display: inline-flex; align-items: center; gap: var(--syn-dash-chip-gap, 5px); padding: var(--syn-dash-chip-padding, 3px 11px); border-radius: var(--syn-dash-chip-border-radius, var(--shape-radius-pill)); border: var(--syn-dash-chip-border, 1px solid var(--border-default)); background: var(--syn-dash-chip-background, var(--surface-plane)); color: var(--syn-dash-chip-color, var(--text-muted)); font-size: var(--syn-dash-chip-font-size, 0.71875rem); font-weight: var(--syn-dash-chip-font-weight, var(--font-semibold)); cursor: pointer; }
.syn-dash-chip.is-active { border-color: var(--syn-dash-chip-is-active-border-color, var(--accent-action)); background: var(--syn-dash-chip-is-active-background, var(--accent-action)); color: var(--syn-dash-chip-is-active-color, var(--text-on-accent)); }
.syn-dash-chip-comp.is-active { border-color: var(--syn-dash-chip-comp-is-active-border-color, var(--comp)); background: var(--syn-dash-chip-comp-is-active-background, color-mix(in srgb, var(--comp) 14%, var(--surface-plane))); color: var(--syn-dash-chip-comp-is-active-color, var(--comp)); }
.syn-dash-activity-card { border: var(--syn-dash-activity-card-border, 1px solid var(--border-default)); border-radius: var(--syn-dash-activity-card-border-radius, var(--shape-radius-plane)); background: var(--syn-dash-activity-card-background, var(--surface-plane)); padding: var(--syn-dash-activity-card-padding, 14px 16px); }

/* Relevant intelligence — the third home section (mockup CaptureTab 3186–3190 / IntelFeed 809–826): an inert Jane
   feed of Findings ranked to this TOPR. Header chrome + honest empty state; the rows land with the runtime. */

/* Slice 4 — the pWin pillar (scoreboard tile) and the scorecard surface. */
/* Capture status-header scoreboards (mockup PwinScoreboard/GateScoreboard/RiskScoreboard 591–694): three
   equal cards, each a labeled body + an explicit doorway button (the whole tile is no longer the button). */
.syn-scoreboards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--syn-scoreboards-gap, var(--space-4)); align-items: stretch; }
@media (max-width: 980px) { .syn-scoreboards { grid-template-columns: 1fr; } }
   
/* ── pWin Scorecard (mockup Scorecard): a single centered column — Back-to-Capture link, dashboard band,
   needs-attention, visible arithmetic, factor groups, lock note. The register + gate surfaces still borrow
   .syn-pf-ptw*, .syn-pf-jane, and .syn-jane-sparkle (kept lower in this section). */

/* dashboard band: deterministic headline + ceiling bar | posture heatmap */
.syn-band { border: var(--syn-band-border, 1px solid var(--border-default)); border-radius: var(--syn-band-border-radius, var(--shape-radius-sheet)); background: var(--syn-band-background, var(--surface-plane)); padding: var(--syn-band-padding, 20px); margin-bottom: var(--syn-band-margin-bottom, var(--space-3)); }
@media (max-width: 820px) { .syn-band-grid { grid-template-columns: 1fr; } }

/* posture heatmap: one row per component + 0/1/2/3 legend */

/* factor groups + collapsible factor rows */

/* Path-to-Win edit head (label + Edit/Save) */

/* inert Jane recommendation slot on a factor card — namespaced apart from the Jane panel */

/* Shared by the register + gate surfaces (Batch D): the standalone Path-to-Win block and the inert Jane
.syn-pf-jane { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-secondary); font-size: var(--text-xs); color: var(--text-tertiary); }
.syn-jane-sparkle { color: var(--accent-action); opacity: 0.5; }
.syn-pf-jane-empty { font-style: italic; }

/* Slice 5 (Batch C re-port) — the three gate reviews as a read-only timeline over a stacked accordion of all
   gates (mockup GateReview). Timeline = orientation only; each gate is a self-contained collapsible panel with
   its checklist grouped by the five components, a decision record (active) and a recorded-decision read-out
   (passed). (The status-header scoreboards live in the .syn-scoreboard block above.) */

.syn-backlink { display: inline-flex; align-items: center; gap: var(--syn-backlink-gap, 5px); align-self: flex-start; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; font-size: var(--syn-backlink-font-size, 0.78125rem); color: var(--syn-backlink-color, var(--text-tertiary)); }
.syn-backlink:hover { color: var(--syn-backlink-hover-color, var(--text-muted)); }

/* Timeline strip */
.syn-gtl { border: var(--syn-gtl-border, 1px solid var(--border-default)); border-radius: var(--syn-gtl-border-radius, var(--shape-radius-sheet)); background: var(--syn-gtl-background, var(--surface-plane)); padding: var(--syn-gtl-padding, 18px); }
.syn-gtl-head { display: flex; align-items: center; gap: var(--syn-gtl-head-gap, var(--space-2)); margin-bottom: var(--syn-gtl-head-margin-bottom, var(--space-4)); }
.syn-gtl-title { font-size: var(--syn-gtl-title-font-size, 0.875rem); font-weight: var(--syn-gtl-title-font-weight, var(--font-semibold)); color: var(--syn-gtl-title-color, var(--text-ink)); }
.syn-gtl-sub { font-size: var(--syn-gtl-sub-font-size, 0.71875rem); color: var(--syn-gtl-sub-color, var(--text-tertiary)); }
.syn-gtl-row { display: flex; align-items: stretch; gap: 0; }
.syn-gtl-tile { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--syn-gtl-tile-gap, 5px); }
.syn-gtl-gate { font-size: var(--syn-gtl-gate-font-size, 0.84375rem); font-weight: var(--syn-gtl-gate-font-weight, 700); color: var(--syn-gtl-gate-color, var(--text-ink)); }
.syn-gtl-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--syn-gtl-badge-width, 38px); height: var(--syn-gtl-badge-height, 38px); border-radius: var(--syn-gtl-badge-border-radius, var(--shape-radius-plane)); font-size: var(--syn-gtl-badge-font-size, 0.71875rem); font-weight: var(--syn-gtl-badge-font-weight, 700); background: var(--syn-gtl-badge-background, color-mix(in srgb, var(--c) 14%, var(--surface-plane))); color: var(--syn-gtl-badge-color, var(--c)); }
.syn-gtl-name { font-size: var(--syn-gtl-name-font-size, 0.71875rem); color: var(--syn-gtl-name-color, var(--text-tertiary)); min-height: var(--syn-gtl-name-min-height, 26px); display: flex; align-items: center; justify-content: center; }
.syn-gtl-ready { font-size: var(--syn-gtl-ready-font-size, 0.71875rem); color: var(--syn-gtl-ready-color, var(--text-tertiary)); font-variant-numeric: var(--syn-gtl-ready-font-variant-numeric, tabular-nums); }
.syn-gtl-conn { flex-shrink: 0; align-self: flex-start; margin-top: var(--syn-gtl-conn-margin-top, 28px); color: var(--syn-gtl-conn-color, var(--border-strong)); }

/* GT-4 — the scroll-activated gate context bar (mockup :4390–4411): invisible at rest, sticky once the
   sentinel leaves the viewport. Height/opacity animate on the stuck flip. */

/* custom-item composer */

/* Slice 6 — the registers (CAPTURE.md §9): the shared shell + the Risk / Capability / Call Plan workbenches. */

/* RG-1/2/4 — the shared register header (mockup :2358): back link (.syn-backlink ·1654) + component icon tile
   (--c set inline) + title + live count-subtitle + a "Rated N — scorecard ↗" jump. The activities card at the
   foot is the component's slice of the one action stream, rendered bare. */
/* F-DELIV-1 — the always-visible Deliverables artifact links in the workstream-row header (§4). */
.syn-ws-deliverables { display: flex; align-items: center; gap: var(--syn-ws-deliverables-gap, var(--space-2)); margin-top: var(--syn-ws-deliverables-margin-top, 10px); padding-left: var(--syn-ws-deliverables-padding-left, 39px); flex-wrap: wrap; }
.syn-ws-deliv-label { font-size: var(--syn-ws-deliv-label-font-size, 0.625rem); font-weight: var(--syn-ws-deliv-label-font-weight, var(--font-bold)); letter-spacing: var(--syn-ws-deliv-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-ws-deliv-label-text-transform, var(--type-label-transform)); color: var(--syn-ws-deliv-label-color, var(--text-tertiary)); }

/* CAP-2 — Jane's accent-bordered current-state read card (mockup :2529): the inert analysis on top, a "Re-run
   analysis" affordance, then the live "Your context for Jane" NotesField below an accent divider. A SOLID accent
   border + a faint accent tint mark this OUTPUT card apart from the dashed "Jane can suggest" proposal affordance.
   Theme-safe — the tint is color-mixed over --surface, not the mockup's literal white. */

/* CAP-3 — the gap-list card, a bordered sibling to the Jane read + the shell's activities card. */

/* RG-8 — the gap sub-header (Open Teaming ↗ + Add capability) and the coverage-grouped gap list. Colors are the
   mockup COVERAGE_META pairs (uncovered->warning · partner->accent · internal->success), shared by the group count
   pill, each card's coverage badge, and its icon tile. */
.syn-cap-ico { width: var(--syn-cap-ico-width, 22px); height: var(--syn-cap-ico-height, 22px); border-radius: var(--syn-cap-ico-border-radius, var(--radius-sm)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-cap-badge { padding: var(--syn-cap-badge-padding, 1px 8px); border-radius: var(--syn-cap-badge-border-radius, var(--shape-radius-pill)); font-size: var(--syn-cap-badge-font-size, 0.625rem); font-weight: var(--syn-cap-badge-font-weight, 700); text-transform: var(--syn-cap-badge-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-cap-badge-letter-spacing, var(--type-label-tracking)); }

/* Coverage segmented control (mockup CapabilityEditor:2437) — active button borrows its coverage color via .syn-cnt-*. */
.syn-cap-covseg-btn { display: inline-flex; align-items: center; gap: var(--syn-cap-covseg-btn-gap, 5px); padding: var(--syn-cap-covseg-btn-padding, 6px 12px); border: none; background: var(--syn-cap-covseg-btn-background, var(--surface-plane)); color: var(--syn-cap-covseg-btn-color, var(--text-muted)); font-size: var(--syn-cap-covseg-btn-font-size, 0.75rem); font-weight: var(--syn-cap-covseg-btn-font-weight, var(--font-medium)); font-family: inherit; cursor: pointer; }
.syn-cap-covseg-btn + .syn-cap-covseg-btn { border-left: var(--syn-cap-covseg-btn-cap-covseg-btn-border-left, 1px solid var(--border-default)); }
.syn-cap-covseg-btn.is-active { font-weight: var(--syn-cap-covseg-btn-is-active-font-weight, 700); }
/* Active segment wears its coverage tint (mockup :2440 m.bg/m.color). The 3-class selectors outrank the
   base .syn-cap-covseg-btn's surface bg + secondary color (which, being later in the file at equal 1-class
   specificity, would otherwise swallow the .syn-cnt-* tint and leave the selection looking unselected). */

/* Provider-firm toggle-chips — partner coverage only (mockup :2445). */
.syn-cap-prov-chip { display: inline-flex; align-items: center; gap: var(--syn-cap-prov-chip-gap, 5px); padding: var(--syn-cap-prov-chip-padding, 4px 11px); border-radius: var(--syn-cap-prov-chip-border-radius, var(--shape-radius-pill)); border: var(--syn-cap-prov-chip-border, 1px solid var(--border-default)); background: var(--syn-cap-prov-chip-background, var(--surface-plane)); color: var(--syn-cap-prov-chip-color, var(--text-muted)); font-size: var(--syn-cap-prov-chip-font-size, 0.75rem); font-weight: var(--syn-cap-prov-chip-font-weight, var(--font-medium)); font-family: inherit; cursor: pointer; }
.syn-cap-prov-chip.is-on { border-color: var(--syn-cap-prov-chip-is-on-border-color, var(--accent-action)); background: var(--syn-cap-prov-chip-is-on-background, var(--accent-muted)); color: var(--syn-cap-prov-chip-is-on-color, var(--accent-action-active)); font-weight: var(--syn-cap-prov-chip-is-on-font-weight, var(--font-semibold)); }

/* Compact capability row (mockup CapabilityRow:2461) — icon · title + badge · description · mapping · evidence. */
.syn-cap-row { display: flex; gap: var(--syn-cap-row-gap, 11px); align-items: flex-start; padding: var(--syn-cap-row-padding, 12px 0); border-bottom: var(--syn-cap-row-border-bottom, 1px solid var(--border-default)); }
.syn-cap-row.is-last { border-bottom: none; }
.syn-cap-row > .syn-cap-ico { margin-top: var(--syn-cap-row-cap-ico-margin-top, 1px); }
/* CAP-5 — the row's pencil-edit icon button (mockup iconBtn :2486), sibling to the inline-delete trash. */

/* F-CALL-1 — the composer's Person row: name inputs + the customer-directory pick-to-fill. */

/* RG — the one bordered list card (mockup :1449 / :1751): an icon+title+sub header over divider-separated,
   collapse-to-expand rows, with the composer at the foot. Replaces the old N-gapped-cards register body. */

/* The hoisted register lede (mockup CallPlanRegister:1744) — sits directly under the shell header, capped for a
   comfortable reading width. The shell's flex-column gap spaces it from the first card, so no bottom margin. */

/* Collapse-to-expand risk row (mockup RiskRow:1265) — the summary head toggles; the open body is the
   live-inline editors (LevelPickers + segmented status commit on click; the mitigation NotesField on Save). */
.syn-riskrow-status { font-size: var(--syn-riskrow-status-font-size, 0.71875rem); font-weight: var(--syn-riskrow-status-font-weight, var(--font-semibold)); }

/* Register READ-mode micro-labels are uppercase, matching the mockup `lbl` const (Role/Timing/Call goal … all
   textTransform:uppercase) and the NotesField label — so the open row never mixes caps and sentence case. Scoped
   to the read-mode label containers only: the inline editors keep the canonical <Field> sentence-case grain, so
   the composer stays internally consistent and the app-wide .syn-microlabel is untouched. */
/* Owner-directed (2026-07-05): cockpit composer .syn-microlabel consumers wear the uppercase lbl
   grain. The 2026-07-31 sweep ([REBUILD-P2-14]) moved the LabeledValue/.syn-field-label entries (and
   the hint reset) to the base rules — only the microlabel scopes remain here. */ /* Inline segmented status buttons (mockup RiskRow:1296) — the selected button is tinted with its status color. */ .syn-activities-head .syn-microlabel,

.syn-statusseg { display: flex; gap: var(--syn-activities-head-microlabel-gap, 4px); flex-wrap: wrap; }
.syn-statusseg-btn { padding: var(--syn-statusseg-btn-padding, 5px 10px); border-radius: var(--syn-statusseg-btn-border-radius, var(--radius-nav)); border: var(--syn-statusseg-btn-border, 1px solid var(--border-default)); background: var(--syn-statusseg-btn-background, var(--surface-plane)); color: var(--syn-statusseg-btn-color, var(--text-tertiary)); font-size: var(--syn-statusseg-btn-font-size, 0.71875rem); font-weight: var(--syn-statusseg-btn-font-weight, var(--font-medium)); cursor: pointer; font-family: inherit; }
.syn-statusseg-btn:not(:disabled):hover { border-color: var(--syn-statusseg-btn-not-disabled-hover-border-color, var(--border-emphasis)); }
/* Neutral-dark selected segment (mockup Mandatory/Preferred :3185 — background var(--text-ink), inverted
   text). Status segments (RiskRow/ContactRow) override background+color inline via SelStyle, so their
   value-colored selection still wins over this base. */
.syn-statusseg-btn.is-sel { background: var(--syn-statusseg-btn-is-sel-background, var(--text-ink)); border-color: var(--syn-statusseg-btn-is-sel-border-color, var(--text-ink)); color: var(--syn-statusseg-btn-is-sel-color, var(--surface-plane)); font-weight: var(--syn-statusseg-btn-is-sel-font-weight, var(--font-semibold)); }

/* Collapse-to-expand contact row (mockup ContactRow:1630) — sibling to .syn-riskrow, reusing its head / body /
   grid / actions grain. The head name+title line and role·org sub-line; the collapsed status pill; the open
   read-mode meta row (label-over-value fields) and the stacked goal/strategy text column. */

/* Shared inert "Jane can propose …" register card (mockup JaneProposed*:1365 / 1533 / 2178). */

/* ── Slice 7 · Teaming + Price-to-Win registers (CAPTURE.md §9.2 / §9.4) ─────────────────────────── */
/* Competition is a thin static reference line, never a workbench. */

/* Each candidate is a two-column card: live firm details left, Jane's (inert) analysis right (§9.2). */
.syn-team-card { display: grid; grid-template-columns: 1fr; gap: var(--syn-team-card-gap, var(--space-3)); padding: var(--syn-team-card-padding, var(--space-3)); border: var(--syn-team-card-border, 1px solid var(--border-default)); border-radius: var(--syn-team-card-border-radius, var(--shape-radius-control)); background: var(--syn-team-card-background, var(--surface-canvas)); }
@media (min-width: 760px) { .syn-team-card { grid-template-columns: 1.5fr 1fr; } }
.syn-team-firm { display: flex; flex-direction: column; gap: var(--syn-team-firm-gap, var(--space-2)); min-width: 0; }
/* Jane's per-firm teaming analysis (mockup JaneFirmAnalysis:2140) — a micro-label header, a dashed-accent box with
   the not-yet-analyzed copy, and a disabled "Run analysis" below. Inert until the runtime; replaces the old
   "Fit score —" slot. */

.syn-team-chips { display: flex; flex-wrap: wrap; gap: var(--syn-team-chips-gap, var(--space-1)); }
.syn-team-chip { font-size: var(--syn-team-chip-font-size, var(--text-xs)); color: var(--syn-team-chip-color, var(--text-muted)); background: var(--syn-team-chip-background, var(--bg-secondary)); border: var(--syn-team-chip-border, 1px solid var(--border-default)); border-radius: var(--syn-team-chip-border-radius, var(--shape-radius-pill)); padding: var(--syn-team-chip-padding, 1px 8px); }
.syn-team-chip-fc { color: var(--syn-team-chip-fc-color, var(--accent-action)); border-color: var(--syn-team-chip-fc-border-color, color-mix(in srgb, var(--accent-action) 35%, transparent)); }
.syn-team-gaps { font-size: var(--syn-team-gaps-font-size, var(--text-xs)); color: var(--syn-team-gaps-color, var(--state-success)); }
.syn-team-controls { display: flex; flex-wrap: wrap; gap: var(--syn-team-controls-gap, var(--space-3)); align-items: flex-end; }
.syn-team-dance { display: flex; align-items: center; gap: var(--syn-team-dance-gap, var(--space-1)); font-size: var(--syn-team-dance-font-size, var(--text-xs)); color: var(--syn-team-dance-color, var(--state-warning)); margin: 0; }

/* Teaming F-TEAM-1/2 — the register strategy note + the expand-to-edit FirmCard (mockup FirmCard:2206). The card
   EXTENDS the manual path: collapsed = a summary row (select · name · live FC/socio · status, + covered-gap pills);
   expanded = the lead's detail panel (rationale, capability-assignment pills, the canonical <Field> rows) beside
   Jane's inert slot. The field rows reuse the canonical .syn-ef 132px-label grain, so .syn-firm-prow (Provides)
   aligns with them. */

/* RG-5 — the live capability-coverage strip inside the strategy card (read from the Solution register). */
/* TEAMING-1: tally + source inherit the head's uppercase + letter-spacing (the JSX puts textTransform:uppercase
   on the outer div, and the inner spans — weight-500 tally, weight-500 source — never override it). */
.syn-team-cov-open { color: var(--syn-team-cov-open-color, var(--state-warning)); font-weight: var(--syn-team-cov-open-font-weight, 700); }
.syn-team-cov-clear { color: var(--syn-team-cov-clear-color, var(--state-success)); font-weight: var(--syn-team-cov-clear-font-weight, 700); }

/* RG-6 — the add-firm composer at the BOTTOM of the candidate list (mockup FirmComposer :2317). */

.syn-firm-selbox { width: var(--syn-firm-selbox-width, 16px); height: var(--syn-firm-selbox-height, 16px); border-radius: var(--syn-firm-selbox-border-radius, var(--radius-xs)); border: var(--syn-firm-selbox-border, 1.5px solid var(--border-strong)); background: var(--syn-firm-selbox-background, var(--surface-plane)); display: inline-flex; align-items: center; justify-content: center; }
.syn-firm-selbox.is-on { border-color: var(--syn-firm-selbox-is-on-border-color, var(--accent-action)); background: var(--syn-firm-selbox-is-on-background, var(--accent-action)); }

.syn-firm-dance { display: inline-flex; align-items: center; gap: var(--syn-firm-dance-gap, 6px); margin: var(--syn-firm-dance-margin, 0 0 14px); padding: var(--syn-firm-dance-padding, 5px 10px); border-radius: var(--syn-firm-dance-border-radius, var(--radius-sm)); background: var(--syn-firm-dance-background, var(--state-warning-tint)); color: var(--syn-firm-dance-color, var(--state-warning)); font-size: var(--syn-firm-dance-font-size, var(--text-xs)); font-weight: var(--syn-firm-dance-font-weight, var(--font-medium)); }
.syn-firm-pill { display: inline-flex; align-items: center; gap: var(--syn-firm-pill-gap, 4px); padding: var(--syn-firm-pill-padding, 2px 9px); border-radius: var(--syn-firm-pill-border-radius, var(--shape-radius-pill)); border: var(--syn-firm-pill-border, 1px solid var(--border-default)); background: var(--syn-firm-pill-background, var(--surface-plane)); color: var(--syn-firm-pill-color, var(--text-muted)); font-size: var(--syn-firm-pill-font-size, 0.71875rem); font-weight: var(--syn-firm-pill-font-weight, 500); cursor: pointer; }
.syn-firm-pill:hover:not(:disabled) { background: var(--syn-firm-pill-hover-not-disabled-background, var(--surface-hover)); }
.syn-firm-pill.is-on { border-color: var(--syn-firm-pill-is-on-border-color, var(--state-success)); background: var(--syn-firm-pill-is-on-background, var(--state-success-tint)); color: var(--syn-firm-pill-is-on-color, var(--state-success)); font-weight: var(--syn-firm-pill-is-on-font-weight, 600); }

/* PRICE-1 — Related Contract Awards is its OWN bordered card (mockup :2765), a sibling of the Jane read inside the
   register's flex column (gap 16) — NOT a divider-separated section inside an outer SectionCard. The Jane read reuses
   the canonical .syn-jane-read card (see §Capability), so the old .syn-pricing-jane* duplicate is gone. */
/* Related Contract Awards empty state — centered, dollar-icon + two lines (mockup :2774). */

/* ── Q61 rebuild additions: the LIVE import renders ──────────────────────────────────────────
   ContractAwardCard (CAPTURE.md §9.4 — the E3/E4 USASpending facts card) and the Teaming
   "Expressed interest" badge + SubmissionModal body (§9.2 — the E9 Jira mirror). */
/* Q187 (ruling 7): the modification disclosure — the count hint becomes the chevron toggle;
   rows are a dense read-only grid (date · PIID · amount · description). */

/* ── Slice 9 · Pursuit Schedule master editor (CAPTURE.md §8; mockup PursuitScheduleModal:4752) ──────── */

/* ── THE PURSUIT CONTROL PANEL (Q378; Relay 35 flagship `topr-control-panel/`, RATIFIED WHOLE, Ken
   2026-08-25). ONE WORK modal (the panel's .syn-tcp-dx chrome), TWO TABS — the Schedule register
   (the single-door law, the stable editor-row anatomy of CANON-DELTA 4) and the Proposal package
   (card anatomy, commit-per-edit) — and THE HOLD SEAT footer-left. ZERO ACCENT inside the panel
   (the Q173 A14 law carried): the attention family marks the DUE row, urgency tones the dates.
   TEXT-SIZE: row labels/values/prose READING; eyebrows, riders, chips, acts CHROME. ────────────── */
/* the tab row = the ruled segmented anatomy (--bg-tertiary track · 3px pad · --seg-active), sticky under the header */
.syn-tcp-tabrow { display: flex; align-items: center; margin-top: var(--syn-tcp-tabrow-margin-top, 10px); padding-bottom: var(--syn-tcp-tabrow-padding-bottom, 10px); border-bottom: var(--syn-tcp-tabrow-border-bottom, 1px solid var(--border-hairline)); }
.syn-tcp-tabs { display: inline-flex; background: var(--syn-tcp-tabs-background, var(--surface-inset)); border-radius: var(--syn-tcp-tabs-border-radius, var(--shape-radius-control)); padding: var(--syn-tcp-tabs-padding, 3px); gap: var(--syn-tcp-tabs-gap, 2px); }
.syn-tcp-tab { appearance: none; border: none; background: transparent; padding: var(--syn-tcp-tab-padding, 4px 14px); border-radius: var(--syn-tcp-tab-border-radius, var(--radius-sm)); font: var(--syn-tcp-tab-font, 500 12px var(--type-family)); color: var(--syn-tcp-tab-color, var(--text-muted)); cursor: pointer; }
.syn-tcp-tab.is-active { font-weight: var(--syn-tcp-tab-is-active-font-weight, 600); color: var(--syn-tcp-tab-is-active-color, var(--text-ink)); background: var(--syn-tcp-tab-is-active-background, var(--segment-active)); box-shadow: var(--syn-tcp-tab-is-active-box-shadow, var(--segment-active-shadow)); }
/* the two panes are BOTH mounted; the hidden one keeps its scroll position (visibility, never display).
   FIX-2: the panes were absolutely positioned (inset: 0) inside a room the 90vh FIXED species sized — a pane that
   sized itself off the room contributes no height once the room is the content's. Now the panes STACK in one grid
   cell (grid-area 1/1): the SHOWN pane is in flow and sizes the room to its content (minmax(0, 1fr) lets the track
   shrink under the cap, where the pane scrolls); the HIDDEN pane keeps its box (visibility) and its scroll offset but
   stands 0 tall so it never sizes the room. */
.syn-tcp-panes { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; }
.syn-tcp-pane { grid-area: 1 / 1; min-height: 0; overflow: auto; padding: var(--syn-tcp-pane-padding, 12px 24px 0); }
.syn-tcp-pane.is-package { padding-bottom: var(--syn-tcp-pane-is-package-padding-bottom, 16px); }
.syn-tcp-pane.is-hidden { visibility: hidden; pointer-events: none; height: 0; }

/* ── the Schedule tab: 21 core rows in three balanced columns ── */
.syn-tcp-sched { display: flex; flex-direction: column; }
.syn-tcp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--syn-tcp-cols-gap, 0 28px); align-items: start; }
.syn-tcp-col { display: flex; flex-direction: column; min-width: 0; }
.syn-tcp-group { display: flex; flex-direction: column; }
.syn-tcp-group + .syn-tcp-group { padding-top: var(--syn-tcp-group-tcp-group-padding-top, 14px); }
.syn-tcp-grouphead { display: flex; align-items: baseline; gap: var(--syn-tcp-grouphead-gap, 6px); padding-bottom: var(--syn-tcp-grouphead-padding-bottom, 6px); border-bottom: var(--syn-tcp-grouphead-border-bottom, 1px solid var(--border-default)); }
.syn-tcp-grouplabel { font: var(--syn-tcp-grouplabel-font, var(--type-c1)); letter-spacing: var(--syn-tcp-grouplabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-tcp-grouplabel-text-transform, var(--type-label-transform)); color: var(--syn-tcp-grouplabel-color, var(--text-tertiary)); }
.syn-tcp-groupcount { font: var(--syn-tcp-groupcount-font, 500 10px var(--type-family)); color: var(--syn-tcp-groupcount-color, var(--text-faint)); font-variant-numeric: var(--syn-tcp-groupcount-font-variant-numeric, tabular-nums); }
/* THE STABLE EDITOR-ROW ANATOMY (delta 4): [label · meta · date value · the RESERVED 20px act seat]; hover
   paints only the wash into the row's own box (radius 6); editors arm in place at row height. THE DUE ROW
   GROUND (5d): the governing row wears the attention wash at rest — it is the one date not in its
   pursuit-sequential position, so the ground marks it wherever it sits. */
.syn-tcp-row { display: flex; align-items: baseline; gap: var(--syn-tcp-row-gap, 8px); padding: var(--syn-tcp-row-padding, 8px 4px 8px 8px); border-bottom: var(--syn-tcp-row-border-bottom, 1px solid var(--border-hairline)); border-radius: var(--syn-tcp-row-border-radius, var(--radius-sm)); position: relative; }
.syn-tcp-row:hover { background: var(--syn-tcp-row-hover-background, var(--tinted-inset)); }
.syn-tcp-row.is-due { background: var(--syn-tcp-row-is-due-background, var(--attention-tint)); }
.syn-tcp-name { font: var(--syn-tcp-name-font, var(--type-r6)); color: var(--syn-tcp-name-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-tcp-name[title] { cursor: help; }
/* the quiet registers: met and set-aside rows drop to 400 disabled so the live seats carry the eye */
.syn-tcp-row.is-quiet .syn-tcp-name, .syn-tcp-row.is-na .syn-tcp-name { font-weight: var(--syn-tcp-row-is-quiet-tcp-name-font-weight, 400); color: var(--syn-tcp-row-is-quiet-tcp-name-color, var(--text-faint)); }
.syn-tcp-metaword { font: var(--syn-tcp-metaword-font, 600 9px var(--type-family)); letter-spacing: var(--syn-tcp-metaword-letter-spacing, 0.08em); color: var(--syn-tcp-metaword-color, var(--text-faint)); flex: none; }
/* THE DUE CHIP (5d): the attention family self-paired; EXPECTED/PHASED stay gray meta-words */
.syn-tcp-duechip { font: var(--syn-tcp-duechip-font, 600 9px var(--type-family)); letter-spacing: var(--syn-tcp-duechip-letter-spacing, 0.08em); color: var(--syn-tcp-duechip-color, var(--state-warning-text)); background: var(--syn-tcp-duechip-background, var(--attention-tint)); border: var(--syn-tcp-duechip-border, 1px solid var(--attention-seam)); border-radius: var(--syn-tcp-duechip-border-radius, var(--radius-sm)); padding: var(--syn-tcp-duechip-padding, 2px 6px); flex: none; cursor: help; }
/* UI-PX-1 ([REBUILD-SEED-4] (8); the words RULED [REBUILD-CD-RELAY48], Relay 48 §3): ONE chip geometry, the families swap by state —
   MET = the quiet register (the check beside it carries the fill, the date value stays) · OVERDUE = the quiet-red word and date on NO
   ground (red ink is the signal; never red-on-red); a transparent edge and ground hold the DUE chip's box on both */
.syn-tcp-duechip.is-met { color: var(--syn-tcp-duechip-is-met-color, var(--text-faint)); background: transparent; border-color: transparent; }
.syn-tcp-duechip.is-overdue { color: var(--syn-tcp-duechip-is-overdue-color, var(--state-attention-text)); background: transparent; border-color: transparent; }
.syn-tcp-microl { font: var(--syn-tcp-microl-font, 400 10.5px var(--type-family)); color: var(--syn-tcp-microl-color, var(--text-faint)); flex: none; }
/* Q398(f) MP-11: THE HOVER ROW ACTS restored from the pre-Q378 modal (c8af2418^, its hover-acts rule at the verbatim register):
   hidden at rest, the quiet 12px tertiary words appear on row hover — N/A · repeat · restore · delete. */
/* UI-PX-1 ([REBUILD-SEED-4] (8)): the acts seat is RESERVED at rest — hidden by visibility, never absent — so no row re-flows on hover
   (an absent seat entering the flex row took the 8 px gap and shifted the DUE flag left); a seat with no act draws no gap at all */
.syn-tcp-acts { display: inline-flex; visibility: hidden; align-items: baseline; gap: var(--syn-tcp-acts-gap, 6px); flex: none; }
.syn-tcp-acts:not(:has(.syn-tcp-act)) { display: none; }
.syn-tcp-row:hover .syn-tcp-acts { visibility: visible; }
.syn-tcp-act { border: none; background: transparent; padding: 0; font-family: inherit; font-size: var(--syn-tcp-act-font-size, 0.75rem); font-weight: var(--syn-tcp-act-font-weight, 400); color: var(--syn-tcp-act-color, var(--text-tertiary)); cursor: pointer; }
.syn-tcp-act:hover { color: var(--syn-tcp-act-hover-color, var(--text-muted)); }
.syn-tcp-act.is-red:hover { color: var(--syn-tcp-act-is-red-hover-color, var(--state-attention-text)); }
.syn-tcp-actsep { font-size: var(--syn-tcp-actsep-font-size, 0.75rem); color: var(--syn-tcp-actsep-color, var(--text-faint)); }
.syn-tcp-row.is-popend .syn-tcp-name { flex: 1; }
/* THE MET SEAT (5a): the annex's check circle on every dated core row — empty ring un-met, ink ✓ met */
.syn-tcp-seat { width: var(--syn-tcp-seat-width, 20px); flex: none; display: flex; justify-content: center; align-self: center; }
.syn-tcp-check { width: var(--syn-tcp-check-width, 14px); height: var(--syn-tcp-check-height, 14px); border-radius: var(--syn-tcp-check-border-radius, var(--shape-radius-pill)); border: var(--syn-tcp-check-border, 1.5px solid var(--border-emphasis)); background: var(--syn-tcp-check-background, var(--surface-plane)); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--syn-tcp-check-color, var(--text-on-ink)); flex: none; }
.syn-tcp-check:hover { border-color: var(--syn-tcp-check-hover-border-color, var(--text-muted)); }
.syn-tcp-check.is-met { background: var(--syn-tcp-check-is-met-background, var(--text-ink)); border-color: var(--syn-tcp-check-is-met-border-color, var(--text-ink)); }
.syn-tcp-check .syn-icon { display: block; }
/* Relay 48 §3 THE ±0 LAW: the unmet check's ring is HOVER INK in the row's reserved 20px seat — the box stands at rest (opacity, never
   display), so nothing moves; the met check stands filled at rest; the keyboard's focus paints the ring too */
.syn-tcp-row .syn-tcp-check:not(.is-met) { opacity: var(--syn-tcp-row-tcp-check-not-is-met-opacity, 0); transition: var(--syn-tcp-row-tcp-check-not-is-met-transition, opacity var(--motion-duration-fast)); }
.syn-tcp-row:hover .syn-tcp-check, .syn-tcp-row .syn-tcp-check:focus-visible { opacity: var(--syn-tcp-row-hover-tcp-check-opacity, 1); }
/* the date VALUE is the ONE DateTimePicker's inline trigger: set 600 12.5 --due-warn (the R6e emphasis, the
   comp's 12.5); quiet/unset/N-A 400 12 disabled; the trigger's calendar glyph and the close act stay out (Clear is a
   popover act); hover = the ring (--border-emphasis, surface); the popover opens on CLICK only. */
.syn-tcp-sched .syn-dtp-wrap { flex: none; }
.syn-tcp-sched .syn-dtp { width: auto; gap: 0; padding: var(--syn-tcp-sched-dtp-padding, 2px 6px); margin: var(--syn-tcp-sched-dtp-margin, -2px -6px); border: var(--syn-tcp-sched-dtp-border, 1px solid transparent); border-radius: var(--syn-tcp-sched-dtp-border-radius, var(--radius-sm)); background: transparent; font: var(--syn-tcp-sched-dtp-font, 600 12.5px var(--type-family)); color: var(--syn-tcp-sched-dtp-color, var(--due-warn)); white-space: nowrap; }
.syn-tcp-sched .syn-dtp:hover, .syn-tcp-sched .syn-dtp.is-open { border-color: var(--syn-tcp-sched-dtp-hover-border-color, var(--border-emphasis)); background: var(--syn-tcp-sched-dtp-hover-background, var(--surface-plane)); }
.syn-tcp-sched .syn-dtp.is-empty, .syn-tcp-sched .is-quiet .syn-dtp, .syn-tcp-sched .is-na .syn-dtp { font: var(--syn-tcp-sched-dtp-is-empty-font, 400 12px var(--type-family)); color: var(--syn-tcp-sched-dtp-is-empty-color, var(--text-faint)); }
.syn-tcp-sched .syn-dtp.is-expected { border-color: transparent; background: transparent; color: var(--syn-tcp-sched-dtp-is-expected-color, var(--due-warn)); }
.syn-tcp-sched .syn-dtp.is-expected:hover, .syn-tcp-sched .syn-dtp.is-expected.is-open { border-color: var(--syn-tcp-sched-dtp-is-expected-hover-border-color, var(--border-emphasis)); background: var(--syn-tcp-sched-dtp-is-expected-hover-background, var(--surface-plane)); }
/* Relay 48 §3: the OVERDUE row's date takes the word's ink at the set grade (600 12.5) */
.syn-tcp-sched .syn-tcp-row.is-overdue .syn-dtp { color: var(--syn-tcp-sched-tcp-row-is-overdue-dtp-color, var(--state-attention-text)); }
.syn-tcp-sched .syn-dtp > .syn-icon, .syn-tcp-sched .syn-dtp-clear { display: none; }
.syn-tcp-sched .syn-dtp-label { white-space: nowrap; line-height: var(--syn-tcp-sched-dtp-label-line-height, 1.3); }
/* the SPLIT Government date (Q290 d4 carried): the derived "by {final phase date}" seat, PHASED · n, the
   phase set beneath (chips · composer · Un-split with the drawn inline confirm); the DUE chip rides the
   FINAL phase chip. Everything self-saves. */
.syn-tcp-phasedby { font: var(--syn-tcp-phasedby-font, 600 12.5px var(--type-family)); color: var(--syn-tcp-phasedby-color, var(--due-warn)); white-space: nowrap; }
.syn-tcp-phaseset { display: flex; flex-direction: column; gap: var(--syn-tcp-phaseset-gap, 4px); padding: var(--syn-tcp-phaseset-padding, 4px 4px 9px 16px); border-bottom: var(--syn-tcp-phaseset-border-bottom, 1px solid var(--border-hairline)); }
.syn-tcp-phasechip { display: flex; align-items: center; gap: var(--syn-tcp-phasechip-gap, 10px); padding: var(--syn-tcp-phasechip-padding, 5px 8px); background: var(--syn-tcp-phasechip-background, var(--surface-plane)); border: var(--syn-tcp-phasechip-border, 1px solid var(--border-default)); border-radius: var(--syn-tcp-phasechip-border-radius, var(--radius-sm)); }
.syn-tcp-phasechipname { font: var(--syn-tcp-phasechipname-font, 600 11.5px var(--type-family)); color: var(--syn-tcp-phasechipname-color, var(--text-ink)); }
.syn-tcp-phasechipannex { font-weight: var(--syn-tcp-phasechipannex-font-weight, 400); color: var(--syn-tcp-phasechipannex-color, var(--text-tertiary)); }
.syn-tcp-phasechipdate { font: var(--syn-tcp-phasechipdate-font, 400 10.5px var(--type-family-mono)); color: var(--syn-tcp-phasechipdate-color, var(--text-body)); }
.syn-tcp-phasecomposer { display: flex; gap: var(--syn-tcp-phasecomposer-gap, 8px); align-items: center; padding: var(--syn-tcp-phasecomposer-padding, 2px 0); }
.syn-tcp-phaseinput { flex: 1; min-width: 0; font: var(--syn-tcp-phaseinput-font, 400 11.5px var(--type-family)); color: var(--syn-tcp-phaseinput-color, var(--text-ink)); background: var(--syn-tcp-phaseinput-background, var(--surface-plane)); border: var(--syn-tcp-phaseinput-border, 1px solid var(--border-default)); border-radius: var(--syn-tcp-phaseinput-border-radius, var(--radius-sm)); padding: var(--syn-tcp-phaseinput-padding, 5px 8px); outline: none; }
.syn-tcp-phasefoot { display: flex; gap: var(--syn-tcp-phasefoot-gap, 14px); align-items: center; padding: var(--syn-tcp-phasefoot-padding, 2px 0); }
.syn-tcp-unsplit { appearance: none; border: none; background: transparent; padding: 0; font: var(--syn-tcp-unsplit-font, 500 11px var(--type-family)); color: var(--syn-tcp-unsplit-color, var(--text-body)); cursor: pointer; }
.syn-tcp-unsplit:hover:not(:disabled) { color: var(--syn-tcp-unsplit-hover-not-disabled-color, var(--state-attention-text)); }
.syn-tcp-unsplit:disabled { opacity: var(--syn-tcp-unsplit-disabled-opacity, .45); cursor: default; }
.syn-tcp-unsplitconfirm { background: var(--syn-tcp-unsplitconfirm-background, var(--tinted-inset)); border: var(--syn-tcp-unsplitconfirm-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-tcp-unsplitconfirm-border-radius, var(--radius-nav)); padding: var(--syn-tcp-unsplitconfirm-padding, 9px 12px); display: flex; align-items: center; gap: var(--syn-tcp-unsplitconfirm-gap, 12px); }
.syn-tcp-unsplitwords { font: var(--syn-tcp-unsplitwords-font, 400 12px/1.5 var(--type-family)); color: var(--syn-tcp-unsplitwords-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-tcp-xdel { appearance: none; border: none; background: transparent; padding: var(--syn-tcp-xdel-padding, 0 2px); font: var(--syn-tcp-xdel-font, 400 11.5px var(--type-family)); color: var(--syn-tcp-xdel-color, var(--text-tertiary)); cursor: pointer; }
.syn-tcp-xdel:hover:not(:disabled) { color: var(--syn-tcp-xdel-hover-not-disabled-color, var(--state-attention-text)); }
.syn-tcp-xdel:disabled { opacity: var(--syn-tcp-xdel-disabled-opacity, .45); cursor: default; }
/* legacy ParentEventId phase rows (Q262, read-tolerated): the phase's own name field */
.syn-tcp-phasename { flex: 1; min-width: var(--syn-tcp-phasename-min-width, 80px); border: none; border-bottom: var(--syn-tcp-phasename-border-bottom, 1px dotted var(--border-emphasis)); background: transparent; font: var(--syn-tcp-phasename-font, 400 11.5px var(--type-family)); color: var(--syn-tcp-phasename-color, var(--text-body)); padding: var(--syn-tcp-phasename-padding, 0 2px); outline: none; }
.syn-tcp-phasename::placeholder { color: var(--syn-tcp-phasename-placeholder-color, var(--text-faint)); }
/* the Other-dates ANNEX: the recessed full-width band at the tab's foot (bleeds past the pane's 24px) */
.syn-tcp-annex { border-top: var(--syn-tcp-annex-border-top, 2px solid var(--border-default)); background: var(--syn-tcp-annex-background, var(--bg-secondary)); margin: var(--syn-tcp-annex-margin, 12px -24px 0); padding: var(--syn-tcp-annex-padding, 11px 24px 13px); }
.syn-tcp-annexhead { display: flex; align-items: center; gap: var(--syn-tcp-annexhead-gap, 8px); }
.syn-tcp-annextitle { font: var(--syn-tcp-annextitle-font, var(--type-c1)); letter-spacing: var(--syn-tcp-annextitle-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-tcp-annextitle-text-transform, var(--type-label-transform)); color: var(--syn-tcp-annextitle-color, var(--text-tertiary)); }
.syn-tcp-annexcount { font: var(--syn-tcp-annexcount-font, 500 10px var(--type-family)); color: var(--syn-tcp-annexcount-color, var(--text-faint)); font-variant-numeric: var(--syn-tcp-annexcount-font-variant-numeric, tabular-nums); }
.syn-tcp-annexcharter { font: var(--syn-tcp-annexcharter-font, 400 11px var(--type-family)); color: var(--syn-tcp-annexcharter-color, var(--text-faint)); }
.syn-tcp-annexgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--syn-tcp-annexgrid-gap, 0 28px); margin-top: var(--syn-tcp-annexgrid-margin-top, 2px); }
.syn-tcp-annexrow { display: flex; align-items: baseline; gap: var(--syn-tcp-annexrow-gap, 10px); padding: var(--syn-tcp-annexrow-padding, 8px 0); }
.syn-tcp-annexrow .syn-tcp-check { align-self: center; }
.syn-tcp-annexlabel { font: var(--syn-tcp-annexlabel-font, var(--type-r6)); color: var(--syn-tcp-annexlabel-color, var(--text-body)); flex: 1; min-width: 0; }
.syn-tcp-annexdel { display: none; border: none; background: transparent; padding: var(--syn-tcp-annexdel-padding, 0 2px); color: var(--syn-tcp-annexdel-color, var(--text-tertiary)); cursor: pointer; align-self: center; }
.syn-tcp-annexrow:hover .syn-tcp-annexdel { display: inline-flex; }
.syn-tcp-donefold { margin-top: var(--syn-tcp-donefold-margin-top, 6px); border-top: var(--syn-tcp-donefold-border-top, 1px solid var(--surface-inset)); padding-top: var(--syn-tcp-donefold-padding-top, 6px); }
.syn-tcp-donefold button { border: none; background: transparent; padding: 0; font: var(--syn-tcp-donefold-button-font, 500 11.5px var(--type-family)); color: var(--syn-tcp-donefold-button-color, var(--text-faint)); cursor: pointer; display: inline-flex; align-items: center; gap: var(--syn-tcp-donefold-button-gap, 6px); }
.syn-tcp-annexgrid.is-done .syn-tcp-annexlabel { color: var(--syn-tcp-annexgrid-is-done-tcp-annexlabel-color, var(--text-tertiary)); }
.syn-tcp-donedate { font: var(--syn-tcp-donedate-font, 400 12px var(--type-family)); color: var(--syn-tcp-donedate-color, var(--text-faint)); flex: none; }

/* ── the footer: THE HOLD SEAT footer-left (rules 11–12) · the helper line · Done ── */
.syn-tcp-footnote { font: var(--syn-tcp-footnote-font, 400 11.5px var(--type-family)); color: var(--syn-tcp-footnote-color, var(--text-tertiary)); white-space: nowrap; }
/* QB79 rider MP-17 (Ken: "the row stays stable whether the editor is armed or not"): the armed reason box is
   ONE line tall at arm (it grows only as words wrap, capped) and the steady face RESERVES that height, so
   arming changes nothing about the footer row. */
.syn-tcp-hold { display: flex; align-items: center; gap: var(--syn-tcp-hold-gap, 10px); min-width: 0; min-height: var(--syn-tcp-hold-min-height, 30px); }
/* armed: the MULTILINE reason (the LifecycleBlock's auto-growing wrap-entry, two lines deep at rest) + the pair */
.syn-tcp-holdreason { width: var(--syn-tcp-holdreason-width, 360px); max-width: var(--syn-tcp-holdreason-max-width, 40vw); box-sizing: border-box; border: var(--syn-tcp-holdreason-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-tcp-holdreason-border-radius, var(--radius-nav)); background: var(--syn-tcp-holdreason-background, var(--surface-plane)); padding: var(--syn-tcp-holdreason-padding, 5px 10px); font: var(--syn-tcp-holdreason-font, 400 12px/1.5 var(--type-family)); color: var(--syn-tcp-holdreason-color, var(--text-body)); resize: none; field-sizing: content; min-height: var(--syn-tcp-holdreason-min-height, 30px); max-height: var(--syn-tcp-holdreason-max-height, 7.5rem); overflow-y: auto; outline: none; }
.syn-tcp-holdreason:focus { border-color: var(--syn-tcp-holdreason-focus-border-color, var(--accent-action)); }
.syn-tcp-holdreason::placeholder { color: var(--syn-tcp-holdreason-placeholder-color, var(--text-faint)); }
/* held: ON HOLD (attention family) · the reason · the machine stamp · the bordered Lift act */
.syn-tcp-holdword { font: var(--syn-tcp-holdword-font, 700 10px var(--type-family)); letter-spacing: var(--syn-tcp-holdword-letter-spacing, 0.08em); color: var(--syn-tcp-holdword-color, var(--state-warning-text)); background: var(--syn-tcp-holdword-background, var(--attention-tint)); border: var(--syn-tcp-holdword-border, 1px solid var(--attention-seam)); border-radius: var(--syn-tcp-holdword-border-radius, var(--radius-sm)); padding: var(--syn-tcp-holdword-padding, 3px 8px); flex: none; }
.syn-tcp-holdtext { font: var(--syn-tcp-holdtext-font, 500 12.5px var(--type-family)); color: var(--syn-tcp-holdtext-color, var(--text-ink)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-tcp-holdstamp { font: var(--syn-tcp-holdstamp-font, 400 10.5px var(--type-family)); color: var(--syn-tcp-holdstamp-color, var(--text-faint)); white-space: nowrap; }
.syn-tcp-lift { appearance: none; font: var(--syn-tcp-lift-font, 500 11px var(--type-family)); color: var(--syn-tcp-lift-color, var(--text-body)); border: var(--syn-tcp-lift-border, 1px solid var(--border-default)); border-radius: var(--syn-tcp-lift-border-radius, var(--radius-nav)); background: var(--syn-tcp-lift-background, var(--surface-plane)); padding: var(--syn-tcp-lift-padding, 4px 11px); cursor: pointer; white-space: nowrap; }
.syn-tcp-lift:hover { background: var(--syn-tcp-lift-hover-background, var(--surface-hover)); }

/* ── the Proposal package tab: THE CARD ANATOMY (rule 7) in an 860px lane ── */
.syn-tcp-pkgintro { font: var(--syn-tcp-pkgintro-font, var(--type-r5)); color: var(--syn-tcp-pkgintro-color, var(--text-body)); max-width: var(--syn-tcp-pkgintro-max-width, 860px); margin: 0; }
.syn-tcp-pkglane { display: flex; flex-direction: column; gap: var(--syn-tcp-pkglane-gap, 8px); margin-top: var(--syn-tcp-pkglane-margin-top, 12px); max-width: var(--syn-tcp-pkglane-max-width, 860px); }
.syn-tcp-pkgcard { border: var(--syn-tcp-pkgcard-border, 1px solid var(--border-default)); border-radius: var(--syn-tcp-pkgcard-border-radius, var(--shape-radius-plane)); background: var(--syn-tcp-pkgcard-background, var(--surface-plane)); padding: var(--syn-tcp-pkgcard-padding, 11px 14px 11px 12px); }
.syn-tcp-pkgline { display: flex; align-items: center; gap: var(--syn-tcp-pkgline-gap, 12px); min-height: var(--syn-tcp-pkgline-min-height, 22px); }
.syn-tcp-pkgname { font: var(--syn-tcp-pkgname-font, 600 13px var(--type-family)); color: var(--syn-tcp-pkgname-color, var(--text-ink)); }
.syn-tcp-pkgmicro { font: var(--syn-tcp-pkgmicro-font, var(--type-c2)); letter-spacing: var(--syn-tcp-pkgmicro-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-tcp-pkgmicro-text-transform, var(--type-label-transform)); color: var(--syn-tcp-pkgmicro-color, var(--text-faint)); white-space: nowrap; }
/* the canonical status trigger, de-pilled to the drawn dot + word + 14px chevron, borderless at rest */
.syn-tcp-pkgstatus .syn-enum-pill { border-color: transparent; background: transparent; border-radius: var(--syn-tcp-pkgstatus-enum-pill-border-radius, var(--radius-nav)); padding: var(--syn-tcp-pkgstatus-enum-pill-padding, 3px 6px); margin: var(--syn-tcp-pkgstatus-enum-pill-margin, -3px -6px); font: var(--syn-tcp-pkgstatus-enum-pill-font, 500 12px var(--type-family)); color: var(--syn-tcp-pkgstatus-enum-pill-color, var(--text-body)); gap: var(--syn-tcp-pkgstatus-enum-pill-gap, 6px); }
.syn-tcp-pkgstatus .syn-enum-pill:hover, .syn-tcp-pkgstatus .syn-enum-pill.is-open { border-color: var(--syn-tcp-pkgstatus-enum-pill-hover-border-color, var(--border-default)); background: var(--syn-tcp-pkgstatus-enum-pill-hover-background, var(--surface-plane)); }
.syn-tcp-pkgstatus .syn-enum-pilldot { width: var(--syn-tcp-pkgstatus-enum-pilldot-width, 8px); height: var(--syn-tcp-pkgstatus-enum-pilldot-height, 8px); }
.syn-tcp-pkgremove { appearance: none; border: none; background: transparent; padding: 0; font: var(--syn-tcp-pkgremove-font, 500 11px var(--type-family)); color: var(--syn-tcp-pkgremove-color, var(--state-attention-text)); cursor: pointer; white-space: nowrap; }
.syn-tcp-pkgremove:hover { text-decoration: var(--syn-tcp-pkgremove-hover-text-decoration, underline); }
.syn-tcp-removeconfirm { display: inline-flex; align-items: center; gap: var(--syn-tcp-removeconfirm-gap, 10px); }
.syn-tcp-removewords { font: var(--syn-tcp-removewords-font, 400 12px var(--type-family)); color: var(--syn-tcp-removewords-color, var(--text-body)); }
/* the multi-instance NAME field (Q300 seams): borderless at rest, bordered while empty/hovered/focused */
input.syn-tcp-instname { width: var(--kit-input-syn-tcp-instname-width, 240px); box-sizing: border-box; border: var(--kit-input-syn-tcp-instname-border, 1px solid transparent); border-radius: var(--kit-input-syn-tcp-instname-border-radius, var(--radius-sm)); background: transparent; padding: var(--kit-input-syn-tcp-instname-padding, 2px 8px); font: var(--kit-input-syn-tcp-instname-font, 400 11.5px var(--type-family)); color: var(--kit-input-syn-tcp-instname-color, var(--text-body)); }
.syn-tcp-pkgcard:hover input.syn-tcp-instname, input.syn-tcp-instname:focus, input.syn-tcp-instname:placeholder-shown { border-color: var(--syn-tcp-pkgcard-hover-input-tcp-instname-border-color, var(--border-default)); background: var(--syn-tcp-pkgcard-hover-input-tcp-instname-background, var(--surface-plane)); }
input.syn-tcp-instname:focus { border-color: var(--kit-input-syn-tcp-instname-focus-border-color, var(--border-emphasis)); outline: none; }
/* THE LABELED FACT SEATS: C2 micro-label (units ride the label) + an always-visible bordered field; "none" at rest */
.syn-tcp-pkgfacts { display: flex; align-items: center; gap: var(--syn-tcp-pkgfacts-gap, 18px); margin-top: var(--syn-tcp-pkgfacts-margin-top, 5px); flex-wrap: wrap; }
.syn-tcp-fact { display: inline-flex; align-items: center; gap: var(--syn-tcp-fact-gap, 6px); }
.syn-tcp-fact .syn-num-compact, .syn-tcp-madlib .syn-num-compact { padding: var(--syn-tcp-fact-num-compact-padding, 1px 7px); border-radius: var(--syn-tcp-fact-num-compact-border-radius, var(--radius-sm)); font: var(--syn-tcp-fact-num-compact-font, 500 12px var(--type-family)); color: var(--syn-tcp-fact-num-compact-color, var(--text-body)); }
.syn-tcp-fact .syn-num-compact::placeholder, .syn-tcp-madlib .syn-num-compact::placeholder { font-weight: var(--syn-tcp-fact-num-compact-placeholder-font-weight, 400); color: var(--syn-tcp-fact-num-compact-placeholder-color, var(--text-faint)); }
/* the volume's gate rules behind a seam INSIDE the card (rule 7 line 3) */
.syn-tcp-pkgreq { margin-top: var(--syn-tcp-pkgreq-margin-top, 9px); padding-top: var(--syn-tcp-pkgreq-padding-top, 9px); border-top: var(--syn-tcp-pkgreq-border-top, 1px solid var(--border-hairline)); }
.syn-tcp-pkgreqline { display: flex; align-items: center; gap: var(--syn-tcp-pkgreqline-gap, 14px); flex-wrap: wrap; }
/* THE MADLIBS-SENTENCE EXCEPTION (delta 8a): number seats in prose render ALWAYS-BORDERED */
.syn-tcp-madlib { display: inline-flex; align-items: center; gap: var(--syn-tcp-madlib-gap, 4px); font: var(--syn-tcp-madlib-font, 400 12px var(--type-family)); color: var(--syn-tcp-madlib-color, var(--text-body)); flex-wrap: wrap; }
.syn-tcp-madlib-unit { color: var(--syn-tcp-madlib-unit-color, var(--text-tertiary)); }
/* the LoC STATEMENT FACT = the dense picker trigger (statement + the 14px chevron), borderless at rest */
.syn-tcp-locfact .syn-enum-inline { font: var(--syn-tcp-locfact-enum-inline-font, 400 12px var(--type-family)); color: var(--syn-tcp-locfact-enum-inline-color, var(--text-body)); padding: var(--syn-tcp-locfact-enum-inline-padding, 2px 6px); margin: var(--syn-tcp-locfact-enum-inline-margin, -2px -6px); gap: var(--syn-tcp-locfact-enum-inline-gap, 5px); }
.syn-tcp-locpred { font-weight: var(--syn-tcp-locpred-font-weight, 600); }   /* Q394 (d7): the value phrase carries the 600 weight (the Relay 35 pattern); the chevron rides the trigger chrome at the dense 14px box */
.syn-tcp-locconfirm { display: flex; align-items: center; gap: var(--syn-tcp-locconfirm-gap, 10px); margin-top: var(--syn-tcp-locconfirm-margin-top, 8px); background: var(--syn-tcp-locconfirm-background, var(--bg-secondary)); border: var(--syn-tcp-locconfirm-border, 1px solid var(--border-default)); border-radius: var(--syn-tcp-locconfirm-border-radius, var(--shape-radius-control)); padding: var(--syn-tcp-locconfirm-padding, 8px 12px); width: fit-content; max-width: 100%; }
.syn-tcp-locwords { font: var(--syn-tcp-locwords-font, 400 12.5px/1.5 var(--type-family)); color: var(--syn-tcp-locwords-color, var(--text-body)); }
.syn-tcp-pkgempty { font: var(--syn-tcp-pkgempty-font, var(--type-r5)); color: var(--syn-tcp-pkgempty-color, var(--text-tertiary)); padding: var(--syn-tcp-pkgempty-padding, 6px 0); }
/* THE ONE COMPOSER PICKER: eyebrow · the catalog picker (divider · Custom volume… last) · + Add volume */
.syn-tcp-composer { display: flex; align-items: center; gap: var(--syn-tcp-composer-gap, 12px); margin-top: var(--syn-tcp-composer-margin-top, 14px); max-width: var(--syn-tcp-composer-max-width, 860px); flex-wrap: wrap; }
.syn-tcp-composer .syn-tcp-pickerseat { width: var(--syn-tcp-composer-tcp-pickerseat-width, 340px); display: inline-flex; }
.syn-tcp-composer .syn-tcp-pickerseat .syn-enum-wrap, .syn-tcp-composer .syn-tcp-pickerseat .syn-enum { width: 100%; }
.syn-tcp-custominput, .syn-tcp-newname { width: var(--syn-tcp-custominput-width, 340px); box-sizing: border-box; border: var(--syn-tcp-custominput-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-tcp-custominput-border-radius, var(--radius-nav)); background: var(--syn-tcp-custominput-background, var(--surface-plane)); padding: var(--syn-tcp-custominput-padding, 6px 10px); font: var(--syn-tcp-custominput-font, 400 12px var(--type-family)); color: var(--syn-tcp-custominput-color, var(--text-ink)); outline: none; }
.syn-tcp-newname { width: var(--syn-tcp-newname-width, 240px); }
.syn-tcp-custominput:focus, .syn-tcp-newname:focus { border-color: var(--syn-tcp-custominput-focus-border-color, var(--accent-action)); }

/* The Other-date creator (Q173 ruling 13; comp 8b — B1–B14). */
.syn-odc { display: flex; flex-direction: column; gap: var(--syn-odc-gap, 14px); }
.syn-odc-field { display: flex; flex-direction: column; min-width: 0; }
.syn-odc-label { font-size: var(--syn-odc-label-font-size, 0.59375rem); font-weight: var(--syn-odc-label-font-weight, 600); letter-spacing: var(--syn-odc-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-odc-label-text-transform, var(--type-label-transform)); color: var(--syn-odc-label-color, var(--text-tertiary)); margin-bottom: var(--syn-odc-label-margin-bottom, 7px); }
.syn-odc-input { width: 100%; box-sizing: border-box; border: var(--syn-odc-input-border, 1px solid var(--border-default)); border-radius: var(--syn-odc-input-border-radius, var(--shape-radius-control)); padding: var(--syn-odc-input-padding, 8px 11px); font-family: inherit; font-size: var(--syn-odc-input-font-size, 0.8125rem); font-weight: var(--syn-odc-input-font-weight, 400); color: var(--syn-odc-input-color, var(--text-ink)); background: var(--syn-odc-input-background, var(--surface-plane)); outline: none; }
.syn-odc-input:focus { border-color: var(--syn-odc-input-focus-border-color, var(--accent-action)); box-shadow: var(--syn-odc-input-focus-box-shadow, var(--accent-ring-soft)); }
.syn-odc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--syn-odc-grid-gap, 14px); }

/* ── F-MODAL-DELIV v3 + NumberInputCore stepper (append to components.css) ───────────────── */

/* Integer stepper — the app's own up/down (native spinners stay suppressed). Sits at the field's
   right edge; buttons disable at Min/Max. */
.syn-num-steps { display: inline-flex; flex-direction: column; flex: 0 0 auto; margin-left: var(--syn-num-steps-margin-left, 2px); }
.syn-num-step {
    display: flex; align-items: center; justify-content: center;
    width: var(--syn-num-step-width, 18px); height: var(--syn-num-step-height, 12px); padding: 0;
    border: var(--syn-num-step-border, 1px solid var(--border-subtle)); background: var(--syn-num-step-background, var(--surface-plane));
    color: var(--syn-num-step-color, var(--text-muted)); cursor: pointer;
}
.syn-num-step:first-child { border-radius: var(--syn-num-step-first-child-border-radius, var(--radius-sm) var(--radius-sm) 0 0); border-bottom: none; }
.syn-num-step:last-child  { border-radius: var(--syn-num-step-last-child-border-radius, 0 0 var(--radius-sm) var(--radius-sm)); }
.syn-num-step:hover:not(:disabled) { background: var(--syn-num-step-hover-not-disabled-background, var(--surface-hover)); }
.syn-num-step:disabled { opacity: var(--syn-num-step-disabled-opacity, .4); cursor: default; }

/* Form-context controls fill their field/column to match the mockup's width:100% inputs (the inline
   deliverable-row status pills are NOT inside .syn-field, so they stay compact). Extended by the
   2026-07-31 findings pass to the record edit rows (.syn-fieldrow-value — Experience.jsx:1300-1317
   draws every row control full-width: DSelect/DInput/SearchableSelect are all width:100%) and to
   the picker/reference controls the first pass missed. Toolbars and inline grid cells stay compact. */
.syn-field .syn-enum-wrap,
.syn-fieldrow-value .syn-enum-wrap { width: 100%; }
.syn-field .syn-enum-wrap > .syn-enum,
.syn-fieldrow-value .syn-enum-wrap > .syn-enum { width: 100%; }
.syn-field .syn-num-field,
.syn-fieldrow-value .syn-num-field { width: 100%; }
.syn-field .syn-rls,
.syn-fieldrow-value .syn-rls { width: 100%; }
.syn-field .syn-picker,
.syn-fieldrow-value .syn-picker { width: 100%; }
/* Bordered selects in form rows read at the mockup's 13px (DSelect, Experience.jsx:426); the
   toolbar SelectMini keeps the compact 12px base. */
.syn-field .syn-enum-bordered,
.syn-fieldrow-value .syn-enum-bordered { font-size: var(--syn-field-enum-bordered-font-size, 0.8125rem); }

/* Deliverables section eyebrow — mockup SectionLabel (uppercase, letter-spaced, secondary). */
.syn-deliv-seclabel {
    font-size: var(--syn-deliv-seclabel-font-size, 0.71875rem); font-weight: var(--syn-deliv-seclabel-font-weight, var(--font-semibold));
    text-transform: var(--syn-deliv-seclabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-deliv-seclabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-deliv-seclabel-color, var(--text-muted));
}

/* Deliverable rows stack (mockup :1481 — gap 8, offset from the eyebrow). */
.syn-deliv-rows { display: flex; flex-direction: column; gap: var(--syn-deliv-rows-gap, 8px); margin-top: var(--syn-deliv-rows-margin-top, 8px); }

/* Add-deliverable row: type select fills, due is a fixed 200px, button natural (mockup add-row). */
.syn-deliv-add .syn-enum-wrap { flex: 1; }
.syn-deliv-add .syn-enum-wrap > .syn-enum { width: 100%; }
.syn-deliv-add-due { flex: 0 0 200px; display: inline-flex; }
.syn-deliv-add-due > * { width: 100%; }

/* Remove-partner is destructive — red icon + label (mockup Trash2 + var(--state-attention)). */
.syn-deliv-removepartner .syn-inlinedel { color: var(--syn-deliv-removepartner-inlinedel-color, var(--state-attention)); }

/* ============================================================================================
   Proposal-tab batch 2 (C-5 / C-6 remediation). Adds the compact in-table numeric visual (folded
   from the retired VolNumber component), the canonical EnumSelect fill in the package grid, and the
   inline Documents & Links composer. Replaces three now-removed rule sets: the raw package selects
   (-> EnumSelect/Core), the custom LoC checkbox (-> ToggleSwitch), and the standalone compact number.
   ============================================================================================ */

/* The ONE numeric visual's compact in-table mode (C-6; former VolNumber rule, styling preserved).
   Pair with NumberInput/NumberInputCore Width="N". */
.syn-num-compact { text-align: center; padding: var(--syn-num-compact-padding, 5px 6px); border: var(--syn-num-compact-border, 1px solid var(--border-default)); border-radius: var(--syn-num-compact-border-radius, var(--radius-sm)); font-size: var(--syn-num-compact-font-size, 0.8125rem); font-family: inherit; outline: none; background: var(--syn-num-compact-background, var(--surface-plane)); color: var(--syn-num-compact-color, var(--text-ink)); }
.syn-num-compact:focus { border-color: var(--syn-num-compact-focus-border-color, var(--border-emphasis)); }

/* Documents & Links — the inline add-link composer (mockup DocsLinksBlock:1903: label 38%,
   url fills, Save natural) and the link-row name span. */
.syn-linkadd { display: flex; align-items: center; gap: var(--syn-linkadd-gap, var(--space-2)); padding-top: var(--syn-linkadd-padding-top, var(--space-2)); }
.syn-linkadd-label { flex: 0 0 38%; display: inline-flex; }
.syn-linkadd-url { flex: 1; display: inline-flex; }
.syn-linkadd-label > .syn-input, .syn-linkadd-url > .syn-input { width: 100%; }
.syn-linkadd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--syn-linkadd-name-font-size, var(--text-sm)); }

/* ============================================================================================
   Proposal-tab batch 2b (sweep adjudication) — APPEND to components.css. No removals.
   ============================================================================================ */

/* In-cell compact stepper (owner ruling, sweep B3): when the compact mode carries a Stepper, the
   border moves to the wrapper (the Width is the whole box), the input goes naked inside, and the
   ▲▼ column seats INSIDE the right edge. Bare compact inputs (.syn-num-compact on the input itself,
   e.g. the gate-requirement fields) are untouched by these wrapper-scoped rules. */
.syn-num-field.syn-num-compact { position: relative; gap: 0; border: var(--syn-num-field-num-compact-border, 1px solid var(--border-default)); border-radius: var(--syn-num-field-num-compact-border-radius, var(--radius-sm)); background: var(--syn-num-field-num-compact-background, var(--surface-plane)); }
.syn-num-field.syn-num-compact:focus-within { border-color: var(--syn-num-field-num-compact-focus-within-border-color, var(--border-emphasis)); }
.syn-num-field.syn-num-compact > .syn-input { border: none; background: transparent; text-align: center; padding: var(--syn-num-field-num-compact-input-padding, 5px 16px 5px 6px); font-size: var(--syn-num-field-num-compact-input-font-size, 0.8125rem); min-width: 0; }
.syn-num-field.syn-num-compact > .syn-num-steps { position: absolute; right: var(--syn-num-field-num-compact-num-steps-right, 1px); top: var(--syn-num-field-num-compact-num-steps-top, 1px); bottom: var(--syn-num-field-num-compact-num-steps-bottom, 1px); margin-left: 0; justify-content: center; }
.syn-num-field.syn-num-compact .syn-num-step { border: none; background: transparent; border-radius: 0; width: var(--syn-num-field-num-compact-num-step-width, 14px); height: 50%; }
.syn-num-field.syn-num-compact .syn-num-step:hover:not(:disabled) { background: var(--syn-num-field-num-compact-num-step-hover-not-disabled-background, var(--surface-hover)); }

/* Documents & Links — the header action slot (count + Add link/Cancel; mockup Collapsible action). */
.syn-section-headbits { display: inline-flex; align-items: center; gap: var(--syn-section-headbits-gap, var(--space-2)); }

/* ── KP tab (MissionControl KpTab :2788) + the KpDetailModal compliance workbench (:2936) ──────────── */
/* Seven tracks — the roster rows carry Role/IDIQ/Candidate/Resume/Compliance/Cands + the trailing
   chevron (the restored Resume-chip column rides the 0.7fr track). */

.syn-kpd-identity { display: flex; align-items: center; gap: var(--syn-kpd-identity-gap, 9px); margin-bottom: var(--syn-kpd-identity-margin-bottom, var(--space-4)); font-size: var(--syn-kpd-identity-font-size, var(--text-base)); }
.syn-kpd-unfilled { font-size: var(--syn-kpd-unfilled-font-size, var(--text-base)); color: var(--syn-kpd-unfilled-color, var(--state-warning)); font-weight: var(--syn-kpd-unfilled-font-weight, var(--font-medium)); }
/* QB45 (E5 disposition): the .syn-kpd-cw-* crosswalk-cell block was ORPHAN css — no razor hosts
   syn-kpd-cw-cell at tip (the pre-12d KpDetailModal crosswalk; the live merged crosswalk is
   KpWorkbenchLens's, riding EnumSelect's programmatic floor, E1 MATCH). Deleted with its
   .syn-enum override block below (the chevron sweep's orphan-css idiom). */
.syn-kpd-reqhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--syn-kpd-reqhead-margin-bottom, 8px); }
/* Analysis-header actions (stale pill + the inert Run trigger) and the overall-assessment card,
   warning-tinted while inputs are newer than the stored run. */
.syn-kpd-reqactions { display: inline-flex; align-items: center; gap: var(--syn-kpd-reqactions-gap, 10px); }
.syn-kpd-stale { display: inline-flex; align-items: center; gap: var(--syn-kpd-stale-gap, 5px); padding: var(--syn-kpd-stale-padding, 3px 10px); border-radius: var(--syn-kpd-stale-border-radius, var(--shape-radius-pill)); background: var(--syn-kpd-stale-background, var(--state-warning-tint)); color: var(--syn-kpd-stale-color, var(--state-warning)); font-size: var(--syn-kpd-stale-font-size, 0.75rem); font-weight: var(--syn-kpd-stale-font-weight, var(--font-medium)); }
.syn-kpd-staletag { font-size: var(--syn-kpd-staletag-font-size, 0.71875rem); font-weight: var(--syn-kpd-staletag-font-weight, var(--font-medium)); color: var(--syn-kpd-staletag-color, var(--state-warning)); }
.syn-kpd-overall { border: var(--syn-kpd-overall-border, 1px solid var(--border-default)); border-radius: var(--syn-kpd-overall-border-radius, var(--shape-radius-plane)); padding: var(--syn-kpd-overall-padding, 12px 14px); background: var(--syn-kpd-overall-background, var(--bg-secondary)); margin-bottom: var(--syn-kpd-overall-margin-bottom, 10px); }
.syn-kpd-overall.is-stale { background: var(--syn-kpd-overall-is-stale-background, color-mix(in srgb, var(--state-warning) 5%, var(--surface-plane))); }
.syn-kpd-overallhead { display: flex; align-items: center; gap: var(--syn-kpd-overallhead-gap, 8px); margin-bottom: var(--syn-kpd-overallhead-margin-bottom, 6px); }
.syn-kpd-overalltext { font-size: var(--syn-kpd-overalltext-font-size, 0.84375rem); line-height: var(--syn-kpd-overalltext-line-height, 1.6); margin: 0; }
.syn-kpd-table { border: var(--syn-kpd-table-border, 1px solid var(--border-default)); border-radius: var(--syn-kpd-table-border-radius, var(--shape-radius-plane)); overflow: visible; margin-bottom: var(--syn-kpd-table-margin-bottom, 10px); }
.syn-kpd-row { display: grid; grid-template-columns: 1fr 0.95fr 0.95fr 1.5fr; gap: var(--syn-kpd-row-gap, 8px); padding: var(--syn-kpd-row-padding, 11px 14px); border-top: var(--syn-kpd-row-border-top, 1px solid var(--border-default)); align-items: start; font-size: var(--syn-kpd-row-font-size, var(--text-sm)); }
.syn-kpd-row:first-child { border-top: none; }
.syn-kpd-row.is-head { padding: var(--syn-kpd-row-is-head-padding, 9px 14px); background: var(--syn-kpd-row-is-head-background, var(--bg-secondary)); border-radius: var(--syn-kpd-row-is-head-border-radius, var(--shape-radius-plane) var(--shape-radius-plane) 0 0); font-size: var(--syn-kpd-row-is-head-font-size, 0.71875rem); font-weight: var(--syn-kpd-row-is-head-font-weight, var(--font-semibold)); text-transform: var(--syn-kpd-row-is-head-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-kpd-row-is-head-letter-spacing, var(--type-label-tracking)); color: var(--syn-kpd-row-is-head-color, var(--text-tertiary)); }
.syn-kpd-row.is-head .is-topr { color: var(--syn-kpd-row-is-head-is-topr-color, var(--stage-pink-team)); }
.syn-kpd-row.is-head .is-idiq { color: var(--syn-kpd-row-is-head-is-idiq-color, var(--accent-action)); }
.syn-kpd-row.is-narrative { background: var(--syn-kpd-row-is-narrative-background, color-mix(in srgb, var(--stage-pink-team) 3%, var(--surface-plane))); grid-template-columns: 0.85fr 0.95fr 0.95fr 1fr 1.5fr; }
.syn-kpd-row.is-loc { background: var(--syn-kpd-row-is-loc-background, color-mix(in srgb, var(--state-warning) 4%, var(--surface-plane))); grid-template-columns: 0.85fr 0.95fr 0.95fr 1fr 1.5fr; }
.syn-kpd-req { font-weight: var(--syn-kpd-req-font-weight, var(--font-medium)); line-height: var(--syn-kpd-req-line-height, 1.45); }
.syn-kpd-req.is-wide { display: flex; align-items: flex-start; gap: var(--syn-kpd-req-is-wide-gap, 8px); }
/* Narrative + LoC rows share the dims' 5-col grid (mockup GRID :2999) — the requirement text spans
   Requirement->IDIQ (cols 1-3) so the origin/Package tag lands under EFFECTIVE (col 4) and the rating under the
   assessment column (col 5), aligned with the structured-dim rows above. */
.syn-kpd-row.is-narrative .syn-kpd-req.is-wide,
.syn-kpd-row.is-loc .syn-kpd-req.is-wide { grid-column: 1 / 4; }
/* The TOPR bar cell is an editable <Field>, but the row's Requirement column already names the dimension —
   suppress the Field's own 132px label + its label-row box so the value sits flush with the plain IDIQ/Effective
   cells (mockup dim cells :3100 are label-less plain values). */
.syn-kpd-row.is-dims .syn-ef-label { display: none; }
.syn-kpd-row.is-dims .syn-ef { padding: 0; min-height: 0; gap: 0; }
.syn-kpd-cite { color: var(--syn-kpd-cite-color, var(--text-tertiary)); font-weight: var(--syn-kpd-cite-font-weight, var(--font-regular)); }
.syn-kpd-dim { color: var(--syn-kpd-dim-color, var(--text-muted)); }
.syn-kpd-dim.is-idiq { color: var(--syn-kpd-dim-is-idiq-color, var(--text-ink)); font-weight: var(--syn-kpd-dim-is-idiq-font-weight, var(--font-medium)); }
.syn-kpd-rationale { font-size: var(--syn-kpd-rationale-font-size, var(--text-xs)); color: var(--syn-kpd-rationale-color, var(--text-tertiary)); margin-top: var(--syn-kpd-rationale-margin-top, 4px); line-height: var(--syn-kpd-rationale-line-height, 1.4); }
/* Q68 §8 — the tab's seat-aware meter cell */

/* ── The verdict-first KP workbench (Q68 [REBUILD-P4-14] §7): slot switcher · candidate chips ·
   the unified ledger with the verdict RIGHTMOST as the only colored element · the resume split. ── */
.syn-kpw-switch { display: inline-flex; align-items: center; gap: var(--syn-kpw-switch-gap, 2px); margin-right: var(--syn-kpw-switch-margin-right, 4px); }
.syn-kpw-switchbtn, .syn-kpw-slotdrop { display: inline-flex; align-items: center; justify-content: center; width: var(--syn-kpw-switchbtn-width, 24px); height: var(--syn-kpw-switchbtn-height, 24px); border: var(--syn-kpw-switchbtn-border, 1px solid var(--border-default)); border-radius: var(--syn-kpw-switchbtn-border-radius, var(--radius-sm)); background: var(--syn-kpw-switchbtn-background, var(--surface-plane)); color: var(--syn-kpw-switchbtn-color, var(--text-muted)); cursor: pointer; }
.syn-kpw-switchbtn:disabled { opacity: var(--syn-kpw-switchbtn-disabled-opacity, 0.35); cursor: default; }
.syn-kpw-switchbtn:hover:not(:disabled), .syn-kpw-slotdrop:hover { background: var(--syn-kpw-switchbtn-hover-not-disabled-background, var(--surface-hover)); }
.syn-kpw-slotlist { display: flex; flex-direction: column; min-width: var(--syn-kpw-slotlist-min-width, 260px); padding: var(--syn-kpw-slotlist-padding, 6px); }
.syn-kpw-slotrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--syn-kpw-slotrow-gap, 12px); padding: var(--syn-kpw-slotrow-padding, 7px 10px); border: none; border-radius: var(--syn-kpw-slotrow-border-radius, var(--radius-nav)); background: transparent; font: inherit; font-size: var(--syn-kpw-slotrow-font-size, 0.8125rem); text-align: left; cursor: pointer; }
.syn-kpw-slotrow:hover { background: var(--syn-kpw-slotrow-hover-background, var(--surface-hover)); }
.syn-kpw-slotrow.is-sel { background: var(--syn-kpw-slotrow-is-sel-background, var(--accent-muted)); color: var(--syn-kpw-slotrow-is-sel-color, var(--accent-action-active)); font-weight: var(--syn-kpw-slotrow-is-sel-font-weight, var(--font-medium)); }
.syn-kpw-slotmeta { font-size: var(--syn-kpw-slotmeta-font-size, 0.71875rem); color: var(--syn-kpw-slotmeta-color, var(--text-tertiary)); font-variant-numeric: var(--syn-kpw-slotmeta-font-variant-numeric, tabular-nums); white-space: nowrap; }
.syn-kpw-rollup { display: flex; align-items: center; gap: var(--syn-kpw-rollup-gap, 12px); margin-bottom: var(--syn-kpw-rollup-margin-bottom, 12px); flex-wrap: wrap; }
.syn-kpw-idiqlink { border: none; background: transparent; padding: 0; font: inherit; font-size: var(--syn-kpw-idiqlink-font-size, 0.8125rem); color: var(--syn-kpw-idiqlink-color, var(--accent-action-active)); cursor: pointer; }
.syn-kpw-idiqlink:hover { text-decoration: var(--syn-kpw-idiqlink-hover-text-decoration, underline); }
.syn-kpw-seatmeter { font-size: var(--syn-kpw-seatmeter-font-size, 0.75rem); color: var(--syn-kpw-seatmeter-color, var(--text-muted)); font-variant-numeric: var(--syn-kpw-seatmeter-font-variant-numeric, tabular-nums); }
.syn-kpw-needsreview { display: inline-flex; align-items: center; gap: var(--syn-kpw-needsreview-gap, 5px); padding: var(--syn-kpw-needsreview-padding, 2px 9px); border-radius: var(--syn-kpw-needsreview-border-radius, var(--shape-radius-pill)); background: var(--syn-kpw-needsreview-background, var(--state-warning-tint)); color: var(--syn-kpw-needsreview-color, var(--state-warning)); font-size: var(--syn-kpw-needsreview-font-size, 0.71875rem); font-weight: var(--syn-kpw-needsreview-font-weight, var(--font-medium)); }
.syn-kpw-chips { display: flex; align-items: center; gap: var(--syn-kpw-chips-gap, 8px); flex-wrap: wrap; margin-bottom: var(--syn-kpw-chips-margin-bottom, 14px); }
.syn-kpw-chip { display: inline-flex; align-items: center; gap: var(--syn-kpw-chip-gap, 7px); padding: var(--syn-kpw-chip-padding, 5px 11px 5px 6px); border: var(--syn-kpw-chip-border, 1px solid var(--border-default)); border-radius: var(--syn-kpw-chip-border-radius, var(--shape-radius-pill)); background: var(--syn-kpw-chip-background, var(--surface-plane)); font: inherit; font-size: var(--syn-kpw-chip-font-size, 0.78125rem); cursor: pointer; }
.syn-kpw-chip.is-seat { border-color: var(--syn-kpw-chip-is-seat-border-color, var(--accent-action)); background: var(--syn-kpw-chip-is-seat-background, var(--accent-muted)); }
.syn-kpw-chip.is-focus { outline: var(--syn-kpw-chip-is-focus-outline, 2px solid var(--accent-action)); outline-offset: var(--syn-kpw-chip-is-focus-outline-offset, 1px); }
.syn-kpw-chipname { font-weight: var(--syn-kpw-chipname-font-weight, var(--font-medium)); }
.syn-kpw-chipmet { font-size: var(--syn-kpw-chipmet-font-size, 0.71875rem); color: var(--syn-kpw-chipmet-color, var(--text-tertiary)); font-variant-numeric: var(--syn-kpw-chipmet-font-variant-numeric, tabular-nums); }
.syn-kpw-unfilled { font-size: var(--syn-kpw-unfilled-font-size, 0.8125rem); color: var(--syn-kpw-unfilled-color, var(--state-warning)); font-weight: var(--syn-kpw-unfilled-font-weight, var(--font-medium)); }
.syn-kpw-addcand { display: inline-flex; align-items: center; gap: var(--syn-kpw-addcand-gap, 6px); margin-left: auto; }
.syn-kpw-candline { display: flex; align-items: center; gap: var(--syn-kpw-candline-gap, 10px); margin-bottom: var(--syn-kpw-candline-margin-bottom, 10px); flex-wrap: wrap; font-size: var(--syn-kpw-candline-font-size, 0.8125rem); }
.syn-kpw-assessing { font-size: var(--syn-kpw-assessing-font-size, 0.71875rem); font-weight: var(--syn-kpw-assessing-font-weight, var(--font-semibold)); text-transform: var(--syn-kpw-assessing-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-kpw-assessing-letter-spacing, var(--type-label-tracking)); color: var(--syn-kpw-assessing-color, var(--text-tertiary)); }
.syn-kpw-body.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--syn-kpw-body-is-split-gap, 18px); align-items: start; }
/* the ledger — verdict rightmost, the ONLY colored element on the row */
.syn-kpw-ledger { border: var(--syn-kpw-ledger-border, 1px solid var(--border-default)); border-radius: var(--syn-kpw-ledger-border-radius, var(--shape-radius-plane)); margin-bottom: var(--syn-kpw-ledger-margin-bottom, 12px); }
.syn-kpw-lrow { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr auto; gap: var(--syn-kpw-lrow-gap, 10px); padding: var(--syn-kpw-lrow-padding, 10px 14px); border-top: var(--syn-kpw-lrow-border-top, 1px solid var(--border-default)); align-items: start; font-size: var(--syn-kpw-lrow-font-size, var(--text-sm)); }
.syn-kpw-lrow:first-child { border-top: none; }
.syn-kpw-lrow.is-head { padding: var(--syn-kpw-lrow-is-head-padding, 8px 14px); background: var(--syn-kpw-lrow-is-head-background, var(--bg-secondary)); border-radius: var(--syn-kpw-lrow-is-head-border-radius, var(--shape-radius-plane) var(--shape-radius-plane) 0 0); font-size: var(--syn-kpw-lrow-is-head-font-size, 0.71875rem); font-weight: var(--syn-kpw-lrow-is-head-font-weight, var(--font-semibold)); text-transform: var(--syn-kpw-lrow-is-head-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-kpw-lrow-is-head-letter-spacing, var(--type-label-tracking)); color: var(--syn-kpw-lrow-is-head-color, var(--text-tertiary)); }
.syn-kpw-lreq { font-weight: var(--syn-kpw-lreq-font-weight, var(--font-medium)); line-height: var(--syn-kpw-lreq-line-height, 1.45); }
.syn-kpw-lreqd, .syn-kpw-lhas { color: var(--syn-kpw-lreqd-color, var(--text-muted)); line-height: var(--syn-kpw-lreqd-line-height, 1.45); }
.syn-kpw-provbtn { display: inline-flex; border: none; background: transparent; padding: var(--syn-kpw-provbtn-padding, 1px 3px); color: var(--syn-kpw-provbtn-color, var(--text-tertiary)); cursor: pointer; opacity: var(--syn-kpw-provbtn-opacity, 0.6); }
.syn-kpw-provbtn:hover { opacity: var(--syn-kpw-provbtn-hover-opacity, 1); }
.syn-kpw-prov { font-size: var(--syn-kpw-prov-font-size, var(--text-xs)); color: var(--syn-kpw-prov-color, var(--text-tertiary)); margin-top: var(--syn-kpw-prov-margin-top, 3px); }
.syn-kpw-prior { font-size: var(--syn-kpw-prior-font-size, var(--text-xs)); color: var(--syn-kpw-prior-color, var(--state-warning)); margin-top: var(--syn-kpw-prior-margin-top, 4px); line-height: var(--syn-kpw-prior-line-height, 1.4); }
.syn-kpw-verdictcol { display: flex; align-items: center; gap: var(--syn-kpw-verdictcol-gap, 6px); justify-content: flex-end; min-width: var(--syn-kpw-verdictcol-min-width, 130px); }
.syn-kpw-suspect { color: var(--syn-kpw-suspect-color, var(--state-warning)); display: inline-flex; }
.syn-kpw-verdict { border: none; border-radius: var(--syn-kpw-verdict-border-radius, var(--shape-radius-pill)); padding: var(--syn-kpw-verdict-padding, 4px 12px); font: inherit; font-size: var(--syn-kpw-verdict-font-size, 0.75rem); font-weight: var(--syn-kpw-verdict-font-weight, var(--font-semibold)); cursor: pointer; white-space: nowrap; }
.syn-kpw-verdict.is-exceeds { background: var(--syn-kpw-verdict-is-exceeds-background, color-mix(in srgb, var(--category-8) 15%, var(--surface-plane))); color: var(--syn-kpw-verdict-is-exceeds-color, var(--category-8)); }
.syn-kpw-verdict.is-met { background: var(--syn-kpw-verdict-is-met-background, color-mix(in srgb, var(--state-success) 14%, var(--surface-plane))); color: var(--syn-kpw-verdict-is-met-color, var(--state-success)); }
.syn-kpw-verdict.is-notmet { background: var(--syn-kpw-verdict-is-notmet-background, color-mix(in srgb, var(--state-attention) 12%, var(--surface-plane))); color: var(--syn-kpw-verdict-is-notmet-color, var(--state-attention)); }
.syn-kpw-verdict.is-review { background: var(--syn-kpw-verdict-is-review-background, var(--state-warning-tint)); color: var(--syn-kpw-verdict-is-review-color, var(--state-warning)); }
.syn-kpw-composer { display: flex; flex-direction: column; gap: var(--syn-kpw-composer-gap, 10px); padding: var(--syn-kpw-composer-padding, 12px 14px); min-width: var(--syn-kpw-composer-min-width, 340px); }
.syn-kpw-composerfoot { display: flex; align-items: center; gap: var(--syn-kpw-composerfoot-gap, 8px); }
/* edit-requirements mode */
.syn-kpw-editpane { display: flex; flex-direction: column; gap: var(--syn-kpw-editpane-gap, 8px); }
.syn-kpw-seatsrow { display: flex; align-items: center; gap: var(--syn-kpw-seatsrow-gap, 10px); margin-bottom: var(--syn-kpw-seatsrow-margin-bottom, 14px); }
.syn-kpw-seatslabel { font-size: var(--syn-kpw-seatslabel-font-size, 0.8125rem); font-weight: var(--syn-kpw-seatslabel-font-weight, var(--font-medium)); }
.syn-kpw-baredit { display: flex; flex-direction: column; margin-bottom: var(--syn-kpw-baredit-margin-bottom, 14px); }
.syn-kpw-barrow { display: flex; align-items: center; gap: var(--syn-kpw-barrow-gap, 12px); padding: var(--syn-kpw-barrow-padding, 7px 0); border-bottom: var(--syn-kpw-barrow-border-bottom, 1px solid color-mix(in srgb, var(--border-default) 55%, transparent)); }
.syn-kpw-barlabel { width: var(--syn-kpw-barlabel-width, 120px); flex-shrink: 0; font-size: var(--syn-kpw-barlabel-font-size, 0.8125rem); font-weight: var(--syn-kpw-barlabel-font-weight, var(--font-medium)); }
.syn-kpw-barrow .syn-ef-label { display: none; }
.syn-kpw-barrow .syn-ef { padding: 0; min-height: 0; }
.syn-kpw-reqeditrow { display: flex; align-items: center; gap: var(--syn-kpw-reqeditrow-gap, 10px); padding: var(--syn-kpw-reqeditrow-padding, 7px 0); border-bottom: var(--syn-kpw-reqeditrow-border-bottom, 1px solid color-mix(in srgb, var(--border-default) 55%, transparent)); font-size: var(--syn-kpw-reqeditrow-font-size, 0.8125rem); }
/* the resume split pane */
.syn-kpw-resume { border: var(--syn-kpw-resume-border, 1px solid var(--border-default)); border-radius: var(--syn-kpw-resume-border-radius, var(--shape-radius-plane)); padding: var(--syn-kpw-resume-padding, 14px 16px); background: var(--syn-kpw-resume-background, var(--bg-secondary)); max-height: var(--syn-kpw-resume-max-height, 70vh); overflow: auto; }
.syn-kpw-resumehead { display: flex; align-items: center; gap: var(--syn-kpw-resumehead-gap, 8px); flex-wrap: wrap; }
.syn-kpw-resumetitle { display: inline-flex; align-items: center; gap: var(--syn-kpw-resumetitle-gap, 6px); font-size: var(--syn-kpw-resumetitle-font-size, 0.84375rem); font-weight: var(--syn-kpw-resumetitle-font-weight, var(--font-semibold)); }
.syn-kpw-resumedate { font-size: var(--syn-kpw-resumedate-font-size, 0.75rem); color: var(--syn-kpw-resumedate-color, var(--text-tertiary)); }
.syn-kpw-newer { display: inline-flex; align-items: center; gap: var(--syn-kpw-newer-gap, 5px); padding: var(--syn-kpw-newer-padding, 2px 9px); border-radius: var(--syn-kpw-newer-border-radius, var(--shape-radius-pill)); background: var(--syn-kpw-newer-background, var(--state-warning-tint)); color: var(--syn-kpw-newer-color, var(--state-warning)); font-size: var(--syn-kpw-newer-font-size, 0.71875rem); font-weight: var(--syn-kpw-newer-font-weight, var(--font-medium)); }
.syn-kpw-resumenote { margin: var(--syn-kpw-resumenote-margin, 6px 0 10px); font-size: var(--syn-kpw-resumenote-font-size, 0.71875rem); color: var(--syn-kpw-resumenote-color, var(--text-tertiary)); }
.syn-kpw-resumebody { margin-top: 0; }

.syn-kpd-addreq { border: var(--syn-kpd-addreq-border, 1px solid var(--accent-muted)); border-radius: var(--syn-kpd-addreq-border-radius, var(--shape-radius-plane)); padding: var(--syn-kpd-addreq-padding, 14px); background: var(--syn-kpd-addreq-background, var(--bg-secondary)); display: flex; flex-direction: column; gap: var(--syn-kpd-addreq-gap, var(--space-2)); }
.syn-kpd-addreq-row { display: flex; align-items: center; gap: var(--syn-kpd-addreq-row-gap, var(--space-2)); flex-wrap: wrap; }
.syn-kpd-addreq-row .syn-input { flex: 0 0 200px; }
.syn-kpd-addreq-foot { margin-bottom: var(--syn-kpd-addreq-foot-margin-bottom, var(--space-2)); }
.syn-kpd-cands { margin-top: var(--syn-kpd-cands-margin-top, 22px); display: flex; flex-direction: column; gap: var(--syn-kpd-cands-gap, 8px); }
.syn-kpd-cand { display: flex; align-items: center; gap: var(--syn-kpd-cand-gap, 11px); border: var(--syn-kpd-cand-border, 1px solid var(--border-default)); border-radius: var(--syn-kpd-cand-border-radius, var(--radius-md-plus)); padding: var(--syn-kpd-cand-padding, 10px 13px); background: var(--syn-kpd-cand-background, var(--surface-plane)); }
.syn-kpd-cand.is-selected { border-color: var(--syn-kpd-cand-is-selected-border-color, var(--accent-action)); background: var(--syn-kpd-cand-is-selected-background, var(--accent-muted)); }
.syn-kpd-cand-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-kpd-cand-main-gap, 2px); }
.syn-kpd-cand-name { display: flex; align-items: center; gap: var(--syn-kpd-cand-name-gap, 8px); font-size: var(--syn-kpd-cand-name-font-size, 0.84375rem); font-weight: var(--syn-kpd-cand-name-font-weight, var(--font-medium)); }

/* Unit 1 — the structured dims rows: five columns, the edited tag, the quals editor. */
.syn-kpd-row.is-dims { grid-template-columns: 0.85fr 0.95fr 0.95fr 1fr 1.5fr; }
.syn-kpd-dim.is-binding { color: var(--syn-kpd-dim-is-binding-color, var(--text-ink)); font-weight: var(--syn-kpd-dim-is-binding-font-weight, var(--font-medium)); }
.syn-kpd-eff { font-weight: var(--syn-kpd-eff-font-weight, var(--font-medium)); margin-right: var(--syn-kpd-eff-margin-right, 6px); }
.syn-kpd-ratingrow { display: flex; align-items: center; gap: var(--syn-kpd-ratingrow-gap, 7px); flex-wrap: wrap; }
.syn-kpd-edited { font-size: var(--syn-kpd-edited-font-size, 0.65625rem); font-weight: var(--syn-kpd-edited-font-weight, var(--font-semibold)); color: var(--syn-kpd-edited-color, var(--accent-action)); text-transform: var(--syn-kpd-edited-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-kpd-edited-letter-spacing, var(--type-label-tracking)); }
.syn-kpd-quals { display: flex; flex-direction: column; gap: var(--syn-kpd-quals-gap, 2px); margin-top: var(--syn-kpd-quals-margin-top, 6px); }
/* Per-dim TOPR-bar delete — hover-revealed, pinned to the Requirement cell's right edge (the cell
   flexes only in dims rows so margin-left:auto can pin it). */
.syn-kpd-row.is-dims .syn-kpd-req { display: flex; align-items: center; gap: var(--syn-kpd-row-is-dims-kpd-req-gap, 6px); }
.syn-kpd-dimdel { margin-left: auto; opacity: var(--syn-kpd-dimdel-opacity, 0); transition: var(--syn-kpd-dimdel-transition, opacity var(--motion-duration-fast)); }
.syn-kpd-row:hover .syn-kpd-dimdel { opacity: var(--syn-kpd-row-hover-kpd-dimdel-opacity, 1); }

/* Section labels — the mockup's SectionLabel (uppercase, 0.6875rem, semibold, tracked); shared grammar with
   the register/composer heads above. */
.syn-kpd-seclabel { font-size: var(--syn-kpd-seclabel-font-size, 0.71875rem); font-weight: var(--syn-kpd-seclabel-font-weight, var(--font-semibold)); text-transform: var(--syn-kpd-seclabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-kpd-seclabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-kpd-seclabel-color, var(--text-tertiary)); }

/* text-align:left overrides the <button> UA default (center) that only shows once the label is widened to flex:1 —
   the mockup's labels sit left with the chevron trailing (LcatPicker :2894, RatingControl content-left). */
.syn-kpd-table .syn-enum-pill .syn-enum-label { flex: 1; text-align: left; }

/* IDIQ LcatPicker (mockup :2881-2933) — the .syn-picker-* popover grammar in LCAT trim: an
   accent-muted-bordered full-width trigger; rows are title (+ trailing check when current) over
   the tertiary spec line. Panel/search/list boxes mirror .syn-picker-panel/search/list exactly. */
.syn-lcat-trigger {
    display: flex; align-items: center; gap: var(--syn-lcat-trigger-gap, 8px); width: 100%; padding: var(--syn-lcat-trigger-padding, 6px 9px);
    border: var(--syn-lcat-trigger-border, 1px solid var(--accent-muted)); border-radius: var(--syn-lcat-trigger-border-radius, var(--shape-radius-control)); background: var(--syn-lcat-trigger-background, var(--surface-plane));
    font-family: inherit; cursor: pointer; text-align: left;
    transition: var(--syn-lcat-trigger-transition, border-color var(--motion-duration-base), background var(--motion-duration-base));
}
.syn-lcat-trigger:hover { background: var(--syn-lcat-trigger-hover-background, var(--surface-hover)); border-color: var(--syn-lcat-trigger-hover-border-color, var(--accent-action)); }
/* QB45 (K5, Ken's popup-anatomy amendment): the closed trigger's long LCAT title WRAPS to more
   lines — wrapping, never truncation; the trigger grows in height. */
.syn-lcat-current { flex: 1; font-size: var(--syn-lcat-current-font-size, 0.875rem); font-weight: var(--syn-lcat-current-font-weight, var(--font-medium)); color: var(--syn-lcat-current-color, var(--text-ink)); white-space: normal; overflow-wrap: anywhere; line-height: var(--syn-lcat-current-line-height, 1.35); }
.syn-lcat-current.is-placeholder { color: var(--syn-lcat-current-is-placeholder-color, var(--text-tertiary)); font-weight: var(--syn-lcat-current-is-placeholder-font-weight, var(--font-regular)); }
.syn-lcat-panel {
    display: flex; flex-direction: column; background: var(--syn-lcat-panel-background, var(--surface-plane));
    border: var(--syn-lcat-panel-border, 1px solid var(--border-default)); border-radius: var(--syn-lcat-panel-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-lcat-panel-box-shadow, var(--elevation-overlay));
    overflow: hidden; max-height: var(--syn-lcat-panel-max-height, 300px);
}
.syn-lcat-search {
    display: flex; align-items: center; gap: var(--syn-lcat-search-gap, 7px); padding: var(--syn-lcat-search-padding, 8px 11px); flex-shrink: 0;
    border-bottom: var(--syn-lcat-search-border-bottom, 1px solid var(--border-default));
}
.syn-lcat-searchinput {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: var(--syn-lcat-searchinput-font-size, 0.8125rem); font-family: inherit; color: var(--syn-lcat-searchinput-color, var(--text-ink));
}
.syn-lcat-list { overflow-y: auto; }
.syn-lcat-row {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--syn-lcat-row-gap, 2px); width: 100%; text-align: left;
    padding: var(--syn-lcat-row-padding, 8px 12px); border: none; border-bottom: var(--syn-lcat-row-border-bottom, 1px solid var(--border-default)); background: transparent;
    cursor: pointer; font-family: inherit;
}
.syn-lcat-row:last-child { border-bottom: none; }
.syn-lcat-row:hover { background: var(--syn-lcat-row-hover-background, var(--surface-hover)); }
.syn-lcat-row.is-sel, .syn-lcat-row.is-sel:hover { background: var(--syn-lcat-row-is-sel-background, var(--accent-muted)); }
.syn-lcat-rowtitle { display: flex; align-items: center; gap: var(--syn-lcat-rowtitle-gap, 7px); font-size: var(--syn-lcat-rowtitle-font-size, 0.84375rem); font-weight: var(--syn-lcat-rowtitle-font-weight, var(--font-medium)); color: var(--syn-lcat-rowtitle-color, var(--text-ink)); }
/* QB37(a) (Ken's popup-width amendment): long option values WRAP — wrapping, never truncation. */
.syn-lcat-rowspec { font-size: var(--syn-lcat-rowspec-font-size, 0.75rem); color: var(--syn-lcat-rowspec-color, var(--text-tertiary)); line-height: var(--syn-lcat-rowspec-line-height, 1.4); }
.syn-lcat-empty { padding: var(--syn-lcat-empty-padding, 14px); font-size: var(--syn-lcat-empty-font-size, 0.8125rem); color: var(--syn-lcat-empty-color, var(--text-tertiary)); }

/* Experience tab (MissionControl ExperienceTab :2448; KP-EXPERIENCE-SPEC Unit 2) — the pooled-record table.
   Reuses the shared stat-strip grammar (.syn-kpt-head / .syn-kpt-stats / .syn-kpt-stat*) — flagged for a
   neutral .syn-statstrip rename when the KP + Experience strips converge. The batch-analysis checkbox column
   is Jane-deferred (rendered as the inert "Analyze selected" shell), so this grid has no checkbox column. */
.syn-expt-actions { display: flex; align-items: center; gap: var(--syn-expt-actions-gap, var(--space-2)); flex-wrap: wrap; }
.syn-expt-add { display: flex; align-items: center; gap: var(--syn-expt-add-gap, var(--space-2)); }
.syn-expt-reqline { font-size: var(--syn-expt-reqline-font-size, 0.78125rem); color: var(--syn-expt-reqline-color, var(--text-muted)); }
.syn-expt-reqline b { font-weight: var(--syn-expt-reqline-b-font-weight, var(--font-semibold)); color: var(--syn-expt-reqline-b-color, var(--text-ink)); }
.syn-expt-over { color: var(--syn-expt-over-color, var(--state-warning)); font-weight: var(--syn-expt-over-font-weight, var(--font-medium)); }
.syn-expt-table { border: var(--syn-expt-table-border, 1px solid var(--border-default)); border-radius: var(--syn-expt-table-border-radius, var(--shape-radius-control)); overflow: hidden; background: var(--syn-expt-table-background, var(--surface-plane)); }
/* Contract gets a heavier fr share than the mockup's 1.5 to hold its ~mockup absolute width: our relevance
   (editable pill) + actions (Select + hover-delete) columns run wider than the mockup's read-only chip + Select,
   so without the bump the fr pool — and the Contract name — would be squeezed into an extra wrap line. */
.syn-expt-row { display: grid; grid-template-columns: var(--syn-expt-row-grid-template-columns, 28px minmax(0, 1.9fr) minmax(0, 0.95fr) minmax(0, 0.65fr) minmax(0, 1.05fr) minmax(0, 1fr) 104px 100px); gap: var(--syn-expt-row-gap, 12px); padding: var(--syn-expt-row-padding, 12px 16px); align-items: center; border-top: var(--syn-expt-row-border-top, 1px solid var(--border-default)); }
.syn-expt-row:first-child { border-top: none; }
.syn-expt-row.is-head { padding: var(--syn-expt-row-is-head-padding, 10px 16px); background: var(--syn-expt-row-is-head-background, var(--bg-secondary)); font-size: var(--syn-expt-row-is-head-font-size, 0.71875rem); font-weight: var(--syn-expt-row-is-head-font-weight, var(--font-semibold)); text-transform: var(--syn-expt-row-is-head-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-expt-row-is-head-letter-spacing, var(--type-label-tracking)); color: var(--syn-expt-row-is-head-color, var(--text-tertiary)); }
.syn-expt-row.is-selected { background: var(--syn-expt-row-is-selected-background, color-mix(in srgb, var(--accent-action) 3%, var(--surface-plane))); }
.syn-expt-value { font-size: var(--syn-expt-value-font-size, var(--text-sm)); font-weight: var(--syn-expt-value-font-weight, 600); font-variant-numeric: var(--syn-expt-value-font-variant-numeric, tabular-nums); color: var(--syn-expt-value-color, var(--text-ink)); }   /* Q99 flag 15 */
.syn-expt-pop { font-size: var(--syn-expt-pop-font-size, var(--text-xs)); color: var(--syn-expt-pop-color, var(--text-muted)); font-variant-numeric: var(--syn-expt-pop-font-variant-numeric, tabular-nums); line-height: var(--syn-expt-pop-line-height, 1.35); display: flex; flex-direction: column; }
.syn-expt-checks { display: flex; gap: var(--syn-expt-checks-gap, 5px); flex-wrap: wrap; }
.syn-expt-check { display: inline-flex; align-items: center; gap: var(--syn-expt-check-gap, 3px); font-size: var(--syn-expt-check-font-size, 0.71875rem); }
.syn-expt-check.is-pass { color: var(--syn-expt-check-is-pass-color, var(--state-success)); }
.syn-expt-check.is-fail { color: var(--syn-expt-check-is-fail-color, var(--state-attention)); }
.syn-expt-muted { color: var(--syn-expt-muted-color, var(--text-tertiary)); }
/* The one select/deselect toggle button — the mockup's identical inline-styled pill shared by the Experience
   table (:2546) AND the KP candidate roster (:3221). Accent-filled when on; "Select" -> "Selected". */
.syn-selbtn { font-size: var(--syn-selbtn-font-size, var(--text-xs)); padding: var(--syn-selbtn-padding, 5px 11px); border-radius: var(--syn-selbtn-border-radius, var(--radius-nav)); font-weight: var(--syn-selbtn-font-weight, var(--font-medium)); white-space: nowrap; border: var(--syn-selbtn-border, 1px solid var(--border-default)); background: var(--syn-selbtn-background, var(--surface-plane)); color: var(--syn-selbtn-color, var(--text-ink)); cursor: pointer; }
.syn-selbtn.is-on { border-color: var(--syn-selbtn-is-on-border-color, var(--accent-action)); background: var(--syn-selbtn-is-on-background, var(--accent-action)); color: var(--syn-selbtn-is-on-color, var(--text-on-accent)); }
/* Batch-analysis pick checkbox (mockup :2523, 15×15 accent) + the row's actions cell: Select flush-right with a
   hover-revealed remove to its left (same reveal grammar as the action stream, :1390) so the row is clean at rest. */
.syn-expt-pick { width: var(--syn-expt-pick-width, 15px); height: var(--syn-expt-pick-height, 15px); accent-color: var(--syn-expt-pick-accent-color, var(--accent-action)); cursor: pointer; margin: 0; }
.syn-expt-actionscell { display: flex; align-items: center; justify-content: flex-end; gap: var(--syn-expt-actionscell-gap, 6px); }
.syn-expt-row .syn-inlinedel { opacity: var(--syn-expt-row-inlinedel-opacity, 0); transition: var(--syn-expt-row-inlinedel-transition, opacity var(--motion-duration-fast) var(--motion-easing)); }
.syn-expt-row:hover .syn-inlinedel, .syn-expt-row:focus-within .syn-inlinedel { opacity: var(--syn-expt-row-hover-inlinedel-opacity, 1); }
.syn-expt-batchnote { margin-top: var(--syn-expt-batchnote-margin-top, 8px); color: var(--syn-expt-batchnote-color, var(--text-muted)); }
.syn-expt-stale { font-size: var(--syn-expt-stale-font-size, 0.71875rem); color: var(--syn-expt-stale-color, var(--state-warning)); white-space: nowrap; }   /* JaneStale suffix (annex C §3) */
.syn-expt-error { color: var(--syn-expt-error-color, var(--state-attention)); }
.syn-expt-legend { margin-top: var(--syn-expt-legend-margin-top, 12px); font-size: var(--syn-expt-legend-font-size, var(--text-xs)); color: var(--syn-expt-legend-color, var(--text-tertiary)); display: flex; gap: var(--syn-expt-legend-gap, 24px); flex-wrap: wrap; align-items: center; }
.syn-expt-legend-item { display: inline-flex; align-items: center; gap: var(--syn-expt-legend-item-gap, 6px); }
.syn-expt-legend-chip { padding: var(--syn-expt-legend-chip-padding, 2px 8px); font-size: var(--syn-expt-legend-chip-font-size, 0.65625rem); cursor: default; }

/* ============================================================================================
   SHELL-IDENT-REDESIGN (2026-07-08 owner ruling) — the permanent condensed header, the
   Identification & Overview card (summary / description / team strip), the Lifecycle block,
   wrapped grid values, and the schema-Help label tooltips.
   ============================================================================================ */

/* Grid values WRAP instead of truncating (owner-ratified) — scoped to the IdentityGrid so the
   register/table consumers of .syn-ef-val keep their single-line ellipsis. */
.syn-identity-grid .syn-ef-val { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.syn-identity-grid .syn-ef { align-items: flex-start; }
.syn-identity-grid .syn-ef-label { padding-top: var(--syn-identity-grid-ef-label-padding-top, 4px); }
.syn-identity-grid .syn-ef-idle { align-items: flex-start; }
.syn-identity-grid .syn-ef-idle .syn-ef-pencil { margin-top: var(--syn-identity-grid-ef-idle-ef-pencil-margin-top, 3px); }

/* Schema Display.Help — the label wears a dotted-underline affordance and the browser tooltip. */
.syn-ef-label.has-help { cursor: help; text-decoration: var(--syn-ef-label-has-help-text-decoration, underline dotted var(--border-strong)); text-underline-offset: var(--syn-ef-label-has-help-text-underline-offset, 3px); }

/* The one-line metric bar's inline alert fragment (the retired metric cards' Alert line). */
.syn-metric-bar-alert { font-size: var(--syn-metric-bar-alert-font-size, var(--text-xs)); font-weight: var(--syn-metric-bar-alert-font-weight, var(--font-semibold)); }

/* --- Identification & Overview: the narrative block above the facts --- */
.syn-ident-overview {
    display: flex; flex-direction: column; gap: var(--syn-ident-overview-gap, var(--space-2));
    margin-top: var(--syn-ident-overview-margin-top, var(--space-3)); padding-top: var(--syn-ident-overview-padding-top, var(--space-3)); border-top: var(--syn-ident-overview-border-top, 1px solid var(--border-default));
}
.syn-ident-desc { margin-top: var(--syn-ident-desc-margin-top, 2px); }

/* --- The response-team strip: four fixed leadership roles, each cell a doorway to ManageTeamModal --- */
.syn-ident-team {
    display: grid; grid-template-columns: var(--syn-ident-team-grid-template-columns, repeat(auto-fit, minmax(150px, 1fr))); gap: var(--syn-ident-team-gap, var(--space-2));
    padding: var(--syn-ident-team-padding, var(--space-2) 0 var(--space-3)); margin-bottom: var(--syn-ident-team-margin-bottom, var(--space-3));
    border-bottom: var(--syn-ident-team-border-bottom, 1px solid var(--border-default));
}
.syn-ident-teamcell {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--syn-ident-teamcell-gap, 3px); text-align: left;
    background: transparent; border: var(--syn-ident-teamcell-border, 1px solid transparent); border-radius: var(--syn-ident-teamcell-border-radius, var(--shape-radius-control));
    padding: var(--syn-ident-teamcell-padding, var(--space-1) var(--space-2)); margin: var(--syn-ident-teamcell-margin, calc(-1 * var(--space-1)) calc(-1 * var(--space-2)));
    font-family: inherit; cursor: pointer; transition: var(--syn-ident-teamcell-transition, background var(--motion-duration-base), border-color var(--motion-duration-base));
}
.syn-ident-teamcell:hover { background: var(--syn-ident-teamcell-hover-background, var(--surface-hover)); }
.syn-ident-teamrole {
    font-size: var(--syn-ident-teamrole-font-size, var(--text-xs)); font-weight: var(--syn-ident-teamrole-font-weight, var(--font-semibold)); letter-spacing: var(--syn-ident-teamrole-letter-spacing, var(--type-label-tracking));
    text-transform: var(--syn-ident-teamrole-text-transform, var(--type-label-transform)); color: var(--syn-ident-teamrole-color, var(--text-tertiary)); white-space: nowrap;
}
.syn-ident-teamname { font-size: var(--syn-ident-teamname-font-size, var(--text-sm)); }
.syn-ident-teamempty { font-size: var(--syn-ident-teamempty-font-size, var(--text-sm)); color: var(--syn-ident-teamempty-color, var(--text-tertiary)); }

/* --- The Lifecycle block: sentence · stage track · posture switch · quiet outcome --- */
.syn-life { margin-bottom: var(--syn-life-margin-bottom, var(--space-3)); }
.syn-life-lane { display: flex; align-items: baseline; gap: var(--syn-life-lane-gap, 5px); margin-bottom: var(--syn-life-lane-margin-bottom, var(--space-2)); }
.syn-life-lanelabel {
    font-size: var(--syn-life-lanelabel-font-size, var(--text-xs)); font-weight: var(--syn-life-lanelabel-font-weight, var(--font-semibold)); letter-spacing: var(--syn-life-lanelabel-letter-spacing, var(--type-label-tracking));
    text-transform: var(--syn-life-lanelabel-text-transform, var(--type-label-transform)); color: var(--syn-life-lanelabel-color, var(--text-tertiary));
}
.syn-life-lanelabel[title]:not([title=""]) { cursor: help; text-decoration: var(--syn-life-lanelabel-title-not-title-text-decoration, underline dotted var(--border-strong)); text-underline-offset: var(--syn-life-lanelabel-title-not-title-text-underline-offset, 3px); }
/* Q180 (C4): the inline helper phrase — 400 10.5px DISABLED (comp 1a; recast is ruling 38's). */
.syn-life-lanehint { font-size: var(--syn-life-lanehint-font-size, 0.65625rem); font-weight: var(--syn-life-lanehint-font-weight, 400); color: var(--syn-life-lanehint-color, var(--text-faint)); }
.syn-life-track { display: flex; align-items: flex-start; margin-bottom: var(--syn-life-track-margin-bottom, var(--space-3)); }
.syn-life-stop {
    display: flex; flex-direction: column; align-items: center; gap: var(--syn-life-stop-gap, 4px); flex: 0 0 auto;
    background: transparent; border: none; padding: var(--syn-life-stop-padding, 0 2px); font-family: inherit; cursor: pointer;
}
.syn-life-dot {
    width: var(--syn-life-dot-width, 10px); height: var(--syn-life-dot-height, 10px); border-radius: var(--syn-life-dot-border-radius, var(--shape-radius-pill));
    background: var(--syn-life-dot-background, var(--surface-plane)); border: var(--syn-life-dot-border, 1.5px solid var(--border-strong));
    transition: var(--syn-life-dot-transition, transform var(--motion-duration-base), border-color var(--motion-duration-base), background var(--motion-duration-base));
}
.syn-life-stop:hover:not(:disabled) .syn-life-dot { transform: scale(1.25); }
.syn-life-stop.is-blocked { cursor: not-allowed; }
.syn-life-stop.is-blocked .syn-life-dot { border-style: var(--syn-life-stop-is-blocked-life-dot-border-style, dashed); }
.syn-life-stop.is-blocked .syn-life-stopname { color: var(--syn-life-stop-is-blocked-life-stopname-color, var(--text-tertiary)); opacity: var(--syn-life-stop-is-blocked-life-stopname-opacity, 0.75); }
.syn-life-stop.is-current .syn-life-dot { width: var(--syn-life-stop-is-current-life-dot-width, 14px); height: var(--syn-life-stop-is-current-life-dot-height, 14px); box-shadow: var(--syn-life-stop-is-current-life-dot-box-shadow, var(--stop-current-ring)); }
.syn-life-stopname { font-size: var(--syn-life-stopname-font-size, var(--text-xs)); color: var(--syn-life-stopname-color, var(--text-tertiary)); white-space: nowrap; }
.syn-life-stop.is-reached .syn-life-stopname { color: var(--syn-life-stop-is-reached-life-stopname-color, var(--text-muted)); }
.syn-life-stop.is-current .syn-life-stopname { color: var(--syn-life-stop-is-current-life-stopname-color, var(--text-ink)); font-weight: var(--syn-life-stop-is-current-life-stopname-font-weight, var(--font-medium)); }
.syn-life-link { flex: 1 1 0; height: var(--syn-life-link-height, 2px); margin-top: var(--syn-life-link-margin-top, 5px); min-width: var(--syn-life-link-min-width, 10px); background: var(--syn-life-link-background, var(--border-default)); }
.syn-life-link.is-reached { background: var(--syn-life-link-is-reached-background, var(--border-strong)); }
/* Q180 (C3, comp 1a): the decision grid — 1fr 1fr (responsive via auto-fit), gap 22px 28px. */
.syn-life-row2 { display: grid; grid-template-columns: var(--syn-life-row2-grid-template-columns, repeat(auto-fit, minmax(230px, 1fr))); gap: var(--syn-life-row2-gap, 22px 28px); }
.syn-life-seg { display: inline-flex; border: var(--syn-life-seg-border, 1px solid var(--border-strong)); border-radius: var(--syn-life-seg-border-radius, var(--shape-radius-control)); overflow: hidden; width: fit-content; }
.syn-life-segbtn {
    padding: var(--syn-life-segbtn-padding, 5px 12px); background: var(--syn-life-segbtn-background, var(--surface-plane)); border: none; font-family: inherit;
    font-size: var(--syn-life-segbtn-font-size, 13px); /* Q342(c) C7: a segmented button label = chrome */ font-weight: var(--syn-life-segbtn-font-weight, var(--font-medium)); color: var(--syn-life-segbtn-color, var(--text-muted)); cursor: pointer;
    transition: var(--syn-life-segbtn-transition, background var(--motion-duration-base), color var(--motion-duration-base));
}
.syn-life-segbtn + .syn-life-segbtn { border-left: var(--syn-life-segbtn-life-segbtn-border-left, 1px solid var(--border-default)); }
.syn-life-segbtn:hover:not(:disabled) { background: var(--syn-life-segbtn-hover-not-disabled-background, var(--surface-hover)); }
.syn-life-segbtn.is-selected { background: var(--syn-life-segbtn-is-selected-background, var(--text-ink)); color: var(--syn-life-segbtn-is-selected-color, var(--surface-canvas)); }
.syn-life-segbtn.is-blocked { color: var(--syn-life-segbtn-is-blocked-color, var(--text-tertiary)); cursor: not-allowed; background: var(--syn-life-segbtn-is-blocked-background, var(--bg-secondary)); }
.syn-life-concluded { font: var(--syn-life-concluded-font, var(--type-r6)); color: var(--syn-life-concluded-color, var(--text-tertiary)); padding: var(--syn-life-concluded-padding, 5px 0); }   /* Q382(a): the posture value binds R6 (was --read-sm, a non-ramp size); the WORD is flagged — the comp never drew it */
/* Q180 (C6/C7): microcopy 400 12px/1.5 tertiary — 8px above (work status) / 5px (outcome). */
.syn-life-help { font-size: var(--syn-life-help-font-size, 0.75rem); font-weight: var(--syn-life-help-font-weight, 400); line-height: var(--syn-life-help-line-height, 1.5); color: var(--syn-life-help-color, var(--text-tertiary)); margin-top: var(--syn-life-help-margin-top, 8px); }
.syn-life-help.is-outcome { margin-top: var(--syn-life-help-is-outcome-margin-top, 5px); }
.syn-life-outcome {
    display: inline-flex; align-items: center; gap: var(--syn-life-outcome-gap, 6px); background: transparent;
    border: var(--syn-life-outcome-border, 1px solid transparent); border-radius: var(--syn-life-outcome-border-radius, var(--shape-radius-control)); padding: var(--syn-life-outcome-padding, 7px 7px); margin: var(--syn-life-outcome-margin, 0 -7px);
    font: var(--syn-life-outcome-font, var(--type-r6)); font-weight: var(--syn-life-outcome-font-weight, 400); color: var(--syn-life-outcome-color, var(--text-ink)); cursor: pointer;   /* Q362(b): the seat binds R6 fact-value (was a local 13px/400 — the T35 census class). Q398(a) MP-3 (Ken, verified live): the size WAS the wall's 12.5 — the weight (500) read a rung big beside the wall's 400 facts; the rest word takes the wall's weight (the SET word keeps R6e) */
    transition: var(--syn-life-outcome-transition, background var(--motion-duration-base));
}
.syn-life-outcome:hover { background: var(--syn-life-outcome-hover-background, var(--surface-hover)); }
/* Q180 (C7): unset = 400 13px tertiary on a 7px 0 row. */
.syn-life-outcome.is-pending { color: var(--syn-life-outcome-is-pending-color, var(--text-tertiary)); }
/* Ruling 17 / C8: the SET outcome speaks at decision scale — a 600 15px ink word (2px row). */
.syn-life-outcome.is-set { padding-top: var(--syn-life-outcome-is-set-padding-top, 2px); padding-bottom: var(--syn-life-outcome-is-set-padding-bottom, 2px); font: var(--syn-life-outcome-is-set-font, var(--type-r6e)); color: var(--syn-life-outcome-is-set-color, var(--text-ink)); }   /* Q382(a): the SET outcome binds R6e (600 13, the set-value emphasis) — the drawn 600 15px was a non-ramp size */
/* Q271 (ruling addendum 2026-08-17): NO resting chevron — the faint ▾ is the 12f HOVER scent. */
.syn-life-outcomechev { display: inline-flex; opacity: var(--syn-life-outcomechev-opacity, 0); transition: var(--syn-life-outcomechev-transition, opacity var(--motion-duration-fast)); color: var(--syn-life-outcomechev-color, var(--text-tertiary)); }
.syn-life-outcome:hover .syn-life-outcomechev { opacity: var(--syn-life-outcome-hover-life-outcomechev-opacity, 1); }
.syn-life-outcomeedit { max-width: var(--syn-life-outcomeedit-max-width, 220px); }
/* Q271 — the 21a CONTROL ROW + the 4a-i/4b-i hold family (the interim quiet meta-line + the
   ToggleSwitch retired; the CD-DESIGN-GATED note is settled — the design landed). */
.syn-life-ctl { display: flex; align-items: center; gap: var(--syn-life-ctl-gap, 14px); flex-wrap: wrap; }
.syn-life-ctl.is-dimmed { opacity: var(--syn-life-ctl-is-dimmed-opacity, .45); }
.syn-life-ctllabel { font-size: var(--syn-life-ctllabel-font-size, 9.5px); /* Q342(c) C7: micro-label = chrome */ font-weight: var(--syn-life-ctllabel-font-weight, 600); letter-spacing: var(--syn-life-ctllabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-life-ctllabel-text-transform, var(--type-label-transform)); color: var(--syn-life-ctllabel-color, var(--text-faint)); flex: none; }
.syn-life-ctllabel[title]:not([title=""]) { cursor: help; }
.syn-life-ctldivider { width: var(--syn-life-ctldivider-width, 1px); height: var(--syn-life-ctldivider-height, 16px); background: var(--syn-life-ctldivider-background, var(--border-default)); flex: none; }
.syn-life-holdbtn { border: var(--syn-life-holdbtn-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-life-holdbtn-border-radius, var(--radius-nav)); background: var(--syn-life-holdbtn-background, var(--surface-plane)); padding: var(--syn-life-holdbtn-padding, 4px 12px); font: var(--syn-life-holdbtn-font, 500 11.5px var(--type-family)); color: var(--syn-life-holdbtn-color, var(--text-body)); cursor: pointer; flex: none; white-space: nowrap; }
.syn-life-holdbtn:hover { background: var(--syn-life-holdbtn-hover-background, var(--surface-hover)); }
/* 4b-i armed: the reason WRAPS and auto-grows (2-4 — field-sizing on the app's Chromium target);
   the commit pair keeps the row order (Cancel left, primary right), nowrap, centered (optical fix 2). */
.syn-life-holdinput { flex: 1; min-width: var(--syn-life-holdinput-min-width, 220px); border: var(--syn-life-holdinput-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-life-holdinput-border-radius, var(--shape-radius-control)); padding: var(--syn-life-holdinput-padding, 7px 10px); font: var(--syn-life-holdinput-font, 400 11.5px/1.5 var(--type-family)); color: var(--syn-life-holdinput-color, var(--text-body)); background: var(--syn-life-holdinput-background, var(--surface-plane)); outline: none; resize: none; field-sizing: content; min-height: var(--syn-life-holdinput-min-height, 32px); max-height: var(--syn-life-holdinput-max-height, 7.5rem); overflow-y: auto; }   /* Q344: the wrap law's cap */
.syn-life-holdinput:focus { border-color: var(--syn-life-holdinput-focus-border-color, var(--accent-action)); }
.syn-life-holdpair { display: flex; align-items: center; gap: var(--syn-life-holdpair-gap, 10px); align-self: center; flex: none; }
/* Q294(b) — KF-1: the ARMED hold editor is its own full row below the control row (the drawn
   4b-i ARMED lane: input flex:1 wrapping/auto-growing · the pair centered against it), and a
   label + its field wrap as ONE UNIT — never apart (the armed-geometry law). */
.syn-life-holdarm { display: flex; align-items: flex-start; gap: var(--syn-life-holdarm-gap, 10px); margin-top: var(--syn-life-holdarm-margin-top, 8px); }
.syn-life-group { display: inline-flex; align-items: baseline; gap: var(--syn-life-group-gap, 14px); flex: none; }   /* Q398(a) MP-3: the Outcome label + value pair aligns on the BASELINE (box-centering set the 9.5px caps above the value's x-height) */
/* 4a-i: the held banner — the card's first row; tint + rule per the drawn values. */
.syn-life-holdbanner { display: flex; align-items: center; gap: var(--syn-life-holdbanner-gap, 12px); padding: var(--syn-life-holdbanner-padding, 11px 14px); margin: var(--syn-life-holdbanner-margin, -18px -20px 14px); background: var(--syn-life-holdbanner-background, var(--hold-tint)); border-bottom: var(--syn-life-holdbanner-border-bottom, 1px solid var(--hold-seam)); }
.syn-life-holdword { font-size: var(--syn-life-holdword-font-size, 10px); font-weight: var(--syn-life-holdword-font-weight, 700); letter-spacing: var(--syn-life-holdword-letter-spacing, .08em); color: var(--syn-life-holdword-color, var(--state-warning-text)); flex: none; }
.syn-life-holdwords { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--syn-life-holdwords-gap, 2px); }
.syn-life-holdreasontext { font-size: var(--syn-life-holdreasontext-font-size, 13.5px); font-weight: var(--syn-life-holdreasontext-font-weight, 600); color: var(--syn-life-holdreasontext-color, var(--text-ink)); line-height: var(--syn-life-holdreasontext-line-height, 1.45); text-wrap: pretty; cursor: text; border-radius: var(--syn-life-holdreasontext-border-radius, var(--radius-sm)); }
.syn-life-holdreasontext:hover { background: var(--syn-life-holdreasontext-hover-background, var(--surface-hover)); box-shadow: var(--syn-life-holdreasontext-hover-box-shadow, var(--row-halo)); }
.syn-life-holdstamp { font-size: var(--syn-life-holdstamp-font-size, 11.5px); color: var(--syn-life-holdstamp-color, var(--text-tertiary)); }
.syn-life-holdinput.is-banner { flex: none; width: 100%; }
.syn-life-holdpair.is-banner { align-self: flex-start; margin-top: var(--syn-life-holdpair-is-banner-margin-top, 4px); }
.syn-life-liftbtn { font: var(--syn-life-liftbtn-font, 500 11.5px var(--type-family)); color: var(--syn-life-liftbtn-color, var(--text-body)); background: var(--syn-life-liftbtn-background, var(--surface-plane)); border: var(--syn-life-liftbtn-border, 1px solid var(--border-default)); border-radius: var(--syn-life-liftbtn-border-radius, var(--radius-sm)); padding: var(--syn-life-liftbtn-padding, 5px 10px); flex: none; cursor: pointer; white-space: nowrap; }
.syn-life-liftbtn:hover { background: var(--syn-life-liftbtn-hover-background, var(--surface-hover)); }

/* --- F-CUSTOM-1 (2026-07-09): the org-match-with-custom seam (the "new firm" trigger/chip badges were
   dropped as noise, owner 07-09b; the create row keeps its dashed affordance) --- */
.syn-picker-row.is-custom { border-top: var(--syn-picker-row-is-custom-border-top, 1px dashed var(--border-default)); color: var(--syn-picker-row-is-custom-color, var(--text-muted)); font-style: var(--syn-picker-row-is-custom-font-style, italic); }

/* ============================================================================================
   COMPETITION-1 (2026-07-09) — the Market component's second register (Competition.jsx). The
   self-hosted page header, the two blocks (Incumbency rows + Competitor cards), the whole-card
   editors, and the Teaming↔Competition switcher. Tokens where clean; the mockup's specific
   rem/px values kept raw (the cockpit-CSS convention). No removals — purely additive. */

/* --- Page shell (mockup CompetitionPage :487-495) --- */

/* --- Block section + heads (mockup :339 / :459) --- */

/* --- Incumbency row (mockup :313-333) --- */

/* --- Competitor card (mockup :420-452) --- */
/* F2 (07-09b owner ruling): flat always-open analysis bands — the accordion classes below are replaced. */

/* --- Shared row actions + add buttons + empty state --- */

/* --- Whole-card editor chrome (mockup editorCard :152 + fields) --- */

/* Threat segmented selector (mockup :382-385) — active fill/color come from an inline style; the class
   carries the shell, the seam borders, and the active weight. */

/* --- Teaming↔Competition switcher (RegisterView Market arm; provisional IA, owner to rule) --- */

/* ===== F-DIR-2a — Pipeline grid: baseline, density, inactive rows, cells, chooser (UI_SPEC §5.5) ===== */

/* The mockup's grid baseline is 13px (0.8125rem) — whole-grid, flagged in the F-DIR-1 render diff. The
   title cell (font-size: inherit) tracks it automatically. */
.syn-pipeline-grid { font-size: var(--syn-pipeline-grid-font-size, 13px); }

/* Density (mockup Verbose default): verbose wraps; condensed truncates to one line — the flagged-forward
   half of the F-DIR-1 title rule, now reachable via the labeled density control. */
.syn-pipeline-grid.is-dense .syn-cell-title,
.syn-pipeline-grid.is-dense .syn-cell-notes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-pipeline-grid.is-dense .syn-cell-people { flex-wrap: nowrap; overflow: hidden; }
.syn-cell-people { display: inline-flex; gap: var(--syn-cell-people-gap, 4px); flex-wrap: wrap; }

/* Inactive rows (No-Bid / Canceled revealed via the Inactive facet) — de-emphasized per §5.5
   (mockup pl-inactive: tertiary surface + tertiary text). CC token remap (ratified-consequence,
   2026-07-11): the drop named --surface-tertiary/--surface-secondary/--accent/--border-subtle, which
   this repo's single-source tokens.css does not define; mapped 1:1 to the established names it does
   (--bg-tertiary / --bg-hover / --accent-primary / --border-default) so the block renders. */
.syn-pipeline-grid .syn-row-inactive > td { background: var(--syn-pipeline-grid-row-inactive-td-background, var(--surface-inset)); color: var(--syn-pipeline-grid-row-inactive-td-color, var(--text-tertiary)); }
.syn-pipeline-grid .syn-row-inactive .syn-link { color: var(--syn-pipeline-grid-row-inactive-link-color, var(--text-tertiary)); }

/* Collection drill-downs + the notes preview (G-R5): quiet links with the ↗. */
.syn-cell-jump { white-space: nowrap; }
.syn-cell-notes { color: var(--syn-cell-notes-color, var(--text-muted)); text-decoration: var(--syn-cell-notes-text-decoration, none); display: block; max-width: 100%; }
.syn-cell-notes:hover { color: var(--syn-cell-notes-hover-color, var(--accent-action)); }

/* Toolbar: the filter-count pill badge (mockup) + the labeled density segment. */
.syn-toolbtn .syn-badge { background: var(--syn-toolbtn-badge-background, var(--accent-action)); color: var(--syn-toolbtn-badge-color, var(--text-on-accent)); border-radius: var(--syn-toolbtn-badge-border-radius, var(--shape-radius-pill)); font-size: var(--syn-toolbtn-badge-font-size, 10.5px); line-height: var(--syn-toolbtn-badge-line-height, 1); padding: var(--syn-toolbtn-badge-padding, 3px 6px); margin-left: var(--syn-toolbtn-badge-margin-left, 6px); }
.syn-density .syn-seg { display: inline-flex; align-items: center; gap: var(--syn-density-seg-gap, 5px); }

/* Facet rows: per-row All/None + the defaults footer. */
.syn-facet-allnone { margin-left: auto; white-space: nowrap; color: var(--syn-facet-allnone-color, var(--text-tertiary)); font-size: var(--syn-facet-allnone-font-size, var(--text-xs)); }
.syn-linkbtn { background: none; border: none; padding: 0; color: var(--syn-linkbtn-color, var(--accent-action)); font-size: var(--syn-linkbtn-font-size, var(--text-xs)); cursor: pointer; }
.syn-linkbtn:hover { text-decoration: var(--syn-linkbtn-hover-text-decoration, underline); }
.syn-facet-sep { margin: var(--syn-facet-sep-margin, 0 4px); }
.syn-facet-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-facet-foot-gap, var(--space-3)); padding-top: var(--syn-facet-foot-padding-top, var(--space-2)); border-top: var(--syn-facet-foot-border-top, 1px solid var(--border-default)); margin-top: var(--syn-facet-foot-margin-top, var(--space-2)); }

/* The Columns chooser popover (G5). */
.syn-colchooser { padding: var(--syn-colchooser-padding, var(--space-2)); width: var(--syn-colchooser-width, 280px); max-height: var(--syn-colchooser-max-height, 420px); overflow-y: auto; }
.syn-colchooser-head { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-colchooser-head-gap, var(--space-2)); margin-bottom: var(--syn-colchooser-head-margin-bottom, var(--space-2)); }
.syn-colchooser-title { font-weight: var(--syn-colchooser-title-font-weight, 600); font-size: var(--syn-colchooser-title-font-size, var(--text-sm)); }
.syn-colchooser-subhead { color: var(--syn-colchooser-subhead-color, var(--text-tertiary)); font-size: var(--syn-colchooser-subhead-font-size, var(--text-xs)); text-transform: var(--syn-colchooser-subhead-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-colchooser-subhead-letter-spacing, var(--type-label-tracking)); margin: var(--syn-colchooser-subhead-margin, var(--space-2) 0 4px); }
.syn-colchooser-row { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-colchooser-row-gap, var(--space-2)); padding: var(--syn-colchooser-row-padding, 3px 2px); border-radius: var(--syn-colchooser-row-border-radius, var(--radius-sm)); }
.syn-colchooser-row:hover { background: var(--syn-colchooser-row-hover-background, var(--surface-hover)); }
.syn-colchooser-row.is-off .syn-colchooser-name span { color: var(--syn-colchooser-row-is-off-colchooser-name-span-color, var(--text-muted)); }
.syn-colchooser-name { display: inline-flex; align-items: center; gap: var(--syn-colchooser-name-gap, 7px); font-size: var(--syn-colchooser-name-font-size, var(--text-sm)); cursor: pointer; }
.syn-colchooser-actions { display: inline-flex; gap: var(--syn-colchooser-actions-gap, 2px); }
.syn-colchooser-lock { color: var(--syn-colchooser-lock-color, var(--text-tertiary)); font-size: var(--syn-colchooser-lock-font-size, var(--text-xs)); font-style: var(--syn-colchooser-lock-font-style, italic); }
.syn-iconbtn { background: none; border: var(--syn-iconbtn-border, 1px solid var(--border-default)); border-radius: var(--syn-iconbtn-border-radius, var(--radius-xs-plus)); padding: var(--syn-iconbtn-padding, 1px 3px); cursor: pointer; color: var(--syn-iconbtn-color, var(--text-muted)); }
.syn-iconbtn:disabled { opacity: var(--syn-iconbtn-disabled-opacity, .35); cursor: default; }
.syn-iconbtn:not(:disabled):hover { border-color: var(--syn-iconbtn-not-disabled-hover-border-color, var(--border-strong)); color: var(--syn-iconbtn-not-disabled-hover-color, var(--text-ink)); }

/* ===== F-DIR-2b — Pipeline cell editing (G9) ===== */

/* The one edit-on-intent frame, cell presentation (G9-1): no label, compact, full cell width. */
.syn-ef.is-cell { display: block; }
.syn-ef.is-cell .syn-ef-control { width: 100%; }
.syn-ef.is-cell .syn-ef-idle { padding: var(--syn-ef-is-cell-ef-idle-padding, 1px 2px); width: 100%; text-align: left; }
.syn-ef.is-cell .syn-ef-editor { padding: var(--syn-ef-is-cell-ef-editor-padding, 2px); }

/* RefListSelect (G9-2): borderless-at-rest inline variant for grid cells; bordered in forms. */
.syn-rls { display: inline-flex; align-items: center; gap: var(--syn-rls-gap, 5px); background: none; border: var(--syn-rls-border, 1px solid var(--border-default)); border-radius: var(--syn-rls-border-radius, var(--radius-sm)); padding: var(--syn-rls-padding, 3px 8px); cursor: pointer; font-size: var(--ctl-size, 0.75rem); font-family: var(--syn-rls-font-family, var(--type-family)); color: var(--syn-rls-color, var(--text-ink)); }   /* Q360(a): the trigger carries the canonical picker size by construction (EnumSelect's bordered trigger, 0.75rem) — `inherit` let every host size it (the org notes plane read the page base) */
.syn-rls.is-inline { border-color: transparent; padding: var(--syn-rls-is-inline-padding, 1px 4px); }
.syn-rls.is-inline:hover { border-color: var(--syn-rls-is-inline-hover-border-color, var(--border-default)); }
.syn-rls.is-empty { color: var(--syn-rls-is-empty-color, var(--text-tertiary)); }
.syn-rls-pop { padding: var(--syn-rls-pop-padding, var(--space-2)); width: var(--syn-rls-pop-width, 240px); }
.syn-rls-search { width: 100%; margin-bottom: var(--syn-rls-search-margin-bottom, var(--space-2)); }
.syn-rls-options { max-height: var(--syn-rls-options-max-height, 240px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--syn-rls-options-gap, 1px); }
.syn-rls-option { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-rls-option-gap, var(--space-2)); background: none; border: none; text-align: left; padding: var(--syn-rls-option-padding, 5px 7px); border-radius: var(--syn-rls-option-border-radius, var(--radius-sm)); cursor: pointer; font-size: var(--ctl-size, var(--text-sm)); color: var(--syn-rls-option-color, var(--text-ink)); }
.syn-rls-option:hover { background: var(--syn-rls-option-hover-background, var(--surface-hover)); }
.syn-rls-option.is-current { font-weight: var(--syn-rls-option-is-current-font-weight, 600); }
.syn-rls-option.is-custom, .syn-rls-option.is-clear { color: var(--syn-rls-option-is-custom-color, var(--accent-action)); }
.syn-rls-customtag { color: var(--syn-rls-customtag-color, var(--text-tertiary)); font-size: var(--syn-rls-customtag-font-size, var(--text-xs)); font-style: var(--syn-rls-customtag-font-style, italic); }
.syn-rls-empty { color: var(--syn-rls-empty-color, var(--text-tertiary)); font-size: var(--syn-rls-empty-font-size, var(--text-sm)); padding: var(--syn-rls-empty-padding, 5px 7px); }

/* Role cells (G9-4): removable chips + the quiet "+ assign" picker. */
.syn-rolechip { display: inline-flex; align-items: center; gap: var(--syn-rolechip-gap, 2px); }
.syn-rolechip-x { display: none; background: none; border: none; padding: var(--syn-rolechip-x-padding, 0 2px); cursor: pointer; color: var(--syn-rolechip-x-color, var(--text-tertiary)); }
.syn-rolechip:hover .syn-rolechip-x { display: inline-flex; }
.syn-rolechip-x:hover { color: var(--syn-rolechip-x-hover-color, var(--state-attention)); }
.syn-roleadd .syn-pickerbtn { border-color: transparent; padding: var(--syn-roleadd-pickerbtn-padding, 1px 4px); color: var(--syn-roleadd-pickerbtn-color, var(--text-tertiary)); font-size: var(--syn-roleadd-pickerbtn-font-size, var(--text-xs)); }
.syn-roleadd .syn-pickerbtn:hover { border-color: var(--syn-roleadd-pickerbtn-hover-border-color, var(--border-default)); color: var(--syn-roleadd-pickerbtn-hover-color, var(--text-ink)); }
.syn-pipeline-grid.is-dense .syn-roleadd { display: none; }   /* condensed rows: chips only */

/* F-DIR-2b-fix */
/* G9-8: give the in-cell estimable editor breathing room; the popover floats regardless. */
.syn-pipe-grid .syn-ef.is-cell .syn-ef-editwrap { min-width: var(--syn-pipe-grid-ef-is-cell-ef-editwrap-min-width, 150px); }   /* retargeted from the removed P1 pilot scope */
/* G9-6: the reference-list popover's custom-entry row. */
.syn-ms-customrow { display: flex; gap: var(--syn-ms-customrow-gap, 4px); padding: var(--syn-ms-customrow-padding, 5px 4px 2px); border-top: var(--syn-ms-customrow-border-top, 1px solid var(--border-default)); margin-top: var(--syn-ms-customrow-margin-top, 4px); }
.syn-ms-custominput { flex: 1; font-size: var(--syn-ms-custominput-font-size, var(--text-sm)); }
.syn-ms-customadd { background: none; border: var(--syn-ms-customadd-border, 1px solid var(--border-default)); border-radius: var(--syn-ms-customadd-border-radius, var(--radius-sm)); padding: var(--syn-ms-customadd-padding, 2px 6px); cursor: pointer; color: var(--syn-ms-customadd-color, var(--text-muted)); }
.syn-ms-customadd:disabled { opacity: var(--syn-ms-customadd-disabled-opacity, .35); cursor: default; }
.syn-ms-customadd:not(:disabled):hover { color: var(--syn-ms-customadd-not-disabled-hover-color, var(--text-ink)); border-color: var(--syn-ms-customadd-not-disabled-hover-border-color, var(--text-tertiary)); }

/* ===== F-DIR-2c — Pipeline grid fidelity (G10) ===== */
/* (Finding 1's header rules and the forced left-align lived on the vendor grid's classes; the renderer's own
   grammar carries both since UD19 — ListRenderer.razor.css. [AF-82] dropped the dead block.) */
/* Finding 5: people cells stack Avatar + medium-weight name per person (mockup PeopleCell verbose). */
.syn-pipeline-grid .syn-cell-people { display: flex; flex-direction: column; align-items: flex-start; gap: var(--syn-pipeline-grid-cell-people-gap, 3px); }
.syn-ref-avatar { display: inline-flex; align-items: center; gap: var(--syn-ref-avatar-gap, 6px); font-weight: var(--syn-ref-avatar-font-weight, 500); text-decoration: var(--syn-ref-avatar-text-decoration, none); color: var(--syn-ref-avatar-color, var(--text-ink)); }
.syn-ref-avatar:hover { color: var(--syn-ref-avatar-hover-color, var(--accent-action)); }
.syn-pipeline-grid.is-dense .syn-cell-people { flex-direction: row; flex-wrap: nowrap; overflow: hidden; }
/* Finding 5: the add affordance is the mockup's plain tertiary "+ assign" — the picker trigger sheds its box. */
.syn-roleadd .syn-pickerbtn { border: none; background: none; padding: 0; color: var(--syn-roleadd-pickerbtn-color, var(--text-tertiary)); font-size: var(--syn-roleadd-pickerbtn-font-size, var(--text-xs)); }
.syn-roleadd .syn-pickerbtn:hover { color: var(--syn-roleadd-pickerbtn-hover-color, var(--accent-action)); }
/* The "+ assign" trigger hides its leading users-icon and its canonical chevron chrome -> plain text
   (mockup Pipeline.jsx:298). (Q342(b) T10: the stale pre-canon chevron-class narrative died here.) */
.syn-roleadd .syn-pickerbtn .syn-icon, .syn-roleadd .syn-pickerbtn .syn-chevron { display: none; }
/* Q348: the quiet "+ Add role" link-face never needs the closed-trigger floor — its label is chrome-short. */
/* THE PICKER FLOOR (Finding 6 -> Q341 P5 -> QB76, Ken's punch PL-P7 2026-08-27 — the org picker's one-
   character-per-line collapse, image 6): every searchable picker popup (Person / Org / Experience / TOPR
   / MultiSelect) carries this floor UNCONDITIONALLY — matched seats take max(anchor, floor) through the
   positioner, so a popup is NEVER constrained by its host column; long members wrap inside it. 320 =
   the icon + name + role chip + check row at a readable measure (the mockup's 196 was a chip-less
   person list; the shell's 160 is a menu floor, not a picker's). */
.syn-picker-floor { min-width: var(--syn-picker-floor-min-width, 320px); }
/* G10-2 (G9-8 cure, CC-authored, reviewer-approved): the floating in-cell editor sizes to its
   content. Q341 (V1/V4): capped — it never sizes to an outlier value; the date label wraps. */
.syn-ef.is-cell .syn-ef-editor { width: max-content; max-width: var(--syn-ef-is-cell-ef-editor-max-width, min(520px, calc(100vw - 16px))); }

/* ===== G10-9 — quiet pill (opt-in via PillQuiet; the five Pipeline grid enum cells) ===== */
/* Rest-state fidelity to the mockup's label-only <Pill> (Pipeline.jsx:92): dot + chevron are the
   inline-edit affordance, hidden at rest and revealed on intent — the EditableField hover-pencil precedent.
   Flex-item display:none collapses the gap so the resting pill is label-only; inline-flex restores them. */
/* Q342(b) (CHEVRON-CANON T7): since Q301 the chevron sits in the `.syn-chevron` span — the old `> .syn-icon`
   selector missed it and the quiet pill's chevron rendered at rest; the rule now names the chrome. */
.syn-enum-pill.is-quiet .syn-enum-pilldot,
.syn-enum-pill.is-quiet > .syn-chevron { display: none; }
.syn-enum-pill.is-quiet:hover .syn-enum-pilldot,
.syn-enum-pill.is-quiet:focus-visible .syn-enum-pilldot,
.syn-enum-pill.is-quiet.is-open .syn-enum-pilldot,
.syn-enum-pill.is-quiet:hover > .syn-chevron,
.syn-enum-pill.is-quiet:focus-visible > .syn-chevron,
.syn-enum-pill.is-quiet.is-open > .syn-chevron { display: inline-flex; }

/* ===== F-DIR-3 · People — ResumeViewer completion + profile fidelity (People.jsx) ===== */
.syn-modal-headactions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--syn-modal-headactions-gap, var(--space-2)); flex-shrink: 0; }
.syn-rvm-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--syn-rvm-bar-gap, var(--space-2)); padding: var(--syn-rvm-bar-padding, var(--space-3) var(--space-4)); margin: var(--syn-rvm-bar-margin, calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0); border-bottom: var(--syn-rvm-bar-border-bottom, 1px solid var(--border-default)); background: var(--syn-rvm-bar-background, var(--bg-secondary)); }
.syn-rvm-lbl { font-size: var(--syn-rvm-lbl-font-size, 11.5px); font-weight: var(--syn-rvm-lbl-font-weight, var(--font-semibold)); text-transform: var(--syn-rvm-lbl-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-rvm-lbl-letter-spacing, var(--type-label-tracking)); color: var(--syn-rvm-lbl-color, var(--text-tertiary)); }
.syn-rvm-chip { display: inline-flex; align-items: center; gap: var(--syn-rvm-chip-gap, 6px); font-size: var(--syn-rvm-chip-font-size, var(--text-sm)); font-weight: var(--syn-rvm-chip-font-weight, var(--font-medium)); padding: var(--syn-rvm-chip-padding, 4px 10px); border-radius: var(--syn-rvm-chip-border-radius, var(--radius-nav)); border: none; background: transparent; color: var(--syn-rvm-chip-color, var(--text-muted)); cursor: pointer; }
.syn-rvm-chip.is-current { background: var(--syn-rvm-chip-is-current-background, var(--surface-plane)); box-shadow: var(--syn-rvm-chip-is-current-box-shadow, var(--chip-inset-ring)); color: var(--syn-rvm-chip-is-current-color, var(--text-ink)); }
.syn-rvm-chip.is-dim { opacity: var(--syn-rvm-chip-is-dim-opacity, 0.4); }
.syn-rvm-chip:disabled { cursor: default; }
.syn-rvm-status { font-size: var(--syn-rvm-status-font-size, 11.5px); }
.syn-rvm-spacer { flex: 1; }
.syn-rvm-src { display: inline-flex; align-items: center; gap: var(--syn-rvm-src-gap, 5px); font-size: var(--syn-rvm-src-font-size, var(--text-sm)); color: var(--syn-rvm-src-color, var(--accent-action)); }
.syn-rvm-src.is-none { color: var(--syn-rvm-src-is-none-color, var(--text-tertiary)); }
.syn-rvm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--syn-rvm-meta-gap, var(--space-3)); padding: var(--syn-rvm-meta-padding, var(--space-3) 0); margin-bottom: var(--syn-rvm-meta-margin-bottom, var(--space-2)); border-bottom: var(--syn-rvm-meta-border-bottom, 1px solid var(--border-default)); font-size: var(--syn-rvm-meta-font-size, var(--text-sm)); color: var(--syn-rvm-meta-color, var(--text-muted)); }
.syn-rvm-metafield { display: inline-flex; align-items: center; gap: var(--syn-rvm-metafield-gap, 6px); }
.syn-rvm-labelinput { max-width: var(--syn-rvm-labelinput-max-width, 160px); }
.syn-rvm-years { display: inline-flex; align-items: center; gap: var(--syn-rvm-years-gap, 6px); }
.syn-rvm-years-n { font-size: var(--syn-rvm-years-n-font-size, var(--text-base)); font-weight: var(--syn-rvm-years-n-font-weight, var(--font-semibold)); color: var(--syn-rvm-years-n-color, var(--text-ink)); }
.syn-emp-card { background: var(--syn-emp-card-background, var(--bg-secondary)); border: var(--syn-emp-card-border, 1px solid var(--border-default)); border-radius: var(--syn-emp-card-border-radius, var(--shape-radius-control)); padding: var(--syn-emp-card-padding, 11px); margin-bottom: var(--syn-emp-card-margin-bottom, 10px); }
.syn-emp-cardhead { display: flex; align-items: center; gap: var(--syn-emp-cardhead-gap, var(--space-2)); margin-bottom: var(--syn-emp-cardhead-margin-bottom, 7px); }
.syn-emp-caption { font-size: var(--syn-emp-caption-font-size, 11.5px); font-weight: var(--syn-emp-caption-font-weight, var(--font-semibold)); text-transform: var(--syn-emp-caption-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-emp-caption-letter-spacing, var(--type-label-tracking)); color: var(--syn-emp-caption-color, var(--text-tertiary)); }
.syn-pos-caption { display: block; margin: var(--syn-pos-caption-margin, 0 0 7px 2px); }
.syn-editrow { display: flex; align-items: flex-start; gap: var(--syn-editrow-gap, var(--space-2)); flex-wrap: wrap; margin-bottom: var(--syn-editrow-margin-bottom, 7px); }
.syn-editrow .syn-grow { flex: 1 1 160px; }
.syn-editrow .syn-w130 { flex: 0 0 130px; }
.syn-pos-edit { border-left: var(--syn-pos-edit-border-left, 2px solid var(--accent-muted)); padding-left: var(--syn-pos-edit-padding-left, 11px); margin-bottom: var(--syn-pos-edit-margin-bottom, var(--space-3)); }
.syn-pos-badge { display: inline-flex; width: var(--syn-pos-badge-width, 18px); height: var(--syn-pos-badge-height, 18px); border-radius: var(--syn-pos-badge-border-radius, var(--radius-xs-plus)); background: var(--syn-pos-badge-background, var(--accent-muted)); color: var(--syn-pos-badge-color, var(--accent-action-active)); align-items: center; justify-content: center; flex-shrink: 0; margin-top: var(--syn-pos-badge-margin-top, 8px); }
.syn-daterange-sep { color: var(--syn-daterange-sep-color, var(--text-tertiary)); padding-top: var(--syn-daterange-sep-padding-top, 7px); }
.syn-datefield { display: inline-flex; flex-direction: column; gap: var(--syn-datefield-gap, 2px); }
.syn-datefield-lbl { font-size: var(--syn-datefield-lbl-font-size, 11.5px); color: var(--syn-datefield-lbl-color, var(--text-tertiary)); }
.syn-datefield-hint { font-size: var(--syn-datefield-hint-font-size, 11.5px); color: var(--syn-datefield-hint-color, var(--text-tertiary)); padding-left: var(--syn-datefield-hint-padding-left, 2px); }
.syn-addlink { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--syn-addlink-gap, 4px); font-size: var(--syn-addlink-font-size, var(--text-xs)); color: var(--syn-addlink-color, var(--accent-action)); border: none; background: transparent; padding: 0; cursor: pointer; }
.syn-adddashed { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--syn-adddashed-gap, 5px); font-size: var(--syn-adddashed-font-size, var(--text-sm)); font-weight: var(--syn-adddashed-font-weight, var(--font-medium)); color: var(--syn-adddashed-color, var(--accent-action)); border: var(--syn-adddashed-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-adddashed-border-radius, var(--shape-radius-control)); padding: var(--syn-adddashed-padding, 7px 12px); background: transparent; cursor: pointer; margin-top: var(--syn-adddashed-margin-top, var(--space-2)); }
.syn-rvm-oqhint { margin: var(--syn-rvm-oqhint-margin, -4px 0 var(--space-2)); }
.syn-resume-dup { visibility: hidden; border: none; background: transparent; color: var(--syn-resume-dup-color, var(--text-tertiary)); padding: var(--syn-resume-dup-padding, 3px); border-radius: var(--syn-resume-dup-border-radius, var(--radius-sm)); display: inline-flex; cursor: pointer; }
.syn-resume-row:hover .syn-resume-dup, .syn-resume-dup:focus-visible { visibility: visible; }
.syn-resume-dup:hover { background: var(--syn-resume-dup-hover-background, var(--surface-hover)); color: var(--syn-resume-dup-hover-color, var(--text-muted)); }
.syn-foot-left { margin-right: auto; }
.syn-name-edit-stack { display: flex; flex-direction: column; gap: var(--syn-name-edit-stack-gap, var(--space-2)); max-width: var(--syn-name-edit-stack-max-width, 460px); }
.syn-check-block { border-top: var(--syn-check-block-border-top, 1px solid var(--border-default)); padding-top: var(--syn-check-block-padding-top, var(--space-3)); display: flex; flex-direction: column; gap: var(--syn-check-block-gap, var(--space-1)); }
.syn-check-main { display: flex; flex-direction: column; }
.syn-check-label { font-size: var(--syn-check-label-font-size, var(--text-sm)); font-weight: var(--syn-check-label-font-weight, var(--font-medium)); color: var(--syn-check-label-color, var(--text-ink)); }
.syn-access-caption { font-size: var(--syn-access-caption-font-size, 11.5px); color: var(--syn-access-caption-color, var(--text-tertiary)); }
.syn-listrow.is-past { opacity: var(--syn-listrow-is-past-opacity, 0.7); }

/* ===== F-DIR-3b · resume-version delete + integer years (G12-1/G12-3) ===== */
.syn-resume-delwrap { display: inline-flex; }
.syn-resume-row .syn-inlinedel { opacity: var(--syn-resume-row-inlinedel-opacity, 0); transition: var(--syn-resume-row-inlinedel-transition, opacity var(--motion-duration-fast) var(--motion-easing)); }
.syn-resume-row:hover .syn-inlinedel, .syn-resume-row .syn-inlinedel:focus-visible { opacity: var(--syn-resume-row-hover-inlinedel-opacity, 1); }
.syn-foot-left { display: inline-flex; align-items: center; gap: var(--syn-foot-left-gap, var(--space-2)); }

/* ===== F-CTRL-1 · DateTimePicker typed entry + month/year selector ===== */
/* Q181 (C2/C3): typed entry is PRIMARY — the input wears the focused-field look (accent border
   + ring, 600 13 ink) with the parse-teaching helper line under it. */
.syn-dtp-typed { width: 100%; box-sizing: border-box; padding: var(--syn-dtp-typed-padding, 8px 11px); border: var(--syn-dtp-typed-border, 1px solid var(--accent-action)); border-radius: var(--syn-dtp-typed-border-radius, var(--shape-radius-control)); box-shadow: var(--syn-dtp-typed-box-shadow, var(--accent-ring-soft)); font-size: var(--syn-dtp-typed-font-size, 0.8125rem); font-weight: var(--syn-dtp-typed-font-weight, 600); font-family: inherit; color: var(--syn-dtp-typed-color, var(--text-ink)); background: var(--syn-dtp-typed-background, var(--surface-plane)); outline: none; }
.syn-dtp-typed.is-invalid { border-color: var(--syn-dtp-typed-is-invalid-border-color, var(--state-attention)); color: var(--syn-dtp-typed-is-invalid-color, var(--state-attention)); }
.syn-dtp-typedhelp { font-size: var(--syn-dtp-typedhelp-font-size, 0.65625rem); font-weight: var(--syn-dtp-typedhelp-font-weight, 400); color: var(--syn-dtp-typedhelp-color, var(--text-faint)); margin: var(--syn-dtp-typedhelp-margin, 5px 1px 12px); }

/* ===== MonthYearPopover — THE canonical month/year door popover (QB86; canon delta 5, r38-5b; comp mc-pursuit-trueups) ===== */
.syn-popover.syn-myp-pop { width: var(--syn-popover-myp-pop-width, 236px); box-sizing: border-box; border-color: var(--syn-popover-myp-pop-border-color, var(--border-emphasis)); border-radius: var(--syn-popover-myp-pop-border-radius, var(--radius-md-plus)); padding: var(--syn-popover-myp-pop-padding, 10px); }
.syn-myp-head { display: flex; align-items: center; gap: var(--syn-myp-head-gap, 6px); padding: var(--syn-myp-head-padding, 0 2px 8px); }
.syn-myp-step { appearance: none; border: none; background: transparent; display: inline-flex; padding: var(--syn-myp-step-padding, 3px); border-radius: var(--syn-myp-step-border-radius, var(--radius-sm)); color: var(--syn-myp-step-color, var(--text-tertiary)); cursor: pointer; }
.syn-myp-step:hover { background: var(--syn-myp-step-hover-background, var(--surface-hover)); color: var(--syn-myp-step-hover-color, var(--text-ink)); }
.syn-myp-year { flex: 1; text-align: center; font: var(--syn-myp-year-font, 600 0.8125rem var(--type-family)); color: var(--syn-myp-year-color, var(--text-ink)); font-variant-numeric: var(--syn-myp-year-font-variant-numeric, tabular-nums); }
.syn-myp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--syn-myp-grid-gap, 4px); }
/* the transparent border keeps the ring and the pill at IDENTICAL geometry — no reflow on selection (r38-5b) */
.syn-myp-m { appearance: none; background: transparent; text-align: center; font: var(--syn-myp-m-font, 500 0.71875rem var(--type-family)); color: var(--syn-myp-m-color, var(--text-body)); padding: var(--syn-myp-m-padding, 6px 0); border: var(--syn-myp-m-border, 1px solid transparent); border-radius: var(--syn-myp-m-border-radius, var(--radius-sm)); box-sizing: border-box; cursor: pointer; }
.syn-myp-m:hover { background: var(--syn-myp-m-hover-background, var(--surface-hover)); }
.syn-myp-m.is-cur { border-color: var(--syn-myp-m-is-cur-border-color, var(--border-emphasis)); }
.syn-myp-m.is-sel, .syn-myp-m.is-sel:hover { background: var(--syn-myp-m-is-sel-background, var(--text-ink)); color: var(--syn-myp-m-is-sel-color, var(--text-on-ink)); font-weight: var(--syn-myp-m-is-sel-font-weight, 600); }
.syn-myp-foot { display: flex; justify-content: center; padding: var(--syn-myp-foot-padding, 8px 0 0); border-top: var(--syn-myp-foot-border-top, 1px solid var(--border-hairline)); margin-top: var(--syn-myp-foot-margin-top, 8px); }
.syn-myp-today { appearance: none; border: none; background: none; font: var(--syn-myp-today-font, 500 0.71875rem var(--type-family)); color: var(--syn-myp-today-color, var(--text-body)); padding: var(--syn-myp-today-padding, 2px 6px); border-radius: var(--syn-myp-today-border-radius, var(--radius-xs-plus)); cursor: pointer; }
.syn-myp-today:hover { background: var(--syn-myp-today-hover-background, var(--surface-hover)); color: var(--syn-myp-today-hover-color, var(--text-ink)); }

/* ===== F-DIR-4 · People directory — treatment-B grid (G12-4) ===== */
.syn-dir-grid { font-size: var(--syn-dir-grid-font-size, 13px); }
/* (The header text and cell rhythm once rode the vendor grid's custom properties here; the renderer's own grammar
   carries them since UD19 — ListRenderer.razor.css. [AF-82] dropped the dead block.) */
.syn-dir-grid tbody tr { cursor: pointer; }
.syn-dir-grid tbody tr:hover { background-color: var(--syn-dir-grid-tbody-tr-hover-background-color, var(--tinted-inset)); }   /* QB2 (R10 27a): the whole-row door lifts to --tinted-inset */
.syn-dir-empty { padding: var(--syn-dir-empty-padding, 28px); text-align: center; font-size: var(--syn-dir-empty-font-size, var(--text-sm)); color: var(--syn-dir-empty-color, var(--text-tertiary)); }

/* ===== F-DIR-6 · Organizations — engagement sections (F-ORG-1) ===== */
.syn-eng + .syn-eng { border-top: var(--syn-eng-eng-border-top, 1px solid var(--border-default)); padding-top: var(--syn-eng-eng-padding-top, 14px); margin-top: var(--syn-eng-eng-margin-top, 14px); }
.syn-eng-head { display: flex; align-items: center; gap: var(--syn-eng-head-gap, 9px); margin-bottom: var(--syn-eng-head-margin-bottom, 8px); }
.syn-eng-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-eng-stage { font-size: var(--syn-eng-stage-font-size, 11.5px); font-weight: var(--syn-eng-stage-font-weight, var(--font-medium)); min-width: var(--syn-eng-stage-min-width, 60px); text-align: right; }
.syn-eng-nest { padding-left: var(--syn-eng-nest-padding-left, 12px); border-left: var(--syn-eng-nest-border-left, 2px solid var(--border-default)); display: flex; flex-direction: column; gap: var(--syn-eng-nest-gap, var(--space-2)); }
.syn-eng-caption { display: block; font-size: var(--syn-eng-caption-font-size, 11.5px); font-weight: var(--syn-eng-caption-font-weight, var(--font-semibold)); text-transform: var(--syn-eng-caption-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-eng-caption-letter-spacing, var(--type-label-tracking)); color: var(--syn-eng-caption-color, var(--text-tertiary)); margin-bottom: var(--syn-eng-caption-margin-bottom, 5px); }
.syn-eng-caption.is-success { color: var(--syn-eng-caption-is-success-color, var(--state-success)); }
.syn-eng-caption-gap { margin-top: var(--syn-eng-caption-gap-margin-top, var(--space-3)); }
.syn-eng-row { display: flex; align-items: center; gap: var(--syn-eng-row-gap, var(--space-2)); font-size: var(--syn-eng-row-font-size, var(--text-xs)); padding: var(--syn-eng-row-padding, 2px 0); }

/* ==== People directory cells (PeopleTemplates; mockup People.jsx:689-701) ==== */
/* UD9 (exp-dir 5.2, list-class-wide): the td's text-overflow cannot reach into this nested flex
   wrapper, so long names HARD-CLIPPED mid-glyph — the ref itself now carries the ellipsis floor
   (shrinkable; badges/riders beside it stay whole). Q347's org-dir 4.4 child-combinator twin died
   at the merge resolve — this descendant rule is the superset (Cowork, 2026-08-21). */
.syn-cell-name { display: flex; align-items: center; gap: var(--syn-cell-name-gap, 9px); min-width: 0; max-width: 100%; }
.syn-cell-name .syn-ref { flex: 0 1 auto; min-width: 0; }   /* UD19: the register (R6) and the wrap/ellipsis are the renderer's row-primary seat, by density */
.syn-cell-zero { color: var(--syn-cell-zero-color, var(--text-rider)); }   /* UD9 (exp-dir 5.10): the comp's faint-zero count register */
/* Q347 (A5 org-dir 4.6 / org-profile 11.4): the ONE org role reads as the quiet bordered chip on the
   tinted inset — the 21a chip species (500 11px/19px, r6, --border-default). Named .syn-orgrole: the
   older .syn-rolechip is the KP role editor's removable chip, a different species. UD27 (Relay 37
   delta 1): the PROFILE's seat only — the directory grid renders the role as plain ink. */
.syn-orgrole { display: inline-block; border: var(--syn-orgrole-border, 1px solid var(--border-default)); border-radius: var(--syn-orgrole-border-radius, var(--radius-sm)); background: var(--syn-orgrole-background, var(--tinted-inset)); padding: var(--syn-orgrole-padding, 0 8px); font: var(--syn-orgrole-font, 500 11.5px/19px var(--type-family)); color: var(--syn-orgrole-color, var(--text-body)); white-space: nowrap; }
/* MERGE RESOLVE (Cowork, 2026-08-21): Q347's org-dir 3.3 rest-scent ::after (unscoped, :has-keyed)
   was the THIRD seat of the one sort-scent feature — it died the same death as ui-b's (HB-UD9-3):
   UD9's DirectoryShell.razor.css seat is the one seat. Whether the scent should reach beyond the
   directories (Pipeline, org-profile section grids) is a Ken/CD scope question, riding the Ken-eye
   batch — never a second selector. */
/* Q347 (A5 org-profile 11.8): the one-line address grain. */
.syn-addr.is-oneline { display: inline; }
.syn-cell-inactive { font: var(--syn-cell-inactive-font, var(--type-c4)); font-weight: var(--syn-cell-inactive-font-weight, 400); color: var(--syn-cell-inactive-color, var(--text-tertiary)); }   /* UD19: the rider at C4's size */
.syn-cell-muted { color: var(--syn-cell-muted-color, var(--text-faint)); }
/* UD27 (Relay 37 delta 1, THE GRID SIGNAL ECONOMY): the toned cell species that had no caller — a success-inked
   presence check, a stage-toned KP dot, an accent-inked count — are deleted; color in a grid row sits in four seats
   only (the actionable id link · the stage dot · the pW band tone · the DUE grade, red = overdue). */
.syn-cell-plain { font-weight: var(--syn-cell-plain-font-weight, 400); color: var(--syn-cell-plain-color, var(--text-body)); }   /* QB2 (R10 27a) body cell; UD19: the size is the renderer's cell role (R5) */
.syn-pill { display: inline-flex; align-items: center; padding: var(--syn-pill-padding, 2px 9px); border-radius: var(--syn-pill-border-radius, var(--shape-radius-pill)); font-size: var(--syn-pill-font-size, 0.71875rem); font-weight: var(--syn-pill-font-weight, 500); background: var(--syn-pill-background, var(--surface-inset)); color: var(--syn-pill-color, var(--text-muted)); white-space: nowrap; }
.syn-pill.accent { background: var(--syn-pill-accent-background, var(--accent-muted)); color: var(--syn-pill-accent-color, var(--accent-action-active)); }
.syn-pill.kp { background: var(--syn-pill-kp-background, color-mix(in srgb, var(--category-8) 14%, var(--mix-white))); color: var(--syn-pill-kp-color, var(--category-8)); }

/* ==== Person profile (PersonProfile + Parts; spec block in the page header comment) ==== */
.syn-person-grid { display: grid; grid-template-columns: var(--syn-person-grid-grid-template-columns, minmax(0,1fr) 352px); gap: var(--syn-person-grid-gap, var(--space-4)); align-items: start; }   /* Q132 (2a) */
.syn-person-col { display: flex; flex-direction: column; gap: var(--syn-person-col-gap, var(--space-4)); min-width: 0; }
/* (The Q4/Q6/Q8 scoped row-label uppercase patches lived here — superseded by the app-wide
   .syn-fieldrow-label grain, [REBUILD-P2-14].) */
/* Q132 (2a): 44px avatar centered on the block; name 700 24px + ONE meta line of words. */
.syn-person-head { display: flex; align-items: center; gap: var(--syn-person-head-gap, 14px); }
.syn-person-head-main { flex: 1; min-width: 0; }
.syn-person-h1 { font-size: var(--syn-person-h1-font-size, 1.5rem); font-weight: var(--syn-person-h1-font-weight, 700); line-height: var(--syn-person-h1-line-height, 1.25); margin: 0; letter-spacing: var(--syn-person-h1-letter-spacing, -0.01em); }
.syn-person-metaline { font-size: var(--syn-person-metaline-font-size, 0.8125rem); color: var(--syn-person-metaline-color, var(--text-muted)); margin-top: var(--syn-person-metaline-margin-top, 3px); }
.syn-person-metaline a { font-weight: var(--syn-person-metaline-a-font-weight, 400); }
/* Q92: detail-title spec (700 24px/1.25); de-pilled header meta. */
.syn-person-head-edit { display: flex; flex-direction: column; gap: var(--syn-person-head-edit-gap, 8px); max-width: var(--syn-person-head-edit-max-width, 460px); }
.syn-person-nameinputs { display: flex; gap: var(--syn-person-nameinputs-gap, 8px); }
.syn-person-nameinputs > * { flex: 1; min-width: 0; }
.syn-person-actions { display: flex; gap: var(--syn-person-actions-gap, 8px); }
.syn-person-error { color: var(--syn-person-error-color, var(--state-attention)); font-size: var(--syn-person-error-font-size, var(--text-xs)); }
.syn-person-rows > * + * { border-top: var(--syn-person-rows-border-top, 1px solid var(--border-default)); }
.syn-person-assignrow { display: flex; align-items: center; gap: var(--syn-person-assignrow-gap, 9px); padding: var(--syn-person-assignrow-padding, 9px 0); }
.syn-person-assignname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-person-assignroles { display: flex; gap: var(--syn-person-assignroles-gap, 4px); }
.syn-person-assignstage { font-size: var(--syn-person-assignstage-font-size, 0.71875rem); min-width: var(--syn-person-assignstage-min-width, 64px); text-align: right; font-weight: var(--syn-person-assignstage-font-weight, 500); }
.syn-person-taskrow { display: flex; align-items: center; gap: var(--syn-person-taskrow-gap, 9px); font-size: var(--syn-person-taskrow-font-size, 0.8125rem); padding: var(--syn-person-taskrow-padding, 7px 0); }
.syn-person-taskdot { width: var(--syn-person-taskdot-width, 5px); height: var(--syn-person-taskdot-height, 5px); border-radius: var(--syn-person-taskdot-border-radius, var(--shape-radius-pill)); background: var(--syn-person-taskdot-background, var(--text-tertiary)); flex-shrink: 0; }
.syn-person-tasktitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-person-taskref .syn-ref { font-size: var(--syn-person-taskref-ref-font-size, 0.71875rem); color: var(--syn-person-taskref-ref-color, var(--text-tertiary)); }
.syn-person-taskdue { font-size: var(--syn-person-taskdue-font-size, 0.71875rem); width: var(--syn-person-taskdue-width, 96px); text-align: right; font-variant-numeric: var(--syn-person-taskdue-font-variant-numeric, tabular-nums); color: var(--syn-person-taskdue-color, var(--text-muted)); display: inline-flex; align-items: center; gap: var(--syn-person-taskdue-gap, 4px); justify-content: flex-end; }
/* Q92 (§5): the urgency ladder — red reserved for overdue. */
.syn-person-taskdue.is-overdue { color: var(--syn-person-taskdue-is-overdue-color, var(--state-attention-text)); font-weight: var(--syn-person-taskdue-is-overdue-font-weight, 700); }
.syn-person-taskdue.is-urgent { color: var(--syn-person-taskdue-is-urgent-color, var(--text-ink)); font-weight: var(--syn-person-taskdue-is-urgent-font-weight, 700); }
.syn-person-taskdue.is-warn { color: var(--syn-person-taskdue-is-warn-color, var(--due-warn)); font-weight: var(--syn-person-taskdue-is-warn-font-weight, 600); }
.syn-person-taskdue.is-far { color: var(--syn-person-taskdue-is-far-color, var(--due-far)); font-weight: var(--syn-person-taskdue-is-far-font-weight, 500); }
.syn-person-taskdue.is-none { color: var(--syn-person-taskdue-is-none-color, var(--text-faint)); }
.syn-person-ooohelp { font-size: var(--syn-person-ooohelp-font-size, 0.75rem); color: var(--syn-person-ooohelp-color, var(--text-tertiary)); margin-bottom: var(--syn-person-ooohelp-margin-bottom, 12px); line-height: var(--syn-person-ooohelp-line-height, 1.5); }
.syn-person-ooorow { display: flex; align-items: center; gap: var(--syn-person-ooorow-gap, 10px); padding: var(--syn-person-ooorow-padding, 8px 0); }
.syn-person-ooorow.is-past { opacity: var(--syn-person-ooorow-is-past-opacity, 0.7); }
.syn-person-ooospan { flex: 1; font-size: var(--syn-person-ooospan-font-size, 0.8125rem); }
.syn-person-ooonote { color: var(--syn-person-ooonote-color, var(--text-tertiary)); }
.syn-person-oooadd { display: flex; flex-direction: column; gap: var(--syn-person-oooadd-gap, 8px); }
.syn-person-oooadd.has-rows { padding-top: var(--syn-person-oooadd-has-rows-padding-top, 12px); margin-top: var(--syn-person-oooadd-has-rows-margin-top, 4px); border-top: var(--syn-person-oooadd-has-rows-border-top, 1px solid var(--border-default)); }
.syn-person-oooaddrow { display: flex; gap: var(--syn-person-oooaddrow-gap, 8px); }
.syn-person-oooaddrow label { flex: 1; display: flex; flex-direction: column; gap: var(--syn-person-oooaddrow-label-gap, 4px); font-size: var(--syn-person-oooaddrow-label-font-size, 0.71875rem); color: var(--syn-person-oooaddrow-label-color, var(--text-tertiary)); }
.syn-person-emptyline { font-size: var(--syn-person-emptyline-font-size, 0.8125rem); color: var(--syn-person-emptyline-color, var(--text-tertiary)); }
.syn-person-resumerow { display: flex; align-items: center; gap: var(--syn-person-resumerow-gap, 10px); padding: var(--syn-person-resumerow-padding, 8px 0); cursor: pointer; }
.syn-person-resumerow:hover { background: var(--syn-person-resumerow-hover-background, var(--bg-secondary)); }
.syn-person-resumelabel { flex: 1; font-size: var(--syn-person-resumelabel-font-size, 0.8125rem); min-width: 0; }
.syn-person-resumedate { color: var(--syn-person-resumedate-color, var(--text-tertiary)); }
.syn-person-resumeactions { display: none; align-items: center; gap: var(--syn-person-resumeactions-gap, 2px); }
.syn-person-resumerow:hover .syn-person-resumeactions { display: inline-flex; }
.syn-person-togglerows { border-top: var(--syn-person-togglerows-border-top, 1px solid var(--border-default)); padding-top: var(--syn-person-togglerows-padding-top, 12px); display: flex; flex-direction: column; gap: var(--syn-person-togglerows-gap, 4px); }
.syn-person-togglerow { display: flex; align-items: flex-start; gap: var(--syn-person-togglerow-gap, 9px); cursor: pointer; padding: var(--syn-person-togglerow-padding, 4px 0); }
.syn-person-togglelabel { font-size: var(--syn-person-togglelabel-font-size, 0.84375rem); display: block; }
.syn-person-togglehint { display: block; font-size: var(--syn-person-togglehint-font-size, 0.75rem); color: var(--syn-person-togglehint-color, var(--text-tertiary)); margin-top: var(--syn-person-togglehint-margin-top, 1px); }
.syn-person-skillslabel { font-size: var(--syn-person-skillslabel-font-size, 0.71875rem); font-weight: var(--syn-person-skillslabel-font-weight, 600); text-transform: var(--syn-person-skillslabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-person-skillslabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-person-skillslabel-color, var(--text-tertiary)); display: block; margin-bottom: var(--syn-person-skillslabel-margin-bottom, 5px); }
.syn-person-managed { font-size: var(--syn-person-managed-font-size, 0.71875rem); color: var(--syn-person-managed-color, var(--text-tertiary)); }

/* ==== Resume viewer modal (ResumeViewerModal + segments; mockup People.jsx:1049-1221).
   The version bar and meta line bleed to the modal edges (negative margins vs the
   .syn-modal-body padding), matching the mockup's full-width separators. ==== */
.syn-resume-versionbar { display: flex; align-items: center; gap: var(--syn-resume-versionbar-gap, 8px); padding: var(--syn-resume-versionbar-padding, 11px 18px); border-bottom: var(--syn-resume-versionbar-border-bottom, 1px solid var(--border-default)); background: var(--syn-resume-versionbar-background, var(--bg-secondary)); flex-wrap: wrap; margin: var(--syn-resume-versionbar-margin, -12px -18px 0); }   /* Q249: bleeds to the R10 inner (18px; the 12px head gap) */
.syn-resume-verlabel { font-size: var(--syn-resume-verlabel-font-size, 0.71875rem); font-weight: var(--syn-resume-verlabel-font-weight, 600); text-transform: var(--syn-resume-verlabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-resume-verlabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-resume-verlabel-color, var(--text-tertiary)); }
.syn-resume-verchips { display: flex; align-items: center; gap: var(--syn-resume-verchips-gap, 8px); flex-wrap: wrap; }
.syn-resume-verchip { display: inline-flex; align-items: center; gap: var(--syn-resume-verchip-gap, 6px); font-size: var(--syn-resume-verchip-font-size, 0.78125rem); font-weight: var(--syn-resume-verchip-font-weight, 500); padding: var(--syn-resume-verchip-padding, 4px 10px); border-radius: var(--syn-resume-verchip-border-radius, var(--radius-nav)); border: none; background: transparent; color: var(--syn-resume-verchip-color, var(--text-muted)); cursor: pointer; }
.syn-resume-verchip:disabled { opacity: var(--syn-resume-verchip-disabled-opacity, 0.4); cursor: default; }
.syn-resume-verchip.is-current { background: var(--syn-resume-verchip-is-current-background, var(--surface-plane)); box-shadow: var(--syn-resume-verchip-is-current-box-shadow, var(--chip-inset-ring)); color: var(--syn-resume-verchip-is-current-color, var(--text-ink)); }
.syn-resume-verchip.is-current:disabled { opacity: var(--syn-resume-verchip-is-current-disabled-opacity, 1); }
.syn-resume-verstatus { font-size: var(--syn-resume-verstatus-font-size, 0.65625rem); }
.syn-resume-vernew { display: inline-flex; align-items: center; gap: var(--syn-resume-vernew-gap, 5px); font-size: var(--syn-resume-vernew-font-size, 0.78125rem); font-weight: var(--syn-resume-vernew-font-weight, 500); padding: var(--syn-resume-vernew-padding, 4px 10px); border-radius: var(--syn-resume-vernew-border-radius, var(--shape-radius-pill)); border: var(--syn-resume-vernew-border, 1px dashed var(--border-emphasis)); background: transparent; color: var(--syn-resume-vernew-color, var(--text-muted)); cursor: pointer; }   /* Q132 (2b): dashed pill */
.syn-resume-vernew:hover:not(:disabled) { background: var(--syn-resume-vernew-hover-not-disabled-background, var(--surface-inset)); }
.syn-resume-vernew:disabled { opacity: var(--syn-resume-vernew-disabled-opacity, 0.4); cursor: default; }
.syn-resume-source { margin-left: auto; display: inline-flex; align-items: center; gap: var(--syn-resume-source-gap, 7px); font-size: var(--syn-resume-source-font-size, 0.78125rem); color: var(--syn-resume-source-color, var(--text-muted)); }
.syn-resume-sourcelink { display: inline-flex; align-items: center; gap: var(--syn-resume-sourcelink-gap, 5px); font-size: var(--syn-resume-sourcelink-font-size, 0.78125rem); color: var(--syn-resume-sourcelink-color, var(--accent-action)); text-decoration: var(--syn-resume-sourcelink-text-decoration, none); }
.syn-resume-sourcelink:hover { text-decoration: var(--syn-resume-sourcelink-hover-text-decoration, underline); }
.syn-resume-nosource { display: inline-flex; align-items: center; gap: var(--syn-resume-nosource-gap, 5px); color: var(--syn-resume-nosource-color, var(--text-tertiary)); }
/* QB45 (C6): the source filename WRAPS under a reasonable cap — never clipped mid-name. */
.syn-resume-sourcefile { display: inline-flex; align-items: center; gap: var(--syn-resume-sourcefile-gap, 7px); max-width: var(--syn-resume-sourcefile-max-width, 320px); white-space: normal; overflow-wrap: anywhere; }
.syn-resume-upload { display: inline-flex; align-items: center; gap: var(--syn-resume-upload-gap, 5px); font-size: var(--syn-resume-upload-font-size, 0.78125rem); font-weight: var(--syn-resume-upload-font-weight, 500); border: var(--syn-resume-upload-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-resume-upload-border-radius, var(--radius-nav)); padding: var(--syn-resume-upload-padding, 4px 10px); background: transparent; color: var(--syn-resume-upload-color, var(--text-muted)); }
.syn-resume-upload:disabled { opacity: var(--syn-resume-upload-disabled-opacity, 0.55); cursor: not-allowed; }
.syn-resume-meta { display: flex; align-items: center; gap: var(--syn-resume-meta-gap, 10px); padding: var(--syn-resume-meta-padding, 10px 18px); border-bottom: var(--syn-resume-meta-border-bottom, 1px solid var(--border-default)); font-size: var(--syn-resume-meta-font-size, 0.78125rem); color: var(--syn-resume-meta-color, var(--text-muted)); flex-wrap: wrap; margin: var(--syn-resume-meta-margin, 0 -18px); }
.syn-resume-metaleft { display: inline-flex; align-items: center; gap: var(--syn-resume-metaleft-gap, 10px); flex-wrap: wrap; }
.syn-resume-metaleft .syn-input { width: var(--syn-resume-metaleft-input-width, 160px); }
.syn-resume-metadate { font-size: var(--syn-resume-metadate-font-size, 0.78125rem); }
.syn-resume-years { margin-left: auto; display: inline-flex; align-items: center; gap: var(--syn-resume-years-gap, 6px); }
.syn-resume-yearslabel { font-size: var(--syn-resume-yearslabel-font-size, 0.71875rem); font-weight: var(--syn-resume-yearslabel-font-weight, 600); text-transform: var(--syn-resume-yearslabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-resume-yearslabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-resume-yearslabel-color, var(--text-tertiary)); }
.syn-resume-yearsvalue { font: var(--syn-resume-yearsvalue-font, var(--type-f3)); line-height: inherit; font-variant-numeric: var(--syn-resume-yearsvalue-font-variant-numeric, tabular-nums); color: var(--syn-resume-yearsvalue-color, var(--text-ink)); }   /* Q132 (2b): the pane's one figure · UD24: F3 ops-figure (the ratified 650->600 fold) */
.syn-resume-body { padding-top: var(--syn-resume-body-padding-top, 8px); }
.syn-resume-seghead { font-size: var(--syn-resume-seghead-font-size, 0.71875rem); font-weight: var(--syn-resume-seghead-font-weight, 600); text-transform: var(--syn-resume-seghead-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-resume-seghead-letter-spacing, var(--type-label-tracking)); color: var(--syn-resume-seghead-color, var(--text-tertiary)); margin: var(--syn-resume-seghead-margin, 18px 0 8px); }
.syn-resume-segment:first-child .syn-resume-seghead { margin-top: var(--syn-resume-segment-first-child-resume-seghead-margin-top, 10px); }
.syn-resume-employer { border-left: var(--syn-resume-employer-border-left, 2px solid var(--border-default)); padding-left: var(--syn-resume-employer-padding-left, 14px); margin-bottom: var(--syn-resume-employer-margin-bottom, 16px); }
.syn-resume-employer.is-editing { margin-bottom: var(--syn-resume-employer-is-editing-margin-bottom, 20px); }
.syn-resume-emp-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--syn-resume-emp-headrow-gap, 10px); margin-bottom: var(--syn-resume-emp-headrow-margin-bottom, 4px); }
.syn-resume-emp-head { font-size: var(--syn-resume-emp-head-font-size, 0.90625rem); font-weight: var(--syn-resume-emp-head-font-weight, 600); }
.syn-resume-emp-card { background: var(--syn-resume-emp-card-background, var(--bg-secondary)); border: var(--syn-resume-emp-card-border, 1px solid var(--border-default)); border-radius: var(--syn-resume-emp-card-border-radius, var(--shape-radius-control)); padding: var(--syn-resume-emp-card-padding, 11px); margin-bottom: var(--syn-resume-emp-card-margin-bottom, 10px); }
.syn-resume-emp-row { display: flex; gap: var(--syn-resume-emp-row-gap, 8px); align-items: center; flex-wrap: wrap; }
.syn-resume-emp-row + .syn-resume-emp-row { margin-top: var(--syn-resume-emp-row-resume-emp-row-margin-top, 8px); }
.syn-resume-emp-row .syn-input { flex: 1; min-width: var(--syn-resume-emp-row-input-min-width, 140px); }
.syn-resume-range { font-size: var(--syn-resume-range-font-size, 0.71875rem); color: var(--syn-resume-range-color, var(--text-tertiary)); white-space: nowrap; font-variant-numeric: var(--syn-resume-range-font-variant-numeric, tabular-nums); }
.syn-resume-positions-label { font-size: var(--syn-resume-positions-label-font-size, 0.65625rem); font-weight: var(--syn-resume-positions-label-font-weight, 600); text-transform: var(--syn-resume-positions-label-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-resume-positions-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-resume-positions-label-color, var(--text-tertiary)); margin: var(--syn-resume-positions-label-margin, 7px 0 7px 2px); }
.syn-resume-position { display: grid; grid-template-columns: 1fr auto; column-gap: var(--syn-resume-position-column-gap, 10px); align-items: baseline; margin: var(--syn-resume-position-margin, 0 0 9px 2px); }
.syn-resume-position > :nth-child(n+3) { grid-column: 1 / -1; }
.syn-resume-pos-title { font-size: var(--syn-resume-pos-title-font-size, 0.8125rem); font-weight: var(--syn-resume-pos-title-font-weight, 500); color: var(--syn-resume-pos-title-color, var(--text-ink)); }   /* Q132 (2g): current title is the only 600 */
.syn-resume-pos-row { display: flex; gap: var(--syn-resume-pos-row-gap, 8px); align-items: center; flex-wrap: wrap; margin-bottom: var(--syn-resume-pos-row-margin-bottom, 7px); border-left: var(--syn-resume-pos-row-border-left, 2px solid var(--accent-muted)); padding-left: var(--syn-resume-pos-row-padding-left, 11px); }
.syn-resume-pos-row .syn-input { flex: 1; min-width: var(--syn-resume-pos-row-input-min-width, 140px); }
.syn-resume-addtitle { display: inline-flex; align-items: center; gap: var(--syn-resume-addtitle-gap, 4px); font-size: var(--syn-resume-addtitle-font-size, 0.75rem); color: var(--syn-resume-addtitle-color, var(--accent-action)); border: none; background: transparent; padding: 0; cursor: pointer; }
.syn-resume-addemployer { display: inline-flex; align-items: center; gap: var(--syn-resume-addemployer-gap, 5px); font-size: var(--syn-resume-addemployer-font-size, 0.78125rem); font-weight: var(--syn-resume-addemployer-font-weight, 500); color: var(--syn-resume-addemployer-color, var(--accent-action)); border: var(--syn-resume-addemployer-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-resume-addemployer-border-radius, var(--shape-radius-control)); padding: var(--syn-resume-addemployer-padding, 7px 12px); background: transparent; cursor: pointer; }
.syn-resume-hint { font-size: var(--syn-resume-hint-font-size, 0.71875rem); color: var(--syn-resume-hint-color, var(--text-tertiary)); }
.syn-resume-edu-list { margin: 0; padding-left: var(--syn-resume-edu-list-padding-left, 18px); }
.syn-resume-edu-list li { font-size: var(--syn-resume-edu-list-li-font-size, 0.8125rem); line-height: var(--syn-resume-edu-list-li-line-height, 1.7); }
.syn-resume-edu-row { display: flex; gap: var(--syn-resume-edu-row-gap, 8px); align-items: center; margin-bottom: var(--syn-resume-edu-row-margin-bottom, 8px); }
.syn-resume-edu-row .syn-input { flex: 1; min-width: var(--syn-resume-edu-row-input-min-width, 120px); }
.syn-resume-chiprow { display: flex; gap: var(--syn-resume-chiprow-gap, 6px); flex-wrap: wrap; }
.syn-resume-none { font-size: var(--syn-resume-none-font-size, 0.8125rem); color: var(--syn-resume-none-color, var(--text-tertiary)); }
.syn-resume-helper { font-size: var(--syn-resume-helper-font-size, 0.75rem); color: var(--syn-resume-helper-color, var(--text-tertiary)); margin: var(--syn-resume-helper-margin, -4px 0 8px); line-height: var(--syn-resume-helper-line-height, 1.5); }
.syn-resume-foot { display: flex; gap: var(--syn-resume-foot-gap, 8px); margin-right: auto; }

/* ==== Organizations (OrganizationProfile + Parts + modals; contract transcribed verbatim from
   the OrganizationProfile.razor header comment — Tranche B seam 6) ==== */
.syn-org-col          { display:flex; flex-direction:column; gap:var(--syn-org-col-gap, var(--space-4)); min-width:0; }
.syn-org-head         { display:flex; align-items:flex-start; gap:var(--syn-org-head-gap, 16px); }
.syn-org-head-main    { flex:1; min-width:0; }
.syn-org-titlerow     { display:flex; align-items:center; gap:var(--syn-org-titlerow-gap, 10px); flex-wrap:wrap; }
.syn-org-titlerow h1  { font-size:var(--syn-org-titlerow-h1-font-size, 1.5rem); font-weight:var(--syn-org-titlerow-h1-font-weight, 700); line-height:var(--syn-org-titlerow-h1-line-height, 1.25); margin:0; letter-spacing:var(--syn-org-titlerow-h1-letter-spacing, -0.02em); }   /* Q93 detail-title spec */
.syn-org-subline      { font-size:var(--syn-org-subline-font-size, 0.875rem); color:var(--syn-org-subline-color, var(--text-muted)); margin-top:var(--syn-org-subline-margin-top, 4px); display:flex; align-items:center; gap:var(--syn-org-subline-gap, 10px); flex-wrap:wrap; }
.syn-org-actions      { display:flex; gap:var(--syn-org-actions-gap, 8px); }
.syn-org-error        { color:var(--syn-org-error-color, var(--state-attention)); font-size:var(--syn-org-error-font-size, var(--text-xs)); }
.syn-org-rows > * + * { border-top:var(--syn-org-rows-border-top, 1px solid var(--border-default)); }
.syn-org-pocrow       { display:flex; align-items:center; gap:var(--syn-org-pocrow-gap, 10px); padding:var(--syn-org-pocrow-padding, 9px 0); }
.syn-org-pocmain      { flex:1; min-width:0; }
.syn-org-pocname .syn-ref { font-size:var(--syn-org-pocname-ref-font-size, 0.84375rem); }
.syn-org-poctitle     { font-size:var(--syn-org-poctitle-font-size, 0.75rem); color:var(--syn-org-poctitle-color, var(--text-tertiary)); }
.syn-org-pocmeta      { font-size:var(--syn-org-pocmeta-font-size, 0.75rem); color:var(--syn-org-pocmeta-color, var(--text-tertiary)); display:flex; gap:var(--syn-org-pocmeta-gap, 12px); margin-top:var(--syn-org-pocmeta-margin-top, 2px); }
.syn-org-pocmeta .syn-link { display:inline-flex; align-items:center; gap:var(--syn-org-pocmeta-link-gap, 4px); font-weight:var(--syn-org-pocmeta-link-font-weight, 400); }
.syn-org-taskrow      { display:flex; align-items:center; gap:var(--syn-org-taskrow-gap, 9px); font-size:var(--syn-org-taskrow-font-size, 0.8125rem); padding:var(--syn-org-taskrow-padding, 7px 0); }
.syn-org-taskrow.is-done { color:var(--syn-org-taskrow-is-done-color, var(--text-tertiary)); }
.syn-org-taskdot      { width:var(--syn-org-taskdot-width, 5px); height:var(--syn-org-taskdot-height, 5px); border-radius: var(--syn-org-taskdot-border-radius, var(--shape-radius-pill)); background:var(--syn-org-taskdot-background, var(--text-tertiary)); flex-shrink:0; }
.syn-org-tasktitle    { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.syn-org-taskrow.is-done .syn-org-tasktitle { text-decoration:var(--syn-org-taskrow-is-done-org-tasktitle-text-decoration, line-through); }
.syn-org-taskperson   { font-size:var(--syn-org-taskperson-font-size, 0.71875rem); color:var(--syn-org-taskperson-color, var(--text-tertiary)); }
.syn-org-taskref .syn-ref { font-size:var(--syn-org-taskref-ref-font-size, 0.71875rem); color:var(--syn-org-taskref-ref-color, var(--text-tertiary)); }
.syn-org-taskdue      { font-size:var(--syn-org-taskdue-font-size, 0.71875rem); width:var(--syn-org-taskdue-width, 92px); text-align:right; font-variant-numeric:var(--syn-org-taskdue-font-variant-numeric, tabular-nums);
                        color:var(--syn-org-taskdue-color, var(--text-muted)); display:inline-flex; align-items:center; gap:var(--syn-org-taskdue-gap, 4px); justify-content:flex-end; }
.syn-org-taskdue.is-overdue { color:var(--syn-org-taskdue-is-overdue-color, var(--state-attention-text)); font-weight:var(--syn-org-taskdue-is-overdue-font-weight, 700); }   /* Q93 §5: red reserved for overdue */
.syn-org-awardrow     { display:flex; align-items:center; gap:var(--syn-org-awardrow-gap, 9px); padding:var(--syn-org-awardrow-padding, 8px 0); }
.syn-org-awardrow > :first-child { flex:1; min-width:0; }
.syn-org-awardrow .syn-ref { font-size:var(--syn-org-awardrow-ref-font-size, 0.78125rem); }
.syn-org-awardvalue   { font-size:var(--syn-org-awardvalue-font-size, 0.75rem); color:var(--syn-org-awardvalue-color, var(--text-muted)); }
.syn-org-awarddate    { font-size:var(--syn-org-awarddate-font-size, 0.71875rem); color:var(--syn-org-awarddate-color, var(--text-tertiary)); }
/* ── Q384 (CD Relay 36 §7 THE PARTNERED-TOPRS ROW ANATOMY, RATIFIED Ken 2026-08-25): ONE row anatomy, one right edge.
   The TITLE LANE (flex 1, min-width 0) carries the mono ref (inert) + the title door on one baseline and the TEAMING
   AGREEMENT line 6px beneath (label C2 · value 500 12 · the full date 11 disabled); the RIGHT META STACK (flex none,
   132 floor) is a two-column grid — labels share one left edge, values one right edge — WORKSHARE over STAGE, 5px
   rhythm (the manifest's ptr-meta-stack pins); the NEST keeps the 2px rule + 12px indent and hosts KP, Experience,
   AND the vacancy line; rows separate on --border-row; the row is NOT a click target — the title door alone
   navigates (Q374). The Q356/Q357/Q369/Q374 words carry verbatim (OrgEngagementWords). The one home for the row's
   rules (the profile sheet's stragglers moved here). */
.syn-org-englist      { display:flex; flex-direction:column; gap:var(--syn-org-englist-gap, 14px); }
.syn-org-eng + .syn-org-eng { padding-top:var(--syn-org-eng-org-eng-padding-top, 14px); border-top:var(--syn-org-eng-org-eng-border-top, 1px solid var(--border-hairline)); }
.syn-org-enghead      { display:flex; align-items:flex-start; gap:var(--syn-org-enghead-gap, 12px); }
.syn-org-englane      { flex:1; min-width:0; }
.syn-org-engtitle     { display:flex; align-items:baseline; gap:var(--syn-org-engtitle-gap, 10px); min-width:0; }
.syn-org-engref       { flex:none; }
.syn-org-engref .syn-ref { font:var(--syn-org-engref-ref-font, 600 11.5px var(--type-family-mono)); color:var(--syn-org-engref-ref-color, var(--text-ink)); }   /* the mono ref, CHROME (the interest register's .syn-org-ifid seat is its sibling) */
.syn-org-engtitle > .syn-ref { font:var(--syn-org-engtitle-ref-font, var(--type-r6)); color:var(--syn-org-engtitle-ref-color, var(--accent-action)); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* the title door — R6 accent, one-line ellipsis; the lane never pushes the stack */
.syn-org-engta        { display:flex; align-items:baseline; gap:var(--syn-org-engta-gap, 7px); margin-top:var(--syn-org-engta-margin-top, 6px); }
.syn-org-engtalabel   { font:var(--syn-org-engtalabel-font, var(--type-c2)); letter-spacing: var(--syn-org-engtalabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-org-engtalabel-text-transform, var(--type-label-transform)); color:var(--syn-org-engtalabel-color, var(--text-tertiary)); }
.syn-org-engtastatus  { font:var(--syn-org-engtastatus-font, 500 0.75rem var(--type-family)); color:var(--syn-org-engtastatus-color, var(--text-ink)); }
.syn-org-engtadate    { font:var(--syn-org-engtadate-font, 400 0.6875rem var(--type-family)); color:var(--syn-org-engtadate-color, var(--text-faint)); }
.syn-org-engmetas     { flex:none; display:grid; grid-template-columns:max-content max-content; gap:var(--syn-org-engmetas-gap, 5px); align-items:flex-end; justify-content:end; min-width:var(--syn-org-engmetas-min-width, 132px); }
.syn-org-engmetalabel { font:var(--syn-org-engmetalabel-font, var(--type-c2)); letter-spacing: var(--syn-org-engmetalabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-org-engmetalabel-text-transform, var(--type-label-transform)); color:var(--syn-org-engmetalabel-color, var(--text-tertiary)); }
.syn-org-engstage     { justify-self:end; }
.syn-org-engstage .syn-statusdot-wrap { gap:var(--syn-org-engstage-statusdot-wrap-gap, 6px); }
.syn-org-engstage .syn-statusdot { width:var(--syn-org-engstage-statusdot-width, 7px); height:var(--syn-org-engstage-statusdot-height, 7px); }
.syn-org-engstage .syn-statusdot-label { font:var(--syn-org-engstage-statusdot-label-font, var(--type-c4)); color:var(--syn-org-engstage-statusdot-label-color, var(--text-ink)); }   /* the stage word on the C4b rung (row meta) */
.syn-org-engnest      { margin-top:var(--syn-org-engnest-margin-top, 10px); padding-left:var(--syn-org-engnest-padding-left, 12px); border-left:var(--syn-org-engnest-border-left, 2px solid var(--border-default)); display:flex; flex-direction:column; gap:var(--syn-org-engnest-gap, 8px); }
.syn-org-engmicro     { font:var(--syn-org-engmicro-font, 600 9px var(--type-family)); letter-spacing: var(--syn-org-engmicro-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-org-engmicro-text-transform, var(--type-label-transform)); color:var(--syn-org-engmicro-color, var(--text-faint)); margin-bottom:var(--syn-org-engmicro-margin-bottom, 5px); }   /* the A10 meta-word form (Q369(b)'s .syn-org-engkpword) */
.syn-org-engrows      { display:flex; flex-direction:column; gap:var(--syn-org-engrows-gap, 4px); }
.syn-org-engrow       { display:flex; align-items:center; gap:var(--syn-org-engrow-gap, 8px); font-size:var(--syn-org-engrow-font-size, 0.78125rem); }
.syn-org-engrow .syn-ref { font-size:var(--syn-org-engrow-ref-font-size, 0.78125rem); }
.syn-org-engrole      { color:var(--syn-org-engrole-color, var(--text-tertiary)); }
.syn-org-engkpword    { font:var(--syn-org-engkpword-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-org-engkpword-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-org-engkpword-text-transform, var(--type-label-transform)); color:var(--syn-org-engkpword-color, var(--text-faint)); }   /* Q369(b): the ruled small-caps meta word */
.syn-org-engempty     { font:var(--syn-org-engempty-font, var(--type-r7)); color:var(--syn-org-engempty-color, var(--text-tertiary)); }   /* the vacancy line, inside the nest — tense per stage (Q356(d)) */
.syn-org-caption      { font-size:var(--syn-org-caption-font-size, 0.75rem); color:var(--syn-org-caption-color, var(--text-tertiary)); margin-bottom:var(--syn-org-caption-margin-bottom, 8px); line-height:var(--syn-org-caption-line-height, 1.5); }
.syn-org-exprow       { display:flex; align-items:center; gap:var(--syn-org-exprow-gap, 9px); padding:var(--syn-org-exprow-padding, 8px 0); }
.syn-org-expmain      { flex:1; min-width:0; }
.syn-org-expmain .syn-ref { font-size:var(--syn-org-expmain-ref-font-size, 0.8125rem); }
.syn-org-expagency    { font-size:var(--syn-org-expagency-font-size, 0.75rem); color:var(--syn-org-expagency-color, var(--text-tertiary)); }
.syn-org-expvalue     { font-size:var(--syn-org-expvalue-font-size, 0.75rem); color:var(--syn-org-expvalue-color, var(--text-muted)); }
.syn-org-exppop       { font-size:var(--syn-org-exppop-font-size, 0.71875rem); color:var(--syn-org-exppop-color, var(--text-tertiary)); }
.syn-org-capstags     { display:flex; gap:var(--syn-org-capstags-gap, 6px); flex-wrap:wrap; margin-top:var(--syn-org-capstags-margin-top, 12px); }
/* Q326 (the ratified 29a tags-only register — the drawn grey tag chips; the "Capability tags"
   micro-label died with the prose split). Chip: border-default on --bg-hover, 6px radius,
   500 11px/19px body ink; the run wraps at 6px gaps. */
.syn-org-capchips     { display:flex; gap:var(--syn-org-capchips-gap, 6px); flex-wrap:wrap; }
.syn-org-capchip      { border:var(--syn-org-capchip-border, 1px solid var(--border-default)); border-radius: var(--syn-org-capchip-border-radius, var(--radius-sm)); background:var(--syn-org-capchip-background, var(--surface-hover)); padding:var(--syn-org-capchip-padding, 0 8px); font:var(--syn-org-capchip-font, 500 11px/19px var(--type-family)); color:var(--syn-org-capchip-color, var(--text-body)); }
.syn-org-platewrap    { display:flex; justify-content:center; margin-bottom:var(--syn-org-platewrap-margin-bottom, 14px); }
.syn-org-plate        { position:relative; max-width:var(--syn-org-plate-max-width, 220px); background:var(--syn-org-plate-background, var(--surface-plane)); }
.syn-org-plate-fallback { display:inline-flex; align-items:center; gap:var(--syn-org-plate-fallback-gap, 10px); color:var(--syn-org-plate-fallback-color, var(--text-tertiary)); font-size:var(--syn-org-plate-fallback-font-size, 0.78125rem); }
.syn-org-plateactions { position:absolute; top:var(--syn-org-plateactions-top, 6px); right:var(--syn-org-plateactions-right, 6px); display:none; gap:var(--syn-org-plateactions-gap, 4px); }
.syn-org-plate:hover .syn-org-plateactions, .syn-org-plate.is-editing .syn-org-plateactions { display:flex; }
.syn-org-platebtn     { display:inline-flex; align-items:center; gap:var(--syn-org-platebtn-gap, 4px); background:var(--syn-org-platebtn-background, var(--surface-plane)); border:var(--syn-org-platebtn-border, 1px solid var(--border-default));
                        border-radius: var(--syn-org-platebtn-border-radius, var(--radius-sm)); padding:var(--syn-org-platebtn-padding, 3px 7px); font-size:var(--syn-org-platebtn-font-size, 0.71875rem); color:var(--syn-org-platebtn-color, var(--text-muted)); cursor:pointer; }
.syn-org-platebtn[disabled] { opacity:var(--syn-org-platebtn-disabled-opacity, 0.55); cursor:not-allowed; }
.syn-orglogo-fileinput { display: none; }   /* Q153: label-triggered (the resume-lane idiom) */
.syn-org-detailsedit  { display:flex; flex-direction:column; gap:var(--syn-org-detailsedit-gap, 12px); }
.syn-org-kpgroup      { font-size:var(--syn-org-kpgroup-font-size, 0.71875rem); font-weight:var(--syn-org-kpgroup-font-weight, 600); text-transform: var(--syn-org-kpgroup-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-org-kpgroup-letter-spacing, var(--type-label-tracking)); margin-bottom:var(--syn-org-kpgroup-margin-bottom, 6px); }
/* Q93: the Selected heading quiets — muted text + a 6px success dot carries the state. */
.syn-org-kpgroup.is-selected  { color:var(--syn-org-kpgroup-is-selected-color, var(--text-tertiary)); }
.syn-org-kpgroup.is-selected::before { content:""; display:inline-block; width:var(--syn-org-kpgroup-is-selected-before-width, 6px); height:var(--syn-org-kpgroup-is-selected-before-height, 6px); border-radius: var(--syn-org-kpgroup-is-selected-before-border-radius, var(--shape-radius-pill)); background:var(--syn-org-kpgroup-is-selected-before-background, var(--state-success)); margin-right:var(--syn-org-kpgroup-is-selected-before-margin-right, 6px); vertical-align:middle; }
.syn-org-kpgroup.is-candidate { color:var(--syn-org-kpgroup-is-candidate-color, var(--text-tertiary)); margin-top:var(--syn-org-kpgroup-is-candidate-margin-top, 12px); }
.syn-org-kprow        { display:flex; align-items:center; gap:var(--syn-org-kprow-gap, 9px); padding:var(--syn-org-kprow-padding, 7px 0); }
.syn-org-kpmain       { flex:1; min-width:0; }
.syn-org-kpmain .syn-ref { font-size:var(--syn-org-kpmain-ref-font-size, 0.8125rem); }
.syn-org-kprole       { font-size:var(--syn-org-kprole-font-size, 0.75rem); color:var(--syn-org-kprole-color, var(--text-tertiary)); }
.syn-org-kptopr .syn-ref { font-size:var(--syn-org-kptopr-ref-font-size, 0.71875rem); color:var(--syn-org-kptopr-ref-color, var(--text-tertiary)); }
.syn-org-personrow    { display:flex; align-items:center; gap:var(--syn-org-personrow-gap, 9px); padding:var(--syn-org-personrow-padding, 7px 0); }
.syn-org-personrow .syn-ref { font-size:var(--syn-org-personrow-ref-font-size, 0.8125rem); }
.syn-org-personname   { flex:1; min-width:0; }
.syn-org-persontitle  { font-size:var(--syn-org-persontitle-font-size, 0.75rem); color:var(--syn-org-persontitle-color, var(--text-tertiary)); }
.syn-org-introw       { display:flex; align-items:center; gap:var(--syn-org-introw-gap, 10px); padding:var(--syn-org-introw-padding, 11px 2px); cursor:pointer; }
.syn-org-intchev      { flex-shrink:0; transition: var(--syn-org-intchev-transition, transform var(--motion-duration-fast)); }
.syn-org-intchev.is-open { transform:rotate(90deg); }
.syn-org-inttopr      { flex:1; min-width:0; font-size:var(--syn-org-inttopr-font-size, 0.8125rem); }
.syn-org-inttopr .syn-ref { font-size:var(--syn-org-inttopr-ref-font-size, 0.8125rem); }
.syn-org-intunmatched { color:var(--syn-org-intunmatched-color, var(--state-warning)); font-weight:var(--syn-org-intunmatched-font-weight, 500); }
.syn-org-intraw       { color:var(--syn-org-intraw-color, var(--text-tertiary)); }
.syn-org-intmeta      { font-size:var(--syn-org-intmeta-font-size, 0.71875rem); color:var(--syn-org-intmeta-color, var(--text-tertiary)); }
.syn-org-intmeta.is-date { font-variant-numeric:var(--syn-org-intmeta-is-date-font-variant-numeric, tabular-nums); }
.syn-org-intjira      { font-size:var(--syn-org-intjira-font-size, 0.71875rem); display:inline-flex; align-items:center; gap:var(--syn-org-intjira-gap, 3px); }
.syn-org-intbody      { padding:var(--syn-org-intbody-padding, 4px 0 16px 25px); }
.syn-org-intchips     { display:flex; gap:var(--syn-org-intchips-gap, 6px); flex-wrap:wrap; margin-bottom:var(--syn-org-intchips-margin-bottom, 12px); }
.syn-org-intseg       { margin-bottom:var(--syn-org-intseg-margin-bottom, 12px); }
.syn-org-intseg .syn-md { font-size:var(--syn-org-intseg-md-font-size, 0.8125rem); }
.syn-org-emptyline    { font-size:var(--syn-org-emptyline-font-size, 0.8125rem); color:var(--syn-org-emptyline-color, var(--text-tertiary)); }
.syn-org-pkgrows      { display:flex; flex-direction:column; gap:var(--syn-org-pkgrows-gap, 4px); }
.syn-org-pkgrow       { display:flex; align-items:center; gap:var(--syn-org-pkgrow-gap, 10px); padding:var(--syn-org-pkgrow-padding, 9px 10px); border-radius: var(--syn-org-pkgrow-border-radius, var(--shape-radius-control)); cursor:pointer; }
.syn-org-pkgname      { flex:1; font-size:var(--syn-org-pkgname-font-size, 0.84375rem); font-weight:var(--syn-org-pkgname-font-weight, 500); }
.syn-org-pkgsub       { margin:var(--syn-org-pkgsub-margin, 2px 0 6px 36px); padding:var(--syn-org-pkgsub-padding, 8px 12px); border-left:var(--syn-org-pkgsub-border-left, 2px solid var(--border-default)); }
.syn-org-pkgsubcap    { font-size:var(--syn-org-pkgsubcap-font-size, 0.71875rem); color:var(--syn-org-pkgsubcap-color, var(--text-tertiary)); margin-bottom:var(--syn-org-pkgsubcap-margin-bottom, 6px); }
.syn-org-pkggens      { display:flex; gap:var(--syn-org-pkggens-gap, 16px); }
.syn-org-pkggen       { display:inline-flex; align-items:center; gap:var(--syn-org-pkggen-gap, 7px); cursor:pointer; font-size:var(--syn-org-pkggen-font-size, 0.8125rem); }
.syn-org-pkgprose     { margin:var(--syn-org-pkgprose-margin, 0 0 14px); font-size:var(--syn-org-pkgprose-font-size, 0.8125rem); line-height:var(--syn-org-pkgprose-line-height, 1.6); color:var(--syn-org-pkgprose-color, var(--text-muted)); }
.syn-org-pocsearch    { display:flex; align-items:center; gap:var(--syn-org-pocsearch-gap, 8px); border:var(--syn-org-pocsearch-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-org-pocsearch-border-radius, var(--shape-radius-control));
                        padding:var(--syn-org-pocsearch-padding, 8px 11px); box-shadow: var(--syn-org-pocsearch-box-shadow, var(--accent-ring)); }
.syn-org-pocsearch input { flex:1; border:none; outline:none; font-size:var(--syn-org-pocsearch-input-font-size, 0.84375rem); background:transparent; }
.syn-org-poclist      { max-height:var(--syn-org-poclist-max-height, 240px); overflow-y:auto; margin-top:var(--syn-org-poclist-margin-top, 8px); }
.syn-org-pocresult    { display:flex; align-items:center; gap:var(--syn-org-pocresult-gap, 10px); width:100%; text-align:left; padding:var(--syn-org-pocresult-padding, 8px); border:none;
                        border-radius: var(--syn-org-pocresult-border-radius, var(--shape-radius-control)); background:transparent; cursor:pointer; }
.syn-org-pocresult:hover { background:var(--syn-org-pocresult-hover-background, var(--surface-hover)); }
.syn-org-pocresult-main { flex:1; min-width:0; }
.syn-org-pocresult-name { font-size:var(--syn-org-pocresult-name-font-size, 0.84375rem); font-weight:var(--syn-org-pocresult-name-font-weight, 500); }
.syn-org-pocresult-sub  { font-size:var(--syn-org-pocresult-sub-font-size, 0.75rem); color:var(--syn-org-pocresult-sub-color, var(--text-tertiary)); }
.syn-org-pocnone      { padding:var(--syn-org-pocnone-padding, 14px 8px); font-size:var(--syn-org-pocnone-font-size, 0.8125rem); color:var(--syn-org-pocnone-color, var(--text-tertiary)); }
.syn-org-createband   { display:flex; align-items:center; gap:var(--syn-org-createband-gap, 12px); margin:var(--syn-org-createband-margin, 12px -20px -16px); padding:var(--syn-org-createband-padding, 12px 20px 18px);
                        border-top:var(--syn-org-createband-border-top, 1px solid var(--border-default)); background:var(--syn-org-createband-background, var(--bg-secondary)); }
.syn-org-createband-text { flex:1; font-size:var(--syn-org-createband-text-font-size, 0.78125rem); color:var(--syn-org-createband-text-color, var(--text-muted)); line-height:var(--syn-org-createband-text-line-height, 1.4); }
.syn-org-microheading { font-size:var(--syn-org-microheading-font-size, 0.71875rem); font-weight:var(--syn-org-microheading-font-weight, 600); text-transform: var(--syn-org-microheading-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-org-microheading-letter-spacing, var(--type-label-tracking)); color:var(--syn-org-microheading-color, var(--text-tertiary)); margin-bottom:var(--syn-org-microheading-margin-bottom, 8px); }

/* Role toggle pills (OrgRoleToggles note; visual from Organizations.jsx:587). */
.syn-rolepills { display: flex; flex-wrap: wrap; gap: var(--syn-rolepills-gap, var(--space-2)); }
.syn-rolepill {
    padding: var(--syn-rolepill-padding, 5px 11px); border-radius: var(--syn-rolepill-border-radius, var(--shape-radius-pill)); font-size: var(--syn-rolepill-font-size, 0.78125rem); font-weight: var(--syn-rolepill-font-weight, 500);
    cursor: pointer; border: var(--syn-rolepill-border, 1px solid var(--border-default)); background: var(--syn-rolepill-background, var(--surface-plane));
    color: var(--syn-rolepill-color, var(--text-muted));
}
.syn-rolepill.is-on { border-color: var(--syn-rolepill-is-on-border-color, var(--accent-action)); background: var(--syn-rolepill-is-on-background, var(--accent-action)); color: var(--syn-rolepill-is-on-color, var(--text-on-accent)); }

/* Locked field row (AddPersonModal POC flow — org preset by the caller, not editable). */
.syn-field-locked { font-size: var(--syn-field-locked-font-size, 0.84375rem); padding: var(--syn-field-locked-padding, 2px 0); }

/* ==== Experience (ExperienceRecord + Parts; contract transcribed verbatim from the
        ExperienceRecord.razor header note — Experience.jsx:1236-1377). Directory/timeline CSS is
        collocated (ExperienceDirectory.razor.css / RecencyTimeline.razor.css); the CPARS block
        reuses the existing syn-cpars-* rules above. ==== */
.syn-exp-head       { display:flex; align-items:flex-start; gap:var(--syn-exp-head-gap, 16px); }
.syn-exp-headmain   { flex:1; min-width:0; }
.syn-exp-metrics    { margin-top:var(--syn-exp-metrics-margin-top, 14px); }   /* mockup :1285 — strip drop below the chip row */
.syn-exp-titlerow   { display:flex; align-items:center; gap:var(--syn-exp-titlerow-gap, 9px); margin-bottom:var(--syn-exp-titlerow-margin-bottom, 7px); }
.syn-exp-titlerow h1 { font-size:var(--syn-exp-titlerow-h1-font-size, 1.5rem); font-weight:var(--syn-exp-titlerow-h1-font-weight, 700); margin:0; letter-spacing:var(--syn-exp-titlerow-h1-letter-spacing, -0.02em); line-height:var(--syn-exp-titlerow-h1-line-height, 1.25); }   /* Q94 detail-title spec */
/* Edit-mode title input (PersonHeader idiom): standard input grain, bounded like the 460px name column. */
.syn-exp-titlerow .syn-exp-titleinput { flex:1 1 auto; max-width:var(--syn-exp-titlerow-exp-titleinput-max-width, 460px); }
.syn-exp-actions    { display:flex; align-items:center; gap:var(--syn-exp-actions-gap, 8px); flex-shrink:0; }
.syn-exp-chiprow    { display:flex; align-items:center; gap:var(--syn-exp-chiprow-gap, 10px); flex-wrap:wrap; font-size:var(--syn-exp-chiprow-font-size, 0.84375rem); color:var(--syn-exp-chiprow-color, var(--text-muted)); }
.syn-exp-perf       { font-weight:var(--syn-exp-perf-font-weight, 600); min-width:0; }
.syn-exp-perf .syn-ref { font-weight:var(--syn-exp-perf-ref-font-weight, 600); }
.syn-exp-dot        { color:var(--syn-exp-dot-color, var(--text-tertiary)); }
.syn-exp-client     { display:inline-flex; align-items:center; gap:var(--syn-exp-client-gap, 4px); flex-wrap:wrap; line-height:var(--syn-exp-client-line-height, 1.5); }
.syn-exp-crumb      { color:var(--syn-exp-crumb-color, var(--text-ink)); }
.syn-exp-famtag     { color:var(--syn-exp-famtag-color, var(--text-tertiary)); font-weight:var(--syn-exp-famtag-font-weight, 400); }
.syn-exp-freetag    { margin-left:var(--syn-exp-freetag-margin-left, 6px); font-size:var(--syn-exp-freetag-font-size, 0.65625rem); color:var(--syn-exp-freetag-color, var(--text-tertiary)); }
.syn-exp-cols       { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--syn-exp-cols-gap, 20px); align-items:start; }
@media (max-width:880px) { .syn-exp-cols { grid-template-columns:1fr; } }
.syn-exp-col        { display:flex; flex-direction:column; gap:var(--syn-exp-col-gap, var(--space-4)); min-width:0; }
.syn-exp-rows > * + * { border-top:var(--syn-exp-rows-border-top, 1px solid var(--border-default)); }
.syn-exp-stack      { font-size:var(--syn-exp-stack-font-size, 0.78125rem); color:var(--syn-exp-stack-color, var(--text-muted)); margin-top:var(--syn-exp-stack-margin-top, 2px); }
.syn-exp-desc       { font-size:var(--syn-exp-desc-font-size, 0.75rem); color:var(--syn-exp-desc-color, var(--text-tertiary)); margin-top:var(--syn-exp-desc-margin-top, 3px); line-height:var(--syn-exp-desc-line-height, 1.5); }
.syn-exp-popnote    { font-size:var(--syn-exp-popnote-font-size, 0.75rem); color:var(--syn-exp-popnote-color, var(--state-warning)); margin-top:var(--syn-exp-popnote-margin-top, 3px); display:inline-flex; align-items:flex-start; gap:var(--syn-exp-popnote-gap, 5px); line-height:var(--syn-exp-popnote-line-height, 1.5); }
.syn-exp-popnote .syn-icon { margin-top:var(--syn-exp-popnote-icon-margin-top, 2px); flex-shrink:0; }
.syn-exp-money      { font-weight:var(--syn-exp-money-font-weight, 500); }
.syn-exp-chips      { display:flex; gap:var(--syn-exp-chips-gap, 6px); flex-wrap:wrap; }
.syn-exp-custflag   { margin-left:var(--syn-exp-custflag-margin-left, 3px); font-size:var(--syn-exp-custflag-font-size, 0.59375rem); color:var(--syn-exp-custflag-color, var(--text-tertiary)); }
.syn-exp-refrow     { margin-bottom:var(--syn-exp-refrow-margin-bottom, 14px); }
.syn-exp-refrow:last-child { margin-bottom:0; }
.syn-exp-reflabel   { font-size:var(--syn-exp-reflabel-font-size, 0.71875rem); font-weight:var(--syn-exp-reflabel-font-weight, 600); text-transform: var(--syn-exp-reflabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-exp-reflabel-letter-spacing, var(--type-label-tracking)); color:var(--syn-exp-reflabel-color, var(--text-tertiary)); margin-bottom:var(--syn-exp-reflabel-margin-bottom, 6px); }
.syn-exp-empty      { font-size:var(--syn-exp-empty-font-size, 0.8125rem); color:var(--syn-exp-empty-color, var(--text-tertiary)); }
.syn-exp-error      { color:var(--syn-exp-error-color, var(--state-attention)); font-size:var(--syn-exp-error-font-size, var(--text-xs)); margin-top:var(--syn-exp-error-margin-top, 6px); }
.syn-exp-rowlist    { display:flex; flex-direction:column; gap:var(--syn-exp-rowlist-gap, 6px); }
.syn-exp-subrow     { display:flex; align-items:center; gap:var(--syn-exp-subrow-gap, 6px); }
.syn-exp-subpick    { flex:1; min-width:0; }
.syn-exp-addlink    { align-self:flex-start; display:inline-flex; align-items:center; gap:var(--syn-exp-addlink-gap, 5px); font-size:var(--syn-exp-addlink-font-size, 0.78125rem); color:var(--syn-exp-addlink-color, var(--accent-action)); border:none; background:transparent; padding:0; cursor:pointer; }
.syn-exp-addlink.is-quiet { color:var(--syn-exp-addlink-is-quiet-color, var(--text-muted)); }
.syn-exp-ch         { display:flex; flex-direction:column; gap:var(--syn-exp-ch-gap, 8px); }
.syn-exp-chrow      { display:flex; align-items:center; gap:var(--syn-exp-chrow-gap, 6px); }
.syn-exp-chnum      { font-size:var(--syn-exp-chnum-font-size, 0.65625rem); font-weight:var(--syn-exp-chnum-font-weight, 600); color:var(--syn-exp-chnum-color, var(--text-tertiary)); width:var(--syn-exp-chnum-width, 14px); text-align:right; flex-shrink:0; }
.syn-exp-chpick     { flex:1; min-width:0; }
.syn-exp-chmove     { display:flex; flex-shrink:0; }
.syn-exp-chbtn      { border:none; background:transparent; padding:var(--syn-exp-chbtn-padding, 3px); color:var(--syn-exp-chbtn-color, var(--text-tertiary)); cursor:pointer; display:inline-flex; }
.syn-exp-chbtn[disabled] { color:var(--syn-exp-chbtn-disabled-color, var(--text-faint)); cursor:default; }
.syn-exp-chactions  { display:flex; gap:var(--syn-exp-chactions-gap, 14px); flex-wrap:wrap; }
.syn-exp-sam        { border:var(--syn-exp-sam-border, 1px solid var(--border-default)); border-radius: var(--syn-exp-sam-border-radius, var(--shape-radius-control)); background:var(--syn-exp-sam-background, var(--bg-secondary)); padding:var(--syn-exp-sam-padding, 11px); display:flex; flex-direction:column; gap:var(--syn-exp-sam-gap, 6px); }
.syn-exp-samhint    { font-size:var(--syn-exp-samhint-font-size, 0.71875rem); color:var(--syn-exp-samhint-color, var(--text-tertiary)); line-height:var(--syn-exp-samhint-line-height, 1.45); }
.syn-exp-samactions { display:flex; justify-content:flex-end; gap:var(--syn-exp-samactions-gap, 8px); }
/* UD9 (4.2/4.3/4.4): the explain line, the accent ToprRef row, and the volume sub-line DIED —
   the drawn row (mono number + plain title, the whole row a door) lives in ExperienceRecord.razor.css. */
.syn-exp-selrows > * + * { border-top:var(--syn-exp-selrows-border-top, 1px solid var(--border-default)); }
.syn-exp-selrow     { padding:var(--syn-exp-selrow-padding, 9px 0); }

/* Create modal (Q8 finding; Experience.jsx:1543 — gridTemplateColumns "1fr 1fr" inside the 560px
   modal): the shared identity-grid's 560px container threshold sits just ABOVE this modal's inner
   width, which left it one column. Scoped 2-col; Wide fields still span via the shared is-wide rule. */
.syn-exp-create .syn-identity-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.syn-field-locked .syn-field-lockednote { color: var(--syn-field-locked-field-lockednote-color, var(--text-tertiary)); font-size: var(--syn-field-locked-field-lockednote-font-size, 0.75rem); }

/* ── App shell + nav rail — Q209: TRANSPLANTED from the R10 shell package (manifest verbatim;
   `design/claude-design/Round 10 Handback/shell/`). The rail is CHROME class throughout
   (nav-rail text never scales — literal px). Two-tone shell: --bg-rail ground (RATIFIED Ken
   2026-08-17). Both collapse postures live in the one markup — `.is-collapsed` selects between
   them so the toggle snaps fully client-side (motion posture: none). Membership [REBUILD-P8-2]. ── */

.syn-shell        { display: flex; min-height: 100vh; }
.syn-shell-main   { flex: 1 1 auto; min-width: 0; }

.syn-rail { width: var(--syn-rail-width, 208px); flex: none; border-right: var(--syn-rail-border-right, 1px solid var(--border-default));
            background: var(--syn-rail-background, var(--surface-rail)); padding: var(--syn-rail-padding, 32px 12px 16px); display: flex; flex-direction: column;
            gap: var(--syn-rail-gap, 1px); box-sizing: border-box; font-size: var(--syn-rail-font-size, 16px); line-height: normal; color: var(--syn-rail-color, var(--text-ink));
            position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.syn-rail.is-collapsed { width: var(--syn-rail-is-collapsed-width, 56px); padding: var(--syn-rail-is-collapsed-padding, 32px 8px 16px); align-items: center; }

/* Rail head (20b): brand chevrons (NavRail verbatim, the one-off brand gradient) + wordmark 500 12px
   --text-body (2d iii) + the quiet collapse control (lucide panel-left-close 15px, 4px pad, r6). */
.syn-rail-head { display: flex; align-items: center; gap: var(--syn-rail-head-gap, 9px); padding: var(--syn-rail-head-padding, 4px 8px 18px); }
.syn-rail.is-collapsed .syn-rail-head { display: none; }
.syn-rail-brand { display: flex; align-items: center; gap: var(--syn-rail-brand-gap, 9px); min-width: 0; color: inherit; text-decoration: var(--syn-rail-brand-text-decoration, none); }
.syn-rail-brand:hover { color: inherit; text-decoration: var(--syn-rail-brand-hover-text-decoration, none); }
.syn-rail-brandmark { flex: none; }
.syn-rail-wordmark { font: var(--syn-rail-wordmark-font, var(--type-heading)); color: var(--syn-rail-wordmark-color, var(--text-ink)); white-space: nowrap; }   /* p-top-bar (row 181): the wordmark at the bar's size and weight (J1a, J3a) */
.syn-rail-headspacer { flex: 1; }
.syn-rail-collapse { display: inline-flex; padding: var(--syn-rail-collapse-padding, 4px); border-radius: var(--syn-rail-collapse-border-radius, var(--radius-sm)); border: none; background: transparent;
                     color: inherit; cursor: pointer; }
.syn-rail-collapse .syn-icon { color: var(--syn-rail-collapse-icon-color, var(--text-tertiary)); }
.syn-rail-collapse:hover { background: var(--syn-rail-collapse-hover-background, var(--surface-hover)); }
/* COLLAPSED (20b; ruling 34): the 28px bordered expander ALONE at the top — no logo, never chevrons. */
.syn-rail-expander { display: none; align-items: center; justify-content: center; width: var(--syn-rail-expander-width, 28px); height: var(--syn-rail-expander-height, 28px);
                     margin: var(--syn-rail-expander-margin, 4px auto 14px); padding: 0; border-radius: var(--syn-rail-expander-border-radius, var(--radius-nav)); border: var(--syn-rail-expander-border, 1px solid var(--border-emphasis));
                     background: var(--syn-rail-expander-background, var(--surface-plane)); color: inherit; cursor: pointer; box-sizing: content-box; }
.syn-rail-expander .syn-icon { color: var(--syn-rail-expander-icon-color, var(--text-tertiary)); }
.syn-rail.is-collapsed .syn-rail-expander { display: inline-flex; }
.syn-rail-expander:hover { background: var(--syn-rail-expander-hover-background, var(--surface-hover)); }

/* Q267 — THE COUNT-DOT CANON (relay-19 QC7 F-1 + D-3, BOTH RATIFIED at sight, Ken 2026-08-18).
   ONE species app-wide, THIS rule: the 15px round ink disc (min-width 15 / h15 / r99, pad 0 4),
   mono 600 9 figure, line-height 1. LIGHT = the ink dot (--text-primary #171717) with the WHITE
   figure; DARK = the ink-inversion pair (the disc follows --text-primary to #e8e6e1; the FIGURE
   takes the dark ground ink #171717 — CD's authored pair; the dark register existed nowhere before
   this rule). The dot DISAPPEARS AT ZERO — consumers render it only with a figure. Consumers: the
   Admin tab (Messages unread) · the rail's Blackbird count (HorizonFeed's one Unread definition) ·
   the pipeline Filters badge (lane B binds at QB11) · every future seat. CHROME class: px. */
/* Q291 (F-6, the count-dot canon's dark clause RULED): the inverted disc (--text-primary — pale
   in dark by inversion) always carries a figure the disc can't swallow — white in light, DARK
   in dark. THE ONE HOME for the species (Q267 promotion); per-surface copies are the bug
   (the capture rail's died this pass); the ladder's in-play marker conforms to the same pair. */
.syn-countdot { min-width: var(--syn-countdot-min-width, 15px); height: var(--syn-countdot-height, 15px); border-radius: var(--syn-countdot-border-radius, var(--shape-radius-pill)); background: var(--syn-countdot-background, var(--text-ink)); color: var(--syn-countdot-color, var(--text-on-accent)); font: var(--syn-countdot-font, 600 9.5px var(--type-family-mono)); display: inline-flex; align-items: center; justify-content: center; padding: var(--syn-countdot-padding, 0 4px); line-height: var(--syn-countdot-line-height, 1); flex: none; }
.dark .syn-countdot { color: var(--syn-countdot-color, var(--text-on-accent-dark)); }
/* The rail seat (HB-Q263-1 absorbed): right-aligned in the row; the collapsed rail is icons-only. */
.syn-rail-countdot { margin-left: auto; }
.syn-rail.is-collapsed .syn-rail-countdot { display: none; }

/* Items: 14px registry glyph + 500 12.5px --text-secondary label; hover = --bg-hover lift (the ONE
   chrome hover); ACTIVE = the surface card (bg --surface, 1px --border-default, r7, 600 ink) — one
   active locus in the rail at a time (16c). Admin sits 10px below the group, no divider. */
/* Q238 (Ken's prod eyeball, 2026-08-17): the residual rail jump was the active card's 1px BORDER with no
   rest-side reservation — the item grew 2px and pushed the list. The border is RESERVED AT REST
   (transparent; the Q231 pattern): nothing moves but ink and fill. Same for the hot rows below. */
.syn-rail-item { display: flex; align-items: center; gap: var(--syn-rail-item-gap, 9px); padding: var(--syn-rail-item-padding, 7px 10px); color: inherit; text-decoration: var(--syn-rail-item-text-decoration, none);
                 border: var(--syn-rail-item-border, 1px solid transparent); }
/* Q335(b): the hover BACKGROUND is the rail's affordance — the global `a:hover` text-underline
   (the Q294(e) link canon, right for prose links) never reaches these chrome anchors. */
.syn-rail-item:hover { background: var(--syn-rail-item-hover-background, var(--surface-hover)); border-radius: var(--syn-rail-item-hover-border-radius, var(--radius-nav)); color: inherit; text-decoration: var(--syn-rail-item-hover-text-decoration, none); }
.syn-rail-item .syn-icon { color: var(--syn-rail-item-icon-color, var(--text-muted)); }
/* p-top-bar (AF row 181; J3a's rail): THE ACTIVE ENTRY IS A TINT — the accent's muted plane and the accent ink, no card, no border */
.syn-rail-item.is-active .syn-icon { color: var(--syn-rail-item-is-active-icon-color, var(--accent-action)); }
/* d-demo-fix (row 193; FD governs chrome, the 20:10 matrix header): the active entry is the PLANE'S WHITE TILE on the rail — the plane and its
   shadow, the ink at 600 — never the accent's tint */
.syn-rail-item.is-active, .syn-rail-item.is-active:hover { background: var(--syn-rail-item-is-active-background, var(--surface-plane)); border-color: transparent; box-shadow: var(--syn-rail-item-is-active-box-shadow, var(--elevation-plane));
                                                          border-radius: var(--syn-rail-item-is-active-border-radius, var(--radius-nav)); color: var(--syn-rail-item-is-active-color, var(--text-ink)); }
.syn-rail-label { font: var(--syn-rail-label-font, 500 12.5px var(--type-family)); color: var(--syn-rail-label-color, var(--text-muted)); white-space: nowrap; }
.syn-rail-item.is-active .syn-rail-label { font-weight: var(--syn-rail-item-is-active-rail-label-font-weight, 600); color: var(--syn-rail-item-is-active-rail-label-color, var(--text-ink)); }
.syn-rail-item.is-admin { margin-top: var(--syn-rail-item-is-admin-margin-top, 10px); }
.syn-rail.is-collapsed .syn-rail-item { display: inline-flex; padding: var(--syn-rail-is-collapsed-rail-item-padding, 8px 0); gap: normal; }   /* 8 + the reserved 1px border = the drawn 9 */
.syn-rail.is-collapsed .syn-rail-item.is-active { padding: var(--syn-rail-is-collapsed-rail-item-is-active-padding, 8px 6px); }   /* the card keeps the glyph centred at 56px (symmetric growth) */
.syn-rail.is-collapsed .syn-rail-label { display: none; }

/* Hot Pursuits (16c): micro-label with the flame mark; rows in the rail's own face (500 12px
   --text-secondary, no mono); active row = the surface card with 600 ink. Expanded rail only. */
.syn-rail-hotlabel { padding: var(--syn-rail-hotlabel-padding, 12px 10px 5px 24px); display: flex; align-items: center; gap: var(--syn-rail-hotlabel-gap, 5px); }
.syn-rail-hotflame { flex: none; margin-top: var(--syn-rail-hotflame-margin-top, -1px); }
.syn-rail-hotlabel-text { font: var(--syn-rail-hotlabel-text-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-rail-hotlabel-text-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-rail-hotlabel-text-text-transform, var(--type-label-transform)); color: var(--syn-rail-hotlabel-text-color, var(--text-faint)); }
.syn-rail-hotrow { display: flex; align-items: center; padding: var(--syn-rail-hotrow-padding, 5px 10px 5px 24px); color: inherit; text-decoration: var(--syn-rail-hotrow-text-decoration, none);
                   border: var(--syn-rail-hotrow-border, 1px solid transparent); }   /* Q238: the active card's border reserved at rest (radius rides the states — no layout) */
.syn-rail-hotrow:hover { background: var(--syn-rail-hotrow-hover-background, var(--surface-hover)); border-radius: var(--syn-rail-hotrow-hover-border-radius, var(--radius-nav)); color: inherit; text-decoration: var(--syn-rail-hotrow-hover-text-decoration, none); }
.syn-rail-hotrow.is-active, .syn-rail-hotrow.is-active:hover { background: var(--syn-rail-hotrow-is-active-background, var(--surface-plane)); border-color: var(--syn-rail-hotrow-is-active-border-color, var(--border-default)); border-radius: var(--syn-rail-hotrow-is-active-border-radius, var(--radius-nav)); }
/* Q284(d): the shrink contract (the sharpened Q277 law — a floor without shrink permission is no
   floor): hot rows carry TOPR TITLES (unbounded prod data); the text shrinks into an ellipsis
   inside the rail instead of overflowing it. */
.syn-rail-hotrow-text { font: var(--syn-rail-hotrow-text-font, 500 12px var(--type-family)); color: var(--syn-rail-hotrow-text-color, var(--text-muted)); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.syn-rail-hotrow.is-active .syn-rail-hotrow-text { font-weight: var(--syn-rail-hotrow-is-active-rail-hotrow-text-font-weight, 600); color: var(--syn-rail-hotrow-is-active-rail-hotrow-text-color, var(--text-ink)); }
.syn-rail.is-collapsed .syn-rail-hotlabel, .syn-rail.is-collapsed .syn-rail-hotrow { display: none; }

/* The ONE group hairline (after Hot Pursuits, before Blackbird). */
.syn-rail-hairline { padding: var(--syn-rail-hairline-padding, 10px 10px 2px 10px); }
.syn-rail-hairline > span { width: 100%; border-top: var(--syn-rail-hairline-span-border-top, 1px solid var(--border-default)); display: block; }
.syn-rail.is-collapsed .syn-rail-hairline { padding: var(--syn-rail-is-collapsed-rail-hairline-padding, 10px 0 2px); align-self: stretch; }

.syn-rail-spacer { flex: 1; }

/* Q335(c) (Ken's fourth look): THE DEMO-MODE TOGGLE lives in the rail, just above the identity
   foot — available on every page (it left the pipeline header). The canonical ToggleSwitch +
   the rail's 500 12px label face; Hybrid-only by the Q309 law (the mode alone governs Live/Demo,
   so the toggle has nothing to say there). Collapsed rail = the switch alone, centred. */
.syn-rail-demo { display: flex; align-items: center; gap: var(--syn-rail-demo-gap, 8px); padding: var(--syn-rail-demo-padding, 8px 10px 0); cursor: pointer; white-space: nowrap; }
.syn-rail-demo-label { font: var(--syn-rail-demo-label-font, 500 12px var(--type-family)); color: var(--syn-rail-demo-label-color, var(--text-muted)); }
.syn-rail.is-collapsed .syn-rail-demo { padding: var(--syn-rail-is-collapsed-rail-demo-padding, 8px 0 0); justify-content: center; }
.syn-rail.is-collapsed .syn-rail-demo-label { display: none; }

/* Foot: avatar 24 + name 600 11px ink + meta 400 9.5px --text-disabled ("Admin · Settings"); the
   name-click submenu is the one affordance (Q152 — the gear died). */
.syn-rail-foot { display: flex; align-items: center; gap: var(--syn-rail-foot-gap, 8px); border: none; border-top: var(--syn-rail-foot-border-top, 1px solid var(--border-default));
                 padding: var(--syn-rail-foot-padding, 12px 10px 2px 10px); margin-top: var(--syn-rail-foot-margin-top, 14px); background: transparent; width: 100%;
                 text-align: left; cursor: pointer; color: var(--syn-rail-foot-color, var(--text-ink)); }
.syn-rail-foot-id { display: flex; flex-direction: column; min-width: 0; }
.syn-rail-foot-name { font: var(--syn-rail-foot-name-font, 600 11.5px var(--type-family)); color: var(--syn-rail-foot-name-color, var(--text-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-rail-foot-meta { font: var(--syn-rail-foot-meta-font, 400 9.5px var(--type-family)); color: var(--syn-rail-foot-meta-color, var(--text-faint)); white-space: nowrap; }
.syn-rail.is-collapsed .syn-rail-foot { padding: var(--syn-rail-is-collapsed-rail-foot-padding, 12px 0 2px); justify-content: center; }
.syn-rail.is-collapsed .syn-rail-foot-id { display: none; }

/* Footer identity menu ([REBUILD-P8-3]): Settings + Sign out. */
/* Q364(b) (A10 shell-change-password 5.8): the panel is a flex COLUMN and its rows stretch — a `width:100%` row
   contributes nothing to a shrink-to-fit panel, so the popover sat at the 160px floor and clipped the success
   stamp ("Simone Ac"). Now the widest row (the stamped one) IS the measure; min-width stays the floor only. */
.syn-rail-menu    { min-width: var(--syn-rail-menu-min-width, 160px); padding: var(--syn-rail-menu-padding, 4px); display: flex; flex-direction: column; align-items: stretch; }
.syn-rail-menurow { display: flex; align-items: center; gap: var(--syn-rail-menurow-gap, 8px); padding: var(--syn-rail-menurow-padding, 7px 10px); width: auto;
                    border-radius: var(--syn-rail-menurow-border-radius, var(--radius-sm)); font-size: var(--syn-rail-menurow-font-size, 13.5px); /* Q342(c) C5: nav-rail text = chrome */ color: var(--syn-rail-menurow-color, var(--text-ink));
                    text-decoration: var(--syn-rail-menurow-text-decoration, none); cursor: pointer; border: none; background: transparent;
                    font-family: inherit; text-align: left; }
.syn-rail-menurow:hover { background: var(--syn-rail-menurow-hover-background, var(--surface-hover)); color: var(--syn-rail-menurow-hover-color, var(--text-ink)); }
.syn-rail-menurow.is-inert { color: var(--syn-rail-menurow-is-inert-color, var(--text-tertiary)); cursor: default; }
.syn-rail-menurow.is-inert:hover { background: transparent; }

/* Q36: the picker family's nullable clear row (EnumSelectCore IncludeEmpty canon). */
.syn-picker-rowempty { color: var(--syn-picker-rowempty-color, var(--text-tertiary)); }

/* ── The Admin panel (Q46; annex P8-EXTRACT-Admin; mockup Admin.jsx — chrome L664, Part U
   L494–655, modal L383–492; authored from the mockup's inline styles). ─────────────────── */
.syn-admin { display: flex; flex-direction: column; }
.syn-admin-placeholder { border: var(--syn-admin-placeholder-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-admin-placeholder-border-radius, var(--shape-radius-control)); padding: var(--syn-admin-placeholder-padding, 26px); text-align: center; color: var(--syn-admin-placeholder-color, var(--text-tertiary)); }
.syn-admin-placeholder-t { font-size: var(--syn-admin-placeholder-t-font-size, 0.84375rem); font-weight: var(--syn-admin-placeholder-t-font-weight, var(--font-semibold)); color: var(--syn-admin-placeholder-t-color, var(--text-muted)); }
.syn-admin-placeholder-d { font-size: var(--syn-admin-placeholder-d-font-size, 0.78125rem); margin-top: var(--syn-admin-placeholder-d-margin-top, 4px); }

/* Part U toolbar + filters (Q250(iv): the .syn-admin-users* / -toolbar / -h1/-sub/-tabs / -modtabs / -dir* / -email* / -rolepick* rules PRUNED — the QC2 port owns its own scoped CSS) */
.syn-admin-error { padding: var(--syn-admin-error-padding, 8px 12px); border: var(--syn-admin-error-border, 1px solid var(--state-attention)); border-radius: var(--syn-admin-error-border-radius, var(--shape-radius-control)); background: var(--syn-admin-error-background, color-mix(in srgb, var(--state-attention) 8%, var(--surface-plane))); color: var(--syn-admin-error-color, var(--state-attention)); font-size: var(--syn-admin-error-font-size, 0.8125rem); }
.syn-admin-search { position: relative; display: flex; align-items: center; }
.syn-admin-search .syn-icon { position: absolute; left: var(--syn-admin-search-icon-left, 10px); color: var(--syn-admin-search-icon-color, var(--text-tertiary)); pointer-events: none; }
.syn-admin-search input { width: var(--syn-admin-search-input-width, 340px); padding: var(--syn-admin-search-input-padding, 6px 9px 6px 30px); border: var(--syn-admin-search-input-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-search-input-border-radius, var(--shape-radius-control)); font-size: var(--syn-admin-search-input-font-size, 0.8125rem); font-family: inherit; background: var(--syn-admin-search-input-background, var(--surface-plane)); color: var(--syn-admin-search-input-color, var(--text-ink)); outline: none; }
.syn-admin-search input:focus { border-color: var(--syn-admin-search-input-focus-border-color, var(--accent-action)); }
.syn-admin-filterbtn { display: inline-flex; align-items: center; gap: var(--syn-admin-filterbtn-gap, 7px); padding: var(--syn-admin-filterbtn-padding, 6px 9px); border: var(--syn-admin-filterbtn-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-filterbtn-border-radius, var(--shape-radius-control)); font-size: var(--syn-admin-filterbtn-font-size, 0.8125rem); font-weight: var(--syn-admin-filterbtn-font-weight, var(--font-medium)); background: var(--syn-admin-filterbtn-background, var(--surface-plane)); color: var(--syn-admin-filterbtn-color, var(--text-ink)); cursor: pointer; }
.syn-admin-filterbtn.is-on { border-color: var(--syn-admin-filterbtn-is-on-border-color, var(--accent-action)); color: var(--syn-admin-filterbtn-is-on-color, var(--accent-action-active)); background: var(--syn-admin-filterbtn-is-on-background, var(--accent-muted)); }
.syn-admin-filtercount { font-size: var(--syn-admin-filtercount-font-size, 0.71875rem); font-weight: var(--syn-admin-filtercount-font-weight, var(--font-semibold)); min-width: var(--syn-admin-filtercount-min-width, 16px); height: var(--syn-admin-filtercount-height, 16px); padding: var(--syn-admin-filtercount-padding, 0 4px); border-radius: var(--syn-admin-filtercount-border-radius, var(--shape-radius-pill)); background: var(--syn-admin-filtercount-background, var(--accent-action)); color: var(--syn-admin-filtercount-color, var(--text-on-accent)); display: inline-flex; align-items: center; justify-content: center; }
.syn-admin-toolspacer { flex: 1; }
.syn-admin-filters { border: var(--syn-admin-filters-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-admin-filters-border-radius, var(--shape-radius-sheet)); background: var(--syn-admin-filters-background, var(--surface-plane)); padding: var(--syn-admin-filters-padding, 4px 16px 12px); }
.syn-admin-facetrow { display: flex; gap: var(--syn-admin-facetrow-gap, 12px); align-items: flex-start; padding: var(--syn-admin-facetrow-padding, 9px 0); border-top: var(--syn-admin-facetrow-border-top, 1px solid var(--border-default)); }
.syn-admin-facetrow:first-child { border-top: none; }
.syn-admin-facetlabel { width: var(--syn-admin-facetlabel-width, 116px); flex-shrink: 0; font-size: var(--syn-admin-facetlabel-font-size, 0.75rem); font-weight: var(--syn-admin-facetlabel-font-weight, var(--font-semibold)); color: var(--syn-admin-facetlabel-color, var(--text-muted)); padding-top: var(--syn-admin-facetlabel-padding-top, 4px); }
.syn-admin-facetchips { display: flex; flex-wrap: wrap; gap: var(--syn-admin-facetchips-gap, 6px); flex: 1; }
.syn-admin-facetchip { padding: var(--syn-admin-facetchip-padding, 3px 10px); border-radius: var(--syn-admin-facetchip-border-radius, var(--shape-radius-pill)); font-size: var(--syn-admin-facetchip-font-size, 0.75rem); font-weight: var(--syn-admin-facetchip-font-weight, var(--font-medium)); border: none; cursor: pointer; background: var(--syn-admin-facetchip-background, var(--surface-inset)); color: var(--syn-admin-facetchip-color, var(--text-tertiary)); }
.syn-admin-facetchip.is-on { background: var(--syn-admin-facetchip-is-on-background, color-mix(in srgb, var(--accent-action) 13%, var(--surface-plane))); color: var(--syn-admin-facetchip-is-on-color, var(--accent-action)); }
.syn-admin-facetlinks { display: flex; gap: var(--syn-admin-facetlinks-gap, 9px); flex-shrink: 0; padding-top: var(--syn-admin-facetlinks-padding-top, 5px); font-size: var(--syn-admin-facetlinks-font-size, 0.71875rem); }
.syn-admin-filterfoot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--syn-admin-filterfoot-padding-top, 10px); border-top: var(--syn-admin-filterfoot-border-top, 1px solid var(--border-default)); font-size: var(--syn-admin-filterfoot-font-size, 0.71875rem); color: var(--syn-admin-filterfoot-color, var(--text-tertiary)); }
.syn-admin-reset { display: inline-flex; align-items: center; gap: var(--syn-admin-reset-gap, 6px); font-size: var(--syn-admin-reset-font-size, 0.75rem); font-weight: var(--syn-admin-reset-font-weight, var(--font-medium)); border: var(--syn-admin-reset-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-reset-border-radius, var(--shape-radius-control)); padding: var(--syn-admin-reset-padding, 5px 11px); background: var(--syn-admin-reset-background, var(--surface-plane)); color: var(--syn-admin-reset-color, var(--text-muted)); cursor: pointer; }
.syn-admin-countline { font-size: var(--syn-admin-countline-font-size, 0.71875rem); color: var(--syn-admin-countline-color, var(--text-tertiary)); }

/* Part U table */
.syn-admin-tablewrap { border: var(--syn-admin-tablewrap-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-tablewrap-border-radius, var(--shape-radius-sheet)); overflow: auto; background: var(--syn-admin-tablewrap-background, var(--surface-plane)); }
.syn-admin-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: var(--syn-admin-table-min-width, 760px); }
.syn-admin-table th { padding: var(--syn-admin-table-th-padding, 10px 12px); font-size: var(--syn-admin-table-th-font-size, 0.71875rem); font-weight: var(--syn-admin-table-th-font-weight, var(--font-semibold)); text-transform: var(--syn-admin-table-th-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-admin-table-th-letter-spacing, var(--type-label-tracking)); color: var(--syn-admin-table-th-color, var(--text-muted)); text-align: left; border-bottom: var(--syn-admin-table-th-border-bottom, 1px solid var(--border-emphasis)); white-space: nowrap; position: sticky; top: 0; z-index: 3; background: var(--syn-admin-table-th-background, var(--bg-secondary)); cursor: pointer; }
.syn-admin-table th.is-sticky { left: 0; z-index: 4; }
.syn-admin-thwrap { display: inline-flex; align-items: center; gap: var(--syn-admin-thwrap-gap, 4px); }
.syn-admin-table td { padding: var(--syn-admin-table-td-padding, 10px 12px); border-bottom: var(--syn-admin-table-td-border-bottom, 1px solid var(--border-default)); font-size: var(--syn-admin-table-td-font-size, 0.8125rem); }
.syn-admin-table tr:last-child td { border-bottom: none; }
.syn-admin-namebtn { display: inline-flex; align-items: center; gap: var(--syn-admin-namebtn-gap, 6px); cursor: pointer; }
.syn-admin-namebtn.is-locked { cursor: default; }
.syn-admin-nameinput { padding: var(--syn-admin-nameinput-padding, 4px 7px); border: var(--syn-admin-nameinput-border, 1px solid var(--accent-action)); border-radius: var(--syn-admin-nameinput-border-radius, var(--radius-sm)); font-size: var(--syn-admin-nameinput-font-size, 0.8125rem); font-family: inherit; outline: none; width: var(--syn-admin-nameinput-width, 88px); background: var(--syn-admin-nameinput-background, var(--surface-plane)); color: var(--syn-admin-nameinput-color, var(--text-ink)); }
.syn-admin-rolebtn { border: none; background: transparent; padding: 0; cursor: pointer; }
.syn-admin-roleselect { padding: var(--syn-admin-roleselect-padding, 5px 8px); border-color: var(--syn-admin-roleselect-border-color, var(--accent-action)); }
.syn-admin-devlock { display: inline-flex; align-items: center; gap: var(--syn-admin-devlock-gap, 5px); }
.syn-admin-orgwrap { display: inline-flex; align-items: center; gap: var(--syn-admin-orgwrap-gap, 7px); }
.syn-admin-orgname { font-size: var(--syn-admin-orgname-font-size, 0.8125rem); }
.syn-admin-logincell { font-size: var(--syn-admin-logincell-font-size, 0.75rem); color: var(--syn-admin-logincell-color, var(--text-muted)); white-space: nowrap; }
.syn-admin-emptyrow { padding: var(--syn-admin-emptyrow-padding, 40px) !important; text-align: center; color: var(--syn-admin-emptyrow-color, var(--text-tertiary)); }
.syn-admin-foot { display: flex; gap: var(--syn-admin-foot-gap, 8px); align-items: flex-start; font-size: var(--syn-admin-foot-font-size, 0.71875rem); color: var(--syn-admin-foot-color, var(--text-tertiary)); }
/* Q193: the Developer Uploads pane — two utilitarian drop cards + per-file verdict rows. */
.syn-admin-uploads { display: flex; flex-direction: column; gap: var(--syn-admin-uploads-gap, 14px); max-width: var(--syn-admin-uploads-max-width, 720px); }
.syn-admin-uploads-words { font-size: var(--syn-admin-uploads-words-font-size, 0.8125rem); color: var(--syn-admin-uploads-words-color, var(--text-muted)); margin: var(--syn-admin-uploads-words-margin, 0 0 10px); }
.syn-admin-uploads-label { display: inline-block; cursor: pointer; }
.syn-admin-uploads-rows { margin-top: var(--syn-admin-uploads-rows-margin-top, 12px); display: flex; flex-direction: column; }
.syn-admin-uploads-row { display: flex; align-items: baseline; gap: var(--syn-admin-uploads-row-gap, 8px); padding: var(--syn-admin-uploads-row-padding, 4px 0); border-top: var(--syn-admin-uploads-row-border-top, 1px solid var(--border-hairline)); font-size: var(--syn-admin-uploads-row-font-size, 0.75rem); }
.syn-admin-uploads-row.is-ok { color: var(--syn-admin-uploads-row-is-ok-color, var(--text-muted)); }
.syn-admin-uploads-row.is-ok .syn-icon, .syn-admin-uploads-row.is-ok svg { color: var(--syn-admin-uploads-row-is-ok-icon-color, var(--state-success)); }
.syn-admin-uploads-row.is-bad { color: var(--syn-admin-uploads-row-is-bad-color, var(--text-muted)); }
.syn-admin-uploads-row.is-bad .syn-icon, .syn-admin-uploads-row.is-bad svg { color: var(--syn-admin-uploads-row-is-bad-icon-color, var(--state-attention-text)); }
.syn-admin-uploads-file { font-weight: var(--syn-admin-uploads-file-font-weight, var(--font-semibold)); color: var(--syn-admin-uploads-file-color, var(--text-ink)); overflow-wrap: anywhere; }
.syn-admin-uploads-verdict { color: var(--syn-admin-uploads-verdict-color, var(--text-tertiary)); overflow-wrap: anywhere; }
.syn-admin-foot .syn-icon { flex-shrink: 0; margin-top: var(--syn-admin-foot-icon-margin-top, 1px); }

/* Q115: the audit viewer (developer-only, read-only) — the admin table grain, forensic density */
.syn-admin-audit .syn-admin-toolbar { gap: var(--syn-admin-audit-admin-toolbar-gap, 8px); }
.syn-admin-audit .syn-select { height: var(--syn-admin-audit-select-height, 32px); font-size: var(--syn-admin-audit-select-font-size, 0.75rem); }
.syn-audit-table td { vertical-align: top; font-size: var(--syn-audit-table-td-font-size, 0.75rem); }
.syn-audit-when { white-space: nowrap; color: var(--syn-audit-when-color, var(--text-muted)); font-variant-numeric: var(--syn-audit-when-font-variant-numeric, tabular-nums); }
.syn-audit-actor { font-weight: var(--syn-audit-actor-font-weight, var(--font-medium)); }
.syn-audit-actorid, .syn-audit-eid { font-family: var(--syn-audit-actorid-font-family, var(--type-family-mono)); font-size: var(--syn-audit-actorid-font-size, 0.71875rem); color: var(--syn-audit-actorid-color, var(--text-tertiary)); }
.syn-audit-channel { font-size: var(--syn-audit-channel-font-size, 0.71875rem); font-weight: var(--syn-audit-channel-font-weight, var(--font-medium)); padding: var(--syn-audit-channel-padding, 1px 7px); border-radius: var(--syn-audit-channel-border-radius, var(--shape-radius-pill)); background: var(--syn-audit-channel-background, var(--surface-inset)); color: var(--syn-audit-channel-color, var(--text-muted)); }
.syn-audit-channel.is-mcp { background: var(--syn-audit-channel-is-mcp-background, var(--accent-muted)); color: var(--syn-audit-channel-is-mcp-color, var(--accent-action-active)); }
.syn-audit-channel.is-background { background: var(--syn-audit-channel-is-background-background, var(--state-warning-tint)); color: var(--syn-audit-channel-is-background-color, var(--state-warning)); }
.syn-audit-cmd { font-family: var(--syn-audit-cmd-font-family, var(--type-family-mono)); font-size: var(--syn-audit-cmd-font-size, 0.71875rem); white-space: nowrap; }
.syn-audit-etype { font-weight: var(--syn-audit-etype-font-weight, var(--font-medium)); }
.syn-audit-changes { max-width: var(--syn-audit-changes-max-width, 460px); }
.syn-audit-change { display: flex; gap: var(--syn-audit-change-gap, 6px); align-items: baseline; padding: var(--syn-audit-change-padding, 1px 0); min-width: 0; }
.syn-audit-path { font-family: var(--syn-audit-path-font-family, var(--type-family-mono)); font-size: var(--syn-audit-path-font-size, 0.71875rem); color: var(--syn-audit-path-color, var(--text-muted)); flex-shrink: 0; }
.syn-audit-before, .syn-audit-after { font-family: var(--syn-audit-before-font-family, var(--type-family-mono)); font-size: var(--syn-audit-before-font-size, 0.71875rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-audit-before { color: var(--syn-audit-before-color, var(--text-tertiary)); text-decoration: var(--syn-audit-before-text-decoration, line-through); text-decoration-color: var(--syn-audit-before-text-decoration-color, color-mix(in srgb, var(--text-tertiary) 45%, transparent)); }
.syn-audit-arrow { color: var(--syn-audit-arrow-color, var(--text-tertiary)); flex-shrink: 0; }
.syn-audit-basis { font-size: var(--syn-audit-basis-font-size, 0.71875rem); color: var(--syn-audit-basis-color, var(--text-tertiary)); font-style: var(--syn-audit-basis-font-style, italic); margin-top: var(--syn-audit-basis-margin-top, 2px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.syn-admin-rowinput { padding: var(--syn-admin-rowinput-padding, 7px 10px); border: var(--syn-admin-rowinput-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-rowinput-border-radius, var(--shape-radius-control)); font-size: var(--syn-admin-rowinput-font-size, 0.8125rem); font-family: inherit; outline: none; background: var(--syn-admin-rowinput-background, var(--surface-plane)); color: var(--syn-admin-rowinput-color, var(--text-ink)); }
.syn-admin-rowinput.is-name { width: var(--syn-admin-rowinput-is-name-width, 104px); }
.syn-admin-rowinput.is-email { flex: 1; min-width: 0; }
.syn-admin-rowinput.is-bad { border-color: var(--syn-admin-rowinput-is-bad-border-color, var(--state-attention)); }
.syn-admin-rowflag { font-size: var(--syn-admin-rowflag-font-size, 0.71875rem); white-space: nowrap; }
.syn-admin-rowflag.is-warn { color: var(--syn-admin-rowflag-is-warn-color, var(--state-warning)); }
.syn-admin-rowflag.is-err { color: var(--syn-admin-rowflag-is-err-color, var(--state-attention)); }
.syn-admin-linkbtn { display: inline-flex; align-items: center; gap: var(--syn-admin-linkbtn-gap, 5px); background: none; border: none; padding: 0; color: var(--syn-admin-linkbtn-color, var(--accent-action)); font-size: var(--syn-admin-linkbtn-font-size, 0.75rem); font-weight: var(--syn-admin-linkbtn-font-weight, var(--font-medium)); cursor: pointer; }
.syn-admin-paste { margin-top: var(--syn-admin-paste-margin-top, 8px); }
.syn-admin-paste textarea { width: 100%; padding: var(--syn-admin-paste-textarea-padding, 8px 10px); border: var(--syn-admin-paste-textarea-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-paste-textarea-border-radius, var(--shape-radius-control)); font-size: var(--syn-admin-paste-textarea-font-size, 0.8125rem); font-family: inherit; resize: vertical; outline: none; background: var(--syn-admin-paste-textarea-background, var(--surface-plane)); color: var(--syn-admin-paste-textarea-color, var(--text-ink)); margin-bottom: var(--syn-admin-paste-textarea-margin-bottom, 6px); }
.syn-admin-footnote { font-size: var(--syn-admin-footnote-font-size, 0.71875rem); color: var(--syn-admin-footnote-color, var(--text-tertiary)); margin-top: var(--syn-admin-footnote-margin-top, 12px); }
.syn-admin-idplink { margin-top: var(--syn-admin-idplink-margin-top, 14px); }
.syn-admin-notice { margin-top: var(--syn-admin-notice-margin-top, 8px); padding: var(--syn-admin-notice-padding, 8px 12px); border: var(--syn-admin-notice-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-notice-border-radius, var(--shape-radius-control)); background: var(--syn-admin-notice-background, var(--bg-secondary)); font-size: var(--syn-admin-notice-font-size, 0.75rem); color: var(--syn-admin-notice-color, var(--text-muted)); }
.syn-admin-modcount { font-size: var(--syn-admin-modcount-font-size, 0.75rem); color: var(--syn-admin-modcount-color, var(--text-tertiary)); }
.syn-admin-modspacer { flex: 1 1 auto; }

/* The Blackbird operations board (Q47; annex P8-EXTRACT-Admin §3 — no mockup, the annex is the
   surface; quiet operational grain on the SectionCard chrome). */
.syn-admin-bb { display: flex; flex-direction: column; gap: var(--syn-admin-bb-gap, 14px); }

/* ── The Blackbird reader — Q263 (R10 blackbird package = EC 31a RATIFIED WHOLE 2026-08-17): the
   14a-1 reader-lane page. Chrome on canvas: the shell ListHeading, then the PLANE (--surface under
   the --border-emphasis crown) holding the grid 224px outline · minmax(0,680) measure · minmax(140,
   200) marginalia, justified center, gap 48, padding 32/48/40; both side lanes sticky at 24. Values
   verbatim from the package's inline styles + manifest. TEXT-SIZE law: lane chrome = px; the card's
   reading text = rem. ──────────────────────────────────────────────────────────────────────── */
/* Q381 (Ken 2026-08-26) — THE READER-SCROLL OWNER LAW on Blackbird, exactly as MC-research (UD5): the page locks
   to the viewport, the plane fills it, the grid pins ONE row to the plane's height and THE MEASURE is the one
   scroll container; the heading and BOTH lanes (filters · the right rail) stay put — the lanes lose their
   window-sticky and scroll themselves only if taller than the lane. overflow: clip on the frames (never hidden)
   so scrollIntoView can never move the frame. The EntityGridViewportTests exception list names this seat. */
.syn-bb-page { display: flex; flex-direction: column; height: 100vh; overflow: clip; }
/* UD6 (Relay 30 §2 REVISED, the UD1 pattern; Ken's fourth look: the page "escaped our new
   conformance of page styling"): the full-bleed white ground under the hairline crown is
   superseded at frame level — the reader re-seats as THE PLANE ON THE CANVAS at the ruled 20px
   gutter (surface · 1px --border-emphasis · r10 · the .05 shadow; the crown folds into the
   plane border, the DirectoryShell precedent). overflow: clip, never hidden — both lanes are
   window-sticky at 24 (the Q275/QB27 lesson). Inside the plane nothing changes. */
.syn-bb-plane { margin: var(--syn-bb-plane-margin, 20px 20px 20px); background: var(--syn-bb-plane-background, var(--surface-plane)); border: var(--syn-bb-plane-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-bb-plane-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-bb-plane-box-shadow, var(--elevation-plane)); overflow: clip; flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.syn-bb-grid { display: grid; grid-template-columns: var(--syn-bb-grid-grid-template-columns, 224px minmax(0, 680px) minmax(140px, 200px)); grid-template-rows: minmax(0, 1fr); justify-content: center; gap: var(--syn-bb-grid-gap, 48px); padding: var(--syn-bb-grid-padding, 32px 48px 40px); flex: 1; min-height: 0; overflow: clip; }
.syn-bb-measure { min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: auto; }   /* Q381: THE ONE SCROLLER */
.syn-bb-empty { padding: var(--syn-bb-empty-padding, 44px 20px); display: flex; align-items: center; justify-content: center; font: var(--syn-bb-empty-font, 400 0.8125rem var(--type-family)); color: var(--syn-bb-empty-color, var(--text-tertiary)); text-align: center; }

/* the OUTLINE lane — search · lens rows · the 27a facet groups (always exposed) · the armed foot */
.syn-bb-outline { display: flex; flex-direction: column; gap: var(--syn-bb-outline-gap, 16px); position: static; align-self: stretch; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: auto; }   /* Q381: static, self-scrolls only if taller than the lane */
.syn-bb-search { height: var(--syn-bb-search-height, 28px); box-sizing: border-box; background: var(--syn-bb-search-background, var(--surface-plane)); border: var(--syn-bb-search-border, 1px solid var(--border-default)); border-radius: var(--syn-bb-search-border-radius, var(--shape-radius-control)); display: flex; align-items: center; gap: var(--syn-bb-search-gap, 6px); padding: var(--syn-bb-search-padding, 0 10px); color: var(--syn-bb-search-color, var(--text-faint)); }
.syn-bb-search .syn-icon { flex: none; color: var(--syn-bb-search-icon-color, var(--text-faint)); }
.syn-bb-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 0; font: var(--syn-bb-search-input-font, 400 11.5px var(--type-family)); color: var(--syn-bb-search-input-color, var(--text-ink)); }
.syn-bb-search input::placeholder { color: var(--syn-bb-search-input-placeholder-color, var(--text-faint)); }
.syn-bb-search:focus-within { border-color: var(--syn-bb-search-focus-within-border-color, var(--border-emphasis)); }
.syn-bb-lenses { display: flex; flex-direction: column; gap: var(--syn-bb-lenses-gap, 2px); }
.syn-bb-lens { display: flex; align-items: center; gap: var(--syn-bb-lens-gap, 8px); padding: var(--syn-bb-lens-padding, 6px 9px); border: none; border-radius: var(--syn-bb-lens-border-radius, var(--radius-nav)); background: transparent; text-align: left; cursor: pointer; width: 100%; }
.syn-bb-lens:hover { background: var(--syn-bb-lens-hover-background, var(--surface-hover)); }
.syn-bb-lens.on { background: var(--syn-bb-lens-on-background, var(--surface-canvas)); }
.syn-bb-lens-label { flex: 1; font: var(--syn-bb-lens-label-font, 500 12.5px var(--type-family)); color: var(--syn-bb-lens-label-color, var(--text-muted)); }
.syn-bb-lens.on .syn-bb-lens-label { font-weight: var(--syn-bb-lens-on-bb-lens-label-font-weight, 600); color: var(--syn-bb-lens-on-bb-lens-label-color, var(--text-ink)); }
.syn-bb-lens-count { font: var(--syn-bb-lens-count-font, 400 11.5px var(--type-family)); color: var(--syn-bb-lens-count-color, var(--text-faint)); font-variant-numeric: var(--syn-bb-lens-count-font-variant-numeric, tabular-nums); }
.syn-bb-lens.on .syn-bb-lens-count { font-weight: var(--syn-bb-lens-on-bb-lens-count-font-weight, 600); color: var(--syn-bb-lens-on-bb-lens-count-color, var(--text-ink)); }
.syn-bb-facetsec { padding: 0; }
.syn-bb-facetsec .syn-facetsechead { padding-bottom: var(--syn-bb-facetsec-facetsechead-padding-bottom, 2px); }
.syn-bb-facetsec .syn-facetopt { white-space: normal; }
.syn-bb-facetlabel { flex: 1; min-width: 0; font: var(--syn-bb-facetlabel-font, 400 12px var(--type-family)); color: var(--syn-bb-facetlabel-color, var(--text-body)); }
.syn-bb-lanefoot { display: flex; align-items: center; gap: var(--syn-bb-lanefoot-gap, 8px); border-top: var(--syn-bb-lanefoot-border-top, 1px solid var(--border-hairline)); padding-top: var(--syn-bb-lanefoot-padding-top, 10px); }
.syn-bb-lanefoot-readout { font: var(--syn-bb-lanefoot-readout-font, 400 11.5px var(--type-family)); color: var(--syn-bb-lanefoot-readout-color, var(--text-tertiary)); }
.syn-bb-lanefoot-spacer { flex: 1; }
.syn-bb-lanefoot-clear { font: var(--syn-bb-lanefoot-clear-font, 500 11.5px var(--type-family)); color: var(--syn-bb-lanefoot-clear-color, var(--accent-action)); cursor: pointer; }

/* the MARGINALIA lane — the density pair (the one segmented anatomy, stretched) · Mark all read ·
   provenance under the hairline */
.syn-bb-marginalia { display: flex; flex-direction: column; gap: var(--syn-bb-marginalia-gap, 10px); position: static; align-self: stretch; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: auto; }   /* Q381: static, self-scrolls only if taller than the lane */
.syn-bb-seg .syn-pipe-segbtn { flex: 1; justify-content: center; }
.syn-bb-markall { height: var(--syn-bb-markall-height, 28px); box-sizing: border-box; background: var(--syn-bb-markall-background, var(--surface-plane)); border: var(--syn-bb-markall-border, 1px solid var(--border-default)); border-radius: var(--syn-bb-markall-border-radius, var(--shape-radius-control)); display: inline-flex; align-items: center; justify-content: center; padding: var(--syn-bb-markall-padding, 0 11px); font: var(--syn-bb-markall-font, 500 11.5px var(--type-family)); color: var(--syn-bb-markall-color, var(--text-body)); cursor: pointer; }
.syn-bb-markall:hover:not(:disabled) { background: var(--syn-bb-markall-hover-not-disabled-background, var(--surface-hover)); color: var(--syn-bb-markall-hover-not-disabled-color, var(--text-ink)); }
.syn-bb-markall:disabled { color: var(--syn-bb-markall-disabled-color, var(--text-rider)); cursor: default; }
.syn-bb-provenance { border-top: var(--syn-bb-provenance-border-top, 1px solid var(--border-hairline)); margin-top: var(--syn-bb-provenance-margin-top, 8px); padding-top: var(--syn-bb-provenance-padding-top, 14px); }
.syn-bb-provenance-text { font: var(--syn-bb-provenance-text-font, 400 0.71875rem/1.6 var(--type-family)); color: var(--syn-bb-provenance-text-color, var(--text-tertiary)); text-wrap: pretty; }

/* the FEED — one full-content scroll, hairline seams; the first card drops its top padding so its
   title cap shares the grid's top datum with the search field and the treatment pair */
.syn-bb-feed { display: flex; flex-direction: column; }
.syn-bb-card { padding: var(--syn-bb-card-padding, 22px 0); border-bottom: var(--syn-bb-card-border-bottom, 1px solid var(--border-hairline)); }
.syn-bb-feed > .syn-bb-card:first-child { padding-top: 0; }
.syn-bb-feed.is-compact > .syn-bb-card { padding: var(--syn-bb-feed-is-compact-bb-card-padding, 14px 2px 18px); }
/* QB63 (Ken 2026-08-26): a finding EXPANDED IN PLACE (FindingCard Inline — the MC-pursuit fold · the Blackbird
   compact row) keeps the ROW'S headline: the title never grows on expand (600 13px/1.4, the collapsed size) and
   the card's own top padding dies — the host seam (the fold's 14px · the compact row's 8px) is the only gap. */
.syn-bb-card.is-inline { padding-top: 0; }
.syn-bb-feed.is-compact > .syn-bb-card.is-inline { padding-top: var(--syn-bb-feed-is-compact-bb-card-is-inline-padding-top, 8px); }
.syn-bb-card.is-inline .syn-bb-cardtitle { font-size: var(--syn-bb-card-is-inline-bb-cardtitle-font-size, 0.8125rem); line-height: var(--syn-bb-card-is-inline-bb-cardtitle-line-height, 1.4); letter-spacing: 0; }
.syn-bb-cardhead { display: flex; align-items: flex-start; gap: var(--syn-bb-cardhead-gap, 8px); }
.syn-bb-cardtitle { flex: 1; min-width: 0; font: var(--syn-bb-cardtitle-font, 600 0.96875rem/1.35 var(--type-family)); color: var(--syn-bb-cardtitle-color, var(--text-ink)); letter-spacing: var(--syn-bb-cardtitle-letter-spacing, -0.01em); text-wrap: pretty; }
.syn-bb-card.is-read .syn-bb-cardtitle { font-weight: var(--syn-bb-card-is-read-bb-cardtitle-font-weight, 500); color: var(--syn-bb-card-is-read-bb-cardtitle-color, var(--text-tertiary)); }
.syn-bb-cardtitle.is-toggle { cursor: pointer; }
/* Q363(b): the toggle title collapses the row — it is NOT a link, so it wears no link affordance (the underline died; the affordance-honesty law) */
.syn-bb-cardtitle.is-toggle:hover { text-decoration: var(--syn-bb-cardtitle-is-toggle-hover-text-decoration, none); }
/* the affordance pair — 24px seats either side of the title; quiet (--text-disabled) at rest,
   ink on --bg-primary when on; tooltips verbatim */
.syn-bb-aff { width: var(--syn-bb-aff-width, 24px); height: var(--syn-bb-aff-height, 24px); margin-top: var(--syn-bb-aff-margin-top, -2px); border-radius: var(--syn-bb-aff-border-radius, var(--radius-sm)); display: inline-flex; align-items: center; justify-content: center; flex: none; border: none; background: transparent; padding: 0; color: var(--syn-bb-aff-color, var(--text-faint)); cursor: pointer; }
.syn-bb-aff:hover { background: var(--syn-bb-aff-hover-background, var(--surface-hover)); color: var(--syn-bb-aff-hover-color, var(--text-muted)); }
.syn-bb-aff.is-on { background: var(--syn-bb-aff-is-on-background, var(--surface-canvas)); color: var(--syn-bb-aff-is-on-color, var(--text-ink)); }
/* ONE metadata line, indented to the title's origin: source accent link · age · found */
.syn-bb-metaline { display: flex; align-items: center; gap: var(--syn-bb-metaline-gap, 7px); margin-top: var(--syn-bb-metaline-margin-top, 5px); padding-left: var(--syn-bb-metaline-padding-left, 32px); flex-wrap: wrap; }
.syn-bb-source { font: var(--syn-bb-source-font, 500 0.75rem var(--type-family)); color: var(--syn-bb-source-color, var(--accent-action)); text-decoration: var(--syn-bb-source-text-decoration, none); }
a.syn-bb-source:hover { color: var(--kit-a-syn-bb-source-hover-color, var(--accent-action-hover)); text-decoration: var(--kit-a-syn-bb-source-hover-text-decoration, underline); }
.syn-bb-metasep { color: var(--syn-bb-metasep-color, var(--text-rider)); }
.syn-bb-age { font: var(--syn-bb-age-font, 400 0.71875rem var(--type-family)); color: var(--syn-bb-age-color, var(--text-tertiary)); font-variant-numeric: var(--syn-bb-age-font-variant-numeric, tabular-nums); }
.syn-bb-age.is-unknown { color: var(--syn-bb-age-is-unknown-color, var(--text-faint)); }
.syn-bb-found { font: var(--syn-bb-found-font, 400 0.71875rem var(--type-family)); color: var(--syn-bb-found-color, var(--text-faint)); }
.syn-bb-cardbody { padding-left: var(--syn-bb-cardbody-padding-left, 32px); }
.syn-bb-alsoby { display: flex; align-items: baseline; gap: var(--syn-bb-alsoby-gap, 6px); margin-top: var(--syn-bb-alsoby-margin-top, 6px); font: var(--syn-bb-alsoby-font, 400 0.71875rem var(--type-family)); color: var(--syn-bb-alsoby-color, var(--text-tertiary)); flex-wrap: wrap; }
.syn-bb-alsoby-link { font: var(--syn-bb-alsoby-link-font, 500 0.71875rem var(--type-family)); color: var(--syn-bb-alsoby-link-color, var(--accent-action)); text-decoration: var(--syn-bb-alsoby-link-text-decoration, none); }
a.syn-bb-alsoby-link:hover { text-decoration: var(--kit-a-syn-bb-alsoby-link-hover-text-decoration, underline); }
/* the two-tint bookend: TL;DR up top, Moves to consider at the foot — Blackbird speaking TO you */
.syn-bb-tldr { background: var(--syn-bb-tldr-background, var(--tinted-inset)); border: var(--syn-bb-tldr-border, 1px solid var(--border-default)); border-radius: var(--syn-bb-tldr-border-radius, var(--radius-nav)); padding: var(--syn-bb-tldr-padding, 10px 13px); margin-top: var(--syn-bb-tldr-margin-top, 11px); font: var(--syn-bb-tldr-font, 400 0.78125rem/1.6 var(--type-family)); color: var(--syn-bb-tldr-color, var(--text-body)); text-wrap: pretty; }
.syn-bb-tldrlabel { font: var(--syn-bb-tldrlabel-font, 700 0.625rem var(--type-family)); letter-spacing: var(--syn-bb-tldrlabel-letter-spacing, .08em); color: var(--syn-bb-tldrlabel-color, var(--text-tertiary)); margin-right: var(--syn-bb-tldrlabel-margin-right, 9px); }
/* the reporting flows as body */
.syn-bb-md { font: var(--syn-bb-md-font, 400 0.8125rem/1.65 var(--type-family)); color: var(--syn-bb-md-color, var(--text-body)); text-wrap: pretty; }
.syn-bb-md p { margin: var(--syn-bb-md-p-margin, 10px 0 0); }
.syn-bb-md p:first-child { margin-top: 0; }
.syn-bb-body { margin-top: var(--syn-bb-body-margin-top, 10px); }
.syn-bb-md ul, .syn-bb-md ol { list-style: none; margin: 0; padding: 0; }
/* Q382(c): a list item is ONE flow — a bold lead runs IN and the prose follows (the "Why it matters" pattern). The old
   flex row made every child (the <strong> lead, the text) its own column, squeezing bold leads into a one-word-per-line
   left column; the square marker is absolutely seated instead. */
.syn-bb-md li { display: block; position: relative; padding-left: var(--syn-bb-md-li-padding-left, 14px); margin-top: var(--syn-bb-md-li-margin-top, 7px); font: var(--syn-bb-md-li-font, 400 0.78125rem/1.55 var(--type-family)); color: var(--syn-bb-md-li-color, var(--text-body)); text-wrap: pretty; }
.syn-bb-md li::before { content: ""; position: absolute; left: 0; top: var(--syn-bb-md-li-before-top, 7px); width: var(--syn-bb-md-li-before-width, 5px); height: var(--syn-bb-md-li-before-height, 5px); background: var(--syn-bb-md-li-before-background, var(--text-body)); }
.syn-bb-md li strong { font-weight: var(--syn-bb-md-li-strong-font-weight, 700); color: var(--syn-bb-md-li-strong-color, var(--text-ink)); }
.syn-bb-md li p { margin: 0; }
/* Impact — the 2px-rail callout, secondary tone; the run-in lead flows into its first sentence */
.syn-bb-impact { border-left: var(--syn-bb-impact-border-left, 2px solid var(--border-emphasis)); padding: var(--syn-bb-impact-padding, 2px 0 2px 14px); margin-top: var(--syn-bb-impact-margin-top, 14px); }
.syn-bb-impact .syn-bb-md, .syn-bb-impact .syn-bb-md p { font: var(--syn-bb-impact-bb-md-font, 400 0.78125rem/1.6 var(--type-family)); color: var(--syn-bb-impact-bb-md-color, var(--text-muted)); }
.syn-bb-means { margin-top: var(--syn-bb-means-margin-top, 15px); }
.syn-bb-means .syn-bb-md, .syn-bb-means .syn-bb-md p { font: var(--syn-bb-means-bb-md-font, 400 0.78125rem/1.6 var(--type-family)); color: var(--syn-bb-means-bb-md-color, var(--text-body)); }
/* the VOICE HEADS — the analyst speaking (the third, Blackbird-scoped species): 700 12px ink +
   colon; chevron only on hover; click collapses the two sections */
.syn-bb-lead { font: var(--syn-bb-lead-font, 700 0.75rem var(--type-family)); color: var(--syn-bb-lead-color, var(--text-ink)); }
.syn-bb-lead-why { margin-right: var(--syn-bb-lead-why-margin-right, 6px); }
.syn-bb-lead-means { margin-top: var(--syn-bb-lead-means-margin-top, 15px); margin-right: var(--syn-bb-lead-means-margin-right, 6px); }
.syn-bb-lead.is-toggle { cursor: pointer; }
.syn-bb-leadline { display: flex; align-items: baseline; }
.syn-bb-leadchev { display: inline-block; width: 0; overflow: hidden; margin-left: var(--syn-bb-leadchev-margin-left, 4px); font-weight: var(--syn-bb-leadchev-font-weight, 500); color: var(--syn-bb-leadchev-color, var(--text-tertiary)); vertical-align: 0; }
.syn-bb-lead.is-toggle:hover .syn-bb-leadchev, .syn-bb-lead.is-collapsed .syn-bb-leadchev { width: auto; }
.syn-bb-runin { margin: 0; }
/* Moves to consider — the tinted box at the foot: square bullets, action 600 · rationale */
.syn-bb-moves { background: var(--syn-bb-moves-background, var(--tinted-inset)); border: var(--syn-bb-moves-border, 1px solid var(--border-default)); border-radius: var(--syn-bb-moves-border-radius, var(--radius-nav)); padding: var(--syn-bb-moves-padding, 11px 14px 12px); margin-top: var(--syn-bb-moves-margin-top, 15px); }
.syn-bb-bullet { display: flex; gap: var(--syn-bb-bullet-gap, 9px); margin-top: var(--syn-bb-bullet-margin-top, 7px); }
.syn-bb-square { width: var(--syn-bb-square-width, 5px); height: var(--syn-bb-square-height, 5px); background: var(--syn-bb-square-background, var(--text-body)); flex: none; margin-top: var(--syn-bb-square-margin-top, 7px); }
.syn-bb-rec { font: var(--syn-bb-rec-font, 400 0.78125rem/1.55 var(--type-family)); color: var(--syn-bb-rec-color, var(--text-muted)); text-wrap: pretty; }
.syn-bb-recaction { font: var(--syn-bb-recaction-font, 600 0.78125rem var(--type-family)); color: var(--syn-bb-recaction-color, var(--text-ink)); }
/* footer: Relevant to + TOPR links ascending (fact-territory accent links into Mission Control) */
/* Q375: the relevance run rides the metaline (the `.syn-bb-relevance` footer seat died). */
.syn-bb-relevantto { font: var(--syn-bb-relevantto-font, 400 0.71875rem var(--type-family)); color: var(--syn-bb-relevantto-color, var(--text-tertiary)); }
.syn-bb-toprlink { font: var(--syn-bb-toprlink-font, 500 0.75rem var(--type-family)); color: var(--syn-bb-toprlink-color, var(--accent-action)); text-decoration: var(--syn-bb-toprlink-text-decoration, none); }
.syn-bb-toprlink:hover { color: var(--syn-bb-toprlink-hover-color, var(--accent-action-hover)); text-decoration: var(--syn-bb-toprlink-hover-text-decoration, underline); }

/* COMPACT rows — bookmark seat (hover-revealed, stands on when bookmarked) · wrapping title ·
   source · time; the hovered row tints; a row expands its full card in place */
.syn-bb-comprow { display: flex; align-items: flex-start; gap: var(--syn-bb-comprow-gap, 9px); padding: var(--syn-bb-comprow-padding, 8px 2px); border-bottom: var(--syn-bb-comprow-border-bottom, 1px solid var(--border-hairline)); cursor: pointer; }
.syn-bb-comprow:hover { background: var(--syn-bb-comprow-hover-background, var(--tinted-inset)); }
.syn-bb-compaff { width: var(--syn-bb-compaff-width, 20px); height: var(--syn-bb-compaff-height, 20px); margin-top: 0; opacity: var(--syn-bb-compaff-opacity, 0); }
.syn-bb-comprow:hover .syn-bb-compaff, .syn-bb-compaff.is-on { opacity: var(--syn-bb-comprow-hover-bb-compaff-opacity, 1); }
.syn-bb-comptitle { flex: 1; min-width: 0; font: var(--syn-bb-comptitle-font, 600 0.8125rem/1.4 var(--type-family)); color: var(--syn-bb-comptitle-color, var(--text-ink)); text-wrap: pretty; }
.syn-bb-comprow.is-read .syn-bb-comptitle { font-weight: var(--syn-bb-comprow-is-read-bb-comptitle-font-weight, 400); color: var(--syn-bb-comprow-is-read-bb-comptitle-color, var(--text-tertiary)); }
.syn-bb-compsource { flex: none; font: var(--syn-bb-compsource-font, 400 0.71875rem/1.4 var(--type-family)); color: var(--syn-bb-compsource-color, var(--text-faint)); }
.syn-bb-comptime { flex: none; font: var(--syn-bb-comptime-font, 400 0.71875rem/1.4 var(--type-family)); color: var(--syn-bb-comptime-color, var(--text-tertiary)); font-variant-numeric: var(--syn-bb-comptime-font-variant-numeric, tabular-nums); }

/* ── The Solicitation tab — Q264 (R10 mc-solicitation package = MC 23a/23b/23c + R10 6a/6b): the
   tab PLANE full-bleed inside the MC body (the Q262 negative-margin seat), the LENS ROW (16/48/0),
   the 2-1 staged banner, and the 14a-1 reader grid 224 · minmax(0,680) · 280 (gap 48, pad 26/48/44)
   the Read and Notices lenses both sit in. Values verbatim from the package. TEXT-SIZE law: the
   solicitation reading text = rem (scales); stamps, mono §-tags, lane chrome = px. ─────────────── */
/* UD1 (Relay 30 §2 REVISED, the frame of record): the reader region re-seats as the PLANE ON THE
   CANVAS at the ruled 14/20/24 gutter (insitu-solicitation pins) — the edge-to-edge white ground is
   superseded at frame level. The margins net against .syn-mc-body's 22/28/60 padding (22-8=14 top,
   28-8=20 sides, 60-36=24 bottom). overflow: clip, never hidden — the outline/marginalia lanes are
   window-sticky (the Q275 scrollport lesson; QB27 precedent). */
.syn-solr-tab { margin: var(--syn-solr-tab-margin, -8px -8px -36px); background: var(--syn-solr-tab-background, var(--surface-plane)); border: var(--syn-solr-tab-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solr-tab-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-solr-tab-box-shadow, var(--elevation-plane)); overflow: clip; overflow-x: auto; display: flex; flex-direction: column; }
/* UD2 (BEHAVIOR 7): the HOUSE PLANE-HEADER BAND — the mode toggle's one seat (tinted ground,
   row seam; the band carries nothing else). At EMPTY it stays with the quiet line, toggle absent. */
/* SOL-4b(e) THE LENS ROW BINDS TO THE CONTENT EDGE (0h): a centered band matching the face beneath (1280, flush with the
   outline lane), never the fixed 48px chrome inset; it stands in every in-lens state, search included. The tinted band died. */
/* t14 (Ken's second sight, [REBUILD-SOL-6]): THE LENS ROW IS FIXED — its left edge sits at the tab's 48px inset on EVERY
   lens (Reader · Releases · Notices) and never re-centers per face (0h amended: the FACE bands; the row does not). */
/* t36 (l) / relay 44 §7 (BEHAVIOR 37): THE LENS ROW NEVER MOVES — ONE element (the tab's), ONE geometry, padding 16 · 48, in EVERY
   in-lens state and in search; the header doors (Download solicitation · + New release) ride inside its height on the Releases face */
.syn-solr-lensrow { display: flex; padding: var(--syn-solr-lensrow-padding, 16px 48px 0); }
/* relay 43 download-modal: the shell box the comp names — radius 12, the column gap 11; the commit button's 6 × 16 */
.syn-modal-inner[data-spec=mc-solicitation-download-modal] { border-radius: var(--syn-modal-inner-spec-mc-solicitation-download-modal-border-radius, var(--shape-radius-sheet)); gap: var(--syn-modal-inner-spec-mc-solicitation-download-modal-gap, 11px); }
.syn-solr-lensband { display: flex; align-items: flex-start; gap: var(--syn-solr-lensband-gap, 12px); min-width: 0; flex: 1; }
/* t36 (l): the header doors FIT INSIDE the row's height without changing it — the switcher (26 px) sets the row; a door is exactly as tall,
   so the switcher never floats by a sub-pixel when the doors come and go between lenses */
.syn-solr-lensband > .syn-solr-door { line-height: var(--syn-solr-lensband-solr-door-line-height, 14px); }   /* 14 + 5 + 5 + the 1 px borders = the switcher's 26 (the comp's 5 × 12 padding stands) */
.syn-solr-seg .syn-pipe-segbtn { gap: 0; }
.syn-solr-emptyline { font: var(--syn-solr-emptyline-font, 400 11.5px var(--type-family)); color: var(--syn-solr-emptyline-color, var(--text-faint)); }
.syn-solr-emptyline-body { font: var(--syn-solr-emptyline-body-font, var(--type-r5)); color: var(--syn-solr-emptyline-body-color, var(--text-tertiary)); } /* UD32: the vacancy sentence is READING class — R5 by token (TF-16's ninth seat) */
.syn-solr-flowhost { padding: var(--syn-solr-flowhost-padding, 20px 48px 44px); }
.syn-solr-emptyplane { padding: var(--syn-solr-emptyplane-padding, 26px 48px 44px); }
.syn-solr-empty { padding: var(--syn-solr-empty-padding, 44px 20px); display: flex; align-items: center; justify-content: center; text-align: center; font: var(--syn-solr-empty-font, 400 0.8125rem/1.6 var(--type-family)); color: var(--syn-solr-empty-color, var(--text-tertiary)); }
/* the section-line door (transparent + default border, BUTTONS.md): Open review · Download · Manage */
.syn-solr-door { border: var(--syn-solr-door-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solr-door-border-radius, var(--radius-nav)); background: var(--syn-solr-door-background, var(--surface-plane)); padding: var(--syn-solr-door-padding, 5px 12px); font: var(--syn-solr-door-font, 500 11.5px var(--type-family)); color: var(--syn-solr-door-color, var(--text-ink)); white-space: nowrap; cursor: pointer; flex: none; }   /* SOL-4b: the bordered chrome dress (relay 41) */
.syn-solr-door:hover { background: var(--syn-solr-door-hover-background, var(--surface-hover)); }
/* t36 (b) ([REBUILD-SOL-9]): the disabled dress — "+ New release" while a card forms wore the UA's grey ground at full ink;
   the comp's disabled door is --text-disabled on --surface with --border-default, no hover, the default cursor */
.syn-solr-door:disabled, .syn-solr-door:disabled:hover { color: var(--syn-solr-door-disabled-color, var(--text-faint)); background: var(--syn-solr-door-disabled-background, var(--surface-plane)); border-color: var(--syn-solr-door-disabled-border-color, var(--border-default)); cursor: default; }

/* the reader grid — SOL-5 R1: 224 · 1fr · 280 (680 is the measure's floor): the middle column takes the remaining width so a
   page reads at real size on a wide window; the notices lens keeps its centered 224·680·280. */
.syn-solr-grid { display: grid; grid-template-columns: var(--syn-solr-grid-grid-template-columns, 280px minmax(680px, 1fr) 280px); gap: var(--syn-solr-grid-gap, 48px); justify-content: safe center; padding: var(--syn-solr-grid-padding, 26px 48px 44px); }   /* t9: THE LANE IS 280 (Ken's second sight) */   /* R1 rider: below the 680 floor the grid is wider than the frame — SAFE center keeps it start-aligned (no margin slides off the frame) and the tab plane scrolls sideways */
/* Q275 (1): the rail owns its own scroll when taller than the viewport (the .syn-res-outline
   treatment) — without the cap a long outline defeats sticky by its own height. */
.syn-solr-outline { min-width: 0; position: sticky; top: var(--syn-solr-outline-top, 16px); align-self: start; max-height: var(--syn-solr-outline-max-height, calc(100vh - 32px)); overflow-y: auto; scrollbar-width: auto; }
.syn-solr-search { display: flex; align-items: center; gap: var(--syn-solr-search-gap, 6px); border: var(--syn-solr-search-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solr-search-border-radius, var(--radius-nav)); background: var(--syn-solr-search-background, var(--surface-plane)); padding: var(--syn-solr-search-padding, 6px 9px); margin-bottom: var(--syn-solr-search-margin-bottom, 10px); color: var(--syn-solr-search-color, var(--text-faint)); }
.syn-solr-search .syn-icon { flex: none; }
.syn-solr-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 0; font: var(--syn-solr-search-input-font, 400 12px var(--type-family)); color: var(--syn-solr-search-input-color, var(--text-ink)); }
.syn-solr-search input::placeholder { color: var(--syn-solr-search-input-placeholder-color, var(--text-faint)); }
/* the shared reader-rail grammar (History · Files · Notices · Review still ride it): group heads, rows, the in-run number seat */
.syn-solr-grouphead { font: var(--syn-solr-grouphead-font, 600 9.5px/1.4 var(--type-family)); letter-spacing: var(--syn-solr-grouphead-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solr-grouphead-text-transform, var(--type-label-transform)); color: var(--syn-solr-grouphead-color, var(--text-faint)); padding: var(--syn-solr-grouphead-padding, 10px 9px 6px); display: flex; align-items: center; gap: var(--syn-solr-grouphead-gap, 5px); min-width: 0; overflow-wrap: break-word; }
.syn-solr-grouphead.is-first { padding-top: 0; }
.syn-solr-grouphead.on { color: var(--syn-solr-grouphead-on-color, var(--text-ink)); background: var(--syn-solr-grouphead-on-background, var(--surface-canvas)); border-radius: var(--syn-solr-grouphead-on-border-radius, var(--radius-sm)); }
.syn-solr-grouplabel { cursor: pointer; min-width: 0; overflow-wrap: break-word; }
/* UD7 (A4 text-scale R11/R12): outline row text + stamp words are READING class — rem at
   M-equivalence per TEXT-SIZE-LAW; the row's geometry and every chrome seat stay px. */
.syn-solr-row { display: flex; align-items: flex-start; width: 100%; font: var(--syn-solr-row-font, 400 0.75rem/1.45 var(--type-family)); color: var(--syn-solr-row-color, var(--text-muted)); padding: var(--syn-solr-row-padding, 4px 9px); border: none; border-radius: var(--syn-solr-row-border-radius, var(--radius-sm)); background: transparent; text-align: left; cursor: pointer; }
.syn-solr-row:hover { color: var(--syn-solr-row-hover-color, var(--text-ink)); }
.syn-solr-row.on { font-weight: var(--syn-solr-row-on-font-weight, 600); color: var(--syn-solr-row-on-color, var(--text-ink)); background: var(--syn-solr-row-on-background, var(--surface-canvas)); }
/* UD13 (Relay 34 delta 5a, THE IN-RUN COMPANION RULE + Ken's breathing gap): the row number is an
   IN-RUN companion — it rides the row's reading class (inherited rem) and scales with it; the fixed
   column is cut to the XL worst case ("10.0" at XL -> 32px, right-aligned) and the run-internal gap
   declares in EM (0.6em) so it breathes with the step. Fixed-px gaps bind chrome-to-chrome seams only. */
.syn-solr-rownum { min-width: var(--syn-solr-rownum-min-width, 32px); flex: none; white-space: nowrap; text-align: right; margin-right: var(--syn-solr-rownum-margin-right, 0.6em); color: var(--syn-solr-rownum-color, var(--text-faint)); font-weight: var(--syn-solr-rownum-font-weight, 500); }   /* UD26 (A12 3.8/3.9): the seat FITS its designator — a "SECTION B" no longer wraps into the title; 32px stays the floor so the ordinals keep their column */
.syn-solr-rownum.is-date { width: var(--syn-solr-rownum-is-date-width, 44px); }
.syn-solr-rowtext { flex: 1; min-width: 0; }
.syn-solr-grouphead.is-release { padding: var(--syn-solr-grouphead-is-release-padding, 8px 8px 4px); }
.syn-solr-grouphead.is-release.is-first { padding-top: 0; }
.syn-solr-filerow { display: block; width: 100%; text-align: left; font: var(--syn-solr-filerow-font, 400 11.5px/1.4 var(--type-family)); color: var(--syn-solr-filerow-color, var(--text-muted)); padding: var(--syn-solr-filerow-padding, 3px 8px); border: none; border-radius: var(--syn-solr-filerow-border-radius, var(--radius-sm)); background: transparent; cursor: pointer; overflow-wrap: break-word; }
.syn-solr-filerow.on { font-weight: var(--syn-solr-filerow-on-font-weight, 600); color: var(--syn-solr-filerow-on-color, var(--text-ink)); background: var(--syn-solr-filerow-on-background, var(--surface-canvas)); }

/* ── SOL-4 / SOL-4b THE READER (relay 41 §1 as returned — the comp is the spec; [REBUILD-SOL-3]): the outline lane —
   the anchor pills (the UNSET pill is a DOOR into Manage > Anchors, 0i), the FILES head, the Government filenames in
   the mono machine-string register (canonical document names died — the vocabulary sweep), the outline rows ── */
.syn-solr-search.is-armed { border-color: var(--syn-solr-search-is-armed-border-color, var(--border-strong)); }
.syn-solr-search.is-armed input { color: var(--syn-solr-search-is-armed-input-color, var(--text-ink)); }
.syn-solr-searchclear { border: none; background: transparent; padding: 0; color: var(--syn-solr-searchclear-color, var(--text-tertiary)); cursor: pointer; display: inline-flex; flex: none; }
.syn-solr-searchclear:hover { color: var(--syn-solr-searchclear-hover-color, var(--text-ink)); }
/* t30 THE LANE'S HEAD IS STICKY WHOLE: the search box AND the pills stick together at the lane's top while the outline (or the
   hits) scrolls beneath — t8's pills-only stick folds into this wrapper (the map stays flush beneath its pill) */
.syn-solr-lanetop { position: sticky; top: 0; z-index: 2; background: var(--syn-solr-lanetop-background, var(--surface-plane)); padding-bottom: var(--syn-solr-lanetop-padding-bottom, 2px); }   /* relay 43 lane-head: 2 at rest */
.syn-solr-lanetop.is-stuck { padding-bottom: var(--syn-solr-lanetop-is-stuck-padding-bottom, 6px); }   /* relay 43 lane-head-stuck: 6 with the hits beneath */
.syn-solr-anchors { display: flex; flex-wrap: wrap; gap: var(--syn-solr-anchors-gap, 5px); padding: var(--syn-solr-anchors-padding, 0 0 12px); }
.syn-solr-pill { display: inline-flex; align-items: center; gap: var(--syn-solr-pill-gap, 5px); border: none; border-radius: var(--syn-solr-pill-border-radius, var(--shape-radius-pill)); background: var(--syn-solr-pill-background, var(--surface-inset)); padding: var(--syn-solr-pill-padding, 3px 10px); font: var(--syn-solr-pill-font, 500 10.5px var(--type-family)); color: var(--syn-solr-pill-color, var(--text-body)); white-space: nowrap; cursor: pointer; }
.syn-solr-pill:hover { background: var(--syn-solr-pill-hover-background, var(--surface-hover)); }
.syn-solr-pill .syn-solr-pilllabel { font-weight: var(--syn-solr-pill-solr-pilllabel-font-weight, 600); color: var(--syn-solr-pill-solr-pilllabel-color, var(--text-muted)); }
/* the unset seat: dashed, no ground — and a DOOR (0i): the invite in accent act ink, existing only while unset */
.syn-solr-pill.is-unset { border: var(--syn-solr-pill-is-unset-border, 1px dashed var(--border-emphasis)); background: none; padding: var(--syn-solr-pill-is-unset-padding, 2px 10px); color: var(--syn-solr-pill-is-unset-color, var(--text-faint)); }
.syn-solr-pill.is-unset .syn-solr-pilllabel { color: var(--syn-solr-pill-is-unset-solr-pilllabel-color, var(--text-faint)); }
.syn-solr-pill.is-unset:hover { background: var(--syn-solr-pill-is-unset-hover-background, var(--surface-hover)); }
.syn-solr-pillact { color: var(--syn-solr-pillact-color, var(--accent-action)); }
.syn-solr-pill.is-armed { box-shadow: var(--syn-solr-pill-is-armed-box-shadow, var(--pill-armed-ring)); }   /* relay 42 23a: the pill arms while its popover is open — a shadow, never a border (zero reflow); t36s (h): the ring draws INSIDE the box, so the lane head's clip never crops its left leg */
.syn-solr-pillshell { --popover-floor: 0px; --popover-max: 380px; }   /* t8: the map's shell takes no floor — the map is its content's width */
.syn-solr-pillpop { width: max-content; max-width: var(--syn-solr-pillpop-max-width, 380px); box-sizing: border-box; background: var(--syn-solr-pillpop-background, var(--surface-plane)); border: var(--syn-solr-pillpop-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solr-pillpop-border-radius, var(--shape-radius-control)); box-shadow: var(--syn-solr-pillpop-box-shadow, var(--elevation-raised)); overflow: hidden; padding: var(--syn-solr-pillpop-padding, 4px 0); }
.syn-solr-pillrow { display: flex; align-items: baseline; gap: var(--syn-solr-pillrow-gap, 8px); width: 100%; padding: var(--syn-solr-pillrow-padding, 6px 12px); border: none; background: transparent; text-align: left; cursor: pointer; font: var(--syn-solr-pillrow-font, 400 12px var(--type-family)); color: var(--syn-solr-pillrow-color, var(--text-body)); }
.syn-solr-pillrow:hover { background: var(--syn-solr-pillrow-hover-background, var(--surface-hover)); }
.syn-solr-pillrow.is-current { box-shadow: var(--syn-solr-pillrow-is-current-box-shadow, var(--row-current-edge)); font-weight: var(--syn-solr-pillrow-is-current-font-weight, 500); color: var(--syn-solr-pillrow-is-current-color, var(--text-ink)); }
.syn-solr-pillrow .syn-solr-pillnum { width: var(--syn-solr-pillrow-solr-pillnum-width, 30px); flex: none; font: var(--syn-solr-pillrow-solr-pillnum-font, 500 10.5px var(--type-family-mono)); color: var(--syn-solr-pillrow-solr-pillnum-color, var(--text-faint)); }
.syn-solr-pillrow .syn-solr-pillhead { flex: 1; min-width: 0; }
.syn-solr-pillrow .syn-solr-pillcurrent { font: var(--syn-solr-pillrow-solr-pillcurrent-font, 400 9.5px var(--type-family)); color: var(--syn-solr-pillrow-solr-pillcurrent-color, var(--text-rider)); white-space: nowrap; }
.syn-solr-docrow.is-marked { box-shadow: var(--syn-solr-docrow-is-marked-box-shadow, var(--row-current-edge)); }   /* relay 42 24: a lit section inside a collapsed document lights the document row */
.syn-solr-lanehead { font: var(--syn-solr-lanehead-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-solr-lanehead-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solr-lanehead-text-transform, var(--type-label-transform)); color: var(--syn-solr-lanehead-color, var(--text-faint)); padding: var(--syn-solr-lanehead-padding, 0 9px 6px); }
.syn-solr-lanehead.is-hits { padding-top: var(--syn-solr-lanehead-is-hits-padding-top, 4px); }   /* relay 43 read-search: the hits head sits 4 px under the stuck lane head */
.syn-solr-docrow { display: flex; align-items: center; gap: var(--syn-solr-docrow-gap, 5px); font: var(--syn-solr-docrow-font, 400 12px/1.45 var(--type-family)); color: var(--syn-solr-docrow-color, var(--text-muted)); padding: var(--syn-solr-docrow-padding, 3px 9px 3px 5px); border-radius: var(--syn-solr-docrow-border-radius, var(--radius-sm)); min-width: 0; }
.syn-solr-docrow.on { font-weight: var(--syn-solr-docrow-on-font-weight, 600); color: var(--syn-solr-docrow-on-color, var(--text-ink)); background: var(--syn-solr-docrow-on-background, var(--surface-canvas)); padding-top: var(--syn-solr-docrow-on-padding-top, 4px); padding-bottom: var(--syn-solr-docrow-on-padding-bottom, 4px); }
.syn-solr-docrow.is-degraded { padding: var(--syn-solr-docrow-is-degraded-padding, 3px 8px); }
.syn-solr-docdoor { width: var(--syn-solr-docdoor-width, 18px); height: var(--syn-solr-docdoor-height, 18px); flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; color: var(--syn-solr-docdoor-color, var(--text-tertiary)); cursor: pointer; border-radius: var(--syn-solr-docdoor-border-radius, var(--radius-xs)); }
.syn-solr-docdoor:hover { background: var(--syn-solr-docdoor-hover-background, var(--surface-hover)); color: var(--syn-solr-docdoor-hover-color, var(--text-ink)); }
.syn-solr-docname { flex: 1; min-width: 0; text-align: left; border: none; background: transparent; padding: 0; font: var(--syn-solr-docname-font, 500 10.5px/1.5 var(--type-family-mono)); color: inherit; cursor: pointer; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* t9: two lines at most (the words carry the middle ellipsis; the full name rides the title) */
.syn-solr-docpages { font: var(--syn-solr-docpages-font, 400 10px var(--type-family)); color: var(--syn-solr-docpages-color, var(--text-rider)); flex: none; }
.syn-solr-docverdict { color: var(--syn-solr-docverdict-color, var(--state-warning-text)); display: inline-flex; flex: none; }
/* t36 (h) ([REBUILD-SOL-9], Ken): THE LANE IS PURE NAVIGATION — designator · heading, nothing else (the flag picker and the
   Technical approach switch left for the roster and the Text face's heading seat); the row TOP-ALIGNS — the number's line
   box sits on the heading's FIRST line (many headings wrap on the real corpus), never centered down the block */
.syn-solr-orow { display: flex; align-items: flex-start; width: 100%; box-sizing: border-box; font: var(--syn-solr-orow-font, 400 0.75rem/1.45 var(--type-family)); color: var(--syn-solr-orow-color, var(--text-muted)); padding: var(--syn-solr-orow-padding, 3px 9px 3px 28px); border: none; border-radius: var(--syn-solr-orow-border-radius, var(--radius-sm)); background: transparent; text-align: left; cursor: pointer; }
.syn-solr-orow:hover { background: var(--syn-solr-orow-hover-background, var(--surface-hover)); }   /* relay 43 lane-hovered-row */
.syn-solr-orider { color: var(--syn-solr-orider-color, var(--text-rider)); font-size: var(--syn-solr-orider-font-size, 10.5px); }
.syn-solr-orow.is-d2 { padding-left: var(--syn-solr-orow-is-d2-padding-left, 40px); }
.syn-solr-orow.is-d3 { padding-left: var(--syn-solr-orow-is-d3-padding-left, 52px); }
.syn-solr-orow:hover { color: var(--syn-solr-orow-hover-color, var(--text-ink)); }
.syn-solr-orow.on { font-weight: var(--syn-solr-orow-on-font-weight, 600); color: var(--syn-solr-orow-on-color, var(--text-ink)); background: var(--syn-solr-orow-on-background, var(--surface-canvas)); }
.syn-solr-orow.is-marked { box-shadow: var(--syn-solr-orow-is-marked-box-shadow, var(--row-current-edge)); }   /* SOL-5 R4: every section an anchor pill's click lit */
.syn-solr-onum { min-width: var(--syn-solr-onum-min-width, 30px); flex: none; margin-right: var(--syn-solr-onum-margin-right, 6px); color: var(--syn-solr-onum-color, var(--text-faint)); font-weight: var(--syn-solr-onum-font-weight, 500); font-size: var(--syn-solr-onum-font-size, 10.5px); line-height: var(--syn-solr-onum-line-height, 17px); white-space: nowrap; }   /* the seat FITS its designator ("SECTION B") — 30px is the floor, never a clip; its line box = the heading's first line (t36 h) */
/* t36 (h): words NEVER break mid-word ("PERFORMANC / E WORK") — a heading wraps at word boundaries; a single token longer than
   the column ellipsizes on its own line (text-overflow applies per line box under overflow hidden), the full text on the title */
.syn-solr-otext { flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; overflow: hidden; text-overflow: ellipsis; }
.syn-solr-posture { font: var(--syn-solr-posture-font, 400 11px/1.5 var(--type-family)); color: var(--syn-solr-posture-color, var(--text-tertiary)); padding: var(--syn-solr-posture-padding, 3px 9px 6px 28px); }
/* search hits in the lane (read-search): the hits head, then per-document MONO filename group heads (a hit eyebrow can no
   longer say "RFP" — canonical names died), the locator eyebrow (page · printed designator) over the snippet */
.syn-solr-hitgroup { font: var(--syn-solr-hitgroup-font, 500 8.5px var(--type-family-mono)); color: var(--syn-solr-hitgroup-color, var(--text-rider)); padding: var(--syn-solr-hitgroup-padding, 6px 9px 3px); overflow-wrap: anywhere; }
.syn-solr-hitgroup.is-first { padding-top: 0; }
.syn-solr-hitrow { display: flex; flex-direction: column; gap: var(--syn-solr-hitrow-gap, 1px); width: 100%; padding: var(--syn-solr-hitrow-padding, 6px 9px); border: none; border-radius: var(--syn-solr-hitrow-border-radius, var(--radius-sm)); background: transparent; text-align: left; cursor: pointer; }
.syn-solr-hitrow.on { background: var(--syn-solr-hitrow-on-background, var(--surface-canvas)); }
.syn-solr-hiteyebrow { font: var(--syn-solr-hiteyebrow-font, 600 8.5px var(--type-family-mono)); letter-spacing: var(--syn-solr-hiteyebrow-letter-spacing, .05em); color: var(--syn-solr-hiteyebrow-color, var(--text-tertiary)); }
.syn-solr-hitsnippet { font: var(--syn-solr-hitsnippet-font, 400 11.5px/1.45 var(--type-family)); color: var(--syn-solr-hitsnippet-color, var(--text-muted)); }
.syn-solr-hitrow.on .syn-solr-hitsnippet { color: var(--syn-solr-hitrow-on-solr-hitsnippet-color, var(--text-body)); }
.syn-solr-hitsnippet b { font-weight: var(--syn-solr-hitsnippet-b-font-weight, 600); }
.syn-solr-hitrow.on .syn-solr-hitsnippet b { color: var(--syn-solr-hitrow-on-solr-hitsnippet-b-color, var(--text-ink)); }

/* the measure — the two faces at one position. PAGES = pdf.js on the rendition (SOL-4b(b)): one canvas per page on the
   paper family, text-selectable, pages separated by the 18px paper gap alone — THE PAGE RULE IS DEAD; ONE quiet mono
   header per DOCUMENT boundary (filename verbatim · release label) is the only in-measure naming; the floating page
   indicator is seated by solr-pdf.js at the measure's bottom-right and fades ~1 s after the scroll stops. */
.syn-solr-measure { min-width: 0; }
.syn-solr-strip { min-width: 0; position: relative; }
/* t13 THE PANE HAS A HEAD (Ken's second sight): each document is a BLOCK; its boundary head (filename · release) is STICKY at
   the top of the measure while the document is in view, over the 1px paper-edge rule; the next document's head pushes it
   out. A jump lands a page just beneath it (scroll-margin). */
.syn-solr-docblock { min-width: 0; }
.syn-solr-boundary { position: sticky; top: 0; z-index: 3; display: flex; align-items: baseline; gap: var(--syn-solr-boundary-gap, 8px); height: var(--syn-solr-boundary-height, 28px); box-sizing: border-box; padding: var(--syn-solr-boundary-padding, 2px 0 8px); margin-bottom: var(--syn-solr-boundary-margin-bottom, 8px); background: var(--syn-solr-boundary-background, var(--surface-plane)); border-bottom: var(--syn-solr-boundary-border-bottom, 1px solid var(--paper-edge)); }
.syn-solr-boundary.is-search { padding-top: 0; }   /* relay 43 read-search: the search state's head carries no top padding */
.syn-solr-boundaryname { font: var(--syn-solr-boundaryname-font, 600 12.5px/1.4 var(--type-family-mono)); letter-spacing: var(--syn-solr-boundaryname-letter-spacing, .01em); color: var(--syn-solr-boundaryname-color, var(--text-ink)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* t36 (k) / relay 44 §2: the ramp — 600 12.5 mono --text-primary, chrome class; ONE line, the middle ellipsis in the words, the full name on the title; the release label quiet beside it */   /* TF-50: ONE line — the words carry the middle ellipsis (HeadFilename), the CSS tail ellipsis is the backstop, the full name rides the title */
.syn-solr-boundaryrel { font: var(--syn-solr-boundaryrel-font, 500 10px var(--type-family-mono)); color: var(--syn-solr-boundaryrel-color, var(--text-rider)); white-space: nowrap; }
.syn-solr-pdfdoc { min-width: 0; margin-bottom: var(--syn-solr-pdfdoc-margin-bottom, 18px); display: flow-root; }   /* t12: the host is a formatting root — a page's sub-pixel top lift never collapses into the head's margin */
.syn-solr-pdfdoc:last-child { margin-bottom: 0; }
/* t12 PIXEL-EXACT: the page box IS the canvas's box (no layout border — the paper edge is a shadow), sized and placed by
   solr-pdf.js on whole device pixels; margin auto is the placeholder's centring until the snap pass writes the margins */
/* t22: THE PAGE BOX KEEPS ITS EDGE — the 1 px paper-edge ring is an OUTLINE (device-snapped like a border, no layout —
   the t12 snap discipline stands); a box-shadow ring anti-aliased into nothing under display scaling. The shadow stays for depth. */
.syn-solr-pdfpage { position: relative; box-sizing: border-box; width: 100%; margin: 0 auto; background: var(--syn-solr-pdfpage-background, var(--paper)); border: none; outline: var(--syn-solr-pdfpage-outline, 1px solid var(--paper-edge)); outline-offset: var(--syn-solr-pdfpage-outline-offset, -1px); box-shadow: var(--syn-solr-pdfpage-box-shadow, var(--elevation-plane)); overflow: hidden; scroll-margin-top: 28px; }   /* t36s (i): the ring draws INWARD — at rest the page fills its column to the edge and an outward ring's side legs fell outside the clip; the t12 device-pixel edge stands */
.syn-solr-pdfpage canvas { display: block; }
.syn-solr-theadrow, .syn-solr-block, .syn-solr-degraded { scroll-margin-top: 30px; }
.syn-solr-pagegap { height: var(--syn-solr-pagegap-height, 18px); }
/* the pdf.js text layer (selection + copy): transparent glyph boxes over the canvas at the viewport's --scale-factor */
.syn-solr-pdftext { position: absolute; inset: 0; overflow: hidden; line-height: var(--syn-solr-pdftext-line-height, 1); text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 1; }
.syn-solr-pdftext span, .syn-solr-pdftext br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.syn-solr-pdftext ::selection { background: var(--syn-solr-pdftext-selection-background, var(--selection-wash)); }
/* SOL-5 R3 THE BLACK BOX: pdf.js's TextLayer appends a measuring canvas (class hiddenCanvasElement, an alpha:false
   context — opaque black) to document.body; its own viewer sheet hides it and ours never did, so a 300×150 black
   rectangle sat bottom-left of the site whenever a page's text layer had rendered. The rule pdf_viewer.css carries. */
.hiddenCanvasElement { display: none; }
.syn-solr-pageindicator { position: fixed; right: var(--syn-solr-pageindicator-right, 12px); bottom: var(--syn-solr-pageindicator-bottom, 16px); z-index: 2; opacity: var(--syn-solr-pageindicator-opacity, 0); transition: var(--syn-solr-pageindicator-transition, opacity var(--motion-duration-slow) var(--motion-easing)); pointer-events: none; background: var(--syn-solr-pageindicator-background, var(--surface-plane)); border: var(--syn-solr-pageindicator-border, 1px solid var(--border-default)); border-radius: var(--syn-solr-pageindicator-border-radius, var(--shape-radius-pill)); box-shadow: var(--syn-solr-pageindicator-box-shadow, var(--segment-active-shadow)); padding: var(--syn-solr-pageindicator-padding, 3px 11px); font: var(--syn-solr-pageindicator-font, 500 10px var(--type-family-mono)); color: var(--syn-solr-pageindicator-color, var(--text-muted)); white-space: nowrap; }
.syn-solr-pageindicator.is-shown { opacity: var(--syn-solr-pageindicator-is-shown-opacity, 1); }
.syn-solr-hitbox { position: absolute; z-index: 2; box-sizing: content-box; padding: var(--syn-solr-hitbox-padding, 4px 6px); background: var(--syn-solr-hitbox-background, var(--hit-wash)); box-shadow: var(--syn-solr-hitbox-box-shadow, var(--hit-ring)); border-radius: var(--syn-solr-hitbox-border-radius, var(--radius-3xs)); pointer-events: none; }
/* the Text face: ONE COLUMN (Ken 2026-09-11) — the number in the 56px gutter once (stripped from the heading), the T1
   ladder (20 / 17 / 16) with the toggle at the right edge, plain reading paragraphs on the plane (the per-section paper
   boxes are dead), quiet page rules at page boundaries only ("p. n begins" names the page below the rule), no body for
   a heading with no direct text. */
/* t15 (Ken's second sight): the Text column is AS WIDE AS THE PAGE in the Pages face (816 at 100 %) so the two faces share a
   measure and swap at position (CD's 764 cap withdrawn); the toggle sits at the COLUMN's right edge; the gutter number
   shares the heading's line box and baseline (both cells align on the baseline). */
.syn-solr-textface { min-width: 0; }
.syn-solr-text { --solr-gutter-wash: calc(-1 * var(--solr-gutter, 56px)) 0 0 0 var(--surface-hover); min-width: 0; width: var(--syn-solr-text-width, min(100%, 816px)); margin: 0 auto; display: grid; grid-template-columns: var(--syn-solr-text-grid-template-columns, var(--solr-gutter, 56px) minmax(0, 1fr)); column-gap: 0; align-content: start; }   /* TF-52: the gutter sized to the reading's longest designator (SolicitationReader.GutterFor), 56 at least */
.syn-solr-text > .syn-solr-boundary, .syn-solr-text > .syn-solr-statusseat { grid-column: 1 / -1; }
.syn-solr-text > .syn-solr-boundary.is-text { padding-top: var(--syn-solr-text-solr-boundary-is-text-padding-top, 18px); }
.syn-solr-text > .syn-solr-boundary.is-text:first-child { padding-top: var(--syn-solr-text-solr-boundary-is-text-first-child-padding-top, 2px); }
/* UI-PX-2 (17), Relay 49a CANON-DELTA 11 — THE RESERVED STATUS LINE: the seat holds the sentence's ONE-LINE footprint (12 × 1.5 + 8 + 8 + the
   two 1 px borders = 36, px by the sentence's own px face) + its 10 px margin on EVERY document, sentence or none — nothing beneath it jumps
   when a landing takes the sentence away. */
.syn-solr-text > .syn-solr-statusseat { min-height: var(--syn-solr-text-solr-statusseat-min-height, 36px); margin: var(--syn-solr-text-solr-statusseat-margin, 0 0 10px); box-sizing: border-box; }
.syn-solr-statusseat > .syn-solr-degradedsentence { margin: 0; }
.syn-solr-tgut { font: var(--syn-solr-tgut-font, 500 13px/1.35 var(--type-family-mono)); color: var(--syn-solr-tgut-color, var(--text-faint)); margin-top: var(--syn-solr-tgut-margin-top, 18px); min-width: 0; white-space: nowrap; align-self: baseline; position: relative; z-index: 1; }   /* t36s (j): the spacing above is MARGIN — the hover ground hugs the line; t36u: the number reads above the heading row's band */
.syn-solr-tgut.is-first { margin-top: 0; }
.syn-solr-tgut.is-plain { margin-top: var(--syn-solr-tgut-is-plain-margin-top, 4px); }
.syn-solr-tgut.is-d2, .syn-solr-tgut.is-d3 { font-size: var(--syn-solr-tgut-is-d2-font-size, 12px); }
.syn-solr-tgut.is-after-empty { margin-top: var(--syn-solr-tgut-is-after-empty-margin-top, 10px); }
.syn-solr-theadrow { display: flex; align-items: baseline; gap: var(--syn-solr-theadrow-gap, 10px); margin-top: var(--syn-solr-theadrow-margin-top, 18px); min-width: 0; align-self: baseline; }   /* relay 44 read-text-toggle: the seats ride the heading's FIRST line; t36s (j): margin, not padding — the ground is the line; t36u truing: the row's box stays in its own column — 46a pins the row's padding-left at 0, so the band's reach over the number is the hover rule's own (below), never the row's box */
.syn-solr-theadrow.is-d1, .syn-solr-tgut.is-d1 { margin-top: var(--syn-solr-theadrow-is-d1-margin-top, 22px); }   /* relay 44 read-text-toggle: a top-level heading sits 22 beneath the run above (a nested one 18) */
.syn-solr-theadrow.is-first, .syn-solr-tgut.is-first { margin-top: 0; }
.syn-solr-theadrow.is-after-empty { margin-top: var(--syn-solr-theadrow-is-after-empty-margin-top, 10px); }
.syn-solr-thead { margin: 0; flex: 1; min-width: 0; font: var(--syn-solr-thead-font, var(--type-t1)); color: var(--syn-solr-thead-color, var(--text-ink)); letter-spacing: var(--syn-solr-thead-letter-spacing, -0.01em); }
.syn-solr-thead.is-nested { font: var(--syn-solr-thead-is-nested-font, var(--type-t1-d2)); }
.syn-solr-thead.is-d3 { font: var(--syn-solr-thead-is-d3-font, var(--type-t1-file)); }
.syn-solr-toggle { display: inline-flex; align-items: center; gap: var(--syn-solr-toggle-gap, 7px); flex: none; align-self: flex-start; margin-top: var(--syn-solr-toggle-margin-top, 3px); }   /* relay 44: on a wrapped heading the toggle rides the first line (flex-start + 3) */
.syn-solr-togglelabel { font: var(--syn-solr-togglelabel-font, 400 10.5px var(--type-family)); color: var(--syn-solr-togglelabel-color, var(--text-tertiary)); white-space: nowrap; }
.syn-solr-togglelabel.is-faint { color: var(--syn-solr-togglelabel-is-faint-color, var(--text-rider)); }
.syn-switch.is-small { width: var(--syn-switch-is-small-width, 28px); height: var(--syn-switch-is-small-height, 16px); }
.syn-switch.is-dense { width: var(--syn-switch-is-dense-width, 24px); height: var(--syn-switch-is-dense-height, 14px); }   /* t35 (b): the lane's scale (relay 43 solution-outline-toggle) */
.syn-switch.is-dense > span, .syn-switch.is-dense .syn-switch-knob { width: var(--syn-switch-is-dense-span-width, 10px); height: var(--syn-switch-is-dense-span-height, 10px); border-radius: var(--syn-switch-is-dense-span-border-radius, var(--shape-radius-pill)); background: var(--syn-switch-is-dense-span-background, var(--surface-plane)); }
.syn-switch.is-small > span, .syn-switch.is-small .syn-switch-knob { width: var(--syn-switch-is-small-span-width, 12px); height: var(--syn-switch-is-small-span-height, 12px); border-radius: var(--syn-switch-is-small-span-border-radius, var(--shape-radius-pill)); background: var(--syn-switch-is-small-span-background, var(--surface-plane)); }
.syn-solr-tbody { min-width: 0; margin-top: var(--syn-solr-tbody-margin-top, 8px); }
.syn-solr-tbody.is-plain { margin-top: 0; }
.syn-solr-block { margin: var(--syn-solr-block-margin, 8px 0 0); font: var(--syn-solr-block-font, 400 0.8125rem/1.65 var(--type-family)); color: var(--syn-solr-block-color, var(--text-body)); text-wrap: pretty; white-space: pre-wrap; }
.syn-solr-block:first-child { margin-top: 0; }
.syn-solr-block.is-hit { background: var(--syn-solr-block-is-hit-background, var(--hit-wash)); box-shadow: var(--syn-solr-block-is-hit-box-shadow, var(--hit-ring)); border-radius: var(--syn-solr-block-is-hit-border-radius, var(--radius-3xs)); }
.syn-solr-hit { background: var(--syn-solr-hit-background, var(--hit-wash)); color: inherit; border-radius: var(--syn-solr-hit-border-radius, var(--radius-2xs)); }
.syn-solr-cellsep { color: var(--syn-solr-cellsep-color, var(--text-faint)); margin: var(--syn-solr-cellsep-margin, 0 0.4em); }   /* SOL-4b(e): the quiet cell separator of a TRUE table row (SOL-5 R5e) */
/* SOL-5 R5: a bullet block is a LIST ITEM — the marker in the item's own gutter, never a glyph in the text; a FORM PAGE is one quiet line */
.syn-solr-block.is-bullet { position: relative; padding-left: var(--syn-solr-block-is-bullet-padding-left, 1.25em); margin-top: var(--syn-solr-block-is-bullet-margin-top, 4px); }
.syn-solr-block.is-bullet::before { content: "\2022"; position: absolute; left: var(--syn-solr-block-is-bullet-before-left, 0.35em); top: 0; color: var(--syn-solr-block-is-bullet-before-color, var(--text-tertiary)); }
.syn-solr-block.is-bullet + .syn-solr-block.is-bullet { margin-top: var(--syn-solr-block-is-bullet-solr-block-is-bullet-margin-top, 2px); }
.syn-solr-formline { font: var(--syn-solr-formline-font, 400 11.5px var(--type-family)); color: var(--syn-solr-formline-color, var(--text-tertiary)); font-style: var(--syn-solr-formline-font-style, italic); }
.syn-solr-pagerule { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--syn-solr-pagerule-gap, 10px); padding: var(--syn-solr-pagerule-padding, 14px 0); }
.syn-solr-ruleline { flex: 1; height: var(--syn-solr-ruleline-height, 1px); background: var(--syn-solr-ruleline-background, var(--border-default)); }
.syn-solr-rulewords { font: var(--syn-solr-rulewords-font, 500 9.5px var(--type-family-mono)); letter-spacing: var(--syn-solr-rulewords-letter-spacing, .05em); color: var(--syn-solr-rulewords-color, var(--text-tertiary)); white-space: nowrap; }
/* Manage > Anchors (manage-anchors, 0i): the ONE place the three anchors are set — head · words · one row per anchor; a
   placed row rides the borderless dense picker at rest (hover reveals the border), the unset row is the dashed
   blank seat with the invite "Pick a section" */
/* ── t35 (a)+(b) THE FLAG PICKER (relay 43 manage-roster-picker · solution-outline-toggle): ONE control, two seats. The trigger
   IS the row's flag seat: at rest its VALUE — the quiet chips — sits flush (the ring's padding is absorbed by a negative margin,
   so arming never moves the value); a bare row's empty "Flags" trigger is a RESERVED slot revealed on the row's hover (the toggle
   beside it never moves); the chevron's slot is reserved too. The popover = the anchored species, the three words, the 3px
   selection mark. Dense = the lane's scale. ── */
.syn-solfl { display: inline-flex; align-items: center; flex: none; min-width: 0; }
.syn-solfl-trigger { display: inline-flex; align-items: center; gap: var(--syn-solfl-trigger-gap, 4px); border: var(--syn-solfl-trigger-border, 1px solid transparent); border-radius: var(--syn-solfl-trigger-border-radius, var(--radius-sm)); background: transparent; padding: var(--syn-solfl-trigger-padding, 2px 8px); margin: var(--syn-solfl-trigger-margin, -3px -9px); cursor: pointer; color: var(--syn-solfl-trigger-color, var(--text-tertiary)); transition: var(--syn-solfl-trigger-transition, opacity var(--motion-duration-fast), border-color var(--motion-duration-fast)); }
.syn-solfl.is-bare .syn-solfl-trigger { margin: var(--syn-solfl-is-bare-solfl-trigger-margin, -3px 0); opacity: var(--syn-solfl-is-bare-solfl-trigger-opacity, 0); border-color: var(--syn-solfl-is-bare-solfl-trigger-border-color, var(--border-emphasis)); background: var(--syn-solfl-is-bare-solfl-trigger-background, var(--surface-plane)); }   /* TF-56: the hidden trigger's box never grows the row — its height is absorbed like the ring's, so a bare row stands as tall as a chipped one and the first pick never shrinks it */
.syn-solfl-label { font: var(--syn-solfl-label-font, 400 10.5px var(--type-family)); color: var(--syn-solfl-label-color, var(--text-tertiary)); white-space: nowrap; }
.syn-solfl-chips { display: inline-flex; gap: var(--syn-solfl-chips-gap, 4px); }
.syn-solfl-chip { display: inline-flex; align-items: center; border-radius: var(--syn-solfl-chip-border-radius, var(--shape-radius-pill)); background: var(--syn-solfl-chip-background, var(--surface-inset)); padding: var(--syn-solfl-chip-padding, 2px 9px); font: var(--syn-solfl-chip-font, 600 10px var(--type-family)); color: var(--syn-solfl-chip-color, var(--text-muted)); white-space: nowrap; }
.syn-solfl-trigger .syn-chevron { opacity: var(--syn-solfl-trigger-chevron-opacity, 0); transition: var(--syn-solfl-trigger-chevron-transition, opacity var(--motion-duration-fast)); }
/* the picker's two seats (F8, relay 44 read-text-toggle): the roster's row and the Text face's heading row reveal the trigger on hover alike */
.syn-solmg-row:hover .syn-solfl-trigger, .syn-solr-theadrow:hover .syn-solfl-trigger, .syn-solfl.is-armed .syn-solfl-trigger, .syn-solfl-trigger:focus-visible { opacity: var(--syn-solmg-row-hover-solfl-trigger-opacity, 1); }
.syn-solmg-row:hover .syn-solfl.has-chips .syn-solfl-trigger, .syn-solr-theadrow:hover .syn-solfl.has-chips .syn-solfl-trigger { border-color: var(--syn-solmg-row-hover-solfl-has-chips-solfl-trigger-border-color, var(--border-emphasis)); background: var(--syn-solmg-row-hover-solfl-has-chips-solfl-trigger-background, var(--surface-plane)); }
.syn-solmg-row:hover .syn-solfl-trigger .syn-chevron, .syn-solr-theadrow:hover .syn-solfl-trigger .syn-chevron, .syn-solfl.is-armed .syn-solfl-trigger .syn-chevron { opacity: var(--syn-solmg-row-hover-solfl-trigger-chevron-opacity, 1); }
/* t36s (j) THE HOVER GROUND IS THE LINE, NUMBER INCLUDED: the ground spans the number gutter and the heading row as one band (the two
   grid cells paint together — hovering either lights both), one line tall for a one-line heading; the controls sit centred in the line box.
   t36u truing: the gutter's share of the ONE band is the row's ground shifted left by the gutter's width — a box-shadow at the gutter's
   offset (no blur, no spread, the ground's own colour; the tokens are opaque in both themes, so the join is invisible) — painted outside
   the row's box, so the row's pinned padding-left 0 and its box in its column stand; the gutter paints no ground of its own and its
   number, positioned above, reads over the band; the shadow rides the row's radius at the band's left end. */
.syn-solr-theadrow:hover, .syn-solr-tgut:hover + .syn-solr-theadrow { background: var(--syn-solr-theadrow-hover-background, var(--surface-hover)); border-radius: var(--syn-solr-theadrow-hover-border-radius, var(--radius-sm)); box-shadow: var(--syn-solr-theadrow-hover-box-shadow, var(--solr-gutter-wash)); }   /* relay 44 text-heading-hovered; t36u: the one band, the number's column inside it */
.syn-solr-theadrow .syn-solr-toggle { align-self: center; }
.syn-solr-toggle .syn-solfl { margin-right: var(--syn-solr-toggle-solfl-margin-right, 3px); }   /* the comp's gap 10 between the picker and the toggle (the group's 7 + 3) */
.syn-solfl.is-armed .syn-solfl-trigger { border-color: var(--syn-solfl-is-armed-solfl-trigger-border-color, var(--border-strong)); background: var(--syn-solfl-is-armed-solfl-trigger-background, var(--surface-plane)); }
.syn-solfl.is-armed.has-chips .syn-solfl-trigger { gap: var(--syn-solfl-is-armed-has-chips-solfl-trigger-gap, 5px); }
.syn-solfl-pop { width: max-content; min-width: var(--syn-solfl-pop-min-width, 150px); padding: var(--syn-solfl-pop-padding, 4px 0); border-radius: var(--syn-solfl-pop-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-solfl-opt { display: flex; align-items: center; gap: var(--syn-solfl-opt-gap, 8px); width: 100%; padding: var(--syn-solfl-opt-padding, 6px 14px 6px 11px); border: none; background: transparent; text-align: left; cursor: pointer; font: var(--syn-solfl-opt-font, 400 12px var(--type-family)); color: var(--syn-solfl-opt-color, var(--text-body)); }   /* HUDA-A4: SynMenu's row anatomy — the reserved .syn-menu-check slot leads the word (the row's 11 + 12 + 8 seats the word at the old 14 + 17) */
.syn-solfl-opt:hover { background: var(--syn-solfl-opt-hover-background, var(--surface-hover)); }
.syn-solfl-opt.is-on { font-weight: var(--syn-solfl-opt-is-on-font-weight, 500); color: var(--syn-solfl-opt-is-on-color, var(--text-ink)); }   /* the set word: the check in its slot carries the mark (SynMenu's .is-current register); the inset bar died with the stay-open multi-pick */
/* ── SOL-5 THE RELEASES LENS + THE FORMING CARD (relay 41 §2 + Intake, the comp is the spec; [REBUILD-SOL-2/3]): one shelf of one
   card species on a centered 960 band; the lens row + the header doors ride the same band (0h); the forming dress = the tinted
   inset with the dashed edge (the drop target's own vocabulary); the hover rail rides the reserved gutter at opacity, never
   layout (the affordance law: quiet text acts only there); fact/attribution riders wrap AS A UNIT (BEHAVIOR 0). ── */
.syn-solrel { display: flex; flex-direction: column; min-height: 0; }
.syn-solrel-spacer { flex: 1; }
.syn-solrel-shelf { max-width: var(--syn-solrel-shelf-max-width, 960px); width: 100%; margin: 0 auto; box-sizing: content-box; padding: var(--syn-solrel-shelf-padding, 22px 48px 32px); display: flex; flex-direction: column; gap: 0; }   /* t35 (d): the rows space themselves so the spine's line runs unbroken */
/* t35 (d) THE SPINE (relay 43 releases-lens · intake-forming-topr30): a row = the 84 px date column · the 30 px spine column · the card */
/* t36y (c) [REBUILD-SOL-17] (11) THE SPINE RULE: the dot's center and the date's line center sit ON the release title's line center on every
   card kind — computed from the card's border + the head's top padding + half the title's line box (Geist's normal line box at the head ramp's
   sizes, 17 at 12.5 · 19 at 15, declared on the labels so the type and the rule agree by construction), never placed by eye; the head's own
   padding reads the same variable; the spine line's ends follow the dot; the forming row states its title seat's parts the same way */
.syn-solrel-row { display: flex; align-items: flex-start; --spine-border: 1px; --spine-headpad: 10px; --spine-title-lh: 17px; --spine-date-lh: 17px; --spine-dot-size: 7px; --spine-title-center: calc(var(--spine-border) + var(--spine-headpad) + var(--spine-title-lh) / 2); --spine-dot: calc(var(--spine-title-center) - var(--spine-dot-size) / 2); }
.syn-solrel-row.is-open { --spine-headpad: 13px; --spine-title-lh: 19px; }
.syn-solrel-row.is-forming { --spine-dot-size: 9px; --solrel-forming-border: 1.5px; --solrel-forming-pad: 14px; --solrel-seatlabel-lh: 12px; --solrel-seat-gap: 3px; --solrel-seat-h: 28px; --spine-title-center: calc(var(--solrel-forming-border) + var(--solrel-forming-pad) + var(--solrel-seatlabel-lh) + var(--solrel-seat-gap) + var(--solrel-seat-h) / 2); }
.syn-solrel-datecol { width: var(--syn-solrel-datecol-width, 84px); flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--syn-solrel-datecol-gap, 1px); padding-top: var(--syn-solrel-datecol-padding-top, calc(var(--spine-title-center) - var(--spine-date-lh) / 2)); }
.syn-solrel-spinedate { font: var(--syn-solrel-spinedate-font, 400 12.5px var(--type-family)); line-height: var(--syn-solrel-spinedate-line-height, var(--spine-date-lh)); color: var(--syn-solrel-spinedate-color, var(--text-tertiary)); white-space: nowrap; }
.syn-solrel-row.is-open .syn-solrel-spinedate { font-weight: var(--syn-solrel-row-is-open-solrel-spinedate-font-weight, 500); color: var(--syn-solrel-row-is-open-solrel-spinedate-color, var(--text-muted)); }
.syn-solrel-spinecol { width: var(--syn-solrel-spinecol-width, 30px); flex: none; align-self: stretch; position: relative; }
.syn-solrel-spineline { position: absolute; left: var(--syn-solrel-spineline-left, 14px); top: 0; bottom: 0; width: var(--syn-solrel-spineline-width, 1px); background: var(--syn-solrel-spineline-background, var(--border-default)); }
.syn-solrel-row.is-first .syn-solrel-spineline { top: var(--syn-solrel-row-is-first-solrel-spineline-top, var(--spine-dot)); }
.syn-solrel-row.is-last .syn-solrel-spineline { bottom: auto; height: var(--syn-solrel-row-is-last-solrel-spineline-height, calc(var(--spine-dot) + 3px)); }
.syn-solrel-row.is-first.is-last .syn-solrel-spineline { display: none; }
.syn-solrel-row.is-forming .syn-solrel-spineline { bottom: auto; height: var(--syn-solrel-row-is-forming-solrel-spineline-height, calc(var(--spine-dot) + 3px)); }
.syn-solrel-row.is-forming.is-first .syn-solrel-spineline { display: none; }
.syn-solrel-spinedot { position: absolute; left: var(--syn-solrel-spinedot-left, 11px); top: var(--syn-solrel-spinedot-top, var(--spine-dot)); width: var(--syn-solrel-spinedot-width, var(--spine-dot-size)); height: var(--syn-solrel-spinedot-height, var(--spine-dot-size)); border-radius: 50%; background: var(--syn-solrel-spinedot-background, var(--border-strong)); }
.syn-solrel-spinedot.is-forming { left: var(--syn-solrel-spinedot-is-forming-left, 10px); border: var(--syn-solrel-spinedot-is-forming-border, 1.5px dashed var(--border-strong)); box-sizing: border-box; background: none; }
.syn-solrel-cardcol { flex: 1; min-width: 0; padding-bottom: var(--syn-solrel-cardcol-padding-bottom, 10px); }
.syn-solrel-row.is-last .syn-solrel-cardcol, .syn-solrel-row.is-forming .syn-solrel-cardcol { padding-bottom: 0; }
.syn-mc-page.is-reader .syn-solrel { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: auto; }
.syn-solrel-error { margin: 0; }
.syn-solrel-reading { display: flex; align-items: center; gap: var(--syn-solrel-reading-gap, 8px); font: var(--syn-solrel-reading-font, 400 12px var(--type-family)); color: var(--syn-solrel-reading-color, var(--text-tertiary)); padding: var(--syn-solrel-reading-padding, 14px 18px); }
/* the empty face (0d): the drop target alone */
.syn-solrel-emptyplane { max-width: var(--syn-solrel-emptyplane-max-width, 690px); margin: 0 auto; padding: var(--syn-solrel-emptyplane-padding, 26px 48px 44px); width: 100%; box-sizing: border-box; }
.syn-solrel-drop { border: var(--syn-solrel-drop-border, 1.5px dashed var(--border-strong)); border-radius: var(--syn-solrel-drop-border-radius, var(--shape-radius-control)); padding: var(--syn-solrel-drop-padding, 44px 20px); display: flex; flex-direction: column; align-items: center; gap: var(--syn-solrel-drop-gap, 8px); color: var(--syn-solrel-drop-color, var(--text-tertiary)); }
.syn-solrel-drop.is-incard { background: var(--syn-solrel-drop-is-incard-background, var(--surface-plane)); border-color: var(--syn-solrel-drop-is-incard-border-color, var(--border-emphasis)); padding: var(--syn-solrel-drop-is-incard-padding, 26px 20px); gap: var(--syn-solrel-drop-is-incard-gap, 7px); margin-top: var(--syn-solrel-drop-is-incard-margin-top, 12px); }   /* t35 (e): the empty forming card's in-card target (intake-forming-empty) */
.syn-solrel.is-dragover .syn-solrel-drop, .syn-solrel.is-dragover .syn-solrel-shelf { background: var(--syn-solrel-is-dragover-solrel-drop-background, var(--tinted-inset)); border-radius: var(--syn-solrel-is-dragover-solrel-drop-border-radius, var(--shape-radius-control)); }
.syn-solrel-droptitle { font: var(--syn-solrel-droptitle-font, 600 13px var(--type-family)); color: var(--syn-solrel-droptitle-color, var(--text-ink)); }
.syn-solrel-dropwords { font: var(--syn-solrel-dropwords-font, 400 11px var(--type-family)); color: var(--syn-solrel-dropwords-color, var(--text-tertiary)); }
.syn-solrel-browse { border: none; background: transparent; padding: 0; font: var(--syn-solrel-browse-font, 500 11px var(--type-family)); color: var(--syn-solrel-browse-color, var(--accent-action)); cursor: pointer; }
.syn-solrel-inputs { position: absolute; width: var(--syn-solrel-inputs-width, 1px); height: var(--syn-solrel-inputs-height, 1px); overflow: hidden; opacity: var(--syn-solrel-inputs-opacity, 0); }
/* the card species */
.syn-solrel-card { background: var(--syn-solrel-card-background, var(--surface-plane)); border: var(--syn-solrel-card-border, 1px solid var(--border-default)); border-radius: var(--syn-solrel-card-border-radius, var(--shape-radius-control)); }
.syn-solrel-card.is-open { border-color: var(--syn-solrel-card-is-open-border-color, var(--border-emphasis)); box-shadow: var(--syn-solrel-card-is-open-box-shadow, var(--elevation-plane)); overflow: hidden; }
.syn-solrel-card.is-draft.is-line { opacity: var(--syn-solrel-card-is-draft-is-line-opacity, .72); }
.syn-solrel-head { display: flex; align-items: center; gap: var(--syn-solrel-head-gap, 10px); padding: var(--syn-solrel-head-padding, var(--spine-headpad, 13px) 18px 9px); width: 100%; border: none; background: transparent; text-align: left; }   /* t36y (c): the top padding is the spine rule's own (13 open · 10 collapsed) */
.syn-solrel-head.is-door { padding: var(--syn-solrel-head-is-door-padding, var(--spine-headpad, 10px) 18px); cursor: pointer; }
.syn-solrel-head.is-door:hover { background: var(--syn-solrel-head-is-door-hover-background, var(--surface-hover)); }
.syn-solrel-chev { border: none; background: transparent; padding: 0; color: var(--syn-solrel-chev-color, var(--text-tertiary)); cursor: pointer; display: inline-flex; flex: none; }
.syn-solrel-head .syn-icon { color: var(--syn-solrel-head-icon-color, var(--text-tertiary)); flex: none; }
.syn-solrel-label { font: var(--syn-solrel-label-font, 700 15px var(--type-family)); line-height: var(--spine-title-lh, 19px); letter-spacing: var(--syn-solrel-label-letter-spacing, -0.01em); color: var(--syn-solrel-label-color, var(--text-ink)); }   /* t36y (c): the title's line box is the spine rule's (Geist's normal at 15) */
.syn-solrel-date { font: var(--syn-solrel-date-font, 500 12.5px var(--type-family)); color: var(--syn-solrel-date-color, var(--text-muted)); }   /* relay 42 (d): the three-size head ramp 15 · 12.5 · 11.5 */
.syn-solrel-count { font: var(--syn-solrel-count-font, 400 11.5px var(--type-family)); color: var(--syn-solrel-count-color, var(--text-tertiary)); }
.syn-solrel-daterider { font: var(--syn-solrel-daterider-font, 400 10px/1.4 var(--type-family)); color: var(--syn-solrel-daterider-color, var(--text-rider)); text-align: right; }   /* t27 → t35 (d): "from the upload date" rides under the spine date — a legacy release's read-time fill, until a person edits it */
.syn-solrel-linelabel { font: var(--syn-solrel-linelabel-font, 600 12.5px var(--type-family)); line-height: var(--spine-title-lh, 17px); color: var(--syn-solrel-linelabel-color, var(--text-ink)); }   /* t36y (c): the collapsed title's line box is the spine rule's (Geist's normal at 12.5) */
.syn-solrel-linedate { font: var(--syn-solrel-linedate-font, 400 11.5px var(--type-family)); color: var(--syn-solrel-linedate-color, var(--text-tertiary)); }
.syn-solrel-linecount { font: var(--syn-solrel-linecount-font, 400 10.5px var(--type-family)); color: var(--syn-solrel-linecount-color, var(--text-rider)); }
.syn-solrel-stamp { font: var(--syn-solrel-stamp-font, 600 9.5px var(--type-family-mono)); letter-spacing: var(--syn-solrel-stamp-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solrel-stamp-text-transform, var(--type-label-transform)); color: var(--syn-solrel-stamp-color, var(--text-tertiary)); }
/* the hover rail: the reserved gutter, quiet acts at opacity (never layout) */
.syn-solrel-rail { display: inline-flex; align-items: center; gap: var(--syn-solrel-rail-gap, 10px); flex: none; opacity: var(--syn-solrel-rail-opacity, 0); transition: var(--syn-solrel-rail-transition, opacity var(--motion-duration-fast)); }
.syn-solrel-head:hover .syn-solrel-rail, .syn-solrel-head.is-editing .syn-solrel-rail, .syn-solrel-fileline:hover .syn-solrel-rail, .syn-solrel-head:focus-within .syn-solrel-rail, .syn-solrel-fileline:focus-within .syn-solrel-rail, .syn-solrel-rail.is-armed { opacity: var(--syn-solrel-head-hover-solrel-rail-opacity, 1); }
/* t36 (i) ([REBUILD-SOL-9]): the file row's ONE "⋯" door beside the bordered View; its anchored popover lists the five acts as
   rows (the flag picker's row grammar), Delete red and last, the ends resting disabled */
/* relay 44 §1: the door is a 22×20 icon seat (radius 6) — the stroked Lucide ellipsis at 15 in --text-secondary; the seat keeps its box
   at rest (the reserved slot), the glyph rides the row's hover; the --bg-tertiary ground while its popover is open */
.syn-solrel-more { display: inline-flex; align-items: center; justify-content: center; width: var(--syn-solrel-more-width, 22px); height: var(--syn-solrel-more-height, 20px); border: none; border-radius: var(--syn-solrel-more-border-radius, var(--radius-sm)); background: transparent; padding: 0; color: var(--syn-solrel-more-color, var(--text-muted)); cursor: pointer; flex: none; }
/* t36y (a) [REBUILD-SOL-17] (7) THE RIDER'S RIGHT EDGE: a retired row (no acts) reserves the door's 22×20 seat EMPTY, so every rail rider on
   the card right-aligns to one edge with the same space to View (rider · 10 · the seat · 10 · View) — a mixed card never rags; nothing drawn */
.syn-solrel-actsslot { width: var(--syn-solrel-actsslot-width, 22px); height: var(--syn-solrel-actsslot-height, 20px); flex: none; }
.syn-solrel-more:hover { background: var(--syn-solrel-more-hover-background, var(--surface-hover)); }
.syn-solrel-rail.is-armed .syn-solrel-more { background: var(--syn-solrel-rail-is-armed-solrel-more-background, var(--surface-inset)); }
.syn-solrel-actspop { width: max-content; min-width: var(--syn-solrel-actspop-min-width, 196px); padding: var(--syn-solrel-actspop-padding, 4px 0); border-radius: var(--syn-solrel-actspop-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-solrel-actrow { display: flex; align-items: baseline; width: 100%; padding: var(--syn-solrel-actrow-padding, 6px 14px); border: none; background: transparent; text-align: left; cursor: pointer; font: var(--syn-solrel-actrow-font, 500 11.5px var(--type-family)); color: var(--syn-solrel-actrow-color, var(--text-body)); white-space: nowrap; }
.syn-solrel-actrow:hover { background: var(--syn-solrel-actrow-hover-background, var(--surface-hover)); color: var(--syn-solrel-actrow-hover-color, var(--text-ink)); }
.syn-solrel-actrow:disabled, .syn-solrel-actrow:disabled:hover { color: var(--syn-solrel-actrow-disabled-color, var(--text-rider)); background: transparent; cursor: default; }
.syn-solrel-actsrule { border-top: var(--syn-solrel-actsrule-border-top, 1px solid var(--border-hairline)); margin-top: var(--syn-solrel-actsrule-margin-top, 4px); }   /* the hairline before Delete */
.syn-solrel-actrow.is-danger { color: var(--syn-solrel-actrow-is-danger-color, var(--state-attention-text)); padding: var(--syn-solrel-actrow-is-danger-padding, 8px 14px 6px); }
.syn-solrel-head:hover { background: var(--syn-solrel-head-hover-background, var(--tinted-inset)); }
.syn-solrel-quietact { border: none; background: transparent; padding: 0; font: var(--syn-solrel-quietact-font, 500 11.5px var(--type-family)); color: var(--syn-solrel-quietact-color, var(--text-tertiary)); white-space: nowrap; cursor: pointer; }
.syn-solrel-quietact:hover { color: var(--syn-solrel-quietact-hover-color, var(--text-ink)); }
.syn-solrel-quietact.is-danger { color: var(--syn-solrel-quietact-is-danger-color, var(--state-attention-text)); }
.syn-solrel-quietact:disabled { color: var(--syn-solrel-quietact-disabled-color, var(--text-rider)); cursor: default; }
.syn-solrel-quietact.is-creator { color: var(--syn-solrel-quietact-is-creator-color, var(--text-tertiary)); }
/* the What-changed disclosure: the SF30 narrative verbatim on the paper register */
/* UI-PX-1 ([REBUILD-SEED-4] (8)): ONE seat closed, open and editing — the 2 px top stands in every state (the open-only seat of relay 44
   was the 1–2 px drop Ken saw when the block opened); the creator's and the editing seat's 2 px were already this */
.syn-solrel-disclosure { padding: var(--syn-solrel-disclosure-padding, 2px 18px 12px 42px); }
.syn-solrel-disclosurehead { display: flex; align-items: center; gap: var(--syn-solrel-disclosurehead-gap, 6px); max-width: var(--syn-solrel-disclosurehead-max-width, 640px); border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; }   /* t36t: the row — chevron · label · rider · spacer · the Edit slot (46a order 4) */
.syn-solrel-disclosurehead.is-static { cursor: default; }
.syn-solrel-disclosurelabel { font: var(--syn-solrel-disclosurelabel-font, 500 11px var(--type-family)); color: var(--syn-solrel-disclosurelabel-color, var(--text-body)); }
.syn-solrel-disclosureeyebrow { font: var(--syn-solrel-disclosureeyebrow-font, 400 9px var(--type-family-mono)); color: var(--syn-solrel-disclosureeyebrow-color, var(--text-rider)); }
/* t36t [REBUILD-SOL-12] THE WHAT-CHANGED SEAT (relay 46a): the quiet Edit on the head's hover rail (a reserved slot — the row never reflows;
   standing on the forming card); the creator in the disclosure's own seat; the person's register with NO ground (the absence of paper is the
   split); the editor = THE ONE MarkdownEditor's plane inside the seat's frame with the acts foot (the restore in the bordered row-act dress,
   the canonical commit pair) */
.syn-solrel-wcedit { opacity: var(--syn-solrel-wcedit-opacity, 0); transition: var(--syn-solrel-wcedit-transition, opacity var(--motion-duration-fast)); line-height: var(--syn-solrel-wcedit-line-height, 14px); }   /* UI-PX-1: the act takes the label's line box (11 px normal = 14) — the head reads ONE height with the act (reading) and without it (editing), the title never re-centers */
.syn-solrel-disclosurehead:hover .syn-solrel-wcedit, .syn-solrel-disclosurehead:focus-within .syn-solrel-wcedit, .syn-solrel-wcedit.is-standing { opacity: var(--syn-solrel-disclosurehead-hover-solrel-wcedit-opacity, 1); }
.syn-solrel-disclosure.is-creator { padding: var(--syn-solrel-disclosure-is-creator-padding, 2px 18px 12px 42px); }
.syn-solrel-disclosure.is-forming { padding: var(--syn-solrel-disclosure-is-forming-padding, 10px 2px 0); }
.syn-solrel-written { margin-top: var(--syn-solrel-written-margin-top, 6px); max-width: var(--syn-solrel-written-max-width, 640px); }
.syn-solrel-written .syn-md { font: var(--syn-solrel-written-md-font, 400 11.5px/1.55 var(--type-family)); color: var(--syn-solrel-written-md-color, var(--text-body)); text-wrap: pretty; }
.syn-solrel-written .syn-md p { margin: var(--syn-solrel-written-md-p-margin, 5px 0 0); }
.syn-solrel-written .syn-md > :first-child { margin-top: 0; }
.syn-solrel-wceditor { border: var(--syn-solrel-wceditor-border, 1.5px solid var(--border-strong)); border-radius: var(--syn-solrel-wceditor-border-radius, var(--shape-radius-control)); background: var(--syn-solrel-wceditor-background, var(--surface-plane)); margin-top: var(--syn-solrel-wceditor-margin-top, 6px); max-width: var(--syn-solrel-wceditor-max-width, 640px); overflow: hidden; }
.syn-solrel-wceditor .syn-mdplane { border: none; border-radius: 0; background: transparent; }
.syn-solrel-wceditor .syn-mdedit { padding: var(--syn-solrel-wceditor-mdedit-padding, 10px 12px); }
.syn-solrel-wceditor .syn-md { font: var(--syn-solrel-wceditor-md-font, 400 11.5px/1.55 var(--type-family)); color: var(--syn-solrel-wceditor-md-color, var(--text-body)); }
.syn-solrel-wceditor .syn-mdedit .ProseMirror { min-height: var(--syn-solrel-wceditor-mdedit-prosemirror-min-height, 48px); }
.syn-solrel-wcfoot { display: flex; align-items: center; gap: var(--syn-solrel-wcfoot-gap, 8px); padding: var(--syn-solrel-wcfoot-padding, 8px 10px); border-top: var(--syn-solrel-wcfoot-border-top, 1px solid var(--border-hairline)); }
.syn-solrel-rowact { border: var(--syn-solrel-rowact-border, 1px solid var(--border-default)); border-radius: var(--syn-solrel-rowact-border-radius, var(--radius-nav)); background: var(--syn-solrel-rowact-background, var(--surface-plane)); padding: var(--syn-solrel-rowact-padding, 5px 12px); font: var(--syn-solrel-rowact-font, 500 11.5px var(--type-family)); color: var(--syn-solrel-rowact-color, var(--text-body)); white-space: nowrap; cursor: pointer; flex: none; }
.syn-solrel-rowact:hover { border-color: var(--syn-solrel-rowact-hover-border-color, var(--border-emphasis)); color: var(--syn-solrel-rowact-hover-color, var(--text-ink)); }
.syn-solrel-narrative { background: var(--syn-solrel-narrative-background, var(--paper)); border: var(--syn-solrel-narrative-border, 1px solid var(--paper-edge)); border-radius: var(--syn-solrel-narrative-border-radius, var(--radius-xs)); padding: var(--syn-solrel-narrative-padding, 8px 12px); margin-top: var(--syn-solrel-narrative-margin-top, 6px); max-width: var(--syn-solrel-narrative-max-width, 640px); font: var(--syn-solrel-narrative-font, 400 11.5px/1.55 var(--type-family)); color: var(--syn-solrel-narrative-color, var(--text-body)); text-wrap: pretty; white-space: pre-wrap; }
/* the file lines: filename mono · the one fact · the bordered View door */
.syn-solrel-lines { border-top: var(--syn-solrel-lines-border-top, 1px solid var(--border-hairline)); }
.syn-solrel-fileline { display: flex; align-items: center; gap: var(--syn-solrel-fileline-gap, 10px); padding: var(--syn-solrel-fileline-padding, 8px 18px 8px 42px); border-bottom: var(--syn-solrel-fileline-border-bottom, 1px solid var(--border-hairline)); }
.syn-solrel-fileline:last-child { border-bottom: none; }
.syn-solrel-fileline:hover { background: var(--syn-solrel-fileline-hover-background, var(--surface-hover)); }
.syn-solrel-fileline.is-rearmed { background: var(--syn-solrel-fileline-is-rearmed-background, var(--surface-hover)); gap: var(--syn-solrel-fileline-is-rearmed-gap, 12px); }   /* relay 43 intake-reopened */
.syn-solrel-fileline.is-creator { padding: var(--syn-solrel-fileline-is-creator-padding, 9px 18px 9px 42px); }
.syn-solrel-line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--syn-solrel-line-column-gap, 10px); row-gap: var(--syn-solrel-line-row-gap, 1px); align-items: baseline; }   /* t35 (i): the fact rider wraps FLUSH under the filename (a unit, never inside it) */
.syn-solrel-file { font: var(--syn-solrel-file-font, 500 11px/1.5 var(--type-family-mono)); color: var(--syn-solrel-file-color, var(--text-ink)); overflow-wrap: anywhere; cursor: default; }
.syn-solrel-file.is-muted { color: var(--syn-solrel-file-is-muted-color, var(--text-tertiary)); }   /* t35 (i): the retired line's filename tertiary over its disabled attribution */
.syn-solrel-file.is-door { cursor: pointer; }   /* TF-38: the filename is the row's door (click = View) */
.syn-solrel-file.is-door:hover { text-decoration: var(--syn-solrel-file-is-door-hover-text-decoration, underline); text-underline-offset: var(--syn-solrel-file-is-door-hover-text-underline-offset, 2px); }
.syn-solrel-fact { display: inline-block; white-space: nowrap; font: var(--syn-solrel-fact-font, 400 10.5px var(--type-family)); color: var(--syn-solrel-fact-color, var(--text-tertiary)); }
.syn-solrel-fact.is-muted { color: var(--syn-solrel-fact-is-muted-color, var(--text-faint)); }
.syn-solrel-fileline > .syn-solrel-fact.is-rail { flex: none; margin-left: auto; white-space: nowrap; }   /* t36s (f) [REBUILD-SOL-11]: the rider names a RELEASE and sits on the row's right rail beside View as a column, never under the name */
.syn-solr-peekline { font: var(--syn-solr-peekline-font, 400 10.5px var(--type-family)); color: var(--syn-solr-peekline-color, var(--text-tertiary)); padding: var(--syn-solr-peekline-padding, 6px 10px); border-top: var(--syn-solr-peekline-border-top, 1px solid var(--border-hairline)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* t36s (f): the peek's one line — the predecessor's filename */
.syn-solrel-verb { font: var(--syn-solrel-verb-font, 400 10.5px var(--type-family)); color: var(--syn-solrel-verb-color, var(--text-tertiary)); }
.syn-solrel-fileline.is-revoke .syn-solrel-file, .syn-solrel-formrow.is-revoke .syn-solrel-file { margin-left: 0; }   /* the line's own column gap seats the verb */
.syn-solrel-formrow.is-file + .syn-solrel-formrow.is-revoke, .syn-solrel-fileline:not(.is-revoke) + .syn-solrel-fileline.is-revoke { margin-top: var(--syn-solrel-formrow-is-file-solrel-formrow-is-revoke-margin-top, 6px); border-top: var(--syn-solrel-formrow-is-file-solrel-formrow-is-revoke-border-top, 1px solid var(--border-hairline)); }   /* HUDA-A8 (H-67): the revoke GROUP sits apart from the file rows — a top rule under a 6 px gap on its first row, both cards; the grip slot and the verb's x untouched (DRAG-1's slot law) */
.syn-solrel-view { flex: none; }
/* Remove — the inline confirm armed in place at row height: solid red commit LEFT, Cancel rightmost, the one question */
.syn-solrel-confirm { display: flex; align-items: center; gap: var(--syn-solrel-confirm-gap, 14px); padding: var(--syn-solrel-confirm-padding, 11px 14px); flex: 1; min-width: 0; background: var(--syn-solrel-confirm-background, var(--tinted-inset)); border: var(--syn-solrel-confirm-border, 1px solid var(--border-hairline)); border-radius: var(--syn-solrel-confirm-border-radius, var(--radius-sm)); }
.syn-solrel-confirmwords { flex: 1; min-width: 0; font: var(--syn-solrel-confirmwords-font, 400 12px/1.5 var(--type-family)); color: var(--syn-solrel-confirmwords-color, var(--text-ink)); }
.syn-solrel-confirmwords b { font-weight: var(--syn-solrel-confirmwords-b-font-weight, 600); }
/* t26: the deletion confirms — the head · the object's own mono line (a filename, or "{label} · n files") · the body in the
   future tense (a predecessor's filename as a mono span, never inside the prose) · the loss sentence only when there is
   something to lose; the release form sits under the card head at the file lines' inset */
.syn-solrel-confirm.is-release { margin: var(--syn-solrel-confirm-is-release-margin, 0 18px 10px 42px); flex: none; }
.syn-solrel-confirmhead { font: var(--syn-solrel-confirmhead-font, 600 12.5px var(--type-family)); color: var(--syn-solrel-confirmhead-color, var(--text-ink)); }
.syn-solrel-confirmfile { font: var(--syn-solrel-confirmfile-font, 500 11px/1.5 var(--type-family-mono)); color: var(--syn-solrel-confirmfile-color, var(--text-ink)); margin-top: var(--syn-solrel-confirmfile-margin-top, 2px); overflow-wrap: anywhere; }
.syn-solrel-confirmbody { font: var(--syn-solrel-confirmbody-font, 400 12px/1.5 var(--type-family)); color: var(--syn-solrel-confirmbody-color, var(--text-body)); margin-top: var(--syn-solrel-confirmbody-margin-top, 4px); text-wrap: pretty; }
.syn-solrel-confirmlabel { font: var(--syn-solrel-confirmlabel-font, 600 12px var(--type-family)); color: var(--syn-solrel-confirmlabel-color, var(--text-ink)); }   /* t35 (c): the release form's second line — label 600 · the count rider */
.syn-solrel-confirmcount { font: var(--syn-solrel-confirmcount-font, 400 11.5px var(--type-family)); color: var(--syn-solrel-confirmcount-color, var(--text-tertiary)); }
.syn-solrel-confirm.is-release .syn-solrel-confirmfile { font: inherit; margin-top: var(--syn-solrel-confirm-is-release-solrel-confirmfile-margin-top, 3px); }
.syn-solrel-confirmloss { font: inherit; }   /* t35 (c): the protected-content sentence runs on inside the one body */
.syn-solrel-danger { background: var(--syn-solrel-danger-background, var(--state-attention-text)); color: var(--syn-solrel-danger-color, var(--text-on-accent)); border: none; border-radius: var(--syn-solrel-danger-border-radius, var(--radius-nav)); padding: var(--syn-solrel-danger-padding, 5px 12px); font: var(--syn-solrel-danger-font, 600 11.5px var(--type-family)); cursor: pointer; flex: none; }
.syn-solrel-cancel { border: var(--syn-solrel-cancel-border, 1px solid var(--border-default)); border-radius: var(--syn-solrel-cancel-border-radius, var(--radius-nav)); background: var(--syn-solrel-cancel-background, var(--surface-plane)); padding: var(--syn-solrel-cancel-padding, 5px 11px); font: var(--syn-solrel-cancel-font, 500 11.5px var(--type-family)); color: var(--syn-solrel-cancel-color, var(--text-body)); cursor: pointer; flex: none; }
/* THE FORMING DRESS (intake): the tinted inset with the 1.5px dashed --border-strong edge */
.syn-solrel-card.is-forming { background: var(--syn-solrel-card-is-forming-background, var(--tinted-inset)); border: var(--syn-solrel-card-is-forming-border, var(--solrel-forming-border, 1.5px) dashed var(--border-strong)); padding: var(--syn-solrel-card-is-forming-padding, var(--solrel-forming-pad, 14px) 18px); }   /* t36y (c): the border and the padding are the forming spine rule's own */
.syn-solrel-formhead { display: flex; align-items: flex-end; gap: var(--syn-solrel-formhead-gap, 10px); flex-wrap: wrap; }
.syn-solrel-seat { display: inline-flex; flex-direction: column; gap: var(--solrel-seat-gap, 3px); }
.syn-solrel-seatlabel { font: var(--syn-solrel-seatlabel-font, 600 9px var(--type-family)); line-height: var(--solrel-seatlabel-lh, 12px); letter-spacing: var(--syn-solrel-seatlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solrel-seatlabel-text-transform, var(--type-label-transform)); color: var(--syn-solrel-seatlabel-color, var(--text-faint)); }
/* t36y (b) [REBUILD-SOL-17] (8) THE REQUIRED HINT: "(required)" inside the label, the label's own register, one shade quieter, as written (no
   uppercase) — what is required reads at rest so nothing red has to */
.syn-solrel-seathint { font-weight: var(--syn-solrel-seathint-font-weight, 500); text-transform: var(--syn-solrel-seathint-text-transform, none); color: var(--syn-solrel-seathint-color, var(--text-rider)); }   /* relay 47c: the aside at 500 under the label's 600, lowercase, one shade quieter */
.syn-solrel-title { display: inline-flex; background: var(--syn-solrel-title-background, var(--surface-plane)); border: var(--syn-solrel-title-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solrel-title-border-radius, var(--radius-nav)); padding: var(--syn-solrel-title-padding, 5px 12px); font: var(--syn-solrel-title-font, 600 13px/16px var(--type-family)); color: var(--syn-solrel-title-color, var(--text-ink)); min-width: var(--syn-solrel-title-min-width, 220px); outline: none; height: var(--solrel-seat-h, 28px); box-sizing: border-box; }   /* t36s (d): the ONE line box the date seat shares — 5 + 16 + 5 + the 1 px border = 28 */
.syn-solrel-title.is-blank { border-style: var(--syn-solrel-title-is-blank-border-style, dashed); font-weight: var(--syn-solrel-title-is-blank-font-weight, 400); font-size: var(--syn-solrel-title-is-blank-font-size, 12px); }
.syn-solrel-title::placeholder { color: var(--syn-solrel-title-placeholder-color, var(--text-faint)); font-weight: var(--syn-solrel-title-placeholder-font-weight, 400); font-size: var(--syn-solrel-title-placeholder-font-size, 12px); }
.syn-solrel-title:focus { border-color: var(--syn-solrel-title-focus-border-color, var(--border-strong)); }
/* SOL-5 t36s (d) ONE DRESS FOR THE TWO SEATS (Ken: "no reason those two fields should not be styled identically"); relay 46a keys them —
   mc-solicitation-forming-title-seat (the input) · mc-solicitation-forming-date-seat (this WRAPPER carries the one box: 1 px --border-emphasis,
   radius 7, 5 × 12, inline-flex; 600 13 filled / dashed 400 12 --text-disabled blank; the blank dress is a state of the seat); the ONE
   DateTimePicker inside is boxless (no calendar glyph; the popover unchanged); the reopened head's seats read the comp's 4 × 11 */
.syn-solrel-dateseat { display: inline-flex; align-items: center; background: var(--syn-solrel-dateseat-background, var(--surface-plane)); border: var(--syn-solrel-dateseat-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solrel-dateseat-border-radius, var(--radius-nav)); padding: var(--syn-solrel-dateseat-padding, 5px 12px); font: var(--syn-solrel-dateseat-font, 600 13px/16px var(--type-family)); color: var(--syn-solrel-dateseat-color, var(--text-ink)); height: var(--syn-solrel-dateseat-height, 28px); box-sizing: border-box; }
.syn-solrel-dateseat .syn-dtp { width: auto; gap: var(--syn-solrel-dateseat-dtp-gap, 6px); padding: 0; border: none; border-radius: 0; background: transparent; font: inherit; color: inherit; height: var(--syn-solrel-dateseat-dtp-height, 16px); min-height: 0; box-sizing: border-box; }
.syn-solrel-dateseat .syn-dtp .syn-dtp-label { line-height: var(--syn-solrel-dateseat-dtp-dtp-label-line-height, 16px); }
.syn-solrel-dateseat.is-blank { border-style: var(--syn-solrel-dateseat-is-blank-border-style, dashed); background: transparent; font: var(--syn-solrel-dateseat-is-blank-font, 400 12px/16px var(--type-family)); color: var(--syn-solrel-dateseat-is-blank-color, var(--text-faint)); }
.syn-solrel-dateseat:hover, .syn-solrel-dateseat:has(.syn-dtp.is-open) { border-color: var(--syn-solrel-dateseat-hover-border-color, var(--border-strong)); background: var(--syn-solrel-dateseat-hover-background, var(--surface-plane)); }
.syn-solrel-dateseat .syn-dtp:hover, .syn-solrel-dateseat .syn-dtp.is-open { background: transparent; }
.syn-solrel-dateseat .syn-dtp > .syn-icon:last-child { display: none; }
/* t36w (e) [REBUILD-SOL-13] (8) THE DATE × RETIRED: the seat carries no clear act on either face (the picker's Clearable off — a release date is
   required, changed by picking another, never blanked), so the filled seat is CONTENT-FIT — the label inside the pinned box, nothing beside it —
   and measures the same at rest, hovered and focused; t36u (d)'s reserved slot and its two rules died here */
.syn-solrel-head.is-editing .syn-solrel-title, .syn-solrel-head.is-editing .syn-solrel-dateseat { padding: var(--syn-solrel-head-is-editing-solrel-title-padding, 4px 11px); height: var(--syn-solrel-head-is-editing-solrel-title-height, 26px); }
/* UI-PX-3 (Relay 49a §4f) THE HEAD-ROW TRUING: the reopened head bottom-aligns like the forming head, and every single-line neighbour seats on
   the SEATS' line — the 26 px seat's center, 13 off the row's bottom — never on the label-over-seat stack's middle: the chevron's 14 under a 6
   margin · the checkbox's 16 under a 5 pad (49a's pin) · the refusal's 18 line box under its standing 4 (below) · the rail's acts under a 6 pad
   (CD's 6/5/7/6, measured under the face — the 7 is the comp's 10 px annotation, whose built analogue is the refusal) */
.syn-solrel-head.is-editing { align-items: flex-end; }
.syn-solrel-head.is-editing .syn-solrel-chev { margin-bottom: var(--syn-solrel-head-is-editing-solrel-chev-margin-bottom, 6px); }
.syn-solrel-head.is-editing .syn-solrel-draft { padding-bottom: var(--syn-solrel-head-is-editing-solrel-draft-padding-bottom, 5px); }
.syn-solrel-head.is-editing .syn-solrel-rail { padding-bottom: var(--syn-solrel-head-is-editing-solrel-rail-padding-bottom, 6px); }
/* t36v (d′) TF-75: the reopened head's one refusal seat — ONE line in the head row beside the seats, level with the inputs; it never wraps
   and never grows the row (the reserved-slot law: nothing reflows under a refusal) */
.syn-solrel-head .syn-solrel-refusal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-end; padding-bottom: var(--syn-solrel-head-solrel-refusal-padding-bottom, 4px); }
.syn-solrel-source { font: var(--syn-solrel-source-font, 400 10.5px var(--type-family)); color: var(--syn-solrel-source-color, var(--text-tertiary)); padding-bottom: var(--syn-solrel-source-padding-bottom, 7px); }
.syn-solrel-draft { display: inline-flex; align-items: center; gap: var(--syn-solrel-draft-gap, 7px); padding-bottom: var(--syn-solrel-draft-padding-bottom, 7px); font: var(--syn-solrel-draft-font, 400 11.5px var(--type-family)); color: var(--syn-solrel-draft-color, var(--text-body)); cursor: pointer; }
.syn-solrel-check { width: var(--syn-solrel-check-width, 16px); height: var(--syn-solrel-check-height, 16px); margin: 0; accent-color: var(--syn-solrel-check-accent-color, var(--text-ink)); }
.syn-solrel-rows { margin-top: var(--syn-solrel-rows-margin-top, 12px); border-top: var(--syn-solrel-rows-border-top, 1px solid var(--border-hairline)); }
.syn-solrel-formrow { display: flex; align-items: center; gap: var(--syn-solrel-formrow-gap, 12px); padding: var(--syn-solrel-formrow-padding, 8px 2px); border-bottom: var(--syn-solrel-formrow-border-bottom, 1px solid var(--border-hairline)); }   /* the comp's 12 (relay 47c · 49a pin it); t17(b)'s ≥ 16 between the filename and the picker is the picker's own 4 below */
.syn-solrel-formrow > .syn-solrel-picker { margin-left: var(--syn-solrel-formrow-solrel-picker-margin-left, 4px); }   /* t17(b): the picker sits ≥ 16px off the filename */
/* DRAG-1 (Relay 49a item 19, CANON-DELTA 12; [REBUILD-ORDER-1] amended) DRAG-TO-REORDER ON THE FORMING CARD. THE GRAB HANDLE: a button in a
   reserved 16 × 20 slot left of the filename — the stroked Lucide grip-vertical at 14, --text-faint at rest, --text-tertiary while its row is
   hovered, --text-primary while lifted; cursor grab; the app's solid focus ring. The revoke line reserves the slot empty (a revocation has
   no place in the order) and the creators pad past it (the row's 2 + the slot's 16 + the gap's 12 = 30), so every filename and every creator
   label sits on one x. A file row wears the hover ground — it is a thing a hand moves now. */
.syn-solrel-formrow .syn-solrel-grip { display: inline-flex; align-items: center; justify-content: center; width: var(--syn-solrel-formrow-solrel-grip-width, 16px); height: var(--syn-solrel-formrow-solrel-grip-height, 20px); flex: none; border: none; border-radius: var(--syn-solrel-formrow-solrel-grip-border-radius, var(--radius-xs)); background: transparent; padding: 0; color: var(--syn-solrel-formrow-solrel-grip-color, var(--text-rider)); cursor: grab; touch-action: none; }   /* two classes: the vendor reboot's button:not(:disabled) pointer is (0,1,1) */
.syn-solrel-formrow.is-file:hover .syn-solrel-grip, .syn-solrel-grip:focus-visible { color: var(--syn-solrel-formrow-is-file-hover-solrel-grip-color, var(--text-tertiary)); }
.syn-solrel-formrow .syn-solrel-grip.is-lifted, .syn-solrel-formrow.is-file:hover .syn-solrel-grip.is-lifted { color: var(--syn-solrel-formrow-solrel-grip-is-lifted-color, var(--text-ink)); cursor: grabbing; }
.syn-solrel-gripslot { width: var(--syn-solrel-gripslot-width, 16px); height: var(--syn-solrel-gripslot-height, 20px); flex: none; }
.syn-solrel-formrow.is-file:hover { background: var(--syn-solrel-formrow-is-file-hover-background, var(--surface-hover)); }
.syn-solrel-rows > .syn-solrel-creator, .syn-solrel-rows > .syn-solrel-creator.is-addfiles { padding-left: var(--syn-solrel-rows-solrel-creator-padding-left, 30px); }
/* THE LIFTED ROW is solr-reorder.js's own node on <body> — a floating card at the pointer (surface · --border-emphasis · radius 6 · the popover
   shadow), bleeding 8px past the row either side so its content keeps the row's x. ITS ORIGIN keeps the row's box as a quiet ghost
   (--tinted-inset under a 1.5px dashed --border-default inset outline — the forming idiom one shade quieter), its content unseen: the rows
   never reflow. THE DROP SEAM: a 2px --accent-primary line the rows' width with an 8px dot at its left edge, on the ONE boundary the row
   would land at — accent because the seam is the actionable place (ratified, Ken in-sitting). */
.syn-solrel-formrow.is-lifted { position: fixed; z-index: 80; box-sizing: border-box; margin: var(--syn-solrel-formrow-is-lifted-margin, 2px 0); padding: var(--syn-solrel-formrow-is-lifted-padding, 8px 10px); background: var(--syn-solrel-formrow-is-lifted-background, var(--surface-plane)); border: var(--syn-solrel-formrow-is-lifted-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solrel-formrow-is-lifted-border-radius, var(--radius-sm)); box-shadow: var(--syn-solrel-formrow-is-lifted-box-shadow, var(--elevation-raised)); cursor: grabbing; pointer-events: none; }
.syn-solrel-formrow.is-origin, .syn-solrel-formrow.is-origin:hover { background: var(--syn-solrel-formrow-is-origin-background, var(--tinted-inset)); outline: var(--syn-solrel-formrow-is-origin-outline, 1.5px dashed var(--border-default)); outline-offset: var(--syn-solrel-formrow-is-origin-outline-offset, -1.5px); border-radius: var(--syn-solrel-formrow-is-origin-border-radius, var(--radius-sm)); }
.syn-solrel-formrow.is-origin > * { visibility: hidden; }
.syn-solrel-dropseam { position: fixed; z-index: 79; height: 0; pointer-events: none; }
.syn-solrel-dropseam-line { position: absolute; left: 0; right: 0; top: var(--syn-solrel-dropseam-line-top, -1px); height: var(--syn-solrel-dropseam-line-height, 2px); background: var(--syn-solrel-dropseam-line-background, var(--accent-action)); border-radius: var(--syn-solrel-dropseam-line-border-radius, var(--radius-edge)); }
.syn-solrel-dropseam-dot { position: absolute; left: var(--syn-solrel-dropseam-dot-left, -4px); top: var(--syn-solrel-dropseam-dot-top, -4px); width: var(--syn-solrel-dropseam-dot-width, 8px); height: var(--syn-solrel-dropseam-dot-height, 8px); border-radius: 50%; background: var(--syn-solrel-dropseam-dot-background, var(--accent-action)); }
body.syn-solrel-dragging, body.syn-solrel-dragging * { cursor: grabbing !important; user-select: none; }
/* THE KEYBOARD PATH (Space lifts · ↑/↓ · Space drops · Esc cancels): the row wears the lifted dress IN PLACE — its border and bleed are
   taken back by its margins, so nothing reflows — and travels by transform; the rows it passes give way the same way (a transform is
   never layout; Blazor's DOM is never re-parented) */
.syn-solrel-formrow.is-kblifted { position: relative; z-index: 2; margin: var(--syn-solrel-formrow-is-kblifted-margin, -1px -9px); padding: var(--syn-solrel-formrow-is-kblifted-padding, 8px 10px 8px 10px); border: var(--syn-solrel-formrow-is-kblifted-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solrel-formrow-is-kblifted-border-radius, var(--radius-sm)); background: var(--syn-solrel-formrow-is-kblifted-background, var(--surface-plane)); box-shadow: var(--syn-solrel-formrow-is-kblifted-box-shadow, var(--elevation-raised)); }
.syn-solrel-formrow.is-kblifted:hover { background: var(--syn-solrel-formrow-is-kblifted-hover-background, var(--surface-plane)); }
.syn-solrel-formrow .syn-solrel-file { flex: 1; min-width: 0; }
.syn-solrel-formrow.is-revoke .syn-solrel-line { flex: 1; min-width: 0; }
.syn-solrel-suggested { font: var(--syn-solrel-suggested-font, 400 10px var(--type-family)); color: var(--syn-solrel-suggested-color, var(--text-rider)); white-space: nowrap; flex: none; min-width: var(--syn-solrel-suggested-min-width, 52px); }   /* the slot is RESERVED — a re-pick clears the word without a shift; t36x: a 52px FLOOR — the row wearing "(contents identical)" grows it, that row only */
.syn-solrel-creator { padding: var(--syn-solrel-creator-padding, 7px 2px 2px); display: flex; align-items: center; gap: var(--syn-solrel-creator-gap, 10px); }
.syn-solrel-creator.is-addfiles { padding: var(--syn-solrel-creator-is-addfiles-padding, 9px 2px 0); gap: 0; align-items: baseline; }   /* t35 (e): the standing creator + its rider */
.syn-solrel-creator.is-addfiles:hover { background: var(--syn-solrel-creator-is-addfiles-hover-background, var(--surface-hover)); border-radius: var(--syn-solrel-creator-is-addfiles-hover-border-radius, var(--radius-xs)); }
.syn-solrel-creatorrider { font: var(--syn-solrel-creatorrider-font, 400 10.5px var(--type-family)); color: var(--syn-solrel-creatorrider-color, var(--text-rider)); margin-left: var(--syn-solrel-creatorrider-margin-left, 8px); }
.syn-solrel-rows.is-empty { margin-top: 0; border-top: none; }
.syn-solrel-creator.is-armed .syn-solrel-verb { flex: none; }
.syn-solrel-foot { display: flex; align-items: center; gap: var(--syn-solrel-foot-gap, 14px); margin-top: var(--syn-solrel-foot-margin-top, 12px); border-top: var(--syn-solrel-foot-border-top, 1px solid var(--border-hairline)); padding-top: var(--syn-solrel-foot-padding-top, 12px); }
.syn-solrel-refusal { font: var(--syn-solrel-refusal-font, 400 12px/1.5 var(--type-family)); color: var(--syn-solrel-refusal-color, var(--state-attention-text)); flex: 1; min-width: 0; }
/* t36y (b) [REBUILD-SOL-17] (8) NOTHING RED AT REST: a required seat's refusal (is-hint) keeps its box in the foot's one seat but is drawn only
   while the pointer hovers the disabled Confirm's slot — CSS-local, no round-trip, no state; the button itself stays truly disabled; an act-born
   Error (no is-hint) rests visible as before */
.syn-solrel-confirmslot { display: inline-flex; flex: none; }
.syn-solrel-refusalseat { flex: 1; min-width: 0; }   /* relay 47c: the foot's empty refusal seat (the comp's own box: flex 1, min-width 0); the message inside keeps its dress */
.syn-solrel-foot .syn-solrel-refusal.is-hint { visibility: hidden; }
.syn-solrel-foot:has(.syn-solrel-confirmslot:hover) .syn-solrel-refusal.is-hint { visibility: visible; }
.syn-solrel-carderror { margin: var(--syn-solrel-carderror-margin, 0 18px 8px 42px); }
/* THE DISPOSITION PICKER: the borderless dense-picker dress at rest (armed = the bordered dress); the statement rows */
.syn-solrel-picker { display: inline-flex; flex: none; max-width: var(--syn-solrel-picker-max-width, 360px); }
.syn-solrel-pickbtn { display: inline-flex; align-items: center; gap: var(--syn-solrel-pickbtn-gap, 4px); max-width: var(--syn-solrel-pickbtn-max-width, 360px); border: var(--syn-solrel-pickbtn-border, 1px solid transparent); border-radius: var(--syn-solrel-pickbtn-border-radius, var(--radius-sm)); background: transparent; padding: var(--syn-solrel-pickbtn-padding, 2px 4px); font: var(--syn-solrel-pickbtn-font, 400 11.5px var(--type-family)); color: var(--syn-solrel-pickbtn-color, var(--text-body)); cursor: pointer; min-width: 0; }
.syn-solrel-pickbtn:hover { border-color: var(--syn-solrel-pickbtn-hover-border-color, var(--border-emphasis)); }
.syn-solrel-picker.is-armed .syn-solrel-pickbtn { border: var(--syn-solrel-picker-is-armed-solrel-pickbtn-border, 1px solid var(--border-strong)); background: var(--syn-solrel-picker-is-armed-solrel-pickbtn-background, var(--surface-plane)); padding: var(--syn-solrel-picker-is-armed-solrel-pickbtn-padding, 3px 8px); max-width: var(--syn-solrel-picker-is-armed-solrel-pickbtn-max-width, 320px); }
.syn-solrel-pickwords { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.syn-solrel-pickpanel { width: var(--syn-solrel-pickpanel-width, 360px); background: var(--syn-solrel-pickpanel-background, var(--surface-plane)); border: var(--syn-solrel-pickpanel-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solrel-pickpanel-border-radius, var(--shape-radius-control)); box-shadow: var(--syn-solrel-pickpanel-box-shadow, var(--elevation-raised)); overflow: hidden; }
.syn-solrel-pickrow { display: flex; align-items: baseline; gap: var(--syn-solrel-pickrow-gap, 8px); width: 100%; padding: var(--syn-solrel-pickrow-padding, 7px 12px); border: none; background: transparent; text-align: left; cursor: pointer; }
.syn-solrel-pickrow:hover { background: var(--syn-solrel-pickrow-hover-background, var(--surface-hover)); }
.syn-solrel-pickrow.is-current { box-shadow: var(--syn-solrel-pickrow-is-current-box-shadow, var(--row-current-edge)); }   /* the selection mark: the 3px accent left edge on an unfilled ground (0k) */
.syn-solrel-pickrow.is-new { padding: var(--syn-solrel-pickrow-is-new-padding, 7px 12px 9px); }
.syn-solrel-pickverb { font: var(--syn-solrel-pickverb-font, 400 11px var(--type-family)); color: var(--syn-solrel-pickverb-color, var(--text-tertiary)); flex: none; }
.syn-solrel-pickfile { flex: 1; min-width: 0; font: var(--syn-solrel-pickfile-font, 500 10.5px/1.45 var(--type-family-mono)); color: var(--syn-solrel-pickfile-color, var(--text-ink)); overflow-wrap: anywhere; }
.syn-solrel-pickrider { font: var(--syn-solrel-pickrider-font, 400 9.5px var(--type-family)); color: var(--syn-solrel-pickrider-color, var(--text-rider)); white-space: nowrap; }
.syn-solrel-picknew { font: var(--syn-solrel-picknew-font, 400 11px var(--type-family)); color: var(--syn-solrel-picknew-color, var(--text-body)); }   /* t17(c): new and replaces share one size */
.syn-solrel-pickdivider { border-top: var(--syn-solrel-pickdivider-border-top, 1px solid var(--border-hairline)); }
.syn-solrel-revokepick .syn-menu-btn { height: auto; border: var(--syn-solrel-revokepick-menu-btn-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solrel-revokepick-menu-btn-border-radius, var(--radius-sm)); padding: var(--syn-solrel-revokepick-menu-btn-padding, 3px 8px); font: var(--syn-solrel-revokepick-menu-btn-font, 400 11.5px var(--type-family)); background: var(--syn-solrel-revokepick-menu-btn-background, var(--surface-plane)); }
/* THE PEEK (BEHAVIOR 10): the anchored popover, 260 wide, the first page on the paper register; the degraded case = the sentence */
.syn-solr-peek { position: fixed; z-index: 70; width: var(--syn-solr-peek-width, 260px); box-sizing: border-box; background: var(--syn-solr-peek-background, var(--surface-plane)); border: var(--syn-solr-peek-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solr-peek-border-radius, var(--shape-radius-control)); box-shadow: var(--syn-solr-peek-box-shadow, var(--elevation-raised)); padding: var(--syn-solr-peek-padding, 10px); pointer-events: none; }
.syn-solr-peek.is-degraded { padding: var(--syn-solr-peek-is-degraded-padding, 12px 14px); pointer-events: auto; }
.syn-solr-peekpaper { background: var(--syn-solr-peekpaper-background, var(--paper)); border: var(--syn-solr-peekpaper-border, 1px solid var(--paper-edge)); overflow: hidden; }
.syn-solr-peekpaper img { display: block; width: 100%; height: auto; }
.syn-solr-peekwords { font: var(--syn-solr-peekwords-font, 400 11.5px/1.5 var(--type-family)); color: var(--syn-solr-peekwords-color, var(--text-body)); text-wrap: pretty; }
/* the download modal (SOL-5 d): release groups, per-file rows, the 16px ink-field checkbox */
.syn-soldl-check { width: var(--syn-soldl-check-width, 16px); height: var(--syn-soldl-check-height, 16px); border-radius: var(--syn-soldl-check-border-radius, var(--radius-3xs)); border: var(--syn-soldl-check-border, 1px solid var(--border-emphasis)); background: var(--syn-soldl-check-background, var(--surface-plane)); box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.syn-soldl-check.on { background: var(--syn-soldl-check-on-background, var(--text-ink)); border-color: var(--syn-soldl-check-on-border-color, var(--text-ink)); }
.syn-soldl-groupdate { font: var(--syn-soldl-groupdate-font, 400 10.5px var(--type-family)); color: var(--syn-soldl-groupdate-color, var(--text-tertiary)); }
.syn-soldl-row.is-retired .syn-soldl-file { color: var(--syn-soldl-row-is-retired-soldl-file-color, var(--text-faint)); }
.syn-soldl-file { font: var(--syn-soldl-file-font, 500 10.5px/1.45 var(--type-family-mono)); color: var(--syn-soldl-file-color, var(--text-body)); overflow-wrap: anywhere; min-width: 0; flex: 1; }
.syn-soldl-attribution { font: var(--syn-soldl-attribution-font, 400 10px var(--type-family)); color: var(--syn-soldl-attribution-color, var(--text-faint)); white-space: nowrap; flex: none; }
.syn-soldl-groups .syn-soldl-row { padding: var(--syn-soldl-groups-soldl-row-padding, 6px 12px 6px 30px); gap: var(--syn-soldl-groups-soldl-row-gap, 9px); border-bottom: var(--syn-soldl-groups-soldl-row-border-bottom, 1px solid var(--border-hairline)); }   /* relay 45: the pick rows' 9 gap (the research modal's rows keep 8) */
.syn-soldl-groups .syn-soldl-row:last-child { border-bottom: none; }
.syn-soldl-groups .syn-soldl-group { background: var(--syn-soldl-groups-soldl-group-background, var(--surface-plane)); }   /* relay 45 §1: one flat checklist at rest */
.syn-soldl-groups .syn-soldl-group.is-open { background: var(--syn-soldl-groups-soldl-group-is-open-background, var(--tinted-inset)); }   /* the ratified head-over-children mark, the OPEN row alone */
/* SOL-5 t36 (r) K6 / relay 45b — THE TREE: the aggregate in its OWN band above the hairline, "Releases" heading the tree; the release row's
   checkbox derived (the indeterminate dash is the checked dress with a line); the membership column at the right edge (64 wide, the
   count heading it), its constant glyph under a 12 px inset; a retired row's rider on the right rail in the glyph's place */
.syn-soldl-aggregate { display: flex; gap: var(--syn-soldl-aggregate-gap, 9px); align-items: center; padding: var(--syn-soldl-aggregate-padding, 9px 12px); border: var(--syn-soldl-aggregate-border, 1px solid var(--border-default)); border-radius: var(--syn-soldl-aggregate-border-radius, var(--shape-radius-control)); cursor: pointer; background: var(--syn-soldl-aggregate-background, var(--surface-plane)); }
.syn-soldl-divider { height: var(--syn-soldl-divider-height, 1px); background: var(--syn-soldl-divider-background, var(--border-hairline)); }
.syn-soldl-head { font: var(--syn-soldl-head-font, 600 10.5px var(--type-family)); letter-spacing: var(--syn-soldl-head-letter-spacing, .03em); color: var(--syn-soldl-head-color, var(--text-tertiary)); padding: var(--syn-soldl-head-padding, 1px 2px 0); }
.syn-soldl-countcell { width: var(--syn-soldl-countcell-width, 64px); flex: none; display: inline-flex; justify-content: flex-end; }
.syn-soldl-member { width: var(--syn-soldl-member-width, 64px); flex: none; display: inline-flex; justify-content: flex-end; padding-right: var(--syn-soldl-member-padding-right, 12px); box-sizing: border-box; }
.syn-soldl-glyph { flex: none; }
.syn-soldl-check.is-mixed { background: var(--syn-soldl-check-is-mixed-background, var(--text-ink)); border-color: var(--syn-soldl-check-is-mixed-border-color, var(--text-ink)); }
.syn-soldl-groups .syn-soldl-row { align-items: flex-start; }   /* file rows top-align; a wrapped filename continues flush with its first character */
.syn-soldl-groups .syn-soldl-row.is-retired .syn-soldl-attribution { font: var(--syn-soldl-groups-soldl-row-is-retired-soldl-attribution-font, 400 10.5px/1.45 var(--type-family)); color: var(--syn-soldl-groups-soldl-row-is-retired-soldl-attribution-color, var(--text-tertiary)); flex: none; white-space: nowrap; }   /* the rider on the right rail (relay 45b, this modal) */
/* the Earlier-file banner (read-superseded): the quiet neutral register — history, not attention */
.syn-solr-supbanner { background: var(--syn-solr-supbanner-background, var(--bg-secondary)); border: var(--syn-solr-supbanner-border, 1px solid var(--border-default)); border-radius: var(--syn-solr-supbanner-border-radius, var(--radius-nav)); padding: var(--syn-solr-supbanner-padding, 10px 14px); display: flex; align-items: center; gap: var(--syn-solr-supbanner-gap, 14px); margin-bottom: var(--syn-solr-supbanner-margin-bottom, 14px); }
.syn-solr-supwords { flex: 1; min-width: 0; }
.syn-solr-suplabel { font: var(--syn-solr-suplabel-font, 600 9px var(--type-family)); letter-spacing: var(--syn-solr-suplabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solr-suplabel-text-transform, var(--type-label-transform)); color: var(--syn-solr-suplabel-color, var(--text-tertiary)); }
.syn-solr-supline { font: var(--syn-solr-supline-font, 600 13px/1.5 var(--type-family)); color: var(--syn-solr-supline-color, var(--text-ink)); margin-top: var(--syn-solr-supline-margin-top, 2px); }
.syn-solr-supmeta { font: var(--syn-solr-supmeta-font, 400 11px var(--type-family)); color: var(--syn-solr-supmeta-color, var(--text-tertiary)); margin-top: var(--syn-solr-supmeta-margin-top, 2px); overflow-wrap: anywhere; }
/* the degraded document inside the strip (read-degraded): the mono filename head · release · date · the one sentence · its text on paper — never blank */
.syn-solr-degraded { min-width: 0; margin-bottom: var(--syn-solr-degraded-margin-bottom, 18px); }
.syn-solr-degraded:last-child { margin-bottom: 0; }
.syn-solr-degradedhead { font: var(--syn-solr-degradedhead-font, var(--type-t1-file)); font-family: var(--syn-solr-degradedhead-font-family, var(--type-family-mono)); font-size: var(--syn-solr-degradedhead-font-size, 13px); font-weight: var(--syn-solr-degradedhead-font-weight, 600); line-height: var(--syn-solr-degradedhead-line-height, 1.4); color: var(--syn-solr-degradedhead-color, var(--text-ink)); overflow-wrap: anywhere; }
.syn-solr-degradedmeta { font: var(--syn-solr-degradedmeta-font, 400 10.5px var(--type-family)); color: var(--syn-solr-degradedmeta-color, var(--text-tertiary)); margin-top: var(--syn-solr-degradedmeta-margin-top, 2px); }
.syn-solr-degradedsentence { background: var(--syn-solr-degradedsentence-background, var(--bg-secondary)); border: var(--syn-solr-degradedsentence-border, 1px solid var(--border-default)); border-radius: var(--syn-solr-degradedsentence-border-radius, var(--radius-sm)); padding: var(--syn-solr-degradedsentence-padding, 8px 12px); margin-top: var(--syn-solr-degradedsentence-margin-top, 10px); font: var(--syn-solr-degradedsentence-font, 400 12px/1.5 var(--type-family)); color: var(--syn-solr-degradedsentence-color, var(--text-body)); }
.syn-solr-paper { background: var(--syn-solr-paper-background, var(--paper)); border: var(--syn-solr-paper-border, 1px solid var(--paper-edge)); border-radius: var(--syn-solr-paper-border-radius, var(--radius-xs)); padding: var(--syn-solr-paper-padding, 12px 16px); margin-top: var(--syn-solr-paper-margin-top, 10px); }
.syn-solr-paper .syn-solr-block { font-size: var(--syn-solr-paper-solr-block-font-size, 12px); line-height: var(--syn-solr-paper-solr-block-line-height, 1.6); margin-top: var(--syn-solr-paper-solr-block-margin-top, 4px); }
.syn-solr-paper .syn-solr-block:first-child { margin-top: 0; }
/* the face switch + the zoom stops (marginalia): the segmented species, --seg-active active seat, the ruled 196px track */
.syn-solr-faceswitch { display: flex; background: var(--syn-solr-faceswitch-background, var(--surface-inset)); border-radius: var(--syn-solr-faceswitch-border-radius, var(--radius-nav)); padding: var(--syn-solr-faceswitch-padding, 2px); width: var(--syn-solr-faceswitch-width, 196px); }
.syn-solr-facebtn { flex: 1; text-align: center; font: var(--syn-solr-facebtn-font, 500 10.5px var(--type-family)); color: var(--syn-solr-facebtn-color, var(--text-muted)); padding: var(--syn-solr-facebtn-padding, 3px 0); border: none; border-radius: var(--syn-solr-facebtn-border-radius, var(--radius-xs-plus)); background: transparent; cursor: pointer; }
.syn-solr-facebtn.on { font-weight: var(--syn-solr-facebtn-on-font-weight, 600); color: var(--syn-solr-facebtn-on-color, var(--text-ink)); background: var(--syn-solr-facebtn-on-background, var(--segment-active)); box-shadow: var(--syn-solr-facebtn-on-box-shadow, var(--segment-active-shadow)); }
.syn-solr-door.is-small { padding: var(--syn-solr-door-is-small-padding, 3px 9px); font-size: var(--syn-solr-door-is-small-font-size, 11px); }
/* THE LIGHTBOX (read-lightbox): the one full-screen reading moment — the page alone on the always-dark scrim; the arrow keys walk,
   Esc / the close act / the scrim close; the zoom control repeats on the same preference. THE SCRIM-CHROME LITERAL CLASS (canon
   delta 6): the scrim is dark in both themes, so its inks are flagged literals (#f2f0ec · #c9c6bf · #1b1a18). */
.syn-solr-lightbox.is-hidden { display: none !important; }   /* R2 rider: mounted but hidden after its first close */
.syn-solr-lightbox { position: fixed; inset: 0; z-index: 400; box-sizing: border-box; background: var(--syn-solr-lightbox-background, var(--surface-scrim-deep)); border-radius: var(--syn-solr-lightbox-border-radius, var(--shape-radius-control)); padding: 0; display: flex; flex-direction: column; gap: 0; }
.syn-solr-lightboxhost { display: contents; }
/* t35 (h) THE ONE BAND (relay 43 read-lightbox): the viewer's one head — translucent var(--surface-scrim-band) over the .14 hairline, the
   viewer's width (the page-width head clipped its own filename at 150/200); filename · release left, Zoom · Download · ✕ right */
.syn-solr-lbtop { display: flex; align-items: center; gap: var(--syn-solr-lbtop-gap, 14px); flex: none; padding: var(--syn-solr-lbtop-padding, 10px 22px); background: var(--syn-solr-lbtop-background, var(--surface-scrim-band)); border-bottom: var(--syn-solr-lbtop-border-bottom, 1px solid var(--scrim-line-faint)); }
.syn-solr-lbname { flex: 1; min-width: 0; font: var(--syn-solr-lbname-font, 500 10px/1.5 var(--type-family-mono)); color: var(--syn-solr-lbname-color, var(--scrim-ink)); overflow-wrap: anywhere; }
.syn-solr-lbfile { font: var(--syn-solr-lbfile-font, 600 12.5px/1.4 var(--type-family-mono)); color: var(--syn-solr-lbfile-color, var(--scrim-ink-strong)); }   /* t36 (k) / relay 44 §2: the lightbox's one band shares the head's ramp in the scrim ink (the existing literal) */
.syn-solr-lbrel { color: var(--syn-solr-lbrel-color, var(--scrim-ink-muted)); white-space: nowrap; }
.syn-solr-lbspacer { flex: none; }
.syn-solr-lbzoomlabel { font: var(--syn-solr-lbzoomlabel-font, 600 9px var(--type-family)); letter-spacing: var(--syn-solr-lbzoomlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solr-lbzoomlabel-text-transform, var(--type-label-transform)); color: var(--syn-solr-lbzoomlabel-color, var(--scrim-ink)); flex: none; margin-right: var(--syn-solr-lbzoomlabel-margin-right, -4px); }
.syn-solr-lbzoom { display: flex; background: var(--syn-solr-lbzoom-background, var(--scrim-well)); border-radius: var(--syn-solr-lbzoom-border-radius, var(--radius-nav)); padding: var(--syn-solr-lbzoom-padding, 2px); width: var(--syn-solr-lbzoom-width, 196px); flex: none; }
.syn-solr-lbzoombtn { flex: 1; text-align: center; font: var(--syn-solr-lbzoombtn-font, 500 10px var(--type-family)); color: var(--syn-solr-lbzoombtn-color, var(--scrim-ink)); padding: var(--syn-solr-lbzoombtn-padding, 3px 0); border: none; border-radius: var(--syn-solr-lbzoombtn-border-radius, var(--radius-xs-plus)); background: transparent; cursor: pointer; }
.syn-solr-lbzoombtn.is-fit { flex: none; padding: var(--syn-solr-lbzoombtn-is-fit-padding, 3px 9px); }
.syn-solr-lbzoombtn.on { font-weight: var(--syn-solr-lbzoombtn-on-font-weight, 600); color: var(--syn-solr-lbzoombtn-on-color, var(--scrim-ink-inverse)); background: var(--syn-solr-lbzoombtn-on-background, var(--scrim-ink-strong)); }
.syn-solr-lbclose { border: none; background: transparent; padding: 0; color: var(--syn-solr-lbclose-color, var(--scrim-ink)); cursor: pointer; display: inline-flex; flex: none; }
/* SOL-5 R2 THE LIGHTBOX IS THE DOCUMENT VIEWER: the scroller holds the whole document's page strip (paper gap between pages, the
   same pdf.js pages as the measure, re-rendered at device resolution per zoom stop); the bordered Download door in scrim ink;
   the page indicator seats bottom-right (F3) and rides the scroll. */
.syn-solr-lbdoor { border: var(--syn-solr-lbdoor-border, 1px solid var(--scrim-line-strong)); border-radius: var(--syn-solr-lbdoor-border-radius, var(--radius-nav)); background: transparent; padding: var(--syn-solr-lbdoor-padding, 4px 11px); font: var(--syn-solr-lbdoor-font, 500 11px var(--type-family)); color: var(--syn-solr-lbdoor-color, var(--scrim-ink-strong)); white-space: nowrap; text-decoration: var(--syn-solr-lbdoor-text-decoration, none); white-space: nowrap; flex: none; cursor: pointer; }
.syn-solr-lbdoor:hover { background: var(--syn-solr-lbdoor-hover-background, var(--scrim-well-hover)); }
.syn-solr-lbarea { flex: 1; min-height: 0; position: relative; padding: var(--syn-solr-lbarea-padding, 0 72px); }   /* the strip area: the scroller + the real scrollbar at its right edge + the indicator */
.syn-solr-lbscroll { height: 100%; overflow: auto; scrollbar-width: auto; padding: var(--syn-solr-lbscroll-padding, 16px 0 24px); box-sizing: border-box; }
.syn-solr-lbtrack { position: absolute; right: var(--syn-solr-lbtrack-right, 5px); top: var(--syn-solr-lbtrack-top, 8px); bottom: var(--syn-solr-lbtrack-bottom, 8px); width: var(--syn-solr-lbtrack-width, 6px); border-radius: var(--syn-solr-lbtrack-border-radius, var(--shape-radius-pill)); background: var(--syn-solr-lbtrack-background, var(--scrim-track)); }
.syn-solr-lbtrack.is-idle { display: none; }
/* t20: the horizontal track at the viewer's bottom edge — the same species; shown only while the strip is wider than the viewer */
.syn-solr-lbhtrack { position: absolute; left: var(--syn-solr-lbhtrack-left, 80px); right: var(--syn-solr-lbhtrack-right, 80px); bottom: var(--syn-solr-lbhtrack-bottom, 5px); height: var(--syn-solr-lbhtrack-height, 6px); border-radius: var(--syn-solr-lbhtrack-border-radius, var(--shape-radius-pill)); background: var(--syn-solr-lbhtrack-background, var(--scrim-track)); }
.syn-solr-lbhtrack.is-idle { display: none; }
.syn-solr-lbhthumb { position: absolute; left: 0; top: 0; height: var(--syn-solr-lbhthumb-height, 6px); width: var(--syn-solr-lbhthumb-width, 24px); border-radius: var(--syn-solr-lbhthumb-border-radius, var(--shape-radius-pill)); background: var(--syn-solr-lbhthumb-background, var(--scrim-thumb)); cursor: grab; touch-action: none; }   /* two classes: the vendor reboot's button:not(:disabled) pointer is (0,1,1) */
.syn-solr-lbhthumb:active { cursor: grabbing; }
.syn-solr-lbthumb { position: absolute; left: 0; top: 0; width: var(--syn-solr-lbthumb-width, 6px); height: var(--syn-solr-lbthumb-height, 24px); border-radius: var(--syn-solr-lbthumb-border-radius, var(--shape-radius-pill)); background: var(--syn-solr-lbthumb-background, var(--scrim-thumb)); cursor: grab; touch-action: none; }   /* two classes: the vendor reboot's button:not(:disabled) pointer is (0,1,1) */
.syn-solr-lbthumb:active { cursor: grabbing; }
.syn-solr-lbdocblock { min-width: 0; }
.syn-solr-lbdocblock + .syn-solr-lbdocblock { margin-top: var(--syn-solr-lbdocblock-solr-lbdocblock-margin-top, 18px); }
.syn-solr-lbdoc { display: flow-root; }   /* t20: the block takes the strip's EXPLICIT width (solr-pdf.js _lbLayout); a max-content host ratcheted its own centering margins */
.syn-solr-lbstrip { width: max-content; min-width: 100%; margin: 0 auto; }
.syn-solr-lbstrip .syn-solr-pdfpage { margin: 0 auto; outline: none; box-shadow: var(--syn-solr-lbstrip-solr-pdfpage-box-shadow, var(--shadow-lightbox)); }
.syn-solr-lbstrip .syn-solr-pagegap { height: var(--syn-solr-lbstrip-solr-pagegap-height, 18px); }
/* RES-1: THE SPINNER — a lightbox shown while its strip is still mounting (the research rendition arriving seconds after an
   edit) wears is-loading: the chrome stands, the strip area carries one quiet ring in the scrim's literal inks; the class leaves
   with the mount. Never on the solicitation's states (its strip mounts hidden, before any click). */
.syn-solr-lightbox.is-loading .syn-solr-lbarea::after { content: ''; position: absolute; left: 50%; top: 50%; width: var(--syn-solr-lightbox-is-loading-solr-lbarea-after-width, 28px); height: var(--syn-solr-lightbox-is-loading-solr-lbarea-after-height, 28px); margin: var(--syn-solr-lightbox-is-loading-solr-lbarea-after-margin, -14px 0 0 -14px); border-radius: 50%; border: var(--syn-solr-lightbox-is-loading-solr-lbarea-after-border, 2px solid var(--scrim-line-soft)); border-top-color: var(--syn-solr-lightbox-is-loading-solr-lbarea-after-border-top-color, var(--scrim-ink-strong)); animation: syn-solr-lbspin var(--spinner-turn) var(--spinner-easing) infinite; pointer-events: none; }
@keyframes syn-solr-lbspin { to { transform: rotate(360deg); } }
.syn-solr-lbindicator { position: absolute; right: var(--syn-solr-lbindicator-right, 22px); bottom: var(--syn-solr-lbindicator-bottom, 14px); border: var(--syn-solr-lbindicator-border, 1px solid var(--scrim-line)); border-radius: var(--syn-solr-lbindicator-border-radius, var(--shape-radius-pill)); padding: var(--syn-solr-lbindicator-padding, 3px 11px); font: var(--syn-solr-lbindicator-font, 500 10px var(--type-family-mono)); color: var(--syn-solr-lbindicator-color, var(--scrim-ink-strong)); white-space: nowrap; flex: none; pointer-events: none; }
/* the download modal (download-modal): grouped checklist, edge-to-edge rows */
.syn-soldl-groups { border: var(--syn-soldl-groups-border, 1px solid var(--border-default)); border-radius: var(--syn-soldl-groups-border-radius, var(--shape-radius-control)); overflow: hidden; }
/* t36v (c′) TF-73: the tree's three keyboard seats fill their clip boxes (the aggregate the modal body's width, the rows the groups box
   with overflow hidden), so the canon's ring — drawn OUTSIDE at offset 1 — fell into the clip on three sides; on these seats the same
   ring (solid 2 px --border-strong, the metric unchanged) draws INSET, its box 1 px inside the seat's own */
.syn-soldl-aggregate:focus-visible, .syn-soldl-groups .syn-soldl-group:focus-visible, .syn-soldl-groups .syn-soldl-row:focus-visible { outline-offset: var(--syn-soldl-aggregate-focus-visible-outline-offset, -3px); }
.syn-soldl-group { display: flex; gap: var(--syn-soldl-group-gap, 9px); align-items: center; padding: var(--syn-soldl-group-padding, 8px 12px); border-bottom: var(--syn-soldl-group-border-bottom, 1px solid var(--border-hairline)); cursor: pointer; }
.syn-soldl-group:last-child { border-bottom: none; }
.syn-soldl-group .syn-facetcheck { width: var(--syn-soldl-group-facetcheck-width, 14px); height: var(--syn-soldl-group-facetcheck-height, 14px); }
.syn-soldl-group.on .syn-facetcheck { background: var(--syn-soldl-group-on-facetcheck-background, var(--text-ink)); border-color: var(--syn-soldl-group-on-facetcheck-border-color, var(--text-ink)); color: var(--syn-soldl-group-on-facetcheck-color, var(--text-on-ink)); }
.syn-soldl-groupname { font: var(--syn-soldl-groupname-font, 600 12px var(--type-family)); color: var(--syn-soldl-groupname-color, var(--text-ink)); }
.syn-soldl-spacer { flex: 1; }

/* the marginalia — the doors + the 2px-rail stamps. UD2 built CD's drawn STATIC rail (scrolls with
   the plane); UD5 (Ken's owner supersession) makes the rail simply stay put — the window never
   moves on the reader seat, so static and pinned are the same thing. */
.syn-solr-marginalia { display: flex; flex-direction: column; gap: var(--syn-solr-marginalia-gap, 14px); min-width: 0; align-self: start; }

/* ── UD5 — THE READER SCROLL CONTAINMENT (Ken, fourth look: "the only thing on those pages that
   should scroll is the center column; everything else should stay put" — supersedes the drawn
   static rail and HB-UD1-2's window-scroller reading for the TWO reader seats). The page locks
   to the viewport (the .syn-pipe-page precedent), the plane fills the body, the grid pins ONE
   row to the plane's height, and the MEASURE becomes the one scroll container. Non-scrolling
   wrappers use overflow: clip (not hidden) so scrollIntoView can never move the frame. The
   outline/marginalia lanes lose their now-inert sticky + viewport caps and scroll themselves
   only if taller than the lane. Keyed by .is-reader (MissionControlPage: research · the
   solicitation read lens incl. its transient review/intake flows + the empty state). ── */
.syn-mc-page.is-reader { height: 100vh; }
.syn-mc-page.is-reader .syn-mc-body { display: flex; flex-direction: column; overflow: clip; }
/* solicitation: the plane -> the grid -> the measure */
.syn-mc-page.is-reader .syn-solr-tab { flex: 1; min-height: 0; }
.syn-mc-page.is-reader .syn-solr-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: clip; }
/* the lanes STRETCH to the pinned row (their at-rest align-self: start would let a long outline
   overflow the plane un-scrollably — driven: the 13th row sat outside the viewport) */
.syn-mc-page.is-reader .syn-solr-outline { position: static; max-height: none; align-self: stretch; }
.syn-mc-page.is-reader .syn-solr-measure { overflow-y: auto; scrollbar-width: auto; }
.syn-mc-page.is-reader .syn-solr-marginalia { align-self: stretch; overflow-y: auto; scrollbar-width: auto; }
.syn-mc-page.is-reader .syn-solr-flowhost { flex: 1; min-height: 0; overflow-y: auto; }
/* research: the grid IS the plane */
.syn-mc-page.is-reader .syn-res-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.syn-mc-page.is-reader .syn-res-outline { position: static; max-height: none; align-self: stretch; }
.syn-mc-page.is-reader .syn-res-measure { overflow-y: auto; scrollbar-width: auto; }
.syn-mc-page.is-reader .syn-res-marginalia { position: static; align-self: stretch; overflow-y: auto; scrollbar-width: auto; }
.syn-solr-doors { display: flex; flex-direction: column; gap: var(--syn-solr-doors-gap, 8px); align-items: flex-start; }
.syn-solr-stamp { border-left: var(--syn-solr-stamp-border-left, 2px solid var(--border-default)); padding-left: var(--syn-solr-stamp-padding-left, 10px); }
.syn-solr-stamplabel { font: var(--syn-solr-stamplabel-font, 600 9px var(--type-family)); letter-spacing: var(--syn-solr-stamplabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-solr-stamplabel-text-transform, var(--type-label-transform)); color: var(--syn-solr-stamplabel-color, var(--text-faint)); }
.syn-solr-stampwords { font: var(--syn-solr-stampwords-font, 400 11px/1.5 var(--type-family)); color: var(--syn-solr-stampwords-color, var(--text-tertiary)); margin-top: var(--syn-solr-stampwords-margin-top, 2px); text-wrap: pretty; }
.syn-solr-stampstrong { color: var(--syn-solr-stampstrong-color, var(--text-body)); font-weight: var(--syn-solr-stampstrong-font-weight, 600); }

.syn-solr-error { margin-bottom: var(--syn-solr-error-margin-bottom, 10px); font-size: var(--syn-solr-error-font-size, 0.75rem); color: var(--syn-solr-error-color, var(--state-attention)); }
/* the Download solicitation modal (18a seat) + the Manage solicitation modal (12l / 12-3) */
.syn-soldl, .syn-solmg { display: flex; flex-direction: column; gap: var(--syn-soldl-gap, 11px); }
.syn-soldl-pair { display: flex; border: var(--syn-soldl-pair-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-soldl-pair-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-soldl-mode { flex: 1; text-align: center; padding: var(--syn-soldl-mode-padding, 6px 0); font: var(--syn-soldl-mode-font, 500 12px var(--type-family)); color: var(--syn-soldl-mode-color, var(--text-body)); background: transparent; border: none; border-left: var(--syn-soldl-mode-border-left, 1px solid var(--border-emphasis)); cursor: pointer; }
.syn-soldl-mode:first-child { border-left: none; }
.syn-soldl-mode.on { font-weight: var(--syn-soldl-mode-on-font-weight, 600); color: var(--syn-soldl-mode-on-color, var(--text-on-ink)); background: var(--syn-soldl-mode-on-background, var(--text-ink)); }
.syn-soldl-mode:disabled { color: var(--syn-soldl-mode-disabled-color, var(--text-faint)); cursor: default; }
.syn-soldl-words, .syn-solmg-words { font: var(--syn-soldl-words-font, 400 0.71875rem/1.5 var(--type-family)); color: var(--syn-soldl-words-color, var(--text-muted)); }
.syn-soldl-list, .syn-solmg-list { border: var(--syn-soldl-list-border, 1px solid var(--border-default)); border-radius: var(--syn-soldl-list-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-soldl-shelf { display: flex; gap: var(--syn-soldl-shelf-gap, 8px); align-items: center; padding: var(--syn-soldl-shelf-padding, 7px 11px); background: var(--syn-soldl-shelf-background, var(--tinted-inset)); border-bottom: var(--syn-soldl-shelf-border-bottom, 1px solid var(--border-hairline)); }
.syn-soldl-shelf.is-superseded { border-top: var(--syn-soldl-shelf-is-superseded-border-top, 1px solid var(--border-hairline)); border-bottom: none; cursor: pointer; }
.syn-soldl-shelfname { font: var(--syn-soldl-shelfname-font, 600 12px var(--type-family)); color: var(--syn-soldl-shelfname-color, var(--text-ink)); }
.syn-soldl-shelfname.is-quiet { font-weight: var(--syn-soldl-shelfname-is-quiet-font-weight, 400); color: var(--syn-soldl-shelfname-is-quiet-color, var(--text-tertiary)); }
.syn-soldl-row { display: flex; gap: var(--syn-soldl-row-gap, 8px); align-items: center; padding: var(--syn-soldl-row-padding, 6px 11px); cursor: pointer; }
.syn-soldl-row:hover { background: var(--syn-soldl-row-hover-background, var(--surface-hover)); }
.syn-soldl-rowname { font: var(--syn-soldl-rowname-font, 400 12px var(--type-family)); color: var(--syn-soldl-rowname-color, var(--text-body)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-soldl-count { font: var(--syn-soldl-count-font, 400 10.5px var(--type-family)); color: var(--syn-soldl-count-color, var(--text-faint)); }
/* SOL-5 t36 (o) the download modal as PACKAGES: each release row's quiet "Pick files" disclosure door and the commit's quiet file total */
.syn-soldl-pick { display: inline-flex; align-items: center; gap: var(--syn-soldl-pick-gap, 4px); border: none; background: transparent; padding: 0; font: var(--syn-soldl-pick-font, 500 11.5px var(--type-family)); color: var(--syn-soldl-pick-color, var(--text-body)); cursor: pointer; flex: none; white-space: nowrap; }   /* relay 45 §3: the quiet text act, the door chevron first */
.syn-soldl-pick .syn-icon { color: var(--syn-soldl-pick-icon-color, var(--text-tertiary)); }
.syn-soldl-copy { font: var(--syn-soldl-copy-font, 400 11px/1.4 var(--type-family)); color: var(--syn-soldl-copy-color, var(--text-tertiary)); }   /* relay 45 §5: the one line of copy under the header */
.syn-modal-inner[data-spec=mc-solicitation-download-modal] .syn-modal-body { margin-top: var(--kit-inner-spec-mc-solicitation-download-modal-modal-body-margin-top, -4px); }   /* t36s (c): the comp's -4 pull rides the BODY (overflow visible above it), never the copy line — a negative margin on a scroll container's first child clipped the line's ascenders ("files" read "tiles") */
.syn-soldl-groups .syn-soldl-row .syn-soldl-file { flex: 1; }
.syn-soldl-total { font: var(--syn-soldl-total-font, 400 11px var(--type-family)); color: var(--syn-soldl-total-color, var(--text-tertiary)); white-space: nowrap; }   /* the quiet file total, LEFT of Cancel */
.syn-facetcheck.on { background: var(--syn-facetcheck-on-background, var(--text-ink)); border-color: var(--syn-facetcheck-on-border-color, var(--text-ink)); }
/* SOL-5 R6: the Tech approach blocks roster rides the OUTLINE per document — the mono filename as each group head, rows in
   outline order with the number in the gutter (never the topic catalog) */
/* t35 (a) relay 43 manage-roster: the per-document SECTION-HEAD BAND (the filename mono at reading size 12 · the release label),
   the rows on the band's 12 px inset with ONE flush 64 px number column (no stagger — the dotted designator carries the depth) */
.syn-solmg-dochead { display: flex; align-items: baseline; gap: var(--syn-solmg-dochead-gap, 10px); background: var(--syn-solmg-dochead-background, var(--tinted-inset)); border-radius: var(--syn-solmg-dochead-border-radius, var(--radius-sm)); padding: var(--syn-solmg-dochead-padding, 7px 12px); margin: var(--syn-solmg-dochead-margin, 14px 0 2px); }
.syn-solmg-docname { font: var(--syn-solmg-docname-font, 500 12px/1.5 var(--type-family-mono)); color: var(--syn-solmg-docname-color, var(--text-ink)); overflow-wrap: anywhere; min-width: 0; }
.syn-solmg-docrel { font: var(--syn-solmg-docrel-font, 400 11px var(--type-family)); color: var(--syn-solmg-docrel-color, var(--text-tertiary)); white-space: nowrap; }
.syn-solmg-gutter { width: var(--syn-solmg-gutter-width, 64px); flex: none; font: var(--syn-solmg-gutter-font, 500 10.5px/1.45 var(--type-family-mono)); color: var(--syn-solmg-gutter-color, var(--text-faint)); white-space: nowrap; }
.syn-solmg-row { display: flex; align-items: center; gap: var(--syn-solmg-row-gap, 10px); padding: var(--syn-solmg-row-padding, 7px 12px); border-bottom: var(--syn-solmg-row-border-bottom, 1px solid var(--border-hairline)); }
.syn-solmg-row:hover, .syn-solmg-row.is-lit { background: var(--syn-solmg-row-hover-background, var(--surface-hover)); border-radius: var(--syn-solmg-row-hover-border-radius, var(--radius-xs)); }
.syn-solmg-row:last-child { border-bottom: none; }
.syn-solmg-rowname { flex: 1; min-width: 0; font: var(--syn-solmg-rowname-font, 400 12.5px var(--type-family)); color: var(--syn-solmg-rowname-color, var(--text-body)); overflow-wrap: anywhere; }   /* a long heading WRAPS, never truncates */
.syn-solmg-rider { font: var(--syn-solmg-rider-font, 400 10.5px var(--type-family)); color: var(--syn-solmg-rider-color, var(--text-rider)); }
.syn-solmg-empty { padding: var(--syn-solmg-empty-padding, 20px 12px); font: var(--syn-solmg-empty-font, 400 0.75rem var(--type-family)); color: var(--syn-solmg-empty-color, var(--text-tertiary)); text-align: center; }
/* Q265 — the Research tab (mc-research 18a: the 12m anatomy on the slim MC shell) */
/* UD1 (Relay 30 §2 REVISED): the research reader re-seats by class with mc-solicitation — the one
   plane on the canvas at the ruled 14/20/24 gutter (insitu-research pins; margins net against
   .syn-mc-body's 22/28/60 padding). overflow: clip for the window-sticky lanes (Q275/QB27). */
.syn-res-grid { display: grid; grid-template-columns: var(--syn-res-grid-grid-template-columns, 224px minmax(0, 680px) 280px); gap: var(--syn-res-grid-gap, 48px); justify-content: center; padding: var(--syn-res-grid-padding, 40px 48px); background: var(--syn-res-grid-background, var(--surface-plane)); border: var(--syn-res-grid-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-res-grid-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-res-grid-box-shadow, var(--elevation-plane)); margin: var(--syn-res-grid-margin, -8px -8px -36px); overflow: clip; min-height: var(--syn-res-grid-min-height, 60vh); }
.syn-res-emptyplane { background: var(--syn-res-emptyplane-background, var(--surface-plane)); border: var(--syn-res-emptyplane-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-res-emptyplane-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-res-emptyplane-box-shadow, var(--elevation-plane)); margin: var(--syn-res-emptyplane-margin, -8px -8px -36px); padding: var(--syn-res-emptyplane-padding, 60px 48px); display: flex; flex-direction: column; align-items: center; gap: var(--syn-res-emptyplane-gap, 16px); }
.syn-res-outline { min-width: 0; position: sticky; top: var(--syn-res-outline-top, 16px); align-self: start; max-height: var(--syn-res-outline-max-height, calc(100vh - 32px)); overflow-y: auto; scrollbar-width: auto; }
.syn-res-laneslabel { font: var(--syn-res-laneslabel-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-res-laneslabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-res-laneslabel-text-transform, var(--type-label-transform)); color: var(--syn-res-laneslabel-color, var(--text-faint)); padding: var(--syn-res-laneslabel-padding, 0 0 6px); }
.syn-res-searchclear { border: none; background: transparent; font: var(--syn-res-searchclear-font, 400 12px var(--type-family)); color: var(--syn-res-searchclear-color, var(--text-faint)); cursor: pointer; padding: 0; flex: none; }
.syn-res-searchclear:hover { color: var(--syn-res-searchclear-hover-color, var(--text-ink)); }
/* UD7 (A4 text-scale R12): the research outline rows are READING class — rem at M-equivalence. */
.syn-res-row { display: flex; align-items: flex-start; width: 100%; font: var(--syn-res-row-font, 400 0.75rem/1.45 var(--type-family)); color: var(--syn-res-row-color, var(--text-muted)); padding: var(--syn-res-row-padding, 4px 9px); border: none; border-radius: var(--syn-res-row-border-radius, var(--radius-sm)); background: transparent; text-align: left; cursor: pointer; }
.syn-res-row:hover { background: var(--syn-res-row-hover-background, var(--surface-hover)); }
.syn-res-row.on { font-weight: var(--syn-res-row-on-font-weight, 600); color: var(--syn-res-row-on-color, var(--text-ink)); background: var(--syn-res-row-on-background, var(--surface-canvas)); }
.syn-res-row.is-sub { font-size: var(--syn-res-row-is-sub-font-size, 0.71875rem); color: var(--syn-res-row-is-sub-color, var(--text-tertiary)); padding-left: var(--syn-res-row-is-sub-padding-left, 23px); }
.syn-res-row.is-context { color: var(--syn-res-row-is-context-color, var(--text-faint)); }
/* RES-1 (b)(2) — the solicitation lane's .syn-solr-rownum law carried: the seat FITS its designator (a "1.10.2" never wraps into
   the title; 26px stays the floor so the ordinals keep their column); the first-line alignment is the row's flex-start (the scoped
   McResearchTab.razor.css seat, which had centred it). */
.syn-res-rownum { min-width: var(--syn-res-rownum-min-width, 26px); flex: none; white-space: nowrap; padding-right: var(--syn-res-rownum-padding-right, 4px); box-sizing: border-box; color: var(--syn-res-rownum-color, var(--text-faint)); font-weight: var(--syn-res-rownum-font-weight, 500); }
.syn-res-rowtext { flex: 1; min-width: 0; }
.syn-res-rowcount { flex: none; color: var(--syn-res-rowcount-color, var(--text-faint)); font-weight: var(--syn-res-rowcount-font-weight, 400); }
.syn-res-janedoor { border-top: var(--syn-res-janedoor-border-top, 1px solid var(--border-hairline)); margin-top: var(--syn-res-janedoor-margin-top, 8px); padding-top: var(--syn-res-janedoor-padding-top, 8px); }
.syn-res-askjane { display: inline-flex; align-items: center; gap: var(--syn-res-askjane-gap, 6px); font: var(--syn-res-askjane-font, 500 11.5px var(--type-family)); color: var(--syn-res-askjane-color, var(--accent-ai)); border: var(--syn-res-askjane-border, 1px solid var(--jane-border-muted)); border-radius: var(--syn-res-askjane-border-radius, var(--radius-nav)); padding: var(--syn-res-askjane-padding, 4px 9px); background: var(--syn-res-askjane-background, var(--surface-plane)); cursor: pointer; }
.syn-res-askjane:hover { background: var(--syn-res-askjane-hover-background, var(--surface-hover)); }
.syn-res-measure { min-width: 0; }
.syn-res-section { border-top: var(--syn-res-section-border-top, 1px solid var(--border-hairline)); padding-top: var(--syn-res-section-padding-top, 22px); margin-top: var(--syn-res-section-margin-top, 22px); }
/* RES-1: THE DOOR INTO THE ONE LIGHTBOX — in Read only the measure arms itself (data-lb-armed) and every section is the click; the
   INTERIM DRESS is the pointer alone (the solicitation's page carries no hover dress either) — CD's one touch draws the affordance. */
.syn-res-measure[data-lb-armed] .syn-res-section { cursor: zoom-in; }
.syn-res-section.is-first { border-top: none; padding-top: 0; margin-top: 0; }
.syn-res-sechead { margin: 0; font: var(--syn-res-sechead-font, var(--type-t1)); color: var(--syn-res-sechead-color, var(--text-ink)); letter-spacing: var(--syn-res-sechead-letter-spacing, -0.01em); }   /* UD24: T1 reader ladder, the section rung (700 20) */
/* Q275 (3): the four-level outline's stepped heading registers (depth 2–4). UD24: depth 2 is T1's depth-2 rung; 3–4 stay the drawn steps. */
.syn-res-sechead.is-d2 { font: var(--syn-res-sechead-is-d2-font, var(--type-t1-d2)); }
.syn-res-sechead.is-d3 { font-size: var(--syn-res-sechead-is-d3-font-size, 0.9375rem); }
.syn-res-sechead.is-d4 { font-size: var(--syn-res-sechead-is-d4-font-size, 0.875rem); }
.syn-res-secnum { color: var(--syn-res-secnum-color, var(--text-faint)); font-weight: var(--syn-res-secnum-font-weight, 500); margin-right: var(--syn-res-secnum-margin-right, 0.6em); }   /* UD13 delta 5a: the run-internal gap in EM */
/* Q284(a): the click-to-edit hover highlight is DISARMED (Ken ruled the affordance bad — the
   edit affordance returns as CD's lock/unlock comp). Plain reading surface. */
.syn-res-prose { margin-top: var(--syn-res-prose-margin-top, 12px); border-radius: var(--syn-res-prose-border-radius, var(--radius-sm)); }
.syn-res-prose p, .syn-res-prose li { font: var(--syn-res-prose-p-font, 400 0.8125rem/1.65 var(--type-family)); color: var(--syn-res-prose-p-color, var(--text-body)); text-wrap: pretty; margin: var(--syn-res-prose-p-margin, 8px 0 0); }
.syn-res-prose p:first-child { margin-top: 0; }
.syn-res-prose h1, .syn-res-prose h2, .syn-res-prose h3, .syn-res-prose h4 { font: var(--syn-res-prose-h1-font, 600 0.90625rem/1.3 var(--type-family)); color: var(--syn-res-prose-h1-color, var(--text-ink)); margin: var(--syn-res-prose-h1-margin, 16px 0 0); }
.syn-res-prose ul, .syn-res-prose ol { margin: var(--syn-res-prose-ul-margin, 8px 0 0); padding-left: var(--syn-res-prose-ul-padding-left, 20px); }
.syn-res-prose table { border-collapse: collapse; margin-top: var(--syn-res-prose-table-margin-top, 10px); }
.syn-res-prose th, .syn-res-prose td { border: var(--syn-res-prose-th-border, 1px solid var(--border-hairline)); padding: var(--syn-res-prose-th-padding, 4px 8px); font: var(--syn-res-prose-th-font, 400 0.75rem/1.5 var(--type-family)); color: var(--syn-res-prose-th-color, var(--text-body)); }
.syn-res-prose code { font: var(--syn-res-prose-code-font, 400 0.75rem var(--type-family-mono)); }
.syn-res-prose a { color: var(--syn-res-prose-a-color, var(--accent-action)); }   /* Q294(e): prose hyperlinks keep the link color under the quiet-ink base canon */

/* Q295(a) — HB-E57-1: the intake refusal's SECOND layer — the diagnostic sits beneath the
   plain line as its own muted register (the plain-language error law's full shape). */
.syn-res-emptybody { font: var(--syn-res-emptybody-font, 400 0.8125rem/1.65 var(--type-family)); color: var(--syn-res-emptybody-color, var(--text-faint)); font-style: var(--syn-res-emptybody-font-style, italic); margin: 0; }
.syn-res-hit { background: var(--syn-res-hit-background, var(--hit-wash)); border-radius: var(--syn-res-hit-border-radius, var(--radius-2xs)); color: inherit; }
.syn-res-matchfoot { font: var(--syn-res-matchfoot-font, 400 10px var(--type-family)); color: var(--syn-res-matchfoot-color, var(--text-faint)); margin-top: var(--syn-res-matchfoot-margin-top, 16px); }
.syn-res-marginalia { display: flex; flex-direction: column; gap: var(--syn-res-marginalia-gap, 14px); min-width: 0; position: sticky; top: var(--syn-res-marginalia-top, 16px); align-self: start; }
.syn-res-doors { display: flex; flex-direction: column; gap: var(--syn-res-doors-gap, 8px); align-items: flex-start; }
/* Q288 (Relay 23 d2) — the research resequencer (the FULL REPLACEMENT of the Q265/Q275 roster;
   the drawn values are the reference). 840 canvas; nested groups carry the 1px indent guides;
   drag is fully client-side (resequencer.js) — the accent dropline + dot live here. Acts are
   hover-revealed except the grip and number; the selected row wears the tinted-inset ground.
   The Q281 shrink law rides the title (min-width:0 + ellipsis — a floor with permission). */
/* UD25 (Relay 36 Part 2 #3 — THE TALL-COLUMN REVERSAL, RATIFIED): research-manage at FORM Extra 900. The .syn-rsq-dx hook
   (ModalShell's per-modal knob, the .syn-tif-dx idiom — DxPopup portals the shell outside the component's DOM) trues the
   frame to the drawing: a padding-less room whose BANDS own the inset — head 20×24 (12 below) on a --border-row hairline ·
   the body a CLIPPED flex column (it never scrolls) · the outline list THE ONE SCROLLER (12px 24px 0 inset) · the composer
   band pinned above the footer · the self-saving footer 12×24 on the hairline. No negative band margins (the Q380 law). */
.syn-rsq-dx .syn-modal-inner { padding: 0; gap: 0; }
.syn-rsq-dx .syn-modal-head { padding: var(--syn-rsq-dx-modal-head-padding, 20px 24px 12px); border-bottom: var(--syn-rsq-dx-modal-head-border-bottom, 1px solid var(--border-hairline)); flex: none; }
.syn-rsq-dx .syn-modal-body { overflow: hidden; display: flex; flex-direction: column; }
.syn-rsq-dx .syn-modal-feedback { margin: var(--syn-rsq-dx-modal-feedback-margin, 8px 24px 0); }
.syn-rsq-dx .syn-modal-foot { margin: 0; padding: var(--syn-rsq-dx-modal-foot-padding, 12px 24px); flex: none; }
.syn-rsq { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.syn-rsq .syn-solr-error { margin: var(--syn-rsq-solr-error-margin, 10px 24px 0); }
.syn-rsq-footnote { flex: 1; font: var(--syn-rsq-footnote-font, 400 11.5px var(--type-family)); color: var(--syn-rsq-footnote-color, var(--text-tertiary)); }
.syn-rsq-list { flex: 1; min-height: 0; overflow: auto; position: relative; padding: var(--syn-rsq-list-padding, 12px 24px 8px); }
.syn-rsq-group { margin-left: var(--syn-rsq-group-margin-left, 22px); border-left: var(--syn-rsq-group-border-left, 1px solid var(--border-emphasis)); }
.syn-rsq-row { display: flex; align-items: center; gap: var(--syn-rsq-row-gap, 8px); padding: var(--syn-rsq-row-padding, 6px 8px); border-radius: var(--syn-rsq-row-border-radius, var(--radius-nav)); border: var(--syn-rsq-row-border, 1px solid transparent); outline: none; }
.syn-rsq-row:hover { background: var(--syn-rsq-row-hover-background, var(--surface-hover)); }
.syn-rsq-row.is-selected { background: var(--syn-rsq-row-is-selected-background, var(--tinted-inset)); border-color: var(--syn-rsq-row-is-selected-border-color, var(--border-emphasis)); }
.syn-rsq-grip { color: var(--syn-rsq-grip-color, var(--text-faint)); font: var(--syn-rsq-grip-font, 400 13px var(--type-family)); width: var(--syn-rsq-grip-width, 14px); flex: none; cursor: grab; text-align: center; }
.syn-rsq-num { width: var(--syn-rsq-num-width, 34px); flex: none; font: var(--syn-rsq-num-font, 500 12px var(--type-family)); color: var(--syn-rsq-num-color, var(--text-faint)); font-variant-numeric: var(--syn-rsq-num-font-variant-numeric, tabular-nums); }
.syn-rsq-num.is-d3 { width: var(--syn-rsq-num-is-d3-width, 46px); }
.syn-rsq-num.is-d4 { width: var(--syn-rsq-num-is-d4-width, 58px); }
.syn-rsq-ttl { flex: 1; min-width: 0; font: var(--syn-rsq-ttl-font, 500 12.5px var(--type-family)); color: var(--syn-rsq-ttl-color, var(--text-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-rsq-act { width: var(--syn-rsq-act-width, 26px); height: var(--syn-rsq-act-height, 26px); border-radius: var(--syn-rsq-act-border-radius, var(--radius-nav)); display: inline-flex; align-items: center; justify-content: center; flex: none; font: var(--syn-rsq-act-font, 400 12.5px var(--type-family)); color: var(--syn-rsq-act-color, var(--text-tertiary)); border: var(--syn-rsq-act-border, 1px solid transparent); background: transparent; cursor: pointer; padding: 0; visibility: hidden; }
.syn-rsq-row:hover .syn-rsq-act, .syn-rsq-row.is-selected .syn-rsq-act, .syn-rsq-row:focus-visible .syn-rsq-act { visibility: visible; }
.syn-rsq-act:hover:not(:disabled) { background: var(--syn-rsq-act-hover-not-disabled-background, var(--surface-plane)); border-color: var(--syn-rsq-act-hover-not-disabled-border-color, var(--border-default)); color: var(--syn-rsq-act-hover-not-disabled-color, var(--text-ink)); }
.syn-rsq-act.is-chev { font: var(--syn-rsq-act-is-chev-font, 500 16px/1 var(--type-family)); color: var(--syn-rsq-act-is-chev-color, var(--text-body)); }
.syn-rsq-act.is-danger { color: var(--syn-rsq-act-is-danger-color, var(--state-attention-text)); }
.syn-rsq-act:disabled { color: var(--syn-rsq-act-disabled-color, var(--text-faint)); cursor: default; }
.syn-rsq-row.is-ghost { opacity: var(--syn-rsq-row-is-ghost-opacity, .45); }
.syn-rsq-row.is-ghost .syn-rsq-act { visibility: hidden; }
.syn-rsq-dropline { position: absolute; height: 0; border-top: var(--syn-rsq-dropline-border-top, 2px solid var(--accent-action)); right: var(--syn-rsq-dropline-right, 8px); pointer-events: none; z-index: 3; }
.syn-rsq-dropline::before { content: ''; position: absolute; left: var(--syn-rsq-dropline-before-left, -8px); top: var(--syn-rsq-dropline-before-top, -5px); width: var(--syn-rsq-dropline-before-width, 8px); height: var(--syn-rsq-dropline-before-height, 8px); border-radius: 50%; background: var(--syn-rsq-dropline-before-background, var(--accent-action)); }
.syn-rsq-row.is-confirm { background: var(--syn-rsq-row-is-confirm-background, var(--tinted-inset)); }
.syn-rsq-confirmwords { font: var(--syn-rsq-confirmwords-font, 400 11.5px/1.5 var(--type-family)); color: var(--syn-rsq-confirmwords-color, var(--text-ink)); min-width: 0; }
.syn-rsq-confirmwords b { font-weight: var(--syn-rsq-confirmwords-b-font-weight, 600); }
.syn-rsq-rename { flex: 1; min-width: 0; border: var(--syn-rsq-rename-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-rsq-rename-border-radius, var(--radius-sm)); background: var(--syn-rsq-rename-background, var(--surface-plane)); padding: var(--syn-rsq-rename-padding, 3px 8px); font: var(--syn-rsq-rename-font, 400 12px var(--type-family)); color: var(--syn-rsq-rename-color, var(--text-ink)); outline: none; }
.syn-rsq-composer { flex: none; border-top: var(--syn-rsq-composer-border-top, 1px solid var(--border-hairline)); padding: var(--syn-rsq-composer-padding, 10px 24px); }   /* UD25: THE COMPOSER PIN — a fixed band above the footer, out of the outline's scroll */
.syn-rsq-composerlabel { font: var(--syn-rsq-composerlabel-font, 600 9.5px var(--type-family-mono)); letter-spacing: var(--syn-rsq-composerlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-rsq-composerlabel-text-transform, var(--type-label-transform)); color: var(--syn-rsq-composerlabel-color, var(--text-faint)); }
.syn-rsq-composerrow { display: flex; gap: var(--syn-rsq-composerrow-gap, 8px); margin-top: var(--syn-rsq-composerrow-margin-top, 6px); align-items: center; }
.syn-rsq-composerinput { flex: 1; min-width: 0; font: var(--syn-rsq-composerinput-font, 400 12.5px var(--type-family)); color: var(--syn-rsq-composerinput-color, var(--text-ink)); background: var(--syn-rsq-composerinput-background, var(--surface-plane)); border: var(--syn-rsq-composerinput-border, 1px solid var(--border-default)); border-radius: var(--syn-rsq-composerinput-border-radius, var(--radius-nav)); padding: var(--syn-rsq-composerinput-padding, 7px 10px); outline: none; }
.syn-rsq-underpick { font: var(--syn-rsq-underpick-font, 500 11.5px var(--type-family)); color: var(--syn-rsq-underpick-color, var(--text-body)); white-space: nowrap; }
.syn-rsq-underpick b { font-weight: var(--syn-rsq-underpick-b-font-weight, 600); }
/* the Download research report modal (12m verbatim) */
.syn-res-dllist { position: relative; }
.syn-soldl-shelf.is-pinned { position: sticky; top: 0; z-index: 1; }
.syn-res-dlscroll { max-height: var(--syn-res-dlscroll-max-height, 300px); overflow-y: auto; scrollbar-width: auto; }
/* RES-1's rider ([REBUILD-SOL-15] CANON-DELTA 5): the number is a COLUMN, not a gap — the roster's 64 px mono seat (.syn-solmg-gutter) +
   the row's gap 10, every title on one x; the number carries the depth, so a sub row takes no indent. */
.syn-res-dlscroll .syn-soldl-row { gap: var(--syn-res-dlscroll-soldl-row-gap, 10px); }
/* Notices (ATOMS) — the 5a anatomy in the reader grid */
/* ── t35 (f) THE NOTICES LENS ON THE SHELF GRAMMAR (relay 43 notices-lens): the Latest Announcement plane (the 5a card, no dot)
   over the notice spine — the release shelf's own row classes (date column · spine column · card), the time beneath the date in
   the quiet mono register; the notice card's head/kind/rider ramp mirrors the release card's; the open card's body = the ratified
   field-change grid + the verbatim note. The notice-date lane, the reader-grid shell and the TRACKING block died. ── */
.syn-soln { display: flex; flex-direction: column; min-height: 0; }
.syn-mc-page.is-reader .syn-soln { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: auto; }
.syn-soln-planehead { display: flex; align-items: baseline; gap: var(--syn-soln-planehead-gap, 8px); padding: var(--syn-soln-planehead-padding, 0 0 8px 114px); }
.syn-soln-eyebrow { font: var(--syn-soln-eyebrow-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-soln-eyebrow-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-soln-eyebrow-text-transform, var(--type-label-transform)); color: var(--syn-soln-eyebrow-color, var(--text-tertiary)); }
.syn-soln-meta { font: var(--syn-soln-meta-font, 400 10.5px var(--type-family)); color: var(--syn-soln-meta-color, var(--text-faint)); }
.syn-solr-card.syn-soln-announcement { margin: var(--syn-solr-card-soln-announcement-margin, 0 0 18px 114px); gap: var(--syn-solr-card-soln-announcement-gap, 9px); }
.syn-soln-listhead { padding: var(--syn-soln-listhead-padding, 0 0 6px 114px); }
.syn-soln-time { font: var(--syn-soln-time-font, 400 10px var(--type-family-mono)); color: var(--syn-soln-time-color, var(--text-rider)); white-space: nowrap; }
.syn-solrel-spinedot.is-door { border: none; padding: 0; cursor: pointer; }
.syn-soln-card { background: var(--syn-soln-card-background, var(--surface-plane)); border: var(--syn-soln-card-border, 1px solid var(--border-default)); border-radius: var(--syn-soln-card-border-radius, var(--shape-radius-control)); }
.syn-soln-card.is-open { border-color: var(--syn-soln-card-is-open-border-color, var(--border-emphasis)); box-shadow: var(--syn-soln-card-is-open-box-shadow, var(--elevation-plane)); overflow: hidden; }
.syn-soln-head { display: flex; align-items: center; gap: var(--syn-soln-head-gap, 10px); width: 100%; padding: var(--syn-soln-head-padding, 10px 18px); border: none; background: transparent; text-align: left; cursor: pointer; }
.syn-soln-head .syn-icon { color: var(--syn-soln-head-icon-color, var(--text-tertiary)); flex: none; }
.syn-soln-card.is-open .syn-soln-head { padding: var(--syn-soln-card-is-open-soln-head-padding, 13px 18px 9px); }
.syn-soln-card.is-line .syn-soln-head:hover { background: var(--syn-soln-card-is-line-soln-head-hover-background, var(--surface-hover)); }
.syn-soln-kind { font: var(--syn-soln-kind-font, 600 12.5px var(--type-family)); color: var(--syn-soln-kind-color, var(--text-ink)); }
.syn-soln-card.is-open .syn-soln-kind { font: var(--syn-soln-card-is-open-soln-kind-font, 700 15px var(--type-family)); letter-spacing: var(--syn-soln-card-is-open-soln-kind-letter-spacing, -0.01em); }
.syn-soln-rider { font: var(--syn-soln-rider-font, 400 11.5px var(--type-family)); color: var(--syn-soln-rider-color, var(--text-rider)); }
.syn-soln-card.is-open .syn-soln-rider { color: var(--syn-soln-card-is-open-soln-rider-color, var(--text-tertiary)); }
.syn-soln-body { padding: var(--syn-soln-body-padding, 0 18px 12px 42px); }
.syn-soln-grid { padding: var(--syn-soln-grid-padding, 2px 0 10px); }
.syn-solr-card { background: var(--syn-solr-card-background, var(--surface-plane)); border: var(--syn-solr-card-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-solr-card-border-radius, var(--shape-radius-control)); box-shadow: var(--syn-solr-card-box-shadow, var(--elevation-plane)); padding: var(--syn-solr-card-padding, 14px 18px); display: flex; flex-direction: column; gap: var(--syn-solr-card-gap, 10px); }
.syn-solr-card.is-history { padding: var(--syn-solr-card-is-history-padding, 4px 0); gap: 0; }
.syn-solr-factgrid { display: grid; grid-template-columns: var(--syn-solr-factgrid-grid-template-columns, 150px 1fr); gap: var(--syn-solr-factgrid-gap, 6px 14px); align-items: baseline; }
.syn-solr-factlabel { font-size: var(--syn-solr-factlabel-font-size, 9.5px); font-weight: var(--syn-solr-factlabel-font-weight, 600); letter-spacing: var(--syn-solr-factlabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-solr-factlabel-color, var(--text-tertiary)); text-transform: var(--syn-solr-factlabel-text-transform, var(--type-label-transform)); }
.syn-solr-factvalue { font-size: var(--syn-solr-factvalue-font-size, 0.78125rem); color: var(--syn-solr-factvalue-color, var(--text-body)); }
.syn-solr-factvalue.is-strong { font-weight: var(--syn-solr-factvalue-is-strong-font-weight, 600); color: var(--syn-solr-factvalue-is-strong-color, var(--text-ink)); }
.syn-solr-factvalue.is-prose { line-height: var(--syn-solr-factvalue-is-prose-line-height, 1.55); text-wrap: pretty; }
.syn-solr-factvalue.is-jump { cursor: pointer; }
.syn-solr-contactname { font-weight: var(--syn-solr-contactname-font-weight, 600); color: var(--syn-solr-contactname-color, var(--text-ink)); }
.syn-solr-mail { color: var(--syn-solr-mail-color, var(--accent-action)); font-size: var(--syn-solr-mail-font-size, 0.75rem); text-decoration: var(--syn-solr-mail-text-decoration, none); }
.syn-solr-mail:hover { text-decoration: var(--syn-solr-mail-hover-text-decoration, underline); }
.syn-solr-note { background: var(--syn-solr-note-background, var(--bg-secondary)); border: var(--syn-solr-note-border, 1px solid var(--border-hairline)); border-radius: var(--syn-solr-note-border-radius, var(--radius-sm)); padding: var(--syn-solr-note-padding, 8px 12px); }
.syn-solr-note.is-inline { margin-bottom: var(--syn-solr-note-is-inline-margin-bottom, 10px); }
.syn-solr-notehead { font-size: var(--syn-solr-notehead-font-size, 10.5px); color: var(--syn-solr-notehead-color, var(--text-tertiary)); margin-bottom: var(--syn-solr-notehead-margin-bottom, 2px); }
.syn-solr-noteauthor { font-weight: var(--syn-solr-noteauthor-font-weight, 600); color: var(--syn-solr-noteauthor-color, var(--text-body)); }
.syn-solr-notetext { font-size: var(--syn-solr-notetext-font-size, 0.75rem); line-height: var(--syn-solr-notetext-line-height, 1.5); color: var(--syn-solr-notetext-color, var(--text-body)); white-space: pre-line; }   /* [REBUILD-ATOMS-2] (c): the sender's lines stay their lines */
.syn-solr-histgrid { display: grid; grid-template-columns: var(--syn-solr-histgrid-grid-template-columns, 150px 1fr); gap: var(--syn-solr-histgrid-gap, 3px 14px); padding: var(--syn-solr-histgrid-padding, 8px 0 10px); }
.syn-solr-histgrid .syn-solr-factlabel { padding-top: var(--syn-solr-histgrid-solr-factlabel-padding-top, 2px); }
.syn-solr-histvalue { font-size: var(--syn-solr-histvalue-font-size, 0.78125rem); color: var(--syn-solr-histvalue-color, var(--text-body)); white-space: pre-line; }   /* [REBUILD-ATOMS-2] (d): a date's caveat on its own line, a ledger's rows on theirs */
.syn-solr-old { color: var(--syn-solr-old-color, var(--text-faint)); text-decoration: var(--syn-solr-old-text-decoration, line-through); }
.syn-solr-old.is-none { text-decoration: var(--syn-solr-old-is-none-text-decoration, none); }
.syn-solr-arrow { color: var(--syn-solr-arrow-color, var(--text-tertiary)); margin: var(--syn-solr-arrow-margin, 0 4px); }
.syn-solr-new { font-weight: var(--syn-solr-new-font-weight, 600); color: var(--syn-solr-new-color, var(--text-ink)); }

/* Part R — Reference Lists curation (Q48; mockup Admin.jsx L193–336, authored from its inline styles) */
.syn-admin-refs { display: flex; flex-direction: column; gap: var(--syn-admin-refs-gap, 12px); }
.syn-admin-refs-frame { display: flex; border: var(--syn-admin-refs-frame-border, 1px solid var(--border-default)); border-radius: var(--syn-admin-refs-frame-border-radius, var(--shape-radius-sheet)); overflow: hidden; background: var(--syn-admin-refs-frame-background, var(--surface-plane)); min-height: var(--syn-admin-refs-frame-min-height, 420px); }
.syn-admin-refs-rail { width: var(--syn-admin-refs-rail-width, 248px); flex-shrink: 0; border-right: var(--syn-admin-refs-rail-border-right, 1px solid var(--border-default)); overflow: auto; padding: var(--syn-admin-refs-rail-padding, 8px); }
.syn-admin-refs-kind { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-admin-refs-kind-gap, 8px); width: 100%; text-align: left; padding: var(--syn-admin-refs-kind-padding, 9px 11px); margin-bottom: var(--syn-admin-refs-kind-margin-bottom, 2px); border-radius: var(--syn-admin-refs-kind-border-radius, var(--shape-radius-control)); border: none; background: transparent; color: var(--syn-admin-refs-kind-color, var(--text-ink)); font-size: var(--syn-admin-refs-kind-font-size, 0.8125rem); font-weight: var(--syn-admin-refs-kind-font-weight, 400); cursor: pointer; }
.syn-admin-refs-kind:hover { background: var(--syn-admin-refs-kind-hover-background, var(--surface-hover)); }
.syn-admin-refs-kind.is-on { background: var(--syn-admin-refs-kind-is-on-background, var(--surface-inset)); color: var(--syn-admin-refs-kind-is-on-color, var(--text-ink)); font-weight: var(--syn-admin-refs-kind-is-on-font-weight, 600); }   /* Q96 flag 7: de-accented active */
.syn-admin-refs-kindlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-admin-refs-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.syn-admin-refs-head { padding: var(--syn-admin-refs-head-padding, 14px 18px); border-bottom: var(--syn-admin-refs-head-border-bottom, 1px solid var(--border-default)); display: flex; align-items: center; justify-content: space-between; gap: var(--syn-admin-refs-head-gap, 12px); flex-wrap: wrap; }
.syn-admin-refs-title { font-size: var(--syn-admin-refs-title-font-size, 0.9375rem); font-weight: var(--syn-admin-refs-title-font-weight, var(--font-semibold)); }
.syn-admin-refs-sub { font-size: var(--syn-admin-refs-sub-font-size, 0.75rem); color: var(--syn-admin-refs-sub-color, var(--text-tertiary)); margin-top: var(--syn-admin-refs-sub-margin-top, 2px); }
.syn-admin-refs-headacts { display: flex; gap: var(--syn-admin-refs-headacts-gap, 8px); align-items: center; }
.syn-admin-refs-showinactive { display: inline-flex; align-items: center; gap: var(--syn-admin-refs-showinactive-gap, 6px); font-size: var(--syn-admin-refs-showinactive-font-size, 0.75rem); color: var(--syn-admin-refs-showinactive-color, var(--text-muted)); }
.syn-admin-refs-locked { padding: var(--syn-admin-refs-locked-padding, 8px 18px); border-bottom: var(--syn-admin-refs-locked-border-bottom, 1px solid var(--border-default)); background: var(--syn-admin-refs-locked-background, var(--state-warning-tint)); color: var(--syn-admin-refs-locked-color, var(--state-warning)); font-size: var(--syn-admin-refs-locked-font-size, 0.75rem); }
.syn-admin-refs-mergebar { padding: var(--syn-admin-refs-mergebar-padding, 10px 18px); background: var(--syn-admin-refs-mergebar-background, var(--bg-secondary)); border-bottom: var(--syn-admin-refs-mergebar-border-bottom, 1px solid var(--border-default)); font-size: var(--syn-admin-refs-mergebar-font-size, 0.8125rem); color: var(--syn-admin-refs-mergebar-color, var(--text-body)); display: flex; align-items: center; gap: var(--syn-admin-refs-mergebar-gap, 12px); flex-wrap: wrap; }   /* Q96 flag 8: a mode signal, not an accent use */
.syn-admin-refs-addrow { padding: var(--syn-admin-refs-addrow-padding, 10px 18px); border-bottom: var(--syn-admin-refs-addrow-border-bottom, 1px solid var(--border-default)); display: flex; gap: var(--syn-admin-refs-addrow-gap, 8px); align-items: center; }
.syn-admin-refs-addinput { flex: 1; padding: var(--syn-admin-refs-addinput-padding, 7px 10px); border: var(--syn-admin-refs-addinput-border, 1px solid var(--accent-action)); border-radius: var(--syn-admin-refs-addinput-border-radius, var(--shape-radius-control)); font-size: var(--syn-admin-refs-addinput-font-size, 0.8125rem); font-family: inherit; outline: none; background: var(--syn-admin-refs-addinput-background, var(--surface-plane)); color: var(--syn-admin-refs-addinput-color, var(--text-ink)); }
.syn-admin-refs-rows { flex: 1; overflow: auto; }
.syn-admin-refs-row { display: flex; align-items: center; gap: var(--syn-admin-refs-row-gap, 12px); padding: var(--syn-admin-refs-row-padding, 9px 18px); border-bottom: var(--syn-admin-refs-row-border-bottom, 1px solid var(--border-default)); }
.syn-admin-refs-row.is-inactive { opacity: var(--syn-admin-refs-row-is-inactive-opacity, 0.55); }
.syn-admin-refs-row:hover { background: var(--syn-admin-refs-row-hover-background, var(--surface-hover)); }
.syn-admin-refs-arrows { display: flex; flex-direction: column; gap: var(--syn-admin-refs-arrows-gap, 1px); }
.syn-admin-refs-namecell { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--syn-admin-refs-namecell-gap, 7px); }
.syn-admin-refs-name { display: inline-flex; align-items: center; gap: var(--syn-admin-refs-name-gap, 7px); cursor: pointer; font-size: var(--syn-admin-refs-name-font-size, 0.875rem); font-weight: var(--syn-admin-refs-name-font-weight, var(--font-medium)); }
.syn-admin-refs-name.is-static { cursor: default; }
.syn-admin-refs-star { display: inline-flex; }
.syn-admin-refs-renameinput { width: var(--syn-admin-refs-renameinput-width, 260px); }
.syn-admin-refs-usage { font-size: var(--syn-admin-refs-usage-font-size, 0.75rem); color: var(--syn-admin-refs-usage-color, var(--text-tertiary)); white-space: nowrap; }
.syn-admin-refs-empty { padding: var(--syn-admin-refs-empty-padding, 40px); text-align: center; color: var(--syn-admin-refs-empty-color, var(--text-tertiary)); font-size: var(--syn-admin-refs-empty-font-size, 0.8125rem); }
.syn-admin-refs-foot { padding: var(--syn-admin-refs-foot-padding, 10px 18px); border-top: var(--syn-admin-refs-foot-border-top, 1px solid var(--border-default)); display: flex; gap: var(--syn-admin-refs-foot-gap, 8px); align-items: flex-start; font-size: var(--syn-admin-refs-foot-font-size, 0.71875rem); color: var(--syn-admin-refs-foot-color, var(--text-tertiary)); background: var(--syn-admin-refs-foot-background, var(--bg-secondary)); }
.syn-admin-refs-foot .syn-icon { flex-shrink: 0; margin-top: var(--syn-admin-refs-foot-icon-margin-top, 1px); }
.syn-admin-refs-row input[type=checkbox], .syn-admin-refs-showinactive input[type=checkbox] { accent-color: var(--syn-admin-refs-row-input-type-checkbox-accent-color, var(--accent-action)); width: var(--syn-admin-refs-row-input-type-checkbox-width, 15px); height: var(--syn-admin-refs-row-input-type-checkbox-height, 15px); }

/* ── The Settings MODAL (Q210 — R10 `settings-modal` package, 10a RATIFIED; the Q74 page died).
   Transplanted values (comp inline styles; TEXT-SIZE-LAW: reading = rem, chrome = px). The modal
   chrome is the comp's own and scopes to `.syn-setm-dx` (ModalShell CssClass): 480 wide, 12px
   radius, the ruled 0 12px 32px -8px rgba(23,23,23,.35) shadow, no border, 480px content + 20px 22px padding (524 outer), a
   14px column gap; title 19px 700 −0.01em; the close act 14px --text-tertiary; scrim var(--surface-scrim). ─── */
/* (The ruled R10 modal scrim is dialog.syn-modal-dx::backdrop — the ModalShell block; [AF-82].) */
/* Q249 (D-13): the R10 chrome is the shell DEFAULT now — this scope keeps only the 10a exceptions
   (padding 20×22 / gap 14 / the close act --text-tertiary / an unclipped body). QB62: the title-19 exception DIED — R3 FORM 15
   is the one modal-title size for every FORM seat (SPECIES-ASSIGNMENT §1). */
.syn-setm-dx .syn-modal-inner { padding: var(--syn-setm-dx-modal-inner-padding, 20px 22px); gap: var(--syn-setm-dx-modal-inner-gap, 14px); }
.syn-setm-dx .syn-modal-x { color: var(--syn-setm-dx-modal-x-color, var(--text-tertiary)); }
.syn-setm-dx .syn-modal-body { overflow: visible; }
/* TI-MODAL-1 — THE TEAMING-INTEREST MODAL ON THE HOUSE SHELL (Relay 48 §1 rev 2a; the comp of record: Relay 48 Returns/
   capture-interest-form; ids `capture-interest-form-*`). The per-modal knob per Q249 (DxPopup portals the shell outside the
   component's DOM, so the surface's rules live here, keyed on the shell's CssClass): FORM · Extra 900 as a PADDING-LESS room
   whose BANDS own the inset (the Q380 law — no negative band margins) — head 16×24 (12 under) on the --border-row hairline,
   the body THE ONE SCROLLER at 18×24 (22 under), the foot 12×24 on the same hairline. The head carries its own words through
   TitleContent (the shell's empty title slot collapses); the title is INK in the drawn 700 18 (never blue, never a door);
   the TOPR chip is the species' own seat one register up (600 11 primary on emphasis — CD's call, Ken ratifies at sight).
   Reading column ≤ 580 (≈ 65 ch) · gap 24 · rail 240; Jane's card on the RULED JANE PLANE under the record facts; sections
   ride SectionCard (flat: head + plane as the column's siblings) at the drawn 12×15 plane inset. Buttons are the canon's
   seats (Done = primary ink · View = the bordered commit-pair member · Download = quiet text · Re-run / Ask Jane = the Jane
   chip) — where the comp's ad-hoc metric differs the canon wins and the delta is reported. */
.syn-tif-dx .syn-modal-inner { padding: 0; gap: 0; }
/* `narrow` must be REACHABLE: the FORM stop is 900 but the shell never out-runs a slim viewport (20px of desk either side) — below
   the width where column + gap + rail fit, the surface re-seats the rail above the prose (theme.js watchNarrow). */
/* (the max-width that kept this shell inside a slim viewport is every dialog's now — dialog.syn-modal-dx) */
.syn-tif-dx .syn-modal-head { align-items: center; gap: var(--syn-tif-dx-modal-head-gap, 14px); padding: var(--syn-tif-dx-modal-head-padding, 16px 24px 12px); border-bottom: var(--syn-tif-dx-modal-head-border-bottom, 1px solid var(--border-hairline)); flex: none; }
.syn-tif-dx .syn-modal-titlewrap { display: contents; }
.syn-tif-dx .syn-modal-titletext { display: none; }
.syn-tif-dx .syn-modal-x { color: var(--syn-tif-dx-modal-x-color, var(--text-tertiary)); margin-top: 0; align-self: center; }
.syn-tif-dx .syn-modal-body { padding: var(--syn-tif-dx-modal-body-padding, 18px 24px 22px); }
.syn-tif-dx .syn-modal-feedback { margin: var(--syn-tif-dx-modal-feedback-margin, 8px 24px 0); }
.syn-tif-dx .syn-modal-foot { justify-content: flex-start; margin: 0; padding: var(--syn-tif-dx-modal-foot-padding, 12px 24px); flex: none; }
.syn-tif-headwords { flex: 1; min-width: 0; }
.syn-tif-kicker { font: var(--syn-tif-kicker-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-tif-kicker-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-tif-kicker-text-transform, var(--type-label-transform)); color: var(--syn-tif-kicker-color, var(--text-tertiary)); }
.syn-tif-titlerow { display: flex; align-items: center; gap: var(--syn-tif-titlerow-gap, 10px); margin-top: var(--syn-tif-titlerow-margin-top, 2px); min-width: 0; flex-wrap: wrap; }
.syn-tif-title { margin: 0; font: var(--syn-tif-title-font, var(--type-r3-work)); line-height: normal; color: var(--syn-tif-title-color, var(--text-ink)); min-width: 0; overflow-wrap: anywhere; }
.syn-modal-chip.syn-tif-chip { font: var(--syn-modal-chip-tif-chip-font, 600 11px var(--type-family-mono)); color: var(--syn-modal-chip-tif-chip-color, var(--text-ink)); border-color: var(--syn-modal-chip-tif-chip-border-color, var(--border-emphasis)); padding: var(--syn-modal-chip-tif-chip-padding, 3px 9px); }
.syn-tif-frame { display: flex; gap: var(--syn-tif-frame-gap, 24px); align-items: flex-start; }
.syn-tif-frame.is-narrow { display: block; }
.syn-tif-column { flex: 1; min-width: 0; max-width: var(--syn-tif-column-max-width, 580px); }
.syn-tif-column > .syn-section-head { margin: var(--syn-tif-column-section-head-margin, 16px 0 6px); padding: 0; min-height: 0; }
.syn-tif-column > .syn-section-head:first-child { margin-top: 0; }
.syn-tif-column > .syn-section-body { overflow: visible; }
.syn-tif-qrun { font: var(--syn-tif-qrun-font, 600 12.5px/1.65 var(--type-family)); color: var(--syn-tif-qrun-color, var(--text-ink)); }
.syn-tif-prose { font: var(--syn-tif-prose-font, 400 12.5px/1.65 var(--type-family)); color: var(--syn-tif-prose-color, var(--text-body)); overflow-wrap: anywhere; }
.syn-tif-qrun + .syn-tif-prose { margin-top: var(--syn-tif-qrun-tif-prose-margin-top, 4px); }
.syn-tif-prose + .syn-tif-qrun { margin-top: var(--syn-tif-prose-tif-qrun-margin-top, 10px); }
.syn-tif-prose.is-na { color: var(--syn-tif-prose-is-na-color, var(--text-tertiary)); }
.syn-tif-attachrow { display: flex; align-items: center; gap: var(--syn-tif-attachrow-gap, 10px); padding: var(--syn-tif-attachrow-padding, 4px 0); }
.syn-tif-attachrow + .syn-tif-attachrow { border-top: var(--syn-tif-attachrow-tif-attachrow-border-top, 1px solid var(--border-hairline)); }
.syn-tif-attachname { flex: 1; min-width: 0; }
.syn-tif-attachfile { font: var(--syn-tif-attachfile-font, 500 12.5px var(--type-family)); color: var(--syn-tif-attachfile-color, var(--text-ink)); overflow-wrap: anywhere; }
.syn-tif-attachlink { font: var(--syn-tif-attachlink-font, 500 12.5px var(--type-family)); color: var(--syn-tif-attachlink-color, var(--accent-action)); text-decoration: var(--syn-tif-attachlink-text-decoration, none); overflow-wrap: anywhere; }
.syn-tif-attachlink:hover { color: var(--syn-tif-attachlink-hover-color, var(--accent-action-hover)); text-decoration: var(--syn-tif-attachlink-hover-text-decoration, underline); }
.syn-tif-attachlink .syn-icon { vertical-align: var(--syn-tif-attachlink-icon-vertical-align, -1px); }
.syn-tif-attachmeta { font: var(--syn-tif-attachmeta-font, 400 11.5px var(--type-family)); color: var(--syn-tif-attachmeta-color, var(--text-tertiary)); white-space: nowrap; }
.syn-tif-attachrow .syn-btn { flex: none; }
.syn-tif-errata { font: var(--syn-tif-errata-font, 400 11px/1.5 var(--type-family)); color: var(--syn-tif-errata-color, var(--text-tertiary)); margin-top: var(--syn-tif-errata-margin-top, 10px); }
.syn-tif-rail { width: var(--syn-tif-rail-width, 240px); flex: none; }
.syn-tif-fact { padding: var(--syn-tif-fact-padding, 10px 0); min-width: 0; }
.syn-tif-fact + .syn-tif-fact { border-top: var(--syn-tif-fact-tif-fact-border-top, 1px solid var(--border-hairline)); }
.syn-tif-rail > .syn-tif-fact:first-child { padding: var(--syn-tif-rail-tif-fact-first-child-padding, 2px 0 10px); }
.syn-tif-factlabel { font: var(--syn-tif-factlabel-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-tif-factlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-tif-factlabel-text-transform, var(--type-label-transform)); color: var(--syn-tif-factlabel-color, var(--text-tertiary)); margin-bottom: var(--syn-tif-factlabel-margin-bottom, 3px); }
.syn-tif-orgdoor { font: var(--syn-tif-orgdoor-font, 500 12px var(--type-family)); overflow-wrap: anywhere; }   /* the door is the EntityRef family's (OrgRef): its accent ink, its 500 */
.syn-tif-orgdoor .syn-ref, .syn-tif-toprdoor .syn-ref { text-decoration: var(--syn-tif-orgdoor-ref-text-decoration, none); }
.syn-tif-orgdoor .syn-ref:hover, .syn-tif-toprdoor .syn-ref:hover, .syn-tif-subemail:hover, .syn-tif-sourcelink:hover { color: var(--syn-tif-orgdoor-ref-hover-color, var(--accent-action-hover)); text-decoration: var(--syn-tif-orgdoor-ref-hover-text-decoration, underline); }
.syn-tif-factmeta { font: var(--syn-tif-factmeta-font, 400 11.5px var(--type-family)); color: var(--syn-tif-factmeta-color, var(--text-muted)); margin-top: var(--syn-tif-factmeta-margin-top, 1px); }
.syn-tif-factvalue { font: var(--syn-tif-factvalue-font, 500 12px var(--type-family)); color: var(--syn-tif-factvalue-color, var(--text-ink)); overflow-wrap: anywhere; }
.syn-tif-vacant { font: var(--syn-tif-vacant-font, 400 12px var(--type-family)); color: var(--syn-tif-vacant-color, var(--text-faint)); }
.syn-tif-toprline + .syn-tif-toprline { margin-top: var(--syn-tif-toprline-tif-toprline-margin-top, 3px); }
.syn-tif-toprnum, .syn-tif-toprnum .syn-ref { font: var(--syn-tif-toprnum-font, 600 11.5px var(--type-family-mono)); color: var(--syn-tif-toprnum-color, var(--text-ink)); white-space: nowrap; }   /* the inert mono ref (ToprRef NumberOnly) in ink, as drawn */
.syn-tif-toprdoor, .syn-tif-toprdoor .syn-ref { font: var(--syn-tif-toprdoor-font, 400 12px var(--type-family)); }   /* the title door (ToprRef TitleOnly) at the drawn 400 */
.syn-tif-subemail { display: block; font: var(--syn-tif-subemail-font, 400 12px var(--type-family)); color: var(--syn-tif-subemail-color, var(--accent-action)); text-decoration: var(--syn-tif-subemail-text-decoration, none); margin-top: var(--syn-tif-subemail-margin-top, 1px); overflow-wrap: anywhere; }
.syn-tif-janeseat { padding-top: var(--syn-tif-janeseat-padding-top, 12px); border-top: var(--syn-tif-janeseat-border-top, 1px solid var(--border-hairline)); }
.syn-tif-jane { background: var(--syn-tif-jane-background, var(--accent-ai-tint)); border: var(--syn-tif-jane-border, 1px solid var(--jane-border-muted)); border-radius: var(--syn-tif-jane-border-radius, var(--shape-radius-control)); padding: var(--syn-tif-jane-padding, 11px 13px); }
.syn-tif-janehead { display: flex; align-items: center; gap: var(--syn-tif-janehead-gap, 6px); flex-wrap: wrap; }
.syn-tif-janelabel { font: var(--syn-tif-janelabel-font, 500 12px var(--type-family)); color: var(--syn-tif-janelabel-color, var(--accent-ai)); }
.syn-tif-janedate { font: var(--syn-tif-janedate-font, 400 11px var(--type-family)); color: var(--syn-tif-janedate-color, var(--text-faint)); }
.syn-tif-spring { flex: 1; }
.syn-tif-janebody { font: var(--syn-tif-janebody-font, 400 11.5px/1.6 var(--type-family)); color: var(--syn-tif-janebody-color, var(--text-body)); margin-top: var(--syn-tif-janebody-margin-top, 6px); overflow-wrap: anywhere; }
.syn-tif-janerest { font: var(--syn-tif-janerest-font, 400 11.5px/1.6 var(--type-family)); color: var(--syn-tif-janerest-color, var(--text-tertiary)); margin-top: var(--syn-tif-janerest-margin-top, 6px); }
.syn-tif-janeact { margin-top: var(--syn-tif-janeact-margin-top, 8px); }
.syn-tif-janebusy { display: flex; align-items: center; gap: var(--syn-tif-janebusy-gap, 8px); margin-top: var(--syn-tif-janebusy-margin-top, 8px); }   /* the busy line's seat: the Jane chip in its Working face (the one working affordance) */
/* narrow: the rail's contents re-seat ABOVE the prose — the facts as one quiet band, then Jane's card at the reading measure */
.syn-tif-factsband { display: flex; gap: var(--syn-tif-factsband-gap, 28px); flex-wrap: wrap; padding: var(--syn-tif-factsband-padding, 2px 0 14px); border-bottom: var(--syn-tif-factsband-border-bottom, 1px solid var(--border-hairline)); margin-bottom: var(--syn-tif-factsband-margin-bottom, 14px); }
.syn-tif-factsband > .syn-tif-fact { padding: 0; border-top: none; }
.syn-tif-source { font: var(--syn-tif-source-font, 500 10.5px var(--type-family-mono)); color: var(--syn-tif-source-color, var(--text-tertiary)); display: inline-flex; align-items: center; gap: var(--syn-tif-source-gap, 4px); }
.syn-tif-sourcelink { color: inherit; text-decoration: var(--syn-tif-sourcelink-text-decoration, none); display: inline-flex; align-items: center; gap: var(--syn-tif-sourcelink-gap, 4px); }
/* the viewer's degraded register (TI-MODAL-1): the one plain sentence in the scrim's quiet literal — never a blank strip */
.syn-solr-lbdoc.is-degraded { padding: var(--syn-solr-lbdoc-is-degraded-padding, 72px 24px); text-align: center; font: var(--syn-solr-lbdoc-is-degraded-font, 400 12.5px/1.6 var(--type-family)); color: var(--syn-solr-lbdoc-is-degraded-color, var(--scrim-ink)); }
/* ── UD20 — THE WORK SPECIES (Relay 35 CANON-DELTA 1 + R3, RATIFIED WHOLE 2026-08-25): min(92vw, 1560px) × 90vh
   FIXED regardless of content; the header and footer bands stay put and the BODY is the room (a WORK modal's
   panes scroll on their own inside it); the one header anatomy [title · TOPR chip · spacer · the close act] with the R3
   WORK title 700 18px (1.125rem, reading class); the drawn chrome: head 20×24 with 12 under on a --border-row
   hairline, foot 12×24 on the same hairline, the the close act at --text-tertiary. ONE seat keyed on the shell's CssClass
   (the per-modal knob per Q249) until ModalShell's species enum grows the WORK member (QB62's species↔width↔
   title net · Q378's flagship) — fold this block there; first mount McManageExperiencesModal (mc-exp-add). */
dialog.syn-modal-work-dx { width: var(--kit-dialog-syn-modal-work-dx-width, min(92vw, 1560px)) !important; max-width: var(--kit-dialog-syn-modal-work-dx-max-width, min(92vw, 1560px)) !important; }
.syn-modal-work-dx .syn-modal-inner { max-width: none; height: auto; max-height: var(--syn-modal-work-dx-modal-inner-max-height, 90vh); padding: 0; gap: 0; }   /* FIX-2: content-driven, 90vh the cap (the species line above is the law; this legacy hook re-states it) */
.syn-modal-work-dx .syn-modal-head { align-items: center; padding: var(--syn-modal-work-dx-modal-head-padding, 20px 24px 12px); border-bottom: var(--syn-modal-work-dx-modal-head-border-bottom, 1px solid var(--border-hairline)); flex: none; }
.syn-modal-work-dx .syn-modal-headactions { margin-left: 0; }
.syn-modal-work-dx .syn-modal-x { margin-left: auto; margin-top: 0; color: var(--syn-modal-work-dx-modal-x-color, var(--text-tertiary)); }
.syn-modal-work-dx .syn-modal-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.syn-modal-work-dx .syn-modal-feedback { margin: var(--syn-modal-work-dx-modal-feedback-margin, 0 24px); }
.syn-modal-work-dx .syn-modal-foot, .syn-modal-work-dx .syn-modal-dirty { margin: 0; padding: var(--syn-modal-work-dx-modal-foot-padding, 12px 24px); flex: none; }
.syn-setm { display: flex; flex-direction: column; gap: var(--syn-setm-gap, 14px); }
.syn-setm-section.is-ruled { border-top: var(--syn-setm-section-is-ruled-border-top, 1px solid var(--border-hairline)); padding-top: var(--syn-setm-section-is-ruled-padding-top, 10px); }
.syn-setm-eyebrow { font-size: var(--syn-setm-eyebrow-font-size, 9.5px); font-weight: var(--syn-setm-eyebrow-font-weight, 600); letter-spacing: var(--syn-setm-eyebrow-letter-spacing, var(--type-label-tracking)); color: var(--syn-setm-eyebrow-color, var(--text-tertiary)); text-transform: var(--syn-setm-eyebrow-text-transform, var(--type-label-transform)); margin-bottom: var(--syn-setm-eyebrow-margin-bottom, 6px); }
.syn-setm-id { display: flex; align-items: center; gap: var(--syn-setm-id-gap, 10px); padding-bottom: var(--syn-setm-id-padding-bottom, 8px); }
.syn-setm-idname { font-size: var(--syn-setm-idname-font-size, 0.8125rem); font-weight: var(--syn-setm-idname-font-weight, 700); }
.syn-setm-idsub { font-size: var(--syn-setm-idsub-font-size, 0.65625rem); color: var(--syn-setm-idsub-color, var(--text-tertiary)); }
.syn-setm-rows { display: flex; flex-direction: column; }
.syn-setm-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--syn-setm-row-gap, 12px); padding: var(--syn-setm-row-padding, 5px 0); border-bottom: var(--syn-setm-row-border-bottom, 1px solid var(--border-hairline)); }
.syn-setm-row.is-last { border-bottom: none; }
.syn-setm-rowlabel { font-size: var(--syn-setm-rowlabel-font-size, 0.71875rem); color: var(--syn-setm-rowlabel-color, var(--text-tertiary)); }
.syn-setm-rowval { font-size: var(--syn-setm-rowval-font-size, 0.75rem); color: var(--syn-setm-rowval-color, var(--text-body)); }
.syn-setm-rowval.is-empty { color: var(--syn-setm-rowval-is-empty-color, var(--text-faint)); }
.syn-setm-locked { display: flex; align-items: baseline; gap: var(--syn-setm-locked-gap, 5px); }
.syn-setm-lock { align-self: center; flex-shrink: 0; }
/* The ONE editable row: dashed Q-EDIT underline — the dashed/locked contrast IS the legend. */
.syn-setm-janename { font-size: var(--syn-setm-janename-font-size, 0.75rem); font-weight: var(--syn-setm-janename-font-weight, 600); border-bottom: var(--syn-setm-janename-border-bottom, 1px dashed var(--text-faint)); cursor: pointer; }
.syn-setm-janeinput { font-size: var(--syn-setm-janeinput-font-size, 0.75rem); font-weight: var(--syn-setm-janeinput-font-weight, 600); font-family: inherit; padding: var(--syn-setm-janeinput-padding, 1px 6px); margin: var(--syn-setm-janeinput-margin, -2px 0); border: var(--syn-setm-janeinput-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-setm-janeinput-border-radius, var(--radius-sm)); background: var(--syn-setm-janeinput-background, var(--surface-plane)); color: var(--syn-setm-janeinput-color, var(--text-ink)); outline: none; }
.syn-setm-prefs { display: flex; flex-direction: column; gap: var(--syn-setm-prefs-gap, 8px); }
.syn-setm-pref { display: flex; align-items: center; justify-content: space-between; }
.syn-setm-preflabel { font-size: var(--syn-setm-preflabel-font-size, 0.78125rem); color: var(--syn-setm-preflabel-color, var(--text-ink)); }
/* Segmented (its own canon, not a button species): --bg-tertiary well, 8px radius, 3px inset;
   items 500 11px --text-secondary; the picked item 600 on a surface card w/ the 1px shadow. */
.syn-setm-seg { display: flex; background: var(--syn-setm-seg-background, var(--surface-inset)); border-radius: var(--syn-setm-seg-border-radius, var(--shape-radius-control)); padding: var(--syn-setm-seg-padding, 3px); }
.syn-setm-segbtn { font-size: var(--syn-setm-segbtn-font-size, 11px); font-weight: var(--syn-setm-segbtn-font-weight, 500); line-height: normal; color: var(--syn-setm-segbtn-color, var(--text-muted)); padding: var(--syn-setm-segbtn-padding, 3px 12px); border: none; border-radius: var(--syn-setm-segbtn-border-radius, var(--radius-sm)); background: transparent; cursor: pointer; font-family: inherit; }
.syn-setm-seg.is-size .syn-setm-segbtn { padding: var(--syn-setm-seg-is-size-setm-segbtn-padding, 3px 10px); }
.syn-setm-segbtn.is-on { font-weight: var(--syn-setm-segbtn-is-on-font-weight, 600); color: var(--syn-setm-segbtn-is-on-color, var(--text-ink)); background: var(--syn-setm-segbtn-is-on-background, var(--surface-plane)); box-shadow: var(--syn-setm-segbtn-is-on-box-shadow, var(--segment-active-shadow)); }
.syn-setm-account { display: flex; align-items: center; justify-content: space-between; }
.syn-setm-signline { font-size: var(--syn-setm-signline-font-size, 0.65625rem); color: var(--syn-setm-signline-color, var(--text-tertiary)); }
/* Sign out — Q246: rides the destructive-DOOR seat (BUTTONS.md; the Q210 per-modal literal retired). */

/* Q80 — the Claude panel host slot (P9 T2's layout half): docked right, collapsible; renders
   only when a panel registers. The toggle sits at the region's edge, shell-owned. */
.syn-panelhost { position: sticky; top: 0; height: 100vh; flex-shrink: 0; display: flex; align-items: flex-start; border-left: var(--syn-panelhost-border-left, 1px solid var(--border-default)); background: var(--syn-panelhost-background, var(--bg-secondary)); }
.syn-panelhost-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--syn-panelhost-toggle-width, 28px); height: var(--syn-panelhost-toggle-height, 28px); margin: var(--syn-panelhost-toggle-margin, 10px 4px); border: var(--syn-panelhost-toggle-border, 1px solid var(--border-default)); border-radius: var(--syn-panelhost-toggle-border-radius, var(--radius-nav)); background: var(--syn-panelhost-toggle-background, var(--surface-plane)); color: var(--syn-panelhost-toggle-color, var(--text-muted)); cursor: pointer; }
.syn-panelhost-toggle:hover { background: var(--syn-panelhost-toggle-hover-background, var(--surface-hover)); }
.syn-panelhost-body { width: var(--syn-panelhost-body-width, 380px); height: 100%; overflow: auto; border-left: var(--syn-panelhost-body-border-left, 1px solid var(--border-default)); background: var(--syn-panelhost-body-background, var(--surface-plane)); }

/* Q81 F-2 — the draft-modal conflict banner: the typed error's honest choice pair. */
.syn-modal-conflict { display: flex; align-items: flex-start; gap: var(--syn-modal-conflict-gap, 8px); padding: var(--syn-modal-conflict-padding, 10px 12px); margin-bottom: var(--syn-modal-conflict-margin-bottom, 12px); border: var(--syn-modal-conflict-border, 1px solid var(--state-warning)); border-radius: var(--syn-modal-conflict-border-radius, var(--shape-radius-control)); background: var(--syn-modal-conflict-background, var(--state-warning-tint)); color: var(--syn-modal-conflict-color, var(--state-warning)); font-size: var(--syn-modal-conflict-font-size, 0.78125rem); line-height: var(--syn-modal-conflict-line-height, 1.45); flex-wrap: wrap; }
.syn-modal-conflictacts { display: inline-flex; gap: var(--syn-modal-conflictacts-gap, 8px); margin-left: auto; }

/* ══ Q85 — the Mission Control re-skin (DESIGN_LANGUAGE §6; the patched MissionControl.jsx) ══ */

/* Q271 — THE LIFECYCLE BAND (EC 41c, RATIFIED 2026-08-17; the McStatusBand re-home — the old
   below-the-tabs band + its figure groups RETIRED). One surface plane at the Pursuit tab-plane
   top: the gated ladder INLINE (labels beside their marks), gate diamonds on the first three
   connectors, the 28px rule, then the two deadline facts. A PROJECTION — nothing is a button. */
.syn-plb-host { position: relative; }
/* Q298 (TF-13 — the no-min-width class's fourth strike): the band wraps between its TWO groups
   (the road · the facts) so the page NEVER scrolls horizontally at any T22 matrix width — the
   facts unit drops beneath the road when the row can't hold both; the road's links absorb the
   slack (their own flex:1 min-width contract). */
.syn-plb { background: var(--syn-plb-background, var(--surface-plane)); border: var(--syn-plb-border, 1px solid var(--border-default)); border-radius: var(--syn-plb-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-plb-box-shadow, var(--shadow-sm)); padding: var(--syn-plb-padding, 12px 18px); display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--syn-plb-row-gap, 8px); margin-bottom: var(--syn-plb-margin-bottom, 22px); outline: none; }
.syn-plb-road { display: flex; align-items: center; flex: 1 1 min-content; min-width: 0; }   /* min-content basis: wrap fires only when the road's MIN (links at their 10px floor) + the facts truly can't share the row */
.syn-plb-facts { display: flex; align-items: center; flex: none; margin-left: auto; }
.syn-plb-link { flex: 1; height: var(--syn-plb-link-height, 2px); background: var(--syn-plb-link-background, var(--border-default)); margin: var(--syn-plb-link-margin, 0 8px); min-width: var(--syn-plb-link-min-width, 10px); }
.syn-plb-link.is-reached { background: var(--syn-plb-link-is-reached-background, var(--text-ink)); }
/* Q282 -> Q283 (the sequenced-journey amendment): stops are click-to-set — cursor + the name
   inking up on hover is the whole scent (CSS-local; the house hover-lift pattern). GATED stops
   (advance past Capture without a G3 Go-variant) wear not-allowed + the reason tooltip and
   never ink up; the lock recalculates live on every commit. */
.syn-plb-stop { display: inline-flex; align-items: center; gap: var(--syn-plb-stop-gap, 6px); flex: none; cursor: pointer; outline: none; }
.syn-plb-stop:not(.is-current):not(.is-gated):hover .syn-plb-stopname { color: var(--kit-plb-stop-not-is-current-not-is-gated-hover-plb-stopname-color, var(--text-ink)); }
.syn-plb-stop:focus-visible .syn-plb-stopname { color: var(--syn-plb-stop-focus-visible-plb-stopname-color, var(--text-ink)); text-decoration: var(--syn-plb-stop-focus-visible-plb-stopname-text-decoration, underline); }
.syn-plb-stop.is-gated { cursor: not-allowed; }
.syn-plb-stop.is-current { gap: var(--syn-plb-stop-is-current-gap, 7px); border: var(--syn-plb-stop-is-current-border, 1.5px solid var(--text-ink)); border-radius: var(--syn-plb-stop-is-current-border-radius, var(--shape-radius-control)); padding: var(--syn-plb-stop-is-current-padding, 4px 11px); cursor: default; }
.syn-plb-dot { width: var(--syn-plb-dot-width, 8px); height: var(--syn-plb-dot-height, 8px); border-radius: 50%; flex: none; }
.syn-plb-dot.is-ahead { border: var(--syn-plb-dot-is-ahead-border, 1.5px solid var(--text-rider)); background: var(--syn-plb-dot-is-ahead-background, var(--surface-plane)); box-sizing: border-box; }
.syn-plb-stopname { font: var(--syn-plb-stopname-font, 500 11.5px var(--type-family)); color: var(--syn-plb-stopname-color, var(--text-body)); white-space: nowrap; }
.syn-plb-stopname.is-current { font: var(--syn-plb-stopname-is-current-font, 600 12px var(--type-family)); color: var(--syn-plb-stopname-is-current-color, var(--text-ink)); }
.syn-plb-stopname.is-ahead { font-weight: var(--syn-plb-stopname-is-ahead-font-weight, 400); color: var(--syn-plb-stopname-is-ahead-color, var(--text-faint)); }
.syn-plb-gate { display: inline-flex; align-items: center; gap: var(--syn-plb-gate-gap, 6px); flex: none; }
.syn-plb-diamond { width: var(--syn-plb-diamond-width, 8px); height: var(--syn-plb-diamond-height, 8px); transform: rotate(45deg); border-radius: var(--syn-plb-diamond-border-radius, var(--radius-edge-soft)); background: var(--syn-plb-diamond-background, var(--text-ink)); flex: none; }
.syn-plb-diamond.is-next { background: var(--syn-plb-diamond-is-next-background, var(--surface-plane)); border: var(--syn-plb-diamond-is-next-border, 1.5px solid var(--text-ink)); box-sizing: border-box; }
.syn-plb-diamond.is-far { background: var(--syn-plb-diamond-is-far-background, var(--surface-plane)); border: var(--syn-plb-diamond-is-far-border, 1.5px solid var(--text-rider)); box-sizing: border-box; }
.syn-plb-gatename { font: var(--syn-plb-gatename-font, 500 10px var(--type-family)); color: var(--syn-plb-gatename-color, var(--text-tertiary)); white-space: nowrap; }
.syn-plb-gatename.is-next { font-weight: var(--syn-plb-gatename-is-next-font-weight, 600); }
.syn-plb-gatename.is-far { font-weight: var(--syn-plb-gatename-is-far-font-weight, 400); color: var(--syn-plb-gatename-is-far-color, var(--text-faint)); }
/* Q362(a): .syn-plb-gateopen retired with the counter (the band speaks stage + date + verdict only). */
/* Q287 (relay 23 d1 + 7.1): the MISSING gate register — hollow attention diamond, label + the
   stacked MISSING rider (banner-label species) in --attention-text-strong; the whole stop is a
   door (hover lifts: label underline + the drawn tooltip card, copy ruled verbatim). Gated
   stops: the marker drops to 40% strength (7.1's disabled register; the label already reads
   --text-disabled via is-ahead, hover never inks up). */
.syn-plb-gate.is-missing { position: relative; cursor: pointer; outline: none; }
.syn-plb-gate.is-missing:hover .syn-plb-gatename.is-missing,
.syn-plb-gate.is-missing:focus-visible .syn-plb-gatename.is-missing { text-decoration: var(--syn-plb-gate-is-missing-hover-plb-gatename-is-missing-text-decoration, underline); }
.syn-plb-diamond.is-missing { background: var(--syn-plb-diamond-is-missing-background, var(--attention-tint)); border: var(--syn-plb-diamond-is-missing-border, 1.5px solid var(--state-warning-text)); box-sizing: border-box; }
.syn-plb-gatecol { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--syn-plb-gatecol-gap, 1px); }
.syn-plb-gatename.is-missing { color: var(--syn-plb-gatename-is-missing-color, var(--state-warning-text)); font-weight: var(--syn-plb-gatename-is-missing-font-weight, 600); }
.syn-plb-gatemissing { font: var(--syn-plb-gatemissing-font, 700 8.5px var(--type-family)); letter-spacing: var(--syn-plb-gatemissing-letter-spacing, .08em); color: var(--syn-plb-gatemissing-color, var(--state-warning-text)); }
.syn-plb-missingtip { display: none; position: absolute; top: var(--syn-plb-missingtip-top, calc(100% + 8px)); left: 50%; transform: translateX(-50%); z-index: 70; width: var(--syn-plb-missingtip-width, 360px); box-sizing: border-box; text-align: left; background: var(--syn-plb-missingtip-background, var(--surface-plane)); border: var(--syn-plb-missingtip-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-plb-missingtip-border-radius, var(--shape-radius-control)); box-shadow: var(--syn-plb-missingtip-box-shadow, var(--elevation-raised)); padding: var(--syn-plb-missingtip-padding, 10px 13px); pointer-events: none; }
.syn-plb-gate.is-missing:hover .syn-plb-missingtip,
.syn-plb-gate.is-missing:focus-visible .syn-plb-missingtip { display: block; }
.syn-plb-missingtip-head { display: block; font: var(--syn-plb-missingtip-head-font, 700 10px var(--type-family)); letter-spacing: var(--syn-plb-missingtip-head-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-plb-missingtip-head-text-transform, var(--type-label-transform)); color: var(--syn-plb-missingtip-head-color, var(--state-warning-text)); }
.syn-plb-missingtip-body { display: block; font: var(--syn-plb-missingtip-body-font, 400 12px/1.5 var(--type-family)); color: var(--syn-plb-missingtip-body-color, var(--text-body)); margin-top: var(--syn-plb-missingtip-body-margin-top, 3px); }
.syn-plb-stop.is-gated .syn-plb-dot { opacity: var(--syn-plb-stop-is-gated-plb-dot-opacity, .4); }
.syn-plb-rule { width: var(--syn-plb-rule-width, 1px); height: var(--syn-plb-rule-height, 28px); background: var(--syn-plb-rule-background, var(--border-default)); margin: var(--syn-plb-rule-margin, 0 16px); flex: none; }
/* QC32 (TF-13, the no-min-width class's fourth strike): the fact seats carry the FULL shrink
   contract — shrink permission + a floor that keeps the date legible + tail ellipsis on the
   value line (the rider trims first; the connectors give way before the facts). Stops stay
   flex:none by RULE (gated-stop labels are never ellipsized — item 7.1). */
.syn-plb-fact { display: flex; flex-direction: column; gap: var(--syn-plb-fact-gap, 1px); flex: 0 1 auto; min-width: var(--syn-plb-fact-min-width, 96px); margin-right: var(--syn-plb-fact-margin-right, 20px); }
/* QC32 (TF-13): below the wide canvases the band's CHROME gives way before any content —
   connector floors, gaps, and margins tighten so the drawn stops (never ellipsized, item 7.1)
   and the date facts stay whole with no horizontal scrollbar at the 1280 matrix column. */
@media (max-width: 1366px) {
    .syn-plb { padding: var(--syn-plb-at-to1366-padding, 12px 12px); }
    .syn-plb-stop { gap: var(--syn-plb-stop-at-to1366-gap, 5px); }
    .syn-plb-link { margin: var(--syn-plb-link-at-to1366-margin, 0 4px); min-width: var(--syn-plb-link-at-to1366-min-width, 5px); }
    .syn-plb-rule { margin: var(--syn-plb-rule-at-to1366-margin, 0 10px); }
    .syn-plb-fact { margin-right: var(--syn-plb-fact-at-to1366-margin-right, 12px); min-width: var(--syn-plb-fact-at-to1366-min-width, 88px); }
}
.syn-plb-fact:last-child { margin-right: 0; }
/* Q298/QC32 double-build adjudicated (Cowork 2026-08-20): the Q298 wrap-whole arm stands
   (values wrap, never truncate — the canon); QC32's ellipsis arm superseded at this seat. */
.syn-plb-factlabel { font: var(--syn-plb-factlabel-font, 600 9.5px var(--type-family)); letter-spacing: var(--syn-plb-factlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-plb-factlabel-text-transform, var(--type-label-transform)); color: var(--syn-plb-factlabel-color, var(--text-faint)); white-space: nowrap; }
.syn-plb-factvalue { font: var(--syn-plb-factvalue-font, 600 12px var(--type-family)); color: var(--syn-plb-factvalue-color, var(--text-ink)); white-space: nowrap; }
.syn-plb-factvalue.is-overdue { color: var(--syn-plb-factvalue-is-overdue-color, var(--state-attention-text)); }
.syn-plb-factrider { font: var(--syn-plb-factrider-font, 400 10.5px var(--type-family)); color: var(--syn-plb-factrider-color, var(--text-tertiary)); }
.syn-plb-factrider.is-overdue { color: var(--syn-plb-factrider-is-overdue-color, var(--state-attention-text)); font-weight: var(--syn-plb-factrider-is-overdue-font-weight, 600); }
.syn-plb-factvacancy { font: var(--syn-plb-factvacancy-font, 400 12px var(--type-family)); color: var(--syn-plb-factvacancy-color, var(--text-faint)); font-style: var(--syn-plb-factvacancy-font-style, italic); }
/* Q271 (21a, the two ATOMS facts per 3-2): the derived status row rides the admin-grid grammar;
   the description block wears the drawn stacked label-over-prose shape. */
.syn-mc-atomsgrid { display: block; }
.syn-mc-atomsvalue { display: flex; align-items: baseline; gap: var(--syn-mc-atomsvalue-gap, 8px); min-width: 0; flex: 1; }
.syn-mc-atomsrider { margin-left: auto; font: var(--syn-mc-atomsrider-font, 400 10.5px var(--type-family)); color: var(--syn-mc-atomsrider-color, var(--text-faint)); white-space: nowrap; }
.syn-mc-atomsdesc { margin-top: var(--syn-mc-atomsdesc-margin-top, 10px); }
.syn-mc-atomsdesc-label { font-size: var(--syn-mc-atomsdesc-label-font-size, 0.59375rem); font-weight: var(--syn-mc-atomsdesc-label-font-weight, 600); letter-spacing: var(--syn-mc-atomsdesc-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-mc-atomsdesc-label-text-transform, var(--type-label-transform)); color: var(--syn-mc-atomsdesc-label-color, var(--text-faint)); margin-bottom: var(--syn-mc-atomsdesc-label-margin-bottom, 4px); }
/* Q317(d): the ATOMS description wears the 21a drawn TINTED INSET (tinted-inset ground,
   bg-tertiary hairline, r7, 10/12 padding) — the government's verbatim prose visibly set off. */
.syn-mc-atomsdesc-prose { background: var(--syn-mc-atomsdesc-prose-background, var(--tinted-inset)); border: var(--syn-mc-atomsdesc-prose-border, 1px solid var(--surface-inset)); border-radius: var(--syn-mc-atomsdesc-prose-border-radius, var(--radius-nav)); padding: var(--syn-mc-atomsdesc-prose-padding, 10px 12px); font: var(--syn-mc-atomsdesc-prose-font, 400 0.78125rem/1.6 var(--type-family)); color: var(--syn-mc-atomsdesc-prose-color, var(--text-ink)); text-wrap: pretty; }
.syn-mc-atomsdesc-vacant { font: var(--syn-mc-atomsdesc-vacant-font, var(--type-r6)); padding: var(--syn-mc-atomsdesc-vacant-padding, 4px 0); }   /* Q398(g) MP-18: the honest empty seat — R6 in the vacancy register (.syn-fv-vacant carries the ink) */
/* Q174 (ruling 23): the road explainer — ONE card, carried onto the Lifecycle Band (Q271); the
   drawn EC 41c values (560 wide, --border-emphasis, the drawn shadow; current row tinted). */
.syn-roadex { position: absolute; top: var(--syn-roadex-top, calc(100% + 6px)); left: var(--syn-roadex-left, 18px); z-index: 60; width: var(--syn-roadex-width, 560px); max-width: var(--syn-roadex-max-width, 90vw); background: var(--syn-roadex-background, var(--surface-plane)); border: var(--syn-roadex-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-roadex-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-roadex-box-shadow, var(--shadow-tip)); padding: var(--syn-roadex-padding, 8px 4px); cursor: default; }
.syn-roadex-row { display: grid; grid-template-columns: var(--syn-roadex-row-grid-template-columns, 12px 92px minmax(0,1fr)); gap: var(--syn-roadex-row-gap, 9px); align-items: baseline; padding: var(--syn-roadex-row-padding, 4px 12px); border-radius: var(--syn-roadex-row-border-radius, var(--radius-sm)); }
.syn-roadex-row.is-here { background: var(--syn-roadex-row-is-here-background, var(--surface-hover)); }
.syn-roadex-row.is-current { background: var(--syn-roadex-row-is-current-background, var(--tinted-inset)); }
.syn-roadex-row.is-current .syn-roadex-def { color: var(--syn-roadex-row-is-current-roadex-def-color, var(--text-body)); }
.syn-roadex-mark { display: inline-flex; align-items: center; justify-content: center; height: var(--syn-roadex-mark-height, 14px); }
.syn-roadex-dot { width: var(--syn-roadex-dot-width, 7px); height: var(--syn-roadex-dot-height, 7px); border-radius: var(--syn-roadex-dot-border-radius, var(--shape-radius-pill)); display: inline-block; }
.syn-roadex-diamond { width: var(--syn-roadex-diamond-width, 6px); height: var(--syn-roadex-diamond-height, 6px); border-radius: var(--syn-roadex-diamond-border-radius, var(--radius-edge)); transform: rotate(45deg); background: var(--syn-roadex-diamond-background, var(--text-ink)); display: inline-block; }
.syn-roadex-name { font: var(--syn-roadex-name-font, 600 11.5px var(--type-family)); color: var(--syn-roadex-name-color, var(--text-ink)); white-space: nowrap; }
.syn-roadex-def { font: var(--syn-roadex-def-font, 400 11.5px/1.45 var(--type-family)); color: var(--syn-roadex-def-color, var(--text-tertiary)); }

/* Work Status: the shared segmented treatment (§6 — one treatment everywhere). */
.syn-life-seg { display: inline-flex; align-items: center; gap: var(--syn-life-seg-gap, 2px); background: var(--syn-life-seg-background, var(--surface-inset)); border: none; border-radius: var(--syn-life-seg-border-radius, var(--shape-radius-control)); padding: var(--syn-life-seg-padding, 3px); overflow: visible; width: fit-content; }
.syn-life-segbtn { border: none !important; border-radius: var(--syn-life-segbtn-border-radius, var(--radius-sm)); background: transparent; padding: var(--syn-life-segbtn-padding, 6px 13px); font-size: var(--syn-life-segbtn-font-size, 12px); font-weight: var(--syn-life-segbtn-font-weight, 500); color: var(--syn-life-segbtn-color, var(--text-muted)); white-space: nowrap; }   /* Q342(c) C7: chrome, px */
.syn-life-segbtn.is-selected { background: var(--syn-life-segbtn-is-selected-background, var(--segment-active)); color: var(--syn-life-segbtn-is-selected-color, var(--text-ink)); font-weight: var(--syn-life-segbtn-is-selected-font-weight, 600); box-shadow: var(--syn-life-segbtn-is-selected-box-shadow, var(--segment-active-shadow)); }

/* Round-9 rulings 1–3 (Q160): the MC-scoped header-INSIDE overrides died — MC/capture sections
   speak the base heading-OUTSIDE grammar like every other page section. Only the grid-rhythm
   margin survives (the MC grid supplies its own gaps). */
.syn-mc-page .syn-section-card { margin-bottom: 0; }
.syn-mc-page .syn-collapsible { border: var(--syn-mc-page-collapsible-border, 1px solid var(--border-default)); border-radius: var(--syn-mc-page-collapsible-border-radius, var(--shape-radius-plane)); background: var(--syn-mc-page-collapsible-background, var(--surface-plane)); box-shadow: var(--syn-mc-page-collapsible-box-shadow, var(--elevation-plane)); padding: var(--syn-mc-page-collapsible-padding, 13px 15px); }

/* Label/value walls (§4): labels 600 9.5px uppercase .08em muted; body values --text-body. */
.syn-mc-page .syn-field > .syn-field-label { font-size: var(--syn-mc-page-field-field-label-font-size, 0.59375rem); letter-spacing: var(--syn-mc-page-field-field-label-letter-spacing, 0.08em); }
.syn-mc-page .syn-life-lanelabel { font-size: var(--syn-mc-page-life-lanelabel-font-size, 0.59375rem); letter-spacing: var(--syn-mc-page-life-lanelabel-letter-spacing, 0.08em); }

/* De-pilled quiet labels. */
/* Ruling 15 (Q169, comp 6a-C): the socioeconomic meta chip — TEXT face 600 9.5px, bordered
   (the IHT 2.0 vehicle-chip family). Replaced the mono syn-partner-cert (mono is ids-only). */
.syn-meta-chip { font-size: var(--syn-meta-chip-font-size, 0.59375rem); font-weight: var(--syn-meta-chip-font-weight, 600); letter-spacing: var(--syn-meta-chip-letter-spacing, 0.08em); color: var(--syn-meta-chip-color, var(--text-tertiary)); border: var(--syn-meta-chip-border, 1px solid var(--border-default)); border-radius: var(--syn-meta-chip-border-radius, var(--radius-sm)); padding: var(--syn-meta-chip-padding, 1px 6px); white-space: nowrap; }
.syn-glance-unassessed { font-size: var(--syn-glance-unassessed-font-size, 0.75rem); color: var(--syn-glance-unassessed-color, var(--text-faint)); white-space: nowrap; }

/* The MC-scoped calendar overrides died with Q178 — the base .syn-cal-* family is comp-8a-true
   (A9 weekday type, A10 hairline strengths: weeks border-default, cells border-row). */

/* ── Q93 — Organizations de-pills (DESIGN_LANGUAGE §4–6) ── */
.syn-org-workshare { font-size: var(--syn-org-workshare-font-size, 0.78125rem); font-weight: var(--syn-org-workshare-font-weight, 600); font-variant-numeric: var(--syn-org-workshare-font-variant-numeric, tabular-nums); color: var(--syn-org-workshare-color, var(--text-ink)); justify-self: end; }   /* Q384: 600 12.5 tabular on the stack's right edge */
.syn-org-engstatus { font-size: var(--syn-org-engstatus-font-size, 0.78125rem); color: var(--syn-org-engstatus-color, var(--text-muted)); }
.syn-org-workshare.is-vacant { font-weight: var(--syn-org-workshare-is-vacant-font-weight, 400); color: var(--syn-org-workshare-is-vacant-color, var(--text-faint)); }   /* Q356(b): the unentered share */
.syn-org-engtastatus.is-unrecorded { color: var(--syn-org-engtastatus-is-unrecorded-color, var(--text-tertiary)); font-style: var(--syn-org-engtastatus-is-unrecorded-font-style, italic); }   /* Q356(e) */
.syn-org-relationship { font-size: var(--syn-org-relationship-font-size, 0.78125rem); color: var(--syn-org-relationship-color, var(--text-body)); }
.syn-org-genflag { font-family: var(--syn-org-genflag-font-family, var(--type-family-mono)); font-size: var(--syn-org-genflag-font-size, 0.59375rem); font-weight: var(--syn-org-genflag-font-weight, 500); text-transform: var(--syn-org-genflag-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-org-genflag-letter-spacing, var(--type-label-tracking)); color: var(--syn-org-genflag-color, var(--text-tertiary)); }

/* Q94 — Experience de-pills. */
.syn-cell-money { font-size: var(--syn-cell-money-font-size, 0.8125rem); font-weight: var(--syn-cell-money-font-weight, 600); font-variant-numeric: var(--syn-cell-money-font-variant-numeric, tabular-nums); color: var(--syn-cell-money-color, var(--text-ink)); }
.syn-exp-roleplain { font-size: var(--syn-exp-roleplain-font-size, 0.78125rem); color: var(--syn-exp-roleplain-color, var(--text-body)); }

/* ── Q96 — Admin de-pills + the ONE segmented treatment (scoped: Admin + directories; the
   Blackbird toolbar keeps its shipped look until its own session). ── */
.syn-admin-inttag { font-size: var(--syn-admin-inttag-font-size, 0.71875rem); color: var(--syn-admin-inttag-color, var(--text-tertiary)); }
.syn-admin-source { font-size: var(--syn-admin-source-font-size, 0.78125rem); color: var(--syn-admin-source-color, var(--text-body)); }
/* QB48 residue (dispositions DARK-LEGIBILITY, person-profile 11.2): the profile joins the scope —
   the base .syn-segmented is-active pair (accent-muted/accent-active, :1326) converges to
   blue-on-blue in dark; this treatment's --seg-active/--text-primary registers are dark-safe. */
.syn-admin .syn-segmented, .syn-dir .syn-segmented, .syn-pprof .syn-segmented { border: none; background: var(--syn-admin-segmented-background, var(--surface-inset)); border-radius: var(--syn-admin-segmented-border-radius, var(--shape-radius-control)); padding: var(--syn-admin-segmented-padding, 3px); overflow: visible; }
.syn-admin .syn-segmented .syn-seg, .syn-dir .syn-segmented .syn-seg, .syn-pprof .syn-segmented .syn-seg { border: none; border-radius: var(--syn-admin-segmented-seg-border-radius, var(--radius-sm)); background: transparent; padding: var(--syn-admin-segmented-seg-padding, 6px 12px); font-size: var(--syn-admin-segmented-seg-font-size, 0.75rem); font-weight: var(--syn-admin-segmented-seg-font-weight, 500); color: var(--syn-admin-segmented-seg-color, var(--text-muted)); white-space: nowrap; }
.syn-admin .syn-segmented .syn-seg.is-active, .syn-dir .syn-segmented .syn-seg.is-active, .syn-pprof .syn-segmented .syn-seg.is-active { background: var(--syn-admin-segmented-seg-is-active-background, var(--segment-active)); color: var(--syn-admin-segmented-seg-is-active-color, var(--text-ink)); font-weight: var(--syn-admin-segmented-seg-is-active-font-weight, 600); box-shadow: var(--syn-admin-segmented-seg-is-active-box-shadow, var(--segment-active-shadow)); }

/* ── Q97 — the resume source lane (upload/replace/re-parse). ── */
.syn-resume-fileinput { display: none; }
.syn-resume-filebtn { cursor: pointer; }
.syn-resume-stale { display: inline-flex; align-items: center; gap: var(--syn-resume-stale-gap, 4px); font-size: var(--syn-resume-stale-font-size, 0.71875rem); font-weight: var(--syn-resume-stale-font-weight, 600); color: var(--syn-resume-stale-color, var(--state-warning)); white-space: nowrap; }
.syn-resume-sourcelink { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }

/* Q98 finding 1 ([DL-2] dashed rest underline, WRAPPER level — no canonical control forked):
   editable cells in Edit mode carry the 1px dashed affordance on their first rendered child. */
.syn-pipe-editcell.is-editon > *:first-child { border-bottom: var(--syn-pipe-editcell-is-editon-first-child-border-bottom, 1px dashed var(--border-emphasis)); padding-bottom: var(--syn-pipe-editcell-is-editon-first-child-padding-bottom, 2px); }
.syn-pipe-peoplecell.is-editon { box-shadow: var(--syn-pipe-peoplecell-is-editon-box-shadow, var(--cell-edit-underline)); }

/* Q99 — the MC modal-layer label ladder (flag 8): modal field labels 600 9.5px/.08em muted. */
.syn-modal-body .syn-field > .syn-field-label { font-size: var(--syn-modal-body-field-field-label-font-size, 0.59375rem); letter-spacing: var(--syn-modal-body-field-field-label-letter-spacing, 0.08em); }

/* QC22: .syn-expt-janeline REMOVED — a dead Q86-era rule (no consumer since the experience tab's
   jane surface rebuilt on the x22 anatomy); the Q281(b) nowrap suspect resolves by deletion. */

/* Q100 flag 8 — the gate target's urgency ladder (replaces the amber chip). */
.syn-gate-target { display: inline-flex; align-items: center; gap: var(--syn-gate-target-gap, 4px); font-size: var(--syn-gate-target-font-size, 0.71875rem); font-variant-numeric: var(--syn-gate-target-font-variant-numeric, tabular-nums); white-space: nowrap; }
.syn-gate-target.is-overdue { color: var(--syn-gate-target-is-overdue-color, var(--state-attention-text)); font-weight: var(--syn-gate-target-is-overdue-font-weight, 700); }
.syn-gate-target.is-urgent { color: var(--syn-gate-target-is-urgent-color, var(--text-ink)); font-weight: var(--syn-gate-target-is-urgent-font-weight, 700); }
.syn-gate-target.is-warn { color: var(--syn-gate-target-is-warn-color, var(--due-warn)); font-weight: var(--syn-gate-target-is-warn-font-weight, 600); }
.syn-gate-target.is-far { color: var(--syn-gate-target-is-far-color, var(--due-far)); font-weight: var(--syn-gate-target-is-far-font-weight, 500); }
.syn-gate-target.is-none { color: var(--syn-gate-target-is-none-color, var(--text-faint)); }

/* ── SynMenu — THE canonical app-owned dropdown menu (Q123; Admin round 1b: native select DEAD).
   Anatomy verbatim from Admin.jsx AppMenu/MenuRow/MenuDivider + .ad-rolebtn: panel radius 10 with
   the dropdown shadow, rows with the reserved 14px accent-✓ slot, danger below a divider; zero
   entrance motion (DESIGN_LANGUAGE §2.7). The trigger's quiet variant materializes on row hover /
   own hover / open, zero reflow (border+fill transparent at rest). */
.syn-menu { position: relative; display: inline-flex; }
.syn-menu-btn { display: inline-flex; align-items: center; gap: var(--syn-menu-btn-gap, 6px); padding: var(--syn-menu-btn-padding, 5px 11px); border: var(--syn-menu-btn-border, 1px solid var(--border-default)); border-radius: var(--syn-menu-btn-border-radius, var(--shape-radius-control)); background: var(--syn-menu-btn-background, var(--surface-plane)); font-size: var(--syn-menu-btn-font-size, 0.78125rem); font-weight: var(--syn-menu-btn-font-weight, 500); color: var(--syn-menu-btn-color, var(--text-ink)); cursor: pointer; }
.syn-menu-btn:hover { background: var(--syn-menu-btn-hover-background, var(--surface-hover)); }
.syn-menu-btn > .syn-icon { color: var(--syn-menu-btn-icon-color, var(--text-tertiary)); }
.syn-menu-btn.is-quiet { border-color: transparent; background: transparent; }
.syn-menu-btn.is-quiet:hover, tr:hover .syn-menu-btn.is-quiet, .syn-menu-btn.is-quiet.is-open { border-color: var(--syn-menu-btn-is-quiet-hover-border-color, var(--border-emphasis)); background: var(--syn-menu-btn-is-quiet-hover-background, var(--surface-plane)); }
/* Q350(b) (A6 REST-CHEVRON: market 2.3/5.3 · customer 2.2's chevron half · teaming 2.2/5.6 — and the
   person-profile/exp-record rest rows riding the same seat): chrome never sits on the resting page —
   a QUIET trigger's ▾ materializes WITH its border (hover · row hover · focus · open), the
   .syn-enum-pill.is-quiet idiom verbatim. */
.syn-menu-btn.is-quiet > .syn-chevron { display: none; }
.syn-menu-btn.is-quiet:hover > .syn-chevron, tr:hover .syn-menu-btn.is-quiet > .syn-chevron,
.syn-menu-btn.is-quiet:focus-visible > .syn-chevron, .syn-menu-btn.is-quiet.is-open > .syn-chevron { display: inline-flex; }
/* Q250(ii) — the 12f MENU anatomy the R10 comps draw (HB-QC2-3): panel w200 (+1 border --border-default), r9,
   `0 12px 32px rgba(23,23,23,.16)`, pad 5/0; rows 400 12 --text-body 6/11, full-width, NO hover radius;
   ✓ 11px in a 12px seat (accent); divider --border-row m4/0; danger row 400 --overdue. CHROME class: px. */
.syn-popover.syn-menu-pop { border-radius: var(--syn-popover-menu-pop-border-radius, var(--radius-md-plus)); border: var(--syn-popover-menu-pop-border, 1px solid var(--border-default)); box-shadow: var(--syn-popover-menu-pop-box-shadow, var(--shadow-menu)); overflow: hidden; }
/* Q341 (CONTROL-ANATOMY §6 S1/S2): the menu's width contract lives HERE — a floor (--syn-menu-w,
   the Q250 200 default; SynMenu's Width parameter overrides it) under the shell's cap, so a long
   row label grows the menu to the cap and wraps past it; the panel is never max-content. */
.syn-menu-panel { min-width: var(--syn-menu-w, 200px); padding: var(--syn-menu-panel-padding, 5px 0); max-height: var(--syn-menu-panel-max-height, min(60vh, 380px)); overflow-y: auto; }
.syn-menu-row { display: flex; align-items: center; gap: var(--syn-menu-row-gap, 8px); width: 100%; padding: var(--syn-menu-row-padding, 6px 11px); margin: 0; border: none; border-radius: 0; background: transparent; font-size: var(--syn-menu-row-font-size, 12px); line-height: normal; font-weight: var(--syn-menu-row-font-weight, 400); font-family: var(--syn-menu-row-font-family, var(--type-family)); color: var(--syn-menu-row-color, var(--text-body)); cursor: pointer; text-align: left; }
.syn-menu-row:hover, .syn-menu-row.is-hi { background: var(--syn-menu-row-hover-background, var(--surface-hover)); }
.syn-menu-row.is-current { color: var(--syn-menu-row-is-current-color, var(--text-ink)); }
.syn-menu-row.is-danger { color: var(--syn-menu-row-is-danger-color, var(--state-attention-text)); font-weight: var(--syn-menu-row-is-danger-font-weight, 400); }
.syn-menu-check { width: var(--syn-menu-check-width, 12px); display: inline-flex; justify-content: center; flex: none; color: var(--syn-menu-check-color, var(--accent-action)); }
.syn-menu-check .syn-icon { width: var(--syn-menu-check-icon-width, 11px); height: var(--syn-menu-check-icon-height, 11px); }
.syn-menu-divider { height: var(--syn-menu-divider-height, 1px); background: var(--syn-menu-divider-background, var(--border-hairline)); margin: var(--syn-menu-divider-margin, 4px 0); }

/* ── OrgLogoDisplay — the ONE org logo (Q201 [REBUILD-LOGO-1]: single asset, rendered as-is in
   both themes — the Q128 theme-switch rules are dead). */
.syn-orglogo { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ══ THE LOGO BOX LAW — UD4 (CD Relay 31 §3, canon-delta 3; Ken's in-sitting amendment). The ONE
   shared logo-slot style, swept across every named seat: org profile band (.is-72) · teaming
   cards + the interest-form modal head (.is-48 — QC42 builds against this class) · bench +
   MC-pursuit partner rows and other dense rows (.is-28). HEIGHT-FIRST FIT: fixed height per
   seat, width flexes fit-content from the square floor (min-width = H) to the 4H cap; the image
   renders at FULL height whenever its aspect allows (only past 4:1 does it letterbox below —
   never cropped, never stretched). THE WHITE PLATE: a literal #ffffff ground in BOTH themes
   (the ruled raw-literal class, the text-on-ink facsimile precedent — corporate logos are
   designed for white; the PNG is never inverted, recolored, or filtered). The 1px
   --border-default themes; the plate does not, so fallback ink on the plate is PLATE-LOCAL
   (the light palette's disabled ink, literal). Fallbacks carry at each floor size on the same
   plate — no reflow when a logo lands. Logos are projection only: no click act on the mark.
   QB57 (Relay 34): the edge follows the GROUND and fallbacks are monograms off the plate — see below. ══ */
.syn-logobox { height: var(--logobox-h, 48px); min-width: var(--logobox-h, 48px); max-width: var(--syn-logobox-max-width, calc(4 * var(--logobox-h, 48px))); width: fit-content; box-sizing: border-box; background: var(--syn-logobox-background, var(--logo-ground)); border: var(--syn-logobox-border, 1px solid var(--border-default)); border-radius: var(--syn-logobox-border-radius, var(--shape-radius-control)); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.syn-logobox img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.syn-logobox.is-72 { --logobox-h: 72px; padding: var(--syn-logobox-is-72-padding, 10px 14px); }
.syn-logobox.is-48 { --logobox-h: 48px; padding: var(--syn-logobox-is-48-padding, 6px 10px); }
.syn-logobox.is-28 { --logobox-h: 28px; border-radius: var(--syn-logobox-is-28-border-radius, var(--radius-sm)); }
/* the band's typeset-wordmark fallback (the org display name, 700 18px on the plate) */
/* Q383 (Relay 36 §1, the LOGO BOX 72 conformance at the banner's touch): the wordmark plate is the drawn box — square floor
   (min-width = the band), 4× cap, 22px side inset; the wordmark ink is the --text-disabled TOKEN (the light literal died;
   dark derives). */
.syn-logobox.is-wordmark { min-width: var(--logobox-h, 48px); padding: var(--syn-logobox-is-wordmark-padding, 0 22px); }
.syn-logobox-wordmark { font: var(--syn-logobox-wordmark-font, 700 18px var(--type-family)); letter-spacing: var(--syn-logobox-wordmark-letter-spacing, .02em); color: var(--syn-logobox-wordmark-color, var(--text-faint)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── QB57 THE GROUND RULE (CD Relay 34 item 1, RATIFIED 2026-08-24; Ken's two prod shots): every seat
   DECLARES its ground (LogoSeat's is-oncanvas / is-onsurface / is-ontint — the LogoGroundRuleTests
   generator net refuses a seat without one). The white plate is always the mark's seat (geometry above,
   untouched); its 1px edge renders EXACTLY WHEN the ground beneath is not white — canvas, tinted insets
   and every dark ground keep plate + edge (the org band, unchanged from prod). On a --surface plane in
   the LIGHT theme (--surface IS #ffffff there) the plate dissolves: transparent, no edge, no box — the
   mark projects bare, left-aligned in its reserved slot (the MC-pursuit partner-row fix); dark surfaces
   are never white, so dark always edges. No shadow variant — the edge is the one treatment. */
html:not(.dark) .syn-logobox.is-onsurface:not(.is-fallback) { background: transparent; border: none; justify-content: flex-start; }
/* THE FALLBACK MONOGRAM (no mark on file): initials on --bg-tertiary at ~0.32× the floor — chrome, never
   a plate, never an edge, on any ground and in both themes (the UD4 "LOGO" register word died here). */
.syn-logobox.is-fallback { width: var(--logobox-h, 48px); min-width: var(--logobox-h, 48px); max-width: var(--logobox-h, 48px); padding: 0; background: var(--syn-logobox-is-fallback-background, var(--surface-inset)); border: none; border-radius: var(--syn-logobox-is-fallback-border-radius, var(--radius-sm)); justify-content: center; }
.syn-logobox-mono { font: var(--syn-logobox-mono-font, 600 calc(var(--logobox-h, 48px) * .32) var(--type-family)); letter-spacing: var(--syn-logobox-mono-letter-spacing, .02em); color: var(--syn-logobox-mono-color, var(--text-muted)); line-height: var(--syn-logobox-mono-line-height, 1); }

/* ── Q132: the canonical toolbar-panel button (one grammar for Filters + Columns — the patched
   mockups' ToolbarButton) + the ColumnsPanel (2f: the list IS the order) + facet-section
   additions (All · None links, section dividers) + the directory count line and 1e empty state. */
.syn-toolpanel-btn { display: inline-flex; align-items: center; gap: var(--syn-toolpanel-btn-gap, 7px); padding: var(--syn-toolpanel-btn-padding, 7px 13px); font-size: var(--syn-toolpanel-btn-font-size, 0.78125rem); font-weight: var(--syn-toolpanel-btn-font-weight, 500); white-space: nowrap; border-radius: var(--syn-toolpanel-btn-border-radius, var(--shape-radius-control)); border: var(--syn-toolpanel-btn-border, 1px solid var(--border-default)); background: var(--syn-toolpanel-btn-background, var(--surface-plane)); color: var(--syn-toolpanel-btn-color, var(--text-body)); cursor: pointer; font-family: inherit; }
.syn-toolpanel-btn:hover { background: var(--syn-toolpanel-btn-hover-background, var(--surface-hover)); }
/* Q342(a) (BUTTON-REGISTERS R4): a panel opener never wears pressed — the `.is-open` chrome died. */
.syn-toolpanel-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--syn-toolpanel-badge-min-width, 17px); height: var(--syn-toolpanel-badge-height, 17px); padding: var(--syn-toolpanel-badge-padding, 0 4px); border-radius: var(--syn-toolpanel-badge-border-radius, var(--shape-radius-pill)); background: var(--syn-toolpanel-badge-background, var(--accent-action)); color: var(--syn-toolpanel-badge-color, var(--text-on-accent)); font-size: var(--syn-toolpanel-badge-font-size, 0.65625rem); font-weight: var(--syn-toolpanel-badge-font-weight, 600); }
.syn-toolpanel-chev { display: none; }   /* Q261: the chevron is DEAD app-wide (turn-27 "chevrons not taken"; the FilterPanel's died in Q250) */

.syn-colpanel { position: relative; display: inline-flex; }
/* Q261: the DRAWN "Columns · show & order" panel (R10 entity comps, canon for all grids — the pipeline rides it
   too): w280 --surface / --border-emphasis r10 `0 8px 24px rgba(23,23,23,.12)` pad 12/14; rows gap 8 pad 6/2 on
   --border-row; the 13×13 r3 check box LEFT (on: ink fill + #fff ✓ 9); label 400 12 --text-body (locked row
   --text-primary + "always shown" 10 --text-disabled); the ⋮⋮ grabber RIGHT --text-disabled; Reset 500 11.5
   --text-body pad-top 8. CHROME class: px. */
.syn-popover.syn-colpanel-pop { width: var(--syn-popover-colpanel-pop-width, 280px); box-sizing: border-box; padding: var(--syn-popover-colpanel-pop-padding, 12px 14px); border: var(--syn-popover-colpanel-pop-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-popover-colpanel-pop-border-radius, var(--shape-radius-plane)); box-shadow: var(--syn-popover-colpanel-pop-box-shadow, var(--shadow-panel)); overflow: hidden; }
.syn-colpanel-head { padding: 0; margin-bottom: var(--syn-colpanel-head-margin-bottom, 8px); font-size: var(--syn-colpanel-head-font-size, 9.5px); font-weight: var(--syn-colpanel-head-font-weight, 600); letter-spacing: var(--syn-colpanel-head-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-colpanel-head-text-transform, var(--type-label-transform)); color: var(--syn-colpanel-head-color, var(--text-faint)); font-family: var(--syn-colpanel-head-font-family, var(--type-family)); }
.syn-colpanel-list { padding: 0; max-height: var(--syn-colpanel-list-max-height, 380px); overflow-y: auto; }
.syn-colpanel-insert { height: var(--syn-colpanel-insert-height, 2px); background: var(--syn-colpanel-insert-background, var(--text-ink)); border-radius: var(--syn-colpanel-insert-border-radius, var(--shape-radius-pill)); margin: 0; }
.syn-colpanel-row { display: flex; align-items: center; gap: var(--syn-colpanel-row-gap, 8px); padding: var(--syn-colpanel-row-padding, 6px 2px); border-bottom: var(--syn-colpanel-row-border-bottom, 1px solid var(--border-hairline)); font-size: var(--syn-colpanel-row-font-size, 12px); line-height: normal; font-weight: var(--syn-colpanel-row-font-weight, 400); font-family: var(--syn-colpanel-row-font-family, var(--type-family)); color: var(--syn-colpanel-row-color, var(--text-body)); cursor: grab; }
.syn-colpanel-row.is-locked { color: var(--syn-colpanel-row-is-locked-color, var(--text-ink)); cursor: default; }
.syn-colpanel-row.is-off { color: var(--syn-colpanel-row-is-off-color, var(--text-tertiary)); }
.syn-colpanel-row.is-dragging { background: var(--syn-colpanel-row-is-dragging-background, var(--surface-plane)); box-shadow: var(--syn-colpanel-row-is-dragging-box-shadow, var(--shadow-drag)); border-radius: var(--syn-colpanel-row-is-dragging-border-radius, var(--radius-sm)); }
.syn-colpanel-check { width: var(--syn-colpanel-check-width, 13px); height: var(--syn-colpanel-check-height, 13px); box-sizing: border-box; flex: none; border-radius: var(--syn-colpanel-check-border-radius, var(--radius-3xs)); border: var(--syn-colpanel-check-border, 1px solid var(--border-emphasis)); background: var(--syn-colpanel-check-background, var(--surface-plane)); display: inline-flex; align-items: center; justify-content: center; color: var(--syn-colpanel-check-color, var(--text-on-accent)); cursor: pointer; }
.syn-colpanel-check.is-on { background: var(--syn-colpanel-check-is-on-background, var(--text-ink)); border-color: var(--syn-colpanel-check-is-on-border-color, var(--text-ink)); }
.syn-colpanel-check .syn-icon { width: var(--syn-colpanel-check-icon-width, 9px); height: var(--syn-colpanel-check-icon-height, 9px); }
.syn-colpanel-row.is-locked .syn-colpanel-check { cursor: default; }
.syn-colpanel-label { flex: 1; min-width: 0; overflow-wrap: break-word; }   /* Q341 C1: wraps inside the 280 cap */
.syn-colpanel-grip { font: var(--syn-colpanel-grip-font, 600 12px/0.6 var(--type-family)); letter-spacing: var(--syn-colpanel-grip-letter-spacing, -1.5px); color: var(--syn-colpanel-grip-color, var(--text-faint)); flex: none; }
.syn-colpanel-tail { margin-left: auto; font-size: var(--syn-colpanel-tail-font-size, 10px); color: var(--syn-colpanel-tail-color, var(--text-faint)); flex: none; }
.syn-colpanel-foot { display: flex; padding-top: var(--syn-colpanel-foot-padding-top, 8px); }
.syn-colpanel-reset { border: none; background: none; padding: 0; font: var(--syn-colpanel-reset-font, 500 11.5px var(--type-family)); color: var(--syn-colpanel-reset-color, var(--text-body)); cursor: pointer; }
.syn-colpanel-reset:hover { background: var(--syn-colpanel-reset-hover-background, var(--surface-hover)); }

.syn-facetdivider { height: var(--syn-facetdivider-height, 1px); background: var(--syn-facetdivider-background, var(--border-hairline)); margin: var(--syn-facetdivider-margin, 6px 9px); }
.syn-facetlinks { font-size: var(--syn-facetlinks-font-size, 0.71875rem); font-weight: var(--syn-facetlinks-font-weight, 500); white-space: nowrap; }
.syn-facetlinks-sep { color: var(--syn-facetlinks-sep-color, var(--text-faint)); }

.syn-dir-countline { font-size: var(--syn-dir-countline-font-size, 0.71875rem); color: var(--syn-dir-countline-color, var(--text-tertiary)); margin-top: var(--syn-dir-countline-margin-top, 3px); }
.syn-dir-empty { padding: var(--syn-dir-empty-padding, 48px 24px); text-align: center; }
.syn-dir-empty-cause { font-size: var(--syn-dir-empty-cause-font-size, 0.8125rem); font-weight: var(--syn-dir-empty-cause-font-weight, 500); color: var(--syn-dir-empty-cause-color, var(--text-body)); }
.syn-dir-empty-exits { font-size: var(--syn-dir-empty-exits-font-size, 0.75rem); color: var(--syn-dir-empty-exits-color, var(--text-tertiary)); margin-top: var(--syn-dir-empty-exits-margin-top, 6px); }

/* ── StateWord (Q132; CD 2a/2b): small-caps state words — the resume status vocabulary. */
.syn-stateword { font-size: var(--syn-stateword-font-size, 0.59375rem); font-weight: var(--syn-stateword-font-weight, 600); letter-spacing: var(--syn-stateword-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-stateword-text-transform, var(--type-label-transform)); white-space: nowrap; }
.syn-stateword.is-ink { color: var(--syn-stateword-is-ink-color, var(--text-ink)); }
.syn-stateword.is-muted { color: var(--syn-stateword-is-muted-color, var(--text-tertiary)); }
.syn-stateword.is-faint { color: var(--syn-stateword-is-faint-color, var(--text-faint)); }
.syn-person-resumechev { font-size: var(--syn-person-resumechev-font-size, 0.8125rem); color: var(--syn-person-resumechev-color, var(--text-tertiary)); }
.syn-person-resumelabel .syn-link.is-first { font-weight: var(--syn-person-resumelabel-link-is-first-font-weight, 600); }

.syn-resume-footnote { flex: 1; text-align: center; font-size: var(--syn-resume-footnote-font-size, 0.71875rem); color: var(--syn-resume-footnote-color, var(--text-faint)); }

/* ── word runs (Q132; CD de-pill): view-mode reference lists speak " · " separated words. */
.syn-wordrun { font-size: var(--syn-wordrun-font-size, 0.8125rem); color: var(--syn-wordrun-color, var(--text-body)); line-height: var(--syn-wordrun-line-height, 1.6); }
.syn-resume-tenure { font-weight: var(--syn-resume-tenure-font-weight, 400); color: var(--syn-resume-tenure-color, var(--text-faint)); }
.syn-resume-pos-title.is-current { font-weight: var(--syn-resume-pos-title-is-current-font-weight, 600); }

.syn-org-rolesep { color: var(--syn-org-rolesep-color, var(--text-faint)); margin: var(--syn-org-rolesep-margin, 0 2px); }

/* ── org identity header (Q132; CD 2c) + the 44px logo tile. */
.syn-orglogotile { width: var(--syn-orglogotile-width, 44px); height: var(--syn-orglogotile-height, 44px); flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--syn-orglogotile-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-orglogotile .syn-logo-mono { width: var(--syn-orglogotile-logo-mono-width, 44px); height: var(--syn-orglogotile-logo-mono-height, 44px); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--syn-orglogotile-logo-mono-border-radius, var(--shape-radius-control)); font-size: var(--syn-orglogotile-logo-mono-font-size, 0.875rem); font-weight: var(--syn-orglogotile-logo-mono-font-weight, 600); }
.syn-org-head { display: flex; align-items: center; gap: var(--syn-org-head-gap, 14px); }
.syn-org-h1 { font-size: var(--syn-org-h1-font-size, 1.5rem); font-weight: var(--syn-org-h1-font-weight, 700); line-height: var(--syn-org-h1-line-height, 1.25); margin: 0; letter-spacing: var(--syn-org-h1-letter-spacing, -0.01em); }
.syn-org-metaline { font-size: var(--syn-org-metaline-font-size, 0.8125rem); color: var(--syn-org-metaline-color, var(--text-muted)); margin-top: var(--syn-org-metaline-margin-top, 3px); display: flex; align-items: center; gap: var(--syn-org-metaline-gap, 6px); flex-wrap: wrap; }
.syn-section-foot { font-size: var(--syn-section-foot-font-size, 0.71875rem); color: var(--syn-section-foot-color, var(--text-tertiary)); margin-top: var(--syn-section-foot-margin-top, 6px); line-height: var(--syn-section-foot-line-height, 1.45); }
.syn-org-awardvalue { font-weight: var(--syn-org-awardvalue-font-weight, 600); font-variant-numeric: var(--syn-org-awardvalue-font-variant-numeric, tabular-nums); }

/* ── LogoSection (Q201 [REBUILD-LOGO-1]): the ONE logo slot — the patched-mockup anatomy
   (DL-PATCH-NOTES-Organizations-SingleLogo A1–A8, values verbatim from the comp). */
.syn-orglogo-hint { font-size: var(--syn-orglogo-hint-font-size, 0.71875rem); color: var(--syn-orglogo-hint-color, var(--text-faint)); }
.syn-orglogo-slot { max-width: var(--syn-orglogo-slot-max-width, 380px); }
.syn-orglogo-preview { position: relative; height: var(--syn-orglogo-preview-height, 88px); border: var(--syn-orglogo-preview-border, 1px solid var(--border-default)); border-radius: var(--syn-orglogo-preview-border-radius, var(--shape-radius-control)); background: var(--syn-orglogo-preview-background, var(--surface-hover)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.syn-orglogo-preview img { max-width: 80%; max-height: 70%; object-fit: contain; }
.syn-orglogo-strip { position: absolute; left: 0; right: 0; bottom: 0; background: var(--syn-orglogo-strip-background, var(--logo-strip)); border-top: var(--syn-orglogo-strip-border-top, 1px solid var(--border-hairline)); padding: var(--syn-orglogo-strip-padding, 5px 10px); display: flex; align-items: center; gap: var(--syn-orglogo-strip-gap, 10px); font-size: var(--syn-orglogo-strip-font-size, 0.71875rem); font-weight: var(--syn-orglogo-strip-font-weight, 500); visibility: hidden; }
.syn-orglogo-preview:hover .syn-orglogo-strip { visibility: visible; }
.syn-orglogo-strip label { cursor: pointer; }
.syn-orglogo-strip .syn-inlinedel { display: inline-flex; align-items: center; gap: var(--syn-orglogo-strip-inlinedel-gap, 3px); padding: 0; border: none; background: none; font-family: inherit; font-size: var(--syn-orglogo-strip-inlinedel-font-size, 0.71875rem); font-weight: var(--syn-orglogo-strip-inlinedel-font-weight, 500); color: var(--syn-orglogo-strip-inlinedel-color, var(--text-tertiary)); cursor: pointer; }
.syn-orglogo-prov { font-size: var(--syn-orglogo-prov-font-size, 0.65625rem); color: var(--syn-orglogo-prov-color, var(--text-faint)); margin-top: var(--syn-orglogo-prov-margin-top, 5px); }
.syn-orglogo-drop { position: relative; height: var(--syn-orglogo-drop-height, 88px); border: var(--syn-orglogo-drop-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-orglogo-drop-border-radius, var(--shape-radius-control)); background: var(--syn-orglogo-drop-background, var(--surface-hover)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--syn-orglogo-drop-gap, 4px); cursor: pointer; }
.syn-orglogo-drop-t { font-size: var(--syn-orglogo-drop-t-font-size, 0.75rem); font-weight: var(--syn-orglogo-drop-t-font-weight, 500); color: var(--syn-orglogo-drop-t-color, var(--text-muted)); }
/* QB46 (text-scale C10): drop-zone micro copy is CHROME — px, never scales. */
.syn-orglogo-drop-d { font-size: var(--syn-orglogo-drop-d-font-size, 10px); color: var(--syn-orglogo-drop-d-color, var(--text-faint)); }
.syn-orglogo-dropinput { position: absolute; inset: 0; opacity: var(--syn-orglogo-dropinput-opacity, 0); cursor: pointer; }   /* native click + drag-drop, no interop */

/* ── Interest forms (Q132; CD 2i): fact rows + the 16c reading-overlay stand-in. */
/* Q367(c): .syn-org-ifnote (the interest-list helper caption) retired with the caption — the header + rows speak for themselves. */
.syn-org-ifrow { display: grid; grid-template-columns: var(--syn-org-ifrow-grid-template-columns, 88px minmax(0,1fr) 110px); gap: var(--syn-org-ifrow-gap, 12px); padding: var(--syn-org-ifrow-padding, 12px 0); align-items: baseline; }
.syn-org-ifrow + .syn-org-ifrow { border-top: var(--syn-org-ifrow-org-ifrow-border-top, 1px solid var(--border-hairline)); }
.syn-org-ifid { display: flex; flex-direction: column; gap: var(--syn-org-ifid-gap, 3px); }   /* Q359: a multi-TOPR match lists one ref per line inside the 88px id seat (never run together, never wrapped mid-ref) */
.syn-org-ifid .syn-ref { font-family: var(--syn-org-ifid-ref-font-family, var(--type-family-mono)); font-size: var(--syn-org-ifid-ref-font-size, 0.75rem); font-weight: var(--syn-org-ifid-ref-font-weight, 600); white-space: nowrap; }
.syn-org-ifraw { font-family: var(--syn-org-ifraw-font-family, var(--type-family-mono)); font-size: var(--syn-org-ifraw-font-size, 0.75rem); color: var(--syn-org-ifraw-color, var(--text-faint)); }
/* Q359(b): the unmatched reply keeps the ROW GRAMMAR — the id seat goes muted mono (raw value or the em-dash), the title slot
   reads the form's subject or the quiet "No TOPR matched yet"; the Q356(i) floating italic died with the grid break it caused. */
.syn-org-ifid.is-unmatched { font-family: var(--syn-org-ifid-is-unmatched-font-family, var(--type-family-mono)); font-size: var(--syn-org-ifid-is-unmatched-font-size, 0.75rem); font-weight: var(--syn-org-ifid-is-unmatched-font-weight, 600); color: var(--syn-org-ifid-is-unmatched-color, var(--text-faint)); }
.syn-org-iftitle.is-quiet { font-weight: var(--syn-org-iftitle-is-quiet-font-weight, 400); color: var(--syn-org-iftitle-is-quiet-color, var(--text-tertiary)); }
/* Q359(c): the inline match control — the canonical TOPR picker (multi) under the meta line; its clicks never open the modal */
.syn-org-ifmatch { margin-top: var(--syn-org-ifmatch-margin-top, 6px); display: flex; align-items: center; gap: var(--syn-org-ifmatch-gap, 8px); }
.syn-org-ifmatcherr { font-size: var(--syn-org-ifmatcherr-font-size, 0.71875rem); color: var(--syn-org-ifmatcherr-color, var(--state-attention-text)); }
.syn-org-ifrepeat { font-size: var(--syn-org-ifrepeat-font-size, 0.625rem); font-weight: var(--syn-org-ifrepeat-font-weight, 500); color: var(--syn-org-ifrepeat-color, var(--text-tertiary)); border: var(--syn-org-ifrepeat-border, 1px solid var(--border-default)); border-radius: var(--syn-org-ifrepeat-border-radius, var(--shape-radius-pill)); padding: var(--syn-org-ifrepeat-padding, 0 6px); margin-left: var(--syn-org-ifrepeat-margin-left, 8px); white-space: nowrap; }   /* Q356(j) */
.syn-org-iftitle { font-size: var(--syn-org-iftitle-font-size, 0.8125rem); font-weight: var(--syn-org-iftitle-font-weight, 600); line-height: var(--syn-org-iftitle-line-height, 1.4); color: var(--syn-org-iftitle-color, var(--text-ink)); }
.syn-org-ifprov { font-size: var(--syn-org-ifprov-font-size, 0.71875rem); color: var(--syn-org-ifprov-color, var(--text-tertiary)); margin-top: var(--syn-org-ifprov-margin-top, 2px); }
.syn-org-ifread { text-align: right; }
.syn-org-ifreadbtn { display: inline-flex; border: var(--syn-org-ifreadbtn-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-org-ifreadbtn-border-radius, var(--radius-nav)); background: var(--syn-org-ifreadbtn-background, var(--surface-plane)); padding: var(--syn-org-ifreadbtn-padding, 5px 12px); font-size: var(--syn-org-ifreadbtn-font-size, 0.71875rem); font-weight: var(--syn-org-ifreadbtn-font-weight, 600); color: var(--syn-org-ifreadbtn-color, var(--text-ink)); cursor: pointer; font-family: inherit; }
.syn-org-ifreadbtn:hover { background: var(--syn-org-ifreadbtn-hover-background, var(--surface-hover)); }
.syn-org-ifpanel { width: var(--syn-org-ifpanel-width, 640px); max-height: var(--syn-org-ifpanel-max-height, 88vh); overflow-y: auto; background: var(--syn-org-ifpanel-background, var(--surface-plane)); border-radius: var(--syn-org-ifpanel-border-radius, var(--shape-radius-sheet)); box-shadow: var(--syn-org-ifpanel-box-shadow, var(--elevation-overlay)); }
.syn-org-ifpanelhead { padding: var(--syn-org-ifpanelhead-padding, 16px 22px); border-bottom: var(--syn-org-ifpanelhead-border-bottom, 1px solid var(--border-default)); display: flex; align-items: flex-start; gap: var(--syn-org-ifpanelhead-gap, 10px); position: sticky; top: 0; background: var(--syn-org-ifpanelhead-background, var(--surface-plane)); }
.syn-org-ifpanelmain { flex: 1; min-width: 0; }
.syn-org-ifpaneltitle { font-size: var(--syn-org-ifpaneltitle-font-size, 0.9375rem); font-weight: var(--syn-org-ifpaneltitle-font-weight, 600); }
.syn-org-ifpanelbody { padding: var(--syn-org-ifpanelbody-padding, 16px 22px 22px); }
.syn-org-ifseglabel { font-size: var(--syn-org-ifseglabel-font-size, 0.59375rem); font-weight: var(--syn-org-ifseglabel-font-weight, 600); text-transform: var(--syn-org-ifseglabel-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-org-ifseglabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-org-ifseglabel-color, var(--text-faint)); margin: var(--syn-org-ifseglabel-margin, 14px 0 4px); }
.syn-org-ifseglabel:first-child { margin-top: 0; }
.syn-org-ifsegtext { font-size: var(--syn-org-ifsegtext-font-size, 0.78125rem); color: var(--syn-org-ifsegtext-color, var(--text-body)); }
.syn-org-ifsegmd .syn-md { font-size: var(--syn-org-ifsegmd-md-font-size, 0.8125rem); }

/* wave-3 composition reserve (Q132; CD 2c) — honest dashed room, not fake content. */
.syn-org-reserve { border: var(--syn-org-reserve-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-org-reserve-border-radius, var(--shape-radius-plane)); padding: var(--syn-org-reserve-padding, 18px 20px); font-size: var(--syn-org-reserve-font-size, 0.71875rem); line-height: var(--syn-org-reserve-line-height, 1.55); color: var(--syn-org-reserve-color, var(--text-faint)); }

/* ── Experience fact strip (Q132; CD 2d): the page's spine — figure-scale citation values +
   the one page-level Edit at the right edge. */

/* ── two-layer section edit (Q132; CD 2d): hover-revealed head action in reserved space. */
.syn-section-card.is-revealact .syn-section-head-actions { visibility: hidden; }
.syn-section-card.is-revealact .syn-section-head:hover .syn-section-head-actions,
.syn-section-card.is-revealact.is-pinned .syn-section-head-actions { visibility: visible; }
.syn-section-card.is-revealact .syn-section-head:hover { background: var(--syn-section-card-is-revealact-section-head-hover-background, var(--surface-hover)); border-radius: var(--syn-section-card-is-revealact-section-head-hover-border-radius, var(--radius-sm)); }

/* ── CPARS view (Q132; CD 2k): newest expanded, older collapse to fact lines; words, colorless. */
.syn-cpars.is-view { border: none; padding: var(--syn-cpars-is-view-padding, 12px 0); }
.syn-cpars.is-view + .syn-cpars.is-view { border-top: var(--syn-cpars-is-view-cpars-is-view-border-top, 1px solid var(--border-hairline)); }
.syn-cpars-vhead { display: flex; align-items: baseline; gap: var(--syn-cpars-vhead-gap, 8px); cursor: pointer; }
.syn-cpars-vspacer { flex: 1; }
.syn-cpars-vchev { font-size: var(--syn-cpars-vchev-font-size, 0.8125rem); color: var(--syn-cpars-vchev-color, var(--text-tertiary)); }
.syn-cpars-range { font-size: var(--syn-cpars-range-font-size, 0.78125rem); font-weight: var(--syn-cpars-range-font-weight, 600); color: var(--syn-cpars-range-color, var(--text-ink)); font-variant-numeric: var(--syn-cpars-range-font-variant-numeric, tabular-nums); }
.syn-cpars-range.is-collapsed { font-weight: var(--syn-cpars-range-is-collapsed-font-weight, 500); }
.syn-cpars-official { font-size: var(--syn-cpars-official-font-size, 0.71875rem); color: var(--syn-cpars-official-color, var(--text-faint)); margin-top: var(--syn-cpars-official-margin-top, 2px); }
.syn-cpars-areas.is-view { margin-top: var(--syn-cpars-areas-is-view-margin-top, 10px); }
.syn-cpars-areas.is-view .syn-cpars-arearow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--syn-cpars-areas-is-view-cpars-arearow-gap, 10px); padding: var(--syn-cpars-areas-is-view-cpars-arearow-padding, 4px 0); border-bottom: var(--syn-cpars-areas-is-view-cpars-arearow-border-bottom, 1px solid var(--border-hairline)); }
.syn-cpars-areas.is-view .syn-cpars-arearow:last-child { border-bottom: none; }
.syn-cpars-areas.is-view .syn-cpars-area { font-size: var(--syn-cpars-areas-is-view-cpars-area-font-size, 0.59375rem); font-weight: var(--syn-cpars-areas-is-view-cpars-area-font-weight, 600); letter-spacing: var(--syn-cpars-areas-is-view-cpars-area-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-cpars-areas-is-view-cpars-area-text-transform, var(--type-label-transform)); color: var(--syn-cpars-areas-is-view-cpars-area-color, var(--text-faint)); }
.syn-cpars-word { font-size: var(--syn-cpars-word-font-size, 0.75rem); font-weight: var(--syn-cpars-word-font-weight, 500); color: var(--syn-cpars-word-color, var(--text-ink)); white-space: nowrap; }
.syn-cpars-unrated { font-size: var(--syn-cpars-unrated-font-size, 0.75rem); color: var(--syn-cpars-unrated-color, var(--text-faint)); white-space: nowrap; }
.syn-cpars-quote { font-size: var(--syn-cpars-quote-font-size, 0.75rem); line-height: var(--syn-cpars-quote-line-height, 1.6); color: var(--syn-cpars-quote-color, var(--text-body)); margin-top: var(--syn-cpars-quote-margin-top, 10px); }
.syn-person-quiet { font-size: var(--syn-person-quiet-font-size, 0.75rem); color: var(--syn-person-quiet-color, var(--text-tertiary)); }
.syn-person-quiet.is-extra { margin-top: var(--syn-person-quiet-is-extra-margin-top, 1px); }
.syn-person-quiet .syn-addr { display: inline; }

/* ── Users & Roles 1a truings (Q133): role word + provenance line, pending small-caps, revoke sentence. */
.syn-admin-roleword { font-size: var(--syn-admin-roleword-font-size, 0.8125rem); font-weight: var(--syn-admin-roleword-font-weight, 500); color: var(--syn-admin-roleword-color, var(--text-ink)); }
.syn-admin-provline { font-size: var(--syn-admin-provline-font-size, 0.65625rem); color: var(--syn-admin-provline-color, var(--text-faint)); margin-top: var(--syn-admin-provline-margin-top, 2px); padding-left: var(--syn-admin-provline-padding-left, 12px); }
.syn-admin-source.is-pending { font-size: var(--syn-admin-source-is-pending-font-size, 0.59375rem); font-weight: var(--syn-admin-source-is-pending-font-weight, 600); letter-spacing: var(--syn-admin-source-is-pending-letter-spacing, 0.07em); color: var(--syn-admin-source-is-pending-color, var(--text-tertiary)); }
.syn-admin-revoke { display: inline-flex; align-items: center; gap: var(--syn-admin-revoke-gap, 8px); max-width: var(--syn-admin-revoke-max-width, 460px); }
.syn-admin-revoketext { font-size: var(--syn-admin-revoketext-font-size, 0.75rem); line-height: var(--syn-admin-revoketext-line-height, 1.4); color: var(--syn-admin-revoketext-color, var(--text-body)); }
.syn-admin-rowstate { font-size: var(--syn-admin-rowstate-font-size, 0.59375rem); font-weight: var(--syn-admin-rowstate-font-weight, 600); letter-spacing: var(--syn-admin-rowstate-letter-spacing, 0.07em); color: var(--syn-admin-rowstate-color, var(--text-tertiary)); white-space: nowrap; }

/* ── Reference Lists 1d/1e truings (Q133): quiet rail numerals, ⠿ drag, usage phrases,
   small-caps INACTIVE, the merge sentence. */
.syn-admin-refs-kindcount { font-size: var(--syn-admin-refs-kindcount-font-size, 0.71875rem); color: var(--syn-admin-refs-kindcount-color, var(--text-tertiary)); font-variant-numeric: var(--syn-admin-refs-kindcount-font-variant-numeric, tabular-nums); }
.syn-admin-refs-grip { font-size: var(--syn-admin-refs-grip-font-size, 0.75rem); color: var(--syn-admin-refs-grip-color, var(--text-faint)); cursor: grab; flex: none; }
.syn-admin-refs-row.is-dragging { border: var(--syn-admin-refs-row-is-dragging-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-admin-refs-row-is-dragging-border-radius, var(--radius-nav)); background: var(--syn-admin-refs-row-is-dragging-background, var(--surface-plane)); box-shadow: var(--syn-admin-refs-row-is-dragging-box-shadow, var(--shadow-drag)); }
.syn-admin-refs-inactiveword { font-size: var(--syn-admin-refs-inactiveword-font-size, 0.59375rem); font-weight: var(--syn-admin-refs-inactiveword-font-weight, 600); letter-spacing: var(--syn-admin-refs-inactiveword-letter-spacing, 0.07em); color: var(--syn-admin-refs-inactiveword-color, var(--text-faint)); margin-left: var(--syn-admin-refs-inactiveword-margin-left, 6px); }
.syn-admin-refs-usage.is-zero { color: var(--syn-admin-refs-usage-is-zero-color, var(--text-faint)); }
.syn-admin-refs-mergesentence { font-size: var(--syn-admin-refs-mergesentence-font-size, 0.78125rem); line-height: var(--syn-admin-refs-mergesentence-line-height, 1.55); color: var(--syn-admin-refs-mergesentence-color, var(--text-body)); flex: 1; min-width: 0; }

/* ── the audit LEDGER (Q133; 2a ratified as the sketch): day groups, prose facts, tracked changes. */
.syn-audit-ledger { background: var(--syn-audit-ledger-background, var(--surface-plane)); border: var(--syn-audit-ledger-border, 1px solid var(--border-default)); border-radius: var(--syn-audit-ledger-border-radius, var(--shape-radius-plane)); overflow: hidden; }
.syn-audit-day { padding: var(--syn-audit-day-padding, 9px 16px 5px); font-size: var(--syn-audit-day-font-size, 0.625rem); font-weight: var(--syn-audit-day-font-weight, 600); letter-spacing: var(--syn-audit-day-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-audit-day-text-transform, var(--type-label-transform)); color: var(--syn-audit-day-color, var(--text-tertiary)); background: var(--syn-audit-day-background, var(--bg-secondary)); border-bottom: var(--syn-audit-day-border-bottom, 1px solid var(--border-default)); }
.syn-audit-day:not(:first-child) { border-top: var(--syn-audit-day-not-first-child-border-top, 1px solid var(--border-default)); }
.syn-audit-lrow { display: flex; align-items: center; gap: var(--syn-audit-lrow-gap, 10px); padding: var(--syn-audit-lrow-padding, 9px 16px); border-bottom: var(--syn-audit-lrow-border-bottom, 1px solid var(--border-hairline)); cursor: pointer; }
.syn-audit-lrow:hover, .syn-audit-lrow.is-open { background: var(--syn-audit-lrow-hover-background, var(--surface-hover)); }
.syn-audit-ltime { font-family: var(--syn-audit-ltime-font-family, var(--type-family-mono)); font-size: var(--syn-audit-ltime-font-size, 0.71875rem); color: var(--syn-audit-ltime-color, var(--text-tertiary)); width: var(--syn-audit-ltime-width, 64px); flex: none; font-variant-numeric: var(--syn-audit-ltime-font-variant-numeric, tabular-nums); }
.syn-audit-lsentence { flex: 1; min-width: 0; font-size: var(--syn-audit-lsentence-font-size, 0.78125rem); line-height: var(--syn-audit-lsentence-line-height, 1.45); color: var(--syn-audit-lsentence-color, var(--text-body)); }
/* Q197: the ref speaks the LABEL in text face (mono was id-styling; ruling 15 — mono is
   identifiers only); the id rides beside it small and mono for traceability. */
.syn-audit-lref { font-size: var(--syn-audit-lref-font-size, 0.75rem); color: var(--syn-audit-lref-color, var(--accent-action)); }
.syn-audit-lid { font-size: var(--syn-audit-lid-font-size, 0.65625rem); color: var(--syn-audit-lid-color, var(--text-tertiary)); }
/* Q197 (6): the show-older pull row. */
.syn-audit-older { display: flex; justify-content: center; padding: var(--syn-audit-older-padding, 12px 0 4px); }
.syn-audit-lkind { font-size: var(--syn-audit-lkind-font-size, 0.59375rem); font-weight: var(--syn-audit-lkind-font-weight, 600); letter-spacing: var(--syn-audit-lkind-letter-spacing, 0.07em); color: var(--syn-audit-lkind-color, var(--text-faint)); white-space: nowrap; }
.syn-audit-lchanges { padding: var(--syn-audit-lchanges-padding, 6px 16px 12px 90px); border-bottom: var(--syn-audit-lchanges-border-bottom, 1px solid var(--border-hairline)); background: var(--syn-audit-lchanges-background, var(--surface-hover)); }
.syn-audit-lchange { display: flex; align-items: baseline; gap: var(--syn-audit-lchange-gap, 8px); padding: var(--syn-audit-lchange-padding, 3px 0); font-size: var(--syn-audit-lchange-font-size, 0.75rem); flex-wrap: wrap; }
.syn-audit-lpath { font-family: var(--syn-audit-lpath-font-family, var(--type-family-mono)); font-size: var(--syn-audit-lpath-font-size, 0.71875rem); color: var(--syn-audit-lpath-color, var(--text-tertiary)); min-width: var(--syn-audit-lpath-min-width, 120px); }
.syn-audit-lold { text-decoration: var(--syn-audit-lold-text-decoration, line-through); color: var(--syn-audit-lold-color, var(--text-faint)); }
.syn-audit-lnew { font-weight: var(--syn-audit-lnew-font-weight, 600); color: var(--syn-audit-lnew-color, var(--text-ink)); background: var(--syn-audit-lnew-background, var(--surface-inset)); border-radius: var(--syn-audit-lnew-border-radius, var(--radius-xs)); padding: var(--syn-audit-lnew-padding, 0 5px); }
.syn-audit-lbasis { font-size: var(--syn-audit-lbasis-font-size, 0.71875rem); color: var(--syn-audit-lbasis-color, var(--text-faint)); margin-top: var(--syn-audit-lbasis-margin-top, 4px); }

/* ── Q136 — the CD KP round port (workbench 3a/3b · pool 1b · compare 2d · definition 2a).
   Jane accents are the comps' literals (FLAG-KP-9 — no tokens-v2 names yet; the Jane identity
   family runs in its own future sitting): ✦ #6d28d9 · border tint #ddd2ef · amber ink #b45309. ── */
.syn-kpw-headmeta { font-size: var(--syn-kpw-headmeta-font-size, 0.75rem); color: var(--syn-kpw-headmeta-color, var(--text-muted)); margin-left: var(--syn-kpw-headmeta-margin-left, 6px); }
/* the crosswalk headline strip */
/* FIX-2: the pre-R10 workbench modal was conformed up to WORK at QB62 with no pane of its own — its blocks stood as
   row-flex siblings in the species body (strip | chips | candline | body side by side, the ledger clipped past the
   room). The ONE scrolling pane of the WORK room (the Capability areas room's grammar), the ruled 24 inset. */
.syn-kpw-room { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--syn-kpw-room-padding, 14px 24px 18px); }
.syn-kpw-strip { background: var(--syn-kpw-strip-background, var(--surface-hover)); border: var(--syn-kpw-strip-border, 1px solid var(--border-hairline)); border-radius: var(--syn-kpw-strip-border-radius, var(--shape-radius-control)); padding: var(--syn-kpw-strip-padding, 10px 14px); margin-bottom: var(--syn-kpw-strip-margin-bottom, 12px); }
.syn-kpw-stripline { font-size: var(--syn-kpw-stripline-font-size, 0.8125rem); line-height: var(--syn-kpw-stripline-line-height, 1.6); color: var(--syn-kpw-stripline-color, var(--text-body)); }
.syn-kpw-stripline b { color: var(--syn-kpw-stripline-b-color, var(--text-ink)); }
.syn-kpw-stripline.is-bar { font-size: var(--syn-kpw-stripline-is-bar-font-size, 0.78125rem); margin-top: var(--syn-kpw-stripline-is-bar-margin-top, 5px); }
.syn-kpw-stripnote { font-size: var(--syn-kpw-stripnote-font-size, 0.71875rem); color: var(--syn-kpw-stripnote-color, var(--text-faint)); }
.syn-kpw-changeprose { font-size: var(--syn-kpw-changeprose-font-size, 0.75rem); line-height: var(--syn-kpw-changeprose-line-height, 1.55); color: var(--syn-kpw-changeprose-color, var(--text-muted)); margin-top: var(--syn-kpw-changeprose-margin-top, 5px); }
/* the LCAT chip trigger (LcatPicker Chip mode) */
/* QB45 (K2/K6, the founding "billed as" specimen): the closed inline chip WRAPS a long catalog
   title inside the band's width instead of running one unbreakable line — wrap-or-reasonable-cap,
   Ken's amendment; max-width caps it at its host line. */
.syn-lcat-chip { display: inline-flex; align-items: center; gap: var(--syn-lcat-chip-gap, 6px); vertical-align: baseline; border: var(--syn-lcat-chip-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-lcat-chip-border-radius, var(--radius-nav)); background: var(--syn-lcat-chip-background, var(--surface-plane)); padding: var(--syn-lcat-chip-padding, 3px 10px); font: inherit; font-size: var(--syn-lcat-chip-font-size, 0.78125rem); font-weight: var(--syn-lcat-chip-font-weight, var(--font-medium)); color: var(--syn-lcat-chip-color, var(--text-ink)); cursor: pointer; white-space: normal; text-align: left; max-width: 100%; }
.syn-lcat-chip.is-placeholder { color: var(--syn-lcat-chip-is-placeholder-color, var(--text-tertiary)); }
.syn-lcat-chip.is-emphasized { border: var(--syn-lcat-chip-is-emphasized-border, 1.5px solid var(--text-ink)); font-weight: var(--syn-lcat-chip-is-emphasized-font-weight, var(--font-semibold)); }
.syn-lcat-chip:hover { background: var(--syn-lcat-chip-hover-background, var(--surface-hover)); }
/* the breach — one red-lead sentence, two honest exits */
.syn-kpw-breach { display: flex; gap: var(--syn-kpw-breach-gap, 10px); align-items: baseline; border: var(--syn-kpw-breach-border, 1.5px solid var(--border-emphasis)); border-radius: var(--syn-kpw-breach-border-radius, var(--shape-radius-control)); padding: var(--syn-kpw-breach-padding, 9px 14px); margin-bottom: var(--syn-kpw-breach-margin-bottom, 10px); background: var(--syn-kpw-breach-background, var(--surface-plane)); }
.syn-kpw-breachtext { flex: 1; font-size: var(--syn-kpw-breachtext-font-size, 0.78125rem); line-height: var(--syn-kpw-breachtext-line-height, 1.55); color: var(--syn-kpw-breachtext-color, var(--text-body)); }
.syn-kpw-breachtext b { color: var(--syn-kpw-breachtext-b-color, var(--state-attention)); font-weight: var(--syn-kpw-breachtext-b-font-weight, var(--font-semibold)); }
/* chips — the 3a anatomy: name + seat-word/meets-count; NO LONGER MEETS small-caps */
.syn-kpw-chip { padding: var(--syn-kpw-chip-padding, 5px 12px); }
.syn-kpw-chip.is-seat { border-color: var(--syn-kpw-chip-is-seat-border-color, var(--text-ink)); box-shadow: var(--syn-kpw-chip-is-seat-box-shadow, var(--chip-seat-ring)); background: var(--syn-kpw-chip-is-seat-background, var(--surface-hover)); }   /* Q238 sweep: the drawn 1.5px ring without a border-width jump */
.syn-kpw-chipmeta { font-size: var(--syn-kpw-chipmeta-font-size, 0.65625rem); font-weight: var(--syn-kpw-chipmeta-font-weight, var(--font-regular)); color: var(--syn-kpw-chipmeta-color, var(--text-tertiary)); font-variant-numeric: var(--syn-kpw-chipmeta-font-variant-numeric, tabular-nums); }
.syn-kpw-chipfell { font-size: var(--syn-kpw-chipfell-font-size, 0.59375rem); font-weight: var(--syn-kpw-chipfell-font-weight, var(--font-semibold)); letter-spacing: var(--syn-kpw-chipfell-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-kpw-chipfell-text-transform, var(--type-label-transform)); color: var(--syn-kpw-chipfell-color, var(--state-attention)); }
.syn-kpw-candmeta { font-size: var(--syn-kpw-candmeta-font-size, 0.71875rem); color: var(--syn-kpw-candmeta-color, var(--text-tertiary)); }
/* Ask Jane */
.syn-kpw-askjane { display: inline-flex; align-items: center; gap: var(--syn-kpw-askjane-gap, 5px); border: var(--syn-kpw-askjane-border, 1px solid var(--jane-border-muted)); border-radius: var(--syn-kpw-askjane-border-radius, var(--radius-nav)); background: var(--syn-kpw-askjane-background, var(--surface-plane)); padding: var(--syn-kpw-askjane-padding, 4px 11px); font: inherit; font-size: var(--syn-kpw-askjane-font-size, 0.71875rem); font-weight: var(--syn-kpw-askjane-font-weight, var(--font-medium)); color: var(--syn-kpw-askjane-color, var(--text-ink)); cursor: pointer; }
.syn-kpw-askjane:disabled { cursor: wait; opacity: var(--syn-kpw-askjane-disabled-opacity, 0.75); }
.syn-kpw-janestar { color: var(--syn-kpw-janestar-color, var(--accent-ai)); }
/* the ledger — Required·origin + Verdict·assessed-by */
.syn-kpw-lrow { grid-template-columns: var(--syn-kpw-lrow-grid-template-columns, 1.1fr 1.15fr 1fr 230px); }
.syn-kpw-lverdict { display: flex; flex-direction: column; align-items: flex-start; gap: var(--syn-kpw-lverdict-gap, 2px); min-width: 0; }
.syn-kpw-reqval { display: block; font-weight: var(--syn-kpw-reqval-font-weight, var(--font-medium)); color: var(--syn-kpw-reqval-color, var(--text-ink)); }
.syn-kpw-origin { display: block; font-size: var(--syn-kpw-origin-font-size, 0.65625rem); line-height: var(--syn-kpw-origin-line-height, 1.4); color: var(--syn-kpw-origin-color, var(--text-faint)); margin-top: var(--syn-kpw-origin-margin-top, 1px); }
.syn-kpw-origin s { text-decoration: var(--syn-kpw-origin-s-text-decoration, line-through); }
.syn-kpw-verdict.is-btn { cursor: pointer; }
.syn-kpw-verdict:not(.is-btn) { cursor: default; }
.syn-kpw-assessline { font-size: var(--syn-kpw-assessline-font-size, 0.625rem); color: var(--syn-kpw-assessline-color, var(--text-faint)); line-height: var(--syn-kpw-assessline-line-height, 1.4); }
.syn-kpw-proposal { font-size: var(--syn-kpw-proposal-font-size, 0.71875rem); line-height: var(--syn-kpw-proposal-line-height, 1.5); color: var(--syn-kpw-proposal-color, var(--text-body)); margin-top: var(--syn-kpw-proposal-margin-top, 3px); }
.syn-kpw-janelead { color: var(--syn-kpw-janelead-color, var(--accent-ai)); font-weight: var(--syn-kpw-janelead-font-weight, var(--font-semibold)); }
.syn-kpw-proposalacts { display: flex; gap: var(--syn-kpw-proposalacts-gap, 5px); margin-top: var(--syn-kpw-proposalacts-margin-top, 4px); }   /* Accept/Revise ride PrimaryInkInline / RowAct */
/* the overall advisory — purple-tinted border */
.syn-kpw-advisory { background: var(--syn-kpw-advisory-background, var(--surface-hover)); border: var(--syn-kpw-advisory-border, 1px solid var(--jane-border-muted)); border-radius: var(--syn-kpw-advisory-border-radius, var(--shape-radius-control)); padding: var(--syn-kpw-advisory-padding, 9px 12px); font-size: var(--syn-kpw-advisory-font-size, 0.75rem); line-height: var(--syn-kpw-advisory-line-height, 1.5); color: var(--syn-kpw-advisory-color, var(--text-body)); margin-bottom: var(--syn-kpw-advisory-margin-bottom, 4px); }
.syn-kpw-advisory b { color: var(--syn-kpw-advisory-b-color, var(--text-ink)); }
.syn-kpw-advisorybusy { display: inline-flex; align-items: center; gap: var(--syn-kpw-advisorybusy-gap, 7px); color: var(--syn-kpw-advisorybusy-color, var(--text-muted)); }
.syn-kpw-advisorytext { margin-top: var(--syn-kpw-advisorytext-margin-top, 3px); }
.syn-kpw-staletag { color: var(--syn-kpw-staletag-color, var(--review-text)); }
/* the KP tab compliance column — text speaks the law */
/* pool (1b) */
.syn-kpp-search { width: 100%; border: var(--syn-kpp-search-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-kpp-search-border-radius, var(--shape-radius-control)); padding: var(--syn-kpp-search-padding, 8px 12px); font-size: var(--syn-kpp-search-font-size, 0.78125rem); font-family: inherit; outline: none; background: var(--syn-kpp-search-background, var(--surface-plane)); color: var(--syn-kpp-search-color, var(--text-ink)); }
.syn-kpp-caption { padding: var(--syn-kpp-caption-padding, 10px 0 4px); font-size: var(--syn-kpp-caption-font-size, 0.71875rem); color: var(--syn-kpp-caption-color, var(--text-faint)); }
.syn-kpp-row { display: flex; gap: var(--syn-kpp-row-gap, 12px); align-items: center; padding: var(--syn-kpp-row-padding, 10px 0); border-bottom: var(--syn-kpp-row-border-bottom, 1px solid var(--border-hairline)); }
.syn-kpp-row:last-child { border-bottom: none; }
.syn-kpp-main { flex: 1; min-width: 0; }
.syn-kpp-name { font-size: var(--syn-kpp-name-font-size, 0.8125rem); font-weight: var(--syn-kpp-name-font-weight, var(--font-semibold)); }
.syn-kpp-sub { font-size: var(--syn-kpp-sub-font-size, 0.71875rem); color: var(--syn-kpp-sub-color, var(--text-tertiary)); margin-top: var(--syn-kpp-sub-margin-top, 1px); }
.syn-kpp-fit { display: inline-flex; gap: var(--syn-kpp-fit-gap, 8px); align-items: center; width: var(--syn-kpp-fit-width, 186px); flex: none; }
.syn-kpp-track { width: var(--syn-kpp-track-width, 72px); height: var(--syn-kpp-track-height, 5px); background: var(--syn-kpp-track-background, var(--surface-inset)); border-radius: var(--syn-kpp-track-border-radius, var(--shape-radius-pill)); overflow: hidden; }
.syn-kpp-fill { display: block; height: var(--syn-kpp-fill-height, 5px); background: var(--syn-kpp-fill-background, var(--text-ink)); border-radius: var(--syn-kpp-fill-border-radius, var(--shape-radius-pill)); }
.syn-kpp-count { font-size: var(--syn-kpp-count-font-size, 0.75rem); font-weight: var(--syn-kpp-count-font-weight, var(--font-medium)); color: var(--syn-kpp-count-color, var(--text-ink)); white-space: nowrap; }
.syn-kpp-nocount { font-size: var(--syn-kpp-nocount-font-size, 0.71875rem); color: var(--syn-kpp-nocount-color, var(--text-faint)); }
.syn-kpp-act { width: var(--syn-kpp-act-width, 112px); flex: none; text-align: right; }
.syn-kpp-inpool { display: inline-block; font-size: var(--syn-kpp-inpool-font-size, 0.71875rem); color: var(--syn-kpp-inpool-color, var(--text-faint)); padding: var(--syn-kpp-inpool-padding, 5px 2px); }
.syn-kpp-addbtn { display: inline-block; border: var(--syn-kpp-addbtn-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-kpp-addbtn-border-radius, var(--radius-nav)); background: var(--syn-kpp-addbtn-background, var(--surface-plane)); padding: var(--syn-kpp-addbtn-padding, 5px 12px); font: inherit; font-size: var(--syn-kpp-addbtn-font-size, 0.71875rem); font-weight: var(--syn-kpp-addbtn-font-weight, var(--font-semibold)); color: var(--syn-kpp-addbtn-color, var(--text-ink)); cursor: pointer; }
.syn-kpp-addbtn:hover { background: var(--syn-kpp-addbtn-hover-background, var(--surface-hover)); }
.syn-kpp-empty { font-size: var(--syn-kpp-empty-font-size, 0.78125rem); color: var(--syn-kpp-empty-color, var(--text-tertiary)); padding: var(--syn-kpp-empty-padding, 10px 0); }
/* compare (2d) */
/* FIX-2: the same pane for the compare seat (its table and the resume foot stood side by side in the row-flex body). */
.syn-kpc-room { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--syn-kpc-room-padding, 14px 24px 18px); }
.syn-kpc-table { border: var(--syn-kpc-table-border, 1px solid var(--border-hairline)); border-radius: var(--syn-kpc-table-border-radius, var(--shape-radius-control)); overflow: hidden; }
.syn-kpc-row { display: grid; grid-template-columns: var(--syn-kpc-row-grid-template-columns, 230px repeat(var(--kpc-cols, 3), 1fr)); align-items: center; border-bottom: var(--syn-kpc-row-border-bottom, 1px solid var(--border-hairline)); }
.syn-kpc-row:last-child { border-bottom: none; }
.syn-kpc-row.is-head, .syn-kpc-row.is-foot { background: var(--syn-kpc-row-is-head-background, var(--bg-secondary)); }
.syn-kpc-row.is-split { background: var(--syn-kpc-row-is-split-background, var(--surface-hover)); }
.syn-kpc-reqhead { padding: var(--syn-kpc-reqhead-padding, 12px 13px); font-size: var(--syn-kpc-reqhead-font-size, 0.625rem); font-weight: var(--syn-kpc-reqhead-font-weight, var(--font-semibold)); letter-spacing: var(--syn-kpc-reqhead-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-kpc-reqhead-text-transform, var(--type-label-transform)); color: var(--syn-kpc-reqhead-color, var(--text-tertiary)); }
.syn-kpc-colhead { padding: var(--syn-kpc-colhead-padding, 10px 13px); }
.syn-kpc-colname { font-size: var(--syn-kpc-colname-font-size, 0.8125rem); font-weight: var(--syn-kpc-colname-font-weight, var(--font-semibold)); color: var(--syn-kpc-colname-color, var(--text-ink)); }
.syn-kpc-colseat { font-size: var(--syn-kpc-colseat-font-size, 0.65625rem); font-weight: var(--syn-kpc-colseat-font-weight, var(--font-regular)); color: var(--syn-kpc-colseat-color, var(--text-tertiary)); }
.syn-kpc-colsub { display: block; font-size: var(--syn-kpc-colsub-font-size, 0.71875rem); color: var(--syn-kpc-colsub-color, var(--text-tertiary)); margin-top: var(--syn-kpc-colsub-margin-top, 1px); }
.syn-kpc-req { padding: var(--syn-kpc-req-padding, 9px 13px); font-size: var(--syn-kpc-req-font-size, 0.78125rem); font-weight: var(--syn-kpc-req-font-weight, var(--font-medium)); line-height: var(--syn-kpc-req-line-height, 1.45); color: var(--syn-kpc-req-color, var(--text-ink)); }
.syn-kpc-req.is-callnote { font-size: var(--syn-kpc-req-is-callnote-font-size, 0.71875rem); font-weight: var(--syn-kpc-req-is-callnote-font-weight, var(--font-regular)); color: var(--syn-kpc-req-is-callnote-color, var(--text-faint)); padding: var(--syn-kpc-req-is-callnote-padding, 11px 13px); }
.syn-kpc-reqbar { font-weight: var(--syn-kpc-reqbar-font-weight, var(--font-regular)); font-size: var(--syn-kpc-reqbar-font-size, 0.71875rem); color: var(--syn-kpc-reqbar-color, var(--text-faint)); }
.syn-kpc-cell { padding: var(--syn-kpc-cell-padding, 9px 13px); font-size: var(--syn-kpc-cell-font-size, 0.75rem); }
.syn-kpc-cell.is-quiet { color: var(--syn-kpc-cell-is-quiet-color, var(--text-tertiary)); }
.syn-kpc-cell.is-loud { font-weight: var(--syn-kpc-cell-is-loud-font-weight, var(--font-semibold)); color: var(--syn-kpc-cell-is-loud-color, var(--text-ink)); }
.syn-kpc-cell.is-loud.is-notmet { color: var(--syn-kpc-cell-is-loud-is-notmet-color, var(--state-attention)); }
.syn-kpc-cell.is-loud.is-review { color: var(--syn-kpc-cell-is-loud-is-review-color, var(--review-text)); }
.syn-kpc-val { font-weight: var(--syn-kpc-val-font-weight, var(--font-regular)); font-size: var(--syn-kpc-val-font-size, 0.71875rem); color: var(--syn-kpc-val-color, var(--text-tertiary)); }
.syn-kpc-selected { display: inline-flex; gap: var(--syn-kpc-selected-gap, 6px); align-items: center; background: var(--syn-kpc-selected-background, color-mix(in srgb, var(--state-success) 11%, var(--surface-plane))); color: var(--syn-kpc-selected-color, var(--state-success)); border-radius: var(--syn-kpc-selected-border-radius, var(--radius-nav)); padding: var(--syn-kpc-selected-padding, 6px 13px); font-size: var(--syn-kpc-selected-font-size, 0.71875rem); font-weight: var(--syn-kpc-selected-font-weight, var(--font-semibold)); }
.syn-kpc-resumefoot { display: flex; align-items: center; gap: var(--syn-kpc-resumefoot-gap, 8px); border: var(--syn-kpc-resumefoot-border, 1px solid var(--border-hairline)); border-radius: var(--syn-kpc-resumefoot-border-radius, var(--shape-radius-control)); padding: var(--syn-kpc-resumefoot-padding, 9px 13px); margin-top: var(--syn-kpc-resumefoot-margin-top, 12px); font-size: var(--syn-kpc-resumefoot-font-size, 0.75rem); font-weight: var(--syn-kpc-resumefoot-font-weight, var(--font-medium)); color: var(--syn-kpc-resumefoot-color, var(--text-body)); }
.syn-kpc-resumenote { font-size: var(--syn-kpc-resumenote-font-size, 0.71875rem); font-weight: var(--syn-kpc-resumenote-font-weight, var(--font-regular)); color: var(--syn-kpc-resumenote-color, var(--text-faint)); }
/* definition (2a) */
.syn-kpdf-body { display: flex; flex-direction: column; gap: var(--syn-kpdf-body-gap, 10px); }
.syn-kpdf-label { margin-top: var(--syn-kpdf-label-margin-top, 4px); }
.syn-kpdf-labelnote { font-weight: var(--syn-kpdf-labelnote-font-weight, var(--font-regular)); letter-spacing: 0; text-transform: var(--syn-kpdf-labelnote-text-transform, none); font-size: var(--syn-kpdf-labelnote-font-size, 0.71875rem); color: var(--syn-kpdf-labelnote-color, var(--text-faint)); }
.syn-kpdf-seatsrow { display: flex; align-items: center; gap: var(--syn-kpdf-seatsrow-gap, 10px); }
.syn-kpdf-bar { display: grid; grid-template-columns: var(--syn-kpdf-bar-grid-template-columns, 110px 1fr); gap: var(--syn-kpdf-bar-gap, 7px 12px); align-items: center; font-size: var(--syn-kpdf-bar-font-size, 0.78125rem); }
.syn-kpdf-dim { color: var(--syn-kpdf-dim-color, var(--text-tertiary)); }
.syn-kpdf-reqrow { display: flex; gap: var(--syn-kpdf-reqrow-gap, 10px); align-items: baseline; padding-top: var(--syn-kpdf-reqrow-padding-top, 6px); }
.syn-kpdf-reqrow:first-of-type { border-top: var(--syn-kpdf-reqrow-first-of-type-border-top, 1px solid var(--border-hairline)); padding-top: var(--syn-kpdf-reqrow-first-of-type-padding-top, 8px); }
.syn-kpdf-reqtext { flex: 1; font-size: var(--syn-kpdf-reqtext-font-size, 0.78125rem); line-height: var(--syn-kpdf-reqtext-line-height, 1.5); color: var(--syn-kpdf-reqtext-color, var(--text-body)); }
.syn-kpdf-reqmand { font-size: var(--syn-kpdf-reqmand-font-size, 0.625rem); font-weight: var(--syn-kpdf-reqmand-font-weight, var(--font-semibold)); letter-spacing: var(--syn-kpdf-reqmand-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-kpdf-reqmand-text-transform, var(--type-label-transform)); color: var(--syn-kpdf-reqmand-color, var(--text-tertiary)); }
.syn-kpdf-reqremove { border: none; background: transparent; padding: 0; font-size: var(--syn-kpdf-reqremove-font-size, 0.75rem); color: var(--syn-kpdf-reqremove-color, var(--text-faint)); cursor: pointer; }
.syn-kpdf-reqremove:hover { color: var(--syn-kpdf-reqremove-hover-color, var(--text-ink)); }
.syn-kpdf-addreq { border: var(--syn-kpdf-addreq-border, 1px solid var(--border-default)); border-radius: var(--syn-kpdf-addreq-border-radius, var(--shape-radius-control)); padding: var(--syn-kpdf-addreq-padding, 12px); background: var(--syn-kpdf-addreq-background, var(--bg-secondary)); display: flex; flex-direction: column; gap: var(--syn-kpdf-addreq-gap, 8px); }
.syn-kpdf-addreqrow { display: flex; align-items: center; gap: var(--syn-kpdf-addreqrow-gap, 8px); flex-wrap: wrap; }
.syn-kpdf-addreqrow .syn-input { flex: 0 0 180px; }
.syn-kpdf-addreqfoot { margin-top: var(--syn-kpdf-addreqfoot-margin-top, 2px); }
.syn-kpdf-added { font-size: var(--syn-kpdf-added-font-size, 0.71875rem); font-weight: var(--syn-kpdf-added-font-weight, var(--font-medium)); color: var(--syn-kpdf-added-color, var(--state-success)); margin-left: var(--syn-kpdf-added-margin-left, 8px); }
.syn-kpdf-footnote { font-size: var(--syn-kpdf-footnote-font-size, 0.71875rem); color: var(--syn-kpdf-footnote-color, var(--text-faint)); }
.syn-kpw-spinner { width: var(--syn-kpw-spinner-width, 12px); height: var(--syn-kpw-spinner-height, 12px); border-width: var(--syn-kpw-spinner-border-width, 2px); }
/* Q138: the read-only solicitation tab body (interim until the Q140 reader). */
.syn-mc-soltab-read { white-space: pre-wrap; font-size: var(--syn-mc-soltab-read-font-size, 0.8125rem); line-height: var(--syn-mc-soltab-read-line-height, 1.65); color: var(--syn-mc-soltab-read-color, var(--text-body)); }

/* Q140 - the Solicitation tab family (Solicitation.jsx: 4a reader / 6a by-file / 2c files /
   7a-b history / 9a recovery posture). Review amber rides the standing --review tokens/amber. */
.syn-sol { display: flex; flex-direction: column; gap: var(--syn-sol-gap, 12px); }

   the 9b dark pass rides the .dark token swap with zero rules here. */
.syn-sol-fileinput { position: absolute; width: var(--kit-the-token-swap-with-zero-rules-here-syn-sol-fileinput-width, 1px); height: var(--kit-the-token-swap-with-zero-rules-here-syn-sol-fileinput-height, 1px); opacity: var(--kit-the-token-swap-with-zero-rules-here-syn-sol-fileinput-opacity, 0); overflow: hidden; }

   RESERVED slot - zero reflow, doorways never hide (visibility, not display). */

/* HB-E31-1 - the per-requirement ask (E31 lane live): a quiet inline act in the assess line. */
.syn-kpw-rowask { display: inline-flex; align-items: center; gap: var(--kit-reserved-slot-zero-reflow-gap, 4px); border: none; background: transparent; padding: var(--kit-reserved-slot-zero-reflow-padding, 0 2px); font: inherit; font-size: inherit; font-weight: var(--kit-reserved-slot-zero-reflow-font-weight, var(--font-medium)); color: var(--kit-reserved-slot-zero-reflow-color, var(--accent-ai)); cursor: pointer; }
.syn-kpw-rowask:disabled { opacity: var(--syn-kpw-rowask-disabled-opacity, 0.6); cursor: default; }

/* Q142 - the capture port tranche 1 (CaptureCockpit.jsx t3-t22): rail + Overview + Activity.
   Tokens only - dark rides the swap. */
.syn-cpov-alllink { border: none; background: transparent; padding: 0; font-size: var(--syn-cpov-alllink-font-size, 0.75rem); font-weight: var(--syn-cpov-alllink-font-weight, var(--font-medium)); color: var(--syn-cpov-alllink-color, var(--accent-action)); cursor: pointer; font-family: inherit; }
.syn-resolve-chip { display: inline-flex; padding: var(--syn-resolve-chip-padding, 4px 10px); border-radius: var(--syn-resolve-chip-border-radius, var(--radius-sm)); border: var(--syn-resolve-chip-border, 1px dashed var(--border-emphasis)); background: var(--syn-resolve-chip-background, var(--bg-secondary)); font: inherit; font-size: var(--syn-resolve-chip-font-size, 0.71875rem); font-weight: var(--syn-resolve-chip-font-weight, var(--font-medium)); color: var(--syn-resolve-chip-color, var(--text-muted)); cursor: pointer; margin-top: var(--syn-resolve-chip-margin-top, 4px); }
.syn-mc-leadsrow { display: flex; gap: var(--syn-mc-leadsrow-gap, 16px); flex-wrap: wrap; padding: var(--syn-mc-leadsrow-padding, 0 0 12px); font-size: var(--syn-mc-leadsrow-font-size, 0.78125rem); color: var(--syn-mc-leadsrow-color, var(--text-tertiary)); }
.syn-mc-lead { display: inline-flex; align-items: baseline; gap: var(--syn-mc-lead-gap, 6px); }

.syn-mkteam-nda { font-size: var(--syn-mkteam-nda-font-size, 0.71875rem); color: var(--syn-mkteam-nda-color, var(--state-warning)); font-weight: var(--syn-mkteam-nda-font-weight, var(--font-medium)); margin-bottom: var(--syn-mkteam-nda-margin-bottom, 10px); }
.syn-mono { font-family: var(--syn-mono-font-family, var(--type-family-mono)); }
/* Q147 - engagements (the one modal + the timeline block). Tokens only. */
.syn-engmodal-row { display: flex; gap: var(--syn-engmodal-row-gap, 16px); flex-wrap: wrap; }
.syn-engmodal-field { margin-bottom: var(--syn-engmodal-field-margin-bottom, 12px); }
.syn-engmodal-field > .syn-microlabel { display: block; margin-bottom: var(--syn-engmodal-field-microlabel-margin-bottom, 4px); }
.syn-engmodal-hint { text-transform: var(--syn-engmodal-hint-text-transform, none); letter-spacing: 0; font-weight: var(--syn-engmodal-hint-font-weight, var(--font-regular)); color: var(--syn-engmodal-hint-color, var(--text-tertiary)); }
.syn-engmodal-chips { display: flex; gap: var(--syn-engmodal-chips-gap, 6px); flex-wrap: wrap; margin-bottom: var(--syn-engmodal-chips-margin-bottom, 6px); }
.syn-engmodal-chip { display: inline-flex; align-items: center; gap: var(--syn-engmodal-chip-gap, 5px); padding: var(--syn-engmodal-chip-padding, 2px 8px); border: var(--syn-engmodal-chip-border, 1px solid var(--border-default)); border-radius: var(--syn-engmodal-chip-border-radius, var(--radius-sm)); background: var(--syn-engmodal-chip-background, var(--bg-secondary)); font-size: var(--syn-engmodal-chip-font-size, 0.71875rem); color: var(--syn-engmodal-chip-color, var(--text-ink)); }
.syn-engmodal-chipx { border: none; background: transparent; padding: 0; font-size: var(--syn-engmodal-chipx-font-size, 0.65625rem); color: var(--syn-engmodal-chipx-color, var(--text-tertiary)); cursor: pointer; }
.syn-engmodal-objective { font-size: var(--syn-engmodal-objective-font-size, 0.71875rem); color: var(--syn-engmodal-objective-color, var(--text-tertiary)); margin-bottom: var(--syn-engmodal-objective-margin-bottom, 10px); }
.syn-engtl-toolrow { display: flex; margin-bottom: var(--syn-engtl-toolrow-margin-bottom, 6px); }
/* Q347 (A5 org-profile 8.1/8.2 — the 28b run-rail, the person plane's drawn anatomy on the shared
   trail): 7px ringed dot tied by the 1.5px rail (the last row tailless) over an INSET hairline
   seam; the head = the type word 600 ink · the date 500 quiet · the anchor line. */
.syn-engtl-row { position: relative; padding: var(--syn-engtl-row-padding, 9px 0 9px 18px); }
.syn-engtl-row + .syn-engtl-row::before { content: ""; position: absolute; left: var(--syn-engtl-row-engtl-row-before-left, 18px); right: 0; top: 0; height: var(--syn-engtl-row-engtl-row-before-height, 1px); background: var(--syn-engtl-row-engtl-row-before-background, var(--border-hairline)); }
.syn-engtl-dot { position: absolute; left: 0; top: var(--syn-engtl-dot-top, 13px); width: var(--syn-engtl-dot-width, 7px); height: var(--syn-engtl-dot-height, 7px); border-radius: 50%; border: var(--syn-engtl-dot-border, 1.5px solid var(--border-strong)); background: var(--syn-engtl-dot-background, var(--surface-plane)); box-sizing: border-box; }
.syn-engtl-rail { position: absolute; left: var(--syn-engtl-rail-left, 3px); top: var(--syn-engtl-rail-top, 22px); bottom: var(--syn-engtl-rail-bottom, -8px); width: var(--syn-engtl-rail-width, 1.5px); background: var(--syn-engtl-rail-background, var(--border-default)); }
.syn-engtl-row.is-last .syn-engtl-rail { display: none; }
.syn-engtl-identline { display: flex; align-items: baseline; gap: var(--syn-engtl-identline-gap, 10px); flex-wrap: wrap; }
.syn-engtl-type { font-size: var(--syn-engtl-type-font-size, 0.75rem); font-weight: var(--syn-engtl-type-font-weight, var(--font-semibold)); color: var(--syn-engtl-type-color, var(--text-ink)); }
.syn-engtl-date { font-size: var(--syn-engtl-date-font-size, 0.75rem); font-weight: var(--syn-engtl-date-font-weight, var(--font-medium)); color: var(--syn-engtl-date-color, var(--text-tertiary)); }
.syn-engtl-anchor { font-size: var(--syn-engtl-anchor-font-size, 0.71875rem); color: var(--syn-engtl-anchor-color, var(--text-body)); }
.syn-engtl-summary { font-size: var(--syn-engtl-summary-font-size, 0.75rem); color: var(--syn-engtl-summary-color, var(--text-body)); line-height: var(--syn-engtl-summary-line-height, 1.5); margin-top: var(--syn-engtl-summary-margin-top, 3px); max-width: var(--syn-engtl-summary-max-width, 72ch); }
/* QB46 (text-scale C9): a chip/tag is CHROME — px, it never scales with the text setting. */

/* ── Q209 — the R10 SHELL: detail header (16a/20a-iii), list-class heading (14b-1/16b-i), the
   reserved Jane slot, the inline title editor. TRANSPLANTED from
   `design/claude-design/Round 10 Handback/shell/` — every value is the manifest's declared value.
   TEXT-SIZE-LAW classes at port: READING -> rem (title, list title, field text, role facts, stage
   name, error line, provisional label/rider); CHROME -> literal px (vehicle tag, micro-labels, tabs,
   buttons, hold echo, ✦ chip). ── */

/* Detail header: 32px origin, 32px side padding; the page body starts at the tabs' underline. */
.syn-shell-header { flex: none; min-width: 0; padding: var(--syn-shell-header-padding, 32px 32px 0); box-sizing: border-box; font-size: var(--syn-shell-header-font-size, 16px); line-height: normal; }
.syn-shell-header-titlerow { display: flex; align-items: flex-start; gap: var(--syn-shell-header-titlerow-gap, 20px); }
/* Q399 (KF-1, Ken's Q331 rule: the title row's height never changes): while a heading act is ARMED (delete / reset demo)
   the title holds ONE line — the armed row's width would otherwise push a long title onto its second clamp line. */
.syn-shell-header-titlerow.is-armed .syn-shell-header-title { -webkit-line-clamp: 1; }
.syn-shell-header-title { font-weight: var(--syn-shell-header-title-font-weight, 700); font-size: var(--syn-shell-header-title-font-size, 1.5rem); line-height: var(--syn-shell-header-title-line-height, 1.25); font-family: var(--syn-shell-header-title-font-family, var(--type-family)); letter-spacing: var(--syn-shell-header-title-letter-spacing, -0.02em);
                          color: var(--syn-shell-header-title-color, var(--text-ink)); flex: 1; min-width: 0;
                          display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* two-line clamp; full title = tooltip */
.syn-shell-header-title-colon { color: var(--syn-shell-header-title-colon-color, var(--text-faint)); }
/* The whole title line is the click target; hover = the --bg-tertiary lift + ✎ scent (CSS-local by the
   Blazor rule — the wrapper is inline so the two-line clamp still flows; box-decoration-break clones
   the lift across the wrapped line). */
.syn-shell-header-title-hit { display: inline; gap: var(--syn-shell-header-title-hit-gap, 10px); border-radius: var(--syn-shell-header-title-hit-border-radius, var(--radius-sm)); padding: var(--syn-shell-header-title-hit-padding, 4px 8px); margin-left: var(--syn-shell-header-title-hit-margin-left, -8px); cursor: pointer;
                              -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.syn-shell-header-title-hit:hover, .syn-shell-header-title-hit:focus-visible { background: var(--syn-shell-header-title-hit-hover-background, var(--surface-inset)); outline: none; }
.syn-shell-header-title-editscent { font-weight: var(--syn-shell-header-title-editscent-font-weight, 400); font-size: var(--syn-shell-header-title-editscent-font-size, 0.8125rem); line-height: normal; font-family: var(--syn-shell-header-title-editscent-font-family, var(--type-family)); color: var(--syn-shell-header-title-editscent-color, var(--text-faint));
                                    margin-left: var(--syn-shell-header-title-editscent-margin-left, 10px); letter-spacing: 0; visibility: hidden; }
.syn-shell-header-title-hit:hover .syn-shell-header-title-editscent,
.syn-shell-header-title-hit:focus-visible .syn-shell-header-title-editscent { visibility: visible; }
/* The ONE heading action (BUTTONS.md page-level heading-action seat; the calendar-glyph exception). */
/* the heading action rides the page-heading-action SEAT (Q216); only its seat in the row is stated here */
.syn-shell-header-action { flex: none; margin-top: var(--syn-shell-header-action-margin-top, 2px); }

/* The reserved Jane slot: hairline datum + ✦ chip (Ask-Jane seat) — or the empty slot while the panel is open. */
.syn-shell-jane-datum { width: var(--syn-shell-jane-datum-width, 1px); background: var(--syn-shell-jane-datum-background, var(--border-default)); flex: none; }
.syn-shell-jane-datum.is-header { height: var(--syn-shell-jane-datum-is-header-height, 18px); margin-top: var(--syn-shell-jane-datum-is-header-margin-top, 6px); }
.syn-shell-jane-datum.is-list { height: var(--syn-shell-jane-datum-is-list-height, 20px); }
/* Q238 (Ken's prod eyeball, 2026-08-17): the chip is the NAMED form "✦ Jane" (16b option ii RATIFIED; the
   icon-only ✦ was the amended-away option — the comps still draw it icon-only, ruled over). Height, ring,
   radius, field, ink and glyph size are the ratified chip's; the label sits beside the glyph; the empty
   slot mirrors the chip's own anatomy (visibility hidden) so nothing shifts when the panel opens. */
.syn-shell-jane-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--syn-shell-jane-chip-gap, 5px); border: var(--syn-shell-jane-chip-border, 1px solid var(--jane-border-muted));
                       border-radius: var(--syn-shell-jane-chip-border-radius, var(--shape-radius-control)); background: var(--syn-shell-jane-chip-background, var(--surface-plane)); color: var(--syn-shell-jane-chip-color, var(--accent-ai)); flex: none; cursor: pointer; padding: 0;
                       font-family: var(--syn-shell-jane-chip-font-family, var(--type-family)); box-sizing: content-box; white-space: nowrap; }
.syn-shell-jane-chip.is-header { height: var(--syn-shell-jane-chip-is-header-height, 28px); padding: var(--syn-shell-jane-chip-is-header-padding, 0 9px 0 8px); font-size: var(--syn-shell-jane-chip-is-header-font-size, 12px); }     /* the ratified chip's height + glyph size */
.syn-shell-jane-chip.is-list { height: var(--syn-shell-jane-chip-is-list-height, 30px); padding: var(--syn-shell-jane-chip-is-list-padding, 0 10px 0 9px); font-size: var(--syn-shell-jane-chip-is-list-font-size, 13px); }
.syn-shell-jane-chip-label { font-weight: var(--syn-shell-jane-chip-label-font-weight, 500); }                                            /* the NAME: 500, a half-step under the glyph */
.syn-shell-jane-chip.is-header .syn-shell-jane-chip-label { font-size: var(--syn-shell-jane-chip-is-header-shell-jane-chip-label-font-size, 12px); }
.syn-shell-jane-chip.is-list .syn-shell-jane-chip-label { font-size: var(--syn-shell-jane-chip-is-list-shell-jane-chip-label-font-size, 12.5px); }
.syn-shell-jane-chip:hover { background: var(--syn-shell-jane-chip-hover-background, var(--accent-ai-tint)); }

/* Meta line: vehicle (mono registry-token seat) · stage · hairline · [On hold] · four labeled roles. */
.syn-shell-header-meta { display: flex; align-items: center; gap: var(--syn-shell-header-meta-gap, 14px); margin-top: var(--syn-shell-header-meta-margin-top, 10px); flex-wrap: wrap; }
.syn-shell-header-vehicle { font-weight: var(--syn-shell-header-vehicle-font-weight, 600); font-size: var(--syn-shell-header-vehicle-font-size, 9.5px); font-family: var(--syn-shell-header-vehicle-font-family, var(--type-family-mono)); letter-spacing: var(--syn-shell-header-vehicle-letter-spacing, .06em); color: var(--syn-shell-header-vehicle-color, var(--text-tertiary));
                            border: var(--syn-shell-header-vehicle-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-shell-header-vehicle-border-radius, var(--radius-xs-plus)); padding: var(--syn-shell-header-vehicle-padding, 2px 6px); background: var(--syn-shell-header-vehicle-background, var(--surface-hover)); white-space: nowrap; }
.syn-shell-header-stage { display: inline-flex; align-items: center; gap: var(--syn-shell-header-stage-gap, 6px); }
.syn-shell-header-stage-dot { width: var(--syn-shell-header-stage-dot-width, 7px); height: var(--syn-shell-header-stage-dot-height, 7px); border-radius: 50%; display: inline-block; }
.syn-shell-header-stage-name { font-weight: var(--syn-shell-header-stage-name-font-weight, 600); font-size: var(--syn-shell-header-stage-name-font-size, 0.75rem); font-family: var(--syn-shell-header-stage-name-font-family, var(--type-family)); color: var(--syn-shell-header-stage-name-color, var(--text-ink)); }
.syn-shell-header-meta-divider { width: var(--syn-shell-header-meta-divider-width, 1px); height: var(--syn-shell-header-meta-divider-height, 14px); background: var(--syn-shell-header-meta-divider-background, var(--border-emphasis)); }
.syn-shell-header-hold-echo { font-weight: var(--syn-shell-header-hold-echo-font-weight, 600); font-size: var(--syn-shell-header-hold-echo-font-size, 12px); font-family: var(--syn-shell-header-hold-echo-font-family, var(--type-family)); color: var(--syn-shell-header-hold-echo-color, var(--state-warning-text)); }
.syn-shell-header-roles { display: flex; align-items: baseline; gap: var(--syn-shell-header-roles-gap, 22px); flex-wrap: wrap; }
.syn-shell-header-role { display: inline-flex; align-items: baseline; gap: var(--syn-shell-header-role-gap, 6px); }
.syn-shell-header-role-label { font-weight: var(--syn-shell-header-role-label-font-weight, 400); font-size: var(--syn-shell-header-role-label-font-size, 0.75rem); font-family: var(--syn-shell-header-role-label-font-family, var(--type-family)); color: var(--syn-shell-header-role-label-color, var(--text-tertiary)); white-space: nowrap; }
.syn-shell-header-role .syn-ref { font-weight: var(--syn-shell-header-role-ref-font-weight, 500); font-size: var(--syn-shell-header-role-ref-font-size, 0.75rem); font-family: var(--syn-shell-header-role-ref-font-family, var(--type-family)); color: var(--syn-shell-header-role-ref-color, var(--accent-action)); text-decoration: var(--syn-shell-header-role-ref-text-decoration, none); }
.syn-shell-header-role .syn-ref:hover { color: var(--syn-shell-header-role-ref-hover-color, var(--accent-action-hover)); text-decoration: var(--syn-shell-header-role-ref-hover-text-decoration, underline); }
.syn-shell-header-role-unassigned { appearance: none; background: none; border: none; padding: 0; margin: 0; cursor: pointer;
                                    font-weight: var(--syn-shell-header-role-unassigned-font-weight, 400); font-size: var(--syn-shell-header-role-unassigned-font-size, 0.75rem); font-family: var(--syn-shell-header-role-unassigned-font-family, var(--type-family)); color: var(--syn-shell-header-role-unassigned-color, var(--text-faint)); font-style: var(--syn-shell-header-role-unassigned-font-style, italic); }
.syn-shell-header-role-unassigned:hover { color: var(--syn-shell-header-role-unassigned-hover-color, var(--text-muted)); }

/* Tabs: 22px gap, 16px above, the hairline underline; active = 600 ink + 2px ink rule (−1px overlap). */
/* Q278 (a) — the RENDERED underline lie fixed by MEASUREMENT: the row was overflow-x:auto (which
   clips Y too), and the comp's own −1px overlap anatomy sinks the active tab's 2px underline into
   the row's BORDER AREA — outside the padding box, so the scroll clip ate its bottom pixel and
   the comp's 2px rendered as 1. The scroll now lives on the WRAPPER (.syn-shell-header-tabscroll):
   the sunk pixel stays inside the tabs element's border-box = inside the wrapper's content —
   nothing clips, and every pinned declaration (the 1px band border, the −1px overlap, the 2px
   ink) stands exactly as the comp draws it. */
.syn-shell-header-tabscroll { overflow-x: auto; margin-top: var(--syn-shell-header-tabscroll-margin-top, 16px); }
.syn-shell-header-tabs { display: flex; gap: var(--syn-shell-header-tabs-gap, 22px); border-bottom: var(--syn-shell-header-tabs-border-bottom, 1px solid var(--border-default)); white-space: nowrap; }
.syn-shell-header-tab { font-weight: var(--syn-shell-header-tab-font-weight, 500); font-size: var(--syn-shell-header-tab-font-size, 13px); font-family: var(--syn-shell-header-tab-font-family, var(--type-family)); color: var(--syn-shell-header-tab-color, var(--text-tertiary)); padding-bottom: var(--syn-shell-header-tab-padding-bottom, 9px);
                        text-decoration: var(--syn-shell-header-tab-text-decoration, none); flex: none; border-bottom: var(--syn-shell-header-tab-border-bottom, 2px solid transparent); margin-bottom: var(--syn-shell-header-tab-margin-bottom, -1px); }
/* Q335(a) (Ken's fourth look): a HOVERED tab takes the ACTIVE anatomy's underline — the same 2px
   rule in the same seat — in a differentiated register: --border-strong (a quiet ink, not the
   active's --text-primary) with the ink lift; the bare text-underline the global `a:hover` canon
   painted under the label is killed here (the rule IS the tab's underline). The active tab keeps
   its ink underline on hover (the later rule wins at equal specificity). */
.syn-shell-header-tab:hover { color: var(--syn-shell-header-tab-hover-color, var(--text-ink)); text-decoration: var(--syn-shell-header-tab-hover-text-decoration, none); border-bottom-color: var(--syn-shell-header-tab-hover-border-bottom-color, var(--border-strong)); }
.syn-shell-header-tab.is-active { font-weight: var(--syn-shell-header-tab-is-active-font-weight, 600); color: var(--syn-shell-header-tab-is-active-color, var(--text-ink)); border-bottom-color: var(--syn-shell-header-tab-is-active-border-bottom-color, var(--text-ink)); }

/* The inline title editor (16a): number (single token, 72px) + title (auto-grows, never truncates);
   Cancel/Save = the commit pair (Cancel LEFT, ink primary RIGHT); the provisional toggle row. */
.syn-shell-titleeditor { }
.syn-shell-titleeditor-fields { display: flex; gap: var(--syn-shell-titleeditor-fields-gap, 10px); align-items: flex-start; }
.syn-shell-titleeditor-col { display: flex; flex-direction: column; gap: var(--syn-shell-titleeditor-col-gap, 4px); }
.syn-shell-titleeditor-col.is-number { flex: none; }
.syn-shell-titleeditor-col.is-title { flex: 1; min-width: 0; }
.syn-shell-titleeditor-label { font-weight: var(--syn-shell-titleeditor-label-font-weight, 600); font-size: var(--syn-shell-titleeditor-label-font-size, 9.5px); font-family: var(--syn-shell-titleeditor-label-font-family, var(--type-family)); letter-spacing: var(--syn-shell-titleeditor-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-shell-titleeditor-label-text-transform, var(--type-label-transform)); color: var(--syn-shell-titleeditor-label-color, var(--text-faint)); }
.syn-shell-titleeditor-number-field { width: var(--syn-shell-titleeditor-number-field-width, 72px); background: var(--syn-shell-titleeditor-number-field-background, var(--surface-plane)); border: var(--syn-shell-titleeditor-number-field-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-shell-titleeditor-number-field-border-radius, var(--radius-nav)); padding: var(--syn-shell-titleeditor-number-field-padding, 7px 10px);
                                      font-weight: var(--syn-shell-titleeditor-number-field-font-weight, 600); font-size: var(--syn-shell-titleeditor-number-field-font-size, 0.9375rem); font-family: var(--syn-shell-titleeditor-number-field-font-family, var(--type-family)); color: var(--syn-shell-titleeditor-number-field-color, var(--text-ink)); box-sizing: content-box; line-height: normal; }
.syn-shell-titleeditor-number-field.is-invalid, .syn-shell-titleeditor-number-field[data-invalid] { border: var(--syn-shell-titleeditor-number-field-is-invalid-border, 1.5px solid var(--state-attention-text)); }
.syn-shell-titleeditor-number-field.is-locked, .syn-shell-titleeditor-number-field:disabled { background: var(--syn-shell-titleeditor-number-field-is-locked-background, var(--surface-hover)); color: var(--syn-shell-titleeditor-number-field-is-locked-color, var(--text-tertiary)); }
.syn-shell-titleeditor-title-field { background: var(--syn-shell-titleeditor-title-field-background, var(--surface-plane)); border: var(--syn-shell-titleeditor-title-field-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-shell-titleeditor-title-field-border-radius, var(--radius-nav)); padding: var(--syn-shell-titleeditor-title-field-padding, 7px 10px);
                                     font-weight: var(--syn-shell-titleeditor-title-field-font-weight, 600); font-size: var(--syn-shell-titleeditor-title-field-font-size, 0.9375rem); line-height: var(--syn-shell-titleeditor-title-field-line-height, 1.4); font-family: var(--syn-shell-titleeditor-title-field-font-family, var(--type-family)); color: var(--syn-shell-titleeditor-title-field-color, var(--text-ink));
                                     width: 100%; box-sizing: border-box; resize: none; overflow: hidden; display: block; }
.syn-shell-titleeditor-number-field:focus, .syn-shell-titleeditor-title-field:focus { outline: none; }   /* arming IS the focus signal (16a draws no focus ring) */
.syn-shell-titleeditor-number-field::placeholder, .syn-shell-titleeditor-title-field::placeholder { color: var(--syn-shell-titleeditor-number-field-placeholder-color, var(--text-faint)); font-weight: var(--syn-shell-titleeditor-number-field-placeholder-font-weight, 400); }
.syn-shell-titleeditor-error { font-weight: var(--syn-shell-titleeditor-error-font-weight, 400); font-size: var(--syn-shell-titleeditor-error-font-size, 0.71875rem); font-family: var(--syn-shell-titleeditor-error-font-family, var(--type-family)); color: var(--syn-shell-titleeditor-error-color, var(--state-attention-text)); margin-top: var(--syn-shell-titleeditor-error-margin-top, 6px); }
.syn-shell-titleeditor-error[hidden] { display: none; }
.syn-shell-titleeditor-provrow { display: flex; align-items: center; gap: var(--syn-shell-titleeditor-provrow-gap, 8px); margin-top: var(--syn-shell-titleeditor-provrow-margin-top, 9px); }
/* The canonical ToggleSwitch at this seat wears the drawn 26×15 ink form (r8; 11px surface knob). */
.syn-switch.syn-shell-titleeditor-provisional-toggle { width: var(--syn-switch-shell-titleeditor-provisional-toggle-width, 26px); height: var(--syn-switch-shell-titleeditor-provisional-toggle-height, 15px); border-radius: var(--syn-switch-shell-titleeditor-provisional-toggle-border-radius, var(--shape-radius-control)); padding: 0; position: relative; display: inline-block; flex: none; color: inherit; }
.syn-switch.syn-shell-titleeditor-provisional-toggle.is-on { background: var(--syn-switch-shell-titleeditor-provisional-toggle-is-on-background, var(--text-ink)); }
.syn-switch.syn-shell-titleeditor-provisional-toggle > span { position: absolute; top: var(--syn-switch-shell-titleeditor-provisional-toggle-span-top, 2px); left: var(--syn-switch-shell-titleeditor-provisional-toggle-span-left, 2px); width: var(--syn-switch-shell-titleeditor-provisional-toggle-span-width, 11px); height: var(--syn-switch-shell-titleeditor-provisional-toggle-span-height, 11px); border-radius: 50%; background: var(--syn-switch-shell-titleeditor-provisional-toggle-span-background, var(--surface-plane)); }
.syn-switch.syn-shell-titleeditor-provisional-toggle.is-on > span { left: auto; right: var(--kit-switch-shell-titleeditor-provisional-toggle-is-on-span-right, 2px); }
.syn-shell-titleeditor-provisional-label { font-weight: var(--syn-shell-titleeditor-provisional-label-font-weight, 500); font-size: var(--syn-shell-titleeditor-provisional-label-font-size, 0.75rem); font-family: var(--syn-shell-titleeditor-provisional-label-font-family, var(--type-family)); color: var(--syn-shell-titleeditor-provisional-label-color, var(--text-ink)); }
.syn-shell-titleeditor-provisional-rider { font-weight: var(--syn-shell-titleeditor-provisional-rider-font-weight, 400); font-size: var(--syn-shell-titleeditor-provisional-rider-font-size, 0.71875rem); font-family: var(--syn-shell-titleeditor-provisional-rider-font-family, var(--type-family)); color: var(--syn-shell-titleeditor-provisional-rider-color, var(--text-tertiary)); }
.syn-shell-titleeditor-acts { margin-top: var(--syn-shell-titleeditor-acts-margin-top, 10px); }   /* the row itself is ActRow (commit pair: gap 10, right-aligned) */
/* Cancel / Save ride the quiet-text and primary-ink-inline SEATS (Q216; the commit-pair species: Cancel LEFT, ink RIGHT) */

/* List-class heading (14b-1 · 16b-i · 20a-iii) at the 32px origin; the ink creator action; datum; Jane
   slot. Subtitle/context lines render only when the page declares them.
   Q358 (Relay 33 §8, THE TYPE RAMP LAW): the title binds R1 700 24px/1.25 — SUPERSEDES the drawn 700
   30px/1.1 (20a-iii; every page title is one R1 seat, the MC header value); subtitle = R2; the context
   line = C5 (CHROME — it was on the rem ramp; the ±0.75px consolidation sweep re-classes it to px). */
.syn-shell-listheading { padding: var(--syn-shell-listheading-padding, 32px 32px 0); font-size: var(--syn-shell-listheading-font-size, 16px); line-height: normal; }
.syn-shell-listheading-row { display: flex; align-items: center; gap: var(--syn-shell-listheading-row-gap, 10px); }
.syn-shell-listheading-row.has-lines { align-items: flex-start; }
.syn-shell-listheading-titles { min-width: 0; }
.syn-shell-listheading-title { margin: 0; font: var(--syn-shell-listheading-title-font, var(--type-r1)); letter-spacing: var(--syn-shell-listheading-title-letter-spacing, var(--type-title-tracking)); color: var(--syn-shell-listheading-title-color, var(--text-ink)); }
.syn-shell-listheading-subtitle { font: var(--syn-shell-listheading-subtitle-font, var(--type-r2)); color: var(--syn-shell-listheading-subtitle-color, var(--text-muted)); margin-top: var(--syn-shell-listheading-subtitle-margin-top, 6px); }
.syn-shell-listheading-context { font: var(--syn-shell-listheading-context-font, var(--type-c5)); color: var(--syn-shell-listheading-context-color, var(--text-tertiary)); margin-top: var(--syn-shell-listheading-context-margin-top, 6px); }
.syn-shell-listheading-spacer { flex: 1; }
/* the creator action rides the primary-ink SEAT (Q216) */
.syn-shell-listheading-action { flex: none; }
.syn-shell-listheading-row.has-lines .syn-shell-listheading-action { margin-top: var(--kit-listheading-row-has-lines-shell-listheading-action-margin-top, 2px); }
.syn-shell-listheading-row.has-lines .syn-shell-jane-datum.is-list { margin-top: var(--kit-listheading-row-has-lines-shell-jane-datum-is-list-margin-top, 7px); }

/* ══ Q262 — mc-snapshots: the SUBMISSION RECEIPTS tab (R10 24a RATIFIED WHOLE 2026-08-16 + 7a/7b). Values are the
   comp's inline styles verbatim. CHROME class: the mono masthead/eyebrows/barcode/identity/stamps; READING class:
   title, facts, note (rem). Dark derives from tokens (margin registers: early --pwin-strong, late --overdue). ══ */
/* the tab body sits at the R10 origin (20/32/28 from the plane's edge); the pre-R10 .syn-mc-body pads 22/28 — re-based here */
.syn-rcpt-tab { margin: var(--syn-rcpt-tab-margin, -22px -28px -60px); padding: var(--syn-rcpt-tab-padding, 20px 32px 28px); }
.syn-rcpt-headrow { display: flex; align-items: center; gap: var(--syn-rcpt-headrow-gap, 8px); min-height: var(--syn-rcpt-headrow-min-height, 27px); }
.syn-rcpt-headlabel { font: var(--syn-rcpt-headlabel-font, 600 10px var(--type-family)); letter-spacing: var(--syn-rcpt-headlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-rcpt-headlabel-text-transform, var(--type-label-transform)); color: var(--syn-rcpt-headlabel-color, var(--text-tertiary)); }
.syn-rcpt-headmeta { font: var(--syn-rcpt-headmeta-font, 400 11.5px var(--type-family)); color: var(--syn-rcpt-headmeta-color, var(--text-faint)); }
.syn-rcpt-empty { margin: var(--syn-rcpt-empty-margin, 12px 0 0); font-size: var(--syn-rcpt-empty-font-size, 0.8125rem); color: var(--syn-rcpt-empty-color, var(--text-tertiary)); }
.syn-rcpt-roster { margin-top: var(--syn-rcpt-roster-margin-top, 12px); display: flex; gap: var(--syn-rcpt-roster-gap, 20px); align-items: flex-start; flex-wrap: wrap; }
/* the door seats: "Record submission" (surface / --border-default r7 6/14 500 12 --text-primary) · the quiet doors
   ("+ New submission receipt", "Edit receipt": r7 4/11 500 11.5 --text-body) */
.syn-rcpt-doorbtn { border: var(--syn-rcpt-doorbtn-border, 1px solid var(--border-default)); border-radius: var(--syn-rcpt-doorbtn-border-radius, var(--radius-nav)); background: var(--syn-rcpt-doorbtn-background, var(--surface-plane)); padding: var(--syn-rcpt-doorbtn-padding, 6px 14px); font: var(--syn-rcpt-doorbtn-font, 500 12px var(--type-family)); color: var(--syn-rcpt-doorbtn-color, var(--text-ink)); cursor: pointer; white-space: nowrap; }
/* Q336: the heading-row door is a SECTION-LINE door (BUTTONS.md seat table) — transparent field,
   --border-default, --text-body 500 11.5px; the surface field was the pre-12k white-on-the-line drift. */
.syn-rcpt-doorbtn.is-quiet { padding: var(--syn-rcpt-doorbtn-is-quiet-padding, 4px 11px); font-size: var(--syn-rcpt-doorbtn-is-quiet-font-size, 11.5px); color: var(--syn-rcpt-doorbtn-is-quiet-color, var(--text-body)); background: transparent; }
.syn-rcpt-doorbtn:hover:not(:disabled) { background: var(--syn-rcpt-doorbtn-hover-not-disabled-background, var(--surface-hover)); }
.syn-rcpt-doorbtn:disabled { color: var(--syn-rcpt-doorbtn-disabled-color, var(--text-faint)); cursor: default; }

/* THE SLIP — 320px; awaiting = 1.5px dashed --border-emphasis r2 pad 20/22 gap 12; submitted = the printed paper
   (--surface, the paper shadow, square-cut, pad 20/22/12) inside a plane whose foot is the torn edge */
.syn-rcpt-plane { width: var(--syn-rcpt-plane-width, 320px); flex: none; display: flex; flex-direction: column; }
.syn-rcpt-slip { box-sizing: border-box; width: var(--syn-rcpt-slip-width, 320px); flex: none; display: flex; flex-direction: column; gap: var(--syn-rcpt-slip-gap, 12px); align-self: flex-start; }
.syn-rcpt-slip.is-awaiting { border: var(--syn-rcpt-slip-is-awaiting-border, 1.5px dashed var(--border-emphasis)); border-radius: var(--syn-rcpt-slip-is-awaiting-border-radius, var(--radius-2xs)); padding: var(--syn-rcpt-slip-is-awaiting-padding, 20px 22px); }
.syn-rcpt-slip.is-submitted { background: var(--syn-rcpt-slip-is-submitted-background, var(--surface-plane)); box-shadow: var(--syn-rcpt-slip-is-submitted-box-shadow, var(--shadow-receipt)); padding: var(--syn-rcpt-slip-is-submitted-padding, 20px 22px 12px); }
.syn-rcpt-head { text-align: center; }
.syn-rcpt-eyebrow { font: var(--syn-rcpt-eyebrow-font, 600 9.5px var(--type-family-mono)); letter-spacing: var(--syn-rcpt-eyebrow-letter-spacing, .18em); color: var(--syn-rcpt-eyebrow-color, var(--text-faint)); }
.syn-rcpt-eyebrow.is-inked { color: var(--syn-rcpt-eyebrow-is-inked-color, var(--text-tertiary)); }
.syn-rcpt-title { font: var(--syn-rcpt-title-font, var(--type-t2)); line-height: inherit; color: var(--syn-rcpt-title-color, var(--text-ink)); margin-top: var(--syn-rcpt-title-margin-top, 6px); }   /* UD24: T2 plate-title (700 16) */
.syn-rcpt-subtitle { font: var(--syn-rcpt-subtitle-font, 400 0.71875rem var(--type-family)); color: var(--syn-rcpt-subtitle-color, var(--text-tertiary)); margin-top: var(--syn-rcpt-subtitle-margin-top, 2px); }   /* UD3: READING (the file's own declared split, executed) */
.syn-rcpt-rule { border-top: var(--syn-rcpt-rule-border-top, 1px dashed var(--border-emphasis)); }
.syn-rcpt-stamp { text-align: center; }
.syn-rcpt-stamplabel { font: var(--syn-rcpt-stamplabel-font, 600 8.5px var(--type-family)); letter-spacing: var(--syn-rcpt-stamplabel-letter-spacing, var(--type-label-tracking)); color: var(--syn-rcpt-stamplabel-color, var(--text-faint)); text-transform: var(--syn-rcpt-stamplabel-text-transform, var(--type-label-transform)); }
.syn-rcpt-stampvalue { font: var(--syn-rcpt-stampvalue-font, 700 14px var(--type-family-mono)); color: var(--syn-rcpt-stampvalue-color, var(--text-body)); margin-top: var(--syn-rcpt-stampvalue-margin-top, 3px); }
.syn-rcpt-stampvalue.is-decision { font-size: var(--syn-rcpt-stampvalue-is-decision-font-size, 14.5px); color: var(--syn-rcpt-stampvalue-is-decision-color, var(--text-ink)); }
/* Q273 F-4: the ruled vacancy register on an unset DUE — italic disabled, never a dash. */
.syn-rcpt-stampvalue.is-unset { font-style: var(--syn-rcpt-stampvalue-is-unset-font-style, italic); font-weight: var(--syn-rcpt-stampvalue-is-unset-font-weight, 400); color: var(--syn-rcpt-stampvalue-is-unset-color, var(--text-faint)); }
.syn-rcpt-status { font: var(--syn-rcpt-status-font, 400 11.5px var(--type-family)); color: var(--syn-rcpt-status-color, var(--text-tertiary)); margin-top: var(--syn-rcpt-status-margin-top, 3px); }
.syn-rcpt-margin { font: var(--syn-rcpt-margin-font, 600 10.5px var(--type-family)); margin-top: var(--syn-rcpt-margin-margin-top, 3px); }
.syn-rcpt-margin.is-early { color: var(--syn-rcpt-margin-is-early-color, var(--pwin-strong)); }
.syn-rcpt-margin.is-late { color: var(--syn-rcpt-margin-is-late-color, var(--state-attention-text)); }
.syn-rcpt-imgslot { border: var(--syn-rcpt-imgslot-border, 1.5px dashed var(--border-default)); height: var(--syn-rcpt-imgslot-height, 104px); display: flex; align-items: center; justify-content: center; font: var(--syn-rcpt-imgslot-font, 400 0.65625rem var(--type-family)); color: var(--syn-rcpt-imgslot-color, var(--text-faint)); text-align: center; padding: var(--syn-rcpt-imgslot-padding, 0 20px); box-sizing: border-box; }   /* UD3: READING helper */
.syn-rcpt-imgslot.is-missing { border-style: var(--syn-rcpt-imgslot-is-missing-border-style, solid); border-color: var(--syn-rcpt-imgslot-is-missing-border-color, var(--border-emphasis)); background: var(--syn-rcpt-imgslot-is-missing-background, var(--surface-inset)); color: var(--syn-rcpt-imgslot-is-missing-color, var(--text-tertiary)); height: var(--syn-rcpt-imgslot-is-missing-height, 140px); }
.syn-rcpt-hero { display: block; padding: 0; border: var(--syn-rcpt-hero-border, 1px solid var(--border-emphasis)); background: var(--syn-rcpt-hero-background, var(--surface-inset)); cursor: zoom-in; min-height: var(--syn-rcpt-hero-min-height, 140px); max-height: var(--syn-rcpt-hero-max-height, 260px); overflow: hidden; }
.syn-rcpt-hero img { display: block; width: 100%; height: auto; max-height: var(--syn-rcpt-hero-img-max-height, 260px); object-fit: contain; }
.syn-rcpt-door { display: flex; justify-content: center; }
.syn-rcpt-facts { display: flex; flex-direction: column; gap: var(--syn-rcpt-facts-gap, 6px); }
.syn-rcpt-fact { display: flex; align-items: baseline; gap: var(--syn-rcpt-fact-gap, 8px); }
.syn-rcpt-factlabel { font: var(--syn-rcpt-factlabel-font, 600 8.5px var(--type-family)); letter-spacing: var(--syn-rcpt-factlabel-letter-spacing, var(--type-label-tracking)); text-transform: var(--syn-rcpt-factlabel-text-transform, var(--type-label-transform)); color: var(--syn-rcpt-factlabel-color, var(--text-tertiary)); flex: none; }
.syn-rcpt-leader { flex: 1; border-bottom: var(--syn-rcpt-leader-border-bottom, 1px dotted var(--border-emphasis)); transform: translateY(-2px); }
.syn-rcpt-factvalue { font: var(--syn-rcpt-factvalue-font, 500 0.71875rem var(--type-family)); color: var(--syn-rcpt-factvalue-color, var(--text-ink)); text-align: right; }   /* UD3: READING */
.syn-rcpt-snaplink { color: var(--syn-rcpt-snaplink-color, var(--accent-action)); font-size: var(--syn-rcpt-snaplink-font-size, 0.71875rem); text-decoration: var(--syn-rcpt-snaplink-text-decoration, none); }
.syn-rcpt-snaplink:hover { text-decoration: var(--syn-rcpt-snaplink-hover-text-decoration, underline); }
.syn-rcpt-quiet { color: var(--syn-rcpt-quiet-color, var(--text-faint)); font-weight: var(--syn-rcpt-quiet-font-weight, 400); }
.syn-rcpt-notetext { font: var(--syn-rcpt-notetext-font, 400 0.71875rem/1.5 var(--type-family)); color: var(--syn-rcpt-notetext-color, var(--text-body)); margin-top: var(--syn-rcpt-notetext-margin-top, 2px); }   /* UD3: READING */
.syn-rcpt-barcode { display: flex; flex-direction: column; align-items: center; gap: var(--syn-rcpt-barcode-gap, 4px); padding: var(--syn-rcpt-barcode-padding, 2px 0); }
.syn-rcpt-bars { height: var(--syn-rcpt-bars-height, 24px); width: var(--syn-rcpt-bars-width, 150px); background: var(--syn-rcpt-bars-background, repeating-linear-gradient(90deg, var(--text-ink) 0 2px, transparent 2px 5px, var(--text-ink) 5px 6px, transparent 6px 9px)); }
.syn-rcpt-identity { font: var(--syn-rcpt-identity-font, 500 8.5px var(--type-family-mono)); letter-spacing: var(--syn-rcpt-identity-letter-spacing, .14em); color: var(--syn-rcpt-identity-color, var(--text-tertiary)); }
/* the TORN EDGE — the paper's own chrome (the comp's --surface sawtooth against the canvas) */
.syn-rcpt-tear { height: var(--syn-rcpt-tear-height, 14px); background: var(--syn-rcpt-tear-background, linear-gradient(-45deg, var(--surface-plane) 7px, transparent 0), linear-gradient(45deg, var(--surface-plane) 7px, transparent 0)); background-position: left top; background-repeat: repeat-x; background-size: var(--syn-rcpt-tear-background-size, 14px 14px); }
.syn-rcpt-offpaper { display: flex; align-items: center; justify-content: center; gap: var(--syn-rcpt-offpaper-gap, 10px); margin-top: var(--syn-rcpt-offpaper-margin-top, 8px); }
.syn-rcpt-editstamp { font: var(--syn-rcpt-editstamp-font, 400 10.5px var(--type-family)); color: var(--syn-rcpt-editstamp-color, var(--text-faint)); }
.syn-rcpt-zoom img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* THE RECORDING CEREMONY (24a): fields gap 9 · labels 600 9.5 .08em uppercase --text-tertiary mb3 · inputs
   --border-emphasis r7 6/10 12px · helpers 400 10.5 --text-disabled · the dashed receipt slot 1.5px --border-emphasis
   r7 14/10 11 --text-tertiary centered · the freeze note --tinted-inset / --border-row r6 7/10 400 10.5/1.5 tertiary */
.syn-rcpt-form { display: flex; flex-direction: column; gap: var(--syn-rcpt-form-gap, 9px); }
.syn-rcpt-field { display: flex; flex-direction: column; }
.syn-rcpt-label { font-size: var(--syn-rcpt-label-font-size, 9.5px); font-weight: var(--syn-rcpt-label-font-weight, 600); letter-spacing: var(--syn-rcpt-label-letter-spacing, var(--type-label-tracking)); color: var(--syn-rcpt-label-color, var(--text-tertiary)); text-transform: var(--syn-rcpt-label-text-transform, var(--type-label-transform)); margin-bottom: var(--syn-rcpt-label-margin-bottom, 3px); }
.syn-rcpt-help { font: var(--syn-rcpt-help-font, 400 10.5px var(--type-family)); color: var(--syn-rcpt-help-color, var(--text-faint)); margin-top: var(--syn-rcpt-help-margin-top, 2px); }
.syn-rcpt-drop { position: relative; border: var(--syn-rcpt-drop-border, 1.5px dashed var(--border-emphasis)); border-radius: var(--syn-rcpt-drop-border-radius, var(--radius-nav)); padding: var(--syn-rcpt-drop-padding, 14px 10px); font-size: var(--syn-rcpt-drop-font-size, 11.5px); color: var(--syn-rcpt-drop-color, var(--text-tertiary)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--syn-rcpt-drop-gap, 8px); }
.syn-rcpt-drop.is-over { border-color: var(--syn-rcpt-drop-is-over-border-color, var(--text-ink)); background: var(--syn-rcpt-drop-is-over-background, var(--surface-hover)); }
.syn-rcpt-drop.has-image { padding: var(--syn-rcpt-drop-has-image-padding, 8px); }
.syn-rcpt-drop-copy { cursor: pointer; }
.syn-rcpt-drop-preview { display: block; max-width: 100%; max-height: var(--syn-rcpt-drop-preview-max-height, 160px); object-fit: contain; border: var(--syn-rcpt-drop-preview-border, 1px solid var(--border-default)); }
.syn-rcpt-drop-acts { display: flex; gap: var(--syn-rcpt-drop-acts-gap, 12px); }
.syn-rcpt-drop-replace, .syn-rcpt-drop-remove { border: none; background: none; padding: 0; font: var(--syn-rcpt-drop-replace-font, 500 11.5px var(--type-family)); color: var(--syn-rcpt-drop-replace-color, var(--accent-action)); cursor: pointer; }
.syn-rcpt-drop-remove { color: var(--syn-rcpt-drop-remove-color, var(--state-attention-text)); }
.syn-rcpt-fileinput { position: absolute; width: var(--syn-rcpt-fileinput-width, 1px); height: var(--syn-rcpt-fileinput-height, 1px); opacity: var(--syn-rcpt-fileinput-opacity, 0); overflow: hidden; pointer-events: none; }
.syn-rcpt-freezenote { margin-top: var(--syn-rcpt-freezenote-margin-top, 11px); font: var(--syn-rcpt-freezenote-font, 400 10.5px/1.5 var(--type-family)); color: var(--syn-rcpt-freezenote-color, var(--text-tertiary)); background: var(--syn-rcpt-freezenote-background, var(--tinted-inset)); border: var(--syn-rcpt-freezenote-border, 1px solid var(--border-hairline)); border-radius: var(--syn-rcpt-freezenote-border-radius, var(--radius-sm)); padding: var(--syn-rcpt-freezenote-padding, 7px 10px); }
.syn-rcpt-confirm { display: flex; align-items: center; gap: var(--syn-rcpt-confirm-gap, 10px); width: 100%; }
.syn-rcpt-confirm-text { flex: 1; font-size: var(--syn-rcpt-confirm-text-font-size, 0.75rem); line-height: var(--syn-rcpt-confirm-text-line-height, 1.4); color: var(--syn-rcpt-confirm-text-color, var(--text-body)); }
.syn-rcpt-dx .syn-modal-foot { justify-content: flex-start; }

/* THE FROZEN VIEWER's 5-1 rows (7b): name 600 12.5 · meta 11 tertiary · spacer · the right seat (LCAT 10.5 tertiary /
   UEI mono 10 tertiary); the header clause 10.5 tertiary with the date bold --text-body */
.syn-snap-clause { font-size: var(--syn-snap-clause-font-size, 10.5px); color: var(--syn-snap-clause-color, var(--text-tertiary)); margin-top: var(--syn-snap-clause-margin-top, 2px); }
.syn-snap-clause b { color: var(--syn-snap-clause-b-color, var(--text-body)); font-weight: var(--syn-snap-clause-b-font-weight, 600); }
.syn-snap-row { display: flex; align-items: baseline; gap: var(--syn-snap-row-gap, 8px); padding: var(--syn-snap-row-padding, 4px 0); }
.syn-snap-rowname { font-size: var(--syn-snap-rowname-font-size, 12.5px); font-weight: var(--syn-snap-rowname-font-weight, 600); color: var(--syn-snap-rowname-color, var(--text-ink)); }
.syn-snap-rowmeta { font-size: var(--syn-snap-rowmeta-font-size, 11.5px); color: var(--syn-snap-rowmeta-color, var(--text-tertiary)); }
.syn-snap-rowlcat { font-size: var(--syn-snap-rowlcat-font-size, 10.5px); color: var(--syn-snap-rowlcat-color, var(--text-tertiary)); }
.syn-snap-rowmono { font-family: var(--syn-snap-rowmono-font-family, var(--type-family-mono)); font-size: var(--syn-snap-rowmono-font-size, 10px); color: var(--syn-snap-rowmono-color, var(--text-tertiary)); }

/* ---- SignatureCapture + GeoPointEditor (C6 p-evidence; APP-FACTORY.md 4.5, [AF-78], [AF-43]) ---------------- */
.syn-signature { display: flex; flex-direction: column; gap: var(--syn-signature-gap, var(--space-2)); max-width: var(--syn-signature-max-width, 480px); }
.syn-signature-intent { margin: 0; font: var(--syn-signature-intent-font, var(--type-r6)); color: var(--syn-signature-intent-color, var(--text-ink)); }
.syn-signature-pad { display: block; width: 100%; aspect-ratio: 3 / 1; border: var(--syn-signature-pad-border, 1px dashed var(--border-emphasis)); border-radius: var(--syn-signature-pad-border-radius, var(--shape-radius-control)); background: var(--syn-signature-pad-background, var(--surface-plane)); color: var(--syn-signature-pad-color, var(--text-ink)); touch-action: none; cursor: crosshair; }
.syn-signature-pad:focus { outline: none; border-color: var(--syn-signature-pad-focus-border-color, var(--accent-action)); box-shadow: var(--syn-signature-pad-focus-box-shadow, var(--accent-ring)); }
.syn-signature-typed { display: flex; flex-direction: column; gap: var(--syn-signature-typed-gap, 4px); font-size: var(--syn-signature-typed-font-size, 0.71875rem); color: var(--syn-signature-typed-color, var(--text-tertiary)); }
.syn-signature-acts { display: flex; gap: var(--syn-signature-acts-gap, var(--space-2)); justify-content: flex-end; }
.syn-signature-done { display: flex; align-items: center; gap: var(--syn-signature-done-gap, var(--space-3)); }
.syn-signature-mark { font-weight: var(--syn-signature-mark-font-weight, var(--font-semibold)); color: var(--syn-signature-mark-color, var(--text-ink)); }
.syn-geopoint { display: flex; flex-wrap: wrap; gap: var(--syn-geopoint-gap, var(--space-2)); }
/* the developer seed page (Aptive.Host Pages/Developer/SeedPage; APP-FACTORY.md 3 "Seed and fixtures") */
.syn-dev-seed { max-width: var(--syn-dev-seed-max-width, 720px); }
.syn-dev-seed-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--syn-dev-seed-facts-gap, 4px var(--space-3)); margin: var(--syn-dev-seed-facts-margin, 0 0 var(--space-3)); font: var(--syn-dev-seed-facts-font, var(--type-r6)); }
.syn-dev-seed-facts dt { color: var(--syn-dev-seed-facts-dt-color, var(--text-tertiary)); font-size: var(--syn-dev-seed-facts-dt-font-size, 0.71875rem); font-weight: var(--syn-dev-seed-facts-dt-font-weight, var(--font-semibold)); text-transform: var(--syn-dev-seed-facts-dt-text-transform, var(--type-label-transform)); letter-spacing: var(--syn-dev-seed-facts-dt-letter-spacing, var(--type-label-tracking)); align-self: baseline; }
.syn-dev-seed-facts dd { margin: 0; color: var(--syn-dev-seed-facts-dd-color, var(--text-ink)); }
.syn-dev-seed-empty, .syn-dev-seed-note { margin: var(--syn-dev-seed-empty-margin, 0 0 var(--space-3)); font: var(--syn-dev-seed-empty-font, var(--type-r6)); color: var(--syn-dev-seed-empty-color, var(--text-muted)); }
.syn-dev-seed-acts { display: flex; gap: var(--syn-dev-seed-acts-gap, var(--space-2)); }

/* p-modes ===================================================================================================================
   [AF-36] THE RESPONSIVE PASS and §6 FORM MODE's SSR-capable control variants (APP-FACTORY.md §5 "Responsive behavior",
   "every canonical control has an SSR-capable variant"; §6). Appended under this banner by the p-modes seat; the page shell
   (.af-page, app.css) is the container every rule below keys off — compact is `@container af-page (width < 640px)`, the
   numbers tokens.css names (--bp-*). An app never writes a media query; these rules are inherited by every page in every app.
   ======================================================================================================================== */

/* ── §6 Form mode: the form and its field grid ──────────────────────────────────────────────────────────────────────────── */
.af-form { display: flex; flex-direction: column; gap: var(--af-form-gap, var(--space-4)); }
.af-form .syn-field { display: flex; flex-direction: column; gap: var(--af-form-field-gap, 4px); min-width: 0; }
.af-form .syn-field-label { font: var(--af-form-field-label-font, var(--type-c1)); letter-spacing: var(--af-form-field-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-form-field-label-text-transform, var(--type-label-transform)); color: var(--af-form-field-label-color, var(--text-tertiary)); }
.af-form .syn-field-help { font: var(--af-form-field-help-font, var(--type-r7)); color: var(--af-form-field-help-color, var(--text-muted)); }
.af-form .syn-identity-grid { row-gap: var(--af-form-identity-grid-row-gap, 14px); column-gap: var(--af-form-identity-grid-column-gap, 18px); }   /* the modal form rhythm, on a page */
/* the form's act row: Save (ink) right, Save draft (quiet) and Cancel left; sticky at compact so the commit is one thumb away */
.af-form-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--af-form-acts-gap, var(--space-2)); padding-top: var(--af-form-acts-padding-top, var(--space-2)); border-top: var(--af-form-acts-border-top, 1px solid var(--border-hairline)); }
.af-form-acts .af-form-draft { margin-right: auto; }
.af-form-banner { font: var(--af-form-banner-font, var(--type-r5)); padding: var(--af-form-banner-padding, 10px 14px); border-radius: var(--af-form-banner-border-radius, var(--shape-radius-control)); border: var(--af-form-banner-border, 1px solid var(--border-default)); background: var(--af-form-banner-background, var(--bg-secondary)); color: var(--af-form-banner-color, var(--text-body)); }
.af-form-banner.is-error { color: var(--af-form-banner-is-error-color, var(--state-attention-text)); border-color: var(--af-form-banner-is-error-border-color, var(--destructive-border)); background: var(--af-form-banner-is-error-background, var(--severity-error-tint)); }
.af-form-banner.is-draft { color: var(--af-form-banner-is-draft-color, var(--review-text)); border-color: var(--af-form-banner-is-draft-border-color, var(--review-border)); background: var(--af-form-banner-is-draft-background, var(--review-tint)); }
.af-form-version { display: none; }

/* ── §6 the SSR-capable variants wear the circuit controls' classes; what differs is below ─────────────────────────────── */
/* ToggleSwitch: a label wearing .syn-switch; the checkbox is the whole seat, invisible, and :checked paints the on state. */
.syn-switch.syn-switch-ssr { position: relative; }
.syn-switch.syn-switch-ssr > .syn-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: var(--syn-switch-switch-ssr-switch-input-opacity, 0); cursor: pointer; }
.syn-switch.syn-switch-ssr:has(> .syn-switch-input:checked) { background: var(--syn-switch-switch-ssr-has-switch-input-checked-background, var(--text-ink)); justify-content: flex-end; }
.syn-switch.syn-switch-ssr:has(> .syn-switch-input:focus-visible) { outline: var(--syn-switch-switch-ssr-has-switch-input-focus-visible-outline, 2px solid var(--border-strong)); outline-offset: var(--syn-switch-switch-ssr-has-switch-input-focus-visible-outline-offset, 1px); }
/* EnumSelectCore: the native select under the bordered trigger's face; the wrap draws the canonical chevron over it. */
.syn-enum-ssrwrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.syn-enum-ssrwrap > .syn-enum-ssr { appearance: none; -webkit-appearance: none; width: 100%; padding-right: var(--syn-enum-ssrwrap-enum-ssr-padding-right, 26px); font: var(--syn-enum-ssrwrap-enum-ssr-font, var(--type-r6)); color: var(--syn-enum-ssrwrap-enum-ssr-color, var(--text-ink)); cursor: pointer; }
.syn-enum-ssrwrap > .syn-enum-ssr:has(> option[value=""]:checked) { color: var(--syn-enum-ssrwrap-enum-ssr-has-option-value-checked-color, var(--text-faint)); }
.syn-enum-ssrwrap > .syn-chevron { position: absolute; right: var(--syn-enum-ssrwrap-chevron-right, 8px); top: 50%; transform: translateY(-50%); pointer-events: none; }
.syn-enum-ssrwrap > .syn-enum-ssr:focus-visible { border-color: var(--syn-enum-ssrwrap-enum-ssr-focus-visible-border-color, var(--accent-action)); box-shadow: var(--syn-enum-ssrwrap-enum-ssr-focus-visible-box-shadow, var(--accent-ring)); outline: none; }
/* MultiSelect: checkbox chips — the chip is the label, so the whole chip is the target; checked wears the neutral-on tint. */
.syn-ms-ssr { display: flex; flex-wrap: wrap; gap: var(--syn-ms-ssr-gap, 6px); align-items: center; cursor: default; min-height: 0; }
.syn-ms-ssrchip { cursor: pointer; user-select: none; gap: var(--syn-ms-ssrchip-gap, 6px); border: var(--syn-ms-ssrchip-border, 1px solid var(--border-default)); background: var(--syn-ms-ssrchip-background, var(--surface-plane)); color: var(--syn-ms-ssrchip-color, var(--text-muted)); }
.syn-ms-ssrchip > input { margin: 0; width: var(--syn-ms-ssrchip-input-width, 13px); height: var(--syn-ms-ssrchip-input-height, 13px); accent-color: var(--syn-ms-ssrchip-input-accent-color, var(--text-ink)); }
.syn-ms-ssrchip.is-on, .syn-ms-ssrchip:has(> input:checked) { background: var(--syn-ms-ssrchip-is-on-background, var(--surface-inset)); color: var(--syn-ms-ssrchip-is-on-color, var(--text-ink)); border-color: var(--syn-ms-ssrchip-is-on-border-color, var(--border-emphasis)); }
.syn-ms-ssrinput { flex: 1 1 10rem; min-width: var(--syn-ms-ssrinput-min-width, 8rem); }
/* FieldDatePicker: native date, time and zone side by side; the basis checkbox beside them. */
.syn-dtp-ssr { display: inline-flex; flex-wrap: wrap; gap: var(--syn-dtp-ssr-gap, 6px); align-items: center; max-width: 100%; }
.syn-dtp-ssr > .syn-input { width: auto; flex: 0 1 auto; min-width: 0; }
.syn-dtp-ssr > .syn-dtp-ssrdate { flex: 1 1 9.5rem; }
.syn-dtp-ssr > .syn-dtp-ssrtime { flex: 0 1 6.5rem; }
.syn-dtp-ssr > .syn-dtp-ssrtz { flex: 1 1 9rem; }
.syn-dtp-ssrbasis { display: inline-flex; align-items: center; gap: var(--syn-dtp-ssrbasis-gap, 6px); font: var(--syn-dtp-ssrbasis-font, var(--type-c4)); color: var(--syn-dtp-ssrbasis-color, var(--text-muted)); white-space: nowrap; }
/* MarkdownEditor: the source textarea inside the plane; it IS a wrap-entry ([AF-1056]) — these lines are its plane's dress. */
.syn-md-ssr { border: var(--syn-md-ssr-border, 1px solid var(--border-emphasis)); border-radius: var(--syn-md-ssr-border-radius, var(--shape-radius-control)); background: var(--syn-md-ssr-background, var(--surface-plane)); }
.syn-md-ssrtext { border: 0; border-radius: var(--syn-md-ssrtext-border-radius, var(--shape-radius-control)); resize: vertical; min-height: var(--syn-md-ssrtext-min-height, 7.5rem); font-family: var(--syn-md-ssrtext-font-family, var(--type-family-mono)); font-size: var(--syn-md-ssrtext-font-size, var(--read-sm)); line-height: var(--syn-md-ssrtext-line-height, 1.5); }
/* LookupInput: the text face over the hidden id. */
.syn-lookup { display: inline-flex; min-width: 0; width: 100%; }

/* ── [AF-36] COMPACT (page width < 640): every control usable by thumb — 44px targets, pickers as sheets, native dates ──── */
@container af-page (width < 640px) {
    .syn-input, .syn-enum-bordered, .syn-enum-ssr, .syn-btn, .syn-dtp, .syn-ms-trigger, .syn-ms-tagbox, .syn-lookup-text { min-height: var(--target-min); }
    .syn-input { padding-top: var(--syn-input-at-to640-padding-top, 10px); padding-bottom: var(--syn-input-at-to640-padding-bottom, 10px); font-size: var(--syn-input-at-to640-font-size, var(--read-base)); }
    .syn-ms-ssrchip, .syn-ms-row, .syn-enum-row { min-height: var(--target-min); padding-top: var(--syn-ms-ssrchip-at-to640-padding-top, 8px); padding-bottom: var(--syn-ms-ssrchip-at-to640-padding-bottom, 8px); }
    .syn-switch { width: var(--syn-switch-at-to640-width, 50px); height: var(--syn-switch-at-to640-height, 28px); padding: var(--syn-switch-at-to640-padding, 3px); }
    .syn-switch > span { width: var(--syn-switch-span-at-to640-width, 22px); height: var(--syn-switch-span-at-to640-height, 22px); }
    .syn-num-step { min-width: var(--syn-num-step-at-to640-min-width, 32px); min-height: var(--syn-num-step-at-to640-min-height, 22px); }
    .syn-ef { flex-direction: column; align-items: stretch; gap: var(--syn-ef-at-to640-gap, 4px); min-height: var(--target-min); }
    .syn-ef-label { width: auto; }
    .syn-ef-idle { min-height: var(--target-min); }
    /* an anchored picker becomes a bottom sheet: full width, pinned to the bottom edge, its own scroll */
    .syn-popover { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: none !important; max-height: var(--syn-popover-at-to640-max-height, 70dvh); overflow: auto; border-radius: var(--syn-popover-at-to640-border-radius, var(--shape-radius-sheet) var(--shape-radius-sheet) 0 0); box-shadow: var(--syn-popover-at-to640-box-shadow, var(--elevation-overlay)); }
    .syn-popover .syn-enum-panel, .syn-popover .syn-ms-panel, .syn-popover .syn-dtp-pop { min-width: 0 !important; width: 100%; }
    /* the markdown toolbar collapses: the first group stays, the rest scrolls behind it */
    .syn-mdtoolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: auto; }
    .syn-mdtoolbar > button { min-width: var(--target-min); min-height: var(--target-min); flex: 0 0 auto; }
    /* the form's acts pin to the bottom of the screen; the ink commit fills the width */
    .af-form-acts { position: sticky; bottom: 0; background: var(--af-form-acts-at-to640-background, var(--surface-canvas)); padding: var(--af-form-acts-at-to640-padding, var(--space-3) 0); flex-wrap: wrap; z-index: 2; }
    .af-form-acts .syn-btn { min-height: var(--target-min); }
    .af-form-acts .af-form-save { flex: 1 1 100%; order: -1; }
    .af-form-acts .af-form-draft { margin-right: 0; }
    .syn-dtp-ssr > .syn-dtp-ssrdate, .syn-dtp-ssr > .syn-dtp-ssrtz { flex-basis: 100%; }
    .af-page-head { flex-direction: column; align-items: stretch; }
}
/* row 217 ([AF-435]): the medium and wide form bands are retired, dormant under the shell since C6 and wrong once alive: a form
   wraps the whole page, so they forced two columns on a grid in a narrow panel (a grid's columns are its own container's, syn-idgrid above)
   and pinned a 920 px column to the start edge (the measure is the shell's layout and .af-page-body's) */
/* end p-modes ============================================================================================================= */


/* C5 — THE TONE CLASSES ([AF-73]: EmphasisWhen maps a predicate to a tone the design system defines in tokens — attention,
   warning, success, muted). A slot whose predicate holds wears one of these (Aptive.Kernel.Rules.Tones.CssClass); the class
   reads the tone's token and names no color. The tokens --tone-attention … --tone-muted are tokens.css's (p-modes); until
   they land each falls back to the ratified semantic token of the same meaning. Append-only, by the Orchestrator's rule. */
.tone-attention { color: var(--tone-attention, var(--state-warning-text)); }
.tone-warning { color: var(--tone-warning, var(--state-warning)); }
.tone-success { color: var(--tone-success, var(--state-success)); }
.tone-muted { color: var(--tone-muted, var(--text-tertiary)); }
.tone-info { color: var(--tone-info, var(--state-info-text)); }   /* the Info tone ([AF-161]) */

/* CWD-9's eight kit faces (AF-2307–2314, Compass CP-452; [AF-1082] 1) — the React kit's Prose, Switch, SavedSlot, Drawer, StatusRail and
   ReviewStep, drawn alike (the mock's `a.tel`, `.sw`, `.slotmsg`, `.det`/`.tile`, `.hl`, `.cw.one`). */
/* AF-2313: a phone number is bold ink, never the accent — a link on a phone, a fact everywhere else; it never breaks */
.af-tel { color: var(--af-tel-color, var(--text-ink)); font-weight: var(--af-tel-font-weight, 600); white-space: nowrap; text-decoration: var(--af-tel-text-decoration, none); }
.af-tel:hover { text-decoration: var(--af-tel-hover-text-decoration, underline); }
.af-tel:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--af-tel-focus-visible-outline-offset, 2px); }
/* AF-2309: the word, then the 52 × 32 track; on, the track is the act's accent and the word ink; a switch shows no Saved */
.af-setting-switch { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--af-setting-switch-gap, 10px); min-height: var(--target-min); cursor: pointer; flex: none; font: var(--af-setting-switch-font, var(--type-body)); font-weight: var(--af-setting-switch-font-weight, 600); color: var(--af-setting-switch-color, var(--text-muted)); }
.af-setting-switch-track { position: relative; width: var(--af-setting-switch-track-width, 52px); height: var(--af-setting-switch-track-height, 32px); box-sizing: border-box; border-radius: var(--af-setting-switch-track-border-radius, var(--shape-radius-pill)); background: var(--af-setting-switch-track-background, var(--surface-inset)); border: var(--af-setting-switch-track-border, 1.5px solid var(--border-default)); transition: var(--af-setting-switch-track-transition, background var(--motion-duration-fast)); }
.af-setting-switch-track::after { content: ""; position: absolute; top: var(--af-setting-switch-track-after-top, 3px); left: var(--af-setting-switch-track-after-left, 3px); width: var(--af-setting-switch-track-after-width, 23px); height: var(--af-setting-switch-track-after-height, 23px); border-radius: 50%; background: var(--af-setting-switch-track-after-background, var(--border-strong)); transition: var(--af-setting-switch-track-after-transition, left var(--motion-duration-fast)); }
.af-setting-switch[aria-checked="true"], .af-setting-switch:has(> .af-setting-switch-input:checked) { color: var(--af-setting-switch-aria-checked-true-color, var(--text-ink)); }
.af-setting-switch[aria-checked="true"] .af-setting-switch-track, .af-setting-switch:has(> .af-setting-switch-input:checked) .af-setting-switch-track { background: var(--af-setting-switch-aria-checked-true-setting-switch-track-background, var(--accent-action)); border-color: var(--af-setting-switch-aria-checked-true-setting-switch-track-border-color, var(--accent-action)); }
.af-setting-switch[aria-checked="true"] .af-setting-switch-track::after, .af-setting-switch:has(> .af-setting-switch-input:checked) .af-setting-switch-track::after { left: var(--kit-switch-aria-checked-true-setting-switch-track-after-left, 23px); background: var(--kit-switch-aria-checked-true-setting-switch-track-after-background, var(--text-on-accent)); }
.af-setting-switch:focus-visible .af-setting-switch-track, .af-setting-switch:has(> .af-setting-switch-input:focus-visible) .af-setting-switch-track { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--af-setting-switch-focus-visible-setting-switch-track-outline-offset, 2px); }
.af-setting-switch-input { position: absolute; opacity: var(--af-setting-switch-input-opacity, 0); width: var(--af-setting-switch-input-width, 1px); height: var(--af-setting-switch-input-height, 1px); margin: 0; }
.af-setting-switch .is-on, .af-setting-switch:has(> .af-setting-switch-input:checked) .is-off { display: none; }
.af-setting-switch:has(> .af-setting-switch-input:checked) .is-on { display: inline; }
/* AF-2310: the act's slot holds the target's height whether it holds the act or the word, so the row never moves */
.af-saved-slot { display: flex; align-items: center; min-height: var(--target-min); }
.af-saved-slot-word { display: inline-flex; align-items: center; gap: var(--af-saved-slot-word-gap, 8px); min-height: var(--target-min); color: var(--af-saved-slot-word-color, var(--state-success-text)); font: var(--af-saved-slot-word-font, var(--type-body)); font-weight: var(--af-saved-slot-word-font-weight, 600); }
/* AF-2311: the drawer's row is a control on the inset ground, not a divider; open, the ground holds the tiles, each white on it */
.af-drawer { display: flex; flex-direction: column; }
.af-drawer-head { list-style: none; box-sizing: border-box; display: flex; width: 100%; min-height: var(--af-drawer-head-min-height, 56px); align-items: center; justify-content: space-between; gap: var(--af-drawer-head-gap, 12px); padding: var(--af-drawer-head-padding, 0 16px); border-radius: var(--af-drawer-head-border-radius, var(--shape-radius-control)); background: var(--af-drawer-head-background, var(--surface-inset)); color: var(--af-drawer-head-color, var(--text-ink)); font: var(--af-drawer-head-font, var(--type-body)); font-weight: var(--af-drawer-head-font-weight, 600); cursor: pointer; }
.af-drawer-head::-webkit-details-marker { display: none; }
.af-drawer-head > svg { flex: none; transition: var(--af-drawer-head-svg-transition, transform var(--motion-duration-fast)); }
.af-drawer[open] > .af-drawer-head { border-radius: var(--af-drawer-open-drawer-head-border-radius, var(--shape-radius-control) var(--shape-radius-control) 0 0); }
.af-drawer[open] > .af-drawer-head > svg { transform: rotate(180deg); }
.af-drawer-head:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--af-drawer-head-focus-visible-outline-offset, 2px); }
.af-drawer-body { display: flex; flex-direction: column; gap: var(--af-drawer-body-gap, 10px); padding: var(--af-drawer-body-padding, 2px 10px 12px); background: var(--af-drawer-body-background, var(--surface-inset)); border-radius: var(--af-drawer-body-border-radius, 0 0 var(--shape-radius-control) var(--shape-radius-control)); }
.af-drawer-tile { display: flex; flex-direction: column; gap: var(--af-drawer-tile-gap, 12px); padding: var(--af-drawer-tile-padding, 14px); border-radius: var(--af-drawer-tile-border-radius, var(--shape-radius-control)); background: var(--af-drawer-tile-background, var(--surface-plane)); border: var(--af-drawer-tile-border, var(--shape-border-width) solid var(--plane-edge)); color: var(--af-drawer-tile-color, var(--text-body)); }
.af-drawer-tile-head { display: flex; align-items: center; gap: var(--af-drawer-tile-head-gap, 12px); min-width: 0; }
.af-drawer-tile-disc { width: var(--af-drawer-tile-disc-width, 36px); height: var(--af-drawer-tile-disc-height, 36px); border-radius: 50%; background: var(--af-drawer-tile-disc-background, var(--surface-inset)); color: var(--af-drawer-tile-disc-color, var(--text-ink)); display: grid; place-items: center; flex: none; }
.af-drawer-tile-title { margin: 0; font: var(--af-drawer-tile-title-font, var(--type-body)); font-weight: var(--af-drawer-tile-title-font-weight, 600); color: var(--af-drawer-tile-title-color, var(--text-ink)); min-width: 0; }
.af-drawer-tile-act { margin-left: auto; flex: none; }
/* AF-2312: the rail runs the full width — first stop at the start edge, last at the end, a middle one centred; the line strong to the stop reached */
.af-rail { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.af-rail[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.af-rail::before, .af-rail::after { content: ""; position: absolute; top: var(--af-rail-before-top, 8px); left: var(--af-rail-before-left, 9px); height: var(--af-rail-before-height, 2px); }
.af-rail::before { right: var(--af-rail-before-right, 9px); background: var(--af-rail-before-background, var(--border-hairline)); }
.af-rail::after { width: 0; background: var(--af-rail-after-background, var(--border-strong)); }
.af-rail[data-n="3"][data-reached="1"]::after { width: var(--af-rail-n-3-reached-1-after-width, calc(50% - 9px)); }
.af-rail[data-n="3"][data-reached="2"]::after, .af-rail[data-n="2"][data-reached="1"]::after { width: var(--af-rail-n-3-reached-2-after-width, calc(100% - 18px)); }
.af-rail-stop { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: var(--af-rail-stop-padding-top, 28px); min-width: 0; }
.af-rail-stop:last-child { align-items: flex-end; text-align: right; }
.af-rail[data-n="3"] .af-rail-stop:nth-child(2) { align-items: center; text-align: center; }
.af-rail-dot { position: absolute; top: 0; left: 0; width: var(--af-rail-dot-width, 18px); height: var(--af-rail-dot-height, 18px); box-sizing: border-box; border-radius: 50%; border: var(--af-rail-dot-border, 1.5px solid var(--border-default)); background: var(--af-rail-dot-background, var(--surface-plane)); display: grid; place-items: center; }
.af-rail-stop:last-child .af-rail-dot { left: auto; right: 0; }
.af-rail[data-n="3"] .af-rail-stop:nth-child(2) .af-rail-dot { left: var(--af-rail-n-3-rail-stop-nth-child-2-rail-dot-left, calc(50% - 9px)); }
.af-rail-stop.is-done .af-rail-dot { border-color: var(--af-rail-stop-is-done-rail-dot-border-color, var(--text-ink)); background: var(--af-rail-stop-is-done-rail-dot-background, var(--text-ink)); }
.af-rail-stop.is-done .af-rail-dot::after { content: ""; width: var(--af-rail-stop-is-done-rail-dot-after-width, 7px); height: var(--af-rail-stop-is-done-rail-dot-after-height, 4px); margin-top: var(--af-rail-stop-is-done-rail-dot-after-margin-top, -2px); border: var(--af-rail-stop-is-done-rail-dot-after-border, solid var(--surface-plane)); border-width: var(--af-rail-stop-is-done-rail-dot-after-border-width, 0 0 2px 2px); transform: rotate(-45deg); }
.af-rail-name { font: var(--af-rail-name-font, var(--type-body)); font-weight: var(--af-rail-name-font-weight, 600); color: var(--af-rail-name-color, var(--text-muted)); }
.af-rail-stop.is-done .af-rail-name { color: var(--af-rail-stop-is-done-rail-name-color, var(--text-ink)); }
.af-rail-date { font: var(--af-rail-date-font, var(--type-caption)); color: var(--af-rail-date-color, var(--text-muted)); white-space: nowrap; }
.af-rail-date .af-banner { padding: 0; border: 0; background: transparent; font: inherit; color: inherit; }
/* AF-2314: the review step's rhythm and its Warning block — inset ground, the glyph in the Warning tone's ink, the words in ink */
.af-review-step { display: flex; flex-direction: column; gap: var(--af-review-step-gap, 16px); }
.af-review-step-count { margin: 0; font: var(--af-review-step-count-font, var(--type-caption)); color: var(--af-review-step-count-color, var(--text-muted)); }
.af-review-step-title { margin: var(--af-review-step-title-margin, -12px 0 0); font: var(--af-review-step-title-font, var(--type-body)); font-weight: var(--af-review-step-title-font-weight, 600); color: var(--af-review-step-title-color, var(--text-ink)); }
.af-warning-block { display: flex; gap: var(--af-warning-block-gap, 10px); align-items: flex-start; padding: var(--af-warning-block-padding, 12px 14px); border-radius: var(--af-warning-block-border-radius, var(--shape-radius-control)); background: var(--af-warning-block-background, var(--surface-inset)); color: var(--af-warning-block-color, var(--text-ink)); font: var(--af-warning-block-font, var(--type-body)); font-weight: var(--af-warning-block-font-weight, 600); }
.af-warning-block > svg { flex: none; margin-top: var(--af-warning-block-svg-margin-top, 2px); color: var(--af-warning-block-svg-color, var(--state-warning-text)); }
.af-review-step-acts { display: flex; flex-direction: column; gap: var(--af-review-step-acts-gap, 8px); }
.af-review-step-acts > * { width: 100%; }
.af-review-step-back { display: flex; justify-content: center; }