/* The arrival: the run's tokens on both rooms, the raise block, the floor during the run, and the
   furniture that waits for the end. The room's own tokens stay; these are the ones the run
   figures read through ink.js, named the way the report names them. */
:root{
  --page:var(--g-0);--card:var(--g-1);--held-d:#639B00;--ramp:#A5E800;
  --open:#3E5D14;--broke:#E05A4A;--broke-tint:#4A1F1A;--transcript:#D9A45B;
}
html[data-mode="light"]{
  --open:#CBEE8E;--broke:#C0392B;--broke-tint:#F7DAD4;--transcript:#96601A;
}

/* ── stage A to C: the raise block, in the floor before anything else mounts ── */
.raise{padding:6px 18px 16px;display:grid;gap:12px;max-width:760px}
.raise[hidden]{display:none}
.raise-say{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.rail{display:flex;gap:3px;list-style:none;margin:0;padding:0}
.rail-cell{flex:1;min-width:0;position:relative;display:grid;gap:4px}
.rail-box{position:relative;height:28px;border:1px solid var(--line-2);overflow:hidden;display:flex;align-items:center;padding:0 9px}
.rail-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--held);opacity:.28;transition:width .45s cubic-bezier(.22,.68,.32,1)}
.rail-cell[data-state="done"] .rail-fill{opacity:.45}
.rail-cell[data-state="running"] .rail-box{border-color:var(--held)}
.rail-cell[data-state="running"] .rail-fill{animation:breathe 1.4s ease-in-out infinite}
.rail-cell[data-state="failed"] .rail-box{border-color:var(--broke)}
.rail-name{position:relative;font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-cell[data-state="done"] .rail-name,.rail-cell[data-state="running"] .rail-name{color:var(--ink)}
.rail-time{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-height:1.4em;font-variant-numeric:tabular-nums}
.raise-line{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);min-height:1.5em;font-variant-numeric:tabular-nums}
.raise-line:empty{display:none}
.raise-act{margin:0}
.raise-act[hidden]{display:none}
.raise-btn{display:inline-flex;align-items:center;height:34px;padding:0 15px;border:1px solid #527E08;border-radius:8px;background:#6FAE00;color:#112006;
  font:600 12.5px var(--disp);cursor:pointer;box-shadow:0 2px 0 #4F760C}
.raise-btn:hover{background:#7CBA0D}

/* The ident during the run: one mono line and the run's clock. */
.runline{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.runline:empty{display:none}
.runclock{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.runclock:empty{display:none}

/* During a first run the header keeps only its name and the run's line: the toggle (in settings
   now), the picker, the scope and the wallet are for a second run. The strip and the drawer wait
   for stage I and fade in on it. */
.shell.firstrun .hright>*:not(.runline):not(.runclock){display:none}
.shell.firstrun .taps,.shell.firstrun .drawer{display:none}
.shell.firstrun.landed .taps.in{display:flex}
.shell.firstrun.landed .drawer.in{display:block}
.taps.in,.drawer.in{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* The chosen name is marked by colour alone. */
.taps .tap.on,.taps .tap.on:hover{box-shadow:none;background:rgba(118,185,0,.10);color:var(--ink);font-weight:600}
.taps a.tap{text-decoration:none}

/* ── stage D on: the floor ── */
.fr{display:grid;gap:18px;max-width:720px;padding:2px 0 24px}
.fr[hidden]{display:none}
.fr-head{margin:0;font-size:24px;font-weight:650;line-height:1.2;letter-spacing:-.012em;color:var(--ink);font-variant-numeric:tabular-nums}
.fr-head b{color:var(--ink);font-weight:650}
.fr-head b.ok{color:var(--held-d)}
html:not([data-mode="light"]) .fr-head b.ok{color:var(--held)}
.fr-head b.slab{width:1.6em;height:.72em;vertical-align:-.02em}
.fr-left{margin:-8px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fr-left[hidden]{display:none}
.fr-end{display:grid;gap:12px;justify-items:start;padding-top:6px}
.fr-end[hidden]{display:none}
.fr-go{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid #527E08;border-radius:8px;background:#6FAE00;color:#112006;
  font:600 13.5px var(--disp);text-decoration:none;box-shadow:0 2px 0 #4F760C;cursor:pointer}
.fr-go:hover{background:#7CBA0D}
.fr-also{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.fr-also a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.fr-also a:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rail-cell[data-state="running"] .rail-fill,.taps.in,.drawer.in{animation:none}}