/* RECON Live Map (site / kiosk / broadcast). recon-tokens.css と site.css の上に載せる。 */
:root,[data-theme="dark"]{--lm-sea:#050b18;--lm-land:#0f1a2e;--lm-edge:#1f2c44;--lm-grid:rgba(148,163,184,.07);--lm-label:#f1f5f9}
[data-theme="light"]{--lm-sea:#dbe6f0;--lm-land:#f4f7fa;--lm-edge:#b4c3d3;--lm-grid:rgba(15,23,42,.08);--lm-label:#0f172a}

.lm-wrap{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:1rem;align-items:start}
.lm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 1rem}
.lm-k{font-size:.75rem;color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase}
.lm-v{font-size:1.8rem;font-weight:600;margin-top:.2rem}
.lm-n{font-size:.7rem;color:var(--text-tertiary);margin-top:.15rem}
.lm-mapbox{position:relative;height:min(62vh,560px);min-height:300px;border:1px solid var(--border-color);border-radius:4px;overflow:hidden;background:var(--lm-sea)}
#lm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lm-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-secondary);margin-top:.6rem}
.lm-legend span{display:flex;align-items:center;gap:5px}
.lm-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.lm-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.lm-head{display:grid;grid-template-columns:70px 1fr 90px;gap:6px;color:var(--text-tertiary);font-size:11px;padding-bottom:4px}
.lm-rows{height:300px;overflow:hidden}
.lm-row{display:grid;grid-template-columns:70px 1fr 90px;gap:6px;padding:4px 0;font-size:12px;white-space:nowrap;border-top:1px solid var(--border-light)}
.lm-row>span{overflow:hidden;text-overflow:ellipsis}
.lm-row .cc{color:var(--accent-primary)}
.lm-row.fresh{animation:lmIn .35s ease-out}
@keyframes lmIn{from{background:rgba(245,158,11,.16)}to{background:transparent}}
.lm-bar{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr 3rem;gap:8px;align-items:center;font-size:12px;padding:3px 0}
.lm-bar>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lm-bar .track{height:6px;background:var(--bg-glass);border-radius:2px;overflow:hidden}
.lm-bar .fill{height:100%}
.lm-bar .num{text-align:right;color:var(--text-secondary)}
#lm-status{font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:2px;background:#475569;color:#fff}
#lm-status[data-state="live"]{background:#10b981;color:#02140d}
#lm-status[data-state="retry"]{background:#ef4444}
.lm-note{font-size:.75rem;color:var(--text-tertiary);margin:.6rem 0 0;line-height:1.55}
.lm-links{font-size:.8rem;color:var(--text-secondary);margin:.2rem 0 1rem}

@media (max-width:1000px){.lm-wrap{grid-template-columns:1fr}.lm-kpis{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.lm-v{font-size:1.4rem}.lm-bar{grid-template-columns:minmax(0,7rem) 1fr 2.5rem}.lm-rows{height:240px}}

/* --- kiosk (A): 全画面ダッシュボード（Pi キオスク向け） --- */
body[data-live-mode="kiosk"]{height:100vh;overflow:hidden;display:grid;grid-template-rows:48px 1fr}
body[data-live-mode="kiosk"] .lm-bar-top{display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
body[data-live-mode="kiosk"] .lm-main{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:1rem;padding:1rem;min-height:0}
body[data-live-mode="kiosk"] .lm-mapbox{height:100%;min-height:0}
body[data-live-mode="kiosk"] .lm-left{position:relative;min-height:0}
body[data-live-mode="kiosk"] .lm-overlay{position:absolute;top:.8rem;left:.8rem;display:flex;gap:.6rem;z-index:2}
body[data-live-mode="kiosk"] .lm-overlay .metric{background:rgba(13,21,38,.82);border:1px solid var(--border-color);border-left:3px solid var(--accent-primary);border-radius:4px;padding:.4rem .8rem}
body[data-live-mode="kiosk"] .lm-rows{height:auto;flex:1 1 0;min-height:0;overflow:hidden}
body[data-live-mode="kiosk"] .lm-side{align-self:stretch;min-height:0;overflow:hidden}
body[data-live-mode="kiosk"] .lm-card-grow{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* --- broadcast (B): 1920x1080 配信（IP なし、横スクロールのティッカー） --- */
body[data-live-mode="broadcast"]{width:100vw;height:100vh;overflow:hidden;display:grid;grid-template-rows:84px 1fr 96px 36px}
body[data-live-mode="broadcast"] .lm-bar-top{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
.lm-onair{display:inline-flex;align-items:center;gap:.5rem;background:#ef4444;color:#fff;font-weight:700;letter-spacing:.14em;padding:.3rem .9rem;border-radius:3px;font-size:1.1rem}
.lm-onair i{width:10px;height:10px;border-radius:50%;background:#fff;animation:lmBlink 1.4s infinite}
@keyframes lmBlink{50%{opacity:.25}}
body[data-live-mode="broadcast"] .lm-main{position:relative;min-height:0}
body[data-live-mode="broadcast"] .lm-mapbox{position:absolute;inset:0;height:auto;border:0;border-radius:0}
body[data-live-mode="broadcast"] .lm-big{position:absolute;left:2rem;top:1.4rem;display:flex;gap:2.4rem;z-index:2}
body[data-live-mode="broadcast"] .lm-big .lm-v{font-size:3.4rem}
body[data-live-mode="broadcast"] .lm-big .lm-k{font-size:1rem}
body[data-live-mode="broadcast"] .lm-top5{position:absolute;right:2rem;bottom:1.2rem;width:420px;background:rgba(13,21,38,.86);border:1px solid var(--border-color);border-radius:4px;padding:.8rem 1rem;z-index:2}
body[data-live-mode="broadcast"] .lm-top5 h2{margin:0 0 .4rem;font-size:1rem;letter-spacing:.06em}
body[data-live-mode="broadcast"] .lm-bar{font-size:1.05rem}
body[data-live-mode="broadcast"] .lm-ticker{background:var(--bg-secondary);border-top:1px solid var(--border-color);overflow:hidden}
body[data-live-mode="broadcast"] .lm-rows{height:auto;display:flex;gap:2rem;align-items:center;height:100%;padding:0 1.5rem;justify-content:flex-end}
body[data-live-mode="broadcast"] .lm-row{display:flex;gap:.6rem;border:0;padding:0;font-size:1.2rem;flex-shrink:0}
body[data-live-mode="broadcast"] .lm-foot{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;font-size:.85rem;color:var(--text-tertiary);background:var(--bg-primary)}
.lm-clock{font-size:1.5rem;font-weight:600}