/*
  Invoervelden op een aanraakscherm.

  ## Het probleem

  Je tikt op een veld en het scherm springt ingezoomd. Daarna staat de halve pagina buiten
  beeld en moet je eerst met twee vingers terugknijpen voordat je verder kunt. In een crisis
  is dat precies het verkeerde moment om met je scherm te moeten vechten.

  ## Waarom het gebeurt

  Safari op iOS zoomt in zodra een invoerveld de focus krijgt en dat veld kleiner dan 16
  pixels rendert. Apple doet dat expres: tekst onder 16 pixels wordt te klein geacht om te
  lezen, dus zoomt het toestel er als toegankelijkheidsmaatregel naartoe. Het zoomt alleen
  niet terug.

  Onze velden stonden overal op 13,5 of 14 pixels. In de gedeelde stijl, in module.css, in de
  eigen stijlblokken van beheer, contacten, crisis en partner, en in een stuk of vijftien
  losse style-attributen op keuzelijsten in tabellen. Elk van die velden liet het scherm
  springen.

  ## Waarom niet de makkelijke weg

  De veelgebruikte "oplossing" is de viewport dichtzetten met `user-scalable=no` of
  `maximum-scale=1`. Dat doen we bewust niet, om twee redenen. Het breekt WCAG 2.2 succescriterium
  1.4.4, dat voorschrijft dat iemand tot 200 procent moet kunnen vergroten, en dat is nu juist
  voor onze gebruikers geen theorie: wie onder druk staat of ouder is knijpt wel degelijk in.
  En sinds iOS 10 negeert Safari die instelling toch. Je levert toegankelijkheid in en krijgt
  er niets voor terug.

  ## Wat we dan wel doen

  Op aanraakschermen krijgt elk veld waar je tekst in typt minstens 16 pixels. Dat is de
  drempel waaronder iOS ingrijpt, en het is los daarvan gewoon beter leesbaar op een klein
  scherm. Op een muisapparaat verandert er niets: daar blijven de compactere maten staan,
  want daar is dichtheid nuttig en zoomt niets.

  `!important` staat er omdat het anders niet werkt. Een flink deel van de maten staat in een
  style-attribuut op het element zelf, en een gewone regel uit een stijlblad verliest het
  daarvan. Dit is een van de weinige plekken waar dat het juiste gereedschap is: de regel is
  smal, hij geldt alleen op aanraakschermen, en hij hoort alles te overrulen.

  Knoppen, selectievakjes, keuzerondjes en schuifregelaars staan er bewust buiten. Die krijgen
  geen tekstcursor en veroorzaken dus geen zoom, en hun maat doet wel iets met de opmaak.
*/

@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}


/*
  Een keuzelijst wordt zo breed als zijn langste optie.

  Op de crisiswerkplek stond "Uitbraak infectieziekte (met GGD)" in een lijst, en die
  duwde de hele pagina 17 pixels breder dan het scherm. Zijwaarts schuiven is het soort
  ding dat niemand meldt en iedereen onrustig maakt. Geldt overal, niet alleen op
  aanraakschermen, want ook een smal browservenster heeft er last van.
*/
select, input, textarea { max-width: 100%; }