/* ============================================================
   iQMS Caller — responsive PWA stylesheet.
   Brand: iQMS indigo (#3b5bdb / #60a5fa gradient), white surfaces,
   restrained accent use per the product register. Runs on staff
   phones AND desktop browsers (never the Windows 7 counters), so
   custom properties, dvh, grid, and safe-area env() are all safe.

   Layout model: one DOM, two arrangements. Below 900px the three
   panels are tabs behind a bottom bar; at 900px+ they become a
   three-column grid (queue | call deck | history) with the deck as
   the visual anchor. app.js flips panel visibility with matchMedia.
   ============================================================ */

:root {
    --primary: #3b5bdb;
    --primary-light: #60a5fa;
    --primary-press: #3350c4;
    --ink: #1e293b;
    --muted: #64748b;
    --bg: #f1f5f9;
    --surface: #ffffff;
    --border: #e2e8f0;
    --focus-ring: rgba(59, 91, 219, .25);
    --success: #10b981;
    --success-text: #047857;
    --success-bg: #ecfdf5;
    --warn-text: #c2410c;
    --warn-bg: #fff7ed;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-bar: 0 -1px 0 var(--border);
    /* z-scale: content < bars < sheet backdrop < sheet < toast */
    --z-bar: 10;
    --z-backdrop: 14;
    --z-sheet: 15;
    --z-toast: 20;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f1f5f9;
        --muted: #94a3b8;
        --bg: #0f172a;
        --surface: #1e293b;
        --border: #334155;
        --focus-ring: rgba(96, 165, 250, .35);
        --success-text: #6ee7b7;
        --success-bg: rgba(16, 185, 129, .12);
        --warn-text: #fdba74;
        --warn-bg: rgba(249, 115, 22, .14);
        --danger: #f87171;
        --danger-bg: rgba(220, 38, 38, .15);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

/* Classes below set display:flex etc., which would silently defeat the
   UA's [hidden] rule (and inline SVG never gets it at all) — app.js
   drives all view/state switching through the hidden attribute, so it
   must always win. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* ---------------- Login ---------------- */

.login-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}

.login-logo { border-radius: 18px; margin-bottom: .75rem; }

.login-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    letter-spacing: -0.01em;
}

.login-sub {
    color: var(--muted);
    font-size: .85rem;
    margin: 0 0 1.5rem;
}

.login-card form { text-align: left; }

.login-footer {
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}

/* ---------------- Fields ---------------- */

.field { margin-bottom: 1.1rem; }

.field-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .4rem;
}

.field-input {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .8rem .9rem;
    min-height: 48px;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}

.field-input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.field-input::placeholder { color: var(--muted); opacity: .55; }

.field-input-number {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.field-password { position: relative; }
.field-password .field-input { padding-right: 3rem; }

.field-eye {
    position: absolute;
    top: 50%;
    right: .4rem;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 10px;
}

.field-eye:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------------- Segmented control ---------------- */

.segmented {
    display: flex;
    background: var(--bg);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.segment { flex: 1; position: relative; }

.segment input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
    transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}

.segment input:checked + span {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.segment input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------------- Buttons ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    min-height: 48px;
    padding: .75rem 1.25rem;
    cursor: pointer;
    transition: filter .15s ease-out, transform .1s ease-out;
    position: relative;
}

.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn-block { width: 100%; }

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    box-shadow: 0 4px 14px rgba(59, 91, 219, .35);
}

.btn-primary:active { filter: brightness(.95); }

.btn-ghost {
    color: var(--primary);
    background: transparent;
    border: 1.5px solid var(--border);
    font-weight: 600;
}

.btn-spinner {
    display: none;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.btn-ghost .btn-spinner {
    border-color: var(--focus-ring);
    border-top-color: var(--primary);
}

.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn-label { visibility: hidden; }
.btn.is-busy .btn-spinner { display: block; position: absolute; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Alerts / toast ---------------- */

.alert {
    border-radius: 12px;
    padding: .7rem .9rem;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
}

.alert-error { color: var(--danger); background: var(--danger-bg); }

.toast {
    position: fixed;
    top: calc(.75rem + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    max-width: min(92vw, 420px);
    width: max-content;
    border-radius: 12px;
    padding: .75rem 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    animation: toast-in .2s ease-out;
}

.toast-success { color: var(--success-text); background: var(--success-bg); }
.toast-error { color: var(--danger); background: var(--danger-bg); }
.toast-warn { color: var(--warn-text); background: var(--warn-bg); }

@media (prefers-color-scheme: dark) {
    .toast-success { background: #064e3b; }
    .toast-error { background: #7f1d1d; }
    .toast-warn { background: #7c2d12; }
}

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------- App shell ---------------- */

.app-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-bar);
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem 1.25rem;
}

.app-bar-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-bar-facility {
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-bar-location {
    font-size: .78rem;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-bar-logout {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
}

.app-bar-logout:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }

/* Live connection state (SSE) */
.live-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
}

.live-on .live-dot {
    background: #4ade80;
    animation: live-pulse 2s ease-out infinite;
}

.live-off .live-dot { background: #fbbf24; }

.live-ms { opacity: .85; font-weight: 600; margin-left: .1rem; }

.live-warn .live-dot { background: #fbbf24; }

.live-bad .live-dot { background: #f87171; animation: none; }

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.app-content {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem calc(5.5rem + env(safe-area-inset-bottom));
}

/* ---------------- Call deck ---------------- */

.station-chips {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
}

.chip {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    min-height: 44px;
    padding: .4rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}

.chip .icon { width: 17px; height: 17px; color: var(--muted); }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.chip-unset {
    border-color: var(--primary-light);
    color: var(--primary);
}

.chip-unset .icon { color: var(--primary); }

.deck-card {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    padding: 1.4rem 1.5rem 1.6rem;
    text-align: center;
    margin-bottom: 1rem;
}

.deck-card.flash { animation: deck-flash .9s ease-out; }

@keyframes deck-flash {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45), var(--shadow-card); }
    100% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0), var(--shadow-card); }
}

.deck-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.deck-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.deck-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
}

.deck-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: live-pulse-amber 1.6s ease-out infinite;
}

@keyframes live-pulse-amber {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); }
    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.deck-status.is-announced .deck-status-dot {
    background: var(--success);
    animation: none;
}

.deck-number {
    font-size: clamp(3.4rem, 18vw, 4.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    margin: .35rem 0 .15rem;
}

.deck-number.roll { animation: number-roll .35s cubic-bezier(.22, 1, .36, 1); }

@keyframes number-roll {
    from { opacity: 0; transform: translateY(.45em); }
    to { opacity: 1; transform: translateY(0); }
}

.deck-room {
    min-height: 1.4rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--primary);
}

@media (prefers-color-scheme: dark) {
    .deck-room { color: var(--primary-light); }
}

.btn-next {
    width: 100%;
    min-height: 64px;
    font-size: 1.1rem;
}

.btn-next .btn-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.btn-next-title { display: inline-flex; align-items: center; gap: .5rem; }

.btn-next-count {
    font-size: .74rem;
    font-weight: 600;
    opacity: .85;
    min-height: 1em;
}

.next-multi {
    display: flex;
    gap: .6rem;
    margin-top: .6rem;
}

.btn-sm-ghost {
    flex: 1;
    min-height: 44px;
    font-size: .85rem;
    padding: .5rem .75rem;
}

/* Manual call disclosure */
.manual-block { margin-top: 1.1rem; }

.manual-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    justify-content: center;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    min-height: 44px;
    cursor: pointer;
    border-radius: 10px;
}

.manual-toggle .icon { width: 16px; height: 16px; transition: transform .2s ease-out; }
.manual-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.manual-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.manual-form {
    display: flex;
    gap: .6rem;
    margin-top: .35rem;
    animation: fade-slide-in .2s ease-out;
}

.manual-form .field-input { flex: 1; font-size: 1.15rem; }
.manual-form .btn { min-width: 96px; }

/* ---------------- Side panels (queue / history) ---------------- */

.panel-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .75rem;
}

.panel-title {
    flex: 1;
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0;
}

.panel-count {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.list-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: .7rem .9rem;
}

.list-item.enter { animation: fade-slide-in .25s ease-out; }

.list-item.leave {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .18s ease-out, transform .18s ease-out;
}

@keyframes fade-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.item-number {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    min-width: 4ch;
}

.item-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.item-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    max-width: 100%;
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(59, 91, 219, .1);
    border-radius: 999px;
    padding: .12rem .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
    .item-chip { color: var(--primary-light); background: rgba(96, 165, 250, .16); }
}

.item-sub {
    font-size: .74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* waiting-time pill: ages neutral -> amber -> red */
.wait-pill {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg);
    border-radius: 999px;
    padding: .12rem .55rem;
    white-space: nowrap;
}

.wait-pill.wait-warn { color: var(--warn-text); background: var(--warn-bg); }
.wait-pill.wait-over { color: var(--danger); background: var(--danger-bg); }

/* status dot on history rows */
.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #f59e0b;
    animation: live-pulse-amber 1.6s ease-out infinite;
}

.status-dot.is-called {
    background: var(--success);
    animation: none;
}

.item-actions { display: flex; gap: .4rem; }

.btn-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--ink);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    transition: filter .15s ease-out, transform .1s ease-out;
}

.btn-icon .icon { width: 18px; height: 18px; }
.btn-icon:active { transform: scale(.94); }
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.btn-icon-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

/* Inline confirm state on queue rows: the Call button expands into a
   labelled confirmation instead of opening a modal. */
.q-call {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    border: none;
    border-radius: 11px;
    min-height: 42px;
    padding: .4rem .8rem;
    cursor: pointer;
    transition: transform .1s ease-out;
    white-space: nowrap;
}

.q-call:active { transform: scale(.96); }
.q-call:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.q-call.confirm {
    background: var(--success-bg);
    color: var(--success-text);
    animation: fade-slide-in .15s ease-out;
}

/* ---------------- Empty states ---------------- */

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

.empty-icon {
    width: 44px;
    height: 44px;
    color: var(--success-text);
    margin-bottom: .5rem;
}

.empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .2rem;
}

.empty-sub { font-size: .85rem; margin: 0; }

/* ---------------- Bottom tab bar ---------------- */

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-bar);
    display: flex;
    background: var(--surface);
    box-shadow: var(--shadow-bar);
    padding-bottom: env(safe-area-inset-bottom);
}

.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: 58px;
    background: none;
    border: none;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    transition: color .15s ease-out;
}

.tab-btn.active { color: var(--primary); }

@media (prefers-color-scheme: dark) {
    .tab-btn.active { color: var(--primary-light); }
}

.tab-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--focus-ring);
    border-radius: 12px;
}

.tab-badge {
    position: absolute;
    top: 7px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: var(--danger);
    border-radius: 999px;
    padding: 0 5px;
}

/* Tab switch: cross-fade the incoming panel */
.tab-panel.appear { animation: fade-slide-in .2s ease-out; }

/* ---------------- Sheets (room / officer / send) ---------------- */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: rgba(15, 23, 42, .45);
    animation: backdrop-in .2s ease-out;
}

@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: var(--z-sheet);
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, .25);
    padding: .6rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    animation: sheet-up .25s cubic-bezier(.22, 1, .36, 1);
}

@keyframes sheet-up {
    from { transform: translate(-50%, 40px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* On wide screens the same sheet floats as a centered dialog. */
@media (min-width: 900px) {
    .sheet {
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        max-width: 420px;
        padding-bottom: 1.25rem;
    }

    @keyframes sheet-up {
        from { transform: translate(-50%, calc(-50% + 24px)); opacity: 0; }
        to { transform: translate(-50%, -50%); opacity: 1; }
    }

    .sheet-handle { visibility: hidden; }
}

.sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    margin: 0 auto .8rem;
}

.sheet-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.sheet-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 50vh;
    overflow-y: auto;
}

.sheet-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    min-height: 50px;
    padding: .6rem .9rem;
    cursor: pointer;
    transition: border-color .15s ease-out;
}

.sheet-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.sheet-option.selected {
    border-color: var(--primary-light);
    color: var(--primary);
}

@media (prefers-color-scheme: dark) {
    .sheet-option.selected { color: var(--primary-light); }
}

/* ---------------- Install helpers ---------------- */

.install-row { margin-top: 1rem; }

.ios-hint {
    margin: 1rem 0 0;
    font-size: .8rem;
    color: var(--muted);
}

/* ---------------- Desktop: three-column control room ---------------- */

@media (min-width: 900px) {
    .tab-bar { display: none; }

    .app-content {
        max-width: 1240px;
        display: grid;
        grid-template-columns: minmax(260px, 330px) minmax(360px, 1fr) minmax(260px, 330px);
        gap: 1.25rem;
        align-items: start;
        padding: 1.5rem 1.5rem 2rem;
    }

    .panel-deck { grid-column: 2; grid-row: 1; }
    #tabQueue { grid-column: 1; grid-row: 1; }
    #tabHistory { grid-column: 3; grid-row: 1; }

    /* Side panels read as docked rails: card surface + own scroll. */
    .panel-side {
        background: var(--surface);
        border-radius: 20px;
        box-shadow: var(--shadow-card);
        padding: 1.1rem 1.1rem 1.25rem;
        max-height: calc(100dvh - 8.5rem);
        overflow-y: auto;
    }

    .panel-side .list-item {
        box-shadow: none;
        background: var(--bg);
    }

    .panel-side .empty-state { padding: 3.5rem .5rem; }
}

/* ---------------- Motion preferences ---------------- */

@media (prefers-reduced-motion: reduce) {
    .toast,
    .sheet,
    .sheet-backdrop,
    .list-item.enter,
    .tab-panel.appear,
    .deck-number.roll,
    .deck-card.flash,
    .manual-form,
    .q-call.confirm { animation: none; }

    .live-on .live-dot,
    .deck-status-dot,
    .status-dot { animation: none; }

    .btn, .btn:active,
    .btn-icon, .btn-icon:active,
    .q-call, .q-call:active { transition: none; transform: none; }

    .segment span, .field-input, .tab-btn, .chip,
    .manual-toggle .icon, .list-item.leave { transition: none; }
}