/* ============================================================================
   にげどき江戸川 — UI chrome, light theme
   ----------------------------------------------------------------------------
   Design direction: bright civic/public-safety dashboard. White translucent
   cards with soft shadows + hairline borders float over a bright daylight
   3D scene (owned by another agent). Panels use backdrop-blur so they stay
   readable over a busy, light, moving background instead of relying on a
   flat opaque fill.
   ========================================================================= */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* ---- surfaces / page ---- */
  --bg-page:            #f4f5f2;   /* fallback body colour behind the canvas */
  --surface:            rgba(255,255,255,0.86);
  --surface-solid:      #ffffff;
  --surface-strong:     rgba(255,255,255,0.94);
  --surface-border:     rgba(15,23,42,0.10);
  --surface-border-strong: rgba(15,23,42,0.18);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 6px 20px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.07);
  --shadow-lg: 0 14px 40px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.08);
  --blur: blur(12px);

  /* ---- text ---- */
  --text-primary: #1b2330;
  --text-secondary: #465063;
  --text-muted:   #6b7484;
  --text-faint:   #8b93a1;

  /* ---- verdict colours (retuned for a light background — see report) ---- */
  --c-stay:      #1d4ed8;  /* 条件確認済み */
  --c-stay-bg:   rgba(29,78,216,0.12);
  --c-unknown:   #4b5563;  /* 判定不能 */
  --c-unknown-bg:rgba(75,85,99,0.12);
  --c-evacuate:  #c0242f;  /* 留まれない */
  --c-evacuate-bg: rgba(192,36,47,0.12);
  --c-amber:     #8f6a08;  /* 協定候補レイヤー */
  --c-amber-bg:  rgba(143,106,8,0.12);

  /* ---- accent / primary action (reuses stay-blue — same hue as brand) ---- */
  --accent:        #1d4ed8;
  --accent-hover:  #1640b3;
  --accent-active: #123484;
  --accent-ring:   rgba(29,78,216,0.28);

  /* ---- radii / motion ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --t-fast: 120ms ease;
  --t: 160ms ease;

  /* ---- fonts ---- */
  --font-sans: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, Menlo, 'Liberation Mono', monospace;
}

html, body {
  height:100%;
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body { overflow:hidden; }

#canvas-container { width:100vw; height:100vh; position:relative; }
#canvas-container canvas { position:absolute; top:0; left:0; width:100%; height:100%; }

/* Focus visibility on every interactive control */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ============================================================================
   Address search bar — the app's primary entry point, pinned top-centre.
   Reads as the most prominent control on screen: wide card, solid input.
   ========================================================================= */
#search-bar {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  width:min(600px, 92vw); z-index:30;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:12px 14px 10px;
}
#search-row { display:flex; align-items:center; gap:10px; }
#search-icon {
  flex:0 0 auto; width:22px; text-align:center; font-size:18px;
  color:var(--accent);
}
#addr-input {
  flex:1 1 auto; min-width:0;
  font-family:var(--font-sans); font-size:15px; color:var(--text-primary);
  background:var(--surface-solid); border:1px solid var(--surface-border-strong);
  border-radius:var(--radius-md); padding:10px 12px;
  transition:border-color var(--t), box-shadow var(--t);
}
#addr-input::placeholder { color:var(--text-faint); }
#addr-input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }

#search-btn {
  flex:0 0 auto; background:var(--accent); color:#fff; border:none;
  border-radius:var(--radius-md); padding:10px 18px; font-size:14px; font-weight:600;
  letter-spacing:0.02em; cursor:pointer; transition:background var(--t), transform var(--t-fast);
}
#search-btn:hover  { background:var(--accent-hover); }
#search-btn:active { background:var(--accent-active); transform:translateY(1px); }
#search-btn:disabled { background:#c6cedb; color:#fff; cursor:not-allowed; }

#search-clear {
  display:none; flex:0 0 auto; width:28px; height:28px; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:50%; color:var(--text-muted);
  font-size:16px; cursor:pointer; transition:background var(--t), color var(--t);
}
#search-clear:hover { background:rgba(15,23,42,0.08); color:var(--text-primary); }
#search-bar.has-query #search-clear { display:inline-flex; }

#search-suggest {
  margin-top:8px; background:var(--surface-solid); border:1px solid var(--surface-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  max-height:280px; overflow-y:auto;
}
#search-suggest:not(.open) { display:none; }
.sg-item {
  padding:10px 12px; font-size:14px; color:var(--text-primary); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--surface-border); transition:background var(--t-fast);
}
.sg-item:last-child { border-bottom:none; }
.sg-item:hover, .sg-item.active { background:var(--c-stay-bg); color:var(--accent-active); }

#search-status {
  margin-top:6px; min-height:16px; font-size:12.5px; color:var(--text-muted);
  display:flex; align-items:center; gap:6px; padding-left:2px;
}
#search-status:empty { display:none; }
#search-status.err  { color:var(--c-evacuate); font-weight:600; }
#search-status.busy { color:var(--text-faint); }
#search-status.busy::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--text-faint);
  display:inline-block; animation:sbpulse 1.2s ease-in-out infinite;
}
@keyframes sbpulse { 0%,100% { opacity:0.35; } 50% { opacity:1; } }

/* ============================================================================
   Region toggle — sits just below the search bar, centred.
   ========================================================================= */
#region-toggle {
  position:fixed; top:86px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:22;
}
#region-toggle button {
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); color:var(--text-secondary);
  padding:9px 22px; border-radius:var(--radius-pill); font-size:13px; cursor:pointer;
  letter-spacing:0.04em; font-family:var(--font-sans); font-weight:500;
  box-shadow:var(--shadow-sm); transition:background var(--t), color var(--t), border-color var(--t);
}
#region-toggle button.active { background:var(--c-stay-bg); border-color:var(--c-stay); color:var(--accent-active); font-weight:700; }
#region-toggle button:hover:not(.active) { border-color:var(--surface-border-strong); color:var(--text-primary); }

/* ============================================================================
   Left column — top stack (safety/verdict panels) + bottom stack
   (legend/mode selector) as ONE flex column pinned top-to-bottom with
   justify-content:space-between.
   The verdict panel made the top stack tall enough to collide with the
   independently-fixed bottom stack (two separately-anchored blocks can
   always grow into each other) — unifying them under one flex parent
   means the top stack shrinks and scrolls instead of overlapping,
   regardless of content height. This is the single most important layout
   fix in this file; keep it if the panels change again.
   ========================================================================= */
#left-column {
  position:fixed; top:124px; left:16px; bottom:16px; z-index:10;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:8px; pointer-events:none;
}
#left-column > * { pointer-events:auto; }

#left-top-stack {
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  flex:1 1 auto; min-height:0; overflow-y:auto;
}

/* Shared card look for the floating panels */
#safety-panel, #verdict-panel {
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); box-shadow:var(--shadow-md);
  padding:14px 16px; border-radius:var(--radius-lg); min-width:250px; max-width:320px;
}
.ptitle { font-size:12px; font-weight:700; letter-spacing:0.06em; color:var(--text-secondary); margin-bottom:6px; }
.phint  { font-size:12px; color:var(--text-muted); line-height:1.5; margin-bottom:6px; }

/* Neutral, not blue/green: this is a measurement, not a verdict. See updateUI(). */
#safe-floor-display {
  font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.4;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
#water-level-label { font-size:12.5px; color:var(--accent); margin-top:6px; font-weight:600; }

/* Verdict engine panel (階高セレクタ / 方式トグル / 判定サマリ) — the
   centrepiece control group. See the `Verdict` object in the shared-state
   script for the judgement logic these controls drive. */
.vp-row { margin-bottom:10px; }
.vp-label { font-size:11.5px; color:var(--text-muted); margin-bottom:5px; display:block; font-weight:600; }
.pill-group { display:flex; gap:6px; flex-wrap:wrap; }
.pill-group .pill {
  background:var(--surface-solid); border:1px solid var(--surface-border-strong); color:var(--text-secondary);
  padding:7px 13px; border-radius:var(--radius-pill); font-size:12px; cursor:pointer;
  letter-spacing:0.02em; font-family:var(--font-sans); font-weight:500;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.pill-group .pill.active { border-color:var(--c-stay); color:#fff; background:var(--accent); font-weight:700; }
.pill-group .pill:hover:not(.active) { border-color:var(--text-faint); color:var(--text-primary); background:#f2f4f8; }
#method-toggle .pill { flex:1; text-align:center; }

#verdict-summary { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.vs-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); }
.vs-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.vs-stay    .vs-dot { background:var(--c-stay); }
.vs-unknown .vs-dot { background:var(--c-unknown); }
.vs-evacuate .vs-dot { background:var(--c-evacuate); }
.vs-count {
  margin-left:auto; font-weight:700; color:var(--text-primary); transition:background-color var(--t);
  padding:1px 5px; border-radius:4px; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
.vs-count.flash { animation:vsflash 1.1s ease-out; }
@keyframes vsflash {
  0%   { background-color:rgba(255,196,20,0.55); color:#3a2a00; }
  100% { background-color:transparent; color:var(--text-primary); }
}
@media (prefers-reduced-motion: reduce) {
  .vs-count.flash { animation:none; }
}
#verdict-disclosure {
  font-size:11px; color:var(--text-faint); line-height:1.6; margin-top:10px;
  padding-top:8px; border-top:1px solid var(--surface-border);
}

/* 協定候補レイヤーのサマリ — 江戸川区データ読込時のみ JS が style.display='block'
   で表示する。豊洲ではデータ自体が存在しないため、既定は非表示 (display:none)
   でなければならない — これがフェイルセーフの唯一の場所。 */
#agreement-summary {
  display:none;
  margin-top:10px; padding-top:8px; border-top:1px solid var(--surface-border);
  font-size:11px; color:var(--c-amber); letter-spacing:0.03em;
}

/* Stat chips — laid out as a single row, not a stacked column. These are
   secondary reference figures, but stacked vertically they cost ~110px of the
   left column and pushed the 判定サマリ (the three headline verdict counts —
   the most important readout in the app) below the fold of #left-top-stack's
   scroll area at 1600x900. Anything that forces the headline numbers out of
   sight has to give up its vertical space first. */
/* This label sits directly on the 3D canvas rather than inside a panel, so it
   needs its own backing to stay readable over a bright, busy scene — same pill
   treatment #ui-bottom-hint and #attr-footer already use for the same reason. */
#stat-chips-title {
  font-size:11.5px; font-weight:600; letter-spacing:0.05em; color:var(--text-secondary);
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); border-radius:var(--radius-pill);
  padding:3px 10px; align-self:flex-start;
}
#stat-chips { display:flex; flex-direction:row; gap:6px; align-items:stretch; }
.chip {
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); box-shadow:var(--shadow-sm);
  padding:7px 6px; border-radius:var(--radius-md); font-size:10.5px; color:var(--text-muted);
  letter-spacing:0; flex:1 1 0; min-width:0; text-align:center; white-space:nowrap;
}
.chip .cv {
  color:var(--text-primary); font-size:14px; font-weight:700; display:block; margin-top:3px;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* Bottom-left stack: legend + mode selector. A fixed-size flex child of
   #left-column (pinned to its bottom edge via space-between) rather than
   an independently-fixed block — see #left-column comment above. */
#left-bottom-stack {
  max-width:260px; flex:0 0 auto;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}

/* Legend */
#legend {
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); box-shadow:var(--shadow-sm);
  padding:10px 14px; border-radius:var(--radius-md); font-size:12px; color:var(--text-secondary);
  letter-spacing:0.02em;
}
.legend-row { display:flex; align-items:center; gap:8px; margin:5px 0; }
.l-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.l-stay     { background:var(--c-stay); }
.l-unknown  { background:var(--c-unknown); }
.l-evacuate { background:var(--c-evacuate); }
/* 協定候補レイヤー（江戸川区限定）— 判定色（赤/青/灰）と混同させないため
   amber/gold で分離。クリックで表示切替。豊洲では #legend-agreement 自体を
   非表示にする（データが存在しないため、エラーではなく不在にする）。 */
.l-agreement { background:var(--c-amber); }
/* 豊洲では協定候補データが存在しないため、既定は非表示。江戸川区読込時のみ
   JS が style.display='flex' で出す — display:none はここが唯一の出所。 */
#legend-agreement { display:none; cursor:pointer; border-radius:var(--radius-sm); transition:opacity var(--t); }
#legend-agreement.layer-off { opacity:0.4; }

/* Mode selector */
#mode-selector { display:flex; gap:6px; flex-wrap:wrap; }
#mode-selector button {
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); color:var(--text-secondary);
  padding:9px 16px; border-radius:var(--radius-pill); font-size:12px; cursor:pointer;
  letter-spacing:0.02em; font-family:var(--font-sans); font-weight:500;
  box-shadow:var(--shadow-sm); transition:background var(--t), color var(--t), border-color var(--t);
}
#mode-selector button.active { border-color:var(--c-stay); color:#fff; background:var(--accent); font-weight:700; }
#mode-selector button:hover:not(.active) { border-color:var(--surface-border-strong); color:var(--text-primary); }

/* Link out to the standalone 個別避難計画 tool (prototype/plan/) — that
   workflow is no longer done inside this 3D exploratory scene; see its
   own README for why. Styled distinctly from mode-selector toggles since
   it navigates away rather than switching an internal view: a calm green
   accent instead of the neutral pill look. */
#plan-tool-link {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(20,110,60,0.10); border:1px solid rgba(20,110,60,0.35); color:#0d6b3a;
  padding:9px 16px; border-radius:var(--radius-pill); font-size:12px; text-decoration:none;
  letter-spacing:0.02em; font-family:var(--font-sans); font-weight:600;
  transition:background var(--t), border-color var(--t);
}
#plan-tool-link:hover { background:rgba(20,110,60,0.16); border-color:rgba(20,110,60,0.5); }

/* ============================================================================
   AI log (collapsed by default — declutter the first impression; expandable
   for those who want the technical detail). Monospace kept here on purpose:
   this is a technical/system readout, not prose UI.
   ========================================================================= */
#ai-log-wrap {
  width:300px;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  overflow:hidden;
}
#ai-log-hdr {
  height:44px; padding:0 14px; font-size:11.5px; font-weight:600; letter-spacing:0.06em; color:var(--text-secondary);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none;
  transition:background var(--t);
}
#ai-log-hdr:hover { background:rgba(15,23,42,0.04); }
#ai-log-chevron { color:var(--text-faint); font-size:10px; }
#ai-log { display:none; padding:10px 14px 12px; max-height:210px; overflow-y:auto; overflow-x:hidden; font-size:12px; line-height:1.7;
  font-family:var(--font-mono); border-top:1px solid var(--surface-border);
  overflow-wrap:anywhere; word-break:break-word; }
#ai-log-wrap.expanded #ai-log { display:block; }
.ll   { color:#0f7a3d; }
.ll.w { color:#a15c00; }
.ll.a { color:var(--c-evacuate); }
.blink-cursor { display:inline-block; width:7px; height:11px; background:#0f7a3d; vertical-align:middle; animation:bc 1s step-end infinite; }
@keyframes bc { 0%,100%{opacity:1} 50%{opacity:0} }
@media (prefers-reduced-motion: reduce) {
  .blink-cursor { animation:none; opacity:1; }
}

/* ============================================================================
   Right-hand column — mirror of #left-column: #right-top-stack (result
   panels: #sim-panel, #info-panel) + #right-bottom-stack (#ai-log-wrap) as
   ONE flex column pinned top-to-bottom with justify-content:space-between.
   #sim-panel and #info-panel can both be open at once and #ai-log-wrap can
   expand, so any independently-fixed version of these blocks can always
   grow into its neighbour (see the #left-column note above for the general
   principle) — unifying them under one flex parent means the top stack
   shrinks and scrolls instead of overlapping, regardless of content
   height. Keep this if the panels change again.
   ========================================================================= */
#right-column {
  position:fixed; top:16px; right:16px; bottom:16px; z-index:12;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:10px; pointer-events:none;
}
#right-column > * { pointer-events:auto; }

#right-top-stack {
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  flex:1 1 auto; min-height:0; overflow-y:auto;
}
#right-bottom-stack { flex:0 0 auto; }

#sim-panel, #info-panel {
  width:300px;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:16px 18px; font-size:13px;
}
#sim-panel  { display:none; }
#info-panel { display:none; }

.sim-hdr, #info-panel .ititle {
  display:flex; align-items:center; justify-content:space-between;
}
.sim-hdr { margin-bottom:10px; }
#sim-title, #info-panel .ititle {
  font-size:12px; font-weight:700; letter-spacing:0.06em; color:var(--text-secondary);
}
#info-panel .ititle { margin-bottom:8px; }
#sim-close {
  background:transparent; border:none; color:var(--text-muted); font-size:18px; line-height:1;
  cursor:pointer; padding:2px 6px; border-radius:var(--radius-sm); transition:background var(--t), color var(--t);
}
#sim-close:hover { background:rgba(15,23,42,0.08); color:var(--text-primary); }

#sim-address  { font-size:13.5px; font-weight:600; color:var(--text-primary); margin-bottom:8px; line-height:1.5; }
#sim-building { font-size:12px; color:var(--text-muted); line-height:1.6; margin-bottom:10px; }
#sim-note     { font-size:11.5px; color:var(--text-muted); line-height:1.6; margin-top:8px; }

#sim-verdict {
  font-size:16px; font-weight:700; line-height:1.4;
  padding:9px 12px; border-radius:var(--radius-md); margin-bottom:4px;
}
#sim-verdict.verdict-stay     { color:var(--c-stay);     background:var(--c-stay-bg); }
#sim-verdict.verdict-unknown  { color:var(--c-unknown);  background:var(--c-unknown-bg); }
#sim-verdict.verdict-evacuate { color:var(--c-evacuate); background:var(--c-evacuate-bg); }

#sim-actions { display:flex; gap:8px; margin-top:12px; }
#sim-run-btn, #sim-route-btn {
  flex:1; border-radius:var(--radius-md); padding:9px 10px; font-size:12.5px; font-weight:600;
  cursor:pointer; letter-spacing:0.01em; font-family:var(--font-sans);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
#sim-run-btn { background:var(--accent); border:1px solid var(--accent); color:#fff; }
#sim-run-btn:hover  { background:var(--accent-hover); border-color:var(--accent-hover); }
#sim-run-btn:active { background:var(--accent-active); transform:translateY(1px); }
#sim-route-btn { background:var(--surface-solid); border:1px solid var(--surface-border-strong); color:var(--text-secondary); }
#sim-route-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-active); background:var(--c-stay-bg); }
#sim-run-btn:disabled, #sim-route-btn:disabled {
  background:#eef0f3; border-color:var(--surface-border); color:var(--text-faint); cursor:not-allowed; transform:none;
}

/* 次の一手 → 徒歩経路。Styled as the amber block's own action so it reads as
   part of that group rather than as another verdict control; the routing it
   triggers is shared with #sim-route-btn (see search.js runRouteFromPin). */
#ns-route-btn {
  display:block; width:100%; margin-top:9px; padding:8px 10px;
  border-radius:var(--radius-md); font-size:12.5px; font-weight:600; cursor:pointer;
  font-family:var(--font-sans); letter-spacing:0.01em;
  background:var(--surface-solid); border:1px solid var(--c-amber); color:var(--c-amber);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
#ns-route-btn:hover  { background:rgba(143,106,8,0.10); }
#ns-route-btn:active { transform:translateY(1px); }

#sim-route { font-size:12px; color:var(--text-secondary); line-height:1.7; margin-top:10px; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
#sim-disclaimer {
  font-size:10.5px; color:var(--text-faint); line-height:1.6; margin-top:10px;
  padding-top:8px; border-top:1px solid var(--surface-border);
}

/* ============================================================================
   Info panel (building detail — click selection)
   ========================================================================= */
#info-panel table { width:100%; border-collapse:collapse; }
#info-panel td { padding:5px 0; color:var(--text-muted); font-size:12px; }
/* Long label needs a smaller size to fit the two-column table without wrapping
   into the value column. */
.ip-longlabel { font-size:10.5px; }
#info-panel td:last-child {
  color:var(--text-primary); text-align:right; font-weight:600;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
#info-verdict {
  margin-top:12px; font-size:17px; font-weight:700; line-height:1.4;
  padding:9px 12px; border-radius:var(--radius-md);
  color:var(--c-stay); background:var(--c-stay-bg);
}
#info-verdict.danger { color:var(--c-evacuate); background:var(--c-evacuate-bg); }
#info-verdict.verdict-stay     { color:var(--c-stay);     background:var(--c-stay-bg); }
#info-verdict.verdict-unknown  { color:var(--c-unknown);  background:var(--c-unknown-bg); }
#info-verdict.verdict-evacuate { color:var(--c-evacuate); background:var(--c-evacuate-bg); }
#info-confidence { font-size:11.5px; color:var(--text-muted); margin-top:6px; line-height:1.6; }
#info-disclaimer {
  font-size:10.5px; color:var(--text-faint); margin-top:8px; line-height:1.6;
  border-top:1px solid var(--surface-border); padding-top:6px;
}

/* 次の一手（協定候補への最寄り案内）— 留まれない/判定不能のときだけ JS が
   style.display='block' で表示する。豊洲では協定候補データが存在しないため
   常に非表示のまま — display:none はここが唯一の出所。 */
#info-next-step {
  display:none;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--surface-border);
}
.ns-title { font-size:11px; color:var(--c-amber); letter-spacing:0.06em; margin-bottom:6px; }
/* ≥12px floor per the theme's legibility rule — several personas testing
   this app are elderly, so 10px small print is not acceptable here either. */
.ns-caveats { font-size:12px; color:var(--text-faint); line-height:1.6; margin-top:6px; }

/* 未確認 block — conditions we genuinely cannot evaluate yet. Kept visible
   at all times a building is selected; showing the gap is the design
   principle, not an oversight. */
#info-unconfirmed { margin-top:8px; padding-top:8px; border-top:1px solid var(--surface-border); }
#info-unconfirmed .iu-title { font-size:10.5px; font-weight:600; color:var(--text-faint); letter-spacing:0.05em; margin-bottom:5px; }
.iu-row { font-size:11.5px; color:var(--text-muted); line-height:1.6; margin-bottom:4px; }
.iu-tag {
  display:inline-block; color:var(--text-secondary); background:rgba(75,85,99,0.12);
  border-radius:4px; padding:0 6px; margin-right:5px; font-size:11px; font-weight:600;
}

/* ============================================================================
   Water-level slider
   ========================================================================= */
#ui-bottom {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); box-shadow:var(--shadow-md);
  padding:14px 22px; border-radius:var(--radius-lg);
  display:flex; align-items:center; gap:14px; width:clamp(260px, 34vw, 440px); z-index:10;
}
#ui-bottom label { font-size:14px; color:var(--text-secondary); font-weight:600; white-space:nowrap; }
#ui-bottom-hint {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%); font-size:11.5px;
  color:var(--text-muted); z-index:10; white-space:nowrap; text-align:center;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  padding:3px 10px; border-radius:var(--radius-pill); border:1px solid var(--surface-border);
}
#water-slider {
  flex:1; -webkit-appearance:none; appearance:none;
  height:6px; background:#dde1e8; border-radius:3px; outline:none; cursor:pointer;
}
#water-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px;
  background:var(--accent); border:2px solid #fff; border-radius:50%; cursor:pointer;
  box-shadow:0 1px 4px rgba(29,78,216,0.5);
}
#water-slider::-moz-range-thumb {
  width:22px; height:22px; background:var(--accent); border:2px solid #fff; border-radius:50%;
  cursor:pointer; box-shadow:0 1px 4px rgba(29,78,216,0.5);
}
#water-readout {
  font-size:15px; color:var(--accent); font-weight:700; min-width:84px; text-align:right;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* Mode badge (technical renderer readout — developer detail, not shown by default) */
#mode-badge { display:none; }

/* ============================================================================
   Error overlay
   ========================================================================= */
#err-overlay {
  display:none; position:fixed; top:0; left:0; right:0;
  background:#fdecec; border-bottom:2px solid var(--c-evacuate);
  padding:9px 16px; font-size:12px; color:#7a1420; z-index:200; white-space:pre-wrap;
  font-family:var(--font-mono);
}

/* Online/offline indicator chip */
#online-chip {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  padding:4px 13px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:600; letter-spacing:0.08em;
  z-index:5; transition:opacity 0.4s; pointer-events:none;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--surface-border); color:var(--text-faint);
}
#online-chip.online  { border-color:rgba(15,120,60,0.35); color:#0f7a3d; }
#online-chip.offline { border-color:rgba(192,36,47,0.4); color:var(--c-evacuate); background:rgba(255,255,255,0.92); }
/* The error banner (z-index:200) sits above everything at top:0 — when it's
   showing, drop the online chip below it instead of letting it hide behind. */
#err-overlay[style*="display: block"] ~ #online-chip { top:46px; }

/* Footer attribution — must stay legible at all times */
#attr-footer {
  position:fixed; bottom:6px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--text-secondary); letter-spacing:0.03em; z-index:5; white-space:nowrap;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  padding:3px 10px; border-radius:var(--radius-pill); border:1px solid var(--surface-border);
}

/* ============================================================================
   Responsive — the fixed left column and right-hand cards must not cover
   the whole screen on a phone. Panels shrink, the left column already
   scrolls internally (see #left-top-stack), and the AI log stays
   collapsed to just its header (default behaviour, just narrower here).
   ========================================================================= */
@media (max-width: 900px) {
  #search-bar { width:94vw; }
  #region-toggle { top:80px; }
  #region-toggle button { padding:8px 16px; font-size:12px; }

  #left-column { top:126px; left:10px; bottom:100px; }
  #safety-panel, #verdict-panel { min-width:0; max-width:min(280px, 62vw); padding:13px 15px; }
  #left-bottom-stack { max-width:min(280px, 62vw); }

  /* top matches #left-column's own override at this width: the search bar
     and region toggle widen to near-full-viewport here, so both side
     columns need the same top clearance to stay out from under them. */
  #right-column { top:126px; right:10px; bottom:100px; }
  #ai-log-wrap { width:min(260px, 40vw); }
  #sim-panel, #info-panel { width:min(280px, 46vw); padding:13px 15px; }
}

@media (max-width: 560px) {
  #search-bar { top:10px; width:96vw; padding:10px 12px 8px; border-radius:var(--radius-md); }
  #search-icon { width:18px; font-size:16px; }
  #addr-input { font-size:14px; padding:9px 10px; }
  #search-btn { padding:9px 12px; font-size:13px; }

  #region-toggle { top:70px; gap:6px; }
  #region-toggle button { padding:7px 12px; font-size:11.5px; }

  /* Left column: narrower cards, own scroll — never a full-screen takeover.
     bottom:112px reserves the centred water-slider's own horizontal band
     (it spans most of the viewport width at this size) so the two fixed
     blocks never share a row and collide — same "never overlap" principle
     as the #left-column / right-column notes above, just on the vertical
     axis against a *centred* element instead of another side column. */
  #left-column { top:114px; left:8px; bottom:112px; gap:8px; }
  #safety-panel, #verdict-panel { max-width:calc(100vw - 16px); min-width:0; padding:12px 14px; }
  .pill-group .pill { padding:6px 10px; font-size:11px; }
  /* Leave the right-hand gutter free for the narrowed #ai-log-wrap. Without
     this the bottom stack is free to span the full viewport width, and its
     wrapped plan-tool-link lands in the same row as the log card — the two
     fixed columns collide even though each one individually fits. */
  #left-bottom-stack { max-width:calc(100vw - 16px - 148px); }
  #mode-selector { flex-direction:column; align-items:stretch; }
  #legend, #mode-selector button, #plan-tool-link { font-size:11px; }

  /* Right column: collapse to compact cards; AI log is header-only unless
     the user taps it open (existing .expanded toggle, untouched here).
     top:114px matches #left-column's own override here, for the same
     reason as the 900px breakpoint above (search bar + region toggle span
     near-full-width). bottom:112px mirrors the left column's reservation
     of the centred water-slider's horizontal band so neither side column
     collides with it at this width.
     #ai-log-wrap is pulled narrow here for a second reason: with no result
     panel open, #right-top-stack collapses to nothing and the log (the
     only #right-bottom-stack child) sits flush against the bottom of
     #right-column — the same row height as #left-bottom-stack's wrapped
     plan-tool-link button on this narrow a screen. Kept wide, its card
     reaches far enough left to visually collide with that button; narrow,
     it clears it with room to spare. */
  #right-column { top:114px; right:8px; bottom:112px; }
  #ai-log-wrap { width:min(130px, 34vw); }
  #ai-log-hdr { padding:0 10px; font-size:10px; height:38px; }
  #ai-log-hdr span:first-child { display:none; } /* keep just the chevron/label on very small screens */

  #sim-panel, #info-panel {
    width:min(300px, calc(100vw - 16px)); padding:13px 14px; font-size:12.5px;
  }

  /* bottom:30px, not 16px: at 16px the slider card's own bottom edge lands
     inside #attr-footer's row and the CC BY attribution — which must stay
     legible at all times — was being overlapped. */
  #ui-bottom { width:min(320px, 90vw); padding:11px 16px; gap:10px; bottom:30px; }
  #ui-bottom-hint { bottom:74px; font-size:10.5px; max-width:90vw; white-space:normal; text-align:center; }
  #attr-footer { font-size:9.5px; bottom:4px; max-width:96vw; overflow:hidden; text-overflow:ellipsis; }
}