/*
  Ukelogg — en rolig, personlig loggbok i SamfunnPrep-stilen.
  Lyst tema bruker bare de åtte fargene i SamfunnPrep: hvit bakgrunn, mørk skifer for tekst og
  linjer, nøytral skifer for sekundær tekst, lys skifer for skiller og stille flater, blått som
  eneste aksent, og grønt, oransje og rødt bare for status. Flatt: ingen skygger eller gradienter.
  Tall og datoer settes i Figtree med tabelltall (like brede sifre), så de står rolig og på linje.
  Komponentene følger oppbygningen i shadcn/ui (knapper, felt, input-otp, verktøylinje for editor).
*/

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --raised: rgba(202, 213, 226, .28);    /* lys skifer #CAD5E2, som stille flate */
  --line: rgba(202, 213, 226, .75);
  --line-2: #CAD5E2;
  --text: #0F172A;
  --text-2: #62748E;
  --muted: #62748E;
  --accent: #155DFC;
  --accent-ink: #155DFC;
  --accent-soft: rgba(21, 93, 252, .07);
  --on-accent: #FFFFFF;
  --btn: #155DFC;
  --btn-hover: color-mix(in srgb, #155DFC 86%, #0F172A);
  --btn-text: #FFFFFF;
  --pos: #00A63E;
  --warn: #E17100;
  --neg: #E7000B;
  --ring: rgba(21, 93, 252, .28);
  --pos-ink: color-mix(in srgb, var(--pos) 70%, var(--text)); /* statusfarge som tekst: leselig på begge temaer */
  --warn-ink: color-mix(in srgb, var(--warn) 70%, var(--text));
  --shadow-sm: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --code: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --nav-h: 64px;
  color-scheme: light dark;
}
/* Mørkt tema: følger enheten, med mindre brukeren har valgt selv (data-theme på <html>). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141415;
    --card: #19191b;
    --raised: #232325;
    --line: rgba(237, 237, 237, .08);
    --line-2: rgba(237, 237, 237, .14);
    --text: #ededed;
    --text-2: #a1a1a6;
    --muted: #85858b;
    --accent: #8aa6f5;
    --accent-ink: #9db4f7;
    --accent-soft: rgba(138, 166, 245, .1);
    --on-accent: #141415;
    --btn: #ededed;
    --btn-hover: #d4d4d6;
    --btn-text: #141415;
    --pos: #4cc38a;
    --warn: #f0a050;
    --neg: #e5484d;
    --ring: rgba(138, 166, 245, .4);
    --shadow-sm: 0 0 #0000;
    --shadow-lg: 0 0 #0000;
  }
}
:root[data-theme="dark"] {
  --bg: #141415;
  --card: #19191b;
  --raised: #232325;
  --line: rgba(237, 237, 237, .08);
  --line-2: rgba(237, 237, 237, .14);
  --text: #ededed;
  --text-2: #a1a1a6;
  --muted: #85858b;
  --accent: #8aa6f5;
  --accent-ink: #9db4f7;
  --accent-soft: rgba(138, 166, 245, .1);
  --on-accent: #141415;
  --btn: #ededed;
  --btn-hover: #d4d4d6;
  --btn-text: #141415;
  --pos: #4cc38a;
  --warn: #f0a050;
  --neg: #e5484d;
  --ring: rgba(138, 166, 245, .4);
  --shadow-sm: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 96px) env(safe-area-inset-left);
  min-height: 100vh;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Ringen er for dem som bruker tastatur (data-keyboard settes i app.js). Etter et trykk, eller når koden flytter fokus, skal den ikke synes. */
html:not([data-keyboard]) :is(:focus-visible, :focus-visible + *) { outline: none !important; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--code); }
[hidden] { display: none !important; }

/* ================= komponenter ================= */

/* knapper: btn + variant + størrelse */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
  color: var(--text);
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease);
}
.btn svg { flex: none; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn-icon { width: 36px; padding: 0; }
.btn-block { width: 100%; }

.btn-primary { background: var(--btn); color: var(--btn-text); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--btn-hover); }
.btn-secondary { background: var(--raised); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--raised) 88%, var(--text)); }
.btn-outline { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); }
.btn-outline:hover:not(:disabled) { background: var(--raised); }
.btn-outline svg, .btn-ghost svg { color: var(--text-2); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); color: var(--text); }
.btn-danger { color: var(--muted); }
.btn-danger:hover:not(:disabled) { color: var(--neg); background: color-mix(in srgb, var(--neg) 8%, transparent); }

.link {
  color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: text-decoration-color .15s var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

/* skjemafelt */
.form-item { display: grid; gap: 8px; }
.form-item + .form-item { margin-top: 16px; }
.label { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text); }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.form-error { margin: 12px 0 0; font-size: 14px; color: var(--neg); }
.input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 8px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder { color: var(--muted); }
.input:hover { border-color: color-mix(in srgb, var(--line-2) 60%, var(--muted)); }
.input:focus { outline: 0; border-color: var(--text); box-shadow: inset 0 0 0 .5px var(--text); }
.input-sm { height: 36px; font-size: 14px; }
.input-wrap { position: relative; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input.has-icon { padding-left: 36px; }

/* kode: fire ruter som henger sammen */
.otp { position: relative; width: max-content; }
.otp input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  font-size: 16px; opacity: 0; cursor: pointer; z-index: 1;
}
.otp-group { display: flex; }
.otp-slot {
  position: relative; width: 48px; height: 52px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); border-left-width: 0;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.otp-slot:first-child { border-left-width: 1px; border-radius: 10px 0 0 10px; }
.otp-slot:last-child { border-radius: 0 10px 10px 0; }
.otp-slot.filled::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.otp-slot.active { z-index: 1; border-color: var(--text); border-left-width: 1px; margin-left: -1px; box-shadow: inset 0 0 0 .5px var(--text); }
.otp-slot.active:first-child { margin-left: 0; }
.otp-slot.caret::before {
  content: ""; width: 1px; height: 20px; background: var(--text); position: absolute;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.otp.error .otp-slot { border-color: var(--neg); }
.otp.error .otp-slot.active { box-shadow: inset 0 0 0 .5px var(--neg); }
.otp.error { animation: shake .3s var(--ease); }
@keyframes shake { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

/* avatar med initialer */
.avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text); font-weight: 600; letter-spacing: .02em; user-select: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }

/* ================= topp ================= */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 720px; margin: 0 auto; padding: 16px 20px 0;
}
.brand {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; margin-left: -8px; border-radius: 8px;
  font-size: 17px; font-weight: 600; transition: background-color .15s var(--ease);
}
body:not(.logged-out) .brand:hover { background: var(--raised); }
body:is(.logged-out, .onboarding) .brand { pointer-events: none; }
.logo { display: grid; place-items: center; width: 24px; height: 24px; color: var(--text); }
.top-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Lagringsstatus: usynlig når alt er lagret, en liten prikk mens det lagres, tekst bare når noe er galt. */
.status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; transition: opacity .4s var(--ease) .6s; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background-color .15s var(--ease); }
.status .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.status[data-state="idle"], .status[data-state="saved"] { opacity: 0; }
.status[data-state="saving"] { opacity: 1; transition-delay: 0s; }
.status[data-state="saving"] .dot { background: var(--line-2); }
.status[data-state="offline"] { opacity: 1; transition-delay: 0s; color: var(--neg); }
.status[data-state="offline"] .dot { background: var(--neg); }
.status[data-state="offline"] .txt { position: static; width: auto; height: auto; clip: auto; }

.user-btn {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; margin-right: -4px;
  border-radius: 18px; font-size: 14px; font-weight: 500; color: var(--text-2); min-width: 0;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.user-btn:hover { background: var(--raised); color: var(--text); }
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-view="profile"] .user-btn, body[data-view="settings"] .user-btn { background: var(--raised); color: var(--text); }

/* ================= ukenavigasjon ================= */
.weeknav {
  position: sticky; top: 0; z-index: 6;
  max-width: 720px; margin: 0 auto; padding: 12px 20px;
  background: var(--bg);
}
.weeknav-row { display: flex; align-items: center; gap: 4px; }
.weeklabel {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px;
  padding: 4px 8px; margin-left: -8px; border-radius: 10px; text-align: left;
  transition: background-color .15s var(--ease);
}
.weeklabel:hover { background: var(--raised); }
.weeklabel:active { transform: scale(.98); }
.wk { font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; }
.wk .tnum { letter-spacing: -.02em; }
.range { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

main { max-width: 720px; margin: 0 auto; padding: 12px 20px 0; }
main > * + * { margin-top: 12px; }
main > .week-tools { margin-top: 16px; }
.enter { animation: rise .36s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ================= tom tilstand og uker uten praksis ================= */
/* Står rett på siden, uten kort: ikon, kort tekst og én tydelig handling, midt på. */
.empty, .offcard { display: flex; flex-direction: column; align-items: center; margin-top: clamp(32px, 9vh, 88px); text-align: center; }
.empty-ic { display: flex; justify-content: center; margin-bottom: 16px; color: var(--muted); }
.empty-ic svg { stroke-width: 1.1; }
.empty-ic.is-now { color: var(--accent-ink); }
.empty-ic.is-missing { color: var(--warn); }
.empty h3, .offcard h3 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
.empty p { margin: 6px 0 0; color: var(--text-2); }
.empty p strong { color: var(--text); font-weight: 600; }
.empty-actions { display: grid; gap: 4px; width: min(100%, 280px); margin-top: 24px; }

/* valgknapper i ett nivå (grunn for ingen praksis, kompetansemål) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--text); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.chip:hover { background: var(--raised); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.chip svg { flex: none; color: var(--muted); }
.chip[aria-pressed="true"] svg { color: var(--accent-ink); }

.offcard-head p { margin: 6px 0 0; color: var(--text-2); }
.offcard-note { margin: 8px 0 0; max-width: 36rem; color: var(--text-2); overflow-wrap: anywhere; }
.offcard-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.offcard + .week-tools { margin-top: 40px; }

/* Eget valg av årsak, uten å endre uka før eleven bekrefter. */
.off-dialog {
  width: 400px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 24px; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--card); color: var(--text); overflow-y: auto;
}
.off-dialog::backdrop { background: rgb(0 0 0 / .4); }
body:has(.off-dialog[open]) { overflow: hidden; }
.off-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.off-dialog-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.off-dialog-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.off-dialog-head .btn { width: 28px; height: 28px; margin-right: -4px; }
.off-reasons { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.off-reasons legend { padding: 0; margin-bottom: 12px; }
.off-options { display: grid; gap: 8px; }
.off-option { position: relative; cursor: pointer; }
.off-option-content {
  display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; line-height: 22px;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.off-option-content > svg { color: var(--muted); }
.off-option:hover .off-option-content { background: var(--raised); }
.off-option input:checked + .off-option-content { background: var(--accent-soft); border-color: var(--accent-ink); }
.off-option input:checked + .off-option-content > svg { color: var(--accent-ink); }
.off-option input:focus-visible + .off-option-content { outline: 2px solid var(--accent); outline-offset: 2px; }
.off-choice { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 50%; }
.off-choice svg { opacity: 0; }
.off-option input:checked + .off-option-content .off-choice { border-color: var(--accent-ink); background: var(--accent-ink); color: var(--card); }
.off-option input:checked + .off-option-content .off-choice svg { opacity: 1; }
.off-other { margin-top: 20px; }
.off-other textarea { display: block; width: 100%; height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; font: inherit; font-size: 15px; line-height: 22px; }
.off-other .off-reason-hint { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 12px; }
.off-other .form-error { margin-top: 8px; }
.off-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
@media (max-width: 420px) {
  .off-dialog { padding: 20px; }
}

/* varsel om manglende logg forrige uke */
.nudge {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px;
  border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--text);
}
.nudge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.nudge-text { flex: 1; }
.nudge .link { font-size: 14px; }

/* ================= loggkort ================= */
.session {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; overflow: clip;
}
/* dato, praksisdag og fremdrift: egen linje over kortet, uten ramme. Datoknappen er trukket ut
   til venstre, så teksten flukter med kanten på kortet. */
.session-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 2px 0 0; margin-left: -8px;
}
main > .session-head + .session { margin-top: 6px; }
.date-pick { position: relative; min-width: 0; }
.date-field {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; border-radius: 8px;
  max-width: 100%; transition: background-color .15s var(--ease);
}
.date-field:hover, .date-field[aria-expanded="true"] { background: var(--raised); }
.date-text { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-icon { color: var(--accent); flex: none; }
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; flex: none;
  font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft);
}

/* fremdrift: én strek per spørsmål */
.progress { display: flex; align-items: center; gap: 10px; flex: none; font-size: 13px; font-weight: 500; color: var(--muted); }
.segs { display: flex; gap: 3px; }
.segs i { width: 14px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background-color .2s var(--ease); }
.segs i.on { background: var(--accent); }
.progress.complete { color: var(--text); }
.progress.complete .segs i { background: var(--pos); }

/* kalender med hurtigvalg (calendar-standard-5): rolig, uten streker.
   Uka loggen hører til har blått ukenummer, valgt dato er fylt. Hold over et ukenummer, så lyser raden svakt. */
.popover.cal-pop { width: auto; padding: 0; display: flex; gap: 0; z-index: 14; overflow: hidden; }
.cal { padding: 12px 8px 12px 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 8px; }
.cal-caption { font-size: 14px; font-weight: 600; }
.cal-grid { border-collapse: separate; border-spacing: 0; }
.cal-grid th { height: 28px; width: 36px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cal-grid th abbr { text-decoration: none; }
.cal-grid td { padding: 1px 0; text-align: center; }
/* Ukenumrene er en smal kolonne bak en tynn strek, så datoene får plassen. */
.cal-grid th.cal-wk, .cal-grid td.cal-wk { width: 32px; padding-right: 3px; border-right: 1px solid var(--line); }
.cal-grid th.cal-wk { font-size: 10px; text-align: center; }
.cal-grid tr > :nth-child(2) { padding-left: 4px; }
.cal-day, .cal-wkbtn {
  width: 36px; height: 36px; border-radius: 8px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.cal-scrim { display: none; }
/* ukenummer: knapp som velger loggdagen i uka */
.cal-wkbtn { position: relative; width: 28px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cal-wkbtn:hover { color: var(--text); }
.cal-wkbtn.sel { color: var(--text); font-weight: 600; }
tr.cal-logweek .cal-wkbtn { color: var(--accent-ink); font-weight: 600; }
.cal-day:hover, tr:has(.cal-wkbtn:hover) td:not(.cal-wk) { background: var(--raised); }
tr:has(.cal-wkbtn:hover) td:nth-child(2) { border-radius: 8px 0 0 8px; }
tr:has(.cal-wkbtn:hover) td:last-child { border-radius: 0 8px 8px 0; }
.cal-day.outside { color: var(--muted); }
/* praksisdagen: hele kolonnen er blå, også ukedagen i overskriften (th.pday-col) */
.cal-grid th.pday-col { color: var(--accent-ink); font-weight: 600; }
.cal-day.pday { color: var(--accent-ink); font-weight: 600; }
.cal-day.pday.outside { opacity: .5; }
/* i dag: understreket, så den ikke forveksles med praksisdagen */
.cal-day.today { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cal-day.selected, .cal-day.selected:hover { background: var(--btn); color: var(--btn-text); font-weight: 600; opacity: 1; }
.cal-day:focus-visible, .cal-wkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* høyre side: loggdagen i hver uke i måneden */
.cal-side { width: 184px; padding: 12px 12px 12px 4px; display: flex; flex-direction: column; gap: 8px; }
.cal-side-title { height: 32px; margin: 0 0 4px; padding: 0 10px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text); }
.cal-quick { display: grid; gap: 2px; }
.cal-q {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; text-align: left; transition: background-color .12s var(--ease);
}
.cal-q:hover { background: var(--raised); }
.cal-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.cal-q-wk { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.cal-q-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cal-q-dot.has { background: var(--accent); }
.cal-q-meta { font-size: 12px; color: var(--muted); }
.cal-q.cur .cal-q-wk { color: var(--accent-ink); }
.cal-q.on, .cal-q.on:hover { background: var(--accent-soft); color: var(--accent-ink); }
.cal-q.on .cal-q-meta { color: var(--accent-ink); }

/* verktøylinja (editor-toolbar-1) */
.toolbar {
  position: sticky; top: var(--nav-h); z-index: 4;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px 8px; border-bottom: 1px solid var(--line);
  background: var(--card);
}
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 8px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.tb-icon { padding: 0; }
.tb-btn:hover { background: var(--raised); color: var(--text); }
.tb-btn[aria-pressed="true"], .tb-btn.on, .tb-btn[aria-expanded="true"] {
  background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2);
}
.tb-select { padding: 0 6px 0 8px; }
.tb-select-icon { display: grid; }
.tb-select-label { min-width: 104px; text-align: left; }
.tb-select .chev { color: var(--muted); }
.tb-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line-2); flex: none; }
.tb-menu-wrap { position: relative; display: inline-flex; }

/* verktøytips på knapper: ved mus og ved tastaturfokus. Esc skjuler dem (html.no-tips, se app.js).
   Den gjennomsiktige kanten fyller gapet ned til knappen, så pekeren kan flyttes over tipset uten at det forsvinner. */
@media (hover: hover) and (pointer: fine) {
  .tb-btn[data-tip] { position: relative; }
  .tb-btn[data-tip]:hover::after, .tb-btn[data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding: 4px 8px; border-radius: 6px 6px 6px 6px / 12px 12px 6px 6px; border-top: 6px solid transparent; background: var(--text); background-clip: padding-box; color: var(--bg);
    font-size: 12px; font-weight: 400; white-space: nowrap; z-index: 10;
    animation: fade .16s var(--ease) .4s both;
  }
  .tb-btn[aria-expanded="true"]::after, .no-tips .tb-btn[data-tip]::after { display: none; }
}

/* meny og popover */
.menu, .popover {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 12;
  background: var(--card); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg);
  animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.menu { min-width: 208px; padding: 4px; display: grid; }
.menu-item {
  display: grid; grid-template-columns: 16px 1fr 16px; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px; border-radius: 6px; font-size: 14px; text-align: left; color: var(--text);
}
.menu-item svg { color: var(--text-2); }
.menu-item .check { color: var(--text); visibility: hidden; }
.menu-item[aria-checked="true"] .check { visibility: visible; }
.menu-item:hover, [data-keyboard] .menu-item:focus-visible { background: var(--raised); outline: 0; }
.popover { width: 280px; padding: 12px; display: grid; gap: 8px; }
.link-pop { left: auto; right: -40px; }
.popover-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* felt */
/* Spørsmålene er uavhengige av hverandre, så de har ikke nummer. Haken ved siden av viser at et spørsmål er besvart. */
.field {
  position: relative;
  padding: 14px 16px 8px 20px; border-top: 1px solid var(--line);
  transition: background-color .15s var(--ease);
}
.toolbar + .field { border-top: 0; }
.field .ok { display: none; flex: none; margin-top: 3px; color: var(--pos); }
.field-top .clip { margin-left: auto; }
.field.done .ok { display: block; }
.field-top { position: relative; display: flex; align-items: flex-start; gap: 8px; min-height: 28px; }
.field label { flex: 0 1 auto; padding-top: 3px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); cursor: text; }
.clip {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0 -4px 0 0; border-radius: 8px;
  color: var(--muted); transition: background-color .15s var(--ease), color .15s var(--ease);
}
.clip:hover, [data-keyboard] .clip:focus-visible { background: var(--raised); color: var(--accent-ink); }
.clip-menu { left: auto; right: -4px; min-width: 220px; }
.field.drop, .attach.drop { background: var(--accent-soft); }

.rte {
  min-height: 52px; padding: 2px 0 10px; outline: 0;
  font-size: 16px; line-height: 24px; color: var(--text); overflow-wrap: anywhere; cursor: text;
}
.rte.is-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.rte.is-empty { position: relative; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte p { margin: 0; }
.rte p + p { margin-top: 8px; }
.rte h3 { margin: 12px 0 4px; font-size: 18px; line-height: 26px; font-weight: 600; }
.rte h4 { margin: 12px 0 4px; font-size: 16px; line-height: 24px; font-weight: 600; }
.rte ul, .rte ol { margin: 8px 0; padding-left: 24px; }
.rte li { padding-left: 4px; }
.rte li + li { margin-top: 4px; }
.rte ul li::marker { color: var(--muted); }
.rte ol li::marker { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.rte blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--line-2); color: var(--text-2); }
.rte code {
  font: 400 14px/1 var(--code); padding: 2px 4px; border-radius: 4px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
}
.rte pre {
  margin: 8px 0; padding: 12px; border-radius: 8px; background: var(--raised);
  font: 400 14px/22px var(--code); white-space: pre-wrap; overflow-x: auto;
}
.rte pre code { padding: 0; background: none; box-shadow: none; font-size: inherit; }
.rte a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rte strong { font-weight: 600; }
.rte table { width: 100%; margin: 8px 0; border-collapse: collapse; font-size: 14px; }
.rte th, .rte td { padding: 6px 8px; border: 1px solid var(--line-2); vertical-align: top; text-align: left; }
.rte th { font-weight: 600; background: var(--raised); }

/* kompetansemål brukt før: én rad som kan rulles sidelengs, så feltet ikke blir høyere */
.goals {
  display: flex; align-items: center; gap: 6px; margin: 0 -16px 8px 0; padding: 2px 16px 2px 0;
  overflow-x: auto; scrollbar-width: none;
}
.goals::-webkit-scrollbar { display: none; }
.goals-label { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); margin-right: 2px; }
.chip.goal { flex: none; height: 28px; padding: 0 10px 0 8px; gap: 4px; font-size: 13px; max-width: 280px; }
.chip.goal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= vedlegg ================= */
.attach {
  padding: 14px 16px 16px 20px; border-top: 1px solid var(--line);
  transition: background-color .15s var(--ease);
}
.attach-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.attach-head .attach-count { margin-left: auto; }
.attach-title { font-size: 15px; line-height: 22px; font-weight: 600; }
.attach-count { font-size: 13px; color: var(--muted); }
.attach-count:empty { display: none; }
.attach-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.attach-hint { font-size: 13px; color: var(--muted); }
.dz-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .dz-hint { display: inline; } }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline-flex; } }
.session.files-full .attach-bar, .session.files-full .clip { display: none; }

.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.field-files { margin: 0 0 8px; }
.attach .file-list { margin-top: 12px; }
.file-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line-2); background: var(--card);
  animation: rise .3s var(--ease);
}
.file-preview {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 7px; overflow: hidden;
  background: var(--raised); color: var(--muted);
}
.file-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-preview:focus-visible { outline-offset: 1px; }
.file-item.broken .file-preview img { display: none; }
.doc-ext {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--accent-ink); background: var(--accent-soft);
}
.file-meta { display: grid; min-width: 0; gap: 1px; }
.file-cap {
  width: 100%; min-width: 0; height: 28px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: 6px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--text); background: transparent;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.file-cap::placeholder { color: var(--muted); font-weight: 400; }
.file-cap:hover { background: var(--raised); }
.file-cap:focus { outline: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--text); }
.file-name { font-size: 14px; font-weight: 500; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { font-size: 12px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-xs.btn-icon { width: 28px; height: 28px; border-radius: 6px; }
.file-item .spin, .savebar .spin {
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
.file-item .spin { width: 16px; height: 16px; }
kbd {
  font: 400 12px/1 var(--code); padding: 2px 6px; border-radius: 4px;
  background: var(--raised); box-shadow: inset 0 -1px 0 var(--line-2), inset 0 0 0 1px var(--line);
  color: var(--text-2);
}

/* ================= verktøy for uka ================= */
.week-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.week-tools .btn-danger { margin-left: auto; margin-right: -12px; }

/* ================= din side ================= */
body[data-view="profile"] .weeknav, body[data-view="profile"] main,
body[data-view="settings"] .weeknav, body[data-view="settings"] main { display: none; }
.profile { max-width: 720px; margin: 0 auto; padding: 16px 20px 0; animation: rise .36s var(--ease); }
.back { margin-left: -12px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin: 20px 0 24px; }
.profile-head h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -.015em; overflow-wrap: anywhere; }
.profile-meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 24px; }
.stat {
  padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.stat dt { font-size: 13px; color: var(--muted); }
.stat dd { margin: 8px 0 0; font-size: 28px; line-height: 1; font-weight: 650; letter-spacing: -.02em; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm);
  margin-bottom: 16px; overflow: clip;
}
.panel-head { padding: 20px 24px 0; }
.panel-head h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.panel-head p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); max-width: 36rem; }
.panel-body { padding: 20px 24px 0; }
.practice-form { padding-bottom: 24px; } /* kortet har ingen .panel-foot som gir luft under */
.panel-foot { display: flex; justify-content: flex-start; gap: 8px; padding: 20px 24px 24px; }
.code-form .panel-foot { padding-left: 0; padding-right: 0; }
.form-row { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.form-row .form-item + .form-item { margin-top: 0; }
.code-form .form-error { margin-top: 16px; }
/* Tannhjulet står rett overfor navnet på Din side. */
.profile-head-text { flex: 1; min-width: 0; }
.settings-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--text-2);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.settings-btn svg { transition: transform .4s var(--ease); }
.settings-btn:hover { background: var(--raised); color: var(--text); }
.settings-btn:hover svg { transform: rotate(45deg); }

/* Innstillinger: én rad per valg, med forklaringen til venstre og valget til høyre. Alle valg er like brede og like høye. */
.settings-rows { padding: 4px 24px 6px; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 12px 40px; padding: 16px 0; }
.setting + .setting { border-top: 1px solid var(--line); }
.setting-text { padding-top: 10px; } /* første linje står midt for valget */
.setting-text .label { display: block; }
.setting-hint { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); text-wrap: pretty; }
.setting-control { display: grid; gap: 8px; align-content: start; }
.setting-control .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; }
.setting-control .segmented span { height: 36px; justify-content: center; padding: 0 8px; }
@media (hover: hover) and (pointer: fine) {
  .setting-control .input { font-size: 14px; } /* på telefon må feltet ha 16 px, ellers zoomer iPhone inn */
}
#settings .panel { overflow: visible; } /* lista over praksisdager kan gå utenfor kortet */

/* Av/på-bryter: en vanlig avkrysningsboks under, så tastatur og skjermlesere virker av seg selv. */
#aiPanel .panel-row { flex-wrap: nowrap; gap: 16px; }
.switch { position: relative; display: block; flex: none; width: 44px; height: 26px; margin-right: 24px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 13px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .18s var(--ease); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .18s var(--ease), background-color .18s var(--ease); }
.switch input:checked + span { background: var(--btn); box-shadow: none; }
.switch input:checked + span::after { background: var(--btn-text); transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .switch { margin-right: 20px; } }

/* Lista over praksisdager: samme utseende som menyene i verktøylinja, og like bred som feltet. */
.pick { position: relative; align-self: start; }
.pick-btn {
  display: flex; align-items: center; width: 100%; height: 40px; padding: 0 36px 0 12px; border-radius: 8px;
  font-size: 14px; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line-2);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pick-btn:hover { border-color: color-mix(in srgb, var(--line-2) 60%, var(--muted)); }
[data-keyboard] .pick-btn:focus-visible, .pick-btn[aria-expanded="true"] { outline: 0; border-color: var(--text); box-shadow: inset 0 0 0 .5px var(--text); }
.pick-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.pick-btn .select-chev { transition: transform .18s var(--ease); }
.pick-btn[aria-expanded="true"] .select-chev { transform: translateY(-50%) rotate(180deg); }
.pick-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 12; display: grid; margin: 0; padding: 4px; list-style: none;
  background: var(--card); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg);
  animation: pop .18s var(--ease);
}
.pick-list:focus { outline: 0; }
.pick-list.up { top: auto; bottom: calc(100% + 4px); }
.pick-list .menu-item { grid-template-columns: 1fr 16px; height: 36px; cursor: pointer; }
.pick-list .menu-item.is-active { background: var(--raised); }
[data-keyboard] .pick-list:focus-visible .menu-item.is-active { box-shadow: inset 0 0 0 1px var(--accent); }
.pick-list .menu-item[aria-selected="true"] { font-weight: 600; }
.pick-list .menu-item[aria-selected="true"] .check { visibility: visible; color: var(--accent-ink); }
.pick-list .menu-item[aria-disabled] { color: var(--muted); cursor: default; background: none; }
@media (max-width: 560px) {
  .setting { grid-template-columns: minmax(0, 1fr); }
  .setting-text { padding-top: 0; }
}

.settings-link { display: flex; align-items: center; gap: 12px; padding: 16px 24px; color: var(--text); text-decoration: none; }
.settings-link-text { flex: 1; min-width: 0; }
.settings-link strong, .settings-link small { display: block; }
.settings-link strong { font-size: 14px; font-weight: 600; }
.settings-link small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.settings-link:hover strong { text-decoration: underline; }

.rows { list-style: none; margin: 16px 0 0; padding: 0 24px 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row-text { display: grid; gap: 2px; min-width: 0; }
.row-title { font-size: 15px; font-weight: 500; }
.row-sub { font-size: 13px; color: var(--muted); }

/* ================= visning av vedlegg ================= */
.viewer {
  position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  animation: fade .2s var(--ease);
}
.viewer img { max-width: 100%; max-height: calc(100% - 120px); object-fit: contain; border-radius: 8px; background: #fff; }
.viewer-doc {
  display: grid; justify-items: center; gap: 8px; width: min(360px, 100%); padding: 28px 24px;
  border-radius: 16px; background: #FFFFFF; color: #0F172A; text-align: center;
}
.doc-ext-lg { width: 64px; height: 64px; border-radius: 12px; font-size: 15px; margin-bottom: 4px; }
.viewer-doc-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.viewer-doc-sub { font-size: 13px; color: #62748E; }
.viewer-doc .vbtn-primary { margin-top: 8px; }
.viewer-cap { margin: 0; max-width: 640px; color: #FFFFFF; font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.vsel { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #CAD5E2; font-size: 14px; }
.vsel select { height: 32px; padding: 0 8px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; color: #0F172A; background: #FFFFFF; cursor: pointer; }
.vbtn-primary { background: #155DFC; color: #FFFFFF; }
.vbtn-primary:hover { background: color-mix(in srgb, #155DFC 86%, #0F172A); }
.viewer-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #ededed; font-weight: 500; font-size: 14px; text-decoration: none;
  transition: background-color .15s var(--ease);
}
.vbtn svg { color: #CAD5E2; }
.vbtn:hover { background: rgba(255, 255, 255, .16); }
.vbtn.danger { color: #FFFFFF; }
.vbtn.danger:hover { background: #E7000B; }
.vbtn.danger svg { color: currentColor; }

@keyframes fade { from { opacity: 0; } }

/* oversikt over skoleåret: åpnes fra uka, én rute per uke */
.wk-chev { align-self: center; flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.weeklabel[aria-expanded="true"] .wk-chev { transform: rotate(180deg); }
.yearpop {
  position: absolute; top: calc(100% - 4px); left: 12px; z-index: 14; width: 556px; max-width: calc(100vw - 32px);
  padding: 16px; background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2);
  animation: pop .18s var(--ease);
}
.yearpop-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 14px; }
.yearpop-title { text-align: center; min-width: 0; }
.yearpop-title h2 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.yearpop-title p { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 0; font-size: 12px; line-height: 18px; color: var(--muted); }
/* Tellingen øverst forklarer også fargene i rutene. */
.ykey { display: inline-flex; align-items: center; gap: 5px; }
.ykey::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--line-2); }
.ykey.done::before { background: var(--pos); }
.ykey.part::before { background: var(--warn); }
.ykey.missing::before { width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
/* De to halvårene står side om side, så oversikten ikke dekker hele loggen. */
.yeargrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-items: start; }
.yterm { display: grid; gap: 3px; }
.yterm-title { margin: 0 0 3px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-2); }
.yrow { display: grid; grid-template-columns: 30px repeat(5, minmax(0, 1fr)); align-items: center; gap: 3px; }
.ymon { font-size: 12px; color: var(--muted); }
/* Hver uke er en rund brikke midt i kolonnen, så formen er den samme uansett hvor bred kolonnen er. */
.ywk {
  --ywk: 32px; position: relative; display: grid; place-items: center; justify-self: center;
  width: var(--ywk); height: var(--ywk); padding: 0; border-radius: 50%;
  font-size: 14px; font-weight: 400; color: var(--text);
  transition: background-color .12s var(--ease), color .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.ywk:hover { background: var(--raised); }
.ywk.future, .ywk.none { color: var(--muted); }
.ywk.done { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos-ink); font-weight: 600; }
.ywk.part, .ywk.open { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn-ink); font-weight: 600; }
.ywk.done:hover { background: color-mix(in srgb, var(--pos) 26%, transparent); }
.ywk.part:hover, .ywk.open:hover { background: color-mix(in srgb, var(--warn) 26%, transparent); }
.ywk.missing { color: var(--warn-ink); }
.ywk.missing::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--warn); }
.ywk.off { background: var(--raised); color: var(--muted); text-decoration: line-through; }
/* Blått er for uka som pågår. En åpen uke som er passert eller ferdig, får en ring i fargen til sin egen rute.
   Har uka ingen rute, viser blått tall (og blå prikk) at det er den som er åpen. */
.ywk.now:not(.passed) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ywk.open-now:not(.passed), .ywk.open-now:not(.passed):hover { background: var(--btn); color: var(--btn-text); font-weight: 600; box-shadow: none; }
.ywk.open-now.passed { font-weight: 600; }
.ywk.open-now.done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pos) 55%, transparent); }
.ywk.open-now.passed.part, .ywk.open-now.passed.open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
.ywk.open-now.passed.off { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ywk.open-now.missing, .ywk.open-now.passed.none { color: var(--accent-ink); }
.ywk.open-now.missing::after { background: var(--accent); }
.ywk:focus { outline: none; }
.ywk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.yearpop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.yearpop-detail { display: grid; flex: 1; min-width: 0; min-height: 36px; align-content: center; font-size: 13px; line-height: 18px; }
.yearpop-detail strong { font-weight: 600; }
.yearpop-detail span { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.yearpop-foot .btn { height: 28px; padding: 0 8px; font-size: 14px; color: var(--accent-ink); flex: none; }
@media (pointer: coarse) { .ywk { --ywk: 38px; } }
#yearClose { display: none; }
@media (max-width: 420px) { .wk-chev { display: none; } }

/* Telefon: årsoversikten er en egen side under uka eleven trykket på, og kalenderen åpner seg rett under datoen.
   Begge ruller inni seg selv. Attributtet hidden styrer alt, så også lukkingen blir myk (allow-discrete). */
@media (max-width: 600px) {
  html:has(.yearpop:not([hidden])), html:has(.cal-pop:not([hidden])) { overflow: hidden; }

  .weeknav:has(.yearpop:not([hidden])) :is(#prev, #next) { display: none; }
  .weeknav:has(.yearpop:not([hidden])) #yearClose { display: inline-flex; }

  .yearpop {
    position: fixed; top: var(--top, 112px); right: 0; bottom: 0; left: 0; width: auto; max-width: none;
    display: flex; flex-direction: column; padding: 12px 16px calc(env(safe-area-inset-bottom) + 8px);
    background: var(--bg); border-radius: 0; box-shadow: inset 0 1px 0 var(--line); animation: none;
    transition: opacity .22s var(--ease), transform .28s var(--ease), display .28s allow-discrete;
  }
  .yearpop[hidden] { opacity: 0; transform: translateY(12px); }
  @starting-style { .yearpop:not([hidden]) { opacity: 0; transform: translateY(12px); } }
  .yearpop-head, .yearpop-foot { flex: none; }
  .yeargrid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .yeargrid::-webkit-scrollbar { display: none; }
  /* Rutene deler høyden som er igjen, så hele året vises uten rulling på vanlige telefoner. */
  .ywk { --ywk: clamp(38px, calc((100dvh - var(--top, 112px) - 248px) / 11), 46px); font-size: 15px; }
  .yearpop-foot { margin-top: 8px; }

  .cal-scrim {
    display: block; position: fixed; inset: 0; z-index: 13; background: rgb(0 0 0 / .4);
    transition: opacity .22s var(--ease), display .22s allow-discrete;
  }
  .cal-scrim[hidden] { opacity: 0; }
  @starting-style { .cal-scrim:not([hidden]) { opacity: 0; } }
  .date-pick:has(.cal-pop:not([hidden])) .date-field { position: relative; z-index: 14; }

  .popover.cal-pop {
    position: fixed; top: calc(var(--top, 160px) + 6px); right: 12px; bottom: auto; left: 12px; display: block;
    max-height: calc(100dvh - var(--top, 160px) - 18px); overflow-y: auto; overscroll-behavior: contain; animation: none;
    transition: opacity .18s var(--ease), transform .24s var(--ease), display .24s allow-discrete;
  }
  .popover.cal-pop[hidden] { opacity: 0; transform: translateY(-6px); }
  @starting-style { .popover.cal-pop:not([hidden]) { opacity: 0; transform: translateY(-6px); } }
  .cal-side { display: none; }
  .cal { padding: 8px 10px 10px; }
  .cal-head { height: 40px; margin-bottom: 4px; }
  .cal-head .btn-xs.btn-icon { width: 40px; height: 40px; border-radius: 8px; }
  .cal-caption { font-size: 15px; }
  .cal-grid { width: 100%; table-layout: fixed; }
  .cal-grid th { width: auto; height: 24px; }
  .cal-grid tr > :nth-child(2) { padding-left: 0; }
  .cal-day { width: calc(100% - 4px); height: 40px; font-size: 15px; }
  .cal-wkbtn { height: 40px; }
  .cal-wkbtn.off { text-decoration: line-through; }
  .cal-wkbtn.has:not(.off)::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
}

/* ================= meldinger ================= */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 80px + var(--kb, 0px)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500; z-index: 30; box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px;
}
/* Står alltid i DOM-en, så skjermlesere fanger opp nye beskjeder. Usynlig og tom når den ikke vises. */
.toast:not(.is-shown) { opacity: 0; pointer-events: none; }
.toast.is-shown { animation: fade .2s var(--ease); }
.toast-close {
  flex: none; padding: 4px 8px; margin: -4px -8px -4px 0; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.toast-close:focus-visible { outline-color: var(--bg); }

.savebar {
  position: fixed; z-index: 25; left: 50%;
  bottom: calc(max(env(safe-area-inset-bottom), 0px) + 16px + var(--kb, 0px));
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  height: 40px; padding: 0 16px 0 12px; border-radius: 10px;
  background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg);
  font-size: 14px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px);
  transition: opacity .2s var(--ease), transform .36s var(--ease);
}
.savebar.show { opacity: 1; transform: translate(-50%, 0); }
.savebar .txt { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.savebar .ic { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--muted); }
.savebar .ic > * { grid-area: 1 / 1; display: none; }
.savebar .spin { width: 12px; height: 12px; }
.savebar[data-state="saving"] .spin { display: block; }
.savebar[data-state="saved"] .ic { color: var(--pos); }
.savebar[data-state="saved"] .check { display: block; }
.savebar[data-state="offline"] .ic, .savebar[data-state="offline"] .txt { color: var(--neg); }
.savebar[data-state="offline"] .warn { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 720px) {
  .savebar { left: auto; right: 24px; bottom: 24px; transform: translateY(8px); }
  .savebar.show { transform: none; }
}

/* ================= innlogging ================= */
body:is(.logged-out, .onboarding) :is(.top-actions, .weeknav, main, .profile) { display: none !important; }
.auth {
  width: calc(100% - 40px); max-width: 400px; margin: 48px auto 0; padding: 32px 24px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.auth h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.15; font-weight: 500; }
.auth-sub { margin: 0 0 24px; color: var(--text-2); font-size: 15px; }
.auth .otp, .auth .otp-group { width: 100%; }
.auth .otp-slot { flex: 1; width: auto; }
.auth .btn-primary { margin-top: 24px; }
.auth-switch { margin: 20px 0 0; font-size: 14px; color: var(--muted); text-align: center; }

/* ================= første gang: ett spørsmål per side ================= */
.onboarding { width: calc(100% - 40px); max-width: 440px; margin: 48px auto 0; padding-bottom: 32px; }
.ob-steps { display: flex; gap: 4px; margin-bottom: 32px; }
.ob-steps span { flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); }
.ob-steps .is-done { background: var(--accent); }
#obForm { animation: rise .24s var(--ease); }
.onboarding h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 500; }
.onboarding h1:focus, #shareDialogTitle:focus { outline: 0; }
.ob-hint { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
.ob-choices { display: grid; gap: 8px; margin-top: 24px; }
.ob-choices label { position: relative; display: grid; }
.ob-choices input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ob-choices span {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px; font-size: 16px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2);
}
.ob-choices label:hover input:not(:checked) + span { background: var(--raised); }
.ob-choices input:checked + span { background: var(--btn); color: var(--btn-text); font-weight: 600; box-shadow: none; }
.ob-choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.ob-input { height: 48px; margin-top: 24px; border-radius: 10px; }
.ob-foot { display: flex; gap: 8px; margin-top: 24px; }
.ob-foot .btn-primary { flex: 1; }
@media (max-width: 480px) { .onboarding { margin-top: 24px; } .ob-steps { margin-bottom: 24px; } }

/* tema (theme-toggle-labeled-6) */
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-row .panel-head { padding-bottom: 20px; }
.theme-actions { display: flex; align-items: center; gap: 16px; padding: 0 24px 0 0; flex: none; }
.theme-toggle { padding: 0 24px; }
.theme-ic { display: grid; }
.theme-toggle[data-dark="true"] .theme-moon, .theme-toggle:not([data-dark="true"]) .theme-sun { display: none; }
.theme-reset { font-size: 14px; }

/* ================= Feide-innlogging ================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth-alert {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--neg) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 30%, transparent);
}
.btn.is-disabled { opacity: .5; cursor: not-allowed; }
.auth-off { margin-top: 12px; text-align: center; }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 16px;
  font-size: 13px; color: var(--muted); white-space: nowrap;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-login .input { width: 100%; }
.code-login .form-item .hint { margin-top: 4px; }
.code-login .btn-block { margin-top: 24px; }
.code-login .auth-switch { margin-top: 12px; }
.code-change .panel-foot { padding-left: 0; padding-right: 0; }
.code-change .form-error { margin-top: 16px; }
.dev-users { margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--line-2); }
.dev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dev-head h2 { margin: 0; font-size: 15px; font-weight: 500; }
.dev-tag { font-size: 11px; color: var(--muted); padding: 2px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); }
.dev-users > .hint { margin: 4px 0 12px; }
.dev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dev-user {
  width: 100%; display: grid; grid-template-columns: 28px 1fr 16px; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px; border-radius: 10px; text-align: left; color: var(--muted);
  transition: background-color .15s var(--ease);
}
.dev-user:hover { background: var(--raised); }
.dev-user:disabled { opacity: .6; }
.dev-text { display: grid; min-width: 0; }
.dev-name { font-size: 14px; font-weight: 500; color: var(--text); }

/* ================= din side: gammel bruker ================= */
.legacy-open { margin: 16px 24px 24px; }
.legacy-form .panel-foot { padding-left: 0; padding-right: 0; }
.legacy-form .form-error { margin-top: 16px; }
.legacy-form .input { width: 240px; }

/* nedtrekksliste */
.select-wrap { position: relative; }
.select {
  appearance: none; -webkit-appearance: none; height: 36px; min-width: 160px; padding: 0 36px 0 12px; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--text); background: var(--card);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.select option { color: var(--text); background: var(--card); }
.select:focus { outline: 0; border-color: var(--text); box-shadow: inset 0 0 0 .5px var(--text); }
.select:focus-visible { outline: 0; }
.select-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* ================= del ================= */
.share-links .row { justify-content: flex-start; }
.share-ic {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--raised); color: var(--text-2);
}
.share-row .row-text { flex: 1; }
.share-row-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.panel-foot { flex-wrap: wrap; }

/* «Del uka»: vindu midt på skjermen, også på mobil */
.share-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.share-dialog[open] { animation: share-in .18s var(--ease); }
.share-dialog::backdrop { background: rgba(0, 0, 0, .32); animation: fade .18s ease-out; }
@keyframes share-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
html:has(.share-dialog[open]) { overflow: hidden; }
.share-body { display: grid; gap: 20px; padding: 20px 24px; }
.share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.share-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.share-head .btn { flex: none; margin: -2px -8px 0 0; }
.share-link, .share-file { display: grid; gap: 8px; }
.share-primary { display: flex; gap: 8px; }
.share-primary .btn-primary { flex: 1; min-width: 0; }
.share-primary .btn-icon { flex: none; width: 44px; }
.share-link .input { font-size: 13px; }
.share-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.share-meta .link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.share-file .form-error { margin: 0; }
.share-print { justify-self: start; font-size: 14px; }
.share-more { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -12px -8px; padding-top: 12px; border-top: 1px solid var(--line); }

/* valg i ett stykke (som Tabs i shadcn) */
.segmented {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.segmented { justify-self: start; }
.segmented label { position: relative; display: grid; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.segmented label:hover input:not(:checked) + span { background: var(--raised); }
.segmented input:checked + span { background: var(--btn); color: var(--btn-text); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ================= små skjermer ================= */
@media (max-width: 560px) {
  .top { flex-wrap: wrap; }
  .legacy-form .input { width: 100%; }
  .share-row { flex-wrap: wrap; }
  .share-row-actions { margin-left: 44px; }
  .legacy-form .form-row .form-item { flex: 1 0 100%; }
  .panel-row { flex-wrap: wrap; gap: 0; }
  .theme-actions { padding: 0 24px 20px; }
  .user-name { display: none; }
  .user-btn { padding: 0 4px; border-radius: 50%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:last-child { grid-column: 1 / -1; }
  .row { flex-wrap: wrap; }
  .tb-select-label { min-width: 0; }
}
@media (max-width: 420px) {
  .top { padding: 12px 16px 0; }
  .weeknav { padding: 8px 16px; }
  main, .profile { padding-left: 16px; padding-right: 16px; }
  .field, .attach { padding-left: 16px; padding-right: 16px; }
  .toolbar { padding: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .tb-select-label { display: none; }
  .weeklabel { flex-direction: column; gap: 0; }
  .week-tools .btn-outline { flex: 1; padding: 0 12px; }
  .week-tools .btn-danger { flex: 0 0 100%; margin: 4px 0 0; }
  .panel-head, .panel-body, .settings-link, .settings-rows { padding-left: 20px; padding-right: 20px; }
  .panel-foot { padding: 20px; }
  .practice-form { padding-bottom: 20px; }
  .rows { padding: 0 20px 8px; }
  .otp-slot { width: 44px; }
  .menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(env(safe-area-inset-bottom) + 72px + var(--kb, 0px)); }
  .popover { position: fixed; left: 16px; right: 16px; width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 72px + var(--kb, 0px)); }
  .theme-actions { padding: 0 20px 20px; }
  .field, .attach { padding-left: 14px; padding-right: 12px; }
  .goals { margin-right: -12px; padding-right: 12px; }
  .segs i { width: 10px; }
  .session-head .segs { display: none; } /* datoen får plassen, «0 av 4» står igjen */
  .file-cap { font-size: 14px; }
}
/* Når man skriver på mobil, gir ukenavigasjonen plass til verktøylinja. */
@media (max-width: 720px) {
  body:has(.session.writing) .weeknav { position: static; }
  body:has(.session.writing) .toolbar { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .file-item .spin, .savebar .spin { animation: none !important; border-right-color: currentColor; opacity: .5; }
}

/* lenke til personvernerklæringen nederst på innlogging og «Din side» */
.auth-lang { display: flex; justify-content: center; margin-top: 24px; }
.auth-legal { margin-top: 16px; text-align: center; }
.profile-legal { margin: 8px 0 24px; }

/* Konto: historikk først og kompakte innstillinger. */
.history-list { list-style: none; margin: 8px 24px 8px; padding: 0; }
.history-list li + li { border-top: 1px solid var(--line); }
.history-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 16px; padding: 12px 0; color: var(--text); text-decoration: none; }
.history-list a:hover strong { text-decoration: underline; }
.history-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; color: var(--muted); }
.history-line strong { font-size: 14px; font-weight: 600; color: var(--text); }
.history-list small { display: block; min-height: 18px; margin-top: 2px; overflow: hidden; color: var(--text-2); font-size: 13px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.history-status { font-size: 13px; color: var(--muted); white-space: nowrap; }
.history-status.is-done { color: var(--pos-ink); }
.history-status.is-part { color: var(--warn-ink); }
.history-empty { margin: 16px 24px 24px; color: var(--muted); font-size: 14px; }
.history-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 24px; padding: 8px 0 12px; border-top: 1px solid var(--line); }
.history-ai { margin: 0; font-size: 13px; color: var(--muted); }
.pager { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pager-range { margin-right: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) {
  .history-list, .history-foot { margin-left: 20px; margin-right: 20px; }
  .history-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .history-list .history-arrow { display: none; }
}
.theme-panel .panel-head { padding-top: 14px; padding-bottom: 14px; }
.theme-panel .theme-toggle { padding: 0 12px; }
.profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 24px; font-size: 14px; }


.history-arrow { flex: none; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.history-list a:hover .history-arrow, .settings-link:hover .history-arrow { color: var(--text); transform: translateX(-3px); }