/* ====================================================================
   VARIABLES
   ==================================================================== */
:root {
  --paper:        #ffffff;
  --paper-warm:   #f6f1e3;
  --ink:          #1a1812;
  --ink-soft:     #4a463c;
  --ink-faint:    #8a8475;
  --rule:         #c9c2ad;
  --rule-soft:    #e3dcc6;
  --red-ochre:    #8b3a2a;
  --warm-gold:    #a07a1c;

  /* --- UI chrome (themed) ------------------------------------- */
  --ui-bg:            #e6e2d4;
  --ui-panel:         #f8f5ec;
  --ui-panel-2:       #fbf9f1;
  --ui-card:          #ffffff;
  --ui-border:        #cfc8b5;
  --ui-text:          #2a261a;
  --ui-muted:         #4a463c;
  --ui-faint:         #8a8475;
  --ui-accent:        #6b4527;
  --ui-accent-2:      #8b3a2a;
  --ui-gold:          #a07a1c;
  --ui-input-bg:      #ffffff;
  --ui-focus-ring:    rgba(107, 69, 39, 0.14);
  --ui-shadow:        rgba(0, 0, 0, 0.05);

  --ui-primary-bg:    #8b3a2a;
  --ui-primary-hover: #6e2d20;
  --ui-primary-text:  #ffffff;

  --preview-grad-1:       #d8d2c0;
  --preview-grad-2:       #c5bfae;
  --zoom-merke-bg:     rgba(255, 255, 255, 0.55);
  --zoom-merke-kant:   rgba(40, 36, 26, 0.16);
  --zoom-merke-tekst:  rgba(40, 36, 26, 0.72);

  /* bredden på redigeringsfeltet til venstre */
  --form-w: 750px;

  /* Grensesnittets tekststørrelser — én plass å skru på dem.
     NB: gjelder bare skjermen. Sidene i forhåndsvisningen måles i pt og mm
     og skal ikke følge med her, ellers endrer utskriften seg. */
  --fs-label:   12px;
  --fs-help:    13px;
  --fs-btn:     14px;
  --fs-sub:     14px;
  --fs-input:   15px;
  --fs-prose:   16px;
  --fs-summary: 16px;
  --fs-title:   26px;

  /* høyden på fanreaden nederst på mobil */
  --nav-h: 56px;

  /* Luft over det øverste på skjermen. Null her; satt på telefon, i
     mediespørringen for 900 px, der det står hvorfor. */
  --topp-luft: 0px;

  color-scheme: light;

  --font-display: 'Cormorant Upright', 'Cormorant', 'EB Garamond', Garamond, serif;
  --font-body:    'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-sc:      'Cormorant SC', 'Cormorant Garamond', serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------
   MØRK MODUS — bare grensesnittet endres. Selve sidene beholder
   papir-og-blekk-paletten, siden det er dem som faktisk skrives ut.
   -------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --ui-bg:            #14130e;
  --ui-panel:         #1d1b15;
  --ui-panel-2:       #262319;
  --ui-card:          #191710;
  --ui-border:        #3b372c;
  --ui-text:          #e9e4d6;
  --ui-muted:         #aaa494;
  --ui-faint:         #7f7969;
  --ui-accent:        #d0aa6a;
  --ui-accent-2:      #cf6a51;
  --ui-gold:          #c9a45f;
  --ui-input-bg:      #100f0b;
  --ui-focus-ring:    rgba(208, 170, 106, 0.22);
  --ui-shadow:        rgba(0, 0, 0, 0.45);

  --ui-primary-bg:    #8f3d2c;
  --ui-primary-hover: #a8492f;
  --ui-primary-text:  #fdf3ee;

  --preview-grad-1:       #2a2720;
  --preview-grad-2:       #17150f;
  --zoom-merke-bg:     rgba(23, 21, 15, 0.52);
  --zoom-merke-kant:   rgba(233, 228, 214, 0.18);
  --zoom-merke-tekst:  rgba(233, 228, 214, 0.74);

  color-scheme: dark;
}

/* ====================================================================
   RESET / BASE
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* Skjermene og dialogene skrus av og på med hidden-attributtet, men de har
   også en display-regel i denne fila. En egen regel i stilarket slår
   nettleserens innebygde display:none for hidden, så den må gjentas her. */
[hidden] { display: none !important; }
body {
  font-family: var(--font-ui);
  background: var(--ui-bg);
  color: var(--ui-text);
  transition: background-color 0.14s ease, color 0.14s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====================================================================
   APP LAYOUT
   ==================================================================== */
.app {
  display: grid;
  grid-template-columns: minmax(320px, var(--form-w)) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ====================================================================
   FORM PANEL (LEFT)
   ==================================================================== */
.form-panel {
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.toolbar {
  position: sticky;
  top: 0;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  padding: 16px 20px 14px;
  z-index: 20;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.toolbar h1 {
  margin: 0 0 2px 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
  color: var(--ui-accent-2);
  letter-spacing: 0.01em;
}
/* Merke som skiller denne utgaven fra den frittstående originalen. */
.build-badge {
  display: inline-block;
  vertical-align: 0.22em;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-panel-2);
  color: var(--ui-faint);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar .subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sub);
  color: var(--ui-muted);
  margin-bottom: 10px;
}
.toolbar .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Paa skrivebordet faar knappene brekke der de vil. */
.knappebrekk { display: none; }
.btn {
  padding: 8px 13px;
  border: 1px solid var(--ui-border);
  background: var(--ui-input-bg);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--fs-btn);
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.1s ease, border-color 0.1s ease, transform 0.06s ease;
}
.btn:hover { background: var(--ui-panel-2); border-color: var(--ui-accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.btn-primary {
  background: var(--ui-primary-bg);
  color: var(--ui-primary-text);
  border-color: var(--ui-primary-bg);
}
.btn-primary:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; }

/* --- bryter for lys / mørk modus ----------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.form-content {
  padding: 16px 20px 60px;
  flex: 1;
}

.form-section {
  margin-bottom: 14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
  border-radius: 2px;
}
.form-section[open] { box-shadow: 0 1px 3px var(--ui-shadow); }
.form-section summary {
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-summary);
  font-weight: 500;
  cursor: pointer;
  color: var(--ui-accent);
  background: var(--ui-panel-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
}
.form-section summary::-webkit-details-marker { display: none; }
.form-section summary::before {
  content: '▸';
  font-size: 12px;
  color: var(--ui-accent);
  transition: transform 0.15s;
  display: inline-block;
}
.form-section[open] summary::before { transform: rotate(90deg); }
.form-section[open] summary {
  border-bottom: 1px solid var(--ui-border);
  border-radius: 2px 2px 0 0;
}
.form-section .section-content { padding: 14px 16px; }

.form-row { margin-bottom: 12px; }
.form-row:last-child { margin-bottom: 0; }
.form-row label.field-label {
  display: block;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-muted);
  margin-bottom: 3px;
  font-weight: 500;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="date"],
.form-row textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-input-bg);
  font-family: var(--font-ui);
  font-size: var(--fs-input);
  color: var(--ui-text);
  border-radius: 2px;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.form-row textarea {
  min-height: 84px;
  resize: vertical;
  font-family: var(--font-body);
  font-size: var(--fs-prose);
  line-height: 1.45;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}

/* Datofeltene.
   WebKit — Safari på iPhone og Mac — gir input[type="date"] en egen indre
   bredde utledet av datoformatet, og lar den overstyre width. Feltet blir
   da bredere enn naboene og sklir utenfor rammen. Samtidig sentreres
   verdien, så teksten står forskjøvet i forhold til de andre feltene.

   De to første linjene løsner den indre bredden; ::-webkit-date-and-time-value
   flytter verdien tilbake til venstre. I Blink er alt dette uten virkning —
   der satt det fra før — så det koster ingenting å ha med. */
.form-row input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  display: block;
  line-height: normal;
}
.form-row input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.form-row input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}
.form-row.compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-row .help {
  font-size: var(--fs-help);
  color: var(--ui-faint);
  font-style: italic;
  margin-top: 3px;
}

.file-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Selve input-feltet er skjult, men må bli stående i layouten — iOS åpner
   ikke bildevelgeren for et felt som er display:none. */
.file-input {
  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;
}
.file-btn { flex: none; }
.file-input:focus-visible + .file-btn {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-help);
  font-style: italic;
  color: var(--ui-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-name.has-file { color: var(--ui-muted); font-style: normal; }
.thumb-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.thumb-row img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-panel-2);
}
.thumb-row .clear-btn {
  font-size: var(--fs-help);
  padding: 4px 10px;
  background: var(--ui-input-bg);
  border: 1px solid var(--ui-border);
  cursor: pointer;
  border-radius: 2px;
  color: var(--ui-muted);
}
.thumb-row .clear-btn:hover { color: var(--ui-accent-2); border-color: var(--ui-accent-2); }

.materials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.materials-grid .form-row { margin-bottom: 0; }

.helper-tip {
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: var(--ui-panel-2);
  border-left: 2px solid var(--ui-gold);
  font-size: var(--fs-sub);
  font-family: var(--font-body);
  color: var(--ui-muted);
  line-height: 1.45;
}

/* ====================================================================
   FANERAD (vises bare på mobil)
   ==================================================================== */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--nav-h);
  border: 0;
  background: transparent;
  color: var(--ui-faint);
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.1s ease;
}
.nav-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-btn[aria-pressed="true"] { color: var(--ui-accent-2); }

/* ====================================================================
   PREVIEW PANEL (RIGHT)
   ==================================================================== */
.preview-panel {
  background: var(--preview-grad-2);
  background-image:
    radial-gradient(circle at 50% 0%, var(--preview-grad-1) 0%, var(--preview-grad-2) 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Luften over arket ligger her og ikke i .preview-inner: den blir
     ganget med zoomen der inne, og skulle da krympe med arket. */
  padding: 14px 24px 80px;
  position: relative;
  min-width: 0;
  transition: background-color 0.14s ease;
}
/* Prosenttallet, som et lite merke over arket. Det ligger fast i hjørnet
   — position: fixed og ikke sticky, for ruta ruller begge veier når arket
   er zoomet inn, og et merke som henger igjen i innholdet ville forsvunnet
   ut av skjermen. Nede til høyre: der er det ingen etiketter å dekke over,
   og på en telefon er det dit tommelen rekker. */
.zoom-merke {
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 10;
  padding: 4px 9px;
  border: 1px solid var(--zoom-merke-kant);
  border-radius: 11px;
  background: var(--zoom-merke-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--zoom-merke-tekst);
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.zoom-merke:hover {
  border-color: var(--ui-border);
  color: var(--ui-text);
}
.zoom-merke:active { transform: translateY(1px); }
/* Arkene midtstilles med auto-marger og ikke med align-items. Det ser
   likt ut så lenge det er plass, men forskjellen kommer fram når arket
   er zoomet bredere enn ruta: midtstilt innhold renner ut til begge
   sider, og det som ligger til venstre for kanten kan ingen rulle til.
   Auto-marger gir opp til venstre når plassen er borte, så alt renner ut
   til høyre — og dit kan man rulle med én finger. */
.preview-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.preview-inner > * { margin-left: auto; margin-right: auto; }
.preview-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.page-label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--ui-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ====================================================================
   PAGE STYLES (the actual A5 pamphlet pages)
   ==================================================================== */
.page {
  width: 148mm;
  height: 210mm;
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  padding: 11.5mm 12mm;
  position: relative;
  overflow: hidden;
  font-size: 9.5pt;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(20,18,12,0.18), 0 1px 3px rgba(20,18,12,0.1);
}
.spread {
  display: flex;
  gap: 0;
  box-shadow: 0 4px 16px rgba(20,18,12,0.18), 0 1px 3px rgba(20,18,12,0.1);
}
.spread .page { box-shadow: none; }
.spread .page.right-of-fold {
  border-left: 1px solid var(--rule-soft);
}

/* === PAGE 1 — IDENTIFICATION (cover) ============================== */
.page-1-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-1 .verksted-header {
  font-family: var(--font-sc);
  font-size: 7pt;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  padding-bottom: 2.5mm;
  border-bottom: 0.5pt solid var(--rule);
  text-align: center;
}
.page-1 h1.title-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22pt;
  line-height: 1;
  margin: 8mm 0 0 0;
  color: var(--red-ochre);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.page-1 .saksnr {
  font-family: var(--font-sc);
  font-size: 8.5pt;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 2.5mm;
  margin-bottom: 6mm;
}
.page-1 .ornament {
  font-family: var(--font-display);
  font-size: 12pt;
  color: var(--warm-gold);
  margin: 1mm 0 5mm 0;
  letter-spacing: 0.4em;
  text-align: left;
}
.page-1 .hero {
  flex: 1 1 auto;
  background: var(--paper-warm);
  border: 0.5pt solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5mm;
  overflow: hidden;
  min-height: 60mm;
  position: relative;
}
.page-1 .hero img:not(.ramme-fri) {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Et bilde med en annen form enn ramma faar hvitt rundt seg, ikke varmt
   papir. Arket er hvitt, og fotografiene har hvit bakgrunn naar bakgrunnen
   er tatt bort - da skal ikke ramma tegne en kant rundt boka. */
.page-1 .hero:has(img) { background: var(--paper); }
.page-1 .hero .placeholder {
  font-family: var(--font-body);
  font-size: 9pt;
  color: var(--ink-faint);
  font-style: italic;
}
.page-1 .biblio {
  border-top: 0.5pt solid var(--rule);
  padding-top: 3.5mm;
  margin-bottom: 4mm;
}
.page-1 .biblio .title {
  font-family: var(--font-display);
  font-size: 14pt;
  line-height: 1.15;
  margin: 0 0 1mm 0;
  font-weight: 500;
}
.page-1 .biblio .author {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 10.5pt;
  margin-bottom: 1.5mm;
  color: var(--ink-soft);
}
.page-1 .biblio .imprint {
  font-size: 8.5pt;
  color: var(--ink-soft);
}
.page-1 .meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm 5mm;
  font-size: 8.5pt;
  margin-bottom: 4mm;
  padding-top: 2mm;
}
.page-1 .meta-grid .meta-item .label {
  font-family: var(--font-sc);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-size: 7pt;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5mm;
}
.page-1 .meta-grid .meta-item .value {
  font-size: 9pt;
}
.page-1 .footer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
  border-top: 0.5pt solid var(--rule);
  padding-top: 3mm;
  margin-top: auto;
}
.page-1 .footer-row .label {
  font-family: var(--font-sc);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-size: 7pt;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5mm;
}
.page-1 .footer-row .value {
  font-size: 9pt;
}

/* === PAGE 2 / PAGE 3 — TREATMENT PAGES ============================ */
.section-heading {
  font-family: var(--font-sc);
  font-size: 11pt;
  letter-spacing: 0.14em;
  color: var(--red-ochre);
  margin: 0 0 4mm 0;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 0.5pt solid var(--rule);
  padding-bottom: 2mm;
}
.subsection-heading {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 11pt;
  margin: 3.2mm 0 1.2mm 0;
  color: var(--ink);
  font-weight: 500;
  position: relative;
  padding-left: 0;
}
.subsection-heading::before {
  content: '';
  display: block;
  width: 7mm;
  height: 0.6pt;
  background: var(--warm-gold);
  margin-bottom: 1.2mm;
}
/* Fotoruta er kvadratisk: (124 - 4) / 2 er 60 mm hver vei, og blir
   staaende slik. Fotografiene er det rapporten viser fram, og de skal
   vaere like store i hver sak. Det er teksten som gir etter naar sida
   fylles opp, ikke bildene. */
.photos-row {
  display: grid;
  grid-template-columns: repeat(2, 60mm);
  justify-content: center;
  gap: 4mm;
  margin-bottom: calc(4mm * var(--luft, 1));
}
.photo-block { display: flex; flex-direction: column; }
.photo-frame {
  position: relative;
  width: 100%;
  height: 60mm;
  background: var(--paper-warm);
  border: 0.5pt solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-frame img:not(.ramme-fri) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame:has(img) { background: var(--paper); }
.photo-frame .placeholder {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 8pt;
  color: var(--ink-faint);
}
.photo-block .caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 8.5pt;
  color: var(--ink-soft);
  margin-top: 1.5mm;
  line-height: 1.3;
}
.prose {
  font-family: var(--font-body);
  /* --tekst er én naar teksten faar plass som den er, og settes ned i
     trinn av javascript naar den ikke gjoer det. */
  font-size: calc(10.5pt * var(--tekst, 1));
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0 0 3mm 0;
  color: var(--ink);
}
/* Mellomrommene paa sidene som fylles opp. --luft er én til sida trenger
   plassen, og er det foerste som gir etter — den kan strammes inn uten at
   noe blir mindre. */
.side-innhold > .section-heading { margin-bottom: calc(4mm * var(--luft, 1)); }
.side-innhold > .subsection-heading { margin-top: calc(3.2mm * var(--luft, 1)); }
.side-innhold > .prose { margin-bottom: calc(3mm * var(--luft, 1)); }
.side-innhold > .materials-list { margin-bottom: calc(2.5mm * var(--luft, 1)); }
/* Ett rutenett for hele lista, ikke ett per rad. Da finner etikettkolonna
   bredden sin av den lengste etiketten som faktisk staar der — «Skinn» og
   «Omslagsmateriale» er ikke like lange, og de er ulike igjen paa fransk. */
/* Materiallista er en liste over korte ting, og taaler aa staa tettere
   og litt mindre enn broedteksten. Det er den billigste plassen paa
   sida: den samme opplysningen, halvannen linje spart per materiale. */
.materials-list {
  font-family: var(--font-body);
  font-size: calc(9.4pt * var(--tekst, 1));
  line-height: 1.28;
  margin: 0 0 calc(2.5mm * var(--tekst, 1)) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3mm 2mm;
  align-items: baseline;
}
.material-item { display: contents; }
.material-item .mat-label {
  font-family: var(--font-sc);
  font-size: calc(7.2pt * var(--tekst, 1));
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
.material-item .mat-value {
  font-size: calc(9.4pt * var(--tekst, 1));
}

/* Signaturen staar nederst paa arket, ikke sist i teksten. Blir
   beskrivelsen lang, er det teksten som maa gi etter — ikke linja
   bokbinderen skal skrive under paa. Plassen hennes er holdt av med
   bunnmargen paa side 3. */
.signature-row {
  position: absolute;
  left: 12mm;
  right: 12mm;
  bottom: 11.5mm;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8mm;
}
/* Signaturlinja er 14,3 mm hoey og staar 11,5 mm over arkkanten, som
   resten av bunnmargen. Det som er igjen er luft mellom henne og
   teksten. */
.page-3 { padding-bottom: 28.5mm; }
.sig-block .sig-line {
  border-bottom: 0.6pt solid var(--ink-soft);
  height: 9mm;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 10.5pt;
  display: flex;
  align-items: flex-end;
  padding: 0 1mm 1mm;
  color: var(--ink);
}
.sig-block .sig-caption {
  font-family: var(--font-sc);
  font-size: 7pt;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 1.5mm;
  padding: 0 1mm;
}

/* === PAGE 4 — BACK COVER ========================================== */
.page-4-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0 4mm;
}
.page-4 .logo-area {
  margin-bottom: 8mm;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-4 .logo-area img {
  max-width: 32mm;
  max-height: 32mm;
  object-fit: contain;
}
.page-4 .logo-placeholder {
  width: 28mm;
  height: 28mm;
  border: 0.5pt dashed var(--rule);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 8pt;
  color: var(--ink-faint);
}
.page-4 .verksted-name {
  font-family: var(--font-display);
  font-size: 17pt;
  margin: 0 0 1.5mm 0;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.page-4 .tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 10pt;
  color: var(--red-ochre);
  margin: 0 0 6mm 0;
  line-height: 1.3;
  max-width: 90mm;
}
.page-4 .ornament-divider {
  font-family: var(--font-display);
  font-size: 14pt;
  color: var(--warm-gold);
  margin: 2mm 0 5mm 0;
  letter-spacing: 0.4em;
}
.page-4 .contact {
  font-family: var(--font-body);
  font-size: 10pt;
  line-height: 1.5;
  color: var(--ink);
}
.page-4 .contact .address {
  white-space: pre-line;
  margin-bottom: 2.5mm;
}
.page-4 .contact .epost,
.page-4 .contact .telefon {
  display: inline;
}
.page-4 .contact .nettside {
  margin-top: 2mm;
  font-style: italic;
  color: var(--ink-soft);
}

/* ====================================================================
   MOBIL — telefon og små nettbrett

   Samme dokument, egen utforming: én visning om gangen med fanerad
   nederst, tommelvennlige trykkflater, og oppslaget brettet ut til to
   sider under hverandre så en A5-side får plass i skjermbredden.
   ==================================================================== */
@media (max-width: 900px) {
  :root {
    /* Under 16px zoomer iOS Safari inn av seg selv når et felt får fokus. */
    --fs-input: 16px;
    --fs-prose: 16px;

    /* Luft over det øverste på skjermen. To ting skal dekkes:

       env() er statuslinja, i de tilfellene arket faktisk legges ut helt
       ut til skjermkanten. Der den ikke gjør det, er env() null — og da
       trengs de 30 punktene likevel, for iOS legger et belte over toppen
       av et rullefelt som rekker et stykke lenger ned enn klokka selv.
       Innenfor det beltet blir tekst uskarp.

       Summen er derfor riktig begge veier, og på skrivebordet er hele
       variabelen null. */
    --topp-luft: calc(env(safe-area-inset-top, 0px) + 30px);
  }

  html, body { height: 100%; }

  .app {
    display: block;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .form-panel,
  .preview-panel {
    height: 100%;
    min-height: 0;
    border-right: none;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  }
  .app[data-view="form"]    .preview-panel { display: none; }
  .app[data-view="preview"] .form-panel    { display: none; }

  .mobile-nav { display: flex; }

  /* Verktøylinje — knapt to rader, så skjemaet begynner høyt på skjermen.
     Men ikke helt øverst: saksnummeret er den første linja, og uten luft
     over seg havner den i beltet iOS legger over toppen og blir uskarp.
     Linja ruller bort med resten av skjemaet, så luften koster ingenting
     etter det første blikket. */
  .toolbar { padding: calc(10px + var(--topp-luft)) 14px 10px; }
  .toolbar h1 { font-size: 19px; margin-bottom: 8px; }
  .toolbar .subtitle { display: none; }
  .toolbar .actions { gap: 6px; }
  .btn { min-height: 44px; padding: 10px 12px; }

  /* Tvungent radskift: fire knapper paa foerste rad, resten paa andre.
     Uten det legger «Worksheet» seg opp mot temabryteren. */
  .knappebrekk { display: block; flex-basis: 100%; height: 0; margin: 0; }
  /* Uten auto-margin havner den pent til venstre paa rad to
     i stedet for aa henge alene ute til hoeyre. */
  .theme-toggle { padding: 10px 12px; margin-left: 0; }

  /* Utskriftsrådet gjelder skrivebordet — på telefonen er det bare støy. */
  .print-hint { display: none; }
  .helper-tip { margin-bottom: 12px; }

  /* skjema — alt som skal treffes med tommelen får 44 px */
  .form-content { padding: 14px 16px 24px; }
  .form-section summary { min-height: 52px; }
  .form-row input[type="text"],
  .form-row input[type="email"],
  .form-row input[type="url"],
  .form-row input[type="date"] { min-height: 44px; }
  .form-row.compact { grid-template-columns: 1fr; gap: 12px; }
  .materials-grid { grid-template-columns: 1fr; }
  .thumb-row img { width: 64px; height: 64px; }
  .thumb-row .clear-btn { min-height: 40px; padding: 8px 14px; }
  .file-input-wrap { gap: 10px; }

  /* forhåndsvisning */
  /* pan-x pan-y: én finger ruller som før, to fingre er ikke lenger
     nettleserens klyp om hele dokumentet — den gesten er vår, og
     forstørrer arket. Skjemaet beholder nettleserens eget klyp. */
  /* Nederst: plass til fanereaden. Kortformen her kommer etter regelen
     som gir begge panelene den plassen, og maa ha den med seg selv. */
  .preview-panel {
    padding: calc(6px + var(--topp-luft)) 12px
             calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
    touch-action: pan-x pan-y;
  }
  /* Fanereaden ligger fast nederst og skal ikke kunne dras med. */
  .mobile-nav { touch-action: manipulation; }
  /* Merket står over fanereaden, klar av den. */
  .zoom-merke {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    padding: 6px 11px;
  }
  .preview-inner { gap: 18px; }

  /* Oppslaget brettes ut: side 2 over side 3 i stedet for ved siden av. */
  .spread { flex-direction: column; }
  .spread .page.right-of-fold {
    border-left: none;
    border-top: 1px solid var(--rule-soft);
  }
}

/* Lenken kunden faar, nederst i foer-og-etter-visningen. */
.foretter-deling {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(242, 237, 226, 0.14);
  margin-bottom: 8px;
}
.deling-rad {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.foretter-deling .btn {
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.foretter-deling .btn:hover { background: rgba(242, 237, 226, 0.16); }
/* Adressen er lang. Den faar plassen som er igjen, og teksten er liten
   nok til at hele den kortere enden er lesbar. */
.deling-url {
  flex: 1 1 14em;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(242, 237, 226, 0.25);
  border-radius: 2px;
  background: rgba(242, 237, 226, 0.06);
  color: #f2ede2;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
}
.deling-hjelp {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  line-height: 1.45;
  color: rgba(242, 237, 226, 0.6);
}


/* ====================================================================
   DEN OFFENTLIGE VISNINGEN

   Siden bak en delelenke. Den har ingen verktoeylinje og ingen knapper
   som gjoer noe med saken — bare boka, bildene og stripa mellom dem.

   Bildene er de samme filene rapporten bruker, og utsnittet legges paa
   med de samme tre variablene: img.ramme-fri gjoer jobben. Lagene er to
   bokser over hverandre, og det er etter-boksen som baerer innrettingen
   og stripa. Uten boksene ville utsnittet og innrettingen vaert to
   transformasjoner paa samme element, og bare én av dem ville staatt.
   ==================================================================== */

.delt-kropp {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #17150f;
  color: #f2ede2;
  -webkit-text-size-adjust: 100%;
}

.delt-flate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px
           calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.delt-topp { text-align: center; }

.delt-verksted {
  font-family: var(--font-sc, var(--font-ui));
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.55);
}
.delt-tittel {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f2ede2;
}
.delt-forfatter {
  margin-top: 2px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  color: rgba(242, 237, 226, 0.7);
}

.delt-faner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* Scenen tar plassen som er igjen, og ruta er kvadratisk fordi
   fotorammene i rapporten er det. Den er saa stor som hoeyden tillater,
   og aldri bredere enn skjermen.

   Tallet 230 er hoeyden paa alt annet: overskrift, faner, hjelpetekst,
   luft og marger, maalt til 206 px med tittelen paa én linje. Resten er
   rom for en tittel som brekker.

   Det ble et tall og ikke aspect-ratio med tak begge veier. Scenen er et
   flex-barn som tar det som er igjen, og da ville ruta tatt hoeyden sin
   fra sitt eget breddetak — scenen vokste etter ruta i stedet for
   omvendt, og sida rant over kanten. */
.delt-scene {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delt-rute {
  position: relative;
  display: none;
  /* Innrettingen kan skalere etter-laget litt opp, og da stikker det ut
     over kanten. Ruta er kvadratet, og viser ikke mer enn det. */
  overflow: hidden;
  width: min(100%, 100vh - 230px, 720px);
  aspect-ratio: 1;
  background: var(--paper);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.delt-rute.valgt { display: block; }
.delt-rute:focus-visible { outline: 2px solid rgba(242, 237, 226, 0.7); outline-offset: 3px; }

.delt-lag {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Hvitt under: naar bildet ikke naar ut i ramma, er det papir man ser
     og ikke bildet i laget under. */
  background: var(--paper);
}
/* Innrettingen flytter dette, ikke laget. Da staar hullet stille mens
   bildet flytter seg — se .foretter-etterlag for hele forklaringen. */
.delt-juster {
  position: absolute;
  inset: 0;
}
/* Uten utsnitt fyller bildet ruta og det som ikke faar plass beskjaeres —
   det samme object-fit: cover rapportsidene gjoer. */
.delt-lag img:not(.ramme-fri) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* Etter-boksen ligger oeverst og vises bare til hoeyre for stripa.
   Samme todeling og samme strekking av stripa som i appen. */
.delt-etter {
  -webkit-mask-image: linear-gradient(to right,
    transparent calc(var(--pos, 50%) * 1.07 - 7%),
    #000 calc(var(--pos, 50%) * 1.07));
  mask-image: linear-gradient(to right,
    transparent calc(var(--pos, 50%) * 1.07 - 7%),
    #000 calc(var(--pos, 50%) * 1.07));
}
.delt-etter .delt-juster {
  transform: translate(var(--jx, 0%), var(--jy, 0%)) scale(var(--js, 1));
}

.delt-hjelp {
  margin: 0;
  max-width: 34em;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  line-height: 1.5;
  color: rgba(242, 237, 226, 0.6);
}

/* Lenken som ikke virker lenger, og saken uten bilder: samme kort. */
.delt-beskjed {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
.delt-beskjed h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 500;
  color: #f2ede2;
}
.delt-beskjed p {
  margin: 0;
  max-width: 30em;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  line-height: 1.55;
  color: rgba(242, 237, 226, 0.65);
}

@media (max-width: 900px) {
  /* Paa en telefon er hoeyden det knappe godet: header, faner og
     hjelpetekst tar mindre, og ruta faar resten. */
  .delt-flate { gap: 10px; }
  .delt-rute { width: min(100%, 100vh - 260px, 720px); }
}


/* ====================================================================
   PRINT IMPOSITION (visible only when printing)
   ==================================================================== */
.print-only { display: none; }

@media print {
  /* Utskriften er alltid papir og blekk, uansett hvilket tema skjermen står i. */
  :root[data-theme="dark"] { color-scheme: light; }
  body { background: white; color: var(--ink); }
  .form-panel, .preview-panel, .toolbar, .page-label, .preview-block,
  .mobile-nav, .start, .dialog-bak { display: none !important; }

  /* Heftet og arbeidsseddelen skrives ut hver for seg. Uten
     jobbark-modus er visningen borte; med den er den alt som står igjen. */
  .jobb-visning, .bilde-bak { display: none !important; }

  :root.rr-skriv-jobbark .print-only { display: none !important; }
  :root.rr-skriv-jobbark .jobb-visning {
    display: block !important;
    position: static !important;
    background: none !important;
  }
  :root.rr-skriv-jobbark .jobb-verktoy { display: none !important; }
  :root.rr-skriv-jobbark .jobb-flate {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  :root.rr-skriv-jobbark .jobbark {
    display: flex !important;
    zoom: 1 !important;
    box-shadow: none !important;
  }
  :root.rr-skriv-jobbark .tilbudsark {
    display: block !important;
    zoom: 1 !important;
    box-shadow: none !important;
  }

  .app { display: block; height: auto; overflow: visible; }
  .print-only { display: block; }

  @page {
    size: A4 landscape;
    margin: 0;
  }

  html, body { margin: 0; padding: 0; background: white; }

  .sheet {
    width: 297mm;
    height: 210mm;
    display: flex;
    page-break-after: always;
    margin: 0;
    padding: 0;
    background: white;
  }
  .sheet:last-child { page-break-after: auto; }
  .sheet .page {
    box-shadow: none !important;
    width: 148.5mm;
    height: 210mm;
    page-break-inside: avoid;
  }

  /* Force colors to print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ====================================================================
   STARTSKJERM, DIALOGER OG PROSJEKTLINJE

   Alt som hører til databaseutgaven. Bruker de samme fargetokenene som
   resten, så lys og mørk modus følger med uten videre.
   ==================================================================== */

.start {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--topp-luft)) 24px 24px;
  background: var(--ui-bg);
  overflow-y: auto;
}
.start-kort {
  width: 100%;
  max-width: 560px;
  padding: 34px 34px 30px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  box-shadow: 0 2px 14px var(--ui-shadow);
}
.start-tittel {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--ui-accent-2);
}
.start-hjelp {
  margin: 0 0 26px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sub);
  color: var(--ui-muted);
}
.start-valg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.start-knapp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-card);
  color: var(--ui-text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.1s ease, background-color 0.1s ease, transform 0.06s ease;
}
.start-knapp:hover { border-color: var(--ui-accent); background: var(--ui-panel-2); }
.start-knapp:active { transform: translateY(1px); }
.start-knapp:focus-visible {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.start-knapp svg {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  stroke: var(--ui-accent-2);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.start-knapp-tittel { font-size: var(--fs-summary); font-weight: 500; }
.start-knapp-under { font-size: var(--fs-help); color: var(--ui-muted); line-height: 1.35; }
.start-feil { margin: 18px 0 0; color: var(--ui-accent-2); font-size: var(--fs-help); }

/* ---- dialoger ---------------------------------------------------- */
.dialog-bak {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 14, 9, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dialog {
  width: 100%;
  max-width: 420px;
  padding: 24px 26px 20px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.dialog-bred { max-width: 640px; }
.dialog h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ui-accent-2);
}
.dialog-hjelp {
  margin: 0 0 18px;
  font-size: var(--fs-help);
  color: var(--ui-muted);
  font-style: italic;
}
.dialog input[type="text"],
.dialog input[type="search"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-input-bg);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--fs-input);
}
.dialog input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.dialog-sok { margin-bottom: 14px; }
.dialog-feil { margin: 12px 0 0; color: var(--ui-accent-2); font-size: var(--fs-help); }
.dialog-knapper {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ---- prosjektlisten ---------------------------------------------- */
.prosjektliste {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-card);
}
.prosjektrad {
  display: grid;
  grid-template-columns: 64px 8.5em 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--fs-input);
  text-align: left;
  cursor: pointer;
}
.prosjektrad:last-child { border-bottom: 0; }
.prosjektrad:hover { background: var(--ui-panel-2); }
.prosjektrad .nr {
  align-self: center;
  font-variant-numeric: tabular-nums;
  color: var(--ui-accent-2);
  font-weight: 500;
}
.prosjektrad .hvem { color: var(--ui-text); }
.prosjektrad .hvem .bok { display: block; font-size: var(--fs-help); color: var(--ui-muted); }
.prosjektrad .naar { font-size: var(--fs-help); color: var(--ui-faint); white-space: nowrap; }
.liste-tom {
  padding: 22px 14px;
  color: var(--ui-faint);
  font-style: italic;
  font-size: var(--fs-help);
  text-align: center;
}

/* ---- prosjektlinja i verktøylinja -------------------------------- */
.prosjektlinje {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
}
.prosjektnr {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ui-accent-2);
}
.prosjekteier { color: var(--ui-muted); }
.lagringsstatus {
  margin-left: auto;
  font-size: var(--fs-help);
  color: var(--ui-faint);
  font-style: italic;
}
.lagringsstatus.endret { color: var(--ui-gold); font-style: normal; }
.lagringsstatus.lagrer { color: var(--ui-faint); }
.lagringsstatus.feil { color: var(--ui-accent-2); font-style: normal; }

@media (max-width: 900px) {
  .start-valg { grid-template-columns: 1fr; }
  .start-kort { padding: 26px 22px 24px; }
  .dialog { padding: 20px 18px 16px; }
  .prosjektrad { grid-template-columns: 1fr; gap: 2px; }
  .prosjektrad .naar { grid-column: 1; }
  .lagringsstatus { margin-left: 0; }
}

/* ====================================================================
   PASSORDPORTEN
   ==================================================================== */
.port-flate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ui-bg);
}
.port-kort {
  width: 100%;
  max-width: 380px;
  padding: 32px 30px 28px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  box-shadow: 0 2px 14px var(--ui-shadow);
}
.port-tittel {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ui-accent-2);
}
.port-hjelp {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sub);
  color: var(--ui-muted);
}
.port-kort input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-input-bg);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: 16px;
}
.port-kort input[type="password"]:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.port-knapp { width: 100%; margin-top: 16px; min-height: 44px; }


/* ====================================================================
   UTSKRIFTSSPRÅK OG MINIATYRER
   ==================================================================== */

/* Velgeren for utskriftsspråk står ved siden av utskriftsknappen, ikke i
   innstillingene, fordi den byttes fra sak til sak — én kunde vil ha
   rapporten på engelsk, den neste på norsk. */
.utskrift-sprak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 37px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-input-bg);
  color: var(--ui-muted);
  cursor: pointer;
  transition: border-color 0.1s ease;
}
.utskrift-sprak:hover { border-color: var(--ui-accent); }
.utskrift-sprak:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.utskrift-sprak svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.utskrift-sprak select {
  border: 0;
  background: transparent;
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--fs-btn);
  padding: 4px 0;
  cursor: pointer;
}
.utskrift-sprak select:focus { outline: none; }

/* Bare for skjermlesere. */
.skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Miniatyren i prosjektlisten. Hovedbildet hvis det finnes, ellers et av
   de andre — nok til å kjenne igjen boka uten å åpne den. */
.rad-bilde {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-panel-2);
}
.rad-bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .utskrift-sprak { min-height: 44px; }
  .prosjektrad {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "bilde nr"
      "bilde hvem"
      "bilde naar";
    gap: 2px 12px;
    align-items: start;
  }
  .prosjektrad .rad-bilde {
    grid-area: bilde;
    align-self: center;
    width: 56px;
    height: 56px;
  }
  .prosjektrad .nr   { grid-area: nr; }
  .prosjektrad .hvem { grid-area: hvem; }
  .prosjektrad .naar { grid-area: naar; }
}


/* ====================================================================
   ARBEIDSSEDDELEN (JOB SHEET)

   A4 staaende, bare synlig ved utskrift. Rapporten skrives ut som A4
   liggende for heftet, saa de to kan ikke dele @page-regel — regelen for
   staaende blir lagt inn i hodet i det oeyeblikket arket skal skrives ut,
   og fjernet igjen etterpaa.
   ==================================================================== */

.jobbark {
  display: none;
  width: 210mm;
  height: 297mm;
  /* Bunnmargen har plass til nettleserens egen bunntekst ved utskrift
     fra telefonen, slik at den ikke lander oppa signaturraden. */
  padding: 15mm 15mm 20mm;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  flex-direction: column;
}

/* Linjene og prikkene. 26 % gir nok til aa skrive etter uten aa kjempe
   med blyanten om oppmerksomheten. */
.jobbark {
  /* Solid, ikke halvgjennomsiktig: en laserskriver rastrerer gjennomsiktighet
     til et punktmoenster, og det blir grumsete i haartynne strek. */
  --skrivelinje: #b4b1a9;
}

.jobb-topp {
  display: grid;
  grid-template-columns: 1fr 26mm;
  gap: 8mm;
  border-bottom: 0.8pt solid var(--rule);
  padding-bottom: 5mm;
}
.jobb-topp .venstre { min-width: 0; }

.jobb-verksted {
  font-family: var(--font-sc);
  font-size: 7.5pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2mm;
}
.jobb-saksnr {
  font-family: var(--font-display);
  font-size: 26pt;
  line-height: 1;
  font-weight: 500;
  color: var(--red-ochre);
  letter-spacing: 0.01em;
}
.jobb-eier {
  font-size: 13pt;
  margin-top: 1.5mm;
}
.jobb-bok {
  font-style: italic;
  font-size: 10.5pt;
  color: var(--ink-soft);
  margin-top: 0.8mm;
}

.jobb-kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5mm 6mm;
  margin-top: 4mm;
}
.jobb-kontakt .post { min-width: 0; }
.jobb-kontakt .etikett {
  display: block;
  font-family: var(--font-sc);
  font-size: 6.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.jobb-kontakt .verdi {
  font-size: 9.5pt;
  white-space: pre-line;
}

.jobb-qr { text-align: center; }
.jobb-qr svg {
  width: 26mm;
  height: 26mm;
  display: block;
}
.jobb-qr .tekst {
  font-family: var(--font-sc);
  font-size: 6pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.2mm;
}

.jobb-seksjon {
  margin-top: 5mm;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.jobb-seksjon > h3 {
  font-family: var(--font-sc);
  font-size: 8.5pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-ochre);
  font-weight: 500;
  margin: 0 0 2mm;
  padding-bottom: 1mm;
  border-bottom: 0.5pt solid var(--rule-soft);
}

/* Skrivelinjene er ekte elementer med kantlinje, ikke en gradient.
   Chrome flater ut gradienter naar den lager PDF-en til skriveren, og en
   hairline inne i en gradient overlever ikke — den ble til et fylt felt paa
   laser. En kantlinje er en vektor hele veien til papiret.

   Hver linje tar like stor del av hoeyden, saa de fyller feltet joevnt
   uansett hvor hoeyt det blir, og det blir aldri en halv linje nederst. */
.jobb-linjer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.jobb-linjer span {
  flex: 1;
  min-height: 6mm;
  border-bottom: 0.4pt solid var(--skrivelinje);
}
.jobb-linjer span:last-child { border-bottom: 0; }

/* Prikkerutenettet er en SVG med et moenster. Ogsaa vektor, av samme grunn. */
.jobb-prikker {
  flex: 1;
  min-height: 0;
}
.jobb-prikker svg {
  display: block;
  width: 100%;
  height: 100%;
}

.jobb-status {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5mm 3.6mm;
  font-size: 8.2pt;
  color: var(--ink-soft);
}
.jobb-status span {
  display: inline-flex;
  align-items: center;
  gap: 1.6mm;
}
.jobb-boks {
  width: 3.6mm;
  height: 3.6mm;
  border: 0.6pt solid var(--skrivelinje);
  display: inline-block;
  flex: none;
}

/* Ruta nederst er til aa krysse av med penn naar kunden sier ja, saa den
   er stoerre enn stegene over. Er tilbudet allerede merket godtatt i
   skjemaet, trykkes den krysset. */
.jobb-godtatt-rute {
  display: flex;
  align-items: center;
  gap: 2.5mm;
  align-self: end;
  padding-bottom: 0.5mm;
}
.jobb-godtatt-rute span {
  font-family: var(--font-sc);
  font-size: 7.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}
.jobb-boks.stor {
  width: 6.5mm;
  height: 6.5mm;
  border-width: 0.8pt;
  position: relative;
}
/* Krysset er to streker og ikke et tegn: en font kan mangle det, en strek
   kan ikke mangle. */
.jobb-boks.stor.krysset::before,
.jobb-boks.stor.krysset::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  border-top: 0.8pt solid var(--ink-soft);
}
.jobb-boks.stor.krysset::before { transform: rotate(45deg); }
.jobb-boks.stor.krysset::after  { transform: rotate(-45deg); }

.jobb-bunn {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6mm;
  border-top: 0.5pt solid var(--rule);
  padding-top: 3mm;
  margin-top: 4mm;
}
.jobb-bunn .etikett {
  display: block;
  font-family: var(--font-sc);
  font-size: 6.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1mm;
}
.jobb-bunn .strek {
  border-bottom: 0.5pt solid var(--skrivelinje);
  min-height: 5mm;
  font-size: 10pt;
  padding-bottom: 0.5mm;
}


/* ====================================================================
   TITTELRAD, KORTE KNAPPETEKSTER OG JOBBVISNINGEN
   ==================================================================== */

.toolbar-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.toolbar-topp h1 { margin: 0; }

/* Knappene bærer to tekster: den lange på skjerm, den korte på mobil. */
.kort { display: none; }

/* ---- arbeidsseddelen som visning --------------------------------- */

/* Den blir stående til du lukker den. Chrome på Android blokkerer
   window.print() av og til, og da må utskrift fra nettlesermenyen gi det
   samme arket — det gjør den bare hvis modusen er varig og ikke et blunk
   rundt et kall. */
.jobb-visning {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg);
}
.jobb-verktoy {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Stripa er det øverste på skjermen og må ha luft over seg. */
  padding: calc(10px + var(--topp-luft)) 14px 10px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
}
.jobb-merke {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jobb-flate {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
}
.jobb-flate .jobbark {
  display: flex;
  flex: none;
  box-shadow: 0 4px 16px rgba(20, 18, 12, 0.22);
}

@media (max-width: 900px) {
  /* Verktøylinja skal ned på to knapperader. Tittelen er tatt bort — er du
     inne i en sak, forteller saksnummeret deg mer enn ordet
     «Restaureringsrapport» gjør — og temabryteren står som et ikon oppe i
     hjørnet der tittelen sto. */
  .toolbar { position: relative; }
  .toolbar h1 { display: none; }
  .toolbar-topp {
    position: absolute;
    top: calc(8px + var(--topp-luft));
    right: 12px;
    margin: 0;
  }
  .theme-toggle { padding: 8px 9px; min-height: 36px; }
  .theme-toggle .lang { display: none; }
  .prosjektlinje { padding-right: 46px; }

  .lang { display: none; }
  .kort { display: inline; }

  .toolbar .actions { gap: 6px; }
  .btn { padding: 10px 11px; }
  .prosjektlinje { margin-bottom: 8px; }
  .utskrift-sprak { padding: 0 6px 0 8px; gap: 4px; }
  .utskrift-sprak select { font-size: var(--fs-help); }

  .jobb-flate { padding: 10px; }
}


/* ====================================================================
   PRISSETTING I SKJEMAET

   Egen avdeling, lukket til vanlig. Tallene her naar bare tilbudsarket.
   ==================================================================== */

.prisliste {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--ui-bg);
}

.prislinje {
  display: grid;
  grid-template-columns: 1fr 9.5em 2em;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.prisvalg {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--ui-text);
  cursor: pointer;
  min-width: 0;
}
.prisvalg input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--ui-accent);
  cursor: pointer;
}
.prisvalg span { min-width: 0; overflow-wrap: anywhere; }

.prisbelop { text-align: right; }

/* Egne linjer: avkryssing, navn og beloep paa samme rad, med en
   fjerneknapp ytterst. Navnefeltet ser ut som en etikett heller enn en
   boks — det er en overskrift man kan skrive i, ikke enda et skjemafelt. */
.prislinje-egen .prisvalg { gap: 9px; }

.prisnavn {
  min-width: 0;
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--ui-border);
  border-radius: 0;
  padding: 4px 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--ui-text);
}
.prisnavn:focus {
  outline: none;
  border-bottom-color: var(--ui-accent);
  border-bottom-style: solid;
}

.prisbort {
  border: 0;
  background: none;
  color: var(--ui-muted);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.prisbort:hover { color: var(--ui-accent-2); background: var(--ui-panel-2); }

.prispluss {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

.prisgodtatt {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-bg);
}

.prissum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--ui-border);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--ui-muted);
}
.prissum strong {
  font-size: calc(var(--fs-label) * 1.25);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

/* Hintet under den korte prosjektlisten. */
.liste-hint {
  margin: 8px 2px 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: var(--ui-muted);
}


/* ====================================================================
   TILBUDSSKJEMAET

   A4 staaende, som arbeidsseddelen, men et flytende dokument: blir
   tilstandsbeskrivelsen lang, faar den gaa over paa neste ark heller enn
   aa bli klemt sammen.
   ==================================================================== */

.tilbudsark {
  display: none;
  width: 210mm;
  min-height: 297mm;
  /* Bunnmargen er ikke pynt. Skriver du ut fra telefonen, trykker
     nettleseren adresse og klokkeslett langs nederste kant, og da skal
     det ikke ligge tekst under. */
  padding: 14mm 15mm 16mm;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 9.5pt;
  line-height: 1.45;
  box-sizing: border-box;
}
.jobb-flate .tilbudsark { display: block; flex: none; box-shadow: 0 4px 16px rgba(20, 18, 12, 0.22); }

/* Visningen rommer begge arkene. Bare det som er valgt staar fram — paa
   skjermen og paa papiret. */
.jobb-visning[data-ark="jobb"]   .tilbudsark,
.jobb-visning[data-ark="tilbud"] .jobbark { display: none !important; }

.tilbud-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10mm;
  border-bottom: 0.8pt solid var(--rule);
  padding-bottom: 3mm;
}
.tilbud-verksted {
  font-family: var(--font-sc);
  font-size: 7.5pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tilbud-tittel {
  font-family: var(--font-display);
  font-size: 22pt;
  font-weight: 500;
  line-height: 1.1;
  margin: 1.2mm 0 0;
  color: var(--ink);
}
.tilbud-nr { text-align: right; white-space: nowrap; }
.tilbud-nr .saksnr {
  font-family: var(--font-display);
  font-size: 15pt;
  color: var(--red-ochre);
}
.tilbud-nr .dato {
  font-size: 8.5pt;
  color: var(--ink-soft);
  margin-top: 1mm;
}

.tilbud-til {
  display: flex;
  align-items: baseline;
  gap: 4mm;
  margin: 3mm 0 4mm;
}
.tilbud-til .etikett {
  font-family: var(--font-sc);
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tilbud-til .navn { font-size: 13pt; }

.tilbudsark h3 {
  font-family: var(--font-sc);
  font-size: 7.5pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5mm;
  font-weight: 600;
}

.tilbud-bok, .tilbud-bilder, .tilbud-bolk { margin-bottom: 3.5mm; }
.tilbud-bok, .tilbud-pris { page-break-inside: avoid; }

.tilbud-boktittel { font-size: 13pt; font-style: italic; }
.tilbud-bokforfatter { font-size: 10pt; color: var(--ink-soft); margin-top: 0.6mm; }

.tilbud-fakta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5mm 6mm;
  margin-top: 2.5mm;
}
.tilbud-fakta .post { min-width: 0; }
.tilbud-fakta .etikett {
  display: block;
  font-family: var(--font-sc);
  font-size: 6.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tilbud-fakta .verdi { font-size: 9.5pt; }

/* Samme rute som paa rapporten: 60 x 60 mm. Da er ett utsnitt riktig
   begge steder, og det er hele poenget med aa kunne stille det inn. */
.tilbud-bilderad {
  display: grid;
  grid-template-columns: repeat(2, calc(60mm * var(--fotoskala, 1)));
  gap: 6mm;
}
.tilbud-bilderad figure { margin: 0; }
.tilbud-fotoramme {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(60mm * var(--fotoskala, 1));
  border: 0.5pt solid var(--rule);
  background: var(--paper);
}
.tilbud-bilderad img:not(.ramme-fri) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tilbud-bilderad figcaption {
  font-size: 8pt;
  color: var(--ink-soft);
  margin-top: 1.2mm;
  line-height: 1.35;
}

.tilbud-prosa { white-space: pre-line; }

.tilbud-pris {
  margin-top: 3.5mm;
  border-top: 0.8pt solid var(--rule);
  padding-top: 3mm;
}

.tilbud-tabell {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tilbud-tabell td {
  padding: 1.5mm 0;
  border-bottom: 0.4pt solid var(--rule-faint, var(--rule));
  vertical-align: baseline;
}
.tilbud-tabell .belop { text-align: right; white-space: nowrap; }
.tilbud-tabell .tom {
  color: var(--ink-faint);
  font-style: italic;
  text-align: center;
}
.tilbud-tabell .sum td {
  border-bottom: 0;
  border-top: 0.8pt solid var(--rule);
  padding-top: 2.5mm;
  font-size: 12pt;
  font-weight: 600;
}

.tilbud-forbehold {
  font-size: 8pt;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 3mm 0 0;
}

.tilbud-fot {
  margin-top: 3.5mm;
  padding-top: 2.5mm;
  border-top: 0.4pt solid var(--rule);
  font-size: 7.5pt;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 900px) {
  .prislinje { grid-template-columns: 1fr 7.5em 2.2em; gap: 8px; }
  /* Paa en telefon er det ikke plass til avkryssing, navn og beloep paa
     samme linje uten at navnet blir klemt. Navnet faar hele bredden, og
     beloepet legger seg under. */
  .prislinje-egen {
    grid-template-columns: 1fr auto;
    grid-template-areas: "navn bort" "belop bort";
    align-items: center;
    row-gap: 4px;
  }
  .prislinje-egen .prisvalg  { grid-area: navn; }
  .prislinje-egen .prisbelop { grid-area: belop; justify-self: end; width: 7.5em; }
  .prislinje-egen .prisbort  { grid-area: bort; align-self: center; }

  .prisbort { font-size: 26px; padding: 6px 4px; }
  .prisnavn { font-size: 16px; }   /* under 16 px zoomer iOS inn */
}


/* ====================================================================
   BILDERAMMA

   Et fotografi uten justering fyller ramma og blir beskaaret i kantene —
   det er standardoppfoerselen og staar uroert. Har bokbinderen justert
   utsnittet, tegnes bildet i stedet inne i ramma etter zoom og
   forskyvning, og det som blir til overs staar hvitt. Arket er hvitt, saa
   paa papiret ser man bare et mindre bilde.

   z = 1 viser hele bildet uansett hvilken form ramma har. Hoeyere tall
   gaar naermere inn. dx og dy er i prosent av bildets egen stoerrelse,
   saa et drag kjennes likt paa alle zoom-nivaaer.
   ==================================================================== */

img.ramme-fri {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--z, 1));
  height: calc(100% * var(--z, 1));
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) translate(var(--dx, 0%), var(--dy, 0%));
  background: var(--paper);
}


/* ====================================================================
   BILDEVISNINGEN
   ==================================================================== */

.bilde-bak {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg);
}

.bilde-verktoy {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Stripa er det øverste på skjermen og må ha luft over seg. */
  padding: calc(10px + var(--topp-luft)) 14px 10px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
}
#bildeLagre { font-size: var(--fs-help); padding: 9px 10px; }
/* Mens fila hentes: knappen skal ikke kunne trykkes en gang til. */
#bildeLagre.jobber { opacity: 0.55; pointer-events: none; }
.bilde-merke {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bilde-flate {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;      /* holder paa slagskyggen som moerklegger utsiden */
}

/* Ramma har samme form og rolle som ruta bildet havner i paa arket: det
   som ligger innenfor er det som blir trykt. Utsiden er ikke klippet bort,
   bare moerklagt, saa man ser hva man holder paa aa miste. */
.bilde-ramme {
  position: relative;
  aspect-ratio: var(--form, 1);
  max-width: min(72%, 62vh * var(--form, 1));
  max-height: 82%;
  width: 100%;
  background: var(--paper);
  cursor: grab;
  touch-action: none;
}

/* Hairline paa ruta, og femti prosent moerkt paa alt utenfor. Det ligger
   over bildet, saa det som stikker ut er synlig men tydelig utenfor. */
.bilde-ramme::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(250, 248, 244, 0.55),
    0 0 0 2px rgba(20, 18, 12, 0.65),
    0 0 0 9999px rgba(20, 18, 12, 0.5);
}

/* Mens bakgrunnsfargen velges er ruta i veien: da skal hele fotografiet
   staa fram, uten maske og uten moerklegging. */
.bilde-ramme.velger { max-width: min(100%, 78vh * var(--form, 1)); max-height: 100%; }

.bilde-ramme.velger::after { display: none; }
.bilde-ramme.drar { cursor: grabbing; }
.bilde-ramme img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--z, 1));
  height: calc(100% * var(--z, 1));
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) translate(var(--dx, 0%), var(--dy, 0%));
  user-select: none;
  /* Nettleserens egen bildedragning ville stjaalet musedraget. */
  -webkit-user-drag: none;
}

.bilde-styring {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-border);
}
.bilde-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--ui-muted);
}
.bilde-zoom span { white-space: nowrap; }
.bilde-zoom input[type="range"] {
  flex: 1;
  min-width: 0;
  /* Paa en stor skjerm ser en skyveknapp over hele bredden hjelpelos ut,
     og den er ikke lettere aa treffe for det. */
  max-width: 380px;
  accent-color: var(--ui-accent);
  height: 28px;
}
.bilde-hjelp {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: var(--ui-muted);
  line-height: 1.45;
}
.bare-mobil { display: none; }

/* Miniatyrene i skjemaet sier fra at de kan trykkes paa. */
.thumb-row img.miniatyr { cursor: zoom-in; }
.thumb-row img.miniatyr:hover,
.thumb-row img.miniatyr:focus-visible {
  border-color: var(--ui-accent);
  outline: none;
}
.preview-inner img[data-felt] { cursor: zoom-in; }


/* ====================================================================
   KUNDEFORSLAG
   ==================================================================== */

.kundeforslag {
  margin-top: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-bg);
  overflow: hidden;
}
.kundeforslag-tittel {
  padding: 7px 12px;
  font-family: var(--font-sc, var(--font-ui));
  font-size: var(--fs-help);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-muted);
  background: var(--ui-panel-2);
  border-bottom: 1px solid var(--ui-border);
}
.kundeliste { max-height: 240px; overflow-y: auto; }

.kunderad {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "navn antall" "under antall";
  gap: 1px 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ui-text);
}
.kunderad:last-child { border-bottom: 0; }
.kunderad:hover, .kunderad:focus-visible { background: var(--ui-panel-2); outline: none; }
.kunderad .navn   { grid-area: navn; font-size: var(--fs-label); }
.kunderad .under  {
  grid-area: under;
  font-size: var(--fs-help);
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kunderad .antall {
  grid-area: antall;
  align-self: center;
  font-size: var(--fs-help);
  color: var(--ui-muted);
  white-space: nowrap;
}

.kunde-hentet {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: var(--ui-accent);
  line-height: 1.45;
}


/* Mobiltilpasninger som maa staa etter grunnreglene over. */
@media (max-width: 900px) {
  /* Raadet om aa holde fingeren inne gjelder bare telefonen. */
  .bare-mobil { display: inline; }

  /* Fem knapper og en etikett er for mye paa en telefonbredde. Etiketten
     viker — saksnummeret staar uansett i skjemaet bak — og knappene
     settes i et rutenett med tre like kolonner, saa raden er jevn enten
     det staar fire eller fem knapper der. */
  .bilde-merke { display: none; }
  .bilde-verktoy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: calc(8px + var(--topp-luft)) 10px 8px;
  }
  .bilde-verktoy .btn {
    justify-content: center;
    text-align: center;
    padding: 9px 6px;
    min-height: 40px;
    font-size: var(--fs-help);
  }
  .bilde-flate { padding: 12px; }
  .bilde-ramme { max-width: min(92%, 52vh * var(--form, 1)); }
  .bilde-ramme.velger { max-width: 100%; }
}


/* Kundeforslag paa eier-feltet i skjemaet.

   Lista legger seg oppaa feltene under i stedet for aa skyve dem nedover:
   skjemaet skal staa stille mens man skriver. */
.felt-med-forslag { position: relative; }

.kundeforslag-svevende {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  margin-top: 4px;
  background: var(--ui-panel);
  box-shadow: 0 8px 22px rgba(20, 18, 12, 0.22);
}
.kundeforslag-svevende .kundeliste { max-height: 200px; }


/* ====================================================================
   BAKGRUNNSVERKTOEYET
   ==================================================================== */

/* Mens fargen velges er ramma et sikte og ikke noe aa dra i. */
.bilde-ramme.velger { cursor: crosshair; }
.bilde-ramme.velger img { cursor: crosshair; }

.bilde-bakgrunn { border-top: 1px solid var(--ui-border); }
.bilde-bakgrunn .bilde-hjelp { margin-top: 0; }
.bilde-bakgrunn .bilde-zoom { margin-bottom: 8px; }

.bakgrunn-knapper {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .bakgrunn-knapper .btn { flex: 1; justify-content: center; text-align: center; }
}


/* Konfliktdialogen: tre valg under hverandre, saa ingen av dem ser ut som
   det aapenbare og ufarlige. Det er det ikke. */
.dialog-knapper-stablet {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.dialog-knapper-stablet .btn { justify-content: center; text-align: center; }

/* Hvert valg baerer sin egen konsekvens. Sto den som en fotnote under
   alle tre, var det ikke til aa vite hvilken den gjaldt. */
.valgknapp {
  display: block;              /* .btn er ikke flex, saa spennene maa settes */
  text-align: center;
  padding: 10px 14px;
  line-height: 1.35;
}
.valgtittel { display: block; }
.valgunder {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-help);
  opacity: 0.75;
}


/* ====================================================================
   FOER OG ETTER

   Bygget for telefonskjerm foerst — det er der den blir vist fram. Moerk
   flate rundt, saa fotografiet er det eneste som lyser.
   ==================================================================== */

/* Tegntelleren under feltene som fyller sidene i rapporten. Tallet er et
   pekepinn; fargen kommer fra maalingen av sida og er den som teller. */
.tegnteller {
  margin: 3px 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: var(--ui-muted);
  text-align: right;
}
.tegnteller.trang { color: var(--warm-gold); }
.tegnteller.full { color: var(--ui-accent-2); }


/* ====================================================================
   MEDIAPAR

   Ett kort per par, med de to feltene ved siden av hverandre naar det er
   plass og under hverandre naar det ikke er.
   ==================================================================== */

.mediapar-kort {
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-panel-2);
  padding: 10px 12px 4px;
  margin-bottom: 12px;
}
.mediapar-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mediapar-navn {
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  color: var(--ui-text);
}
.mediapar-vekk {
  font-size: var(--fs-help);
  padding: 5px 9px;
  color: var(--ui-muted);
}
.mediapar-vekk:hover { color: var(--ui-accent-2); }
.mediapar-felter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mediapar-felt .field-label { margin-bottom: 4px; }
@media (max-width: 720px) {
  .mediapar-felter { grid-template-columns: minmax(0, 1fr); }
}

#btnLeggPar { margin-bottom: 6px; }

.btn-bred {
  display: block;
  width: 100%;
  margin: 4px 0 18px;
  padding: 12px;
  text-align: center;
}

.foretter-bak {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: #17150f;
  color: #f2ede2;
}

.foretter-topp {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Stripa er det øverste på skjermen og må ha luft over seg. */
  padding: calc(10px + var(--topp-luft)) 14px 10px;
  border-bottom: 1px solid rgba(242, 237, 226, 0.14);
}
.foretter-faner {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.foretter-fane,
.delt-fane {
  border: 1px solid rgba(242, 237, 226, 0.2);
  background: none;
  color: rgba(242, 237, 226, 0.65);
  font-family: var(--font-ui);
  font-size: var(--fs-btn);
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
}
.foretter-fane.valgt,
.delt-fane.valgt {
  background: rgba(242, 237, 226, 0.14);
  border-color: rgba(242, 237, 226, 0.5);
  color: #f2ede2;
}
.foretter-topp .btn {
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.foretter-topp .btn:hover { background: rgba(242, 237, 226, 0.16); }
.foretter-topp .btn:disabled { opacity: 0.4; cursor: default; }
.foretter-topp .btn-primary { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }

.foretter-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
}

/* Ruta tar formen til foer-bildet og blir saa stor som det er plass til.
   Uten det staar et liggende fotografi som en stripe midt i en staaende
   telefonskjerm, med haandtaket og merkelappene ute i moerket rundt. */
.foretter-rute {
  position: relative;
  /* Maalene settes av javascript. Bildene ligger absolutt plassert og gir
     ingen egen stoerrelse, saa aspect-ratio alene faller sammen til null. */
  width: 100%;
  height: 100%;
  /* Ramma er ramma: et bilde som er skalert eller flyttet skal ikke
     stikke ut av den, og der ingen av de to bildene naar, er det hvitt
     papir — ikke det andre bildet. */
  overflow: hidden;
  background: var(--paper);
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
}
.foretter-bak.justerer .foretter-rute { cursor: move; }

.foretter-rute img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

/* Etter-bildet ligger oeverst og vises bare til hoeyre for haandtaket.
   Overgangen er en myk stripe og ikke en kant: en hard strek trekker
   blikket til seg selv i stedet for til boka.

   To deler, og det er poenget. Laget staar fast i ramma, er hvitt og
   baerer stripa; bildet inni er det innrettingen flytter. Laa stripa paa
   bildet, ville hullet flytte seg sammen med bildet, og der bildet ikke
   naadde, ville foer-bildet skinne gjennom — en flik som ikke lot seg
   dra bort.

   Stripa er syv prosent bred, og midten gaar fra -3,5 til 103,5 mens
   haandtaket gaar fra 0 til 100. Da ligger hele stripa utenfor ramma paa
   ytterpunktene, og dekningen er hel. Uten den strekkingen stod de
   foerste 3,5 prosentene aldri helt dekket. */
.foretter-etterlag {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  -webkit-mask-image: linear-gradient(to right,
    transparent calc(var(--pos, 50%) * 1.07 - 7%),
    #000 calc(var(--pos, 50%) * 1.07));
  mask-image: linear-gradient(to right,
    transparent calc(var(--pos, 50%) * 1.07 - 7%),
    #000 calc(var(--pos, 50%) * 1.07));
}
#foretterEtter {
  transform: translate(var(--jx, 0%), var(--jy, 0%)) scale(var(--js, 1));
}
/* Mens overlegget stilles inn skal begge bildene vaere synlige: da bort
   med baade stripa og det hvite bak, ellers ser man ikke hva man
   flytter over hva. */
.foretter-bak.justerer .foretter-etterlag {
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
}
.foretter-bak.justerer #foretterEtter { opacity: 0.55; }

/* Handtaket deles med den offentlige visningen: det er samme sak, og
   skal se likt ut. */
.foretter-hank,
.delt-hank {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  pointer-events: none;
}
.foretter-hank i,
.delt-hank i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.foretter-hank::after,
.delt-hank::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.35);
  backdrop-filter: blur(2px);
}
.foretter-bak.justerer .foretter-hank { display: none; }

.foretter-merke {
  position: absolute;
  top: 10px;
  font-family: var(--font-sc, var(--font-ui));
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  background: rgba(23, 21, 15, 0.55);
  color: rgba(242, 237, 226, 0.9);
  pointer-events: none;
}
.foretter-merke-for   { left: 10px; }
.foretter-merke-etter { right: 10px; }

.foretter-tomt {
  max-width: 34em;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: rgba(242, 237, 226, 0.7);
}

.foretter-bunn {
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(242, 237, 226, 0.14);
}
.foretter-justering { margin-bottom: 10px; }
.foretter-justering .bilde-zoom { color: rgba(242, 237, 226, 0.7); }
.foretter-justerknapper { display: flex; gap: 8px; margin-top: 10px; }
.foretter-justerknapper .btn {
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.foretter-hjelp {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: rgba(242, 237, 226, 0.6);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .foretter-topp {
    flex-wrap: wrap;
    padding: calc(8px + var(--topp-luft)) 10px 8px;
    gap: 6px;
  }
  .foretter-faner { order: 3; flex-basis: 100%; }
  .foretter-fane { flex: 1; text-align: center; padding: 9px 6px; font-size: var(--fs-help); }
  .foretter-topp .btn { flex: 1; padding: 9px 8px; font-size: var(--fs-help); text-align: center; }
  .foretter-scene { padding: 6px; }
  .foretter-justerknapper .btn { flex: 1; text-align: center; }
}

@media print {
  .foretter-bak { display: none !important; }
}


/* ====================================================================
   KAMERA MED OVERLEGG
   ==================================================================== */

.kamera-bak {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  background: #101009;
  color: #f2ede2;
}

.kamera-topp {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Stripa er det øverste på skjermen og må ha luft over seg. */
  padding: calc(10px + var(--topp-luft)) 14px 10px;
  border-bottom: 1px solid rgba(242, 237, 226, 0.14);
}
.kamera-merke {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  color: rgba(242, 237, 226, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kamera-topp .btn {
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.kamera-topp .btn-primary { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }

.kamera-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}

/* Maalene settes av javascript, av samme grunn som i foer-og-etter:
   videoen og skyggen ligger absolutt plassert og gir ingen egen form. */
.kamera-rute {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.kamera-rute video,
.kamera-rute img,
.kamera-rute canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Skyggen av det gamle bildet. Den skal ikke kunne trykkes paa, og den
   skal ligge oeverst — det er den man sikter etter. */
#kameraSkygge {
  pointer-events: none;
  opacity: 0.18;
}

/* Konturen ligger over skyggen igjen: strekene skal ses uansett hvor
   svakt det gamle bildet staar. */
#kameraKontur { pointer-events: none; }

.kamera-beskjed {
  max-width: 34em;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: rgba(242, 237, 226, 0.75);
}

.kamera-bunn {
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(242, 237, 226, 0.14);
}
/* Betjeningen i to spalter: gliderne paa én linje, avkryssingene paa
   den neste. Fire kontroller paa to lave linjer i stedet for fire, saa
   soekeren beholder plassen sin. */
.kamera-styring {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: center;
}
.kamera-glider,
.kamera-avkryss {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: rgba(242, 237, 226, 0.72);
  cursor: pointer;
}
.kamera-glider > span { flex: none; }
.kamera-glider > input { flex: 1; min-width: 0; }
.kamera-avkryss > input {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  accent-color: var(--ui-accent-2);
}

.kamera-knapper {
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
}
.kamera-knapper .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.kamera-knapper .btn-primary {
  background: var(--ui-accent-2);
  border-color: var(--ui-accent-2);
  color: #fff;
}
/* Utloeseren skal treffes uten aa se ned paa skjermen. */
.kamera-utloser { min-height: 54px; font-size: var(--fs-btn); }

#kameraHjelp { color: rgba(242, 237, 226, 0.6); }

@media (max-width: 900px) {
  .kamera-topp { padding: calc(8px + var(--topp-luft)) 10px 8px; }
  .kamera-scene { padding: 6px; }
}

@media print {
  .kamera-bak { display: none !important; }
}


/* ====================================================================
   FILM AV FOER OG ETTER

   Samme moerke flate som visningen: fotografiet er det eneste som lyser.
   Lerretet har filmens egne maal, og krympes ned hit — det er derfor
   max-width og max-height holder her, der aspect-ratio ikke gjorde det
   for ruta i visningen: et lerret har en stoerrelse i seg selv.
   ==================================================================== */

.film-bak {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  background: #17150f;
  color: #f2ede2;
}

.film-topp {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Stripa er det øverste på skjermen og må ha luft over seg. */
  padding: calc(10px + var(--topp-luft)) 14px 10px;
  border-bottom: 1px solid rgba(242, 237, 226, 0.14);
}
.film-merke {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  color: rgba(242, 237, 226, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.film-topp .btn {
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.film-topp .btn-primary { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }

.film-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}
#filmLerret {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.film-bunn {
  border-top: 1px solid rgba(242, 237, 226, 0.14);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.film-formater {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.film-format {
  display: block;
  border: 1px solid rgba(242, 237, 226, 0.2);
  background: none;
  color: rgba(242, 237, 226, 0.65);
  font-family: var(--font-ui);
  padding: 8px 6px;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
}
.film-format strong { display: block; font-size: var(--fs-btn); font-weight: 600; }
.film-format span { display: block; font-size: 11px; opacity: 0.75; }
.film-bak.jobber .film-format,
.film-bak.jobber .film-valg { opacity: 0.45; cursor: default; }
.film-format.valgt {
  background: rgba(242, 237, 226, 0.14);
  border-color: rgba(242, 237, 226, 0.5);
  color: #f2ede2;
}

/* Avkryssingen og telleren paa samme linje naar det er plass, under
   hverandre naar det ikke er. */
.film-valg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}
.film-avkryss {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: rgba(242, 237, 226, 0.85);
  cursor: pointer;
}
.film-avkryss input {
  width: 17px;
  height: 17px;
  accent-color: var(--ui-accent-2);
  margin: 0;
  flex: none;
}

.film-teller {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: rgba(242, 237, 226, 0.85);
}
.film-tellernavn { margin-right: 2px; }
.film-teller .film-steg {
  min-width: 34px;
  padding: 4px 0;
  text-align: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1.1;
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.film-teller .film-steg:disabled { opacity: 0.35; cursor: default; }
.film-tellerverdi {
  min-width: 2.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #f2ede2;
}
.film-tellersum { opacity: 0.6; }

.film-bar {
  height: 4px;
  background: rgba(242, 237, 226, 0.16);
  border-radius: 2px;
  overflow: hidden;
}
.film-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ui-accent-2);
  transition: width 0.12s linear;
}

.film-hjelp {
  margin: 0;
  /* Beskjeden faar en linje til naar filmen er ferdig. */
  white-space: pre-line;
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  line-height: 1.4;
  color: rgba(242, 237, 226, 0.72);
}

.film-knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.film-knapper .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  min-height: 42px;
  background: rgba(242, 237, 226, 0.08);
  border-color: rgba(242, 237, 226, 0.25);
  color: #f2ede2;
}
.film-knapper .btn-primary { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }
.film-knapper .btn:disabled { opacity: 0.45; cursor: default; }
/* Hovedknappen tar hele bredden og staar oeverst i raden. Da er den ikke
   ett av flere valg, den er det som skal gjoeres naa. */
.film-knapper .film-hovedknapp {
  flex: 1 1 100%;
  order: -1;
  min-height: 48px;
  font-size: var(--fs-sub);
}


/* ====================================================================
   LIGGENDE TELEFON

   Bokbinderen fotograferer boka liggende, og maa da holde telefonen
   liggende ogsaa. Da er skjermen lav, og en verktoeylinje oeverst pluss
   en knapperad nederst spiser nesten alt som var igjen — soekeren blir en
   frimerkestor rute midt paa. Her flyttes betjeningen ut til siden i
   stedet, saa bildet faar hele hoeyden.
   ==================================================================== */

@media (orientation: landscape) and (max-height: 560px) {
  /* Her er statuslinja skjult, og høyden er det knappe godet. Da skal
     bare det systemet faktisk reserverer med — ikke de tretti punktene
     som står der for å holde teksten unna beltet øverst i portrett. */
  :root { --topp-luft: env(safe-area-inset-top, 0px); }

  .kamera-bak,
  .foretter-bak,
  .film-bak {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "scene topp"
      "scene bunn";
  }

  .kamera-topp, .foretter-topp, .film-topp { grid-area: topp; border-bottom: 0; }
  .kamera-scene, .foretter-scene, .film-scene { grid-area: scene; padding: 6px; }
  .kamera-bunn, .foretter-bunn, .film-bunn {
    grid-area: bunn;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid rgba(242, 237, 226, 0.14);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .kamera-topp, .foretter-topp, .film-topp {
    flex-wrap: wrap;
    padding: 10px 12px 4px;
    border-left: 1px solid rgba(242, 237, 226, 0.14);
  }
  .kamera-merke { display: none; }

  /* Knappene under hverandre i den smale spalten. */
  .kamera-knapper, .foretter-justerknapper { flex-direction: column; }
  /* Spalta til hoeyre er smal: da staar de fire kontrollene under
     hverandre i stedet for to og to. */
  .kamera-styring { grid-template-columns: minmax(0, 1fr); }
  .kamera-utloser { min-height: 60px; }
  .foretter-faner { order: 0; flex-basis: auto; }
  .foretter-topp .btn { flex: 1 1 100%; }
  /* I en spalte er flex-basis en hoeyde, ikke en bredde. Hovedknappen
     skal fortsatt staa oeverst, men ikke be om hele hoeyden. */
  .film-knapper { flex-direction: column; flex-wrap: nowrap; }
  .film-knapper .film-hovedknapp { flex: 0 0 auto; }
  .film-merke { display: none; }
}


/* Linja som tilbyr et lokalt utkast tilbake. */
.utkastlinje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--ui-panel-2);
  border-left: 2px solid var(--ui-gold, var(--ui-accent));
  font-family: var(--font-ui);
  font-size: var(--fs-help);
  color: var(--ui-text);
}
.utkastlinje span { flex: 1; min-width: 12em; }
.utkastlinje .btn { padding: 5px 10px; font-size: var(--fs-help); }