/* Ontario Hunt Map — field-gear look: spruce + lichen, hunter orange as the one loud colour,
   trail-sign lettering (Barlow / Barlow Condensed). Follows the phone's light/dark setting. */

:root {
  --spruce: #12261e;
  --spruce-2: #1f3b30;
  --lichen: #e8eee9;
  --card: #ffffff;
  --line: #d3dcd5;
  --line-strong: #b7c3ba;
  --ink: #12261e;
  --muted: #5d6e66;
  --blaze: #ff6a13;
  --blaze-deep: #d9500a;
  --blaze-ink: #ffffff;
  --soft: #dfe7e1;

  /* land access */
  --land-green: #2fa44f;
  --land-yellow: #f2c230;
  --land-orange: #ee8f2e;
  --land-blue: #3d7bd9;
  --land-red: #d63a2f;
  /* season outlines */
  --s-open: #14804a;
  --s-soon: #c27c0e;
  --s-later: #4a6fa5;
  --s-closed: #7d847f;
  --s-none: #b9bfba;

  --shadow: 0 1px 2px rgba(18, 38, 30, .12), 0 6px 18px rgba(18, 38, 30, .14);
  --shadow-up: 0 -2px 6px rgba(18, 38, 30, .08), 0 -10px 30px rgba(18, 38, 30, .14);
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-c: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lichen: #101c17;
    --card: #182821;
    --line: #2a3d34;
    --line-strong: #3a5145;
    --ink: #e4ece6;
    --muted: #9db0a5;
    --soft: #23362d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.45);
    --shadow-up: 0 -10px 30px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body { font: 500 16px/1.4 var(--font); color: var(--ink); background: var(--lichen); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, label, summary, .slider { touch-action: manipulation; }   /* no double-tap zoom delay */
a { color: var(--blaze-deep); }
@media (prefers-color-scheme: dark) { a { color: #ff9a5c; } }
:focus-visible { outline: 3px solid var(--blaze); outline-offset: 2px; }
h2 { font: 700 1.05rem/1.2 var(--font); margin: 0 0 10px; letter-spacing: .005em; }
h2 small { font-weight: 500; color: var(--muted); font-size: .85rem; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app { position: fixed; inset: 0; overflow: hidden; }
#map { position: absolute; inset: 0; background: #d9e0d6; }
@media (prefers-color-scheme: dark) { #map { background: #1b2621; } }

/* ---------- floating search + animal ---------- */
.topfloat { position: absolute; z-index: 1001; top: calc(10px + var(--safe-t)); left: 10px; right: 76px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.searchpill { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 8px 0 14px; background: var(--card); border-radius: 25px; box-shadow: var(--shadow); color: var(--muted); }
.searchpill input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--ink); height: 100%; }
.searchpill input::-webkit-search-cancel-button { display: none; }
.animalchip { position: relative; display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px; border-radius: 25px; background: var(--spruce); color: #fff; box-shadow: var(--shadow); cursor: pointer; max-width: 170px; flex: none; }
.animalchip select { appearance: none; border: 0; background: none; color: #fff; font-weight: 700; font-size: 15px; max-width: 120px; padding-right: 2px; cursor: pointer; outline: none; }
.animalchip select option { color: #12261e; }
.animalchip .chev { width: 18px; height: 18px; }
.searchresults { flex-basis: 100%; list-style: none; margin: 0; padding: 6px; background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); max-height: 50vh; overflow: auto; }
.searchresults li button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 11px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 15px; }
.searchresults li button:hover, .searchresults li button:focus-visible { background: var(--soft); }
.searchresults .sr-head { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 8px 10px 2px; }
.searchresults small { display: block; color: var(--muted); font-size: 13px; }

/* ---------- tool rail ---------- */
.rail { position: absolute; z-index: 1000; right: 10px; top: calc(10px + var(--safe-t)); display: flex; flex-direction: column; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 4px; }
.railbtn { width: 52px; height: 54px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 1px; cursor: pointer; color: var(--ink); padding: 0; }
.railbtn span { font: 600 10.5px/1 var(--font); color: var(--muted); }
.railbtn:active { background: var(--soft); }
.railbtn.on { background: var(--blaze); color: #fff; }
.railbtn.on span { color: #fff; }
.railbtn.rec { color: var(--land-red); }
.railgap { height: 1px; background: var(--line); margin: 3px 8px; }
.railtools { display: grid; overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.rail.open .railtools { max-height: 240px; }
.rail.open [data-act=add] { background: var(--spruce); color: #fff; }
.rail.open [data-act=add] span { color: #fff; }
.rail [data-act=add] .ic { transition: transform .2s; }
.rail.open [data-act=add] .ic { transform: rotate(45deg); }

/* ---------- floating cards ---------- */
.pop-card { position: absolute; z-index: 1002; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 12px 14px 14px; }
.layerpop { right: 76px; top: calc(70px + var(--safe-t)); width: 330px; max-width: calc(100% - 96px); max-height: calc(100% - 230px); overflow-y: auto; overscroll-behavior: contain; }
.pc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pc-sub { display: block; margin: 12px 0 4px; }

.bm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bm-grid button { display: grid; gap: 5px; padding: 4px 4px 6px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--soft); cursor: pointer; font-size: 13px; font-weight: 600; }
.bm-grid img { width: 100%; aspect-ratio: 1.35; object-fit: cover; border-radius: 8px; display: block; background: var(--line); }
.bm-grid button.on { border-color: var(--blaze); background: var(--card); }

/* ---------- drawing bar ---------- */
.drawbar { position: absolute; z-index: 1003; left: 10px; right: 76px; top: calc(70px + var(--safe-t)); background: var(--spruce); color: #fff; border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.drawbar #drawText { font-weight: 600; }
.drawbtns { display: flex; gap: 8px; }
.drawbtns .btn { flex: 1; }

/* ---------- buttons, inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 18px; border-radius: 24px; border: 0; cursor: pointer; font-weight: 700; font-size: 15.5px; background: var(--spruce); color: #fff; text-decoration: none; }
.btn .ic { width: 20px; height: 20px; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
.btn.block { width: 100%; }
.btn.accent { background: var(--blaze); color: var(--blaze-ink); }
.btn.accent:active { background: var(--blaze-deep); }
.btn.soft { background: var(--soft); color: var(--ink); }
.btn.ghost-dark { background: rgba(255,255,255,.12); color: #fff; }
.btn:disabled { opacity: .55; cursor: progress; }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--soft); display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; }
.iconbtn.sm { width: 36px; height: 36px; background: transparent; }
.textbtn { border: 0; background: none; color: var(--blaze-deep); font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 2px; }
@media (prefers-color-scheme: dark) { .textbtn { color: #ff9a5c; } }

.field { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.field > span { color: var(--muted); }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--card); font-size: 16px; font-weight: 500; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--blaze); outline: none; }
.inputwrap { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.inputwrap input { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; flex-wrap: nowrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 .field { margin: 6px 0; }
.hint { color: var(--muted); font-size: 14px; font-weight: 500; margin: 4px 0 10px; }
.hint.pad { padding: 0 16px; }
.fine { color: var(--muted); font-size: 12.5px; }
.status { color: var(--muted); font-size: 14px; margin: 8px 0 0; min-height: 1.2em; }
.status.err { color: var(--land-red); }

/* segmented controls */
.seg { display: flex; background: var(--soft); border-radius: 24px; padding: 3px; gap: 2px; margin: 8px 0; }
.seg button { flex: 1; min-height: 42px; border: 0; background: none; border-radius: 21px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--muted); padding: 0 8px; white-space: nowrap; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(18,38,30,.18); }
.seg.scroll { overflow-x: auto; scrollbar-width: none; }

/* switches */
.switches { display: grid; gap: 2px; margin: 8px 0; }
.sw-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; font-size: 15px; cursor: pointer; }
.sw-row > span:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sw-row select { width: auto; min-height: 36px; padding: 2px 8px; display: inline-block; }
.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--line-strong); border-radius: 15px; transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + i { background: var(--land-green); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--blaze); outline-offset: 2px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label, .chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--soft); border: 1.5px solid transparent; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) { background: var(--spruce); color: #fff; }
.chips label.nodata { opacity: .7; }
.chips.presets { gap: 6px; margin-top: 8px; }
.chips.presets button { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.chips.presets button.on { border-color: var(--blaze); background: var(--card); }

/* ---------- custom slider (pointer-driven, big thumb, touch friendly) ---------- */
.slider { position: relative; height: 52px; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; margin-top: 2px; }
.slider .track { position: absolute; left: 14px; right: 14px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--line); }
.slider .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--blaze); }
.slider .thumb { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--card); border: 3px solid var(--blaze); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .1s; }
.slider.dragging .thumb { transform: scale(1.15); }
.slider .bubble { position: absolute; bottom: calc(50% + 22px); font: 700 15px/1 var(--font-c); background: var(--spruce); color: #fff; padding: 5px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.slider:focus-visible { outline: none; }
.slider:focus-visible .thumb { box-shadow: 0 0 0 4px rgba(255,106,19,.35); }

/* ---------- sheet ---------- */
.sheet { position: absolute; z-index: 1000; background: var(--lichen); display: flex; flex-direction: column; }
.grabber { display: none; }
.sheethead { display: none; }
.navbar { display: flex; gap: 2px; padding: 4px 6px; flex: none; }
.tab { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12px; }
.tab .ic { width: 23px; height: 23px; }
.tab.active { color: var(--ink); background: var(--card); box-shadow: 0 1px 2px rgba(18,38,30,.12); }
.tab.active .ic { color: var(--blaze); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; padding-bottom: calc(18px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.block { background: var(--card); border-radius: var(--r-lg); padding: 14px 16px; margin: 10px 10px 0; }
.block > h2:first-child, .block > .row:first-child h2 { margin-bottom: 8px; }
.stickycta { position: sticky; bottom: 0; padding: 10px 10px 4px; background: linear-gradient(to top, var(--lichen) 70%, transparent); }

/* phones: draggable bottom sheet */
@media (max-width: 899px) {
  .sheet { --peek: calc(132px + var(--safe-b)); left: 0; right: 0; bottom: 0; height: calc(100% - 66px - var(--safe-t)); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-up); transition: transform .3s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  /* snap positions in CSS so they follow the real screen height (address bar in/out) */
  .sheet[data-snap="peek"] { transform: translateY(calc(100% - var(--peek))); }
  .sheet[data-snap="half"] { transform: translateY(45%); }
  .sheet[data-snap="full"] { transform: translateY(0); }
  .sheet[data-snap="peek"] .sheet-body { overflow: hidden; }
  .sheet.dragging { transition: none; }
  .sheethead { display: block; position: relative; flex: none; }
  .grabber { display: block; height: 34px; padding-top: 12px; touch-action: none; cursor: grab; }
  .sheettoggle { position: absolute; right: 8px; top: 2px; width: 40px; height: 32px; }
  .sheettoggle .ic { transition: transform .2s; }
  .sheet[data-snap="peek"] .sheettoggle .ic { transform: rotate(180deg); }
  .grabber span { display: block; width: 46px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto; }
  .navbar, .sheethead { touch-action: none; }
  .sheet-body { touch-action: pan-y; }
  .leaflet-bottom { bottom: 130px; }
  .leaflet-control-zoom { display: none; }
  .animalchip { max-width: 138px; padding: 0 10px; }
  .animalchip select { font-size: 14px; max-width: 84px; }
}

/* PC: floating card on the left */
@media (min-width: 900px) {
  .topfloat { left: 16px; right: auto; width: 400px; top: 16px; }
  .sheet { left: 16px; top: 78px; bottom: 16px; width: 400px; border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
  .rail { right: 16px; top: 16px; }
  .layerpop { right: 88px; top: 16px; }
  .drawbar { left: 432px; right: 88px; top: 16px; grid-template-columns: 1fr auto; align-items: center; }
  .leaflet-left .leaflet-control { margin-left: 432px; }
  .leaflet-top.leaflet-left { top: 6px; }
}

/* ---------- map legend + content ---------- */
.access-legend { list-style: none; padding: 0; margin: 4px 0 6px; display: grid; gap: 10px; }
.access-legend li { display: flex; gap: 12px; align-items: flex-start; }
.access-legend span { display: grid; }
.access-legend b { font-weight: 700; font-size: 15px; }
.access-legend small { color: var(--muted); font-size: 13.5px; }
.lg { width: 22px; height: 22px; border-radius: 6px; flex: none; margin-top: 1px; border: 2px solid rgba(0,0,0,.18); }
.lg.green { background: var(--land-green); } .lg.yellow { background: var(--land-yellow); } .lg.orange { background: var(--land-orange); }
.lg.blue { background: var(--land-blue); } .lg.red { background: var(--land-red); }
details.more { margin-top: 6px; }
details.more summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 0; }

.legend { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.sw { width: 20px; height: 0; border-top: 4px solid; border-radius: 2px; display: inline-block; }
.sw.open { border-color: var(--s-open); } .sw.soon { border-color: var(--s-soon); } .sw.later { border-color: var(--s-later); }
.sw.closed { border-color: var(--s-closed); } .sw.none { border-color: var(--s-none); border-top-style: dashed; }

.phase { background: var(--soft); border-radius: var(--r-md); padding: 10px 12px; margin: 10px 0 0; font-size: 14.5px; }
.phase:empty { display: none; }
.origin { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.origin b { color: var(--ink); }
.place-results { list-style: none; padding: 0; margin: 0; }
.place-results li button { width: 100%; text-align: left; border: 0; background: var(--soft); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 4px; cursor: pointer; font-size: 14.5px; }

/* result cards */
.cards { list-style: none; padding: 0; margin: 0; }
#tripResults h2 { margin: 18px 16px 0; }
.card { background: var(--card); border-radius: var(--r-lg); margin: 10px 10px 0; padding: 12px 14px; cursor: pointer; border: 2px solid transparent; }
.card:active { border-color: var(--line); }
.card-head { display: flex; gap: 12px; align-items: center; }
.score { font: 700 28px/1 var(--font-c); color: var(--blaze-deep); min-width: 52px; text-align: center; }
@media (prefers-color-scheme: dark) { .score { color: #ff8a45; } }
.score small { display: block; font: 600 11px/1.2 var(--font); color: var(--muted); }
.card-title { display: grid; }
.card-title b { font-size: 16px; }
.card-title small { color: var(--muted); font-size: 13.5px; }
.card ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.card ul li { margin: 2px 0; }
.card .warn { color: #a3530a; }
.card-actions { display: flex; gap: 8px; margin-top: 10px; }
.card-actions .btn { flex: 1; }
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--soft); }
.tag.green { background: #dcf2e2; color: #145d2a; } .tag.yellow { background: #fbf0c8; color: #6b5300; }
.area-head { margin: 18px 16px 0; font: 700 13px/1.2 var(--font); color: var(--muted); }

/* forecast */
.fc { background: var(--soft); border-radius: var(--r-md); margin: 8px 0; }
.fc summary { display: grid; grid-template-columns: 86px 1fr 74px; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; font-size: 14.5px; }
.fc summary::-webkit-details-marker { display: none; }
.fc-day { font-weight: 700; }
.fc-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.fc-bar i { display: block; height: 100%; background: var(--s-closed); }
.fc.fair .fc-bar i { background: var(--s-soon); } .fc.good .fc-bar i { background: #6aa83a; } .fc.great .fc-bar i { background: var(--s-open); }
.fc-score { text-align: right; font: 700 17px/1 var(--font-c); }
.fc ul { margin: 0; padding: 0 14px 0 30px; font-size: 14px; }
.fc p { margin: 8px 14px; font-size: 14px; }
.fc[open] { padding-bottom: 8px; }

/* saved list */
.saved-list { list-style: none; padding: 0; margin: 0; }
.saved-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin: 8px 10px 0; background: var(--card); border-radius: var(--r-md); cursor: pointer; }
.saved-sym { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--spruce-2); flex: none; }
@media (prefers-color-scheme: dark) { .saved-sym { color: var(--ink); } }
.saved-main { display: grid; min-width: 0; }
.saved-main small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prose p { font-size: 15px; font-weight: 500; }

/* ---------- toast ---------- */
.toast { position: absolute; z-index: 1100; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%); background: var(--spruce); color: #fff; padding: 10px 16px; border-radius: 22px; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); text-align: center; }

/* ---------- dialogs ---------- */
.dlg { border: 0; border-radius: 22px; padding: 18px 18px 16px; width: min(460px, calc(100vw - 20px)); max-height: calc(100dvh - 24px); background: var(--lichen); color: var(--ink); box-shadow: var(--shadow); }
.dlg.small { width: min(380px, calc(100vw - 20px)); }
.dlg::backdrop { background: rgba(10, 20, 16, .5); }
.dlg h2 { font-size: 1.2rem; }
.dlg textarea { resize: vertical; }
.swatches { display: flex; gap: 10px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; }
.swatches i { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 1.5px var(--line-strong); cursor: pointer; }
.swatches input:checked + i { box-shadow: 0 0 0 3px var(--ink); }
.photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }

/* ---------- map furniture ---------- */
.leaflet-container { font: 500 14px/1.4 var(--font); }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; color: var(--ink) !important; background: var(--card) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.75) !important; }
.wmu-label { background: var(--card) !important; border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.25) !important; padding: 1px 6px !important; border-radius: 8px !important; font: 700 13px/1.3 var(--font-c) !important; color: var(--ink) !important; border-left: 4px solid var(--wmu-c, var(--s-none)) !important; }
.wmu-label::before { display: none; }

.leaflet-popup-content-wrapper { border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.leaflet-popup-tip { background: var(--card); }
.leaflet-popup-content { margin: 14px 16px; min-width: 250px; max-width: 320px; font-size: 14.5px; }
.leaflet-popup-close-button { width: 32px !important; height: 32px !important; font-size: 22px !important; }
.pop h4 { margin: 0 0 4px; font: 700 21px/1.1 var(--font-c); }
.pop .land { margin: 8px 0 10px; padding: 9px 10px; border-radius: 10px; background: var(--soft); font-size: 13.5px; border-left: 5px solid var(--line-strong); }
.pop .land.public { border-left-color: var(--land-green); }
.pop .land.permission { border-left-color: var(--land-yellow); }
.pop .land.closed { border-left-color: var(--land-red); }
.pop .land.warn { border-left-color: var(--land-blue); }
.pop .pred { border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; font-size: 13.5px; background: #fff1e6; color: #4a2a10; }
@media (prefers-color-scheme: dark) { .pop .pred { background: #3a2617; color: #ffd9bf; } }
.pop .sp { margin: 10px 0 4px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pop table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pop td { padding: 4px; border-top: 1px solid var(--line); vertical-align: top; }
.pop td:first-child { color: var(--muted); width: 40%; }
.pop .note { font-size: 12.5px; color: #a3530a; }
.why { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.chip { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px; color: #fff; white-space: nowrap; }
.chip.open { background: var(--s-open); } .chip.upcoming { background: var(--s-soon); } .chip.closed { background: var(--s-closed); } .chip.none { background: var(--s-none); color: #12261e; }
.pop .actions { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.pop .actions button, .pop .actions a { flex: 1 1 auto; text-align: center; font-size: 13.5px; font-weight: 700; padding: 9px 10px; border-radius: 18px; border: 0; background: var(--soft); color: var(--ink); cursor: pointer; text-decoration: none; }
.pop .actions .primary { background: var(--blaze); color: #fff; }
.pop .actions .danger { color: var(--land-red); }

.mk { display: grid; place-items: center; border-radius: 50%; color: #fff; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); font: 700 15px/1 var(--font-c); }
.mk .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.mk.hot { width: 32px; height: 32px; background: var(--land-red); }
.mk.camp { width: 34px; height: 34px; background: var(--spruce); gap: 0; }
.mk.camp .ic { width: 16px; height: 16px; }
.mk.camp.mine { background: var(--blaze); width: 36px; height: 36px; }
.mk.user { width: 32px; height: 32px; background: var(--blaze); }
.mk.user.sighting { background: #2463c4; }
.mk.user.spot { background: #c98a00; }
.mk.origin { width: 20px; height: 20px; background: #2463c4; border-width: 3px; }
.mk.me { width: 18px; height: 18px; background: #2463c4; border-width: 3px; box-shadow: 0 0 0 6px rgba(36,99,196,.25); }
.vertex { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--blaze); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hillshade { mix-blend-mode: multiply; }

@media (prefers-reduced-motion: reduce) {
  .sheet, .switch i, .switch i::after, .slider .thumb { transition: none !important; }
}

/* ---------- info card (replaces map popups) ---------- */
.card-sheet { position: absolute; z-index: 1050; background: var(--card); color: var(--ink); box-shadow: var(--shadow-up); display: flex; flex-direction: column; transform: translateY(110%); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.card-sheet.show { transform: translateY(0); }
.card-sheet.dragging { transition: none; }
.cs-head { display: flex; align-items: center; justify-content: center; position: relative; min-height: 34px; flex: none; touch-action: none; }
.cs-head .grip { width: 46px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.card-close { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--soft); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.card-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px calc(18px + var(--safe-b)); }
.card-body .pop h4 { padding-right: 46px; }
.mk.tap { width: 22px; height: 22px; background: var(--blaze); border-width: 3px; box-shadow: 0 0 0 6px rgba(255,106,19,.25); }
@media (max-width: 899px) {
  .card-sheet { left: 0; right: 0; bottom: 0; max-height: 72%; border-radius: 22px 22px 0 0; }
}
@media (min-width: 900px) {
  .card-sheet { right: 88px; bottom: 16px; width: 380px; max-height: calc(100% - 32px); border-radius: var(--r-lg); box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; transition: transform .18s, opacity .18s; }
  .card-sheet.show { transform: none; opacity: 1; }
  .cs-head .grip { display: none; }
}
.land-status { position: absolute; z-index: 1000; left: 50%; transform: translateX(-50%); top: calc(70px + var(--safe-t)); background: var(--card); color: var(--ink); border-radius: 18px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.land-status button { border: 0; background: var(--blaze); color: #fff; border-radius: 14px; padding: 4px 12px; font-weight: 700; cursor: pointer; }
@media (min-width: 900px) { .land-status { top: 16px; left: calc(50% + 200px); } }

/* ---------- base map picker badges ---------- */
.bm-grid button { position: relative; }
.bm-grid .bm-tag { position: absolute; top: 6px; left: 6px; right: 6px; font: 700 10.5px/1.25 var(--font); padding: 2px 5px; border-radius: 6px; background: var(--blaze); color: #fff; text-align: center; }
.bm-grid .bm-tag.newest { background: var(--land-green); }
.bm-grid .bm-year { display: block; font: 600 11.5px/1.2 var(--font); color: var(--muted); }

/* ---------- map legend + imagery date ---------- */
.mapkey { position: absolute; z-index: 999; left: 10px; bottom: calc(132px + var(--safe-b) + 10px); max-width: calc(100% - 20px); display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.mapkey > * { pointer-events: auto; }
.keybar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.keybtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.keybtn .ic { width: 18px; height: 18px; }
.keybtn[aria-expanded="true"] { background: var(--spruce); color: #fff; }
.imgdate { background: rgba(18,38,30,.82); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 14px; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keybody { background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 12px; width: 250px; max-height: 46vh; overflow-y: auto; font-size: 13px; }
.keybody h5 { margin: 6px 0 4px; font-size: 12.5px; color: var(--muted); }
.keybody h5:first-child { margin-top: 0; }
.keybody ul { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
.keybody li { display: flex; align-items: center; gap: 8px; }
.keybody .k-fill { width: 16px; height: 12px; border-radius: 3px; flex: none; }
.keybody .k-line { width: 18px; border-top: 3px solid; flex: none; }
.keybody .k-ramp { width: 80px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(255,120,30,.3), rgba(230,70,40,.7), rgb(185,15,55)); }
.keybody .mk { width: 20px; height: 20px; font-size: 11px; border-width: 2px; }
.keybody .mk .ic { width: 12px; height: 12px; }
@media (min-width: 900px) { .mapkey { left: 432px; bottom: 16px; } }

/* attribution: one short line, tap to read it all (it was covering the bottom of the map) */
.leaflet-control-attribution { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 8px 0 0 0; }
.leaflet-control-attribution.full { max-width: 92vw; white-space: normal; }

/* v8: trip mode, paths, share */
.seg.big button { min-height: 46px; font-size: 14.5px; white-space: normal; line-height: 1.15; }
.seg.big button.on { background: var(--spruce); color: #fff; }
.path-row { display: grid; gap: 2px; }
.path-row small { color: var(--muted); font-size: 13.5px; }
.sharebox { width: 100%; font: 12px/1.35 ui-monospace, monospace; border-radius: 10px; border: 1px solid var(--line, #ccd); padding: 8px; background: var(--soft); color: var(--ink); resize: none; }
#campPick { width: 100%; min-height: 44px; border-radius: 12px; font-size: 15px; padding: 0 10px; }
.block.row.between { gap: 8px; flex-wrap: wrap; }

/* =====================================================================
   v9 polish: lighter, calmer, smoother. Glass floating controls, springy
   motion, press feedback, nicer pins, slim loading bar.
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .86);
  --glass-line: rgba(18, 38, 30, .08);
  --spring: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 1px 1px rgba(18,38,30,.06), 0 4px 14px rgba(18,38,30,.12);
}
@media (prefers-color-scheme: dark) {
  :root { --glass: rgba(24, 40, 33, .82); --glass-line: rgba(255,255,255,.08); --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); }
}

/* floating controls: frosted glass so the map shows through */
.searchpill, .rail, .keybtn, .leaflet-bar, .leaflet-control-scale-line, .layerpop, .land-status {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--shadow-soft) !important; border: 1px solid var(--glass-line) !important;
}
.animalchip { box-shadow: var(--shadow-soft); }
.keybtn[aria-expanded="true"] { background: var(--spruce) !important; color: #fff; }
.searchpill { height: 48px; }
.animalchip { height: 48px; }
.rail { border-radius: 18px; padding: 3px; }
.railbtn { width: 50px; height: 52px; transition: background .15s, transform .12s var(--spring); }

/* press feedback everywhere you tap */
.btn, .railbtn, .tab, .chips label, .chips button, .seg button, .keybtn, .iconbtn, .card, .saved-row, .pop .actions button, .pop .actions a, .bm-grid button {
  transition: transform .14s var(--spring), background-color .15s, box-shadow .15s, color .15s;
}
.btn:active, .railbtn:active, .chips label:active, .chips button:active, .keybtn:active, .iconbtn:active, .pop .actions button:active, .pop .actions a:active, .bm-grid button:active { transform: scale(.95); }
.card:active, .saved-row:active { transform: scale(.985); }
.tab:active { transform: scale(.94); }
.seg button.on { transition: background-color .2s, box-shadow .2s, color .2s; }

/* motion: springier sheet and card */
@media (max-width: 899px) {
  .sheet { transition: transform .42s var(--spring); }
  .leaflet-bottom.leaflet-left { bottom: calc(132px + var(--safe-b) + 54px); }
}
.card-sheet { transition: transform .32s var(--spring), opacity .2s; }

/* panel content: softer blocks, more air */
.block { box-shadow: 0 1px 0 var(--glass-line); padding: 15px 16px; }
.block h2 { font-size: 1.02rem; letter-spacing: .01em; }
.field > span { font-size: 13px; letter-spacing: .01em; }
.sheet-body { scroll-behavior: smooth; }

/* scale bar */
.leaflet-control-scale { margin-bottom: 8px !important; }
.leaflet-control-scale-line { border-radius: 8px; border-width: 1px !important; padding: 2px 8px; font: 700 11.5px/1.3 var(--font); color: var(--ink); }

/* tiles fade in a little slower, less flicker */
.leaflet-fade-anim .leaflet-tile { transition: opacity .3s linear; }

/* pins: crisper, with a soft halo */
.mk { border-width: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.25); }
.mk.hot { background: linear-gradient(160deg, #f0473c, #b5122f); }
.mk.camp { background: linear-gradient(160deg, #2c4a3d, #12261e); }
.mk.camp.mine { background: linear-gradient(160deg, #ff8a3d, #e5520a); }
.leaflet-marker-icon:hover .mk { transform: scale(1.08); }
.mk { transition: transform .15s var(--spring); }

/* WMU labels: smaller and quieter */
.wmu-label { font-size: 12px !important; padding: 0 5px !important; box-shadow: 0 1px 2px rgba(0,0,0,.18) !important; background: var(--glass) !important; }

/* slim loading bar under the top controls */
.loadbar { position: absolute; z-index: 1002; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; pointer-events: none; }
.loadbar i { position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--blaze), transparent); animation: loadbar 1.1s ease-in-out infinite; }
@keyframes loadbar { from { left: -35%; } to { left: 100%; } }

/* road info in the spot card */
.pop .roadinfo { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--soft); border-left: 5px solid #b0662a; font-size: 13.5px; }
.pop .roadinfo small { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .loadbar i { animation: none; left: 0; width: 100%; opacity: .5; }
  .btn, .railbtn, .tab, .card, .mk { transition: none !important; }
}
/* the search box sits inside the pill: no box of its own */
.searchpill input[type=search] { border: 0; background: transparent; min-height: 0; height: 100%; padding: 0 4px; border-radius: 0; box-shadow: none; }
.animalchip { max-width: none; }
.animalchip select { max-width: 130px; }
/* sliders: slimmer, value shown beside the label, bubble only while dragging */
.slider { height: 44px; }
.slider .track { height: 6px; margin-top: -3px; }
.slider .thumb { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-width: 2.5px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.slider .bubble { opacity: 0; transform-origin: bottom center; transition: opacity .15s; }
.slider.dragging .bubble { opacity: 1; }
.field > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field > span .sval { font: 700 14px/1 var(--font-c); color: var(--ink); background: var(--soft); padding: 4px 8px; border-radius: 8px; }
/* animal chip: as wide as the chosen animal, not the longest name in the list */
.animalchip select { field-sizing: content; max-width: 110px; }
@media (max-width: 899px) { .animalchip select { max-width: 92px; } }

/* v11: "On the map" overlay block */
.overlays .ov { padding: 4px 0 6px; border-top: 1px solid var(--line); }
.overlays .ov:first-of-type { border-top: 0; }
.overlays .field { margin: 4px 0 6px; }
.ov-sw { display: inline-block; width: 18px; height: 12px; border-radius: 4px; flex: none; }
.ov-sw.heat { background: linear-gradient(90deg, rgba(255,120,30,.5), rgb(185,15,55)); }
.ov-sw.path { height: 0; border-top: 4px dashed #7b2cbf; border-radius: 0; }
.ov-sw.cut { background: linear-gradient(90deg, rgb(54,226,240), rgb(47,127,214), rgb(40,53,147)); }
.cutramp { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 12px; color: var(--muted); margin: 2px 0 4px; }
.cutramp i { grid-column: 1 / -1; height: 10px; border-radius: 5px; margin-bottom: 3px; }
.cutramp span:nth-of-type(2) { text-align: center; }
.cutramp span:last-child { text-align: right; }
#heatToggle:disabled + i { opacity: .45; }
.update-report { margin-top: 10px; background: var(--soft); border-radius: 10px; padding: 0; }
.update-report:not(:empty) { padding: 8px 10px; }
.update-report ul { margin: 4px 0 0; padding-left: 16px; }
.ov-sw.planned { background: rgba(255,47,168,.6); border: 2px solid #c2007a; height: 12px; }
.pop .cutinfo { margin: 0 0 10px; display: grid; gap: 6px; }
.pop .cutinfo .ci { padding: 8px 10px; border-radius: 10px; background: var(--soft); border-left: 5px solid rgb(31,179,201); font-size: 13.5px; }
.pop .cutinfo .ci.planned { border-left: 5px solid #ff2fa8; }
.pop .cutinfo small { display: block; color: var(--muted); margin-top: 2px; }

/* v15: satellite button in the spot card, planned-cut labels */
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-body .pop .pop-head h4 { padding-right: 0; }
.sat-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-right: 46px; padding: 6px 10px; border-radius: 16px; background: var(--soft); color: var(--ink) !important; text-decoration: none; font-size: 12.5px; font-weight: 700; }
.sat-btn .ic { width: 18px; height: 18px; color: rgb(31,179,201); }
.sat-btn:active { transform: scale(.95); }
.planned-label, .forest-label { transform: translate(-50%, -50%); white-space: nowrap; font: 700 10.5px/1 var(--font); color: #fff; background: var(--fl, #d6168e); padding: 2px 6px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.3); opacity: var(--planned-label-op, .8); }
/* "Where this comes from" inside the cutover / planned-cut boxes */
.pop .cutinfo .ci { cursor: pointer; }
.pop details.src { margin-top: 6px; }
.pop details.src summary { font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; list-style: none; }
.pop details.src summary::before { content: "ⓘ "; }
.pop details.src[open] summary { color: var(--ink); }
.pop details.src p { font-size: 12.5px; margin: 6px 0 0; color: var(--ink); }
.pop details.src a { font-weight: 600; }

.ov-sw.reported { background: linear-gradient(90deg, rgba(0,169,157,.6) 50%, rgba(192,86,28,.6) 50%); border: 2px solid #007d74; height: 12px; }
.pop .cutinfo .ci.reported { border-left: 5px solid #00a99d; }
.pop .cutinfo .ci.fire { border-left: 5px solid #c0561c; }

/* v23: check against your hunts */
.check-hunts .check-out { margin-top: 8px; }
.check-sp { margin: 8px 0 12px; line-height: 1.4; }
.check-list { margin: 6px 0 8px 18px; padding: 0; font-size: 13px; }
.check-list li { margin: 2px 0; }
.tune-out p { margin: 6px 0; }

/* v25: offline areas */
#offlineBlock { margin-top: 8px; }
#offlineProgress progress { width: 100%; height: 10px; margin-top: 10px; accent-color: var(--accent, #2a7de1); }
.offline-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.offline-item small { display: block; }

/* v26: road closures */
.closure-ic { width: 16px; height: 16px; border-radius: 4px; background: var(--c); color: #fff; font: 700 11px/16px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.4); display: inline-block; font-style: normal; }
.closure-ic.planned { background: #fff; color: var(--c); box-shadow: 0 0 0 1.5px var(--c), 0 1px 3px rgba(0,0,0,.3); }
.ov-sw.access { background: #d62828; }
.pop .ci.closure { padding: 8px 10px; border-radius: 10px; background: var(--soft); border-left: 5px solid #d62828; font-size: 13.5px; margin: 6px 0; }
.pop .ci.closure.planned { border-left-color: #f4a261; }
.pop .ci.closure small { display: block; margin-top: 2px; }

/* v27: wind plan on hotzone cards */
.card .windplan { margin: 4px 0 6px; font-size: 13.5px; }
.card .windplan summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; list-style: none; }
.card .windplan summary::-webkit-details-marker { display: none; }
.card .windplan ul { margin: 6px 0 0 4px; }

/* v28: trip checklist */
.checkwrap > summary { list-style: none; cursor: pointer; }
.checkwrap > summary::-webkit-details-marker { display: none; }
.checkwrap > summary h2 { display: inline; }
.checkwrap > summary::after { content: '▾'; float: right; opacity: .6; }
.checkwrap[open] > summary::after { content: '▴'; }
#checklist h5 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
#checklist ul { list-style: none; margin: 0; padding: 0; }
#checklist li { padding: 5px 0; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#checklist li label { display: flex; gap: 8px; align-items: flex-start; }
#checklist li input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
#checklist small.ok { color: #1b7a43; font-weight: 600; }
#checklist .row { margin-top: 10px; gap: 8px; }
#checklist .row input { flex: 1; }

/* v29: backup and sync */
#syncBlock .row { gap: 8px; flex-wrap: wrap; margin: 8px 0; }
#syncBlock h3 { margin: 16px 0 6px; font-size: 15px; }
.syncset { margin: 10px 0; }
.syncset summary { cursor: pointer; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.plain-list li small { display: block; opacity: .75; }


/* v33: accounts */
.gblock { margin: 4px 0 14px; padding: 12px; border-radius: 14px; background: var(--soft); }
.gblock h3 { margin: 0 0 6px; font-size: 15px; }
.gblock .row { gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gwho { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.gwho img, .au-initial { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.au-initial { display: grid; place-items: center; background: var(--accent, #e76f2e); color: #fff; font-weight: 700; }
.gwho small { display: block; opacity: .75; }
.textbtn.danger { color: #b3261e; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 22px; font-weight: 600; }
.gicon { width: 18px; height: 18px; flex: none; }
#accountBtn .au-avatar { width: 24px; height: 24px; border-radius: 50%; }
.authscreen { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--bg, #f4f1ea); color: inherit; }
.authscreen::backdrop { background: rgba(10, 20, 15, .55); }
@media (min-width: 900px) { .authscreen { width: 440px; height: auto; max-height: 92vh; margin: auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } }
.au-wrap { position: relative; padding: max(24px, env(safe-area-inset-top)) 22px 28px; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.au-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 10px; }
.au-brand { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; }
.au-brand img { width: 52px; height: 52px; border-radius: 12px; }
.au-brand b { display: block; font-size: 24px; line-height: 1.1; font-family: 'Barlow Condensed', system-ui, sans-serif; }
.au-brand small { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; opacity: .7; }
.au-lead { margin: 0 0 4px; }
.au-form { display: flex; flex-direction: column; gap: 10px; }
.au-form h2 { margin: 6px 0 0; }
.au-form .btn.block { width: 100%; min-height: 46px; }
.au-tabs { margin-bottom: 4px; }
.au-or { display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: .7; }
.au-or::before, .au-or::after { content: ''; flex: 1; border-top: 1px solid currentColor; opacity: .3; }
.au-msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: #e3f1e7; color: #13452a; font-size: 14px; }
.au-msg.err { background: #fbe4e1; color: #7a1e16; }
.au-skip { align-self: center; margin-top: 6px; }
.au-foot { text-align: center; margin: 0; }
.au-form .btn.block, .au-form input { box-sizing: border-box; max-width: 100%; }
.au-wrap { box-sizing: border-box; }
.au-form .btn.block { margin: 0; width: 100%; }

/* v33: in-app update banner (Android app only) */
.appupdate { position: fixed; z-index: 1200; left: 12px; right: 12px; top: max(64px, calc(env(safe-area-inset-top) + 64px)); max-width: 460px; margin: 0 auto; padding: 12px 14px; border-radius: 14px; background: var(--card, #fff); box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px; }
.appupdate small { display: block; opacity: .8; }
.appupdate .row { gap: 10px; align-items: center; }
.appupdate progress { width: 100%; accent-color: var(--accent, #e76f2e); }

/* v36: offline save choices */
#offMode { margin: 6px 0 8px; }
.offpane { margin: 4px 0; }
.offwmu { gap: 8px; flex-wrap: wrap; }
.offwmu input { flex: 1; min-width: 120px; }
#offWmuChips { margin: 8px 0 2px; gap: 6px; }
#offEstimate { margin: 8px 0; }
.offwhat { margin: 8px 0; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 6px 10px; }
.offwhat summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.offwhat summary small { font-weight: 400; color: var(--muted, #666); margin-left: 6px; }
.offwhat h5 { margin: 8px 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); }
.offwhat label { display: flex; align-items: center; gap: 8px; padding: 5px 0; min-height: 32px; }
.offwhat label > span { flex: 1; }
.offwhat label small { display: block; color: var(--muted, #666); font-size: .78rem; }
.offwhat label b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .85rem; }
.offwhat label.off { opacity: .55; }
#offEstimate.warn { color: #b3261e; }
.offline-item .partial { color: #b25e00; }

/* v37: plans */
.plan-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.plan-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; background: var(--card, #fff); }
.plan-admin { background: #12261e; color: #fff; }
.plan-ultra { background: #e76f2e; color: #fff; }
.plan-pro { background: #2a7de1; color: #fff; }
.preview-as { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.preview-as select { min-height: 32px; padding: 2px 6px; }

/* v38: hunt mode */
.modebtn span { font-weight: 700; }
body.hunt-mode .topfloat, body.hunt-mode #panel, body.hunt-mode #mapKey, body.hunt-mode #locateBtn, body.hunt-mode #accountBtn { display: none !important; }
body.hunt-mode .modebtn { background: #12261e; color: #fff; border-radius: 12px; }
.hunthud { position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; padding: 0 10px max(10px, env(safe-area-inset-bottom)); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hunthud > * { pointer-events: auto; width: 100%; max-width: 520px; }
.hh-bar { background: rgba(18, 38, 30, .92); color: #fff; border-radius: 18px; padding: 8px 10px 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.hh-stats { margin: 0 4px 6px; font-size: 13.5px; opacity: .9; }
.hh-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hh-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font: 600 12px/1.1 inherit; min-height: 54px; }
.hh-btn .ic { width: 22px; height: 22px; stroke: currentColor; }
.hh-btn.on { background: #e76f2e; }
.hh-panel { background: var(--card, #fff); color: var(--ink, #14231b); border-radius: 16px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.3); max-height: 55vh; overflow: auto; }
.hp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hp-compass { font: 700 28px/1.2 'Barlow Condensed', system-ui, sans-serif; margin: 4px 0 8px; }
.hp-compass small { display: block; font: 400 12px system-ui; opacity: .7; }
.hp-inputs { gap: 10px; }
.hp-inputs .field { flex: 1; }
.hp-lines { list-style: none; padding: 0; margin: 10px 0 0; }
.hp-lines li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.hp-lines li i { width: 14px; height: 4px; border-radius: 2px; }
.hp-lines li small { opacity: .65; margin-left: auto; }
.hp-big { font: 700 22px/1.3 'Barlow Condensed', system-ui, sans-serif; margin: 6px 0 10px; }
.hp-targets { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.me-hunt { position: relative; width: 44px; height: 44px; }
.me-dot { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: #2a7de1; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(42,125,225,.35), 0 2px 6px rgba(0,0,0,.35); }
.me-cone { position: absolute; left: 0; top: 0; width: 44px; height: 44px; transform-origin: 50% 50%; }
.me-cone::before { content: ''; position: absolute; left: 12px; top: -14px; width: 20px; height: 30px; background: linear-gradient(to top, rgba(42,125,225,.65), rgba(42,125,225,0)); clip-path: polygon(50% 100%, 0 0, 100% 0); }
#huntStart .hs-list { max-height: 45vh; overflow: auto; margin: 6px 0 10px; }
#huntStart h5 { margin: 10px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.hs-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.hs-row input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.hs-row small { display: block; opacity: .7; }
.dlg-actions { justify-content: flex-end; gap: 8px; margin-top: 8px; }
body.hunt-mode .modebtn span, body.hunt-mode .modebtn .ic { color: #fff; stroke: #fff; }

/* ---------- plans (v42) ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.plan-col { background: var(--card); border: 2px solid transparent; border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.plan-col.on { border-color: var(--blaze-deep); }
.plan-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-head b { font-size: 17px; }
.plan-head span { color: var(--muted); font-weight: 600; }
.plan-head small { margin-left: auto; color: var(--blaze-deep); font-weight: 700; }
.plan-list { margin: 0; padding-left: 18px; font-size: 14px; }
.plan-list li { margin: 3px 0; }
.plan-col .row { flex-wrap: wrap; gap: 6px; margin-top: auto; }
#planDialog .pd-body { display: grid; gap: 10px; }
#planDialog h2 { margin: 0; }

/* ---------- locked features (v45): visible, tagged, and inert ---------- */
.locked { position: relative; cursor: pointer; }
.locked > :not(.switch) { opacity: .55; }
.locked .switch { display: none; }
.locked::after {
  content: "🔒 " attr(data-lock);
  display: inline-flex; align-items: center; flex: none; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
  font: 700 11.5px/1.4 var(--font, system-ui); letter-spacing: .02em; white-space: nowrap;
  background: var(--blaze-deep); color: #fff; opacity: 1;
}
.bm-grid button.locked::after { position: absolute; top: 6px; right: 6px; margin: 0; }
.seg button.locked::after { margin-left: 6px; padding: 1px 6px; font-size: 10.5px; }
.seg.locked::after { display: block; width: max-content; margin: 6px 0 0; }
.sr-locked small { display: block; }

/* ---------- hunting groups (v46) ---------- */
.mk.group { width: 28px; height: 28px; border-radius: 50%; background: #6a1b9a; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font: 700 11px/1 var(--font, system-ui); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.groups { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.group-card { padding: 10px 12px; display: grid; gap: 6px; }
.group-card .sw-row.inline { gap: 6px; padding: 0; }
.group-plans { display: grid; justify-items: start; gap: 2px; }
.row.wrap { flex-wrap: wrap; gap: 8px; }
.inputwrap.sm { display: inline-flex; gap: 6px; align-items: center; }
.inputwrap.sm input { min-width: 0; width: 170px; }

/* ---------- first-time tour ---------- */
.tour .tour-body { display: grid; gap: 10px; text-align: center; }
.tour .tour-logo { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto; }
.tour h2 { margin: 0; }
.tour p { margin: 0; line-height: 1.5; }
.disclaimer .tour-body { display: grid; gap: 10px; }
.disclaimer .tour-logo { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto; }
.disclaimer h2 { margin: 0; text-align: center; }
.disclaimer p { margin: 0; line-height: 1.5; }
.disclaimer ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.45; font-size: .92rem; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.tour-dots i.on { background: var(--blaze-deep); }