/* Harmonic Design production board. "Shop drawing on maple" direction: see DESIGN.md. */
@font-face{font-family:"HD Schibsted";font-weight:400 750;font-display:swap;src:url('fonts/schibsted-grotesk-var.woff2') format('woff2')}
@font-face{font-family:"HD Young Serif";font-weight:400;font-display:swap;src:url('fonts/young-serif-400.woff2') format('woff2')}

:root{
  /* Walnut-tinted neutral ramp */
  --n0:#fff;--n1:#fbfaf7;--n2:#f4f0ea;--n3:#e8e1d7;--n4:#d3c8b9;--n5:#a89a88;--n6:#7a6c5d;--n7:#5e5246;--n8:#3f352c;--n9:#2b231c;--n10:#1e1813;
  --paper:var(--n0);--page:var(--n1);--ground:var(--n2);--line:var(--n3);--line-strong:var(--n4);--muted:var(--n7);--ink:var(--n9);--deep:var(--n10);
  /* One accent: Chuckanut fir. Semantic: revision red, brass warning. */
  --accent:#2f5e48;--accent-hover:#244a38;--accent-tint:#e6efe9;
  --danger:#b1271f;--danger-hover:#8f1f18;--danger-tint:#fcedea;
  --warn:#83560f;--warn-tint:#fbf1dc;--spot:#c8902c;
  /* Wood species, used only in swatches */
  --walnut:#5b3b27;--cherry:#9b5034;--maple:#e2c79a;--oak:#c7a36b;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --t0:12px;--t1:14px;--t2:16px;--t3:20px;--t4:25px;--t5:31px;--t6:39px;--t7:49px;
  --r-control:6px;--r-panel:12px;
  --lift:0 1px 2px #2b231c12,0 6px 20px #2b231c0d;--dialog:0 2px 4px #2b231c1a,0 24px 64px #2b231c33;
  --fast:160ms;--ease:cubic-bezier(.2,.7,.3,1);--nav:232px;--tour-h:0px;
  --sans:"HD Schibsted",ui-sans-serif,sans-serif;--serif:"HD Young Serif",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:var(--t2)/1.55 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,summary{cursor:pointer;touch-action:manipulation}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
h1{font:400 var(--t6)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
h2{font-size:var(--t3);line-height:1.25;font-weight:650}
h3{font-size:var(--t2);line-height:1.3;font-weight:650}
p{max-width:68ch}
small,.muted{color:var(--muted)}
small{font-size:var(--t1)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--maple)}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Revision delta and wood swatches: the two marks taken from the shop's own world */
.rev{width:40px;height:36px;flex:none}
.rev path{fill:var(--paper);stroke:var(--danger);stroke-width:3;stroke-linejoin:round}
.rev text{fill:var(--danger);font:700 17px var(--sans)}
.swatch{display:inline-block;flex:none;width:28px;height:28px;border-radius:var(--r-control);box-shadow:inset 0 0 0 1px #2b231c26;
  background-image:repeating-linear-gradient(100deg,#ffffff00 0 5px,#ffffff1f 5px 6px,#00000000 6px 11px,#0000000f 11px 12px)}
.sw-walnut{background-color:var(--walnut)}.sw-cherry{background-color:var(--cherry)}.sw-maple{background-color:var(--maple)}.sw-oak{background-color:var(--oak)}
.wood{display:flex;align-items:center;gap:var(--s2);color:var(--muted);font-size:var(--t1);font-weight:550}
.wood .swatch{width:18px;height:18px;border-radius:4px}

/* Controls */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--s12);padding:var(--s2) var(--s4);border:1px solid var(--line-strong);border-radius:var(--r-control);background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;line-height:1.2;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
button:hover,.button:hover{background:var(--ground);border-color:var(--n5);color:var(--ink)}
button:active,.button:active{background:var(--line)}
button:disabled{cursor:not-allowed;color:var(--n6);background:var(--ground);border-color:var(--line)}
.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.primary:hover,.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.primary:disabled{background:var(--line);border-color:var(--line);color:var(--n7)}
input,select,textarea{width:100%;min-width:0;padding:var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-control);background:var(--paper);accent-color:var(--accent)}
input:hover,select:hover,textarea:hover{border-color:var(--n5)}
input::placeholder,textarea::placeholder{color:var(--n6)}
label{display:block}
label>span{display:block;margin-bottom:var(--s1);font-size:var(--t1);font-weight:600;color:var(--muted)}
label.check{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
label.check input{width:24px;height:24px;flex:none;margin:0}
label.check>span{margin:0;font-size:var(--t2);color:var(--ink)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.spaced{margin-top:var(--s4)}.spaced-lg{margin-top:var(--s12)}

/* Office shell: walnut rail, maple page */
.shell{background:linear-gradient(90deg,var(--n9) var(--nav),var(--page) 0);display:grid;grid-template-columns:var(--nav) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s8);padding:var(--s8) var(--s4) var(--s6);background:var(--n9);color:var(--n3)}
.brand{padding:0 var(--s3)}
.brand-name{display:block;font:400 var(--t3)/1.2 var(--serif);color:#fff}
.brand small{display:block;margin-top:var(--s1);color:var(--n5);font-size:var(--t1)}
nav{display:grid;gap:var(--s1)}
.rail nav a{padding:var(--s3);border-radius:var(--r-control);color:var(--n3);text-decoration:none;font-weight:550;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.rail nav a:hover{background:#ffffff14;color:#fff}
.rail nav a.active{background:var(--n1);color:var(--ink);font-weight:650}
.rail :focus-visible{outline-color:var(--maple)}
.rail-extras{margin-top:auto;display:grid;gap:var(--s1)}
details>summary{color:var(--muted);font-size:var(--t1);font-weight:600;padding:var(--s2) 0}
.rail details>summary{color:var(--n5);padding:var(--s2) var(--s3)}
.rail details>summary:hover{color:#fff}
.rail details a{display:block;padding:var(--s2) var(--s3) var(--s2) var(--s6);color:var(--n3);font-size:var(--t1)}
.rail details a:hover{color:#fff}
.rail details button{width:calc(100% - var(--s6));margin:var(--s1) 0 0 var(--s6);min-height:40px;font-size:var(--t1);background:transparent;color:var(--n3);border-color:var(--n7)}
.rail details button:hover{background:#ffffff14;color:#fff}
.rail details small{display:block;margin:var(--s2) 0 0 var(--s6);font-size:var(--t0);color:var(--n5)}
main{min-width:0;padding:var(--s12) var(--s12) var(--s24);max-width:1280px}
.top .button{white-space:nowrap}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);margin-bottom:var(--s8)}
.dateline{font-size:var(--t1);font-weight:600;color:var(--muted);margin-bottom:var(--s2)}
.lede{margin-top:var(--s2);font-size:var(--t3);line-height:1.4;color:var(--muted)}
.count{font-variant-numeric:tabular-nums;font-weight:650}

/* Needs attention: two primary panels, then a quieter row */
.attention-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:start}
.panel{background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--lift);padding:var(--s6) var(--s6) var(--s2)}
.panel-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);align-items:start;padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.panel-head h2{font:400 var(--t4)/1.2 var(--serif)}
.panel-head .count{font:400 var(--t5)/1 var(--serif);color:var(--danger)}
.head-icon{display:inline-grid;place-items:center;width:40px;height:36px;color:var(--warn)}
.head-icon .icon{width:30px;height:30px}
.att-loose .panel-head .count{color:var(--warn)}
.att-intro{margin-top:var(--s1);font-size:var(--t1);color:var(--muted)}
.att-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.att-row:last-child{border-bottom:0}
.att-body{min-width:0;display:grid;gap:var(--s1)}
.att-row h3{font:400 var(--t3)/1.25 var(--serif)}
.att-row .button,.att-row button{flex:none}
.by{font-size:var(--t1);color:var(--muted)}
.delta{display:grid;gap:2px;margin:var(--s1) 0 var(--s1)}
.delta li{display:grid;grid-template-columns:8.5em minmax(0,1fr);align-items:baseline;gap:var(--s1) var(--s3)}
.delta .k{font-size:var(--t1);font-weight:600;color:var(--muted)}
.delta .v{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);font-variant-numeric:tabular-nums}
.delta .was{color:var(--n6)}
.delta .to{color:var(--n6)}
.delta b{font-weight:700;color:var(--danger)}
.att-changes .delta .v{font-size:var(--t3)}
.all-clear,.ready-line{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s4) 0;color:var(--accent);font-weight:600}
.ready-line{border-top:1px solid var(--line);color:var(--ink);font-weight:500}
.ready-line .icon,.all-clear .icon{color:var(--accent);margin-top:2px}
.also{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);margin-top:var(--s12)}
.also h2{display:flex;gap:var(--s2);align-items:baseline;padding-bottom:var(--s3);border-bottom:1px solid var(--line-strong);font-size:var(--t2)}
.also h2 .count{color:var(--muted)}
.also .att-row h3{font:650 var(--t2)/1.3 var(--sans)}
.also .att-row p{color:var(--muted)}
.att-jump{display:none}

/* All jobs: grouped rows */
.search{max-width:420px;margin-bottom:var(--s8)}
.board{display:grid;gap:var(--s8)}
.stage-head{display:flex;gap:var(--s3);align-items:baseline;font:400 var(--t4)/1.2 var(--serif);padding-bottom:var(--s3)}
.stage-head .count{font:600 var(--t2) var(--sans);color:var(--muted)}
.stage{background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--lift);padding:var(--s4) var(--s6) var(--s2)}
.job{display:grid;grid-template-columns:28px minmax(220px,2.2fr) 1.1fr 0.8fr 0.6fr minmax(200px,1.8fr);gap:var(--s4);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background-color var(--fast) var(--ease)}
.job:hover{background:var(--n1);color:var(--ink)}
.job-name{display:grid;min-width:0}
.job-name strong{font-weight:650;line-height:1.3}
.job-name small{font-size:var(--t1)}
.job-stage,.job-due,.job-lead{font-size:var(--t1);color:var(--muted)}
.job-due{font-variant-numeric:tabular-nums}
.job-status{font-size:var(--t1);color:var(--muted)}
.flags{display:grid;gap:2px;font-size:var(--t1);font-weight:650}
.flags li{display:flex;gap:var(--s2);align-items:baseline}
.flags li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;transform:translateY(-1px)}
.flags .danger{color:var(--danger)}
.flags .warn{color:var(--warn)}
.empty{padding:var(--s6) 0;display:grid;gap:var(--s4);justify-items:start}

/* Job detail */
.back-link{display:inline-flex;align-items:center;gap:var(--s1);margin-bottom:var(--s4);font-weight:600;text-decoration:none}
.back-link .icon{width:18px;height:18px}
.job-top .wood{margin-top:var(--s2)}
.job-top{align-items:flex-start}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);margin-top:var(--s6)}
.facts dt{font-size:var(--t0);color:var(--muted);font-weight:600}
.facts dd{font-weight:650;font-variant-numeric:tabular-nums}
.banner-office{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;max-width:none;padding:var(--s3) var(--s4);margin-bottom:var(--s4);background:var(--danger-tint);color:var(--danger);border-radius:var(--r-control);font-weight:600}
.banner-office span{flex:1;min-width:200px}
.release-panel{padding:var(--s6);margin-bottom:var(--s8);background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--lift)}
.release-panel h2{font:400 var(--t4)/1.2 var(--serif)}
.release-panel.is-missing{box-shadow:var(--lift),inset 0 0 0 2px var(--danger)}
.release-panel>p{margin-top:var(--s1);color:var(--muted)}
.loose-rows{margin-top:var(--s4);display:grid;gap:var(--s3)}
.loose-row{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.loose-row label{font-weight:650}
.loose-row.blank input{border-color:var(--danger)}
.loose-row button[aria-pressed=true]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.release-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.release-foot p{display:flex;gap:var(--s2);align-items:center;font-weight:650}
.hold{color:var(--danger)}.ok{color:var(--accent)}
.stage-row{display:flex;gap:var(--s6);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s8)}
.stage-row label{width:260px}
.stage-row p{padding-bottom:var(--s3);font-weight:600}
.stage-row p.muted{font-weight:400}
.job-columns{display:grid;grid-template-columns:5fr 7fr;gap:var(--s12);align-items:start}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line-strong)}
.section-head h2,.job-columns>section>h2{font:400 var(--t4)/1.2 var(--serif)}
.part-table li{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.part-table small{display:block}
.pstate{flex:none;font-size:var(--t1);font-weight:650;color:var(--muted)}
.pstate.is-made{color:var(--warn)}.pstate.is-loaded{color:var(--accent)}
.spec>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--muted)}
.spec dd{font-weight:650}
.job-extras{margin-top:var(--s4)}
.job-extras>p{margin:var(--s2) 0}
.row{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t1)}
.log{padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t1)}
.log small{display:block;font-size:var(--t0)}
.log button{margin-top:var(--s2)}
.callout{padding:var(--s3) var(--s4);margin-bottom:var(--s6);background:var(--warn-tint);color:var(--warn);border-radius:var(--r-control);font-weight:600;max-width:none}

/* Office extras pages */
.po-toolbar{position:sticky;top:0;z-index:2;padding:var(--s3) 0;background:var(--page);align-items:center}
#poTotal{font-weight:650}
.po-group{margin-top:var(--s6)}
.po-group h2 small{font-weight:400}
.po-line{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.po-line>span:nth-child(2){flex:1}
.po-metrics{display:flex;gap:var(--s4);font-size:var(--t1);color:var(--muted)}
.po-metrics .num{color:var(--ink);font-weight:650}
.roi-columns{display:grid;grid-template-columns:5fr 7fr;gap:var(--s12);align-items:start}
.fields{display:grid;gap:var(--s4)}
.math{display:grid;gap:var(--s3);padding:var(--s6);background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--lift)}
.math strong{white-space:nowrap}

/* Dialogs */
dialog{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:var(--s8);border:0;border-radius:var(--r-panel);box-shadow:var(--dialog);color:var(--ink);background:var(--paper)}
dialog::backdrop{background:#1e181399}
dialog h2{margin-bottom:var(--s3);font:400 var(--t4)/1.2 var(--serif)}
dialog label{margin:var(--s4) 0}
dialog .actions{margin-top:var(--s6)}
.change-summary{position:sticky;top:calc(-1 * var(--s8));z-index:1;padding:var(--s3) var(--s4);margin:0 calc(-1 * var(--s4));background:var(--warn-tint);border-radius:var(--r-control)}
.change-summary .delta b{color:var(--warn)}
.ack-note{margin-top:var(--s4);font-weight:600}
.spec-editor{margin-top:var(--s4)}
.field-error,.error{color:var(--danger);font-size:var(--t1);font-weight:600;margin-top:var(--s1)}
label.check .field-error{flex-basis:100%}
.picks{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0}
.pick{min-height:56px;font-size:var(--t2)}
.pick[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.small-note{font-size:var(--t1)}

/* Shop view: arm's-length type, one job at a time */
body.in-shop{font-size:18px;background:var(--ground)}
.shop-top{background:var(--n9);color:#fff}
.shop-top-in{max-width:980px;margin:0 auto;padding:var(--s3) var(--s4);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:72px}
.shop-title{font:400 var(--t3)/1.2 var(--serif)}
.shop-title span{font:500 var(--t1) var(--sans);color:var(--n5);margin-left:var(--s2)}
.shop-back{background:transparent;color:#fff;border-color:var(--n6);font-size:var(--t2)}
.shop-back:hover{background:#ffffff14;border-color:var(--n5);color:#fff}
.office-link{color:var(--n4);font-size:var(--t1);padding:var(--s3)}
.office-link:hover{color:#fff}
.shop-top :focus-visible{outline-color:var(--maple)}
main.shop{max-width:980px;margin:0 auto;padding:var(--s8) var(--s4) 168px}
.shop h1{font-size:var(--t6)}
.shop .wood{margin-bottom:var(--s2);font-size:var(--t2)}
.shop .lede{color:var(--muted)}
.job-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s4);margin-top:var(--s8)}
.job-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);min-height:160px;padding:var(--s6);background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--lift);color:var(--ink);text-decoration:none;transition:box-shadow var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.job-tile:hover{box-shadow:0 1px 2px #2b231c1a,0 10px 28px #2b231c1f;color:var(--ink)}
.job-tile:active{background:var(--n1)}
.tile-name{display:flex;gap:var(--s3);align-items:flex-start}
.tile-name .swatch{margin-top:2px}
.tile-name strong{font:400 var(--t4)/1.15 var(--serif)}
.job-tile.changed{box-shadow:var(--lift),inset 0 0 0 3px var(--danger)}
.tile-alert{display:flex;align-items:center;gap:var(--s2);margin:calc(-1 * var(--s2)) 0 var(--s2)}
.tile-alert .rev{width:32px;height:29px}
.tile-meta{color:var(--muted);font-size:var(--t2)}
.tile-progress{margin-top:auto;padding-top:var(--s3);width:100%;display:grid;gap:var(--s2);font-size:var(--t2);font-weight:650}
.bar{display:block;height:8px;background:var(--ground);border-radius:4px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:4px}
.tile-problem{display:flex;gap:var(--s2);align-items:center;color:var(--warn);font-size:var(--t2);font-weight:650}
.stamp{display:inline-block;padding:3px var(--s2);background:var(--danger);color:#fff;font-size:var(--t1);font-weight:750;letter-spacing:.06em;line-height:1.3;border-radius:4px}
.drawing-alert{margin:var(--s6) 0 var(--s8);padding:var(--s8);background:var(--danger);color:#fff;border-radius:var(--r-panel);display:grid;gap:var(--s4);justify-items:start;box-shadow:0 2px 4px #8f1f1833,0 16px 40px #8f1f1829}
.alert-head{display:flex;gap:var(--s4);align-items:center}
.alert-head .rev{width:64px;height:58px}
.alert-head .rev path{stroke:#fff;fill:var(--danger)}
.alert-head .rev text{fill:#fff}
.drawing-alert .stamp{background:#fff;color:var(--danger);font-size:var(--t1)}
.drawing-alert h2{margin-top:var(--s2);font:400 var(--t5)/1.15 var(--serif)}
.drawing-alert .delta{width:100%;gap:var(--s2);margin:0;padding:var(--s4) var(--s6);background:var(--paper);color:var(--ink);border-radius:var(--r-control)}
.drawing-alert .delta li{grid-template-columns:9em minmax(0,1fr)}
.drawing-alert .delta .k{font-size:var(--t2);color:var(--muted)}
.drawing-alert .delta .v{font-size:var(--t4)}
.drawing-alert p{font-size:var(--t3);line-height:1.45}
.drawing-alert .alert-by{font-size:var(--t2);color:#ffe3df}
.got-it{min-height:var(--s16);min-width:240px;padding:0 var(--s8);background:#fff;border:0;color:var(--danger);font-size:var(--t4);font-weight:750}
.got-it:hover{background:var(--danger-tint);color:var(--danger-hover)}
.drawing-alert :focus-visible{outline-color:#fff}
.problem-note{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s4) 0;padding:var(--s3) var(--s4);background:var(--warn-tint);color:var(--warn);border-radius:var(--r-control);font-weight:650;max-width:none}
.problem-note .icon{margin-top:3px}
.load-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-top:var(--s8);padding-bottom:var(--s3);border-bottom:1px solid var(--line-strong)}
.load-head h2{font:400 var(--t5)/1.15 var(--serif)}
.load-count{font-size:var(--t3);font-variant-numeric:tabular-nums}
.how{margin:var(--s3) 0 var(--s2);color:var(--muted)}
.how b{color:var(--ink)}
.group-head{display:flex;flex-wrap:wrap;gap:0 var(--s2);align-items:baseline;margin-top:var(--s8);margin-bottom:var(--s3);font-size:var(--t3)}
.group-head small{font-weight:400;font-size:var(--t2)}
.part-list{display:grid;background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--lift);overflow:hidden}
.shop-part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s3) var(--s3) var(--s3) var(--s6);border-top:1px solid var(--line);transition:background-color var(--fast) var(--ease)}
.shop-part:first-child{border-top:0}
.shop-part.is-loaded{background:var(--accent-tint)}
.part-name{display:grid;gap:2px;min-width:0}
.part-name strong{font-size:var(--t3);line-height:1.25;font-weight:650}
.size{font-size:var(--t3);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ticks{display:flex;gap:var(--s2)}
.tick{min-height:60px;min-width:140px;justify-content:flex-start;padding:0 var(--s4) 0 var(--s3);border:2px solid var(--line);border-radius:var(--r-control);font-size:var(--t3);font-weight:650;background:var(--paper)}
.tick:hover{border-color:var(--n5);background:var(--paper)}
.tick .box{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--n6);border-radius:4px;background:var(--paper);transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.tick .icon{width:22px;height:22px;stroke-width:3}
.tick.on{border-color:var(--accent);color:var(--accent)}
.tick.on .box{background:var(--accent);border-color:var(--accent);color:#fff}
.tick:disabled{opacity:.5;background:var(--paper)}
.part-list.locked{opacity:.75}
.all-loaded{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6);padding:var(--s4) var(--s6);background:var(--accent-tint);border-radius:var(--r-panel)}
.all-loaded p{display:flex;gap:var(--s2);align-items:center;font-weight:700;color:var(--accent);font-size:var(--t3)}
.shop-bar{position:fixed;left:0;right:0;bottom:var(--tour-h);z-index:5;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) max(var(--s4),calc((100vw - 980px) / 2 + var(--s4))) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 -1px 0 var(--line),0 -8px 24px #2b231c14}
.shop-bar .last{flex:1;min-width:0;font-size:var(--t2);font-weight:600;color:var(--muted)}
.shop-bar button{min-height:56px;font-size:var(--t3);padding:0 var(--s6)}
.problem-btn{border:2px solid var(--danger);color:var(--danger)}
.problem-btn:hover{background:var(--danger-tint);border-color:var(--danger);color:var(--danger)}

/* Toast */
#notice:not(:empty){position:fixed;top:var(--s4);right:var(--s4);z-index:60;max-width:min(420px,calc(100% - 32px));padding:var(--s3) var(--s4);background:var(--n9);color:#fff;border-radius:var(--r-control);box-shadow:var(--dialog);font-weight:600}

/* Guided tour */
.tour-panel{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s4) var(--s8) calc(var(--s4) + env(safe-area-inset-bottom));background:var(--paper);box-shadow:inset 0 3px 0 var(--spot),0 -8px 24px #2b231c1f}
.tour-copy{min-width:0;max-width:70ch}
.tour-copy small{font-weight:650}
.tour-panel h2{font:400 var(--t3)/1.25 var(--serif);margin:2px 0 var(--s1)}
.tour-panel p{font-size:var(--t2)}
.tour-panel .actions{flex:none;flex-wrap:nowrap}
.tour-panel button{min-height:44px}
body.tour-active{padding-bottom:var(--tour-h)}
.spotlight{outline:3px solid var(--spot);outline-offset:6px;scroll-margin:var(--s12) 0 calc(var(--tour-h) + var(--s6))}
dialog.tour-dialog{margin:var(--s4) auto auto;max-height:calc(100dvh - var(--tour-h) - 32px)}

/* Tablet */
@media (max-width:1180px){
  .job{grid-template-columns:28px minmax(0,2fr) 1fr minmax(0,1.6fr)}
  .job-due,.job-lead{display:none}
}
@media (max-width:1100px){
  .attention-grid,.also{grid-template-columns:1fr}
  .att-jump{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s6)}
  .att-jump a{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);background:var(--paper);border-radius:var(--r-control);box-shadow:var(--lift);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
  .att-jump a.is-hot{color:var(--danger);box-shadow:var(--lift),inset 0 0 0 2px var(--danger)}
  .att-jump small{display:block;color:var(--muted);font-weight:500;font-size:var(--t1)}
  .att-jump strong{font:400 var(--t5)/1 var(--serif);font-variant-numeric:tabular-nums}
  .job-columns,.roi-columns{grid-template-columns:1fr}
  .shell{display:block;background:none}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4) var(--s2)}
  .brand{flex:1;padding:0}
  .brand small{display:none}
  .rail nav{order:3;flex-basis:100%;display:flex;gap:var(--s1);overflow-x:auto;margin:0 calc(-1 * var(--s1))}
  .rail nav a{white-space:nowrap;padding:var(--s2) var(--s3);font-size:var(--t1)}
  .rail-extras{margin:0;display:flex;gap:var(--s3);position:relative}
  .rail details[open]{position:absolute;right:0;top:100%;z-index:10;width:240px;padding:var(--s3);background:var(--n9);border-radius:var(--r-control);box-shadow:var(--dialog)}
  .rail-extras details:not(.office-extras){display:none}
  .brand small{display:inline;margin-left:var(--s2)}
  .brand-name{display:inline}
}
@media (max-width:900px){
  :root{--nav:200px}
  main{padding:var(--s8) var(--s6) var(--s16)}
}
@media (max-width:860px){
  .tour-panel{flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s4)}
  .tour-panel .actions button{flex:1}
}

/* Phone */
@media (max-width:700px){
  h1{font-size:var(--t5)}
  .brand small{display:none}
  main{padding:var(--s6) var(--s4) var(--s16)}
  .top{flex-direction:column;align-items:stretch;gap:var(--s4);margin-bottom:var(--s6)}
  .top .button.primary{width:100%}
  .lede{font-size:var(--t2)}
  .att-jump a{flex-direction:column;align-items:flex-start;gap:var(--s1);font-size:var(--t1)}
  .panel{padding:var(--s4) var(--s4) 0}
  .panel-head{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3)}
  .panel-head h2{font-size:var(--t3)}
  .panel-head .count{font-size:var(--t4)}
  .att-row{flex-direction:column;gap:var(--s3)}
  .att-row .button,.att-row button{width:100%}
  .att-row.compact{flex-direction:row}
  .att-row.compact .button,.att-row.compact button{width:auto}
  .att-changes .delta .v{font-size:var(--t2)}
  .delta li{grid-template-columns:6.5em minmax(0,1fr)}
  .stage{padding:var(--s4) var(--s4) var(--s1)}
  .job{grid-template-columns:28px minmax(0,1fr);row-gap:var(--s1)}
  .job-stage,.job-status,.flags{grid-column:2}
  .facts{gap:var(--s2) var(--s6)}
  .loose-row{grid-template-columns:minmax(0,1fr) auto}
  .loose-row label{grid-column:1/-1}
  .release-panel{padding:var(--s4)}
  .release-foot button{width:100%}
  .stage-row label{width:100%}
  .spec>div{grid-template-columns:120px minmax(0,1fr)}
  .po-line{flex-wrap:wrap}
  .po-metrics{flex-basis:100%;padding-left:36px}
  dialog{padding:var(--s4);width:calc(100% - 16px)}
  dialog .actions button{flex:1 1 100%}
  .picks{display:grid;grid-template-columns:1fr 1fr}
  .pick{padding:var(--s2) var(--s3);line-height:1.25}
  .change-summary{top:calc(-1 * var(--s4));margin:0 calc(-1 * var(--s2))}
  main.shop{padding:var(--s6) var(--s4) 156px}
  .shop h1{font-size:var(--t5)}
  .shop-top-in{min-height:64px}
  .job-tiles{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s6)}
  .job-tile{min-height:0;padding:var(--s4) var(--s4) var(--s4)}
  .drawing-alert{padding:var(--s4);gap:var(--s3)}
  .alert-head .rev{width:48px;height:43px}
  .drawing-alert h2{font-size:var(--t4)}
  .drawing-alert .delta{padding:var(--s3) var(--s4)}
  .drawing-alert .delta li{grid-template-columns:1fr;gap:0}
  .drawing-alert .delta .k{font-size:var(--t1)}
  .drawing-alert .delta .v{font-size:var(--t3)}
  .drawing-alert p{font-size:var(--t2)}
  .got-it{width:100%;min-width:0}
  .shop-part{grid-template-columns:1fr;gap:var(--s3);padding:var(--s4)}
  .ticks{display:grid;grid-template-columns:1fr 1fr}
  .tick{min-width:0}
  .shop-bar{flex-wrap:wrap;row-gap:var(--s2)}
  .shop-bar .last{flex-basis:100%;font-size:var(--t1)}
  .shop-bar button{flex:1}
  #notice:not(:empty){top:auto;bottom:calc(var(--s16) + var(--s12) + var(--s4) + var(--tour-h));left:var(--s4);right:var(--s4);max-width:none}
  .tour-panel{padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom))}
  .tour-panel h2{font-size:var(--t2)}
  .tour-panel p{font-size:var(--t1);line-height:1.4}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}