/* FES — On-Site Tablet Estimator MOCKUP. Styles mirror the iQ Ops app (FESCRM worker/public/index.html). */
@font-face{font-family:'Inter';src:url('fonts/inter-var.woff2') format('woff2-variations'),url('fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --brand:#2F6B45;--brand-dark:#234f34;--surface:#fcfcfb;--page:#f4f5f3;
  --text-primary:#0b0b0b;--text-secondary:#52514e;--text-muted:#898781;
  --border:rgba(11,11,11,.10);--gridline:#e1e0d9;
  --good:#0ca30c;--warning:#b9790a;--critical:#d03b3b;
  --neutral-bg:#eceae4;--neutral-text:#52514e;--good-bg:#e3f5e3;--warning-bg:#fffbe7;--critical-bg:#fbe6e6;
  --tbd-bg:#fff6d6;--tbd-line:#e5c56a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,Roboto,"Segoe UI",sans-serif;background:var(--page);color:var(--text-primary);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}

/* header — same 3-column grid as the app */
header{background:var(--brand);color:#fff;padding:10px 20px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
header h1{font-size:18px;margin:0;font-weight:700}
header .sub{font-size:12.5px;opacity:.85}
.wordmark{font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.3;text-align:center;white-space:nowrap}
.wordmark .build-stamp{display:block;font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:#ffe082;margin-top:2px}
.header-right{justify-self:end;text-align:right;font-size:13px}
.header-right .who{font-weight:600}
.header-right .net{display:inline-flex;gap:6px;align-items:center;font-size:12px;opacity:.9}
.header-right .net::before{content:"";width:7px;height:7px;border-radius:50%;background:#9be3a9}

main{padding:12px 20px 0;max-width:1400px;margin:0 auto}
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--gridline);margin-bottom:12px;flex-wrap:wrap}
.tab-btn{background:none;border:none;padding:9px 11px;font-size:15px;font-weight:600;color:var(--text-secondary);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-btn .new{font-size:10.5px;font-weight:800;background:var(--brand);color:#fff;border-radius:999px;padding:1px 6px;margin-left:5px;vertical-align:2px}
.view{display:none}.view.active{display:block}

/* job context bar */
.jobbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border-radius:12px;box-shadow:0 2px 10px rgba(30,50,38,.08);padding:10px 14px;margin-bottom:12px}
.jobbar .nm{font-weight:700;font-size:16px}
.jobbar .ad{color:var(--text-secondary);font-size:14px}
.jobbar .spacer{flex:1}

/* stepper */
.stepper{display:flex;gap:6px;margin:0 0 12px;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stepper button{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--gridline);border-radius:999px;padding:7px 14px 7px 7px;font-size:14.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;white-space:nowrap;min-height:40px}
.stepper .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--neutral-bg);font-size:13px;font-weight:700}
.stepper button.done .n{background:var(--good-bg);color:#0a5f0a}
.stepper button.done .n::after{content:"✓"}
.stepper button.done .n span{display:none}
.stepper button.on{border-color:var(--brand);color:var(--brand);background:#f3f8f4}
.stepper button.on .n{background:var(--brand);color:#fff}

.step{display:none}.step.on{display:block}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{background:var(--surface);border-radius:12px;box-shadow:0 2px 10px rgba(30,50,38,.08);padding:14px 16px;margin-bottom:12px}
.card h2{font-size:16.5px;margin:0 0 4px;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card h2 .spacer{flex:1}
.card .hint{font-size:13.5px;color:var(--text-secondary);margin:0 0 10px}
.muted{color:var(--text-muted)}
.sec{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:700;margin:12px 0 6px}

/* badges (same as app) */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%}
.badge.neutral{background:var(--neutral-bg);color:var(--neutral-text)}.badge.neutral .dot{background:var(--text-muted)}
.badge.good{background:var(--good-bg);color:#0a5f0a}.badge.good .dot{background:var(--good)}
.badge.warning{background:var(--warning-bg);color:#7a4e05}.badge.warning .dot{background:var(--warning)}
.badge.critical{background:var(--critical-bg);color:#8f2626}.badge.critical .dot{background:var(--critical)}
.badge.tbd{background:var(--tbd-bg);color:#6b4a00;border:1px dashed var(--tbd-line)}

/* buttons (same as app, tablet-sized) */
.primary{background:var(--brand);color:#fff;border:none;padding:11px 18px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;min-height:44px}
.primary:hover{background:var(--brand-dark)}
.secondary{background:#fff;color:var(--text-primary);border:1px solid var(--gridline);padding:10px 16px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;min-height:44px}
.primary:disabled{opacity:.45;cursor:default}

/* method choice cards */
.methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.method{text-align:left;background:#fff;border:1.5px solid var(--gridline);border-radius:10px;padding:10px 12px;cursor:pointer}
.method b{display:block;font-size:14.5px}
.method span{font-size:12.5px;color:var(--text-secondary)}
.method.on{border-color:var(--brand);background:#f3f8f4;box-shadow:0 0 0 3px rgba(47,107,69,.12)}

/* tables */
table{width:100%;border-collapse:collapse;background:var(--surface)}
thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:7px 8px;border-bottom:1px solid var(--gridline);font-weight:700}
tbody td{padding:6px 8px;border-bottom:1px solid var(--gridline);font-size:14.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{padding:8px;font-weight:700;border-top:2px solid var(--gridline);font-size:14.5px}

/* inputs */
.in{width:100%;min-height:40px;padding:7px 10px;border:1px solid var(--gridline);border-radius:8px;background:#fff;font-size:15px}
.in.sm{width:5.6rem;text-align:right}
.in.xs{width:4.4rem;text-align:right}
.in.tbd{background:var(--tbd-bg);border:1.5px dashed var(--tbd-line);color:#6b4a00}
.in.tbd::placeholder{color:#9a7a2a;font-weight:600}
.unit{font-size:13px;color:var(--text-muted);margin-left:4px}
.src{font-size:11px;font-weight:700;border-radius:4px;padding:1px 5px;white-space:nowrap}
.src.laser{background:#e3eef8;color:#1d4f7a}
.src.typed{background:var(--neutral-bg);color:var(--neutral-text)}
.src.scan{background:var(--good-bg);color:#0a5f0a}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-size:13px;font-weight:600;color:var(--text-secondary)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1.5px solid var(--gridline);background:#fff;color:var(--text-secondary);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:600;cursor:pointer;min-height:38px}
.seg button.on{border-color:var(--brand);background:var(--brand);color:#fff}
.seg button.on.bad{border-color:var(--critical);background:var(--critical-bg);color:#8f2626}
.seg button.on.warn{border-color:var(--warning);background:var(--warning-bg);color:#7a4e05}
.stepper-num{align-self:flex-start;display:inline-flex;align-items:center;border:1px solid var(--gridline);border-radius:8px;overflow:hidden;background:#fff}
.stepper-num button{border:0;background:var(--neutral-bg);width:40px;height:40px;font-size:20px;font-weight:700;cursor:pointer}
.stepper-num b{min-width:3rem;text-align:center;font-size:17px}

/* compare card */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.compare .opt{border:1.5px solid var(--gridline);border-radius:10px;padding:9px 11px;background:#fff}
.compare .opt.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,69,.12)}
.compare .big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.compare .lbl{font-size:12.5px;color:var(--text-secondary);font-weight:600}
.note{font-size:12.5px;color:var(--text-secondary);background:var(--neutral-bg);border-radius:8px;padding:8px 10px;margin-top:8px}
.note.tbd{background:var(--tbd-bg);border:1px dashed var(--tbd-line);color:#5c4000}
.note.warn{background:var(--warning-bg);color:#6a4304}

/* sketch */
.sketch{background:#fff;border:1px solid var(--gridline);border-radius:10px;padding:8px;display:block;width:100%;height:auto}

/* device card */
.device{display:flex;gap:12px;align-items:center;border:1.5px solid var(--gridline);border-radius:10px;padding:10px 12px;background:#fff;margin-bottom:8px}
.device .ico{width:38px;height:38px;border-radius:10px;background:#e3eef8;display:grid;place-items:center;font-size:18px;color:#1d4f7a;flex:0 0 auto}
.device .t{flex:1;min-width:0}
.device .t b{display:block;font-size:14.5px}
.device .t span{font-size:12.5px;color:var(--text-secondary)}
.live{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:#1d4f7a}

/* moisture */
.mgrid td .in{min-height:36px}
.mpill{display:inline-block;min-width:3.2rem;text-align:center;border-radius:6px;padding:2px 6px;font-weight:700;font-size:13.5px}
.mpill.ok{background:var(--good-bg);color:#0a5f0a}
.mpill.hi{background:var(--warning-bg);color:#7a4e05}
.mpill.vh{background:var(--critical-bg);color:#8f2626}
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ph{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(140deg,#e6e4dc,#cfcbbd);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:4px}
.ph::before{content:"";position:absolute;inset:30% 20% 18% 20%;border-radius:6px;background:rgba(11,11,11,.08)}
.ph span{position:relative;font-size:11px;font-weight:700;background:rgba(255,255,255,.9);border-radius:4px;padding:0 5px}
.ph.add{background:#fff;border:1.5px dashed var(--gridline);justify-content:center;align-items:center;color:var(--brand);font-weight:700;font-size:13px}
.ph.add::before{display:none}
textarea.in{min-height:70px;resize:vertical}

/* options builder */
.banner{display:flex;gap:10px;align-items:center;background:var(--tbd-bg);border:1.5px dashed var(--tbd-line);color:#5c4000;border-radius:10px;padding:9px 12px;margin-bottom:12px;font-size:14px}
.banner b{color:#4a3300}
.tier{border-radius:12px;background:var(--surface);box-shadow:0 2px 10px rgba(30,50,38,.08);overflow:hidden;display:flex;flex-direction:column}
.tier .th{padding:10px 12px;border-bottom:1px solid var(--gridline);display:flex;align-items:center;gap:8px}
.tier .th b{font-size:16px}
.tier.better .th{background:#f3f8f4}
.tier .li{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:6px 10px;border-bottom:1px solid #eeede7;font-size:13.5px}
.tier .li .q{font-size:12px;color:var(--text-muted)}
.tier .li .r{font-variant-numeric:tabular-nums;color:#8a6d00;font-weight:700;min-width:3.2rem;text-align:right}
.eye{border:1px solid var(--gridline);background:#fff;border-radius:6px;font-size:11.5px;font-weight:700;padding:4px 7px;cursor:pointer;min-width:4.4rem;color:#0a5f0a}
.eye.hidden{background:var(--neutral-bg);color:var(--text-muted);text-decoration:none}
.li.is-hidden .nm{color:var(--text-muted)}
.tier .tot{padding:9px 12px;display:grid;gap:3px;font-size:13.5px;background:#fbfbf8;margin-top:auto}
.tier .tot div{display:flex;justify-content:space-between}
.tier .tot .g{font-weight:800;font-size:15px}

/* customer view */
.cust{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(30,50,38,.10);padding:18px 20px}
.cust-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cust-head .logo{width:44px;height:44px;border-radius:10px;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px}
.cust-head h2{margin:0;font-size:19px}
.cust-head p{margin:0;font-size:13.5px;color:var(--text-secondary)}
.ctier{border:1.5px solid var(--gridline);border-radius:14px;padding:14px 14px 12px;display:flex;flex-direction:column;position:relative}
.ctier.rec{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,69,.12)}
.ctier .flag{position:absolute;top:-11px;left:14px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 10px}
.ctier h3{margin:0 0 2px;font-size:18px}
.ctier .tag{font-size:13px;color:var(--text-secondary);margin:0 0 8px}
.ctier .price{font-size:26px;font-weight:800;color:#8a6d00;margin:2px 0 8px;font-variant-numeric:tabular-nums}
.ctier .price small{display:block;font-size:11.5px;font-weight:700;color:#8a6d00}
.ctier ul{list-style:none;margin:0 0 12px;padding:0;font-size:14px}
.ctier li{display:flex;gap:7px;padding:3px 0}
.ctier li::before{content:"✓";color:var(--brand);font-weight:800}
.ctier .primary,.ctier .secondary{margin-top:auto;width:100%}

/* save */
.saved{display:none;border:1.5px solid var(--good);background:var(--good-bg);border-radius:12px;padding:12px 14px;margin-top:12px;color:#0a5f0a}
.saved.on{display:block}
.kv{display:grid;grid-template-columns:11rem 1fr;gap:5px 12px;font-size:14.5px;margin:0}
.kv dt{color:var(--text-secondary)}
.kv dd{margin:0;font-weight:600}
.checks{list-style:none;padding:0;margin:0;font-size:14.5px}
.checks li{padding:5px 0;display:flex;gap:8px;border-bottom:1px solid #eeede7}
.checks li::before{content:"✓";color:var(--good);font-weight:800}
.checks li.x::before{content:"✕";color:var(--critical)}

/* admin */
.switch{position:relative;width:46px;height:26px;border-radius:999px;background:#cfccc2;border:0;cursor:pointer;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--brand)}
.switch.on::after{left:23px}
.flagrow{display:flex;gap:12px;align-items:center}
.tiers-dots{display:flex;gap:3px}
.tiers-dots span{font-size:11px;font-weight:800;border-radius:4px;padding:1px 5px;background:var(--neutral-bg);color:var(--text-muted)}
.tiers-dots span.on{background:var(--good-bg);color:#0a5f0a}

/* bottom bar */
.bottombar{position:sticky;bottom:0;background:rgba(244,245,243,.96);border-top:1px solid var(--gridline);padding:10px 0;margin-top:4px;display:flex;gap:10px;align-items:center;z-index:5}
.bottombar .status{flex:1;font-size:13px;color:var(--text-secondary)}
.mockflag{font-size:11.5px;font-weight:800;color:#6b4a00;background:var(--tbd-bg);border:1px dashed var(--tbd-line);border-radius:999px;padding:2px 9px}

/* portrait / narrower tablets */
@media (max-width:1000px){
  header{grid-template-columns:1fr auto;padding:10px 16px}
  .wordmark{display:none}
  main{padding:10px 14px 0}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .tier .li{grid-template-columns:1fr auto auto}
  .tab-btn{padding:8px 8px;font-size:14px}
  .hide-narrow{display:none}
}

/* Preliminary banner */
.prelim{background:#fff3c4;color:#4a3300;border-bottom:2px solid #e5c56a;text-align:center;font-size:14px;padding:6px 12px;line-height:1.3}
.prelim b{letter-spacing:.4px}
.prelim span{color:#6b4a00}
/* Notes & sketch */
.notes-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.sk-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 8px}
.sk-tool{border:1.5px solid var(--gridline);background:#fff;color:var(--text-secondary);border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:600;cursor:pointer;min-height:40px}
.sk-tool.on{border-color:var(--brand);background:var(--brand);color:#fff}
.sk-sep{width:1px;height:28px;background:var(--gridline);margin:0 2px}
.sk-color{width:34px;height:34px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--gridline);cursor:pointer;padding:0}
.sk-color.on{box-shadow:0 0 0 3px var(--brand)}
.sk-btn{min-height:40px!important;padding:6px 12px!important}
.sketchpad{display:block;width:100%;height:420px;background:#fff;border:1.5px solid var(--gridline);border-radius:10px;touch-action:none;cursor:crosshair;
  background-image:linear-gradient(#f0efe9 1px,transparent 1px),linear-gradient(90deg,#f0efe9 1px,transparent 1px);background-size:24px 24px}
.talk-row{display:flex;gap:12px;align-items:center;margin:10px 0 8px}
.talk{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:110px;height:110px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 3px 12px rgba(47,107,69,.3)}
.talk .mic{font-size:34px;line-height:1}
.talk.on{background:var(--critical);box-shadow:0 0 0 8px rgba(208,59,59,.18);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(208,59,59,.08)}}
.talk-info{font-size:14px;color:var(--text-secondary)}
.talk-info.warn{color:#7a4e05}
@media (max-width:1000px){.notes-grid{grid-template-columns:1fr}.sketchpad{height:360px}}