/*
 * 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;
}

/*
 * 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;
}

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

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

/* --- 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;
}