/* =========================================================================
 *  DIMMELENKE – public/css/diplom.css
 * =========================================================================
 *  Bare papirsidene (rapport.html og del.html): selve arket, rammen, seglet og
 *  utskriften. Resten av utseendet kommer fra base.css og layout.css, så
 *  tema, knapper og tallkort ser like ut som i appen.
 *
 *  UTSKRIFT
 *    Et diplom skal kunne henge på veggen. Derfor: verktøylinja skjules,
 *    fargene blir papirhvite (uansett om skjermen er i mørkt tema), og
 *    siden brytes ikke over to ark.
 * ========================================================================= */

/* ---------- Arket ---------- */
.diplom-ark {
  max-width: 760px;
  margin: 0 auto var(--storste);
  color: var(--tekst);
}

.diplom-ramme {
  position: relative;
  padding: clamp(16px, 3.2vw, 30px);
  background: var(--flate);
  border: 1px solid var(--kant-sterk);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  text-align: center;
}

/* Den doble gullkanten - det som gjør det til et diplom og ikke et kort. */
.diplom-ramme::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px double var(--aksent);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}

/* ---------- Toppen av diplomet ---------- */
.diplom-merke {
  margin: 0 0 var(--midt);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-veldig-svak);
}

/* Modusen står bare der når den finnes: «DIMMELENKE · ROTASJON». */
.diplom-modus:not(:empty)::before {
  content: ' · ';
}

.diplom-tittel {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  /* «Dimmelenke» er et langt ord: tittelen må kunne krympe uten å bryte ut av
     arket på en smal telefon. */
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  overflow-wrap: break-word;
  color: var(--aksent-sterk);
}

.diplom-undertittel {
  margin: 0.2rem 0 var(--midt);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: var(--tekst-svak);
}

.diplom-tildelt {
  margin: 0 0 var(--liten);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-veldig-svak);
}

.diplom-setning {
  margin: 0 auto var(--midt);
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.5;
}

.diplom-navn {
  font-weight: 700;
}

/* ---------- Tallene og linjene ---------- */
.diplom-nokkeltall {
  margin-bottom: var(--midt);
  text-align: left;
}

.diplom-linje {
  margin: 0 0 var(--liten);
  font-size: 0.92rem;
  color: var(--tekst-svak);
}

/* «Small print»: forbeholdene og forutsetningene nederst på arket. Det fineste
   som står der - lesbart hvis man leter, men det skal ikke ta plassen fra
   tallene. En tom linje tar ingen plass i det hele tatt. */
.diplom-smaskrift {
  margin: 0 0 3px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--tekst-veldig-svak);
}

.diplom-smaskrift:empty {
  display: none;
}

/* ---------- Gruppene i rapporten ---------- */
.diplom-gruppe {
  margin: var(--midt) 0 5px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aksent-sterk);
}

/* ---------- QR-koden på rapporten og delesida ---------- */
.diplom-qr {
  margin: var(--midt) 0 0;
  text-align: center;
}

.diplom-qr img {
  display: block;
  margin: 0 auto;
  width: 96px;
  height: 96px;
  /* Skarp QR: ingen utvisking når den skaleres. */
  image-rendering: pixelated;
  background: #fff;
  padding: 4px;
  border-radius: var(--radius-liten);
}

.diplom-qr figcaption {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--tekst-veldig-svak);
}

/* ---------- Bunnen: status og signatur ---------- */
.diplom-bunn {
  margin-top: var(--midt);
}

.diplom-status {
  margin: 0 0 var(--midt);
  font-size: 0.92rem;
  color: var(--tekst-svak);
}

.diplom-signatur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--midt);
}

.diplom-segl {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px double var(--aksent);
  border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--aksent-sterk);
}

.diplom-signatur-tekst {
  display: grid;
  text-align: left;
}

.diplom-signatur-navn {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  border-bottom: 1px solid var(--kant-sterk);
  padding-bottom: 2px;
}

.diplom-datert {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--tekst-veldig-svak);
}

/* ---------- Utskrift: ett ark, på papirhvitt ---------- */
@media print {
  @page {
    size: A4;
    /* 10 mm marg: nok til at ingen skriver klipper kanten, og mer plass til
       innholdet enn de 14 mm vi hadde. */
    margin: 10mm;
  }

  html,
  body {
    background: #fff;
  }

  /* Verktøyet hører til skjermen, ikke til papiret. */
  .topp,
  .bunn,
  .diplom-verktoy,
  .hopp-til-innhold,
  .versjonsvarsel,
  #diplom-tom,
  #rapport-tom {
    display: none !important;
  }

  /* Papirhvitt uansett tema: egne farger for arket og alt inni det. */
  .diplom-ark {
    --flate: #ffffff;
    --flate-2: #f6f4ef;
    --kant: #cfc8ba;
    --kant-sterk: #b6ad9b;
    --tekst: #17181a;
    --tekst-svak: #4c5057;
    --tekst-veldig-svak: #6c7078;
    --aksent: #8a6410;
    --aksent-sterk: #6f5009;
    max-width: none;
    margin: 0;
  }

  .diplom-ramme {
    border-radius: 0;
    box-shadow: none;
  }

  .diplom-ramme::before {
    inset: 6px;
  }

  /* Diplom er ett ark. Aldri to. */
  .diplom-ark,
  .diplom-ramme,
  .stat-kort {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Kompakt på papir: mindre luft mellom kortene og mindre skrift i
     hjelpetekstene, så alt får plass på ett ark uten at noe blir uleselig. */
  .diplom-ramme .stat-rutenett {
    gap: 5px;
  }

  .diplom-ramme .stat-kort {
    padding: 5px 8px;
  }

  .diplom-ramme .stat-etikett,
  .diplom-ramme .stat-hjelp {
    font-size: 0.66rem;
  }

  .diplom-smaskrift {
    font-size: 0.62rem;
    line-height: 1.35;
  }

  .diplom-segl {
    width: 46px;
    height: 46px;
  }

  .diplom-qr img {
    width: 84px;
    height: 84px;
  }
}