/* Hartmans øye (XU-26) — page chrome, «classified terminal» design.
   Deep green-black plates, phosphor accents, amber for warnings, red for military, a TS/SCI
   yellow classification banner top and bottom (decoration: a hobby page for the lag, not a
   classified system). Condensed caps for labels, mono for data, squared corners.
   The HUD, overlay-canvas, scope-mask and split-flap rules further down are ported from
   gods-eye-view src/ui/styles/overlays.css, foundation.css and status.css
   (MIT, Copyright (c) 2026 Bilawal Sidhu, see vendor/gev/LICENSE). */

:root {
  --hoe-bg: #050706;
  --hoe-glass: rgba(6, 11, 9, 0.86);
  --hoe-glass-strong: rgba(4, 8, 6, 0.95);
  --hoe-line: rgba(125, 255, 170, 0.13);
  --hoe-line-strong: rgba(125, 255, 170, 0.3);
  --hoe-text: #d9e7dd;
  --hoe-text-dim: rgba(217, 231, 221, 0.6);
  --hoe-text-faint: rgba(217, 231, 221, 0.4);
  --hoe-fos: #7dffaa; /* phosphor */
  --hoe-fos-dim: rgba(125, 255, 170, 0.13);
  --hoe-fos-glow: rgba(125, 255, 170, 0.35);
  --hoe-amber: #ffb020;
  --hoe-amber-dim: rgba(255, 176, 32, 0.14);
  --hoe-rod: #ff4a3d;
  --hoe-ts: #fce83a; /* TS/SCI banner yellow */
  /* Old names kept for rules ported earlier. */
  --hoe-accent: var(--hoe-fos);
  --hoe-accent-dim: var(--hoe-fos-dim);
  --hoe-danger: var(--hoe-rod);
  --hoe-blaze: var(--hoe-amber);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --font-kond: 'Saira Condensed', 'Arial Narrow', 'JetBrains Mono', sans-serif;
  --font-stencil: 'Saira Stencil One', 'Saira Condensed', sans-serif;
  --gutter: 12px;
  --banner-h: 16px;
  --dokk-h: 64px;
  --kreditt-h: 26px;
  /* Home indicator / Android edge-to-edge (the page sets viewport-fit=cover): every rule that
     stacks above the credit line adds this, so sheets and cards never slide over the dock. */
  --bunn-inset: env(safe-area-inset-bottom, 0px);
  --hoe-topp-bunn: 96px;
  --rail-b: 36px;
  --lagpanel-b: min(340px, calc(100vw - 2 * var(--gutter)));
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--hoe-bg);
  color: var(--hoe-text);
  font-family: var(--font-mono);
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

button, select, a, input { font: inherit; color: inherit; }

:where(button, a[href], select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--hoe-fos);
  outline-offset: 2px;
}

.ikon { display: block; width: 16px; height: 16px; flex: none; }

/* ── Classification banners ────────────────────────────────────────────── */
.klass-banner {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 110;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  background: var(--hoe-ts);
  color: #0b0b00;
  font-family: var(--font-kond);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.klass-banner.topp { top: 0; height: calc(var(--banner-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
.klass-banner.bunn { bottom: 0; height: calc(var(--banner-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }

/* ── Globe ─────────────────────────────────────────────────────────────── */
#globe { position: fixed; inset: 0; background: var(--hoe-bg); }
#globe .cesium-viewer,
#globe .cesium-widget,
#globe .cesium-widget canvas { width: 100%; height: 100%; }

/* ── Plain boot line and login gate ────────────────────────────────────── */
#hoe-boot {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  padding: 10px 16px;
  border: 1px solid var(--hoe-line-strong);
  background: var(--hoe-glass-strong);
  color: var(--hoe-fos);
  letter-spacing: 2px;
  font-size: 12px;
  text-align: center;
  max-width: calc(100vw - 2 * var(--gutter));
}
#hoe-boot::after { content: '▮'; margin-left: 6px; animation: hoe-blink 1s steps(1) infinite; }
#hoe-boot.feil { color: var(--hoe-rod); letter-spacing: 0.5px; }
#hoe-boot.feil::after { content: none; }
body:not(.hoe-laster) #hoe-boot:not(.feil) { display: none; }
@keyframes hoe-blink { 50% { opacity: 0; } }

#hoe-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(125, 255, 170, 0.03) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 45%, #0b1510 0%, var(--hoe-bg) 70%);
}
.gate-plate {
  width: min(420px, 100%);
  padding: 26px 22px 28px;
  border: 1px solid var(--hoe-line-strong);
  background: var(--hoe-glass-strong);
  text-align: center;
}
.gate-stempel {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border: 2px solid var(--hoe-rod);
  color: var(--hoe-rod);
  font-family: var(--font-kond);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 13px;
  transform: rotate(-2deg);
}
.gate-kode { font-family: var(--font-stencil); font-size: 46px; letter-spacing: 4px; color: var(--hoe-fos); line-height: 1; }
.gate-tekst { margin: 16px 0 22px; line-height: 1.5; font-size: 14px; }
.nowrap { white-space: nowrap; }
.gate-lenke {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--hoe-fos);
  color: var(--hoe-fos);
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 13px;
}
.gate-lenke:hover { background: var(--hoe-fos-dim); }

/* ── Boot sequence ─────────────────────────────────────────────────────── */
#hoe-oppstart {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: calc(var(--banner-h) + 16px) 16px;
  background: radial-gradient(circle at 50% 40%, #07120c 0%, #020403 72%);
  color: var(--hoe-fos);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#hoe-oppstart.inne { opacity: 1; }
#hoe-oppstart.ut { opacity: 0; transition-duration: 0.42s; }
.opp-skann {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.opp-ramme { position: relative; width: min(620px, 100%); }
.opp-hode { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--hoe-line-strong); padding-bottom: 10px; }
.opp-merke { font-family: var(--font-stencil); font-size: 40px; letter-spacing: 4px; line-height: 1; text-shadow: 0 0 18px var(--hoe-fos-glow); }
.opp-under { font-family: var(--font-kond); font-weight: 600; letter-spacing: 3px; font-size: 13px; color: var(--hoe-text-dim); }
.opp-linjer { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.9; letter-spacing: 0.6px; }
.opp-linje { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.opp-linje::before { content: '>'; color: var(--hoe-text-faint); }
.opp-tekst { flex: none; max-width: calc(100% - 7em); overflow: hidden; text-overflow: ellipsis; }
.opp-fyll { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(125, 255, 170, 0.28); transform: translateY(-4px); }
.opp-status { flex: none; min-width: 3.2em; text-align: right; font-weight: 700; }
.opp-linje.venter .opp-status::after { content: '▮'; animation: hoe-blink 0.8s steps(1) infinite; }
.opp-linje.feil .opp-status { color: var(--hoe-rod); }
.opp-linje.slutt { margin-top: 8px; color: #0b0b00; background: var(--hoe-fos); padding: 0 8px; font-weight: 700; letter-spacing: 2px; }
.opp-linje.slutt::before, .opp-linje.slutt .opp-fyll, .opp-linje.slutt .opp-status { display: none; }
.opp-bar { margin-top: 16px; height: 3px; background: rgba(125, 255, 170, 0.12); }
.opp-bar > span { display: block; height: 100%; width: 0; background: var(--hoe-fos); box-shadow: 0 0 10px var(--hoe-fos-glow); transition: width 0.25s ease; }
.opp-hint { margin: 14px 0 0; font-size: 11px; color: var(--hoe-text-faint); letter-spacing: 1px; }

/* ── Shared plates and buttons ─────────────────────────────────────────── */
#hoe-topp,
#hoe-dokk,
#hoe-lagpanel,
#hoe-param,
#hoe-intel,
#hoe-scene,
#hoe-kort {
  background: var(--hoe-glass);
  border: 1px solid var(--hoe-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}

/* .gt-lenke is the link back to the GT app: an <a>, styled exactly like the top-bar buttons. */
#hoe-topp :is(button, .gt-lenke),
#hoe-dokk button,
#hoe-kort button,
#hoe-scene button,
#hoe-ren-ut,
.panel-hode .lukk,
.tekstknapp {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--hoe-line-strong);
  border-radius: 0;
  background: rgba(125, 255, 170, 0.025);
  color: var(--hoe-text);
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
#hoe-topp :is(button, .gt-lenke):hover,
#hoe-dokk button:hover,
#hoe-kort button:hover,
#hoe-scene button:hover,
#hoe-ren-ut:hover,
.panel-hode .lukk:hover,
.tekstknapp:hover { border-color: var(--hoe-fos); color: #effff4; }

:is(button, a)[aria-pressed='true'],
:is(button, a)[aria-expanded='true'],
:is(button, a)[aria-current='page'],
:is(button, a)[aria-current='location'] {
  border-color: var(--hoe-fos) !important;
  background: var(--hoe-fos-dim) !important;
  color: #effff4 !important;
  box-shadow: inset 0 0 12px rgba(125, 255, 170, 0.12), 0 0 12px rgba(125, 255, 170, 0.1);
}
/* Disclosure headers are not "active" controls. */
.gruppe-hode[aria-expanded],
.intel-hode[aria-expanded] { box-shadow: none !important; }
.gruppe-hode[aria-expanded='true'],
.intel-hode[aria-expanded='true'] { border-color: transparent !important; background: transparent !important; color: inherit !important; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
#hoe-topp {
  position: fixed;
  top: calc(var(--banner-h) + env(safe-area-inset-top) + 6px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 30;
  padding: 6px 6px 0;
}
.topp-hoved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.merke { display: flex; align-items: center; gap: 9px; padding: 0 8px 0 4px; margin-right: 2px; white-space: nowrap; border-right: 1px solid var(--hoe-line); }
.merke-kode { font-family: var(--font-stencil); color: var(--hoe-fos); font-size: 22px; letter-spacing: 2px; line-height: 1; text-shadow: 0 0 12px var(--hoe-fos-glow); }
.merke-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.merke-navn, .merke-lag { font-family: var(--font-kond); text-transform: uppercase; letter-spacing: 2.5px; font-weight: 600; font-size: 11px; }
.merke-navn { color: var(--hoe-text); }
.merke-lag { color: var(--hoe-amber); font-size: 10px; }
.modus, .topp-hoyre { display: flex; gap: 4px; flex-wrap: wrap; }
.modus { gap: 0; }
.modus button + button { margin-left: -1px; }
.modus .kort { display: none; }
.topp-hoyre { margin-left: auto; }
.med-ikon .ik:empty { display: none; }
.knapp-teller { font-family: var(--font-mono); font-size: 10px; color: var(--hoe-fos); letter-spacing: 0; }
.knapp-teller:empty { display: none; }

/* Status line (split-flap) */
#hoe-statuslinje {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px -6px 0;
  padding: 3px 10px 4px;
  border-top: 1px solid var(--hoe-line);
  background: rgba(0, 0, 0, 0.28);
  font-size: 11px;
  letter-spacing: 0.6px;
  min-height: 21px;
  white-space: nowrap;
  overflow: hidden;
}
.sl-tid { color: var(--hoe-text-faint); flex: none; }
.sl-pil { color: var(--hoe-fos); flex: none; }
#hoe-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--hoe-text); }
#hoe-statuslinje[data-niva='hvile'] #hoe-status { color: var(--hoe-fos); text-transform: uppercase; letter-spacing: 1.4px; }
#hoe-statuslinje[data-niva='varsel'] .sl-pil,
#hoe-statuslinje[data-niva='varsel'] #hoe-status { color: var(--hoe-amber); }
#hoe-statuslinje[data-niva='feil'] .sl-pil,
#hoe-statuslinje[data-niva='feil'] #hoe-status { color: var(--hoe-rod); }

/* ── Search ────────────────────────────────────────────────────────────── */
.hoe-sok { position: relative; flex: 1 1 220px; max-width: 360px; min-width: 180px; }
#hoe-topp #hoe-sok-knapp { display: none; }
.sok-panel { position: relative; }
#hoe-sok-inp {
  width: 100%;
  min-height: 32px;
  padding: 5px 10px 5px 30px;
  border: 1px solid var(--hoe-line-strong);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dffaa' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5.5 5.5'/%3E%3C/svg%3E") no-repeat 9px 50% / 14px 14px;
  color: var(--hoe-text);
  font-family: var(--font-mono);
  font-size: 12px;
}
#hoe-sok-inp::placeholder { color: var(--hoe-text-faint); }
#hoe-sok-inp:focus { outline: none; border-color: var(--hoe-fos); }
.hoe-sok.soker #hoe-sok-inp { background-image: none; }
.hoe-sok.soker .sok-panel::before { content: '▮'; position: absolute; left: 11px; top: 8px; color: var(--hoe-fos); animation: hoe-blink 0.6s steps(1) infinite; z-index: 1; }
#hoe-sok-liste, .sok-kreditt { display: none; }
.hoe-sok.har-liste #hoe-sok-liste {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: min(60vh, 420px);
  overflow: auto;
  background: var(--hoe-glass-strong);
  border: 1px solid var(--hoe-line-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
}
.sok-valg { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 6px 10px; cursor: pointer; border-left: 2px solid transparent; }
.sok-valg[aria-selected='true'] { background: var(--hoe-fos-dim); border-left-color: var(--hoe-fos); }
/* The list still shows the previous query's rows while the new one runs: dim them. */
.hoe-sok.utdatert .sok-valg { opacity: 0.5; }
.sok-navn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sok-type { font-family: var(--font-kond); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--hoe-amber); align-self: center; }
.sok-under { grid-column: 1 / -1; font-size: 11px; color: var(--hoe-text-dim); }
.sok-melding { padding: 8px 10px; color: var(--hoe-text-dim); font-size: 12px; }
/* Source credit: the list's last row (see shell/sokfelt.mjs). */
.sok-kreditt-rad { padding: 6px 10px 4px; border-top: 1px solid var(--hoe-line); }
.sok-kreditt-rad, .sok-kreditt { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 10.5px; line-height: 1.4; color: var(--hoe-text-dim); }
.sok-kreditt-rad a { color: #bff5d2; }

/* ── Scene rail and style badge ────────────────────────────────────────── */
#hoe-scene {
  position: fixed;
  z-index: 29;
  right: var(--gutter);
  top: calc(var(--hoe-topp-bunn) + 44px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  transition: right 0.2s ease;
}
#hoe-scene button { width: var(--rail-b); height: var(--rail-b); min-height: 0; padding: 0; }
#hoe-btn-nord { position: relative; }
#hoe-btn-nord .kompass-n { position: absolute; top: 1px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: 0; color: var(--hoe-amber); }
#hoe-btn-nord .kompass-nal { display: block; transform: rotate(calc(-1 * var(--camera-heading, 0deg))); transition: transform 0.08s linear; }
#hoe-btn-modell .ikon + span { font-size: 9px; }
#hoe-scene .kun-mobil { display: none; }
#hoe-dokk-knapp { display: none; }
/* New-version notice: one amber chip over the credits row, same corner language as the chrome. */
#hoe-nyversjon {
  position: fixed;
  z-index: 60;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + 10px);
  padding: 8px 14px;
  border: 1px solid var(--hoe-amber);
  background: rgba(2, 5, 3, 0.92);
  color: var(--hoe-amber);
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 176, 32, 0.25);
}
#hoe-nyversjon:hover { background: var(--hoe-amber-dim); }
body.lag-apen #hoe-scene { right: calc(var(--gutter) * 2 + var(--lagpanel-b)); }

#hoe-stilmerke {
  position: fixed;
  z-index: 29;
  right: var(--gutter);
  top: calc(var(--hoe-topp-bunn) + 8px);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--hoe-line);
  border-left: 2px solid var(--hoe-fos);
  font-size: 11px;
  transition: right 0.2s ease;
}
.sm-etikett { font-family: var(--font-kond); text-transform: uppercase; letter-spacing: 2px; font-size: 10px; color: var(--hoe-text-dim); }
#hoe-stilmerke-navn { font-family: var(--font-kond); letter-spacing: 2.5px; color: var(--hoe-fos); font-size: 13px; }
body.lag-apen #hoe-stilmerke { right: calc(var(--gutter) * 2 + var(--lagpanel-b)); }

/* The only way back from clean view on a phone (V is desktop-only), so it reads as chrome, not
   as one more DETECT callout: solid glass, phosphor border and text, a glow and corner ticks. */
#hoe-ren-ut {
  position: fixed;
  z-index: 45;
  top: calc(var(--banner-h) + env(safe-area-inset-top) + 8px);
  right: var(--gutter);
  opacity: 1;
  background: var(--hoe-glass-strong);
  border-color: var(--hoe-fos);
  color: var(--hoe-fos);
  box-shadow: 0 0 12px var(--hoe-fos-glow);
}
#hoe-ren-ut::before {
  content: '';
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background:
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top left / 6px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top left / 1px 6px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top right / 6px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top right / 1px 6px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom left / 6px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom left / 1px 6px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom right / 6px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom right / 1px 6px no-repeat;
}
#hoe-ren-ut:hover, #hoe-ren-ut:focus-visible { color: #effff4; background: rgba(8, 24, 14, 0.97); }

/* Clean view: all chrome away except the banners, the credits (licence duty) and the HUD. */
body.ren-visning :is(#hoe-topp, #hoe-dokk, #hoe-dokk-knapp, #hoe-scene, #hoe-stilmerke, #hoe-lagpanel, #hoe-param, #hoe-intel, #hoe-kort) {
  display: none !important;
}

/* ── Command dock (looks, view toggles, tools) ─────────────────────────── */
#hoe-dokk {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + 6px);
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 5px 6px 6px;
  max-width: calc(100vw - 2 * var(--gutter));
}
.dokk-seksjon { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; min-width: 0; }
.dokk-seksjon + .dokk-seksjon { border-left: 1px solid var(--hoe-line); }
.dokk-etikett { font-family: var(--font-kond); font-weight: 600; text-transform: uppercase; letter-spacing: 2.4px; font-size: 10px; color: var(--hoe-text-faint); }
#hoe-stiler, #hoe-dokk .brytere { display: flex; gap: 3px; }
#hoe-dokk .dokk-knapp { position: relative; min-width: 50px; padding: 7px 10px 6px; }
.dk-tast { position: absolute; top: 1px; right: 3px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0; color: var(--hoe-text-faint); font-weight: 500; }
[aria-pressed='true'] > .dk-tast { color: var(--hoe-fos); }

/* ── Panels ────────────────────────────────────────────────────────────── */
#hoe-lagpanel,
#hoe-param,
#hoe-intel {
  position: fixed;
  z-index: 35;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 12px 12px;
}
#hoe-lagpanel {
  right: var(--gutter);
  top: calc(var(--hoe-topp-bunn) + 8px);
  width: var(--lagpanel-b);
  max-height: calc(100vh - var(--hoe-topp-bunn) - var(--banner-h) - var(--bunn-inset) - var(--kreditt-h) - var(--dokk-h) - 32px);
}
#hoe-param {
  right: var(--gutter);
  width: min(330px, calc(100vw - 2 * var(--gutter)));
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 18px);
  max-height: 60vh;
}
#hoe-intel {
  left: var(--gutter);
  top: calc(var(--hoe-topp-bunn) + 8px);
  width: min(330px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - var(--hoe-topp-bunn) - var(--banner-h) - var(--bunn-inset) - var(--kreditt-h) - var(--dokk-h) - 32px);
}
.panel-hode {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -12px 8px;
  padding: 7px 8px 7px 12px;
  background: #040806; /* solid: rows scroll underneath */
  border-bottom: 1px solid var(--hoe-line-strong);
  font-family: var(--font-kond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  color: var(--hoe-fos);
}
.hode-teller { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--hoe-text-dim); margin-left: 6px; }
.hode-knapper { display: flex; gap: 4px; }
.panel-hode .lukk { min-height: 28px; width: 30px; padding: 0; }
.panel-hode .lukk::before { content: ''; width: 12px; height: 12px; background: currentColor; clip-path: polygon(10% 0, 50% 40%, 90% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 90%, 40% 50%, 0 10%); }
.tekstknapp { min-height: 28px; padding: 2px 8px; font-size: 11px; }
.panel-filter input,
.bakgrunn-rad select,
.valg-rad select {
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--hoe-line-strong);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: var(--hoe-text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.panel-filter { margin-bottom: 8px; }
.panel-filter input:focus { outline: none; border-color: var(--hoe-fos); }

.bakgrunn { padding-bottom: 8px; border-bottom: 1px solid var(--hoe-line); }
.bakgrunn h3,
.base-gruppe-navn {
  margin: 4px 0 6px;
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hoe-text-dim);
}
.base-gruppe-navn { margin: 8px 0 4px; font-size: 10px; color: var(--hoe-text-faint); }
.base-gruppe-navn b { color: var(--hoe-amber); font-weight: 600; }
.baser .base-rad { display: flex; flex-wrap: wrap; gap: 3px; }
.baser button {
  appearance: none;
  flex: 1 1 auto;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--hoe-line-strong);
  border-radius: 0;
  background: rgba(125, 255, 170, 0.02);
  color: var(--hoe-text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  cursor: pointer;
}
.baser button:hover { border-color: var(--hoe-fos); }
.bakgrunn-rad { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 8px 0 2px; font-size: 11px; }
.bakgrunn-rad label { color: var(--hoe-text-dim); font-family: var(--font-kond); text-transform: uppercase; letter-spacing: 1.5px; }
#hoe-bakgrunn-merknad:empty { display: none; }

.lag-gruppe { margin-top: 8px; border-bottom: 1px solid var(--hoe-line); }
.gruppe-hode {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 2px;
  border: 0;
  background: transparent;
  color: var(--hoe-text-dim);
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.gruppe-hode:hover { color: var(--hoe-text); }
.gruppe-pil::before { content: '▾'; display: inline-block; width: 1em; color: var(--hoe-fos); transition: transform 0.15s ease; }
.lag-gruppe.lukket:not(.filtrert) .gruppe-pil::before { transform: rotate(-90deg); }
.gruppe-navn { flex: 1; }
.gruppe-teller { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--hoe-text-faint); }
.lag-gruppe.lukket:not(.filtrert) .gruppe-innhold { display: none; }
/* Thematic maps (temakart): their own group at the bottom, set apart from the data layers. */
.lag-gruppe.temakart { margin-top: 14px; border-top: 1px dashed var(--hoe-line); }
.lag-gruppe.temakart .gruppe-navn { color: var(--hoe-amber); }
.gruppe-hint { margin: 0 2px 6px; font-size: 10.5px; line-height: 1.4; color: var(--hoe-text-faint); }

.lag-rad { padding: 2px 0 6px; border-top: 1px solid rgba(125, 255, 170, 0.06); }
.lag-hoved { display: flex; align-items: center; gap: 10px; padding: 5px 2px; cursor: pointer; }
.lag-navn { flex: 1; min-width: 0; line-height: 1.3; }
.lag-antall { font-size: 11px; color: var(--hoe-fos); font-variant-numeric: tabular-nums; }
.lag-merke { font-family: var(--font-kond); font-size: 11px; letter-spacing: 1.5px; color: var(--hoe-text-dim); }
.lag-merke[data-tilstand='laster'] { color: var(--hoe-amber); }
.lag-rad.feilet .lag-merke { color: var(--hoe-rod); }
.lag-rad.feilet .lag-hoved { cursor: pointer; opacity: 0.7; } /* turning it on retries */
.lag-info { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.35; color: var(--hoe-text-dim); }
.lag-legende { list-style: none; margin: 2px 0 2px 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 10.5px; color: var(--hoe-text-dim); }
.lag-legende li { display: inline-flex; align-items: center; gap: 5px; }
.legende-farge { width: 9px; height: 9px; flex: none; border: 1px solid rgba(0, 0, 0, 0.6); }
/* Shapes for legend entries that describe an outline or a mark, not a fill colour. */
.legende-farge.form-stiplet { background: transparent; border: 1px dashed var(--hoe-text); }
.legende-farge.form-hul { background: transparent; border: 2px solid currentColor; }
.legende-farge.form-ring { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.legende-farge.form-tegn { width: auto; min-width: 9px; height: auto; border: 0; background: transparent; font-size: 11px; line-height: 1; text-align: center; text-shadow: 0 0 2px #000; }
.legende-farge.form-tegn::before { content: attr(data-tegn); }
.lag-rad:not(.paa) .lag-legende { display: none; }
.lag-valg { margin-left: 30px; }
.valg-rad { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--hoe-text-dim); cursor: pointer; }
/* The label takes what it needs and the control keeps a legible minimum. With `auto 1fr` a long
   label ate the row and the select collapsed to its chevron — «Kamera og valgt kontakt (fly og
   skip)» left an 18 px stub where the current value should be. minmax(0, …) on the label lets it
   ellipsise instead of pushing. */
.valg-rad.select { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5em, auto); }
.valg-rad.select > span { overflow: hidden; text-overflow: ellipsis; }
.valg-rad.av { cursor: default; opacity: 0.45; }
.tom { color: var(--hoe-text-dim); margin: 8px 0; }

/* Square phosphor switches */
input.bryter {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--hoe-line-strong);
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  cursor: pointer;
}
input.bryter.liten { width: 15px; height: 15px; }
input.bryter::after { content: ''; width: 60%; height: 60%; background: transparent; }
input.bryter:checked { border-color: var(--hoe-fos); }
input.bryter:checked::after { background: var(--hoe-fos); box-shadow: 0 0 8px var(--hoe-fos-glow); }
input.bryter:disabled { opacity: 0.4; cursor: default; }

.param-gruppe { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hoe-line); }
.param-slider-row { display: grid; grid-template-columns: 7.5em 1fr 3.4em; align-items: center; gap: 8px; padding: 3px 0; font-size: 11px; }
.param-label { color: var(--hoe-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-value { text-align: right; color: var(--hoe-text); }
.param-slider { width: 100%; accent-color: var(--hoe-fos); }
.bryter-rad { display: flex; align-items: center; gap: 8px; padding: 6px 0 2px; cursor: pointer; }
.param-merknad { color: var(--hoe-text-dim); font-size: 11px; line-height: 1.45; margin: 6px 0 4px; }

/* ── Intel dock ────────────────────────────────────────────────────────── */
.intel-seksjon { border-bottom: 1px solid var(--hoe-line); }
.intel-hode {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: var(--hoe-text);
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.intel-ikon { color: var(--hoe-fos); display: inline-flex; }
.intel-tegn { font-family: var(--font-mono); font-size: 11px; }
.intel-navn { flex: 1; }
.intel-merke { font-size: 10px; color: var(--hoe-rod); }
.intel-pil::before { content: '▾'; color: var(--hoe-text-faint); display: inline-block; transition: transform 0.15s ease; }
.intel-hode[aria-expanded='false'] .intel-pil::before { transform: rotate(-90deg); }
.intel-innhold { padding: 0 0 10px; font-size: 12px; line-height: 1.45; }
.intel-merknad { margin: 6px 0 0; font-size: 10.5px; color: var(--hoe-text-faint); }
.kontaktliste { list-style: none; margin: 0; padding: 0; }
.kontaktliste button {
  appearance: none;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 8px;
  width: 100%;
  padding: 5px 4px;
  border: 0;
  border-bottom: 1px solid rgba(125, 255, 170, 0.06);
  background: transparent;
  color: var(--hoe-text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.kontaktliste button:hover, .kontaktliste button:focus-visible { background: var(--hoe-fos-dim); }
.k-farge { grid-column: 1; grid-row: 1 / 3; width: 8px; height: 8px; margin-top: 4px; }
.k-id { grid-column: 2; grid-row: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-avst { grid-column: 3; grid-row: 1; color: var(--hoe-fos); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-type { grid-column: 2 / 4; grid-row: 2; font-size: 10.5px; color: var(--hoe-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kilde-rad { padding: 6px 0; border-bottom: 1px solid rgba(125, 255, 170, 0.06); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 11.5px; }
.kilde-navn { font-family: var(--font-kond); text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; color: var(--hoe-amber); }
.kilde-tekst a, .intel-innhold a { color: #bff5d2; }
.datagrunnlag details { margin-top: 4px; }
.datagrunnlag summary { cursor: pointer; color: var(--hoe-text-dim); font-size: 11px; }
.dg-liste { list-style: none; margin: 4px 0 0; padding: 0; font-family: var(--font-mono); font-size: 10.5px; }
.dg-liste li { padding: 2px 0; border-bottom: 1px solid rgba(125, 255, 170, 0.05); overflow-wrap: anywhere; }
.dg-liste .dg-meta { color: var(--hoe-text-dim); }
.dg-liste li.gammel .dg-meta, .dg-varsel { color: var(--hoe-amber); font-weight: 500; }

/* ── Card panel ────────────────────────────────────────────────────────── */
#hoe-kort {
  position: fixed;
  z-index: 32;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 18px);
  width: max-content;
  min-width: min(300px, calc(100vw - 2 * var(--gutter)));
  max-width: min(460px, calc(100vw - 2 * var(--gutter)));
  max-height: 52vh;
  overflow: auto;
  padding: 8px 10px;
  background: rgba(3, 9, 6, 0.93);
  border-top: 2px solid var(--kort-accent, var(--hoe-fos));
  font-size: 11.5px;
  line-height: 1.5;
}
#hoe-kort .kort-hode {
  position: sticky;
  top: -8px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px -10px 6px;
  padding: 6px 8px 6px 10px;
  background: rgba(3, 9, 6, 0.97);
  border-bottom: 1px solid var(--hoe-line);
}
#hoe-kort .kort-tittel { flex: 1; min-width: 0; font-family: var(--font-kond); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; color: #f0fff5; text-transform: uppercase; overflow-wrap: anywhere; }
#hoe-kort .kort-tittel-mini { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-kond); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hoe-text-dim); }
#hoe-kort .kort-hode button { min-height: 28px; padding: 2px 8px; font-size: 12px; }
#hoe-kort .kort-detaljer { margin: 4px 0 6px; color: rgba(190, 210, 198, 0.95); }
#hoe-kort .kort-kilde { margin-top: 6px; color: var(--hoe-text-dim); overflow-wrap: anywhere; }
#hoe-kort a { color: var(--hoe-fos); }
/* A world-anchored card without extras is just its title row. */
#hoe-kort.forankret > .kort-hode:only-child { margin-bottom: -8px; border-bottom: 0; }
#hoe-kort .kort-varsel { margin: 4px 0; padding: 5px 8px; border-left: 2px solid var(--hoe-amber); background: var(--hoe-amber-dim); color: #ffe3b0; }
#hoe-kort .kort-varsel b { font-family: var(--font-kond); letter-spacing: 1.5px; color: var(--hoe-amber); margin-right: 4px; }
#hoe-kort .kort-lenker { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
#hoe-kort .kort-lenke { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--hoe-line-strong); text-decoration: none; font-size: 11.5px; }
#hoe-kort .kort-lenke:hover { border-color: var(--hoe-fos); background: var(--hoe-fos-dim); }
#hoe-kort .kort-lenke .ikon { width: 12px; height: 12px; }
#hoe-kort figure { margin: 6px 0 0; }
#hoe-kort .kort-bilde img { display: block; width: 100%; max-height: 34vh; object-fit: contain; background: #000; border: 1px solid var(--hoe-line); }
#hoe-kort figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--hoe-text-dim); padding-top: 3px; }
.kort-tid { color: var(--hoe-fos); font-variant-numeric: tabular-nums; white-space: nowrap; }
#hoe-kort .kort-iframe, #hoe-kort .kort-video-ramme { margin-top: 6px; }
#hoe-kort .kort-video { background: #000 center / cover no-repeat; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; }
#hoe-kort .kort-last { width: 100%; min-height: 40px; justify-content: flex-start; text-transform: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; background: rgba(0, 0, 0, 0.6); }
#hoe-kort .kort-last small { color: var(--hoe-text-dim); white-space: nowrap; }
/* The host name must not run past the button on a phone: the label wraps, the host name as a unit. */
#hoe-kort .kort-last { white-space: normal; text-align: left; }
#hoe-kort iframe { display: block; width: 100%; height: 34vh; border: 1px solid var(--hoe-line); background: #000; }
#hoe-kort video { display: block; width: 100%; max-height: 34vh; background: #000; }
.kort-kreditt { display: block; font-size: 10.5px; color: var(--hoe-text-dim); padding-top: 3px; }
.kort-kreditt:empty { display: none; }

/* ── Ride readout (F: fly with the selected contact, layers/fly-ritt.mjs) ─ */
/* In the narrow lane right under the top bar, centred: the tactical HUD owns the corners below it
   (.hud-top-left starts at 120 px and the REC block sits opposite), the style badge sits far
   right, and a strip at 100 px clears all three. Deliberately NOT hidden by clean
   view (see the body.ren-visning rule above) — riding with the chrome off is exactly what clean
   view is for, and the age of the last REAL position is the one thing that must never leave the
   screen: a dead-reckoned contact whose feed stopped looks identical to one that is flying. */
#hoe-ritt {
  position: fixed;
  z-index: 33;
  /* Centred with auto margins and NOT with left:50% + translate: a fixed box at left:50% only has
     half the viewport to lay out in, so the line wrapped to two rows at 720 px and the second row
     grew down into the tactical HUD's top-left block. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  top: calc(var(--hoe-topp-bunn) + 4px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 10px;
  max-width: min(980px, calc(100vw - 2 * var(--gutter)));
  padding: 4px 11px 5px;
  background: rgba(3, 9, 6, 0.9);
  border: 1px solid var(--hoe-line);
  border-top: 2px solid var(--hoe-fos);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
  /* It is a readout, not a control: a click on it belongs to the globe underneath. */
  pointer-events: none;
}
/* The look is the one control on screen while you ride: the layer-panel select is behind a scroll
   and a phone has no F key, so COCKPIT/FORFØLGER is switched by pressing the word. The box around
   it is pointer-events: none; this is the exception. */
#hoe-ritt .rt-look {
  font-family: var(--font-kond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--hoe-fos);
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  margin: 0;
  padding: 0 4px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--hoe-fos) 45%, transparent);
  text-transform: uppercase;
}
#hoe-ritt .rt-look:hover, #hoe-ritt .rt-look:focus-visible { border-color: var(--hoe-fos); outline: none; }
#hoe-ritt .rt-navn { font-family: var(--font-kond); font-weight: 600; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: #f0fff5; }
#hoe-ritt :is(.rt-hoyde, .rt-kurs, .rt-alder, .rt-merk, .rt-hint) { border-left: 1px solid var(--hoe-line); padding-left: 10px; }
#hoe-ritt .rt-alder { color: var(--hoe-fos); }
#hoe-ritt[data-niva='beregnet'] .rt-alder { color: var(--hoe-amber); }
#hoe-ritt[data-niva='gammel'] .rt-alder { color: var(--hoe-rod); font-weight: 700; }
#hoe-ritt .rt-hint { color: var(--hoe-text-faint); }
/* «uten 3D-modell»: only set in the chase look when there is nothing at the seat to look at. */
#hoe-ritt .rt-merk { color: var(--hoe-text-dim); }
#hoe-ritt .rt-merk:empty { display: none; }
/* The card is hidden while a ride is on (body.hoe-rir below), so its Slipp/Del/Lukk live here:
   these buttons are, with .rt-look, the exceptions to the readout's pointer-events: none. */
#hoe-ritt .rt-knapper { display: inline-flex; gap: 6px; margin-left: 6px; align-self: center; }
#hoe-ritt .rt-knapper button {
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  margin: 0;
  padding: 2px 9px 3px;
  background: transparent;
  border: 1px solid var(--hoe-line-strong);
  color: #f0fff5;
  font-family: var(--font-kond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
#hoe-ritt .rt-knapper button:hover,
#hoe-ritt .rt-knapper button:focus-visible { border-color: var(--hoe-fos); color: var(--hoe-fos); background: var(--hoe-fos-dim); outline: none; }
@media (pointer: coarse) {
  /* Finger targets: the row sits alone at the bottom of the readout strip, well clear of the
     HUD corners (they are pushed below the strip's measured height) and of the dock. */
  #hoe-ritt .rt-knapper button { min-height: 36px; min-width: 44px; padding: 6px 12px; }
}

/* While the camera rides a contact the card is HIDDEN, not closed — closing it is the deliberate
   end-of-ride path (Esc). shell/kort.mjs hides the world-anchored variant off the same class. */
body.hoe-rir #hoe-kort { display: none; }
@media (max-width: 640px) {
  /* A phone keeps the hint — it is the only place that says how to get out, since there is no Esc
     and no F there (fly-ritt.mjs writes «dra for å slippe» instead). The speed and the altitude
     drop their second unit in the same place. */
  #hoe-ritt { font-size: 10.5px; gap: 1px 7px; padding: 3px 8px 4px; }
  #hoe-ritt :is(.rt-hoyde, .rt-kurs, .rt-alder, .rt-merk, .rt-hint) { padding-left: 7px; }
}

/* The readout and the tactical HUD's top corners are both anchored to the bottom of the top bar,
   and a readout that wraps lands on the corner blocks: always at 390 px (six fields never fit one
   row), and on a desktop too once the button row and «uten 3D-modell» are aboard. The corners
   move down by the readout's MEASURED height while a ride is on — at every width, since the wrap
   can happen at any of them — fly-ritt.mjs sets --hoe-ritt-h and the body class. The id/attribute
   selectors below are the ones that set `top` for the tactical and operator HUDs; they have to be
   out-specified, not just followed. */
body.hoe-rir :is(.hud-top-left, .hud-top-right),
body.hoe-rir #intel-hud[data-variant='tactical'] :is(.hud-top-left, .hud-top-right),
body.hoe-rir #intel-hud[data-variant='operator'] :is(.hud-top-left, .hud-top-right) {
  top: calc(var(--hoe-topp-bunn) + 12px + var(--hoe-ritt-h, 34px));
}

/* ── Keyboard help ─────────────────────────────────────────────────────── */
#hoe-taster {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 2 * var(--gutter)));
  padding: 0 14px 12px;
  background: var(--hoe-glass-strong);
  border: 1px solid var(--hoe-line-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
#hoe-taster .panel-hode { margin: 0 -14px 8px; }
#hoe-taster dl { display: grid; grid-template-columns: 4.5em 1fr; gap: 5px 12px; margin: 0; font-size: 12px; }
#hoe-taster dt { color: var(--hoe-fos); font-weight: 700; }
#hoe-taster dd { margin: 0; color: var(--hoe-text); }

/* Corner ticks on the main plates: the terminal frame. */
#hoe-topp::before, #hoe-dokk::before, #hoe-taster::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top left / 10px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top left / 1px 10px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top right / 10px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) top right / 1px 10px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom left / 10px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom left / 1px 10px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom right / 10px 1px no-repeat,
    linear-gradient(var(--hoe-fos), var(--hoe-fos)) bottom right / 1px 10px no-repeat;
  opacity: 0.7;
}

/* ── Credits (Cesium + Kartverket + layer attributions), always on screen ─ */
#hoe-kreditt {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: calc(var(--banner-h) + var(--bunn-inset));
  padding: 3px var(--gutter) 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  background: rgba(2, 5, 3, 0.8);
  border-top: 1px solid var(--hoe-line);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(217, 231, 221, 0.86);
}
#hoe-kreditt a { color: #bff5d2; }
#hoe-kreditt-lag { order: 2; flex: 1 1 100%; }
#hoe-kreditt-lag:empty { display: none; }
#hoe-kreditt-lag .skille { opacity: 0.5; padding: 0 4px; }
#hoe-kreditt-cesium { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
#hoe-kreditt-cesium .cesium-widget-credits { position: static; display: inline; padding: 0; font-size: inherit; text-shadow: none; }
#hoe-kreditt-cesium .cesium-credit-logoContainer { display: inline-flex !important; align-items: center; }
#hoe-kreditt-cesium .cesium-credit-logoContainer img,
#hoe-kreditt-cesium .cesium-credit-logoContainer .cesium-credit-imageContainer img { max-height: 16px; vertical-align: middle; }
#hoe-kreditt-cesium .cesium-credit-textContainer { display: inline; }
#hoe-kreditt-cesium .cesium-credit-expand-link { color: #bff5d2; cursor: pointer; text-decoration: underline; }
/* Credits behind an (i) by default. The collapsed footer is transparent and lets clicks
   through to the map; only the button (and, in Google modes, Google's own credit line) stays.
   Google's terms require its logo and data credit on screen, so html[data-hoe-modus="sat"|"3d"]
   keeps #hoe-kreditt-cesium visible. */
#hoe-kreditt-knapp {
  order: 0;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hoe-line);
  background: rgba(2, 5, 3, 0.82);
  color: #bff5d2;
  font: italic 700 12px/18px Georgia, 'Times New Roman', serif;
  text-align: center;
  cursor: pointer;
}
#hoe-kreditt-knapp:hover, #hoe-kreditt-knapp[aria-expanded="true"] { border-color: var(--hoe-fos); color: var(--hoe-fos); }
/* Touch: a 20 px circle is too small a target for a finger. The circle grows a little and an
   invisible margin makes the hit area about 44 px, without moving anything else. */
@media (pointer: coarse) {
  #hoe-kreditt-knapp { position: relative; width: 24px; height: 24px; font-size: 14px; line-height: 22px; }
  #hoe-kreditt-knapp::after { content: ''; position: absolute; inset: -10px; }
}
#hoe-kreditt-knapp:focus-visible { outline: 2px solid var(--hoe-fos); outline-offset: 2px; }
#hoe-kreditt.lukket { background: transparent; border-top-color: transparent; pointer-events: none; }
#hoe-kreditt.lukket > * { pointer-events: auto; }
#hoe-kreditt.lukket #hoe-kreditt-lag { display: none; }
html[data-hoe-modus="kart"] #hoe-kreditt.lukket #hoe-kreditt-cesium { display: none; }
html:not([data-hoe-modus="kart"]) #hoe-kreditt.lukket #hoe-kreditt-cesium {
  background: rgba(2, 5, 3, 0.72);
  padding: 1px 6px;
  border-radius: 2px;
}
/* Google modes, collapsed: at most two lines (the user's report 2026-09-28). Up close Google names
   every imagery provider of the view, and ion's per-tile line can differ from the per-view one, so
   the box grew to a large part of the screen. Google's tile policy allows a shortened line when the
   full list is one click away («Data sources»): the (i), or a tap on the line, opens the footer in
   full. The Google logo comes first, so it always stays on the first line. */
html:not([data-hoe-modus="kart"]) #hoe-kreditt.lukket #hoe-kreditt-cesium {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  vertical-align: middle;
  max-width: calc(100% - 34px);
  cursor: pointer;
}
/* Open, the footer scrolls instead of growing past a third of the screen (phones: 26vh below). */
@media screen and (min-width: 641px) {
  #hoe-kreditt:not(.lukket) { max-height: 32vh; overflow-y: auto; }
}

#hoe-lysboks { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#hoe-lysboks .cesium-credit-lightbox-overlay { pointer-events: auto; }

/* ── Ported from gods-eye-view status.css: split-flap cells ─────────────── */
.gev-flap-host.gev-flap-active > .gev-flap-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gev-flap-cells { white-space: pre; }
.gev-flap-cell { display: inline-block; white-space: pre; }
.gev-flap-cell::after { content: attr(data-flap-next); display: inline-block; white-space: pre; }
.gev-flap-cell.is-flapping { position: relative; perspective: 4em; }
.gev-flap-cell.is-flapping::before,
.gev-flap-cell.is-flapping::after { transform-origin: 50% 50%; backface-visibility: hidden; }
.gev-flap-cell.is-flapping::after { animation: gev-flap-in var(--gev-flap-dur, 190ms) cubic-bezier(0.2, 0.75, 0.25, 1) var(--gev-flap-delay, 0ms) both; }
.gev-flap-cell.is-flapping::before {
  content: attr(data-flap-prev);
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre;
  animation: gev-flap-out var(--gev-flap-dur, 190ms) cubic-bezier(0.2, 0.75, 0.25, 1) var(--gev-flap-delay, 0ms) both;
}
.gev-flap-sizing { display: inline-block; transition: width var(--gev-flap-total, 500ms) cubic-bezier(0.2, 0.75, 0.25, 1); }
@keyframes gev-flap-out {
  0% { transform: rotateX(0deg); opacity: 1; }
  48% { transform: rotateX(-88deg); opacity: 0.5; }
  100% { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes gev-flap-in {
  0% { transform: rotateX(90deg); opacity: 0; }
  46% { transform: rotateX(90deg); opacity: 0; }
  78% { transform: rotateX(-7deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
/* The status text is a flap host inside an ellipsis box: the flap cells must not wrap. */
#hoe-status.gev-flap-host { display: block; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .gev-flap-cell.is-flapping::before,
  .gev-flap-cell.is-flapping::after { animation-duration: 1ms; animation-delay: 0ms; }
  .gev-flap-sizing { transition-duration: 1ms; }
  #hoe-boot::after, .opp-linje.venter .opp-status::after, .hoe-sok.soker .sok-panel::before { animation: none; }
  #hoe-scene, #hoe-stilmerke { transition: none; }
}

/* ── Ported from gods-eye-view foundation.css: overlay canvases + scope ── */
#world-overlay-root { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
#world-overlay-detection-surface,
#world-overlay-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#world-overlay-detection-surface { z-index: 5; }
#scope-mask { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.world-overlay-accessibility {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Ported from gods-eye-view overlays.css: Intelligence HUD ──────────── */
#intel-hud {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  --hud-color: rgba(125, 255, 170, 0.72);
  --hud-glow: rgba(125, 255, 170, 0.38);
  --hud-border: rgba(125, 255, 170, 0.16);
}
#intel-hud.active { opacity: 1; visibility: visible; }
#intel-hud * {
  font-family: var(--font-mono);
  color: var(--hud-color);
  /* GT: the second, dark shadow keeps the HUD legible over bright Kartverket maps. */
  text-shadow: 0 0 4px var(--hud-glow), 0 0 2px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  line-height: 1.6;
}
.hud-top-bar,
.hud-bottom-bar {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 120px));
  border: 1px solid var(--hud-border);
  background: rgba(0, 0, 0, 0.34);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 1.4px;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.hud-top-bar { top: calc(var(--hoe-topp-bunn) + 12px); }
.hud-bottom-bar { bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 24px); justify-content: center; }
.hud-top-bar-center { opacity: 0.84; }
.hud-top-bar-left, .hud-top-bar-right { opacity: 0.6; }
.hud-corner { position: absolute; display: flex; align-items: flex-start; gap: 6px; padding: 4px; }
.hud-top-left { top: 120px; left: 36px; }
.hud-top-right { top: 120px; right: calc(var(--rail-b) + var(--gutter) + 26px); }
.hud-bottom-left { bottom: max(180px, calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 28px)); left: 36px; }
.hud-bottom-right { bottom: max(180px, calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 28px)); right: calc(var(--rail-b) + var(--gutter) + 26px); }
.hud-bracket { font-size: 22px; line-height: 1; opacity: 0.6; }
.hud-content { font-size: 13px; letter-spacing: 2px; }
.hud-ais-vessel { margin-top: 6px; max-width: 340px; white-space: pre-line; line-height: 1.35; opacity: 0.64; }
.hud-ais-vessel.active { opacity: 0.95; }
.hud-classification { font-size: 12px; letter-spacing: 2.5px; font-weight: 600; margin-bottom: 3px; }
.hud-system { font-size: 13px; opacity: 0.8; }
.hud-mode { font-size: 16px; font-weight: 700; letter-spacing: 4px; margin-top: 3px; }
.hud-summary-wrap { margin-top: 6px; max-width: 420px; }
.hud-summary-label { font-size: 9px; letter-spacing: 1.8px; opacity: 0.55; }
.hud-summary { margin-top: 2px; min-height: 16px; font-size: 11px; letter-spacing: 1.2px; opacity: 0.88; white-space: normal; overflow: hidden; max-height: 3.2em; } /* two lines at the HUD's 1.6 line height */
.hud-rec { font-size: 13px; letter-spacing: 2px; }
#hud-rec-dot { color: #ff3333; text-shadow: 0 0 6px rgba(255, 51, 51, 0.8); font-size: 14px; vertical-align: middle; }
.hud-orbital { font-size: 12px; opacity: 0.7; letter-spacing: 1.5px; }
.hud-edge { position: absolute; font-size: 10px; letter-spacing: 1.5px; opacity: 0.5; }
.hud-left-edge { left: 36px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; white-space: nowrap; display: flex; gap: 20px; }
.hud-right-edge { right: 36px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; white-space: nowrap; display: flex; gap: 20px; }
#intel-hud[data-variant='tactical'] .hud-top-bar,
#intel-hud[data-variant='tactical'] .hud-bottom-bar { display: none; }
#intel-hud[data-variant='operator'] .hud-top-bar,
#intel-hud[data-variant='operator'] .hud-bottom-bar { display: flex; }
#intel-hud[data-variant='tactical'] .hud-top-left,
#intel-hud[data-variant='tactical'] .hud-top-right,
#intel-hud[data-variant='operator'] .hud-top-left,
#intel-hud[data-variant='operator'] .hud-top-right { top: max(14vh, calc(var(--hoe-topp-bunn) + 44px)); }
#intel-hud[data-variant='minimal'] .hud-top-right,
#intel-hud[data-variant='minimal'] .hud-bottom-right,
#intel-hud[data-variant='minimal'] .hud-left-edge,
#intel-hud[data-variant='minimal'] .hud-right-edge,
#intel-hud[data-variant='minimal'] .hud-classification,
#intel-hud[data-variant='minimal'] .hud-system { display: none; }
/* Operator: the bottom bar carries LAT/LON/MGRS, so the bottom-left corner (the same numbers)
   steps aside. */
#intel-hud[data-variant='operator'] .hud-bottom-left { display: none; }
html[data-hoe-modus="kart"] #intel-hud .hud-top-bar,
html[data-hoe-modus="kart"] #intel-hud .hud-bottom-bar { background: rgba(3, 9, 6, 0.72); }
/* The HUD's own classification line takes the banner colour. */
#intel-hud .hud-classification { color: var(--hoe-ts); text-shadow: 0 0 4px rgba(252, 232, 58, 0.35), 0 0 2px rgba(0, 0, 0, 0.95); }
/* GT: no AIS feed in the HUD, so the repo's "AIS: --" line stays hidden. */
#hud-ais-vessel { display: none; }
/* The HUD's left corners step aside while the intel dock is open on a wide screen. */
body.intel-apen .hud-top-left, body.intel-apen .hud-bottom-left, body.intel-apen .hud-left-edge { left: calc(var(--gutter) + min(330px, 100vw) + 24px); }
/* Kart mode: the HUD lies on a bright topographic map, and its phosphor text ran into the map's
   own place names. A plate behind each corner block keeps it legible (the Google modes are dark
   enough without one): .72, the Google credit plate's alpha, gives about 5:1 over olive map where
   .42 gave 2.4:1. The phone gets a compact plate of its own in the ≤640 px block. */
@media (min-width: 641px) {
  html[data-hoe-modus="kart"] #intel-hud .hud-corner .hud-content { width: fit-content; background: rgba(3, 9, 6, 0.72); padding: 2px 7px 1px; }
  html[data-hoe-modus="kart"] #intel-hud .hud-corner .hud-content[style*="right"] { margin-left: auto; }
  /* With the Intel dock open the top-left block moves out into the map: it keeps the sensor and
     mode lines and drops the classification line (the yellow banner says it) and the area
     summary, so it covers two lines of map instead of five. */
  body.intel-apen .hud-top-left :is(.hud-classification, .hud-summary-wrap) { display: none; }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .merke-tekst { display: none; }
  .med-ikon .lang { display: none; }
  .med-ikon .ik:empty { display: inline-flex; }
  .hoe-sok { max-width: 260px; }
}
@media (max-width: 900px) {
  /* Row one has to hold mark, modes, search and four buttons (GT-appen, del, intel, lag). The
     search box and the mode labels are what can give — «Sat»/«3D» instead of «Satellitt»/
     «Google 3D», the same swap the phone block makes. Without this the bar wraps to two rows
     around 640–780 px (it did so even before the GT link, at 641–700). */
  .hoe-sok { max-width: 190px; }
  .modus .lang { display: none; }
  .modus .kort { display: inline; }
  .hud-top-left, .hud-bottom-left { left: 16px; }
  .hud-left-edge, .hud-right-edge { display: none; }
  .hud-content { font-size: 11px; letter-spacing: 1.2px; }
  .hud-classification { font-size: 10px; letter-spacing: 1.5px; }
  .hud-mode { font-size: 14px; letter-spacing: 3px; }
  .hud-summary-wrap { max-width: 44vw; }
  .dokk-seksjon { padding: 0 5px; }
  #hoe-dokk .dokk-knapp { min-width: 0; padding: 7px 8px 6px; }
  #hoe-stilmerke { display: none; }
}

/* ── Phone (390 px wide must work without horizontal scroll) ───────────── */
@media (max-width: 640px) {
  :root { --gutter: 8px; --banner-h: 14px; --dokk-h: 96px; --kreditt-h: 34px; --rail-b: 34px; }
  html, body { font-size: 12px; }
  .klass-banner { font-size: 9.5px; letter-spacing: 1.4px; }
  #hoe-topp { padding: 5px 5px 0; }
  .topp-hoved { gap: 4px; }
  .merke { padding: 0 6px 0 2px; }
  .merke-kode { font-size: 18px; }
  #hoe-topp :is(button, .gt-lenke) { min-height: 32px; padding: 4px 8px; font-size: 12px; letter-spacing: 0.8px; }
  .modus .lang { display: none; }
  .modus .kort { display: inline; }
  /* Search collapses to an icon; the field opens as a full-width sheet under the top bar. */
  .hoe-sok { flex: 0 0 auto; max-width: none; min-width: 0; position: static; }
  #hoe-topp #hoe-sok-knapp { display: inline-flex; width: 34px; padding: 0; }
  .sok-panel { display: none; }
  .hoe-sok.apen .sok-panel {
    display: block;
    position: absolute;
    left: -1px;
    right: -1px;
    top: calc(100% + 4px);
    z-index: 50;
    padding: 6px;
    background: var(--hoe-glass-strong);
    border: 1px solid var(--hoe-line-strong);
  }
  #hoe-sok-inp { font-size: 16px; } /* no iOS zoom on focus */
  .hoe-sok.har-liste #hoe-sok-liste { position: static; margin-top: 6px; max-height: 50vh; box-shadow: none; }
  .topp-hoyre { margin-left: auto; gap: 3px; }
  .topp-hoyre :is(button, .gt-lenke) { width: 34px; padding: 0 !important; }
  .topp-hoyre #hoe-btn-lag { width: auto; padding: 0 6px !important; gap: 4px; }
  .topp-hoyre #hoe-btn-lag > span:not(.ik):not(.knapp-teller) { display: none; }
  /* Share lives in the scene rail on a phone, so row one fits: mark, modes, search, intel, layers. */
  #hoe-topp #hoe-btn-del { display: none; }
  #hoe-scene .kun-mobil { display: inline-flex; }
  /* The command dock folds away behind a small button (bottom right, on the credits row, the
     mirror of the (i) at bottom left). Folded by default; the choice is remembered (app.mjs). */
  body.dokk-lukket #hoe-dokk { display: none; }
  #hoe-dokk-knapp:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 41;
    right: var(--gutter);
    bottom: calc(var(--banner-h) + var(--bunn-inset) + 2px);
    width: 44px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--hoe-line-strong);
    background: rgba(2, 5, 3, 0.82);
    color: var(--hoe-fos);
    cursor: pointer;
  }
  #hoe-dokk-knapp::after { content: ''; position: absolute; inset: -10px -6px; } /* ~44 px hit area */
  #hoe-dokk-knapp[aria-expanded='true'] { border-color: var(--hoe-fos); box-shadow: 0 0 8px var(--hoe-fos-glow); }
  /* A chevron: up = show the controls, down = hide them. */
  #hoe-dokk-knapp .dk-pil { width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(2px) rotate(-45deg); }
  #hoe-dokk-knapp[aria-expanded='true'] .dk-pil { transform: translateY(-2px) rotate(135deg); }
  #hoe-dokk-knapp:focus-visible { outline: 2px solid var(--hoe-fos); outline-offset: 2px; }
  /* Open credits flow as a paragraph under the button: keep its corner free. */
  #hoe-kreditt:not(.lukket) { padding-right: calc(var(--gutter) + 52px); }
  #hoe-statuslinje { font-size: 10.5px; margin-top: 5px; padding: 2px 8px 3px; min-height: 19px; }
  .sl-tid { display: none; }

  #hoe-scene { top: calc(var(--hoe-topp-bunn) + 8px); gap: 2px; padding: 2px; }
  body.lag-apen #hoe-scene { right: var(--gutter); }

  #hoe-dokk {
    flex-direction: column;
    gap: 4px;
    width: calc(100vw - 2 * var(--gutter));
    padding: 4px 5px 5px;
  }
  .dokk-seksjon { padding: 0; gap: 2px; }
  .dokk-seksjon + .dokk-seksjon { border-left: 0; }
  .dokk-etikett { display: none; }
  #hoe-stiler { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  #hoe-stiler .dokk-knapp { padding: 4px 0 !important; font-size: 11px !important; letter-spacing: 0.3px !important; min-height: 38px; }
  #hoe-dokk .brytere { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
  #hoe-dokk .brytere .dokk-knapp { padding: 4px 0; font-size: 12px; min-height: 38px; }
  /* Six tools (T M G R C Z) share one row at 390 px, sized like the sensor row above. */
  #hoe-verktoy { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)) !important; }
  #hoe-verktoy .dokk-knapp { font-size: 11px !important; letter-spacing: 0.3px !important; }
  .dk-tast { display: none; }

  /* Panels become bottom sheets above the dock. */
  #hoe-lagpanel, #hoe-intel {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    top: auto;
    bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 12px);
    max-height: 56vh;
    z-index: 36;
  }
  /* Juster is a bottom sheet like Lag and Intel: gutter to gutter. */
  #hoe-param { max-height: 52vh; left: var(--gutter); right: var(--gutter); width: auto; }
  body.intel-apen .hud-top-left, body.intel-apen .hud-bottom-left { left: 10px; }
  #hoe-kort { width: calc(100vw - 2 * var(--gutter)); max-width: none; min-width: 0; max-height: 46vh; }
  #hoe-kort .kort-bilde img, #hoe-kort video { max-height: 24vh; }
  #hoe-kort iframe { height: 28vh; }
  /* Phone: the credits run as one flowing paragraph (map credits, then layer credits) in small
     type, so fourteen sources stay readable without eating a fifth of the screen. */
  #hoe-kreditt { display: block; font-size: 9px; line-height: 1.28; max-height: 26vh; overflow-y: auto; }
  #hoe-kreditt-cesium, #hoe-kreditt-lag { display: inline; }
  #hoe-kreditt-cesium .cesium-credit-logoContainer img,
  #hoe-kreditt-cesium .cesium-credit-logoContainer .cesium-credit-imageContainer img { max-height: 12px; }
  #hoe-kreditt-lag:not(:empty)::before { content: '·'; opacity: 0.5; padding: 0 4px; }

  /* HUD on a phone: small type, no edge strips, corners clear of the chrome. */
  .hud-top-left, .hud-bottom-left { left: 10px; }
  .hud-top-right, .hud-bottom-right { right: calc(var(--rail-b) + var(--gutter) + 12px); }
  #intel-hud[data-variant='tactical'] .hud-top-left,
  #intel-hud[data-variant='tactical'] .hud-top-right,
  #intel-hud[data-variant='operator'] .hud-top-left,
  #intel-hud[data-variant='operator'] .hud-top-right { top: calc(var(--hoe-topp-bunn) + 10px); }
  .hud-bottom-left, .hud-bottom-right { bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 16px); }
  .hud-bracket { display: none; }
  .hud-corner { padding: 0; }
  .hud-content { font-size: 9.5px; letter-spacing: 0.6px; }
  #intel-hud * { line-height: 1.45; }
  .hud-top-left .hud-content { max-width: 50vw; }
  .hud-classification { display: none; } /* the yellow banner already says it */
  .hud-system { font-size: 9px; }
  .hud-mode { font-size: 12px; letter-spacing: 2px; margin-top: 1px; }
  .hud-summary-wrap { max-width: 50vw; margin-top: 3px; }
  .hud-summary { font-size: 8.5px; letter-spacing: 0.4px; white-space: normal; max-height: 3.1em; }
  /* Phone: the area summary stays off (the status line names the place), so the top-left plate
     is two short lines (ID + mode) and the map stays clear. */
  .hud-summary-wrap { display: none; }
  /* Kart mode: phosphor on the bright topo map measured ~1.2:1. A compact dark plate behind each
     corner block, as on desktop. */
  html[data-hoe-modus="kart"] #intel-hud .hud-corner .hud-content { width: fit-content; background: rgba(3, 9, 6, 0.72); padding: 1px 5px; }
  html[data-hoe-modus="kart"] #intel-hud .hud-corner .hud-content[style*="right"] { margin-left: auto; }
  .hud-rec { font-size: 9px; letter-spacing: 0.6px; }
  #hud-rec-dot { font-size: 10px; }
  .hud-orbital { display: none; }
  .opp-merke { font-size: 32px; }
  .opp-linjer { font-size: 11px; }
}

/* ── Narrow phones (iPhone SE, 360–430 px Android): HUD corners stacked, never side by side ── */
@media (max-width: 430px) {
  /* Three icon buttons (GT-appen, intel, lag) instead of two: a couple of pixels off each, off
     the gaps and off the mark keeps row one in one line down to 360 px. */
  .topp-hoved { gap: 4px; }
  .topp-hoyre { gap: 2px; }
  .topp-hoyre :is(button, .gt-lenke) { width: 32px; }
  .merke { padding: 0 4px 0 0; margin-right: 0; }
  /* Bottom: the right block (ALT/SOL, AIS) moves one block up, above MGRS + lat/lon; GSD/NIIRS
     is dropped (least useful on a phone). */
  #hud-gsd { display: none; }
  .hud-bottom-right { bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 16px + 34px); }
  /* Top: the left block starts under the REC/timestamp line instead of beside it. */
  #intel-hud[data-variant='tactical'] .hud-top-left,
  #intel-hud[data-variant='operator'] .hud-top-left { top: calc(var(--hoe-topp-bunn) + 10px + 18px); }
  .hud-top-left .hud-content, .hud-summary-wrap { max-width: calc(100vw - var(--rail-b) - var(--gutter) - 30px); }
}

/* ── Touch: finger-sized controls (the phone chrome is 32–38 px; these were 24–28 px). Last in
   the file so it wins over the phone block. ── */
@media (pointer: coarse) {
  .tekstknapp { min-height: 36px; }
  .panel-hode .lukk { min-height: 36px; width: 36px; }
  input.bryter.liten { width: 20px; height: 20px; }
  #hoe-ren-ut { min-height: 36px; }
  /* A layer's select was the smallest thing in the panel at 30 px, and the label beside it does not
     open the list — the 30 px were the whole target. */
  .valg-rad select { min-height: 36px; }
}

/* ── Voice control (shell/stemme.mjs) ─────────────────────────────────────
   The mic is the first button of the scene rail (always visible, never folded). Its states:
   connecting blinks, listening/thinking glow phosphor, speaking goes amber. The panel sits bottom
   left on a desktop (beside the Intel dock when that is open) and is a strip under the top bar on
   a phone. It is deliberately NOT in the clean-view hide list: a live session stays reachable
   through «Legg på». */
@keyframes hoe-stemme-blink { 50% { opacity: 0.35; } }
#hoe-scene #hoe-btn-stemme[data-tilstand='kobler'] { animation: hoe-stemme-blink 0.9s steps(1) infinite; border-color: var(--hoe-fos) !important; }
/* «Min posisjon»: blinks while the GPS searches; once it has a fix it is pressed like the rest. */
#hoe-scene #hoe-btn-pos[data-tilstand='soker'] { animation: hoe-stemme-blink 0.9s steps(1) infinite; border-color: var(--hoe-fos) !important; }
/* The verdict chip above the dock: which terrain with a permit the dot is in, and how far the
   boundary is. Blue (the dot's colour) inside, amber at a boundary or with a permit run out. */
#hoe-pos-chip {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  /* max-content: with left: 50% the shrink-to-fit width would stop at half the screen. */
  width: max-content;
  max-width: min(560px, calc(100vw - 2 * var(--gutter) - 8px));
  padding: 5px 12px 6px;
  background: rgba(5, 7, 6, 0.86);
  border: 1px solid #2e8bff;
  color: #d6e8ff;
  cursor: pointer;
  text-align: center;
}
#hoe-pos-chip[hidden] { display: none; }
#hoe-pos-chip .pc-tittel { font: 700 13px/1.25 var(--font-kond); letter-spacing: 1px; text-transform: uppercase; color: #8fc2ff; }
#hoe-pos-chip .pc-linje { font: 500 11.5px/1.3 var(--font-mono, monospace); color: #c7d6e6; }
#hoe-pos-chip:is([data-dom='ute'], [data-dom='ukjent'], [data-dom='soker']) { border-color: var(--hoe-line-strong); }
#hoe-pos-chip:is([data-dom='ute'], [data-dom='ukjent'], [data-dom='soker']) .pc-tittel { color: var(--hoe-text); }
#hoe-pos-chip:is([data-dom='grense'], .varsel) { border-color: var(--hoe-amber); }
#hoe-pos-chip:is([data-dom='grense'], .varsel) .pc-tittel { color: var(--hoe-amber); }
#hoe-pos-chip:focus-visible { outline: 2px solid var(--hoe-fos); outline-offset: 2px; }
body.ren-visning #hoe-pos-chip { display: none !important; }
/* Phone, dock folded: the HUD's bottom corner readouts sit where the chip would; float above them.
   `screen and` on purpose: the voice panel's tests read the LAST plain phone block of this file. */
@media screen and (max-width: 640px) {
  body.dokk-lukket #hoe-pos-chip { bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + 72px); }
}
#hoe-scene #hoe-btn-stemme:is([data-tilstand='klar'], [data-tilstand='lytter'], [data-tilstand='tenker']) {
  border-color: var(--hoe-fos) !important;
  color: var(--hoe-fos) !important;
  box-shadow: 0 0 10px var(--hoe-fos-glow) !important;
}
#hoe-scene #hoe-btn-stemme[data-tilstand='lytter'] { background: var(--hoe-fos-dim) !important; }
#hoe-scene #hoe-btn-stemme[data-tilstand='snakker'] {
  border-color: var(--hoe-amber) !important;
  color: var(--hoe-amber) !important;
  background: var(--hoe-amber-dim) !important;
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.3) !important;
}
#hoe-stemme {
  position: fixed;
  z-index: 34;
  left: var(--gutter);
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 18px);
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  max-height: min(44vh, 440px);
  display: flex;
  flex-direction: column;
  padding: 0 10px 8px;
  background: var(--hoe-glass);
  border: 1px solid var(--hoe-line);
  border-top: 2px solid var(--hoe-fos);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
/* One header row: the state, then cost, tier, NO/EN and close. The state label stands alone (no
   «Stemme» title: the mic in the rail glows with the call), so every state fits beside the buttons
   on a desktop and the header does not jump between one and two rows. Should it ever wrap, the
   buttons keep to the right edge, with × in the corner. */
#hoe-stemme .panel-hode { margin: 0 -10px 4px; padding: 5px 6px 5px 10px; flex-wrap: wrap; row-gap: 4px; }
#hoe-stemme .hode-knapper { align-items: center; margin-left: auto; }
.st-tittel { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.st-tilstand { font-family: var(--font-kond); font-weight: 600; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hoe-text-dim); }
#hoe-stemme[data-tilstand='lytter'] .st-tilstand,
#hoe-stemme[data-tilstand='klar'] .st-tilstand { color: var(--hoe-fos); }
#hoe-stemme[data-tilstand='snakker'] .st-tilstand { color: var(--hoe-amber); }
.st-kost { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0; color: var(--hoe-fos); padding: 0 4px; white-space: nowrap; }
.st-kost[data-niva='varsel'] { color: var(--hoe-amber); }
.st-kost[data-niva='tak'] { color: var(--hoe-rod); }
.st-niva { display: flex; }
.st-niva .tekstknapp + .tekstknapp { margin-left: -1px; }
/* The NO/EN flag: the language the voice speaks now (a click switches, and restarts a live call). */
.st-sprak { min-width: 30px; padding: 2px 6px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.5px; color: var(--hoe-fos); }
.st-logg {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 4px 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.45;
}
.st-logg li { padding: 2px 0 2px 6px; overflow-wrap: anywhere; }
.st-logg .st-du { color: var(--hoe-text); }
.st-logg .st-du.st-venter { color: var(--hoe-text-faint); }
.st-logg .st-svar { color: #bff5d2; }
.st-logg .st-handling { border-left: 2px solid var(--hoe-fos); color: var(--hoe-text-dim); margin: 1px 0; }
.st-logg .st-handling.feil { border-left-color: var(--hoe-rod); }
.st-logg .st-varsel { color: var(--hoe-amber); }
.st-logg .st-feil { color: var(--hoe-rod); }
.st-logg .st-info { color: var(--hoe-text-dim); }
.st-knapper { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.st-knapper .st-legg-paa { margin-left: auto; }
.st-knapper .tekstknapp:disabled { opacity: 0.45; cursor: default; }
.st-skjema { margin: 0; }
.st-skjema input {
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--hoe-line-strong);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: var(--hoe-text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.st-skjema input::placeholder { color: var(--hoe-text-faint); }
.st-skjema input:focus { outline: none; border-color: var(--hoe-fos); }
.st-skjema input:disabled { opacity: 0.5; }
.st-merknad { margin: 6px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--hoe-text-faint); }
#hoe-stemme .st-utvid { display: none; } /* phone only (below) */
@media (min-width: 641px) {
  body:has(#hoe-intel:not([hidden])) #hoe-stemme { left: calc(var(--gutter) * 2 + min(330px, calc(100vw - 2 * var(--gutter)))); }
}
@media (max-width: 640px) {
  #hoe-stemme {
    top: calc(var(--hoe-topp-bunn) + 6px);
    bottom: auto;
    left: var(--gutter);
    right: calc(var(--gutter) * 2 + var(--rail-b));
    width: auto;
    max-height: 28vh;
    z-index: 37;
  }
  body.hoe-rir #hoe-stemme { top: calc(var(--hoe-topp-bunn) + 10px + var(--hoe-ritt-h, 34px)); }
  /* Folded: always one header row. */
  #hoe-stemme .panel-hode { flex-wrap: nowrap; }
  /* On a 360 px phone «Kobler til …» is wider than the room left: the state label gives way. */
  #hoe-stemme .st-tittel { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  #hoe-stemme .st-tilstand { overflow: hidden; text-overflow: ellipsis; }
  #hoe-stemme .hode-knapper { flex: none; }
  #hoe-stemme .st-niva .tekstknapp { padding-left: 6px; padding-right: 6px; }
  #hoe-stemme-tekst { font-size: 16px; } /* no iOS zoom on focus */
  .st-merknad { font-size: 10px; }
  /* Folded by default (stemme.mjs sets data-utvidet): only the header row while you talk. The
     chevron opens the log, the buttons and the text field; an error or a warning opens it by
     itself. «Slå på lyd» stays reachable folded: without it iOS may play nothing. */
  #hoe-stemme .st-utvid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--hoe-line-strong);
    background: transparent;
    color: var(--hoe-fos);
    cursor: pointer;
  }
  #hoe-stemme .st-utvid:focus-visible { outline: 2px solid var(--hoe-fos); outline-offset: 2px; }
  /* A chevron: down = show the log, up = hide it. */
  #hoe-stemme .st-pil { width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
  #hoe-stemme .st-utvid[aria-expanded='true'] .st-pil { transform: translateY(2px) rotate(-135deg); }
  #hoe-stemme:not([data-utvidet]) { padding-bottom: 0; }
  #hoe-stemme:not([data-utvidet]) .panel-hode { margin-bottom: 0; }
  #hoe-stemme:not([data-utvidet]) :is(.st-logg, .st-skjema, .st-merknad) { display: none; }
  #hoe-stemme:not([data-utvidet]) .st-knapper:not(:has(#hoe-stemme-lyd:not([hidden]))) { display: none; }
  #hoe-stemme:not([data-utvidet]) .st-knapper > :not(#hoe-stemme-lyd) { display: none; }
  /* Opened, the header takes two rows in every state: the state label with the cost at its right
     end, then the buttons (with the tier switch) right-aligned, so neither squeezes the other and
     the height holds however the cost grows. Tier, NO/EN, chevron and × need 222 px, which fits
     from a 320 px phone up; should they not, they wrap again rather than run out of the panel. */
  #hoe-stemme[data-utvidet] .panel-hode { flex-wrap: wrap; }
  #hoe-stemme[data-utvidet] .st-tittel { flex: 1 0 auto; min-width: 76px; }
  #hoe-stemme[data-utvidet] .hode-knapper { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  #hoe-stemme[data-utvidet] .st-kost { position: absolute; top: 7px; right: 6px; }
  /* A card or a bottom sheet is open: the panel shrinks to its header, the last two lines and its
     buttons, and goes under the sheets (Lag and Intel 36, Juster 35) instead of over their
     headers. It stays above the card (32); the mic in the rail still shows the state. */
  body:has(#hoe-kort:not([hidden]), #hoe-lagpanel:not([hidden]), #hoe-intel:not([hidden]), #hoe-param:not([hidden])) #hoe-stemme { z-index: 34; }
  body:has(#hoe-kort:not([hidden]), #hoe-lagpanel:not([hidden]), #hoe-intel:not([hidden]), #hoe-param:not([hidden])) #hoe-stemme .st-logg {
    flex: 0 0 auto;
    max-height: calc(2 * 1.45em + 8px);
  }
  body:has(#hoe-kort:not([hidden]), #hoe-lagpanel:not([hidden]), #hoe-intel:not([hidden]), #hoe-param:not([hidden])) #hoe-stemme :is(.st-skjema, .st-merknad) { display: none; }
}
@media (max-width: 460px) {
  /* Phones up to 460 px (every common width): folded, the state label needs the room more than
     the tier switch, which is still there when the panel is opened. Beside the cost, the NO/EN
     flag, the chevron and the close button, the switch left «Lytter» 26 px at 390 px, and at
     441 px it still cut «Hører deg …» once the cost reads «~kr 10,50». */
  #hoe-stemme:not([data-utvidet]) .st-niva { display: none; }
}
@media (pointer: coarse) {
  #hoe-stemme .tekstknapp { min-height: 36px; }
  #hoe-stemme .st-sprak { min-width: 36px; }
  .st-skjema input { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #hoe-btn-stemme { animation: none !important; }
}

/* ── Atomsimulering (tools/simuler.mjs) ── */
/* The SIMULER tool's panel (#hoe-sim-panel, a .hv-panel from tools/verktoy-felles.mjs), the «Hva
   gjør du?» card (opened only by its button), the caption and legend on the map (#hoe-sim-legende,
   pointer-events: none), the pick chip, and the detonation's one brief brightening of the screen
   (#hoe-sim-blink, driven by layers/simulering-atom.mjs: never repeated, never with reduced
   motion). body.sim-aktiv is only a state class while the simulation is on. On a phone the panel
   is a thin strip (.sim-kompakt: the clock row only) until the viewer expands it. */
#hoe-sim-panel .sim-klokkerad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
#hoe-sim-panel .sim-klokkeboks { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
#hoe-sim-panel .sim-klokke { font: 700 15px/1.2 var(--font-mono); letter-spacing: 0.5px; color: var(--hoe-fos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hoe-sim-panel .sim-klokkeinfo { font: 400 10.5px/1.25 var(--font-mono); color: var(--hoe-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hoe-sim-panel .sim-klokkeinfo:empty { display: none; }
#hoe-sim-panel .sim-ikon { min-width: 30px; padding: 3px 6px; font-size: 15px; letter-spacing: 0; }
#hoe-sim-panel .sim-radknapp .sim-kort { display: none; }
#hoe-sim-panel .sim-utvid { display: none; }
#hoe-sim-panel .sim-kontroller { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
#hoe-sim-panel .sim-faner { margin: 0 0 10px; }
#hoe-sim-panel .sim-faner button { flex: 1 1 50%; }
#hoe-sim-panel .sim-felt { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; }
#hoe-sim-panel .sim-felt > span { font-family: var(--font-kond); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hoe-text-dim); }
#hoe-sim-panel .sim-felt select,
#hoe-sim-panel .sim-sok { width: 100%; }
#hoe-sim-panel .sim-felt .hv-knapper { margin: 0 0 4px; align-items: center; }
#hoe-sim-panel .sim-kilde { margin: -3px 0 8px; font-size: 10.5px; color: var(--hoe-text-faint); overflow-wrap: anywhere; }
#hoe-sim-panel .sim-kilde a,
#hoe-sim-rad a { color: #bff5d2; }
#hoe-sim-panel h3,
#hoe-sim-rad h3 { margin: 10px 0 4px; font: 700 13px/1.3 var(--font-kond); letter-spacing: 1.2px; text-transform: uppercase; color: var(--hoe-fos); }
#hoe-sim-panel h4 { margin: 10px 0 3px; font: 600 11px/1.3 var(--font-kond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hoe-text-dim); }
#hoe-sim-panel p,
#hoe-sim-rad p { margin: 4px 0; overflow-wrap: anywhere; }
#hoe-sim-panel blockquote,
#hoe-sim-rad blockquote { margin: 4px 0 2px; padding: 3px 8px; border-left: 2px solid var(--hoe-line-strong); color: #e9f3ec; overflow-wrap: anywhere; }
#hoe-sim-panel .sim-merke { display: inline-block; padding: 0 4px; border: 1px solid var(--hoe-line-strong); font: 600 9.5px/1.5 var(--font-kond); letter-spacing: 1px; color: var(--hoe-text-dim); vertical-align: 1px; }
#hoe-sim-panel .sim-merke.historisk { border-color: rgba(255, 176, 32, 0.5); color: #ffe3b0; }
#hoe-sim-panel .sim-scenarioliste { display: grid; gap: 3px; margin: 8px 0; padding: 0; list-style: none; }
#hoe-sim-panel .sim-scenarioliste button { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; width: 100%; min-height: 32px; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; font: 400 12px/1.3 var(--font-mono); }
#hoe-sim-panel .sim-scenarioliste button b { color: var(--hoe-fos); }
#hoe-sim-panel .sim-faser { padding-left: 0; list-style: none; }
#hoe-sim-panel .sim-faser li { margin: 3px 0; padding: 3px 6px; border-left: 2px solid var(--hoe-line); }
#hoe-sim-panel .sim-faser li.naa { border-left-color: var(--hoe-amber); background: var(--hoe-amber-dim); }
#hoe-sim-panel .sim-tall { margin: 2px 0; font-size: 11px; color: #ffe3b0; overflow-wrap: anywhere; }
#hoe-sim-panel .sim-grener li { margin: 2px 0; }
#hoe-sim-panel .sim-tabell { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 11px; }
#hoe-sim-panel .sim-tabell th,
#hoe-sim-panel .sim-tabell td { padding: 2px 4px; border-bottom: 1px solid var(--hoe-line); text-align: right; }
#hoe-sim-panel .sim-tabell :is(th, td):first-child { text-align: left; }
#hoe-sim-panel .sim-tabell tr.sum td { font-weight: 700; color: var(--hoe-fos); }
#hoe-sim-panel .sim-sokboks { position: relative; }
#hoe-sim-panel .sim-sokliste { margin: 2px 0 4px; padding: 0; list-style: none; border: 1px solid var(--hoe-line-strong); background: var(--hoe-glass-strong); }
#hoe-sim-panel .sim-sokliste button { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; width: 100%; border: 0; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; font: 400 12px/1.3 var(--font-mono); }
#hoe-sim-panel .sim-sokliste small { color: var(--hoe-text-faint); }
#hoe-sim-panel .sim-sokinfo { padding: 4px 8px; font-size: 10.5px; color: var(--hoe-text-faint); overflow-wrap: anywhere; }
#hoe-sim-panel :is(.sim-detliste, .sim-flyliste ul) { margin: 6px 0; padding: 0; list-style: none; }
#hoe-sim-panel :is(.sim-detliste, .sim-flyliste ul) li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0 3px 6px; border-left: 2px solid var(--hoe-line-strong); overflow-wrap: anywhere; }
#hoe-sim-panel :is(.sim-detliste, .sim-flyliste ul) li > span { flex: 1 1 auto; min-width: 0; }
#hoe-sim-panel .sim-fjern { flex: none; min-width: 30px; padding: 0; }
#hoe-sim-panel .sim-flyliste > summary { font-weight: 600; }
#hoe-sim-panel .sim-avlesningshode { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--hoe-line-strong); }
#hoe-sim-panel .sim-bryter { margin: 0; }
#hoe-sim-panel .sim-det { margin: 6px 0; padding: 0 0 4px 6px; border-left: 2px solid var(--hoe-line-strong); }
#hoe-sim-panel .sim-det > summary { color: var(--hoe-text); font-weight: 600; overflow-wrap: anywhere; }
#hoe-sim-panel .sim-linjer,
#hoe-sim-panel .sim-soner { margin: 4px 0; padding: 0; list-style: none; }
#hoe-sim-panel .sim-soner li { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: baseline; margin: 2px 0; }
#hoe-sim-panel .sim-soner small { grid-column: 2 / 4; color: var(--hoe-text-faint); }
#hoe-sim-panel .sim-sonenavn { min-width: 0; overflow-wrap: anywhere; }
.sim-prikk { display: inline-block; width: 10px; height: 10px; margin-right: 2px; border: 1px solid rgba(0, 0, 0, 0.5); vertical-align: -1px; }
#hoe-sim-panel .sim-nedfall { color: #e6d4ee; }
#hoe-sim-panel .sim-om > summary,
#hoe-sim-panel .sim-modell > summary { font-weight: 600; }
#hoe-sim-panel .sim-om ul,
#hoe-sim-panel .sim-modell ul { font-size: 11px; }
#hoe-sim-panel .sim-fot { margin-top: 10px; }

#hoe-sim-rad {
  position: fixed;
  z-index: 35;
  left: var(--gutter);
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 18px);
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  max-height: 60vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 12px 12px;
  background: var(--hoe-glass);
  border: 1px solid var(--hoe-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  font: 12px/1.45 var(--font-mono);
  overflow-wrap: anywhere;
  animation: hoe-sim-toning 0.4s ease-out 1;
}
#hoe-sim-rad .sim-kilde { margin: 0 0 6px; font-size: 10.5px; color: var(--hoe-text-faint); }
#hoe-sim-rad .sim-lenker { margin: 6px 0 0; padding-left: 18px; }
/* The phase's caption (the source's own words and numbers) and the focus detonation's legend:
   over the map, never a click target, above the dock (a desktop) or above the strip (a phone). */
#hoe-sim-legende {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 14px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(640px, calc(100vw - 2 * var(--gutter)));
  padding: 5px 10px;
  background: rgba(5, 7, 6, 0.72);
  border: 1px solid var(--hoe-line);
  font: 11.5px/1.4 var(--font-mono);
  color: #e9f3ec;
  text-align: center;
  pointer-events: none;
  overflow-wrap: anywhere;
}
#hoe-sim-legende .sim-bildetekst { margin: 0; color: #fff2d6; }
#hoe-sim-legende .sim-legendeliste { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin: 3px 0 0; padding: 0; list-style: none; }
#hoe-sim-legende .sim-legendehode { flex-basis: 100%; color: var(--hoe-fos); font-weight: 700; letter-spacing: 0.6px; }
#hoe-sim-legende [hidden] { display: none; }
#hoe-sim-chip {
  position: fixed;
  z-index: 31;
  left: 50%;
  top: calc(var(--hoe-topp-bunn, 90px) + 12px);
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 6px 12px;
  background: rgba(5, 7, 6, 0.82);
  border: 1px solid var(--hoe-fos);
  color: var(--hoe-fos);
  font: 700 12.5px/1.3 var(--font-kond);
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}
body.ren-visning :is(#hoe-sim-rad, #hoe-sim-legende, #hoe-sim-chip) { display: none !important; }
#hoe-sim-blink { position: fixed; inset: 0; z-index: 27; background: #fff; opacity: 0; pointer-events: none; }
@keyframes hoe-sim-toning { from { opacity: 0; } to { opacity: 1; } }
/* `screen and` on purpose: the voice panel's tests read the LAST plain phone block of this file. */
@media screen and (max-width: 640px) {
  #hoe-sim-rad {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    z-index: 36;
    bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 12px);
    max-height: 50vh;
  }
  /* One bottom sheet at a time on a phone: the panel steps aside while the advice is open. */
  body:has(#hoe-sim-rad:not([hidden])) #hoe-sim-panel { display: none !important; }
  #hoe-sim-panel .sim-sok { font-size: 16px; }
  #hoe-sim-panel .sim-klokke { font-size: 13px; }
  #hoe-sim-panel .sim-utvid { display: inline-flex; }
  /* The strip: the clock row only, no header — it never covers the map. Start or Pause (whichever
     applies), start again, «Fly med», «Hva gjør du?» (a «?») and the chevron that expands it. */
  #hoe-sim-panel.sim-kompakt { max-height: none; overflow: visible; padding: 5px 7px; }
  #hoe-sim-panel.sim-kompakt > .panel-hode { display: none; }
  #hoe-sim-panel.sim-kompakt .hv-innhold > :not(.sim-klokkerad) { display: none !important; }
  #hoe-sim-panel.sim-kompakt .sim-klokkerad { flex-wrap: nowrap; gap: 3px; margin: 0; }
  #hoe-sim-panel.sim-kompakt .sim-klokkerad button { padding: 3px 7px; font-size: 11px; letter-spacing: 0.4px; }
  #hoe-sim-panel.sim-kompakt .sim-klokkerad .sim-ikon { font-size: 15px; }
  #hoe-sim-panel.sim-kompakt :is([data-sim="start"], [data-sim="pause"], [data-sim="igjen"], [data-sim="ritt"]):disabled { display: none; }
  #hoe-sim-panel.sim-kompakt .sim-radknapp .sim-lang { display: none; }
  #hoe-sim-panel.sim-kompakt .sim-radknapp .sim-kort { display: inline; font-size: 15px; }
  #hoe-sim-panel.sim-kompakt .sim-klokke { font-size: 12px; }
  /* Caption and legend sit just above the strip; the expanded sheet or the advice card hide them. */
  #hoe-sim-legende {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: none;
    transform: none;
    bottom: calc(var(--banner-h) + var(--bunn-inset) + var(--kreditt-h) + var(--dokk-h) + 12px + 58px);
    font-size: 11px;
  }
  body:has(#hoe-sim-panel:not(.sim-kompakt):not([hidden]), #hoe-sim-rad:not([hidden])) #hoe-sim-legende { display: none; }
}
/* Touch: the house minimum of 36 px for everything in the panel and the advice card. `screen and`
   for the same reason as the phone block above (the voice panel's tests read the LAST plain one). */
@media screen and (pointer: coarse) {
  #hoe-sim-panel :is(button, select, .sim-sok) { min-height: 36px; }
  #hoe-sim-panel :is(.sim-scenarioliste, .sim-sokliste) button { min-height: 36px; }
  #hoe-sim-panel :is(.sim-fjern, .sim-ikon) { min-width: 36px; }
  #hoe-sim-panel summary { padding-block: 10px; }
  #hoe-sim-panel .sim-bryter { display: inline-flex; align-items: center; min-height: 36px; }
  #hoe-sim-panel .sim-bryter input { width: 20px; height: 20px; }
  #hoe-sim-rad .panel-hode .lukk { min-width: 36px; min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #hoe-sim-rad { animation: none; }
}
/* The simple row: one hint, one choice; everything else under «Flere valg». */
.sim-panel .sim-hint { margin: 8px 0 6px; font-family: var(--font-kond); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; color: var(--hoe-fos); }
.sim-panel .sim-flere { margin-top: 6px; border-top: 1px solid var(--hoe-line); }
.sim-panel .sim-flere > summary { cursor: pointer; min-height: 34px; display: flex; align-items: center; font-family: var(--font-kond); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; color: var(--hoe-text-dim); }
.sim-panel .sim-flere > summary:focus-visible { outline: 2px solid var(--hoe-fos); outline-offset: 2px; }
/* ── slutt atomsimulering ── */