/* ELS Field. The internal palette of the field sheets (site-visit-checklist.html / inbound-call-sheet.html), not the
   customer-facing brand palette. Light only, on purpose: it's read outdoors in daylight. No web fonts (offline). */
:root{
  --ink:#17170F; --paper:#F6F3EA; --paper-2:#EDE9DC; --moss:#2E4A32; --moss-light:#5C7A55; --signal:#B8501C;
  --line:#D8D2C0; --line-strong:#B8B19C; --steel:#59564C; --warn-bg:#F1E4D8; --bg:#DEDACB; --ok:#2E4A32;
  --zone-a:#E8590C; --zone-b:#F2C14E; --zone-c:#4DA3FF; --zone-d:#B07CF2; --nogo:#B3261E; --parcel:#FFD60A;
  --top-h:52px; --tabs-h:58px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
/* the fixed top bar and tab bar never cover what the browser scrolls to (a focused field, a jump link) */
html{ scroll-padding-top:calc(var(--top-h) + var(--safe-t) + 64px); scroll-padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 16px); }
body{ background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink);
      -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--moss); }

/* ---- chrome ---- */
#top{ position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--ink); color:var(--paper);
      padding:calc(var(--safe-t) + 8px) 14px 8px; min-height:calc(var(--top-h) + var(--safe-t)); display:flex; align-items:center; gap:10px; }
#top .t1{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#9A9584; }
#top .t2{ font-size:16px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#top .grow{ flex:1; min-width:0; }
#top .back{ background:none; border:0; color:var(--paper); font-size:22px; padding:2px 8px 2px 0; cursor:pointer; }
.stat{ font-size:11px; padding:3px 7px; border:1px solid #4A473C; color:#C6C2B4; white-space:nowrap; border-radius:3px; }
.stat.on{ border-color:var(--moss-light); color:#DDE8D6; }
.stat.warn{ border-color:var(--signal); color:#F4C9B3; }
#view{ padding:calc(var(--top-h) + var(--safe-t)) 0 calc(var(--tabs-h) + var(--safe-b) + 16px); max-width:820px; margin:0 auto; min-height:100%; }
#view.full{ max-width:none; padding-bottom:0; }
#tabs{ position:fixed; left:0; right:0; bottom:0; z-index:1000; background:var(--ink); display:flex; padding-bottom:var(--safe-b); }
#tabs a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:var(--tabs-h);
         color:#9A9584; text-decoration:none; font-size:11px; letter-spacing:.04em; }
#tabs a svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }
#tabs a.on{ color:var(--paper); }
#tabs a .badge{ position:absolute; margin-left:22px; margin-top:-26px; background:var(--signal); color:#fff; font-size:10px; min-width:16px;
                height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
#toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tabs-h) + var(--safe-b) + 14px); z-index:2000;
        background:var(--ink); color:var(--paper); padding:10px 14px; font-size:14px; max-width:92vw; opacity:0; pointer-events:none;
        transition:opacity .2s; border-radius:4px; box-shadow:0 4px 18px rgba(0,0,0,.25); }
#toast.show{ opacity:1; }

/* ---- page parts ---- */
.page{ background:var(--paper); min-height:60vh; }
.pad{ padding:16px; }
.h1{ font-size:20px; font-weight:700; margin-bottom:4px; }
.sub{ font-size:13px; color:var(--steel); line-height:1.5; }
.eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.block{ padding:16px; border-bottom:1px solid var(--line); background:var(--paper); }
.block h2{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--moss); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.block h2::before{ content:""; width:18px; height:2px; background:var(--signal); flex-shrink:0; }
.card{ background:#FBF9F2; border:1px solid var(--line-strong); padding:12px 14px; margin-bottom:10px; }
.card .ttl{ font-weight:650; font-size:15px; }
.card .meta{ font-size:12px; color:var(--steel); margin-top:3px; line-height:1.45; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; }
.stack > * + *{ margin-top:8px; }
.muted{ color:var(--steel); }
.small{ font-size:12px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:9px 14px; font-size:15px;
      border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); cursor:pointer; text-decoration:none; border-radius:3px; }
.btn.primary{ background:var(--moss); border-color:var(--moss); color:var(--paper); }
.btn.warn{ background:var(--signal); border-color:var(--signal); color:#fff; }
.btn.dark{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn.small{ min-height:34px; padding:5px 10px; font-size:13px; }
.btn.block{ display:flex; width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.chip{ display:inline-block; font-size:11px; padding:2px 7px; border:1px solid var(--line-strong); background:var(--paper-2); border-radius:10px; white-space:nowrap; }
.chip.ok{ border-color:var(--moss-light); color:var(--moss); background:#E3EBDD; }
.chip.warn{ border-color:var(--signal); color:var(--signal); background:var(--warn-bg); }
.chip.stop{ border-color:var(--nogo); color:#fff; background:var(--nogo); }
.callout{ background:var(--paper-2); border-left:3px solid var(--moss-light); padding:10px 12px; font-size:13px; line-height:1.5; margin:8px 0; }
.callout.warn{ border-left-color:var(--signal); background:var(--warn-bg); }
.kv{ width:100%; border-collapse:collapse; font-size:13px; }
.kv td{ padding:6px 4px; border-top:1px solid var(--line); vertical-align:top; line-height:1.45; }
.kv td:first-child{ color:var(--steel); width:40%; }
.empty{ padding:24px 16px; text-align:center; color:var(--steel); font-size:14px; line-height:1.5; }
.sep{ height:1px; background:var(--line); margin:12px 0; }
ul.flags{ list-style:none; }
ul.flags li{ border-left:3px solid var(--line-strong); padding:8px 10px; margin-bottom:8px; background:#FBF9F2; font-size:13px; line-height:1.5; }
ul.flags li.stop{ border-left-color:var(--nogo); }
ul.flags li.check{ border-left-color:var(--signal); }
ul.flags .ask{ margin-top:4px; font-style:italic; }
ul.plain{ padding-left:18px; font-size:14px; line-height:1.55; }

/* ---- forms (app-owned) ---- */
.fld{ display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.fld > label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld input[type=number],.fld input[type=date],.fld input[type=time],.fld input[type=datetime-local],.fld select,.fld textarea{
  border:none; border-bottom:1px solid var(--line-strong); background:transparent; width:100%; font-size:16px; padding:7px 2px; border-radius:0; }
.fld textarea{ min-height:56px; resize:vertical; border:1px solid var(--line-strong); padding:7px; background:#FBF9F2; }
.fld input:focus,.fld textarea:focus,.fld select:focus{ outline:2px solid var(--moss-light); outline-offset:1px; }
.seg{ display:flex; flex-wrap:wrap; gap:6px; }
.seg label{ position:relative; }
.seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg span{ display:inline-block; min-width:44px; text-align:center; padding:9px 12px; font-size:15px; border:1px solid var(--line-strong); background:#FBF9F2; cursor:pointer; }
.seg input:checked + span{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.seg input:focus-visible + span{ outline:2px solid var(--signal); outline-offset:1px; }
.seg.bad input:checked + span{ background:var(--signal); border-color:var(--signal); }
.seg label.bad input:checked + span{ background:var(--signal); border-color:var(--signal); color:#fff; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; margin-bottom:10px; }
.check input{ width:20px; height:20px; accent-color:var(--moss); flex-shrink:0; margin-top:1px; }
table.spec{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:10px; }
table.spec td,table.spec th{ border-top:1px solid var(--line); padding:7px 4px; vertical-align:top; text-align:left; }
table.spec th{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }

/* ---- the generated sheet sections (same rules as the legacy sheets) ---- */
.sheet-sections .section{ padding:20px 16px; border-bottom:1px solid var(--line); background:var(--paper); }
.sectitle{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--moss); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sectitle::before{ content:""; width:18px; height:2px; background:var(--signal); flex-shrink:0; }
.sheet-sections h3{ font-size:13px; margin:16px 0 8px; }
.hint{ font-size:12px; color:var(--steel); margin:-6px 0 12px; line-height:1.5; }
.say{ font-style:italic; font-size:15px; line-height:1.55; margin-bottom:10px; padding-left:12px; border-left:3px solid var(--moss-light); }
.stop{ color:var(--signal); font-weight:700; }
.sheet-sections .grid{ display:grid; grid-template-columns:1fr; gap:12px 16px; margin-bottom:12px; }
.sheet-sections .grid .full{ grid-column:1/-1; }
.sheet-sections .f{ display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.sheet-sections .grid .f{ margin-bottom:0; }
.sheet-sections .f > label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.sheet-sections .f input[type=text],.sheet-sections .f input[type=tel],.sheet-sections .f input[type=email],.sheet-sections .f input[type=number],.sheet-sections .f select,.sheet-sections .f textarea{
  border:none; border-bottom:1px solid var(--line-strong); background:transparent; width:100%; font-size:16px; padding:6px 2px; border-radius:0; }
.sheet-sections .f textarea{ min-height:52px; resize:vertical; border:1px solid var(--line-strong); padding:6px; background:#FBF9F2; }
.sheet-sections .f input:focus,.sheet-sections .f textarea:focus,.sheet-sections .f select:focus{ outline:2px solid var(--moss-light); outline-offset:1px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:14px; margin-top:2px; }
.opts label{ font-size:14px; color:var(--ink); display:flex; align-items:center; gap:6px; }
.sheet-sections input[type=checkbox],.sheet-sections input[type=radio]{ width:20px; height:20px; accent-color:var(--moss); flex-shrink:0; }
.pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.pill{ position:relative; }
.pill input{ position:absolute; opacity:0; width:1px; height:1px; }
.pill span{ display:inline-block; min-width:44px; text-align:center; padding:10px 12px; font-size:15px; border:1px solid var(--line-strong); background:#FBF9F2; cursor:pointer; }
.pill input:checked + span{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.pill input:focus-visible + span{ outline:2px solid var(--signal); outline-offset:1px; }
.pill.beyond input:checked + span{ background:var(--signal); border-color:var(--signal); }
.gate{ background:var(--paper-2); border:1px solid var(--line-strong); padding:12px 14px; margin-bottom:10px; font-size:14px; line-height:1.5; }
.scope{ background:var(--warn-bg); border:1px solid var(--signal); }
.item{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:14px; line-height:1.5; }
.item input[type=checkbox]{ margin-top:2px; }
.item .grow{ flex:1; }
.item .note{ display:block; width:100%; margin-top:4px; border:none; border-bottom:1px solid var(--line-strong); background:transparent; font-size:15px; padding:4px 2px; }
.zone{ border:1px solid var(--line-strong); background:#FBF9F2; padding:14px 14px; margin-bottom:14px; }
.zone h3{ margin-top:0; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.zone button{ font-size:12px; padding:6px 10px; border:1px solid var(--line-strong); background:var(--paper); cursor:pointer; }
.ziss{ font-size:12px; color:var(--signal); margin-top:6px; line-height:1.45; }
.sheet-sections table{ width:100%; border-collapse:collapse; font-size:13px; }
.sheet-sections th{ text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); padding:6px 6px; border-bottom:1px solid var(--line-strong); }
.sheet-sections td{ padding:7px 6px; border-top:1px solid var(--line); vertical-align:top; line-height:1.45; }
.ok{ color:var(--moss); font-weight:600; }
.bad{ color:var(--signal); font-weight:600; }
.readout{ white-space:pre-wrap; font-family:Menlo,Consolas,monospace; font-size:13px; line-height:1.55; background:var(--ink); color:var(--paper); padding:14px 16px; margin:8px 0 12px; overflow-wrap:anywhere; }
.readout .miss{ background:var(--signal); color:#fff; padding:0 3px; }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; }
.btnrow a,.btnrow button{ font-size:14px; padding:10px 14px; border:1px solid var(--moss); background:var(--moss); color:var(--paper); text-decoration:none; cursor:pointer; }
.btnrow .ghost{ background:var(--paper); color:var(--ink); border-color:var(--line-strong); }
details{ border:1px solid var(--line); background:#FBF9F2; padding:9px 12px; margin-bottom:8px; }
details summary{ cursor:pointer; font-size:14px; font-weight:600; }
details > div{ margin-top:8px; font-size:14px; line-height:1.55; }
details p{ margin-bottom:8px; }
.titlebox{ font-family:Menlo,Consolas,monospace; font-size:13px; background:var(--paper-2); padding:6px 8px; margin:4px 0 8px; display:block; word-break:break-word; }
code{ font-size:12px; }

/* app additions inside the sheet */
.mapchip{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 2px; font-size:12px; color:var(--steel); }
.mapchip b{ color:var(--ink); }
.appbar{ display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:8px 16px; background:var(--paper-2); border-bottom:1px solid var(--line-strong); position:sticky; top:calc(var(--top-h) + var(--safe-t)); z-index:500; }
.jump{ display:flex; gap:6px; overflow-x:auto; padding:8px 16px; background:var(--paper-2); border-bottom:1px solid var(--line); scrollbar-width:none; }
.jump::-webkit-scrollbar{ display:none; }
.jump a{ font-size:12px; color:var(--moss); text-decoration:none; border:1px solid var(--line-strong); padding:5px 9px; background:var(--paper); white-space:nowrap; }
.plaud{ background:var(--ink); color:var(--paper); padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.plaud .lbl{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9A9584; }
.plaud .timer{ font-family:Menlo,Consolas,monospace; font-size:16px; }
.plaud .btn{ min-height:36px; padding:6px 10px; font-size:13px; }
.plaud .rec{ color:#FF6B5A; }
.plaud .titlebox{ background:#2A2920; color:var(--paper); margin:0; font-size:12px; padding:5px 7px; }

/* photos */
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; }
.thumbs figure{ position:relative; background:#000; aspect-ratio:1; overflow:hidden; }
.thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumbs figcaption{ position:absolute; left:0; right:0; bottom:0; background:rgba(23,23,15,.75); color:#fff; font-size:11px; padding:2px 4px; }

/* ---- map ---- */
#map{ position:fixed; top:calc(var(--top-h) + var(--safe-t)); bottom:calc(var(--tabs-h) + var(--safe-b)); left:0; right:0; background:#2a2a24; }
.maptools{ position:fixed; z-index:900; left:0; right:0; padding:0 8px; top:calc(var(--top-h) + var(--safe-t) + 8px); display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; pointer-events:none; }
.maptools::-webkit-scrollbar,.appbar::-webkit-scrollbar{ display:none; }
.appbar > *{ flex-shrink:0; }
.maptools > *{ pointer-events:auto; }
.mbtn{ flex-shrink:0; min-height:40px; min-width:40px; padding:6px 10px; font-size:13px; background:rgba(246,243,234,.95); border:1px solid var(--line-strong); color:var(--ink); border-radius:4px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.mbtn.on{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.mbtn.za.on{ background:var(--zone-a); border-color:var(--zone-a); color:#fff; }
.mbtn.zb.on{ background:var(--zone-b); border-color:var(--zone-b); color:var(--ink); }
.mbtn.zc.on{ background:var(--zone-c); border-color:var(--zone-c); color:#fff; }
.mbtn.zd.on{ background:var(--zone-d); border-color:var(--zone-d); color:#fff; }
.mbtn.zn.on{ background:var(--nogo); border-color:var(--nogo); color:#fff; }
.mpanel{ position:fixed; z-index:900; left:0; right:0; bottom:calc(var(--tabs-h) + var(--safe-b)); background:rgba(246,243,234,.97);
         border-top:1px solid var(--line-strong); max-height:46vh; overflow:auto; padding:10px 12px; box-shadow:0 -2px 10px rgba(0,0,0,.18); }
.mpanel.min{ max-height:none; }
.mpanel .zrow{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--line); font-size:13px; flex-wrap:wrap; }
.mpanel .zrow:first-child{ border-top:0; }
.sw{ width:14px; height:14px; border-radius:2px; flex-shrink:0; border:1px solid rgba(0,0,0,.3); }
.gpsinfo{ font-size:12px; color:var(--steel); }
.walkbox{ background:var(--ink); color:var(--paper); padding:10px 12px; margin-bottom:8px; font-size:14px; }
.vtx{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--ink); box-shadow:0 0 0 2px rgba(255,255,255,.6); }
.vtx.walk{ border-color:var(--moss); }
.mk{ font-size:16px; line-height:24px; width:26px; height:26px; text-align:center; background:#fff; border:2px solid var(--ink); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.me{ width:16px; height:16px; border-radius:50%; background:#1E88E5; border:3px solid #fff; box-shadow:0 0 0 2px rgba(30,136,229,.4); }
.leaflet-container{ font:inherit; }
.leaflet-control-attribution{ font-size:10px; }

@media (min-width:640px){
  .sheet-sections .grid{ grid-template-columns:1fr 1fr; }
  .pad,.block,.sheet-sections .section{ padding-left:28px; padding-right:28px; }
}
@media print{
  #top,#tabs,#toast,.appbar,.jump,.plaud,.btn,.mapchip{ display:none !important; }
  #view{ padding:0; }
  body{ background:#fff; }
  .readout{ background:#fff; color:#000; border:1px solid #000; }
}