(velges i eksamen-render.js).
display:table krymper boksen til formelen og sentrerer den. Enkel strek, ikke dobbel
-- dette ER regnestykket (aldri inni en .answer-underline-setning, se over), så
samme "ingen farge, én linje"-regel som det kjedede mellomsvar-tilfellet i JS. */
div.final-answer {
display: table;
margin: 0.6em auto;
border-bottom: 2px solid var(--underline);
padding-bottom: 2px;
}
/* display:table gir en kort/normal formel en fin shrink-wrap-og-senter-boks (derfor
valgt fremfor block), MEN CSS-tabellers auto-bredde-algoritme respekterer verken
max-width eller min-width for et overflow:auto-barn -- den bruker innholdets
fulle min-content-bredde uansett, en annen fallgruve enn (men i familie med)
.doc-header sin flex-logo-bug tidligere i filen. En bred formel (821px målt på
10trinn-v25) blåste dermed ut selve wrapperen, ikke bare formelen inni, selv om
.katex-display sin egen overflow-x:auto/katex-scroll fungerte korrekt isolert
(Rubens skjermbilde 2026-08-09). Løsning: for KUN de brede tilfellene (markert av
samme markWideKatex() som already styler selve scrollen) byttes hele boksen til
vanlig block -- som fint respekterer max-width -- i stedet for table. Sentrering
går tapt for disse få, men de trenger uansett hele bredden for å ha noe å
scrolle innenfor. */
div.final-answer:has(.katex-scroll) { display: block; max-width: 100%; }
div.final-answer .katex-display { margin: 0; }
/* favicon-icon-light.svg is now a tight square crop of just the "R" mark (viewBox
"399.7 29 230 230") -- the crop math this rule used to need (for an older version
that shared a 1001x264 canvas with the full wordmark) is stale and was cutting the
top off the icon against the current file. Plain height-based sizing is enough. */
.brand-icon-crop { display: inline-flex; flex-shrink: 0; }
.brand-icon-crop img { height: 26px; width: auto; display: block; }
/* ── Footer (skjerm) ── */
.doc-footer {
margin-top: 60px;
padding-top: 18px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--subtext);
}
.doc-footer .brand-icon-crop { opacity: 0.7; }
/* Copyright-linjen gjentatt inne i #content selv (se render-html.js) -- .doc-footer
over er en søsken-node av #content og følger ikke med hvis noen select-all/
copy-paster selve løsningsteksten. Hensikten er KUN copy-paste-vern, ikke å vises
fram -- usynliggjort på skjerm (fortsatt i DOM-en og markerbar/kopierbar) siden den
rett over/under .doc-footer så ut som samme linje gjentatt (Rubens skjermbilde
2026-08-08: "fortsatt double"). Klassisk sr-only-mønster, ikke display:none (som
ville fjernet den fra tekstmarkering også). Kun @media screen -- printet/PDF-en
beholder linjen synlig som før (urørt her, ikke del av dagens rapporterte problem). */
@media screen {
.inline-copyright {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
margin: 0;
}
}
/* ── Print ── */
/* Margins now come from pdf_export.py's CDP Page.printToPDF call (marginTop/
Bottom/Left/Right), not this rule -- see that script's docstring for why:
a position:fixed footer (the old .print-footer, removed below) is painted
over the content box and Chromium never reserves real pagination space for
it, so a page that filled all the way to the bottom margin would collide
with it. CDP's footerTemplate reserves a genuine page-margin box instead,
which a CSS-only @page rule can't do. Kept minimal here so it can't fight
the CDP-supplied margins.
Tried adding an explicit `margin: 15mm` here (2026-08-04) to close the
native-print pagination gap vs. the CDP export -- confirmed no effect in
either Chrome or Edge's interactive print dialog (sheet count unchanged,
CSS verified served correctly). Chromium's interactive print UI ignores
@page margin entirely; only its headless printToPDF path (CDP) honors it.
Not fixable from CSS -- reverted. */
@page { size: A4; }
@media print {
/* PDF-eksporten/print skal alltid være lys, uansett hva data-theme står på --
en bruker som printer fra nettleseren sin i mørkmodus skal likevel få en lys
PDF (STIL/PLAN-k). Re-erklærer :root sine lysverdier på selve [data-theme="dark"]
-- høyere specificity enn :root, så den slår den uansett attributtverdi. */
[data-theme="dark"] {
--ink: #0f172a;
--ink-soft: #334155;
--subtext: #64748b;
--paper: #ffffff;
--paper-muted: #f8fafc;
--line: #e2e8f0;
--underline: rgba(51, 65, 85, 0.45);
}
[data-theme="dark"] .status-pill--utkast { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .status-pill--ferdig { background: #dcfce7; color: #166534; }
[data-theme="dark"] .answer-underline .final-answer .katex { background: rgba(35, 85, 128, 0.15); }
[data-theme="dark"] .answer-underline .final-answer:not(:has(.katex)) { background: rgba(35, 85, 128, 0.15); }
[data-theme="dark"] .katex-error { color: #cc0000 !important; }
[data-theme="dark"] .brand-logo.logo-light,
[data-theme="dark"] .brand-icon-crop img.logo-light,
[data-theme="dark"] .doc-brand img.logo-light { display: block; }
[data-theme="dark"] .brand-logo.logo-dark,
[data-theme="dark"] .brand-icon-crop img.logo-dark,
[data-theme="dark"] .doc-brand img.logo-dark { display: none; }
[data-theme="dark"] #content img.logo-light { display: block; }
[data-theme="dark"] #content img.logo-dark { display: none; }
/* Topbar/footer-chrome (PLAN-k runde 2) er navigasjon, ikke del av selve
løsningsdokumentet -- samme resonnement som .preview-banner rett under.
.doc-actions (back-link + PDF-nedlastingslenke, 2026-08-09) er samme
kategori -- en lenke til PDF-en fra INNI selve PDF-en er meningsløs. */
.doc-topbar, .doc-footer-site, .doc-actions { display: none; }
.preview-banner { display: none; }
/* Rely on @page margin instead of .wrap's screen padding (40px/20px), which would
otherwise stack on top of it and push content in twice as far. No extra bottom
clearance needed now that the footer lives in its own reserved margin box
(CDP footerTemplate) instead of overlaying content. */
.wrap { padding: 0; max-width: none; }
/* Draft-tracking chrome, useful on screen during review, noise in the deliverable. */
.status-pill { display: none; }
.internal-note { display: none; }
/* .doc-footer sits once at the natural end of the content flow (screen-only
design); on the last printed page that lands right next to .print-footer's
fixed copy, duplicating the copyright line. .print-footer already repeats
on every page including the last, so the flow one is pure redundancy here. */
.doc-footer { display: none; }
/* overflow-x:auto paired with overflow-y:visible doesn't stay "visible" — the
CSS overflow spec force-changes a 'visible' axis to 'auto' whenever the other
axis isn't 'visible', so tall stacked fractions silently got a real (if
needless) vertical scrollbar, which Chrome's print-to-pdf renders as actual
up/down scroll-arrow glyphs baked into the page. Print can't scroll anyway —
drop both axes to visible so nothing overflow-related renders at all. */
.katex-display { overflow: visible; break-inside: avoid-page; }
/* Keeps a task heading from being stranded alone at the bottom of a page —
part of the "one line spills onto the next page" complaint. Deliberately
NOT extended to table/#content img/.final-answer: re-tested under the
new CDP footerTemplate (2026-07-22, Runde 4) on the assumption that the
old position:fixed-footer revert reason no longer applied -- it doesn't
collide with the footer anymore, but a katex-display formula right
before the table (Oppgave 7 Del 2, "65*20=1300") lost almost all its
rendered content (only a stray underline fragment survived) on the page
that got split, an even worse failure than the original overlap. Reverted
-- this narrower pair (formulas + heading orphans) is still the safe
subset. */
h2, h3 { break-after: avoid-page; }
/* TEST 2026-07-22 (Runde 5, ikke permanent): tighter table density to see if
it closes the ~12pt gap that pushes Oppgave 7 Del 2's table onto page 11. */
table { font-size: 0.92em; margin: 0.6em 0; }
th, td { padding: 3px 8px; line-height: 1.2; }
/* A lead-in sentence ending in ":" (tagged .lead-in by eksamen-render.js —
this needs the paragraph's actual text, which CSS selectors can't read)
shouldn't be left stranded alone at the bottom of a page while whatever
it introduces gets pushed to the next one. Tried a structural version of
this first (p:has(+ .katex-display), p:has(+ table)) but the actual
collision found on page 8 ("Setter inn i overflateformelen:") is
followed by three more plain paragraphs before a table, not directly by
a katex-display or table — the text-content rule catches that case too,
the structural one didn't. */
.lead-in { break-after: avoid-page; }
/* Tiled copyright watermark -- makes a partial screenshot of a solution less
useful to redistribute. #watermark itself is built once in eksamen-render.js
(no per-set HTML change needed) but only painted here, under @media print,
since Chrome's printToPDF/print-to-pdf emulates print media -- so it shows up
in every PDF export without ever appearing in the normal browser preview.
Rendered as an inline SVG
(built in eksamen-render.js), not a CSS
background-image: verified via direct pixel inspection of CDP-exported PDFs
that Page.printToPDF silently drops ANY background-image (SVG or raster,
with printBackground:true, with -webkit-print-color-adjust/print-color-adjust:
exact) while background-color survives fine. An inline / is
ordinary SVG content, not a CSS background, and renders correctly -- confirmed
against the same export pipeline the logo already proves works (it paints as
real vector paths in the exported PDF).
Rotation lives on the SVG itself (patternTransform, set in
eksamen-render.js), NOT as a CSS transform on this fixed element: a CSS
transform: rotate() on a large position:fixed element containing this
pattern made Page.printToPDF paint every tile twice at a slight offset
(a visible double-exposure ghost per tile) -- reproduced even in a
minimal isolated test page, so it's the CSS-transform+fixed+print
combination at fault, not page content. Moving the rotation inside the
SVG's own coordinate system (same rendering path as the header logo,
already proven clean) fixed it; inset can go back to 0 since a rotated
pattern still fills the rect without needing the old -25% overscan. */
#watermark {
display: block;
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.05;
}
#watermark svg { width: 100%; height: 100%; display: block; }
}