/* steps-win.css — OPSV4-SPINE-001 · lane L3 · steps 1-5 (win the work, check the job).
 *
 * Lane L3 owns this file. Layout only: the four status colours, the sheet,
 * the undo toast and the big green button all come from
 * web/js/ops-v4/kit/lres-ops-v4-kit.js with their styles inline (rule 5) —
 * this file does not restyle them.
 *
 * House rules (OPSV4_SPINE_RUN_LANES.md, "Every lane obeys", rule 5):
 *   · use ONLY the kit, web/js/ops-v4/kit/lres-ops-v4-kit.js;
 *   · four status colours and nothing else —
 *       done      #009A42
 *       needs you #F59E0B
 *       blocked / missed #DC2626, missed fill #FDECEC
 *       not yet   #D1D5DB
 *   · one big green button per panel;
 *   · sheets slide over the page;
 *   · Inter.
 *
 * ⚠ KNOWN, ACCEPTED GATE FAILURE — read before "fixing" this file's colours.
 * web/js/__tests__/njf002-s2-d18-palette.smoke.mjs (the D18 palette guard)
 * refuses any new web/ file with a raw colour literal and no entry in
 * tools/palette-guard/palette.ledger.json. This file trips it, exactly as
 * L5's steps-equip.css did (docs/build/requests/SPINE-L5.md R1) and for the
 * same reason: the v3 token set has no `#DC2626`, `#FDECEC` or `#D1D5DB`, two
 * of Tom's four locked status colours are not in it at all, and `--update`
 * rewrites the WHOLE ledger — five lanes re-freezing it is five guaranteed
 * conflicts. The Integrator re-freezes it ONCE after the merge. Do not
 * tokenise, do not run --update here.
 */

.ov4s-wrap {
    font-family: Inter, Arial, sans-serif;
    color: #0F1419;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.ov4s-stephead {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ov4s-reason {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #B45309;
}

.ov4s-subhead {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 800;
}

.ov4s-section-host {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px;
    background: #FFFFFF;
    min-height: 0;
}

/* ── Fact tiles — the honest, non-inventive read-back of ctx.step.facts ──── */
.ov4s-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.ov4s-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid #E5E7EB;
    border-left: 4px solid #D1D5DB;
    border-radius: 10px;
    min-width: 120px;
    background: #F4F5F7;
}

.ov4s-fact.is-warn {
    border-left-color: #F59E0B;
    background: #FFFBEB;
}

.ov4s-fact dt {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ov4s-fact dd {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

/* ── Empty states — honest, never an invented figure (rule 6) ───────────── */
.ov4s-empty {
    padding: 16px;
    border: 1px dashed #D1D5DB;
    border-radius: 10px;
    color: #6B7280;
    font-size: 13px;
    background: #F4F5F7;
}

/* ── Toolbars and plain link-buttons ─────────────────────────────────────── */
.ov4s-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ov4s-link-btn {
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    color: #009A42;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
}

.ov4s-link-btn:hover {
    background: #F0FDF4;
}

.ov4s-sub {
    font-size: 12px;
    color: #6B7280;
}

/* ── Forms (edit sheets, the site briefing form) ─────────────────────────── */
.ov4s-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
}

.ov4s-input {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-weight: 400;
}

textarea.ov4s-input {
    min-height: 70px;
    resize: vertical;
}

.ov4s-err {
    color: #DC2626;
    font-size: 13px;
    margin-bottom: 10px;
}

.ov4s-brief-form {
    display: flex;
    flex-direction: column;
}

/* ── Version history table (step 3) ──────────────────────────────────────── */
.ov4s-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ov4s-table th,
.ov4s-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #E5E7EB;
}

.ov4s-table th {
    color: #6B7280;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ── The Sales → Operations handover block (step 4) ──────────────────────── */
.ov4s-handoff {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #F4F5F7;
}

.ov4s-handoff-host {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Mount points for reused renderers — layout only, no restyling ──────── */
.ov4s-enquiry-mount,
.ov4s-quote-mount,
.ov4s-scopequote-mount,
.ov4s-po-facts {
    min-height: 0;
}

/* Narrow screens collapse to one column — these panels are used on a phone. */
@media (max-width: 640px) {
    .ov4s-facts {
        flex-direction: column;
    }

    .ov4s-fact {
        min-width: 0;
    }
}