/*
 * The reopen offer panel (client/js/session-restore-offer.js), in the
 * Military Terminal look (issue #675, following the restart picker,
 * client/css/session-restart-picker.css, issue #558).
 *
 * It reuses `.modal-overlay` / `.modal-content` / `.modal-btn` from
 * styles.css so it is the same object on screen as every other dialog, and
 * reads the --oc-* palette directly, as the restart picker does: a dialog is
 * app chrome, not session content. `.restore-offer__content` sets
 * `padding: 0` and adds its own head strip, the way the restart picker and
 * `text-prompt-modal.css` do, rather than the legacy `.modal-header`
 * (plain bold 1.3rem, 31px padding on every side).
 */

/*
 * THE CARD NEVER OUTGROWS THE WINDOW (1.11.1). It is a flex column capped
 * at the viewport less a margin; the head, intro, status and footer keep
 * their natural height and ONLY the scroll body between them shrinks and
 * scrolls. `min-height: 0` on the scroll body is what lets it shrink below
 * its content in a flex column: without it the list sets the card's
 * height and the cap does nothing. The results of an accept REPLACE the
 * list inside the scroll body, so 21 results scroll in the same place 21
 * candidates did, and the done button stays on screen.
 * Measured by scripts/verify_restore_offer_layout.py.
 */
.restore-offer__content {
    --restore-offer-margin: 32px;
    max-width: 680px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--restore-offer-margin));
    max-height: calc(100dvh - var(--restore-offer-margin));
    min-height: 0;
    overflow: hidden;
    padding: 0;
    font-family: var(--font-mono);
}

.restore-offer__head,
.restore-offer__intro,
.restore-offer__status,
.restore-offer__footer {
    flex: 0 0 auto;
}

/* THE HEAD STRIP: same recipe as .restart-picker__head, a small tracked
 * uppercase verb in the accent, edge to edge with the panel. */
/* `.restore-offer__head` wears the shared `.modal-titlerow` (modal-titlerow.css) and declares nothing of its own. */

.restore-offer__verb {
    font-size: var(--oc-fs-title, 12px);
    letter-spacing: var(--oc-tracking-title, 0.8px);
    text-transform: uppercase;
    color: var(--oc-orange);
}

.restore-offer__intro {
    padding: 14px 16px 0;
}

.restore-offer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px;
}

.restore-offer__footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 0;
    padding: 12px 16px 16px;
}

.restore-offer__summary {
    margin-bottom: 12px;
}

.restore-offer__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.restore-offer__result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: var(--oc-border) solid var(--oc-line-panel);
    border-radius: var(--oc-radius-sm);
}

.restore-offer__result-words {
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

.restore-offer__trust {
    color: var(--oc-yellow);
    font-size: 0.85em;
}

.restore-offer__all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    color: var(--oc-text-muted);
    cursor: pointer;
}

.restore-offer__all input[type="checkbox"] {
    accent-color: var(--oc-orange);
}

/* THE LIST: one ruled box, hairlines between rows, no card per row - the
 * restart picker's .restart-picker__options recipe. */
.restore-offer__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: var(--oc-border) solid var(--oc-line-panel);
    border-radius: var(--oc-radius-sm);
}

.restore-offer__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 10px;
}

.restore-offer__row + .restore-offer__row {
    border-top: var(--oc-border) solid var(--oc-line-faint);
}

.restore-offer__row.is-blocked {
    opacity: 0.7;
}

.restore-offer__check {
    margin-top: 3px;
    accent-color: var(--oc-orange);
}

.restore-offer__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    cursor: pointer;
}

.restore-offer__row.is-blocked .restore-offer__main {
    cursor: default;
}

.restore-offer__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.restore-offer__meta {
    color: var(--oc-text-muted);
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

.restore-offer__blocked {
    color: var(--oc-orange);
    font-size: 0.85em;
}

.restore-offer__drops {
    color: var(--oc-yellow);
    font-size: 0.85em;
}

.restore-offer__drops:empty {
    display: none;
}

/* PER-ROW PROGRESS while an accept runs: muted while queued, cyan while
 * restoring, green once opened, coral with the server's reason on a
 * failure. The same tokens the results list below uses for the same facts. */
.restore-offer__progress {
    color: var(--oc-text-muted);
    font-size: 0.85em;
}

.restore-offer__progress:empty {
    display: none;
}

.restore-offer__progress[data-phase="restoring"] {
    color: var(--oc-cyan);
}

.restore-offer__progress[data-phase="opened"] {
    color: var(--oc-green);
}

.restore-offer__progress[data-phase="failed"] {
    color: var(--oc-coral);
}

/* THE WRAPPER SELECT: a real <select>, styled like .config-editor-new-form
 * select rather than restyled from scratch - dark field, mono type, the
 * accent on focus, no browser default white popup shell. */
.restore-offer__wrapper {
    max-width: 180px;
    box-sizing: border-box;
    background: var(--oc-ground-field);
    border: var(--oc-border) solid var(--oc-line-rule);
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-primary);
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 5px 8px;
}

.restore-offer__wrapper {
    /* S8b (#1257): a button that opens the one launch picker, not a select. */
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restore-offer__wrapper:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.restore-offer__status {
    margin-top: 0;
    padding-top: 12px;
    color: var(--oc-text-muted);
}

.restore-offer__status:empty {
    display: none;
}

.restore-offer__result.is-reopened .restore-offer__result-words {
    color: var(--oc-green);
}

.restore-offer__result.is-reopened.is-waiting .restore-offer__result-words {
    color: var(--oc-yellow);
}

.restore-offer__result.is-refused .restore-offer__result-words,
.restore-offer__result.is-failed .restore-offer__result-words {
    color: var(--oc-coral);
}

/* The footer's buttons: same size/weight as the restart picker's, and the
 * same cyan focus-visible ring rather than whatever the browser defaults
 * to (issue #675 - an unstyled focus ring on "reopen selected" read as a
 * destructive red outline on a CONFIRMING action). */
.restore-offer .modal-btn {
    padding: 7px 16px;
    font-size: 13px;
}

@media (max-width: 560px) {
    .restore-offer__content {
        --restore-offer-margin: 24px;
        width: calc(100% - 24px);
    }

    .restore-offer__row {
        grid-template-columns: auto 1fr;
    }

    .restore-offer__wrapper {
        grid-column: 2;
        max-width: none;
        width: 100%;
    }
}