/* Parcel & Post v2 · UI chrome. The company's own paperwork: panels are cream shipping
   labels with a dark ink edge, headers are kraft, the main action is the red rubber
   stamp. Short-lived overlays by the cursor (hints, the ticker, the era banner) are
   dark ink chips, so they read over anything. One type family, one spacing scale. */
@font-face{font-family:"Nunito";src:url("../../assets/fonts/Nunito.ttf") format("truetype");font-weight:200 1000;font-display:swap}
:root{
  --paper:#fbf6ea;--paper2:#f2e9d4;--paper3:#e7dbbf;--kraft:#dcc091;--kraft2:#c9a56d;
  --ink:#2b2420;--ink2:#6e6152;--ink3:#9a8c78;--edge:#3b2f25;--line:#dccfb2;
  --red:#cf3d32;--red2:#b8372e;--good:#27783f;--bad:#b3321f;--warn:#a0620a;--gold:#e0a81e;--blue:#2f67b1;
  --chip:#2b2420;--chip-ink:#fbf1dc;
  --r:10px;--shadow:0 3px 0 rgba(59,47,37,.28),0 10px 24px rgba(20,14,8,.18);
  --era:#e0a81e;--mute:#6e6152;--bg2:#f2e9d4;--ui:1
}
/* interface size (options): the chrome zooms, the world canvas and the cursor hint do not */
#top,#build,#side,#insp,#goal,#mini,#toasts,#coach,#pause,#tip,#ticker,#banner,#hap,#paper,#title .box,#closing,#opening{zoom:var(--ui)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#3f7a3a;color:var(--ink);
  font:600 13.5px/1.4 "Nunito","Segoe UI",system-ui,sans-serif;user-select:none;font-variant-numeric:tabular-nums;touch-action:pan-x pan-y}   /* panels scroll by finger, but a pinch never zooms the page */
canvas#c{display:block;image-rendering:pixelated;cursor:grab;touch-action:none}
canvas#hud{position:fixed;left:0;top:0;pointer-events:none;z-index:1}
b,strong{font-weight:800}
.panel{background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink)}
small{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.mute{color:var(--ink2);font-weight:600}
.up{color:var(--good)}.down{color:var(--bad)}
.stars{color:#855e00;letter-spacing:1px;text-shadow:0 1px 0 rgba(59,47,37,.35)}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.in{width:1.15em;height:1.15em;vertical-align:-.22em;margin-right:.3em}

/* buttons: kraft card by default, the red stamp for the one thing to do */
button{font:800 12.5px/1 "Nunito","Segoe UI",system-ui;color:var(--ink);background:var(--paper2);border:2px solid var(--edge);border-radius:8px;
  padding:6px 11px;cursor:pointer;box-shadow:0 2px 0 var(--edge);position:relative;top:0;transition:background .12s}
button:hover{background:#fff}
button:active{top:2px;box-shadow:0 0 0 var(--edge)}
button.primary{background:var(--red);color:#fff}
button.primary:hover{background:#e4574b}
button.on{background:var(--ink);color:var(--chip-ink)}
button:disabled,button.off{opacity:.45;cursor:default;top:0;box-shadow:0 2px 0 var(--edge)}
button:disabled:hover,button.off:hover{background:var(--paper2)}
button.primary:disabled:hover{background:var(--red)}
button.link{background:none;border:none;box-shadow:none;color:var(--ink2);padding:0;font-size:12px;text-decoration:underline}

/* ---------- the top strip ---------- */
#top{position:fixed;left:10px;right:10px;top:10px;display:flex;gap:8px;align-items:stretch;z-index:10;pointer-events:none}
#top>*{pointer-events:auto;flex-shrink:0}
#top .brand{display:flex;align-items:center;padding:0 14px;background:var(--red);color:#fff;border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
  font:900 19px "Nunito","Segoe UI",system-ui;letter-spacing:-.2px;white-space:nowrap;transform:rotate(-1.5deg)}
#top .brand i{font-style:normal;color:#ffd8a8;margin:0 1px}
#top .hud{display:flex;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#top .seg{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-left:1px dashed var(--line);flex-shrink:0}
/* a narrow window: the menu keeps its icons, then the numbers lose theirs, then the name goes (ui.js fitTop) */
#top.tight #menu .lb{display:none}
#top.tighter .seg .ic{display:none}#top.tighter .seg{padding:5px 9px}#top.tighter .when{min-width:0}
#top.tightest .brand{padding:0 10px}
@media (min-width:721px) and (max-width:1400px){#top .brand .nm{display:none}}   /* the mark is the same in every year at one window size (round 17: Fulfilled in 1982, only the tick in 1995): by the width, not by how full the bar is */
/* a late floor's cash and box counts run long: one more step, the strip's gaps and padding */
#top.clip .hud{flex-shrink:1;min-width:0}
#top.tiniest{gap:5px}#top.tiniest .seg{padding:5px 6px;gap:4px}#top.tiniest #speed button{padding:6px 5px;min-width:26px}#top.tiniest #menu button{padding-left:6px;padding-right:6px}
#top .seg:first-child{border-left:none}
#top .seg .ic{color:var(--ink2)}
#top .seg>span{display:flex;flex-direction:column;line-height:1.15}
#top .seg small{font-size:12px}
#top .seg b{font-size:16px;font-weight:900;white-space:nowrap}
#top .seg b small{font-size:12px;letter-spacing:0;text-transform:none}
#top .seg.alert{background:#fde3d8}#top .seg.alert .ic,#top .seg.alert b{color:var(--bad)}
#top .grow{flex:1}
#menu{display:flex;gap:2px;align-items:center;padding:4px;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
#menu button{display:flex;align-items:center;gap:6px;border:none;box-shadow:none;background:none;padding:6px 9px;border-radius:7px;font-size:12.5px;top:0}
#menu button:hover{background:var(--paper2)}
#menu button.sq{padding:6px 7px}
#menu button.open{background:var(--ink);color:var(--chip-ink)}
#menu .badge{display:none;min-width:17px;height:17px;padding:0 5px;margin-left:-2px;border-radius:9px;background:var(--red);color:#fff;
  font:900 12px/17px "Nunito",system-ui;font-style:normal;text-align:center}
#menu .badge.on{display:inline-block}
#menu .badge.warn{background:var(--warn)}
#top .clock{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 12px;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
#top .when{display:flex;flex-direction:column;line-height:1.15;min-width:150px}
#top .when b{font-size:14px;font-weight:900;white-space:nowrap}
#speed{display:flex;gap:2px;background:var(--paper2);border-radius:8px;padding:2px}
#speed button{border:none;box-shadow:none;background:none;padding:6px 8px;min-width:32px;border-radius:6px;top:0}
#speed button:hover{background:#fff}
#speed button.on{background:var(--ink);color:var(--chip-ink)}
#speed button{font-weight:900}
#speed button[data-s="0"].on{background:var(--red2);color:#fff}   /* round 14: the thin glyph read 2.38:1 on the screen's own pixels; a heavier weight and the deeper red (white on it is 5.9:1) */

/* ---------- notifications ---------- */
#toasts{position:fixed;left:10px;top:80px;width:310px;display:flex;flex-direction:column;gap:6px;z-index:9;pointer-events:none}
.toast{padding:8px 12px 8px 14px;font-size:12.5px;line-height:1.4;border-left-width:6px;transition:opacity .6s,transform .6s}
.toast.good{border-left-color:var(--good)}
.toast.bad{border-left-color:var(--bad)}
.toast.era{border-left-color:var(--gold);font-size:14px;font-weight:800}
.toast.mail{background:#f6ecd2;border-left-color:var(--kraft2);font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:13px}
.toast.mail small{color:#6a5b45}
.toast.fade{opacity:0;transform:translateX(-20px)}
#ticker{position:fixed;left:50%;top:72px;transform:translate(-50%,-10px);opacity:0;transition:opacity .45s,transform .45s;z-index:11;pointer-events:none;
  padding:8px 18px;font-size:13px;white-space:nowrap;background:var(--chip);color:var(--chip-ink);border-color:var(--chip)}
#ticker.on{opacity:1;transform:translate(-50%,0)}
#ticker .down{color:#ff9c8c}
#closing{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:12;display:none;padding:12px 18px;min-width:340px;max-width:460px;text-align:center;background:var(--chip);color:var(--chip-ink);border-color:var(--chip)}
#closing small{color:var(--gold);letter-spacing:.06em}
#closing .nums{display:flex;gap:14px;justify-content:center;margin:6px 0 4px;font-size:13px}
#closing .nums b{font-size:15px}#closing .down{color:#ff9c8c}
#closing .fc{font-size:12.5px;opacity:.8;margin-bottom:4px}
#closing .acts{display:flex;gap:8px;justify-content:center;margin-top:8px}
#sleep{position:fixed;inset:0;z-index:14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(14,18,38,.86);color:#e8ecff;
  opacity:0;pointer-events:none;transition:opacity .6s}
#sleep.on{opacity:1;pointer-events:auto}
#sleep .moon{width:46px;height:46px;border-radius:50%;box-shadow:-12px 6px 0 0 #f4e7b0;transform:translate(8px,-4px);margin-bottom:6px}
#sleep b{font:900 34px "Nunito",system-ui;letter-spacing:.02em}
#sleep small{letter-spacing:.2em;opacity:.7;color:inherit}
#sleep button{margin-top:14px}
#title .jump{margin-top:14px}
#title .jump small{display:block;color:var(--ink2);letter-spacing:.08em;margin-bottom:6px}
#tJump{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
#title #tJump button{display:inline-block;width:auto;margin:0;padding:5px 10px;font-size:12.5px;text-align:center}
.crew.watch{border-top:1.5px dashed var(--line);margin-top:8px;padding-top:8px}
#opening{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1deg);z-index:40;padding:16px 34px;display:none;background:var(--chip);color:var(--chip-ink);border-color:var(--gold);border-width:3px;font:900 22px "Nunito",system-ui}
#banner{position:fixed;left:50%;top:22%;transform:translateX(-50%) rotate(-1deg);z-index:20;padding:18px 36px;text-align:center;display:none;background:var(--chip);color:var(--chip-ink);border-color:var(--gold);border-width:3px}
#banner small{color:var(--gold)}
#banner b{display:block;font:900 30px "Nunito","Segoe UI",system-ui;color:#fff;margin:2px 0 4px}
#banner .mute{color:#d8cbb0}
#hint{position:fixed;z-index:25;pointer-events:none;padding:calc(5px * var(--ui)) calc(9px * var(--ui));font-size:calc(12px * var(--ui));border-radius:7px;max-width:calc(380px * var(--ui));display:none;   /* over the cards and wrapped (round 17: one long line ran under a visitor card and across the goal card's text) */
  background:var(--chip);color:var(--chip-ink);border-color:var(--chip);box-shadow:0 4px 12px rgba(0,0,0,.3)}
#hint.bad{background:#7d2a22;border-color:#7d2a22}

/* ---------- the build tray ---------- */
#build{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:10;padding:0;max-width:calc((100vw - 20px) / var(--ui));overflow:hidden}
#tabs{display:flex;gap:0;background:var(--kraft);border-bottom:2px solid var(--edge);padding:5px 6px 0;flex-wrap:wrap}
#tabs button{border:none;box-shadow:none;background:none;border-radius:7px 7px 0 0;padding:6px 11px 7px;font-size:12.5px;top:0;color:#4a3a28}
#tabs button:hover{background:rgba(255,255,255,.35)}
#tabs button.on{background:var(--paper);color:var(--ink)}
#items{display:flex;gap:6px;overflow-x:auto;max-width:calc((100vw - 40px) / var(--ui));padding:8px}
.item{width:94px;flex:0 0 auto;padding:4px 4px 6px;border-radius:9px;border:2px solid var(--line);background:var(--paper2);cursor:pointer;position:relative}
.item:hover{border-color:var(--edge);background:#fff}
.item.on{border-color:var(--red);background:#fff;box-shadow:0 0 0 2px var(--red)}
.item canvas{display:block;margin:0 auto;image-rendering:pixelated}
.item.turn{border-color:var(--gold);background:#fff4d6}.item.turn .ic{display:block;width:44px;height:44px;margin:6px auto 4px;color:var(--ink)}
.item .nm{font-size:12px;font-weight:800;text-align:center;line-height:1.15;height:2.3em;display:flex;align-items:center;justify-content:center;overflow:hidden}   /* two lines: "Coffee Machine" whole at 1440 */
.item .pr{font-size:12px;font-weight:800;text-align:center;color:var(--good)}
.item em.new{position:absolute;top:3px;right:3px;padding:1px 6px;border-radius:7px;background:var(--gold);color:var(--ink);border:2px solid var(--edge);
  font:900 12px/1.3 "Nunito",system-ui;font-style:normal;letter-spacing:.06em;transform:rotate(6deg)}
#tabs i.new{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin:0 0 6px 3px;vertical-align:middle}
#tip{position:fixed;z-index:12;display:none;width:260px;padding:10px 12px;pointer-events:none}
#tip b{font-size:14px}#tip .pr{float:right;color:var(--good);font-weight:900}
#tip p{margin:4px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.45}

/* ---------- inspector and side sheets ---------- */
#insp{position:fixed;right:10px;top:80px;width:290px;padding:12px 14px;z-index:10;display:none;max-height:calc((100vh - 210px) / var(--ui));overflow-y:auto}
body.sided #insp{right:calc(min(580px,100vw - 20px) + 20px)}
#insp h3{margin:0 0 4px;font:900 17px "Nunito","Segoe UI",system-ui}
#insp .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}#insp .acts button{flex:1 1 auto;padding:7px 10px}
#insp .row,#side .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0}
#insp small{margin-top:6px}
#insp .mind{margin:3px 0 4px;font-size:12px}
#insp .sub{font-size:12px;margin:-4px 0 4px}
#insp .two{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
#insp .two .row{margin:2px 0 0}
#insp .two .bar{margin:2px 0 4px}
#insp .roles{margin-top:8px}
#insp .likes{margin:2px 0 4px}
#insp .mood{font-size:12.5px;margin-top:-2px}
#insp .mind div{display:flex;justify-content:space-between;gap:8px;padding:1px 0;border-bottom:1px dotted var(--line)}
#insp .mind b{font-variant-numeric:tabular-nums}
#insp .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#insp .acts button{flex:1 1 auto;white-space:nowrap;padding:6px 8px;font-size:12px}
#side{position:fixed;right:10px;top:80px;max-height:calc((100vh - 16px) / var(--ui) - 250px);width:min(580px,calc((100vw - 20px) / var(--ui)));padding:0 16px 16px;z-index:12;display:none;overflow-y:auto}
#side header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -16px 12px;padding:10px 12px 10px 16px;
  background:var(--kraft);border-bottom:2px solid var(--edge)}
#side h3{margin:0;font:900 18px "Nunito","Segoe UI",system-ui}
#side header .close{padding:4px 8px}
#side p{margin:0 0 10px;line-height:1.5}
#side table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
#side td,#side th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
#side th{color:var(--ink2);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
#side>small,#side .sec{display:block;margin:14px 0 6px;padding-bottom:3px;border-bottom:2px solid var(--line)}
#side canvas{border-radius:8px;border:2px solid var(--line)}
.bar{height:7px;background:var(--paper3);border-radius:4px;overflow:hidden;margin:3px 0 7px}
.bar i{display:block;height:100%;background:var(--good);border-radius:4px}
.tag{display:inline-block;padding:1px 8px;border-radius:9px;background:var(--paper2);border:1.5px solid var(--line);font-size:12px;font-weight:700;margin:2px 3px 0 0}
.card{display:flex;gap:10px;align-items:center;padding:10px;border:2px solid var(--line);border-radius:10px;margin:8px 0;background:var(--paper2)}
.card.said{display:block;border-left-width:5px}.card.said.good{border-left-color:var(--good)}.card.said.bad{border-left-color:var(--bad)}   /* the answer to a hire, where the card was */
.card.pace .tog{display:flex;width:max-content;margin:6px 0}
.card.drop{border-color:var(--gold);background:#fff4d6}
.roles{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.roles button{padding:4px 8px;font-size:12px;display:flex;align-items:center;gap:5px;box-shadow:0 1px 0 var(--edge);border-width:1.5px}
.roles button i{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid rgba(0,0,0,.25)}
.roles button.on{background:var(--ink);color:var(--chip-ink)}
.prods{display:flex;flex-direction:column;gap:3px;margin:6px 0 12px}
.prod{display:grid;grid-template-columns:14px 10px minmax(0,1fr) 92px 40px 78px 64px;column-gap:8px;align-items:center;padding:4px 8px;border:2px solid var(--line);border-radius:8px;cursor:pointer;font-size:12.5px;background:var(--paper2)}
.prod:hover{border-color:var(--kraft2)}
.prod.on{border-color:var(--good);background:#eaf5e6}
.prod.hd{white-space:nowrap;cursor:default;padding:0 10px;border:none;background:none;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.prod.hd span:nth-child(n+5){text-align:right}
.prod input{margin:0;accent-color:var(--good)}.prod i{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid rgba(0,0,0,.25)}
.prod .pn{font-weight:800;line-height:1.25}
.prod .pn .tag.out{margin:0 0 0 4px;padding:0 6px;font-size:12px;color:var(--bad);border-color:#e6a99f;background:#fdebe4}
.prod .mute{font-size:12px;white-space:nowrap}
.prod .pd,.prod .ps,.prod .pr{font-size:12px;text-align:right;font-weight:800;white-space:nowrap}
.prod .ps.low{color:var(--warn)}
.prod.on .ps.low{color:#955600}                      /* 5.2:1 on the picked row's green */
.tog{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--paper3);flex:none}
.tog button{border:none;box-shadow:none;background:none;padding:4px 9px;font-size:12px;border-radius:6px;top:0}
.tog button:hover{background:#fff}
.tog button.on{background:var(--ink);color:var(--chip-ink)}
#side .sec.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
i.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;border:1px solid rgba(0,0,0,.25)}

/* the Books: tiles, the 30-day chart, the income statement, products */
#side .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 2px}
#side .tiles div{padding:6px 9px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper2)}
#side .tiles small{display:block;font-size:12px}
#side .tiles b{font-size:16px;font-weight:900}
#side .chart{position:relative;margin:6px 0 4px}
#side .chart svg{display:block;width:100%;height:auto}
.chart text{font:800 12.5px "Nunito",system-ui;fill:var(--ink3)}   /* 12 px or more where it reaches the eye */
.chart text.ax{paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.chart text.ttl{fill:var(--ink2);letter-spacing:.06em}
.chart text.none{font-weight:700;font-size:12.5px;fill:var(--ink2)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--ink3);stroke-width:1}.chart .zero{stroke:var(--bad);stroke-width:1}
.chart .ln{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .col{fill:var(--good)}.chart .col.loss{fill:var(--bad)}.chart .col.now{opacity:.5}
.chart .col.on{stroke:var(--edge);stroke-width:1.5}
.chart .xh{stroke:var(--ink2);stroke-width:1}
.chart .dot{fill:var(--blue);stroke:var(--paper);stroke-width:2}
.chart .hit{fill:transparent}
.ctip{position:absolute;top:22px;z-index:3;display:none;width:210px;padding:7px 10px 6px;border-radius:8px;background:var(--chip);color:var(--chip-ink);font-size:12px;
  pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
#side .ctip .row{margin:2px 0}
.ctip .mute{color:#cdbfa6}.ctip .up{color:#8fdca5}.ctip .down{color:#ff9c8c}
#side table.pl td,#side table.pl th{padding:3px 6px;border:none}
#side table.pl td+td,#side table.pl th+th,#side table.pt td+td,#side table.pt th+th{text-align:right;white-space:nowrap}
#side table.pl td:first-child{padding-left:14px}
#side table.pl tr.part td{padding:10px 6px 3px;border-bottom:1.5px solid var(--line);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
#side table.pl tr.tot td{font-weight:800;border-top:1px solid var(--line)}
#side table.pl tr.big td{padding:7px 6px;font-size:14.5px;font-weight:900;border-top:2px solid var(--edge);border-bottom:2px solid var(--edge)}
#side table.pt th{cursor:pointer;white-space:nowrap}
#side table.pt th:hover,#side .crewt .chead span:hover{color:var(--ink)}
#side table.pt th.on,#side .crewt .chead .on{color:var(--red2)}
#side table.pt td{padding:4px 6px}
#side table.pt tr.tot td{font-weight:900;border-top:2px solid var(--edge);border-bottom:none}

/* the crew as a table: a wider sheet, a header that stays put, a bar for changes to everyone ticked */
body.wideside #side{width:min(940px,calc((100vw - 20px) / var(--ui)));max-height:calc((100vh - 16px) / var(--ui) - 250px)}   /* wide enough to reach over the build tray: stop above it */
body.sided.wideside #insp{right:calc(min(940px,100vw - 20px) + 20px)}
/* on a laptop screen the person card opens beside the wide Crew table, over the goal card's edge: above it, so its buttons take the clicks */
body.sided.wideside #insp{z-index:11}
.crewbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
#side .crewt{font-size:12px}
#side .crewt .chead,#side .crewt .crow{display:grid;grid-template-columns:24px 190px 76px 58px 82px 170px 74px 70px 60px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line)}
#side .crewt.noroles .chead,#side .crewt.noroles .crow{grid-template-columns:24px 190px 58px 82px 170px 74px 70px 60px minmax(0,1fr)}   /* the name column holds "Christopher Anderson · retiring" (185 px): at 142 the word retiring was cut */
#side .crewt .chead{position:sticky;top:46px;z-index:1;background:var(--paper);color:var(--ink2);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
#side .crewt .chead span{padding:5px;white-space:nowrap;cursor:pointer}
#side .crewt .crow{content-visibility:auto;contain-intrinsic-size:auto 27px;cursor:pointer}   /* rows off screen skip layout */
#side .crewt .crow>span{padding:4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side .crewt .crow:hover{background:#fff}
#side .crewt .crow.on{background:#fdebe4}
#side .crewt .n{text-align:right}
#side .crewt .ck{padding:0 2px 0 4px}
#side .crewt .ck input{margin:0;accent-color:var(--red);cursor:pointer}
#side .crewt .nm{font-weight:800}
#side .crewt .crow>.qk{white-space:normal}
#side .crewt .qk .tag{margin:0 2px 0 0;padding:0 5px;font-size:12px}
#side .crewt .dg{color:var(--ink2)}
#side .selbar{position:sticky;bottom:-16px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px -16px -16px;padding:9px 16px;
  background:var(--kraft);border-top:2px solid var(--edge)}
#side .selbar .roles{margin:0}
.crew{display:flex;gap:10px;align-items:center;padding:7px 9px;border:2px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer;background:var(--paper2)}
.crew:hover{border-color:var(--kraft2);background:#fff}
.crew canvas{width:44px;height:62px;image-rendering:pixelated;flex:none;border:none!important}
.crew .cm{flex:1;min-width:0}.crew .cm .roles{margin:4px 0 0}
.crew .cr{text-align:right;flex:none}
#side .era{display:flex;justify-content:space-between;margin:16px 0 4px;padding-bottom:3px;border-bottom:2px solid var(--line)}
#side .era.cur b{color:var(--red2)}
#side .ms{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:6px 10px;border-radius:8px;margin:3px 0;background:var(--paper2);border:1.5px solid var(--line)}
#side .ms .mt{font-size:13px;font-weight:800}#side .ms .md{grid-column:1;font-size:12px}#side .ms .bar{grid-column:1;margin:4px 0 0}
#side .ms .mr{grid-column:2;grid-row:1 / span 3;align-self:center;color:var(--good);font-size:12.5px;font-weight:900}
#side .ms.ok{opacity:.7}#side .later{opacity:.5}

/* ---------- the log, and a station's last twelve hours ---------- */
/* entries wear their toast's edge colour; one that happened somewhere shows a pin and takes you there */
#side .logbar{position:sticky;top:46px;z-index:1;margin:-12px -16px 4px;padding:8px 16px;background:var(--paper);border-bottom:1.5px solid var(--line)}
#side .logday{display:block;margin:12px 0 4px}
.logl{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:8px;align-items:start;margin:3px 0;padding:6px 8px 6px 9px;border:1.5px solid var(--line);
  border-left:5px solid var(--line);border-radius:8px;background:var(--paper2);font-size:12.5px;line-height:1.4}
.logl .lt{padding-top:1px;color:var(--ink2);font-size:12px;font-weight:800}
.logl .lx small{display:inline;font-size:12px;letter-spacing:0;text-transform:none}
.logl .ic{width:15px;height:15px;margin-top:1px;color:var(--ink3)}
.logl .lx button{display:block;margin-top:5px}   /* a letter's guide, kept for when the player wants it */
.logl.go{cursor:pointer}
.logl.go:hover{border-color:var(--kraft2);background:#fff}.logl.go:hover .ic{color:var(--red)}
.logl.new{background:#fff;box-shadow:inset 0 0 0 1.5px var(--kraft)}
.logl.good{border-left-color:var(--good)}.logl.bad{border-left-color:var(--bad)}.logl.tip{border-left-color:var(--blue)}
.logl.era,.logl.news{border-left-color:var(--gold)}
.logl.mail .lx{font:400 13px/1.4 Georgia,"Times New Roman",serif}.logl.mail{border-left-color:var(--kraft2)}
.logl.memo .lx{font:12px/1.45 "Courier New",Courier,monospace}.logl.memo .lx b{font-family:Georgia,serif}.logl.memo{border-left-color:#6f6245}
#side .logfoot{margin-top:10px;font-size:12px}
#insp .spark{display:block;width:100%;height:auto;margin:2px 0 4px}
.spark rect{fill:var(--good)}.spark rect.now{opacity:.45}
.spark line{stroke:var(--line);stroke-width:1}.spark line.top{stroke-dasharray:3 3}
.spark text{font:800 9.5px "Nunito",system-ui;fill:var(--ink3)}.spark text.mx{fill:var(--ink2)}
.spark.flow{display:block;width:100%;height:auto;margin:6px 0 2px}
.spark.flow line.grid{stroke-dasharray:2 3}.spark.flow text{font-size:12.5px}.spark.flow text.nm{font-size:12.5px;fill:var(--ink2)}.spark.flow text.tot{font:900 14px "Nunito",system-ui;fill:var(--ink)}
.spark.flow rect.cap{fill:var(--ink)}.spark.flow rect.hit{fill:transparent}.spark.flow rect.hit:hover{fill:rgba(59,47,37,.08)}
.split{display:flex;height:9px;margin:6px 0 5px;border-radius:5px;overflow:hidden;background:var(--paper3)}
.split i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:1px 10px;font-size:12px;font-weight:700;color:var(--ink2)}
.legend i{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:2px}
.split .work,.legend .work{background:var(--good)}.split .wait,.legend .wait{background:var(--warn)}.split .stuck,.legend .stuck{background:var(--bad)}
.split .nobody,.legend .nobody{background:var(--ink3)}.split .off,.legend .off{background:var(--line)}
#insp .diag{margin-top:7px;padding:6px 8px;border-radius:7px;border:1.5px dashed var(--kraft2);background:var(--paper2);font-size:12px;line-height:1.4}
#pause .sizes.pz{flex-wrap:wrap}#pause .sizes.pz button{flex:1 1 30%;white-space:nowrap}
#menu button.sq .badge{position:absolute;top:-4px;right:-5px;margin:0;box-shadow:0 0 0 2px var(--paper)}   /* on an icon button the badge sits on its corner */

/* ---------- goal tracker and the tutorial ---------- */
#goal{position:fixed;left:10px;bottom:10px;width:272px;padding:10px 13px;z-index:10;font-size:12px}
#goal small{display:block}
#goal .bar{margin:3px 0 6px}
#goal .gm{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;margin-top:5px}
#goal .lv{display:flex;justify-content:space-between;align-items:baseline}
#goal .ln{font:900 17px "Nunito","Segoe UI",system-ui}
#goal .bar.xp{height:10px;border:1.5px solid var(--edge);background:var(--paper2)}
#goal .bar.xp i{background:linear-gradient(90deg,var(--gold),#f3c64c)}
#goal .hint{font-size:12px;line-height:1.35;margin-top:2px}
#goal .hint.stuck b{color:var(--bad)}
#goal button.link{padding:4px 2px;margin:-4px 0}
#goal .hacts{display:flex;align-items:center;gap:12px;margin-top:7px}
#goal .hacts .van{padding:8px 12px}
#goal .nx{font-size:12.5px}#goal .yr{color:var(--red2);font-weight:900}
#goal small.sec{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}
#coach{position:fixed;left:10px;bottom:120px;width:330px;padding:12px 15px;z-index:15;display:none;border-color:var(--gold);border-width:3px}
#coach .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
#coach .ch small{color:#85590a}
#coach b{font:900 16px "Nunito","Segoe UI",system-ui}
#coach .ct{font-size:13px;line-height:1.5;margin:4px 0 10px;color:var(--ink)}
#coach .ct b{font-size:13px}
#coach .cf{display:flex;justify-content:space-between;align-items:center}
#coach .cb{display:flex;gap:6px;margin-left:auto}
#coach .ctop{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
#coach.untitled .ctop{display:none}   /* its name is only for the phone's strip */
#coach .pic{flex:none;image-rendering:pixelated;background:var(--paper2);border:2px solid var(--line);border-radius:8px;max-height:62px}
#coach .say{font:italic 600 13.5px/1.45 Georgia,"Times New Roman",serif;margin:2px 0 8px;color:var(--ink)}
#coach .say span{display:block;font:800 12px "Nunito",system-ui;font-style:normal;color:var(--ink2);margin-top:2px}
#coach .try{margin-top:8px;padding:6px 8px;border-radius:7px;background:var(--paper2);border:1.5px dashed var(--kraft2);font-size:12.5px}
#side .guides{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.glow{animation:glow 1s ease-in-out infinite;position:relative;z-index:16}
#side .glow{z-index:1}   /* inside a sheet it stays under the sheet's header and its close button as the list scrolls */
@keyframes glow{0%,100%{box-shadow:0 0 0 2px #fff7d6,0 0 0 5px var(--gold),0 0 18px 6px rgba(255,200,40,.85)}50%{box-shadow:0 0 0 2px #fff7d6,0 0 0 5px var(--gold),0 0 30px 14px rgba(255,200,40,.45)}}
#top .seg.glow{animation:glowin 1s ease-in-out infinite}                  /* the strip clips an outer ring: glow inside it */
@keyframes glowin{0%,100%{box-shadow:inset 0 0 0 3px var(--gold);background:#fff1c7}50%{box-shadow:inset 0 0 0 3px var(--gold);background:#fffaf0}}

/* ---------- the minimap and hover cards ---------- */
/* the minimap fits under the side sheets' lowest reach (130px up); it steps aside (tucked) when something reaches its corner */
#mini{position:fixed;right:10px;bottom:10px;z-index:10;padding:4px;background:var(--paper2)}
#mini canvas{display:block;width:208px;height:104px;cursor:pointer}
#mini.off{display:none}
#mini .turnv{position:absolute;top:6px;width:30px;height:30px;padding:4px;border-radius:50%;background:var(--paper)}#mini .turnv svg{width:20px;height:20px;display:block}
#mini .turnv.l{left:6px}#mini .turnv.l svg{transform:scaleX(-1)}#mini .turnv.r{right:6px}
#mini.tucked{visibility:hidden}
#hov{position:fixed;z-index:11;pointer-events:none;display:none;max-width:300px;padding:6px 10px 7px;border-radius:8px;font-size:12px;line-height:1.35;
  background:var(--chip);color:#cdbfa6;border-color:var(--chip);box-shadow:0 4px 12px rgba(0,0,0,.3)}
#hov b{display:block;font-size:13px;color:var(--chip-ink)}
#hov.tagtip{z-index:30;font-size:13px}   /* over the sheet or card the quirk is on */
#hov .pip{display:inline-block;width:17px;height:17px;margin:0 6px 0 -2px;border-radius:50%;background:#e8a93a;color:#fff;font:900 12px/17px "Nunito",system-ui;font-style:normal;text-align:center;vertical-align:1px}
#hov .pip.hot{background:#e0584c}

/* ---------- the pause menu ---------- */
#shade{position:fixed;inset:0;background:rgba(24,18,12,.5);z-index:24;display:none}
#pause{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:380px;padding:18px 20px;z-index:25;display:none;max-height:calc((100vh - 20px) / var(--ui));overflow-y:auto}
#pause h2{margin:0 0 12px;font:900 28px "Nunito","Segoe UI",system-ui}
#pause .wide{width:100%;padding:11px;font-size:15px}
#pause .grp{margin-top:16px}
#pause .grp small{display:block;margin-bottom:6px}
#pause .opt{display:block;padding:6px 9px;border-radius:8px;border:2px solid transparent;cursor:pointer;margin:2px 0}
#pause .opt:hover{background:var(--paper2)}
#pause .opt.on{border-color:var(--red);background:#fdebe4}
#pause .opt input{margin-right:8px;accent-color:var(--red)}
#pause .np{margin:6px 0 10px;font-size:12.5px}
#pause .sl{display:flex;justify-content:space-between;align-items:center;margin:6px 0;font-size:12.5px;font-weight:800}
#pause .sl input{width:230px;accent-color:var(--red)}
#pause .sizes{display:flex;gap:4px}#pause .sizes button{flex:1;padding:7px 4px}
#pause .view button::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border:1.5px solid currentColor;border-radius:2px}   /* switches, not a choice of one */
#pause .view button.on::before{background:currentColor}
#pause .row2{display:flex;gap:8px}#pause .row2 button{flex:1;padding:9px}
#pause .foot{margin-top:12px;text-align:center;font-size:12px}
#pause .row2 #pQuit{flex:2}
#pause.list{width:480px;max-height:calc((100vh - 40px) / var(--ui));overflow-y:auto}

/* ---------- the County Courier and the memo (paper of their own) ---------- */
body.paperUp::before{content:'';position:fixed;inset:0;z-index:26;background:rgba(14,16,24,.62)}   /* the floor and the bars dim behind a front page (the page is later in the order, so above) */
#paper{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1.2deg);width:420px;padding:16px 20px 18px;z-index:26;display:none;
  background:#f1e9d2;color:#231f19;border-radius:2px;box-shadow:0 14px 40px rgba(0,0,0,.55);font-family:Georgia,"Times New Roman",serif}
#paper .mast{font:400 34px "Old English Text MT","UnifrakturCook",Georgia,serif;text-align:center;letter-spacing:.5px;border-bottom:3px double #231f19;padding-bottom:4px}
#paper .dl{display:flex;justify-content:space-between;font:italic 12px Georgia,serif;border-bottom:1px solid #231f19;padding:3px 0;margin-bottom:8px}
#paper h1{font:900 25px/1.05 Georgia,"Times New Roman",serif;margin:6px 0 4px;text-transform:uppercase;letter-spacing:-.3px}
#paper h2{font:italic 700 14px Georgia,serif;margin:0 0 8px;color:#3b342a}
#paper .pb{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#paper .ph canvas{width:100%;image-rendering:pixelated;border:1px solid #231f19;display:block}
#paper p{font:13px/1.45 Georgia,serif;margin:8px 0 12px;text-align:justify}
#hap,#rmemo{position:fixed;left:50%;top:80px;transform:translateX(-50%) rotate(.6deg);width:400px;max-width:calc((100vw - 32px) / var(--ui));padding:14px 18px;z-index:24;display:none;
  background:#f6efdc;color:#2e2718;border:1px solid #cdbf98;border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.4);font:13px/1.45 "Courier New",Courier,monospace}
#hap .memo,#rmemo .memo{font:700 12px "Courier New",monospace;letter-spacing:2px;color:#6f6245;border-bottom:1px dashed #cdbf98;padding-bottom:4px;margin-bottom:8px}
#hap h3,#rmemo h3{font:700 17px Georgia,serif;margin:0 0 6px;color:#231c10}
#hap .hb,#rmemo .hb{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#rmemo{z-index:25;transform:translateX(-50%) rotate(-.5deg);zoom:var(--ui)}
#rmemo p{margin:6px 0}#rmemo ul{margin:4px 0;padding-left:18px}#rmemo li{margin:3px 0}
#rmemo .rw{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted #cdbf98;padding:2px 0}
.tag.temp{background:#fff1c2;border-color:var(--gold);color:#7a5600;letter-spacing:.5px}
.tag.lead{background:#2f3a55;border-color:#2f3a55;color:#ffd970;letter-spacing:.5px}
#side .crewt .nm .tag{margin:0 3px 0 0;padding:0 4px;font-size:12px}

/* ---------- the Board ---------- */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:8px 0 14px;padding:12px;border-radius:10px;border:2px solid var(--edge);
  background:#8a6a44 radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.5px) 0 0/7px 7px}
.notes > p.mute{grid-column:1/-1;margin:0;color:#fffaf0}
.note{position:relative;background:#fffaf0;color:#2a2622;padding:14px 10px 10px;border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.35);font-size:12.5px}
.note .tack{position:absolute;left:50%;top:4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--red);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.note .who{font:900 13.5px "Nunito","Segoe UI",system-ui;margin-bottom:4px}
.note .what{margin-bottom:3px}.note .terms,.note .stock{color:var(--ink2);font-size:12px}
.note .chip{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 2px;border:1px solid rgba(0,0,0,.25)}
.note .acts{display:flex;gap:6px;margin-top:8px}.note .acts button{font-size:12px;padding:5px 8px}
.note .stamp{display:inline-block;margin-top:6px;padding:2px 8px;border:2px solid;border-radius:4px;font:900 12px "Nunito","Segoe UI",system-ui;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-4deg)}
.note .stamp.good{color:var(--good)}.note .stamp.bad{color:var(--bad)}
.note.done,.note.missed{opacity:.85}
.note.plain{opacity:.85}
.note .ribbon{position:absolute;top:0;bottom:0;right:7px;width:6px;background:#c8343c;box-shadow:inset 2px 0 0 rgba(255,255,255,.25)}
.note .ribbon::before{content:"";position:absolute;top:6px;left:-10px;width:26px;height:14px;border-radius:50%;background:radial-gradient(circle,#f2c448 0 30%,#c8343c 32%);box-shadow:0 1px 1px rgba(0,0,0,.35)}
.note.wrap{padding-right:18px}
.note.lodge{grid-column:1/-1;padding-top:0;border-top:26px solid #4b2a6b}
.note.lodge .tack{top:-18px;left:12px;margin-left:0;background:#e0b43a}
.note.lodge .lh{position:absolute;left:0;right:0;top:-21px;text-align:center;color:#fff;background:#4b2a6b;font:900 11.5px "Nunito","Segoe UI",system-ui;letter-spacing:.08em;text-transform:uppercase}
.note.lodge .who{margin-top:10px}

/* ---------- the title screen ---------- */
#title{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:flex-start;padding-left:6vw;
  background:linear-gradient(90deg,rgba(28,20,12,.78),rgba(28,20,12,.4) 45%,rgba(28,20,12,0) 70%)}
#title .box{width:360px;padding:26px 26px 22px;transform:rotate(-.8deg)}
#title h1{margin:0;font:900 46px/1 "Nunito","Segoe UI",system-ui;letter-spacing:-.8px}
#title h1 i{font-style:normal;color:var(--red)}
.tick svg{width:.62em;height:.62em;margin-left:.08em;vertical-align:.02em;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
#title p{color:var(--ink2);margin:8px 0 18px;font-size:14px}
#title .box>button{display:block;width:100%;margin:8px 0;padding:11px 14px;font-size:15px;text-align:left}
#title .ver{margin-top:14px;font-size:12px;color:var(--ink2)}
#title .box>button.snd{display:flex;align-items:center;gap:9px;margin-top:14px;padding:9px 14px;font-size:14px}
#pause .snd{display:flex;align-items:center;gap:9px;width:100%;margin:2px 0 8px;padding:9px 14px}
.snd .ic{width:20px;height:20px;flex:none}
.snd.off{border-color:var(--red);color:var(--red2)}
body.titled #top,body.titled #build,body.titled #insp,body.titled #side,body.titled #goal,body.titled #coach,
body.titled #pause,body.titled #shade,body.titled #paper,body.titled #ticker,body.titled #tip,body.titled #mini,body.titled #hov{display:none!important}
body.titled #toasts,body.pausemenu #toasts{z-index:31}                 /* save news shows over the title and the menu */
#tCont small{display:block;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;color:#fff}
#title .box.saves{display:none;width:460px;margin-left:28px;padding:18px 20px;transform:rotate(.5deg);max-height:calc(88vh / var(--ui));overflow-y:auto}

/* ---------- saved games: the title's list and the menu's ---------- */
.saves .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#title .saves h2,#pause .saves h2{margin:0;font:900 24px "Nunito","Segoe UI",system-ui}
.saves .msg{margin:6px 0 8px;font-size:12.5px;color:var(--ink2)}
.saves .msg.bad{color:var(--bad);font-weight:800}
.sv{display:grid;grid-template-columns:128px 1fr auto;column-gap:10px;align-items:start;padding:7px;margin:7px 0;border:2px solid var(--line);border-radius:10px;
  background:var(--paper2);cursor:pointer;font-size:12px;line-height:1.4}
.sv:hover{border-color:var(--kraft2);background:#fff}
.sv img,.sv .pic{display:flex;align-items:center;justify-content:center;width:128px;height:72px;object-fit:cover;border:2px solid var(--edge);border-radius:6px;background:var(--kraft);color:#7a5c30}
.sv .pic .ic{width:30px;height:30px}
.sv .sm{min-width:0}
.sv .st{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sv .st b{font-size:14px}.sv .st .mute{font-size:12px;white-space:nowrap}
.sv .del{padding:3px 6px;font-size:12px;border-width:1.5px;box-shadow:0 1px 0 var(--edge)}
.sv.empty{background:none;border-style:dashed}
.sv.empty .pic{background:none;border:2px dashed var(--line)}
.sv.ask{border-color:var(--red);background:#fff;cursor:default}
.sv .q{grid-column:1 / -1;display:flex;align-items:center;gap:6px;margin-top:7px;padding-top:7px;border-top:1.5px dashed var(--line);font-size:12.5px;font-weight:800}
.sv .q span{flex:1}
.sv .q button{padding:6px 10px}
.saves .bk{margin-top:12px;padding-top:8px;border-top:2px solid var(--line)}
.saves .bk small{display:block;margin-bottom:2px}
.saves .bk .msg{margin:2px 0 6px}
.saves .row2{display:flex;gap:8px;margin-top:6px}.saves .row2 button{flex:1;padding:9px}

/* ---------- ways to play: New Game setup, scenarios, medals ---------- */
.more>small{display:block;margin:12px 0 4px}
.more .opt{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:7px 9px;margin:4px 0;border:2px solid var(--line);border-radius:10px;background:var(--paper2);cursor:pointer;font-size:12px}
.more .opt:hover{border-color:var(--kraft2);background:#fff}
.more .opt.on{border-color:var(--red);background:#fdebe4}
.more .opt input{grid-row:span 2;margin:2px 0 0;accent-color:var(--red)}
.more .opt b{font-size:13.5px}
.more .yrs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 2px 11px}
.more .yrs .mute{font-size:12px;margin-right:4px}
.more .yrs button{padding:4px 6px;font-size:12px}
.more .go{display:block;width:100%;margin-top:14px;padding:11px;font-size:15px}
#title .box.saves.fnd{width:660px}
.fnd .fc{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;margin:10px 0 4px;padding:10px 12px 12px;border:2px solid var(--line);border-radius:12px;background:var(--paper2)}
.fnd .fc canvas{grid-row:span 1;width:88px;height:124px;image-rendering:pixelated;align-self:center;background:var(--paper3);border-radius:10px}
.fnd .fc>small,.fnd .fc>.fchs{grid-column:1/-1}
.fnd .fc>small{display:block;margin:10px 0 3px}
.fnd .fi small{display:block;letter-spacing:.08em;color:var(--ink2);font-weight:800}
.fnd .fi .mute{font-size:12.5px;margin:1px 0 6px}
.fnd .nm{display:flex;gap:6px}
.fnd .nm input{flex:1;min-width:0;font:800 16px "Nunito","Segoe UI",system-ui;padding:6px 9px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.fnd .nm input:focus{outline:none;border-color:var(--red)}
.fnd .tg{display:flex;gap:6px;margin-top:7px}
.fnd .tg button{padding:5px 10px;font-size:12.5px}
.fnd .fchs{display:flex;flex-wrap:wrap;gap:4px}
.fnd .fch{padding:4px 9px;font-size:12px;border-radius:14px}
.fnd .fch.on,.fnd .tg .fch.on{background:var(--red);border-color:var(--red);color:#fff}
.more .sv .pic{font:900 26px "Nunito","Segoe UI",system-ui;color:#5b4222;letter-spacing:.5px}
.more .sv .st .medal{flex:none}
.medal{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid var(--edge);vertical-align:-3px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.5)}
.medal.m1{background:#c47c43}.medal.m2{background:#c3c8cf}.medal.m3{background:var(--gold)}
.medal.big{width:56px;height:56px;border-width:3px;flex:none;box-shadow:inset 0 0 0 5px rgba(255,255,255,.28),inset 0 -5px 0 rgba(0,0,0,.18),0 3px 0 rgba(59,47,37,.3)}
#goal .scen{padding-bottom:7px;margin-bottom:7px;border-bottom:1px dashed var(--line)}
#goal .scen small{color:var(--red2)}
#goal .lv .tag{margin:0;font-size:12px}
#scard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.4deg);width:430px;max-width:calc((100vw - 32px) / var(--ui));max-height:calc((100vh - 24px) / var(--ui));overflow-y:auto;padding:16px 20px;z-index:27;display:none;zoom:var(--ui);
  background:#f6efdc;color:#2e2718;border:1px solid #cdbf98;border-radius:3px;box-shadow:0 14px 40px rgba(0,0,0,.5);font:13px/1.45 "Courier New",Courier,monospace}
body:has(#scard[style*="block"]) :is(#build,#top){visibility:hidden}   /* the card is up and the game paused: the tray would run under it (round 6, 1920x1080), and a tall card (the demo's end, with its board) over the top bar */
#scard .memo{font:700 12px "Courier New",monospace;letter-spacing:2px;color:#6f6245;border-bottom:1px dashed #cdbf98;padding-bottom:4px;margin-bottom:8px;text-transform:uppercase}
#scard h3{font:700 20px Georgia,serif;margin:0 0 6px;color:#231c10}
#scard p{margin:6px 0 10px}
#scard .rw{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dotted #cdbf98;padding:3px 0}
#scard .rw b{text-align:right}
#scard .md{white-space:nowrap;margin-left:10px}
#scard .won{display:flex;align-items:center;gap:14px;margin:4px 0 10px}
#scard .won h3{font-size:26px;margin:0}
#scard .hb{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#scard .board{border-top:1px dashed #cdbf98;margin:4px 0 10px;padding-top:6px}
#scard .board small{font:700 12px "Courier New",monospace;letter-spacing:2px;color:#6f6245}
#scard .bf{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
#scard .bf input{flex:1 1 140px;min-width:0;font:800 16px "Nunito","Segoe UI",system-ui;padding:6px 9px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
#scard .bf input:focus{outline:none;border-color:var(--red)}
#scard .bf .mute{flex-basis:100%;font-size:12.5px}
#scard .bs{font-size:13px;color:#4a4232;margin:4px 0}
#scard .top{list-style:none;margin:0;padding:0;max-height:210px;overflow-y:auto}
#scard .top li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:3px 2px;border-bottom:1px dotted #cdbf98;font-size:13px}
#scard .top i{font-style:normal;min-width:22px;text-align:right;color:#6f6245}#scard .top b{flex:1 1 6em;min-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#231c10}
#scard .top span{white-space:nowrap;color:#4a4232;margin-left:auto}   /* on a phone, under the name */#scard .top em{font-style:normal;font-size:12px;color:#6f6245;border:1px solid #cdbf98;border-radius:4px;padding:0 4px}#scard .top li.me{background:#f3e3b8;font-weight:800}
#scard .ahead{border-top:1px dashed #cdbf98;margin-top:4px}
#scard .ahead div{display:flex;flex-direction:column;padding:5px 0;border-bottom:1px dotted #cdbf98}
#scard .ahead b{font:700 13px Georgia,serif;color:#231c10}#scard .ahead span{font-size:12.5px;color:#4a4232}
#title h1 .demo{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 8px;border-radius:6px;background:var(--chip);color:var(--chip-ink);font:800 13px/1 "Nunito","Segoe UI",system-ui;letter-spacing:.08em;text-transform:uppercase}
#title .box>button.wish{margin-top:14px}

/* phones: the top bar wraps into rows, panels open below it, the goals sit above the build bar.
   --top-h and --build-h are measured in ui.js */
@media (max-width:720px){
  #title{justify-content:center;align-items:flex-end;padding:0 12px 12px}
  #title .box.saves,#title .box.saves.fnd{position:absolute;top:12px;left:12px;right:12px;width:auto;margin:0;max-height:calc(100vh - 24px)}
  .fnd .nm{flex-wrap:wrap}.fnd .nm input{flex:1 1 120px}
  #title .box.saves .go{position:sticky;bottom:-18px;z-index:2}   /* Start stays in reach under a long panel */
  #title .box.saves .go::before{content:"";position:absolute;left:-18px;right:-18px;bottom:calc(100% + 2px);height:30px;background:linear-gradient(to bottom,transparent,var(--paper) 80%);pointer-events:none}   /* what scrolls under it fades out whole, never half a row of chips */
  #top{flex-wrap:wrap;gap:6px}
  #top .grow{display:none}
  #top .brand{padding:0 10px}#top .brand .nm{display:none}
  #top .hud{flex:1 1 0;min-width:0;flex-wrap:wrap}
  #menu,#top .clock{flex:1 1 100%}
  #top .seg{flex:1 1 30%;padding:4px 8px;border-left:none;border-top:1px dashed var(--line)}
  #top .seg:nth-child(-n+3){border-top:none}
  #top .seg .ic{display:none}
  #top .seg b{font-size:14px}
  #menu{justify-content:space-around}
  #menu .lb{display:none}
  #top .clock{justify-content:space-between}
  #top .when{min-width:0}
  #toasts,#insp,#side{top:calc(var(--top-h) + 20px)}
  #insp,#side{max-height:calc(100vh - var(--top-h) - var(--build-h) - 50px)}
  #toasts{width:calc((100vw - 20px) / var(--ui))}
  #build{left:10px;right:10px;transform:none;max-width:none}
  #goal{bottom:calc(var(--build-h) + 20px);width:min(272px,calc((100vw - 20px) / var(--ui)));max-height:calc(100vh - var(--top-h) - var(--build-h) - 44px);overflow-y:auto}
  body.sided #goal,body.inspd #goal{display:none}           /* one panel at a time on a phone */
  #title.over>.box:not(.saves){visibility:hidden}           /* New Game, Scenarios and Load open in its place */
  #coach{width:calc((100vw - 20px) / var(--ui));bottom:54px!important}   /* on the tab bar, not floating above an empty goal slot */
  #paper{width:calc((100vw - 24px) / var(--ui))}
  #pause{width:calc((100vw - 20px) / var(--ui))}
}

/* ---------- the phone layout (width up to 720 px; the PC layout above is untouched) ----------
   The interface is 1.25 times larger (menu.js), so 13 px text reads at 16. The top strip is two rows (cash, waiting, on time; then
   the date and the speeds) and a line that says what holds things up; the menu is a tab bar along the bottom, Build first; the build
   tray and the goal card are shut until their tab or line is tapped; every panel is one sheet between the strip and the bar. */
.phoneonly{display:none}
@media (max-width:720px){
  .phoneonly{display:flex}
  #top{left:6px;right:6px;top:6px;gap:4px;flex-wrap:wrap}
  #top .brand{padding:0 8px;min-width:36px;justify-content:center}#top .brand .nm{display:none}
  #top .hud{flex:1 1 0;min-width:0;flex-wrap:nowrap}
  #top .seg{flex:1 1 0;padding:4px 6px;border-top:none;border-left:1px dashed var(--line);min-width:0}
  #top .seg:first-child{border-left:none}
  #top .seg:nth-child(2),#top .seg:nth-child(5),#top .seg:nth-child(6){display:none}   /* shipped, reputation and demand are in the Books */
  #top .seg small{font-size:12px}#top .seg b{font-size:15px;white-space:nowrap}
  #top .clock{flex:1 1 100%;padding:2px 8px}
  #top .when small{font-size:12px}#top .when b{font-size:15px}
  #speed button{min-width:36px;min-height:36px;padding:4px 6px}
  #gStrip{flex:1 1 100%;min-height:36px;text-align:left;font:700 14px/1.2 "Nunito","Segoe UI",system-ui;padding:4px 10px;background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* the tab bar */
  #menu{position:fixed;left:0;bottom:0;width:calc(100vw / var(--ui));height:48px;z-index:13;display:flex;flex:none;gap:0;padding:0;overflow-x:auto;overflow-y:hidden;
    background:var(--paper);border:none;border-top:2px solid var(--edge);border-radius:0;box-shadow:0 -3px 8px rgba(0,0,0,.2);scroll-snap-type:x proximity;touch-action:pan-x;scrollbar-width:none}   /* (no grey track under the tabs: the arrows say there is more) */
  #menu button{flex:0 0 58px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px 0;border:none;box-shadow:none;border-radius:0;
    background:none;top:0;scroll-snap-align:start}
  #menu button.on{background:var(--ink);color:var(--chip-ink)}
  /* the bar scrolls: the end with more past it fades, under a small arrow */
  #menu::before,#menu::after{content:'';position:sticky;flex:0 0 26px;align-self:stretch;z-index:1;pointer-events:none;display:none;align-items:center;font:900 20px/1 "Nunito",system-ui;color:var(--ink2)}
  #menu::before{left:0;margin-right:-26px;background:linear-gradient(to right,var(--paper) 35%,transparent)}
  #menu::after{right:0;margin-left:-26px;justify-content:flex-end;background:linear-gradient(to left,var(--paper) 35%,transparent)}
  #menu.more-l::before{content:'‹';display:flex}#menu.more-r::after{content:'›';display:flex}
  #menu.more-r.news-r::after{color:var(--red);background:radial-gradient(circle at 19px 13px,var(--red) 4px,transparent 5px),linear-gradient(to left,var(--paper) 35%,transparent)}
  #menu button.glow{animation:glowin 1s ease-in-out infinite}   /* the bar clips an outer ring */
  #top #menu .lb,#top.tight #menu .lb{display:block!important;font-size:12px;font-weight:800;line-height:1}
  #tCash small,#tOrders small{display:none}   /* the day's profit and the mail are in the Books and the Flow */
  #menu .ic{width:22px;height:22px}
  #menu .badge{position:absolute;top:2px;right:10px}
  #menu button.sq{flex-basis:50px}#menu button.sq .lb{display:none}
  /* the build tray and the goal card: shut until asked for, then a sheet above the bar */
  #build{display:none;left:6px;right:6px;bottom:48px;transform:none;max-width:none}
  body.buildOpen #build{display:block}
  #tabs button{min-height:36px;padding:6px 12px}
  #items{max-width:none}
  .item{width:96px;min-height:96px}
  #goal{display:none;left:6px;right:6px;top:calc(var(--top-h) + 8px);bottom:auto;width:auto;max-height:calc(100vh / var(--ui) - var(--top-h) - 60px);overflow-y:auto}
  body.goalOpen #goal{display:block}
  body.sided #goal,body.inspd #goal{display:none}
  body.sided #build,body.inspd #build{display:none}
  #mini{visibility:hidden;pointer-events:none;background:none;border:none;box-shadow:none}
  #mini .turnv{visibility:visible;pointer-events:auto;position:fixed;top:auto;bottom:calc(48px + 10px);width:36px;height:36px;padding:6px;box-shadow:var(--shadow)}   /* the minimap is gone; turning the view stays, two thumbs' width apart */
  #mini .turnv svg{width:22px;height:22px}#mini .turnv.l{left:8px}#mini .turnv.r{right:8px}
  body.buildOpen #mini .turnv,body.sided #mini .turnv,body.inspd #mini .turnv,body.goalOpen #mini .turnv{display:none}
  body:not(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn):has(#coach[style*="block"]) #mini .turnv{visibility:hidden}   /* a whole guide card lies over them: not a sliver of the round button at its edge */
  #sleep button{min-height:46px;padding:8px 18px;font-size:15px}#sleep small{font-size:15px}   /* the night's card is not scaled with the rest: its small print at a phone's size */
  #sClose{min-width:36px}
  /* sheets: one panel between the strip and the bar */
  #side,#insp{left:6px;right:6px;width:auto;top:calc(var(--top-h) + 8px);max-height:calc(100vh / var(--ui) - var(--top-h) - 60px)}
  body.wideside #side{width:auto;max-height:calc(100vh / var(--ui) - var(--top-h) - 60px)}
  #toasts{--undo:0px;top:calc(var(--top-h) + 8px + var(--undo));left:6px;right:auto;width:calc((100vw - 12px) / var(--ui))}
  body:where(:not(.sided,.inspd,.goalOpen)) #toasts{z-index:16}   /* over the top bar (below), not under it */
  body.undoable:where(:not(.sided,.inspd,.goalOpen)) #toasts{--undo:50px}   /* news comes in under Undo, not over it */
  /* touch targets: 44 px at this scale */
  #side button,#insp button,#goal button:not(.link),#coach button,#hap button,#rmemo button,#paper button,#pause button,#closing button,#title .box button,#scard button,.hb button{min-height:36px;padding-top:8px;padding-bottom:8px}
  #insp #iAt{margin:-9px -4px;padding-left:4px;padding-right:4px}   /* "At the Mail Desk": a finger's height to tap (45 px), in a line no taller than its words */
  #title .yrs button,#tJump button{min-height:36px;min-width:52px}
  /* the Catalog's product rows: the name on a line of its own, the numbers under it */
  .prod{font-size:14px}
  .prod.hd{display:none}
  .prod input{width:20px;height:20px}
  #title .box.saves,#title .box.saves.fnd{max-height:calc((100vh - 24px) / var(--ui));overflow-y:auto}   /* the zoom scales a max-height too */
  #paper{left:6px!important;top:6px!important;margin-top:0!important;transform:none!important;max-height:calc((100vh - 12px) / var(--ui));overflow-y:auto}   /* the front page: a sheet that scrolls, not a card centred past the screen's edge */
  #paper .pb{position:sticky;bottom:-18px;margin-bottom:-18px;margin-top:22px;padding:6px 0 18px;background:#f1e9d2;box-shadow:0 0 0 2px #f1e9d2}   /* Frame it stays in reach under a long story (and its fade lies on the gap, not on the last line, once scrolled down); the 2 px round it cover the half pixel at its edges, where a letter of the story showed through as a dot */
  #paper .pb::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;background:linear-gradient(to bottom,transparent,#f1e9d2);pointer-events:none}
  /* memos and the front page: one sheet under the strip, scrolling if it is long */
  #hap,#rmemo{left:6px;right:6px;top:calc(var(--top-h) + 8px);width:auto;max-width:none;transform:none;max-height:calc(100vh / var(--ui) - var(--top-h) - 12px);overflow-y:auto}
  #hap .hb,#rmemo .hb{position:sticky;bottom:-14px;margin-bottom:-14px;margin-top:16px;padding:8px 0 14px;background:#f6efdc;box-shadow:0 -10px 10px -6px #f6efdc}   /* the choices stay in reach under a long memo (its fade on the gap, not the last line) */
}
@media (max-width:720px){
  body.sided #gStrip,body.inspd #gStrip{display:none}   /* a sheet is open: its room matters more than the line that opens it */
}
#toolX,#inspX,#undoX,#turnX{display:none}
@media (max-width:720px){
  #title{padding-left:0;justify-content:center;align-items:flex-start;overflow-y:auto}
  #title .box:not(.saves){width:calc((100vw - 16px) / var(--ui));max-height:calc((100vh - 16px) / var(--ui));overflow-y:auto;margin-top:8px;transform:none}   /* the card is a sheet that scrolls, never taller than the screen */
  #closing{left:6px;top:calc(var(--top-h) + 8px);transform:none;min-width:0;max-width:none;width:calc((100vw - 12px) / var(--ui))}   /* under the strip: the clock and the speeds stay in reach */
  #closing .nums{flex-wrap:wrap;gap:4px 14px}
  body:is(.sided,.inspd,.goalOpen) #closing{display:none!important}   /* a sheet is open: Closing waits under it, and is back when the sheet shuts */
  #side .tog{flex-wrap:wrap;width:auto!important;max-width:100%}
  #side .tog button{flex:1 1 auto}
  #side .tiles{grid-template-columns:repeat(2,1fr)}
  #side table.pl{display:block;max-width:100%;overflow-x:auto}   /* wider than the sheet: it scrolls sideways */
  .chart text,.chart text.none{font-size:12px}
  .fnd .nm button{flex:0 0 auto;white-space:nowrap}
  .fnd .fc{grid-template-columns:minmax(0,1fr);padding:10px}
  .fnd .fc canvas{width:66px;height:94px;justify-self:start;margin-bottom:6px}
  .fnd .tg{flex-wrap:wrap}
  body.tooling:not(.sided):not(.inspd) #toolX{display:block;position:fixed;z-index:12;right:8px;top:calc(var(--top-h) + 8px);min-height:44px;padding:6px 14px;font-size:15px;zoom:var(--ui)}
  body.tooling:has(#coach[style*="block"]) #toolX{top:calc(var(--top-h) + 52px)}
  /* Undo: where Put it down is, or under it when a tool is in hand; both a line lower when the guide strip is docked */
  #undoX{--row:0px;--dock:0px}
  body.tooling #undoX{--row:50px}
  body.tooling.turning #undoX{--row:100px}   /* a piece that can be turned: Turn sits under Put it down, Undo under Turn */
  body:is(.buildOpen,.tooling,.handsOn):not(.coachOpen):has(#coach[style*="block"]) :is(#undoX,#turnX){--dock:44px}
  body.undoable:not(.sided):not(.inspd):not(.goalOpen) #undoX{display:block;position:fixed;z-index:12;right:8px;top:calc(var(--top-h) + 8px + var(--row) + var(--dock));min-height:44px;padding:6px 14px;font-size:15px;zoom:var(--ui)}
  #turnX{--dock:0px}
  body.tooling.turning:not(.sided,.inspd,.goalOpen) #items .item.turn{display:none}   /* the Turn button is up: one Turn, not two */
  body.tooling.turning:not(.sided):not(.inspd):not(.goalOpen) #turnX{display:block;position:fixed;z-index:12;right:8px;top:calc(var(--top-h) + 58px + var(--dock));min-height:44px;padding:6px 14px;font-size:15px;zoom:var(--ui)}   /* a finger has no R key, and the tray's Turn is a tray away */
  body.inspd #inspX{display:block;position:fixed;z-index:11;right:14px;top:calc(var(--top-h) + 16px);width:36px;height:36px;padding:0;zoom:var(--ui)}
  body.inspd:not(.coachOpen):has(#coach[style*="block"]) #inspX{top:calc(var(--top-h) + 58px)}
  #insp>:first-child{padding-right:44px}
  /* round 16's report: the title's sound switch is on the first screen (it stays at the card's foot), and the years take two rows */
  #tJump{display:grid;grid-template-columns:repeat(4,1fr)}
  #title #tJump button{min-width:0;padding-left:0;padding-right:0}
  #title .box>button.snd{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 12px -4px var(--paper),0 3px 0 var(--edge)}
  @media (max-height:700px){   /* a short phone: the card is closed up until the switch clears the years */
    #title .box:not(.saves){padding-top:18px}#title h1{font-size:40px}#title p{margin-bottom:10px}#title .jump{margin-top:10px}#title .box>button.snd{margin-top:8px}
    #title .box:has(#tCont[style*="block"]) p{display:none}   /* with a game to continue the line under the name makes room for it */
    #title .box>.ver:not(#tVer){display:none}#title #tVer{margin-top:32px}   /* the card ends on the switch: no line cut through by its foot (the version is a scroll down) */
  }
  /* news never lies over a card being read or the floor being built on, nor over the cash while the player decides: with the tray, a piece in hand or Closing time up it waits (ui.js), and what was up stays out of sight. With a guide or a visitor's card up it lies over the cash row, one piece at a time, in two lines, for 4 s (a letter or a new era 7 s), and goes at any tap elsewhere; the clock stays in sight. A tap on news opens what it names */
  body:is(.buildOpen,.tooling):where(:not(.sided,.inspd,.goalOpen)) #toasts,body:has(#closing[style*="block"]) #toasts{visibility:hidden}
  body:has(#coach[style*="block"]):where(:not(.sided,.inspd,.goalOpen,.buildOpen,.tooling)) #toasts{top:6px}
  body:has(#coach[style*="block"]):where(:not(.sided,.inspd,.goalOpen,.buildOpen,.tooling)) #toasts .toast{padding-top:3px;padding-bottom:3px}
  body:has(#coach[style*="block"]):where(:not(.sided,.inspd,.goalOpen,.buildOpen,.tooling)) #toasts .toast:not(:first-child){display:none}
  #toasts .toast{pointer-events:auto;cursor:pointer}
  body:has(#top .seg.glow):has(#coach[style*="block"]) #toasts{visibility:hidden}   /* a guide pointing at the cash row: news shown a moment before it came goes out of its way (round 18: "Framed." over the Waiting box "Paid!" glowed) */
  body:is(:has(#hap[style*="block"]),:has(#rmemo[style*="block"])) #coach{display:none!important}   /* one panel at a time: a memo, then the guide (round 18: Mrs. Ferraro over the Night Shift guide filled the screen) */
  @media (max-height:700px){   /* a short phone: the floor first. With the tray open and a tool in hand too no floor shows, so the hint goes and Undo takes its place */
    body:not(.glowLine):has(#coach[style*="block"]) #gStrip{display:none!important}   /* a guide or a visitor is the one thing to follow: the goal line's room goes to the floor, unless the card points at the line */
    #tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#tabs button{flex:none}   /* the tray's tabs in one row that scrolls, not two */
    body.buildOpen:not(.coachOpen) #coach{display:none!important}   /* the tray open: the guide's strip steps aside (the tray glows what to pick) */
    body.buildOpen:not(.coachOpen):has(#coach[style*="block"]) :is(#undoX,#turnX){--dock:0px}
    body.tooling.buildOpen:not(.coachOpen):has(#coach[style*="block"]) #toolX{top:calc(var(--top-h) + 8px)}
    body.tooling.buildOpen #hint{display:none!important}
    body.buildOpen #closing{display:none!important}   /* the tray opened under Closing time: the card would lie over its tabs, so it waits as it does under a sheet */
    #coach:not(.untitled) .ch{display:none}#coach{padding-top:8px;padding-bottom:8px}body #coach .cf{bottom:-8px;margin-bottom:-8px;padding-bottom:8px}#coach .ct{line-height:1.4}   /* a titled card closes up: the kicker row goes (Skip sits by the buttons) */
    #coach .pic{max-height:46px}   /* a visitor's card (picture, quote, text, a try-out) fits whole: it was 15 px too tall */
    body.tooling.buildOpen #undoX{--row:0px}
    body.tooling.buildOpen #turnX{display:none!important}   /* (the tray's own Turn is the first tile in it) */
    body.tooling.buildOpen #items .item.turn{display:block!important}
    body.tooling.buildOpen.undoable:not(.sided):not(.inspd):not(.goalOpen) #undoX{left:6px;right:auto}
  }
  /* from a week of play at 360x640 */
  .note.lodge{border-top-width:44px}.note.lodge .lh{top:-40px;padding:0 30px;line-height:1.3;font-size:12px}.note.lodge .tack{top:-28px}   /* the lodge's banner: room for its two lines */
  .prod{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;position:relative;padding:6px 8px 6px 58px}
  .prod>input{position:absolute;left:8px;top:8px}.prod>i{position:absolute;left:38px;top:12px}
  .prod>.pn,.prod>.mute{flex:1 1 100%}
  .prod>.pd:empty,.prod>.ps:empty,.prod>.pr:empty,.prod>.pd:has(.mute){display:none}
  .prod>.pd::after{content:' a day';font-weight:600;color:var(--ink2)}.prod>.ps::after{content:' in stock';font-weight:600;color:var(--ink2)}
  .crew{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;row-gap:2px}   /* who and what they earn, then their roles, then their shift: each on its own line */
  .crew .cm,.crew .cr{display:contents}.crew canvas{grid-row:1 / span 2}.crew .cm>div:first-child{grid-column:2;grid-row:1 / span 2}
  .crew .cr>b{grid-column:3;grid-row:1;text-align:right}.crew .cr>.mute{grid-column:3;grid-row:2;text-align:right}
  .crew .cm>.roles{grid-column:1 / -1;grid-row:3}
  .crew .cr>button{grid-column:1 / -1;grid-row:4;justify-self:end}
  .crew.watch canvas{grid-row:1 / span 3}.crew.watch .cm>div:first-child{display:contents}.crew.watch .cm>div:first-child>b{grid-column:2;grid-row:1}.crew.watch .cm>div:first-child>.mute{grid-column:2 / -1;grid-row:2}.crew.watch .cm>.mute{grid-column:2 / -1;grid-row:3}.crew.watch .cr>div{grid-column:1 / -1;grid-row:4;justify-self:end}   /* the night watchman: his name beside his pay, then what he is and his note each across the row, Hire under that (they had no place, and lay on his name) */
  #side{overflow-x:hidden}#side .crewt{overflow-x:auto}#side .crewt .chead{position:static}#side .crewt .chead,#side .crewt .crow{width:max-content;min-width:100%}   /* the wide table scrolls inside the sheet, not the sheet with it */
  #coach{max-height:calc(100vh / var(--ui) - var(--top-h) - 62px);overflow-y:auto}   /* a tall card stops under the strip and scrolls; its buttons stay in reach */
  #coach .cf{position:sticky;bottom:-12px;margin-bottom:-12px;padding:6px 0 12px;background:var(--paper)}
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])):not(.coachOpen):has(#coach[style*="block"]) #closing{top:calc(var(--top-h) + 52px)}
  #hint{white-space:normal;left:6px!important;top:calc((var(--top-h) + 8px) * var(--ui))!important;max-width:calc(100vw - 166px)}   /* beside Put it down, not under the finger */
  body:has(#coach[style*="block"]):not(.coachOpen) #hint{top:calc((var(--top-h) + 52px) * var(--ui))!important}
  /* (Closing time counts as a sheet here: its buttons must not sit under the guide card) */
  /* the guide card gives way: with the tray or a sheet open it docks as a one-line strip under the top bar, and a tap opens it */
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])):not(.coachOpen):has(#coach[style*="block"]) #coach{left:6px!important;right:6px;top:calc(var(--top-h) + 6px)!important;bottom:auto!important;width:auto;padding:4px 10px;min-height:36px;margin:0!important;cursor:pointer;overflow:hidden}
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])):not(.coachOpen):has(#coach[style*="block"]) #coach :is(.ch,.ct,.cf,.try,.say,.pic){display:none}
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])):not(.coachOpen):has(#coach[style*="block"]) #coach .ctop{display:flex;margin:0;min-height:28px}
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])):not(.coachOpen):has(#coach[style*="block"]) #coach .ctop b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line whatever its name: what sits under the strip counts on its height */
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])):not(.coachOpen):has(#coach[style*="block"]) #coach .ctop::after{content:"tap for the step";margin-left:auto;flex:none;white-space:nowrap;font:700 12px "Nunito",system-ui;color:#85590a}
  body:is(.buildOpen,.sided,.inspd,.goalOpen,.tooling,.handsOn,:has(#closing[style*="block"])).coachOpen #coach{top:calc(var(--top-h) + 6px)!important;bottom:auto!important;left:6px!important;max-height:calc(100vh / var(--ui) - var(--top-h) - 60px);overflow-y:auto}
  body:is(.sided,.inspd,.goalOpen):not(.coachOpen):has(#coach[style*="block"]) :is(#side,#insp,#goal){top:calc(var(--top-h) + 50px);max-height:calc(100vh / var(--ui) - var(--top-h) - 100px)}
}
@media (max-width:440px){   /* 360 to 412 wide: the date on one line, the speeds on the next, each button a full thumb */
  #top .when small{display:none}
  #top .clock{flex-wrap:wrap;row-gap:2px}
  #top .when{flex:1 1 100%;flex-direction:row;align-items:baseline;gap:8px}
  #speed{flex:1 1 100%;display:flex}
  #speed button{flex:1 1 0}
}