/* ─────────────────────────────────────────────────────────────
 * Assets & Liabilities — compact line-item table for quick entry.
 * Column widths use fr units with small minimums so the table
 * always fits the tool-content panel without horizontal overflow.
 * ───────────────────────────────────────────────────────────── */

/* ── Panel width ────────────────────────────────────────────
 * A/L views hold far more data than the settings form, so they
 * override the narrow .scenario-settings cap with a wide, left-
 * aligned panel (not centered) for comfortable line-item entry.
 * ─────────────────────────────────────────────────────────── */

.al-panel {
    max-width: 1040px;
    margin: 0;
}

/* ── Horizon selector pills ─────────────────────────────────── */

.al-horizon {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding: var(--space-8) 0;
}

.al-horizon__btn {
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-full);
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    color: var(--surface-text-medium);
    font-size: var(--content-small-size);
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}

.al-horizon__btn:hover {
    background: var(--surface-raised);
    color: var(--surface-text);
}

.al-horizon__btn--active,
.al-horizon__btn--active:hover {
    background: var(--brand-indigo);
    color: var(--copy-light);
    border-color: var(--brand-indigo);
}

/* ── Table ──────────────────────────────────────────────────── */

.al-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-8);
    overflow: hidden;              /* clip corners; rows never exceed width */
    background: var(--surface-border);  /* shows through as 1px separators */
    width: 100%;
}

/*
 * Assets columns:      name | value | growth | in/mo | cost/yr | derived | ×
 * Liabilities columns: name | balance | rate | pay/mo | derived | payoff | ×
 * Small minimums (fr-based) so the grid compresses to fit the panel.
 */
.al-line {
    display: grid;
    grid-template-columns:
        minmax(72px, 1.6fr)   /* name    */
        minmax(52px, 1fr)     /* value   */
        minmax(44px, 0.7fr)   /* growth  */
        minmax(48px, 0.9fr)   /* in/mo   */
        minmax(48px, 0.9fr)   /* cost/yr */
        minmax(56px, 1fr)     /* derived */
        28px;                 /* remove  */
    align-items: stretch;
    column-gap: var(--space-8);
    padding: 0 var(--space-4);
    background: var(--surface-card);
}

.al-line--liab {
    grid-template-columns:
        minmax(72px, 1.6fr)   /* name    */
        minmax(52px, 1fr)     /* balance */
        minmax(44px, 0.7fr)   /* rate    */
        minmax(48px, 0.9fr)   /* pay/mo  */
        minmax(56px, 1fr)     /* derived */
        minmax(48px, 0.8fr)   /* payoff  */
        28px;                 /* remove  */
}

.al-line--header {
    background: var(--surface-sunken);
    font-size: 11px;
    color: var(--surface-text-medium);
    font-weight: 600;
}

.al-line--header .al-line__cell {
    padding: var(--space-8) var(--space-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-line__cell {
    display: flex;
    align-items: center;
    padding: 0;
    min-width: 0;
}

.al-line__cell--num     { justify-content: flex-end; }
.al-line__cell--derived { justify-content: flex-end; padding: 0 var(--space-4); }
.al-line__cell--payoff  { justify-content: center; }
.al-line__cell--remove  { justify-content: center; }

/* Inputs — borderless, fill the cell. Kill number spinners entirely. */
.al-line__input {
    width: 100%;
    padding: var(--space-8) var(--space-4);
    border: none;
    background: transparent;
    color: var(--surface-text);
    font-size: var(--content-body-size);
    font-family: inherit;
    outline: none;
    min-width: 0;
}

.al-line__input--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.al-line__input::placeholder {
    color: var(--surface-text-disabled);
}

.al-line__input:focus {
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 2px var(--brand-indigo);
    border-radius: var(--radius-4);
}

/* Safety net: if any input is type=number, strip its spinners */
.al-line__input[type=number]::-webkit-inner-spin-button,
.al-line__input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.al-line__input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Derived value + payoff chips */

.al-line__derived-value {
    font-weight: 600;
    color: var(--surface-text);
    font-variant-numeric: tabular-nums;
    font-size: var(--content-body-size);
    white-space: nowrap;
}

.al-line__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-8);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--surface-text-medium);
    font-size: var(--content-small-size);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.al-line__chip--ok {
    background: color-mix(in oklch, var(--neutral-green) 20%, transparent);
    color: var(--neutral-green);
}

.al-line__chip--warn {
    background: color-mix(in oklch, var(--neutral-red) 20%, transparent);
    color: var(--neutral-red);
}

/* Remove button — always visible */

.al-line__remove {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: var(--surface-text-disabled);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 120ms, color 120ms;
}

.al-line__remove:hover {
    background: color-mix(in oklch, var(--neutral-red) 15%, transparent);
    color: var(--neutral-red);
}

/* ── Add button — consistent for both atoms ─────────────────── */

.al-add {
    margin-top: var(--space-12);
}

/* ── Totals footer ─────────────────────────────────────────── */

.al-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-16);
    background: var(--surface-sunken);
    border-radius: var(--radius-8);
    border: 1px solid var(--surface-border);
    margin-top: var(--space-12);
}

.al-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-12);
}

.al-totals__label {
    color: var(--surface-text-medium);
    font-size: var(--content-body-size);
}

.al-totals__value {
    font-size: var(--content-body-size);
    font-weight: 600;
    color: var(--surface-text);
    font-variant-numeric: tabular-nums;
}

.al-totals__value--emphasis {
    font-size: var(--display-title-size);
    color: var(--brand-indigo);
}

/* ── Responsive: stack into cards only on very narrow screens ─ */

@media (max-width: 460px) {
    .al-line,
    .al-line--liab {
        grid-template-columns: 1fr 1fr auto;
        gap: var(--space-4);
        padding: var(--space-8);
        background: var(--surface-card);
        align-items: center;
    }

    .al-line--header {
        display: none;
    }

    .al-line__cell--name {
        grid-column: 1 / 3;
    }

    .al-line__cell--remove {
        grid-column: 3;
        grid-row: 1;
    }

    .al-line__cell--num,
    .al-line__cell--derived,
    .al-line__cell--payoff {
        justify-content: flex-start;
    }

    .al-line__input {
        border: 1px solid var(--surface-border);
        border-radius: var(--radius-4);
    }

    .al-line__input--num {
        text-align: left;
    }
}