/* ==========================================================================
   PowerApp - stijlblad
   Speels en rond, in de lijn van het meegegeven ontwerp: zachte kaarten,
   pastelvlakken, paarse accentkleur. Mobiel eerst.
   ========================================================================== */

:root {
    --brand-700: #4C33C4;
    --brand-600: #6C4FE8;
    --brand-500: #8168F0;
    --brand-100: #EFEAFE;

    --ink: #1B1236;
    --ink-soft: #6E6A85;
    --ink-faint: #9B97AE;

    --bg: #F4F3FA;
    --surface: #FFFFFF;
    --line: #ECEAF4;

    --sky: #E3EEFC;
    --mint: #E6F5E2;
    --cream: #FDF1D4;
    --blush: #FCE7EC;
    --lilac: #EEE9FD;

    --ok: #2E9E5B;
    --ok-bg: #E6F6EC;
    --warn: #9A6B00;
    --warn-bg: #FDF1D4;
    --error: #C2314F;
    --error-bg: #FCE7EC;

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --shadow-card: 0 10px 30px rgba(27, 18, 54, .06);
    --shadow-lift: 0 14px 40px rgba(76, 51, 196, .18);

    --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI",
            system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

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

/* Het attribuut `hidden` moet altijd winnen.
   De browser regelt dat met `[hidden] { display: none }`, maar die regel heeft een
   lagere specificiteit dan onze eigen `.button { display: flex }` of
   `.fieldrow { display: grid }`. Zonder deze regel bleef een element met `hidden`
   dus gewoon staan — dat trof de tijdvelden bij "Duurt de hele dag" en de knop onder
   het cijferklavier. */
[hidden] {
    display: none !important;
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, svg {
    max-width: 100%;
    display: block;
}

a {
    color: var(--brand-600);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 6px;
}

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

.skiplink:focus {
    left: 1rem;
    top: 1rem;
    z-index: 20;
    background: var(--surface);
    padding: .6rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Authenticatie: paars merkvlak + wit paneel
   ========================================================================== */

.page--auth {
    background: var(--brand-600);
}

.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.auth__brand {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem 2.5rem;
    color: #fff;
    background:
        radial-gradient(120% 80% at 85% 0%, var(--brand-500) 0%, transparent 60%),
        var(--brand-600);
}

.brandmark {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: -.01em;
    position: relative;
    z-index: 2;
}

.brandmark__badge {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 1.1rem;
}

.brandmark__name {
    font-size: 1.1rem;
}

.auth__pitch {
    position: relative;
    z-index: 2;
    margin-top: 1.75rem;
    max-width: 22ch;
}

.auth__headline {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 800;
}

.auth__lead {
    margin-top: .75rem;
    color: rgba(255, 255, 255, .82);
    max-width: 34ch;
}

.chiprow {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.chip {
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ink);
}

.chip--mint  { background: var(--mint); }
.chip--sky   { background: var(--sky); }
.chip--cream { background: var(--cream); }

.blobs {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
    opacity: .28;
    background: #fff;
}

.blob--one   { width: 13rem; height: 13rem; right: -4rem; top: -3.5rem; }
.blob--two   { width: 8rem;  height: 8rem;  right: 3rem;  bottom: -3rem; opacity: .16; }
.blob--three { width: 5rem;  height: 5rem;  left: -1.5rem; bottom: 1rem; opacity: .14; }

.auth__stage {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 1rem 2.5rem;
    background: var(--bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: -1.25rem;
    position: relative;
    z-index: 3;
}

.card--auth {
    width: 100%;
    max-width: 26rem;
    margin-top: 1.75rem;
}

@media (min-width: 62rem) {
    .auth {
        flex-direction: row;
    }

    .auth__brand {
        flex: 0 0 44%;
        padding: 3rem 3.5rem;
        display: flex;
        flex-direction: column;
    }

    .auth__pitch {
        margin-top: auto;
    }

    .chiprow {
        margin-top: 1.75rem;
        margin-bottom: 1rem;
    }

    .auth__stage {
        align-items: center;
        margin-top: 0;
        border-radius: 0;
        padding: 3rem;
    }

    .card--auth {
        margin-top: 0;
    }

    .blob--one   { width: 22rem; height: 22rem; right: -7rem; top: -6rem; }
    .blob--two   { width: 14rem; height: 14rem; right: 6rem; bottom: -6rem; }
    .blob--three { width: 8rem;  height: 8rem;  left: -2.5rem; bottom: 6rem; }
}

/* ==========================================================================
   Kaarten
   ========================================================================== */

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

/* Losse kaarten onder elkaar hebben ruimte tussen zich nodig. Binnen .grid regelt de
   gap dat al, dus daar mag deze marge niet bovenop komen. */
main > .card + .card,
main > .card + .cards,
main > .cards + .card,
main > .card + .grid,
main > .grid + .card,
main > .alert + .card,
main > .card + .alert {
    margin-top: 1rem;
}

.card__head {
    margin-bottom: 1.25rem;
}

.card__title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.card__intro {
    margin-top: .4rem;
    color: var(--ink-soft);
    font-size: .95rem;
}

.card__note {
    margin-top: 1.1rem;
    font-size: .85rem;
    color: var(--ink-faint);
    line-height: 1.5;
}

.card__note code {
    background: var(--bg);
    border-radius: 6px;
    padding: .05rem .3rem;
    font-size: .8rem;
}

.card__actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.card--brand {
    color: #fff;
    background:
        radial-gradient(110% 90% at 90% 10%, var(--brand-500) 0%, transparent 55%),
        var(--brand-600);
    box-shadow: var(--shadow-lift);
}

.card__title--invert { color: #fff; }
.card__intro--invert { color: rgba(255, 255, 255, .82); }

.card--highlight {
    border: 2px solid var(--brand-100);
    background: var(--surface);
}

.card--placeholder {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Formulieren
   ========================================================================== */

.form {
    display: grid;
    gap: 1.1rem;
}

.field__label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.field__input {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: .85rem 1rem;
    transition: border-color .15s ease, background .15s ease;
}

.field__input::placeholder {
    color: var(--ink-faint);
}

/* Datum-, tijd- en getalvelden.
   Safari op iOS geeft deze velden een eigen minimumbreedte en eigen binnenmarges.
   Daardoor krimpen ze niet mee met hun kolom en lopen ze buiten de kaart of de
   popup. `min-width: 0` haalt die ondergrens weg, `appearance: none` de marges. */
.field__input[type="date"],
.field__input[type="time"],
.field__input[type="datetime-local"],
.field__input[type="month"],
.field__input[type="number"],
.field__input[type="file"] {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    max-width: 100%;
}

/* Zonder dit staat de waarde op iOS gecentreerd, anders dan in de andere velden. */
.field__input::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    min-width: 0;
}

/* Het kalender- en klokicoontje eist ruimte op naast de tekst. */
.field__input::-webkit-calendar-picker-indicator {
    margin-left: 0;
    padding: 0;
}

/* De pijltjes van een getalveld kosten breedte en zijn op een telefoon onbruikbaar
   klein; het toetsenbord is er al numeriek. */
.field__input[type="number"]::-webkit-outer-spin-button,
.field__input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.field__input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand-500);
}

.field__input--code {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .45em;
    text-indent: .45em;
    padding: .9rem 1rem;
}

.field__input--wide {
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-indent: .18em;
    text-transform: uppercase;
}

.field__group {
    position: relative;
    display: flex;
    align-items: center;
}

.field__group .field__input {
    padding-right: 4.5rem;
}

.field__toggle {
    position: absolute;
    right: .5rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand-600);
    cursor: pointer;
    padding: .4rem .6rem;
    border-radius: var(--radius-sm);
}

.field__hint {
    margin-top: .45rem;
    font-size: .8rem;
    color: var(--ink-faint);
    text-align: center;
}

/* ==========================================================================
   Knoppen
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    padding: .85rem 1.6rem;
    cursor: pointer;
    text-align: center;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.button:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

.button--block {
    width: 100%;
}

.button--primary {
    background: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-lift);
}

.button--primary:hover {
    background: var(--brand-700);
}

.button--secondary {
    background: var(--brand-100);
    color: var(--brand-700);
}

.button--ghost {
    background: var(--bg);
    color: var(--ink);
}

.button--onbrand {
    margin-top: 1.25rem;
    background: #fff;
    color: var(--brand-700);
}

.button--quiet {
    background: transparent;
    color: var(--ink-soft);
    padding: .5rem .9rem;
    font-size: .9rem;
}

.button--quiet:hover {
    background: var(--bg);
}

.link {
    font-size: .9rem;
    font-weight: 700;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    color: var(--brand-600);
}

.link--muted {
    color: var(--ink-faint);
    font-weight: 600;
}

.inlineform {
    display: inline;
}

.stack {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* ==========================================================================
   Meldingen
   ========================================================================== */

.alert {
    border-radius: var(--radius-md);
    padding: .8rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
}

.alert--error   { background: var(--error-bg); color: var(--error); }
.alert--success { background: var(--ok-bg);    color: var(--ok); }
.alert--warning { background: var(--warn-bg);  color: var(--warn); }

/* ==========================================================================
   Tweestapsverificatie: QR, sleutel, herstelcodes
   ========================================================================== */

.qr {
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--bg);
    border-radius: var(--radius-lg);
    margin-bottom: 1.1rem;
}

.qr__image {
    border-radius: var(--radius-sm);
    background: #fff;
}

.disclosure {
    margin-bottom: 1.25rem;
    font-size: .9rem;
}

.disclosure__summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand-600);
}

.disclosure__body {
    margin-top: .6rem;
    color: var(--ink-soft);
}

.secretkey {
    margin-top: .5rem;
    padding: .7rem .9rem;
    background: var(--bg);
    border-radius: var(--radius-md);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .95rem;
    letter-spacing: .08em;
    word-break: break-all;
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.codes__item {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: .6rem .5rem;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .05em;
}

/* ==========================================================================
   Ingelogde omgeving
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(244, 243, 250, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.topbar__inner {
    max-width: 74rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.logo__badge {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}

.logo:hover {
    text-decoration: none;
}

.nav {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav::-webkit-scrollbar {
    display: none;
}

.nav__list {
    display: flex;
    gap: .4rem;
}

.pill {
    display: inline-block;
    white-space: nowrap;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink-soft);
    background: transparent;
}

.pill:hover {
    background: var(--surface);
    text-decoration: none;
}

.pill--active {
    background: var(--ink);
    color: #fff;
}

.pill--active:hover {
    background: var(--ink);
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.avatar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .3rem;
    border-radius: 999px;
    color: var(--ink);
}

.avatar:hover {
    text-decoration: none;
}

.avatar__initials {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-weight: 800;
}

.avatar__name {
    display: none;
    font-size: .9rem;
    font-weight: 700;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell {
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.shell--narrow {
    max-width: 28rem;
    padding-top: 3rem;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hero__eyebrow {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink-faint);
    text-transform: lowercase;
}

.hero__title {
    font-size: clamp(1.6rem, 5vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.hero__title strong {
    font-weight: 800;
}

.hero__lead {
    margin-top: .5rem;
    color: var(--ink-soft);
    max-width: 48ch;
}

.hero__mascot {
    display: none;
}

.mascot {
    position: relative;
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
    background: var(--lilac);
}

.mascot::before,
.mascot::after {
    content: "";
    position: absolute;
    top: 2.1rem;
    width: .55rem;
    height: .8rem;
    border-radius: 999px;
    background: var(--ink);
}

.mascot::before { left: 1.5rem; }
.mascot::after  { right: 1.5rem; }

.tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.tile {
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    min-height: 6.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tile--sky   { background: var(--sky); }
.tile--mint  { background: var(--mint); }
.tile--cream { background: var(--cream); }
.tile--blush { background: var(--blush); }

.tile__label {
    font-size: .85rem;
    font-weight: 700;
}

.tile__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(27, 18, 54, .28);
}

.tile__meta {
    font-size: .8rem;
    color: var(--ink-soft);
}

.grid {
    display: grid;

    /* Zonder deze regel is de kolom `auto` en groeit hij mee met zijn breedste inhoud.
       Een veld met een eigen minimumbreedte — een bestandskiezer bijvoorbeeld — duwt de
       hele pagina dan open. minmax(0, 1fr) laat de kolom wél krimpen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ghostlist {
    margin-top: 1.25rem;
    display: grid;
    gap: .6rem;
}

.ghostlist__item {
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--bg) 0%, #FAFAFD 50%, var(--bg) 100%);
}

.pagehead {
    margin-bottom: 1.5rem;
}

/* Alleen koppen met knoppen ernaast worden een rij. Dat is een aparte variant, want
   niet elke pagina heeft zijn titel in een omhullende div staan; zonder die div zouden
   de titel en de ondertitel naast elkaar belanden. */
.pagehead--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* Op een smal scherm gaan de knoppen onder de tekst staan, over de volle breedte. */
@media (max-width: 34rem) {
    .pagehead--split .pagehead__actions {
        flex-basis: 100%;
    }
}

.pagehead__title {
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.pagehead__lead {
    color: var(--ink-soft);
}

.datalist__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
}

.datalist__row:last-child {
    border-bottom: 0;
}

.datalist dt {
    color: var(--ink-soft);
}

.datalist dd {
    font-weight: 700;
    text-align: right;
}

.badge {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.badge--ok {
    background: var(--ok-bg);
    color: var(--ok);
}

.events {
    display: grid;
    gap: .5rem;
}

.events__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .75rem;
    padding: .6rem .8rem;
    border-radius: var(--radius-md);
    background: var(--bg);
    font-size: .875rem;
}

.events__what {
    font-weight: 700;
}

.events__when {
    color: var(--ink-soft);
    text-align: right;
}

.events__where {
    grid-column: 1 / -1;
    color: var(--ink-faint);
    font-size: .8rem;
}

.footnote {
    margin-top: 2rem;
    text-align: center;
    font-size: .8rem;
    color: var(--ink-faint);
}

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

    .avatar__name {
        display: block;
    }

    .hero__mascot {
        display: block;
    }

    .tiles {
        grid-template-columns: repeat(4, 1fr);
    }

    .card {
        padding: 1.75rem;
    }
}

@media (min-width: 62rem) {
    .topbar__inner {
        padding: .85rem 1.5rem;
        gap: 1.25rem;
    }

    .shell {
        padding: 2rem 1.5rem 4rem;
    }

    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .hero {
        margin-bottom: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .button:hover {
        transform: none;
    }
}

@media print {
    .topbar,
    .button,
    .card__actions,
    .footnote {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   Agenda
   ========================================================================== */

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

/* --- dagwidget ----------------------------------------------------------- */

.schedule__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.schedule__heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.2rem;
}

.schedule__icon {
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--brand-600);
    position: relative;
}

.schedule__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 20%;
    width: 2px;
    height: 34%;
    background: var(--brand-600);
    border-radius: 2px;
    transform-origin: bottom;
    transform: translateX(-50%) rotate(35deg);
}

.schedule__action {
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

.schedule__empty {
    padding: 1.5rem .5rem;
    text-align: center;
    color: var(--ink-faint);
    font-size: .95rem;
}

.daystrip {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.25rem;
}

.daystrip__arrow {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
}

.daystrip__arrow:hover {
    background: var(--bg);
    text-decoration: none;
}

.daystrip__list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .35rem;
}

.daypill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: .5rem .2rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
    line-height: 1.15;
}

.daypill:hover {
    text-decoration: none;
    background: var(--brand-100);
}

.daypill__number {
    font-size: 1.05rem;
    font-weight: 800;
}

.daypill__name {
    font-size: .7rem;
    color: var(--ink-soft);
}

.daypill--today {
    box-shadow: inset 0 0 0 2px var(--brand-100);
}

.daypill--active {
    background: #F7CE46;
}

.daypill--active:hover {
    background: #F3C42C;
}

.daypill--active .daypill__name {
    color: rgba(27, 18, 54, .7);
}

/* --- tijdlijn ------------------------------------------------------------ */

.timeline {
    display: grid;
    gap: .1rem;
}

.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: .75rem;
    padding-bottom: 1.1rem;
}

.timeline__item:last-child {
    padding-bottom: 0;
}

/* De stippellijn die de items verbindt. */
.timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: .75rem;
    top: 1.7rem;
    bottom: .2rem;
    border-left: 2px dashed var(--line);
}

.timeline__item--done:not(:last-child)::before {
    border-left-color: #BFE4CB;
}

.timeline__form {
    line-height: 0;
}

.timeline__check {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.timeline__mark {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--line);
    background: var(--surface);
    position: relative;
    transition: background .15s ease, box-shadow .15s ease;
}

.timeline__check:hover .timeline__mark {
    box-shadow: inset 0 0 0 2px var(--brand-500);
}

.timeline__item--done .timeline__mark {
    background: var(--ok);
    box-shadow: none;
}

.timeline__item--done .timeline__mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .3rem;
    height: .6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;

    /* Vanuit het midden gepositioneerd. De inkt van een vinkje zit in de hoek
       waar beide streken samenkomen, en die valt na het draaien onder het
       midden van het vakje; vandaar de -58% in plaats van -50%. */
    transform: translate(-50%, -58%) rotate(45deg);
}

.timeline__body {
    min-width: 0;
}

.timeline__time {
    font-size: .8rem;
    color: var(--ink-soft);
}

.timeline__title {
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.timeline__item--done .timeline__title {
    color: var(--ink-faint);
    text-decoration: line-through;
}

.timeline__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}

.tag {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.tag--sky   { background: var(--sky); }
.tag--mint  { background: var(--mint); }
.tag--cream { background: var(--cream); }
.tag--blush { background: var(--blush); }
.tag--lilac { background: var(--lilac); }

.tag--plain {
    background: var(--bg);
    color: var(--ink-soft);
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- agendapagina -------------------------------------------------------- */

.pagehead--calendar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.viewswitch {
    display: flex;
    gap: .3rem;
    background: var(--surface);
    padding: .25rem;
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}

.periodnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.roundbutton {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: var(--shadow-card);
    text-decoration: none;
}

.roundbutton:hover {
    text-decoration: none;
    background: var(--brand-100);
}

/* --- maandrooster -------------------------------------------------------- */

.calendar {
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.calendar__weekdays,
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .3rem;
}

.calendar__weekdays {
    margin-bottom: .4rem;
}

.calendar__weekdays li {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink-faint);
}

.calendar__cell {
    min-height: 5.5rem;
    padding: .3rem;
    border-radius: var(--radius-md);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    overflow: hidden;
}

.calendar__cell--other {
    opacity: .45;
}

.calendar__cell--today {
    box-shadow: inset 0 0 0 2px var(--brand-500);
}

.calendar__daylink {
    color: var(--ink);
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
    padding: .1rem .2rem;
}

.calendar__daylink:hover {
    text-decoration: underline;
}

.calendar__more {
    font-size: .7rem;
    color: var(--ink-soft);
    padding-left: .2rem;
}

.chipevent {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    padding: .15rem .4rem;
    border-radius: 8px;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
}

.chipevent:hover {
    text-decoration: none;
    filter: brightness(.96);
}

.chipevent--sky   { background: var(--sky); }
.chipevent--mint  { background: var(--mint); }
.chipevent--cream { background: var(--cream); }
.chipevent--blush { background: var(--blush); }
.chipevent--lilac { background: var(--lilac); }

.chipevent--done {
    opacity: .55;
    text-decoration: line-through;
}

.chipevent__time {
    font-weight: 800;
    flex: 0 0 auto;
}

.chipevent__title {
    /* Zonder min-width krimpt een flex-kind niet onder zijn inhoud en loopt de
       tekst buiten de kolom. */
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- weekweergave -------------------------------------------------------- */

.weekgrid {
    display: grid;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.weekday {
    padding: 1rem;
    min-width: 0;
    overflow: hidden;
}

.weekday--today {
    box-shadow: inset 0 0 0 2px var(--brand-500), var(--shadow-card);
}

.weekday__head {
    margin-bottom: .6rem;
}

.weekday__link {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    color: var(--ink);
    text-decoration: none;
}

.weekday__name {
    font-size: .8rem;
    color: var(--ink-soft);
    font-weight: 700;
}

.weekday__number {
    font-size: 1.15rem;
    font-weight: 800;
}

.weekday__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
}

.weekday__empty {
    color: var(--ink-faint);
}

/* --- formulier ----------------------------------------------------------- */

.card--form {
    margin-top: 1.25rem;
}

.fieldrow {
    display: grid;
    gap: 1.1rem;
}

.field--checkbox {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .95rem;
}

.field--checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--brand-600);
}

.field__optional {
    font-weight: 500;
    color: var(--ink-faint);
}

select.field__input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%;
    background-size: .35rem .35rem, .35rem .35rem;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

textarea.field__input {
    resize: vertical;
    min-height: 3.5rem;
}

.link--danger {
    color: var(--error);
}

@media (min-width: 40rem) {
    .fieldrow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .weekgrid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .5rem;
    }

    .weekday {
        padding: .75rem;
    }

    .calendar {
        padding: 1.25rem;
    }

    .calendar__cell {
        min-height: 6.5rem;
    }
}

@media (min-width: 62rem) {

}

.timeline__link {
    color: inherit;
}

.timeline__item--done .timeline__link {
    color: var(--ink-faint);
}

/* --- gekoppelde agenda's ------------------------------------------------- */



.timeline__mark--external {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--line);
    position: relative;
}

.timeline__mark--external::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--ink-faint);
    transform: translate(-50%, -50%);
}

.timeline__item--external .timeline__title {
    font-weight: 600;
}



.feedlist {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.feedlist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-md);
    background: var(--bg);
}

.feedlist__body {
    min-width: 0;
}

.feedlist__name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedlist__meta {
    font-size: .8rem;
    color: var(--ink-faint);
}

.feedlist__error {
    color: var(--error);
}

.disclosure__body p + p {
    margin-top: .5rem;
}

.card--form .stack + .form,
.card--form .feedlist + .form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

/* --- kleuren van gekoppelde agenda's ------------------------------------- */

:root {
    --kleur-grijs: #E8E8EF;
    --kleur-leisteen: #DEE5ED;
    --kleur-indigo: #D9DAF8;
    --kleur-paars: #E4DBFB;
    --kleur-magenta: #F5D5EE;
    --kleur-roze: #FBD8E2;
    --kleur-rood: #FBD3D3;
    --kleur-koraal: #FCD8CC;
    --kleur-oranje: #FBDCC6;
    --kleur-amber: #FBE0B4;
    --kleur-geel: #FAEBBE;
    --kleur-limoen: #E7F3C6;
    --kleur-groen: #D8EFD1;
    --kleur-mint: #CFF0DE;
    --kleur-turkoois: #C9EDE9;
    --kleur-hemelblauw: #CDE9F8;
    --kleur-blauw: #D6E6FB;
    --kleur-bruin: #EADFD2;
}

.tag--feed-grijs, .chipevent--feed-grijs, .swatch--feed-grijs,
.tag--cat-grijs, .chipevent--cat-grijs, .swatch--cat-grijs,
.pill--cat-grijs { background: var(--kleur-grijs); }
.tag--feed-leisteen, .chipevent--feed-leisteen, .swatch--feed-leisteen,
.tag--cat-leisteen, .chipevent--cat-leisteen, .swatch--cat-leisteen,
.pill--cat-leisteen { background: var(--kleur-leisteen); }
.tag--feed-indigo, .chipevent--feed-indigo, .swatch--feed-indigo,
.tag--cat-indigo, .chipevent--cat-indigo, .swatch--cat-indigo,
.pill--cat-indigo { background: var(--kleur-indigo); }
.tag--feed-paars, .chipevent--feed-paars, .swatch--feed-paars,
.tag--cat-paars, .chipevent--cat-paars, .swatch--cat-paars,
.pill--cat-paars { background: var(--kleur-paars); }
.tag--feed-magenta, .chipevent--feed-magenta, .swatch--feed-magenta,
.tag--cat-magenta, .chipevent--cat-magenta, .swatch--cat-magenta,
.pill--cat-magenta { background: var(--kleur-magenta); }
.tag--feed-roze, .chipevent--feed-roze, .swatch--feed-roze,
.tag--cat-roze, .chipevent--cat-roze, .swatch--cat-roze,
.pill--cat-roze { background: var(--kleur-roze); }
.tag--feed-rood, .chipevent--feed-rood, .swatch--feed-rood,
.tag--cat-rood, .chipevent--cat-rood, .swatch--cat-rood,
.pill--cat-rood { background: var(--kleur-rood); }
.tag--feed-koraal, .chipevent--feed-koraal, .swatch--feed-koraal,
.tag--cat-koraal, .chipevent--cat-koraal, .swatch--cat-koraal,
.pill--cat-koraal { background: var(--kleur-koraal); }
.tag--feed-oranje, .chipevent--feed-oranje, .swatch--feed-oranje,
.tag--cat-oranje, .chipevent--cat-oranje, .swatch--cat-oranje,
.pill--cat-oranje { background: var(--kleur-oranje); }
.tag--feed-amber, .chipevent--feed-amber, .swatch--feed-amber,
.tag--cat-amber, .chipevent--cat-amber, .swatch--cat-amber,
.pill--cat-amber { background: var(--kleur-amber); }
.tag--feed-geel, .chipevent--feed-geel, .swatch--feed-geel,
.tag--cat-geel, .chipevent--cat-geel, .swatch--cat-geel,
.pill--cat-geel { background: var(--kleur-geel); }
.tag--feed-limoen, .chipevent--feed-limoen, .swatch--feed-limoen,
.tag--cat-limoen, .chipevent--cat-limoen, .swatch--cat-limoen,
.pill--cat-limoen { background: var(--kleur-limoen); }
.tag--feed-groen, .chipevent--feed-groen, .swatch--feed-groen,
.tag--cat-groen, .chipevent--cat-groen, .swatch--cat-groen,
.pill--cat-groen { background: var(--kleur-groen); }
.tag--feed-mint, .chipevent--feed-mint, .swatch--feed-mint,
.tag--cat-mint, .chipevent--cat-mint, .swatch--cat-mint,
.pill--cat-mint { background: var(--kleur-mint); }
.tag--feed-turkoois, .chipevent--feed-turkoois, .swatch--feed-turkoois,
.tag--cat-turkoois, .chipevent--cat-turkoois, .swatch--cat-turkoois,
.pill--cat-turkoois { background: var(--kleur-turkoois); }
.tag--feed-hemelblauw, .chipevent--feed-hemelblauw, .swatch--feed-hemelblauw,
.tag--cat-hemelblauw, .chipevent--cat-hemelblauw, .swatch--cat-hemelblauw,
.pill--cat-hemelblauw { background: var(--kleur-hemelblauw); }
.tag--feed-blauw, .chipevent--feed-blauw, .swatch--feed-blauw,
.tag--cat-blauw, .chipevent--cat-blauw, .swatch--cat-blauw,
.pill--cat-blauw { background: var(--kleur-blauw); }
.tag--feed-bruin, .chipevent--feed-bruin, .swatch--feed-bruin,
.tag--cat-bruin, .chipevent--cat-bruin, .swatch--cat-bruin,
.pill--cat-bruin { background: var(--kleur-bruin); }

.tag[class*="tag--feed-"],
.tag[class*="tag--cat-"] {
    color: var(--ink);
}

/* Het bolletje waarmee je een agenda aan- of uitzet. */
.swatch {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    opacity: .35;
    transition: opacity .15s ease, box-shadow .15s ease;
}

.swatch--on {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(27, 18, 54, .12);
}

.swatch:hover {
    opacity: 1;
}

/* Een schuine streep zolang de agenda uit staat. */
.swatch:not(.swatch--on)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.1rem;
    height: 2px;
    background: var(--ink-faint);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.feedlist__toggle {
    line-height: 0;
}

.feedlist__item {
    align-items: flex-start;
    gap: .75rem;
}

.feedlist__item--hidden .feedlist__body {
    opacity: .55;
}

.feedlist__off {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.feedlist__edit {
    margin-left: auto;
    font-size: .875rem;
}

.feedlist__edit > summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

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

.form--compact {
    gap: .75rem;
    margin: .9rem 0;
    min-width: 12rem;
}

@media (min-width: 40rem) {
    .feedlist__item {
        align-items: center;
    }
}

/* --- plusknop en dialoog -------------------------------------------------- */

.fab {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 15;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    font-size: 2.1rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-lift);
    transition: transform .12s ease, background .15s ease;
}

.fab:hover {
    background: var(--brand-700);
    text-decoration: none;
    transform: translateY(-2px);
}

.fab span {
    margin-top: -.2rem;
}

.modal {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(32rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: visible;
    color: var(--ink);
}

.modal::backdrop {
    background: rgba(27, 18, 54, .45);
}

.modal__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(27, 18, 54, .28);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.modal__close {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
}

.modal__close:hover {
    background: var(--brand-100);
    color: var(--brand-700);
    text-decoration: none;
}

/* Zonder JavaScript valt de dialoog gewoon in de pagina. */
.modal[open]:not(:modal) {
    position: static;
    margin: 1.25rem auto;
    width: 100%;
}

@media (min-width: 62rem) {
    .fab {
        right: 2rem;
        bottom: 2rem;
    }
}

@media print {
    .fab,
    .modal {
        display: none !important;
    }
}

/* ==========================================================================
   Taken
   ========================================================================== */

.tasks {
    display: grid;
    gap: .5rem;
}

.tasks__item {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: .25rem .75rem;
    padding: .75rem;
    border-radius: var(--radius-md);
    background: var(--bg);
    align-items: start;
}

.tasks__form {
    line-height: 0;
}

.tasks__check {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.tasks__mark {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--line);
    background: var(--surface);
    position: relative;
    transition: background .15s ease, box-shadow .15s ease;
}

.tasks__check:hover .tasks__mark {
    box-shadow: inset 0 0 0 2px var(--brand-500);
}

.tasks__item--done .tasks__mark {
    background: var(--ok);
    box-shadow: none;
}

.tasks__item--done .tasks__mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .3rem;
    height: .6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -58%) rotate(45deg);
}

.tasks__body {
    min-width: 0;
}

.tasks__title {
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tasks__link {
    color: inherit;
}

.tasks__item--done .tasks__title {
    color: var(--ink-faint);
    text-decoration: line-through;
}

.tasks__notes {
    margin-top: .15rem;
    font-size: .875rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.tasks__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
}

.tasks__plan {
    grid-column: 2;
    justify-self: start;
    font-size: .8rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--brand-600);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--line);
}

.tasks__plan:hover {
    text-decoration: none;
    background: var(--brand-100);
}

/* Prioriteit als klein gekleurd label. */
.pip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .6rem .15rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.pip::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

.pip--prio-hoog    { background: #FCE2E2; color: #B22B2B; }
.pip--prio-normaal { background: #E6EDFB; color: #3C5BA8; }
.pip--prio-laag    { background: #ECECF2; color: var(--ink-soft); }

.tag--overdue { background: var(--error-bg); color: var(--error); }
.tag--today   { background: var(--cream);    color: var(--warn); }
.tag--planned { background: var(--brand-100); color: var(--brand-700); }

.card--muted {
    background: transparent;
    box-shadow: none;
    border: 1px dashed var(--line);
}

.card--muted .tasks__item {
    background: var(--surface);
}

/* ==========================================================================
   Menubalk onderaan (mobiel)
   ========================================================================== */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar__list {
    display: flex;
}

.tabbar__list > li {
    flex: 1 1 0;
    min-width: 0;
}

.tabbar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .25rem .55rem;
    color: var(--ink-faint);
    text-decoration: none;
    font-size: .7rem;
    font-weight: 700;
}

.tabbar__link:hover {
    text-decoration: none;
}

.tabbar__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.tabbar__link--active {
    color: var(--brand-600);
}

/* Ruimte onder de inhoud, zodat de balk niets afdekt. */
.page--app .shell {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* De plusknop gaat boven de balk zitten. */
.fab {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

/* Op een breed scherm staan de knoppen bovenin; de balk is dan overbodig. */
@media (min-width: 48rem) {
    .tabbar {
        display: none;
    }

    .page--app .shell {
        padding-bottom: 4rem;
    }

    .fab {
        bottom: 2rem;
    }
}

/* Op een smal scherm staan ze juist alleen onderaan. */
@media (max-width: 47.99rem) {
    .topbar .nav {
        display: none;
    }
}

@media print {
    .tabbar {
        display: none !important;
    }
}

.schedule__icon--tasks {
    border-radius: 8px;
}

.schedule__icon--tasks::after {
    left: 45%;
    top: 26%;
    height: 42%;
    width: 2px;
    transform: translateX(-50%) rotate(40deg);
}

/* --- filterknoppen op de takenpagina ------------------------------------- */

.filterrow {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.filterrow .pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink);
}

.filterrow .pill--active {
    background: var(--ink);
    color: #fff;
    box-shadow: none;
}

.pill--quiet {
    background: transparent;
    color: var(--ink-faint);
    box-shadow: inset 0 0 0 1px var(--line);
}

.pill__count {
    font-size: .75rem;
    font-weight: 800;
    opacity: .6;
}

/* --- kleurenkiezer -------------------------------------------------------- */

.colours {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.colours__grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .1rem;
}

/* Het keuzerondje zelf is onzichtbaar; het gekleurde vlakje ernaast is de knop. */
.colours__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.colours__swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(27, 18, 54, .1);
    transition: transform .12s ease, box-shadow .12s ease;
}

.colours__swatch:hover {
    transform: scale(1.12);
}

.colours__input:checked + .colours__swatch {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-600);
}

.colours__input:focus-visible + .colours__swatch {
    outline: 3px solid var(--brand-500);
    outline-offset: 3px;
}

/* Het bewerkformulier onder een categorie of agenda klapt over de volle breedte
   uit, in plaats van naast de naam te blijven hangen. */
.feedlist__item {
    flex-wrap: wrap;
}

.feedlist__edit[open] {
    flex: 1 0 100%;
    margin-left: 0;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}

.feedlist__edit[open] > summary {
    margin-bottom: .5rem;
}

/* De naam houdt de ruimte naast het bolletje vast, ook als het formulier
   eronder uitklapt. */
.feedlist__body {
    flex: 1 1 auto;
}

/* ==========================================================================
   Boodschappenlijst
   ========================================================================== */

.carticon {
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    color: var(--brand-600);
}

.shop {
    display: grid;
    gap: .35rem;
}

.shop__group + .shop__group {
    margin-top: 1.25rem;
}

.shop__store {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 800;
}

.shop__count {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink-faint);
}

.shop__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-md);
    background: var(--bg);
}

.shop__form {
    line-height: 0;
}

.shop__check {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.shop__mark {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px var(--line);
    background: var(--surface);
    position: relative;
    transition: background .15s ease, box-shadow .15s ease;
}

.shop__check:hover .shop__mark {
    box-shadow: inset 0 0 0 2px var(--brand-500);
}

.shop__item--checked .shop__mark {
    background: var(--ok);
    box-shadow: none;
}

.shop__item--checked .shop__mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .3rem;
    height: .6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -58%) rotate(45deg);
}

.shop__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.shop__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.shop__link {
    color: inherit;
}

.shop__item--checked .shop__name {
    color: var(--ink-faint);
    text-decoration: line-through;
}

.shop__quantity {
    flex: 0 0 auto;
    font-size: .875rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.shop__item--checked .shop__quantity {
    color: var(--ink-faint);
}

/* Kolom met kaarten onder elkaar, met dezelfde tussenruimte als het rooster. */
.stackcol {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 62rem) {
    .stackcol {
        gap: 1.25rem;
    }
}

/* ==========================================================================
   Startpagina: rooster van vier kolommen
   ==========================================================================
   Kolom 1  de dagwidget
   Kolom 2  vrij, voor wat er later bij komt
   Kolom 3  taken en boodschappen onder elkaar

   In de HTML staat de stapel vóór de vrije ruimte, zodat de volgorde op een smal
   scherm klopt: eerst je dag, dan je taken en lijst.
   ========================================================================== */

.grid--home {
    display: grid;
    gap: 1rem;
    align-items: start;
}

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

    .grid--home > .homeslot {
        grid-column: span 2;
    }
}

@media (min-width: 62rem) {
    .grid--home {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .grid--home > .schedule {
        grid-column: 1;
        grid-row: 1;
    }

    .grid--home > .stackcol {
        grid-column: 3;
        grid-row: 1;
    }

    .grid--home > .homeslot {
        grid-column: 2;
        grid-row: 1;
    }
}

.homeslot__hint {
    display: grid;
    place-content: center;
    text-align: center;
    min-height: 12rem;
    padding: 2rem 1.5rem;
}

.homeslot__title {
    font-weight: 800;
    color: var(--ink-soft);
}

.homeslot__text {
    margin-top: .3rem;
    font-size: .9rem;
    color: var(--ink-faint);
    max-width: 26ch;
}

/* In een smalle kolom mag de dagstrook wat compacter. */
.schedule {
    container-type: inline-size;
}

@container (max-width: 22rem) {
    .daystrip {
        gap: .15rem;
    }

    .daystrip__list {
        gap: .25rem;
    }

    .daystrip__arrow {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.1rem;
    }

    .daypill {
        padding: .45rem .1rem;
    }

    .daypill__number {
        font-size: .95rem;
    }

    .daypill__name {
        font-size: .65rem;
    }
}

/* Op een breed scherm mag de inhoud wat breder, zodat vier kolommen niet knijpen. */
@media (min-width: 84rem) {
    .shell,
    .topbar__inner {
        max-width: 82rem;
    }
}

/* ==========================================================================
   Dagrapport: water, calorieën en macro's
   ==========================================================================
   De meters zijn getekend in SVG. Dat is met opzet: het Content-Security-Policy
   staat geen inline `style=` toe, dus een percentage kan niet als stijl mee.
   In SVG zijn het gewone attributen.
   ========================================================================== */

.reporticon {
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    color: var(--brand-600);
}

.report__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

/* Eigen naam, want `.tile` is al bezet door de pasteltegels uit het
   ontwerpvoorbeeld; die zetten een lichte tekstkleur die hier niet past. */
.rtile--water,
.rtile--calories {
    position: relative;
    overflow: hidden;
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .9rem 1rem;
    border-radius: var(--radius-lg);
    color: var(--ink);
    text-decoration: none;
}

.rtile--water    { background: #EEF4FC; }
.rtile--calories { background: #FDF0F1; }

/* De tekst van de watertegel staat op het water zelf: donkerblauw, niet de
   standaard inktkleur, anders valt hij weg zodra de tegel vol raakt. */
.rtile--water .rtile__label,
.rtile--water .rtile__value strong {
    color: #12385F;
}

.rtile--water:hover,
.rtile--calories:hover {
    text-decoration: none;
    filter: brightness(.985);
}

/* Het water vult de tegel van onderaf. */
.rtile__water {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rtile__label,
.rtile__value {
    position: relative;
    z-index: 1;
}

.rtile__label {
    font-weight: 800;
    font-size: .95rem;
}

.rtile__value {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.rtile__value strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.rtile__goal {
    font-size: .78rem;
    color: var(--ink-soft);
}

.rtile--water .rtile__goal {
    color: #2E5479;
    font-weight: 600;
}

.rtile__gauge {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 8rem;
    margin: 0 auto;
}

/* --- macro's -------------------------------------------------------------- */

.macros {
    margin-top: .75rem;
    padding: .9rem 1rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.macros__title {
    font-size: .85rem;
    font-weight: 800;
    margin-bottom: .6rem;
}

.macros__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.macro {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.macro__ring {
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
}

.macro__track { stroke: #E4E4EE; }

.macro--fat     .macro__value { stroke: #8CC66B; }
.macro--protein .macro__value { stroke: #F0A54A; }
.macro--carbs   .macro__value { stroke: #8B7BE8; }

.macro__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.macro__label {
    font-size: .72rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.macro__amount {
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
}

.macro__goal {
    font-size: .7rem;
    font-weight: 600;
    color: var(--ink-faint);
}

/* --- de waterpagina ------------------------------------------------------- */

.waterbig {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.waterbig__glass {
    width: 5.5rem;
    height: 6.6rem;
    flex: 0 0 auto;
}

.waterbig__amount {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.waterbig__amount span {
    font-size: 1.1rem;
}

.waterbig__goal {
    margin-top: .3rem;
    color: var(--ink-soft);
    font-size: .9rem;
}

.quickadd {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.form--inline {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
}

.form--inline .field {
    flex: 1 1 auto;
}

/* Op een smalle telefoon staat de knop onder het veld in plaats van ernaast. */
@media (max-width: 30rem) {
    .form--inline {
        flex-direction: column;
        align-items: stretch;
    }
}

.waterlist {
    display: grid;
    gap: .35rem;
    margin-bottom: 1.5rem;
}

.waterlist__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-md);
    background: var(--bg);
    font-size: .9rem;
}

.waterlist__amount {
    font-weight: 700;
}

.waterlist__time {
    flex: 1 1 auto;
    color: var(--ink-faint);
}

/* --- staafjes van de afgelopen week -------------------------------------- */

.weekbar__title {
    margin-bottom: .6rem;
}

.weekbar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .4rem;
    align-items: end;
}

.weekbar__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.weekbar__meter {
    width: .9rem;
    height: 4rem;
}

.weekbar__label {
    font-size: .7rem;
    color: var(--ink-faint);
}

.roundbutton--off {
    opacity: .35;
    box-shadow: none;
    background: transparent;
}

/* Zes menu-items: iets kleinere bijschriften zodat ze op een telefoon passen. */
@media (max-width: 26rem) {
    .tabbar__label {
        font-size: .62rem;
    }

    .tabbar__link {
        padding-left: .1rem;
        padding-right: .1rem;
    }
}

/* ==========================================================================
   Vertrouwde apparaten: de tip op de startpagina en de lijst op /apparaat
   ========================================================================== */

.tip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--lilac);
}

.tip__title {
    margin: 0;
    font-weight: 800;
}

.tip__text {
    margin: .2rem 0 0;
    font-size: .9rem;
    color: var(--ink-soft);
}

.tip__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

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

.devices__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--bg);
}

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

.devices__name {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-weight: 700;
}

.devices__meta {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--ink-faint);
}

/* ==========================================================================
   Cijferklavier voor de pincode
   ==========================================================================
   Naar het voorbeeld: bolletjes die vollopen en een klavier van drie kolommen.
   In de opmaak van de app zelf, dus licht en rond in plaats van donker.
   ========================================================================== */

.pinpad {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pinpad__dots {
    display: flex;
    gap: .85rem;
    margin: .25rem 0 .75rem;
}

.pinpad__dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    border: 2px solid var(--brand-500);
    background: transparent;
    transition: background .12s ease, transform .12s ease;
}

.pinpad__dot--vol {
    background: var(--brand-600);
    border-color: var(--brand-600);
    transform: scale(1.15);
}

.pinpad__status {
    margin: 0 0 1.25rem;
    font-size: .85rem;
    color: var(--ink-soft);
    text-align: center;
}

.pinpad__keys {
    display: grid;
    grid-template-columns: repeat(3, 4.5rem);
    gap: .85rem;
    justify-content: center;
}

.pinpad__key {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--ink);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    /* Een dubbeltik op een telefoon mag niet inzoomen. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s ease, transform .08s ease;
}

.pinpad__key:hover {
    background: #E3DBFD;
}

.pinpad__key:active {
    background: var(--brand-500);
    color: #fff;
    transform: scale(.94);
}

.pinpad__key:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 3px;
}

.pinpad__key--leeg {
    background: transparent;
    cursor: default;
}

.pinpad__key--wis {
    background: var(--bg);
    color: var(--ink-soft);
}

.pinpad__key--wis svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Op een kleine telefoon iets krapper, zodat het klavier binnen de kaart blijft. */
@media (max-width: 22rem) {
    .pinpad__keys {
        grid-template-columns: repeat(3, 3.9rem);
        gap: .7rem;
    }

    .pinpad__key {
        width: 3.9rem;
        height: 3.9rem;
        font-size: 1.3rem;
    }
}

/* Compacte variant van het inlogscherm, voor de pincode: alleen de merkbalk, zodat
   het klavier op een telefoon meteen in beeld staat. */
.page--auth-compact .auth__brand {
    padding-bottom: 3rem;
}

@media (min-width: 60rem) {
    .page--auth-compact .auth__brand {
        display: flex;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Producten en maaltijden
   ========================================================================== */

.foodlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.foodlist__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    border-radius: var(--radius-md);
    background: var(--bg);
}

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

.foodlist__name {
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
}

.foodlist__brand {
    margin-left: .4rem;
    font-weight: 600;
    font-size: .8rem;
    color: var(--ink-faint);
}

.foodlist__meta {
    margin: .1rem 0 0;
    font-size: .78rem;
    color: var(--ink-soft);
}

.foodlist__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* --- een maaltijd --------------------------------------------------------- */

.meal {
    margin-top: 1rem;
}

.meal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.meal__time {
    margin-left: .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.meal__totals {
    margin: .2rem 0 0;
    font-size: .82rem;
    color: var(--ink-soft);
}

.meal__add {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

/* Het hoeveelheidsveld hoeft niet zo breed als de productkeuze. */
.field--narrow {
    flex: 0 1 7rem;
}

/* Suikers, vezels en zout onder de macroringen: een regel, geen ring, want er hoort
   geen doel bij om tegen af te zetten. */
.macros__extra {
    margin: .75rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--ink-soft);
}

/* ==========================================================================
   Recepten
   ========================================================================== */

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

.recipe {
    margin-top: 1rem;
}

.recipe__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .9rem;
}

.recipe__photo {
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--bg);
}

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

.recipe__meta {
    margin: .2rem 0 0;
    font-size: .82rem;
    color: var(--ink-soft);
}

.recipe__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.recipe__add {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.recipe__steps {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.recipe__steps summary {
    font-weight: 700;
    cursor: pointer;
}

.recipe__stepstext {
    margin: .6rem 0 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.link--muted {
    color: var(--ink-faint);
}

/* Een bestandskiezer is geen tekstveld; die hoort geen kader en binnenmarge te
   krijgen, anders staat de knop van de browser in een vakje. */
.field__input[type="file"] {
    padding: .5rem 0;
    background: transparent;
    border: 0;
}

/* Op een smal scherm de foto en de knoppen onder elkaar. */
@media (max-width: 32rem) {
    .recipe__head {
        flex-wrap: wrap;
    }

    .recipe__actions {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Receptkaarten en inklapbare maaltijden
   ========================================================================== */

.cards {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.rcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.rcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    text-decoration: none;
}

.rcard__photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--bg);
}

/* Zonder foto een rustig vlak met een pannetje, zodat de kaarten even hoog blijven. */
.rcard__photo--leeg {
    display: grid;
    place-items: center;
    background: var(--lilac);
    color: var(--brand-500);
}

.rcard__photo--leeg svg {
    width: 2.5rem;
    height: 2.5rem;
}

.rcard__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem 1.1rem;
}

.rcard__title {
    font-weight: 800;
    line-height: 1.3;
}

.rcard__meta {
    font-size: .8rem;
    color: var(--ink-soft);
}

.rcard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem;
}

.rcard__chips .chip,
.recipe__chips .chip {
    font-size: .72rem;
    padding: .2rem .6rem;
}

.recipe__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .4rem;
}

.card--filter {
    margin-bottom: 0;
}

.pagehead__back {
    margin: 0 0 .3rem;
    font-size: .85rem;
}

/* --- inklapbare maaltijd -------------------------------------------------- */

.meal__fold summary {
    cursor: pointer;
    list-style: none;
}

/* Het standaard driehoekje weg; we zetten er zelf een neer die meedraait. */
.meal__fold summary::-webkit-details-marker {
    display: none;
}

.meal__summary {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-right: 1.75rem;
    position: relative;
}

.meal__summary::after {
    content: "";
    position: absolute;
    right: .25rem;
    top: .45rem;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.meal__fold[open] .meal__summary::after {
    transform: rotate(-135deg);
}

.meal__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.meal__body {
    margin-top: 1rem;
}

.meal__remove {
    margin-top: .9rem;
    text-align: right;
}

/* ==========================================================================
   Categorieën bij een recept, en het gebruiken ervan
   ========================================================================== */

.tagpick {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.tagpick__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--bg);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.tagpick__item input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand-600);
}

/* Aangevinkt kleurt het hele pilletje mee, zodat je in één oogopslag ziet wat aanstaat.
   :has() wordt door alle huidige browsers ondersteund; kan een browser het niet, dan
   blijft het vinkje gewoon zichtbaar en klopt het nog steeds. */
.tagpick__item:has(input:checked) {
    background: var(--brand-100);
    color: var(--brand-700);
}

.usegrid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .usegrid {
        grid-template-columns: 1fr auto;
        align-items: end;
    }
}

/* Een voorbeeldregel uit een CSV is één lang woord zonder spaties. Zonder deze regel
   duwt zo'n regel de hele pagina open op een telefoon: er is geen plek om af te breken.
   Daarom mag hij hier wél midden in breken, en schuift hij desnoods binnen zijn eigen
   kader in plaats van dat de pagina meeschuift. */
code {
    overflow-wrap: anywhere;
}

.codeblock {
    display: block;
    overflow-x: auto;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: .8rem;
    white-space: pre;
    overflow-wrap: normal;
}


/* Bladeren door de productenlijst. Twee links naast elkaar, met genoeg ruimte eromheen
   om ze met een duim te raken. */
.pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Toevoegscherm: zoeken, aantikken, hoeveelheid (public/toevoegen.php)
   ========================================================================== */

/* Zoekveld en knop naast elkaar, met het veld zo breed als het kan. Zonder JavaScript
   is die knop je manier om te zoeken; met JavaScript vult de lijst zich vanzelf. */
.addsearch {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
}

.addsearch .field {
    flex: 1 1 auto;
    min-width: 0;
}

/* De trefferlijst. Eén regel per product, met de + rechts binnen duimbereik. */
.hits {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.hits__item {
    border-top: 1px solid var(--line);
    padding: .7rem 0;
}

.hits__item:first-child {
    border-top: 0;
}

/* Aangetikt product: iets opgelicht, zodat duidelijk is waar het veld bij hoort. */
.hits__item--open {
    background: var(--brand-100);
    border-radius: var(--radius-sm);
    padding: .7rem;
}

.hits__row {
    display: flex;
    align-items: center;
    gap: .8rem;
}

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

.hits__name {
    margin: 0;
    font-weight: 600;
    /* Een lange productnaam mag de + niet wegduwen. */
    overflow-wrap: anywhere;
}

.hits__meta {
    margin: .15rem 0 0;
    font-size: .85rem;
    color: var(--ink-soft);
}

/* Rond, groot genoeg om met een duim te raken (44 px is de ondergrens die Apple
   aanhoudt), en het is een link omdat aantikken nog niets opslaat. */
.hits__add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--brand-600);
    border-radius: 50%;
    color: var(--brand-600);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
}

.hits__add:hover,
.hits__add:focus-visible {
    background: var(--brand-600);
    color: #fff;
}

.hits__form {
    margin-top: .7rem;
    align-items: flex-end;
}

/* Het lijstje onderaan: wat er klaarstaat, en de enige plek waar het opgeslagen wordt. */
.basket__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-size: .85rem;
}

.basket__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.button--wide {
    min-width: 10rem;
}

/* ==========================================================================
   Gewichtsgrafiek (report.php, tabblad Gewicht)
   ========================================================================== */

/* De lijn wordt op de server uitgerekend en staat als attribuut in de SVG; het CSP
   staat geen inline stijl of script toe. Hier alleen de omlijsting. */
.weightchart {
    margin: 1rem 0 0;
}

/* Vaste hoogte: de SVG rekt met preserveAspectRatio="none" mee in de breedte, dus
   zonder hoogte hier zou hij op een telefoon platgedrukt worden. */
.weightchart__svg {
    display: block;
    width: 100%;
    height: 170px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: .6rem 0;
}

/* De uiterste waarden erbij, anders zegt een stijgende lijn niets over hoeveel. */
.weightchart__scale {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--ink-faint);
}

/* Het bereik in kilo's hoort bij de verticale as, dus midden tussen de twee datums in
   en niet aan een kant waar het als begin- of eindwaarde te lezen valt. */
.weightchart__range {
    text-align: center;
}