/* ---------- Inbox rail ------------------------------------------------------------------------- */

.inbox {
    grid-area: inbox;
    border-left: 1px solid var(--hairline);
    background: var(--surface);
    display: grid; grid-template-rows: minmax(0, 1fr);
    min-height: 0; overflow: hidden;
}
.inbox-full { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.inbox-collapsed-view { display: none; }
.shell.inbox-collapsed .inbox-full { display: none; }
.shell.inbox-collapsed .inbox-collapsed-view { display: flex; }
@media (max-width: 1439px) {
    .shell:not(.inbox-open) .inbox-full, .lifted-shell.inbox-open .inbox-collapsed-view { display: none; }
    .shell:not(.inbox-open) .inbox-collapsed-view { display: flex; }
    .lifted-shell.inbox-open .inbox-full { display: grid; }
}
.inbox-head h2 { margin: 0; font-weight: 400; }
.ticket-detail code { font-size: 11px; background: var(--surface); border: 1px solid var(--hairline); padding: 0 3px; }
.inbox-head { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline); min-height: var(--bar-h); }
.inbox-head .v { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 0.8; letter-spacing: -0.04em; }
.inbox-head .v.zero { color: var(--ink-3); }
.inbox-list { overflow-y: auto; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.inbox-collapsed-view { flex-direction: column; align-items: center; gap: var(--s2); padding-top: var(--s3); }
.inbox-collapsed-view .count { writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px; }

/* Ticket: amber-edged slip. */
.ticket {
    background: var(--raised); border: 1px solid var(--hairline); border-left: 4px solid var(--sig-you);
    padding: var(--s3); display: grid; gap: var(--s2);
    animation: slip-in var(--t-settle) var(--ease-settle);
}
.ticket.alarm { border-left-color: var(--sig-alarm); }
.ticket.info { border-left-color: var(--ink-3); }
.ticket.snoozed { opacity: 0.6; }
.ticket-kind { display: flex; align-items: center; gap: var(--s2); }
.ticket-title { font-weight: 600; font-size: 13px; line-height: 1.3; }
.ticket-detail { font-size: 12px; color: var(--ink-2); white-space: pre-wrap; }
.ticket-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }
.ticket textarea { min-height: 52px; }
@keyframes slip-in { from { transform: translateX(16px); opacity: 0; } }

/* ---------- Sheets, drawer, flip --------------------------------------------------------------- */

.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 80; animation: fade var(--t-settle); }
@keyframes fade { from { opacity: 0; } }

.drawer {
    position: fixed; z-index: 90; top: calc(var(--bar-h) + 8px); bottom: 12px; left: 76px;
    width: min(620px, calc(100vw - 120px));
    background: var(--raised); border: 1px solid var(--ink);
    box-shadow: 6px 6px 0 var(--shadow);
    display: grid; grid-template-rows: auto auto 1fr;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: drawer-out 260ms var(--ease-settle);
    transform-origin: left center;
}
@keyframes drawer-out { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
.drawer-head { padding: var(--s4) var(--s4) var(--s3); display: grid; gap: var(--s2); border-bottom: 1px solid var(--hairline); position: relative; }
.drawer-head .key { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); display: flex; gap: var(--s2); align-items: center; }
.drawer-head h2 { font-size: 22px; line-height: 1.2; font-weight: 600; padding-right: 96px; }
.drawer-head h2 .title-edit { all: unset; cursor: text; border-bottom: 1px dashed transparent; overflow-wrap: anywhere; }
.drawer-head h2 .title-edit:hover { border-bottom-color: var(--ink-3); }
.drawer-head h2 .title-edit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.drawer-head .title-input { font-size: 20px; }
.drawer-head .close { position: absolute; right: var(--s3); top: var(--s3); }
.drawer-head .close .kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); border: 1px solid var(--hairline); padding: 0 4px; }
.waiver { display: grid; gap: var(--s2); border: 1px solid var(--hairline); border-left: 4px solid var(--sig-alarm); padding: var(--s3); background: var(--surface); font-size: 13px; }
.drawer-body:focus-visible { outline-offset: -2px; }
@media (max-width: 767px) {
    .drawer { left: 0 !important; right: 0; top: 0; bottom: 0; width: 100vw !important; max-width: 100vw; border: 0; box-shadow: none; }
    .drawer-head .actions { gap: var(--s2); }
    .drawer-head .actions .btn, .drawer-head .actions select { min-height: 40px; }
    .drawer .tabs button { padding: 12px var(--s3); }
}
.drawer-head .actions { display: flex; gap: var(--s1); flex-wrap: wrap; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hairline); padding: 0 var(--s4); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--s2) var(--s3); cursor: pointer; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.drawer-body { overflow-y: auto; padding: var(--s4); display: grid; gap: var(--s4); align-content: start; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px var(--s3); font-size: 13px; }
.kv > span:nth-child(odd) { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-2); letter-spacing: 0.06em; padding-top: 2px; }

/* Run tape: vertical strip of events. */
.tape { display: grid; gap: 0; border-left: 2px solid var(--hairline); margin-left: 6px; }
.tape-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--s2); padding: 5px 0 5px var(--s3); position: relative; }
.tape-row::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; background: var(--bg); border: 1.5px solid var(--ink-3); }
.tape-row.text::before { border-radius: 50%; border-color: var(--ink); }
.tape-row.wait::before { background: var(--sig-you); border-color: var(--sig-you); }
.tape-row.file::before { transform: rotate(45deg); }
.tape-row.ok::before { background: var(--sig-done); border-color: var(--sig-done); }
.tape-row.fail::before { background: var(--sig-alarm); border-color: var(--sig-alarm); }
.tape-row.latest::before { background: var(--sig-live); border-color: var(--sig-live-line); box-shadow: 0 0 0 1px var(--light-ring), 0 0 6px var(--sig-live); }
.tape-row .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding-top: 1px; white-space: nowrap; }
.tape-row .line { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; text-align: left; min-width: 0; width: 100%; min-height: 20px; }
.tape-row .line.open { white-space: pre-wrap; }
.tape-row .prose { font-size: 14px; }
.run-picker { display: flex; gap: var(--s1); flex-wrap: wrap; }
.run-chip { border: 1px solid var(--hairline); background: var(--bg); padding: 4px 8px; min-height: 26px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; display: flex; gap: 6px; align-items: center; }
.run-chip.on { border-color: var(--ink); background: var(--raised); }
.activity { display: grid; gap: var(--s3); }
.activity-row { display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); }
.activity-row .who { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.file-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.file-row { gap: var(--s3); }
.file-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.file-row .add { color: var(--sig-done-text); }
.file-row .del { color: var(--sig-alarm-text); }

/* Flip card: every module has Front, Back and Source faces. */
.flip-host { position: fixed; z-index: 95; perspective: 1400px; width: 460px; max-width: calc(100vw - 24px); }
.flip-card { position: relative; transform-style: preserve-3d; transition: transform var(--t-flip) var(--ease-flip); animation: flip-in var(--t-flip) var(--ease-flip); }
@keyframes flip-in { from { transform: rotateY(-80deg); opacity: 0; } }
.flip-card.turning { transform: rotateY(90deg); }
.flip-face {
    background: var(--raised); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
    display: grid; grid-template-rows: auto auto 1fr auto; max-height: calc(100vh - 140px);
}
.flip-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline); }
.flip-head .kind { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.flip-head h3 { font-size: 16px; }
.face-switch { display: flex; margin-left: auto; border: 1px solid var(--hairline); }
.face-switch button { border: 0; background: var(--bg); padding: 3px 8px; min-height: 26px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; color: var(--ink-2); }
.face-switch button.on { background: var(--accent); color: var(--accent-ink); }
.flip-body { padding: var(--s4); overflow-y: auto; display: grid; gap: var(--s3); align-content: start; }
.flip-foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--hairline); align-items: center; }
.flip-foot .note { font-size: 11px; color: var(--ink-2); margin-right: auto; }
.source { width: 100%; min-height: 260px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; background: var(--bg); border: 1px solid var(--hairline); padding: var(--s3); resize: vertical; tab-size: 2; white-space: pre; }
.source.invalid { border-color: var(--sig-alarm); }
.channel-secret { display: grid; gap: var(--s2); border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.channel-secret .copy-line code { font-size: 11px; }
.error-line { color: var(--sig-alarm-text); font-family: var(--font-mono); font-size: 11px; }
.big-number { font-family: var(--font-display); font-size: 64px; font-weight: 600; line-height: 0.9; letter-spacing: -0.05em; }

/* ---------- Console ---------------------------------------------------------------------------- */

.console {
    position: fixed; z-index: 100; left: 50%; top: 12vh; transform: translateX(-50%);
    width: min(680px, calc(100vw - 24px)); background: var(--raised); border: 1px solid var(--ink);
    box-shadow: 8px 8px 0 var(--shadow); animation: console-in 160ms var(--ease-settle);
}
@keyframes console-in { from { transform: translate(-50%, -8px); opacity: 0; } }
.console input { width: 100%; height: 56px; border: 0; border-bottom: 1px solid var(--hairline); padding: 0 var(--s4); background: transparent; font-size: 18px; }
.console input:focus { outline: none; }
.console input:focus-visible { box-shadow: inset 0 -2px 0 var(--focus); }
.console-results { max-height: 52vh; overflow-y: auto; padding: var(--s2) 0; }
.console-group { padding: var(--s2) var(--s4) var(--s1); }
.console-row { display: flex; align-items: center; gap: var(--s3); padding: 8px var(--s4); cursor: pointer; border-left: 2px solid transparent; }
.console-row.on { background: var(--surface); border-left-color: var(--accent); }
.console-row .hint { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.help-sheet { padding: var(--s6); display: grid; gap: var(--s4); max-height: calc(100vh - 16vh); overflow-y: auto; }
.help-sheet .kv { grid-template-columns: 110px 1fr; }
.console-foot { border-top: 1px solid var(--hairline); padding: var(--s2) var(--s4); display: flex; gap: var(--s4); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }

/* ---------- Slips (toasts) --------------------------------------------------------------------- */

/* Slips sit bottom-right over the stage, clear of the columns people read first, above the transparent scrim of a
   card but below every sheet. Beside the coach when it is up, never on top of it. */
.slips {
    position: fixed; right: calc(var(--inbox-w) + 16px); bottom: calc(var(--strip-h) + 16px); z-index: 85;
    width: min(420px, calc(100vw - var(--rail-w) - var(--inbox-w) - 32px)); display: grid; gap: var(--s2); pointer-events: none;
}
.lifted-shell .slips { bottom: calc(var(--tray-h) + 16px); }
.shell:has(.coach) .slips { right: calc(var(--inbox-w) + 20px + 340px + 12px); width: min(360px, calc(100vw - var(--rail-w) - var(--inbox-w) - 400px)); }
.slip-count { flex: none; font-family: var(--font-mono); font-size: 11px; line-height: 18px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; }
.slip-stack { display: grid; gap: var(--s2); }
.slip-stack:empty { display: none; }
.slip { pointer-events: auto; --focus: currentColor; background: var(--ink); color: var(--bg); padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: flex-start; font-size: 13px; animation: slip-up var(--t-settle) var(--ease-settle); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.slip :focus-visible { outline-offset: -3px; }
.slip.alarm { background: var(--sig-alarm); color: #fff; }
.slip { flex-wrap: wrap; }
.slip-text { flex: 1 1 0; min-width: 0; }
.slip-actions { flex-basis: 100%; display: flex; gap: var(--s2); }
.slip-glyph { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.slip .slip-close { width: 24px; justify-content: center; padding: 0; flex: none; }
.pocket .slips { left: 12px; right: 12px; bottom: 12px; width: auto; z-index: 85; }
.slip.success { background: #17724B; color: #fff; }
.slip .btn { height: 24px; font-size: 12px; background: transparent; color: inherit; border-color: currentColor; }
@keyframes slip-up { from { transform: translateY(12px); opacity: 0; } }

/* ---------- Coach (first run) ------------------------------------------------------------------ */

.coach {
    position: fixed; z-index: 70; right: calc(var(--inbox-w) + 20px); bottom: calc(var(--strip-h) + 20px);
    width: 340px; background: var(--raised); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow);
    padding: var(--s4); display: grid; gap: var(--s3); animation: slip-up var(--t-settle) var(--ease-settle);
}
.lifted-shell .coach { bottom: calc(var(--tray-h) + 20px); }
/* Folded, the coach is one small tab in the same corner, so the plates under it are clear. */
.coach-head { display: flex; align-items: center; gap: var(--s2); }
.coach-head .step { flex: 1; }
.coach-fold { height: 24px; font-size: 12px; }
.coach.folded { width: auto; padding: var(--s2) var(--s3); }
.coach.folded .coach-fold { height: 28px; }
.coach .step { display: flex; gap: 3px; }
.coach .step i { width: 18px; height: 4px; background: var(--hairline); }
.coach .step i.on { background: var(--ink); }
.coach .step i.now { background: var(--sig-you-line); }
.coach h2 { font-size: 18px; margin: 0; }
.coach .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Signer (always graphite, most serious form) ---------------------------------------- */

.signer-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(8, 8, 9, 0.86); display: grid; place-items: center; animation: fade 200ms; }
.signer {
    --bg: #111213; --surface: #18191B; --raised: #202225; --ink: #EDEBE6; --ink-2: #9A988F; --ink-3: #77756E; --hairline: #2E3033;
    --focus: #EDEBE6; --field-border: #727479; --light-ring: transparent;
    --sig-live-text: #5CF2B4; --sig-you-text: #FFB020; --sig-alarm-text: #FF6B7A; --sig-done-text: #3FBF85;
    --sig-live-line: #5CF2B4; --sig-you-line: #FFB020;
    width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--bg); color: var(--ink); border: 1px solid var(--hairline);
    display: grid; gap: var(--s4); padding: var(--s6);
}
.signer-origin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--hairline); padding-bottom: var(--s3); }
.signer-origin .signer-host { color: var(--ink); }
.signer-origin .signer-note { flex-basis: 100%; font-family: var(--font-text); font-size: 12px; }
.signer .kit-saved { align-items: flex-start; }
.signer .kit-saved input { margin-top: 4px; }
.signer-origin .lock { width: 14px; height: 14px; }
.signer h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.signer .sentences { display: grid; gap: var(--s2); font-size: 15px; }
.signer .sentences li { margin-left: 1em; }
.signer pre { background: var(--surface); border: 1px solid var(--hairline); padding: var(--s3); font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; margin: 0; }
.anchor-words { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; word-break: break-word; }
.anchor-words span { display: inline-block; margin-right: 0.35em; }
.key-button {
    justify-self: start; height: 56px; padding: 0 var(--s6) 0 var(--s8); cursor: pointer;
    background: var(--ink); color: var(--bg); border: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
    clip-path: polygon(28px 0, 100% 0, 100% 100%, 28px 100%, 0 50%);
}
.key-button[disabled] { opacity: 0.4; cursor: wait; }
.sealed-lock { display: flex; gap: var(--s3); align-items: center; font-family: var(--font-mono); font-size: 12px; }
.sealed-lock svg { width: 36px; height: 36px; }
.sealed-lock .shackle { transform: translateY(-5px); transition: transform 260ms cubic-bezier(.5, 0, .2, 1.4); }
.sealed-lock.closed .shackle { transform: translateY(0); }
.command { display: flex; gap: var(--s2); align-items: stretch; }
.command code { flex: 1; font-family: var(--font-mono); font-size: 11px; background: var(--surface); border: 1px solid var(--hairline); padding: var(--s3); word-break: break-all; }
.words-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.words-compare > div { border: 1px solid var(--hairline); padding: var(--s3); display: grid; gap: var(--s2); }
.words-compare .anchor-words { font-size: 22px; }
.signer .signer-close { margin-left: auto; color: var(--ink); }
.signer .signer-tiers { display: flex; gap: var(--s2); }
.signer .signer-simulate { justify-self: start; color: var(--ink); background: var(--surface); }
.signer .signer-bytes { cursor: pointer; }
.signer-wait { border: 1px solid var(--hairline); padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
.signer-wait a { color: var(--ink); }
.settings-anchor { font-size: 32px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Hangar ----------------------------------------------------------------------------- */

.hangar { position: fixed; z-index: 90; left: calc(var(--rail-w) + 12px); right: calc(var(--inbox-w) + 12px); bottom: calc(var(--strip-h) + 12px); top: calc(var(--bar-h) + 12px);
    background: var(--surface); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow); display: grid; grid-template-rows: auto 1fr; animation: tray-up var(--t-settle) var(--ease-settle); }
.hangar.review { left: max(80px, calc(50vw - 460px)); right: max(80px, calc(50vw - 460px)); }
.review-body { overflow-y: auto; padding: var(--s4); display: grid; gap: 20px; align-content: start; min-height: 0; }
.review-issues { display: grid; gap: var(--s1); border-left: 4px solid var(--sig-alarm); padding-left: var(--s3); }
.review-issues h3 { margin: 0; }
.hangar-head { display: flex; align-items: flex-end; gap: var(--s4); padding: var(--s4); border-bottom: 1px solid var(--hairline); }
.hangar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s4); padding: var(--s4); overflow-y: auto; align-content: start; }
.bay { border: 1.5px solid var(--ink); background: var(--bg); display: grid; gap: var(--s3); padding: var(--s3); position: relative; min-height: 260px; align-content: start; }
.bay.empty { border-style: dashed; place-items: center; align-content: center; cursor: pointer; color: var(--ink-2); }
.bay.empty:hover { color: var(--ink); background: var(--raised); }
.bay-lights { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0; padding: 0; }
.seal-why { font-size: 12px; color: var(--ink-2); flex-basis: 100%; }
.bay-lights > li { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-2); letter-spacing: 0.04em; }
.bay-lights .light { transition: background 200ms, box-shadow 200ms; }
.bay-lights .light:nth-child(1) { transition-delay: 0ms; }
.bay-name { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.bay-facts { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.bay.revoked, .bay.offline { opacity: 0.6; }
.bay.flapping { border-color: var(--sig-you-line); }
.cartridges { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cartridge {
    width: 112px; height: 60px; position: relative; border: 1.5px solid var(--ink); background: var(--raised);
    display: grid; align-content: space-between; padding: 5px 6px; cursor: pointer; text-align: left;
    clip-path: polygon(0 0, calc(100% - 14px) 0, calc(100% - 14px) 8px, 100% 8px, 100% 100%, 0 100%);
}
.cartridge .window { border: 1px solid var(--hairline); padding: 1px 4px; font-family: var(--font-mono); font-size: 10px; background: var(--surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartridge .ver { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.cartridge .notch { position: absolute; right: 2px; top: 1px; width: 9px; height: 5px; background: var(--hairline); }
.cartridge.ghost { border-style: dashed; background: transparent; }
.cartridge.ghost .window { border-style: dashed; }
.cartridge.login .notch { background: var(--sig-you); box-shadow: 0 0 5px var(--sig-you); }
.cartridge.installed .notch { background: var(--sig-done); }
.lock-line { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 10.5px; border-top: 1px solid var(--hairline); padding-top: var(--s2); }
.bay-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }

/* ---------- Mission control (the Deck zoom level) ---------------------------------------------- */

.mission { padding: var(--s6); display: grid; gap: var(--s6); animation: zoom-in 380ms var(--ease-settle); transform-origin: top left; }
@keyframes zoom-in { from { transform: scale(1.35); opacity: 0; } }
.mission-numbers { display: flex; gap: var(--s12); flex-wrap: wrap; align-items: flex-end; }
.mission-numbers .stat .v { font-size: 64px; }
.spine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.spine-strip { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; border-bottom: 1px solid var(--hairline); padding-bottom: var(--s3); cursor: pointer; color: inherit; text-decoration: none; }
.spine-strip:focus-visible { outline-offset: 4px; }
.agg-row { flex-wrap: wrap; }
.spine-signals { display: flex; gap: var(--s3); align-items: center; }
.spine-signals > span { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.spine-signals .signal-word { color: var(--ink-2); }
.panel-label h3, .mission h3 { margin: 0; font-weight: 400; }
.spine-strip:hover .agg { background: var(--raised); }
.spine-strip .spine-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.agg-row { display: flex; gap: 6px; }
.agg { flex: none; width: 96px; height: 64px; background: var(--surface); border: 1px solid var(--hairline); position: relative; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); padding: 6px 8px; display: grid; align-content: space-between; }
.agg::before { content: ""; position: absolute; left: -1px; top: -1px; width: 15px; height: 15px; background: linear-gradient(135deg, transparent 44%, var(--cat) 44% 62%, transparent 62%); }
.agg .n { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; justify-self: end; }
.agg .s { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.panel { background: var(--surface); border: 1px solid var(--hairline); display: grid; grid-template-rows: auto 1fr; min-height: 200px; }
.panel.stale .panel-label { border-bottom-style: dotted; }
.panel-label { display: flex; justify-content: space-between; align-items: center; padding: 6px var(--s3); border-bottom: 1px solid var(--hairline); background: var(--bg); }
.panel-body { padding: var(--s3); display: grid; gap: var(--s2); align-content: start; overflow: auto; max-height: 340px; }
.run-line { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.run-line .sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.audit-line { font-family: var(--font-mono); font-size: 10px; display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); padding: 3px 0; }
.audit-line .h { color: var(--ink-2); }

/* ---------- Entry pages ------------------------------------------------------------------------ */

.entry { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); }
.entry-art { border-right: 1px solid var(--hairline); padding: var(--s12); display: grid; align-content: space-between; background: var(--surface); position: relative; overflow: hidden; }
.entry-art .giant { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 11vw, 168px); line-height: 0.85; letter-spacing: -0.06em; }
.entry-form { padding: var(--s12); display: grid; align-content: center; gap: var(--s6); max-width: 520px; }
.entry-form h1 { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.03em; }
.deck-name-live { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 7.5vw, 112px); line-height: 0.9; letter-spacing: -0.05em; overflow-wrap: break-word; hyphens: auto; min-height: 1em; }
.deck-name-live.long { font-size: clamp(32px, 4.6vw, 72px); line-height: 0.95; }
.starter .nm, .starter .bl { display: block; }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.starter { border: 1px solid var(--hairline); background: var(--raised); padding: var(--s3); display: grid; gap: var(--s2); cursor: pointer; text-align: left; }
.starter.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.starter .miniature { display: flex; gap: 2px; height: 34px; align-items: stretch; }
.starter .miniature i { flex: 1; background: var(--surface); border: 1px solid var(--hairline); border-top: 3px solid var(--cat); }
.starter .miniature.blank i { border-style: dashed; border-top: 1px dashed var(--hairline); }
.starter .nm { font-weight: 600; font-size: 13px; }
.starter .bl { font-size: 11px; color: var(--ink-2); }
.demo-spine { display: flex; gap: 6px; align-items: flex-end; }
.demo-spine i { width: 56px; background: var(--bg); border: 1px solid var(--hairline); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); position: relative; }
.demo-spine i::before { content: ""; position: absolute; left: -1px; top: -1px; width: 15px; height: 15px; background: linear-gradient(135deg, transparent 44%, var(--cat) 44% 62%, transparent 62%); }
@media (max-width: 900px) { .entry { grid-template-columns: 1fr; } .entry-art { display: none; } }

/* Reconnecting: a thin hairline across the top slowly fills. */
.reconnect-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: var(--hairline); }
.reconnect-line::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); animation: fill-line 8s linear forwards; }
@keyframes fill-line { from { width: 0; } to { width: 100%; } }

/* ---------- Tune (appearance) ----------------------------------------------------------------- */

.tune {
    position: fixed; z-index: 110; left: calc(var(--rail-w) + 12px); top: 12px; bottom: 12px; width: min(560px, calc(100vw - 100px));
    background: var(--raised); border: 1px solid var(--accent); box-shadow: 8px 8px 0 var(--shadow);
    display: grid; grid-template-rows: auto 1fr auto; animation: tune-in 260ms var(--ease-settle);
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}
@keyframes tune-in { from { transform: translateX(-24px); opacity: 0; } }
.tune-head { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s6) var(--s6) var(--s4); border-bottom: 1px solid var(--hairline); }
.tune-head h2 { font-size: 40px; font-weight: 600; margin: 4px 0 6px; }
.tune-body { overflow-y: auto; padding: var(--s4) var(--s6); display: grid; gap: var(--s6); align-content: start; }
.tune-section { display: grid; gap: var(--s3); }
.tune-grid { grid-template-columns: repeat(3, 1fr); }
.tune-foot { display: flex; gap: var(--s2); align-items: center; padding: var(--s3) var(--s6); border-top: 1px solid var(--hairline); }
.tune-foot .faint { margin-right: auto; font-size: 12px; }
.mode-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.mode-tile { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--hairline); background: transparent; cursor: pointer; text-align: left; }
.mode-tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mode-preview { height: 58px; display: flex; gap: 3px; padding: 6px; position: relative; }
.mode-preview i { flex: 1; border: 1px solid; opacity: 0.55; clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); }
.mode-preview b { position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; }
.mode-name { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 2px solid var(--raised); box-shadow: 0 0 0 1px var(--hairline); cursor: pointer; padding: 0; display: grid; place-items: center; color: var(--bg); }
.swatch.on { box-shadow: 0 0 0 2px var(--accent); }
.swatch.custom { background: conic-gradient(#FF8A7A, #E8C99A, #6FD6E0, #8EC5FF, #B9A4FF, #FF7AB6, #FF8A7A); position: relative; overflow: hidden; }
.swatch.custom input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.hex { width: 104px; font-family: var(--font-mono); font-size: 12px; }
.readout { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; font-size: 12px; }
.tag.ok { border-color: var(--sig-done); color: var(--ink); }
.tag.bad { border-color: var(--sig-alarm); color: var(--sig-alarm-text); }
.clash { color: var(--sig-you-text); font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--hairline); }
.seg button { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.tint-row { display: flex; gap: var(--s3); align-items: center; }
.tint-row input[type=range] { flex: 1; accent-color: var(--accent); }
.tint-row input[type=color] { width: 36px; height: 30px; border: 1px solid var(--hairline); background: none; padding: 2px; }
.signal-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 12px; color: var(--ink-2); }
.signal-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.signal-legend b { color: var(--ink); font-weight: 600; margin-right: 4px; }

/* ---------- Workspace switcher --------------------------------------------------------------- */

.switcher { position: fixed; z-index: 95; left: calc(var(--rail-w) + 8px); top: 8px; width: 360px; max-height: calc(100vh - 16px);
    background: var(--raised); border: 1px solid var(--accent); box-shadow: 6px 6px 0 var(--shadow); display: grid; grid-template-rows: auto 1fr auto; padding: var(--s3); gap: var(--s2);
    animation: tune-in 200ms var(--ease-settle); }
.switcher-list { overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.switcher-org { padding: var(--s2) 4px 2px; }
.switcher-row { display: flex; align-items: center; gap: var(--s2); padding: 6px; text-decoration: none; border: 1px solid transparent; }
.switcher-row:hover, .switcher-row:focus-visible { border-color: var(--hairline); }
.switcher-row.on { border-color: var(--accent); }
.switcher-add { display: grid; gap: 6px; padding: 6px; border: 1px dashed var(--hairline); }
.switcher-foot { display: flex; gap: var(--s2); border-top: 1px solid var(--hairline); padding-top: var(--s2); }
.wordmark.small { width: 26px; height: 26px; font-size: 10px; margin: 0; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
button.wordmark { border: 0; cursor: pointer; }

/* ---------- Settings (the allowed exception to "no settings pages") --------------------------- */

.settings { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; }
.settings-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s6); border-bottom: 1px solid var(--hairline); background: var(--surface); }
.settings-head h1 { font-size: 28px; font-weight: 600; }
.settings-head .wordmark { margin: 0; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); border-right: 1px solid var(--hairline); }
.settings-nav a { text-decoration: none; padding: 8px 10px; border-left: 2px solid transparent; font-size: 14px; }
.settings-nav a.on { border-left-color: var(--accent); background: var(--surface); }
.settings-body { padding: var(--s6); display: grid; gap: var(--s4); align-content: start; max-width: 980px; }
.settings-body section { display: grid; gap: var(--s4); }
.settings-body h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.grid-table td { padding: 8px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.grid-table td.when, .grid-table td.nowrap { white-space: nowrap; }
.grid-table select { width: auto; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
.hook-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2); align-items: end; }
.hook-form > .btn { justify-self: start; }
.event-list { display: grid; gap: var(--s1); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.choice { display: flex; gap: var(--s3); padding: var(--s3); border: 1px solid var(--hairline); cursor: pointer; }
.choice.on { border-color: var(--accent); }
.table-scroll { overflow-x: auto; max-width: 100%; contain: paint; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* On a phone the nav is one scrollable row of tabs and the header wraps; nothing is wider than the screen. */
@media (max-width: 767px) {
    .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
    .settings-head { flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); }
    .settings-head > div { min-width: 0; }
    .settings-head h1 { font-size: 22px; }
    .settings-nav { flex-direction: row; overflow-x: auto; contain: paint; gap: 4px; padding: var(--s2) var(--s4); border-right: 0; border-bottom: 1px solid var(--hairline); scrollbar-width: thin; }
    /* contain: paint keeps the row's scrollable tabs out of the document width; overflow alone still leaks it in Chromium. */
    .settings-nav a { white-space: nowrap; flex: none; border-left: 0; border-bottom: 2px solid transparent; }
    .settings-nav a.on { border-bottom-color: var(--accent); }
    .settings-nav p { display: none; }
    .settings-body { padding: var(--s4); min-width: 0; }
    .copy-line code { overflow-wrap: anywhere; }
}
.settings-body section > .btn, .settings-body section > button, .settings-body section > a.btn { justify-self: start; }