/* touch.css — de app op een aanraakscherm. Lane CC5, M185.
 *
 * Alles hier staat achter `@media (pointer: coarse)`. Dat is bewust: de
 * desktopstand blijft pixel voor pixel wat hij was — de visuele baseline van
 * M68 legt precies die stand vast — en alleen een toestel dat met een vinger
 * bediend wordt krijgt grotere raakvlakken en grotere letters in
 * invoervelden.
 *
 * Drie regels, alle drie uit de mobiele audit (`tools/mobile_audit.py`):
 *
 * 1. **44 px raakvlak.** Apple HIG en WCAG 2.5.5 noemen allebei 44 pt als
 *    ondergrens voor een knop. De topbalk zat op 32 tot 36, de
 *    persona-knoppen van de demo op 28, en de tabbladen op 20. Een duim mist
 *    die structureel; op een muis is het geen enkel probleem, en juist
 *    daarom viel het nooit op.
 * 2. **16 px in invoervelden.** iOS Safari zoomt automatisch in zodra je een
 *    veld met een kleinere letter aantikt, en zoomt daarna niet terug. Eén
 *    veld van 14 px maakt zo het hele formulier onwerkbaar. `16px` is geen
 *    smaak maar de drempel die Safari hanteert.
 * 3. **Ruimte onder de inhoud.** De zwevende supportknop staat vast
 *    rechtsonder en bedekte op een telefoon de laatste rij van de pagina —
 *    en dat is daar vaak juist de knop.
 *
 * Vinkjes en keuzerondjes gaan naar 24 px en niet naar 44: 24 CSS-pixels is
 * de ondergrens van WCAG 2.5.8, en een vinkje van 44 px naast een regel
 * tekst is geen knop meer maar een blok. Waar het vinkje in een `<label>`
 * zit, is dat label het raakvlak en telt de hele regel.
 */

:root {
    /* Eén getal, hier gedefinieerd zodat de audit en de stijl dezelfde bron
       hebben. `--touch-control-min` is de ondergrens voor vinkjes. */
    --touch-target-min: 44px;
    --touch-control-min: 24px;
    /* Hoogte van de zwevende supportknop plus lucht eromheen. */
    --touch-floating-clearance: 88px;
}

@media (pointer: coarse) {

    /* ---- 1. Raakvlakken ---------------------------------------------- */

    /* Generiek en veilig: `min-height` doet niets bij een `display: inline`
       element, dus een link midden in een zin blijft precies wat hij is.
       Alles wat blok, flex of grid is, groeit mee. */
    a[href],
    button,
    summary,
    select,
    [role="button"] {
        min-height: var(--touch-target-min);
    }

    /* Knoppen die alleen een pictogram dragen, zijn in de breedte te klein.
       Bij deze is 44 px in beide richtingen de bedoeling. */
    .ds-icon-btn,
    .ds-topbar__hamburger,
    .ds-topbar__brand,
    .ds-topbar__userbtn,
    .ds-appearance-menu__trigger,
    [data-tour="topbar-search"],
    [data-tour="help-launch"],
    [data-tour="work-context-switcher"] {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }

    /* Deze staan in de opmaak als tekstlink of als los knopje en zijn dus
       `inline`; zonder een display-wissel doet `min-height` er niets. Ze
       worden `inline-flex` zodat de tekst gecentreerd blijft staan in plaats
       van bovenaan te plakken. */
    .ds-appearance-reset,
    .demo-bar__persona,
    .kds-filter__chip,
    .fp-btn,
    .slot-btn,
    .hr-link,
    .insight-domain,
    .tab,
    .btn,
    a.muted.small,
    .inventory-source-tabs a,
    .inventory-category-tabs a,
    [data-tour="first-run-setup-guide"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
    }

    /* De KDS-samenvouwers zijn een hele regel breed; alleen de hoogte hoeft
       omhoog, en `list-item` mag niet omvallen naar flex omdat het driehoekje
       dan verdwijnt. */
    summary {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Kleine knoppen met één teken erin (pijltjes, herladen) zijn hoog
       genoeg maar te smal. */
    .btn.btn-sm,
    .ds-btn.ds-btn--small,
    .inventory-category-tabs a,
    .inventory-source-tabs a {
        /* Dubbele klasse voor de specificiteit: verderop krijgen flexkinderen
           `min-width: 0` om een rij te laten krimpen, en dat mag deze knopjes
           niet alsnog te smal maken. */
        min-width: var(--touch-target-min);
    }

    /* Zit het vinkje in een label, dan is dat label het raakvlak — en dan
       moet dát 44 px hoog zijn, niet het vakje. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
    }

    /* Vinkjes en keuzerondjes: WCAG 2.5.8, niet 44. Zie de kop. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: var(--touch-control-min);
        min-height: var(--touch-control-min);
        width: var(--touch-control-min);
        height: var(--touch-control-min);
    }

    /* ---- 2. Invoervelden die op iOS inzoomen -------------------------- */

    /* De `:not()`-ketens staan er niet alleen om vinkjes over te slaan: ze
       tellen mee voor de specificiteit. Een kale `input`-selector (0,0,1)
       verliest van `.ds-field__input` (0,1,0), en dan doet deze regel niets
       op precies de velden waar het om gaat. Met vier `:not()`-clausules
       wint hij, zonder `!important` en zonder de tokens te omzeilen:
       `--font-body-size` blijft de bron zodra die 16 px of groter is. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select:not([size]):not([multiple]):not(:disabled):not([hidden]),
    textarea:not(:disabled):not([hidden]):not([readonly]):not([inert]) {
        font-size: max(16px, var(--font-body-size, 1rem));
    }

    /* Een knop die een invoerveld omsluit geeft zijn lettergrootte door: het
       veld erin staat met een inline `font: inherit` en is dus niet met een
       eigen regel te bereiken. De ondergrens moet daarom op de knop staan. */
    .fp-btn {
        font-size: max(16px, var(--font-body-size, 1rem));
    }

    /* ---- 3. Rijen die niet passen ------------------------------------- */

    /* Een tabbalk of filterrij van 767 px duwt de hele pagina breder dan het
       scherm; dan schuift de navigatie mee weg en lijkt hij verdwenen. Laat
       de rij zelf schuiven — dat is wat een telefoongebruiker verwacht. */
    .ds-tabs,
    .kds-filter,
    .inventory-category-tabs,
    .inventory-source-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Een formulier of kopregel die op één regel is bedoeld, breekt op een
       telefoon af in plaats van de pagina op te rekken. */
    .form-inline,
    .fp-header,
    .fp-header-right,
    .actions-bar {
        flex-wrap: wrap;
    }

    /* Niets mag breder worden dan de ruimte die het krijgt. Dit is de
       vangnetregel: hij lost geen enkel ontwerp op, maar hij zorgt dat één
       vergeten breedte niet de hele pagina laat schuiven — en dan is de
       navigatie weg terwijl de gebruiker denkt dat de knop ontbreekt. */
    input,
    img,
    video,
    canvas,
    iframe,
    pre {
        max-width: 100%;
    }

    /* Een flex-kind mag standaard niet kleiner worden dan zijn inhoud
       (`min-width: auto`). Eén datumveld — dat in de mobiele weergave van
       Chromium veel breder uitvalt dan op desktop — rekt daardoor de hele
       rij op tot ver buiten het scherm. `min-width: 0` geeft de rij zijn
       vrijheid terug; de inhoud schuift of breekt af in plaats van de pagina
       mee te trekken. */
    .form-inline > *,
    .fp-header > *,
    .fp-header-right > *,
    .actions-bar > * {
        min-width: 0;
    }

    /* Chromium rekent een datumveld in de mobiele weergave veel breder dan
       op desktop; ongelimiteerd trekt dat de hele rij het scherm uit. Elf rem
       is ruim genoeg voor `dd-mm-jjjj` met een kalenderknop erachter. */
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"] {
        min-width: 0;
        max-width: min(100%, 11rem);
    }

    /* ---- 4. Brede tabellen -------------------------------------------- */

    /* Een tabel met acht kolommen past niet op een tablet in liggende stand,
       laat staan op een telefoon. `display: block` maakt van de tabel een
       blok dat zelf schuift; de rijen en kolommen blijven uitgelijnd omdat
       de browser er een anonieme tabelbox omheen zet. Zo schuift de tabel in
       plaats van de hele pagina — dat laatste verstopt de navigatie. */
    .table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* ---- 5. Ruimte onder de inhoud ------------------------------------ */

    /* De zwevende supportknop hangt rechtsonder over de pagina heen. Op een
       breed scherm valt dat weg in de marge; op een telefoon staat hij op de
       laatste rij, en dat is daar vaak de knop waar het om ging. */
    /* `:not([hidden])` staat er voor de specificiteit: de paginaschil zet
       de padding via een klasse, en een kale `main`-selector verliest dat
       gevecht zonder dat er iets zichtbaar misgaat. */
    /* Een paneel dat zelf schuift, valt buiten de padding van `main`: de
       laatste regel eindigt binnen het paneel en dus onder de knop. De
       zaalplattegrond heeft zo'n paneel. */
    .fp-live,
    .fp-live-sidebar {
        padding-bottom: var(--touch-floating-clearance);
    }

    .ds-layout__main,
    main:not([hidden]) {
        padding-bottom: max(
            var(--touch-floating-clearance),
            calc(var(--touch-floating-clearance) + env(safe-area-inset-bottom, 0px))
        );
    }
}