/* Stile condiviso fra la UI di analisi (explorer/census tuning) e il viewer esterno.
   Estratto da analysis/web_ui/templates/explorer.html: unica copia, due consumatori. */
:root{
  /* Palette del marchio, campionata dal logo. */
  --huna-azzurro:#5DBED7;
  --huna-azzurro-scuro:#1A7F9C;
  --huna-viola:#AC72AD;
  --huna-arancio:#F38232;
  --huna-giallo:#FFDC0D;
  --huna-nero:#2E2E2D;
  /* arancio = azione (si nota di piu'), azzurro = stato attivo o selezione.
     Sull'arancio il testo e' bruno scurissimo, non bianco (2.61:1, illeggibile) ne'
     nero neutro: il bruno caldo sta sullo stesso tono dell'arancio e rende 6.44:1. */
  --acc:var(--huna-arancio);
  --acc-hover:#E2701D;
  --acc-testo:#3A1F0A;
  --sel:var(--huna-azzurro);
  --sel-hover:#4AAECA;
  --sel-testo:var(--huna-nero);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#1f2937}
.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 14px;border-bottom:2px solid var(--sel);background:#fafbfd}
.topbar h1{margin:0;font-size:16px;flex:0 0 auto}
.topbar a.back{font-size:12px;padding:4px 10px;border:1px solid #dde2ea;border-radius:14px;color:#374151;text-decoration:none;background:#fff}
.topbar a.back:hover{border-color:var(--huna-azzurro-scuro);color:var(--huna-azzurro-scuro)}
.topbar label{font-size:12px;color:#374151;display:flex;align-items:center;gap:4px}
.topbar select,.topbar input{padding:5px 8px;border:1px solid #c5cad3;border-radius:5px;font-size:13px;font-family:inherit;background:#fff}
.topbar input[type=time]{width:92px}
.topbar button{padding:6px 13px;background:var(--acc);color:var(--acc-testo);border:0;border-radius:5px;cursor:pointer;font-weight:600;font-size:13px}
.topbar button:hover{background:var(--acc-hover)}
.topbar button.ghost{background:#fff;color:#374151;border:1px solid #c5cad3}
.topbar .grow{flex:1}
#stats{font-size:11.5px;color:#6b7280}

.wrap{display:flex;height:calc(100vh - 50px);position:relative}
#side{flex:0 0 0;width:0;overflow:hidden;background:#0b0f14;color:#e5e7eb;display:flex;flex-direction:column}
.wrap.playing #side{flex:1 1 auto;width:auto}
#rightcol{flex:1 1 auto;min-width:0;height:100%;display:flex;flex-direction:column}
.wrap.playing #rightcol{flex:0 0 400px;border-left:2px solid #0b0f14}
#map{flex:1 1 0;min-height:0}
#telem{display:none;flex-direction:column;min-height:0;background:#0a0d12;border-bottom:1px solid #1f2937}
.wrap.playing #telem{display:flex;flex:1 1 0}
/* telemetria ridotta a una riga: lo spazio avanzato va alla mappa */
.wrap.playing #telem.compact{flex:0 0 auto}
#telem.compact #hudref{display:none}
#telem.compact #hud{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}

/* picker passaggi */
#picker{position:absolute;left:12px;bottom:12px;z-index:900;width:320px;max-height:52vh;overflow:auto;
  background:rgba(255,255,255,.97);border:1px solid #dde2ea;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25);display:none}
#picker.show{display:block}
#picker h3{margin:0;padding:8px 12px;font-size:13px;border-bottom:1px solid #eef1f5;display:flex;align-items:center;gap:8px}
#picker h3 .x{margin-left:auto;cursor:pointer;color:#6b7280;font-weight:700}
.pass{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f1f3f7;cursor:pointer;font-size:12px}
.pass:hover{background:#eef5ff}
.pass .arrow{flex:0 0 auto;width:22px;height:22px;position:relative}
.pass .arrow i{position:absolute;left:50%;top:50%;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:12px solid var(--huna-azzurro-scuro);transform-origin:50% 70%}
.pass .arrow.nohdg i{display:none}
.pass .arrow.nohdg::after{content:"•";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--huna-azzurro-scuro)}
.pass .meta{flex:1;line-height:1.35}
.pass .meta b{color:#111827}
.pass .dist{color:#6b7280;font-variant-numeric:tabular-nums}

/* player */
.phead{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #1f2937;font-size:12px}
.phead .seg{display:flex;border:1px solid #334155;border-radius:6px;overflow:hidden}
.phead .seg button{background:#0b0f14;color:#cbd5e1;border:0;padding:5px 10px;cursor:pointer;font-size:12px}
.phead .seg button.on{background:var(--sel);color:var(--sel-testo)}
.phead select{background:#0b0f14;color:#e5e7eb;border:1px solid #334155;border-radius:5px;padding:4px 6px;font-size:12px}
.phead .ovtoggle{background:#0b0f14;color:#cbd5e1;border:1px solid #334155;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px}
.phead .ovtoggle.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.phead .close{margin-left:auto;cursor:pointer;color:#94a3b8;font-weight:700;font-size:16px;background:none;border:0}

#mosaic{display:grid;gap:3px;flex:1;min-height:0;padding:6px;grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr}
#mosaic .tile[data-cam="2"]{grid-column:1 / 3;grid-row:1}
#mosaic .tile[data-cam="1"]{grid-column:1 / 2;grid-row:2}
#mosaic .tile[data-cam="3"]{grid-column:2 / 3;grid-row:2}
/* bundle con una sola camera: niente righe vuote sotto al video */
#mosaic .tile:only-child{grid-column:1 / 3;grid-row:1 / 3}
#mosaic.single .tile{display:none}
#mosaic.single .tile.sel{display:block;grid-column:1 / 3;grid-row:1 / 3}
.tile{position:relative;background:#000;overflow:hidden;min-height:0;border-radius:4px;cursor:pointer}
.tile video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tile canvas.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.tile .blk{position:absolute;inset:0;background:#000;display:none;align-items:center;justify-content:center;color:#64748b;font:12px monospace;z-index:3}
.tile .blk.on{display:flex}
.tile .cap{position:absolute;top:4px;right:6px;background:rgba(0,0,0,.55);color:#cbd5e1;font:11px monospace;padding:1px 5px;border-radius:4px;z-index:4}

.pctrl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #1f2937}
.pctrl button.play{background:var(--acc);color:var(--acc-testo);border:0;border-radius:5px;padding:6px 14px;cursor:pointer;font-weight:600}
.pctrl input[type=range]{flex:1}
.pctrl .tlab{font:11px monospace;color:#94a3b8;min-width:150px;text-align:right}
.pctrl select{background:#0b0f14;color:#e5e7eb;border:1px solid #334155;border-radius:5px;padding:4px 6px;font-size:12px}
.pctrl button.nav{background:#0b0f14;color:#cbd5e1;border:1px solid #334155;border-radius:5px;padding:6px 10px;cursor:pointer;font-size:12px}
.pctrl button.nav:hover{border-color:var(--sel);color:#fff}
.pctrl .hint{font:11px monospace;color:#5b6b7f}
.follow-ctl a{font:700 18px/30px system-ui;text-align:center;color:#374151}
.follow-ctl a.on{background:var(--sel);color:var(--sel-testo)}

#hud{margin:0;padding:10px 12px;background:#0a0d12;color:#d1fae5;
  font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre;overflow:auto;flex:1 1 0;min-height:0}
#hudref{padding:2px 12px 8px;font:11px monospace;color:#64748b;flex:0 0 auto}

/* pallino heading sulla mappa */
.cur-wrap{position:relative;width:26px;height:26px}
.cur-arrow{position:absolute;left:50%;top:50%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:16px solid #ff3b30;transform-origin:50% 70%;transform:translate(-50%,-70%) rotate(0deg)}
.cur-dot2{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#ff3b30;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 5px rgba(0,0,0,.6)}
.cur-wrap.nohdg .cur-arrow{display:none}
.leaflet-container{background:#111}