/*
 * Close desk — /close, /calc-log, /balance-sheet.
 *
 * components.css already carries the shared close shapes (.spec-close, .spec-panel,
 * .spec-checklist, .spec-callout, .spec-refusal, .spec-note). What lives here is specific to
 * these three pages: the running/success step list, the compact calc-log panel embedded in the
 * close panel, the reconciliation check's icon+text cell, and the offset the results tables need
 * once they sit under a panel and (on /close) a calc-log panel besides the page header.
 */
@layer spec.components {
    /* ── the run's named steps — running (◐ first, · the rest) or success (✓ all) ────────────── */
    .spec-steps {
        margin-top: 15px;
        border-top: 1px solid var(--color-divider);
    }

    .spec-steps__row {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 7px 0;
        border-bottom: 1px solid var(--color-divider);
    }

    .spec-steps__row:last-child {
        border-bottom: 0;
    }

    .spec-steps__glyph {
        font: var(--weight-regular) 11px/1 var(--font-mono);
        color: var(--color-neutral-600);
    }

    .spec-steps__label {
        font-size: 12.5px;
        color: var(--spec-ink);
    }

    /* ── refusal action link — the desk the refusal names, when it names one ─────────────────── */
    .spec-refusal__action {
        font-size: var(--text-sm);
        margin-top: 6px;
    }

    /* ── ημερολόγιο υπολογισμού — compact, under the panel, scrolling in place ───────────────── */
    .spec-calclog {
        margin-top: 16px;
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    .spec-calclog__title {
        padding: 10px 14px;
        border-bottom: 1px solid var(--color-divider);
        font: var(--weight-semibold) 10px/1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .spec-calclog__scroll {
        padding: 10px 14px;
        max-height: 172px;
        overflow: auto;
    }

    .spec-calclog__row {
        display: grid;
        grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
        gap: 10px;
        padding: 3px 0;
        font: var(--weight-regular) 11px/1.5 var(--font-mono);
    }

    .spec-calclog__lead {
        color: var(--color-neutral-600);
        white-space: nowrap;
    }

    .spec-calclog__message {
        color: var(--spec-ink);
        text-wrap: pretty;
    }

    .spec-calclog__row.is-ok .spec-calclog__message {
        color: var(--ok);
    }

    /* ── reconciliation's passed/failed cell — the glyph keeps its title, the word sits beside it ── */
    .spec-reconciliation-check {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        font-size: var(--text-sm);
    }

    .spec-reconciliation-check.is-ok {
        color: var(--ok);
    }

    .spec-reconciliation-check.is-ok .mud-icon-root {
        color: var(--ok);
    }

    .spec-reconciliation-check.is-stop {
        color: var(--stop);
    }

    .spec-reconciliation-check.is-stop .mud-icon-root {
        color: var(--stop);
    }

    /* ── results tables: same dark-header .spec-fill shape as everywhere else, offset for what
       sits above them on each page ───────────────────────────────────────────────────────────── */
    .spec-close-results {
        margin-top: 16px;
        --spec-fill-offset: 620px;
    }

    #main-content .spec-close-results .mud-tabs-panels {
        padding: 4px 4px 0;
    }

    .spec-calclog-page {
        --spec-fill-offset: 260px;
    }

    .spec-balance-sheet {
        --spec-fill-offset: 360px;
    }
}