/* /kielty.css: The Kielty Way for Kielty OS. The one design file. Every page links it.

   CLASS VOCABULARY. Use these. Do not invent new ones for something listed here. New markup uses the rjk-* name; existing markup
   keeps its old class name because JS and tests read them, and the old name is mapped onto the same look further down.

   Page          .db-hd or .rjk-head         page header: eyebrow, title, one muted line, actions on the right. Not navy.
                 .title or .rjk-title        the page title, Figtree 700 26px. Inside #main the eyebrow appears by itself (section 7).
                 .wk or .rjk-muted           the one muted line under the title
                 .rjk-eyebrow                Oswald label. Eyebrows and small labels only.
   Buttons       .rjk-btn + --gold           the one main action on a screen, at most one
                 .btn.red, .btn.bp, --primary  navy. In a page header the first .btn.red turns gold by itself
                 .btn, .btn.bg2, .btn.ghost, --secondary  white with a border
                 .bsm or --sm                34px, for tables and panel heads. 44px everywhere else
                 .edit                       link-style action; a small white button when inside a table cell
                 .rjk-iconbtn                icon-only button, 44px, must have aria-label
   Cards         .panel or .rjk-card         white, line border, 14px corners. No cards inside cards
                 .phd, .hd or .rjk-hd        card header: h3 Figtree 600 16px, then .mn or actions
                 .rjk-row                    a list row inside a card; .hm-row is the same thing
   Number tiles  .kpis/.kpis4/.hm-kpis, holding .kpi/.hm-kpi
                 inside: .kl/.lbl (eyebrow), .kv/.num (the number), .kd/.dl (small muted line). .kv.red for late
   Tabs          .hm-tabs/.hm-tab, .pe-tabs/.pe-tab, .jtabs/.jtab. .on is gold underlined
   Filters       .pillset/.pill or .rjk-seg with buttons: pick one of a few, .on is the white lifted one
                 .chipset/.fchip, .catbar/.cat: filter chips, .on or .all is navy
   Tables        plain <table> anywhere: 14px, sunk header, hairline rows. .rtbl and .rjk-table look the same
                 td.num, .amt, td.mono, .code: JetBrains Mono, numbers right. Wide table: wrap in .tblx or .rjk-tablebox
                 table.stack-sm: rows stack on a phone so a table's actions stay on screen
   Tags          .tag or .st, or .rjk-tag + --modifier, 24px tall
                 done: .tg, .st.sign, --done. Due soon: .ty, .st.rev, --due. Late or broken: .tr2, .st.late, --overdue (and say "Late")
                 plain: .tn, .st.draft, .st.off, .st.wait, --neutral. In progress: .tb, .st.sent
                 trade: .trade.t-p, .t-h, .t-e, or --plumbing, --ac, --electrical with <span class="dot"></span>
   Forms         .inp 44px in forms, 34px in table cells and panel heads; .rjk-input 46px with 16px text for phone-first pages. .lbl: the label over a field
                 .rjk-field with label: stacked label and input. .fgrid2: a row of fields. .pn-grid: a grid of labelled fields
   Modals        .modal-bg > .modal > .mh, .mb, .mf. modal() and .mwrap are the same look; a modal() body ends with .m-foot for its buttons. .modal-bg.drawer for a right-hand drawer
                 .jbov > .jbsheet: the big record sheets
   Messages      .note: soft cream callout. .note2: small muted line. .empty: nothing here yet. .toast is shared
                 .failnote and .ins-bad: red. .ins-good: green. .rjk-signoff: the navy approval card, one per screen at most
   Icons         window.rjkIcon(name, size) from /kielty.js. Trade words on screen: window.trLabel(value). Values stay HVAC and Electric.
   Text helpers  .mn (muted small), .mono, .rjk-mono, .rjk-muted, .rjk-sm, .rjk-nowrap, .dollar (green), .up (red), .dn (green). tr.rjk-sub: a subtotal row. .kpi .num.rjk-numsm: a long number in a tile. window.NONE_YET: a tile with no number
   Framed pages  .appframe: an iframe that fills the content area down to the window edge (bids, schedule)
   Outside pages .pub-top, .pub-main, .pub-body, .pub-foot, .pub-state, .pub-ok, .pub-bad, .pub-form, .pub-check, .pub-seg: section 10. Pages that show #app set #app { display: block }
   Printing      window.rjkPrint in /kielty.js holds the print values, head, logo header and auto-print. Printed and emailed HTML carries its own styles

   Not for reuse: .rjk-tribar is only under the top bar. The leaning panels are only on sign-in and the My Day greeting.
   Rules: no hex in templates or inline styles; use a class or var(--token). Old token names in section 3 are a bridge: replace them when you touch a line.
   Sections: 1 tokens and components, verbatim from the brand package. 2 shell rules, verbatim from the mock. 3 old token names.
   4 base. 5 app shell. 6 sign in. 7 shared components. 8 office screens, one block per screen. 9 phones. 10 outside pages. 11 printing a screen. */

/* ============================================================ 1. Brand package: code/tokens-and-components.css, verbatim ============================================================ */
:root {
  --navy: #1A2A39;
  --navy-800: #24384B;
  --navy-muted: #A3AFC0;
  --cream: #FBE6B7;
  --cream-soft: #FDF5E2;
  --gold: #FFC13A;
  --gold-ink: #8A5A00;
  --canvas: #F7F4EE;
  --surface: #FFFFFF;
  --surface-sunk: #EFEDE7;
  --line: #E4E1D9;
  --line-strong: #C9C5BA;
  --ink: var(--navy);
  --ink-muted: #5B6472;
  --ink-subtle: #646B77; /* ui: 4.5:1+ on white, canvas and surface-sunk (WCAG AA) */
  --plumbing: #D10006;
  --plumbing-ink: #B00006;
  --plumbing-tint: #FDECEC;
  --ac: #1D89C0;
  --ac-ink: #14699B;
  --ac-tint: #E8F3FB;
  --electrical: #F88E31;
  --electrical-deep: #DE5E17;
  --electrical-ink: #9A4E00;
  --electrical-tint: #FEF1E4;
  --heating: #E5731A;
  --success: #1F7A4D;
  --success-tint: #E7F3EC;
  --danger: var(--plumbing-ink);
  --scrim: rgba(26,42,57,.55);          /* behind a dialog, sheet or side menu */
  --scrim-photo: rgba(26,42,57,.94);    /* behind a photo that fills the window */
  --chip-on-photo: rgba(26,42,57,.8);   /* a small control sitting on a photo */
  --on-scrim: rgba(255,255,255,.14);    /* a button on a scrim; hover uses --on-scrim-hover */
  --on-scrim-hover: rgba(255,255,255,.24);
  --line-on-navy: rgba(163,175,192,.3); /* a rule on a navy panel */
  --video-fade: linear-gradient(180deg, rgba(26,42,57,.1), rgba(26,42,57,.7));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(22,32,46,0.06);
  --shadow-pop: 0 8px 24px rgba(22,32,46,0.12);
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Oswald, "Arial Narrow", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--ac-ink); text-decoration: none; }

/* ============================================================
   Shared primitives (ported from rjk.css)
   ============================================================ */
.rjk-icon { display: block; flex: none; }
.rjk-eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.rjk-mono { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; }
.rjk-muted { color: var(--ink-muted); }
.rjk-sm { font-size: 13px; line-height: 18px; font-weight: 500; }

/* ---- logo lockup: the real logo, never redrawn ---- */
.rjk-brand { display: flex; align-items: center; gap: 12px; }
.rjk-brand img { height: 42px; width: auto; display: block; flex: none; }
/* public pages and forms carry the company brand: a larger logo (Tanner, 2026-11-07) */
.pub-top .rjk-brand img { height: 60px; }
.rjk-brand b { display: block; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.1px; padding-left: 12px; border-left: 1px solid var(--line); }
.rjk-tribar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--plumbing) 0 33.34%, var(--ac) 33.34% 66.67%, var(--electrical) 66.67% 100%); }
.rjk-brand small { display: block; font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; }

/* ---- trade panels (the brand signature) ---- */
.rjk-panels { display: block; }
.rjk-p-red { fill: var(--plumbing); } .rjk-p-blue { fill: var(--ac); } .rjk-p-orange { fill: var(--electrical); }

/* ---- trade tiles ---- */
.rjk-tile { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; color: #fff; flex: none; }
.rjk-tile--plumbing { background: var(--plumbing); }
.rjk-tile--ac { background: var(--ac); }
.rjk-tile--electrical { background: var(--electrical-deep); }
.rjk-tile--company { background: var(--navy); color: var(--cream); }

/* ---- buttons ---- */
.rjk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid transparent; font: 600 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.rjk-btn--primary { background: var(--navy); color: #fff; }
.rjk-btn--primary:hover { background: var(--navy-800); }
.rjk-btn--gold { background: var(--gold); color: var(--navy); }
.rjk-btn--gold:hover { filter: brightness(0.97); }
.rjk-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.rjk-btn--secondary:hover { background: var(--surface-sunk); }
.rjk-btn--ghost { background: transparent; color: var(--ink); }
.rjk-btn--ghost:hover { background: var(--surface-sunk); }
.rjk-btn--sm { height: 34px; padding: 0 12px; font-size: 14px; border-radius: var(--radius-sm); }
.rjk-btn--block { width: 100%; }
.rjk-btn:disabled { opacity: .55; cursor: default; }
.rjk-btn:focus-visible, .rjk-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---- fields ---- */
.rjk-field { display: flex; flex-direction: column; gap: 6px; }
.rjk-field label { font-size: 13px; line-height: 18px; font-weight: 600; }
.rjk-field .help { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rjk-input { height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); padding: 0 14px; font: 400 16px var(--font-sans); color: var(--ink); width: 100%; }
.rjk-input::placeholder { color: var(--ink-subtle); }
.rjk-input.mono { font-family: var(--font-mono); letter-spacing: .04em; }

/* ---- tags ---- */
.rjk-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.rjk-tag .dot { width: 7px; height: 7px; border-radius: 50%; }
.rjk-tag--plumbing { background: var(--plumbing-tint); color: var(--plumbing-ink); } .rjk-tag--plumbing .dot { background: var(--plumbing); }
.rjk-tag--ac { background: var(--ac-tint); color: var(--ac-ink); } .rjk-tag--ac .dot { background: var(--ac); }
.rjk-tag--electrical { background: var(--electrical-tint); color: var(--electrical-ink); } .rjk-tag--electrical .dot { background: var(--electrical); }
.rjk-tag--neutral { background: var(--surface-sunk); color: var(--ink-muted); }
.rjk-tag--done { background: var(--success-tint); color: var(--success); }
.rjk-tag--due { background: var(--cream-soft); color: var(--gold-ink); }
.rjk-tag--overdue { background: var(--plumbing-tint); color: var(--danger); }

/* ---- cards ---- */
.rjk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* ============================================================ 2. Shell rules, verbatim from the approved mock (mock/kielty.css, copied from the live Kielty Way app) ============================================================ */
/* ---- shell, as on the live Kielty Way app ---- */

.rjk-grpbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; margin-top: 6px; padding: 0 12px; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.rjk-grpbtn:hover { background: var(--canvas); color: var(--ink); }
.rjk-nav { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); color: var(--ink-muted); font-weight: 500; font-size: 15px; position: relative; text-decoration: none; }
.rjk-nav:hover { background: var(--canvas); color: var(--ink); }
.rjk-nav.on { background: var(--navy); color: #fff; }
.rjk-nav.on::after { content: ""; position: absolute; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.rjk-nav .count { margin-left: auto; font: 600 12px var(--font-sans); background: var(--gold); color: var(--navy); border-radius: var(--radius-full); padding: 2px 7px; }
.rjk-nav.on .count { margin-right: 12px; }
.rjk-me { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.rjk-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--cream); font-weight: 700; font-size: 13px; }

.rjk-top { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 68px; padding: 12px 32px 16px; background: var(--surface); }
.rjk-search { flex: 1 1 280px; max-width: 420px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ink-subtle); }
.rjk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px var(--font-sans); color: var(--ink); }
.rjk-search input::placeholder { color: var(--ink-subtle); }
.rjk-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunk); border-radius: var(--radius-md); }
.rjk-seg button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; background: none; border-radius: 8px; font: 600 14px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.rjk-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.rjk-seg button.p.on { background: var(--plumbing-tint); color: var(--plumbing-ink); }
.rjk-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius-md); color: var(--ink-muted); cursor: pointer; }
.rjk-iconbtn:hover { background: var(--surface-sunk); }

.rjk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.rjk-title { margin: 4px 0 2px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.3px; }

/* ---- office additions: tabs, number tiles, tables ---- */

.rjk-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rjk-hd h3 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.rjk-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rjk-row:last-child { border-bottom: 0; }
.rjk-row .t { flex: 1 1 200px; min-width: 0; }
.rjk-row .t b { display: block; font-weight: 600; }
.rjk-tablebox { overflow-x: auto; }
.rjk-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.rjk-table th { text-align: left; background: var(--surface-sunk); font-weight: 600; font-size: 13px; padding: 10px 14px; white-space: nowrap; }
.rjk-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.rjk-table tbody tr:hover td { background: var(--canvas); }
.rjk-table .num { text-align: right; font-family: var(--font-mono); font-weight: 500; font-size: 13px; white-space: nowrap; }
.rjk-table .code { font-family: var(--font-mono); font-weight: 500; font-size: 13px; white-space: nowrap; }

/* ---- navy approval card, the live app's sign-off card ---- */
.rjk-signoff { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 18px; }
.rjk-signoff h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.rjk-signoff p { margin: 0 0 14px; font-size: 13px; line-height: 19px; color: var(--navy-muted); }

/* ---- sign in, as on the live app ---- */
.signin-grid { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); background: var(--canvas); font-family: var(--font-sans); color: var(--ink); }
.signin-brand { position: relative; background: var(--navy); overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; }
.signin-stripes { position: absolute; top: -4%; bottom: -4%; right: 56px; display: flex; transform: skewX(-9deg); }
.signin-stripes span { width: 18px; display: block; }
.signin-stripes span:nth-child(1) { background: var(--plumbing); }
.signin-stripes span:nth-child(2) { background: var(--ac); }
.signin-stripes span:nth-child(3) { background: var(--electrical); }
.signin-inner { position: relative; padding: 64px 140px 64px 64px; margin: auto 0; }
.signin-logo { width: min(300px,70%); height: auto; display: block; filter: drop-shadow(rgba(0,0,0,.4) 0 12px 34px); }
.signin-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.signin-points li { display: flex; align-items: center; gap: 12px; color: #E8ECF2; font-size: 15.5px; font-weight: 500; }
.signin-points .d { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.signin-foot { position: relative; padding: 0 140px 26px 64px; color: var(--navy-muted); font-family: var(--font-display); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.signin-form { background: var(--surface); display: flex; flex-direction: column; justify-content: center; padding: 28px 60px; min-width: 0; }
@media (max-width: 820px) { .signin-grid { grid-template-columns: minmax(0,1fr); } .signin-brand { display: none; } }

/* ---- phone ---- */

.rjk-phone-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 68px; padding: 0 16px 4px; background: var(--surface); flex: none; }

.rjk-tabbar { flex: none; display: flex; justify-content: space-around; padding: 6px; background: var(--surface); border-top: 1px solid var(--line); }
.rjk-tab { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--ink-subtle); font: 600 12px var(--font-sans); text-decoration: none; cursor: pointer; }
.rjk-tab.on { color: var(--navy); font-weight: 700; }
.rjk-tab.on::before { content: ""; position: absolute; bottom: 1px; left: calc(50% - 12px); width: 24px; height: 3px; border-radius: 3px; background: var(--gold); }
.rjk-lang { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunk); border-radius: var(--radius-md); }
.rjk-lang button { min-height: 38px; padding: 0 10px; border: 0; background: none; border-radius: 8px; font: 600 13px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.rjk-lang button.on { background: var(--navy); color: #fff; }

/* ============================================================ 3. Old token names, a bridge for inline styles still in the templates ============================================================ */
:root {
  --paper: var(--canvas); --card: var(--surface); --panel: var(--surface); --text: var(--ink); --ink-2: var(--navy-800);
  --muted: var(--ink-muted); --mute: var(--ink-muted); --line2: var(--line); --radius: var(--radius-md);
  --kielty: var(--danger); --red: var(--danger); --r: var(--danger); --g: var(--success); --good: var(--success);
  --tint: var(--cream-soft); --tint2: var(--surface-sunk); --tint-warn: var(--cream-soft); --sel: var(--cream-soft);
  --plumb: var(--plumbing); --hvac: var(--ac); --elec: var(--electrical);
  --bred: var(--plumbing); --bred-d: var(--plumbing-ink); --bblue: var(--ac); --borange: var(--electrical); --byellow: var(--gold); --title: var(--ink);
  --navy2: var(--navy-800); --navyline: var(--line-strong); --cream2: var(--cream-soft); --onnavy: #fff; --onnavy-m: var(--navy-muted);
  --bd-open-bg: var(--surface-sunk); --bd-open-fg: var(--ink-muted); --bd-progress-bg: var(--surface-sunk); --bd-progress-fg: var(--ink);
  --bd-wait-bg: var(--surface-sunk); --bd-wait-fg: var(--ink-muted); --bd-warn-bg: var(--cream-soft); --bd-warn-fg: var(--gold-ink);
  --bd-late-bg: var(--plumbing-tint); --bd-late-fg: var(--danger); --bd-done-bg: var(--success-tint); --bd-done-fg: var(--success);
  --bd-off-bg: var(--surface-sunk); --bd-off-fg: var(--ink-muted); --fs-meta: 13px;
}

/* ============================================================ 4. Base ============================================================ */
* { margin: 0; padding: 0; }
::selection { background: var(--cream); }
button, input, select, textarea { font-family: inherit; color: inherit; }
select { background-color: var(--surface); }
input[type=checkbox], input[type=radio] { accent-color: var(--navy); }
[role=button] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#main a:not(.btn):not(.rjk-btn) { color: var(--ac-ink); font-weight: 600; }
#main a:not(.btn):not(.rjk-btn):hover { text-decoration: underline; }
.mn { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }

.up { color: var(--danger); }
.dn { color: var(--success); }

.spark { display: block; margin-top: 6px; }
/* a row wider than its box scrolls inside it. While there is more that way the right edge fades softly into whatever is behind it;
   at the end of the scroll, or when everything fits, there is no fade. The fade is on the row's own content, so it is never a block on top of the words. */
.tblx, .rtblwrap, .rjk-tablebox, .pe-gw { overflow-x: auto; }
@property --fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes rjk-fade-r { from { --fade-r: 36px; } 97% { --fade-r: 36px; } to { --fade-r: 0px; } }
@supports (animation-timeline: scroll()) {
  .tblx, .rtblwrap, .rjk-tablebox, .pe-gw, .hm-tabs, .pe-tabs, .jtabs, .kb, .dboard, .mgrid, .bw-tw {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-r));
    mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-r));
    animation: rjk-fade-r linear both;
    animation-timeline: scroll(self inline);
  }
}

/* ============================================================ 5. App shell: side menu, top bar, AI helper, toast ============================================================ */
#app { display: none; }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-1); padding: 20px 14px; background: var(--surface); border-right: 1px solid var(--line); scrollbar-width: thin; }
.side .brand { position: relative; padding: 0 8px 14px; }
.side .nav { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--space-1); }
#sbx { display: none; position: absolute; top: -8px; right: -8px; }
.nav .grp[hidden], .nav .nv[hidden], .nav .grp[hidden] + .gwrap { display: none; }
/* flex: none: an open group is as tall as its rows, and the menu scrolls. Left to shrink, the column squeezes a group and clips its last rows out of reach */
.nav .grp { flex: none; }
.nav .gwrap { flex: none; display: flex; flex-direction: column; gap: var(--space-1); max-height: 0; overflow: hidden; visibility: hidden; }
.nav .gwrap.open { max-height: 640px; visibility: visible; }
.grp .gch { display: grid; place-items: center; transition: transform .15s; }
.grp.open .gch { transform: rotate(90deg); }
.nv .ic { display: grid; place-items: center; flex: none; }
.rjk-nav { cursor: pointer; flex: none; }
.rjk-nav:hover { text-decoration: none; }
.rjk-me .nm { font-weight: 600; font-size: 14px; line-height: 18px; overflow-wrap: anywhere; }
.rjk-me .rl { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.rjk-me .who { min-width: 0; flex: 1; cursor: pointer; }
.rjk-me .rjk-avatar { cursor: pointer; overflow: hidden; }
.rjk-me .rjk-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--cream); font-weight: 700; font-size: 13px; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 55; }
.topbar .spacer { flex: 1; }
.gswrap { position: relative; flex: 999 1 300px; max-width: 420px; min-width: 0; }
.gswrap input:placeholder-shown { text-overflow: ellipsis; }
#gearBtn.on { background: var(--surface-sunk); color: var(--ink); }
.topbar.rjk-top { column-gap: var(--space-3); }
.topbar .rjk-seg button { padding: 0 10px; }
.gswrap .rjk-search { max-width: none; cursor: text; }
.rjk-search:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
#gsD { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; width: 480px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); z-index: 60; max-height: 420px; overflow-y: auto; }
.rjk-seg .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rjk-seg .dot.p { background: var(--plumbing); }
.rjk-seg .dot.h { background: var(--ac); }
.rjk-seg .dot.e { background: var(--electrical); }
.rjk-seg button.h.on { background: var(--ac-tint); color: var(--ac-ink); }
.rjk-seg button.e.on { background: var(--electrical-tint); color: var(--electrical-ink); }
#hb { display: none; flex: none; }
#railT { flex: none; margin-top: var(--space-1); color: var(--ink-subtle); transition: transform .15s; }
.app.railmin #railT { transform: rotate(180deg); }
#sbov { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 110; }
#sbov.on { display: block; }
.content { padding: var(--space-6) var(--space-8) var(--space-12); min-width: 0; }
/* a page framed inside the app (bids) fills the content area down to the window edge and scrolls by itself */
.appframe { display: block; width: 100%; height: calc(100dvh - 96px); margin-bottom: calc(-1 * var(--space-12)); border: 0; background: transparent; }
@media (max-width: 900px) { .appframe { height: calc(100dvh - 132px); margin-bottom: -96px; } }
#main.vload { pointer-events: none; }
#main.vload > * { opacity: .35; transition: opacity .12s ease; }
#main.vload::after { content: 'Loading'; position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 60; padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); font: 600 13px/20px var(--font-sans); color: #fff; background: var(--navy); box-shadow: var(--shadow-pop); }
.skel { padding: var(--space-4); }
.skel i { display: block; height: 12px; border-radius: var(--radius-sm); margin: var(--space-3) 0; background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--canvas) 45%, var(--surface-sunk) 65%); background-size: 200% 100%; animation: sh 1.1s linear infinite; }
@keyframes sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (min-width: 901px) {
  .app.railmin { grid-template-columns: 72px minmax(0, 1fr); }
  .app.railmin .side { padding: 20px 8px; align-items: stretch; }
  .app.railmin .rjk-brand { justify-content: center; padding: 0 0 14px; }
  .app.railmin .rjk-brand img { height: 32px; }
  .app.railmin .rjk-brand b, .app.railmin .grp, .app.railmin .nv.on::after, .app.railmin .rjk-me .who, .app.railmin .rjk-me .out { display: none; }
  .app.railmin .nv .count { position: absolute; top: 2px; right: 6px; margin: 0; padding: 0 5px; font-size: 11px; line-height: 16px; }
  .app.railmin #railT { align-self: center; }
  .app.railmin .nav .gwrap { max-height: none; visibility: visible; }
  .app.railmin .nv { font-size: 0; justify-content: center; padding: 0; gap: 0; }
  .app.railmin .rjk-me { justify-content: center; padding: 12px 0 0; }
}
@media (max-width: 900px) {
  #hb { display: grid; }
  #railT { display: none; }
  #aifab { margin-left: auto; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: -290px; top: 0; bottom: 0; width: min(82vw, 280px); height: 100%; z-index: 120; transition: left .2s ease; }
  .side.open { left: 0; box-shadow: var(--shadow-pop); }
  #sbx { display: grid; }
  .nv.rjk-nav { height: 44px; }
  .grp.rjk-grpbtn { height: 44px; flex: none; }
  .rjk-me .who { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .topbar.rjk-top { padding: var(--space-2) var(--space-4) var(--space-3); gap: var(--space-2); }
  .topbar .seg { display: none; }
  .gswrap { order: 3; flex: 1 1 100%; max-width: none; }
  .topbar .spacer { display: none; }
  .content { padding: var(--space-4) var(--space-4) 96px; }
}

.aip { position: fixed; top: 0; right: -420px; width: 400px; max-width: 94vw; bottom: 0; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); z-index: 90; display: flex; flex-direction: column; transition: right .2s; }
.aip.open { right: 0; }
.aip:not(.open) { visibility: hidden; transition: right .2s, visibility 0s linear .2s; }
.aih { display: flex; align-items: center; gap: var(--space-2); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.aih b { font-size: 16px; line-height: 22px; font-weight: 600; }
.aih .mn { flex: 1; }
.aix { flex: none; }
.ait { flex: 1; overflow-y: auto; padding: var(--space-4); font-size: 14px; line-height: 20px; }
.aim { margin-bottom: var(--space-3); max-width: 92%; }
.aim.u { margin-left: auto; background: var(--cream-soft); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.aim.a { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); white-space: pre-wrap; }
.aisug { padding: 0 var(--space-4) var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.aisug span { display: inline-flex; align-items: center; min-height: 34px; font-size: 13px; font-weight: 600; background: var(--surface-sunk); border-radius: var(--radius-full); padding: 0 var(--space-3); cursor: pointer; }
.aisug span:hover { background: var(--line); }
.aiin { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--line); }
.aiin .rjk-input { flex: 1; min-width: 0; height: 44px; font-size: 15px; }

.toast { position: fixed; bottom: var(--space-6); right: var(--space-6); max-width: 400px; pointer-events: none; display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--navy); color: #fff; border-radius: var(--radius-lg); font-weight: 600; box-shadow: var(--shadow-pop); z-index: 10000; }
.toast.err { background: var(--danger); }

/* layers: sheets, drawers and dialogs share one level and the last one opened sits on top; confirms sit above everything that can open them */
.jbov, .modal-bg, .mwrap { z-index: 2000; }
#askBg { z-index: 9900; }

/* ============================================================ 6. Sign in ============================================================ */
#login { position: fixed; inset: 0; overflow-y: auto; z-index: 100; }
#login .signin-form { justify-content: flex-start; }
#login .lbox { margin: auto 0; max-width: 410px; width: 100%; display: flex; flex-direction: column; }
#login .lbox .rjk-eyebrow { color: var(--plumbing-ink); margin-bottom: 10px; }
#login .lbox h1, #login .lbox h2 { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.5px; margin: 0 0 10px; }
#login .lbox > p { font-size: 16px; line-height: 24px; color: var(--ink-muted); margin: 0 0 28px; }
#login .lbox > p.rjk-sm { font-size: 13px; line-height: 18px; margin: 16px 0 0; }
#login .rjk-field { margin-bottom: 20px; }
#login .rjk-field.last { margin-bottom: 24px; }
#login .pwrow { display: flex; justify-content: space-between; align-items: center; }
#login .alt { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ac-ink); cursor: pointer; }
#login .alt:hover { text-decoration: underline; }
.lerr { display: none; background: var(--plumbing-tint); color: var(--danger); font-size: 14px; line-height: 20px; font-weight: 500; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); }

/* ============================================================ 7. Shared components ============================================================ */

/* page header. The eyebrow is the menu group of the current screen, set on #main as --section by the menu code. */
.db-hd, div.ph, .ph2 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.db-hd .title, .ph h2, .ph .title { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
#main .db-hd .title::before, #main .ph h2::before { content: var(--section, none); display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.db-hd .wk, .ph .pm, .ph .meta { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.db-hd .wk.mono { font-family: inherit; }
/* actions that wrap under the title still sit on the right */
.db-hd > :last-child:not(:first-child) { margin-left: auto; }
.ph .meta b { color: var(--ink); }
.db-hd .btn, .ph .btn, .db-hd .btn.bsm, .ph .btn.bsm { height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }
.db-hd .inp, .db-hd select, .db-hd input:not([type=checkbox]):not([type=radio]) { height: 44px; }
.db-hd .btn.red, .db-hd .btn.bp { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.db-hd .btn.red:hover, .db-hd .btn.bp:hover { background: var(--gold); filter: brightness(.97); }
.db-hd .btn.red ~ .btn.red, .db-hd .btn.bp ~ .btn.bp, .db-hd .btn.red ~ .btn.bp, .db-hd .btn.bp ~ .btn.red { background: var(--navy); color: #fff; border-color: var(--navy); }

.secthd { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); }
.secthd .t { font-size: 16px; line-height: 22px; font-weight: 600; }
.secthd .rule { flex: 1; height: 1px; background: var(--line); }
.secthd .cnt { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.rjk-greet { position: relative; overflow: hidden; padding: 20px 216px 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.rjk-greet .rjk-panels { position: absolute; top: 0; right: 0; width: 180px; height: 100%; }
@media (max-width: 760px) { .rjk-greet { padding: var(--space-4) 88px var(--space-4) var(--space-4); } .rjk-greet .rjk-panels { width: 72px; } }

/* buttons */
.btn, .bsm { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-sunk); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.red, .btn.bp, .btn.grn { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.red:hover, .btn.bp:hover, .btn.grn:hover { background: var(--navy-800); }
.btn.bg2, .btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.bg2:hover, .btn.ghost:hover { background: var(--surface-sunk); }
.btn.bsm, .bsm, td .btn, .phd .btn, .hd .btn, .pgh .btn, .rtools .btn { height: 34px; padding: 0 12px; font-size: 14px; border-radius: var(--radius-sm); }
.edit { color: var(--ac-ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.edit:hover { text-decoration: underline; }
td .edit { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; margin: 2px 0 2px var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-sans); white-space: nowrap; }
td .edit:hover { background: var(--surface-sunk); text-decoration: none; }
td .edit.pri { background: var(--navy); border-color: var(--navy); color: #fff; }

/* cards */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-4); overflow-x: auto; overflow-y: hidden; }
.panel .panel { border: 0; box-shadow: none; border-radius: 0; margin-bottom: 0; }
.panel .hd, .phd { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 14px var(--space-4); border-bottom: 1px solid var(--line); }
.panel .hd h3, .phd h3 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.panel .hd .mn { margin-left: auto; font-size: 13px; }
.panel .hd .mn .edit { margin-left: var(--space-2); white-space: nowrap; }
.panel .hd > h3 + .mn { flex: 1 1 0; min-width: 120px; text-align: right; }
.hd:has(> .hm-see) { flex-wrap: nowrap; }
.hd:has(> .hm-see) h3 { min-width: 0; }
.hm-see { flex: none; margin-left: auto; }
.phd .mn { font-size: 13px; }
.phd h3 .mn { font-weight: 500; }
.cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); }
.nw { white-space: nowrap; }
.fgrid2 { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding: var(--space-3) var(--space-4); }
/* a field in a row names its size with --w or --f, so a phone can give it the whole row */
.fgrid2 > [style*="--w:"] { width: var(--w); }
.fgrid2 > [style*="--f:"] { flex: var(--f); }
.fgrid2:has(textarea) .btn { height: auto; min-height: 34px; align-self: stretch; }
.phd > .catbar { flex: 1 1 auto; padding: 0; border: 0; }
.phd .srch { flex: 0 1 240px; min-width: 120px; }
.pricefeed .row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.pricefeed .row:last-child { border-bottom: 0; }
.pf-id { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); flex: none; min-width: 86px; white-space: nowrap; }
.pf-n { font-weight: 600; flex: 1; }
.pf-v { font-size: 13px; color: var(--ink-muted); }
.pf-d { font-family: var(--font-mono); font-size: 13px; font-weight: 500; width: 70px; text-align: right; }

/* number tiles; a tile inside a card is a sunk area, not a card on a card */
.panel .kpi, .panel .hm-kpi, .panel .capcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: var(--space-2) 0; justify-content: space-between; }
.kv-none { font-size: 20px; line-height: 36px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); }
.kpis, .kpis4, .hm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.kpi, .hm-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hm-kpi { cursor: pointer; }
.kpi .lbl, .kpi .kl, .hm-kpi .kl, .jbkpi .kl, .mcard .kl { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.kpi .num, .kpi .kv, .hm-kpi .kv { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); text-align: left; }
.kpi .num, .kpi .kv, .hm-kpi .kv { overflow-wrap: anywhere; }
.kpi .kv.red, .hm-kpi .kv.red { color: var(--danger); }
.panel .kpi { min-width: 0; }
.kpi .kv small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.kpi .dl, .kpi .kd, .hm-kpi .kd { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.kpi .dl b { color: var(--success); font-weight: 600; }
.kpi .dl b.up { color: var(--danger); }
.kpi .dl b.due { color: var(--gold-ink); }

/* tabs */
/* the tab row scrolls rather than wrapping, so the gold underline always rests on the rule under the tabs */
.hm-tabs, .pe-tabs, .jtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.hm-tabs::-webkit-scrollbar, .pe-tabs::-webkit-scrollbar, .jtabs::-webkit-scrollbar { display: none; }

/* a tab row at the top of a card keeps the card's corners */
.panel > .pe-tabs:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hm-tabs > *, .pe-tabs > *, .jtabs > * { flex: 0 0 auto; }
.hm-tab, .pe-tab, .jtab { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; background: none; font: 600 15px var(--font-sans); color: var(--ink-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.hm-tab:hover, .pe-tab:hover, .jtab:hover { color: var(--ink); }
.hm-tab.on, .pe-tab.on, .jtab.on { color: var(--ink); border-bottom-color: var(--gold); }
.jtabs { gap: 0; }
.jtab { padding: 0 10px; font-size: 14px; }
.jtab .ct { background: var(--surface-sunk); color: var(--ink-muted); border-radius: var(--radius-full); padding: 0 7px; font-size: 12px; line-height: 20px; font-weight: 600; }
.jtab.on .ct { background: var(--gold); color: var(--navy); }
.jtab .ct:empty { display: none; }

/* pick-one filters */
.pillset { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-sunk); border-radius: var(--radius-md); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-3); border-radius: 8px; font: 600 14px var(--font-sans); color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.pill:hover { color: var(--ink); }
.pill.on, .pill.all { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

/* filter chips */
.chipset, .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.catbar { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.fchip, .cat { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-muted); font: 600 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.fchip:hover, .cat:hover { background: var(--surface-sunk); }
.fchip.all, .fchip.on, .cat.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.filtrow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.filtrow .fl, .rfbar .fl { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.pick { padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); margin-top: var(--space-1); cursor: pointer; font-weight: 600; background: var(--surface); }
.pick:hover { background: var(--surface-sunk); }
.pick.on { background: var(--cream-soft); border-color: var(--gold); }
.audopt { border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: 14px; flex: 1; min-width: 150px; }
.audopt.on { border-color: var(--gold); background: var(--cream-soft); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
th { text-align: left; background: var(--surface-sunk); color: var(--ink); font-weight: 600; font-size: 13px; line-height: 18px; padding: 10px 14px; white-space: nowrap; }
td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
td:last-child { white-space: nowrap; }
tr:hover td { background: var(--canvas); }
/* the first and last columns line up with the card's own 16px edge */
.panel th:first-child, .panel td:first-child, .jb-card th:first-child, .jb-card td:first-child { padding-left: var(--space-4); }
.panel th:last-child, .panel td:last-child, .jb-card th:last-child, .jb-card td:last-child { padding-right: var(--space-4); }
.panel table th { cursor: pointer; user-select: none; }
.panel table th[data-d]::after { content: ' \25BE'; font-size: 10px; color: var(--ink-muted); }
.panel table th[data-d='a']::after { content: ' \25B4'; }
.amt, td.num, th.num, .num, td.mono, .num3 { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.amt, td.num, th.num, .num, .num3 { text-align: right; white-space: nowrap; }
th.num, th.num3 { font-family: var(--font-sans); font-weight: 600; }
/* a plain count in a number column is words, not money or a code */
td.num3.cnt, td.num.cnt, td.amt.cnt { font-family: var(--font-sans); font-size: 14px; }
/* the second figure in a money cell, "$4,220.00 / $5,200.00": muted, still mono, still on one line */
.amt-sub { color: var(--ink-muted); }
/* a run of short facts split by middle dots. A dot sits in the gap, so a wrapped line never starts or ends on one */
.dots { display: flex; flex-wrap: wrap; column-gap: 15px; overflow: hidden; }
.dots > span { position: relative; min-width: 0; }
.dots > span::before { content: '\00B7'; position: absolute; left: -10px; }
td.mono, td .mono { white-space: nowrap; }
.mn.mono, .mono .mn { font-family: var(--font-sans); }
.rtbl { border-collapse: collapse; }
.rtbl thead th { white-space: normal; vertical-align: bottom; }
.rtbl th, .rtbl td { padding-left: var(--space-3); padding-right: var(--space-3); }
.rtbl td.num3 { white-space: nowrap; }
.rtbl td:not(.num3), .rpt-t td:not(.num3) { min-width: 110px; }
.rpt-t td:first-child { min-width: 160px; }
/* cost tables: the lot name reads on one line beside its money columns */
.cost-t th, .cost-t td { padding-left: var(--space-2); padding-right: var(--space-2); }
.cost-t td:first-child { min-width: 160px; }
/* the three trade tables on Inspection types share their columns */
.it-t { table-layout: fixed; }
.it-t th:nth-child(1) { width: 56px; }
.it-t th:nth-child(2) { width: 26%; }
.it-t th:nth-child(4) { width: 72px; }
.it-t th:nth-child(5) { width: 180px; }
/* the report catalog's CSV has nothing to export until a report is open */
#rptBackBtn[style*="none"] + .btn { display: none; }

.act-t th, .act-t td { white-space: nowrap; width: 1%; }
.act-t th:nth-child(2), .act-t td:nth-child(2) { white-space: normal; width: auto; }
.act-t td:nth-child(2) { min-width: 240px; }
.ivlow td { background: var(--plumbing-tint); }
/* money and codes never break in the middle */
.amt, td.num, td.num3, td.mono, .pr, .qa { overflow-wrap: normal; word-break: normal; }
/* a hovered last row must not paint over its card's rounded corners */
.rjk-card > .rjk-tablebox:last-child, .rjk-card > table:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }

/* tags: one shape, set by state and never by color alone */
.tag, .st, .ppill, .req, .spec, .gate, .flagn, .hm-pill, .tk2-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 600 12px/1 var(--font-sans); white-space: nowrap; vertical-align: middle; background: var(--surface-sunk); color: var(--ink-muted); }
.tag.tg, .st.sign, .pp-act, .gate, .f0, .tk2-chip.pr { background: var(--success-tint); color: var(--success); }
.tag.ty, .st.rev, .f2, .opt .std.custom, .tk2-chip.rtp { background: var(--cream-soft); color: var(--gold-ink); }
.tag.tr2, .tag.tr, .st.late, .pp-not, .req { background: var(--plumbing-tint); color: var(--danger); }
.tag.tb, .st.sent, .pp-app, .tk2-chip.ip { background: var(--surface-sunk); color: var(--ink); }
.tag.tn, .st.draft, .st.wait, .st.off, .pp-fin { background: var(--surface-sunk); color: var(--ink-muted); }
.st.bypass { background: var(--cream-soft); color: var(--gold-ink); }

.gates { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.gates .gl { margin: 0 var(--space-1) 0 0; }
.flagn { margin-left: auto; }

.trade { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 600 12px/1 var(--font-sans); white-space: nowrap; background: var(--surface-sunk); color: var(--ink-muted); }
.trade i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--ink-muted); }
.t-p { background: var(--plumbing-tint); color: var(--plumbing-ink); } .t-p i { background: var(--plumbing); }
.t-h { background: var(--ac-tint); color: var(--ac-ink); } .t-h i { background: var(--ac); }
.t-e { background: var(--electrical-tint); color: var(--electrical-ink); } .t-e i { background: var(--electrical); }
.badge.late { background: var(--plumbing-tint); color: var(--danger); }
.btn.bigact { height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }
@media (min-width: 761px) { #vpVQ { height: 34px; font-size: 14px; border-radius: var(--radius-sm); } }
.badge { margin-left: auto; background: var(--gold); color: var(--navy); font: 600 12px var(--font-sans); padding: 2px 7px; border-radius: var(--radius-full); }

/* forms */
.inp { height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 15px var(--font-sans); max-width: 100%; }
.inp::placeholder, .srch::placeholder, .rjk-search input::placeholder { color: var(--ink-subtle); }
input.inp { text-overflow: ellipsis; }
.st-form .inp, .st-qrow .inp { width: 100%; }
.tbdup { display: contents; }
@media (min-width: 901px) { .tbdup { display: none; } }
.lbl { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-1); }
textarea.inp { height: auto; padding: var(--space-2) var(--space-3); line-height: 22px; }
input[type=checkbox].inp, input[type=radio].inp { height: auto; width: auto; }
td .inp, .phd .inp, .hd .inp, .pgh .inp, .rfbar .inp, .catbar .inp, .fgrid2 .inp, .rtools .inp, .jbhd .inp, .ap-doc .inp, .pl-extra .inp, .bl-find .inp { height: 34px; padding: 0 var(--space-2); font-size: 14px; border-radius: var(--radius-sm); }
td textarea.inp { height: auto; padding: var(--space-1) var(--space-2); }
/* an editing cell is as wide as what is in it, so a stored value is never cut; the table scrolls inside its card when it needs to */
td input.inp:not([type=checkbox]):not([type=radio]):not([type=date]), td select.inp, .pe-g td select { field-sizing: content; }
td select.inp, .pe-g td select { min-width: max-content; }
/* fields alone in a cell share the column's width, so the right edges line up row by row */
td > input.inp:only-child:not([type=checkbox]):not([type=radio]):not([type=date]):not([style^="width"]):not([style*=";width"]) { width: 100%; }
td > select.inp:only-child:not([style^="width"]):not([style*=";width"]) { width: 100%; }
/* the option list: a name reads in full; a long description ends in dots and shows whole on hover and under Edit */
.lt-opts td:nth-child(2) input { field-sizing: content; min-width: 100%; }
.lt-opts td:nth-child(3) input { text-overflow: ellipsis; }
/* an empty text box in a cell stays a box you can read and click */
td input.inp:is([value=""], :not([value])):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=number]):not([style*="width"]) { min-width: 120px; }
.st-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.st-stack > .panel { margin-bottom: 0; }
/* a fixed width: opening More wraps its actions inside the column and never pushes them past the card */
td.usr-acts { white-space: normal; width: 300px; min-width: 300px; }
.usr-more { display: inline-block; vertical-align: top; }
.usr-more[open] { display: block; }
.usr-more summary { list-style: none; }
.usr-more summary::-webkit-details-marker { display: none; }
.usr-moreb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding-top: var(--space-1); }
.usr-moreb .mn { padding: 0 var(--space-2); }
.srch { margin-left: auto; height: 44px; width: 240px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 15px var(--font-sans); }
.phd .srch, .hd .srch { height: 34px; font-size: 14px; border-radius: var(--radius-sm); }
.qin { width: 72px; height: 34px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font: 500 13px var(--font-mono); text-align: right; color: var(--ink); }
.pn .pn-sec { padding: var(--space-4); border-top: 1px solid var(--line); }
.pn .pn-sec h4 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.pn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3) var(--space-4); align-items: start; }
.pn-grid label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 600; }
.pn-grid .inp { width: 100%; margin: 0; }
.pn-h { font-size: 13px; color: var(--ink-muted); line-height: 18px; font-weight: 400; }
.pn-chk { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; font-weight: 600; }
.pn-chk input { margin-top: 3px; }
.pn-chk .pn-h { display: block; }
.pn-foot { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--canvas); }
.itemres { border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: var(--space-2); max-height: 320px; overflow-y: auto; background: var(--surface); }
div.ires { padding: var(--space-3); border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
div.ires:hover { background: var(--canvas); }
#vpVL .ires { padding-left: var(--space-4); padding-right: var(--space-4); }
.ires.ta-open { background: var(--canvas); font-weight: 600; }
.vopt { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8); border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; background: var(--canvas); }
.vopt:hover { background: var(--surface-sunk); }
.ta-on.ta-on { background: var(--cream-soft); box-shadow: inset 3px 0 0 var(--gold); }
.itemres .ires, .itemres .vopt, [data-ta-box] [onclick] { touch-action: manipulation; }
@media (pointer: coarse) { .itemres .ires { padding: var(--space-3); } .itemres .vopt { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8); } }

/* dialogs and drawers */
.modal-bg { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 720px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow-pop); }
.modal .mh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.modal .mh h3 { font-size: 18px; line-height: 24px; font-weight: 700; }
/* every close control is one thing: the brand's line X, 20px, in a 44px target. The markup may hold a glyph or an icon; the rule draws the same mark for all of them */
.modal .mh .x, .rs-hd .x, .mx, .jbx, .takex, .bd-x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; cursor: pointer; font-size: 0; color: var(--ink-muted); }
.modal .mh .x > svg, .rs-hd .x > svg, .mx > svg, .jbx > svg, .takex > svg, .bd-x > svg { display: none; }
.modal .mh .x::before, .rs-hd .x::before, .mx::before, .jbx::before, .takex::before, .bd-x::before { content: ''; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.modal .mh .x:hover, .rs-hd .x:hover, .mx:hover, .jbx:hover, .takex:hover, .bd-x:hover { background: var(--surface-sunk); color: var(--ink); }
.modal .mh .x, .rs-hd .x { margin: -8px -12px -8px 0; }
.modal .mb { padding: var(--space-4) var(--space-6); overflow-y: auto; max-height: var(--mb-h, none); }
.modal .mf { padding: var(--space-3) var(--space-6); border-top: 1px solid var(--line); display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }
/* a field directly in a dialog's body fills the dialog */
.modal .mb > .inp:not([type=checkbox]):not([type=radio]) { width: 100%; }
.modal label { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-1); }
.modal label.btn { display: inline-flex; margin: 0; font-size: 15px; line-height: 20px; }
.modal-bg.drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.modal-bg.drawer .modal { max-width: 620px; width: min(620px, 100%); max-height: none; height: 100%; border-radius: 0; }
.modal-bg.drawer .modal .mf { margin-top: auto; }
.modal-bg.drawer.wide .modal { max-width: 980px; width: min(980px, 100%); }
.mwrap { position: fixed; inset: 0; background: var(--scrim); display: none; align-items: flex-start; justify-content: center; padding: 9vh var(--space-4); }
.mwrap.on { display: flex; }
.mwrap > .mcard { background: var(--surface); border: 0; border-radius: var(--radius-lg); padding: 0; max-width: 660px; width: 100%; box-shadow: var(--shadow-pop); max-height: 82vh; overflow-y: auto; }
.mwrap .mhd { display: flex; align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 18px; line-height: 24px; }
/* a dialog's button row: edge to edge under a hairline, right-aligned. modal() bodies use .m-foot as their last child */
.m-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin: var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--line); }
.mbd .inp:not([type=checkbox]):not([type=radio]), .mbd .fgrid2 .inp:not([type=checkbox]):not([type=radio]) { height: 44px; padding: 0 var(--space-3); font-size: 15px; border-radius: var(--radius-md); }
.mbd textarea.inp { height: auto; padding: var(--space-2) var(--space-3); }
/* every field in a dialog is one height */
.modal .mb .fgrid2 .inp:not([type=checkbox]):not([type=radio]):not(textarea) { height: 44px; padding: 0 var(--space-3); font-size: 15px; border-radius: var(--radius-md); }
.mbd .fgrid2 { gap: var(--space-3); }
.mbd .fgrid2 .inp:not([type=checkbox]):not([type=radio]) { flex: var(--f, 1 1 200px); }
.mbd .fgrid2 > div { flex: 1 1 200px; min-width: 0; }
.mbd .fgrid2 > div > .inp { width: 100%; }
.mbd .fgrid2 > .lbl { flex: 1 1 100%; margin: 0; }
.mx { margin-left: auto; margin-right: -12px; margin-top: -8px; margin-bottom: -8px; }
.mbd { padding: var(--space-4) var(--space-6); }
.mbd .fgrid2 { padding: 0; }
@media (max-width: 760px) { .mform .fgrid2 .inp:not([type=checkbox]):not([type=radio]) { width: 100%; } }
.takex { position: absolute; top: var(--space-2); right: var(--space-3); z-index: 9; }

/* the big record sheets */
.jbov { position: fixed; inset: 0; background: var(--scrim); overflow-y: auto; padding: var(--space-6) var(--space-4); }
/* the sheet is canvas, as on the PO sheet, so the white cards on it are cards and not cards inside a card */
.jbsheet { max-width: 1120px; margin: 0 auto; background: var(--canvas); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
/* the builder and item sheets hold no cards of their own, so the sheet itself is the white card */
#bldOv .jbsheet, #itemOv .jbsheet { background: var(--surface); }
.jbhd { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); }
.jbtabs { background: var(--surface); }
.jbcode { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.jbcode.code { font: 500 24px/32px var(--font-mono); letter-spacing: 0; }
.jbdup { margin-left: auto; flex: none; align-self: flex-start; }
.jbdup + .jbx { margin-left: 0; }
.jbsub { color: var(--ink-muted); font-size: 15px; margin-top: 2px; }
.jbhd .mn { color: var(--ink-muted); }
.jbx { margin-left: auto; }
.jbkpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.jbkpi .k { background: var(--surface); padding: var(--space-3) var(--space-4); }
.jbkpi .kv { font-size: 20px; line-height: 26px; font-weight: 700; margin-top: 2px; }
.jbmoney { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-6) 0; }
.mcard { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--surface); }
.mcard .kl { margin-bottom: var(--space-2); }
.mrow { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-top: 1px solid var(--line); font-size: 14px; }
.mrow > span { min-width: 0; }
.mrow > b { flex: none; white-space: nowrap; }
.mrow-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin-top: 2px; }
.mrow:has(.mrow-acts) { align-items: flex-start; }
.mrow:has(> .rjk-nowrap .edit) { align-items: center; }
.mrow > .rjk-nowrap:has(.edit) { display: inline-flex; align-items: center; gap: var(--space-2); }
.jbmsg { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-4); align-items: start; }
.jbtrades { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-6); }
.trcard { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--surface); }
.trhd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: 14px; }
.bar { height: 6px; background: var(--surface-sunk); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-3); }
.bar span { display: block; height: 100%; }
.phtile { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface); }
.jbtabs { padding: var(--space-2) var(--space-6) 0; }
.jbtabs .jtabs { margin-bottom: 0; }
.jbbody { padding: var(--space-4) var(--space-6) var(--space-6); }
.jbbody table { width: 100%; }
/* a detail table straight in a card runs flush with it; it is not a second box */
.panel > .tblx.jb-card, .mcard > .tblx.jb-card { background-color: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
/* a running list on the sheet's canvas is one white card */
.jbbody > .feed, .jbbody > div > .feed { padding: 0 var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.feed .fitem:last-child { border-bottom: 0; }
/* a table on the sheet's canvas is a white card of its own */
.tblx.jb-card { background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-3); }
.mcard .kl .mn { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.jbbody > table, .jbbody div > table { display: block; overflow-x: auto; white-space: nowrap; }
.feed { display: flex; flex-direction: column; gap: 2px; }
.fitem { display: flex; gap: var(--space-3); padding: var(--space-3) 2px; border-bottom: 1px solid var(--line); }
.fic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--radius-sm); background: var(--surface-sunk); display: grid; place-items: center; font-size: 13px; }
.fbody { flex: 1; min-width: 0; }
.fline { font-size: 14px; }
.fdet { font-size: 13px; color: var(--ink-muted); word-break: break-word; white-space: normal; margin-top: 2px; }
.fmeta { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

/* messages */
.note { background: var(--cream-soft); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 20px; margin-bottom: var(--space-4); }
.note2 { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }
.empty { padding: var(--space-8); text-align: center; color: var(--ink-muted); font-size: 15px; }
.failnote { margin: 0 var(--space-4) var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--plumbing-tint); font-size: 14px; line-height: 20px; }
.failnote b { color: var(--danger); }
.insight { margin: var(--space-3) var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.ins-bad { background: var(--plumbing-tint); }
.ins-bad b { color: var(--danger); }
.ins-good { background: var(--success-tint); }
.ins-good b { color: var(--success); }
.autoflow { display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-4) var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunk); font-size: 14px; line-height: 20px; }
.phnote { font-size: 13px; color: var(--gold-ink); background: var(--cream-soft); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.sx-next { margin: 0 0 var(--space-4); }
.iv-ban { padding: var(--space-3) var(--space-6); font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--line); }
.iv-ban.bad { background: var(--plumbing-tint); color: var(--danger); }
.iv-ban.ok { background: var(--success-tint); color: var(--success); }

/* ============================================================ 8. Office screens ============================================================ */

/* My Day */

.hm-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.hm-cols > div > :last-child > .panel:last-child, .hm-cols > div > .panel:last-child { margin-bottom: 0; }
.hm-more { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hm-morehd:has(+ .hm-more:empty) { display: none; }
/* two page headers must not stack: inside a My Day tab the tab's own heading is a section title, the greeting is the page header */
#main #hmBody .db-hd .title::before { content: none; }
#main #hmBody .db-hd .title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
#hmBody .failnote, #main > .failnote { margin: 0 0 var(--space-4); }
.hm-cols > * { min-width: 0; }
.hm-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.hm-row:last-child { border-bottom: 0; }
.hm-row .t { flex: 1 1 200px; min-width: 0; }
.hm-row .t b { display: block; font-weight: 600; }
.hm-row .t .mn { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
#hmMfa .hm-row .t .mn { display: block; overflow: visible; }
.hm-row .btns { display: flex; gap: var(--space-1); white-space: nowrap; }
.hm-row .due { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink-muted); font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.hm-row .due:empty { display: none; }
.hm-row .due.over { background: var(--plumbing-tint); color: var(--danger); }
.hm-now .hm-nr { flex-wrap: wrap; }

.hm-cta { flex: none; }
.hm-sec { margin: var(--space-6) 0 var(--space-3); font-size: 16px; line-height: 22px; font-weight: 600; }
.hm-pill.q { background: var(--surface-sunk); color: var(--ink); }
.hm-since { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hm-since span { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: 13px; }
.hm-since b { color: var(--ink); }
.hm-empty { padding: var(--space-4); color: var(--ink-muted); font-size: 14px; }
.hm-briefb { padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 20px; }
.hm-briefb h2 { margin: var(--space-3) 0 var(--space-2); font-size: 16px; line-height: 22px; font-weight: 600; }
.hm-briefb h2:first-child { margin-top: 0; }
.hm-briefb td, .hm-briefb th { padding: var(--space-1) var(--space-3) var(--space-1) 0; border: 0; background: transparent; white-space: normal; font-weight: 600; }
.hm-briefb td:first-child { color: var(--ink-muted); font-weight: 400; }
.hm-briefb a { color: var(--ac-ink); font-weight: 600; }
.hm-briefb pre { margin: var(--space-1) 0 var(--space-3); font: inherit; white-space: pre-wrap; }
.panel .hm-briefb td:first-child, .panel .hm-briefb th:first-child { padding-left: 0; }
/* on a phone the brief stays a two-column table that wraps inside the card: no sideways scroll, no cut labels, no held first column */
@media (max-width: 760px) {
  .panel .hm-briefb table { display: table; width: 100%; white-space: normal; -webkit-mask-image: none; mask-image: none; animation: none; }
  .panel .hm-briefb table td, .panel .hm-briefb table th, .panel .hm-briefb table td:first-child, .panel .hm-briefb table th:first-child { position: static; max-width: none; overflow: visible; box-shadow: none; background: transparent; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
  .panel .hm-briefb table td:first-child { width: 48%; }
  .hm-briefb a { display: inline-flex; align-items: center; min-height: 44px; }
}
.kpi.sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--cream-soft); }
.dig-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols > .panel, .cols > div > .panel:last-child { margin-bottom: 0; }
.cols { margin-bottom: var(--space-4); }
.dig-tag { margin-left: auto; flex: none; }
@media (max-width: 900px) { .hm-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hm-row { flex-wrap: wrap; } .hm-row .hm-cta { margin-left: auto; } }

/* Builder CRM kanban */
.kb { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.kcol { flex: 0 0 236px; min-width: 236px; background: var(--surface-sunk); border-radius: var(--radius-lg); padding: var(--space-3); }
.kcol.kdrop { background: var(--cream-soft); }
.kgl { height: 16px; margin-bottom: var(--space-2); white-space: nowrap; font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.kh { display: flex; justify-content: space-between; padding: 0 2px var(--space-3); font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.kh span:last-child { font-family: var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.kcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); cursor: grab; font-size: 14px; }
.kcard:active { cursor: grabbing; }
.kcard.due { box-shadow: inset 3px 0 0 var(--danger); }
.kcard .kn { font-weight: 600; font-size: 15px; }
.kcard .km { font-size: 13px; color: var(--ink-muted); }
.kcard .kd { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.kcard .kd.od { color: var(--danger); }
.ktr { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Dispatch board */
.dmapwrap { isolation: isolate; margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.dmap { height: 360px; width: 100%; }
.dmap.leaflet-container, .dmap .leaflet-control-zoom-in, .dmap .leaflet-control-zoom-out { font-family: var(--font-sans); }
.dmapLg { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; padding: var(--space-2) var(--space-3); font-size: 13px; color: var(--ink-muted); border-top: 1px solid var(--line); }
.dmapLg span i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.leaflet-popup-content { font: 13px var(--font-sans); line-height: 18px; }
.db { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.backlog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.bl-hd { display: flex; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-weight: 600; }
.bl-hd .badge { margin-left: auto; }
.bl-card { margin: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); cursor: grab; font-size: 13px; }
.bl-card:active { cursor: grabbing; }
.bl-card .bn { font-weight: 600; font-size: 14px; }
.bl-card .bm { color: var(--ink-muted); margin-top: 2px; }
.bl-card .bh { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

.bl-note { padding: var(--space-2) var(--space-3) var(--space-3); font-size: 13px; color: var(--ink-muted); line-height: 18px; border-top: 1px solid var(--line); }
.bl-find { padding: var(--space-2); border-bottom: 1px solid var(--line); }
.bl-find .inp { width: 100%; }
.bl-more { padding: var(--space-3); text-align: center; font-size: 14px; font-weight: 600; color: var(--ac-ink); cursor: pointer; }
.dtools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.db-hd > .dtools .srch { margin-left: 0; }
@media (min-width: 761px) { .db-hd > .dtools:has(> .srch) { flex-wrap: nowrap; } }
.dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.dmeta label { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; cursor: pointer; }
.dmeta-lg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.dmeta-lg span { display: inline-flex; align-items: center; gap: var(--space-1); }
.dmeta-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dstops { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.dstop { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.dstop-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dstop-l { margin: var(--space-2) 0 0; padding-left: var(--space-6); font-size: 13px; line-height: 18px; }
.dstop-l li { margin: var(--space-1) 0; }
.dstop-l .edit { white-space: nowrap; margin-left: var(--space-1); }
.dboard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.dgrid { display: grid; grid-template-columns: 128px repeat(5, minmax(128px, 1fr)); min-width: 760px; }
.dg-day { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); text-align: center; padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--line); }
.dg-corner { border-bottom: 1px solid var(--line); }
.sect { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 14px; font-weight: 600; font-size: 14px; background: var(--surface-sunk); }
.sect i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-muted); }
.s-p { background: var(--plumbing-tint); color: var(--plumbing-ink); } .s-p i { background: var(--plumbing); }
.s-h { background: var(--ac-tint); color: var(--ac-ink); } .s-h i { background: var(--ac); }
.s-e { background: var(--electrical-tint); color: var(--electrical-ink); } .s-e i { background: var(--electrical); }
.sect .cap { margin-left: auto; font: 500 13px var(--font-sans); }
.dcrew { padding: var(--space-2) var(--space-3); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.dcrew small { color: var(--ink-muted); font-weight: 500; font-size: 13px; }
.dcell { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: var(--space-1); min-height: 52px; }
.dtgt { transition: background .12s; }
.dchip { position: relative; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ink); background: var(--surface-sunk); cursor: grab; }
.dchip small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-muted); }
/* names keep every letter they fit, and cut with an ellipsis, never mid-word */
.dc-n { display: inline-block; max-width: calc(100% - 36px); vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dchip small b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dchip small b.daytag { display: inline; }
.dc-p { background: var(--plumbing-tint); box-shadow: inset 3px 0 0 var(--plumbing); }
.dc-h { background: var(--ac-tint); box-shadow: inset 3px 0 0 var(--ac); }
.dc-e { background: var(--electrical-tint); box-shadow: inset 3px 0 0 var(--electrical); }
.dchip.warn { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
.dchip.warn::after { content: 'Dependency'; position: absolute; top: -9px; right: -4px; background: var(--cream-soft); color: var(--gold-ink); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-full); }
.dchip.qc::before { content: 'QC pending'; display: block; font-size: 11px; font-weight: 600; color: var(--gold-ink); margin-bottom: 1px; }
.dchip.bs-complete { opacity: .75; }
.dchip.bs-ready { outline: 2px solid var(--success); outline-offset: -2px; }
.dchip.bs-partial_ready { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
.dchip.bs-onsite, .dchip.bs-working { outline: 2px solid var(--navy); outline-offset: -2px; }
.dchip.bs-failed { outline: 2px solid var(--danger); outline-offset: -2px; }
/* the state in words, not only in the outline color */
.dchip.bs-ready:not(.qc)::before, .dchip.bs-partial_ready:not(.qc)::before, .dchip.bs-onsite:not(.qc)::before, .dchip.bs-working:not(.qc)::before, .dchip.bs-failed:not(.qc)::before { display: block; font-size: 11px; line-height: 16px; font-weight: 600; }
.dchip.bs-ready:not(.qc)::before { content: 'Ready'; color: var(--success); }
.dchip.bs-partial_ready:not(.qc)::before { content: 'Partly ready'; color: var(--gold-ink); }
.dchip.bs-onsite:not(.qc)::before, .dchip.bs-working:not(.qc)::before { content: 'On site today'; color: var(--navy); }
.dchip.bs-failed:not(.qc)::before { content: 'Failed'; color: var(--danger); }
.chipacts { position: absolute; top: 2px; right: 2px; display: none; gap: 2px; padding: 2px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); z-index: 1; }
.dchip:hover .chipacts, .dchip:focus-within .chipacts { display: inline-flex; }
.chipact { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
.chipact:hover { background: var(--surface-sunk); }
.chipact b { font-size: 12px; font-weight: 600; }
@media (pointer: coarse) { .chipacts { position: static; display: flex; margin-top: var(--space-1); box-shadow: none; background: transparent; padding: 0; } .chipact { min-width: 44px; height: 44px; } }
.daytag { background: var(--surface); border-radius: var(--radius-sm); padding: 0 var(--space-1); font-size: 11px; }
.db-legend { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-4); font-size: 13px; color: var(--ink-muted); border-top: 1px solid var(--line); flex-wrap: wrap; }
.db-legend b { color: var(--ink); }
.spec { display: inline-flex; height: 20px; margin-top: 3px; }
.mat { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.m-no { background: transparent; border: 1.5px solid var(--gold-ink); }
.m-part { background: linear-gradient(90deg, var(--success) 50%, transparent 50%); border: 1.5px solid var(--success); }
.rdot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 1; font-weight: 700; background: var(--surface); color: var(--ink-muted); margin-right: 3px; border: 1px solid var(--line-strong); }
.rdot.on { background: var(--success); color: #fff; border-color: var(--success); }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); overflow: hidden; }
.mgrid .mhd { background: var(--surface); padding: var(--space-3) var(--space-2); font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
.mcell { background: var(--surface); min-height: 112px; padding: var(--space-1); display: flex; flex-direction: column; gap: 3px; }
.mcell.out { background: var(--canvas); opacity: .6; }
.mcell.today { box-shadow: inset 0 0 0 2px var(--gold); }
.mdate { font-size: 13px; font-weight: 600; color: var(--ink-muted); display: flex; align-items: center; gap: 5px; }
.mcnt { background: var(--navy); color: #fff; border-radius: var(--radius-full); padding: 0 6px; font-size: 12px; }
.mchip { font-size: 12px; line-height: 16px; padding: 3px 5px; border-radius: var(--radius-sm); background: var(--surface-sunk); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 3px 0 0 var(--line-strong); }
/* seven days do not fit a phone: the month scrolls sideways and its chips keep their words whole */
@media (max-width: 760px) { .mgrid { grid-template-columns: repeat(7, minmax(112px, 1fr)); overflow-x: auto; } .mcell.today { scroll-margin-left: var(--space-2); } }
.mchip.bs-ready { background: var(--success-tint); box-shadow: inset 3px 0 0 var(--success); }
.mchip.bs-partial_ready { background: var(--cream-soft); box-shadow: inset 3px 0 0 var(--gold-ink); }
.mchip.bs-onsite, .mchip.bs-working { box-shadow: inset 3px 0 0 var(--navy); }
.mchip.bs-complete { background: var(--success-tint); box-shadow: inset 3px 0 0 var(--success); opacity: .7; }
.mchip.bs-failed { background: var(--plumbing-tint); box-shadow: inset 3px 0 0 var(--danger); }
.mmore { font-size: 12px; color: var(--ac-ink); font-weight: 600; cursor: pointer; }
.mbar { display: flex; gap: 1px; height: 4px; margin-top: auto; border-radius: 3px; overflow: hidden; }
.mbar i { display: block; background: var(--line-strong); }
.mbar i.bs-ready, .mbar i.bs-complete { background: var(--success); }
.mbar i.bs-partial_ready { background: var(--gold-ink); }
.mbar i.bs-onsite, .mbar i.bs-working { background: var(--navy); }
.mbar i.bs-failed { background: var(--danger); }
.capstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.capcard { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--surface); }
.capttl { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: var(--space-2); }
.capbar { height: 6px; background: var(--surface-sunk); border-radius: var(--radius-full); overflow: hidden; }
.capbar i { display: block; height: 100%; }
.capmeta { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-2); line-height: 18px; }

/* Permits and inspections */
.clockcell { min-width: 130px; }
.cbar { height: 10px; border-radius: var(--radius-full); background: var(--surface-sunk); overflow: hidden; margin-top: 5px; }
.cbar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--success); }
.cbar.c-warn i { background: var(--gold); }
.cbar.c-crit i { background: var(--danger); }
.cdays { font: 600 13px var(--font-sans); }
.cd-ok { color: var(--success); } .cd-warn { color: var(--gold-ink); } .cd-crit { color: var(--danger); }
.irow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; }
.irow:last-child { border-bottom: 0; }
.irow .in3 { font-weight: 600; font-size: 14px; }
.irow .im3 { font-size: 13px; color: var(--ink-muted); }
span.ires { margin-left: auto; font: 600 13px var(--font-sans); white-space: nowrap; }

.iq-t td { vertical-align: top; }
.iq-t th, .iq-t td { padding-left: var(--space-2); padding-right: var(--space-2); }
.iq-t .iq-lot, .iq-t td:nth-child(3) b, .iq-t td:nth-child(4) { white-space: nowrap; }
.iq-t td.iq-acts { white-space: normal; text-align: right; min-width: 172px; }
.iq-lot { cursor: pointer; }
.iq-lot:hover { text-decoration: underline; }
.jph { padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.jph-h { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.jph-h b { font-size: 14px; }
.jph-h .st { margin-left: auto; }
.dstop-h { flex-wrap: wrap; }
.dstop-l .edit { display: inline-flex; }
.dic b { white-space: nowrap; }
.jph.done .jph-h b { color: var(--ink-muted); }
.jph.fix { margin-left: var(--space-3); padding-left: var(--space-3); border-top: 0; border-left: 2px solid var(--plumbing-tint); }
.jph-sw { font-style: italic; }
.jph-i { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.jph-ic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jph-a { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.jph-ic .edit, .jph-a .edit { font-size: 13px; }
.dinsp { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.dinsp .dl0 { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-right: var(--space-1); }
.dinsp .dic { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--canvas); cursor: pointer; }
.iq-help { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.iq-tagpick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-top: var(--space-1); }
.modal .iq-tagpick label { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 400; font-size: 14px; cursor: pointer; }

/* Jobs and the job sheet; modal forms shared by these screens */
td.mono .mn, td.amt .mn, td.num .mn { font-family: var(--font-sans); white-space: normal; }
.jbbody table.jbt { display: table; white-space: normal; }
.jbt th { white-space: normal; vertical-align: bottom; }
.jbt th, .jbt td { padding-left: var(--space-2); padding-right: var(--space-2); }
.jbt td.amt .mn { display: block; white-space: nowrap; }
.modal .rjk-field label { margin: 0; }
.modal .mf .btn { height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }
.mform .inp:not([type=checkbox]):not([type=radio]) { width: 100%; }
.mform .fgrid2 { padding: 0; }
.mform .fgrid2 .inp:not([type=checkbox]):not([type=radio]) { width: auto; }
.modal .audopt { display: flex; margin: 0; font-weight: 400; }
.mform select[multiple].inp { height: auto; padding: var(--space-2); }
.jbhd .inp { width: auto; }
.jbbody .fgrid2 { padding: 0; margin: 0 0 var(--space-3); }
.mcard .fgrid2 { padding: 0; margin: var(--space-2) 0 0; }
.jbnote { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--canvas); border-radius: var(--radius-md); font-size: 14px; }
.phnote.jph-bad { color: var(--danger); background: var(--plumbing-tint); }

/* Job costing */
.vbar { display: flex; align-items: center; gap: var(--space-2); }
.vtrack { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-sunk); position: relative; overflow: hidden; min-width: 90px; }
.vtrack i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full); }
.v-good i { background: var(--success); } .v-warn i { background: var(--gold); } .v-bad i { background: var(--danger); }
.vpct { font: 600 13px var(--font-sans); width: 56px; text-align: right; }
.vp-g { color: var(--success); } .vp-w { color: var(--gold-ink); } .vp-b { color: var(--danger); }
.jc-row { cursor: pointer; }
.jc-row.sel td { background: var(--cream-soft); }
.kpi .num.rjk-numsm { font-size: 20px; line-height: 26px; letter-spacing: 0; }

/* Billing review */
.bq { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-4); }
.bq > .panel { margin-bottom: 0; }
.qitem { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n a" "m a"; gap: 2px var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); cursor: pointer; }
.qitem:hover { background: var(--canvas); }
.qitem.sel { background: var(--cream-soft); box-shadow: inset 3px 0 0 var(--gold); }
.qitem .qn { grid-area: n; font-weight: 600; font-size: 14px; line-height: 20px; hyphens: none; word-break: keep-all; }
.qitem .qm { grid-area: m; font-size: 13px; color: var(--ink-muted); }
.qitem .qa { grid-area: a; font: 500 14px var(--font-mono); white-space: nowrap; }
.pkg-sec { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.pkg-sec .st2 { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
.pline { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); font-size: 14px; padding: var(--space-1) 0; border-bottom: 1px solid var(--line); }
.pline > span:last-child { font: 500 13px var(--font-mono); text-align: right; }
.pline.flagged { background: var(--cream-soft); margin: 0 calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.pline.flagged .fx { font-size: 13px; font-weight: 600; color: var(--gold-ink); margin-left: var(--space-2); }
.actions { display: flex; gap: var(--space-3); padding: var(--space-4); align-items: center; flex-wrap: wrap; }
.pk-tot { margin-left: var(--space-3); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pk-tot span { font-size: 13px; color: var(--ink-muted); }
.pk-tot b { font: 500 22px var(--font-mono); }
/* the phone sheet shows the package's head outside its card, so it carries the same edges as the sections under it */
#pkgOvBody > .hd { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: var(--space-3); border-bottom: 1px solid var(--line); }
#pkgOvBody > .hd h3 { flex: 1 1 100%; font-size: 16px; line-height: 22px; font-weight: 600; }
#pkgOvBody > .hd .mn { flex: 1 1 100%; }
#pkgOvBody .pk-tot { gap: 2px; }
#pkgOvBody .pk-tot b { line-height: 28px; }
/* a report's table fits its card at a desk: headers wrap and cells sit closer, so only a table that truly cannot fit scrolls */
@media (min-width: 761px) {
  .bq:has(> .rcat) table th { white-space: normal; vertical-align: bottom; }
  .bq:has(> .rcat) table th, .bq:has(> .rcat) table td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .bq:has(> .rcat) table th:first-child, .bq:has(> .rcat) table td:first-child { padding-left: var(--space-4); }
  .bq:has(> .rcat) table th:last-child, .bq:has(> .rcat) table td:last-child { padding-right: var(--space-4); }
}
/* the job sheet's message box takes the whole width on a phone, with Send under it */
.jb-msgrow { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); align-items: flex-start; }
.jb-msgrow > textarea { flex: 1; }
.jb-msgrow > div { display: flex; flex-direction: column; gap: var(--space-2); }
.jb-contact { margin: var(--space-2) 0; }
.jb-cacts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
@media (max-width: 760px) {
  .jb-msgrow { flex-direction: column; align-items: stretch; }
  .jb-msgrow > textarea { flex: none; width: 100%; }
}

/* Vendor invoices and payment batches */
.bat-cols { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.bat-cols > .panel { margin-bottom: 0; }
.panel.bat-ok { flex: 999 1 560px; min-width: 0; overflow: clip; }
.bat-list { flex: 1 1 600px; min-width: 0; }
.bat-ok #oklist { overflow-x: auto; }
/* the row's checkbox, with a thumb-sized target that does not make the row taller on a desk */
.chk44 { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -12px; cursor: pointer; }
@media (max-width: 760px) { .chk44 { margin: 0 0 0 -12px; } }
.bat-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--navy); color: #fff; }
.bat-foot #selmn { flex: 1; font-size: 15px; font-weight: 600; }
.bat-foot .btn.bp { background: var(--gold); border-color: var(--gold); color: var(--navy); height: 44px; padding: 0 18px; font-size: 15px; }
.ap-doc { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.ap-doc-hd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
tr.rjk-sub td { background: var(--surface-sunk); font-weight: 600; }
.rjk-nowrap { white-space: nowrap; }

/* Draft pool */
.pgroup { border-top: 1px solid var(--line); }
.pgroup:first-child { border-top: 0; }
.pgh { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pg-tbl { flex: 1; overflow-x: auto; }
.pool-for { white-space: nowrap; }
.slip-po { width: 110px; height: 34px; font-size: 14px; }
.pgf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--canvas); font-size: 14px; }
.pn-grid.aq-grid { grid-template-columns: minmax(220px, 2fr) minmax(200px, 1fr) 90px auto; align-items: end; }
.aq-for .aq-cust { flex: 1 1 190px; max-width: 320px; }
.aq-for .aq-job { flex: 1 1 150px; max-width: 240px; }
@media (max-width: 700px) { .pn-grid.aq-grid { grid-template-columns: minmax(0, 1fr) auto; } .aq-grid > label:first-child, .aq-grid > label:nth-child(2) { grid-column: 1 / -1; } .aq-grid select { min-width: 0; width: 100%; } .aq-for .aq-cust, .aq-for .aq-job { flex: 1 1 100%; max-width: none; } }
.pbar { height: 6px; background: var(--surface-sunk); border-radius: var(--radius-full); overflow: hidden; min-width: 80px; max-width: 140px; flex: 1; }
.pfill { height: 100%; background: var(--success); }

/* Receiving on a phone: the item first, then a full-width Receive now box */
@media (max-width: 700px) {
  .rv-tbl tr:first-child { display: none; }
  .panel table.rv-tbl, table.rv-tbl > tbody { display: block; -webkit-mask-image: none; mask-image: none; animation: none; overflow: visible; }
  .rv-tbl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .rv-tbl tr:last-child { border-bottom: 0; }
  .rv-tbl td, .panel table.rv-tbl td:first-child, .panel table.rv-tbl td:last-child { border: 0; padding: 0; text-align: left; }
  .rv-tbl td:first-child, .rv-tbl td:last-child { grid-column: 1 / -1; font-weight: 600; }
  .rv-tbl td[data-l]::before { content: attr(data-l); display: block; font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); font-weight: 500; }
  .rv-tbl td.rv-now { grid-column: 1 / -1; }
  .rv-tbl td.rv-now input { width: 100%; max-width: none; height: 44px; font-size: 16px; padding: 0 var(--space-3); }
  .rv-tbl td:last-child:empty { display: none; }
  .panel table.rv-tbl { white-space: normal; }
  .panel table.rv-tbl td { white-space: normal; }
  .panel table.rv-tbl td:first-child { position: static; max-width: none; overflow: visible; box-shadow: none; background: none; }
}

/* Purchasing: picked rows, vendor units */
.lbl .mn { font-weight: 400; }
/* a link inside a label does not push the field away from its label */
.lbl .lbl-act { min-height: 0; }
.vpgrid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--space-4); }
.vpgrid > .panel { margin-bottom: 0; }
.pn-grid .pn-h { display: block; }
.pn-grid label.pn-chk, .modal label.pn-chk { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
input[type=file].inp { height: 44px; padding: 0 var(--space-3); line-height: 42px; }
input[type=file].inp::file-selector-button { vertical-align: middle; }
input[type=file].inp::file-selector-button { height: 26px; margin-right: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 600 14px var(--font-sans); cursor: pointer; }
.vp-on { background: var(--cream-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.row-due td { background: var(--cream-soft); }
label.vbu-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; cursor: pointer; }
label.vbu-row.on { background: var(--success-tint); }

/* Pull queue and pull tickets */
.pl-list { display: grid; gap: var(--space-2); }
.pl-card { display: grid; grid-template-columns: 124px minmax(0, 1fr) 190px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; }
.pl-card:hover { border-color: var(--line-strong); }
.pl-date { text-align: center; border-right: 1px solid var(--line); padding-right: var(--space-3); }
.pl-date b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.pl-date small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }
.pl-date.over b, .pl-date.over small { color: var(--danger); font-weight: 600; }
.pl-main > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pl-right { text-align: right; font-size: 13px; }
.pl-bar { height: 6px; border-radius: var(--radius-full); background: var(--surface-sunk); margin-top: var(--space-2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--success); }
.pl-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) 84px 124px; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.pl-chk { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 16px; cursor: pointer; user-select: none; }
.pl-line.pulled .pl-chk, .pl-line.sub .pl-chk { background: var(--success); border-color: var(--success); color: #fff; }
.pl-line.short .pl-chk { background: var(--cream-soft); border-color: var(--gold-ink); color: var(--gold-ink); }
.pl-line.picked .pl-chk { cursor: default; }
.pl-line.picked > div:nth-child(2) b { font-weight: 500; color: var(--ink-muted); }
.pl-line .qty { font: 500 13px var(--font-mono); text-align: right; }
.pl-line .qty .mn { font-family: var(--font-sans); }
.pl-acts { display: flex; gap: var(--space-1); justify-content: flex-end; }
.pl-acts span { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pl-acts span:hover { background: var(--surface-sunk); }
.pl-acts span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pl-extra { grid-column: 2 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pl-wait { background: var(--cream-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); font-size: 14px; line-height: 20px; }
.pl-wait.plain { background: var(--canvas); }
@media (max-width: 700px) {
  .pl-card { grid-template-columns: 112px minmax(0, 1fr); }
  .pl-right { grid-column: 1 / -1; text-align: left; display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
  .pl-right .pl-bar { flex: 1; min-width: 80px; margin-top: 0; }
  .pl-line { grid-template-columns: 44px minmax(0, 1fr) 64px; }
  .pl-acts { grid-column: 2 / -1; justify-content: flex-start; }
  .pl-acts span { height: 44px; }
  .pl-extra .inp { height: 44px; font-size: 16px; }
}

/* Proposal builder and takeoffs */
.pb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); }
.steps { display: flex; gap: 2px; margin-left: auto; }
.step { font-size: 13px; font-weight: 600; color: var(--ink-muted); padding: var(--space-2) var(--space-3); border-bottom: 3px solid var(--line); }
.step.done { color: var(--success); border-color: var(--success); }
.step.on { color: var(--ink); border-color: var(--gold); }
.optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.opt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; }
.opt:hover { border-color: var(--line-strong); }
.opt.sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--cream-soft); }
.opt .img { height: 110px; position: relative; display: grid; place-items: center; background: var(--surface-sunk); }
/* an option with no picture is just its words, not a grey block that looks like a picture failed */
.opt .img.noimg { height: 0; }
.opt .img.noimg + .bd .nm { padding-right: var(--space-8); }
.opt .tick { position: absolute; top: var(--space-3); right: var(--space-3); width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); font-size: 12px; font-weight: 700; }
.opt.sel .tick { background: var(--success); border-color: var(--success); color: #fff; }
.opt .bd { padding: var(--space-4); }
.opt .nm { font-weight: 600; font-size: 15px; }
.opt .ds { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-1); line-height: 18px; }
.opt .ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.opt .pr { font: 500 15px var(--font-mono); white-space: nowrap; }
.opt .pr .pu { font: 500 13px var(--font-sans); color: var(--ink-muted); }
.opt .std { flex: none; font: 600 12px var(--font-sans); color: var(--ink-muted); background: var(--surface-sunk); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.sum { position: sticky; top: 88px; align-self: start; }
.sum .panel { overflow: hidden; }
.sum .line { display: flex; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; }
.sum .line span:last-child { margin-left: auto; font: 500 13px var(--font-mono); }
.sum .tot { display: flex; padding: var(--space-4); background: var(--surface-sunk); align-items: baseline; }
.sum .tot .l { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.sum .tot .v { margin-left: auto; font: 500 22px var(--font-mono); }
.sendrow { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.sendrow .btn { flex: 1; }

.formrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.formrow:last-child { border-bottom: 0; }
.formrow .fi { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; background: var(--canvas); border: 1px solid var(--line); }
.formrow .fn { font-weight: 600; font-size: 14px; }
.formrow .fm { font-size: 13px; color: var(--ink-muted); }
.formrow > .fi + div { flex: 1; min-width: 0; }
.formrow .cnt2:empty { display: none; }
.formrow .cnt2 { white-space: nowrap; font: 500 13px var(--font-sans); color: var(--ink-muted); }
.formrow .edit { font-size: 14px; }
.phone { background: var(--navy); border-radius: 28px; padding: var(--space-3); box-shadow: var(--shadow-pop); }

.q { margin-bottom: var(--space-3); }

.photos { display: flex; gap: var(--space-2); }
.sig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); height: 46px; display: grid; place-items: center; font-size: 15px; font-style: italic; }

.opt .pr .tag { margin-left: var(--space-1); }

.pin { cursor: pointer; }

.tev { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; align-items: flex-start; }
.tev:last-child { border-bottom: 0; }
.tdot2 { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.tev .tw { font: 500 13px var(--font-sans); color: var(--ink-muted); width: 118px; flex: none; padding-top: 1px; }
.tev .tt2 { font-weight: 600; }
.tev .tm2 { font-size: 13px; color: var(--ink-muted); }
.qcard { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-2); background: var(--surface); }
.qtop { display: flex; gap: var(--space-2); align-items: center; }
.qnum { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.qmv { cursor: pointer; color: var(--ink-muted); font-size: 13px; }
.qmv:hover { color: var(--ink); }
.qopts { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; font-size: 13px; }
.qopts label { display: flex; gap: var(--space-1); align-items: center; }
.fbpv { position: sticky; top: 0; }
.pvphone { border: 8px solid var(--navy); border-radius: 26px; padding: var(--space-3); background: var(--canvas); max-height: 62vh; overflow-y: auto; }
.pvhd { font-weight: 600; font-size: 15px; margin-bottom: var(--space-2); }
.pvq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2); margin-bottom: var(--space-2); }
.pvl { font-size: 13px; font-weight: 600; }
.pvseg { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.pvseg span { flex: 1; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-1); font-size: 13px; font-weight: 600; }
.pvin { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-2); margin-top: var(--space-2); font-size: 13px; color: var(--ink-muted); }
.pvcam { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; margin-top: var(--space-2); font-size: 13px; color: var(--ink-muted); }
.pvhint { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-1); }
.pvbtn { background: var(--navy); color: #fff; text-align: center; border-radius: var(--radius-md); padding: var(--space-3); font-weight: 600; font-size: 14px; }
@media (max-width: 820px) { .fbpv { display: none; } }
.chatlog { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-1); }
.cmsg { background: var(--surface-sunk); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: 14px; max-width: 85%; }
.cmsg.mine { background: var(--cream-soft); align-self: flex-end; }
.cwho { font-size: 13px; color: var(--ink-muted); font-weight: 600; margin-bottom: 2px; }

/* Reports */
.rcat .rc-h { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) var(--space-4) var(--space-1); }
.ritem { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); font-size: 14px; font-weight: 500; cursor: pointer; }
.ritem:hover { background: var(--canvas); }
.ritem.sel { background: var(--navy); color: #fff; font-weight: 600; }
.ritem .sched { margin-left: auto; flex: none; font: 600 12px var(--font-sans); color: var(--ink-muted); background: var(--surface-sunk); padding: 2px 7px; border-radius: var(--radius-sm); }
.ritem.sel .sched { color: var(--navy); background: var(--surface); }
.pe-subh { font-size: 16px; line-height: 22px; font-weight: 600; }
.bq:has(> .rcat) { grid-template-columns: 272px minmax(0, 1fr); }
.tvprev { overflow: hidden; }
.rtools { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }

.rptchart { padding: var(--space-4) var(--space-4) var(--space-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.rcttl { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
.rfbar { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.rfg { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 34px; padding-left: 80px; }
.rfg .fl { position: absolute; left: 0; top: 0; line-height: 34px; }
/* the report's numbers read straight on the card: one strip split by hairlines, no tile on a tile */
.rkpis { display: flex; flex-wrap: wrap; overflow: hidden; border-bottom: 1px solid var(--line); }
/* one pixel back, so a tile that wraps to a new row hides its divider against the card's edge */
.rkpi { flex: 1 1 140px; min-width: 0; margin-left: -1px; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--line); }
.rkpi:first-child { border-left: 0; margin-left: 0; }
.rkl { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.rkv { font-size: 22px; font-weight: 700; margin-top: 2px; line-height: 28px; }
.rkm { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.rins { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--cream-soft); }
.rinh { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--space-2); }
.rin { font-size: 14px; line-height: 20px; padding: var(--space-1) 0; }
.ins-note { background: var(--cream-soft); }
.rptpic { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.rptpic-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.rptpic-l { flex: none; width: 150px; font-size: 13px; line-height: 16px; font-weight: 600; text-align: right; }
.rptpic-t { flex: 1; min-width: 60px; height: 12px; background: var(--surface-sunk); border-radius: var(--radius-full); overflow: hidden; }
.rptpic-t div { height: 100%; border-radius: var(--radius-full); }
.rptpic-v { flex: none; width: 104px; text-align: right; }
.rptpic-p { flex: none; width: 40px; }
/* Monthly usage count sheet (report key 'usage') */
.us-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.us-scan { flex: 1; min-width: 200px; font-size: 16px; }
.us-card { padding: var(--space-4); }
.us-card .big { font: 500 20px/26px var(--font-mono); }
.us-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.us-stats div { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.us-stats b { display: block; font: 500 16px/22px var(--font-mono); }
.us-stats span { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.us-cnt { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.us-cnt .inp { flex: 1; min-width: 120px; font-size: 16px; }
tr.us-hit td { background: var(--cream-soft); }
tr.us-done td:first-child { box-shadow: inset 3px 0 0 var(--success); }
@media (max-width: 700px) {
  .us-tbl thead { display: none; }
  .us-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
  .us-tbl td { border: 0; padding: 0; }
  .us-tbl td.us-x { display: none; }
  .us-tbl td.us-m { font-size: 13px; color: var(--ink-muted); white-space: normal; }
  .us-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rptpic-l { width: 96px; }
  .rptpic-v { width: 88px; }
}

/* Change orders, progress approvals, capacity */
.co-life { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 0 0 var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.co-st { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin: 0 -1px -1px 0; padding: var(--space-3) var(--space-4); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.co-st .l { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.co-st .n { font-size: 26px; font-weight: 700; line-height: 32px; }
.co-st .v { font: 500 13px var(--font-mono); color: var(--ink-muted); }
.co-st .w { font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.co-st.warn { background: var(--plumbing-tint); }
.co-st.warn .w { color: var(--danger); }
.co-st:hover { background: var(--canvas); }
.co-st.on { box-shadow: inset 0 -3px 0 var(--gold); }
.pg-steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.pg-steps li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font-size: 14px; line-height: 20px; }
.pg-steps .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); font-weight: 600; }
.pg-steps .s { font-size: 13px; color: var(--ink-muted); }
.pg-steps li.you { background: var(--navy); border-color: var(--navy); color: #fff; }
.pg-steps li.you .n { background: var(--gold); color: var(--navy); }
.pg-steps li.you .s { color: var(--navy-muted); }
.cap-wk { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.cap-wl { margin-bottom: var(--space-2); font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.cap-row { display: grid; grid-template-columns: 72px 1fr 84px; gap: var(--space-2); align-items: center; margin: var(--space-1) 0; }
.cap-dv { font-size: 13px; font-weight: 600; }
.cap-tr { position: relative; height: 12px; border-radius: 3px; background: var(--surface-sunk); }
.cap-tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.cap-mk { position: absolute; left: 80%; top: -3px; bottom: -3px; width: 2px; background: var(--navy); }
.cap-n { font: 500 13px var(--font-sans); text-align: right; color: var(--ink-muted); }
.cap-row.over .cap-n { color: var(--danger); font-weight: 600; }

/* Settings and Users */
#main .st-rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
#main .st-rail div { font-size: 14px; color: var(--ink); border-bottom-color: var(--line); }
#main .st-rail div small { font-size: 13px; color: var(--ink-muted); letter-spacing: 0; }
#main .st-rail div.on { background: var(--navy); color: #fff; }
#main .st-rail div.on small { color: var(--navy-muted); }
.rolecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.rolecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); cursor: pointer; }
.rolecard.sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--cream-soft); }
.rolecard .rn { font-weight: 600; font-size: 15px; }
.rolecard .rm { font-size: 13px; color: var(--ink-muted); margin-top: 2px; line-height: 18px; }
.rolecard .rc2 { font: 500 13px var(--font-sans); color: var(--ink-muted); margin-top: var(--space-1); }
#main .usr-roles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
#main .usr-roles .rolecard { display: flex; flex-direction: column; gap: var(--space-1); cursor: default; }

.rolerow { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.fb-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: var(--space-4); overflow-y: auto; }
@media (max-width: 820px) { .fb-grid { grid-template-columns: minmax(0, 1fr); } }
.modal .fgrid2 { padding: 0; }
.modal .st-chk { display: flex; margin: 0; font-weight: 400; }

/* ============================================================ 9. Phones ============================================================ */
@media (max-width: 900px) {
  .cols, .bq, .bq:has(> .rcat), .fv, .tk, .db, .pb, .optgrid { grid-template-columns: minmax(0, 1fr); }
  .vpgrid { grid-template-columns: minmax(0, 1fr); }
  .kpis, .kpis4, .hm-kpis, .rolecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jbmoney, .jbtrades, .jbkpi { grid-template-columns: minmax(0, 1fr); }
  .aip { width: 100vw; max-width: 100vw; right: -102vw; }

  .toast { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; }
  .steps { display: none; }
  .backlog { max-height: none; }
  .jbdup { margin-left: 0; order: 3; }
  /* the close button stays in the top right corner, however the header wraps */
  .jbhd { flex-wrap: wrap; position: relative; padding-right: 56px; }
  .jbhd .jbx { position: absolute; top: var(--space-2); right: var(--space-2); margin: 0; }
  .srch { width: 160px; }
}
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea, .inp { font-size: 16px; }
  .btn { min-height: 44px; height: auto; }
  .btn.bsm, .bsm { min-height: 44px; height: auto; }
  /* every link-style action, field and box a thumb has to hit is at least 44px tall on a phone */
  .edit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .rjk-seg button { height: 44px; min-width: 44px; justify-content: center; }
  .rfg { min-height: 44px; }
  .rfg .fl { line-height: 44px; }
  .pk-tot { margin-left: 0; align-items: flex-start; }
  .mchip { display: flex; align-items: center; min-height: 44px; }
  .dinsp .dic { flex: 1 1 100%; }
  table.pe-g.stack-sm { min-width: 0; }
  .pillset { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); width: 100%; }
  .pillset:has(> .pill:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pill { justify-content: center; }
  .iq-lot { display: inline-flex; align-items: center; min-height: 44px; }
  .dinsp .dic { min-height: 44px; }
  /* a tag that opens something keeps its tag shape; the 44px target is around it */
  .pl-badge { position: relative; align-self: center; }
  .pl-badge::after { content: ''; position: absolute; inset: -10px 0; }
  .dmap.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .bl-hover { display: none; }
  .bw-add .inp { height: 44px; }
  .lbl .edit.lbl-act { min-height: 0; padding: var(--space-2) 0; margin-top: calc(-1 * var(--space-2)); margin-bottom: calc(-1 * var(--space-2)); }
  td .edit { height: auto; }
  .hm-see, .note[role=button] a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* a checkbox's whole label is the target. :where keeps this at no weight, so a label laid out by its own class stays as it is */
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; }
  :where(label:has(> input[type=checkbox], > input[type=radio])) { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 44px; }
  .slip-po { height: 44px; font-size: 16px; }
  .tk2-tt { height: 44px; }
  .jph-a, .jph-ic { gap: 0 var(--space-3); }
  .jph-a .edit, .jph-ic .edit, .mrow-acts .edit { justify-content: flex-start; padding: 0; }
  #jbQ { flex: 1 1 100%; }
  .pe-tabs > .pe-tab { flex: 1 0 auto; padding: 0 var(--space-2); justify-content: center; }
  .bat-ok .phd > label { flex: 1 1 100%; white-space: nowrap; }
  .bat-ok .phd > label .inp { flex: 1; min-width: 0; }
  .formrow .edit { justify-content: flex-start; padding: 0 var(--space-3) 0 0; }
  .inp, .srch, .qin, td .inp, .phd .inp, .hd .inp, .pgh .inp, .rfbar .inp, .catbar .inp, .fgrid2 .inp, .rtools .inp, .jbhd .inp, .ap-doc .inp, .pl-extra .inp, .bl-find .inp, .phd .srch, .hd .srch { height: 44px; }
  td textarea.inp, textarea.inp { height: auto; }
  input[type=checkbox]:not(.nbDiv), input[type=radio] { width: 20px; height: 20px; flex: none; }
  .avatar { width: 44px; height: 44px; }
  .hm-kpi .kl, .kpi .kl, .kpi .lbl { min-height: 32px; }
  .formrow { flex-wrap: wrap; }
  .formrow > .fi + div { flex: 1 1 calc(100% - 46px); }
  .kb { scroll-snap-type: x proximity; }
  /* a message or group row spanning the table stays readable: it wraps within the screen and is not cut at the sticky column */
  .panel table td[colspan] { white-space: normal; overflow: visible; background: transparent; box-shadow: none; }
  .panel { overflow: hidden; }
  .panel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; width: 100%; }
  @supports (animation-timeline: scroll()) {
    .panel table:not(.stack-sm) { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-r)); mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-r)); animation: rjk-fade-r linear both; animation-timeline: scroll(self inline); }
  }
  .panel table th, .panel table td { white-space: nowrap; }
  /* the identifying first column stays put while the rest of a wide table scrolls */
  .panel table th:first-child, .panel table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--line); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .panel table th:first-child { background: var(--surface-sunk); z-index: 3; }
  /* A table with a header row stacks into one labelled block per row, so the amount, the status and the actions are on screen without a sideways scroll.
     /kielty.js puts .stack-sm on it and writes each cell's label from its column header. Grids people type across (.pe-g) and number tables read
     across (.rtbl, .no-stack) keep the scroll above, except a .rtbl-stack, whose row ends in an action a phone must reach. */
  .panel table.stack-sm, .jbbody table.stack-sm, table.stack-sm { display: block; overflow: visible; white-space: normal; }
  table.stack-sm > tbody, table.stack-sm > thead { display: block; }
  table.stack-sm tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  table.stack-sm tr:has(> th) { display: none; }
  table.stack-sm tr:last-child { border-bottom: 0; }
  /* a picked or subtotal row is one band, not a patch behind each stacked cell */
  table.stack-sm tr.hit { background: var(--cream-soft); }
  table.stack-sm tr.ivlow { background: var(--plumbing-tint); }
  /* inventory: the description takes its own line and the short fields close up under it */
  table.rtbl-stack.stack-sm tr { grid-auto-flow: dense; }
  table.rtbl-stack.stack-sm td:nth-child(3) { grid-column: 1 / -1; }
  table.stack-sm tr.rjk-sub { background: var(--surface-sunk); }
  table.stack-sm td, table.stack-sm td:first-child, table.stack-sm td:last-child, .panel table.stack-sm td, .panel table.stack-sm td:first-child, .panel table.stack-sm td:last-child { display: block; position: static; min-width: 0; max-width: none; width: auto; padding: 0; border: 0; white-space: normal; overflow: visible; box-shadow: none; text-align: left; background: transparent; }
  table.stack-sm td:first-child, table.stack-sm td[colspan], table.stack-sm td:has(.edit, .btn, .inp, textarea) { grid-column: 1 / -1; }
  table.stack-sm td:empty, .panel table.stack-sm td:first-child:empty, .panel table.stack-sm td:last-child:empty { display: none; }
  /* .nw keeps a row of actions on one line on a desk; stacked, they wrap inside the screen */
  table.stack-sm td.nw:has(.btn, .edit, .inp, select) { white-space: normal; }
  table.stack-sm td .btn { margin: 0 var(--space-1) var(--space-1) 0; }
  table.stack-sm td > a { display: inline-flex; align-items: center; min-height: 44px; }
  /* a cell that opens something is a 44px target */
  .panel table.stack-sm td[onclick] { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  /* a pair of figures needs the row's whole width to stay on one line, and so does who a pool line is for */
  table.stack-sm td:has(> .amt-sub), table.stack-sm td.pool-for { grid-column: 1 / -1; }
  /* a row's lone remove button is always in the same place: the row's top right corner */
  table.stack-sm tr:has(> td:last-child > .rjk-iconbtn:only-child) { position: relative; }
  .panel table.stack-sm td:last-child:has(> .rjk-iconbtn:only-child) { position: absolute; top: 0; right: 0; }
  .panel table.stack-sm tr:has(> td:last-child > .rjk-iconbtn:only-child) > td:first-child { padding-right: var(--space-8); }
  .panel table.stack-sm td.amt, .panel table.stack-sm td.num { white-space: nowrap; }
  /* a stacked table with nothing in it says so in the middle, like every other empty state */
  .panel table.stack-sm td.empty, .panel table.stack-sm td.empty:first-child, .panel table.stack-sm td.empty:last-child { padding: var(--space-4); text-align: center; color: var(--ink-muted); }
  table.stack-sm td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 500 13px/18px var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
  table.stack-sm td:first-child[data-l]::before { content: none; }
  table.stack-sm td .edit { margin: 0 var(--space-1) var(--space-1) 0; }
  /* a message in a grid that scrolls stays on the screen */
  td.empty > .scrollmsg { display: block; position: sticky; left: var(--space-4); width: min(100%, calc(100vw - 96px)); white-space: normal; text-align: left; }
  .rolecards, .cols, .db, .bq, .bq:has(> .rcat), .jbmoney, .jbtrades, .jbkpi { grid-template-columns: minmax(0, 1fr); }
  .hm-kpis, .kpis, .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd number of tiles: the last one takes the whole row, no empty half */
  .hm-kpis > .hm-kpi:last-child:nth-child(odd), .kpis > .kpi:last-child:nth-child(odd), .kpis4 > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* a half-width tile holds a six-figure dollar amount at this size */
  .kpi .num, .kpi .kv, .hm-kpi .kv { font-size: 22px; line-height: 28px; letter-spacing: 0; }
  .db-hd > div:not(:first-child):has(> .btn) { flex: 1 1 100%; }
  .db-hd .btn { flex: 1 1 auto; min-width: 44%; margin-left: 0; }
  .db-hd .title, .ph h2 { font-size: 22px; line-height: 28px; }
  .ph .pm { width: 100%; order: 3; }
  .phd, .panel .hd { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  /* a card head's note takes its own line; a note ending at a wrap never leaves a dot hanging */
  .panel .hd > h3 + .mn { flex: 1 1 100%; text-align: left; margin-left: 0; }
  .srch, .search { min-width: 0; margin-left: 0; width: 100%; }
  .catbar { padding: var(--space-2) var(--space-3); }
  .phd .srch, .phd select.inp, .phd input.inp:not([type=checkbox]):not([type=radio]) { flex: 1 1 100%; max-width: none; }
  .itemres { max-height: 44vh; }

  .phd:has(.inp) > h3 { flex: 1 1 100%; }
  /* a long tag on a form row wraps inside the card */
  .formrow .tag { height: auto; min-height: 24px; padding: var(--space-1) var(--space-2); white-space: normal; line-height: 16px; }
  /* numbers keep their digits together; the words around them can wrap */
  .bw-t td .mn, .bw-t td b { overflow-wrap: normal; word-break: normal; }
  .fgrid2 { flex-direction: column; align-items: stretch; }
  .fgrid2 > *, .fgrid2 > [style*="--w:"], .fgrid2 > [style*="--f:"], .mbd .fgrid2 .inp:not([type=checkbox]):not([type=radio]) { width: 100%; flex: none; }
  .fgrid2 .inp { height: 44px; }
  .qmv { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .aisug span { min-height: 44px; }
  .fchip, .cat, .pill { min-height: 44px; min-width: 44px; justify-content: center; }
  .qitem { padding: var(--space-3); }
  .pkg-sec { padding: var(--space-3); }
  .dgrid { min-width: 680px; }
  .mcell { min-height: 86px; padding: var(--space-1); }
  .modal { max-height: 88vh; overflow-y: auto; }
  .modal .mb { max-height: none; }
  .modal-bg { padding: var(--space-2); }

  .jbov { padding: var(--space-2); }
  .jbhd { padding: var(--space-3) var(--space-4); }
  .jbbody { padding: var(--space-3) var(--space-3) var(--space-4); }
  .jbtabs { padding: var(--space-2) var(--space-3) 0; }
  .jbmoney, .jbtrades { padding: var(--space-3); }
  td, .mn, .wk { word-break: break-word; }
  #qlist .qitem { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "m" "a"; gap: var(--space-1); }
  .jbmsg { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ 10. Outside pages ============================================================ */
/* What builders, vendors and anyone with a link see: sign, portal, vendor, rfq, form, forms, intake, photos, unsub, legal. Phone-first.
   header.rjk-top.pub-top: logo lockup, then .rjk-tribar. .pub-main: the one column. .pub-foot: the footer, same words on every page.
   .pub-state: a centered card for loading, errors, closed links and thank-yous. .pub-ok, .pub-bad: a green or red line inside a page.
   .pub-form: a form whose <label>s sit over .rjk-input fields. .pub-check: a checkbox row. .pub-seg on .rjk-seg: a big pick-one for phones.
   Set --pub-w on a page to change the column width. */
:root { --pub-w: 960px; }
.pub-top { padding-left: max(var(--space-4), calc((100% - var(--pub-w)) / 2 + var(--space-4))); padding-right: max(var(--space-4), calc((100% - var(--pub-w)) / 2 + var(--space-4))); justify-content: space-between; }
/* a page showing only its status card keeps the logo over the card's edge, so moving between outside pages does not make the logo jump */
body:has(.pub-state) { --pub-w: 592px; }
.pub-main { max-width: var(--pub-w); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.pub-main .rjk-head { margin-bottom: var(--space-4); }
.pub-body { padding: var(--space-4); }
.pub-foot { max-width: var(--pub-w); margin: 0 auto; padding: 0 var(--space-4) var(--space-8); text-align: center; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.pub-foot .rjk-eyebrow { display: block; margin-bottom: var(--space-1); }
.pub-state { max-width: 560px; margin: var(--space-6) auto; padding: var(--space-8) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-align: center; color: var(--ink-muted); }
.pub-state .rjk-tile { margin: 0 auto var(--space-3); }
.pub-state h2 { margin-bottom: var(--space-2); font-size: 20px; line-height: 26px; font-weight: 700; color: var(--ink); }
.pub-state b { color: var(--ink); }
.pub-state .rjk-sm { margin-top: var(--space-3); }
.pub-state .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.pub-ok, .pub-bad { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; font-weight: 500; margin-bottom: var(--space-4); }
.pub-ok { background: var(--success-tint); color: var(--success); }
.pub-bad { background: var(--plumbing-tint); color: var(--danger); }
textarea.rjk-input { height: auto; min-height: 92px; padding: var(--space-3) 14px; line-height: 22px; }
.pub-form label { display: block; margin: var(--space-3) 0 6px; font-size: 13px; line-height: 18px; font-weight: 600; }
.pub-form label.pub-check, .pub-check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; cursor: pointer; }
.pub-check input { flex: none; width: 20px; height: 20px; }
.pub-seg { display: flex; flex-wrap: wrap; }
.pub-seg button { flex: 1 1 auto; justify-content: center; height: 44px; font-size: 15px; }
.pub-seg button.on { background: var(--navy); color: #fff; }
@media (max-width: 760px) {
  .pub-main { padding-top: var(--space-4); }
  .pub-main .phd { padding: var(--space-3) var(--space-4); }
  .pub-main .rjk-btn--sm { height: 44px; padding: 0 var(--space-4); font-size: 15px; border-radius: var(--radius-md); }
  .pub-main .rjk-seg button { height: 44px; }
}
@media print { .pub-top, .rjk-tribar { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.pub-form .rjk-card { margin-bottom: var(--space-4); }
.pub-form .pub-body > label:first-child { margin-top: 0; }
.rjk-say { display: none; position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-6); max-width: 560px; margin: 0 auto; padding: var(--space-3) var(--space-4); background: var(--navy); color: #fff; border-radius: var(--radius-lg); font-weight: 600; box-shadow: var(--shadow-pop); z-index: 10000; }
@media (max-width: 760px) { .pub-main p > a, .pub-state a { padding: 14px 0; } .lb .lbbar .rjk-btn--sm { height: 44px; padding: 0 var(--space-4); font-size: 15px; border-radius: var(--radius-md); } }
.hd + .jps-row, .phd + .jps-row, .jps-row:first-child { border-top: 0; }
/* a dropdown's words start where a text field's do: the browser adds its own inset to a select */
select.rjk-input { padding: 0 var(--space-3) 0 10px; }
.cr-pgh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* ============================================================ 11. Printing a screen ============================================================ */
/* Print buttons open their own page (window.rjkPrint in /kielty.js, the engine in /doc.js). This covers Ctrl+P on any screen: the shell stays off paper. */
@media print {
  .side, .topbar, .rjk-tribar, .aip, #sbov { display: none; }
  .toast { display: none !important; } /* the toast's display is set inline by JS */
  .app { display: block; }
  body, .content { background: #fff; padding: 0; }
  .panel, .rjk-card { box-shadow: none; }
  .tblx, .rjk-tablebox, .panel { overflow: visible; }
}