:root{
  --surface-1:#fcfcfb; --page:#f4f5f3; --panel:#fff;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --good:#0ca30c; --warn:#fab219; --crit:#d03b3b; --good-ink:#006300;
  --navy:#11253c; --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--page);color:var(--ink-1);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--s1)}
[hidden]{display:none !important}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(150deg,#11253c,#1d3d5e)}
.login .box{background:#fff;border-radius:16px;padding:30px;width:min(400px,100%);
  box-shadow:0 22px 60px rgba(0,0,0,.3)}
.login h1{margin:0 0 4px;font-size:21px;letter-spacing:-.02em}
.login p.sub{margin:0 0 22px;color:var(--ink-3);font-size:13px}
.login .demo{margin-top:20px;padding-top:16px;border-top:1px solid var(--grid);font-size:12px;color:var(--ink-2)}
.login .demo b{display:block;margin-bottom:6px;color:var(--ink-1)}
.login .demo button{background:none;border:0;padding:2px 0;color:var(--s1);font-size:12px;display:block;text-align:left}
.err{background:#fdeded;border:1px solid #f2c2c2;color:#a52020;padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:14px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.side{background:var(--navy);color:#dfe7ef;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(150deg,#4aa3f0,#2a78d6);
  display:grid;place-items:center;font-size:15px}
.brand b{font-size:15px;letter-spacing:-.01em}
.brand small{display:block;font-size:10.5px;color:#7f97b0;font-weight:400}
.nav{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:#b9c8d8;
  border:0;background:none;width:100%;text-align:left;font-size:13.5px}
.nav:hover{background:#1b344f;color:#fff}
.nav.on{background:var(--s1);color:#fff;font-weight:600}
.nav .ic{width:17px;text-align:center}
.nav .badge{margin-left:auto;background:var(--crit);color:#fff;border-radius:9px;padding:0 6px;
  font-size:10.5px;font-weight:700;line-height:16px}
.nav .badge.amber{background:var(--warn);color:#4a3400}
.side .sep{height:1px;background:#22405e;margin:10px 6px}
/* Section headings. Quiet enough to scan past, present enough to navigate by. */
.navsec{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#6d86a0;
  font-weight:700;padding:14px 10px 5px;margin-top:4px;border-top:1px solid #22405e}
.navsec:first-child{border-top:0;margin-top:0;padding-top:4px}
/* The brand is the way home, so it has to look like something you can press. */
.brand{border:0;background:none;width:100%;cursor:pointer;text-align:left;border-radius:8px}
.brand:hover{background:#1b344f}
.brand.on{background:var(--s1)}
.brand.on small{color:#dbeaff}
.brand:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.side .who{margin-top:auto;padding:12px 10px 4px;border-top:1px solid #22405e;font-size:11.5px;color:#7f97b0}
.side .who b{color:#dfe7ef;display:block;font-size:12.5px}
.side .who button{margin-top:8px;background:none;border:1px solid #33526f;color:#b9c8d8;
  border-radius:7px;padding:4px 9px;font-size:11.5px}
.side .who button:hover{background:#1b344f;color:#fff}
.adhoc-launch{width:100%;margin:0 0 12px;padding:9px 10px;border:1px solid #3d6fa5;border-radius:8px;
  background:linear-gradient(160deg,#2f5f92,#254a73);color:#fff;font-size:13px;font-weight:600;text-align:left}
.adhoc-launch:hover{background:linear-gradient(160deg,#3a719f,#2b5680)}
/* The second launcher sits tight under the first: they are a pair, not a list. */
#adhocLaunch{margin-bottom:6px}

/* min-width:0 is not cosmetic. A grid item defaults to min-width:auto, which
   means a wide table refuses to shrink and pushes the whole page sideways
   instead of scrolling inside its own box — so the office scrolls the entire
   screen to read one column. Found by measuring at 1280px, not by eye. */
.main{padding:20px 24px 60px;max-width:1600px;min-width:0}
.top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.top h1{margin:0;font-size:21px;letter-spacing:-.02em}
.top p{margin:3px 0 0;color:var(--ink-2);font-size:13px}
.top .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.btn{border:1px solid var(--ring);background:#fff;padding:7px 12px;border-radius:8px;font-size:13px;color:var(--ink-1)}
.btn:hover{background:#f4f5f3}
.btn.pri{background:var(--s1);border-color:var(--s1);color:#fff;font-weight:600}
.btn.pri:hover{background:#256abf}
.btn.dan{border-color:#e8b6b6;color:var(--crit)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%;justify-content:center;text-align:center}

.card{background:var(--panel);border:1px solid var(--ring);border-radius:var(--r);padding:15px}
.card h3{margin:0 0 3px;font-size:13.5px;letter-spacing:-.01em}
.card .sub{color:var(--ink-3);font-size:11.5px;margin-bottom:12px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
/* Five tiles across the top of Live operations. Wraps to two, then one, on the
   same breakpoints as g4, so a laptop never gets five squeezed columns. */
.g5{grid-template-columns:repeat(5,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
/* Six on Live operations since the revenue tile (1.58.0), seven since profit (1.64.0). */
.g6{grid-template-columns:repeat(6,1fr)}
.g7{grid-template-columns:repeat(7,1fr)}

/**
 * THE PROCESS BOARD — five stage columns that fit a laptop (Matt, 25 September:
 * *"on a standard laptop screen it needs to sort of stack… I'd rather we just
 * skinny it up and fit it all on one page"*).
 *
 * The trick is not narrower columns, it is shorter ones: each column scrolls
 * INSIDE itself, so a pile of forty in one stage cannot push the other four off
 * the bottom of the screen. `minmax(0,1fr)` rather than `1fr` because a grid
 * item defaults to min-width:auto and one long customer name would otherwise
 * widen its column and shove the rest sideways.
 */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;align-items:start}
.board .col{background:#fff;border:1px solid var(--ring);border-radius:11px;padding:8px 8px 4px;
  min-width:0;display:flex;flex-direction:column;max-height:calc(100vh - 250px)}
.board .colhead{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:1px 2px 7px;font-size:12px;font-weight:700;line-height:1.25}
.board .colhead .n{flex:none;font-size:11px;font-weight:700;background:#eef1f5;color:var(--ink-2);
  border-radius:20px;padding:1px 7px}
.board .colbody{overflow-y:auto;min-height:0;margin:0 -2px;padding:0 2px 4px}
.board .colbody::-webkit-scrollbar{width:6px}
.board .colbody::-webkit-scrollbar-thumb{background:#d3dae2;border-radius:3px}
/* A card built for a 260px column: no wasted padding, nothing that wraps twice. */
.bcard{border:1px solid var(--ring);border-radius:9px;padding:7px 8px;margin-bottom:6px;background:#fff}
.bcard b{font-size:12.5px;line-height:1.3;display:block;word-break:break-word}
.bcard .m{font-size:10.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.bcard .tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.bcard .tags .pill{font-size:9.5px;padding:1px 6px}
.bcard .acts{display:flex;gap:4px;margin-top:6px}
.bcard .acts .btn{flex:1;font-size:11px;padding:3px 4px;min-width:0}
@media(max-width:1200px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .board .col{max-height:none}}
@media(max-width:820px){.board{grid-template-columns:1fr}}

@media(max-width:1600px){.g7{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1400px){.g5,.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1150px){.g4,.g5,.g6,.g7{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
@media(max-width:760px){.app{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;position:sticky;top:0;z-index:20}
  .side .who,.brand{width:100%}.g4,.g5,.g6,.g7{grid-template-columns:1fr}.main{padding:14px}}

.tile{background:var(--panel);border:1px solid var(--ring);border-radius:var(--r);padding:13px 15px}
/* A tile that is also a button. It must look identical to the ones that are
   not, or the row reads as five different kinds of thing — so the browser's
   own button styling is undone rather than added to. */
button.tile{width:100%;font:inherit;color:inherit;display:block}
button.tile:hover{border-color:var(--s1)}
.tile .lab{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.tile .val{font-size:27px;font-weight:650;letter-spacing:-.03em;margin-top:5px;line-height:1}
.tile .note{font-size:11.5px;color:var(--ink-2);margin-top:5px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  font-weight:600;padding:0 10px 7px;border-bottom:1px solid var(--grid);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #f0efec;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click:hover{background:#f7f9fb;cursor:pointer}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tblwrap{overflow-x:auto}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;
  border-radius:20px;border:1px solid var(--ring);background:#f7f7f5;color:var(--ink-2);white-space:nowrap}
.pill.good{background:#eaf7ea;border-color:#bfe4bf;color:#046104}
.pill.warn{background:#fef5e0;border-color:#f2ddab;color:#7a5600}
.pill.crit{background:#fdeded;border-color:#f2c2c2;color:#a52020}
.pill.info{background:#eaf2fd;border-color:#c2d9f6;color:#1b5399}
/* Booked by a regular delivery, not yet delivered — a different orange from
   .warn, so it reads as "in hand" rather than "needs doing". */
.pill.regular{background:#fff0e3;border-color:#f5c9a0;color:#9a4300}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

.bu{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:5px;border:1px solid}
.bu.FSW{background:#eaf2fd;border-color:#c2d9f6;color:#1b5399}
.bu.DPW{background:#fdf0e9;border-color:#f7cdb6;color:#9c4415}
.bu.WAD{background:#e8f7f1;border-color:#b5e4d1;color:#0a6a49}
.bu.PWG{background:#f0eefa;border-color:#cfc8ee;color:#3b2e86}

.bar{height:7px;border-radius:4px;background:#eceae4;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--s1);border-radius:4px}
.bar>i.warn{background:var(--warn)} .bar>i.crit{background:var(--crit)}

/* Both of these wrap. They did not, which is how the Archive button ended up
   hanging 44px outside its card on a laptop: a card header puts a title
   opposite a row of five buttons, and with no wrapping the buttons simply went
   over the edge. Wrapping is what should happen when the room runs out. */
.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.muted{color:var(--ink-3)} .small{font-size:12px} .xs{font-size:11px}
hr.hair{border:0;border-top:1px solid #f0efec;margin:12px 0}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:11.5px;padding:2px 8px;border-radius:6px;background:#eef1f5;border:1px solid var(--ring);color:var(--ink-2)}

.tabs{display:flex;gap:3px;border-bottom:1px solid var(--grid);margin-bottom:14px;flex-wrap:wrap}
.tab{border:0;background:none;padding:8px 12px;font-size:13px;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--s1);border-bottom-color:var(--s1);font-weight:600}

.stop{border:1px solid var(--ring);border-radius:8px;padding:9px 11px;margin-bottom:7px;background:#fff;font-size:12.5px}
.stop.done{background:#f6faf6;border-color:#d3e9d3}
.stop.fail{background:#fdf6f6;border-color:#eecfcf}
.stop .seq{width:20px;height:20px;border-radius:6px;background:#eef1f5;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--ink-2);flex:none}
.stop.done .seq{background:var(--good);color:#fff}
.stop.fail .seq{background:var(--crit);color:#fff}
.stop[draggable=true]{cursor:grab}
.stop.drag{opacity:.4}
.rounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.rounds .card.over{outline:2px solid var(--s1);outline-offset:2px}
.drop{border:1.5px dashed #c9cfd6;border-radius:8px;padding:9px;text-align:center;color:var(--ink-3);font-size:12px}

.drawer{position:fixed;top:0;right:0;width:min(580px,96vw);height:100dvh;background:#fff;
  border-left:1px solid var(--ring);box-shadow:-10px 0 40px rgba(11,11,11,.14);z-index:50;display:flex;flex-direction:column}
.drawer header{padding:15px 18px;border-bottom:1px solid var(--grid);display:flex;align-items:flex-start;gap:10px}
.drawer .body{padding:16px 18px;overflow-y:auto;flex:1}
.scrim{position:fixed;inset:0;background:rgba(11,11,11,.28);z-index:49}

.modal{position:fixed;inset:0;background:rgba(11,11,11,.34);z-index:60;display:grid;place-items:center;padding:16px}
.modal .box{background:#fff;border-radius:14px;width:min(720px,100%);max-height:92dvh;overflow:auto;
  box-shadow:0 20px 60px rgba(11,11,11,.3)}
.modal header{padding:16px 20px;border-bottom:1px solid var(--grid)}
.modal .mbody{padding:18px 20px}
.modal footer{padding:14px 20px;border-top:1px solid var(--grid);display:flex;gap:8px;justify-content:flex-end;
  position:sticky;bottom:0;background:#fff}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:600px){.fieldrow{grid-template-columns:1fr}}
label.f{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.04em}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  border:1px solid var(--ring);border-radius:8px;padding:8px 10px;font-size:13px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #b7d3f6;outline-offset:-1px;border-color:var(--s1)}
.seg{display:inline-flex;border:1px solid var(--ring);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:6px 12px;font-size:12.5px;color:var(--ink-2);border-right:1px solid var(--ring)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--s1);color:#fff;font-weight:600}
.slider{width:100%;accent-color:var(--s1)}

.banner{background:#eaf2fd;border:1px solid #c2d9f6;color:#1b5399;padding:9px 13px;border-radius:9px;
  font-size:12.5px;margin-bottom:14px}
.banner.warn{background:#fef5e0;border-color:#f2ddab;color:#7a5600}
.banner.crit{background:#fdeded;border-color:#f2c2c2;color:#a52020}
.tl{border-left:2px solid var(--grid);margin-left:5px;padding-left:14px}
.tl .ev{position:relative;padding-bottom:13px}
.tl .ev:before{content:"";position:absolute;left:-20px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--s1);border:2px solid #fff}
.tl .ev.g:before{background:var(--good)} .tl .ev.r:before{background:var(--crit)} .tl .ev.o:before{background:var(--s2)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:5px 12px;font-size:13px}
.kv dt{color:var(--ink-3);font-size:12px}
.kv dd{margin:0}
.pos{color:var(--good-ink);font-weight:600}
.neg{color:var(--crit);font-weight:600}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:13px;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:min(560px,92vw)}
.toast.err{background:#8f1f1f}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--ring);border-top-color:var(--s1);
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- maps (public/map.js — OpenStreetMap tiles, no library) ---------- */
.mapwrap{position:relative;overflow:hidden;border:1px solid var(--grid);border-radius:var(--r);
  background:repeating-linear-gradient(0deg,#f0efe9,#f0efe9 1px,#f7f6f1 1px,#f7f6f1 22px),
             repeating-linear-gradient(90deg,#f0efe9,#f0efe9 1px,#f7f6f1 1px,#f7f6f1 22px)}
.mapcanvas{position:absolute;inset:0;cursor:grab;touch-action:none;user-select:none}
.mtile{position:absolute;width:256px;height:256px;pointer-events:none}
.mline{position:absolute;left:0;top:0;pointer-events:none}
.mpin{position:absolute;transform:translate(-50%,-50%);min-width:22px;height:22px;padding:0 5px;
  border:0;border-radius:11px;font:700 11px/22px system-ui,sans-serif;text-align:center}
.mpin:hover{filter:brightness(1.12)}
.mappop{position:absolute;transform:translate(-50%,-100%);background:#0b0b0b;color:#fff;
  padding:6px 9px;border-radius:7px;font-size:12px;max-width:220px;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:3}
.mappop .muted{color:#c9c7c1}
.mapctl{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px;z-index:2}
.mapctl button{width:28px;height:28px;border:1px solid var(--grid);background:#fff;border-radius:7px;
  font-size:15px;line-height:1;color:var(--ink-1);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mapattr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.82);font-size:10px;
  padding:1px 6px;border-top-left-radius:6px;color:var(--ink-2);z-index:2}
.mapattr a{color:var(--ink-2)}
.mapoffline{position:absolute;left:8px;bottom:8px;background:#fff6e0;border:1px solid #f0dca8;
  color:#7a5600;font-size:11px;padding:5px 9px;border-radius:7px;max-width:280px;z-index:2}
.mapempty{border:1px dashed var(--axis);border-radius:var(--r);padding:16px;text-align:center;
  color:var(--ink-3);font-size:12.5px}
.maplegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--ink-2)}
.maplegend i{display:inline-block;width:10px;height:10px;border-radius:5px;margin-right:5px;
  vertical-align:baseline}

/* A day in a round's diary. A button rather than a row, because the whole
   thing is the target — on a laptop trackpad a 12px date link is a miss. */
.dayrow{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--ring);padding:9px 8px;cursor:pointer;border-radius:6px}
.dayrow:hover{background:var(--hover,#f4f6f9)}
.dayrow.on{background:#eaf2fd;box-shadow:inset 2px 0 0 var(--pri,#1b5399)}
.dayrow:last-child{border-bottom:0}

/* A date is one thing and should read as one thing. Nine columns at 1280px was
   breaking "Sat, 29 Aug" over three lines, which is harder to scan than a
   slightly narrower neighbour. */
.nowrap{white-space:nowrap}
/* Below this the ad hoc table stops being readable, so let its own box scroll
   rather than crushing every column. .tblwrap already scrolls; it just needed
   something to scroll. */
#adhocTable{min-width:960px}

/* ---- home: the "needs you" list -------------------------------------------
   Rows rather than tiles. A tile grid implies a fixed set of things and reads
   as a dashboard; these come and go, and on a good day there are none.        */
.homerow{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line,#e3e8ea);background:none;padding:13px 15px;cursor:pointer}
.homerow:last-child{border-bottom:0}
.homerow:hover{background:var(--panel-2,#f7f9fa)}
.homerow .min{flex:1;min-width:0}
.homerow .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px;background:var(--ink-3,#8b9aa6)}
.homerow .dot.bad{background:var(--crit,#d03b3b)}
.homerow .dot.warn{background:var(--warn,#fab219)}
.bar{height:6px;border-radius:4px;background:var(--line,#e3e8ea);overflow:hidden;margin-bottom:3px}
.bar span{display:block;height:100%;background:var(--s1,#2a78d6)}

/* ---- bulk actions on a list ------------------------------------------------
   Sticks to the bottom of the screen while a selection exists, so the count
   and the actions stay reachable however far down the list you have scrolled. */
.bulkbar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;
  background:var(--panel,#fff);border:1px solid var(--line,#e3e8ea);border-radius:10px;
  padding:11px 15px;margin-top:14px;box-shadow:0 -3px 14px rgba(11,11,11,.07)}
.bulkbar .grow{flex:1}
.btn.danger{background:var(--crit,#d03b3b);border-color:var(--crit,#d03b3b);color:#fff}
.btn.danger:hover{filter:brightness(1.08)}

/* ---------------------------------------------------------------- office display
   /display on a monitor on the wall (src/displays.mjs). Same screens as the
   office uses; no sidebar, no buttons — a wall has no mouse — and a thin bar
   saying which screen this is, the time, and whether the figures are fresh. */
/**
 * Needs attention popped out onto a second screen. No sidebar, because this
 * window has one job — and unlike body.display the cursor stays, since somebody
 * is going to be clicking Open and Dismiss all day.
 */
body.popout .side{display:none}
body.popout .app{grid-template-columns:1fr}
body.popout .main{max-width:none;padding:14px 16px 22px}
body.popout .top h1{font-size:19px}
/* A button worth spotting from across a desk, in the accent rather than red:
   red means destructive everywhere else in Hydra and should keep meaning it. */
.btn.lg{font-size:14px;padding:9px 16px;font-weight:650}
.btn.pri.lg{background:var(--s2);border-color:var(--s2)}
.btn.pri.lg:hover{background:#d4541f}

body.display{cursor:none;overflow-x:hidden}
body.display .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
body.display .side{display:none}
body.display .main{max-width:none;padding:16px 22px 24px}
body.display .main *{pointer-events:none}
body.display .main .btn,body.display .main input,body.display .main select,
body.display .main textarea,body.display .main [data-closemodal]{display:none !important}
body.display .toast{display:none}
.dispbar{display:flex;align-items:center;gap:14px;background:var(--navy);color:#dfe7ef;
  padding:8px 22px;font-size:14px}
.dispbar .grow{flex:1}
.dispbar .clock{font-variant-numeric:tabular-nums;font-weight:600;font-size:16px}
.dispbar .stale{background:#fef5e0;color:#7a5600;border-radius:999px;padding:2px 10px;font-weight:600;font-size:12.5px}
.dispbar .dots{display:inline-flex;gap:5px}
.dispbar .dots i{width:7px;height:7px;border-radius:50%;background:#33526f;display:block}
.dispbar .dots i.on{background:#dfe7ef}
#displayRoot{min-height:100vh;display:grid;place-items:center;background:var(--navy);color:#dfe7ef}
.pairbox{text-align:center;max-width:640px;padding:24px}
.pairbox .mark{font-size:44px}
.pairbox h1{font-size:28px;margin:8px 0 14px;color:#fff}
.pairbox p{font-size:17px;line-height:1.5;color:#b9c8d8}
.pairbox .small{font-size:14px}
.pairbox .code{font-size:84px;font-weight:700;letter-spacing:.12em;color:#fff;margin:22px 0;
  font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
/* The live map is sized for a desk; on the wall it would push every round's
   progress off the bottom of a screen nobody can scroll. */
body.display .mapwrap{height:26vh !important}
body.display .mapctl{display:none}

/* Save buttons that say whether what is on screen has been saved (Matt, 22
   September): orange until pressed, green once saved. */
.btn.unsaved{background:#fff0e0;border-color:#f0a860;color:#8a4300;font-weight:600}
.btn.unsaved:hover{background:#ffe4c7}
.btn.saved{background:#e6f6e6;border-color:#8fcf8f;color:#046104;font-weight:600}

/* A button whose action HAS BEEN DONE (Matt, 7 October): "once an action is
   done, that button that you've pressed to action that is greyed out or changes
   colour… this should be the logic right across the site." He had just imported
   207 customers and the Import button was still lit blue, which reads as
   "press me" on the one action that must not be pressed twice.

   It borrows the green of .saved rather than inventing a third colour, because
   the two mean the same thing to the person reading them. The opacity override
   matters: .btn:disabled drops to .45, which would wash the green out to a
   grey nobody can tell from a button that was never available. */
.btn.done{background:#e6f6e6;border-color:#8fcf8f;color:#046104;font-weight:600}
.btn.done:disabled{opacity:1;cursor:default}
.btn.done:hover{background:#e6f6e6}

/* Live operations round picker (1.62.0) */
.roundpick{position:relative;display:inline-block}
.roundpick>summary{list-style:none;cursor:pointer}
.roundpick>summary::-webkit-details-marker{display:none}
.roundpick-menu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;background:var(--panel);border:1px solid var(--ring);
  border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.12);padding:8px 10px;min-width:230px;max-height:320px;overflow:auto}
.roundpick-menu label{display:block;padding:3px 0;white-space:nowrap}
.seg{display:inline-flex;gap:0}
.seg .btn{border-radius:0}.seg .btn:first-child{border-radius:var(--r) 0 0 var(--r)}.seg .btn:last-child{border-radius:0 var(--r) var(--r) 0}