/* Intermovers OS. The agentec console laws, chapter 09, on a mover's desk.
   State ticks in steps. Space glides on a spring. One amber key per screen. */

@import url("fonts/faces.css");
@import url("brand/tokens.css");

:root{
  /* the shared mute token is metadata only. This concept uses it at body size,
     so it is raised here to clear 4.5 to 1 on ground, panel and raised.
     Measured: 5.24, 5.00, 4.70. */
  --text-mute:#8B8271;
  --mute-quiet:#6E675A;   /* the original, for hairlines and dot leaders only */
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--text);font-family:var(--mono);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100dvh}
::selection{background:#FFB25333;color:var(--text)}
a{color:var(--run);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.prose{font-family:var(--sans);font-size:15.5px;line-height:1.7;color:var(--text-dim);max-width:72ch}
.prose b{color:var(--text);font-weight:600}

/* the dot field, the board's own texture, one layer, quiet.
   No image, no network: the ground is a grid of dots like the logo is. */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,#FFB2530A 1px,transparent 1.4px);
  background-size:var(--cell) var(--cell)}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.08}}
@keyframes landin{0%{opacity:0}100%{opacity:1}}
@keyframes rise{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes glideup{0%{transform:translateY(26px);opacity:0}100%{transform:none;opacity:1}}
@keyframes sweepx{to{transform:translateX(120%)}}
@keyframes colfill{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* ============ the boot, once per session ============ */
#boot{position:fixed;inset:0;z-index:100;background:var(--ground);display:flex;
  align-items:center;justify-content:center;cursor:pointer;padding:24px}
#boot.gone{display:none}
#boot .lines{font-size:14px;line-height:2.1;color:var(--text-dim);min-width:min(460px,88vw)}
#boot .lines div{opacity:0}
#boot .lines div.on{opacity:1}
#boot .lines b{color:var(--text);font-weight:600}
#boot .lines .ok{color:var(--done)}
#boot .lines .am{color:var(--amber)}
#boot .skip{position:fixed;bottom:26px;left:0;right:0;text-align:center;font-size:13px;color:var(--text-mute)}
.cur{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;
  box-shadow:0 0 10px #FFB25399,0 0 26px #FFB25344;animation:blink var(--blink) steps(1) infinite}

/* ============ the frame ============ */
#app{display:none;grid-template-columns:216px 1fr;min-height:100dvh}
#app.on{display:grid}
@media(max-width:940px){#app.on{display:block}}

/* the session line */
#top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 16px;height:54px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ground) 90%,black);
  position:sticky;top:0;z-index:50}
#top .who{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text);flex:none}
#top .who i{font-style:normal;color:var(--amber)}
#top .path{font-size:13px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;display:flex;align-items:center;gap:5px}
#top .path b{color:var(--text);font-weight:600}
#top .gap{flex:1;min-width:6px}
#top .syn{font-size:13px;letter-spacing:.03em;color:var(--amber);white-space:nowrap;flex:none;
  display:flex;align-items:center;gap:7px}
#top .syn i{width:7px;height:7px;border-radius:2px;background:var(--amber);flex:none;
  box-shadow:0 0 7px #FFB253aa,0 0 16px #FFB25355;animation:blink var(--blink) steps(1) infinite}
#top .clk{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;flex:none}
/* the synthetic marker is always visible. On a phone the session line takes a
   second row rather than dropping it. */
@media(max-width:900px){
  #top{height:auto;padding:9px 13px;flex-wrap:wrap;row-gap:5px}
  #top .path{display:none}
  #top .syn{order:3;flex-basis:100%;font-size:13px}
}
@media(max-width:520px){#top{gap:9px;padding:9px 12px}#top .who{font-size:13px}}

/* the rail and the phone key row */
#rail{border-right:1px solid var(--line);padding:14px 10px 20px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:54px;height:calc(100dvh - 54px);overflow-y:auto}
/* 9.5px on the quiet token measured 3.56 against the rail. Both raised. */
#rail .grp{font-size:13px;letter-spacing:.16em;color:var(--text-mute);padding:14px 12px 6px}
.navbtn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:15px;
  color:var(--text-dim);width:100%;text-align:left;min-height:44px;
  transition:background var(--tick) var(--step2),color var(--tick) var(--step2)}
.navbtn .k{color:var(--mute-quiet);font-size:13px;width:16px;flex:none;text-align:center}
.navbtn:hover{background:var(--raised);color:var(--text)}
.navbtn.here{background:var(--raised);color:var(--amber)}
.navbtn.here .k{color:var(--amber)}
.navbtn:focus-visible{outline:none;background:var(--raised);color:var(--text)}
.navbtn:focus-visible::after{content:"";display:inline-block;width:7px;height:14px;background:var(--amber);
  margin-left:auto;box-shadow:0 0 8px #FFB25399;animation:blink var(--blink) steps(1) infinite}
#rail .spacer{flex:1;min-height:12px}
#rail .foot{font-size:13px;color:var(--text-mute);padding:12px;line-height:1.75;border-top:1px solid var(--line)}
#rail .foot svg{display:block;margin-bottom:8px;opacity:.85}

#keys{display:none;position:fixed;bottom:0;left:0;right:0;z-index:52;
  background:color-mix(in srgb,var(--ground) 95%,black);border-top:1px solid var(--line);
  padding:6px 5px calc(6px + env(safe-area-inset-bottom))}
#keys .navbtn{flex-direction:column;gap:3px;padding:6px 2px;font-size:13px;flex:1;align-items:center;
  min-height:48px;justify-content:center}
#keys .navbtn .k{width:auto;font-size:15px}
@media(max-width:940px){#rail{display:none}#keys{display:flex}}

main{padding:24px 26px 120px;max-width:1120px;width:100%;margin:0 auto;min-width:0}
main:focus{outline:none}
@media(max-width:940px){main{padding:18px 14px calc(104px + env(safe-area-inset-bottom))}}

/* the ghost keycap back to the deck */
#deckback{position:fixed;top:64px;right:16px;z-index:49}
@media(max-width:940px){#deckback{top:auto;bottom:calc(70px + env(safe-area-inset-bottom));right:12px}}

/* ============ headings ============ */
.rhead{margin-bottom:20px}
.rhead .eyebrow{font-size:13px;letter-spacing:.18em;color:var(--amber);margin-bottom:8px}
/* the type scale. 40px mono at a laptop, 28px on a phone, so a title is the
   loudest thing on its own screen and a hero number can still beat it. */
.rhead h1{font-size:clamp(28px,2.9vw,40px);line-height:1.15;overflow-wrap:break-word}
.rhead h1 .d{color:var(--amber);text-shadow:0 0 12px #FFB25366}
.rhead .lede{margin-top:9px}
.rhead .when{font-size:13px;color:var(--text-mute);margin-top:9px;font-variant-numeric:tabular-nums}

/* ============ cards ============ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:19px;
  position:relative;min-width:0}
.card>h3,.chead{font-size:13px;letter-spacing:.17em;color:var(--amber);font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chead .sub,.card>h3 .sub{color:var(--text-mute);letter-spacing:.04em;font-size:13.5px}
.chead .sub::before,.card>h3 .sub::before{content:"· ";color:var(--mute-quiet)}
.stack>*+*{margin-top:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.two.stretch{align-items:stretch}
.sticky{position:sticky;top:70px}
@media(max-width:860px){.sticky{position:static}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:860px){.two,.three{grid-template-columns:1fr}}
.card.glow{border-color:#3A2C18}
.card.glow::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,#FFB2530F 0%,transparent 62%)}
.card.glow>*{position:relative}

/* ============ keycaps ============ */
.key{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);
  font-size:15px;font-weight:600;color:var(--ink);background:var(--amber);border-radius:7px;
  padding:12px 18px;min-height:44px;text-align:center;
  box-shadow:0 2px 0 var(--copper),0 4px 18px -8px #FFB253aa;
  transition:transform var(--tick) var(--step2),box-shadow var(--tick) var(--step2),
             background var(--tick) var(--step2)}
.key:hover{box-shadow:0 2px 0 var(--copper),0 7px 24px -8px #FFB253cc}
.key:active{transform:translateY(2px);box-shadow:0 0 0 var(--copper)}
.key:focus-visible{outline:none;box-shadow:0 2px 0 var(--copper),0 0 0 2px var(--amber),0 0 0 5px #FFB25333}
.key[disabled]{opacity:.45;cursor:not-allowed}
.key.ghost{background:transparent;color:var(--text);border:1px solid var(--line-bright);
  box-shadow:0 2px 0 var(--line)}
.key.ghost:hover{background:var(--raised);box-shadow:0 2px 0 var(--line)}
.key.ghost:active{background:var(--amber);color:var(--ink)}
.key.sm{font-size:16px;padding:10px 13px}   /* 16px is the floor on any control */
.keys{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
a.key:hover{text-decoration:none}

/* ============ the prompt line ============ */
.prompt{display:flex;align-items:center;gap:10px;background:#0D0B08;border:1px solid var(--line);
  border-radius:8px;padding:0 14px;min-height:48px}
.prompt .d{color:var(--amber);font-weight:600;flex:none;text-shadow:0 0 10px #FFB25366}
/* the input itself is the target, so it fills the line rather than sitting in it */
.prompt input{flex:1;background:none;border:0;color:var(--text);font:inherit;font-size:16px;
  outline:none;min-width:0;align-self:stretch;min-height:46px}
.prompt input::placeholder{color:var(--text-mute)}
.prompt:focus-within{border-color:var(--line-bright);box-shadow:0 0 0 1px #FFB25326,0 0 24px -12px #FFB253}
/* the block holds the line while it is at rest and goes the moment there is a
   real caret in it, so there are never two cursors on one prompt */
.prompt .cur{display:inline-block;flex:none}
.prompt:focus-within .cur{display:none}
.hints{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* these four are what gets pressed on the stage, so they are primary: 44px, 16px */
.hint{font-size:16px;color:var(--text-dim);border:1px solid var(--line);border-radius:6px;
  padding:8px 12px;min-height:44px;display:inline-flex;align-items:center;
  transition:background var(--tick) var(--step2),color var(--tick) var(--step2)}
.hint:hover{background:var(--raised);color:var(--text)}
.hint:active{background:var(--amber);color:var(--ink)}
.hint:focus-visible{outline:none;background:var(--raised);border-color:var(--line-bright)}

/* ============ dot leaders, every number a door ============ */
.kv{display:flex;align-items:baseline;font-size:15px;padding:9px 8px;border-bottom:1px solid var(--line);
  min-height:44px;width:100%;text-align:left}
.kv:last-child{border-bottom:0}
.kv.wrap{flex-wrap:wrap;row-gap:7px}
.kv.wrap .chip{margin-left:auto}
/* break-word, not anywhere: anywhere splits a word that would have fitted, which
   is what turned the label "address" into "addres" and a lone "s". */
/* min-content beats the 58% cap, so a label is never narrower than its own
   longest word. without it the cap forced "address" to break into "addres" "s". */
.kv .k{color:var(--text-dim);flex:0 1 auto;min-width:min-content;max-width:58%;
  overflow-wrap:break-word}
.kv .dots{flex:1;margin:0 9px;border-bottom:1px dotted var(--mute-quiet);transform:translateY(-4px);min-width:14px}
.kv .v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;
  min-width:0;overflow-wrap:break-word}
.kv .arr{color:var(--amber);margin-left:9px;flex:none}
/* a job number is one token: it never breaks into IM- 2026- 0143 down a phone */
.kv .k.nbk{white-space:nowrap;max-width:none}
/* on a phone the job row stacks, because the number, the state and the kind
   chip cannot share 362px without breaking a word somewhere. */
@media(max-width:620px){
  .kv.jobrow{flex-wrap:wrap;row-gap:4px;align-items:center}
  .kv.jobrow .k.nbk{flex:0 0 auto}
  .kv.jobrow .dots{flex:1 1 auto;min-width:10px}
  .kv.jobrow .v{flex:1 1 100%;text-align:left;order:5}
  .kv.jobrow .chip{margin-left:0!important;order:4}
}
button.kv{border-radius:7px;transition:background var(--tick) var(--step2)}
button.kv:hover{background:var(--raised)}
button.kv:active{background:var(--amber)}
button.kv:active .k,button.kv:active .v,button.kv:active .arr{color:var(--ink)}
button.kv:focus-visible{outline:none;background:var(--raised)}
button.kv:focus-visible .arr::after{content:"\2588";color:var(--amber);margin-left:5px;
  animation:blink var(--blink) steps(1) infinite}
.v.ok{color:var(--done)}.v.bad{color:var(--fail)}.v.warn{color:var(--band-orange)}
.v.dim{color:var(--text-dim);font-weight:400}
.v.blank{color:var(--fail);font-weight:400}

/* ============ chips, one job each ============ */
.chip{font-size:13px;letter-spacing:.07em;padding:4px 10px;border-radius:6px;border:1px solid;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip.red{color:var(--band-red);border-color:#FD736D45;background:#FD736D14}
.chip.orange{color:var(--band-orange);border-color:#EF860045;background:#EF860014}
.chip.yellow{color:var(--band-yellow);border-color:#C6A10045;background:#C6A10014}
.chip.green{color:var(--band-green);border-color:#3FC16845;background:#3FC16814}
.chip.cyan{color:var(--band-cyan);border-color:#00BFDF45;background:#00BFDF14}
.chip.blue{color:var(--band-blue);border-color:#709FFF45;background:#709FFF14}
.chip.violet{color:var(--band-violet);border-color:#C583F345;background:#C583F314}
.chip.amber{color:var(--amber);border-color:#FFB25345;background:#FFB25314}

/* ============ the log feed ============ */
.feed{display:flex;flex-direction:column;gap:2px}
.log{font-size:15px;line-height:1.75;display:flex;gap:10px;align-items:baseline;padding:4px 0}
.log .t{color:var(--text-mute);flex:none;font-variant-numeric:tabular-nums;font-size:13px}
.log .a{flex:none;font-weight:600;min-width:46px}
.log .a.run{color:var(--run)}.log .a.done{color:var(--done)}.log .a.err{color:var(--fail)}
.log .m{color:var(--text-dim);min-width:0}
.log.typing .m{border-right:2px solid var(--amber)}
/* the receipt is the point of the whole demo, so it is the roomiest of the
   dense controls rather than the tightest. */
.log button.rcp{color:var(--text-mute);font-size:13px;flex:none;margin-left:auto;padding:6px 9px;
  border-radius:5px;min-height:32px;min-width:32px;
  transition:color var(--tick) var(--step2),background var(--tick) var(--step2)}
.log button.rcp:hover{color:var(--amber);background:var(--raised)}
.log button.rcp:focus-visible{outline:none;color:var(--amber);background:var(--raised)}
@media(max-width:620px){
  .log{flex-wrap:wrap;row-gap:3px;padding:7px 0}
  .log .m{flex-basis:100%;order:3}
  .log button.rcp{order:2}
}

/* ============ block progress, the heat ramp ============ */
.blocks{letter-spacing:2px;font-size:14px;color:var(--line-bright);font-variant-numeric:tabular-nums}
.blocks b{font-weight:400}
.blocks.am b{color:var(--amber);text-shadow:0 0 9px #FFB25366}
.blocks.gr b{color:var(--done);text-shadow:0 0 9px #7CE38B66}
.blocks.or b{color:var(--band-orange)}
.blocks.ye b{color:var(--band-yellow)}
.blocks.rd b{color:var(--band-red)}

/* ============ the sweep, once ============ */
.sweep{position:relative;overflow:hidden}
.sweep::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(124,227,139,.24) 50%,transparent 70%);
  transform:translateX(-120%);animation:sweepx var(--sweep) steps(12) forwards}

/* ============ the receipt, the whole brand in one object ============ */
.paper{background:var(--paper);color:var(--ink);border-radius:4px;padding:20px 21px;
  font-family:var(--mono);font-size:15px;line-height:1.7;
  box-shadow:0 18px 44px -22px #000,0 2px 0 #C9C0AD;position:relative}
.paper::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--copper) 0 8px,transparent 8px 16px);
  border-radius:4px 4px 0 0}
.paper h4{font-size:13px;letter-spacing:.18em;color:var(--copper);margin-bottom:12px}
.paper .prow{display:flex;align-items:baseline;padding:5px 0;border-bottom:1px dotted var(--paper-line)}
.paper .prow:last-child{border-bottom:0}
.paper .prow .k{color:var(--paper-dim);flex:none}
.paper .prow .dots{flex:1;margin:0 8px;border-bottom:1px dotted var(--paper-line);transform:translateY(-4px)}
.paper .prow .v{font-weight:600;text-align:right}
.paper .sig{margin-top:14px;padding-top:11px;border-top:1px solid var(--paper-line);
  font-size:13px;color:var(--paper-dim);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.paper .sig b{color:var(--copper)}
.paper pre{font:inherit;white-space:pre-wrap;word-break:break-word}

#sheet{position:fixed;inset:0;z-index:80;display:none}
#sheet.on{display:block}
#sheet .scrim{position:absolute;inset:0;background:#000000b8}
#sheet .hold{position:absolute;left:0;right:0;bottom:0;padding:16px;
  max-height:88dvh;overflow:auto;animation:glideup 320ms var(--spring)}
@media(min-width:941px){#sheet .hold{left:auto;top:0;bottom:0;width:min(470px,46vw);padding:20px;
  display:flex;align-items:center}}
#sheet .paper{width:100%;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
/* the drawer is a flex row on a laptop, so anything with more than one part
   goes in one column wrapper or the parts lay out sideways. */
#sheet .sheetstack{width:100%;min-width:0;display:block;background:var(--ground);
  border:1px solid var(--line);border-radius:var(--r);padding:19px;
  padding-bottom:calc(19px + env(safe-area-inset-bottom))}
#sheet .sheetstack>.card{border:0;padding:0;background:none}
#sheet .close{margin-top:14px;width:100%}

/* ============ documents and split views ============ */
.doc{background:#0D0B08;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.doc .dh{font-size:13px;letter-spacing:.16em;color:var(--text-mute);padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.doc pre{font-family:var(--mono);font-size:15px;line-height:1.75;color:var(--text-dim);
  padding:15px 14px;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.doc pre b{color:var(--text)}

/* ============ rate cards ============ */
.rate{border:1px solid var(--line);border-radius:9px;padding:15px;background:#0D0B08;
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.rate+.rate{margin-top:10px}
.rate.best{border-color:#3FC16855;background:#3FC1680A}
.rate .nm{flex:1;min-width:180px}
.rate .nm b{display:block;font-size:15px;color:var(--text);margin-bottom:5px}
.rate .nm span{font-size:15px;color:var(--text-dim);font-family:var(--sans);line-height:1.55}
.rate .pr{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.rate .mt{font-size:13px;color:var(--text-mute);text-align:right;margin-top:5px;line-height:1.6}
.rate .right{flex:none;text-align:right}
@media(max-width:520px){.rate .right{text-align:left}.rate .pr,.rate .mt{text-align:left}}

.opt{border:1px solid var(--line);border-radius:9px;padding:15px;background:#0D0B08;
  display:flex;flex-direction:column;height:100%}
.opt .cost{margin-top:auto;padding-top:12px}
.opt.best{border-color:#3FC16855;background:#3FC1680A}
.opt h4{font-size:16px;margin-bottom:9px}
.opt ul{list-style:none;font-size:15px;color:var(--text-dim);line-height:1.75}
.opt li{padding-left:15px;position:relative}
.opt li::before{content:"\00B7";position:absolute;left:3px;color:var(--amber)}
.reco{border-left:3px solid var(--run);background:#6FD3E00D;padding:13px 15px;border-radius:0 8px 8px 0;
  font-size:15px;color:var(--text-dim);font-family:var(--sans);line-height:1.7}
.reco b{color:var(--run);font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  display:block;margin-bottom:6px}

/* ============ the costing sheet and the margin control ============ */
.cost .crow{display:flex;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:15px;gap:9px;min-height:44px}
.cost .crow .k{color:var(--text-dim);flex:1;min-width:0}
.cost .crow .k s{display:block;text-decoration:none;color:var(--text-mute);font-size:13.5px;margin-top:3px}
.cost .crow .v{font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.cost .ctot{display:flex;align-items:baseline;padding-top:13px;margin-top:5px;
  border-top:1px solid var(--line-bright);font-size:15px}
.cost .ctot .k{flex:1;color:var(--text)}
.cost .ctot .v{font-weight:600;font-variant-numeric:tabular-nums;font-size:18px}
/* money that is held and given back is shown, but never added into the total */
.cost .cheld{margin-top:9px;font-size:14px;line-height:1.6;color:var(--text-mute)}

.money{background:#0D0B08;border:1px solid #3A2C18;border-radius:10px;padding:18px}
.money .mlab{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.12em;
  color:var(--text-mute);margin-bottom:8px}
.money .mlab b{color:var(--amber);font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.money input[type=range]{width:100%;accent-color:var(--amber);height:44px;cursor:pointer;display:block}
.money input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.money .big{font-size:31px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  margin:6px 0 4px;color:var(--text)}
.money .cap{font-size:13px;color:var(--text-mute);margin-bottom:14px}
.money .mrow{display:flex;justify-content:space-between;font-size:15px;padding:8px 0;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.money .mrow span{color:var(--text-dim)}
.money .mrow b{font-weight:600}

/* ============ the human gate ============ */
.gate{border:1px solid #3A2C18;border-radius:10px;padding:18px;background:#0D0B08;position:relative;
  overflow:hidden}
.gate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0,#FFB25314 0%,transparent 64%)}
.gate>*{position:relative}
.gate .stopped{font-size:13px;letter-spacing:.16em;color:var(--amber);margin-bottom:10px;
  display:flex;align-items:center;gap:8px}
.gate .says{font-size:15px;color:var(--text-dim);font-family:var(--sans);line-height:1.65;margin-bottom:14px}
.gate .who{font-size:13px;color:var(--text-mute);margin-top:11px}
.gate.pressed{border-color:#3FC16855}
.gate .after{font-size:14px;color:var(--done);display:flex;gap:9px;align-items:baseline;
  animation:landin var(--tick) var(--step2)}
.gate .after b{flex:none}

/* ============ clocks ============ */
.clock{border:1px solid var(--line);border-radius:10px;padding:17px;background:#0D0B08}
.clock .cl{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.clock .lab{font-size:15px;color:var(--text)}
.clock .st{font-size:15px;font-variant-numeric:tabular-nums;font-weight:600}
.clock .st.red{color:var(--band-red)}.clock .st.orange{color:var(--band-orange)}
.clock .st.yellow{color:var(--band-yellow)}.clock .st.green{color:var(--band-green)}
.clock .rule{font-size:15px;color:var(--text-mute);margin-top:8px;font-family:var(--sans);line-height:1.6}
.clock .bar{margin-top:11px}
.clock .note{font-size:15px;color:var(--text-dim);margin-top:11px;font-family:var(--sans);line-height:1.65}

/* the desk clock rows */
.dclock{display:flex;align-items:center;gap:13px;padding:13px 10px;border-radius:9px;
  border-bottom:1px solid var(--line);width:100%;text-align:left;min-height:64px;
  transition:background var(--tick) var(--step2)}
.dclock:last-child{border-bottom:0}
.dclock:hover{background:var(--raised)}
.dclock:active{background:var(--amber)}
.dclock:active *{color:var(--ink)!important}
.dclock:focus-visible{outline:none;background:var(--raised)}
.dclock .band{width:4px;align-self:stretch;border-radius:3px;flex:none}
.dclock .mid{flex:1;min-width:0}
.dclock .mid b{display:block;font-size:15px;color:var(--text);font-weight:600}
.dclock .mid s{display:block;text-decoration:none;font-size:14px;color:var(--text-mute);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dclock .rt{flex:none;text-align:right}
.dclock .rt b{font-size:15px;font-variant-numeric:tabular-nums;display:block}
.dclock .rt s{text-decoration:none;font-size:13px;color:var(--text-mute);display:block;margin-top:3px}
.dclock .arr{color:var(--amber);flex:none}
/* the quiet asks carry a whole sentence on each line, so they wrap rather than
   cut a word off with three dots. The row grows instead. */
.dclock.owed{align-items:flex-start;min-height:0;border-bottom:0;padding-bottom:6px}
.dclock.owed .mid s{white-space:normal;line-height:1.55}
.dclock.owed .rt{max-width:34%}
.dclock.owed .rt s{white-space:normal;line-height:1.55}
.dclock.owed .band{align-self:stretch}
.owedkeys{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:0 10px 14px 27px;border-bottom:1px solid var(--line)}
.owedkeys:last-of-type{border-bottom:0}
.owedkeys .holds{font-size:13px;color:var(--text-mute)}
@media(max-width:620px){
  .dclock{flex-wrap:wrap;row-gap:8px;align-items:flex-start;padding:14px 10px}
  .dclock .band{width:100%;height:3px;flex-basis:100%;align-self:auto;order:-1}
  .dclock .mid{flex-basis:calc(100% - 40px)}
  .dclock .mid s{white-space:normal}
  .dclock .rt{text-align:left;display:flex;gap:10px;align-items:baseline;flex-basis:100%}
  .dclock .rt s{margin-top:0}
  /* the quiet asks carry whole sentences on the right, so on a phone that
     column takes the full width instead of a 34 percent slot that breaks
     "1 working day" into three lines and "inside their rule" into five. */
  .dclock.owed .rt{max-width:none;flex-basis:100%;display:flex;flex-wrap:wrap;row-gap:3px}
  .dclock.owed .rt b{flex:none}
  .dclock.owed .rt s{flex:1;min-width:0}
}

/* ============ tables ============ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:0}
th{text-align:left;font-size:13px;letter-spacing:.13em;color:var(--text-mute);font-weight:400;
  padding:9px 11px 9px 0;border-bottom:1px solid var(--line-bright);white-space:nowrap}
td{padding:10px 11px 10px 0;border-bottom:1px solid var(--line);color:var(--text-dim);vertical-align:top}
td b{color:var(--text);font-weight:600}
td.n{font-variant-numeric:tabular-nums;color:var(--text)}
/* a job number breaks after its hyphens by default, giving "IM-2026-" then "X201" */
td.nb,th.nb,span.nb{white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ============ the stage scroller ============ */
.stages{display:flex;gap:7px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.stagebtn{flex:none;display:flex;flex-direction:column;gap:5px;padding:9px 13px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);min-height:52px;min-width:92px;
  transition:background var(--tick) var(--step2),border-color var(--tick) var(--step2)}
.stagebtn i{font-style:normal;font-size:13px;color:var(--mute-quiet);letter-spacing:.1em}
.stagebtn b{font-size:15px;color:var(--text-dim);font-weight:400}
.stagebtn:hover{background:var(--raised);border-color:var(--line-bright)}
.stagebtn:active{background:var(--amber)}
.stagebtn:active b,.stagebtn:active i{color:var(--ink)}
.stagebtn.here{border-color:#FFB25366;background:#FFB2530F}
.stagebtn.here b{color:var(--amber);font-weight:600}
.stagebtn.here i{color:var(--amber-dim)}
.stagebtn:focus-visible{outline:none;border-color:var(--amber);background:var(--raised)}

/* ============ milestones ============ */
.mile{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);
  min-height:44px}
.mile:last-child{border-bottom:0}
.mile .dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:6px;background:var(--line-bright)}
.mile.done .dot{background:var(--done);box-shadow:0 0 9px #7CE38B77}
.mile.run .dot{background:var(--run);box-shadow:0 0 9px #6FD3E077;animation:blink 1.6s steps(1) infinite}
.mile .mm{flex:1;min-width:0}
.mile .mm b{display:block;font-size:14px;color:var(--text);font-weight:400}
.mile.queued .mm b{color:var(--text-dim)}
.mile .mm s{display:block;text-decoration:none;font-size:13.5px;color:var(--text-mute);margin-top:3px}

/* ============ the diff ============ */
.diff{font-size:13px;line-height:1.85;overflow-x:auto}
.diff div{padding:4px 10px;border-radius:5px;white-space:pre-wrap;word-break:break-word}
.diff div.o{color:var(--band-red);background:#FD736D0F}
.diff div.n{color:var(--band-green);background:#3FC1680F}

/* ============ the phone frame ============ */
.phone{width:min(360px,100%);margin:0 auto;border:1px solid var(--line-bright);border-radius:26px;
  background:#0D0B08;padding:11px;box-shadow:0 30px 70px -34px #000}
.phone .notch{width:96px;height:5px;border-radius:3px;background:var(--line-bright);margin:2px auto 11px}
.phone .screen{border:1px solid var(--line);border-radius:17px;padding:15px 14px;background:var(--ground);
  min-height:200px}
.phone .pbar{display:flex;justify-content:space-between;font-size:13px;color:var(--text-mute);
  margin-bottom:13px;letter-spacing:.05em}

/* ============ the mothership pipes ============ */
.pipes{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
@media(max-width:860px){.pipes{grid-template-columns:1fr}}
.pipe{border:1px solid var(--line);border-radius:10px;padding:17px;background:#0D0B08}
.pipe h4{font-size:13px;letter-spacing:.15em;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.pipe.up h4{color:var(--band-cyan)}
.pipe.down h4{color:var(--band-blue)}
.pipe .ends{font-size:13px;color:var(--text-mute);margin:-6px 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.pipe ul{list-style:none;font-size:15px;line-height:1.9;color:var(--text-dim)}
.pipe li{padding-left:17px;position:relative}
.pipe.up li::before{content:"\2191";position:absolute;left:0;color:var(--band-cyan)}
.pipe.down li::before{content:"\2193";position:absolute;left:0;color:var(--band-blue)}
.pipe .nev{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:15px;
  color:var(--text-dim);line-height:1.85}
.pipe .nev b{color:var(--fail);display:block;margin-bottom:6px;font-size:13px;letter-spacing:.14em}
.pipe .nev span{display:block;padding-left:17px;position:relative}
.pipe .nev span::before{content:"\00D7";position:absolute;left:2px;color:var(--fail)}
.wall{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 20px}
@media(max-width:860px){.wall{padding:18px 0;flex-direction:row}}
.wall .col{width:3px;flex:1;min-height:60px;
  background:repeating-linear-gradient(180deg,var(--amber) 0 5px,transparent 5px 11px);opacity:.55}
@media(max-width:860px){.wall .col{width:auto;height:3px;min-height:0;
  background:repeating-linear-gradient(90deg,var(--amber) 0 5px,transparent 5px 11px)}}
.wall .lab{font-size:13px;letter-spacing:.15em;color:var(--amber);writing-mode:vertical-rl;
  transform:rotate(180deg);white-space:nowrap}
@media(max-width:860px){.wall .lab{writing-mode:horizontal-tb;transform:none}}

/* ============ the chart plate (paper, print tier) ============ */
.plate{background:var(--paper);color:var(--ink);border-radius:6px;padding:22px 20px 18px;
  box-shadow:0 18px 44px -22px #000}
.plate h4{font-size:13px;color:var(--copper);letter-spacing:.06em;margin-bottom:5px}
.plate .cap{font-size:13px;color:var(--paper-dim);line-height:1.6;margin-bottom:18px;max-width:62ch}
.plate .plot{display:flex;align-items:flex-end;gap:12px;height:174px;position:relative;
  border-bottom:1px solid var(--ink)}
.plate .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0}
.plate .bar i{display:block;border-radius:2px 2px 0 0;min-height:3px;background:var(--print-blue);
  transition:height 520ms var(--step2)}
.plate .bar u{text-decoration:none;font-size:13px;text-align:center;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:600}
.plate .medline{position:absolute;left:0;right:0;border-top:1px dashed var(--print-red);
  pointer-events:none}
.plate .medline span{position:absolute;right:0;top:-15px;font-size:13px;color:var(--print-red);
  background:var(--paper);padding:0 4px}
.plate .xaxis{display:flex;gap:12px;margin-top:8px}
.plate .xaxis s{flex:1;text-decoration:none;font-size:13px;text-align:center;color:var(--paper-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.plate .foot{margin-top:16px;padding-top:11px;border-top:1px solid var(--paper-line);font-size:13px;
  color:var(--paper-dim);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* the dark measure rows */
.meter{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);
  min-height:44px}
.meter:last-child{border-bottom:0}
/* a partner's name never gets cut off: it wraps, and the row grows. */
.meter .nm{flex:none;width:min(240px,46%);font-size:15px;color:var(--text-dim);
  overflow-wrap:break-word}
.meter .tr{flex:1;height:9px;border-radius:3px;background:var(--line);overflow:hidden;min-width:40px}
.meter .tr i{display:block;height:100%;border-radius:3px;transition:width 520ms var(--step2)}
.meter .vv{flex:none;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  min-width:64px;text-align:right}
.meter .ct{flex:none;font-size:13px;color:var(--text-mute);min-width:56px;text-align:right}
/* a measure counted in blocks, the way the wall counts a vote */
/* the empty blocks are half the reading, so they clear 4.5 to 1 like any
   other content. A bar you cannot count is a length you have to judge. */
.sqbar{flex:none;letter-spacing:2px;font-size:13px;color:var(--text-mute);white-space:nowrap;
  line-height:1;font-variant-numeric:tabular-nums}
.sqbar b{font-weight:400}
@media(max-width:520px){.meter .ct{display:none}.meter .nm{width:38%}}
@media(max-width:640px){
  .meter{flex-wrap:wrap;row-gap:7px}
  .meter .nm{width:auto;flex:1 1 auto}
  .sqbar{flex-basis:100%;order:5}
}

/* ============ small pieces ============ */
.ruleband{border-left:3px solid var(--band-blue);background:#709FFF0D;padding:14px 16px;
  border-radius:0 8px 8px 0}
.ruleband b{display:block;font-size:16px;color:var(--text);margin-bottom:7px;line-height:1.5}
.ruleband p{font-size:15px;color:var(--text-dim);font-family:var(--sans);line-height:1.7}
.ruleband .src{font-size:13px;color:var(--text-mute);margin-top:9px}
.note{border-left:3px solid var(--line-bright);padding:13px 16px;background:#0D0B08;border-radius:0 8px 8px 0}
.note b{display:block;font-size:13px;letter-spacing:.1em;color:var(--text-mute);margin-bottom:8px}
.note p{font-size:15px;color:var(--text-dim);font-family:var(--sans);line-height:1.7;max-width:74ch}
.quotelines p{font-size:15px;color:var(--text-dim);font-family:var(--sans);line-height:1.7;
  padding:9px 0 9px 16px;border-left:2px solid var(--line-bright)}
.quotelines p+p{margin-top:9px}
.stamp{display:inline-flex;flex-direction:column;gap:6px;border:2px solid var(--done);border-radius:8px;
  padding:14px 22px;color:var(--done);align-items:center}
.stamp b{font-size:23px;letter-spacing:.2em;text-transform:uppercase}
.stamp s{text-decoration:none;font-size:13px;color:var(--text-dim);letter-spacing:.04em}
.varbar{margin-top:14px}
.varbar .scale{position:relative;height:38px}
.varbar .track{position:absolute;top:15px;left:0;right:0;height:8px;border-radius:4px;background:var(--line)}
.varbar .band{position:absolute;top:15px;height:8px;border-radius:4px;background:#3FC16833}
.varbar .mark{position:absolute;top:6px;width:3px;height:26px;border-radius:2px;background:var(--amber);
  box-shadow:0 0 10px #FFB253aa}
.varbar .ends{display:flex;justify-content:space-between;font-size:13px;color:var(--text-mute);margin-top:2px}
.big3{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:700px){.big3{grid-template-columns:repeat(2,1fr)}}
.big3 .b{border:1px solid var(--line);border-radius:9px;padding:14px;background:#0D0B08;text-align:left;
  min-height:88px;transition:background var(--tick) var(--step2)}
.big3 button.b:hover{background:var(--raised)}
.big3 button.b:active{background:var(--amber)}
.big3 button.b:active *{color:var(--ink)}
.big3 button.b:focus-visible{outline:none;background:var(--raised);border-color:var(--line-bright)}
/* the four headline numbers are the loudest thing on the record */
.big3 .b{padding:17px 16px;min-height:118px}
.big3 .b u{text-decoration:none;display:block;font-size:clamp(38px,4.2vw,62px);font-weight:600;
  color:var(--amber);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.big3 .b s{text-decoration:none;display:block;font-size:13.5px;color:var(--text-dim);margin-top:7px;
  line-height:1.5}

/* the job board rows */
.jrow{display:flex;gap:14px;align-items:flex-start;padding:15px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);width:100%;text-align:left;min-height:76px;
  transition:background var(--tick) var(--step2),border-color var(--tick) var(--step2)}
.jrow+.jrow{margin-top:10px}
.jrow:hover{background:var(--raised);border-color:var(--line-bright)}
.jrow:active{background:var(--amber)}
.jrow:active *{color:var(--ink)!important;border-color:var(--copper)!important}
.jrow:focus-visible{outline:none;background:var(--raised);border-color:var(--amber)}
.jrow .idc{flex:none;width:min(140px,34%)}
.jrow .idc b{display:block;font-size:15px;color:var(--text)}
.jrow .idc s{display:block;text-decoration:none;font-size:13px;color:var(--text-mute);margin-top:4px}
.jrow .mid{flex:1;min-width:0}
.jrow .mid b{display:block;font-size:15px;color:var(--text-dim);font-weight:400}
.jrow .mid s{display:block;text-decoration:none;font-size:14px;color:var(--text-mute);margin-top:5px;
  font-family:var(--sans);line-height:1.55}
.jrow .rt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media(max-width:640px){.jrow{flex-wrap:wrap}.jrow .idc{width:100%}.jrow .rt{width:100%;
  flex-direction:row;align-items:center;justify-content:space-between}}

/* the walk bar */
#walk{position:fixed;left:0;right:0;bottom:0;z-index:53;display:none;gap:10px;align-items:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 96%,black);border-top:1px solid var(--line-bright)}
#walk.on{display:flex}
#walk #walknext .cur{width:7px;height:13px}
#walk .lab{font-size:13px;color:var(--text-mute);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media(max-width:940px){#app.walking main{padding-bottom:calc(170px + env(safe-area-inset-bottom))}}
@media(min-width:941px){#app.walking main{padding-bottom:150px}}

/* toasts print like log lines */
#toasts{position:fixed;left:14px;right:14px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:90;
  display:flex;flex-direction:column;gap:6px;pointer-events:none}
@media(min-width:941px){#toasts{left:auto;right:18px;width:min(430px,42vw);bottom:18px}}
.toast{background:#0D0B08;border:1px solid var(--line-bright);border-radius:8px;padding:11px 14px;
  font-size:14px;display:flex;gap:10px;align-items:baseline;animation:rise var(--tick) var(--step2);
  box-shadow:0 12px 36px -16px #000}
.toast .t{color:var(--text-mute);flex:none;font-size:13px;font-variant-numeric:tabular-nums}
.toast .ok{color:var(--done);flex:none}
.toast .er{color:var(--fail);flex:none}

/* the footer wordmark, ours behind theirs */
.sig-foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-mute)}
.sig-foot svg{display:block;opacity:.8}

/* the column fill on the desk, honest to reduced motion */
.fill>*{animation:colfill 340ms var(--spring) backwards}
.fill>*:nth-child(1){animation-delay:0ms}
.fill>*:nth-child(2){animation-delay:70ms}
.fill>*:nth-child(3){animation-delay:140ms}
.fill>*:nth-child(4){animation-delay:210ms}
.fill>*:nth-child(5){animation-delay:280ms}
.fill>*:nth-child(6){animation-delay:350ms}

/* ====================================================================
   THE OBJECTS. A control room, not a list.
   Every hero on this system is a thing with a mechanism: a flap counter,
   a route strip with a vessel on it, a dial, a sheet of paper. Depth is
   layering and hairlines, never a glow and never a blur.
   ==================================================================== */

/* ---- the split flap cell, the mechanism the whole system borrows ----
   One character per cell, a hinge line across the middle, and a stepped
   half turn when the character changes. The cell holds one text node, so
   what a reader sees and what a machine reads are the same string. */
.fc{position:relative;display:inline-block;width:1ch;text-align:center;line-height:1;
  font-variant-numeric:tabular-nums;transform-origin:50% 50%}
.fc::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;
  background:#0A0906;opacity:.55;pointer-events:none}
.fc.sp{width:.42ch}
.fc.sp::after{display:none}
@keyframes flapturn{
  0%{transform:perspective(220px) rotateX(0deg)}
  48%{transform:perspective(220px) rotateX(-84deg)}
  52%{transform:perspective(220px) rotateX(84deg)}
  100%{transform:perspective(220px) rotateX(0deg)}
}
.fc.turn{animation:flapturn 260ms steps(4,end) 1}
/* the unit letters are printed on the board, they do not flap */
.fc.un{width:auto;font-size:.30em;letter-spacing:.06em;color:var(--text-mute);
  vertical-align:baseline;padding:0 .04em}
.fc.un::after{display:none}

/* ---- the island. what the agents are doing, right now, always on ---- */
/* the island parks itself right under the session line. The exact height of
   that line changes with the width, so app.js measures it and sets --toph. */
.island{position:sticky;top:var(--toph,54px);z-index:44;display:flex;gap:0;align-items:stretch;
  background:#0D0B08;border:1px solid var(--line-bright);border-radius:10px;
  margin-bottom:18px;overflow:hidden;box-shadow:0 12px 34px -22px #000,0 2px 0 var(--line)}
.island .ib{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:11px 14px;
  font-size:14px;line-height:1.45;min-height:52px}
.island .ib+.ib{border-left:1px solid var(--line)}
.island .ib .st{flex:none;font-size:13px;letter-spacing:.14em}
.island .ib .nm{flex:none;font-weight:600;font-size:14px}
.island .ib .tm{flex:none;font-size:13px;color:var(--text-mute);font-variant-numeric:tabular-nums}
/* the line is never cut off with three dots. It takes two lines, and the box
   holds both whether the line needs them or not, so the strip never jumps. */
.island .ib .ms{flex:1;min-width:0;color:var(--text-dim);line-height:1.4;
  min-height:2.8em;display:flex;align-items:center;overflow-wrap:break-word}
.island .ib.run .st,.island .ib.run .nm{color:var(--run)}
.island .ib.done .st,.island .ib.done .nm{color:var(--done)}
.island .cur{flex:none;width:7px;height:13px}
@media(max-width:860px){
  /* a phone gets the line that is running. Two strips would take a third of
     the screen before the desk starts. The line itself drops under its own
     timestamp so it has the whole width and lands in two lines, not four. */
  .island{border-radius:0;margin:-18px -14px 16px;border-left:0;border-right:0}
  .island .ib.done{display:none}
  .island .ib{flex-wrap:wrap;row-gap:5px;padding:9px 13px}
  .island .ib .ms{flex-basis:100%}
  .island .cur{margin-left:auto}
}

/* ---- the counter board. five clocks as flap counters ---- */
.board{position:relative;background:var(--panel);border:1px solid #3A2C18;border-radius:var(--r);
  padding:19px;overflow:hidden}
/* the dot field of the logo, behind the hero only, never behind a paragraph */
.board::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,#FFB25314 1px,transparent 1.5px);
  background-size:15px 15px}
.board>*{position:relative}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dclock.counter{display:block;text-align:left;border:1px solid var(--line);border-radius:10px;
  background:#0D0B08;padding:14px 15px 13px;min-height:44px;border-bottom:1px solid var(--line);
  overflow:hidden;position:relative}
.dclock.counter .band{position:absolute;left:0;right:0;top:0;height:3px;width:auto;
  border-radius:0;align-self:auto}
.dclock.counter .rt{display:block;text-align:left;margin:6px 0 0}
.dclock.counter .rt b{display:block;font-size:clamp(34px,3.6vw,58px);font-weight:600;
  letter-spacing:-.01em;line-height:1;white-space:nowrap}
.dclock.counter .rt s{display:block;text-decoration:none;font-size:13px;color:var(--text-mute);
  margin-top:9px;font-variant-numeric:tabular-nums}
.dclock.counter .mid{display:block;flex:none}
.dclock.counter .mid b{font-size:15px;color:var(--text);margin-top:11px}
/* a counter never cuts a word off with three dots. If the job number will not
   fit the column, the column gets wider, it does not lose the number. */
.dclock.counter .mid s{white-space:normal;font-size:13px;line-height:1.5;color:var(--text-mute);
  overflow:visible;text-overflow:clip}
.dclock.counter .rule{display:block;font-size:13px;color:var(--text-dim);line-height:1.55;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-family:var(--sans)}
.dclock.counter .arr{position:absolute;right:13px;top:12px}
.dclock.counter:hover{background:var(--raised);border-color:var(--line-bright)}
.dclock.counter:focus-visible{background:var(--raised);border-color:var(--amber)}
/* the nearest clock is the biggest thing on the desk */
.dclock.counter.near{grid-column:1/-1;grid-row:1;border-color:#3A2C18;background:#100D09}
.dclock.counter.near .rt b{font-size:clamp(46px,5.6vw,78px)}
.dclock.counter.near .mid b{font-size:17px}
.dclock.counter.rest{grid-row:2}
@media(max-width:860px){
  .counters{grid-template-columns:1fr 1fr}
  .dclock.counter.rest{grid-row:auto}
  .dclock.counter .rt b{font-size:clamp(30px,8.4vw,44px)}
  .dclock.counter.near .rt b{font-size:clamp(40px,11vw,58px)}
}
/* at the compliance floor a job number no longer fits two columns, so the
   counters run one up rather than losing four characters off the end */
@media(max-width:400px){.dclock.counter{padding:12px 11px}}
@media(max-width:365px){.counters{grid-template-columns:1fr}}

/* ---- the route strip. a lane with milestones and something moving on it ---- */
.lanes{display:flex;flex-direction:column;gap:10px}
.jrow.lane{display:block;padding:15px 16px 13px}
.lane .lhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lane .lhead b{font-size:15px;color:var(--text);font-weight:600}
.lane .lhead .kn{font-size:13px;color:var(--text-mute);margin-left:auto}
.strip{display:flex;align-items:center;gap:11px}
.strip.back{flex-direction:row-reverse}
.strip .pt{flex:none;font-size:13px;color:var(--text-dim);max-width:29%;line-height:1.4}
.rail{flex:1;min-width:0;position:relative;height:34px}
.rail .base{position:absolute;left:0;right:0;top:16px;height:2px;
  background:repeating-linear-gradient(90deg,var(--line-bright) 0 6px,transparent 6px 11px)}
.rail .run{position:absolute;top:16px;height:2px;background:var(--band-cyan);opacity:.8}
.rail.back .run{background:var(--band-blue)}
.rail .tk{position:absolute;top:12px;width:2px;height:10px;background:var(--line-bright);
  border-radius:1px;transform:translateX(-1px)}
.rail .tk.past{background:var(--text-mute);height:12px;top:11px}
.rail .ves{position:absolute;top:5px;transform:translateX(-7px)}
.rail .ves i{display:block;width:14px;height:24px;border-radius:2px;background:var(--amber);
  box-shadow:0 2px 0 var(--copper)}
.rail .ves.needs i{background:var(--band-orange);box-shadow:0 2px 0 #7A4600}
.rail .ves.rest i{background:var(--text-mute);box-shadow:0 2px 0 var(--line-bright)}
.now{margin-top:9px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
  font-size:13.5px;color:var(--text-dim)}
.now b{color:var(--text);font-weight:600;font-size:13.5px}
@media(max-width:520px){
  .strip{flex-wrap:wrap;row-gap:8px}
  .strip .pt{max-width:none;flex:1 1 40%}
  .rail{flex-basis:100%;order:5}
  .strip.back .rail{order:5}
}

/* ---- the stage board. ten cells, and the arrow keys flip along it ---- */
/* Twelve cells only lay out as a board once there is room for twelve names.
   Below that the rail stays the horizontal scroller it is on a phone, because
   a board that breaks "Contract" into "Contrac" and "t" is worse than a swipe. */
@media(min-width:1280px){
  .stages{display:grid;grid-template-columns:repeat(var(--cells,10),minmax(0,1fr));
    gap:6px;overflow:visible}
  .stages .stagebtn{min-width:0;padding:11px 8px}
  .stages .stagebtn b{font-size:13px;hyphens:none}
  /* twelve names in the same width need a smaller step, or "Inventory" breaks
     into "Inventor" and a lone "y". Measured: 12px fits 69px of cell. */
  .stages.many .stagebtn{padding:11px 6px}
  .stages.many .stagebtn b{font-size:13px}
}
.stagebtn{min-height:74px;justify-content:flex-start;gap:8px;padding:11px 10px;
  background:#0D0B08;position:relative;overflow:hidden}
.stagebtn .bk{position:absolute;right:9px;top:11px;width:8px;height:8px;border-radius:2px;
  border:1px solid var(--line-bright);background:none}
.stagebtn i{font-size:13px}
.stagebtn b{font-size:14px;line-height:1.25;overflow-wrap:break-word}
.stagebtn.past{border-color:#332818;background:#100D09}
.stagebtn.past i,.stagebtn.past b{color:var(--amber-dim)}
.stagebtn.past .bk{background:var(--amber-dim);border-color:var(--amber-dim)}
.stagebtn.here{border-color:var(--amber);background:#1A1207}
.stagebtn.here .bk{background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 8px #FFB25399;animation:blink var(--blink) steps(1) infinite}
/* a cell that has not happened yet is quiet, but its name is content, so it
   holds 4.5 to 1. Only the two digit number goes down to the metadata token. */
.stagebtn.ahead i{color:var(--mute-quiet)}
.stagebtn.ahead b{color:var(--text-mute)}
@keyframes cellturn{
  0%{transform:perspective(320px) rotateX(0deg)}
  48%{transform:perspective(320px) rotateX(-80deg)}
  52%{transform:perspective(320px) rotateX(80deg)}
  100%{transform:perspective(320px) rotateX(0deg)}
}
.stagebtn.turn{animation:cellturn 280ms steps(4,end) 1}

/* ---- a letter. what arrived, on paper, with a torn edge ---- */
.letter{position:relative;margin-bottom:14px}
.letter .lb{font-size:13px;letter-spacing:.16em;color:var(--text-mute);margin-bottom:9px}
.letter .paper{padding:22px 24px 24px}
.letter .env{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;
  padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--paper-line)}
.letter .env dt{color:var(--paper-dim);white-space:nowrap}
.letter .env dd{color:var(--ink);font-weight:600;overflow-wrap:break-word;min-width:0}
.letter .paper pre{font-size:14.5px;line-height:1.75;color:var(--ink)}
/* a real sheet is not square with the desk */
.letter .paper{transform:rotate(-.22deg)}
@media(max-width:520px){.letter .paper{padding:18px 16px 20px;transform:none}
  .letter .env{grid-template-columns:1fr;gap:1px 0;margin-bottom:12px}
  .letter .env dd{margin-bottom:7px}}

/* ---- the partner cards, each with the clock it answered inside ---- */
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
@media(max-width:860px){.rcards{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);border-radius:10px;background:#0D0B08;padding:16px;
  display:flex;flex-direction:column;gap:11px;position:relative}
.rcard.best{border-color:#3FC16855;background:#3FC1680A}
.rcard .rtop{display:flex;gap:12px;align-items:flex-start}
.rcard .rtop b{flex:1;min-width:0;font-size:15px;color:var(--text);line-height:1.4}
.rcard .dial{flex:none}
.rcard .sub{font-size:14px;color:var(--text-dim);font-family:var(--sans);line-height:1.55}
.rcard .pr{font-size:clamp(24px,2.4vw,32px);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.rcard .mt{font-size:13px;color:var(--text-mute);line-height:1.65}
.rcard .st{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--done);
  border-radius:7px;padding:7px 11px;color:var(--done);font-size:13px;letter-spacing:.14em;
  align-self:flex-start;transform:rotate(-1.4deg)}

/* ---- the dial. an elapsed arc against a written rule ---- */
.dial{display:block}
.dial .tr{fill:none;stroke:var(--line-bright);stroke-width:5}
.dial .ar{fill:none;stroke-width:5;stroke-linecap:butt;
  transform:rotate(-90deg);transform-origin:50% 50%}
.dial .hand{stroke:var(--text);stroke-width:2;stroke-linecap:round}
.dial .pin{fill:var(--text)}
.dials{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.dials{grid-template-columns:1fr}}
.dialcard{border:1px solid var(--line);border-radius:10px;background:#0D0B08;padding:18px;
  display:flex;gap:18px;align-items:flex-start}
.dialcard .dn{flex:1;min-width:0}
.dialcard .dn .lb{font-size:15px;color:var(--text);font-weight:600;line-height:1.4}
.dialcard .dn .big{font-size:clamp(30px,3.2vw,44px);font-weight:600;line-height:1;margin:11px 0 0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dialcard .dn .rl{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin-top:11px;
  font-family:var(--sans)}
.dialcard .dn .du{font-size:13px;color:var(--text-mute);margin-top:9px;
  font-variant-numeric:tabular-nums}
@media(max-width:400px){.dialcard{flex-direction:column;gap:12px}}

/* ---- the margin rail. a keycap you slide ---- */
.money .big{font-size:clamp(38px,4.6vw,66px);line-height:1;letter-spacing:-.02em;
  color:var(--amber);margin:8px 0 6px}
.money .slot{margin:14px 0 6px;position:relative}
.money input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;
  height:44px;display:block;width:100%}
.money input[type=range]::-webkit-slider-runnable-track{height:16px;border-radius:4px;
  background:#0A0906;border:1px solid var(--line-bright);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px)}
.money input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:32px;height:32px;margin-top:-9px;border-radius:6px;background:var(--amber);
  box-shadow:0 2px 0 var(--copper);border:0}
.money input[type=range]::-moz-range-track{height:16px;border-radius:4px;background:#0A0906;
  border:1px solid var(--line-bright)}
.money input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:6px;
  background:var(--amber);box-shadow:0 2px 0 var(--copper);border:0}
.money .ends{display:flex;justify-content:space-between;font-size:13px;color:var(--text-mute);
  font-variant-numeric:tabular-nums}

/* ---- a manifest, and a pack of sheets fanned on the desk ---- */
.manifest .paper{padding:22px 22px 26px}
.manifest .paper h4{margin-bottom:14px}
.manifest table{width:100%;border-collapse:collapse;font-size:14px;color:var(--ink)}
.manifest th{color:var(--paper-dim);border-bottom:1px solid var(--ink);font-size:13px;
  letter-spacing:.13em;padding:0 10px 8px 0}
.manifest td{border-bottom:1px dotted var(--paper-line);padding:9px 10px 9px 0;color:var(--ink);
  vertical-align:top}
.manifest td.n{font-variant-numeric:tabular-nums;color:var(--paper-dim);white-space:nowrap}
/* the global table rule paints a bold cell ivory, which on a cream sheet is
   invisible. On paper the ink is the ink. */
.manifest td b{font-weight:600;color:var(--ink)}
.manifest .pb{display:inline-block;border:1px solid var(--copper);color:var(--copper);
  border-radius:3px;padding:1px 6px;font-size:13px}
/* a long document name on a narrow sheet takes its own line rather than
   pushing the sheet wider than the phone */
.fan .prow{flex-wrap:wrap;row-gap:2px}
.fan .prow .k{flex:0 1 auto;min-width:min-content;overflow-wrap:break-word}
@media(max-width:620px){
  .fan .prow .dots{display:none}
  .fan .prow .v{flex:1 1 100%;text-align:left;color:var(--paper-dim);font-weight:400}
}
.fan{position:relative;padding:0 0 26px}
.fan .sheet{position:relative}
.fan .sheet+.sheet{margin-top:-14px}
.fan .sheet:nth-child(1){transform:rotate(-1.1deg);z-index:1}
.fan .sheet:nth-child(2){transform:rotate(.7deg);z-index:2}
.fan .sheet:nth-child(3){transform:rotate(-.4deg);z-index:3}
@media(max-width:520px){.fan .sheet{transform:none!important}.fan .sheet+.sheet{margin-top:12px}}

/* ---- a lesson, written onto paper because the record keeps paper ---- */
.learnpaper{padding:22px 22px 26px;margin-bottom:14px}
.ruleband.onpaper{border-left-color:var(--copper);background:none;padding:0 0 0 16px;border-radius:0}
.ruleband.onpaper b{color:var(--ink)}
.ruleband.onpaper p{color:var(--ink);opacity:.86}
.ruleband.onpaper .src{color:var(--paper-dim)}

/* ---- the room plan. a survey drawn as cells, not typed as a table ---- */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.plan .rm{border:1px solid var(--line-bright);border-radius:6px;background:#0D0B08;padding:13px 13px 12px;
  position:relative;overflow:hidden}
.plan .rm::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,#FFB25310 1px,transparent 1.4px);
  background-size:11px 11px}
.plan .rm>*{position:relative}
.plan .rm b{display:block;font-size:14px;color:var(--text);font-weight:600}
.plan .rm s{display:block;text-decoration:none;font-size:13px;color:var(--text-mute);margin-top:6px;
  line-height:1.5;font-family:var(--sans)}
.plan .rm u{display:block;text-decoration:none;font-size:22px;font-weight:600;color:var(--amber);
  font-variant-numeric:tabular-nums;margin-top:11px;line-height:1}
.plan .rm u em{font-style:normal;font-size:13px;color:var(--text-mute);margin-left:5px}

/* ---- the six islands. one card each, the running one awake ---- */
.isles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:860px){.isles{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.isles{grid-template-columns:1fr}}
.kv.isle{display:block;text-align:left;border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:10px;background:#0D0B08;padding:13px 14px;min-height:88px}
.kv.isle .top{display:flex;align-items:center;gap:8px}
.kv.isle .top b{font-size:15px;color:var(--text);font-weight:600}
.kv.isle .top .rl{font-size:13px;color:var(--text-mute);margin-left:auto}
.kv.isle .tt{display:block;text-decoration:none;font-size:13.5px;color:var(--text-dim);
  line-height:1.55;margin-top:9px;font-family:var(--sans)}
.kv.isle .watchcur{margin-left:0}
.kv.isle:hover{background:var(--raised);border-color:var(--line-bright)}
.kv.isle:active *{color:var(--ink)!important}
.kv.isle:focus-visible{background:var(--raised);border-color:var(--amber)}

/* ============ the motion layer ============
   Everything below is driven by motion.js. Two rules hold across all of it.
   State snaps in steps. Space glides on the spring. Nothing here changes a
   resting colour, a resting size or a word, so what a measuring tool reads
   once the screen has settled is exactly what it read before. */

/* the heat ramp: text warms ember to amber and settles to ivory, while a
   stepped block runs left to right underneath, column by column */
@keyframes rampwarm{
  0%{color:#8A4A16}
  34%{color:var(--copper)}
  67%{color:var(--amber)}
  100%{color:inherit}
}
@keyframes rampbar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.ramp{animation:rampwarm var(--rampms,620ms) steps(4,end) 1;position:relative}
.ramp::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--amber);transform-origin:0 50%;pointer-events:none;
  animation:rampbar var(--rampms,620ms) steps(12,end) 1 forwards}

/* the column fill, warming as each card lands */
@keyframes cardwarm{
  0%{color:#8A4A16}
  40%{color:var(--copper)}
  72%{color:var(--amber)}
  100%{color:inherit}
}
.fill>*.warm{animation:colfill 340ms var(--spring) var(--fd,0ms) backwards,
                       cardwarm 380ms steps(4,end) var(--fd,0ms) 1}
.fill>*.warm h3,.fill>*.warm h3 .sub{color:inherit}

/* the wordmark on the boot. The cut on disk, uncovered in eight stepped
   columns, one per letter. Never redrawn, never recoloured, never tracked. */
@keyframes markreveal{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
/* the mark is a div inside the boot lines, and those start at zero opacity,
   so it says out loud that it is not one of them */
.bootmark{width:min(420px,74vw);margin:0 auto 22px;clip-path:inset(0 100% 0 0)}
#boot .lines .bootmark{opacity:1}
.bootmark img{display:block;width:100%;height:auto}
.bootmark.run{animation:markreveal var(--markms,640ms) steps(8,end) 1 forwards}
.bootmark.done{clip-path:inset(0 0 0 0);animation:none}

/* the clock that is running down holds the blinking block on its band */
.dclock .rt b{font-variant-numeric:tabular-nums}
.dclock.ticking .band{animation:blink var(--blink) steps(1) infinite}

/* six on watch: the cursor that never stops, one per row */
.watchcur{display:inline-block;width:7px;height:14px;background:var(--amber);flex:none;
  margin-left:9px;vertical-align:-2px;box-shadow:0 0 8px #FFB25399;
  animation:blink var(--blink) steps(1) infinite}

/* press: one frame of amber ground with ink text, then the result */
.hit{background:var(--amber)!important;color:var(--ink)!important;
  transform:translateY(2px);box-shadow:0 0 0 var(--copper)!important}
.hit *{color:var(--ink)!important}

/* a log line waiting its turn in a paced feed */
.log.waiting .m{min-height:1em}

/* the receipt key on a log line waits for its line to land */
.feed.walking .log .rcp{opacity:0;transition:opacity var(--tick) var(--step2)}
.feed.walking .log.landed .rcp{opacity:1}

/* the paper grain and the torn bottom edge, copied from the board sheet.
   A receipt is a real object, so it has a surface and a cut edge. */
.paper{background-image:
    repeating-linear-gradient(94deg,rgba(22,21,18,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(3deg,rgba(22,21,18,.022) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.5) 0%,rgba(22,21,18,.05) 100%);
  background-blend-mode:multiply,multiply,normal}
.paper .tear{position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background-color:var(--paper);pointer-events:none;
  clip-path:polygon(
    0 0,100% 0,100% 42%,96% 71%,92% 38%,88% 66%,84% 30%,
    80% 74%,75% 44%,71% 80%,67% 36%,62% 69%,58% 41%,
    54% 77%,49% 33%,45% 72%,41% 45%,36% 79%,32% 37%,
    28% 68%,23% 43%,19% 75%,15% 34%,11% 70%,7% 40%,3% 73%,0 46%)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  .cur{animation:none!important;opacity:1!important}
  .mile.run .dot{animation:none!important;opacity:1!important}
  #top .syn i{animation:none!important;opacity:1!important}
  .fill>*{animation:none!important}
  .sweep::after{display:none}
  /* the cursor holds steady and everything lands finished, but the clocks
     still keep time, because time is not motion */
  .watchcur{animation:none!important;opacity:1!important}
  .dclock.ticking .band{animation:none!important;opacity:1!important}
  .ramp{animation:none!important}
  .ramp::after{display:none}
  .bootmark{clip-path:inset(0 0 0 0)!important;animation:none!important}
  .hit{transform:none}
  .feed.walking .log .rcp{opacity:1}
  /* a flap that lands finished. The digit still changes, because that is the
     time, but it does not turn over to get there. */
  .fc.turn{animation:none!important;transform:none!important}
}

/* ============ the bill against the locked cost ============
   Four columns on a laptop, and a stacked card on a phone, because three money
   numbers and a state word will not sit on one 390 px line and stay readable. */
.against .ah,.against .arow,.against .atot{display:grid;
  grid-template-columns:minmax(0,1fr) 96px 96px 120px;gap:10px;align-items:baseline}
.against .ah{padding:0 0 8px;border-bottom:1px solid var(--line);
  font-size:13px;letter-spacing:.09em;color:var(--text-mute);text-transform:uppercase}
.against .ah .n,.against .atot .n,.against .arow .n{text-align:right;
  font-variant-numeric:tabular-nums}
.against .arow{padding:12px 0;border-bottom:1px solid var(--line);
  border-left:3px solid transparent;padding-left:11px;margin-left:-14px}
.against .arow .k{color:var(--text-dim);min-width:0}
.against .arow .k s{display:block;text-decoration:none;color:var(--text-mute);
  font-size:13.5px;margin-top:3px;line-height:1.55}
.against .arow .n{color:var(--text-dim)}
.against .arow .n.b{color:var(--text);font-weight:600}
.against .arow .s s{display:block;text-decoration:none;font-size:13px;margin-top:4px;
  color:var(--text-mute);font-variant-numeric:tabular-nums}
.against .arow.stop{border-left-color:var(--band-red);background:#FD736D0A}
.against .arow.stop .n.b{color:var(--band-red)}
.against .arow.under{border-left-color:#3FC16855}
.against .atot{padding-top:13px;margin-top:6px;border-top:1px solid var(--line-bright)}
.against .atot .k{color:var(--text)}
.against .atot .s b{color:var(--band-red);font-variant-numeric:tabular-nums;font-size:17px}
.against .aopen{margin-top:16px;padding:14px 15px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)}
.against .aopen>b{display:block;font-size:13px;font-weight:600;color:var(--text-dim);
  margin-bottom:8px}
.against .aopen .kv .k s{display:block;text-decoration:none;color:var(--text-mute);font-size:13px}
@media(max-width:860px){
  .against .ah{display:none}
  .against .arow,.against .atot{grid-template-columns:1fr auto;row-gap:6px}
  .against .arow .k,.against .atot .k{grid-column:1 / -1}
  .against .arow .n::before{content:"costed ";color:var(--text-mute);font-size:13px}
  .against .arow .n.b::before{content:"billed ";color:var(--text-mute);font-size:13px}
  .against .arow .n,.against .atot .n{text-align:left}
  .against .arow .s,.against .atot .s{text-align:right}
}

/* ============ the invoice on paper ============ */
.paper .ihead{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--paper-line);margin-bottom:12px}
.paper .ihead b{font-size:16px}
.paper .ihead s,.paper .ito s{display:block;text-decoration:none;font-size:13px;
  color:var(--paper-dim);line-height:1.7}
.paper .ihead .r{text-align:right}
.paper .ito{margin-bottom:12px}
.paper .ito b{font-size:15px;font-weight:600}
/* a key on an invoice line is a sentence, not a label, so the row wraps rather
   than pushing the page sideways. That is what took the invoice to 584px at 390. */
.paper .prow.wrapk{flex-wrap:wrap;row-gap:2px}
.paper .prow.wrapk .k{flex:0 1 auto;min-width:min-content;overflow-wrap:break-word}
.paper .prow.wrapk .v{margin-left:auto}
.paper .prow.tot{border-bottom:0;border-top:1px solid var(--paper-line);
  margin-top:6px;padding-top:10px}
.paper .prow.tot .v{font-size:18px}

/* ============ the job's profit and loss ============ */
.pnl .mbar{margin-top:18px}
.pnl .mtrack{position:relative;height:34px}
.pnl .mtrack::before{content:"";position:absolute;top:13px;left:0;right:0;height:9px;
  border-radius:5px;background:var(--line)}
.pnl .mfill{position:absolute;top:13px;left:0;height:9px;border-radius:5px;
  background:var(--band-green)}
.pnl .mfill.under{background:var(--band-red)}
.pnl .mfloor{position:absolute;top:6px;width:3px;height:23px;border-radius:2px;
  background:var(--amber)}
.pnl .mwas{position:absolute;top:9px;width:2px;height:17px;border-radius:2px;
  background:var(--text-mute)}
.pnl .mlegend{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--text-mute);margin-top:2px}
.pnl .mlegend .now{color:var(--band-green);font-weight:600;font-variant-numeric:tabular-nums}
.pnl .mlegend .now.under{color:var(--band-red)}
.pnl .mstate{margin-top:10px}

/* ==========================================================================
   THE PHONE FOLD ON THE BILL.
   The bill stage is the newest and the most important screen in the concept
   and it was the tallest: 5,369px at 390, six and a half phone screens, with
   the four line ledger alone taking 1,830 of it. Nothing is hidden here and
   nothing is truncated: the same words are laid out for one hand instead of
   for a desk. The name and its reason run full width, the three money values
   sit on one row under them with their own labels, and the block that lists
   what is not billed yet loses its box padding.
   ========================================================================== */
@media (max-width:760px){
  .against .ah{display:none}
  .against .arow,.against .atot{grid-template-columns:auto auto auto;
    column-gap:14px;row-gap:5px;padding:11px 0 12px;align-items:baseline}
  .against .arow .k,.against .atot .k{grid-column:1 / -1;line-height:1.45}
  .against .arow .k s,.against .atot .k s{margin-top:3px;line-height:1.5}
  .against .arow .n,.against .atot .n{text-align:left;font-size:15px}
  .against .arow .n::before,.against .atot .n::before{
    content:"costed";display:block;font-size:13px;letter-spacing:.1em;
    color:var(--text-mute);margin-bottom:2px}
  .against .arow .n.b::before,.against .atot .n.b::before{content:"billed"}
  .against .arow .s,.against .atot .s{justify-self:end;text-align:right}
  .against .arow .s s{margin-top:4px}
  .against .aopen{padding:12px 13px;margin-top:13px}
  .against .aopen .kv{padding:7px 0}
  .against .note{margin-top:12px}
}