/* Tokn — one sheet for both apps. Every class name the pages already use is kept, so the
   markup and the scripts are untouched by the look. Light and dark both come from the
   reader's own setting. */
:root {
  color-scheme: light dark;
  --bg: #f5f5f7;
  --paper: #ffffff;
  --paper-2: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.10);
  --line-2: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-ink: #ffffff;
  --soft: #eaf3fe;
  --good: #1d7a33;
  --good-soft: #e8f7ec;
  --warn: #9a5b00;
  --warn-soft: #fff4e0;
  --bad: #c9252d;
  --bad-soft: #fdecec;
  --fill: rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px -12px rgba(0,0,0,.12);
  --r: 18px;
  --head: rgba(250, 250, 252, 0.82);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --paper: #1c1c1e;
    --paper-2: #2c2c2e;
    --ink: #f5f5f7;
    --muted: #98989d;
    --line: rgba(255, 255, 255, 0.12);
    --line-2: rgba(255, 255, 255, 0.20);
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --soft: rgba(10, 132, 255, 0.16);
    --good: #30d158;
    --good-soft: rgba(48, 209, 88, 0.16);
    --warn: #ff9f0a;
    --warn-soft: rgba(255, 159, 10, 0.16);
    --bad: #ff453a;
    --bad-soft: rgba(255, 69, 58, 0.16);
    --fill: rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 2px rgba(0,0,0,.6), 0 8px 28px -12px rgba(0,0,0,.8);
    --head: rgba(22, 22, 24, 0.72);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.53 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- the bar, translucent and pinned, the way a system bar behaves --- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; height: 48px;
  background: var(--head);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  flex-wrap: nowrap;
}
.top .brand {
  font-weight: 600; font-size: 15px; letter-spacing: -0.015em;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.top .brand:hover { text-decoration: none; opacity: .75; }
.top nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a {
  color: var(--muted); padding: 6px 11px; border-radius: 980px; font-size: 14px;
  white-space: nowrap; transition: background-color .18s ease, color .18s ease;
}
.top nav a:hover { color: var(--ink); background: var(--fill); text-decoration: none; }
.top nav a.on { color: var(--ink); background: var(--fill); font-weight: 500; }

main { max-width: 900px; margin: 0 auto; padding: 44px 22px 96px; }

/* --- type: large, tight, quiet underneath --- */
h1 {
  font-size: clamp(32px, 6vw, 52px); line-height: 1.07; margin: 6px 0 14px;
  letter-spacing: -0.026em; font-weight: 600;
}
h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.021em; font-weight: 600; margin: 52px 0 14px; }
h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.014em; font-weight: 600; margin: 0 0 10px; }
p { margin: 10px 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.5; }
h1 + .muted, h1 + p.muted { font-size: 19px; line-height: 1.45; max-width: 62ch; }

/* --- cards: soft, round, shadowed rather than outlined --- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; margin: 18px 0; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); }

/* --- controls --- */
label { display: block; font-size: 13px; color: var(--muted); margin: 16px 0 6px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px;
  font: inherit; font-size: 16px; background: var(--paper-2); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
button {
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 11px 21px; border-radius: 980px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: background-color .18s ease, transform .1s ease, opacity .18s ease;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active { transform: scale(.97); }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
button.ghost { background: transparent; color: var(--accent); border-color: transparent; }
button.ghost:hover { background: var(--fill); border-color: transparent; }
button.small { padding: 7px 14px; font-size: 14px; }
button:disabled { opacity: .4; cursor: default; transform: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* --- messages --- */
.msg {
  padding: 12px 15px; border-radius: 13px; font-size: 14.5px; margin-top: 14px;
  white-space: pre-wrap; border: 1px solid transparent;
}
.msg.ok { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.msg.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.msg.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* --- tags --- */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 980px; font-size: 12px;
  font-weight: 600; background: var(--soft); color: var(--accent); letter-spacing: -0.005em;
}
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.grey { background: var(--fill); color: var(--muted); }

code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--fill); padding: 2px 7px; border-radius: 6px;
}
pre {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); padding: 16px; border-radius: 13px; overflow: auto;
}
pre code { background: none; padding: 0; }

/* --- the number, which is the whole point of the queue --- */
.big {
  font-size: clamp(64px, 16vw, 104px); font-weight: 600; letter-spacing: -0.04em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }

/* --- the board --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 20px; }
.tile {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 4px; text-align: center;
  background: var(--paper); box-shadow: var(--shadow); transition: transform .15s ease;
}
.tile b { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile small { font-size: 11px; color: var(--muted); }
.tile.called { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.tile.called small { color: var(--warn); }
.tile.in { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft); }
.tile.in small { color: var(--good); }
.tile.done, .tile.no-show { opacity: .38; }
.tile.mine { outline: 3px solid var(--accent); outline-offset: 2px; }

ol.try { padding-left: 22px; }
ol.try li { margin: 14px 0; }
.hidden { display: none !important; }
.ico { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- a hero, used where a page opens on a statement --- */
.hero { text-align: center; padding: 26px 0 8px; }
.hero h1 { margin-inline: auto; max-width: 18ch; }
.hero .muted { margin-inline: auto; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent); margin-bottom: 8px;
}

/* --- the demo bookshop keeps its warmer paper --- */
body.shopskin { --bg: #f7f4ee; }
@media (prefers-color-scheme: dark) { body.shopskin { --bg: #141210; } }

@media (max-width: 640px) {
  main { padding: 30px 18px 76px; }
  .card { padding: 20px; border-radius: 16px; }
  .top { padding: 0 14px; }
  .row button { flex: 1 1 auto; }
}