/* ═══════════════════════════════════════════
   VURDERINGSLAB — «I dag er du læraren» (redesign 13.11.2026,
   canvas 9yMrT1XgzhFM9LGfkjaKnB). Same fargar og former som
   Tekstsjekk: skog #1A3D2B, gull #B5731F (#A3631A på kvitt),
   kort #fff / kant #E0DBD2 på #F7F3EE, IBM Plex Sans.
═══════════════════════════════════════════ */
.vl-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 28px 64px; box-sizing: border-box; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #1F2A24; }
.vl-app { display: flex; flex-direction: column; gap: 22px; }
.vl-app--start { gap: 48px; max-width: 1100px; margin: 0 auto; }
.vl-app--saman { max-width: 1040px; margin: 0 auto; width: 100%; }
.vl-app h1, .vl-app h2, .vl-app h3 { font-family: 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0; }
.vl-app h2 { margin: 0; font-size: 19px; font-weight: 700; color: #1A3D2B; }

.vl-dempa { font-size: 13.5px; color: #5E6A63; }
.vl-liten { margin: 0; font-size: 13.5px; line-height: 1.5; color: #5E6A63; }
.vl-under { margin: 4px 0 0; font-size: 15.5px; color: #4A554F; }
.vl-hogre { text-align: right; }
.vl-gron { color: #1F5139; }
.vl-gull { color: #6B3F0E; }
.vl-raudtekst { color: #8C1D18; }
.vl-merkelapp { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5E6A63; }

.vl-attende { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; color: #4A554F; text-decoration: none; cursor: pointer; }
.vl-attende:hover { color: #1A3D2B; text-decoration: underline; }
.vl-rolle { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #FDF4E0; color: #7A4A12; font-size: 13.5px; font-weight: 600; border: 1px solid #EBD3A8; }

.vl-knapp { display: inline-flex; align-items: center; gap: 10px; height: 50px; box-sizing: border-box; padding: 0 22px; border-radius: 999px; border: 0; background: #1A3D2B; color: #fff; font: 600 16px 'IBM Plex Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.vl-knapp:hover:not(:disabled) { background: #2E6B4F; color: #fff; }
.vl-knapp:disabled { background: #9AA69F; cursor: not-allowed; }
.vl-knapp--roleg { background: #fff; color: #1A3D2B; border: 1.5px solid #E0DBD2; }
.vl-knapp--roleg:hover { background: #fff !important; color: #1A3D2B !important; border-color: #1A3D2B; }
.vl-knapperad { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.vl-lenkje { font-size: 15px; font-weight: 600; color: #1A3D2B; }
.vl-app button:focus-visible, .vl-app a:focus-visible, .vl-felt:focus-visible { outline: 3px solid rgba(26,61,43,.35); outline-offset: 2px; }

.vl-chip { padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.vl-chip--forteljing { background: #E9F1EC; color: #1F5139; }
.vl-chip--fagtekst { background: #E8EEF6; color: #24416B; }
.vl-chip--fagartikkel { background: #FDF4E0; color: #7A4A12; }

/* ── Start ── */
.vl-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.vl-hero-tekst { display: flex; flex-direction: column; gap: 18px; }
.vl-hero h1 { margin: 0; font-size: 46px; line-height: 1.08; font-weight: 700; color: #1A3D2B; }
.vl-lede { margin: 0; font-size: 18px; line-height: 1.55; color: #4A554F; max-width: 34em; }
.vl-hero-bilete { position: relative; padding: 18px 10px 26px 26px; }
.vl-ark-bak { position: absolute; top: 0; right: 0; width: 86%; height: 88%; border-radius: 18px; background: #EFE8DC; transform: rotate(3deg); }
.vl-ark { position: relative; background: #fff; border: 1px solid #E0DBD2; border-radius: 18px; padding: 24px 26px; box-shadow: 0 14px 34px rgba(26,61,43,.10); display: flex; flex-direction: column; gap: 12px; }
.vl-ark-topp { display: flex; align-items: center; justify-content: space-between; }
.vl-ark-tittel { font-size: 18px; font-weight: 700; }
.vl-ark-p { margin: 0; font-size: 15.5px; line-height: 1.9; }
.vl-raud { text-decoration: underline wavy #B3261E; text-underline-offset: 4px; }
.vl-ark-kommentar { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #FBF8F3; border: 1px dashed #D9D2C6; font-size: 14px; line-height: 1.5; }
.vl-ark-kommentar span { font-size: 12px; font-weight: 700; color: #7A4A12; letter-spacing: .04em; text-transform: uppercase; }
.vl-stempel { position: absolute; right: -14px; bottom: -18px; width: 74px; height: 74px; border-radius: 999px; background: #1A3D2B; color: #FDF4E0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg); box-shadow: 0 8px 18px rgba(26,61,43,.25); font-size: 28px; font-weight: 700; line-height: 1; }
.vl-stempel span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }

.vl-seksjon { display: flex; flex-direction: column; gap: 18px; }
.vl-seksjon h2 { font-size: 24px; }
.vl-steg-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vl-steg { background: #fff; border: 1px solid #E0DBD2; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.vl-num { width: 32px; height: 32px; border-radius: 999px; background: #1A3D2B; color: #FDF4E0; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.vl-steg-t { font-size: 16px; font-weight: 600; }
.vl-steg-p { font-size: 14px; line-height: 1.5; color: #4A554F; }
.vl-samanlikn-merk { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: #4A554F; }

.vl-oppg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vl-oppg-kort { text-align: left; background: #fff; border: 1.5px solid #E0DBD2; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; font-family: inherit; color: #1F2A24; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
@media (hover: hover) { .vl-oppg-kort:hover { border-color: #1A3D2B; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,61,43,.08); } }
.vl-kort-topp, .vl-kort-fot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vl-kort-fot { margin-top: auto; padding-top: 8px; font-size: 14px; }
.vl-kort-tittel { font-size: 19px; font-weight: 700; color: #1A3D2B; }
.vl-kort-oppg { font-size: 14.5px; line-height: 1.5; color: #4A554F; }
.vl-kort-start { font-weight: 600; color: #1A3D2B; }

/* ── Hovud + faner ── */
.vl-hovud { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vl-hovud-v { display: flex; flex-direction: column; gap: 4px; }
.vl-tittelrad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vl-tittelrad h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: #1A3D2B; }
.vl-faner { display: flex; gap: 8px; }
.vl-fane { height: 44px; box-sizing: border-box; padding: 0 16px; border-radius: 12px; border: 1.5px solid #E0DBD2; background: #fff; color: #4A554F; display: inline-flex; align-items: center; gap: 6px; font: 500 14.5px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.vl-fane.er-aktiv { background: #1A3D2B; border-color: #1A3D2B; color: #fff; font-weight: 600; }
.vl-fane svg { color: #2E6B4F; }
.vl-fane.er-aktiv svg { color: #CFE5D7; }

/* ── Retting ── */
.vl-rett-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vl-tekstkol, .vl-vurdkol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vl-oppgaveboks { background: #FBF8F3; border: 1px solid #E0DBD2; border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.vl-arkkort { background: #fff; border: 1px solid #E0DBD2; border-radius: 18px; overflow: hidden; }
.vl-penn-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #EDE7DD; flex-wrap: wrap; }
.vl-penn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #8C1D18; }
.vl-raudtal { color: #8C1D18; }
.vl-elevtekst { padding: 22px 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.vl-elev-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vl-elev-topp h2 { font-size: 21px; color: #1F2A24; }
.vl-elevtekst p { margin: 0; font-size: 17px; line-height: 2.05; text-align: left; hyphens: none; }
.vl-elevtekst p.vl-kjelde { font-size: 15px; line-height: 1.8; padding-left: 1.6em; text-indent: -1.6em; }
.vl-elevtekst p.vl-kjelde .vl-ord { text-indent: 0; }
.vl-mellomtittel { margin: 4px 0 -6px; font-size: 17px; font-weight: 700; }
.vl-ord { display: inline; border: 0; margin: 0; padding: 0 2px; border-radius: 4px; background: transparent; font: inherit; color: inherit; line-height: inherit; cursor: pointer; }
@media (hover: hover) { .vl-ord:hover { background: #F4EFE6; } }
.vl-ord.er-merkt { background: #FBE9E7; text-decoration: underline wavy #B3261E; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

.vl-kort { background: #fff; border: 1px solid #E0DBD2; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.vl-kort-hovud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vl-krit { display: flex; flex-direction: column; gap: 7px; }
.vl-krit-namn { font-size: 14.5px; font-weight: 600; }
.vl-krit-sk { font-size: 13px; line-height: 1.45; color: #4A554F; }
.vl-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 11px; background: #F1ECE4; }
.vl-seg button { min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: #4A554F; font: 500 13.5px 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.2; padding: 4px; cursor: pointer; }
.vl-seg button[aria-pressed="true"] { background: #fff; color: #1A3D2B; font-weight: 600; box-shadow: 0 1px 3px rgba(26,61,43,.16); }
.vl-nivaa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vl-niva { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 11px; border-radius: 12px; border: 1.5px solid #E0DBD2; background: #FBF8F3; color: #1F2A24; font-family: 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
@media (hover: hover) { .vl-niva:hover { border-color: #9DB3A6; background: #fff; } }
.vl-niva-namn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #4A554F; }
.vl-niva-sk { font-size: 13px; line-height: 1.4; color: #1F2A24; }
.vl-niva[aria-pressed="true"] { border-color: #1A3D2B; background: #E9F1EC; box-shadow: inset 0 0 0 1px #1A3D2B; }
.vl-niva[aria-pressed="true"] .vl-niva-namn { color: #1A3D2B; }
.vl-kar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.vl-kar button { height: 48px; border-radius: 12px; border: 1.5px solid #E0DBD2; background: #fff; color: #1A3D2B; font: 700 18px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.vl-kar button[aria-pressed="true"] { background: #1A3D2B; border-color: #1A3D2B; color: #FDF4E0; }
.vl-felt-l { font-size: 14px; font-weight: 600; margin-bottom: -8px; }
.vl-felt { box-sizing: border-box; width: 100%; border: 1.5px solid #E0DBD2; border-radius: 12px; padding: 10px 12px; font: 15px/1.5 'IBM Plex Sans', system-ui, sans-serif; background: #FBF8F3; color: #1F2A24; resize: vertical; }
.vl-felt::placeholder { color: #7C857F; }
.vl-felt:focus { outline: none; border-color: #1A3D2B; background: #fff; }
.vl-fot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vl-fot--brei { padding-top: 6px; }

/* ── Samanlikn ── */
.vl-saman { display: flex; flex-direction: column; gap: 22px; }
.vl-saman-tittel { font-size: 28px !important; }
.vl-kar-rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; }
.vl-kar-boks { background: #fff; border: 1px solid #E0DBD2; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.vl-kar-boks span { font-size: 13px; font-weight: 600; color: #5E6A63; text-transform: uppercase; letter-spacing: .06em; }
.vl-kar-boks strong { font-size: 52px; line-height: 1; color: #1A3D2B; }
.vl-kar-boks--laerar { background: #1A3D2B; border-color: #1A3D2B; }
.vl-kar-boks--laerar span { color: #E9DCC0; }
.vl-kar-boks--laerar strong { color: #FDF4E0; }
.vl-kar-melding { background: #FDF4E0; border: 1px solid #EBD3A8; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.vl-kar-melding strong { font-size: 17px; color: #6B3F0E; }
.vl-kar-melding span { font-size: 14.5px; line-height: 1.5; color: #4A3A22; }
.vl-maalar { width: 220px; max-width: 40%; height: 8px; border-radius: 999px; background: #EFE8DC; overflow: hidden; }
.vl-maalar div { height: 100%; background: #2E6B4F; border-radius: 999px; }
.vl-to-kol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.vl-lista-t { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.vl-parliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vl-parliste li { padding: 6px 12px; border-radius: 10px; font-size: 15px; }
.vl-parliste li s { color: #5E6A63; }
.vl-parliste .er-funne { background: #E9F1EC; }
.vl-parliste .er-gloymd { background: #FBE9E7; }

.vl-rad { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 2.2fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid #EDE7DD; align-items: start; }
.vl-rad:last-child { border-bottom: 0; padding-bottom: 2px; }
.vl-rad--hovud { padding: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5E6A63; }
.vl-rad-namn { font-size: 15px; font-weight: 600; }
.vl-rad-kvifor { font-size: 14.5px; line-height: 1.5; color: #4A554F; }
.vl-niv { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #F1ECE4; color: #1F2A24; font-size: 13px; font-weight: 600; }
.vl-niv.er-lik { background: #E9F1EC; color: #1F5139; }

.vl-tb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.vl-tb h2 { grid-column: 1 / -1; }
.vl-tb-kort { background: #fff; border: 1px solid #E0DBD2; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.vl-tb-kort span { font-size: 13.5px; font-weight: 700; }
.vl-tb-kort p { margin: 0; font-size: 15px; line-height: 1.55; }
.vl-eigne { grid-column: 1 / -1; border: 1.5px dashed #D9D2C6; border-radius: 16px; padding: 14px 18px; }
.vl-eigne p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: #4A554F; }
.vl-sum { display: flex; flex-direction: column; }
.vl-sum-rad { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EDE7DD; font-size: 15px; flex-wrap: wrap; }
.vl-sum-rad:last-child { border-bottom: 0; }

/* ── Mobil ── */
@media (max-width: 900px) {
  .vl-hero, .vl-rett-grid { grid-template-columns: minmax(0, 1fr); }
  .vl-hero-bilete { max-width: 460px; }
  .vl-steg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-oppg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vl-wrap { padding: 18px 16px 40px; }
  .vl-app--start { gap: 36px; }
  .vl-hero h1 { font-size: 34px; }
  .vl-lede { font-size: 16.5px; }
  .vl-hero-bilete { display: none; }
  .vl-steg-liste { grid-template-columns: minmax(0, 1fr); }
  .vl-hovud { align-items: stretch; }
  .vl-tittelrad h1 { font-size: 26px; }
  .vl-faner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .vl-fane { justify-content: center; }
  .vl-elevtekst { padding: 16px 16px 20px; }
  .vl-kort { padding: 16px; border-radius: 16px; }
  .vl-nivaa { grid-template-columns: minmax(0, 1fr); }
  .vl-niva { min-height: 48px; }
  .vl-fot { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .vl-fot .vl-knapp { justify-content: center; height: 52px; }
  .vl-hogre { text-align: center; }
  .vl-kar-rad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vl-kar-melding { grid-column: 1 / -1; }
  .vl-kar-boks strong { font-size: 42px; }
  .vl-to-kol, .vl-tb { grid-template-columns: minmax(0, 1fr); }
  .vl-rad--hovud { display: none; }
  .vl-rad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
  .vl-rad-namn, .vl-rad-kvifor { grid-column: 1 / -1; }
  .vl-rad-celle { display: flex; flex-direction: column; gap: 4px; }
  .vl-rad-celle::before { content: attr(data-l); font-size: 12px; font-weight: 600; color: #5E6A63; }
  .vl-maalar { display: none; }
  .vl-saman-tittel { font-size: 24px !important; }
}