:root {
    color-scheme: dark;
    --bg: #12100d;
    --panel: #1b1814;
    --panel-2: #241f19;
    --fg: #f2ece1;
    --muted: #a49883;
    --line: #302a22;
    --goud: #d9a441;
}

* { box-sizing: border-box; }

/* [hidden] verliest van elke regel die display zet (.btn is inline-flex), en
   dan staat de push-knop er terwijl push uit staat en "morgen" terwijl je al op
   vandaag zit. Deze regel houdt het attribuut de baas. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: 640px; margin: 0 auto;
    padding: 0 calc(1rem + env(safe-area-inset-right)) 0 calc(1rem + env(safe-area-inset-left));
}

/* masthead — met de black-translucent iOS-statusbalk tekent de pagina onder de
   notch door, dus de safe-area-inset erbovenop. */
.masthead {
    padding: calc(1.25rem + env(safe-area-inset-top)) 0 .9rem;
    border-bottom: 1px solid var(--line);
}
.kicker { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); }
.meta { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .85rem; color: var(--muted); }
#datum { margin-right: auto; }

.btn {
    appearance: none; border: 1px solid var(--line); background: var(--panel-2);
    color: var(--fg); border-radius: 999px; padding: .4rem .85rem; font-size: .85rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
    text-decoration: none;
}
.btn:hover { border-color: #463c2e; }
.btn:disabled { opacity: .5; cursor: default; }
.btn--bell-on { border-color: var(--goud); color: var(--goud); }

main { padding: 1.5rem 0 3rem; }

/* de kaart van vandaag */
.kaart { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.25rem 1.1rem; }

.spreuk {
    margin: 0;
    font-size: clamp(1.45rem, 6vw, 2rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.015em;
    text-wrap: balance;
}
/* Het aanhalingsteken is decoratie, geen leesbare tekst — vandaar aria-hidden
   via content, niet in de markup. */
.spreuk::before {
    content: '\201C';
    display: block; color: var(--goud); opacity: .55;
    font: 700 3rem/0.6 Georgia, serif; margin-bottom: .35rem;
}
.soort { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); text-transform: lowercase; }

/* uitleg — altijd open: de betekenis is waar je voor komt */
.uitleg { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.betekenis { margin: 0; font-size: 1.05rem; }
.voorbeeld { margin: .6rem 0 0; color: var(--muted); font-style: italic; }
.herkomst { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: .65rem; }
.herkomst span { color: var(--goud); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; display: block; }

/* bronvermelding */
.bron { margin: 1rem 0 0; font-size: .78rem; color: var(--muted); }
.bron__label { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.bron a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); }
.bron a:hover { color: var(--goud); text-decoration-color: var(--goud); }

/* Navigatie in een vaste balk onderaan. Stond eerst onder de kaart, maar dan
   verschuift hij met de lengte van het spreekwoord mee en moet je elke dag
   opnieuw naar de knop zoeken. Nu staat hij altijd op dezelfde plek, binnen
   duimbereik. */
.nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; gap: .5rem; align-items: center;
    max-width: 640px; margin: 0 auto;
    padding: .7rem calc(1rem + env(safe-area-inset-right))
             calc(.7rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    background: rgba(18, 16, 13, .93);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
}
.nav .btn { font-size: .8rem; }
/* "vandaag" duwt zichzelf naar het midden en "morgen" daarmee naar rechts.
   Beide zijn zichtbaar of beide verborgen, dus dit kan niet scheef vallen. */
#naar-vandaag { margin-inline: auto; border-color: var(--goud); color: var(--goud); }
#naar-vandaag:hover { background: var(--panel-2); }

/* archief */
.archief { margin-top: 2.25rem; }
.archief h2 { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.archief[aria-busy="true"] .lijst { opacity: .4; }
.lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.item a {
    display: block; text-decoration: none; color: inherit;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem;
}
.item a:hover { border-color: #463c2e; }
.item__datum { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.item__tekst { display: block; margin-top: .2rem; font-weight: 600; }
.item__betekenis { display: block; margin-top: .15rem; font-size: .85rem; color: var(--muted); }
.item__bron { display: block; margin-top: .3rem; font-size: .68rem; color: var(--muted); opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.item--leeg { color: var(--muted); font-size: .9rem; padding: .75rem .9rem; }

/* Extra ruimte onderaan: de vaste navigatiebalk mag de colofon niet bedekken. */
.foot { margin-top: 2.5rem; padding: 1.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.foot p { margin: 0; }
.colofon { margin-top: .6rem; font-size: .74rem; line-height: 1.5; opacity: .85; }
.colofon a { color: var(--muted); }
.colofon a:hover { color: var(--goud); }