/* ============================================================
   Sparkle Design の考え方に沿ったトークン設計
   （https://sparkle-design.goodpatch.com/ / 現行の Vanilla JS 構成では CSS 変数で表現）

   Sparkle の 4 層トークン階層をそのまま採用する:
     1) Primitive … 文脈を持たない素の値（gray-500 等の 10 段スケール）
     2) Semantics … 役割で命名（surface / text / primary / negative …）
     3) Component … 各コンポーネントが Semantics を参照して利用
   コンポーネントは原則 Semantics を参照し、生の hex は直接使わない。
   アクセシビリティは JIS X 8341-3:2016（WCAG 2.0 AA）基準、UD フォント採用。
   ============================================================ */

:root {
  /* ---- 1) Primitive: Neutral（背景・文字・線・アイコンの基盤）---- */
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d; /* 補助テキスト: 白背景で AA（約 4.7:1）を満たす下限 */
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* ---- 1) Primitive: Primary（既定テーマ。テナントCSSで上書き可能）---- */
  --green-50:  #e8f5ee;
  --green-100: #c5e6d2;
  --green-200: #8ecfa9;
  --green-300: #57b781;
  --green-400: #1f9a5c;
  --green-500: #0a7d45;
  --green-600: #046A38; /* 既定のブランド基準色（アクセント／主要ボタン） */
  --green-700: #03562d;
  --green-800: #023f21;
  --green-900: #012a16;

  /* ---- 1) Primitive: Additional（状態色。カテゴリ配色とも整合）---- */
  --blue-600:   #1971c2; /* info */
  --orange-600: #e8590c; /* warning 系 */
  --red-600:    #e03131; /* negative */
  --red-700:    #c92a2a; /* negative emphasis: 白文字とのコントラストを確保 */

  /* ---- 2) Semantics: Surface / Text / Border ---- */
  --color-bg:            var(--gray-50);
  --color-surface:       #ffffff;
  --color-surface-sunken: var(--gray-100);
  --color-text:          var(--gray-900);
  --color-text-subtle:   var(--gray-600);
  --color-text-on-primary: #ffffff;
  --color-text-on-primary-hover: #ffffff;
  --color-border:        var(--gray-300);
  --color-border-strong: var(--gray-400);

  /* ---- 2) Semantics: Primary（アクセント）---- */
  --color-primary:        var(--green-600);
  --color-primary-hover:  var(--green-700);
  --color-primary-subtle: var(--green-50);   /* 淡い塗り（選択チップの下地など） */
  --color-focus-ring:     var(--green-500);

  /* ---- 2) Semantics: 状態 ---- */
  --color-info:     var(--blue-600);
  --color-warning:  var(--orange-600);
  --color-negative: var(--red-600);
  --color-negative-emphasis: var(--red-700);

  /* ---- Typography（Sparkle: UD フォント／12px 基点スケール／4px グリッド行高）---- */
  --font-sans: "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, system-ui, sans-serif;
  --fs-caption: 12px;
  --fs-label:   13px;
  --fs-body:    14px;
  --fs-body-lg: 15px;
  --fs-input:   16px; /* iOS のズーム抑止 */
  --fs-title:   20px;
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;
  --ls-normal:  0;
  --ls-wide:    0.04em; /* 見出しは字間を広げて階層を作る（Sparkle の考え方）*/
  --fw-regular: 400;
  --fw-bold:    700;

  /* ---- Spacing（4px グリッド）---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ---- Elevation（淡く重ねる Sparkle 系の影）---- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-2: 0 2px 12px rgba(16, 24, 40, 0.14);
  --shadow-3: 0 -4px 20px rgba(16, 24, 40, 0.18);

  /* ---- 後方互換エイリアス（既存セレクタ・JS 参照用。--sheet-peek は sheet.js が参照）---- */
  --brand:  var(--color-primary);
  --bg:     var(--color-surface);
  --fg:     var(--color-text);
  --muted:  var(--color-text-subtle);
  --border: var(--color-border);
  --shadow: var(--shadow-2);
  --sheet-peek: 28px;
  --radius: var(--radius-lg);
  --pc-sidebar-w: 380px; /* PC サイドバー幅。js/app.js の PC_SIDEBAR_W と一致させる */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* アクセシビリティ: キーボード操作時のみ可視なフォーカスリング（WCAG 2.4.7）*/
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* 動きに配慮（prefers-reduced-motion）*/
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

#app { position: fixed; inset: 0; width: 100vw; max-width: none; }
#map { position: absolute; inset: 0; width: 100vw; max-width: none; }
.maplibregl-canvas.is-interactive { cursor: pointer; }

/* ---- Sparkle Design Toast ----
   上中央 16px、複数時 16px 間隔。Toast 自体だけ操作を受け付ける。 */
.toast-region {
  position: fixed;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  left: 50%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(420px, calc(100vw - 48px));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--gray-800);
  color: #ffffff;
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: toast-enter 160ms ease-out;
}
.toast--success { background: var(--color-primary); color: var(--color-text-on-primary); }
.toast--negative { background: var(--color-negative-emphasis); }
.toast__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: var(--space-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: 16px;
}
.toast__content {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding-inline: var(--space-1);
}
.toast__title,
.toast__description {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: var(--lh-normal);
}
.toast__title { font-size: var(--fs-label); font-weight: var(--fw-bold); }
.toast__description { font-size: var(--fs-caption); }
.toast__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.toast__close:hover { background: rgba(255, 255, 255, 0.16); }
.toast[hidden] { display: none; }
@keyframes toast-enter {
  from { opacity: 0; transform: translateY(-8px); }
}

/* ---- 上部オーバーレイ（検索＋チップ） ---- */
#overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  z-index: 40; /* ボトムシート(30)より上 */
}
#overlay-top > * { pointer-events: auto; }

/* 操作系コントロール（＋/−・方位・GPS・スケール）は右下に集約。
   モバイルでも地図下端へ固定し、開いたシートの下へそのまま隠す。 */
@media (max-width: 899px) {
  .maplibregl-ctrl-bottom-right {
    margin-bottom: env(safe-area-inset-bottom);
  }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
    margin-bottom: var(--space-1);
  }
  .maplibregl-ctrl-bottom-left {
    margin-bottom: calc(2px + env(safe-area-inset-bottom));
  }
}

/* 出典表示: remote style の HTML を使わず、固定 DOM を常時表示する。 */
.map-fixed-attribution.maplibregl-ctrl {
  max-width: min(720px, calc(100vw - var(--space-6)));
  margin: 0 0 2px var(--space-1);
  padding: 0;
  background: transparent;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(52, 58, 64, 0.72);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.96);
}
.map-fixed-attribution a { color: inherit; text-decoration: none; }
.map-fixed-attribution a:hover,
.map-fixed-attribution a:focus-visible { text-decoration: underline; }

/* スケール表示: ルーラーの線はグレー、文字は黒、背景の白帯は外して控えめに */
.maplibregl-ctrl-scale {
  border-color: var(--gray-500);
  color: var(--color-text);
  background: transparent;
  font-size: 10px;
}

/* ベースマップ切替トグル（比較用・右上コントロール群に同居） */
.basemap-switch { display: flex; }
.basemap-switch button {
  width: auto; height: auto;
  padding: var(--space-2) 11px;
  font: var(--fs-caption)/1 var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  border: 0;
  cursor: pointer;
}
.basemap-switch button + button { border-left: 1px solid var(--color-border); }
.basemap-switch button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-text-on-primary); }

#searchbar {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2);
  padding: var(--space-1) var(--space-4);
  /* PC 幅（サイドバー内に収まる幅）を上限にし、これ以上は広げない。
     モバイルに切り替わっても伸びず、画面が狭くなったぶんだけ縮む。 */
  max-width: calc(var(--pc-sidebar-w) - var(--space-4) * 2);
}
#searchbar:focus-within { border-color: var(--color-primary); }
#search-input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: var(--fs-input);
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-1);
  background: transparent;
  color: var(--color-text);
}
#search-clear {
  border: 0;
  background: transparent;
  font-size: 20px;
  color: var(--color-text-subtle);
  padding: var(--space-1) 6px;
  cursor: pointer;
  border-radius: var(--radius-full);
}

.chips {
  display: flex;
  flex-wrap: wrap; /* 画面幅に収まらないチップは折り返して全部見せる */
  gap: 6px;
  padding-bottom: 2px;
}

/* エリア選択とカテゴリ絞り込みを同じ段へ置く。
   エリアはピル型の選択肢、カテゴリは右端固定の角丸四角アイコンで操作の違いを示す。 */
#filter-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
#campus-chips {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#campus-chips::-webkit-scrollbar { display: none; }
#campus-chips .chip { padding-inline: 10px; }
.chip {
  flex: 0 0 auto;
  min-height: 32px; /* タップ領域を確保（WCAG 2.5.8）*/
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 6px var(--space-3);
  font-size: var(--fs-label);
  line-height: 1;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--color-text);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.chip:hover { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }
.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.chip[aria-pressed="true"]:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-on-primary-hover);
}
.chip .dot { width: 8px; height: 8px; border-radius: var(--radius-full); }

/* ---- カテゴリ絞り込み（アイコントリガー＋展開グリッド） ---- */
#category-filter { position: relative; flex: 0 0 auto; }

.filter-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.filter-trigger:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}
.filter-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-trigger__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* カテゴリ選択中＝絞り込み中の見た目。 */
.filter-trigger.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.filter-trigger.is-active:hover { background: var(--color-primary-subtle); }
.cat-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px; height: 18px; padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-text-on-primary);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; text-align: center;
}

.cat-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;                      /* 万一収まらない場合の保険。通常はスクロール不要 */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-3);
}
/* パネル内は折り返しグリッド（全カテゴリを一度に見せる） */
.cat-panel .chips { flex-wrap: wrap; }

/* カテゴリチップ: 未選択＝白地＋カテゴリ色ドット、選択＝カテゴリ色の下地。
   共通仕様として背景色の相対輝度が0.30以下なら白、それ以外は黒を選び、
   チップ自体が凡例を兼ねる。
   （.chip[aria-pressed="true"] の緑塗りを、同一詳細度＋後方定義で上書きする）*/
.cat-chip[aria-pressed="true"] {
  background: var(--cat-color);
  border-color: var(--cat-color);
  color: var(--cat-text-color);
  font-weight: var(--fw-bold);
}
.cat-chip[aria-pressed="true"]:hover {
  background: var(--cat-color);
  border-color: var(--cat-color);
  color: var(--cat-text-color);
  box-shadow: var(--shadow-2);
}
.cat-chip[aria-pressed="true"] .dot { background: var(--cat-text-color) !important; }
/* 「すべて」ピルは色ドットを持たないので、選択（＝絞り込み無し）時はブランド緑で示す */
.cat-chip--all[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--fw-bold);
}
.cat-chip--all[aria-pressed="true"]:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-on-primary-hover);
}

/* ---- ボトムシート ---- */
#sheet {
  --sheet-scroll-tail: 0px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 85dvh;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-3);
  transform: translateY(calc(100% - var(--sheet-peek)));
  transition: transform 0.25s ease;
  touch-action: none;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
#sheet.dragging { transition: none; }
#sheet[data-state="hidden"] { transform: translateY(100%); } /* 完全に画面外。施設タップで復帰 */
#sheet[data-state="half"] { transform: translateY(55%); }
#sheet[data-state="expanded"] { transform: translateY(12%); }
#sheet[data-state="full"] { transform: translateY(0); }

#sheet-handle {
  width: 100%;
  min-height: var(--sheet-peek);
  padding: var(--space-3) 0 6px;
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: grab;
  flex: 0 0 auto;
  touch-action: none;
}
#sheet-handle:active { cursor: grabbing; }
#sheet-handle span {
  width: 36px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
#sheet-body {
  overflow-y: auto;
  padding: 0 var(--space-4) calc(
    var(--space-4) + env(safe-area-inset-bottom) + var(--sheet-scroll-tail)
  );
  flex: 1;
  touch-action: pan-y;
}
#sheet-body[inert] { pointer-events: none; }

#list-summary { color: var(--color-text-subtle); font-size: var(--fs-caption); margin: 0 0 var(--space-2); }
#facility-list { list-style: none; margin: 0; padding: 0; }
#facility-list li {
  border-bottom: 1px solid var(--color-border);
}
#facility-list button {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 11px 2px;
  font-size: var(--fs-body-lg);
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}
#facility-list button:hover { background: var(--color-surface-sunken); }
#facility-list .dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex: 0 0 auto; }
#facility-list .sub { color: var(--color-text-subtle); font-size: var(--fs-caption); margin-left: auto; flex: 0 0 auto; }

/* ---- 施設ポップアップ（地図マーカー上の吹き出し＝詳細の子画面） ----
   MapLibre の Popup を Sparkle トークンに合わせて上書きする。一覧はサイドバーに
   出したまま、選んだ施設の説明・経路・共有をマーカー付近に表示する。 */
.poi-popup .maplibregl-popup-content {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  font-family: var(--font-sans);
  color: var(--color-text);
  max-width: 300px;
  max-height: 60vh;                      /* 小さい端末でも収まるよう内部スクロール */
  overflow-y: auto;
}
/* モバイルはマーカー下に開く。シートが上から重なっても吹き出し自体は変形させない。 */
@media (max-width: 899px) {
  .poi-popup .maplibregl-popup-content { max-height: 46vh; }
}
.poi-popup .maplibregl-popup-close-button {
  width: 28px; height: 28px;
  font-size: 20px; line-height: 1;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
}
.poi-popup .maplibregl-popup-close-button:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.poi-name {
  margin: 0 22px 2px 0;                  /* 右は閉じるボタンぶん空ける */
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); line-height: var(--lh-tight);
}
.poi-meta { margin: 0 0 var(--space-2); color: var(--color-text-subtle); font-size: var(--fs-caption); }
.poi-desc { margin: 0 0 var(--space-3); font-size: var(--fs-label); line-height: var(--lh-normal); }

.poi-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.poi-gmap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 32px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 6px 10px;
  font-size: var(--fs-label); line-height: 1; font-family: var(--font-sans);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.poi-gmap:hover { background: var(--color-primary); color: var(--color-text-on-primary); }

.poi-share {
  width: 100%; min-height: 32px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 6px 10px;
  font-size: var(--fs-label); line-height: 1; font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.poi-share:hover { background: var(--color-primary); color: var(--color-text-on-primary); }

/* ---- PC レイアウト: 左サイドバー（既定は非表示・地図を全画面に見せる） ----
   検索・絞り込み・施設選択でスライドインする。
   width は js/app.js の PC_SIDEBAR_W と一致させること（地図の左パディング計算に使う）。 */
@media (min-width: 900px) {
  #sheet {
    --sheet-scroll-tail: 0px;
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--pc-sidebar-w);
    height: auto;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transform: translateX(-100%); /* 既定は画面外へしまう */
    transition: transform 0.22s ease;
    border-right: 1px solid var(--color-border);
    padding-top: 150px; /* 検索＋チップの下から（JS が実測値で上書き）*/
    box-shadow: var(--shadow-2);
    visibility: hidden;
  }
  /* モバイルのドラッグ状態クラスが残っていても PC ではしまった状態を維持する */
  #sheet[data-state="hidden"],
  #sheet[data-state="half"],
  #sheet[data-state="expanded"],
  #sheet[data-state="full"] { transform: translateX(-100%); }
  #sheet.pc-open {
    transform: none;
    visibility: visible;
  }
  #sheet-handle { display: none; }
  /* オーバーレイ（検索＋チップ）はサイドバー幅に合わせ、サイドバー表示時にはみ出さない */
  #overlay-top { width: var(--pc-sidebar-w); }
  /* 検索バーの上限幅は基底の #searchbar で PC 幅に固定済み（ここで再指定しない） */
  /* 地図は全画面なので右下コントロールの持ち上げは不要（左にサイドバーがあっても干渉しない）*/
  .maplibregl-ctrl-bottom-right { margin-bottom: var(--space-1); }
  .maplibregl-ctrl-bottom-left { margin-bottom: 2px; }
  .map-fixed-attribution.maplibregl-ctrl {
    max-width: calc(100vw - var(--pc-sidebar-w) - var(--space-6));
  }
}