/* ==========================================================================
   TRANSFER CENTER — CAPTURE-FIRST IA  (flag: ENABLE_TC_CAPTURE_FIRST)
   Loaded ONLY when the flag is on (transfer.html head). Flag-OFF carries zero
   bytes and renders byte-identical.

   Plan: .planning/transfer-center/IA_RESEQUENCE_PLAN_2026-07-20.md
   Design decision (doctor, 2026-07-20): capture is the pre-call hero; intake
   recedes to a single glanceable summary line that expands on tap; the
   disposition rides compact pre-call and promotes to full weight at wrap-up.

   HOW IT WORKS — no DOM moves:
   #tcWorkspaceForm is ALREADY display:flex/column, so we only re-assign `order`
   on the existing children. Every recorder / extraction / canvas binding is by
   id or [data-field] (position-independent), so re-weighting can't break them.

   SAFE DEGRADE: the intake collapse is gated on body.tc-captured-collapsed,
   a class ADDED by capture-first.js. If that module ever fails to load, no
   collapse happens — the intake stays fully visible and every field reachable
   (this is exactly the §7 kill-criteria fallback: "keep only the reorder").
   ========================================================================== */

/* --- 1. Re-sequence the open workspace (capture leads, intake recedes) ------ */
/* Every flex child gets an explicit order; unset children would default to 0
   and jump ahead of the intake, so the list below is exhaustive. */
body.tc-capture-first .tc-workspace-form > .tc-save-status      { order: 1; }
body.tc-capture-first .tc-workspace-form > .tc-capture-lede     { order: 2; }
body.tc-capture-first .tc-workspace-form > .tc-bottom-panel     { order: 3; }  /* ① capture band + ② live surface */
body.tc-capture-first .tc-workspace-form > .tc-guideline-panel  { order: 4; }  /* advisory, rides with the live surface */
body.tc-capture-first .tc-workspace-form > .tc-captured-toggle  { order: 5; }  /* ③ recessive summary */
body.tc-capture-first .tc-workspace-form > .tc-topbar           { order: 6; }
body.tc-capture-first .tc-workspace-form > .tc-columns          { order: 7; }
body.tc-capture-first .tc-workspace-form > .tc-decision-detail  { order: 8; }
body.tc-capture-first .tc-workspace-form > .tc-decision-spine   { order: 9; }  /* ④ decision — compact, promotes at wrap-up */
body.tc-capture-first .tc-workspace-form > .tc-comm-log         { order: 10; }
body.tc-capture-first .tc-workspace-form > .tc-workspace-footer { order: 11; } /* ⑤ note (Generate) */

/* --- 2. Hero lede — terse, sets the one instruction ------------------------ */
.tc-capture-lede {
    margin: 2px 0 0;
    font-family: var(--term-font-mono, ui-monospace, monospace);
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--tc-guide-muted, #8b8478);
    opacity: 0.9;
}
.tc-capture-lede::before {
    content: "▸ ";
    color: var(--tc-guide-green, #78A88F);
}

/* --- 3. Capture band gets a whisper of primacy ----------------------------- */
/* Not a loud hero — a hairline top-accent so the recorder reads as the lead
   surface without shouting. */
body.tc-capture-first .tc-bottom-panel {
    position: relative;
}
body.tc-capture-first .tc-bottom-panel::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--tc-guide-green, #78A88F),
        color-mix(in srgb, var(--tc-guide-green, #78A88F) 20%, transparent)
    );
    border-radius: 2px 2px 0 0;
    opacity: 0.7;
    pointer-events: none;
}

/* --- 4. Captured-so-far summary bar (the single glanceable line) ------------ */
/* JS removes [hidden] on workspace load; if JS is dead it stays hidden and the
   intake below stays fully visible (no collapse class). */
.tc-captured-toggle {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    margin: 2px 0;
    padding: 9px 12px;
    background: var(--tc-well, #0B0A08);
    border: 1px dashed var(--term-border-subtle, #33302a);
    border-radius: 8px;
    color: var(--tc-guide-fg, #cfc7b8);
    font-family: var(--term-font-mono, ui-monospace, monospace);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.tc-captured-toggle:hover {
    border-color: var(--tc-guide-green, #78A88F);
    background: color-mix(in srgb, var(--tc-guide-green, #78A88F) 6%, var(--tc-well, #0B0A08));
}
.tc-captured-toggle:focus-visible {
    outline: 2px solid var(--tc-guide-green, #78A88F);
    outline-offset: 2px;
}
.tc-captured-toggle-label {
    flex: 0 0 auto;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 9.5px;
    color: var(--tc-guide-muted, #8b8478);
}
.tc-captured-toggle-digest {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tc-guide-fg, #cfc7b8);
}
/* Empty state reads as an invitation, not a void. */
.tc-captured-toggle.is-empty .tc-captured-toggle-digest {
    color: var(--tc-guide-muted, #8b8478);
    font-style: italic;
}
.tc-captured-toggle-chev {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    color: var(--tc-guide-muted, #8b8478);
    transition: transform 140ms ease;
}
/* Expanded = collapse class absent. Chevron points down when open. */
body.tc-capture-first:not(.tc-captured-collapsed) .tc-captured-toggle-chev {
    transform: rotate(90deg);
}

/* --- 5. Collapse the intake into the summary (JS-gated, degrades safe) ------ */
body.tc-capture-first.tc-captured-collapsed .tc-workspace-form > .tc-topbar,
body.tc-capture-first.tc-captured-collapsed .tc-workspace-form > .tc-columns,
body.tc-capture-first.tc-captured-collapsed .tc-workspace-form > .tc-decision-detail {
    display: none;
}

/* When expanded, the intake reads as a recessive editing panel, not a loud form:
   dimmed until you focus into it. */
body.tc-capture-first:not(.tc-captured-collapsed) .tc-workspace-form > .tc-topbar,
body.tc-capture-first:not(.tc-captured-collapsed) .tc-workspace-form > .tc-columns,
body.tc-capture-first:not(.tc-captured-collapsed) .tc-workspace-form > .tc-decision-detail {
    opacity: 0.82;
    transition: opacity 140ms ease;
}
body.tc-capture-first .tc-workspace-form > .tc-topbar:focus-within,
body.tc-capture-first .tc-workspace-form > .tc-columns:focus-within,
body.tc-capture-first .tc-workspace-form > .tc-decision-detail:focus-within {
    opacity: 1;
}

/* --- 6. Decision spine: compact pre-call, promotes at wrap-up --------------- */
/* Compact by default (reduced weight, still fully clickable). Promotes to full
   weight when a disposition is chosen (aria-pressed=true on any button) or when
   the doctor is interacting with it (focus-within) — the decision surfaces
   exactly when the decision is being made, near hang-up. */
body.tc-capture-first .tc-decision-spine {
    transform: scale(0.965);
    transform-origin: top center;
    opacity: 0.85;
    transition: transform 160ms ease, opacity 160ms ease;
}
body.tc-capture-first .tc-decision-spine:focus-within,
body.tc-capture-first .tc-decision-spine:has(.tc-decision-btn[aria-pressed="true"]) {
    transform: none;
    opacity: 1;
}
/* Shrink the pre-decision button labels a touch so the compact state reads as
   "reachable, not shouting." Full size returns on promote via the rule above. */
body.tc-capture-first .tc-decision-spine:not(:focus-within):not(:has(.tc-decision-btn[aria-pressed="true"])) .tc-decision-btn {
    padding-block: 8px;
}

/* --- 7. Motion / accessibility --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.tc-capture-first .tc-decision-spine,
    .tc-captured-toggle,
    .tc-captured-toggle-chev {
        transition: none;
    }
}

/* Fallback for engines without :has() — never leave the decision stuck small.
   @supports selector() is honored by all :has()-capable engines; where :has()
   is unsupported the compact scale simply never applies. */
@supports not selector(:has(*)) {
    body.tc-capture-first .tc-decision-spine {
        transform: none;
        opacity: 1;
    }
}
