:root {
  --bg: #0f1218;
  --band: #131822;
  --panel: #151a23;
  --panel-2: #1c2330;
  --panel-3: #262f3f;
  --line: #2a3242;
  --line-strong: #56627a;
  --text: #eef2f7;
  --muted: #aab3c1;
  --onsen: #ffb43e;
  --sento: #8fe0ff;
  --focus: #ffd98a;
  /* 選ばれている状態は白地に紺の文字（朱色の塗りは主ボタンの「Googleマップで開く」だけに使う） */
  --picked: #f3f6fb;
  --picked-ink: #0f1b33;
  /* 選ばれている面は、白い枠2pxと、ふだんより少し明るい地（タブもチップも同じ） */
  --picked-bg: #313c52;
  --map-ground: #262d3a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body {
  overflow: hidden;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  line-break: strict;
  /* 日本語は文節で折り返す（対応していないブラウザでは、語句を .nowrap で包んだところだけ守られる） */
  word-break: auto-phrase;
  -webkit-text-size-adjust: 100%;
}
button, a { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }
a { color: #d9e1ec; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 50; top: 8px; left: 8px; padding: 10px 14px; border-radius: 8px;
  background: var(--picked); color: var(--picked-ink); font-weight: 800; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- 骨組み
   スマホ：上に見出しの帯、真ん中に地図、下にシート、いちばん下に出典の帯。ページ自体はスクロールさせず、シートの中だけ動く。
   シートは「一覧を広げる」で背を伸ばす（地図が縮むだけで重ならない）。
   全国の画面では地図に画面の半分以上を渡し、お風呂の画面では帯を畳んで地図を広げる（390×844で380px以上） */
.shell {
  --sheet: 26vh;
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) var(--sheet) auto;
  grid-template-areas: "band" "stage" "sheet" "strip";
}
.shell:not([data-level="nation"]) { --sheet: 46vh; }
.shell[data-level="bath"] { --sheet: 44vh; }
.shell[data-sheet="open"] { --sheet: 76vh; }
@supports (height: 1svh) {
  .shell { --sheet: 26svh; }
  .shell:not([data-level="nation"]) { --sheet: 46svh; }
  .shell[data-level="bath"] { --sheet: 44svh; }
  .shell[data-sheet="open"] { --sheet: 76svh; }
}

/* ---------------------------------------------------------------- 見出しの帯 */
.band {
  grid-area: band;
  z-index: 3;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #161c28, var(--band));
}
.band-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 44px; }
.title { margin: 0; overflow: hidden; font-size: 15px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; }
.title-day {
  display: inline-block; margin-right: 8px; color: var(--muted);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; vertical-align: 2px;
}
/* 狭い画面では題名を切らないために、DAY番号を省く */
@media (max-width: 459px) { .title-day { display: none; } }
.headline { min-height: 1.35em; margin: 0; font-size: clamp(18px, 4.9vw, 21px); font-weight: 800; line-height: 1.35; }
.trend { margin: -3px 0 0; color: var(--sento); font-size: 13px; font-weight: 700; line-height: 1.45; }
/* 県を押せることを伝える1行。全国の画面だけに出し、390px幅でも1行に収める */
.hint { margin: -3px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.shell:not([data-level="nation"]) .hint { display: none; }
/* お風呂の画面では見出しと指標の切り替えを畳み、その分を地図に回す */
.shell[data-level="bath"] .headline,
.shell[data-level="bath"] .trend,
.shell[data-level="bath"] .metrics { display: none; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.metric {
  min-width: 0; min-height: 44px; padding: 4px 3px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.metric[aria-pressed="true"] { border-color: var(--picked); background: var(--picked-bg); color: var(--text); font-weight: 800; box-shadow: inset 0 0 0 1px var(--picked); }
.notice { margin: 0; padding: 6px 10px; border: 1px solid #6b5a2a; border-radius: 8px; background: #2a2412; color: #ffe3a8; font-size: 13px; line-height: 1.45; }

/* 「行った」の形はヘッダーとカードでそろえ、角丸は「Googleマップで開く」と同じ10pxにする */
.visit-pill {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--text);
  font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.visit-pill[aria-pressed="true"] { border-color: var(--picked); box-shadow: inset 0 0 0 1px var(--picked); }
.visit-pill--small { padding: 0 12px; color: var(--muted); font-size: 12px; }
.visit-mark::before { content: "＋"; }
.visit-pill[aria-pressed="true"] .visit-mark::before { content: "✓"; }

/* ---------------------------------------------------------------- 地図 */
.stage { position: relative; grid-area: stage; min-height: 0; overflow: hidden; background: var(--map-ground); }
.map { position: absolute; inset: 0; background: var(--map-ground); }
.map-status {
  position: absolute; z-index: 5; top: 50%; left: 50%; width: min(calc(100% - 32px), 22rem); margin: 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(17, 21, 28, .94); color: var(--muted);
  font-size: 14px; text-align: center; transform: translate(-50%, -50%);
}
/* 「近くを見る」。地図の上では右上の拡大・縮小の下に並ぶ44pxの四角（アイコンの下に「近く」）。
   点の上に重ならないよう、構図の計算でもこの列の下には点を置かない（lib/map.js の CONTROL_COLUMN） */
.near {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel-2); color: var(--text);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.near-icon { position: relative; display: block; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; }
.near-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); }
.near-short { display: none; }
.near-control .near {
  display: flex; flex-direction: column; gap: 4px; width: 44px; min-height: 0; height: 54px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; font-size: 11px; font-weight: 800; line-height: 1;
}
.near-control .near-short { display: block; }
.near-control .near-full { display: none; }
/* 画面の外にある沖縄県への案内。地図の左下の端に置く */
.okinawa {
  position: absolute; z-index: 4; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(28, 35, 48, .94); color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.shell[data-map="failed"] .okinawa, .shell:not([data-level="nation"]) .okinawa { display: none; }
.tip {
  position: absolute; z-index: 6; margin: 0; padding: 4px 8px; border-radius: 6px; background: rgba(8, 10, 14, .94);
  color: var(--text); font-size: 12px; white-space: nowrap; pointer-events: none; transform: translate(14px, -130%);
}
.here-marker { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #3d8bff; box-shadow: 0 0 0 6px rgba(61, 139, 255, .3); }
/* 上位3県の柱の根元の文字と、選んだお風呂の横の名前。どちらも押せない（下の地図の操作を邪魔しない） */
.top-label, .bath-label {
  padding: 2px 7px; border-radius: 6px; background: rgba(9, 12, 18, .86); color: #fff; font-size: 12px; font-weight: 800;
  line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.bath-label { max-width: 58vw; overflow: hidden; font-size: 13px; text-overflow: ellipsis; }

/* MapLibre の部品を暗い地図に合わせ、押す場所を44pxにする */
/* MapLibre の既定（:not(:empty) の薄い影）より強く当て、＋・−・「近く」・「i」を同じ1pxの縁（影なし）にそろえる */
.maplibregl-ctrl-group, .maplibregl-ctrl-group:not(:empty) { background: rgba(28, 35, 48, .94); box-shadow: 0 0 0 1px var(--line-strong); }
.maplibregl-ctrl-group button { width: 44px; height: 44px; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.1); }
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: rgba(12, 15, 20, .86); color: var(--muted); }
.maplibregl-ctrl-attrib a { color: #dfe6f0; }
/* 帰属表示の（i）も、＋・−・「近く」と同じ暗い角丸（影なし）の44pxのボタンにする */
.maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 44px; padding-right: 44px; border-radius: 4px; background: rgba(28, 35, 48, .94); box-shadow: 0 0 0 1px var(--line-strong);
}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
  width: 44px; height: 44px; border-radius: 4px; background-color: transparent; background-position: center; background-size: 22px;
  background-repeat: no-repeat; filter: invert(1) brightness(1.1);
}
.maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 6px 48px 6px 12px; background: rgba(12, 15, 20, .94); }
/* 開いた直後に広がる帰属表示が、左下の「沖縄県 ↙」（左端から約95px）に重ならないよう、右下の枠の幅を抑える。
   スマホでは2行に折り返す。PC・タブレットの幅では1行のまま */
.maplibregl-ctrl-bottom-right { max-width: calc(100% - 113px); }
.maplibregl-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ---------------------------------------------------------------- シート */
.sheet {
  grid-area: sheet;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  background: var(--panel);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .35);
}
.sheet-toggle {
  display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 28px; }
.sheet-body:focus { outline: none; }

.state-box { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--muted); }
.state-box p { margin: 0 0 8px; }
.state-box--error { border-color: #8a4336; background: #2a1715; color: #ffd9d1; }

.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.panel-title { margin: 0; font-size: 18px; line-height: 1.3; }
.panel-title:focus { outline: none; }
.panel-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sub-title { margin: 18px 0 6px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.lead { margin: 2px 0 2px; font-size: 16px; font-weight: 800; line-height: 1.45; }
.note { margin: 6px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.back {
  min-height: 44px; margin: 0 -8px 0 0; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.panel > .back { margin: -6px 0 4px -8px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-2); color: var(--text);
  font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.button--primary { border-color: var(--onsen); background: var(--onsen); color: #1b1206; }
.button--ghost { background: transparent; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: #d9e1ec; font-weight: 700; }

/* ---------------------------------------------------------------- 全国：順位の一覧（棒の表）と県の選択 */
.pref-select {
  min-height: 44px; max-width: 100%; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel-2); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.rank-list { display: grid; gap: 3px; margin: 8px 0 0; padding: 0; list-style: none; }
/* 行全体がボタン。右端の「›」と、ふだんから薄い面と縁を付けて押せる形に見せる。
   値の列は固定幅にして、どの行でも棒の右端と縮尺がそろうようにする */
.rank-row {
  display: grid; grid-template-columns: 1.9em 4.6em minmax(0, 1fr) 7em 0.7em; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text);
  font-size: 14px; text-align: left; cursor: pointer;
}
.rank-row:active { background: #313b4f; }
.rank-row .rank { color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.rank-row .name { font-weight: 700; white-space: nowrap; }
.rank-row .bar { height: 10px; overflow: hidden; border-radius: 5px; background: rgba(255, 255, 255, .07); }
.rank-row .bar > span { display: block; height: 100%; border-radius: 5px; }
.rank-row .value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rank-row .none { display: block; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.2; }
.rank-row .chevron { color: var(--muted); font-size: 18px; line-height: 1; text-align: right; }

/* ---------------------------------------------------------------- 県のカード */
.metric-compact { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.count-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 12px 0 6px; }
.count-title { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.4; }
.sort-note { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.type-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.type-chip {
  display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 13px; cursor: pointer;
}
.type-chip[aria-pressed="true"] { border-color: var(--picked); background: var(--picked-bg); font-weight: 800; box-shadow: inset 0 0 0 1px var(--picked); }
.type-chip:disabled { opacity: .45; cursor: not-allowed; }
.type-chip .count { color: var(--muted); font-variant-numeric: tabular-nums; }
/* 注記を押すと「種類の登録なし」のチップが選ばれる */
.note-link {
  display: block; width: 100%; min-height: 44px; margin: 0 0 4px; padding: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1.45; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.empty { margin: 4px 0 12px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.empty-text { margin: 0 0 4px; font-weight: 700; }

.bath-list { display: grid; gap: 2px; margin: 0 0 10px; padding: 0; list-style: none; }
.bath-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 0.7em; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text);
  font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer;
}
.bath-row .bath-name { overflow-wrap: anywhere; }
.bath-row .bath-meta { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.bath-row .went { margin-left: 6px; color: var(--sento); font-size: 12px; font-weight: 800; white-space: nowrap; }
.bath-row .chevron { color: var(--muted); font-size: 18px; line-height: 1; text-align: right; }
.bath-row:active { background: #313b4f; }

/* ---------------------------------------------------------------- お風呂のカード（施設名をその画面でいちばん大きくする） */
.bath-title { margin: 2px 0 4px; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.bath-title:focus { outline: none; }
.bath-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.type-line { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.facts { display: grid; gap: 2px; margin: 10px 0 4px; font-size: 14px; }
.facts dt { margin-top: 6px; color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.osm-line { margin: 2px 0; }
.caution { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--line-strong); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- 行った記録 */
.visited-list { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.visited-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.visited-item .bath-row { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------------------------------------------------------------- 出典（小見出し） */
.about { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-title { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.about-title:focus { outline: none; }
.about-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.about-list { display: grid; gap: 4px; margin: 0 0 10px; padding-left: 1.2em; color: var(--muted); font-size: 13px; line-height: 1.6; }
#share .share { min-width: 0; max-width: 100%; margin-top: 22px; }
.strip { grid-area: strip; z-index: 3; padding: 5px 16px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #0c0f14; color: var(--muted); font-size: 11px; line-height: 1.45; }
.strip p { margin: 0; }
.strip a { color: #d2dae6; }
.strip-more { margin-left: 4px; font-weight: 700; white-space: nowrap; }
/* スマホでは出典の帯を短い1行に縮め、「詳しく」から出典と注意の節へ移る。390px未満の幅では2行に折り返す
   （省略記号で切ると、375pxで末尾の「）」、360pxで「詳しく」が切れて、出典の一部と節への入口が読めなくなる） */
.strip-long { display: none; }
/* 出典のリンク（OpenStreetMap・OpenMapTiles）は地の太さのまま、「詳しく」だけ太くする。太いと1行に収まらない */
.strip-short .about-link { font-weight: 700; }

/* ---------------------------------------------------------------- スマホ：絞り込みは1行で横に送る（一覧の上の方を最初の画面に入れるため）。
   768px以上は折り返して、チップの文字を途中で切らない */
@media (max-width: 599px) {
  .type-filter { flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
  .type-filter::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------- 地図が出ないとき：順位の表を主にする */
.shell[data-map="failed"] { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.shell[data-map="failed"] .stage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; overflow: visible; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.shell[data-map="failed"] .map { display: none; }
.shell[data-map="failed"] .map-status { position: static; flex: 1 1 14rem; width: auto; transform: none; border-color: #6b5a2a; background: #2a2412; color: #ffe3a8; text-align: left; }
.shell[data-map="failed"] .near { position: static; }
.shell[data-map="failed"] .sheet { border-radius: 0; box-shadow: none; }
.shell[data-map="failed"] .sheet-toggle { display: none; }

/* ---------------------------------------------------------------- PC：左に地図、右に400pxのパネル */
@media (min-width: 1024px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "stage band" "stage sheet" "strip strip";
  }
  .band { gap: 9px; padding: 16px 20px 14px; border-left: 1px solid var(--line); }
  /* パネルは400pxしかないので、DAY番号は題名の上の小さな行に回す */
  .title { font-size: 18px; line-height: 1.25; }
  .title-day { display: block; margin: 0 0 3px; vertical-align: 0; }
  .headline { font-size: 21px; }
  .panel-title { font-size: 19px; }
  .bath-title { font-size: 26px; }
  .sheet { border-top: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .sheet-toggle { display: none; }
  .sheet-body { padding: 16px 20px 28px; }
  .strip { padding: 6px 20px; }
  .strip-long { display: block; }
  .strip-short { display: none; }
  .shell[data-map="failed"] {
    grid-template-columns: minmax(0, 760px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "band" "stage" "sheet" "strip";
    justify-content: center;
  }
  .shell[data-map="failed"] .band,
  .shell[data-map="failed"] .sheet { border-left: 0; }
}

/* ---------------------------------------------------------------- ホバーはマウスなど、ホバーできる端末だけ（タップの後に行が選ばれたように見えるのを防ぐ） */
@media (hover: hover) {
  .metric:hover, .back:hover, .button:hover, .visit-pill:hover, .okinawa:hover, .near-control .near:hover,
  .type-chip:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--panel-3); }
  .back:hover { color: var(--text); }
  .button--primary:hover { background: #ffc566; }
  .rank-row:hover { border-color: var(--line-strong); background: var(--panel-3); }
  .bath-row:hover { border-color: var(--line); background: var(--panel-2); }
  .metric[aria-pressed="true"]:hover { background: var(--picked-bg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}