/* RangeIQ phone app. Light "sunlight" theme by default for outdoor use; follows the phone's dark mode at night. */
:root{
  --bg:#f4ecdf; --surface:#fffaf2; --surface-2:#efe2cd; --ink:#1d150f; --ink-2:#4a3b2e; --muted:#6b5745; --rule:#d6c1a8;
  --accent:#234f34; --accent-ink:#ffffff; --link:#1f5a87;
  --good:#1f6b3a; --good-bg:#dcefdf; --watch:#8a5a00; --watch-bg:#fbe9c4; --act:#a1261b; --act-bg:#f8d9d4; --unknown:#5a5a5a; --unknown-bg:#e7e3dc;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-disp:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --r:14px; --scale:1; color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12100d; --surface:#1c1915; --surface-2:#26221c; --ink:#f3ece2; --ink-2:#d6cabb; --muted:#b3a593; --rule:#3a332a;
    --accent:#7fb38f; --accent-ink:#0d150f; --link:#8cc0ea;
    --good:#7fd19a; --good-bg:#1d3324; --watch:#f2c169; --watch-bg:#3a2d12; --act:#ff8c7d; --act-bg:#3f1a15; --unknown:#bdb6ac; --unknown-bg:#2c2924; color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:calc(17px * var(--scale))}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--f-body);min-height:100dvh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
a{color:var(--link)}
h1,h2,h3{margin:0;line-height:1.15;font-family:var(--f-disp)}
h1{font-size:1.75rem;font-weight:700}
h2{font-size:1.25rem;font-weight:700}
p{margin:0}
.dim{color:var(--ink-2)} .small{font-size:.88rem}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}

.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top) + 8px) 14px 8px;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:9px;font:700 1.2rem/1 var(--f-disp);background:none;border:0;color:inherit;padding:4px 0;cursor:pointer;min-height:44px}
.brand img{border-radius:8px}
.top-actions{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--rule);background:var(--surface);
  border-radius:99px;padding:8px 16px;font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink);text-decoration:none}
.pill.warn{border-color:var(--watch);color:var(--watch);background:var(--watch-bg)}
.pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

.banner{margin:10px 14px 0;padding:12px 14px;border-radius:var(--r);background:var(--watch-bg);color:var(--ink);border:1px solid var(--watch);font-weight:600}
.banner.demo{background:var(--unknown-bg);border-color:var(--unknown)}

main{max-width:680px;margin:0 auto;padding:14px 14px 20px}
.view{display:grid;gap:14px}
.hero{display:grid;gap:6px;padding:4px 0}
.login-logo{border-radius:20px;margin-bottom:6px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px;display:grid;gap:10px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.back{justify-self:start;background:none;border:0;color:var(--link);font-weight:600;font-size:1rem;padding:8px 0;min-height:44px;cursor:pointer}

/* status chips and pasture rows: always icon + word, never colour alone */
.counts{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:6px 12px;font-weight:700;font-size:.92rem}
.chip.good{background:var(--good-bg);color:var(--good)} .chip.watch{background:var(--watch-bg);color:var(--watch)}
.chip.act{background:var(--act-bg);color:var(--act)} .chip.unknown{background:var(--unknown-bg);color:var(--unknown)}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prow{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-left-width:8px;border-radius:var(--r);padding:14px 14px 14px 12px;min-height:72px}
.prow.good{border-left-color:var(--good)} .prow.watch{border-left-color:var(--watch)} .prow.act{border-left-color:var(--act)} .prow.unknown{border-left-color:var(--unknown)}
.prow .badge{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;font-weight:800}
.prow.good .badge{background:var(--good-bg);color:var(--good)} .prow.watch .badge{background:var(--watch-bg);color:var(--watch)}
.prow.act .badge{background:var(--act-bg);color:var(--act)} .prow.unknown .badge{background:var(--unknown-bg);color:var(--unknown)}
.prow b{font-size:1.08rem}
.prow .why{grid-column:2;color:var(--ink-2);font-size:.95rem}
.prow .go{grid-row:span 2;color:var(--muted);font-size:1.6rem}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--surface-2);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.tile b{font:700 1.6rem/1.05 var(--f-disp);font-variant-numeric:tabular-nums}
.tile span{font-size:.85rem;color:var(--ink-2)}
.fc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;text-align:center}
.fc div{background:var(--surface-2);border-radius:10px;padding:8px 2px;display:grid;gap:2px;font-size:.85rem}
.fc b{font-size:1rem}
.meter{height:14px;border-radius:99px;background:var(--surface-2);overflow:hidden;position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:99px}
.meter s{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink);text-decoration:none}
.src{font-size:.8rem;color:var(--muted)}

.sig{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 0;border-top:1px solid var(--rule)}
.sig:first-of-type{border-top:0;padding-top:0}
.sig .lv{grid-row:span 3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem}
.sig .lv.ok{background:var(--good-bg);color:var(--good)} .sig .lv.watch{background:var(--watch-bg);color:var(--watch)}
.sig .lv.concern{background:var(--act-bg);color:var(--act)} .sig .lv.unavailable{background:var(--unknown-bg);color:var(--unknown)}

.alert{border-left:6px solid var(--act);padding:8px 0 8px 12px;display:grid;gap:4px}
.alert.minor{border-left-color:var(--watch)}

.actions3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.big{display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;background:var(--accent);color:var(--accent-ink);border:0;
  border-radius:var(--r);padding:14px 6px;font-weight:700;font-size:.95rem;line-height:1.15;cursor:pointer;min-height:92px}
.big .ic{font-size:1.6rem;line-height:1}
.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;min-height:54px;font-weight:700;font-size:1.05rem;cursor:pointer;padding:0 18px}
.secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--rule);border-radius:12px;min-height:54px;font-weight:600;cursor:pointer;padding:0 18px}

.terrain3d{height:62vh;min-height:320px;border-radius:var(--r);border:1px solid var(--rule);background:#cfe3f2;overflow:hidden;touch-action:none;display:grid;place-items:center}
.terrain3d canvas{display:block}
.map{height:46vh;min-height:280px;border-radius:var(--r);border:1px solid var(--rule);background:var(--surface-2);overflow:hidden}
.leaflet-container{font:inherit}
.maplabel{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:2px 6px;font-weight:700;font-size:.8rem;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}

.loglist,.srclist{list-style:none;margin:0;padding:0;display:grid}
.loglist li,.srclist li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--rule)}
.loglist li:first-child,.srclist li:first-child{border-top:0}
.loglist .when,.srclist .when{color:var(--muted);font-size:.85rem;text-align:right}
.pending{color:var(--watch);font-weight:700;font-size:.85rem}
.ok-txt{color:var(--good);font-weight:700} .no-txt{color:var(--unknown);font-weight:700}

.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form select,.form textarea{width:100%;min-height:52px;border:1px solid var(--rule);border-radius:12px;padding:10px 12px;background:var(--surface);font-size:1.05rem}
.form textarea{min-height:110px}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.quick button{min-height:52px;border-radius:12px;border:1px solid var(--rule);background:var(--surface-2);font-weight:700;cursor:pointer}
.error{color:var(--act);font-weight:600}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(6,1fr);
  background:var(--surface);border-top:1px solid var(--rule);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabs button{display:grid;justify-items:center;gap:2px;background:none;border:0;min-height:58px;font-size:.78rem;padding:0;font-weight:600;color:var(--muted);cursor:pointer}
.tabs button span{font-size:1.35rem;line-height:1}
.tabs button[aria-current="page"]{color:var(--accent)}

.sheet-back{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:88dvh;overflow:auto;background:var(--bg);border-radius:20px 20px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));display:grid;gap:14px;max-width:680px;margin:0 auto;box-shadow:0 -6px 30px rgba(0,0,0,.25)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:70;background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:99px;font-weight:600;max-width:90vw;text-align:center}
@media (min-width:560px){.fc{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* ===================== ranch-hand layout (v2) ===================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.center{justify-items:center;text-align:center}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border-radius:14px;padding:4px;gap:4px}
.seg button{min-height:48px;border:0;border-radius:11px;background:none;font-weight:700;cursor:pointer;color:var(--ink-2)}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.seg.small button{min-height:40px;padding:0 12px;font-size:.92rem}

.actions4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.actions4 .big{min-height:110px;font-size:1.05rem}
.actions4 .big .ic{font-size:2rem}
.big.photo{background:#1f4f6e}
.big.warnbtn{background:#8a3b12}
@media (prefers-color-scheme:dark){.big.photo{background:#5f9fc8;color:#08131b}.big.warnbtn{background:#e0915f;color:#1d0e05}}

.attn{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.attn button,.attn li>div{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;
  border:1px solid var(--rule);border-left-width:7px;border-radius:12px;background:var(--surface);padding:12px;min-height:64px;cursor:pointer}
.attn .act{border-left-color:var(--act)} .attn .watch{border-left-color:var(--watch)} .attn .alert{border-left-color:#c0392b}
.attn .lead{font-size:1.5rem;grid-row:span 2}
.attn b{font-size:1.02rem} .attn span.why{grid-column:2;color:var(--ink-2);font-size:.93rem}
.allclear{display:flex;align-items:center;gap:14px;font-weight:700;font-size:1.15rem;color:var(--good)}
.allclear .big-ok{width:52px;height:52px;border-radius:50%;background:var(--good-bg);display:grid;place-items:center;font-size:1.6rem}

.wx{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wx .now{font:700 2.2rem/1 var(--f-disp)}
.wx3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.wx3 div{background:var(--surface-2);border-radius:10px;padding:8px 4px;display:grid;gap:2px;font-size:.9rem}

.mapview{gap:10px}
.maptools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.map{height:58vh;min-height:300px}
.map3d{height:62vh;min-height:320px;border-radius:var(--r);overflow:hidden;touch-action:none;position:relative;
  background:linear-gradient(180deg,#0f1a33 0%,#33406b 38%,#8a6f96 62%,#e59a68 84%,#f4c48c 100%)}
.map3d canvas{display:block}
.photo-pin{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid #1f4f6e;display:grid;place-items:center;font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);position:relative}
.photo-pin.flag{border-color:#c0392b}
.photo-pin .cone{position:absolute;left:50%;top:50%;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:22px solid rgba(255,255,255,.95);transform-origin:50% 100%;margin-left:-9px;margin-top:-38px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button,.tagchips button{min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--rule);background:var(--surface);font-weight:600;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tagchips{display:flex;flex-wrap:wrap;gap:8px}
.tagchips button[aria-pressed="true"]{background:var(--act-bg);border-color:var(--act);color:var(--act)}
.tagchips button.goodtag[aria-pressed="true"]{background:var(--good-bg);border-color:var(--good);color:var(--good)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.timeline li{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.timeline li.clickable{cursor:pointer}
.timeline .ico{font-size:1.4rem;width:40px;text-align:center}
.timeline img{width:72px;height:72px;object-fit:cover;border-radius:10px;grid-row:span 3}
.timeline .meta{color:var(--muted);font-size:.85rem}
.tag{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.8rem;font-weight:700;background:var(--act-bg);color:var(--act);margin:2px 4px 0 0}
.tag.ok{background:var(--good-bg);color:var(--good)}

.photoimg{width:100%;border-radius:12px;display:block;background:var(--surface-2)}
.photogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.photogrid button{padding:0;border:0;background:none;cursor:pointer}
.photogrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.stat{display:flex;gap:12px;flex-wrap:wrap}
.stat div{background:var(--surface-2);border-radius:10px;padding:8px 12px}
.stat b{font:700 1.4rem/1.1 var(--f-disp);display:block}
.sheet-grip{width:44px;height:5px;border-radius:9px;background:var(--rule);justify-self:center}
details.card summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px}
details.card summary::after{content:"▾";color:var(--muted)} details.card[open] summary::after{content:"▴"}
details.card summary::-webkit-details-marker{display:none}
.busy{display:grid;place-items:center;gap:10px;padding:24px;color:var(--ink-2)}
.spinner{width:36px;height:36px;border:4px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.photo-pin .n{position:absolute;top:-8px;right:-10px;min-width:20px;height:20px;border-radius:10px;background:#1f4f6e;color:#fff;
  font:700 12px/20px system-ui,sans-serif;text-align:center;padding:0 5px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.photo-pin.flag .n{background:#c0392b}
.spotrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.spotrow button{flex:0 0 96px;padding:0;border:2px solid transparent;border-radius:10px;background:var(--surface-2);cursor:pointer;text-align:left;color:inherit}
.spotrow button[aria-current]{border-color:var(--accent,#1f4f6e)}
.spotrow img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px 8px 0 0;display:block}
.spotrow span{display:block;font-size:.8rem;padding:3px 6px 5px;line-height:1.25}
.map,.map3d{isolation:isolate;position:relative;z-index:0}   /* keep Leaflet panes (z-index 400+) under sheets and tabs */
.big small{display:block;font-size:.72rem;font-weight:500;opacity:.85;margin-top:2px}
.tagpick{display:grid;gap:8px}
.tgroup{border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.tgroup summary{min-height:48px;display:flex;align-items:center;gap:8px;padding:0 14px;font-weight:700;cursor:pointer;list-style:none}
.tgroup summary::-webkit-details-marker{display:none}
.tgroup summary::after{content:"▾";margin-left:auto;opacity:.6}
.tgroup[open] summary::after{content:"▴"}
.tgroup summary .n{color:var(--act);font-weight:700}
.tgroup .tagchips{padding:0 12px 12px}
.tagchips button.infotag[aria-pressed="true"]{background:#e3edf7;border-color:#1f4f6e;color:#1f4f6e}
.tag.info{background:#e3edf7;color:#1f4f6e}
.picked{margin:2px 0 0}
.photo-pin.report{background:#fffaf2;border-color:#1f4f6e}
.photo-pin.report.flag{border-color:#c0392b}
@media (prefers-color-scheme: dark){.tagchips button.infotag[aria-pressed="true"],.tag.info{background:#1d3346;color:#cfe3f5;border-color:#6aa0c8}}
.tasks{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.task{display:flex;align-items:stretch;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:6px 8px 6px 6px}
.task.late{border-left:5px solid var(--act)}
.task.today{border-left:5px solid var(--watch,#e0a21b)}
.task .check{flex:0 0 48px;height:48px;align-self:center;border-radius:12px;border:2.5px solid var(--ink);background:var(--bg);
  font:800 1.5rem/1 system-ui;color:#fff;cursor:pointer}
.task .check[aria-pressed="true"]{background:var(--good);border-color:var(--good)}
.task.done b{text-decoration:line-through;opacity:.65}
.task .tbody{flex:1;text-align:left;background:none;border:0;padding:4px 0;color:inherit;cursor:pointer;display:grid;gap:2px}
.task .tbody .meta{font-size:.85rem;color:var(--ink-2,#6b5d50)}
.linkbtn{background:none;border:0;color:var(--accent,#1f4f6e);font-weight:700;padding:8px 0;cursor:pointer}
#v-todo h2{margin:18px 0 8px}
.tabs button{font-size:.78rem}

/* ===================================================================== Computer layout (rangeiq.org on a desktop or tablet)
   Same app, same look; the tab bar becomes a sidebar, Home and Map use two columns, sheets open as centred dialogs. */
@media (min-width: 960px){
  body{padding-bottom:0}
  .top{padding-left:24px;padding-right:24px}
  .banner{margin:12px 24px 0 252px}
  main{max-width:1240px;margin:0;padding:22px 32px 40px 252px}
  .tabs{top:calc(env(safe-area-inset-top) + 62px);bottom:auto;left:0;right:auto;width:228px;display:flex;flex-direction:column;gap:4px;
    padding:14px 12px;border-top:0;border-right:1px solid var(--rule);background:transparent;height:calc(100dvh - 62px)}
  .tabs button{display:flex;align-items:center;justify-items:start;gap:12px;min-height:50px;padding:0 14px;border-radius:12px;font-size:1rem;text-align:left}
  .tabs button span{font-size:1.25rem}
  .tabs button:hover{background:var(--surface-2)}
  .tabs button[aria-current="page"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);color:var(--accent)}
  h1{font-size:2.1rem}

  /* Home: actions and jobs on the left, what needs attention and weather on the right */
  #v-home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:22px}
  #v-home > .hero{grid-column:1 / -1}
  #v-home > .actions4{grid-column:1;grid-template-columns:repeat(4,minmax(0,1fr))}
  #v-home > #h-todo{grid-column:1}
  #v-home > #h-attention{grid-column:2;grid-row:2 / span 3}
  #v-home > #h-weather{grid-column:1}
  .actions4 .big{min-height:120px}

  /* Map: big map with the pasture list beside it */
  #v-map{grid-template-columns:minmax(0,1fr) 340px;align-items:start;column-gap:20px}
  #v-map > *{grid-column:1}
  #v-map > #m-list{grid-column:2;grid-row:1 / span 6;max-height:calc(100dvh - 120px);overflow:auto;padding-right:4px}
  .map{height:calc(100dvh - 230px);min-height:420px}
  .map3d{height:calc(100dvh - 260px);min-height:420px}

  /* Pasture page: photos and status side by side */
  #v-pasture{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-items:start}
  #v-pasture > .back,#v-pasture > .hero,#v-pasture > .actions4{grid-column:1 / -1}
  #v-pasture > .actions4{grid-template-columns:repeat(2,minmax(0,280px))}
  .photogrid{grid-template-columns:repeat(4,minmax(0,1fr))}

  #v-log,#v-todo,#v-more{max-width:860px}
  #v-login{max-width:520px;margin:6vh auto 0}

  /* Sheets become centred dialogs */
  .sheet{top:7vh;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:min(620px,92vw);max-height:86dvh;border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .sheet-grip{display:none}
  .toast{bottom:28px}
  .photoimg{max-height:52vh;object-fit:contain;background:var(--surface-2)}
}
/* when signed out there is no sidebar */
@media (min-width: 960px){ body:has(#v-login:not([hidden])) main{padding-left:32px;margin:0 auto} }
@media (min-width: 1400px){ main{max-width:1320px} }
.layers{display:flex;flex-wrap:wrap;gap:8px}
.layer{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--rule);background:var(--surface-2);font-weight:600;cursor:pointer;opacity:.6}
.layer[aria-pressed="true"]{opacity:1;background:var(--surface);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.layer .dim{font-weight:500;font-size:.85rem}
.switchrow{display:flex;align-items:center;gap:10px;font-weight:600;min-height:44px;cursor:pointer}
.switchrow input{width:24px;height:24px;accent-color:var(--accent)}
.pickbar{position:sticky;top:70px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:var(--r);
  background:var(--accent);color:var(--accent-ink)}
.photo-pin.place{background:#fffaf2;border-color:#2b6cb0;border-radius:10px}
@media (min-width: 960px){ #v-map > #layerCard{grid-column:1} }
.switchrow{align-items:flex-start}
.switchrow input{flex:0 0 24px;margin-top:2px}
.placethumb{width:96px;height:96px;object-fit:cover;border-radius:12px}
.photo-pin.usgs{width:28px;height:28px;font-size:13px;background:rgba(255,255,255,.85);border:2px dashed #2b6cb0}
.wx7{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.wx7 > div{display:grid;justify-items:center;gap:1px;background:var(--surface-2);border-radius:12px;padding:8px 4px;font-size:.9rem}
.wx7 b{font-size:1.15rem}
.wx7 .rain{font-size:.82rem;font-weight:600}
.wx7 .rain.wet{color:var(--link)}
.sky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sky > div{display:grid;gap:1px;background:var(--surface-2);border-radius:12px;padding:10px 12px}
.sky .ic{font-size:1.5rem;line-height:1}
.sky b{font-size:1.2rem}
@media (min-width: 960px){ #v-home > #h-sky{grid-column:2} .sky{grid-template-columns:repeat(4,minmax(0,1fr))} }
.wxic{font-size:2.6rem;line-height:1}
.wxic.sm{font-size:1.6rem}
.wx{display:flex;align-items:center;gap:12px}
.filebtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:12px;border:1px solid var(--rule);
  background:var(--surface-2);font-weight:700;cursor:pointer;justify-self:start}
.drawbar{position:fixed;left:8px;right:8px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;display:grid;gap:8px;padding:12px;border-radius:16px;
  background:var(--surface);border:2px solid #ffd84d;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.drawinfo{display:grid;gap:2px}
.drawbar .row{gap:6px}
.drawbar .pill{min-height:44px;padding:6px 12px}
.pill.primarypill{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.vtx{width:22px;height:22px;border-radius:50%;background:#ffd84d;border:3px solid #1d150f;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vtx.sel{background:#d63c2f;border-color:#fff}
.vtx.mid{width:18px;height:18px;background:rgba(255,255,255,.85);border:2px solid #1d150f;font:700 13px/13px system-ui;text-align:center;color:#1d150f}
.swatch{display:inline-block;width:18px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.pickbar.unlocked{background:#ffd84d;color:#1d150f}
@media (min-width: 960px){ .drawbar{left:252px;right:24px;bottom:20px;max-width:900px} }
/* drawing mode: map fills the screen between the header and the drawing bar */
body.drawing .banner, body.drawing #v-map .maptools, body.drawing #lockNote, body.drawing #layerCard, body.drawing #pickBar,
body.drawing #m-list, body.drawing #map-src, body.drawing #exagRow{display:none!important}
body.drawing #v-map .map{height:calc(100dvh - 300px - env(safe-area-inset-bottom));min-height:300px}
@media (min-width: 960px){ body.drawing #v-map .map{height:calc(100dvh - 260px)} }
.me{position:relative;width:20px;height:20px;border-radius:50%;background:#2b7de9;border:3px solid #fff;box-shadow:0 0 0 6px rgba(43,125,233,.25),0 1px 4px rgba(0,0,0,.4)}
.me i{position:absolute;left:50%;top:50%;width:0;height:0;margin:-24px 0 0 -7px;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:14px solid #2b7de9;transform-origin:7px 24px}
#exagRow{align-items:center}
#exagSlider{flex:1;min-width:140px;accent-color:var(--accent);height:32px}

/* pasture flags (2D map): pole + status pennant, name shows once zoomed in; the whole flag is the tap target */
.pflag-at{width:0;height:0}
.pflag{position:absolute;left:-3px;bottom:0;display:flex;align-items:flex-end;min-height:40px;padding:0 6px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pflag i{position:relative;width:3px;height:34px;background:#fff;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.7);flex:none}
.pflag i::after{content:"";position:absolute;left:3px;top:0;border-left:20px solid var(--c);border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 0 1px rgba(0,0,0,.8))}
.pflag span{display:none;position:absolute;left:1px;bottom:36px;transform:translateX(-50%);background:rgba(20,22,40,.82);color:#fff;border:2px solid var(--c);border-radius:8px;padding:3px 8px;font-weight:700;font-size:.8rem;white-space:nowrap}
.flag-names .pflag span{display:block}
.pflag::before{content:"";position:absolute;left:-14px;right:-6px;top:-4px;bottom:-8px}

/* photos that belong to a report, job, place or line: thumbnails, ✕ to remove, "Add photo" */
.pstrip{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin:4px 0}
.pthumb{position:relative;width:84px;height:84px}
.pthumb img{width:84px;height:84px;object-fit:cover;border-radius:10px;display:block}
.pthumb > button[data-photo]{padding:0;border:0;background:none;cursor:pointer;border-radius:10px}
.pdel{position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:#1d1d1f;color:#fff;font-size:.9rem;line-height:1;cursor:pointer;padding:0}
.padd{width:84px;height:84px;border:2px dashed var(--rule);border-radius:10px;background:var(--surface-2);color:inherit;font-size:.8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.padd span{font-size:1.5rem}
.timeline .lphotos{display:flex;gap:4px;margin-top:6px;align-items:center}
.timeline .lphotos img{width:44px;height:44px;object-fit:cover;border-radius:6px;grid-row:auto}
.timeline .ico .swatch{display:inline-block;width:22px;height:6px;border-radius:3px;vertical-align:middle}

/* resolved problems */
.resolved{background:var(--good-bg);color:var(--good);border-radius:12px;padding:10px 12px;margin:8px 0}
.donechip{display:inline-block;background:var(--good-bg);color:var(--good);border-radius:99px;padding:1px 8px;font-size:.8rem;font-weight:700;white-space:nowrap}

/* ---- chat */
.tabs button{position:relative}
.tabbadge{position:absolute;top:2px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#c0392b;color:#fff;font-size:.72rem;line-height:18px;font-weight:800}
.threads{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.threads button{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:2px 12px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:10px 12px;color:inherit;cursor:pointer}
.threads .av{grid-row:span 2}
.threads .who{font-weight:800}
.threads .last{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:2}
.threads .when{color:var(--muted);font-size:.8rem;grid-row:1;grid-column:3;text-align:right}
.threads .n{grid-column:3;justify-self:end;min-width:22px;height:22px;border-radius:11px;background:#c0392b;color:#fff;font-size:.8rem;font-weight:800;text-align:center;line-height:22px;padding:0 6px}
.chathead{display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:2}
.chathead h2{margin:0;font-size:1.15rem}
.bubbles{list-style:none;margin:0;padding:8px 0 96px;display:flex;flex-direction:column;gap:6px}
.bubbles .day{align-self:center;color:var(--muted);font-size:.8rem;margin:8px 0 2px}
.bubbles .msg{max-width:80%;padding:8px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);overflow-wrap:anywhere}
.bubbles .msg .body{white-space:pre-wrap}
.bubbles .msg.mine{align-self:flex-end;background:#1f5e3b;color:#fff;border-color:#1f5e3b}
.bubbles .msg .from{display:block;font-size:.78rem;font-weight:800;color:var(--muted);margin-bottom:2px}
.bubbles .msg .t{display:block;font-size:.72rem;opacity:.75;margin-top:2px;text-align:right}
.composer{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:8px 16px;background:var(--bg);border-top:1px solid var(--rule);z-index:5}
.composer textarea{flex:1;resize:none;max-height:140px;font:inherit;padding:10px 12px;border-radius:18px;border:1px solid var(--rule);background:var(--surface);color:inherit}
.composer button{border-radius:18px;padding:0 18px}
@media (min-width: 960px){
  .composer{left:252px;bottom:0;padding:12px 32px}
  .tabbadge{position:static;margin-left:auto}
  .bubbles{max-width:820px}
}

/* message ticks */
.tick{font-size:.78rem;letter-spacing:-.18em;margin-left:2px;opacity:.85}
.bubbles .msg.mine .tick{color:#d8efe0}
.tick.read,.bubbles .msg.mine .tick.read{color:#53bdeb;opacity:1;font-weight:800}
.threads .last .tick{color:var(--muted)} .threads .last .tick.read{color:#2a9fd6}
.msginfo{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;white-space:pre-wrap}

/* ---- chat look: RangeIQ logo behind conversations; profile pictures */
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.05rem;background:var(--surface-2);color:var(--ink-2)}
.av.logo{object-fit:contain;background:#fbf6ed;padding:3px;box-sizing:border-box}
.av.small{width:34px;height:34px;font-size:.9rem}
.av.mini{width:20px;height:20px;font-size:.65rem;vertical-align:-5px;margin-right:6px}
.av.big{width:52px;height:52px;font-size:1.3rem}
.av.huge{width:144px;height:144px;font-size:3rem}
.picprev{display:flex;justify-content:center;margin:6px 0 10px}
.chathero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mepic{position:relative;background:none;border:0;padding:0;cursor:pointer;border-radius:50%;margin-top:6px}
.mepic .av{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--rule)}
.mepic .edit{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent,#1f5e3b);color:#fff;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
.chathead .av{margin-left:2px}
#c-thread{position:relative}
#c-thread::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(chat-bg.png) center 46% / min(78vw, 440px) no-repeat;opacity:.11}
#c-thread > *{position:relative;z-index:1}
#c-thread .composer{position:fixed;z-index:5}
#c-thread .chathead{z-index:3;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(6px)}
@media (prefers-color-scheme: dark){ #c-thread::before{opacity:.24} .av.logo{background:#fbf6ed} }
@media (min-width: 960px){ #c-thread::before{left:240px} }
.mepic{flex:none;width:52px;height:52px;line-height:0;align-self:flex-start}
.mepic .av.big{width:52px;height:52px;min-height:0;font-size:1.3rem;line-height:1}

/* ---- SOS */
.sosbtn{background:#c0392b;color:#fff;border:0;border-radius:999px;font-weight:900;letter-spacing:.06em;padding:8px 14px;min-height:40px;
  box-shadow:0 2px 6px rgba(192,57,43,.45);cursor:pointer}
.sosbtn.live{animation:sospulse 1.2s infinite}
@keyframes sospulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.7)}50%{box-shadow:0 0 0 10px rgba(192,57,43,0)}}
.sosbar{position:sticky;top:60px;z-index:35;display:grid;gap:4px;padding:6px 12px;background:#c0392b}
.sosbar button{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;font:inherit;padding:6px 2px;cursor:pointer}
.sosbar .go{float:right;font-weight:800}
.sosscreen{position:fixed;inset:0;z-index:300;background:rgba(80,10,6,.92);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.sosbox{width:100%;max-width:520px;background:var(--bg);color:var(--ink);border-radius:20px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.sosbox.alert{border:4px solid #c0392b}
.sosbox.alert h2{color:#c0392b;font-size:1.6rem;margin:0 0 6px}
.sosbox .sosbig{font-size:1.15rem;font-weight:700}
.sosbox h2{margin-top:0}
.sosbtns{display:grid;gap:10px;margin-top:12px}
.sosbtns button{min-height:54px;font-size:1.05rem}
.sosbtns .onway{background:#1f5e3b}
.sosok{background:var(--good-bg);color:var(--good);border-radius:10px;padding:8px 10px;font-weight:700}
.sosfail{background:#fdecea;color:#8e1b10;border-radius:10px;padding:8px 10px}
.soskinds{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.soskinds button{border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:8px 12px;font:inherit;cursor:pointer;color:inherit}
.soskinds button[aria-pressed="true"]{background:#c0392b;color:#fff;border-color:#c0392b}
.sosHold{position:relative;overflow:hidden;width:100%;min-height:84px;border:0;border-radius:18px;background:#c0392b;color:#fff;font-size:1.15rem;
  font-weight:900;margin:12px 0;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sosHold .fill{position:absolute;inset:0;width:0;background:#7d1d14;transition:none}
.sosHold.holding .fill{width:100%;transition:width 2s linear}
.sosHold .lbl{position:relative}
.okbtn{background:#1f5e3b}
.photo-pin.sos{width:46px;height:46px;font-size:22px;border-color:#c0392b;background:#fff;animation:sospulse 1.2s infinite;z-index:1000!important}
.sosrow .sosnow{color:#c0392b}
@media (prefers-color-scheme: dark){ .sosfail{background:#4a1712;color:#ffd7d1} }
/* ---- ranch icons (icons.js) */
.ricon{display:inline-block;vertical-align:middle;flex:none}
.photo-pin{width:40px;height:40px;border-width:3px}
.photo-pin .ricon{width:30px;height:30px}
.photo-pin.flag{border-width:4px}
.photo-pin.sos{background:none;border:0;width:48px;height:48px}
.photo-pin.sos .ricon{width:46px;height:46px}
.tagchips button{display:inline-flex;align-items:center;gap:6px}
.tagchips button .ricon{margin-left:-4px}
.tgroup summary .ricon{margin-right:2px}
.tag .ricon{margin:-3px 1px 0 -2px}
.kindgroup{display:flex;align-items:center;gap:6px;margin-top:8px}
.kindline{display:flex;align-items:center;gap:10px}
.timeline .ico .ricon{width:34px;height:34px}
.layer .ricon{margin-right:2px}
/* dark mode: the icons are drawn in dark ink, so give them a light tile where they sit on a dark background */
@media (prefers-color-scheme: dark){
  .ricon{background:#f1e8d8;border-radius:7px;padding:2px;box-sizing:border-box}
  .photo-pin .ricon{background:none;padding:0}
}
:root[data-theme="dark"] .ricon{background:#f1e8d8;border-radius:7px;padding:2px;box-sizing:border-box}
:root[data-theme="dark"] .photo-pin .ricon{background:none;padding:0}

/* herd ledger: head counts by class */
.hgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hgrid .hcls{display:flex;flex-direction:column;gap:2px;font-weight:600;font-size:.92rem}
.hgrid input{width:100%;min-height:48px;font-size:1.15rem;text-align:center;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:4px}
.hgrid input:disabled{background:var(--surface-2);color:var(--ink-2)}
.hgrid small{min-height:1.2em;font-weight:400;font-size:.78rem}
.hline{border:1px solid var(--rule);border-radius:var(--r);padding:10px;margin:4px 0 8px;background:var(--surface-2);display:grid;gap:8px}
.hfrom{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:8px}
.hfrom label:first-child{grid-column:1/-1}
.hfrom .switchrow{min-height:44px}
.hwarn{color:var(--watch);font-weight:600;font-size:.9rem}
.hwarn:empty{display:none}
.hsum{font-weight:700}
.hsum:empty{display:none}
.hcount{font-size:1.1rem}
.herdcard{padding:0;overflow:hidden}
.herdline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:14px 16px;cursor:pointer;color:inherit}
.herdline .go{font-size:1.5rem;color:var(--muted)}
.linkrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.form .hfrom .switchrow{display:flex;align-items:center;font-weight:600}
.form .hfrom .switchrow input{margin:0}
#sheetBody > .seg + .form{margin-top:14px}