:root {
  --bg: #0d0d0f;
  --flate: #1a1a1f;
  --flate2: #26262d;
  --tekst: #f2f2f2;
  --dempet: #9a9aa3;
  --aksent: #FAE67A;
  --usikker: #ffb020;
  --fare: #ff5a5a;
  --ok: #5ad17a;
  --radius: 14px;
  /* Safe area (øya, hjemlinja) som variabler, så den kan simuleres i Chromium */
  --sikker-topp: env(safe-area-inset-top, 0px);
  --sikker-bunn: env(safe-area-inset-bottom, 0px);
  --sikker-v: env(safe-area-inset-left, 0px);
  --sikker-h: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* Safari forstørrer ellers teksten når telefonen ligger */
body {
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  /* Fast høyde: toppmenyen øverst, main fyller resten. Arbeidsskjermene (gjennomgang, kutt, tekst) fyller main med egne
     rulleområder; de andre skjermene ruller i main. */
  display: flex; flex-direction: column;
  height: 100dvh;
  padding: var(--sikker-topp) var(--sikker-h) 0 var(--sikker-v);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.topp {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; padding: 8px 16px; z-index: 10;
  background: var(--bg);
}
.topp h1 { flex: 1; margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.topp h1 span { color: var(--aksent); }
.ikonknapp {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--flate); font-size: 22px; line-height: 1;
  touch-action: manipulation;
}

main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: 0 16px; }
.skjerm { display: flex; flex-direction: column; gap: 12px; }
.skjerm:not(.arbeid) { padding-bottom: calc(16px + var(--sikker-bunn)); }
.skjerm.arbeid { flex: 1 1 auto; min-height: 0; gap: 6px; }
.skjerm.arbeid > p { flex: 0 0 auto; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skjerm.arbeid > div { flex: 1 1 auto; min-height: 0; }

/* Liggende telefon: lav toppmeny og ingen infolinje; arbeidsskjermene legger videoen til venstre (egne css-filer) */
@media (orientation: landscape) and (max-height: 540px) {
  .topp { padding: 2px 12px; }
  .topp h1 { font-size: 16px; }
  .topp .ikonknapp { width: 36px; height: 36px; font-size: 18px; }
  .skjerm.arbeid > p { display: none; }
}
.kort { background: var(--flate); border-radius: var(--radius); padding: 16px; }
.kort h2 { margin: 0 0 6px; font-size: 18px; }
.dempet { color: var(--dempet); }
.liten { font-size: 13px; }
.midt { text-align: center; }
.feil { color: var(--fare); }

.stor-knapp, .knapp {
  display: block; width: 100%; border: 0; border-radius: var(--radius);
  background: var(--aksent); color: #111; font-weight: 800; text-align: center;
  padding: 16px; margin-top: 12px; touch-action: manipulation; cursor: pointer;
}
.knapp.sekundar { background: var(--flate2); color: var(--tekst); }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--flate2); }
.liste li:first-child { border-top: 0; }
.liste .navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste button { border: 0; border-radius: 10px; background: var(--flate2); padding: 8px 12px; touch-action: manipulation; }
.liste button.apne { background: var(--aksent); color: #111; font-weight: 700; }

.info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.info dt { color: var(--dempet); }
.info dd { margin: 0; }

.linje { height: 8px; background: var(--flate2); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.linje-fyll { height: 100%; width: 0; background: var(--aksent); transition: width .2s; }
.linje-fyll.ubestemt { width: 30%; animation: gli 1.2s ease-in-out infinite; }
@keyframes gli { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

dialog {
  background: var(--flate); color: var(--tekst); border: 0; border-radius: var(--radius);
  width: min(92vw, 420px); padding: 16px;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 8px; }
.diag-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
fieldset { border: 1px solid var(--flate2); border-radius: 10px; margin: 0 0 8px; }
.valg { display: block; padding: 8px 0; }
menu { margin: 0; padding: 0; }