/* ═══════════════ tokens ═══════════════ */
:root{
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Snell Roundhand","Apple Chancery","Brush Script MT",cursive;
  --r:10px; --r-sm:7px; --r-lg:16px;
}

/* Terminal theme */
body[data-theme="terminal"]{
  --bg:#0d1117; --panel:#141b24; --panel2:#1a2330; --line:#243040; --raise:#1d2836;
  --ink:#e6edf5; --dim:#8ba0b8; --dimmer:#5d7288;
  --accent:#39d0d8; --accent-ink:#06222a; --accent2:#39d0d8;
  --good:#3fb950; --warn:#e3b341; --bad:#f0666b;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --bevel:none; --grad:var(--raise);
}

/* Aqua — light */
body[data-theme="mac"][data-mode="light"]{
  --bg:#eceef2; --panel:#f7f8faee; --panel2:#ffffff; --line:#d7dbe2; --raise:#ffffff;
  --ink:#1c1f24; --dim:#6b7280; --dimmer:#9aa2ae;
  --accent:#0a84ff; --accent-ink:#ffffff; --accent2:#0a6fd8;
  --good:#28a745; --warn:#c88a00; --bad:#e5484d;
  --shadow:0 18px 45px rgba(20,28,45,.18),0 2px 6px rgba(20,28,45,.10);
  --bevel:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.05);
  --grad:linear-gradient(180deg,#ffffff,#f1f3f7);
}

/* Aqua — dark */
body[data-theme="mac"][data-mode="dark"]{
  --bg:#1c1d22; --panel:#2a2c33ee; --panel2:#32343c; --line:#43464f; --raise:#3a3d45;
  --ink:#f2f3f5; --dim:#a5abb6; --dimmer:#787f8b;
  --accent:#0a84ff; --accent-ink:#ffffff; --accent2:#409cff;
  --good:#32d74b; --warn:#ffd60a; --bad:#ff453a;
  --shadow:0 18px 45px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --bevel:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.25);
  --grad:linear-gradient(180deg,#3a3d45,#2e3038);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);overflow:hidden;
  -webkit-font-smoothing:antialiased}
body.booting .window,body.booting .menubar,body.booting .dock{opacity:0}
button,input,select,textarea{font:inherit;color:inherit}
kbd{font:13px var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--dim)}
.spacer{flex:1}
[hidden]{display:none!important}

/* ═══════════════ buttons ═══════════════ */
.btn,.tbtn{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 10px;font-size:14px;cursor:pointer;transition:.13s background,.13s border-color,.1s transform;
  box-shadow:var(--bevel);background-image:var(--grad)}
.btn:hover,.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active,.tbtn:active{transform:translateY(1px)}
.btn.primary,.tbtn.primary{background:var(--accent);background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));
  color:var(--accent-ink);border-color:var(--accent2);font-weight:600}
.btn.primary:hover,.tbtn.primary:hover{color:var(--accent-ink);filter:brightness(1.06)}
.tbtn.primary-soft{border-color:var(--accent);color:var(--accent)}
.btn.wide{width:100%}
.wide-btn{white-space:nowrap}
.btn.danger,.tbtn.danger{color:var(--bad)}
.btn:disabled,.tbtn:disabled{opacity:.45;cursor:not-allowed}
.chip{background:var(--panel2);background-image:var(--grad);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;cursor:pointer;color:var(--dim);max-width:250px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;box-shadow:var(--bevel)}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.seg{background:transparent;border:1px solid var(--line);padding:5px 12px;cursor:pointer;color:var(--dim)}
.seg:first-of-type{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.seg:last-of-type{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:none}
.seg.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent2)}

/* ═══════════════ window ═══════════════ */
.window{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
  transition:opacity .35s}
.titlebar{min-height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line);
  background:var(--panel);background-image:var(--grad)}
.lights{display:none;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.lights .r{background:#ff5f57}.lights .y{background:#febc2e}.lights .g{background:#28c840}
.tb-title{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.doc-name{background:transparent;border:1px solid transparent;border-radius:var(--r-sm);padding:5px 8px;
  font-size:16px;font-weight:600;width:100%;min-width:0}
.doc-name:hover{border-color:var(--line)}
.doc-name:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
.rev-badge{font-size:12px;font-weight:700;letter-spacing:.7px;padding:2px 7px;border-radius:999px;
  background:var(--warn);color:#231a00}
.tb-right{display:flex;align-items:center;gap:6px}
.tb-sep{width:1px;height:20px;background:var(--line)}

.toolbar{min-height:40px;display:flex;align-items:center;gap:6px;padding:4px 14px;border-bottom:1px solid var(--line);
  background:var(--panel);overflow-x:auto;scrollbar-width:none}
.toolbar::-webkit-scrollbar{display:none}

/* ═══════════════ layout ═══════════════ */
/* The two side panels used to be 620px of fixed furniture. On a window only
 * half uncovered that left the document a sliver, so the widths are now set
 * from JS against the real width of .layout (fitLayout), and either side can
 * be shut to a strip. The numbers here are only what the first paint uses
 * before that runs. */
.layout{flex:1;display:grid;min-height:0;--catW:290px;--inspW:330px;
  grid-template-columns:var(--catW) minmax(0,1fr) var(--inspW);
  transition:grid-template-columns .16s ease}
.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* The tab that shuts a panel, and becomes the whole panel once it is shut. */
.rail-tab{display:flex;align-items:center;justify-content:space-between;gap:6px;flex:none;
  width:100%;padding:6px 9px;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--dimmer);cursor:pointer;font:600 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.inspector .rail-tab{position:sticky;top:0;z-index:3;background:var(--panel)}
.rail-tab:hover{color:var(--ink);background:var(--panel2)}
.rail-tab .cv{font-size:15px;line-height:1;opacity:.7}

body.railL-shut .catalog>:not(.rail-tab),
body.railR-shut .inspector>:not(.rail-tab){display:none}
body.railL-shut .catalog .rail-tab,
body.railR-shut .inspector .rail-tab{flex:1;flex-direction:column;justify-content:flex-start;
  gap:13px;padding:11px 0;border-bottom:0}
body.railL-shut .catalog .rail-tab .lb,
body.railR-shut .inspector .rail-tab .lb{writing-mode:vertical-rl;transform:rotate(180deg)}
body.railL-shut .catalog .rail-tab .cv,
body.railR-shut .inspector .rail-tab .cv{transform:rotate(180deg);opacity:1}

/* Shut because it does not fit, not because you asked. It comes back on its
 * own when the window is wide enough again, so the tab says so rather than
 * pretending it was your choice. */
.rail-tab.forced{color:var(--accent)}

/* A catalog under 240px cannot hold a thumbnail, a product name and a price
 * side by side: the name shreds into four lines and the price loses its
 * decimals. Under that width the row becomes a single column, the name takes
 * the whole of it, and the price sits underneath. */
body.cat-narrow .cat-item{grid-template-columns:minmax(0,1fr);gap:2px;padding:7px 8px}
body.cat-narrow .cat-item .thumb{display:none}
body.cat-narrow .cat-tabs{padding:7px 8px;gap:3px}
body.cat-narrow .cat-tab{font-size:12px;padding:3px 8px}
.catalog{border-right:1px solid var(--line)}
.inspector{border-left:1px solid var(--line);overflow-y:auto}
.doc{overflow-y:auto;padding:11px 16px 160px;min-height:0;background:var(--bg)}

/* ═══════════════ catalog ═══════════════ */
.panel-head{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line)}
.search{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px}
.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}
.cat-tab{font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer}
.cat-tab:hover{color:var(--ink);border-color:var(--accent)}
.cat-tab.on{background:var(--accent);border-color:var(--accent2);color:var(--accent-ink);font-weight:600}
.cat-list{flex:1;overflow-y:auto;padding:6px}
.cat-item{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:7px;
  border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent}
.cat-item:hover,.cat-item.hot{background:var(--panel2);border-color:var(--line);box-shadow:var(--bevel)}
.thumb{width:34px;height:34px;border-radius:var(--r-sm);object-fit:cover;background:var(--raise);display:grid;
  place-items:center;font-weight:700;color:var(--dimmer);font-size:14px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.cat-item .nm{font-size:14px;line-height:1.25;overflow:hidden}
.cat-item .nm i{display:block;font-style:normal;color:var(--dimmer);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.cat-item .pr{font:14px var(--mono);color:var(--accent)}
.cat-item .star{opacity:.25;font-size:13px}
.cat-item .star.on{opacity:1}
.cat-item .edit{opacity:0;font-size:12px;color:var(--dim)}
.cat-item:hover .edit{opacity:1}
.cat-empty{padding:12px;color:var(--dimmer);text-align:center;font-size:14px;line-height:1.5}
.panel-foot{padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}

/* ═══════════════ lines ═══════════════ */
.empty{color:var(--dimmer);text-align:center;padding:38px 20px;line-height:1.5}
.lines{display:flex;flex-direction:column;gap:8px}

.ln{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:9px 10px 9px 4px;
  display:grid;grid-template-columns:22px 42px minmax(0,1fr);gap:9px;align-items:start;
  box-shadow:var(--bevel);transition:.12s border-color,.12s box-shadow}
.ln:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ln.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.ln.drag-over{box-shadow:0 -3px 0 var(--accent) inset}
.ln.dragging{opacity:.3}
.ln.locked{border-left:3px solid var(--warn)}
.ln.below-floor{border-color:var(--bad)}
.ln.optional{opacity:.72;border-style:dashed}
.grip{cursor:grab;color:var(--dimmer);text-align:center;padding-top:9px;user-select:none}
.grip:active{cursor:grabbing}
.imgcell{width:42px;height:42px;border-radius:var(--r-sm);background:var(--raise);display:grid;place-items:center;
  overflow:hidden;cursor:pointer;color:var(--dimmer);font-size:17px;border:1px dashed var(--line)}
.imgcell img{width:100%;height:100%;object-fit:cover}
.ln .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ln .r1{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:7px;align-items:center}
.ln .r2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) auto;gap:6px;align-items:center;margin-top:3px}

.f{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;min-width:0;width:100%}
.f:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.f.num{font-family:var(--mono);text-align:right}
.f.vendor{color:var(--dim);font-size:14px}
.f.product{font-weight:600}
textarea.f{resize:vertical;min-height:32px;line-height:1.45;font-size:14px;color:var(--dim)}
.f.details{font-size:13px;color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--bg))}
.fw{position:relative}
.fw>label{position:absolute;top:-6px;left:7px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--dimmer);background:var(--panel2);padding:0 3px;pointer-events:none}

.ext{font:15px var(--mono);text-align:right;min-width:104px;padding:4px 2px}
.ext .was{display:block;font-size:12.5px;color:var(--dimmer);text-decoration:line-through}
.ext .now{font-weight:700}
.ext .marg{display:block;font-size:12px;color:var(--dim)}
.ext .marg.low{color:var(--warn)}.ext .marg.neg{color:var(--bad)}

.badge{font-size:12px;font-weight:800;letter-spacing:.7px;padding:2px 6px;border-radius:5px;margin-left:6px}
.badge.revised{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.badge.added{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.badge.optional{background:color-mix(in srgb,var(--dim) 22%,transparent);color:var(--dim)}

/* ── revision compare: any two versions, line by line ── */
.rev-cmp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm)}
.rev-cmp-bar label{font-weight:600;color:var(--dim)}
.rev-cmp-bar select.f{width:auto;min-width:150px;flex:0 1 auto}
.rev-arrow{color:var(--dim);font-weight:700}
.rev-cmp{margin:0 0 12px}
.rev-cmp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.rev-cmp-head small{color:var(--dim);font-weight:400}
.rev-delta{margin-left:auto;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--dim) 18%,transparent);color:var(--dim)}
.rev-delta.up{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.rev-delta.down{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}
.rc-row{display:flex;align-items:baseline;gap:8px;padding:6px 10px;margin:5px 0;border-radius:var(--r-sm);
  border-left:3px solid var(--line);background:var(--panel2)}
.rc-row small{color:var(--dim)}
.rc-tag{font-size:11px;font-weight:800;letter-spacing:.6px;padding:1px 6px;border-radius:5px;flex:0 0 auto}
.rc-add{border-left-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--panel2))}
.rc-add .rc-tag{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.rc-rem{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--panel2))}
.rc-rem .rc-tag{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.rc-rem b{text-decoration:line-through;opacity:.75}
.rc-chg{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--panel2))}
.rc-chg .rc-tag{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}

.ln .tools{display:flex;gap:3px;align-items:center}
.tgl{border:1px solid var(--line);background:transparent;border-radius:5px;padding:3px 6px;font-size:12.5px;
  color:var(--dimmer);cursor:pointer}
.tgl.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tgl.lock.on{color:var(--warn);border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.tgl.del:hover{color:var(--bad);border-color:var(--bad)}

.ln.section{grid-template-columns:22px minmax(0,1fr);background:var(--panel);align-items:center;
  padding:8px 10px 8px 4px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.ln.section .row{display:flex;align-items:center;gap:8px}
.sec-title{background:transparent;border:none;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  font-size:14px;color:var(--accent);flex:1;padding:4px}
.sec-title:focus{outline:none;background:var(--bg);border-radius:var(--r-sm)}
.sec-sum{font:14px var(--mono);color:var(--dim);white-space:nowrap}
.sec-caret{cursor:pointer;color:var(--dim);width:18px;text-align:center;user-select:none}
.ln.collapsed+.ln{margin-top:0}
/* A phase is the top-level group on a two-phase (pre-wire / trim-out) job — it
   reads bigger than the sub-section bands nested beneath it, and its subtotal is
   the whole phase. */
.ln.section.phase{background:color-mix(in srgb,var(--accent) 12%,var(--panel));
  border-color:var(--accent);border-left:4px solid var(--accent);
  margin-top:18px;padding-top:11px;padding-bottom:11px}
.ln.section.phase .sec-title{font-size:16px;letter-spacing:1.4px}
.ln.section.phase .sec-sum{color:var(--ink);font-weight:700}
/* Sub-sections under a phase sit slightly indented so the hierarchy reads. */
.ln.section.phase ~ .ln.section:not(.phase){margin-left:12px}
/* The push-by-phase dialog: one card per phase, its total, its deposit. */
.ph-push-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ph-push-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--panel)}
.ph-push-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ph-push-head b{font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent)}
.ph-push-tot{font:15px var(--mono);font-weight:700;white-space:nowrap}
.ph-push-dep{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.ph-depmode{padding:3px 9px;font-size:12px;white-space:nowrap}
.ph-depval{width:88px}
.ph-push-depout{font-size:12px;color:var(--dim)}
.ph-push-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.ph-res{font-size:12px}

.bulkbar{position:sticky;top:0;z-index:5;display:flex;gap:6px;align-items:center;padding:8px 10px;margin-bottom:10px;
  background:var(--accent);color:var(--accent-ink);border-radius:var(--r);box-shadow:var(--shadow)}
.bulkbar .tbtn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:var(--accent-ink);box-shadow:none}
.bulkbar .tbtn:hover{background:rgba(255,255,255,.28);color:var(--accent-ink)}
.bulkbar .tbtn.danger{color:#fff}

/* ═══════════════ inspector ═══════════════ */
.mkw{padding:11px;border-bottom:1px solid var(--line)}
.mkw-title{font-size:16px;font-weight:700}
.mkw-sub{margin:2px 0 10px;color:var(--dimmer);font-size:13px}
.mkw-row{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);padding:4px 11px;box-shadow:var(--bevel)}
.mkw-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.cur{color:var(--dim);font:18px var(--mono)}
.target{flex:1;background:transparent;border:none;font:24px var(--mono);padding:4px 0}
.target:focus{outline:none}
.mkw-opts{display:flex;flex-direction:column;gap:5px;margin-top:9px;font-size:13px;color:var(--dim)}
.mkw-opts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.mkw-opts i{font-style:normal;color:var(--dimmer)}
.mkw-opts select{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 5px;font-size:13px}
.mini{width:42px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 4px;
  font:13px var(--mono);text-align:right}
.mkw-actions{display:flex;gap:6px;margin-top:11px}
.mkw-msg{margin-top:9px;font-size:13px;color:var(--dim);line-height:1.55}
.mkw-msg.ok{color:var(--good)}.mkw-msg.warn{color:var(--warn)}.mkw-msg.err{color:var(--bad)}
.whatif{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.whatif label{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:5px}
.whatif b{font-family:var(--mono);color:var(--ink)}
.whatif input{width:100%;accent-color:var(--accent)}

.totals-block{padding:12px 14px;border-bottom:1px solid var(--line)}
.trow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:14px;color:var(--dim)}
.trow b{font-family:var(--mono);color:var(--ink);font-weight:500}
.trow.sub{font-size:13px;color:var(--dimmer)}
.trow.strong{border-top:1px solid var(--line);margin-top:5px;padding-top:7px;color:var(--ink)}
.trow.grand{border-top:1px solid var(--line);margin-top:5px;padding-top:7px;font-size:17px;color:var(--ink)}
.trow.grand b{font-size:19px;font-weight:700;color:var(--accent)}
.trow.dep{font-size:13px}
.trow.dep b{color:var(--dim)}
.trow.opt b{color:var(--dimmer)}
.profit .trow.grand b{color:var(--good)}
.profit.low .trow.grand b{color:var(--warn)}
.profit.neg .trow.grand b{color:var(--bad)}
.margin-bar{height:5px;border-radius:3px;background:var(--raise);margin-top:8px;overflow:hidden}
.margin-bar i{display:block;height:100%;width:0;background:var(--good);transition:.25s}
.profit.low .margin-bar i{background:var(--warn)}
.profit.neg .margin-bar i{background:var(--bad)}
.totals-block.small .trow{font-size:13px}

/* ═══════════════ modal ═══════════════ */
/* Above the notepad (80), below the bill gate (120).
   It was 60, which is under the pad — so a modal opened from inside the pad
   was there, correct, and completely invisible. That hid the push preview,
   and it had already been hiding "It will not bill that". A modal is always
   the top thing while it is open; only the gate outranks it. */
.modal-root{position:fixed;inset:0;display:grid;place-items:center;z-index:100}
.modal-root[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(10,14,20,.5);backdrop-filter:blur(3px)}
.modal{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(780px,93%);max-height:88%;display:flex;flex-direction:column;box-shadow:var(--shadow)}   /* % of the fixed root, not vw/vh: see .modal-root.wide */
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:17px}
.modal-body{padding:12px;overflow:auto}
.modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.form-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 13px;align-items:center}
.form-grid>label{color:var(--dim);font-size:14px;text-align:right}
.form-grid .full{grid-column:1/-1}
.hint{color:var(--dimmer);font-size:13px;margin:5px 0 0;line-height:1.55}
.list{display:flex;flex-direction:column;gap:5px;max-height:54vh;overflow:auto}
.list .row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--bg)}
.list .row:hover{border-color:var(--accent)}
.list .row small{color:var(--dimmer)}
pre.payload{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;overflow:auto;
  max-height:36vh;font:13px var(--mono);color:var(--dim);white-space:pre-wrap;word-break:break-word}
.summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:13px}
.summary div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.summary span{display:block;color:var(--dimmer);font-size:12.5px;text-transform:uppercase;letter-spacing:.6px}
.summary b{font:17px var(--mono)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

/* ═══════════════ command palette ═══════════════ */
.palette{position:fixed;inset:0;z-index:70;display:grid;place-items:start center;padding-top:12vh}
.palette[hidden]{display:none}
.pal-scrim{position:absolute;inset:0;background:rgba(10,14,20,.45);backdrop-filter:blur(4px)}
.pal-box{position:relative;width:min(640px,92vw);background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.pal-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:15px 18px;font-size:18px}
.pal-input:focus{outline:none}
.pal-list{max-height:52vh;overflow:auto;padding:6px}
.pal-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer}
.pal-row.on{background:var(--accent);color:var(--accent-ink)}
.pal-row .ic{width:20px;text-align:center;opacity:.8}
.pal-row .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-row .grp{font-size:12.5px;opacity:.6;text-transform:uppercase;letter-spacing:.5px}
.pal-foot{padding:8px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--dimmer);display:flex;gap:12px}

/* ═══════════════ toast ═══════════════ */
.toast{position:fixed;bottom:96px;left:50%;transform:translate(-50%,16px);background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 18px;opacity:0;pointer-events:none;
  transition:.22s;z-index:90;max-width:70vw;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:var(--bad);color:var(--bad)}
.toast.ok{border-color:var(--good)}

/* ═══════════════ signature ═══════════════ */
.sigpad{width:100%;height:150px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:crosshair;touch-action:none}
.sig-preview{font-family:var(--script);font-size:34px;color:#12203a;padding:6px 4px;min-height:52px}
.sig-tabs{display:flex;gap:6px;margin-bottom:10px}

/* ═══════════════ print ═══════════════ */
@media print{
  /* .paperbar was missing from this list, so the Builder / Countersign /
   * Download Word / Print buttons printed onto the customer's proposal. It is
   * position:fixed, which in print means it lands on the first page and takes
   * flow space with it - which is also what was pushing the totals card onto a
   * second page on a job short enough to fit on one. */
  .window,.menubar,.dock,.toast,.palette,.modal-root,#welcome,.paperbar{display:none!important}
  body{overflow:visible;background:#fff}
  .paper{position:static!important;overflow:visible!important;padding:0!important;
    background:#fff!important;display:block!important}
  /* On screen the sheet is a card lying on a desk. On paper it IS the page:
   * the rounded corners, the border and the drop shadow are all describing an
   * edge the paper already has, and the shadow is ink spent on nothing. */
  .sheet{width:auto!important;max-width:none!important;margin:0!important;
    border:0!important;border-radius:0!important;box-shadow:none!important}
}

.cost-warn{margin-top:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;
  background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  color:var(--warn)}

/* ═══════════════ recommended upgrades ═══════════════ */
.recs{border-bottom:1px solid var(--line);padding:12px 14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--good) 7%,transparent),transparent)}
.recs-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px;
  font-size:14px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--dim)}
.recs-head b{display:inline-block;background:var(--good);color:#04220b;border-radius:999px;
  padding:1px 7px;font-size:13px;margin-left:4px}
.rec{display:flex;gap:9px;align-items:flex-start;padding:9px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel2);margin-bottom:6px}
.rec .ic{font-size:17px;line-height:1.3}
.rec .tx{flex:1;min-width:0}
.rec .tx b{display:block;font-size:14px;font-weight:650;line-height:1.3}
.rec .tx small{display:block;color:var(--dimmer);font-size:13px;line-height:1.45;margin-top:3px}
.rec .tx .gain{color:var(--good);font-family:var(--mono);font-size:13px}
.rec .add{flex:none;align-self:center;border:1px solid var(--good);color:var(--good);background:transparent;
  border-radius:var(--r-sm);padding:5px 10px;font-size:14px;font-weight:650;cursor:pointer}
.rec .add:hover{background:var(--good);color:#04220b}

/* ═══════════════ tier builder ═══════════════ */
.tiergrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tiercard{border:1.5px solid var(--line);border-radius:var(--r);padding:11px;background:var(--bg);
  display:flex;flex-direction:column;gap:6px}
.tiercard.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.tiercard h4{margin:0;font-size:16px}
.tiercard .blurb{color:var(--dim);font-size:13px;line-height:1.5;min-height:48px}
.tiercard .price{font:700 24px var(--mono);color:var(--accent)}
.tiercard .sub{font-size:13px;color:var(--dimmer);font-family:var(--mono)}
.tiercard .gp{font-size:13px;color:var(--good);font-family:var(--mono)}
.tiercard .adds{font-size:13px;color:var(--dim);line-height:1.6;margin-top:4px}
.tiercard .btn{margin-top:auto}
.uplift{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);margin-top:6px}
.uplift input{width:56px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;
  padding:3px 5px;font:14px var(--mono);text-align:right}

/* ═══════════════ right-click row menu ═══════════════ */
.rowmenu{position:fixed;z-index:80;min-width:236px;padding:5px;border-radius:10px;
  background:color-mix(in srgb,var(--panel2) 96%,transparent);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--line);box-shadow:var(--shadow);font-size:14px}
.rm{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.rm:hover{background:var(--accent);color:var(--accent-ink)}
.rm-ic{width:20px;text-align:center;font-size:13px;opacity:.85}
.rm-sep{height:1px;margin:5px 8px;background:var(--line)}

/* ═══════════════ cost increase ═══════════════ */
.wasnow{font:16px var(--mono);color:var(--dim);padding:5px 0}
.ci-do-nothing{padding:11px 13px;border-radius:var(--r-sm);font-size:14px;line-height:1.5;
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--ink)}
.ci-do-nothing.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);
  border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.ci-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ci-opt{display:grid;grid-template-columns:20px 1fr;gap:4px 8px;align-items:start;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--bg)}
.ci-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.ci-opt input{grid-row:1/4;margin-top:3px}
.ci-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ci-price{font:18px var(--mono);color:var(--accent);font-weight:700}
.ci-custom{width:120px;font-size:16px}
.ci-sub{font-size:13px;color:var(--dim);line-height:1.5}
.ci-nums{font:13px var(--mono);color:var(--dimmer)}

/* ═══════════════ drift table ═══════════════ */
table.drift{width:100%;border-collapse:collapse;font-size:14px}
table.drift th{text-align:left;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--dimmer);
  padding:7px 9px;border-bottom:1px solid var(--line)}
table.drift td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top}
table.drift td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
table.drift td small{color:var(--dimmer);font-size:12.5px}
table.drift tr.high td{background:color-mix(in srgb,var(--bad) 9%,transparent)}
table.drift tr.medium td{background:color-mix(in srgb,var(--warn) 7%,transparent)}

/* ═══════════════ emailer ═══════════════ */
.em-banner{padding:10px 13px;border-radius:var(--r-sm);font-size:14px;line-height:1.6;margin-bottom:10px;
  border:1px solid var(--line);background:var(--bg)}
.em-banner.sample{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.em-banner.warn{border-color:color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.em-banner.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad)}
.em-banner.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}

.em-counts{display:flex;align-items:center;gap:14px;font-size:14px;padding:9px 12px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.em-counts .ok{color:var(--good);font-weight:650}
.em-counts .warn{color:var(--warn);font-weight:650}
.em-counts .bad{color:var(--bad);font-weight:650}
.em-counts b{font-family:var(--mono);font-size:16px}

.em-list{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow:auto;padding-right:4px}
.em-item{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg)}
.em-item.ready{border-left:3px solid var(--good)}
.em-item.review{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 6%,var(--bg))}
.em-item.blocked{border-left:3px solid var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--bg))}
.em-tick{display:flex;align-items:flex-start;padding-top:2px}
.em-tick input{width:17px;height:17px}
.em-head{display:flex;align-items:center;gap:9px;font-size:15px}
.em-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-status{font-size:12px;font-weight:800;letter-spacing:.8px;padding:2px 7px;border-radius:5px}
.em-status.ok{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.em-status.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.em-status.bad{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.em-amt{font:15px var(--mono);font-weight:650}
.em-meta{font-size:13px;color:var(--dimmer);margin-top:3px}
.em-why{font-size:13px;line-height:1.55;margin-top:5px}
.em-why.bad{color:var(--bad)}
.em-why.warn{color:var(--warn)}
.em-why.fix{color:var(--accent)}
.em-why.quiet{color:var(--dimmer)}

.em-gate{margin-top:12px;padding:11px 14px;border-radius:var(--r-sm);font-size:14px;font-weight:600;text-align:center}
.em-gate.go{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good);
  border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.em-gate.stop{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.em-gate.part{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);font-weight:600}
.em-held{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:13px;
  font-weight:400;text-align:left;color:var(--dim);line-height:1.5}
.em-held b{display:block;color:var(--ink);margin-bottom:3px;font-size:13px;letter-spacing:.4px;text-transform:uppercase}
.em-held-note{margin-top:6px;color:var(--dimmer);font-style:italic}

/* ═══════════════ invoice from a call ═══════════════ */
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:11px;text-align:center;cursor:pointer;
  background:var(--bg);transition:.15s}
.drop:hover,.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.drop b{display:block;font-size:16px}
.drop small{display:block;color:var(--dimmer);font-size:13px;margin-top:5px}
.mb-icon .count{position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:12px;font-weight:800;line-height:15px;text-align:center}

.ap-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}
.ap-top div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.ap-top span{display:block;color:var(--dimmer);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.ap-top b{font-size:15.5px}
.ap-guess{font-style:normal;font-size:12px;color:var(--warn);font-weight:700}

.conf{font-size:12px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:5px;text-transform:uppercase}
.conf.high{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.conf.medium{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.conf.low,.conf.none{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}

.ap-warn{padding:10px 13px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;margin-bottom:12px;
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--ink)}

.ap-lines{display:flex;flex-direction:column;gap:8px;max-height:42vh;overflow:auto;padding-right:4px}
.ap-line{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:var(--bg)}
.ap-line.high{border-left:3px solid var(--good)}
.ap-line.medium{border-left:3px solid var(--warn)}
.ap-line.low{border-left:3px solid var(--bad)}
.ap-l-top{display:flex;gap:7px;align-items:center}
.ap-l-top .f{flex:1}
.ap-ext{font:15px var(--mono);font-weight:700;min-width:86px;text-align:right}
.ap-said{font-size:13px;color:var(--dim);margin-top:7px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ap-said i{color:var(--dimmer)}
.ap-quote{font-size:13px;color:var(--dimmer);font-style:italic;margin-top:5px;line-height:1.5;
  padding-left:9px;border-left:2px solid var(--line)}

.ap-unmatched{margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;
  background:color-mix(in srgb,var(--bad) 8%,transparent);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.ap-unmatched b{display:block;margin-bottom:4px;color:var(--ink)}

.ap-tot{margin-top:14px;padding-top:11px;border-top:1px solid var(--line)}
.kvline{display:flex;justify-content:space-between;padding:4px 0;font-size:15px;color:var(--dim)}
.kvline b{font-family:var(--mono);color:var(--ink)}
.kvline.big{font-size:18px;font-weight:700;color:var(--ink);border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
.kvline.big b{color:var(--accent);font-size:18px}

/* ═══════════════ key reminder ═══════════════ */
.key-remind{display:flex;align-items:center;gap:12px;padding:9px 16px;font-size:14px;
  background:color-mix(in srgb,var(--warn) 14%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--ink)}
.key-remind[hidden]{display:none}
.key-remind .tbtn{margin-left:auto;flex:none}

/* ═══════════════ admin ═══════════════ */
.ad-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ad-tab{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 14px;
  cursor:pointer;font-size:14px;color:var(--dim)}
.ad-tab.on{background:var(--accent);border-color:var(--accent2);color:var(--accent-ink);font-weight:600}
.ad-remind{padding:10px 13px;border-radius:var(--r-sm);font-size:14px;margin-bottom:12px;
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}

.ad-keys{display:flex;flex-direction:column;gap:9px;max-height:52vh;overflow:auto;padding-right:4px}
.ad-key{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;background:var(--bg)}
.ad-key.set{border-left:3px solid var(--good)}
.ad-key.later{opacity:.72}
.ad-k-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ad-k-top b{font-size:15.5px}
.ad-k-state{font:13px var(--mono);color:var(--dim)}
.ad-key.set .ad-k-state{color:var(--good)}
.ad-k-unlocks{font-size:13px;color:var(--dim);margin-top:4px;line-height:1.5}
.ad-k-where{font-size:13px;color:var(--dimmer);margin-top:4px}
.ad-k-row{display:flex;gap:7px;margin-top:8px}

.ad-user{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg)}
.ad-u-main{flex:1;min-width:0}
.ad-u-main b{display:block;font-size:15.5px}
.ad-u-main small{color:var(--dimmer);font-size:13px}
.ad-u-state{text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.ad-u-state small{color:var(--dimmer);font-size:12.5px}
.ad-newuser{display:flex;gap:7px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ── access editor: who can reach what tool ── */
.ax-list{display:flex;flex-direction:column;gap:10px}
.ax-user{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);padding:10px 12px}
.ax-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ax-head > span:first-child{flex:1;min-width:150px}
.ax-head b{font-size:15.5px}
.ax-head small{color:var(--dimmer);font-size:13px;margin-left:4px}
.ax-tier{width:auto;min-width:150px;flex:0 0 auto}
.ax-caps{display:flex;flex-wrap:wrap;gap:6px}
.ax-cap{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line);
  border-radius:999px;font-size:12.5px;color:var(--dim);cursor:pointer;user-select:none}
.ax-cap input{margin:0}
.ax-cap.on{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ax-cap.locked{opacity:.6;cursor:default}
.ad-pinbox{margin-top:12px;padding:13px;border-radius:var(--r-sm);text-align:center;
  background:color-mix(in srgb,var(--good) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.ad-pinbox .pin{font:700 28px var(--mono);letter-spacing:5px;color:var(--good)}
.ad-pinbox div{font-size:13px;color:var(--dim);margin-top:6px}

/* ═══════════════ proportional pricer ═══════════════ */
.px{display:grid;grid-template-columns:1fr 40px 1fr;gap:12px;align-items:stretch}
.px-side{border:1px solid var(--line);border-radius:var(--r);padding:11px;background:var(--bg)}
.px-side.now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.px-side h4{margin:0 0 10px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--dimmer)}
.px-side label{display:block;font-size:13px;color:var(--dim);margin:9px 0 3px}
.px-arrow{display:grid;place-items:center;font-size:24px;color:var(--dimmer)}
.px-price{font:800 32px var(--mono);color:var(--accent);letter-spacing:-1px;padding:3px 0}
.px-out{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.px-out div{display:flex;justify-content:space-between;font-size:14px;color:var(--dim)}
.px-out b{font-family:var(--mono);color:var(--ink)}
.px-basis{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.px-opt{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;font-size:14px;background:var(--bg)}
.px-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.px-opt small{display:block;color:var(--dimmer);font-size:13px;margin-top:2px;line-height:1.5}
.px-nothing{margin-top:12px;padding:10px 13px;border-radius:var(--r-sm);font-size:14px;line-height:1.6;
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.px-nothing.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);
  border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.mi-ok{color:var(--good)}
.mi-down{color:var(--warn)}

/* Three fields on the line, the rest a tap away. Seven never fit once the
   type was big enough to read. */
/* Flex, not grid — the tool cluster has six buttons and a rigid track pushes
   them past the edge at any narrow width. */
.ln .r2{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ln .r2 .fw{flex:1 1 78px;min-width:70px}
.ln .r2 .tools{flex:0 0 auto;margin-left:auto}
.ln .r3{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:6px;margin-top:8px;
  padding-top:9px;border-top:1px dashed var(--line)}
.tgl.more{font-size:15px;line-height:1;padding:2px 8px}
.ln .tools{margin-left:auto}

/* ══════════════════════════════════════════════════════════════════
   Themes.

   A theme is nothing but a block of tokens. Every one below redefines
   the same seventeen custom properties the two original themes use, so
   nothing else in the stylesheet has to know a theme exists. Add a block
   here and an entry to THEMES in app.js and you have a new theme.

   Two of these are not decoration:
     Paper      — for the iPad, held in front of the person the work is
                  for. No shadows, no gradients, ink on stock.
     Night Van  — amber on black. Low blue light keeps night vision, which
                  matters when the next thing you do is walk a dark site.
   ══════════════════════════════════════════════════════════════════ */

/* Select Blue — the palette the proposals actually go out in */
body[data-theme="select"]{
  --bg:#eef2f9; --panel:#ffffffee; --panel2:#ffffff; --line:#ccd8ea; --raise:#ffffff;
  --ink:#16233a; --dim:#5a6b85; --dimmer:#8d9bb0;
  --accent:#2b5cb8; --accent-ink:#ffffff; --accent2:#1e4795;
  --good:#1f8a4c; --warn:#b57500; --bad:#c8362f;
  --shadow:0 18px 45px rgba(24,45,85,.16),0 2px 6px rgba(24,45,85,.09);
  --bevel:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,40,80,.06);
  --grad:linear-gradient(180deg,#ffffff,#eff3fa);
}
body[data-theme="select"][data-mode="dark"]{
  --bg:#111a2b; --panel:#18243aee; --panel2:#1e2c46; --line:#2c3f60; --raise:#233350;
  --ink:#e8eef8; --dim:#9fb0c9; --dimmer:#6f819c;
  --accent:#5b8ff0; --accent-ink:#08101f; --accent2:#7ba6f5;
  --good:#3ecf6d; --warn:#e8b83c; --bad:#f0675f;
  --shadow:0 18px 45px rgba(0,0,0,.5);
  --bevel:inset 0 1px 0 rgba(255,255,255,.06);
  --grad:linear-gradient(180deg,#233350,#1a2740);
}

/* Paper — ink on stock. Deliberately flat: no shadow, no gradient, no gloss. */
body[data-theme="paper"]{
  --bg:#f4f2ec; --panel:#fffefb; --panel2:#ffffff; --line:#d8d3c6; --raise:#ffffff;
  --ink:#14120e; --dim:#57534a; --dimmer:#8b8579;
  --accent:#2b5cb8; --accent-ink:#ffffff; --accent2:#1e4795;
  --good:#1d7a44; --warn:#8a6100; --bad:#a8302a;
  --shadow:0 1px 0 rgba(0,0,0,.07);
  --bevel:none; --grad:var(--raise);
}
body[data-theme="paper"] .window{box-shadow:0 2px 10px rgba(0,0,0,.08)}

/* Night Van — amber on black, so the screen does not cost you your eyes */
body[data-theme="night"]{
  --bg:#08090b; --panel:#101216; --panel2:#161920; --line:#252a33; --raise:#1b1f27;
  --ink:#f2d8a8; --dim:#b09468; --dimmer:#7a6748;
  --accent:#ffab2e; --accent-ink:#1a1002; --accent2:#ffc266;
  --good:#8fd17a; --warn:#ffab2e; --bad:#ff6b5e;
  --shadow:0 10px 30px rgba(0,0,0,.75);
  --bevel:none; --grad:var(--raise);
}

/* High Contrast — for handing the iPad to someone who is not you */
body[data-theme="contrast"]{
  --bg:#ffffff; --panel:#ffffff; --panel2:#ffffff; --line:#000000; --raise:#ffffff;
  --ink:#000000; --dim:#1f1f1f; --dimmer:#3d3d3d;
  --accent:#0033cc; --accent-ink:#ffffff; --accent2:#001f7a;
  --good:#006622; --warn:#7a4d00; --bad:#b00000;
  --shadow:none; --bevel:none; --grad:var(--raise);
  font-size:16px;
}
body[data-theme="contrast"][data-mode="dark"]{
  --bg:#000000; --panel:#000000; --panel2:#0a0a0a; --line:#ffffff; --raise:#000000;
  --ink:#ffffff; --dim:#e6e6e6; --dimmer:#c4c4c4;
  --accent:#ffd400; --accent-ink:#000000; --accent2:#ffe866;
  --good:#4ee36a; --warn:#ffd400; --bad:#ff6b6b;
}
body[data-theme="contrast"] .panel,
body[data-theme="contrast"] .window,
body[data-theme="contrast"] .modal{border:2px solid var(--line)}
body[data-theme="contrast"] :is(button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent); outline-offset:2px}

/* The picker swatches paint themselves from the table in app.js. */
.tp-art.tp-swatch{display:flex;flex-direction:column;justify-content:center;gap:4px}
.tp-art.tp-swatch i{margin:0}
.tp small{display:block;opacity:.75}

/* ── settling what a count found ── */
/* .row is space-between elsewhere, which shoves a radio away from the words it
   belongs to. A pick reads left to right: control, then what it will do. */
.row.pick{ justify-content:flex-start; gap:12px; cursor:pointer; align-items:flex-start; padding:11px 13px }
.row.pick input{ margin:3px 0 0; flex:none; width:18px; height:18px; accent-color:var(--accent) }
.row.pick span{ flex:1; min-width:0 }
.row.pick small{ color:var(--dim) }
.row.pick:hover{ background:var(--panel2) }
.warn-note{ border:1px solid var(--warn); border-radius:var(--r-sm); padding:9px 12px;
  margin:0 0 12px; color:var(--ink); font-size:14px }
.tabs{ display:flex; gap:8px; margin-bottom:12px }
.tab{ padding:7px 14px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--grad); color:var(--dim); font-weight:600; cursor:pointer }
.tab.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
textarea.wide{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel2); color:var(--ink); font:inherit; resize:vertical }

/* ── the labour rate card ── */
.ratecard{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px }
.rc{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel2) }
.rc.adv{ border-left:3px solid var(--accent) }
.rc span{ flex:1; min-width:0 }
.rc b{ display:block; font-size:14px; font-weight:650 }
.rc small{ display:block; color:var(--dim); font-size:12.5px; line-height:1.25 }
.rc input{ width:82px; flex:none; text-align:right }

/* ── the starting points, shown whenever a document is empty ── */
#emptyState.empty{ text-align:left; padding:26px 22px; color:var(--ink) }
.start-h{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-bottom:12px }
.starts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:11px }
/* The lines column gets narrow when both side panels are open. One column
   beats four crushed ones. */
@media (max-width:1180px){ .starts{ grid-template-columns:1fr } }
.start-note{ border:1px solid var(--warn); border-radius:var(--r-sm); padding:10px 13px;
  margin:0 0 16px; font-size:14px; line-height:1.45; color:var(--ink) }
.start{ display:block; text-align:left; padding:15px 16px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--grad); box-shadow:var(--bevel); cursor:pointer; color:var(--ink) }
.start:hover{ border-color:var(--accent) }
.start:active{ transform:scale(.99) }
.start .si{ display:block; font-size:22px; line-height:1; margin-bottom:8px }
.start b{ display:block; font-size:16px; font-weight:650 }
.start small{ display:block; color:var(--dim); font-size:13.5px; margin-top:3px; line-height:1.35 }
.start-foot{ color:var(--dim); font-size:13.5px; margin:16px 0 0 }

/* ══════════════════════════════════════════════════════════════════
   The inspector, in the order you actually read it.

   The money comes first. Project total, deposit and balance are what
   somebody asks about across a desk, so they are the biggest thing on
   the panel. Make It Work is a tool you reach for once you know the
   number — it lives below, folded away until you want it.
   ══════════════════════════════════════════════════════════════════ */

.inspector .totals-block:first-child{ padding-top:2px }
.trow.grand{ font-size:19px; padding-top:9px; margin-top:5px; border-top:1.5px solid var(--line) }
.trow.grand b{ font-size:23px; font-weight:750; letter-spacing:-.4px; color:var(--accent) }
.trow.dep{ font-size:15px }
.trow.dep b{ font-weight:650 }
.trow.strong{ font-size:15.5px }
.trow.strong b{ font-weight:700 }

/* ── Make It Work, folded ── */
/* The inspector is a column flexbox, and a <details> does not push back against
   flex-shrink the way a normal block does — without flex:none it collapses to
   its two border pixels and the whole panel vanishes. */
.mkw-wrap{ flex:none; border:1px solid var(--line); border-radius:var(--r); background:var(--panel2);
  margin:14px 0 12px; overflow:hidden }
.mkw-wrap[open]{ border-color:var(--accent) }
.mkw-toggle{ display:flex; align-items:center; gap:9px; padding:12px 13px; cursor:pointer;
  list-style:none; user-select:none }
.mkw-toggle::-webkit-details-marker{ display:none }
.mkw-toggle:hover{ background:var(--raise) }
.mkw-toggle b{ font-size:15.5px; font-weight:650; flex:none }
.mkw-toggle small{ color:var(--dim); font-size:13px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mkw-chev{ font-size:19px; line-height:1; color:var(--dim); transition:transform .15s ease; flex:none }
.mkw-wrap[open] .mkw-chev{ transform:rotate(90deg) }
.mkw-wrap .mkw{ border:0; margin:0; padding:0 13px 13px; background:transparent }
.mkw-wrap .mkw-title{ display:none }   /* the summary already says it */

/* ── the network map ── */
.net-bar{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:14px; margin-bottom:8px }
.net-when{ color:var(--dim); font-size:13px }
.net-caveat{ font-size:13px; color:var(--dim); margin:0 0 6px; line-height:1.45 }
.netsvg{ width:100%; height:auto; margin:10px 0 16px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r) }
.netsvg text{ font:11px var(--sans); fill:var(--ink) }
.net-gw rect{ fill:var(--accent); stroke:none }
.net-gwlabel{ fill:var(--accent-ink) !important; font-weight:700 }
.net-gwip{ fill:var(--accent-ink) !important; opacity:.8; font-size:10px }
.net-glabel{ font-weight:650; font-size:11.5px }
.net-gcount{ fill:var(--dim); font-size:10px }
.net-chip rect{ fill:var(--raise); stroke:var(--line); stroke-width:1 }
.net-chip.confident rect,.net-chip.certain rect{ stroke:var(--good) }
.net-chip.guess rect,.net-chip.unknown rect{ stroke-dasharray:3 2; stroke:var(--dimmer) }
.net-chip text{ font-size:10.5px }
.net-grouphead{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--dim);
  margin:12px 0 4px; text-transform:uppercase }
.net-dev small{ line-height:1.5 }
.net-note{ color:var(--warn) }
.net-oui{ width:170px; flex:none }
.net-list .row{ align-items:flex-start }

/* ══════════════════════════════════════════════════════════════════════
   METRO

   Windows Phone's design language, at business density.

   Its rules, and they are rules rather than decoration:
     · Typography IS the interface. Hierarchy comes from size and weight,
       never from a box drawn around something.
     · Authentically digital. No bevel, no gradient, no drop shadow, no
       rounded corner — a screen is not a piece of plastic.
     · Content, not chrome. Anything that is not information gets out of
       the way or gets deleted.
     · One accent, used rarely, so that when it appears it means something.

   What Metro got wrong for a tool like this was spacing — a phone can
   afford to show six things. This keeps the discipline and drops the air.
   ══════════════════════════════════════════════════════════════════════ */

body[data-theme="metro"]{
  --sans:"Segoe UI","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --bg:#e8e8ea; --panel:#ffffff; --panel2:#f5f5f7; --line:#d8d8dc; --raise:#ffffff;
  --ink:#101114; --dim:#65686e; --dimmer:#9297a0;
  --accent:#1e5fcb; --accent-ink:#ffffff; --accent2:#174ba3;
  --good:#0f7b3e; --warn:#8a6100; --bad:#c42b1c;
  --shadow:none; --bevel:none; --grad:var(--panel);
  --r:0px; --r-sm:0px; --r-lg:0px;
}
body[data-theme="metro"][data-mode="dark"]{
  --bg:#0a0a0c; --panel:#131418; --panel2:#191a1f; --line:#282a30; --raise:#191a1f;
  --ink:#f3f4f6; --dim:#969aa2; --dimmer:#666a72;
  --accent:#4c9aff; --accent-ink:#06101f; --accent2:#78b3ff;
  --good:#3ecf6d; --warn:#e0b341; --bad:#ff6b5e;
  --shadow:none; --bevel:none; --grad:var(--panel);
}

/* ── nothing is a window ── */
/* The window fills everything BELOW the strip. inset:0 put it on top of the
   menubar and swallowed File/Edit/View and every badge with them. */
body[data-theme="metro"] .window,
body[data-theme="cobalt"] .window{ border-radius:0; box-shadow:none; border:0; inset:34px 0 0 0 }
body[data-theme="metro"] .lights,
body[data-theme="cobalt"] .lights{ display:none }
body[data-theme="metro"] .dock,
body[data-theme="cobalt"] .dock{ display:none }

/* ── the one strip at the top ── */
body[data-theme="metro"] .menubar,
body[data-theme="cobalt"] .menubar{
  display:flex; align-items:center; gap:2px; height:34px; padding:0 12px;
  background:var(--panel); border-bottom:1px solid var(--line); backdrop-filter:none }
body[data-theme="metro"] .mb-mark,
body[data-theme="cobalt"] .mb-mark{ color:var(--accent); font-size:15px; margin-right:10px; opacity:1 }
body[data-theme="metro"] .mb,
body[data-theme="cobalt"] .mb{
  background:none; border:0; border-radius:0; padding:0 11px; height:34px;
  font:400 13px var(--sans); color:var(--dim); letter-spacing:.01em }
body[data-theme="metro"] .mb:hover,
body[data-theme="cobalt"] .mb:hover{ background:var(--panel2); color:var(--ink) }
body[data-theme="metro"] .mb.on,
body[data-theme="cobalt"] .mb.on{ background:var(--accent); color:var(--accent-ink) }
body[data-theme="metro"] .mb-clock,
body[data-theme="cobalt"] .mb-clock{ display:none }        /* the OS already has one */

body[data-theme="metro"] .titlebar,
body[data-theme="cobalt"] .titlebar{
  background:var(--panel); border-bottom:1px solid var(--line);
  height:46px; padding:0 12px; gap:10px }
body[data-theme="metro"] .doc-name,
body[data-theme="cobalt"] .doc-name{
  font:300 21px var(--sans); letter-spacing:-.015em; color:var(--ink);
  background:none; border:0; padding:0 }
body[data-theme="metro"] .doc-name::placeholder,
body[data-theme="cobalt"] .doc-name::placeholder{ color:var(--dimmer); font-weight:300 }

/* ── controls: a rectangle and a word ── */
body[data-theme="metro"] .btn,
body[data-theme="metro"] .tbtn,
body[data-theme="metro"] .seg,
body[data-theme="cobalt"] .btn,
body[data-theme="cobalt"] .tbtn,
body[data-theme="cobalt"] .seg{
  border-radius:0; box-shadow:none; background:var(--panel2);
  border:1px solid var(--line); font-weight:400; letter-spacing:.01em }
body[data-theme="metro"] .btn:hover,
body[data-theme="metro"] .tbtn:hover,
body[data-theme="cobalt"] .btn:hover,
body[data-theme="cobalt"] .tbtn:hover{ background:var(--raise); border-color:var(--dimmer) }
body[data-theme="metro"] .btn.primary,
body[data-theme="metro"] .seg.on,
body[data-theme="cobalt"] .btn.primary,
body[data-theme="cobalt"] .seg.on{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:500 }
body[data-theme="metro"] .f,
body[data-theme="metro"] input.f,
body[data-theme="metro"] textarea.f,
body[data-theme="metro"] select,
body[data-theme="cobalt"] .f,
body[data-theme="cobalt"] input.f,
body[data-theme="cobalt"] textarea.f,
body[data-theme="cobalt"] select{
  border-radius:0; box-shadow:none; background:var(--panel); border:1px solid var(--line) }
body[data-theme="metro"] .f:focus,
body[data-theme="cobalt"] .f:focus{ border-color:var(--accent); outline:0 }

/* ── labels are small, wide and quiet; numbers are large and thin ── */
body[data-theme="metro"] .sect,
body[data-theme="metro"] .start-h,
body[data-theme="metro"] .recs-head span,
body[data-theme="metro"] .sect-h,
body[data-theme="cobalt"] .sect,
body[data-theme="cobalt"] .start-h,
body[data-theme="cobalt"] .recs-head span,
body[data-theme="cobalt"] .sect-h{
  font:600 10.5px var(--sans); text-transform:uppercase; letter-spacing:.14em; color:var(--dimmer) }
body[data-theme="metro"] .trow.grand b,
body[data-theme="cobalt"] .trow.grand b{ font-weight:200; letter-spacing:-.03em; font-size:27px }
body[data-theme="metro"] .trow.grand,
body[data-theme="cobalt"] .trow.grand{ border-top:1px solid var(--line) }
body[data-theme="metro"] .q,
body[data-theme="metro"] .w-h,
body[data-theme="cobalt"] .q,
body[data-theme="cobalt"] .w-h{ font-weight:200; letter-spacing:-.02em }

/* ── separation by a hairline, never by a card ── */
body[data-theme="metro"] .panel,
body[data-theme="cobalt"] .panel{ border-radius:0; box-shadow:none; background:var(--panel) }
body[data-theme="metro"] .tile,
body[data-theme="metro"] .start,
body[data-theme="metro"] .row,
body[data-theme="metro"] .cnt-list,
body[data-theme="metro"] .mkw-wrap,
body[data-theme="cobalt"] .tile,
body[data-theme="cobalt"] .start,
body[data-theme="cobalt"] .row,
body[data-theme="cobalt"] .cnt-list,
body[data-theme="cobalt"] .mkw-wrap{ border-radius:0; box-shadow:none }
body[data-theme="metro"] .badge,
body[data-theme="metro"] .tag,
body[data-theme="metro"] .chip,
body[data-theme="metro"] .savings-chip,
body[data-theme="metro"] .count,
body[data-theme="metro"] .conf,
body[data-theme="cobalt"] .badge,
body[data-theme="cobalt"] .tag,
body[data-theme="cobalt"] .chip,
body[data-theme="cobalt"] .savings-chip,
body[data-theme="cobalt"] .count,
body[data-theme="cobalt"] .conf{ border-radius:0 }

/* ── Metro: density ───────────────────────────────────────────────────
   165px of chrome stood between opening the app and seeing anything, and
   a catalog row spent 64px showing three lines where one would do. Metro
   is the default, so this is what "the interface" means now; the other
   themes keep their own proportions. */

body[data-theme="metro"] .titlebar,
body[data-theme="cobalt"] .titlebar{ min-height:42px }
body[data-theme="metro"] .toolbar,
body[data-theme="cobalt"] .toolbar{ padding:4px 12px; min-height:0 }
body[data-theme="metro"] .tbtn,
body[data-theme="metro"] .seg,
body[data-theme="cobalt"] .tbtn,
body[data-theme="cobalt"] .seg{ padding:5px 11px; font-size:13px }
body[data-theme="metro"] .btn,
body[data-theme="cobalt"] .btn{ padding:6px 13px; font-size:13px }

/* The category had a line of its own above every product name, which cost
   64px a row. Inline it just truncated to "RECOR…" and helped nobody — the
   chips above the list already filter by category, and the product name is
   what a person scans for. So the row is the product and the price. */
body[data-theme="metro"] .cat-item,
body[data-theme="cobalt"] .cat-item{ padding:4px 8px; gap:8px; align-items:center }
body[data-theme="metro"] .cat-item .nm,
body[data-theme="cobalt"] .cat-item .nm{ line-height:1.3; font-size:13.5px }
body[data-theme="metro"] .cat-item .nm i,
body[data-theme="cobalt"] .cat-item .nm i{ display:none }
body[data-theme="metro"] .cat-item .px,
body[data-theme="cobalt"] .cat-item .px{ font-size:13px }
body[data-theme="metro"] .cat-list,
body[data-theme="cobalt"] .cat-list{ padding:2px }
body[data-theme="metro"] .chip,
body[data-theme="cobalt"] .chip{ padding:3px 9px; font-size:12px }

/* The key warning is information, not an alarm. */
body[data-theme="metro"] .keys-note,
body[data-theme="metro"] .warnbar,
body[data-theme="cobalt"] .keys-note,
body[data-theme="cobalt"] .warnbar{ padding:5px 12px; font-size:12.5px }

body[data-theme="metro"] .start,
body[data-theme="cobalt"] .start{ padding:11px 13px }
body[data-theme="metro"] .start .si,
body[data-theme="cobalt"] .start .si{ font-size:17px; margin-bottom:5px }
body[data-theme="metro"] .start b,
body[data-theme="cobalt"] .start b{ font-size:14.5px; font-weight:500 }
body[data-theme="metro"] .start small,
body[data-theme="cobalt"] .start small{ font-size:12.5px; margin-top:2px }
body[data-theme="metro"] #emptyState.empty,
body[data-theme="cobalt"] #emptyState.empty{ padding:18px 16px }
body[data-theme="metro"] .starts,
body[data-theme="cobalt"] .starts{ gap:8px }

body[data-theme="metro"] .ln,
body[data-theme="cobalt"] .ln{ padding:6px 8px 6px 3px }
body[data-theme="metro"] .trow,
body[data-theme="cobalt"] .trow{ padding:2px 0 }
body[data-theme="metro"] .totals-block,
body[data-theme="cobalt"] .totals-block{ padding:9px 12px }

/* The row was three stacked things: a 34px thumb, the name, and a right
   column with the price above "★ edit". On one line it is half the height
   and reads faster — and "edit" is a thing you do occasionally, so it waits
   until the pointer is actually on the row. */
body[data-theme="metro"] .cat-item,
body[data-theme="cobalt"] .cat-item{ align-items:center }
body[data-theme="metro"] .cat-item .thumb,
body[data-theme="cobalt"] .cat-item .thumb{ width:24px; height:24px; font-size:11px; border-radius:0 }
body[data-theme="metro"] .cat-item > div:last-child,
body[data-theme="cobalt"] .cat-item > div:last-child{
  display:flex; align-items:center; justify-content:flex-end; gap:9px }
body[data-theme="metro"] .cat-item > div:last-child > div,
body[data-theme="cobalt"] .cat-item > div:last-child > div{ display:flex; align-items:center; gap:7px }
body[data-theme="metro"] .cat-item .pr,
body[data-theme="cobalt"] .cat-item .pr{ font-size:13px }
body[data-theme="metro"] .cat-item .edit,
body[data-theme="cobalt"] .cat-item .edit{ opacity:0; font-size:11px }
body[data-theme="metro"] .cat-item:hover .edit,
body[data-theme="cobalt"] .cat-item:hover .edit{ opacity:1 }
body[data-theme="metro"] .cat-item .star,
body[data-theme="cobalt"] .cat-item .star{ font-size:12px }

/* ── Metro: the door ──────────────────────────────────────────────────
   The welcome screen was the most macOS thing in the app — a frosted glass
   card with a 22px radius, a drop shadow, circular avatars and a
   three-colour gradient behind it. Metro's answer is a flat ground, one
   very large thin word, and square tiles. Nothing floats. */

body[data-theme="metro"] .welcome-bg,
body[data-theme="cobalt"] .welcome-bg{
  background:#12151c; filter:none }
body[data-theme="metro"][data-mode="light"] .welcome-bg,
body[data-theme="cobalt"][data-mode="light"] .welcome-bg{ background:#1b1f27 }
body[data-theme="metro"] .welcome,
body[data-theme="cobalt"] .welcome{ place-items:center }
body[data-theme="metro"] .welcome-card,
body[data-theme="cobalt"] .welcome-card{
  width:min(560px,94vw); padding:0 30px; text-align:left;
  background:none; backdrop-filter:none; border:0; border-radius:0; box-shadow:none }

body[data-theme="metro"] .w-h,
body[data-theme="cobalt"] .w-h{
  font:200 42px/1.05 var(--sans); letter-spacing:-.03em; margin:0 0 4px; color:#fff }
body[data-theme="metro"] .w-sub,
body[data-theme="cobalt"] .w-sub{
  font:400 14px var(--sans); color:rgba(255,255,255,.55); margin:0 0 26px }

/* People are square tiles, the way a Metro start screen is. */
body[data-theme="metro"] .who-grid,
body[data-theme="cobalt"] .who-grid{ grid-template-columns:repeat(2,1fr); gap:2px; margin:0 0 2px }
body[data-theme="metro"] .who,
body[data-theme="cobalt"] .who{
  background:rgba(255,255,255,.07); border:0; border-radius:0;
  padding:16px 15px; text-align:left; transition:background .12s }
body[data-theme="metro"] .who:hover,
body[data-theme="cobalt"] .who:hover{ background:var(--accent) }
body[data-theme="metro"] .who b,
body[data-theme="cobalt"] .who b{ font:400 17px var(--sans); margin:0 }
body[data-theme="metro"] .who small,
body[data-theme="cobalt"] .who small{ font-size:12px; color:rgba(255,255,255,.5); margin-top:1px }
body[data-theme="metro"] .who-av,
body[data-theme="cobalt"] .who-av{
  width:34px; height:34px; border-radius:0; margin:0 0 9px; background:rgba(255,255,255,.14);
  box-shadow:none; font:400 14px var(--sans); letter-spacing:0 }
body[data-theme="metro"] .who:hover .who-av,
body[data-theme="cobalt"] .who:hover .who-av{ background:rgba(255,255,255,.22) }
body[data-theme="metro"] .who-tag,
body[data-theme="cobalt"] .who-tag{
  border-radius:0; top:0; right:0; padding:3px 7px; font-weight:600;
  letter-spacing:.12em; background:rgba(255,255,255,.14); color:rgba(255,255,255,.75) }

body[data-theme="metro"] .avatar,
body[data-theme="cobalt"] .avatar{
  width:56px; height:56px; border-radius:0; margin:0 0 14px;
  background:var(--accent); box-shadow:none; font:300 24px var(--sans) }
body[data-theme="metro"] .w-name,
body[data-theme="cobalt"] .w-name{
  width:100%; text-align:left; border-radius:0; padding:11px 13px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  font:300 17px var(--sans) }
body[data-theme="metro"] .w-name:focus,
body[data-theme="cobalt"] .w-name:focus{ border-color:var(--accent); background:rgba(255,255,255,.14) }
body[data-theme="metro"] .welcome .btn.primary,
body[data-theme="cobalt"] .welcome .btn.primary{
  border-radius:0; background:var(--accent); border:0; font:500 15px var(--sans);
  padding:12px; letter-spacing:.01em }
body[data-theme="metro"] .w-link,
body[data-theme="cobalt"] .w-link{ color:rgba(255,255,255,.55); text-decoration:none; font-size:13px }
body[data-theme="metro"] .w-link:hover,
body[data-theme="cobalt"] .w-link:hover{ color:#fff }
body[data-theme="metro"] .w-foot,
body[data-theme="cobalt"] .w-foot{ color:rgba(255,255,255,.35); font-size:11.5px; margin-top:20px }

/* The theme picker on the door, squared off. */
body[data-theme="metro"] .theme-picker,
body[data-theme="cobalt"] .theme-picker{ gap:2px; margin-top:22px }
body[data-theme="metro"] .tp,
body[data-theme="cobalt"] .tp{ border-radius:0; border:0; background:rgba(255,255,255,.07); padding:10px 11px }
body[data-theme="metro"] .tp.on,
body[data-theme="cobalt"] .tp.on{ background:var(--accent); box-shadow:none }
body[data-theme="metro"] .tp-art,
body[data-theme="cobalt"] .tp-art{ border-radius:0 }
body[data-theme="metro"] .tp b,
body[data-theme="cobalt"] .tp b{ font-weight:500; font-size:13px }

/* The theme picker is a preference, not the point of the screen — it was
   taking more room than the people. Smaller, and labelled as an aside. */
body[data-theme="metro"] .theme-picker,
body[data-theme="cobalt"] .theme-picker{
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:2px; margin-top:26px }
body[data-theme="metro"] .tp,
body[data-theme="cobalt"] .tp{ padding:7px 8px }
body[data-theme="metro"] .tp-art,
body[data-theme="cobalt"] .tp-art{ height:22px; padding:4px }
body[data-theme="metro"] .tp-art i,
body[data-theme="cobalt"] .tp-art i{ height:3px; margin-bottom:3px }
body[data-theme="metro"] .tp b,
body[data-theme="cobalt"] .tp b{ font-size:11.5px; font-weight:500 }
body[data-theme="metro"] .tp small,
body[data-theme="cobalt"] .tp small{ display:none }
body[data-theme="metro"] .tp-label,
body[data-theme="cobalt"] .tp-label{
  font:600 10px var(--sans); text-transform:uppercase; letter-spacing:.16em;
  color:rgba(255,255,255,.32); margin-top:26px }
body[data-theme="metro"] .tp-label + .theme-picker,
body[data-theme="cobalt"] .tp-label + .theme-picker{ margin-top:7px }
.tp-label{ display:none }
body[data-theme="metro"] .tp-label,
body[data-theme="cobalt"] .tp-label{ display:block }

/* ── Metro: modals ── */
/* Group headings inside a modal were eight identical inline styles, which no
   stylesheet could reach. They are .grp now, and in Metro they read as
   section labels rather than as bold sentences. */
.grp{ text-align:left; font-weight:700; color:var(--ink); margin-top:14px }
body[data-theme="metro"] .grp,
body[data-theme="cobalt"] .grp{
  font:600 10.5px var(--sans); text-transform:uppercase; letter-spacing:.14em;
  color:var(--dimmer); margin-top:18px; padding-bottom:5px;
  border-bottom:1px solid var(--line);
  /* the modal's label column is right-aligned; a section rule is not a label */
  text-align:left; grid-column:1 / -1 }
body[data-theme="metro"] .modal,
body[data-theme="cobalt"] .modal{
  border-radius:0; box-shadow:none; border:1px solid var(--line); background:var(--panel) }
body[data-theme="metro"] .modal-scrim,
body[data-theme="cobalt"] .modal-scrim{ background:rgba(8,10,14,.62); backdrop-filter:none }
body[data-theme="metro"] .modal-head,
body[data-theme="cobalt"] .modal-head{ border-bottom:1px solid var(--line) }
body[data-theme="metro"] .modal-head b,
body[data-theme="metro"] #modalTitle,
body[data-theme="cobalt"] .modal-head b,
body[data-theme="cobalt"] #modalTitle{ font:300 20px var(--sans); letter-spacing:-.01em }
body[data-theme="metro"] .modal-foot,
body[data-theme="cobalt"] .modal-foot{ border-top:1px solid var(--line) }

/* ══════════════════════════════════════════════════════════════════════
   The customer console.

   Base mode is tiles: every one is a question with a number on it, and
   tapping it filters the list to exactly those records. Metro's own idea,
   and the right one here — you can work the whole screen without reading
   a word.
   ══════════════════════════════════════════════════════════════════════ */

.con-bar{ display:flex; gap:8px; align-items:center; margin-bottom:12px }
.con-q{ flex:1; min-width:0 }
.con-stamp{ color:var(--dimmer); font-size:12px; white-space:nowrap }

.con-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(164px,1fr)); gap:2px; margin-bottom:16px }
/* A figure that does not fit is worse than a smaller one: it clips silently
   and reads as a different number. Let the big number shrink to fit instead. */
.ct-big{ font-size:clamp(21px,2.1vw,30px); white-space:nowrap; overflow:hidden; text-overflow:clip }
.con-tile{ text-align:left; padding:13px 14px; border:0; background:var(--panel2); cursor:pointer;
  color:var(--ink); border-radius:var(--r-sm); transition:background .1s }
.con-tile:hover{ background:var(--raise) }
.con-tile.on{ background:var(--accent); color:var(--accent-ink) }
.con-tile.on .ct-lab,.con-tile.on .ct-sub{ color:var(--accent-ink); opacity:.85 }
.ct-big{ display:block; font:200 30px/1 var(--sans); letter-spacing:-.03em }
.ct-lab{ display:block; font-size:13px; font-weight:600; margin-top:7px }
.ct-sub{ display:block; font-size:11.5px; color:var(--dim); margin-top:1px; line-height:1.3 }
/* Colour only where it means something is wrong. */
.con-tile.bad .ct-big{ color:var(--bad) }
.con-tile.warn .ct-big{ color:var(--warn) }
.con-tile.on .ct-big{ color:var(--accent-ink) }

.con-sect{ font:600 10.5px var(--sans); text-transform:uppercase; letter-spacing:.14em;
  color:var(--dimmer); margin:16px 0 7px }
.con-findings{ display:grid; gap:2px }
.con-find{ padding:9px 12px; background:var(--panel2); font-size:13px; line-height:1.45;
  border-left:3px solid var(--warn) }
.con-find.bad{ border-left-color:var(--bad) }
.con-clean{ padding:11px 13px; background:var(--panel2); font-size:13px; border-left:3px solid var(--good) }

.con-list{ display:grid; gap:1px; max-height:38vh; overflow:auto }
.con-row{ display:grid; grid-template-columns:1.6fr 1.5fr .9fr .9fr; gap:10px; align-items:center;
  padding:7px 10px; background:var(--panel2); font-size:13px; cursor:pointer }
.con-row:hover{ background:var(--raise) }
.cr-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cr-mail,.cr-tel,.cr-where{ color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cr-mail.missing,.cr-tel.missing{ color:var(--bad); opacity:.7; font-style:italic }

.con-scroll{ max-height:58vh; overflow:auto; border:1px solid var(--line) }
.con-table{ border-collapse:collapse; font-size:12.5px; width:max-content; min-width:100% }
.con-table th{ position:sticky; top:0; z-index:1; background:var(--panel);
  text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); cursor:pointer;
  font:600 10.5px var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--dimmer);
  white-space:nowrap }
.con-table th:hover{ color:var(--ink) }
.con-table th.on{ color:var(--accent) }
/* A column nobody expected is marked, so it is obvious it came from the data. */
.con-table th.odd{ color:var(--warn) }
.con-table td{ padding:5px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
  max-width:280px; overflow:hidden; text-overflow:ellipsis }
.con-table tbody tr:hover td{ background:var(--panel2); cursor:pointer }

.con-empty{ padding:26px 4px }
.con-empty-h{ font:200 26px var(--sans); letter-spacing:-.02em; margin-bottom:10px }
.con-dupe{ background:var(--panel2); padding:10px 12px; margin-bottom:2px }
.con-dupe-h{ font-size:12.5px; color:var(--dim); margin-bottom:5px }
.con-dupe-r{ font-size:13px; padding:2px 0 }
.con-json{ background:var(--panel2); padding:11px; font:12px var(--mono); overflow:auto;
  max-height:200px; margin:6px 0 0 }

/* ═══════════════════════ Evan's Magic Notepad ═══════════════════════
 *
 * Its own place, not a dialog. Full screen, dark whatever the theme is,
 * because the sky behind it only works dark. Frosted glass over a canvas,
 * with both rails collapsible so the typing area can take the whole screen.
 */

.pad-root{position:fixed;inset:0;z-index:80;overflow:hidden;background:#04050b;
  color:#e8edf8;font-family:var(--sans);
  --padL:214px; --padR:340px;}
.pad-root[hidden]{display:none}

/* the sky */
.pad-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.pad-root[data-bg="nebula"] .pad-sky{animation:padDrift 120s ease-in-out infinite alternate;
  transform-origin:52% 46%}
@keyframes padDrift{from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}}

/* the shine — two slow lights floating over the top of it */
.pad-shine{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen}
.pad-shine.a{background:radial-gradient(closest-side,rgba(120,190,255,.16),rgba(120,190,255,0) 70%);
  width:70%;height:70%;left:2%;top:4%;animation:padFloatA 74s ease-in-out infinite alternate}
.pad-shine.b{background:radial-gradient(closest-side,rgba(190,150,255,.13),rgba(190,150,255,0) 70%);
  width:60%;height:60%;left:44%;top:32%;animation:padFloatB 96s ease-in-out infinite alternate}
.pad-root[data-bg="off"] .pad-shine,
.pad-root[data-bg="spatial"] .pad-shine{display:none}
@keyframes padFloatA{from{transform:translate3d(0,0,0)}to{transform:translate3d(16%,10%,0)}}
@keyframes padFloatB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14%,-9%,0)}}
@media (prefers-reduced-motion:reduce){
  .layout{transition:none}
  .pad-root[data-bg="nebula"] .pad-sky,.pad-shine.a,.pad-shine.b{animation:none}}

/* the frosted panes */
.pad-glass{background:rgba(11,15,26,.52);backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  border:1px solid rgba(146,182,255,.13)}

/* the strip along the top */
.pad-bar{position:absolute;left:0;right:0;top:0;height:46px;z-index:3;
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:rgba(8,11,20,.62);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(146,182,255,.13)}
.pad-bar h2{margin:0;font-size:14px;font-weight:200;letter-spacing:.16em;text-transform:uppercase;
  color:#cfe0ff;white-space:nowrap}
.pad-bar .sp{flex:1}
.pad-bar .st{font-size:12px;color:#7f8ca8;letter-spacing:.05em;white-space:nowrap}
.pad-btn{background:rgba(255,255,255,.055);border:1px solid rgba(146,182,255,.16);color:#d6e2f8;
  font:400 13px/1 var(--sans);letter-spacing:.03em;padding:8px 13px;border-radius:0;cursor:pointer;
  white-space:nowrap;transition:background .12s,border-color .12s}
.pad-btn:hover{background:rgba(120,180,255,.16);border-color:rgba(146,182,255,.42)}
.pad-btn.on{background:rgba(90,160,255,.26);border-color:rgba(146,190,255,.55);color:#fff}
.pad-btn.go{background:#2f7cf6;border-color:#2f7cf6;color:#fff}
.pad-btn.go:hover{background:#4a90ff;border-color:#4a90ff}

/* the three columns */
.pad-shell{position:absolute;inset:46px 0 0 0;z-index:2;display:grid;gap:0;
  grid-template-columns:var(--padL) minmax(0,1fr) var(--padR);transition:grid-template-columns .18s ease}
.pad-root.shutL .pad-shell{--padL:40px}
.pad-root.shutR .pad-shell{--padR:40px}

.pad-rail{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.pad-rail.left{border-right:1px solid rgba(146,182,255,.11)}
.pad-rail.right{border-left:1px solid rgba(146,182,255,.11)}
.pad-rail>.inner{flex:1;min-height:0;overflow:auto;padding:14px 12px 20px;
  background:rgba(9,12,22,.34);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%)}
.pad-root.shutL .pad-rail.left>.inner,.pad-root.shutR .pad-rail.right>.inner{display:none}

/* the handle that shuts a rail */
.pad-tab{height:34px;flex:none;display:flex;align-items:center;gap:7px;padding:0 12px;cursor:pointer;
  background:rgba(9,12,22,.6);border:0;border-bottom:1px solid rgba(146,182,255,.11);
  color:#93a4c4;font:400 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;width:100%}
.pad-tab:hover{color:#dce7fb;background:rgba(60,110,200,.2)}
.pad-tab .cv{font-size:13px;opacity:.85;transition:transform .18s}
.pad-root.shutL .pad-rail.left .pad-tab .lb,
.pad-root.shutR .pad-rail.right .pad-tab .lb{display:none}
/* Shut, a rail is only its handle — so the handle has to be findable with a
   thumb, not a mouse pointer. It gets brighter, taller, and the chevron turns
   round to point the way it will open. */
.pad-root.shutL .pad-rail.left .pad-tab,
.pad-root.shutR .pad-rail.right .pad-tab{justify-content:center;padding:0;height:66px;
  background:rgba(88,148,238,.20);border-bottom:1px solid rgba(146,182,255,.3);color:#dfeafd}
.pad-root.shutL .pad-rail.left .pad-tab:hover,
.pad-root.shutR .pad-rail.right .pad-tab:hover{background:rgba(110,170,255,.34)}
.pad-root.shutL .pad-rail.left .pad-tab .cv,
.pad-root.shutR .pad-rail.right .pad-tab .cv{font-size:19px;opacity:1;transform:rotate(180deg)}
.pad-root.shutL .pad-rail.left,
.pad-root.shutR .pad-rail.right{background:rgba(9,12,22,.3)}

/* the pad itself */
.pad-main{position:relative;display:flex;flex-direction:column;min-width:0;padding:16px}
.pad-ta{flex:1;min-height:0;width:100%;resize:none;
  background:rgba(8,12,22,.30);backdrop-filter:blur(30px) saturate(170%);
  -webkit-backdrop-filter:blur(30px) saturate(170%);
  border:1px solid rgba(146,182,255,.14);border-radius:0;
  color:#eaf0fc;caret-color:#6fb4ff;
  font:300 17.5px/1.75 var(--sans);letter-spacing:.005em;padding:22px 26px;
  box-shadow:0 18px 60px rgba(0,0,0,.45) inset,0 0 0 0 rgba(0,0,0,0)}
.pad-ta::placeholder{color:#5d6a86;font-weight:200}
.pad-ta:focus{outline:none;border-color:rgba(120,180,255,.42);
  box-shadow:0 18px 60px rgba(0,0,0,.45) inset,0 0 40px rgba(70,140,255,.12)}
.pad-foot{flex:none;display:flex;align-items:center;gap:12px;padding:10px 2px 0;
  font-size:12px;color:#7f8ca8;letter-spacing:.04em}

/* the counts down the left */
.pad-tile{width:100%;text-align:left;display:block;padding:11px 12px;margin-bottom:6px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid rgba(146,182,255,.11);border-left:2px solid transparent;
  color:#cfdcf3;transition:background .12s,border-color .12s}
.pad-tile:hover{background:rgba(120,180,255,.13);border-color:rgba(146,182,255,.34)}
.pad-tile.on{background:rgba(90,160,255,.2);border-left-color:#5fa8ff}
.pad-tile b{display:block;font:200 27px/1 var(--sans);letter-spacing:-.01em;color:#f2f6ff}
.pad-tile span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8b9ab8}
.pad-tile.good b{color:#7ef0a8} .pad-tile.warn b{color:#ffd06b} .pad-tile.dim b{color:#8fa0bf}

.pad-head{font:400 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7d8aa6;
  margin:16px 0 9px}
.pad-head:first-child{margin-top:0}
.pad-say{font-size:12.5px;line-height:1.6;color:#98a7c2;margin:0 0 8px;padding-left:9px;
  border-left:2px solid rgba(146,182,255,.2)}
.pad-say.warn{border-left-color:#ffb02e;color:#e2cf9f}
.pad-say.good{border-left-color:#3ddb7d;color:#a6dfbc}

/* the notes it read, down the right */
.pad-note{padding:11px 12px;margin-bottom:6px;cursor:pointer;
  background:rgba(255,255,255,.032);border:1px solid rgba(146,182,255,.1);border-left:2px solid #59647e;
  transition:background .12s,border-color .12s}
.pad-note:hover{background:rgba(120,180,255,.12);border-color:rgba(146,182,255,.32)}
.pad-note.on{background:rgba(90,160,255,.18)}
.pad-note.ready{border-left-color:#3ddb7d}
.pad-note.blocked{border-left-color:#ffb02e}
.pad-note[data-state="already-billed"]{border-left-color:#6f7fa0}
.pad-note[data-state="not-billable"]{border-left-color:#6f7fa0}
.pad-note[data-state="done"]{border-left-color:#2f7cf6;opacity:.66}
.pad-note[data-state="parked"]{border-left-color:#59647e;opacity:.6}
.pad-note .t{font-size:13.5px;line-height:1.45;color:#e2eaf9;font-weight:300;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pad-note .m{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pad-chip{font:400 10.5px/1 var(--sans);letter-spacing:.06em;padding:4px 7px;
  background:rgba(146,182,255,.1);border:1px solid rgba(146,182,255,.15);color:#a9b9d6;white-space:nowrap}
.pad-chip.v{background:rgba(61,219,125,.14);border-color:rgba(61,219,125,.3);color:#8fe8b0}
.pad-chip.q{background:rgba(255,176,46,.13);border-color:rgba(255,176,46,.3);color:#f2ce8e}
.pad-chip.g{background:rgba(146,182,255,.06);color:#8492ad}

.pad-empty{padding:26px 6px;color:#7a879f;font-size:13px;line-height:1.7;font-weight:300}
.pad-empty b{display:block;color:#cbd8ef;font-weight:200;font-size:17px;letter-spacing:.01em;margin-bottom:9px}

/* on a phone the rails go away and the pad is the screen */
@media (max-width:860px){
  .pad-shell{grid-template-columns:1fr}
  .pad-rail{display:none}
  .pad-root.showR .pad-shell{grid-template-columns:1fr}
  .pad-root.showR .pad-main{display:none}
  .pad-root.showR .pad-rail.right{display:flex}
}
@media print{ .pad-root{display:none!important} }

/* ── Magic Notepad: the clean look ──────────────────────────────────────
   Repaints the pad to the same white/grey/black as the Desk. Pure CSS — the
   nebula sky, shine and "Nebula" button are hidden; no markup or logic changed,
   so parsing and saving are untouched. Rules are scoped under .pad-root so they
   win over the dark theme above regardless of source order. */
.pad-root{background:var(--bg);color:var(--ink)}
.pad-root .pad-sky,.pad-root .pad-shine,.pad-root #padBg{display:none}
.pad-root .pad-bar{background:var(--panel2);border-bottom:1px solid var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.pad-root .pad-bar h2{color:var(--ink);font-weight:600;letter-spacing:.01em;text-transform:none;font-size:16px}
.pad-root .pad-bar .st{color:var(--dim)}
.pad-root .pad-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-sm);font-weight:500}
.pad-root .pad-btn:hover{background:var(--raise);border-color:var(--dim)}
.pad-root .pad-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pad-root .pad-btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pad-root .pad-btn.go:hover{filter:brightness(1.06)}
.pad-root .pad-btn.invoice{background:var(--good);border-color:var(--good);color:#fff}
.pad-root .pad-rail.left{border-right:1px solid var(--line)}
.pad-root .pad-rail.right{border-left:1px solid var(--line)}
.pad-root .pad-rail>.inner{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
.pad-root .pad-tab{background:var(--panel2);border-bottom:1px solid var(--line);color:var(--dim)}
.pad-root .pad-tab:hover{background:var(--raise);color:var(--ink)}
.pad-root.shutL .pad-rail.left .pad-tab,.pad-root.shutR .pad-rail.right .pad-tab{
  background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
.pad-root.shutL .pad-rail.left,.pad-root.shutR .pad-rail.right{background:var(--panel)}
.pad-root .pad-main{background:var(--bg)}
.pad-root .pad-ta{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);caret-color:var(--accent);font:400 16px/1.7 var(--sans);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pad-root .pad-ta::placeholder{color:var(--dimmer);font-weight:400}
.pad-root .pad-ta:focus{outline:none;border-color:var(--accent);box-shadow:none}
.pad-root .pad-foot{color:var(--dim)}
.pad-root .pad-tile{background:var(--panel2);border:1px solid var(--line);
  border-left:2px solid transparent;color:var(--ink)}
.pad-root .pad-tile:hover{background:var(--raise);border-color:var(--dim)}
.pad-root .pad-tile.on{background:var(--raise);border-left-color:var(--accent)}
.pad-root .pad-tile b{color:var(--ink)}
.pad-root .pad-tile span{color:var(--dim)}
.pad-root .pad-tile.good b{color:var(--good)}
.pad-root .pad-tile.warn b{color:var(--warn)}
.pad-root .pad-tile.dim b{color:var(--dim)}
.pad-root .pad-head{color:var(--dim)}
.pad-root .pad-say{color:var(--dim);border-left:2px solid var(--line)}
.pad-root .pad-say.warn{color:var(--warn);border-left-color:var(--warn)}
.pad-root .pad-say.good{color:var(--good);border-left-color:var(--good)}
.pad-root .pad-note{background:var(--panel2);border:1px solid var(--line);border-left:2px solid var(--dimmer)}
.pad-root .pad-note:hover{background:var(--raise);border-color:var(--dim)}
.pad-root .pad-note.on{background:var(--raise)}
.pad-root .pad-note.ready{border-left-color:var(--good)}
.pad-root .pad-note.blocked{border-left-color:var(--warn)}
.pad-root .pad-note[data-state="already-billed"]{border-left-color:var(--dimmer)}
.pad-root .pad-note[data-state="not-billable"]{border-left-color:var(--dimmer)}
.pad-root .pad-note[data-state="done"]{border-left-color:var(--accent);opacity:.7}
.pad-root .pad-note[data-state="parked"]{border-left-color:var(--dimmer);opacity:.65}
.pad-root .pad-note .t{color:var(--ink)}
.pad-root .pad-chip{background:var(--raise);border:1px solid var(--line);color:var(--dim)}
.pad-root .pad-chip.v{border-color:var(--good);color:var(--good)}
.pad-root .pad-chip.q{border-color:var(--warn);color:var(--warn)}
.pad-root .pad-chip.g{background:var(--raise);color:var(--dim)}
.pad-root .pad-empty{color:var(--dim)}
.pad-root .pad-empty b{color:var(--ink)}

/* ── what have I not billed ── */
.ub-hero{font:200 46px/1 var(--sans);letter-spacing:-.03em}
.ub-sub{color:var(--dim);font-size:13px;margin-top:6px}
.ub-caveat{color:var(--warn);font-size:12.5px;margin-top:6px}
.ub-block{padding:14px;background:var(--panel2);border-left:3px solid var(--bad);margin-bottom:10px}
.ub-block b{font-weight:600}
.ub-row{display:grid;grid-template-columns:.7fr 1.1fr 2fr .7fr;gap:10px;align-items:center;
  padding:8px 11px;background:var(--panel2);font-size:13px;cursor:pointer}
.ub-row:hover{background:var(--raise)}
.ub-row.on{background:var(--accent);color:var(--accent-ink)}
.ub-none{color:var(--bad);opacity:.75;font-style:italic}
.ub-inv{background:var(--panel2);padding:9px 11px;margin:2px 0;font-size:13px;border-left:3px solid var(--warn)}


/* ═══════════════════════ Cobalt ═══════════════════════
 *
 * Windows Phone, in Evan's blues. Same bones as Metro — square, flat, thin,
 * one accent, typography IS the interface — with a palette built off the five
 * he handed over.
 *
 * Only #4779c4 is his exact value; the other four are read off the image, so
 * correct any that are wrong and everything else follows from them.
 *
 * The ramp, darkest to lightest:
 *   #212c45   the ground
 *   #34456b   edges and rules
 *   #42639f   the quiet middle
 *   #4779c4   THE ACCENT
 *   #8aabec   the light that lands on things
 */
body[data-theme="cobalt"]{
  --sans:"Segoe UI","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --bg:#eef2f9; --panel:#ffffff; --panel2:#f3f6fc; --line:#d5dff1; --raise:#ffffff;
  --ink:#212c45; --dim:#42639f; --dimmer:#8195bb;
  --accent:#4779c4; --accent-ink:#ffffff; --accent2:#34456b;
  --good:#127a52; --warn:#8a6100; --bad:#c42b1c;
  --shadow:none; --bevel:none; --grad:var(--panel);
  --r:0px; --r-sm:0px; --r-lg:0px;
}
body[data-theme="cobalt"][data-mode="dark"]{
  --bg:#141c30; --panel:#212c45; --panel2:#28344f; --line:#34456b; --raise:#2c3a59;
  --ink:#eef3fd; --dim:#a9bee4; --dimmer:#7186ae;
  --accent:#4779c4; --accent-ink:#ffffff; --accent2:#8aabec;
  --good:#4ec98a; --warn:#f0b849; --bad:#f4685c;
  --shadow:none; --bevel:none; --grad:var(--panel);
}

/* ── the light that lands on things ── */
/* Metro leaves a big number the same colour as the words under it. In this
   palette the top swatch has somewhere to go, so the figure that matters most
   on a screen carries it and everything else stays quiet. */
body[data-theme="cobalt"] .ub-hero{ color:var(--accent) }
body[data-theme="cobalt"][data-mode="dark"] .ub-hero{ color:var(--accent2) }
body[data-theme="cobalt"] .ct-big{ color:var(--ink) }
body[data-theme="cobalt"] .con-tile{ border-left:2px solid transparent }
body[data-theme="cobalt"] .con-tile:hover{ border-left-color:var(--accent) }
body[data-theme="cobalt"] .con-tile.on{ border-left-color:var(--accent2) }
body[data-theme="cobalt"] .con-tile.warn .ct-big{ color:var(--warn) }
body[data-theme="cobalt"] .con-tile.bad .ct-big{ color:var(--bad) }

/* A section label is a hairline and a word, not a heading. */
body[data-theme="cobalt"] .con-sect{ color:var(--dim); letter-spacing:.18em; font-weight:400 }
body[data-theme="cobalt"] .con-find{ border-left:2px solid var(--line) }
body[data-theme="cobalt"] .con-find.warn{ border-left-color:var(--warn) }
body[data-theme="cobalt"] .con-find.bad{ border-left-color:var(--bad) }
body[data-theme="cobalt"] .con-find.good{ border-left-color:var(--good) }

/* Selection in the accent, because in a blue room a grey highlight looks broken. */
body[data-theme="cobalt"] ::selection{ background:var(--accent); color:var(--accent-ink) }
body[data-theme="cobalt"] .ub-row:hover{ background:var(--raise) }
body[data-theme="cobalt"] .ub-row.on{ background:var(--accent); color:var(--accent-ink) }

/* ═══════════════════════ the honesty gate ═══════════════════════
 *
 * Full screen, one decision, nothing else on it. Unskippable by design —
 * there is no dismiss, no scrim to click, no escape binding. The only ways
 * out are the two buttons, and one of them is "no".
 */
.gate-root{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:var(--bg);overflow:auto;padding:28px 20px}
.gate-root[hidden]{display:none}
.gate-in{width:min(520px,100%);text-align:center}
.gate-lbl{font:400 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px}
.gate-amt{font:200 64px/1 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.gate-who{font:300 19px var(--sans);color:var(--dim);margin-top:8px}
.gate-lbl2{font:400 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:30px 0 10px}

/* The literal strings the customer's phone renders. Bordered, so it reads as
   a quotation of something else rather than as this app's own words. */
.gate-card{border:1px solid var(--line);background:var(--panel2);padding:16px 18px;text-align:left}
.gate-name{font:600 16px var(--sans);line-height:1.35;color:var(--ink)}
.gate-desc{font:400 14px var(--sans);line-height:1.5;color:var(--dim);margin-top:8px}

.gate-note{font-size:13px;color:var(--dim);line-height:1.6;margin:18px 0 0}
.gate-note.warn{color:var(--warn)}
.gate-go{display:block;width:100%;margin:26px 0 0;padding:20px;border:0;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  font:600 17px var(--sans);letter-spacing:.16em}
.gate-go:hover{background:var(--accent2)}
.gate-back{display:block;width:100%;margin:8px 0 0;padding:14px;border:1px solid var(--line);
  background:transparent;color:var(--dim);cursor:pointer;font:400 14px var(--sans)}
.gate-back:hover{color:var(--ink);border-color:var(--accent)}
@media print{ .gate-root{display:none!important} }

/* the "no charge" toggle on a part row in the pad */
.pad-btn.on{background:rgba(90,160,255,.3);border-color:rgba(146,190,255,.6);color:#fff}
.pad-btn:disabled{opacity:.4;cursor:default}

/* ── the invoice book ───────────────────────────────────────────
   No pages. Chips carry real counts; the grid scrolls until it runs out. */
.bk-top{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.bk-q{flex:1;min-width:200px}
.bk-tot{font-size:12px;white-space:nowrap;opacity:.85}
.bk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip{border:1px solid var(--line,#d0d5dd);background:var(--card,#fff);border-radius:3px;
  padding:5px 9px;font-size:12px;cursor:pointer;display:inline-flex;gap:6px;align-items:baseline}
.chip b{font-weight:700}
.chip i{font-style:normal;opacity:.6;font-size:11px}
.chip.on{background:#4779c4;border-color:#4779c4;color:#fff}
.chip.on i{opacity:.85}
.bk-groups{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bk-grp{border:1px solid var(--line,#d0d5dd);background:var(--card,#fff);border-radius:3px;
  padding:6px 10px;cursor:pointer;text-align:left;font-size:12px;line-height:1.35}
.bk-grp b{display:block}
.bk-grp span{opacity:.65;font-size:11px}
.bk-grp i{display:block;font-style:normal;font-size:11px}
.bk-note{font-size:12px;padding:6px 9px;margin-bottom:8px;border-left:3px solid #c9a227;
  background:rgba(201,162,39,.09)}
.bk-scroll{max-height:60vh;overflow:auto;border:1px solid var(--line,#d0d5dd)}
.bk-grid{width:100%;border-collapse:collapse;font-size:12px}
.bk-grid th{position:sticky;top:0;z-index:1;background:var(--card,#f4f6f8);text-align:left;
  padding:6px 8px;border-bottom:1px solid var(--line,#d0d5dd);cursor:pointer;white-space:nowrap;
  font-weight:600}
.bk-grid th.r,.bk-grid td.r{text-align:right}
.bk-grid th.sorted{color:#4779c4}
.bk-grid td{padding:4px 8px;border-bottom:1px solid rgba(128,128,128,.14);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:280px}
.bk-grid tbody tr:hover{background:rgba(71,121,196,.08)}
.bk-grid tr.late td{background:rgba(190,60,60,.06)}
.bk-grid tr.zero td{opacity:.62}
.bk-grid td.owed{font-weight:700}
.bk-grid td.grp{color:#4779c4}
.bk-more{padding:8px;text-align:center;font-size:11px;opacity:.6}
.grp-card{border:1px solid var(--line,#d0d5dd);border-radius:3px;padding:10px;margin-bottom:10px}
.grp-card.saved{background:rgba(71,121,196,.06)}
.grp-h{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.grp-h .grp-name{flex:1}
.grp-members{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.grp-m{font-size:12px;display:flex;gap:5px;align-items:center}
.grp-m i{font-style:normal;opacity:.55;font-size:11px}
.btn.tiny{padding:3px 8px;font-size:11px}

/* A ten-column grid does not fit a dialog sized for a form. The book, the
   groups screen and anything else with a table asks for the room it needs. */
/* 96%, not 96vw: with text size above 100% the page is zoomed, and vw is the
   screen's real width, so a 96vw modal ran off the right edge at 110%. The
   root is fixed to the screen, so a percentage of it always fits. */
.modal-root.wide .modal{width:min(1500px,96%);max-width:96%}
.modal-root.wide .modal-body{padding:12px 14px}

/* ── the fee record, under its invoice row ─────────────────────── */
.bk-grid tr[data-inv]{cursor:pointer}
/* Direct child only. Written as `.fee-row td{padding:0!important}` it also
   flattened every cell of the log table nested inside, which looked like a
   font problem and was a selector problem. `!important` is not needed here -
   the extra class already beats `.bk-grid td`. */
.bk-grid tr.fee-row > td{padding:0;background:rgba(71,121,196,.05);
  /* The grid clips its own cells to one ellipsised line at 280px. That is
     right for a row and wrong for a panel opened inside one, so every one of
     those is undone here rather than fought with !important. */
  white-space:normal;overflow:visible;max-width:none;text-overflow:clip}
.fee-wrap{padding:12px 14px;border-top:2px solid #4779c4}
.fee-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.fee-amt{font-size:17px;font-weight:700;margin:0 8px}
.fee-why{font-size:12px;opacity:.8;flex:1;min-width:220px}
.fee-chip{display:inline-block;border:1px solid var(--line,#d0d5dd);border-radius:2px;
  padding:2px 7px;font-size:11px;margin-right:4px;opacity:.45}
.fee-chip.on{opacity:1;background:#4779c4;color:#fff;border-color:#4779c4}
.fee-chip.bad{opacity:1;background:#b23a3a;color:#fff;border-color:#b23a3a}
.fee-state{margin:8px 0}
.fee-log{width:100%;border-collapse:collapse;font-size:11.5px;margin:6px 0}
.fee-log th{text-align:left;padding:4px 7px;border-bottom:1px solid var(--line,#d0d5dd);
  font-weight:600;white-space:nowrap}
.fee-log th.r,.fee-log td.r{text-align:right;padding-right:14px}
/* The log table sits INSIDE .bk-grid, so its cells match `.bk-grid td` as
   descendants and inherit that rule's nowrap + ellipsis + max-width. Same
   specificity, so it is not overridden by accident - it has to be undone
   explicitly, here, or every detail line ends in an ellipsis. */
.fee-log td{padding:3px 7px;border-bottom:1px solid rgba(128,128,128,.12);vertical-align:top;
  white-space:normal;overflow:visible;text-overflow:clip;max-width:none}
/* A wrapped date reads as two dates, and a label with no room runs into the
   name beside it. Both were visible only by looking at the thing. */
.fee-log td:nth-child(1),.fee-log td:nth-child(2),.fee-log td:nth-child(4){white-space:nowrap}
.fee-log th:nth-child(1){width:82px}
.fee-log th:nth-child(2){width:42px}
.fee-log th:nth-child(3){width:150px}
.fee-log th:nth-child(4){width:56px}
.fee-log th:nth-child(5){width:74px}
.fee-log th:nth-child(7){width:62px}
.fee-log tr.heavy td{font-weight:600;background:rgba(71,121,196,.07)}
.fee-log td.lbl{white-space:nowrap}
.fee-log td.hash{font-family:ui-monospace,Menlo,monospace;opacity:.45;font-size:10px}
.fee-log i.why{display:block;font-style:normal;opacity:.7;padding-top:2px}
.fee-verify{font-size:11.5px;padding:5px 8px;margin:6px 0;border-left:3px solid}
.fee-verify.good{border-color:#3a8f5a;background:rgba(58,143,90,.08)}
.fee-verify.bad{border-color:#b23a3a;background:rgba(178,58,58,.09)}
.fee-cover{font-size:12px;padding:8px 10px;background:var(--card,#fff);
  border:1px solid var(--line,#d0d5dd);margin:6px 0;line-height:1.5}
.fee-cover b{display:block;margin-bottom:3px}
.fee-cover i.gap{display:block;font-style:normal;color:#b23a3a;padding-top:5px}
.fee-cover i.limit{display:block;font-style:normal;opacity:.6;padding-top:6px;font-size:11px}
.fee-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fee-warn{font-size:12px;padding:8px 10px;margin:10px 0;border-left:3px solid #c9a227;
  background:rgba(201,162,39,.09);line-height:1.5}
.chk{display:flex;gap:6px;align-items:center;font-size:12px}

/* ── the responsibilities document, on screen ──────────────────── */
.sc-doc{max-height:52vh;overflow:auto;border:1px solid var(--line,#d0d5dd);padding:10px}
.sc-sec{margin-bottom:14px}
.sc-sec h5{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  opacity:.65;border-bottom:1px solid var(--line,#d0d5dd);padding-bottom:3px}
.sc-line{padding:7px 9px;margin-bottom:6px;border-left:3px solid var(--line,#d0d5dd);
  background:var(--card,#fff)}
.sc-line.crit{border-left-width:5px}
.sc-line.own-us{border-left-color:#3a8f5a}
.sc-line.own-you{border-left-color:#4779c4}
.sc-line.own-shared{border-left-color:#7a7a8c}
.sc-line.own-build{border-left-color:#c9a227}
.sc-what{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;font-size:13px}
.sc-own{font-size:10px;letter-spacing:.07em;opacity:.7;white-space:nowrap}
.sc-detail{font-size:12px;margin-top:3px;line-height:1.45}
.sc-why{font-size:11.5px;margin-top:3px;opacity:.65;font-style:italic;line-height:1.45}

/* ── the timesheet ─────────────────────────────────────────────── */
.ts-owed{background:#4779c4;color:#fff;padding:10px 13px;margin-bottom:10px;border-radius:3px}
.ts-owed b{font-size:19px;display:inline-block;margin-right:8px}
.ts-owed span{opacity:.85;font-size:12px}
.ts-hours{display:flex;gap:26px;margin:10px 0}
.ts-hours div b{display:block;font-size:20px;line-height:1.1}
.ts-hours div span{font-size:11px;opacity:.65}
.ts-hours div.gap b{color:#c9a227}
.bk-note.hot{border-left-color:#4779c4;background:rgba(71,121,196,.1)}
.ts-grid td{vertical-align:top}
.ts-stages{white-space:nowrap}
.ts-dot{width:19px;height:19px;margin-right:3px;border:1px solid var(--line,#d0d5dd);
  background:var(--card,#fff);border-radius:50%;font-size:10px;cursor:pointer;padding:0;
  line-height:1;opacity:.55}
.ts-dot.on{background:#3a8f5a;border-color:#3a8f5a;color:#fff;opacity:1}
.ts-dot.on.hot{background:#4779c4;border-color:#4779c4}

/* the running total, for while the totals panel is shut
 *
 * Shutting the inspector must not cost Evan the one number he watches all day,
 * so it moves up to the toolbar. Declared at the end of the file because the
 * invoice book redefines a bare .chip further up and would otherwise win. */
.total-chip{display:none;align-items:center;gap:7px;flex:none;white-space:nowrap}
body.railR-shut .total-chip{display:inline-flex}
.total-chip>span{color:var(--dim);font-size:12px}
.total-chip b{font:700 13px var(--mono);color:var(--accent)}

/* ═══════════════════════ the board ═══════════════════════
 *
 * The dump box is the biggest thing on the screen and it is at the top,
 * because getting a thought out of his head has to be the cheapest action
 * here. Everything else is deliberately smaller than it. */
.bd-dump{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:10px;margin-bottom:10px}
.bd-dump textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);padding:9px 11px;font:14px/1.5 var(--sans);color:var(--ink);
  resize:vertical;min-height:64px}
.bd-dump textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.bd-dump-side{display:flex;flex-direction:column;gap:7px}
.bd-dump-side small{color:var(--dimmer);font-size:11.5px;line-height:1.5}
.bd-dump-side small b{color:var(--dim);font:600 11.5px var(--mono)}

/* the plain statements. Counts, not instructions. */
.bd-finds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bd-find{font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim)}
.bd-find.promised,.bd-find.over-focus{border-color:var(--accent);color:var(--ink)}

.bd-cols{display:grid;gap:9px;align-items:start}
.bd-col{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:120px;overflow:hidden}
.bd-col.doing{border-color:var(--accent)}
.bd-col.over{border-color:#c98a1e}
.bd-col-head{display:flex;align-items:center;gap:7px;padding:7px 10px;
  border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.bd-col-head b{color:var(--dim);font-weight:600}
.bd-col-head span{margin-left:auto;font:600 12px var(--mono);color:var(--dimmer)}
.bd-focus-dot{color:var(--accent);font-style:normal;font-size:9px;margin-left:0}
.bd-col-body{padding:7px;display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow-y:auto}
.bd-empty{color:var(--dimmer);font-size:12.5px;text-align:center;padding:10px 4px;margin:0}

.bd-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 9px;box-shadow:var(--bevel)}
.bd-card.f-promise-passed,.bd-card.f-promised-today{border-left:3px solid var(--accent)}
.bd-card.f-hold-unnamed{border-left:3px solid #c98a1e}
.bd-card.f-sitting,.bd-card.f-undecided{border-left:3px solid var(--dimmer)}
.bd-card.closed{opacity:.62}
.bd-t{font-size:13.5px;line-height:1.35;color:var(--ink)}
.bd-who{font-size:11.5px;color:var(--accent);margin-top:2px}
.bd-note{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.4}
/* Said once, with the numbers in it, in the same voice every time. */
.bd-says{font-size:11.5px;color:var(--dimmer);margin-top:5px;line-height:1.45}
.bd-chase{font-size:11px;color:var(--dimmer);margin-top:2px}
.bd-acts{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}
.bd-m{font-size:11px;padding:3px 7px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:transparent;color:var(--dim);cursor:pointer;white-space:nowrap}
.bd-m:hover{border-color:var(--accent);color:var(--ink)}
.bd-m.ok:hover{border-color:#2e8b57;color:#2e8b57}
.bd-m.no:hover{border-color:#b4433a;color:#b4433a}
.bd-closing{font-size:11px;color:var(--dimmer);align-self:center}

.bd-waiting{display:flex;flex-direction:column;gap:9px}
.bd-w{border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);overflow:hidden}
.bd-w-head{display:flex;align-items:baseline;gap:9px;padding:7px 10px;border-bottom:1px solid var(--line)}
.bd-w-head b{font-size:13.5px}
.bd-w-head span{font-size:11.5px;color:var(--dimmer)}
.bd-w-row{display:grid;grid-template-columns:70px minmax(0,1fr) 46px;gap:8px;align-items:center;
  padding:5px 10px;font-size:12.5px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.bd-w-col{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--dimmer)}
.bd-w-d{text-align:right;font:12px var(--mono);color:var(--dimmer)}

.bd-int{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.bd-int th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line)}
.bd-int td{padding:5px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}

/* On a phone or a half-covered window the columns stack rather than shrink to
 * strips of vertical text. */
@media (max-width:900px){
  .bd-dump{grid-template-columns:minmax(0,1fr)}
  .bd-cols{grid-template-columns:minmax(0,1fr)!important}
  .bd-col-body{max-height:none}
}

/* ═══════════════════════ EKTools ═══════════════════════
 * Evan's own two. The menu button is marked so it reads as his corner and
 * not another company menu. */
.mb.ek{color:var(--accent);font-weight:600}

.ek-list{display:flex;flex-direction:column;gap:7px}
.ek-row{display:grid;grid-template-columns:74px minmax(0,1fr) 108px;gap:11px;align-items:center;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  cursor:pointer}
.ek-row:hover{border-color:var(--accent)}
.ek-row.sent{border-left:3px solid #2e8b57}
.ek-row.issued{border-left:3px solid var(--accent)}
.ek-no{font:600 12px var(--mono);color:var(--dimmer)}
.ek-mid b{display:block;font-size:14px}
.ek-mid span{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.ek-mid i{display:block;font-size:11.5px;color:var(--dimmer);font-style:normal;margin-top:3px}
.ek-warn{display:block;font-size:11.5px;color:#c98a1e;text-decoration:none;margin-top:2px}
.ek-right{text-align:right}
.ek-stage{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--dimmer)}
.ek-stage.sent{color:#2e8b57}
.ek-stage.issued{color:var(--accent)}
.ek-right small{display:block;font-size:11px;color:var(--dimmer);margin-top:3px}

.ek-edit{display:flex;flex-direction:column;gap:12px}
.ek-state{font-size:12.5px;color:var(--dim);padding:7px 10px;border-radius:var(--r-sm);
  background:var(--panel2);border:1px solid var(--line)}
.ek-state.issued{border-color:var(--accent)}
.ek-state.sent{border-color:#2e8b57}
.ek-state code{font:11px var(--mono);color:var(--dimmer)}
.ek-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.ek-grid label,.ek-edit label.wide{display:flex;flex-direction:column;gap:3px;
  font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--dimmer)}
.ek-edit input,.ek-edit textarea{background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 9px;font:14px/1.5 var(--sans);color:var(--ink);
  text-transform:none;letter-spacing:0}
.ek-edit textarea{resize:vertical}
.ek-edit input:focus,.ek-edit textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}

/* The panel that shows what he did not charge. */
.ek-value{border:1px solid var(--line);border-left:3px solid #8a6d2d;border-radius:var(--r);
  padding:11px 13px;background:var(--panel2);display:flex;flex-direction:column;gap:9px}
.ek-value-head b{display:block;font-size:13px}
.ek-value-head small{display:block;font-size:11.5px;color:var(--dimmer);line-height:1.5;margin-top:2px}
.ek-gift{font-size:13px;color:var(--ink)}
.ek-gift b{font:700 15px var(--mono);color:#8a6d2d}
.ek-gift span{font-size:11.5px;color:var(--dimmer);margin-left:7px}

.ek-secs{display:flex;flex-direction:column;gap:11px}
.ek-sec{display:flex;flex-direction:column;gap:3px}
.ek-sec>span{font-size:13px;color:var(--ink)}
.ek-sec .req{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--accent);margin-left:5px}
.ek-sec small{font-size:11.5px;color:var(--dimmer);line-height:1.5}

.ek-log{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.ek-log th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:600;padding:5px 7px;border-bottom:1px solid var(--line)}
.ek-log td{padding:5px 7px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  vertical-align:top}
.ek-log .nw{white-space:nowrap}
.ek-fp{font:11px var(--mono);color:var(--dimmer)}
.ek-kind{font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;
  border-radius:999px;border:1px solid var(--line);color:var(--dimmer)}
.ek-kind.sent{border-color:#2e8b57;color:#2e8b57}
.ek-to td{color:var(--dimmer);font-size:11.5px;padding-top:0;border-bottom:0}

/* ---- the advanced labour finder ---- */
.al-finds{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
.al-find{font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim)}
.al-find.certain{border-color:var(--accent);color:var(--ink)}
/* The caveat is not decoration. It is the reason the number above it is safe. */
.al-find.possible{border-color:#c98a1e;color:#8a6d2d}
.al-find.goodwill{border-color:#8a6d2d;color:#8a6d2d}

.al-need{border:1px solid var(--accent);border-radius:var(--r);margin:10px 0;overflow:hidden}
.al-need-head{padding:7px 11px;border-bottom:1px solid var(--line);background:var(--panel2)}
.al-need-head b{font-size:13px}
.al-need-head small{display:block;font-size:11.5px;color:var(--dimmer);margin-top:1px}
.al-need-row{display:grid;grid-template-columns:74px minmax(0,1fr) 96px auto;gap:9px;
  align-items:center;padding:6px 11px;font-size:12.5px;
  border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.al-inv{font:600 12px var(--mono);color:var(--dimmer)}
.al-amt{text-align:right;font:600 12.5px var(--mono)}

.al-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
.al-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:600;padding:5px 7px;border-bottom:1px solid var(--line)}
.al-table td{padding:5px 7px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  vertical-align:top}
.al-table .r{text-align:right}
.al-table .nw{white-space:nowrap}
.al-table tr.possible td{background:color-mix(in srgb,#c98a1e 6%,transparent)}
.al-conf{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  padding:1px 6px;border-radius:999px;border:1px solid var(--line);margin-right:6px;
  color:var(--dimmer);white-space:nowrap}
.al-conf.certain{border-color:#2e8b57;color:#2e8b57}
.al-conf.possible{border-color:#c98a1e;color:#8a6d2d}
.al-why{color:var(--dim);line-height:1.5}
.al-cut{display:block;font-style:normal;font-size:11px;color:#8a6d2d;margin-top:2px}
.al-hrs{display:block;font-style:normal;font-size:11px;color:var(--dimmer)}
.al-has{font-style:normal;color:#2e8b57;margin-left:5px}

@media (max-width:900px){
  .ek-row{grid-template-columns:minmax(0,1fr);gap:5px}
  .ek-right{text-align:left}
  .al-need-row{grid-template-columns:minmax(0,1fr)}
}

/* The mark at the front door, in place of "Who's working?".
 * Sized off the heading it replaced rather than made a hero: this is the
 * company's name on a sign-in screen, not a splash page. */
/* The mark at the front door.
 *
 * The artwork is a transparent PNG, so it sits straight on the glass with no
 * plate behind it. An earlier revision had one, because the first file supplied
 * was a JPEG carrying its own white ground - worth remembering if anyone ever
 * swaps this file for a flattened one, because the plate is the difference
 * between a logo and a pasted screenshot. */
.w-brand{display:flex;justify-content:center;margin:2px 0 26px}
.w-brand img{max-width:284px;width:100%;height:auto;display:block}
.w-brand-text{font:600 22px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink);
  text-align:center;opacity:.92}

/* ── typing in a customer who is not in RepairShopr yet ── */
.cust-manual{border:1px solid var(--accent);border-radius:var(--r);padding:12px 13px;
  background:var(--panel2);display:flex;flex-direction:column;gap:10px}
.cm-head b{display:block;font-size:14px}
.cm-head small{display:block;font-size:11.5px;color:var(--dimmer);line-height:1.5;margin-top:2px}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.cm-grid label{display:flex;flex-direction:column;gap:3px;font-size:11px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--dimmer)}
.cm-grid label.wide{grid-column:1/-1}
.cm-grid input{text-transform:none;letter-spacing:0}
.cm-or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--dimmer);font-size:12px}
.cm-or::before,.cm-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── the payment schedule ──
 * Three buttons instead of a dropdown, because the deposit is a decision with
 * three answers and a <select> hides two of them until you click it. */
.pay-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.pm{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  color:var(--ink);cursor:pointer;font-size:13.5px}
.pm small{font-size:11.5px;color:var(--dimmer);line-height:1.4}
.pm:hover{border-color:var(--accent)}
.pm.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent)}
.pay-val{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim)}
.pay-val input{width:130px}
.pay-val #pdUnit{color:var(--dimmer);font-size:12.5px}
/* Dimmed, never disabled. A box you cannot click is a box that looks broken,
 * and typing in this one is how you change your mind back. */
.pay-val.idle{opacity:.5}

/* the deposit lines open the dialog */
.trow.clickable{cursor:pointer;border-radius:var(--r-sm)}
.trow.clickable:hover{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
.trow.dep-none b{font-weight:500;color:var(--dim)}

/* ── advanced labour, and what is owed ──
 * Three numbers along the top, and they are never added together: money the
 * customer has paid, money waiting on a customer, and work nobody has been
 * asked to pay for are three different facts. */
.ap-heads{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.ap-head{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:var(--panel2)}
.ap-head span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dimmer)}
.ap-head b{display:block;font:700 24px var(--mono);margin:4px 0 3px}
.ap-head small{display:block;font-size:11.5px;color:var(--dimmer);line-height:1.45}
.ap-head.owed{border-color:#2e8b57}
.ap-head.owed b{color:#2e8b57}
.ap-head.flight b{color:var(--accent)}
.ap-head.risk{border-color:#c98a1e}
.ap-head.risk b{color:#8a6d2d}

.ap-finds{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.ap-find{font-size:12.5px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel2);color:var(--dim)}
.ap-find.never-invoiced{border-color:#c98a1e;color:#8a6d2d}
.ap-find.owed-now{border-color:#2e8b57;color:#2e8b57}

.ap-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ap-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line)}
.ap-table td{padding:7px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  vertical-align:top}
.ap-table .r{text-align:right}
.ap-table .nw{white-space:nowrap}
.ap-table tr.flagged td{background:color-mix(in srgb,#c98a1e 7%,transparent)}
.ap-table tr.ap-total td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
.ap-what{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:2px}
.ap-note{display:block;font-style:normal;font-size:11px;color:var(--dimmer);margin-top:3px;line-height:1.45}
.ap-check{display:block;font-style:normal;font-size:11.5px;margin-top:4px;line-height:1.45;color:#8a6d2d}
.ap-says{display:block;font-style:normal;font-size:11px;color:var(--dimmer);margin-top:4px}
.ap-due{font-weight:700;color:#2e8b57}
.ap-dim{color:var(--dimmer)}

/* the stage dots — one per stage, lit up to where the job has got to */
.ap-dots{display:flex;gap:4px}
.ap-dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);
  background:transparent;cursor:pointer;padding:0}
.ap-dot:hover{border-color:var(--accent)}
.ap-dot.on{background:var(--accent);border-color:var(--accent)}
.ap-dot.here{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}

.ap-dave h3{margin:0 0 4px;font-size:16px}

/* ═══════════════ the proposal, in Metro ═══════════════
 *
 * Evan: "Change the layout in the proposal builder / estimate maker, that
 * entire suite, to reflect the Microsoft Windows Phone UI I requested earlier
 * in the project — that's what the login screen is based on."
 *
 * The app chrome already answers to the metro and cobalt themes. The DOCUMENT
 * never did: .sheet and everything in it kept the soft-blue look — 26px radii,
 * gradients, a 70px drop shadow — whatever theme was on. So the proposal a
 * customer sees had nothing to do with the interface it was built in.
 *
 * Metro is not "flat blue". It is: no rounded corners, no shadow, no gradient,
 * type doing the work of decoration, and colour used as solid blocks rather
 * than as light. Labels are small, wide-tracked and uppercase; the big numbers
 * are set light rather than bold, because in this language weight is reserved
 * for the thing that matters most on the page and there is only one of those.
 *
 * Scoped to the two Windows Phone themes. Pick Aqua or Paper and the soft-blue
 * document comes back — this is a look, not a replacement.
 */
body[data-theme="metro"] .paper,
body[data-theme="cobalt"] .paper{ background:var(--bg) }

body[data-theme="metro"] .sheet,
body[data-theme="cobalt"] .sheet{
  border-radius:0; border:0; box-shadow:none; background:#fff }

/* the masthead: a solid block, not a gradient wash */
body[data-theme="metro"] .sheet-head,
body[data-theme="cobalt"] .sheet-head{
  background:var(--accent); padding:26px 30px 22px }
body[data-theme="metro"] .sheet-head::after,
body[data-theme="cobalt"] .sheet-head::after{ display:none }
body[data-theme="metro"] .sh-brand .sh-logo,
body[data-theme="cobalt"] .sh-brand .sh-logo{
  border-radius:0; box-shadow:none; padding:10px 14px }
body[data-theme="metro"] .sh-co,
body[data-theme="cobalt"] .sh-co{ font-weight:300; font-size:26px; letter-spacing:-.5px }
body[data-theme="metro"] .sh-meta,
body[data-theme="cobalt"] .sh-meta{ opacity:.82; font-size:12.5px }
body[data-theme="metro"] .sh-pill,
body[data-theme="cobalt"] .sh-pill{
  border-radius:0; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  font-weight:400; letter-spacing:.24em; font-size:11px; padding:4px 12px }
body[data-theme="metro"] .sh-subject,
body[data-theme="cobalt"] .sh-subject{ font-weight:300; font-size:19px; letter-spacing:-.2px }

/* prepared for / prepared by: hairline boxes, label above */
body[data-theme="metro"] .party .box,
body[data-theme="cobalt"] .party .box{
  background:transparent; border:1px solid var(--line); border-radius:0;
  box-shadow:none; padding:14px 16px }
body[data-theme="metro"] .party h4,
body[data-theme="cobalt"] .party h4{
  font-size:10.5px; letter-spacing:.22em; color:var(--accent); font-weight:600 }
body[data-theme="metro"] .party b,
body[data-theme="cobalt"] .party b{ font-weight:600 }

/* section bands and the items table: blocks and rules, no rounding */
body[data-theme="metro"] .sec-band,
body[data-theme="cobalt"] .sec-band{
  background:var(--accent); border-radius:0; font-weight:400;
  letter-spacing:.2em; font-size:12.5px; text-transform:uppercase; padding:10px 16px }
body[data-theme="metro"] table.items,
body[data-theme="cobalt"] table.items{
  border-radius:0; border:1px solid var(--line); border-top:0 }
body[data-theme="metro"] table.items th,
body[data-theme="cobalt"] table.items th{
  background:transparent; border-bottom:2px solid var(--accent); color:var(--dim);
  font-weight:600; letter-spacing:.16em; font-size:10.5px }
body[data-theme="metro"] table.items tr:nth-child(even) td,
body[data-theme="cobalt"] table.items tr:nth-child(even) td{ background:transparent }
body[data-theme="metro"] table.items td,
body[data-theme="cobalt"] table.items td{ border-bottom:1px solid var(--line) }
body[data-theme="metro"] table.items .it,
body[data-theme="cobalt"] table.items .it{ font-weight:600 }
body[data-theme="metro"] .tag,
body[data-theme="cobalt"] .tag{ border-radius:0; font-weight:600; letter-spacing:.12em }

/* the money: one solid block for the total, everything else a plain rule */
body[data-theme="metro"] .summary-card,
body[data-theme="cobalt"] .summary-card{
  border-radius:0; border:0; box-shadow:none; border-top:1px solid var(--line) }
body[data-theme="metro"] .summary-card .sc-row,
body[data-theme="cobalt"] .summary-card .sc-row{
  background:transparent; border-bottom:1px solid var(--line) }
body[data-theme="metro"] .summary-card .sc-row.total,
body[data-theme="cobalt"] .summary-card .sc-row.total{
  background:var(--accent); border:0; font-weight:300; font-size:21px; padding:15px 20px }
body[data-theme="metro"] .summary-card .sc-row.total b,
body[data-theme="cobalt"] .summary-card .sc-row.total b{ font-weight:300; font-size:25px }
body[data-theme="metro"] .summary-card .sc-row.pay,
body[data-theme="cobalt"] .summary-card .sc-row.pay{
  background:transparent; font-weight:600; color:var(--dim) }
body[data-theme="metro"] .savings-chip,
body[data-theme="cobalt"] .savings-chip{
  border-radius:0; background:transparent; border:1px solid #b6e3c1; font-weight:600 }

/* terms and signatures */
body[data-theme="metro"] .term,
body[data-theme="cobalt"] .term{
  background:transparent; border:0; border-left:3px solid var(--accent);
  border-radius:0; padding:11px 0 11px 15px }
body[data-theme="metro"] .term h5,
body[data-theme="cobalt"] .term h5{ color:var(--accent); letter-spacing:.2em; font-size:10.5px }
body[data-theme="metro"] .sigcell,
body[data-theme="cobalt"] .sigcell{
  background:transparent; border:1px solid var(--line); border-radius:0 }
body[data-theme="metro"] .sigcell .who,
body[data-theme="cobalt"] .sigcell .who{ font-weight:600; letter-spacing:.14em }

/* ═══════════════ the desk ═══════════════
 * Tiles big enough to hit on an iPad, few enough to read at a glance, and each
 * one says what it is FOR rather than what it is called. */
.modal-root.bare .modal-head{display:none}
.modal-root.bare .modal-body{padding-top:26px}

.desk-hd h1{font:300 40px/1.05 var(--sans);letter-spacing:-1.2px;margin:0 0 6px;color:var(--ink)}
.desk-hd p{margin:0 0 26px;font-size:14.5px;color:var(--dim)}

.desk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.desk-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;
  padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel2);color:var(--ink);cursor:pointer;min-height:152px;
  transition:border-color .12s,transform .12s}
.desk-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.desk-tile b{font-size:17px;font-weight:600;line-height:1.2}
.desk-tile small{font-size:12.5px;color:var(--dim);line-height:1.45}
.dt-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font-size:19px;font-weight:600;margin-bottom:6px}
/* Evan's own corner is marked, because it is the one nobody else needs. */
.desk-tile.mine{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.desk-tile.mine .dt-icon{background:var(--accent);color:var(--accent-ink)}
.desk-tile.soon{opacity:.62}
.dt-soon{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--dimmer);margin-top:auto;padding-top:6px}
.dt-sub{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:9px}
.dt-sub em{font-style:normal;font-size:11px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line);color:var(--dimmer)}
.dt-sub em:hover{border-color:var(--accent);color:var(--accent)}
.mb-mark.clickable{cursor:pointer}
.mb-mark.clickable:hover{color:var(--accent)}
/* Back · Home · Forward — the browser-style nav cluster, left-justified in the
   top bar. Clean white buttons, a thin black edge, black icons: the same look
   as BioForge's operations shell, on purpose. Theme-independent so it reads the
   same on every skin. Back reuses the forward arrow, rotated 180°. */
.mb-nav{display:inline-flex;align-items:center;gap:4px;margin:0 10px 0 2px}
.mb-navbtn{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:26px;padding:0;border:1px solid #1a1a1a;border-radius:8px;
  background:#fff;color:#111;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,opacity .12s ease}
.mb-navbtn svg{display:block}
.mb-navbtn.back svg{transform:rotate(180deg)}
.mb-navbtn:hover:not(:disabled){background:#f1f3f5;border-color:#000;color:#000}
.mb-navbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,122,61,.18)}
.mb-navbtn:disabled{opacity:.4;cursor:default}
.mb-navbtn.on{background:#eef2ff}
/* Text size control in the menu bar - a clear A- / A+ with the current size. */
.mb-text{display:inline-flex;align-items:center;gap:3px;margin-right:6px}
.mb-txtbtn{min-width:26px;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel2);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;line-height:1}
.mb-txtbtn:hover{border-color:var(--accent);color:var(--accent)}
.mb-txtval{min-width:36px;text-align:center;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
/* The workspace launcher (#work) is a fixed, full-screen layer at z-index 5 and
   used to paint over the top bar — so the nav cluster was hidden exactly on the
   Home screen. Lift the bar (and its dropdown menus) above it so Back / Home /
   Forward are on top in every view, while modals (100) and the palette (70)
   still sit above the bar. */
#menubar{position:relative;z-index:6}
#menuPop{z-index:8}

/* Metro: tiles are tiles. Square, flat, and the icon block does the colour. */
body[data-theme="metro"] .desk-tile,
body[data-theme="cobalt"] .desk-tile{border-radius:0}
body[data-theme="metro"] .desk-tile:hover,
body[data-theme="cobalt"] .desk-tile:hover{transform:none;background:var(--panel)}
body[data-theme="metro"] .dt-icon,
body[data-theme="cobalt"] .dt-icon{border-radius:0;width:44px;height:44px}
body[data-theme="metro"] .desk-tile.mine .dt-icon,
body[data-theme="cobalt"] .desk-tile.mine .dt-icon{background:var(--accent)}
body[data-theme="metro"] .dt-sub em,
body[data-theme="cobalt"] .dt-sub em{border-radius:0}
body[data-theme="metro"] .desk-hd h1,
body[data-theme="cobalt"] .desk-hd h1{font-weight:200;letter-spacing:-1.6px}

/* ── the credential vault ── */
.v-list{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.v-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);cursor:pointer}
.v-row:hover{border-color:var(--accent)}
.v-row.locked{opacity:.62}
.v-mid b{display:block;font-size:14.5px}
.v-mid span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.v-find{display:block;font-style:normal;font-size:11.5px;color:#8a6d2d;margin-top:3px;line-height:1.45}
.v-can{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#2e8b57}
.v-cant{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dimmer)}

.v-open-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.v-open-hd b{font-size:16px}
.v-open-hd span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.v-open-hd a{color:var(--accent)}
.v-find-row{font-size:12.5px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);margin-bottom:6px}
.v-find-row.never-verified,.v-find-row.stale{border-color:#c98a1e;color:#8a6d2d}

.v-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.v-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line)}
.v-table td{padding:7px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  vertical-align:top}
.v-table .nw{white-space:nowrap}
.v-table i{display:block;font-style:normal;font-size:11.5px;color:var(--dimmer);margin-top:2px}
/* Click to reveal, one at a time, and it re-hides itself. A screen full of
 * plaintext is a screen somebody photographs over your shoulder. */
.v-secret{font:13px var(--mono);letter-spacing:1px;cursor:pointer;padding:2px 7px;
  border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);user-select:all}
.v-secret:hover{border-color:var(--accent)}
.v-says.flag{color:#8a6d2d}
.v-dim{color:var(--dimmer)}
body[data-theme="metro"] .v-row,body[data-theme="cobalt"] .v-row,
body[data-theme="metro"] .v-secret,body[data-theme="cobalt"] .v-secret{border-radius:0}

/* ═══════════ project folders ═══════════
 * The unanswered question is the product, so the questions are the loud part
 * of this screen and the answered ones are deliberately quiet at the bottom. */
.pj-list{display:flex;flex-direction:column;gap:7px}
.pj-list.dim{opacity:.55}
.pj-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);cursor:pointer}
.pj-row:hover{border-color:var(--accent)}
.pj-mid b{display:block;font-size:14.5px}
.pj-mid span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.pj-says{display:block;font-style:normal;font-size:11.5px;color:var(--dimmer);margin-top:3px}
.pj-says.flag{color:var(--warn)}
.pj-right{text-align:right;white-space:nowrap}
.pj-when{display:block;font-size:11px;color:var(--dim)}
.pj-when.close{color:var(--warn)}
.pj-count{display:block;font:11px var(--mono);color:var(--dimmer);margin-top:2px}
.pj-find{font-size:12.5px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);margin-bottom:6px}
.pj-find.quoted-on-guesses,.pj-find.close-and-unready{border-color:var(--warn);color:var(--warn)}
.pj-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--dimmer);
  font-weight:600;margin:16px 0 6px}

.pj-open-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px;flex-wrap:wrap}
.pj-open-hd b{font-size:16px}
.pj-open-hd span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.pj-stages{display:flex;gap:4px;flex-wrap:wrap}
.pj-st{font:11px var(--sans);padding:4px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--dim)}
.pj-st:hover{border-color:var(--accent)}
.pj-st.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pj-says-big{font-size:13.5px;color:var(--dim);margin:0 0 12px}
.pj-says-big.flag{color:var(--warn)}
.pj-lost{font-size:12.5px;color:var(--dim);margin:-6px 0 12px}

.pj-qs{display:flex;flex-direction:column;gap:6px}
.pj-q{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2)}
/* Structural questions carry a spine down the left. A wrong answer on one of
 * these is a redesign, not a change order. */
.pj-q.blocking{border-left:3px solid var(--warn)}
.pj-q-t b{display:block;font-size:13.5px;font-weight:500}
.pj-q-t em{display:block;font-style:normal;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--warn);margin-top:3px}
.pj-q-t i{display:block;font-style:normal;font-size:11.5px;color:var(--dimmer);margin-top:3px;
  line-height:1.45}
.pj-q-t u{display:block;text-decoration:none;font-size:11.5px;color:var(--warn);margin-top:3px}
.pj-q-a{display:flex;gap:5px;white-space:nowrap}
/* All three the same size on purpose. Make "not sure" harder to press than
 * yes or no and people press no instead, and then the record says a thing
 * nobody ever said. */
.pj-a{font:12px var(--sans);padding:6px 13px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);min-width:62px}
.pj-a:hover{border-color:var(--accent)}
.pj-a.yes:hover{border-color:var(--good);color:var(--good)}
.pj-a.no:hover{border-color:var(--bad);color:var(--bad)}
.pj-a.un.on{border-color:var(--warn);color:var(--warn)}

.pj-done{display:flex;flex-direction:column;gap:3px;opacity:.7}
.pj-d{display:flex;align-items:baseline;gap:9px;padding:5px 10px;font-size:12px;cursor:pointer;
  border-radius:var(--r-sm)}
.pj-d:hover{background:var(--panel2)}
.pj-d b{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);min-width:30px}
.pj-d span{color:var(--ink)}
.pj-d i{font-style:normal;color:var(--dim)}
.pj-d u{text-decoration:none;font-size:11px;color:var(--dimmer);margin-left:auto}

.pj-rooms{display:flex;flex-wrap:wrap;gap:6px}
.pj-rm{padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel2);font-size:12px;min-width:130px}
.pj-rm b{display:block;font-size:12.5px}
.pj-rm span{display:block;color:var(--dim);margin-top:2px}
.pj-rm i{display:block;font-style:normal;color:var(--dimmer);margin-top:2px;font-size:11.5px}

/* The sheet somebody reads off while a customer is on the phone. Bigger type
 * than the rest of the app, because it is read at arm's length. */
.pj-sheet{max-width:640px}
.pj-sheet-hd b{font-size:17px}
.pj-sheet-hd span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.pj-sheet-note{font-size:12px;color:var(--dimmer);margin:8px 0 14px;line-height:1.5}
.pj-sheet-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.pj-sheet-list li{font-size:14.5px;line-height:1.45}
.pj-sheet-list li.blocking b{color:var(--warn)}
.pj-sheet-list i{display:block;font-style:normal;font-size:12px;color:var(--dimmer);margin-top:2px}
.pj-sheet-list u{display:block;text-decoration:none;font-size:12px;color:var(--warn);margin-top:2px}

@media (max-width:640px){
  .pj-q{flex-direction:column;align-items:stretch;gap:9px}
  .pj-q-a{justify-content:stretch}
  .pj-a{flex:1}
}

/* ═══════════ handwritten time cards ═══════════
 * Read on a phone, in a truck, by somebody over sixty. Everything here is
 * bigger than the rest of the app and everything carries Spanish. */
.tc-es{display:block;font-style:italic;color:var(--dimmer);font-size:.86em;margin-top:1px}
.tc-list{display:flex;flex-direction:column;gap:7px}
.tc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);cursor:pointer}
.tc-row:hover{border-color:var(--accent)}
.tc-mid b{display:block;font-size:14.5px}
.tc-mid span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.tc-left{display:inline-block;min-width:26px;text-align:center;padding:3px 8px;border-radius:999px;
  background:var(--warn);color:#1b1500;font-weight:600;font-size:12px}
.tc-sent{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--good)}

/* the walk — one day at a time */
.tc-walk{max-width:520px;margin:0 auto}
.tc-prog{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--dimmer);
  text-align:center}
.tc-date{font-size:24px;font-weight:600;text-align:center;margin:6px 0 2px}
.tc-date i{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--dimmer)}
.tc-paper{text-align:center;font-size:11.5px;color:var(--dimmer);margin-bottom:14px}
.tc-paper code{font:12px var(--mono);color:var(--dim)}

.tc-times{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tc-t{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  cursor:pointer}
.tc-t:hover{border-color:var(--accent)}
.tc-t span{display:block;font-size:11.5px;color:var(--dim)}
.tc-t span i{display:block;font-style:italic;font-size:10.5px;color:var(--dimmer)}
.tc-t b{display:block;font:22px var(--mono);margin-top:4px}
.tc-t.empty b{color:var(--dimmer)}
/* Only the ones a person really has to look at are marked. Marking everything
 * is the same as marking nothing. */
.tc-t.low{border-color:var(--warn)}
.tc-t.low u{display:block;text-decoration:none;font-size:11px;color:var(--warn);margin-top:5px;
  line-height:1.4}
.tc-t.low u i{color:var(--warn);opacity:.8}

.tc-sum{margin:14px 0;padding:12px 14px;border-radius:var(--r);background:var(--panel2);
  border:1px solid var(--line);text-align:center}
.tc-sum b{display:block;font-size:15px}
.tc-bad{margin:12px 0;padding:11px 13px;border-radius:var(--r);border:1px solid var(--bad)}
.tc-bad b{display:block;font-size:13px;color:var(--bad)}

.tc-ask{margin-top:16px;text-align:center}
.tc-q{font-size:17px;font-weight:600;margin-bottom:10px}
.tc-q i{display:block;font-style:italic;font-size:13px;font-weight:400;color:var(--dim)}
.tc-btns{display:flex;gap:8px;flex-wrap:wrap}
.tc-btns button{flex:1;min-width:120px;padding:14px 12px;border-radius:var(--r);cursor:pointer;
  font:15px var(--sans);border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.tc-btns button i,.tc-send button i{display:block;font-style:italic;font-size:12px;opacity:.75;
  margin-top:2px;font-weight:400}
.tc-yes{background:var(--good)!important;border-color:var(--good)!important;color:#04240f!important;
  font-weight:600}
.tc-yes[disabled]{opacity:.4;cursor:not-allowed}
.tc-fix:hover{border-color:var(--accent)}
.tc-skip{color:var(--dim)!important}
.tc-send{margin-top:16px}
.tc-send button{width:100%;padding:15px;border-radius:var(--r);cursor:pointer;font:16px var(--sans);
  border:1px solid var(--good)}

.tc-done-hd{text-align:center;margin-bottom:12px}
.tc-done-hd b{font-size:17px}
.tc-find{font-size:12.5px;padding:8px 11px;border-radius:var(--r-sm);border:1px solid var(--warn);
  color:var(--warn);margin-bottom:6px;line-height:1.45}
.tc-find i{color:var(--warn);opacity:.8}

.tc-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.tc-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line)}
.tc-table th i{display:block;font-style:italic;text-transform:none;letter-spacing:0;font-size:10px}
.tc-table td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tc-table tbody tr{cursor:pointer}
.tc-table tbody tr:hover{background:var(--panel2)}
.tc-table .tc-by{font-size:11px;color:var(--dimmer);text-align:right}
.tc-dim{color:var(--dimmer)}

@media (max-width:520px){
  .tc-times{grid-template-columns:1fr}
  .tc-btns button{min-width:100%}
}

/* ═══════════ the network map, extended ═══════════
 * The web line is the whole point of this screen — it is what replaces opening
 * every address by hand — so it is the one that is coloured. */
.net-web{color:var(--accent);display:inline-block;margin-top:2px}
.net-find{color:var(--warn);display:inline-block;margin-top:2px;line-height:1.45}
.net-find i{font-style:normal;color:var(--dimmer);display:block}
.net-find.self-signed{color:var(--dimmer)}
.net-if{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dimmer);
  border:1px solid var(--line);border-radius:99px;padding:1px 7px;margin-left:5px}
.net-right{text-align:right;white-space:nowrap}
.net-right .bd-m{margin-top:5px}
.net-open{font-size:11px;color:var(--accent);margin-left:6px;text-decoration:none}
.net-open:hover{text-decoration:underline}
.net-pick{max-width:230px;font-size:12.5px}
.net-shot img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;display:block}
.net-shot .hint{margin-top:9px}
.net-rendered{font-size:13px;color:var(--accent);margin:9px 0 0}
/* .row elsewhere is display:block and the original netRow was short enough to
 * sit on one line. With the web line and the findings under it, the right-hand
 * column wrapped into the middle of a sentence — so this row gets its own
 * layout rather than changing .row for every other screen that uses it. */
.net-dev{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.net-dev > span:first-child{flex:1 1 auto;min-width:0}
.net-dev .net-right{flex:0 0 auto;text-align:right;line-height:1.7}
.net-dev .net-web,.net-dev .net-find,.net-dev .net-note{max-width:62ch}
.net-web i{font-style:normal;color:var(--dimmer);font-size:.88em;margin-right:3px}

/* The screen used to open on the ARP cache with no explanation, so on a machine
 * that had just been opened it showed three devices and looked broken. */
.net-notyet{border:1px solid var(--warn);border-radius:var(--r);padding:13px 15px;margin-bottom:12px}
.net-notyet b{color:var(--warn)}
.net-notyet span{display:block;font-size:13px;color:var(--dim);margin-top:5px;line-height:1.5}
.net-working{text-align:center;padding:46px 20px}
.net-working b{display:block;font-size:17px}
.net-working span{display:block;font-size:13.5px;color:var(--dim);margin:8px auto 0;max-width:46ch;
  line-height:1.55}
.net-elapsed{font:22px var(--mono);color:var(--accent);margin-top:18px!important}

/* ═══════════ the notepad, one block at a time ═══════════
 * Evan: "I AM SO OVERWHELMED LOOKING AT THAT LIST I JUST SCROLL AND SCROLL."
 * So this is deliberately roomy — one card, nothing under it to scroll to. */
.pad-focus{display:flex;flex-direction:column;gap:12px;padding:4px}
.pf-top{display:flex;align-items:center;justify-content:center;gap:14px}
.pf-count{font:12px var(--mono);color:var(--dimmer);letter-spacing:.06em;min-width:72px;
  text-align:center}
.pf-top .pad-btn{min-width:44px;font-size:18px;line-height:1;padding:6px 14px}
.pf-top .pad-btn[disabled]{opacity:.3;cursor:default}
.pf-card{cursor:default}
.pf-fenced{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent);
  margin-bottom:7px}
/* The whole block, not the one-line title — that is the point of a block. */
.pf-raw{white-space:pre-wrap;font-size:14.5px;line-height:1.55;margin-bottom:10px;
  max-height:46vh;overflow:auto}
.pf-hint{font-size:11.5px;color:var(--dimmer);text-align:center;line-height:1.5;margin:2px 0 0}
.pf-hint code{font:11.5px var(--mono);padding:1px 5px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}

/* ═══════════ the workspace ═══════════
 * The ground, not a modal. Helene's brief in BioForge was "Mac-clean, big
 * buttons, zero effects" and that is exactly right for a man who opens this
 * between jobs and needs to find one thing. */
.work{position:fixed;inset:0;overflow:auto;background:var(--bg);z-index:5}
.work[hidden]{display:none}
.ws-in{max-width:1080px;margin:0 auto;padding:44px 24px 90px}
.ws-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-bottom:30px}
.ws-head h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.5px}
.ws-tools{display:flex;gap:8px;align-items:center}
.ws-find{width:250px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:14px var(--sans)}
.ws-find:focus{outline:none;border-color:var(--accent)}
.ws-btn{padding:10px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:13.5px var(--sans);cursor:pointer}
.ws-btn:hover{border-color:var(--accent)}

.ws-group{margin-bottom:30px}
.ws-glabel{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--dimmer);
  font-weight:600;margin-bottom:10px}
.ws-glabel i{text-transform:none;letter-spacing:0;font-style:normal;font-weight:400;
  color:var(--dimmer);margin-left:10px;font-size:12px}
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}

/* Big buttons. Each one says what it does, because the whole complaint was
 * "I don't even know what literally 99% of it does exactly." */
.ws-tile{display:block;text-align:left;padding:15px 16px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;
  transition:border-color .12s,transform .12s}
.ws-tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.ws-tile:active{transform:none}
.ws-ico{display:block;font-size:21px;line-height:1;margin-bottom:9px}
.ws-tile b{display:block;font-size:14.5px;font-weight:600}
.ws-tile i{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:4px;
  line-height:1.45}
.ws-tile.mine{border-left:3px solid var(--accent)}
.ws-foot{font-size:12px;color:var(--dimmer);text-align:center;margin-top:34px}

.tbtn.home{font-size:16px}
.tbtn.home.on{background:var(--accent);color:var(--accent-ink)}

/* choosing what is on */
.ws-count{font-size:12.5px;color:var(--dim);margin:12px 0 4px}
.ct-group{margin-top:18px}
.ct-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dimmer);
  font-weight:600;margin-bottom:6px}
.ct-label i{text-transform:none;letter-spacing:0;font-style:normal;font-weight:400;
  margin-left:9px;font-size:12px}
.ct-row{display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:9px;
  cursor:pointer}
.ct-row:hover{background:var(--panel2)}
.ct-row.fixed{opacity:.72;cursor:default}
.ct-row input{margin-top:3px;flex:0 0 auto}
.ct-ico{font-size:15px;flex:0 0 auto;width:20px}
.ct-mid b{display:block;font-size:13.5px}
.ct-mid i{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:2px}
.ct-mid u{display:block;text-decoration:none;font-size:11.5px;color:var(--warn);margin-top:3px}

@media (max-width:620px){
  .ws-in{padding:28px 15px 70px}
  .ws-head h1{font-size:23px}
  .ws-find{width:100%}
  .ws-tools{width:100%}
  .ws-grid{grid-template-columns:1fr}
}

/* How old the invoice book is, said where its numbers are. */
.bk-age{font-size:12.5px;color:var(--dim);margin:2px 0 8px}
.bk-age.stale{color:var(--warn)}
.bk-age b{font-weight:600}

/* ═══════════ passkeys ═══════════ */
.w-passkey{margin-bottom:6px}
.w-or{font-size:12px;color:var(--dimmer);text-align:center;margin:8px 0}
.pk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.pk-row b{display:block;font-size:14px}
.pk-row span{display:block;font-size:12px;color:var(--dim);margin-top:2px}

/* ═══════════ Add invoice to RepairShopr ═══════════ */
.pad-btn.invoice{background:var(--good);border-color:var(--good);color:#04240f;font-weight:600}
.iv{display:flex;flex-direction:column;gap:4px}
.iv-l{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dimmer);
  font-weight:600;margin-top:10px}
.iv-l i{text-transform:none;letter-spacing:0;font-style:normal;font-weight:400;color:var(--dimmer);margin-left:8px}
.iv-l code{font:11px var(--mono);background:color-mix(in srgb,var(--ink) 9%,transparent);padding:1px 4px;border-radius:4px}
.iv-cust{position:relative}
.iv-partfind{position:relative;margin:6px 0}
.iv-partsave{margin-top:7px;font-size:12px;padding:6px 12px}
.iv-s b{font-weight:600}
.iv-s span{color:var(--dim);margin-left:6px}
.iv-s:hover span,.iv-s.on span{color:var(--accent-ink)}
.iv-suggest{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--panel2);
  border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);max-height:230px;overflow:auto;
  box-shadow:var(--shadow)}
.iv-s{padding:9px 12px;cursor:pointer;font-size:14px;transition:transform .12s ease,box-shadow .12s ease,background .1s ease;transform-origin:center}
.iv-s:hover,.iv-s.on{background:var(--accent);color:var(--accent-ink)}
/* The best match puffs up preemptively as you type, so the eye lands on it. */
.iv-s.on{transform:scale(1.035);font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.30);border-radius:6px;position:relative;z-index:1}

/* ── paste-a-list preview ── */
.pl-bar{display:flex;gap:8px;margin:0 0 8px}
.pl-prev{margin-top:12px;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}
.pl-prev:empty{display:none}
.pl-empty{padding:14px}
.pl-count{margin:0;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--dim);background:var(--panel)}
.pl-count b{color:var(--ink)}
.pl-grp{font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);
  padding:9px 12px 4px;border-top:1px solid var(--line)}
.pl-grp:first-of-type{border-top:0}
.pl-item{display:flex;align-items:baseline;gap:7px;padding:4px 12px;font-size:14px}
.pl-q{color:var(--accent);font-weight:700;flex:0 0 auto}
.pl-price{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}
.pl-need{margin-left:auto;font-size:12px;color:var(--warn)}
.iv-ok{margin-top:5px;font-size:13px;color:var(--good);font-weight:600}
.iv-ok .dim{color:var(--dim);font-weight:400}
.iv-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.iv-row > div{display:flex;flex-direction:column}
.iv-rate{display:flex;gap:6px}
.iv-rate .f{flex:1}
.iv-parts{min-height:70px;font:13px var(--mono);resize:vertical}
.iv-work{min-height:52px;resize:vertical}
.iv-preview{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.iv-tbl{width:100%;border-collapse:collapse;font-size:13px}
.iv-tbl td{padding:4px 6px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.iv-tbl td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.iv-tot{display:flex;justify-content:flex-end;gap:16px;margin-top:8px;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.iv-tot b{color:var(--navy,var(--ink))}
.iv-warn{color:var(--warn);font-size:13px;margin:6px 0 0}
@media (max-width:640px){ .iv-row{grid-template-columns:1fr} }

/* ═══════════ tech tickets ═══════════ */
.tt-who{font-size:13px;color:var(--dim);margin:0 0 6px}
.tt-ta{min-height:52px;resize:vertical}
.tt-fixed{display:flex;gap:8px;flex-wrap:wrap}
.tt-fx{flex:1;min-width:140px;padding:12px;border-radius:var(--r);cursor:pointer;font:14px var(--sans);
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.tt-fx:hover{border-color:var(--accent)}
.tt-fx.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tt-missing{color:var(--warn);font-size:13px;margin:12px 0 0;min-height:1.2em}
.tq-list{display:flex;flex-direction:column;gap:7px}
.tq-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);cursor:pointer}
.tq-row:hover{border-color:var(--accent)}
.tq-row.done{opacity:.6}
.tq-mid b{font-size:14.5px}
.tq-by{font-size:12px;color:var(--dim)}
.tq-sum{display:block;font-style:normal;font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.45}
.tq-right{text-align:right;white-space:nowrap}
.tq-flag{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--warn);color:#1b1500;padding:2px 7px;border-radius:99px}
.tq-status{display:block;font-size:11px;color:var(--dimmer);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.tq-summary{font-size:14.5px;line-height:1.55;margin:0 0 12px}

/* ── the incident board ── the clean look, full screen, responsive ── */
.icb-root{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden;font-family:var(--sans)}
.icb-root[hidden]{display:none}
.icb-load{padding:44px 22px;color:var(--dim);font-size:15px}
.icb-load.bad{color:var(--bad)}
.icb-bar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.icb-bar h2{margin:0;font-size:16px;font-weight:600;white-space:nowrap}
.icb-bar.present h2{font-size:22px}
.icb-titlewrap{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.icb-title{margin:0;font-size:26px;font-weight:800;letter-spacing:1.5px}
.icb-date{font-size:15px;font-weight:700;letter-spacing:1.2px;color:var(--accent)}
.icb-stat{color:var(--dim);font-size:13px;white-space:nowrap}
.icb-stat b{color:var(--ink);font-weight:700}
.icb-q{flex:0 1 340px;min-width:0;padding:7px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-size:14px}
.icb-q:focus{outline:none;border-color:var(--accent)}
.icb-sp{flex:1}
.icb-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-sm);padding:7px 13px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.icb-btn:hover{background:var(--raise);border-color:var(--dim)}
.icb-btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.icb-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px 18px;overflow:auto}
.icb-col{display:flex;flex-direction:column;min-height:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r)}
.icb-col-hd{flex:none;display:flex;justify-content:space-between;align-items:center;padding:10px 13px;
  border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.icb-col-hd b{color:var(--ink);font-weight:700}
.icb-col-hd span{background:var(--raise);border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--dim);font-size:11px}
.icb-col-body{flex:1;min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
.icb-card{text-align:left;display:block;width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 11px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.icb-card:hover{border-color:var(--accent);box-shadow:var(--bevel)}
.icb-cust{font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.icb-issue{font-size:13px;color:var(--ink);line-height:1.4;opacity:.86}
.icb-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.icb-chip{font-size:10.5px;letter-spacing:.03em;padding:3px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--raise);color:var(--dim)}
.icb-chip.own{color:var(--accent);border-color:var(--accent)}
.icb-chip.none{opacity:.6;font-style:italic}
.icb-chip.sched{color:#1c1f24;background:#cfe6ff;border-color:#8fc0f0;font-weight:600}
/* the scheduled date on the wall-display card */
.icb-psched{font-size:14px;font-weight:700;color:#0a4a86;margin-top:6px}
.icb-pcard.pri-emergency .icb-psched{color:#fff}
/* the date row in the incident detail */
.icb-sched{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.icb-sched .f{width:auto;flex:0 1 auto}
.icb-sched-to{color:var(--dim)}
.icb-empty{color:var(--dimmer);font-size:12px;padding:8px;text-align:center}
.icb-d-issue{font-size:16px;font-weight:600;margin:0 0 6px}
.icb-d-detail{color:var(--dim);white-space:pre-wrap;font-size:13px;line-height:1.5;margin:0 0 10px}
.icb-moves{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 6px}
.icb-move{padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);cursor:pointer;font-size:13px}
.icb-move.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.icb-present{flex:1;min-height:0;display:flex;gap:22px;padding:24px 28px;overflow:hidden}
.icb-pcol{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.icb-pcol-hd{flex:none;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:14px}
.icb-pcol-hd span{color:var(--dim);font-weight:400;font-size:16px}
.icb-pscroll{flex:1;min-height:0;overflow:hidden}
.icb-pcard{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:14px 16px;margin-bottom:12px}
.icb-pcust{font-size:19px;font-weight:700;line-height:1.2}
.icb-pissue{font-size:15.5px;margin-top:4px;line-height:1.4}
.icb-powner{font-size:13px;color:var(--dim);margin-top:7px}

/* ── Priority = the card background, so a glance across the room reads the room ── */
.icb-card.pri-low,       .icb-pcard.pri-low       { background:#cdeccd; border-color:#7fbf8a; }
.icb-card.pri-med,       .icb-pcard.pri-med       { background:#ffe6a1; border-color:#e0b544; }
.icb-card.pri-high,      .icb-pcard.pri-high      { background:#ffc389; border-color:#e0863c; }
.icb-card.pri-emergency, .icb-pcard.pri-emergency { background:#e02020; border-color:#a00000;
  animation:icbFlash 1s steps(1,end) infinite; }
@keyframes icbFlash { 0%,49%{ background:#ff3b3b; } 50%,100%{ background:#a30000; } }
@media (prefers-reduced-motion:reduce){ .icb-card.pri-emergency,.icb-pcard.pri-emergency{ animation:none; background:#d81f1f; } }
/* dark text on the bright fills, white on emergency */
.icb-card[class*="pri-"] .icb-cust, .icb-card[class*="pri-"] .icb-issue,
.icb-pcard[class*="pri-"] .icb-pcust, .icb-pcard[class*="pri-"] .icb-pissue { color:#14181f; }
.icb-pcard[class*="pri-"] .icb-powner { color:#3a444e; }
.icb-card.pri-emergency .icb-cust, .icb-card.pri-emergency .icb-issue,
.icb-pcard.pri-emergency .icb-pcust, .icb-pcard.pri-emergency .icb-pissue,
.icb-pcard.pri-emergency .icb-powner { color:#fff; }
.icb-card[class*="pri-"] .icb-chip { background:rgba(255,255,255,.62); border-color:rgba(0,0,0,.14); color:#2a323c; }
.icb-card.pri-emergency .icb-chip { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); color:#fff; }

/* ── Column show/hide chips ── */
.icb-coltoggle{display:flex;gap:5px;align-items:center}
.icb-ctog{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);cursor:pointer}
.icb-ctog.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.icb-ctog.off{opacity:.55;text-decoration:line-through}

/* ── Priority picker in the new/detail forms ── */
.icb-pripick{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
.icb-pri{padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--line);cursor:pointer;font-size:12.5px;color:#14181f}
.icb-pri.pri-low{background:#cdeccd}.icb-pri.pri-med{background:#ffe6a1}.icb-pri.pri-high{background:#ffc389}
.icb-pri.pri-emergency{background:#e02020;color:#fff}
.icb-pri:not(.on){opacity:.45;filter:saturate(.55)}
.icb-pri.on{opacity:1;outline:2px solid var(--ink);outline-offset:1px}

/* ── Board switcher (top-left): whose board, Main vs theirs ── */
.icb-switch{display:flex;align-items:center;gap:8px}
.icb-who{font-size:13px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-weight:600}
.icb-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
/* the private quick board, rendered inside the incident board's personal view */
.icb-quick{flex:1;min-height:0;overflow:auto;padding:12px 16px}
/* the one Field ticket door: two ways in, side by side */
.ft-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-opt{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2);padding:14px 16px;display:flex;flex-direction:column}
.ft-opt b{font-size:15.5px;margin-bottom:4px}
.ft-opt p{color:var(--dim);font-size:13.5px;margin:0 0 12px;flex:1}
@media (max-width:640px){ .ft-two{grid-template-columns:1fr} }
.icb-segbtn{font-size:12px;padding:6px 13px;border:none;background:var(--panel2);color:var(--dim);cursor:pointer}
.icb-segbtn.on{background:var(--accent);color:var(--accent-ink)}

/* ── Personal board: assigned list on the left, full detail pane on the right ── */
.icb-personal{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,360px) 1fr}
.icb-plist{min-height:0;overflow:auto;border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px}
.icb-prow{text-align:left;display:block;width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 11px;cursor:pointer;color:#14181f}
.icb-prow.sel{outline:2px solid var(--accent);outline-offset:1px}
.icb-prow-cust{font-weight:700;font-size:13.5px}
.icb-prow-issue{font-size:12.5px;margin-top:2px;line-height:1.35}
.icb-prow-meta{font-size:10.5px;margin-top:6px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.icb-pane{min-height:0;overflow:auto;padding:20px 24px}
.icb-pane-in{max-width:640px}
.icb-pane-issue{font-size:18px;font-weight:700;padding:10px 12px;border-radius:var(--r-sm);margin-bottom:10px;color:#14181f}
.icb-pane-issue.pri-emergency{color:#fff}

/* ── Customer profile (personal pane + card modal) ── */
.icb-detail-prof{margin-top:6px}
.icb-prof{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.icb-prof-name{font-size:16px;font-weight:700;color:var(--ink)}
.icb-prof-poc{font-size:12.5px;color:var(--dim);margin-top:2px}
.icb-prof-loc{font-size:12.5px;color:var(--ink);margin-top:8px;line-height:1.4}
.icb-prof-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);margin:14px 0 6px}
.icb-sys{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.icb-syschip{font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);cursor:pointer}
.icb-syschip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.icb-sys-state{font-size:11px;color:var(--dimmer);font-style:italic;margin-left:4px}
.icb-invacc{margin-top:16px}
.icb-invacc summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)}
.icb-invlist{margin-top:8px;max-height:210px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.icb-invrow{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 9px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line)}
.icb-invrow.open{border-left:3px solid var(--warn)}
.icb-invrow.paid{opacity:.72}
.icb-paid{color:var(--good);font-size:10px;text-transform:uppercase;font-weight:700}
@media (max-width:760px){ .icb-personal{grid-template-columns:1fr;grid-template-rows:auto 1fr} .icb-plist{border-right:none;border-bottom:1px solid var(--line);max-height:38vh} }

@media (max-width:980px){ .icb-cols{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .icb-cols{grid-template-columns:1fr} .icb-q{flex-basis:120px} .icb-present{flex-wrap:wrap;overflow:auto} }

/* ── the lightning damage estimator ── clean form + printable certificate ── */
.lt-root{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden;font-family:var(--sans)}
.lt-root[hidden]{display:none}
.lt-bar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.lt-bar h2{margin:0;font-size:16px;font-weight:600;white-space:nowrap}
.lt-sub{color:var(--dim);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lt-sp{flex:1}
.lt-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);
  padding:7px 13px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.lt-btn:hover{background:var(--raise);border-color:var(--dim)}
.lt-btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lt-btn.wide{width:100%;margin-top:10px}
.lt-scroll{flex:1;min-height:0;overflow:auto}
.lt-form{max-width:760px;margin:0 auto;padding:22px 20px 60px}
.lt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lt-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--dim)}
.lt-form label i{font-style:normal;color:var(--dimmer);font-size:11.5px}
.lt-form .f{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);font:400 14px var(--sans);padding:8px 10px}
.lt-form .f:focus{outline:none;border-color:var(--accent)}
.lt-sys-head{margin:22px 0 10px;display:flex;flex-direction:column;gap:2px}
.lt-sys-head b{font-size:15px;color:var(--ink)}
.lt-sys-head span{font-size:12.5px;color:var(--dim)}
.lt-sys{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.lt-sys-top{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.lt-type{flex:1}
.lt-x{flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel2);color:var(--dim);cursor:pointer;font-size:13px}
.lt-x:hover{color:var(--bad);border-color:var(--bad)}
.lt-overall{margin-top:18px}
/* the certificate, on screen — a clean sheet centred on the grey ground */
.lt-cert{max-width:720px;margin:24px auto;background:#fff;color:#141414;
  border:1px solid var(--line);border-radius:var(--r);padding:44px 48px;
  box-shadow:0 12px 40px rgba(20,28,45,.14);line-height:1.6}
.lt-lh{text-align:center;border-bottom:2px solid #141414;padding-bottom:12px;margin-bottom:20px}
.lt-co{font-size:21px;font-weight:700;letter-spacing:.01em}
.lt-li,.lt-ct{font-size:12px;color:#555}
.lt-ct{margin-top:3px}
.lt-title{font-size:19px;text-align:center;margin:18px 0;color:#141414}
.lt-to{font-size:13px;margin:0 0 18px}
.lt-to div{margin:2px 0}
.lt-cert .lt-p{margin:0 0 13px;font-size:14px}
.lt-h2{font-size:15px;border-bottom:1px solid #ccc;padding-bottom:5px;margin:22px 0 12px;color:#141414}
.lt-find{margin:0 0 15px}
.lt-find h3{font-size:14px;margin:0 0 5px;color:#141414}
.lt-find p{margin:0 0 6px;font-size:14px}
.lt-op{color:#3a3a3a;font-style:italic}
.lt-sign{margin-top:38px}
.lt-sigline{border-top:1px solid #141414;width:270px;margin-bottom:6px}
.lt-signer{font-weight:600}
.lt-sigdate{font-size:12px;color:#555}
.lt-disc{font-size:11px;color:#666;margin-top:24px;border-top:1px solid #eee;padding-top:11px}
@media (max-width:640px){ .lt-grid{grid-template-columns:1fr} .lt-cert{padding:28px 22px} }
/* printing shows ONLY the certificate - the app chrome and the bar drop away.
 *
 * ONLY WHILE THE CERTIFICATE IS OPEN (body.lt-open). This rule shipped on 15
 * September 2026 without that condition, and "hide everything that is not the
 * lightning certificate" then applied to every print in the app: a proposal's
 * Print / PDF came out as a blank page for three days. Found on the 18th while
 * measuring the clean document style. A print rule that hides things must
 * always be scoped to the screen that owns it. */
@media print{
  body.lt-open>*:not(#ltRoot){display:none!important}
  #ltRoot{position:static!important;overflow:visible!important;background:#fff!important}
  #ltRoot .lt-bar{display:none!important}
  #ltRoot .lt-scroll{overflow:visible!important}
  .lt-cert{border:0!important;box-shadow:none!important;margin:0 auto!important;max-width:none!important}
}

/* ── fleet maintenance ── clean console, responsive capsules ── */
.fl-root{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden;font-family:var(--sans)}
.fl-root[hidden]{display:none}
.fl-load{padding:44px 22px;color:var(--dim)} .fl-load.bad{color:var(--bad)}
.fl-block{padding:40px 24px;color:var(--dim);font-size:15px;line-height:1.6;max-width:560px}
.fl-block small{color:var(--dimmer)}
.fl-bar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.fl-bar h2{margin:0;font-size:16px;font-weight:600;white-space:nowrap}
.fl-sub{color:var(--dim);font-size:13px}
.fl-sp{flex:1}
.fl-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);
  padding:7px 13px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.fl-btn:hover{background:var(--raise);border-color:var(--dim)}
.fl-btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fl-scroll{flex:1;min-height:0;overflow:auto;padding:18px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-content:start}
.fl-empty{color:var(--dimmer);font-size:12.5px;padding:8px}
.fl-empty.big{padding:44px;text-align:center;font-size:15px;grid-column:1/-1}
.fl-veh{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column}
.fl-veh-hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fl-veh-hd b{font-size:15.5px}
.fl-org{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px}
.fl-worst{font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.fl-worst.ok{color:var(--good);border-color:var(--good)} .fl-worst.warn{color:var(--warn);border-color:var(--warn)}
.fl-worst.bad{color:var(--bad);border-color:var(--bad)}
.fl-mile{font-size:12px;color:var(--dim);margin:6px 0 10px}
.fl-items{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.fl-item{display:flex;align-items:center;gap:8px;font-size:12.5px;flex-wrap:wrap}
.fl-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dim)}
.fl-dot.ok{background:var(--good)} .fl-dot.warn{background:var(--warn)} .fl-dot.bad{background:var(--bad)} .fl-dot.dim{background:var(--dimmer)}
.fl-lbl{color:var(--ink);font-weight:500}
.fl-due{color:var(--dim)} .fl-due.warn{color:var(--warn)} .fl-due.bad{color:var(--bad)} .fl-due.ok{color:var(--good)}
.fl-every{color:var(--dimmer);margin-left:auto;white-space:nowrap}
.fl-int{width:54px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--ink);font-size:12px;padding:2px 5px;text-align:right}
.fl-mini{background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--ink);font-size:11.5px;padding:3px 8px;cursor:pointer}
.fl-mini:hover{border-color:var(--accent)}
.fl-veh-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center;border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
.fl-x{width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2);color:var(--dim);cursor:pointer}
.fl-x:hover{color:var(--bad);border-color:var(--bad)}
.fl-hist{margin-top:11px;border-top:1px dashed var(--line);padding-top:9px;display:flex;flex-direction:column;gap:6px}
.fl-le{font-size:12px;color:var(--ink);display:flex;gap:8px}
.fl-le-date{color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
@media (max-width:560px){ .fl-scroll{grid-template-columns:1fr;padding:12px} }
/* guided photo capture on a check */
.fl-shots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 14px}
.fl-shot{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.fl-shot-th{width:100%;aspect-ratio:1/1;border:1.5px dashed var(--line);border-radius:var(--r-sm);
  background:var(--panel2) center/cover no-repeat;display:grid;place-items:center;color:var(--dimmer);font-size:19px}
.fl-shot-th::before{content:'📷'}
.fl-shot-th.has{border-style:solid;border-color:var(--accent)}
.fl-shot-th.has::before{content:''}
.fl-shot-th.busy{opacity:.45}
.fl-shot-lbl{font-size:11px;color:var(--dim);text-align:center;line-height:1.2}
.fl-le{flex-direction:column;align-items:stretch;gap:6px}
.fl-le-row{display:flex;gap:8px}
.fl-le-ph{display:flex;gap:6px;flex-wrap:wrap}
.fl-le-ph img{width:54px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
@media (max-width:420px){ .fl-shots{grid-template-columns:repeat(3,1fr)} }

/* ---- purchase orders ---- */
.po-list,.po-lines{width:100%;border-collapse:collapse}
.po-list th,.po-lines th{text-align:left;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted,#8a93a3);padding:6px 8px}
.po-list td{padding:10px 8px;border-top:1px solid var(--line,rgba(128,128,128,.25))}
.po-list tbody tr{cursor:pointer}.po-list tbody tr:hover{background:rgba(128,128,128,.1)}
.po-list .r,.po-lines .r{text-align:right}.po-cancelled td{opacity:.5;text-decoration:line-through}
.po-chip{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid currentColor;opacity:.85}
.po-head{display:flex;gap:12px;align-items:baseline;margin-bottom:12px;font-size:17px}
.po-grid{display:grid;grid-template-columns:2fr 1fr;gap:10px 14px;margin-bottom:16px}
.po-f{display:flex;flex-direction:column;gap:4px;font-size:12px}.po-f span{opacity:.7}
.po-in{width:100%;min-height:40px;padding:8px 10px;font:inherit;font-size:15px;color:inherit;
  background:rgba(128,128,128,.12);border:1px solid rgba(128,128,128,.35);border-radius:7px}
.po-in:focus{outline:2px solid var(--accent,#2f6fdf);outline-offset:0}
.po-lines td{padding:3px 4px}.po-lines td:nth-child(1){width:74px}.po-lines td:nth-child(2){width:150px}
.po-lines td:nth-child(4){width:112px}.po-lines td:nth-child(5){width:104px;font-variant-numeric:tabular-nums}
.po-money{text-align:right}.po-x{width:36px;height:36px;border:0;background:none;color:inherit;font-size:20px;opacity:.55;cursor:pointer}
.po-x:hover{opacity:1}#poAddLine{margin:8px 0 16px}
.po-bottom{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:start}
.po-tot>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0}
.po-tot .po-in{width:120px}.po-grand{border-top:2px solid currentColor;margin-top:6px;padding-top:8px!important;font-size:18px}
.po-status{width:auto;min-height:36px;margin:0 6px}
@media (max-width:720px){.po-grid,.po-bottom{grid-template-columns:1fr}.po-lines td:nth-child(2){width:96px}}

.po-signed{color:#1f9d55;margin-left:6px}.po-sigstate{margin:0 auto 0 10px}

/* the Open list: a row is a click target, so its Duplicate button sits clear of the text */
.list .row{align-items:center}.list .row .pp-dup{margin-left:12px;flex:none;min-height:36px}

/* the Organization line's "did you mean" */
.tt-dym{margin:6px 0 10px;font-size:14px;line-height:1.6}.tt-dym-q{opacity:.8}
.tt-dym-b{font:inherit;font-weight:600;color:var(--accent,#2f6fdf);background:color-mix(in srgb,var(--accent,#2f6fdf) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2f6fdf) 40%,transparent);border-radius:999px;padding:4px 12px;margin:2px 2px;cursor:pointer;min-height:36px}
.tt-dym-b:hover{background:color-mix(in srgb,var(--accent,#2f6fdf) 22%,transparent)}
.tq-flag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b4770c;background:#fdf0d5;border-radius:4px;padding:1px 6px;margin-left:6px}