/* Ronde 6: de tracker op een iPad (11 inch: 820 x 1180 staand, 1180 x 820 liggend). Onder 700 px blijft alles zoals
   op de gsm. Drie versies, gekozen met html[data-tablet]:
   a6 De gsm-app, breder: dezelfde opbouw met de tabbalk onderaan; lijsten en tegels gebruiken de breedte.
   b6 Een iPad-app: staand de tabbalk bovenaan in de kop, liggend een zijbalk; wat je dag oplevert staat rechts naast het werk.
   c6 De werkplek met lijst en detail (webversie C1), gemaakt voor de vinger; staand komt het detail boven de lijst.
   Kleuren komen uit stijl.css (A4); hier enkel opbouw en maten. */

@media (min-width: 700px) {
  /* Alle versies: geen gsm meer in het midden van het scherm. */
  [data-tablet] .toestel { max-width: none; border-inline: 0; }
  [data-tablet] .kop { padding-inline: max(var(--s6), env(safe-area-inset-left, 0px)) max(var(--s6), env(safe-area-inset-right, 0px)); }
  [data-tablet] .demo-staten { justify-content: center; }
  /* Een blad staat op een iPad als venster in het midden, niet over de volle breedte. */
  [data-tablet] .blad { top: 50%; bottom: auto; transform: translate(-50%, -50%); max-width: 560px; border-radius: 18px; max-block-size: 82vh; padding-bottom: var(--s6); }
  [data-tablet] .open .blad { animation: venster 300ms var(--uit); }
  [data-tablet] .greep { display: none; }
  @keyframes venster { from { opacity: 0; scale: .96; } }
  [data-tablet] .toast { max-inline-size: 480px; }

  /* ---------- a6: de gsm-app, breder ---------- */
  [data-tablet="a6"] .inhoud { inline-size: 100%; max-inline-size: 1040px; margin-inline: auto; padding-inline: var(--s8); }
  [data-tablet="a6"] .navbalk, [data-tablet="a6"] .onder, [data-tablet="a6"] .vast { max-width: none; }
  [data-tablet="a6"] .navbalk { grid-template-columns: repeat(5, minmax(0, 150px)); justify-content: center; }
  [data-tablet="a6"] .navbalk a { flex-direction: row; gap: var(--s2); font-size: .8125rem; }
  [data-tablet="a6"] .navbalk svg { inline-size: 24px; block-size: 24px; }
  [data-tablet="a6"] .onder { padding-inline: max(var(--s8), calc((100% - 1040px) / 2 + var(--s8))); }
  [data-tablet="a6"] .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  [data-tablet="a6"] .lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-tablet="a6"] .podium { max-inline-size: 560px; margin-inline: auto; inline-size: 100%; }
  [data-tablet="a6"] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-tablet="a6"] .gelukt .feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-tablet="a6"] .gelukt .feit.breed { grid-column: auto; }
  [data-tablet="a6"] .lijst-kaart { columns: 2; column-gap: var(--s4); }
  [data-tablet="a6"] .lijst-kaart li { break-inside: avoid; }

  /* ---------- b6: een iPad-app ---------- */
  /* Staand: de tabbalk staat bovenaan in de kop, zoals in iPadOS. */
  [data-tablet="b6"] .kop { grid-template-columns: auto minmax(0, 1fr) auto; min-block-size: 64px; }
  [data-tablet="b6"] .kop .titel { display: none; }
  [data-tablet="b6"] .kop .navbalk { position: static; transform: none; inline-size: auto; max-width: none; justify-self: center; display: flex; gap: 2px;
    padding: 4px; border: 0; border-radius: var(--r-pil); background: rgba(255, 255, 255, .1); }
  [data-tablet="b6"] .kop .navbalk a { flex-direction: row; gap: 6px; min-block-size: 44px; padding: 0 var(--s4); border-radius: var(--r-pil); font-size: .875rem; color: var(--kop-tekst); }
  [data-tablet="b6"] .kop .navbalk a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: var(--nav-actief); }
  [data-tablet="b6"] .kop .navbalk svg { inline-size: 22px; block-size: 22px; }
  [data-tablet="b6"] .kop .navbalk a > span { overflow: visible; }
  [data-tablet="b6"] .inhoud { inline-size: 100%; max-inline-size: 1180px; margin-inline: auto; padding-inline: var(--s6); padding-bottom: var(--s8);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: var(--s6); align-items: start; align-content: start; }
  [data-tablet="b6"] .inhoud > * { grid-column: 1; }
  [data-tablet="b6"] .inhoud > .paneel { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: calc(64px + var(--s4)); display: flex; flex-direction: column; gap: var(--s4); }
  [data-tablet="b6"] .paneel .onder { position: static; transform: none; inline-size: auto; max-width: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
    padding: var(--s4); flex-direction: column; align-items: stretch; box-shadow: var(--kaart-schaduw, none); }
  [data-tablet="b6"] .paneel .onder .knoppen { margin-left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  [data-tablet="b6"] .paneel .onder .knop { inline-size: 100%; }
  [data-tablet="b6"] .paneel .gelukt .feiten { grid-template-columns: minmax(0, 1fr); }
  [data-tablet="b6"] .paneel #deel { inline-size: 100%; }
  [data-tablet="b6"] .tegels { grid-template-columns: minmax(0, 1fr); }
  [data-tablet="b6"] .lijst { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-tablet="b6"] .zijbalk { display: none; }
  [data-tablet="b6"] .toast { bottom: var(--s6); }

  /* ---------- c6: de werkplek, voor de vinger ---------- */
  [data-tablet="c6"] .plusmin button, [data-tablet="c6"] .plusmin.klein button { inline-size: 44px; block-size: 44px; }
  [data-tablet="c6"] .chip, [data-tablet="c6"] .knop.klein, [data-tablet="c6"] .klik-naam, [data-tablet="c6"] .knop-tekst { min-block-size: 44px; }
  [data-tablet="c6"] .klik-naam { display: inline-flex; align-items: center; }
  [data-tablet="c6"] .c-rail a:not(.c-logo) { min-block-size: 56px; justify-content: center; }
  [data-tablet="c6"] .c-rij { min-block-size: 60px; }
  [data-tablet] .demo-staten a { min-block-size: 44px; }
}

/* Liggend (en groter) */
@media (min-width: 1024px) {
  [data-tablet="a6"] .tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* b6: een zijbalk links, zoals een iPad-app liggend; de tabbalk verdwijnt. */
  [data-tablet="b6"] .zijbalk { display: flex; flex-direction: column; gap: 2px; position: fixed; inset: 0 auto 0 0; inline-size: 248px; z-index: 7;
    padding: calc(var(--s4) + env(safe-area-inset-top, 0px)) var(--s3) var(--s4) max(var(--s3), env(safe-area-inset-left, 0px)); background: var(--nav-bg); color: var(--nav-tekst); overflow-y: auto; }
  [data-tablet="b6"] .zijbalk .logo-link { padding: 0 var(--s3); margin-bottom: var(--s4); }
  [data-tablet="b6"] .zijbalk .logo { background: #fff; }
  [data-tablet="b6"] .zijbalk h2 { font: 650 var(--t-xs)/1.2 var(--f-tekst); letter-spacing: .04em; text-transform: uppercase; color: var(--nav-tekst); margin: var(--s4) var(--s3) var(--s1); }
  [data-tablet="b6"] .zijbalk a:not(.logo-link) { display: flex; align-items: center; gap: var(--s3); min-block-size: 48px; padding: 0 var(--s3); border-radius: var(--radius-sm); color: var(--nav-tekst); text-decoration: none; font-weight: 600; }
  [data-tablet="b6"] .zijbalk a svg { inline-size: 24px; block-size: 24px; flex: none; }
  [data-tablet="b6"] .zijbalk a .vol { display: none; }
  [data-tablet="b6"] .zijbalk a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: var(--nav-actief); }
  [data-tablet="b6"] .zijbalk a[aria-current="page"] .lijn { display: none; }
  [data-tablet="b6"] .zijbalk a[aria-current="page"] .vol { display: inline; }
  [data-tablet="b6"] .zijbalk :focus-visible { outline-color: var(--focus-merk); }
  [data-tablet="b6"] .toestel { padding-left: 248px; }
  [data-tablet="b6"] .kop .navbalk, [data-tablet="b6"] .kop .logo-link { display: none; }
  [data-tablet="b6"] .kop .titel { display: block; opacity: 1; translate: 0 0; justify-self: start; grid-column: 1 / 3; }
  [data-tablet="b6"] .kop .links:empty, [data-tablet="b6"] .kop .links:has(.logo-link) { display: none; }
  [data-tablet="b6"] .demo, [data-tablet="b6"] .demo-staten { margin-left: 0; }
  [data-tablet="b6"] .inhoud { grid-template-columns: minmax(0, 1fr) 340px; }

  /* c6 liggend: zoals de webversie, met de vingermaten van hierboven. */
}

/* c6 staand: geen ruimte voor lijst en detail naast elkaar; het detail komt eerst, de lijst eronder. */
@media (min-width: 700px) and (max-width: 1023px) {
  [data-tablet="c6"] .c-panes, [data-tablet="c6"] .c-panes.breed-links { grid-template-columns: minmax(0, 1fr); }
  [data-tablet="c6"] .c-detail { order: 1; border-left: 0; padding-bottom: var(--s4); }
  [data-tablet="c6"] .c-lijst { order: 2; position: static; max-block-size: none; border-top: 1px solid var(--border); padding-top: var(--s5); }
  [data-tablet="c6"] .c-kop .rechts > .sub { display: none; }
  [data-tablet="c6"] .c-app { grid-template-columns: 80px minmax(0, 1fr); }
}
/* c6 staand: bij Ranking, Incentives, Hall of Fame en Instellingen is de lijst zelf de hoofdzaak; die komt dan eerst. */
@media (min-width: 700px) and (max-width: 1023px) {
  [data-tablet="c6"] [data-scherm="ranking"] .c-lijst, [data-tablet="c6"] [data-scherm="incentives"] .c-lijst,
  [data-tablet="c6"] [data-scherm="hof"] .c-lijst, [data-tablet="c6"] [data-scherm="instellingen"] .c-lijst { order: 0; border-top: 0; border-bottom: 1px solid var(--border); }
}