/* Crew prototype — dark "hub" theme (and a light one: :root[data-theme="light"], at the end). Content sits in charcoal glass panels over a photo (or
   gradient) background; blue carries rules, headings and accents; red / green / amber mean
   short / on track / pending. Background and logo come from SITE.theme (site.js). */
:root{
  --bg:#070b0f; --bg-image:none;
  --panel:rgba(18,20,24,.9); --cell:rgba(var(--tint),.025); --soft:rgba(var(--tint),.045);
  --fg:#eef3fb; --muted:#a7b4c6; --line:rgba(var(--tint),.09); --line-2:rgba(var(--tint),.16);
  --black:#1a1a1a; --gold:#3b8cff; --gold-rule:#2c6fe0; --gold-dk:#1d5bd0; --gold-ink:#8ec2ff; --gold-hi:#4d97ff; --gold-hi2:#6aabff;
  --warn:#f0645a; --warn-soft:rgba(240,100,90,.14); --ok:#4cc27a; --ok-soft:rgba(76,194,122,.14);
  --pend:#e8b030; --pend-ink:#f6d27a; --pend-bg:rgba(232,176,48,.16); --sel:#6aa8ff;
  /* what flips with the theme: tints laid over the page (--tint), darkening behind fields (--shade), the strongest text,
     the color job and accent tints are mixed toward, and the solid surfaces under sticky table headers */
  --tint:255,255,255; --shade:0,0,0; --fg-strong:#fff; --mixhi:#fff;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* page width: 1280 on laptops, growing with big monitors instead of leaving a narrow strip */
  --maxw:clamp(1280px,92vw,2240px);
  /* the sticky header's height (app.js measures it), for what sticks just under it; 0 where it doesn't stick */
  --hdr:var(--bandh,190px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
/* type scale: the browser's size up to ~1440px wide, then a little larger with the screen (18px at 1920, 20px max) */
html{background:var(--bg);font-size:clamp(1rem,.625rem + .42vw,1.25rem)}
body{color:var(--fg);font-family:var(--body);font-size:1rem;line-height:1.5;padding-bottom:env(safe-area-inset-bottom,0px);min-height:100vh;
  background:var(--overlay),var(--bg-image),var(--bg);background-size:cover;background-position:center;background-attachment:fixed}
body.nobg{background:var(--fallback),var(--bg);background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line-2);background:var(--soft);border-radius:9px;padding:7px 12px;min-height:36px;color:var(--fg)}
button:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:rgba(59,140,255,.08)}
button.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold-dk));color:#ffffff;border-color:var(--gold-rule);font-weight:800}
button.primary:hover{background:linear-gradient(180deg,var(--gold-hi2),var(--gold-rule))}
button.danger{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
button.small{padding:3px 9px;min-height:28px;font-size:.84rem}
/* a file picker that looks like a button (a label around a hidden input) */
label.btnlike{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);background:var(--soft);border-radius:9px;padding:7px 12px;min-height:36px;color:var(--fg);font-weight:400}
label.btnlike:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:rgba(59,140,255,.08)}
label.btnlike.small{padding:3px 9px;min-height:28px;font-size:.84rem}
label.btnlike.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold-dk));color:#ffffff;border-color:var(--gold-rule);font-weight:800}
button:disabled{opacity:.4;cursor:not-allowed}
input,select,textarea{border:1px solid var(--line-2);background:rgba(var(--shade),.35);border-radius:8px;padding:6px 8px;min-height:36px;max-width:100%}
select option{background:var(--sfc,#1b1d22);color:var(--fg)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(59,140,255,.2)}
textarea{min-height:60px;width:100%}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;accent-color:var(--gold)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8)}
:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.01em}
h2{font-size:1.3rem;color:var(--fg-strong)}
.eyebrow{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
.muted{color:var(--muted)} .small{font-size:.875rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- header ---------- */
/* the header as a pane of glass, like the sign-in card: the facade shows through as it scrolls under it */
.band{background:linear-gradient(180deg,rgba(var(--tint),.13),rgba(140,190,255,.06) 55%,rgba(8,18,36,.30));border-bottom:1px solid rgba(110,170,255,.75);padding-top:env(safe-area-inset-top,0px);position:sticky;top:0;z-index:16;-webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 28px rgba(0,0,0,.35)}
.band .inner{max-width:var(--maxw);margin:0 auto;padding:12px 16px 8px;display:flex;flex-direction:column;gap:8px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{height:2.75rem;width:auto;flex:none}
.bcbrand{display:flex;align-items:center;gap:9px;flex:none}
.bcmark{width:2.5rem;height:2.5rem;border-radius:10px;box-shadow:0 0 0 1px rgba(59,140,255,.35),0 0 18px rgba(34,211,255,.18)}
.wordmark{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:.02em;color:var(--fg-strong);flex:none}
.wordmark b{font-weight:800;background:linear-gradient(90deg,#2f7bff,#22d3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.appname{border-left:1px solid var(--line-2);padding-left:14px;min-width:0}
.appname .eyebrow{color:var(--muted);letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand h1{color:var(--fg-strong);font-size:1.45rem;line-height:1.05}
.clock{margin-left:auto;font-family:var(--display);font-weight:700;color:var(--gold-ink);font-size:.95rem;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.whobar{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.whobar label{display:flex;gap:6px;align-items:center}
.whobar select{min-height:32px;padding:3px 6px;font-weight:700;color:var(--fg-strong)}
.whobar .caps{font-size:.74rem;color:var(--muted)}
.proto{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(59,140,255,.4);border-radius:999px;padding:2px 9px;white-space:nowrap}
.ghost{min-height:32px;padding:4px 10px;font-size:.8rem}
.tabs{display:flex;gap:2px;max-width:var(--maxw);margin:0 auto;padding:0 12px;overflow-x:auto}
.tabs button{border:0;border-radius:0;background:transparent;color:var(--muted);font-family:var(--display);font-weight:700;padding:9px 14px 10px;min-height:42px;display:flex;align-items:center;gap:7px;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--fg-strong);background:rgba(var(--tint),.04)}
.tabs button[aria-selected="true"]{color:var(--gold-ink);border-bottom-color:var(--gold)}
.tabs svg{width:18px;height:18px;flex:none}
.tabs .tsh{display:none}
.tabs .badge{background:var(--warn);color:#fff;border-radius:999px;font-size:.66rem;padding:0 6px;line-height:16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:18px 16px 60px;display:flex;flex-direction:column;gap:18px;outline:none}

/* ---------- toolbars ---------- */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bar h2{margin-right:6px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:rgba(var(--shade),.35)}
.seg button{border:0;border-radius:0;min-height:34px;background:transparent}
.seg button[aria-pressed="true"]{background:var(--gold);color:#ffffff;font-weight:800}

/* ---------- job chips (job colors stay as bars and tints so they read on dark) ---------- */
.jchip{--c:#4f8ff7;display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 14%,rgba(var(--shade),.3));border-left:5px solid var(--c);border-radius:9px;padding:5px 9px;font-weight:700;font-size:.86rem;cursor:grab;user-select:none;min-height:36px;text-align:left;color:var(--fg)}
.jchip:hover{background:color-mix(in srgb,var(--c) 24%,rgba(var(--shade),.3));border-color:color-mix(in srgb,var(--c) 65%,transparent)}
.jchip .code{font-family:var(--display);font-weight:800;color:color-mix(in srgb,var(--c) 60%,var(--mixhi));flex:none}
.jchip{max-width:100%}
.jchip .nm{font-weight:400;font-size:.8rem;color:var(--muted);max-width:10.5rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jchip.armed{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(59,140,255,.35);background:color-mix(in srgb,var(--c) 30%,rgba(var(--shade),.3))}
.jchip.drop{box-shadow:0 0 0 2px var(--ok)}
.jchip .flag{color:var(--warn)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--c);vertical-align:-1px;margin-right:4px}

/* ---------- week board ---------- */
.board-wrap{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:14px;align-items:start}
.palette{padding:12px;display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(var(--hdr) + 12px)}
.palette .chips{display:flex;flex-direction:column;gap:6px}
.palette .others{max-height:16rem;overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px}
.palette .others .jchip{min-height:30px;padding:3px 8px;font-size:.8rem}
.palette input[type=search]{width:100%}
.hint{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.hint b{color:var(--gold-ink)}
.gridcard{padding:0;overflow:hidden}
.gridscroll{overflow:auto;max-height:calc(100vh - var(--hdr) - 24px)}
table.board{border-collapse:separate;border-spacing:0;width:100%;min-width:47.5rem}
.board th,.board td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:top}
.board thead th{position:sticky;top:0;z-index:3;background:var(--sfc,#16181c);font-family:var(--display);font-size:.78rem;text-align:left;padding:8px;font-weight:800;color:var(--fg-strong);border-bottom:1px solid var(--gold-rule)}
.board thead th.today{background:linear-gradient(180deg,rgba(59,140,255,.32),rgba(59,140,255,.14)),var(--sfc,#16181c);color:var(--gold-ink)}
.board thead .dh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 4px;align-items:baseline}
.board thead .wcount{color:var(--warn);font-size:.72rem;cursor:help}
.board thead .okc{color:var(--ok);font-size:.72rem}
.board th.emp{position:sticky;left:0;z-index:2;background:var(--sfc-2,#141619);text-align:left;padding:6px 8px;min-width:9.5rem;max-width:11.25rem;font-weight:700;font-size:.88rem;color:var(--fg-strong)}
.board thead th.emp{z-index:4;background:var(--sfc,#16181c)}
.board th.emp .nm{display:flex;gap:5px;align-items:center;cursor:grab;flex-wrap:wrap}
.board th.emp .sub{font-weight:400;font-size:.72rem;color:var(--muted)}
.board tr.gone th.emp{opacity:.55} .board tr.gone th.emp .nm{cursor:default}
.board td.cell{min-width:6.5rem;height:3.125rem;padding:3px;position:relative;cursor:cell;background:var(--cell)}
.board td.cell:hover{background:rgba(var(--tint),.05)}
.board td.cell.wkend{background:rgba(var(--shade),.18)}
.board td.cell.past{background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(var(--tint),.03) 9px 10px)}
.board td.cell.sel{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(59,140,255,.12)}
.board td.cell.dz-add{box-shadow:inset 0 0 0 3px var(--ok);background:rgba(76,194,122,.10)}
.board td.cell.dz-add::after{content:"+ add";position:absolute;right:4px;bottom:2px;font-size:.66rem;font-weight:800;color:var(--ok)}
.board td.cell.dz-multi{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(59,140,255,.22)}
.pill.dz-swap{outline:3px solid var(--warn);outline-offset:-1px}
.pill.dz-swap .code::before{content:"replace ";color:var(--warn);font-size:.66rem}
.board td.tot{font-family:var(--display);font-weight:800;font-size:.85rem;text-align:right;padding:8px;min-width:58px;background:rgba(var(--shade),.25);color:var(--gold-ink)}
.board td.tot.ot{color:var(--warn)}
.board.ro td.cell{cursor:default}
.pill{--c:#4f8ff7;display:flex;align-items:center;gap:3px;border-radius:6px;background:color-mix(in srgb,var(--c) 22%,rgba(var(--shade),.35));border:1px solid color-mix(in srgb,var(--c) 35%,transparent);border-left:4px solid var(--c);padding:1px 4px 1px 6px;font-size:.78rem;font-weight:700;margin-bottom:2px;cursor:grab;line-height:1.3;color:var(--fg)}
.pill .code{font-family:var(--display);font-weight:800;color:color-mix(in srgb,var(--c) 55%,var(--mixhi));flex:1;min-width:0;overflow:hidden;white-space:normal;overflow-wrap:normal;word-break:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12;font-size:.74rem;cursor:pointer}
.pill input.h{width:32px;min-height:0;height:22px;padding:0 3px;border-radius:5px;font-size:.78rem;text-align:right;border-color:transparent;background:transparent;color:var(--fg-strong)}
.pill input.h:hover,.pill input.h:focus{border-color:var(--line-2);background:rgba(var(--shade),.4)}
.pill .st{font-size:.7rem;width:14px;text-align:center;color:var(--ok)}
.pill.s-confirmed{cursor:default} .pill.s-approved{cursor:default;opacity:.8}
.pill.s-shop .code::after{content:" · shop";font-weight:700;font-size:.66rem;color:var(--muted)}
.pill.zero{opacity:.5;text-decoration:line-through}
.badges{display:inline-flex;gap:2px}
.bdg{font-size:.6rem;font-weight:800;border-radius:4px;padding:0 3px;line-height:14px;background:var(--soft);color:var(--muted);border:1px solid var(--line-2);font-family:var(--display)}
.bdg.a{background:rgba(232,176,48,.16);color:#f6d27a;border-color:rgba(232,176,48,.4)}
.bdg.u{background:rgba(106,168,255,.15);color:#b9d4ff;border-color:rgba(106,168,255,.4)}
.bdg.st{background:rgba(76,194,122,.15);color:#a6e8bf;border-color:rgba(76,194,122,.4)}
.bdg.x{background:var(--warn-soft);color:var(--warn);border-color:transparent}
/* tablet landscape / small laptop: a narrower job list and day boxes so the whole week fits beside it */
@media (min-width:861px) and (max-width:1180px){
  .board-wrap{grid-template-columns:12.5rem minmax(0,1fr);gap:10px}
  .board td.cell{min-width:5.75rem} .board th.emp{min-width:8.5rem}
  /* job name on its own line, hours under it (the @container rule below can't apply: a table cell can't be a size container) */
  .pill{flex-wrap:wrap;row-gap:0}
  .pill .code{flex:1 1 100%;font-size:.72rem}
  .pill input.h{margin-left:auto}
}

/* selection / armed bar */
.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:12;background:rgba(16,18,22,.96);border:1px solid var(--gold-rule);color:#fff;border-radius:14px;padding:8px 10px 8px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 34px rgba(0,0,0,.55);max-width:calc(100vw - 24px);font-size:.88rem}
.selbar input{width:56px;min-height:32px}
.selbar button{min-height:32px;padding:4px 10px}
.selbar span{white-space:nowrap}
.selbar b{color:var(--gold-ink)}

/* requirement check */
.check{padding:12px 14px}
.check table{border-collapse:collapse;width:100%;min-width:760px}
.check th,.check td{padding:8px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-size:.84rem}
.check thead th{border-top:0;border-bottom:1px solid var(--gold-rule);font-family:var(--display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.check .num{font-family:var(--display);font-weight:800;color:var(--fg-strong)}
.check b{color:var(--fg-strong)}
.short{display:block;color:var(--warn);font-weight:700;font-size:.78rem;line-height:1.3}
.short::before{content:"▲ ";font-size:.62rem}
.okline{display:block;color:var(--ok);font-weight:700;font-size:.78rem}
.scroll-x{overflow-x:auto}

/* ---------- month calendar ---------- */
.calcard{padding:14px}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:10px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:5px}
.dow{font-family:var(--display);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:rgba(59,140,255,.1);border:1px solid rgba(59,140,255,.28);text-align:center;border-radius:6px;padding:4px 0;font-weight:800}
.day{min-height:6.5rem;border-radius:9px;padding:6px 7px;display:flex;flex-direction:column;gap:3px;font-size:.75rem;border:1px solid var(--line);min-width:0;position:relative;background:var(--cell);cursor:pointer;transition:transform .08s,background .08s}
.day:hover{transform:translateY(-1px);background:rgba(var(--tint),.06);border-color:rgba(59,140,255,.45)}
.day.out{opacity:.35} .day.wkend{background:rgba(var(--shade),.2)}
.day.today{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(59,140,255,.25);z-index:1}
.day.flagged{border:1.5px dashed var(--warn)}
.day .n{font-family:var(--display);font-weight:800;font-size:.98rem;display:flex;justify-content:space-between;align-items:baseline;gap:4px;color:var(--fg-strong)}
.day.today .n{color:var(--gold-ink)}
.day .tag{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;text-align:right;color:var(--muted)}
.day .tag.flag{color:var(--warn);font-weight:800}
.mchip{--c:#4f8ff7;border-radius:5px;padding:1px 5px;font-size:.68rem;font-weight:800;line-height:1.35;background:color-mix(in srgb,var(--c) 78%,#000);color:#fff;display:flex;justify-content:space-between;gap:4px;white-space:nowrap;overflow:hidden;border-left:3px solid color-mix(in srgb,var(--c) 60%,var(--mixhi))}
.mchip .nm{overflow:hidden;text-overflow:ellipsis}
.mchip .ct{flex:none;padding:0 4px;border-radius:4px;background:rgba(var(--shade),.35)}
.mchip.warn{box-shadow:inset 0 -2px 0 var(--warn)}
.mchip.warn .nm::before{content:"▲ ";font-size:.56rem;color:#ffd0cb}

/* ---------- sheet ---------- */
.sheetwrap{position:fixed;inset:0;background:rgba(2,5,8,.7);z-index:20;display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet{background:linear-gradient(180deg,var(--sfc,#1b1d22),var(--sfc-2,#141619));color:var(--fg);width:100%;max-width:40rem;max-height:90vh;overflow:auto;border-radius:18px 18px 0 0;border:1px solid var(--line-2);border-top:2px solid var(--gold-rule);padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.6)}
@media (min-width:700px){.sheetwrap{align-items:center}.sheet{border-radius:18px}}
.sheethead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.sheethead h3{font-size:1.3rem;color:var(--fg-strong)}
.sheethead button{flex:none;width:38px;height:38px;border-radius:50%;padding:0}
.shd{font-family:var(--display);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin:16px 0 4px}
.srow{display:flex;gap:8px;padding:8px 0;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.srow .nm{flex:1;min-width:130px;font-weight:700}
.srow input.h{width:64px}
.srow select[data-movejob]{max-width:190px}
.audit{font-size:.74rem;color:var(--muted);width:100%;padding-left:2px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.form label,.fld{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:700}
.form .full{grid-column:1/-1}
.form fieldset{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px 10px;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.form legend{font-size:.74rem;font-weight:800;padding:0 4px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.form fieldset label{flex-direction:row;align-items:center;gap:6px;font-weight:400;font-size:.9rem;min-height:30px}
.form .help{font-weight:400;color:var(--muted);font-size:.76rem}
.form fieldset{min-width:0}
.form fieldset label.jfstreet{flex:2 1 18rem}.form fieldset label.jfcity{flex:1 1 10rem}.form fieldset label.jfstate{flex:0 1 6rem}.form fieldset label.jfzip{flex:0 1 7.5rem}
.form fieldset label.jfcol{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.form fieldset label.jfcol>input,.form fieldset label.jfcol>select{flex:none}
.form fieldset label.jfwide{flex:1 1 100%}
.certpick{display:flex;flex-direction:column;gap:6px}
.certchips{display:flex;flex-wrap:wrap;gap:4px 6px}
.certchips label.chk{flex-direction:row;align-items:center;gap:6px;font-weight:400;font-size:.86rem;min-height:30px;padding:2px 10px;border:1px solid var(--line-2);border-radius:999px}
.certchips label.chk:has(input:checked){border-color:var(--gold);background:rgba(59,140,255,.12)}
.form fieldset .certpick{flex:1 1 100%}
.jfmore>summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:6px 0}
.jfmore>summary .help{display:block;margin-top:2px}
.jfmore[open]>summary{margin-bottom:6px}
@media (max-width:640px){.form fieldset label:not(.chk):not(.jfcol){flex-wrap:wrap}.form fieldset label:not(.chk):not(.jfcol)>.help{flex-basis:100%}
  .form fieldset label:not(.chk):not(.jfcol)>input:not([type=checkbox]):not([type=color]),.form fieldset label:not(.chk):not(.jfcol)>select{min-width:0;flex:1 1 7rem}
  .form fieldset label.jfstate,.form fieldset label.jfzip{flex:1 1 40%}}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}

/* ---------- tables (jobs, crew, roll-up, approval) ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:9px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-size:.88rem}
.tbl thead th{border-top:0;border-bottom:1px solid var(--gold-rule);font-family:var(--display);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:800;background:rgba(var(--shade),.25);white-space:nowrap}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.dim td{opacity:.5} .tbl tr.dim td:last-child{opacity:1}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:rgba(59,140,255,.06)}
.tbl b{color:var(--fg-strong)}
.stand{display:inline-block;border-radius:999px;padding:1px 9px;font-size:.74rem;font-weight:800;white-space:nowrap;border:1px solid transparent}
.s-ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(76,194,122,.35)}
.s-warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(240,100,90,.35)}
.s-near{background:var(--pend-bg);color:var(--pend-ink);border-color:rgba(232,176,48,.35)}
.s-none{background:var(--soft);color:var(--muted);border-color:var(--line)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:12px}
.tile{padding:12px 14px;border-top:2px solid var(--gold-rule)}
.tile .big{font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--fg-strong)}
.tile .big.bad{color:var(--warn)} .tile .big.ok{color:var(--ok)}
/* MainCortex, the console's front page (platform.js): a card for each product */
.prodtiles{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
.prodgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:14px;margin-top:14px}
.prodcard{display:block;width:100%;text-align:left;padding:14px 16px;min-height:0}
.prodcard h2{margin:0}
.prodfoot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.prodfoot select{max-width:100%}
.prodcard .srow b{font-variant-numeric:tabular-nums}
.prodcard.soon{border-style:dashed;box-shadow:none}
/* monthly fees (platform.js): a month's Received box, and each business owing on MainCortex's To collect */
.feechk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.feechk input{width:18px;height:18px;margin:0}
.feeco{padding:8px 0 2px;border-top:1px solid var(--line)}
/* MainCortex › Accounting: each cost (platform.js) */
.costrow{align-items:flex-start;gap:10px}
.costrow .nm{min-width:0}
.costamt{text-align:right;white-space:nowrap}
.splitrow{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
/* the company's package (package.js): a part left out, the change being looked at, a part's own numbers */
.pkgrow.dim .nm{opacity:.72}
.pkgdiff{border-color:var(--gold-rule);padding:10px 12px}
.pkgnum{padding:8px 0;border-top:1px solid var(--line)}
.pkgnum .form{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.diff{background:var(--pend-bg);color:var(--pend-ink);border-radius:5px;padding:0 4px;font-weight:800}
input.diff{border-color:rgba(232,176,48,.6)}
.was{text-decoration:line-through;color:var(--muted);font-size:.74rem;margin-right:3px}
.apcell{white-space:nowrap}
.apcell input{width:52px;min-height:28px;padding:2px 4px;text-align:right}
.ok{color:var(--ok);font-weight:800} .bad{color:var(--warn);font-weight:800}
.jobcard{padding:0;overflow:hidden}
.jobcard>.hd{padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);background:rgba(var(--shade),.18)}
.jobcard>.hd b{color:var(--fg-strong)}
.jobcard>.ft{padding:10px 14px;border-top:1px solid var(--line)}
.empty{padding:22px;text-align:center;color:var(--muted)}

/* ---------- foreman (phone first) ---------- */
.fm{max-width:32.5rem;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
.fm .bar{flex-wrap:nowrap}
.fm .bar input[type=date]{width:150px;min-width:0}
.fm .crew{display:flex;flex-direction:column}
.fm .who{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.fm .who input[type=checkbox]{width:26px;height:26px}
.fm .who input.h{width:70px;min-height:44px;font-size:1.05rem;text-align:right}
.fm .who.off .nm{text-decoration:line-through;color:var(--muted)}
.fm .who .nm{font-weight:700;color:var(--fg-strong)}
.fm .big{width:100%;min-height:52px;font-size:1.05rem}
.fm .past{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--line);gap:8px;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;border-radius:0;width:100%;text-align:left}
.fm .past:hover{background:rgba(59,140,255,.06)}

.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(16,18,22,.97);border:1px solid var(--gold-rule);color:#fff;padding:9px 12px 9px 18px;border-radius:999px;font-size:.9rem;z-index:30;display:flex;gap:10px;align-items:center;box-shadow:0 10px 34px rgba(0,0,0,.55)}
.toast button{min-height:28px;padding:2px 10px;border-radius:999px;color:var(--gold-ink)}
.selbar:not([hidden])~.toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}

/* ---------- phone app shell ---------- */
@media (max-width:860px){
  .board-wrap{grid-template-columns:1fr}
  .palette{position:static}
  .palette .chips{flex-direction:row;flex-wrap:wrap}
  .palette .chips .jchip .nm{display:none}
  .palette .others{flex-direction:row;flex-wrap:wrap;max-height:76px}
  .gridscroll{max-height:none}
}
/* Short screens (most laptops, tablets turned sideways): the tall header scrolls away instead of
   holding a fifth of the screen; the week board then gets the full height */
@media (min-width:901px) and (max-height:820px){
  :root{--hdr:0px}
  .band{position:relative}
}
@media (max-width:900px){
  :root{--hdr:0px}
  /* backdrop-filter would make the header the containing block for the fixed tab bar */
  .band{position:relative;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,10,13,.95)}
  .band .inner{padding:10px 14px;gap:8px}
  .logo{height:34px}
  .wordmark{font-size:1.05rem} .bcmark{width:32px;height:32px}
  .appname{padding-left:10px}
  .brand h1{font-size:1.15rem}
  .brand{gap:10px;flex-wrap:wrap}
  .clock{flex-basis:100%;text-align:left;margin-left:0;font-size:.85rem;order:5}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;margin:0;max-width:none;gap:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;overflow:visible;
    background:rgba(10,12,15,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--gold-rule);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabs button{flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;border-radius:10px;font-size:.66rem;min-height:54px;position:relative;border-bottom:0}
  .tabs button[aria-selected="true"]{color:var(--gold-ink);background:rgba(59,140,255,.1)}
  .tabs button[aria-selected="true"] svg{filter:drop-shadow(0 0 6px rgba(59,140,255,.55))}
  .tabs .full{display:none} .tabs .tsh{display:block}
  .tabs .badge{position:absolute;top:3px;left:calc(50% + 6px)}
  .wrap{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .toast,.selbar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .selbar:not([hidden])~.toast{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
  .whobar .caps,.whobar .proto{display:none}
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 12px;border-top:1px solid var(--line)}
  table.stack td{border:0;padding:0;text-align:left!important}
  table.stack td[data-l]::before{content:attr(data-l);display:block;font-family:var(--display);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:800}
  table.stack td.wide{grid-column:1/-1}
  /* a row's buttons get the full width and wrap, instead of running off the side */
  table.stack td:last-child:not([data-l]){grid-column:1/-1}
  table.stack td[style*="nowrap"]{white-space:normal!important}
}
@media (max-width:560px){
  .day{min-height:66px;padding:4px}.day .tag{display:none}
  .calcard{padding:8px}.cal{gap:3px;grid-template-columns:repeat(7,minmax(0,1fr))}
  .mchip{font-size:.56rem;padding:1px 4px;border-left-width:2px}.mchip .ct{display:none}
  .mchip.warn .nm::before{content:none}
  .legend .lnm{display:none}
  #mjob,#memp{flex:1 1 40%;min-width:0}
  .board td.cell{min-width:88px}
  .board th.emp{min-width:104px;max-width:112px;font-size:.8rem;padding:4px 6px}
  .board th.emp .sub{display:none}
}
@media (max-width:420px){.fm .bar>.muted{display:none}.fm .bar h2{font-size:1.15rem}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------- tablets: foremen use them on site ---------- */
.fm .cards{display:flex;flex-direction:column;gap:14px}
.fm .missed{padding:12px 14px;border-color:rgba(240,100,90,.55);background:linear-gradient(180deg,rgba(240,100,90,.12),var(--panel))}
/* Finger-sized targets wherever the pointer is a finger (tablets and phones). 16px text stops iOS zooming on focus. */
@media (pointer:coarse){
  button{min-height:44px} button.small{min-height:38px;padding:6px 12px}
  input,select{min-height:44px;font-size:max(16px,1rem)}
  .jchip{min-height:44px} .palette .others .jchip{min-height:38px}
  .board td.cell{height:62px;min-width:112px}
  .pill{padding:3px 4px 3px 6px;margin-bottom:3px}
  .pill input.h{height:30px;width:46px;font-size:.92rem}
  .fm .who{padding:14px 16px;gap:14px}
  .fm .who input[type=checkbox]{width:32px;height:32px}
  .fm .who input.h{min-height:52px;width:86px;font-size:1.2rem}
  .fm .big{min-height:60px;font-size:1.15rem}
  .fm .past{padding:14px 16px}
  .fm .bar button{min-width:48px}
}
/* Tablet portrait: wider Today with roomier cards */
@media (min-width:700px){
  .fm{max-width:47.5rem}
  .fm .who .nm{font-size:1.05rem}
}
/* Tablet landscape and up: job cards side by side (more of them on big monitors) */
@media (min-width:1000px){
  .fm{max-width:none}
  .fm .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(22.5rem,1fr));align-items:start}
}

/* ---------- project hours report: white paper on screen, only the paper when printed ---------- */
.report{position:fixed;inset:0;z-index:40;overflow:auto;background:rgba(2,5,8,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0 12px 40px}
body.reporting{overflow:hidden}
.rbar{position:sticky;top:0;z-index:1;display:flex;gap:8px;align-items:center;margin:0 -12px;padding:12px max(12px,calc((100% - 1060px) / 2));color:#fff;background:rgba(6,9,12,.96);border-bottom:1px solid var(--gold-rule)}
.paper{margin-top:16px!important}
.paper{--ink:#1a1a1a;--rule:#2c6fe0;--gold:#1d5bd0;background:#fff;color:var(--ink);max-width:1060px;margin:0 auto;padding:0 0 28px;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);font-family:Arial,Helvetica,"Segoe UI",sans-serif;font-size:12px;line-height:1.4;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper .rhead{display:flex;gap:18px;align-items:center;background:#1a1a1a;color:#fff;padding:16px 24px;border-bottom:3px solid var(--rule)}
.paper .rhead img{height:46px;width:auto}
.paper .rhead .rwm{font-weight:800;letter-spacing:.22em;color:#3b8cff;border:1px solid #2c6fe0;border-radius:6px;padding:4px 10px}
.paper .rhead h1{font-family:Arial,Helvetica,sans-serif;font-size:20px;color:#fff;letter-spacing:.02em}
.paper .rhead div div{color:#d8d2c2;font-size:11px;margin-top:2px}
.paper h2{font-family:Arial,Helvetica,sans-serif;font-size:14px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin:22px 24px 6px;border-bottom:2px solid var(--rule);padding-bottom:4px}
.paper table{width:calc(100% - 48px);margin:14px 24px 0;border-collapse:collapse}
.paper th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);border-bottom:2px solid var(--rule);padding:6px 6px;white-space:nowrap}
.paper td{padding:5px 6px;border-bottom:1px solid #e2ddd1;vertical-align:top}
.paper tbody tr:nth-child(even) td{background:#faf8f3}
.paper .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.paper .neg{color:#a8271d;font-weight:700}
.paper tfoot td{background:#1a1a1a;color:#fff;font-weight:700;border:0;padding:7px 6px}
.paper .sub{color:#6c7889;font-size:10.5px}
.paper>p.sub{margin:8px 24px 0}
.paper .pj{break-inside:avoid;page-break-inside:avoid}
.paper .pj h3{font-family:Arial,Helvetica,sans-serif;font-size:13px;margin:16px 24px 0;color:var(--ink)}
.paper .pj h3 span{font-weight:400;color:#6c7889;font-size:11px;margin-left:8px}
.paper .pj table{margin-top:6px}
.paper .pj>.sub{margin:4px 24px 0}
@media (max-width:900px){.paper{overflow-x:auto}.paper table{font-size:10.5px;width:calc(100% - 20px);margin-left:10px;margin-right:10px}.paper th,.paper td{padding:4px 4px}.paper th{letter-spacing:0}.paper .rhead{padding:12px 14px}}
@media print{
  @page{size:landscape;margin:12mm}
  html,body{background:#fff!important}
  body>*:not(#report){display:none!important}
  .report{position:static;overflow:visible;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
  .rbar{display:none}
  .paper{box-shadow:none;border-radius:0;max-width:none}
}

/* ---------- tap a name to see who someone is ---------- */
.pname{cursor:pointer;border-bottom:1px dotted rgba(59,140,255,.55)}
.pname:hover{color:var(--gold-ink);border-bottom-style:solid}
.pcard{background:rgba(59,140,255,.07);border:1px solid rgba(59,140,255,.3);border-radius:12px;padding:10px 14px;margin-bottom:6px}
.pcard .pt{font-weight:700;color:var(--fg-strong);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pcard .pnote{margin:6px 0 0;color:var(--gold-ink);font-size:.95rem}
.sheet a{color:var(--gold-ink)}
.board th.emp.drop{box-shadow:inset 0 0 0 3px var(--ok);background:rgba(76,194,122,.14)}
.board th.emp.drop .sub::after{content:" · whole week";color:var(--ok);font-weight:800}

/* ---------- active-list controls beside each job chip ---------- */
.jrow{display:flex;gap:4px;align-items:stretch}
.jrow .jchip{flex:1;min-width:0}
.jside{min-height:0;min-width:34px;padding:0 8px;font-weight:800;font-size:1rem;color:var(--gold-ink)}
.palette .others .jrow .jside{min-width:30px;font-size:.9rem}
[data-pinzone].drop{outline:2px dashed var(--ok);outline-offset:4px;border-radius:10px}
.wtag{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--pend-ink);background:var(--pend-bg);border:1px solid rgba(232,176,48,.45);border-radius:999px;padding:0 6px;white-space:nowrap}
@media (max-width:860px){.palette .chips .jrow,.palette .others .jrow{flex:0 0 auto}}
.palette .jchip{flex-wrap:wrap;row-gap:2px}
.ptag{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#b9d4ff;background:rgba(106,168,255,.15);border:1px solid rgba(106,168,255,.45);border-radius:999px;padding:0 6px;white-space:nowrap}
.hrslink{background:none;border:0;border-bottom:1px dotted rgba(59,140,255,.6);border-radius:0;padding:0 1px;min-height:0;font-family:var(--display);font-weight:800;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.hrslink:hover{background:none;border-bottom-style:solid;color:var(--fg-strong)}
.tbl tfoot td{border-top:1px solid var(--gold-rule);background:rgba(var(--shade),.25);font-weight:700;padding:9px 10px;font-size:.88rem}
.tbl tfoot td.r{text-align:right}
@media (max-width:900px){table.stack tfoot{display:block}table.stack tfoot tr{display:grid;grid-template-columns:1fr 1fr;padding:10px 12px}}

/* ---------- logins ---------- */
body.locked .tabs,body.locked .whobar .caps,body.locked .whobar .proto{display:none}
.auth{min-height:58vh;display:grid;place-items:center;padding:10px 0}
.authcard{width:100%;max-width:27.5rem;padding:22px 22px 14px;border-top:2px solid var(--gold-rule)}
/* the sign-in card as clear glass: the facade shows through, frosted just enough to read */
.card.authcard{background:linear-gradient(160deg,rgba(var(--tint),.14),rgba(140,190,255,.06) 45%,rgba(10,22,44,.28));border:1px solid rgba(var(--tint),.22);border-top:2px solid rgba(110,170,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 50px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(7px) saturate(150%);backdrop-filter:blur(7px) saturate(150%)}
.authcard input{background:rgba(4,12,26,.38);border-color:rgba(var(--tint),.22)}
.authcard .muted{color:#c3cfdf}
.idlenote{background:var(--pend-bg);color:var(--pend-ink);font-weight:700;font-size:.85rem;border-radius:10px;padding:8px 12px;margin:0 0 12px}
.authform{grid-template-columns:1fr}
.authform button{min-height:46px}
.authform button.linkish{min-height:0;padding:6px 0;font-weight:400}
/* Show password (app.js addPwToggles): a button inside the right end of every password box */
.pwwrap{position:relative;display:block;width:100%}
.pwwrap input{width:100%;padding-right:44px}
.pwwrap .pwshow,.authform .pwwrap .pwshow{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:0;padding:4px 7px;line-height:0;font-size:.78rem;font-weight:700;background:transparent;border:1px solid var(--line-2);border-radius:6px;color:var(--muted)}
.pwwrap .pwshow[aria-pressed=true]{color:var(--gold-ink)}
.pwwrap .pwshow svg{width:18px;height:18px}
.who{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--fg-strong)}
.who .muted{font-size:.8rem}
code,.tpw{font-family:ui-monospace,Consolas,monospace}
.tpw{font-size:1rem;font-weight:700;color:var(--gold-ink);background:rgba(var(--shade),.45);border:1px solid rgba(59,140,255,.35);padding:2px 9px;border-radius:6px;letter-spacing:.04em;user-select:all}
/* ---------- notifications ---------- */
.bell{display:inline-flex;align-items:center;gap:4px;position:relative}
.undobtn{display:inline-flex;align-items:center;gap:5px}
.undobtn svg{width:16px;height:16px}
.undobtn:disabled{opacity:.35;cursor:default}
@media (max-width:640px){.undobtn .ul{display:none}}
.themebtn{display:inline-grid;place-items:center;padding:4px 8px}
.themebtn svg{width:18px;height:18px}
.themebtn .moon{display:none}
:root[data-theme="light"] .themebtn .sun{display:none}
:root[data-theme="light"] .themebtn .moon{display:block}
.bell svg{width:18px;height:18px}
.bell.has{color:var(--gold-ink);border-color:var(--gold-rule)}
.bell #bellct{background:var(--warn);color:#fff;border-radius:999px;font-size:.68rem;font-weight:800;padding:0 6px;line-height:16px}
.bell #bellct:empty{display:none}
.notes{display:flex;flex-direction:column;gap:6px}
.note{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:10px 12px;border-radius:10px;background:var(--soft);border:1px solid var(--line)}
.note.new{border-color:var(--gold-rule);background:rgba(59,140,255,.08)}
.note .ni{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;background:rgba(var(--shade),.35)}
.note.k-confirm .ni{color:var(--ok)} .note.k-bid .ni{color:var(--warn)} .note.k-sched .ni{color:#b9d4ff}
.note .nt{display:flex;flex-direction:column;gap:2px;color:var(--fg)}

/* ---------- activity (main owner only) ---------- */
.actstrip{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.actstrip span{height:30px;border-radius:6px;display:grid;place-items:center;font-size:.66rem;font-weight:800;color:var(--muted);background:rgba(var(--tint),.05);border:1px solid var(--line)}
.actstrip span.wk{opacity:.6}
.actstrip span.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold-dk));color:#ffffff;border-color:var(--gold-rule);opacity:1}

/* job card */
.linkish{background:none;border:0;padding:0;min-height:0;color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:underline dotted color-mix(in srgb,var(--gold) 60%,transparent);text-underline-offset:3px}
.linkish:hover{color:var(--gold-ink)}
.jhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-left:4px solid var(--c);padding:2px 0 2px 10px;margin-bottom:10px}
.jstage{font-family:var(--display);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:color-mix(in srgb,var(--c) 35%,rgba(var(--shade),.4));border-radius:999px;padding:3px 10px}
.jtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.jtiles>div{background:rgba(var(--shade),.28);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.jtiles span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.jtiles b{font-family:var(--display);font-size:1.25rem;color:var(--fg-strong)}
.jtiles b.bad{color:var(--warn)}
.jbar{display:flex;height:10px;border-radius:999px;background:rgba(var(--tint),.07);overflow:hidden;margin:10px 0 4px}
.jbar i{display:block;height:100%}
.jbar .u,.lg.u{background:var(--gold)} .jbar .p,.lg.p{background:var(--pend)} .jbar .s,.lg.s{background:rgba(var(--tint),.28)}
.lg{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 3px 0 6px;vertical-align:-1px}
.wkdots{display:flex;gap:3px}
.wkdots i{font-style:normal;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:.7rem;font-weight:800;color:var(--muted);background:rgba(var(--tint),.05)}
.wkdots i.on{background:var(--gold);color:#fff}
.wkdots i.td{outline:1px solid var(--gold-ink)}
.tbl.mini th,.tbl.mini td{padding:6px 8px;vertical-align:top}
@media (max-width:560px){.jtiles{grid-template-columns:repeat(2,1fr)}}

/* time off */
.totag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:2px 8px;background:rgba(var(--tint),.08);color:var(--muted)}
.totag.pending{background:var(--pend-bg);color:var(--pend-ink)} .totag.approved{background:var(--ok-soft);color:var(--ok)} .totag.denied{background:var(--warn-soft);color:var(--warn)}
.form:has(#to_all:checked) .tohrs{display:none}
.board td.cell.offday{background:repeating-linear-gradient(135deg,rgba(var(--tint),.02) 0 8px,rgba(var(--tint),.07) 8px 9px)}
.offtag{font-size:.68rem;font-weight:800;color:var(--pend-ink);background:var(--pend-bg);border-radius:5px;padding:1px 5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* person card (trainer-app style) */
.avatar{--h:40;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;font-family:var(--display);font-weight:800;color:#fff;font-size:.95rem;background:radial-gradient(circle at 30% 25%,hsl(var(--h) 70% 58%),hsl(var(--h) 65% 30%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.avatar.big{width:64px;height:64px;font-size:1.4rem}
.phead{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.phead .pnote{margin:4px 0 0;color:var(--gold-ink)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.ptabs button{border-radius:999px;min-height:34px;padding:4px 14px;font-weight:700;background:rgba(var(--tint),.06);border:1px solid var(--line)}
.ptabs button[aria-selected="true"]{background:var(--gold);color:#fff;border-color:var(--gold)}
.jtiles b.sm{font-size:.95rem;line-height:1.25;display:block}
.lineup{display:flex;flex-direction:column}
.lrow{display:flex;gap:12px;padding:9px 4px;border-top:1px solid var(--line);align-items:flex-start}
.lrow:first-child{border-top:0}
.lrow.today{background:rgba(59,140,255,.08);border-radius:8px}
.lrow .ld{width:46px;flex:none;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--display)}
.lrow .ld b{color:var(--fg-strong);text-transform:uppercase;font-size:.85rem} .lrow .ld span{color:var(--muted);font-size:.72rem}
.lrow.today .ld b{color:var(--gold-ink)}
.lrow .lb{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.lj{--c:#888;border-left:3px solid var(--c);padding-left:9px;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.lj.off{--c:var(--pend-ink)}
.mine{max-width:42.5rem;margin:0 auto}
.mine .hi{font-family:var(--display);text-transform:uppercase;font-size:1.7rem;letter-spacing:.02em;margin:4px 0 12px;color:var(--fg-strong)}
.mine .jtiles{grid-template-columns:repeat(3,1fr)}

/* schedule as a list (default on phones) */
.lweek{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.lday{padding:12px 14px}
.lday.today{border-color:var(--gold-rule);box-shadow:0 0 0 1px var(--gold-rule)}
.ldh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ldh>div{flex:1;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em}
.ldh>div b{color:var(--fg-strong)}
.lday.today .ldh>div b{color:var(--gold-ink)}
.lgroup{--c:#888;border-left:3px solid var(--c);padding:8px 10px 10px 12px;margin-top:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%);border-radius:0 8px 8px 0}
.lgh{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.lgh>.linkish,.lgh>b{flex:1;min-width:0}
.lgroup>.short{margin-top:4px}
/* the people on a job: each name in its own pill */
.lppl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:.88rem}
.lp{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(var(--tint),.07);border:1px solid var(--line-2);line-height:1.3;white-space:nowrap}
.lp .pname{border-bottom:0}
.lp .pname:hover{border-bottom:0}
.lp .muted{font-size:.75rem}
.lp .st{color:var(--ok);font-size:.75rem}
/* how many people: a count pill with the crew icon (crewCount) */
.ccount{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 9px 2px 7px;border-radius:999px;background:color-mix(in srgb,var(--c,#3b8cff) 30%,rgba(var(--shade),.35));border:1px solid color-mix(in srgb,var(--c,#3b8cff) 55%,transparent);color:#fff;font-weight:800;font-size:.82rem;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}
.ccount svg{width:14px;height:14px;flex:none}

/* account button and menus */
.mebtn{display:none;padding:2px;min-height:0;border-radius:50%}
.mebtn:not([hidden]){display:inline-grid}   /* the account menu, on every screen: Change password, Sign out, Appearance */
.whobar .caps{display:none}
.themeseg{display:flex;flex-wrap:wrap}
.themeseg button{flex:1 1 auto;min-height:44px}
.avatar.sm{width:32px;height:32px;font-size:.8rem}
.menu{display:flex;flex-direction:column;gap:8px}
.menu button{justify-content:flex-start;gap:10px;min-height:48px;font-size:1rem;display:flex;align-items:center;position:relative}
.menu button svg{width:22px;height:22px}
.menu .badge{margin-left:auto}

@media (max-width:600px){
  .band .inner{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 12px}
  .brand{flex:1;min-width:min-content}   /* never narrower than its own name: the buttons go to the next line instead of over it */
  .appname .eyebrow{display:none}
  .appname{border-left:0;padding-left:0}
  .clock{font-size:.78rem}
  .whobar{flex-wrap:nowrap;gap:8px}
  .whobar .who,.whobar .spacer{display:none}
  .mebtn:not([hidden]){display:inline-grid}
  .hint{display:none}
  .wrap{padding-left:10px;padding-right:10px}
  .bar{gap:6px}
  .bar h2{font-size:1.05rem;flex-basis:100%;order:-1}
  .lweek{grid-template-columns:1fr}
  .check{display:none}
  .sheet{max-height:92vh}
}
.ldh>div{white-space:nowrap}
/* narrow day boxes (tablets): job name on its own line, hours under it */
.board td.cell{container-type:inline-size}
@container (max-width:150px){
  .pill{flex-wrap:wrap;row-gap:0}
  .pill .code{flex:1 1 100%;font-size:.72rem}
  .pill input.h{margin-left:auto}
}
/* time off form: sick pay choice only for sick time; reason only for time off */
.form:not(:has([name=to_kind][value=sick]:checked)) .topaid{display:none}
.form:has([name=to_kind][value=sick]:checked) .toreason{display:none}
.mineacts{margin-top:12px;gap:8px}.mineacts button{flex:1 1 auto}
.jtiles button.linkish{display:block;margin-top:4px;font-size:.74rem;color:var(--gold-ink)}

/* hub: module bar */
.mods{max-width:var(--maxw);margin:0 auto;padding:0 16px 6px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.mods:empty{display:none}
.mods button{display:inline-flex;align-items:center;gap:7px;border-radius:999px;min-height:34px;padding:4px 14px;font-weight:700;font-size:.84rem;white-space:nowrap;background:rgba(var(--tint),.05);border:1px solid var(--line);color:var(--muted);position:relative}
.mods button svg{width:16px;height:16px}
.mods button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff}
.mods .badge{position:static;margin-left:2px}
body.onetab:not(.locked) .tabs{display:none}
@media (max-width:600px){.mods{display:none} body.onetab:not(.locked) .tabs{display:grid}}

/* hub: project cards and pages */
.pgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.pcardx{--c:#888;text-align:left;display:flex;flex-direction:column;gap:8px;padding:14px;border-left:4px solid var(--c);cursor:pointer;color:var(--fg);font:inherit;min-height:0}
.pcardx:hover{border-color:var(--gold-rule);border-left-color:var(--c)}
.pcardx .ph{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pcardx .ph b{font-family:var(--display);font-size:1.05rem;color:var(--fg-strong);flex:1}
.pdates{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:.85rem}
.pdates i{display:block;font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.pflags{display:flex;flex-wrap:wrap;gap:5px}
.hchip{font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 8px;background:rgba(var(--tint),.07);color:var(--muted);white-space:nowrap}
.hchip.ok{background:var(--ok-soft);color:var(--ok)}.hchip.bad{background:var(--warn-soft);color:var(--warn)}.hchip.warn{background:var(--pend-bg);color:var(--pend-ink)}.hchip.info{background:rgba(79,143,247,.16);color:#8fb5ff}.hchip.gray{opacity:.6}
/* a change order's status, changed right on its log (changeorders.js): a dropdown that looks like its chip */
select.costat{font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 22px 3px 9px;width:auto;min-width:0;border:1px solid transparent;background-color:rgba(var(--tint),.07);color:var(--muted)}
select.costat.ok{background-color:var(--ok-soft);color:var(--ok)}select.costat.bad{background-color:var(--warn-soft);color:var(--warn)}select.costat.warn{background-color:var(--pend-bg);color:var(--pend-ink)}select.costat.info{background-color:rgba(79,143,247,.16);color:#8fb5ff}select.costat option{color:initial}
.ptitle{border-left:4px solid var(--c);padding-left:10px}
.jtiles.six{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.jtiles.six{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.jtiles.six{grid-template-columns:repeat(2,1fr)}.pdates{grid-template-columns:1fr 1fr}}
.hwarn{border-color:rgba(239,90,79,.35)}
.evd{width:62px;flex:none;font-family:var(--display);font-weight:800;color:var(--fg-strong);display:flex;flex-direction:column;font-size:.85rem}.evd small{font-family:var(--body);font-weight:400;color:var(--muted);font-size:.68rem}
section.card{margin-bottom:12px;padding:12px 14px}
/* bar chart */
.gwrap{position:relative;padding-top:18px}
.gaxis{position:absolute;left:34%;right:0;top:0;height:16px}.gaxis span{position:absolute;font-size:.66rem;color:var(--muted);transform:translateX(2px);border-left:1px solid var(--line);padding-left:3px}
.grow{display:flex;align-items:center;gap:8px;min-height:22px}
.gl{width:34%;flex:none;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.gt{position:relative;flex:1;height:14px;background:rgba(var(--tint),.03);border-radius:4px}
.gb{position:absolute;top:2px;height:10px;border-radius:3px;display:inline-block}
.gb.k-install{background:var(--gold)}.gb.k-gate,.gb.k-milestone{background:rgba(var(--tint),.3)}.gb.k-delivery{background:#7aa7ff}.gb.k-crew{background:var(--ok)}.gb.k-mat{background:#b38bff}
.gneed{position:absolute;top:0;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg) translateY(2px);background:var(--warn);display:inline-block}
.gtoday,.gfin{position:absolute;top:16px;bottom:0;left:calc(34% + 8px + (100% - 34% - 8px) * var(--x) / 100);border-left:2px solid var(--gold-ink);pointer-events:none}
.gfin{border-left:2px dashed var(--warn)}
.glegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.72rem;color:var(--muted)}
.glegend .gb,.glegend .gneed{position:static;margin-right:5px;vertical-align:middle;width:16px;transform:none}.glegend .gneed{width:9px;height:9px;transform:rotate(45deg)}
.glegend .gtd,.glegend .gfn{display:inline-block;width:0;height:12px;border-left:2px solid var(--gold-ink);margin-right:6px;vertical-align:middle}.glegend .gfn{border-left:2px dashed var(--warn)}
@media (max-width:600px){.gl{width:40%}.gaxis{left:40%}.gtoday,.gfin{left:calc(40% + 8px + (100% - 40% - 8px) * var(--x) / 100)}}
.tbl td[data-l="No."]{white-space:nowrap}
/* install progress */
.pbar{display:block;height:6px;border-radius:999px;background:rgba(var(--tint),.08);overflow:hidden;margin-top:4px;min-width:60px}
.pbar i{display:block;height:100%;background:var(--gold)}
.tbl.prog input.pin{width:52px;text-align:right;margin-right:3px}
.stageseg{margin-bottom:12px;flex-wrap:wrap}.stageseg .ct{opacity:.65;font-size:.8em;margin-left:3px}.ptitle+select{max-width:170px}
.pcardx .ph select{max-width:150px;min-height:30px;padding:2px 6px;font-size:.8rem}
/* drag a project card onto a stage */
.pcardx[draggable="true"]{cursor:grab}
.pcardx .ph select{display:none}
@media (pointer:coarse){.pcardx .ph select{display:inline-block}.pcardx .ph .stagechip{display:none}}
body.dragproj .stageseg button[data-stagedrop]{outline:1px dashed var(--gold-rule);outline-offset:-3px}
.stageseg button.drop{background:var(--gold)!important;color:#fff!important;outline:2px solid var(--gold-ink)!important;transform:scale(1.04)}
/* day details: job header with clear buttons to the job card and project page */
.shd.jobhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--fg-strong);margin-top:14px}
.shd.jobhd .jn{font-family:var(--display);font-weight:800}
.jhead .spacer{flex:1}
.soon{margin:6px 0;padding:12px 14px;border:1px dashed var(--line-2);border-radius:10px;color:var(--muted)}.soon b{color:var(--gold-ink)}
.offtag[data-act]{cursor:pointer}.offtag[data-act]:hover{filter:brightness(1.2)}
body.haslogo .appname{display:none}
.whobar .proto{display:none}
/* project lists on a phone: number, what it is, status and the date that matters */
@media (max-width:600px){
  .tbl.lst tr{grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 4px}
  table.stack.lst td[data-l]::before{display:none}
  .tbl.lst td.wide{grid-column:1/-1}
  .tbl.lst td[data-l="No."]{font-weight:800;color:var(--gold-ink);font-size:.8rem}
  .tbl.lst td[data-l="Ball in court"],.tbl.lst td[data-l="Sent"],.tbl.lst td[data-l="Returned"],.tbl.lst td[data-l="Answered"],.tbl.lst td[data-l="Type"],.tbl.lst td[data-l="Area"],.tbl.lst td[data-l="Vendor"],.tbl.lst td[data-l="Lead"],.tbl.lst td[data-l="Ordered"]{display:none}
  table.stack.lst td[data-l="Due back"]::before,table.stack.lst td[data-l="Answer due"]::before,table.stack.lst td[data-l="Release by"]::before,table.stack.lst td[data-l="Start"]::before,table.stack.lst td[data-l="Finish"]::before,table.stack.lst td[data-l="Impact"]::before,table.stack.lst td[data-l="Needed on site"]::before,table.stack.lst td[data-l="ETA"]::before{display:inline;content:attr(data-l) ": ";font-size:.7rem;color:var(--muted);letter-spacing:0;text-transform:none;font-family:var(--body);font-weight:400}
  .tbl.lst td{font-size:.86rem}
  .logbar .nm{min-width:0;flex-basis:100%}
  .stageseg{display:flex;overflow-x:auto;flex-wrap:nowrap}
  .stageseg button{white-space:nowrap}
}
/* installation progress: one row per opening, a check box per stage */
.tbl.inst th.ic,.tbl.inst td.ic{text-align:center;width:46px;padding:4px}
.tbl.inst td.ic small{display:none}
.ichk{width:30px;height:30px;min-height:0;padding:0;border-radius:7px;border:2px solid var(--line-2);background:rgba(var(--shade),.25);color:#111;font-weight:900;font-size:1rem;line-height:1}
.ichk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.ichk.ofc{border-style:dashed}.ichk.ofc.on{background:var(--gold);border-color:var(--gold);border-style:solid;color:#fff}
.ichk:disabled{cursor:default;opacity:.85}
@media (pointer:coarse){.ichk{width:38px;height:38px}}
@media (max-width:600px){
  table.stack.lst.inst tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
  table.stack.lst.inst td{width:auto}
  table.stack.lst.inst td.wide{flex-basis:100%}
  table.stack.lst.inst td[data-l="%"]{margin-left:auto;min-width:56px}
  table.stack.lst.inst td.ic{display:inline-flex;flex-direction:column;align-items:center;gap:2px;width:auto}
  .tbl.inst td.ic small{display:block;font-size:.6rem;color:var(--muted)}
  .tbl.inst td.ic.na{display:none}
  table.stack.lst.inst td[data-l="Lites"]::before{display:inline;content:"Lites ";font-size:.7rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
  table.stack.lst.inst td[data-l="SF"]::before{display:inline;content:"SF ";font-size:.7rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
}
/* install: frame search, opening sheet */
.instsearch{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.instsearch input{flex:1;max-width:320px}
.fmline{margin-top:2px;color:var(--gold-ink)}
.stchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.stchip{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.stchip.on{background:color-mix(in srgb,var(--ok) 22%,transparent);border-color:var(--ok);color:inherit}
.shh{font-size:.9rem;margin:14px 0 6px}
.elev .elevbtn{display:block;width:100%;padding:0;min-height:0;border:1px solid var(--line-2);border-radius:8px;background:#fff;cursor:zoom-in;overflow:hidden}
.elev img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;background:#fff}
.elev img:not([src]){min-height:120px}
.xsseg button{min-height:0;padding:4px 8px;font-size:.74rem}
.tbl.xs tr.xsundef td{border-top:1px dashed var(--line-2)}
.lenhint{display:block;min-height:1em;margin-top:3px;font-size:.74rem;font-weight:600;color:var(--gold-ink)}
.lenhint.bad{color:var(--warn)}
.roup{color:var(--warn);font-weight:800} .rodown{color:var(--ok);font-weight:800}
.glorder{margin:0 0 8px}
.tbl.glass{width:100%;margin-top:4px}
.tbl.glass td,.tbl.glass th{padding:4px 6px}
.gtag{display:inline-block;padding:1px 7px;border-radius:999px;border:1px solid var(--line-2);font-size:.74rem;font-weight:700;white-space:nowrap;margin:0 4px 3px 0}
.tbl.stdates{width:100%;margin:0 0 10px}.tbl.stdates td{padding:3px 6px;font-size:.84rem}
.lvl{display:inline-block;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--gold) 22%,transparent);font-size:.72rem;font-weight:700}
.szdiff{display:inline-block;padding:0 6px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:.72rem;font-weight:800}
td.szdiffcell{color:var(--warn);font-weight:800}
.board th.emp{position:relative}
.ordbtns{position:absolute;top:4px;right:4px;display:flex;flex-direction:column;gap:2px;opacity:.35}
.board tr:hover .ordbtns,.ordbtns:focus-within{opacity:1}
.ordb{min-height:0;width:22px;height:16px;padding:0;font-size:.6rem;line-height:1;border-radius:4px}
@media (pointer:coarse){.ordbtns{opacity:.8}.ordb{width:28px;height:20px}}
.rfistory{color:var(--muted);margin-top:2px;line-height:1.35}
.rfirefs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.rfirefs .gtag{margin:0;font-weight:600}
/* field questions */
.freqrow{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;text-align:left;padding:8px 10px;margin:0 0 6px;border:1px solid var(--line-2);border-radius:8px;background:var(--cell);min-height:0}
.freqrow .fqtop{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fqthumbs,.fqphotos{display:flex;flex-wrap:wrap;gap:6px}
.fqthumbs img{width:72px;height:72px;object-fit:cover;border-radius:6px}
.fqphotos img{width:150px;height:150px;object-fit:cover;border-radius:8px;background:var(--sfc-3,#222)}
/* bid hours vs a missed bid item, per timecard line */
.bidline{width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bidseg button{font-size:.74rem;padding:3px 8px;min-height:26px}
.apcell.outb{background:color-mix(in srgb,var(--gold, #2c6fe0) 14%,transparent)}
.outtag{font-size:.7rem;color:var(--gold-ink, #1d5bd0);margin-right:3px}
button.bidrow{font-size:.72rem;padding:2px 8px;min-height:24px;margin-top:4px;opacity:.75}
button.bidrow.on{opacity:1;border-color:var(--gold, #2c6fe0);color:var(--gold-ink, #1d5bd0)}
/* try-it logins: everything clickable, nothing saved */
.tryitbar{position:sticky;top:0;z-index:50;background:var(--gold);color:#ffffff;font-weight:700;font-size:.82rem;text-align:center;padding:6px 12px}
/* a pull request's preview link (cloud.js PREVIEW): a hazard-striped strip on top of the header, on every screen */
.previewbar{background:repeating-linear-gradient(135deg,#f5b400 0 14px,#1a1a1a 14px 28px);text-align:center;padding:5px 12px}
.previewbar span{display:inline-block;background:#f5b400;color:#111;font-size:.8rem;font-weight:700;line-height:1.5;border-radius:4px;padding:1px 10px}
.previewbar b{font-family:var(--display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-right:8px}
.previewbar i{font-style:normal}
@media (max-width:600px){.previewbar i{display:none}.previewbar b{margin:0}}
/* shop drawing sheet next to an opening's mark */
.sht{display:inline-block;font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:6px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold-ink);vertical-align:1px;white-space:nowrap}
/* glass shipment status; drawing toggle on an opening */
.gtag.ship{border-style:dashed}
.gtag.ship.ok{border-style:solid;border-color:#3f9b5a;color:#7fd39a}
.gtag.ship.late{border-color:#c2410c;color:#f59e6b}
.elevseg{margin:0 0 6px}
.elevseg button{font-size:.78rem;min-height:30px;padding:3px 10px}
/* glass paperwork drop box */
.dropzone{display:block;margin:10px 0 0;padding:14px;border:2px dashed var(--line-2);border-radius:12px;text-align:center;cursor:pointer;color:var(--ink, inherit)}
.dropzone:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.dropzone.over{border-color:var(--gold);background:rgba(59,140,255,.10)}
/* a drop box's read while it runs (pdfread.js): on top of everything, sheets included */
.readbusy{position:fixed;left:50%;top:calc(44px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(30rem,calc(100vw - 24px));background:rgba(16,18,22,.98);border:1px solid var(--gold-rule);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);color:#fff;padding:12px 14px;z-index:60;display:flex;gap:12px;align-items:center}
.readbusy[hidden]{display:none}
.readbusy .rbtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.readbusy .rbtxt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.readbusy progress{width:100%;height:6px;accent-color:var(--gold)}
.readbusy button{flex:none;color:var(--gold-ink)}
.rbspin{flex:none;width:22px;height:22px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--gold);animation:rbspin .9s linear infinite}
.rbicon{flex:none;width:24px;height:24px;border-radius:50%;background:var(--warn);color:#fff;font-weight:700;display:grid;place-items:center}
@keyframes rbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rbspin{animation-duration:3s}}
/* field-measure review */
.fmrev{border-color:var(--gold)}
.fmprev{margin:0 0 10px}
.fmprev canvas,.elev canvas{background:#fff;border-radius:8px;display:block}
/* full-size drawing viewer */
.bigview{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.92);display:flex;flex-direction:column}
.bigbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1a1a1a;color:#fff}
.bigscroll{flex:1;overflow:auto;padding:8px}
.bigscroll canvas{display:block;background:#fff}
.bigview.fit .bigscroll canvas{max-width:100%;max-height:100%;margin:auto;object-fit:contain}
.unitseg button{font-size:.74rem;min-height:28px;padding:2px 9px}
/* quantity of a typical mark; editable marked-up sizes in the review */
.qty{display:inline-block;font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:6px;background:rgba(59,140,255,.16);color:var(--gold-ink);vertical-align:1px}
.fmedit{margin-top:6px}.fmedit summary{cursor:pointer;color:var(--gold-ink)}
.fmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin-top:6px}
.fmgrid label{display:flex;flex-direction:column;gap:2px}.fmgrid input{min-height:30px;padding:2px 6px}.fmgrid input.diff{border-color:var(--gold);background:rgba(59,140,255,.12)}
/* a newer version of the hub is out */
.newver { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--sfc-3,#1d2a36); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: 14px; }
/* the schedule's original dates (a dashed outline behind the bar that moved) */
.gbase{position:absolute;top:0;height:14px;border:1.5px dashed rgba(var(--tint),.55);border-radius:4px;display:inline-block;box-sizing:border-box}
.glegend .gbase{position:static;width:16px;height:10px;margin-right:5px;vertical-align:middle}
/* a change in a record's history: date, what moved, why, the document */
.chg{border-top:1px solid var(--line);padding:8px 0}
.chgh{display:flex;gap:10px;align-items:flex-start}
.chgb{flex:1;min-width:0}.chgb .small{margin-top:2px}
/* Ask: the question bar in the header and its answer pop-up */
.askbar{display:flex;align-items:center;gap:8px;max-width:40rem;width:100%;margin:2px auto 0;padding:0 12px;border:1px solid rgba(var(--tint),.22);border-radius:12px;background:linear-gradient(180deg,rgba(var(--tint),.10),rgba(140,190,255,.05));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.askbar:focus-within{border-color:rgba(110,170,255,.9);box-shadow:0 0 0 3px rgba(59,140,255,.22)}
.askbar svg{width:18px;height:18px;flex:none;color:#8ec2ff}
.askbar input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;padding:9px 0;min-height:40px;color:var(--fg-strong)}
.askbar input:focus{box-shadow:none}
.askbar input::placeholder{color:#a9b8cc}
.askbar kbd{font:600 .75rem var(--body);color:#a9b8cc;border:1px solid rgba(var(--tint),.25);border-radius:5px;padding:1px 6px}
@media (max-width:600px){.askbar kbd{display:none}.askbar input{font-size:16px}}
.askform{display:flex;gap:8px;margin:0 0 10px}.askform input{flex:1;min-width:0}
.askhead{font-size:1.05rem;font-weight:700;color:var(--fg-strong);margin:4px 0 8px;line-height:1.4}
.askrows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.askrow{padding:7px 0;border-bottom:1px solid var(--line);line-height:1.45}
.warnline{color:var(--pend-ink)}
.okin{color:var(--ok);font-weight:700}
/* Ask: speaking a question, and waiting on Claude */
.askmic{flex:none;display:grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border-radius:50%;border:1px solid rgba(var(--tint),.25);background:rgba(var(--tint),.06);color:#8ec2ff}
.askmic svg{width:17px;height:17px}
.askmic.on{background:#e5484d;border-color:#e5484d;color:#fff;animation:askpulse 1.2s ease-in-out infinite}
@keyframes askpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}50%{box-shadow:0 0 0 8px rgba(229,72,77,0)}}
.askform .askmic{width:38px;height:38px}
.aithink{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:2px solid rgba(142,194,255,.35);border-top-color:#8ec2ff;border-radius:50%;animation:aispin .8s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
/* Ask: reading the answer out loud */
.askheadrow{display:flex;gap:10px;align-items:flex-start}.askheadrow .askhead{flex:1}
.askspeak{flex:none;display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;border:1px solid rgba(var(--tint),.25);background:rgba(var(--tint),.06);color:#8ec2ff}
.askspeak svg{width:18px;height:18px}
.askspeak.on{background:#2f7bff;border-color:#2f7bff;color:#fff;animation:askpulse2 1.2s ease-in-out infinite}
@keyframes askpulse2{0%,100%{box-shadow:0 0 0 0 rgba(47,123,255,.55)}50%{box-shadow:0 0 0 8px rgba(47,123,255,0)}}
/* Ask: docked along the bottom of the page (above the tab bar on phones and tablets) */
.askbar.askdock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:14;width:min(45rem,calc(100% - 32px));max-width:none;margin:0;
  background:linear-gradient(180deg,rgba(24,40,68,.80),rgba(8,14,26,.86));border-color:rgba(110,170,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
body.hasask .wrap{padding-bottom:100px}
body.hasask .toast,body.hasask .selbar{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
body.hasask .selbar:not([hidden])~.toast{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){
  .askbar.askdock{bottom:calc(76px + env(safe-area-inset-bottom,0px));width:calc(100% - 20px)}
  body.hasask .wrap{padding-bottom:calc(164px + env(safe-area-inset-bottom,0px))}
  body.hasask .toast,body.hasask .selbar{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  body.hasask .selbar:not([hidden])~.toast{bottom:calc(200px + env(safe-area-inset-bottom,0px))}
}
/* the platform: a company's paused account or module, an owner's payment-due note, the console's task rows */
.card.paused{max-width:40rem;margin:24px auto;text-align:left}
.card.paused h2{margin:4px 0 8px}
.paybar{background:var(--pend-bg);color:var(--pend-ink);font-weight:700;font-size:.85rem;border-radius:10px;padding:8px 12px;margin:0 0 12px}
.srow.admtask{gap:8px;flex-wrap:wrap;align-items:center}
.srow.admtask select{max-width:110px}
.srow.admtask .nm{text-align:left}
/* requests between a company and BuildCortex: list rows, the thread */
.srow.suprow{gap:8px;flex-wrap:wrap;align-items:center}
.srow.suprow .nm{text-align:left}
/* the console's Team tab: a person's time active, one row a day (platform.js) */
.admmore{gap:10px;align-items:center;margin-top:6px}
.srow.tday{display:grid;grid-template-columns:9em minmax(60px,240px) 5.5em 1fr;gap:2px 10px;padding:4px 0}
.srow.tday .nm{min-width:0}.srow.tday .pbar{margin:0;min-width:0}.srow.tday.none{opacity:.5}
@media (max-width:560px){.srow.tday{grid-template-columns:8em 1fr 5em}.srow.tday>span:last-child{grid-column:2/-1}.srow.tday.none>span:last-child{display:none}}
.supline{text-align:center;margin:6px 0}   /* a status change in a request's thread */
/* a guide in the console (platform.js guideHtml) */
.guide{line-height:1.55}
.guide h2{font-size:1.15rem;margin:18px 0 6px}
.guide h3{font-size:1.02rem;margin:16px 0 4px}
.guide h4{font-size:.95rem;margin:12px 0 4px}
.guide p{margin:6px 0}
.guide ul,.guide ol{margin:6px 0;padding-left:22px}
.guide li{margin:3px 0}
.guide code{background:var(--line);border-radius:4px;padding:1px 5px;font-size:.92em}
.guide pre{background:rgba(var(--shade),.35);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:8px 0}
.guide pre code{background:none;padding:0}
.guide .gcode{margin:8px 0}
.guide .gcode pre{margin:0}
.guide .gbar{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.guide .gbar span{flex:1}
.guide .gcode.prompt pre{white-space:pre-wrap;overflow-wrap:anywhere;border-color:var(--gold-rule)}
.guide a{color:var(--gold-ink)}
/* Settings › Look (docsettings.js viewLook): a small copy of the app over the company's photo */
.lookprev{border-radius:10px;overflow:hidden;min-height:240px;background-size:cover;background-position:center;background-color:#0b1d36;padding:0 0 14px;border:1px solid var(--line)}
.lookprev-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(6,10,16,.72);border-bottom:1px solid rgba(255,255,255,.08)}
.lookprev-bar img{max-height:26px;max-width:140px}
.lookprev-bar span{color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.lookprev-card{margin:16px 14px 0;padding:12px 14px;border-radius:10px;background:var(--panel);display:flex;flex-direction:column;gap:6px;max-width:260px}
.lookprev-btn{align-self:flex-start;margin-top:4px;padding:6px 12px;border-radius:8px;border:1px solid;color:#fff;font-weight:800;font-size:.82rem}
.doclogo.looklogo{background:rgba(6,10,16,.9)}
.supdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:1px}
.supthread{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.supmsg{border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;background:rgba(var(--tint),.03);margin-right:12%}
.supmsg.plat{margin-right:0;margin-left:12%;border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.supbody{white-space:pre-wrap;margin-top:3px}
/* the trade switcher in the top bar (two or more trade apps) */
.tradebtn{all:unset;cursor:pointer;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:0 4px;margin:0 -4px}
.tradebtn:hover,.tradebtn:focus-visible{background:rgba(var(--tint),.08);outline:none}
.tradebtn .caret{font-size:.6em;opacity:.75}
/* wide screens: related cards side by side (a project's overview, a company in the console); one column when narrow */
.cols2{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,34rem),1fr));align-items:start}
.dayask{margin-top:4px}
.paysub td{border-top:0;padding-top:2px}

/* Settings > Documents (docsettings.js): palette swatches, the logo, and a live look at a document on paper */
.docsws{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.docsw{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border-radius:10px;text-align:left}
.docsw[aria-pressed="true"]{outline:2px solid var(--accent,#4f8ff7);outline-offset:1px}
.docsw-bar{display:block;height:22px;border-radius:5px;position:relative;overflow:hidden}.docsw-bar i{position:absolute;left:0;right:0;bottom:0;height:5px}
.doclogo{width:180px;height:64px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px}.doclogo img{max-width:100%;max-height:100%}
.docprev{background:#fff;color:#1A1A1A;border-radius:8px;padding:14px 16px;font-family:Arial,Helvetica,sans-serif;font-size:10px;line-height:1.35;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.docprev-lh{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:2.5px solid var(--acc);padding-bottom:6px;margin-bottom:10px}
.docprev-lh b{display:block;font-size:13px;color:var(--ink)}.docprev-lh small{color:#555;font-size:8.5px}.docprev-lh img{max-height:34px;max-width:120px}
.docprev-nologo{border:1px dashed #bbb;color:#999;font-size:9px;padding:6px 10px;border-radius:4px}
.docprev-t{font-size:15px;font-weight:bold;margin-bottom:8px;color:var(--ink)}
.docprev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.docprev-cards span{background:var(--tint);border:1px solid var(--line);border-top:2.5px solid var(--acc);padding:5px 7px;text-align:right}
.docprev-cards b{display:block;font-size:11.5px}.docprev-cards small{display:block;text-align:left;color:#666;font-size:7px;letter-spacing:.5px}
.docprev-bar{background:var(--ink);color:var(--acc);font-weight:bold;letter-spacing:1.2px;padding:5px 8px;font-size:9px}
.docprev-row{display:grid;grid-template-columns:34px 1fr 74px 64px;gap:6px;align-items:center;padding:5px 8px;border-bottom:1px solid #E6E6E6}.docprev-row span:nth-child(3){text-align:right}
.docprev-row i{font-style:normal;font-weight:bold;font-size:7px;border:1px solid #A5D6A7;color:#2E7D32;border-radius:3px;padding:1px 4px;text-align:center}.docprev-row i.warn{border-color:#D9C98A;color:#8C6E00;background:#FFF8E1}
.docprev-tot{display:flex;justify-content:space-between;background:var(--ink);color:#fff;font-weight:bold;padding:6px 8px;margin-top:2px}.docprev-tot b{color:var(--acc)}
.docprev-foot{border-top:2.5px solid var(--acc);margin-top:12px;padding-top:4px;text-align:center;color:#555;font-size:7.5px}
/* the monthly meeting (meetings.js) */
.meetpts{margin:4px 0 0;padding-left:18px}
.meetpts li{margin:3px 0;line-height:1.35;font-weight:400}
.meetpts li.bad{color:var(--warn)}
.meetpts li.warn{color:var(--pend-ink)}
.meetpts li.ok{color:var(--ok)}
.meetitem input[type=checkbox]{width:18px;height:18px}
/* check before it's saved: what a PDF read will change (pdfcheck.js) */
.recaphide{display:none!important}
.recapbox{border:1px solid var(--gold-rule);border-radius:12px;padding:12px 14px;background:rgba(59,140,255,.08)}
.recaptbl td{vertical-align:top}
/* the job form's total bid hours; the log card takes a dropped log */
.total-hrs{display:block;padding:8px 0;font-weight:800;font-size:1.05rem}
.logbar.over{outline:2px dashed var(--gold);outline-offset:2px}
/* video walkthroughs (videos.js) */
.vwplayer{display:block;width:100%;max-height:70vh;background:#000;border-radius:10px;margin:8px 0 12px}
.vwlive{position:relative;border-radius:10px;overflow:hidden;background:#000}
.vwlive video{display:block;width:100%;max-height:65vh;object-fit:cover}
.vwrec{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:4px 10px;font-weight:700;font-size:.85rem}
.vwrec i{width:10px;height:10px;border-radius:50%;background:#e5383b;animation:vwblink 1s steps(2) infinite}
@keyframes vwblink{50%{opacity:.25}}
.vwrow{cursor:pointer;align-items:flex-start}
.vwrow:hover{background:var(--soft)}
.vwsum{margin-top:4px;color:var(--fg)}
.vwcounts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.vwstamp{min-height:0;padding:1px 7px;font-size:.78rem;border-radius:999px;color:var(--gold-ink)}
.vwcard{display:grid;grid-template-columns:minmax(140px,260px) 1fr;gap:12px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;margin:0 0 10px}
.vwcardb{min-width:0}
.vwshot{position:relative;padding:0;border-radius:8px;overflow:hidden;min-height:0;background:#000;display:block;width:100%}
.vwshot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vwshot span{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;border-radius:6px;padding:1px 6px}
.vwlist{margin:0;padding-left:18px}.vwlist li{margin:4px 0}
.vwpoints{margin:6px 0 0;padding-left:18px}.vwpoints li{margin:2px 0}
.vwstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.vwstrip button{padding:0;min-height:0;border-radius:8px;overflow:hidden;background:#000;position:relative}
.vwstrip img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vwstrip span{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.65);color:#fff;font-size:.72rem;border-radius:5px;padding:0 5px}
.vwtranscript p{margin:6px 0}
@media (max-width:640px){.vwcard{grid-template-columns:1fr}}
/* roof coatings: the roof plan, its areas colored by progress, items and measured lines (coatings.js) */
/* the drawing fits the screen under the header, with the card's tools and key above it in view */
.rpcard{--rph:max(320px,calc(100vh - var(--hdr,0px) - 190px));--rph:max(320px,calc(100dvh - var(--hdr,0px) - 190px))}
.rpwrap{overflow:auto;max-height:var(--rph);border:1px solid var(--line);border-radius:10px;background:#f4f6f9;-webkit-overflow-scrolling:touch}
.rpsvg.fit{max-height:calc(var(--rph) - 2px)}
.rpsvg{display:block;height:auto;max-width:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.rpsvg.drawing{cursor:crosshair}
.rpblank{fill:#f4f6f9}
.rpgridline{stroke:#d5dbe3;stroke-width:1}
.rpa polygon{fill:rgba(120,134,155,.16);stroke:#5b6b80;stroke-width:2}
.rpa.go polygon{fill:rgba(232,176,48,.34);stroke:#c98d10}
.rpa.done polygon{fill:rgba(76,194,122,.36);stroke:#2c9a57}
.rpa.redo polygon{stroke-dasharray:6 4;fill-opacity:.4}
.rpa text{fill:#0b1220;font-family:var(--display);font-weight:800;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.rpa text.rpp{font-weight:700}
.rplbl{pointer-events:none}
.rpsvg:not(.drawing) .rpa{cursor:pointer}
.rpsvg:not(.drawing) .rpa:hover polygon,.rpsvg:not(.drawing) .rpa:focus polygon{stroke-width:3.5}
.rpl polyline{fill:none;stroke:#1d5bd0;stroke-width:3;stroke-dasharray:8 4}
.rpsvg:not(.drawing) .rpl{cursor:pointer}
.rpi circle{fill:#0b1220;stroke:#fff;stroke-width:1.5}
.rpi text{fill:#fff;font-family:var(--display);font-weight:800;pointer-events:none}
.rpsvg:not(.item) .rpi{pointer-events:none}
.rpsvg.item .rpi{cursor:not-allowed}
.rptmp{pointer-events:none}
.rptmp polyline{fill:none;stroke:#e00000;stroke-width:2.5}
.rptmp circle{fill:#e00000;stroke:#fff;stroke-width:1.5}
.rptmp circle.first{fill:#fff;stroke:#e00000;stroke-width:2.5}
.rpsugg circle{fill:#e8792b;stroke:#fff;stroke-width:2;stroke-dasharray:3 2}
.rpsvg:not(.drawing) .rpi.rpsugg{pointer-events:auto;cursor:pointer}
.rpsvg:not(.drawing) .rpi.rpsugg:hover circle{fill:#b8501a}
/* what was read off the roof plan, to check (roofread.js) */
.rrwarn{border-color:rgba(232,121,43,.7);background:rgba(232,121,43,.10)}
.rrbar{display:flex;flex-direction:column;gap:6px;margin:0 0 8px}
.rrrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;border-radius:10px;border:1px solid rgba(232,121,43,.55);background:rgba(232,121,43,.10);font-size:.9rem}
.rrrow>span:first-child{flex:1 1 320px}
.rrbtns{display:flex;gap:6px;flex-wrap:wrap}
.rplegend .sw.sg{background:#e8792b;border-color:#fff;border-radius:50%;width:11px;height:11px}
.rptools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.rptools.on{padding:8px;border:1px solid var(--gold-rule);border-radius:10px;background:rgba(59,140,255,.08)}
.rplegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;align-items:center}
.rplegend .sw{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle;background:rgba(120,134,155,.35);border:1.5px solid #5b6b80}
.rplegend .sw.go{background:rgba(232,176,48,.5);border-color:#c98d10}
.rplegend .sw.done{background:rgba(76,194,122,.5);border-color:#2c9a57}
.rplegend .sw.ln{background:none;border:0;border-top:3px dashed #3b8cff;height:0;border-radius:0}
.rpcard.rpbig{position:fixed;inset:0;z-index:18;margin:0;border-radius:0;overflow:auto;background:var(--bg,#0d1117)}
.rpcard.rpbig{--rph:calc(100vh - 170px);--rph:calc(100dvh - 170px)}
body.rpbigon{overflow:hidden}
.rwgrid{display:grid;gap:6px;margin:8px 0}
.rwrow{display:grid;grid-template-columns:1fr 6.5rem 5.5rem;gap:6px;align-items:center}
@media (max-width:560px){.rwrow{grid-template-columns:1fr 4.5rem 4rem}}
/* the test company's bar: switch trade, view as, back to the console (platform.js, viewas.js) */
.testcobar{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:center}
.testcobar label{display:inline-flex;gap:6px;align-items:center;font-weight:700}
.testcobar select{min-height:0;padding:2px 6px;font-size:.8rem;font-weight:600;max-width:60vw}
/* the monthly meeting as slides (present.js): full screen, 16:9, sized to the screen */
.pres{position:fixed;inset:0;z-index:40;background:radial-gradient(ellipse 90% 80% at 50% 40%,transparent 50%,rgba(0,0,0,.5) 100%),repeating-linear-gradient(0deg,rgba(150,175,205,.06) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(150,175,205,.06) 0 1px,transparent 1px 48px),#0b121b;display:flex;flex-direction:column;color:var(--fg);font-size:clamp(14px,1.55vw,30px)}
.pres-slide{flex:1;min-height:0;overflow:hidden;padding:4vh 5vw 2vh;display:flex;flex-direction:column;cursor:pointer}
.pres-head{display:flex;align-items:baseline;gap:1em;flex-wrap:wrap;border-bottom:2px solid var(--gold-rule);padding-bottom:.4em;margin-bottom:.9em}
.pres-head h2{margin:0;font-family:var(--display);font-size:2em;line-height:1.1}
.pres-head span{color:var(--muted);font-size:.85em}
.pres-body{flex:1;min-height:0;overflow:hidden}
.pres-title{margin:auto 0;padding-left:.2em}
.pres-title h1{font-family:var(--display);font-size:3.6em;margin:.1em 0 0;line-height:1}
.pres-title h2{font-family:var(--display);font-size:2.2em;margin:.1em 0 .6em;color:var(--gold-ink)}
.pres-title p{margin:.3em 0;font-size:1.1em}
.pres-title .eyebrow{font-size:.8em}
.pres-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr));gap:.8em}
.pres-tiles div{background:var(--panel);border:1px solid var(--line);border-radius:.6em;padding:.8em 1em}
.pres-tiles b{display:block;font-family:var(--display);font-size:2.6em;line-height:1.1}
.pres-tiles span{color:var(--muted);font-size:.85em}
.pres-rows{display:grid;gap:.7em}
.pres-row{display:grid;grid-template-columns:minmax(8em,1.3fr) 3fr minmax(7em,1.1fr);gap:1em;align-items:center}
.pres-row .nm{font-weight:700}
.pres-row .num{font-weight:800;text-align:right}
.pres-row .num small{display:block;font-weight:400;color:var(--muted);font-size:.7em}
.pres-two{display:grid;gap:.3em}.pres-two small{color:var(--muted);font-size:.7em}
.pbarx{position:relative;height:.9em;border-radius:.45em;background:rgba(var(--tint),.08);overflow:hidden}
.pbarx i{position:absolute;top:0;bottom:0;border-radius:.45em}
.pbarx .was{left:0;background:rgba(150,175,205,.35)}
.pbarx .gain{background:var(--gold)}.pbarx .gain.ok{background:var(--ok)}.pbarx .gain.bad{background:var(--warn)}
.pres-prog{display:grid;grid-template-columns:auto 1fr auto;gap:1em;align-items:center;margin-bottom:.6em}
.pres-prog b{font-family:var(--display);font-size:2.2em}.pres-prog span{color:var(--muted);margin-left:.3em}
.pres-prog .num{font-weight:700;color:var(--ok)}
.pres-upd{margin:0 0 .6em;color:var(--gold-ink)}
.pres-pts{margin:0;padding-left:1.1em;line-height:1.45}.pres-pts li{margin:.25em 0}
.pres-pts.big{font-size:1.1em}
.pres-pts .bad{color:#ff8a80}.pres-pts .warn{color:var(--pend-ink)}.pres-pts .ok{color:#8ee0a8}
.pres-note{margin:.6em 0 0;color:var(--muted)}
.pres-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5em;align-items:start}
.pres-plan{border-radius:.5em;overflow:hidden;background:#f4f6f9;max-height:58vh}
.pres-plan svg{width:100%!important;height:auto;display:block}.pres-plan svg *{pointer-events:none}
.pres-kv{display:grid;gap:.4em;margin-bottom:.8em}.pres-kv span{color:var(--muted);margin-right:.6em}
.pres-quiet{font-size:1.3em;color:var(--muted);margin-top:2em}
.pres-foot{display:flex;align-items:center;gap:.6em;padding:.6em 5vw 1em;font-size:14px}
.pres-dots{flex:1;display:flex;gap:4px;flex-wrap:wrap}.pres-dots i{width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}.pres-dots i.on{background:var(--gold)}
.pres-count{color:var(--muted);min-width:4em;text-align:right}
@media (max-width:700px){.pres{font-size:15px}.pres-row,.pres-split{grid-template-columns:1fr}.pres-row .num{text-align:left}}
.pres-group{margin-bottom:.7em}.pres-group>b{display:block;font-size:1.05em;margin-bottom:.1em}
/* hotels for the crew (lodging.js) */
.lodgestay{gap:12px}
.lodgehotel{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.lodgehotel img,.lodgenoimg{width:96px;height:72px;border-radius:8px;object-fit:cover;background:var(--soft);display:block}
.lodgehb{min-width:0}.lodgehb>b{display:block}
.lodgerate{color:var(--pend-ink);font-weight:800}
.lodgeprice{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.lodgeprice>b{font-family:var(--display);font-size:1.3rem}
.lodgeother label{display:flex;flex-direction:column;gap:2px}
@media (max-width:640px){.lodgehotel{grid-template-columns:72px 1fr}.lodgehotel img,.lodgenoimg{width:72px;height:56px}.lodgeprice{grid-column:1/-1;align-items:flex-start;text-align:left}}
.lodgerooms{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}.lodgeroom b{color:var(--gold-ink)}

/* the project schedule's manpower row (calendars.js): people needed each week, red past the crew on hand */
.gmw{position:absolute;top:0;height:14px;line-height:14px;font-size:.62rem;font-weight:800;text-align:center;color:#0b121b;background:rgba(122,167,255,.75);border-left:1px solid var(--bg);border-radius:2px;overflow:hidden}
.gmw.over{background:var(--warn,#e0a63a);color:#1a0d00}
.gb.k-plan{background:transparent;border:1px dashed var(--gold);box-sizing:border-box}
/* the shop board (shop.js): the crew board's look, with the shop's queue beside it */
.board td.scell{min-width:6.5rem;height:3.125rem;padding:3px;position:relative;background:var(--cell);cursor:pointer}
.board.ro td.scell,.board td.scell.past{cursor:default}
.board td.scell:hover{background:rgba(var(--tint),.05)}
.board td.scell.past{background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(var(--tint),.03) 9px 10px)}
.board td.scell.off{background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(var(--tint),.05) 6px 12px)}
.board td.scell.wkend{background:rgba(var(--shade),.18)}
.board td.scell.today{box-shadow:inset 0 0 0 1px var(--gold-rule)}
.board td.scell.sdrop,.sprow.sdrop{box-shadow:inset 0 0 0 3px var(--ok);background:rgba(76,194,122,.10)}
.board td.scell.snodrop,.sprow.snodrop{box-shadow:inset 0 0 0 3px var(--warn)}
.board th.emp.sdrop{box-shadow:inset 0 0 0 3px var(--ok)}
.board th.emp[data-semp]{cursor:pointer}
.sboard th.emp .nm{cursor:inherit}
.sboard tr.sdels th.emp,.sboard tr.sdels td.scell{background:rgba(var(--shade),.22);cursor:default;height:auto}
.palette.sdrop{box-shadow:0 0 0 2px var(--warn)}
.palette.sdrop::after{content:"Drop here to take it off the board";font-size:.74rem;font-weight:800;color:var(--warn)}
.jchip.sq{cursor:grab}
.jchip.sq .code{flex:1 1 100%;min-width:0;white-space:normal;font-size:.8rem;line-height:1.2}
.jchip.sq .nm{max-width:none;white-space:normal}
.jchip.sq.late{border-style:dashed}
.jchip.sq.hot{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.sqadd{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.sqadd input,.sqadd select{width:100%;min-height:34px}
.spill{flex-wrap:wrap;row-gap:0;align-items:flex-start}
.pill.spill .code{flex:1 1 0;white-space:normal}
.spill .sj{flex:1 1 100%;font-weight:400;font-size:.64rem;color:var(--muted);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spill .sx{min-height:0;height:18px;width:18px;padding:0;border:0;background:transparent;color:var(--muted);font-size:.72rem;line-height:1;flex:none}
.spill .sx:hover{color:var(--warn)}
.spill.done{opacity:.6;cursor:pointer}
.spill.late{border-color:var(--warn)}
.spill[draggable="true"]{cursor:grab}
.sweek{margin-top:10px}
.sprow{display:flex;gap:8px;align-items:flex-start;padding:6px 4px;border-top:1px solid var(--line);border-radius:6px}
.sprow.tap{cursor:pointer}
.sprow .spn{flex:0 0 7.5rem;font-weight:700;font-size:.86rem;display:flex;flex-direction:column;gap:2px}
.sprow .spc{flex:1;min-width:0}
.sdl{border-top:1px solid var(--line);padding-top:6px;margin-top:4px}
.mchip.sdone{opacity:.6}
.mchip.sdel{background:transparent;border:1px dashed color-mix(in srgb,var(--c) 70%,var(--mixhi))}
.sarm{z-index:13}
.sarm>span:first-child{white-space:normal;flex:1 1 14rem;min-width:0}
@media (pointer:coarse){.spill .sx{height:26px;width:26px}}
.sphint{display:none}
@media (max-width:860px){.palette .chips .jchip.sq .nm{display:block;flex:1 1 100%}.squeue .hint{display:none}.sphint{display:block}.squeue .chips .jrow{flex:1 1 100%;min-width:0}}
.shopdel{display:block;margin:0 0 3px;font-size:.74rem}
.shoplog{padding:3px 0;border-bottom:1px solid var(--line)}
.shoptoday{padding:8px 14px 0}
/* the project calendar's moves (calendars.js) */
.gb.k-own{background:repeating-linear-gradient(45deg,var(--gold) 0 6px,color-mix(in srgb,var(--gold) 55%,transparent) 6px 12px)}
.gb.k-gcghost{top:0;height:14px;background:transparent;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);box-sizing:border-box}
.gb.late{box-shadow:0 0 0 2px var(--warn)}
.gb[data-psbar]{cursor:pointer;touch-action:pan-y;z-index:1}
.gb[data-psbar].grab{cursor:grab}
.gb.dragging{opacity:.85;cursor:grabbing;z-index:3}
.psdragtip{position:absolute;top:-18px;z-index:4;pointer-events:none;white-space:nowrap;font-size:.7rem;font-weight:700;background:var(--panel);border:1px solid var(--line-2);border-radius:4px;padding:0 4px}
.pcwho{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px;margin-top:6px}
.pcwho label{flex-direction:row;align-items:center;gap:6px;font-weight:400}
/* shipping checklists (ship.js) */
.shiprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 0;font-weight:400}
.shiprow .hwset{width:150px;min-height:30px;padding:3px 6px}
.shiptbl td.c,.shiptbl th.c{text-align:center}
.shiptbl tr.shipgrp td{background:var(--soft);font-family:var(--display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);font-weight:800}
.shiptbl tr.shiphw td:first-child{padding-left:22px}
.shipnote{width:100%;min-width:110px;min-height:30px;padding:3px 6px}
/* the shop's intake (shop.js) */
.reqmsg{padding:6px 8px;margin:4px 0;border-radius:8px;background:var(--soft);border:1px solid var(--line)}
/* the general contractor (gc.js) */
.gcsteps button{min-width:34px;padding:0 6px}
.gcphases tr.gclate td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.gcg{position:relative;font-size:12px}
.gcgweeks{position:relative;height:18px;margin-left:190px;border-bottom:1px solid var(--line)}
.gcgweeks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;color:var(--muted)}
.gcgrow{display:flex;align-items:center;height:22px}
.gcgrow .nm{width:190px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.gcgtrack{position:relative;flex:1;height:100%;border-bottom:1px dashed var(--line)}
.gcgbar{position:absolute;top:5px;height:12px;border:1px solid var(--gold);border-radius:4px;overflow:hidden;background:rgba(var(--tint),.04)}
.gcgbar i{display:block;height:100%;background:var(--gold)}
.gcgbar.done{border-color:var(--ok)}.gcgbar.done i{background:var(--ok)}
.gcgbar.late{border-color:var(--warn)}.gcgbar.late i{background:var(--warn)}
.gcgtoday{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--warn);opacity:.7;pointer-events:none}
.gcest input,.gcest select{min-height:30px;padding:3px 6px}
.gcest td{vertical-align:middle}
.gcdivh td{background:var(--soft);padding:6px 8px}
.gcpkgline td{font-style:italic}
.gcsum td{padding:5px 8px}.gcsum tr.gctot td{border-top:2px solid var(--line-2);font-size:1.1em}
.gccalcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.gccalcs>.card{margin:0}
.gccalcin{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.gccalcin label{display:flex;flex-direction:column;gap:2px;min-width:0}
.gccalcin input{width:100%;min-width:0;box-sizing:border-box}
.gccalcout{display:flex;flex-direction:column;gap:4px;margin:10px 0;padding:8px 10px;border-radius:8px;background:var(--soft)}
.gccalcout>div{display:flex;gap:8px;align-items:baseline}
.gcboards{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.gcboard{display:grid;grid-template-columns:28px 1fr;gap:2px 8px;align-items:center}
.gcboard>.muted{grid-column:2}
.gcbn{color:var(--muted);text-align:right;font-size:12px}
.gcbbar{display:flex;height:22px;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.gcbbar i{display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(0,0,0,.45);background:rgba(212,160,23,.55);font-style:normal;font-size:11px;overflow:hidden;white-space:nowrap}
.gcbbar i.waste{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(var(--tint),.12) 4px 8px);border-right:0}
.gccheck{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:4px 12px;margin-top:8px}
.gcaward td{background:var(--ok-soft)}
@media (max-width:640px){.gcgweeks{margin-left:110px}.gcgrow .nm{width:110px}.gccalcs{grid-template-columns:1fr}}
/* the time clock (clock.js) */
.clkcard .clkhd{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.clkcard.on{box-shadow:inset 4px 0 0 var(--ok)}
.clkstate{display:block;font-size:1.15rem;margin:2px 0}
.clkbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.clkbtns .big{min-width:140px;min-height:52px;font-size:1.05rem}
.clkbtns select{min-height:44px;max-width:260px}
.clkrows{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.clkline{margin-top:2px;color:var(--muted)}.clkline b{color:var(--fg)}.clkline.diff{color:var(--fg)}
.clkextra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 14px 0}
.clkp{margin:2px 0;font-size:.9rem}.clkp.off b{color:var(--warn)}
.clkfm{margin-top:4px}.clkfm button{min-height:34px}
/* cards (certs.js) */
.certchip{display:inline-block;border:1px solid var(--line-2);border-radius:999px;padding:0 8px;font-size:.78rem;margin:1px}
.certchip.soon,.certdot.soon{color:var(--pend-ink,#f5b041)}.certchip.out,.certdot.out{color:var(--warn)}.certdot.ok{color:var(--ok)}
.certgrid td,.certgrid th{text-align:center;white-space:nowrap}.certgrid td:first-child,.certgrid th:first-child{text-align:left}
.warnbtn{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
/* safety forms (safety.js) */
.sfduebar{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0 8px}
.sfdue{font-size:.85rem}.sfdue.ok{color:var(--ok)}.sfdue.no{color:var(--muted)}
.sffill{max-width:240px}
.sfyn{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.sfyn .seg button{min-width:56px;min-height:38px}
.sfchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 10px}
.sigpad{display:block;width:100%;max-width:600px;height:auto;aspect-ratio:600/170;background:#fff;border-radius:8px;border:1px solid var(--line-2);touch-action:none}
.sfsigned img,.sfsigimg{max-width:300px;width:100%;background:#fff;border-radius:6px;display:block;margin:4px 0}
.sfsigrow{display:flex;align-items:center;gap:10px;margin:4px 0}.sfsigrow img{width:160px;background:#fff;border-radius:6px}
.sfsignext{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:8px;border:1px dashed var(--line-2);border-radius:8px}
.sfphotos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.sfph{position:relative}.sfph img,.sfthumb{width:110px;height:82px;object-fit:cover;border-radius:6px;cursor:pointer}
.sfph button{position:absolute;top:2px;right:2px;background:rgba(var(--shade),.6);border-radius:999px}
.sfans td:first-child{width:45%;color:var(--muted)}
.sfq{display:grid;grid-template-columns:20px 170px 1fr 1fr;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.sfq input[data-sfq="opts"],.sfq input[data-sfq="opts_es"]{grid-column:3 / span 1}
.sfqbtns{display:flex;gap:6px;justify-content:flex-end}
.langseg button{min-height:30px}
@media (max-width:640px){.sfq{grid-template-columns:20px 1fr}.sfq>*{grid-column:2}.clkbtns{width:100%}.clkbtns .big{flex:1}.clkbtns select{flex:1;max-width:none}}

/* ==========================================================================
   Light theme (the sun / moon button in the header, or the account menu's Appearance; app.js themeApply).
   Plain light page, white panels and dark text; BuildCortex blue stays the accent. The building photo is for the
   dark theme only. Every color above that assumed a dark page is a token that flips here.
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef1f5; --panel:#ffffff; --cell:rgba(15,23,32,.025); --soft:rgba(15,23,32,.045);
  --fg:#18212b; --fg-strong:#0f1720; --muted:#566373; --line:rgba(15,23,32,.12); --line-2:rgba(15,23,32,.22);
  --gold-ink:#1d5bd0; --pend-ink:#8a5a00; --pend-bg:rgba(232,176,48,.2); --ok:#1f8a4c; --ok-soft:rgba(31,138,76,.12); --warn:#cf3b30; --warn-soft:rgba(207,59,48,.1); --sel:#2c6fe0;
  --tint:15,23,32; --shade:255,255,255; --mixhi:#0f1720;
  --sfc:#ffffff; --sfc-2:#f6f8fa; --sfc-3:#eef2f6;
  --shadow:0 1px 2px rgba(15,23,32,.06),0 6px 18px rgba(15,23,32,.07);
}
/* no photo: the same grid as the dark theme's, drawn in a darker line on a light page */
:root[data-theme="light"] body.nobg{background:radial-gradient(ellipse 90% 80% at 50% 40%, transparent 55%, rgba(30,60,110,.07) 100%),
  repeating-linear-gradient(0deg, rgba(45,75,120,.11) 0 1px, transparent 1px 120px), repeating-linear-gradient(90deg, rgba(45,75,120,.11) 0 1px, transparent 1px 120px),
  repeating-linear-gradient(0deg, rgba(45,75,120,.045) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(45,75,120,.045) 0 1px, transparent 1px 24px),
  linear-gradient(180deg, #f4f7fb 0%, #edf1f6 55%, #e6ebf2 100%);background-attachment:fixed}
:root[data-theme="light"]{--panel:rgba(255,255,255,.94)}
:root[data-theme="light"] .band{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-2);box-shadow:0 1px 3px rgba(15,23,32,.06)}
:root[data-theme="light"] *{text-shadow:none!important}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff}
:root[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator{filter:none}
:root[data-theme="light"] .bcmark{box-shadow:0 0 0 1px rgba(59,140,255,.35)}
:root[data-theme="light"] .rpcard.rpbig{background:var(--bg)}
:root[data-theme="light"] .bdg.a{color:#936a06}
:root[data-theme="light"] .bdg.u{color:#003b99}
:root[data-theme="light"] .bdg.st{color:#1d7c41}
:root[data-theme="light"] .mchip.warn .nm::before{color:#990f00}
:root[data-theme="light"] .ptag{color:#003b99}
:root[data-theme="light"] .authcard .muted{color:#344965}
:root[data-theme="light"] .note.k-sched .ni{color:#003b99}
:root[data-theme="light"] .hchip.info{color:#003499}
:root[data-theme="light"] select.costat.info{color:#003499}
:root[data-theme="light"] .gtag.ship.ok{color:#25743e}
:root[data-theme="light"] .gtag.ship.late{color:#933a06}
:root[data-theme="light"] .askbar svg{color:#004699}
:root[data-theme="light"] .askbar input::placeholder{color:#384a61}
:root[data-theme="light"] .askbar kbd{color:#384a61}
:root[data-theme="light"] .askmic{color:#004699}
:root[data-theme="light"] .aithink{border-top-color:#004699}
:root[data-theme="light"] .askspeak{color:#004699}
:root[data-theme="light"] .askbar.askdock{background:#fff;border-color:var(--line-2);box-shadow:0 6px 24px rgba(15,23,32,.14)}
:root[data-theme="light"] .askbar input{background:transparent}
:root[data-theme="light"] .ccount{background:color-mix(in srgb,var(--c,#3b8cff) 18%,#fff);color:color-mix(in srgb,var(--c,#3b8cff) 55%,#0f1720)}
@media (max-width:900px){:root[data-theme="light"] .tabs{background:rgba(255,255,255,.97);border-top:1px solid var(--line-2);box-shadow:0 -2px 10px rgba(15,23,32,.06)}}

:root[data-theme="light"] .lookprev-bar{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
/* a logo made for dark (white) in light mode, with no light-mode one: on a dark tile so it still shows (app.js logoApply) */
:root[data-theme="light"] .logo.ondark,.looklogo.forlight img.ondark,:root[data-theme="light"] .lookprev-bar img.ondark{background:#0f1720;border-radius:9px;padding:4px 8px;box-sizing:content-box}
.doclogo.looklogo.forlight{background:#f4f6f9;border:1px solid rgba(15,23,32,.14)}
:root[data-theme="light"] .lookprev.lookgrid{background-image:repeating-linear-gradient(0deg, rgba(45,75,120,.11) 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, rgba(45,75,120,.11) 0 1px, transparent 1px 60px), linear-gradient(180deg, #f4f7fb, #e6ebf2)!important}


/* Concrete (concrete.js): each placement on the estimate as a card of its parts; a pour's sections; the progress steps */
.cnitem{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;background:var(--cell)}
.cnhd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cnhd>input[data-k="desc"]{flex:1;min-width:12rem;width:auto!important}
.cngrp{display:flex;align-items:center;gap:4px;white-space:nowrap}
.cnflds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 14px;margin-top:10px}
.cnf{min-width:0}
.cnfl{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.cnadds{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:4px;align-items:center}
.cnout{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.cnout b:last-child{font-size:1.05rem}
.cnnote{margin-top:4px}
.cnset summary{list-style:none}
.cnsetg{display:grid;gap:12px;margin-top:10px}
.cnsetg .dwset{gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:4px}
.cnpour details{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.cnpour summary{cursor:pointer}
.cntix input{min-width:0}
.cntix tr.cnflag td{border-top:0;padding-top:0}
.cnbreaks .srow{padding:6px 0}
.cnprog .cnsteps{display:flex;flex-wrap:wrap;gap:4px}
.cnprog .cnsteps button{border-radius:999px;padding:4px 10px;min-height:30px}
.cnprog .cnsteps button.on{background:var(--ok-soft);border-color:var(--ok);color:var(--fg)}
.cnprog .cnpct{min-width:3.2em;text-align:right}
@media (max-width:640px){.cnflds{grid-template-columns:1fr}.cnprog .nm{flex-basis:100%}}

/* Landscaping (landscape.js): the site plan (on the roof plan's styles, coatings.js), its tools and key, the plant list,
   the takeoff. The swatches are what each area is filled with on the plan: sod in mowing stripes, seed, turf, soil,
   mulch, rock, pavers, and what's left alone */
.lschips{display:inline-flex;flex-wrap:wrap;gap:4px}
.lschips button{display:inline-flex;align-items:center;gap:4px}
.lschips button[aria-pressed="true"]{background:var(--gold);color:#ffffff;border-color:var(--gold);font-weight:800}
.lshelp{flex:1 1 220px}
.lssw{display:inline-block;width:16px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle;border:1.5px solid rgba(0,0,0,.35);flex:none;box-sizing:border-box}
.lssw.sod{background:repeating-linear-gradient(55deg,#5aa845 0 4px,#6cbb55 4px 8px);border-color:#2f6b25}
.lssw.seed{background:radial-gradient(circle,#6f9f52 1.2px,transparent 1.6px) 0 0/5px 5px,#a8d38a;border-color:#5f8f43}
.lssw.turf{background:repeating-linear-gradient(45deg,#33b54a 0 2px,#2a9a3f 2px 3px);border-color:#1f7a30}
.lssw.bed{background:radial-gradient(circle,#6a4e35 1.2px,transparent 1.6px) 0 0/5px 5px,#8b6a4b;border-color:#4e3826}
.lssw.mulch{background:repeating-linear-gradient(20deg,#7b4a26 0 3px,#a46a3a 3px 4px);border-color:#4a2a12}
.lssw.rock{background:radial-gradient(circle,#e2ded7 1.4px,#8f8a80 1.8px,transparent 2.2px) 0 0/6px 6px,#c4bfb6;border-color:#77716a}
.lssw.hard{background:linear-gradient(90deg,#b49c74 1px,transparent 1px) 0 0/8px 100%,linear-gradient(0deg,#b49c74 1px,transparent 1px) 0 0/100% 5px,#dcc9a3;border-color:#8f7a55}
.lssw.exist{background:repeating-linear-gradient(45deg,#d3d6db 0 3px,#b5bac2 3px 5px);border-color:#7a808a}
.lssw.ln{height:0;border:0;border-top:4px solid #4a2f16;border-radius:0}
.lssw.ln.curb{border-top:5px solid #8d939c}
.lssw.ln.pipe{border-top:3px dashed #1d6fd0}
.lssw.ln.drip{border-top:3px dotted #1fa1c2}
.lssw.ln.fence{border-top:3px dashed #6b4f2a}
.lssw.pl{width:11px;height:11px;border-radius:50%}
.lssw.pl.tree{background:rgba(46,125,50,.45);border-color:#1b5e20}
.lssw.pl.palm{background:rgba(139,170,40,.45);border-color:#55701a}
.lssw.pl.shrub{background:#43a047;border-color:#256d2a}
.lssw.pl.perennial{background:#ab60c4;border-color:#6d3480}
.lssw.pl.ground{background:#9ccc65;border-color:#5b8f2d;border-style:dashed}
.lslegend span{display:inline-flex;align-items:center;gap:2px}
.lssvg:not(.drawing) .lsa[data-act],.lssvg:not(.drawing) .lsl[data-act]{cursor:pointer}
.lssvg:not(.drawing) .lsa[data-act]:hover polygon{stroke-width:3.5}
.lssvg:not(.drawing) .lsl[data-act]:hover polyline{stroke-opacity:.65}
.lssvg .lsplant{pointer-events:none}
.lssvg.plant .lsplant[data-act]{pointer-events:auto;cursor:not-allowed}
.lssvg:not(.drawing) .lssugg[data-act],.lssvg:not(.drawing) .lshint[data-act]{pointer-events:auto;cursor:pointer}
.lssvg .lslbl,.lssvg .lstmp{pointer-events:none}
.lsksym{width:26px;height:26px;flex:none}
.lskrow{display:flex;gap:8px;align-items:center}
tr.lsgrp td{background:rgba(var(--shade),.35);padding-top:6px;padding-bottom:6px}
.lsprogg{margin:12px 0 2px}
.rpwrap.lsmini{max-height:440px}
.rpwrap.lsmini svg{max-height:436px}
@media (max-width:900px){table.stack tr.lsgrp{display:block}}
/* drywall and painting (walls.js): the kinds of area, the plan, the area form's openings */
.wlsw{display:inline-block;width:16px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle;border:2px solid #2e6fc9;flex:none;box-sizing:border-box;background:rgba(46,111,201,.12)}
.wlsw.wall{height:0;border:0;border-top:5px solid #b5651d;border-radius:0}
.wlsw.ceil{background:rgba(120,160,220,.3);border:1.5px dashed #4f7fc0}
.wlsw.trim{height:0;border:0;border-top:3px dashed #8a4fb5;border-radius:0}
.wlsw.door{background:#d9d9d9;border:1.5px solid #6b6b6b;width:9px;height:14px;border-radius:2px}
.wlsw.ext{height:0;border:0;border-top:5px solid #2a8a6c;border-radius:0}
.wlsw.prep{background:repeating-linear-gradient(45deg,#e8e2d0 0 3px,#cfc6ad 3px 5px);border:1.5px solid #9d927a}
.wllegend span{display:inline-flex;align-items:center;gap:3px}
.wlsvg:not(.drawing) .wla[data-act]{cursor:pointer}
.wlsvg:not(.drawing) .wla[data-act]:hover polygon{stroke-width:6}
.wlsvg:not(.drawing) .wla[data-act]:hover polyline{stroke-opacity:.55}
.wlsvg .wllbl,.wlsvg .wltmp{pointer-events:none}
.wlsvg:not(.drawing) .wlhint[data-act]{pointer-events:auto;cursor:pointer}
.wlsvg.drawing .wla,.wlsvg.drawing .wlhint{pointer-events:none}
.wlgrp{margin:10px 0 0}
.wlrow .hchip{font-size:.7rem}
.wlopens{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px 10px}
.wlorow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end;padding:6px 0;border-top:1px solid var(--line)}
.wlorow:first-child{border-top:0}
.wlorow label{font-weight:400}
.wlorow label.chk{flex-direction:row;align-items:center;gap:4px;min-height:30px}
.wlform [data-wlprev]{font-size:.84rem;color:var(--fg-strong)}
table.ptsys input,table.ptsys select{max-width:100%}
/* the Projects page's sort (hub.js projSortPick) */
.projsort{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.projsort select{width:auto;min-width:0}

/* Media (media.js): Projects › Photos & videos and each project's Media tab, by day */
.mdbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 4px}
.mdsel select{width:auto;min-width:0;max-width:14rem}
.mdsel .sr,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mdq{flex:1 1 12rem;min-width:9rem;max-width:22rem}
.mdbusy{color:var(--gold-ink);font-weight:700}
.mdday{margin-top:16px}
.mdhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mdhead b{font-size:1.02rem}
.mdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.mdtile{position:relative;display:block;padding:0;min-height:0;aspect-ratio:1;border-radius:10px;overflow:hidden;background:rgba(var(--shade),.5);text-align:left;border:1px solid var(--line)}
.mdtile:hover{border-color:var(--gold-rule)}
.mdtile img,.mdtile video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .25s}
.mdtile:hover img{transform:scale(1.03)}
.mdtile .mdcap{position:absolute;left:0;right:0;bottom:0;padding:22px 7px 6px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-size:.74rem;line-height:1.3}
.mdtile .mdcap b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdtile .mdcap small{display:block;opacity:.88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdjob{position:absolute;top:6px;left:6px;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;font-weight:800;color:#fff;background:rgba(0,0,0,.6);border-left:4px solid var(--c,#3b8cff);border-radius:6px;padding:2px 7px}
.mdjob.big{position:static;max-width:100%;font-size:.84rem;padding:4px 10px;min-height:0;cursor:pointer;border-top:0;border-right:0;border-bottom:0}
.mdsrc{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);border-radius:6px;padding:1px 5px;font-size:.8rem}
.mdtags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:3px}
.mdtags i{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.02em;background:var(--gold-dk,#1f6fe0);color:#fff;border-radius:999px;padding:1px 7px}
.mdtags.big i{font-size:.78rem;padding:2px 9px}
.mdtile .mdplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.mdtile .mdwalk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;opacity:.35;padding-bottom:30px}
label.btnlike.disabled{opacity:.55;pointer-events:none}
.chipbtn{min-height:30px;padding:3px 11px;border-radius:999px;font-size:.82rem}
.chipbtn[aria-pressed="true"]{background:var(--gold-dk,#1f6fe0);border-color:var(--gold-rule);color:#fff;font-weight:700}
.mdtagpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mdpend{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-bottom:10px;max-height:180px;overflow:auto}
.mdpend img,.mdpend video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#000}
/* full screen: the photo, back and next, its details */
body.mdlbon{overflow:hidden}
.mdlb{position:fixed;inset:0;z-index:300;background:#05080e;color:#fff;display:flex;flex-direction:column}
.mdlbtop{display:flex;align-items:center;padding:10px 14px;gap:10px}
.mdlbx{background:rgba(255,255,255,.12);border-color:transparent;color:#fff;border-radius:50%;width:40px;height:40px;padding:0}
.mdlbstage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:0 8px}
.mdlbstage img,.mdlbstage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.mdnav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border-radius:12px;background:rgba(255,255,255,.12);border-color:transparent;color:#fff;font-size:2rem;line-height:1;padding:0;z-index:2}
.mdnav.prev{left:10px}.mdnav.next{right:10px}
.mdlbinfo{padding:12px 16px 16px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.1);max-height:42vh;overflow:auto}
.mdlbinfo .muted{color:rgba(255,255,255,.65)}
.mdlbrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.mdlb .chipbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.mdlb .chipbtn[aria-pressed="true"]{background:var(--gold-dk,#1f6fe0)}
.mdcapedit{display:flex;gap:6px;margin-top:8px}
.mdcapedit input{flex:1;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.mdlbacts{gap:6px;margin-top:10px;flex-wrap:wrap}
.mdlb button.small:not(.primary):not(.danger){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
@media (max-width:520px){.mdgrid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:5px}.mdtile .mdcap{font-size:.66rem;padding:14px 5px 4px}.mdtile .mdcap b{display:none}.mdjob{font-size:.6rem;padding:1px 5px}.mdnav{width:38px;height:52px;font-size:1.6rem}.mdq{max-width:none}}

/* Receipts (receipts.js): scan one, check what was read, the office approves it into material costs */
.rcshoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 6px}
label.btnlike.rcbig{font-size:1.08rem;padding:14px 20px}
.rcread{text-align:center}
.rcread img{max-width:100%;max-height:50vh;border-radius:10px;opacity:.75}
.rcform{position:relative}
.rcthumb{float:right;margin:0 0 8px 12px}
.rcthumb img{width:96px;height:128px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2)}
.rcitems input{width:100%;min-width:0}
.rcitems td.wide input{min-width:10rem}
.rcmoney{grid-template-columns:repeat(3,minmax(0,1fr))}
.rcview{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px;margin-bottom:10px}
.rcphoto img{width:100%;max-height:340px;object-fit:contain;border-radius:8px;background:#000;display:block}
.rcdl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.rcdl dt{color:var(--muted);font-size:.85rem}
.rcdl dd{margin:0}
.rcrow{width:100%;text-align:left;display:flex;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 2px;min-height:0}
.rcrow:hover{background:rgba(var(--tint),.04)}
.rcamt{margin-left:auto;white-space:nowrap}
@media (max-width:600px){.rcview{grid-template-columns:1fr}.rcthumb img{width:72px;height:96px}}

/* ---------- Daily updates (dailies.js) ---------- */
.dlpics{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dlpic{padding:0;min-height:0;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:rgba(var(--shade),.5)}
.dlpic img{width:100%;height:100%;object-fit:cover;display:block}
.dlpics.sm .dlpic{width:56px;height:56px}
.dlpics.big{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.dlpics.big .dlpic{width:auto;height:auto;aspect-ratio:4/3}
.dladd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:72px;height:72px;border:1.5px dashed var(--gold-rule);border-radius:8px;cursor:pointer;font-size:1.3rem}
.dladd small{font-size:.7rem;font-weight:700}
.dladd.disabled{opacity:.5;pointer-events:none}
.dlbig img{width:100%;max-height:70vh;object-fit:contain;border-radius:8px;display:block;background:#05080e}
.dlcard .dltext{white-space:pre-wrap;margin:8px 0 0;font-size:1.02rem;line-height:1.45}
.dlmail{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;cursor:pointer}
.dlmail input{margin-top:3px;width:20px;height:20px;flex:none}
.dlmail span span{display:block}
.dlmissing .srow{gap:8px;flex-wrap:wrap}

/* ---------- My screens (screens.js) ---------- */
.scrlist{display:grid;gap:6px}
.scritem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;min-height:56px}
.scricon svg{width:22px;height:22px;display:block}
.scrtxt{flex:1;min-width:0}
.scrtxt b{display:block}
.scrtxt small{display:block;opacity:.75;font-weight:400}
.scrsw{flex:none;width:42px;height:24px;border-radius:12px;background:rgba(var(--shade),.9);border:1px solid var(--line);position:relative;transition:background .15s}
.scrsw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.scritem[aria-pressed="true"]{border-color:var(--gold-rule)}
.scritem[aria-pressed="true"] .scrsw{background:var(--gold-rule)}
.scritem[aria-pressed="true"] .scrsw i{left:20px}
@media (prefers-reduced-motion:reduce){.scrsw,.scrsw i{transition:none}}