/* Roundhouse CRM. The desk look: white page, graphite cover card with the engine house fan, DIN Condensed for
   titles, job numbers, figures and section heads, Avenir Next for text. One accent, brick, for the one primary
   button on a screen, the current nav mark and the section head lead. Single theme, system fonts only.
   Lifted from design/mockup-v3-2026-09-28.html, with the mockup only classes removed, every size raised to at
   least 14 px, and the readability layer of the spec (section 5.0) on the end. */
:root{color-scheme:light only;
  --graphite:#14171B; --steel:#5A646E; --concrete:#E4E7EA; --mist:#F3F5F6; --white:#FFFFFF;
  --brick:#8B3A2B; --brick-hover:#7A3326; --brick-press:#6A2C21; --brick-bright:#D0614A;
  --on-dark:#C9CFD5;
  --go:#2E7D4F; --wait:#C98A12; --stop:#B42318;
  --go-fill:#EAF4EE; --wait-fill:#FBF3E3; --stop-fill:#FBECEA;
  --display:"DIN Condensed","Bahnschrift","Arial Narrow",sans-serif;
  --text:"Avenir Next","Segoe UI",system-ui,sans-serif;
  --r:8px; --top:56px; --side:224px;}
*{box-sizing:border-box}
html{background:#FFFFFF;-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;color:var(--graphite);font:400 15px/24px var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
svg{display:block}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:14px;height:14px;stroke-width:2.6}
:focus-visible{outline:2px solid var(--graphite);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* type roles */
.meta{font-size:14px;line-height:22px;color:var(--steel)}
.num{font-family:var(--display);font-weight:700;font-size:18px;line-height:24px;letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig{font-family:var(--display);font-weight:700;font-size:18px;line-height:24px;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.t500{font-weight:500}
.r{text-align:right}
/* controls: 36 high, 8 radius, one secondary and one primary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--concrete);background:#FFFFFF;color:var(--graphite);font:500 15px/1 var(--text);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color 120ms,border-color 120ms,color 120ms}
.btn:hover{background:var(--mist)}
.btn:active{background:var(--concrete)}
.btn.primary{background:var(--brick);border-color:var(--brick);color:#FFFFFF}
.btn.primary:hover{background:var(--brick-hover);border-color:var(--brick-hover)}
.btn.primary:active{background:var(--brick-press);border-color:var(--brick-press)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--mist);border-color:var(--concrete);color:var(--steel);cursor:not-allowed}
.btn.send{background:var(--graphite);border-color:var(--graphite);color:#FFFFFF}
.btn.send:hover{background:#2B3138;border-color:#2B3138}
.btn.send:active{background:#000000;border-color:#000000}
.btn.send[disabled]{background:var(--mist);border-color:var(--concrete);color:var(--steel);cursor:not-allowed}
.btn.on-dark{background:transparent;border-color:rgba(255,255,255,.28);color:#FFFFFF}
.btn.on-dark:hover{background:rgba(255,255,255,.08)}
.composing .btn.primary.nx{background:#FFFFFF;border-color:var(--concrete);color:var(--graphite)}
.input,.select,.area{width:100%;height:36px;border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF;padding:0 12px;font-size:15px;color:var(--graphite);transition:border-color 120ms}
.input:hover,.select:hover,.area:hover{border-color:var(--steel)}
.area{height:auto;padding:6px 12px;line-height:24px;resize:vertical;display:block}
.select{appearance:none;-webkit-appearance:none;padding-right:32px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A646E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 10px center/16px no-repeat;cursor:pointer}
.input::placeholder,.area::placeholder{color:var(--steel);opacity:1}
/* chips: muted fills, dark text, the signal lives in the dot */
.chip{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:999px;background:var(--mist);font:500 14px/1 var(--text);color:var(--graphite);white-space:nowrap;vertical-align:middle}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--steel);flex:none}
.chip.go{background:var(--go-fill)}
.chip.go i{background:var(--go)}
.chip.wait{background:var(--wait-fill)}
.chip.wait i{background:var(--wait)}
.chip.stop{background:var(--stop-fill)}
.chip.stop i{background:var(--stop)}
.chip.done{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete)}
.chip.done .ic{width:12px;height:12px;stroke-width:3;color:var(--go);margin-left:-2px}
.chip.x{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete);color:var(--steel);text-decoration:line-through}
.cc{display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:40px;padding:3px 6px 0;border-radius:4px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--concrete);font:700 15px/1 var(--display);letter-spacing:.06em;color:var(--graphite);white-space:nowrap}
.cc.dark{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#FFFFFF}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--steel)}
.dot.stop{background:var(--stop)}
.dot.wait{background:var(--wait)}
.dot.go{background:var(--go)}
/* ---------------------------------------------------------------- shell */
.side{position:fixed;top:0;left:0;bottom:0;width:var(--side);border-right:1px solid var(--concrete);background:#FFFFFF;display:flex;flex-direction:column;padding:16px;z-index:30}
.brand{display:flex;align-items:center;height:40px;padding:0 8px;margin-bottom:16px;--logo-ink:#14171B;--logo-accent:#8B3A2B}
.brand svg{height:26px;width:auto}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:var(--r);color:var(--steel);font-weight:500;transition:background-color 120ms,color 120ms}
.nav a:hover{background:var(--mist);color:var(--graphite)}
.nav a.on{background:var(--mist);color:var(--graphite);font-weight:600;box-shadow:inset 3px 0 0 var(--brick)}
.nav .ct{margin-left:auto;font-size:14px;font-weight:500;color:var(--steel);font-variant-numeric:tabular-nums}
.side .who{margin-top:auto;padding:16px 12px 0;border-top:1px solid var(--concrete)}
.side .who b{display:block;font-weight:500}
.main{margin-left:var(--side);min-width:0}
.topbar{position:sticky;top:0;z-index:20;height:var(--top);background:#FFFFFF;border-bottom:1px solid var(--concrete);display:flex;align-items:center;gap:16px;padding:0 32px}
.topbar .mlogo{display:none;--logo-ink:#14171B;--logo-accent:#8B3A2B}
.topbar .mlogo svg{height:20px;width:auto}
.search{position:relative;margin-left:auto;width:360px}
.search .ic{position:absolute;left:12px;top:9px;color:var(--steel);width:18px;height:18px}
.search .input{padding-left:40px}
.view{padding:32px 32px 64px;animation:fade 150ms ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.vhead{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;margin-bottom:24px}
.vhead .tl{display:flex;align-items:baseline;gap:16px;min-width:0;flex-wrap:wrap}
.ptitle{font:700 32px/40px var(--display);letter-spacing:.015em;text-transform:uppercase}
.vhead .when{color:var(--steel)}
.vhead .acts{display:flex;gap:8px;flex:none}
.bbar,.more,.scrim{display:none}
/* ---------------------------------------------------------------- panels */
.panel{background:#FFFFFF;border:1px solid var(--concrete);border-radius:var(--r);padding:16px;min-width:0;scroll-margin-top:240px}
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--concrete);position:relative}
.phead::after{content:"";position:absolute;left:0;bottom:-1px;width:24px;height:3px;background:var(--brick)}
.phead h2{font:700 18px/24px var(--display);letter-spacing:.03em;text-transform:uppercase}
.phead .meta{text-align:right}
.empty{padding:16px 0 8px;color:var(--steel)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.pfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:16px}
.note{color:var(--steel);font-size:14px;line-height:22px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
/* generic two line row with a right side */
/* ---------------------------------------------------------------- jobs ledger */
.toolbar{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.tbrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbrow .push{margin-left:auto}
.fbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r);border:1px solid var(--concrete);background:#FFFFFF;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color 120ms}
.fbtn:hover{background:var(--mist)}
.fbtn .n{font-size:14px;color:var(--steel);font-variant-numeric:tabular-nums}
.fbtn[aria-pressed="true"]{background:var(--graphite);border-color:var(--graphite);color:#FFFFFF}
.fbtn[aria-pressed="true"] .n{color:var(--on-dark)}
.fbtn .cc{height:20px;min-width:0;padding:2px 4px 0;font-size:15px;background:transparent;box-shadow:none;color:inherit}
.seg{display:inline-flex;border:1px solid var(--concrete);border-radius:var(--r);overflow:hidden;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{height:34px;padding:0 12px;border:0;border-left:1px solid var(--concrete);background:#FFFFFF;font-weight:500;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:background-color 120ms}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--mist)}
.seg button .n{font-size:14px;color:var(--steel);font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"]{background:var(--graphite);color:#FFFFFF}
.seg button[aria-pressed="true"] .n{color:var(--on-dark)}
.switch{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 4px;border:0;background:none;cursor:pointer;font-weight:500;white-space:nowrap}
.switch .tr{width:32px;height:20px;border-radius:10px;background:var(--concrete);position:relative;flex:none;transition:background-color 120ms}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(20,23,27,.2)}
.switch[aria-checked="true"] .tr{background:var(--graphite)}
.switch[aria-checked="true"] .tr::after{left:14px}
/* list and record side by side */
/* ---------------------------------------------------------------- job record */
.rec{display:flex;flex-direction:column;gap:16px;min-width:0}
.sheetbar{display:none}
.coverwrap{position:sticky;top:var(--top);z-index:6;background:#FFFFFF;padding-top:16px;margin-top:-16px}
.cover{position:relative;overflow:hidden;background:var(--graphite);color:#FFFFFF;border-radius:var(--r);padding:16px 24px 24px;min-height:144px}
.cover .fan{position:absolute;right:0;bottom:0;height:72%;width:auto;pointer-events:none}
.cover > *:not(.fan){position:relative;z-index:1}
.cover .r1{display:flex;align-items:center;gap:8px}
.cover .r1 .num{color:var(--on-dark)}
.cover .r1 .btn{margin-left:auto}
.cover .lead{width:24px;height:3px;background:var(--brick-bright);margin:8px 0}
.cover h1{font:700 32px/32px var(--display);letter-spacing:.012em;text-transform:uppercase;padding-top:4px;max-width:440px}
.cover .sub{color:var(--on-dark);margin-top:8px;max-width:48ch}
.cover .sub b{color:#FFFFFF;font-weight:500}
.gap{display:flex;align-items:center;gap:16px;padding:8px 0;min-height:52px}
.gap .bd{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gap .bd .t500{white-space:nowrap}
.nothing{display:flex;align-items:center;gap:8px;padding:16px 0 8px}
.gate{border-top:1px solid var(--concrete);padding-top:16px}
.gate .gt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.gate .gt b{font-weight:500}
.gi{display:flex;align-items:center;gap:8px;min-height:32px}
.gi .mk{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--concrete)}
.gi.ok .mk{background:var(--graphite);box-shadow:none;color:#FFFFFF}
.gi.ok .mk .ic{width:10px;height:10px;stroke-width:3.4}
.gi.stop .mk{box-shadow:inset 0 0 0 2px var(--stop)}
.gi.wait .mk{box-shadow:inset 0 0 0 2px var(--wait)}
.gi .lb{flex:1;min-width:0}
.gi .meta{text-align:right}
.gi.stop .meta,.gi.wait .meta{color:var(--graphite)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--concrete);margin-top:16px;border-top:1px solid var(--concrete);border-bottom:1px solid var(--concrete)}
.facts > div{background:#FFFFFF;padding:8px 16px 8px 0;min-width:0}
.facts > div:not(:nth-child(3n+1)){padding-left:16px}
.facts .k{font-size:14px;line-height:22px;color:var(--steel)}
.facts .v{overflow-wrap:anywhere}
.rules-echo{display:flex;gap:16px;padding-top:8px}
.rules-echo .k{flex:none;width:88px}
.hrow{display:grid;grid-template-columns:56px 72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:8px 0;min-height:40px}
.hrow .d{font-size:14px;color:var(--steel);font-variant-numeric:tabular-nums}
.callback{display:flex;align-items:center;gap:16px;padding:8px 0;flex-wrap:wrap}
.callback .bd{flex:1;min-width:240px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl .day{padding:16px 0 0;font-size:14px;line-height:22px;color:var(--steel);font-weight:500;border-top:0!important}
.tl .ev{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:8px 0}
.tl .ev .num{line-height:24px}
.tl .day + .ev{border-top:0}
.ledger{width:100%;border-collapse:collapse}
.ledger th{font-size:14px;line-height:22px;font-weight:400;color:var(--steel);text-align:left;padding:8px 16px 8px 0;border-bottom:1px solid var(--graphite);white-space:nowrap}
.ledger td{padding:8px 16px 8px 0;border-bottom:1px solid var(--concrete);vertical-align:middle}
.ledger th:last-child,.ledger td:last-child{padding-right:0}
.ledger .r{text-align:right}
.ledger tfoot td{border-bottom:0;padding-top:8px;padding-bottom:0}
.ledger tfoot tr:first-child td{padding-top:16px}
.ledger tfoot .tot td{padding-top:8px}
.ledger tr.link{cursor:pointer;transition:background-color 120ms}
.ledger tr.link:hover td{background:var(--mist)}
.ledger .cc{vertical-align:middle}
.staff{color:var(--steel)}
.floor{color:var(--graphite);display:flex;align-items:center;gap:8px}
.qstate{display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:16px}
.dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 16px}
.dl dt,.dl dd{padding:8px 0;border-top:1px solid var(--concrete)}
.dl dt{font-size:14px;line-height:24px;color:var(--steel)}
.dl dt:first-of-type,.dl dt:first-of-type + dd{border-top:0}
.lsteps{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 0}
.ls{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 4px;border-radius:999px;background:var(--mist);font-size:14px;white-space:nowrap}
.ls .sd{width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--concrete);display:grid;place-items:center}
.ls.done .sd{background:var(--graphite);box-shadow:none;color:#FFFFFF}
.ls.done .sd .ic{width:12px;height:12px;stroke-width:3.2}
.ls .meta{font-size:14px}
.ls.todo{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete);color:var(--steel)}
.pairs{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding-top:16px;align-items:start}
.pairs .colh{font-size:14px;line-height:22px;color:var(--steel)}
.pno{width:24px;height:24px;border-radius:4px;background:var(--graphite);color:#FFFFFF;font:700 15px/1 var(--display);display:grid;place-items:center;padding-top:2px;margin-top:0}
.ptile{min-width:0}
.ph{aspect-ratio:4/3;border-radius:var(--r);background:var(--concrete);position:relative}
.ph .f{position:absolute;left:8px;bottom:4px;font-size:14px;line-height:22px;color:var(--steel)}
.ph.none{background:var(--mist);box-shadow:inset 0 0 0 1px var(--concrete);display:grid;place-items:center;text-align:center;padding:8px;color:var(--steel);font-size:14px;line-height:22px}
.ptile .cap{font-size:14px;line-height:22px;margin-top:8px}
.ptile .by{font-size:14px;line-height:22px;color:var(--steel)}
.msg{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;padding:8px 0;align-items:start}
.msg .ch{font-size:14px;line-height:24px;color:var(--steel);white-space:nowrap}
.msg .s{font-weight:500;overflow-wrap:anywhere}
.msg .x{font-size:14px;line-height:22px;color:var(--steel)}
.msg .x b{font-weight:500;color:var(--graphite)}
.msg .at{font-size:14px;line-height:24px;color:var(--steel);white-space:nowrap;text-align:right}
.suggest{display:flex;align-items:center;gap:16px;padding:8px 0;min-height:52px}
.suggest .bd{flex:1;min-width:0}
.compose{border-top:1px solid var(--concrete);padding-top:16px;margin-top:8px}
.compose .cf{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 16px;align-items:center}
.compose .cf > .k{font-size:14px;color:var(--steel)}
.compose .cf > .full{grid-column:1/-1}
.compose .to{min-height:36px;display:flex;align-items:center;overflow-wrap:anywhere}
.attach{display:flex;flex-wrap:wrap;gap:8px}
.attach .chip{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete)}
.missing-f{color:var(--graphite);display:flex;gap:8px;align-items:center}
.sent-note{color:var(--graphite)}
.cbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:16px}
.compose-closed{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--concrete);margin-top:8px}
/* ---------------------------------------------------------------- today */
/* ---------------------------------------------------------------- requests */
.split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}
.pick{border:1px solid var(--concrete);border-radius:var(--r);overflow:hidden;background:#FFFFFF}
.pick a{display:block;padding:12px 16px;border-top:1px solid var(--concrete);transition:background-color 120ms}
.pick a:first-child{border-top:0}
.pick a:hover{background:var(--mist)}
.pick a.on{background:var(--mist);box-shadow:inset 3px 0 0 var(--graphite)}
.pick .l1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pick .l1 .meta:first-child{font-weight:500;color:var(--graphite)}
.pick .tt{font-weight:500;margin-top:4px}
.pick .cc{margin-right:8px}
.raw .hd{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 16px;padding:8px 0;font-size:14px;line-height:22px}
.raw .hd .k{color:var(--steel)}
.raw .hd div{overflow-wrap:anywhere}
.raw .body{padding:16px 0 8px;border-top:1px solid var(--concrete)}
.raw .body p + p{margin-top:8px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:16px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:22px;color:var(--steel);min-width:0}
.dup{display:flex;align-items:center;gap:16px;padding:16px 0 0;flex-wrap:wrap}
.dup .bd{flex:1;min-width:200px;display:flex;align-items:center;gap:8px}
/* ---------------------------------------------------------------- schedule: the calendar (slice 16)
   A trade's colour is its index from the API (visits.colour): a muted tint behind dark text (--tf) and a deeper
   edge for the block's left border and the swatch (--tc). tcn is no trade yet, neutral grey. */
.tc0{--tc:#3D6FA8;--tf:#EAF1F9}
.tc1{--tc:#2C8580;--tf:#E6F3F2}
.tc2{--tc:#82568E;--tf:#F3EDF6}
.tc3{--tc:#76803A;--tf:#F1F3E4}
.tc4{--tc:#A9624A;--tf:#F8EDE8}
.tc5{--tc:#5B60A8;--tf:#EEEFF9}
.tc6{--tc:#A0567C;--tf:#F7ECF2}
.tc7{--tc:#97773A;--tf:#F6F0E3}
.tcn{--tc:#8A939C;--tf:#F3F5F6}
.sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:3px;background:var(--tc,#8A939C)}
.sc-bar{justify-content:space-between;gap:8px 16px}
.sc-nav{display:flex;flex-wrap:wrap;gap:8px}
.sc-seg button{justify-content:center}
.sc-daylbl{margin:0 0 4px}
.cal{border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF}
.cal-hd{position:sticky;top:var(--top);z-index:6;display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr));background:#FFFFFF;border-bottom:1px solid var(--graphite);border-radius:var(--r) var(--r) 0 0}
.cal-dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:8px 12px;border-left:1px solid var(--concrete);min-width:0;transition:background-color 120ms}
.cal-dh:hover{background:var(--mist)}
.cal-dh .dw{font-size:14px;line-height:22px;color:var(--steel)}
.cal-dh .dn{font:700 22px/28px var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;padding:2px 0 0}
.cal-dh .dc{flex-basis:100%;min-height:20px;font-size:14px;line-height:20px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-dh.today .dw{color:var(--graphite);font-weight:600}
.cal-dh.today .dn{background:var(--graphite);color:#FFFFFF;border-radius:6px;padding:2px 6px 0}
.cal-bd{display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr));padding:12px 0}
.cal-day .cal-bd{grid-template-columns:56px minmax(0,1fr)}
.cal-ax{position:relative}
.cal-ax span{position:absolute;right:8px;transform:translateY(-50%);font-size:14px;line-height:20px;color:var(--steel);white-space:nowrap}
.cal-col{position:relative;min-width:0;border-left:1px solid var(--concrete);border-bottom:1px solid var(--concrete);
  background-image:linear-gradient(to bottom,var(--concrete) 0,var(--concrete) 1px,transparent 1px),
    linear-gradient(to bottom,transparent 0,transparent calc(var(--hp) / 2),#F1F3F4 calc(var(--hp) / 2),#F1F3F4 calc(var(--hp) / 2 + 1px),transparent calc(var(--hp) / 2 + 1px));
  background-size:100% var(--hp)}
.cal-col.today{background-color:#FAFBFB}
.cb{position:absolute;display:flex;flex-direction:column;overflow:hidden;padding:4px 4px 4px 5px;border-radius:6px;border-left:4px solid var(--tc);background:var(--tf);color:var(--graphite);font-size:14px;line-height:20px;cursor:pointer;box-shadow:0 0 0 1px #FFFFFF;transition:box-shadow 120ms;z-index:1;container-type:inline-size}
.cb:hover{box-shadow:0 0 0 1px #FFFFFF,inset 0 0 0 1px var(--tc)}
.cb:focus-visible{outline:2px solid var(--graphite);outline-offset:1px;z-index:3}
.cb .ln{display:block;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb .num{font-size:16px;line-height:20px;vertical-align:-1px}
.cb .sw{margin-right:6px;vertical-align:-1px}
.cb .ad,.cb .tm,.cb .nt{color:var(--steel)}
.cb .tt{font-weight:500}
.cb .chip{height:24px;padding:0 8px;font-size:14px;gap:6px;vertical-align:0}
.cb .chip i{width:6px;height:6px}
.cb .st,.cb .stw{margin-top:2px}
.cb.wide .l1 .chip{margin-left:8px}
.cb .bn{color:var(--steel)}
.cb .sd{display:none;width:8px;height:8px;margin-right:4px;border-radius:50%;background:var(--steel);vertical-align:0}
.cb .sd.go{background:var(--go)}
.cb svg.sd{width:11px;height:11px;margin-right:2px;border-radius:0;background:none;color:var(--go);stroke-width:3;vertical-align:-1px}
.cb .stw,.cb .bn{display:none}
@container (min-width:300px){
  .cb .bn{display:inline}
}
@container (max-width:199px){
  .cb .l1 .chip{display:none}
  .cb .stw{display:block}
}
@container (max-width:99px){
  .cb .st,.cb .stw,.cb .sw{display:none}
  .cb .sd{display:inline-block}
  .cb .num{font-size:15px}
}
@container (max-width:44px){
  .cb .pre{display:none}
}
.cb.done{background:#FFFFFF;color:var(--steel)}
.cb.done .num,.cb.done .tt{color:var(--steel)}
.cb.from{border-top-left-radius:0;border-top-right-radius:0}
.cb.into{border-bottom-left-radius:0;border-bottom-right-radius:0}
.cb.dragging{opacity:.45}
.cb[draggable="true"]{cursor:grab}
.cal-more{position:absolute;display:flex;align-items:flex-start;justify-content:center;padding:4px;border:0;border-radius:6px;background:var(--mist);box-shadow:0 0 0 1px #FFFFFF,inset 0 0 0 1px var(--concrete);font:500 14px/20px var(--text);color:var(--graphite);cursor:pointer;z-index:1;text-align:center}
.cal-more:hover{background:var(--concrete)}
.cal-now{position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:var(--graphite);z-index:4;pointer-events:none}
.cal-now i{position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--graphite)}
.cal-ghost{position:absolute;left:2px;right:2px;padding:2px 6px;border:2px dashed var(--graphite);border-radius:6px;background:rgba(20,23,27,.04);font:500 14px/20px var(--text);color:var(--graphite);z-index:5;pointer-events:none;overflow:hidden;white-space:nowrap}
.cal-strip{position:sticky;top:var(--top);z-index:6;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:8px 0;margin-bottom:8px;background:#FFFFFF}
.cal-sd{display:flex;flex-direction:column;align-items:center;min-width:0;padding:6px 0;border:1px solid var(--concrete);border-radius:var(--r);transition:background-color 120ms}
.cal-sd:hover{background:var(--mist)}
.cal-sd .dw{font-size:14px;line-height:20px;color:var(--steel)}
.cal-sd .dn{font:700 20px/24px var(--display);font-variant-numeric:tabular-nums;padding-top:2px}
.cal-sd .dc{min-height:20px;font-size:14px;line-height:20px;color:var(--steel)}
.cal-sd.today{border-color:var(--graphite)}
.cal-sd.on{background:var(--graphite);border-color:var(--graphite);color:#FFFFFF}
.cal-sd.on .dw,.cal-sd.on .dc{color:var(--on-dark)}
.cal-month{border:1px solid var(--concrete);border-radius:var(--r);overflow:hidden;background:#FFFFFF}
.cal-mh,.cal-mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-mh{border-bottom:1px solid var(--graphite)}
.cal-mh span{padding:8px 12px;font-size:14px;line-height:22px;color:var(--steel)}
.cal-md{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:136px;padding:8px;border-top:1px solid var(--concrete);border-left:1px solid var(--concrete);transition:background-color 120ms}
.cal-md:nth-child(7n+1){border-left:0}
.cal-md:nth-child(-n+7){border-top:0}
.cal-md:hover{background:var(--mist)}
.cal-md.out{background:#FAFBFB}
.cal-md.out .dn{color:var(--steel)}
.cal-md .mt{display:flex;align-items:center;justify-content:space-between;gap:4px}
.cal-md .dn{font:700 20px/24px var(--display);font-variant-numeric:tabular-nums;padding-top:2px}
.cal-md.today .dn{background:var(--graphite);color:#FFFFFF;border-radius:6px;padding:2px 6px 0}
.cal-md .dc{display:none}
.cal-md .mls{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-md .ml{display:block;padding:1px 6px;border-left:3px solid var(--tc);border-radius:4px;background:var(--tf);font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-md .ml .num{font-size:15px;line-height:20px;margin-right:6px;vertical-align:-1px}
.cal-md .ml.done{background:#FFFFFF;color:var(--steel);box-shadow:inset 0 0 0 1px var(--concrete)}
.cal-md .mm{padding-left:4px;font-size:14px;line-height:20px;color:var(--steel)}
.cal-md .mdots{display:none}
.sc-un .row .t .num{font-size:20px;line-height:24px}
@media (max-width:959px){
  .sc-seg .sc-wkbtn{display:none}
}
@media (max-width:699px){
  .sc-bar{flex-direction:column;align-items:stretch}
  .sc-nav{flex-wrap:nowrap}
  .sc-nav .btn{flex:1 1 auto;min-width:0;padding:0 8px}
  .sc-seg{display:flex}
  .sc-seg button{flex:1 1 0}
  .sc-trades{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .sc-trades::-webkit-scrollbar{display:none}
  .sc-un .row .rt{display:none}
  .cal-mh span{padding:6px 0;text-align:center}
  .cal-md{align-items:center;min-height:72px;padding:6px 2px}
  .cal-md .mt{flex-direction:column;gap:0}
  .cal-md .dn{font-size:18px;line-height:22px}
  .cal-md .dc{display:block;font-size:14px;line-height:18px;color:var(--steel)}
  .cal-md .mls{display:none}
  .cal-md .mdots{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
  .cal-md .mdots .sw{width:8px;height:8px}
}
/* ---------------------------------------------------------------- clients, trades */
.recname{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.recname h2{font:700 32px/40px var(--display);letter-spacing:.015em;text-transform:uppercase}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--concrete);border-top:1px solid var(--concrete);border-bottom:1px solid var(--concrete);margin-top:16px}
.kv > div{background:#FFFFFF;padding:8px 16px 8px 0;min-width:0}
.kv > div:not(:nth-child(3n+1)){padding-left:16px}
.kv .k{font-size:14px;line-height:22px;color:var(--steel)}
.kv .v{overflow-wrap:anywhere}
.rule{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:8px 0;align-items:baseline}
.rule .k{font-size:14px;color:var(--steel)}
.prop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;padding:8px 0}
.doc{display:flex;align-items:center;gap:16px;padding:8px 0;min-height:48px}
.doc .bd{flex:1;min-width:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--concrete);border-top:1px solid var(--concrete);border-bottom:1px solid var(--concrete);margin-top:16px}
.stats > div{background:#FFFFFF;padding:8px 16px}
.stats > div:first-child{padding-left:0}
.bigfig{font:700 32px/40px var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
/* ---------------------------------------------------------------- settings, templates */
.tabs{display:flex;gap:8px;margin-bottom:24px}
.tplsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.tpl .key{font-weight:500;overflow-wrap:anywhere}
.editor{border:1px solid var(--concrete);border-radius:var(--r);padding:8px 12px;line-height:24px;white-space:pre-wrap;overflow-wrap:anywhere;background:#FFFFFF}
.editor.sub{min-height:36px;padding:5px 12px}
.mf{background:var(--mist);box-shadow:inset 0 0 0 1px var(--concrete);border-radius:4px;padding:0 4px;white-space:nowrap}
.form{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 16px;align-items:start;padding-top:16px}
.form > .k{font-size:14px;line-height:36px;color:var(--steel)}
.preview{border-top:1px solid var(--concrete);margin-top:16px;padding-top:16px}
.preview .pv{background:#FFFFFF;border:1px solid var(--concrete);border-radius:var(--r);padding:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.preview .pv .s{font-weight:500;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--concrete)}
.set .rows .set-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;min-height:40px;align-items:center}
.set-row .k{color:var(--steel);font-size:14px}
.set-row .v{text-align:right;overflow-wrap:anywhere;min-width:0}
/* ---------------------------------------------------------------- money */
.aging{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--concrete);border-top:1px solid var(--concrete);margin-top:16px}
.aging > div{background:#FFFFFF;padding:8px 16px 0}
.aging > div:first-child{padding-left:0}
/* ---------------------------------------------------------------- document preview: the estimate on screen */
/* ---------------------------------------------------------------- vendor page, phone first */
.vendor{max-width:480px;margin:0 auto;padding:0 16px 48px;background:#FFFFFF}
.vtop{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;border-bottom:1px solid var(--concrete);--logo-ink:#14171B;--logo-accent:#8B3A2B}
.vtop svg{height:20px;width:auto}
.vjob{padding:16px 0}
.vjob h1{font:700 32px/32px var(--display);letter-spacing:.012em;text-transform:uppercase;padding-top:4px;margin-top:4px}
.vjob .when{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:500}
.vprog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 0 16px}
.vprog .vs{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:8px;border-top:3px solid var(--concrete);font-size:14px;line-height:22px;color:var(--steel)}
.vprog .vs.done{border-top-color:var(--graphite);color:var(--graphite)}
.vprog .vs.cur{border-top-color:var(--graphite);color:var(--graphite);font-weight:600}
.vcard{border:1px solid var(--concrete);border-radius:var(--r);padding:12px 16px}
.vcard .k{font-size:14px;line-height:22px;color:var(--steel)}
.vcontact{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.callbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--concrete);background:#FFFFFF;display:grid;place-items:center;cursor:pointer;flex:none;transition:background-color 120ms}
.callbtn:hover{background:var(--mist)}
.vsec{padding:24px 0 0}
.vsec .phead{margin-bottom:16px}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vgrid .ptile .cap{margin-top:4px}
.addph{aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--concrete);background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:500;cursor:pointer;transition:background-color 120ms;width:100%}
.addph:hover{background:var(--mist)}
.vendor .btn{height:44px;width:100%}
.vendor .area,.vendor .input{font-size:15px}
.vendor .input{height:44px}
.gatebox{display:flex;gap:8px;align-items:flex-start;background:var(--wait-fill);border-radius:var(--r);padding:12px 16px;margin-bottom:8px}
.gatebox .dot{margin-top:8px}
.vfoot{padding:24px 0 0;margin-top:24px;border-top:1px solid var(--concrete);font-size:14px;line-height:22px;color:var(--steel)}
.texts{margin-top:32px;border-top:1px solid var(--concrete);padding-top:24px}
.bubble{background:var(--mist);border-radius:12px;padding:8px 12px;margin-top:8px}
.bubble .meta{display:block}
/* ---------------------------------------------------------------- responsive */
@media (max-width:1279px){
  .grid3{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .split{grid-template-columns:1fr}
  .tplsplit{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (max-width:699px){
  :root{--side:0px}
  .side{display:none}
  .main{margin-left:0;padding-bottom:72px}
  .topbar{padding:0 16px;gap:8px}
  .topbar .mlogo{display:block;flex:none}
  .search{width:auto;flex:1;min-width:0;margin-left:8px}
  .view{padding:16px 16px 32px}
  .vhead{margin-bottom:16px;flex-wrap:wrap}
  .ptitle{font-size:32px}
  .btn{height:44px}
  .fbtn{height:44px}
  .seg button{height:42px}
  .switch{height:44px}
  .input,.select{height:44px}
  .panel{scroll-margin-top:64px}
  .bbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;height:64px;background:#FFFFFF;border-top:1px solid var(--concrete);z-index:40}
  .bbar a,.bbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;line-height:22px;font-weight:500;color:var(--steel);border:0;background:none;cursor:pointer;padding:0}
  .bbar .on{color:var(--graphite);font-weight:600;box-shadow:inset 0 3px 0 var(--brick)}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(20,23,27,.32);z-index:44}
  .more.on{display:block;position:fixed;left:0;right:0;bottom:0;background:#FFFFFF;border-radius:16px 16px 0 0;z-index:45;padding:8px 16px 24px}
  .more .handle,.sheetbar .handle{width:40px;height:4px;border-radius:2px;background:var(--concrete);margin:0 auto 8px}
  .more a{display:flex;align-items:center;gap:12px;height:48px;border-top:1px solid var(--concrete);font-weight:500}
  .more a:first-of-type{border-top:0}
  .more .who{padding-top:16px;border-top:1px solid var(--concrete);display:flex;justify-content:space-between;align-items:center}
  .toolbar .tbrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .toolbar .tbrow::-webkit-scrollbar{display:none}
  .toolbar .tbrow .push{margin-left:8px}
  .seg{overflow:visible;flex:none}
  .sheetbar{display:block;position:sticky;top:0;z-index:8;background:#FFFFFF;margin:0 -16px;padding:8px 16px 8px;border-bottom:1px solid var(--concrete)}
  .sheetbar .row{display:flex;align-items:center;gap:8px}
  .sheetbar .btn{margin-left:auto}
  .coverwrap{position:static;padding-top:0;margin-top:0}
  .cover{padding:16px}
  .cover .r1 .btn{display:none}
  .cover h1{font-size:32px;line-height:32px}
  .rec{padding-top:16px}
  .rec .acts,.pfoot,.cbtns{flex-direction:column;align-items:stretch}
  .rec .acts .btn,.pfoot .btn,.cbtns .btn{width:100%}
  .gap{flex-wrap:wrap}
  .gap .btn{width:100%}
  .suggest{flex-wrap:wrap}
  .suggest .btn{width:100%}
  .callback .btn{width:100%}
  .facts,.kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts > div,.kv > div{padding:8px 8px 8px 0!important}
  .facts > div:nth-child(2n),.kv > div:nth-child(2n){padding-left:16px!important}
  .stats,.aging{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats > div,.aging > div{padding:8px 16px 8px 0!important}
  .stats > div:nth-child(2n),.aging > div:nth-child(2n){padding-left:16px!important}
  .hrow{grid-template-columns:56px 72px minmax(0,1fr);}
  .hrow > :last-child{grid-column:3}
  .msg{grid-template-columns:minmax(0,1fr) auto;gap:0 16px}
  .msg .ch{grid-column:1}
  .msg .at{grid-column:2;grid-row:1}
  .msg .bd{grid-column:1/-1}
  .compose .cf{grid-template-columns:1fr}
  .compose .cf > .k{margin-top:8px}
  .rule{grid-template-columns:1fr;gap:0}
  .prop{grid-template-columns:1fr;gap:0}
  .dl{grid-template-columns:96px minmax(0,1fr)}
  .fields{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .form > .k{line-height:20px;margin-top:8px}
  .tabs .btn{flex:1}
  .ledger.wide thead{display:none}
  .ledger.wide,.ledger.wide tbody,.ledger.wide tr,.ledger.wide td{display:block;width:100%}
  .ledger.wide tr{padding:8px 0;border-bottom:1px solid var(--concrete)}
  .ledger.wide td{border:0;padding:0}
  .ledger.wide td.r{text-align:left}
  .ledger.wide td.hide-m{display:none}
}
.ledger th:first-child,.ledger td:first-child{padding-left:8px}
.ledger th:last-child,.ledger td:last-child{padding-right:8px}
.ledger tr.on td{background:var(--mist)}
.tabs .fbtn{text-decoration:none}
@media (max-width:699px){
  .cover .fan{opacity:.45}
}
/* round 1 fixes */
.sheetbar .row .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:699px){
  .cover .fan{height:64px;opacity:1}
  .cover{padding-bottom:24px}
  .gate .gt{flex-wrap:wrap}
  .gate .gt .btn{width:100%}
}
/* round 2 fixes */
.ph{aspect-ratio:3/2}
.msg .tx{overflow-wrap:anywhere}
.aging + .ledger{margin-top:16px}
.mf{padding:0 2px;box-shadow:none;background:var(--concrete)}
.compose{scroll-margin-top:248px}
@media (max-width:699px){
  .compose{scroll-margin-top:96px}
}
/* sticky list: the column sticks, the list scrolls inside it */
@media (min-width:700px){
  .ledger.wide thead th{position:sticky;top:var(--top);background:#FFFFFF;z-index:2}
}
/* ================================================================ v3
   Stage focused record, client logo marks, the live job, the newsletter.
   Same tokens as v2: four greys (graphite, steel, concrete, mist), brick for the one primary button. */
/* logo marks: 20 on rows, 40 on the cover, 56 on the client record. Monogram fallback in graphite. */
.lm{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:4px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete);overflow:hidden;vertical-align:middle}
.lm img{display:block;width:100%;height:100%;object-fit:contain;padding:1px}
.lm.mono{background:var(--graphite);box-shadow:none;color:#FFFFFF;font:700 14px/1 var(--display);letter-spacing:.04em;padding-top:2px}
.lm.m40{width:40px;height:40px;border-radius:8px}
.lm.m40 img{padding:3px}
.lm.m40.mono{font-size:20px;padding-top:3px}
.lm.m56{width:56px;height:56px;border-radius:8px}
.lm.m56 img{padding:4px}
.lm.m56.mono{font-size:26px;padding-top:4px}
.cover .lm.mono{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.lc{display:inline-flex;align-items:center;gap:8px;flex:none;vertical-align:middle}
.fbtn .lm{width:20px;height:20px}
.fbtn[aria-pressed="true"] .lm.mono{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* the Example tag on invented rows */
/* top bar: the live job pill */
.coverwrap{position:static;padding-top:0;margin-top:0}
/* jobs: rows lead with the logo and the code */
.pick .tt .lc{margin-right:8px}
/* list and record side by side: the list column carries the title and filters, the record starts at the top */
.tsel{width:auto;min-width:176px}
.toolbar .tbrow .switch.push{margin-left:auto}
/* ---------------------------------------------------------------- the record, stage focused */
.rec{gap:16px}
.cover{padding:16px 24px 24px;min-height:0}
.cover .r1{gap:12px;min-height:40px}
.cover .r1 .num{font-size:20px;line-height:24px}
.cover .lead{margin:12px 0 8px}
.cover h1{padding-top:4px}
.cover .sub{margin-top:8px}
.panel.work{border-color:var(--graphite)}
.gate .gt{margin-bottom:4px}
.gi.pend .mk{box-shadow:inset 0 0 0 2px var(--concrete)}
.gi.pend .lb{color:var(--steel)}
/* the missing bar */
.gapbar .gap{min-height:44px;padding:4px 0}
.gapbar .phead{padding-bottom:8px}
/* the working panel pieces */
.wline{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-top:16px;border-radius:var(--r);background:var(--mist);color:var(--steel)}
.wline .ic{margin-top:3px;color:var(--steel)}
.wline b{color:var(--graphite);font-weight:500}
.drow{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:center;padding:8px 0;min-height:48px;border-top:1px solid var(--concrete)}
.drow:first-child{border-top:0}
.drow > .k{font-size:14px;line-height:22px;color:var(--steel);align-self:center}
.drow .v{min-width:0;overflow-wrap:anywhere}
.drow .v .meta{display:block}
.drow .v .att{margin-top:8px}
.drow.wait .v::before,.drow.stop .v::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.drow.wait .v::before{background:var(--wait)}
.drow.stop .v::before{background:var(--stop)}
.drows{padding-top:8px}
.att{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 10px;border-radius:6px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete);font-size:14px;line-height:22px;max-width:100%;cursor:pointer;transition:background-color 120ms}
.att:hover{background:var(--mist)}
.att .ic{width:16px;height:16px;color:var(--steel)}
.att .fn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atts{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px}
.said{border-left:3px solid var(--concrete);padding:4px 0 4px 12px;margin-top:8px}
.said .meta{display:block}
.qterms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--concrete);border-top:1px solid var(--concrete);border-bottom:1px solid var(--concrete);margin-top:16px}
.qterms > div{background:#FFFFFF;padding:8px 8px 8px 0;font-size:14px;line-height:22px;min-width:0}
.qterms > div:not(:first-child){padding-left:12px}
.qterms b{display:block;font-weight:600;color:var(--graphite)}
.qterms span{color:var(--steel)}
.ledger td.gapc{color:var(--graphite)}
.ledger td .sub{display:block;font-size:14px;line-height:22px;color:var(--steel)}
.facts2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;padding-top:8px}
.facts2 .gi{border-top:1px solid var(--concrete);min-height:44px;padding:4px 0}
.facts2 .gi .lb{display:flex;flex-direction:column;line-height:20px;padding:4px 0}
.facts2 .gi .lb .k{font-size:14px;color:var(--steel)}
.req{background:var(--mist);border-radius:var(--r);padding:12px 16px;margin-top:16px}
.req .meta{display:block}
.req p{margin-top:4px}
.phgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:16px}
.ph.wait{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--concrete);display:grid;place-items:center;text-align:center;color:var(--steel);font-size:14px;line-height:22px;padding:8px}
.pairs.v3{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr)}
.pairs.v3 .plab{font-size:14px;line-height:22px;font-weight:500;padding-top:4px}
/* the thread: who is on it, condensed messages, two lines, open on click */
.people{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 0}
.person{display:inline-flex;align-items:center;gap:8px;min-width:0}
.person .nm{font-weight:500}
.person .meta{white-space:nowrap}
.aud{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;background:var(--go-fill);font:500 14px/1 var(--text);color:var(--graphite);white-space:nowrap}
.tday{font-size:14px;line-height:22px;color:var(--steel);font-weight:500;padding:12px 0 4px;border-top:1px solid var(--concrete)}
details.m{border-top:1px solid var(--concrete)}
.tday + details.m{border-top:0}
details.m > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding:8px 8px;margin:0 -8px;border-radius:6px;transition:background-color 120ms}
details.m > summary::-webkit-details-marker{display:none}
details.m > summary:hover{background:var(--mist)}
details.m .hd{display:flex;align-items:baseline;gap:8px;min-width:0}
details.m .hd .who{font-weight:600}
details.m .hd .ch{font-size:14px;color:var(--steel);white-space:nowrap}
details.m .at{font-size:14px;line-height:24px;color:var(--steel);white-space:nowrap;font-variant-numeric:tabular-nums}
details.m .tx{grid-column:1/-1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--graphite)}
details.m[open] .tx{display:block;-webkit-line-clamp:unset;white-space:pre-line}
details.m .to{grid-column:1/-1;display:none;font-size:14px;line-height:22px;color:var(--steel)}
details.m[open] .to{display:block}
details.m .atts{grid-column:1/-1}
details.earlier > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;border-top:1px solid var(--concrete);font-weight:500;color:var(--graphite)}
details.earlier > summary::-webkit-details-marker{display:none}
details.earlier > summary:hover{color:var(--steel)}
details.earlier[open] > summary{display:none}
.suggest{border-bottom:1px solid var(--concrete)}
/* everything else, one line each, open on click */
.folds{border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF}
details.fold{border-top:1px solid var(--concrete)}
details.fold:first-child{border-top:0}
details.fold > summary{display:flex;align-items:center;gap:16px;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;border-radius:var(--r);transition:background-color 120ms}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary:hover{background:var(--mist)}
details.fold > summary h2{font:700 18px/24px var(--display);letter-spacing:.03em;text-transform:uppercase;padding-top:2px}
details.fold > summary .meta{margin-left:auto;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.fold > summary .ic{color:var(--steel);transition:transform 150ms}
details.fold[open] > summary .ic{transform:rotate(180deg)}
details.fold[open] > summary{border-radius:var(--r) var(--r) 0 0}
details.fold .fb{padding:0 16px 16px}
details.fold .fb > .rows:first-child,.fold .fb > .dl:first-child{border-top:1px solid var(--concrete)}
/* newsletter */
.lede{color:var(--steel);max-width:72ch;margin:-16px 0 24px}
.ftrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.ftrow .k{font-size:14px;color:var(--steel);margin-right:4px;min-width:56px}
.cbx{width:18px;height:18px;accent-color:var(--graphite);cursor:pointer;vertical-align:middle}
.ledger .co{display:flex;align-items:center;gap:8px;min-width:0}
.ledger .co span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger td .meta{display:block}
.rt-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--mist);font-size:14px;font-weight:500;white-space:nowrap}
.seqhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0 8px}
.seqhead .t{font-weight:600}
.seqhead .acts{margin-left:auto}
.seqhead + .ledger{margin-top:0}
.nfoot{color:var(--steel);font-size:14px;line-height:22px;padding-top:16px}
.tprev{border:1px solid var(--concrete);border-radius:var(--r);padding:12px 16px;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere;background:#FFFFFF}
.tprev .s{font-weight:500;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--concrete)}
.tprev .foot{display:block;margin-top:12px;padding-top:8px;border-top:1px solid var(--concrete);color:var(--steel);font-size:14px;line-height:22px;white-space:normal}
.stepcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--concrete)}
.stepcard:first-child{border-top:0}
.stepcard .d{font:700 18px/24px var(--display);letter-spacing:.03em;text-transform:uppercase}
.stepcard .d .meta{display:block;font:400 14px/22px var(--text);letter-spacing:0;text-transform:none}
/* documents: plain section heads, no numbering */
/* vendor page for the crew */
.vcard + .vcard{margin-top:8px}
.vcard .vr{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 16px;padding:8px 0;border-top:1px solid var(--concrete)}
.vcard .vr:first-of-type{border-top:0}
.vcard .vr .k{font-size:14px;line-height:24px;color:var(--steel)}
.vcard .vr .att{margin-top:4px}
.vcard > .k{padding-bottom:4px}
.vacts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:0 0 16px}
.vendor .btn.primary{width:100%}
@media (max-width:1279px){
  .qterms{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
  .facts2{grid-template-columns:1fr}
}
@media (max-width:699px){
  .topbar .search{margin-left:8px}
  .sheetbar{margin:0 -16px}
  .drow{grid-template-columns:72px minmax(0,1fr)}
  .drow > .btn,.drow > .acts{grid-column:1/-1}
  .drow > .btn{width:100%}
  .qterms{grid-template-columns:1fr 1fr}
  .qterms > div{padding-left:0!important}
  .phgrid{gap:8px}
  .pairs.v3{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:8px}
  .people{flex-direction:column;gap:8px}
  .person{flex-wrap:wrap}
  details.fold > summary{min-height:56px}
  .lede{margin-top:-8px}
  .ftrow{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:0 16px;scrollbar-width:none}
  .ftrow::-webkit-scrollbar{display:none}
  .stepcard{grid-template-columns:1fr;gap:8px}
  .vacts{grid-template-columns:1fr}
  .cover .r1 .btn{display:none}
  .tsel{min-width:0;flex:1}
}
/* v3 layout fixes */
.pick .tt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pick .tt .lc{margin-right:0}
.recname{align-items:center}
.recname h2{line-height:40px}
.vjob .when .ic{width:16px;height:16px}
.addph .ic{width:22px;height:22px;color:var(--steel)}
@media (max-width:699px){
  .recname .btn{width:100%}
}
/* round 1 */
.rec, .rec > *{min-width:0}
.ph.wait{aspect-ratio:auto;height:96px}
.cover{padding:16px 24px 20px}
.cover .lead{margin:8px 0}
.rec .gate{padding-top:12px}
.gapbar .gap{min-height:40px}
.vm{display:flex;align-items:center;gap:8px;min-width:0}
.vm .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm .lm{width:16px;height:16px}
/* round 2 */
.rec{gap:12px}
.cover{padding:16px 24px 16px}
.gapbar{padding-top:12px;padding-bottom:8px}
.gapbar .gap{min-height:40px;padding:2px 0}
/* round 3 */
.fig .meta,.fig .ex{font:400 14px/22px var(--text);letter-spacing:0}
.crow{padding:8px 0}
.crow .cons{font-size:14px;line-height:22px;margin-top:4px}
.camps tr.substep td{border-bottom-color:var(--mist);padding-top:4px;padding-bottom:4px}
.camps tr.substep td:first-child{padding-left:32px}
.camps tr.substep .num{display:inline-block;min-width:56px;font-size:15px}
.camps tr.link + tr.substep td{padding-top:8px}
.camps tr.substep + tr.link td{border-top:1px solid var(--concrete)}
.camps tr.link td{background:var(--mist)}
.camps tr.link:hover td{background:var(--concrete)}
@media (max-width:699px){
  .camps tr.substep td:first-child{padding-left:0}
  .camps tr.substep td:empty{display:none}
}
@media (max-width:699px){
  .search .input::placeholder{color:transparent}
}
/* ================================================================ the app: the readability layer (spec section 5.0)
   Text 16 on 26, meta 14 on 22, screen title 34, section head 20, figures 24 in DIN Condensed, buttons 40 tall,
   chips 28 tall. Nothing on a staff screen is under 14 px. Content is at most 1120 wide, centred, 32 at the sides
   and 16 on a phone. Rows are at least 64 tall with 12 between them. A section head has 40 above and 16 below.
   Same tokens as the mockup: no new colours, no dark mode, no web fonts. */
body{font:400 16px/26px var(--text)}
.meta{font-size:14px;line-height:22px}
h1,.ptitle{font:700 34px/40px var(--display);letter-spacing:.015em;text-transform:uppercase}
.num,.fig{font-size:24px;line-height:28px}
.ic{width:20px;height:20px}
.ic.s{width:14px;height:14px}
.chip .ic,.cc .ic{width:14px;height:14px}
.btn{height:40px;padding:0 16px;font:500 16px/1 var(--text)}
.input,.select,.area{height:40px;font-size:16px}
.area{height:auto;min-height:104px;padding:8px 12px;line-height:26px}
.input[aria-invalid="true"],.select[aria-invalid="true"],.area[aria-invalid="true"]{border-color:var(--stop)}
.chip{height:28px;padding:0 12px}
.chip i{width:8px;height:8px}
.chip.done .ic{width:14px;height:14px}
.cc{height:28px;min-width:44px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fbtn{height:40px}
.seg button{height:38px}
.switch{height:40px}

/* shell */
.nav a{height:44px;font-size:16px}
.nav .ct{font-size:14px;min-width:24px;text-align:right}
.side .who{font-size:16px}
.side .who > *{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .who .out,.more .who .out{display:inline-block;margin-top:4px}
.who .out:hover{color:var(--graphite);text-decoration:underline}
.more a.on{color:var(--graphite);font-weight:600}
.who .wn{display:flex;flex-direction:column;min-width:0}
.who .wn > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .out{white-space:nowrap}
.topbar .ttl.dup{visibility:hidden}
.topbar{padding:0}
.topbar .wrap{flex:1 1 auto;width:100%;height:100%;display:flex;align-items:center;gap:16px}
.topbar .ttl{font:700 20px/28px var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.search{margin-left:auto;width:360px;flex:none}
.search .ic{top:10px}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.view{max-width:1120px;margin:0 auto;padding:32px 32px 80px}
.view:focus{outline:none}
.view[aria-busy="true"]{opacity:.6}
.vhead{margin-bottom:24px}
.vhead .tl{gap:4px 16px}
.vhead .when{font-size:16px}
.acts .btn,.pfoot .btn{flex:none}

/* sections: the head carries the brick lead, 40 above and 16 below; boxed panels belong to the record */
.panel{background:none;border:0;border-radius:0;padding:0;scroll-margin-top:80px}
.phead{margin:40px 0 16px;padding-bottom:8px}
.phead h2{font:700 20px/28px var(--display);letter-spacing:.03em;text-transform:uppercase}
.vhead + .panel > .phead,.vhead + .alert + .panel > .phead,.view > .panel:first-child > .phead{margin-top:0}
.panel.box,.panel.work,.panel.gapbar{padding:16px 24px 24px;border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF}
.panel.work{border-color:var(--graphite)}
.panel.box > .phead,.panel.work > .phead,.panel.gapbar > .phead{margin:0 0 16px}
.rec{gap:24px}
.rec .gate{padding-top:16px}
.empty{padding:16px 0;color:var(--steel)}
.nothing{padding:16px 0}
.pfoot{padding-top:24px}

/* rows: two lines, at least 64 tall, 12 apart. Rows are cards. Flat rows are the divider lists inside a box. */
.rows{display:grid;gap:12px}
.rows.flat{gap:0}
.rows.flat > *{border-top:1px solid var(--concrete)}
.rows.flat > *:first-child{border-top:0}
.row,.lrow{display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 16px;border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF;min-width:0}
.row .bd{flex:1;min-width:0}
.row .t{display:flex;align-items:center;gap:8px;min-width:0}
.row .t .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;min-width:0}
.row .rt{flex:none;display:flex;align-items:center;gap:16px;text-align:right}
.row.link{cursor:pointer;transition:background-color 120ms}
.row.link:hover{background:var(--mist)}
.ghead{display:flex;align-items:center;gap:12px;min-height:40px;margin:24px 0 12px}
.ghead:first-child{margin-top:0}
.ghead b{font-weight:600}
.ghead .meta{margin-left:auto}
.gap{min-height:64px;padding:12px 0;gap:16px}
.gap .bd{gap:4px 12px}
.gap .bd .t500{white-space:normal}

/* the job row: line one the client mark, the job number, the title; line two the address, the chips; the one button on the right */
.jrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l1 nx" "l2 nx";column-gap:16px;row-gap:4px;align-items:center;min-height:72px;padding:12px 16px;border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF;cursor:pointer;transition:background-color 120ms}
.jrow:hover{background:var(--mist)}
.jrow .l1{grid-area:l1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}
.jrow .l1 .num{flex:none}
.jrow .l1 .tt{flex:1 1 0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.jrow .l2{grid-area:l2;display:flex;align-items:center;flex-wrap:nowrap;gap:4px 12px;min-width:0}
.jrow .l2 .chips{flex:none}
.jrow .l2 .ad{color:var(--steel);font-size:14px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.jrow .nx{grid-area:nx;justify-self:end;max-width:280px}
.jrow .nx .btn{height:auto;min-height:40px;max-width:100%;padding:6px 16px;line-height:22px;white-space:normal;text-align:center}
.jrow .nx .btn span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance}
.jrow .nx:empty{display:none}

/* client marks: 24 on rows, 40 on the cover, 56 on the client record; the monogram tile when there is no logo */
.lm{width:24px;height:24px}
.lm.mono{font-size:14px;padding-top:2px}
.lm.m40{width:40px;height:40px}
.lm.m40.mono{font-size:20px;padding-top:3px}
.lm.m56{width:56px;height:56px}
.lm.m56.mono{font-size:26px;padding-top:4px}
.cmk{display:inline-flex;align-items:center;gap:8px;flex:none;max-width:100%}
.cmk .cc{flex:none}
.cmk .cn{font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cover .cmk .cn{color:var(--on-dark);font-weight:400}
.ghead .cmk .cn{font-weight:600;max-width:none}

/* tiles: a figure with a label under it and one line of meta, each a link to the list behind it */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tile{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-width:0;min-height:120px;padding:16px;border:1px solid var(--concrete);border-radius:var(--r);background:#FFFFFF;color:inherit}
a.tile{cursor:pointer;transition:background-color 120ms}
a.tile:hover{background:var(--mist)}
.tile .num{font-size:34px;line-height:40px}
.tile .num.long{font-size:28px}
.tile .lb{font-weight:500;line-height:24px;margin-top:4px}
.tile .meta{margin-top:2px}
.tiles.small .tile{min-height:0;padding:12px 16px}
.tiles.small .tile .num{font-size:24px;line-height:28px}
.tiles.small .tile .num.long{font-size:24px}

/* an alert is a red or amber line under the title */
.alert{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px;margin:-8px 0 24px;border-radius:var(--r);background:var(--mist)}
.alert::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel);flex:none}
.alert.stop{background:var(--stop-fill)}
.alert.stop::before{background:var(--stop)}
.alert.wait{background:var(--wait-fill)}
.alert.wait::before{background:var(--wait)}
.alert + .alert{margin-top:-16px}

/* the record parts built as components */
.cover{padding:20px 24px 24px}
.cover .r1{gap:12px;min-height:40px;flex-wrap:wrap}
.cover .r1 .num{font-size:24px;line-height:28px}
.cover .r1 .chips{margin-left:auto}
.cover .lead{margin:12px 0 8px}
.cover h1{font:700 34px/36px var(--display);max-width:680px}
.cover .sub{font-size:16px;line-height:26px;max-width:64ch}
.gate .gt b{font-size:16px}
.gi{min-height:48px;gap:12px}
.gi .mk{width:22px;height:22px}
.gi.ok .mk .ic{width:12px;height:12px}
.gi.no .mk{box-shadow:inset 0 0 0 2px var(--stop);color:var(--stop)}
.gi.no .mk .ic{width:12px;height:12px;stroke-width:3.2}
.gi .btn{flex:none}
.gi .meta{max-width:45%}
.gapbar .gap{min-height:64px;padding:12px 0}
details.fold > summary{min-height:64px}
details.fold > summary h2{font-size:20px;line-height:28px}
details.fold > summary .meta{max-width:60%}
.folds{margin-top:0}
.ledger td,.ledger th{padding-top:10px;padding-bottom:10px}
.ptile{min-width:0}
.ptile .cap,.ptile .by{font-size:14px;line-height:22px}
.ptile .cap{margin-top:8px}
.ptile .by{color:var(--steel)}
.ptile .ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.ptile .ph.wait{aspect-ratio:auto;min-height:96px}
.recname h2{font-size:34px}

/* forms: a labelled grid, two across on a wide screen, one on a phone */
.fields{gap:16px;padding-top:0}
.fields .full{grid-column:1/-1}
.fields label{gap:6px;font-size:14px;line-height:22px}
.fields .lbl{color:var(--steel)}
.fields .rq{margin-left:8px;color:var(--steel);font-weight:400}
.fields .hint{color:var(--steel);font-size:14px;line-height:22px}
.fields label.chk{flex-direction:row;align-items:center;gap:12px;min-height:40px;font-size:16px;line-height:24px;color:var(--graphite)}
.fields label.chk .cbx{flex:none}
.cbx{width:20px;height:20px}

/* toasts, the side sheet and the small confirm dialog */
.toasts{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:calc(100vw - 32px);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:48px;max-width:480px;padding:12px 16px;border-radius:var(--r);background:var(--graphite);color:#FFFFFF;font-size:16px;line-height:24px;box-shadow:0 8px 24px rgba(20,23,27,.24);animation:fade 150ms ease-out;cursor:pointer}
.toast.stop{background:var(--stop)}
.toast.wait{background:var(--wait-fill);color:var(--graphite);box-shadow:inset 0 0 0 1px var(--wait),0 8px 24px rgba(20,23,27,.16)}
.toast.go::before{content:"";width:8px;height:8px;border-radius:50%;background:#7FD3A2;flex:none}
.backdrop{position:fixed;inset:0;z-index:60;background:rgba(20,23,27,.32);animation:fade 150ms ease-out}
.backdrop.top{z-index:70}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(560px,100%);display:flex;flex-direction:column;background:#FFFFFF;box-shadow:-12px 0 32px rgba(20,23,27,.16);animation:slidein 180ms ease-out}
.sheet:focus,.more:focus{outline:none}
@keyframes slidein{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 24px;border-bottom:1px solid var(--concrete)}
.sheet-h h2{font:700 20px/28px var(--display);letter-spacing:.03em;text-transform:uppercase;min-width:0}
.sheet-b{flex:1;min-height:0;overflow-y:auto;padding:24px}
.sheet-b > .pfoot:last-child{padding-top:24px}
.dialog{position:fixed;left:50%;top:50%;z-index:71;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));padding:24px;border-radius:12px;background:#FFFFFF;box-shadow:0 16px 48px rgba(20,23,27,.24);animation:fade 150ms ease-out}
.dialog:focus{outline:none}
.dialog .acts{justify-content:flex-end;margin-top:24px}
body.noscroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:1279px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jrow .cmk .cn{display:none}
}
@media (max-width:899px){
  .jrow{grid-template-columns:minmax(0,1fr);grid-template-areas:"l1" "l2" "nx";row-gap:8px}
  .jrow .l1{flex-wrap:wrap;row-gap:4px;overflow:visible}
  .jrow .l1 .tt{flex:1 0 100%;white-space:normal}
  .jrow .l2{flex-wrap:wrap}
  .jrow .nx{justify-self:start;max-width:100%;padding-top:4px}
}
@media (max-width:699px){
  .wrap,.view{padding-left:16px;padding-right:16px}
  .view{padding-top:16px;padding-bottom:32px}
  .topbar .wrap{gap:8px}
  .topbar .ttl{display:none}
  .search{width:auto;flex:1;min-width:0;margin-left:8px}
  .search .ic{top:12px}
  .nav a,.more a{font-size:16px}
  .more a{height:56px}
  .bbar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bbar a,.bbar button{font-size:14px;line-height:18px}
  .vhead .tl{gap:0 12px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:112px;padding:12px 16px}
  .tile .num{font-size:34px}
  .tile .num.long{font-size:28px}
  .jrow .nx{justify-self:stretch;max-width:none}
  .jrow .nx .btn{width:100%}
  .cmk .cn{display:none}
  .ghead .cmk .cn{display:inline}
  .row{flex-wrap:wrap}
  .row .rt{margin-left:auto}
  .panel.box,.panel.work,.panel.gapbar{padding:16px}
  .cover{padding:16px 16px 24px}
  .cover h1{font-size:34px;line-height:36px}
  .cover .r1 .chips{margin-left:0;width:100%}
  .gap .dot{align-self:flex-start;margin-top:9px}
  .gi{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 12px;align-items:start;padding:10px 0}
  .gi + .gi{border-top:1px solid var(--mist)}
  .gi .mk{margin-top:2px}
  .gi .lb,.gi .meta,.gi .btn{grid-column:2}
  .gi .meta{max-width:none;text-align:left;padding:0}
  .gi .btn{justify-self:start;margin-top:8px}
  .toasts{left:16px;right:16px;bottom:80px;align-items:stretch;max-width:none}
  .toast{max-width:none}
  .sheet{width:100%}
  .sheet-h{padding:8px 16px}
  .sheet-b{padding:16px}
  .fields{grid-template-columns:1fr}
  .dialog{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;border-radius:16px 16px 0 0;padding:16px 16px 24px}
  .dialog .acts{flex-direction:column-reverse;align-items:stretch}
  .dialog .acts .btn{width:100%}
  .fbtn,.seg button,.switch{height:44px}
}

/* the search box's typeahead (slice 9) */
.search .sl{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:35;background:#FFFFFF;border:1px solid var(--concrete);border-radius:var(--r);box-shadow:0 12px 32px rgba(20,23,27,.12);max-height:70vh;overflow:auto;padding:4px 0;text-align:left}
.search .sl[hidden]{display:none}
.search .sl .g{padding:8px 12px 2px;font-size:14px;line-height:22px;color:var(--steel);font-weight:500}
.search .sl button{display:block;width:100%;text-align:left;padding:6px 12px;border:0;background:#FFFFFF;font:inherit;color:inherit;cursor:pointer}
.search .sl button .tt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.search .sl button .meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search .sl button[aria-selected="true"],.search .sl button:hover{background:var(--mist)}
.search .sl .more{display:block;padding:4px 12px 8px;font-size:14px;line-height:22px;color:var(--brick);background:#FFFFFF;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.search .sl .none{padding:8px 12px;font-size:14px;line-height:22px;color:var(--steel)}
.s-hit .bd{min-width:0}
.s-hit .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.s-hit .pv{display:block;color:var(--steel);font-size:14px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}