:root {
  --cabin: #17181b;      /* the dark of the cockpit */
  --binnacle: #202226;   /* raised panels */
  --well: #101113;       /* recessed inputs and the dial face */
  --seam: #33363c;
  --dial: #f1f0ea;       /* instrument white */
  --dim: #9da1a9;
  --vegas: #ffd400;      /* the TT's paint: marks what is yours to do */
  --needle: #e5261c;     /* redline and anything in the way */
  --go: #4bd08a;
  --text: "Archivo", "Segoe UI", system-ui, sans-serif;
  --inst: "Archivo", "Segoe UI", system-ui, sans-serif;   /* set wide and bold where used */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--dial);
  font: 400 1rem/1.5 var(--text);
  font-variant-numeric: tabular-nums;
  /* soft light from the dial side so the page is not a flat black sheet */
  background:
    radial-gradient(900px 520px at 22% 0%, #26282d 0%, transparent 70%),
    var(--cabin);
  background-attachment: fixed;
  min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--vegas); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.none { color: var(--dim); }
.pad { padding: 14px 0; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 12px 24px; background: rgba(23, 24, 27, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--seam);
}
.mark { font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 0.9375rem; letter-spacing: 0; white-space: nowrap; }
.mark i { display: inline-block; width: 22px; height: 8px; margin-right: 10px; background: var(--vegas); transform: skewX(-24deg); }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--well); border: 1px solid var(--seam); border-radius: 999px; }
.tabs button { background: none; border: 0; border-radius: 999px; padding: 8px 20px; color: var(--dim); font-weight: 600; min-height: 40px; }
.tabs button[aria-current="true"] { background: var(--vegas); color: #111; }
.bar-right { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font-size: 0.8125rem; color: var(--dim); }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--dial); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 8px var(--go); }
.live.off { color: var(--dim); }
.live.off::before { background: var(--needle); box-shadow: none; }
.fresh { background: var(--vegas); color: #111; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 0.8125rem; min-height: 36px; }
.link { background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; color: var(--dial); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 24px 96px; }
h1 { margin: 0; font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 1.5rem; letter-spacing: 0.01em; }
h2 { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 600; color: var(--dim); }
h2.gap { margin-top: 32px; }

/* ---------- home ---------- */
.next-up { background: var(--binnacle); border: 1px solid var(--seam); border-radius: 18px; padding: 32px; }
.nu-name { margin: 0; font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; }
.nu-step { margin: 14px 0 0; font-size: 1.1875rem; max-width: 52ch; }
.nu-block { margin: 10px 0 0; font-size: 0.9375rem; color: var(--dim); max-width: 60ch; }
.next-up .actions { padding-top: 24px; }
.hint { margin: 14px 0 0; font-size: 0.8125rem; color: var(--dim); }

/* shift strip: six gears, the projects in each, redline at Paid */
.shift { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 16px; background: var(--well); border: 1px solid var(--seam); border-radius: 18px; overflow: hidden; }
.cell { padding: 0 0 14px; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--seam); }
/* the shift light across the top of each gear */
.cell::before { content: ""; display: block; height: 5px; background: #3d4046; }
.cell:not(.empty)::before { background: var(--dial); }
.cell.top::before { background: var(--vegas); box-shadow: 0 0 18px rgba(255, 212, 0, 0.55); }
.cell.redline::before { background: var(--needle); }
.cell.top { background: linear-gradient(#26272b, transparent 70%); }
.cell-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 14px 14px 10px; background: none; border: 0; text-align: left; }
.cell-head .g { font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 1.5rem; line-height: 1; color: var(--dim); }
.cell-head .l { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-head .c { font-size: 0.8125rem; color: var(--dim); }
.cell.top .g { color: var(--vegas); }
.cell.redline .g { color: var(--needle); }
.cell.empty .l { color: var(--dim); }
.cell-head:hover .l { text-decoration: underline; text-underline-offset: 3px; }
.cell ul { list-style: none; margin: 0; padding: 0 6px; }
.cell li.none { padding: 6px 8px; font-size: 0.8125rem; }
.cell li button { width: 100%; background: none; border: 0; text-align: left; padding: 7px 8px; border-radius: 6px; font-size: 0.875rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 34px; }
.cell li button.mine { color: var(--vegas); }
.cell li button:hover { background: #2a2c31; color: var(--dial); }
.shift-say { margin: 12px 4px 0; color: var(--dim); font-size: 0.9375rem; max-width: 80ch; }

/* trip computer line */
.trip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 0; border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam); }
.trip div { padding: 14px 16px 14px 0; }
.trip div + div { padding-left: 16px; border-left: 1px solid var(--seam); }
.trip dt { font-size: 0.8125rem; color: var(--dim); }
.trip dd { margin: 2px 0 0; font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 0.9375rem; }

.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; margin-top: 36px; }
.queue, .sites, .ledger, .piles ul { list-style: none; margin: 0; padding: 0; }
.queue li + li { border-top: 1px solid var(--seam); }
.queue button { width: 100%; display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; background: none; border: 0; text-align: left; }
.queue button:hover .q-name { color: var(--vegas); }
.q-name { font-weight: 600; }
.q-step { color: var(--dim); font-size: 0.9375rem; }
.sites li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; }
.sites li + li { border-top: 1px solid var(--seam); }
.lately { list-style: none; margin: 0; padding: 0; }
.lately li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 0; font-size: 0.9375rem; color: var(--dim); }
.lately li + li { border-top: 1px solid var(--seam); }
.lately b { color: var(--dial); font-weight: 600; }
.lately .when { font-size: 0.8125rem; padding-top: 2px; }
.leadline { margin: 0; color: var(--dim); font-size: 0.9375rem; max-width: 44ch; }
.leadline a { color: var(--dial); display: inline-block; padding: 8px 0; }

.pulse { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--dim); white-space: nowrap; }
.pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seam); }
.pulse.up::before { background: var(--go); box-shadow: 0 0 8px var(--go); }
.pulse.down { color: var(--needle); font-weight: 600; }
.pulse.down::before { background: var(--needle); }

/* ---------- shared controls ---------- */
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.head p { margin: 0; color: var(--dim); font-size: 0.9375rem; }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--vegas); color: #111; border: 1px solid var(--vegas); border-radius: 8px; padding: 11px 18px; font-weight: 700; min-height: 44px; text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.quiet { background: none; color: var(--dial); border-color: #5b5f67; font-weight: 600; }
.btn.quiet:hover { border-color: var(--dial); }
.status { font-size: 0.875rem; color: var(--dim); margin: 0; }
.status.bad { color: #ff7a70; font-weight: 600; }
.status:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { background: none; border: 1px solid var(--seam); border-radius: 999px; padding: 8px 14px; font-size: 0.875rem; color: var(--dim); min-height: 40px; }
.chips button[aria-pressed="true"], .chips button[aria-checked="true"] { border-color: var(--dial); color: var(--dial); background: var(--binnacle); }

/* ---------- projects ---------- */
.group { margin-top: 32px; }
.group h2 { display: flex; align-items: baseline; gap: 12px; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--seam); font-size: 1.0625rem; color: var(--dial); }
.group h2 .g { font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 0.8125rem; color: var(--vegas); }
.group h2 .n, .pile h2 .n { margin-left: auto; font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 0.8125rem; color: var(--dim); }
.row { border-bottom: 1px solid var(--seam); }
.row-head { width: 100%; background: none; border: 0; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 110px; gap: 24px; padding: 16px 0; align-items: start; }
.row-head:hover .name { color: var(--vegas); }
.name { font-weight: 700; font-size: 1.0625rem; }
.who { display: block; font-size: 0.875rem; color: var(--dim); margin-top: 2px; }
.next { font-size: 0.9688rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 0.8125rem; color: var(--dim); }
.tag-me { background: var(--vegas); color: #111; padding: 1px 8px; border-radius: 4px; font-weight: 700; }
.tag-pin { color: var(--vegas); font-weight: 600; }
.tag-stop { color: #ff7a70; }
.side { text-align: right; }

.detail { background: var(--binnacle); border: 1px solid var(--seam); border-radius: 12px; padding: 22px; margin: 0 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; }
.facts h3, .edit h3 { margin: 0 0 10px; font-size: 0.875rem; font-weight: 600; color: var(--dim); }
.facts ul { margin: 0 0 20px; padding-left: 18px; font-size: 0.9375rem; }
.facts li { margin-bottom: 6px; }
.facts p { margin: 0 0 16px; font-size: 0.9375rem; max-width: 56ch; }
.facts a { display: inline-block; padding: 8px 0; }
.facts .path, .facts .touched { font-size: 0.8125rem; color: var(--dim); word-break: break-all; margin-bottom: 6px; }
.edit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.edit h3, .edit .wide { grid-column: 1 / -1; }
label { display: grid; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
input[type="text"], input[type="url"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 10px 12px; background: var(--well); border: 1px solid #4a4d54; border-radius: 8px; font-size: 1rem; font-weight: 400; color: var(--dial);
}
select { appearance: auto; }
textarea { resize: vertical; min-height: 76px; line-height: 1.4; }
::placeholder { color: #70747c; }
.checkline { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 0.9375rem; color: var(--dial); min-height: 32px; }
.checkline input { width: 20px; height: 20px; accent-color: var(--vegas); }

/* ---------- ideas ---------- */
.capture { background: var(--binnacle); border: 1px solid var(--seam); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.capture textarea { border: 0; background: none; font-size: 1.1875rem; min-height: 64px; padding: 6px 4px; resize: none; }
.capture textarea:focus { outline: none; }
.capture:focus-within { border-color: var(--vegas); }
.capture-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.piles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; align-items: start; }
.pile h2 { display: flex; align-items: baseline; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--seam); color: var(--dial); font-size: 1.0625rem; }
.pile-keep h2 { border-color: var(--vegas); }
.idea { border-bottom: 1px solid var(--seam); }
.idea-head { width: 100%; background: none; border: 0; text-align: left; padding: 14px 0; display: grid; gap: 4px; }
.idea-text { font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-meta { font-size: 0.8125rem; color: var(--dim); }
.pile-parked .idea-text { color: var(--dim); }
.idea-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.idea-actions button { background: none; border: 1px solid #5b5f67; border-radius: 8px; padding: 8px 12px; font-size: 0.875rem; min-height: 40px; }
.idea-actions button:hover { border-color: var(--dial); }
.idea-actions select { width: auto; padding: 8px 10px; font-size: 0.875rem; min-height: 40px; }

/* ---------- sign-in ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.gate form { width: 100%; max-width: 340px; display: grid; gap: 16px; }
.gate h1 { font-size: 1.75rem; }
.gate h1 i { display: block; width: 44px; height: 12px; margin-bottom: 22px; background: var(--vegas); transform: skewX(-24deg); }
.gate p { margin: 0; color: var(--dim); }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  /* no blur here: a filtered parent would trap the fixed tab bar inside the header */
  .bar { grid-template-columns: 1fr auto; padding: 10px 16px; backdrop-filter: none; background: var(--cabin); }
  .bar-right #saved { display: none; }
  .bar-right { gap: 12px; }
  .tabs { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; justify-content: space-between; background: #0c0d0f; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); }
  .tabs button { flex: 1; padding: 10px 8px; min-height: 46px; }
  .wrap { padding: 18px 16px 120px; }
  .next-up { padding: 22px 18px; }
  .shift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell + .cell { border-left: 0; }
  .cell:nth-child(even) { border-left: 1px solid var(--seam); }
  .cell:nth-child(n + 3) { border-top: 1px solid var(--seam); }
  .trip { grid-template-columns: 1fr 1fr; }
  .trip div:nth-child(3) { padding-left: 0; border-left: 0; }
  .trip div:nth-child(n + 3) { border-top: 1px solid var(--seam); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .queue button { grid-template-columns: 1fr; gap: 2px; }
  .head { flex-wrap: wrap; }
  .row-head { grid-template-columns: 1fr; gap: 8px; }
  .side { text-align: left; }
  .detail { grid-template-columns: 1fr; padding: 16px; gap: 24px; }
  .edit { grid-template-columns: 1fr; }
  .piles { grid-template-columns: 1fr; gap: 32px; }
}

/* one moment of motion: the shift lights come on left to right when the page opens */
@media (prefers-reduced-motion: no-preference) {
  .cell.boot::before { animation: light 0.5s ease-out both; animation-delay: calc(var(--i) * 90ms + 150ms); }
  @keyframes light { from { opacity: 0.15; } }
}
.lately li.none { display: block; }
.add-form label { margin-bottom: 8px; }
.add-form .capture-row { flex-wrap: nowrap; margin-top: 0; }
.add-form input { flex: 1; min-width: 0; }

/* =====================================================================
   Colour. Every gear has its own colour, cool at the start, hot near the
   money, green once paid, so colour always tells you the stage.
   Themes change the room; the gear colours stay the same in all of them.
   ===================================================================== */
:root {
  --g1: #5aa9ff;   /* idea */
  --g2: #2fd6c3;   /* building */
  --g3: #ffd400;   /* built */
  --g4: #ff9a1f;   /* online */
  --g5: #ff5c6c;   /* shown */
  --g6: #3ddc84;   /* paid */
  --on-accent: #111;
}

/* Stark: hot-rod red, gold, arc blue */
:root, :root[data-theme="stark"] {
  --cabin: #140a0c; --binnacle: #23121a; --well: #0d0608; --seam: #46242c;
  --dial: #fff4e6; --dim: #c2a3a0; --vegas: #ffc531; --needle: #ff3b3b; --go: #53e0ff;
  --glow1: #a3142a; --glow2: #0f4a6b; --hero1: #b3172d; --hero2: #5a0d1c;
}
/* Vegas: the TT. Black, yellow, a line of orange */
:root[data-theme="vegas"] {
  --cabin: #121212; --binnacle: #1f1e1a; --well: #0a0a09; --seam: #3a3830;
  --dial: #f6f3e7; --dim: #a8a493; --vegas: #ffd400; --needle: #ff4a2e; --go: #4bd08a;
  --glow1: #6b5600; --glow2: #5c2400; --hero1: #ffd400; --hero2: #ff8a00; --hero-ink: #141200;
}
/* Midnight: deep navy, electric blue */
:root[data-theme="midnight"] {
  --cabin: #070d1c; --binnacle: #0f1930; --well: #040814; --seam: #24365c;
  --dial: #eaf2ff; --dim: #93a6c9; --vegas: #4cc9ff; --needle: #ff5c7a; --go: #4be3a8;
  --glow1: #123f9c; --glow2: #0a6a7a; --hero1: #1b5cff; --hero2: #0a2a8a;
}
/* Sunset: Malé at six in the evening */
:root[data-theme="sunset"] {
  --cabin: #1a0b1e; --binnacle: #2a1430; --well: #110615; --seam: #4d2a55;
  --dial: #fff0ea; --dim: #c9a3b8; --vegas: #ff8a3d; --needle: #ff4d6d; --go: #5fe0c0;
  --glow1: #a8324a; --glow2: #6a2a9a; --hero1: #ff6a3d; --hero2: #c2255c;
}
/* Lagoon: reef water */
:root[data-theme="lagoon"] {
  --cabin: #04161a; --binnacle: #0a252b; --well: #020e11; --seam: #1c4a52;
  --dial: #e8fffb; --dim: #8fbdb8; --vegas: #2ff0d0; --needle: #ff6b5c; --go: #b6f25a;
  --glow1: #0a7d8c; --glow2: #1f6a3a; --hero1: #0fb5a8; --hero2: #076a80;
}

body {
  background:
    radial-gradient(820px 480px at 12% -6%, color-mix(in srgb, var(--glow1) 62%, transparent), transparent 70%),
    radial-gradient(760px 520px at 100% 18%, color-mix(in srgb, var(--glow2) 50%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0) 0 0 / 22px 22px,
    var(--cabin);
  background-attachment: fixed;
}
.bar { background: color-mix(in srgb, var(--cabin) 86%, transparent); }
.mark i { background: linear-gradient(90deg, var(--vegas), var(--needle)); }
.tabs button[aria-current="true"], .btn, .tag-me, .fresh { color: var(--on-accent); }

/* Next up: the loud panel */
.next-up {
  position: relative; overflow: hidden; border: 0; color: var(--hero-ink, #fff);
  background: linear-gradient(125deg, var(--hero1), var(--hero2));
  box-shadow: 0 18px 50px -18px var(--hero1);
}
.next-up h2 { color: inherit; opacity: 0.8; }
.next-up .nu-block, .next-up .hint { color: inherit; opacity: 0.82; }
.next-up .btn { background: var(--hero-ink, #fff); border-color: var(--hero-ink, #fff); color: var(--hero2); }
:root[data-theme="vegas"] .next-up .btn { color: #ffd400; }
.next-up .btn.quiet { background: none; color: inherit; border-color: currentColor; }
.next-up .ghost {
  position: absolute; right: -0.06em; bottom: -0.3em; font-family: var(--inst); font-stretch: 125%; font-weight: 800;
  font-size: clamp(11rem, 30vw, 21rem); line-height: 1; color: var(--hero-ink, #fff); opacity: 0.13; pointer-events: none; user-select: none;
}
.next-up > :not(.ghost) { position: relative; }
.nu-gear { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.nu-gear::before, .stage-dot::before, .lately li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 10px var(--gc); }

/* how the work is spread across the gears */
.spread { display: flex; height: 12px; margin-top: 16px; border-radius: 999px; overflow: hidden; background: var(--well); gap: 3px; }
.spread span { background: var(--gc); min-width: 6px; border-radius: 999px; }

/* gear strip in colour */
.shift { background: color-mix(in srgb, var(--well) 82%, transparent); margin-top: 10px; }
.cell::before, .cell:not(.empty)::before, .cell.top::before, .cell.redline::before { height: 6px; background: color-mix(in srgb, var(--gc) 22%, transparent); box-shadow: none; }
.cell:not(.empty)::before { background: var(--gc); }
.cell.top::before { box-shadow: 0 0 22px var(--gc); }
.cell.top { background: linear-gradient(color-mix(in srgb, var(--gc) 20%, transparent), transparent 75%); }
.cell-head .g, .cell.top .g, .cell.redline .g { color: var(--gc); }
.cell.empty .g { opacity: 0.45; }
.cell li button.mine { color: var(--dial); font-weight: 600; }
.cell li button.mine::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--vegas); vertical-align: middle; }
.cell li button:hover { background: color-mix(in srgb, var(--gc) 18%, transparent); }

/* trip line */
.trip { border: 0; gap: 10px; }
.trip div, .trip div + div { padding: 16px; border: 1px solid var(--seam); border-radius: 14px; background: color-mix(in srgb, var(--binnacle) 80%, transparent); }
.trip dd { font-size: 1.25rem; color: var(--vegas); }
.trip div:nth-child(2) dd { color: var(--g4); }
.trip div:nth-child(3) dd { color: var(--g6); }
.trip div:nth-child(4) dd { color: var(--g1); }

/* lists */
.queue li button { padding: 14px 12px; border-radius: 10px; }
.queue li button:hover { background: color-mix(in srgb, var(--vegas) 10%, transparent); }
.q-name { display: flex; align-items: center; gap: 9px; }
.stage-dot { display: inline-flex; }
.lately li { grid-template-columns: 9px 50px 1fr; align-items: baseline; }
.lately li.none { display: block; }
.lately li.none::before { display: none; }
.group h2 { border-bottom-color: var(--gc); }
.group h2 .g { color: var(--gc); font-size: 1.375rem; }
.row-head .name { display: flex; align-items: center; gap: 10px; }
.pile-loose h2 { border-color: var(--g1); }
.pile-keep h2 { border-color: var(--g3); }
.pile-parked h2 { border-color: var(--seam); }
.capture { background: color-mix(in srgb, var(--binnacle) 85%, transparent); }
.detail, .next-up, .shift, .capture { backdrop-filter: none; }

/* theme picker */
.theme-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--dial); background: conic-gradient(var(--hero1), var(--vegas), var(--glow2), var(--hero1)); }
.themes { position: fixed; top: 62px; right: 16px; z-index: 8; display: grid; gap: 6px; padding: 10px; background: var(--binnacle); border: 1px solid var(--seam); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.themes button { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: none; border: 1px solid transparent; border-radius: 10px; font-weight: 600; min-height: 44px; text-align: left; }
.themes button[aria-pressed="true"] { border-color: var(--dial); }
.themes i { width: 28px; height: 28px; border-radius: 50%; }

@media (max-width: 820px) {
  .trip { grid-template-columns: 1fr 1fr; }
  .trip div:nth-child(n) { border: 1px solid var(--seam); padding: 14px; }
  .next-up .ghost { font-size: 13rem; }
  .tabs { background: color-mix(in srgb, var(--well) 94%, transparent); border-color: var(--seam); }
}
:root[data-theme="vegas"] .next-up .btn.quiet { color: inherit; }

/* quick gear changes */
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; }
.row > .detail { grid-column: 1 / -1; }
.row-head { grid-row: 1; grid-column: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 96px; }
.stepper { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 4px; border: 1px solid var(--seam); border-radius: 999px; background: color-mix(in srgb, var(--well) 80%, transparent); }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--gc) 22%, transparent); color: var(--dial); font-size: 1.5rem; line-height: 1; padding: 0 0 3px; }
.stepper button:hover:not(:disabled) { background: var(--gc); color: #111; }
.stepper button:disabled { opacity: 0.25; cursor: default; }
.stepper .at { display: flex; align-items: baseline; gap: 7px; min-width: 104px; justify-content: center; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.stepper .at b { font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 1.0625rem; color: var(--gc); }
.lbl { display: block; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.gearpick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gearpick button { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; min-height: 58px; border-radius: 10px; border: 1px solid var(--seam); background: var(--well); font-size: 0.75rem; font-weight: 600; color: var(--dim); line-height: 1.15; }
.gearpick button b { font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 1.125rem; color: var(--gc); }
.gearpick button:hover { border-color: var(--gc); }
.gearpick button[aria-pressed="true"] { background: var(--gc); border-color: var(--gc); color: #111; }
.gearpick button[aria-pressed="true"] b { color: #111; }
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; }
  .row-head { grid-row: auto; grid-column: 1; grid-template-columns: 1fr; padding-bottom: 6px; }
  .stepper { grid-row: auto; grid-column: 1; justify-self: start; margin: 0 0 14px; }
  .gearpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.row-head { order: 1; }
.stepper { order: 2; }
.row > .detail { order: 3; }

/* on hold */
.hold-btn { width: auto !important; height: 40px; padding: 0 14px !important; border-radius: 999px !important; font-size: 0.8125rem !important; font-weight: 600; background: none !important; border: 1px solid var(--seam) !important; color: var(--dim) !important; margin-left: 4px; }
.hold-btn:hover { border-color: var(--dial) !important; color: var(--dial) !important; }
.group.on-hold { --gc: var(--dim); margin-top: 48px; }
.group.on-hold h2 { border-bottom-style: dashed; }
.group.on-hold .row-head { opacity: 0.72; }
.group.on-hold .hold-btn { background: var(--vegas) !important; border-color: var(--vegas) !important; color: var(--on-accent) !important; }
.group-note { margin: 10px 0 0; font-size: 0.875rem; color: var(--dim); }
.queue.held .q-name { color: var(--dim); }

/* N: neutral, on hold */
:root { --gn: #d5d9e0; }
.shift { grid-template-columns: minmax(0, 0.9fr) repeat(6, minmax(0, 1fr)); }
.cell.neutral { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, 0.035) 9px 18px); }
.cell.neutral li button { color: var(--dim); }
.stepper .n-btn { font-family: var(--inst); font-stretch: 122%; font-weight: 750; font-size: 0.9375rem; padding: 0; background: none; border: 1px solid var(--seam); color: var(--dim); margin-right: 4px; }
.stepper .n-btn:hover:not(:disabled) { background: var(--gn); border-color: var(--gn); color: #111; }
.stepper.in-n { --gc: var(--gn); padding-left: 14px; }
.stepper.in-n .at { min-width: 0; margin-right: 6px; }
.stepper.in-n .hold-btn { margin-left: 0; }
.group.on-hold { --gc: var(--gn); }
.group.on-hold h2 .g { color: var(--gn); }
.gearpick { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gearpick button.was { border-style: dashed; border-color: var(--gc); }
@media (max-width: 820px) {
  .shift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell.neutral { grid-column: 1 / -1; }
  .cell + .cell { border-left: 0; }
  .cell:nth-child(even) { border-left: 0; }
  .cell:nth-child(odd):not(.neutral) { border-left: 1px solid var(--seam); }
  .cell:nth-child(n + 2) { border-top: 1px solid var(--seam); }
  .gearpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}