/* Ad Library Saver (public/adlib.js). Zelfde regels als style.css en ONTWERP.md: kaarten zijn inhoud (geen glas),
   kleuren zijn rollen, één hoofdknop per scherm, alles wat je aanraakt is minstens 44 px. */

#adlibBlok { margin-bottom: 8px; }
.al-tabs { margin-bottom: 20px; }
.al-aantal { margin-left: 4px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.al-aantal:empty { display: none; }
.al-kort { display: none; } /* "Bibliotheek" in plaats van "Mijn bibliotheek", alleen op een smal toestel */

/* het zoekvak: soort, veld met knop, en de filters eronder */
.al-zoek { display: grid; gap: 12px; margin-bottom: 8px; }
.al-zoek .al-regel { max-width: 720px; }
.al-zoek .tabs { justify-self: start; margin: 0; }
.al-regel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 720px; margin-bottom: 12px; }
.al-zoek .al-regel { margin-bottom: 0; }
.al-veld { flex: 1 1 260px; max-width: none; margin: 0; }
.al-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.al-filters .kies, .al-regel .kies { min-height: 44px; } /* 17 px zoals elke keuzelijst: onder 16 zoomt de iPhone in */
.al-verbruik { margin: 4px 4px 20px; }
.al-uitslagkop { margin-top: 4px; }

/* een merk kiezen: rijen zoals in Instellingen */
.al-merklijst { max-width: 720px; margin-bottom: 24px; }
/* een rij met een merk: links de knop om de ads te bekijken, rechts Volg */
.al-merkrij { --inspring: 72px; padding-block: 6px; }
.al-merkkies, .al-volgrij { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; min-height: 52px; padding: 0; border: 0; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.al-volgrij { width: 100%; padding: 12px 16px; --inspring: 72px; transition: background var(--duur); }
.al-volgrij:hover { background: var(--vulling-3); }
.al-volgrij:active { background: var(--vulling-2); }
.al-merkkies:hover strong { color: var(--accent); }
.al-merkrij .knop { flex: none; }
.al-volgt { cursor: default; }
/* Nieuw: een label op de kaart en een telling bij het merk en het tabblad */
.al-nieuwpil { flex: none; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8125rem; line-height: 1.385; font-weight: 600; font-variant-numeric: tabular-nums; }
.segment .al-nieuwpil { margin-left: 4px; padding: 1px 7px; }
.al-label-nieuw { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8125rem; line-height: 1.385; font-weight: 600; }
.al-volguitleg { margin: 0 4px 16px; max-width: 68ch; }
.al-volgkop { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.al-volgkop .sectie-kop { margin: 8px 4px 0; }
.al-volgkop .voetnoot { margin: 0 4px; }
/* bij Zoeken: van wie je volgt, met per merk aan of uit */
#alFeed { margin-bottom: 8px; }
.al-feeduitleg { margin: -4px 4px 12px; }
.al-feedmerken { margin-bottom: 16px; }
.al-feedchip { font-size: 0.9375rem; }
.al-feedchip:has(input:checked) .al-chiptal { color: rgba(255, 255, 255, 0.85); }
.al-terugfeed { margin-bottom: 16px; }
.al-uitslagbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.al-uitslagbalk .sectie-kop { margin-bottom: 0; }
.al-geverifieerd svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--accent); stroke-width: 2.6; }

/* het raster met kaarten */
.al-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.al-kaart { display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--groep); }
.al-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--vulling-3); cursor: pointer; overflow: hidden; }
.al-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.al-media:focus-visible { outline-offset: -3px; }
/* Zonder beeld (Zernio): geen leeg vlak van 4:5, alleen zo hoog als de kop nodig heeft. Geen aspect-ratio: Safari negeert die op een knop */
.al-media.al-zonder { aspect-ratio: auto; min-height: 120px; }
.al-geenbeeld { padding: 20px; color: var(--label-2); font-size: 0.9375rem; line-height: 1.333; text-align: center; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.al-speel { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; }
.al-speel svg { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 3px; }
.al-teller { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8125rem; line-height: 1.385; font-weight: 600; }
.al-info { display: grid; gap: 4px; padding: 12px 14px 4px; min-width: 0; }
.al-merk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-merk strong { font-weight: 600; font-size: 0.9375rem; line-height: 1.333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--vulling); }
.al-avatar.groot { width: 40px; height: 40px; }
.al-klein { color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; }
/* tekst in oranje of groen: gemengd met de tekstkleur, zodat het in licht donkerder en in donker lichter wordt (4,5 op 1) */
.al-gestopt { color: color-mix(in srgb, var(--oranje) 60%, var(--label)); }
.al-tekst { color: var(--label); font-size: 0.9375rem; line-height: 1.333; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.al-voet { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px 14px; }
.al-voet .knop { width: 100%; }
.al-bewaard { color: color-mix(in srgb, var(--groen) 55%, var(--label)); }
.al-bewaard svg { width: 18px; height: 18px; stroke-width: 2.6; }
.al-meer { justify-content: center; margin-top: 20px; }
.al-leeg { grid-column: 1 / -1; padding: 40px 16px; }

/* mappen in de bibliotheek: knoppen in de vorm van de chips uit beheer */
.al-mappen { margin-bottom: 4px; }
button.al-chip { border: 0; font: 500 0.8125rem/1.25 var(--sans); text-align: left; padding-block: 4px; } /* een lange mapnaam loopt netjes om */
.al-chip.actief { background: var(--accent); color: #fff; }
.al-chip.actief .al-chiptal { color: rgba(255, 255, 255, 0.8); }
.al-chiptal { color: var(--label-2); font-variant-numeric: tabular-nums; }
.al-nieuw { color: var(--accent); background: none; }
.al-opslag { margin: 10px 4px 16px; }
.al-naamveld { margin-top: 12px; }

/* het blad met één ad */
dialog.al-blad { width: calc(100% - 32px); max-width: 680px; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: 30px; background: var(--vlak); color: var(--label); overflow-y: auto; overscroll-behavior: contain; animation: menu-in 0.24s var(--veer); }
dialog.al-blad::backdrop { background: var(--waas); }
.al-blad-kop { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 20px; background: var(--vlak); }
.al-blad-kop .rij-tekst span { font-size: 0.8125rem; line-height: 1.385; }
.al-sluit { flex: none; background: var(--vulling-3); }
.al-sluit svg { width: 18px; height: 18px; stroke-width: 2.4; }
.al-blad-media { display: grid; gap: 12px; padding: 0 20px; }
.al-blad-media.meer { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.al-groot { scroll-snap-align: center; display: grid; gap: 6px; }
.al-groot img, .al-groot video { display: block; width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 18px; background: #000; }
.al-groot figcaption { font-size: 0.8125rem; line-height: 1.385; padding: 0 4px; }
.al-groot figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.al-blad-inhoud { display: grid; gap: 12px; padding: 16px 20px 24px; }
.al-volle-tekst { white-space: pre-line; overflow-wrap: anywhere; max-width: 68ch; }
.al-feiten .rij { min-height: 44px; padding-block: 10px; }
.al-feiten .rij-tekst { display: flex; justify-content: space-between; gap: 16px; }
.al-feiten .rij-tekst strong { font-weight: 400; text-align: right; overflow-wrap: anywhere; }
.al-feiten a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.al-feiten:not(:has(.rij)) { display: none; }
.al-label { display: block; margin: 8px 4px -4px; color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; font-weight: 600; }
.al-blad-inhoud .voetnoot { margin-top: -4px; }
.al-blad-knoppen { margin-top: 8px; align-items: center; }
.knop.al-bewaard { cursor: default; background: color-mix(in srgb, var(--groen) 14%, transparent); }

@media (max-width: 599px) {
  .al-tabs { max-width: 100%; }
  .al-tabs .segment { padding: 0 11px; }
  .al-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .al-kaart { border-radius: 18px; }
  .al-info { padding: 10px 10px 2px; }
  .al-tekst { -webkit-line-clamp: 2; }
  .al-voet { padding: 8px 10px 10px; }
  .al-voet .knop.klein { padding: 0 8px; }
  .al-merk strong { font-size: 0.8125rem; }
  .al-speel { width: 44px; height: 44px; }
  /* zo breed als de langste keuze, en de rij loopt door naar de volgende regel: halve breedte was te smal voor
     "Meest vertoond" en "Verenigd Koninkrijk" (bugjacht r2-3) */
  .al-filters .kies { flex: 1 1 auto; max-width: 100%; }
  .al-zoek .al-regel .knop { flex: 1 1 100%; }
  dialog.al-blad { width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 30px 30px 0 0; }
  .al-blad-media.meer { grid-auto-columns: 88%; }
  .al-blad-media { padding: 0 16px; }
  .al-blad-inhoud { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
}

/* De drie tabbladen op een smal toestel: over de hele breedte en altijd op één regel. "Mijn bibliotheek" wordt
   "Bibliotheek", het aantal nieuw staat er als getal (een schermlezer hoort "3 nieuw"), en onder 360 px valt het
   aantal bewaarde ads weg; dat staat in de bibliotheek zelf ook. */
@media (max-width: 479px) {
  .al-tabs { display: flex; width: 100%; }
  .al-tabs .segment { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
  .al-tabs .al-lang { display: none; }
  .al-tabs .al-kort { display: inline; }
  .al-pilwoord { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .al-tabs .al-aantal { display: none; }
}
/* Een merk kiezen op een smal toestel: Volg onder de naam, op één lijn met de tekst (app-bouwer les 147). Anders
   houdt een lange naam naast de knop een smalle kolom over en loopt hij over zes regels. */
@media (max-width: 479px) {
  .al-merkrij { flex-wrap: wrap; row-gap: 4px; }
  .al-merkkies { flex: 1 1 100%; }
  .al-merkrij .knop { margin-left: 54px; }
}