/* Kijken en klikken op een tablet.
 *
 * SemanticXL is gebouwd voor een muis en een breed scherm. Dat blijft zo voor
 * modelleren, maar meekijken gebeurt vaak op een iPad: in een overleg, bij een
 * klant, op de bank. Dit bestand haalt de scherpste randjes daarvan weg zonder
 * de bureaubladweergave aan te raken.
 *
 * Drie dingen die op iOS anders zijn dan de meeste ontwerpen aannemen:
 *
 * 1. `100vh` is niet de zichtbare hoogte. Safari rekent de adresbalk mee, dus
 *    de onderste regel valt weg en er komen dubbele scrollbalken. `100dvh`
 *    (dynamic viewport height) is wél wat je ziet; oudere browsers negeren het
 *    en houden de vh-regel die eraan voorafgaat.
 * 2. Er is geen hover. Alles wat pas bij hover verschijnt, bestaat op een
 *    tablet niet. Die dingen zetten we hier altijd aan.
 * 3. Een vinger is geen muisaanwijzer. Apple houdt 44 bij 44 punten aan als
 *    ondergrens; knopjes van 24 pixels zijn mikwerk.
 *
 * Laden na de pagina-eigen stijl:
 *   <link rel="stylesheet" href="/static/components/tablet.css">
 */

/* ── 1. Schermvullende hoogtes ──────────────────────────────────────────── */

@supports (height: 100dvh) {
  .cols,
  #veld,
  .wrap-vol,
  .vol-hoog {
    height: 100dvh;
  }
  /* De bibliotheek en het brein trekken hun eigen hoogte van de kop af; die
     rekensom blijft kloppen, alleen de eenheid verandert. */
  .cols {
    height: calc(100dvh - 53px);
  }
}

/* ── 2. Geen hover: toon wat anders verborgen blijft ────────────────────── */

@media (hover: none) {
  .mod-acts {
    opacity: 1;
  }
  /* Kaarten die bij hover omhoog komen: die beweging is op touch alleen
     verwarrend, want hij blijft hangen na een tik. */
  .mod-card:hover {
    transform: none;
  }
}

/* ── 3. Tikdoelen ───────────────────────────────────────────────────────── */

@media (pointer: coarse) {
  .mod-acts button,
  .lb-bar button,
  .zoombtn,
  .facets .chip,
  #lenzen .lens,
  #werkruimtes .ws {
    min-width: 44px;
    min-height: 44px;
  }
  /* Chips en lenzen zijn tekstlabels; die hoeven niet vierkant te worden, maar
     wel hoog genoeg om te raken. */
  .facets .chip,
  #lenzen .lens {
    min-width: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Een lijstregel waar je op tikt mag niet zo dun zijn dat je de buurman
     raakt. */
  .hit,
  .bel-paneel .sig,
  #paneel .lijn,
  .sxl-ing-kaart {
    min-height: 44px;
  }
}

/* ── 4. Stapelen in plaats van knijpen ──────────────────────────────────── */

/* Onder de 900 px is een zijkolom van 330 px plus inhoud geen twee kolommen
   meer maar twee kokers. Dan liever onder elkaar: eerst zoeken, dan lezen. */
@media (max-width: 900px) {
  .cols {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 34vh) 1fr;
    height: auto;
    min-height: calc(100vh - 53px);
  }
  @supports (height: 100dvh) {
    .cols {
      min-height: calc(100dvh - 53px);
    }
  }
  .searchcol {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  /* Het zijpaneel van het brein neemt het hele scherm; half over de plaat is
     op een tablet onleesbaar. */
  #paneel {
    width: 100%;
  }
  /* Koppen met veel knoppen mogen afbreken in plaats van de rand uit lopen. */
  .hd {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ── 5. Tekst en tikken ─────────────────────────────────────────────────── */

@media (pointer: coarse) {
  /* iOS zoomt in op een invoerveld met een lettergrootte onder 16 px, en zoomt
     daarna niet vanzelf terug. Dat is de meest gemelde ergernis op een tablet. */
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
  /* Dubbeltikken om te zoomen kost 300 ms vertraging op elke tik; met deze
     regel weet Safari dat de pagina al schaalt zoals bedoeld. */
  a,
  button,
  .hit,
  .mod-card {
    touch-action: manipulation;
  }
}