/* The hidden attribute always hides, even on elements whose class sets a
   display (the item bulk bar, tab badges, pop menus). */
[hidden]{display:none!important}
:root{
  --bg:#f3f2ef; --surface:#fff; --surface-2:#faf9f7;
  --ink:#191919; --muted:#7a7873; --line:#e7e5e0;
  --dark:#1c1c1c; --accent:#0b5f59; --accent-ink:#073d3a;
  /* the accent: deep teal, with coral for the small things that should catch the eye */
  --accent-dark:#073d3a; --accent-light:#5faea5; --accent-soft:#e2efed; --pop:#c4492f;
  --ok-bg:#e7f4ea; --ok-ink:#1f6b38; --warn-bg:#fdf1d6; --warn-ink:#8a6410; --bad-bg:#fbe6e4; --bad-ink:#9a2b22;
  --info-bg:#e5eef8; --info-ink:#2a5588;
  --r-card:14px; --r-ctl:10px;
  --shadow:0 1px 2px rgba(20,18,14,.04), 0 10px 30px -16px rgba(20,18,14,.14);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1{font-size:28px;line-height:1.15;margin:0;letter-spacing:-.02em;font-weight:800}
h2{margin:0;font-size:19px;font-weight:750;letter-spacing:-.01em}
h3{margin:0 0 10px;font-size:15px;font-weight:750}
p,.subtle{color:var(--muted);margin:6px 0}
a{color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

button{border:0;background:var(--dark);color:#fff;padding:10px 16px;border-radius:999px;font:inherit;font-weight:650;cursor:pointer;transition:transform .06s ease,opacity .15s ease,background .15s ease}
button:hover{opacity:.92}
button:active{transform:translateY(1px)}
button.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
button.ghost:hover{background:var(--surface-2);opacity:1}
button.accent{background:var(--accent);color:var(--accent-ink)}
button.link{background:none;border:0;color:var(--muted);padding:0;font-weight:650;border-radius:0}
button.link:hover{color:var(--ink);opacity:1}
button.icon{background:none;color:var(--ink);font-size:22px;line-height:1;padding:4px 8px;border-radius:10px}
button.icon:hover{background:var(--surface-2);opacity:1}
button.row-del{background:none;color:var(--bad-ink);padding:4px 8px;font-size:13px;border-radius:8px;font-weight:600}
button.row-del:hover{background:var(--bad-bg);opacity:1}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px;position:sticky;top:0;z-index:20}
.brand{font-weight:850;font-size:24px;letter-spacing:-.03em;line-height:1}
.dot{color:var(--accent)}
.tag{font-weight:500;font-size:12px;color:var(--muted)}

.app{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 60px)}
#sidebar{background:var(--surface);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:14px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
/* Section groups collapse (renderSidebar); all start collapsed. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:transparent;color:#4a4843;padding:7px 10px;border-radius:9px;font-weight:600;font-size:13px}
.nav:hover{background:var(--surface-2);color:var(--ink);opacity:1}
.nav.active{background:var(--ink);color:#fff}
.nav-group{display:flex;flex-direction:column;gap:1px}
.nav-label{margin:0 0 4px;padding:0 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.nav-spacer{flex:1}
.nav-group.minor .nav{color:var(--muted)}
.nav-group.minor .nav.active{color:#fff}
.nav-field{font-size:12.5px;color:var(--muted);padding:8px 10px;border:1px dashed var(--line);border-radius:9px;text-decoration:none;display:flex;justify-content:space-between}
.nav-field:hover{color:var(--ink);border-color:var(--muted)}
.nav-att{width:7px;height:7px;border-radius:50%;background:var(--warn-ink);flex:0 0 auto}
.nav.active .nav-att{background:var(--accent)}
main{padding:26px 30px;min-width:0}

.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.form-card{padding:20px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.wo-matrix{max-width:420px}
.wo-matrix th,.wo-matrix td{padding:6px 10px;font-size:12.5px}
.wo-matrix th:not(:first-child){text-align:center}
tbody tr:last-child td{border-bottom:0}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--surface-2)}
/* Gentle zebra for the plain list tables (catalogue, estimates, RFQ vendors). */
.card > table tbody tr:nth-child(even) > td,
#cat-tab-parts tbody tr:nth-child(even) > td,
#cat-tab-assemblies tbody tr:nth-child(even) > td{background:var(--surface-2)}
.row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:nowrap;white-space:nowrap}

.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--shadow)}
.stat-card.highlight{background:var(--ink);color:#fff}
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:6px}
.stat-card.highlight .stat-label{color:#c9c6c0}
.stat-value{font-size:21px;font-weight:800;letter-spacing:-.01em}
/* A stat tile that's also a quick-edit control (status/priority/assignee/
   due date) — reads as plain stat text until hovered/focused, so the
   summary row stays the summary row, not a form, while still being a
   one-click edit instead of a trip through a modal. */
.stat-value select.stat-select,.stat-value input.stat-select{font:inherit;font-size:15px;font-weight:800;border:1px solid transparent;border-radius:8px;padding:2px 18px 2px 4px;margin:-2px -4px;background:transparent;width:100%;max-width:100%;cursor:pointer;color:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.stat-value input[type=date].stat-select{padding-right:4px}
.stat-value select.stat-select:hover,.stat-value input.stat-select:hover{border-color:var(--line);background:var(--surface-2)}
.stat-value select.stat-select:focus,.stat-value input.stat-select:focus{outline:0;border-color:var(--ink);background:var(--surface);box-shadow:none}
.stat-sub{font-size:11px;color:var(--muted);margin-top:3px}
.stat-card.highlight .stat-sub{color:#c9c6c0}

/* Page tabs: an underlined row across the page. A count or state can ride
   on a tab as <span class="tab-badge [warn|ok|info]">. */
/* Scrolls sideways when the tabs don't fit, without showing a scrollbar
   (it showed as a little up/down scroller at the end of the row). */
.tabs{display:flex;gap:2px;margin:16px 0 18px;border-bottom:1px solid var(--line);max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar,.subnav::-webkit-scrollbar{display:none}
.subnav{scrollbar-width:none}
.tab{background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;padding:10px 14px;font-size:13.5px;white-space:nowrap;font-weight:650;display:inline-flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink);opacity:1}
.tab.active{color:var(--ink);border-bottom-color:var(--accent-dark)}
.tab-badge{font-size:11px;font-weight:700;border-radius:99px;padding:0 7px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.tab-badge.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
.tab-badge.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.tab-badge.info{background:var(--info-bg);border-color:transparent;color:var(--info-ink)}
.tabs.sub{margin:0 0 14px;border-bottom:0;gap:4px}
.tabs.sub .tab{padding:6px 13px;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;margin-bottom:0}
.tabs.sub .tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}

input,select,textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px 11px;background:var(--surface);font:inherit;color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease}
/* number inputs use step="1" so the spinner moves a whole digit; decimals
   typed by hand are still fine — don't flag them as invalid. */
input[type=number]:invalid{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(25,25,25,.06)}
textarea{min-height:80px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:0}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:650}
.field.full{grid-column:1/-1}
/* Modal forms are one uniform column, not a left/right grid. */
#modalBody .form-grid{grid-template-columns:minmax(0,1fr);gap:13px}
#modalBody .form-grid .field.full{grid-column:auto}
/* A modal that only holds a single-column form doesn't need the full width. */
.modal-card:has(#modalBody > .form-grid:only-child){width:min(500px,100%)}
/* Escape hatch for a long form (10+ fields) that's genuinely too cramped as
   one column stacked to 500px — .two-col keeps the modal's usual "one form,
   no width" simplicity but lays fields out two per row instead of a long
   single-file scroll. */
#modalBody .form-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
#modalBody .form-grid.two-col .field.full{grid-column:1/-1}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
#modalBody .form-grid .field-hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.modal-card:has(#modalBody .form-grid.two-col){width:min(700px,100%)}
/* Card content under a group-head lines up with the header's inset. */
.card > .group-head ~ .row,
.card > .group-head ~ p{padding-left:16px;padding-right:16px}
/* Preferred going forward (see DESIGN.md): one explicit padded wrapper for
   everything under a group-head, instead of the bare sibling-selector rule
   above, which only ever padded left/right and left every card's bottom
   edge touching its last row of content. */
.card-body{padding:16px}
.group-head.sub{background:transparent;border-bottom:0;padding:0;cursor:default;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.pipeline{display:flex;flex-wrap:wrap;gap:8px}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.form-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:11.5px;font-weight:650;color:var(--muted)}
.badge.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.badge.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
.badge.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink)}
.badge.info{background:var(--info-bg);border-color:transparent;color:var(--info-ink)}
.banner{padding:10px 16px;border-radius:var(--r-card);font-size:13px;font-weight:600}
.banner.warn{background:var(--warn-bg);color:var(--warn-ink)}

/* the page behind an open popup stays put */
html:has(#modal:not(.hidden)),html:has(#modal:not(.hidden)) body{overflow:hidden}
.modal{position:fixed;inset:0;background:rgba(20,18,14,.32);display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px;z-index:100;overflow:auto}
/* overflow:visible so a combobox dropdown inside the modal can extend past
   the card edge instead of being clipped. The .modal wrapper scrolls. */
.modal-card{width:min(820px,100%);background:var(--surface);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);overflow:visible}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
/* Confirm / prompt dialogs */
.confirm-card{width:min(420px,100%);padding:22px}
.confirm-body{font-size:14.5px;line-height:1.55}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.prompt-input{margin-top:14px}
button.danger{background:var(--bad-ink);color:#fff}
button.danger:hover{opacity:.92}
#modalBody{padding:22px}

/* Uniform assignment rows in the mapping modal — one compact row per line,
   not a stacked 2-column form (that's what made it feel clunky). */
.assignment{display:grid;grid-template-columns:110px 1fr 52px 84px 84px 76px 58px;gap:8px;align-items:center;margin-bottom:8px}
.asg-actions{display:flex;align-items:center;gap:2px;justify-content:flex-end;margin-left:4px}
button.row-edit{background:none;color:var(--muted);padding:3px 4px;font-size:13px;border-radius:8px;font-weight:600;line-height:1;display:flex;align-items:center}
button.row-edit svg{display:block}
button.row-edit:hover{color:var(--ink);background:var(--surface-2)}
.assignment-head{margin-bottom:4px}
.assignment-head span{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:900px){.assignment{grid-template-columns:1fr 1fr}}

/* Uniform takeoff/group tables — a shared colgroup means every group's
   table lines up in the same columns regardless of its own content width. */
.group-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.group-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.group-head:hover{background:#f2f0eb}
.card > .group-head > span:first-child,.group-card > .group-head > span:first-child{font-weight:700}
.card > .group-head > span.subtle:first-child,.group-card > .group-head > span.subtle:first-child{font-weight:500}
.group-chevron{display:inline-block;width:14px;color:var(--muted);font-size:11px}
/* On a narrow container the fixed column widths can't all fit — instead of
   crushing columns to nothing and letting the actions cell spill past the
   card's rounded corner, the table keeps a min-width and the card scrolls
   it horizontally. */
.table-scroll{overflow-x:auto}

/* Table filter bar + sortable headers (Jobs list, and reusable elsewhere). */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.filter-bar input,.filter-bar select{width:auto;flex:0 0 auto;padding:7px 10px;font-size:13px}
.filter-bar .fb-search{flex:0 1 300px;min-width:180px}
.filter-bar .fb-status{max-width:150px}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}

/* Jobs list */
.jobs-table td,.jobs-table th{padding:8px 12px}
.jobs-table .j-num{color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.jobs-table .j-name{font-weight:700}
.jobs-table .j-sub{color:var(--muted);font-size:12px;margin-top:1px}
.jobs-table .x-cell{text-align:right;white-space:nowrap}
.jobs-more{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.uniform-table{table-layout:fixed;width:100%;min-width:720px}
.uniform-table col.c-dot{width:26px}
.uniform-table col.c-layer{width:22%}
.uniform-table col.c-map{width:auto}
.uniform-table col.c-num{width:120px}
.uniform-table col.c-uom{width:66px}
.uniform-table col.c-del{width:34px}
.uniform-table td.layer-name{word-break:break-word;font-weight:600}
.uniform-table td.qty-cell{text-align:right}
.uniform-table .qty-input{max-width:120px}
/* Dot and × stay level with the first line of the layer name (top), not
   centred against a tall stack of mapping chips. */
.uniform-table td.dot-cell{text-align:center;vertical-align:top;line-height:0;padding-top:14px;padding-left:12px;padding-right:0}
.uniform-table td.x-cell{text-align:center;vertical-align:top;line-height:0;padding-top:11px;padding-left:0;padding-right:8px}
.uniform-table td.dot-cell .status-dot,.uniform-table td.x-cell .x-del{vertical-align:top}

/* Mapped/unmapped indicator — a dot on the left instead of a Status column. */
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.status-dot.ok{background:var(--ok-ink)}
.status-dot.warn{background:var(--warn-ink)}

/* Small red × delete button. */
.x-del{background:none;border:0;color:var(--bad-ink);font-size:17px;line-height:1;padding:2px 6px;border-radius:8px;cursor:pointer;font-weight:600}
.x-del:hover{background:var(--bad-bg);opacity:1}

/* "Mapped to" cell — one clickable chip per row, stacked. */
.map-cell{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;max-width:100%}
.map-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.map-chip:hover{background:#eef4f0;border-color:var(--ok-ink);opacity:1}
.map-chip.none{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink);font-weight:650}
.map-chip.none:hover{background:#fbe6b8}
.map-chip .fac{color:var(--muted);font-weight:500}
.map-chip .kind{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 3px}

/* Estimate Items — one card per package (like the Takeoff groups), each with
   its own repeated headers. Fixed layout + shared colgroup so every card's
   table lines up. */
.items-table{table-layout:fixed;width:100%;min-width:1120px}
.items-table th,.items-table td{padding:9px 14px;vertical-align:top}
.items-table td.money{white-space:nowrap;text-align:right}
.items-table td.num-cell{white-space:nowrap}
.items-table .num-in{width:100%;max-width:150px;padding:7px 9px}
.items-table .th-sub{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.items-table col.ic-dot{width:20px}
.items-table col.ic-chk{width:38px}
.items-table col.ic-item{width:24%}
.items-table col.ic-qty{width:11%}
.items-table col.ic-cost{width:12%}
.items-table col.ic-lab{width:11%}
.items-table col.ic-lock{width:56px}
.items-table col.ic-mat{width:12%}
.items-table col.ic-labour{width:12%}
.items-table col.ic-src{width:6%}
.items-table col.ic-x{width:34px}
.items-table td.x-cell{text-align:center;vertical-align:middle}
.item-cell{word-break:break-word}
.item-name-btn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;border-radius:0}
.item-name-btn:hover{color:var(--ok-ink);text-decoration:underline;opacity:1}
.item-meta{font-size:11px;color:var(--muted);margin-top:2px}
.item-desc{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:2px}
.item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag-chip{display:inline-flex;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 3px 1px 8px;font-size:10.5px;font-weight:600;color:var(--muted);cursor:pointer}
.tag-chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:0 4px;border-radius:999px}
.tag-chip button:hover{color:var(--bad-ink)}
.item-risk{font-size:11px;color:var(--bad-ink);margin-top:3px;font-weight:600}
.item-alloc{font-size:11px;margin-top:3px}
.bad-ink{color:var(--bad-ink);font-weight:650}
/* job materials table: quantities read across, one status chip per PO / pick slip */
.mat-table td.money{white-space:nowrap}
.mat-table .mat-req{width:72px;max-width:72px;padding:5px 7px;text-align:right}
.mat-status{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
button.mat-chip{cursor:pointer;font:inherit;font-size:inherit}
.cp-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 4px 24px}
.cp-line .check-row{flex:1;min-width:0}
.cp-qty{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.cp-qty .num-in{width:76px;padding:5px 7px;text-align:right}
/* Tag parts to a work order: phase > package > part, qty inline */
.modal-card:has(#wt-list){width:min(640px,100%)}
.wt-search{width:100%;margin-bottom:10px}
.wt-list{max-height:min(460px,58vh);overflow:auto;border:1px solid var(--line);border-radius:10px}
.wt-phase + .wt-phase{border-top:1px solid var(--line)}
.wt-phase-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.wt-phase-name{font-weight:700;font-size:13.5px}
.wt-count{margin-left:auto;font-size:12px}
.wt-pkg{padding:6px 12px 8px}
.wt-pkg-name{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:4px 0}
.wt-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 6px 5px 22px;border-radius:8px}
.wt-line.sel{background:var(--surface-2)}
.wt-line .check-row{flex:1;min-width:0}
.wt-sub{display:block;font-size:11.5px;font-weight:500}
@media (max-width:600px){.wt-line{padding-left:6px}.wt-list{max-height:none;border:0}}

/* Job Timeline tab — phases as rows, work order visit dates as bars. */
/* Zebra striping — highlighted / locked rows still win. */
.items-table tbody tr.zebra>td{background:var(--surface-2)}
.items-table tbody tr.locked-row>td{background:#f0efec}
/* Edited indicator — a dot on the left, level with the item title, instead
   of a yellow row highlight (matches the Takeoff table's dot-cell). */
.items-table td.dot-cell{text-align:center;vertical-align:top;line-height:0;padding-top:13px;padding-left:14px;padding-right:0}
.items-table td.dot-cell .status-dot{vertical-align:top}

/* Package card header (extends the Takeoff .group-head). */
.group-head.pkg-head{cursor:default;flex-wrap:wrap}
.pkg-head-left,.pkg-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chev-btn{background:none;border:0;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:6px}
.chev-btn:hover{background:var(--surface);opacity:1}
.pkg-name{font-weight:750;max-width:220px;padding:6px 9px}
.pkg-pricing{width:auto;padding:5px 7px;font-size:12px}
.pkg-lump{max-width:120px}
.empty-pkg{padding:14px 16px}

/* Locked row: quantity / unit cost / unit labour are frozen and greyed. */
.items-table tr.locked-row .num-in:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed;border-style:dashed}
.items-table tr.locked-row td.money{color:var(--muted)}
/* Inline category / sub-category pickers in the items table. */
.items-table .cell-sel{padding:6px 6px;font-size:12px;background:transparent;border-color:transparent}
.items-table .cell-sel:hover{border-color:var(--line);background:var(--surface)}
.items-table td{vertical-align:top}
/* "what the catalogue says" hint under an overridden Qty / Unit Cost /
   Unit Labour field. */
.cat-ref{font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap}

.search-results{border:1px solid var(--line);border-radius:12px;margin-top:8px;overflow:hidden}
.search-scroll{max-height:min(60vh,440px);overflow:auto}
.search-result{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.search-result:last-child{border-bottom:0}
.search-result:hover,.search-result.active{background:var(--surface-2)}
.search-result.active{box-shadow:inset 3px 0 0 var(--ink)}
/* Always-visible "+ Add new" pinned under the scrolling result list. */
.search-add{padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-2);font-weight:650;cursor:pointer;color:var(--ink)}
.search-add:hover{background:#eef4f0}

.combo{position:relative}
.combo .search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:340px;background:var(--surface);box-shadow:var(--shadow);z-index:60;margin-top:0}

.overridden{background:#fff8e1}

/* Settings — editable option lists. */
.chip-edit{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.edit-chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:2px 3px 2px 10px}
.edit-chip input{border:0;background:transparent;padding:3px 2px;font-size:12px;font-weight:600;width:auto;min-width:32px;field-sizing:content}
.edit-chip input:focus{outline:0;box-shadow:none}
.edit-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 7px;border-radius:999px}
.edit-chip button:hover{color:var(--bad-ink)}
.cat-block{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.cat-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cat-name{max-width:260px;font-weight:750;font-size:14px}
.source-list{font-size:12px;color:var(--muted)}
.upload-btn{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:var(--surface);font-size:13px;font-weight:650;cursor:pointer}
.upload-btn:hover{background:var(--surface-2)}

/* RFQ suite */
.rfq-title{font-size:22px;font-weight:800;letter-spacing:-.01em;border:1px solid transparent;border-radius:10px;padding:4px 8px;max-width:520px;width:100%}
.rfq-title:hover{border-color:var(--line)}
.inline-field{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:650}
.inline-field select,.inline-field input{width:auto;padding:6px 8px;font-size:13px}
.check-list{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;padding:10px;max-height:230px;overflow:auto}
.check-list.tall{max-height:320px}
.check-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:550}
.check-row input{width:auto}
.check-row.is-disabled{color:var(--muted);cursor:not-allowed}
.check-row.is-disabled input{cursor:not-allowed}

/* Estimate "Pricing settings" card: a tight row of rate fields instead of
   two giant full-width grid columns, and normal-sized (not full-width)
   action buttons. */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,170px));gap:14px;padding:16px}
.pricing-grid .field input{max-width:170px}
.pricing-override{padding:0 16px 16px;flex-wrap:wrap;row-gap:8px}
.pricing-override input[type=number]{width:110px;flex:none}
.pricing-actions{padding:0 16px 16px}
.pricing-actions button{width:auto}
.award-pill{display:inline-flex;align-items:center;gap:3px;background:var(--ok-bg);color:var(--ok-ink);border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.best-cell{background:var(--ok-bg)}
.awarded-cell{outline:2px solid var(--ok-ink);outline-offset:-2px}
.award-sel{font-size:12px;padding:6px 8px;max-width:180px}
.rfq-pkg-row>td{background:var(--surface-2);border-top:2px solid var(--line)}
.rfq-pkg-row>td:first-child{font-weight:700}
.rfq-child-row>td:first-child{padding-left:26px;position:relative}
.rfq-child-row>td:first-child::before{content:'└';position:absolute;left:10px;color:var(--muted)}
.rfq-grid{table-layout:fixed;width:100%}
.rfq-grid td,.rfq-grid th{word-break:break-word;overflow:hidden}
.rfq-grid .award-sel{width:100%;max-width:100%}
.rfq-grid th{white-space:normal;line-height:1.25;vertical-align:bottom}
.rfq-grid td.money,.rfq-grid th.money{text-align:right}
.rfq-grid td.x-cell{padding:8px 4px;text-align:center;overflow:visible}
.rfq-subtotal-row>td{border-top:2px solid var(--line);background:var(--surface-2)}
table tfoot td{border-top:2px solid var(--line);padding:10px 16px}
/* group-head with a right-side summary */
.group-head{flex-wrap:wrap}
.group-head .pkg-head-right{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;font-weight:400;margin-left:auto}
.group-head .pkg-head-right .subtle{white-space:normal}

#toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;display:none;z-index:200;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);font-weight:550;max-width:min(420px,calc(100vw - 40px))}

/* Work order checklist items */
.wo-list{display:flex;flex-direction:column;gap:8px}
.wo-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.wo-item.wo-blocked{opacity:.6}
.wo-item.wo-section{background:var(--surface-2);border-style:dashed}
.wo-section-title{font-weight:750;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.wo-mini[disabled]{opacity:.35;cursor:default}
.wo-item-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wo-grip{cursor:grab;color:var(--muted);font-size:14px;user-select:none}
.wo-item-label{cursor:pointer;color:var(--muted);font-weight:650;font-size:12px}
.wo-item-label:hover{color:var(--ink)}
.wo-subs{margin-top:8px;padding-left:16px;display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--line)}
.wo-subs .wo-item{padding:8px 10px}
.wo-subs .check-row .x-del{margin-left:auto}
.wo-photos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.wo-thumb{position:relative;display:inline-block}
.wo-thumb img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.wo-thumb .x-del{position:absolute;top:-6px;right:-6px;background:var(--bad-ink);color:#fff;border-radius:50%;width:18px;height:18px;padding:0;font-size:12px;line-height:1}
.wo-add-photo{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:12px;font-weight:650;cursor:pointer}
.wo-item-head{gap:8px}
.wo-item-title{font-weight:600;font-size:13.5px}
.wo-item-title.done,.wo-subs span.done{text-decoration:line-through;color:var(--muted)}
.wo-mini{background:none;border:1px solid var(--line);color:var(--muted);padding:2px 7px;font-size:12px;border-radius:8px;font-weight:650}
.wo-mini:hover{color:var(--ink)}
.wo-inline-edit{flex:1;min-width:0;font:inherit;font-weight:600;padding:4px 8px;border:1px solid var(--ink);border-radius:8px;background:var(--bg,#fff);color:inherit}
.wo-item-head .wo-mini + .x-del{margin-left:2px}
.wo-item-head input[type=checkbox]{width:auto;flex:0 0 auto}
.wo-derived{width:16px;text-align:center;color:var(--muted);font-size:12px}
.wo-derived.done{color:var(--ok-ink)}

.group-head input[type=checkbox]{width:auto;flex:0 0 auto;margin:0 4px 0 0}
.wo-task-title{background:none;border:0;padding:0;font:inherit;font-weight:650;font-size:13.5px;color:var(--ink);cursor:pointer;text-align:left}
.wo-task-title:hover{color:var(--accent-ink,#8a6410)}
.wo-task-title.done{text-decoration:line-through;color:var(--muted)}
.wo-open{color:var(--muted);font-weight:400}
.wo-subadd{border:1px dashed var(--line);background:transparent;font-size:12.5px;padding:5px 8px;margin-top:2px}
.wo-subadd:focus{border-style:solid}
.tk-status{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:2px}
.ai-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 6px;border:1px solid var(--line);border-radius:10px;background:transparent;font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--muted);cursor:pointer;line-height:1}
.ai-badge:hover{border-color:var(--muted);color:var(--ink)}
.ai-dot{width:7px;height:7px;border-radius:50%;flex:none}
/* AI labour suggestion detail modal */
.ai-info{padding:20px 22px 18px;display:flex;flex-direction:column;gap:14px}
.ai-info-hero{display:flex;flex-direction:column;gap:10px}
.ai-info-mins{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:8px}
.ai-info-mins span{font-size:14px;font-weight:600;color:var(--muted)}
.ai-info-pills{display:flex;flex-wrap:wrap;gap:6px}
.ai-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.ai-pill.ghost{font-weight:600;color:var(--muted)}
.ai-pill[data-conf=high]{background:#e7f6ec;border-color:#c7e9d3;color:#1f6b38}
.ai-pill[data-conf=med]{background:#fdf1d6;border-color:#f3e0b0;color:#8a6410}
.ai-pill[data-conf=low]{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.ai-info-compare{font-size:12.5px;color:var(--muted)}
.ai-info-note{font-size:12.5px;line-height:1.5;background:#fdf1d6;border:1px solid #f3e0b0;color:#7a5a12;border-radius:12px;padding:10px 12px}
.ai-info-block{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.ai-info-label{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ai-info-body{font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.ai-info-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
.ai-info-foot .subtle{font-size:11.5px}
.ai-candidates{display:flex;flex-direction:column;gap:6px}
.ai-candidate{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.ai-candidate.is-current{border-color:#c7e9d3;background:#eefaf1}
.ai-candidate-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-candidate-top b{font-size:13px}
.items-table td.lab-cell .lab-row{display:flex;align-items:center;gap:6px}
.items-table td.lab-cell .lab-row .num-in{flex:0 1 auto;max-width:110px}
.items-table col.ic-lab{width:15%}
.items-table col.ic-qty{width:10%}
.items-table col.ic-cost{width:11%}
.items-table col.ic-mat{width:11%}
.items-table col.ic-labour{width:11%}

/* ── Proposal tab ─────────────────────────────────────────────────────── */
.prop-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:1100px){.prop-wrap{grid-template-columns:minmax(0,1fr)}}
.prop-editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px}
.prop-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.prop-toolbar select{max-width:230px}
.prop-group{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.prop-group:first-of-type{border-top:0;padding-top:0;margin-top:0}
.prop-group h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.prop-field{display:flex;flex-direction:column;margin-bottom:10px}
.prop-field.full,.prop-grid .prop-field.full{grid-column:1/-1}
.prop-grid .prop-field{margin-bottom:0}
.prop-field label{font-size:11.5px;color:var(--muted);font-weight:650;margin-bottom:5px}
.prop-field textarea{min-height:0}
.prop-list{display:flex;flex-direction:column;gap:6px}
.prop-list-row,.prop-break-row{display:flex;gap:6px;align-items:center}
.prop-list-row input{flex:1}
.prop-drag-handle{flex:none;color:var(--muted);cursor:grab;display:flex;align-items:center;padding:2px}
.prop-drag-handle:active{cursor:grabbing}
.prop-list-row.drag-over{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.prop-break-row input:first-child{flex:1}
button.sm{padding:5px 10px;font-size:12px}
.prop-list button.sm{align-self:flex-start}
.link.sm{font-size:11px;margin-top:4px;text-align:left}
.prop-break-total{font-size:12px;margin-top:6px;font-weight:650}
.prop-break-total.ok{color:var(--ok-ink)}
.prop-break-total.bad{color:var(--bad-ink)}
.prop-preview-col{position:sticky;top:78px}
.prop-preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.prop-preview-head span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.prop-paper{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 34px -14px rgba(0,0,0,.28);padding:26px 30px;max-height:calc(100vh - 140px);overflow:auto;color:#1a1a1a}
.prop-paper table{width:100%}

/* ── Crews ───────────────────────────────────────────────────────────── */
.crew-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:4px}
.crew-chip{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;margin:3px 4px 3px 0}
.crew-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px}

/* ── Schedule / calendar ─────────────────────────────────────────────── */
.cal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;align-items:start}
@media (max-width:1000px){.cal-wrap{grid-template-columns:minmax(0,1fr)}}
.cal-grid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface-2);border-bottom:1px solid var(--line)}
.cal-dow div{padding:6px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;text-align:center}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:118px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:4px}
.cal-day:nth-child(7n){border-right:0}
.cal-day.is-weekend{background:var(--surface-2)}
.cal-day.is-today{background:#fff9ec}
.cal-day.drop-hi{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.cal-backlog.drop-hi{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.cal-day-head{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:1px 3px}
.cal-day-head b{color:var(--ink);font-size:12px}
.cal-day-body{display:flex;flex-direction:column;gap:3px;min-height:10px}
.visit-chip{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid #6b7280;border-radius:6px;padding:4px 6px;font-size:11px;cursor:pointer;line-height:1.3}
.visit-chip:hover{background:#eef0f3}
.visit-chip .vt{font-weight:700}
.visit-chip-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visit-chip.status-done{opacity:.55}
.visit-chip.status-cancelled{opacity:.4;text-decoration:line-through}
.cal-backlog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px;position:sticky;top:78px;max-height:calc(100vh - 120px);overflow:auto}
.cal-backlog-head{font-weight:800;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:2px}
.wo-card{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:grab;font-size:12px;line-height:1.35}
.wo-card:active{cursor:grabbing}
.wo-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.wo-card.prio-high{border-left-color:var(--warn-ink)}
.wo-card.prio-urgent{border-left-color:var(--bad-ink)}

/* ---- Issues board: drag-and-drop onto the shared .bid-board/.bid-col look ---- */
.bid-col.drop-hi{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.bid-col .bid-card[draggable]{cursor:grab}
.bid-col .bid-card[draggable]:active{cursor:grabbing}

/* ---- Week view: hour grid with drag-to-move / drag-to-resize visits ---- */
.wk-grid{padding:0;overflow:hidden}
.wk-head{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--line);background:var(--surface-2)}
.wk-gutter{border-right:1px solid var(--line)}
.wk-daycol-head{padding:8px 6px;text-align:center;font-size:11px;color:var(--muted);font-weight:700;border-right:1px solid var(--line)}
.wk-daycol-head:last-child{border-right:0}
.wk-daycol-head b{display:block;color:var(--ink);font-size:14px;font-weight:800}
.wk-daycol-head.is-today{background:#fff9ec}
.wk-anytime{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--line);min-height:26px}
.wk-anytime-cell{border-right:1px solid var(--line);padding:2px;display:flex;flex-direction:column;gap:2px}
.wk-anytime-cell:last-child{border-right:0}
.wk-scroll{max-height:62vh;overflow-y:auto}
.wk-body{display:grid;grid-template-columns:56px 1fr}
.wk-gutter-times{position:relative;border-right:1px solid var(--line)}
.wk-hourlabel{position:absolute;right:6px;transform:translateY(-50%);font-size:10px;color:var(--muted);white-space:nowrap}
.wk-cols{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.wk-col{border-right:1px solid var(--line);position:relative}
.wk-col:last-child{border-right:0}
.wk-col-body{position:relative}
.wk-hourline{position:absolute;left:0;right:0;border-top:1px solid var(--line);height:0}
.wk-visit{position:absolute;left:2px;right:2px;background:var(--surface);border:1px solid var(--line);border-left:3px solid #6b7280;border-radius:6px;padding:3px 5px;font-size:11px;overflow:hidden;cursor:grab;user-select:none;touch-action:none;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.wk-visit:active{cursor:grabbing}
.wk-visit.status-done{opacity:.55}
.wk-visit.status-cancelled{opacity:.4;text-decoration:line-through}
.wk-visit-time{font-weight:700;font-size:10px}
.wk-visit-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-visit-sub{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-resize{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.wk-resize:hover{background:rgba(0,0,0,.1)}
.wk-dragging-src{opacity:.35}
.wk-ghost{position:fixed;z-index:500;background:var(--ink);color:#fff;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700;pointer-events:none;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.3)}

/* ---- Team view: every member's week as a table ---- */
.team-sched{border-collapse:collapse;min-width:820px}
.team-sched th{padding:8px;font-size:11px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);text-align:left}
.team-sched th.is-today{background:#fff9ec}
.team-namecol{position:sticky;left:0;background:var(--surface);min-width:150px;z-index:1}
.team-cell{border:1px solid var(--line);vertical-align:top;padding:4px;min-width:110px}
.team-cell.is-today{background:#fff9ec}
.team-pill{background:var(--surface-2);border-radius:5px;padding:2px 5px;font-size:10.5px;margin-bottom:2px;cursor:pointer}
.team-pill:hover{background:#eef0f3}
.team-pill .vt{font-weight:700}
.team-pill.status-done{opacity:.55}
.team-pill.status-cancelled{opacity:.4;text-decoration:line-through}

/* ---- Estimates: Table / Board toggle + Bid Board ---- */
.seg-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.seg-toggle button{background:var(--surface);color:var(--muted);border:0;border-radius:0;padding:8px 14px;font-weight:650}
.seg-toggle button:hover{background:var(--surface-2);opacity:1}
.seg-toggle button.sel{background:var(--ink);color:#fff}

.due-overdue{color:var(--bad-ink);font-weight:650}
.due-soon{color:var(--warn-ink);font-weight:600}
.due-ok,.due-none{color:var(--muted)}

.bid-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;flex-wrap:wrap}
.bid-col-toggle{border:0;background:none;color:var(--muted);font-size:16px;line-height:1;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.bid-col-toggle:hover{background:var(--surface);color:var(--ink)}
.bid-col.collapsed{flex:0 0 34px;min-width:34px;width:34px;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px}
.bid-col.collapsed:hover{background:var(--surface)}
.bid-col-striplabel{writing-mode:vertical-rl;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.bid-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.bid-col{flex:0 0 256px;width:256px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:10px}
.bid-col-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.bid-count{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:11px;font-weight:700;color:var(--ink)}
.bid-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:10px;padding:10px;margin-bottom:8px;font-size:12.5px}
.bid-card.tone-overdue{border-left-color:var(--bad-ink)}
.bid-card.tone-soon{border-left-color:var(--warn-ink)}
.bid-card.tone-ok{border-left-color:var(--ok-ink)}
.bid-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:3px}
.bid-card-top b{line-height:1.3}
.bid-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0}
.bid-card input[type=datetime-local]{width:100%;font-size:11.5px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:var(--surface)}

/* ---- Stock counts ---- */
.count-tools{position:sticky;top:60px;background:var(--bg);z-index:10;padding:10px 0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.count-tools #count-search{max-width:280px}
.count-progress{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.count-progress .bar{width:120px;height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.count-progress .bar span{display:block;height:100%;background:var(--ok-ink);transition:width .2s}
.count-chips{display:flex;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:20px;padding:5px 12px;font-weight:600;font-size:12px}
.chip:hover{background:var(--surface-2)}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.count-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid transparent;border-radius:12px;padding:12px 14px;margin-bottom:8px}
.count-card.is-counted{border-left-color:var(--ok-ink)}
.count-card.is-var{border-left-color:var(--warn-ink)}
.count-card .cc-row{display:flex;align-items:center;gap:12px}
.count-card .cc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.count-card .cc-main b{line-height:1.25}
.count-card .cc-tail{min-width:44px;text-align:right}
.cc-note{width:100%;margin-top:8px;padding:6px 9px;font-size:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink)}
.cc-note:placeholder-shown{color:var(--muted)}
.cp-search{margin-bottom:6px}
.cp-list{max-height:38vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.cp-list .check-row .badge{margin-left:auto}
.qty-step{display:flex;align-items:center;gap:6px;flex:none}
.qty-step button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:20px;font-weight:600;color:var(--ink);line-height:1}
.qty-step button:hover{background:var(--surface-2)}
.qty-step input{width:74px;height:40px;text-align:center;font-size:16px;font-weight:600;border:1px solid var(--line);border-radius:10px}
.cc-var{font-weight:750;min-width:44px;text-align:right}
.cc-var.neg{color:var(--bad-ink)}
.cc-var.pos{color:var(--ok-ink)}
.cc-ok{color:var(--ok-ink);font-size:18px;min-width:44px;text-align:right}

@media (max-width:640px){
  #view-count .cc-row{flex-wrap:wrap}
  #view-count .qty-step button{width:48px;height:48px}
  #view-count .qty-step input{width:88px;height:48px;font-size:18px}
  #view-count .cc-tail{flex:1;text-align:left;padding-left:52px}
  #view-count .count-tools{position:static}
}

/* ---- Notifications + @mention notes feed ---- */
.notif-bell-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:999px;background:var(--bad-ink);border:2px solid var(--dark)}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:420px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);box-shadow:var(--shadow);z-index:50;padding:6px}
.notif-row{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:10px;cursor:pointer}
.notif-row:hover{background:var(--surface-2)}
.notif-row.unread{background:#fdf6e3}
.notif-dot{width:7px;height:7px;border-radius:999px;background:var(--bad-ink);margin-top:6px;flex-shrink:0}
.notif-msg{font-size:13px;font-weight:650}
.notif-time{font-size:11.5px;color:var(--muted);margin-top:2px}
.notif-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px}

.notes-feed{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.note-row{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.note-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:3px}
.note-author{font-weight:700}
.note-time{color:var(--muted)}
.note-body{font-size:13.5px;white-space:pre-wrap;line-height:1.45}
.mention-dropdown{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:180px;overflow:auto;margin-top:2px}
.mention-opt{padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer}
.mention-opt:hover{background:var(--surface-2)}

/* "+ New" menu in the top bar */
.new-wrap{position:relative}
.new-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;z-index:40}
.new-menu button{background:none;color:var(--ink);text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600}
.new-menu button:hover{background:var(--surface-2);opacity:1}

/* Home */
.eyebrow{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.home-kpis{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:18px}
.home-kpi{background:var(--surface);padding:14px 18px}
/* List pages' numbers (lpKpis): a dark band, big figures, an optional split bar */
.home-kpis.lp-band{background:#34322f;border-color:var(--dark);border-top:4px solid var(--sec-c,var(--dark));border-radius:18px;box-shadow:var(--shadow)}
.lp-band .home-kpi{background:var(--dark);color:#fff;padding:20px 24px 18px;display:flex;flex-direction:column}
.lp-band .stat-label{color:#a19f9a;letter-spacing:.08em}
.lp-band .stat-value{font-size:36px;line-height:1.05;letter-spacing:-.02em;font-weight:800;font-variant-numeric:tabular-nums}
.lp-band .stat-value.lp-zero{color:#6b6964}
.lp-band .stat-sub{font-size:12.5px;color:#c9c7c2;margin-top:6px}
.lp-band .bad-ink,.lp-band .due-overdue{color:#f08a70}
.lp-bar{display:flex;gap:3px;height:6px;margin-top:auto;padding-top:14px;box-sizing:content-box}
.lp-bar span{border-radius:999px;min-width:6px;background:#75736e}
.lp-bar .blue{background:#6c9fe0}.lp-bar .amber{background:#e0a531}.lp-bar .red{background:#f08a70}.lp-bar .green{background:#6fbf86}
@media (max-width:760px){.lp-band .stat-value{font-size:28px}.lp-band .home-kpi{padding:16px 18px}}
/* A record tab's one toolbar (tabBar in app.js) */
.tab-bar{min-height:40px}
.tab-bar .tb-gap{flex:1 1 0}
.tab-bar-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.tb-count{font-size:12.5px;color:var(--muted);white-space:nowrap}
/* sections of a tab: a grey track, the open one white (the proposal's parts) */
.tab-bar .prop-tabs{margin:0;background:var(--sunk);border:0;border-radius:999px;padding:4px;gap:2px}
.tab-bar .prop-tab{border-radius:999px;padding:6px 12px}
.tab-bar .tb-sections{margin:0;background:var(--sunk);border:0;border-radius:999px;padding:4px;gap:2px}
.tab-bar .tb-sections .subnav-btn{border-radius:999px;padding:6px 12px}
@media (max-width:600px){.tab-bar .tb-sections{width:100%}}
/* a project section that draws its own toolbar replaces the tab's separate row of section buttons */
[id^="jtab-"]:has(> [id^="jsub-"]:not([hidden]) > .tab-bar) > .subnav{display:none}
/* the proposal's head is just the toolbar now, not a box of its own */
.prop-wrap .prop-head{background:none;border:0;box-shadow:none;padding:0;gap:8px}
.prop-wrap .prop-head .tab-bar{margin-bottom:0}
/* documents: the folder list and the files share one card under the toolbar */
.dbx.tb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);gap:0;overflow:hidden;align-items:stretch}
.tb-card .dbx-tree{position:static;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface-2);max-height:none;padding:10px}
.tb-card .dbx-main{padding:14px;min-height:260px;border-radius:0}
.home-col{display:grid;gap:16px}
.home-list{padding-top:4px;padding-bottom:4px}
.home-grid .group-head > span:first-child{font-weight:750}
.home-grid .group-head button.link{font-size:12.5px}
.home-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.home-row:last-child{border-bottom:0}
.home-row.clickable{cursor:pointer}
.home-row.clickable:hover .home-title{text-decoration:underline;text-underline-offset:3px}
.home-lead{font-variant-numeric:tabular-nums;font-size:12.5px;color:#4a4843;min-width:42px;font-weight:600}
.home-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.home-dot.bad{background:var(--bad-ink)}
.home-dot.warn{background:var(--warn-ink)}
.home-title{font-weight:650;font-size:13.5px}
.home-sub{font-size:12.5px;color:var(--muted)}
.home-chev{color:var(--muted)}
.home-facts{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:0;font-size:13px}
.home-facts dt{color:var(--muted);font-weight:600}
.home-facts dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
/* Narrow screens: see "Phones" at the end of this file. */
@media (max-width:760px){
  .home-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-kpi:last-child:nth-child(odd){grid-column:1/-1}
}

/* Dropdown menus — popMenu() in app.js (row ⋯, page ⋯, "Award all to…") */
.pop-wrap{position:relative;display:inline-flex}
.pop-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;z-index:45}
.pop-menu button{background:none;color:var(--ink);text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap}
.pop-menu button:hover{background:var(--surface-2);opacity:1}
.pop-menu button.danger-item{color:var(--bad-ink)}
.pop-menu button.danger-item:hover{background:var(--bad-bg)}
button.kebab{font-size:16px;color:var(--muted);padding:2px 8px}
.chip-count{opacity:.65;font-variant-numeric:tabular-nums;margin-left:2px}
.chip.chip-warn:not(.sel){border-color:var(--warn-ink);color:var(--warn-ink)}

/* Estimates list */
.est-table td{vertical-align:middle}
.est-table .est-due{width:130px;font-size:12.5px;font-weight:650}
.est-name{font-weight:700}
.est-sub{font-size:12px;color:var(--muted);margin-top:1px}
.est-num{font-variant-numeric:tabular-nums;font-weight:650}
.meter{height:6px;width:120px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok-ink)}

/* Estimate workspace: status control, pinned price strip */
select.status-select{width:auto;border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px}
select.status-select.tone-info{background:var(--info-bg);color:var(--info-ink);border-color:transparent}
select.status-select.tone-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}
select.status-select.tone-bad{background:var(--bad-bg);color:var(--bad-ink);border-color:transparent}
.price-strip{position:sticky;top:60px;z-index:15;display:flex;flex-wrap:wrap;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin-top:4px}
.price-strip:empty{display:none}
.ps-cell{display:grid;gap:1px;padding:9px 16px;border-right:1px solid var(--line)}
.ps-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;white-space:nowrap}
.ps-v{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.ps-bar{flex:1;min-width:160px;display:grid;gap:4px;align-content:center;padding:0 16px}
.ps-note{font-size:11px;color:var(--muted)}
.ps-sell{background:var(--ink);color:#fff;border-right:0;margin-left:auto}
.ps-sell .ps-l{color:#c9c6c0}
.ps-sell .ps-v{font-size:18px}
.cost-stack{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-2)}
.cost-stack.big{height:14px;margin:2px 0 14px}
.cost-stack i{display:block;height:100%}
.c-material{background:#191919}.c-labourCost{background:#6f6a60}.c-subcontracts{background:#a9a398}
.c-equipment{background:#cdc7bb}.c-other{background:#e2ddd2}.c-overhead{background:var(--accent-light)}.c-profit{background:var(--accent)}

/* Estimate overview */
.ov-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.ov-col{display:grid;gap:16px}
.bd-row{display:grid;grid-template-columns:12px 1fr auto auto;gap:10px;align-items:center;padding:7px 0;font-size:13.5px}
.bd-sw{width:10px;height:10px;border-radius:3px}
.bd-sub{font-size:12px;color:var(--muted);text-align:right}
.bd-row.total{border-top:1px solid var(--line);margin-top:4px;padding-top:11px;font-weight:750}
.bd-row.sell{background:var(--ink);color:#fff;border-radius:10px;padding:10px 12px;margin:8px -12px 0;font-weight:800;font-size:15px}
.bd-row.sell .bd-sub{color:#c9c6c0}
.bd-row.tax{color:var(--muted);font-size:12.5px}
.check-item{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.check-item:last-child{border-bottom:0}
.check-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--warn-bg);color:var(--warn-ink)}
.check-item.done .check-ic{background:var(--ok-bg);color:var(--ok-ink)}
.check-item.done .home-title{color:var(--muted);font-weight:600}
.save-state{font-size:12px;font-weight:650;color:var(--muted)}
.save-state.ok{color:var(--ok-ink)}
.save-state.bad{color:var(--bad-ink)}
.pricing-margin-hint{margin:12px 0 0;font-size:12.5px;background:var(--surface-2);border-radius:10px;padding:9px 12px}
.price-mismatch{font-size:12px;color:var(--warn-ink);font-weight:600;margin-top:4px}
@media (max-width:1100px){.ov-grid{grid-template-columns:1fr}}
@media (max-width:820px){.price-strip{position:static}.ps-bar{display:none}}

/* Project workspace */
.stack-title{margin:26px 0 12px;font-size:15px;font-weight:750}
.hb-row{display:grid;grid-template-columns:120px 1fr 48px;gap:10px;align-items:center;font-size:12.5px;padding:5px 0}
.hb-row b{text-align:right;font-variant-numeric:tabular-nums}
.hb-track{height:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.hb-track i{display:block;height:100%;background:var(--ink);border-radius:99px}
.hb-track i.ok{background:var(--ok-ink)}
.hb-track i.bad{background:var(--bad-ink)}
.callout{margin-top:14px;border-radius:10px;padding:10px 14px;font-size:13px}
.callout.warn{background:var(--warn-bg);color:var(--warn-ink)}
.callout.ok{background:var(--ok-bg);color:var(--ok-ink)}
.callout.info{background:var(--info-bg);color:var(--info-ink)}
.callout.bad{background:var(--bad-bg);color:var(--bad-ink)}
.callout.plain{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
/* Job PO page */
.po-banner{margin:0 0 16px;font-size:13.5px}
.po-banner-who{display:block;font-size:12px;opacity:.8;margin-top:2px}
.po-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}
@media (max-width:900px){.po-2col{grid-template-columns:minmax(0,1fr)}}
.po-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 18px;margin:0;font-size:13.5px}
.po-facts dt{color:var(--muted);font-weight:600}
.po-facts dd{margin:0;white-space:pre-wrap}
.po-activity{list-style:none;margin:0;padding:0}
.po-activity li{padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.po-activity li:first-child{border-top:0;padding-top:0}
.po-act-note{margin-top:4px;white-space:pre-wrap}
.po-act-when{font-size:12px;margin-top:3px}
.callout .link{color:inherit;text-decoration:underline}
.home-dot.ok{background:var(--ok-ink)}
.home-dot.info{background:var(--info-ink)}
select.status-select.tone-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}

/* Settings: grouped side list + section */

/* Pipeline of stages with counts (T&M tickets) — each stage is a filter */
.flow{display:flex;align-items:stretch;margin-bottom:16px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow)}
.flow button{flex:1;min-width:150px;background:none;color:var(--ink);border-radius:0;padding:12px 16px;text-align:left;display:grid;gap:2px;border-right:1px solid var(--line);position:relative}
.flow button:last-child{border-right:0}
.flow button:hover{background:var(--surface-2);opacity:1}
.flow .flow-n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.flow .flow-l{font-size:12px;color:var(--muted);font-weight:650}
.flow button.on{background:var(--ink);color:#fff}
.flow button.on .flow-l{color:#c9c6c0}
.flow button:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:50%;transform:translateY(-50%);color:var(--muted);background:var(--surface);font-size:12px;z-index:1}

/* Timesheets week grid */
.ts-grid td,.ts-grid th{vertical-align:middle}
.ts-grid .ts-h{text-align:center;font-variant-numeric:tabular-nums}
.ts-grid td.ts-h.zero{color:var(--line)}
.ts-grid td.ts-h.ot{color:var(--warn-ink);font-weight:750;background:var(--warn-bg)}
.ts-grid th.is-today{color:var(--bad-ink)}

/* Documents grid */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.doc-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;text-align:left;display:grid;font-weight:400}
.doc-card:hover{border-color:var(--muted);opacity:1}
.doc-thumb{aspect-ratio:4/3;max-width:100%;background:var(--surface-2);display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-ext{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--muted);border:1.5px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--surface)}
.doc-rev{position:absolute;top:8px;right:8px}
.doc-meta{display:grid;gap:1px;padding:10px 12px}
.doc-meta b{font-size:13px;font-weight:650;overflow-wrap:anywhere}
.doc-meta span{font-size:12px;color:var(--muted)}

/* Invoices: AR aging strip */
.aging-bar{height:6px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin:8px 0 4px}
.aging-bar i{display:block;height:100%}

/* Items: floating bar once lines are ticked */
.bulk-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:50;background:var(--ink);color:#fff;border-radius:999px;padding:7px 8px 7px 18px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);max-width:calc(100% - 32px);flex-wrap:wrap}
.bulk-bar b{margin-right:6px;font-variant-numeric:tabular-nums}
.bulk-bar button{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);padding:6px 12px;font-size:12.5px}
.bulk-bar button:hover{background:rgba(255,255,255,.12);opacity:1}
.bulk-bar button.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bulk-bar select{width:auto;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 10px;font-size:12.5px}
.bulk-bar select option{color:var(--ink)}

/* Notes drawer — opens over any tab of a detail page (openNotesDrawer). */
.notes-drawer{position:fixed;inset:0;z-index:90}
.notes-drawer-scrim{position:absolute;inset:0;background:rgba(20,18,14,.28)}
.notes-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:-20px 0 60px -30px rgba(0,0,0,.35);display:flex;flex-direction:column}
.notes-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.notes-drawer-head p{margin:2px 0 0;font-size:12.5px}
.notes-drawer-body{flex:1;overflow:auto;padding:16px 20px}

/* ==========================================================================
   Visual system (matches the redesign prototype). Kept as one block at the
   end so it overrides the older component rules above in a single place.
   ========================================================================== */
:root{
  --bg:#f3f2ef; --surface:#fff; --surface-2:#f8f7f4; --sunk:#eeece7;
  --ink:#1a1916; --ink-2:#4a4843; --muted:#78756e; --line:#e5e2db; --line-2:#d6d2c9;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(26,25,22,.05),0 8px 24px -14px rgba(26,25,22,.18);
}
body{color:var(--ink)}
h1{font-size:26px;letter-spacing:-.02em}
/* Identifiers (EST-1042, PO numbers, MPNs, bins) read as codes. */
.est-num,.mono,.j-num{font-family:var(--mono);font-size:12px;letter-spacing:-.01em;font-weight:500}

/* Buttons: compact pills. Primary = ink, accent = the one "create" action. */
button{padding:8px 14px;font-size:13px;font-weight:650;border:1px solid transparent}
button.ghost{border-color:var(--line-2);background:var(--surface)}
button.ghost:hover{background:var(--surface-2)}
button.accent{border-color:var(--accent)}
button.sm{padding:5px 11px;font-size:12px}
button.link{border:0;padding:0;font-size:inherit;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
button.link:hover{text-decoration-color:var(--ink)}
.section-head > div > button.link:first-child{text-decoration:none;color:var(--muted);font-size:12.5px}
button.icon{border:0}
button.row-del,button.x-del{border:0}
.seg-toggle{border-radius:999px;background:var(--sunk);border-color:var(--line);padding:3px}
.seg-toggle button{border:0;border-radius:999px;background:transparent;padding:5px 12px;font-size:12.5px}
.seg-toggle button.sel{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg-toggle button:hover{background:transparent;color:var(--ink)}
.seg-toggle button.sel:hover{background:var(--surface)}
.chip{border-color:var(--line);font-size:12.5px;font-weight:650;color:var(--ink-2);padding:5px 12px}
.chip.sel{background:var(--ink);border-color:var(--ink)}

/* Status pills: a dot in the status colour; plain badges are labels. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;font-size:11.5px;font-weight:700;border-color:transparent;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.badge.ok::before,.badge.info::before,.badge.warn::before,.badge.bad::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:0 0 auto}

/* Inputs */
input,select,textarea{border-radius:10px;padding:8px 10px}

/* Cards: white header row with a bold title, like a panel. Collapsible
   group cards (packages, takeoff groups) keep a tinted header. */
.card{border-radius:14px}
.card > .group-head{background:var(--surface);padding:14px 18px;cursor:default}
.card > .group-head:hover{background:var(--surface)}
.card > .group-head > span:first-child{font-size:14px}
.card-body{padding:16px 18px}
.group-card{border-radius:14px}
.group-card > .group-head{padding:11px 14px}
.group-head{font-size:13.5px}

/* Tables: denser, no zebra, a row highlight on hover. */
th{font-size:10.5px;letter-spacing:.07em;padding:9px 14px;background:var(--surface)}
td{padding:10px 14px;vertical-align:middle}
.card > table tbody tr:nth-child(even) > td,
#cat-tab-parts tbody tr:nth-child(even) > td,
#cat-tab-assemblies tbody tr:nth-child(even) > td,
.items-table tbody tr.zebra > td{background:transparent}
tr.clickable:hover > td{background:var(--surface-2)}

/* Numbers you edit in a table read as plain numbers until you point at them. */
.items-table .num-in,.uniform-table .qty-input,input.cell{border:1px solid transparent;background:transparent;border-radius:7px;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums;box-shadow:none}
.items-table .num-in:hover,.uniform-table .qty-input:hover,input.cell:hover{border-color:var(--line)}
.items-table .num-in:focus,.uniform-table .qty-input:focus,input.cell:focus{border-color:var(--ink);background:var(--surface);box-shadow:none}

/* Stat tiles (detail pages) */
.stat-card{border-radius:14px}
.stat-value{font-size:20px;font-variant-numeric:tabular-nums}

/* Top bar and sidebar proportions */
.topbar{height:56px}
/* Desktop only: below 821px the earlier narrow-screen rules stack the
   sidebar above the page as a scrolling strip. */
@media (min-width:821px){
  .app{grid-template-columns:212px 1fr;min-height:calc(100vh - 56px)}
  #sidebar{top:56px;height:calc(100vh - 56px)}
  #sidebar{gap:10px;padding:12px 10px}
  #sidebar .nav{padding:6px 10px;line-height:1.3}
  .price-strip{top:56px}
  main{padding:24px 28px}
}

/* Collapsible group cards (takeoff groups, item packages) */
.group-card > .group-head{flex-wrap:wrap;gap:10px}
.grp-title{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.grp-title b{font-weight:750}
.grp-title .chev{color:var(--muted);transition:transform .15s}
.group-card.closed .grp-title .chev{transform:rotate(-90deg)}
.group-card.closed > .group-head{border-bottom:0}
.group-empty{padding:14px 16px;font-size:13.5px}
.grp-sum{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.grp-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.grp-title .chev{transition:none}}

/* Takeoff rows */
.takeoff-table tr.unmapped > td{background:color-mix(in srgb,var(--warn-bg) 55%,transparent)}
.takeoff-table tr.unmapped > td:first-child{box-shadow:inset 3px 0 0 var(--warn-ink)}
.takeoff-table td{vertical-align:middle}
.uniform-table td.dot-cell,.uniform-table td.x-cell{vertical-align:middle;padding-top:10px}

/* Item rows */
.items-table{min-width:1000px}
.items-table col.ic-chk{width:38px}
.items-table col.ic-item{width:auto}
.items-table col.ic-qty{width:10%}
.items-table col.ic-cost{width:11%}
.items-table col.ic-lab{width:12%}
.items-table col.ic-mat{width:11%}
.items-table col.ic-labour{width:11%}
.items-table col.ic-src{width:90px}
.items-table col.ic-act{width:78px}
.items-table td{vertical-align:middle}
.items-table tr.noprice-row > td{background:color-mix(in srgb,var(--bad-bg) 45%,transparent)}
.items-table tr.sel-row > td{background:color-mix(in srgb,#fbeec4 70%,transparent)}
.item-mpn{color:var(--muted);margin-left:6px}
.item-name-btn{font-weight:650}
.src-chip{border:0;background:var(--sunk);color:var(--muted);font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px}
.src-chip:hover{color:var(--ink);opacity:1}
.act-cell{white-space:nowrap;text-align:right}
.lock-btn{border:0;background:none;color:var(--line-2);padding:4px;border-radius:6px;display:inline-grid;place-items:center;vertical-align:middle}
.lock-btn:hover{background:var(--sunk);color:var(--ink-2);opacity:1}
.lock-btn.on{color:var(--ink)}
.lab-row{display:flex;align-items:center;gap:4px;justify-content:flex-end}

/* RFQ detail */
.back-link{text-decoration:none!important;color:var(--muted)!important;font-size:12.5px}
.rfq-head{align-items:flex-start;margin:8px 0 16px}
.rfq-title{margin-left:-8px}
.meta-row{gap:14px;margin-top:6px}
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.vcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:var(--surface);align-content:start}
.vcard-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vcard-facts{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.vcard-facts b{color:var(--ink);font-variant-numeric:tabular-nums}
.vcard-facts label{display:inline-flex;align-items:center;gap:4px}
.vcard-facts input.cell{width:80px}
.vcard-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vcard-dates label{display:grid;gap:2px;font-size:11px;color:var(--muted);font-weight:650}
.vcard-dates input{padding:5px 8px;font-size:12.5px}
.vcard-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vcard-add{border-style:dashed;background:transparent;align-content:center;min-height:120px}
.best-cell{background:color-mix(in srgb,var(--ok-bg) 85%,transparent);color:var(--ok-ink);font-weight:750}
.awarded-cell{outline:2px solid var(--ok-ink);outline-offset:-2px}
.cmp-sum{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px}
.cmp-sum b{font-variant-numeric:tabular-nums}
.rfq-title{background:transparent}
.vendor-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.vcard-dates input{width:100%;min-width:0;font-size:12px;padding:4px 6px}
.award-pick{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}

/* Proposal editor: one section open at a time */
.prop-group.acc{border:1px solid var(--line);border-radius:12px;padding:0;margin-top:8px;background:var(--surface)}
.prop-group.acc:first-of-type{margin-top:8px;border-top:1px solid var(--line)}
.prop-group .acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;color:var(--ink);border:0;padding:12px 16px;text-align:left;border-radius:12px}
.prop-group .acc-h:hover{background:var(--surface-2);opacity:1}
.prop-group .acc-h > span{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;min-width:0}
.prop-group .acc-s{font-weight:500;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.prop-group .acc-h .chev{color:var(--muted);flex:0 0 auto;transition:transform .15s}
.prop-group.acc:not(.open) .acc-h .chev{transform:rotate(-90deg)}
.prop-group.acc:not(.open) > :not(.acc-h){display:none}
.prop-group.acc.open{padding-bottom:14px}
.prop-group.acc.open > :not(.acc-h){margin-left:16px;margin-right:16px}
.prop-toolbar select{max-width:190px}

/* Project budget */
.used-bar{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.used-bar b{font-variant-numeric:tabular-nums;min-width:38px;text-align:right;font-size:12.5px}
.used-bar .meter{width:120px}
tr.total-row > td{border-top:1px solid var(--line-2);background:var(--surface-2);font-weight:700}

/* Project billing: billed-vs-contract bar */
.bill-bar{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.bill-bar b{font-variant-numeric:tabular-nums;font-size:14px}
@media (max-width:640px){.bill-bar{grid-template-columns:1fr}}
.gh-sub{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:8px}
/* Projects list: budget spent vs. scope complete */
.pace{display:grid;gap:4px;min-width:170px;max-width:260px}
.pace-row{display:grid;grid-template-columns:1fr 40px;gap:8px;align-items:center}
.pace-row .hb-track{height:7px}
.pace-row b{font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
/* Work order: checklist beside a details column */
.wo-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.wo-side{display:grid;gap:16px}
@media (max-width:980px){.wo-split{grid-template-columns:1fr}}
.ck-list{gap:0}
.ck-list>.wo-item{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:11px 16px;background:none}
.ck-list>.wo-item.wo-section{border-bottom:0;padding:18px 16px 6px;background:none}
.ck-list>.wo-item.wo-section .wo-section-title{text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:750;color:var(--muted)}
.ck-list .wo-item-head input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);margin:0}
.ck-list .wo-subs{margin:8px 0 0 26px}
.ck-add{display:flex;align-items:center;gap:10px;padding:10px 16px 12px}
.ck-add-box{width:18px;height:18px;border:1.5px dashed var(--line-2);border-radius:4px;flex:0 0 auto}
.ck-add input{border:0;background:transparent;padding:4px 0;flex:1;box-shadow:none}
.ck-add input:focus{outline:none}
.facts{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0;padding:14px 16px 16px;font-size:13px}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{margin:0;text-align:right}
.wo-scope{margin:0;white-space:pre-wrap;font-size:13px;color:var(--ink-2)}
/* To-do detail: one row of live controls */
.ctl-row{display:flex;flex-wrap:wrap;margin-bottom:16px;overflow:hidden}
.ctl-cell{display:grid;gap:4px;padding:12px 18px;border-right:1px solid var(--line);min-width:140px;flex:1 1 140px;margin:0;cursor:pointer}
.ctl-cell:last-child{border-right:0}
.ctl-cell .ctl-in{border:0;background:transparent;padding:0;font-weight:700;font-size:14px;color:var(--ink);width:100%;box-shadow:none;min-height:0}
.ctl-in:focus{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.ctl-in.prio-urgent{color:var(--bad-ink)}
.ctl-in.prio-high{color:var(--warn-ink)}
.ctl-in.late{color:var(--bad-ink)}
.td-eyebrow{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.td-eyebrow .tdot{width:8px;height:8px;border-radius:99px;display:inline-block}
@media (max-width:640px){.ctl-cell{border-right:0;border-bottom:1px solid var(--line)}}
/* Schedule: crews x days */
.sv-wrap{min-width:0}
.sv-grid{table-layout:fixed;min-width:760px;border-collapse:separate;border-spacing:0}
.sv-grid th,.sv-grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top}
.sv-grid thead th{font-size:12px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;padding:10px;background:var(--surface)}
.sv-grid .sv-rowh{width:150px;text-align:left;padding:12px;background:var(--surface);display:table-cell}
.sv-grid tbody .sv-rowh b{display:block;font-size:13px;margin-bottom:6px}
.sv-grid td{padding:6px;height:86px;background:var(--surface)}
.sv-grid .is-today{background:#fbf6e9}
.sv-grid thead th.is-today{color:var(--ink)}
.sv-grid td.drop-hi{background:var(--sunk);outline:2px dashed var(--line-2);outline-offset:-4px}
.sv-grid tr:last-child td,.sv-grid tr:last-child th{border-bottom:0}
.sv-grid th:last-child,.sv-grid td:last-child{border-right:0}
.sv-card{display:grid;gap:2px;padding:6px 8px;border-radius:8px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--ink);font-size:12px;cursor:grab;margin-bottom:5px}
.sv-card b{font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sv-card span{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-card.status-done{opacity:.6;box-shadow:inset 3px 0 0 var(--ok-ink)}
.sv-card.status-in_progress{box-shadow:inset 3px 0 0 var(--info-ink,#2f5f9e)}
.av-stack{display:inline-flex}
.av-stack .avatar{margin-left:-5px;border:2px solid var(--surface)}
.av-stack .avatar:first-child{margin-left:0}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:99px;background:var(--sunk);color:var(--ink-2);font-size:10.5px;font-weight:750;flex:0 0 auto}
.avatar.sm{width:24px;height:24px;font-size:10px}
.sv-grid tbody .sv-rowh{text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500}
.ck-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.ck-row .check-row{flex:1;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;margin:0}
.ck-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);margin:0}
.ck-done{text-decoration:line-through;color:var(--muted)}
.ck-x{opacity:0}
.ck-row:hover .ck-x,.ck-x:focus{opacity:1}
@media (hover:none){.ck-x{opacity:1}}
/* To-do board cards */
.td-card{display:grid;gap:6px}
.td-card-eyebrow{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted)}
.td-card-eyebrow .badge{margin-left:auto}
.td-card-eyebrow .tdot{width:8px;height:8px;border-radius:99px;display:inline-block}
.td-card-title{font-size:13.5px;font-weight:650;line-height:1.3}
.td-card-sub{font-size:12px}
.td-card .bid-card-foot{display:flex;justify-content:space-between;gap:8px;font-size:12px}
/* Top-bar search */
.gsearch{position:relative;flex:1;max-width:560px;width:100%;justify-self:center;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0 12px;color:var(--muted)}
.gsearch:focus-within{border-color:var(--ink);background:var(--surface)}
.gsearch input{border:0;background:transparent;box-shadow:none;padding:8px 0;width:100%;font-size:13px;min-height:0}
.gsearch input:focus{outline:none}
.gsearch input::-webkit-search-cancel-button{display:none}
.gsearch kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:5px;padding:0 5px;color:var(--muted)}
.gsearch:focus-within kbd{display:none}
.gsearch-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:min(70vh,520px);overflow:auto;z-index:60}
.gs-group{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.gs-row{display:grid;gap:1px;width:100%;text-align:left;background:none;color:var(--ink);border:0;border-radius:8px;padding:7px 10px;font-weight:600;font-size:13px}
.gs-row:hover,.gs-row.sel{background:var(--surface-2);opacity:1}
.gs-sub{font-size:12px;color:var(--muted);font-weight:500}
.gs-empty{padding:12px;color:var(--muted);font-size:13px}
@media (max-width:820px){.gsearch{display:none}}
.est-num{white-space:nowrap}
td.nowrap{white-space:nowrap}
.person{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* RFQ vendor quote files */
.rrf-list{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.rrf-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}
.rrf-row:first-child{border-top:0}
.rrf-name{flex:1;min-width:0;display:grid;gap:1px}
.rrf-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.rrf-drop{display:grid;gap:2px;justify-items:center;padding:16px;border:1.5px dashed var(--line-2);border-radius:12px;cursor:pointer;text-align:center}
.rrf-drop:hover{background:var(--surface-2)}
.btn-link{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:none}
.btn-link:hover{background:var(--surface-2)}
.prop-stale{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:13px}
.prop-stale b{color:var(--ink)}
.task-files .rrf-list{margin:12px 0 0}
.cost-stack i[data-k]{cursor:default;transition:opacity .12s}
.cost-stack.hovering i{opacity:.35}
.cost-stack.hovering i.on{opacity:1}
.bd-row.hl{background:var(--surface-2);border-radius:8px;margin:0 -8px;padding-left:8px;padding-right:8px}
.cost-tip{position:fixed;z-index:1000;pointer-events:none;background:var(--ink);color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.45;display:grid;min-width:170px;max-width:260px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.cost-tip b{font-size:12.5px}
.cost-tip .ct-v{font-size:15px;font-weight:800;margin:1px 0 3px}
.cost-tip span:not(.ct-v){color:#c9c6c0}
/* Jobber import (Settings → Integrations) */
.jb-steps{margin:14px 0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;max-width:720px}
.jb-copy{display:flex;align-items:center;gap:8px;margin-top:6px}
.jb-copy code{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;overflow-wrap:anywhere}
.jb-conn{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.btn-link.accent{background:var(--accent);border-color:transparent;padding:9px 16px;font-size:13.5px}
.btn-link.disabled{opacity:.45;cursor:not-allowed}
.jb-bar{gap:10px;flex-wrap:wrap;margin-bottom:12px}
.jb-search{flex:1;min-width:180px;max-width:320px}
.table-wrap{overflow-x:auto}
.jb-table{width:100%;border-collapse:collapse;font-size:13px}
.jb-table th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.jb-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.jb-table .num{text-align:right;white-space:nowrap}
.jb-table .subtle{font-size:12px}
.jb-table select{max-width:260px;font-size:12.5px}
.jb-table tr.jb-off td{opacity:.55}
.jb-table input[type=checkbox]{width:auto}
.jb-relay{font-size:11.5px;color:var(--muted);margin-top:3px}
.jb-ok{color:var(--ok-ink);font-weight:800}
.jb-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.jb-foot label{display:flex;align-items:center;gap:6px;font-size:13px}
.jb-foot input[type=checkbox]{width:auto}
.jb-run{margin-bottom:14px;display:grid;gap:8px}
.jb-prog{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.jb-prog i{display:block;height:100%;background:var(--ink);transition:width .3s}
.jb-counts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.jb-errs{color:var(--bad-ink);font-size:12.5px}
.jb-rate{width:96px;text-align:right}
.jb-rate.warn{border-color:var(--warn-ink);background:var(--warn-bg)}
/* Bulk project delete */
.jobs-table .sel-cell{width:28px;padding-right:0}
.jobs-table .sel-cell input{width:auto}
.jobs-table tr.sel td{background:var(--surface-2)}
.bd-warn{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--bad-bg);color:var(--bad-ink);font-size:13px}
/* Jobber review / undo */
.jb-scroll{max-height:420px;overflow:auto}
.jb-table td select{font-size:12.5px}
.jb-undo{border-color:var(--bad-bg)}
button.danger-outline{color:var(--bad-ink);border-color:var(--bad-ink)}
.jb-undo-list{margin:0 0 12px;padding-left:20px;display:grid;gap:4px;font-size:13.5px}
/* External change order form */
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.form-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.xco-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}
.xco-sum>div{background:var(--surface);padding:10px 12px;display:grid;gap:2px}
.xco-sum span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.xco-sum b{font-size:15px}
.xco-sum b.neg{color:var(--bad-ink)}
.xco-sum small{font-size:11.5px;color:var(--muted)}
.xco-sum .xco-sell{background:var(--ink);color:#fff}
.xco-sum .xco-sell span,.xco-sum .xco-sell small{color:#c9c6c0}
@media (max-width:600px){.xco-sum{grid-template-columns:repeat(2,minmax(0,1fr))}}
.co-file{display:block;font-size:12px;margin-top:3px;color:var(--ink);text-decoration:underline;text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
#xco-files .rrf-list{margin:6px 0 10px}
#modalBody .xco .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#modalBody .xco .form-grid .field.full{grid-column:1/-1}
@media (max-width:600px){#modalBody .xco .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.modal-card:has(#modalBody .xco){width:min(760px,100%)}

/* Collapsible sidebar sections */
.nav-toggle{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;border-radius:8px;cursor:pointer;text-align:left;padding:6px 10px;margin:0}
.nav-toggle span:first-child{flex:1}
#sidebar .nav-toggle{color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.07em}
.nav-toggle:hover{color:var(--ink);background:var(--surface-2);opacity:1}
.nav-chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.nav-group.open .nav-chev{transform:rotate(45deg) translateY(-2px)}
.nav-items{display:flex;flex-direction:column;gap:1px}
.nav-group.collapsed .nav-items{display:none}
@media (min-width:821px){#sidebar{gap:4px}#sidebar .nav-group.open{margin-bottom:6px}}

/* Projects: PM filter */
.fb-pm{width:auto;max-width:220px;border-radius:999px;padding:6px 30px 6px 12px;font-size:12.5px;font-weight:650}
.fb-pm.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bid-card-pm{margin-top:8px;font-size:12px}
/* Subtask drag to reorder */
.sub-drag{display:flex;align-items:stretch;gap:4px}
.sub-drag-body{flex:1;min-width:0}
.sub-handle{display:flex;align-items:center;padding:0 2px;color:var(--muted);cursor:grab;opacity:.55;touch-action:none}
.sub-drag:hover .sub-handle{opacity:1}
.sub-handle svg{width:14px;height:14px}
.sub-drag.dragging{opacity:.45}
.sub-drag.dragging .wo-item{border-style:dashed}
/* Number box with its own up/down arrows (numSpin in app.js). */
.num-spin{display:flex;align-items:stretch;position:relative}
.num-spin input{flex:1;min-width:0;padding-right:40px!important;-moz-appearance:textfield;appearance:textfield}
.num-spin input::-webkit-inner-spin-button,.num-spin input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.num-spin-btns{position:absolute;right:1px;top:1px;bottom:1px;width:34px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.num-spin-btns button{flex:1;min-height:0!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:var(--muted)!important;font-size:9px!important;line-height:1;cursor:pointer}
.num-spin-btns button:first-child{border-bottom:1px solid var(--line)!important;border-top-right-radius:9px!important}
.num-spin-btns button:last-child{border-bottom-right-radius:9px!important}
.num-spin-btns button:hover{background:var(--surface-2)!important;color:var(--ink)!important}
/* Price by layer (Takeoff tab) */
.uniform-table col.c-mat{width:100px}
.uniform-table col.c-hrs{width:96px}
.uniform-table col.c-sell{width:124px}
.takeoff-table.priced col.c-layer{width:24%}
.takeoff-table .qty-input.overridden{color:var(--accent-ink,#8a5a00);font-weight:700}
.takeoff-table .sell-input{font-weight:700}
.layer-price-sum{margin-bottom:12px}
.lps-total{font-size:13.5px;white-space:nowrap}
.lps-extra{display:grid;grid-template-columns:1fr auto 110px;gap:12px;padding:5px 0;border-top:1px solid var(--line);font-size:13.5px}
.lps-extra .money{text-align:right}
.takeoff-table.priced input[aria-label^="Labour hours"],.takeoff-table.priced input[aria-label^="Sell price"]{border-color:var(--line);background:var(--surface)}
/* Proposal editor: option blocks under Price / Signatures */
.prop-sub{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--sunk,var(--surface-2))}
.prop-sub-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.prop-sub .seg-toggle{margin-bottom:8px}
.prop-check{padding:5px 0;font-weight:550}
.prop-check input{margin:0}
.cs-edit{margin-top:6px}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.cs-row input{width:130px;text-align:right}
.cs-row.total{font-weight:700;border-top:1.5px solid var(--ink)}
/* E-signature (proposal editor) */
.sig-status{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;margin:0 0 12px;font-size:13px;background:var(--surface-2);border:1px solid var(--line)}
.sig-status.ok{background:var(--ok-bg,#e6f4ea);border-color:transparent;color:var(--ok-ink,#1d4f2b)}
.sig-status.bad{background:var(--bad-bg,#fbe9e7);border-color:transparent;color:var(--bad-ink,#7a2618)}
.sig-status.warn{background:var(--warn-bg,#fff4d6);border-color:transparent;color:var(--warn-ink,#7a5200);margin:0}
a.btnlike{display:inline-flex;align-items:center;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:600;font-size:12.5px;color:var(--ink);background:var(--surface)}
.my-sig{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.my-sig img{max-height:44px;max-width:220px;background:#fff;border-radius:6px;padding:2px 6px;border:1px solid var(--line)}
canvas.sig-pad{display:block;width:100%;height:150px;border:1px dashed var(--line);border-radius:10px;background:#fff;cursor:crosshair;touch-action:none}
/* Snooze on the home "On my plate" list */
.home-end{display:inline-flex;align-items:center;gap:6px}
.snz-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;min-height:0!important;border-radius:8px!important;border:1px solid transparent!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;opacity:0;transition:opacity .12s}
.home-row:hover .snz-btn,.snz-btn:focus-visible{opacity:1}
.snz-btn:hover{border-color:var(--line)!important;background:var(--surface-2)!important;color:var(--ink)!important}
@media (hover:none){.snz-btn{opacity:1}}
/* Snooze dialog: a simple menu of times, then a date picker */
.snz{display:flex;flex-direction:column;gap:14px}
.snz-what{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);padding:2px 0}
.snz-what svg{flex:none}
.snz-what span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.snz-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}
button.snz-opt{display:flex!important;width:100%;justify-content:space-between;align-items:center;gap:12px;background:var(--surface)!important;color:var(--ink)!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:13px 16px!important;min-height:0!important;height:auto!important;font-weight:600;font-size:14px;text-align:left;cursor:pointer}
button.snz-opt:first-child{border-top:0!important}
button.snz-opt:hover,button.snz-opt:focus-visible{background:var(--surface-2)!important}
.snz-when{color:var(--muted);font-weight:500;font-size:13px}
.snz-date label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.snz-date-row{display:flex;gap:8px}
.snz-date-row input{flex:1;min-width:0}
.snz-note{font-size:12px;color:var(--muted);margin-top:6px}
.snz-foot{padding:10px 0 2px}
.snz-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;border-top:1px solid var(--line)}
.snz-item:first-of-type{margin-top:6px}
/* Send for signature: contact picker and the "sent" confirmation */
.ss-contacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
button.ss-contact{display:flex!important;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 11px!important;min-height:0!important;height:auto!important;border-radius:10px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--ink)!important;box-shadow:none!important;text-align:left;font-weight:400}
button.ss-contact b{font-size:13px}
button.ss-contact span{font-size:11.5px;color:var(--muted)}
button.ss-contact.on{border-color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ink)!important}
.ss-done{text-align:center;padding:6px 4px 2px}
.ss-done-ic{width:52px;height:52px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;background:var(--surface-2)}
.ss-done-ic.ok{background:var(--ok-bg,#e6f4ea);color:var(--ok-ink,#1d4f2b)}
.ss-done-ic.bad{background:var(--bad-bg,#fbe9e7);color:var(--bad-ink,#7a2618)}
.ss-done-h{font-size:18px;font-weight:700;overflow-wrap:anywhere}
.ss-done-p{color:var(--muted);font-size:13.5px;margin:6px 0 16px}
.ss-link{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 12px;background:var(--surface-2);text-align:left}
.ss-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.ss-done-acts{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.ss-done-acts button{min-width:120px}
.modal-card:has(#modalBody > .snz:only-child){width:min(440px,100%)}
.modal-card:has(#modalBody > .ss-done:only-child){width:min(480px,100%)}
/* Takeoff rows: tidy layout, compact "prices as" list, drag handles */
.uniform-table col.c-dot{width:44px}
.uniform-table col.c-hrs{width:112px}
.uniform-table col.c-sell{width:130px}
.takeoff-table td{vertical-align:middle}
.takeoff-table td.dot-cell{white-space:nowrap}
.takeoff-table td.dot-cell .status-dot{vertical-align:middle}
.grip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:22px;margin-right:4px;color:var(--muted);opacity:.35;cursor:grab;vertical-align:middle;border-radius:4px}
.grip:active{cursor:grabbing}
tr:hover .grip,.group-head:hover .grip{opacity:.9}
.grip:hover{background:var(--surface-2)}
.grp-title .grip{margin-right:2px}
tr.dragging,.group-card.dragging{opacity:.45}
.takeoff-table tr.drop-before > td{box-shadow:inset 0 2px 0 var(--ink)}
.takeoff-table tr.drop-after > td{box-shadow:inset 0 -2px 0 var(--ink)}
.group-card.drop-into{outline:2px dashed var(--ink);outline-offset:-2px}
.group-card.drop-before{box-shadow:0 -3px 0 var(--ink)}
.group-card.drop-after{box-shadow:0 3px 0 var(--ink)}
.ln-title{font-weight:600}
.ln-desc{margin-top:3px;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.ln-desc:hover{color:var(--ink)}
button.ln-add{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;height:auto!important;margin-top:3px;font-size:12px;font-weight:500;color:var(--muted)!important;cursor:pointer}
button.ln-add:hover{color:var(--ink)!important;text-decoration:underline}
.map-list{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:100%}
button.ml-body{display:flex!important;flex-direction:column;align-items:stretch;gap:1px;width:100%;max-width:340px;text-align:left;background:none!important;border:1px solid transparent!important;border-radius:8px!important;box-shadow:none!important;padding:4px 8px!important;margin-left:-8px;min-height:0!important;height:auto!important;color:var(--ink)!important;font-weight:400;cursor:pointer}
button.ml-body:hover{border-color:var(--line)!important;background:var(--surface)!important}
.ml-item{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:12.5px;line-height:1.5}
.ml-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-fac{flex:none;color:var(--muted);font-size:11.5px}
.ml-kind{flex:none;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 3px}
button.ml-more{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;height:auto!important;font-size:12px;font-weight:600;color:var(--muted)!important;cursor:pointer}
button.ml-more:hover{color:var(--ink)!important;text-decoration:underline}
.takeoff-table td.price-cell{text-align:right;white-space:nowrap}
.takeoff-table td.price-cell .qty-input{width:92px;border-color:var(--line);background:var(--surface)}
.calc-note{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;font-size:10.5px;color:var(--muted);white-space:nowrap}
button.reset-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0!important;min-height:0!important;border-radius:5px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;cursor:pointer}
button.reset-btn:hover{background:var(--surface-2)!important;color:var(--ink)!important}
/* Edit layer dialog */
.modal-card:has(#modalBody > .le:only-child){width:min(560px,100%)}
.le{display:flex;flex-direction:column;gap:18px}
.le textarea{resize:vertical;min-height:70px}
.le-map{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.le-map-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:13.5px}
.le-items{list-style:none;margin:0;padding:4px 0;max-height:220px;overflow:auto}
.le-items li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 14px;font-size:13px;border-top:1px solid var(--line)}
.le-items li:first-child{border-top:0}
.le-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.le-meta{flex:none;color:var(--muted);font-size:12px}
.le-empty{padding:14px;font-size:13px;color:var(--warn-ink,#7a5200);background:var(--warn-bg,#fff4d6)}
.le-foot{display:flex;align-items:center;gap:8px;padding-top:4px}
button.danger-link{color:var(--bad-ink,#a3261a)!important}
.takeoff-table.priced col.c-layer{width:23%}
.takeoff-table.priced col.c-num{width:64px}
.takeoff-table.priced col.c-uom{width:54px}
.takeoff-table.priced col.c-mat{width:110px}
.takeoff-table.priced col.c-total{width:110px}
.takeoff-table .map-list + *,.takeoff-table td > button.ghost.sm{white-space:nowrap}
.le-row{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px}
.le-row label{display:block}
.le-row select,.le-row .num-spin{width:100%}
@media (max-width:520px){.le-row{grid-template-columns:1fr 1fr}.le-row > div:last-child{grid-column:1 / -1}}

/* ---------------------------------------------------------------------------
   Phones (≤820px). The sidebar becomes a slide-in menu behind the ☰ button,
   popups fill the screen with their buttons pinned to the bottom, wide
   tables scroll sideways inside their card, and inputs are 16px so iPhone
   doesn't zoom in on every tap.
   --------------------------------------------------------------------------- */
.menu-btn,.drawer-dim{display:none}
@media (max-width:820px){
  .topbar{padding:0 12px 0 6px;gap:8px;height:56px;padding-top:env(safe-area-inset-top)}
  .brand{font-size:22px;margin-right:auto}
  .new-wrap{margin-left:0!important}
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;color:var(--ink);border-radius:12px;flex:0 0 auto}
  .menu-btn:hover{background:var(--surface-2);opacity:1}

  .app{display:block;min-height:calc(100vh - 56px)}
  #sidebar{position:fixed;z-index:60;top:0;left:0;bottom:0;height:auto;width:min(300px,84vw);transform:translateX(-102%);transition:transform .22s cubic-bezier(.2,.8,.3,1);box-shadow:0 20px 60px -10px rgba(0,0,0,.35);border-right:0;padding:calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 14px);gap:10px;overflow-y:auto;overscroll-behavior:contain}
  body.drawer-open #sidebar{transform:none}
  .drawer-dim{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,18,14,.36);opacity:0;pointer-events:none;transition:opacity .2s}
  body.drawer-open .drawer-dim{opacity:1;pointer-events:auto}
  body.drawer-open{overflow:hidden}
  #sidebar .nav-spacer{flex:0 0 4px;border-top:1px solid var(--line)}
  #sidebar .nav{padding:11px 12px;font-size:15px}
  /* Grids with a table in them must be allowed to shrink below it. */
  #sidebar .nav-label{font-size:11.5px;padding:8px 12px}

  main{padding:16px 14px calc(env(safe-area-inset-bottom) + 28px)}
  .section-head{gap:12px;margin-bottom:14px}
  .section-head h1{font-size:24px}
  .section-head .subtle{font-size:13.5px}

  /* Touch-sized controls; 16px stops iOS zooming into a field on focus. */
  input,select,textarea{font-size:16px!important}
  button{min-height:38px}
  .filter-bar .fb-search{flex:1 1 100%;min-width:0}

  /* Wide tables scroll sideways inside their card instead of squashing. */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table:has(tr > :nth-child(4)){min-width:640px}
  .tabs{scrollbar-width:none}

  /* Popups become full-screen sheets: title pinned on top, actions on the bottom. */
  .modal{padding:0;align-items:stretch}
  /* The main popup is a plain scrolling sheet: as a stretched flex item its
     card stopped at one screen tall and taller content spilled past the
     white card over the page behind (iOS showed the page through it). As a
     block it grows with its content and the backdrop scrolls. */
  #modal.modal{display:block;overscroll-behavior:contain}
  .modal-card{width:100%!important;min-height:100%;border-radius:0;display:flex;flex-direction:column}
  .modal-card.confirm-card{min-height:0;margin:auto 12px;border-radius:16px;width:auto!important;align-self:center}
  .modal-head{position:sticky;top:0;z-index:2;background:var(--surface);padding:calc(env(safe-area-inset-top) + 12px) 16px 12px}
  .modal-head h2{font-size:18px}
  #modalBody{padding:16px 16px calc(env(safe-area-inset-bottom) + 20px);flex:1}
  #modalBody .form-grid,#modalBody .form-grid.two-col,.form-grid,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:minmax(0,1fr)!important}
  #modalBody .form-grid .field{grid-column:auto!important}
  .modal-actions{position:sticky;bottom:0;background:var(--surface);margin:16px -16px calc(-20px - env(safe-area-inset-bottom));padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--line);display:flex;gap:8px}
  .modal-actions > button,.modal-actions > .btn{flex:1}
  /* Most forms end with their Save/Create button alone in a full-width
     field; keep it reachable above the keyboard-less bottom edge. */
  #modalBody .form-grid > .field.full:last-child:has(> button){position:sticky;bottom:0;z-index:2;background:var(--surface);margin:0 -16px calc(-20px - env(safe-area-inset-bottom));padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--line);display:flex;gap:8px}
  #modalBody .form-grid > .field.full:last-child:has(> button) > button{flex:1;min-height:46px}

  #toast{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);max-width:none}
}

/* Forms (public/forms.js) */
.ftpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ftpl-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.ftpl-main{cursor:pointer;min-width:0}
.ftpl-main b{display:block;font-size:14.5px}
.ftpl-fields{display:grid;gap:8px}
.ftpl-field{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px}
.ftpl-field.layout{background:var(--surface-2)}
.ftpl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ftpl-row .ftpl-label{flex:1 1 260px;font-weight:650}
.ftpl-row select{width:auto;flex:0 0 auto}
.ftpl-row .check-row{white-space:nowrap;font-size:13px}
.ftpl-n{width:22px;text-align:right;color:var(--muted);font-weight:700;font-size:12.5px;flex:0 0 auto}
.ftpl-tools{display:flex;gap:2px;margin-left:auto}
.ftpl-help{font-size:13px}
.form-preview{padding:0;background:#fff}
.form-preview iframe{width:100%;border:0;min-height:480px;display:block}

/* AI template builder */
.ai-draft{padding:14px 16px;max-height:46vh;overflow:auto;box-shadow:none}
.ai-list{margin:8px 0 0;padding-left:22px;font-size:13.5px;display:grid;gap:3px}
.ai-list li.h{list-style:none;margin:8px 0 2px -22px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;color:var(--muted)}
.ai-list ul{margin:2px 0 0;padding-left:18px;color:var(--muted)}

/* Automations (public/automations.js) */
.auto-list{display:grid;gap:10px}
.auto-card{display:flex;align-items:center;gap:14px;padding:14px 16px}
.auto-card.off{opacity:.62}
.auto-main{flex:1;min-width:0;cursor:pointer}
.auto-main b{font-size:14.5px}
.auto-last{font-size:12.5px;margin-top:4px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-recipe{display:flex;gap:12px;padding:16px}
.auto-recipe p{margin:4px 0 10px;font-size:13px}
.auto-ico{font-size:24px;line-height:1}
.auto-section{margin-bottom:18px}
.auto-label{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 2px}
.auto-actions{display:grid;gap:10px;margin-bottom:10px}
.auto-action{padding:12px 16px 16px}
.auto-action-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.auto-action-head select{width:auto;font-weight:650}
.auto-step{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}
.auto-who{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.auto-who .check-row{font-size:13px;white-space:nowrap}
.switch{position:relative;display:inline-block;width:40px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .15s;cursor:pointer}
.switch span::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked + span{background:var(--ok-ink,#1d6b35)}
.switch input:checked + span::before{transform:translateX(16px)}
.switch.big{width:46px;height:28px}.switch.big span::before{width:22px;height:22px}.switch.big input:checked + span::before{transform:translateX(18px)}

/* Work order checklist: three levels, rolled-up progress */
.meter.sm{width:54px;height:5px}
.wo-prog{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.wo-prog.ok{color:var(--ok-ink)}
.wo-ring{--p:0%;width:18px;height:18px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;
  background:conic-gradient(var(--ok-ink) var(--p), var(--line) 0);position:relative}
.wo-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface)}
.wo-ring.done{background:var(--ok-ink)}
.wo-ring.done::before{display:none}
.wo-subs-d2{border-left-style:dashed}
.wo-item.wo-d2{padding:6px 10px;font-size:13px}
.wo-item.is-done > .wo-item-head .wo-item-title{color:var(--muted)}
.wo-total{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
.wo-total .meter{width:120px;height:8px}
.wo-total b{font-variant-numeric:tabular-nums}
.wo-total.ok b{color:var(--ok-ink)}
@media (max-width:640px){.wo-item-head .tpl-count{display:none}}
.wo-caret{background:none;border:0;padding:2px;margin:0 -2px 0 -4px;color:var(--muted);display:inline-flex;align-items:center;cursor:pointer;border-radius:6px}
.wo-caret:hover{color:var(--ink);background:var(--surface-2)}
.wo-caret .chev{transition:transform .15s}
.wo-caret[aria-expanded=false] .chev{transform:rotate(-90deg)}
.wo-foldall{display:inline-flex;gap:10px;font-size:12.5px}.wo-foldall button[disabled]{opacity:.4;cursor:default;text-decoration:none}
.map-uom{font-size:12.5px;font-weight:650;color:var(--muted);text-align:center;background:var(--surface-2);border-radius:8px;padding:8px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Document browser (docbrowser.js) ---- */
.dbx{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.dbx-tree{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - 120px);overflow:auto}
.dbx-node{display:flex;align-items:center;gap:8px;width:100%;background:none;border:1px solid transparent;border-radius:8px;padding:6px 10px;font-weight:550;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.dbx-node svg{flex:none;color:var(--muted)}
.dbx-tw{flex:none;width:16px;height:16px;margin-right:-4px;border-radius:4px;display:grid;place-items:center;color:var(--muted)}
.dbx-tw:not(.none):hover{background:var(--sunk);color:var(--ink)}
.dbx-tw:not(.none)::before{content:'';width:5px;height:5px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);transition:transform .12s}
.dbx-tw.open::before{transform:rotate(45deg) translate(-1px,-1px)}
.dbx-node span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbx-node em{font-style:normal;font-size:11.5px;color:var(--muted)}
.dbx-node:hover{background:var(--surface-2)}
.dbx-node.on{background:var(--surface-2);font-weight:700}
.dbx-node.on svg{color:var(--accent-ink,#8a6410)}
.dbx-newf{align-self:flex-start;margin:6px 10px 4px}
.dbx-main{position:relative;min-height:300px;border-radius:12px}
.dbx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dbx-crumbs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.dbx-crumbs button{background:none;border:1px solid transparent;border-radius:8px;padding:5px 8px;font-weight:650;font-size:14px;color:var(--muted);cursor:pointer}
.dbx-crumbs button.on{color:var(--ink)}
.dbx-crumbs button:hover{background:var(--surface-2);color:var(--ink)}
.dbx-crumbs .sep{color:var(--line-2,var(--line))}
.dbx-search{width:200px;max-width:100%}
.dbx-progress{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}
.dbx-progress-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.dbx-progress-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.dbx-progress-bar i{display:block;height:100%;background:var(--accent, #d96e2c);transition:width .25s}
.dbx-progress-bar.ind i{animation:dbxInd 1.2s ease-in-out infinite;width:40% !important}
@keyframes dbxInd{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.dbx-progress-bar.ind i{animation:none;width:100% !important;opacity:.5}}
.dbx-selbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:13px}
.dbx-selbar .danger-link{color:var(--bad-ink,#8a1c1c)}
.dbx-hint{font-size:12px}
.dbx-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.dbx-folder{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 8px 10px 12px;cursor:pointer;user-select:none}
.dbx-folder:hover{border-color:var(--muted)}
.dbx-folder-ico{color:var(--accent-ink,#8a6410);display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-2)}
.dbx-folder-ico svg{width:20px;height:20px}
.dbx-folder-name{flex:1;min-width:0;display:grid}
.dbx-folder-name b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbx-folder-name span{font-size:12px;color:var(--muted)}
.dbx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.dbx-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;cursor:pointer;user-select:none}
.dbx-card:hover{border-color:var(--muted)}
.dbx-card.sel,.dbx-list tr.sel td{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.dbx-card.sel{border-color:var(--accent-ink,#8a6410)}
.dbx-card-meta{display:grid;gap:1px;padding:9px 34px 10px 12px;min-width:0}
.dbx-card-meta b{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbx-card-meta span{font-size:12px;color:var(--muted)}
.dbx-card-menu{position:absolute;right:4px;bottom:6px}
.dbx-check{position:absolute;top:8px;left:8px;width:18px !important;height:18px;margin:0;opacity:0;transition:opacity .12s;cursor:pointer}
.dbx-card:hover .dbx-check,.dbx-card.sel .dbx-check,.dbx-list .dbx-check{opacity:1}
.dbx-list .dbx-check{position:static}
.dbx-where{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted)}
.dbx-where svg{width:12px;height:12px}
.dbx-list td .dbx-where{display:flex;margin-top:2px}
.dbx-empty{display:grid;gap:4px;place-items:center;text-align:center;padding:48px 16px;border:1.5px dashed var(--line);border-radius:12px;color:var(--muted)}
.dbx-empty b{color:var(--ink)}
.dbx .dragging{opacity:.45}
.dbx .drop-hover{outline:2px solid var(--accent-ink,#8a6410);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 22%,var(--surface)) !important}
.dbx-dropcover{display:none;position:absolute;inset:0;border:2px dashed var(--accent-ink,#8a6410);border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);place-items:center;font-size:15px;pointer-events:none;z-index:2}
.dbx-filedrag .dbx-dropcover{display:grid}
.dbx-ghost{position:fixed;top:-100px;left:0;background:var(--ink);color:var(--surface);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:650}
.dbx-pick{display:flex;flex-direction:column;gap:1px;max-height:60vh;overflow:auto}
/* The Documents page: the same tree down the side, by record */
.docs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.docs-main{min-width:0}
.docs-scope-pick{display:none;width:100%}
@media (max-width:760px){
  .docs-layout{grid-template-columns:1fr}
  .docs-scope-pick{display:block}
  .dbx{grid-template-columns:1fr}
  .dbx-tree{display:none}
  .dbx-search{width:100%;order:5}
  .dbx-hint{display:none}
  .dbx-check{opacity:1}
}

/* ---- Document viewer overlay ---- */
.dv{position:fixed;inset:0;z-index:1000;background:rgba(18,17,15,.96);display:flex;flex-direction:column;color:#f3f2ef}
.dv-head{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#141311;border-bottom:1px solid rgba(255,255,255,.12)}
.dv-title{flex:1;min-width:0;display:grid}
.dv-title b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-title span{font-size:12.5px;color:#b9b6ae;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-actions{display:flex;gap:6px;align-items:center}
.dv-btn{background:rgba(255,255,255,.1);color:#f3f2ef;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.dv-btn:hover{background:rgba(255,255,255,.18)}
.dv-btn.solid{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.dv-x{font-size:20px;line-height:1;padding:3px 11px}
.dv-body{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:14px 64px}
.dv-frame{width:100%;height:100%;border:0;border-radius:6px;background:#fff}
.dv-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.dv-none{display:grid;gap:8px;place-items:center;text-align:center;color:#d8d5cd}
.dv-none .doc-ext{background:transparent;color:#d8d5cd;border-color:rgba(255,255,255,.3);font-size:16px;padding:10px 16px}
.dv-none span{color:#a8a59d;font-size:13px}
.dv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:34px;line-height:1;cursor:pointer}
.dv-nav:hover{background:rgba(255,255,255,.2)}
.dv-nav.prev{left:10px}.dv-nav.next{right:10px}
@media (max-width:760px){
  .dv-body{padding:8px}
  .dv-nav{top:auto;bottom:14px;transform:none;height:44px}
  .dv-actions a[title="Open in a new tab"]{display:none}
}
.dv-pages{width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 12px 12px}
.dv-pages .dv-page{flex:none;margin:0 auto;background:#fff;border-radius:4px;box-shadow:0 2px 14px rgba(0,0,0,.4);max-width:none}
.dv-loading{margin:auto;color:#b9b6ae}
.dv-zoom{display:inline-flex;gap:2px;margin-right:6px}
.dv-zoom .dv-btn{padding:6px 10px;min-width:34px}
/* Takeoff mapping: an assembly's own parts, edited for this mapping only */
.row-edit.on{color:var(--ink);background:var(--surface-2)}
.map-edited{margin:-4px 0 8px 118px;font-size:12px;color:var(--accent-ink,#8a6410);font-weight:600}
.map-parts{margin:-2px 0 12px 118px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--surface-2)}
.map-parts-head{display:grid;gap:2px;margin-bottom:8px}
.map-parts-head .subtle{font-size:12px}
.map-part{display:grid;grid-template-columns:1fr 52px 96px 28px;gap:8px;align-items:center;margin-bottom:6px}
.map-part-headrow span{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:900px){.map-parts,.map-edited{margin-left:0}}
/* AI rewrite row under a description box */
.ai-rw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:12.5px}
.ai-rw-lbl{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--accent-ink,#8a6410)}
.ai-rw.busy .ai-rw-lbl{animation:aiPulse 1.2s ease-in-out infinite}
@keyframes aiPulse{50%{opacity:.4}}

/* ---- Project timeline (Gantt) ---- */
.tl2{overflow:hidden}
.tl2-scroll{overflow-x:auto;overscroll-behavior-x:contain;position:relative}
.tl2-row{display:flex;min-width:max-content;border-bottom:1px solid var(--line)}
.tl2-lbl{position:sticky;left:0;z-index:5;flex:0 0 var(--tl-label);width:var(--tl-label);background:var(--surface);border-right:1px solid var(--line);padding:6px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.tl2-trk{position:relative;flex:none;min-height:46px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px)}
.tl2-group .tl2-lbl,.tl2-group .tl2-trk{background-color:var(--surface-2)}
.tl2-g-name{font-weight:750;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl2-g-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden}
.tl2-wo{all:unset;cursor:pointer;display:grid;gap:3px;min-width:0;padding-left:12px}
.tl2-wo-t{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl2-wo-t b{font-weight:700}
.tl2-wo:hover .tl2-wo-t{text-decoration:underline}
.tl2-wo-s{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
.tl2-wo-s .badge{font-size:10.5px;padding:1px 6px}
.tl2-risk{color:var(--warn-ink);font-weight:650}
.tl2-empty{font-size:12px;color:var(--muted);padding-left:24px}
.tl2-row.cancelled .tl2-trk,.tl2-row.cancelled .tl2-wo-t{opacity:.5}
/* axis */
.tl2-axis{position:sticky;top:0;z-index:6;border-bottom:1px solid var(--line-2,var(--line))}
.tl2-axis .tl2-trk{height:auto;min-height:30px;background:var(--surface)}
.tl2-months{position:relative;height:24px}
.tl2-month{position:absolute;top:0;height:24px;padding-top:5px;font-size:12px;font-weight:700;border-left:1px solid var(--line-2,var(--line));white-space:nowrap}
.tl2-month span{position:sticky;left:calc(var(--tl-label) + 8px);padding:0 8px}
.tl2-ticks{position:relative;height:20px;border-top:1px solid var(--line)}
.tl2-tick{position:absolute;top:0;height:20px;font-size:10.5px;color:var(--muted);text-align:center;line-height:20px}
.tl2-tick.we{background:var(--surface-2)}
.tl2-tick.now{color:var(--bad-ink);font-weight:800}
.tl2-tick.wk{padding-left:4px;text-align:left;white-space:nowrap}
.tl2-today-h{position:absolute;top:2px;transform:translateX(-50%);background:var(--bad-ink);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;z-index:2}
.tl2-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--bad-ink);opacity:.5;pointer-events:none;z-index:1}
.tl2-axis .tl2-now{top:20px}
/* marks */
.tl2-bar{position:absolute;top:calc(50% - 13px);height:26px;border-radius:6px;display:flex;align-items:center;padding:0 8px;font-size:11.5px;font-weight:650;white-space:nowrap;overflow:hidden;cursor:pointer;z-index:2;background:var(--surface);border:1.5px solid var(--ink);color:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.tl2-bar:hover{filter:brightness(.96)}
.tl2-bar.st-in_progress{background:var(--info-bg);border-color:var(--info-ink);color:var(--info-ink)}
.tl2-bar.st-done{background:var(--ok-bg);border-color:var(--ok-ink);color:var(--ok-ink)}
.tl2-bar.st-blocked{background:var(--bad-bg);border-color:var(--bad-ink);color:var(--bad-ink)}
.tl2-bar.st-cancelled{text-decoration:line-through}
.tl2-bar-note{position:absolute;top:calc(50% - 8px);font-size:11.5px;color:var(--muted);white-space:nowrap;z-index:2}
.tl2-unsched{position:absolute;top:calc(50% - 12px);height:24px;padding:0 10px;border-radius:999px;border:1.5px dashed var(--line-2,var(--muted));background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:650;cursor:pointer;z-index:2;white-space:nowrap}
.tl2-unsched:hover{color:var(--ink);border-color:var(--ink)}
.tl2-plan{position:absolute;top:calc(50% - 9px);height:18px;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,transparent);z-index:1}
.tl2-target{position:absolute;top:calc(50% - 6px);width:12px;height:12px;margin-left:-6px;background:var(--ink);transform:rotate(45deg);border-radius:2px;z-index:3;box-shadow:0 0 0 2px var(--surface-2)}
.tl2-target.late{background:var(--bad-ink)}
.tl2-target-lbl{position:absolute;top:calc(50% - 8px);font-size:11.5px;font-weight:650;white-space:nowrap;z-index:3}
.tl2-target-lbl.late{color:var(--bad-ink)}
/* legend */
.tl2-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 16px 12px;font-size:12px}
.tl2-key{display:inline-flex;align-items:center;gap:6px}
.tl2-key i{display:inline-block;width:18px;height:10px;border-radius:3px;border:1.5px solid var(--ink);background:var(--surface)}
.tl2-key i.k-in_progress{background:var(--info-bg);border-color:var(--info-ink)}
.tl2-key i.k-done{background:var(--ok-bg);border-color:var(--ok-ink)}
.tl2-key i.k-blocked{background:var(--bad-bg);border-color:var(--bad-ink)}
.tl2-key i.k-plan{border:0;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.tl2-key i.k-target{width:9px;height:9px;border:0;background:var(--ink);transform:rotate(45deg);border-radius:1px;margin:0 4px}
.tl2-key i.k-now{width:2px;height:14px;border:0;border-radius:0;background:var(--bad-ink)}
/* Checklist item types, add-type picker, copy/paste */
.wo-type{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2,var(--muted));border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:650;display:inline-flex;align-items:center;gap:5px;line-height:1.5}
.wo-type:hover{border-color:var(--muted);color:var(--ink)}
.wo-type .ico{font-size:11px}
.wo-type.t-question{background:var(--info-bg);border-color:transparent;color:var(--info-ink)}
.wo-type.t-photo{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
.wo-type.t-form{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.pop-menu .pad{display:inline-block;width:1.1em}
.wo-kebab{opacity:.55}
.wo-item-head:hover .wo-kebab,.wo-kebab[aria-expanded=true]{opacity:1}
.wo-addrow{display:flex;gap:6px;align-items:center;margin-top:2px}
.wo-addrow .wo-subadd{flex:1;margin-top:0}
.wo-addtype{width:auto;flex:none;font-size:12px;padding:4px 6px;border:1px dashed var(--line);background:transparent;border-radius:8px;color:var(--muted)}
.ck-add .wo-addtype{margin-right:6px}
.wo-clip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 16px 0;padding:8px 12px;border-radius:10px;background:var(--info-bg);color:var(--info-ink);font-size:13px}
.wo-clip-t{flex:1;min-width:0}
.wo-clip .subtle{color:inherit;opacity:.8}
.wp-list{max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 0}
.wp-row{display:flex;align-items:center;gap:10px;padding:5px 10px;font-size:13.5px}
.wp-row label{flex:1;display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0}
.wp-row label input{width:auto;flex:none}
.wp-row label.off{color:var(--muted);cursor:default}
.wp-row:hover{background:var(--surface-2)}
/* Task is the default type: its chip only shows on hover */
.wo-item-head .pop-wrap:has(> .wo-type.t-task){opacity:0;transition:opacity .12s}
.wo-item-head:hover .pop-wrap:has(> .wo-type.t-task),.wo-item-head .pop-wrap:has(> .wo-type.t-task):focus-within{opacity:1}
@media (hover:none){.wo-item-head .pop-wrap:has(> .wo-type.t-task){opacity:1}}
.wo-editable{cursor:text;border-radius:5px;padding:1px 4px;margin:-1px -4px}
.wo-editable:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.wo-editable:focus-visible{outline:2px solid var(--accent-ink,#8a6410);outline-offset:1px}
label.wp-row{cursor:pointer}
.wp-row > input{width:auto;flex:none}
label.wp-row.off{color:var(--muted);cursor:default}
.dv-name{display:inline-flex;align-items:center;gap:6px;cursor:text;border-radius:6px;padding:1px 6px;margin:-1px -6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-name:hover,.dv-name:focus-visible{background:rgba(255,255,255,.1);outline:none}
.dv-pen{flex:none;opacity:.45}
.dv-name:hover .dv-pen{opacity:.9}
.dv-name-edit{font:inherit;font-size:15px;font-weight:700;color:#f3f2ef;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:3px 8px;width:min(520px,100%)}
.dv-title .dv-name{justify-self:start}
#toast{z-index:1100}
/* PDF first-page previews in the document grids */
.doc-pdfthumb{width:100%;height:100%;display:grid;place-items:center}
.doc-pdfthumb img{width:100%;height:100%;object-fit:cover;object-position:top center;background:#fff}
/* Send for signature: attachments */
.ss-atts{display:grid;gap:4px;max-height:180px;overflow:auto}
.ss-att{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:400}
.ss-att input{width:auto;flex:none}
.ss-att span{display:grid;min-width:0}
.ss-att b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-att small{color:var(--muted);font-size:11.5px}
.ss-att:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.ss-add{display:inline-block;margin-top:6px;cursor:pointer}
.field label.ss-att{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0}
.field label.ss-att input{width:auto;margin:0}
.field label.ss-att small{font-weight:400}
.field label.ss-add{display:inline-block;width:auto;margin:6px 0 0;text-transform:none;letter-spacing:0;font-size:12.5px}

/* ---- Materials flow: Allocate page, Order page, line Allocate modal ---- */
.ok-ink{color:var(--ok-ink);font-weight:650}
.al-bar .al-search,.ord-bar .al-search{width:min(260px,100%)}
.al-hint{margin:-4px 0 12px;font-size:12.5px}
.al-scroll{max-height:calc(100vh - 250px);overflow:auto}
.al-grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
.al-grid th,.al-grid td{padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.al-grid thead th{position:sticky;top:0;z-index:2;vertical-align:bottom;text-align:left}
.al-grid .al-item{position:sticky;left:0;z-index:1;min-width:220px;max-width:300px}
.al-grid thead .al-item{z-index:3}
.al-col{min-width:96px;max-width:140px}
/* a phase / work order heading sits centred over its column of boxes */
.al-grid thead th.al-col{text-align:center}
.al-col-name,.al-col-sub{margin-inline:auto}
.al-col-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-col-sub{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
.al-col .link{font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:0}
.al-cell{text-align:center}
.al-in{width:84px;padding:5px 7px;text-align:right}
.al-in:placeholder-shown{background:var(--surface-2)}
.al-pkg td{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;position:sticky;left:0}
.al-row.al-over td{background:var(--bad-bg)}
.al-left{white-space:nowrap}
.al-done{color:var(--ok-ink);font-weight:700}
.alm-list{max-height:min(420px,55vh);overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 0}
.alm-row{display:flex;align-items:center;gap:10px;padding:6px 12px;font-weight:650;font-size:13.5px}
.alm-row + .alm-row{border-top:1px solid var(--line)}
.alm-row.alm-wo{padding-left:30px;font-weight:500}
.alm-name{flex:1;min-width:0}
.alm-row .num-in{width:90px;padding:5px 7px;text-align:right}
.alm-uom{width:28px}
.alm-group{padding:8px 12px 2px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;border-top:1px solid var(--line)}
.ord-for{display:flex;align-items:center;gap:8px;font-weight:650}
.ord-for select{min-width:240px;max-width:100%}
@media (max-width:600px){.ord-for{flex:1 1 100%;min-width:0}.ord-for select{min-width:0;flex:1}}
.ord-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media (max-width:1180px){.ord-layout{grid-template-columns:minmax(0,1fr)}}
.ord-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px}
@media (max-width:1180px){.ord-side{position:static}}
.ord-delivery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ord-table{width:100%;border-collapse:collapse}
.ord-table th,.ord-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.ord-table td.money,.ord-table th.money{text-align:right;white-space:nowrap}
.ord-ck{width:34px}
.ord-pkg td{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.ord-row.sel td{background:var(--surface-2)}
.ord-qty .num-in{width:84px;padding:5px 7px;text-align:right}
.ord-src{max-width:200px}
.ord-src.need{border-color:var(--warn-ink);box-shadow:0 0 0 2px var(--warn-bg)}
/* the summary + Create button stay pinned to the bottom of the screen */
.ord-foot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 -6px 18px rgba(0,0,0,.06)}
.ord-sum{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px}
.ord-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap}
.ord-chip.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent;font-weight:650}
.ord-go{flex:0 0 auto}
@media (max-width:600px){.ord-foot{flex-direction:column;align-items:stretch}.ord-go{width:100%}}
.ord-send-row{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(180px,260px) 110px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.ord-send-row:first-child{border-top:0;padding-top:0}
.ord-send-status{font-size:12.5px}
@media (max-width:700px){.ord-send-row{grid-template-columns:24px minmax(0,1fr)}.ord-send-to,.ord-send-status{grid-column:2}}
.ord-review-actions{margin-top:16px;gap:10px;align-items:center}

/* ---- Project tabs with several sections: a switcher, one section at a time ---- */
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 16px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;width:max-content;max-width:100%}
.subnav-btn{background:transparent;border:0;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:650;color:var(--muted);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.subnav-btn:hover{color:var(--ink);background:var(--surface);opacity:1}
.subnav-btn.sel{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.subnav-n{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 8px}
.subnav-btn.sel .subnav-n{background:var(--surface-2)}
.subnav-n.warn{background:var(--warn-bg);color:var(--warn-ink)}
.subnav-n.info{background:var(--info-bg);color:var(--info-ink)}
.subnav-n.bad{background:var(--bad-bg);color:var(--bad-ink)}
/* sections used to stack, so their first card carried a top margin */
#view-job [id^="jsub-"] > .card:first-child{margin-top:0 !important}
@media (max-width:600px){.subnav{width:100%;overflow-x:auto;flex-wrap:nowrap}.subnav-btn{flex:0 0 auto}}

/* ---- A form's page: assignment strip + filling it in on a desktop ---- */
.form-assign{display:flex;flex-wrap:wrap;gap:0;margin-bottom:16px;overflow:hidden}
.fa-cell{display:flex;flex-direction:column;gap:4px;padding:12px 18px;border-right:1px solid var(--line);min-width:160px}
.fa-cell b{font-weight:650}
.fa-cell select,.fa-cell input{min-width:170px;padding:6px 9px}
.fa-note{flex:1 1 100%;padding:12px 18px;border-top:1px solid var(--line);white-space:pre-wrap;display:flex;flex-direction:column;gap:4px}
.form-empty{text-align:center;padding:36px 20px}
.form-empty p{margin:6px 0 16px}
.ff-card{padding:8px 0;max-width:820px}
.ff-q{padding:14px 22px;border-top:1px solid var(--line);scroll-margin:90px}
.ff-q:first-child{border-top:0}
.ff-q.miss{background:var(--bad-bg);box-shadow:inset 3px 0 0 var(--bad-ink)}
.ff-label{font-weight:650;font-size:14px;margin-bottom:8px;display:flex;gap:6px;align-items:baseline}
.ff-q.done .ff-label::after{content:'✓';color:var(--ok-ink);font-weight:800;margin-left:auto}
.ff-label .req{color:var(--bad-ink)}
.ff-help{font-size:12.5px;color:var(--muted);margin:-4px 0 8px}
.ff-heading{margin:0;padding:18px 22px 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line)}
.ff-heading:first-child{border-top:0}
.ff-info{padding:12px 22px;font-size:13.5px;color:var(--ink-2,var(--ink));background:var(--surface-2);border-top:1px solid var(--line);white-space:pre-wrap}
.ff-in{width:100%;max-width:520px}
textarea.ff-in{max-width:none}
.ff-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ff-seg button{background:var(--surface);border:0;border-right:1px solid var(--line);border-radius:0;padding:8px 18px;font-weight:650;color:var(--ink)}
.ff-seg button:last-child{border-right:0}
.ff-seg button.on{background:var(--ink);color:#fff}
.ff-seg button.on.pass,.ff-seg button.on.yes{background:var(--ok-ink)}
.ff-seg button.on.fail,.ff-seg button.on.no{background:var(--bad-ink)}
.ff-seg + textarea{margin-top:8px}
.ff-chips{display:flex;flex-wrap:wrap;gap:6px}
.ff-chips button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;color:var(--ink)}
.ff-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ff-check{font-size:14px}
.ff-photos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ff-ph{position:relative}
.ff-ph img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.ff-ph .x-del{position:absolute;top:4px;right:4px;background:var(--surface)}
.ff-ph-add{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border:1.5px dashed var(--line);border-radius:8px;font-weight:650;cursor:pointer;color:var(--muted)}
.ff-people summary{cursor:pointer;padding:8px 12px;border:1px solid var(--line);border-radius:9px;max-width:520px;list-style:none}
.ff-people summary::-webkit-details-marker{display:none}
.ff-people-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;padding:10px 4px 0;max-width:620px}
.ff-parts{width:100%;max-width:620px;border-collapse:collapse;margin-bottom:8px}
.ff-parts td{padding:6px 8px;border-bottom:1px solid var(--line)}
.ff-parts .num-in{width:80px;padding:5px 7px;text-align:right}
.ff-part-add{max-width:520px}
.ff-sig{max-width:520px}
.ff-sig img{max-height:90px;display:block;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff;margin-bottom:4px}
.ff-sig .sig-pad{width:100%;height:140px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ff-foot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;max-width:820px;margin-top:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 -6px 18px rgba(0,0,0,.06)}
.ff-foot #ffSaved{flex:1;font-size:12.5px}
@media (max-width:600px){.fa-cell{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--line)}.ff-q{padding:12px 14px}.ff-foot{flex-wrap:wrap}.ff-foot button{flex:1 1 100%}}

/* ---- Labour report ---- */
.lab-bar{height:4px;border-radius:4px;background:var(--surface-2);margin-top:4px;overflow:hidden;min-width:60px}
.lab-bar i{display:block;height:100%;background:var(--ink)}
.lab-bar i.over{background:var(--bad-ink)}
.lab-weeks{display:flex;align-items:flex-end;gap:6px;height:150px;padding:18px 0 0;overflow-x:auto}
.lab-week{flex:0 0 44px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.lab-week i{display:block;width:26px;background:var(--ink);border-radius:5px 5px 0 0}
.lab-week-h{font-size:11px;font-weight:700}
.lab-week-l{font-size:10.5px;color:var(--muted);white-space:nowrap}

/* ---- Rail layout (DESIGN.md): groups with counts on the left, the list on the right ---- */
.rail-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.rail-main{min-width:0}
.rail{display:grid;gap:14px;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;padding:2px 2px 8px;scrollbar-width:thin}
.rail-sec{display:grid;gap:1px}
.rail-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:0 10px 4px}
.rail-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;color:var(--ink-2,#4a4843);text-align:left;padding:7px 10px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}
.rail-item:hover{background:var(--surface);opacity:1}
.rail-item.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.rail-item.empty{color:var(--muted);font-weight:500}
.rail-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-n{flex:0 0 auto;color:var(--muted);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.rail-n.warn{background:var(--warn-bg);color:var(--warn-ink);font-weight:700;border-radius:999px;padding:0 7px}
.rail-n.bad{background:var(--bad-bg);color:var(--bad-ink);font-weight:700;border-radius:999px;padding:0 7px}
.rail-n.info{background:var(--info-bg);color:var(--info-ink);font-weight:700;border-radius:999px;padding:0 7px}
.rail-children{display:grid;gap:1px;margin:2px 0 4px 12px;padding-left:8px;border-left:1px solid var(--line)}
.rail-sub{font-size:12.5px;font-weight:550;padding:5px 10px}
@media (max-width:820px){
  .rail-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .rail{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-sec,.rail-children{display:flex;gap:4px;margin:0;padding:0;border:0}
  .rail-title{display:none}
  .rail-item{white-space:nowrap;width:auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px}
  .rail-item.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .rail-item.on .rail-n{color:inherit;opacity:.8}
}

/* ---- Bill T&M work / invoice detail ---- */
.btm-list{display:grid;gap:10px;max-height:min(440px,55vh);overflow:auto}
.btm-group{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.btm-head{font-size:14px}
.btm-amt{margin-left:auto;font-weight:700}
.btm-lines{width:100%;border-collapse:collapse;margin:6px 0 0;font-size:13px}
.btm-lines td{padding:4px 6px 4px 26px;border-top:1px solid var(--line)}
.btm-lines td.money{padding-left:6px;text-align:right;white-space:nowrap}
.btm-total{padding:9px 0;font-size:15px}
.inv-lines{width:100%}
.inv-totals{display:grid;grid-template-columns:1fr auto;gap:4px 18px;margin:12px 0 0 auto;max-width:300px;font-size:13.5px}
.inv-totals dt{color:var(--muted)}
.inv-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.chip-tag{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;margin:1px 2px 1px 0;white-space:nowrap}
.danger-text{color:var(--bad-ink)}

/* ---- Settings sections: one card, grouped fields, one Save ---- */
.set-card{max-width:860px}
.set-card > .group-head{background:var(--surface);padding:14px 18px;cursor:default;font-size:15px;font-weight:700}
.set-desc{margin:0 0 6px;font-size:13px}
.set-group{padding:14px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.set-group:first-of-type{border-top:0;margin-top:0;padding-top:4px}
.set-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:10px}
.set-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface);border-radius:0 0 var(--r-card) var(--r-card)}
.set-foot #set-state{margin-right:auto;font-size:12.5px}
.imp-table td{vertical-align:top}
.imp-note{font-size:12px;max-width:420px}
.imp-cols{font-size:12px;color:var(--muted);margin-top:4px;max-width:420px}
.imp-cols summary{cursor:pointer}

/* Home: the one link above the sections, set apart with an icon and a rule */
.nav-l{display:inline-flex;align-items:center;gap:9px;min-width:0}
.nav-ic{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.nav-home-group{padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.nav-home-group .nav{font-size:14px;font-weight:750;color:var(--ink);padding:9px 10px}

/* ---- Top bar: brand left, search in the middle, New + notifications right ---- */
.topbar{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,560px) minmax(160px,1fr);justify-content:initial}
.tb-left{display:flex;align-items:center;gap:6px;min-width:0}
.tb-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.tb-new{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 16px 8px 12px;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tb-new svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.tb-bell-wrap{position:relative}
.tb-bell{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.tb-bell:hover{background:var(--surface-2);opacity:1}
.tb-bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.tb-bell .notif-bell-dot{top:6px;right:7px;border-color:var(--surface)}
@media (max-width:820px){
  .topbar{grid-template-columns:minmax(0,1fr) auto}
  .tb-new{padding:8px 12px}
}
/* ---- Sidebar: who's signed in, above Field app; opens My profile ---- */
.nav-me{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0 6px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:left;color:var(--ink);cursor:pointer}
.nav-me:hover{background:var(--surface-2);opacity:1}
.nav-me-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.nav-me-t b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-me-t span{font-size:11.5px;color:var(--muted)}
.me-av{flex:0 0 auto;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;object-fit:cover}
.me-av.lg{width:64px;height:64px;font-size:20px}
.me-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
/* Home selected: back to the usual selected colours */
.nav-home-group .nav.active{color:#fff}

/* ---- Finance: overview and accounting ---- */
.fin-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.fin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.fin-grid{grid-template-columns:minmax(0,1fr)}}
.fin-rows{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;font-size:13.5px}
.fin-rows dt{color:var(--ink-2,var(--ink))}
.fin-rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.fin-fc{width:100%;font-size:13.5px}
.fin-grid.fin-grid-2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1100px){.fin-grid.fin-grid-2{grid-template-columns:minmax(0,1fr)}}
.fin-fc tr.fin-low td{background:var(--warn-bg)}
.pnl-table td,.pnl-table th{font-variant-numeric:tabular-nums}
.pnl-table tr.total-row td{border-top:1px solid var(--line)}
.fin-queue{list-style:none;margin:0;padding:0}
.fin-queue li{padding:7px 0;border-top:1px solid var(--line)}
.fin-queue li:first-child{border-top:0;padding-top:0}
.fin-queue .link{text-align:left;font-weight:500}
.fin-queue b{margin-right:4px}
.acc-group td{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.acc-group td.money{text-transform:none;letter-spacing:0;color:var(--ink);font-size:12.5px}
.stmt td,.stmt th{padding:8px 14px}
.stmt-key td{font-weight:750;font-size:14.5px;border-top:2px solid var(--ink);background:var(--surface)}
.acc-ledger{max-height:60vh;overflow:auto}
.modal-card.modal-wide{width:min(900px,100%)}
.je-lines{margin:14px 0 8px}
.je-table{width:100%;border-collapse:collapse}
.je-table th,.je-table td{padding:5px 6px;text-align:left}
.je-table .num-in{width:110px;text-align:right}
.je-table select{min-width:220px}
.rules-table select{min-width:220px;max-width:100%}
.period-sel{width:auto;min-width:130px;padding:4px 8px;border-radius:999px;font-weight:650;font-size:12.5px}
.period-sel.tone-closed{background:var(--bad-bg);color:var(--bad-ink);border-color:transparent}
.period-sel.tone-soft_closed{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.audit-changes{font-size:12.5px;max-width:420px}
.audit-changes > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){.fin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.rcv-table{width:100%;border-collapse:collapse}
.rcv-table th,.rcv-table td{padding:8px 10px;vertical-align:top}
.rcv-table .num-in{width:96px;text-align:right}
.rcv-table tfoot td{border-top:1px solid var(--line);font-weight:650}

/* ---- Payments ---- */
.pay-table{width:100%;border-collapse:collapse;font-size:13.5px}
.pay-table th,.pay-table td{padding:7px 8px;vertical-align:middle;border-top:1px solid var(--line)}
.pay-table thead th{border-top:0}
.pay-table .num-in{width:110px;text-align:right}
.pay-table input[type=checkbox]{width:auto}
.pay-empty{padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px}
.pay-sum{margin-right:auto;align-self:center;font-size:13px}
.pay-dl{grid-template-columns:auto 1fr}
.pay-dl dd{text-align:left}
tr.row-void td{opacity:.55}
tr.row-void td .badge{opacity:1}

/* ---- Banking ---- */
.bk-head{display:flex;align-items:center;gap:18px;padding:16px 18px;margin-bottom:12px;flex-wrap:wrap}
.bk-head h2{margin:0 0 2px;font-size:18px}
.bk-head-l{flex:1;min-width:200px}
.bk-bal{display:flex;gap:22px;margin:0}
.bk-bal dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.bk-bal dd{margin:2px 0 0;font-weight:750;font-size:16px;font-variant-numeric:tabular-nums}
.bk-table .bk-what{max-width:360px}
.bk-table .bk-what .btn{margin-left:6px}
.bk-seg{margin:0 0 14px;display:flex;flex-wrap:wrap}
.bk-seg button{flex:1;white-space:nowrap}
.bk-cands{display:grid;gap:8px}
.bk-cand{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.bk-cand:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.bk-cand input{width:auto}
.bk-cand .est-sub{display:block}
.bki-grid .field label{font-size:11.5px}
.warn-ink{color:var(--warn-ink);font-weight:650}
.wip-table td,.wip-table th{white-space:nowrap}
.wip-table td:first-child{white-space:normal}
.fin-fc td,.fin-fc th{white-space:nowrap}

/* the top bar's New: a black circle with a yellow plus */
.tb-new{width:38px;height:38px;padding:0!important;border-radius:50%;justify-content:center;background:var(--ink);color:var(--accent);border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tb-new:hover{background:var(--ink);opacity:.88}
.tb-new svg{width:20px;height:20px;stroke-width:2.8}

/* long text in a table cell: two lines, the rest in the record */
.clamp-cell{max-width:340px;min-width:180px}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* ---- Record sheet: a detail view in a modal (openExpense) ---- */
.modal-card.modal-sheet{width:min(980px,100%)}
.rs-head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.rs-kicker{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rs-title{margin:2px 0 8px;font-size:22px;line-height:1.2}
.rs-chips{display:flex;gap:6px;flex-wrap:wrap}
.rs-amt{text-align:right;flex:0 0 auto}
.rs-amt-v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.rs-callout{margin:0 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-callout-act{margin-left:auto;display:flex;gap:6px}
.rs-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
.rs-sec{margin-bottom:18px}
.rs-sec h3{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.rs-dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0;font-size:13.5px}
.rs-dl dt{color:var(--muted)}
.rs-dl dd{margin:0}
.rs-dl>div{display:contents}.rs-dl>div[hidden],.rs-dl>[hidden]{display:none}
.rs-dl-full{grid-column:1/-1}
/* the sheet being edited in place: the same rows, as fields */
.rs-editing .rs-dl{align-items:center;gap:8px 14px}
.rs-editing .rs-dl dt{font-weight:600;color:var(--ink)}
.rs-editing .rs-dl dd>input:not([type=checkbox]),.rs-editing .rs-dl dd>select{width:100%;max-width:340px;box-sizing:border-box}
.rs-editing .rs-dl dd .field-hint{margin-top:3px}
.rs-editing .rs-dl dd input[type=date]{max-width:180px}
.rs-editing textarea#ex-desc{width:100%;box-sizing:border-box;font:inherit;resize:vertical}
.rs-editing .rs-dl .check-row{margin:0}
.rs-text{margin:0;white-space:pre-wrap;word-break:break-word;font-size:13.5px;line-height:1.5;max-height:260px;overflow:auto}
.rs-side{border-left:1px solid var(--line);padding-left:22px}
.rs-receipt{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--surface-2)}
.rs-receipt img{display:block;width:100%;max-height:320px;object-fit:contain}
.rs-empty{padding:12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:13px;margin-bottom:10px}
.rs-docs{margin-bottom:8px;font-size:13px}
.rs-line{display:flex;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:6px;font-size:13px;text-align:left;color:var(--ink)}
.rs-line:hover{background:var(--surface-2);opacity:1}
.rs-hist{list-style:none;margin:0;padding:0;font-size:12.5px}
.rs-hist li{padding:5px 0;border-top:1px solid var(--line)}
.rs-hist li:first-child{border-top:0}
@media (max-width:760px){.rs-body{grid-template-columns:minmax(0,1fr)}.rs-side{border-left:0;padding-left:0}.rs-head{flex-direction:column}.rs-amt{text-align:left}.rs-dl{grid-template-columns:110px 1fr}}
.name-cell{min-width:150px;max-width:210px}

/* Invoice client activity (sent / opened / viewed) and online payment settings */
.inv-seen{color:var(--muted,#8a8f96)}
.inv-seen.on{color:var(--ok-ink,#1d6b3a);font-weight:600}
.inv-track{border:1px solid var(--line,#e3e1dc);border-radius:10px;padding:12px 14px}
.inv-track-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.inv-track-stats > div{display:grid;gap:2px;min-width:0}
.inv-track-stats > div > span{font-size:11.5px;color:var(--muted,#8a8f96);text-transform:uppercase;letter-spacing:.04em}
.inv-track-stats b{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.inv-events{list-style:none;margin:10px 0 0;padding:0;max-height:220px;overflow:auto}
.inv-events li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line,#eceae6);font-size:13px}
.inv-events li time{color:var(--muted,#8a8f96);white-space:nowrap;font-size:12px}
.inv-events li.ev-paid{font-weight:600;color:var(--ok-ink,#1d6b3a)}
.inv-events li.ev-payment_failed{color:var(--bad-ink,#9b2c1c)}
.op-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line,#eceae6)}
.op-row .badge{flex:none;margin-top:2px}
.op-row code{font-size:12px;overflow-wrap:anywhere}
@media (max-width:560px){.inv-track-stats{grid-template-columns:1fr}}
.inv-events li.ev-email_scanned{color:var(--muted,#8a8f96)}
.inv-events li.ev-refunded,.inv-events li.ev-disputed{color:var(--warn-ink,#8a6410);font-weight:600}
/* Pencil on a table row: edit it in place without opening it. */
.row-edit{background:none;border:1px solid transparent;color:var(--muted);padding:4px 6px;border-radius:8px;line-height:0;cursor:pointer;vertical-align:middle}
.row-edit:hover,.row-edit:focus-visible{color:var(--ink);border-color:var(--line);background:var(--surface)}
/* Work order page: someone in the field asking to be let in. */
.access-ask{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13.5px}
/* Automation builder: conditions, per-step conditions, placeholders, test results. */
.auto-conds{display:grid;gap:8px}
.auto-cond-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.auto-cond-row select,.auto-cond-row input{width:auto;min-width:0;max-width:260px}
.auto-cond-row .x-del{margin-left:2px}
.auto-multi{display:flex;flex-wrap:wrap;gap:4px 12px}
.auto-multi .check-row{font-size:13px;white-space:nowrap}
.auto-step-when{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;display:grid;gap:8px}
.auto-wait{background:var(--bg);box-shadow:none;border-style:dashed}
.auto-vars{margin-top:12px;font-size:13px}
.auto-vars summary{cursor:pointer;font-weight:650}
.auto-var-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.auto-var{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:3px 8px}
.auto-test-result{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--bg);font-size:13.5px}
.auto-test-conds{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.auto-test-conds li.ok{color:var(--ok-ink,#166534)}
.auto-test-conds li.no{color:var(--bad-ink,#991b1b)}
.auto-test-steps{margin:0;padding-left:20px;display:grid;gap:3px}
@media (max-width:700px){.auto-cond-row select,.auto-cond-row input{max-width:100%;flex:1 1 140px}}
/* Time off on the schedule: approved is a solid "off" tag (and the day is
   blocked), asked-for is dashed until it's approved. */
.off-tag{font-size:11.5px;font-weight:650;padding:3px 7px;border-radius:7px;background:var(--warn-bg);color:var(--warn-ink);margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off-tag.pending{background:transparent;border:1px dashed var(--warn-ink);font-weight:600}
.team-cell.is-off{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(138,100,16,.07) 6px 12px)}
.check-row.is-off{color:var(--muted)}
.sv-card.sv-job{border-style:dashed}
/* Part-day time off in the Hours grid. */
.wk-off{position:absolute;left:2px;right:2px;border-radius:6px;background:repeating-linear-gradient(135deg,var(--warn-bg) 0 6px,rgba(138,100,16,.12) 6px 12px);color:var(--warn-ink);font-size:11px;font-weight:700;padding:3px 6px;overflow:hidden;pointer-events:none;border:1px solid rgba(138,100,16,.25)}
.wk-off.pending{background:transparent;border:1px dashed var(--warn-ink)}

/* ===== Schedule (public/schedule.js) ===================================== */
.sc-toolbar{margin-bottom:8px}
.sc-toolbar .tb-gap,.sc-crews .tb-gap{flex:1 1 0}
.sc-nav{display:flex;align-items:center;gap:6px}
.sc-nav .icon-btn{padding:6px 10px}
/* fixed width (fits the longest, a full day name) so the toolbar never shifts as the date changes */
.sc-date{position:relative;font-weight:750;font-size:15px;margin-left:6px;cursor:pointer;padding:4px 8px;border-radius:8px;width:265px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-date:hover{background:var(--surface)}
.sc-date input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.sc-crews{margin-bottom:14px}
.sc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px;align-items:start}
.sc-main{min-width:0}
.sc-grid-card{padding:0;overflow:hidden}
.sc-scroll{overflow:auto;max-height:calc(100vh - 250px)}

/* Rows, heads, cells (Week and Day share these) */
.sc-week,.sc-day{display:grid;min-width:max-content}
.sc-week{min-width:100%}
.sc-corner,.sc-colhead,.sc-hours{position:sticky;top:0;z-index:3;background:var(--surface-2);border-bottom:1px solid var(--line)}
.sc-corner{left:0;z-index:4}
.sc-colhead{padding:8px 10px;display:flex;gap:6px;align-items:baseline;font-size:12px;color:var(--muted);cursor:pointer;border-left:1px solid var(--line)}
.sc-colhead b{font-size:15px;color:var(--ink)}
.sc-colhead.is-today{background:var(--accent-soft)}
.sc-colhead.is-today b{color:var(--accent-ink)}
.sc-colhead small{margin-left:auto;font-size:11px;white-space:nowrap}
.sc-colhead.is-weekend{background:var(--bg)}
.sc-rowhead{position:sticky;left:0;z-index:2;background:var(--surface);display:flex;gap:9px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);min-width:0}
.sc-rowhead div{min-width:0;display:flex;flex-direction:column}
.sc-rowhead b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-rowhead small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.sc-rowhead.is-crew{background:var(--surface-2)}
.sc-rowhead.is-none b{color:#8a4b0b}
.sc-dot{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.sc-grouplabel{position:sticky;left:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px;background:var(--bg);border-bottom:1px solid var(--line)}
.sc-cell{border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px;min-height:62px;display:flex;flex-direction:column;gap:4px;transition:background .12s}
.sc-cell.is-today{background:rgba(11,95,89,.07)}
.sc-cell.is-weekend{background:var(--surface-2)}
.sc-cell.is-off{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(138,100,16,.07) 7px 14px)}
.drop-hi{outline:2px dashed var(--ink);outline-offset:-3px;background:rgba(11,95,89,.18)!important}
body.sc-dragging .sc-cell,body.sc-dragging .sc-lane,body.sc-dragging .sc-anytime-cell,body.sc-dragging .sc-mcell,body.sc-dragging .sc-hcol,body.sc-dragging .sc-hanycell{cursor:copy}

/* A visit */
.sc-card{position:relative;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:8px;padding:5px 8px;cursor:grab;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 1px rgba(0,0,0,.03);font-size:12px;line-height:1.3}
.sc-card:hover{box-shadow:0 3px 10px -3px rgba(0,0,0,.18)}
.sc-card b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-card small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-card-time{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-card.is-job{border-style:dashed;border-left-style:solid}
.sc-card.is-open{background:#fff8ec}
.sc-card.status-done{opacity:.6}
.sc-card.status-done b{text-decoration:line-through}
.sc-off{font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;background:var(--warn-bg);color:var(--warn-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-off.pending{background:transparent;border:1px dashed var(--warn-ink)}
.sc-load{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--muted)}
.sc-load i{display:block;height:4px;border-radius:4px;background:var(--ink);opacity:.55;flex:0 0 auto;max-width:70%}
.sc-load.full i{background:var(--ok-ink);opacity:.8}
.sc-load.over i{background:var(--bad-ink);opacity:.9}
.sc-load.over span{color:var(--bad-ink)}

/* Day: timeline */
.sc-hours{position:sticky;top:0;height:36px;border-left:1px solid var(--line)}
.sc-hours span{position:absolute;top:10px;font-size:11px;font-weight:650;color:var(--muted);transform:translateX(4px)}
.sc-anyhead{cursor:default}
.sc-anytime-cell{border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px;display:flex;flex-direction:column;gap:4px;min-height:54px;background:var(--surface-2)}
.sc-lane{position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line);min-height:54px}
.sc-lane.is-off{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(138,100,16,.06) 7px 14px)}
.sc-hourline{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.sc-bar-wrap{position:absolute;height:42px}
.sc-bar-wrap .sc-card{height:100%;padding:3px 7px}
.sc-offband{position:absolute;top:4px;bottom:4px;border-radius:7px;background:repeating-linear-gradient(135deg,var(--warn-bg) 0 7px,rgba(138,100,16,.12) 7px 14px);border:1px solid rgba(138,100,16,.25);color:var(--warn-ink);font-size:11px;font-weight:700;padding:4px 8px;pointer-events:none;overflow:hidden;white-space:nowrap}
.sc-offband.pending{background:transparent;border-style:dashed}
.sc-now{position:absolute;top:0;bottom:0;width:2px;background:#d9480f;z-index:1;pointer-events:none}

/* Month */
.sc-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sc-mhead{padding:8px 10px;font-size:11.5px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:var(--surface-2);border-bottom:1px solid var(--line)}
.sc-mcell{min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-mcell.is-other{background:var(--surface-2)}
.sc-mcell.is-other .sc-mdate{color:var(--muted)}
.sc-mcell.is-weekend{background:var(--surface-2)}
.sc-mcell.is-today .sc-mdate{background:var(--ink);color:#fff}
.sc-mdate{align-self:flex-start;background:none;border:0;padding:2px 7px;border-radius:99px;font-weight:750;font-size:12.5px;color:var(--ink);cursor:pointer}
.sc-mdate:hover{background:var(--line)}
.sc-mchip{font-size:11.5px;padding:2px 6px;border-radius:5px;background:var(--surface-2);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}
.sc-mchip span{color:var(--muted);font-weight:700}
.sc-mchip.is-job{border-left-style:dashed}

/* Hours */
.sc-hhead,.sc-hany{display:grid;grid-template-columns:62px repeat(7,minmax(0,1fr))}
.sc-hany{border-bottom:1px solid var(--line)}
/* a day column never gets narrower than a readable card: the week scrolls sideways instead */
.sc-hours-card{overflow-x:auto}
.sc-hhead,.sc-hany,.sc-hscroll{min-width:980px}
.sc-hgut{font-size:10.5px;color:var(--muted);padding:8px 6px;font-weight:650}
.sc-hanycell{border-left:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:3px;min-height:40px}
.sc-hscroll{max-height:calc(100vh - 330px)}
.sc-hbody{display:grid;grid-template-columns:62px minmax(0,1fr)}
.sc-hgut-times{position:relative}
.sc-hgut-times span{position:absolute;right:8px;font-size:10.5px;color:var(--muted);transform:translateY(-6px)}
.sc-hcols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative}
.sc-hcol{position:relative;border-left:1px solid var(--line)}
.sc-hcol.is-today{background:rgba(11,95,89,.06)}
.sc-hline{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.sc-hblock{position:absolute;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:7px;padding:3px 7px;font-size:11.5px;overflow:hidden;cursor:grab;display:flex;flex-direction:column;z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.sc-hblock b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-hblock small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-hblock.is-job{border-style:dashed;border-left-style:solid}
.sc-hblock.is-dragging{opacity:.35}
.sc-hblock.status-done{opacity:.6}
.sc-hblock.is-open{background:var(--warn-bg);border-color:#ecd28f;border-left-color:var(--warn-ink)}
/* Visits at the same time, as one card: layered edges, a dot per visit */
.sc-hstack{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;font:inherit;font-size:11.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2,#d9d6cf);border-radius:7px;padding:3px 7px;overflow:hidden;cursor:pointer;min-height:0;box-shadow:3px 3px 0 -1px var(--surface),3px 3px 0 0 var(--line-2,#d9d6cf),6px 6px 0 -1px var(--surface),6px 6px 0 0 var(--line-2,#d9d6cf)}
.sc-hstack:hover{border-color:var(--accent)}
.sc-hstack b{font-size:12px}
.sc-hstack small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sc-hdots{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.sc-hdots i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.sc-hdots i.done{opacity:.35}
.sc-hnow{position:absolute;left:0;right:0;height:2px;background:var(--pop);z-index:2;pointer-events:none}
.sc-hnow::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--pop)}
.sc-stack-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.sc-stack-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-top:1px solid var(--line);background:var(--surface);font:inherit;text-align:left;cursor:pointer;border-radius:0;box-shadow:none;min-height:0;color:var(--ink)}
.sc-stack-row:first-child{border-top:0}
.sc-stack-row:hover{background:var(--surface-2)}
.sc-stack-time{font-size:12px;color:var(--muted);width:92px;flex:none;font-variant-numeric:tabular-nums}
.sc-stack-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sc-stack-main b,.sc-stack-main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-stack-main small{color:var(--muted);font-size:12px}
.sc-stack-who{font-size:12px;color:var(--muted);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-resize{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.sc-hoff{position:absolute;left:3px;right:3px;border-radius:7px;background:repeating-linear-gradient(135deg,var(--warn-bg) 0 6px,rgba(138,100,16,.12) 6px 12px);color:var(--warn-ink);font-size:11px;font-weight:700;padding:3px 6px;pointer-events:none;border:1px solid rgba(138,100,16,.25)}
.sc-hoff.pending{background:transparent;border-style:dashed}
.sc-ghost{position:fixed;z-index:1000;pointer-events:none;background:var(--ink);color:#fff;border-radius:7px;font-size:12px;font-weight:700;padding:4px 8px;opacity:.88;box-shadow:0 8px 24px -6px rgba(0,0,0,.35)}

/* To schedule rail */
.sc-rail{position:sticky;top:76px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 100px)}
.sc-rail.drop-hi{outline:2px dashed var(--bad-ink)}
.sc-rail-head{display:flex;flex-direction:column}
.sc-rail-head b{font-size:14px}
.sc-rail-head span{font-size:11.5px}
.sc-rail-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:999px;background:var(--sunk);border:1px solid var(--line)}
.sc-rail-tabs button{border:0;border-radius:999px;background:transparent;color:var(--muted);padding:6px 8px;font-size:12.5px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.sc-rail-tabs button:hover{color:var(--ink)}
.sc-rail-tabs button.sel{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.sc-tabn{font-size:11px;font-weight:700;min-width:18px;padding:0 5px;border-radius:999px;background:var(--line);color:var(--muted);line-height:17px}
.sc-rail-tabs button.sel .sc-tabn{background:var(--ink);color:#fff}
.sc-rail-list{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:60px}
.sc-item{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;cursor:grab;background:var(--surface);display:flex;flex-direction:column;gap:1px}
.sc-item:hover{border-color:var(--ink)}
.sc-item small{color:var(--muted);font-size:12px}
.sc-item-top{display:flex;align-items:center;gap:6px}
.sc-item-top .link{margin-left:auto}
.sc-item.is-job{border-style:dashed}
.sc-empty{padding:8px;margin:0}
.sc-rail-foot{font-size:11.5px;margin:0;text-align:center}
.sc-coming{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 16px}
.sc-coming summary{cursor:pointer;font-weight:700}
.sc-coming h4{margin:14px 0 6px}

@media (max-width:1100px){
  .sc-wrap{grid-template-columns:minmax(0,1fr)}
  .sc-rail{position:static;max-height:none}
  .sc-rail-list{max-height:320px}
}
@media (max-width:700px){
  .sc-search{flex:1;width:auto}
  .sc-scroll{max-height:none}
  .sc-week{grid-template-columns:130px repeat(7,minmax(120px,1fr))!important}
  .sc-mcell{min-height:80px}
}
.sc-crewline{font-size:11px;color:var(--muted);padding:2px 6px;border-radius:5px;border-left:3px solid var(--c);background:var(--surface-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.sc-bar-wrap.is-crew .sc-crewline{height:100%;padding:0 6px;line-height:14px;font-size:10.5px;opacity:.85}
/* Work week editor (Settings → Business hours, Team → a person's own hours). */
.wk-edit{display:grid;gap:6px}
.wk-edit-row{display:grid;grid-template-columns:150px 120px auto 120px 1fr;gap:8px;align-items:center}
.wk-edit-row input[type=time]{width:120px}
.wk-edit-row.off input[type=time]{opacity:.4}
.wk-edit-h{font-size:12.5px;text-align:right}
.wk-edit-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;margin-top:4px;border-top:1px solid var(--line);font-size:13px}
@media (max-width:600px){.wk-edit-row{grid-template-columns:1fr 1fr;}.wk-edit-row .subtle:not(.wk-edit-h){display:none}.wk-edit-row .check-row{grid-column:1/-1}.wk-edit-h{grid-column:1/-1;text-align:left}}
/* Outside someone's working hours (Schedule). */
.sc-cell.is-notwork{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.035) 7px 14px)}
.sc-notwork{font-size:11px;color:var(--muted);font-weight:650}
.sc-shade{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.025) 0 7px,rgba(0,0,0,.055) 7px 14px);pointer-events:none}
.sc-shade span{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:650;color:var(--muted)}
.sc-load span{white-space:nowrap}
.sc-load i{max-width:55%}

/* ---- Service requests & small jobs (service.js) ---- */
.banner.ok{background:var(--ok-bg);color:var(--ok-ink)}
.banner.bad{background:var(--bad-bg);color:var(--bad-ink)}
.banner.info{background:var(--info-bg);color:var(--info-ink)}
.banner{font-weight:500}
.banner b{font-weight:700}
.sj-kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line, #eee);font-size:13.5px}
.sj-kv:last-child{border-bottom:0}
.sj-kv > span:last-child{min-width:0;overflow-wrap:anywhere}
/* Small job: each work order a row — status, who and when, the scope (edited in place), the checklist */
.sj-rows{display:flex;flex-direction:column}
.sj-row{padding:14px 18px;border-top:1px solid var(--line);display:grid;gap:7px}
.sj-row:first-child{border-top:0}
.sj-row-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sj-row-t{display:flex;align-items:baseline;gap:8px;min-width:0}
.sj-row-t b{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sj-row-t .subtle{font-size:12px;white-space:nowrap}
.sj-row-top:hover b{text-decoration:underline;text-underline-offset:3px}
.sj-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.sj-scope-box{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:13px}
.sj-scope-t{white-space:pre-wrap;color:var(--ink-2);line-height:1.45;margin-bottom:4px}
.sj-scope-box textarea{width:100%;resize:vertical;font-size:13px}
.sj-ck{display:grid;grid-template-columns:120px auto minmax(0,1fr);gap:10px;align-items:center;font-size:12.5px}
.sj-ck > .subtle:only-child{grid-column:1/-1}
.sj-ck-n{font-weight:650;font-variant-numeric:tabular-nums}
.sj-ck-next{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* What we quoted: a line per quoted layer */
.sj-ql{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sj-ql .subtle{font-size:12px}
.sj-ql b{font-weight:650}
.sj-ql.total{border-bottom:0;font-weight:750}
.sj-ql.total b{font-weight:800}
@media (max-width:640px){.sj-ck{grid-template-columns:90px auto}.sj-ck-next{grid-column:1/-1;white-space:normal}}
.sr-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:460px;font-size:13.5px}
.sr-what{background:#f7f6f2;border-radius:12px;padding:12px 14px;margin-bottom:12px}
.sr-what p{margin:6px 0 0;white-space:pre-wrap}
.sr-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.sj-kv{grid-template-columns:1fr;gap:2px}.sr-actions > span{width:100%}.sr-actions button{flex:1}}
.sr-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sr-file{display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line, #e6e3dc);border-radius:999px;padding:5px 11px;font-size:13px;text-decoration:none;color:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A request's page: its assessments and what was found */
.sr-visits{display:flex;flex-direction:column}
.sr-visit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px}
.sr-visit:first-child{border-top:0}
.sr-visit:hover{background:var(--surface-2)}
.sr-findings{display:grid;gap:6px;border-top:1px solid var(--line)}
.sr-findings label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sr-findings textarea{width:100%;resize:vertical}
.sr-findings .subtle{font-size:12px}
.sr-awo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px}
.sr-awo:hover{background:var(--surface-2)}
/* The basics: notes and photos on a work order, an assessment or a to-do */
.wo-main,.todo-capture{display:grid;gap:16px;align-content:start;min-width:0}
.todo-capture{margin-top:16px}
.basics-photos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.basics-ph{width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:block;background:var(--surface-2)}
.basics-ph img{width:100%;height:100%;object-fit:cover;display:block}
.basics-add{width:84px;height:84px;border-radius:10px;border:1.5px dashed var(--line-2,var(--line));display:flex;align-items:center;justify-content:center;gap:4px;font-size:12.5px;font-weight:650;color:var(--ink-2);cursor:pointer}
.basics-add:hover{border-color:var(--ink);color:var(--ink)}
.sr-file:hover{border-color:#cfcabf}

/* Crew roll-up */
.sc-roll{background:transparent;color:var(--muted);border:0;padding:0 2px;font-size:12px;width:18px;flex:none;cursor:pointer;border-radius:4px}
.sc-roll:hover{color:var(--ink);background:var(--line)}
.sc-faces{display:inline-flex;margin-top:2px}
.avatar.xs{width:18px;height:18px;font-size:8.5px;margin-right:-4px;border:1.5px solid var(--surface-2)}
.sc-crewsum{font-size:10.5px;color:var(--muted);margin-top:2px}
.sc-crewoff{color:var(--warn-ink);font-weight:650}
.sc-rowhead.is-rolled{box-shadow:inset 3px 0 0 var(--line)}
/* Day view: bars move with the pointer; pull an end to change the time */
.sc-card.is-bar{cursor:grab;touch-action:none;user-select:none}
.sc-card.is-dragging{opacity:.35}
.sc-edge{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:2}
.sc-edge.is-start{left:-3px}
.sc-edge.is-end{right:-3px}
.sc-edge::after{content:'';position:absolute;top:30%;bottom:30%;left:3px;width:2px;border-radius:2px;background:var(--c);opacity:0;transition:opacity .12s}
.sc-card.is-bar:hover .sc-edge::after{opacity:.7}
body.sc-dmoving,body.sc-dmoving *{cursor:grabbing !important}
body.sc-dresizing,body.sc-dresizing *{cursor:ew-resize !important}
.sc-dghost{border-left:4px solid var(--c, #475569);display:flex;align-items:center;white-space:nowrap;overflow:visible}
.sc-dropmark{position:absolute;top:4px;height:38px;border:2px dashed var(--ink);border-radius:8px;background:rgba(255,255,255,.6);font-size:11px;font-weight:700;padding:2px 6px;pointer-events:none;z-index:3;white-space:nowrap}
.sc-grouplabel span{position:sticky;left:12px}

/* ---- Website builder (website.js) ---- */
.ws-tpls{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.ws-tpl{overflow:hidden}
.ws-tpl-shot{height:260px;overflow:hidden;border-bottom:1px solid var(--line);position:relative;background:var(--surface-2)}
.ws-tpl-shot iframe{width:1280px;height:1000px;border:0;transform:scale(.36);transform-origin:0 0;pointer-events:none;position:absolute;top:0;left:0}
.ws-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;margin-bottom:14px;flex-wrap:wrap}
.ws-bar-l,.ws-bar-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.ws-bar-l a{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.ws-main{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;align-items:start}
.ws-side{position:sticky;top:76px;max-height:calc(100vh - 96px);display:flex;flex-direction:column;overflow:hidden}
.ws-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.ws-tabs button{background:transparent;color:var(--muted);border-radius:0;padding:11px 4px;font-size:13px;border-bottom:2px solid transparent}
.ws-tabs button.sel{color:var(--ink);border-bottom-color:var(--ink)}
.ws-side-body{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ws-pagepick{display:flex;align-items:center;gap:8px}.ws-pagepick select{flex:1}
.ws-secs{display:flex;flex-direction:column;gap:8px}
.ws-sec{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.ws-sec.open{border-color:var(--ink)}
.ws-sec-h{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;cursor:pointer}
.ws-sec-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ws-sec-t small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-sec-a{display:flex;gap:2px;flex:none}
.ws-sec-a .icon,.ws-item-h .icon{background:transparent;color:var(--muted);padding:3px 7px;border-radius:6px;font-size:13px}
.ws-sec-a .icon:hover:not(:disabled),.ws-item-h .icon:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.ws-sec-a .icon:disabled,.ws-item-h .icon:disabled{opacity:.3}
.ws-sec-b{padding:4px 12px 12px;border-top:1px solid var(--line)}
.ws-sec-b .field{margin-top:8px}
.ws-sec-b textarea{min-height:70px}
.ws-item{border:1px dashed var(--line);border-radius:8px;padding:6px 10px 10px;margin-bottom:8px}
.ws-item-h{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.ws-add{display:flex;gap:6px}.ws-add select{flex:1}
.ws-img{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-img img{max-height:56px;max-width:140px;border-radius:6px;border:1px solid var(--line);padding:2px}
.ws-gal{display:flex;flex-wrap:wrap;gap:6px}
.ws-gal-i{position:relative}.ws-gal-i img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.ws-gal-i button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;border-radius:50%;font-size:12px;line-height:20px}
.ws-gal-add{width:64px;height:64px;border:2px dashed var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);cursor:pointer;margin:0}
.ws-color span{display:flex;gap:6px;align-items:center}
.ws-color input[type=color]{width:44px;height:36px;padding:2px;border-radius:8px;flex:none}
.ws-pg{display:flex;gap:6px;align-items:center;padding:8px}.ws-pg input{flex:1}
.ws-pg-meta{display:flex;align-items:center;gap:12px;padding:0 10px 8px;font-size:12.5px}.ws-pg-meta .check-row{margin:0}
.ws-slug{display:flex;align-items:center;gap:4px}.ws-slug input{flex:1}
.ws-help{font-size:12.5px;margin:0}
.ws-danger{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);align-items:flex-start}
.ws-view{min-width:0}
.ws-frame{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);height:calc(100vh - 170px);min-height:560px}
.ws-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.ws-frame.mobile{width:390px;margin:0 auto;border-radius:28px;border:8px solid #1c1c1c}
@media (max-width:1100px){.ws-main{grid-template-columns:1fr}.ws-side{position:static;max-height:none}.ws-frame{height:640px}}
.ws-up{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:650;font-size:12.5px;cursor:pointer;background:var(--surface);margin:0}
.ws-up:hover{border-color:var(--ink)}
/* a bill split across accounts (expense form) */
.split-table{width:100%}
.split-table th{font-size:12px;text-align:left;padding:4px 6px}
.split-table td{padding:3px 6px}
.split-table select,.split-table input{width:100%}
/* Ask AI drawer (estimate / project) */
.ask-panel{width:min(520px,100%)}
.ask-compose{display:flex;flex-direction:column;gap:6px;padding:10px 20px 16px;border-top:1px solid var(--line)}
.ask-compose .ask-row{display:flex;gap:8px;align-items:flex-end}
.ask-compose textarea{flex:1;resize:none;min-height:44px;max-height:140px}
.ask-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.ask-tools .check-row{margin:0;font-size:12.5px}
.ask-head-btns{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ask-web-links{margin-top:6px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.ask-web-links a{color:var(--muted, #555);text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-added{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.ask-added a{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;width:max-content;max-width:100%;text-decoration:none;color:inherit}
.ask-note{font-size:12.5px;color:var(--muted, #666);margin:0 0 12px;text-align:center}
.ask-hist{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ask-hist h4{margin:0 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted, #666)}
.ask-hist-row{display:flex;align-items:center;gap:6px}
.ask-hist-row button.open{flex:1;display:block;height:auto;color:var(--ink);font-size:13.5px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:none;cursor:pointer;min-width:0}
.ask-hist-row button.open b{display:block;color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-hist-row button.open span{font-size:12px;color:var(--muted, #666)}
a.ask-src{text-decoration:none}
.ask-q{margin:0 0 10px auto;max-width:85%;width:max-content;background:var(--line);border-radius:12px 12px 2px 12px;padding:9px 12px;white-space:pre-wrap}
.ask-a{margin:0 0 16px;line-height:1.5}
.ask-a p{margin:0 0 6px}
.ask-a ul{margin:4px 0 8px;padding-left:20px}
.ask-a.bad{color:var(--bad-ink, #b03a30)}
.ask-src{display:inline-block;font-size:11.5px;padding:1px 6px;border-radius:6px;background:var(--line-2, var(--line));color:var(--muted, #555);margin:0 2px;white-space:nowrap}
.ask-cites{margin-top:6px;font-size:12px;color:var(--muted, #666)}
.ask-suggest{display:flex;flex-wrap:wrap;gap:6px}
.ask-suggest .chip{text-align:left}

/* ---- Home: widgets and pins -------------------------------------------------- */
/* A 12-column grid in rows of 44px (HOME_ROW / HOME_GAP in app.js). Each widget
   spans --w columns and --h rows; dense flow lets smaller ones fill the gaps. */
.home-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:44px;grid-auto-flow:row dense;gap:16px;
  --fd-s1:#2a78d6;--fd-s1-fill:rgba(42,120,214,.13);--fd-s2:#eb6834;--fd-age0:#d6d1c6;--fd-age1:#eeb4a9;--fd-age2:#dc7c6e;--fd-age3:#bb4b3e;--fd-age4:#852a20}
.home-w{grid-column:var(--x,auto) / span var(--w,6);grid-row:var(--y,auto) / span var(--h,6);min-width:0;min-height:0;position:relative;display:flex;flex-direction:column}
.home-w-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.home-w-body > *{flex:1 1 auto;min-height:0}
.home-w-body > .card{overflow:auto;margin:0}
.home-w-body > .fd-w{display:flex;flex-direction:column;gap:0}
.home-w-body > .fd-w > .card{flex:1 1 auto;min-height:0;overflow:hidden}
.home-w-body > .fd-w > .card.fd-scroll{overflow:auto}
.home-w .fd-fill{display:flex;flex-direction:column}
.home-w .fd-chart-flex{flex:1 1 0;min-height:140px;overflow:hidden;padding:4px 14px 0}
.home-w .fd-week{flex:0 1 auto;max-height:46%;overflow:auto}
.home-w .fd-kpi{overflow:hidden}
.home-w .fd-alert.sm{margin:10px 18px 0;padding:8px 12px;font-size:12.5px}
.home-w .day-card{overflow:auto}
.home-kpis-fit{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-content:stretch;overflow:auto}
.fd-seg.fd-seg-sm{align-self:flex-start;margin-bottom:2px}
.fd-seg.fd-seg-sm button{padding:3px 9px;font-size:11.5px}
#fdProfit.clickable{cursor:pointer;display:flex;flex-direction:column;gap:6px}
/* Customizing */
/* Customizing: a toolbar that stays at the top while you drag widgets around */
.home-edit-bar{position:sticky;top:68px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 16px;padding:10px 12px 10px 14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.heb-ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.heb-t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.heb-t b{font-size:14px}
.heb-t span{font-size:12.5px;color:var(--muted)}
.heb-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.heb-add{display:inline-flex;align-items:center;gap:6px;font-weight:650}
.heb-add.on{background:var(--surface-2)}
.heb-n{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:0 7px;line-height:18px}
.heb-done{min-width:76px}
@media (max-width:760px){.home-edit-bar{top:62px}.heb-t span{display:none}.heb-acts{margin-left:auto}}
.home-grid.editing{background-image:linear-gradient(to right,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);background-size:calc((100% + 16px) / 12) 100%;background-position:-1px 0}
.home-w.editing{outline:2px dashed var(--line-2,var(--line));outline-offset:3px;border-radius:var(--r-card);background:var(--bg)}
.home-w.editing .home-w-body{pointer-events:none;user-select:none;opacity:.88}
.home-w-bar{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px;min-width:0}
.home-w-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-grip{cursor:grab;touch-action:none;user-select:none}
span.home-grip{display:inline-flex;color:var(--muted)}
.home-w-tools{display:inline-flex;align-items:center;gap:2px;flex:none}
.home-w-bar .icon{width:26px;height:26px}
.home-size{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:4px}
.home-w.editing{container-type:inline-size}
@container (max-width:260px){.home-w-tools .home-mv,.home-size{display:none}}
.home-rs{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;cursor:nwse-resize;touch-action:none;border-radius:4px;
  background:linear-gradient(135deg,transparent 45%,var(--muted) 45%,var(--muted) 55%,transparent 55%,transparent 70%,var(--muted) 70%,var(--muted) 80%,transparent 80%)}
.home-w.dragging{opacity:.85;z-index:5;box-shadow:0 18px 40px -18px rgba(20,18,14,.45);outline-style:solid;outline-color:var(--accent-ink,var(--ink));pointer-events:none}
/* where a dragged widget will land */
.home-ghost{grid-column:var(--x) / span var(--w);grid-row:var(--y) / span var(--h);border:2px dashed var(--accent);border-radius:var(--r-card);background:color-mix(in srgb,var(--accent) 8%,transparent);pointer-events:none}
.home-w.resizing{outline-style:solid;outline-color:var(--accent-ink,var(--ink))}
body.home-busy,body.home-busy *{cursor:grabbing!important;user-select:none!important}
.home-w.resizing,.home-w.resizing *{cursor:nwse-resize!important}
/* + Add widget: the gallery (rail of groups; cards with a sketch of each widget) */
.home-gallery{padding:16px;margin:-6px 0 16px}
.home-gallery .rail{top:76px}
.home-gallery .rail-item:hover{background:var(--surface-2)}.home-gallery .rail-item.on{background:var(--ink);color:#fff;box-shadow:none}.home-gallery .rail-item.on .rail-n{color:inherit;opacity:.8;background:rgba(255,255,255,.16)}
.hg-search{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hg-search input{max-width:260px}
.hg-search .subtle{font-size:12.5px}
.hg-sec{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.hg-sec:last-child{margin-bottom:0}
.hg-sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hg-sec-head h3{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:750}
.hg-sec-head .subtle{font-size:12.5px}
.hg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.hg-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .12s ease,box-shadow .12s ease}
.hg-card:hover{border-color:var(--accent-light);box-shadow:var(--shadow)}
.hg-card.on{background:var(--surface-2)}
.hg-card.on .hg-prev{opacity:.6}
.hg-prev{height:92px;padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.hg-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.hg-title{display:flex;align-items:center;gap:8px}
.hg-title b{font-size:14px}
.hg-new{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pop)}
.hg-body p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4;flex:1}
.hg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.hg-size{font-size:11.5px;color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 9px}
.hg-add{border-color:var(--accent);color:var(--accent);font-weight:650}
.hg-add:hover{background:var(--accent-soft)}
.hg-on{color:var(--ok-ink);font-weight:600;text-decoration:none}
.hg-on:hover{color:var(--bad-ink)}
.hg-none{margin:8px 0 0}
/* the sketches */
.hgp-list,.hgp-bars{display:flex;flex-direction:column;gap:8px}
.hgp-list p,.hgp-bars p{margin:0;display:flex;align-items:center;gap:8px}
.hgp-list b{width:8px;height:8px;border-radius:50%;background:var(--info-ink);opacity:.7;flex:none}
.hgp-list b.bad{background:var(--pop)}.hgp-list b.warn{background:#d9a12a}
.hgp-list i{height:7px;border-radius:4px;background:var(--line)}
.hgp-bars p{height:9px;border-radius:5px;background:var(--line)}
.hgp-bars i{display:block;height:100%;border-radius:5px;background:var(--accent-light)}
.hgp-bars i.pop,.hgp-cols i.pop{background:var(--pop)}
.hgp-cols,.hgp-day{display:flex;align-items:flex-end;gap:8px;height:62px}
.hgp-cols i{flex:1;border-radius:4px 4px 0 0;background:var(--accent-light)}
.hgp-day{align-items:flex-start;height:60px;border-left:2px solid var(--line);padding-left:8px}
.hgp-day i{flex:1;border-radius:6px;background:var(--accent-soft);border-left:3px solid var(--accent-light)}
.hgp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hgp-kpis i{height:42px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.hgp-wx{display:flex;justify-content:space-between;color:var(--muted)}
.hgp-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hgp-links i{height:26px;border-radius:7px;background:var(--accent-soft)}
.hgp-links i.g{background:var(--line)}
.hgp-links i.dash{background:none;border:1px dashed var(--muted)}
/* Weather widgets */
.wx-ico{flex:none}
.wx-sun,.wx-partly{color:#c98a12}.wx-rain,.wx-storm{color:#3f74b5}.wx-snow{color:#5a8fc4}.wx-cloud,.wx-fog{color:var(--muted)}
.wx-top{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.wx-now{flex:0 1 210px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:var(--accent);color:#fff;font-size:13px}
.wx-now .wx-ico{color:#fff}
.wx-where,.wx-dim{font-size:12px;opacity:.85}
.wx-now-row{display:flex;align-items:center;gap:10px}
.wx-temp{font-size:30px;font-weight:750;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wx-days{flex:1 1 320px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.wx-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:10px;background:var(--surface-2);text-align:center;min-width:0}
.wx-day.warn{background:var(--warn-bg)}
.wx-dn{font-size:12px;font-weight:650;color:var(--muted)}
.wx-hl{font-size:13px;white-space:nowrap}
.wx-note{font-size:11px;color:var(--muted);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.wx-day.warn .wx-note{color:var(--warn-ink);font-weight:650}
.wx-sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:750;margin:2px 0 2px}
.wx-flag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);white-space:nowrap}
.wx-flag.bad{background:var(--bad-bg);color:var(--bad-ink)}
.wx-foot{margin:10px 0 0;font-size:11.5px;color:var(--muted)}
.wx-mini .card-body{display:flex;align-items:center;gap:14px;height:100%;box-sizing:border-box}
.wx-mini-main{flex:1;min-width:0;font-size:13px}
.wx-mini-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wx-mini .wx-temp{font-size:26px}
.wx-pill{flex:none;border:0;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);font-weight:700;font-size:12px;padding:5px 11px}
.hgp-ring{display:flex;align-items:center;gap:14px}
.hgp-ring i{width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--accent) 0 62%,var(--accent-soft) 62% 100%);-webkit-mask:radial-gradient(circle,transparent 18px,#000 19px);mask:radial-gradient(circle,transparent 18px,#000 19px);flex:none}
.hgp-ring p{flex:1;margin:0;display:flex;flex-direction:column;gap:7px}
.hgp-ring b{display:block;height:7px;border-radius:4px;background:var(--line)}.hgp-ring b:first-child{width:70%;height:10px;background:var(--accent-light)}
.hgp-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hgp-photos i{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(160deg,var(--line),color-mix(in srgb,var(--accent-light) 40%,var(--line)))}
.hgp-kl{display:flex;flex-direction:column;gap:8px}.hgp-kl .hgp-kpis i{height:26px}
/* Operations, sales, money, logistics and field widgets (homewidgets.js op_*) */
.op-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin:0 0 10px}
.op-kpi{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);text-align:left;color:var(--ink);font:inherit}
button.op-kpi{cursor:pointer}button.op-kpi:hover{border-color:var(--accent-light)}
.op-kpi b{font-size:22px;font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums}
.op-kpi span{font-size:11.5px;color:var(--muted);line-height:1.25}
.op-kpi.warn{background:var(--warn-bg);border-color:transparent}.op-kpi.warn b{color:var(--warn-ink)}
.op-kpi.bad{background:var(--bad-bg);border-color:transparent}.op-kpi.bad b{color:var(--bad-ink)}
.op-kpi.info{background:var(--info-bg);border-color:transparent}.op-kpi.info b{color:var(--info-ink)}
.op-when{font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}.op-when.now{color:var(--info-ink)}
.op-age{font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.op-amt{font-size:13px;font-variant-numeric:tabular-nums}
.op-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px}.op-total b{font-size:24px;font-weight:750;letter-spacing:-.01em}
.op-meter{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px}
.op-meter span{flex:1;height:10px;border-radius:5px;background:var(--line);overflow:hidden}.op-meter i{display:block;height:100%;background:var(--accent);border-radius:5px}
.op-goal{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}.op-goal > div:last-child{flex:1 1 150px;min-width:0}
.op-ring{--p:0;width:84px;height:84px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--accent-soft) 0)}
.op-ring span{width:62px;height:62px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:17px;font-weight:750}
.op-goal-n{font-size:20px}
.op-pace{margin-top:8px;font-size:12px;font-weight:650;padding:2px 9px;border-radius:999px;display:inline-block}
.op-pace.ok{background:var(--ok-bg);color:var(--ok-ink)}.op-pace.warn{background:var(--warn-bg);color:var(--warn-ink)}
.op-goal-set label{display:block;font-size:12.5px;font-weight:650;margin-bottom:4px}
.op-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.op-ph{position:relative;padding:0;border:0;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2);cursor:pointer}
.op-ph img{width:100%;height:100%;object-fit:cover;display:block}
.op-ph span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:11.5px;font-weight:650;text-align:left;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.op-ph span i{display:block;font-style:normal;font-weight:500;opacity:.85;overflow:hidden;text-overflow:ellipsis}
/* Quick links */
.ql-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ql-tile{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:13px;font-weight:650;text-align:left;text-decoration:none;cursor:pointer;line-height:1.25}
.ql-tile:hover{border-color:var(--accent-light);background:var(--surface);opacity:1}
.ql-tile.add{background:none;border-style:dashed;color:var(--muted);font-weight:550}
.ql-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);flex:none}
.ql-tile.ext .ql-ic,.ql-tile.add .ql-ic{background:var(--bg);color:var(--muted)}
.ql-l{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ql-ed-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:4px 10px}
.ql-ed-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.ql-ed-row:last-child{border-bottom:0}
.ql-ed-l{flex:1;min-width:0;display:flex;flex-direction:column}
.ql-ed-l .subtle{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-ed-list > p{padding:8px 0}
.ql-inline{display:flex;align-items:center;gap:8px}.ql-inline > select,.ql-inline > input{flex:1 1 auto;min-width:0}.ql-inline > .btn{flex:none}
/* Narrow screens: one column, each widget its natural height; no resizing. */
@media (max-width:900px){
  .home-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;background-image:none!important}
  .home-w{grid-column:1/-1;grid-row:auto}
  .home-w-body > .card,.home-w-body > .fd-w > .card{overflow:visible}
  .home-w .fd-chart-flex{flex:none;height:230px}
  .home-w .fd-week{max-height:none}
  .home-rs,.home-size{display:none}
}
.pin-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);border:1px solid color-mix(in srgb,var(--pc) 28%,transparent)}
.pin-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pin-row{align-items:center}
.pin-row .pin-x{opacity:.45}
.pin-row:hover .pin-x{opacity:1}
.pin-row .icon{width:26px;height:26px}
.tb-pin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.tb-pin.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tb-pin.on svg path:first-child{fill:currentColor}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- My day (Home) ---- */
.day-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}
.day-side{display:flex;flex-direction:column;gap:6px;position:sticky;top:12px}
.day-plan-btn{align-self:stretch;margin-bottom:4px}
.day-pal-h{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:8px 0 2px}
.day-pals{display:flex;flex-direction:column;gap:3px}
.day-pal{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px 4px 4px;border-radius:10px;background:transparent;color:var(--ink);font-weight:550;font-size:13px;text-align:left;cursor:grab;border:1px solid transparent}
.day-pal:hover{background:var(--sunk);border-color:var(--line)}
.day-pal span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-pal .pin-ico{width:26px;height:26px;border-radius:8px}
.day-pal .pin-ico svg{width:15px;height:15px}
.day-side input[type=search]{width:100%;font-size:13px}
.day-hint{font-size:12px;margin:8px 0 0;line-height:1.4}
.day-nav .icon{width:28px;height:28px;font-size:18px;line-height:1}
.day-date{font-size:13px;min-width:92px;text-align:center}
.day-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;margin:0 0 8px;flex-wrap:wrap}
.day-sugg-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;font-size:13px}
.day-tl{position:relative;margin-left:52px;border-left:1px solid var(--line)}
.day-hr{position:absolute;left:0;right:0;border-top:1px solid var(--line);height:0}
.day-hr span{position:absolute;left:-52px;top:-8px;width:46px;text-align:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.day-off{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--line) 55%,transparent) 6px 7px);pointer-events:none}
.day-cols{position:absolute;inset:0;cursor:copy}
.day-block{position:absolute;display:flex;gap:6px;align-items:flex-start;padding:5px 8px 5px 6px;border-radius:9px;background:color-mix(in srgb,var(--bc) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--bc) 32%,transparent);border-left:4px solid var(--bc);overflow:hidden;cursor:grab;user-select:none;box-sizing:border-box;font-size:12.5px;line-height:1.3}
.day-block.short{align-items:center;padding-top:1px;padding-bottom:1px}
/* a visit from the Schedule: in the app's teal, opened (not dragged) */
.day-block.visit{cursor:pointer;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,transparent);border-left-color:var(--accent)}
.day-block.visit:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.day-block.visit.done{background:var(--surface-2)}
.day-vis-ic{display:inline-flex;color:var(--accent);padding-top:2px;flex:none}
.day-anytime{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;margin:0 0 10px}
.day-any{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;cursor:pointer}
.day-block.dragging{box-shadow:var(--shadow);z-index:3;opacity:.92;cursor:grabbing}
.day-block.done .day-b-t{text-decoration:line-through;color:var(--muted)}
.day-block.done{background:color-mix(in srgb,var(--bc) 6%,var(--surface))}
.day-b-body{min-width:0;flex:1}
.day-b-t{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-b-s{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.day-check{flex:0 0 17px;width:17px;height:17px;min-width:0;min-height:0;max-height:17px;padding:0;border-radius:5px;border:1.5px solid var(--bc);background:var(--surface);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center}
.day-block.done .day-check{background:var(--bc)}
.day-resize{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.day-block.ghost{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bc) 7%,var(--surface)) 0 8px,var(--surface) 8px 16px);border-style:dashed;border-left-style:solid;cursor:pointer;opacity:.95;flex-direction:column;gap:0}
.day-block.ghost:hover{background:color-mix(in srgb,var(--bc) 16%,var(--surface))}
.day-block.ghost.short{flex-direction:row}
.day-drop{position:absolute;left:2px;right:2px;border:2px dashed var(--ink-2);border-radius:9px;font-size:11.5px;font-weight:700;padding:3px 8px;pointer-events:none;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.day-now{position:absolute;left:-5px;right:0;height:0;border-top:2px solid #d63e3e;pointer-events:none;z-index:2}
.day-now::before{content:'';position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:#d63e3e}
@media (max-width:760px){.day-wrap{grid-template-columns:1fr}.day-side{position:static}.day-pals{flex-direction:row;flex-wrap:wrap}.day-pal{width:auto}.day-hint{display:none}}

/* ---- Mail (read-only Gmail) ---- */
.tb-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--dark)}
.mail-acct{font-size:12.5px;align-self:center}
.mail-connect{max-width:720px}
.mail-promise{padding-left:18px;line-height:1.55}
.mail-wrap{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;align-items:start}
.mail-list{display:flex;flex-direction:column;max-height:calc(100vh - 170px);overflow:hidden}
.mail-filters{display:flex;flex-wrap:wrap;gap:6px;padding:12px 12px 6px}
.mail-filters .chip.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.mail-filters .chip b{margin-left:3px}
.mail-q{margin:6px 12px 8px;width:auto}
.mail-rows{overflow:auto;border-top:1px solid var(--line)}
.modal-rows{max-height:60vh;border:1px solid var(--line);border-radius:var(--r-ctl)}
.mail-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:transparent;color:var(--ink);border-radius:0;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:500;font-size:13px;cursor:pointer;position:relative}
.mail-rows > .mail-row[role=button]{flex-direction:row;align-items:flex-start;gap:8px;padding-left:8px}
.mail-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mail-row.sel{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.mail-cb{display:grid;place-items:center;width:26px;height:26px;flex:none;margin:0;cursor:pointer}
.mail-cb input{width:16px;height:16px;margin:0}
.mail-row-acts{display:none;position:absolute;right:10px;top:8px;gap:4px;background:var(--surface-2);padding:2px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.mail-row:hover .mail-row-acts,.mail-row:focus-within .mail-row-acts{display:flex}
.mail-ra{width:30px;height:30px;min-height:0;padding:0;border-radius:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:14px;display:grid;place-items:center}
.mail-ra:hover{background:var(--sunk)}
@media (hover:none){.mail-row-acts{display:flex;position:static;flex-direction:column;background:transparent;box-shadow:none;padding:0}}
.mail-pill{display:inline-flex;align-items:center;gap:4px;padding:1px 2px 1px 8px;border-radius:999px;font-size:11.5px;color:var(--ink-2);border:1px dashed var(--line);background:var(--surface)}
.mail-pill b{color:var(--ink);font-weight:650;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-pill-b{width:22px;height:22px;min-height:0;padding:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;display:grid;place-items:center}
.mail-noise{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;color:var(--muted);background:var(--sunk)}
.mail-banner button{white-space:nowrap;flex:none}
.mail-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 12px 6px;padding:7px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px}
.mail-selbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 12px 8px;padding:6px 8px;border-radius:10px;background:var(--dark);color:#fff;font-size:12.5px}
.mail-selbar .ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.mail-selbar .link{color:#fff}
.mail-empty{padding:18px 14px;margin:0;text-align:center}
.mail-sortbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mail-noise-c{font-size:12.5px;margin:0 0 10px}
.mail-snack{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;max-width:min(680px,calc(100vw - 32px));padding:10px 12px 10px 16px;border-radius:12px;background:#111827;color:#fff;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.mail-snack[hidden]{display:none}
.mail-snack .link{color:#9cc3ff;font-weight:650;padding:0;min-height:0}
.mail-snack-x{margin-left:auto;background:transparent;color:#fff;opacity:.7;padding:0 4px;min-height:0;font-size:16px}
.mail-rules{display:flex;flex-direction:column;gap:6px}
.mail-rule{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;overflow-wrap:anywhere}
.mail-tag-hits .mail-tags-l{margin:4px 0 2px}
.mail-row:hover{background:var(--surface-2)}
.mail-row.on{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.mail-row.static{cursor:default}
.mail-row.unread .mail-from,.mail-row.unread .mail-subj{font-weight:800}
.mail-row-top{display:flex;justify-content:space-between;gap:8px}
.mail-from{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-when{color:var(--muted);font-size:12px;white-space:nowrap;margin-left:auto}
.mail-subj{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-snip{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.mail-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 4px 2px 8px;border-radius:999px;font-size:11.5px;font-weight:650;color:var(--ink);background:color-mix(in srgb,var(--pc) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--pc) 35%,transparent)}
.mail-chip.sug{background:var(--surface);border-style:dashed;color:var(--ink-2)}
.mail-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--pc);flex:none}
.mail-chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;padding-right:4px}
.mail-chip-b{width:20px;height:20px;min-height:0;padding:0;border-radius:50%;background:transparent;color:var(--ink-2);font-size:13px;line-height:1;display:grid;place-items:center;flex:none}
.mail-chip-b:hover{background:var(--sunk)}
.mail-read{min-height:300px;max-height:calc(100vh - 170px);overflow:auto}
.mail-r-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mail-r-head h3{margin:0 0 10px;font-size:18px}
.mail-tags{display:flex;flex-direction:column;gap:8px;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.mail-tags-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mail-tags-l{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mail-why{font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:2px}
.mail-tag-add input{width:100%;font-size:13px}
.mail-tag-hits{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.mail-ai{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.mail-ai-sum{font-size:13.5px;line-height:1.5}
.mail-acts{display:flex;flex-direction:column;gap:6px;width:100%}
.mail-act{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:var(--surface-2)}
.mail-act.done{opacity:.6}
.mail-msgs{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.mail-msg{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.mail-msg-h{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.mail-msg-to{font-size:12px;margin:2px 0 8px}
.mail-msg-b{font-size:13.5px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.mail-frame{width:100%;border:0;background:#fff;border-radius:8px}
.mail-att{font-size:12.5px;margin-top:8px}
@media (max-width:900px){.mail-wrap{grid-template-columns:1fr}.mail-list,.mail-read{max-height:none}}

/* My day: warnings, the week strip, preferences */
.day-flags{margin:0 0 10px;font-size:13px}
.day-flags ul{margin:4px 0 0;padding-left:18px}
.day-flags li{margin:2px 0}
.day-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 10px}
.day-wk{display:flex;flex-direction:column;gap:4px;align-items:stretch;padding:6px 8px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:12px;text-align:left;min-width:0}
.day-wk:hover{background:var(--surface-2)}
.day-wk.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.day-wk.off{opacity:.55}
.day-wk-d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-wk-bar{height:6px;border-radius:99px;background:var(--sunk);overflow:hidden}
.day-wk-bar span{display:block;height:100%;border-radius:99px;background:#2d9a57}
.day-wk.lvl-warn .day-wk-bar span{background:#d9a400}
.day-wk.lvl-bad .day-wk-bar span{background:#d63e3e}
.day-wk.lvl-bad{border-color:color-mix(in srgb,#d63e3e 45%,var(--line))}
.day-wk-p{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dp section{padding:12px 0;border-top:1px solid var(--line)}
.dp section:first-of-type{border-top:0}
.dp h4{margin:0 0 8px;font-size:14px}
.dp label{display:block}
.dp .dp-check{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:500}
.dp .dp-check input{width:auto;margin:0}
.dp input[type=range]{width:100%}
.dp-note{font-size:12.5px;margin:4px 0 0}
.dp-days{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.dp-days.sm{margin:6px 0 0;grid-column:1/-1}
.dp .dp-day{display:inline-flex;align-items:center;gap:0;margin:0;cursor:pointer}
.dp-day input{position:absolute;opacity:0;width:1px;height:1px}
.dp-day span{display:inline-block;padding:5px 10px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--muted);background:var(--surface)}
.dp-day input:checked + span{background:var(--dark);color:#fff;border-color:var(--dark)}
.dp-day input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.dp-routine{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) auto;gap:6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;margin:0 0 8px}
@media (max-width:640px){.dp-routine{grid-template-columns:1fr 1fr}.day-week{gap:3px}.day-wk{padding:5px}}

/* My day and Mail on phones (office app) */
/* the toolbar over the timeline: Suggest blocks and Preferences; + Add too when there's no side list */
.day-mbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.day-mbar .ghost.sm{display:inline-flex;align-items:center;gap:6px}
.day-mbar-add{display:none}
.day-mbar .icon-btn{width:34px;padding:0;display:grid;place-items:center}
/* the widget follows its own width: thin on Home, it lays out as on a phone */
.day-card{container:dayc / inline-size}
.day-flags summary{cursor:pointer;list-style:none}
.day-flags summary::-webkit-details-marker{display:none}
.day-flags-n{font-weight:500}
.day-nudge{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.day-sheet .day-pals{flex-direction:row;flex-wrap:wrap}
.day-sheet .day-pal{width:auto;cursor:pointer}
.day-sheet select{width:100%}
.mail-back{display:none;margin:0 0 8px}
@media (max-width:760px){
  .day-side{display:none}
  .day-wrap{display:block}
  .day-mbar{justify-content:stretch}
  .day-mbar > button:not(.icon-btn){flex:1;justify-content:center;min-height:40px}
  .day-mbar-add{display:inline-flex}
  .day-mbar .icon-btn{width:44px;min-height:40px}
  .day-wk{align-items:center;text-align:center;padding:6px 2px}
  .day-wk-d{display:flex;flex-direction:column;line-height:1.15}
  .day-wk-w{font-size:10.5px;color:var(--muted);font-weight:600}
  .day-wk-n{font-size:15px;font-weight:750}
  .day-wk-bar{width:100%}
  .day-wk-p{display:none}
  .day-meta{flex-direction:column;align-items:flex-start}
  .day-tl{margin-left:44px}
  .day-hr span{left:-46px;width:40px}
  .day-block{padding:4px 6px 4px 5px}
  .day-sugg-bar{flex-direction:column;align-items:stretch}
  .day-sugg-bar .row{justify-content:flex-end}
}
/* the same thin layout when the My day widget itself is narrow (app.js DAY_NARROW) */
@container dayc (max-width:699px){
  .day-side{display:none}
  .day-wrap{display:block}
  .day-mbar{justify-content:stretch}
  .day-mbar > button:not(.icon-btn){flex:1;justify-content:center;min-height:40px}
  .day-mbar-add{display:inline-flex}
  .day-mbar .icon-btn{width:44px;min-height:40px}
  .day-wk{align-items:center;text-align:center;padding:6px 2px}
  .day-wk-d{display:flex;flex-direction:column;line-height:1.15}
  .day-wk-w{font-size:10.5px;color:var(--muted);font-weight:600}
  .day-wk-n{font-size:15px;font-weight:750}
  .day-wk-bar{width:100%}
  .day-wk-p{display:none}
  .day-meta{flex-direction:column;align-items:flex-start}
  .day-tl{margin-left:44px}
  .day-hr span{left:-46px;width:40px}
  .day-block{padding:4px 6px 4px 5px}
  .day-sugg-bar{flex-direction:column;align-items:stretch}
  .day-sugg-bar .row{justify-content:flex-end}
  .day-nav .icon[aria-label="Back a week"],.day-nav .icon[aria-label="Forward a week"]{display:none}
  .day-pals{flex-direction:row;flex-wrap:wrap}.day-pal{width:auto}
}
@media (max-width:900px){
  .mail-wrap:not(.reading) .mail-read{display:none}
  .mail-wrap.reading .mail-list{display:none}
  .mail-back{display:inline-block}
  .mail-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .mail-filters::-webkit-scrollbar{display:none}
  .mail-filters .chip{flex:none}
  #mailActions{justify-content:flex-start !important}
  .mail-acct{flex-basis:100%}
  .mail-r-head{flex-direction:column;gap:4px}
  .mail-r-head h3{margin-bottom:4px}
  .mail-act{flex-direction:column;align-items:flex-start}
}
textarea.day-notes{min-height:200px;max-height:55vh;line-height:1.45}

/* Record pages (projects, small jobs, service calls) on the estimate's layout:
   the strip's sub-lines and clickable figures, the bar's work-done tick, the
   Needs you list's tones, phases and the activity feed. */
.ps-s{font-size:11.5px;color:var(--muted);white-space:nowrap;font-weight:500}
button.ps-cell{background:transparent;color:var(--ink);border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;text-align:left;font:inherit;cursor:pointer;min-height:0}
button.ps-cell:hover{background:var(--surface-2);opacity:1}
.ps-sell .ps-low{color:#f3b7a8}
.pb-wrap{position:relative}
.pb-tick{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:2px;background:var(--ok-ink)}
.check-item.bad .check-ic{background:var(--bad-bg);color:var(--bad-ink)}
.check-item.info .check-ic{background:var(--info-bg);color:var(--info-ink)}
.check-item.muted .check-ic{background:var(--sunk);color:var(--muted)}
.check-item .home-title b{font-weight:700}
.needs-where-i{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-right:6px}
.sj-kv select.kv-in{width:auto;min-width:150px;max-width:100%;padding:4px 8px;font-size:13px;min-height:0}
.tab-badge.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink)}
.jsub-first > .card:first-child{margin-top:0!important}
.ov-phases,.ov-feed{list-style:none;margin:0;padding:4px 18px 10px}
.ov-phases li{display:grid;grid-template-columns:minmax(0,1fr) 110px 44px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.ov-phases li:first-child,.ov-feed li:first-child{border-top:0}
.ov-phases b{display:block;font-size:13.3px;font-weight:650}
.ov-phases .subtle{font-size:12px}
.ov-bar{height:6px;border-radius:99px;background:var(--sunk);overflow:hidden}
.ov-bar i{display:block;height:100%;border-radius:99px;background:var(--info-ink)}
.ov-bar i.ok{background:var(--ok-ink)}
.ov-pct{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.ov-feed li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
/* A job's Scope: sections edited like a document, each covered by work orders */
.scope-doc{padding:4px 0}
.sc-sec{padding:14px 20px;border-top:1px solid var(--line);display:grid;gap:6px}
.sc-sec:first-child{border-top:0}
.sc-head{display:flex;align-items:center;gap:8px}
.sc-head h3{margin:0;font-size:15px}
.sc-title{flex:1;border:1px solid transparent;background:transparent;box-shadow:none;font-size:15px;font-weight:700;padding:4px 6px;margin-left:-6px}
.sc-title:hover,.sc-title:focus{border-color:var(--line);background:var(--surface)}
.sc-body{width:100%;resize:vertical;border:1px solid transparent;background:transparent;box-shadow:none;padding:4px 6px;margin-left:-6px;font-size:13.5px;line-height:1.5;overflow:hidden;min-height:34px}
.sc-body:hover,.sc-body:focus{border-color:var(--line);background:var(--surface)}
.sc-text{white-space:pre-wrap;font-size:13.5px;line-height:1.5}
/* Phases: containers for work orders, with a status the PM sets */
.phase-head-l{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
select.status-select.phase-status{padding:4px 10px;font-size:12px}
.phase-suggest{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--info-bg);color:var(--info-ink);border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:13px}
/* A project's Time: one toolbar in the card head (period toggle, Filters, pills), totals as one line */
.jt-head{flex-wrap:wrap;gap:10px}
.jt-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.jt-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.jt-pend{display:inline-flex;align-items:center;gap:8px}
@media (max-width:820px){
  .ov-phases li{grid-template-columns:minmax(0,1fr) 60px 40px}
}
.used-bar .meter{position:relative}

/* Project parts list: clickable rows, progress bar, the line editor. */
.mat-table2 td{vertical-align:middle}
.mat-table2 .mat-row{cursor:pointer}
.mat-table2 .mat-row:hover td,.mat-table2 .mat-row:focus-visible td{background:var(--surface-2)}
.mat-table2 .mat-row:focus-visible{outline:2px solid var(--info-ink);outline-offset:-2px}
.mat-name{font-weight:650}
.mat-alloc{font-size:12px;color:var(--ink-2);margin-top:3px}
.mat-prog{display:grid;gap:4px;min-width:120px}
.mat-bar{display:flex;height:6px;border-radius:99px;background:var(--sunk);overflow:hidden}
.mat-bar i{display:block;height:100%}
.mat-bar i.u{background:var(--ok-ink)}
.mat-bar i.a{background:#7fb48f}
.mat-bar i.o{background:var(--info-ink)}
.mat-chev{color:var(--muted);font-size:18px}
.ji-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.ji-head .link{margin-left:auto}
.ji-sec{margin:18px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.ji-hint{display:block;font-size:12px;margin-top:4px}
.ji-etas{display:grid;gap:8px}
.ji-eta{display:grid;grid-template-columns:minmax(0,1fr) 170px 180px;gap:10px;align-items:center;font-size:13px}
.ji-eta input,.ji-eta select{width:auto}
.ji-none{font-size:13px;padding:8px 0}
.ji-alloc{font-size:13px;margin-bottom:6px}
.ji-prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.ji-prog div{display:grid;gap:2px;font-size:12px}
.ji-prog b{font-size:15px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.ji-eta{grid-template-columns:1fr 1fr}.ji-eta > div:first-child{grid-column:1/-1}.ji-prog{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Requisition page: the shop's check-stock-and-order view. */
.req-table .num-in{width:90px;max-width:90px;text-align:right;border:1px solid var(--line-2);border-radius:8px;padding:6px 8px;background:var(--surface)}
.req-table .rs-vendor{min-width:150px;max-width:220px}
.req-table .rs-vendor.need{border-color:var(--warn-ink);box-shadow:0 0 0 2px var(--warn-bg)}
.req-table tr.rs-open td{background:var(--surface)}
.req-table tr.clickable:hover td{background:var(--surface-2)}
.req-sourcing{border-color:var(--accent);box-shadow:0 0 0 2px rgba(11,95,89,.35),var(--shadow)}
.req-source-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-card) var(--r-card)}
.req-source-sum{font-size:13px}

/* Parts-list line editor: summary tiles, where it's coming from, mark as ordered. */
.ji-head .ji-saved{margin-left:auto;font-size:12px;font-weight:650;color:var(--ok-ink);opacity:0;transition:opacity .2s}
.ji-head .ji-saved.on{opacity:1}
.ji-head .ji-saved + .link{margin-left:12px}
.ji-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 4px}
.ji-tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);min-width:0}
.ji-tile > span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.ji-tile > b{font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ji-tile > b small{font-size:12px;font-weight:500;color:var(--muted)}
.ji-tile > small{font-size:12px;color:var(--ink-2)}
.ji-tile.bad{background:var(--bad-bg);border-color:transparent}.ji-tile.bad > b,.ji-tile.bad > small{color:var(--bad-ink)}
.ji-tile.warn{background:var(--warn-bg);border-color:transparent}.ji-tile.warn > small{color:var(--warn-ink)}
.ji-srcs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ji-src{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:13px}
.ji-src:first-child{border-top:0}
.ji-src-main{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;min-width:0}
.ji-src-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--muted);min-width:52px}
.ji-src-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ji-src-ctl select,.ji-arrive select{width:auto}
.ji-src-note{grid-column:1/-1;font-size:12px;padding-left:60px}
.ji-mini{display:inline-flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.ji-mini input{width:auto;text-transform:none;letter-spacing:0;font-weight:400}
.ji-mini input[type=number]{width:90px}
.ji-arrive{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0 2px 60px}
.ji-buy{margin-top:10px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface)}
.ji-buy-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ji-order-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.ji-need{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ji-need input{width:auto}
.ji-need .subtle{font-size:12.5px}
.ji-details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.ji-details summary{cursor:pointer;font-size:13px;font-weight:700;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ji-details summary .subtle{font-weight:400;font-size:12.5px}
@media (max-width:700px){.ji-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ji-order-form{grid-template-columns:1fr 1fr}.ji-src{grid-template-columns:1fr}.ji-src-ctl{justify-content:flex-start}.ji-src-note,.ji-arrive{padding-left:0}}
#modalBody .ji-buy .form-grid.ji-order-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.ji-src-main{flex-wrap:nowrap;align-items:flex-start}
.ji-src-main > div{min-width:0}
.ji-src-kind{padding-top:3px}
.ji-src-sub{font-size:12px;color:var(--muted);margin-top:2px}
@media (max-width:700px){#modalBody .ji-buy .form-grid.ji-order-form{grid-template-columns:1fr 1fr}}

/* Order page: what the shop has, and the rest from a vendor. */
.ord-table td.ord-stock{white-space:nowrap}
.ord-rest{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:12px;color:var(--warn-ink)}
.ord-rest select{max-width:200px}
.ord-rest select.need{border-color:var(--warn-ink);box-shadow:0 0 0 2px var(--warn-bg)}

/* Pick slip page: what's short on a line. */
.ps-short{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.ps-short b{color:var(--warn-ink)}
.ps-short select{width:auto;max-width:220px}
.ps-short select.need{border-color:var(--warn-ink);box-shadow:0 0 0 2px var(--warn-bg)}

/* Vendor page: its people */
.vc-list{display:flex;flex-direction:column}
.vc-row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line)}
.vc-row:first-child{border-top:0}
.vc-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.vc-ways{font-size:13px;overflow-wrap:anywhere}

/* RFQ: Enter response — how this vendor priced it */
.rr-scroll{max-height:56vh;overflow:auto;display:flex;flex-direction:column;gap:14px;padding-right:2px}
.rr-group{border:1px solid var(--line);border-radius:12px;overflow:hidden;flex:none}
.rr-group-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--panel-2,rgba(0,0,0,.025));border-bottom:1px solid var(--line)}
.rr-table{width:100%;border-collapse:collapse}
.rr-table th,.rr-table td{padding:7px 10px;vertical-align:middle}
.rr-table td{border-top:1px solid var(--line)}
.rr-table .num-in{width:110px}
.rr-lead{width:100px}
.rr-tick-cell{width:28px;padding-right:0!important}
.rr-tick-cell input{width:16px;height:16px}
.rr-child td{background:rgba(0,0,0,.015)}
.rr-child td:nth-child(2){padding-left:26px}
.rr-incl{font-size:12.5px}
.rr-lump td{background:rgba(232,176,48,.08)}
.rr-sub td{background:rgba(0,0,0,.02)}
.rr-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.rr-seg button{border:0;border-radius:0;background:transparent;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--muted);width:auto}
.rr-seg button.on{background:var(--ink);color:#fff}
.rr-bundle{padding:10px 14px;border-top:1px solid var(--line)}
.rr-bundle:first-of-type{border-top:0}
.rr-bundle-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rr-bname{font-weight:650;max-width:240px}
.rr-bundle-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rr-bitem{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 4px 3px 9px;font-size:12.5px}
.rr-selbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(232,176,48,.12)}
.rr-newb{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.rr-newb input{width:auto}
.rr-newb #rr-bname{min-width:220px}
.rr-hint{margin-top:10px;font-size:12.5px}
.rfq-lump-tag{font-size:10.5px;font-weight:600;color:var(--warn-ink,#8a5a00);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;margin-left:auto}
.rr-bundle-head .num-in{width:110px}
.rr-bundle-head .inline-field{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rr-bundle-head .rr-bname{flex:1 1 200px}
.rr-bundle-head button{width:auto;margin-left:auto}
.modal-card.modal-xl{width:min(1320px,96vw)}
.modal-xl .rr-scroll{max-height:calc(100vh - 330px)}
.rr-act-cell{width:230px;text-align:right;white-space:nowrap}
.rr-act-cell .rr-act+.rr-act{margin-left:6px}
.rr-act{white-space:nowrap;width:auto}
.rr-excl td:nth-child(2),.rr-excl td:nth-child(3),.rr-excl td:nth-child(4){color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.rr-extra td{background:rgba(232,176,48,.05)}
.rr-addx td{padding:8px 10px}
.rr-addx select{width:auto;max-width:420px;font-size:13px}

/* Add parts to a requisition */
.rqa-list{max-height:52vh;border:1px solid var(--line);border-radius:10px;padding:4px}
.rqa-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.rqa-row:last-child{border-bottom:0}
.rqa-row input[type=checkbox]{width:16px;height:16px;flex:none}
.rqa-name{flex:1;min-width:0;display:flex;flex-direction:column}
.rqa-row .num-in{width:90px}

/* ── Proposal builder: section tabs, ready meter, autosave, AI ─────────── */
.prop-wrap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:1100px){.prop-wrap{grid-template-columns:minmax(0,1fr)}}
.prop-wrap.prop-full{grid-template-columns:minmax(0,1fr)}
.prop-wrap.prop-full .prop-preview-col{position:static;max-width:860px;width:100%;margin:0 auto}
.prop-wrap.prop-full .prop-paper{max-height:none;padding:40px 48px}
.prop-saved{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.prop-saved.ok{color:var(--ok-ink)}
.prop-saved.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-ink)}
.prop-saved.bad{color:var(--bad-ink)}
.prop-ready{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;padding:6px 11px;border-radius:999px;border:0;background:var(--warn-bg);color:var(--warn-ink);width:auto}
.prop-ready.ok{background:var(--ok-bg);color:var(--ok-ink)}
.prop-meter{width:50px;height:6px;border-radius:9px;background:rgba(127,127,127,.25);overflow:hidden;display:inline-block}
.prop-meter i{display:block;height:100%;background:currentColor}
.prop-tabs{display:flex;flex-wrap:wrap;gap:3px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;margin:2px 0 14px}
.prop-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:9px;font-weight:650;font-size:13px;width:auto}
.prop-tab:hover{color:var(--ink);background:transparent}
.prop-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.pdot.ok{background:var(--ok-ink)} .pdot.warn{background:var(--warn-ink)}
.pct{font-size:11px;font-weight:650;color:var(--muted);background:var(--bg);border-radius:999px;padding:0 7px}
.prop-group[hidden]{display:none}
.prop-group h4 .subtle{text-transform:none;letter-spacing:0}
.prop-ai{display:flex;flex-direction:column;gap:9px;background:#f3effd;border-radius:12px;padding:12px 14px;margin:4px 0 12px}
.prop-ai-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700;color:#5b3fc4;font-size:13px}
.prop-ai-h > span:first-child{display:inline-flex;align-items:center;gap:7px}
.prop-ai-draft{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;white-space:pre-wrap;line-height:1.55}
.prop-sugg{display:flex;flex-direction:column;gap:6px}
.prop-sg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.prop-sg .t{font-weight:600}
.prop-sg .why{grid-column:1;font-size:12px;color:var(--muted)}
.prop-sg .acts{grid-row:1/3;grid-column:2;display:flex;gap:6px}
.prop-conflict{background:var(--bad-bg);color:var(--bad-ink);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.prop-lib{display:flex;gap:6px;align-items:center;margin:4px 0 12px}
.prop-lib input{flex:1}
.prop-ai-tag{font-size:10.5px;font-weight:700;color:#5b3fc4;background:#f3effd;border-radius:999px;padding:1px 7px;flex:none}
.prop-toolbar #prop-template-select{max-width:170px}
.prop-head{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px 14px}
.prop-head .prop-toolbar{margin-bottom:0}
.prop-head .prop-tabs{margin:0}
.prop-head .prop-stale{margin-bottom:0}
.prop-wrap.prop-full .prop-editor{display:none}
.prop-editor .prop-group{border-top:0;margin-top:0;padding-top:0}
.prop-editor .prop-group:not([hidden]) ~ .prop-group:not([hidden]){border-top:1px solid var(--line);margin-top:14px;padding-top:14px}

/* Clients page search */
.cl-searchbar{display:flex;align-items:center;gap:10px;margin:-6px 0 12px}
.cl-searchbar input{width:min(380px,100%)}
.cl-searchbar .subtle{font-size:12.5px;white-space:nowrap}
.cl-none{padding:22px 28px;color:var(--muted)}

/* ---- Materials: parts list with holds ---------------------------------- */
:root{--hold-bg:#efe9f8;--hold-ink:#4f318c;--hold-line:#d8ccee;--site-bg:#dff1ee;--site-ink:#145a52;--site-line:#bfe2dc}
.badge.hold{background:var(--hold-bg);border-color:transparent;color:var(--hold-ink)}
.pl-attn{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 14px}
.pl-attn-l{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.pl-chip{font-size:12.5px;font-weight:650;border-radius:999px;padding:6px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.pl-chip.hold{background:var(--hold-bg);color:var(--hold-ink);border-color:var(--hold-line)}
.pl-chip.site{background:var(--site-bg);color:var(--site-ink);border-color:var(--site-line)}
.pl-chip.bad{background:var(--bad-bg);color:var(--bad-ink);border-color:#f1c7c1}
.pl-chip.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:#eed7a3}
.pl-chip.on{outline:2px solid var(--ink);outline-offset:1px}
.pl-chip.static{cursor:default}
.pl-card{overflow:visible}
.pl-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.pl-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-ctl);padding:0 12px;height:38px;width:min(280px,100%);color:var(--muted);background:var(--surface)}
.pl-search input{border:0;outline:none;padding:0;height:36px;background:transparent;flex:1;min-width:0;box-shadow:none}
.pl-group{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pl-group select{width:auto;height:38px;font-weight:600}
.pl-sum{font-size:12.5px;flex:1;min-width:120px}
.pl-acts{gap:6px;flex-wrap:wrap}
/* the parts list selection floats like the estimate lines one (.bulk-bar) */
.pl-selbar button.hold-btn.appr{background:var(--hold-bg);color:var(--hold-ink);border-color:var(--hold-bg)}
.pl-selbar button.hold-btn.site{background:var(--site-bg);color:var(--site-ink);border-color:var(--site-bg)}
.pl-table{min-width:1080px}
.pl-table .pl-check{width:36px;text-align:center;padding-left:12px;padding-right:0}
.pl-table .pl-check input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.pl-group-h td{background:var(--surface-2);border-top:1px solid var(--line)}
.pl-group-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pl-group-t{display:inline-flex;gap:8px;align-items:center;background:none;border:0;padding:0;color:var(--ink);font-size:13.5px}
.pl-group-t svg{transition:transform .15s}
.pl-group-t[aria-expanded="false"] svg{transform:rotate(-90deg)}
.pl-group-h .grp-sum{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.mat-table2 .mat-row.sel td{background:#fffbef}
.hold-cell{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.hold-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap}
.hold-pill.appr{background:var(--hold-bg);color:var(--hold-ink);border-color:var(--hold-line)}
.hold-pill.appr.bad{background:var(--bad-bg);color:var(--bad-ink);border-color:#f1c7c1}
.hold-pill.site{background:var(--site-bg);color:var(--site-ink);border-color:var(--site-line)}
.hold-pill.done{background:var(--surface);color:var(--ok-ink);border-color:#cfe5d6;font-weight:650}
.hold-add{height:26px;padding:0 9px;border-radius:999px;border:1px dashed #d3d1ca;background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:600;opacity:.75}
.mat-row:hover .hold-add,.hold-add:focus-visible{opacity:1}
.pl-date{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:4px 6px;margin-left:-7px;color:inherit;font:inherit;min-height:36px;justify-content:center}
.pl-date:hover,.pl-date:focus-visible{border-color:var(--line);background:var(--surface)}
.pl-date .est-sub{margin:0}
.date-pop{position:fixed;z-index:1000;border:1px solid var(--ink);border-radius:8px;padding:0 8px;background:var(--surface);font:inherit;box-shadow:var(--shadow)}
.flow.flow-6 button{min-width:130px}
/* the line editor */
.ji-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;margin:8px -4px 0;border-top:1px solid var(--line)}
.ji-main{padding:16px 20px 8px 4px;min-width:0;border-right:1px solid var(--line)}
.ji-side{padding:16px 4px 8px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ji-side .field{display:flex;flex-direction:column;gap:4px}
.ji-side textarea{width:100%;resize:vertical}
.ji-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0 0;font-size:13px}
.ji-kv dt{color:var(--muted)}.ji-kv dd{margin:0;text-align:right}
.ji-journey{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.ji-journey div{display:flex;flex-direction:column;gap:5px;min-width:0}
.ji-journey i{height:8px;border-radius:4px;background:#ecebe6}
.ji-journey div.req i{background:var(--ink)}
.ji-journey div.on i{background:var(--info-ink)}
.ji-journey span{font-size:11.5px;color:var(--muted);font-weight:600}
.ji-journey b{font-size:15px;font-variant-numeric:tabular-nums}
.ji-holds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ji-hold{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ji-hold.appr.open{border-color:var(--hold-line);background:#faf8fd}
.ji-hold.site.open{border-color:var(--site-line);background:#f5fbfa}
.ji-hold-h{display:flex;gap:9px;align-items:center;font-weight:700;font-size:14px;margin:0}
.ji-hold-h input{width:18px;height:18px;margin:0}
.ji-hold.appr .ji-hold-h{color:var(--hold-ink)}.ji-hold.appr .ji-hold-h input{accent-color:var(--hold-ink)}
.ji-hold.site .ji-hold-h{color:var(--site-ink)}.ji-hold.site .ji-hold-h input{accent-color:var(--site-ink)}
.ji-hold-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ji-hold-f label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600;margin:0}
.ji-hold-f label.full{grid-column:1/-1}
.ji-hold-f select,.ji-hold-f input{width:100%;color:var(--ink)}
.ji-hold-st{margin:0;font-size:12.5px;line-height:1.45}
.ji-hold.appr .ji-hold-st:not(.ok-ink):not(.bad-ink):not(.subtle){color:var(--hold-ink)}
.ji-hold.site .ji-hold-st:not(.ok-ink):not(.subtle){color:var(--site-ink)}
.btn.appr-go{background:var(--hold-ink);color:#fff;border-color:var(--hold-ink)}
.ji-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.ji-date-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;min-width:0}
.ji-date-card label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.ji-date-card input{width:auto;align-self:flex-start;font-weight:700}
.ji-date-card.bad{background:var(--bad-bg);border-color:transparent}
.ji-date-v{font-size:17px}
.ji-buy.held{background:var(--hold-bg);border-color:var(--hold-line)}
@media (max-width:900px){.ji-cols{grid-template-columns:1fr}.ji-main{border-right:0;padding-right:4px}.ji-side{padding-left:4px;border-top:1px solid var(--line)}.ji-holds,.ji-dates{grid-template-columns:1fr}}

@media (min-width:701px){.modal-card.modal-item{width:min(1120px,96vw)!important}}
/* ---- Materials: orders & deliveries ------------------------------------ */
.ms-card{padding:14px 16px;margin-bottom:16px}
.ms-head{display:flex;gap:10px;align-items:baseline;margin-bottom:10px}
.ms-head b{font-size:15px}
.ms-strip{display:grid;grid-template-columns:repeat(15,minmax(64px,1fr));gap:4px;overflow-x:auto}
.ms-day{display:flex;flex-direction:column;gap:5px;min-height:96px;border:1px solid var(--line);border-radius:10px;padding:7px 6px;background:var(--surface);min-width:0}
.ms-day.wkend{background:var(--surface-2)}
.ms-day.today{background:#fffbef;border-color:#eed7a3}
.ms-dow{font-size:11px;color:var(--muted);font-weight:650}
.ms-day > b{font-size:12.5px}
.ms-ev{font-size:10.5px;font-weight:700;border-radius:6px;padding:3px 5px;line-height:1.25;text-align:left;border:0;cursor:pointer;word-break:break-word}
.ms-ev i{font-style:normal;text-transform:uppercase;font-size:9.5px;opacity:.85}
.ms-ev.check{background:var(--accent);color:var(--ink)}
.ms-ev.vendor{background:#cfddf1;color:#1e4a85}
.ms-ev.trip{background:#45443f;color:#fff}
.ms-ev.need{background:#f1c7c1;color:#7e1d14}
.ms-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.ms-key span{display:inline-flex;gap:6px;align-items:center}
.ms-key span::before{content:"";width:10px;height:10px;border-radius:3px}
.ms-key .check::before{background:var(--accent)}.ms-key .vendor::before{background:#cfddf1}.ms-key .trip::before{background:#45443f}.ms-key .need::before{background:#f1c7c1}
.db-wrap{margin-bottom:4px}
.db-head{display:flex;gap:10px;align-items:baseline;margin:4px 0 10px}
.db-head h3{margin:0;font-size:16px}
.db-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.db-lane{background:#ebeae5;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.db-lane-h{display:flex;justify-content:space-between;align-items:center;padding:2px 4px;font-size:13px}
.db-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;min-width:0}
.db-card.arrived{border-color:#eed7a3}
.db-card.issue{border-color:#f1c7c1}
.db-top{display:flex;align-items:center;gap:8px}
.db-when{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted)}
.db-top .pop-wrap{margin-right:-4px}
.db-items{line-height:1.45}
.db-act{align-self:stretch;margin-top:3px}
.db-empty{margin:4px;font-size:12.5px}
.rq-names{font-size:12.5px;color:var(--ink-2,#45443f);max-width:340px}
.rq-bar i.h{background:var(--hold-ink)}.rq-bar i.s{background:#c98a0b}.rq-bar i.f{background:var(--info-ink)}.rq-bar i.r{background:var(--ok-ink)}
@media (max-width:1100px){.db-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.db-board{grid-template-columns:1fr}}

/* ---- Finance dashboard (public/finance.js renderFinance) ---------------- */
.fd{--fd-s1:#2a78d6;--fd-s1-fill:rgba(42,120,214,.13);--fd-s2:#eb6834;--fd-age0:#d6d1c6;--fd-age1:#eeb4a9;--fd-age2:#dc7c6e;--fd-age3:#bb4b3e;--fd-age4:#852a20;
  display:flex;flex-direction:column;gap:18px;font-variant-numeric:tabular-nums}
.fd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fd-head h1{margin:0;font-size:26px;letter-spacing:-.02em}
.fd-head .subtle{margin:4px 0 0}
.fd-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fd-seg{display:inline-flex;background:var(--sunk);border-radius:99px;padding:3px;gap:2px}
.fd-seg button{border:0;background:none;color:var(--ink-2);padding:6px 13px;border-radius:99px;font-size:12.5px;font-weight:650}
.fd-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.fd .btn.sm{padding:5px 11px;font-size:12px;min-height:0}
.fd-alert{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--bad-bg);color:var(--bad-ink);border-radius:12px;padding:11px 14px}
.fd-alert .grow{flex:1;min-width:220px}
.fd-alert .btn{background:var(--bad-ink);color:#fff;border-color:var(--bad-ink)}
.fd-grid{display:grid;gap:18px}
.fd-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.fd-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.fd-half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fd .card{display:flex;flex-direction:column;min-width:0}
.fd-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 18px 0}
.fd-card-head h2{margin:0;font-size:14.5px;font-weight:700}
.fd-card-head .meta{color:var(--muted);font-size:12.5px;font-weight:400}
.fd-kpi{padding:15px 18px 14px;gap:6px}
.fd-kpi.clickable{cursor:pointer}
.fd-kpi.clickable:hover{border-color:var(--line-2)}
.fd-kpi-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fd-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:650}
.fd-kpi-value{font-size:28px;font-weight:720;letter-spacing:-.025em;line-height:1.1}
.fd-kpi-sub{font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:auto}
.fd-kpi-viz{height:34px;margin-top:2px}
.fd-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 8px;line-height:16px;white-space:nowrap}
.fd-chip.ok{background:var(--ok-bg);color:var(--ok-ink)}.fd-chip.warn{background:var(--warn-bg);color:var(--warn-ink)}.fd-chip.bad{background:var(--bad-bg);color:var(--bad-ink)}.fd-chip.plain{background:var(--sunk);color:var(--ink-2)}
.fd-minibar{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;margin:12px 0 6px;background:var(--sunk)}
.fd-minibar span{display:block;height:100%}
.fd-legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.fd-legend .key{display:inline-flex;align-items:center;gap:6px}
.fd-legend .key i{display:inline-block;width:14px;height:3px;border-radius:2px}
.fd-legend .key i.dash{height:0;border-top:2px dashed var(--bad-ink);background:none}
.fd-legend .key i.sq{width:10px;height:10px;border-radius:3px}
.fd-chart{position:relative;width:100%}
.fd-chart svg{display:block;width:100%;overflow:visible}
.fd-chart text{fill:var(--muted);font-size:11px;font-family:var(--font)}
.fd-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);border-radius:10px;padding:9px 11px;font-size:12px;line-height:1.5;box-shadow:var(--shadow);white-space:nowrap;z-index:5;transform:translate(-50%,calc(-100% - 12px))}
.fd-tip .r{display:flex;justify-content:space-between;gap:18px}
.fd-tip .dim{opacity:.7}
.fd-week{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;border-top:1px solid var(--line);padding:14px 18px 16px;background:var(--surface-2);border-radius:0 0 var(--r-card) var(--r-card);margin-top:auto}
.fd-week h3{margin:0 0 2px;font-size:13.5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fd-week .mini{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.fd-week .mini b{color:var(--ink)}
.fd-week-nav{display:flex;flex-direction:column;gap:8px}
.fd-rows{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.fd-rows li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;padding:7px 0;border-top:1px solid var(--line);align-items:center;font-size:13px;cursor:pointer}
.fd-rows li:first-child{border-top:0}
.fd-rows .d{color:var(--muted);font-size:12px}
.fd-rows .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-rows .l small{color:var(--muted);font-size:11.5px;margin-right:6px;text-transform:uppercase;letter-spacing:.05em;font-weight:650}
.fd .amt{font-weight:650;white-space:nowrap}
.fd .amt.in{color:var(--ok-ink)}
.fd-todo{list-style:none;margin:0;padding:0 8px 8px;display:flex;flex-direction:column}
.fd-todo li{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:10px}
.fd-todo li:hover{background:var(--surface-2)}
.fd-todo .sev{align-self:stretch;border-radius:4px;background:var(--line-2)}
.fd-todo .sev.bad{background:var(--bad-ink)}.fd-todo .sev.warn{background:var(--warn-ink)}.fd-todo .sev.info,.fd-todo .sev.undefined{background:var(--info-ink)}
.fd-todo .t{font-size:13.2px;line-height:1.35}
.fd-todo .t span{display:block;color:var(--muted);font-size:12px}
.fd-todo-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:650;padding:10px 18px 2px}
.fd-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.fd-aging-bar{display:flex;gap:2px;height:16px;border-radius:5px;overflow:hidden}
.fd-aging-bar span{display:block;height:100%}
.fd-aging-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.fd-aging-legend div{font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:1px}
.fd-aging-legend b{font-size:13px;color:var(--ink);font-weight:680}
.fd-aging-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.fd-table td,.fd-table th{padding-left:8px;padding-right:8px}
.fd-table td:first-child,.fd-table th:first-child{padding-left:0}
.fd-table td:last-child,.fd-table th:last-child{padding-right:0}
.fd-table .who{font-weight:650}
.fd-table .who small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.fd-th-sub{text-transform:none;letter-spacing:0;font-weight:400}
.fd-prog{position:relative;height:8px;background:var(--sunk);border-radius:99px;min-width:90px}
.fd-prog .b{position:absolute;inset:0 auto 0 0;background:var(--fd-s1);border-radius:99px}
.fd-prog .c{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:2px}
.fd-jobbar{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
.fd-margin{display:flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}
.fd-margin .from{color:var(--muted);font-size:12px}
.fd-cal{list-style:none;margin:0;padding:0 18px 12px}
.fd-cal li.day{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:650;padding:12px 0 4px}
.fd-cal li.it{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
.fd .dir{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800}
.fd .dir.in{background:var(--ok-bg);color:var(--ok-ink)}.fd .dir.out{background:var(--sunk);color:var(--ink-2)}
.fd-cal .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sidebar .nav-sub{font-size:10.5px;color:var(--muted);padding:8px 10px 3px;letter-spacing:.04em;font-weight:650}
.nav-count{font-size:11px;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:0 7px;line-height:18px;flex:none}
.nav-count.bad{background:#c2463a;color:#fff}
@media (max-width:1180px){.fd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.fd-main,.fd-half{grid-template-columns:minmax(0,1fr)}}
/* Cash flow: what's counted, your plans, the period table */
.cf-late{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;margin-bottom:6px}
.cf-srcs,.cf-plans{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cf-src,.cf-plans li{display:grid;grid-template-columns:34px minmax(0,1fr) auto 34px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.cf-src:first-child{border-top:0}
.cf-plans{padding:4px 18px 10px}
.cf-plans li{grid-template-columns:34px minmax(0,1fr) auto}
.cf-src .t,.cf-plans .t{display:flex;flex-direction:column;min-width:0;font-size:13.2px;line-height:1.3;text-align:left;background:none;border:0;padding:0;color:inherit}
.cf-plans button.t{cursor:pointer}
.cf-src .t span,.cf-plans .t span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-src.off .t,.cf-src.off .amt,.cf-plans li.off .t,.cf-plans li.off .amt{opacity:.5}
.cf-src .link{font-size:12px;justify-self:end}
.cf-switch{position:relative;display:inline-block;width:32px;height:18px;flex:none;cursor:pointer}
.cf-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cf-switch span{position:absolute;inset:0;background:var(--line-2);border-radius:99px;transition:background .15s;pointer-events:none}
.cf-switch span::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.cf-switch input:checked+span{background:var(--fd-s1,#2a78d6)}
.cf-switch input:checked+span::after{transform:translateX(14px)}
.cf-switch input:focus-visible+span{outline:2px solid var(--fd-s1,#2a78d6);outline-offset:2px}
.cf-table{margin:8px 18px 14px;width:calc(100% - 36px)}
.cf-table tr.sel td{background:var(--sunk)}
/* P&L sections */
.pnl-table td.pnl-sec{padding-top:16px}
.pnl-table tr.pnl-subtotal td{border-top:1px solid var(--line)}
@media (max-width:560px){.fd-kpis{grid-template-columns:minmax(0,1fr)}.fd-week{grid-template-columns:minmax(0,1fr)}.fd-week-nav{flex-direction:row}.fd-aging-legend{grid-template-columns:repeat(3,minmax(0,1fr))}.fd-kpi-value{font-size:25px}.fd-hide-sm{display:none}}
/* an email filed to a record (public/mail.js) */
.modal-card .mail-read{min-height:0;max-height:none;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.mail-read-head{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.mail-read-body{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;font-size:13.5px;line-height:1.5;max-height:50vh;overflow:auto;overflow-wrap:anywhere}
.rs-amt #ex-total{font-size:13px}.rs-amt #ex-total b{display:block;font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* Projects filter bar: a few quick buttons, the rest under Filters */
.fb-btn{display:inline-flex;align-items:center;gap:6px}
.fb-btn.on{border-color:var(--ink);color:var(--ink)}
.fb-n{background:var(--ink);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;box-sizing:border-box}
.fb-pill{display:inline-flex;align-items:center;gap:6px}
.pop-menu.fb-panel{min-width:260px;padding:10px;gap:10px}
.fb-sec{display:grid;gap:2px}
.fb-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:2px 8px 4px}
.fb-panel .fb-opt{display:flex;justify-content:space-between;gap:12px;background:none;color:var(--ink);padding:7px 10px;border-radius:8px;font-size:13px;font-weight:600}
.fb-panel .fb-opt:hover{background:var(--surface-2);opacity:1}
.fb-panel .fb-opt.sel{background:var(--ink);color:#fff}
.fb-panel select{width:100%;max-width:none;border-radius:10px}
.fb-foot{border-top:1px solid var(--line);padding:8px 8px 0;text-align:right}

/* Where a pick slip / PO is on its way to site: numbered steps. */
.flow-steps{display:flex;gap:0;list-style:none;margin:0 0 14px;padding:0;counter-reset:none;flex-wrap:wrap}
.flow-steps li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:6px 14px 6px 0;position:relative}
.flow-steps li:not(:last-child)::after{content:'';width:28px;height:2px;background:var(--line);margin-left:6px}
.flow-steps li span{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--line)}
.flow-steps li.done{color:var(--ink-2)}
.flow-steps li.done span{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.flow-steps li.now{color:var(--ink);font-weight:650}
.flow-steps li.now span{background:var(--accent);border-color:transparent;color:#1a1a1a}
.ps-staged{width:220px;max-width:100%;border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;background:var(--surface)}
.cr-srcs{display:flex;flex-wrap:wrap;gap:6px 16px}

/* A delivery's window: the stages it can be moved to by hand. */
.del-moves{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px}
.del-moves .chip.blocked{opacity:.45;cursor:not-allowed}

/* Deliveries by day: one table, a heading row per day. */
.del-days{table-layout:fixed}
.del-days tr.day-row td{background:var(--surface-2);border-top:1px solid var(--line);padding:9px 16px;font-size:13px}
.del-days tr.day-row:first-child td{border-top:0}
.del-days tr.day-row .chip-count{margin-left:8px}
.del-days tr.day-row.late td b{color:var(--bad-ink)}
.del-days .del-act{text-align:right;white-space:nowrap}
.del-days .del-act > button{margin-right:6px}
.route-tag{display:inline-block;font-size:12px;font-weight:650;padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.route-tag.r-shop_site{background:var(--info-bg);color:var(--info-ink);border-color:transparent}
.route-tag.r-vendor_shop{background:var(--hold-bg);color:var(--hold-ink);border-color:transparent}
.route-tag.r-vendor_site{background:var(--site-bg);color:var(--site-ink);border-color:transparent}

/* Job → Materials → Orders: orders, POs, pick slips and returns in one table */
.ord-type { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-right: 7px; vertical-align: 1px; background: var(--surface-2, #f1f1ef); color: var(--muted, #666); }
.ord-type.t-order { background: var(--accent-soft); color: var(--accent-dark); }
.ord-type.t-po { background: #e3edfb; color: #1d4f91; }
.ord-type.t-slip { background: #e8f3ec; color: #22663d; }
.ord-type.t-return { background: #f6e6e6; color: #8a2b2b; }
.ord-table tr.ord-child td:first-child { padding-left: 34px; position: relative; }
.ord-table tr.ord-child td:first-child::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 50%; width: 10px; border-left: 1.5px solid var(--border, #ddd); border-bottom: 1.5px solid var(--border, #ddd); border-bottom-left-radius: 4px; }
.ord-table tr.ord-child { background: color-mix(in srgb, var(--surface-2, #f6f6f4) 45%, transparent); }
.ord-table .mat-prog { max-width: 200px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ord-type.t-order { background: #3d3214; color: #f0d27a; }
  :root:not([data-theme="light"]) .ord-type.t-po { background: #1c2c44; color: #9cc0f0; }
  :root:not([data-theme="light"]) .ord-type.t-slip { background: #1b3326; color: #8fd3a8; }
  :root:not([data-theme="light"]) .ord-type.t-return { background: #3b1f1f; color: #eaa3a3; }
}
:root[data-theme="dark"] .ord-type.t-order { background: #3d3214; color: #f0d27a; }
:root[data-theme="dark"] .ord-type.t-po { background: #1c2c44; color: #9cc0f0; }
:root[data-theme="dark"] .ord-type.t-slip { background: #1b3326; color: #8fd3a8; }
:root[data-theme="dark"] .ord-type.t-return { background: #3b1f1f; color: #eaa3a3; }
/* List pages (lpFilters / pay-period stepper) */
.fb-note{font-size:12.5px;color:var(--ink-2);padding:3px 2px}
.seg-toggle.pay-period button.sel{min-width:128px}
.fb-opt.fb-toggle{justify-content:flex-start;gap:10px;text-align:left}
.fb-opt.fb-toggle .fb-l{flex:1;min-width:0;display:flex;flex-direction:column}
.fb-opt.fb-toggle .fb-l small{color:var(--muted);font-weight:400;font-size:11.5px}
.fb-check{flex:none;width:16px;height:16px;border:1.5px solid var(--line-2,var(--line));border-radius:4px;display:inline-grid;place-items:center;background:var(--surface)}
.fb-check.on{background:var(--ink);border-color:var(--ink)}
.fb-check.on::after{content:'';width:8px;height:4px;border:2px solid var(--surface);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
/* Sidebar: section icons, and sub-headings that roll up their items */
.nav-gl{flex:1;display:inline-flex;align-items:center;gap:9px;min-width:0}
.nav-toggle .nav-gl span{flex:none}
.nav-gi{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;color:var(--gc);background:color-mix(in srgb,var(--gc) 15%,transparent);border:1px solid color-mix(in srgb,var(--gc) 26%,transparent)}
.nav-gi svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-subgroup{display:flex;flex-direction:column;gap:1px}
#sidebar .nav-subtoggle{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;border-radius:7px;cursor:pointer;text-align:left;margin:0}
#sidebar .nav-subtoggle span:first-child{flex:1}
#sidebar .nav-subtoggle:hover{color:var(--ink);background:var(--surface-2)}
.nav-subtoggle .nav-chev{width:6px;height:6px}
.nav-subgroup.open .nav-subtoggle .nav-chev{transform:rotate(45deg) translateY(-2px)}
.nav-subgroup.collapsed .nav-subitems{display:none}
.nav-subitems{display:flex;flex-direction:column;gap:1px;padding-left:8px}
.nav-group.open .nav-subgroup.collapsed .nav-subtoggle .nav-chev{transform:rotate(-45deg)}
/* Invoice page: lines built in place */
.inv-table td{vertical-align:middle}
.inv-in{width:100%;min-width:0;padding:6px 8px;font-size:13px}
.inv-in.num{text-align:right}
.inv-in.uom{max-width:70px}
.inv-in.pct{width:70px;display:inline-block;margin:0 4px}
.inv-table tr.inv-tot td{border-bottom:0;padding-top:6px;padding-bottom:6px;color:var(--ink-2)}
.inv-table tr.inv-tot:first-child td{border-top:1px solid var(--line)}
.inv-table tr.inv-tot.grand td{color:var(--ink);font-size:14px}
.card table.items-table.inv-table{min-width:760px}

/* ---- Record page header (recordBar in app.js; DESIGN.md → Detail pages) ----
   One capsule of the record's own tools (status · Ask AI · Notes · a secondary
   action · ⋯) and one dark main button. Toolbars inside a tab sit a level
   below: small, square-cornered and quiet, with yellow only for that tab's
   own action. Dark is the whole record; yellow is this tab. */
.rec-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.rec-cap{display:inline-flex;align-items:stretch;min-height:36px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px}
.rec-cap > *{display:inline-flex;align-items:center}
.rec-cap > * + *{border-left:1px solid var(--line)}
.rec-cap button.rec-seg{min-height:34px;padding:0 14px;gap:6px;background:transparent;border:0;border-radius:0;color:var(--ink);font-size:13px;font-weight:650;display:inline-flex;align-items:center;white-space:nowrap}
.rec-cap button.rec-seg:hover{background:var(--surface-2);opacity:1}
.rec-cap button.rec-seg[disabled]{opacity:.45;cursor:default}
.rec-cap button.rec-more{padding:0 14px;font-size:15px;letter-spacing:.06em}
.rec-cap > :first-child,.rec-cap > :first-child > button{border-top-left-radius:999px;border-bottom-left-radius:999px}
.rec-cap > :last-child,.rec-cap > :last-child > button{border-top-right-radius:999px;border-bottom-right-radius:999px}
.rec-cap select.status-select{width:auto;margin:0;border:0;border-radius:999px 0 0 999px;padding-top:0;padding-bottom:0;font-size:13px}
.rec-cap select.status-select:only-child{border-radius:999px}
.rec-cap > .badge{margin:0 10px;align-self:center}
.rec-cap .rec-pad{padding:0 12px}
button.rec-main{min-height:36px;padding:0 16px;display:inline-flex;align-items:center;gap:6px;background:var(--dark);color:#fff;border-color:var(--dark);white-space:nowrap}
button.rec-main svg{stroke:currentColor}
button.rec-main[disabled]{opacity:.45;cursor:default}
@media (max-width:640px){
  .rec-bar{justify-content:flex-start}
  .rec-cap .rec-l{display:none}
  .rec-cap button.rec-seg{padding:0 11px}
}
/* toolbars inside a tab: a level below the header, smaller and quieter */
.view .filter-bar > button:not(.chip):not(.link):not(.icon),
.view .filter-bar > .pop-wrap > button:not(.chip):not(.icon){padding:5px 12px;font-size:12px}
.view .filter-bar > button.ghost:not(.chip),.view .filter-bar > .pop-wrap > button.ghost:not(.chip){color:var(--ink-2);border-color:var(--line)}
/* The "do this" button (a tab's own action, + New, Save in a dialog): the
   accent teal with white text. The header's main button stays black. */
button.accent,.btn-link.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
button.accent:hover{background:var(--accent-dark);opacity:1}
/* Invoice lines: a title and description each, catalogue search in the title, discounts */
/* discounts: in the totals, under the subtotal and above tax */
.inv-disc-ed{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}
.inv-disc-ed .inv-disc-name{width:170px;text-align:left}
.inv-disc-ed .inv-disc-mode{width:82px}
.inv-add-disc{float:left;font-weight:600}
.inv-table td.inv-name{vertical-align:top}
.inv-title-wrap{position:relative;display:flex;align-items:center;gap:6px}
.inv-in.inv-title{font-weight:600}
.inv-in.inv-desc{margin-top:4px;font-size:12.5px;color:var(--ink-2);resize:vertical;overflow:auto;min-height:30px;line-height:1.4}
.inv-std-pick{margin-bottom:6px}
/* Send invoice: other attachments */
.si-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.si-atts:empty{display:none}
.si-att{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;max-width:100%;background:var(--surface-2,transparent)}
.si-att small{color:var(--muted)}
.si-att button{border:0;background:none;padding:0 4px;font-size:15px;line-height:1;color:var(--muted);cursor:pointer}
.si-att button:hover{color:var(--ink)}
.si-att-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.si-docs{margin-top:8px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.field label.si-doc{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer}
.field label.si-doc:last-child{border-bottom:0}
.field label.si-doc input{width:auto;flex:none;margin:0}
.si-doc .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si-doc small{color:var(--muted)}
/* Settings → Invoice terms */
.std-row{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.std-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.std-top .std-name{flex:1;min-width:160px;font-weight:600}
.std-days{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.std-days input{width:72px}
.std-def{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:400;margin:0;text-transform:none;letter-spacing:0;color:var(--ink-2);cursor:pointer}
.std-row textarea{width:100%;resize:vertical}
.inv-cat-tag{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--info-ink);background:var(--info-bg);border-radius:99px;padding:2px 7px}
.inv-sug{position:fixed;z-index:60;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line-2,var(--line));border-radius:10px;box-shadow:var(--shadow);overflow:hidden;min-width:320px}
.inv-sug-row{display:flex;gap:12px;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 12px;cursor:pointer;color:var(--ink)}
.inv-sug-row.on,.inv-sug-row:hover{background:var(--surface-2)}
.inv-sug-row .t{display:flex;flex-direction:column;min-width:0}
.inv-sug-row .t b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-sug-row .t small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-sug-row .p{flex:none;font-weight:650;font-variant-numeric:tabular-nums}
.inv-sug-row .p small{color:var(--muted);font-weight:400}
.inv-sug-none{padding:10px 12px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.inv-sug-foot{display:flex;flex-direction:column;background:var(--surface-2)}
.inv-sug-foot button{background:none;border:0;text-align:left;padding:8px 12px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.inv-sug-foot button:hover{background:var(--sunk);color:var(--ink)}
.inv-table tr.inv-add-row td{border-bottom:0;padding-top:8px;padding-bottom:10px}
.inv-add{display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px dashed var(--line-2,var(--line));border-radius:9px;padding:7px 14px;font-weight:650;font-size:13px;color:var(--ink-2);cursor:pointer;margin-right:12px}
.inv-add span{font-size:16px;line-height:1}
.inv-add:hover{border-color:var(--ink);color:var(--ink)}
.inv-lt{font-weight:600}
.inv-ld{color:var(--muted);font-size:12.5px;margin-top:2px;white-space:pre-wrap}

/* ---- Home: estimating and project widgets (homewidgets.js) ---- */
.hw-rows{display:flex;flex-direction:column;gap:4px}
.hw-row{display:grid;grid-template-columns:minmax(90px,130px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 8px;margin:0 -8px;border-radius:10px}
.hw-row.clickable:hover{background:var(--surface-2)}
.hw-lbl{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-num{font-size:13px;white-space:nowrap;text-align:right}
.hw-bar{display:block;height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.hw-bar i{display:block;height:100%;border-radius:99px;background:var(--ink-2)}
.hw-bar i.info{background:var(--info-ink)}.hw-bar i.ok{background:var(--ok-ink)}.hw-bar i.bad{background:var(--bad-ink)}

/* ---- Status colours (recStatus in app.js; DESIGN.md → Status colours) ----
   grey not started · blue under way · amber waiting / needs a push ·
   green done or won · red went wrong · faded stopped. A status set by hand is
   a dropdown (it has the arrow); one that moves on its own is a plain label. */
:root{--none-bg:#e2dfd7;--none-ink:#4a4843}
.rec-cap .rec-status{padding:0 14px;gap:7px;font-size:13px;font-weight:700;white-space:nowrap;background:var(--none-bg);color:var(--none-ink)}
.rec-status.tone-info,select.status-select.tone-info{background:var(--info-bg);color:var(--info-ink)}
.rec-status.tone-ok,select.status-select.tone-ok{background:var(--ok-bg);color:var(--ok-ink)}
.rec-status.tone-warn,select.status-select.tone-warn{background:var(--warn-bg);color:var(--warn-ink)}
.rec-status.tone-bad,select.status-select.tone-bad{background:var(--bad-bg);color:var(--bad-ink)}
/* grey always shows as a colour: a shade darker than the page, not white */
.rec-status.tone-none,select.status-select.tone-none{background:var(--none-bg);color:var(--none-ink)}
.rec-status.tone-off,select.status-select.tone-off{background:transparent;color:var(--muted)}
.rec-status:is(.tone-none,.tone-info,.tone-ok,.tone-warn,.tone-bad)::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.off{background:transparent;border:1px dashed var(--line-2);color:var(--muted)}

/* ---- Accent colours: deep teal and coral (replacing the yellow) ----
   --accent teal: buttons that do things, the current step, the profit bar,
   the logo dot. --accent-dark: the active tab, text on a light teal.
   --accent-light: overhead bars, teal on black. --pop coral: the sidebar
   counts, the small things that should catch the eye. Text on any of them
   is white; the + in the top bar is white on black. */
.tb-new{color:#fff}
.nav-count,.tb-count,.mail-pill-b{background:var(--pop);color:#fff}
.tb-pin.on{background:var(--accent);border-color:var(--accent);color:#fff}
.flow-steps li.now span{background:var(--accent);color:#fff}
.ms-ev.check{background:var(--accent);color:#fff}
.bulk-bar button.accent,.pl-selbar button.accent,.dv-btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.nav.active .nav-att{background:var(--pop)}

/* ---- My day: navigation, hiding things, fixed blocks, your own kinds ---- */
.day-head{flex-wrap:wrap;gap:8px}
.day-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.day-date-w{position:relative;display:inline-flex}
.day-nav .day-date{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:650;min-width:0;display:inline-flex;gap:6px;align-items:center}
.day-nav .day-date:hover{background:var(--surface-2);opacity:1}
.day-rel{color:var(--muted);font-weight:700}
.day-rel.now{color:var(--accent)}
.day-date-in{position:absolute;inset:auto 0 0 0;width:100%;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.day-nav .day-today{margin-left:6px}
/* My day, tidied: tools in the header, a slimmer side list, one-line week and warnings */
.day-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.day-head > span:first-child{flex:1;white-space:nowrap}
.day-tools-add{display:none}
.day-nav .icon{width:26px;height:26px;font-size:17px;border-radius:8px}
.day-nav .day-date{padding:3px 11px}
.day-tools{display:inline-flex;align-items:center;gap:6px}
.day-tools .ghost.sm{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 10px}
.day-tools .icon-btn{width:30px;padding:0;justify-content:center}
.day-tools svg{width:16px!important;height:16px!important;flex:none}
.day-wrap{grid-template-columns:196px minmax(0,1fr);gap:16px}
.day-side{gap:2px}
.day-pal-h{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.07em;margin:12px 0 4px}
.day-pal-h:first-child{margin-top:2px}
.day-pals{gap:1px}
.day-pal{padding:3px 6px 3px 3px;gap:7px;font-size:12.5px;border-radius:8px}
.day-pal .pin-ico{width:22px;height:22px;border-radius:6px}
.day-pal .pin-ico svg{width:13px;height:13px}
.day-pal-w .day-pal-x{opacity:0;transition:opacity .12s}
.day-pal-w:hover .day-pal-x,.day-pal-x:focus-visible{opacity:.6}
.day-side input[type=search]{padding:6px 9px;font-size:12.5px}
.day-hint{font-size:11.5px;margin-top:10px}
.day-mbar{display:none;margin:0 0 8px}
.day-week{gap:4px;margin:0 0 8px}
.day-wk{gap:4px;padding:5px 7px;border-radius:8px;font-size:11.5px}
.day-wk-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px;min-width:0}
.day-wk-p{font-size:10.5px}
.day-wk-bar{height:3px}
.day-wk.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.day-flags{margin:0 0 8px;font-size:12.5px;border-radius:9px;padding:6px 10px;background:var(--warn-bg);color:var(--warn-ink)}
.day-flags.bad{background:var(--bad-bg);color:var(--bad-ink)}
.day-flags summary{display:flex;align-items:center;gap:8px;min-width:0}
.day-flags summary::before{content:'⚠';flex:none}
.day-flags-1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;opacity:.9}
.day-flags-n{flex:none;font-weight:650;text-decoration:underline;text-underline-offset:2px}
.day-flags[open] .day-flags-1{white-space:normal}
.day-flags ul{margin:4px 0 2px 22px;padding:0}
.day-meta{font-size:12px;margin:0 0 6px}
.day-tl{margin-left:44px}
.day-hr span{left:-46px;width:40px;font-size:10.5px}
.day-block{padding:3px 7px 3px 5px;font-size:12px;border-radius:8px}
.day-block.visit{background:repeating-linear-gradient(135deg,var(--accent-soft) 0 8px,color-mix(in srgb,var(--accent) 6%,var(--surface)) 8px 16px)}
@container dayc (max-width:699px){
  .day-tools-add{display:inline-flex}
  .day-tools .ghost.sm span{display:none}
}
.day-pal-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.day-pal-h .link{text-transform:none;letter-spacing:0;font-weight:600}
.day-pal-w{position:relative;display:flex;align-items:center}
.day-pal-w .day-pal{padding-right:26px}
.day-pal-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:15px;line-height:1;opacity:.35}
.day-pal-w:hover .day-pal-x,.day-pal-x:focus-visible{opacity:1}
.day-pal-x:hover{background:var(--line);color:var(--ink)}
.day-hid-t{align-self:flex-start;margin:2px 0 0 4px}
.day-hid .day-pal-w.off{gap:8px;padding:3px 6px 3px 4px;font-size:13px;color:var(--muted)}
.day-hid .day-pal-w.off .pin-ico{width:22px;height:22px;opacity:.55}
.day-hid .day-pal-w.off > span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-block.fixed{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bc) 16%,var(--surface)) 0 6px,color-mix(in srgb,var(--bc) 9%,var(--surface)) 6px 12px)}
.day-lock{display:inline-flex;vertical-align:-1px;margin-right:4px;color:var(--bc)}
.day-fix{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0}
.day-fix input{width:auto;margin:0;flex:none}
.day-fix .subtle{font-size:12.5px;font-weight:400}
.day-linked{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin:0 0 10px}
.day-k-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.day-k-row:last-of-type{border-bottom:0}
.day-k-row.own{grid-template-columns:auto minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr) auto auto}
.day-k-l{display:flex;flex-direction:column;min-width:0}
.day-k-l .subtle{font-size:12.5px}
.day-k-show{margin:0;white-space:nowrap}
@media (max-width:760px){.day-k-row.own{grid-template-columns:auto minmax(0,1fr) auto;}.day-k-row.own select{grid-column:2 / -1}}

/* ---- My day preferences: a page at a time, rows of label · control ---- */
.dp .rail-layout{grid-template-columns:190px minmax(0,1fr);gap:24px}
.dp .rail{position:static;max-height:none;padding:0}
.dp .dp-page{padding:0;border:0;min-height:380px}
.dp-page h4{margin:0 0 4px;font-size:16px}
.dp-intro{margin:0 0 10px;font-size:13px;max-width:60ch}
.dp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.dp-row-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.dp-row-l b{font-size:13.5px;font-weight:650}
.dp-row-l span{font-size:12.5px;color:var(--muted)}
.dp-row-c{display:flex;justify-content:flex-end;align-items:center}
.dp-row-c select{width:auto;min-width:180px}
.dp label.switch{display:inline-block}
.dp .dp-days{margin:0}
.dp-range{display:flex;align-items:center;gap:10px;min-width:240px}
.dp-range input{flex:1;accent-color:var(--accent)}
.dp-range b{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.dp-sub{margin:16px 0 0;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dp-kind{display:inline-flex;align-items:center;gap:8px;min-width:0}
.dp-kind .pin-ico{width:24px;height:24px;flex:none}
.dp-card{display:grid;gap:8px;padding:10px 12px;margin:10px 0;border:1px solid var(--line);border-radius:12px}
.dp-card-top{display:flex;align-items:center;gap:8px}
.dp-card-top input{flex:1;min-width:0}
.dp-card-top .pin-ico{width:26px;height:26px;flex:none}
.dp-card-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dp-card-row select{width:auto}
.dp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.dp-only{font-size:12px}
@media (max-width:640px){
  .dp .rail-layout{grid-template-columns:minmax(0,1fr)}
  .dp .rail{display:flex;overflow-x:auto;gap:4px}.dp .rail-sec{display:flex;gap:4px}.dp .rail-item{white-space:nowrap}
  .dp-row{grid-template-columns:minmax(0,1fr)}.dp-row-c{justify-content:flex-start}
  .dp .dp-page{min-height:0}
}
.day-pins-off{margin:0 0 4px 4px;font-size:12.5px}

/* ---- Top bar: who's signed in (right of the bell); Home's nav icon ---- */
.tb-me{display:flex;align-items:center;gap:8px;height:38px;padding:3px 14px 3px 4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-align:left;font-weight:600}
.tb-me:hover{background:var(--surface-2);opacity:1}
.tb-me-t{display:flex;flex-direction:column;line-height:1.2;min-width:0;max-width:150px}
.tb-me-t b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-me-t span{font-size:11px;color:var(--muted);font-weight:500}
@media (max-width:820px){.tb-me{padding:3px;width:38px;justify-content:center}.tb-me-t{display:none}}
.nav-gi.nav-gi-home{color:#fff;background:var(--ink);border-color:var(--ink);width:27px;height:27px;border-radius:8px;margin-left:-2.5px} /* centred on the section icons below it */
.nav-gi.nav-gi-home svg{width:17px;height:17px}
.nav.active .nav-gi.nav-gi-home{background:transparent;border-color:transparent}

/* ---- The header bar on list pages too: a capsule with nothing showing in it
   (its one button hidden) takes no room ---- */
.rec-cap:not(:has(> :not([hidden]))){display:none}
.rec-cap > .pop-wrap > button.rec-seg{border-radius:inherit}

/* ---- Top bar: the pin blue until it's on, the bell black like +, a bigger
   badge with the count; the notifications side panel (like Notes) ---- */
.tb-pin:not(.on){color:#3867d6;background:color-mix(in srgb,#3867d6 9%,var(--surface));border-color:color-mix(in srgb,#3867d6 32%,var(--line))}
.tb-pin:not(.on):hover{background:color-mix(in srgb,#3867d6 15%,var(--surface))}
.tb-bell.dark{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tb-bell.dark:hover{background:var(--ink);opacity:.88}
.tb-bell .notif-bell-dot{top:-5px;right:-7px;width:auto;height:20px;min-width:20px;padding:0 5px;border-radius:999px;background:var(--pop);color:#fff;border:2px solid var(--surface);font-size:11px;font-weight:800;line-height:16px;text-align:center;box-sizing:border-box}
#notifSetBtn.on{background:var(--sunk);color:var(--ink)}
.nf-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.nf-day{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.nf-row{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;margin:0 -10px;width:calc(100% + 20px);background:transparent;border:0;border-radius:10px;color:var(--ink);text-align:left;font-weight:500}
.nf-row:hover{background:var(--surface-2);opacity:1}
.nf-row.unread{background:var(--accent-soft)}
.nf-row.unread .nf-msg{font-weight:700}
.nf-ico{width:28px;height:28px;border-radius:8px;flex:none}
.nf-ico svg{width:15px;height:15px}
.nf-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nf-msg{font-size:13px;line-height:1.35}
.nf-time{font-size:11.5px;color:var(--muted)}
.nf-dot{width:9px;height:9px;border-radius:50%;background:var(--pop);flex:none;margin-top:6px}
.nf-back{margin:0 0 6px}
.nf-intro{font-size:12.5px;margin:0 0 8px}
.nf-set{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.nf-set-l{display:flex;flex-direction:column;min-width:0}
.nf-set-l b{font-size:13px}
.nf-set-l span{font-size:12px;color:var(--muted)}
.nf-sw{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);font-weight:600;margin:0}
.nf-sw.off{opacity:.45}

/* + New: the side panel of things to start, grouped like the sidebar */
.new-group{margin-bottom:16px}
.new-group-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);margin:0 0 6px 2px}
.new-item{display:grid;gap:2px;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:9px 10px;color:var(--ink);box-shadow:none;cursor:pointer;font-weight:400}
.new-item b{font-size:14px;font-weight:700}
.new-item span{font-size:12.5px;color:var(--muted)}
.new-item:hover,.new-item:focus-visible{background:var(--surface-2);opacity:1}

/* Tabbed form popup (modalTabs in app.js): tabs pinned under the title, the
   footer pinned at the bottom, the panes scroll between them. Every pane
   shares one grid cell, so the card keeps the tallest tab's size whichever
   tab is showing, and it never runs past the bottom of the screen. */
.modal-card.modal-tabbed{width:min(700px,100%);display:flex;flex-direction:column;max-height:88vh;max-height:88dvh}
.modal-card.modal-tabbed .modal-head{flex-shrink:0}
.modal-card.modal-tabbed #modalBody{padding:0;display:flex;flex-direction:column;flex:1;min-height:0}
.mt-top{padding:16px 22px 0;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.mt-nav{display:flex;gap:2px;padding:6px 22px 0;border-bottom:1px solid var(--line);flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.mt-nav::-webkit-scrollbar{display:none}
.mt-nav .tab{padding:11px 12px 10px}
.mt-nav .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.mt-nav .tab:focus-visible{outline:2px solid var(--accent-light);outline-offset:-4px;border-radius:8px 8px 0 0}
.mt-panes{display:grid;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 22px 22px}
.mt-panes.fits{overflow:visible}
.mt-pane{grid-area:1/1;min-width:0;align-self:start}
.mt-pane:not(.on){display:none}
/* mtabFit: every tab laid out in the one cell for a moment to find the tallest */
.mt-panes.measure .mt-pane{display:block;visibility:hidden;animation:none}
.mt-panes.measure .mt-pane.on{visibility:visible}
.mt-pane.on{animation:mt-in .14s ease-out}
@keyframes mt-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.mt-sub{gap:3px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.mt-sub .subtle{font-size:12px}
.modal-card.modal-tabbed .modal-actions{margin:0;padding:14px 22px;flex-shrink:0;align-items:center;background:var(--surface);border-radius:0 0 18px 18px}
/* expense form: the receipt as a framed drop-in area */
.ex-receipt{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;border:1px dashed var(--line-2,var(--line));border-radius:var(--r-card);background:var(--surface-2)}
.ex-receipt #ex-receipt-preview{display:flex;justify-content:center;min-height:40px;align-items:center}
.ex-receipt #ex-receipt-preview img{width:auto!important;height:auto!important;max-width:100%;max-height:260px;border-radius:10px;object-fit:contain;box-shadow:var(--shadow)}
@media (max-width:820px){
  .modal-card.modal-tabbed{height:100vh;height:100dvh;max-height:none;min-height:0}
  .mt-top{padding:12px 16px 0}
  .mt-nav{padding:2px 12px 0}
  .mt-panes{padding:16px}
  .modal-card.modal-tabbed .modal-actions{position:static;margin:0;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);border-radius:0}
}
@media (prefers-reduced-motion:reduce){.mt-pane.on{animation:none}}

/* People picker (assignPicker in app.js): a dropdown of crews and people. */
.ap{position:relative}
.ap-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px 11px;background:var(--surface);color:var(--ink);font:inherit;font-weight:400;min-height:40px}
.ap-btn:hover{border-color:var(--line-2,var(--line));opacity:1}
.ap-btn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ap-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-caret{color:var(--muted);font-size:11px}
.ap-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:240px;max-height:300px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(20,18,14,.3);z-index:80;padding:6px}
.ap-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 8px 4px}
.ap-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500;margin:0;color:var(--ink)}
.ap-row:hover{background:var(--surface-2)}
.ap-row input{width:auto;margin:0;accent-color:var(--accent)}
.ap-row > span:first-of-type{flex:1;display:flex;align-items:center;gap:7px}
.ap-row.is-off{color:var(--muted);cursor:default}
.ap-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.ap-n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ap-clear{display:block;margin:4px 8px 4px auto;font-size:12.5px}
.kv-in .ap-btn,.ap.kv-in .ap-btn{padding:5px 9px;min-height:0}
.field .ap-row,.ap .ap-row{display:flex;font-size:13.5px;font-weight:500;color:var(--ink);margin:0;text-transform:none;letter-spacing:0}
.ap .ap-row input[type=checkbox]{width:16px;height:16px;flex:none;padding:0}
.ap .ap-row.is-off{color:var(--muted)}

/* The wide tabbed popup (the order popup): one fixed size, the table scrolls. */
#modal .modal-card.modal-tabbed-wide{width:min(1080px,96vw)!important;height:88vh;height:88dvh}
.modal-tabbed-wide .ord-bar{margin:0 0 12px;flex-wrap:wrap;gap:8px}
.modal-tabbed-wide .ord-table th{position:sticky;top:-20px;background:var(--surface);z-index:1}
.modal-tabbed-wide .modal-actions #om-sum{flex:1;min-width:0}
.om-for{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.om-for select{width:min(420px,100%)}
.om-empty{padding:28px 4px;text-align:center}
.om-lines tr.om-gone td{opacity:.45;text-decoration:line-through}
.om-lines tr.om-gone td:last-child{opacity:1;text-decoration:none}
@media (max-width:820px){#modal .modal-card.modal-tabbed-wide{height:100vh;height:100dvh;width:100%}}

/* Type to find (sfOpen in app.js): the search box a project dropdown opens. */
.sf{position:fixed;z-index:400;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -14px rgba(20,18,14,.32);padding:6px;display:flex;flex-direction:column;gap:4px}
.sf .sf-q{border-radius:8px;padding:8px 10px}
.sf-list{overflow:auto;overscroll-behavior:contain}
.sf-item{padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13.5px;line-height:1.3;color:var(--ink)}
.sf-item.on{background:var(--accent-soft)}
.sf-item.cur{font-weight:650}
.sf-item.sf-none{color:var(--muted)}
.sf-num{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;margin-right:8px}
.sf-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 9px 3px}
.sf-empty{padding:12px 9px;color:var(--muted);font-size:13px}
.rs-vendor-all{width:auto;min-width:190px;padding:6px 10px;font-size:13px}
.rs-vendor:disabled{opacity:.45;background:var(--surface-2);cursor:not-allowed}

/* An order's page (renderRequisitionDetail) */
.req-table td.rq-status{min-width:150px}
.rq-docs{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:5px;font-size:12px;color:var(--muted)}
.rq-doc{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rq-col{display:flex;flex-direction:column;gap:18px}
.rq-kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:9px 12px;margin:0;font-size:13.5px}
.rq-kv > div{display:contents}
.rq-kv dt{color:var(--muted)}
.rq-kv dd{margin:0}
.rq-notes{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;white-space:pre-wrap}
.rq-act-ic{display:inline-block;width:18px;text-align:center}
.po-activity li.clickable{cursor:pointer}
.po-activity li.clickable:hover{color:var(--accent)}
@media (max-width:900px){#view-requisition .po-2col{grid-template-columns:minmax(0,1fr)}}
.rq-kv dd .link{text-align:left}

/* Top bar: the avatar is a full circle the size of the bell and + (38px) */
.tb-me{height:38px;padding:0 14px 0 0;gap:9px}
.tb-me .me-av{width:38px;height:38px;margin:-1px 0 -1px -1px;font-size:13px}
@media (max-width:820px){.tb-me{padding:0;width:38px;border:0;background:none}.tb-me .me-av{margin:0}}
/* the right side never wraps under the bar: it takes the room its buttons need and the search gives way */
.tb-right{flex-wrap:nowrap}
@media (min-width:821px){.topbar{grid-template-columns:minmax(160px,1fr) minmax(0,560px) minmax(max-content,1fr)}}

/* Team page (renderTeam / renderTeamCrews) */
.tm-who{display:flex;align-items:center;gap:10px}
.tm-who .avatar{width:32px;height:32px;font-size:11.5px}
img.avatar{object-fit:cover}
/* New / Edit crew: colour swatches and a grid of people to pick */
.crw-colors{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.crw-colors .field-hint{margin:0 0 0 6px}
.crw-sw{width:28px;height:28px;border-radius:99px;background:var(--c);border:0;padding:0;cursor:pointer;box-shadow:0 0 0 2px var(--surface),0 0 0 2px transparent;transition:box-shadow .12s}
.crw-sw:hover{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line)}
.crw-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.field .crw-custom{position:relative;display:inline-block;margin:0;background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#ec4899,#ef4444)}
.field .crw-custom.on{background:var(--c)}
.crw-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.crw-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.crw-head label{margin:0}
.crw-head .crw-q{margin-left:auto;max-width:200px;padding:6px 10px;font-size:13px}
.crw-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;max-height:300px;overflow:auto;padding:2px}
.field .crw-person{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;margin:0;transition:border-color .12s,background .12s}
.crw-person[hidden]{display:none}
.crw-person:hover{border-color:var(--line-2)}
.crw-person input{position:absolute;opacity:0;pointer-events:none}
.crw-person:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.crw-person:has(input:checked) .avatar{box-shadow:0 0 0 2px var(--accent)}
.crw-person:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.field .crw-who{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.crw-who b{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crw-who small{font-size:11.5px;color:var(--muted)}
.tm-crew{display:inline-flex;align-items:center;gap:6px;margin-right:10px;white-space:nowrap}
.tm-crew .crew-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.tm-crew-sw{width:14px;height:14px;border-radius:4px;flex:none}
.tm-members{display:flex;align-items:center;gap:10px}
.tm-members .est-sub{margin:0}

/* Schedule: one toolbar row (the crews sit in it), and the calendar fills the screen (scFit) */
.sc-toolbar{flex-wrap:wrap;row-gap:8px}
.sc-crewdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#sc-crew-btn .sc-crewdot{margin-right:2px}
.sc-crewdots{display:inline-flex}.sc-crewdots .sc-crewdot+.sc-crewdot{margin-left:-3px;box-shadow:0 0 0 1.5px var(--surface)}
.pop-menu.sc-crewmenu{min-width:230px;gap:2px}
.sc-crewmenu .sc-crewopt{align-items:center}
.sc-crewmenu .sc-crewopt.sel{background:var(--surface-2);color:var(--ink)}
.sc-crewcheck{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.sc-crewopt.sel .sc-crewcheck{background:var(--ink);border-color:var(--ink);color:#fff}
.sc-unassigned{cursor:default}
#view-schedule .section-head{margin-bottom:10px}

/* Timesheets (renderTimesheets): the week grid */
.ts-grid th.ts-h{text-align:center}
.ts-grid .ts-dn{font-size:15px;font-weight:750;color:var(--ink);margin-top:2px;text-transform:none;letter-spacing:0}
.ts-grid th.is-today,.ts-grid th.is-today .ts-dn{color:var(--accent)}
.ts-grid td.ts-h.is-today{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.ts-grid .ts-h.we{background:var(--surface-2)}
.ts-grid td.ts-h.ot{color:var(--warn-ink);font-weight:750;background:var(--warn-bg)}
.ts-grid tfoot td{border-top:2px solid var(--line);font-weight:650;color:var(--ink-2);background:var(--surface-2)}
.ts-grid .ts-status{white-space:nowrap}
.ts-toolbar{flex-wrap:wrap;row-gap:8px}
.ts-grid td:first-child{min-width:190px}.ts-grid td:first-child .est-name{white-space:nowrap}
/* Asset page: the recent moves on Overview */
.as-move{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.as-move:last-child{border-bottom:0}
.as-move > span:first-child{min-width:0}
.as-move > span:last-child{flex:none}
.as-pay{width:100%;background:none;border-width:0 0 1px;border-radius:0;text-align:left;cursor:pointer;color:inherit;font:inherit;font-size:13.5px}
.as-pay:hover b{text-decoration:underline}
/* Schedule a visit: more than one day */
.nv-dates{display:flex;flex-direction:column;gap:6px}
.nv-date-row{display:flex;align-items:center;gap:6px}
.nv-date-row .nv-date{flex:1}
/* Time off: the Coming up tab */
.to-list{display:flex;flex-direction:column}
.to-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.to-row:last-child{border-bottom:0}
.to-row .avatar{width:32px;height:32px;font-size:11.5px}
.to-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.to-who b{font-size:13.5px;font-weight:650}
.to-who .subtle{font-size:12.5px}
/* Assets list: a pending move under where it is */
.asset-moving{color:var(--info-ink)}
.asset-moving .link{font-size:inherit;color:inherit}
/* Materials lists (Parts list, Orders, Deliveries): the stage chips in the
   card's toolbar, each in its status colour (DESIGN.md → Status colours) */
.st-chips{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.st-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:600;background:var(--sunk);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.st-chip i{width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.7}
.st-chip b{font-weight:750;font-variant-numeric:tabular-nums}
.st-chip.t-warn{background:var(--warn-bg);color:var(--warn-ink)}
.st-chip.t-hold{background:var(--hold-bg);color:var(--hold-ink)}
.st-chip.t-info{background:var(--info-bg);color:var(--info-ink)}
.st-chip.t-ok{background:var(--ok-bg);color:var(--ok-ink)}
.st-chip.t-bad{background:var(--bad-bg);color:var(--bad-ink)}
.st-chip.zero{background:var(--surface);color:var(--muted);border-color:var(--line)}
.st-chip.zero i{background:var(--line-2);opacity:1}
.st-chip:hover{border-color:currentColor;opacity:1}
.st-chip.on{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.st-chip.static{cursor:default}
.st-chip.static:hover{border-color:transparent}
/* A notification with a title and one short line of detail */
.nf-msg .nf-title{display:block;font-weight:700}
.nf-msg .nf-sub{display:block;font-weight:400;color:var(--ink-2);margin-top:1px}
.nf-row.unread .nf-msg .nf-sub{font-weight:400}
/* Work → Work orders: the labour line, the phase group rows, progress bars */
.wo-labour{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.wo-labour b{color:var(--ink)}
.wo-labour-bar{display:inline-block;width:96px;height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;vertical-align:middle}
.wo-labour-bar i{display:block;height:100%;background:var(--info-ink);border-radius:999px}
.wo-prog{display:block;width:110px;margin-top:6px}
.wo-phase .pl-group-in{gap:10px}
.wo-phase .phase-drag-handle{cursor:grab;color:var(--line-2);display:inline-flex}
.wo-phase .status-select{height:30px;font-size:12.5px;padding:0 26px 0 10px}
.wo-phase.drag-over td{box-shadow:inset 0 2px 0 var(--accent)}
.wo-g-name{font-size:13.5px;color:var(--ink-2)}
.wo-g-dates{font-size:12.5px}
.wo-suggest td{background:var(--info-bg);color:var(--info-ink);font-size:12.5px;padding:8px 16px}
.wo-suggest .link{margin-left:8px}
.wo-empty{padding:12px 16px}
/* Work → To-dos & inspections: what each row is */
.td-kind{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-right:8px;vertical-align:1px;background:var(--sunk);color:var(--ink-2)}
.td-kind.k-form{background:var(--hold-bg);color:var(--hold-ink)}
.td-kind.k-insp{background:var(--ok-bg);color:var(--ok-ink)}
/* Work → Scope: the sections listed on the left, the document on the right */
.sc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.sc-layout .sc-nav{position:sticky;top:80px;padding:8px;display:flex;flex-direction:column;gap:2px}
.sc-nav-i{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-nav-i:hover{background:var(--surface-2);opacity:1}
.sc-nav-i.on{background:var(--sunk);color:var(--ink)}
.sc-nav-src{padding:10px 12px 4px;font-size:12px;color:var(--muted)}
.scope-doc .sc-sec{padding:18px 22px;scroll-margin-top:90px}
.sc-n{font-size:12px;font-weight:700;color:var(--muted);min-width:14px}
.scope-doc .sc-body,.scope-doc .sc-text{margin-left:16px;width:calc(100% - 16px);font-size:14px;line-height:1.6;color:var(--ink-2)}
.scope-doc .sc-body{resize:none}
@media (max-width:760px){.sc-layout{grid-template-columns:1fr}.sc-layout .sc-nav{display:none}}
.sc-layout > .card{margin:0}
.sc-nav-src{text-align:left}
/* Money → Billing & change orders: what each row is; the billed bar's scope tick */
.td-kind.k-inv{background:var(--info-bg);color:var(--info-ink)}
.td-kind.k-co{background:var(--hold-bg);color:var(--hold-ink)}
.bi-bar{position:relative;overflow:visible}
.bi-bar i{border-radius:999px}
.bi-bar b{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink);border-radius:1px}
/* Money → Costs: each kind of cost its own colour (not the status colours) */
.cat-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.cat-badge i{width:6px;height:6px;border-radius:999px;background:currentColor}
.cat-badge.c-mat{background:#e2efed;color:#0b5f59}
.cat-badge.c-sub{background:#efe9f8;color:#4f318c}
.cat-badge.c-eq{background:#fbe9df;color:#9a4a1c}
.cat-badge.c-fuel{background:#e5eef8;color:#2a5588}
/* a list's summary beside the buttons (never after the chips, where it wraps onto a line of its own) */
.tab-bar-right .pl-sum{flex:none;min-width:0;font-size:13px}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-badge.c-mat { background: #17322f; color: #8fd0c6; }
  :root:not([data-theme="light"]) .cat-badge.c-sub { background: #2a2142; color: #c4b2f0; }
  :root:not([data-theme="light"]) .cat-badge.c-eq { background: #3a2417; color: #f0b48e; }
  :root:not([data-theme="light"]) .cat-badge.c-fuel { background: #1c2c44; color: #9cc0f0; }
}
:root[data-theme="dark"] .cat-badge.c-mat { background: #17322f; color: #8fd0c6; }
:root[data-theme="dark"] .cat-badge.c-sub { background: #2a2142; color: #c4b2f0; }
:root[data-theme="dark"] .cat-badge.c-eq { background: #3a2417; color: #f0b48e; }
:root[data-theme="dark"] .cat-badge.c-fuel { background: #1c2c44; color: #9cc0f0; }

/* New change order: the Internal / External choice above the tabs */
.co-type{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.co-type .subtle{font-size:12.5px}
/* Project → Overview: needs you and what's coming up first, the facts on the right */
.ov2-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.ov2-grid{grid-template-columns:1fr}}
.ov-handoff{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;margin-bottom:14px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13.5px}
.ov-handoff .sp{flex:1}
.ov-needs .group-head{gap:10px;flex-wrap:wrap}
.ov-need{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line)}
.ov-need-t{flex:1;min-width:0;font-size:14px}
.ov-need-t .subtle{font-size:12.5px;margin-top:2px}
.ov-dot{width:8px;height:8px;border-radius:999px;flex:none;background:var(--info-ink)}
.ov-dot.t-bad{background:var(--bad-ink)}.ov-dot.t-warn{background:var(--warn-ink)}
.ov-day{padding:8px 18px 6px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line)}
.ov-ev{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line);font-size:14px}
.ov-ev b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-ev .subtle{font-size:12.5px;white-space:nowrap}
.ov-kind{flex:none;width:92px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ov-kind.t-info{color:var(--info-ink)}.ov-kind.t-ok{color:var(--ok-ink)}.ov-kind.t-warn{color:var(--warn-ink)}.ov-kind.t-hold{color:var(--hold-ink)}
/* Your pinned records sit first in their lists, with a small pin */
.pin-mark{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--accent)}
.pin-mark svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
/* Notes with photos: + Photos in the box (previews before posting), the photos under a posted note */
.note-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.note-photos .basics-ph{width:72px;height:72px}
.note-pics{display:flex;flex-wrap:wrap;gap:6px}
.note-pics:not(:empty){margin-top:6px}
.note-pic{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.note-pic img{width:100%;height:100%;object-fit:cover;display:block}
.note-pic .row-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;line-height:1;padding:0}
.note-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.note-add-pics{cursor:pointer;display:inline-flex;align-items:center}
.basics-photos[hidden]{display:none}
/* Documents: a folder's field app access (set on its ⋯ menu) */
.dbx-acc{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:var(--surface-2);color:var(--ink-2);vertical-align:1px;white-space:nowrap}
.dbx-acc.office{background:#F6EDD6;color:#7A5810}
.dbx-acc.none{background:#F6E1DD;color:#A8362A}
.dbx-acc.field{background:#E1EEE4;color:#1F6B38}
.dbx-acc-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.dbx-acc-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.dbx-acc-opt:has(input:checked){border-color:var(--accent);background:var(--surface-2)}
.dbx-acc-opt > span{display:flex;flex-direction:column;gap:2px}
.dbx-acc-opt input[type=radio]{width:auto;flex:none;margin:3px 0 0}