/* steps-close.css — OPSV4-SPINE-001 · lane L6 · steps 13-17
 * (on the day, change the job, timesheets, close & invoice, pay the crew).
 *
 * 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 carries meaning —
 *       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.
 *
 * ── ⚠ THE PALETTE GUARD ─────────────────────────────────────────────────────
 * web/js/__tests__/njf002-s2-d18-palette.smoke.mjs refuses any NEW file under
 * web/ that carries a raw colour literal with no entry in
 * tools/palette-guard/palette.ledger.json. This file has them, as every
 * existing css/ops-v4/*.css does. Tokenising is not available: the v3 token set
 * has no #DC2626, #FDECEC or #D1D5DB — two of Tom's four locked status colours
 * — and --v3-danger is a DIFFERENT red (#C00000). `--update` rewrites the whole
 * ledger, so five Wave 1 lanes re-freezing it is five guaranteed conflicts on a
 * file whose diff is meant to be read. The INTEGRATOR re-freezes it once, after
 * the merge. See docs/build/requests/SPINE-L6.md R1 and SPINE-L5.md R1.
 *
 * ── Every colour below ──────────────────────────────────────────────────────
 * Status:      #009A42 #F59E0B #DC2626 #FDECEC #D1D5DB
 * Status text: #006B2E #92400E #991B1B #374151
 * Status fill: #E3F5EA #FEF3C7
 * Chrome (from the mock-ups, structure only — never meaning):
 *              #FFFFFF #F4F5F7 #F4F5F7 #EEF0F3 #E5E7EB #EEF0F3
 *              #0F1419 #1F2937 #4B5563 #6B7280 #9CA3AF #B45309
 */

.ov4l6 {
    font-family: Inter, Arial, sans-serif;
    color: #0F1419;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── The step's own reason, straight from the flow API ──────────────────── */
.ov4l6-reason {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
}

/* ── A section card ─────────────────────────────────────────────────────── */
.ov4l6-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ov4l6-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ov4l6-card-head h3 {
    margin: 0;
    flex-grow: 1;
    font-size: 15px;
    font-weight: 800;
}

.ov4l6-card-note {
    font-size: 13px;
    color: #4B5563;
    line-height: 1.45;
}

.ov4l6-host {
    min-width: 0;
}

/* ── Status chips. The ONLY four meanings. ──────────────────────────────── */
.ov4l6-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ov4l6-chip[data-state="done"] {
    background: #E3F5EA;
    color: #006B2E;
}

.ov4l6-chip[data-state="needs_you"] {
    background: #FEF3C7;
    color: #92400E;
}

.ov4l6-chip[data-state="missed"] {
    background: #FDECEC;
    color: #991B1B;
}

.ov4l6-chip[data-state="not_yet"] {
    background: #EEF0F3;
    color: #374151;
}

/* ── The honest empty state: what is missing, and the action that fills it ─ */
.ov4l6-empty {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 14px;
    background: #F4F5F7;
    border: 1px solid #E5E7EB;
}

.ov4l6-empty b {
    font-size: 15px;
    font-weight: 800;
}

.ov4l6-empty span {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.45;
}

.ov4l6-action {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    background: #FFFFFF;
    color: #1F2937;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ov4l6-action:disabled {
    cursor: not-allowed;
    color: #9CA3AF;
}

.ov4l6-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── A fact grid. Never a figure that was not fetched. ──────────────────── */
.ov4l6-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
}

.ov4l6-fact {
    padding: 10px 12px;
    border-radius: 12px;
    background: #F4F5F7;
    min-width: 0;
}

.ov4l6-fact dt {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4B5563;
}

.ov4l6-fact dd {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ov4l6-fact[data-warn="1"] dd {
    color: #B45309;
}

/* An absent figure and a figure you may not see are DIFFERENT things and must
   not collapse into one dash (NOTHING_LOST row 60). */
.ov4l6-absent {
    font-weight: 700;
    color: #9CA3AF;
}

.ov4l6-masked {
    font-weight: 700;
    color: #4B5563;
}

/* ── The close checklist ────────────────────────────────────────────────── */
.ov4l6-check {
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
}

.ov4l6-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid #EEF0F3;
    background: #FFFFFF;
    font-size: 14px;
    min-width: 0;
}

.ov4l6-check-row:first-child {
    border-top: none;
}

.ov4l6-check-row[data-state="missed"] {
    background: #FDECEC;
}

.ov4l6-check-row[data-state="needs_you"] {
    background: #FEF3C7;
}

.ov4l6-check-label {
    flex-grow: 1;
    font-weight: 700;
    min-width: 0;
}

.ov4l6-check-sub {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: #4B5563;
}

.ov4l6-check-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    background: #D1D5DB;
}

.ov4l6-check-row[data-state="done"] .ov4l6-check-mark {
    background: #009A42;
}

.ov4l6-check-row[data-state="needs_you"] .ov4l6-check-mark {
    background: #F59E0B;
}

.ov4l6-check-row[data-state="missed"] .ov4l6-check-mark {
    background: #DC2626;
}

/* ── A plain table (variances, pay rows, timesheet weeks) ───────────────── */
.ov4l6-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ov4l6-table th {
    text-align: left;
    padding: 8px 10px;
    background: #F4F5F7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4B5563;
    white-space: nowrap;
}

.ov4l6-table td {
    padding: 9px 10px;
    border-top: 1px solid #EEF0F3;
    vertical-align: top;
}

.ov4l6-table .ov4l6-r {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ov4l6-scroll {
    overflow-x: auto;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
}

/* ── The one big green button per panel ─────────────────────────────────── */
.ov4l6-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ov4l6-cta-why {
    font-size: 13px;
    font-weight: 700;
    color: #B45309;
}

/* ── Loading / failure. Never a silent blank. ──────────────────────────── */
.ov4l6-loading {
    padding: 18px;
    font-size: 14px;
    color: #6B7280;
}

.ov4l6-fail {
    padding: 14px 16px;
    border-radius: 14px;
    background: #FDECEC;
    border: 2px solid #DC2626;
    font-size: 14px;
    font-weight: 700;
    color: #991B1B;
}

/* ── The worked-example banner, when a money screen is still the board ──── */
.ov4l6-sample {
    padding: 12px 16px;
    border-radius: 12px;
    background: #FEF3C7;
    border: 2px solid #F59E0B;
    color: #92400E;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.ov4l6-sample span {
    font-weight: 400;
}

/* ── live.js draws a 390px phone; give it room to sit in the middle ─────── */
.ov4l6-live-host {
    display: flex;
    justify-content: center;
    min-width: 0;
}