/* ═══════════════════════════════════════════════════════════════════════
   HP Monsoon Portal — light, map-first design system
   (DESIGN.md §13 palette · Inter · mobile bottom-sheet + desktop 3-column)
═══════════════════════════════════════════════════════════════════════ */
:root {
  --blue:#1677F2; --blue-dark:#0B4FB3; --sky:#EAF4FF;
  --navy:#0B1F44; --slate:#53657D; --muted:#7A8AA3;
  --border:#E4ECF5; --bg:#F7FAFE; --white:#FFFFFF;
  --green:#22C55E; --green-soft:#DCFCE7; --amber:#F59E0B; --red:#EF4444; --cyan:#38BDF8;

  --radius:18px; --radius-sm:12px; --radius-sheet:24px;
  --pad:16px; --gap:12px;
  --shadow:0 8px 24px rgba(15,35,70,.08);
  --shadow-lg:0 -8px 30px rgba(15,35,70,.12);
  --topbar-h:64px; --rail-w:300px; --insights-w:340px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

* { box-sizing:border-box; }
html,body { height:100%; width:100%; max-width:100%; overflow-x:hidden; }
body {
  margin:0; background:var(--bg); color:var(--navy);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button { font-family:inherit; cursor:pointer; }
.ic { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.hidden { display:none !important; }
.section-label { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); margin:0 0 8px; }

/* ═══ TOP APP BAR ═══════════════════════════════════════════════════════ */
.topbar {
  height:var(--topbar-h); display:flex; align-items:center; gap:16px;
  padding:0 18px; background:var(--white); border-bottom:1px solid var(--border);
  position:relative; z-index:1200;
}
.tb-left { display:flex; align-items:center; gap:10px; min-width:0; }
.tb-logo-link { display:flex; }
.tb-logo { height:38px; width:38px; object-fit:contain; display:block; }
.tb-text { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.tb-name { font-size:18px; font-weight:800; color:var(--navy); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-sub  { font-size:11px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-mid  { flex:1; display:flex; justify-content:center; min-width:0; }
.tb-meta { font-size:12px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-right { display:flex; align-items:center; gap:10px; }

.seg-tabs { display:flex; background:var(--sky); border-radius:999px; padding:3px; }
.seg-tab {
  border:none; background:transparent; color:var(--slate); font-weight:600; font-size:13px;
  padding:6px 16px; border-radius:999px; transition:.15s;
}
.seg-tab.active { background:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(22,119,242,.3); }

.lang-toggle { display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.lang-toggle button { border:none; background:var(--white); color:var(--slate); font-weight:600; font-size:12px; padding:6px 12px; }
.lang-toggle button.active { background:var(--blue); color:#fff; }

.icon-btn-round {
  position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--white); color:var(--slate); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.icon-btn-round:hover { color:var(--blue); border-color:var(--blue); }
.alert-badge { position:absolute; top:4px; right:6px; min-width:8px; height:8px; border-radius:999px; background:var(--red); }

/* ═══ APP BODY ══════════════════════════════════════════════════════════ */
.app { position:absolute; inset:var(--topbar-h) 0 0 0; overflow:hidden; }
.panel { position:absolute; inset:0; }
.panel[hidden],.panel:not(.active) { display:none; }
.map-bg { position:absolute; inset:0; z-index:1; background:#dfe8f2; }

.toast {
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:1300;
  background:var(--red); color:#fff; padding:10px 16px; border-radius:12px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow); max-width:90%;
}
.warn-banner {
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:1300;
  background:var(--amber); color:#fff; padding:8px 14px; border-radius:10px; font-size:12px; font-weight:600;
}

/* ═══ MAP TOP CONTROLS (search + day chips) ════════════════════════════ */
.map-top {
  position:absolute; z-index:500; top:14px; left:50%; transform:translateX(-50%);
  width:min(560px, calc(100% - 32px)); display:flex; flex-direction:column; gap:10px;
}
.search-wrap { position:relative; display:flex; align-items:center; background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:0 8px 0 12px; height:48px; }
.search-ic { color:var(--slate); font-size:18px; display:flex; }
.search-inp { flex:1; border:none; outline:none; background:transparent; font-size:14px; color:var(--navy); padding:0 10px; height:100%; }
.search-inp::placeholder { color:var(--muted); }
.search-act { width:36px; height:36px; border-radius:10px; border:none; background:var(--sky); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:18px; }
@keyframes spin { to { transform:rotate(360deg); } }
.search-act.locating { background:var(--blue); color:#fff; }
.search-act.locating .ic { animation:spin .9s linear infinite; }
.suggestions { list-style:none; margin:6px 0 0; padding:6px; position:absolute; top:52px; left:0; right:0; background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); max-height:320px; overflow:auto; z-index:600; }
.suggestions:empty { display:none; }
.suggestions li button {
  width:100%; text-align:left; border:none; background:transparent; padding:9px 10px; border-radius:10px;
  font-size:14px; color:var(--navy); display:flex; flex-direction:column; gap:1px;
}
.suggestions li button:hover { background:var(--sky); }
.suggestions .meta { font-size:11px; color:var(--slate); font-weight:500; }

/* Day chips */
.day-bar { display:flex; gap:8px; overflow-x:scroll; scrollbar-width:none; padding:2px; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
.day-bar::-webkit-scrollbar { display:none; }
.precip-day-btn {
  flex:0 0 auto; min-width:62px; border:1px solid var(--border); background:var(--white); color:var(--navy);
  border-radius:12px; padding:7px 12px; display:flex; flex-direction:column; align-items:center; gap:1px;
  box-shadow:var(--shadow); transition:.15s;
}
.precip-day-btn .day-name { font-size:13px; font-weight:700; }
.precip-day-btn .day-date { font-size:10px; color:var(--slate); }
.precip-day-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.precip-day-btn.active .day-date { color:rgba(255,255,255,.85); }
.precip-day-btn.precip-day-past { opacity:.72; }
.precip-day-btn.precip-day-past .day-name { font-style:italic; }
.precip-day-btn.precip-day-past.active { opacity:1; }

/* ═══ MAP SIDE CONTROLS ════════════════════════════════════════════════ */
.map-side { position:absolute; z-index:500; top:50%; right:calc(var(--rail-w) + 26px); transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; }
.map-ctl { width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--white); color:var(--slate); display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--shadow); }
.map-ctl:hover { color:var(--blue); }
.overlay-status { position:absolute; z-index:500; top:14px; right:calc(var(--rail-w) + 26px); background:var(--white); border:1px solid var(--border); border-radius:10px; padding:5px 10px; font-size:12px; color:var(--slate); box-shadow:var(--shadow); }

/* Stale badge */
.stale-badge { position:absolute; z-index:500; top:14px; left:18px; background:var(--amber); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:10px; box-shadow:var(--shadow); }
.stale-badge.hidden { display:none; }

/* ═══ MINI LEGEND (mobile) ═════════════════════════════════════════════ */
.mini-legend { display:none; position:absolute; z-index:500; left:12px; bottom:calc(var(--sheet-collapsed-h,250px) + 12px); background:transparent; border:1px solid transparent; border-radius:12px; box-shadow:none; padding:8px 10px; flex-direction:column; gap:5px; align-items:flex-start; }
.ml-title { font-size:10px; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.03em; }
.ml-bar { width:120px; height:10px; border-radius:6px; }
.ml-scale { display:flex; justify-content:space-between; width:120px; font-size:9px; color:var(--slate); }

/* ═══ INSIGHTS PANEL (desktop left card) ═══════════════════════════════ */
.insights {
  position:absolute; z-index:600; top:14px; left:18px; width:var(--insights-w);
  max-height:calc(100% - 28px); background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; overflow:auto;
  display:flex; flex-direction:column; gap:14px;
}
.sheet-handle { display:none; }
.insights-search .hint { color:var(--slate); font-size:13px; margin:6px 0 0; }
.loading { color:var(--blue); font-size:13px; }

/* Collapsible insights: title bar + collapsed state + reopen button */
.insights-titlebar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.it-title { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); }
.it-toggle { transition:transform .2s ease; }
.insights.collapsed { gap:0; }
.insights.collapsed #search-panel,
.insights.collapsed #dashboard { display:none; }
.insights.collapsed .it-toggle { transform:rotate(180deg); }   /* chevron flips to "expand" */
.insights-reopen {
  position:absolute; z-index:650; left:18px; top:14px;
  display:none; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:9px 14px; font-size:13px; font-weight:700; color:var(--navy);
}
.insights-reopen .ic { color:var(--blue); font-size:16px; }
.insights-reopen:hover { border-color:var(--blue); color:var(--blue); }

/* Selected village */
#dashboard { display:none; flex-direction:column; gap:14px; }
#dashboard.visible { display:flex; }
.vil-head { display:flex; align-items:flex-start; gap:10px; }
.vil-pin { width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--sky); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:18px; }
.vil-id { flex:1; min-width:0; }
.vil-name { font-size:20px; font-weight:700; color:var(--navy); line-height:1.2; }
.vil-meta { font-size:12px; color:var(--slate); margin-top:2px; }
.vil-ts { font-size:11px; color:var(--muted); margin-top:3px; }
.icon-ghost { width:32px; height:32px; flex:0 0 auto; border:none; background:transparent; color:var(--muted); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; }
.icon-ghost:hover { background:var(--sky); color:var(--blue); }

.status-row { display:flex; flex-wrap:wrap; gap:8px; }
.trend-pill { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--navy); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:4px 12px; }
.trend-pill .ic { width:15px; height:15px; color:var(--blue); }
.clim-pill { display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:#fff; border-radius:999px; padding:4px 12px; }

/* Metric cards */
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric-row.sm { gap:8px; }
.metric-card { background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.metric-card.hi { background:var(--sky); border-color:#cfe4ff; }
.m-ic { color:var(--blue); font-size:16px; }
.m-val { font-size:22px; font-weight:700; color:var(--navy); line-height:1; }
.m-lbl { font-size:11px; color:var(--slate); font-weight:500; }
.rain-comparison {
  border:1px solid var(--border); border-radius:10px; padding:8px 10px;
  background:#F8FAFC; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  font-size:12px;
}
.rain-comparison .rc-label { display:block; color:var(--slate); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.rain-comparison .rc-value { display:block; color:var(--navy); font-size:16px; font-weight:750; }
.rain-comparison .rc-note { grid-column:1 / -1; color:var(--muted); font-size:11px; }
.pmfby-card { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:#F8FAFC; color:var(--ink); font-size:12px; line-height:1.45; }
.pmfby-card strong { font-size:12px; }
.pmfby-card .muted { color:var(--slate); }
.pmfby-map-link { display:inline-flex; align-items:center; gap:3px; color:var(--blue); font-weight:600; text-decoration:none; }
.pmfby-map-link .ic { width:11px; height:11px; }
.pmfby-arg-note {
  margin-top:7px; padding:6px 8px; font-size:11px; line-height:1.4; color:var(--slate);
  background:#FFF8E6; border:1px solid #F5E3B3; border-radius:6px;
}
.pmfby-change-btn {
  margin-top:8px; font-size:11px; font-weight:600; color:var(--brand,#2563eb);
  background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;
}
.pmfby-station-picker {
  margin-top:7px; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:#fff; max-height:250px; overflow-y:auto; box-shadow:0 8px 24px rgba(15,35,70,.08);
}
.pmfby-picker-head { position:sticky; top:0; z-index:1; display:flex; flex-direction:column; padding:9px 11px; background:var(--navy); color:#fff; }
.pmfby-picker-head strong { font-size:12px; }
.pmfby-picker-head span { color:#A7BBDD; font-size:10px; }
.pmfby-station-item {
  width:100%; padding:9px 10px; font-size:12px; text-align:left; cursor:pointer;
  border:0; border-bottom:1px solid var(--border); background:#fff;
  display:grid; grid-template-columns:9px 1fr; align-items:center; gap:8px;
}
.pmfby-station-item:last-child { border-bottom:none; }
.pmfby-station-item:hover,.pmfby-station-item:focus-visible { background:var(--sky); outline:none; }
.pmfby-station-item-marker { width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px #DCEAFF; }
.pmfby-station-item > span:last-child { min-width:0; display:flex; flex-direction:column; gap:1px; }
.pmfby-station-item-name { font-weight:600; color:var(--ink); }
.pmfby-station-picker .muted { padding:8px 10px; font-size:12px; display:block; }
.pmfby-station-item .muted { padding:0; font-size:10.5px; }

/* alert banner */
.alert-banner { display:none; background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:12px; padding:9px 12px; font-size:13px; font-weight:600; }
.alert-banner.show { display:flex; gap:7px; align-items:center; }
.alert-banner .ic { width:16px; height:16px; flex:0 0 auto; }

/* chart + outlook */
.sheet-detail { display:flex; flex-direction:column; gap:16px; }
.chart-wrap { height:160px; }
.outlook-cards { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.outlook-cards::-webkit-scrollbar { display:none; }
.outlook-cards button {
  flex:0 0 auto; min-width:66px; border:1px solid var(--border); background:var(--white); border-radius:12px;
  padding:8px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--navy); font-size:12px;
}
.outlook-cards button.active { border-color:var(--blue); background:var(--sky); }
.outlook-detail { margin-top:10px; display:flex; flex-direction:column; gap:8px; }

.cta-row { display:flex; gap:10px; }
.btn-primary,.btn-secondary { flex:1; border-radius:12px; padding:11px 14px; font-size:14px; font-weight:600; border:1px solid transparent; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-secondary { background:var(--white); color:var(--navy); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }
.btn-primary.full,.btn-secondary.full { width:100%; flex:none; }

/* ═══ RIGHT RAIL (desktop) ═════════════════════════════════════════════ */
.right-rail { position:absolute; z-index:600; top:14px; right:18px; width:var(--rail-w); max-height:calc(100% - 28px); overflow:auto; display:flex; flex-direction:column; gap:12px; }
.rail-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; }
.rail-card.legend-card { background:transparent; border-color:transparent; box-shadow:none; }
.legend-list { display:flex; flex-direction:column; gap:5px; overflow:visible; }
.legend-row { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--navy); }
.legend-sw { width:18px; height:18px; border-radius:5px; flex:0 0 auto; border:1px solid rgba(0,0,0,.06); }
.legend-sw--gradient { width:40px; border:1px solid rgba(26,127,196,0.3); }
.legend-range { font-weight:600; }
.legend-name { color:var(--slate); margin-left:auto; }
.layers-list { display:flex; flex-direction:column; gap:4px; }
.layer-row { display:flex; align-items:center; gap:10px; padding:7px 4px; font-size:13px; color:var(--navy); }
.layer-row .lr-ic { color:var(--blue); font-size:16px; display:flex; }
.layer-row .lr-name { flex:1; }
.layer-row[data-disabled="1"] { opacity:.45; }
.src-list { margin:0; padding-left:16px; font-size:12px; color:var(--slate); line-height:1.7; }
.src-list strong { color:var(--navy); }

/* toggle switch */
.switch { width:38px; height:22px; border-radius:999px; background:#cdd9e8; position:relative; flex:0 0 auto; border:none; transition:.15s; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.15s; }
.switch.on { background:var(--blue); }
.switch.on::after { left:18px; }

/* ═══ FLOODS PANEL ═════════════════════════════════════════════════════ */
.insights-flood .filter-row { display:flex; gap:6px; margin-bottom:10px; }
.filter-row button { flex:1; border:1px solid var(--border); background:var(--white); color:var(--slate); border-radius:10px; padding:7px; font-size:12px; font-weight:600; }
.filter-row button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.report-list { list-style:none; margin:10px 0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.report-list li { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:12px; color:var(--navy); }
.report-form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.report-form label { font-size:12px; font-weight:600; color:var(--slate); }
.report-form select,.report-form input,.report-form textarea { border:1px solid var(--border); border-radius:10px; padding:9px; font-size:13px; font-family:inherit; color:var(--navy); background:var(--white); }
.flood-legend { position:absolute; z-index:500; left:18px; bottom:18px; background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:8px 12px; display:flex; gap:14px; }
.leg-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--navy); }
.ld { width:11px; height:11px; border-radius:50%; }

/* ═══ SCROLL PANELS (alerts / about) ══════════════════════════════════ */
.scroll-panel { background:var(--bg); overflow:auto; z-index:2; }
.page-wrap { max-width:720px; margin:0 auto; padding:24px 18px 90px; }
.page-title { font-size:22px; font-weight:800; color:var(--navy); margin:0 0 4px; }
.page-sub { font-size:13px; color:var(--slate); margin:0 0 18px; }
.alerts-list { display:flex; flex-direction:column; gap:10px; }
.alert-card { background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:14px; display:flex; gap:12px; align-items:flex-start; }
.alert-card .ac-sev { font-size:11px; font-weight:700; color:#fff; border-radius:999px; padding:3px 10px; flex:0 0 auto; }
.alert-card .ac-title { font-weight:700; color:var(--navy); }
.alert-card .ac-meta { font-size:12px; color:var(--slate); margin-top:2px; }
.empty-state { background:var(--white); border:1px dashed var(--border); border-radius:14px; padding:28px; text-align:center; color:var(--slate); }

.about-panel .page-wrap { max-width:780px; padding-top:28px; }
.about-logos { display:flex; align-items:center; gap:18px; margin-bottom:14px; }
.ab-logo { height:46px; } .ab-logo-wide { height:38px; }
.about-section { padding:18px 0; border-top:1px solid var(--border); }
.about-section:first-of-type { border-top:0; padding-top:4px; }
.about-section .section-label { margin-bottom:10px; }
.lang-toggle-lg button { padding:10px 20px; font-size:14px; }
.al { margin:0; padding-left:18px; font-size:13px; color:var(--slate); line-height:1.75; }
.al strong { color:var(--navy); }
.disclaimer { display:flex; align-items:flex-start; gap:7px; font-size:12px; color:var(--muted); margin-top:8px; }
.disclaimer .ic { width:15px; height:15px; margin-top:1px; flex:0 0 auto; color:var(--amber); }
.about-body { font-size:13px; color:var(--slate); line-height:1.68; margin:0; max-width:70ch; }
.about-body + .about-body { margin-top:10px; }
.about-body.about-warn { color:#92400E; padding-left:10px; border-left:3px solid var(--amber); }
.about-meta { font-size:11.5px; color:var(--muted); margin:12px 0 0; padding-top:10px; border-top:1px solid var(--border); max-width:70ch; }
.about-fine { font-size:12px; color:var(--muted); }
.about-fine strong { color:var(--slate); font-weight:600; }
.about-contact-line { margin-top:8px; }
.about-link { color:var(--blue); text-decoration:none; }
.about-link:hover { text-decoration:underline; }

/* ═══ HAMBURGER BUTTON + POPUP (mobile only) ══════════════════════════ */
.hamburger-btn { display:none; }
.hamburger-menu { display:none; }

/* ═══ MODALS ═══════════════════════════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(11,31,68,.35); display:flex; align-items:center; justify-content:center; padding:18px; }
.modal-overlay.hidden { display:none; }
.modal-card { background:var(--white); border-radius:18px; box-shadow:0 20px 60px rgba(15,35,70,.25); width:min(380px,100%); max-height:calc(100svh - 36px); overflow:auto; padding:18px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.modal-head .section-label { margin:0; }
/* sub-headings inside the legend & layers modal */
.modal-card .ml-sublabel { margin:14px 0 8px; }

/* ═══ FEEDBACK ═════════════════════════════════════════════════════════ */
/* Compact by default: a slim row of prompt + rating buttons + comment toggle.
   The comment box + submit only appear once expanded (rating picked or the
   comment toggle), so the bar stays small until the user is actually giving detail. */
.feedback-bar { position:absolute; z-index:700; left:50%; bottom:14px; transform:translateX(-50%); display:flex; flex-direction:row; align-items:center; gap:10px; background:var(--white); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:8px 12px; max-width:calc(100% - 36px); }
.feedback-bar .fb-suggestion-wrap { display:none; }
.feedback-bar .hint:empty { display:none; }
.fb-comment-toggle { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--border); background:var(--white); color:var(--slate); border-radius:10px; line-height:1; }
.fb-comment-toggle .ic { width:16px; height:16px; }
.fb-comment-toggle:hover { border-color:var(--blue); }
.feedback-bar.fb-expanded .fb-comment-toggle { display:none; }
/* Expanded: stack into a small card so the textarea + submit have room. */
.feedback-bar.fb-expanded { flex-direction:column; align-items:stretch; gap:10px; width:320px; padding:14px 16px; }
.feedback-bar.fb-expanded .fb-prompt { text-align:center; }
.feedback-bar.fb-expanded .feedback-buttons { justify-content:center; }
.feedback-bar.fb-expanded .fb-btn { flex:1; justify-content:center; }
.feedback-bar.fb-expanded .fb-suggestion-wrap { display:flex; margin-top:0; }
/* Only present on the Rainfall view — the bar lives outside the panels, so
   hide it whenever another section (Alerts / About / Floods) is active. */
body:not(.view-rainfall) .feedback-bar { display:none !important; }
.feedback-bar.is-disabled { opacity:0.5; pointer-events:none; }
.feedback-bar.is-disabled::after { content:"Select a village to leave feedback"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--white); border-radius:16px; font-size:13px; color:var(--slate); pointer-events:none; }
.fb-prompt { font-size:13px; font-weight:600; color:var(--navy); }
.feedback-buttons { display:flex; gap:8px; }
.fb-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--white); color:var(--navy); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; }
.fb-btn .fb-ic { width:15px; height:15px; color:var(--blue); }
.fb-btn:hover { border-color:var(--blue); }
.fb-btn.sent { background:var(--green-soft); border-color:var(--green); color:#15803d; }
#feedback-modal .feedback-buttons { flex-direction:column; }
#feedback-modal .fb-btn { width:100%; justify-content:flex-start; padding:12px 14px; }
.hint { font-size:12px; color:var(--slate); }

/* Inline feedback inside the village sheet — mobile only (desktop uses the bar) */
.feedback-inline { display:none; flex-direction:column; gap:10px; background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:14px; }
.feedback-inline .fb-prompt { font-size:13px; }
.feedback-inline .feedback-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.feedback-inline .fb-btn { justify-content:center; padding:10px 6px; }
.feedback-inline .hint:empty { display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  :root { --rail-w:260px; --insights-w:300px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE  (< 820px) — map-first bottom sheet + hamburger menu
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* Two-tier bottom sheet: a slim peek while browsing the map (max pan room),
     growing only enough to reveal the village's metrics once one is selected. */
  :root { --sheet-collapsed-h:92px; --sheet-peek-max:158px; --topbar-mobile:calc(58px + var(--safe-t)); }
  /* keep the collapsed sheet compact: timestamp/pills/alert only when expanded */
  .insights:not(.sheet-expanded) .vil-ts,
  .insights:not(.sheet-expanded) .status-row,
  .insights:not(.sheet-expanded) .alert-banner { display:none; }
  /* compact metric cards in the peek so all three fit in a slim sheet */
  .insights:not(.sheet-expanded) .metric-card { padding:7px 6px; }
  .insights:not(.sheet-expanded) .m-ic { display:none; }
  .insights:not(.sheet-expanded) .m-val { font-size:18px; }
  .insights:not(.sheet-expanded) .vil-head { gap:8px; }

  .tb-sub,.tb-mid,.seg-tabs,.lang-toggle,.icon-btn-round { display:none; }
  .tb-right { margin-left:auto; }
  .tb-name { font-size:16px; }
  .topbar { padding:var(--safe-t) 14px 0; gap:10px; height:calc(58px + var(--safe-t)); }
  .app { inset:calc(58px + var(--safe-t)) 0 0 0; }

  /* Full-width search + day chips. */
  .map-top { top:10px; left:12px; width:calc(100% - 24px); transform:none; }
  .search-wrap { width:100%; height:46px; }

  /* hide desktop rail + feedback bar; show mini legend + in-sheet feedback */
  .right-rail,.feedback-bar { display:none !important; }
  .feedback-inline { display:flex; }
  .mini-legend { display:flex; bottom:calc(var(--sheet-peek-max) + 12px); }
  .map-side { top:auto; right:12px; bottom:calc(var(--sheet-peek-max) + 12px); transform:none; }
  .overlay-status { right:12px; top:auto; bottom:calc(var(--sheet-peek-max) + 64px); }

  /* Bottom sheet — sits flush at the bottom now (no bottom nav) */
  .insights {
    position:fixed; left:0; right:0; bottom:0; top:auto; width:100%;
    max-height:calc(100svh - var(--topbar-mobile) - 8px); border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
    border:none; border-top:1px solid var(--border); box-shadow:var(--shadow-lg);
    padding:8px 16px calc(16px + var(--safe-b)); gap:12px; transition:height .25s ease;
    height:var(--sheet-collapsed-h); overflow:hidden;
  }
  .insights.sheet-expanded { height:calc(100svh - var(--topbar-mobile) - 8px); overflow:auto; }
  /* When a village is selected, grow the peek just enough to show its metrics. */
  .insights:not(.sheet-expanded):has(#dashboard.visible) { height:var(--sheet-peek-max); }
  .sheet-handle { display:flex; justify-content:center; padding:4px 0 6px; cursor:grab; }
  .sheet-handle span { width:44px; height:4px; border-radius:999px; background:#CBD5E1; }
  /* In collapsed state, hide the detail (chart/outlook/cta) */
  .insights:not(.sheet-expanded) .sheet-detail { display:none; }

  /* On mobile the title text is dropped (the village name/handle convey context);
     the collapse chevron is pinned to the sheet's top-right corner so it doesn't
     eat peek height. Collapsing slides the whole sheet away and reveals the
     floating reopen button. Swiping the peek down also collapses it. */
  .insights-titlebar { position:absolute; top:8px; right:10px; z-index:4; gap:0; }
  /* When expanded the sheet scrolls; pin the collapse chevron to the viewport
     (just under the topbar) so it never scrolls away or hides behind the nav. */
  .insights.sheet-expanded .insights-titlebar {
    position:fixed; top:calc(var(--topbar-mobile) + 10px); right:16px; z-index:1300;
  }
  .it-title { display:none; }
  .insights .vil-head { padding-right:30px; }
  .insights.collapsed { transform:translateY(130%); pointer-events:none; transition:transform .25s ease, height .25s ease; }
  .insights.collapsed ~ .insights-reopen { display:inline-flex; top:auto; bottom:calc(16px + var(--safe-b)); left:12px; }

  .insights-flood { height:auto; max-height:60vh; overflow:auto; }

  /* Hamburger button */
  .hamburger-btn {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
    background:var(--white); color:var(--slate); font-size:20px;
  }
  .hamburger-btn[aria-expanded="true"] { color:var(--blue); border-color:var(--blue); background:var(--sky); }

  /* Hamburger popup menu */
  .hamburger-menu {
    position:fixed; top:calc(64px + var(--safe-t)); right:14px; z-index:1600;
    background:var(--white); border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow-lg);
    padding:6px; min-width:180px;
    display:flex; flex-direction:column; gap:2px;
    animation:hm-in .15s ease;
  }
  .hamburger-menu.hidden { display:none !important; }
  @keyframes hm-in { from { opacity:0; transform:scale(.95) translateY(-6px); } to { opacity:1; transform:none; } }

  .hm-item {
    display:flex; align-items:center; gap:10px; position:relative;
    width:100%; border:none; background:transparent;
    padding:11px 13px; border-radius:10px;
    font-size:14px; font-weight:600; color:var(--navy); text-align:left;
  }
  .hm-item:hover { background:var(--sky); color:var(--blue); }
  .hm-item.hm-active { background:var(--sky); color:var(--blue); }
  .hm-item .ic { width:18px; height:18px; flex:0 0 auto; color:var(--slate); }
  .hm-item:hover .ic,.hm-item.hm-active .ic { color:var(--blue); }
  .hm-badge { position:absolute; top:8px; left:26px; min-width:8px; height:8px; border-radius:999px; background:var(--red); }
  .hm-divider { height:1px; background:var(--border); margin:4px 2px; }
  .hm-lang-row { display:flex; gap:6px; padding:6px 10px 4px; }
  .hm-lang-btn { flex:1; border:1px solid var(--border); border-radius:8px; background:var(--white); color:var(--slate); font-size:13px; font-weight:600; padding:7px 0; }
  .hm-lang-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }

  .scroll-panel .page-wrap { padding-bottom:40px; }
  .flood-legend { bottom:calc(var(--sheet-peek-max) + 12px); left:12px; }
  .metric-row .m-val { font-size:20px; }
}

@media (max-width:380px){
  .day-bar { gap:6px; }
  .precip-day-btn { min-width:54px; padding:6px 8px; }
  .topbar { gap:8px; padding:var(--safe-t) 12px 0; }
  .tb-name { font-size:15px; }
  .icon-btn-round,.hamburger-btn { width:38px; height:38px; }
}

/* ── Feedback suggestion box ─────────────────────────────────────────────── */
.fb-suggestion-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  animation: fb-slide-in 0.18s ease;
}
@keyframes fb-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fb-suggestion-input {
  width: 100%;
  min-height: 72px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.fb-suggestion-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22,119,242,0.12);
}
.fb-suggestion-input::placeholder { color: var(--slate); opacity: 0.7; }
.fb-submit-btn {
  align-self: flex-end;
  padding: 7px 18px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.fb-submit-btn:hover { background: #0B4FB3; }
.fb-submit-btn:disabled { opacity: 0.55; cursor: default; }
/* ══ IMD intensity patterns — integrated into the rail legend card ═════════
   Documents the hatch overlays (###, **, //, --) drawn on village polygons
   when zoomed in. A compact second block under the colour scale. */
.legend-patterns { margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:5px; }
.legend-subhead { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 3px; }
.lp-row { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--navy); }
.lp-pat {
  flex:0 0 auto; width:30px; height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:5px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--border);
  font-family:"Courier New", ui-monospace, monospace; font-size:12px; font-weight:700; letter-spacing:1px; color:var(--navy);
}
.lp-pat--none { color:var(--muted); }
.lp-pat--box::before {
  content:""; display:block; width:14px; height:14px; border:1.5px solid var(--navy); border-radius:2px;
  background-image:
    repeating-linear-gradient(0deg,  var(--navy) 0, var(--navy) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, var(--navy) 0, var(--navy) 1px, transparent 1px, transparent 5px);
  background-position:center;
}
.lp-name { flex:1; }
/* .lp-val removed — range labels removed from hatching legend */
/* Blue gradient swatch for IMD Light category legend row */
.lp-pat--blue-grad {
  background: linear-gradient(to right, #297722, #1F9EE7, #F3E821, #FF8B00, #DA1B1E);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  font-size: 0;
}
/* Continuous gradient bar legend for rainfall */
.precip-grad-bar {
  width: 100%; height: 12px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  margin-bottom: 10px;
}
/* Old absolute-position tick labels removed — replaced by swatch rows below */
.imd-swatch-list {
  display: flex; flex-direction: column; gap: 6px;
  background: transparent;
}
.imd-swatch-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.3;
  background: transparent;
}
.imd-sw {
  flex: 0 0 16px; height: 16px; border-radius: 5px; display: inline-block;
  border: 1px solid rgba(15,23,42,0.08);
}
.imd-sw-name {
  flex: 1; font-weight: 600; color: var(--navy, #1e293b);
  white-space: nowrap;
}
.imd-sw-range {
  flex: 0 0 auto; color: var(--slate, #64748b);
  font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap;
}


.legend-label-name { flex:1; font-size:12px; color:var(--navy); }

/* ══ Vertical rainfall range bar (thermometer style) ═══════════════════════
   Six stacked colour blocks from 0 (bottom) to Extremely Heavy (top, open-
   ended). Boundary value sits at the bottom edge of each block; category
   name is centred alongside it. */
.rv-wrap { display:flex; align-items:stretch; gap:10px; position:relative; }
.rv-bar {
  width: 22px; height: 210px; flex: 0 0 auto;
  display: flex; flex-direction: column;
  border-radius: 6px; overflow: visible;
  border: 1px solid rgba(0,0,0,0.18);
  position: relative;
}
.rv-arrow {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -100%);
  font-size: 22px; line-height: 1; color: #800000;
  pointer-events: none;
}
.rv-seg { flex: 1; position: relative; }
.rv-ticks {
  height: 210px; flex: 0 0 34px; display: flex; flex-direction: column;
}
.rv-tickrow { flex: 1; position: relative; }
.rv-tick {
  position: absolute; left: 0; bottom: 0; transform: translateY(50%);
  font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--slate, #64748b); background: var(--white, #fff);
  padding: 0 3px; border-radius: 3px; line-height: 1.3; min-width: 32px; text-align: right;
}
.rv-names {
  height: 210px; display: flex; flex-direction: column;
}
.rv-spacer { height: 16px; flex: 0 0 16px; }
.rv-name {
  flex: 1; display: flex; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--navy, #1e293b);
  white-space: nowrap; line-height: 1.15;
}