/* App shell (DESIGN.md section 5d): the Office sidebar + top bar, the field menu and offline line, the 404 page,
 * loading skeletons, toasts and the confirm dialog. Loaded after the page style, office-desktop.css and platform.css.
 * Variables only (web/design-tokens.css); tests/design.test.ts fails on any color literal here. */
body{--bar-h:0px} /* no demo bar above the screens any more */
a.ob{text-decoration:none;color:var(--ink)}
a.ob.pri{color:var(--accent-ink)}

/* ---------- Office: top bar ---------- */
.office.shell{min-height:100dvh;display:flex;flex-direction:column}
.sh-skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--accent);color:var(--accent-ink);padding:var(--s2) var(--s4);font-weight:700}
.sh-skip:focus{left:var(--s2);top:var(--s2)}
.sh-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;padding:var(--s2) var(--s6);background:var(--board);border-bottom:var(--rule-w) solid var(--rule)}
.sh-top .sp{flex:1}
.sh-brand{font-family:var(--f-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);font-size:18px;line-height:1.1;color:var(--ink);text-decoration:none}
.sh-brand span{display:block;font-family:var(--f-mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:var(--label-track);color:var(--muted)}
.sh-me{font-size:14px;line-height:1.15;text-align:right}
.sh-me small{display:block;font-size:13px;color:var(--muted)}
.sh-menu{display:none}
.sh-menu svg,.fmenu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Office: sidebar + page ---------- */
.sh-body{flex:1;display:grid;grid-template-columns:248px minmax(0,1fr);align-items:start}
.sh-body{align-items:stretch}
.sh-side{background:var(--board);border-right:var(--rule-w) solid var(--rule)}
.sh-side-in{position:sticky;top:61px;max-height:calc(100dvh - 61px);overflow-y:auto;padding:0 0 var(--s5)}
.sh-acct-l,.sh-acct{display:none}
.sh-side ul{list-style:none;margin:0;padding:0}
.sh-side li a{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:44px;padding:0 var(--s5);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.sh-side li a:hover{text-decoration:underline;text-underline-offset:4px}
.sh-side li a[aria-current=page]{background:var(--accent);color:var(--accent-ink);font-weight:800}
.sh-side li a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.sh-side .cnt{font-family:var(--f-mono);font-size:13px;min-width:28px;padding:0 6px;border:var(--rule-w) solid currentColor;border-radius:var(--r1);text-align:center;font-variant-numeric:tabular-nums}
.sh-lbl{margin:var(--s4) 0 var(--s1);padding:var(--s3) var(--s5) 0;border-top:var(--rule-w) solid var(--rule-soft);font-family:var(--f-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--label-track);color:var(--muted)}
.sh-job{padding:var(--s4) var(--s5);border-bottom:var(--rule-w) solid var(--rule);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.sh-job .sh-lbl{margin:0;padding:0;border:0}
.sh-jpick{position:relative;display:flex;align-items:flex-start;gap:var(--s2);width:100%;min-height:48px;padding:var(--s1) 0;cursor:pointer}
.sh-jpick .sh-jname{flex:1;min-width:0}
.sh-jchev{flex:none;width:9px;height:9px;margin:5px 4px 0 0;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.sh-jpick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit}
.sh-jpick:has(select:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.sh-jname{font-family:var(--f-head);font-size:17px;line-height:1.2;overflow-wrap:anywhere}
.sh-job small{font-size:13px;color:var(--muted)}
.sh-sample{margin:var(--s1) 0 0;font-size:13px;color:var(--muted)}
.sh-jlink{display:inline-flex;align-items:center;min-height:48px;padding:0;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sh-sample .sh-jlink{font-size:13px}
.sh-sample .sh-jlink+.sh-jlink{margin-left:var(--s4)}
.office.shell .o-main{margin:0 auto;width:100%;padding:var(--s5) var(--s6) var(--s7)}

/* ---------- Office: phones and small tablets: the sidebar is a menu ---------- */
@media (max-width:899px){
  .sh-top{padding:var(--s2) var(--s3)}
  .sh-menu{display:inline-flex}
  .sh-me{display:none}
  .sh-top .seg{order:5}
  .sh-body{display:block}
  .sh-side{display:none;border-right:0;border-bottom:var(--rule-w) solid var(--rule)}
  .sh-side-in{position:static;max-height:none}
  .sh-wide{display:none}
  .sh-acct-l,.sh-acct{display:block}
  .menu-open .sh-side{display:block}
  .sh-side li a{min-height:48px}
  .office.shell .o-main{padding:var(--s4)}
}

/* ---------- first run (a company with no jobs) ---------- */
.fr-steps{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4);max-width:1100px}
.fr-steps .card{display:flex;gap:var(--s4);align-items:flex-start;margin:0;border-color:var(--rule);padding:var(--s5)}
.fr-steps .o-h2{margin:0 0 var(--s1)}
.fr-n{flex:none;width:40px;height:40px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:20px;background:var(--ink);color:var(--board);border-radius:var(--r2)}
.fr-sample{margin-top:var(--s5);max-width:760px;line-height:1.6}
/* First-run setup question (CHECKLIST §5b M3): one small dismissible card under the steps */
.fr-q{margin:var(--s5) 0 0;max-width:760px;border-color:var(--rule);padding:var(--s4) var(--s5)}
.fr-q-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.fr-q .o-h2{margin:0}.fr-q .o-sent{margin:var(--s2) 0 var(--s3)}
.fr-q .ochips{align-items:center}
.fr-sample .olink2{min-height:0;display:inline}
/* First-run checklist on Office Home (R6): one small card, six ruled rows, a ticked box per done step, a 48px button on each
   step still to do. Goes away when all six are done. */
.fr6{margin:var(--s4) 0;max-width:760px;border-color:var(--rule);padding:var(--s4) var(--s5)}
.fr6 .o-h2{margin:0 0 var(--s2)}
.fr6-list{list-style:none;margin:0;padding:0}
.fr6-list li{display:flex;align-items:center;gap:var(--s3);min-height:56px;border-top:1px solid var(--rule-soft);padding:var(--s1) 0}
.fr6-list li:first-child{border-top:0}
.fr6-box{flex:none;width:24px;height:24px;border:2px solid var(--ink);border-radius:var(--r1);display:grid;place-items:center;background:var(--board)}
.fr6-list li.ok .fr6-box{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.fr6-box svg{width:16px;height:16px}
.fr6-t{flex:1}
.fr6-list li.ok .fr6-t{color:var(--muted)}
.fr6-list .ob,.su-two .ob{min-height:48px}
.fr6-src{margin:var(--s2) 0 0}
.su-two{align-items:center;flex-wrap:wrap;max-width:760px;margin-top:var(--s3)}

/* ---------- field: header menu, offline line, desktop column ---------- */
.hd-r{display:flex;align-items:center;gap:var(--s2);flex:none}
.fmenu{position:relative}
.fmenu>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:60px;min-width:60px;justify-content:center;padding:0 10px;border:2px solid var(--ink);border-radius:var(--r2);background:var(--board);font-size:16px;font-weight:600;cursor:pointer}
.fmenu>summary::-webkit-details-marker{display:none}
.fmenu>summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fmenu[open]>summary{background:var(--ink);color:var(--board)}
.fmenu-p{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:220px;background:var(--board);border:2px solid var(--ink);border-radius:var(--r2);display:flex;flex-direction:column}
.fmenu-p a,.fmenu-p button{display:flex;align-items:center;min-height:56px;padding:0 var(--s4);border:0;border-radius:0;background:transparent;color:var(--ink);font-size:18px;font-weight:600;text-decoration:none;text-align:left}
.fmenu-p>*+*{border-top:var(--rule-w) solid var(--rule-soft)}
.offline{display:flex;gap:var(--s2);align-items:center;margin:0;padding:var(--s2) var(--s3);background:var(--warn-bg);color:var(--warn);border-bottom:2px solid var(--warn);font-size:18px;font-weight:600}
.offline svg{flex:none}
@media (min-width:768px){.col{width:min(480px,100%)}}
.sh-tvbar{margin:0;padding:var(--s2) var(--s4);background:var(--night-2);border-bottom:var(--rule-w) solid var(--night-3)}
.sh-tvbar a{color:var(--chalk);font-weight:600}

/* ---------- 404 ---------- */
.nf-brand{display:inline-block;margin-top:var(--s4);font-family:var(--f-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);font-size:20px;color:var(--ink);text-decoration:none;border-bottom:4px solid var(--accent)}
.nf{text-align:left}
.nf-code{margin:var(--s6) 0 0;font-family:var(--f-mono);font-size:64px;font-weight:700;line-height:1;color:var(--ink)}
.nf-code::after{content:"";display:block;width:96px;height:8px;margin-top:var(--s3);background:var(--accent);border:var(--rule-w) solid var(--ink)}

/* ---------- loading skeletons (no animation with reduced motion) ---------- */
.sk{min-height:100dvh;background:var(--paper)}
.sk-top{height:60px;background:var(--board);border-bottom:var(--rule-w) solid var(--rule)}
.sk-row{display:grid;grid-template-columns:248px minmax(0,1fr)}
.sk-side{min-height:calc(100dvh - 60px);background:var(--board);border-right:var(--rule-w) solid var(--rule)}
.sk-main{padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
.sk i,.sk-lines i{display:block;height:16px;background:var(--paper-2);border-radius:var(--r1);animation:sk 1.2s ease-in-out infinite alternate}
.sk .w40{width:40%;height:28px}.sk .w70{width:70%}.sk .w55{width:55%}.sk .blk{height:120px}
.sk-lines{display:flex;flex-direction:column;gap:var(--s2);max-width:480px;margin:var(--s3) 0}
.sk-lines i:nth-child(3){width:80%}.sk-lines i:nth-child(4){width:60%}
@keyframes sk{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sk i,.sk-lines i{animation:none}}
@media (max-width:899px){.sk-row{display:block}.sk-side{display:none}.sk-main{padding:var(--s4)}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:var(--s5);z-index:200;transform:translate(-50%,16px);opacity:0;pointer-events:none;max-width:min(560px,calc(100vw - 32px));padding:var(--s3) var(--s4);background:var(--ink);color:var(--board);border:2px solid var(--ink);border-radius:var(--r2);font-size:15px;font-weight:600;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* Field phone: sit above the Today / Problem / Lost time bar (76px buttons + 2px rule), never on top of it */
body:has(nav.bar) .toast{bottom:calc(78px + var(--s3) + env(safe-area-inset-bottom,0px))}

/* ---------- confirm dialog ---------- */
.cdlg{max-width:min(480px,calc(100vw - 32px));padding:var(--s5);border:2px solid var(--ink);border-radius:var(--r2);background:var(--board);color:var(--ink)}
.cdlg::backdrop{background:var(--ink);opacity:.55}
.cdlg .o-h2{margin:0 0 var(--s2)}
.cdlg .nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.ob.danger{color:var(--bad);border-color:var(--bad);background:var(--board)}
.ob.danger:hover,.ob.danger:active{background:var(--bad);color:var(--board)}
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:var(--s3)}
.toast-retry{flex:none;min-height:48px;padding:0 var(--s4);font:inherit;font-weight:700;color:inherit;background:transparent;border:2px solid currentColor;border-radius:var(--r2);cursor:pointer}
.toast-retry:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- Company › People and Invite: seats badge and the crew-list invite (DESIGN.md 5l) ---------- */
.seats{display:inline-flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center;margin:var(--s2) 0;padding:var(--s1) var(--s3);font-family:var(--f-mono);font-size:14px;color:var(--ink);background:var(--board);border:var(--rule-w) solid var(--ink);border-radius:var(--r1)}
.seats.full{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}
.seats-acts .ob,.pb .ob,.pb .olink2,.pb input.ofield,.office [data-a="co-invite"],.office [data-a="co-sec"][data-v="invite"]{min-height:48px}
.pb textarea.pb-list{min-height:144px;font-family:var(--f-mono);font-size:14px}
.pb .otable .tag{white-space:normal}
.pb .ob.pri:disabled,.office .ob.pri[data-a="co-invite"]:disabled{background:var(--paper-2);color:var(--muted);border-style:dashed;border-color:var(--muted)}
/* ---------- CrestBid jobs link (DESIGN.md 5j): Company › Integrations, Office › Job › CrestBid job, New job ---------- */
.cb-key{max-width:520px;font-family:var(--f-mono)}
.cb-status{margin-top:var(--s3)}
.cb-facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s4);margin:var(--s3) 0 0}
.cb-facts dt{font-family:var(--f-mono);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--muted)}
.cb-facts dd{margin:0}
.cb-pick{margin-top:var(--s3);max-width:640px}
.cb-q{max-width:420px}
.cb-done{display:flex;align-items:center;gap:var(--s2);min-height:48px;margin-top:var(--s2);cursor:pointer}
.cb-done input{width:20px;height:20px}
.cb-list{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.cb-job{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:56px;padding:var(--s2) var(--s3);white-space:normal;text-align:left;font-weight:400}
.cb-job b{font-weight:700}
.cb-job span{font-size:13px;color:var(--ink-2)}
.cb-job:disabled{opacity:1;background:var(--paper-2);border-style:dashed;cursor:not-allowed}
.su .opt.cb-opt-off{border-style:dashed;background:var(--paper)}
/* Billing › Pairs you pay for (DESIGN 5m): the field stepper at office width; buttons stay 76px tall, 48px+ everywhere */
.bp{margin:var(--s4) 0;padding:var(--s3) 0;border-top:var(--rule-w) solid var(--ink)}
.bp .stepper{max-width:420px}
.bp .stepper button:disabled{border-style:dashed;color:var(--ink-2);background:var(--paper-2)}
.bp .acts .ob,.office [data-a="co-checkout"],.seats-acts [data-a="co-more-seats"]{min-height:48px}
.bp .ob:disabled,.office [data-a="co-checkout"]:disabled{border-style:dashed;background:var(--paper-2);color:var(--ink-2);cursor:not-allowed}
/* Persona goal batch 2 (Rosa): week close, Add rework, recent hand-offs, after sign-out: every new control is 48px or more (DESIGN.md) */
#wkClose .ob,#wkClose .olink2,#rwaCard .ob,#rwaCard .ochips button,#rwaCard select.ofield,#rwaCard input.ofield,#coAfter .ob,#pairHandoffs .olink2,.office [data-a="of-rwa"],.office [data-a="of-rwa-new"],.office [data-a="of-pair-all"]{min-height:48px}
/* Persona goal batch 3A (Rosa): swap "when" chips, Quick question line, Sheets by unit Show all, waiting job assignments: 48px (DESIGN.md 5p) */
#crToday .ochips button,#sqLine .olink2,.office [data-a="of-sheets-all"],.office [data-a="jb-uninvite"],#jbNobody+.acts .ob{min-height:48px}
#crToday .ochips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
/* Pairs, the pair page and Crew (2026-11-12 "action first"): the step a pair needs is a button on its row, one label per
   pair (colour + number + people), "In this pair" with Swap on the pair page, Crew is the people list only. */
.pr-wrap{overflow-x:auto}
.pr-table .rowbtn{text-align:left}
.pr-no{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--muted);margin-right:var(--s1)}
.pr-step{min-height:48px;white-space:nowrap}
.pr-eyebrow{display:flex;align-items:center;margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--muted)}
.pr-people .acts{margin-top:var(--s2)}
.cr-acts .olink2,#prNeed .olink2,#dhNeed .olink2,.pr-people .olink2,.pr-people .ob,.office #opThin+p .olink2,.office [data-a="of-step-open"].olink2{min-height:48px}
.cr-addbar{margin:var(--s3) 0}
.cr-rare{margin-top:var(--s2)}
.cr-rare .olink2,#crOpenSeat .olink2,#crPriceErr .olink2,#suPriceErr .olink2,#fr6Done .olink2{min-height:48px}
@media (max-width:899px){.pr-areas{display:none}.pr-table td,.pr-table th{padding-left:6px;padding-right:6px}}
/* Office tap targets are 48px at every width (owner 2026-11-12), not only under 600px: buttons, links, fields, chips,
   folds and the sidebar. */
.office .ob,.office .olink2,.office .olink,.office .rowbtn,.office .fbtn,.office .ofield,.office select,.office textarea,.office .ochips button,
.office details[data-ok]>summary,.office summary.o-sent,.office summary.sechead,.office .todo .olink,.office .otable .rowbtn,.sh-side li a{min-height:48px}