/* CV-byggare — app styles.
 *
 * The visual language is the TCB brand profile (brand/design-profile.md; the values are
 * brand/tokens.css, mapped into local custom properties here): warm paper, petrol accent, Lora
 * for headings, Karla for body — both self-hosted from /shared/fonts, never a CDN. The finished
 * CV (#print-area) does NOT follow the brand: it is the person's document (spec.md §9.1).
 *
 * Responsive strategy (app-ux-guide.md §3): mobile-first base styles, desktop layered on with
 * min-width queries. Input is detected separately from size: (pointer: coarse) widens targets to
 * 44 px, (hover: hover) is the only place hover effects live.
 *
 * Reading direction (spec.md §12.2 rule 4): LOGICAL properties throughout — inline-start, never
 * left — so an interface language served right-to-left mirrors without a second stylesheet.
 *
 * Everything works at 200 % zoom on a 360 px screen (spec.md §14): fluid type via clamp(), no
 * fixed widths, no horizontal scroll.
 *
 * Contrast: every text/background pair >= 4.5:1 (brand/design-profile.md §3). --amber never
 * carries body text. Nothing carries meaning by colour alone — every danger colour is paired
 * with a word.
 */

/* ── tokens, from brand/tokens.css ────────────────────────────────────────── */

:root {
  --bg:           #f6f2ea;   /* --brand-paper */
  --surface:      #fdfbf7;   /* --brand-surface */
  --surface-2:    #efe9dd;
  --ink:          #16191c;   /* --brand-ink */
  --ink-2:        #3f454b;   /* --brand-ink-2 */
  --muted:        #6b6557;   /* --brand-muted, 5.2:1 on paper */
  --line:         #d8d0bf;   /* --brand-line-strong */
  --line-2:       #e5dfd2;   /* --brand-line */
  --accent:       #0f4f5e;   /* --brand-petrol */
  --accent-hover: #0b3d49;   /* --brand-petrol-deep */
  --accent-ink:   #ffffff;
  --accent-2:     #e4eef0;
  --link:         #0d5566;
  --amber:        #a8763e;   /* decoration and hairlines only */
  --danger:       #93000e;
  --danger-bg:    #fbeceb;
  --warn:         #6a4a00;
  --warn-bg:      #f9f0d8;
  --ok:           #1c5c30;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(28, 24, 18, .05), 0 1px 6px rgba(28, 24, 18, .04);
  --tap: 44px;
  --gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --pad: clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
  --measure: 36rem;

  --font: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;

  /* the shared widgets (ui.css) follow the app's face */
  --ui-font: var(--font);

  /* LIGHT-ONLY, as the other app in this repository (decisions.md 18, extended to the apps
   * 2026-08-21): the warm brand palette is the product's face. These unconditional
   * declarations outrank ui.css's prefers-color-scheme block. */
  color-scheme: light;
  --ui-muted: #5c564a;
  --ui-line: #cfc7b8;
  --ui-danger: #b3261e;
  --ui-focus: #0b57d0;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* §14 bullet 1 is broken by a WORD as well as by a box. Swedish compounds do not
     fit a narrow column at 200 % text: measured at 360 px with the standard font
     size at 32 px, "omsorgsprogrammet" in the example profile text spilled 116 px
     out of its 164 px box and took the page to scrollWidth 378/360 on the CV
     screen. `break-word` breaks only when nothing else will fit, so ordinary
     wrapping — and the printed CV — are unchanged. */
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 .75rem; text-wrap: pretty; }
.lead { font-size: 1.1rem; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }

a { color: var(--link); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: .5rem; inset-block-start: -4rem; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: .6rem .9rem; border: 2px solid var(--accent); border-radius: var(--radius);
}
.skip-link:focus { inset-block-start: .5rem; }

.noscript { max-width: var(--measure); margin: 2rem auto; padding: 0 1rem; }
.boot { padding: 2rem var(--pad); color: var(--ink-2); }

/* ── app bar ──────────────────────────────────────────────────────────────── */

.appbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem;
  padding: .65rem var(--pad);
  background: var(--surface);
  border-block-end: 1px solid var(--line-2);
}
.appbar__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent-hover);
  display: flex; align-items: center; gap: .55rem;
}
.appbar__name::before {
  content: "";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  background: url("/favicon.svg") center / contain no-repeat;
  border-radius: 6px;
}

/* ── save bar and banners ─────────────────────────────────────────────────── */

.savebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .5rem var(--pad);
  background: var(--surface-2);
  border-block-end: 1px solid var(--line-2);
}
.savebar:empty { display: none; }

.banners { padding: 0 var(--pad); }
.banner {
  margin: .75rem 0 0;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.banner--danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.banner--dev { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); font-size: .9rem; }
.banner--notice { color: var(--ok); }

/* ── content ──────────────────────────────────────────────────────────────── */

main { padding: var(--pad); }
.stack { display: flex; flex-direction: column; gap: var(--gap); max-width: var(--measure); }
.prose > * { margin-block: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.card--orientation { border-inline-start: 4px solid var(--amber); }
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: .5rem; }

/* ── controls ─────────────────────────────────────────────────────────────── */

button, .btn {
  font: inherit;
  min-height: var(--tap);
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn--quiet { background: transparent; border-color: transparent; color: var(--link); text-decoration: underline; }
button:disabled { opacity: .55; cursor: not-allowed; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  button:not(.btn--primary):not(:disabled):hover { background: var(--surface-2); }
}
@media (pointer: fine) {
  button, .btn { min-height: 38px; }
}
@media (pointer: coarse) {
  button, .btn { min-height: var(--tap); }
  .card__actions { gap: 1rem; }
}

/* the primary action in thumb reach on a narrow coarse screen (app-ux-guide.md §3) */
@media (pointer: coarse) and (max-width: 720px) {
  .card__actions:has(.btn--primary) {
    position: sticky; inset-block-end: 0;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
    padding-block: .75rem;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  }
}

/* desktop: wider measure, the actions in the reading flow */
@media (min-width: 900px) {
  :root { --measure: 44rem; }
  main { padding-block: 2rem; }
}

/* ── fields: one decision, explained in place ─────────────────────────────── */

.field { margin-block-end: 1rem; }
.field > label {
  display: block;
  font-weight: 600;
  margin-block-end: .15rem;
}
.field__hint {
  margin: 0 0 .35rem;
  font-size: .9rem;
  color: var(--muted);
}
.field__example { display: block; }
.field__error {
  margin: .35rem 0 0;
  font-size: .9rem;
  color: var(--danger);
}
.field__error::before { content: "⚠ "; }

.input {
  font: inherit;
  width: 100%;
  min-height: var(--tap);
  padding: .5rem .7rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.input--area { min-height: 5rem; resize: vertical; }
select.input { min-height: var(--tap); }

.field-pair { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.field-pair > .field { flex: 1 1 10rem; }

.field--check { margin-block-end: .75rem; }
.check { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); }
.check__box { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--accent); }
/* A checkbox label is a whole row of the CV — "Praktik på äldreboende · Björkgårdens …" — and a
   flex item will not shrink below its longest word unless it is told to. Measured at 180 CSS px,
   which is 200 % zoom on a 360 px phone (spec.md §14): without these two the selection card
   pushed the page sideways. */
.check > label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.fieldset {
  margin: 0 0 1rem;
  padding: var(--pad);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}
.fieldset > legend {
  padding-inline: .4rem;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ── chips: multi-select that is never hover-only and never colour alone ──── */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  text-align: start;
}
.chip__mark { font-weight: 700; color: var(--muted); }
.chip[aria-pressed="true"] {
  background: var(--accent-2);
  border-color: var(--accent);
  font-weight: 600;
}
.chip[aria-pressed="true"] .chip__mark { color: var(--accent); }
.chips--stora .chip { padding: .7rem 1rem; }

/* ── rows, points and the phrase bank ─────────────────────────────────────── */

.rader { display: flex; flex-direction: column; gap: .75rem; }
.rad { background: var(--bg); }
.rad__remove { margin-block-start: .25rem; }

.punkter { display: flex; flex-direction: column; gap: .25rem; }
.punkt { display: flex; align-items: flex-start; gap: .5rem; }
.punkt > .field { flex: 1 1 auto; margin-block-end: .5rem; }

.forslag {
  margin-block: .5rem;
  padding: .6rem .8rem;
  border-inline-start: 3px solid var(--amber);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.forslag__titel { margin: 0 0 .4rem; font-size: .9rem; color: var(--muted); }
.forslag__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.forslag__val { text-align: start; width: 100%; }
.forslag__varfor { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }

.exempel { margin: .4rem 0 0; padding-inline-start: 1.2rem; font-size: .9rem; color: var(--muted); }

.period { margin-block-end: .5rem; }

.card--rule { border-inline-start: 4px solid var(--accent); }
.rule__lead { font-weight: 600; }
.lead-hint { color: var(--ink-2); }

/* The sentence builder's word counter past G-09's sixty. The number itself says it; the weight
   and the colour only reinforce, so nothing is carried by colour alone. */
.over-gransen { font-weight: 600; color: var(--danger); }

/* ── the CV screen: the photo, if it is turned on (spec.md §15.2) ─────────── */
/* The preview is roughly the size the photo prints at — 28 mm on paper is about 106 px —
   because seeing it small here is seeing what the employer sees. `max-width: 100%` and
   `height: auto` because the card is 360 px wide on the phone §14 measures. */

.foto__bild {
  display: block;
  width: 7rem;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  margin-block: .5rem;
}
/* A file input is as wide as the browser makes it and overflows a 360 px card at 200 % text.
   Nothing else about it is styled: the button inside belongs to the browser, and restyling it
   is how an app ends up with one that no longer offers the camera on a phone. */
.foto__val { max-width: 100%; }

/* ── the CV screen: the section order ─────────────────────────────────────── */
/* Logical properties throughout, so a right-to-left interface needs no second rule
   (spec.md §12.2 rule 4). The buttons wrap under the label on a narrow screen rather
   than shrinking below the 44 px target. */

.ordning__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.ordning__rad > .card__actions { margin-block-start: 0; }

/* ── the review (spec.md §5.3) ────────────────────────────────────────────── */
/* Tone is the requirement here, not decoration: what is right reads as ordinary text, the
   Viktigt card is marked by a word and a hairline rather than by a field of red, and the tips
   are a closed <details>. Nothing on this screen is disabled and nothing is a score. */

.granska__ratt { font-weight: 600; }
.granska__klart { color: var(--ok); font-weight: 600; }

.card--viktigt { border-inline-start: 4px solid var(--danger); }
.card--viktigt > h3 { margin-block-start: 0; color: var(--danger); }

.granska__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.granska__fynd > p { margin-block-end: .15rem; }
.granska__fynd > .card__actions { margin-block-start: 0; }

/* The default disclosure marker is kept — it is the affordance that says the line opens, and a
   flex or grid display on <summary> removes it in every engine. Height comes from padding. */
.granska__tips > summary {
  cursor: pointer;
  padding-block: .6rem;
  color: var(--link);
}
.granska__tips[open] > summary { margin-block-end: .5rem; }
.granska__info { color: var(--ink-2); font-size: .95rem; }
.granska__info > h3 { margin-block-end: .3rem; }

/* ── Överblick: the thirty seconds, shown (spec.md §5.4) ──────────────────── */

.overblick__papper {
  background: #fff;
  color: #111;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  max-height: 60vh;
  overflow: auto;
}
/* Everything below the top third, held back — the point of the demonstration. The answers below
   are text, so nothing here is carried by the dimming alone. */
.overblick__papper--dimmad .cv-dok__sektion { opacity: .22; }
.overblick__styr { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.overblick__nedrakning { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.overblick__svar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.overblick__rad { display: flex; align-items: baseline; gap: .6rem; }
.overblick__mark { font-weight: 700; }
.overblick__rad[data-ok="true"] .overblick__mark { color: var(--ok); }
.overblick__rad[data-ok="false"] .overblick__mark { color: var(--danger); }
.overblick__saknas { color: var(--ink-2); }

/* ── the document itself (spec.md §9.1) ───────────────────────────────────── */
/* NOT the brand. One column, one typeface, real text, dates at the end of the line, no logo and
   no mark of ours: it is the person's document and they are handing it to an employer. The type
   sizes are em-based so the offscreen one-page measurement can set one font-size and have the
   whole document follow it.

   THE PRINTED TYPE SIZE IS DECLARED ONCE, here, and read in two places: the `@media print` block
   at the bottom of this file, and the offscreen measurement container that `src/ui/dokument-vy.js`
   builds for G-22. It used to be a literal in both, which is how they came to disagree — measured
   2026-09-20 in Chrome 153: the print block set 10.5pt on `#print-area` while `.cv-dok` inside it
   re-declared `font-size: 1rem`, so the printed document came out 16/14 = 14 % larger than the
   document that had been measured, and the repository's own specimen printed on two pages. One
   declaration, two `var()` reads, and the pair cannot drift again. */

:root {
  --cv-utskrift-storlek:   10.5pt;
  --cv-utskrift-radavstand: 1.35;
}

.cv-dok {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #111;
}
.cv-dok__topp { margin-block-end: 1.1em; }
.cv-dok__namn { font-family: inherit; font-size: 1.6em; margin: 0 0 .1em; letter-spacing: 0; }
.cv-dok__malroll { font-size: 1.1em; margin: 0 0 .5em; }
.cv-dok__profiltext { margin: 0 0 .5em; }
.cv-dok__kontakt { margin: 0; font-size: .95em; }
.cv-dok__foto { float: inline-end; width: 28mm; margin-inline-start: 1em; border-radius: 2px; }
.cv-dok__sektion { margin-block-end: 1em; }
.cv-dok__rubrik {
  font-family: inherit;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .35em;
  padding-block-end: .15em;
  border-block-end: 1px solid #999;
}
.cv-dok__rad { margin-block-end: .6em; break-inside: avoid; }
.cv-dok__radtopp { display: flex; justify-content: space-between; gap: 1em; margin: 0; }
.cv-dok__titel { font-weight: 600; }
.cv-dok__datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-dok__under { margin: 0; font-size: .95em; color: #333; }
.cv-dok__punkter { margin: .2em 0 0; padding-inline-start: 1.1em; }
.cv-dok__lista { margin: 0 0 .25em; }

/* G-22's offscreen measurement (dokument-vy.js): the container owns the print type size and the
   document inherits it, so the number measured is the printed page and not the screen. The same
   two lines appear under `@media print` for `#print-area .cv-dok`, and for the same reason — a
   `.cv-dok` that keeps its own screen type size is a document nobody measured. */
.cv-matt .cv-dok { font-size: inherit; line-height: inherit; }

/* ── Lyssna (spec.md §8.5) ────────────────────────────────────────────────── */
/* One button per step, at the top of the panel. It is ABSENT where the device has no voice for
   the interface language — never present and inert — so there is no disabled state to style. */

.lyssna { display: block; }
.lyssna:empty { display: none; }
.lyssna__knapp { padding-inline: 0; }
.lyssna__knapp::before { content: "▶ "; }
.lyssna__knapp[aria-pressed="true"]::before { content: "■ "; }

.steg > .lyssna { margin-block-end: .25rem; }

/* ── the download (spec.md §9.3, §9.4) ────────────────────────────────────── */
/* Four ways out, each with the one line that says what it is for. The primary is the PDF; the
   rest are ordinary buttons, because a person applying through a web form needs the text just
   as much and neither is a fallback from the other. */

.nedladdning__val { margin-block-start: .75rem; }
.nedladdning__val > .field__hint { margin-block: .25rem 0; }
.nedladdning__ruta { margin-block-start: .35rem; font-family: var(--font); }
.nedladdning__text:empty { display: none; }

/* ── the one dialog ───────────────────────────────────────────────────────── */

.dialog {
  max-width: min(32rem, calc(100vw - 2rem));
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.dialog::backdrop { background: rgba(22, 25, 28, .45); }

/* ── print: the CV, and nothing else (spec.md §9.1, §9.2, §9.3) ───────────── */
/* THE PDF IS THIS STYLESHEET. `window.print()` against these rules is the whole mechanism — no
 * library, no template gallery, no colours to choose, no branding of ours (§19 decision 13).
 * What comes out is one column of real, selectable text, which is the same property that makes
 * it readable in thirty seconds and parseable by an applicant-tracking system (§9.2).
 *
 * Everything but #print-area is hidden, and #print-area is filled only by src/ui/utskrift.js —
 * which also installs a `beforeprint` guard, so a Cmd+P before the button has been used prints
 * a sentence rather than a blank sheet.
 *
 * TWO PAGES MUST DEGRADE WELL, because G-22 warns and never blocks (§5.5) and a person on a
 * deadline will download anyway. §9.1 names the four failures and each has a rule here: a row
 * split across the break, a heading alone at the bottom of a page, an orphaned line, and a
 * second sheet that does not say whose CV it is — the last one in the `@page` margin boxes
 * above, which `src/ui/utskrift.js` fills and `@page :first` keeps off page one.
 *
 * A SECTION IS NOT AN UNBREAKABLE BLOCK, and §9.1's sentence that said it was has been corrected
 * (dated note there, 2026-09-20). `break-inside: avoid` on a whole `.cv-dok__sektion` is a
 * promise the printer keeps by emptying the page in front of it: measured here in Chrome 153
 * against the specimen plus twelve more erfarenhet rows, page one came out with 33 words and
 * 226 mm of blank paper, and the contact line — phone, e-mail, town — was stranded on page two.
 * That is a worse version of every failure §9.1 introduced these rules to prevent. The two the
 * section rule was standing in for are bought by the two rules that remain: a row never splits
 * (`.cv-dok__rad`, `.cv-dok__lista`), and a heading never ends a page (`break-after: avoid` on
 * `.cv-dok__rubrik`, which glues it to its first entry). With the section rule dropped the same
 * document prints page one 272 words full.
 *
 * THE TYPE SIZE IS DECLARED ONCE, on `:root` above, and read here and by the offscreen container
 * in src/ui/dokument-vy.js, because G-22 measures THIS page and not the screen. It used to be a
 * literal in both places and they disagreed; `#print-area .cv-dok` below is the line that makes
 * the document actually take it.
 */

#print-area { display: none; }

/* THE RUNNING IDENTIFICATION ON PAGE TWO AND AFTER — spec.md §9.1, and the one place this app
 * uses a mechanism the repository previously believed did not exist.
 *
 * `apps/urvalskalkyl/src/ui/print.js` says *"the `@page` margin boxes that would do it are
 * implemented by no browser"*. MEASURED HERE 2026-09-19, and it is no longer true of Chromium:
 *
 *   node cdp.mjs about:blank print mb5.js      # @page margin box + counter(page)/counter(pages)
 *   -> page 1: (nothing)   page 2: "Sida 2 av 2" + "Anna Andersson · Vårdbiträde"
 *
 * Three things were verified together, because the design needs all three: a margin box renders;
 * `counter(page)`/`counter(pages)` resolve inside it; and `var()` substitutes a whole token
 * stream, counters included, so the SENTENCE stays in the document-language registry and CSS
 * holds no words (spec.md §12.2 rule 1). `utskrift.js` sets the two properties through CSSOM,
 * which `style-src 'self'` permits and which an inline <style> would not be.
 *
 * VERIFIED IN CHROME 153.0.8010.50 AND NOWHERE ELSE — the version this machine runs; the number
 * here read 152 until 2026-09-19, when the done-check re-ran the measurement against a real CV
 * (`Page.printToPDF` -> two pages -> `pdftotext -f 2` -> "Amina Yusuf · Vårdbiträde" and
 * "Sida 2 av 2") and corrected it. Safari and Firefox are unchecked. Where a margin box
 * is unsupported the declaration simply does not render, which is the right failure direction:
 * the page-two line is absent, never wrong. Nothing else on the sheet depends on it.
 *
 * `:first` is what keeps page one clean — the one-page CV the whole document is designed to be
 * carries no line of ours at all (§9.1: no logo, no footer, no "Skapad med CV-byggare"). */

@page {
  size: A4;
  margin: 18mm 20mm;
  @bottom-left { content: var(--cv-sidfot, ""); font-size: 8pt; color: #333; }
  @bottom-right { content: var(--cv-sida, ""); font-size: 8pt; color: #333; }
}

@page :first {
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

@media print {
  body > *:not(#print-area) { display: none !important; }
  body { background: #fff; color: #000; }

  #print-area {
    display: block;
    font-size: var(--cv-utskrift-storlek);
    line-height: var(--cv-utskrift-radavstand);
    color: #000;
  }

  /* THE LINE THAT MAKES THE SIZE ABOVE REACH THE DOCUMENT. `.cv-dok` declares its own screen
   * type size and is a CHILD of #print-area, so without this it never inherits the print one
   * and the printed page is not the page that was measured. */
  #print-area .cv-dok { font-size: inherit; line-height: inherit; }

  /* No paragraph is left with one line on the wrong side of a fold. */
  #print-area p, #print-area li { orphans: 3; widows: 3; }

  /* Every entry stays whole. NOT the section — see the note above the @page rules. */
  #print-area .cv-dok__rad,
  #print-area .cv-dok__lista { break-inside: avoid; page-break-inside: avoid; }

  /* A heading never ends a page: it goes with what it introduces. */
  #print-area .cv-dok__topp,
  #print-area .cv-dok__rubrik { break-after: avoid; page-break-after: avoid; }
  #print-area .cv-dok__rubrik { break-inside: avoid; border-block-end-color: #000; }

  /* The top third of the PRINTED page — the region §3 reserves and Överblick measures. */
  #print-area .cv-dok__namn { font-size: 1.7em; }
  #print-area .cv-dok__under { color: #222; }
  #print-area .cv-dok__foto { width: 26mm; }

  /* The browser's own colour adjustment must not drop the hairlines under the headings. */
  #print-area { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}