/* Cinema page additions on top of rider-log.css (same tokens, same solid panels). */

/* time-of-day colour wash over the satellite imagery; plain alpha (cheap on weak GPUs) */
.cn-tint{ position:absolute; inset:0; z-index:1; pointer-events:none; transition:background-color 0.4s linear; }
.cn-stage .rl-map{ cursor:default; }

.cn-select select{ min-width:120px; }
.cn-sun{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; font-weight:600; color:var(--text-muted); }
.cn-sun i{ flex:none; width:12px; height:12px; border-radius:50%; background:var(--route-highlight); box-shadow:0 0 0 3px var(--bg-panel-raised); }
.cn-sun span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cn-cache{
  position:absolute; top:76px; left:50%; transform:translateX(-50%); z-index:4; padding:7px 12px; border-radius:8px;
  background:var(--bg-panel); border:1px solid var(--border-strong); font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:0.04em; white-space:nowrap;
}
.cn-cache[hidden]{ display:none; }

.cn-finish-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.cn-loader-sub{ display:block; min-height:16px; margin-bottom:6px; color:var(--text-muted); font-size:12px; }
.cn-loader-actions{ display:flex; gap:8px; }

/* export */
.cn-export{ position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(12,14,18,0.72); overflow:auto; }
.cn-export[hidden]{ display:none; }
.cn-export-card{ width:min(100%, 560px); max-height:calc(100dvh - 32px); overflow:auto; background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--border-strong); border-top:5px solid var(--route-highlight); border-radius:14px; padding:16px; }
.cn-field-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.cn-field-row .rl-field{ flex-direction:column; align-items:stretch; gap:6px; }
.cn-field-row select{ width:100%; }
.cn-export-note{ margin:12px 0; font-size:13px; line-height:1.5; color:var(--text-muted); }
.cn-export-status{ margin:0 0 10px; font-size:14px; font-weight:600; }
.cn-export-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:12px; }
.cn-export-preview{ display:block; width:100%; max-height:200px; object-fit:contain; margin:12px 0; border:1px solid var(--border-strong); border-radius:8px; background:#e9eef2; }
#cnExpBar{ height:100%; width:0; background:var(--route-highlight); transition:width 0.25s ease; }
.cn-sections{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.cn-sections li{ min-width:54px; padding:6px 8px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg-panel-raised); font-family:var(--font-mono); font-size:11px; font-weight:700; text-align:center; }
.cn-sections li small{ display:block; font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.cn-sections li.is-caching{ border-color:var(--route-highlight); }
.cn-sections li.is-encoding{ background:var(--route-highlight); color:var(--route-highlight-ink); border-color:var(--route-highlight); }
.cn-sections li.is-encoding small{ color:inherit; }
.cn-sections li.is-done{ background:var(--text-primary); color:var(--bg-panel); border-color:var(--text-primary); }
.cn-sections li.is-done small{ color:inherit; }

/* while exporting, the map renders at the export size behind the opaque dialog */
body.cn-exporting .cn-stage .rl-map{ position:fixed; left:0; top:0; right:auto; bottom:auto; z-index:1; }
body.cn-exporting .cn-stage .rl-map.maplibregl-map{ position:fixed; inset:auto; }

@media (max-width: 760px){
  .cn-cache{ top:70px; }
  #cnTod{ min-width:0; }
  .cn-select{ display:none; }
}

/* ---------- readout card: bare text at rest; tap to select, move, resize and fade it (js/cinema-hud.js) ---------- */
.cn-stage .cn-hud{
  background:transparent; border:0; border-radius:14px; box-shadow:none; padding:8px;
  color:#fff; cursor:pointer; outline-offset:2px; touch-action:manipulation;
  text-shadow:0 1px 2px rgba(0,0,0,0.75), 0 0 8px rgba(0,0,0,0.5);
}
.cn-stage .cn-hud small, .cn-stage .cn-hud .cn-sun{ color:rgba(255,255,255,0.82); }
.cn-stage .cn-hud .cn-sun i{ box-shadow:0 0 0 3px rgba(0,0,0,0.35); }
.cn-stage .cn-hud .rl-hud-grid{ border-top-color:rgba(255,255,255,0.28); }
.cn-hud-body{ transform-origin:0 0; }
.cn-hud.is-manual{ right:auto; min-width:0; box-sizing:border-box; overflow:hidden; }
.cn-hud.is-manual .cn-hud-body{ position:absolute; left:8px; top:8px; }
.cn-hud-op, .cn-hud-handle{ display:none; }

.cn-stage .cn-hud.is-selected{
  cursor:move; touch-action:none; user-select:none; -webkit-user-select:none;
  border:1px solid rgba(255,255,255,0.45);
  background:rgba(14,18,28,0.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 6px 24px rgba(0,0,0,0.28);
}
.cn-hud.is-selected .cn-hud-op{
  display:flex; align-items:center; gap:8px; position:absolute; left:8px; right:36px; bottom:5px; height:22px;
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; cursor:default; text-shadow:none;
}
.cn-hud-op input{ flex:1; min-width:0; height:22px; margin:0; accent-color:var(--route-highlight); touch-action:pan-y; }
.cn-hud-op output{ width:34px; text-align:right; color:rgba(255,255,255,0.9); }
.cn-hud.is-selected .cn-hud-handle{
  display:block; position:absolute; right:0; bottom:0; width:32px; height:32px; cursor:nwse-resize; touch-action:none;
  background:linear-gradient(135deg, transparent 0 52%, rgba(255,255,255,0.9) 52% 58%, transparent 58% 70%, rgba(255,255,255,0.9) 70% 76%, transparent 76% 100%);
  border-bottom-right-radius:13px;
}
@media (prefers-reduced-transparency: reduce){
  .cn-stage .cn-hud.is-selected{ background:rgba(14,18,28,0.9); -webkit-backdrop-filter:none; backdrop-filter:none; }
}