:root {
  /* Status colors, CVD-validated as a pair (worst-case ΔE 39.3 under protan simulation) */
  --color-caution:        #fab219;  /* 共同漁業権エリア（要確認） */
  --color-caution-stroke: #c98500;
  --color-safe:           #1baf7a;  /* 岸から50m・漁業権区域外の目安 */
  --color-safe-stroke:    #199e70;

  --ink-primary:   #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted:     #898781;
  --surface:       #fcfcfb;
  --surface-alt:   #fff3e0;
  --border:        rgba(11,11,11,0.10);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, html {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink-primary);
}
button { font-family: inherit; }
#map { position: absolute; inset: 0; }

/* ---------- Top bar (compact, mobile-first) ---------- */
#topbar {
  position: fixed; top: var(--safe-top); left: 0; right: 0;
  z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: 8px calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));
  pointer-events: none;
}
#topbar .title {
  background: rgba(255,255,255,0.95); border-radius: 20px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); pointer-events: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#info-btn {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  background: var(--color-caution-stroke); color: #fff; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer; pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); flex-shrink: 0;
}

/* ---------- Bottom toolbar (thumb-reach, mobile-first) ---------- */
#bottombar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 20; padding: 8px calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));
  display: flex; gap: 8px; align-items: center;
  background: linear-gradient(to top, rgba(255,255,255,0.92) 60%, rgba(255,255,255,0));
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#bottombar::-webkit-scrollbar { display: none; }
.toolbtn {
  flex: 0 0 auto; min-height: 44px; border-radius: 22px;
  background: #fff; border: 1px solid var(--border); color: var(--ink-primary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; white-space: nowrap;
}
.toolbtn .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
#legend-chip { flex: 0 0 auto; }
#filter-btn.active {
  background: var(--color-caution); border-color: var(--color-caution-stroke); color: #4a2e00;
}
#tide-btn.active {
  background: #2a78d6; border-color: #184f95; color: #fff;
}
#wind-btn.active {
  background: #2f9e6e; border-color: #1d7d54; color: #fff;
}
#port-btn.active {
  background: #8b5cf6; border-color: #6d28d9; color: #fff;
}
#windy-btn.active {
  background: #0ea5e9; border-color: #0879b3; color: #fff;
}

/* ---------- Windy.com external view overlay ---------- */
#windy-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: none; flex-direction: column; background: #06202e;
}
#windy-overlay.visible { display: flex; }
#windy-overlay-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + var(--safe-top)) calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));
  background: #06202e; color: #cfe8f5; font-size: 12.5px;
}
#windy-close-btn {
  min-height: 36px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12); color: #fff; font-size: 13px; font-weight: 600;
  padding: 0 14px; cursor: pointer;
}
#windy-frame { flex: 1 1 auto; width: 100%; border: none; }

/* ---------- Wind (風) info panel ---------- */
#wind-panel {
  position: fixed; left: 0; right: 0; bottom: calc(62px + var(--safe-bottom));
  z-index: 19; display: none;
  margin: 0 calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left));
  background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px 12px; font-size: 12px; color: var(--ink-secondary);
}
#wind-panel.visible { display: block; }
#wind-panel-row1 { display: flex; align-items: center; gap: 8px; }
#wind-play-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #2f9e6e; color: #fff; font-size: 13px; cursor: pointer;
}
#wind-slider { flex: 1 1 auto; width: 100%; }
#wind-time { display: block; margin: 6px 0; }
#wind-legend-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--ink-muted); }
#wind-legend-gradient { flex: 1 1 auto; height: 8px; border-radius: 4px; }
#wind-legend-toggle {
  flex-shrink: 0; border: none; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--ink-muted); line-height: 1;
}
#wind-legend-detail {
  list-style: none; margin: 6px 0 0; padding: 8px 10px; background: var(--surface-alt);
  border-left: 3px solid var(--color-caution-stroke); border-radius: 4px;
  font-size: 11.5px; color: var(--ink-secondary); display: flex; flex-direction: column; gap: 4px;
}
#wind-legend-detail[hidden] { display: none; }
#wind-legend-detail li { display: flex; align-items: center; gap: 6px; }
#wind-legend-detail .swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* ---------- Tide (潮汐) scrubber panel ---------- */
#tide-panel {
  position: fixed; left: 0; right: 0; bottom: calc(62px + var(--safe-bottom));
  z-index: 19; display: none;
  margin: 0 calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left));
  background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px 12px;
}
#tide-panel.visible { display: block; }
#tide-panel-row1 { display: flex; align-items: center; gap: 8px; }
#tide-play-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #2a78d6; color: #fff; font-size: 14px; cursor: pointer;
}
#tide-slider { flex: 1 1 auto; width: 100%; }
#tide-panel-row2 {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-secondary); margin-top: 2px;
}
#tide-legend-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--ink-muted); }
#tide-legend-gradient { flex: 1 1 auto; height: 8px; border-radius: 4px; }
#tide-panel .badge, #tide-sheet .badge {
  display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 10px;
  background: var(--surface-alt); color: var(--color-caution-stroke); border: 1px solid #f0c090;
}
#tide-sheet .sheet-body p { margin: 8px 0; }

/* ---------- Sheet (non-modal bottom panel), shared by all panels ----------
   No backdrop by design: the map stays interactive while a sheet is open,
   and tapping empty map dismisses all sheets (see js/click-priority.js). */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 78vh; background: #fff;
  border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
  z-index: 41; display: flex; flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.22s ease-out, visibility 0s linear 0.22s;
  padding-bottom: var(--safe-bottom);
}
/* Hidden sheets sit just below the viewport edge; without this they can
   still swallow touches during iOS rubber-band overscroll. visibility is
   the real guard: some mobile WebViews (observed: LINE's in-app browser)
   mis-paint a translateY(100%)-hidden .sheet as if it were open when the
   on-screen keyboard resizes the viewport mid-transition — a stale-layer
   compositing bug, not a class-toggle bug (confirmed no JS path could have
   opened it). visibility:hidden removes it from paint/hit-testing outright
   rather than relying solely on transform position, so that class of bug
   can't resurrect it. The transition-delay keeps the slide-out animation
   intact by only hiding after the transform finishes. */
.sheet:not(.visible) { pointer-events: none; }
.sheet.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.22s ease-out, visibility 0s linear 0s;
}
.sheet .grabber {
  width: 36px; height: 4px; border-radius: 2px; background: #ddd;
  margin: 8px auto 4px;
}
.sheet .sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 8px; border-bottom: 1px solid #f0f0ee;
}
.sheet .sheet-head h3 { margin: 0; font-size: 15px; }
.sheet .close-btn {
  cursor: pointer; font-size: 22px; color: #888; line-height: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.sheet .sheet-body { padding: 12px 16px; overflow-y: auto; font-size: 13.5px; line-height: 1.7; }

/* ---------- Legal caveat sheet ---------- */
#legal-body b { color: var(--color-caution-stroke); }
#legal-body .caution-line, #legal-body .safe-line { display: flex; gap: 8px; margin: 10px 0; align-items: flex-start; }
#legal-body .swatch { width: 14px; height: 14px; border-radius: 4px; margin-top: 2px; flex-shrink: 0; }

/* ---------- Species filter sheet ---------- */
#species-sheet .sheet-body { display: flex; flex-direction: column; gap: 10px; }
#species-input {
  width: 100%; padding: 12px 14px; border: 1px solid #ccc; border-radius: 10px;
  font-size: 16px; /* 16px avoids iOS auto-zoom on focus */
}
#species-apply-row { display: flex; gap: 8px; }
#species-apply-row button {
  flex: 1; min-height: 42px; border-radius: 10px; font-size: 14px; cursor: pointer;
}
#species-clear { border: 1px solid #ccc; background: #fff; color: #555; }
#species-status { font-size: 12px; color: var(--color-caution-stroke); min-height: 16px; }

/* ---------- Feature info sheet ---------- */
#info-sheet table { width: 100%; border-collapse: collapse; }
#info-sheet td { padding: 5px 4px; vertical-align: top; border-bottom: 1px solid #f0f0ee; }
#info-sheet td.label { color: var(--ink-secondary); white-space: nowrap; width: 38%; font-size: 12.5px; }
.caveat {
  margin-top: 10px; padding: 10px 12px; background: var(--surface-alt);
  border-left: 3px solid var(--color-caution-stroke); font-size: 12px; border-radius: 4px;
}

/* ---------- Fishing port (漁港) detail sheet ---------- */
#port-sheet table { width: 100%; border-collapse: collapse; margin-top: 14px; }
#port-sheet td { padding: 5px 4px; vertical-align: top; border-bottom: 1px solid #f0f0ee; }
#port-sheet td.label { color: var(--ink-secondary); white-space: nowrap; width: 38%; font-size: 12.5px; }

/* ---------- Port forecast (日付/潮汐/風の推定), computed from nearest tide
   station + point-sampled wind raster on port click. Sits above the
   attribute table; the 日付 slider is a shared time cursor for both. ---------- */
#port-forecast .pf-block { margin-bottom: 16px; }
#port-forecast .pf-block:last-child { margin-bottom: 0; }
#port-forecast h4 {
  margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-secondary);
  display: flex; align-items: center; gap: 6px;
}
#port-forecast .caveat-toggle {
  margin-left: auto; border: none; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--ink-muted); line-height: 1;
}
#port-forecast .pf-loading, #port-forecast .pf-nodata {
  font-size: 12.5px; color: var(--ink-muted);
}
#port-forecast .pf-date-block { padding-bottom: 12px; border-bottom: 1px solid #f0f0ee; }
#port-forecast #pf-date-slider { width: 100%; margin-top: 4px; }
#port-forecast .pf-date-label { font-size: 13px; font-weight: 600; margin-top: 2px; }
#port-forecast .pf-station, #tide-sheet .pf-station { font-size: 12.5px; margin: 2px 0; }
#port-forecast .pf-warn, #tide-sheet .pf-warn {
  font-size: 11.5px; color: var(--color-caution-stroke); background: var(--surface-alt);
  border-radius: 4px; padding: 4px 8px; margin: 4px 0;
}
#port-forecast .pf-events { font-size: 12px; margin: 4px 0; }
#port-forecast svg { display: block; width: 100%; height: auto; margin: 6px 0; }
#port-forecast .pf-wind-value { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; margin: 6px 0; }
#port-forecast .wind-arrow { display: inline-block; font-size: 15px; }

/* ---------- Rules sheet ---------- */
#rules-sheet .rule { border-bottom: 1px solid #f0f0ee; padding: 10px 0; }
#rules-sheet .rule .target { font-weight: bold; }
#rules-sheet .rule .restriction { color: #333; margin-top: 2px; }
#rules-sheet .rule .penalty { color: var(--color-caution-stroke); font-size: 11.5px; margin-top: 2px; }
#rules-sheet .badge {
  display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 10px;
  margin-left: 4px; background: var(--surface-alt); color: var(--color-caution-stroke); border: 1px solid #f0c090;
}
#rules-sheet .notes { margin-top: 12px; padding: 10px 12px; background: var(--surface-alt); border-radius: 4px; font-size: 11.5px; }
#rules-sheet .sources { margin-top: 12px; font-size: 11px; }
#rules-sheet .sources a { color: #0066cc; display: block; margin-top: 2px; }
#rules-sheet .section-heading {
  margin: 16px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-secondary);
}
#rules-sheet .section-subtext { font-size: 11px; color: var(--ink-muted); margin-bottom: 6px; }
#rules-sheet .rule.muted { opacity: 0.62; }
#rules-sheet .rule.muted .target { font-weight: 600; }
#rules-sheet .rule .scope-note {
  margin-top: 4px; font-size: 11px; color: var(--ink-muted); font-style: italic;
}

.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-top-right { top: calc(52px + var(--safe-top)); }

/* Wider screens: cap the bottom toolbar / sheets to a centered column so it
   doesn't stretch edge-to-edge; the map itself still fills the viewport. */
@media (min-width: 680px) {
  #bottombar { justify-content: center; }
  #bottombar .toolbtn { flex: 0 0 auto; }
  .sheet { left: 50%; right: auto; width: 420px; margin-left: -210px; border-radius: 16px; bottom: 16px; max-height: 70vh; }
  .sheet.visible { transform: translate(0, 0); visibility: visible; transition: transform 0.22s ease-out, opacity 0.22s ease-out, visibility 0s linear 0s; }
  .sheet:not(.visible) { transform: translate(0, 20px); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.22s ease-out, opacity 0.22s ease-out, visibility 0s linear 0.22s; }
  #tide-panel, #wind-panel { left: 50%; right: auto; width: 420px; margin: 0 0 0 -210px; }
}