/* ===========================================================================
   app.css = dether の見た目の土台（全ページ共通。base.html で読み込む）

   構成: 1.パレット / 2.ページ全体 / 3.ヘッダー / 4.下のタブ / 5.共通部品
   ★バッジ（メダル）の見た目は badge.css（リーダーの部品）。ここには書かない。

   ★色は必ず var(--d-...) で書く。#ffffff の直書きはしない。
     ライト・ダークの切り替えは、1のパレットを入れ替えるだけで全部に効く。
   ★ライト・ダークは <html data-theme="light|dark"> で決まる。
     最初の値は base.html の <head> の小さなスクリプトが入れる（保存した設定 → OSの設定の順）。
   ★style.css（テンプレート）より後に読み込んで、テンプレートの色も dether の色に置き換えている。
   =========================================================================== */

/* ===========================================================================
   1. パレット（色はリーダーのデザインから拾った値）
   =========================================================================== */
:root {
  --d-bg: #f1e9d2;
  --d-surface: #f6efda;
  --d-text: #243b35;
  --d-muted: #6f7469;
  --d-accent: #6b8e7b;
  --d-accent-soft: #b7c9b1;
  --d-on-accent-soft: #243b35;
  --d-track: #d7d4be;
  --d-divider: #ddd9c6;
  --d-edge: rgba(255, 255, 255, 0.65);
  --d-strong: #243b35;
  --d-on-strong: #f1e9d2;
  --d-loud: #d69e64;
  --d-very-loud: #bf6a4a;
  --d-on-alert: #fbf5e6;

  /* バッジ部品（badge.css）が使う色 */
  --bg: var(--d-bg);
  --ink: #243b35;
  --ink2: rgba(36, 59, 53, 0.76);
  --ink3: rgba(36, 59, 53, 0.42);
  --line: rgba(36, 59, 53, 0.12);
  --glass-strong: rgba(247, 242, 226, 0.88);
  --drop: rgba(36, 59, 53, 0.1);

  /* ふくらみ（raised）とへこみ（inset）の影 */
  --d-shadow-dark: rgba(150, 132, 92, 0.3);
  --d-shadow-light: rgba(255, 255, 255, 0.85);
  --d-raised: 6px 6px 14px var(--d-shadow-dark), -6px -6px 14px var(--d-shadow-light);
  --d-raised-lg: 16px 16px 32px var(--d-shadow-dark), -14px -14px 30px var(--d-shadow-light);
  --d-inset: inset 5px 5px 12px var(--d-shadow-dark), inset -5px -5px 12px var(--d-shadow-light);

  --d-radius: 22px;
  --d-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    system-ui, sans-serif;
  --d-font-num: "Poppins", var(--d-font);

  /* テンプレート（style.css）の色を dether の色に置き換える。ログイン画面やエラー画面もこれで揃う */
  --color-bg: var(--d-bg);
  --color-surface: var(--d-surface);
  --color-text: var(--d-text);
  --color-text-muted: var(--d-muted);
  --color-border: var(--d-divider);
  --color-primary: var(--d-accent);
  --color-primary-dark: var(--d-strong);
  --color-primary-soft: var(--d-accent-soft);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --d-bg: #243b35;
  --d-surface: #2e4940;
  --d-text: #f1e9d2;
  --d-muted: #a9b4a5;
  --d-track: #3b564c;
  --d-divider: #4a6055;
  --d-edge: rgba(255, 255, 255, 0.07);
  --d-strong: #b7c9b1;
  --d-on-strong: #243b35;

  --ink: #f1e9d2;
  --ink2: rgba(241, 233, 210, 0.78);
  --ink3: rgba(241, 233, 210, 0.4);
  --line: rgba(241, 233, 210, 0.14);
  --glass-strong: rgba(47, 74, 66, 0.9);
  --drop: rgba(0, 0, 0, 0.25);

  --d-shadow-dark: rgba(8, 18, 15, 0.45);
  --d-shadow-light: rgba(255, 255, 255, 0.05);

  --color-primary: var(--d-accent-soft);
  --color-primary-dark: var(--d-accent-soft);

  color-scheme: dark;
}

/* ===========================================================================
   2. ページ全体
   =========================================================================== */

/* ★hidden を付けた要素は、display を指定していても必ず隠す */
[hidden] {
  display: none !important;
}

body {
  background: var(--d-bg);
  color: var(--d-text);
  font-family: var(--d-font);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  /* 下のタブに隠れないように、その分だけ余白を空ける */
  padding-bottom: calc(116px + env(safe-area-inset-bottom));
}

/* スマホ縦長で作るので、PCで開いても真ん中に細く出す */
.container {
  max-width: 480px;
  padding: 0 20px;
}

.num {
  font-family: var(--d-font-num);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   3. ヘッダー（ロゴとライト・ダークの切り替え）
   =========================================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 20px 8px;
}

.app-logo img {
  height: 28px;
  width: auto;
}

.app-logo .logo-dark,
[data-theme="dark"] .app-logo .logo-light {
  display: none;
}
[data-theme="dark"] .app-logo .logo-dark {
  display: block;
}

.theme-toggle {
  position: relative;
  width: 58px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--d-bg);
  box-shadow: var(--d-inset);
  color: var(--d-text);
  cursor: pointer;
}

.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--d-surface);
  box-shadow: 2px 2px 5px var(--d-shadow-dark), -1px -1px 3px var(--d-shadow-light);
  transition: transform 0.25s ease;
}
[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(26px);
  background: var(--d-bg);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
}
.theme-toggle .icon-moon,
[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

/* ===========================================================================
   4. 下のタブ（調査・マップ・マイページ）
   =========================================================================== */
.tab-bar {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(456px, calc(100% - 24px));
  padding: 12px 8px 10px;
  transform: translateX(-50%);
  background: var(--d-surface);
  border: 1px solid var(--d-edge);
  border-radius: 30px;
  box-shadow: var(--d-raised);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--d-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.tab:hover {
  text-decoration: none;
}

.tab__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
}
.tab__icon svg {
  width: 22px;
  height: 22px;
}

.tab[aria-current="page"] {
  color: var(--d-text);
  font-weight: 700;
}
.tab[aria-current="page"] .tab__icon {
  background: var(--d-accent-soft);
  color: var(--d-on-accent-soft);
}

/* ===========================================================================
   5. 共通部品
   =========================================================================== */

/* --- カード --- */
.d-card {
  background: var(--d-surface);
  border: 1px solid var(--d-edge);
  border-radius: var(--d-radius);
  box-shadow: var(--d-raised);
}

/* --- ボタン --- */
.d-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: 700 15px var(--d-font);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.d-button:active {
  transform: scale(0.98);
}
.d-button--strong {
  background: var(--d-strong);
  color: var(--d-on-strong);
  box-shadow: var(--d-raised);
}
.d-button--ghost {
  background: var(--d-bg);
  color: var(--d-text);
  box-shadow: var(--d-raised);
}

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

/* ===========================================================================
   お知らせ（base.html の .flash-list。main.js の showMessage() もここに足す）
   スクロールしていても見えるように、ヘッダーの下に重ねて出す
   =========================================================================== */
.flash-list {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  z-index: 300;
  width: min(440px, calc(100% - 32px));
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.flash {
  padding: 12px 16px;
  border: 1px solid var(--d-edge);
  border-left: 4px solid var(--d-accent);
  border-radius: 14px;
  background: var(--d-surface);
  box-shadow: 0 8px 24px var(--drop);
  color: var(--d-text);
  font-size: 13.5px;
  font-weight: 500;
  pointer-events: auto;
  animation: flash-in 0.25s ease-out both;
}
.flash-success {
  border-left-color: var(--d-accent);
}
.flash-error {
  border-left-color: #c4714f;
}
.flash-warning {
  border-left-color: #dca36c;
}
@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ===========================================================================
   小さなラベル（時間帯・レアなど）。マイページの「集めたバッジ」とマップのシートで使う
   =========================================================================== */
.chip {
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
}
.chip--rare {
  border-color: var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}

/* ===========================================================================
   スライドする切り替え（.seg）
   「屋外｜屋内」「ローカル｜全国」「すべて｜昼｜夜」のように、へこんだ溝の中で
   選んでいるものだけがふくらむ切り替え。ふくらんだ背景（::before）が、選んだほうへ滑っていく。

   使い方：入れ物に class="seg" を付けるだけ。中のボタンは role="tab"（aria-selected）
   か role="radio"（aria-checked）にする。位置は main.js が --seg-i / --seg-n に入れる。
   入れ物ごとに --seg-pad（溝の内側の余白）/ --seg-gap（ボタンの間）/ --seg-radius を合わせる。
   =========================================================================== */
.seg {
  position: relative;
  isolation: isolate; /* ::before を、入れ物の背景より上・ボタンの文字より下に置くため */
}
.seg::before {
  position: absolute;
  top: var(--seg-pad, 4px);
  bottom: var(--seg-pad, 4px);
  left: var(--seg-pad, 4px);
  z-index: -1;
  width: calc(
    (100% - var(--seg-pad, 4px) * 2 - var(--seg-gap, 4px) * (var(--seg-n, 2) - 1)) / var(--seg-n, 2)
  );
  border-radius: var(--seg-radius, 999px);
  background: var(--d-surface);
  box-shadow: 3px 3px 8px var(--d-shadow-dark), -3px -3px 8px var(--d-shadow-light);
  content: "";
  transform: translateX(calc(var(--seg-i, 0) * (100% + var(--seg-gap, 4px))));
  transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1);
}
/* 開いた直後は滑らせない（最初の位置に置くだけ） */
.seg:not(.seg--ready)::before {
  transition: none;
}
.seg > * {
  transition: color 0.2s ease;
}

/* お知らせはタップで閉じる（main.js） */
.flash {
  cursor: pointer;
}
.flash--out {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}