/* public/assets/app.css — Ekicho's one stylesheet. Tokens first (light, then dark), then the page frame, then parts
   (cards, tabs, tables, checklists), then the pages' own bits, then the landing page. No inline styles anywhere: the CSP
   refuses them.

   The look keeps Grand Central's elements, in Japanese rail colours: the top bar is a night sky of stars, numbers sit on
   split-flap departure-board tiles, labels are set like station signage (condensed display caps, mono), the mark is a
   stationmaster's seal (駅), tactile-paving yellow marks the active thing and vermilion what needs you. Day mode is the
   off-white of a platform sign; night mode is the sky itself. */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #f7f5ef; --surface: #ffffff; --sunk: #f1efe8; --text: #16191d; --muted: #5d6470; --line: #e2dfd6; --line-strong: #c9c5ba;
  --accent: #0b7a45; --accent-soft: #dcefe2; --accent-ink: #ffffff;
  --brass: #8a6a00; --brass-soft: #fbf1c7; --ceiling: #0e141b; --ceiling-ink: #f3f1ea; --signal: #c7362b; --yellow: #f2c300;
  --hot: #c7362b; --warn: #8a5a00; --warn-soft: #fbefc9; --ok: #2d6a3a; --ok-soft: #dfeedd; --danger: #b2271b;
  --s-open: #e1ecf7; --s-progress: #dcefe2; --s-blocked: #f8ddd8; --s-owner: #fcecb8; --s-other: #ece4f3; --s-done: #eceae3;
  --flap: #16191d; --flap-ink: #f3f1ea; --flap-seam: #000;
  --radius: 6px; --radius-s: 4px; --shadow: 0 1px 0 rgb(22 25 29 / 5%), 0 2px 6px rgb(22 25 29 / 4%);
  --topo: none;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --jp: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141b; --surface: #151d26; --sunk: #111820; --text: #ecebe5; --muted: #9aa3ae; --line: #243041; --line-strong: #33425a;
    --accent: #6fcf8e; --accent-soft: #16301f; --accent-ink: #0e141b;
    --brass: #f2c300; --brass-soft: #2b2610; --ceiling: #090d12; --ceiling-ink: #f3f1ea; --signal: #ff5a4e;
    --hot: #ff6b5a; --warn: #e6b64f; --warn-soft: #2d2510; --ok: #78c48b; --ok-soft: #14291b; --danger: #f2877b;
    --s-open: #17283a; --s-progress: #163021; --s-blocked: #3d1d1a; --s-owner: #3a3112; --s-other: #2a2340; --s-done: #1b232d;
    --flap: #05080b; --flap-ink: #f3f1ea; --flap-seam: #000;
    --shadow: 0 1px 0 rgb(0 0 0 / 35%);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg) var(--topo) 0 0 / 600px 420px; background-attachment: fixed; color: var(--text); font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; min-height: 100vh; }
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 80px; }
main.narrow { max-width: 560px; }
a { color: var(--accent); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 2px; } }
h1 { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 8px; }
h2 { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
h3 { font-family: var(--mono); font-size: 11.5px; margin: 22px 0 8px; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
p { margin: 0 0 12px; }
ul, ol { padding-left: 20px; }
.muted { color: var(--muted); }
.small, small { font-size: 13px; }
.fine { color: var(--muted); font-size: 13px; margin-top: 12px; }
.mono, code, pre { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--sunk); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
pre { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.copy { cursor: copy; }
@media (hover: hover) { .copy:hover { border-color: var(--accent); } }
.pre { white-space: pre-wrap; }
.warn { color: var(--warn); }
.bad, .danger { color: var(--danger); }
.accent { color: var(--accent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; color: var(--brass); margin: 0 0 10px; }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: currentColor; vertical-align: middle; margin: -2px 8px 0 0; }
.status:empty { display: none; }
.status { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 16px;
  border-radius: var(--radius-s); font: 600 12.5px var(--mono); letter-spacing: 0.04em; box-shadow: var(--shadow); margin: 0; max-width: calc(100% - 32px); z-index: 10; }

/* ---------- top bar: the concourse ceiling ---------- */
.topbar { background: var(--ceiling) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Ccircle cx='165' cy='19' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='37' cy='105' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='298' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='44' cy='55' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='123' cy='11' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='289' cy='15' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='295' cy='74' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='113' cy='5' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='214' cy='18' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='286' cy='104' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='297' cy='73' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='49' cy='70' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='316' cy='26' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='160' cy='59' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='153' cy='31' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='41' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='175' cy='93' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='311' cy='9' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='84' cy='96' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='250' cy='53' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='285' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='179' cy='76' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='35' cy='107' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='242' cy='89' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='158' cy='82' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='197' cy='113' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='236' cy='45' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='252' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Cpath d='M40 88 L78 62 L118 70 L150 40 L196 52' fill='none' stroke='%23dfe6ee' stroke-opacity='.28' stroke-width='.6'/%3E%3Ccircle cx='40' cy='88' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='78' cy='62' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='118' cy='70' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='40' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='196' cy='52' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 320px 120px; color: var(--ceiling-ink); border-bottom: 2px solid var(--yellow); position: sticky; top: 0; z-index: 5; }
.topbar .bar { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ceiling-ink); white-space: nowrap; font: 800 21px/1 var(--display);
  letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: hover) { .brand:hover { text-decoration: none; } }
/* the mark is the stationmaster's seal: 駅 (station) in a vermilion ring */
.mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ff5a4e; color: #ff5a4e;
  font: 800 15px/1 var(--jp); letter-spacing: 0; }
.links { display: flex; gap: 2px; flex: 1; }
.links a { color: color-mix(in srgb, var(--ceiling-ink) 72%, transparent); padding: 6px 10px; border-radius: var(--radius-s); font: 600 12px var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; }
@media (hover: hover) { .links a:hover { color: var(--ceiling-ink); background: rgb(255 255 255 / 6%); text-decoration: none; } }
.links a[aria-current="page"] { color: var(--yellow); box-shadow: inset 0 -2px var(--yellow); border-radius: 0; }
.me { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.who { color: color-mix(in srgb, var(--ceiling-ink) 70%, transparent); font-size: 13px; }
.topbar button { background: transparent; color: var(--ceiling-ink); border-color: rgb(239 228 201 / 35%); }
@media (hover: hover) { .topbar button:hover { background: rgb(255 255 255 / 8%); } }
.chip { display: inline-flex; gap: 8px; align-items: center; background: var(--yellow); color: #16191d; padding: 4px 10px; border-radius: var(--radius-s);
  font: 700 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.chip span { font-variant-numeric: tabular-nums; background: #16191d; color: var(--yellow); padding: 0 5px; border-radius: 2px; }
@media (hover: hover) { .chip:hover { text-decoration: none; filter: brightness(1.05); } }
.topbar.plain .bar { justify-content: center; }

/* ---------- loading: the rail across the top while a page loads or an action waits (app.js) ---------- */
.loading-rail { position: fixed; z-index: 50; top: env(safe-area-inset-top, 0); left: 0; height: 4px; width: 0; opacity: 0; pointer-events: none;
  background: #fff3b0; box-shadow: 0 0 12px 1px rgb(242 195 0 / 85%); }
/* under the top bar, over its yellow edge: a brighter rail runs along it */
.topbar > .loading-rail { position: absolute; top: auto; bottom: -3px; }
.is-loading .loading-rail { opacity: 1; animation: rail-go 10s cubic-bezier(.08, .7, .2, 1) forwards; }
@keyframes rail-go { 0% { width: 0; } 4% { width: 25%; } 20% { width: 55%; } 60% { width: 80%; } 100% { width: 94%; } }
/* a slow load dims the page a little, so a tap visibly took */
main { transition: opacity .25s; }
.is-loading main { opacity: .6; transition-delay: .35s; }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::after { content: ""; flex: none; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .is-loading .loading-rail { animation: none; width: 100%; }
  button[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* touch: a tap is a tap. Hover styles apply only where there is a pointer that hovers (@media (hover: hover) on each),
   and nothing restyles on :active, because iOS turns a first tap into a hover or press when it changes how the page
   looks, and only the second tap goes through. No tap highlight either: a tap shows as the page it opens or the
   loading rail. Taps do not wait to see whether they are a double-tap zoom. */
a, button, summary, label, [role="tab"], .stop-open { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }

/* ---------- page header ---------- */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin: 4px 0 20px; }
.pagehead .titles { flex: 1 1 420px; }
.pagehead .sub { color: var(--muted); margin: 0; max-width: 70ch; }
.pagehead .actions { display: flex; gap: 8px; }
.back { display: block; width: 100%; font: 600 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.pagehead .sub .pill { vertical-align: middle; }

/* ---------- controls ---------- */
button, .button { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.3; white-space: nowrap; }
@media (hover: hover) { button:hover, .button:hover { background: var(--sunk); text-decoration: none; } }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 -2px rgb(0 0 0 / 22%);
  font-weight: 600; }
@media (hover: hover) { button.primary:hover, .button.primary:hover { filter: brightness(1.06); background: var(--accent); } }
button.ghost { background: transparent; }
button.small, .button.small { padding: 5px 10px; font-size: 13px; }
button.wide { width: 100%; padding: 11px 14px; }
button.link { border: 0; background: none; color: var(--accent); padding: 0; font-size: inherit; }
@media (hover: hover) { button.link:hover { text-decoration: underline; background: none; } }
button.link.danger, button.danger { color: var(--danger); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 12px; }
label input, label select { margin-top: 6px; }
label.check, label.pick { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 6px 0; }
label.check input, label.pick input, label.check.top input { width: auto; margin: 3px 0 0; flex: none; }
form { margin: 0; }
form > * + * { margin-top: 10px; }
form > label + label { margin-top: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > input, .row > select { flex: 1 1 200px; width: auto; }
.row > button, .row > .button { flex: none; }
.row.end { justify-content: flex-end; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px 12px; margin: 0 0 12px; }
legend { font-weight: 600; font-size: 14px; padding: 0 6px; }

/* ---------- cards and layout ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cardhead h2::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--brass); margin-right: 9px; vertical-align: 1px; }
.card.emph { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.card.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.card.ok .cardhead h2::before { background: var(--ok); border-radius: 50%; }
.card.notice { background: var(--sunk); box-shadow: none; border-left: 3px solid var(--brass); }
details.card.notice > summary { cursor: pointer; }
details.card.notice[open] > summary { margin-bottom: 10px; }
.card.auth { padding: 28px; margin-top: 24px; }
.card.auth h1 { margin-bottom: 14px; font-size: 34px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards .card { margin: 0; }
.card.feature { border-top: 3px solid var(--brass); }
.card.feature h3 { color: var(--text); margin: 0 0 8px; font: 800 20px/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.card.feature p { color: var(--muted); font-size: 14px; }
.link-card { display: block; color: var(--text); transition: border-color 0.15s; }
@media (hover: hover) { .link-card:hover { border-color: var(--accent); text-decoration: none; } }
.link-card h3 { margin: 0 0 4px; color: var(--text); font: 800 24px/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.link-card p { margin: 0; }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); margin: 0 0 12px; }
.empty p { margin: 0 0 10px; }
.empty p:last-child { margin: 0; }

.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; background: var(--brass-soft);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent); border-left: 4px solid var(--signal); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; }
.banner[hidden], .who-fields[hidden] { display: none; }
.warn-banner { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* the hero is a piece of the ceiling: the invite, the group invite */
.hero { background: linear-gradient(100deg, var(--ceiling) 30%, color-mix(in srgb, var(--ceiling) 35%, transparent) 75%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Ccircle cx='165' cy='19' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='37' cy='105' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='298' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='44' cy='55' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='123' cy='11' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='289' cy='15' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='295' cy='74' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='113' cy='5' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='214' cy='18' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='286' cy='104' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='297' cy='73' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='49' cy='70' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='316' cy='26' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='160' cy='59' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='153' cy='31' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='41' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='175' cy='93' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='311' cy='9' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='84' cy='96' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='250' cy='53' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='285' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='179' cy='76' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='35' cy='107' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='242' cy='89' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='158' cy='82' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='197' cy='113' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='236' cy='45' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='252' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Cpath d='M40 88 L78 62 L118 70 L150 40 L196 52' fill='none' stroke='%23dfe6ee' stroke-opacity='.28' stroke-width='.6'/%3E%3Ccircle cx='40' cy='88' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='78' cy='62' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='118' cy='70' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='40' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='196' cy='52' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 320px 120px, var(--ceiling); color: var(--ceiling-ink); border-radius: var(--radius); border-bottom: 3px solid var(--yellow);
  padding: 34px 32px 26px; margin: 8px 0 18px; }
.hero h1 { font-size: 58px; line-height: 0.95; margin-bottom: 16px; max-width: 16ch; }
.hero h1 .accent { color: var(--yellow); }
.hero p { font-size: 17px; color: color-mix(in srgb, var(--ceiling-ink) 78%, transparent); max-width: 62ch; }
.hero .lead { color: var(--ceiling-ink); }
.hero .eyebrow { color: var(--yellow); }

/* ---------- tiles: the departure board ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 22px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tile .n { display: flex; gap: 3px; font: 700 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
/* each character is a flap: dark card, light digit, a seam across the middle */
.flap { display: inline-grid; place-items: center; min-width: 26px; height: 36px; padding: 0 4px; border-radius: 3px; color: var(--flap-ink);
  background: linear-gradient(var(--flap) 0 calc(50% - 0.5px), var(--flap-seam) calc(50% - 0.5px) calc(50% + 0.5px), var(--flap) calc(50% + 0.5px));
  box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 1px 0 rgb(0 0 0 / 25%); }
.tile .n .mono { font-size: 15px; align-self: center; }
.tile .k { color: var(--muted); font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.tile.hot { border-color: var(--signal); box-shadow: inset 0 3px var(--signal); }
.tile.hot .flap { color: #ffb08c; }
.tile.warn .flap { color: var(--yellow); }

/* ---------- tabs ---------- */
.tablist { display: flex; gap: 4px; box-shadow: inset 0 -1px var(--line); margin: 0 0 18px; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist [role="tab"] { flex: none; padding: 10px 12px 12px; color: var(--muted); font: 600 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
@media (hover: hover) { .tablist [role="tab"]:hover { color: var(--text); text-decoration: none; } }
.tabs.js .tablist [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -3px var(--brass); }
.tabs:not(.js) .panel { margin-bottom: 32px; }
.count { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 2px; background: var(--flap); color: var(--flap-ink); font: 700 11px/18px var(--mono);
  text-align: center; margin-left: 4px; }
.panel > h3:first-child { margin-top: 0; }

/* ---------- tables and lists ---------- */
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; background: var(--sunk); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { tbody tr:hover { background: color-mix(in srgb, var(--sunk) 50%, transparent); } }
td.when, .when { color: var(--muted); font: 12px var(--mono); white-space: nowrap; }
tr.p-high td:first-child, tr.p-urgent td:first-child { box-shadow: inset 3px 0 var(--signal); }
tr.a-retired, tr.m-suspended { opacity: 0.6; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-block; font: 500 11px/18px var(--mono); padding: 0 6px; border-radius: 3px; background: var(--sunk); color: var(--muted); border: 1px solid var(--line); }
.tag.accent { background: var(--brass-soft); color: var(--brass); border-color: color-mix(in srgb, var(--brass) 35%, transparent); }
.due { font-size: 12px; color: var(--warn); }
.pill { display: inline-block; font: 700 10.5px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px;
  background: var(--s-done); white-space: nowrap; }
.s-open { background: var(--s-open); } .s-in_progress { background: var(--s-progress); } .s-blocked { background: var(--s-blocked); }
.s-waiting_on_owner { background: var(--s-owner); } .s-waiting_on_other { background: var(--s-other); }
.s-done, .s-dropped { background: var(--s-done); color: var(--muted); }

ul.rows { list-style: none; padding: 0; margin: 0 0 12px; }
ul.rows > li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.rows > li:last-child { border-bottom: 0; }
ul.rows .main { flex: 1 1 260px; }
ul.rows .side { display: flex; gap: 12px; align-items: center; }
ul.rows details.perms { flex: 1 1 100%; }
ul.rows.plain > li { display: block; }

ol.log { list-style: none; padding: 0; margin: 0 0 12px; }
ol.log li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
ol.log li:last-child { border-bottom: 0; }

details > summary { cursor: pointer; }
details:not(.card):not(.perms):not(.mint-wrap):not(.more):not(.fold) { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; margin: 0 0 8px; background: var(--surface); }
details[open]:not(.card):not(.more):not(.fold) > summary { margin-bottom: 8px; }
.kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 4px; }
details.perms, details.mint-wrap { margin: 6px 0; font-size: 14px; }
details.perms summary, details.mint-wrap summary { color: var(--accent); }
details.perms form { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--sunk); }

dl.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- forms in lists ---------- */
form.rule { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; margin: 0 0 10px; }
form.rule.new { border-style: dashed; }
form.rule .row { justify-content: flex-start; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; margin: 6px 0 10px; }
.picks label.pick input { width: auto; }

/* ---------- agents ---------- */
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 0 0 16px; }
.agents .card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.agents .card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.agents .card h3 { margin: 0; color: var(--text); font: 800 21px/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.agents .card p { margin: 0 0 6px; }
.agents .card.retired { opacity: 0.6; }
ul.conns { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
ul.conns li { padding: 6px 0; border-top: 1px solid var(--line); }
.agents .card > button.link { align-self: flex-start; margin-top: auto; padding-top: 8px; }

/* needs attention: what the hub can tell is slipping, marked by kind */
.attention-card { border-left: 3px solid var(--signal); }
ul.attention > li { padding: 8px 0; }
ul.attention > li .main::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; background: var(--warn); }
ul.attention > li.att-overdue_jobs .main::before { background: var(--signal); }
ul.attention > li.att-unclaimed_gaps .main::before { background: var(--yellow); }
ul.attention > li.att-quiet_agents .main::before { background: var(--muted); border-radius: 50%; }

/* the knowledge hub: one entry per topic, searchable */
#knowledge-search { margin: 0 0 10px; }
.knowledge-list details.knowledge[hidden] { display: none; }
details.knowledge > summary .tag.mono { margin-right: 4px; }
form.know { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--sunk); }
form.know .row > label { flex: 1 1 160px; margin: 0; }
ul.attention > li.att-stale_knowledge .main::before { background: var(--accent); }

/* what an agent can do: tags; the ones it has only while online sit under a lamp that says whether it is */
.abilities { display: grid; gap: 6px; margin: 0 0 8px; }
.tag.ability { background: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.abilities .while { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-s); }
.abilities .while > .tags { flex-basis: 100%; }
.presence { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.presence::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.presence.on { color: var(--ok); } .presence.on::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.presence.off { color: var(--muted); }

/* ---------- copy boxes, steps, checklists ---------- */
/* copy blocks: a label, an obvious Copy button, the text, and where it goes */
.copyblock { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); margin: 0 0 14px; overflow: hidden; }
.copyblock[hidden] { display: none; }
.copyblock .cb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; background: var(--sunk);
  border-bottom: 1px solid var(--line); }
.copyblock .label { color: var(--brass); font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.copy-btn { padding: 5px 12px; font: 700 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); }
.copy-btn::before { content: "⧉ "; }
@media (hover: hover) { .copy-btn:hover { background: var(--accent); filter: brightness(1.08); } }
.copy-btn.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.copy-btn.done::before { content: ""; }
.copyblock pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 12px 14px; font-size: 13px; cursor: copy; max-height: 360px; overflow: auto; }
.copyblock.big pre { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.copyblock .hint { margin: 0; padding: 8px 14px 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.copyblock.top { margin-bottom: 20px; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
details .copyblock { margin-top: 10px; }

/* the connect quick start: two numbered steps above the details */
.quickstart { display: grid; gap: 14px; margin: 0 0 28px; }
.qs-step { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow); }
.qs-n { flex: none; display: grid; place-items: center; width: 40px; height: 48px; border-radius: 3px; color: var(--flap-ink); font: 700 24px var(--mono);
  background: linear-gradient(var(--flap) 0 calc(50% - 0.5px), #000 calc(50% - 0.5px) calc(50% + 0.5px), var(--flap) calc(50% + 0.5px)); }
.qs-body { flex: 1; min-width: 0; }
.qs-body h2 { font: 800 24px/1.1 var(--display); letter-spacing: 0.02em; margin: 2px 0 12px; }
.qs-body .copyblock { margin: 0; }
h2.more { margin: 0 0 10px; color: var(--muted); }

ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 12px; }
ol.steps > li { counter-increment: s; position: relative; padding: 0 0 12px 36px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flap); color: var(--flap-ink); font: 700 12px var(--mono); border-radius: 3px; }

/* one segment per step, like a row of flaps: brass when done, hatched when skipped */
.progress { display: flex; gap: 4px; margin: 0 0 10px; }
.progress span { flex: 1; height: 8px; border-radius: 2px; background: var(--line); }
.progress span.done { background: var(--brass); }
.progress span.skipped { background: repeating-linear-gradient(135deg, var(--line-strong) 0 3px, var(--line) 3px 6px); }
ol.checklist { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 10px; }
.check-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.check-item .dot { flex: none; width: 30px; height: 34px; border-radius: 3px; display: grid; place-items: center; font: 700 15px var(--mono);
  color: var(--flap-ink); background: linear-gradient(var(--flap) 0 calc(50% - 0.5px), #000 calc(50% - 0.5px) calc(50% + 0.5px), var(--flap) calc(50% + 0.5px)); }
.check-item .body { flex: 1; }
.check-item h3 { margin: 0 0 2px; color: var(--text); font: 650 15px var(--font); letter-spacing: 0; text-transform: none; }
.check-item p { margin: 0; color: var(--muted); font-size: 14px; }
.check-item .state { color: var(--ok); font: 700 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.check-item.done { background: transparent; box-shadow: none; }
.check-item.done .dot { background: var(--ok-soft); color: var(--ok); }
.check-item.done h3 { color: var(--muted); }
.check-item.optional:not(.done) .dot { opacity: 0.6; }

/* ---------- Bentos ----------
   A Bento card is a ticket: title and status, the dates set in mono, then what it needs. Its timeline is a rail line:
   one day per station sign, each stop a station on the line, coloured by kind (yellow travel, green stays, vermilion
   deadlines, grey documents and busy time). */
ul.bentos { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card ul.bentos { margin: 0; }
.bento-card { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brass);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
@media (hover: hover) { .bento-card:hover { text-decoration: none; border-color: var(--accent); border-left-color: var(--accent); } }
.bento-card.locked { border-left-color: var(--line-strong); }
.bc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bc-title { font: 800 24px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.bc-dates { font: 13px var(--mono); color: var(--muted); }
.bc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--muted); margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); }
.bc-meta .hot, .hot { color: var(--hot); font-weight: 600; }

.pagehead .sub .bento-when { font: 600 15px var(--mono); color: var(--text); margin-right: 6px; }
.pagehead .sub .bento-by { display: block; margin-top: 4px; }
p.goal { font-size: 17px; margin: -8px 0 18px; max-width: 62ch; }

ol.itinerary, ol.stops { list-style: none; padding: 0; margin: 0; }
ol.itinerary { margin-bottom: 12px; }
.day + .day { margin-top: 18px; }
h3.dayhead { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 4px 10px; border-radius: 3px; background: var(--flap); color: var(--flap-ink);
  font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dayhead .dow { color: var(--yellow); }
ol.stops { position: relative; margin-left: 4px; }
ol.stops::before { content: ""; position: absolute; left: 66px; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--line-strong); }
li.stop { --line-c: var(--muted); position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 34px; padding: 10px 0; }
li.stop::before { content: ""; position: absolute; left: 60px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 4px solid var(--line-c); box-sizing: border-box; }
li.stop.k-leg { --line-c: var(--yellow); }
li.stop.k-stay { --line-c: var(--accent); }
li.stop.k-deadline { --line-c: var(--signal); }
li.stop.k-plan { --line-c: #00a7db; }
li.stop.k-busy::before { border-style: dotted; }
li.stop .t { font: 700 13px/22px var(--mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
li.stop.k-stay .t, li.stop.k-deadline .t { font-weight: 500; font-size: 11px; line-height: 1.3; padding-top: 4px; white-space: normal; color: var(--muted); }
li.stop .sb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); min-width: 0; }
li.stop .sk { display: block; font: 700 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
li.stop .stt { font-weight: 650; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
li.stop .arrow { color: var(--muted); font-weight: 400; }
li.stop .sd { color: var(--muted); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
li.stop .sf { color: var(--muted); font-size: 12.5px; margin-top: 8px; overflow-wrap: anywhere; }
li.stop.k-busy .sb { background: repeating-linear-gradient(135deg, var(--sunk) 0 6px, var(--surface) 6px 12px); box-shadow: none; }
li.stop.k-busy .stt { color: var(--muted); }
li.stop.cancelled .stt, li.stop.cancelled .sd { text-decoration: line-through; color: var(--muted); }
li.stop.cancelled::before { border-color: var(--line-strong); }
li.stop .sb { position: relative; }
/* the whole card opens the stop; the notes toggle sits above that link */
li.stop .stop-open { position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; }
@media (hover: hover) { li.stop .stop-open:hover { box-shadow: inset 0 0 0 1px var(--accent); } }
li.stop .stop-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
li.stop details.more { position: relative; z-index: 2; margin: 4px 0 0; padding: 0; border: 0; background: none; font-size: 14px; color: var(--muted); }
li.stop details.more > summary { list-style: none; }
li.stop details.more > summary::-webkit-details-marker { display: none; }
li.stop details.more .open-all { color: var(--accent); font-weight: 600; white-space: nowrap; }
li.stop details.more[open] .preview, li.stop details.more[open] .open-all { display: none; }
li.stop details.more p.pre { margin: 0; color: var(--text); }
/* what is over folds away in line: earlier days into one row, a day's finished stops into one; now and next marked */
li.day.past-days > details, li.past-fold > details { margin: 0; padding: 0; border: 0; background: none; }
li.day.past-days > details > summary { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 600 12px var(--mono);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
li.day.past-days > details > summary .dayhead { margin: 0; background: var(--line-strong); color: var(--text); }
li.day.past-days > details > summary { list-style: none; }
li.day.past-days > details > summary::-webkit-details-marker { display: none; }
li.day.past-days > details > summary::after { content: "▸"; font-size: 13px; transition: transform .15s; }
li.day.past-days > details[open] > summary::after { transform: rotate(90deg); }
li.day.past-days > details[open] > summary { margin-bottom: 12px; }
li.day.past-days li.stop, li.past-fold li.stop { opacity: .62; }
li.past-fold { margin: 2px 0 4px 104px; }
li.past-fold > details > summary { color: var(--muted); font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
li.past-fold > details[open] > summary { margin-bottom: 4px; }
li.past-fold ol.stops { margin-left: -104px; }
li.past-fold ol.stops::before { display: none; }
.mark-now, .mark-next { margin-left: 6px; padding: 1px 6px; border-radius: 3px; font: 700 10px/1.6 var(--mono); letter-spacing: .1em; }
.mark-now { background: var(--signal); color: #fff; }
.mark-next { background: var(--yellow); color: #16191d; }
li.stop.is-now .sb { border-color: var(--signal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 25%, transparent); }
li.stop.is-next .sb { border-color: color-mix(in srgb, var(--yellow) 70%, var(--line)); }
@media (max-width: 560px) { li.past-fold { margin-left: 86px; } li.past-fold ol.stops { margin-left: -86px; } }
/* a deadline is a note on the line, not a stop of its own: slim, no card, naming what it belongs to */
li.stop.note { padding: 4px 0; }
li.stop.note::before { width: 12px; height: 12px; left: 62px; top: 8px; border-width: 3px; }
li.stop.note .sb { background: none; border: 0; box-shadow: none; padding: 2px 0; }
li.stop.note .stt { font-weight: 500; font-size: 14.5px; color: var(--text); }
li.stop.note .stt .flag { color: var(--signal); }
li.stop.note .stt .for { color: var(--muted); }
li.stop.note .t { line-height: 1.3; padding-top: 2px; }
@media (max-width: 560px) { li.stop.note::before { left: 50px; } }
/* the deadlines that belong to a stop, on its card */
ul.stop-notes { list-style: none; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-s); background: var(--warn-soft); font-size: 13.5px; }
ul.stop-notes li + li { margin-top: 4px; }
ul.stop-notes li span { color: var(--signal); }
ul.stop-notes li.gone { color: var(--muted); text-decoration: line-through; }
ul.stop-notes li.gone span { color: var(--muted); }
details.cancelled-stops { margin-top: 16px; background: transparent; border-style: dashed; }
details.cancelled-stops > summary { color: var(--muted); font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
details.cancelled-stops[open] li.stop { opacity: .7; }
.st { font: 700 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; background: var(--s-done); color: var(--muted); }
.st-booked, .st-confirmed { background: var(--ok-soft); color: var(--ok); }
.st-held { background: var(--warn-soft); color: var(--warn); }
.st-done { background: var(--s-done); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .split, .split.even, .cards.three { grid-template-columns: minmax(0, 1fr); }
  .topbar .bar { flex-wrap: wrap; gap: 8px 12px; }
  .links { order: 3; flex: 1 1 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; margin: 0 -6px; }
  .links a { flex: none; }
  .links::-webkit-scrollbar { display: none; }
  .me { margin-left: auto; }
  .who { display: none; }
}
@media (max-width: 560px) {
  main { padding-top: 16px; }
  h1 { font-size: 32px; }
  .hero { padding: 26px 20px 20px; }
  .hero h1 { font-size: 42px; }
  .brand { font-size: 18px; }
  .card { padding: 16px; }
  .card.auth { padding: 20px; }
  ol.log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .check-item { flex-wrap: wrap; }
  .check-item .button { width: 100%; }
  .agents { grid-template-columns: minmax(0, 1fr); }
  .qs-step { padding: 14px; gap: 12px; }
  .qs-n { width: 32px; height: 40px; font-size: 19px; }
}
ul.rows .actions-col { flex-direction: column; align-items: flex-end; gap: 4px; }
ul.rows > li.m-suspended .main { opacity: 0.6; }
@media (max-width: 560px) { ul.rows .actions-col { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }
.check-item .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.check-item .acts .link.muted { color: var(--muted); }
@media (max-width: 560px) { .check-item .acts { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; } }

/* ---------- the landing page (/ when signed out) ----------
   Always the night sky on top, whatever the theme: stars that twinkle, Tokyo Station's zodiac dome turning slowly,
   light streaks of passing trains in line colours. Then plain sections on the page's own colours. Every animation stops
   for reduced motion. */
@keyframes l-tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes l-spin { to { transform: rotate(360deg); } }
@keyframes l-glide { to { transform: translateX(calc(100vw + 1000px)); } }
@keyframes l-pulse { 0% { box-shadow: 0 0 0 0 rgb(199 54 43 / 55%); } 70% { box-shadow: 0 0 0 12px rgb(199 54 43 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(199 54 43 / 0%); } }
@keyframes l-stamp { 0% { transform: scale(1.7) rotate(-18deg); opacity: 0; } 55% { transform: scale(.93) rotate(-7deg); opacity: 1; } 100% { transform: scale(1) rotate(-9deg); opacity: 1; } }

.jp { font-family: var(--jp); }
.l-top { position: relative; overflow: hidden; background: #0e141b; color: #f3f1ea; border-bottom: 3px solid var(--yellow); }
.l-sky { position: absolute; inset: 0; pointer-events: none; }
.l-sky .stars { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Ccircle cx='56' cy='254' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='50' cy='228' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='331' cy='28' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='182' cy='229' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='112' cy='241' r='1.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='379' cy='9' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='394' cy='114' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='305' cy='158' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='232' cy='104' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='400' cy='278' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='78' cy='298' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='312' cy='269' r='1.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='213' cy='273' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='119' cy='292' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='247' cy='10' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='174' cy='52' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='36' cy='199' r='0.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='219' cy='118' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='197' cy='93' r='1.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='272' cy='51' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='324' cy='162' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='170' cy='103' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='193' cy='81' r='1.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='161' cy='257' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='218' cy='168' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='202' cy='109' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='395' cy='124' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='145' cy='162' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='192' cy='8' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='231' cy='54' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='14' cy='283' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='365' cy='136' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='113' cy='239' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='122' cy='50' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='276' cy='194' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='295' cy='149' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='131' cy='103' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='46' cy='270' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='406' cy='129' r='0.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='8' cy='44' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='296' cy='203' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='410' cy='189' r='1.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='94' cy='195' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='277' cy='128' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='407' cy='263' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='361' cy='93' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3C/svg%3E") 0 0 / 420px 300px; animation: l-tw 6s ease-in-out infinite; }
.l-sky .stars.b { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='380'%3E%3Ccircle cx='535' cy='360' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='48' cy='317' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='339' cy='231' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='560' cy='243' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='305' cy='169' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='488' cy='138' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='237' cy='336' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='132' cy='9' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='77' cy='194' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='557' cy='169' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='442' cy='134' r='1.3' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='535' cy='152' r='1.3' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='274' cy='351' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='371' cy='173' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='318' cy='350' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='369' cy='357' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='433' cy='182' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='175' cy='79' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='523' cy='237' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='407' cy='345' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='33' cy='248' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='382' cy='348' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='478' cy='93' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='237' cy='272' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='203' cy='65' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='65' cy='26' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='209' cy='49' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='293' cy='1' r='1.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='445' cy='94' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='193' cy='234' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='189' cy='12' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='505' cy='287' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='265' cy='86' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='14' cy='300' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='273' cy='125' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='147' cy='369' r='0.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='376' cy='96' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='96' cy='172' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='557' cy='88' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='140' cy='225' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3C/svg%3E") 0 0 / 560px 380px; animation-duration: 7.5s; animation-delay: -3s; }
.l-dome { position: absolute; left: 50%; top: 40px; width: 900px; height: 900px; margin-left: -450px; color: var(--yellow); opacity: .22;
  animation: l-spin 360s linear infinite; }
.l-dome text { font: 800 38px var(--jp); }
.streaks span { position: absolute; left: -1000px; height: 1px; opacity: .85; animation: l-glide 10s linear infinite; }
.streaks span:nth-child(odd) { height: 2px; }
.streaks span:nth-child(1) { bottom: 14px; width: 320px; background: linear-gradient(90deg, transparent, #7dc243); animation-duration: 9s; animation-delay: -2s; }
.streaks span:nth-child(2) { bottom: 30px; width: 180px; background: linear-gradient(90deg, transparent, #f15a22); animation-duration: 12s; animation-delay: -7s; }
.streaks span:nth-child(3) { bottom: 52px; width: 420px; background: linear-gradient(90deg, transparent, #00a7db); animation-duration: 7s; animation-delay: -4s; }
.streaks span:nth-child(4) { bottom: 8px; width: 260px; background: linear-gradient(90deg, transparent, #f2c300); animation-duration: 14s; animation-delay: -11s; }
.streaks span:nth-child(5) { bottom: 70px; width: 200px; background: linear-gradient(90deg, transparent, #e85298); animation-duration: 10s; animation-delay: -1s; }
.streaks span:nth-child(6) { bottom: 40px; width: 360px; background: linear-gradient(90deg, transparent, #7dc243); animation-duration: 13s; animation-delay: -9s; }
.streaks span:nth-child(7) { bottom: 22px; width: 150px; background: linear-gradient(90deg, transparent, #dfe6ee); animation-duration: 8s; animation-delay: -5s; }
.streaks span:nth-child(8) { bottom: 62px; width: 280px; background: linear-gradient(90deg, transparent, #f15a22); animation-duration: 11s; animation-delay: -3s; }
.streaks span:nth-child(9) { bottom: 4px; width: 220px; background: linear-gradient(90deg, transparent, #00a7db); animation-duration: 9.5s; animation-delay: -8s; }
.streaks span:nth-child(10) { bottom: 84px; width: 300px; background: linear-gradient(90deg, transparent, #f2c300); animation-duration: 12.5s; animation-delay: -6s; }
.l-bar { position: relative; max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.l-links { display: flex; gap: 2px; margin-left: auto; }
.l-links a { color: #c3c9d1; padding: 12px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
@media (hover: hover) { .l-links a:hover { color: #f3f1ea; text-decoration: none; } }
.l-top .button { text-decoration: none; }
.l-signin, .l-top .button.primary { background: var(--yellow); border-color: var(--yellow); color: #16191d; font-weight: 700; }
.l-top .button.ghost { background: transparent; color: #f3f1ea; border-color: rgb(243 241 234 / 35%); }
@media (hover: hover) { .l-top .button.ghost:hover { background: rgb(255 255 255 / 8%); } }
.button.big { padding: 14px 24px; font-size: 16px; font-weight: 700; }
.l-hero { position: relative; max-width: 1000px; margin: 0 auto; padding: 80px 20px 96px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 24px; }
.l-hero h1 { font: 900 clamp(52px, 8vw, 104px)/.9 var(--display); text-transform: uppercase; margin: 0; max-width: 900px; }
.gold { color: var(--yellow); }
.l-hero p { font-size: 18px; color: #c3c9d1; max-width: 560px; margin: 0; }
.l-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.l-clocks { display: flex; gap: 48px; justify-content: center; margin-top: 16px; }
.l-clock { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.l-clock .face { position: relative; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff 0 62%, #c7cdd4 63% 70%, #5d6470 71%);
  box-shadow: 0 0 0 1px rgb(243 241 234 / 30%), 0 0 40px rgb(255 255 255 / 10%); }
.l-clock .tick { position: absolute; background: #16191d; }
.l-clock .tick.n, .l-clock .tick.s { left: 59px; width: 2px; height: 8px; }
.l-clock .tick.n { top: 18px; } .l-clock .tick.s { bottom: 18px; }
.l-clock .tick.e, .l-clock .tick.w { top: 59px; width: 8px; height: 2px; }
.l-clock .tick.e { right: 18px; } .l-clock .tick.w { left: 18px; }
.l-clock .hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: #16191d; border-radius: 2px; }
.l-clock .hand.h { width: 4px; height: 28px; margin-left: -2px; }
.l-clock .hand.m { width: 2.5px; height: 38px; margin-left: -1.25px; }
.l-clock .hand.sec { width: 1.2px; height: 42px; margin-left: -.6px; background: #c7362b; }
.l-clock .pin { position: absolute; left: 56px; top: 56px; width: 8px; height: 8px; border-radius: 50%; background: #5d6470; }
.l-clock .city { font: 700 12px var(--mono); letter-spacing: .16em; color: var(--yellow); text-transform: uppercase; }
.l-clock .jp { font-size: 15px; color: #c3c9d1; }

.landing h2 { font: 900 clamp(40px, 6vw, 60px)/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 32px; color: var(--text); }
.landing h3 { letter-spacing: .01em; }
.l-section { max-width: 1100px; margin: 0 auto; padding: 88px 20px; }
.l-inner { max-width: 1100px; margin: 0 auto; padding: 48px 20px 52px; }
.l-eyebrow { font: 700 12.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.l-eyebrow.red { color: var(--signal); }
.l-what { text-align: center; }
.l-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; text-align: left; }
.l-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 28px 30px;
  display: flex; flex-direction: column; gap: 14px; }
.l-card.red { border-top-color: var(--signal); }
.l-card h3 { font: 800 34px/1 var(--display); text-transform: uppercase; color: var(--text); margin: 0; }
.l-card p { margin: 0; line-height: 1.7; color: var(--muted); }
.l-card strong { color: var(--text); }
.l-num { display: inline-flex; gap: 3px; }
.l-num .flap { min-width: 28px; height: 42px; font: 700 22px var(--mono); }
.flap.gold { color: var(--yellow); }

.l-board { background: #16191d; color: #f3f1ea; }
.landing .l-board h2 { color: #f3f1ea; font-size: 34px; margin: 0; }
.l-board h2 .jp { font-size: 22px; color: var(--yellow); margin-right: 8px; }
.l-boardhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.l-note { font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa3ae; }
.l-scroll { overflow-x: auto; }
.l-flaps { min-width: 900px; display: flex; flex-direction: column; gap: 6px; }
.l-cols { display: grid; grid-template-columns: 150px 475px 75px 1fr; font: 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa3ae;
  padding-bottom: 4px; }
.l-row { display: flex; gap: 3px; }
.l-row .flap { --flap: #262b31; min-width: 22px; width: 22px; height: 34px; padding: 0; font: 700 18px var(--mono); color: #f3f1ea; }
.l-row .flap.st { color: var(--yellow); }
.l-row .flap.hot { color: #ff8a6a; }

.l-steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px; }
.l-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 4px; background: #7dc243; }
.l-steps li { position: relative; }
.l-steps h3 { font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--text); margin: 16px 0 8px; }
.l-steps h3 .jp { font-size: 26px; margin-right: 6px; }
.l-steps p { color: var(--muted); line-height: 1.7; margin: 0; }

.l-demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.l-demohead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.landing .l-demohead h2 { margin: 0; font-size: 40px; }
.l-demo ul { list-style: none; margin: 0; padding: 0; }
.l-demo li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 28px; border-bottom: 1px solid var(--line); min-height: 76px; }
.l-demo .what { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.l-demo .what span { color: var(--muted); font-size: 14px; }
.l-demo li.done .what { opacity: .55; }
.l-demo li.done .pulse { visibility: hidden; }
.l-demo .fine { padding: 0 28px 18px; }
.pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); animation: l-pulse 2.4s ease-out infinite; }
.l-stamp { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--signal); color: var(--signal);
  font: 800 17px/1 var(--jp); writing-mode: vertical-rl; margin-right: 14px; transform: rotate(-9deg); animation: l-stamp .45s cubic-bezier(.2, .8, .3, 1.2) both; }
.l-stamp[hidden] { display: none; }

.l-rules { background: var(--sunk); }
.l-rules .l-inner { padding: 88px 20px; }
.l-lead { color: var(--muted); max-width: 620px; margin: -18px 0 32px; line-height: 1.7; }
.l-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.l-rule { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-s); padding: 20px 22px; }
.l-rule h3 { font: 800 24px/1 var(--display); text-transform: uppercase; color: var(--text); margin: 0 0 8px; }
.l-rule p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; }

.l-end { border-top: 3px solid var(--yellow); border-bottom: 0; }
.l-ask { position: relative; max-width: 720px; margin: 0 auto; padding: 96px 20px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.landing .l-ask h2 { color: #f3f1ea; margin: 0; }
.l-ask p { color: #c3c9d1; margin: 0; line-height: 1.65; font-size: 17px; }
.l-ticket { width: 170px; height: 170px; border: 4px solid var(--yellow); border-radius: 24px; color: var(--yellow); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; transform: rotate(-4deg); outline: 1.5px solid var(--yellow); outline-offset: -12px; }
.l-ticket .k { font: 700 10px var(--mono); letter-spacing: .2em; }
.l-ticket .jp { font: 800 42px/1 var(--jp); }
.l-ticket .w { font: 900 22px var(--display); letter-spacing: .08em; }
#ask { width: 100%; text-align: left; }
#ask[hidden] { display: none; }
.l-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.l-ask label { color: #f3f1ea; margin: 0; }
.l-ask input { background: #151d26; color: #f3f1ea; border-color: #33425a; }
.l-ask input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgb(242 195 0 / 25%); }
#ask button { width: 100%; background: var(--yellow); border-color: var(--yellow); color: #16191d; }
.l-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.l-ask .l-thanks { font: 800 28px/1.1 var(--display); text-transform: uppercase; color: var(--yellow); }
.l-thanks[hidden] { display: none; }
.l-have a { color: var(--yellow); }
.l-foot { position: relative; border-top: 1px solid rgb(243 241 234 / 15%); text-align: center; padding: 18px; margin: 0; font: 12px var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: #9aa3ae; }

@media (max-width: 720px) {
  .l-links, .l-clocks { display: none; }
  .l-signin { margin-left: auto; }
  .l-dome { opacity: .1; }
  .l-hero { padding: 40px 20px 64px; }
  .l-section { padding: 64px 20px; }
  .l-demo li, .l-demohead { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-sky .stars, .l-dome, .streaks span, .pulse, .l-stamp { animation: none; }
  .streaks { display: none; }
}

/* ---------- phones: lists of items read as cards, controls big enough for a thumb ---------- */
@media (max-width: 560px) {
  /* an item table becomes one block per item: title first, then status, owner and time on one line */
  table.items thead { display: none; }
  table.items, table.items tbody { display: block; }
  table.items tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.items tbody tr:last-child { border-bottom: 0; }
  table.items td { display: block; padding: 0; border: 0; }
  table.items td:first-child { grid-column: 1 / -1; font-size: 15px; }
  table.items td.when { grid-column: 1 / -1; }
  tr.p-high td:first-child, tr.p-urgent td:first-child { box-shadow: none; }
  tr.p-high, tr.p-urgent { box-shadow: inset 3px 0 var(--signal); }
  /* iOS zooms into any field set under 16px */
  input, select, textarea { font-size: 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  .tile { padding: 10px; gap: 6px; }
  .flap { min-width: 22px; height: 30px; }
  .tile .n { font-size: 21px; }
  ol.stops::before { left: 54px; }
  li.stop { grid-template-columns: 42px minmax(0, 1fr); gap: 30px; }
  li.stop::before { left: 48px; }
  li.stop .t { font-size: 12px; }
  li.stop.k-stay .t, li.stop.k-deadline .t { font-size: 10px; }
  .bc-title { font-size: 22px; }
}

/* ---------- the home screen app ----------
   Added to an iPhone's home screen (Share, Add to Home Screen) Ekicho opens full screen below a black status bar that
   iOS keeps for itself; the top bar keeps a safe-area pad in case a device puts the page under it anyway. The nav
   moves to a tab bar at the bottom, above the home indicator, with icons. Connect stays reachable from Agents. */
.links .ico { display: none; }
.topbar .bar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
}
@media (display-mode: standalone) and (max-width: 860px) {
  .topbar .bar { flex-wrap: nowrap; }
  .links { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; margin: 0; order: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 0; overflow: visible; padding: 6px max(6px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--ceiling) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 2px solid var(--yellow); }
  .links a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; font-size: 9.5px; letter-spacing: .06em; border-radius: var(--radius-s); }
  .links a[aria-current="page"] { box-shadow: none; border-radius: var(--radius-s); background: rgb(242 195 0 / 10%); }
  .links .ico { display: block; }
  .links .nav-connect { display: none; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .status { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- the tap log (Account, Tap log; app.js): every touch and click, over the top of the page, never in the way */
.tap-log { position: fixed; z-index: 100; top: env(safe-area-inset-top, 0); left: 0; right: 0; margin: 0; padding: 6px 8px; pointer-events: none;
  background: rgb(0 0 0 / 78%); color: #b8f5a0; font: 10px/1.35 var(--mono); white-space: pre; overflow: hidden; max-height: 45vh; }

/* an item: Hand off, folded until wanted (pick an agent, then Open, This time or From now on) */
details.handoff > summary { cursor: pointer; list-style: none; }
details.handoff > summary::-webkit-details-marker { display: none; }
details.handoff > summary::after { content: "Show"; color: var(--accent); font-size: 13px; }
details.handoff[open] > summary::after { content: "Hide"; }
details.handoff:not([open]) > summary { margin-bottom: -10px; border-bottom: 0; }
.handoff-body { display: grid; gap: 10px; }
.handoff-body select { width: 100%; }
.handoff-body a[hidden], .handoff-body label.future[hidden], .handoff-body p[hidden] { display: none; }   /* .button's inline-flex and the label's flex would beat [hidden] */
.handoff-body [data-act="chat"] { width: 100%; white-space: normal; }
.handoff-body p.holder { margin: 0; color: var(--muted); }
.handoff-body [data-act="hand"] { width: 100%; white-space: normal; }
.handoff-body label.future { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.handoff-body label.future input { margin-top: 3px; }
.handoff-body .open-link { justify-self: start; }

/* admin, Stats: the invite funnel (one series: the accent, no legend) and the weeks */
ol.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ol.funnel li { display: grid; grid-template-columns: minmax(120px, 13em) minmax(0, 1fr) 3ch 4ch; align-items: center; gap: 10px; font-size: 14px; }
ol.funnel .f-track { height: 12px; background: var(--sunk); border-radius: 4px; overflow: hidden; }
ol.funnel .f-bar { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 0 4px 4px 0; }
ol.funnel .f-n { text-align: right; font: 600 14px var(--mono); }
ol.funnel .f-pct { text-align: right; }
@media (max-width: 560px) {
  ol.funnel li { grid-template-columns: minmax(0, 1fr) 3ch 4ch; }
  ol.funnel .f-track { grid-column: 1 / -1; grid-row: 2; }
}
table.weeks .num, table.weeks th.num { text-align: right; font-family: var(--mono); }
@media (max-width: 560px) { table.weeks th, table.weeks td { padding: 8px 6px; } table.weeks th { letter-spacing: 0.04em; } }