:root {
  --papir: #EEF2EE;
  --blekk: #1E2F2A;
  --dempet: #586B63;
  --linje: #C3CFC8;
  --aksent: #D9A21B;
  --flate: #F8FAF7;
  --varsel: #B3261E;
  --ok: #1E6B3A;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papir: #131B18; --blekk: #E4EBE7; --dempet: #97A9A1; --linje: #2C3A35; --aksent: #E7B53C; --flate: #1A2420; --varsel: #F2B8B5; --ok: #7FD19B;
  }
}
:root[data-theme="dark"] {
  --papir: #131B18; --blekk: #E4EBE7; --dempet: #97A9A1; --linje: #2C3A35; --aksent: #E7B53C; --flate: #1A2420; --varsel: #F2B8B5; --ok: #7FD19B;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--blekk); text-decoration-color: var(--aksent); text-underline-offset: 3px; }
body { margin: 0; background: var(--papir); color: var(--blekk); font: 17px/1.5 var(--sans); }
main { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
body.bred main { max-width: 64rem; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
label { display: block; margin: .75rem 0; font-weight: 500; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .6rem .7rem; font: inherit; color: inherit; border: 1.5px solid var(--linje); border-radius: 3px; background: var(--flate); }
button { font: inherit; font-weight: 700; padding: .6rem 1rem; border: 1.5px solid var(--blekk); border-radius: 3px; background: var(--blekk); color: var(--papir); cursor: pointer; }
button:disabled { opacity: .5; cursor: progress; }
button.stille { background: var(--flate); color: var(--blekk); border-color: var(--blekk); padding: .3rem .6rem; min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--aksent); outline-offset: 4px; }
button.omslag { display: flex; flex-direction: column; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
#status, .svar { min-height: 1.5em; color: var(--blekk); font-weight: 500; }
#status:empty { min-height: 0; margin: 0; }
.svar { margin: .75rem 0 0; }
.svar:empty { min-height: 0; margin: 0; }
#status[data-type], .svar[data-type] { padding: .6rem .8rem; border: 2px solid; border-radius: 3px; background: var(--papir); }
#status[data-type="ok"], .svar[data-type="ok"] { border-color: var(--ok); }
#status[data-type="feil"], .svar[data-type="feil"] { border-color: var(--varsel); }
.ingress { font-size: 1.15rem; }
.tilbake { margin: 0 0 .5rem; font-size: .95rem; }
.rutenett { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1.25rem 1rem; }
.rutenett li { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; overflow-wrap: anywhere; }
.rutenett img { display: block; width: 100%; height: auto; background: var(--linje); box-shadow: 6px 6px 0 var(--linje); }
.faner { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 1rem 0; border-bottom: 1px solid var(--linje); }
.faner button { background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -1px; padding: .5rem 0 .6rem; min-width: 0; font: inherit; font-family: var(--serif); font-weight: 400; color: var(--dempet); text-align: left; cursor: pointer; }
.faner button[aria-pressed="true"] { background: none; color: var(--blekk); border-bottom-color: var(--aksent); }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
tr.mangler td { color: var(--varsel); font-weight: 600; }
.bekreft { max-width: min(26rem, 90vw); padding: 1.2rem 1.4rem; border: 2px solid var(--blekk); border-radius: 3px; background: var(--flate); color: var(--blekk); }
.bekreft::backdrop { background: rgba(0, 0, 0, .45); }
.bekreft-tekst { margin: 0 0 1.1rem; font-size: 1.1rem; }
.bekreft .rad { margin: 0; }
.personvern { max-width: min(32rem, 92vw); }
.personvern h2 { margin: 0 0 .8rem; }
.personvern ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.personvern li { margin-bottom: .5rem; }
.personvern .meld-ut { margin: 1.4rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linje); font-size: .9rem; }
.personvern .meld-ut button { text-align: left; }
.bekreft-ja {min-height: 44px; background: var(--varsel); border-color: var(--varsel); color: var(--papir); }
button.sorter { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: inherit; cursor: pointer; }
/* To av overskriftene er sorteringsknapper med 44 px trykkflate og teksten
   sentrert i den. Uten dette står de ni piksler lavere enn de to som er ren tekst. */
.klasseliste thead th { vertical-align: middle; }
th[aria-sort="ascending"] button.sorter::after { content: " ↑"; color: var(--aksent); }
th[aria-sort="descending"] button.sorter::after { content: " ↓"; color: var(--aksent); }
#tidslinje-tittel { margin: 1.5rem 0 .25rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.klasseliste td.tall { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 4rem; }
.klasseliste tr.mangler td.tall, .klasseliste tr.faa td.tall { color: var(--varsel); }
.klasseliste td.dato { color: var(--dempet); white-space: nowrap; width: 8rem; }
.klasseliste .rygger { display: flex; align-items: flex-end; gap: 2px; height: 1.6rem; }
.klasseliste .rygger i { display: block; width: .5rem; border-radius: 1px 1px 0 0; }
.klasseliste .rygger i.tom { height: 1.2rem; background: none; border: 1.5px dashed var(--linje); border-bottom: 0; }
.klasseliste .rygger.tomt { color: var(--dempet); font-size: .9rem; font-weight: 400; line-height: 1.6rem; }
.lesetid { margin: 1rem 0 1.5rem; }
.lesetid .spor { position: relative; height: 2.4rem; border-bottom: 2px solid var(--blekk); }
.lesetid .spor i { position: absolute; bottom: 0; width: .5rem; margin-left: -.25rem; background: var(--blekk); border-radius: 1px 1px 0 0; }
.lesetid .akse { position: relative; height: 1.4rem; }
.lesetid .akse span { position: absolute; top: 0; padding-left: .25rem; border-left: 1px solid var(--linje); font-size: .8rem; color: var(--dempet); }
@media (max-width: 34rem) {
  .klasseliste td.dato, .klasseliste th:last-child { display: none; }
  .klasseliste .rygger i { width: .3rem; }
}
code { font-size: .8rem; overflow-wrap: anywhere; }
.liten { font-size: .9rem; color: var(--dempet); margin-top: 3rem; }
.rad { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.rad input { width: auto; flex: 1 1 12rem; }
td button.stille { padding: 0; border: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.rutenett small { color: var(--dempet); }
.svar.venter { color: var(--dempet); font-size: .9rem; font-weight: 400; }
.prikker { display: inline-block; width: 1.4em; text-align: left; }
.prikker i { font-style: normal; }
.prikker i::before { content: "."; }
.prikker i:nth-child(2) { animation: prikk2 1.2s steps(1) infinite; }
.prikker i:nth-child(3) { animation: prikk3 1.2s steps(1) infinite; }
@keyframes prikk2 { 0% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes prikk3 { 0% { opacity: 0; } 66%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .prikker i { opacity: 1; animation: none; } }
.kortvalg { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.kortfeil { margin: .35rem 0 0; color: var(--varsel); font-size: .9rem; font-weight: 700; }
.rutenett input { margin-top: 0; }
.liten a { margin-right: 1rem; }
td.handlinger { white-space: nowrap; }
td.handlinger button { margin: 0 1.25rem 0 0; }
/* Navnet og passordet leses av et menneske og skal aldri brytes.
   Lenken kopieres, den leses ikke, og holder seg derfor på én linje. */
#elever td:first-child, #elever td:nth-child(3) { white-space: nowrap; }
#elever td code { font-size: .85rem; }
#elever td:nth-child(2) code { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ett klikk markerer hele passordet, så det kan kopieres uten å dra. */
#elever td:nth-child(3) code { user-select: all; }
button.lenkeknapp { min-height: 44px; padding: 0; border: 0; background: none; color: var(--blekk); font-weight: 400; text-decoration: underline; text-decoration-color: var(--aksent); text-underline-offset: 3px; }
.metode { margin: 1.25rem 0; padding: 1rem 1.1rem 1.25rem; border: 2px solid var(--linje); border-radius: 3px; background: var(--flate); }
.metode h2 { margin-top: 0; }
.eller { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--dempet); font-weight: 700; }
.eller::before, .eller::after { content: ''; flex: 1; border-top: 1.5px dashed var(--linje); }
hr.skille { margin: 2.5rem 0 0; border: 0; border-top: 2px solid var(--linje); }
.piller { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 0; }
#tilbake { margin-top: 1rem; }
.pille { min-height: 52px; padding: 0 1.5rem; border: 2px solid var(--blekk); border-radius: 999px; background: var(--flate); color: var(--blekk); font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.pille[aria-pressed="true"] { background: var(--aksent); border-color: var(--aksent); color: #1E2F2A; }
.barnevalg { max-width: 22rem; }
.barnevalg select {
  appearance: none;
  min-height: 52px;
  padding: .6rem 3rem .6rem 1rem;
  border: 2px solid var(--blekk);
  border-radius: 3px;
  background: var(--flate) no-repeat right 1rem center / 1.1rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E2F2A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  font-size: 1.1rem;
  font-weight: 700;
}
.barnevalg select:disabled { border-color: var(--linje); color: var(--dempet); font-weight: 400; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .barnevalg select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E4EBE7' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  }
}
.storknapp { display: inline-flex; align-items: center; min-height: 52px; padding: .6rem 1.4rem; border: 2px solid var(--blekk); border-radius: 3px; background: var(--blekk); color: var(--papir); font-weight: 700; text-decoration: none; }
.bildevalg { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.knapp-fil { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1rem; margin: 0; border: 1.5px solid var(--blekk); border-radius: 3px; background: var(--flate); font-weight: 700; cursor: pointer; }
a.knapp-fil { color: var(--blekk); text-decoration: none; }
.knapp-fil:focus-within { outline: 3px solid var(--aksent); outline-offset: 4px; }
.skjult-fil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; }
@media (pointer: coarse) { .pc { display: none; } }
@media (pointer: fine), (pointer: none) { .mobil { display: none; } }
.valgt { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: .5rem 0; }
.valgt img { width: 4rem; height: auto; box-shadow: 4px 4px 0 var(--linje); }
body.laast { overflow: hidden; }
.kutt { position: fixed; inset: 0; z-index: 10; overflow: auto; display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1rem 1.5rem; background: var(--papir); }
.kutt h2 { margin: 0; }
.kutt-hjelp { margin: 0; font-size: .95rem; color: var(--dempet); }
.kutt-flate { position: relative; width: fit-content; margin: 0 auto; touch-action: none; }
.kutt-flate canvas { display: block; max-width: 100%; max-height: 58vh; background: var(--linje); }
.kutt-ramme { position: absolute; inset: 0; width: 100%; height: 100%; }
.kutt-ramme polygon { fill: color-mix(in srgb, var(--aksent) 18%, transparent); stroke: var(--aksent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.kutt-tak { position: absolute; inset: 0; }
.kutt-handtak { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none; }
.kutt-handtak::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--flate); border: 3px solid var(--aksent); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.kutt-lupe { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid var(--blekk); box-shadow: 0 3px 12px rgba(0, 0, 0, .45); background: var(--flate); pointer-events: none; }
.kutt-valg { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.kutt-valg button { min-height: 44px; }