/* ==========================================================================
   FOKUS (18. oktober 2026)

   Én side uten alt annet. Mens siden står framme, eller en økt pågår,
   skjules menyen, topplinjen, chatten, Sidekick og anropsbanneret. Siden er
   festet over alt, så ingen annen del av OS-et kan legge noe oppå.

   Alle skriftstørrelser, avstander og farger er tokens fra lodd-tokens.css.
   Det store tallet er tegnet i SVG og skalerer med ringen, så skalaen
   (høyst --t-8) står urørt.
   ========================================================================== */

html[data-fokus-side] .topplinje,
html[data-fokus-last] .topplinje,
html[data-fokus-side] .sidemeny,
html[data-fokus-last] .sidemeny,
html[data-fokus-side] .skuffteppe,
html[data-fokus-last] .skuffteppe,
html[data-fokus-side] #chatpanel,
html[data-fokus-last] #chatpanel,
html[data-fokus-side] #kompisknapp,
html[data-fokus-last] #kompisknapp,
html[data-fokus-side] #kompispanel,
html[data-fokus-last] #kompispanel,
html[data-fokus-side] .anropsbanner,
html[data-fokus-last] .anropsbanner,
html[data-fokus-side] .huddle-beskjed,
html[data-fokus-last] .huddle-beskjed,
html[data-fokus-last] .hopp { display: none !important; }

.innhold #skjerm-fokus.pa {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-7) var(--s-5);
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Timerknappen i topplinjen. Prikken sier at den andre fokuserer nå. */
#fokusknapp { position: relative; }
#fokusknapp[hidden] { display: none; }
#fokusknapp .fok-prikk {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--gronn);
}
#fokusknapp .fok-prikk[hidden] { display: none; }

#skjerm-fokus .fok-lukk { position: fixed; top: var(--s-5); right: var(--s-5); }

#skjerm-fokus .fok-rom {
  width: 100%;
  max-width: 520px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}
#skjerm-fokus .etikett { margin: 0; }

#skjerm-fokus .fok-sporsmal {
  margin: 0;
  font-size: var(--t-8);
  line-height: var(--t-8-h);
  font-weight: 500;
  letter-spacing: -.02em;
}
#skjerm-fokus .fok-oppgave {
  margin: 0;
  max-width: 100%;
  font-size: var(--t-7);
  line-height: var(--t-7-h);
  font-weight: 500;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#skjerm-fokus .fok-melding {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--gronn-svak);
  color: var(--gronn);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-fokus .fok-feil {
  margin: 0;
  color: var(--rod);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-fokus .fok-feil[hidden] { display: none; }
#skjerm-fokus .fok-hint {
  margin: 0;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
}

#skjerm-fokus .fok-felt {
  width: 100%;
  min-height: var(--finger);
  font-size: var(--t-5);
  line-height: var(--t-5-h);
  text-align: center;
}

/* Oppgavevalget: én rad per oppgave, gruppert, med de som er under arbeid øverst. */
#skjerm-fokus .fok-valg { width: 100%; display: flex; flex-direction: column; gap: var(--s-3); text-align: left; }
#skjerm-fokus .fok-etikett-liten {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  text-align: left;
}
#skjerm-fokus .fok-oppgaver {
  max-height: min(34vh, 288px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
}
#skjerm-fokus .fok-gruppe {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--flate-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  font-weight: 500;
}
#skjerm-fokus .fok-gruppe-tall { color: var(--ink-3); }
#skjerm-fokus .fok-rad {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: var(--finger);
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--tid-2) var(--kurve);
}
#skjerm-fokus .fok-rad:last-child { border-bottom: 0; }
#skjerm-fokus .fok-rad-tittel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-fokus .fok-hake {
  flex: none;
  width: var(--rute-liten);
  height: var(--rute-liten);
  border: 1.5px solid var(--line-3);
  border-radius: 50%;
  transition: background-color var(--tid-2) var(--kurve), border-color var(--tid-2) var(--kurve);
}
#skjerm-fokus .fok-rad[aria-checked="true"] { background: var(--brand-svak); color: var(--ink); }
#skjerm-fokus .fok-rad[aria-checked="true"] .fok-hake { background: var(--brand-tekst); border-color: var(--brand-tekst); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-fokus .fok-rad:hover { background: var(--flate-2); }
  #skjerm-fokus .fok-rad[aria-checked="true"]:hover { background: var(--brand-svak); }
}
#skjerm-fokus .fok-rad:active { background: var(--flate-3); }

/* Tidsvalget: et stort tall man kan skrive i, trinn på fem, en glider og
   fire vanlige tider. Alle fire veier gir det samme tallet. */
#skjerm-fokus .fok-varighet { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
#skjerm-fokus .fok-stepper { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
#skjerm-fokus .fok-trinn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--finger) + var(--s-4));
  height: calc(var(--finger) + var(--s-4));
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--flate);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--tid-2) var(--kurve), transform var(--tid-1) var(--kurve);
}
#skjerm-fokus .fok-trinn svg { width: var(--ikon); height: var(--ikon); }
#skjerm-fokus .fok-trinn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-fokus .fok-trinn:hover { border-color: var(--line-3); }
}
#skjerm-fokus .fok-tidvisning {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-3);
  min-width: calc(var(--kon-belop) + var(--s-6));
  color: var(--ink);
  cursor: text;
}
#skjerm-fokus .fok-tidvisning input {
  width: 3ch;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--t-8);
  line-height: var(--t-8-h);
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
}
#skjerm-fokus .fok-tidvisning input::-webkit-outer-spin-button,
#skjerm-fokus .fok-tidvisning input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#skjerm-fokus .fok-tidvisning input:focus { box-shadow: none; outline: none; border-bottom: 1px solid var(--brand-tekst); }
#skjerm-fokus .fok-tidvisning span { color: var(--ink-3); font-size: var(--t-4); line-height: var(--t-4-h); }
#skjerm-fokus .fok-glid { width: 100%; min-height: var(--finger); margin: 0; accent-color: var(--brand-tekst); cursor: pointer; }
#skjerm-fokus .fok-tidsknapper { display: flex; gap: var(--s-3); width: 100%; }
#skjerm-fokus .fok-tidsknapp {
  flex: 1;
  min-height: var(--finger);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  cursor: pointer;
  transition: border-color var(--tid-2) var(--kurve), background-color var(--tid-2) var(--kurve), transform var(--tid-1) var(--kurve);
}
#skjerm-fokus .fok-tidsknapp:active { transform: scale(.97); }
#skjerm-fokus .fok-tidsknapp[aria-pressed="true"] { border-color: var(--brand-tekst); background: var(--brand-svak); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-fokus .fok-tidsknapp:hover { border-color: var(--line-3); }
}
#skjerm-fokus .fok-regel {
  margin: 0;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
}

/* De fire prikkene: hvor i Pomodoro-syklusen du står. */
#skjerm-fokus .fok-omganger { display: flex; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
#skjerm-fokus .fok-omgang-prikk {
  width: var(--rute-liten);
  height: var(--rute-liten);
  border: 1.5px solid var(--line-3);
  border-radius: 50%;
}
#skjerm-fokus .fok-omgang-prikk.gjort { background: var(--brand-tekst); border-color: var(--brand-tekst); }
#skjerm-fokus .fok-omgang-prikk.naa { border-color: var(--brand-tekst); outline: 3px solid var(--brand-svak); }

#skjerm-fokus .fok-synlig {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--finger);
  color: var(--ink-3);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  cursor: pointer;
}
#skjerm-fokus .fok-start { width: 100%; max-width: 320px; }

#skjerm-fokus .fok-andre { width: 100%; }
#skjerm-fokus .fok-andre-rad {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-fokus .fok-andre-rad b { color: var(--ink-2); font-weight: 500; }
#skjerm-fokus .fok-prikk-liten {
  display: inline-block;
  width: var(--punkt);
  height: var(--punkt);
  margin-right: var(--s-3);
  border-radius: 50%;
  background: var(--gronn);
  vertical-align: middle;
}

#skjerm-fokus .fok-tall { display: flex; justify-content: center; gap: var(--s-7); margin-top: var(--s-4); }
#skjerm-fokus .fok-tall-verdi { display: block; font-family: var(--font-mono); font-size: var(--t-5); line-height: var(--t-5-h); color: var(--ink); }
#skjerm-fokus .fok-tall-navn { display: block; color: var(--ink-3); font-size: var(--t-2); line-height: var(--t-2-h); }

#skjerm-fokus .fok-siste { list-style: none; width: 100%; margin: var(--s-4) 0 0; padding: 0; text-align: left; }
#skjerm-fokus .fok-siste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-fokus .fok-siste-tittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
#skjerm-fokus .fok-siste-del { color: var(--ink-3); }
#skjerm-fokus .fok-siste-del.ferdig { color: var(--gronn); }

/* Timeren. Ringen er festet til skjermen, og tallet i den er tegnet i SVG. */
#skjerm-fokus .fok-ring { width: min(72vmin, 420px); aspect-ratio: 1; }
#skjerm-fokus .fok-ring svg { display: block; width: 100%; height: 100%; }
#skjerm-fokus .fok-ring-spor { stroke: var(--line-2); }
#skjerm-fokus .fok-ring-fyll { stroke: var(--brand-tekst); transition: stroke-dashoffset 1s linear; }
/* Det store tallet står i Geist og ikke i mono: mono har skråstrek i nullen og ser
   ut som kode når tallet er stort. Tabelltall holder bredden stille mens det telles. */
#skjerm-fokus .fok-siffer {
  fill: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
  letter-spacing: -.03em;
  text-rendering: geometricPrecision;
}
#skjerm-fokus .fok-ring.pause .fok-ring-fyll { stroke: var(--gronn); }
#skjerm-fokus .fok-ring.pause .fok-siffer { fill: var(--gronn); }
#skjerm-fokus .fok-ring.stoppet .fok-ring-fyll { stroke: var(--ink-3); }
#skjerm-fokus .fok-ring.stoppet .fok-siffer { fill: var(--ink-3); }
#skjerm-fokus .fok-ring.ute .fok-ring-fyll { stroke: var(--amber); }
#skjerm-fokus .fok-ring.ute .fok-siffer { fill: var(--amber); }
#skjerm-fokus .fok-ring.pause.ute .fok-ring-fyll { stroke: var(--gronn); }
#skjerm-fokus .fok-ring.pause.ute .fok-siffer { fill: var(--gronn); }
#skjerm-fokus .fok-linje { margin: 0; color: var(--ink-3); font-size: var(--t-4); line-height: var(--t-4-h); }

#skjerm-fokus .fok-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

#skjerm-fokus .fok-avbryt { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
#skjerm-fokus .fok-hold {
  position: relative;
  min-height: var(--finger);
  width: min(100%, 320px);
  padding: 0 var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
#skjerm-fokus .fok-hold-fyll {
  position: absolute;
  inset: 0;
  background: var(--rod-svak);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tid-3) var(--kurve-ut);
}
#skjerm-fokus .fok-hold.holdes .fok-hold-fyll { transition: none; }
#skjerm-fokus .fok-hold-tekst { position: relative; }
#skjerm-fokus .fok-hold.holdes { border-color: var(--rod); color: var(--rod); }

@media (prefers-reduced-motion: reduce) {
  #skjerm-fokus .fok-ring-fyll,
  #skjerm-fokus .fok-hold-fyll { transition: none; }
}

@media (max-width: 599px) {
  .innhold #skjerm-fokus.pa { padding: var(--s-6) var(--s-4); }
  #skjerm-fokus .fok-sporsmal { font-size: var(--t-7); line-height: var(--t-7-h); }
  #skjerm-fokus .fok-tall { gap: var(--s-6); }
}