/* ポータル固有のレイアウト。配色は tokens.css / bodik-chrome.css に従います。 */

.portal-tabs {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(3, 50, 133, .07);
}

/* 固定したメニューの下に見出しが隠れないよう、飛び先に余白を持たせます。 */
.app-shell section[id] { scroll-margin-top: 78px; }

.portal-tabs a {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.portal-tabs a:hover, .portal-tabs a:focus-visible { color: var(--accent-strong); background: var(--accent-soft); }

.stats-grid { margin-top: 18px; }

/* 地図 */
.map-section {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.map-layout { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: 18px; margin-top: 18px; }

.map-controls { display: grid; align-content: start; gap: 14px; }

.control-group { display: grid; gap: 8px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.control-group legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.control-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.control-group input { accent-color: var(--accent); }
.control-count { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.control-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

.map-frame { position: relative; min-width: 0; }
#map { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map-credit { position: absolute; right: 8px; bottom: 6px; margin: 0; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: var(--muted); font-size: 10px; }

.maplibregl-popup-content { padding: 14px 16px; border-radius: var(--radius); font-family: var(--sans); font-size: 13px; line-height: 1.7; }
.shelter-popup h3 { margin: 0 0 6px; font-size: 15px; }
.shelter-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; }
.shelter-popup dt { color: var(--muted); font-size: 11px; }
.shelter-popup dd { margin: 0; font-size: 12px; }
.shelter-popup .pill { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pill-open { color: #0b6b3a; background: #dff3e6; }
.pill-closed { color: var(--muted); background: #eef1f5; }
.pill-listed { color: var(--accent-strong); background: var(--accent-soft); }
.pill-evacuation-order { color: #84200c; background: #ffe0d8; }
.pill-evacuation-level5 { color: #fff; background: #20232a; }
.pill-evacuation-level4 { color: #fff; background: #61317f; }
.pill-evacuation-level3 { color: #fff; background: #ba2d35; }
.pill-evacuation-level2 { color: #332b00; background: #f4d13f; }
.pill-evacuation-level1 { color: #17202a; background: #fff; border: 1px solid #728096; }
.evacuation-legend-list { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.evacuation-legend-list > span { white-space: nowrap; }
.evacuation-legend-list .evacuation-source-note { flex-basis: 100%; white-space: normal; }
.evacuation-legend { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.evacuation-legend-level5 { background: #20232a; }
.evacuation-legend-level4 { background: #61317f; }
.evacuation-legend-level3 { background: #ba2d35; }
.evacuation-legend-level2 { background: #f4d13f; }
.evacuation-legend-level1 { box-sizing: border-box; border: 1px solid #728096; background: #fff; }

/* 開設カーブ */
.opening-panel { margin-top: 18px; padding: 20px 20px 14px; }
#opening-chart { display: block; width: 100%; height: 200px; margin-top: 16px; }
.legend-brand { background: var(--accent); }

/* 一覧 */
.two-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.two-column .notices-section { margin-top: 18px; }

.section-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); font-size: 13px; font-weight: 700; }
.section-link svg { width: 15px; }

.record-list { display: grid; gap: 0; margin-top: 16px; max-height: 460px; overflow-y: auto; }

.record {
  display: grid;
  gap: 4px;
  padding: 12px 4px;
  border-bottom: 1px solid #eef2f7;
}

.record:last-child { border-bottom: 0; }
.record-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.record-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; }
.record-title a { color: var(--ink); }
.record-title a:hover { color: var(--accent-strong); text-decoration: underline; }
.record-meta { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.record-elapsed { color: var(--accent-strong); font-family: var(--mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
.record-time { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }

.intensity {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.intensity-1, .intensity-2 { color: var(--ink); background: #dfe6ee; }
.intensity-3 { color: var(--ink); background: #ffe08a; }
.intensity-4 { background: var(--possible); }
.intensity-5, .intensity-6 { background: #d4571f; }
.intensity-7 { background: var(--confirmed); }

/* 自治体の発信 */
.stream-controls { display: grid; gap: 12px; margin-top: 16px; }

/* 地図と一覧は一つの発信パネル内で続けて見せます。 */
.stream-results {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.stream-results-heading h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.stream-results .stream-search { margin-top: 16px; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--chip, var(--line));
  border-radius: 999px;
  /* 未選択は薄い色地、押すと同じ色で塗りつぶします。 */
  color: var(--chip, var(--ink));
  background: color-mix(in srgb, var(--chip, #fff) 10%, #fff);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.chip span {
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip, #000) 14%, #fff);
  color: inherit;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.chip:hover { background: color-mix(in srgb, var(--chip, #fff) 20%, #fff); }
.chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--chip, #000) 45%, #fff); outline-offset: 2px; }

.chip.is-active {
  color: var(--chip-ink, #fff);
  background: var(--chip, var(--accent));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--chip, #000) 40%, transparent);
}

.chip.is-active span { background: color-mix(in srgb, var(--chip-ink, #fff) 26%, transparent); color: var(--chip-ink, #fff); }

.stream-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.stream-filters .search-field { flex: 1 1 240px; }
.stream-filters .select-field select { width: 190px; }
.stream-count { margin: 14px 0 0; }

.stream-list { display: grid; gap: 12px; margin-top: 12px; }

.stream-card {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}

/* どの町の情報かが最初に目に入るようにします。 */
.stream-municipality { margin: 0; color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1.3; }
.stream-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-category { color: var(--accent-strong); background: var(--accent-soft); font-weight: 700; }
.stream-title { margin: 0; font-size: 15px; line-height: 1.6; }
.stream-title a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.stream-title a:hover { color: var(--accent-strong); text-decoration-color: var(--accent); }
.stream-excerpt { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.85; }
.stream-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }

.stream-more {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-strong);
  background: #fff;
  font-size: 15px;
  font-weight: 700;
}

.stream-more:hover { background: var(--accent-soft); }

/* カタログ */
.catalog-list { display: grid; gap: 12px; margin-top: 4px; max-height: 620px; overflow-y: auto; padding-right: 4px; }

.catalog-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.catalog-item h3 { margin: 0; font-size: 14px; line-height: 1.5; }
.catalog-item h3 a { color: var(--ink); }
.catalog-item h3 a:hover { color: var(--accent-strong); text-decoration: underline; }
.catalog-notes { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.catalog-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.tag-topic { color: var(--accent-strong); background: var(--accent-soft); }
.tag-format { color: var(--muted); background: #eef1f5; font-family: var(--mono); }
.catalog-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.catalog-downloads a { color: var(--accent-strong); font-size: 12px; font-weight: 700; }

/* 近くの避難所。今夜の行き先を探す人が最初に触る場所なので、指で押せる大きさを優先します。 */
.nearby-section {
  margin-top: 22px;
  padding: 22px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}

.nearby-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 16px; }

.locate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-size: 16px;
  font-weight: 700;
}

.locate-button:hover:not(:disabled) { background: var(--accent-strong); }
.locate-button:disabled { opacity: .6; cursor: progress; }
.locate-button svg { width: 20px; }

.nearby-select { flex: 1 1 240px; }
.nearby-select select { width: 100%; min-height: 52px; font-size: 15px; }

.nearby-status { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.nearby-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

.nearby-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.nearby-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-light);
}

.nearby-card-head { display: flex; align-items: baseline; gap: 10px; }
.nearby-card h3 { margin: 0; font-size: 16px; line-height: 1.45; }

.nearby-distance {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.nearby-municipality { margin: 0; color: var(--muted); font-size: 13px; }
.nearby-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.badge-welfare { color: #7a3ba8; background: #f2e9fb; }
.badge-quake { color: var(--accent-strong); background: var(--accent-soft); }

.nearby-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.nearby-facts dt { color: var(--muted); font-size: 12px; }
.nearby-facts dd { margin: 0; font-size: 13px; line-height: 1.6; }
.nearby-facts dd.unknown { color: var(--muted); }

.nearby-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }

.nearby-route, .nearby-onmap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}

.nearby-route { color: #fff; background: var(--navy); }
.nearby-route:hover { background: var(--navy-mid); }
.nearby-onmap { border: 1px solid var(--accent); color: var(--accent-strong); background: #fff; }
.nearby-onmap:hover { background: var(--accent-soft); }

/* 震央のバツ印 */
.epicentre-mark { width: 46px; height: 46px; cursor: pointer; }
.epicentre-mark svg { width: 100%; height: 100%; overflow: visible; }
.epicentre-mark line { stroke: #bf0404; stroke-width: 7; stroke-linecap: round; paint-order: stroke; }
.epicentre-mark svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.epicentre-mark:hover line, .epicentre-mark:focus-visible line { stroke: #8f0303; }
.pill-epicentre { color: var(--confirmed); background: var(--confirmed-soft); }

/* 出典 */
.sources-section { margin-top: 22px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.sources-section h2 { margin-bottom: 6px; font-size: 16px; }
.sources-lead { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.sources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }

.source-item {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-light);
}

.source-item h3 { margin: 0; font-size: 14px; }
.source-item h3 a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); }
.source-item h3 a:hover { text-decoration: underline; }
.source-item h3 svg { width: 14px; }
.source-provides { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.7; }
.source-endpoint { margin: 0; font-size: 11px; line-height: 1.7; word-break: break-all; }
.source-endpoint a { color: var(--muted); font-family: var(--mono); }
.source-endpoint a:hover { color: var(--accent-strong); text-decoration: underline; }
.source-time { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.control-note a { color: var(--accent-strong); font-weight: 700; }
.control-note a:hover { text-decoration: underline; }

.back-link { color: var(--accent-strong); font-weight: 700; letter-spacing: normal; }
.back-link:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .map-layout { grid-template-columns: 1fr; }
  #map { height: 420px; }
  .record-list { max-height: none; }
  .catalog-list { max-height: none; }
}

@media (max-width: 760px) {
  .map-section, .sources-section { padding: 16px; }
  .portal-tabs { gap: 4px; padding: 6px; }
  .portal-tabs a { padding: 6px 10px; font-size: 12px; }
  #map { height: 360px; }
}

.tag-more { color: var(--muted); background: var(--bg-light); }


/* 自治体の発信（地図） */
.notice-map-hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.notice-map-frame { position: relative; margin-top: 14px; }
#notice-map { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.notice-detail {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: min(360px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 28px rgba(3, 50, 133, .18);
}

.notice-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  background: #fff;
}

.notice-detail-close:hover { border-color: var(--accent); color: var(--accent-strong); }
.notice-detail-close svg { width: 17px; }
.notice-detail-title { margin: 8px 0 0; font-size: 15px; line-height: 1.6; }

.notice-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 14px;
  padding: 0 18px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

.notice-detail-link:hover { background: var(--navy-mid); }
.notice-detail-link svg { width: 15px; }

@media (max-width: 760px) {
  #notice-map { height: 400px; }
  .notice-detail { top: 8px; left: 8px; width: calc(100% - 16px); padding: 14px; }
}

/* 最新5件の巡回表示 */
.notice-map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.spotlight-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.spotlight-toggle:hover { border-color: var(--accent); color: var(--accent-strong); }
.spotlight-toggle svg { width: 15px; }

/* この要素は MapLibre が位置を管理します。position は指定しません。
   大きさを持たせないことで、内側の原点が発信元の丸の中心と一致します。 */
.spotlight { width: 0; height: 0; cursor: pointer; }
.spotlight-inner { position: relative; width: 0; height: 0; }

/* リップルは自治体の丸と同じ大きさから始めます。大きさは件数で変わるので、
   幅・高さ・中央寄せの余白は要素側で指定します。 */
.spotlight-ring {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 3px solid;
  border-radius: 50%;
  animation: spotlight-pulse 1.6s ease-out infinite;
}

/* 吹き出しは丸の真上に浮かせます。left は丸からの左右のずれです。 */
.spotlight-balloon { position: absolute; transform: translateX(-50%); }

/* 漫画の吹き出しの尾です。付け根は吹き出しの下辺、先端は発信元の丸を指します。 */
.spotlight-tail {
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  animation: spotlight-fade .55s ease-out both;
}

.spotlight-card {
  display: grid;
  gap: 1px;
  width: max-content;
  justify-items: center;
  padding: 9px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(3, 50, 133, .28);
  text-align: center;
  white-space: nowrap;
  transform-origin: bottom center;
  animation: spotlight-grow .55s cubic-bezier(.22, 1.4, .4, 1) both;
}

.spotlight-card strong { font-size: 16px; line-height: 1.3; }
.spotlight-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; opacity: .85; }
.spotlight-place { font-size: 12px; font-weight: 700; }
.spotlight-time { font-family: var(--mono); font-size: 10px; opacity: .85; }

@keyframes spotlight-grow {
  from { transform: scale(.35); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes spotlight-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 丸と同じ大きさから広がります。丸の縁から波が出ているように見せるためです。 */
@keyframes spotlight-pulse {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(2.3); opacity: 0; }
}

/* 動きを減らす設定の端末では、拡大と点滅を止めます。 */
@media (prefers-reduced-motion: reduce) {
  .spotlight-card, .spotlight-tail { animation: none; }
  .spotlight-ring { animation: none; opacity: .5; }
}

/* 自治体ごとの発信一覧（丸を押したとき） */
.notice-list-count { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.notice-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }

.notice-list-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.notice-list-item:hover, .notice-list-item:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.notice-list-item .tag { justify-self: start; }
.notice-list-title { color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.6; }
.notice-list-time { color: var(--muted); font-family: var(--mono); font-size: 11px; }

.notice-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.notice-detail-back svg { width: 14px; }

/* 国の公式発表 */
.official-list { display: grid; gap: 12px; margin-top: 16px; }

.official-item {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  background: var(--panel);
}

.agency-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  color: #fff;
  background: var(--navy);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.official-title { margin: 0; font-size: 15px; line-height: 1.6; }
.official-title a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.official-title a:hover { color: var(--accent-strong); text-decoration-color: var(--accent); }

/* 自治体を選んでから分類で絞る流れを、番号で示します。 */
.stream-step { display: grid; gap: 8px; }
.stream-step-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: var(--navy); }

.step-no {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-size: 12px;
}

/* 市町村の選択欄と現在地ボタンを横に並べます。幅が足りなければ折り返します。 */
.municipality-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.municipality-locate-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.municipality-locate-status:empty { display: none; }

.stream-municipality-select {
  width: min(100%, 420px);
  min-height: 52px;
  padding: 0 12px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
}

.stream-search { max-width: 420px; }

/* 自治体名と、いつ確認した情報かを並べて大きく出します。 */
.stream-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.stream-when { margin: 0; color: var(--muted); font-size: 12px; }
.stream-when b { margin-left: 6px; color: var(--ink); font-family: var(--mono); font-size: 15px; }

/* 地図の現在地ボタンは操作パネルに収まる大きさにします。 */
.locate-button-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.locate-button-sm svg { width: 17px; }

.here-mark {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0066cc;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, .3), 0 2px 6px rgba(0, 0, 0, .3);
}

@media (max-width: 760px) {
  .stream-municipality-select { font-size: 16px; }
  .stream-when b { font-size: 14px; }
}

/* 災害対策本部 */
.hq-state { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.hq-open { color: #0b6b3a; background: #dff3e6; }
.hq-closed { color: var(--muted); background: #eef1f5; }

/* 吹き出しが消えるときの動きです。突然消えると視線が引っかかります。 */
.spotlight.is-leaving .spotlight-card { animation: spotlight-shrink .32s ease-in forwards; }
.spotlight.is-leaving .spotlight-ring { animation: none; opacity: 0; }
/* 尾だけが残ると発信元を指し続けてしまうため、吹き出しと一緒に消します。 */
.spotlight.is-leaving .spotlight-tail { animation: none; opacity: 0; }

@keyframes spotlight-shrink {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight.is-leaving .spotlight-card { animation: none; opacity: 0; }
}