/* Full-screen drone view: the thermal image with the camera's HUD over it (public/droneview.js moves
   the same views, map and timeline in here, so nothing is rendered twice). */
.dronevisning { --hud: rgba(12, 14, 18, .62); --hline: rgba(255, 255, 255, .18); position: fixed; inset: 0; z-index: 1000; background: #000; color: #f2f5f8; overflow: hidden; }
.dronevisning .slot { width: 100%; height: 100%; }
.dv-main { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dv-main .view { width: min(100vw, 125vh); border-radius: 0; }
.dronevisning .hud { position: absolute; background: var(--hud); backdrop-filter: blur(6px); border: 1px solid var(--hline); border-radius: 10px; }
.dronevisning .chip { padding: 5px 10px; border: 1px solid var(--hline); border-radius: 999px; background: rgba(255, 255, 255, .06); color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.dronevisning .chip.on { border-color: var(--acc); color: var(--acc); }
.dronevisning .chip.tiny { padding: 0 6px; font-size: 11px; }
.dv-top { top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; }
.dv-top .title { font-weight: 600; }
.dv-top .tele { color: #b7c0ca; white-space: nowrap; }
.dv-top .tele b { color: #f2f5f8; font-variant-numeric: tabular-nums; }
.dv-top .tele .foto { font-size: 11px; margin: 0; }
.dv-top .luk { font-weight: 700; }
.dv-scale { left: 12px; top: calc(var(--dv-top-end, 78px) + 12px); bottom: calc(var(--dv-time-h, 60px) + 24px + var(--dv-tile-h, 150px) + 12px); width: 54px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: 12px; font-variant-numeric: tabular-nums; }
.dv-scale .scale-bar { position: static; flex: 1; width: 12px; margin: 6px 0; }
.dv-zoom { right: 12px; top: calc(var(--dv-top-end, 78px) + 12px); display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.dv-zoom button { width: 52px; height: 36px; border-radius: 8px; border: 1px solid var(--hline); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.dv-zoom button[aria-checked="true"] { border-color: var(--acc); color: var(--acc); }
.dronevisning { --dv-tile-h: 240px; }
.dv-mini { left: 12px; bottom: calc(var(--dv-time-h, 60px) + 24px); width: 230px; height: var(--dv-tile-h, 150px); overflow: hidden; padding: 0; }
.dv-mini .kort { height: 100%; border-radius: 0; }
.dv-mini .leaflet-control-zoom { display: none; }
.dv-mini .cap, .dv-pip .swap { position: absolute; top: 6px; font-size: 11px; background: var(--hud); padding: 2px 8px; border-radius: 6px; z-index: 500; }
.dv-mini .cap { left: 8px; color: #b7c0ca; pointer-events: none; }
.dv-pip { right: 12px; bottom: calc(var(--dv-time-h, 60px) + 24px); width: calc(var(--dv-tile-h) * 1.25); overflow: hidden; padding: 0; }
.dv-pip .view { border-radius: 0; }
.dv-pip .swap { right: 8px; border: 1px solid var(--hline); color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.dv-time { left: 12px; right: 12px; bottom: 12px; padding: 0; }
.dv-time .time { margin: 0; background: transparent; border: 0; padding: 8px 14px 22px; }
.dronevisning .scale { display: none; }
.dronevisning .dv-pip .tag { font-size: 11px; top: 6px; left: 8px; padding: 2px 6px; }
.dronevisning .dv-main .tag { display: none; }
.dv-mini .leaflet-control-attribution { font-size: 9px; }
@media (max-width: 700px) {
  .dv-top { gap: 6px 8px; padding: 6px 8px; font-size: 12px; }
  .dv-top .title { display: none; }
  .dronevisning .chip { padding: 3px 8px; }
  .dronevisning { --dv-tile-h: calc(44vw * 0.8); } /* the 5:4 camera tile at 44 % of the width */
  .dv-scale { width: 46px; }
  .dv-zoom button { width: 44px; height: 32px; }
  .dv-mini { width: 40vw; }
}
.dv-mini .skade-legende ul { max-height: 100px; }