/* FedM8 design 003: legacy aliases (contract layer 4).
 * Maps the shared classes still used by not-yet-rebuilt screens (assets/os.css, assets/approved-design.css and the feature
 * stylesheets) onto the component looks in assets/d3/components.css, using the same --fm-* tokens, so every route takes the 003
 * look right away. Aliases restyle SURFACE only (colour, border, radius, type, spacing tokens); they never change structure
 * (display, grid, position, widths), so layout stays as each screen built it. Delete a block when its screen is rebuilt on fm-* markup.
 * Loaded after components.css in os.html. Reads only --fm-* tokens (qc/d3-no-literals.spec.cjs).
 *
 * Specificity: assets/approved-design.css scopes with `body.fd-design :is(...)` (up to 0,3,1 / 0,4,1 on hover). The doubled
 * `body.fd-design.fd-design` below matches that weight and wins by load order; card rules mirror its `#page-content` scope. */

/* ---------- Page title -> fm-page__title. Legacy: #page-title, #page-head .sub ---------- */
body.fd-design.fd-design #page-title { font-size: var(--fm-text-2xl); line-height: 1.2; font-weight: var(--fm-weight-bold); letter-spacing: 0; color: var(--fm-ink); }
body.fd-design.fd-design #page-head .sub { font-size: var(--fm-text-md); color: var(--fm-ink-3); }

/* ---------- Primary button -> fm-btn--primary. Legacy: .btn, .fx-btn, .fx-btn-go, .crx-btn.primary, .ssx-btn, .jh-btn ---------- */
body.fd-design.fd-design :is(.btn, .fx-btn, .fx-btn-go, .crx-btn.primary, .ssx-btn, .jh-btn) {
  min-height: var(--fm-tap-min); padding: var(--fm-space-2) var(--fm-space-5);
  border-radius: var(--fm-radius-pill); font-family: var(--fm-font-sans); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold);
  background: var(--fm-action); border-color: var(--fm-action); color: var(--fm-action-ink);
}
body.fd-design.fd-design :is(.btn, .fx-btn, .fx-btn-go, .crx-btn.primary, .ssx-btn, .jh-btn):hover { background: var(--fm-action-hover); border-color: var(--fm-action-hover); color: var(--fm-action-ink); }

/* ---------- Secondary button -> fm-btn--secondary. Legacy: .btn.ghost, .fx-btn-o, .fx-btn-g, .fx-btn-q, .crx-btn, .ssx-btn-quiet ---------- */
body.fd-design.fd-design :is(.btn.ghost, .fx-btn-o, .fx-btn-g, .fx-btn-q, .crx-btn, .ssx-btn-quiet) {
  min-height: var(--fm-tap-min); padding: var(--fm-space-2) var(--fm-space-5);
  border-width: calc(var(--fm-border-width) * 2); border-radius: var(--fm-radius-pill); font-family: var(--fm-font-sans); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold);
  background: var(--fm-surface); border-color: var(--fm-ink); color: var(--fm-ink);
}
body.fd-design.fd-design :is(.btn.ghost, .fx-btn-o, .fx-btn-g, .fx-btn-q, .crx-btn, .ssx-btn-quiet):hover { background: var(--fm-surface-alt); border-color: var(--fm-ink); color: var(--fm-ink); }
/* a primary-styled .crx-btn.primary keeps its amber fill (listed above); the secondary rule must not repaint it */
body.fd-design.fd-design.fd-design .crx-btn.primary { background: var(--fm-action); border-color: var(--fm-action); color: var(--fm-action-ink); }

/* ---------- Danger button -> fm-btn--danger. Legacy: .btn.danger, .fx-danger ---------- */
body.fd-design.fd-design :is(.btn.danger, .fx-danger) { background: var(--fm-surface); border-color: var(--fm-urgent); color: var(--fm-urgent); }
body.fd-design.fd-design :is(.btn.danger, .fx-danger):hover { background: var(--fm-urgent-soft); border-color: var(--fm-urgent); color: var(--fm-urgent); }

/* ---------- Small button -> fm-btn--sm. Legacy: .btn.sm ---------- */
body.fd-design.fd-design .btn.sm { padding: var(--fm-space-1) var(--fm-space-3); font-size: var(--fm-text-sm); }

/* ---------- Disabled buttons -> fm-btn:disabled. Legacy: .btn:disabled ---------- */
body.fd-design.fd-design.fd-design .btn:disabled { background: var(--fm-surface-alt); border-color: var(--fm-line); color: var(--fm-ink-3); opacity: 1; }

/* ---------- Card -> fm-card. Legacy: .panel, .card, .ssx-card, .jh-row, .jh-pulse-row, .crx-person, .fx-mem, .fx-talk-post ---------- */
body.fd-design #page-content :is(.panel, .card, .ssx-card, .jh-row, .jh-pulse-row, .crx-person, .fx-mem, .fx-talk-post) {
  background: var(--fm-surface); color: var(--fm-ink); border: var(--fm-border-width) solid var(--fm-line);
  border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow-1);
}
body.fd-design #page-content .panel { padding: var(--fm-space-5); margin-bottom: var(--fm-space-4); }
/* Card heading and body text -> fm-card__title / fm-card__body. Legacy: .panel h2, .panel h3, .panel p, .panel li */
body.fd-design #page-content :is(.panel h2, .panel h3, .ssx-card-title, .jh-title) { font-family: var(--fm-font-sans); font-size: var(--fm-text-lg); font-weight: var(--fm-weight-semibold); line-height: 1.3; color: var(--fm-ink); }
body.fd-design #page-content :is(.panel p, .panel li, .ssx-note, .jh-sub, .jh-empty, .jh-row-meta, .jh-pulse-snip) { font-size: var(--fm-text-md); line-height: 1.5; color: var(--fm-ink-2); }
body.fd-design #page-content :is(.fine, .muted, small) { color: var(--fm-ink-3); }

/* ---------- Find-work card -> fm-card (row-selected when .sel, R1). Legacy: .fx-card, .fx-card.sel ---------- */
body.fd-design.fd-design :is(.fx-card, .crx-view .fx-card) { background: var(--fm-surface); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow-1); color: var(--fm-ink); }
body.fd-design.fd-design :is(.fx-card.sel, .crx-view .fx-card.sel) { background: var(--fm-row-selected-bg); border-color: var(--fm-line-strong); box-shadow: var(--fm-shadow-1); color: var(--fm-row-selected-ink); }

/* ---------- Stat -> fm-stat. Legacy: .metric, .metric .lbl, .metric .val ---------- */
body.fd-design.fd-design :is(.metric, #jev-home-best, #jev-home-formation, #jev-home-pulse) { background: var(--fm-surface); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow-1); color: var(--fm-ink); }
body.fd-design.fd-design :is(.metric .lbl, .ssx-eyebrow, .jh-eyebrow, .jh-form-tag) { font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); letter-spacing: 0; text-transform: none; color: var(--fm-ink-2); }
body.fd-design.fd-design .metric .val { font-size: var(--fm-text-2xl); font-weight: var(--fm-weight-bold); line-height: 1.15; color: var(--fm-ink); }

/* ---------- List row -> fm-row. Legacy: .os-row, .resource-row ---------- */
body.fd-design.fd-design :is(.os-row, .resource-row) { border-bottom-color: var(--fm-line); color: var(--fm-ink); }
body.fd-design.fd-design .os-row strong { font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); color: var(--fm-ink); }
body.fd-design.fd-design .os-row small { font-size: var(--fm-text-sm); color: var(--fm-ink-3); }
body.fd-design.fd-design .os-row p { font-size: var(--fm-text-md); color: var(--fm-ink-2); }
body.fd-design.fd-design .os-row.unread { background: var(--fm-surface-alt); }
body.fd-design.fd-design :is(.os-row, .resource-row):hover { background: var(--fm-surface-alt); }

/* ---------- Field -> fm-field. Legacy: .form-row label / input / select / textarea, .os-toolbar input / select / textarea ---------- */
body.fd-design.fd-design .form-row label { font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); color: var(--fm-ink-2); }
body.fd-design.fd-design :is(.form-row, .os-toolbar) :is(input, select, textarea) {
  background: var(--fm-surface); color: var(--fm-ink); border: var(--fm-border-width) solid var(--fm-line-strong);
  border-radius: var(--fm-radius-md); font-family: var(--fm-font-sans); font-size: var(--fm-text-md);
}
body.fd-design.fd-design :is(.form-row, .os-toolbar) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fm-urgent); }

/* ---------- Table -> fm-list rows. Legacy: table.data ---------- */
body.fd-design.fd-design table.data { font-size: var(--fm-text-sm); color: var(--fm-ink); }
body.fd-design.fd-design table.data th { font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); letter-spacing: 0; text-transform: none; color: var(--fm-ink-3); border-bottom-color: var(--fm-line-strong); }
body.fd-design.fd-design table.data td { border-bottom-color: var(--fm-line); }
body.fd-design.fd-design table.data tr:hover td { background: var(--fm-surface-alt); }
body.fd-design.fd-design table.data tr.sel td { background: var(--fm-row-selected-bg); color: var(--fm-row-selected-ink); }

/* ---------- Empty state -> fm-empty. Legacy: .empty ---------- */
body.fd-design.fd-design .empty { font-size: var(--fm-text-md); color: var(--fm-ink-2); text-align: center; border: calc(var(--fm-border-width) * 2) dashed var(--fm-line-strong); border-radius: var(--fm-radius-lg); padding-inline: var(--fm-space-4); }

/* ---------- Status line -> fm-field__error / success text. Legacy: .status.ok, .status.err ---------- */
body.fd-design.fd-design .status { font-size: var(--fm-text-sm); }
body.fd-design.fd-design .status.ok { color: var(--fm-success); }
body.fd-design.fd-design .status.err { color: var(--fm-urgent); }

/* ---------- Badge -> fm-badge. Legacy: .fx-pill, .jh-chip, .crx-badge, .pg-badge ---------- */
body.fd-design.fd-design :is(.jh-chip, .crx-badge, .fx-pill, .pg-badge) { padding: 0 var(--fm-space-2); border: var(--fm-border-width) solid transparent; border-radius: var(--fm-radius-pill); background: var(--fm-info-soft); color: var(--fm-ink); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design :is(.jh-chip.due, .crx-badge.due, .fx-pill.due.soon) { background: var(--fm-warn-soft); border-color: transparent; color: var(--fm-warn); }
body.fd-design.fd-design :is(.jh-count, .jh-match, .jh-discuss-count, .jh-keynum, .crx-score, .crx-conf) { background: var(--fm-success-soft); border-color: transparent; color: var(--fm-success); }

/* ---------- Tabs -> fm-tab. Legacy: .fx-tabs, .fx-tab, .fx-tab[aria-selected] ---------- */
body.fd-design.fd-design .fx-tabs { border-bottom-color: var(--fm-line); }
body.fd-design.fd-design .fx-tab { font-size: var(--fm-text-md); font-weight: var(--fm-weight-medium); color: var(--fm-ink-2); }
body.fd-design.fd-design .fx-tab:hover { color: var(--fm-ink); }
body.fd-design.fd-design .fx-tab[aria-selected="true"] { color: var(--fm-ink); border-bottom-color: var(--fm-ink); font-weight: var(--fm-weight-bold); }

/* ---------- Segmented control -> fm-segmented. Legacy: .ssx-tab, .ssx-tab-on ---------- */
body.fd-design.fd-design .ssx-tab { border-radius: var(--fm-radius-pill); border-color: var(--fm-line-strong); background: var(--fm-surface); color: var(--fm-ink-2); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design .ssx-tab-on { background: var(--fm-nav-active-bg); border-color: var(--fm-nav-active-bg); color: var(--fm-nav-active-ink); }

/* ---------- Link tile -> fm-card--interactive. Legacy: .links a ---------- */
body.fd-design.fd-design .links a { background: var(--fm-surface); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-md); color: var(--fm-ink); font-size: var(--fm-text-md); }
body.fd-design.fd-design .links a small { font-size: var(--fm-text-sm); color: var(--fm-ink-3); }
body.fd-design.fd-design .links a:hover { background: var(--fm-surface-alt); border-color: var(--fm-line-strong); text-decoration: none; }

/* ---------- Focus -> shared focus ring. Legacy: every control under the workspace (a11y baseline used a green outline) ---------- */
body.fd-design.fd-design :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: calc(var(--fm-border-width) * 2) solid var(--fm-focus-ring); outline-offset: calc(var(--fm-border-width) * 2); }

/* ---------- Text size -> --fm-text-* tokens. Legacy: every un-classed paragraph, list, table cell and control in a not-yet-rebuilt screen ----------
 * The Appearance text-size control scales the --fm-text-* tokens (there is no page zoom), so legacy text must read them to follow it.
 * Zero specificity (:where): any legacy class that sets its own size still wins, and the classed text is aliased in the blocks above. */
:where(body.fd-design #page-content) { font-size: var(--fm-text-md); }
:where(body.fd-design #page-content :is(p, li, dd, dt, td, th, label, summary, input, select, textarea, button)) { font-size: var(--fm-text-md); }
:where(body.fd-design #page-content :is(small, figcaption, caption)) { font-size: var(--fm-text-sm); }
:where(body.fd-design #page-content h1) { font-size: var(--fm-text-2xl); }
:where(body.fd-design #page-content h2) { font-size: var(--fm-text-xl); }
:where(body.fd-design #page-content h3, body.fd-design #page-content h4) { font-size: var(--fm-text-lg); }

/* ---------- Legacy light-only colours -> tokens (dark and high-contrast presets). Each feature stylesheet hard-coded a pale paper colour or a dark-green text
 * colour that the dark preset cannot reach. These blocks give the same elements the token surface and ink. Delete a block when its screen is rebuilt. ---------- */
/* Pale chip, pill and tab fill used by os-find.css and approved-design.css. Legacy: --fx-pale, --gold-dim */
body.fd-design.fd-design { --fx-pale: var(--fm-info-soft); --gold-dim: var(--fm-info-soft); }
/* Find button text. Legacy: .fx-btn-go carries `color: #fff !important` (white on the amber primary fails contrast), .fx-go */
body.fd-design.fd-design :is(.fx-btn-go, .fx-go):not(.fm-btn--secondary) { color: var(--fm-action-ink) !important; } /* amber primary only: a demoted Search keeps --fm-ink (dark theme contrast) */
/* Pale panel headers, notes and reply surfaces -> fm-card--alt. Legacy: .ja-panel-head, .crx-chat-head, .crx-cert-note, .ja-pinned, .ja-msg-reply, .fr-post.mine, .fr-branch .fr-post, .fr-reply-form, .tm-hi-card, .fd-lesson-tier, .gr-chip.shop, .gr-seg, .cd-modes.cd-seg */
body.fd-design.fd-design :is(.ja-panel-head, .crx-chat-head, .crx-cert-note, .ja-pinned, .ja-msg-reply, .fr-post.mine, .fr-branch .fr-post, .fr-reply-form, .tm-hi-card, .fd-lesson-tier, .gr-chip.shop, .gr-seg, section.cd .cd-modes.cd-seg) { background: var(--fm-surface-alt); color: var(--fm-ink); }
/* Discussion line on a find-work card -> fm-card text. Legacy: .jh-discuss-snip, .jh-discuss-in, .jh-discuss-btn */
body.fd-design.fd-design .jh-discuss-snip { color: var(--fm-ink-2); }
body.fd-design.fd-design .fx-card.sel .jh-discuss-snip { color: var(--fm-row-selected-ink); }
body.fd-design.fd-design .jh-discuss-in { color: var(--fm-ink); }
body.fd-design.fd-design .fx-card.sel .jh-discuss-in { color: var(--fm-row-selected-ink); }
body.fd-design.fd-design .jh-discuss-btn { background: var(--fm-selected-bg); color: var(--fm-selected-ink); }
/* Teaming and room meta text -> ink tokens. Legacy: .tm-on, .tm-online, .tm-muted */
body.fd-design.fd-design .tm-on { color: var(--fm-ink); }
body.fd-design.fd-design .tm-online { color: var(--fm-success); }
body.fd-design.fd-design .tm-muted { color: var(--fm-ink-2); }
/* Launch week card keeps its own palette variables. Legacy: .lw-card (launch-week.css) */
body.fd-design.fd-design .lw-card { --lw-paper: var(--fm-surface); --lw-canvas: var(--fm-surface-alt); --lw-ink: var(--fm-ink); --lw-muted: var(--fm-ink-2); --lw-line: var(--fm-line); --lw-olive: var(--fm-accent-ink); --lw-olive-d: var(--fm-accent-ink); }
body.fd-design.fd-design .lw-row.lw-on { background: var(--fm-surface-alt); }
/* Hello flow cards keep their own palette variables and a few literal inks. Legacy: .hello-card, .hello-newcomers (hello-flow.css) */
body.fd-design.fd-design :is(.hello-card, .hello-newcomers) { --hf-paper: var(--fm-surface); --hf-ink: var(--fm-ink); --hf-muted: var(--fm-ink-2); --hf-line: var(--fm-line); --hf-green: var(--fm-accent-ink); --hf-green-dark: var(--fm-accent-ink); }
body.fd-design.fd-design .hello-newcomers :is(.hello-side-title, .hello-item-who) { color: var(--fm-ink); }
body.fd-design.fd-design .hello-newcomers .hello-item { border-top-color: var(--fm-line); }
body.fd-design.fd-design .hello-newcomers .hello-item-body { color: var(--fm-ink-2); display: block; overflow: visible; -webkit-line-clamp: none; } /* no clamp: the whole hello shows (a11y: no truncated text without a way to the rest) */
body.fd-design.fd-design .hello-newcomers .hello-fit { background: var(--fm-accent-soft); color: var(--fm-accent-ink); }
body.fd-design.fd-design .hello-btn { background: var(--fm-surface); color: var(--fm-ink); border-color: var(--fm-line-strong); }
body.fd-design.fd-design .hello-btn:hover { background: var(--fm-surface-alt); }
body.fd-design.fd-design .hello-btn.primary { background: var(--fm-action); border-color: var(--fm-action); color: var(--fm-action-ink); }
/* Plan tile inside a legacy .panel: the panel text rules are more specific than the tile's own. Maps to fm-plan-tile. Delete when #/account drops .panel. */
body.fd-design #page-content .fm-plan-tile .fm-plan-tile__name { font-size: var(--fm-text-xl); font-weight: var(--fm-weight-bold); color: var(--fm-ink); margin: 0; }
body.fd-design #page-content .fm-plan-tile .fm-plan-tile__text { font-size: var(--fm-text-md); color: var(--fm-ink-2); margin: 0; }
body.fd-design #page-content .fm-plan-tile .fm-plan-tile__price { font-size: var(--fm-text-lg); font-weight: var(--fm-weight-bold); color: var(--fm-ink); margin: 0; }
body.fd-design #page-content .fm-plan-tile .fm-plan-tile__sub, body.fd-design #page-content .fm-plan-tile .fm-plan-tile__note { font-size: var(--fm-text-sm); color: var(--fm-ink-3); margin: 0; }
body.fd-design #page-content .fm-plan-tile[data-plan="basic"] .fm-plan-tile__text { color: var(--fm-chip-selected-ink); }
body.fd-design #page-content .fm-plan-tile:is([data-plan="pro"], [data-plan="pro-ai"]) .fm-plan-tile__name { color: var(--fm-pro); }
body.fd-design #page-content .fm-plan-tile[aria-current="true"] :is(.fm-plan-tile__name, .fm-plan-tile__text, .fm-plan-tile__price, .fm-plan-tile__sub, .fm-plan-tile__note, .fm-plan-tile__list, .fm-plan-tile__price small, .fm-plan-tile__list li) { color: var(--fm-selected-ink); }
/* FedM8Ask room panel and the Ask entry (jev-ask.css, approved-design.css paint them pale green with fixed inks). Maps to fm-btn--secondary (.ja-ask-btn),
 * fm-chip (.ja-tab, selected = .on), fm-card--alt (.ja-ask-entry) and fm-meta (.ja-time). Legacy: .ja-ask-btn, .ja-tab, .ja-name, .ja-time, .ja-ask-entry, .ja-role, .ja-dest */
body.fd-design.fd-design .ja-ask-btn { background: var(--fm-surface); color: var(--fm-ink); border: var(--fm-border-width) solid var(--fm-ink); border-radius: var(--fm-radius-pill); font-family: var(--fm-font-sans); font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design .ja-ask-btn:hover { background: var(--fm-surface-alt); }
body.fd-design.fd-design .ja-ask-entry { background: var(--fm-surface-alt); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-lg); color: var(--fm-ink); }
body.fd-design.fd-design .ja-ask-entry-label { color: var(--fm-ink); font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design .ja-tab { background: var(--fm-surface); color: var(--fm-ink-2); border: var(--fm-border-width) solid var(--fm-line-strong); border-radius: var(--fm-radius-pill); font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design .ja-tab.on { background: var(--fm-chip-selected-bg); color: var(--fm-chip-selected-ink); border-color: var(--fm-chip-selected-bg); font-weight: var(--fm-weight-bold); }
body.fd-design.fd-design :is(.ja-name, .ja-name-link) { color: var(--fm-ink); font-size: var(--fm-text-md); }
body.fd-design.fd-design .ja-time { color: var(--fm-ink-3); font-size: var(--fm-text-sm); }
body.fd-design.fd-design .ja-role { background: var(--fm-accent-soft); color: var(--fm-accent-ink); font-size: var(--fm-text-sm); }
body.fd-design.fd-design .ja-dest { background: var(--fm-accent-soft); color: var(--fm-accent-ink); font-size: var(--fm-text-md); }
body.fd-design.fd-design :is(.ja-note, .ja-helper-meta) { color: var(--fm-ink-3); font-size: var(--fm-text-sm); }
body.fd-design.fd-design .ja-helper-name { color: var(--fm-ink); }
/* Crumb under a rebuilt page title: the Ask entry sits directly below the header (jev-ask.js mountAskEntries). */
body.fd-design[data-d3-page] .ja-ask-entry { margin-block: 0 var(--fm-space-4); }
/* The Ask entry inside a rebuilt page header (.fm-page__head): ink on the alt surface in every preset, so the dark and high-contrast presets keep their contrast
 * (approved-design.css paints the button pale green with a fixed ink; the longer selector below wins by weight, not by load order). */
body.fd-design.fd-design[data-d3-page] .fm-page__head .ja-ask-entry { background: var(--fm-surface-alt); color: var(--fm-ink); border-color: var(--fm-line); }
body.fd-design.fd-design[data-d3-page] .fm-page__head .ja-ask-entry :is(.ja-ask-entry-label, .ja-note) { color: var(--fm-ink); }
body.fd-design.fd-design[data-d3-page] .fm-page__head .ja-ask-entry .ja-ask-btn { background: var(--fm-surface); color: var(--fm-ink); border-color: var(--fm-ink); }
body.fd-design.fd-design[data-d3-page] .fm-page__head .ja-ask-entry .ja-ask-btn:hover { background: var(--fm-surface-alt); }
/* Cert desk stage buttons, the Ez badge, the plans table header and the contract chips keep light-only fills (dark and high-contrast presets).
 * Legacy: button[data-cd-stage] > b, .ez-badge, #page-content th, .fx-chip (contract), .jh-quest-tag, .fx-entry */
body.fd-design.fd-design button[data-cd-stage] > b { background: var(--fm-surface-alt); color: var(--fm-ink); }
body.fd-design.fd-design button[data-cd-stage][aria-pressed="true"] > b, body.fd-design.fd-design button[data-cd-stage][aria-current="true"] > b { background: var(--fm-selected-bg); color: var(--fm-selected-ink); }
body.fd-design.fd-design .ez-badge { background: var(--fm-accent-soft); color: var(--fm-accent-ink); }
body.fd-design.fd-design #page-content table :is(th, thead td) { background: var(--fm-surface-alt); color: var(--fm-ink); }
body.fd-design.fd-design .fx-chip { background: var(--fm-info-soft); color: var(--fm-ink); border-color: var(--fm-line-strong); }
body.fd-design.fd-design .jh-quest-tag { color: var(--fm-ink-2); }
body.fd-design.fd-design .fx-entry.conf { background: var(--fm-info-soft); color: var(--fm-ink); border-color: var(--fm-line-strong); }
body.fd-design.fd-design .fx-entry.auto { background: var(--fm-surface); color: var(--fm-ink-2); border-color: var(--fm-line-strong); }
/* Room messages in FedM8Ask. Maps to fm-card--alt + fm-meta. Legacy: .ja-msg, .ja-msg-body, .ja-msg-title, .ja-msg-meta, .crx-msg */
body.fd-design.fd-design :is(.ja-msg, .crx-msg) { background: var(--fm-surface-alt); border-color: var(--fm-line); border-radius: var(--fm-radius-md); color: var(--fm-ink); }
body.fd-design.fd-design :is(.ja-msg-body, .ja-msg-title) { color: var(--fm-ink); font-size: var(--fm-text-md); }
body.fd-design.fd-design .ja-msg-meta { color: var(--fm-ink-3); font-size: var(--fm-text-sm); }
/* Teaming paper, canvas, ink and tag fills (assets/teaming.css declares them as light literals). Legacy: [class^="tm-"] */
body.fd-design.fd-design :is([class^="tm-"], [class*=" tm-"]) { --tm-paper: var(--fm-surface); --tm-canvas: var(--fm-bg); --tm-ink: var(--fm-ink); --tm-tag: var(--fm-accent-soft); --tm-tag-line: var(--fm-line-strong); --tm-olive-dark: var(--fm-ink); }
/* Contract card social strip: comment count and quote line keep fixed inks. Maps to fm-meta. Legacy: .cva-comments, .cva-quote */
body.fd-design.fd-design .cva-comments { color: var(--fm-ink-3); }
body.fd-design.fd-design .cva-quote { color: var(--fm-ink-3); }
body.fd-design.fd-design .cva-quote b { color: var(--fm-ink); }
body.fd-design.fd-design .cva-whosin { color: var(--fm-ink); }
/* Jobs & income (#/income): the official program links keep a full tap target now that text sizes come from tokens (axe target-size, ratchet run on #805). */
body.fd-design.fd-design .vets-income .vets-link { display: inline-flex; align-items: center; min-height: var(--fm-tap-min); }

/* ---------- Wave 4 aliases (delete a block when its screen is rebuilt on fm-* markup) ---------- */
/* Market charts inside Contracts > Market Research (#/charts is aliased there): the wrapper and its chips take the page tokens so the charts read in every theme */
body.fd-design .jd-intel { background: var(--fm-surface); border-color: var(--fm-line); color: var(--fm-ink); }
body.fd-design .jd-intel .jd-sec-title { color: var(--fm-ink); }
body.fd-design .jd-intel :is(.fm-section__meta, .dsh-no-co) { color: var(--fm-ink-2); }
body.fd-design .jd-intel .dsh-no-co a { color: var(--fm-ink); }
body.fd-design .jd-intel .fx-chip { background: var(--fm-surface-alt); color: var(--fm-ink); }
body.fd-design .jd-intel .fx-chip button { color: var(--fm-ink); }

/* My Profile header (site-social-people.js) sits under the rebuilt Team page head: avatar and filled button take the active-nav pair, so every preset keeps its contrast. */
body.fd-design.fd-design[data-d3-page] .ssp-avatar { background: var(--fm-nav-active-bg); color: var(--fm-nav-active-ink); }
body.fd-design.fd-design[data-d3-page] a.ssp-btn:not(.ssp-btn-quiet), body.fd-design.fd-design[data-d3-page] a.ssp-btn:not(.ssp-btn-quiet):visited { background: var(--fm-nav-active-bg); color: var(--fm-nav-active-ink); }

/* Inline links in running text carry an underline, not only a colour (WCAG 1.4.1). */
body.fd-design .vl .fm-link { text-decoration: underline; }
body.fd-design .vl a.fm-btn { text-decoration: none; }

/* ---------- Walk-through engine: ChevronStepper (ol.fm-stepper built by the engine) ---------- */
body.fd-design .walk-progress { margin: 0 0 var(--fm-space-3); }
body.fd-design .walk-progress ol.fm-stepper { flex-wrap: nowrap; counter-reset: fmstep; gap: 0; }
body.fd-design .walk-progress ol.fm-stepper > li { counter-increment: fmstep; flex: 1 1 0; min-width: 0; justify-content: center; margin-top: 0; }
body.fd-design .walk-progress ol.fm-stepper > li + li { margin-left: 0; margin-inline-start: calc(var(--fc-chev) * -1 + var(--fc-bold)); }
body.fd-design .walk-progress ol.fm-stepper .walk-seg { position: static; flex-direction: row; justify-content: center; gap: var(--fm-space-1); width: auto; min-width: 0; padding-block: 0; text-align: center; }
body.fd-design .walk-progress ol.fm-stepper .walk-seg::after { content: none; }
body.fd-design .walk-progress ol.fm-stepper .walk-seg::before { content: none; }
body.fd-design .walk-progress ol.fm-stepper > li[data-state="done"] .walk-seg::before {
  content: "\2713"; display: inline; flex: none; height: auto; border-radius: 0; background: none; clip-path: none;
  font-size: var(--fm-text-sm); font-weight: var(--fm-weight-bold);
}
body.fd-design .walk-progress ol.fm-stepper .walk-seg .walk-seg-label {
  display: block; min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); line-height: 1.2; color: inherit;
}
body.fd-design .walk-progress ol.fm-stepper > li[aria-current="step"] .walk-seg .walk-seg-label { font-weight: var(--fm-weight-bold); }
@media (max-width: 700px) {
  /* A phone shows the open section's name; the others show their number or a check, and keep their names for screen readers. */
  body.fd-design .walk-progress ol.fm-stepper > li { padding-inline: calc(var(--fm-space-1) + var(--fc-chev)); }
  body.fd-design .walk-progress ol.fm-stepper > li[aria-current="step"] { flex: 0 0 auto; max-width: 50%; }
  body.fd-design .walk-progress ol.fm-stepper > li:not([aria-current="step"]) .walk-seg .walk-seg-label {
    position: absolute; display: block; width: var(--fc-hair); height: var(--fc-hair); margin: calc(var(--fc-hair) * -1); padding: 0; overflow: hidden; clip-path: inset(50%);
  }
  body.fd-design .walk-progress ol.fm-stepper > li[data-state="todo"] .walk-seg::before {
    content: counter(fmstep); display: inline; flex: none; height: auto; border-radius: 0; background: none; clip-path: none;
    font-size: var(--fm-text-sm); font-weight: var(--fm-weight-bold);
  }
}

/* ---------- Walk-through engine: the rest of the walk-* surface onto the tokens ---------- */
body.fd-design .walk .walk-count { margin: var(--fm-space-2) 0 var(--fm-space-4); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); color: var(--fm-ink-2); }
@media (max-width: 700px) {
  body.fd-design .walk .walk-count { background: var(--fm-surface); border-color: var(--fm-line); }
}
body.fd-design .walk .walk-ask { margin: var(--fm-space-5) 0 var(--fm-space-2); font-family: var(--fm-font-sans); font-size: var(--fm-text-2xl); font-weight: var(--fm-weight-bold); line-height: 1.2; color: var(--fm-ink); }
body.fd-design .walk .walk-help { margin: 0 0 var(--fm-space-4); font-size: var(--fm-text-md); line-height: 1.5; color: var(--fm-ink-2); }
body.fd-design .walk .walk-official-link { font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); color: var(--fm-ink); text-decoration: underline; }
body.fd-design .walk .walk-points { font-size: var(--fm-text-md); color: var(--fm-ink); }
body.fd-design .walk .walk-checked { font-size: var(--fm-text-sm); color: var(--fm-ink-2); }
body.fd-design .walk .walk-guest-note { font-size: var(--fm-text-sm); color: var(--fm-ink-3); }
body.fd-design .walk .walk-why { font-size: var(--fm-text-sm); color: var(--fm-ink-2); }
body.fd-design .walk .walk-why summary { display: list-item; padding-block: var(--fm-space-2); font-weight: var(--fm-weight-semibold); color: var(--fm-ink); }
body.fd-design .walk .walk-error[role="alert"] { font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); color: var(--fm-urgent); }

/* Answers: the ChoiceCard carries the look; the legacy label colours would sit blue on the navy selected card. */
body.fd-design .walk .walk-option.fm-choice { align-content: center; justify-items: center; min-height: calc(var(--fm-tap-min) * 1.5); text-align: center; }
body.fd-design .walk .walk-option.fm-choice :is(.walk-option-label, .fm-choice__label) { font-size: var(--fm-text-lg); color: inherit; }
body.fd-design .walk .walk-option.fm-choice :is(.walk-option-hint, .fm-choice__sub) { font-size: var(--fm-text-sm); color: var(--fm-ink-3); }
body.fd-design .walk .walk-option.fm-choice[aria-checked="true"] :is(.walk-option-label, .fm-choice__label, .walk-option-hint, .fm-choice__sub) { color: var(--fm-selected-ink); }
body.fd-design .walk .fm-choice[aria-checked="true"] { box-shadow: var(--fm-shadow-1); }

/* Resume banner, step list, pills, review rows. */
body.fd-design .walk .walk-resume p { font-size: var(--fm-text-md); color: var(--fm-ink); }
body.fd-design .walk .walk-steps { padding: var(--fm-space-2) var(--fm-space-3); background: var(--fm-surface); border: var(--fc-hair) solid var(--fm-line); border-radius: var(--fm-radius-md); }
body.fd-design .walk .walk-steps-group-label { font-size: var(--fm-text-sm); font-weight: var(--fm-weight-bold); letter-spacing: 0; text-transform: none; color: var(--fm-ink-3); }
body.fd-design .walk .walk-steps-row { min-height: var(--fm-tap-min); font-size: var(--fm-text-md); color: var(--fm-ink); border-bottom-color: var(--fm-line); }
body.fd-design .walk .walk-pill { padding: 0 var(--fm-space-2); border-radius: var(--fm-radius-pill); background: var(--fm-info-soft); color: var(--fm-ink); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); }
body.fd-design .walk .walk-pill-done { background: var(--fm-success-soft); color: var(--fm-success); }
body.fd-design .walk .walk-pill-current { background: var(--fm-nav-active-bg); color: var(--fm-nav-active-ink); }
body.fd-design .walk .walk-review { background: var(--fm-surface); border: var(--fc-hair) solid var(--fm-line); border-radius: var(--fm-radius-md); }
body.fd-design .walk .walk-review li { border-bottom-color: var(--fm-line); }
body.fd-design .walk .walk-review-q { font-size: var(--fm-text-sm); color: var(--fm-ink-2); }
body.fd-design .walk .walk-review-a { font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); color: var(--fm-ink); }

/* Focus: the shared ring on every control except the stepper, whose chevrons clip an outside ring (the stepper has its own inset ring). */
body.fd-design .walk :is(button, a, input, summary):not(.walk-seg):focus-visible { outline: var(--fc-ring) solid var(--fm-focus-ring); outline-offset: var(--fc-ring); }

/* Find contracts and Team Up (os-find.css) declare their palette as light literals on .fx, .fx-dialog and .fx-sheet, so the dark and
   high-contrast presets kept dark ink on dark surfaces (axe colour-contrast in the profile editor wizard). Map the palette onto tokens. */
body.fd-design.fd-design :is(.fx, .fx-dialog, .fx-sheet) {
  --fx-ink: var(--fm-ink); --fx-ink2: var(--fm-ink-2); --fx-muted: var(--fm-ink-2); --fx-line: var(--fm-line); --fx-line2: var(--fm-line-strong);
  --fx-navy: var(--fm-accent-ink); --fx-navy-d: var(--fm-ink); --fx-sel: var(--fm-surface-alt); --fx-match: var(--fm-accent-ink);
  --fx-gold-bg: var(--fm-warn-soft); --fx-gold-fg: var(--fm-warn); --fx-green: var(--fm-success); --fx-green-bg: var(--fm-success-soft); --fx-green-fg: var(--fm-success);
  --fx-red-bg: var(--fm-urgent-soft); --fx-red-fg: var(--fm-urgent); --fx-grey-bg: var(--fm-surface-alt); --fx-teal: var(--fm-accent-ink);
  --fx-step-done: var(--fm-action); --fx-step-cur: var(--fm-accent-ink);
  color: var(--fm-ink);
}
body.fd-design.fd-design .fx-tile { background: var(--fm-surface); color: var(--fm-ink); }
body.fd-design.fd-design :is(.fx-tile[aria-checked="true"], .fx-tile[aria-pressed="true"]) { background: var(--fm-selected-bg); color: var(--fm-selected-ink); }
body.fd-design.fd-design .fx-av, body.fd-design.fd-design .fx-av.ind, body.fd-design.fd-design .fx-av.sub { background: var(--fm-accent-soft); color: var(--fm-accent-ink); }
/* --fx-navy is mostly text (quiet buttons, tag badges); the filled role badges keep a filled token pair. */
body.fd-design.fd-design .fx-badge.role-prime { background: var(--fm-action); color: var(--fm-action-ink); }
body.fd-design.fd-design :is(.fx-badge.role-sub, .fx-badge.role-ind) { background: var(--fm-accent-soft); color: var(--fm-accent-ink); }
body.fd-design.fd-design .fx-badge.tag { background: var(--fm-info-soft); color: var(--fm-ink); }
body.fd-design.fd-design .fx-badge.how { background: var(--fm-surface); color: var(--fm-accent-ink); }
body.fd-design.fd-design :is(.fx-tile[aria-checked="true"], .fx-tile[aria-pressed="true"]) :is(.t, .b) { color: var(--fm-selected-ink); }
/* os-find.css paints its surfaces with light literals (#fff and pale fills); follow the preset's surfaces so ink tokens stay readable. */
body.fd-design.fd-design :is(.fx-preview, .fx-search, .fx-q, .fx-sel, .fx-card, .fx-showmore, .fx-empty, .fx-close, .fx-facts, .fx-compose, .fx-dialog, .fx-x, .fx-box, .fx-pcard, .fx-bar, .fx-code, .fx-box2) { background: var(--fm-surface); color: var(--fm-ink); }
body.fd-design.fd-design :is(.fx-field input, .fx-field select, .fx-field textarea) { background: var(--fm-surface); color: var(--fm-ink); }
body.fd-design.fd-design :is(.fx-btn-g, .fx-fchip, .fx-mem.me, .fx-drop.over) { background: var(--fm-surface-alt); color: var(--fm-ink); }
body.fd-design.fd-design .fx-btn-g:hover { background: var(--fm-selected-bg); color: var(--fm-selected-ink); }
body.fd-design.fd-design .fx-code[aria-checked="true"] { background: var(--fm-selected-bg); color: var(--fm-selected-ink); }
/* os-find.css text set as light-theme literals. */
body.fd-design.fd-design :is(.fx-mem-note, .fx-talk-body) { color: var(--fm-ink); }
body.fd-design.fd-design .fx-change .sub { color: var(--fm-ink-2); }
body.fd-design.fd-design :is(.fx-steps li.done, .fx-steps li.cur, .fx-stage li.done, .fx-stage li.cur, .fx-badge.how.jev) { color: var(--fm-accent-ink); }
body.fd-design.fd-design :is(.fx-tab[aria-selected="true"], .fx-fchip[aria-pressed="true"], .fx-whoseg[aria-pressed="true"]) { background: var(--fm-chip-selected-bg); color: var(--fm-chip-selected-ink); }
body.fd-design.fd-design :is(.fx-star, .fx-stars button, .fx-rating-star) { color: var(--fm-warn); }
body.fd-design.fd-design .fx-box2 { background: var(--fm-surface-alt); color: var(--fm-ink); }

/* ---------- Contract discussion (C12) -> fm-post, fm-sorttabs, fm-thread. Legacy: .crx-chat, .crx-chat-head, .crx-chat-tab, .crx-msg, .crx-thread, .crx-like, .fr-tab, .fr-post, .fr-branch, .fr-helpful, .cva-helpful ----------
 * Voting is one toggle, "Helpful" (aria-pressed, visible count). No down arrow on this surface. */
body.fd-design.fd-design .crx-chat { background: var(--fm-surface); color: var(--fm-ink); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow-1); }
body.fd-design.fd-design .crx-chat-head { border-bottom: var(--fm-border-width) solid var(--fm-line); }
body.fd-design.fd-design .crx-chat-head :is(h2, strong) { font-size: var(--fm-text-lg); font-weight: var(--fm-weight-bold); line-height: 1.3; color: var(--fm-ink); }
body.fd-design.fd-design .crx-chat-tabs { background: var(--fm-surface); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-xl); gap: var(--fm-space-1); padding: var(--fm-space-1); }
body.fd-design.fd-design :is(.crx-chat-tab, .fr-tab) { min-height: var(--fm-tap-min); padding: var(--fm-space-1) var(--fm-space-4); border-radius: var(--fm-radius-pill); background: transparent; color: var(--fm-ink-2); font-family: var(--fm-font-sans); font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design :is(.crx-chat-tab.on, .crx-chat-tab[aria-selected="true"], .fr-tab[aria-selected="true"]) { background: var(--fm-chip-selected-bg); border-color: transparent; color: var(--fm-chip-selected-ink); font-weight: var(--fm-weight-bold); }
body.fd-design.fd-design :is(.crx-chat-tab, .fr-tab):hover { background: var(--fm-surface-alt); color: var(--fm-ink); }
body.fd-design.fd-design .fr-post { background: var(--fm-surface); color: var(--fm-ink); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-lg); padding: var(--fm-space-4); }
body.fd-design.fd-design .crx-msg-body { font-size: var(--fm-text-md); line-height: 1.55; color: var(--fm-ink-2); }
body.fd-design.fd-design :is(.crx-msg-time, .crx-msg-ctx) { font-size: var(--fm-text-sm); color: var(--fm-ink-3); }
body.fd-design.fd-design .crx-msg-name { font-size: var(--fm-text-md); }
/* Thread line: a child hangs from its parent by a 2px rule. */
body.fd-design.fd-design :is(.crx-thread.d1, .crx-thread.d2, .crx-thread.d3, .fr-branch) { border-inline-start: var(--fc-bold) solid var(--fm-line-strong); padding-inline-start: var(--fm-space-3); }
/* Helpful: one toggle, 44px tap, visible count, pressed state is more than colour (bold + filled). */
body.fd-design.fd-design :is(.cva-vote.cva-helpful, .crx-reactions .crx-like, .fr-act.fr-helpful) { display: inline-flex; align-items: center; gap: var(--fm-space-2); min-height: var(--fm-tap-min); min-width: var(--fm-tap-min); padding: var(--fm-space-1) var(--fm-space-4); border: var(--fm-border-width) solid var(--fm-line-strong); border-radius: var(--fm-radius-pill); background: var(--fm-surface); color: var(--fm-ink); font-family: var(--fm-font-sans); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design :is(.cva-vote.cva-helpful, .crx-reactions .crx-like, .fr-act.fr-helpful):hover:not(:disabled) { background: var(--fm-surface-alt); }
body.fd-design.fd-design :is(.cva-vote.cva-helpful, .crx-reactions .crx-like, .fr-act.fr-helpful):is([aria-pressed="true"], .on) { background: var(--fm-accent-soft); border-color: var(--fm-accent-ink); color: var(--fm-accent-ink); font-weight: var(--fm-weight-bold); }
body.fd-design.fd-design :is(.cva-vote.cva-helpful, .crx-reactions .crx-like, .fr-act.fr-helpful):focus-visible { outline: var(--fc-ring) solid var(--fm-focus-ring); outline-offset: var(--fc-ring); }
body.fd-design.fd-design .cva-vote.cva-helpful:disabled { opacity: .75; cursor: default; }
body.fd-design.fd-design :is(.crx-msg-name, .crx-msg-name.static) { color: var(--fm-ink); }
body.fd-design.fd-design :is(.crx-reactions button:not(.crx-like), .crx-identity, .crx-notsent, .fd-public-policy) { color: var(--fm-ink-2); font-size: var(--fm-text-sm); }
body.fd-design.fd-design .crx-reactions button:not(.crx-like) { min-height: var(--fm-tap-min); padding: var(--fm-space-1) var(--fm-space-3); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design .crx-composer-ta { background: var(--fm-surface-alt); color: var(--fm-ink); border-color: var(--fm-line-strong); }
body.fd-design.fd-design .crx-composer-box, body.fd-design.fd-design .crx-composer { background: var(--fm-surface); border-color: var(--fm-line); }
body.fd-design.fd-design .crx-chat-tab { padding-inline: var(--fm-space-3); }
body.fd-design.fd-design .cva-proof { background: var(--fm-surface-alt); color: var(--fm-ink); border-color: var(--fm-line); }
/* ---------- Contract discussion header row (C12): comment count, Hot / New / Top, Share, FedM8 AI post -> fm-sorttabs, fm-post--bot ---------- */
body.fd-design.fd-design .fr-sortbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fm-space-2) var(--fm-space-4); margin: var(--fm-space-2) 0 var(--fm-space-3); }
body.fd-design.fd-design .fr-count-head { margin: 0; font-size: var(--fm-text-md); font-weight: var(--fm-weight-bold); color: var(--fm-ink); }
body.fd-design.fd-design .fr-sort { display: inline-flex; flex-wrap: wrap; gap: var(--fm-space-1); padding: var(--fm-space-1); background: var(--fm-surface); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-xl); }
body.fd-design.fd-design .fr-sort-tab { min-height: var(--fm-tap-min); min-width: var(--fm-tap-min); padding: var(--fm-space-1) var(--fm-space-4); border: 0; border-radius: var(--fm-radius-pill); background: transparent; color: var(--fm-ink-2); font-family: var(--fm-font-sans); font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); cursor: pointer; }
body.fd-design.fd-design .fr-sort-tab:hover { background: var(--fm-surface-alt); color: var(--fm-ink); }
body.fd-design.fd-design .fr-sort-tab[aria-selected="true"] { background: var(--fm-chip-selected-bg); color: var(--fm-chip-selected-ink); font-weight: var(--fm-weight-bold); }
body.fd-design.fd-design .fr-sort-tab:focus-visible { outline: var(--fc-ring) solid var(--fm-focus-ring); outline-offset: var(--fc-ring); }
body.fd-design.fd-design .fr-share-live { flex-basis: 100%; margin: 0; min-height: 0; font-size: var(--fm-text-sm); color: var(--fm-ink-2); }
body.fd-design.fd-design .fr-share-live:empty { display: none; }
body.fd-design.fd-design .fr-act.fr-share, body.fd-design.fd-design .fr-act.fr-bot-link { min-height: var(--fm-tap-min); padding: var(--fm-space-1) var(--fm-space-3); color: var(--fm-ink); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-semibold); }
body.fd-design.fd-design .fr-act.fr-share:focus-visible, body.fd-design.fd-design .fr-act.fr-bot-link:focus-visible { outline: var(--fc-ring) solid var(--fm-focus-ring); outline-offset: var(--fc-ring); }
body.fd-design.fd-design .fr-post--bot { background: var(--fm-pro-soft); color: var(--fm-ink); border: var(--fc-bold) dashed var(--fm-pro); }
body.fd-design.fd-design .fr-bot-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-2); margin: 0 0 var(--fm-space-2); font-size: var(--fm-text-md); color: var(--fm-ink); }
/* The room component reads its own --fr-* palette; point it at the preset tokens so names, Reply, Share, the count line and the box stay readable in every preset. */
body.fd-design.fd-design .fr-room { --fr-paper: var(--fm-surface); --fr-canvas: var(--fm-bg); --fr-ink: var(--fm-ink); --fr-muted: var(--fm-ink-2); --fr-line: var(--fm-line); --fr-soft: var(--fm-surface-alt); --fr-olive: var(--fm-selected-bg); --fr-olive-dark: var(--fm-ink); }
body.fd-design.fd-design .fr-room .fr-btn.primary { background: var(--fm-action); border-color: var(--fm-action); color: var(--fm-action-ink); }
body.fd-design.fd-design .fr-room :is(.fr-input, textarea.fr-input) { background: var(--fm-surface-alt); color: var(--fm-ink); border-color: var(--fm-line-strong); }
body.fd-design.fd-design .fr-room :is(.fr-compose-host, .fr-compose, .commons-composer) { background: var(--fm-surface); color: var(--fm-ink); }
body.fd-design.fd-design.fd-design .fr-room .fr-act:not(.rx-check-btn) { color: var(--fm-ink); }