/*
 * My Wish List - één stylesheet, mobile-first.
 *
 * De volgorde is bewust: eerst de tekens en kleuren, dan de bouwstenen, dan de
 * schermen. Alles is opgebouwd vanaf een telefoon; de enige media query verbreedt
 * wat er op een groter scherm bij kan.
 */

:root {
    --papier: #fdfbf7;
    --papier-diep: #f4efe6;
    --inkt: #23201c;
    --inkt-zacht: #5d564d;
    --lijn: #e2dace;
    --dennen: #1f5f4a;
    --dennen-licht: #e7f2ed;
    --kaars: #b8562f;
    --kaars-licht: #fbeee7;
    --waarschuwing: #8a6d0b;
    --waarschuwing-licht: #fdf6dd;
    --fout: #9b2c2c;
    --fout-licht: #fdecec;

    --radius: 10px;
    --radius-klein: 6px;

    /* Uit de designdoorlichting van 28 augustus. Vier tokens, geen nieuwe kleuren:
       ze zijn gemaakt uit wat er al stond. */
    --elevatie: 0 1px 2px rgba(35, 32, 28, .07), 0 8px 24px rgba(35, 32, 28, .08);
    --focus-ring: 2px solid var(--kaars);
    --gereserveerd: var(--dennen-licht);
    --gereserveerd-rand: var(--dennen);
    --schaduw: 0 1px 2px rgba(35, 32, 28, .06), 0 4px 12px rgba(35, 32, 28, .05);

    --breedte: 44rem;
    --tussen: 1rem;
}

/*
 * Donker: drie gevallen, en ze staan er alle drie uit.
 *
 *  1. Je hebt niets gekozen en je toestel staat op donker.
 *  2. Je hebt donker gekozen, wat je toestel ook zegt.
 *  3. Je hebt licht gekozen terwijl je toestel op donker staat - dan mag regel 1
 *     niet gelden, vandaar de :not().
 *
 * De keuze staat in een koekje en wordt op de server in het html-element gezet.
 * Zou javascript dat doen, dan schildert de pagina eerst licht en daarna donker,
 * en dat flikkeren zie je elke keer.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
    --papier: #171614;
    --papier-diep: #201e1b;
    --inkt: #eee9e1;
    --inkt-zacht: #a89f92;
    --lijn: #35312c;
    --dennen: #6fc0a3;
    --dennen-licht: #17302a;
    --kaars: #e08a5f;
    --kaars-licht: #2c1f18;
    --waarschuwing: #d8bd63;
    --waarschuwing-licht: #2b2716;
    --fout: #e88b8b;
    --fout-licht: #2d1a1a;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .4);
    }
}

:root[data-thema="donker"] {
    --papier: #171614;
    --papier-diep: #201e1b;
    --inkt: #eee9e1;
    --inkt-zacht: #a89f92;
    --lijn: #35312c;
    --dennen: #6fc0a3;
    --dennen-licht: #17302a;
    --kaars: #e08a5f;
    --kaars-licht: #2c1f18;
    --waarschuwing: #d8bd63;
    --waarschuwing-licht: #2b2716;
    --fout: #e88b8b;
    --fout-licht: #2d1a1a;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .4);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--inkt);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

h1, h2, h3 {
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.012em;
    margin: 0 0 .5em;
}

h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--dennen);
    text-underline-offset: .18em;
}

a:hover {
    color: var(--inkt);
}

/* --- kop en voet --- */

.overslaan {
    position: absolute;
    left: -9999px;
}

.overslaan:focus {
    left: .5rem;
    top: .5rem;
    z-index: 10;
    background: var(--papier);
    padding: .5rem .75rem;
    border-radius: var(--radius-klein);
}

.kop {
    border-bottom: 1px solid var(--lijn);
    background: var(--papier);
}

.kop-binnen, .voet-binnen, .blad {
    width: 100%;
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 var(--tussen);
}

.kop-binnen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    min-height: 3.5rem;
    /* Op een telefoon van 390 passen de merknaam, de drie talen, "Aanmelden" en
       de knop niet op een regel. Dan zakt de navigatie naar een tweede regel in
       plaats van dat "My Wish List" over drie regels breekt. Vanaf 40rem staat
       alles weer naast elkaar. */
    flex-wrap: wrap;
    padding-bottom: .4rem;
}

.merk {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 650;
    color: var(--inkt);
    text-decoration: none;
    letter-spacing: -.01em;
    white-space: nowrap;
    padding: .5rem 0;
}

/* Het merkteken: een lakzegel met een W erin. Vaste kleuren, want het is een
   voorwerp en geen lijntekening: het klopt zowel op papier als op de donkere
   achtergrond, zonder tweede bestand. Zie docs/10-merk.md. */
.merk-teken {
    /* Op vraag van de opdrachtgever groter: op een telefoon was het lakzegel
       amper te herkennen naast de naam ernaast. */
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
}

.kop-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .95rem;
}

.voet {
    margin-top: auto;
    border-top: 1px solid var(--lijn);
    background: var(--papier-diep);
    font-size: .875rem;
    color: var(--inkt-zacht);
}

.voet-binnen {
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
}

.voet-binnen p {
    margin-bottom: .5rem;
}

.voet nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- blad: de inhoud van een pagina --- */

.blad {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.blad-smal {
    max-width: 26rem;
}

/* De console toont tabellen met zes kolommen. Op 44rem staat daar niets meer
   leesbaar in; hier mag het scherm gebruikt worden dat er is. */
.blad-breed {
    max-width: 80rem;
}

.leidraad {
    color: var(--inkt-zacht);
    margin-bottom: 1.5rem;
}

/* --- formulieren --- */

.veld {
    margin-bottom: 1.1rem;
}

.veld > label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .3rem;
}

.veld .hulp {
    display: block;
    font-size: .85rem;
    color: var(--inkt-zacht);
    margin-top: .3rem;
}

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=search], select, textarea {
    width: 100%;
    /* 16px voorkomt dat iOS bij het aantikken inzoomt. */
    font-size: 1rem;
    font-family: inherit;
    color: var(--inkt);
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    padding: .6rem .7rem;
    min-height: 2.75rem;
}

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--dennen);
    outline-offset: 2px;
}

.veld-fout input, .veld-fout textarea, .veld-fout select {
    border-color: var(--fout);
}

.veldfout {
    display: block;
    color: var(--fout);
    font-size: .875rem;
    margin-top: .3rem;
}

.aanvinken {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .95rem;
}

.aanvinken input {
    margin-top: .35rem;
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    accent-color: var(--dennen);
}

/* Zonder deze twee regels loopt een tekst van twee regels onder het vinkje door
   in plaats van ernaast te blijven staan. */
.aanvinken > span {
    flex: 1 1 auto;
    min-width: 0;
}

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--dennen);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    font: inherit;
    font-weight: 600;
    padding: .65rem 1.1rem;
    min-height: 2.75rem;
    text-decoration: none;
    cursor: pointer;
}

.knop:hover {
    filter: brightness(1.08);
    color: #fff;
}

.knop-breed {
    width: 100%;
}

.knop-klein {
    padding: .35rem .75rem;
    min-height: 2.1rem;
    font-size: .9rem;
}

.knop-tweede {
    background: transparent;
    color: var(--dennen);
    border-color: var(--lijn);
}

.knop-tweede:hover {
    color: var(--inkt);
    background: var(--papier-diep);
}

.knop-tekst {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--dennen);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.inline-form {
    display: inline;
}

.na-formulier {
    margin-top: 1.25rem;
    font-size: .95rem;
    color: var(--inkt-zacht);
}

/* --- meldingen --- */

.melding {
    border: 1px solid var(--lijn);
    border-left-width: 3px;
    border-radius: var(--radius-klein);
    padding: .8rem .9rem;
    margin-bottom: 1.25rem;
    font-size: .95rem;
}

.melding p:last-child {
    margin-bottom: 0;
}

.melding-fout {
    border-left-color: var(--fout);
    background: var(--fout-licht);
    color: var(--fout);
}

.melding-let-op {
    border-left-color: var(--waarschuwing);
    background: var(--waarschuwing-licht);
    color: var(--waarschuwing);
}

.melding-goed {
    border-left-color: var(--dennen);
    background: var(--dennen-licht);
    color: var(--dennen);
}

/* --- onthaalpagina --- */

.onthaal h1 {
    font-size: 1.9rem;
}

.punten {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: .9rem;
}

.punten li {
    background: var(--papier-diep);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

.punten strong {
    display: block;
    margin-bottom: .15rem;
}

.punten span {
    color: var(--inkt-zacht);
    font-size: .95rem;
}

.knoppenrij {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* --- kaarten --- */

.kaart {
    background: var(--papier-diep);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.kaart h2 {
    margin-bottom: .25rem;
}

@media (min-width: 40rem) {
    .kop-binnen {
        flex-wrap: nowrap;
        padding-bottom: 0;
    }

    h1 {
        font-size: 1.9rem;
    }

    .onthaal h1 {
        font-size: 2.4rem;
    }

    .punten {
        grid-template-columns: 1fr 1fr;
    }

    .blad {
        padding-top: 2.75rem;
    }
}

/* --- lijstjes en cadeaus (fase 2) --- */

.kop-met-knop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.kop-met-knop h1 {
    margin-bottom: .25rem;
}

.kop-met-knop .leidraad {
    margin-bottom: 1rem;
}

.lijstjes, .cadeaus, .beheerders, .genodigden {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.lijstjes li {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    margin-bottom: .6rem;
    background: var(--papier-diep);
}

.lijstjes a,
/* Een rij zonder link: een verbonden familie kan je bekijken noch beheren, en
   dan hoort er ook niets te zijn dat naar een 403 wijst. */
.lijstje-rij {
    display: block;
    padding: .9rem 1rem;
    text-decoration: none;
    color: var(--inkt);
}

.lijstje-naam {
    display: block;
    font-weight: 650;
}

.lijstje-bij {
    display: block;
    font-size: .9rem;
    color: var(--inkt-zacht);
}

.cadeau {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .9rem 0;
    border-bottom: 1px solid var(--lijn);
}

.cadeau-foto {
    flex: none;
    width: 84px;
}

.cadeau-foto img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-klein);
    background: var(--papier-diep);
    display: block;
}

/*
  Een cadeau zonder foto houdt zijn plek.

  Zonder dit vak begon zo'n regel 93 pixels naar links en las een lijst met
  sommige foto's als twee lijsten door elkaar. Het vak is er net genoeg om de
  kolom te dragen: geen rand die om aandacht vraagt, geen icoon dat iets belooft
  wat er niet is.
*/
.cadeau-foto-leeg {
    aspect-ratio: 1;
    border-radius: var(--radius-klein);
    background: var(--papier-diep);
}

.cadeau-tekst {
    min-width: 0;
    flex: 1 1 auto;
}

.cadeau-tekst h2, .cadeau-tekst h3 {
    font-size: 1rem;
    margin-bottom: .2rem;
    overflow-wrap: anywhere;
}

.cadeau-prijs, .cadeau-opmerking, .cadeau-acties, .cadeau-uit {
    margin: 0 0 .2rem;
    font-size: .9rem;
}

.cadeau-prijs {
    font-weight: 600;
}

.onbekend {
    color: var(--inkt-zacht);
    font-weight: 400;
}

.cadeau-uit {
    color: var(--waarschuwing);
}

.cadeau-acties {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

/*
  De twee icoonknoppen bij een cadeau horen naast elkaar, niet onder elkaar. Ze
  erven `margin-left: auto` van .persoon-acties - daar duwt dat de acties naar de
  rechterkant van een naamregel - en dat brak de rij hier in tweeën.
*/
.cadeau-acties .persoon-acties {
    margin-left: 0;
    gap: .3rem;
}

.beheerders li {
    padding: .35rem 0;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: .95rem;
}

/* --- formulieronderdelen --- */

.veld-rij {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.veld-rij > .veld {
    flex: 1 1 10rem;
    min-width: 0;
}

.veld-rij > .veld-smal {
    flex: 0 0 6rem;
}

fieldset.veld {
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    padding: .8rem;
}

fieldset.veld legend {
    font-weight: 600;
    font-size: .9rem;
    padding: 0 .35rem;
}

.fotostrip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
    /* De strip mag schuiven; de pagina eronder niet. */
    scrollbar-width: thin;
}

.fotokeuze-optie {
    flex: none;
    width: 84px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius-klein);
    padding: 2px;
}

.fotokeuze-optie img {
    width: 100%;
    height: 84px;
    object-fit: contain;
    background: var(--papier-diep);
    border-radius: 4px;
    display: block;
}

.fotokeuze-optie input {
    display: block;
    margin: .25rem auto 0;
    accent-color: var(--dennen);
}

.fotokeuze-optie:has(input:checked) {
    border-color: var(--dennen);
}

.fotokeuze-geen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 84px;
    font-size: .8rem;
    color: var(--inkt-zacht);
    background: var(--papier-diep);
    border-radius: 4px;
}

.huidige-foto {
    margin-bottom: .75rem;
}

.huidige-foto img {
    border-radius: var(--radius-klein);
    height: auto;
}

.gevaarlijk {
    margin-top: 1.5rem;
}

/* Gevaarlijk in een naam: dezelfde klasse op een tekstknop en op een volle knop.
   Twee namen voor hetzelfde (knop-gevaar en knop-gevaarlijk) liepen uiteen zodra
   er eentje bijkwam. */
.knop-tekst.knop-gevaar {
    color: var(--fout);
}

.knop.knop-gevaar {
    background: var(--fout);
    border-color: transparent;
}

/* htmx zet deze klasse aan tijdens een aanvraag. */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}

/* --- delen en genodigden (fase 3) --- */

.qr {
    width: 160px;
    height: 160px;
    image-rendering: pixelated;
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    background: #fff;
    display: block;
}

.genodigden li {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    background: var(--papier-diep);
}

.genodigden li.ingetrokken {
    opacity: .65;
}

.genodigde-kop {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.genodigde-status {
    font-size: .875rem;
    margin: .2rem 0 .6rem;
}

.genodigde-acties {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .5rem 0 0;
}

.waarschuwing-tekst {
    color: var(--waarschuwing);
}

/* Het vak dat zegt onder welke naam je kijkt. Bewust opvallend: een
   doorgestuurde link is technisch niet tegen te houden, maar het moet wel
   meteen te zien zijn dat je onder iemands naam kijkt. */
.jekijkt {
    background: var(--dennen-licht);
    border: 1px solid var(--dennen);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1.5rem;
}

.jekijkt-naam {
    margin: 0;
    font-weight: 650;
    color: var(--dennen);
}

.jekijkt-hulp {
    margin: .2rem 0 0;
    font-size: .875rem;
    color: var(--inkt-zacht);
}

.cadeau-status {
    margin: .25rem 0;
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

/*
  "Jij koopt dit" als een echt merkteken en niet als een groen woord: op een lange
  lijst moet je in één blik zien welke al van jou zijn. De kaart eromheen is ook
  groen; dit is het label erin.

  Alleen de koper ziet dit. De eigenaar komt op dit scherm nooit - die wordt
  herkend en naar zijn eigen scherm gestuurd, en dat joint niet eens op
  reservaties.
*/
.status-jij {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--dennen);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.status-ander {
    color: var(--kaars);
    font-weight: 600;
}

.cadeau-op .cadeau-tekst h2 {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--inkt-zacht);
}

/* --- taalwissel (fase 7) --- */

.talen {
    display: inline-flex;
    gap: .35rem;
    font-size: .8rem;
    letter-spacing: .02em;
}

.talen a {
    color: var(--inkt-zacht);
    text-decoration: none;
    padding: .1rem .25rem;
    border-radius: 3px;
}

.talen a.nu {
    color: var(--papier);
    background: var(--dennen);
    font-weight: 600;
}

/* Juridische pagina's: lange lopende tekst. Smaller dan de rest, want een
   regel van meer dan een stuk of tachtig tekens leest niet meer. */
.juridisch {
    max-width: 42rem;
}

.juridisch h2 {
    margin: 2rem 0 .4rem;
    font-size: 1.05rem;
}

.juridisch p,
.juridisch li {
    line-height: 1.6;
}

.juridisch ul {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
}

.juridisch li {
    margin-bottom: .5rem;
}

.klein {
    font-size: .85rem;
    color: var(--inkt-zacht);
}

.waarschuwing {
    background: var(--waarschuwing-licht);
    border-left: 3px solid var(--waarschuwing);
    padding: .7rem .9rem;
    border-radius: var(--radius);
}

/* --- het schema op de onthaalpagina (uitleg wat de app doet) --- */

.schema-kop {
    font-size: 1.05rem;
    margin: 2rem 0 .9rem;
}

.schema {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
    display: grid;
    gap: 1.35rem;
}

/* Op een telefoon staat de tekening naast de tekst: vier stappen onder elkaar
   met de tekening erboven zou de pagina te lang maken om in één keer te vatten. */
.schema li {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 1rem;
    align-items: start;
}

.schema strong {
    display: block;
    margin-bottom: .15rem;
}

.schema span {
    color: var(--inkt-zacht);
}

.stap-tekening {
    width: 3.4rem;
    height: 3.4rem;
    flex: none;
}

/* De onderdelen van de tekeningen. Alles hangt aan de themakleuren, zodat het
   schema ook op de donkere achtergrond klopt zonder tweede tekening. */
.t-lijn,
.t-lijn-dun,
.t-accent-lijn,
.t-accent-lijn-dun {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.t-lijn {
    stroke: var(--dennen);
    stroke-width: 2.6;
}

.t-lijn-dun {
    stroke: var(--dennen);
    stroke-width: 2.2;
}

.t-lijn-vlak {
    fill: var(--dennen);
    stroke: var(--dennen);
    stroke-width: 2.6;
    stroke-linejoin: round;
}

.t-accent-lijn {
    stroke: var(--kaars);
    stroke-width: 6;
}

.t-accent-lijn-dun {
    stroke: var(--kaars);
    stroke-width: 2.4;
}

.t-vlak {
    fill: var(--dennen);
}

.t-accent-vlak {
    fill: var(--kaars);
}

.t-blad {
    fill: var(--papier-diep);
    stroke: var(--dennen);
    stroke-width: 2.6;
}

.t-vink {
    fill: none;
    stroke: var(--papier);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 40rem) {
    .schema {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .schema li {
        grid-template-columns: 1fr;
        gap: .7rem;
        /* Zonder dit rekken de rijen mee met de langste kolom en beginnen de vier
           koppen niet op dezelfde regel. */
        align-content: start;
    }
}

/* --- het startscherm --- */

/* De drie stappen voor wie nog niets heeft. Een genummerde lijst en geen tegels:
   hier is de volgorde de boodschap, en tegels suggereren keuze. */
.startstappen {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 1.8rem;
    display: grid;
    gap: 1.1rem;
}

.startstappen li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .9rem;
    align-items: start;
}

.stapnummer {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--dennen-licht);
    color: var(--dennen);
    font-weight: 650;
    font-size: .95rem;
}

.startstappen strong {
    display: block;
    margin-bottom: .1rem;
}

.startstappen span:not(.stapnummer) {
    color: var(--inkt-zacht);
}

.knop-groot {
    padding: .9rem 1.5rem;
    font-size: 1.05rem;
}

/* De tegels voor wie al iets heeft. Het getal staat vooraan en groot: dat is
   waarvoor je hier komt kijken. */
.tegels {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 1.6rem;
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr 1fr;
}

.tegels a {
    display: block;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--papier-diep);
    color: var(--inkt);
    text-decoration: none;
}

.tegels a:hover,
.tegels a:focus-visible {
    border-color: var(--dennen);
    background: var(--dennen-licht);
}

.tegel-getal {
    display: block;
    font-size: 1.9rem;
    font-weight: 650;
    line-height: 1.1;
    color: var(--dennen);
    letter-spacing: -.02em;
}

.tegels strong {
    display: block;
    margin-top: .3rem;
    font-size: .95rem;
}

.tegel-onder {
    display: block;
    font-size: .8rem;
    color: var(--inkt-zacht);
}

@media (min-width: 40rem) {
    .tegels {
        grid-template-columns: repeat(4, 1fr);
    }

    .startstappen {
        gap: 1.3rem;
    }
}

/* --- sectienavigatie voor wie aangemeld is --- */

.hoofdnav {
    border-bottom: 1px solid var(--lijn);
    background: var(--papier);
}

.hoofdnav-binnen {
    width: 100%;
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 var(--tussen);
    display: flex;
    gap: 1.15rem;
    /* Op een smal scherm schuift de rij in plaats van te breken: een navigatie
       die over twee regels valt, verschuift de hele pagina bij elke stap. */
    overflow-x: auto;
    scrollbar-width: none;
}

.hoofdnav-binnen::-webkit-scrollbar {
    display: none;
}

.hoofdnav a {
    display: block;
    padding: .7rem 0;
    color: var(--inkt-zacht);
    text-decoration: none;
    font-size: .92rem;
    white-space: nowrap;
    /* De rand ligt er altijd, ook doorzichtig: anders springt de tekst een pixel
       wanneer je van tabblad wisselt. */
    border-bottom: 2px solid transparent;
}

.hoofdnav a:hover,
.hoofdnav a:focus-visible {
    color: var(--inkt);
}

.hoofdnav a.nu {
    color: var(--dennen);
    font-weight: 600;
    border-bottom-color: var(--dennen);
}

/* Het contactadres onderaan de juridische pagina's. De tekst noemt het adres al;
   de link erachter is er voor wie liever klikt dan overtypt. */
.juridisch-contact {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lijn);
}

/* --- vensters --- */

.deelknoprij {
    margin: 0 0 1.5rem;
}

dialog.venster {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 32rem;
    width: calc(100% - 2rem);
}

dialog.venster::backdrop {
    background: rgba(35, 32, 28, .45);
}

.venster-binnen {
    background: var(--papier);
    color: var(--inkt);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 1.4rem;
}

.venster-binnen h2 {
    margin-top: 0;
}

/* Zonder ondersteuning voor <dialog> blijft de inhoud gewoon in de pagina staan
   in plaats van onzichtbaar te worden. */
dialog.venster:not([open]) {
    display: none;
}

/* --- profiel --- */

.profiellink {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    color: var(--inkt);
}

.profiellink:hover span:last-child,
.profiellink:focus-visible span:last-child {
    text-decoration: underline;
}

.avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

/* Geen foto: de eerste letter van de naam in een cirkel. Beter dan een grijze
   silhouetafbeelding, want die zegt niets en ziet er bij twintig mensen naast
   elkaar precies hetzelfde uit. */
.avatar-letter {
    display: grid;
    place-items: center;
    background: var(--dennen-licht);
    color: var(--dennen);
    font-weight: 650;
    font-size: .85rem;
    line-height: 1;
}

.avatar-groot {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
}

.profielkop {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.profielkop strong {
    display: block;
}

.profiel-fotoweg {
    margin-top: .75rem;
}

.profiel-afmelden {
    margin-top: 1rem;
}

.keuze {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .8rem;
}

.bevestig-tekst {
    margin-top: 0;
    font-size: 1.05rem;
}

/* --- families met hun mensen erin --- */

.familie {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: .9rem;
    background: var(--papier-diep);
}

.familie-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.familie-kop h3 {
    margin: 0;
    font-size: 1.05rem;
}

.familie-mensen {
    list-style: none;
    padding: 0;
    margin: 0;
}

.familie-mensen li {
    padding: .3rem 0;
    border-bottom: 1px solid var(--lijn);
}

.familie-mensen li:last-child {
    border-bottom: 0;
}

/* Wie er nog niet is, staat er wel - maar rustiger, want hij kan nog niets. */
.familie-mensen .zonder-account span:first-child {
    color: var(--inkt-zacht);
}

/* Geen familie is geen familie: streepjeslijn, zodat het oog het als een openstaand
   punt leest en niet als de vijfde groep. */
.familie-los {
    background: transparent;
    border-style: dashed;
}

.familie-los .leidraad {
    margin: .6rem 0 0;
}

/* De naam eerst, het beheer eronder en dicht. */
.persoon-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem;
}

.persoon-naam {
    font-weight: 600;
}

.persoon-beheer summary {
    cursor: pointer;
    color: var(--dennen);
    font-size: .9rem;
    padding: .2rem 0;
}

.persoon-beheer[open] summary {
    margin-bottom: .3rem;
}

.familie-mensen li {
    padding: .45rem 0;
}

/* Het scheidingsteken hoort bij de opmaak, niet in de vertaling: een spatie aan
   het begin van een element valt weg, en dan plakt het punt aan de naam. */
.persoon-kop {
    gap: .35rem;
}

.persoon-kop .onbekend + .onbekend::before,
.persoon-kop .persoon-naam + .onbekend::before {
    content: "\00b7";
    margin-right: .35rem;
    color: var(--lijn);
}

/* --- iconen bij een persoon --- */

.persoon-kop {
    gap: .4rem;
}

.persoon-acties {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-left: auto;
}

.icoonknop {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-klein);
    background: transparent;
    color: var(--inkt-zacht);
    cursor: pointer;
}

.icoonknop svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icoonknop:hover,
.icoonknop:focus-visible {
    background: var(--papier-diep);
    color: var(--dennen);
}

/* Beheerder: het schild staat vol zolang hij het is. */
.icoonknop-aan {
    color: var(--dennen);
}

.icoonknop-aan svg {
    fill: var(--dennen-licht);
}

.icoonknop-gevaar:hover,
.icoonknop-gevaar:focus-visible {
    background: var(--fout-licht);
    color: var(--fout);
}

/* Een knop met een icoon en zijn woord ernaast: eenmalige acties bovenaan het
   scherm, waar geen twintig rijen om ruimte vragen. */
.knop-icoon {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.knop-icoon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.familie-mensen .avatar {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
}

/* De sorteerkeuze naast een kop: klein en rustig, want ze is niet waarvoor je
   op de pagina komt. */
.sorteerrij {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: var(--inkt-zacht);
}

.sorteerrij select {
    min-height: 2.1rem;
    padding: .2rem .5rem;
    font-size: .9rem;
    width: auto;
}

/* De ster bij een familie waar je zelf in zit. */
.ster {
    width: .95rem;
    height: .95rem;
    vertical-align: -.1rem;
    margin-right: .2rem;
    fill: var(--kaars);
    stroke: none;
}

.lijstjes .avatar {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    margin-right: .1rem;
}

/* --- de familie in het groot bovenaan --- */

.familiekop {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/*
  De familie is waar je op dat scherm voor komt, dus staat ze er ook zo: een
  gezicht van vijf en een halve rem en haar naam een maat groter dan een gewone
  kop. Op een telefoon was het allebei net te klein om als titel te lezen.
*/
.familiekop .avatar-groot {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 2.2rem;
}

.familiekop h1 {
    margin: 0;
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.15;
}

/* --- een foto bijsnijden --- */

.bijsnijden {
    margin: .8rem 0;
}

.bijsnijden canvas {
    display: block;
    width: 15rem;
    height: 15rem;
    max-width: 100%;
    border-radius: 50%;
    background: var(--papier-diep);
    border: 1px solid var(--lijn);
    touch-action: none;
    cursor: grab;
}

.bijsnijden canvas:active {
    cursor: grabbing;
}

.bijsnijden-zoom {
    display: block;
    margin: .6rem 0 .2rem;
    font-size: .9rem;
    color: var(--inkt-zacht);
}

.bijsnijden-zoom input {
    width: 15rem;
    max-width: 100%;
}

/* --- een rij schakelaars, één per familie --- */

.schakelrij {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.schakelrij li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--lijn);
}

.schakelnaam {
    font-weight: 600;
    flex: 1 1 8rem;
}

/*
  Eén zichtbare focus voor het hele scherm.

  Er stonden er een stuk of zes verspreid, allemaal net iets anders. Dat merk je
  niet met een muis en meteen met een toetsenbord: je springt van veld naar veld
  en de ring verspringt van vorm. Terracotta en niet dennengroen, want groen op
  een groene knop is geen ring.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
}

/*
  Een raster voor overzichten. Eén kolom op een telefoon, twee vanaf 48rem, drie
  vanaf 72rem - de breekpunten uit het voorstel, op één plek zodat elk overzicht
  er hetzelfde uitziet.

  De leeskolom van 44rem blijft voor formulieren en lopende tekst: een invoerveld
  van duizend pixels breed leest niemand prettig.
*/
.raster {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

@media (min-width: 48rem) {
    .raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 72rem) {
    .raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Prijzen, tellers en datums lijnen uit: cijfers van gelijke breedte. */
.cijfers {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.raster-kop {
    font-size: 1.05rem;
    margin: 1.2rem 0 .6rem;
    color: var(--inkt-zacht);
}

/* Op een breed scherm is de navigatie een rij woorden: daar leest dat rustiger
   dan een rij tekeningetjes. Het icoon komt pas op een telefoon tevoorschijn. */
.navicoon {
    display: none;
}

/* --- het profielmenu: alleen op een telefoon --- */

.profielmenu {
    display: none;
    position: relative;
}

.profielmenu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: .2rem;
    border-radius: 999px;
}

.profielmenu > summary::-webkit-details-marker {
    display: none;
}

.profielmenu-blad {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 30;
    min-width: 12rem;
    /* Het blad hangt rechts vast en groeit naar links mee met zijn inhoud. Een
       lange vertaling mag het niet van het scherm duwen. */
    max-width: calc(100vw - 1.5rem);
    display: grid;
    gap: .1rem;
    padding: .6rem;
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--elevatie);
}

.profielmenu-blad a,
.profielmenu-blad button {
    text-align: left;
    padding: .45rem .3rem;
}

.profielmenu-kop {
    margin: .5rem .3rem .1rem;
    font-size: .75rem;
    color: var(--inkt-zacht);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.profielmenu-blad .talen {
    padding: 0 .3rem;
}

@media (max-width: 48rem) {
    /* Taal en thema zitten in het menu; de naam staat naast een gezicht dat je
       zelf gekozen hebt en hoeft er niet nog eens bij. */
    .kop-nav > .talen,
    .kop-nav > .themaknop,
    .profiellink {
        display: none;
    }

    .profielmenu {
        display: block;
    }

    .kop-nav {
        gap: .5rem;
        flex-wrap: nowrap;
    }
}

/*
  De navigatie onderaan op een telefoon.

  Ze stond bovenaan, en daar reikt een duim niet. Onder de 48rem wordt ze een
  vaste balk onderaan het scherm, met een veilige marge voor de streep van een
  iPhone. De pagina krijgt onderaan evenveel ruimte terug, anders valt de laatste
  knop eronder.
*/
@media (max-width: 48rem) {
    .hoofdnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        border-top: 1px solid var(--lijn);
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -1px 12px rgba(35, 32, 28, .08);
    }

    .hoofdnav-binnen {
        justify-content: space-between;
        gap: .2rem;
        overflow-x: visible;
    }

    .hoofdnav-binnen a {
        flex: 1;
        display: grid;
        justify-items: center;
        gap: .15rem;
        text-align: center;
        padding: .5rem .2rem;
        font-size: .7rem;
    }

    /* Een icoon boven het woord: op duimafstand herken je de vorm sneller dan
       de tekst, en het woord blijft eronder staan voor wie twijfelt. */
    .navicoon {
        display: block;
        width: 1.4rem;
        height: 1.4rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body {
        padding-bottom: 4.2rem;
    }
}

/* --- families die je via een verbonden familie kan vragen --- */

.suggesties {
    list-style: none;
    padding: 0;
    margin: .4rem 0 1rem;
}

.suggesties li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    border-top: 1px solid var(--lijn);
}

.suggesties li:first-child {
    border-top: 0;
}

.suggestie-tekst {
    display: grid;
    gap: .05rem;
    min-width: 0;
    margin-right: auto;
}

.suggestie-naam {
    font-weight: 650;
}

/* --- het startscherm: een welkomstkaart en twee levende blokken --- */

.welkomkaart {
    background: var(--dennen);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--elevatie);
}

.welkomkaart h2 {
    margin: .2rem 0 .4rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.welkomkaart-datum {
    margin: 0;
    font-size: .8rem;
    opacity: .8;
    text-transform: lowercase;
}

.welkomkaart-zin {
    margin: 0 0 1rem;
    opacity: .95;
}

.welkomkaart-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
}

/* De knoppen staan op groen: omdraaien, anders lezen ze niet. */
.welkomkaart .knop {
    background: #fff;
    color: var(--dennen);
    border-color: #fff;
}

.welkomkaart .knop-tweede {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}

/* Twee blokken naast elkaar zodra het scherm het toelaat. */
.startblokken {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
    margin-top: 1.2rem;
}

@media (min-width: 60rem) {
    .startblokken {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.trekkingregel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0 0;
    text-decoration: none;
    color: var(--inkt);
}

.trekkingregel-naam {
    font-weight: 650;
}

/* Hoe lang nog: het enige cijfer waar iemand op afgaat, dus het mag opvallen. */
.dagenbadge {
    margin-left: auto;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--kaars-licht);
    color: var(--kaars);
    font-size: .8rem;
    font-weight: 600;
}

.bewegingen {
    list-style: none;
    padding: 0;
    margin: .4rem 0 0;
}

.bewegingen a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    text-decoration: none;
    color: var(--inkt);
    border-top: 1px solid var(--lijn);
}

.bewegingen li:first-child a {
    border-top: 0;
}

.beweging-tekst {
    display: grid;
    gap: .05rem;
    min-width: 0;
    margin-right: auto;
}

/* --- het reserveerscherm: kaarten, filters en de staat "van jou" --- */

.cadeaufilter > input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.filterkoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 1rem;
}

.filterkoppen label {
    padding: .35rem .8rem;
    border: 1px solid var(--lijn);
    border-radius: 999px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--inkt-zacht);
    background: var(--papier);
}

#filter-alles:checked ~ .filterkoppen label[for=filter-alles],
#filter-vrij:checked ~ .filterkoppen label[for=filter-vrij],
#filter-mij:checked ~ .filterkoppen label[for=filter-mij] {
    background: var(--dennen);
    border-color: var(--dennen);
    color: #fff;
}

.cadeaufilter > input[type=radio]:focus-visible ~ .filterkoppen label {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Filteren in de browser zelf: geen tweede aanvraag, geen javascript. */
#filter-vrij:checked ~ .cadeaus .cadeau-op,
#filter-mij:checked ~ .cadeaus .cadeau:not(.cadeau-vanmij) {
    display: none;
}

/*
  Wat jij genomen hebt, is groen. Alleen jij ziet dit: de eigenaar komt op deze
  pagina nooit, want hij wordt herkend en naar zijn eigen scherm gestuurd - en
  dat scherm joint niet eens op reservaties.
*/
.cadeau-vanmij {
    background: var(--gereserveerd);
    border-color: var(--gereserveerd-rand);
}

.cadeau-letter {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    border-radius: var(--radius-klein);
    background: var(--dennen-licht);
    color: var(--dennen);
    font-size: 1.6rem;
    font-weight: 650;
}

/* De winkel waar het vandaan komt: een klein herkomstlabel, geen link. */
.winkel {
    display: inline-block;
    padding: .05rem .4rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    font-size: .75rem;
    color: var(--inkt-zacht);
}

/* --- een persoon als kaart, in het raster van het lijstjesscherm --- */

.persoonkaart {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--papier-diep);
    transition: box-shadow .12s ease, border-color .12s ease;
}

.persoonkaart:hover {
    border-color: var(--dennen);
    box-shadow: var(--elevatie);
}

/* Jouw eigen regel in de familie: herkenbaar, maar niet luider dan de rest. */
.persoonkaart-jij {
    border-color: var(--dennen);
}

.persoonkaart-binnen {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .2rem .8rem;
    padding: .9rem 1rem;
    text-decoration: none;
    color: var(--inkt);
}

.persoonkaart-tekst {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.persoonkaart-naam {
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* De balk staat onder allebei de kolommen. */
.vrijbalk {
    grid-column: 1 / -1;
    display: grid;
    gap: .25rem;
    margin-top: .6rem;
}

.vrijbalk-spoor {
    height: 6px;
    border-radius: 999px;
    background: var(--lijn);
    overflow: hidden;
}

.vrijbalk-vulling {
    display: block;
    height: 100%;
    background: var(--dennen);
}

.vrijbalk-tekst {
    font-size: .75rem;
    color: var(--inkt-zacht);
}

.persoonkaart-leeg {
    color: var(--inkt-zacht);
}

.persoonkaart-leeg .knop {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: .5rem;
}

/* --- de console: tabbladen zonder javascript --- */

.tabs > input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tabkoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    border-bottom: 1px solid var(--lijn);
    margin-bottom: 1rem;
}

.tabkoppen label {
    padding: .5rem .8rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--inkt-zacht);
}

.tabblad {
    display: none;
}

/* Elk paneel hoort bij zijn eigen radioknop. Vijf paren, uitgeschreven: een
   selector die dat in het algemeen doet, bestaat niet. */
#tab-gebruikers:checked ~ .tabkoppen label[for=tab-gebruikers],
#tab-mails:checked ~ .tabkoppen label[for=tab-mails],
#tab-trekkingen:checked ~ .tabkoppen label[for=tab-trekkingen],
#tab-systeem:checked ~ .tabkoppen label[for=tab-systeem],
#tab-winkels:checked ~ .tabkoppen label[for=tab-winkels] {
    background: var(--papier-diep);
    border-color: var(--lijn);
    color: var(--inkt);
}

#tab-gebruikers:checked ~ #paneel-gebruikers,
#tab-mails:checked ~ #paneel-mails,
#tab-trekkingen:checked ~ #paneel-trekkingen,
#tab-systeem:checked ~ #paneel-systeem,
#tab-winkels:checked ~ #paneel-winkels {
    display: block;
}

.tabkoppen label:focus-within,
.tabs > input[type=radio]:focus-visible ~ .tabkoppen label {
    outline: 2px solid var(--dennen);
    outline-offset: 2px;
}

/* De balk die zegt dat je als iemand anders kijkt. Opvallend met opzet. */
.kijktalsbalk {
    background: var(--kaars);
    color: #fff;
    font-size: .9rem;
}

.kijktalsbalk .kop-binnen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .5rem 1rem;
    flex-wrap: wrap;
}

.kijktalsbalk .knop {
    background: #fff;
    color: var(--kaars);
    border-color: #fff;
}

/* --- kleine merktekens onder een naam --- */

.persoon-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    flex-basis: 100%;
    margin-left: 2.2rem;
}

/*
  `kenmerk` en niet `merk`: dat tweede is het logo bovenaan. Dezelfde naam voor
  twee dingen gaf hier een klein grijs lettertype op het lakzegel en een
  scheidingsteken tussen dingen die niets met elkaar te maken hebben.
*/
.kenmerk {
    font-size: .75rem;
    color: var(--inkt-zacht);
    white-space: nowrap;
}

/* Een punt tussen twee kenmerken, en niet voor het eerste. Als teken en niet als
   escape: dat laatste ging mis en dan stond er letterlijk " b7" op het scherm -
   tekst die niemand kan selecteren, want ze komt uit het opmaakblad. */
.kenmerk + .kenmerk::before {
    content: "·";
    margin-right: .35rem;
}

/* Wat nog vrij is, is het enige waarop iemand hier afgaat: dat mag kleur. */
.kenmerk-vrij {
    color: var(--dennen);
    font-weight: 600;
}

/* --- de gezichtskiezer: één schuifstrip, en eronder wat erbij hoort --- */

.gezichtskiezer {
    margin-bottom: .8rem;
}

/*
  Zijwaarts schuiven met een klikpunt per gezicht: dan blijft er nooit een half
  rondje in beeld hangen. `overscroll-behavior-x: contain` houdt de veeg in de
  strip, zodat een telefoon niet de hele pagina meesleurt.
*/
.gezichtsstrip {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: .35rem .2rem .6rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    background: var(--papier-diep);
}

.gezicht {
    /*
      Zonder `relative` hangt het verborgen keuzerondje aan de pagina in plaats
      van aan zijn eigen vakje. Het staat dan op de plek waar het in de strip zou
      staan - vierduizend pixels naar rechts - en de hele pagina schuift mee. Dat
      is wat er gebeurde: een zijwaartse schuifbalk onder elk scherm met deze
      strip erop.
    */
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .15rem;
    padding: .3rem;
    border: 2px solid transparent;
    border-radius: var(--radius-klein);
    cursor: pointer;
}

/*
  Een vakje van vaste maat om het gezicht in te zetten. Zonder dit is de span
  inline, staat de letter linksboven naast haar eigen cirkel, en wordt het vakje
  van "eigen foto" een ovaal omdat het meerekt met de tekst eronder.
*/
.gezicht-beeld {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.gezicht input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Alleen de maat. `display` niet: dat overschrijft het grid waarmee
   .avatar-letter zijn letter midden in de cirkel zet, en dan staat ze in de
   linkerbovenhoek. */
.gezicht .avatar {
    width: 2.5rem;
    height: 2.5rem;
}

.gezicht img.avatar,
.gezicht picture {
    display: block;
}

.gezicht:has(input:checked) {
    border-color: var(--dennen);
    background: var(--dennen-licht);
}

.gezicht:has(input:focus-visible) {
    outline: 2px solid var(--dennen);
    outline-offset: 2px;
}

.gezicht-naam {
    font-size: .7rem;
    min-height: .9rem;
    color: var(--inkt-zacht);
    max-width: 4.5rem;
    text-align: center;
}

/* Je eigen foto staat vooraan en mag opvallen: er hoort een streepje tussen. */
.gezicht-eigen {
    border-right: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    padding-right: .6rem;
    margin-right: .3rem;
}

/*
  De instelling verschijnt alleen bij de keuze die er een heeft. Kan de browser
  geen :has, dan staat ze gewoon altijd open - dat is onhandiger, niet stuk.
*/
.gezichtsinstelling {
    padding-top: .6rem;
}

@supports selector(:has(*)) {
    .gezichtskiezer:not(:has(.gezicht-eigen input:checked)) .gezichtsinstelling {
        display: none;
    }
}

.keuzevak {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Het woord bij het icoon. Onder de 34rem is er geen plaats naast drie namen;
   daarboven wel, en dan hoeft niemand te raden wat een schild betekent. */
.icoonwoord {
    display: none;
}

@media (min-width: 34rem) {
    .icoonknop {
        width: auto;
        gap: .35rem;
        padding: 0 .6rem;
        grid-auto-flow: column;
        align-items: center;
    }

    .icoonwoord {
        display: inline;
        font-size: .85rem;
    }
}

/* Het belletje in de kop, met zijn cijfer. */
.belletje {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--inkt-zacht);
    border-radius: var(--radius-klein);
}

.belletje svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.belletje:hover,
.belletje:focus-visible {
    background: var(--papier-diep);
    color: var(--dennen);
}

.belteller {
    position: absolute;
    top: .1rem;
    right: .05rem;
    min-width: 1.05rem;
    padding: 0 .2rem;
    border-radius: 999px;
    background: var(--kaars);
    color: #fff;
    font-size: .7rem;
    line-height: 1.05rem;
    text-align: center;
    font-weight: 650;
}

/* De stappen van een wizard: waar je bent, en hoeveel er nog komt. */
.venster-breed .venster-binnen {
    max-width: 34rem;
}

.wizardstappen {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--inkt-zacht);
}

.wizardstappen .nu {
    color: var(--dennen);
    font-weight: 650;
}

.wizardstappen .af {
    text-decoration: line-through;
}

/* --- een tabel die op een telefoon kantelt --- */

.tabelrand {
    overflow-x: auto;
}

.tabel {
    width: 100%;
    border-collapse: collapse;
}

.tabel th,
.tabel td {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--lijn);
    vertical-align: top;
}

.tabel thead th {
    font-size: .85rem;
    color: var(--inkt-zacht);
    font-weight: 600;
    border-bottom-width: 2px;
}

.tabel tbody tr:hover {
    background: var(--papier-diep);
}

.tabel .blok {
    display: block;
    font-size: .85rem;
}

.tabel-acties {
    white-space: nowrap;
}

.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Onder de 34rem is een tabel geen tabel meer: elke rij wordt een blokje met
   zijn eigen opschriften. Zijwaarts scrollen door kolommen leest niemand. */
@media (max-width: 34rem) {
    .tabel thead {
        display: none;
    }

    .tabel,
    .tabel tbody,
    .tabel tr,
    .tabel td {
        display: block;
        width: 100%;
    }

    .tabel tr {
        border: 1px solid var(--lijn);
        border-radius: var(--radius);
        margin-bottom: .7rem;
        padding: .3rem .2rem;
        background: var(--papier);
    }

    .tabel td {
        border: 0;
        padding: .3rem .6rem;
    }

    .tabel td::before {
        content: attr(data-kop);
        display: block;
        font-size: .75rem;
        color: var(--inkt-zacht);
    }
}

/* --- het lijstjesscherm --- */

/* Je eigen lijstje: één kaart met nadruk, want het is het enige waar je zelf
   iets aan doet. De rest van de pagina is om in te kijken. */
.eigenlijstje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--dennen);
    color: var(--papier);
    box-shadow: var(--schaduw);
}

.eigenlijstje h2 {
    margin: .1rem 0 .2rem;
    font-size: 1.35rem;
}

.eigenlijstje a {
    color: inherit;
}

.eigenlijstje h2 a {
    text-decoration: none;
}

.eigenlijstje h2 a:hover {
    text-decoration: underline;
}

.eigenlijstje p,
.eigenlijstje .onbekend {
    margin: 0;
    color: rgba(253, 251, 247, .75);
}

.eigenlijstje .opschrift {
    display: block;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(253, 251, 247, .7);
}

.eigenlijstje .knop-tweede {
    background: rgba(253, 251, 247, .12);
    border-color: rgba(253, 251, 247, .45);
    color: var(--papier);
}

.eigenlijstje .knop-tweede:hover {
    background: rgba(253, 251, 247, .2);
}

/* Een leeg eigen lijstje schreeuwt niet: het nodigt uit. */
.eigenlijstje-leeg {
    background: var(--dennen-licht);
    color: var(--inkt);
    box-shadow: none;
    border: 1px dashed var(--dennen);
}

.eigenlijstje-leeg p,
.eigenlijstje-leeg .onbekend,
.eigenlijstje-leeg .opschrift {
    color: var(--inkt-zacht);
}

/* De familiekaarten op dit scherm krijgen hun naam als kop met het gezicht
   ernaast, en de mensen eronder als rustige regels. */
.familie-kop h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.05rem;
}

.familie-kop h2 a {
    color: inherit;
    text-decoration: none;
}

.familie-kop h2 a:hover {
    text-decoration: underline;
}

/* De versie onderaan: klein, en niet in de weg. */
.voet-versie {
    /* Nog kleiner: het is een gegeven om iets na te kijken, geen mededeling. */
    font-size: .68rem;
    color: var(--inkt-zacht);
    opacity: .6;
    margin-top: .2rem;
}

/* De licht/donkerknop staat in de kop, naast het belletje. */
.themaknop {
    display: inline-flex;
}

/* --- op een telefoon passen er meer namen op een scherm --- */

@media (max-width: 34rem) {
    /* Een avatar, een naam en een regeltje: daar hoeft geen halve schermhoogte
       omheen. Met dertig mensen in een familie scheelt dat de helft van het
       scrollen; de kaart blijft ruim boven de 44 px die een duim nodig heeft. */
    .persoonkaart-binnen {
        padding: .55rem .8rem;
    }

    .persoonkaart-binnen .avatar,
    .persoonkaart-binnen .avatar-groot {
        width: 2rem;
        height: 2rem;
        font-size: .9rem;
    }

    .persoonkaart-naam {
        font-size: .9rem;
    }

    .vrijbalk {
        margin-top: .35rem;
    }
}

/* --- een gegeven dat vastligt, in de vorm van een veld --- */

/*
  Het adres op het uitnodigingsscherm. Het hoort in de rij velden thuis - je
  leest er van boven naar beneden wat je account wordt - maar het is er geen:
  er valt niets te typen en er wordt niets meegestuurd. Vandaar de vorm van een
  veld en de kleur van iets dat al vastligt.
*/
.veldlabel {
    display: block;
    margin: 0 0 .25rem;
    font-weight: 600;
}

.vastadres {
    margin: 0;
    padding: .6rem .75rem;
    background: var(--papier-diep);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    color: var(--inkt);
    word-break: break-all;
}

/* --- de knop die je naar je bladwijzerbalk sleept --- */

.bladwijzerknop-rij {
    margin: 0 0 .5rem;
    text-align: center;
}

/*
  Hij ziet eruit als een knop en gedraagt zich als een bladwijzer: het handje van
  het slepen in plaats van het vingertje van het klikken, want klikken doet hier
  niets.
*/
.bladwijzerknop {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.bladwijzerknop .merk-teken {
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
}

.stappen {
    margin: 0 0 1.2rem 1.2rem;
    padding: 0;
    line-height: 1.6;
}

.keuzelijst {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: grid;
    gap: .5rem;
}

/* Een stuk code om over te nemen: leesbaar, en het duwt de pagina niet breed. */
.codeblok {
    margin: 0 0 1.2rem;
    padding: .8rem;
    background: var(--papier-diep);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    font-size: .75rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}