/*
 * Worksheets & small desks (W2-7) — cash flow, equity changes, shareholders, notes, documents,
 * doc variables, account mapping/import/search/plan, Teiresias, Z-Score.
 *
 * Everything here is either a page-specific shape (the shareholder side panel, the Teiresias
 * year list, the Z-Score stat tile, the import two-step layout) or a conventions-pass restyle of
 * a shared primitive (EmptyState, ProjectSelector, PlaceholderPanel, NoStudySelectedNotice). The
 * restyles live here rather than in components.css because this file loads after it in the same
 * @layer spec.components, so an equal-specificity rule here wins the cascade without !important.
 */
@layer spec.components {
    /* ——————————————————————————————————————————————————————
       Empty state — dashed frame, optional tone note, optional compact density
       —————————————————————————————————————————————————————— */
    .empty-state {
        border-style: dashed;
        border-color: var(--color-neutral-400);
        background: transparent;
    }

    .empty-state--compact {
        padding: var(--sp-4) var(--sp-3);
    }

    .empty-state__title {
        font: var(--weight-semibold) var(--text-md) / var(--leading-snug) var(--font-heading);
        color: var(--spec-ink);
    }

    /* The precondition sentence, when the empty state names one: the mockup's left-barred note
       rather than plain secondary text, so the missing thing reads as a fact, not a caption. */
    .empty-state__note {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin: var(--sp-3) auto 0;
        padding: 7px 11px;
        max-width: 30rem;
        background: var(--tone-tint, var(--color-neutral-100));
        border: 1px solid var(--tone-line, var(--color-divider));
        border-left: 3px solid var(--tone, var(--color-neutral-500));
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        text-align: left;
        color: var(--color-neutral-900);
    }

    /* ——————————————————————————————————————————————————————
       Project selector / placeholder panel / no-study notice — square, hairline, one kicker
       —————————————————————————————————————————————————————— */
    .ops-study-select__label {
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        color: var(--color-neutral-700);
        margin-bottom: 2px;
    }

    .placeholder-panel {
        border: 1px solid var(--color-divider);
        border-radius: 0;
        background: var(--spec-surface);
        box-shadow: none;
        padding: var(--sp-6);
    }

    .no-study-notice {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
        padding: var(--sp-4);
        border: 1px dashed var(--color-neutral-400);
        max-width: 30rem;
    }

    /* ——————————————————————————————————————————————————————
       Precondition / desk notes shared shape
       —————————————————————————————————————————————————————— */
    .worksheet-notes {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        max-width: 35rem;
        margin-top: var(--sp-4);
    }

    /* ——————————————————————————————————————————————————————
       Shareholders — toolbar totals line and the right-hand add/edit panel
       —————————————————————————————————————————————————————— */
    .shareholders-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
        align-items: start;
    }

    .shareholders-layout--editing {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    @media (max-width: 959.95px) {
        .shareholders-layout--editing {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .shareholders-totals {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
    }

    .shareholders-panel {
        border: 1px solid var(--color-accent-300);
        background: var(--spec-surface);
        min-width: 0;
    }

    .shareholders-panel__head {
        padding: 10px 14px;
        background: var(--color-accent-100);
        border-bottom: 1px solid var(--color-accent-300);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-accent-800);
    }

    .shareholders-panel__body {
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
    }

    .shareholders-panel__actions {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    /* ——————————————————————————————————————————————————————
       DocVariables — labelled fields in a 3-column grid
       —————————————————————————————————————————————————————— */
    .spec-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-4) var(--sp-4);
        max-width: 52rem;
    }

    @media (max-width: 720px) {
        .spec-grid-3 {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .spec-grid-3 .spec-field__label {
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        font: var(--weight-semibold) var(--text-xs) / 1 var(--font-heading);
        color: var(--color-neutral-700);
        margin-bottom: 6px;
    }

    .spec-field__error {
        margin-top: 4px;
        font-size: var(--text-sm);
        color: var(--stop);
    }

    .spec-field__hint {
        margin-top: 4px;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .spec-grid-3 .spec-field--span-3 {
        grid-column: 1 / -1;
    }

    /* ——————————————————————————————————————————————————————
       Account import — the two-step layout
       —————————————————————————————————————————————————————— */
    .spec-steps {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        max-width: 62rem;
    }

    .spec-step {
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    .spec-step__head {
        padding: 9px 14px;
        background: var(--color-neutral-100);
        border-bottom: 1px solid var(--color-divider);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-800);
    }

    .spec-step__body {
        padding: 14px;
    }

    /* ——————————————————————————————————————————————————————
       Teiresias — selectable year rows
       —————————————————————————————————————————————————————— */
    .teiresias-years {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--color-divider);
        max-width: 22rem;
    }

    .teiresias-years__row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        width: 100%;
        padding: 7px 11px;
        border: 0;
        border-bottom: 1px solid var(--color-divider);
        background: transparent;
        font: inherit;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--spec-ink);
        text-align: left;
        cursor: pointer;
    }

    .teiresias-years__row:last-child {
        border-bottom: 0;
    }

    .teiresias-years__row:hover {
        background: var(--wash-ink-4);
    }

    .teiresias-years__row:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -2px;
    }

    .teiresias-years__mark {
        flex: none;
        width: 14px;
        height: 14px;
        border: 1px solid var(--color-neutral-500);
        background: var(--spec-field);
    }

    .teiresias-years__row.is-selected {
        background: var(--color-accent-100);
        font-weight: var(--weight-semibold);
    }

    .teiresias-years__row.is-selected .teiresias-years__mark {
        background: var(--color-accent);
        border-color: var(--color-accent);
    }

    /* ——————————————————————————————————————————————————————
       Z-Score — the result stat tile
       —————————————————————————————————————————————————————— */
    .spec-stat-tile {
        display: inline-flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 20px;
        border: 1px solid var(--tone-line, var(--color-divider));
        background: var(--tone-tint, var(--spec-surface));
    }

    .spec-stat-tile__label {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .spec-stat-tile__value {
        font: var(--weight-semibold) 26px / 1 var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--tone, var(--spec-ink));
    }

    /* ——————————————————————————————————————————————————————
       Editing grids — section/subtotal rows, the residual/out-of-tolerance row, and inputs that
       stay transparent until focused so a dense grid of numbers reads as a table first and a form
       second. §3.4's is-dirty fill (components.css, higher specificity via #main-content) still
       wins over the transparent default.
       —————————————————————————————————————————————————————— */
    #main-content .worksheet-grid .mud-input.mud-input-outlined:not(.mud-input-focused) {
        background: transparent;
    }

    #main-content .worksheet-grid .mud-input.mud-input-outlined:not(.mud-input-focused) .mud-input-outlined-border {
        border-color: transparent;
    }

    #main-content .worksheet-grid .mud-input.mud-input-outlined:hover:not(.mud-input-focused) .mud-input-outlined-border {
        border-color: var(--color-neutral-400);
    }

    /* The figure itself: right-aligned, mono, tabular — the same shape the read-only cell's
       plain span uses, so an editable column does not read as a different, wider column with
       its digits stuck to the wrong edge. */
    #main-content .worksheet-grid .mud-input.mud-input-outlined > input {
        width: 100%;
        box-sizing: border-box;
        font-family: var(--font-mono);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .worksheet-row--section td,
    .worksheet-row--subtotal td {
        background: var(--color-neutral-100);
        font-weight: var(--weight-semibold);
    }

    .worksheet-row--stop td {
        color: var(--stop);
        font-weight: var(--weight-semibold);
    }

    .worksheet-stop-note {
        margin-top: var(--sp-2);
    }

    /* A small square "remove this row" glyph — never a filled Material icon button, per the
       mockup's wireframe controls. */
    .spec-row-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        color: var(--color-neutral-700);
        font: var(--weight-semibold) 14px/1 var(--font-body);
        cursor: pointer;
    }

    .spec-row-delete:hover {
        border-color: var(--stop);
        color: var(--stop);
        background: var(--stop-t);
    }

    .spec-row-delete:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    /* ——————————————————————————————————————————————————————
       Hand-rolled grids inside .spec-fill-region — a plain <table> the page marks up itself
       (equity changes' dynamic columns) rather than a MudTable. §3.2's worked example is a
       MudTable; this is the "hand-rolled grid" branch that section names but does not style, so
       the basics (padding, a divider between rows, the dark header's white text) are set once
       here rather than per page.
       —————————————————————————————————————————————————————— */
    .spec-fill-region table {
        width: 100%;
        border-collapse: collapse;
    }

    .spec-fill-region th,
    .spec-fill-region td {
        padding: 7px 10px;
        text-align: left;
        font-size: 12.5px;
        line-height: var(--leading-snug);
        white-space: nowrap;
        border-bottom: 1px solid var(--color-divider);
        color: var(--spec-ink);
    }

    .spec-fill-region.ledger-grid thead th {
        border-bottom: 0;
        color: var(--spec-on-dark);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        white-space: normal;
    }

    .spec-fill-region tbody tr:hover td {
        background: var(--wash-ink-4);
    }
}