/* Casual Angling — mobile-first. Desktop (≥821px) keeps a left panel + right detail card;
   mobile uses one bottom sheet (peek / half / full) with the detail sliding up over it. */
:root {
  --bg: #eef1ec; --card: #ffffff; --line: #e3e7e1; --line-2: #cfd6cc;
  --txt: #18201b; --dim: #56615a; --faint: #6f7a72;          /* both ≥4.5:1 on white */
  --green: #235f47; --green-2: #2d7659; --green-soft: #e7f0eb;
  --warn-bg: #f7f3ea; --warn-ink: #5c4d2c;
  --r: 16px; --shadow: 0 2px 8px rgba(20,30,25,.14);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --top-h: 60px;
  --sheet-h: 180px;            /* set by JS on mobile */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { height: 100dvh; font: 16px/1.45 var(--sans); color: var(--txt); background: var(--bg); display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.topbar { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 8px;
  min-height: var(--top-h); background: var(--card); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--green); color: #fff; display: grid; place-items: center; }
.brand-text { display: none; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--dim); }
.search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: #f6f8f5; color: var(--dim); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--txt); }
.search:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px var(--green-soft); }
kbd { display: none; font: 11px var(--mono); color: var(--faint); }
.topbar .add-top { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--txt); cursor: pointer; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-2); }
.btn.small { min-height: 40px; padding: 0 12px; font-size: 14px; }
.btn.danger { color: #a33a2a; }
.btn.wide { flex: 1; }
.link-btn { border: 0; background: none; padding: 10px 0; color: var(--green-2); cursor: pointer; font-size: 14px; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.icon-btn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: var(--bg); }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); color: var(--txt); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }

/* ---------- Stage ---------- */
.stage { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; z-index: 0; background: #dfe5dc; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.fine { font-size: 13px; color: var(--dim); }

/* ---------- Sheet (mobile bottom sheet) ---------- */
.sheet { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: calc(var(--sheet-h) + var(--safe-b));
  display: flex; flex-direction: column; background: var(--card); border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(20,30,25,.12); padding-bottom: var(--safe-b); overflow: hidden;
  transition: height .28s cubic-bezier(.2,.8,.2,1); }
.sheet.dragging { transition: none; }
.grab { flex: none; height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.grab span { width: 40px; height: 5px; border-radius: 99px; background: var(--line-2); }
.collapse { display: none; }

.tools { flex: none; padding: 4px 16px 8px; display: grid; gap: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--card);
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta { font-size: 13px; color: var(--dim); min-width: 0; }
.seg { flex: none; display: flex; background: #eef1ed; border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--dim); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--txt); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

.list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; -webkit-overflow-scrolling: touch; }
.group { display: flex; align-items: center; gap: 8px; padding: 16px 8px 6px; }
.group .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.group b { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.group small { margin-left: auto; font-size: 12px; color: var(--dim); }
.row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px;
  background: none; text-align: left; cursor: pointer; font-size: 15px; }
.row:hover { background: #f4f6f3; }
.row.active { background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green-2); font-weight: 600; }
.row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .mk { color: var(--green-2); font-size: 14px; }
.row .t { font: 500 13px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.row .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.empty { padding: 28px 12px; color: var(--dim); text-align: center; display: grid; gap: 12px; justify-items: center; font-size: 15px; }
.sheet-foot { flex: none; border-top: 1px solid var(--line); padding: 8px 16px 12px; display: grid; gap: 2px; }
.season { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.season .dot { width: 8px; height: 8px; border-radius: 50%; }
.foot-actions { display: flex; gap: 18px; }
.sheet:not(.full) .sheet-foot { display: none; }     /* mobile: only in the fully open sheet */

/* ---------- Drive slider ---------- */
.drive { flex: none; --t: 28px; --dot: 7px; --strip: 34px; --ty: 46px; --p: 1; padding: 2px 16px 4px; }
.drive-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.drive-hd p { margin: 0; }
.drive-q { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--dim); }
.drive-val { font: 700 24px/1.1 var(--mono); color: var(--txt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .15s; }
.drive-val.is-any { font: 700 22px/1.1 var(--sans); letter-spacing: -.015em; }
.drive.is-dragging .drive-val { color: var(--green); }
.drive-count { position: relative; font-size: 14px; color: var(--dim); white-space: nowrap; }
.drive-n { font: 700 18px var(--mono); color: var(--txt); font-variant-numeric: tabular-nums; }
.drive-count.is-zero .drive-n { color: var(--faint); }
.drive-delta { position: absolute; right: 0; bottom: 100%; font: 700 12px var(--mono); color: var(--green); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.drive-delta.is-minus { color: var(--faint); }
.drive-delta.is-on { opacity: 1; transform: none; }
.drive-slider { position: relative; height: 82px; margin-top: 6px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.drive-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.drive-strip, .drive-veil { position: absolute; top: 0; height: var(--strip); }
.drive-strip, .drive-ticks, .drive-labels { position: absolute; left: 0; right: 0; }
.drive-strip > i, .drive-ticks > i, .drive-labels > span { position: absolute; left: calc(var(--t) / 2 + var(--x) * (100% - var(--t))); transform: translateX(-50%); }
.drive-strip > i { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff; }
.drive-strip > i.sep { width: 0; height: 100%; bottom: 0; background: none; box-shadow: none; border-left: 1px dashed var(--line-2); border-radius: 0; }
.drive-veil { right: 0; left: calc(var(--t) / 2 + var(--p) * (100% - var(--t))); background: rgba(255,255,255,.78); }
.drive-track { position: absolute; top: calc(var(--ty) - 2px); left: calc(var(--t) / 2); right: calc(var(--t) / 2); height: 4px; border-radius: 2px; background: var(--line-2); }
.drive-fill { height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--green); }
.drive-thumb { position: absolute; top: var(--ty); left: calc(var(--t) / 2 + var(--p) * (100% - var(--t))); width: var(--t); height: var(--t);
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 2.5px solid var(--green);
  box-shadow: 0 1px 3px rgba(20,30,25,.2), 0 4px 12px rgba(20,30,25,.14); }
.drive-thumb::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; margin-left: -1px; height: calc(var(--ty) - var(--t) / 2); background: var(--green); opacity: .5; }
.drive-thumb::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.drive.is-dragging .drive-thumb { scale: 1.1; }
.drive-input:focus-visible ~ .drive-thumb { box-shadow: 0 0 0 5px rgba(35,95,71,.28), 0 1px 3px rgba(20,30,25,.2); }
.drive-fill, .drive-veil, .drive-thumb { transition-property: width, left, scale; transition-duration: .09s; transition-timing-function: ease-out; }
.drive-ticks { top: 62px; }
.drive-ticks > i { width: 1px; height: 4px; background: var(--line-2); }
.drive-ticks > i.jump { height: 7px; width: 2px; background: var(--green-2); }
.drive-labels { top: 69px; }
.drive-labels > span { font: 500 11px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.drive-labels > span.on { color: var(--green); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .drive *, .sheet, .detail { transition: none !important; } }

/* ---------- Map chrome ---------- */
.maptype-wrap { position: absolute; z-index: 12; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.maptype { display: none; flex-direction: column; padding: 4px; gap: 2px; }
.maptype-wrap.open .maptype { display: flex; }
.maptype button { border: 0; background: none; min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; color: var(--txt); text-align: left; }
.maptype button[aria-checked="true"] { background: var(--green); color: #fff; }
.fab { position: absolute; z-index: 11; right: 16px; bottom: calc(var(--sheet-h) + var(--safe-b) + 16px); width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(20,30,25,.3); display: grid; place-items: center; cursor: pointer;
  transition: bottom .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
body.sheet-full .fab, body.detail-open .fab, body.adding .fab { opacity: 0; pointer-events: none; }
.engine-note { display: none; }
.add-banner { position: absolute; z-index: 20; top: 12px; left: 12px; right: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; font-size: 15px; }
.add-banner .spin { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
body.adding #map { cursor: crosshair; }

/* ---------- Detail (mobile: sheet over the list) ---------- */
.detail { position: absolute; z-index: 25; left: 0; right: 0; bottom: 0; max-height: min(78%, 680px); display: flex; flex-direction: column;
  background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 28px rgba(20,30,25,.18); animation: up .26s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.detail-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 22px; }
.detail-top { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 14px 12px 0 20px; }
.detail-top .titles { flex: 1; min-width: 0; }
.detail-foot { flex: none; display: flex; gap: 10px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--card); }
.kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt); }
.kicker .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.detail h2 { margin: 6px 0 2px; font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.detail .sub { font: 500 13px var(--mono); color: var(--dim); }
.pair { display: flex; gap: 8px; }
.pill { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; font-size: 15px; font-weight: 600; }
.pill[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.detail h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.detail p { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font: 500 12px var(--mono); padding: 4px 8px; border-radius: 6px; background: #eef1ed; color: var(--dim); }
.tag.hot { background: #fbeee0; color: #8a4f0e; }
.tag.good { background: var(--green-soft); color: var(--green); }
.detail textarea, .detail input, .detail select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 16px; background: #fbfcfb; color: var(--txt); }
.detail textarea { min-height: 96px; resize: vertical; }
.detail textarea:focus, .detail input:focus, .detail select:focus { outline: none; border-color: var(--green-2); box-shadow: 0 0 0 3px var(--green-soft); }
.saved { font-size: 13px; color: var(--green-2); opacity: 0; transition: opacity .2s; margin-top: 6px; }
.saved.on { opacity: 1; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--dim); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
details.more summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--green-2); padding: 8px 0; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { margin-bottom: 8px; }
details.more .inner { display: grid; gap: 14px; }
.verify { padding: 14px; background: var(--warn-bg); border-radius: 12px; font-size: 14px; color: var(--warn-ink); }
.verify b { display: block; margin-bottom: 4px; color: #3f3520; }
.verify a { color: var(--green); font-weight: 600; }
.edit-row { display: flex; gap: 8px; }
.src-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.src-links a { color: var(--green-2); font-weight: 600; text-decoration: none; padding: 6px 0; }

/* ---------- Toasts ---------- */
.toasts { position: absolute; z-index: 40; left: 12px; right: 12px; bottom: calc(var(--sheet-h) + var(--safe-b) + 12px); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
body.detail-open .toasts { bottom: calc(78% + 12px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 420px; padding: 12px 16px; border-radius: 12px; background: #1d2621; color: #fff; font-size: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: up .2s ease-out; }
.toast button { border: 0; background: none; color: #9fe0bf; font-weight: 700; font-size: 15px; cursor: pointer; padding: 6px 0; }

/* ---------- Pins (shared by both map engines) ---------- */
.mkr { position: absolute; transform: translate(-50%, -50%); }
.pin { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s; display: grid; place-items: center;
  color: #fff; font-size: 11px; line-height: 1; font-weight: 700; }
.pin::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }   /* 44px hit area */
.pin:hover, .pin.active { transform: scale(1.25); z-index: 5; }
.pin.want::after { content: "★"; }
.pin.fished { background: #fff; border-color: var(--c); color: var(--c); }
.pin.fished::after { content: "✓"; }
.pin .lbl { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: none; white-space: nowrap;
  padding: 6px 10px; background: #fff; border: 1.5px solid var(--c); border-radius: 8px; font: 600 13px var(--sans); color: var(--txt); box-shadow: var(--shadow); }
.pin:hover .lbl, .pin.active .lbl { display: block; }
.home-pin { width: 18px; height: 18px; background: var(--green); border: 3px solid #fff; border-radius: 4px; transform: rotate(45deg); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.draft-pin { width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(35,95,71,.25); }
.ring-lbl { font: 700 12px var(--sans); color: #fff; background: rgba(35,95,71,.92); padding: 3px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.leaflet-div-icon { background: none; border: 0; }
.leaflet-control-attribution { font-size: 10px; }

/* ================= Desktop ================= */
@media (min-width: 821px) {
  :root { --top-h: 58px; }
  body { font-size: 14px; }
  .topbar { gap: 16px; padding: 0 20px; }
  .brand { margin-right: auto; }
  .brand-text { display: block; }
  .search { flex: none; width: 300px; height: 40px; }
  .search input { font-size: 14px; }
  kbd { display: inline; }
  .topbar .add-top { display: inline-flex; min-height: 40px; font-size: 14px; }
  .fab, .grab, .layers-btn { display: none; }

  .sheet { top: 16px; left: 16px; bottom: 16px; right: auto; width: 360px; height: auto; border-radius: var(--r); border: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 0; transition: none; }
  .sheet .drive { padding-top: 16px; padding-right: 56px; }
  .collapse { display: grid; position: absolute; top: 8px; right: 8px; }
  .sheet:not(.full) .sheet-foot { display: grid; }
  .sheet.collapsed { bottom: auto; width: 360px; }
  .sheet.collapsed .tools, .sheet.collapsed .list, .sheet.collapsed .sheet-foot { display: none; }
  .sheet.collapsed .collapse svg { transform: rotate(-90deg); }
  .chip { min-height: 34px; font-size: 13px; }
  .row { min-height: 38px; font-size: 14px; }
  .seg button { min-height: 30px; font-size: 12px; }

  .maptype-wrap { top: auto; bottom: 16px; right: 16px; }
  body.detail-open .maptype-wrap { right: 412px; }
  .maptype, .maptype-wrap.open .maptype { display: flex; flex-direction: row; }
  .maptype button { min-height: 34px; font-size: 13px; }
  .engine-note { display: block; position: absolute; z-index: 10; right: 16px; bottom: 70px; max-width: 300px; padding: 8px 12px; font-size: 12px;
    background: var(--warn-bg); border-radius: 10px; color: var(--warn-ink); box-shadow: var(--shadow); }
  .engine-note[hidden] { display: none; }
  .add-banner { left: 50%; right: auto; transform: translateX(-50%); top: 16px; font-size: 14px; }

  .detail { top: 16px; right: 16px; bottom: 16px; left: auto; width: 380px; max-height: none; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .detail-foot { padding-bottom: 12px; border-radius: 0 0 var(--r) var(--r); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .toasts { bottom: 24px; left: 392px; right: 16px; }
  body.detail-open .toasts { bottom: 24px; }
  .pin { width: 18px; height: 18px; font-size: 9px; border-width: 2.5px; }
}