/*
 * The restart picker panel, in the military terminal look (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;
 * this file tightens it into one header line, a single-line list of
 * choices, and the arm box beside the action.
 *
 * EVERY COLOUR IS AN `--oc-*` TOKEN. client/dist/app.css puts that palette
 * on :root on every screen and re-derives it from the active theme, so the
 * panel follows whichever theme is on and holds no literal of its own.
 * (The six `--border-color`-style names this file once read were defined
 * nowhere, so every one fell through to a hex fallback; do not bring them
 * back.) The look is the operations center's: a title row with a small
 * tracked-capitals label in the accent, one-pixel rules, mono type, and the
 * accent reserved for the selected choice and the action.
 *
 * THE PREDICTED RUNG IS COLOURED: a "plain shell" tag must never look like
 * the others, because a shell that reads like an agent is the failure the
 * panel exists to prevent.
 */

.restart-picker .restart-picker__content {
    padding: 0;
    /* 500px, not 460px (issue #592). At 460px the footer's own content -
       the arm box plus both buttons - is a few px too wide once the
       action button's label grows from "restart" to "kill and restart",
       so ticking the arm box wrapped the button onto a second line,
       grew the whole modal, and (because the overlay centers it) shifted
       every row, arm box included, upward by half that growth. 500px
       keeps both button labels on the one footer line in both states, so
       arming never repaints anything above the button itself. */
    max-width: 500px;
    overflow: hidden;
    font-family: var(--font-mono);
}

/* The strip itself is the shared `.modal-titlerow` (modal-titlerow.css); only the gap is the picker's own. */
.restart-picker__head {
    gap: 10px;
}

.restart-picker__verb {
    flex: 0 0 auto;
    font-size: var(--oc-fs-title, 12px);
    letter-spacing: var(--oc-tracking-title, 0.8px);
    text-transform: uppercase;
    color: var(--oc-orange);
}

.restart-picker__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--oc-text-primary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.restart-picker__state {
    flex: 0 0 auto;
    font-size: var(--oc-fs-micro, 10px);
    letter-spacing: var(--oc-tracking-label, 0.6px);
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.restart-picker__state[data-state="alive"],
.restart-picker__state[data-state="busy"] {
    color: var(--oc-green);
}

.restart-picker__state[data-state="alive"]::before,
.restart-picker__state[data-state="busy"]::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

.restart-picker .restart-picker__main {
    margin: 0;
    padding: 10px 14px 0;
}

.restart-picker__notice,
.restart-picker__why,
.restart-picker__shared {
    font-size: 12px;
    color: var(--oc-text-secondary);
    overflow-wrap: anywhere;
}

.restart-picker__notice {
    margin-bottom: 8px;
}

.restart-picker__why {
    margin-top: 6px;
    color: var(--oc-yellow);
}

.restart-picker__why:empty {
    display: none;
}

.restart-picker__shared {
    margin-bottom: 8px;
}

.restart-picker__shared[data-kind="transcript_missing"]
.restart-picker__shared-line {
    color: var(--oc-coral);
}

.restart-picker__shared-more {
    margin-top: 2px;
    color: var(--oc-text-muted);
}

.restart-picker__shared-more summary {
    cursor: pointer;
    padding: 4px 0;
}

/* THE LIST: one ruled box, hairlines between rows, no card per row. It
   scrolls only when it must; the common case fits. */
.restart-picker__options {
    display: flex;
    flex-direction: column;
    max-height: 52vh;
    max-height: 52dvh;
    overflow-y: auto;
    border: var(--oc-border) solid var(--oc-line-panel);
    border-radius: var(--oc-radius-sm);
}

.restart-picker__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 4px 10px;
    cursor: pointer;
    /* DO NOT REMOVE. A flex item shrinks by default, so an overflowing list
       would squash its rows instead of scrolling; `0` puts the overflow on
       the list. tests/test_restart_picker_geometry.py fails without it. */
    flex-shrink: 0;
    box-shadow: inset 2px 0 0 0 transparent;
    transition: background var(--oc-motion-fast, 120ms) ease;
}

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

.restart-picker__option:hover {
    background: var(--oc-ground-hover);
}

.restart-picker__option:has(input:checked) {
    background: var(--oc-ground-hover);
    box-shadow: inset 2px 0 0 0 var(--oc-orange);
}

/* NOT hidden: a wrapper that cannot launch right now is still one the user
   configured. Dimmed, with its tag saying why. */
.restart-picker__option.is-unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.restart-picker__option input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--oc-orange);
}

.restart-picker__title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--oc-text-primary);
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Visually hidden, still read: the full sentence behind a row or the arm
   box stays available to a screen reader. */
.restart-picker__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* THE FOOTER: the arm box (live panes only) takes the left, the two
   buttons the right; on a phone the box takes its own line above them. */
.restart-picker .restart-picker__foot {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 14px;
}

.restart-picker .modal-btn {
    padding: 7px 16px;
    font-size: 13px;
}

/* Covers both the ordinary confirm colour and the armed-live danger colour:
   a disabled button dims the same way regardless of which style it wears. */
.restart-picker .modal-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* THE ARM BOX IS A WARNING, NOT A SETTING: it unlocks killing a running
   process, so it wears the danger colour on its border and text - always,
   whether ticked or not. TICKING IT NEVER REPAINTS THE ROW (owner,
   2026-09-25, issue #592: "when i check the box, the UI gets all funky.
   and it shouldnt turn the button red. that is indicating I need to do
   something"). The row's size, position and colours stay identical
   checked or not; the checkbox's own glyph is the only visible change,
   because the ticked box is already the arming confirmation (issue #441)
   and does not need a second, louder signal on top of it. */
.restart-picker__arm {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    min-height: 32px;
    padding: 0 10px;
    border: var(--oc-border) solid var(--oc-coral);
    border-radius: var(--oc-radius-sm);
    color: var(--oc-coral);
    font-size: 12px;
    cursor: pointer;
}

.restart-picker__arm input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--oc-coral);
}

/* A THUMB NEEDS 44PX. A floor, never a height, so a row still grows when
   a long name wraps. */
@media (pointer: coarse), (max-width: 600px) {
    .restart-picker__option {
        min-height: 44px;
    }

    .restart-picker__arm {
        flex: 1 0 100%;
        min-height: 44px;
        margin-right: 0;
    }

    .restart-picker .modal-btn {
        min-height: 44px;
    }
}

/* THE LAUNCH CHOICE (#1641): the compiled profile dropdown and, under it, the
   account disclosure (web/src/lib/launch-picker/) mount here. The field and its
   panel draw themselves, so this only keeps the slot from squashing. */
.restart-picker__choice {
    flex: 0 0 auto;
    min-width: 0;
}