:root {
  --bg: #f7f6f3;
  --surface: #fffefb;
  --line: #e2ded4;
  --ink: #23211c;
  --ink-soft: #6b6659;
  --accent: #a8542a;
  --accent-soft: #f0e2d8;
  --good: #3f7d4e;
  --warn: #9a6b1e;
  --stop: #a33b32;
  --radius: 10px;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
  --sans: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17161a;
    --surface: #201f24;
    --line: #33313a;
    --ink: #ece9e3;
    --ink-soft: #9c968c;
    --accent: #e08b5c;
    --accent-soft: #3a2a20;
    --good: #7fbf8e;
    --warn: #d6a94f;
    --stop: #e08078;
  }
}
:root[data-theme="dark"] {
  --bg: #17161a;
  --surface: #201f24;
  --line: #33313a;
  --ink: #ece9e3;
  --ink-soft: #9c968c;
  --accent: #e08b5c;
  --accent-soft: #3a2a20;
  --good: #7fbf8e;
  --warn: #d6a94f;
  --stop: #e08078;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   アカウント（ADR-0019）
   **未ログインでも一覧はすべて見える。** ログインが要るのは書き込みだけなので、
   ヘッダーの隅に置いて、読む邪魔をしない強さにする。
   ------------------------------------------------------------------ */
.account { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.account-name { font-size: .78rem; color: var(--ink-soft); font-family: var(--mono); }

#signup { max-width: 380px; }
.signup-lead { font-size: .84rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.signup-lead strong { color: var(--ink); font-weight: 500; }
.signup-form { display: grid; gap: 10px; }
.signup-form label { display: grid; gap: 4px; font-size: .78rem; color: var(--ink-soft); }
.signup-form input {
  font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.signup-form input:focus-visible { outline: none; border-color: var(--accent); }
.signup-hint { font-size: .72rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
/* 失敗は赤で出すが、空のときは場所を取らない */
.signup-error { color: var(--stop); font-size: .78rem; margin: 0; }
.signup-error:empty { display: none; }
.signup-form button[type="submit"] { justify-self: start; }

.bar {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.bar h1 { font-size: 1.05rem; margin: 0; letter-spacing: .02em; }
.sub { margin: 0; color: var(--ink-soft); font-size: .8rem; font-family: var(--mono); }

.filters {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--chip-color, var(--accent));
  color: var(--chip-color, var(--accent));
  font-weight: 500;
}
/* 現在地は状態ではなく動作なので、種別チップとは見た目を分ける */
.chip.locate::before { content: '◎'; font-size: .9em; }
.chip.locate:hover { border-color: var(--accent); color: var(--accent); }
.chip:disabled { opacity: .5; cursor: default; }
.area { font-size: .8rem; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
select {
  font: inherit; font-size: .82rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
}

main { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; height: calc(100dvh - 118px); }
@media (max-width: 800px) {
  main { grid-template-columns: 1fr; grid-template-rows: 1fr 40vh; height: auto; }
}

.list { overflow-y: auto; border-right: 1px solid var(--line); }
.card {
  display: block; width: 100%; text-align: left;
  padding: 11px 18px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.card:hover, .card:focus-visible { background: var(--surface); outline: none; }
.card:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.card h3 {
  margin: 0 0 3px;
  font-size: .95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* 種別のアイコン。色は種別ごと、形は線画で統一 */
.icon-wrap { display: inline-flex; flex: none; align-items: center; }
.icon { display: block; }
/* 一覧と地図のどちらにカーソルがあっても、もう一方の対応が分かる */
.card.hover { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.meta {
  font-size: .76rem;
  color: var(--ink-soft);
  font-family: var(--mono);
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-left: 22px;   /* アイコンの分だけ本文と揃える */
}
.pair { display: inline-flex; align-items: baseline; gap: 4px; }
/* ラベルは値より弱く。読むのは数字のほうで、ラベルは何の数字かの手がかり */
.meta .k { font-family: var(--sans); font-size: .68rem; opacity: .65; }
.why { font-size: .76rem; color: var(--accent); margin-top: 3px; padding-left: 22px; }
.closed { color: var(--stop); }
/* 走れるが確実ではない。通行止めより弱く、しかし目に入る強さで */
.caution { color: var(--warn); }
.note.caution { color: var(--warn); }

/* ------------------------------------------------------------------
   キープ（ADR-0018）
   これは機能であると同時に MVP の計測手段なので、
   目立たせすぎず、しかし押した／押していないが一目で分かる強さにする。
   ------------------------------------------------------------------ */

/* カードは div + role=button。button の入れ子を避けるための構造 */
.card { position: relative; }
/* キープ済みは左に印。色だけでなく位置でも分かるようにする */
.card.kept { box-shadow: inset 3px 0 0 var(--good); }

.card h3 .keep { margin-left: auto; }
.keep {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 4px; margin: -4px;
  color: var(--ink-soft); cursor: pointer; border-radius: 6px;
  font: inherit; font-size: .78rem; line-height: 1;
}
.keep:hover { color: var(--accent); background: var(--accent-soft); }
.keep[aria-pressed="true"] { color: var(--good); }
.keep:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 絞り込みチップ。種別と役割が違うので、押下時の色を分ける */
.chip.kept-filter[aria-pressed="true"] {
  border-color: var(--good); color: var(--good); background: transparent;
}
.chip.export { color: var(--ink-soft); }
.chip.export:hover { border-color: var(--accent); color: var(--accent); }

/* 詳細のキープ欄 */
.keep-panel {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.keep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.keep-head .keep {
  border: 1px solid var(--line); padding: 6px 10px; margin: 0; border-radius: 6px;
}
.keep-head .keep[aria-pressed="true"] { border-color: var(--good); }
.keep-since { font-size: .74rem; color: var(--ink-soft); font-family: var(--mono); }
/* メモは追記なので、日付を添えて時系列に見せる（ADR-0016） */
.keep-note {
  margin: 8px 0 0; font-size: .82rem;
  display: flex; gap: 8px; align-items: baseline;
}
.keep-note .k { font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); flex: none; }
.keep-form { display: flex; gap: 6px; margin-top: 10px; }
.keep-form input {
  flex: 1; min-width: 0; font: inherit; font-size: .84rem;
  padding: 6px 9px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.keep-form input:focus-visible { outline: none; border-color: var(--accent); }
.keep-form button {
  font: inherit; font-size: .8rem; padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  cursor: pointer;
}
.keep-form button:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------
   書き込み（ADR-0015 / ADR-0016）
   **評価の要素を一切置かない。** 星もいいねも「参考になった」も無い。
   見出しに出すのは「いつの話か」で、投稿日ではない。
   ------------------------------------------------------------------ */
.contrib { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.contrib-title { margin: 0 0 10px; font-size: .88rem; font-weight: 500; }
.contrib-empty { font-size: .8rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.6; }

.contrib-list { display: grid; }
.contrib-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.contrib-item:first-child { padding-top: 0; }
/* 取り下げは薄くするが消さない。「書いた事実」は残る */
.contrib-item.retracted { opacity: .5; }
.contrib-meta {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: .72rem; color: var(--ink-soft); font-family: var(--mono);
}
/* 読む側にとって意味があるのは観察した日なので、そこだけ強くする */
.contrib-when { color: var(--ink); }
.contrib-who { color: var(--ink-soft); }
.contrib-kind {
  font-family: var(--sans); color: var(--good);
  border: 1px solid var(--good); border-radius: 999px; padding: 0 6px; font-size: .68rem;
}
.contrib-body { margin: 5px 0 0; font-size: .86rem; line-height: 1.65; white-space: pre-wrap; }
.contrib-suggest { margin: 5px 0 0; font-size: .76rem; color: var(--ink-soft); }
.contrib-retract {
  margin-top: 6px; font: inherit; font-size: .72rem; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.contrib-retract:hover { border-color: var(--stop); color: var(--stop); }

.contrib-form { display: grid; gap: 8px; margin-top: 14px; }
.contrib-form textarea {
  font: inherit; font-size: .86rem; line-height: 1.6; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink);
}
.contrib-form textarea:focus-visible { outline: none; border-color: var(--accent); }
.contrib-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.contrib-row label {
  display: grid; gap: 3px; font-size: .72rem; color: var(--ink-soft);
}
.contrib-row input[type="date"], .contrib-row select {
  font: inherit; font-size: .8rem; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.contrib-check { flex-direction: row; align-items: center; gap: 5px; }
.contrib-error { color: var(--stop); font-size: .78rem; margin: 0; }
.contrib-error:empty { display: none; }
.contrib-form button[type="submit"] { justify-self: start; }

#map { height: 100%; min-height: 300px; }
@media (max-width: 800px) { #map { height: 40vh; } }

dialog {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  max-width: 34rem; width: calc(100% - 32px); padding: 20px;
}
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin: 0 0 4px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .85rem; margin: 14px 0; }
dialog dt { color: var(--ink-soft); font-size: .78rem; }
dialog dd { margin: 0; font-family: var(--mono); }
.nav-links { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.nav-links a {
  border: 1px solid var(--accent); color: var(--accent); text-decoration: none;
  border-radius: 6px; padding: 6px 14px; font-size: .84rem;
}
.nav-links a:hover { background: var(--accent-soft); }
.close { float: right; border: 0; background: transparent; color: var(--ink-soft); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.note { font-size: .78rem; color: var(--warn); margin: 10px 0 0; }

footer {
  padding: 10px 18px; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--ink-soft); background: var(--surface);
}
footer p { margin: 2px 0; }

/* ------------------------------------------------------------------
   地図（Leaflet）のダーク対応

   UI 側だけトークンで色を決めていて、地図には何も指定していなかった。
   その結果ダークモードでも**地図・ズームボタン・ツールチップだけが白いまま**で、
   画面の右半分が明るいままになっていた。
   ------------------------------------------------------------------ */

.leaflet-container {
  /* タイルが来るまでの下地。既定の薄いグレーだと読み込み中に白く光る */
  background: var(--bg);
  font-family: var(--sans);
}

.leaflet-control-zoom a,
.leaflet-control-attribution {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.leaflet-control-zoom a:hover { background: var(--accent-soft); color: var(--accent); }
.leaflet-control-attribution a { color: var(--ink-soft); }
.leaflet-bar { border-color: var(--line); }

.leaflet-tooltip {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 4px rgb(0 0 0 / .25);
  font-size: .8rem;
}
.leaflet-tooltip-top::before { border-top-color: var(--line); }

/*
   タイル自体のダーク化。

   OSM の標準タイルは常に明るいので、UI だけ暗くしても地図が白いまま浮く。
   ダーク用のタイル配信（CARTO Dark Matter など）に替える手もあるが、
   外部依存が1つ増えるので、まずは反転で合わせる。
   `hue-rotate(180deg)` は反転で狂った色相を戻すための定番の組み合わせ
   （これが無いと緑の森が紫になる）。

   マーカーは overlay-pane にあるので、この filter の影響を受けない。
*/
:root:not([data-theme="light"]) .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.85);
}
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.85);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .leaflet-tile-pane { filter: none; }
}

/* 関連情報の検索リンク。ナビへの受け渡しより一段弱く見せる */
.nav-links.secondary { margin-top: 8px; }
.nav-links.secondary a {
  border-color: var(--line);
  color: var(--ink-soft);
}
.nav-links.secondary a:hover { background: var(--bg); color: var(--ink); }

/* 一覧の続きを読み込む */
.more {
  display: block; width: 100%;
  padding: 14px 18px;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.more:hover { background: var(--surface); color: var(--accent); }