/* FULL BORE app. Redesigned Nov 5 2026 (Matt, option E): rounded corners, dark outlines, solid signal colors, and a
   font each person picks in Settings. The look is no longer tied to the Rootlab Design System. Phone first; from 900px wide it
   becomes a desktop app (tabs in a left sidebar, cards in a grid, sheets as centered dialogs). Everything for the
   desktop lives in the @media blocks at the bottom, so the phone layout is exactly what's above them. */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/static/fonts/AtkinsonNext-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/static/fonts/AtkinsonNext-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/static/fonts/Barlow-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/static/fonts/Barlow-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass";src:url(/static/fonts/Overpass-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass";src:url(/static/fonts/Overpass-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"B612";src:url(/static/fonts/B612-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"B612";src:url(/static/fonts/B612-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --charcoal:#14181c; --mid:#3f4347; --grey:#b8b8b8; --white:#ffffff; --wash:#e4e7ea;
  --on-ink-muted:#b8b8b8; --off:#d9d9d9; --on-off:#231f20;
  --st-red:#8d0f0f; --st-amber:#663b00; --st-blue:#17428c; --st-green:#0d5419; --st-red-bg:#fbecea; --st-amber-bg:#fbf0dc; --st-blue-bg:#e8effb; --st-green-bg:#e6f4e9;
  --ink:var(--charcoal); --muted:var(--mid); --rule:#8c8c8c; --surface:var(--white);
  --mono:"Atkinson Hyperlegible Next",Verdana,Tahoma,sans-serif; /* the app's text font; the name is older than the redesign */
  --bar:64px; --topbar:#14181c; --r:10px; --r-lg:14px; --side:#14181c; --on-side:#e9ecef;
  /* Signal colors: solid fills, the same in every theme, each with the text color that clears 7:1 on it (test_static) */
  --sig-red:#a80c24; --on-sig-red:#ffffff; --sig-amber:#ff7a12; --on-sig-amber:#000000; --sig-yellow:#ffd100; --on-sig-yellow:#000000;
  --sig-blue:#2a3036; --on-sig-blue:#ffffff; /* waiting on you: charcoal, because #0e4fa8 is the Build stop */ --sig-green:#0a6632; --on-sig-green:#ffffff;
}
/* The font picked in Settings. Atkinson Hyperlegible Next is the default, so it has no rule. Easy reading comes later in this file and wins. */
:root[data-font="barlow"]{--mono:"Barlow",Verdana,Tahoma,sans-serif}
:root[data-font="overpass"]{--mono:"Overpass",Verdana,Tahoma,sans-serif}
:root[data-font="b612"]{--mono:"B612",Verdana,Tahoma,sans-serif}
/* Dark mode: the same design with ink and paper swapped (Rootlab Design System dark theme: white on charcoal,
   grey for notes, mid grey for rules). Because every rule above uses these tokens, swapping them flips the whole
   app, and a "dark" card or primary button still stands out the opposite way. The top bar stays near-black. */
:root[data-theme="dark"]{--charcoal:#f3f3f2;--white:#231f20;--mid:#b8b8b8;--grey:#5f6060;--wash:#161314;--topbar:#141213;--on-ink-muted:#4a4b4b;--off:#3d3839;--on-off:#f3f3f2;--st-red:#ff9d94;--st-amber:#ffc266;--st-blue:#9ec0ff;--st-green:#8fe0a0;--st-red-bg:#3a1a18;--st-amber-bg:#352610;--st-blue-bg:#17233a;--st-green-bg:#16301c;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--charcoal:#f3f3f2;--white:#231f20;--mid:#b8b8b8;--grey:#5f6060;--wash:#161314;--topbar:#141213;--on-ink-muted:#4a4b4b;--off:#3d3839;--on-off:#f3f3f2;--st-red:#ff9d94;--st-amber:#ffc266;--st-blue:#9ec0ff;--st-green:#8fe0a0;--st-red-bg:#3a1a18;--st-amber-bg:#352610;--st-blue-bg:#17233a;--st-green-bg:#16301c;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--wash);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
a{color:var(--ink)}

.phone{max-width:480px;min-height:100%;margin:0 auto;background:var(--wash);display:flex;flex-direction:column;position:relative}
@media (min-width:520px){.phone{border-left:1px solid var(--rule);border-right:1px solid var(--rule)}}

/* top bar */
.top{position:sticky;top:0;z-index:5;height:var(--bar);flex-shrink:0;padding:0 16px;padding-top:env(safe-area-inset-top,0);
  background:var(--topbar,#231f20);color:#ffffff;display:flex;align-items:center;justify-content:space-between;gap:12px}
.top .who{display:flex;flex-direction:column;min-width:0}
.top .app{font-size:16px;font-weight:700;letter-spacing:.02em}
.top .person{font-size:14px;color:#b8b8b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{font-size:13px;border:1px solid #b8b8b8;padding:4px 10px;min-height:44px;min-width:64px;cursor:pointer;white-space:nowrap;background:none;color:inherit}
.banner{padding:10px 16px;font-size:13px;line-height:18px}
.banner.off{background:var(--mid);color:var(--white)}
.banner.viewas{background:var(--charcoal);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.banner.viewas .chip{border-color:var(--white);color:var(--white);min-height:36px;padding:4px 10px}
.side-viewas{display:none}

/* body */
main{flex-grow:1;padding:16px 16px calc(var(--bar) + 24px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:14px}
h2{margin:0;font-size:20px;font-weight:700}
h2.big{font-size:22px;line-height:28px}
.label{font-size:14px;letter-spacing:.04em;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:15px}
.jobline{font-size:16px;font-weight:700}
.bold{font-weight:700}
.stack{display:flex;flex-direction:column;gap:14px}
.stack.tight{gap:8px}
.row{display:flex;gap:8px;align-items:center}
.row.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* A black outline means you can press it. Read-only cards are flat white on the wash (round 2, Nov 5 2026). A card inside a card takes the wash. */
.card{border:0;border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.card .card{background:var(--wash)}
button.card,a.card{border:2px solid var(--charcoal);padding:14px}
.sel-tick{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-10px 0 -10px -10px}
.sel-tick input{width:24px;height:24px;margin:0;accent-color:var(--charcoal)} /* 24 px box inside a 44 px tap area (the label) */
.card.sel-on,.jobs-line.sel-on{outline:2px solid var(--charcoal);outline-offset:-2px}
.sel-bar{position:sticky;top:calc(var(--bar) + 8px);z-index:3}
.card.strong{border:0;padding:18px;gap:10px}
button.card.strong{border:2px solid var(--charcoal);padding:16px}
.card.dark{background:var(--charcoal);color:var(--white);border-color:var(--charcoal)}
.card.dark .muted,.card.dark .label{color:var(--on-ink-muted)}
.card .title{font-size:20px;line-height:26px}
.card .head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{font-size:12px;border:1px solid var(--charcoal);padding:3px 8px;white-space:nowrap}
.tag.solid{background:var(--charcoal);color:var(--white);font-weight:700}
.empty{padding:16px;font-size:16px;color:var(--ink);background:var(--surface)}
/* Start-up and loading messages: always the full ink colour on the page colour (never white on white), in every
   style option, and visible from the first paint so a slow start doesn't look like a broken page. */
.boot{display:flex;gap:12px;align-items:flex-start;margin:24px 16px;padding:16px;border:2px solid var(--ink,#231f20);background:var(--surface,#ffffff);color:var(--ink,#231f20);font-size:16px;line-height:1.5}
.boot-dot{flex:none;width:14px;height:14px;margin-top:5px;border-radius:50%;background:var(--ink,#231f20);animation:boot-pulse 1.1s ease-in-out infinite}
@keyframes boot-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.boot-dot{animation:none}}

.btn{min-height:48px;min-width:44px;padding:0 14px;border:1px solid var(--charcoal);background:var(--white);color:var(--charcoal);font-size:15px;text-align:center}
.btn.strong{border-width:2px;font-weight:700}
.btn.primary{min-height:56px;border:none;background:var(--charcoal);color:var(--white);font-size:18px;font-weight:700}
.btn.primary.sm{min-height:48px;font-size:15px}
.btn.off,.btn:disabled{border:none;background:var(--off);color:var(--on-off);cursor:default}
.btn.dashed{border:2px dashed var(--charcoal)}
.btn.photo{min-height:120px}
.btn.photo img{max-height:110px;max-width:100%;display:block;margin:0 auto}
.btn.block{width:100%}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:2px solid var(--charcoal)}
.seg button{min-height:52px;border:none;background:var(--white);font-size:15px}
.seg button[aria-pressed="true"]{background:var(--charcoal);color:var(--white);font-weight:700}
.pick{display:flex;gap:8px;flex-wrap:wrap}
.pick button{min-height:44px;padding:0 14px;border:1px solid var(--charcoal);background:var(--white);font-size:14px}
.pick button[aria-pressed="true"]{border-width:2px;background:var(--charcoal);color:var(--white)}

label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea{border:2px solid var(--charcoal);border-radius:var(--r);background:var(--white);color:var(--charcoal);
  padding:10px;font-size:16px;min-height:48px;width:100%}
.field textarea{min-height:96px;resize:vertical}

.big-num{font-size:34px;line-height:40px;font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column}
.list>.item{border-bottom:1px solid var(--rule);padding:10px 0;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.list>.item:last-child{border-bottom:none}
.list>.item>*{min-width:0}
.list>.item>.btn{flex:0 1 auto;overflow-wrap:anywhere}
.list>.item>.tag{flex:none} /* a status chip keeps its full word; the text beside it wraps instead (round 9: Tarde was cut at 320px) */

/* bottom tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:5;max-width:480px;margin:0 auto;height:calc(var(--bar) + env(safe-area-inset-bottom,0));
  padding-bottom:env(safe-area-inset-bottom,0);border-top:2px solid var(--charcoal);background:var(--white);display:grid}
.tabs button{border:none;background:var(--white);font-size:14px;min-width:0;overflow-wrap:anywhere;line-height:1.1;padding:0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.tabs .tab-ic{flex:none}
.tabs .tab-text{min-width:0;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none}
.tabs.five button{letter-spacing:-.01em;padding:0 1px}
.tabs.five button{font-size:13px}
.tabs{grid-template-columns:repeat(var(--tab-cols,4),minmax(0,1fr))}
.tabs button[aria-current="page"]{background:var(--charcoal);color:var(--white);font-weight:700}
/* Small or zoomed phones (under 360px): Spanish tab names like Revisiones and Preguntas need a smaller size to fit
   a 4- or 5-across bar without spilling past the screen edge (usability round 9). */
@media (max-width:359px){.tabs button{font-size:12px;padding:0 1px;letter-spacing:-.02em}.tabs.five button{font-size:11px}}

/* States. Solid signal colors, like safety signs: red stopped, orange late, yellow gone quiet, blue waiting on
   you, green just finished. Always a word AND a shape, never colour alone. */
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:3px 9px;border:0;border-radius:8px;white-space:nowrap}
.st::before{font-size:11px;line-height:1}
.st-red{color:var(--on-sig-red);background:var(--sig-red)}.st-red::before{content:"\25A0"}      /* square: blocked or failed */
.st-amber{color:var(--on-sig-amber);background:var(--sig-amber)}.st-amber::before{content:"\25B2"} /* triangle: late */
.st-blue{color:var(--on-sig-blue);background:var(--sig-blue)}.st-blue::before{content:"\25CF"}    /* dot: waiting on you */
.st-green{color:var(--on-sig-green);background:var(--sig-green)}.st-green::before{content:"\2713"} /* check: just finished */
.st-yellow{color:var(--on-sig-yellow);background:var(--sig-yellow)}.st-yellow::before{content:"\25C6"} /* diamond: a project has gone quiet */
.tag.st{padding:3px 8px}
.kb-card.kb-late{border-left-color:var(--st-amber)}
.wg-late{border-left-color:var(--st-amber)}
.banner.err{background:var(--st-red-bg);color:var(--st-red);border-bottom:2px solid var(--st-red)}
.banner.ok{background:var(--st-green-bg);color:var(--st-green);border-bottom:2px solid var(--st-green)}

.hold{position:relative;overflow:hidden;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold.primary{border:2px solid var(--charcoal)}
.hold-fill{position:absolute;inset:0;background:var(--off);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hold>.hold-label,.hold>.hold-note{position:relative}
.hold-note{font-size:12px;font-weight:400}
.hold.compact{min-height:48px;min-width:112px;flex:0 0 auto;padding:0 12px;font-size:14px}
.hold.compact .hold-note{display:none}
.hold.holding .hold-fill{animation:holdfill var(--hold-ms,1.2s) linear forwards}
.hold.holding{background:var(--white);color:var(--on-off)}
.hold.holding .hold-label,.hold.holding .hold-note{color:var(--on-off)}
@keyframes holdfill{to{transform:scaleX(1)}}

/* Now header, section switcher and the More page */
.now-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.now-head h1,.now-title{margin:0;font-size:28px;line-height:32px;font-weight:700}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.subnav button{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;min-height:48px;border:2px solid var(--charcoal);background:var(--white);color:var(--charcoal);font-size:15px;padding:0 12px}
.subnav button[aria-selected="true"]{background:var(--charcoal);color:var(--white);font-weight:700}
.subnav .back{flex:0 0 auto;border-color:var(--rule)}
.more-list{display:flex;flex-direction:column;gap:10px}
.more-item{min-height:60px;text-align:left;justify-content:flex-start;padding:0 16px;font-size:17px}

/* sign in */
.signin{padding:40px 24px;display:flex;flex-direction:column;gap:20px}
.signin-pw summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.signin h1{margin:0;font-size:40px;line-height:44px;font-weight:700}

/* sheet (pickers, forms over the screen) */
.sheet-bg{position:fixed;inset:0;background:rgba(35,31,32,.5);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--white);width:100%;max-width:480px;max-height:88vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0));
  border-top:2px solid var(--charcoal);display:flex;flex-direction:column;gap:12px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom,0));z-index:30;
  background:var(--charcoal);color:var(--white);padding:12px 16px;font-size:14px;max-width:440px;width:calc(100% - 32px)}

/* wrappers the screens use. On a phone they're plain stacks (same 14px gap as main), so nothing moves. */
.cards,.split,.split>div,.narrow{display:flex;flex-direction:column;gap:14px}
.side-who{display:none}

/* ---------- desktop (900px and up) ---------- */
@media (min-width:900px){
  .side-viewas{display:block;width:100%;min-height:40px;font-size:13px;margin-bottom:10px;text-align:center}
  .phone{max-width:none;background:var(--wash);border:none;display:block}
  body.signed-in .phone{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:var(--bar) auto 1fr;
    grid-template-areas:"top top" "side banners" "side main"}
  .top{grid-area:top;padding:0 24px}
  body.signed-in .top .person{display:none}
  .top .app{font-size:17px}
  #banners{grid-area:banners}
  .banner{padding:10px 40px}

  /* sidebar */
  .tabs{grid-area:side;position:sticky;top:var(--bar);bottom:auto;left:auto;right:auto;max-width:none;margin:0;
    height:calc(100vh - var(--bar));padding:16px 0;border-top:none;border-right:1px solid var(--rule);
    display:flex!important;flex-direction:column;gap:2px;overflow-y:auto}
  .tabs[hidden]{display:none!important}
  .tabs button,.tabs.five button{flex:0 0 auto;min-height:44px;padding:0 24px;text-align:left;font-size:15px;flex-direction:row;justify-content:flex-start;gap:12px}
  .tabs .tab-text{text-align:left}
  /* every tab listed, no More button: a little air between the groups, and screens without an icon line up with the ones that have one */
  .tabs .tab-ic-sp{flex:none;width:22px;height:22px}
  .tabs.flat button.grp-start:not(:first-child){margin-top:10px}
  .tabs .side-who{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding:14px 24px 4px;border-top:1px solid var(--rule);font-size:13px}
  .tabs .side-who .label{font-size:12px}

  /* content */
  main{grid-area:main;width:100%;max-width:1200px;justify-self:center;padding:28px 40px 56px;gap:16px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
  .narrow{width:100%;max-width:640px}
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 32px;align-items:start}
  .split.wide-left{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
  .split>.span2{grid-row:span 2}
  .split .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  main>.btn,.split>div>.btn{align-self:flex-start;min-width:200px;padding:0 24px}
  main>label.field,main>.ops-row{max-width:520px}
  .big-num{font-size:36px}

  /* sign in: one centered column */
  .signin{max-width:480px;margin:40px auto 0;border:1px solid var(--rule)}

  /* sheets become centered dialogs */
  .sheet-bg{align-items:center;padding:24px}
  .sheet{max-width:520px;max-height:calc(100vh - 48px);padding:24px;border:2px solid var(--charcoal);gap:14px}
  .sheet>.btn{width:100%}

  .toast{left:auto;right:24px;bottom:24px;transform:none;width:auto;max-width:420px}
}

/* hover, only where there's a mouse (phones never see these) */
@media (min-width:900px) and (hover:hover){
  .btn:hover,.pick button:hover,.seg button:hover,.chip:hover{background:var(--wash)}
  .btn.primary:hover{background:#3d3839}
  :root[data-theme="dark"] .btn.primary:hover{background:#d6d6d4}
  .card.dark .btn:not(.primary):hover{background:var(--wash)}
  .btn:disabled:hover,.btn.off:hover{background:var(--off)}
  .pick button[aria-pressed="true"]:hover,.seg button[aria-pressed="true"]:hover{background:var(--charcoal)}
  .chip:hover{color:var(--charcoal)}
  .tabs button:hover{background:var(--wash)}
  .tabs button[aria-current="page"]:hover{background:var(--charcoal)}
  main .jobs-row{padding-left:8px;padding-right:8px;margin:0 -8px;width:calc(100% + 16px)}
  main .jobs-row:hover{background:var(--wash)}
  main button.jobs-row:hover .jobs-l .bold{text-decoration:underline}
  a:hover{text-decoration-thickness:2px}
}
/* keyboard focus stays visible on dark surfaces too */
.top :focus-visible,.card.dark :focus-visible,.tabs [aria-current="page"]:focus-visible,.btn.primary:focus-visible{outline-color:var(--charcoal);box-shadow:0 0 0 2px var(--white) inset}
.top :focus-visible,.card.dark :focus-visible{outline-color:var(--white)}

@media (prefers-color-scheme:dark) and (hover:hover){:root:not([data-theme="light"]) .btn.primary:hover{background:#d6d6d4}}

/* usability round 2: errors under the field, the undo bar, the clock bar on Home */
.field .invalid,input.invalid,textarea.invalid,select.invalid{border:2px solid var(--charcoal);outline:2px solid var(--charcoal);outline-offset:1px}
.field-err{display:block;font-size:14px;font-weight:700;color:var(--charcoal);padding-top:2px}
.field-err::before{content:"! "}
.opt{font-weight:400;color:var(--muted)}
.undo-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom,0));z-index:31;
  background:var(--charcoal);color:var(--white);padding:6px 6px 6px 16px;font-size:15px;max-width:440px;width:calc(100% - 32px);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.undo-bar{position:fixed}
.undo-bar::after{content:"";position:absolute;left:16px;right:6px;bottom:4px;height:3px;background:var(--on-ink-muted);transform-origin:left}
.undo-bar.run::after{animation:undoleft var(--undo-ms,10s) linear forwards}
@keyframes undoleft{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.undo-bar.run::after{animation:none;display:none}}
.undo-btn{min-height:44px;min-width:88px;border:1px solid var(--white);background:transparent;color:var(--white);font-weight:700;font-size:15px}
.clockbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:2px solid var(--charcoal);margin-bottom:12px}
.clockbar.on{background:var(--sig-green);color:var(--on-sig-green);border-color:var(--sig-green)}
.clockbar.on .btn{background:#ffffff;color:#14181c;border-color:#ffffff}
.clockbar .btn{min-height:44px;flex-shrink:0}
.textlink{background:none;border:none;padding:10px 0;min-height:44px;text-decoration:underline;color:var(--charcoal);font-size:14px;text-align:left}
@media (min-width:900px){.undo-bar{bottom:24px}}

/* ---------- Shop floor theme (Oct 26, Matt): black and safety yellow, very high contrast, bigger targets. Readable
   in a bright shop and from arm's length. Same tokens as light/dark, so every screen follows. Comes after the dark
   rules so it wins whatever the phone's own dark setting is. */
:root[data-theme="shop"]{--charcoal:#ffd400;--white:#000000;--mid:#ffe680;--grey:#806a00;--wash:#0d0d0d;--topbar:#ffd400;--on-ink-muted:#2a2400;--off:#3a3000;--on-off:#ffd400;--st-red:#ff9d94;--st-amber:#ffb347;--st-blue:#9ec0ff;--st-green:#8fe0a0;--st-red-bg:#2a0d0b;--st-amber-bg:#2a1b00;--st-blue-bg:#0b1630;--st-green-bg:#0a2210;color-scheme:dark}
:root[data-theme="shop"]{--side:#000000;--on-side:#ffd400}
:root[data-theme="shop"] .top{color:#000}
:root[data-theme="shop"] .top .person{color:#1a1a1a}
:root[data-theme="shop"] .top .chip{border-color:#000;color:#000}
:root[data-theme="shop"] body{font-size:16px}
:root[data-theme="shop"] .btn{min-height:56px;border-width:2px;font-weight:700}
:root[data-theme="shop"] .btn.sm{min-height:52px}
:root[data-theme="shop"] .btn.primary{min-height:64px;font-size:20px}
:root[data-theme="shop"] .card{outline:2px solid var(--charcoal);outline-offset:-2px} /* the bright-shop theme keeps its outlines */
:root[data-theme="shop"] input,:root[data-theme="shop"] select,:root[data-theme="shop"] textarea{border-width:2px}
:root[data-theme="shop"] :focus-visible{outline:3px solid #ffffff;outline-offset:2px}
@media (hover:hover){:root[data-theme="shop"] .btn.primary:hover{background:#ffe14d}
  :root[data-theme="shop"] .btn:not(.primary):hover{background:#1f1a00}}

/* ---------- Night shift and Office (Oct 28, Matt): two more looks from the style proposals. Night shift is a real dark mode
   (dark gray, not black; off-white text; softened status colors; raised panels are lighter). Office is a cool gray page with
   slightly lighter panels to cut glare on a monitor. Same tokens as the other themes, all text 7:1 or better (test_static). */
:root[data-theme="night"]{--charcoal:#e8e8e6;--white:#1b1e21;--mid:#a9aeb3;--grey:#3a4046;--wash:#121416;--topbar:#0e1012;--rule:#5b6268;--on-ink-muted:#3c4147;--off:#2c3136;--on-off:#e8e8e6;--st-red:#f2928c;--st-amber:#e8b45e;--st-blue:#8fb4f2;--st-green:#7fcb98;--st-red-bg:#221a1b;--st-amber-bg:#242016;--st-blue-bg:#181f29;--st-green-bg:#17241c;color-scheme:dark}
:root[data-theme="office"]{--charcoal:#1f2326;--white:#f6f7f7;--mid:#434a4f;--grey:#b9bfc2;--wash:#eceeef;--topbar:#1f2326;--rule:#8e9498;--on-ink-muted:#b9bfc2;--off:#d5d9db;--on-off:#1f2326;--st-red:#8a1d23;--st-amber:#684000;--st-blue:#164a89;--st-green:#205428;--st-red-bg:#faeeed;--st-amber-bg:#f9f2e4;--st-blue-bg:#eaf0f8;--st-green-bg:#e9f3ec;color-scheme:light}
@media (hover:hover){:root[data-theme="night"] .btn.primary:hover{background:#cfcfcd}
  :root[data-theme="office"] .btn.primary:hover{background:#3a4146}}

/* ---------- Easy reading (Oct 26, Matt): Atkinson Hyperlegible (Braille Institute; I l 1, O 0, b d look different),
   more space between letters, words and lines, no ALL-CAPS labels, left-aligned text. Works with any theme. */
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/AtkinsonHyperlegible-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/AtkinsonHyperlegible-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root[data-read="easy"]{--mono:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif}
:root[data-read="easy"] body{font-size:17px;line-height:1.6;letter-spacing:.03em;word-spacing:.12em}
:root[data-read="easy"] *{text-transform:none!important;font-style:normal}
:root[data-read="easy"] .label{letter-spacing:.03em;font-size:15px}
:root[data-read="easy"] p,:root[data-read="easy"] span,:root[data-read="easy"] label,:root[data-read="easy"] li{text-align:left}
:root[data-read="easy"]:not([data-theme="dark"]):not([data-theme="shop"]):not([data-theme="night"]):not([data-theme="office"]){--wash:#f7f3ea;--white:#fffdf7}
@media (prefers-color-scheme:dark){:root[data-read="easy"]:not([data-theme]){--wash:#161314;--white:#231f20}}

/* Kanban view option (Tasks and Pieces): columns scroll sideways inside their own box, cards are tap targets */
.kb-seg{max-width:560px;display:flex;flex-wrap:wrap}
.kb-seg button{flex:1 1 auto;padding:0 10px;white-space:nowrap}
.kb-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(236px,272px);gap:12px;align-items:start;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;max-width:100%}
.kb-board.kb-three{grid-auto-columns:minmax(236px,1fr);grid-auto-flow:column}
.kb-col{display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--rule);background:var(--surface);padding:10px;scroll-snap-align:start}
.kb-col.kb-none{opacity:.7}
.kb-head{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--charcoal);padding-bottom:8px}
.kb-cards{display:flex;flex-direction:column;gap:8px;min-width:0}
.kb-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;min-height:48px;width:100%;padding:10px;border:1px solid var(--rule);border-left:3px solid var(--charcoal);background:var(--wash);color:inherit;font:inherit}
.kb-card .bold,.kb-card .small{overflow-wrap:anywhere;min-width:0}
.kb-card:disabled{opacity:1;cursor:default}
.kb-card.kb-late{border-left-width:6px}
.kb-wait{white-space:normal}
.wg-wrap{overflow-x:auto;border:1px solid var(--rule);background:var(--surface)}
.wg{border-collapse:collapse;width:100%;min-width:720px}
.wg th,.wg td{border:1px solid var(--rule);padding:8px 6px;text-align:center;vertical-align:middle;font-weight:400}
.wg thead th{font-size:13px;white-space:nowrap}
.wg .wg-name{text-align:left;position:sticky;left:0;background:var(--surface);min-width:96px;font-weight:700;z-index:1}
.wg-c{min-width:68px}
.wg-c .bold,.wg-c .small{display:block}
.wg-zero{color:var(--muted,#777)}
.wg-over{background:var(--charcoal);color:var(--white)}
.wg-late{border-left:3px solid var(--charcoal)}
.wg-today{background:var(--wash)}
.wg-sum{background:var(--wash)}
.wg-foot th,.wg-foot td{border-top:3px solid var(--charcoal)}
.wg-note{margin:6px 0}
.wg-hint{margin:0 0 6px}
.ag-note{margin:6px 0 10px}
.ln-cols{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:900px){.wg-hint{display:none}.ln-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ln-lane .kb-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.ln-list{display:flex;flex-direction:column;gap:18px}
.ln-lane{display:flex;flex-direction:column;gap:8px}
.ln-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 0;border-bottom:3px solid var(--charcoal)}
.ag-list{display:flex;flex-direction:column;gap:14px;max-width:760px}
.ag-day{display:flex;flex-direction:column;gap:8px}
.ag-over .kb-head{border-bottom-width:3px}
.ag-none{opacity:.8}
.kb-item{display:flex;flex-direction:column;min-width:0}
.kb-go{min-height:44px;width:100%;justify-content:center;margin:8px 0 0}
@media (min-width:900px){.kb-board.kb-three{grid-auto-columns:minmax(0,1fr)}.kb-card:not(:disabled):hover{background:var(--surface)}}

/* Admin tab (screens/sysadmin.js): state words carry the meaning, the border weight just helps the eye */
.sa-body{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.sa-state{font-size:13px;letter-spacing:.03em;border:1px solid var(--rule);padding:2px 8px;white-space:nowrap;flex:none}
.sa-state.sa-ok{border-color:var(--charcoal)}
.sa-state.sa-watch{border:2px dashed var(--charcoal);font-weight:700}
.sa-state.sa-problem{background:var(--st-red-bg);color:var(--st-red);border:2px solid var(--st-red);font-weight:700}
.sa-state.sa-info{color:var(--muted)}

/* talk + scan */
.talk-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.talk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px}
.talk-btn.live{border-width:3px;font-weight:700}
.scan-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;font-weight:700}
.scan-layer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.scan-card{background:var(--white);color:var(--charcoal);width:100%;max-width:520px;padding:16px;display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--charcoal)}
.scan-card .ops-video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--charcoal)}
@media (min-width:900px){.scan-layer{align-items:center}.scan-card{border:3px solid var(--charcoal)}}
:root[data-theme="shop"] .talk-btn,:root[data-theme="shop"] .scan-btn{min-height:60px;font-size:18px}

/* station tablet: name tiles, PIN pad, idle warning */
#stout{min-height:48px;font-weight:700;border-width:2px}
.station{max-width:760px;margin:0 auto;padding:24px 16px 32px;display:flex;flex-direction:column;gap:16px}
.station h1{margin:0;font-size:40px;line-height:44px;font-weight:700}
.station .big-msg{font-size:20px;font-weight:700}
.st-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-tile{min-height:84px;font-size:22px;font-weight:700;border:3px solid var(--charcoal);background:var(--white);color:var(--charcoal);padding:0 12px;overflow-wrap:anywhere}
.st-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:420px;width:100%;margin:0 auto}
.st-key{min-height:84px;font-size:30px;font-weight:700;border:3px solid var(--charcoal);background:var(--white);color:var(--charcoal)}
.st-key.word{font-size:18px}
.st-dots{display:flex;gap:16px;justify-content:center;margin:8px 0}
.st-dots span{width:28px;height:28px;border:3px solid var(--charcoal);border-radius:50%}
.st-dots span.on{background:var(--charcoal)}
.st-err{min-height:28px;text-align:center;font-size:18px;font-weight:700}
.st-err.show::before{content:"! "}
.idle-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--charcoal);color:var(--white);padding:16px;font-size:20px;font-weight:700;text-align:center;border-top:4px solid var(--white)}
.badge-img{display:block;width:200px;height:200px;border:1px solid var(--charcoal);background:#fff}
@media (max-width:520px){.st-tiles{grid-template-columns:1fr}}
@media print{body *{visibility:hidden}.badge-print,.badge-print *{visibility:visible}.badge-print{position:absolute;left:0;top:0}}

/* ---------- driving mode (step 7): big type, two buttons, nothing to type ---------- */
.drive-open{min-height:60px;margin-bottom:12px;width:100%}
.drive-layer{position:fixed;inset:0;z-index:60;background:var(--wash);color:var(--ink);display:flex;flex-direction:column;gap:16px;padding:16px;overflow:auto;-webkit-overflow-scrolling:touch}
.drive-top{display:flex;flex-direction:column;gap:4px}
.drive-state{font-size:22px;font-weight:700;letter-spacing:0}
.drive-main{display:flex;flex-direction:column;gap:12px;flex:1 0 auto}
.drive-label{font-size:20px;font-weight:700;color:var(--muted)}
.drive-vendor{font-size:40px;line-height:1.1;font-weight:800;overflow-wrap:anywhere}
.drive-item{font-size:28px;line-height:1.2;overflow-wrap:anywhere}
.drive-job{font-size:22px;color:var(--muted)}
.drive-addr{font-size:24px;line-height:1.25;overflow-wrap:anywhere}
.drive-none{font-size:32px;font-weight:700}
.drive-note{font-size:22px}
.btn.drive-btn{min-height:96px;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;width:100%;padding:12px 16px}
.drive-rest{display:flex;flex-direction:column;gap:6px}
.drive-next{font-size:22px;overflow-wrap:anywhere}
.drive-foot{display:flex;flex-wrap:wrap;gap:12px;position:sticky;bottom:-16px;background:var(--wash);padding:12px 0 16px;margin-top:auto}
.btn.drive-sm{flex:1 1 120px;min-height:64px;font-size:20px}
body.driving{overflow:hidden}
:root[data-theme="shop"] .drive-vendor{font-size:44px}
:root[data-theme="shop"] .drive-item{font-size:30px}
:root[data-theme="shop"] .drive-job,:root[data-theme="shop"] .drive-addr,:root[data-theme="shop"] .drive-next{font-size:24px}
:root[data-theme="shop"] .btn.drive-btn{min-height:120px;font-size:34px}
:root[data-theme="shop"] .btn.drive-sm{min-height:80px;font-size:22px}
@media (min-width:900px){.drive-layer{align-items:center}.drive-layer>*{width:min(720px,100%)}}
@media (max-height:800px){
  .drive-layer{gap:10px}
  .drive-vendor{font-size:32px}.drive-item{font-size:24px}.drive-job,.drive-addr,.drive-next,.drive-label{font-size:19px}
  .drive-main{gap:8px}.btn.drive-btn{min-height:84px;font-size:26px}
  .btn.drive-sm{flex:1 1 120px;min-height:60px;font-size:19px}.drive-foot{gap:8px}
}
/* search and filters (filters.js) */
.f-bar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:10px 0 14px}
.f-search{flex:1 1 260px;min-width:0}
.f-search input{width:100%;min-height:44px}
.f-more{flex:1 1 100%;order:3}
.f-more>summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none;min-height:44px}
.f-more>summary::-webkit-details-marker{display:none}
.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:10px 0 2px}
.f-field select{min-height:44px;width:100%}
/* Nov 2: Options row on Tasks and Projects (review round 2). Folded by default; the summary shows the current choices. */
.ls-opts{margin:0 0 12px;padding:4px 16px}
.ls-opts>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;cursor:pointer;list-style:none}
.ls-opts>summary::-webkit-details-marker{display:none}
.ls-opts>summary .cur{font-size:13px;color:var(--muted)}
.ls-optbody{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.ls-optrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ls-optrow .field{margin:0}
.ls-opts .f-grid{padding:0}
.ls-search{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:10px 0 12px}
.ls-search .f-search{flex:1 1 220px}
.f-count{align-self:center;order:4}
@media (min-width:1000px){.f-more{flex:0 0 auto;order:0}.f-more[open]{flex:1 1 100%;order:3}}

/* ---------- tablet (600 to 899px): left rail, two columns. Same five sections, same order, same icons. ---------- */
@media (min-width:600px) and (max-width:899px){
  body{background:var(--white)}
  .phone{max-width:none;border:none;display:block}
  body.signed-in .phone{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:var(--bar) auto 1fr;
    grid-template-areas:"top top" "side banners" "side main"}
  .top{grid-area:top;padding:0 20px}
  #banners{grid-area:banners}
  .banner{padding:10px 24px}
  .tabs{grid-area:side;position:sticky;top:var(--bar);bottom:auto;left:auto;right:auto;max-width:none;margin:0;
    height:calc(100vh - var(--bar));padding:12px 0;border-top:none;border-right:1px solid var(--rule);
    display:flex!important;flex-direction:column;gap:6px;overflow-y:auto}
  .tabs[hidden]{display:none!important}
  .tabs button,.tabs.five button{flex:0 0 auto;min-height:76px;padding:8px 6px;font-size:15px;gap:5px}
  .tabs .tab-ic{width:26px;height:26px}
  .tabs .side-who{display:none}
  main{grid-area:main;width:100%;max-width:none;padding:20px 24px 48px;gap:16px}
  .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px;align-items:start}
  .split>.span2{grid-row:span 2}
  .split .cards{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .narrow{width:100%;max-width:640px}
  .sheet-bg{align-items:center;padding:24px}
  .sheet{max-width:520px;max-height:calc(100vh - 48px);border:2px solid var(--charcoal)}
  .toast{bottom:24px}
  .undo-bar{bottom:24px}
}

/* Tasks views: five buttons become one labelled picker on a phone */
/* label.field sets display:flex, so these need its specificity: buttons on desks, the picker on phones only */
label.field.kb-pick{display:none}
@media (max-width:599px){.kb-seg.many{display:none}label.field.kb-pick{display:flex}}
.drive-help{margin:0;padding:0 0 8px;font-size:15px;color:var(--mid)}

.jobs-sort{max-width:260px;margin:0 0 12px}
/* reference files (refs.js) */
.ref-card{gap:8px}
.ref-rows{display:flex;flex-direction:column;gap:2px}
.ref-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line,#ddd)}
.ref-row:first-child{border-top:0}
.ref-kind{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.8}
.ref-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ref-name{overflow-wrap:anywhere}
.ref-r{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ref-r a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media (max-width:520px){.ref-row{flex-wrap:wrap}.ref-l{flex:1 1 calc(100% - 60px)}.ref-r{flex:1 0 100%;justify-content:flex-start;padding-left:54px}}
/* Admin tab: the 'what each person sees' checklist */
.sa-check{flex:none;display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.sa-check[hidden]{display:none}
.sa-check input{width:24px;height:24px;flex:none;margin:0}

/* a card the person was just taken to from a ping */
.land-on{outline:3px solid var(--charcoal,#231f20);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,200,0,.45)}

/* Usability round 6 */
/* One tick style everywhere: the 22 px box the work order and release sheets already use, not the browser's 13 px box. */
input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--charcoal)}
/* The Reference files fold-out row was 21 px tall: make it a 44 px row with the same +/− as the work order groups. */
details.ref-card>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px}
details.ref-card>summary::-webkit-details-marker{display:none}
details.ref-card>summary::after{content:"+";font-size:20px;line-height:1;margin-left:8px}
details.ref-card[open]>summary::after{content:"−"}
.tabs .tab-grp{display:block;margin:14px 0 2px;padding:0 24px;font-size:13px;color:var(--muted)}
.tabs:not(.flat) .tab-grp{display:none}
/* Usability round 7: the Admin tab in two columns on a wide screen, one column on phones and tablets */
.sa-cols,.sa-col{display:flex;flex-direction:column;gap:14px}
@media (min-width:1200px){.sa-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px}}

/* ---------- usability round 8 (option D): desktop sidebar grouped by kind of work ----------
   Now, then Work / Talk / Time / Money / Shop headings that fold (open state kept per computer), Settings and the
   name in a footer that stays in view, Open browser window and View as up in the top bar. Phones keep the bottom bar. */
.top-acts{display:none}
@media (min-width:900px){
  .top-acts{display:flex;gap:8px;margin-left:auto}
  .top-acts .top-act{border-color:var(--on-ink-muted)}
  .tabs .side-hd,.tabs.five .side-hd{display:flex;align-items:center;gap:8px;width:100%;flex:0 0 auto;min-height:32px;margin-top:4px;padding:0 24px;
    border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;letter-spacing:.02em;text-align:left;cursor:pointer}
  .tabs .side-hd>span:first-child{flex:1;min-width:0}
  .tabs .side-hd .side-n{letter-spacing:0;font-variant-numeric:tabular-nums}
  .tabs .side-hd .side-car{flex:none;width:12px;text-align:center}
  .tabs .side-grp.plain{margin-top:10px}
  .tabs .side-grp{display:flex;flex-direction:column;gap:2px}
  .tabs .side-grp[hidden]{display:none!important}
  .tabs .side-grp button{padding-left:58px} /* lines up with the word after the Now icon */
  .tabs .side-who{position:sticky;bottom:-16px;margin-bottom:-16px;padding:10px 16px 12px 24px;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;background:var(--surface)}
  .tabs .side-me{display:flex;flex-direction:column;gap:2px;min-width:0}
  .tabs .side-me .bold{overflow-wrap:anywhere}
  .tabs .side-foot{display:flex;flex-direction:column;gap:4px;flex:none}
  .tabs .side-foot .side-foot-btn{min-height:40px;padding:0 10px;border:1px solid var(--rule);font-size:13px;justify-content:center}
  .tabs .side-foot .side-foot-btn[aria-current="page"]{border-color:var(--charcoal)}
}
/* With a mouse the rows can be 40px (still well over the 24px floor); touch screens 900px and wider keep 44px. */
@media (min-width:900px) and (pointer:fine){
  .tabs .side-grp button,.tabs.five .side-grp button{min-height:40px}
}
@media (min-width:900px) and (hover:hover){
  .tabs .side-hd:not(.plain):hover{background:var(--wash);color:var(--ink)}
}
/* Bids on a phone: the "not refreshed yet" note goes under the button instead of squeezing it to three lines */
@media (max-width:519px){.bp-refresh{flex-direction:column;align-items:flex-start}}
/* Round 9: while the app boots the top bar is still hidden, so hold its space. When it appears the content doesn't
   jump down 64px (that was the whole of the PM Now's 0.12 layout shift). */
.top[hidden] ~ main:has(> .boot){position:relative;top:var(--bar)}
@media (min-width:900px){.top[hidden] ~ main:has(> .boot){left:220px;width:calc(100% - 220px)}} /* ...and the desk sidebar's 220px */
.jobs-tools{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:0 0 12px} /* kept for the Compare window */
.jobs-tools .jobs-sort{flex:1 1 170px;margin:0;min-width:0}
.jobs-tools .jobs-compare{flex:none;min-height:44px}
.banner.first{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} /* one-time pointer to the Guide's first-day steps */
.banner.first .chip{min-height:44px;padding:4px 14px}

/* ---------- Nov 5 redesign, option E: softer shapes everywhere, and the dark desktop sidebar ---------- */
.clockbar,.wg-wrap,.sa-state,.btn,.chip,.pick button,.subnav button,.undo-btn,.empty,.boot,.toast,.tag,.kb-col,.kb-card,.st-tile,.st-key,.scan-card,.ref-kind,.hold,.signin{border-radius:var(--r)}
.card.strong{border-radius:var(--r-lg)}
.seg{border-radius:var(--r);overflow:hidden}
.btn.primary{border-radius:12px}
.sheet{border-radius:var(--r-lg) var(--r-lg) 0 0}
.tabs button[aria-current="page"]{border-radius:var(--r)}
.font-pick{display:flex;flex-direction:column;gap:8px}
.font-pick button{min-height:72px;padding:8px 12px;border:2px solid var(--charcoal);border-radius:var(--r);background:var(--white);color:var(--charcoal);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px}
.font-pick button[aria-pressed="true"]{border-width:3px;background:var(--charcoal);color:var(--white)}
.font-pick .fp-name{font-size:18px;font-weight:700}
.font-pick .fp-sample{font-size:15px}
@media (min-width:900px){
  .sheet{border-radius:var(--r-lg)}
  .tabs{background:var(--side);border-right:0;padding:16px 12px}
  .tabs button,.tabs.five button{background:none;color:var(--on-side);padding:0 12px;border-radius:var(--r)}
  .tabs button[aria-current="page"]{background:#ffffff;color:#14181c}
  .tabs .side-who{color:var(--on-side);border-top-color:#5b6268;padding:14px 12px 4px}
  .tabs .side-who .label,.tabs .side-who .muted{color:var(--on-side)}
  .tabs .side-who{background:var(--side)}
  .tabs .side-foot .side-foot-btn{background:none;color:var(--on-side);border-color:var(--on-side);border-radius:var(--r)}
  .tabs .side-hd,.tabs.five .side-hd{color:var(--on-side)} /* the headings on a long sidebar sit on the dark side too */
  .tabs .side-grp button,.tabs.five .side-grp button{padding-left:46px} /* lines up with the word after the Now icon, with room for the stop dot */
}
@media (min-width:900px) and (hover:hover){
  .tabs button:hover{background:rgba(255,255,255,.14)}
  .tabs button[aria-current="page"]:hover{background:#ffffff}
  .tabs .side-hd:not(.plain):hover{background:rgba(255,255,255,.14);color:var(--on-side)}
}

/* ---------- Now overview (redesign E): cool colors say which stage, hot colors say something needs a person ---------- */
.stg-submittal{--stg:#9c1f68;--stg-tint:#e9a6cc}.stg-design{--stg:#5f36b8;--stg-tint:#bfaef2}.stg-buy{--stg:#005f6f;--stg-tint:#6ccbdb}.stg-build{--stg:#0e4fa8;--stg-tint:#8dbaf5}.stg-finish{--stg:#3a4757;--stg-tint:#b4bfcc}.stg-install{--stg:#0a6632;--stg-tint:#79cf9d}.stg-stop{--stg:#a80c24}
/* One band per page: the stop this screen belongs to, charcoal if it has none. Fixed colors, so it reads the same in every theme. */
.page-band{margin:-16px -16px 0;padding:14px 16px;background:var(--stg,#2a3036);color:#ffffff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-band h1{margin:0;font-size:26px;line-height:30px;font-weight:700;overflow-wrap:anywhere}
.page-band p{margin:4px 0 0;font-size:16px;line-height:22px;max-width:70ch}
.page-band a{color:inherit}
.page-band.stg-clock{background:var(--sig-green);color:var(--on-sig-green)}
.page-band .muted{color:inherit}
.cb-since{display:block;font-size:18px;font-weight:700}
.page-band h1.cb-time{font-size:56px;line-height:62px;font-variant-numeric:tabular-nums}
.wk-bars{display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center}
.wb-track{height:12px;border-radius:6px;background:var(--wash);overflow:hidden;display:block}
.wb-track i{display:block;height:100%;background:var(--sig-green);border-radius:6px}
.wb-h{font-variant-numeric:tabular-nums;text-align:right}
.stop-word{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px}
.stop-word i,.stop-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--stg);flex:none}
.mini-line{display:inline-flex;align-items:center}
.mini-line i{display:block;width:14px;height:14px;border-radius:50%;background:var(--stg,var(--surface));box-shadow:inset 0 0 0 2px var(--stg,#6b7680);flex:none}
.mini-line i.now{outline:3px solid var(--stg);outline-offset:1px}
.mini-line b{display:block;width:10px;height:3px;background:var(--stg,#aeb6bd);flex:none}
.jobs-due{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.jobs-at{display:flex;flex-direction:column;gap:6px;min-width:0}
.pb-words{min-width:0;flex:1 1 240px}
.pb-acts{display:flex;gap:8px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:5px;margin-left:10px;vertical-align:middle;background:linear-gradient(#6b7680,#6b7680) center/100% 2px no-repeat}
.mark i{display:block;width:8px;height:8px;border-radius:50%;background:var(--stg-tint)}
:root[data-theme="shop"] .mark i{background:var(--stg)}
.side-dot{position:absolute;left:24px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--stg-tint)}
.tabs button[aria-current="page"] .side-dot{background:var(--stg)}
.tabs .side-grp button{position:relative}
.page-band .bn-meta{color:#ffffff;font-size:14px}
@media (max-width:480px){.ov-name{font-size:13px;overflow-wrap:normal;word-break:normal}} /* Submittal stays one word on a phone */
@media (min-width:900px){
  .page-band{margin:-28px -40px 0;padding:20px 40px}
  .page-band h1{font-size:32px;line-height:38px}
  .page-band p{font-size:18px;line-height:24px}
}
@media (min-width:1500px){.page-band{margin-top:0;border-radius:var(--r-lg)}} /* main stops at 1200 px, so on a big screen the band sits in the page instead of running part way */
.now-grid{display:flex;flex-direction:column;gap:16px}
.now-need{order:-1;display:flex;flex-direction:column;gap:14px;min-width:0} /* phone: what needs doing first */
.now-over{display:flex;flex-direction:column;gap:12px;min-width:0}
.ov-card{gap:8px}
.ov-top{align-items:baseline;flex-wrap:wrap}
.ov-open{border:0;background:none;padding:0;min-height:44px;min-width:44px;text-align:left;font-size:19px;font-weight:700;color:var(--charcoal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ov-map{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.ov-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ov-seg{position:absolute;top:14px;left:50%;width:100%;height:6px;background:var(--grey)}
.ov-seg[class*="stg-"]{background:var(--stg)}
.ov-pt{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;background:var(--white);color:var(--charcoal);border:3px solid var(--mid)}
.ov-pt[class*="stg-"]{background:var(--stg);border-color:var(--stg);color:#ffffff}
.ov-st.is-now .ov-pt{box-shadow:0 0 0 4px var(--wash),0 0 0 6px var(--stg,var(--mid))}
.ov-name{font-size:14px;text-align:center;overflow-wrap:anywhere;max-width:100%}
.ov-st.is-now .ov-name{font-weight:700}
.ov-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px}
.ov-state .btn{min-height:44px}
.sig-band{margin:-16px -16px 4px;padding:6px 16px;border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.card.strong>.sig-band{margin:-18px -18px 4px;padding:6px 18px}
.sig-band::before{font-size:13px;line-height:1}
.shop-tag{display:inline-flex;align-items:center;justify-content:center;min-width:32px;margin-right:8px;padding:0 5px;border:2px solid var(--charcoal);border-radius:6px;font-size:13px;font-weight:700}
@media (min-width:900px){
  main:has(.now-grid){max-width:1440px}
  .now-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);gap:24px;align-items:start}
  .now-need{order:0}
  .now-need .cards,.now-need .split,.now-need .split.wide-left{display:flex;flex-direction:column;gap:14px}
}

/* ---------- Crew day line (redesign E): what you finished, what's next, what comes after ---------- */
.day-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:17px}
.day-n{font-size:28px;line-height:34px;font-weight:700}
.dayline{display:flex;flex-direction:column}
.dl-stop{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px}
.dl-body{min-width:0;min-height:44px;padding:4px 0 10px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.dl-stop:not(:has(.card)) .dl-body{flex-direction:row;align-items:center;justify-content:space-between}
.dl-rail{position:relative;display:flex;justify-content:center}
.dl-rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-3px;width:6px;background:var(--stg-line,#0e4fa8)}
.dl-rail.ahead::before{background:var(--grey)}
.dl-stop:last-child .dl-rail::before{bottom:auto;height:26px}
.dl-dot{position:relative;width:26px;height:26px;margin-top:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--white);color:var(--charcoal);border:4px solid var(--mid)}
.dl-rail.done .dl-dot{background:#0e4fa8;border-color:#0e4fa8;color:#ffffff}
.dl-rail.now .dl-dot{width:30px;height:30px;border:7px solid #0e4fa8;background:var(--white)}
.btn.primary.go{background:var(--sig-green);color:var(--on-sig-green);min-height:64px;font-size:22px}
/* Nov 6: "+ Request something" on every role's Now */
.req-now{display:flex;margin:0 auto 12px}
.req-now>.btn{flex:1}
.req-now:last-child{margin:16px auto 0}
/* Nov 6: Receiving on a desktop is a list, one line per item (Kelsey) */
.rcv-row{align-items:center;gap:16px}
.rcv-row .rcv-what{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.rcv-row .rcv-act{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rcv-row.rcv-late{box-shadow:inset 4px 0 0 var(--st-red, #9b2b2b);padding-left:12px}