s; the KRAV / BØR HA pill is
added via ::before since there is no per-item type markup to hook,
distinguishing the lists by their DOM order instead. */
.assignment-col-left ul { list-style: none; }
.assignment-col-left li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: .86rem;
line-height: 1.5;
color: var(--text-2);
border-bottom: 1px solid var(--border-muted);
}
.assignment-col-left li:last-child { border-bottom: none; }
.assignment-col-left li::before {
flex-shrink: 0;
margin-top: 1px;
font-size: .6rem;
font-weight: 700;
letter-spacing: .06em;
padding: 2px 6px;
border-radius: 4px;
}
.assignment-col-left ul:first-of-type li::before {
content: 'KRAV';
background: var(--amber-dim);
color: var(--amber);
border: 1px solid var(--amber-ring);
}
.assignment-col-left ul:nth-of-type(2) li::before {
content: 'BØR HA';
background: var(--blue-dim);
color: var(--blue);
border: 1px solid var(--blue-ring);
}
/* ── AI GRADING RESULT (js/components/gradingResult.js) ─────────────────
Its own DOM: .grading-result > .grading-bar-section (score bar with a
90%-threshold marker, auto-plays its reveal on render) + .grading-summary
(highlighted comment) + .grading-cards (three flip-cards: korrekt svar /
format / kodestil). */
.assignment-grading-result:empty { display: none; }
.assignment-grading-result:not(:empty) {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.grading-bar-section { display: flex; flex-direction: column; gap: 8px; }
.grading-bar-readout {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.grading-percent { font-family: var(--font-d); font-size: 2rem; font-weight: 700; }
.grading-tier-label { font-family: var(--font-b); font-size: .85rem; color: var(--text-2); }
.grading-bar-track {
position: relative;
height: 32px;
border-radius: 999px;
background: var(--surface-hover);
border: 1px solid var(--border-muted);
}
.grading-bar-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 0%;
border-radius: 999px;
transition: background-color .2s ease;
}
.grading-bar-threshold {
position: absolute;
left: 90%;
top: -4px; bottom: -4px;
border-left: 2px dashed var(--purple);
}
.grading-bar-fill.tier-red { background: var(--red); }
.grading-bar-fill.tier-amber { background: var(--amber); }
.grading-bar-fill.tier-blue { background: var(--blue); }
.grading-bar-fill.tier-green { background: var(--green); }
.grading-bar-fill.tier-purple { background: var(--purple); }
.grading-percent.tier-red { color: var(--red); }
.grading-percent.tier-amber { color: var(--amber); }
.grading-percent.tier-blue { color: var(--blue); }
.grading-percent.tier-green { color: var(--green); }
.grading-percent.tier-purple { color: var(--purple); }
@keyframes gradingThresholdPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--purple-ring); }
50% { box-shadow: 0 0 0 6px var(--purple-ring); }
}
.grading-bar-track.threshold-hit { animation: gradingThresholdPulse .7s ease; }
.grading-summary {
font-size: .88rem;
color: var(--text);
line-height: 1.65;
padding: 12px 14px;
background: var(--purple-wash);
border-left: 3px solid var(--purple);
border-radius: 0 6px 6px 0;
margin-top: 16px;
}
/* Bør ha-lista under oppsummeringen: ett punkt per linje, huket av eller
ikke. Trekket står i overskriften bare når noe mangler. */
.grading-borha {
margin-top: 12px;
font-size: .85rem;
color: var(--text-2);
}
.grading-borha-head { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.grading-borha ul { list-style: none; margin: 0; padding: 0; }
.grading-borha li { display: flex; gap: 8px; align-items: baseline; line-height: 1.5; }
.grading-borha li::before { content: '✓'; color: var(--green); font-weight: 700; flex: none; }
.grading-borha li[data-oppfylt="false"]::before { content: '✗'; color: var(--red); }
.grading-borha li[data-oppfylt="false"] { color: var(--text); }
.grading-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 20px;
}
/* Two wide cards beat three cramped ones once the column gets narrow */
@media (max-width: 1150px) {
.grading-cards { grid-template-columns: repeat(2, 1fr); }
}
.flip-card {
position: relative;
/* Room for two or three lines of feedback plus a short code suggestion.
The faces are absolutely positioned for the 3D flip, so this has to be a
fixed height rather than growing with content; the back scrolls if a
model answer runs long. */
height: 300px;
perspective: 1000px;
cursor: pointer;
}
.flip-card:focus-visible { outline: 2px solid var(--purple-ring); outline-offset: 3px; }
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform .5s;
transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
border: 1px solid var(--border-muted);
border-radius: 10px;
background: var(--bg);
padding: 14px 16px;
display: flex;
flex-direction: column;
}
.flip-card-front { align-items: center; justify-content: center; gap: 10px; text-align: center; }
.flip-card-back { transform: rotateY(180deg); overflow-y: auto; gap: 8px; }
/* The back is already the detail view; the "flip back" hint just eats the room
the feedback needs. The card stays clickable. */
.flip-card-back .flip-card-hint { display: none; }
.flip-card-label {
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-3);
}
.flip-card-stars { display: flex; gap: 4px; font-size: 1.3rem; }
.fc-star {
color: var(--text-3);
opacity: 0;
transform: scale(.4);
transition: opacity .25s, transform .25s;
}
.fc-star.revealed { opacity: 1; transform: scale(1); }
.fc-star[data-filled="true"] { color: var(--amber); }
.flip-card-hint { font-size: .68rem; color: var(--text-3); }
.flip-card-feedback { font-size: .82rem; color: var(--text-2); line-height: 1.5; }
.flip-card-improve strong { display: block; font-size: .72rem; color: var(--purple); margin-bottom: 4px; }
.flip-card-improve pre {
background: var(--surface);
border-radius: 6px;
padding: 8px 10px;
font-size: .74rem;
overflow-x: auto;
/* Wrap rather than run off the card: the box is narrow and the model
sometimes returns a line longer than it. */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.flip-card-feedback code {
font-family: var(--font-m);
font-size: .92em;
overflow-wrap: anywhere;
}
.grading-loading {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 0;
color: var(--text-2);
font-family: var(--font-m);
font-size: .82rem;
}
.grading-loading::before {
content: '';
width: 10px; height: 10px;
flex-shrink: 0;
border: 2px solid var(--purple-ring);
border-top-color: var(--purple);
border-radius: 50%;
animation: spin .7s linear infinite; /* @keyframes spin defined above */
}
.grading-error {
padding: 12px 0;
color: var(--red);
font-size: .85rem;
}
/* ── REFLECTION + SEND INN (js/components/moduleDelivery.js) ────────────
One reflection question + "Lever inn" per module, shown once every
assignment scores >= 90, appended below the assignment panels. */
.module-delivery:empty { display: none; }
.module-delivery-form {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.module-delivery-question {
font-size: .95rem;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
}
.module-delivery-textarea {
width: 100%;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-family: var(--font-b);
font-size: .88rem;
line-height: 1.5;
resize: vertical;
}
.module-delivery-textarea:focus {
outline: none;
border-color: var(--purple-ring);
}
.module-delivery-actions { margin-top: 10px; }
.module-delivery-confirm {
margin-top: 20px;
padding: 14px 16px;
border-radius: 8px;
background: var(--green-dim);
border: 1px solid var(--green-ring);
color: var(--green);
font-weight: 600;
font-size: .9rem;
}
/* ── COMPLETION CELEBRATION (js/components/moduleDelivery.js) ───────────
Full-screen overlay shown right after a successful "Lever inn". Reuses
.module-card/.module-card-badge markup from the menu (course.html) so
the two module cards read identically to the real overview grid. */
.celebration-overlay {
position: fixed;
inset: 0;
z-index: 500;
background: var(--overlay-bg);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: celebrationFade .2s ease;
}
@keyframes celebrationFade { from { opacity: 0; } to { opacity: 1; } }
.celebration-panel {
position: relative;
width: min(680px, 100%);
max-height: 90vh;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 40px 32px 32px;
text-align: center;
}
.celebration-close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 6px;
background: none;
border: none;
color: var(--text-2);
font-size: 1rem;
cursor: pointer;
}
.celebration-close:hover { color: var(--text); background: var(--surface-hover); }
.celebration-headline {
font-family: var(--font-d);
font-size: 1.8rem;
font-weight: 700;
color: var(--text);
}
.celebration-subtitle { margin-top: 6px; color: var(--text-2); font-size: .9rem; }
.celebration-burst {
position: relative;
height: 0;
}
.celebration-star {
position: absolute;
top: 0; left: 50%;
color: var(--amber);
font-size: 1.1rem;
opacity: 0;
animation: celebrationStar .8s ease-out forwards;
}
@keyframes celebrationStar {
0% { opacity: 1; transform: translate(-50%, 0) scale(.6); }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1); }
}
.celebration-cards {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 28px;
}
.celebration-cards .module-card { width: 230px; cursor: default; }
.celebration-arrow { color: var(--text-3); font-size: 1.4rem; }
.celebration-cards .celebration-next-card { cursor: pointer; }
@keyframes celebrationGlowAmber { 0%,100% { box-shadow: 0 0 0 0 var(--amber-ring); } 50% { box-shadow: 0 0 14px 4px var(--amber-ring); } }
@keyframes celebrationGlowBlue { 0%,100% { box-shadow: 0 0 0 0 var(--blue-ring); } 50% { box-shadow: 0 0 14px 4px var(--blue-ring); } }
@keyframes celebrationGlowGreen { 0%,100% { box-shadow: 0 0 0 0 var(--green-ring); } 50% { box-shadow: 0 0 14px 4px var(--green-ring); } }
@keyframes celebrationGlowPurple { 0%,100% { box-shadow: 0 0 0 0 var(--purple-ring); } 50% { box-shadow: 0 0 14px 4px var(--purple-ring); } }
.celebration-next-card[data-c="amber"] { animation: celebrationGlowAmber 2.2s ease-in-out infinite; }
.celebration-next-card[data-c="blue"] { animation: celebrationGlowBlue 2.2s ease-in-out infinite; }
.celebration-next-card[data-c="green"] { animation: celebrationGlowGreen 2.2s ease-in-out infinite; }
.celebration-next-card[data-c="purple"] { animation: celebrationGlowPurple 2.2s ease-in-out infinite; }
.celebration-hint { margin-top: 16px; font-size: .8rem; color: var(--text-3); }
.celebration-finished {
margin-top: 24px;
font-size: 1.05rem;
color: var(--text);
line-height: 1.5;
}
.celebration-menu-link {
display: inline-block;
margin-top: 20px;
background: none;
border: none;
color: var(--text-2);
font-family: var(--font-b);
font-size: .85rem;
cursor: pointer;
}
.celebration-menu-link:hover { color: var(--text); text-decoration: underline; }
/* Steg 2 i feiringen: temaet eleven nettopp låste opp. Knappene bytter tema
med én gang, så belønningen vises i stedet for å beskrives. */
.tema-belonning {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.tema-belonning-valg {
padding: 9px 18px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
font-family: var(--font-b);
font-size: .92rem;
cursor: pointer;
}
.tema-belonning-valg:hover { background: var(--surface-hover); border-color: var(--text-3); }
.tema-belonning-valg[aria-pressed="true"] {
border-color: var(--amber-ring);
background: var(--amber-dim);
color: var(--text);
}
.celebration-videre {
display: block;
margin: 16px auto 0;
padding: 10px 26px;
border: none;
border-radius: 10px;
background: var(--amber);
color: var(--on-accent);
font-family: var(--font-b);
font-size: .92rem;
font-weight: 600;
cursor: pointer;
}
.celebration-videre:hover { filter: brightness(1.08); }
@media (max-width: 820px) {
.assignments-section {
width: auto;
left: auto;
margin-left: 0;
padding: 40px 24px;
}
.assignment-columns { grid-template-columns: 1fr; }
.grading-cards { grid-template-columns: 1fr; }
/* «Formatering av tall» alene er bredere enn halve mobilskjermen, så to
faner på rad går ikke opp. Da er en full stabel ryddigere enn brekte
rader: hvert segment tar hele bredden. */
.ex-tabs { width: 100%; }
.ex-tab { flex: 1 1 auto; justify-content: flex-start; }
/* Arkfane-metaforen faller når fanene står i stabel — bare den nederste
ville ligget inntil innholdet. Da gir vi hodet segmenter i stedet, og
lar rammen alene fortelle hva som hører til. */
.course-tabs > .ex-tabs { padding: 6px; gap: 3px; }
.course-tabs > .ex-tabs > .ex-tab {
border-radius: 8px;
border-bottom: 1px solid transparent;
margin-bottom: 0;
}
.course-tabs > .ex-tabs > .ex-tab.active {
background: var(--tab-accent-dim);
border-color: var(--tab-accent-ring);
box-shadow: none;
}
.course-tabs > .ex-panel.active { padding: 16px 14px 4px; }
.celebration-cards { flex-direction: column; }
.celebration-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.celebration-overlay { animation: none; }
.celebration-star { display: none; }
.celebration-next-card[data-c] { animation: none; }
.grading-bar-track.threshold-hit { animation: none; }
}
/* Version stamp in the top bar. Updated by hand on every course change. */
.build-stamp {
font-family: var(--font-m);
font-size: .62rem;
color: var(--text-3);
white-space: nowrap;
margin-left: 18px;
}
@media (max-width: 900px) { .build-stamp { display: none; } }
/* Figures in a module (matematiske illustrasjoner og lignende) */
.topic-figure {
display: block;
width: 100%;
max-width: 560px;
height: auto;
margin: 18px 0;
border: 1px solid var(--border-muted);
border-radius: 10px;
}
/* Module headings inside the theory section */
.topic h3 {
font-family: var(--font-d);
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
margin: 30px 0 10px;
}
.topic h3:first-of-type { margin-top: 14px; }
/* Body copy inside a module. Module Markdown renders straight into .topic.
Prose gets a reading measure (~72 tegn). */
.topic p, .topic ul, .topic ol, .assignment-description p { max-width: 36rem; }
/* Kodeblokkene hadde ingen makslinje, så de vokste med vinduet mens brødteksten
stod på 36rem. På en bred skjerm ble kodeblokken tre ganger så bred som
teksten ved siden av, og så ut til å renne ut av siden. 44rem er bredere enn
brødteksten (kode trenger det) og treffer omtrent der de allerede lå på en
vanlig laptop, så smale skjermer endrer seg ikke. */
.topic > .code-block,
.topic > .example-group,
.topic > .code-block-output,
.topic > .math-block,
.topic > .course-tabs,
.topic > .hint-accordion,
/* Skillelinja er ikke innhold, men den rammer inn innholdet. Uten samme
makslinje strakk den seg 74px lenger ut enn den bredeste kodeblokken. */
.topic > .pill-divider { max-width: 44rem; }
.topic p { margin-bottom: .7em; }
.topic p:last-child { margin-bottom: 0; }
.topic ul, .topic ol { margin: 0 0 .9em 1.3em; }
.topic li { margin-bottom: .3em; }
.topic li::marker { color: var(--text-3); }
.topic strong { color: var(--text); font-weight: 600; }
.topic table { border-collapse: collapse; margin: 4px 0 14px; }
.topic th, .topic td { text-align: left; padding: 4px 8px 4px 0; }
.topic th:last-child, .topic td:last-child { padding-left: 28px; }
.topic th { color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--border-muted); }
/* ═══════════════════════════════════════════════════════════════════════
EXAMPLE GROUPS, HIDDEN OUTPUT, AUTO-HIDING SIDEBAR
═══════════════════════════════════════════════════════════════════════ */
/* One example = one code cell + its output, tinted so the pair reads as a unit */
.example-group {
background: var(--example-tint);
border: 1px solid var(--border-muted);
border-radius: 12px;
padding: 10px 12px;
margin: 18px 0;
}
.example-group .code-block { margin: 0; }
.example-group .code-block-output { margin-top: 8px; }
/* Example answers stay blurred until the first hover (or tap), so there is a
moment to think first; after that they stay visible. Module examples only:
an assignment's sample output is part of the task, not a spoiler. */
.course-tabs .example-group .code-block-output pre {
filter: blur(7px);
transition: filter .18s ease;
cursor: pointer;
user-select: none;
}
.course-tabs .example-group .code-block-output.revealed pre {
filter: none;
cursor: auto;
user-select: auto;
}
.course-tabs .example-group .code-block-output .code-block-header::after {
content: 'hold musepekeren over for å se svaret';
font-size: .72rem;
color: var(--text-2);
letter-spacing: .02em;
transition: opacity .18s ease;
}
.course-tabs .example-group .code-block-output.revealed .code-block-header::after { opacity: 0; }
/* .hide-code groups (marked via in the markdown)
keep the code pane blurred too, and reveal code + output together. Krever
KLIKK, ikke hover som output-avsløringen over: dette er «stopp og tenk»-
varianten, og en musepeker som streifer forbi skal ikke røpe svaret. Ikke
scoped til .course-tabs: .hide-code er en eksplisitt opt-in-markør. */
.example-group.hide-code .code-block pre {
filter: blur(7px);
transition: filter .18s ease;
cursor: pointer;
user-select: none;
}
.example-group.hide-code.revealed .code-block pre {
filter: none;
cursor: auto;
user-select: auto;
}
.example-group.hide-code .code-block-header::after {
content: 'tenk gjennom svaret, klikk for å se koden';
font-size: .72rem;
color: var(--text-2);
letter-spacing: .02em;
transition: opacity .18s ease;
}
.example-group.hide-code.revealed .code-block-header::after { opacity: 0; }
.example-group.hide-code .code-block-output pre { filter: blur(7px); cursor: pointer; user-select: none; }
.example-group.hide-code.revealed .code-block-output pre { filter: none; cursor: auto; user-select: auto; }
.example-group.hide-code .code-block-output .code-block-header::after { content: none; }
/* Sidebar slides away and returns on hover, giving the content the full page.
A thin rail stays visible at the left edge as the hover target. */
.layout { display: block; }
.sidebar {
position: fixed;
top: 64px;
left: 0;
width: 250px;
height: calc(100vh - 64px);
background: var(--bg);
border-right: 1px solid var(--border);
transform: translateX(-100%);
transition: transform .22s ease;
z-index: 150;
}
.sidebar:hover,
.sidebar:focus-within { transform: translateX(0); }
/* The hover target lives outside the sidebar: the sidebar scrolls, and an
overflow other than visible would clip a pseudo-element placed beside it. */
.sidebar-hint {
position: fixed;
left: 0;
top: 64px;
width: 20px;
height: calc(100vh - 64px);
z-index: 151;
cursor: pointer;
}
/* Thin colour rail so it is discoverable */
.sidebar-hint::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--amber), var(--blue), var(--green), var(--purple));
opacity: .55;
transition: opacity .22s ease;
}
body:has(.sidebar-hint:hover) .sidebar-hint::before { opacity: 0; }
body:has(.sidebar-hint:hover) .sidebar { transform: translateX(0); }
/* Hamburger in the top bar: same sidebar, but reachable by click, keyboard
and touch — hover alone is invisible on iPads. */
.topbar-left { display: flex; align-items: center; gap: 12px; }
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
border-radius: 8px;
color: var(--text-2);
cursor: pointer;
transition: color .15s, background .15s;
}
.sidebar-toggle:hover { color: var(--text); background: var(--surface-hover); }
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .sidebar-hint::before { opacity: 0; }
/* Content column: a share of the viewport, not a pixel width, so it adapts to
whatever resolution the student is on. Centred, with the hidden sidebar
overlaying it rather than pushing it. */
.main {
max-width: 70%;
margin: 0 auto;
}
/* Self-checking exercise: shown when the output matches data-forventet */
.course-check-praise {
margin-top: 12px;
padding: 12px 16px;
border-radius: 10px;
background: var(--green-dim);
border: 1px solid var(--green-ring);
color: var(--green);
font-weight: 600;
font-size: .95rem;
}
.course-check-praise.show { animation: praisePop .35s ease; }
@keyframes praisePop {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* Krav-liste i Prøv selv: samme KRAV-merke som i innleveringene */
.krav-list ul { list-style: none; margin: 0 0 4px; }
.krav-list li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: .86rem;
line-height: 1.5;
color: var(--text-2);
border-bottom: 1px solid var(--border-muted);
margin-bottom: 0;
}
.krav-list li:last-child { border-bottom: none; }
.krav-list li::before {
content: 'KRAV';
flex-shrink: 0;
margin-top: 1px;
font-size: .6rem;
font-weight: 700;
letter-spacing: .06em;
padding: 2px 6px;
border-radius: 4px;
background: var(--amber-dim);
color: var(--amber);
border: 1px solid var(--amber-ring);
}
/* Stor og tydelig hovedregel, som «Bruk alltid f-streng ...» i modul 1 */
.callout-rule {
margin: 22px 0;
padding: 18px 22px;
background: var(--amber-dim);
border: 1px solid var(--amber-ring);
border-left: 4px solid var(--amber);
border-radius: 10px;
color: var(--text);
font-size: 1.15rem;
font-weight: 700;
line-height: 1.5;
}
.callout-rule p { margin: 0; max-width: none; }
/* Figur i modulinnholdet. Bildet er en illustrasjon, ikke en skjermdump, så
det får ikke ramme slik oppgavebildet gjør — kanten ville lest som en boks
ved siden av alle de andre boksene på sida. `max-width` i piksler, ikke
prosent: bilda er laget i én bredde, og et diagram som strekkes forbi den
blir bare uskarpt. */
.course-figure {
margin: 22px 0;
max-width: 560px;
}
.course-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.course-figure figcaption {
margin-top: 8px;
font-size: .82rem;
color: var(--text-3);
line-height: 1.5;
}
/* Hint after a couple of unsuccessful runs */
.course-check-hint {
margin-top: 12px;
padding: 12px 16px;
border-radius: 10px;
background: var(--amber-dim);
border: 1px solid var(--amber-ring);
color: var(--amber);
font-size: .9rem;
}
/* ── Gate: resten av modulen holdes skjult til selvsjekken er kjørt riktig ──
Innleveringsseksjonen legges til containeren etter at dette stilarket er
brukt, så skjuling på klasse virker uansett rekkefølge. */
.is-locked .gated-content,
.is-locked .assignments-section { display: none; }
.gate-note { display: none; }
.is-locked .gate-note {
display: block;
margin: 22px 0 8px;
padding: 14px 18px;
border: 1px dashed var(--border);
border-radius: 10px;
color: var(--text-2);
font-size: .92rem;
}
/* ── Tastedrill: ett felt per tegn, med ansikt som snur når begge sitter ──
Ingen lås. Innholdet under ligger dimmet og lyses opp, så eleven ser at
noe venter uten å bli stoppet av det. */
.course-keys-rad {
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0 4px;
}
.course-keys-ansikt {
font-size: 1.5rem;
line-height: 1;
margin-right: 2px;
transition: transform .25s ease;
}
.course-keys.ferdig .course-keys-ansikt { transform: scale(1.15); }
.course-keys-felt {
width: 52px;
height: 52px;
text-align: center;
font-family: var(--font-m);
font-size: 1.5rem;
color: var(--text);
background: var(--surface);
border: 2px solid var(--border);
border-radius: 10px;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.course-keys-felt:focus {
outline: none;
border-color: var(--blue-ring);
}
.course-keys-felt[data-tilstand="riktig"] {
border-color: var(--green);
background: var(--green-dim);
color: var(--green);
}
.course-keys-felt[data-tilstand="feil"] {
border-color: var(--red);
background: var(--red-dim);
color: var(--red);
}
.course-keys-melding {
margin: 10px 0 0;
padding: 10px 14px;
border-radius: 10px;
font-size: .9rem;
}
.course-keys-melding[data-tilstand="hint"] {
background: var(--amber-dim);
border: 1px solid var(--amber-ring);
color: var(--amber);
}
.course-keys-melding[data-tilstand="ok"] {
background: var(--green-dim);
border: 1px solid var(--green);
color: var(--green);
}
.course-keys-dimmet {
opacity: .3;
transition: opacity .6s ease;
}
.course-keys.ferdig .course-keys-dimmet { opacity: 1; }
/* Editable cells match the static example cells */
.inline-editor-container .cm-editor,
.assignment-editor-container .cm-editor,
.inline-editor-container .cm-content,
.assignment-editor-container .cm-content { font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.course-check-praise.show, .grading-wrap { animation: none; }
.sidebar { transition: none; }
}
/* Norsk forklaring under Pythons engelske feilmelding (js/constants/feilhjelp.js).
Den engelske meldingen blir stående — elevene skal lære å lese ekte
feilmeldinger — så hjelpelinja må se ut som en fotnote, ikke som en del av
tracebacken: egen farge, egen linje, litt luft over. */
.output-hjelp {
display: block;
margin-top: .6rem;
padding-left: .75rem;
border-left: 2px solid var(--blue-ring, var(--border));
color: var(--text-2);
white-space: pre-wrap;
}
.output-area.error .output-hjelp,
.output-area .error + .output-hjelp { color: var(--text-2); }
/* Antall oppgaver i innleveringen, og hva nivåfanene betyr.
Begge er svar på at eleven ikke så hva som fantes: oppgave 2 ligger forbi
vurderingsboksen til oppgave 1, og ★★ sa aldri om det var forventet. */
.assignments-antall {
margin: -.35rem 0 1.1rem;
color: var(--text-2);
font-size: .95rem;
}
.asgn-nivaa-hjelp {
margin: 0 0 .5rem;
color: var(--text-2);
font-size: .9rem;
}
/* Prøv selv mot innlevering.
Haiku i kursgjennomgangen limte prøv selv-koden sin inn i innleveringens
oppgave 2 og fikk 0 %. Vurderingen var korrekt, men de to flatene lignet
for mye på hverandre til at hun så at hun hadde byttet kontekst.
Innleveringen får derfor en egen, litt lilla bunn — samme aksentfarge som
overskriften og nivåfanene allerede bruker — så den leses som et annet
sted. color-mix mot --surface, ikke en ny token, så alle 17 temaene får
nyansen gratis uten at KONTRAKT.md må utvides. */
.assignments-section {
background: color-mix(in srgb, var(--purple) 6%, var(--surface-deep));
border: 1px solid color-mix(in srgb, var(--purple) 22%, var(--border));
border-radius: 16px;
padding: 24px 24px 28px;
margin-top: 32px;
}
.assignments-section .assignment-panel {
background: color-mix(in srgb, var(--purple) 4%, var(--surface));
}
/* Merkelapp under hver taste-rute.
Rutene sto umerket, så eleven måtte gjette hvilken som var `{` og hvilken
som var `}` ut fra rekkefølgen i teksten over. `aria-hidden` fordi feltet
allerede har et aria-label som sier det samme. */
.course-keys-boks {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.course-keys-lapp {
font-family: var(--font-m);
font-size: .8rem;
line-height: 1;
color: var(--text-3);
}
/* KaTeX kopieres som rot: nettleseren tar med både MathML-laget (skjult, men
markerbart) og det synlige HTML-laget, så «E_k = ½mv²» ble til
«Ek=12mv2E_k = \frac{1}{2}mv^2Ek=21mv2» når en elev limte den inn i notatene
sine. MathML-laget er der for skjermlesere og skal bli der; det trenger bare
ikke være med i en markering. Da kopieres den synlige formelen alene. */
.katex-mathml { user-select: none; -webkit-user-select: none; }