/*
 * 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;
    --schaduw: 0 1px 2px rgba(35, 32, 28, .06), 0 4px 12px rgba(35, 32, 28, .05);

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

@media (prefers-color-scheme: dark) {
    :root {
        --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 {
    width: 1.6rem;
    height: 1.6rem;
    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;
}

.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 {
    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;
}

.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;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

.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;
}

.status-jij {
    color: var(--dennen);
    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: .9rem;
    margin-bottom: 1rem;
}

.familiekop h1 {
    margin: 0;
}

/* --- 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 gezicht kiezen uit de set --- */

.avatarkeuze {
    border: 0;
    padding: 0;
    margin: 0 0 .8rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: .4rem;
}

.avatarkeuze legend {
    font-weight: 600;
    margin-bottom: .4rem;
}

.avatarkeuze-vak {
    display: grid;
    justify-items: center;
    gap: .2rem;
    padding: .4rem .2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    cursor: pointer;
}

.avatarkeuze-vak input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

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

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

.avatarkeuze-vak .avatar {
    width: 2.25rem;
    height: 2.25rem;
}

.avatarkeuze-naam {
    font-size: .7rem;
    color: var(--inkt-zacht);
    text-align: center;
    overflow-wrap: anywhere;
}

.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;
}