/* ==========================================================================
   Mandatet — dokumentverksted
   Skjermen er en arbeidsbenk. Arket er arbeidet. Det finnes ingen verktøylinje:
   valgene er satt i samme skrift som dokumentet, på samme flate.
   ========================================================================== */

:root {
  /* Flate */
  --desk:        #d3d4cf;
  --desk-light:  #dfe0db;
  --desk-dark:   #bfc1bb;

  /* Papir og blekk */
  --paper:       #ffffff;
  --ink:         #191a17;
  --ink-soft:    #565853;
  --ink-faint:   #8d8f88;
  --rule:        #c9cac4;
  --rule-light:  #e6e7e2;

  /* Ett fargepunkt: seglet. Brukes på utmålte steder, aldri som flate. */
  --seal:        #6e2436;
  --seal-wash:   rgba(110, 36, 54, 0.07);

  /* Skrift */
  --serif: "Iowan Old Style", "Charter", Charter, "Palatino Linotype",
           "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
           "Segoe UI Mono", "Roboto Mono", "Liberation Mono", monospace;

  /* Arkgeometri. A4 = 210 x 297 mm.
     Margene under er ekte: 25 mm sider, 30 mm topp, 25 mm bunn.
     Uttrykt som prosent av bredden holder de seg ved enhver skalering. */
  --page-w:      820px;
  --pad-x:       11.905%;   /*  25 / 210 */
  --pad-top:     14.286%;   /*  30 / 210 */
  --pad-bottom:  11.905%;   /*  25 / 210 */
  --page-ratio:  1.41421;   /* 297 / 210 */
  --text-block:  1.15238;   /* (297 - 30 - 25) / 210 — tekstflaten per side */
  --sheet-fs:    calc(var(--page-w) * 0.019);

  --shift: 260ms;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--desk);
  background-image:
    radial-gradient(130% 90% at 50% -10%, var(--desk-light) 0%, var(--desk) 52%, var(--desk-dark) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Kornet i bordplata. Uten det blir flaten en gradient. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--ink); color: var(--paper);
  padding: 0.6em 1em; font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 0; }

:where(a, button, input, label, [tabindex]):focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}

/* ==========================================================================
   Rom
   ========================================================================== */

.workroom {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  max-width: 1560px;
  margin: 0 auto;
}

/* --- Venstre: benken ------------------------------------------------------ */

.controls {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 46px 34px 40px 44px;
  border-right: 1px solid rgba(25, 26, 23, 0.13);
}

.controls-inner { max-width: 34ch; }

.tool-mark {
  display: block;
  width: 108px;
  height: auto;
  opacity: 0.9;
  margin-bottom: 30px;
}

.tool-title {
  margin: 0 0 0.45em;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
}

.tool-lead {
  margin: 0 0 34px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30ch;
}

/* --- Valgene: setninger med tomrom --------------------------------------- */

.choices { margin: 0; }

/* Trinnrekka finnes bare på smal skjerm, der ett felt vises om gangen. */
.steps { display: none; }

.choice {
  border: 0;
  border-top: 1px solid rgba(25, 26, 23, 0.15);
  margin: 0;
  padding: 20px 0 22px;
}

.choice-line {
  margin: 0 0 12px;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Tomrommet. Samme virkemiddel her som på arket. */
.blank {
  display: inline-block;
  width: 4.4em;
  height: 0.9em;
  margin-bottom: -0.08em;
  border-bottom: 1.5px solid var(--ink);
  opacity: 0.42;
}
.blank-wide { width: 6.6em; }

.fill.is-set { color: var(--seal); }

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}

/* Hvert alternativ er selv et tomrom som kan fylles. Derfor den prikkede
   linjen under: den blir hel når valget er tatt. */
.options label {
  display: inline-block;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  padding: 2px 0 3px;
  border-bottom: 1px dotted rgba(25, 26, 23, 0.35);
  transition: color 140ms ease, border-color 140ms ease;
}

.options label:hover { color: var(--ink); border-bottom-color: var(--ink); }

.options input:checked + label {
  color: var(--seal);
  border-bottom: 1.5px solid var(--seal);
}

.options input:focus-visible + label {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}

/* --- Handlinger ----------------------------------------------------------- */

.actions {
  border-top: 1px solid rgba(25, 26, 23, 0.15);
  padding-top: 22px;
  margin-top: 4px;
}

.progress {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-faint);
}

.btn {
  display: block;
  width: 100%;
  margin-bottom: 9px;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(25, 26, 23, 0.3);
  border-radius: 1px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.4); }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--seal); border-color: var(--seal); color: var(--paper); }

.btn-quiet {
  border-color: transparent;
  color: var(--ink-faint);
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}
.btn-quiet:hover { background: transparent; border-color: transparent; color: var(--ink); }

.note {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* --- Høyre: arket på benken --------------------------------------------- */

.deck {
  padding: 46px 48px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sheet-caption,
.deck-foot {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.deck-foot {
  margin: 26px 0 0;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11.5px;
  color: var(--ink-soft);
  max-width: 46ch;
  text-align: center;
  align-self: center;
}

/* ==========================================================================
   Arket
   ========================================================================== */

.sheet {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  min-height: calc(var(--page-w) * var(--page-ratio));
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  background: var(--paper);
  border-radius: 1px;
  box-shadow:
    0 1px 1px rgba(25, 26, 23, 0.09),
    0 10px 22px -8px rgba(25, 26, 23, 0.22),
    0 34px 60px -30px rgba(25, 26, 23, 0.3);
  font-size: var(--sheet-fs);
  line-height: 1.56;
  color: var(--ink);
}

/* Sidegrenser. Regnet ut fra ekte tekstflate per A4-side. */
.page-marks { position: absolute; inset: 0; pointer-events: none; }

.page-mark {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(25, 26, 23, 0.18);
}
.page-mark span {
  position: absolute;
  right: 1.1em;
  top: -0.55em;
  background: var(--paper);
  padding: 0 0.5em;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Dokumenthode --------------------------------------------------------- */

.doc-head { margin-bottom: 2.1em; }

.doc-title {
  margin: 0 0 0.22em;
  font-size: 1.62em;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.014em;
  max-width: 24ch;
}

.doc-sub {
  margin: 0 0 1.5em;
  font-size: 1em;
  font-style: italic;
  color: var(--ink-soft);
}

.doc-meta {
  margin: 0;
  padding-top: 0.75em;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 0.72fr 1.75fr 0.7fr;
  gap: 0.8em 1.5em;
}
.doc-meta div { min-width: 0; }
.doc-meta dt {
  font-family: var(--mono);
  font-size: 0.6em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4em;
}
.doc-meta dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66em;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Forbeholdet står i forsatsen, foran den første setningen i «vi»-form.
   Kommer det etter sju avsnitt i hennes navn, ser arket ut som om noen andre
   har beskrevet virksomheten hennes. */
.doc-note {
  margin: 1.15em 0 0 !important;
  font-size: 0.84em;
  line-height: 1.5;
  color: var(--ink-soft);
  break-inside: avoid;
  page-break-inside: avoid;
}
.doc-note b {
  display: block;
  margin-bottom: 0.35em;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Seksjoner ------------------------------------------------------------ */

.doc-section { margin-bottom: 1.85em; }

.doc-h {
  margin: 0 0 0.6em;
  font-size: 1.02em;
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.3;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rule-light);
  break-after: avoid;
  page-break-after: avoid;
}

.doc-num {
  display: inline-block;
  min-width: 1.5em;
  color: var(--seal);
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 400;
}

.sheet p { margin: 0 0 0.72em; orphans: 3; widows: 3; }
.sheet p:last-child { margin-bottom: 0; }

.doc-list {
  margin: 0 0 0.8em;
  padding: 0;
  list-style: none;
}
.doc-list li {
  position: relative;
  padding-left: 1.35em;
  margin-bottom: 0.42em;
  break-inside: avoid;
  page-break-inside: avoid;
}
.doc-list li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.72em;
  width: 0.5em;
  height: 1px;
  background: var(--ink-faint);
}
.doc-list li:last-child { margin-bottom: 0; }

.doc-sublabel {
  margin: 0 0 0.35em;
  font-family: var(--mono);
  font-size: 0.62em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.doc-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1em 1.6em;
  margin: 0.9em 0 0.2em;
}
.doc-split > div { min-width: 0; }

/* --- Grunnlaget: sitat ---------------------------------------------------- */

.doc-ground { margin-bottom: 2em; }

.doc-quote {
  margin: 0 0 0.85em;
  padding: 0 0 0 1.1em;
  border-left: 2px solid var(--seal);
  break-inside: avoid;
  page-break-inside: avoid;
}
.doc-quote p {
  margin: 0 0 0.4em;
  font-size: 1.1em;
  line-height: 1.42;
  letter-spacing: -0.006em;
}
.doc-quote cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Anmerkning ----------------------------------------------------------- */

.doc-remark {
  margin: 1em 0 0;
  padding: 0.75em 0 0 0;
  border-top: 1px solid var(--rule-light);
  font-size: 0.92em;
  color: var(--ink-soft);
  break-inside: avoid;
  page-break-inside: avoid;
}
.doc-remark b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.3em;
}

/* --- Hva rollen ikke er --------------------------------------------------- */

.doc-negative .doc-h { border-bottom-color: var(--seal); }
.doc-list-negative li { margin-bottom: 0.55em; }
.doc-list-negative li::before { background: var(--seal); width: 0.62em; }
.doc-list-negative b { font-weight: 600; }

/* --- Avslutning: de tre andre tiltakene ---------------------------------- */

.doc-measures {
  margin: 0.9em 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-light);
}
.doc-measures li {
  padding: 0.62em 0;
  border-bottom: 1px solid var(--rule-light);
  break-inside: avoid;
  page-break-inside: avoid;
}
.doc-measures b { font-weight: 600; display: block; }
.doc-measures span { color: var(--ink-soft); }
.doc-measures .is-picked { border-left: 2px solid var(--seal); padding-left: 0.8em; }
.doc-measures .is-picked b { color: var(--seal); }

.doc-measures-note {
  margin: 0.75em 0 0 !important;
  font-size: 0.9em;
  color: var(--ink-soft);
}

/* --- Kolofon -------------------------------------------------------------- */

.colophon {
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 1.6em;
  align-items: start;
  break-inside: avoid;
  page-break-inside: avoid;
}
.colophon-mark { width: 100%; height: auto; margin-top: 0.25em; }
.colophon-body p {
  margin: 0 0 0.42em;
  font-size: 0.78em;
  line-height: 1.5;
  color: var(--ink-soft);
}
.colophon-contact {
  font-family: var(--mono);
  font-size: 0.7em !important;
  letter-spacing: 0.02em;
  color: var(--ink) !important;
  margin-top: 0.7em !important;
}
.colophon-contact a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--seal);
  transition: color 140ms ease;
}
.colophon-contact a:hover { color: var(--seal); }

/* ==========================================================================
   Tomrom paa arket
   ========================================================================== */

.gap { margin: 0 0 0.72em; break-inside: avoid; page-break-inside: avoid; }

.gap-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62em;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 0.6em;
}

.gap-rules { display: block; }
.gap-rules i {
  display: block;
  height: 1.56em;
  border-bottom: 1px solid var(--rule);
}
.gap-rules i:last-child { width: 62%; }

li.gap-line {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.68em;
  letter-spacing: 0.03em;
}
li.gap-line::before { background: var(--rule) !important; }

/* Nyskrevet avsnitt gir et kort ekko, slik at øyet finner endringen. */
@keyframes settle {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wash {
  from { background-color: var(--seal-wash); }
  to   { background-color: transparent; }
}
.is-new > * { animation: settle var(--shift) ease-out both; }
.is-new { animation: wash 1100ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Smalere skjermer
   ========================================================================== */

@media screen and (max-width: 1180px) {
  :root { --page-w: 700px; }
  .deck { padding: 40px 32px 80px; }
  .controls { padding: 40px 26px 36px 32px; }
}

@media screen and (max-width: 1000px) {

  /* Smal skjerm snur forholdet mellom verktøy og arbeid.
     Arket får toppen av skjermen og begynner over folden. Valgene legger
     seg som en fast benk nederst, med ett felt om gangen. Da ser hun arket
     og feltet som skriver på det i samme skjermbilde, uten å rulle. */

  .workroom { display: block; max-width: 760px; }

  .controls {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(25, 26, 23, 0.14);
    padding: 16px 22px 12px;
  }
  .controls-inner { max-width: none; }

  /* Hodet krymper til én linje: ordmerke og tittel side om side. */
  .tool-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
  }
  .tool-mark { width: 74px; margin: 0; }
  .tool-title { font-size: 17px; margin: 0; letter-spacing: -0.005em; }
  .tool-lead { display: none; }
  .note { margin: 8px 0 0; font-size: 10px; }

  /* --- Benken ------------------------------------------------------------ */

  .tool-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 10px 22px 14px;
    border-top: 1px solid rgba(25, 26, 23, 0.2);
    background: rgba(215, 216, 211, 0.95);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    box-shadow: 0 -10px 26px -16px rgba(25, 26, 23, 0.5);
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Trykkflatene er 44 x 44 px. Merket inni holder samme lette sats som før:
     treffområdet vokser, ikke typografien. Raden er trukket ut til venstre
     slik at det første tallet står i flukt med setningen under. */
  .steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: -8px 0 2px -13px;
  }
  .step {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(110, 36, 54, 0.12);
  }
  .step i {
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.2;
    min-width: 1.5em;
    text-align: center;
    color: var(--ink-faint);
    border-bottom: 1px dotted rgba(25, 26, 23, 0.4);
    padding-bottom: 3px;
    transition: color 140ms ease, border-color 140ms ease;
  }
  .step:hover i { color: var(--ink); }
  .step.is-filled i { color: var(--seal); border-bottom: 1.5px solid var(--seal); }
  .step.is-current i { color: var(--ink); border-bottom: 1.5px solid var(--ink); }
  .step.is-filled.is-current i { color: var(--seal); border-bottom-color: var(--seal); }
  .step:focus-visible { outline: 2px solid var(--seal); outline-offset: -6px; }

  /* Trinnrekka er framdriftsvisningen på smal skjerm. Da er tellelinja
     overflødig. */
  .progress { display: none; }

  /* Ett felt om gangen. Er alle fylt, viker feltet for lesing av arket. */
  .choice { display: none; border-top: 0; padding: 0 0 10px; }
  .choice.is-current { display: block; }
  .choice-line { font-size: 16px; margin-bottom: 6px; }

  /* Alternativene blir en liste med rader. Hver rad er en trykkflate på minst
     44 px, og den prikkede linjen ligger langs radens underkant, der den
     samtidig skiller radene. Skriftgraden er den samme som før. */
  .options {
    display: block;
    max-width: 32em;
  }
  .options label {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(25, 26, 23, 0.32);
    -webkit-tap-highlight-color: rgba(110, 36, 54, 0.1);
  }
  .options input:checked + label { border-bottom: 1.5px solid var(--seal); }

  .actions {
    border-top: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "print print"
      "save  clear";
    gap: 8px 12px;
  }
  .btn { margin: 0; min-height: 44px; padding: 11px 12px; }
  #print { grid-area: print; }
  #download {
    grid-area: save;
    justify-self: start;
    width: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-color: transparent;
    padding: 0;
    font-size: 11px;
    color: var(--ink-soft);
  }
  #download:hover { background: transparent; color: var(--ink); }
  .btn-quiet {
    grid-area: clear;
    justify-self: end;
    width: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 11px;
    text-align: right;
  }

  /* E-postlenka på arket er en trykkflate, ikke bare tekst. Den negative
     margen holder satsen uendret. */
  .colophon-contact a {
    display: inline-block;
    padding: 14px 0;
    margin: -14px 0;
  }

  .deck { padding: 12px 22px 40px; align-items: stretch; }
  .sheet-caption { max-width: none; margin-bottom: 9px; }
  .deck-foot { max-width: none; }
}

/* Mobilformen: arket brettes ut. Ekte A4-høyde og sidegrenser gir ingen
   mening når bredden er 343 px, så marginene krymper og teksten holder
   lesbar størrelse. Materialet — papiret, linjene, seglet — står. */
@media screen and (max-width: 640px) {
  .sheet {
    --pad-x: 7.6%;
    --pad-top: 9.5%;
    --pad-bottom: 9.5%;
    min-height: 0;
    font-size: 16px;
    line-height: 1.6;
    box-shadow: 0 1px 1px rgba(25, 26, 23, 0.1), 0 8px 20px -10px rgba(25, 26, 23, 0.28);
  }
  .page-marks { display: none; }
  .doc-title { font-size: 1.5em; max-width: none; }
  .doc-meta { grid-template-columns: minmax(0, 1fr); gap: 0.55em; }
  .doc-meta div { display: flex; gap: 0.8em; align-items: baseline; }
  .doc-meta dt { margin-bottom: 0; min-width: 6em; font-size: 0.58em; }
  .doc-split { grid-template-columns: minmax(0, 1fr); gap: 1.2em; }
  .colophon { grid-template-columns: minmax(0, 1fr); gap: 0.9em; }
  .colophon-mark { width: 6.5em; }

  .controls { padding: 14px 16px 10px; }
  .tool-mark { width: 66px; }
  .tool-title { font-size: 16px; }
  .tool-panel { padding: 9px 16px 13px; }
  .choice-line { font-size: 15.5px; margin-bottom: 7px; }
  .options { gap: 6px 13px; }
  .deck { padding: 10px 12px 32px; }
}

@media screen and (max-width: 380px) {
  .options { gap: 3px 10px; }
  .options label { font-size: 11px; }
}

/* ==========================================================================
   Utskrift
   Skjermens skala er avledet av A4. Settes grunnskriften til
   0.019 x 210 mm = 3.99 mm, får utskriften nøyaktig samme spaltebredde
   målt i em, og linjefallet følger arket på skjermen.
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 30mm 25mm 25mm;
}

@media print {
  html, body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
  }
  body::before { display: none; }

  .skip, .controls, .sheet-caption, .deck-foot, .page-marks { display: none !important; }

  .workroom { display: block; max-width: none; }
  .deck { display: block; padding: 0; }

  .sheet {
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 3.99mm;
    line-height: 1.56;
    color: #000;
  }

  /* Seglet holder farge også på papir. I gråtoner leses det som mørk grå. */
  .doc-num, .doc-quote, .doc-negative .doc-h,
  .doc-list-negative li::before, .doc-measures .is-picked,
  .doc-measures .is-picked b, .colophon-mark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Grått på skjerm blir for lyst på papir. */
  .doc-remark, .doc-measures span, .colophon-body p, .doc-note { color: #3a3b37; }
  .doc-sublabel, .doc-quote cite, .doc-meta dt, .doc-note b { color: #6a6c66; }
  .doc-meta dd { color: #2c2d2a; }

  .doc-section { break-inside: auto; }
  .doc-h { break-after: avoid; page-break-after: avoid; }

  .colophon {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-before: avoid;
  }
  .colophon-mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Et uferdig ark skal fortsatt kunne skrives ut og fylles ut for hånd. */
  .gap-rules i { border-bottom-color: #999; }
  .gap-label { color: #666; }
  li.gap-line { color: #666; }

  .is-new, .is-new > * { animation: none !important; }
}