/* 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; }

.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); }