/*
 * Index / Home — Retro Fishing / Outdoor Heritage（Index V2）
 *
 * 役割は「数字を見るダッシュボード」ではなく、次の Capture へ入り、
 * 過去の探索を振り返り、蓄積した知識へ触れるホーム。
 * 情報の優先順位は Capture → Recent Trips → Current Season →
 * Toolbox → Search / Filters。
 *
 * Trip Detail(trip-detail.css) / Capture(capture.css) とは意図的に別の
 * 世界観にしてある。ここは紙・暖色・活版的なフィールドカタログ。
 */

:root {
  color-scheme: light;

  /* ── 色 ── */
  --ink: #233022;
  --muted: #68715d;
  --subtle: #8b907f;
  --paper: #f3ead8;
  --paper-deep: #e4d2b4;
  --canvas: #d7bd88;
  --moss: #3f5a33;
  --pine: #19351f;
  --fern: #6f8644;
  --river: #5f8d8b;
  --rust: #9b5733;
  --navy: #2b3a4a;
  --cream: #fff8e8;
  --line: rgba(35, 48, 34, 0.22);
  --line-soft: rgba(35, 48, 34, 0.12);
  --card: rgba(255, 250, 238, 0.72);
  --shadow: 0 18px 46px rgba(44, 35, 20, 0.22);
  --shadow-soft: 0 12px 30px rgba(58, 45, 26, 0.14);

  /*
   * ── 書体 ──
   *
   * 英字と日本語で役割を分ける。フォントスタックはグリフ単位で後ろへ
   * 落ちるので、**英字用を先に、日本語用を後ろに**書けば、英字は
   * Retro Fishing の世界観のまま、日本語だけ丸ゴシックで描画される。
   *
   * 日本語に明朝系を入れない。V1 は --serif の後半が Hiragino Mincho /
   * Yu Mincho だったため、本文の日本語だけ明朝で出ていた。
   * 外部 Web フォントは追加しない（すべて OS 同梱のもの）。
   */
  --jp-round: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
    "ヒラギノ丸ゴ ProN W4", "M PLUS Rounded 1c", "Yu Gothic Medium",
    "Yu Gothic", YuGothic, Meiryo;

  /* 見出し・ブランドの英字はセリフのまま。日本語は丸ゴシックへ落とす。 */
  --serif: Georgia, "Times New Roman", var(--jp-round), sans-serif;

  /* UI ラベルの英字はサンセリフのまま。日本語は同じく丸ゴシックへ。 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    var(--jp-round), sans-serif;

  /*
   * 指標として強調する数字だけに使う。日付や本文中の数字には使わない
   * （Impact は字幅が詰まっており、長い文中では読みにくいため）。
   */
  --numeral: Impact, Haettenschweiler, "Franklin Gothic Bold",
    "Arial Narrow Bold", sans-serif;

  /*
   * ── タイポグラフィスケール ──
   * V1 はモバイルで 0.48rem(≒7.7px) まで縮めて詰め込んでいた。
   * 読める下限を 0.75rem(12px) と決め、それより小さい段を作らない。
   */
  --text-xs: 0.75rem;
  --text-sm: 0.82rem;
  --text-md: 0.94rem;
  --text-lg: 1.06rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.9rem;
  --text-3xl: 2.6rem;

  /* ── 余白スケール ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 40px;

  /* ── 操作要素の最小寸法（タップ領域） ── */
  --tap: 44px;

  --radius: 6px;
  --radius-lg: 10px;
}

* {
  box-sizing: border-box;
}

/*
 * hidden 属性を常に効かせる。この画面は空状態やフッターの出し分けを
 * hidden で行っており、display を持つクラス（.empty-state の grid 等）が
 * 当たると UA 標準の display:none が負けてしまうため。
 */
[hidden] {
  display: none !important;
}

html {
  background: #342818;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(243, 234, 216, 0.88), rgba(231, 214, 183, 0.94)),
    radial-gradient(circle at 12% 8%, rgba(255, 248, 232, 0.65), transparent 18rem),
    repeating-linear-gradient(90deg, rgba(35, 48, 34, 0.035) 0 1px, transparent 1px 12px),
    #ead9bd;
  font-family: var(--serif);
}

/* 紙のムラ。装飾のみで、操作を邪魔しない。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(63, 90, 51, 0.10), transparent 18rem),
    radial-gradient(circle at 82% 12%, rgba(155, 87, 51, 0.10), transparent 20rem),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: 0.56;
}

button,
input,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* 視覚的に隠すが読み上げには残す。select の用途をラベルで補うために使う。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: var(--space-5);
}

/* ── Header ─────────────────────────────────────────────── */

.app-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 3px double var(--pine);
}

.brand h1 {
  margin: 0;
  color: var(--pine);
  font-size: var(--text-3xl);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
}

.header-note {
  margin: var(--space-2) 0 0;
  color: var(--rust);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/*
 * 同期状態。V2 では存在感を弱める（判定ロジックは app.js / api.js のまま）。
 * data-state は app.js が付ける。
 */
.sync-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.5);
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--subtle);
}

.sync-status[data-state="synced"] .status-dot {
  background: var(--fern);
}

.sync-status[data-state="checking"] .status-dot {
  background: var(--river);
}

/* API が取れずローカルを見ている状態。警告色にはしない（表示は成立している）。 */
.sync-status[data-state="local"] {
  color: var(--rust);
}

.sync-status[data-state="local"] .status-dot {
  background: var(--rust);
}

/* ── Command Deck（Hero + Capture CTA） ─────────────────── */

/*
 * 上部エリアを1つのまとまりとして扱う。Hero だけが大きな1段になるのを避け、
 * 右列へ Capture CTA・Current Season・Toolbox を積んで密度を上げる。
 * DOM 順は Hero → CTA → Current Season → Toolbox のまま。
 */
.command-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.deck-side {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

/* 右列の中では余白を詰める。段組みの外側で付く余白は打ち消す。 */
.deck-side .panel {
  margin-top: 0;
  padding: var(--space-3) var(--space-4);
}

/*
 * Hero。枠は aspect-ratio で先に確保するので、画像の読み込み前後で
 * レイアウトが動かない。素材は縦・横・正方形が混在するため cover で埋め、
 * 切り取り位置は画像ごとの object-position（app.js が --pos で渡す）で決める。
 */
.hero {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  box-shadow: var(--shadow-soft);
}

.hero-track {
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* 額縁。ロゴが焼き込まれた素材なので、内側の罫線は控えめにする。 */
.hero::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(255, 248, 232, 0.42);
  border-radius: var(--radius);
}

.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: var(--tap);
  transform: translateY(-50%);
  border: 1px solid rgba(255, 248, 232, 0.5);
  border-radius: 999px;
  background: rgba(25, 53, 31, 0.42);
  color: var(--cream);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.hero-nav.prev { left: var(--space-3); }
.hero-nav.next { right: var(--space-3); }

.hero-nav:hover {
  background: rgba(25, 53, 31, 0.68);
}

.hero-dots {
  position: absolute;
  right: 0;
  bottom: var(--space-3);
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 248, 232, 0.75);
  border-radius: 999px;
  background: rgba(25, 53, 31, 0.35);
  cursor: pointer;
}

.hero-dot.is-active {
  background: var(--cream);
}

/* 画像が1枚しか残らなかった場合、操作要素は意味を持たない。 */
.hero[data-single="true"] .hero-nav,
.hero[data-single="true"] .hero-dots {
  display: none;
}

/* ── Capture CTA（Capture 画面のターミナル風テイスト） ──── */

/*
 * ここだけ Index の紙の世界観から外し、Capture 画面（capture.css）の作法へ
 * 寄せる。「Capture への入口だけ別世界観で置く」という意図的な対比で、
 * 角丸を使わず、境界は太い実線、影はぼかさない（ドット絵の平面感）。
 * ラベルは等幅・大文字・レタースペースでピクセル寄りに。
 *
 * ただし浮きすぎないよう、配置と外寸は Index のグリッドに揃え、
 * 色は Capture 画面の深緑（--olive 系）を使って暖色の紙面と喧嘩させない。
 */
:root {
  /* Capture 画面から持ってくる色。ここでしか使わない。 */
  --terminal-bg: #0d120e;
  --terminal-ink: #1a2016;
  --terminal-olive: #3f5027;
  --terminal-bright: #6f8a3c;
  --terminal-cream: #f2ecd8;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
}

.capture-cta {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  min-height: var(--tap);
  padding: var(--space-4);
  border: 3px solid var(--terminal-ink);
  border-radius: 0;
  background: var(--terminal-bg);
  color: var(--terminal-cream);
  box-shadow: 4px 4px 0 rgba(26, 32, 22, 0.42);
}

/* 走査線。CRT の質感を薄く乗せるだけで、文字の可読性は落とさない。 */
.capture-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(242, 236, 216, 0.05) 0 1px,
    transparent 1px 3px
  );
}

.capture-cta:hover {
  background: #121a13;
  box-shadow: 2px 2px 0 rgba(26, 32, 22, 0.42);
}

.cta-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--terminal-bright);
  color: var(--terminal-bright);
  font-size: var(--text-xs);
  line-height: 1;
}

.cta-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.cta-note {
  display: block;
  margin-top: var(--space-1);
  color: rgba(242, 236, 216, 0.6);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
}

.cta-arrow {
  position: relative;
  color: var(--terminal-bright);
  font-size: var(--text-sm);
}

/*
 * 進行中の釣行がある状態。Capture 画面の警告色（--alert 相当）へ寄せ、
 * 「記録中」であることを一目で分かるようにする。
 */
.capture-cta[data-mode="resume"] {
  border-color: #7a2f1c;
  background: #1c1109;
}

.capture-cta[data-mode="resume"]:hover {
  background: #26170c;
}

.capture-cta[data-mode="resume"] .cta-mark,
.capture-cta[data-mode="resume"] .cta-arrow {
  border-color: #c9482f;
  color: #e0764f;
}

/* ── Panel 共通 ─────────────────────────────────────────── */

.panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255, 248, 232, 0.84), rgba(246, 235, 213, 0.88)),
    repeating-linear-gradient(0deg, rgba(35, 48, 34, 0.04) 0 1px, transparent 1px 5px);
  box-shadow: var(--shadow-soft);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}

.section-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--pine);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-head .count {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--numeral);
  font-size: var(--text-md);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.section-note {
  color: var(--subtle);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ── Select 共通 ────────────────────────────────────────── */

.year-picker select,
.view-picker select,
.filter-group select {
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 252, 242, 0.9);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.year-picker select:focus-visible,
.view-picker select:focus-visible,
.filter-group select:focus-visible,
.search-block input:focus-visible,
.detail-button:focus-visible,
.ghost-button:focus-visible,
.hero-nav:focus-visible,
.hero-dot:focus-visible,
.capture-cta:focus-visible,
.empty-action:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
}

/* ── Stats（Current Season / Toolbox） ──────────────────── */

/*
 * 帯状に広げず、ラベルと数値を1行に収めた密度の高い表にする。
 * Hero の右の細い列でも読めることを優先した形。
 *
 * auto-fit + minmax にしてあるので、1枠が読める幅を保てなくなった時点で
 * 自動的に1列へ積み替わる。KNOWLEDGE / HYPOTHESES のような長いラベルを
 * 縮小したり省略したりせずに収めるための仕掛け。
 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card);
}

/* 指標として強調する数字。字幅が詰まるぶん、少し大きめに置く。 */
.stat strong {
  order: 2;
  flex: none;
  font-family: var(--numeral);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.stat span {
  min-width: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

/*
 * Toolbox の数値は Current Season と役割が違う（年に連動しない蓄積量）。
 * 一覧画面がまだ無いため、矢印もリンクも押下表現も付けない。
 */
.toolbox-panel .stat strong {
  color: var(--moss);
}

/* ── Search ─────────────────────────────────────────────── */

.search-block {
  margin-top: var(--space-4);
}

.search-title {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.search-block input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 252, 242, 0.9);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-md);
}

.search-block input::placeholder {
  color: var(--subtle);
}

/* ── Filters（折りたたみ） ──────────────────────────────── */

.filters {
  margin-top: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 250, 238, 0.5);
}

.filters summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  color: var(--pine);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.filters summary::-webkit-details-marker {
  display: none;
}

.filters summary::after {
  content: "▾";
  font-size: var(--text-sm);
}

.filters[open] summary::after {
  content: "▴";
}

.filter-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: end;
  padding: 0 var(--space-4) var(--space-4);
}

.filter-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.filter-group-title {
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.filter-group label,
.filter-group select {
  display: block;
  width: 100%;
}

/*
 * Area は将来 都道府県 → 水系 → エリア の3段になる。段が増えたら
 * ここへ select を足すだけで並ぶようにしてある（現在は1段）。
 */
.area-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.ghost-button {
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 248, 232, 0.8);
  color: var(--pine);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ghost-button:hover {
  background: var(--cream);
}

/* ── Trip カード ────────────────────────────────────────── */

.trip-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.trip-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 8px 22px rgba(58, 45, 26, 0.1);
}

.card-photo {
  aspect-ratio: 16 / 9;
  background-image: var(--photo);
  background-position: center;
  background-size: cover;
  filter: sepia(0.16) saturate(0.85);
}

.card-body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.card-date {
  margin: 0;
  color: #9b3a2d;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #1f3f5b;
  overflow-wrap: anywhere;
}

.card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 700;
}

.fact-icon {
  color: var(--moss);
  font-size: var(--text-md);
}

.card-catch {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
}

/* 釣果数も指標。日付（.card-date）は本文寄りなので Impact にしない。 */
.card-catch strong {
  font-family: var(--numeral);
  font-size: var(--text-xl);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.card-catch span {
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-action {
  margin-top: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.detail-button {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 248, 232, 0.7);
  color: var(--pine);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.detail-button:hover {
  background: var(--cream);
}

/*
 * List 表示。多数の Trip を素早く探すための高密度表示で、
 * Grid のカードと同じマークアップを CSS だけで組み替える。
 */
.trip-grid[data-view="list"] {
  gap: 0;
}

.trip-grid[data-view="list"] .trip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.trip-grid[data-view="list"] .trip-card:last-child {
  border-bottom: 0;
}

/* 写真は一覧の密度を下げるので List では出さない。 */
.trip-grid[data-view="list"] .card-photo {
  display: none;
}

.trip-grid[data-view="list"] .card-body {
  gap: var(--space-1);
  padding: var(--space-3) 0;
}

.trip-grid[data-view="list"] .card-title {
  font-size: var(--text-md);
}

.trip-grid[data-view="list"] .card-facts {
  gap: var(--space-1) var(--space-3);
}

.trip-grid[data-view="list"] .fact {
  font-size: var(--text-xs);
  color: var(--muted);
}

.trip-grid[data-view="list"] .card-catch {
  padding: 0;
}

.trip-grid[data-view="list"] .card-action {
  margin-top: 0;
  padding: 0;
}

.trip-grid[data-view="list"] .detail-button {
  width: auto;
  padding: 0 var(--space-3);
}

/* ── Empty State ────────────────────────────────────────── */

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 248, 232, 0.5);
  text-align: center;
}

.empty-title {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.empty-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border: 1px solid var(--pine);
  border-radius: var(--radius);
  background: var(--pine);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.empty-action:hover {
  background: #14291a;
}

/* 絞り込み0件のときは、Capture へ誘わず解除へ導く。 */
.empty-state[data-kind="no-match"] .empty-action {
  border-color: var(--line);
  background: rgba(255, 248, 232, 0.8);
  color: var(--pine);
}

.empty-state[data-kind="no-match"] .empty-action:hover {
  background: var(--cream);
}

/* ── Responsive ─────────────────────────────────────────── */

/*
 * ブレークポイントは min-width の昇順に統一する。V1 は max-width と
 * min-width が混在し、680〜760px で両方が効く帯があった。
 * 既定はモバイル1カラムで、広い画面へ向かって積み上げる。
 */

@media (min-width: 600px) {
  .trip-grid[data-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .app-shell {
    padding: var(--space-6);
  }

  /*
   * Hero を左、右列に CTA → Current Season → Toolbox を積む。
   * Hero の高さは aspect-ratio ではなく右列に合わせる。右列は文字だけで
   * 高さが決まるため、画像の読み込みでレイアウトは動かない。
   */
  .command-deck {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
    align-items: stretch;
  }

  .hero {
    aspect-ratio: auto;
    height: 100%;
    min-height: 240px;
  }
}

@media (min-width: 1120px) {
  .trip-grid[data-view="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand h1 {
    letter-spacing: 0.02em;
  }
}

@media (min-width: 1360px) {
  .trip-grid[data-view="grid"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
 * 狭い画面。**縮めて押し込むのではなく積み直す。**
 * font-size はスケール下限(--text-xs = 12px)より小さくしない。
 */
@media (max-width: 599px) {
  .app-shell {
    padding: var(--space-3);
  }

  .app-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .brand h1 {
    font-size: var(--text-xl);
  }

  .header-note {
    margin-top: var(--space-1);
    letter-spacing: 0.16em;
  }

  /* Hero は 3:2 にして縦の占有を減らす（375px で 235px ほど）。 */
  .hero {
    aspect-ratio: 3 / 2;
  }

  /* 縦位置は画像ごとに変える。狭い枠では被写体を上へ寄せる。 */
  .hero-slide img {
    object-position: var(--pos-mobile, var(--pos, 50% 50%));
  }

  /*
   * 統計パネルを詰める。Hero と Capture CTA のあとに Recent Explorations が
   * 続くのがこの画面の狙いなので、Current Season と Toolbox が縦を
   * 使いすぎると一覧が遠ざかる。文字サイズは縮めず、余白だけを削る。
   */
  .command-deck {
    gap: var(--space-3);
  }

  .panel {
    margin-top: var(--space-3);
    padding: var(--space-3);
  }

  .deck-side {
    gap: var(--space-3);
  }

  .stat-row {
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  /*
   * 狭い幅では stat-row が1列へ積み替わる（KNOWLEDGE / HYPOTHESES を
   * 縮小・省略せずに収めるため）。行数が増えるぶん、1行の高さを詰めて
   * 縦の消費を戻す。
   */
  .stat {
    padding: 5px var(--space-2);
  }

  .stat strong {
    font-size: var(--text-lg);
  }

  .capture-cta {
    padding: var(--space-3);
  }

  .cta-label {
    font-size: var(--text-sm);
  }

  .search-block,
  .trip-grid {
    margin-top: var(--space-3);
  }

  .card-body {
    gap: var(--space-1);
    padding: var(--space-3);
  }

  .card-action {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .card-title {
    font-size: var(--text-md);
  }

  .trip-grid[data-view="list"] .trip-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* List のボタンは行内で場所を取りすぎるため、右下へ回す。 */
  .trip-grid[data-view="list"] .card-action {
    grid-column: 2;
  }
}

/*
 * 動きを減らす設定。自動切替は app.js 側で止め、ここでは
 * クロスフェードそのものを無効にする。
 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}