/* ハイサイマップのスタイル。**Bootstrap 5.3 の後に読み込まれる**(2026-08-14 方針転換)。
 *
 * 部品(ボタン/フォーム/バッジ/カード/テーブル/アラート/モーダル)は Bootstrap に任せ、
 * ここには「Bootstrapに相当物がないもの」と「色・書体の上書き」だけを置く。
 *   - primary だけ CSS変数API(--bs-btn-*)でサイトの藍に差し替える
 *   - success/warning/danger は Bootstrap の既定(見慣れた色)をそのまま使う
 *   - 自前の .btn / .btn-quiet / .btn-outline は同名衝突のため撤去済み。復活させない
 *   - 入力欄は .form-control に任せる(要素セレクタで書くと詳細度で勝ってしまい台無しになる)
 *
 * 自前を維持する領域 = サービスの identity と操作性の中核:
 *   地図シェル(.map-shell) / パネルとボトムシート(.panel) / 書き込み一覧(.post) /
 *   アンカー(.anchor) / ヘッダとハンバーガー / 「藍と生成り」の色と書体(tokens.css)
 *   theme: 生成りの紙 paper oklch(97.5% .008 85) · 藍 accent oklch(45% .11 258)
 *
 * states: default · hover · focus-visible · active · disabled · loading · error(フォーム)
 *   — success = 書き込み即時反映(silent)
 */
@import url("tokens.css");

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-paper);
}

/* ── ヘッダ(最小) ─────────────────────────── */
.site-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-bottom: var(--rule);
  background: var(--color-paper);
}
.site-head .wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.04em;   /* 明朝の見出しに新聞的な字間 */
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap; /* 「ハイサイ/マップ。」の2行折れ防止 */
}
.site-head .wordmark .dot { color: var(--color-accent); }
.site-head .tagline {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 地図画面 ─────────────────────────────── */
.map-shell {
  position: relative;
  height: 100vh;
  height: 100dvh;      /* dvh 非対応なら直前の vh が残る(宣言ごと無視されるため) */
  display: flex;
  flex-direction: column;
}
#map { flex: 1; min-height: 0; }
.map-hint {
  position: absolute;
  top: calc(var(--space-xs) + 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  font-size: var(--text-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  opacity: 0.88;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.map-hint.is-hidden { opacity: 0; }

/* ── パネル(デスクトップ=右 / モバイル=ボトムシート) ── */
.panel {
  position: absolute;
  z-index: 700;
  background: var(--color-paper);
  border-left: var(--rule);
  display: flex;
  flex-direction: column;
  inset: 0 0 0 auto;
  width: var(--panel-w);
  max-width: 92vw;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  visibility: hidden;
  /* 左端のつまみの分を確保する。絶対配置のつまみはpadding boxの端に貼りつくので、
     ここで空けておかないと見出しやリンクがつまみの下に隠れる */
  padding-left: 10px;
}
.panel.is-open { transform: translateX(0); visibility: visible; }

@media (max-width: 640px) {
  .panel {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    height: auto;        /* 中身に合わせる(作成フォームは低く、会話は高く) */
    max-height: 62vh;
    max-height: 62dvh;   /* 上限だけ画面比で縛る(超えたらpanel-body内スクロール) */
    border-left: none;
    border-top: var(--rule);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transform: translateY(100%);
    padding-left: 0;
    padding-top: 20px;   /* つまみは上端に移るので、確保する向きも変える */
    /* ホームバー(iPhone)やジェスチャ領域の分だけ下端を空ける。
       ここが0だと最後の書き込みと送信ボタンが指の届かない帯に入る */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .panel.is-open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: opacity var(--dur-fast) var(--ease-out); }
  .panel:not(.is-open) { opacity: 0; }
  .panel.is-open { transform: none; opacity: 1; }
}

/* ── サイズ変更のつまみ ─────────────────────
   「掴める」ことが見た目で分かる必要があるので、握り線(grip)を必ず出す。
   PC=左端を横に、スマホ=上端を縦に。touch-action:noneでドラッグ中に画面がスクロールしない */
.panel-resizer {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  background: var(--color-paper-2);
}
.panel-resizer .grip { background: var(--color-line); border-radius: 999px; }
.panel-resizer:hover { background: var(--color-accent-wash); }
.panel-resizer:hover .grip { background: var(--color-accent); }
.panel-resizer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.panel.is-resizing { transition: none; } /* 追従が鈍るのでドラッグ中はアニメーションを切る */

/* PC: 左端の縦棒 */
.panel-resizer {
  inset: 0 auto 0 0;
  width: 10px;
  cursor: col-resize;
  border-right: var(--rule);
}
.panel-resizer .grip { width: 2px; height: 28px; }

@media (max-width: 640px) {
  /* スマホ: 上端の横棒(ボトムシートの定番の見た目) */
  .panel-resizer {
    inset: 0 0 auto 0;
    width: auto;
    height: 20px;
    cursor: row-resize;
    border-right: none;
    border-bottom: var(--rule);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .panel-resizer .grip { width: 36px; height: 4px; }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule);
}
.panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.4;
  flex: 1;
  overflow-wrap: anywhere;
  min-width: 0;
}
.panel-head .permalink {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
}
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-sm) var(--space-md); }
.panel-foot { border-top: var(--rule); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); }

/* ── 書き込み一覧 ─────────────────────────── */
.post { padding: var(--space-xs) 0; border-bottom: 1px dotted var(--color-line); }
.post-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.post-meta .no { color: var(--color-accent-deep); font-family: var(--font-mono); }
.post-meta .daily-id { font-family: var(--font-mono); }
.post-body { margin: var(--space-2xs) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* アンカー(>>1)。本文中で拾えるが主張しすぎない太さ */
.anchor { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid var(--color-accent-wash); }
.anchor:hover { border-bottom-color: var(--color-accent); }
/* 飛び先を一瞬だけ光らせる(どこへ飛んだか分からないと迷子になる) */
.post.is-flash { background: var(--color-accent-wash); transition: background var(--dur-med) var(--ease-out); }
.post:target { background: var(--color-accent-wash); }

/* 非公開の書き込みは番号だけ残す(番号を詰めるとアンカーがずれる)。
   意味は持たせず、席が空いていることだけ分かればよい */
.post-hidden { opacity: 0.55; }
.post-hidden .hidden-mark { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
.posts-empty { color: var(--color-ink-2); font-size: var(--text-sm); padding: var(--space-md) 0; }

/* ── フォーム ─────────────────────────────── */
.form-row { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.form-row label { font-size: var(--text-xs); color: var(--color-ink-2); }
/* 入力欄はBootstrapの .form-control に任せる(要素セレクタで書くと詳細度で勝ってしまい、
   Bootstrapの整った見た目を自分で殺すことになる)。フォーカスリングだけ揃える */
.form-control:focus, .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem var(--color-accent-wash);
}
.btn:focus-visible, a:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
.form-error { color: var(--color-error); font-size: var(--text-sm); margin: var(--space-2xs) 0 0; }
.policy-note { font-size: var(--text-xs); color: var(--color-ink-2); margin: var(--space-2xs) 0; }
.post-as { font-size: var(--text-sm); color: var(--color-ink-2); flex-direction: row; align-items: center; }

/* 畳んだ状態の書き込みトリガー(閲覧者ファースト。タップでフォーム展開) */
.comment-trigger {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-align: left;
  width: 100%;
  background: var(--color-paper);
  border: var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
}
.comment-trigger:hover { background: var(--color-paper-3); }
.comment-trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* Bootstrapの部品体系に乗る(2026-08-13)。primaryだけサイトの藍に差し替える。
   自前の .btn/.btn-quiet/.btn-outline はBootstrapと同名で衝突するため撤去した */
.btn-primary {
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-deep);
  --bs-btn-hover-border-color: var(--color-accent-deep);
  --bs-btn-active-bg: var(--color-accent-deep);
  --bs-btn-active-border-color: var(--color-accent-deep);
  --bs-btn-disabled-bg: var(--color-paper-3);
  --bs-btn-disabled-border-color: var(--color-paper-3);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 700;
}
.btn[data-state="loading"]::after { content: "…"; }

/* 取り消し(やめる・閉じる): グレーの罫・白地・墨の文字。
   btn-light は罫が地と同色で輪郭が消え、btn-outline-secondary は文字までグレーで弱い。
   Bootstrapの変数APIで上書きしているので、サイズ(btn-sm)や状態は本家の挙動をそのまま使える */
.btn-cancel {
  --bs-btn-color: var(--color-ink);
  --bs-btn-bg: var(--color-paper);
  --bs-btn-border-color: var(--color-line);
  --bs-btn-hover-color: var(--color-ink);
  --bs-btn-hover-bg: var(--color-paper-2);
  --bs-btn-hover-border-color: var(--color-ink-2);
  --bs-btn-active-color: var(--color-ink);
  --bs-btn-active-bg: var(--color-paper-3);
  --bs-btn-active-border-color: var(--color-ink-2);
}

/* 「︙」= その場の操作をしまっておく入口。通報を常時見せると気軽に押されすぎる */
.more-btn {
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  background: none;
  border: none;
  color: var(--color-ink-2);
  cursor: pointer;
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-sm);
}
.more-btn:hover { color: var(--color-ink); background: var(--color-paper-2); }

/* 通報UI(public/js/report.js が組み立てる) */
/* 見出し(h1/h2)の中の「︙」を差し替えるため、inline-flexだと見出しの残り幅しか使えず
   狭いパネルで折り返す。1行分の幅を確保して横並びを保つ(狭すぎる端末では折り返しに逃げる) */
.report-menu {
  display: flex;
  width: 100%;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-2xs);
}

/* 通報の種類は信号色の「色地・白抜き」で緊急度を示す(緑→黄→赤)。押す前に重さが伝わるように。
   罫囲みではなく塗りにしているのは、選ぶ行為の重さを色面で伝えたいから */
/* .cat-* はボタン(3択)としてもバッジ(選択済みの表示)としても使う */
.cat-general, .cat-doxxing, .cat-emergency {
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  padding: var(--space-2xs) var(--space-xs);
}
.cat-general { background: var(--color-signal-go); border-color: var(--color-signal-go); }
.cat-general:hover { background: var(--color-signal-go-deep); border-color: var(--color-signal-go-deep); color: var(--color-on-accent); }
/* warningは地が明るいので文字は墨。白抜きだとコントラストが足りない */
.cat-doxxing { background: var(--color-signal-warn); border-color: var(--color-signal-warn); color: var(--color-ink); }
.cat-doxxing:hover { background: var(--color-signal-warn-deep); border-color: var(--color-signal-warn-deep); color: var(--color-ink); }
.cat-emergency { background: var(--color-signal-stop); border-color: var(--color-signal-stop); }
.cat-emergency:hover { background: var(--color-signal-stop-deep); border-color: var(--color-signal-stop-deep); color: var(--color-on-accent); }

/* ブックマークは星だけ。オン/オフは塗りと色で示す(文字を出すと見出し横が渋滞する) */
.bookmark-btn {
  font: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink-2);
  padding: 0 var(--space-2xs);
}
.bookmark-btn:hover { color: var(--color-accent); }
.bookmark-btn.is-on { color: var(--color-accent); }
.menu-bookmarks {
  width: 100%;
  max-height: 40vh;
  max-height: 40dvh;   /* 一覧が伸びても下の「設定」セクションに手が届くようにする */
  overflow-y: auto;
}
.menu-bookmarks a {
  display: block;
  flex: 1;
  min-width: 0;          /* flex内で省略を効かせるために必要 */
  overflow: hidden;      /* 長いタイトルは省略。nowrapのままだとパネルが横に伸びる */
  text-overflow: ellipsis;
  padding: var(--space-2xs) 0;
}
.menu-bookmarks .empty { font-size: var(--text-xs); color: var(--color-ink-2); white-space: normal; }
.report-hint { font-size: var(--text-xs); color: var(--color-ink-2); }

/* 外部リンクの印(四角から矢印が出ているアイコン)。文字で「別のサイトが開きます」と
   書かない代わりの表現。maskで塗るので、リンクやボタンの文字色にそのまま追従する */
.ext-icon {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  mask: var(--ext-icon) no-repeat center / contain;
  -webkit-mask: var(--ext-icon) no-repeat center / contain;
}

/* ── コンテンツ内リンク: 墨色+ヘアライン下線(accentは使わない)。ホバーで藍 ──
   ★Bootstrapの部品は除外する(2026-08-15 Codexレビュー Medium-5)。
   `.board-page a` は詳細度(0,1,1)で Bootstrapの `.btn`(0,1,0) に勝つため、
   除外しないと <a class="btn"> の文字が墨色+下線になり、藍の地の上で読みづらくなる。
   実際に /contact の「お問い合わせフォームを開く」と開示画面の「提出用CSV」で起きていた。
   list-group / nav-link / page-link も同じ理由で除外する */
.board-page a:not(.btn, .list-group-item, .nav-link, .page-link),
.admin-page a:not(.btn, .list-group-item, .nav-link, .page-link),
.site-foot a:not(.btn, .list-group-item, .nav-link, .page-link) {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.board-page a:not(.btn, .list-group-item, .nav-link, .page-link):hover,
.admin-page a:not(.btn, .list-group-item, .nav-link, .page-link):hover,
.site-foot a:not(.btn, .list-group-item, .nav-link, .page-link):hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ── サブページ共通(editorial: 明朝見出し+ヘアライン罫+余白リズム) ── */
.board-page { max-width: 680px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-xl); }
.board-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-strong);   /* 見出し下の強い罫=紙面の見出し */
  overflow-wrap: anywhere;
}
.board-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: var(--space-xl) 0 var(--space-sm);
}
.board-page p { margin: 0 0 var(--space-md); }
.board-page .board-meta { font-size: var(--text-sm); color: var(--color-ink-2); margin: calc(var(--space-md) * -1 + var(--space-2xs)) 0 var(--space-lg); }
#mini-map {
  height: 220px;
  border: var(--rule);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
}
.board-page form { margin-top: var(--space-lg); padding: var(--space-md); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper-2); }
.nearby h2 { font-size: var(--text-lg); }
.nearby ul { list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.nearby li { padding: var(--space-xs) 0; border-bottom: var(--rule); }
.pager { margin: var(--space-lg) 0; display: flex; gap: var(--space-lg); }
.pager a { color: var(--color-ink); }

/* エリア一覧: 角の立った罫のタグ(ピルにしない)。件数込み全体がタップ領域 */
.area-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; }
.area-list li a {
  display: inline-block;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule);
  border-left: 2px solid var(--color-accent);   /* 左に藍の細帯=紙面の見出し記号 */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-2xs) var(--space-sm);
}
.area-list li a:hover { background: var(--color-accent-wash); }
.area-list li a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

.site-foot {
  max-width: 720px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-md);
  border-top: var(--rule);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

/* Leafletのz-indexとパネルの整合 */
.leaflet-container { font: inherit; }

/* ── ヘッダの認証リンク・フィルタ ─────────── */
.head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); white-space: nowrap; }
.head-actions a { color: var(--color-ink-2); }

/* ハンバーガー(全幅共通。2026-08-12: 項目が4つに増えたためPCも畳む方式に統一) */
.site-head { position: relative; align-items: center; }
.menu-btn {
  display: block;
  font-size: var(--text-lg);
  background: none;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
  padding: 0 var(--space-2xs);
  margin-left: auto;
  line-height: 1;
}
.menu-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.head-actions {
  display: none;
  position: absolute;
  top: 100%;
  right: var(--space-xs);
  z-index: 800;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-paper);
  border: var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.15);
  /* 項目が増えても画面外に伸びない(ブックマークは数が読めない)。
     幅も上限を切る=長いタイトルでパネルが横に広がるのを防ぐ */
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  max-width: min(20rem, calc(100vw - 2 * var(--space-xs)));
}
.site-head.menu-open .head-actions { display: flex; }
.menu-user { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.setting-locked { color: var(--color-ink-2); opacity: 0.6; }
.menu-section {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  border-top: var(--rule);
  padding-top: var(--space-xs);
  width: 100%;
}

@media (max-width: 640px) {
  .site-head .tagline { display: none; }  /* モバイルではタグラインを畳む(titleとヒントに残る) */
}
/* ログインユーザーの人型アイコン(SVGマスク: トークン色で塗れて全端末で同じ形) */
.user-icon {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
  background-color: var(--color-accent-deep);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.6 4.6 0 1 0-4.6-4.6A4.6 4.6 0 0 0 12 12zm0 2.3c-4.6 0-8.3 2.5-8.3 5.5v1h16.6v-1c0-3-3.7-5.5-8.3-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.6 4.6 0 1 0-4.6-4.6A4.6 4.6 0 0 0 12 12zm0 2.3c-4.6 0-8.3 2.5-8.3 5.5v1h16.6v-1c0-3-3.7-5.5-8.3-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flash { background: var(--color-accent-wash); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); }

/* ── 管理画面(SPEC §13。スマホ操作前提) ────── */
.admin-nav { margin-left: auto; display: flex; gap: var(--space-sm); font-size: var(--text-sm); flex-wrap: wrap; }
.admin-page { max-width: 720px; margin: 0 auto; padding: var(--space-md); }
.admin-page h1 { font-family: var(--font-display); font-size: var(--text-xl); }
.admin-page h2 { font-family: var(--font-display); font-size: var(--text-lg); margin-top: var(--space-lg); }
.admin-counts { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.queue-item { border: var(--rule); border-radius: var(--radius-md); padding: var(--space-sm); margin: var(--space-xs) 0; }
.queue-meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); align-items: center; }
.badge-status { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-paper-3); border-radius: var(--radius-sm); padding: 0 var(--space-2xs); }
.ip-masked { cursor: pointer; text-decoration: underline dotted; }
.moderate-form { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); align-items: center; }
.moderate-form select { font: inherit; font-size: var(--text-sm); padding: var(--space-2xs); border: var(--rule); border-radius: var(--radius-sm); }
.btn-danger { color: var(--color-error); }

/* 画面内の案内(マニュアルを別に持たない代わり。SPEC §13)。<details>はネイティブ任せ */
.admin-help { border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper-2); padding: var(--space-xs) var(--space-sm); margin: var(--space-xs) 0 var(--space-md); }
.admin-help summary { font-size: var(--text-sm); cursor: pointer; color: var(--color-ink-2); }
.admin-help ul { margin: var(--space-xs) 0 0; padding-left: 1.25em; }
.admin-help li { font-size: var(--text-sm); color: var(--color-ink-2); }
.admin-help li + li { margin-top: var(--space-2xs); }
.admin-help strong { color: var(--color-ink); }
.hint { font-size: var(--text-xs); color: var(--color-ink-2); margin: var(--space-2xs) 0 0; }
.hint-danger { color: var(--color-error); }

.bot-marker { font-size: 18px; text-align: center; filter: grayscale(0.2); }

/* 現在地ボタン(Leafletコントロール) */
.locate-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  cursor: pointer;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);
}
.locate-btn:hover { background: var(--color-paper-2); }
.locate-btn:active { transform: translateY(1px); }
.locate-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }