/* status-timeline.css — 場所のサマリー「概況」（sites.html）。部品は /js/status-timeline.js。
   🔴 色はホームの地図（css/site-map.css の .smap-dot）と同じ＝正常 --ok／警告 --warn／エラー --error／オフライン --dim。
   トークンは main.css の :root を使う（⛔ ここで色を新しく決めない）。 */

/* 見出しの行（左＝題と範囲の切り替え・右＝件数） */
.stl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.stl-head-left { display: flex; align-items: center; gap: 0.75rem; }
.stl-range { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); overflow: hidden; }
.stl-range button {
  font: inherit; font-size: 0.66rem; padding: 0.2rem 0.6rem; border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
}
.stl-range button + button { border-left: 1px solid var(--border); }
.stl-range button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); }
.stl-counts { font-size: 0.72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stl-counts b { font-weight: 700; }
.stl-counts .is-error { color: var(--error); }
.stl-counts .is-warn { color: var(--warn); }
.stl-counts .is-offline { color: var(--fg); }
.stl-counts .is-zero { color: var(--dim); font-weight: 400; }

/* 本体（横に溢れたらこの中だけ横に流す＝ページは横に流さない） */
/* 🆕 2026-11-03（人間）＝名前の欄（横に流しても残る縦軸のラベル）の背景は周りの面と同じ色にする（⛔ ここだけ色を変えない）。
   置かれる面ごとに --stl-bg を合わせる＝カード（PC）は --surface／SP はカードの面が無い＝--bg／地図の札は --surface-2。 */
.stl { position: relative; --stl-bg: var(--surface); }
.smap-pop .stl, .smap-pop-tl { --stl-bg: var(--surface-2); }
@media (max-width: 767px) { .main .home-card .stl { --stl-bg: var(--bg); } }
.stl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stl-inner { min-width: 560px; }
.stl-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; min-height: 22px; }
.stl-row + .stl-row { border-top: 1px solid var(--border); }
.stl-name {
  position: sticky; left: 0; z-index: 2; background: var(--stl-bg, var(--surface));
  font-size: 0.7rem; color: var(--fg); padding: 0.2rem 0.6rem 0.2rem 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 0.4rem;
  /* 🆕 2026-11-03＝行の高さいっぱいに伸ばす（⛔ 横に流したとき、目盛りや帯の上下が名前の欄の外へはみ出して見える）。 */
  align-self: stretch;
}
.stl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ok); }
.stl-dot.is-warn { background: var(--warn); }
.stl-dot.is-error { background: var(--error); }
.stl-dot.is-offline { background: var(--dim); }

.stl-track { position: relative; height: 22px; }
.stl-band {
  position: absolute; top: 5px; bottom: 5px; min-width: 2px; border-radius: 2px;
  background: var(--ok); opacity: 0.32; cursor: default;
}
.stl-band.is-warn { background: var(--warn); opacity: 0.85; }
.stl-band.is-error { background: var(--error); opacity: 0.9; }
.stl-band.is-offline { background: var(--dim); opacity: 0.6; }
.stl-band:hover { opacity: 1; }
.stl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.stl-grid.is-major { background: var(--border-strong); }
.stl-now { position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--accent); opacity: 0.8; }

/* 目盛り */
.stl-axis-row { min-height: 18px; }
.stl-axis-row + .stl-row { border-top: 0; }
.stl-axis { position: relative; height: 18px; }
.stl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.6rem; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stl-tick.is-now { left: auto; right: 0; transform: none; color: var(--accent-fg); }

/* 札（ホバー・タップ） */
.stl-tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 280px;
  font-size: 0.7rem; color: var(--fg); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 8px);
  padding: 0.35rem 0.55rem; box-shadow: var(--shadow); white-space: nowrap;
}
.stl-empty { padding: 1.5rem 0.5rem; text-align: center; font-size: 0.72rem; color: var(--dim); }

/* 見出しの右の凡例（ランプ 名前 数・ホームの地図と同じ .smap-legend） */
.stl-legend { margin-top: 0; }

@media (max-width: 640px) {
  .stl-row { grid-template-columns: 104px minmax(0, 1fr); }
  .stl-counts { white-space: normal; }
}