/* SITE3: de viewer van de hele bouwtekening (src/modules/site/browser/bouwtekening.ts), op /hoe-het-werkt
 * en /bouwplannen/<slug>. Een <dialog> met een kop (titel, kleiner, groter, sluiten), het vlak met één
 * pagina op een canvas en een balk met vorige en volgende. Op een telefoon vult de dialog het scherm. */

html.tekening-open {
  overflow: hidden;
}

/* De knop op het bouwplan staat onder het model; browser/bouwtekening.ts haalt hidden weg. */
.bouwplan-media .bouwplan-tekening {
  margin-top: var(--sp-3);
}

.tekening-dialoog {
  box-sizing: border-box;
  width: min(1100px, calc(100% - 2 * var(--sp-6)));
  height: calc(100% - 2 * var(--sp-6));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--messing);
  border-radius: var(--r-lg);
  background: var(--papier-licht);
  color: var(--inkt);
  box-shadow: var(--schaduw-modal);
}

/* Alleen open: een gesloten dialog blijft display: none (browserstijl). */
.tekening-dialoog[open] {
  display: flex;
  flex-direction: column;
}

.tekening-dialoog::backdrop {
  background: color-mix(in srgb, var(--vlak-donker, black) 60%, transparent);
}

.tekening-kop,
.tekening-balk {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}

.tekening-kop {
  border-bottom: 1px solid var(--lijn-zacht);
}

.tekening-titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-h4);
}

.tekening-dialoog .btn {
  min-height: var(--control-h);
}

.tekening-dialoog .tekening-zoom {
  min-width: var(--control-h);
  font-size: var(--fs-h4);
}

.tekening-vlak {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3);
  background: var(--papier-dof);
}

.tekening-vlak:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Ingezoomd is het canvas breder dan het vlak en scrolt het vlak; site.css zet canvas op max-width: 100%. */
.tekening-blad {
  display: block;
  max-width: none;
  margin: 0 auto;
  box-shadow: var(--schaduw-kaart);
}

.tekening-melding {
  margin: var(--sp-8) auto;
  max-width: 32em;
  text-align: center;
  color: var(--tekst-2);
}

.tekening-balk {
  justify-content: center;
  border-top: 1px solid var(--lijn-zacht);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}

.tekening-teller {
  min-width: 8.5em;
  text-align: center;
  font-size: var(--fs-mini);
  color: var(--tekst-2);
  font-variant-numeric: tabular-nums;
}

/* Telefoon: het hele scherm, zonder rand. */
@media (max-width: 640px) {
  .tekening-dialoog {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .tekening-kop {
    padding-top: max(var(--sp-3), env(safe-area-inset-top));
  }

  .tekening-vlak {
    padding: var(--sp-2);
  }
}

/* Geen afdruk van de tekening via de printfunctie van de browser. */
@media print {
  .tekening-dialoog[open] {
    display: none;
  }
}