/* Hut finder. Forest theme, dark-first. Mobile uses plain document scroll:
   iOS Safari is unreliable with nested overflow:auto inside 100% flex
   columns, so on phones the map is a fixed-height block and the list flows
   below it in the normal document. The hut sheet is the only nested scroller. */
:root{
  --bg:#0E1712; --bg-2:#101C15;
  --surface:#15231B; --surface-2:#1C2F24; --surface-3:#24392C;
  --text:#EEF5EF; --muted:rgba(238,245,239,.64); --muted-2:rgba(238,245,239,.45);
  --line:rgba(238,245,239,.10); --line-2:rgba(238,245,239,.18);
  --fern:#8BD17F; --fern-deep:#5FB56A; --moss:#2F6B45; --moss-deep:#245236;
  --accent:var(--fern); --on-accent:#0B140F;
  --ok:#5CDB8B; --low:#F2C14E; --full:#FF6B6B; --none:#7F8F86;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;
  --r:14px; --r-s:10px;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;line-height:1.35}
a{color:var(--accent)}
button{font:inherit}
b{font-weight:600}

/* ---------- header */
.bar{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line);padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.brand .by{font-weight:400;color:var(--muted-2);font-size:12px;margin-left:2px}
.logo{width:22px;height:22px;flex:none}
.controls{display:flex;flex-wrap:wrap;align-items:end;gap:8px 10px;flex:1;min-width:0}
.field{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field.grow{flex:1;min-width:150px}
.field input,.field select{font:inherit;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:0 10px;min-height:36px;width:100%;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus{outline:2px solid var(--fern);outline-offset:1px;border-color:transparent}
.field input[type=number]{width:70px}
.field input[type=date]{color-scheme:dark;min-width:150px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23EEF5EF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-self:end}
.chip{font-size:12px;padding:7px 11px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;min-height:32px}
.chip.on{background:var(--moss);border-color:var(--moss);color:var(--text)}
.chip:focus-visible{outline:2px solid var(--fern)}
.filters-toggle{display:none}

/* ---------- layout */
.layout{display:flex;height:calc(100vh - 62px);height:calc(100dvh - 62px);min-height:0}
#map{flex:1;min-height:320px;background:#0d1b13}
.side{width:400px;max-width:100%;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--surface)}
.listhead{padding:9px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;justify-content:space-between}
.listhead b{color:var(--text)}
.legend{display:flex;gap:8px;align-items:center;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:3px;vertical-align:-1px}
.dot.ok{background:var(--ok)}.dot.low{background:var(--low)}.dot.full{background:var(--full)}.dot.none{background:var(--none)}
.list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px}
.foot{padding:8px 14px;font-size:11px;color:var(--muted-2);border-top:1px solid var(--line)}

/* ---------- cards */
.card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon name avail" "icon sub avail" "icon next next";column-gap:10px;row-gap:2px;padding:10px 12px;border-radius:var(--r-s);background:var(--surface-2);margin-bottom:6px;cursor:pointer;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.card:hover,.card.sel{border-color:var(--fern);background:var(--surface-3)}
.card .icon{grid-area:icon;font-size:18px;align-self:center;width:26px;text-align:center;opacity:.9}
.card .name{grid-area:name;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .sub{grid-area:sub;color:var(--muted);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .next{grid-area:next;font-size:11px;color:var(--low)}
.card .avail{grid-area:avail;align-self:center;text-align:right;font-family:var(--mono);font-size:16px;line-height:1.1}
.card .avail small{display:block;font-size:10px;color:var(--muted);font-family:var(--sans)}
.avail.ok{color:var(--ok)}.avail.low{color:var(--low)}.avail.full{color:var(--full)}.avail.none{color:var(--none)}
.star{color:var(--low);font-size:12px;margin-left:3px}

/* ---------- hut sheet */
.detail{background:var(--bg-2);border-bottom:1px solid var(--line);max-height:64%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 16px}
.sheethead{position:sticky;top:0;z-index:2;background:var(--bg-2);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 0 6px}
.sheethead h2{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.sheethead .sub{color:var(--muted);font-size:12px;margin-top:3px}
.close{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.big{display:flex;align-items:baseline;gap:10px;margin:8px 0 10px}
.big .n{font-family:var(--mono);font-size:36px;font-weight:600;line-height:1}
.big .t{color:var(--muted)}
.bookedout{display:flex;align-items:center;gap:12px;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.6);border-radius:var(--r-s);padding:10px 14px;margin:4px 0 10px}
.bookedout .x{font-size:32px;font-weight:700;color:var(--full);line-height:1}
.bookedout b{display:block;font-size:17px;color:var(--full)}
.bookedout span:not(.x){font-size:12px;color:var(--muted)}
.nextrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}
.jump{text-align:left;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:9px 11px;color:var(--muted);font-size:11px;cursor:pointer}
.jump b{display:block;color:var(--text);font-size:13px;margin-top:2px}
.jump:disabled{opacity:.5;cursor:default}
.jump:not(:disabled):hover{border-color:var(--fern)}
.section{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin:10px 0 4px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:44px;align-items:end}
.strip div{border-radius:3px 3px 0 0;min-height:4px}
.strip div.ok{background:var(--ok)}.strip div.low{background:var(--low)}.strip div.full{background:var(--full)}.strip div.none{background:var(--none);opacity:.45}
.strip div.today{outline:2px solid var(--text);outline-offset:1px}
.striplabels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;font-size:9px;color:var(--muted-2);font-family:var(--mono);text-align:center;margin:3px 0 10px}
.wx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;margin:6px 0 10px}
.wx .head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.wx .main{display:flex;align-items:center;gap:12px;margin:6px 0}
.wx .icon{font-size:30px}
.wx .temp{font-family:var(--mono);font-size:21px}
.wx .desc{font-size:13px}
.wx .row{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.wxstrip{display:flex;gap:4px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wxstrip div{flex:1;min-width:46px;text-align:center;font-size:11px;background:var(--surface-2);border-radius:8px;padding:6px 2px}
.wxstrip div.sel{outline:1px solid var(--fern)}
.wxstrip .i{font-size:16px}
.btns{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.btn{font-weight:600;padding:10px 15px;border-radius:var(--r-s);border:0;cursor:pointer;text-decoration:none;display:inline-block;min-height:40px;line-height:20px}
.btn.primary{background:var(--fern);color:var(--on-accent)}
.btn.primary:hover{background:var(--fern-deep)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.note{font-size:12px;color:var(--muted);margin-top:8px}
.warn{color:var(--low)}

/* ---------- map chrome */
.maplibregl-ctrl-group{background:var(--surface-2)!important;border:1px solid var(--line-2);box-shadow:none!important}
.maplibregl-ctrl-group button{background:transparent!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)!important}
.maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(1) opacity(.85)}
.maplibregl-ctrl-attrib{font-size:10px;background:rgba(14,23,18,.7)!important;color:var(--muted)}
.maplibregl-ctrl-attrib a{color:var(--muted)}

/* ---------- phones: document scroll, sheet over the map */
@media (max-width:820px){
  body{font-size:15px}
  .bar{padding:8px 12px;gap:8px;display:grid;grid-template-columns:1fr auto;align-items:center}
  .brand{font-size:16px}
  .controls{grid-column:1/3;display:grid;grid-template-columns:1fr auto auto;gap:6px 8px;align-items:end}
  .field{font-size:10px}
  .field input,.field select{font-size:16px;min-height:40px}  /* 16px stops iOS zooming on focus */
  .field.date input{min-width:0}
  .field input[type=number]{width:64px}
  .field.grow{grid-column:1/4}
  .chips{grid-column:1/4;width:100%}
  .filters-toggle{display:inline-flex;align-items:center;gap:6px;justify-self:end;font-size:12px;padding:7px 11px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);min-height:34px;cursor:pointer}
  .filters-toggle[aria-expanded="true"]{background:var(--moss);border-color:var(--moss);color:var(--text)}
  .bar.collapsed .field.grow,.bar.collapsed .chips{display:none}
  .layout{display:block;height:auto}
  #map{height:52vh;height:52dvh;min-height:300px}
  .side{width:100%;border-left:0;border-top:1px solid var(--line);display:block}
  .list{overflow:visible;padding:8px 10px}
  .listhead{position:sticky;top:0;z-index:3;background:var(--surface)}
  .detail{position:fixed;left:0;right:0;bottom:0;z-index:20;max-height:80vh;max-height:80dvh;border-radius:16px 16px 0 0;border-top:1px solid var(--line-2);box-shadow:0 -12px 40px rgba(0,0,0,.6);padding:0 16px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .detail::before{content:"";position:sticky;top:6px;display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 0;z-index:3}
  .sheethead{padding-top:8px}
  .card{padding:12px}
  .card .name,.card .sub{white-space:normal}
  .btn{padding:12px 16px;font-size:15px}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:19}
}