/* Datum shared shell — skin + common components. Used by every page.
   Single source of truth for color/type/spacing tokens — see system/design-system.md.
   Do not redeclare colors locally on a page; repoint to these vars instead. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
  /* surfaces + text */
  --bg:#0d1117; --surface:#161b22; --surface-2:#1c2229; --surface-3:#232b34;
  --border:#262d38; --border-strong:#3a4553;
  --text:#e6edf3; --text-secondary:#9aa7b4; --text-muted:#657080;

  /* AXIS A — status (semantic, universal) */
  --green:#3fb950;  --green-bg:rgba(63,185,80,.14);   --green-border:rgba(63,185,80,.38);
  --amber:#d9a52b;  --amber-bg:rgba(217,165,43,.14);  --amber-border:rgba(217,165,43,.40);
  --red:#f0533f;    --red-bg:rgba(240,83,63,.14);     --red-border:rgba(240,83,63,.40);
  --blue:#4c9dff;   --blue-bg:rgba(76,157,255,.14);

  /* default cost-code chip color — see AXIS C below for where this gets overridden per family */
  --purple:#b984ff; --purple-bg:rgba(185,132,255,.15); --purple-border:rgba(185,132,255,.40);

  /* AXIS B — nav grouping (identity, not status) */
  --grp-build:#7c86ff; --grp-build-bg:rgba(124,134,255,.14);  /* build a bid — pre-award */
  --grp-run:#2bb6a2;   --grp-run-bg:rgba(43,182,162,.13);     /* run a job — awarded → actuals */
  --muted:#6e7681; --muted-bg:rgba(110,118,129,.15); --muted-border:rgba(110,118,129,.40);

  /* AXIS C — cost-code chip color, BY CODE PREFIX (see system/design-system.md).
     v3 — RECOLORS .chip-code itself (same pill shape, different color per numbering family),
     not an added dot. This means purple is no longer universal for "this is a cost code" on
     pages that opt in via DATUM.chipCodeHtml() — it's the fallback/default a page gets if it
     still hand-renders `.chip-code` directly. v1 colored by costing.cost_codes.division, which
     put nearly every 72xx code in one "Paving" bucket (a paving-heavy job read as solid one
     color); v2 added a small dot instead of recoloring the pill, which didn't read clearly
     enough at a glance either. This reads the code's own leading digit: 5xxx materials/expense,
     7xxx labour/phase, 9xxx subcontractor trades, 1xxx equipment (rare); anything else falls
     back to --muted. --div-* are the 4 FAMILY colors (used directly by subcontractor/equipment,
     which have no further split worth coloring). */
  --div-materials:#e8629f;     --div-materials-bg:rgba(232,98,159,.15);     --div-materials-border:rgba(232,98,159,.40);     /* 5xxx */
  --div-labour:#29b6d1;        --div-labour-bg:rgba(41,182,209,.15);       --div-labour-border:rgba(41,182,209,.40);       /* 7xxx */
  --div-subcontractor:#a3c022; --div-subcontractor-bg:rgba(163,192,34,.15); --div-subcontractor-border:rgba(163,192,34,.40); /* 9xxx */
  --div-equipment:#d97a3d;     --div-equipment-bg:rgba(217,122,61,.15);    --div-equipment-border:rgba(217,122,61,.40);    /* 1xxx */

  /* v4 — one step finer: WITHIN materials (5xxx) and labour (7xxx), each real sub-series gets
     its own shade of the family hue (same hue = same family at a glance; different lightness =
     different series). Subcontractor/Equipment have no further split (9xxx is one coherent
     series; 1xxx is a single code today) so they just reuse --div-subcontractor/--div-equipment
     above. Lightness ramp computed off the same base hue/saturation as the family color, not
     hand-picked, so each ramp stays visually "the same family, different member." */
  --series-materials-paving:#ed82b3;  --series-materials-paving-bg:rgba(237,130,179,.15);  --series-materials-paving-border:rgba(237,130,179,.40);  /* 5020 — biggest materials series */
  --series-materials-subs:#e65698;    --series-materials-subs-bg:rgba(230,86,152,.15);     --series-materials-subs-border:rgba(230,86,152,.40);     /* 5070 — subcontractor expense/trucking */
  --series-materials-ug:#e0297c;      --series-materials-ug-bg:rgba(224,41,124,.15);       --series-materials-ug-border:rgba(224,41,124,.40);       /* 5022 */
  --series-materials-equiprent:#c41d69; --series-materials-equiprent-bg:rgba(196,29,105,.15); --series-materials-equiprent-border:rgba(196,29,105,.40); /* 5040 */
  --series-materials-expense:#a01756; --series-materials-expense-bg:rgba(160,23,86,.15);   --series-materials-expense-border:rgba(160,23,86,.40);   /* 5030 */
  --series-labour-paving:#5dcadf;     --series-labour-paving-bg:rgba(93,202,223,.15);      --series-labour-paving-border:rgba(93,202,223,.40);      /* 7200 — biggest labour series */
  --series-labour-ug:#32bcd7;         --series-labour-ug-bg:rgba(50,188,215,.15);          --series-labour-ug-border:rgba(50,188,215,.40);          /* 7400 */
  --series-labour-earthworks:#239cb3; --series-labour-earthworks-bg:rgba(35,156,179,.15);  --series-labour-earthworks-border:rgba(35,156,179,.40);  /* 7100 */
  --series-labour-demo:#1c7e91;       --series-labour-demo-bg:rgba(28,126,145,.15);        --series-labour-demo-border:rgba(28,126,145,.40);        /* 7300 */

  /* type */
  --font-ui:'IBM Plex Sans',system-ui,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* space (4px base) + radius */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --r-control:6px; --r-card:8px;
}
/* Mobile breakpoint — ONE tier ("works on a phone"), not a device matrix. 720px covers phones
   in both orientations plus small tablets in portrait. CSS custom properties can't be read
   inside an @media condition (a hard CSS limitation, not a Datum choice), so this number is
   the source of truth for every `@media (max-width:720px)` in this codebase AND for
   DATUM.BREAKPOINT_MOBILE (assets/datum.js) where a page needs the same cutoff in JS. Keep
   both in sync by hand if this ever changes — see system/design-system.md. */
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;align-items:stretch;background:var(--bg);color:var(--text);font-family:var(--font-ui);min-height:100vh;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;font-size:16px}
a{color:var(--blue);text-decoration:none}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* nav rail — left sidebar, shared by every page via DATUM.mountNav(). Groups are identity
   (BUILD A BID / RUN A JOB / SYSTEM, from DATUM.GROUP_COLORS — see system/design-system.md),
   not status, so they never borrow green/amber/red/blue/purple. The current page's own group
   colors a 3px bar at the top of that page's main content (--page-accent, set on <body> here,
   read by each page's own .page-accent-bar) — "you are here," without reading anything. */
.dnav-rail{width:230px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;
  display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}
.dnav-rail .brand-row-wrap{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border);flex:none}
.dnav-rail .brand-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.dnav-rail .logo-chip{width:24px;height:24px;border-radius:6px;flex:none;background:linear-gradient(135deg,var(--grp-build),var(--grp-run))}
.dnav-rail .brand-name{font-family:var(--font-ui);font-weight:700;font-size:16px;color:var(--text)}
.dnav-rail .navgroups{padding:14px 10px;flex:1 1 auto}
.dnav-rail .navgrp{margin-bottom:6px}
.dnav-rail .navgrp-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:8px 10px 4px}
.dnav-rail a.lnk{display:block;padding:7px 10px;border-radius:6px;font-size:12.5px;color:var(--text-secondary);line-height:1.4}
.dnav-rail a.lnk:hover{background:var(--accent-bg, var(--surface-2));color:var(--text)}
.dnav-rail a.lnk.active{background:var(--accent-bg, var(--surface-2));color:var(--accent, var(--text));font-weight:600;position:relative;padding-left:16px}
.dnav-rail a.lnk.active::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:var(--accent, var(--blue))}
.dnav-rail .admin-chip{font-family:var(--font-mono);font-size:8px;font-weight:700;text-transform:uppercase;padding:1px 5px;border-radius:3px;background:var(--amber-bg);color:var(--amber);margin-left:6px;border:none;vertical-align:1px}
.dnav-rail .rail-footer{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--border);flex:none}
.dnav-rail .avatar{width:28px;height:28px;border-radius:50%;flex:none;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text)}
.dnav-rail .who-block{display:flex;flex-direction:column;min-width:0;flex:1}
.dnav-rail .who-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dnav-rail .who-role{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
.dnav-rail .signout{background:none;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;flex:none;padding:2px}
.dnav-rail .signout:hover{color:var(--red)}
.admin-chip{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--r-control);padding:1px 6px;margin-left:6px;vertical-align:1px;font-family:var(--font-ui)}
/* generic page-accent bar — first child of a page's main content area; color comes from
   --page-accent, set by mountNav() on <body> from the active tool's group (var(--border-strong)
   neutral on the Dashboard, which isn't "build a bid" or "run a job" identity). */
.page-accent-bar{height:3px;flex:none;background:var(--page-accent, transparent)}
/* Dashboard's standalone nav item — sits above the groups, active state is neutral (system
   page), never teal/indigo group chrome. */
.dnav-rail .dashboard-lnk{font-weight:600;margin-bottom:10px}
.dnav-rail .dashboard-lnk.active{background:var(--surface-2);color:var(--text)}

/* ---- mobile nav (below the breakpoint) — DATUM.mountNav() injects #dmobile-bar and
   #dnav-backdrop once per page alongside the existing #datum-nav rail; this is the ONLY nav
   fix needed anywhere, every page inherits it automatically. Above the breakpoint these are
   inert (display:none) and the desktop sidebar behaves exactly as before. ---- */
.dnav-rail .nav-close{display:none}
#dmobile-bar{display:none}
#dnav-backdrop{display:none}
@media (max-width:720px){
  #dmobile-bar{
    display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;height:52px;
    padding:0 14px;background:var(--surface);border-bottom:1px solid var(--border);z-index:60;
  }
  #dmobile-bar .mbar-burger{
    background:none;border:none;color:var(--text);font-size:20px;line-height:1;padding:10px;
    margin:-10px;cursor:pointer;flex:none;min-width:44px;min-height:44px;
  }
  #dmobile-bar .mbar-brand{font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--text)}
  #dnav-backdrop.show{display:block;position:fixed;inset:0;background:rgba(5,6,8,.6);z-index:59}

  .dnav-rail{
    position:fixed;top:0;left:0;bottom:0;width:min(82vw,300px);z-index:61;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 24px rgba(0,0,0,.4);
  }
  .dnav-rail.mobile-open{transform:translateX(0)}
  .dnav-rail .nav-close{
    display:block;margin-left:auto;background:none;border:none;color:var(--text-muted);
    font-size:20px;line-height:1;padding:10px;margin-right:-10px;cursor:pointer;min-width:44px;min-height:44px;
  }
  .dnav-rail a.lnk{padding:11px 10px;font-size:13.5px} /* taller tap target than desktop's 7px */

  /* content area no longer sits beside a static sidebar (the rail is fixed/off-canvas now) —
     it gets the full width automatically via flex:1. Top clearance for the fixed mobile bar
     goes on <body> itself (not .dpage-main) since page-local main wrappers vary by page
     (track.html uses .tmain, not the shared .dpage-main) — body's padding is universal. */
  body{padding-top:52px}
}

/* ---- shared page shell (nav rail + header + content) — every page beyond the rail itself
   reuses these: eyebrow+title header, content wrapper, and the card/row pattern below. ---- */
.dpage-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh}
.dpage-header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border);background:var(--surface);flex:none;flex-wrap:wrap;gap:12px}
.dpage-eyebrow{display:flex;align-items:center;gap:8px}
.dpage-eyebrow-dot{width:8px;height:8px;border-radius:2px;flex:none}
.dpage-eyebrow-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.dpage-title{font-size:21px;font-weight:600;color:var(--text);margin-top:5px}
.dpage-header-right{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);white-space:nowrap}
.dpage-content{flex:1;padding:24px 28px 60px;overflow-y:auto}
.dpage-content-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
@media (max-width:720px){
  .dpage-header{padding:14px 16px}
  .dpage-title{font-size:18px}
  .dpage-content{padding:16px 14px 40px}
}

/* generic card pattern: surface/border/radius/overflow-hidden shell, a header row, an optional
   column-header row, and hoverable grid rows — every "Run a job" page's tables reuse these
   instead of hand-rolling their own card chrome. */
.dcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.dcard-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.dcard-head .t{font-size:15px;font-weight:600}
.dcard-colhead{padding:10px 20px;background:var(--surface-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:grid;gap:12px}
.dcard-row{padding:13px 20px;border-bottom:1px solid var(--border);display:grid;gap:12px;align-items:center}
.dcard-row:last-child{border-bottom:none}
.dcard-row:hover{background:var(--surface-2)}
.dcard-row.clickable{cursor:pointer}

/* stat strip — 4-col KPI grid, shared by Dashboard and Tracking */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px}
.stat-card .l{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.stat-card .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:23px;font-weight:600;margin-top:8px;color:var(--text)}
.stat-card .v.green{color:var(--green)}
.stat-card .n{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:4px}
@media (max-width:720px){
  /* 4 KPI tiles at 150px min each simply don't fit a phone width — single column, per the
     mobile-responsive WO's explicit ask for Dashboard's KPI strip (Tracking's stat strip
     inherits the same rule since it's the same shared class). */
  .stat-strip{grid-template-columns:1fr}
  /* every list row reachable by tap (Dashboard's "needs your attention" + "active jobs", any
     other page reusing .dcard-row) gets a real touch target, not just whatever its content's
     line-height happens to produce. */
  .dcard-row{padding:14px 20px;min-height:44px}
  .dcard-row.clickable{-webkit-tap-highlight-color:var(--surface-3)}
}

/* layout — main content area beside the nav rail. Pages that haven't adopted a rail-aware
   layout of their own still get the full remaining width via flex:1 here. */
.wrap{flex:1;min-width:0;max-width:1120px;margin:0 auto;padding:24px 18px 90px}
.title{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:26px}
.title .accent{color:var(--blue)}
.sub{color:var(--text-secondary);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:4px 0 18px}
.section{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;color:var(--text-secondary);margin:24px 0 10px}

/* cards + grids */
.grid{display:grid;gap:var(--s-3)}
.cols-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-4)}
.card2{background:var(--surface-2);border-radius:var(--r-control);padding:13px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:18px;cursor:pointer;transition:border-color .12s,transform .12s;display:block}
.tile:hover{border-color:var(--blue);transform:translateY(-2px)}
.tile .h{font-family:var(--font-ui);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.03em}
.tile .d{color:var(--text-secondary);font-size:12.5px;margin-top:5px}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3)}
.kpi{background:var(--surface-2);border-radius:var(--r-control);padding:13px}
.kpi .l{color:var(--text-secondary);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.kpi .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:21px}
.kpi .v.amber{color:var(--amber)}.kpi .v.green{color:var(--green)}.kpi .v.red{color:var(--red)}

/* buttons + inputs — primary=blue (action), secondary=bordered, danger=red tint, ghost=text only */
.btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-control);padding:9px 13px;font-size:12.5px;font-weight:600;text-transform:uppercase;cursor:pointer;font-family:var(--font-ui)}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);color:var(--bg);border-color:var(--blue)}
.btn.primary:hover{color:var(--bg);filter:brightness(1.08)}
.btn.secondary{background:transparent;border:1px solid var(--border-strong);color:var(--text)}
.btn.secondary:hover{border-color:var(--blue);color:var(--blue)}
.btn.danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.btn.danger:hover{filter:brightness(1.1)}
.btn.ghost{background:none;border:none;color:var(--text-secondary);padding:9px 4px}
.btn.ghost:hover{color:var(--blue)}
.inp{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--r-control);padding:9px 11px;font-size:14px;font-family:var(--font-ui)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 9px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--text-secondary);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.muted{color:var(--text-muted)}

/* status pill — rounded (999px), green/amber/red/blue/muted variants only; never a 4th status color */
.pill{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--r-control);padding:2px 7px}
.status-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:3px 10px;border:1px solid transparent}
.status-pill.green{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.status-pill.amber{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.status-pill.red{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.status-pill.blue{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}
.status-pill.muted{background:var(--surface-2);border-color:var(--border);color:var(--text-muted)}
/* override pill — indigo, admin access-panel only: user's access differs from role default */
.status-pill.override{background:var(--grp-build-bg);border-color:var(--grp-build);color:var(--grp-build)}

/* cost-code chip — mono, 4px corners. Purple by default; a page that renders via
   DATUM.chipCodeHtml() gets it recolored per numbering family instead (AXIS C, see
   system/design-system.md) — same shape, inline color/background/border-color override. */
.chip-code{display:inline-block;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--purple);background:var(--purple-bg);border:1px solid var(--purple-border);border-radius:4px;padding:2px 7px}

/* actuals-vs-budget bar — green fill under budget, red past 100%, hatched segment = amount moved elsewhere */
.actuals-bar{height:11px;background:var(--surface-2);border-radius:var(--r-control);overflow:hidden;position:relative}
.actuals-bar i{position:absolute;top:0;left:0;height:100%;border-radius:var(--r-control);background:var(--green)}
.actuals-bar i.over{background:var(--red)}
.actuals-bar i.hatched{background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 4px,transparent 4px,transparent 8px);opacity:.85}

/* value-override badge — extends the hatched "amount moved elsewhere" convention above to
   "calculated value replaced by a reasoned override": same amber hatch, calculated value struck
   through/muted, override value in blue/bold. Full reason lives in the title tooltip. Distinct
   from .status-pill.override above (that's a per-user access-panel state, unrelated concept). */
.override-badge{display:inline-flex;align-items:center;gap:6px}
.override-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none;
  background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 3px,transparent 3px,transparent 6px);opacity:.85}
.override-badge .calc{color:var(--text-muted);text-decoration:line-through}
.override-badge .ov{color:var(--blue);font-weight:700}

/* contextual help affordance (WO#003) — small "?" next to a control/section, opens a popover
   pulling live content from datum.ui_help via DATUM.helpIcon()/toggleHelp(). One shared style
   for every page, same as GROUP_COLORS/chip-code — don't hand-roll a per-page help icon. */
.dhelp-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong);
  color:var(--text-muted);font-size:11px;font-weight:700;font-family:var(--font-ui);cursor:pointer;
  flex:none;line-height:1;padding:0;transition:background .12s,color .12s,border-color .12s}
.dhelp-icon:hover{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}
.dhelp-pop{position:absolute;z-index:95000;width:320px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);font-family:var(--font-ui);color:var(--text)}
.dhelp-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:10px 12px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border)}
.dhelp-pop-x{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:0;line-height:1}
.dhelp-pop-x:hover{color:var(--text)}
.dhelp-pop-body{padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--text-secondary)}
@media (max-width:720px){ .dhelp-pop{width:calc(100vw - 32px)} }

/* per-record feedback affordance (WO#001) — small "⚑" next to a row so a report can attach
   itself to that exact record instead of relying on prose. Same shared-icon shape as
   .dhelp-icon, amber-tinted so it reads distinctly as "flag a problem," not "get help." */
.dflag-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong);
  color:var(--text-muted);font-size:11px;cursor:pointer;flex:none;line-height:1;padding:0;
  transition:background .12s,color .12s,border-color .12s}
.dflag-icon:hover{background:var(--amber-bg);color:var(--amber);border-color:var(--amber)}

/* estimator notes — append-only list + single-line composer, reused at job/bucket/line level */
.notes-list{display:flex;flex-direction:column;gap:6px;padding:8px 20px 4px 44px}
.note-item{background:var(--surface-2);border-radius:6px;padding:7px 10px;font-size:12px}
.note-item .meta{color:var(--text-muted);font-size:10.5px;margin-bottom:2px}
.note-add{display:flex;gap:8px;padding:6px 20px 12px 44px}
.note-add input{flex:1;background:var(--bg);border:1px solid var(--border-strong);border-radius:6px;padding:6px 9px;font-size:12.5px;color:var(--text)}

/* read-only mode banner — planned, styled now so it drops in without retrofit */
.readonly-banner{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-card);padding:10px 14px;margin-bottom:16px;font-size:12.5px;color:var(--text-secondary)}
.readonly-banner b{color:var(--text)}

/* tutorial banner */
.coach{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--r-card);padding:14px 16px;margin-bottom:18px;display:flex;gap:14px;align-items:flex-start}
.coach .x{margin-left:auto;background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer}
.coach b{color:var(--amber)}

/* login overlay */
#dov{position:fixed;inset:0;background:rgba(5,6,8,.96);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
#dov.show{display:flex}
.lc{max-width:360px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px}
.lc h3{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;font-size:18px;margin-bottom:4px}
.lc p{color:var(--text-secondary);font-size:12.5px;margin-bottom:16px}
.lc input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:9px;font-size:15px;margin-bottom:10px}
.lc button{width:100%;background:var(--blue);color:var(--bg);border:none;border-radius:9px;padding:12px;font-weight:600;text-transform:uppercase;cursor:pointer}
.lc .err{color:var(--red);font-size:12px;margin-top:10px;min-height:16px}