/* ============================================================
   Soluna Agenda — de iPad

   Laura heeft een iPad Pro 13" (1032 × 1376 staand, 1376 × 1032 liggend) en
   wil de app daar net zo graag gebruiken als op haar telefoon: op het
   beginscherm en in Safari, staand en liggend. Tot 10 oktober 2026 kreeg ze
   daar de telefoonkolom van 460 pixels, met aan weerszijden een halve meter
   lege nacht.

   ── Waarom een eigen bestand ───────────────────────────────────────────

   Elke regel hier staat binnen één voorwaarde: een scherm van minstens 744
   breed (de iPad mini staand, de smalste iPad) én minstens 600 hoog. Zo is in
   één oogopslag te zien dat de telefoon er niets van merkt: niets in dit
   bestand geldt onder 744, en de andere stylesheets zijn voor de telefoon
   niet aangeraakt. `tests-node/ipad.test.js` bewaakt dat.

   De hoogte staat erbij voor de telefoon die je kantelt: een iPhone liggend
   is 844 tot 932 breed, maar hooguit 430 hoog. Die hoort de telefoonmaten te
   houden, en niet ineens grotere letters op een scherm dat al laag is.

   Dit bestand wordt niet uitgerold vanuit de volledige Soluna-app: de schermen
   die hier breder worden, bestaan daar niet.

   ── Wat er verandert, en wat bewust niet ───────────────────────────────

   Eén rustige leeskolom van 760 pixels, in het midden, staand en liggend.
   Een regel tekst over de volle 1376 pixels leest niet, en een lijst lessen
   met de datum links en de titel een meter verderop ook niet. Alleen de
   Studio wordt liggend breder, omdat daar twee dingen naast elkaar staan die
   je naast elkaar wíl zien: de lesplanner en je klanten.
   ============================================================ */

@media (min-width: 744px) and (min-height: 600px) {
  :root {
    --app-max: 760px;
    /* Liggend valt de afronding van het scherm en soms de camera links of
       rechts; `--safe-left` en `--safe-right` zijn daar niet nul. De marge
       neemt dan de grootste van de twee, zodat er niets onder verdwijnt. */
    --gutter: max(40px, var(--safe-left), var(--safe-right));

    /* Eén stap groter, en meegroeiend met de breedte. Op een iPad houd je
       het scherm verder van je af dan een telefoon, en dezelfde 15,5 pixels
       lezen daar kleiner. De ondergrens is de maat van 744 breed (de iPad
       mini); liggend op de 13 inch komt er nog iets bij, maar nooit zoveel dat
       een kop over twee regels gaat waar hij er op de telefoon één had. */
    --fs-display-xl: clamp(48px, 2.4vw + 24px, 58px);
    --fs-display-lg: clamp(38px, 1.8vw + 20px, 46px);
    --fs-display-md: clamp(30px, 1.2vw + 18px, 35px);
    --fs-display-sm: clamp(24px, 0.8vw + 16px, 28px);
    --fs-body-lg: clamp(18.5px, 0.3vw + 15.5px, 20px);
    --fs-body: clamp(17px, 0.3vw + 14px, 18.5px);
    --fs-sm: clamp(15.5px, 0.25vw + 13px, 16.5px);
    --fs-xs: clamp(13.5px, 0.15vw + 12px, 14px);
    --fs-micro: 12px;

    /* De breedte van een formulier: een veld van 760 pixels breed is een
       streep, geen invulvak, en de knop eronder wordt een balk. 480 is de
       breedte waarop een e-mailadres en een wachtwoord nog als één ding lezen. */
    --kolom-smal: 480px;
    /* Tekst om te lezen (privacy, voorwaarden): iets breder dan een
       formulier, nog ruim onder de 75 tekens per regel. */
    --kolom-lezen: 620px;
  }

  /* De schaduw langs de kolom (base.css, vanaf 620 breed) is voor een
     telefoonkolom op een bureaublad: daar wil je zien waar de app ophoudt.
     Op een iPad is de nacht het hele scherm, en een schaduwrand in het
     midden maakt er weer een smalle strook van. */
  .app-shell { box-shadow: none; }

  /* ---------- De nacht van rand tot rand ----------

     Tot 10 oktober 2026 was de omhulling zelf 760 breed. De sterren en de
     gloed liggen vast over het hele scherm (almanak.css), maar de maan hangt
     aan de rechterbovenhoek van het scherm, en dat was de hoek van de kolom:
     staand zat hij een hand naast de gloed, liggend dertig centimeter. En
     bij een smal formulier hing hij midden boven de invulvelden.

     Nu loopt elk scherm van rand tot rand, zoals het welkomstscherm al deed,
     en is de kolom een binnenmarge: wat links en rechts van de 760 overblijft,
     plus de gewone gutter. De inhoud staat precies waar hij stond; alleen de
     maan gaat naar de hoek waar zijn licht vandaan komt.

     `100%` in een marge is de breedte van de omhulling, en dat is hier het
     scherm. De Studio maakt `--app-max` liggend groter
     (onderaan), en dan volgt deze rekensom vanzelf. */
  .app-shell { max-width: none; }

  .screen--night.gutter {
    padding-inline: max(var(--gutter), calc((100% - var(--app-max)) / 2 + var(--gutter)));
  }
  /* De les heeft geen gutter op het scherm zelf: daar lopen de foto en de
     stroken tot de rand van de kolom, en zetten de delen hun eigen marge. */
  .screen--night:not(.gutter) {
    padding-inline: max(0px, calc((100% - var(--app-max)) / 2));
  }

  /* Een lang scherm (de agenda, een les, het profiel, de Studio) begint nog
     steeds bovenaan, maar niet tegen de rand: op 1376 hoog is de 0 tot 20
     pixels van de telefoon een kop die aan het glas plakt. Meegroeiend met
     de hoogte, zodat liggend niet de helft van het scherm lucht is. */
  .screen--night:not(.screen--smal):not(.foutscherm) {
    padding-top: calc(var(--safe-top) + clamp(var(--sp-5), 3.5vh, var(--sp-10)));
  }

  /* ---------- De maan in dezelfde verhouding als op de telefoon ----------

     Op een telefoon van 390 breed is de maan (met zijn halo) 210 pixels:
     54 procent van de breedte, met de schijf zelf op 79 pixels, een vijfde
     van het scherm. Hij hangt 55 pixels boven en 18 pixels rechts buiten
     beeld, dat is 26 en 9 procent van zijn eigen maat. Laura vond dat precies
     goed. Op de iPad stond hij op een vaste 260, en dat is op 1032 breed een
     kwart: een maantje.

     Nu dezelfde 54 procent, van de kortste zijde (`vmin`): staand is dat de
     breedte, net als op de telefoon, en liggend wordt hij niet ineens 740
     pixels omdat het scherm breder is dan hoog. Op een iPad Pro 13" is hij
     zo staand en liggend 556 pixels. De bovengrens van 560 is voor een
     groter scherm; de ondergrens van 260 is de maat van hiervoor, voor de
     iPad mini. De afstand tot de rand rekent mee met de maat, zodat de maan
     even ver buiten beeld hangt als op de telefoon. De halo zit in de
     tekening zelf en groeit vanzelf mee; de gloed over de lucht (almanak.css)
     staat al in procenten van het scherm. */
  .nightsky-moon,
  .nightsky__moon {
    --maan: clamp(260px, 53.85vmin, 560px);
    width: var(--maan);
    height: var(--maan);
  }
  .nightsky__moon {
    top: calc(var(--maan) * -0.262);
    right: calc(var(--maan) * -0.0857);
  }

  /* ---------- Korte schermen in het midden ----------

     Inloggen, een account maken, het wachtwoord herstellen, koppelen,
     afzeggen, een bericht sturen, de pagina die niet bestaat en het
     foutscherm. Op een telefoon vullen ze het scherm ongeveer; op een iPad
     stonden ze tegen de bovenrand met een meter lege nacht eronder.

     Twee lege vakken boven en onder de inhoud verdelen de ruimte die over is.
     Geen `justify-content: center`: wordt de inhoud hoger dan het scherm
     (de privacyverklaring, of een formulier met het toetsenbord open), dan
     schuift die de bovenkant onbereikbaar buiten beeld. Deze vakken krimpen
     dan gewoon naar nul, en het scherm begint weer bovenaan.

     Het onderste vak is iets groter dan het bovenste: wiskundig in het midden
     oogt op een staand scherm te laag. */
  .screen--smal,
  .foutscherm {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-top: calc(var(--safe-top) + var(--sp-8));
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sp-8));
  }
  .screen--smal::before,
  .screen--smal::after,
  .foutscherm::before,
  .foutscherm::after { content: ""; flex: 1 1 0; }
  .screen--smal::after,
  .foutscherm::after { flex-grow: 1.3; }

  /* `screen--smal` was 34rem breed en in het midden; nu loopt het scherm van
     rand tot rand (zie boven) en is de kolom de binnenmarge. */
  .screen--smal { max-width: none; margin-inline: 0; }
  .screen--smal.gutter,
  .foutscherm.gutter {
    padding-inline: max(var(--gutter), calc((100% - var(--kolom-smal)) / 2));
  }
  /* Privacy en voorwaarden zijn om te lezen, niet om in te vullen. Ze
     herken je aan de datum van bijwerken (components/tekstpagina.js). */
  .screen--smal.gutter:has(.tekstpagina__datum) {
    padding-inline: max(var(--gutter), calc((100% - var(--kolom-lezen)) / 2));
  }

  /* Op de telefoon duwt 'Eerst de agenda bekijken' zich naar de onderrand.
     Hier hoort hij bij het formulier: anders staat hij alleen onderin, een
     halve meter onder de knop waar hij bij hoort. */
  .login__voet { margin-top: var(--sp-6); }
  .login__head { padding-top: 0; }

  /* De lucht van het welkomstscherm liep al van rand tot rand; de maan, de
     naam en de knoppen staan in het midden. */

  /* ---------- De balken onderin ----------

     Op de telefoon lopen de tabbalk en de reserveerbalk van rand tot rand.
     Hier zouden ze 1376 pixels breed worden onder een kolom van 760: een
     haarlijn die ver buiten de inhoud doorloopt, en tabs die verloren in
     het midden staan. Ze krijgen de breedte van de kolom, en staan erónder.

     Links en rechts nul met een automatische marge centreert een vast
     element zonder `transform`, en die gebruikt de animatie van het blad al. */
  .tabbalk,
  .action-bar {
    max-width: var(--app-max);
    margin-inline: auto;
  }

  /* De tabs mogen hier ademen: met vier woorden was de ruimte op de telefoon
     al krap gemaakt (zie agenda.css). Op deze breedte is dat niet nodig. */
  .tabbalk:has(.tab:nth-child(4)) { gap: var(--sp-2); }
  .tabbalk:has(.tab:nth-child(4)) .tab {
    padding-inline: var(--sp-4);
    font-size: var(--fs-sm);
  }

  /* ---------- Bladen ----------

     Een blad over de hele breedte van een iPad is een scherm, geen blad: de
     knop staat dan een halve meter van de tekst. Een paneel van 600 pixels
     onderin, in het midden, met alle hoeken rond zodat het zichtbaar óp de
     pagina ligt en niet de pagina ís.

     Het blijft onderin hangen, zoals op de telefoon. Zo werken het omlaag
     vegen en het meeschuiven met het toetsenbord (core/blad.js) hier precies
     hetzelfde, zonder tweede uitzondering. */
  .sheet {
    max-width: 600px;
    margin-bottom: var(--sp-6);
    border-radius: var(--r-2xl);
    /* De thuisbalk ligt nu onder het blad, niet erin. */
    padding-bottom: 0;
  }
  .sheet-backdrop:not(.is-toetsenbord) {
    padding-bottom: var(--safe-bottom);
  }
  /* Met het toetsenbord open is elke pixel nodig; dan sluit het blad weer
     aan op de onderrand, net als op de telefoon. */
  .sheet-backdrop.is-toetsenbord .sheet { margin-bottom: 0; }

  /* De vraag om meldingen: dezelfde glazen kaart als op de telefoon, in het
     midden onderin en niet breder dan een vraag hoeft te zijn. */
  .sheet-backdrop:has(> .sheet--meldingen) {
    padding: 0 var(--gutter) calc(var(--safe-bottom) + 44px + 2 * var(--sp-2) + var(--sp-3));
  }
  .sheet--meldingen {
    max-width: 480px;
    margin-bottom: 0;
  }
  /* Het beginscherm-blad in hetzelfde glas, net zo in het midden onderin. */
  .sheet-backdrop:has(> .sheet--glas) {
    padding: 0 var(--gutter) calc(var(--safe-bottom) + 44px + 2 * var(--sp-2) + var(--sp-3));
  }
  .sheet--glas {
    max-width: 480px;
    margin-bottom: 0;
  }

  /* Een les in stappen (screens/beheer.js) is werk waar Laura even voor
     gaat zitten, geen blad dat je wegveegt: een paneel in het midden, met
     een vaste hoogte zodat Volgende bij elke stap op dezelfde plek staat.
     Met het toetsenbord open geldt weer de gewone regel hierboven en sluit
     hij aan op de onderrand; daar rekent core/blad.js op. */
  .sheet-backdrop:not(.is-toetsenbord):has(> .sheet--stappen) {
    align-items: center;
    padding: var(--safe-top) var(--gutter) var(--safe-bottom);
  }
  .sheet--stappen {
    height: min(780px, 84dvh);
    margin-bottom: 0;
    border: 1px solid var(--hairline);
    box-shadow: var(--sh-lg);
  }
  .sheet--stappen .sheet__grip { display: none; }
  .sheet--stappen .sheet__head { padding-top: var(--sp-5); }

  /* ---------- Het welkomstscherm ----------

     De maan was op een telefoon maximaal 300 pixels: op een iPad van 1376
     hoog een knikker. Hier neemt hij zijn maat van de hoogte, en de rij van
     de maan mag nog steeds krimpen (`minmax(0, 1fr)` in welcome.css): staand
     en liggend, ook op de iPad mini liggend (744 hoog), past alles op één
     scherm. */
  .welcome__moon-wrap { height: min(42vh, 460px); }
  .welcome__wordmark { font-size: 34px; }
  .welcome__line { font-size: 24px; }
  .welcome__actions { max-width: 400px; }

  /* ---------- De Studio ----------

     Zes getallen in drie kolommen in plaats van twee: twee rijen die je in
     één blik leest, in plaats van drie die onder de vouw doorlopen. */
  .cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* De zeven dagen van de week krijgen de ruimte; op de telefoon waren de
     cijfers klein omdat de hokjes smal waren, niet omdat ze klein moesten. */
  .weekdag__nummer { font-size: 20px; }

  /* De maand in de lesplanner: vierkante hokjes van 95 pixels maken een
     kalender van zes rijen hoger dan een liggende iPad, en dan staat de knop
     eronder buiten beeld. Iets lager dan breed, en elk hokje blijft ruim
     boven de 44 pixels die een vinger nodig heeft. */
  .kalender__dag,
  .kalender__leeg { aspect-ratio: 4 / 3; }

  /* 'Hele maand' naast een kop was met de grotere letter 33 pixels hoog. Op
     een iPad tik je met een vinger, niet met een muis. */
  .section__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* De vier tegels van de Studio naast elkaar: twee bij twee is op een
     kolom van 760 pixels vier balken van 370, en dat is geen tegel meer. */
  .tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Liggend: de lesplanner en de klanten naast elkaar ─────────────────

   Vanaf 1100 breed (de iPad mini liggend is 1133) is er ruimte voor twee
   kolommen van elk ruim 450. Alleen de Studio doet dat: de kop, de tegels,
   wat aandacht vraagt en de week lopen over de hele breedte, daaronder staat
   de lesplanner links en de klanten rechts, en je account weer over alles.
   Zo hoef je liggend niet langs de hele lesplanner om bij je klanten te
   komen. De andere schermen houden hun leeskolom van 760. */
@media (min-width: 1100px) and (min-height: 600px) {
  .app-shell:has(.studio) { --app-max: 1040px; }

  .studio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-10);
    align-items: start;
  }
  .studio > * { grid-column: 1 / -1; }
  .studio > .studio__planner { grid-column: 1; }
  .studio > .studio__klanten { grid-column: 2; }
}

/* ── De statusbalk op het beginscherm van een iPad ─────────────────────

   agenda.css zet op iOS op het beginscherm een ondergrens van 44 pixels onder
   `--safe-top`, omdat iOS de echte waarde bij het opstarten soms als nul
   doorgeeft. 44 is de statusbalk van een iPhone met inkeping. Die van een
   iPad is 24, en met 44 kwam elke kop er twintig pixels te laag te staan.
   Zelfde voorwaarden, andere ondergrens. */
@media (display-mode: standalone) and (min-width: 744px) and (min-height: 600px) {
  @supports (-webkit-touch-callout: none) {
    :root { --safe-top: max(env(safe-area-inset-top, 0px), 24px); }
  }
}

/* ── De regels van YIN, met Reserveer en de i ──────────────────────────

   Op de iPad past alles op één regel, en is er ruimte voor wat lucht: een
   hogere regel en een knop die niet zo krap om zijn woord zit. */
@media (min-width: 744px) and (min-height: 600px) {
  .dagregel { padding-block: var(--sp-4); column-gap: var(--sp-4); }
  .dagregel__knop.btn { padding: 0 var(--sp-5); }
  .dagregel__acties { gap: var(--sp-2); }
}