/* Jobber — app-wide component styles.
   Sections 1-8 are ported ~verbatim from jobber.html (class names unchanged
   so ported behaviors/markup keep working); section 9 is new, minimal
   chrome for screens jobber.html didn't have (login, dashboard, walkthrough,
   event log, job cards, tray, status chips). Uses tokens from tokens.css. */

/* ===== 0. reset + app shell frame (ported from jobber.html .app) ===== */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--bg);font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;}
/* Full-bleed: the app fills the whole viewport (no floating card / dead space
   on wide monitors). The chrome/canvas seam is the sidebar edge, not a border. */
.app{width:100vw;height:100vh;background:var(--surface);
  display:grid;grid-template-columns:var(--side-w,0px) 1fr;overflow:hidden;}
.app.side-wide{--side-w:212px;}
.app.side-rail{--side-w:72px;}
.app.side-none{grid-template-columns:1fr;}
.app.side-none #side{display:none;}
.main{display:flex;flex-direction:column;overflow:hidden;min-width:0;}
/* #side is a grid item (full height); its .side/.rail child must stretch to
   paint the dark chrome all the way down — otherwise the bar stops at its
   content and the canvas shows through underneath. */
#side{display:flex;flex-direction:column;min-height:0;}
#side>.side,#side>.rail{flex:1;min-height:0;}
#view{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;}
button,input{font:inherit;}

/* ===== 0a. wide sidebar — ported verbatim from navillus-timesheet-dashboard.html ===== */
.side{background:var(--sidebar);color:var(--ondark-1);display:flex;flex-direction:column;padding:22px 0;min-height:0;}
.side .brand{display:flex;align-items:center;gap:12px;padding:0 22px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px;}
.side .brand .mark{width:40px;height:40px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));display:flex;align-items:center;justify-content:center;
  color:var(--onaccent);font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:.5px;}
.side .brand .name{font-family:var(--cond);font-weight:700;color:var(--onaccent);font-size:16px;line-height:1.05;}
.side .brand .name small{display:block;font-family:var(--ui);font-weight:400;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:3px;}
.add-ts{margin:0 12px 14px;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 12px;border-radius:10px;border:none;cursor:pointer;
  background:var(--accent);color:var(--onaccent);font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.32);}
.add-ts:hover{background:var(--accent-hover);}
.add-ts svg{width:16px;height:16px;stroke:var(--onaccent);fill:none;stroke-width:2.4;}
.side .nav{display:flex;flex-direction:column;gap:2px;padding:6px 12px;}
.side .nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  color:var(--ondark-2);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;}
.side .nav a .ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;}
.side .nav a:hover{background:rgba(255,255,255,.05);color:var(--ondark-hover);}
.side .nav a.active{background:var(--accent);color:var(--onaccent);box-shadow:0 6px 16px rgba(var(--accent-rgb),.35);}
.side .nav a.active .ic{stroke:var(--onaccent);}
.side .foot{margin-top:auto;padding:16px 22px 4px;border-top:1px solid rgba(255,255,255,.08);}
.side .foot .simchip{font-size:10.5px;font-family:var(--mono);color:var(--faint);margin-bottom:8px;}
.side .foot .who{font-size:12.5px;color:var(--ondark-strong);font-weight:600;}
.side .foot .role{font-size:11px;color:var(--faint);margin-top:2px;}
.side .foot .themetoggle{margin-top:10px;width:100%;padding:7px 10px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--ondark-1);font-size:11.5px;font-weight:600;
  font-family:var(--ui);}
.side .foot .themetoggle:hover{background:rgba(255,255,255,.06);color:var(--ondark-hover);}
.side .foot .logout{margin-top:8px;width:100%;padding:7px 10px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--ondark-1);font-size:11.5px;font-weight:600;}
.side .foot .logout:hover{background:rgba(255,255,255,.06);color:var(--ondark-hover);}

/* ===== 0b. narrow icon rail — ported verbatim from jobber.html ===== */
.rail{background:var(--sidebar);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;min-height:0;}
.rail .mark{width:40px;height:40px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));display:flex;align-items:center;justify-content:center;
  color:var(--onaccent);font-family:var(--cond);font-weight:700;font-size:19px;margin-bottom:8px;}
.rail .addbtn{width:46px;height:46px;border-radius:13px;border:none;cursor:pointer;
  background:var(--accent);color:var(--onaccent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 15px rgba(var(--accent-rgb),.4);margin-bottom:2px;}
.rail .addbtn:hover{background:var(--accent-hover);}
.rail .addbtn svg{width:22px;height:22px;stroke:var(--onaccent);fill:none;stroke-width:2.6;}
.rail .addcap{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-weight:700;}
.rail .ricon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--ondark-3);cursor:pointer;}
.rail .ricon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;}
.rail .ricon:hover{background:rgba(255,255,255,.06);color:var(--ondark-hover);}
.rail .ricon.active{background:var(--accent);color:var(--onaccent);}
.rail .spring{margin-top:auto;}
.rail .avatar{width:34px;height:34px;border-radius:50%;background:var(--avatar-bg);color:var(--ondark-strong);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:10px;cursor:pointer;}
.rail .avatar:hover{background:var(--avatar-bg-hover);}
.rail .simdate{font-size:9px;font-family:var(--mono);color:var(--faint);margin-top:4px;text-align:center;line-height:1.3;}

/* Sidebar/rail chrome never changes color between themes (see tokens.css),
   but the canvas now goes near-black in dark mode — the light-mode
   "huge contrast = automatic seam" disappears, so add a hairline to keep the
   chrome/canvas boundary from going flat. */
:root[data-theme="dark"] .side,
:root[data-theme="dark"] .rail{border-right:1px solid rgba(255,255,255,.07);}

/* Dark-mode accent-as-TEXT: the indigo --accent (#6366F1) is a fine fill but
   only ~3:1 against dark surfaces as text (fails AA). Wherever accent is used
   as a foreground color on surface/soft backgrounds, step up to --accent-ink
   (#A5B4FC, ~6.9:1). Buttons with --onaccent text are unaffected. */
:root[data-theme="dark"] .wt .lk.accent,
:root[data-theme="dark"] .lk.accent,
:root[data-theme="dark"] .colpanel .colreset:hover,
:root[data-theme="dark"] .recenter:hover,
:root[data-theme="dark"] .wkact:hover,
:root[data-theme="dark"] .dash .mact:hover,
:root[data-theme="dark"] .addcrew:hover,
:root[data-theme="dark"] .pg.add:hover,
:root[data-theme="dark"] .lpg.add:hover,
:root[data-theme="dark"] .dropzone:hover,:root[data-theme="dark"] .dropzone.dragover,
:root[data-theme="dark"] .drop:hover,:root[data-theme="dark"] .drop.dragover,
:root[data-theme="dark"] .backb:hover,
:root[data-theme="dark"] .logincard .logo,
:root[data-theme="dark"] .stepper button:hover{color:var(--accent-ink);}

/* ===== 0c. sidebar collapse/expand + weekend-activate + layout recenter ===== */
.side .brand{position:relative;}
.sidefold{margin-left:auto;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:var(--ondark-3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
.sidefold:hover{background:rgba(255,255,255,.08);color:var(--ondark-hover);}
.sidefold svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
.railfold{width:44px;height:30px;border-radius:9px;border:none;background:transparent;color:var(--ondark-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-top:2px;}
.railfold:hover{background:rgba(255,255,255,.06);color:var(--ondark-hover);}
.railfold svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}

/* weekend "Activate day" — hidden until the day group is hovered */
.wkact{display:inline-flex;align-items:center;gap:6px;border:1.6px dashed var(--line-strong);border-radius:20px;
  background:var(--surface);color:var(--faint);cursor:pointer;font-size:10.5px;font-weight:700;padding:4px 11px;font-family:var(--ui);
  opacity:0;transition:opacity .12s;}
.wkact svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;}
.daygrp.wknd:hover .wkact{opacity:1;}
.wkact:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

/* layout-mode recenter — floats top-right of the pan/zoom viewport */
.recenter{position:absolute;top:12px;right:14px;z-index:5;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--surface);color:var(--muted);cursor:pointer;font-family:var(--ui);font-size:11px;font-weight:700;
  padding:6px 11px;box-shadow:0 2px 8px rgba(var(--shadow-rgb),.12);}
.recenter:hover{color:var(--accent);border-color:var(--accent);}

/* rail avatar menu (persona / log out) — rendered into #popover */
.railmenu{display:flex;flex-direction:column;gap:2px;}
.railmenu .rmwho{padding:7px 9px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.railmenu .rmwho b{display:block;font-size:12.5px;color:var(--ink);}
.railmenu .rmwho span{font-size:10.5px;color:var(--muted);}
.railmenu button{display:flex;align-items:center;gap:8px;border:none;background:none;cursor:pointer;
  text-align:left;font-size:12px;color:var(--ink);padding:7px 9px;border-radius:6px;font-family:var(--ui);}
.railmenu button:hover{background:var(--accent-soft);}

/* ===== 1. viewbar (jobber.html topbar) / buttons / segmented toggle ===== */
.viewbar{display:flex;align-items:center;gap:14px;padding:0 22px;height:62px;
  border-bottom:1px solid var(--line);flex:none;}
.backb{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none;text-decoration:none;}
.backb:hover{border-color:var(--accent);color:var(--accent);}
.backb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;}
.jobtitle{display:flex;flex-direction:column;gap:1px;min-width:0;}
.jobtitle .jt{font-family:var(--cond);font-weight:700;font-size:17px;color:var(--ink);line-height:1.1;}
.jobtitle .jc{font-size:11.5px;color:var(--muted);font-family:var(--mono);}
.chip.wkstat{margin-left:6px;align-self:center;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;
  font-family:var(--ui);font-size:13px;font-weight:600;padding:9px 14px;border-radius:9px;
  display:inline-flex;align-items:center;gap:8px;}
.btn svg{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2.1;}
.btn:hover{border-color:var(--faint);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--onaccent);box-shadow:0 6px 14px rgba(var(--accent-rgb),.28);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn[disabled]{opacity:.5;cursor:default;}

.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;}
.seg button{border:none;background:transparent;cursor:pointer;font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:var(--muted);padding:6px 13px;border-radius:7px;display:flex;align-items:center;gap:6px;}
.seg button svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:2;}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(var(--shadow-rgb),.12);}

/* ===== 1b. subbar — ported from jobber.html/B-document-canvas ===== */
.subbar{display:flex;align-items:center;gap:12px;padding:11px 22px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap;}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--surface);}
.stepper .grp{display:flex;align-items:center;gap:8px;padding:5px 10px;border-right:1px solid var(--line);}
.stepper .grp:last-child{border-right:none;}
.stepper .lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;}
.stepper b{font-family:var(--mono);font-size:12px;min-width:20px;text-align:center;}
.stepper button{width:22px;height:22px;border:none;background:transparent;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;border-radius:5px;padding:0;}
.stepper button:hover{background:var(--accent-soft);color:var(--accent);}
.stepper button[disabled]{opacity:.3;cursor:default;background:none;color:var(--ink);}
.stepper button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;}
.sortbox{margin-left:auto;display:flex;align-items:center;gap:9px;}
.filterin{border:1px solid var(--line-strong);border-radius:8px;padding:7px 11px;font-size:12px;font-family:var(--ui);
  color:var(--ink);width:200px;outline:none;background:var(--surface);}
.filterin:focus{border-color:var(--accent);}
.filterin::placeholder{color:var(--faint);}
.sortbox .sel{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:8px;
  padding:7px 11px;font-size:12px;font-weight:600;color:var(--ink);background:var(--surface);cursor:pointer;user-select:none;}
.sortbox .sel svg{width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:2.2;}
.sortbox .sel:hover{border-color:var(--faint);}
/* named-selection chip ("Page 3 · Thu 4/30 ✕" / "Day · Thu 4/30 ✕") */
.selchip{display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;font-family:var(--ui);
  font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent-ink);}
.selchip.day{background:var(--attn-bg);color:var(--attn);}
.selchip:hover{filter:brightness(.96);}

/* ===== 2. left/right split scaffold (ported: ties the pane families below together) ===== */
.content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(400px,1fr) 8px 1.08fr;}
.handle{background:var(--line);position:relative;cursor:col-resize;}
.handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:34px;border-radius:3px;background:var(--line-strong);}

.panehead{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none;background:var(--surface-2);}
.panehead h3{font-family:var(--cond);font-size:15px;font-weight:700;}
.panehead .cnt{font-size:11px;color:var(--muted);font-family:var(--mono);}
.panehead .spacer{margin-left:auto;}
.axis-hint{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px;background:var(--surface);}
.axis-hint b{color:var(--ink);font-weight:700;}
.axis-hint svg{width:1em;height:1em;stroke:var(--faint);fill:none;stroke-width:1.9;}

/* ===== 3. document canvas: boxed day groups (user-chosen Variant B) + crew sections ===== */
.imgpane{min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);}
.canvas{flex:1;min-height:0;overflow:auto;background:var(--canvas);padding:12px 16px;}
/* Day group: light-blue box (user request) so day groups read clearly; today =
   orange (jobber.html .dsec.today), rejected = red fade. State changes touch
   color/background ONLY on the constant 1.5px border — no layout shift. */
.daygrp{border:1.5px solid var(--daygrp-border);border-radius:11px;padding:9px 10px 10px;margin-bottom:10px;background:var(--daygrp-bg);}
.daygrp.today{border-color:var(--accent);background:var(--daygrp-today-bg);}
.daygrp.rejected{border-color:var(--rej);background:linear-gradient(180deg,rgba(var(--rej-rgb),.06),transparent 90px);}
.daygrp.wknd{border-color:var(--line);background:var(--canvas);}
.daygrp.wknd .pxname,.daygrp.wknd .pxmeta{color:var(--faint);}
.daygrp.dragover{outline:2px dashed var(--accent);outline-offset:-4px;background:var(--accent-soft);}
.tdchip{font-size:9.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:20px;
  letter-spacing:.03em;text-transform:uppercase;}
/* compact one-line add-crew chip (day header area) */
.addcrew{display:inline-flex;align-items:center;gap:6px;border:1.6px dashed var(--line-strong);border-radius:20px;
  background:var(--surface);color:var(--faint);cursor:pointer;font-size:10.5px;font-weight:700;padding:4px 11px;font-family:var(--ui);
  white-space:nowrap;flex:none;}
.addcrew:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.addcrew svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;}
/* disabled/locked add-crew: kept hoverable (no pointer-events:none) so the
   title tooltip explains WHY it's off; the click handler no-ops on .off. */
.addcrew.off{opacity:.5;cursor:not-allowed;}
.addcrew.off:hover{border-color:var(--line-strong);color:var(--faint);background:var(--surface);}
/* manual-entries row inside a crew section */
.manrow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  padding:7px 10px;font-size:11px;color:var(--muted);}
.manrow .mtag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  background:var(--bg);border-radius:20px;padding:2px 7px;font-family:var(--mono);flex:none;}
/* classed rejected-day banner (was inline-styled .mwarn) */
.rejnote{border:1px solid var(--rej);border-left-width:3px;background:var(--rej-bg);border-radius:9px;
  padding:8px 10px;font-size:11.5px;color:var(--rej);margin-bottom:8px;}
.rejnote .btn{padding:5px 10px;font-size:11.5px;margin-top:8px;}

.pxdoc{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 9px;margin-bottom:8px;}
.pxdoc:last-of-type{margin-bottom:0;}
.pxlabel{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap;}
.pxlabel .push{margin-left:auto;}
.pxname{font-size:12.5px;font-weight:700;color:var(--ink);}
.pxmeta{font-size:10.5px;color:var(--muted);font-family:var(--mono);}
.pxbadge{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;}
.pxbadge.ok{color:var(--ok);background:var(--ok-bg);}
.pxbadge.ok svg{width:.9em;height:.9em;stroke:var(--ok);fill:none;stroke-width:2.6;}
.pxbadge.rev{color:var(--attn);background:var(--attn-bg);}
.pxbadge.clsd{color:var(--muted);background:var(--bg);font-family:var(--mono);}
.pxbadge.hol{color:var(--review);background:var(--review-bg);}
.dash .dchip.manual{background:var(--bg);color:var(--muted);}
.runocr{font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--onaccent);background:var(--review);border:none;border-radius:20px;
  padding:4px 10px;cursor:pointer;}
.runocr:hover{background:var(--review-hover);}
.codechip{font-size:10px;font-weight:700;font-family:var(--mono);color:var(--xl-head);background:var(--code-bg);border:1px solid var(--code-border);
  border-radius:20px;padding:3px 9px;cursor:pointer;}
.codechip:hover{border-color:var(--xl-head);}
.codechip.un{color:var(--attn);background:var(--attn-bg);border-color:var(--attn-border);font-family:var(--ui);}
.pxtools{margin-left:auto;display:flex;gap:4px;}
.pxtools button{width:23px;height:23px;border:1px solid var(--line);background:var(--surface);border-radius:6px;cursor:pointer;
  color:var(--faint);display:flex;align-items:center;justify-content:center;}
.pxtools button:hover{color:var(--ink);border-color:var(--line-strong);}
.pxtools svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;}

.strip{display:flex;gap:10px;overflow-x:auto;padding:1px 1px 4px;}
/* Sheet photos are landscape (~1584x1224 ≈ 1.294:1) — box matches that ratio
   so object-fit:cover crops symmetrically instead of eating the page width. */
.pg{flex:none;width:132px;height:102px;background:var(--surface);border:1px solid var(--line-strong);border-radius:5px;
  box-shadow:0 2px 6px rgba(var(--shadow-rgb),.10);position:relative;overflow:hidden;}
.pg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.pg.sel{outline:2px solid var(--accent);outline-offset:-2px;}
.pg[data-pageselect]{cursor:pointer;}
.pg .pgn{position:absolute;left:6px;bottom:6px;font-size:8.5px;font-family:var(--mono);color:var(--faint);
  background:rgba(var(--surface-rgb),.92);padding:1px 5px;border-radius:8px;border:1px solid var(--line);}
.pg .pgtag{position:absolute;right:4px;top:4px;font-size:8.5px;font-weight:700;font-family:var(--mono);
  background:var(--code-bg);color:var(--xl-head);border:1px solid var(--code-border);border-radius:8px;padding:1px 5px;cursor:pointer;}
.pg .pgtag.un{color:var(--faint);background:var(--uncoded-bg);border-style:dashed;font-family:var(--ui);}
.pg .pgtag:hover{border-color:var(--xl-head);color:var(--xl-head);}
.pg.add{border-style:dashed;box-shadow:none;background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  color:var(--faint);cursor:pointer;}
.pg.add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.pg.add svg{width:1.45em;height:1.45em;stroke:currentColor;fill:none;stroke-width:2;}

/* ONE compact dropzone at the bottom of the canvas (B-document-canvas recipe) */
.dropzone{border:1.6px dashed var(--line-strong);border-radius:10px;padding:10px;text-align:center;color:var(--faint);
  background:var(--surface);cursor:pointer;margin-top:10px;}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.dropzone svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;display:block;margin:0 auto 4px;}
.dropzone b{font-size:11.5px;font-weight:700;display:block;color:inherit;}
.dropzone small{font-size:10px;}

/* ===== 4. table.wt grid family — right pane, ALWAYS visible (ported, full) =====
   table-layout:fixed + the <colgroup> (grid.js colgroupHtml) gives every
   column type a defined share of the table width. table.wt carries an
   aggregate min-width (sum of the per-column-type floors below) so dragging
   the split divider narrower COMPRESSES all columns together, proportionally,
   right down to that floor — only past the floor does .wtwrap's own
   overflow:auto produce a horizontal scrollbar, scoped to this pane. */
.xlpane{min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);}
.wtwrap{flex:1;min-height:0;overflow:auto;background:var(--surface);}
table.wt{border-collapse:collapse;font-size:11.5px;color:var(--ink);white-space:nowrap;
  table-layout:fixed;width:100%;min-width:1120px;}
table.wt th,table.wt td{border:1px solid var(--line);}
/* per-column-type floors (px, sum == table.wt min-width above) expressed as
   percentages so columns shrink/grow together as the table's own width
   changes — Worker 108 · Trade 64 · Local 52 · Cost code 82 · Task 120 ·
   ST/OT 40×14=560 · Total Hrs 60 · Worker Total 70 */
.wt col.cwk{width:9.68%;}
.wt col.ctrade{width:5.74%;}
.wt col.clocal{width:4.66%;}
.wt col.ccode{width:7.35%;}
.wt col.cdesc{width:10.75%;}
.wt col.cst,.wt col.cot{width:3.58%;}
.wt col.ctot{width:5.38%;}
.wt col.cwktot{width:6.27%;}
.wt thead th{background:var(--xl-head);color:var(--onaccent);font-weight:700;padding:6px 8px;border-color:rgba(255,255,255,.22);
  position:sticky;top:0;z-index:2;}
.wt thead tr:nth-child(2) th{top:29px;}
.wt thead th.lbl{text-align:left;}
.wt thead th.day{text-align:center;font-family:var(--cond);letter-spacing:.02em;line-height:1.15;}
.wt thead th.sub{text-align:center;padding:4px;font-size:10.5px;}
.wt thead th.sub.ot{background:var(--xl-amber);}
.wt thead th.hl{box-shadow:inset 0 0 0 2px var(--highlight-ring);}
.wt tbody td{padding:5px 8px;vertical-align:top;background:var(--surface);}
.wt tr.zebra>td{background:var(--xl-zebra);}
.wt td.wk{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;}
.wt td.trade,.wt td.local{overflow:hidden;text-overflow:ellipsis;}
.wt td.local{font-family:var(--mono);}
.wt td.trade.e,.wt td.local.e{color:var(--xl-faint);font-weight:400;}
.wt td.code{font-family:var(--mono);font-weight:700;color:var(--xl-head);overflow:hidden;text-overflow:ellipsis;}
.wt td.desc{color:var(--muted);overflow:hidden;text-overflow:ellipsis;}
.wt td.h{text-align:center;padding:0;position:relative;}
.wt td.h.ot{background:var(--xl-otbg);}
.wt tr.zebra>td.h.ot{background:var(--xl-otbg);}
.wt input.hin{width:100%;min-width:0;border:0;background:transparent;text-align:center;font-family:var(--mono);font-size:11.5px;
  padding:6px 2px;outline:none;color:var(--ink);}
.wt input.hin::placeholder{color:var(--xl-faint);}
.wt input.hin:focus{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent);border-radius:3px;}
.wt input.hin.ot{color:var(--xl-ottx);font-weight:700;}
.wt input.hin.ot::placeholder{color:var(--xl-ot-faint);font-weight:400;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.wt td.tot{text-align:center;font-family:var(--mono);font-weight:600;}
.wt td.tot.e{color:var(--xl-faint);font-weight:400;}
.wt td.wktot{text-align:center;vertical-align:middle;font-family:var(--mono);font-weight:700;color:var(--review);}
.wt tr.addrow>td{background:var(--xl-add);}
.wt .lk{color:var(--muted);font-weight:600;cursor:pointer;background:none;border:none;font-size:11.5px;font-family:var(--ui);padding:2px 0;}
.wt .lk.accent{color:var(--accent);}
.wt .lk:hover{color:var(--ink);}
.uncchip{font-size:10px;font-weight:700;color:var(--attn);background:var(--attn-bg);border:1px dashed var(--attn-border);border-radius:20px;
  padding:3px 9px;cursor:pointer;font-family:var(--ui);}
.uncchip:hover{border-color:var(--attn);}
.wt tfoot td{background:var(--wt-foot-bg);border-top:2px solid var(--line-strong);font-weight:700;padding:6px 8px;position:sticky;bottom:0;}
.wt tfoot td.rlabel{text-align:right;color:var(--muted);}
.wt tfoot td.daytot{text-align:center;font-family:var(--mono);}
.wt tfoot td.daytot.e{color:var(--xl-faint);}
.wt tfoot td.daytot.ot{background:var(--xl-otbg);color:var(--xl-ottx);}
.wt tfoot td.grand{text-align:center;font-family:var(--mono);color:var(--review);}
@keyframes flashbg{0%{background:var(--flash-bg);}100%{background:transparent;}}
.wt td.flash{animation:flashbg 2s ease-out;}
.wt td.h.ot.flash{animation:flashbg 2s ease-out;}

/* -- grid toolbar: title + Columns (hide/show) button -- */
.wtbar{display:flex;align-items:center;gap:9px;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);flex:none;}
.wtbar .wtbartitle{font-family:var(--cond);font-size:13px;font-weight:700;color:var(--ink);}
.wtbar .spacer{margin-left:auto;}
.wtcolsbtn{border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer;
  font-family:var(--ui);font-size:11px;font-weight:700;padding:5px 11px;}
.wtcolsbtn:hover{color:var(--ink);border-color:var(--faint);}
.wtcolsbtn.has{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent);}

/* columns panel (rendered into #popover) — Airtable-style visibility switches */
.colpanel .colhead{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:4px 6px 7px;}
.colpanel .collist{list-style:none;display:flex;flex-direction:column;gap:2px;}
.colpanel .colrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12px;}
.colpanel .colrow b{color:var(--ink);font-weight:600;flex:1;}
.colpanel .colrow.lock b{color:var(--faint);}
.colpanel .colnote{font-size:10px;color:var(--faint);}
.coltoggle{width:30px;height:17px;border-radius:20px;border:none;cursor:pointer;background:var(--track-bg);position:relative;padding:0;flex:none;}
.coltoggle i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--surface);transition:left .12s;
  box-shadow:0 1px 3px rgba(var(--shadow-rgb),.3);}
.coltoggle.on{background:var(--ok);}
.coltoggle.on i{left:15px;}
.colpanel .colreset{display:block;margin:7px 6px 2px;color:var(--muted);font-size:11px;border:none;background:none;cursor:pointer;padding:0;}
.colpanel .colreset:hover{color:var(--accent);}

/* resize handle: invisible 7px strip straddling the label-column boundary */
.wt thead th.lbl{position:sticky;top:0;}
.wtresize{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:3;touch-action:none;}
.wtresize:hover,.wtresize.dragging{background:linear-gradient(90deg,transparent 3px,var(--accent) 3px,var(--accent) 5px,transparent 5px);}

/* trade/local override: value came from the sheet, not the ERP roster */
.wt td.trade.ov,.wt td.local.ov{background:var(--attn-bg);}
.ovmark{margin-left:4px;font-weight:700;color:var(--attn);cursor:help;}
.wt td.trade[data-tl],.wt td.local[data-tl]{cursor:context-menu;}

/* Saturday make-up advisory badge */
.cellmark.mu{font-size:7.5px;letter-spacing:.02em;color:var(--onaccent);background:var(--review);border-radius:6px;padding:1px 3px;top:1px;}

/* -- unified selection language (mock td.sel recipe: outline ring + soft wash,
      layered over the normal 1px cell borders — never border swaps) -- */
.wt td.sel{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft);}
.wt tr.zebra>td.h.sel,.wt td.h.ot.sel{background:var(--accent-soft);}
.wt td.dim,.wt th.dim{opacity:.55;}
.wt td.lowconf{background:var(--attn-bg);}
.wt tr.zebra>td.lowconf{background:var(--attn-bg);}
.cellmark{position:absolute;top:0;right:1px;font-size:8px;line-height:1;font-weight:700;color:var(--muted);}
.cellmark.conf{font-size:9px;color:var(--attn);}
.wt th .hsub{display:block;font-size:9px;opacity:.85;font-weight:400;}
.chip.paym-sm{font-size:9px;padding:0 4px;vertical-align:1px;}
.wt tr.unres>td{background:var(--rej-bg);}
.wt td.desc.unresnote{color:var(--rej);font-weight:600;}
.wt td.wtempty{padding:22px;text-align:center;color:var(--faint);}
/* card-flash pulse (flashPage) — outline overlay, zero layout shift */
@keyframes selpulse{0%{outline-color:var(--accent);}100%{outline-color:transparent;}}
.flashsel{outline:3px solid transparent;outline-offset:-1px;animation:selpulse 1.4s ease-out;}

/* ===== 5. sheet view: 7 day columns (A-sheet-view port).
   RULE: column state classes touch header background / column wash / opacity
   ONLY — never border width or style — so state changes cause zero layout
   shift (the "borders act weird" fix). ===== */
/* Sheet mode's own pane: panehead (carries the Sheet|Table|Layout seg, scoped
   to the left pane) above the 7-day .week grid. */
.sheetpane{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);}
.week{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,1fr);gap:0;}
.col{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0;}
.col:last-child{border-right:none;}
.col .ch{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-bottom:1px solid var(--line);
  background:var(--surface-2);flex:none;}
.col .dow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.col .dnum{font-family:var(--cond);font-size:15px;font-weight:700;}
.col.missing .ch{background:var(--rej-bg);}
.col.missing .dow{color:var(--rej);}
.col.missing{background:linear-gradient(180deg,rgba(var(--rej-rgb),.05),transparent 120px);}
/* A 5-6% rej wash reads fine on white but is nearly invisible on a near-black
   dark surface — bump the alpha (not the hue) for dark mode only. */
:root[data-theme="dark"] .daygrp.rejected{background:linear-gradient(180deg,rgba(var(--rej-rgb),.14),transparent 90px);}
:root[data-theme="dark"] .col.missing{background:linear-gradient(180deg,rgba(var(--rej-rgb),.12),transparent 120px);}
.col.today .ch{background:var(--accent-soft);}
.col.today .dow{color:var(--accent-ink);}
.col.future{opacity:.55;background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 8px,var(--canvas) 8px,var(--canvas) 16px);}
.col.wknd .ch{background:var(--canvas);}
.col.wknd .ch .dow{color:var(--faint);}
.col.wknd.empty .stack{opacity:.55;}
.col.dimcol{opacity:.45;transition:opacity .15s;}
.col .stack{flex:1;min-height:0;overflow:auto;padding:9px;display:flex;flex-direction:column;gap:8px;}
.col.dragover .stack{outline:2px dashed var(--accent);outline-offset:-4px;border-radius:8px;background:var(--accent-soft);}
.statusline{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
/* sheet card (A-sheet-view .sheet) */
.sheet{border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden;box-shadow:0 1px 2px rgba(var(--shadow-rgb),.05);
  cursor:pointer;flex:none;}
.sheet.sel{outline:2px solid var(--accent);outline-offset:-2px;}
.sheet .thumb{height:42px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:repeating-linear-gradient(180deg,var(--uncoded-bg),var(--uncoded-bg) 5px,var(--surface-2) 5px,var(--surface-2) 6px);}
.sheet .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.sheet .sbody{padding:7px 9px;}
.sheet .sname{font-size:12px;font-weight:700;color:var(--ink);}
.sheet .smeta{display:flex;align-items:center;gap:5px;margin-top:4px;flex-wrap:wrap;}
.scode{font-size:10px;color:var(--muted);font-family:var(--mono);}
/* compact per-column dropzone (A-sheet-view .drop) */
.drop{border:1.6px dashed var(--line-strong);border-radius:9px;padding:12px 8px;text-align:center;color:var(--faint);
  cursor:pointer;background:var(--surface-2);flex:none;}
.drop:hover,.drop.dragover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.drop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;display:block;margin:0 auto 4px;}
.drop b{font-size:11px;font-weight:700;display:block;color:inherit;}
.drop small{font-size:9.5px;}
.drop[data-locked]{opacity:.45;pointer-events:none;}
.missnote{font-size:10.5px;color:var(--rej);font-weight:600;}

/* sheet-zoom overlay: click a sheet card → it grows into a readable preview
   over the left pane; click outside / Escape collapses it back. */
.sheetzoom{position:fixed;z-index:250;background:var(--surface);border-radius:10px;overflow:hidden;
  box-shadow:0 24px 60px rgba(var(--shadow-rgb),.35);display:flex;flex-direction:column;
  transition:transform .18s ease-out,opacity .18s ease-out;transform-origin:top left;}
.sheetzoom img{flex:1;min-height:0;width:100%;object-fit:contain;background:var(--canvas);display:block;}
.sheetzoom .szmeta{flex:none;display:flex;align-items:center;gap:9px;padding:8px 12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);background:var(--surface);}
.sheetzoom .szmeta b{color:var(--ink);}
.sheetzoom .szclose{margin-left:auto;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--surface);
  cursor:pointer;color:var(--faint);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;}
.sheetzoom .szclose:hover{color:var(--ink);border-color:var(--line-strong);}

/* ===== 6. layout view: pdfx-style two-axis zoom/pan canvas (ported) ===== */
.lpane{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--canvas);}
.ltools{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);flex:none;}
.ltools .zbtn{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;cursor:pointer;
  color:var(--muted);font-weight:700;font-size:14px;}
.ltools .zbtn:hover{color:var(--ink);border-color:var(--faint);}
.ltools .zbtn.zfit{width:auto;padding:0 9px;font-size:11px;}
.lempty{color:var(--faint);font-size:13px;padding:40px;}
.ltools .lhint{font-size:10.5px;color:var(--muted);margin-left:6px;}
.ltools .spacer{margin-left:auto;}
.lviewport{flex:1;min-height:0;overflow:hidden;position:relative;cursor:grab;}
.lviewport.panning{cursor:grabbing;}
.lviewport.dragover{outline:3px dashed var(--accent);outline-offset:-6px;}
.lworld{position:absolute;left:0;top:0;transform-origin:0 0;width:max-content;padding:30px 40px;}
.lrow{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px;padding:10px;border-radius:12px;border:1.5px dashed transparent;}
.lrow.dragover{border-color:var(--accent);background:rgba(var(--accent-soft-rgb),.6);}
/* selected page's day row — color/style swap on the constant 1.5px border, zero shift */
.lrow.sel{border-color:var(--accent);border-style:solid;background:rgba(var(--accent-soft-rgb),.35);}
.lmeta{flex:none;width:150px;background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:9px 10px;
  box-shadow:0 2px 8px rgba(var(--shadow-rgb),.10);display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.lmeta .lname{font-family:var(--cond);font-weight:700;font-size:13px;}
.lmeta .lsub{font-size:10.5px;color:var(--muted);font-family:var(--mono);}
.lmeta .lbtns{display:flex;gap:4px;margin-top:2px;}
.lmeta .lbtns button{width:22px;height:22px;border:1px solid var(--line);background:var(--surface);border-radius:6px;cursor:pointer;
  color:var(--faint);display:flex;align-items:center;justify-content:center;}
.lmeta .lbtns button:hover{color:var(--ink);border-color:var(--line-strong);}
.lmeta .lbtns svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;}
.lpages{display:flex;gap:12px;}
/* Landscape sheet-photo ratio (see .pg above) — width kept aligned with
   .lmeta's 150px card so the collage row stays tidy, height brought down
   to match instead of stretching the photo tall. */
.lpg{flex:none;width:150px;height:116px;background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;
  box-shadow:0 4px 12px rgba(var(--shadow-rgb),.14);position:relative;overflow:hidden;}
.lpg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.lpg.sel{outline:2px solid var(--accent);outline-offset:-2px;}
.lpg .pgn{position:absolute;left:8px;bottom:8px;font-size:9.5px;font-family:var(--mono);color:var(--faint);
  background:rgba(var(--surface-rgb),.92);padding:1px 6px;border-radius:8px;border:1px solid var(--line);}
.lpg .pgtag{position:absolute;right:6px;top:6px;font-size:9.5px;font-weight:700;font-family:var(--mono);
  background:var(--code-bg);color:var(--xl-head);border:1px solid var(--code-border);border-radius:8px;padding:2px 6px;cursor:pointer;}
.lpg .pgtag.un{color:var(--faint);background:var(--uncoded-bg);border-style:dashed;font-family:var(--ui);}
.lpg.add{border-style:dashed;box-shadow:none;background:rgba(var(--surface-rgb),.6);display:flex;align-items:center;justify-content:center;
  color:var(--faint);cursor:pointer;}
.lpg.add:hover{border-color:var(--accent);color:var(--accent);}
.lpg.add svg{width:1.6em;height:1.6em;stroke:currentColor;fill:none;stroke-width:2;}

/* ===== 7. popover picker (ported) ===== */
/* z-index 500: pickers must layer ABOVE the modal (350) — the add-crew modal
   opens the cost-code picker from inside itself. */
#popover{position:fixed;z-index:500;width:264px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:0 14px 34px rgba(var(--shadow-rgb),.22);padding:7px;}
#popover .pin{width:100%;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:12px;font-family:var(--ui);outline:none;
  background:var(--surface);color:var(--ink);}
#popover .pin:focus{border-color:var(--accent);}
#popover .plist{list-style:none;max-height:216px;overflow:auto;margin-top:5px;}
#popover .plist li{padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:baseline;gap:8px;font-size:12px;}
#popover .plist li b{font-family:var(--mono);font-size:11.5px;color:var(--xl-head);}
#popover .plist li span{color:var(--muted);font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#popover .plist li.hi,#popover .plist li:hover{background:var(--accent-soft);}
#popover .plist li.none{color:var(--faint);cursor:default;}
#popover .plist li.none:hover{background:none;}
#popover .plist li.free{color:var(--accent);font-weight:600;}
#popover[hidden]{display:none;}

/* ===== 8. toasts + modal (ported) ===== */
#toasts{position:fixed;top:18px;right:18px;z-index:400;display:flex;flex-direction:column;gap:8px;width:320px;}
.toast{background:var(--sidebar-2);color:var(--ondark-hover);border-radius:10px;padding:10px 14px;font-size:12px;line-height:1.45;
  box-shadow:0 10px 26px rgba(var(--shadow-rgb),.35);animation:tin .22s ease-out;border-left:3px solid var(--accent);}
.toast.ok{border-left-color:var(--ok);}
.toast.warn{border-left-color:var(--attn);}
@keyframes tin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

#modalwrap{position:fixed;inset:0;z-index:350;background:rgba(var(--shadow-rgb),.45);display:flex;align-items:center;justify-content:center;}
#modalwrap[hidden]{display:none;}
.modal{width:430px;background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(var(--shadow-rgb),.35);padding:20px 22px;}
.modal h3{font-family:var(--cond);font-size:18px;font-weight:700;margin-bottom:4px;}
.modal .msub{font-size:12px;color:var(--muted);margin-bottom:14px;}
.modal .mrow{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 2px;border-bottom:1px solid var(--line);}
.modal .mrow b{font-family:var(--mono);}
.modal .mwarn{margin-top:10px;font-size:11.5px;color:var(--attn);background:var(--attn-bg);border-radius:8px;padding:8px 10px;}
.modal .mwarn.merr{color:var(--rej);background:var(--rej-bg);}
.modal .mrow input.min{border:1px solid var(--line-strong);border-radius:6px;padding:4px 7px;width:130px;
  background:var(--surface);color:var(--ink);}
.modal .mrow input.min.mono{font-family:var(--mono);}
.modal .mrow input.min.ctr{width:70px;text-align:center;}
.modal .mconf{margin-top:14px;font-size:11.5px;color:var(--muted);}
.modal .mconf input{width:100%;margin-top:6px;border:1px solid var(--line-strong);border-radius:8px;padding:9px 11px;
  font-family:var(--mono);font-size:13px;outline:none;background:var(--surface);color:var(--ink);}
.modal .mconf input:focus{border-color:var(--accent);}
.modal .mbtns{display:flex;justify-content:flex-end;gap:9px;margin-top:16px;}
.modal.wide{width:520px;}

/* -- crew builder (jobweek openAddCrew) -- */
.crewsaved{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:9px 11px;margin-bottom:12px;}
.crewsavedhead{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.crewrow{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12px;}
.crewrow b{color:var(--ink);}
.crewrow span{color:var(--muted);font-size:11px;flex:1;}
.crewrow .btn{padding:4px 10px;font-size:11px;}
.crewpickwrap{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.crewfilter{width:100%;border:none;border-bottom:1px solid var(--line);padding:8px 11px;font-size:12px;font-family:var(--ui);
  outline:none;background:var(--surface);color:var(--ink);}
.crewlist{max-height:200px;overflow:auto;display:flex;flex-direction:column;}
.crewpick{display:flex;align-items:center;gap:9px;padding:6px 11px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--line);}
.crewpick:last-child{border-bottom:none;}
.crewpick:hover{background:var(--surface-2);}
.crewpick.on{background:var(--accent-soft);}
.crewpick b{color:var(--ink);font-weight:600;}
.crewpick span{color:var(--muted);font-size:10.5px;margin-left:auto;font-family:var(--mono);}
.crewnone{padding:14px;color:var(--faint);font-size:12px;}
.crewcount{padding:6px 11px;font-size:10.5px;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line);font-family:var(--mono);}
.crewsavechk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:12px;cursor:pointer;}
/* crew source selector (read-sheet vs manual) */
.crewsrc{margin-top:14px;}
.crewsrchead{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;}
.crewsrcbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.crewsrcbtn{border:1.5px solid var(--line-strong);border-radius:11px;background:var(--surface);cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;font-family:var(--ui);text-align:left;}
.crewsrcbtn b{font-size:13px;color:var(--ink);}
.crewsrcbtn span{font-size:10.5px;color:var(--muted);}
.crewsrcbtn:hover{border-color:var(--accent);}
.crewsrcbtn.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);}
.crewsrcbtn.on b{color:var(--accent-ink);}
#cwSheet,#cwManual{margin-top:12px;}
.crewdrop{width:100%;border:1.6px dashed var(--line-strong);border-radius:10px;background:var(--surface-2);cursor:pointer;
  color:var(--muted);font-family:var(--ui);font-size:12.5px;font-weight:600;padding:16px;text-align:center;}
.crewdrop:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.crewfilename{font-size:11.5px;color:var(--accent-ink);font-family:var(--mono);margin-top:7px;min-height:14px;}
.crewsheetnote{font-size:11px;color:var(--muted);line-height:1.5;margin-top:9px;
  border-left:2px solid var(--accent);padding-left:10px;}

/* ===== 9. new minimal styles ===== */

/* generic status chip family (Due/Under Review/Rejected/Approved + sim-date + misc) */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:20px;
  white-space:nowrap;}
.chip.due{color:var(--attn);background:var(--attn-bg);}
.chip.review{color:var(--review);background:var(--review-bg);}
.chip.rej{color:var(--rej);background:var(--rej-bg);}
.chip.ok{color:var(--ok);background:var(--ok-bg);}
.chip.manual{color:var(--muted);background:var(--bg);font-family:var(--mono);}
.chip.paymaster{color:var(--xl-amber);background:var(--attn-bg);}

/* -- login card -- */
.loginwrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px;}
.logintheme{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;
  font-size:15px;display:flex;align-items:center;justify-content:center;}
.logintheme:hover{border-color:var(--accent);}
.logincard{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 18px 44px rgba(var(--shadow-rgb),.14);padding:28px 26px;display:flex;flex-direction:column;gap:14px;}
.logincard .logo{font-family:var(--cond);font-weight:700;font-size:20px;color:var(--accent);}
.logincard h1{font-family:var(--cond);font-size:20px;font-weight:700;color:var(--ink);}
.loginsub{font-size:12.5px;color:var(--muted);margin-top:-8px;}
.lfield{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted);}
.lfield input{border:1px solid var(--line-strong);border-radius:8px;padding:9px 11px;font-size:13px;font-family:var(--ui);
  color:var(--ink);outline:none;background:var(--surface);}
.lfield input:focus{border-color:var(--accent);}
.loginerr{font-size:11.5px;color:var(--rej);background:var(--rej-bg);border-radius:8px;padding:8px 10px;}
.loginnotice{font-size:11.5px;color:var(--review);background:var(--review-bg);border-radius:8px;padding:8px 10px;}
.loginbtn{justify-content:center;width:100%;}

/* -- error hero: the one full-screen "unexpected stop" panel (ui.js errorHero) -- */
.errhero{position:fixed;inset:0;z-index:600;background:rgba(var(--shadow-rgb),.52);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.ehcard{width:min(480px,100%);background:var(--surface);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(var(--shadow-rgb),.4);padding:0 0 22px;}
.ehrule{height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));}
.ehkicker{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:18px 24px 0;}
.ehtitle{font-family:var(--cond);font-size:24px;font-weight:700;color:var(--ink);padding:6px 24px 0;line-height:1.15;}
.ehsub{font-size:12.5px;line-height:1.55;color:var(--muted);padding:8px 24px 0;}
.ehdetail{margin:14px 24px 0;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  padding:9px 12px;font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-word;}
.ehdetail span{display:block;font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px;}
.ehbtns{display:flex;gap:9px;justify-content:flex-end;padding:18px 24px 0;}

/* -- add-timesheet chooser: full-screen pop-out over a blurred app -- */
.atsoverlay{position:fixed;inset:0;z-index:340;background:rgba(var(--shadow-rgb),.42);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:26px;}
.atspanel{width:min(680px,100%);max-height:calc(100vh - 60px);overflow:auto;background:var(--surface);
  border-radius:16px;box-shadow:0 30px 80px rgba(var(--shadow-rgb),.4);padding:22px 24px;}
.atshead{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.atshead h2{font-family:var(--cond);font-size:20px;font-weight:700;color:var(--ink);}
.atshead .sub{font-size:12px;color:var(--muted);}
.atsclose{margin-left:auto;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  cursor:pointer;color:var(--faint);font-size:13px;line-height:1;align-self:center;}
.atsclose:hover{color:var(--ink);border-color:var(--line-strong);}
.atsjobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:18px;}
.atsjob{border:1.5px solid var(--line-strong);border-radius:11px;background:var(--surface-2);cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;font-family:var(--ui);text-align:left;}
.atsjob b{font-size:13.5px;color:var(--ink);}
.atsjob span{font-family:var(--mono);font-size:10.5px;color:var(--faint);}
.atsjob:hover{border-color:var(--accent);}
.atsjob.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);}
.atsjob.on b{color:var(--accent-ink);}
.atscal.disabled{opacity:.45;pointer-events:none;}
.atsweeknav{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.atsweeknav .lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;}
.atsweeknav b{font-family:var(--mono);font-size:12.5px;}
.atsweeknav button:not(.atsallwk){width:26px;height:26px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);
  cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;}
.atsweeknav button:not(.atsallwk):hover{border-color:var(--accent);color:var(--accent);}
.atsweeknav button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;}
.atsweeknav .push{margin-left:auto;}
.atsdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.atsday{border:1.5px solid var(--line-strong);border-radius:11px;background:var(--surface);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 4px;font-family:var(--ui);position:relative;}
.atsday .dow{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.atsday .dnum{font-family:var(--cond);font-size:17px;font-weight:700;color:var(--ink);}
.atsday .tdy{font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);}
.atsday:hover{border-color:var(--accent);background:var(--accent-soft);}
.atsday.wknd{background:var(--canvas);}
.atsday.wknd .dow{color:var(--faint);}
.atsday.future{opacity:.55;}
.atsday.today{border-color:var(--accent);}
/* in-modal upload progress */
.atsbusy{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;text-align:center;}
.atsbusy b{font-family:var(--cond);font-size:16px;color:var(--ink);}
.atsbusy span{font-size:12px;color:var(--muted);max-width:380px;line-height:1.5;}
.atsspin,.busyspin{width:26px;height:26px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);
  animation:busyspin .8s linear infinite;flex:none;}
.busyspin.lg{width:34px;height:34px;border-width:3.5px;}
@keyframes busyspin{to{transform:rotate(360deg);}}
/* full-screen busy veil for long uploads outside the add-timesheet modal —
   centered card over a blurred page (matches the add-timesheet in-modal busy) */
.busyveil{position:fixed;inset:0;z-index:550;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--shadow-rgb),.46);backdrop-filter:blur(5px);padding:26px;}
.busycard{width:min(440px,100%);background:var(--surface);border-radius:16px;
  box-shadow:0 30px 80px rgba(var(--shadow-rgb),.42);padding:36px 28px;display:flex;flex-direction:column;
  align-items:center;gap:13px;text-align:center;}
.busycard b{font-family:var(--cond);font-size:18px;color:var(--ink);word-break:break-word;}
.busycard span{font-size:12.5px;color:var(--muted);line-height:1.55;max-width:340px;}

/* -- dashboard (.dash scope) — ported verbatim from navillus-timesheet-dashboard.html.
   Mock's generic .chip / .grid renamed .dchip / .calgrid to avoid app-wide collisions. -- */
.dash{flex:1;min-height:0;display:flex;flex-direction:column;}
.dash .main-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;}
.dash .section{padding:20px 28px;}
.dash .section + .section{border-top:1px solid var(--line);}
.dash .s-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;}
.dash .s-head h2{font-family:var(--cond);font-size:19px;font-weight:700;letter-spacing:.01em;
  position:relative;padding-bottom:5px;}
.dash .s-head h2::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.5px;background:var(--accent);border-radius:2px;}
.dash .s-head .sub{font-size:12px;color:var(--muted);}

.dash .jobs{display:flex;gap:14px;}
.dash .job{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;background:var(--surface-2);display:flex;flex-direction:column;gap:9px;position:relative;cursor:pointer;}
.dash .job:hover{border-color:var(--line-strong);box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08);}
.dash .job .top{display:flex;align-items:center;justify-content:space-between;}
.dash .job .jname{font-weight:700;font-size:14.5px;color:var(--ink);}
.dash .job .jno{font-family:var(--mono);font-size:11px;color:var(--faint);}
.dash .job .roles{display:flex;gap:6px;flex-wrap:wrap;}
.dash .tag{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:3px 8px;border-radius:20px;background:var(--tag-bg);color:var(--tag-ink);}
.dash .tag.pm{background:var(--accent-soft);color:var(--accent-ink);}
.dash .job .bar{height:5px;border-radius:4px;background:var(--track-bg);overflow:hidden;margin-top:1px;}
.dash .job .bar > i{display:block;height:100%;border-radius:4px;background:var(--ok);}
.dash .job .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);}
.dash .job.add{align-items:center;justify-content:center;flex:none;width:52px;
  border-style:dashed;color:var(--faint);cursor:pointer;background:var(--surface);}
.dash .job.add span{font-size:26px;line-height:1;color:var(--accent);}

.dash .ov{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;}
.dash .due{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));margin-bottom:16px;}
.dash .due .lbl{font-size:13.5px;color:var(--muted);font-weight:500;}
.dash .due .lbl b{color:var(--ink);font-weight:700;}
.dash .due .num{font-family:var(--cond);font-weight:700;font-size:30px;color:var(--accent);line-height:1;}
.dash .due .push{margin-left:auto;font-size:11.5px;color:var(--muted);}
.dash .due .push b{color:var(--rej);}
.dash .ts-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:9px;}
.dash .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
.dash .stat{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:var(--surface);position:relative;overflow:hidden;}
.dash .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;}
.dash .stat.ok::before{background:var(--ok);}
.dash .stat.review::before{background:var(--review);}
.dash .stat.attn::before{background:var(--attn);}
.dash .stat.rej::before{background:var(--rej);}
.dash .stat .k{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted);}
.dash .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.dash .stat.ok .dot{background:var(--ok);} .dash .stat.review .dot{background:var(--review);}
.dash .stat.attn .dot{background:var(--attn);} .dash .stat.rej .dot{background:var(--rej);}
.dash .stat .v{font-family:var(--cond);font-weight:700;font-size:30px;line-height:1;margin-top:8px;}
.dash .stat.ok .v{color:var(--ok);} .dash .stat.review .v{color:var(--review);}
.dash .stat.attn .v{color:var(--attn);} .dash .stat.rej .v{color:var(--rej);}
.dash .submitted{margin-top:14px;display:flex;align-items:center;gap:14px;
  padding:11px 16px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);}
.dash .submitted .lbl{font-size:13px;color:var(--muted);font-weight:600;}
.dash .submitted .track{flex:1;height:9px;border-radius:6px;background:var(--track-bg);overflow:hidden;}
.dash .submitted .track > i{display:block;height:100%;background:var(--ok);border-radius:6px;}
.dash .submitted .val{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:700;white-space:nowrap;}
/* -- job-view mini month: week rows with an "All week" opener at left -- */
.dash .month{display:flex;flex-direction:column;gap:10px;}
.dash .mrow2{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:stretch;}
.dash .allwk{border:1px solid var(--line-strong);border-radius:11px;background:var(--surface-2);cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:10px 12px;font-family:var(--ui);}
.dash .allwk .cap{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;}
.dash .allwk b{font-family:var(--mono);font-size:12px;color:var(--ink);}
.dash .allwk:hover{border-color:var(--accent);background:var(--accent-soft);}
.dash .allwk:hover b{color:var(--accent-ink);}
.dash .mdays{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:11px;overflow:hidden;}
.dash .mday{border-right:1px solid var(--line);min-height:74px;display:flex;flex-direction:column;background:var(--surface);cursor:pointer;position:relative;}
.dash .mday:last-child{border-right:none;}
.dash .mday:hover{background:var(--surface-2);}
.dash .mday .mdh{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.dash .mday .dow{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.dash .mday .dnum{font-family:var(--cond);font-size:13px;font-weight:700;color:var(--ink);}
.dash .mday .mbody{flex:1;padding:6px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.dash .mday.wknd{cursor:default;}
.dash .mday.wknd .mdh{background:var(--canvas);}
.dash .mday.wknd .dow{color:var(--faint);}
.dash .mday.future{opacity:.6;}
.dash .mday.today{box-shadow:inset 0 0 0 2px var(--accent);}
.dash .mday.today .mdh{background:var(--accent-soft);}
.dash .mact{border:1.6px dashed var(--line-strong);border-radius:20px;background:var(--surface);color:var(--faint);
  cursor:pointer;font-size:9.5px;font-weight:700;padding:3px 9px;font-family:var(--ui);opacity:0;transition:opacity .12s;}
.dash .mday.wknd:hover .mact{opacity:1;}
.dash .mact:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

.dash .cal-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.dash .cal-head h2{font-family:var(--cond);font-size:19px;font-weight:700;position:relative;padding-bottom:5px;}
.dash .cal-head h2::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.5px;background:var(--accent);border-radius:2px;}
.dash .week-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1px solid var(--line-strong);
  border-radius:30px;font-size:12.5px;color:var(--ink);background:var(--surface);}
.dash .week-pill .cap{color:var(--muted);}
.dash .week-pill b{font-family:var(--mono);letter-spacing:.02em;}
.dash .weeknav{margin-left:auto;display:flex;align-items:center;gap:6px;}
.dash .weeknav button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dash .weeknav button:hover{border-color:var(--accent);color:var(--accent);}
.dash .weeknav button[disabled]{opacity:.35;cursor:default;}
.dash .weeknav button[disabled]:hover{border-color:var(--line-strong);color:var(--ink);}
.dash .weeknav .txt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:0 3px;}
.dash .weeknav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;}

.dash .calgrid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:11px;overflow:hidden;}
.dash .day{border-right:1px solid var(--line);min-height:118px;display:flex;flex-direction:column;background:var(--surface);}
.dash .day:last-child{border-right:none;}
.dash .day .dh{display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.dash .day .dow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.dash .day .dnum{font-family:var(--cond);font-size:15px;font-weight:700;color:var(--ink);}
.dash .day.wknd .dh{background:var(--canvas);}
.dash .day.wknd .dow{color:var(--faint);}
.dash .day .body{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px;}
.dash .dchip{font-size:10.5px;font-weight:600;border-radius:6px;padding:5px 7px;line-height:1.2;}
.dash .dchip.ok{background:var(--ok-bg);color:var(--dchip-ok-ink);}
.dash .dchip.review{background:var(--review-bg);color:var(--dchip-review-ink);}
.dash .dchip.attn{background:var(--attn-bg);color:var(--dchip-attn-ink);}
.dash .dchip.rej{background:var(--rej-bg);color:var(--dchip-rej-ink);}
.dash .dchip .n{float:right;font-family:var(--mono);opacity:.85;}
.dash .day.today{box-shadow:inset 0 0 0 2px var(--accent);}
.dash .day.today .dh{background:var(--accent-soft);}
.dash .day.today .dow{color:var(--accent-ink);}

/* -- unassigned-pages tray: rendered only when pages wait (auto-hides when all
   are filed). A clear amber "needs filing" strip — noticeable but not a heavy
   slab; full margins so it never touches the panes above/below. -- */
.tray{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:8px 12px;margin:10px 22px;
  border:1px solid var(--attn-border);border-radius:11px;background:var(--attn-bg);flex:none;}
.tray.dragover{border-color:var(--accent);}
.tray .traylabel{flex:none;font-size:10.5px;color:var(--attn);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;width:84px;line-height:1.35;}
.tray .pg{width:76px;height:59px;cursor:grab;}
.tray .pg .pgn{display:none;}
.tray .trayright{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}

/* -- workforce table: Airtable-ish — right-aligned mono numbers, quiet zeros,
   job chips, sticky header, zebra, skeleton load -- */
.wftable td{vertical-align:middle;}
.wftable .wfr,.wftable th.wfr{text-align:right;}
.wfnum{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);}
.wfmono{font-family:var(--mono);color:var(--muted);}
.wfz{color:var(--faint);}
.wfname b{font-weight:700;}
.wftable tbody tr:nth-child(even) td{background:var(--surface-2);}
.wfjobs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.wfjob{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--xl-head);background:var(--code-bg);
  border:1px solid var(--code-border);border-radius:6px;padding:1px 6px;white-space:nowrap;}
.wfjob.more{color:var(--muted);background:var(--bg);border-style:dashed;cursor:help;}
.wfskel td{padding:11px 10px;}
.skel{display:inline-block;height:11px;border-radius:4px;background:linear-gradient(90deg,var(--line) 25%,var(--surface-2) 37%,var(--line) 63%);
  background-size:400% 100%;animation:skelshimmer 1.3s ease-in-out infinite;}
@keyframes skelshimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* -- event-log table -- */
.evtable{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface);}
.evtable th{background:var(--surface-2);text-align:left;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--line-strong);position:sticky;top:0;}
.evtable td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
.evtable tr:hover td{background:var(--surface-2);}
.evtable .evwhen{font-family:var(--mono);color:var(--muted);white-space:nowrap;}
.evtable .evaction{font-weight:700;color:var(--xl-head);}
.evfilters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.evinput{border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:var(--ui);
  min-width:150px;outline:none;background:var(--surface);color:var(--ink);}
.evinput:focus{border-color:var(--accent);}
/* settings-table inline edit variant: cell-sized, no 150px floor */
.evinput.setin{min-width:0;padding:5px 8px;font-size:11.5px;}
/* one-click payroll verification of a rate row */
.vfybtn{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--surface);
  cursor:pointer;color:var(--onaccent);font-size:12px;line-height:1;padding:0;}
.vfybtn:hover{border-color:var(--ok);}
.vfybtn.on{background:var(--ok);border-color:var(--ok);}
.evtable tr.vfyrow td{background:var(--ok-bg);}
/* disabled/legacy standing adjustment row */
.evtable tr.adjoff td{opacity:.5;}
/* pay-category usage footnote row */
.evtable tr.ptusage td{border-top:none;padding-top:0;padding-bottom:6px;}

/* -- walkthrough two-pane layout -- */
.wkthru{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;}
.wkthru .wksheet{border-right:1px solid var(--line);min-height:0;overflow:auto;background:var(--canvas);position:relative;}
.wkthru .wklines{min-height:0;overflow:auto;background:var(--surface);padding:14px;}
.wkthru-nav{display:flex;gap:6px;}

/* ===== 10. footnote bar (jobber.html / A-sheet-view) ===== */
.footnote{flex:none;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);background:var(--surface-2);
  padding:8px 22px;font-size:11px;color:var(--muted);}
.footnote svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;}
.footnote .lg{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-left:14px;}
.footnote .swatch{width:11px;height:11px;border-radius:3px;border:1px solid var(--rej);background:var(--rej-bg);flex:none;}
.footnote .brand{font-family:var(--cond);font-weight:700;color:var(--faint);letter-spacing:.06em;margin-left:auto;}