/* =================================================================
   CONFIRM SHEET (v0.25.2.0) — js/confirm-sheet.js
   The app's one confirmation dialog: a centred modal on desktop, a
   bottom sheet on a phone. Tokens only (--as-*, core.css), so both
   themes come for free. Above every other dialog, since it is usually
   opened from one.
   ================================================================= */

.cs-overlay {
    position: fixed;
    inset: 0;
    z-index: 100100;
    background: rgba(17, 19, 34, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cs-sheet {
    width: min(520px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--as-surface);
    color: var(--as-ink);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-card);
    box-shadow: var(--as-shadow-3);
    overflow: hidden;
}

.cs-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 8px 20px;
}
.cs-title {
    flex: 1;
    margin: 0;
    font-size: var(--as-fs-lg);
    font-weight: 700;
    line-height: 1.3;
}
.cs-title i { color: var(--as-brand); margin-right: 6px; }
.cs-danger .cs-title i { color: var(--as-no); }

.cs-x {
    flex: none;
    width: var(--as-tap);
    height: var(--as-tap);
    border: 0;
    border-radius: var(--as-r-ctl);
    background: transparent;
    color: var(--as-ink3);
    font-size: var(--as-fs-md);
    cursor: pointer;
}
.cs-x:hover { background: var(--as-sunk); color: var(--as-ink); }

.cs-body {
    padding: 4px 20px 16px;
    overflow-y: auto;
    font-size: var(--as-fs-sm);
    line-height: 1.5;
    color: var(--as-ink2);
    display: grid;
    gap: 10px;
}
.cs-text { margin: 0; }

.cs-list-label { margin: 4px 0 0; font-weight: 600; color: var(--as-ink); }
.cs-list {
    margin: 0;
    padding: 8px 12px;
    list-style: none;
    background: var(--as-sunk);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-ctl);
    max-height: 220px;
    overflow-y: auto;
    font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace;
}
.cs-list li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.cs-item { flex: 1; min-width: 0; }
.cs-flag {
    flex: none;
    font: 600 var(--as-fs-xs)/1.6 var(--as-sans, inherit);
    color: var(--as-no);
    background: var(--as-no-wash);
    border-radius: var(--as-r-pill);
    padding: 0 8px;
}
.cs-more { color: var(--as-ink3); }

.cs-typed-label { font-weight: 600; color: var(--as-ink); }
.cs-input {
    min-height: var(--as-tap);
    font-size: var(--as-fs-md);               /* 16px stops iOS zooming on focus */
    letter-spacing: 0.06em;
}
.cs-hint { margin: 0; min-height: 1.2em; font-size: var(--as-fs-xs); color: var(--as-no); }
.cs-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--as-r-ctl);
    background: var(--as-no-wash);
    color: var(--as-no);
    font-weight: 600;
}

.cs-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--as-line);
    background: var(--as-surface);
}
.cs-foot .btn { min-height: var(--as-tap); padding: 0 18px; }

@media (max-width: 600px) {
    .cs-overlay { align-items: flex-end; padding: 0; }
    .cs-sheet {
        width: 100%;
        max-height: 88vh;
        border-radius: var(--as-r-sheet) var(--as-r-sheet) 0 0;
        border-bottom: 0;
    }
    .cs-foot { flex-direction: column-reverse; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .cs-foot .btn { width: 100%; }
}