/*
 * Map / Photos / Knowledge / Hypotheses 共通スタイル。
 *
 * Index(styles.css)と同じ紙・暖色・活版的なフィールドカタログの世界観を使う。
 * 色・書体・余白のトークンは styles.css と同じ値を持つ(別ファイルなのは、
 * Index の巨大な CSS を読み込まずに済ませ、Index 側を変更しないため)。
 * iPhone Safari 最優先: 下部ナビは safe-area を避け、地図は dvh で高さを取る。
 */
:root {
  color-scheme: light;
  --ink: #233022; --muted: #68715d; --subtle: #8b907f;
  --paper: #f3ead8; --paper-deep: #e4d2b4; --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.82);
  --shadow-soft: 0 12px 30px rgba(58, 45, 26, 0.14);
  --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;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, var(--jp-round), sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.82rem; --text-md: 0.94rem; --text-lg: 1.06rem; --text-xl: 1.35rem; --text-2xl: 1.9rem;
  --tap: 44px; --radius: 6px; --radius-lg: 10px;
  --nav-h: 62px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #342818; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font-family: var(--serif);
  background:
    linear-gradient(rgba(243, 234, 216, 0.88), rgba(231, 214, 183, 0.94)),
    repeating-linear-gradient(90deg, rgba(35, 48, 34, 0.035) 0 1px, transparent 1px 12px), #ead9bd;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--moss); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fx-shell {
  max-width: 960px; margin: 0 auto;
  padding: 16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
}
.fx-header { padding: 4px 0 12px; border-bottom: 3px double var(--pine); margin-bottom: 14px; }
.fx-brand { font-size: var(--text-xs); letter-spacing: 0.18em; color: var(--rust); font-family: var(--sans); font-weight: 700; margin: 0; }
.fx-title { margin: 2px 0 0; font-size: var(--text-2xl); letter-spacing: 0.04em; color: var(--pine); font-weight: 700; text-transform: uppercase; }
.fx-lead { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); font-family: var(--sans); }

/* 下部ナビ(親指で押せる・Safari 下部 UI を避ける) */
.fx-nav {
  position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 960px; bottom: 0; z-index: 1000;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--pine); border-top: 2px solid var(--moss);
  padding-bottom: env(safe-area-inset-bottom);
}
.fx-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-h); padding: 6px 2px; color: #cfd8bc; text-decoration: none;
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
}
.fx-nav a .glyph { font-size: 1.2rem; line-height: 1; }
.fx-nav a[aria-current="page"] { color: var(--cream); background: var(--moss); box-shadow: inset 0 3px 0 var(--rust); }

.fx-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); padding: 14px; margin-bottom: 14px;
}
.fx-card h2 { margin: 0 0 8px; font-size: var(--text-md); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); }
.fx-meta { color: var(--muted); font-size: var(--text-sm); font-family: var(--sans); margin: 2px 0; }
.fx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-stack > * + * { margin-top: 10px; }

.fx-btn {
  min-height: var(--tap); padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--moss);
  background: var(--moss); color: var(--cream); font-family: var(--sans); font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fx-btn.secondary { background: transparent; color: var(--moss); }
.fx-btn.rust { background: var(--rust); border-color: var(--rust); }
.fx-btn.danger { background: transparent; color: var(--rust); border-color: var(--rust); }
.fx-btn:disabled { opacity: 0.5; cursor: default; }
.fx-btn.small { min-height: 36px; padding: 4px 10px; font-size: var(--text-sm); }

.fx-field { display: block; margin-bottom: 12px; }
.fx-field > span { display: block; font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.fx-field input, .fx-field select, .fx-field textarea {
  width: 100%; min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); font-size: 16px; /* iOS Safari の自動ズームを避ける */
}
.fx-field textarea { min-height: 110px; resize: vertical; }

.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip {
  min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 700; cursor: pointer;
}
.fx-chip[aria-pressed="true"] { background: var(--moss); color: var(--cream); border-color: var(--moss); }

.fx-state { text-align: center; padding: 28px 12px; color: var(--muted); font-family: var(--sans); }
.fx-state strong { display: block; color: var(--pine); font-family: var(--serif); letter-spacing: 0.1em; margin-bottom: 4px; }
.fx-state[data-kind="error"] strong { color: var(--rust); }
.fx-banner { padding: 10px 12px; border-left: 4px solid var(--rust); background: rgba(155, 87, 51, 0.1); font-family: var(--sans); font-size: var(--text-sm); margin-bottom: 12px; }
.fx-banner[data-kind="ok"] { border-color: var(--moss); background: rgba(63, 90, 51, 0.1); }

.fx-list { list-style: none; margin: 0; padding: 0; }
.fx-list > li { border-top: 1px solid var(--line-soft); }
.fx-list > li:first-child { border-top: 0; }
.fx-item { display: block; padding: 12px 2px; text-decoration: none; color: inherit; }
.fx-item .t { font-size: var(--text-lg); font-weight: 700; color: var(--pine); overflow-wrap: anywhere; }
.fx-item .m { color: var(--muted); font-size: var(--text-sm); font-family: var(--sans); margin-top: 2px; overflow-wrap: anywhere; }
.fx-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-family: var(--sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; background: var(--navy); color: var(--cream); margin-right: 6px; }
.fx-badge[data-v="draft"] { background: var(--subtle); }
.fx-badge[data-v="active"], .fx-badge[data-v="supported"] { background: var(--moss); }
.fx-badge[data-v="retired"], .fx-badge[data-v="rejected"] { background: var(--rust); }
.fx-badge[data-v="testing"] { background: var(--river); }

.fx-evidence { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); }
.fx-evidence .what { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.fx-evidence[data-status="unavailable"], .fx-evidence[data-status="missing"] { opacity: 0.7; }

/* ダイアログ(トークン・Evidence 追加) */
.fx-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(25, 53, 31, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.fx-sheet {
  width: 100%; max-width: 560px; max-height: 86dvh; overflow: auto; background: var(--paper);
  border-radius: 14px 14px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 4px solid var(--moss);
}
.fx-sheet h2 { margin: 0 0 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); font-size: var(--text-lg); }

/* グリッド(Photos) */
.fx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .fx-grid { grid-template-columns: repeat(4, 1fr); } }
.fx-tile { display: block; text-decoration: none; color: inherit; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fx-tile .ph { aspect-ratio: 4 / 3; background: var(--paper-deep) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--subtle); font-family: var(--sans); font-size: var(--text-xs); }
.fx-tile .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-tile .cap { padding: 6px 8px; font-family: var(--sans); font-size: var(--text-xs); color: var(--muted); }
.fx-tile .cap strong { display: block; color: var(--pine); font-size: var(--text-sm); }
.fx-photo-big { width: 100%; max-height: 70dvh; object-fit: contain; background: #1b2418; border-radius: var(--radius); display: block; }

/* Map */
.fx-map-wrap { position: relative; }
#fxMap { width: 100%; height: 52dvh; min-height: 300px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-deep); z-index: 1; }
.fx-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid var(--cream); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); color: var(--cream); font-family: var(--sans); font-weight: 700; font-size: 12px; }
.fx-pin > span { transform: rotate(45deg); }
.fx-pin[data-selected="true"] { outline: 3px solid var(--rust); }
.fx-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--sans); font-size: var(--text-xs); color: var(--muted); }
.fx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

.fx-summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-family: var(--sans); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); }
details.fx-card[open] > .fx-summary { margin-bottom: 8px; }

/*
 * PC 表示(900px 以上)だけ、共通ナビを上部固定にする。
 * 900px は trip-detail.css の既存ブレークポイントに合わせた。モバイル(〜899px)の
 * 下部固定・safe-area-bottom・見た目は上のルールのまま変えない。
 * この規則は explorer.css を読む Map / Photos / Knowledge / Hypotheses だけに効き、
 * Index / Capture / Trip Detail には影響しない。
 */
@media (min-width: 900px) {
  html { scroll-padding-top: calc(var(--nav-h) + 8px); }
  .fx-nav {
    top: 0; bottom: auto; left: 0; right: 0; transform: none; max-width: none; width: 100%;
    grid-template-columns: repeat(5, minmax(0, 160px)); justify-content: center;
    border-top: 0; border-bottom: 2px solid var(--moss); padding-bottom: 0;
  }
  .fx-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--rust); }
  .fx-shell { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 32px; }
}