/* =========================================================================
   sporlaus.css — merket og fanene.
   =========================================================================

   KJELDA ER TO FILER, OG BEGGE ER VEDTEKNE:
   `comms/vedlegg/lydbok-skisse-0907/stil.md` (paletten, vedteken av Roger
   07.09 for heile Sporlaus-familien) og `comms/vedlegg/sporlaus-hub/` (dei
   åtte skissene). Der skissa og rulingane er usamde, vinn rulingane: lys
   modus, omrissknappar, éin aksent per skjerm, botnlinja på kvar fane.

   HAN LIGG OVER `hub.css` OG ERSTATTAR HAN IKKJE.
   Koplingsskjemaet og FAQ-en er flytte UENDRA, med kvar id og kvar klasse i
   behald, og `hub.js` bind seg til dei. Ei ny stilfil som kasta `hub.css`
   ville kasta oppsettet deira med. Denne fila set difor paletten på nytt
   som variablar, og teiknar det som er NYTT: merkeraden, fanene, romma,
   mappekorta og botnlinja.

   SKRIFTENE ER IKKJE HENTA ENNO. Ruling 08.09: DM Serif Display og DM Sans
   skal sjølvhostast som woff2 i `skald-hub/fonts/`, fordi CSP-en sender
   `style-src 'self'` og `font-src 'self'` og eit stilark frå Google blir
   stoppa utan eit ord. Til filene er inne står reservestakken designaren
   sjølv skreiv, og han er ikkje ein naudløysing: overskrifter i ein serif,
   resten i ein grotesk.
   ========================================================================= */

.sporlaus {
  /* Paletten frå stil.md. Aksenten er den einaste sterke fargen. */
  --sp-botn: #f4eee3;
  --sp-kort: #ece2d2;
  --sp-papir: #ece2d2;        /* arket under kortbileta; sjå § kortbilete */
  --sp-kort2: #e4d7c3;
  --sp-kant: #cdbfa9;
  --sp-kant-lys: #ded3c1;
  --sp-tekst: #2b2320;
  /* MØRKNA FRÅ #7a6a5c, OG DET ER EI MÅLING OG IKKJE EIN SMAK.
     `stil.md` seier #7a6a5c, og bestillinga krev 4,5:1 på tekst. Målt på det
     som er teikna: #7a6a5c held 4,50 mot sidebotnen, men berre 4,05 mot
     kortet og 3,66 mot det kvilande skiljearket, som begge er mørkare
     flater. #6c5c4e er den LYSASTE verdien som held 4,5 mot alle tre
     (5,55 / 4,99 / 4,52), altso den minste endringa som oppfyller kravet.
     Roger eig paletten; dette er ei endring han skal sjå. */
  --sp-dempa: #6c5c4e;
  --sp-aksent: #d5683a;
  --sp-aksent-moerk: #b5522a;

  --sp-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sp-sans: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  background: var(--sp-botn);
  color: var(--sp-tekst);
  font-family: var(--sp-sans);
}

/* MØRK MODUS ER UTLEIDD, IKKJE TEIKNA.
   `stil.md` seier «mørk modus er ikkje teikna; ikkje lag han før Roger ber om
   det». Roger bad om det 08.09 («la mørk modus være»), so han står her:
   same struktur, same aksentrolle, botnen snudd. Kvart par er MÅLT mot
   kravet på 4,5:1 for tekst; tala står i test-reports/2026-09-08-sporlaus/.
   Aksenten er lysare enn i lys modus, fordi #d5683a på ein mørk botn måler
   under kravet medan #e8875c held. */
[data-theme="dark"] .sporlaus,
.sporlaus[data-theme="dark"],
[data-theme="dark"].sporlaus {
  --sp-botn: #201b18;
  --sp-kort: #2b2320;
  --sp-kort2: #372e29;
  --sp-kant: #4b3e37;
  --sp-kant-lys: #3a302b;
  --sp-tekst: #f4eee3;
  --sp-dempa: #b9a694;
  --sp-aksent: #e8875c;
  --sp-aksent-moerk: #f0a483;
}

.sporlaus h1,
.sporlaus h2,
.sporlaus h3 { font-family: var(--sp-serif); font-weight: 400; }

.hovudknappar { display: flex; align-items: center; gap: 10px; flex: none; }

.sporlaus .theme-btn {
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sp-kant-lys);
  border-radius: 999px;
  background: transparent;
  color: var(--sp-tekst);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.sporlaus .theme-btn:hover { border-color: var(--sp-kant); }

/* -------------------------------------------------------------------------
   MERKERADEN
   ------------------------------------------------------------------------- */

/* `hub.css` linje 120 set `main, .hub-header, .hub-footer { max-width: 46rem;
   margin: 0 auto; }`. 46rem er 736 px, og det var grunnen til at dei seks
   mappekorta målte 90 px kvar i staden for 178 og at fanerada vart avskoren:
   heile sida låg i ei spalte laga for ein artikkel. Målt på skjermbiletet
   08.09, ikkje slutta av å lese CSS-en. */
.sporlaus main,
.sporlaus .hub-header,
.sporlaus .hub-footer {
  max-width: none;
  margin: 0;
}

.sporlaus .hub-header {
  background: var(--sp-botn);
  border-bottom: 0;
  padding: 36px 56px 0;
  text-align: left;
}

.merkerad {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.sporlaus .wordmark {
  font-family: var(--sp-serif);
  font-size: 38px;
  line-height: 1.05;
  color: var(--sp-tekst);
  margin: 0;
}

.sporlaus .hub-header .tagline {
  margin: 7px 0 0;
  font-size: 14.5px;
  color: var(--sp-dempa);
  letter-spacing: 0.2px;
}

/* SPRÅKVALET ER EIT NEDTREKK SIDAN 09.09. Sjå kommentaren i markupen for
   kvifor; her er berre forma. Etiketten «Languages» står ved sida av og ikkje
   over, fordi merkeraden på telefon alt har fått ei linje til. */
.sporlaus .lang-switch { display: flex; align-items: center; gap: 8px; flex: none; }

.sporlaus .lang-merke {
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--sp-dempa);
  white-space: nowrap;
}

.sporlaus .lang-val {
  height: 44px;
  padding: 0 30px 0 14px;
  border: 1px solid var(--sp-kant-lys);
  border-radius: 999px;
  background: transparent;
  color: var(--sp-tekst);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  /* Nettlesaren sin eigen pil er ulik i kvar motor og teiknar seg i ein
     systemblå som ikkje finst i paletten. Han blir slått av og erstatta av
     ein vinkel i `--sp-dempa`, teikna som ein data-URI so `img-src 'self'
     data:` slepp han gjennom. */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236c5c4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.sporlaus .lang-val:hover { border-color: var(--sp-kant); }
.sporlaus .lang-val:focus-visible { outline: 2px solid var(--sp-aksent); outline-offset: 2px; }

/* Pila må skifte farge med paletten. Same fil, berre `--sp-dempa` i mørk. */
[data-theme="dark"] .sporlaus .lang-val {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b9a694' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Lista som opnar seg blir teikna av systemet, ikkje av sida. Fargane her er
   det einaste sida rår over, og utan dei blir svart tekst på svart i mørk
   modus i nokre motorar. */
.sporlaus .lang-val option {
  background: var(--sp-botn);
  color: var(--sp-tekst);
}

/* Dei to ærlege linjene frå det gamle hovudet. Dei står no på Velkomen, og
   dei er dempa av same grunn som før: dei er ein STÅANDE eigenskap ved alt
   her, ikkje eit varsel om noko som nettopp gjekk gale. */
.sporlaus-aatvaring {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-dempa);
  max-width: 780px;
}

/* -------------------------------------------------------------------------
   FANENE SOM SKILJEARK I EIN RINGPERM (Roger, 08.09)

   «Tenk skiljeark i ein ringperm. Du trykkjer på eitt skiljeark, so ser du
   alt inni. Du ser litt av overskrifta.»

   Difor er dette ikkje ei rad med understreka ord. Fanen er eit STYKKE
   PAPIR som stikk opp av arket under: han har kant på tre sider, runda
   hjørne oppe, og ingen kant i botnen. Den valde fana har SAME botnfarge som
   arket og ligg oppå kanten hans, so dei to blir eitt ark. Dei andre ligg i
   ein mørkare tone og ser ut til å liggje bak.

   Tokena er dei som alt fanst: arket er `--sp-botn`, skiljearka bak er
   `--sp-kort2`, og korta oppå arket er `--sp-kort`. Ingen ny farge, og
   framleis éin aksent per skjerm: han er streken øvst på det valde
   skiljearket.

   `role="tablist"` med piltastar er ikkje pynt: seks faner er seks stader
   innhaldet kan gøyme seg, og ein som ikkje brukar mus må kunne gå mellom
   dei utan å tabulere gjennom heile FAQ-en.
   ------------------------------------------------------------------------- */

.faner {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 26px 56px 0;
  padding: 0 14px;
  border-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.faner::-webkit-scrollbar { display: none; }

.fane {
  appearance: none;
  position: relative;
  /* 44 px er kravet i briefen. Den valde blir 52 og stikk opp. */
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--sp-kant-lys);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--sp-kort2);
  color: var(--sp-dempa);
  white-space: nowrap;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: height 0.12s, background-color 0.12s;
}
.fane:hover { color: var(--sp-tekst); background: var(--sp-kort); }

.fane[aria-selected="true"] {
  height: 52px;
  /* Same farge som arket, og ein piksel ned over kanten hans: skiljearket og
     arket blir eitt stykke papir, slik dei er i ein perm. */
  background: var(--sp-botn);
  color: var(--sp-tekst);
  font-weight: 500;
  border-color: var(--sp-kant);
  border-top: 3px solid var(--sp-aksent);
  margin-bottom: -1px;
  z-index: 2;
}
.fane:focus-visible {
  outline: 2px solid var(--sp-aksent);
  outline-offset: -4px;
  border-radius: 14px 14px 0 0;
}

/* -------------------------------------------------------------------------
   ARKET

   Rommet er sjølve arket skiljearket sit på: kant heile vegen rundt, runda
   hjørne unnateke oppe til venstre, der det fyrste skiljearket møter det.
   ------------------------------------------------------------------------- */

.sporlaus-hovud {
  max-width: none;
  margin: 0;
  padding: 0;
}

.fanerom {
  background: var(--sp-botn);
  border: 1px solid var(--sp-kant);
  border-radius: 0 20px 20px 20px;
  margin: 0 56px 30px;
  padding: 38px 40px 26px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* Eit rom som er gøymt skal vere heilt borte, ikkje berre usynleg: eit
   anker i eit gøymt rom kan ikkje rullast til, og ei lenkje dit ville
   sett ut som ho ikkje gjorde noko. Difor opnar `faner.js` rommet FØRST. */
.fanerom[hidden] { display: none !important; }
.fanerom:focus-visible { outline: none; }

.sporlaus-tittel { font-size: 36px; line-height: 1.15; margin: 0; }

.sporlaus-lede {
  font-size: 17px;
  line-height: 1.72;
  max-width: 780px;
  margin: 0;
}

/* -------------------------------------------------------------------------
   HER LÅG MAPPEKORTA

   `.mappegrid`, `.mappekort`, `.mappeikon`, `.mappekort-namn` og
   `.mappekort-linje` stod her til 09.09.2026. Roger las sida på ein iPhone,
   og seks kort som sa det same som dei seks fanene var eit andre
   navigasjonssystem på ein skjerm som knapt hadde plass til eitt. Fanene er
   einaste navigasjonen no.

   Teksten er ikkje borte: `arkiv/mappekort-tekst-2026-09-09.json` har alle
   tolv linjene, med sha256 av markupen som gjekk ut. Reglane er raderte og
   ikkje kommenterte ut, fordi ein utkommentert regel er ein regel nokon slår
   på att utan å vite kvifor han vart av.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   BOTNLINJA

   På kvar fane, ikkje éin gong nedst på sida: ruling 08.09 12:47. Ei fane
   er ei side for den som les henne.
   ------------------------------------------------------------------------- */

.sporlaus-botn {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--sp-kant-lys);
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--sp-dempa);
}
.sporlaus-botn p { margin: 0; }

/* -------------------------------------------------------------------------
   TELEFONEN

   RETTA 09.09 ETTER AT ROGER LAS SIDA PÅ EIN IPHONE, OG KVAR RETTING ER EI
   MÅLING. Fyrste utgåva sa at dei seks fanene «rullar sidelengs i staden for
   å brytast i to rader», og grunngav det med at to rader ser ut som to nivå.
   Det heldt ikkje mot skjermen: sidelengs rulling betyr at tre av seks faner
   ligg utanfor vindauget, og den fjerde låg 70,9 px ute, den femte 193,8 og
   den sjette 303,0. Ein navigasjon du ikkje ser er ingen navigasjon, og etter
   at mappekorta gjekk er fanene den einaste. To rader vann.

   Tala under er målte i webkit på 390 x 844 av
   `scripts/hub-innanfor-skjermen.mjs`, ikkje rekna ut frå CSS-en.
   ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .sporlaus .hub-header { padding: 20px 18px 0; }

  /* MERKERADEN SNUR (Roger 09.09): dei tre knappane øvst i éi rad, so
     «Sporlaus» og slagordet under. På 390 px låg alt på éi linje, og då stakk
     English 31,8 px og mørk/lys-brytaren 142,8 px utanfor høgre kant.
     `column-reverse` og ikkje ei ny rekkjefølgje i markupen: på skrivebordet
     står merket til venstre og knappane til høgre, og den DOM-en er rett for
     ein skjermlesar begge stader. */
  .merkerad {
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
  }
  .hovudknappar { gap: 8px; }
  .sporlaus .lang-switch { gap: 8px; }
  /* Høgda står på 44 px — det er fingerkravet i bestillinga, og det er ikkje
     det som gjorde knappane for store. Breidda er, og ho er padding og
     skriftgrad. Dei tre måler 258 px av 350 tilgjengelege. */
  .sporlaus .lang-merke { font-size: 12.5px; }
  .sporlaus .lang-val,
  .sporlaus .theme-btn { padding: 0 26px 0 12px; font-size: 14px; }
  .sporlaus .theme-btn { padding: 0 14px; }

  /* FANENE BRYT I TO RADER, og ingen av dei rullar ut av syne. `overflow-x`
     står att som `visible`, elles ville `auto` framleis laga eit rullefelt
     rundt to rader som ikkje treng eitt. */
  .faner {
    margin: 18px 18px 0;
    padding: 0 6px;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 6px;
  }
  /* 13 px og 10 px padding er den minste innstramminga som får dei tre
     breiaste — Språkappar, Bedriftsappar, Barneappar — inn på éi rad:
     287,2 px av 302 tilgjengelege. 14 px og 14 px gav 336,7 og braut i tre
     rader. */
  .fane { padding: 0 10px; font-size: 13px; }
  /* Den valde fana stikk ikkje opp her. I ei brote rad ville dei åtte
     ekstra pikslane skuva rada over, og «stikk opp av arket» tyder ingenting
     når det som ligg under er ei ny rad faner. Aksentstreken og botnfargen
     seier framleis kva som er vald.

     OG HO BLIR IKKJE FEITARE. `font-weight: 500` gjer etiketten breiare, og
     ei fane som skiftar breidd når du vel henne gjer heile oppsettet
     avhengig av kva som er vald. Målt på engelsk: rada heldt 3+3 med
     Velkomen open, og ramla i 3+2+1 i det ein fane på rad to vart vald.
     Nynorsk skjulte det, fordi etikettane der er kortare. */
  .fane[aria-selected="true"] { height: 44px; font-weight: 400; }

  /* KORTET LIKE BREITT SOM FANERADA (Roger 09.09). Dette var ei glipe og
     ikkje eit val: media-spørsmålet sette `padding` på `.fanerom` og gløymde
     `margin`, so kortet stod att med skrivebordet sine 56 px på kvar side.
     Målt: kortet 238 px mot fanerada 314. No er begge 18 px inn. */
  .fanerom { margin: 0 18px 30px; padding: 26px 18px 20px; gap: 20px; }
  .sporlaus-tittel { font-size: 27px; }
  .sporlaus-lede { font-size: 16px; }
}

/* -------------------------------------------------------------------------
   APPKORTA

   KORTA ER IKKJE SKRIVNE OM. Ruling 08.09: dei fire seksjonane får éi form,
   «men det er ei endring i markup, ikkje i tekst: tekst-sha for kvar av dei
   fire skal vere lik før og etter». Markupen dei har frå før ER kortforma
   skissa ber om: overskrift, ei linje, ein knapp, og for eitt av dei ein
   utvidbar del. Difor blir dei STILTE om og ikkje bygde om, og flytteporten
   held fram med å måle at teksten er den same. Ei omskriving av markup for å
   få same tekst ut igjen er ein risiko utan gevinst.

   `hub.css` teiknar dei same klassane i den gamle drakta. Alt under er ei
   overstyring, og det står i README kva som er att av den gamle fila.
   ------------------------------------------------------------------------- */

.fanerom h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
  color: var(--sp-tekst);
}

.fanerom .card {
  background: var(--sp-kort);
  border: 1px solid var(--sp-kant-lys);
  border-radius: 22px;
  padding: 24px 26px;
  margin: 0;
  box-shadow: none;
}

.fanerom .card + .card { margin-top: 18px; }

.fanerom .card h3 {
  font-family: var(--sp-serif);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--sp-tekst);
}

.fanerom .card-intro {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sp-tekst);
  max-width: 720px;
}

/* «Opne»-knappane i OMRISS, éin aksent per skjerm (ruling 08.09). Aksenten
   på ei fane er streken øvst på det valde skiljearket, og han skal vere den
   einaste. Ein rad med seks fylte terrakottaknappar ville gjort valet
   umogleg å sjå. */
.fanerom .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--sp-kant);
  border-radius: 999px;
  background: transparent;
  color: var(--sp-tekst);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
}
.fanerom .btn:hover {
  border-color: var(--sp-aksent);
  color: var(--sp-aksent);
  background: transparent;
}
.fanerom .btn:focus-visible { outline: 2px solid var(--sp-aksent); outline-offset: 2px; }

/* Den utvidbare delen. Eitt av korta hadde han frå før, og han står: teksten
   skal ikkje bort, berre leggje seg der den som vil ha han finn han. */
.fanerom .panel {
  margin-top: 18px;
  border-top: 1px solid var(--sp-kant-lys);
  padding-top: 14px;
  background: transparent;
  border-radius: 0;
}
.fanerom .panel > summary {
  cursor: pointer;
  font-size: 14.5px;
  color: var(--sp-dempa);
  list-style: none;
  padding: 6px 0;
}
/* MARKOEREN ER `hub.css` SIN, og han staar. Han er ein vinkel bygd av to
   kantar som roterer naar panelet opnar seg. Fyrste utgaava her sette eit
   plussteikn som `content` paa det SAME elementet, og da laag teiknet oppaa
   dei to kantane: eit skraastrek-liknande merke ingen hadde teikna, synleg
   paa skjermbiletet. Ein markoer som verkar treng ein ny farge, ikkje eit
   nytt innhald. */
.fanerom .panel > summary::before {
  border-right-color: var(--sp-aksent);
  border-bottom-color: var(--sp-aksent);
}
.fanerom .panel p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--sp-tekst);
  max-width: 760px;
}

/* ── KORTBILETET PÅ BARNE-FANA ─────────────────────────────────────────────
   Roger, 22.09.2026: kvart av dei fire korta skal ha ein liten illustrasjon.
   Teikninga er inline SVG, sett inn av `scripts/lag-kortbilete.mjs` frå
   appane sine eigne filer, og fargelagd på nytt ved kvar lasting av
   `kortbilete.js`.

   HO FLYTER TIL HØGRE, og ho står FØRE <h3> i markupen. Grunnen er målt:
   ein float som startar under overskrifta skyv resten av kortet nedover,
   medan ein som startar føre lèt tittelen og ingressen bryte rundt seg. Med
   150 px og tre-fire tekstlinjer ved sida veks ikkje kortet i det heile.

   Kortet må rydde etter floaten, elles legg knappen og panelet seg oppå. */
.fanerom .card::after { content: ""; display: block; clear: both; }

/* OG PANELET MÅ RYDDE FOR SEG SJØLV. Klaringa over held botnen av kortet
   under teikninga, men ho seier ingenting om kva som ligg IMELLOM. På ein brei
   skjerm er ingressen kort, og då nådde den ståande Kleskode-teikninga 32,9 px
   ned i «Om appen»-rada og la seg over skiljelinja hennar (køyring D, 1280 px,
   22.09; 8,1 px på 768). Dei tre liggjande teikningane er for låge til å nå
   dit, so feilen synte seg berre på eitt kort — den typen feil ein ikkje ser
   før nokon måler alle fire. */
.fanerom .card .panel { clear: right; }

.fanerom .card .kortbilete {
  float: right;
  width: 150px;
  height: auto;
  margin: 2px 0 10px 18px;
  /* Ingen `border-radius` her. Runde hjørne på sjølve svg-en klipper arket,
     og klippekanten vart synleg som fire svake bogar i LYST tema, der arket
     elles er usynleg. Eit ark med skarpe hjørne i mørkt tema er ein billegare
     pris enn eit merke på standardtemaet. */
}

/* PAPIRET UNDER TEIKNINGA. Figurfilene er bygde som eit svart rektangel med
   ei kvit «bakgrunn»-bane oppå: det svarte som syner mellom felta ER streken.
   Står bakgrunnen kvit, ser teikninga ut som eit fotografi klistra på kortet
   (fyrste skjermbiletet, 22.09). Ho får kortet sin eigen farge i staden, og
   følgjer da lyst og mørkt utan at generatoren veit noko om tema. */
/* PAPIRET ER LYST I BEGGE TEMA, og det er ikkje ein ny farge: det er den
   LYSE kortfargen. I lyst tema er papiret difor usynleg — det er nøyaktig
   kortet. I mørkt tema blir teikninga liggjande på eit ark.

   Grunnen er målt av køyring B 22.09: papiret følgde temaet, men streken i
   teikningane er `#000` og figurane sine eigne konturar er `#3a2a22`, og dei
   følgjer ingenting. Kontrasten mot kortet fall frå 16,38 : 1 til 1,36 : 1,
   40 % av dei teikna pikslane i Kleskode-biletet låg under 1,5 : 1, og jenta
   sitt hår målte 1,06 : 1 — håret og omrisset forsvann, og ansiktet såg ut
   til å svevje. Å snu blekket lyst i staden hadde late dei lyse ansikta og
   hendene renne saman med konturen. Arket løyser begge. */
.fanerom .card .kortbilete [data-kb] { fill: var(--sp-papir); }

/* Jenta og guten står oppreist. Teikninga er klipt til der blekket er (køyring
   C målte ruta til 60,2 % tom), so dei fyller høgda si — og då er det HØGDA
   som må styrast, ikkje breidda, elles veks kortet med biletet. På nettbrett
   kostar det ingenting: teksten er høgare enn teikninga uansett. */
.fanerom .card .kortbilete--staaende { width: auto; height: 168px; }

/* PÅ TELEFONEN BYRJAR BRØDTEKSTEN UNDER TEIKNINGA. Kortet er 224 px
   innvendig på ein iPhone 15. Teikninga flyt til høgre, og overskrifta står
   ved sida av henne — men fyrste linja i brødteksten måtte før klemme seg inn
   i det som var att av spalta. Køyring A målte det 22.09: Fargelegging-kortet
   fekk «Et» åleine på fyrste linja, 2 teikn mot ei lengste linje på 29; Livet
   i havet fekk «Havdyr å»; Dinofargar «Dinosaurer å». Det er ikkje eit tal ein
   kan justere seg ut av — orda «fargeleggingsprogram» og «Dinosaurer» er
   lengre enn spalta som blir att.

   `clear: right` på ingressen gjer at han startar under teikninga, i full
   breidd. Overskrifta står framleis ved sida av biletet, so kortet veks berre
   med det teikninga er høgare enn overskrifta — ikkje med heile høgda si, som
   det ville gjort om teikninga stod på si eiga linje. Målt begge vegar før
   dette vart valt. */
@media (max-width: 520px) {
  /* 80 px. Rekneskapen: 224 px innvendig, minus 125 for ordet
     «Fargelegging» som ikkje kan brytast, minus 14 i marg, er 85. 84 vart
     prøvd og var for knapt — overskrifta hamna under biletet på nettopp det
     kortet, og då såg dei fire korta ulike ut. 80 gjev fem piksel slark, og
     alle fire overskriftene står ved sida av teikninga si. */
  .fanerom .card .kortbilete { width: 80px; margin-left: 14px; }
  /* På telefonen er høgda taket. 94 px gjorde Kleskode-kortet 71 px høgare
     enn utan teikning, og det er meir enn eit lite kort tåler; 76 px held
     veksten på linje med dei tre andre. */
  .fanerom .card .kortbilete--staaende { width: auto; height: 76px; }
  .fanerom .card .card-intro { clear: right; }
}

/* OG EIN GONG TIL FOR DEI SMALASTE. På 320 px er kortet berre 154 px
   innvendig. «Livet i havet» treng 118 px, so med teikninga ved sida av braut
   overskrifta uansett kor liten teikninga vart — fyrst i tre linjer med ordet
   «i» åleine (køyring E), so i to med «havet» åleine (køyring G). Éi linje
   ved sida av biletet er uråd: det ville kravd ei teikning på 22 px.

   So her flyt ho ikkje. Teikninga står på si eiga linje, skyvd til høgre,
   over overskrifta, og teksten får heile breidda. Kortet blir høgare, og det
   er prisen for at ingen overskrift blir broten på den smalaste skjermen. */
@media (max-width: 360px) {
  .fanerom .card .kortbilete {
    float: none;
    display: block;
    width: 84px;
    margin: 0 0 10px auto;
  }
  .fanerom .card .kortbilete--staaende { width: auto; height: 84px; }
}