/* updn.no — variant «Lærebok»: the printed book, translated honestly to the screen.
   Warm paper, ink, one ink-blue accent. Prose in STIX Two Text, formulas in STIX Two Math (the same
   design, both OFL, self-hosted subsets in fonts/). The four boxes keep the PDF's colour identities
   (eksempel blue, viktig red, oppgaver green, R-kode grey) as tinted panels with a coloured left rule.
   Rules marked FUNKSJONELT are load-bearing and kept from the plain stylesheet unchanged in effect. */

/* ---- webfonts (SIL OFL 1.1; see fonts/OFL.txt). Text: variable weight 400–700, latin + Latin Extended-A.
   Math: STIX Two Math subset to Latin, Greek, symbols, arrows, operators and the math alphanumerics,
   with its OpenType MATH table intact, so stretchy fences, radicals and accents still assemble. ---- */
@font-face {
  font-family: "STIX Two Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/STIXTwoText-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(fonts/STIXTwoText-Italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/STIXTwoText-latin-extA.woff2) format("woff2");
  unicode-range: U+0100-017F, U+2113;
}
@font-face {
  font-family: "STIX Two Text"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(fonts/STIXTwoText-Italic-latin-extA.woff2) format("woff2");
  unicode-range: U+0100-017F, U+2113;
}
@font-face {
  font-family: "STIX Two Math"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/STIXTwoMath-Regular.subset.woff2) format("woff2");
}

/* ---- tokens ---- */
:root {
  color-scheme: light;
  --papir: #f7f3ea;        /* page */
  --papir-dyp: #efe9dc;    /* panels: code paper, chrome */
  --blekk: #1e1b17;        /* ink */
  --dempet: #5b554b;       /* muted ink: eyebrows, captions, meta (6.7:1 on paper) */
  --regel: #d8d1c2;        /* hairline */
  --regel-sterk: #a89f8f;  /* underline for links that inherit colour */
  --lenke: #274b7a;        /* the one accent: ink blue (8.0:1 on paper) */
  --kommentar: #6a6257;    /* R comments (overrides the inline #808080, which fails AA) */
  --eksempel-bg: #e8edf5;  --eksempel-kant: #1f3f7a;
  --viktig-bg: #f6e7e2;    --viktig-kant: #8e2b1d;
  --oppgaver-bg: #e7efe3;  --oppgaver-kant: #2d6a2f;
  --rboks-bg: #ede9df;     --rboks-kant: #7a7365;
  --mal-bg: #f8ecc2;       /* :target highlight */
  --ib-bg: #f6ecc9;        --ib-tekst: #5a4a00;   /* «ikke bygget» notice */
  --video-bg: #111;
  --tekst: var(--blekk); --bg: var(--papir);      /* aliases kept from the plain stylesheet */
  --mal: 44rem;            /* prose measure: ~88 characters of STIX Two Text at 18 px. Wider than a
                              novel would take, because display equations, ray diagrams and data
                              tables all want room; the eye is helped back by the 1.6 line-height.
                              Grows again at 1600 px (see the wide tier below). */
  --bred: 76rem;           /* list and table pages (kurs, notasjon, referanser, stikkord): not prose,
                              so they may use the width a large screen offers */
  --side: 16rem;           /* sidebar width on wide screens */
  --mellomrom: 2.5rem;     /* gap between sidebar and text */
  --heng: 6rem;            /* hanging figure/table number */
  --stikk-topp: 2.6rem;    /* height of the sticky running-title bar */
  --serif: "STIX Two Text", "STIX Two Math", "STIX Two", "Times New Roman", Times, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- base ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Percentage root size so the reader's default-font preference scales the page: 112.5% = 18px at 16px.
   STIX Two Text is a compact face (Times-like x-height); 18 px reads like a 10.5 pt book page. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papir); color: var(--blekk);
  font-family: var(--serif); line-height: 1.6;
  font-kerning: normal; text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures;
}
a { color: var(--lenke); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: var(--regel-sterk); }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2px solid var(--lenke); outline-offset: 2px; border-radius: 2px; }
::selection { background: #d5deea; color: var(--blekk); }
code, kbd, samp, .ltx_font_typewriter { font-family: var(--mono); font-size: .86em; }

/* Small capitals are not in the text font, so every label is letterspaced capitals instead. */
.eyebrow, .boks-tittel, .oppgaver-tittel, nav.hovednav, nav.prevnext .retning, ol.kapittelliste .nr,
details.losning > summary, .liste-info-etikett, .segmentliste h2 {
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500; font-variant-numeric: lining-nums;
}

/* ---- chrome ---- */
.hopp { position: absolute; left: -999px; top: 0; background: var(--papir); color: var(--blekk); padding: .5rem .8rem; z-index: 20; border: 1px solid var(--regel); }
.hopp:focus { left: .5rem; }
header.topp { border-bottom: 1px solid var(--regel); background: var(--papir); }
nav.hovednav {
  max-width: calc(var(--mal) + 2.5rem); margin: 0 auto; padding: .85rem 1.25rem .75rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; font-size: .66rem; letter-spacing: .09em;
}
nav.hovednav a { color: var(--dempet); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .05rem; }
nav.hovednav a:hover, nav.hovednav a[aria-current] { color: var(--blekk); border-bottom-color: var(--blekk); }
/* The mark: a lens bringing two rays to a focus, beside a stacked «up / dn» wordmark.
   Generated by build/make_mark.py and inlined from templates/_mark.svg.html so it inherits
   currentColor and follows the ink in both colour schemes; the accessible name is on the <a>.
   Sized by HEIGHT, because the mark is now wider than it is tall. */
nav.hovednav .merke { color: var(--blekk); display: inline-flex; align-items: center; align-self: center; border-bottom: 0; }
nav.hovednav .merke:hover { color: var(--lenke); border-bottom: 0; }
.merke-ikon { display: block; height: 1.5rem; width: auto; }
@media (max-width: 640px) { .merke-ikon { height: 1.3rem; } }
/* The mark sits alone on the left; the page links group to the right. (`margin-left: auto` used to
   live on the course link, which the navbar no longer carries.) */
nav.hovednav .nav-sider { margin-left: auto; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

/* ---- navbar search. A field in the bar rather than a link to a search page: the reader types
   where they already are and gets the first hits under the cursor. /sok/ is still there for the
   full list, reached with Enter or the last row of the dropdown. ---- */
/* The search field takes the free space itself. .nav-sider is only rendered when it has items
   (base.html), so on most pages this is the only thing on the right of the bar. When both are
   present the two autos split the space, which puts the links mid-bar and the field hard right —
   fine, and the case does not arise today. */
nav.hovednav .navsok { position: relative; align-self: center; margin-left: auto; }

/* One chrome across all three surfaces: the centring above is in the SHARED sheet, not the app
   layer, because updn.no does not load the app layer — which is exactly why its bar aligned on
   the baseline while srs. and reader. centred theirs. "Consistent navbar" means one rule. */
nav.hovednav .nav-sider { align-items: center; align-self: center; }
.navsok-felt {
  font: inherit; font-size: .72rem; letter-spacing: .04em; text-transform: none; color: var(--blekk);
  background: var(--papir); border: 1px solid var(--regel); border-radius: 2px;
  padding: .3rem .55rem; width: 11rem; max-width: 40vw;
  transition: width .18s ease, border-color .18s ease;
}
.navsok-felt::placeholder { color: var(--dempet); opacity: 1; }
.navsok-felt:focus { outline: none; border-color: var(--blekk); width: 15rem; }
/* Chrome/Safari put their own clear button inside type=search; it collides with the border
   radius and is redundant next to Escape. */
.navsok-felt::-webkit-search-decoration,
.navsok-felt::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.navsok-treff {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 30;
  width: 26rem; max-width: min(92vw, 26rem);
  max-height: min(70vh, 30rem); overflow-y: auto;
  background: var(--papir); border: 1px solid var(--regel);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .13);
  letter-spacing: 0; text-align: left;
}
/* The dropdown holds prose — page titles and excerpts — but it is a child of nav.hovednav, which
   letterspaces and uppercases everything in the bar. Hand the panel back normal text. */
.navsok-treff, nav.hovednav .navsok-treff {
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.navsok-treff-rad, .navsok-mer, .navsok-tom {
  display: block; padding: .55rem .75rem; font-size: .82rem; line-height: 1.35;
  border-bottom: 1px solid var(--regel);
}
.navsok-treff-rad { text-decoration: none; color: var(--blekk); border-bottom-color: var(--regel); }
nav.hovednav .navsok-treff-rad:hover, nav.hovednav .navsok-treff-rad.er-valgt {
  background: var(--papir-dyp); color: var(--blekk); border-bottom-color: var(--regel);
}
.navsok-tittel { display: block; font-weight: 600; }
.navsok-utdrag { display: block; color: var(--dempet); font-size: .76rem; margin-top: .15rem; }
.navsok-utdrag mark { background: var(--mal-bg); color: inherit; }
.navsok-tom { color: var(--dempet); border-bottom: 0; }
.navsok-mer { border-bottom: 0; font-size: .74rem; }
nav.hovednav .navsok-mer { color: var(--lenke); }
nav.hovednav .navsok-mer:hover { background: var(--papir-dyp); border-bottom: 0; }
main { max-width: calc(var(--mal) + 2.5rem); margin: 0 auto; padding: 2rem 1.25rem 4.5rem; }
/* Pages that are a list or a table rather than running prose get the wider container, and so does
   the header above them, so the mark stays aligned with the content. */
main.kurs, main.hub, main.oppslag { max-width: calc(var(--bred) + 2.5rem); }
body.kurs-side nav.hovednav, body.hub-side nav.hovednav, body.oppslag-side nav.hovednav {
  max-width: calc(var(--bred) + 2.5rem);
}
footer.bunn {
  max-width: calc(var(--mal) + 2.5rem); margin: 0 auto; padding: 1.4rem 1.25rem 3rem;
  border-top: 1px solid var(--regel); color: var(--dempet); font-size: .8rem; font-style: italic;
}
footer.bunn p { margin: .3rem 0; }

/* ---- headings and text ---- */
/* overflow-wrap: a heading word wider than the phone column («*Koordinattransformasjoner», 375 px at
   375 px) breaks instead of forcing a page-wide horizontal scroll; ordinary words are untouched. */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 600; hyphens: manual; overflow-wrap: break-word; color: var(--blekk); }
h1 { font-size: 2.15rem; font-weight: 500; line-height: 1.12; letter-spacing: -.012em; margin: .2rem 0 1.7rem; }
h2 { font-size: 1.32rem; margin: 2.8rem 0 .8rem; }
h3 { font-size: 1.08rem; font-style: italic; margin: 2rem 0 .5rem; }
h4, h5, h6 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
h2.ltx_title, h3.ltx_title { font-weight: 600; }   /* the LaTeXML bold class would otherwise push these to 700 */
.eyebrow { font-size: .7rem; color: var(--dempet); margin: 0 0 1rem; }
/* Links that inherit the surrounding colour get a rule-coloured underline as the non-colour cue. */
.eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: var(--regel-sterk); text-decoration-thickness: 1px; text-underline-offset: .28em; }
.eyebrow a:hover { text-decoration-color: currentColor; }
.ingress-kort, .liste-info { color: var(--dempet); font-style: italic; }
/* Author line directly under the course title, as on the book's own title page («av Kristian Staff»). */
.forfatter { color: var(--dempet); font-style: italic; margin: -1.1rem 0 1.6rem; font-size: 1.05rem; }
p, .ltx_p { margin: 0 0 1rem; hyphens: auto; }
.ltx_para { margin: 0; }
.ltx_p:last-child { margin-bottom: 0; }
.ltx_para + .ltx_para { margin-top: 1rem; }
em, .ltx_emph { font-style: italic; }
.merknad { padding: .7rem 1rem; border: 1px dashed var(--regel-sterk); border-radius: 3px; color: var(--dempet); }
.merknad.ikke-bygget { background: var(--ib-bg); border-color: transparent; color: var(--ib-tekst); }

/* ---- LaTeXML classes that are load-bearing (we do not ship LaTeXML.css) ---- */
.ltx_font_bold { font-weight: 700; }
.ltx_font_italic { font-style: italic; }
.ltx_font_upright { font-style: normal; }
.ltx_font_smallcaps { font-variant-caps: small-caps; }
.ltx_font_sansserif { font-family: var(--sans); }
.ltx_font_serif { font-family: inherit; }
.ltx_runin { display: inline; }
.ltx_align_left { text-align: left; }
.ltx_align_right { text-align: right; }
.ltx_align_center { text-align: center; }
.ltx_align_justify { text-align: justify; }
.ltx_align_top { vertical-align: top; }
.ltx_align_middle { vertical-align: middle; }
.ltx_align_bottom { vertical-align: bottom; }
.ltx_align_baseline { vertical-align: baseline; }
.ltx_centering { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.ltx_inline-block { display: inline-block; }
.ltx_sub { vertical-align: sub; font-size: .8em; }
.ltx_sup { vertical-align: super; font-size: .8em; }
.ltx_framed { padding: 2px 1px; }
.ltx_framed_underline { border-bottom: 3px double currentColor; }
.ltx_framed_rectangle { border: 1px solid currentColor; padding: 2px 4px; }
.ltx_verbatim { font-family: var(--mono); white-space: pre-wrap; font-size: .88em; }
.ltx_missing, .ltx_missing_label, .ltx_missing_citation { color: var(--viktig-kant); font-family: var(--mono); font-size: .85em; }
.ltx_ERROR { color: var(--viktig-kant); }
.ltx_rdf { display: none; }

/* listings (R code): ltx_listingline + ltx_lst_space carry the indentation — FUNKSJONELT */
.ltx_listing {
  display: block; position: relative; margin: .7rem 0 1rem; padding: .7rem .9rem; overflow-x: auto; text-align: left;
  background: var(--papir); border: 1px solid var(--regel); border-radius: 3px;
  font-family: var(--mono); font-size: .8rem; line-height: 1.5;
}
.ltx_listingline { white-space: nowrap; min-height: 1em; }
.ltx_lst_space { white-space: pre; }
.ltx_listing .ltx_font_typewriter { font-size: inherit; }
.ltx_listing .ltx_lst_comment { color: var(--kommentar) !important; font-style: italic; }  /* inline style says #808080: 3.5:1, fails AA */
/* the download arrow sits in the corner on its own paper, so it never overlaps a long first line */
.ltx_listing_data { position: absolute; top: .15rem; right: .25rem; margin: 0; background: var(--papir); padding: 0 .3rem; border-radius: 2px; line-height: 1.2; }
.ltx_listing_data a { text-decoration: none; color: var(--dempet); font-size: .9em; }
.ltx_lst_numbers_left .ltx_listingline .ltx_tag { width: 2.5em; margin-left: -3em; position: absolute; text-align: right; }

/* ---- math (native MathML in the matching math font) ---- */
math { font-family: "STIX Two Math", "STIX Two Text", "Cambria Math", "Latin Modern Math", serif; font-size: 1em; }
math[display="block"] { display: block; text-align: center; margin: 1em 0; }
table.ltx_equation td math[display="block"], table.ltx_equationgroup td math[display="block"] { margin: 0; }
/* FUNKSJONELT. Browsers ignore overflow on display:table boxes, so the table element itself becomes the
   block scroll container and its single tbody takes over the table layout. An align group has one tbody
   per equation; those keep table-row-group so the browser wraps them in ONE anonymous table and the
   & columns stay aligned across rows (border-collapse/border-spacing inherit into that table, and
   the 50 % pad cells make it fill the block). */
table.ltx_eqn_table, table.ltx_equation, table.ltx_equationgroup {
  display: block; overflow-x: auto; max-width: 100%; margin: 1rem 0; border-collapse: collapse; border-spacing: 0;
}
table.ltx_eqn_table > tbody:only-of-type, table.ltx_equation > tbody:only-of-type,
table.ltx_equationgroup > tbody:only-of-type {
  display: table; width: 100%; border-collapse: collapse;
}
table.ltx_eqn_table td, table.ltx_equation td { border: 0; padding: .15em 0; vertical-align: baseline; }
td.ltx_eqn_center_padleft, td.ltx_eqn_center_padright { width: 50%; min-width: 0; padding: 0 !important; }
td.ltx_eqn_left_padleft, td.ltx_eqn_right_padright { min-width: 1em; }
td.ltx_eqn_left_padright, td.ltx_eqn_right_padleft { width: 100%; }
table.ltx_eqn_align tr.ltx_equation td.ltx_align_left + td.ltx_align_right,
table.ltx_eqn_align tr.ltx_equation td.ltx_align_left + td.ltx_align_center,
table.ltx_eqn_align tr.ltx_equation td.ltx_align_center + td.ltx_align_right,
table.ltx_eqn_align tr.ltx_equation td.ltx_align_center + td.ltx_align_center { padding-left: 2em; }
.ltx_eqn_eqno { max-width: 0; overflow: visible; white-space: nowrap; }
.ltx_eqn_eqno.ltx_align_right .ltx_tag { float: right; }
.ltx_eqn_eqno .ltx_tag { color: var(--dempet); }
mrow.svar { border-bottom: 3px double currentColor; padding-bottom: .05em; }   /* the book's \answer */

/* ---- lists ---- */
ol.ltx_enumerate, ul.ltx_itemize { margin: .5rem 0 1rem; padding-left: 2.2rem; }
li.ltx_item { margin: .35rem 0; list-style-type: none; position: relative; }
li.ltx_item > .ltx_tag_item { position: absolute; left: -2.1rem; width: 1.8rem; text-align: right; color: var(--dempet); }
li.ltx_item > .ltx_para { display: block; }
li.ltx_item > .ltx_para > .ltx_p { margin: 0; }
li.ltx_item > .ltx_para + .ltx_para { margin-top: .4rem; }
ul.ltx_itemize > li.ltx_item > .ltx_tag_item { font-size: .85em; }

/* ---- footnotes: shown inline in brackets, no hover popups ---- */
.ltx_note { display: inline; }
.ltx_note > .ltx_note_mark { color: var(--lenke); }
.ltx_note_outer, .ltx_note_content { display: inline; }
.ltx_note_content { font-size: .9em; color: var(--dempet); }
.ltx_note_content::before { content: " ["; }
.ltx_note_content::after { content: "]"; }
.ltx_note_content > .ltx_note_mark, .ltx_note_content > .ltx_tag_note { display: none; }

/* ---- tables (booktabs feel: ink rules, no vertical lines) ---- */
figure.ltx_table { margin: 2rem 0; }
figure.ltx_table > figcaption { margin: 0 0 .7rem; font-size: .86rem; line-height: 1.5; color: var(--dempet); text-align: left; }
figure.ltx_table > figcaption .ltx_text { font-size: 1em !important; }
figure.ltx_table > figcaption .ltx_tag, figure.figur figcaption .ltx_tag {
  font-weight: 600; color: var(--blekk); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: lining-nums;
}
/* No max-width: a wide table keeps its natural width and scrolls inside the div.tabellrull wrapper
   that fixups.py puts around data tables, instead of squeezing its columns. — FUNKSJONELT */
table.ltx_tabular { border-collapse: collapse; margin: .7rem auto; font-size: .92rem; font-variant-numeric: lining-nums tabular-nums; }
.ltx_tabular .ltx_td, .ltx_tabular .ltx_th { padding: .25em .6em; vertical-align: top; }
.ltx_th { font-weight: 600; white-space: nowrap; }
.ltx_tabular .ltx_nopad_l { padding-left: 0; }
.ltx_tabular .ltx_nopad_r { padding-right: 0; }
.ltx_border_t { border-top: 1px solid var(--blekk); }
.ltx_border_b { border-bottom: 1px solid var(--blekk); }
.ltx_border_l { border-left: 1px solid var(--blekk); }
.ltx_border_r { border-right: 1px solid var(--blekk); }
.ltx_border_tt { border-top: 3px double var(--blekk); }
.ltx_border_bb { border-bottom: 3px double var(--blekk); }
.ltx_border_T { border-top: 1px solid var(--regel); }
.ltx_border_B { border-bottom: 1px solid var(--regel); }
.ltx_border_L { border-left: 1px solid var(--regel); }
.ltx_border_R { border-right: 1px solid var(--regel); }
.notasjon-side figure.ltx_table, .tabellrull { overflow-x: auto; }   /* FUNKSJONELT */
.notasjon-side .ltx_tabular .ltx_text { font-size: 1em !important; }
.notasjon-side .ltx_tabular { font-size: .88rem; }

/* ---- figures (fixups.py sets the SVG width to 1.7x print, max-width 100%) — FUNKSJONELT sizing ---- */
figure.figur { margin: 2.2rem 0; text-align: center; }
figure.figur svg { display: block; margin: 0 auto; height: auto; max-width: 100%; }
figure.figur figcaption { margin: .9rem auto 0; font-size: .86rem; line-height: 1.5; color: var(--dempet); text-align: left; max-width: 30rem; }
figure.figur figcaption .ltx_text { font-size: 1em !important; }
/* raw fallback (no fixups yet): LaTeXML's own picture */
.ltx_minipage { max-width: 100% !important; margin: 1.5rem auto; }
svg.ltx_picture { max-width: 100%; height: auto; }
figure.ltx_figure { margin: .4rem 0 1.2rem; }
figure.ltx_figure figcaption { font-size: .86rem; color: var(--dempet); }

/* ---- boxes: tinted panels with a coloured left rule, the PDF's four colour identities ---- */
.boks, .ltx_theorem_eksempel, .ltx_theorem_viktig, .ltx_theorem_Rboks {
  margin: 1.9rem 0; padding: 1rem 1.2rem 1rem 1.3rem; border-left: 3px solid; border-radius: 0 3px 3px 0;
}
.boks.eksempel, .ltx_theorem_eksempel { background: var(--eksempel-bg); border-color: var(--eksempel-kant); }
.boks.viktig, .ltx_theorem_viktig { background: var(--viktig-bg); border-color: var(--viktig-kant); }
.boks.rboks, .ltx_theorem_Rboks { background: var(--rboks-bg); border-color: var(--rboks-kant); }
aside.boks.viktig { display: block; }
.boks-tittel { margin: 0 0 .6rem; font-size: .7rem; letter-spacing: .13em; font-weight: 600; }
.boks-tittel .ltx_text, .boks-tittel .ltx_tag { font-weight: inherit !important; }
.boks.eksempel > .boks-tittel, .ltx_theorem_eksempel > .boks-tittel { color: var(--eksempel-kant); }
.boks.viktig > .boks-tittel, .ltx_theorem_viktig > .boks-tittel { color: var(--viktig-kant); }
.boks.rboks > .boks-tittel, .ltx_theorem_Rboks > .boks-tittel { color: var(--dempet); }
.boks .ltx_p:last-child, .boks .ltx_para:last-child > .ltx_p:last-child { margin-bottom: 0; }
.boks .ltx_listing:last-child { margin-bottom: 0; }

/* ---- exercises ---- */
section.oppgaver, .ltx_theorem_oppgaver {
  margin: 3rem 0 0; padding: 1.1rem 1.2rem 1.1rem 1.3rem; background: var(--oppgaver-bg);
  border-left: 3px solid var(--oppgaver-kant); border-radius: 0 3px 3px 0;
}
.oppgaver-tittel, section.oppgaver > .boks-tittel, .ltx_theorem_oppgaver > .boks-tittel {
  margin: 0 0 1rem; font-size: .78rem; letter-spacing: .16em; color: var(--oppgaver-kant); font-weight: 600; font-style: normal; line-height: 1.3;
}
.oppgave, .ltx_theorem_oppgave { margin: 0 0 1.4rem; padding: 0 0 1.1rem; border-bottom: 1px solid #c8d8c2; }
.oppgave:last-of-type, .ltx_theorem_oppgave:last-of-type { border-bottom: 0; padding-bottom: 0; }
.oppgave > .boks-tittel, .ltx_theorem_oppgave > .boks-tittel { color: var(--dempet); font-size: .68rem; margin-bottom: .35rem; }
.oppgaver-lenke { margin: .5rem 0 0; font-size: .88rem; font-style: italic; }
details.losning { margin: .9rem 0 0; padding: .5rem .9rem; border: 1px solid #b9cdb2; border-radius: 3px; background: var(--papir); }
details.losning > summary { cursor: pointer; font-size: .7rem; font-weight: 600; color: var(--oppgaver-kant); padding: .15rem 0; }
details.losning > summary::marker { color: var(--dempet); }
details.losning[open] > summary { margin-bottom: .7rem; border-bottom: 1px solid var(--regel); padding-bottom: .4rem; }
details.losning .ltx_para + .ltx_para { margin-top: .8rem; }

/* ---- segment page furniture ---- */
video.segment-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--video-bg); border-radius: 3px; margin: 0 0 2rem; }
nav.prevnext { display: flex; justify-content: space-between; gap: 1.5rem; margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--regel); font-size: .95rem; }
nav.prevnext a { text-decoration: none; display: flex; flex-direction: column; max-width: 48%; overflow-wrap: break-word; }
nav.prevnext a[rel="next"] { text-align: right; margin-left: auto; }
nav.prevnext .retning { color: var(--dempet); font-size: .66rem; margin-bottom: .15rem; }
nav.prevnext .navn { color: var(--lenke); text-decoration: underline; text-decoration-color: var(--regel-sterk); text-decoration-thickness: 1px; text-underline-offset: .16em; }
nav.prevnext a:hover .navn { text-decoration-color: currentColor; }

/* ---- chapter / course / hub lists ---- */
.ingress { margin-bottom: 1.5rem; }
.segmentliste h2 { font-size: .74rem; color: var(--dempet); margin: 2.4rem 0 .6rem; font-weight: 600; letter-spacing: .14em; }
ol.segmenter { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--regel); }
ol.segmenter li { padding: .5rem 0 .5rem 1.9rem; border-bottom: 1px solid var(--regel); position: relative; }
ol.segmenter li::before { content: "○"; position: absolute; left: .3rem; color: var(--dempet); }
ol.segmenter a { text-decoration: none; }
ol.segmenter a:hover { text-decoration: underline; }
/* Visually hidden but read aloud: the hub's <h1>, which the design does not print. */
.visuelt-skjult { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.kapittel-lenker { font-size: .9rem; font-style: italic; }
/* The course page is a table of contents, not a card grid: number, title, extent on one hairlined row. */
ol.kapittelliste { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--regel); }
ol.kapittelliste li { border-bottom: 1px solid var(--regel); padding: .65rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
ol.kapittelliste a { text-decoration: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; flex: 1 1 16rem; min-width: 0; }
ol.kapittelliste .nr { font-size: .66rem; color: var(--dempet); flex: 0 0 5.6rem; }
ol.kapittelliste .navn { font-size: 1.1rem; font-weight: 500; color: var(--blekk); flex: 1 1 10rem; min-width: 0; }
ol.kapittelliste a:hover .navn { text-decoration: underline; text-decoration-color: var(--regel-sterk); text-underline-offset: .16em; }
ol.kapittelliste .meta { margin-left: auto; font-size: .8rem; color: var(--dempet); font-style: italic; white-space: nowrap; }
ol.kapittelliste.kompakt .navn { font-size: 1rem; }
ul.oppslag, ul.kursliste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--regel); }
ul.oppslag li, ul.kursliste li { padding: .5rem 0; border-bottom: 1px solid var(--regel); }
ul.oppslag a { text-decoration: none; }
ul.oppslag a:hover { text-decoration: underline; }
ul.kursliste a { text-decoration: none; display: flex; flex-direction: column; }
ul.kursliste .navn { font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
ul.kursliste .meta { color: var(--dempet); font-size: .95rem; font-style: italic; margin-top: .15rem; }

/* ---- references and glossary ---- */
ol.referanseliste { padding-left: 2.8rem; }
ol.referanseliste li { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.5; }
ol.referanseliste li::marker { color: var(--dempet); }
ol.referanseliste li:target { background: var(--mal-bg); box-shadow: 0 0 0 .4rem var(--mal-bg); }
ol.referanseliste a { overflow-wrap: anywhere; }  /* bare URLs have no break opportunities — FUNKSJONELT */
nav.bokstaver { display: flex; flex-wrap: wrap; gap: .2rem .3rem; margin: 0 0 1.8rem; font-size: .9rem; }
nav.bokstaver a { text-decoration: none; padding: .1rem .35rem; border-bottom: 1px solid var(--regel); }
nav.bokstaver a:hover { border-bottom-color: currentColor; }
ul.stikkordliste { list-style: none; padding: 0; margin: 0 0 1rem; column-width: 15rem; column-gap: 2.5rem; }
ul.stikkordliste li { break-inside: avoid; padding: .15rem 0; font-size: .92rem; }
ul.stikkordliste .steder { color: var(--dempet); font-size: .85em; margin-left: .35rem; }
ul.stikkordliste .steder a { text-decoration: underline; text-decoration-color: var(--regel-sterk); text-decoration-thickness: 1px; text-underline-offset: .18em; }
ul.stikkordliste .steder a:hover { text-decoration-color: currentColor; }
.bokstavgruppe h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; padding-bottom: .15rem; border-bottom: 1px solid var(--blekk); }
.register-lenke { margin-top: 2.5rem; color: var(--dempet); font-size: .9rem; font-style: italic; }

/* ---- search ---- */
.pagefind-ui { font-family: var(--serif); --pagefind-ui-primary: var(--lenke); --pagefind-ui-text: var(--blekk); --pagefind-ui-background: var(--papir); --pagefind-ui-border: var(--regel-sterk); --pagefind-ui-tag: var(--papir-dyp); --pagefind-ui-scale: .9; --pagefind-ui-font: var(--serif); }
/* #sok prefix outranks Pagefind's own placeholder rule; .65 of ink on paper keeps > 4.5:1. */
#sok .pagefind-ui__search-input::placeholder { color: var(--blekk); opacity: .65; }

/* ---- deep-link target ---- */
:target { scroll-margin-top: calc(var(--stikk-topp) + 1rem); }
.oppgave:target, .boks:target, figure.figur:target { outline: 2px solid #d9a800; outline-offset: 5px; }

/* ---- running chapter title: the eyebrow becomes a slim sticky bar on segment, chapter and solution
   pages (>= 641 px). The top-of-page site nav scrolls away; the chapter title stays. ---- */
@media (min-width: 641px) {
  main.segment, main.kapittel, main.losning { padding-top: 0; }
  main.segment > .eyebrow, main.kapittel > .eyebrow, main.losning > .eyebrow {
    position: sticky; top: 0; z-index: 5; background: var(--papir); border-bottom: 1px solid var(--regel);
    height: var(--stikk-topp); line-height: var(--stikk-topp); margin: 0 0 1.8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* hanging figure and table numbers: the label sits in the caption's own gutter, the text aligns */
  figure.figur figcaption, figure.ltx_table > figcaption { padding-left: var(--heng); text-indent: calc(-1 * var(--heng)); }
  figure.figur figcaption .ltx_tag, figure.ltx_table > figcaption .ltx_tag { display: inline-block; min-width: var(--heng); text-indent: 0; }
}

/* ---- wide screens: a quiet left sidebar. The segment template carries no segment list, so on a
   segment the sidebar holds what the page has: the progress tick and prev/next, sticky beside the
   text. On the chapter page the segment list itself (with its ticks) is the sidebar. ---- */
@media (min-width: 1180px) {
  /* The same container as the landing page and the course page — `calc(var(--bred) + 2.5rem)`,
     and nothing else. It used to be `--side + --mellomrom + --mal`, which made a reading page
     narrower than the front page by whatever --bred exceeded that sum (13.5rem at the widest
     tier), and meant raising --mal moved only one term of the sum instead of the width anyone
     actually sees. The sidebar keeps its fixed --side; the text column takes the rest. */
  body.segment-side nav.hovednav, body.kapittel-side nav.hovednav,
  main.segment, main.kapittel { max-width: calc(var(--bred) + 2.5rem); }
  main.segment, main.kapittel {
    display: grid; grid-template-columns: var(--side) minmax(0, 1fr); column-gap: var(--mellomrom);
    grid-template-rows: var(--stikk-topp) auto auto 1fr; align-items: start;
  }
  main.segment > *, main.kapittel > * { grid-column: 2; min-width: 0; }
  main.segment > .eyebrow, main.kapittel > .eyebrow { grid-area: 1 / 1 / 5 / 3; align-self: start; margin: 0; width: 100%; }
  main.segment > h1, main.kapittel > h1 { grid-area: 2 / 2; margin-top: 1.8rem; }
  main.segment > video { grid-area: 3 / 2; }
  main.segment > .innhold, main.segment > .merknad { grid-area: 4 / 2; }
  main.segment > nav.prevnext {
    grid-area: 2 / 1 / 5 / 2; align-self: start; position: sticky;
    margin: 1.8rem 0 0; top: calc(var(--stikk-topp) + 1.8rem);
    flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 0; border-top: 0; font-size: .9rem;
  }
  main.segment > nav.prevnext a { max-width: none; }
  main.segment > nav.prevnext a[rel="next"] { text-align: left; margin-left: 0; }
  main.kapittel > .ingress, main.kapittel > .merknad { grid-area: 3 / 2; }
  main.kapittel > nav.prevnext { grid-area: 4 / 2; }
  main.kapittel > .segmentliste {
    grid-area: 2 / 1 / 5 / 2; align-self: start; position: sticky; top: calc(var(--stikk-topp) + 1.8rem); margin-top: 1.8rem;
    max-height: calc(100vh - var(--stikk-topp) - 2.8rem); overflow-y: auto; font-size: .92rem;
  }
  main.kapittel > .segmentliste h2 { margin-top: .2rem; }
  main.kapittel > .segmentliste ol.segmenter li { padding: .4rem 0 .4rem 1.5rem; }
  main.kapittel > .segmentliste ol.segmenter li::before { left: .1rem; }
}

/* ---- phones ---- */
@media (max-width: 640px) {
  html { font-size: 106.25%; }
  main { padding: 1.4rem 1rem 3rem; }
  h1 { font-size: 1.8rem; margin-bottom: 1.3rem; }
  nav.hovednav { padding: .7rem 1rem .6rem; gap: .3rem .85rem; font-size: .62rem; }
  nav.hovednav .nav-sider { display: contents; }   /* the page links flow with the wordmark: two lines, not three */
  /* The field takes the rest of the bar beside the mark, and the dropdown the full width
     under it — at this size a 26rem panel anchored right would hang off the screen. */
  nav.hovednav .navsok { margin-left: auto; flex: 1 1 8rem; min-width: 0; max-width: 60vw; }
  .navsok-felt, .navsok-felt:focus { width: 100%; max-width: none; }
  .navsok-treff { width: auto; max-width: none; left: 0; right: 0; }
  .boks, .ltx_theorem_eksempel, .ltx_theorem_viktig, .ltx_theorem_Rboks, section.oppgaver, .ltx_theorem_oppgaver { padding-left: 1rem; padding-right: .9rem; }
  ul.stikkordliste { column-width: auto; }
  ol.ltx_enumerate, ul.ltx_itemize { padding-left: 1.4rem; }
  li.ltx_item > .ltx_tag_item { left: -1.4rem; width: 1.2rem; }
  ol.kapittelliste .nr { flex-basis: 100%; }
}
/* FUNKSJONELT. An inline formula wider than its paragraph (class rull, set by site.js) scrolls in place. This
   must not be applied to every inline formula: as an inline-block scroll container the math box
   puts its bottom edge on the baseline and lifts every subscript and inline fraction 4-6 px, and
   with the native math display Chromium paints a scrollbar artefact next to every formula — both
   measured on kap9 at 375 px. Without JS the few over-wide formulas overflow as before. */
math.rull { max-width: 100%; overflow-x: auto; }

/* ---- very wide screens. The prose column grows a little more, but not without limit: past roughly
   90 characters the eye loses the line. ---- */
@media (min-width: 1360px) {
  :root { --mal: 52rem; --bred: 84rem; --side: 17rem; }
}
@media (min-width: 1700px) {
  :root { --mal: 58rem; --bred: 92rem; --side: 18rem; }
}

/* Figures, code listings and data tables used to step --brekk past the text column on wide
   screens, on the theory that they want the room. On the page it read as a mistake: the
   listing, the caption, the table and the paragraph above them each started at a different
   x, so the eye had four left edges to track down a single column of prose and nothing lined
   up with anything. One measure, one left edge — a page is easier to read than it is wide.
   Anything genuinely too wide to fit scrolls inside .tabellrull instead of escaping. */

/* ---- dark: the same page after lights-out. Warm near-black paper, unbleached ink, the tints muted.
   Line-art figures are inverted with a hue-rotate so navy stays blue and red stays red. ---- */
/* Mørk modus er stilt inn for FORELESNINGSSALEN, ikke bare for skrivebordet.
 *
 * En projektor kan bare legge lys til; den kan ikke trekke fra. Lys som faller på lerretet
 * legger derfor et konstant gulv A på både tekst og bakgrunn, og kontrasten blir
 * (L_tekst + A) / (L_bakgrunn + A). Med voksende A går den mot 1.
 *
 * Det gir en mot-intuitiv følge, og den er målt: å gjøre BAKGRUNNEN lysere -- det man
 * instinktivt gjør når siden føles for mørk -- hjelper ikke på lerretet. Den gjør det
 * marginalt verre, for i mørk modus er det teksten som bærer lyset. Ved A = 20 % falt
 * kontrasten fra 3.87 til 3.79 av en lysere bakgrunn alene.
 *
 * SVARET ER LYSERE TEKST, IKKE LYSERE BAKGRUNN. Det ble prøvd begge veier 2026-09-30, og
 * bakgrunnen ble rullet tilbake hit igjen: en lysere side spiser kontrasten teksten trenger,
 * og det merkes før den ser lysere ut. Blekket er derimot hevet fra #e7e1d5 til #f2eee4, og
 * det er hele endringen som ble stående.
 *
 *   brødtekst, skjerm    13.47:1 -> 15.14:1
 *   brødtekst, A = 20 %     3.87 ->    4.26
 *
 * Begge er de beste tallene av de fire kombinasjonene som ble målt, med nøyaktig den
 * bakgrunnen siden hadde før.
 *
 * En advarsel til den som vil prøve igjen: MÅL I L*, IKKE I LUMINANS. Første forsøk hevet
 * siden fra 0.99 % til 1.53 % luminans -- «+56 %», som høres ut som mye. I L*, som er det
 * øyet leser, var det 8.9 -> 12.8, altså ΔL* 3.9: på grensen av hva som er merkbart side om
 * side, og usynlig når man sammenligner mot hukommelsen. Forfatteren så ingen forskjell.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papir: #1b1916; --papir-dyp: #232019; --blekk: #f2eee4; --dempet: #b3ab9e;
    --regel: #3d3830; --regel-sterk: #6f675b; --lenke: #9dbde8; --kommentar: #a29a8c;
    --eksempel-bg: #20283a; --eksempel-kant: #93b4ea;
    --viktig-bg: #3a2420;   --viktig-kant: #eba394;
    --oppgaver-bg: #1f2f22; --oppgaver-kant: #98d098;
    --rboks-bg: #27241f;    --rboks-kant: #8a8275;
    --mal-bg: #3a3218; --ib-bg: #3a3218; --ib-tekst: #e8d98a; --video-bg: #000;
  }
  ::selection { background: #35507a; color: #fff; }
  figure.figur svg, svg.ltx_picture, figure.ltx_figure svg { filter: invert(.9) hue-rotate(180deg); }
  .oppgave, .ltx_theorem_oppgave { border-bottom-color: #3a4a3c; }
  details.losning { border-color: #3f5642; }
  .oppgave:target, .boks:target, figure.figur:target { outline-color: #d9b83a; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  header.topp, nav.prevnext { display: none; }
  details.losning { display: block; }
  details.losning > summary { display: none; }
  main.segment, main.kapittel { display: block; }
  .eyebrow { position: static; }
  body { background: #fff; color: #000; }
}