/* the artifact host used to supply these; a standalone page must set them itself */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;font:14px/1.5 system-ui,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ground:#F1F3F2;
  --surface:#FFFFFF;
  --surface-2:#E6EAE8;
  --ink:#141917;
  --ink-2:#4A5350;
  --ink-3:#79827E;
  --line:#D3D8D6;
  --line-strong:#B2B9B6;
  --accent:#FF6A13;
  --accent-ink:#241000;
  --accent-text:#9A3412;
  --accent-soft:#FFE7D6;
  --open:#C2410C;
  --prog:#1D6FA8;
  --ready:#6B4FBF;
  --closed:#2F6B4F;
  --danger:#B3261E;
  --shadow:0 1px 2px rgba(20,25,23,.08), 0 4px 14px rgba(20,25,23,.06);

  --f-disp:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body:"Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111412;
    --surface:#191D1B;
    --surface-2:#232825;
    --ink:#E9EEEB;
    --ink-2:#A7B0AC;
    --ink-3:#7A837F;
    --line:#2D3330;
    --line-strong:#414846;
    --accent:#FF6A13;
    --accent-ink:#241000;
    --accent-text:#FF9457;
    --accent-soft:#3A1B08;
    --open:#F0793E;
    --prog:#58A6DA;
    --ready:#A88FE8;
    --closed:#59A87C;
    --danger:#F2685F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#111412;
  --surface:#191D1B;
  --surface-2:#232825;
  --ink:#E9EEEB;
  --ink-2:#A7B0AC;
  --ink-3:#7A837F;
  --line:#2D3330;
  --line-strong:#414846;
  --accent:#FF6A13;
  --accent-ink:#241000;
  --accent-text:#FF9457;
  --accent-soft:#3A1B08;
  --open:#F0793E;
  --prog:#58A6DA;
  --ready:#A88FE8;
  --closed:#59A87C;
  --danger:#F2685F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:30;
  background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:10px 14px;
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.mark{
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
}
.mark svg{width:100%;height:100%;display:block}
.brand h1{
  font-family:var(--f-disp);font-weight:700;font-size:19px;
  letter-spacing:.02em;margin:0;text-transform:uppercase;white-space:nowrap;
}
.spacer{flex:1}
.projpick{
  display:flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:6px 10px;max-width:52vw;
  font-family:var(--f-disp);font-weight:600;font-size:15px;
  letter-spacing:.02em;cursor:pointer;
}
.projpick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{
  font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:3px;padding:5px 7px;cursor:pointer;
  background:none;white-space:nowrap;
}

.banner{
  padding:9px 14px;font-size:13.5px;
  background:var(--accent-soft);color:var(--ink);
  border-bottom:1px solid var(--line);
  display:flex;gap:8px;align-items:baseline;
}
.banner.warn{background:color-mix(in srgb, var(--open) 14%, var(--surface));}
.banner b{font-family:var(--f-disp);font-size:14px;letter-spacing:.03em;text-transform:uppercase;flex:none}

main{flex:1;padding:14px 14px 96px;max-width:960px;width:100%;margin:0 auto}

/* ---------- bottom tabs ---------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--surface);border-top:1px solid var(--line);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  background:none;border:0;border-top:3px solid transparent;
  padding:11px 4px 13px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--f-disp);font-weight:600;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.tab[aria-current="true"]{color:var(--ink);border-top-color:var(--accent)}
.tabs[data-count="5"] .tab{font-size:11px;letter-spacing:.03em;padding-left:2px;padding-right:2px}
.tabs[data-count="5"] .tab svg{width:19px;height:19px}
/* Six tabs on a 390px phone: the labels are what give, not the touch targets,
   which stay a full sixth of the bar each. */
.tabs[data-count="6"] .tab{font-size:9.5px;letter-spacing:.01em;padding:10px 1px 12px;gap:2px;min-width:0}
.tabs[data-count="6"] .tab svg{width:18px;height:18px}
.tabs[data-count="6"] .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Seven (admin, with P&IDs): same idea, one notch tighter. */
.tabs[data-count="7"] .tab{font-size:8.6px;letter-spacing:0;padding:10px 0 12px;gap:2px;min-width:0}
.tabs[data-count="7"] .tab svg{width:17px;height:17px}
.tabs[data-count="7"] .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Eight (with FCO): the floor. Below this the labels stop being readable, so
   anything further has to come off the bar rather than shrink on it. */
.tabs[data-count="8"] .tab{font-size:7.2px;letter-spacing:0;padding:10px 0 12px;gap:2px;min-width:0}
.tabs[data-count="8"] .tab svg{width:16px;height:16px}
.tabs[data-count="8"] .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- primitives ---------- */
.sect{margin:0 0 22px}
.sect-h{
  display:flex;align-items:baseline;gap:10px;margin:0 0 10px;
  font-family:var(--f-disp);font-weight:700;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.sect-h .rule{flex:1;height:1px;background:var(--line)}
.sect-h .ct{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);letter-spacing:0}

.btn{
  border:1px solid var(--line-strong);background:var(--surface);
  border-radius:4px;padding:11px 14px;cursor:pointer;
  font-family:var(--f-disp);font-weight:600;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;
}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:none;border-color:var(--line)}
.btn.sm{padding:7px 10px;font-size:13px}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

label.fld{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
label.fld>.lab{
  font-family:var(--f-disp);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
input[type=text],input[type=tel],input[type=date],input[type=number],select,textarea{
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:4px;padding:11px 12px;width:100%;
}
textarea{min-height:78px;resize:vertical;line-height:1.4}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:5px;padding:14px;
}

.empty{
  border:1px dashed var(--line-strong);border-radius:5px;
  padding:26px 18px;text-align:center;color:var(--ink-3);
}
.empty p{margin:0 0 4px}
.empty .big{font-family:var(--f-disp);font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- capture ---------- */
.shoot{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:22px;margin:0 0 8px;
  background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:6px;cursor:pointer;
  font-family:var(--f-disp);font-weight:700;font-size:22px;
  letter-spacing:.05em;text-transform:uppercase;
}
.shoot svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8}
.shoot:active{filter:brightness(.93)}
.subshoot{display:flex;gap:8px;margin:0 0 20px}
.subshoot .btn{flex:1}

.shot{
  position:relative;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;background:var(--surface-2);margin:0 0 12px;
}
.shot img{display:block;width:100%;max-height:46vh;object-fit:contain;background:#0b0d0c}
.shot .kb{
  position:absolute;top:8px;right:8px;
  font-family:var(--f-mono);font-size:11px;
  background:rgba(10,12,11,.72);color:#EAEFEC;padding:3px 6px;border-radius:3px;
}

.feed{display:flex;flex-direction:column;gap:10px}
.entry{
  display:grid;grid-template-columns:76px 1fr;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:5px;padding:10px;
}
.entry .th{width:76px;height:76px;border-radius:4px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.entry .th img{width:100%;height:100%;object-fit:cover;display:block}
.entry .th .noimg{font-family:var(--f-disp);font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.entry .cap{margin:0 0 6px;line-height:1.35}
.entry .meta{
  font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:4px 10px;
}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-disp);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:3px;padding:2px 7px;color:var(--ink-2);
}

/* ---------- punchlist ---------- */
.filters{display:flex;gap:6px;overflow-x:auto;padding:0 0 12px;-webkit-overflow-scrolling:touch}
.filters .btn{white-space:nowrap;flex:none}
.filters .btn[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

.plist{display:flex;flex-direction:column;gap:8px}
.pitem{
  display:grid;grid-template-columns:5px 1fr auto;gap:0 11px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:5px;overflow:hidden;cursor:pointer;text-align:left;
  width:100%;padding:0;font:inherit;color:inherit;
}
.pitem .stripe{background:var(--st)}
/* A thumbnail takes its own column so the text keeps its full width alongside,
   rather than being squeezed by a picture floated into it. Square and cropped:
   mixed portrait and landscape shots down a list read as a ragged edge. */
.pitem.has-shot{grid-template-columns:5px 64px 1fr auto}
.pitem .thumb{
  width:64px;height:64px;object-fit:cover;display:block;
  align-self:center;border-radius:4px;background:var(--line);
}
.pitem .body{padding:11px 0 11px 0;min-width:0}
.pitem .ttl{font-weight:600;margin:0 0 4px;line-height:1.3}
.pitem .sub{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:3px 9px}
.pitem .right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;padding:11px 11px 11px 0}
.stat{
  font-family:var(--f-disp);font-weight:700;font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--st);border:1px solid var(--st);border-radius:3px;padding:2px 6px;white-space:nowrap;
}
.pri-h{font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.07em;color:var(--open);text-transform:uppercase}

/* ---------- modal / sheet ---------- */
.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(8,10,9,.55);
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet{
  background:var(--surface);width:100%;max-width:620px;max-height:92vh;overflow:auto;
  border-radius:10px 10px 0 0;padding:16px 16px 22px;box-shadow:var(--shadow);
}
.sheet-h{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:var(--f-disp);font-weight:700;font-size:19px;
  letter-spacing:.03em;text-transform:uppercase;
}
.sheet-h .x{margin-left:auto;background:none;border:0;cursor:pointer;font-size:26px;line-height:1;color:var(--ink-3);padding:0 4px}
.pickrow{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:13px 2px;cursor:pointer;font:inherit;color:inherit;
}
.pickrow:last-child{border-bottom:0}
.pickrow .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none}
.pickrow[aria-selected="true"] .dot{background:var(--accent)}
.pickrow .nm{flex:1;font-weight:500}
.pickrow .tag{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}

/* The shift day the capture screen is logging to. An inspector shooting at
   6:05 AM needs to see which day it lands on without doing the arithmetic. */
.dayline{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--f-disp);font-weight:600;font-size:14.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 12px;padding:0 2px;
}
.dayline span{
  font-family:var(--f-mono);font-weight:400;font-size:11px;
  letter-spacing:.04em;color:var(--ink-3);text-transform:none;white-space:nowrap;
}
/* The day picker sits in the dayline itself rather than above it, so the screen
   still answers "which day am I looking at" in one glance. */
.dayline .daypick input{
  font:inherit;color:inherit;background:none;border:0;padding:0;
  text-transform:uppercase;letter-spacing:.03em;min-width:9.5em;
}
.dayline .daypick input::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;
}
.dayline .btn{text-transform:none;letter-spacing:0}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Day/night marker in an entry's meta line. Night gets the filled treatment
   because it is the exception on most jobs and the one worth spotting. */
.meta .shf{
  font-family:var(--f-disp);font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:1px 5px;border-radius:3px;
}
.meta .shf.day{color:var(--ink-3);border:1px solid var(--line)}
.meta .shf.night{background:var(--accent-soft);color:var(--accent-text);border:1px solid transparent}

/* ---------- manpower ---------- */
.mptotal{
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);
  border-radius:5px;padding:14px 16px;margin:0 0 20px;
}
.mptotal .n{font-family:var(--f-disp);font-weight:700;font-size:46px;line-height:.95;font-variant-numeric:tabular-nums}
.mptotal .l{font-family:var(--f-disp);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-top:5px}
.mptotal .d{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:3px}
.mprow{display:grid;grid-template-columns:1fr 78px 40px;gap:8px;margin:0 0 8px;align-items:center}
.mprow .mpn{text-align:center;font-variant-numeric:tabular-nums}
.mprow .mpx{
  background:none;border:1px solid var(--line);border-radius:4px;
  height:44px;cursor:pointer;font-size:21px;line-height:1;color:var(--ink-3);
}
.mprow .mpx:hover{color:var(--danger);border-color:var(--danger)}

/* ---------- report ---------- */
.rephead{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 16px}
.rephead label.fld{margin:0;flex:1;min-width:140px}
.tog{display:flex;align-items:center;gap:8px;width:100%;font-size:14px;color:var(--ink-2);cursor:pointer}
.tog input{width:20px;height:20px;accent-color:var(--accent-text);flex:none}
.tog em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:0 0 18px}
.stat-c{background:var(--surface);padding:12px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-c .n{font-family:var(--f-disp);font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.stat-c .l{font-family:var(--f-disp);font-weight:600;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

.rep-area{margin:0 0 20px}
.rep-area>h4{
  font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 9px;padding:0 0 5px;border-bottom:2px solid var(--ink);
}
.rep-rows{display:flex;flex-direction:column;gap:10px}
.rep-row{display:grid;grid-template-columns:110px 1fr;gap:12px}
.rep-row img{width:110px;border-radius:4px;border:1px solid var(--line);display:block}
.rep-row .txt p{margin:0 0 5px;line-height:1.4}
.rep-row .txt .meta{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}

table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
table.tbl th{
  text-align:left;font-family:var(--f-disp);font-weight:600;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--line-strong);padding:7px 8px 7px 0;
}
table.tbl td{border-bottom:1px solid var(--line);padding:9px 8px 9px 0;vertical-align:top}
.tblwrap{overflow-x:auto}

/* ---------- admin ---------- */
.rosterrow{
  display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);
}
.rosterrow .nm{flex:1;min-width:0}
.rosterrow .nm b{display:block;font-weight:600}
.rosterrow .nm span{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.rosterrow.off{opacity:.5}
.meter{height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin:8px 0 6px}
.meter i{display:block;height:100%;background:var(--accent)}

.note{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.note code{font-family:var(--f-mono);font-size:12.5px;background:var(--surface-2);padding:1px 5px;border-radius:3px}

/* ---------- gate ---------- */
.gate{max-width:440px;margin:min(9vh,70px) auto;padding:0 16px;text-align:center}
.gate .card{text-align:left}
.gate .mk{
  width:96px;height:96px;display:grid;place-items:center;margin:0 auto 18px;
}
.gate .mk svg{width:100%;height:100%;display:block}
.gate h2{font-family:var(--f-disp);font-weight:700;font-size:30px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 6px;text-wrap:balance}
.gate p.sub{color:var(--ink-2);margin:0 0 22px;font-size:15px}
.gate .card{margin:0 0 12px}
.err{color:var(--danger);font-size:13.5px;margin:8px 0 0}

@media (min-width:760px){
  .app{flex-direction:row}
  .topbar{
    position:fixed;top:0;bottom:0;left:0;width:230px;
    flex-direction:column;align-items:stretch;gap:14px;
    border-right:1px solid var(--line);border-bottom:0;padding:18px 14px;
  }
  .brand{margin-bottom:4px}
  .projpick{max-width:none}
  .tabs{
    position:static;grid-auto-flow:row;border-top:0;background:none;
    gap:2px;order:3;
  }
  .tab{flex-direction:row;justify-content:flex-start;gap:10px;border-top:0;border-left:3px solid transparent;padding:10px 10px;font-size:14px}
  .tab[aria-current="true"]{border-left-color:var(--accent);background:var(--surface-2)}
  .who{order:4;margin-top:auto;text-align:left}
  main{margin-left:230px;padding:24px 26px 60px}
  .banner{margin-left:230px}
  .scrim{align-items:center}
  .sheet{border-radius:8px;max-height:82vh}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Printing only exists on desktop; on a phone the viewer swallows it, so the
   PDF button is the way out there. */
@media (max-width:759px){ #rPrint{display:none} }

/* The wordmark stays on every screen so the phone and the desktop read the
   same. .brand carries min-width:0 so it can shrink, which is what clipped
   "WALKDOWN" before — on a narrow screen the job picker gives up the width
   instead, since its text already truncates gracefully. */
@media (max-width:560px){
  .brand{flex:none;min-width:auto}
  .brand h1{font-size:17px}
  .projpick{max-width:26vw}
  /* the signed-in name is the least load-bearing thing in this row */
  .who{max-width:84px;overflow:hidden;text-overflow:ellipsis}
}

@media print{
  .topbar,.tabs,.banner,.rephead,.noprint{display:none!important}
  main{margin:0;padding:0;max-width:none}
  body{background:#fff;color:#000}
  .rep-area>h4{border-bottom:2px solid #000}
  .stats{border-color:#999}
}

/* ---------- standalone-only additions ---------- */
.lab2{
  font-family:var(--f-disp);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 8px;
}
.rep-title{
  font-family:var(--f-disp);font-weight:700;font-size:26px;letter-spacing:.02em;
  text-transform:uppercase;margin:0 0 2px;text-wrap:balance;
}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
#authScreen:empty{display:none}


/* ---- punchlist search ---------------------------------------------------
   The panel is positioned against the wrapper rather than pushed into the
   flow, so the list underneath does not jump down every time a suggestion
   appears and back up again as it is typed past. */
.psearch{position:relative;margin:0 0 10px}
.psearch input{
  width:100%;padding:10px 34px 10px 12px;font:inherit;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  -webkit-appearance:none;appearance:none;
}
.psearch input:focus{outline:none;border-color:var(--accent)}
/* WebKit draws its own clear button on a search input, which lands right on top
   of ours - two crosses side by side, one of which does not clear the results. */
.psearch input::-webkit-search-cancel-button,
.psearch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.psearch .pqx{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;line-height:1;font-size:20px;
  background:none;border:0;color:var(--ink-3);cursor:pointer;padding:0;
}
.psearch .sugg{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden;max-height:60vh;overflow-y:auto;
}
.psearch .sg{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 12px;background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.psearch .sg:last-child{border-bottom:0}
.psearch .sg:hover,.psearch .sg:focus{background:var(--line)}
.psearch .sg .k{
  font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto;min-width:62px;
}


/* The build line sits quietly at the bottom of Capture - present for anyone
   who needs it, in nobody's way the rest of the time. */
.appver{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:18px 0 4px;padding-top:12px;border-top:1px solid var(--line);
}
.appver span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}


/* Drawing headers inside a list. Sticky, because the whole point is knowing
   which drawing you are looking at while you scroll its items - a header that
   scrolls away leaves you guessing halfway down a long one. */
.pidhead{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:9px;
  margin:14px 0 7px;padding:6px 2px;background:var(--ground);
}
.pidhead:first-child{margin-top:2px}
.pidhead .pid{
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);white-space:nowrap;
}
.pidhead .rule{flex:1;height:1px;background:var(--line)}
.pidhead .ct{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}

.listbar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.listbar .note{margin:0}

/* ---------- P&ID completion ---------- */
.seg{display:flex;border:1px solid var(--line-strong);border-radius:5px;overflow:hidden;margin:0 0 12px}
.seg button{flex:1;background:var(--surface);border:0;padding:10px 6px;cursor:pointer;
  font-family:var(--f-disp);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.jobpct{margin:0 0 12px}
.jp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 10px}
.jp-n{font-family:var(--f-disp);font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.jp-side{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);text-align:right;line-height:1.5}
.pbar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;flex:1;min-width:60px}
.pbar.big{height:12px;border-radius:6px}
.pbar span{display:block;height:100%;background:var(--closed);border-radius:inherit}
#pidQ{background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;padding:10px 12px;font:inherit;min-width:0}
.pidcard{background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.pidcard.open{border-color:var(--line-strong)}
.pidcard.off{opacity:.6}
.pid-h{display:grid;grid-template-columns:1fr auto;gap:6px 10px;width:100%;padding:12px 14px;background:none;border:0;
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.pid-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.pid-t b{font-family:var(--f-mono);font-size:14px;letter-spacing:.02em}
.pid-sub{flex-basis:100%;color:var(--ink-2);font-size:14px}
.pid-p{font-family:var(--f-disp);font-weight:700;font-size:24px;font-variant-numeric:tabular-nums;align-self:start}
.pid-bar{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.pid-bar .note{margin:0;font-family:var(--f-mono);font-size:11.5px;white-space:nowrap}
.pid-b{padding:0 14px 14px}
.pidcard:not(.open) .pid-b{display:none}
.psec{margin:10px 0 4px}
.psec-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--f-disp);font-weight:700;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.psec-h .rule{flex:1;height:1px;background:var(--line)}
.psec-h .ct{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);letter-spacing:0;white-space:nowrap}
.ritem{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.ritem .box{width:22px;height:22px;border:2px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#fff}
.ritem.done .box{background:var(--closed);border-color:var(--closed)}
.ritem.done .rtxt>div:first-child{color:var(--ink-2)}
.ritem.gone .rtxt>div:first-child{text-decoration:line-through;color:var(--ink-3)}
.ritem.gone .box{border-style:dashed}
.rwho{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:2px}
.ract{display:flex;gap:6px}
.ract .btn{white-space:nowrap}
.additems{display:flex;gap:8px;align-items:flex-start;margin:8px 0 2px}
.additems textarea{min-height:44px;font-size:14px}
.addpid{margin:0 0 12px}
.addpid summary{cursor:pointer;font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.secpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 10px}
.secpick label{display:flex;align-items:center;gap:8px;font-size:15px}
.secpick input{width:20px;height:20px}
.rlbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;border-radius:5px;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}
.rlbar span{display:block;font-size:13.5px;color:var(--ink-2)}
.rllist{display:flex;flex-direction:column;gap:6px;margin:0 0 6px}
.rlrow{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:8px 10px;cursor:pointer;font:inherit;color:inherit}
.rlrow .note{margin:0;font-size:12px}
.hist{margin:0 0 8px;font-size:14px}
.hist span{color:var(--ink-2)}
.mono{font-family:var(--f-mono);font-size:12px;word-break:break-all}
.dangerzone{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.secpick label .note{margin-left:2px}
.secpick.disc{grid-template-columns:1fr}
.secpick.disc label{align-items:flex-start}
.secpick input{flex:none}

/* ---------- safety ---------- */
.scope{margin:0 0 14px}
.scope-h{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 10px}
.seg.sm button{padding:8px 6px;font-size:13px}
.sgrp{margin:14px 0 4px;font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.srow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.srow .stxt>div:first-child{line-height:1.35}
.snote{margin-top:4px;font-size:13.5px;color:var(--danger)}
.yna{display:flex;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden}
.yna button{background:var(--surface);border:0;padding:9px 9px;min-width:44px;cursor:pointer;
  font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.yna button+button{border-left:1px solid var(--line-strong)}
.yna button:disabled{cursor:default}
.yna button[data-a="yes"][aria-pressed="true"]{background:var(--closed);color:#fff}
.yna button[data-a="no"][aria-pressed="true"]{background:var(--danger);color:#fff}
.yna button[data-a="na"][aria-pressed="true"]{background:var(--ink-3);color:var(--surface)}
.srow.a-no .stxt>div:first-child{color:var(--danger)}
.ed-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ed-row.off span{color:var(--ink-3);text-decoration:line-through}

/* Safety checklist photos */
.sph{margin-top:6px;background:none;border:1px solid var(--line-strong);border-radius:4px;padding:4px 9px;
     font:600 12.5px var(--f-body,inherit);color:var(--ink-2);cursor:pointer}
.sph:hover{border-color:var(--ink-3)}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.phcell{margin:0;display:flex;flex-direction:column;gap:6px}
.phcell img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--line);display:block}
.phcell figcaption{font-size:12px;color:var(--ink-3);line-height:1.3}
.snote[data-edno]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}

/* ---------- FCO (functional checkout) ---------- */

/* The headline number. Big, because it is the one thing anyone wants off this
   tab from across a truck cab: how close is this job to being checked out. */
.fcohead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.fcohead .pct{
  font-family:var(--f-disp);font-weight:700;font-size:38px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.fcohead .sub{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}

.fcobar{display:block;height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.fcobar{display:flex}
/* Two segments: what is finished, and what an approved mitigation has closed
   out. Both count, and the bar says which is which rather than making anyone
   ask. Square corners on the children, rounded on the track. */
.fcobar > span{display:block;height:100%;transition:width .25s ease}
.fcobar > .c{background:var(--closed)}
.fcobar > .m{background:var(--ready)}

/* A section header is a button: the list is fifteen sections and 213 questions,
   so it opens closed and you pull down only the trade you are standing in. */
.fcosec{
  display:flex;align-items:center;gap:9px;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:11px 11px;margin:10px 0 0;cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.fcosec.open{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.fcosec .caret{color:var(--ink-3);font-size:12px;width:11px;flex:none}
.fcosec .nm{
  font-family:var(--f-disp);font-weight:700;font-size:13.5px;letter-spacing:.04em;
  text-transform:uppercase;flex:1;min-width:0;
}
.fcosec .pc{
  font-family:var(--f-disp);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;flex:none;
}
.fcosec .ct{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);flex:none}
.fcosecbar{
  background:var(--surface);border:1px solid var(--line);border-top:0;
  border-radius:0 0 5px 5px;padding:0 11px 9px;margin:0 0 8px;
}
.fcosec.open + .fcosecbar{margin-bottom:8px}

/* One question. Same shape as a punchlist row - stripe, body, status - so the
   two lists read the same way and the colour means the same thing on both. */
.fcoitem{
  display:grid;grid-template-columns:5px 1fr auto;gap:0 11px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:5px;overflow:hidden;cursor:pointer;text-align:left;
  width:100%;padding:0;font:inherit;color:inherit;margin:0 0 7px;
}
.fcoitem .stripe{background:var(--st)}
.fcoitem .body{padding:10px 0;min-width:0}
.fcoitem .q{display:block;font-weight:600;line-height:1.32;margin:0 0 4px}
.fcoitem .meta{
  font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:2px 9px;
}
.fcoitem .meta .num{color:var(--ink-2);font-weight:600}
.fcoitem .meta .want{color:var(--open)}
.fcoitem .right{display:flex;align-items:center;justify-content:flex-end;padding:10px 11px 10px 0}

/* The five answers, stacked full-width: they are sentences, not chips, and a
   row of them wrapped mid-phrase is how the wrong one gets tapped. */
.fcostatus{display:flex;flex-direction:column;gap:6px}
.fcostatus .btn{width:100%;justify-content:flex-start;text-align:left}
.fcostatus .btn[aria-pressed="true"]{background:var(--ink);color:var(--ground) !important;border-color:var(--ink) !important}

/* A document hung on an FCO item. The name is the whole point - "Rack 300 bolt
   torque 10-02.pdf" is what somebody will be looking for - so it leads, at full
   width, with the size and who added it underneath. */
.doclist{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.docrow{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:9px 10px;
}
.docrow > a{flex:1;min-width:0;display:block;text-decoration:none;color:inherit}
.docrow .nm{display:block;font-weight:600;line-height:1.3;word-break:break-word}
.docrow .sub{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-top:2px}
.docrow .btn{flex:none}

/* ---------- FCO evidence from the field log ---------- */

/* The photo tally under the completion bar. A second number on this tab, so it
   has to read as a different thing from the percentage above it. */
.fcoshots{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:14px 0 6px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
}
.fcoshots .n{font-family:var(--f-disp);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:.02em}
.fcoshots .l{flex:1;min-width:0}
.fcoshots .r{flex:none}

.fcoitem .meta .got{color:var(--closed)}

/* A suggestion waiting to be ruled on: the picture, what the entry said, and
   the requirement it was matched to. The thumbnail is the point - nobody can
   judge a match from a caption alone. */
.evlist{display:flex;flex-direction:column;gap:10px}
.evrow{
  display:grid;grid-template-columns:84px 1fr;gap:0 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden;
}
.evthumb{width:84px;height:100%;min-height:84px;object-fit:cover;display:block;background:var(--line)}
.evbody{padding:10px 11px 11px 0;min-width:0}
.evbody .cap{margin:0 0 3px;font-weight:600;line-height:1.3}
.evbody .evmeta{margin:0 0 7px;font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.evbody .pick{
  margin:0 0 2px;line-height:1.3;
  border-left:3px solid var(--accent);padding-left:8px;
}
.evbody .why{margin:0;padding-left:11px;font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
/* Three buttons on a phone-width card: they fit only if they stop trying to
   be full-size touch targets with the default padding. */
.evbody .btnrow{gap:6px;flex-wrap:nowrap}
.evbody .btnrow .btn{flex:1;min-width:0;padding-left:4px;padding-right:4px;white-space:nowrap}

/* Picking a different requirement for a photo. */
.rtlist{display:flex;flex-direction:column;gap:6px;max-height:58vh;overflow:auto}
.rtrow{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:9px 10px;
}
.rtrow .n{font-family:var(--f-mono);font-weight:600;font-size:11.5px;color:var(--ink-2);display:block}
.rtrow .t{display:block;line-height:1.3;margin:2px 0}
.rtrow .s{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);display:block}

/* The legend under the bar: how much of the percentage is finished work and
   how much is mitigation signed off. */
.fcosplit{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:8px 0 0;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);
}
.fcosplit .k{width:9px;height:9px;border-radius:2px;flex:none}
.fcosplit .k.c{background:var(--closed)}
.fcosplit .k.m{background:var(--ready);margin-left:10px}
.fcosplit .r{flex:1 0 100%;color:var(--ink-3);font-size:11px;margin-top:2px}

/* A punchlist row that carries its finished-work photo says so. */
.pitem .sub .gotshot{color:var(--closed)}

/* ---------- several photos on one entry (10-8-26) ---------- */
.cshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:0 0 10px}
.cshot{position:relative;margin:0}
.cshot img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;background:var(--line)}
.cshot .cx{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;
  background:rgba(10,12,11,.72);color:#fff;font-size:18px;line-height:28px;padding:0;cursor:pointer}
.cshot .cfirst{position:absolute;left:4px;bottom:4px;font-family:var(--f-mono);font-size:10px;
  background:rgba(10,12,11,.72);color:#EAEFEC;padding:2px 5px;border-radius:3px}
.entry .th{position:relative}
.entry .th .thn{position:absolute;right:3px;bottom:3px;font-family:var(--f-mono);font-size:11px;font-weight:700;
  background:rgba(10,12,11,.78);color:#fff;padding:1px 5px;border-radius:3px}

/* ---------- approved FCO photos as thumbnails (10-9-26) ---------- */
.evcell a{display:block;border-radius:4px;overflow:hidden}
.evcell a:active img{filter:brightness(.9)}
.evcell .evcap{display:block;color:var(--ink-2);font-weight:600;margin:0 0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evcell .evnoimg{display:grid;place-items:center;aspect-ratio:1/1;background:var(--line);
  font-family:var(--f-disp);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.fcoitem.has-shot{grid-template-columns:5px 56px 1fr auto}
.fcoitem .thumb{width:56px;height:56px;object-fit:cover;display:block;align-self:center;
  border-radius:4px;background:var(--line)}

/* ---------- Safety tab: forecast, JSAs & permits, topics, inspections (10-9-26) ---------- */
.wx{padding:14px}
.wxtop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.wxcond{font-family:var(--f-disp);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.wxtemp{font-family:var(--f-disp);font-weight:700;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.wxtemp span{font-size:20px;color:var(--ink-3)}
.wxside{font-size:13.5px;color:var(--ink-2);text-align:right;line-height:1.55}
.wxside b{color:var(--ink)}
.wxhrs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.wxhrs div{display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3)}
.wxhrs .h{font-family:var(--f-disp);font-weight:600;font-size:11.5px;letter-spacing:.04em;color:var(--ink-2)}
.wxhrs b{font-family:var(--f-disp);font-size:18px;color:var(--ink)}
.wxflags{display:flex;flex-direction:column;gap:6px;margin:12px 0 0}
.wxflag{font-size:13.5px;line-height:1.35;padding:7px 10px;border-radius:4px;
  background:color-mix(in srgb,var(--open) 12%,var(--surface));border-left:3px solid var(--open)}
.wxflag.bad{background:color-mix(in srgb,var(--danger) 13%,var(--surface));border-left-color:var(--danger);font-weight:600}
.wxflag.ok{margin-top:12px;background:color-mix(in srgb,var(--closed) 12%,var(--surface));border-left:3px solid var(--closed)}
@media (max-width:420px){ .wxside{text-align:left} .wxhrs b{font-size:16px} }

/* Safety 1 ... Safety 10 picker (10-9-26) */
.saf-rep{margin:0 0 12px}
.saf-rep select{font-weight:600}