/* Escapement — the workshop.
   Palette comes from the materials, not a UI kit: walnut ground, aged brass,
   oxidized steel, bone dial white, and the green of an old baize bench cover.
   One committed look; the shop is lit from the window side and stays that way. */

:root {
  --ground:    #16140f;
  --ground-2:  #1d1a14;
  --panel:     #221e17;
  --panel-2:   #2a251c;
  --line:      #3a3226;
  --line-hi:   #4d4331;

  --baize:     #3a5245;
  --baize-2:   #2b3d33;
  --brass:     #b8924e;
  --brass-hi:  #e0bd7c;
  --brass-dim: #6f5931;
  --steel:     #838a90;
  --steel-dim: #565d62;
  --walnut:    #6b4a2f;
  --bone:      #efe7d5;
  --bone-2:    #c2b9a5;
  --bone-3:    #8d8677;
  --rust:      #bb6039;
  --verdigris: #6aa993;

  --font-ui: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  --r: 3px;
  --gap: clamp(6px, 0.7vw, 12px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/*
 * The hidden attribute is only a UA rule (display:none) and ANY author
 * `display:` beats it. `.boot` and `.app` both set `display: grid`, so
 * `el.hidden = true` did nothing and the boot splash sat at z-index 90 on top
 * of a fully working game. Every check said hidden=true; nothing was.
 * Never remove this.
 */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.02vw, 17.5px);
  color: var(--bone);
  background:
    radial-gradient(120% 80% at 18% 0%, #262117 0%, transparent 62%),
    linear-gradient(180deg, #191610 0%, var(--ground) 40%, #12100c 100%);
  overflow: hidden;                 /* the floor never moves */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── boot splash ─────────────────────────────────────────────────────── */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center; gap: .4rem;
  text-align: center; z-index: 90; background: var(--ground);
}
.boot-mark { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--brass-hi); letter-spacing: .02em; }
.boot-note { color: var(--bone-3); letter-spacing: .16em; text-transform: uppercase; font-size: .94rem; max-width: 28rem; }
.boot-retry {
  margin-top: 1.2rem; justify-self: center; background: #221d16; color: var(--bone);
  border: 1px solid var(--brass-dim); border-radius: 3px; padding: .4rem 1.1rem;
  letter-spacing: .14em; text-transform: uppercase; font-size: .88rem;
}
.boot-retry:hover { border-color: var(--brass); color: var(--brass-hi); }

/* ── shell ───────────────────────────────────────────────────────────── */
.app {
  height: 100dvh;
  display: grid;
  /* Without an explicit column the implicit one is `auto`, which sizes to
     max-content -- the atelier bar's nowrap flex row then stretched the whole
     app past the viewport and body{overflow:hidden} quietly ate the speed
     controls and the Intake button. Never let a track size itself here. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--safe-t)) calc(var(--safe-r)) calc(var(--safe-b)) calc(var(--safe-l));
}

/* ── atelier bar ─────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 28px);
  padding: .5rem clamp(10px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #241f17, #1b1812);
  box-shadow: 0 1px 0 #0d0b08, 0 6px 18px -12px #000;
}
.bar-name { display: flex; flex-direction: column; line-height: 1.12; flex: 0 0 auto; }
.bar-mark { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.9rem); color: var(--brass-hi); letter-spacing: .015em; }
.bar-sub  { font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); margin-top: 2px; }

.bar-stats { display: flex; gap: clamp(8px, 1.5vw, 26px); flex: 1 1 0; min-width: 0; overflow: hidden; }
.stat { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.stat b { font-size: clamp(1.06rem, 1.35vw, 1.42rem); font-weight: 600; color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat span { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bone-3); white-space: nowrap; }
.stat.warn b { color: var(--rust); }
/* Under water is not an emergency: brass, not alarm-red. */
.stat.quiet b { color: var(--brass); }
.stat.good b { color: var(--verdigris); }

.bar-right { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.speed { display: flex; border: 1px solid var(--line-hi); border-radius: var(--r); overflow: hidden; }
.speed button {
  background: transparent; border: 0; padding: .3rem .55rem; color: var(--bone-3);
  font-size: .95rem; letter-spacing: .04em; min-width: 2.3rem;
}
.speed button:hover { background: #2e2820; color: var(--bone); }
.speed button.on { background: var(--brass-dim); color: #17140e; font-weight: 600; }

.intake-btn {
  background: var(--baize); border: 1px solid #4b6a58; border-radius: var(--r);
  padding: .35rem .8rem; letter-spacing: .12em; text-transform: uppercase; font-size: .90rem;
  display: flex; align-items: center; gap: .45rem; color: var(--bone);
}
.intake-btn:hover { background: #46614f; }
.intake-btn .pip {
  background: var(--brass); color: #17140e; border-radius: 999px; min-width: 1.25rem;
  text-align: center; font-weight: 700; padding: 0 .3rem; font-size: .92rem;
}
.intake-btn.empty .pip { background: var(--steel-dim); color: #d9d3c6; }

/* New game. Icon only: the bar is the tightest row in the app and this is the
   one control nobody needs to find in a hurry. Must stay above the media
   queries below, or the phone-width override never lands. */
.newgame-btn {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r);
  background: transparent; border: 1px solid var(--line-hi); color: var(--bone-3);
  font-size: 1.08rem; line-height: 1; display: grid; place-items: center;
}
.newgame-btn:hover { border-color: var(--brass-dim); color: var(--brass-hi); }
.newgame-btn.busy { opacity: .5; cursor: default; }

/* ── the floor ───────────────────────────────────────────────────────── */
.floor {
  min-height: 0;
  position: relative;               /* the drawer anchors to the floor */
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(210px, 0.8fr);
  grid-template-rows: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap) clamp(10px, 1.4vw, 20px);
}
.benchfield { grid-column: 1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.side       { grid-column: 2; grid-row: 1 / span 2; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: var(--gap); }
.underfield { grid-column: 1; grid-row: 2; min-height: 0; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1.15fr); gap: var(--gap); }

.window-band {
  height: 16px; flex: 0 0 auto; border-radius: 2px; position: relative;
  background: linear-gradient(180deg, #4a5a63 0%, #2c3840 65%, #1e262b 100%);
  box-shadow: 0 8px 26px -6px rgba(150,180,200,.22);
  display: grid; place-items: center;
}
.window-band span {
  font-size: .71rem; letter-spacing: .3em; text-transform: uppercase;
  color: #9fb3bf; opacity: .85;
}

.benches {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap); align-content: stretch;
}

/* ── a bench ─────────────────────────────────────────────────────────── */
.bench {
  position: relative; min-height: 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(58,82,69,.30), rgba(43,61,51,.16)),
    repeating-linear-gradient(92deg, #2a231a 0 7px, #271f17 7px 14px);
  display: flex; flex-direction: column; overflow: hidden;
  text-align: left; padding: 0; color: inherit; font: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.bench:hover { border-color: var(--brass-dim); }
.bench.sel { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass-dim) inset, 0 0 26px -8px var(--brass); }
.bench.empty { background: repeating-linear-gradient(92deg, #221c15 0 7px, #1f1913 7px 14px); }
.bench.locked { opacity: .3; background: #17140f; border-style: dashed; cursor: default; }
.bench.span-r { border-left-style: dashed; }
.bench.span-l { border-right-style: dashed; }

.bench-top { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-bottom: 1px solid rgba(0,0,0,.35); }
.bench-no { font-size: .72rem; letter-spacing: .16em; color: var(--bone-3); flex: 0 0 auto; }
.bench-mods { display: flex; gap: 3px; margin-left: auto; }
.mod {
  width: 15px; height: 15px; border-radius: 2px; display: grid; place-items: center;
  font-size: .70rem; font-weight: 700; line-height: 1;
}
.mod.daylight { background: #3f5a68; color: #cfe6f2; }
.mod.bandsaw_adjacent { background: #5d3b2c; color: #f0c4ac; }
.mod.library_adjacent { background: #4a4630; color: #e6dcae; }
.mod.corner { background: #3b3a44; color: #cfccdd; }

.bench-body { flex: 1 1 auto; min-height: 0; padding: 4px 6px 5px; display: flex; flex-direction: column; gap: 3px; }
.bench-piece { font-family: var(--font-display); font-size: clamp(.9rem, 1.12vw, 1.15rem); line-height: 1.08; color: var(--bone); }
.bench-arch { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.bench-meta { font-size: .78rem; color: var(--bone-3); display: flex; gap: .5rem; flex-wrap: wrap; }
.bench-meta .late { color: var(--rust); font-weight: 600; }
.bench-meta .soon { color: var(--brass-hi); }

.mini { display: flex; gap: 2px; margin-top: auto; flex-wrap: wrap; }
.mini i {
  width: 6px; height: 6px; border-radius: 1px; background: #3b332a; display: block;
}
.mini i.done { background: var(--brass); }
.mini i.active { background: var(--bone); box-shadow: 0 0 5px var(--bone); }
.mini i.wait { background: var(--rust); }

.bench-hands { display: flex; gap: 3px; margin-top: 3px; }
.bench-hands .who {
  font-size: .74rem; background: #171410; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 .35rem; color: var(--bone-2); white-space: nowrap;
}

.bench-empty-note {
  margin: auto; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: #4e4739;
}
/* #4e4739 is dark brown, which vanished against a lit plate -- the empty
   benches read as blank green tiles with no label at all. */
.bench.arted .bench-empty-note { color: var(--bone-3); text-shadow: 0 1px 3px #000; }
.bench.locked .bench-empty-note { color: #4e4739; text-shadow: none; }

/* ── the art layer ───────────────────────────────────────────────────────
   Prerendered assets composite beneath the labels and bars. Every rule here is
   inert until art exists; the CSS placeholders above carry the game until then. */
.art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.art img { position: absolute; display: block; }
.art-plate { inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* The baize renders far more saturated than "faded green baize" reads on the
     page: eight tiles of it turned the floor into a wall of green with the
     clocks lost on top. Knocking the saturation and value back puts the plate
     where it belongs, behind the piece. Done here rather than in the asset so
     the source art stays neutral and this stays tunable. */
  filter: saturate(.58) brightness(.76) contrast(.96); }
/* A plate with no clock on it has nothing to look at, so it should read as
   noticeably emptier than a bench that is working. */
.bench.empty .art-plate { filter: saturate(.32) brightness(.5) contrast(.95); }
/* Edges, so a tile is a bench and not a rectangle of wallpaper. */
.bench.arted .art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 42%, transparent 38%, rgba(9,7,4,.62) 100%);
}
.art-piece { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.art-pend { width: 22%; transform-origin: 50% 2%; animation: escSwing 2.4s ease-in-out infinite; }
/* With real art behind them the labels need their own legibility. */
.bench.arted .bench-top { background: linear-gradient(180deg, rgba(12,10,7,.82), rgba(12,10,7,.35)); }
.bench.arted .bench-body { background: linear-gradient(0deg, rgba(12,10,7,.86) 55%, transparent); }
.bench.arted { background-image: none; }

.shelf-art { position: relative; inset: auto; aspect-ratio: 1; }
.shelf-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shelf-hand { position: absolute; }
.tool.arted { position: relative; padding-left: 34px; min-height: 34px; }
.art-tool { position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; object-fit: contain; }
.part.arted .art-part { width: 18px; height: 18px; object-fit: contain; margin-right: 3px; flex: 0 0 auto; }
.face.arted { padding: 0; overflow: hidden; }
.face-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-frame {
  width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line); background: #14110c;
}
.drawer-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.panel.arted { position: relative; isolation: isolate; }
/* At .3 an in-focus room plate competed with the panel's own text -- "Nothing
   finished yet." was unreadable over the shelf clock. Blurred and dropped, it
   still gives the panel a place to be without being a picture. */
.art-room {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .17; z-index: -1; border-radius: var(--r);
  filter: saturate(.5) blur(1.5px);
}

/* the pendulum — the one motion the floor needs */
.pend { position: absolute; right: 7px; bottom: 5px; width: 12px; height: 34px; pointer-events: none; opacity: .8; }
.pend i {
  position: absolute; top: 0; left: 50%; width: 1px; height: 26px; background: var(--steel-dim);
  transform-origin: top center; animation: escSwing 2.4s ease-in-out infinite;
}
.pend i::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass-dim));
}
@keyframes escSwing { 0%,100% { transform: rotate(11deg); } 50% { transform: rotate(-11deg); } }

/* ── side panels ─────────────────────────────────────────────────────── */
.panel {
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: .4rem .5rem .5rem; min-height: 0; display: flex; flex-direction: column;
}
.panel > h2 {
  font-size: .77rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3);
  padding-bottom: .3rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .4rem; flex: 0 0 auto;
}
.panel > h2 .cap { margin-left: auto; color: var(--brass); letter-spacing: .06em; }

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
.tool {
  border: 1px solid var(--line); border-radius: 2px; padding: 3px 5px; background: #1c1811;
  font-size: .76rem; line-height: 1.15; color: var(--bone-2);
}
.tool b { display: block; font-weight: 600; color: var(--bone); font-size: .80rem; overflow-wrap: anywhere; }
.tool.busy { border-color: var(--brass-dim); background: #241d12; }
.tool.busy b { color: var(--brass-hi); }
.tool .st { color: var(--bone-3); }
.tool.busy .st { color: var(--brass); }
.tool.none { opacity: .42; border-style: dashed; }

.drying { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.slot {
  aspect-ratio: 1; border: 1px dashed var(--line-hi); border-radius: 2px;
  display: grid; place-items: center; font-size: .72rem; color: #4e4739; text-align: center;
  padding: 2px; line-height: 1.05;
}
.slot.full { border-style: solid; border-color: var(--baize); background: rgba(58,82,69,.22); color: var(--bone-2); }
.cooling { margin-top: .35rem; font-size: .78rem; color: var(--rust); min-height: 1em; }
.cooling:empty { display: none; }

.lots { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.lot {
  border: 1px solid var(--line); border-radius: 2px; padding: 4px 6px; background: #1c1811;
  display: flex; align-items: center; gap: .4rem; font-size: .82rem;
}
.lot .l { flex: 1 1 auto; min-width: 0; }
.lot .l b { display: block; color: var(--bone); font-weight: 600; }
.lot .l span { color: var(--bone-3); font-size: .76rem; }
.lot button {
  background: var(--brass-dim); border: 0; border-radius: 2px; padding: .18rem .5rem;
  color: #17140e; font-weight: 600; font-size: .82rem; white-space: nowrap;
}
.lot button:disabled { background: #332d22; color: #6b6455; cursor: not-allowed; }

/* ── parts / shelf / journal ─────────────────────────────────────────── */
.parts { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.part { display: flex; align-items: baseline; gap: .4rem; font-size: .80rem; color: var(--bone-2); }
.part .n { margin-left: auto; font-weight: 700; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.part.out { color: #5c5546; }
.part.out .n { color: #5c5546; }

.clocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 5px; overflow-y: auto; min-height: 0; align-content: start; }
.clockcard { text-align: center; }
.dial {
  position: relative; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fbf6ea, var(--bone) 58%, #cdc3ac 100%);
  border: 2px solid var(--brass-dim); box-shadow: 0 2px 8px -3px #000;
}
.dial::after {
  content: ''; position: absolute; inset: 44%; border-radius: 50%; background: #2b2216;
}
.dial .h, .dial .m {
  position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%;
  background: #2b2216; border-radius: 1px;
}
.dial .h { width: 2.5px; height: 26%; margin-left: -1.25px; }
.dial .m { width: 1.5px; height: 37%; margin-left: -.75px; }
.dial .tick { position: absolute; left: 50%; top: 3px; width: 1px; height: 4px; background: #7a6d52; transform-origin: 50% calc(50% - 3px + 50%); }
.clockcard .g { font-size: .72rem; color: var(--brass); margin-top: 2px; font-variant-numeric: tabular-nums; }
.clockcard .nm { font-size: .70rem; color: var(--bone-3); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-empty { margin: auto; font-size: .80rem; color: #4e4739; letter-spacing: .1em; }

.log { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
.ledger {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
  border-bottom: 1px solid var(--line); padding-bottom: .35rem; margin-bottom: .35rem;
  flex: 0 0 auto;
}
.lcell { line-height: 1.05; min-width: 0; }
.lcell b { display: block; font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lcell span { font-size: .70rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); }
.lcell.in b { color: var(--verdigris); }
.lcell.out b { color: var(--bone-2); }

.entry { font-size: .82rem; line-height: 1.28; color: var(--bone-2); display: flex; gap: .45rem; }
.entry time { flex: 0 0 auto; color: #5c5546; font-variant-numeric: tabular-nums; font-size: .76rem; padding-top: 1px; }
.entry.kind-finished  { color: var(--verdigris); }
.entry.kind-botch,
.entry.kind-deadline  { color: var(--rust); }
.entry.kind-lost      { color: var(--rust); font-weight: 600; }
.entry.kind-technique,
.entry.kind-history,
.entry.kind-retire    { color: var(--brass-hi); }

/* ── roster strip ────────────────────────────────────────────────────── */
.roster {
  display: flex; gap: 6px; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  padding: .45rem clamp(10px, 1.4vw, 20px) calc(.45rem + var(--safe-b));
  border-top: 1px solid var(--line); background: linear-gradient(0deg, #1e1a13, #17140f);
  scrollbar-width: thin;
}
.chip {
  flex: 0 0 auto; min-width: 170px; max-width: 228px;
  /* `1fr` floors at min-content, so the nowrap technique line pushed the track
     past max-width and ran to the card edge instead of ellipsizing. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .45rem; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); background: #221d16;
  padding: .3rem .45rem; cursor: grab; text-align: left; color: inherit; font: inherit;
  transition: border-color .12s, transform .1s, box-shadow .12s;
}
.chip:hover { border-color: var(--brass-dim); }
.chip.armed { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass-dim) inset, 0 0 22px -8px var(--brass); transform: translateY(-2px); }
.chip.dragging { opacity: .45; }
.chip.idle { border-color: var(--verdigris); }
.chip .face {
  grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 2px;
  background: linear-gradient(150deg, var(--walnut), #3a2a1c);
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.06rem; color: var(--brass-hi); border: 1px solid #4a3524;
}
.chip .nm { font-size: .92rem; font-weight: 600; color: var(--bone); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .job { font-size: .74rem; color: var(--bone-3); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .job.free { color: var(--verdigris); }
.chip .bars { display: flex; gap: 3px; margin-top: 2px; }
.bar2 { flex: 1 1 0; height: 3px; border-radius: 2px; background: #332c22; overflow: hidden; }
.bar2 i { display: block; height: 100%; }
.bar2.fat i { background: var(--rust); }
.bar2.will i { background: var(--steel); }
.chip .tech { grid-column: 2; font-size: .71rem; color: var(--brass); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── right drawer ────────────────────────────────────────────────────── */
/* A soft fall-off toward the drawer so it reads as something laid on top of the
   floor. Deliberately not a blocking scrim: arming a hand from the roster and
   watching the benches both have to keep working while a piece is open. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: radial-gradient(125% 100% at 100% 50%,
    rgba(6,5,3,.66) 0%, rgba(6,5,3,.34) 42%, rgba(6,5,3,.06) 68%, transparent 82%);
  animation: escFade .16s ease-out;
}
@keyframes escFade { from { opacity: 0; } to { opacity: 1; } }

/* Was `top:0; right:0; bottom:0` -- a full-height rail that covered the atelier
   bar, the journal and the roster, and, because the body sizes to its content,
   left most of its height empty. A card that ends where its content ends says
   "this is a panel about one piece" instead of "the layout broke". */
.drawer {
  /* Absolute inside .floor, not fixed to the viewport: the bar's height is set
     by clamped type and cannot be named in CSS, so anchoring to the viewport
     meant guessing at it -- and guessing wrong put the drawer over the speed
     controls and the Intake button. The floor already ends where the bar does. */
  position: absolute; z-index: 60;
  top: var(--gap);
  right: var(--gap);
  bottom: auto;
  max-height: calc(100% - var(--gap) * 2);
  width: min(590px, calc(100% - var(--gap) * 2));
  background: linear-gradient(180deg, #241f18, #191510);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  box-shadow: 0 28px 70px -26px #000, 0 0 0 1px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  padding: .7rem .85rem .8rem;
  animation: escSlide .16s ease-out;
}
@keyframes escSlide { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-close {
  position: absolute; top: .5rem; right: .6rem; z-index: 2;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  width: 30px; height: 30px; color: var(--bone-3); line-height: 1;
}
.drawer-close:hover { color: var(--bone); border-color: var(--brass-dim); }
.drawer-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; padding-right: 2px; }

.dh { padding-right: 2rem; }
.dh h3 { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.05; color: var(--bone); }
.dh .sub { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-top: .15rem; }
.dh .meta { font-size: .88rem; color: var(--bone-3); margin-top: .3rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.dh .meta b { color: var(--bone-2); font-weight: 600; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 5px; }
.fact { border: 1px solid var(--line); border-radius: 2px; padding: .3rem .45rem; background: #1c1811; }
.fact b { display: block; font-size: 1.08rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.fact span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-3); line-height: 1.15; display: block; }
.fact.warn b { color: var(--rust); }

/* the operation ribbon */
.ribbon-wrap { border: 1px solid var(--line); border-radius: var(--r); background: #1a1610; padding: .5rem; }
.ribbon-wrap > h4 { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); margin: 0 0 .45rem; }
.ribbon { display: flex; gap: 0; align-items: stretch; overflow-x: auto; padding-bottom: .3rem; }
.rank { display: flex; flex-direction: column; gap: 5px; justify-content: flex-start; flex: 0 0 auto; }
.rank + .rank { margin-left: 16px; position: relative; }
.rank + .rank::before {
  content: ''; position: absolute; left: -13px; top: 14px; width: 10px; height: 1px; background: var(--line-hi);
}
.node {
  width: 182px; border: 1px solid var(--line); border-radius: 2px; background: #221d15;
  padding: .3rem .4rem; text-align: left; color: inherit; font: inherit; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px; transition: border-color .12s, background .12s;
}
.node .lbl { font-size: .82rem; line-height: 1.15; color: var(--bone-2); }
.node .row { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--bone-3); letter-spacing: .04em; }
.node .disc { text-transform: uppercase; letter-spacing: .12em; }
.node .fill { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--brass); }
.node.done { background: #2a2416; border-color: var(--brass-dim); }
.node.done .lbl { color: var(--bone-3); text-decoration: line-through; text-decoration-color: var(--brass-dim); }
.node.done .g { color: var(--brass-hi); font-weight: 700; }
.node.active { border-color: var(--bone-3); background: #2b2519; }
.node.active .lbl { color: var(--bone); }
.node.available { border-color: var(--verdigris); }
.node.blocked { opacity: .42; }
.node.waiting_tool, .node.waiting_room { border-color: var(--rust); }
.node.drop { border-color: var(--brass); background: #33291a; box-shadow: 0 0 0 1px var(--brass) inset; }
.node .tag {
  display: inline-block; font-size: .70rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 .25rem; border-radius: 2px; background: #3a3226; color: var(--bone-2);
}
.node .tag.rust { background: #4d2a1c; color: #f0bda4; }
.node .tag.brass { background: var(--brass-dim); color: #17140e; }
.node.d-movement    { border-left: 3px solid #8fa3c4; }
.node.d-casework    { border-left: 3px solid var(--walnut); }
.node.d-dial        { border-left: 3px solid #cfc3a4; }
.node.d-gilding     { border-left: 3px solid var(--brass); }
.node.d-fabrication { border-left: 3px solid var(--steel); }

.hint { font-size: .82rem; color: var(--bone-3); line-height: 1.3; }
.hint b { color: var(--brass-hi); font-weight: 600; }

.cand { display: flex; flex-wrap: wrap; gap: 4px; }
.cand button {
  border: 1px solid var(--line); background: #1c1811; border-radius: 2px;
  padding: .22rem .45rem; font-size: .82rem; color: var(--bone-2); display: flex; gap: .35rem; align-items: baseline;
}
.cand button:hover { border-color: var(--brass); color: var(--bone); }
.cand button em { font-style: normal; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.cand button small { color: var(--bone-3); }
.cand button.risky em { color: var(--rust); }

.skills { display: flex; flex-direction: column; gap: 4px; }
.skillrow { display: grid; grid-template-columns: 98px 1fr auto; align-items: center; gap: .45rem; font-size: .84rem; }
.skillrow .d { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: var(--bone-3); }
.track { height: 7px; border-radius: 2px; background: #2c261d; position: relative; overflow: hidden; }
.track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--brass-dim), var(--brass)); }
.track u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--steel); opacity: .7; }
.skillrow .v { font-variant-numeric: tabular-nums; color: var(--bone); min-width: 2ch; text-align: right; }

.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .55rem;
  font-size: .80rem; color: var(--bone-2); background: #1c1811;
}
.pill.brass { border-color: var(--brass-dim); color: var(--brass-hi); }
.pill.rust { border-color: #5d3b2c; color: #f0bda4; }
.pill.green { border-color: var(--baize); color: var(--verdigris); }

.rel { display: flex; align-items: center; gap: .5rem; font-size: .84rem; padding: .18rem 0; }
.rel .who { min-width: 8.5rem; color: var(--bone-2); }
.rel .b { flex: 1 1 0; height: 5px; border-radius: 2px; background: #2c261d; overflow: hidden; }
.rel .b i { display: block; height: 100%; }
.rel .b.bond i { background: var(--verdigris); }
.rel .b.riv i { background: var(--rust); }
.rel .tagline { color: var(--brass); font-size: .78rem; }

.dismiss { border-color: #4a3226; }
.dismiss-open {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: .22rem .6rem; font-size: .82rem; color: var(--bone-3);
  letter-spacing: .1em; text-transform: uppercase;
}
.dismiss-open:hover { border-color: var(--rust); color: #f0bda4; }
.dismiss-panel > h4 { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); margin: 0 0 .45rem; }
.dismiss-panel .facts { margin-bottom: .45rem; }
.warn-hint { color: #f0bda4; }
.warn-hint b { color: #ffd9c4; }
.dismiss-acts { display: flex; gap: .4rem; margin-top: .55rem; }
.dismiss-go {
  background: #5d2f20; border: 1px solid var(--rust); border-radius: 2px; color: #ffd9c4;
  padding: .3rem .7rem; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
}
.dismiss-go:hover { background: #743c28; }
.dismiss-go:disabled { opacity: .6; cursor: default; }
.dismiss-cancel {
  background: #1c1811; border: 1px solid var(--line); border-radius: 2px; color: var(--bone-2);
  padding: .3rem .7rem; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
}
.dismiss-cancel:hover { border-color: var(--baize); color: var(--verdigris); }

/* ── intake modal ────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(8,7,5,.72); display: grid; place-items: center; padding: 2vh 2vw; }
.modal-sheet {
  width: min(1100px, 96vw); max-height: 92dvh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #262017, #1a1610);
  border: 1px solid var(--line-hi); border-radius: var(--r); box-shadow: 0 30px 80px -30px #000;
  padding: .9rem 1rem 1rem;
}
.modal-head { position: relative; padding-right: 2.2rem; flex: 0 0 auto; }
.modal-head h2 { font-family: var(--font-display); font-size: 1.74rem; color: var(--brass-hi); }
.modal-head p { margin: .1rem 0 .7rem; color: var(--bone-3); font-size: .90rem; }
.modal-close { position: absolute; top: 0; right: 0; background: transparent; border: 1px solid var(--line); border-radius: 2px; width: 28px; height: 28px; color: var(--bone-3); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: .55rem; overflow-y: auto; min-height: 0; }
.card {
  border: 1px solid var(--line); border-radius: var(--r); background: #211c15;
  padding: .55rem .6rem; display: flex; flex-direction: column; gap: .35rem;
}
.card h4 { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.05; color: var(--bone); }
.card .arch { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.card .blurb { font-size: .80rem; color: var(--bone-3); line-height: 1.25; }
.card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 2px .5rem; margin: 0; font-size: .82rem; }
.card dl div { display: flex; justify-content: space-between; gap: .3rem; }
.card dt { color: var(--bone-3); }
.card dd { margin: 0; color: var(--bone); font-variant-numeric: tabular-nums; font-weight: 600; }
.card .est { font-size: .80rem; color: var(--bone-2); border-top: 1px dotted var(--line); padding-top: .3rem; }
.card .est b { color: var(--brass-hi); }
.card .est span { color: var(--bone-3); }
.card .acts { display: flex; gap: .35rem; margin-top: auto; padding-top: .35rem; }
.card .acts button { flex: 1 1 0; border-radius: 2px; border: 1px solid var(--line); background: #191510; padding: .3rem; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }
.card .acts .take { background: var(--baize); border-color: #4b6a58; color: var(--bone); }
.card .acts .take:disabled { background: #2a251c; border-color: var(--line); color: #635c4d; cursor: not-allowed; }
.card .acts .pass:hover { border-color: var(--rust); color: #f0bda4; }
.benchpick { border-top: 1px dotted var(--line); padding-top: .35rem; }
.bp-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); display: block; margin-bottom: .25rem; }
.bp-row { display: flex; flex-wrap: wrap; gap: 3px; }
.bp {
  position: relative; min-width: 2.1rem; border: 1px solid var(--line); background: #191510;
  border-radius: 2px; padding: .14rem .38rem; font-size: .82rem; color: var(--bone-2);
  display: flex; align-items: center; gap: 3px;
}
.bp:hover { border-color: var(--brass-dim); color: var(--bone); }
.bp.on { border-color: var(--brass); background: #2e2617; color: var(--brass-hi); font-weight: 600; }
.bp-mod { width: 5px; height: 5px; border-radius: 1px; display: block; }
.bp-mod.daylight { background: #6fa3bd; }
.bp-mod.bandsaw_adjacent { background: var(--rust); }
.bp-mod.library_adjacent { background: #c9bd7e; }
.bp-mod.corner { background: #8c88a0; }

.card .expiry { font-size: .74rem; color: var(--bone-3); letter-spacing: .06em; }
.card .expiry.soon { color: var(--rust); }
.modal-foot { flex: 0 0 auto; margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .55rem; min-height: 0; display: flex; flex-direction: column; }
.modal-foot h3 { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); margin-bottom: .4rem; }
.cards.hires { max-height: 27dvh; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

/* ── toasts ──────────────────────────────────────────────────────────── */
.toast-rail { position: fixed; left: 50%; bottom: calc(5.6rem + var(--safe-b)); transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 5px; align-items: center; pointer-events: none; }
.toast {
  background: #2b2418; border: 1px solid var(--brass-dim); border-radius: var(--r);
  padding: .35rem .8rem; font-size: .90rem; color: var(--bone); box-shadow: 0 10px 30px -14px #000;
  animation: escToast .2s ease-out;
}
.toast.bad { border-color: var(--rust); color: #f3c7b2; }
@keyframes escToast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bench-buy {
  position: absolute; right: 0; bottom: -1px; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; background: #221d16; border: 1px solid var(--line);
  border-radius: 2px; padding: .16rem .5rem; color: var(--bone-3);
}
.bench-buy:hover { border-color: var(--brass-dim); color: var(--brass-hi); }

/* ── narrower screens: iPad landscape and down ───────────────────────── */
@media (max-width: 1180px) {
  .underfield { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
  .underfield .journal { grid-column: 1 / -1; }
  .floor { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1.05fr); }
  .node { width: 160px; }
  /* Four columns here makes a bench 135 wide by 264 tall. The plate is 4:3 and
     the clock stands in the middle of it, so a tile that narrow crops away most
     of both. Three columns keeps a bench roughly square. */
  .benches { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Below this the stats cannot share a line with the name and the controls:
     what is left over is narrower than they are, and .bar-stats' own
     overflow:hidden was silently cutting every value. Give them the full width
     of a second row rather than hiding them or shrinking the type back down. */
  .bar { flex-wrap: wrap; row-gap: 5px; }
  .bar-stats {
    order: 3; flex: 1 0 100%; overflow: visible;
    gap: 12px; justify-content: space-between;
  }
  /* :nth-child(n) only to match the specificity of the hide rules below. */
  .bar-stats .stat:nth-child(n) { display: flex; }
}
@media (max-width: 900px) {
  .floor { grid-template-columns: minmax(0, 1.7fr) minmax(180px, .75fr); }
  /* The stats row is full width from 1180px down; from here it is no longer
     wide enough for all five. */
  .bar-stats .stat:nth-child(5) { display: none; }        /* wages */
}

/* ── phones ──────────────────────────────────────────────────────────────
   Below this the two-column floor cannot hold: the side rail's 180px minimum
   plus the bench field overflows, and an overflowing floor on a page that
   cannot scroll is content you can never reach. One column, and the floor is
   the only region that scrolls -- bar and roster stay pinned, which is the
   native pattern rather than a page you scroll. */
@media (max-width: 760px) {
  .bar { gap: 8px; padding: .45rem 10px; }
  .bar-sub { display: none; }
  .bar-right { flex: 0 0 auto; gap: .35rem; }
  /* The bar is the tightest row in the app and it holds the two controls that
     must never go off-screen. Everything in it gets smaller here rather than
     anything being dropped. */
  .bar-mark { font-size: 1.08rem; }
  .speed button { min-width: 1.8rem; padding: .3rem .25rem; font-size: .88rem; }
  .intake-btn { padding: .3rem .45rem; font-size: .80rem; letter-spacing: .05em; gap: .3rem; }
  .newgame-btn { width: 28px; height: 28px; font-size: 1.06rem; }

  /* The stats already have their own row from 900px down. A phone row is only
     wide enough for three of them, and quality per bench-week is the one that
     means least at a glance. */
  .bar-stats { gap: 10px; }
  .bar-stats .stat:nth-child(3) { display: none; }        /* quality / bench-wk */

  .floor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* These carry `min-height: 0` so they can shrink inside the desktop floor.
     Stacked in a scrolling column that floor is what compresses them: auto rows
     over a definite-height container shrink to fit, so the bench grid collapsed
     to a third of its height and clipped six of the eight benches instead of
     letting the floor scroll. Give them their content height back. */
  .benchfield, .underfield, .side { min-height: auto; }
  .benchfield { grid-column: 1; grid-row: 1; }
  .underfield { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .side       { grid-column: 1; grid-row: 3; grid-template-rows: auto auto auto; }

  .benches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(128px, auto);
    align-content: start;
    flex: 0 0 auto;
  }
  .bench { min-height: 128px; }
  .drying { grid-template-columns: repeat(6, 1fr); }

  /* Unconstrained, the journal alone ran to 1,679px and the floor became a very
     long page. Each panel keeps its own scroll (they already carry
     overflow-y:auto) so the column stays short and the content stays whole. */
  .underfield > .panel, .side > .panel { max-height: 44dvh; }

  /* A sheet from the bottom, not a card in the corner: at this width a
     540px card has nowhere to sit. */
  .drawer {
    position: fixed; inset: auto 0 0 0;
    width: auto; max-width: none;
    max-height: 82dvh;
    border-radius: var(--r) var(--r) 0 0;
    padding: .7rem .8rem calc(.8rem + var(--safe-b));
    animation: escSheet .18s ease-out;
  }
  .drawer-scrim { background: rgba(6,5,3,.58); }
  .node { width: 152px; }
}
@keyframes escSheet { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pend i { animation: none; transform: rotate(4deg); }
  .drawer, .toast { animation: none; }
  .drawer-scrim { animation: none; }
  * { transition: none !important; }
}

/* ── welcome ───────────────────────────────────────────────────────────── */
.welcome {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background: radial-gradient(90% 70% at 50% 30%, rgba(24,20,14,.86), rgba(8,7,5,.94));
  animation: escFade .2s ease-out;
}
.welcome-card {
  width: min(560px, 100%);
  border: 1px solid var(--line-hi); border-radius: var(--r);
  background: linear-gradient(180deg, #262019, #191510);
  box-shadow: 0 30px 80px -30px #000;
  padding: 1.4rem 1.5rem 1.2rem;
}
.welcome-mark {
  font-family: var(--font-display); font-size: 1.64rem; color: var(--brass-hi);
  line-height: 1; margin-bottom: .1rem;
}
.welcome-card h2 {
  font-family: var(--font-display); font-size: 1.55rem; color: var(--bone);
  margin: .5rem 0 .6rem;
}
.welcome-card p { margin: 0 0 .7rem; color: var(--bone-2); font-size: 1.04rem; line-height: 1.45; }
.welcome-fine { color: var(--bone-3); font-size: .95rem; }
.welcome-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.welcome-go {
  background: var(--brass-dim); border: 1px solid var(--brass); border-radius: 2px;
  color: #17140e; font-weight: 600; padding: .45rem 1rem;
  letter-spacing: .1em; text-transform: uppercase; font-size: .90rem;
}
.welcome-go:hover { background: var(--brass); }
.welcome-no {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--bone-3); padding: .45rem 1rem;
  letter-spacing: .1em; text-transform: uppercase; font-size: .90rem;
}
.welcome-no:hover { border-color: var(--brass-dim); color: var(--bone-2); }

/* ── walkthrough ───────────────────────────────────────────────────────── */
/* Nothing in here may take pointer events except the card: the whole point is
   that the player clicks the real control being pointed at. */
.tour { position: fixed; inset: 0; z-index: 78; pointer-events: none; }
.tour-hole {
  position: fixed; border-radius: 5px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8,6,4,.66), 0 0 0 1px var(--brass) inset, 0 0 22px -4px var(--brass);
  border: 1px solid var(--brass);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tour-arrow { position: fixed; inset: 0; pointer-events: none; overflow: visible; }
#tour-path { stroke: var(--brass-hi); stroke-width: 2.5; stroke-linecap: round; }
#tour-head { fill: var(--brass-hi); }

.tour-card {
  position: fixed; width: min(392px, calc(100vw - 24px));
  pointer-events: auto;
  border: 1px solid var(--brass-dim); border-radius: var(--r);
  background: linear-gradient(180deg, #2b2419, #1c1710);
  box-shadow: 0 24px 60px -24px #000, 0 0 0 1px rgba(0,0,0,.55);
  padding: .7rem .85rem .8rem;
  transition: left .18s ease, top .18s ease;
}
.tour-head-row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.tour-count {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
}
.tour-quit {
  margin-left: auto; background: transparent; border: 0; padding: 0;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.tour-quit:hover { color: var(--rust); }
.tour-card h3 {
  font-family: var(--font-display); font-size: 1.28rem; line-height: 1.1;
  color: var(--bone); margin-bottom: .4rem;
}
.tour-card p { margin: 0 0 .55rem; font-size: .95rem; line-height: 1.45; color: var(--bone-2); }
.tour-wait { font-size: .88rem; color: var(--rust); min-height: 0; }
.tour-wait:not(:empty) { min-height: 1.2em; margin-bottom: .35rem; }

.tour-acts { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.tour-hint { font-size: .86rem; color: var(--verdigris); flex: 1 1 8rem; min-width: 0; }
.tour-next, .tour-do {
  background: var(--brass-dim); border: 1px solid var(--brass); border-radius: 2px;
  color: #17140e; font-weight: 600; padding: .32rem .8rem;
  letter-spacing: .08em; text-transform: uppercase; font-size: .84rem;
  margin-left: auto;
}
.tour-next:hover, .tour-do:hover { background: var(--brass); }
.tour-do { background: transparent; color: var(--brass-hi); }
.tour-do:hover { background: #33291a; }
.tour-do:disabled { opacity: .6; cursor: default; }
.tour-back {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--bone-3); padding: .32rem .7rem;
  letter-spacing: .08em; text-transform: uppercase; font-size: .84rem;
}
.tour-back:hover { border-color: var(--brass-dim); color: var(--bone-2); }

.tour-dots { display: flex; gap: 4px; margin-top: .6rem; }
.tour-dots i { width: 100%; height: 2px; border-radius: 1px; background: #3b332a; }
.tour-dots i.past { background: var(--brass-dim); }
.tour-dots i.on { background: var(--brass-hi); }

/* The tour points at things; it must not also be pulsing at them. */
@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-card { transition: none; }
  .welcome { animation: none; }
}

/* ── version badge (filled by index.html from version.js) ─────────────────
   Top-left, in the atelier bar's top padding above the shop name, so it sits
   over no stat, speed control, Intake or New game button (those are all to the
   right). z-index 95: above the boot splash (90), toasts/welcome (80), tour (78)
   and the Intake modal (70). One committed dark look, so one set of numbers:
   --bone-3 #8d8677 is 4.53:1 on the bar's lightest point #241f17 (it only
   darkens below), 5.09:1 on the boot splash #16140f, 5.34:1 under the modal
   veil (#100e0a). Fail #d97a52: 5.34:1 on the bar, 6.01:1 on the splash. */
.app-version {
  position: fixed; z-index: 95; pointer-events: none;
  top: var(--safe-t); left: calc(var(--safe-l) + 10px);
  font: 500 9px/9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px; color: var(--bone-3); white-space: nowrap;
}
.app-version.fail { color: #d97a52; font-weight: 700; }