/* public/assets/map.css — 在線マップ */

html, body { margin: 0; height: 100%; }
#map { position: absolute; inset: 0; background: #0f172a; }

/* 背景地図を白黒化：地理院・淡色タイル(pale)のみ grayscale。
   貨物線ポリライン(overlay-pane)・列車バッジ(marker-pane)は別 pane なので色が残る */
#map .leaflet-tile-pane { filter: grayscale(1); }

/* -------- 列車バッジ -------- */

/* 重なり回避：同一地点のマーカーを下にずらし、原点(実位置)まで連結線を引く */
.t-marker { position: relative; }
.t-conn {
  /* top/height は JS がインラインで指定（実位置0からバッジ中心dyまで／上下両方向） */
  position: absolute; left: 0; width: 1px;
  background: var(--c); opacity: .5; pointer-events: none;
  transform: translateX(-0.5px); /* 実位置の x に線を合わせる */
}

/* divIcon の外枠は在線位置に左上が来る。translate で中心を位置に合わせる（map.js 参照）。
   --t-dy ぶん下にずらすことで、重なったマーカー同士を上下に離す */
.t-badge {
  transform: translate(-50%, calc(-50% + var(--t-dy, 0px)));
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c); /* 非対応ブラウザ用フォールバック（不透明） */
  /* 塗り色を20%透過（=80%不透明）。数値=不透明度なので、下げるほど透ける */
  background: color-mix(in srgb, var(--c) 80%, transparent);
  color: #fff;
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  /* 広域では535本が重なる。白フチで地図と隣の列車から分離する */
  outline: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.t-badge.t-suspended { opacity: .75; }
.t-badge.t-suspended .t-no { text-decoration: line-through; }

/* 縮小時、未投稿(運用なし/未入力)は背景の水色をグレースケール化。枠・文字は白のまま。
   投稿済(機番/運休/運転確認)は背景色そのまま。白/黒は無彩色なので filter で灰色化しても変わらない */
.t-badge.t-unposted { filter: grayscale(0.5); }

.t-no   { font-weight: 700; }
.t-duty { font-size: 9px; opacity: .95; }
.t-loco { font-size: 9px; background: rgba(0, 0, 0, .28); border-radius: 2px; padding: 0 3px; }
.t-loco.t-sub { background: #b91c1c; } /* 代走 */

/* 1段＝左に機関車画像・右に[運用番号／機番]縦積み。画像は2段ぶんの高さ */
.t-tier { display: flex; flex-direction: row; align-items: center; gap: 3px; }
.t-tier-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
/* 機関車アイコン（運用番号＋機番の2段分の高さで左に表示） */
.loco-ico.t-ico { height: 24px; width: auto; flex: none; }

/* 補機（瀬野八の後補機など）。本務機の下段に、破線で区切って出す */
.t-duty.t-bank { border-top: 1px dashed rgba(255, 255, 255, .5); padding-top: 1px; opacity: .9; }
.t-loco.t-bank { background: rgba(0, 0, 0, .4); }

/* -------- ポップアップ -------- */

.popup { font-size: 12px; line-height: 1.6; min-width: 190px; }
.p-no   { font-weight: 700; font-size: 13px; font-family: ui-monospace, monospace; }
.p-line { color: #64748b; }
.p-run  { margin-top: 2px; }
.p-time { color: #94a3b8; font-size: 11px; }
.p-status { color: #cbd5e1; font-size: 10px; margin-top: 4px; }

.p-duty {
  margin-top: 6px;
  padding: 4px 6px;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 0 3px 3px 0;
}
.p-duty.p-main { border-left-color: #3b82f6; background: #eff6ff; }
.p-duty.p-bank { border-left-style: dashed; }
.p-role { float: right; font-size: 10px; color: #64748b; }
.p-date { color: #64748b; font-size: 10px; margin-left: 6px; }
.p-sec  { color: #64748b; font-size: 10px; }
.p-loco { font-family: ui-monospace, monospace; font-weight: 700; }
/* 列車タブ：機関車画像を左に、区間＋機番を右の2段に並べる */
.p-body { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-top: 2px; }
.p-body-text { display: flex; flex-direction: column; }
/* 機関車アイコン（区間＋機番の2段分の高さで左に表示） */
.loco-ico.p-ico { height: 34px; width: auto; flex: none; }
.p-sub  { color: #b91c1c; font-weight: 400; font-size: 10px; }
.p-none { color: #94a3b8; font-size: 11px; }
.p-none a { color: #2563eb; }

/* -------- 状態表示 -------- */

.status {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 1000;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .82);
  color: #e2e8f0;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.status.err { background: rgba(153, 27, 27, .9); }

/* 投稿遅延（レベル2以上）: 選択肢のボタンと案内 */
.p-delay { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
.p-dopt { font: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #334155; cursor: pointer; }
.p-dopt.on { background: #f97316; border-color: #f97316; color: #fff; }
.p-dopt.off { color: #94a3b8; }
.p-dopt:active { transform: translateY(1px); }
.p-dat { font-size: 10px; opacity: 0.75; }
.p-note { font-size: 11px; color: #475569; }
.p-note a { color: #2563eb; }
.p-note-held { color: #b91c1c; }
.p-note-duty { color: #a16207; }

/* 選んだ選択肢では走行中でなく、地図から消えた列車の一覧（状態表示の上）。ここから選び直す */
.hid-list {
  position: absolute;
  bottom: 48px;
  left: 16px;
  z-index: 1000;
  max-width: calc(100vw - 32px);
  max-height: 40vh;
  overflow: auto;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, .88);
  color: #e2e8f0;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hid-list[hidden] { display: none; }
.hid-head { color: #94a3b8; }
.hid-row { display: flex; align-items: center; gap: 8px; }
.hid-no { font-weight: 700; flex: none; }
.hid-list .p-dopt { padding: 4px 10px; }
.hid-list .p-dopt:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* 指で押す端末では押せる領域を 44px 以上にする */
@media (pointer: coarse) {
  .hid-list .p-dopt { min-height: 44px; padding: 4px 14px; }
}

/* -------- スマホ幅のポップアップ --------
   文字と余白（・機関車画像）を同じ倍率 --pz で縮める。余白（外周と運用ブロック）はさらに --pm 倍。
   基準値は 本文14px・余白 8px 10px */
@media (max-width: 640px) {
  .leaflet-popup-content {
    --pz: 0.80; --pm: 1.25;
    margin: calc(var(--pz) * var(--pm) * 8px) calc(var(--pz) * var(--pm) * 10px);
    /* ポップアップ全体（左右の余白と枠 1px×2 を含む）を画面幅の 60% にする。
       Leaflet が中身から測った幅をインラインで書くので !important で上書きする */
    width: calc(60vw - 2 * var(--pz) * var(--pm) * 10px - 2px) !important;
  }
  .popup { font-size: calc(var(--pz) * 14px); line-height: 1.4; min-width: 0; }
  .p-no   { font-size: calc(var(--pz) * 16px); padding-right: 18px; } /* 右上の閉じるボタンと重ねない */
  .p-run  { margin-top: 0; }
  .p-time { font-size: calc(var(--pz) * 13px); }
  .p-status { font-size: calc(var(--pz) * 11px); margin-top: calc(var(--pz) * 2px); }
  .p-duty { margin-top: calc(var(--pz) * var(--pm) * 4px); padding: calc(var(--pz) * var(--pm) * 3px) calc(var(--pz) * var(--pm) * 6px); }
  .p-body { gap: calc(var(--pz) * 5px); margin-top: calc(var(--pz) * 1px); }
  .loco-ico.p-ico { height: calc(var(--pz) * 34px); }
  .p-role, .p-date, .p-sec, .p-sub { font-size: calc(var(--pz) * 12px); }
  .p-none, .p-note, .p-dopt { font-size: calc(var(--pz) * 13px); }
  .p-dat { font-size: calc(var(--pz) * 12px); }
  .p-delay { margin: calc(var(--pz) * 3px) 0; gap: calc(var(--pz) * 3px); }
}
/* 指で押す端末ではポップアップの選択肢の押せる高さを 44px にする。
   見た目は縮めたまま（文字との割合を保つ）、透明の ::after で上下に広げる */
@media (pointer: coarse) {
  .p-dopt { position: relative; padding: 2px 8px; }
  .p-dopt::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* -------- 現在地（GPS）ボタン --------
   右下（出典表示の上）。上端は 4号車のヘッダーが覆うため。色は本体地図と同じ青緑 #0d9488 */
.geo-ctrl { display: flex; align-items: center; gap: 6px; }
.geo-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .82);
  color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
.geo-btn .geo-dot { opacity: 0; }
.geo-btn.on { background: #0d9488; color: #fff; }
.geo-btn.on .geo-dot { opacity: 1; }
.geo-btn:active { transform: scale(0.95); }
.geo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.geo-err {
  padding: 4px 10px;
  border-radius: 12px;
  background: #7e6444; /* 本体地図の位置情報エラーと同じ（白文字とのコントラスト 4.5 以上） */
  color: #fff;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.geo-err[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .geo-btn { transition: none; }
  .geo-btn:active { transform: none; }
}