/*
 * Statuslabels van het keuringsrapport, in de stijl van de kentekencheck: het
 * woord met het bestaande icoon in een pil. Goed en Geen storing groen met het
 * vinkje; Reparatie, Storing en Defect vol oranje met de sleutel; N.v.t. grijs
 * zonder icoon. De kleuren komen uit de tokens op .inspection-report (zie
 * InspectionReport.css); maten in px, want op de Webflow-site geldt een andere
 * rem. De print staat in ReportPrint.css.
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--kk-r-pill);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.status-badge__icon-wrapper {
  display: grid;
  place-items: center;
  flex: none;
  width: 12px;
  height: 12px;
  line-height: 0;
}

.status-badge__icon {
  display: block;
  width: 12px;
  height: 12px;
}

.status-badge--good {
  background: var(--kk-ok-bg);
  color: var(--kk-ok);
}

.status-badge--repair {
  background: var(--kk-warn);
  color: #fff;
}

.status-badge--nvt {
  padding-left: 11px;
  background: var(--kk-neutral-bg);
  color: var(--kk-ink-2);
}

/* Waarden zonder status (Ja, Nee, datums, bedragen) als platte, vette tekst. */
.status-plain {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kk-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/*
 * Bovenaanzicht van het voertuig bij Banden, in het verloopvlak van de
 * kentekencheck. De overlays (banden onder de drempel) liggen precies over de
 * basisafbeelding. De print staat in ReportPrint.css.
 */
.tire-visualization {
  display: grid;
  place-items: center;
  padding: 20px 18px 22px;
  border-radius: var(--kk-r-md);
  background: var(--kk-vlak);
}

.tire-viz__container {
  position: relative;
  width: 100%;
  max-width: 380px;
}

/* De JPEG heeft een witte achtergrond; multiply laat het verloop doorschijnen.
   De plaat gaat als geheel in multiply (vage basis plus volle banden), zodat het
   wit rond de banden net zo wegvalt als rond het voertuig. */
.tire-viz__plaat {
  position: relative;
  mix-blend-mode: multiply;
}

.tire-viz__base {
  display: block;
  width: 100%;
  height: auto;
}

/* Dezelfde tekening staat bij Huidige schade; hier telt alleen de band. */
.tire-viz__base--vaag {
  opacity: .3;
}

.tire-viz__banden {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tire-viz__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*
 * Categorieen van het keuringsrapport (keuringsstation en OKN), in de stijl van
 * de kentekencheck. Elke categorie is een kaart met een kop (icoonvak, titel,
 * score, fotoknop, pijl) en daaronder de regels in een haarlijnraster dat rij
 * voor rij vult, zoals in de pdf. Vrije tekst staat over de volle breedte,
 * direct op zijn plek (een storingsomschrijving onder zijn DTC).
 *
 * De kleuren komen uit de tokens op .inspection-report (InspectionReport.css),
 * de statuslabels uit StatusBadge.css, de print uit src/report/ReportPrint.css.
 */

/* ---------------------------------------------------------------------------
 * Sectiekoppen en categoriekaarten
 * ------------------------------------------------------------------------- */
.report-content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px clamp(56px,7vw,96px);
}

.report-section-heading {
  margin: 44px 0 14px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--kk-ink);
}

.inspection-categories {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
}

.inspection-category {
  min-width: 0;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-lg);
}

/* kop: icoon, titel, score; rechts fotoknop en pijl. De DOM-volgorde blijft, CSS order zet de score naast de titel. */
.category-header-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 14px;
  border-radius: var(--kk-r-lg);
  cursor: pointer;
}

.category-header-wrapper:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: -3px;
}

.category-header {
  order: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.category-icon {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 12px;
  background: var(--kk-mint-2);
  box-shadow: inset 0 0 0 1px var(--kk-line);
}

.category-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--kk-ink);
}

.category-header-wrapper:hover .category-title {
  color: var(--kk-teal-dk);
}

.category-score {
  order: 1;
}

.category-score--warning {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--kk-r-pill);
  background: var(--kk-warn-bg);
  color: var(--kk-warn);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.photo-toggle-button-header {
  order: 2;
  margin-left: auto;
}

.photo-toggle-button-header,
.photo-toggle-button-mobile {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-pill);
  background: var(--kk-mint-2);
  color: var(--kk-teal-dk);
  font: 700 13.5px/1.2 var(--kk-f);
  white-space: nowrap;
}

.photo-toggle-button-header:hover,
.photo-toggle-button-mobile:hover {
  background: var(--kk-mint);
}

.photo-toggle-button-header:focus-visible,
.photo-toggle-button-mobile:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: 2px;
}

.category-photo-reference {
  display: none;
}

.category-chevron {
  order: 4;
  flex: none;
  display: block;
  margin-left: auto;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--kk-line);
  border-radius: 50%;
  background: var(--kk-surface);
  color: var(--kk-ink);
  transition: transform .35s;
}

.photo-toggle-button-header~.category-chevron {
  margin-left: 0;
}

.category-chevron--expanded {
  transform: rotate(180deg);
}

/* fotogalerij onder de kop (I1) */
.category-photo-gallery {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}

.category-photo-gallery--expanded {
  grid-template-rows: 1fr;
}

.photo-gallery-inner {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px;
}

.category-photo-gallery--expanded .photo-gallery-inner {
  padding-bottom: 16px;
}

.photo-thumbnail {
  appearance: none;
  display: block;
  padding: 0;
  border: 0;
  width: 150px;
  height: 112px;
  border-radius: var(--kk-r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--kk-line);
  background: var(--kk-neutral-bg);
  cursor: pointer;
  transition: transform .12s;
}

.photo-thumbnail:hover {
  transform: translateY(-2px);
}

.photo-thumbnail:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: 2px;
}

.photo-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* inhoud: open en dicht zoals nu (dicht blijft in de DOM); binnenruimte alleen open */
.category-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease,opacity .3s ease;
}

.category-content--expanded {
  max-height: 5000px;
  opacity: 1;
  padding: 0 18px 18px;
}

.category-photo-toggle-mobile {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Regels: haarlijnraster, rij voor rij
 * ------------------------------------------------------------------------- */
.inspection-rows-container {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  background: var(--kk-line);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md);
  overflow: hidden;
}

/* Label links, waarde rechts. Het label loopt zo nodig over meer regels, maar
   wordt nooit smaller dan zijn langste woord. Past de waarde er dan niet meer
   naast, dan komt ze op een eigen regel onder het label in plaats van eroverheen:
   een tekst (zoals bij Garantie) links over de volle breedte, een statuslabel
   rechts. Op de print is de regel een raster met vaste kolommen
   (ReportPrint.css). */
.inspection-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* label en waarde onder elkaar blijven bij elkaar, ook als de buurcel hoger is */
  align-content: center;
  justify-content: space-between;
  gap: 6px 14px;
  min-width: 0;
  min-height: 52px;
  padding: 11px 16px;
  background: var(--kk-surface);
}

.inspection-cell--label {
  flex: 1 1 0%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--kk-ink-2);
}

.inspection-cell--value {
  flex: 0 1 auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-align: left;
}

/* Alleen op het scherm: een statuslabel op een eigen regel blijft rechts. */
@media screen {
  .inspection-row--status .inspection-cell--value {
    margin-left: auto;
  }
}

/* regel met een aandachtspunt (Reparatie, Storing, Defect): warm vlak, label donker */
.inspection-row--aandacht {
  background: var(--kk-warn-bg);
}

.inspection-row--aandacht .inspection-cell--label {
  color: var(--kk-ink);
  font-weight: 600;
}

/* vrije tekst over de volle breedte, label boven de tekst */
.inspection-row--notitie {
  grid-column: 1/-1;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 3px;
  padding: 13px 16px 14px;
}

.inspection-row--notitie .inspection-cell--label {
  flex: none;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
}

.inspection-row--notitie .inspection-cell--value {
  flex: initial;
  max-width: 78ch;
  margin-left: 0;
  justify-content: flex-start;
  text-align: left;
}

.inspection-row--notitie .status-plain {
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* omschrijving van een storing: direct onder zijn DTC, in hetzelfde warme vlak */
.inspection-row--omschrijving {
  background: var(--kk-warn-bg);
}

.inspection-row--omschrijving .inspection-cell--label {
  color: var(--kk-warn);
}

/* lege cel naast een losse regel (rechts), zodat het raster dicht blijft */
.inspection-row--leeg {
  min-height: 0;
}

/* tooltip bij 'Geen oordeel': alleen het i-icoon in navy, zonder rondje eromheen
   (Frank, 28-10); de ballon blijft navy */
.field-tooltip {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--kk-navy-knop);
  cursor: help;
}

.field-tooltip svg {
  width: 18px;
  height: 18px;
}

.field-tooltip:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: 2px;
}

/* De ballon hangt zoals in de kentekencheck rechts aan het rondje en loopt naar
   links: de rechterkant 17 px rechts van het midden van het rondje (left en de
   hoogte zet InspectionCategories.jsx). Breedte naar de tekst, hooguit 260 px,
   zodat hij bij een rondje aan de rechterkant niet smal wordt. */
.field-tooltip-popup {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: 260px;
  transform: translate(calc(-100% + 17px),-100%) !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--kk-navy-knop);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--kk-schaduw-pop);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Banden: tegels naast het bovenaanzicht
 * ------------------------------------------------------------------------- */
/* De waardecel en het statuslabel vallen weg (display: contents), zodat icoon,
   titel en waarde samen de tegel vormen; de markup blijft gelijk. */
.category-info-text {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--kk-line);
  border-radius: var(--kk-r-md);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kk-ink-2);
}

.tires-content-wrapper {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.tires-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}

.tires-field-row {
  display: grid;
  grid-template-areas: "ico" "titel" "waarde";
  gap: 6px;
  align-content: start;
  padding: 14px 14px 13px;
  border-radius: var(--kk-r-md);
  background: var(--kk-ok-bg);
}

.tires-field-row .inspection-cell--value,
.tires-field-row .status-badge {
  display: contents;
}

.tires-field-row .status-badge__icon-wrapper {
  grid-area: ico;
  width: 30px;
  height: 30px;
  border-radius: var(--kk-r-sm);
  background: var(--kk-ok);
  color: #fff;
}

.tires-field-row .status-badge__icon {
  width: 14px;
  height: 14px;
}

.tires-field-row .inspection-cell--label {
  grid-area: titel;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kk-ink-2);
}

.tires-field-row .status-badge__text {
  grid-area: waarde;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--kk-ok);
  font-variant-numeric: tabular-nums;
  /* het profiel is in het formulier vrije tekst: een woord als 'Onbekend'
     breekt af in plaats van buiten de tegel te lopen */
  white-space: normal;
  overflow-wrap: anywhere;
}

.tires-field-row--aandacht {
  background: var(--kk-warn-bg);
}

.tires-field-row--aandacht .status-badge__icon-wrapper {
  background: var(--kk-warn);
}

.tires-field-row--aandacht .status-badge__text {
  color: var(--kk-warn);
}

/* ---------------------------------------------------------------------------
 * OKN-blok: alle antwoorden in hetzelfde lichtblauwe vlak, ook Keuringsrapport
 * en Advies (Jimmy, 29-10). Korte antwoorden groot met het label eronder, tekst
 * onder het label; nergens meer rechts uitgelijnd.
 * ------------------------------------------------------------------------- */
.inspection-categories--okn .inspection-rows-container {
  gap: 0;
  background: var(--kk-mint-2);
  border-color: var(--kk-mint-3);
}

.inspection-categories--okn .inspection-row {
  background: transparent;
}

.inspection-categories--okn .inspection-row--leeg {
  display: none;
}

/* Prijs als specificatievlak */
[data-categorie="okn_prijs"] .inspection-rows-container {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px 16px;
  padding: 16px 18px;
  background: var(--kk-mint-2);
}

[data-categorie="okn_prijs"] .inspection-row {
  flex-direction: column-reverse;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 3px;
  min-height: 0;
  padding: 0;
  background: transparent;
}

[data-categorie="okn_prijs"] .inspection-cell--label {
  flex: none;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
}

[data-categorie="okn_prijs"] .inspection-cell--value {
  max-width: none;
  margin-left: 0;
  justify-content: flex-start;
  text-align: left;
}

[data-categorie="okn_prijs"] .status-plain {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

[data-categorie="okn_prijs"] .inspection-row--leeg {
  display: none;
}


/* ---------------------------------------------------------------------------
 * Schermbreedtes
 * ------------------------------------------------------------------------- */
@media (max-width:768px) {
    .report-section-heading {
      margin: 32px 0 12px;
      font-size: 20px;
    }

    .tires-content-wrapper {
      grid-template-columns: minmax(0,1fr);
    }

    .photo-toggle-button-header {
      display: none;
    }

    .photo-toggle-button-header~.category-chevron {
      margin-left: auto;
    }

    .category-photo-toggle-mobile {
      display: block;
      margin-bottom: 12px;
    }

    .photo-toggle-button-mobile {
      width: 100%;
    }
}

@media (max-width:620px) {
    .category-header-wrapper {
      display: grid;
      grid-template-columns: auto minmax(0,1fr) auto;
      column-gap: 12px;
      row-gap: 5px;
      padding: 12px 14px 12px 12px;
    }

    .category-header {
      display: contents;
    }

    .category-icon {
      grid-column: 1;
      grid-row: 1/3;
      align-self: center;
      width: 40px;
      height: 40px;
      padding: 10px;
    }

    .category-title {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      font-size: 17px;
    }

    .category-score--warning {
      grid-column: 2;
      grid-row: 2;
      justify-self: start;
      align-self: start;
      padding: 4px 10px;
      font-size: 12.5px;
    }

    .category-chevron {
      grid-column: 3;
      grid-row: 1/3;
      align-self: center;
      width: 34px;
      height: 34px;
      margin-left: 0;
    }

    .category-header-wrapper:not(:has(.category-score)) .category-title {
      grid-row: 1/3;
      align-self: center;
    }

    .category-content--expanded {
      padding: 0 12px 12px;
    }

    .photo-gallery-inner {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      padding: 0 12px;
    }

    .photo-thumbnail {
      width: auto;
      height: auto;
      aspect-ratio: 4/3;
    }

    .inspection-rows-container {
      grid-template-columns: minmax(0,1fr);
    }

    .inspection-row {
      padding: 11px 14px;
    }

    .inspection-row--leeg {
      display: none;
    }

    .inspection-cell--label,
    .status-plain {
      font-size: 14.5px;
    }

    /* Telefoon: past een tekstwaarde niet naast het label op een regel, dan staat
       het label heel op een eigen regel en de waarde eronder (zoals in de oude
       weergave), in plaats van een label dat afbreekt na 'km-'. Een statuslabel
       blijft naast een label over twee regels staan. */
    .inspection-row:not(.inspection-row--status):not(.inspection-row--notitie) .inspection-cell--label {
      flex-basis: auto;
    }

    /* Telefoon: de ballon rechts in beeld, 16 px van de rand, boven het rondje.
       Zo past hij ook als het rondje links staat (waarde onder het label). */
    .field-tooltip-popup {
      left: auto !important;
      right: 16px;
      max-width: min(260px,calc(100vw - 32px));
      transform: translateY(-100%) !important;
    }

    [data-categorie="okn_prijs"] .inspection-rows-container {
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 10px 12px;
      padding: 12px 14px;
    }

    [data-categorie="okn_prijs"] .status-plain {
      font-size: 18px;
    }

    [data-categorie="okn_prijs"] .inspection-cell--label {
      font-size: 12px;
    }

    .tires-field-row .status-badge__text {
      font-size: 20px;
    }
}

@media (prefers-reduced-motion:reduce) {
  .category-chevron,
  .photo-thumbnail,
  .category-photo-gallery,
  .category-content {
    transition: none;
  }
}

/* ===========================================================================
 * Visuele componenten (ontwerp-visueel/visueel.md, 28-10-2026), in de stijl van
 * de kentekencheck. Komt bij de regels hierboven; alleen vorm, alle tekst
 * blijft tekst. Geen tekst via CSS: elke content is "". De tokens (--kk-icoon
 * en verder) staan in InspectionReport.css, de print in ReportPrint.css.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * Voertuiggegevens: tegels met de bestaande veldiconen
 * ------------------------------------------------------------------------- */
.vg-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(168px,1fr));
  gap: 10px;
}

.vg-tegel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 14px 14px 13px;
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md);
  background: var(--kk-mint-2);
}

.vg-tegel__ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 9px;
  background: var(--kk-surface);
  box-shadow: inset 0 0 0 1px var(--kk-line);
  color: var(--kk-icoon);
}

/* veld zonder eigen icoon (Aantal vorige eigenaren): zelfde uitlijning */
.vg-tegel__ico--leeg {
  visibility: hidden;
}

.vg-tegel .inspection-cell--label {
  flex: none;
  min-width: 0;
  align-self: end;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kk-ink-2);
}

.vg-tegel .inspection-cell--value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: none;
  text-align: left;
}

.vg-tegel .status-plain {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
}

/* statusicoon bij de logische km-stand, alleen bij Ja en Nee (rond = oordeel,
   zoals het RDW-vlak van de check) */
.vg-tegel__ico--status {
  padding: 9px;
  border-radius: 50%;
  box-shadow: none;
  color: #fff;
}

/* lijnicoon van de kentekencheck (Herkomst, Logische km-stand): iets groter dan
   de gevulde iconen, zodat het even zwaar oogt */
.vg-tegel__ico.vg-tegel__ico--lijn {
  padding: 6px;
}

.vg-tegel--ok {
  border-color: transparent;
  background: var(--kk-ok-bg);
}

.vg-tegel--ok .vg-tegel__ico--status {
  background: var(--kk-ok);
}

.vg-tegel--ok .status-plain {
  color: var(--kk-ok);
}

.vg-tegel--warn {
  border-color: transparent;
  background: var(--kk-warn-bg);
}

.vg-tegel--warn .vg-tegel__ico--status {
  padding: 8px 8px 9px;
  background: var(--kk-warn);
}

.vg-tegel--warn .status-plain {
  color: var(--kk-warn);
}

/* ---------------------------------------------------------------------------
 * Voertuiggegevens: tijdlijn van de bestaande datums (levensloop van de check).
 * Op volgorde van tijd en op gelijke afstand; alle punten dezelfde vorm, alleen
 * de keuring is navy.
 * ------------------------------------------------------------------------- */
.vg-tijdlijn {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  margin-top: 12px;
  padding: 18px 8px 16px;
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md);
  background: var(--kk-surface);
}

.vg-tijdlijn__punt {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 0 6px;
  text-align: center;
}

.vg-tijdlijn__punt::before,
.vg-tijdlijn__punt::after {
  content: "";
  position: absolute;
  top: 19px;
  height: 0;
  border-top: 2px solid var(--kk-tijdlijn);
}

.vg-tijdlijn__punt::before {
  left: 0;
  right: 50%;
}

.vg-tijdlijn__punt::after {
  left: 50%;
  right: 0;
}

.vg-tijdlijn__punt:first-child::before,
.vg-tijdlijn__punt:last-child::after {
  display: none;
}

.vg-tijdlijn__stip {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 7px;
  padding: 11px;
  border-radius: 50%;
  background: var(--kk-surface);
  box-shadow: inset 0 0 0 2px var(--kk-line),0 0 0 5px var(--kk-surface);
  color: var(--kk-icoon);
}

.vg-tijdlijn__punt--keuring .vg-tijdlijn__stip {
  background: var(--kk-navy-knop);
  box-shadow: 0 0 0 5px var(--kk-surface);
  color: #fff;
}

/* datum zonder eigen icoon (Gasslang laatst vervangen op): een stip */
.vg-tijdlijn__stip:empty::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.vg-tijdlijn__punt .inspection-cell--value {
  order: 1;
  max-width: none;
  justify-content: center;
}

.vg-tijdlijn__punt .inspection-cell--label {
  order: 2;
  flex: none;
  min-width: 0;
  max-width: 22ch;
  font-size: 13px;
  line-height: 1.3;
  color: var(--kk-ink-2);
  text-wrap: balance;
}

.vg-tijdlijn__punt .status-plain {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.vg-tijdlijn__punt--keuring .inspection-cell--label {
  font-weight: 700;
  color: var(--kk-ink);
}

/* ---------------------------------------------------------------------------
 * Banden: profielschaal in de tegel. Zones tot 1,6 mm (wettelijk minimum) en
 * tot 2,5 mm (vervanging geadviseerd) uit de infotekst; einde 8 mm (alleen
 * vorm); stip op de waarde. Verandert de infotekst, dan ook 20% en 31,25%.
 * ------------------------------------------------------------------------- */
.tires-field-row {
  grid-template-areas: "ico" "titel" "waarde" "schaal";
}

.profielschaal {
  --naad: 2px;
  grid-area: schaal;
  position: relative;
  display: block;
  height: 6px;
  margin: 4px 0 3px;
  border-radius: var(--kk-r-pill);
  /* witte naad op de grenzen, zodat ze ook in zwart-wit zichtbaar blijven */
  background: linear-gradient(90deg,
    var(--kk-warn) 0 calc(20% - var(--naad)),
    #fff calc(20% - var(--naad)) 20%,
    var(--kk-schaal-advies) 20% calc(31.25% - var(--naad)),
    #fff calc(31.25% - var(--naad)) 31.25%,
    var(--kk-schaal-ok) 31.25% 100%);
}

.profielschaal__stip {
  position: absolute;
  top: 50%;
  left: clamp(5.5px,var(--stip),calc(100% - 5.5px));
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  /* een ring zonder vulling: de smalle zone tot 2,5 mm (een paar pixels op de
     telefoon) blijft rond en door de stip heen zichtbaar */
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--kk-ink);
}

/* ---------------------------------------------------------------------------
 * Huidige schade: schadeplaatje naast het raster (een kolom), in het
 * verloopvlak. Alleen als een zijde een aandachtspunt heeft.
 * ------------------------------------------------------------------------- */
.schade-inhoud {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  align-items: start;
}

.schade-inhoud .inspection-rows-container {
  grid-template-columns: minmax(0,1fr);
}

.schade-inhoud .inspection-row--leeg {
  display: none;
}

.schade-plaatje {
  display: grid;
  place-items: center;
  padding: 20px 18px 22px;
  border-radius: var(--kk-r-md);
  background: var(--kk-vlak);
}

.schade-plaatje__container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.schade-plaatje__basis {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.schade-plaatje__vlakken {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.schade-plaatje__vlak {
  fill: var(--kk-overlay-vlak);
  stroke: var(--kk-overlay);
  stroke-width: 5;
}

/* ---------------------------------------------------------------------------
 * ECU: een statustegel per systeem (zoals de bandentegels). Het bestaande
 * statuslabel valt uiteen (display: contents): icoon in het vak, woord groot in
 * statuskleur. Label en status onderaan in de tegel, zoals bij de
 * Voertuiggegevens: breekt een label af, dan staan de statuswoorden in een rij
 * toch op een lijn. Een storing met omschrijving is twee kolommen breed met de
 * omschrijving in een wit vak; dichte vulling, dus geen gat. DOM gelijk.
 * ------------------------------------------------------------------------- */
.ecu-tegels {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-flow: row dense;
  gap: 10px;
}

.ecu-tegel {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "ico" "titel" "waarde";
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 14px 14px 13px;
  border-radius: var(--kk-r-md);
  background: var(--kk-ok-bg);
}

.ecu-tegel > .inspection-cell--value,
.ecu-tegel > .inspection-cell--value > .status-badge {
  display: contents;
}

.ecu-tegel .status-badge__icon-wrapper {
  grid-area: ico;
  width: 30px;
  height: 30px;
  border-radius: var(--kk-r-sm);
  background: var(--kk-ok);
  color: #fff;
}

.ecu-tegel .status-badge__icon {
  width: 14px;
  height: 14px;
}

.ecu-tegel > .inspection-cell--label {
  grid-area: titel;
  align-self: end;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kk-ink-2);
}

.ecu-tegel .status-badge__text {
  grid-area: waarde;
  justify-self: start;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--kk-ok);
}

.ecu-tegel--aandacht {
  background: var(--kk-warn-bg);
}

.ecu-tegel--aandacht .status-badge__icon-wrapper {
  background: var(--kk-warn);
}

.ecu-tegel--aandacht .status-badge__text {
  color: var(--kk-warn);
}

.ecu-tegel--breed {
  grid-column: span 2;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.5fr);
  /* rijen auto 1fr auto (van .ecu-tegel): een lange omschrijving maakt alleen
     de rij boven het label hoger, label en status blijven samen onderaan */
  grid-template-areas: "ico omschr" "titel omschr" "waarde omschr";
  column-gap: 16px;
}

.ecu-tegel__omschrijving {
  grid-area: omschr;
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 11px 14px 12px;
  border-radius: 10px;
  background: var(--kk-surface);
}

.ecu-tegel__omschrijving .inspection-cell--label {
  flex: none;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kk-warn);
}

.ecu-tegel__omschrijving .inspection-cell--value {
  display: block;
  max-width: none;
  text-align: left;
}

.ecu-tegel__omschrijving .status-plain {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.ecu-notities {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------
 * OKN: Keuringsrapport, Garantie en Aflevering als specificatievlak (zoals
 * Prijs); tekst als notitie eronder over de volle breedte
 * ------------------------------------------------------------------------- */
:is([data-categorie="okn_keuringsrapport"],[data-categorie="okn_garantie"],[data-categorie="okn_aflevering"]) .inspection-rows-container {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
  background: var(--kk-mint-2);
}

:is([data-categorie="okn_garantie"],[data-categorie="okn_aflevering"]) .inspection-row {
  background: transparent;
}

:is([data-categorie="okn_garantie"],[data-categorie="okn_aflevering"]) .inspection-row--leeg {
  display: none;
}

:is([data-veld="aandachtspunten_gevonden"],[data-veld="wordt_opgelost"],[data-veld="met_garantie"],[data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) {
  flex-direction: column-reverse;
  align-items: flex-start;
  /* de regel is flex-wrap met align-content: center; hier links, zoals Prijs */
  align-content: flex-start;
  /* bij column-reverse is flex-end de bovenkant: de waarde staat bovenaan, ook
     als het label ernaast over twee regels breekt */
  justify-content: flex-end;
  gap: 3px;
  min-height: 0;
  padding: 16px 18px 14px;
}

:is([data-veld="aandachtspunten_gevonden"],[data-veld="wordt_opgelost"],[data-veld="met_garantie"],[data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) .inspection-cell--label {
  flex: none;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
}

:is([data-veld="aandachtspunten_gevonden"],[data-veld="wordt_opgelost"],[data-veld="met_garantie"],[data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) .inspection-cell--value {
  max-width: none;
  justify-content: flex-start;
}

:is([data-veld="aandachtspunten_gevonden"],[data-veld="wordt_opgelost"],[data-veld="met_garantie"],[data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) .status-plain {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

:is([data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) .status-plain small {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--kk-ink-2);
}

/* 'Aflevering binnen' visueel bovenaan; de DOM-volgorde blijft gelijk */
[data-veld="aflevering_wanneer"] {
  order: -1;
  grid-column: 1/-1;
}

/* tekst onder het specificatievlak, met een lijn erboven */
:is([data-categorie="okn_garantie"],[data-categorie="okn_aflevering"]) .inspection-row--notitie {
  border-top: 1px solid var(--kk-mint-3);
}

/* ---------------------------------------------------------------------------
 * Visuele componenten: schermbreedtes
 * ------------------------------------------------------------------------- */
@media (max-width:960px) {
    .ecu-tegels {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ecu-tegel--breed {
      grid-column: 1/-1;
    }
}

@media (max-width:768px) {
    .schade-inhoud {
      grid-template-columns: minmax(0,1fr);
    }
}

/* Smalle tablet (621 tot 760): vijf datums naast elkaar staan krap; datum en
   label iets kleiner, zodat er lucht tussen de kolommen blijft */
@media (min-width:621px) and (max-width:760px) {
    .vg-tijdlijn {
      padding-right: 4px;
      padding-left: 4px;
    }

    .vg-tijdlijn__punt {
      padding: 0 4px;
    }

    .vg-tijdlijn__punt .status-plain {
      font-size: 15px;
    }

    .vg-tijdlijn__punt .inspection-cell--label {
      font-size: 12px;
    }
}

@media (max-width:620px) {
    /* Voertuiggegevens: twee tegels naast elkaar, tijdlijn verticaal */
    .vg-tegels {
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 8px;
    }

    .vg-tegel {
      padding: 12px;
    }

    .vg-tegel .status-plain {
      font-size: 17px;
    }

    .vg-tijdlijn {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      padding: 16px 14px 4px;
    }

    .vg-tijdlijn__punt {
      grid-template-columns: 40px minmax(0,1fr);
      grid-template-areas: "stip waarde" "stip label";
      justify-items: start;
      align-items: center;
      column-gap: 14px;
      row-gap: 1px;
      padding: 0 0 20px;
      text-align: left;
    }

    .vg-tijdlijn__stip {
      grid-area: stip;
      align-self: start;
      margin: 0;
      box-shadow: inset 0 0 0 2px var(--kk-line);
    }

    .vg-tijdlijn__punt--keuring .vg-tijdlijn__stip {
      box-shadow: none;
    }

    .vg-tijdlijn__punt .inspection-cell--value {
      grid-area: waarde;
      align-self: end;
      justify-content: flex-start;
    }

    .vg-tijdlijn__punt .inspection-cell--label {
      grid-area: label;
      align-self: start;
      max-width: none;
    }

    .vg-tijdlijn__punt::before,
    .vg-tijdlijn__punt::after {
      top: auto;
      right: auto;
      left: 19px;
      height: auto;
      border-top: 0;
      border-left: 2px solid var(--kk-tijdlijn);
    }

    .vg-tijdlijn__punt::before {
      top: 0;
      height: 20px;
    }

    .vg-tijdlijn__punt::after {
      top: 20px;
      bottom: 0;
    }

    /* ECU: compacter; de omschrijving onder de status */
    .ecu-tegels {
      gap: 8px;
    }

    .ecu-tegel {
      padding: 12px;
    }

    .ecu-tegel .status-badge__text {
      font-size: 17px;
    }

    /* 17 px is geen grote tekst: groen op groen dan iets donkerder (4,8:1) */
    .ecu-tegel:not(.ecu-tegel--aandacht) .status-badge__text,
    .vg-tegel--ok .status-plain {
      color: var(--kk-ok-tekst);
    }

    .ecu-tegel--breed {
      grid-template-columns: minmax(0,1fr);
      grid-template-rows: auto auto auto auto;
      grid-template-areas: "ico" "titel" "waarde" "omschr";
      row-gap: 6px;
    }

    .ecu-tegel__omschrijving {
      margin-top: 4px;
    }

    /* OKN */
    :is([data-veld="aandachtspunten_gevonden"],[data-veld="wordt_opgelost"],[data-veld="met_garantie"],[data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) {
      padding: 12px 14px;
    }

    :is([data-veld="aandachtspunten_gevonden"],[data-veld="wordt_opgelost"],[data-veld="met_garantie"],[data-veld="garantieperiode_van"],[data-veld="aflevering_wanneer"]) .status-plain {
      font-size: 20px;
    }
}

/* Smalle telefoon (320 tot 380): Voertuiggegevens en ECU als lijst, icoon
   links, zodat 'Onderhoudsboekjes' en 'Veiligheidssysteem' heel blijven. */
@media (max-width:380px) {
    .vg-tegels {
      grid-template-columns: minmax(0,1fr);
      gap: 6px;
    }

    .vg-tegel {
      grid-template-columns: 32px minmax(0,1fr);
      grid-template-rows: auto auto;
      grid-template-areas: "ico label" "ico waarde";
      column-gap: 12px;
      row-gap: 1px;
      align-items: center;
      padding: 10px 12px;
    }

    .vg-tegel__ico {
      grid-area: ico;
    }

    .vg-tegel .inspection-cell--label {
      grid-area: label;
    }

    .vg-tegel .inspection-cell--value {
      grid-area: waarde;
    }

    .ecu-tegels {
      grid-template-columns: minmax(0,1fr);
      gap: 6px;
    }

    .ecu-tegel {
      grid-template-columns: 30px minmax(0,1fr);
      grid-template-rows: auto auto;
      grid-template-areas: "ico titel" "ico waarde";
      column-gap: 12px;
      row-gap: 1px;
      align-items: center;
      padding: 10px 12px;
    }

    .ecu-tegel .status-badge__text {
      align-self: start;
    }

    .ecu-tegel--breed {
      grid-template-columns: 30px minmax(0,1fr);
      grid-template-rows: auto auto auto;
      grid-template-areas: "ico titel" "ico waarde" "omschr omschr";
    }

    .ecu-tegel__omschrijving {
      margin-top: 8px;
    }
}

/*
 * Keuringsrapport op het scherm, in de stijl van de kentekencheck van de
 * website: lichte band bovenaan, witte kaarten met een lijn van 1 px, ronde
 * hoeken, Urbanist 800 en statuslabels met woord en icoon. Ontwerp:
 * okn-akkoord/runs/2026-10-28_rapportstijl/ontwerp/definitief.md.
 *
 * Het rapport staat in de app op de pagina zelf en op de marketingsite als
 * Webflow code component in een shadow DOM. Daarom:
 * - staan de kleuren als tokens (--kk-*) op .inspection-report zelf, zodat geen
 *   variabele van de site inlekt en src/index.css niet nodig is;
 * - staan alle maten in px: de site heeft een andere rem;
 * - staan de basisregels in :where(), zodat ze geen specificiteit toevoegen en
 *   de klassen van het rapport er altijd boven gaan.
 *
 * Hier: tokens, basis, de band met nav, titel en datum, de autokaart, de
 * samenvattingskaart, de disclaimer, de CTA, het fotovenster en de laad- en
 * foutschermen. De categorieen staan in InspectionCategories.css, de
 * statuslabels in StatusBadge.css, de print in src/report/ReportPrint.css.
 *
 * Breekpunten zoals de kentekencheck: 960 (oordeelvakken onder elkaar), 768
 * (kleinere nav) en 620 (telefoon). Tussen 640 en 768 px komt bewust geen grens:
 * het meetvenster van printIndeling.js (703 px) en de print in Chrome (720 tot
 * 740 px) moeten dezelfde regels krijgen.
 */

/* ---------------------------------------------------------------------------
 * Tokens, letterlijk uit de kentekencheck
 * ------------------------------------------------------------------------- */
.inspection-report {
  --kk-ink: #0d1732;
  --kk-ink-2: #46506a;
  --kk-ink-3: #7a8399;
  --kk-page: #f2f7f8;
  --kk-surface: #ffffff;
  --kk-line: #dde8eb;
  --kk-hero: #f2feff;
  --kk-teal: #00c2cf;
  --kk-teal-dk: #006d75;
  --kk-mint: #d8f6f8;
  --kk-mint-2: #eefbfc;
  --kk-mint-3: #c9eef1;
  --kk-navy-knop: #0d1732;
  --kk-kop: #01081b;
  --kk-plate: #f7c600;
  --kk-plate-hi: #ffd83a;
  --kk-ok: #17803a;
  --kk-ok-bg: #e7f5ec;
  /* groene statustekst onder 18,66 px vet op --kk-ok-bg (4,8:1; --kk-ok 4,46:1) */
  --kk-ok-tekst: #157a37;
  --kk-warn: #a65400;
  --kk-warn-bg: #fff2dc;
  --kk-neutral-bg: #eef2f6;
  --kk-f: "Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --kk-r-lg: 22px;
  --kk-r-md: 14px;
  --kk-r-sm: 9px;
  --kk-r-pill: 99px;
  --kk-schaduw-pop: 0 18px 40px rgba(13,23,50,.16);
  --kk-vlak: radial-gradient(70% 65% at 50% 45%,#ffffff 0%,#eefbfc 60%,#e2eff2 100%);
  --kk-gap: 22px;
  /* alleen papier: iets donkerdere lijnen, anders vallen ze weg op een printer */
  --kk-lijn-papier: #cfdde1;
  --kk-haarlijn-papier: #dfe8eb;
  /* de bestaande sleutel uit Reparatie.svg, wit, voor het statusicoon in de samenvatting */
  --kk-sleutel-wit: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 9%27%3E%3Cpath fill=%27%23fff%27 fill-rule=%27evenodd%27 d=%27M5.99325 0.0475958C5.54062 -0.0426672 5.07174 -0.00402977 4.63999 0.159109C4.20824 0.322248 3.83098 0.603332 3.55114 0.970366C3.27131 1.33739 3.10015 1.77562 3.05715 2.23515C3.02319 2.59811 3.07026 2.96283 3.19348 3.30338L0.251833 6.24504C-0.0887958 6.58564 -0.0831474 7.13964 0.264357 7.47325L0.585799 7.78181C0.922109 8.10469 1.45446 8.10074 1.78591 7.77286L4.7681 4.82295C5.09727 4.92959 5.44639 4.96627 5.79281 4.92913C6.24718 4.88042 6.67921 4.70663 7.04067 4.42709C7.40219 4.14755 7.67911 3.77322 7.84064 3.34571C8.00199 2.91856 8.04177 2.45506 7.95562 2.00666C7.93722 1.90748 7.89819 1.81326 7.84109 1.73007C7.78377 1.64657 7.70954 1.57606 7.62322 1.52311C7.51024 1.45379 7.36447 1.47101 7.2707 1.56475L6.12429 2.71116L6.12062 2.71492C6.09391 2.74266 6.06181 2.76472 6.02639 2.77979C5.9909 2.79486 5.95279 2.80263 5.91427 2.80263C5.87575 2.80263 5.83763 2.79486 5.80215 2.77979C5.76672 2.76472 5.73463 2.74266 5.70791 2.71492C5.70301 2.70984 5.69792 2.70493 5.69266 2.70023L5.26523 2.31779C5.21608 2.26485 5.18867 2.19521 5.18867 2.12279C5.18867 2.04817 5.21777 1.97651 5.26977 1.92303L6.41502 0.777798C6.49767 0.695114 6.52186 0.57048 6.47601 0.462885C6.43457 0.365511 6.37226 0.278438 6.29344 0.207825C6.21457 0.137212 6.12119 0.0847834 6.01991 0.0542496C6.01114 0.0516073 6.0022 0.0493868 5.99325 0.0475958Z%27/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * Basis
 * ------------------------------------------------------------------------- */
.inspection-report {
  font-family: var(--kk-f);
  font-size: 16px;
  line-height: 1.5;
  color: var(--kk-ink);
  background: var(--kk-page);
  -webkit-font-smoothing: antialiased;
}

:where(.inspection-report) *,
:where(.inspection-report) *::before,
:where(.inspection-report) *::after {
  box-sizing: border-box;
}

:where(.inspection-report) :is(h1,h2,h3,h4,p,figure) {
  margin: 0;
}

:where(.inspection-report) button {
  font: inherit;
  color: inherit;
}

:where(.inspection-report) img {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Lichte band: nav, titel en datum
 * ------------------------------------------------------------------------- */
/* Het schermlogo is het kleurlogo; op wit papier staat hetzelfde logo. */
.report-band {
  background: var(--kk-hero);
  border-bottom: 1px solid var(--kk-line);
}

.report-header-content {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 16px;
}

.report-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
}

.report-nav-logo {
  line-height: 0;
}

.report-nav-logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.report-nav-actie {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.report-nav-download {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 26px;
  border: 2px solid var(--kk-navy-knop);
  border-radius: 360px;
  background: var(--kk-navy-knop);
  color: #fff;
  font: 600 16px/24px var(--kk-f);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s,color .2s;
}

.report-nav-download:hover:not(:disabled) {
  background: transparent;
  color: var(--kk-navy-knop);
}

.report-nav-download:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: 3px;
}

.report-nav-download:disabled {
  opacity: .6;
  cursor: progress;
}

.report-nav-hint {
  max-width: 280px;
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--kk-line);
  border-radius: var(--kk-r-md);
  background: var(--kk-surface);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--kk-ink-2);
}

.report-header-intro {
  padding: 36px 0 44px;
}

.report-header-title {
  font-size: clamp(36px,4.4vw,52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--kk-kop);
}

.report-header-date {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 16px;
  border-radius: var(--kk-r-pill);
  background: var(--kk-mint);
  color: var(--kk-teal-dk);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * Autokaart en samenvattingskaart
 * ------------------------------------------------------------------------- */
.report-header-kaarten {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--kk-gap);
  padding-top: 28px;
}

/* autokaart: merklogo | naam + plaat + specificatievlak | keurmerk */
.report-header-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 112px;
  gap: 16px 18px;
  padding: 22px 24px 24px;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-lg);
}

.report-header-top,
.report-header-brand,
.report-header-brand-info {
  display: contents;
}

.report-keurmerk-absolute {
  grid-column: 3;
  grid-row: 1/3;
  align-self: start;
  margin-top: -23px;
  line-height: 0;
}

/* zonder keurmerk (komt in app en Webflow niet voor) valt de derde kolom weg */
.report-header-card:not(:has(.report-keurmerk-absolute)) {
  grid-template-columns: 56px minmax(0,1fr);
}

.report-keurmerk-img {
  display: block;
  width: 112px;
  height: auto;
  aspect-ratio: 171/230;
}

.report-header-brand-logo-wrapper {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 8px;
  border-radius: var(--kk-r-md);
  background: var(--kk-surface);
  box-shadow: inset 0 0 0 1px var(--kk-line);
}

.report-header-brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.report-header-brand-title-row {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  min-width: 0;
}

.report-header-brand-text {
  font-size: clamp(24px,3.4vw,34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--kk-ink);
  overflow-wrap: anywhere;
}

/* kleine kentekenplaat (kk-miniplaat) met het bestaande EU-beeld */
.report-kenteken-inline {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(180deg,var(--kk-plate-hi),var(--kk-plate));
  box-shadow: 0 0 0 2px #111 inset;
  overflow: hidden;
  color: var(--kk-ink);
}

.report-kenteken-eu-section {
  flex: none;
  margin: 3px 0 3px 3px;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
  line-height: 0;
}

.report-kenteken-eu-svg {
  display: block;
  /* vaste hoogte (plaat 36 px min 2 x 3 px marge): met height: 100% neemt
     WebKit (Safari, iPhone) de natuurlijke breedte van de svg (614 px) over */
  height: 30px;
  width: auto;
  aspect-ratio: 614/981;
}

.report-kenteken-plate {
  display: grid;
  place-items: center;
  padding: 0 10px 0 9px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Bouwjaar, Km-stand, Pakket: specificatievlak (getal boven, label onder; in de DOM label eerst) */
.report-header-brand-details {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px 16px;
  padding: 16px 18px;
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md);
  background: var(--kk-mint-2);
  min-width: 0;
}

.report-header-brand-detail {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  min-width: 0;
}

.report-header-brand-value {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.report-header-brand-value small {
  margin-left: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kk-ink-2);
}

.report-header-brand-label {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--kk-ink-2);
}

/* samenvattingskaart: aantal aandachtspunten, advies en opmerkingen, tip */
.report-header-summary {
  display: grid;
  gap: 14px;
  padding: 22px 24px 24px;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-lg);
}

.report-header-summary-wrapper {
  display: grid;
  gap: 16px;
}

.report-header-brand-summary-badge--warning {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--kk-warn);
}

.report-header-brand-summary-badge--warning::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kk-warn) var(--kk-sleutel-wit) 55% 55%/13px no-repeat;
}

.report-header-text-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 12px;
}

.report-header-text-separator {
  display: none;
}

.report-header-text-wrapper .report-header-text-block {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--kk-mint-3);
  border-radius: var(--kk-r-md);
  /* lichtblauw zoals het aankoopadvies onderaan (Jimmy, 29-10) */
  background: var(--kk-mint-2);
}

.report-header-text-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kk-ink);
}

.report-header-text-content {
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kk-ink-2);
}

/* Extra zekerheid bij aankoop (Jimmy, 29-10): een rustig lichtblauw vlak met
   het schild in een wit icoonvak, met dezelfde vorm en lijn als de andere
   icoonvakken (Frank, 2-11), en een link naar de occasiongarantie */
.report-zekerheid {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--kk-r-md);
  background: var(--kk-mint-2);
}

.report-zekerheid__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--kk-surface);
  box-shadow: inset 0 0 0 1px var(--kk-line);
  color: var(--kk-icoon);
}

.report-zekerheid__ico .kk-ico {
  width: 24px;
  height: 24px;
}

.report-zekerheid__tekst {
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kk-ink-2);
}

.report-zekerheid__kop {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kk-ink);
}

.report-zekerheid__link {
  font-weight: 700;
  color: var(--kk-teal-dk);
  text-decoration: none;
}

.report-zekerheid__heel {
  white-space: nowrap;
}

.report-zekerheid__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report-zekerheid__link .kk-ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -3px;
}

/* ---------------------------------------------------------------------------
 * Slot: disclaimer als voetnoot, CTA als navy pilknop
 * ------------------------------------------------------------------------- */
.report-disclaimer {
  margin-top: 28px;
}

.report-disclaimer p {
  max-width: 100ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kk-ink-2);
}

.report-cta {
  margin-top: 32px;
  text-align: center;
}

.report-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border: 2px solid var(--kk-navy-knop);
  border-radius: 360px;
  background: var(--kk-navy-knop);
  color: #fff;
  font: 600 16px/24px var(--kk-f);
  text-decoration: none;
  transition: background .2s,color .2s;
}

.report-cta-link:hover {
  background: transparent;
  color: var(--kk-navy-knop);
}

.report-cta-link:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Fotovenster
 * ------------------------------------------------------------------------- */
/* Eigen klassen: het garageformulier gebruikt .photo-modal voor zijn
   uploadvenster, en in de app is alle CSS globaal. */
.report-fotovenster {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(11,20,48,.85);
}

.report-fotovenster__inhoud {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(95vw,1100px);
  max-height: 95vh;
  overflow: hidden;
  border-radius: var(--kk-r-lg);
  background: var(--kk-surface);
}

.report-fotovenster__beeld {
  display: block;
  max-width: 100%;
  max-height: calc(95vh - 64px);
  object-fit: contain;
  background: var(--kk-neutral-bg);
}

.report-fotovenster__omschrijving {
  margin: 0;
  padding: 14px 18px;
  background: var(--kk-mint-2);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kk-ink-2);
}

.report-fotovenster__sluit {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kk-line);
  border-radius: 50%;
  background: var(--kk-surface);
  color: var(--kk-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.report-fotovenster__sluit:focus-visible {
  outline: 3px solid var(--kk-teal);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Schermbreedtes
 * ------------------------------------------------------------------------- */
@media (max-width:960px) {
    .report-header-text-wrapper {
      grid-template-columns: minmax(0,1fr);
    }
}

/* Tablet en klein laptopscherm: Bouwjaar en Km-stand zo breed als hun inhoud,
   Pakket krijgt de rest (zoals in de print), zodat ook 'EV Camper All-in Plus'
   op een regel past. */
@media screen and (min-width:741px) and (max-width:1023px) {
    .report-header-brand-details {
      grid-template-columns: auto auto minmax(0,1fr);
      column-gap: 24px;
    }
}

/* Smalle tablet (621 tot 740 px): zoals op een telefoon twee kolommen en Pakket
   over de volle breedte; drie kolommen zijn hier te smal voor de pakketnaam.
   ReportPrint.css zet de kolomindeling voor de print en het meetvenster van
   printIndeling.js (703 px) weer vast. */
@media screen and (min-width:621px) and (max-width:740px) {
    .report-header-brand-details {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .report-header-brand-detail:last-child {
      grid-column: 1/-1;
    }
}

@media (max-width:768px) {
    .report-nav {
      padding-top: 16px;
    }

    .report-nav-logo-img {
      height: 36px;
    }

    .report-nav-download {
      padding: 9px 18px;
      font-size: 15px;
    }

    .report-header-intro {
      padding: 26px 0 30px;
    }

    .report-header-title {
      font-size: 32px;
    }

    .report-header-date {
      margin-top: 14px;
      font-size: 14px;
    }

    .report-header-kaarten {
      gap: 12px;
      padding-top: 16px;
    }
}

@media (max-width:620px) {
    .report-header-card {
      grid-template-columns: 48px minmax(0,1fr) 64px;
      grid-template-rows: minmax(68px,auto) auto;
      gap: 14px 12px;
      padding: 18px 18px 20px;
    }

    .report-keurmerk-absolute {
      grid-row: 1;
      margin-top: -19px;
    }

    .report-keurmerk-img {
      width: 64px;
    }

    .report-header-brand-logo-wrapper {
      align-self: start;
      width: 48px;
      height: 48px;
      padding: 7px;
      border-radius: 12px;
    }

    .report-header-brand-logo {
      width: 34px;
      height: 34px;
    }

    .report-header-brand-title-row {
      align-self: start;
      justify-content: flex-start;
      gap: 8px 12px;
    }

    .report-header-brand-text {
      font-size: 24px;
    }

    .report-header-brand-details {
      grid-column: 1/-1;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 10px 12px;
      padding: 12px 14px;
    }

    .report-header-brand-detail:last-child {
      grid-column: 1/-1;
    }

    .report-header-brand-value {
      font-size: 18px;
    }

    .report-header-brand-label {
      font-size: 12px;
    }

    .report-header-summary {
      padding: 18px;
    }

    .report-header-text-wrapper .report-header-text-block {
      padding: 12px 14px;
    }

    .report-header-text-title {
      font-size: 17px;
    }
}

/* Smalle telefoons (onder 360 px): merklogo, keurmerk, naam en kentekenplaat
   iets kleiner, zodat een merknaam als 'Volkswagen' heel blijft en de plaat
   naast het keurmerk past. Zelfde opbouw als op een gewone telefoon. */
@media (max-width:359px) {
    .report-header-card {
      grid-template-columns: 40px minmax(0,1fr) 52px;
      grid-template-rows: minmax(56px,auto) auto;
      gap: 12px 10px;
      padding: 16px 16px 18px;
    }

    .report-keurmerk-absolute {
      margin-top: -17px;
    }

    .report-keurmerk-img {
      width: 52px;
    }

    .report-header-brand-logo-wrapper {
      width: 40px;
      height: 40px;
      padding: 6px;
      border-radius: 10px;
    }

    .report-header-brand-logo {
      width: 28px;
      height: 28px;
    }

    .report-header-brand-title-row {
      gap: 8px 10px;
    }

    .report-header-brand-text {
      font-size: 21px;
    }

    .report-kenteken-inline {
      height: 32px;
    }

    .report-kenteken-eu-svg {
      height: 26px;
    }

    .report-kenteken-plate {
      padding: 0 8px 0 7px;
      font-size: 16px;
    }
}

@media (prefers-reduced-motion:reduce) {
  .report-nav-download,
  .report-cta-link {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Visuele componenten in de kop en de samenvatting (ontwerp-visueel/visueel.md
 * 3.1, en het overzicht in een oogopslag zoals de kentekencheck). Geen tekst via
 * CSS: elke content is "". De print staat in ReportPrint.css: daar staan het
 * icoon in de datumpil en het overzicht niet.
 * ------------------------------------------------------------------------- */
.inspection-report {
  /* kleur van de bestaande veldiconen (fill in de bestanden) */
  --kk-icoon: #47bccb;
  /* lijn van de tijdlijn in Voertuiggegevens */
  --kk-tijdlijn: #c3d3d8;
  /* ring van het witte icoonvak op een oranje tegel */
  --kk-warn-lijn: #f3dcb8;
  /* tweede tint van de levensloopbalken van de check, voor de profielschaal */
  --kk-schaal-advies: #efbd6e;
  --kk-schaal-ok: #94d2ab;
  /* kleur van de bestaande band-overlays, voor het schadeplaatje */
  --kk-overlay: #f36602;
  --kk-overlay-vlak: rgba(243,102,2,.26);
}

/* bestaand icoon, inline (currentColor) of als <img>, vult zijn vak */
.kk-ico {
  display: block;
  width: 100%;
  height: 100%;
}

/* datumpil met het bestaande icoon 'Keuring uitgevoerd op', zelfde icoon als
   het anker van de tijdlijn */
.report-header-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.report-header-date__ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--kk-teal-dk);
}

/* Overzicht onder het aantal aandachtspunten: een oranje tegel met de sleutel
   en de telling (zelfde tekst als de score bij de categorie) per categorie met
   aandachtspunten. Categorieen zonder punten staan er niet in. Niet klikbaar. De naam staat in elke tegel op
   dezelfde hoogte, direct onder het icoon, de telling eronder. */
.report-overzicht {
  display: grid;
  /* Vast raster van 6 (het maximale aantal gescoorde categorieen): bij 2 of 3
     tegels blijven ze even breed en rekken ze niet uit over de hele kaart. */
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-overzicht__tegel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 14px 14px 13px;
  border-radius: var(--kk-r-md);
}

.report-overzicht__tegel--aandacht {
  background: var(--kk-warn-bg);
}

.report-overzicht__icoon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--kk-surface);
  box-shadow: inset 0 0 0 1px var(--kk-line);
  line-height: 0;
}

.report-overzicht__tegel--aandacht .report-overzicht__icoon {
  box-shadow: inset 0 0 0 1px var(--kk-warn-lijn);
}

.report-overzicht__icoon img {
  display: block;
  width: 20px;
  height: 20px;
}

/* statusrondje rechtsboven in de tegel: het bestaande vinkje of de sleutel */
.report-overzicht__status {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 6px;
  border-radius: 50%;
  color: #fff;
}

.report-overzicht__tegel--aandacht .report-overzicht__status {
  padding: 5px 5px 5px 6px;
  background: var(--kk-warn);
}

.report-overzicht__naam {
  align-self: start;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--kk-ink);
  overflow-wrap: anywhere;
}

.report-overzicht__aantal {
  align-self: start;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--kk-warn);
}

/* Tablet en klein laptopscherm: drie tegels naast elkaar (zes categorieen in
   twee gelijke rijen), zodat '2 aandachtspunten' op een regel blijft. */
@media (max-width:1100px) {
    .report-overzicht {
      grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

/* Telefoon: een compacte lijst, een regel per categorie: icoon met het
   statusrondje op de hoek, naam, telling rechts. */
@media (max-width:620px) {
    .report-overzicht {
      grid-template-columns: minmax(0,1fr);
      gap: 6px;
    }

    .report-overzicht__tegel {
      grid-template-columns: 32px minmax(0,1fr) auto;
      grid-template-rows: auto;
      grid-template-areas: "ico naam aantal";
      column-gap: 12px;
      align-items: center;
      padding: 7px 14px 7px 7px;
      border-radius: 12px;
    }

    .report-overzicht__icoon {
      grid-area: ico;
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 9px;
    }

    .report-overzicht__icoon img {
      width: 18px;
      height: 18px;
    }

    .report-overzicht__status {
      top: auto;
      right: -5px;
      bottom: -5px;
      width: 17px;
      height: 17px;
      padding: 4px;
      box-shadow: 0 0 0 2px var(--kk-surface);
    }

    .report-overzicht__tegel--aandacht .report-overzicht__status {
      padding: 4px 4px 4px 5px;
    }

    .report-overzicht__naam {
      grid-area: naam;
      align-self: center;
      font-size: 14.5px;
    }

    .report-overzicht__aantal {
      grid-area: aantal;
      align-self: center;
      font-size: 13px;
      white-space: nowrap;
    }
}

/* Smalle telefoon (320 tot 380): de telling onder de naam, zodat een lange
   naam als 'ECU (Diagnose check)' niet over drie regels breekt. */
@media (max-width:380px) {
    .report-overzicht__tegel {
      grid-template-columns: 32px minmax(0,1fr);
      grid-template-areas: "ico naam" "ico aantal";
      row-gap: 0;
    }

    .report-overzicht__naam {
      align-self: end;
    }

    .report-overzicht__aantal {
      align-self: start;
    }
}

/* ---------------------------------------------------------------------------
 * Laad- en foutschermen (alleen in de app, buiten .inspection-report)
 * ------------------------------------------------------------------------- */
/* Eigen klassen: .spinner, .error-content, .error-message en .btn zijn van het
   garageformulier en blijven daar ongewijzigd. Vaste kleuren, want de tokens
   staan op .inspection-report. */
.report-staat {
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* De spinner en de tekst samen in het midden, niet elk in een eigen helft. */
  align-content: center;
  padding: 24px 16px;
  background: #f2f7f8;
  font-family: "Urbanist",system-ui,sans-serif;
  color: #0d1732;
}

.report-staat__kaart {
  width: 100%;
  max-width: 520px;
  padding: 40px 32px;
  border: 1px solid #dde8eb;
  border-radius: 22px;
  background: #fff;
  text-align: center;
}

.report-staat__kop {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  /* src/index.css geeft elke h2 zwart */
  color: #0d1732;
}

.report-staat__tekst {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #46506a;
}

.report-staat__knop {
  margin-top: 22px;
  display: inline-flex;
  padding: 11px 26px;
  border: 2px solid #0d1732;
  border-radius: 360px;
  background: #0d1732;
  color: #fff;
  font: 600 16px/24px "Urbanist",system-ui,sans-serif;
  cursor: pointer;
}

.report-staat__knop:hover {
  background: transparent;
  color: #0d1732;
}

.report-staat__knop:focus-visible {
  outline: 3px solid #00c2cf;
  outline-offset: 3px;
}

.report-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border: 4px solid #dde8eb;
  border-top-color: #00c2cf;
  border-radius: 50%;
  animation: report-draai .9s linear infinite;
}

@keyframes report-draai {
  to {
    transform: rotate(360deg);
  }
}

/* Telefoon: het schild kleiner en bovenaan, de tekst krijgt de ruimte */
@media (max-width:620px) {
    .report-zekerheid {
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
    }

    .report-zekerheid__ico {
      width: 38px;
      height: 38px;
      border-radius: 10px;
    }

    .report-zekerheid__ico .kk-ico {
      width: 20px;
      height: 20px;
    }

    .report-zekerheid__tekst {
      font-size: 14.5px;
    }
}

/*
 * Printweergave van het keuringsrapport (OKN-113), in dezelfde stijl als het
 * scherm en de kentekencheck. De knop 'Opslaan als PDF' opent het printvenster
 * van de browser; daar kiest de klant 'Opslaan als PDF'.
 *
 * - Pagina 1: lichte band tot de papierrand (Chrome, Edge, Firefox), logo en
 *   titel op een regel, de autokaart met het keurmerk aan de bovenrand, het
 *   aantal aandachtspunten, advies en opmerkingen, het voorstel van de verkoper
 *   (VoorstelVerkoper) en onderaan de tip en de disclaimer.
 * - Vanaf pagina 2 de keuring: elke categorie een kaart met de kop erin en de
 *   regels in twee helften, rij voor rij. Een categorie breekt nooit over een
 *   pagina heen.
 * - De foto's genummerd op eigen pagina's achteraan; elke categorie verwijst
 *   naar haar nummers en de pagina, zie printIndeling.js en printFotos.js.
 *
 * Alles staat in precies één blok @media print: printIndeling.js pakt dat uit
 * om de pagina-indeling vooraf te meten. Alles wat een hoogte bepaalt staat
 * vast en met !important: een A4-pagina is in CSS ongeveer 703 px breed, dus
 * bij printen gelden ook de schermregels tot 768 px, en Safari op een Mac past
 * bij printen de desktopregels toe.
 */

@media print {
  /* Onderaan elke pagina Occasionkeuring Nederland en het paginanummer. Dat kan
     in Chrome en Edge; Safari kent deze margevakken niet en laat ze leeg. Een
     leeg vak boven houdt ook de datum en paginatitel weg die Chrome er anders
     zelf zet. printIndeling.js rekent met deze maten. */
  @page {
    size: A4 portrait;
    margin: 12mm 12mm 16mm;
    @top-left {
      content: '';
    }
    @top-center {
      content: '';
    }
    @top-right {
      content: '';
    }
    @bottom-center {
      content: '';
    }
    @bottom-left {
      content: 'Occasionkeuring Nederland';
      vertical-align: bottom;
      padding-bottom: 7mm;
      font-family: 'Urbanist',sans-serif;
      font-size: 8pt;
      color: #46506a;
    }
    @bottom-right {
      content: 'Pagina ' counter(page) ' van ' counter(pages);
      vertical-align: bottom;
      padding-bottom: 7mm;
      font-family: 'Urbanist',sans-serif;
      font-size: 8pt;
      color: #46506a;
    }
  }

  /* Pagina 1 zonder marge boven en opzij in Chrome, Edge en Firefox (benoemde
     pagina, zie .print-randloos hieronder); onder blijft de marge voor de
     voettekst. Loopt een lange introductie door, dan begint de tweede pagina
     gewoon onder de marge. */
  @page voorblad {
    margin: 12mm 0 16mm;
    @bottom-left {
      padding-left: 12mm;
    }
    @bottom-right {
      padding-right: 12mm;
    }
  }

  @page voorblad:first {
    margin-top: 0;
  }

  html,
  body,
  #root {
    background: #fff !important;
    min-height: 0 !important;
  }

  .inspection-report,
  .inspection-report * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .inspection-report {
    background: #fff !important;
    min-height: 0 !important;
  }

  /* bediening en schermdelen hebben op papier geen functie */
  .report-nav-actie,
  .category-chevron,
  .photo-toggle-button-header,
  .category-photo-toggle-mobile,
  .field-tooltip,
  .field-tooltip-popup,
  .report-fotovenster,
  .report-cta,
  .report-zekerheid,
  .report-disclaimer,
  .category-photo-gallery,
  .report-section-heading--okn,
  .inspection-categories.inspection-categories--okn {
    display: none !important;
  }

  /* ---------------------------------------------------------------------------
     Pagina 1: band, logo en titel op een regel, autokaart met het keurmerk aan
     de bovenrand, samenvatting, voorstel van de verkoper, tip en disclaimer.
     ------------------------------------------------------------------------- */
  .report-header {
    position: relative;
    min-height: 250mm;
    padding: 0 0 31mm !important;
    background: none !important;
    break-after: page;
    page-break-after: always;
  }

  .report-header-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .report-band {
    background: none !important;
    border: 0 !important;
  }

  .report-band .report-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 4.5mm !important;
  }

  .report-nav {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .report-nav-logo-img {
    display: block !important;
    width: auto !important;
    height: 10.5mm !important;
  }

  .report-header-intro {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .report-header-title {
    font-size: 20pt !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    color: var(--kk-kop) !important;
  }

  .report-header-date {
    display: block !important;
    margin: 1mm 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 10pt !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--kk-ink-2) !important;
  }

  /* autokaart */
  .report-header-kaarten {
    display: block !important;
    margin-top: 6.5mm !important;
    padding: 0 !important;
  }

  .report-header-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 16mm minmax(0,1fr) 22mm !important;
    grid-template-rows: auto auto !important;
    gap: 3mm 5mm !important;
    padding: 4.5mm 5mm 5mm !important;
    border: .75pt solid var(--kk-lijn-papier) !important;
    border-radius: 4mm !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .report-header-top,
  .report-header-brand,
  .report-header-brand-info {
    display: contents !important;
  }

  .report-keurmerk-absolute {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1/3 !important;
    align-self: start !important;
    margin: calc(-4.5mm - .75pt) 0 0 !important;
    line-height: 0;
  }

  .report-keurmerk-img {
    display: block !important;
    width: 22mm !important;
    height: auto !important;
    aspect-ratio: 171/230;
  }

  .report-header-brand-logo-wrapper {
    grid-column: 1 !important;
    grid-row: 1/3 !important;
    align-self: center !important;
    width: 16mm !important;
    height: 16mm !important;
    margin: 0 !important;
    padding: 2.2mm !important;
    border: 0 !important;
    border-radius: 3mm !important;
    box-shadow: inset 0 0 0 .75pt var(--kk-lijn-papier) !important;
  }

  .report-header-brand-logo {
    width: 11.5mm !important;
    height: 11.5mm !important;
  }

  .report-header-brand-title-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 2mm 5mm !important;
    margin: 0 !important;
  }

  .report-header-brand-text {
    font-size: 17pt !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--kk-ink) !important;
  }

  .report-kenteken-inline {
    height: 7.5mm !important;
    border-radius: 1.4mm !important;
    background: var(--kk-plate) !important;
    box-shadow: inset 0 0 0 1.5px #111 !important;
    transform: none !important;
  }

  .report-kenteken-eu-section {
    margin: .7mm 0 .7mm .7mm !important;
    border-radius: .9mm 0 0 .9mm !important;
  }

  .report-kenteken-eu-svg {
    height: 6.1mm !important;
  }

  .report-kenteken-plate {
    padding: 0 2.6mm 0 2.2mm !important;
    font-size: 12.5pt !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
  }

  .report-header-brand-details {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0,1fr) !important;
    gap: 2mm 10mm !important;
    margin: 0 !important;
    padding: 2.4mm 4mm !important;
    border: .75pt solid var(--kk-line) !important;
    border-radius: 2.5mm !important;
    background: var(--kk-mint-2) !important;
  }

  .report-header-brand-detail {
    display: flex !important;
    flex-direction: column-reverse !important;
    grid-column: auto !important;
    gap: 0 !important;
  }

  .report-header-brand-value {
    font-size: 12pt !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--kk-ink) !important;
  }

  .report-header-brand-value small {
    font-size: 8.5pt !important;
  }

  .report-header-brand-label {
    margin-top: .3mm !important;
    font-size: 8pt !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--kk-ink-2) !important;
  }

  /* samenvatting: statuslabel en oordeelvakken, zonder kaart */
  .report-header-summary {
    display: block !important;
    margin-top: 5mm !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }

  .report-header-summary-wrapper {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .report-header-brand-summary {
    margin: 0 0 3mm !important;
  }

  .report-header-brand-summary-badge--warning {
    gap: 2.2mm !important;
    padding: 0 !important;
    background: none !important;
    font-size: 12pt !important;
    line-height: 1.2 !important;
  }

  .report-header-brand-summary-badge--warning::before {
    width: 5.6mm !important;
    height: 5.6mm !important;
    background-size: 2.6mm !important;
  }

  .report-header-text-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(80mm,1fr)) !important;
    gap: 3.5mm !important;
  }

  /* een tekst veel langer dan de andere: onder elkaar is korter (ReportView.jsx) */
  .report-header-text-wrapper--onder-elkaar {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .report-header-text-wrapper .report-header-text-block {
    display: block !important;
    padding: 3mm 4mm !important;
    border: .5pt solid var(--kk-mint-3) !important;
    border-radius: 3mm !important;
    background: var(--kk-mint-2) !important;
  }

  .report-header-text-title {
    margin: 0 0 .8mm !important;
    font-size: 10.5pt !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--kk-ink) !important;
  }

  .report-header-text-content {
    max-width: none !important;
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
    color: var(--kk-ink) !important;
  }

  /* voorstel van de verkoper (VoorstelVerkoper.jsx ongewijzigd): kaart met specificatievlak */
  .report-print-verkoper {
    display: block !important;
    margin-top: 5mm !important;
    padding: 4.5mm 5mm !important;
    border: .75pt solid var(--kk-lijn-papier) !important;
    border-radius: 4mm !important;
    /* past het voorstel niet meer op pagina 1 (lang advies), dan heel op pagina 2 */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .report-print-verkoper .report-header-text-block {
    display: block !important;
    padding: 0 !important;
    background: none !important;
  }

  .report-print-verkoper .report-header-text-block+.report-header-text-block {
    margin-top: 4mm !important;
    padding-top: 4mm !important;
    border-top: .5pt solid var(--kk-haarlijn-papier) !important;
  }

  .report-print-verkoper .report-header-text-title {
    margin: 0 0 2.5mm !important;
    font-size: 11pt !important;
    font-weight: 800 !important;
  }

  .report-print-verkoper-feiten {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(27mm,1fr)) !important;
    gap: 2mm 4mm !important;
    margin: 0 0 3mm !important;
    padding: 2.4mm 4mm !important;
    border: .75pt solid var(--kk-line) !important;
    border-radius: 2.5mm !important;
    background: var(--kk-mint-2) !important;
  }

  .report-print-verkoper-feit {
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: flex-end !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .report-print-verkoper-regel {
    margin: 0 0 1mm !important;
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
    color: var(--kk-ink) !important;
  }

  .report-print-verkoper-regel strong {
    font-weight: 700 !important;
  }

  /* onderaan pagina 1: tip in een gestippeld kader, disclaimer eronder */
  .report-print-footer {
    display: block !important;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .report-print-footer p {
    margin: 0 !important;
    font-size: 8.5pt;
    line-height: 1.45;
    color: var(--kk-ink-2);
  }

  .report-print-footer .report-print-footer-tip {
    margin-bottom: 4mm !important;
    padding: 3.6mm 5mm;
    border: .75pt dashed var(--kk-lijn-papier);
    border-radius: 3mm;
  }

  .report-print-footer .report-print-footer-tip strong {
    color: var(--kk-ink);
  }

  .report-print-footer .report-print-footer-tip a {
    font-weight: 700;
    color: var(--kk-teal-dk);
    text-decoration: none;
  }

  .report-print-footer .report-print-footer-disclaimer {
    font-size: 8pt;
  }

  /* Chrome, Edge, Firefox: pagina 1 randloos, met de lichte band tot de papierrand.
     Safari kent de benoemde pagina niet: daar geen band, de rest gelijk. */
  .print-randloos .report-header {
    page: voorblad;
    z-index: 0;
    min-height: 280mm;
    padding: 12mm 12mm 31mm !important;
  }

  .print-randloos .report-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 46mm;
    background: var(--kk-mint-2);
    border-bottom: .75pt solid var(--kk-line);
  }

  .print-randloos .report-print-footer {
    right: 12mm;
    left: 12mm;
  }

  /* ---------------------------------------------------------------------------
     Keuringspagina's: elke categorie een kaart met de kop erin en de regels in
     twee helften, rij voor rij. Labelkolom overal 50 mm, zodat de statuslabels
     over de hele pagina onder elkaar staan. Alleen margin-bottom (printIndeling).
     ------------------------------------------------------------------------- */
  .report-content {
    max-width: none !important;
    padding: 0 !important;
  }

  .report-section-heading {
    margin: 0 0 3mm !important;
    font-size: 13pt !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  .inspection-categories {
    display: block !important;
  }

  .inspection-category {
    display: block !important;
    margin: 0 .5mm 5mm !important;
    border: .75pt solid var(--kk-lijn-papier) !important;
    border-radius: 3mm !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .inspection-category--nieuwe-pagina {
    break-before: page;
    page-break-before: always;
  }

  .category-header-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 2.5mm !important;
    padding: 1.7mm 3.5mm !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    cursor: default;
  }

  .category-header {
    display: flex !important;
    align-items: center !important;
    gap: 2.5mm !important;
  }

  .category-icon {
    width: 5.8mm !important;
    height: 5.8mm !important;
    padding: 1.4mm !important;
    border-radius: 1.5mm !important;
  }

  .category-title {
    font-size: 11pt !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .category-score--warning {
    padding: .6mm 2.2mm !important;
    font-size: 7.5pt !important;
    line-height: 1.3 !important;
  }

  .category-photo-reference {
    display: inline !important;
    order: 3;
    margin-left: auto !important;
    font-size: 8pt;
    line-height: 1.3;
    color: var(--kk-ink-2);
    white-space: nowrap;
  }

  /* een lijn onder de kop: de rand van de inhoud. De bovenlijn van de eerste regels valt weg door overflow en margin-top -1px
     (Chrome tekent een rand van 0,5pt als 1px). */
  .category-content {
    max-height: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-top: .5pt solid var(--kk-haarlijn-papier) !important;
    transition: none !important;
  }

  /* raster: helften label | waarde, rij voor rij; lijnen als randen */
  .inspection-rows-container {
    display: grid !important;
    grid-template-columns: 50mm minmax(0,1fr) 50mm minmax(0,1fr) !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    margin-top: -1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    overflow: visible !important;
  }

  .inspection-row {
    display: grid !important;
    grid-template-columns: subgrid !important;
    grid-column: span 2 !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-top: .5pt solid var(--kk-haarlijn-papier) !important;
    background: #fff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .inspection-row--rechts {
    border-left: .5pt solid var(--kk-haarlijn-papier) !important;
  }

  .inspection-cell--label {
    flex: none !important;
    min-width: 0 !important;
    padding: 1.7mm 3mm !important;
    font-size: 9pt !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--kk-ink-2) !important;
  }

  .inspection-cell--value {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.5mm !important;
    max-width: none !important;
    padding: 1.7mm 3mm 1.7mm 0 !important;
    text-align: left !important;
  }

  .status-plain {
    font-size: 9pt !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--kk-ink) !important;
  }

  .inspection-row--aandacht {
    background: var(--kk-warn-bg) !important;
  }

  .inspection-row--aandacht .inspection-cell--label {
    color: var(--kk-ink) !important;
    font-weight: 600 !important;
  }

  .inspection-row--notitie {
    grid-column: 1/-1 !important;
    display: block !important;
    padding: 1.6mm 3mm !important;
  }

  .inspection-row--notitie .inspection-cell--label {
    padding: 0 !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
  }

  .inspection-row--notitie .inspection-cell--value {
    display: block !important;
    padding: .4mm 0 0 !important;
    font-size: 9pt !important;
    line-height: 1.4 !important;
  }

  .inspection-row--notitie .status-plain {
    display: block !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
  }

  .inspection-row--omschrijving {
    background: var(--kk-warn-bg) !important;
  }

  .inspection-row--omschrijving .inspection-cell--label {
    color: var(--kk-warn) !important;
  }

  .inspection-row--leeg {
    display: block !important;
  }

  .status-badge {
    gap: 1.2mm !important;
    padding: .55mm 2.2mm .55mm 1.7mm !important;
    font-size: 7.5pt !important;
    line-height: 1.3 !important;
  }

  .status-badge__icon-wrapper,
  .status-badge__icon {
    width: 2.2mm !important;
    height: 2.2mm !important;
  }

  .status-badge--nvt {
    padding-left: 2.2mm !important;
  }

  /* Banden: info als gestippelde regel, vier tegels links, tekening rechts */
  .category-info-text {
    margin: 2.6mm 3.5mm 0 !important;
    padding: 1.5mm 3mm !important;
    border: .5pt dashed var(--kk-lijn-papier) !important;
    border-radius: 2.2mm !important;
    background: none !important;
    font-size: 7.5pt !important;
    line-height: 1.4 !important;
    color: var(--kk-ink-2) !important;
  }

  .tires-content-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 46mm !important;
    gap: 3mm !important;
    padding: 2.6mm 3.5mm 3mm !important;
  }

  .tires-fields {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 2mm !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .tires-field-row {
    display: grid !important;
    grid-template-columns: 6mm minmax(0,1fr) !important;
    grid-template-areas: "ico titel" "ico waarde" !important;
    column-gap: 2.5mm !important;
    row-gap: .2mm !important;
    align-items: center !important;
    align-content: center !important;
    padding: 2mm 3mm !important;
    border: 0 !important;
    border-radius: 2.2mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .tires-field-row .inspection-cell--value,
  .tires-field-row .status-badge {
    display: contents !important;
  }

  .tires-field-row .status-badge__icon-wrapper {
    width: 6mm !important;
    height: 6mm !important;
    border-radius: 1.6mm !important;
  }

  .tires-field-row .status-badge__icon {
    width: 2.8mm !important;
    height: 2.8mm !important;
  }

  .tires-field-row .inspection-cell--label {
    padding: 0 !important;
    font-size: 8pt !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .tires-field-row .status-badge__text {
    padding: 0 !important;
    font-size: 12pt !important;
    line-height: 1.2 !important;
  }

  .tire-visualization {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 1.5mm !important;
    border: .5pt solid var(--kk-haarlijn-papier) !important;
    border-radius: 2.2mm !important;
    background: #fff !important;
    break-inside: avoid;
  }

  .tire-viz__container {
    width: 40mm !important;
    max-width: none !important;
  }

  .tire-viz__plaat {
    mix-blend-mode: normal !important;
  }

  /* ---------------------------------------------------------------------------
     Fotobijlage: maten ongewijzigd (12 per pagina, vak 44 mm, bijschrift 10,5 mm).
     ------------------------------------------------------------------------- */
  .report-photo-appendix {
    display: block !important;
    break-before: page;
    page-break-before: always;
  }

  .report-photo-appendix-pagina {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .report-photo-appendix-pagina+.report-photo-appendix-pagina {
    break-before: page;
    page-break-before: always;
  }

  .report-photo-appendix-item {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 10mm) / 3 - .2mm);
    margin: 0 5mm 5mm 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .report-photo-appendix-item:nth-child(3n) {
    margin-right: 0;
  }

  .report-photo-appendix-beeld {
    height: 44mm;
    overflow: hidden;
    border-radius: 2.2mm;
    background: var(--kk-neutral-bg);
    box-shadow: inset 0 0 0 .5pt var(--kk-haarlijn-papier);
  }

  .report-photo-appendix-beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .report-photo-appendix-item figcaption {
    height: 10.5mm;
    margin-top: 1.2mm;
    overflow: hidden;
    font-family: var(--kk-f);
    font-size: 7.5pt;
    line-height: 1.3;
    color: var(--kk-ink-2);
  }

  .report-photo-appendix-item figcaption strong {
    font-weight: 800;
    color: var(--kk-ink);
  }

  .report-photo-appendix-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--kk-ink-2);
  }

  /* ---------------------------------------------------------------------------
     Visuele componenten (ontwerp-visueel/visueel.md). Zelfde aanpak als
     hierboven: elke hoogtebepalende maat vast en met !important, zodat de
     schermregels tot 768 en 960 px (die bij printen gelden) niets verschuiven.
     ------------------------------------------------------------------------- */
  .kk-ico {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* datum: icoon alleen op het scherm; pagina 1 blijft gelijk */
  .report-header-date__ico {
    display: none !important;
  }

  /* overzicht in een oogopslag: niet op papier, daar staan alle categorieen
     open met hun score; ook niet in het meetvenster van printIndeling.js */
  .report-overzicht {
    display: none !important;
  }

  /* Voertuiggegevens: vijf tegels op een rij, daaronder de tijdlijn */
  .vg-tegels {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 2mm !important;
    margin: 0 !important;
    padding: 2.4mm 3.5mm 0 !important;
  }

  .vg-tegel {
    display: grid !important;
    grid-template-columns: 5.5mm minmax(0,1fr) !important;
    /* labelrij altijd twee regels hoog (7pt x 1,2 x 2), label onderaan: de
       waarden van de vijf tegels staan op een lijn, ook als een label afbreekt */
    grid-template-rows: minmax(16.8pt,auto) auto !important;
    grid-template-areas: "ico label" "ico waarde" !important;
    column-gap: 1.8mm !important;
    row-gap: .4mm !important;
    align-items: center !important;
    align-content: center !important;
    padding: 1.6mm 1.9mm !important;
    border: .5pt solid var(--kk-haarlijn-papier) !important;
    border-radius: 2.2mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vg-tegel--ok,
  .vg-tegel--warn {
    border-color: transparent !important;
  }

  .vg-tegel__ico {
    grid-area: ico;
    width: 5.5mm !important;
    height: 5.5mm !important;
    padding: 1.35mm !important;
    border-radius: 1.6mm !important;
    box-shadow: inset 0 0 0 .75pt var(--kk-line) !important;
  }

  .vg-tegel__ico.vg-tegel__ico--lijn {
    padding: 1mm !important;
  }

  .vg-tegel__ico--status {
    padding: 1.6mm !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  .vg-tegel .inspection-cell--label {
    grid-area: label;
    align-self: end !important;
    padding: 0 !important;
    font-size: 7pt !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .vg-tegel .inspection-cell--value {
    grid-area: waarde;
    display: block !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

  .vg-tegel .status-plain {
    font-size: 10pt !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }

  .vg-tijdlijn {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0,1fr) !important;
    margin: 3mm 3.5mm 2.6mm !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vg-tijdlijn__punt {
    gap: .2mm !important;
    padding: 0 1mm !important;
  }

  .vg-tijdlijn__punt::before,
  .vg-tijdlijn__punt::after {
    top: 2.8mm !important;
    border-top-width: .75pt !important;
  }

  .vg-tijdlijn__stip {
    width: 5.6mm !important;
    height: 5.6mm !important;
    margin: 0 0 .8mm !important;
    padding: 1.45mm !important;
    box-shadow: inset 0 0 0 .75pt var(--kk-lijn-papier),0 0 0 1.2mm #fff !important;
  }

  .vg-tijdlijn__punt--keuring .vg-tijdlijn__stip {
    box-shadow: 0 0 0 1.2mm #fff !important;
  }

  .vg-tijdlijn__stip:empty::after {
    width: 1.8mm !important;
    height: 1.8mm !important;
  }

  .vg-tijdlijn__punt .inspection-cell--value {
    padding: 0 !important;
  }

  .vg-tijdlijn__punt .status-plain {
    font-size: 9.5pt !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .vg-tijdlijn__punt .inspection-cell--label {
    max-width: none !important;
    padding: 0 !important;
    font-size: 7.5pt !important;
    line-height: 1.2 !important;
  }

  .vg-tijdlijn__punt--keuring .inspection-cell--label {
    font-weight: 700 !important;
    color: var(--kk-ink) !important;
  }

  /* profielschaal: onder de waarde, over de volle breedte van de tegel */
  .tires-field-row {
    grid-template-areas: "ico titel" "ico waarde" "schaal schaal" !important;
  }

  .profielschaal {
    --naad: .45mm;
    height: 1.4mm !important;
    margin: 1.4mm 0 .2mm !important;
  }

  .profielschaal__stip {
    left: clamp(1.1mm,var(--stip),calc(100% - 1.1mm)) !important;
    width: 2.2mm !important;
    height: 2.2mm !important;
    margin: -1.1mm 0 0 -1.1mm !important;
    box-shadow: inset 0 0 0 .55mm var(--kk-ink) !important;
  }

  /* schadeplaatje: raster in twee helften links (labelkolom 30 mm), tekening
     40 mm rechts met een haarlijn ertussen */
  .schade-inhoud {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 47mm !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .schade-inhoud .inspection-rows-container {
    grid-template-columns: 30mm minmax(0,1fr) 30mm minmax(0,1fr) !important;
  }

  .schade-inhoud .inspection-row--leeg {
    display: block !important;
  }

  .schade-plaatje {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.4mm 3mm !important;
    border-left: .5pt solid var(--kk-haarlijn-papier) !important;
    border-radius: 0 !important;
    background: #fff !important;
    break-inside: avoid;
  }

  .schade-plaatje__container {
    width: 40mm !important;
    max-width: none !important;
  }

  .schade-plaatje__basis {
    mix-blend-mode: normal !important;
  }

  .schade-plaatje__vlak {
    stroke-width: 6 !important;
  }

  /* ECU: drie statustegels op een rij; een storing met omschrijving twee breed
     met de omschrijving rechts; de notities eronder als gewone regel */
  .ecu-tegels {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow: row dense !important;
    gap: 2mm !important;
    margin: 0 !important;
    padding: 2.6mm 3.5mm !important;
  }

  .ecu-tegel {
    display: grid !important;
    grid-template-columns: 6mm minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "ico titel" "ico waarde" !important;
    column-gap: 2.4mm !important;
    row-gap: .3mm !important;
    align-items: center !important;
    align-content: center !important;
    padding: 2mm 3mm !important;
    border-radius: 2.2mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* een lange omschrijving maakt de lege rijen boven en onder hoger, niet de
     rijen van label en status: die blijven samen in het midden */
  .ecu-tegel--breed {
    grid-column: span 2 !important;
    grid-template-columns: 6mm minmax(0,.75fr) minmax(0,1.6fr) !important;
    grid-template-rows: 1fr auto auto 1fr !important;
    grid-template-areas: "ico . omschr" "ico titel omschr" "ico waarde omschr" "ico . omschr" !important;
    row-gap: 0 !important;
  }

  .ecu-tegel--breed .status-badge__text {
    margin-top: .3mm !important;
  }

  .ecu-tegel > .inspection-cell--value,
  .ecu-tegel > .inspection-cell--value > .status-badge {
    display: contents !important;
  }

  .ecu-tegel .status-badge__icon-wrapper {
    width: 6mm !important;
    height: 6mm !important;
    border-radius: 1.6mm !important;
  }

  .ecu-tegel .status-badge__icon {
    width: 2.8mm !important;
    height: 2.8mm !important;
  }

  .ecu-tegel > .inspection-cell--label {
    align-self: center !important;
    padding: 0 !important;
    font-size: 8pt !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .ecu-tegel .status-badge__text {
    padding: 0 !important;
    font-size: 10.5pt !important;
    line-height: 1.2 !important;
  }

  .ecu-tegel__omschrijving {
    margin: 0 !important;
    padding: 1.5mm 2.6mm !important;
    border-radius: 1.6mm !important;
  }

  .ecu-tegel__omschrijving .inspection-cell--label {
    padding: 0 !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    color: var(--kk-warn) !important;
  }

  .ecu-tegel__omschrijving .inspection-cell--value {
    display: block !important;
    padding: .3mm 0 0 !important;
  }

  .ecu-tegel__omschrijving .status-plain {
    display: block !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  .ecu-notities {
    margin: 0 !important;
  }
}

/* Alleen bedoeld voor de print; op het scherm staan de foto's in de categorie,
   de disclaimer onderaan het rapport en de gegevens van Occasionkeuring
   Nederland in een eigen sectie. */
.category-photo-reference,
.report-photo-appendix,
.report-print-footer,
.report-print-verkoper {
  display: none;
}