/* ============================================================================
   BD BRIDGE — migration scaffolding, not design.
   Loaded AFTER the harness (bd-fonts → bd-tokens → bd-blocks → bd-rig → bd-pop)
   and BEFORE the app's base <style>, so at equal specificity it beats the
   harness and loses to the app. Its whole job is slice-1 pixel parity: the
   harness files stay byte-identical to bd-design-harness/ (GENERATED — never
   hand-edit them); every compatibility fix lives here instead, in sections
   with a named expiry. Delete each section at its slice; delete the file when
   the last section goes. See bd-design-harness/CLAUDE.md §6 (migration policy).
   ============================================================================ */

/* ---- A · Harness token gaps — upstream defects. The app's hover menus read
        --pop-show / --pop-hide (bdHoverDwell / bdHoverGrace, core/state.js),
        but no harness file defines them. (--pop-hold, --pop-out and --pop-sheet
        went on 11 Oct 2026 with bd-pop.js and the bar and sheet rules of
        bd-pop.css, their only readers.) EXPIRES: when the Design System
        regenerates bd-tokens.css with these included. ---- */
:root {
  /* THE HOVER DWELL. POP.md specifies 140ms, which is the harness value and right for a row action
     bar you are already pointing at. Across the app it proved too eager — menus appeared while the
     pointer was only passing through (Brock, 1 Aug 2026: "you need to hover for a bit longer before
     they show up"). 400ms is long enough to read as deliberate and short enough not to feel stuck.
     This is the ONE dwell in the app: every hover menu reads it through bdHoverDwell (core/state.js),
     the reference preview, the markdown legend, the To-Do task menu and its Slack menu, rather than
     each carrying its own number. */
  --pop-show: 400ms;
  --pop-hide: 260ms;
}

/* ---- A2 · The missing 800 face — the app self-hosts Galano 300–700 as woff2
        (index.html @font-face block); the harness's figures set weight 800.
        bd-fonts.css is shipped but NOT linked: its OTF faces carry different
        line metrics to the app's woff2 (every control measures ~2px taller),
        so linking it double-declares the family and reflows the whole app.
        This declares only the face the app lacks. EXPIRES: when the Design
        System regenerates bd-fonts.css from the woff2 sources. ---- */
@font-face {
  font-family: "Galano Grotesque Alt";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GalanoGrotesqueAlt-ExtraBold.otf") format("opentype");
}

/* ---- B · Page rhythm. bd-blocks.css sets body line-height 1.5, which adds ~4px of height
        to every legacy control; legacy layout was built on `normal`. The blanket override
        therefore STAYS — the Rig is desktop-only, so mobile is still entirely legacy layout
        and cancelling it there regressed ~15 elements in a 375px A/B against origin/main
        (a `body:not(.bd-rig)` version was tried and reverted: the body flag is set on every
        tier, so it silently let the 1.5 rhythm into the phone).
        The harness rhythm is re-established on the Rig's own zones instead, inside the desk
        tier, where the layout is the harness's. EXPIRES: when no legacy surface remains. ---- */
body { line-height: normal; }
/* TIER — mirrors BD_TIER.desk (core/tiers.js); a static sheet can't read it, so flip both together. */
@media (min-width: 1025px) {
  body.bd-rig .bd-rail, body.bd-rig .bd-index, body.bd-rig .bd-band,
  body.bd-rig .bd-stage, body.bd-rig .bd-drawer { line-height: 1.5; }
}

/* ---- C · Bare-element rollbacks — bd-blocks.css element rules vs legacy
        content that never styled these (rendered Markdown, chat, stray form
        controls). :where() keeps specificity at the element level so the
        app's own rules still win everywhere they exist. EXPIRES: final
        deletion pass, when no legacy surface remains. ---- */
p { margin: revert; max-width: revert; line-height: revert; }
h1, h2, h3, h4 {
  margin: revert; font-size: revert; font-weight: revert;
  line-height: revert; letter-spacing: revert;
}
input:where(:not([class])) {
  background-color: revert; border: revert; outline: revert;
}
img:where(:not([class])) { display: revert; max-width: revert; }

/* ---- D1 · Post-flip carriers — the canon flip (slice 1b) deleted the app's
        .bd-* component definitions; bd-blocks.css owns the names. These lines
        carry the pieces the harness does not define but live call sites need.
        EXPIRES: per line, as call sites convert or the harness absorbs the
        device (flag each for the Design System). ---- */
/* inline svg glyphs in buttons carry no width attrs — unsized they'd render 300×150 */
.bd-btn svg { width: 15px; height: 15px; }
.bd-btn-icon svg { width: 18px; height: 18px; }
/* app-only variants mapped onto harness vocabulary */
.bd-btn--mint { background: var(--mint-400); color: var(--accent); font-weight: var(--fw-semibold); }
.bd-btn--mint:hover { background: var(--mint-500); }
.bd-chip.on { background: var(--accent); color: var(--accent-2); }   /* .on = the app's normalised active; harness uses aria-pressed */
.bd-badge--neutral { background: color-mix(in srgb, var(--accent) 9%, var(--surface-body)); color: var(--hickory-500); }
.bd-badge--risk { background: var(--danger); color: var(--accent-2); }
.bd-badge--hickory { background: var(--accent); color: var(--accent-2); }
.bd-card.is-clickable { cursor: pointer; }
.bd-card.is-clickable:hover { background: var(--cream-200); }
.bd-card--highlight.is-clickable:hover { background: var(--hickory-600); }
.bd-card-group { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; }
/* the legacy card inner type, restated in harness terms (BEM __big/__cap/__meta at call sites later) */
.bd-card .big { font-size: clamp(23px, 2.2vw, 38px); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); line-height: 1; }
/* .cap is a kicker labelling the figure above it — i.e. the harness micro-label, not body copy.
   Mapping it to --u-fs-mini/500/.08em keeps its identity and drops the illegal 700 to 500.
   (Cards carrying a figure convert to .bd-stat proper in their package's PR.) */
.bd-card .cap { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .08em; }
.bd-card .meta { font-size: var(--u-fs-mini); color: var(--hickory-500); }
.bd-card--highlight .meta { color: var(--ink-dark-2); }
/* task titles are content, not fields — no resting underline, no focus trace */
.bd-input--bare, .bd-input--bare:focus { background-color: transparent; border: none; padding: 6px 2px; font-size: 14.5px; background-image: none; transition: none; }
/* sub-tabs render as harness tabs until call sites drop the --sub */
.bd-tabs--sub { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); }
.bd-tab--sub { appearance: none; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 0 0 5px; font-size: var(--u-fs-row); font-weight: var(--fw-medium); color: var(--hickory-500);
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-position: left bottom; background-size: 0 2px;
  transition: background-size var(--dur-base) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bd-tab--sub.on { color: var(--accent); font-weight: var(--fw-semibold); background-size: 100% 2px; }
/* the cat-head disclosure caret (app-only device) */
.bd-cat-head .caret { width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex: 0 0 auto; opacity: .55; }
/* touch targets — the harness carries none for blocks yet (flagged upstream); DoD demands 44px */
@media (pointer: coarse) {
  .bd-btn { min-height: 44px; }
  .bd-btn-icon { width: 44px; height: 44px; }
}
/* the rail's brand mark is a BUTTON in the app (it opens the user's Mobile-shortcut destination —
   core/nav-rail.js ensureBrand; Brock, 19 Aug 2026). The harness draws it as an inert span, so the
   UA button chrome is stripped here rather than in the generated rig.css. */
body.bd-rig .bd-rail__brand { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; width: 100%; cursor: pointer; }

/* ---- D1b · The disappearing-control fix — UPSTREAM DEFECT.
        bd-blocks.css rests .bd-check/.bd-radio/.bd-switch on --surface-body
        (cream-200), which is the exact fill of .bd-work — a resting checkbox
        on the working pane measures 1.00:1 and is simply not there. The app
        had solved this deliberately (its "disappearing-checkbox law": the
        resting wash follows its SURFACE). cream-300 is the lightest step that
        reads on all three cream fills. Flag for the Design System: the
        resting control needs a fill one step darker than any pane it sits on.
        EXPIRES: when bd-blocks.css rests controls on cream-300. ---- */
.bd-check, .bd-radio, .bd-switch { background: var(--cream-300); }
.bd-check:checked, .bd-radio:checked, .bd-switch:checked { background: var(--mint-400); }
/* on a dark ground the wash inverts — a cream-300 square on hickory is a hole, not a control */
.bd-theme--dark .bd-check, .bd-theme--dark .bd-radio, .bd-theme--dark .bd-switch,
.bd-on-dark .bd-check, .bd-on-dark .bd-radio, .bd-on-dark .bd-switch { background: rgba(255,241,226,.26); }
.bd-theme--dark .bd-check:checked, .bd-theme--dark .bd-radio:checked, .bd-theme--dark .bd-switch:checked,
.bd-on-dark .bd-check:checked, .bd-on-dark .bd-radio:checked, .bd-on-dark .bd-switch:checked { background: var(--mint-400); }

/* ---- D2 · Legacy control mechanics — the app's radio is a decorative span
        driven by .sel on its row, and its switch is an .on-class button with
        a .knob span; the harness styles the <input> itself. Carried here so
        every existing control keeps working until its package converts the
        markup. :not(input) guards make these self-retiring: a converted
        harness control never matches them. EXPIRES: per call site. ---- */
.bd-radio:not(input) { position: relative; }
.bd-radio-row.sel .bd-radio { background: var(--mint-400); }
.bd-radio-row.sel .bd-radio::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bd-radio-row input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; }
.bd-radio-row input[type="radio"]:focus-visible + .bd-radio { outline: 2px solid var(--mint-600); outline-offset: 2px; }
.bd-switch:not(input) { position: relative; flex: 0 0 auto; width: 46px; height: 26px; padding: 0; border: none; border-radius: 0; cursor: pointer; transition: background .18s; }   /* fill comes from D1b, so both switch generations rest identically */
.bd-switch:not(input)::before { content: none; }   /* suppress the harness pseudo-knob on legacy switches — the .knob span is the knob */
.bd-switch:not(input).on { background: var(--mint-400); }
.bd-switch:not(input) .knob { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 0; background: var(--accent); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.bd-switch:not(input) .knob::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--mint-400); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.2); opacity: 0; transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1); }
.bd-switch:not(input).on .knob { transform: translateX(20px); }
.bd-switch:not(input).on .knob::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* ---- D3 · Dark-ground adapters — the theme system is retired, but dark
        surfaces still hold canon components. Until each converts to explicit
        --on-dark variants, map components inside the old dark markers to the
        harness's own on-dark treatments (mirrored from bd-blocks.css).
        EXPIRES: per surface, at its package PR. ---- */

/* D3a · the secondary-ink remap. Every harness use of --hickory-500/-400/-300
   is INK (verified: 26 uses, none a fill), so re-pointing them inside a dark
   container fixes EVERY canon component's secondary text at once — labels,
   counts, chips, tags, seg buttons, actions, list subs, card meta, hints,
   placeholders. This is the idiom core/side-panel.js already uses for the
   app's own ramp. --accent is deliberately NOT remapped: it is a fill as
   often as ink (button/chip fills, the tab underline). Measured need: a
   .bd-cat-label on the To-Do side panel was hickory-500 on hickory-600 —
   1.3:1, invisible.
   `.bd-sidepanel` was REMOVED from this selector on 30 Jul 2026 — it was the one entry here with
   no ground behind it. The other three are markers that mean "a dark container"; .bd-sidepanel
   only means "a content menu", and it is dark ONLY on the old desktop shell. Under the Rig, and on
   every phone, the panel is a LIGHT surface — so handing it the dark ink ramp put cream ink on a
   cream panel (Today's .bd-cat-label, inbox.js:596). It now sits in the tier-gated group below,
   beside `body.bd-shell .pane-left`, where it is dark for real. */
.bd-theme--dark, .bd-on-dark, .on-dark {
  --hickory-500: var(--ink-dark-2);
  --hickory-400: var(--ink-dark-3);
  --hickory-300: var(--ink-dark-3);
}
/* The workspace shell's side panes sat on the dark shellbox and declared no ground scope of
   their own. Under the RIG only ONE of the two is still dark: the index is hickory-700, and the
   drawer became cream-100 (harness law 1 — the drawer is a --surface-quiet pane). So the ramp
   follows the index alone; handing it to the drawer would put cream ink on a cream fill, which
   is the failure this remap exists to prevent, inverted.
   `.pane-right` is deliberately ABSENT from the Rig branch. EXPIRES: when the index's own
   children carry --on-dark explicitly (their package PRs). */
/* TIER — mirrors BD_TIER.desk (core/tiers.js); a static sheet can't read it, so flip both together. */
@media (min-width: 1025px) {
  body.bd-shell .pane-left, body.bd-shell .pane-right,
  body.bd-shell .bd-sidepanel,
  body.bd-rig .bd-index {
    --hickory-500: var(--ink-dark-2);
    --hickory-400: var(--ink-dark-3);
    --hickory-300: var(--ink-dark-3);
  }
  /* the cream panes must NOT inherit the dark ramp from a parent */
  body.bd-shell .pane-centre,
  body.bd-rig .bd-stage, body.bd-rig .bd-drawer {
    --hickory-500: #5F4639;
    --hickory-400: #8A6E5E;
    --hickory-300: #B49F92;
  }
}
.bd-theme--dark .bd-btn, .bd-on-dark .bd-btn { background: rgba(255,241,226,.12); color: var(--ink-dark-1); }
.bd-theme--dark .bd-btn:hover, .bd-on-dark .bd-btn:hover { background: rgba(255,241,226,.2); }
.bd-theme--dark .bd-btn--primary, .bd-on-dark .bd-btn--primary { background: var(--accent-2); color: var(--accent); }
.bd-theme--dark .bd-btn--ghost, .bd-on-dark .bd-btn--ghost { background: transparent; color: var(--ink-dark-2); }
.bd-theme--dark .bd-btn--ghost:hover, .bd-on-dark .bd-btn--ghost:hover { color: var(--ink-dark-1); }
.bd-theme--dark .bd-btn-icon, .bd-on-dark .bd-btn-icon { color: var(--ink-dark-3); }
.bd-theme--dark .bd-btn-icon:hover, .bd-on-dark .bd-btn-icon:hover { color: var(--ink-dark-1); }
.bd-theme--dark .bd-action, .bd-on-dark .bd-action { color: var(--ink-dark-2); }
.bd-theme--dark .bd-action:hover, .bd-theme--dark .bd-action--armed,
.bd-on-dark .bd-action:hover, .bd-on-dark .bd-action--armed { color: var(--ink-dark-1); }
.bd-theme--dark .bd-chip, .bd-on-dark .bd-chip { background: rgba(255,241,226,.12); color: var(--ink-dark-2); }
.bd-theme--dark .bd-chip[aria-pressed="true"], .bd-theme--dark .bd-chip.on,
.bd-on-dark .bd-chip[aria-pressed="true"], .bd-on-dark .bd-chip.on { background: var(--accent-2); color: var(--accent); }
.bd-theme--dark .bd-tag, .bd-on-dark .bd-tag { background: rgba(255,241,226,.12); color: var(--ink-dark-2); }
.bd-theme--dark .bd-pill, .bd-on-dark .bd-pill { background: rgba(255,241,226,.12); color: var(--ink-dark-2); }
.bd-theme--dark .bd-cat-label, .bd-theme--dark .bd-cat-count,
.bd-on-dark .bd-cat-label, .bd-on-dark .bd-cat-count { color: var(--ink-dark-3); }
.bd-theme--dark .bd-label, .bd-on-dark .bd-label { color: var(--ink-dark-3); }
.bd-theme--dark .bd-input, .bd-on-dark .bd-input { color: var(--ink-dark-1);
  border-color: var(--field-line-dark); }
.bd-theme--dark .bd-input:hover:not(:focus):not([readonly]):not(:disabled),
.bd-on-dark .bd-input:hover:not(:focus):not([readonly]):not(:disabled) { box-shadow: inset 0 0 0 1px var(--field-line-dark); }
.bd-theme--dark .bd-input:focus, .bd-on-dark .bd-input:focus { border-color: var(--mint-400);
  box-shadow: inset 0 0 0 1px var(--mint-400); }
.bd-theme--dark .bd-input::placeholder, .bd-on-dark .bd-input::placeholder { color: var(--ink-dark-3); }
.bd-tabs--dark .bd-tab, .bd-tabs.on-dark .bd-tab, .bd-tabs--sub.on-dark .bd-tab--sub { color: var(--ink-dark-3);
  background-image: linear-gradient(var(--mint-400), var(--mint-400)); }
.bd-tabs--dark .bd-tab:hover, .bd-tabs--dark .bd-tab.on,
.bd-tabs.on-dark .bd-tab:hover, .bd-tabs.on-dark .bd-tab.on,
.bd-tabs--sub.on-dark .bd-tab--sub:hover, .bd-tabs--sub.on-dark .bd-tab--sub.on { color: var(--ink-dark-1); }

/* ---- E · RETIRED at slice 2 (the Rig). bd-rig.css now OWNS the .bd-rail family — the
        icon-square rail is the real one, so the pins that held the old labelled-tile rail
        off the harness geometry are scoped to the ui:rig=0 hatch and nothing else. Under
        the Rig these rules must not apply at all: each one cancels something the harness
        needs (the canvas fill, the square's own size, the flyout's shadow).
        EXPIRES: when the old shell block is deleted after the Rig's soak. ---- */
body.bd-shell .bd-rail { background: transparent; overflow: visible; gap: normal; }
body.bd-shell .bd-rail-item {
  width: auto; height: auto; font-size: inherit;
  transition: none; display: inline-flex;
}
body.bd-shell .bd-rail-item:hover { color: inherit; }
body.bd-shell .bd-rail-flyout { display: block; box-shadow: none; }