/* BidDesk Quant: tokens, shell and doors. Warm black; gold only for the member and live money; GO green, KILL red. */
:root {
  --bg: #0c0b09; --bg-2: #12100d; --surface: #16130f; --surface-2: #1d1a15; --raise: #24201a;
  --ink: #f1e9d8; --ink-2: rgba(241, 233, 216, .70); --ink-3: rgba(241, 233, 216, .56); --ink-4: rgba(241, 233, 216, .30); /* ink-3 >= 5:1 on every surface; ink-4 is for dots and rules, never text */
  --line: rgba(241, 233, 216, .09); --line-2: rgba(241, 233, 216, .16);
  --gold: #d9a441; --gold-soft: rgba(217, 164, 65, .14);
  --go: #3fb27f; --go-ink: #07140e; --go-soft: rgba(63, 178, 127, .13);
  --kill: #e5534b; --kill-soft: rgba(229, 83, 75, .12);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-1: 6px; --r-2: 10px; --r-3: 16px;
  --fast: 120ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 18px 60px rgba(0, 0, 0, .45), 0 1px 0 rgba(241, 233, 216, .04) inset;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
html { scroll-padding-top: 72px; }   /* a scrolled-to item clears the sticky top bar */
body { font: 400 15px/1.55 var(--sans); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .tnum { font-variant-numeric: tabular-nums; }
/* A later font: shorthand resets the numerals; the doubled class keeps figures tabular wherever .num is set. */
.num.num, .tnum.tnum { font-variant-numeric: tabular-nums lining-nums; }
#app td, #app .tp-c { font-variant-numeric: tabular-nums lining-nums; }   /* every table lane: figures line up */

/* Type: the serif carries statements, the sans carries information. */
.display { font: 300 44px/1.08 var(--serif); letter-spacing: -.025em; margin: 0; }
.display i { font-style: italic; font-weight: 300; }
.eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.lede { color: var(--ink-2); font-size: 16px; max-width: 46ch; margin: 14px 0 0; }
.faint { color: var(--ink-3); font-size: 13px; }

/* Buttons. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-2); cursor: pointer; font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.go { background: var(--go); border-color: var(--go); color: var(--go-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; }
.btn.kill { background: transparent; border-color: rgba(229, 83, 75, .5); color: var(--kill); }
.btn.ghost { background: transparent; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn kbd { font: 600 11px var(--sans); opacity: .85; }
.link { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; }
.tag { display: inline-block; font: 500 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px;
  border: 1px solid var(--line-2); color: var(--ink-3); vertical-align: 2px; white-space: nowrap; }
.tag.ai { color: var(--ink-2); }

/* Shell: a rail on the left at desk width; a tab bar at phone width. */
.q-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.q-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 18px 20px; border-right: 1px solid var(--line); background: var(--bg-2); }
.q-mark { font: 400 21px/1 var(--serif); letter-spacing: -.02em; text-decoration: none; padding: 0 10px 28px; }
.q-mark i { font-style: italic; font-weight: 300; }
.q-nav { display: flex; flex-direction: column; gap: 2px; }
.q-nav a, .q-nav span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: var(--r-1);
  text-decoration: none; color: var(--ink-2); font-size: 14px; transition: opacity var(--fast) var(--ease); }
.q-nav a:hover { color: var(--ink); background: var(--surface); }
.q-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--ink-2); }
.q-nav span { color: var(--ink-3); cursor: default; }
.q-nav small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.q-rail-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.q-member { color: var(--gold); font-weight: 500; font-size: 14px; }
.q-paper { font-size: 12px; color: var(--ink-3); }
.q-main { min-width: 0; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 40px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; background: rgba(12, 11, 9, .86); backdrop-filter: blur(12px); }
.q-room { font: 500 15px/1.3 var(--sans); margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-strip { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 13px; flex: none; white-space: nowrap; }   /* one line at every width */
.q-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); display: inline-block; margin-right: 6px; vertical-align: 1px; }
.q-strip .dot.on { background: var(--go); }
.q-body { padding: 40px 40px 72px; max-width: 1360px; min-height: calc(100dvh - 40px); }   /* the footer never enters the first screen while a room loads */
.q-foot { padding: 0 40px 40px; color: var(--ink-3); font-size: 12px; max-width: 1360px; }
.q-tabs { display: none; }

/* Doors: entrance, invitation, error. */
.q-door { min-height: 100vh; display: grid; place-items: center; padding: 48px 16px; }
.q-door-in { width: min(960px, 100%); display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.q-door-in.one { grid-template-columns: 1fr; max-width: 620px; }
.q-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; max-width: 52ch; }
.signin { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; }
.field > label, .lbl { font-size: 12.5px; color: var(--ink-3); }
.input, select.input, textarea.input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 10px 12px; outline: none; }
.input:focus { border-color: var(--ink-3); }
.err { color: var(--kill); font-size: 13px; min-height: 1em; margin: 0; }
.q-boot { min-height: 100vh; display: grid; place-items: center; }
.q-word { font: 300 28px var(--serif); color: var(--ink-3); }
.q-noscript { padding: 40px 16px; color: var(--ink-2); }
/* Its own width (never squeezed by left: 50%), at most the screen less the gutters; above the phone's tab bar. */
.q-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; z-index: 50;
  width: max-content; max-width: calc(100vw - 32px); text-align: center; text-wrap: balance;
  background: var(--raise); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 22px; font-size: 14px; line-height: 1.4; box-shadow: var(--shadow);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.q-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* An error reads in the ink colour (4.5:1 and more on --raise), marked by a red dot and edge. */
.q-toast[data-kind="bad"] { border-color: rgba(229, 83, 75, .55); }
.q-toast[data-kind="bad"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--kill); margin-right: 8px; vertical-align: 1px; }

@media (max-width: 1100px) { .q-body, .q-top, .q-foot { padding-left: 24px; padding-right: 24px; } .display { font-size: 38px; } .q-strip .hide-md { display: none; } }
@media (max-width: 760px) {
  .q-shell { grid-template-columns: 1fr; }
  .q-rail { display: none; }
  .q-top { padding: 12px 16px; } .q-strip .hide-sm { display: none; }
  .q-body { padding: 24px 16px 104px; } .q-foot { padding: 0 16px 96px; }
  .display { font-size: 32px; }
  .q-door-in { grid-template-columns: 1fr; gap: 32px; }
  .q-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: rgba(18, 16, 13, .96); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(12px); }
  .q-toast { bottom: calc(52px + 12px + env(safe-area-inset-bottom)); }
  html { scroll-padding: 56px 0 calc(64px + env(safe-area-inset-bottom)); }   /* a focused or scrolled-to item clears both bars */
  .q-tabs a { text-align: center; padding: 10px 4px; font-size: 13px; color: var(--ink-3); text-decoration: none; border-radius: var(--r-1); }
  .q-tabs a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
  /* Four rooms and More: the rest open from a sheet above the bar; More is lit while one of them is open. */
  .q-more { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 10px 4px; font-size: 13px; color: var(--ink-3); background: none; border: 0; border-radius: var(--r-1); cursor: pointer; }
  .q-more span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-more::after { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg) translateY(-1px); }
  .q-more[data-on], .q-more[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
  .q-sheet { position: fixed; right: 8px; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 21; min-width: 200px; display: grid; padding: 6px;
    background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--shadow); }
  .q-sheet[hidden] { display: none; }
  .q-sheet-h { margin: 6px 10px 4px; font: 500 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .q-sheet a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-1); text-decoration: none; font-size: 15px; color: var(--ink-2); }
  .q-sheet a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
}
@media (min-width: 761px) { .q-sheet { display: none; } }
.q-tabs small { display: block; margin-top: 1px; font-size: 9px; line-height: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* a phone's small links keep their inline look but take a 24px-tall target */
@media (max-width: 760px) { .bd-rules a, .nb-firings a, .rp-back, .rp-src a, .st-alt .link, button.link { display: inline-flex; align-items: center; min-height: 24px; }
  #room summary { padding-block: 2px; } }
@media (max-width: 420px) { .q-tabs a, .q-more { font-size: 12.5px; padding: 10px 2px; } }
.q-tabs a:has(small) { padding-top: 5px; padding-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Can't test it yet (bench gap 10): never a silent drop. A question in the serif, the reasons in the sans, one GO. */
.cant { border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface); padding: 24px 26px; margin: 0 0 20px; box-shadow: var(--shadow); max-width: 760px; }
.cant-q { font: 300 28px/1.18 var(--serif); letter-spacing: -.02em; margin: 0; color: var(--ink); text-wrap: balance; }
.cant-q b { font-weight: 300; font-style: italic; }
.cant-why { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.cant-why b { color: var(--ink-2); font-weight: 500; }
.cant-note { margin: 12px 0 0; max-width: 62ch; }
.cant-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.cant-wo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--bg-2); font-size: 14px; line-height: 1.45; color: var(--ink); }
.tag.warn { color: var(--ink); border-color: var(--ink-3); }
@media (max-width: 640px) { .cant { padding: 18px 16px; } .cant-q { font-size: 23px; } .cant-act .btn { flex: 1 1 auto; } }
/* Quant for all (12 Oct 2026): the way back to the desk, on the rail and (at phone width) in the top bar. */
.q-desk { font-size: 13px; color: var(--ink-2); text-decoration: none; padding: 2px 0 8px; }
.q-desk:hover { color: var(--ink); }
.q-deskm { display: none; }
@media (max-width: 760px) { .q-deskm { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px 0 0; margin-right: -6px; color: var(--ink-2); text-decoration: none; font-size: 14px; flex: none; } .q-deskm span { font-size: 13px; } }
@media (max-width: 760px) { .q-deskm + .q-room { margin-right: auto; } }

/* Quant for all (12 Oct 2026): a light palette, the desk's warm paper (public/styles.css), chosen as the desk's is: the
   member's own choice on the desk (biddesk.theme, read by index.html before the first paint), else the system's. */
:root[data-theme="light"] {
  --bg: #f7f5f1; --bg-2: #f1ede6; --surface: #ffffff; --surface-2: #f7f3ed; --raise: #ece5da;
  --ink: #191512; --ink-2: rgba(25, 21, 18, .76); --ink-3: rgba(25, 21, 18, .62); --ink-4: rgba(25, 21, 18, .28);
  --line: rgba(25, 21, 18, .10); --line-2: rgba(25, 21, 18, .18);
  --gold: #8a5d18; --gold-soft: rgba(150, 102, 28, .12);
  --go: #0d7a46; --go-ink: #ffffff; --go-soft: rgba(13, 122, 70, .10);
  --kill: #b32a1f; --kill-soft: rgba(179, 42, 31, .08);
  --shadow: 0 1px 2px rgba(25, 21, 18, .05), 0 12px 32px rgba(25, 21, 18, .08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --bg: #f7f5f1; --bg-2: #f1ede6; --surface: #ffffff; --surface-2: #f7f3ed; --raise: #ece5da;
  --ink: #191512; --ink-2: rgba(25, 21, 18, .76); --ink-3: rgba(25, 21, 18, .62); --ink-4: rgba(25, 21, 18, .28);
  --line: rgba(25, 21, 18, .10); --line-2: rgba(25, 21, 18, .18);
  --gold: #8a5d18; --gold-soft: rgba(150, 102, 28, .12);
  --go: #0d7a46; --go-ink: #ffffff; --go-soft: rgba(13, 122, 70, .10);
  --kill: #b32a1f; --kill-soft: rgba(179, 42, 31, .08);
  --shadow: 0 1px 2px rgba(25, 21, 18, .05), 0 12px 32px rgba(25, 21, 18, .08);
  }
}
:root[data-theme="light"] .cr { background: rgba(25, 21, 18, .07); }
:root[data-theme="light"] .nb-cfill { fill: rgba(25, 21, 18, .05); }
:root[data-theme="light"] .tp-tag { background: rgba(25, 21, 18, .06); }
:root[data-theme="light"] .tp-barw { background: rgba(25, 21, 18, .07); }
:root[data-theme="light"] .bd-row:hover, :root[data-theme="light"] .rp-row:hover { background: rgba(25, 21, 18, .025); }
:root[data-theme="light"] .q-tabs { background: rgba(247, 245, 241, .96) !important; }
:root[data-theme="light"] .q-tabs a[aria-current="page"] { background: var(--raise); }
:root[data-theme="light"] .pt-seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(25, 21, 18, .08); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cr { background: rgba(25, 21, 18, .07); }
  :root:not([data-theme="dark"]) .nb-cfill { fill: rgba(25, 21, 18, .05); }
  :root:not([data-theme="dark"]) .tp-tag { background: rgba(25, 21, 18, .06); }
  :root:not([data-theme="dark"]) .tp-barw { background: rgba(25, 21, 18, .07); }
  :root:not([data-theme="dark"]) .bd-row:hover, :root:not([data-theme="dark"]) .rp-row:hover { background: rgba(25, 21, 18, .025); }
  :root:not([data-theme="dark"]) .q-tabs { background: rgba(247, 245, 241, .96) !important; }
  :root:not([data-theme="dark"]) .q-tabs a[aria-current="page"] { background: var(--raise); }
  :root:not([data-theme="dark"]) .pt-seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(25, 21, 18, .08); }
}
:root[data-theme="light"] .nb-gfade::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nb-gfade::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94)); } }
:root[data-theme="light"] .q-top, :root[data-theme="light"] .nb-jump { background: rgba(247, 245, 241, .9); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .q-top, :root:not([data-theme="dark"]) .nb-jump { background: rgba(247, 245, 241, .9); } }