/* ══════════════════════════════════════════════════════════════════════════
   Bloome · papier.css
   De chique laag over de ledenkant (portaal, journal, agenda, tracker,
   aanmelden). Laadt ná style.css en ná de paginastylesheet, en werkt in twee
   stappen:

     1. Het palet wordt hertekend op `body.papier`. Omdat portal.css,
        journal.css en tools.css vrijwel alles via var(--...) opschrijven,
        kantelt daarmee in één keer de hele ledenkant naar beige, crème en
        gedempt goud, zonder die drie bestanden te hoeven herschrijven.
     2. Daaronder staan de onderdelen die méér nodig hadden dan een andere
        kleur: het notitieboek, de planner-agenda, de tracker, de groet en
        de belofte.

   Let op: de landingspagina (index.html) draagt deze klasse bewust NIET.
   Die houdt het bestaande pastelpalet, zodat de publieke kant onaangeraakt
   blijft; hier gelden de nieuwe tinten alleen binnen het lidmaatschap.
   ══════════════════════════════════════════════════════════════════════════ */

body.papier {
  /* Papier: warm ivoor in plaats van klinisch wit. */
  --paper: #FBF7F1;
  --paper-diep: #F4ECE0;
  --creme: #F7F0E4;
  --beige: #EDE2D2;
  --zand: #E2D5C1;

  /* Was fel roze en fel geel. Beide worden nu alleen nog als zachte warmte
     gebruikt, niet meer als kleurvlak dat om aandacht vraagt. */
  --paper-alt: #F2E5E1;
  --paper-yellow: #F6EEDC;

  --ink: #3F2B30;
  --ink-soft: #6B5D62; /* donkerder dan de #7A6A70 uit style.css: op beige haalde die maar 4,0:1 */
  --ink-zacht: #6F645D; /* was #8B7B72: haalde maar 3,8:1 op crème, zie het contrastblok onderaan */

  /* Gedempt roze in plaats van het felle #C15F82, plus een diepe volwassen
     accentkleur (bordeaux) voor de momenten die gewicht mogen hebben. */
  /* Was #B0687F. Die deed dubbel werk: tekstkleur (3,8:1 op crème) en vlak met
     witte tekst erop (3,3:1). Beide te licht. Deze haalt 6,4:1 als tekst en
     6,8:1 met wit erop, en is dezelfde kleur als --accent-tekst, dat daarmee
     een alias is geworden. Het zachte roze leeft verder in --accent-soft, dat
     alleen als vlak onder donkere tekst gebruikt wordt. */
  --accent: #8E4359;
  --accent-tekst: #8E4359;
  --accent-soft: #E0C4CC;
  --diep: #5E2B3C;
  --diep-zacht: #8B5567;

  --gold: #C9A961;      /* antiek goud, was het schreeuwende #EFCB63 */
  --gold-diep: #A8862F;
  --line: #E5DACA;
  --line-diep: #D3C4AE;
  --sage: #CBD6C6;
  --sky: #D3D9DF;
  --terracotta: #C08D7B;

  --radius-s: 3px;
  --schaduw-zacht: 0 2px 4px -2px rgba(63, 43, 48, 0.07), 0 12px 28px -18px rgba(63, 43, 48, 0.22);
  --schaduw-diep: 0 30px 60px -34px rgba(63, 43, 48, 0.42);

  /* Fijne papierkorrel. Twee lagen: een zachte ruis en een nauwelijks
     zichtbare vezelrichting. Bewust als data-URI, want de CSP staat externe
     bronnen niet toe (zie public/_headers). */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* De achtergrond van de ledenkant: één rustige warme laag in plaats van drie
   gekleurde vlekken. */
body.papier.warm-bg,
body.papier {
  background:
    radial-gradient(1200px 680px at 8% -8%, rgba(237, 226, 210, 0.75), transparent 60%),
    radial-gradient(900px 560px at 96% 4%, rgba(246, 238, 220, 0.7), transparent 58%),
    radial-gradient(1000px 760px at 50% 112%, rgba(226, 213, 193, 0.5), transparent 62%),
    linear-gradient(180deg, #FDFAF5 0%, #F7F1E7 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* De korrel als losse laag over de achtergrond. z-index -1, want een vaste
   laag op 0 komt in de gepositioneerde laag terecht en ligt daarmee óver de
   tekst van blokken die zelf geen position hebben. Op -1 blijft hij netjes
   tussen de achtergrond en de inhoud in. */
body.papier::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--korrel);
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* ---------- Typografie: de serif draagt meer ---------- */

body.papier h1,
body.papier h2,
body.papier h3,
body.papier .page-title,
body.papier .month-title,
body.papier .planner-title,
body.papier .sectie-kop {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.008em;
}

body.papier .kicker,
body.papier .planner-eyebrow,
body.papier .held-badge {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-zacht);
}
body.papier .kicker::before { background: var(--zand); width: 26px; }

/* De zwevende blaadjes waren felroze stipjes. Gedempt en kleiner: sfeer, geen
   confetti. */
body.papier .blaadje,
body.papier .auth-blaadje { opacity: 0.35; filter: saturate(0.55); }

body.papier .zijquote {
  color: var(--ink-zacht);
  opacity: 0.5;
  letter-spacing: 0.18em;
  font-size: 0.6rem;
  text-transform: uppercase;
}

/* Knoppen en velden: rustiger randen, warmere vulling. */
body.papier .btn.ghost {
  border-color: var(--line-diep);
  color: var(--ink);
  background: rgba(251, 247, 241, 0.6);
}
body.papier .btn.ghost:hover { border-color: var(--diep-zacht); color: var(--diep); }

/* background-COLOR, niet de shorthand: `background: var(--paper)` wist ook
   background-image, en daarmee verdween de wereldbol plus het pijltje uit de
   taalkiezer op elke ledenpagina. */
body.papier input,
body.papier textarea,
body.papier select { background-color: var(--paper); color: var(--ink); }

body.papier .nav-btn {
  border-color: var(--line-diep);
  background: var(--paper);
  color: var(--ink);
}
body.papier .nav-btn:hover { border-color: var(--diep-zacht); background: var(--creme); }

/* ══════════════════════════════════════════════════════════════════════════
   1 · Het notitieboek (journal.html)
   Twee pagina's naast elkaar met een zichtbare vouw en een ringband in het
   midden; op mobiel gestapeld met de ringen bovenaan. De ringen zijn CSS,
   geen plaatje, zodat ze meeschalen en niets extra's inladen.
   ══════════════════════════════════════════════════════════════════════════ */

.boek-blok { position: relative; margin: 0 0 3.4rem; }

.boek {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 58px 1fr;
  border-radius: 4px 14px 14px 4px;
  background:
    linear-gradient(90deg, rgba(178, 155, 124, 0.16) 0%, transparent 6%),
    var(--creme);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    var(--schaduw-diep);
  isolation: isolate;
}

/* De stapel bladen eronder: drie dunne randjes die net onder het boek
   uitsteken. Dat leest als een echt boek in plaats van als één vel. */
.boek::before,
.boek::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -5px;
  height: 12px;
  border-radius: 0 0 12px 12px;
  background: var(--beige);
  box-shadow: 0 6px 12px -8px rgba(63, 43, 48, 0.5);
  z-index: -1;
}
.boek::after { left: 18px; right: 18px; bottom: -10px; background: var(--zand); }

.boek-blad {
  position: relative;
  padding: 2.4rem 2.3rem 2.6rem;
  /* De korrel moet mengen met de kleur van het blad zelf. background-blend-mode
     mengt de background-image met de background-COLOR van hetzelfde element:
     zonder die kleur blijft de ruis als grijze waas bovenop liggen. */
  background-color: var(--creme);
  background-image: var(--korrel);
  background-blend-mode: multiply;
  min-width: 0;
}
.boek-blad.links { border-radius: 4px 0 0 4px; }
.boek-blad.rechts { border-radius: 0 14px 14px 0; }

/* De vouw: aan weerszijden van de ringband loopt het papier iets donkerder
   weg, zoals bij een opengeslagen boek. */
.boek-blad.links::after,
.boek-blad.rechts::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
}
.boek-blad.links::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(150, 126, 96, 0.16));
}
.boek-blad.rechts::after {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(150, 126, 96, 0.16));
}

/* De ringband. De gaten zitten in de middenkolom, de ringen lopen er
   overheen. */
.boek-band {
  position: relative;
  background: linear-gradient(90deg, rgba(150, 126, 96, 0.2), rgba(150, 126, 96, 0.07) 45%, rgba(150, 126, 96, 0.2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 2.2rem 0;
}
.boek-ring {
  width: 34px;
  height: 15px;
  border-radius: 99px;
  /* Metaal: lichte kant boven, donkere onderkant, met een gat in het midden. */
  background: linear-gradient(180deg, #FDFBF7 0%, #D9CDBB 42%, #A8977F 62%, #EFE7DA 100%);
  box-shadow:
    0 1px 2px rgba(63, 43, 48, 0.35),
    0 0 0 1px rgba(120, 100, 78, 0.22) inset;
  position: relative;
}
.boek-ring::after {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border-radius: 99px;
  background: rgba(120, 100, 78, 0.28);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Het lint: hangt over de bovenrand het boek uit en springt naar vandaag. */
.boek-lint {
  position: absolute;
  top: -14px;
  right: 46px;
  width: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 6px 10px rgba(63, 43, 48, 0.3));
  transition: transform 0.25s ease;
}
.boek-lint:hover { transform: translateY(3px); }
.boek-lint .lint-band {
  width: 30px;
  height: 96px;
  background: linear-gradient(180deg, var(--diep) 0%, #7A3A4C 55%, var(--diep) 100%);
  /* De klassieke inkeping onderaan een bladwijzerlint. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.boek-lint .lint-label {
  margin-top: 0.35rem;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  white-space: nowrap;
}
.boek-lint[hidden] { display: none; }

@media (max-width: 860px) {
  .boek { grid-template-columns: 1fr; border-radius: 14px; }
  .boek::before, .boek::after { display: none; }
  .boek-band {
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0.7rem 1.4rem;
    order: -1;
    border-radius: 14px 14px 0 0;
  }
  .boek-ring { width: 15px; height: 30px; background: linear-gradient(90deg, #FDFBF7 0%, #D9CDBB 42%, #A8977F 62%, #EFE7DA 100%); }
  .boek-ring::after { inset: 6px 4px; }
  .boek-blad { padding: 1.8rem 1.4rem 2rem; border-radius: 0; }
  .boek-blad.links::after, .boek-blad.rechts::after { display: none; }
  .boek-blad.links { border-bottom: 1px solid var(--line-diep); }
  .boek-lint { right: 22px; top: -10px; }
  .boek-lint .lint-band { height: 68px; }
  .blad-titel { font-size: 1.6rem; }
  .blad-datum .bd-dag { font-size: 2rem; }
}

/* De kop van de dagpagina */
.blad-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-diep);
}
.blad-datum { text-align: right; flex-shrink: 0; }
.blad-datum .bd-dag {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--diep);
}
.blad-datum .bd-rest {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  margin-top: 0.3rem;
}
.blad-titel {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.9rem;
  font-weight: 400;
  margin: 0.15rem 0 0;
  color: var(--ink);
}

/* De prompts zelf: sierlijke serif, zoals een voorgedrukt journal. */
body.papier .field-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 0.75rem;
}
body.papier .fi svg { opacity: 0.75; }

/* Schrijfregels als in een echt notitieboek: een fijne lijn onder elke regel
   die doorloopt tot de rand van de pagina. */
body.papier .lines li::before {
  color: var(--zand);
  font-family: 'Playfair Display', serif;
  font-size: 0.8rem;
}
body.papier .lines input {
  border-bottom: 1px solid var(--line-diep);
  background: transparent;
  font-size: 0.95rem;
  color: var(--ink);
  padding-bottom: 0.3rem;
}
body.papier .lines input:focus {
  border-bottom-color: var(--diep-zacht);
  background: linear-gradient(180deg, transparent 70%, rgba(201, 169, 97, 0.14));
}

body.papier .checkin { grid-template-columns: 1fr; gap: 1rem; }
body.papier .box-label {
  color: var(--ink-zacht);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.6rem;
}
body.papier .checkin-box textarea,
body.papier .review-area {
  border: 1px solid var(--line-diep);
  border-radius: 3px;
  background: rgba(255, 253, 249, 0.7);
  font-size: 0.9rem;
  line-height: 1.65;
}
body.papier .checkin-box textarea:focus,
body.papier .review-area:focus {
  border-color: var(--diep-zacht);
  background: #FFFDF9;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
}

/* Stemming en dagcijfer: gedempte cirkels in plaats van felgekleurde
   emoji-bollen. */
body.papier .mood-btn {
  border: 1px solid var(--line-diep);
  background: rgba(255, 253, 249, 0.65);
  border-radius: 50%;
  width: 44px;
  height: 44px;
}
body.papier .mood-btn.selected {
  border-color: var(--diep);
  background: var(--paper-alt);
  box-shadow: 0 0 0 3px rgba(94, 43, 60, 0.1);
}
/* Lege ster is een open glyph in een middentoon (3,4:1, ruim boven de 3:1 die
   voor een bedieningselement geldt); gevulde ster in diep goud. --zand haalde
   maar 1,35:1 en was daarmee vrijwel onzichtbaar. */
body.papier .star-btn { color: #96846B; font-size: 1.5rem; }
body.papier .star-btn.on { color: var(--gold-diep); }

body.papier .save-state {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
body.papier .save-state.saving { color: var(--accent-tekst); }

/* De weekcontext onder de datum */
.blad-context {
  font-size: 0.76rem;
  color: var(--ink-zacht);
  margin: -0.9rem 0 1.6rem;
  line-height: 1.6;
}
.blad-context strong { color: var(--ink); font-weight: 600; }

/* Terugkerende merkzin onderaan de rechterpagina */
.blad-mantra {
  margin: 2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-diep);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-zacht);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · De vier weken als compacte voortgangsstrip
   Was: vier felgekleurde kaarten die je eerst moest passeren.
   Nu: één rustige balk met vier segmenten, onder het journal.
   ══════════════════════════════════════════════════════════════════════════ */

.weekstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-diep);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--schaduw-zacht);
}
@media (max-width: 720px) { .weekstrip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .weekstrip { grid-template-columns: 1fr; } }

.ws-fase {
  position: relative;
  padding: 1.1rem 1.15rem 1.2rem;
  border-right: 1px solid var(--line);
  background: var(--paper);
  transition: background 0.3s ease;
}
.ws-fase:last-child { border-right: 0; }
@media (max-width: 720px) {
  .ws-fase:nth-child(2n) { border-right: 0; }
  .ws-fase:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 430px) {
  .ws-fase { border-right: 0; border-bottom: 1px solid var(--line); }
  .ws-fase:last-child { border-bottom: 0; }
}
.ws-fase.nu { background: linear-gradient(180deg, var(--creme), var(--paper)); }
.ws-fase.nu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--wk-accent, var(--diep));
}
.ws-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  display: block;
}
.ws-titel {
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  font-weight: 500;
  margin: 0.3rem 0 0.15rem;
  color: var(--wk-accent, var(--ink));
}
.ws-sub { font-size: 0.74rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 0.7rem; }
.ws-balk {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.ws-balk i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--wk-accent, var(--diep));
  transition: width 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ws-tel {
  font-size: 0.62rem;
  color: var(--ink-zacht);
  font-variant-numeric: tabular-nums;
  margin: 0.4rem 0 0;
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · De maandkalender (dagvakjes) · rustiger
   ══════════════════════════════════════════════════════════════════════════ */

body.papier .day-box {
  border: 1px solid var(--line-diep);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: none;
}
body.papier .day-box:hover,
body.papier .day-box:focus-visible {
  border-color: var(--wk-accent, var(--diep-zacht));
  background: var(--creme);
  transform: translateY(-2px);
  box-shadow: var(--schaduw-zacht);
}
body.papier .day-box.is-done {
  background: linear-gradient(180deg, var(--creme), var(--paper));
  border-color: color-mix(in srgb, var(--dag-accent) 42%, var(--line-diep));
}
body.papier .day-box.is-done .d-number { color: var(--dag-accent); }
body.papier .day-box .sparkle { color: var(--dag-accent); opacity: 0.7; }
body.papier .day-box.is-today {
  border-color: var(--diep);
  box-shadow: 0 0 0 2px rgba(94, 43, 60, 0.12);
}
body.papier .day-box.is-actief {
  border-color: var(--diep);
  background: var(--beige);
  box-shadow: 0 0 0 2px rgba(94, 43, 60, 0.18);
}
body.papier .day-box.is-last { background: linear-gradient(160deg, var(--beige), var(--paper)); }
body.papier .day-box.is-last.is-done { background: linear-gradient(160deg, var(--zand), var(--creme)); }
body.papier .day-box .d-number { font-size: 1.05rem; }

body.papier .week-group-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
body.papier .wp-bar { background: var(--line); }
body.papier .wp-bar i { background: var(--wk-accent, var(--diep)); }
body.papier .mv-balk { background: var(--line); }
body.papier .mv-balk i { background: linear-gradient(90deg, var(--gold), var(--diep)); }

/* ══════════════════════════════════════════════════════════════════════════
   4 · De weekagenda als papieren planner
   Weg met het spreadsheet-raster: geen kader om elke cel, maar rustige
   horizontale linialen, een verfijnde kolomscheiding en ruime typografie.
   ══════════════════════════════════════════════════════════════════════════ */

body.papier .panel {
  border: 1px solid var(--line-diep);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--schaduw-zacht);
  overflow: hidden;
}
body.papier .panel-head {
  background: linear-gradient(180deg, var(--creme), var(--paper));
  border-bottom: 1px solid var(--line-diep);
  padding: 1.3rem 1.5rem;
}
body.papier .panel-head h2 { font-size: 1.22rem; font-weight: 500; }
body.papier .panel-head p { font-size: 0.8rem; color: var(--ink-soft); }

body.papier .agenda-grid th,
body.papier .agenda-grid td { border: 0; }

body.papier .agenda-grid thead th {
  background: var(--paper);
  border-bottom: 1px solid var(--line-diep);
  padding: 0.85rem 0.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
body.papier .agenda-grid thead th + th { border-left: 1px solid var(--line); }
body.papier .agenda-grid thead th .th-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
body.papier .agenda-grid thead th.is-today {
  background: var(--creme);
  color: var(--diep);
  box-shadow: inset 0 -2px 0 var(--diep);
}

/* Het uur staat in de marge, als in een papieren planner. */
body.papier .agenda-grid .hour-cell {
  background: transparent;
  border-right: 1px solid var(--line-diep);
  font-family: 'Playfair Display', serif;
  font-size: 0.76rem;
  color: var(--ink-zacht);
  font-variant-numeric: tabular-nums;
  width: 62px;
  padding: 0 0.7rem 0 0;
  text-align: right;
  vertical-align: top;
  padding-top: 0.4rem;
}
body.papier .agenda-grid tbody td + td { border-left: 1px solid var(--line); }
body.papier .agenda-grid tbody tr td { border-bottom: 1px solid var(--line); }
/* Elk uur één fijne liniaal, en om en om een nauwelijks zichtbare warme band.
   Dat geeft het ritme van een papieren planner zonder gekleurde blokken. */
body.papier .agenda-grid tbody tr:nth-child(even) td { background: rgba(247, 240, 228, 0.5); }
body.papier .agenda-grid tbody tr:last-child td { border-bottom: 0; }

body.papier .agenda-grid input.slot {
  background: transparent;
  font-size: 0.84rem;
  color: var(--ink);
  padding: 0.5rem 0.6rem;
}
body.papier .agenda-grid tr:nth-child(even) input.slot { background: transparent; }
body.papier .agenda-grid input.slot:focus,
body.papier .agenda-grid tr:nth-child(even) input.slot:focus {
  outline: none;
  background: var(--creme);
  box-shadow: inset 2px 0 0 var(--diep);
}
body.papier .agenda-grid input.slot.gevuld {
  background: linear-gradient(90deg, rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0.05));
  box-shadow: inset 2px 0 0 var(--gold);
  color: var(--ink);
}
body.papier .agenda-grid td.is-today-col { background: rgba(247, 240, 228, 0.55); }

/* To-do's per dag: kaartjes met een rustige kop in plaats van kleurblokken. */
body.papier .todo-day {
  border: 1px solid var(--line-diep);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
body.papier .todo-day:hover { border-color: var(--zand); box-shadow: var(--schaduw-zacht); transform: none; }
body.papier .todo-day.is-vandaag {
  border-color: var(--diep-zacht);
  background: linear-gradient(180deg, var(--creme), var(--paper));
}
body.papier .todo-day h3 {
  font-family: 'Playfair Display', serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
body.papier .todo-day.is-vandaag h3 { color: var(--diep); }
body.papier .todo-line input[type="checkbox"] { accent-color: var(--diep); }
body.papier .todo-line input[type="text"] { border-bottom-color: var(--line); font-size: 0.84rem; }
body.papier .todo-line input[type="text"]:focus { border-bottom-color: var(--diep-zacht); }
body.papier .todo-add { border: 1px dashed var(--line-diep); border-radius: 3px; color: var(--ink-zacht); }
body.papier .todo-add:hover { border-color: var(--diep-zacht); background: var(--creme); color: var(--diep); }

body.papier .reminder-illu { color: var(--diep-zacht); background: var(--creme); border: 1px solid var(--line-diep); }
body.papier .reminder-bel { background: var(--gold); color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════════
   5 · Habit & mood tracker
   Zelfde papieren logica: linialen in plaats van kaders, en vinkjes die
   leesbaar zijn zonder te schreeuwen.
   ══════════════════════════════════════════════════════════════════════════ */

body.papier .habit-grid th,
body.papier .habit-grid td { border-bottom: 1px solid var(--line); padding: 0.7rem 0.6rem; }
body.papier .habit-grid tbody tr:nth-child(even) { background: transparent; }
body.papier .habit-grid tbody tr:hover { background: rgba(247, 240, 228, 0.6); }
body.papier .habit-grid thead th {
  background: var(--paper);
  border-bottom: 1px solid var(--line-diep);
  font-family: 'Playfair Display', serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
body.papier .habit-grid thead th .th-datum {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
body.papier .habit-grid thead th.is-today {
  color: var(--diep);
  background: var(--creme);
  box-shadow: inset 0 -2px 0 var(--diep);
}
body.papier .habit-grid td.is-today-col { background: rgba(247, 240, 228, 0.6); }

body.papier .habit-icon { background: var(--creme); border: 1px solid var(--line); color: var(--diep-zacht); }
body.papier .habit-name-input { font-size: 0.88rem; }
body.papier .habit-name-input:focus { border-bottom-color: var(--diep-zacht); }

body.papier .habit-check {
  border: 1px solid var(--line-diep);
  background: var(--paper);
  border-radius: 3px;
  width: 26px;
  height: 26px;
}
body.papier .habit-check:hover {
  border-color: var(--diep-zacht);
  box-shadow: 0 0 0 3px rgba(94, 43, 60, 0.08);
  transform: none;
}
body.papier .habit-check.on {
  background: var(--diep);
  border-color: var(--diep);
}
body.papier .habit-check.on::after { color: #FBF7F1; font-size: 0.72rem; font-weight: 500; }

body.papier .habit-count {
  border: 1px solid var(--line-diep);
  background: var(--paper);
  color: var(--ink-zacht);
  font-variant-numeric: tabular-nums;
}
body.papier .habit-count.vol { background: var(--gold); border-color: var(--gold-diep); color: var(--ink); }

body.papier .mood-day {
  border: 1px solid var(--line-diep);
  border-radius: 3px;
  background: var(--paper);
}
body.papier .mood-day:hover { border-color: var(--zand); background: var(--creme); }
body.papier .mood-day.is-vandaag {
  border-color: var(--diep-zacht);
  background: linear-gradient(180deg, var(--creme), var(--paper));
}
body.papier .mood-day .md-label {
  font-family: 'Playfair Display', serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body.papier .mood-day.is-vandaag .md-label { color: var(--diep); }
/* Vijf gezichtjes van 30px plus de tussenruimte passen net niet in een kolom
   van 160px, waardoor de vijfde naar een tweede regel viel. Iets kleiner en
   niet meer wrappen: één rij van vijf is de hele bedoeling van de rij. */
body.papier .mood-dots { flex-wrap: nowrap; gap: 0.22rem; }
body.papier .mood-pick.face {
  border: 1px solid var(--line-diep);
  background: var(--paper);
  width: 27px;
  height: 27px;
}
body.papier .mood-pick.face svg { width: 19px; height: 19px; }
body.papier .mood-pick.face.on {
  border-color: var(--diep);
  background: var(--creme);
  box-shadow: 0 0 0 3px rgba(94, 43, 60, 0.1);
  transform: scale(1.06);
}
body.papier .mood-legend { color: var(--ink-zacht); font-size: 0.7rem; }

/* ══════════════════════════════════════════════════════════════════════════
   6 · De persoonlijke groet in het portaal
   ══════════════════════════════════════════════════════════════════════════ */

.groet-blok {
  position: relative;
  margin: 0 0 2.6rem;
  padding: 2.2rem 2.4rem 2.1rem;
  border: 1px solid var(--line-diep);
  border-radius: 4px;
  background:
    radial-gradient(520px 260px at 88% -20%, rgba(201, 169, 97, 0.16), transparent 70%),
    linear-gradient(170deg, var(--creme) 0%, var(--paper) 62%);
  box-shadow: var(--schaduw-zacht);
  overflow: hidden;
}
@media (max-width: 640px) { .groet-blok { padding: 1.7rem 1.4rem 1.6rem; } }

/* Een enkele fijne lijn langs de linkerkant, als de rand van een briefpapier. */
.groet-blok::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

.groet-dagdeel {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.groet-dagdeel::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--zand);
}
.groet-titel {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.groet-titel em { font-style: italic; color: var(--diep); }
.groet-lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0.9rem 0 0;
}
.groet-dag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--line-diep);
  border-radius: 99px;
  background: var(--paper);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.groet-dag b { font-weight: 600; color: var(--ink); }
.groet-dag .gd-punt {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

body.papier .welkom-quote {
  border: 1px solid var(--line-diep);
  border-radius: 4px;
  background: linear-gradient(150deg, var(--creme), var(--paper));
}
body.papier .welkom-quote .wq-mark { color: var(--zand); opacity: 1; }
body.papier .streak-rij {
  background: var(--paper);
  border: 1px solid var(--line-diep);
  color: var(--ink);
  border-radius: 99px;
}
body.papier .streak-vlam { color: var(--gold-diep); }

/* De held-kaart en de creed: van felroze/hard bruin naar bordeaux en beige. */
body.papier .held-kaart {
  border: 1px solid var(--line-diep);
  border-radius: 4px;
  background: linear-gradient(150deg, var(--creme) 0%, var(--paper) 55%, var(--beige) 100%);
  box-shadow: var(--schaduw-zacht);
}
body.papier .held-kaart:hover { box-shadow: var(--schaduw-diep); }
body.papier .held-cta {
  background: var(--diep);
  color: #FBF7F1;
  border-radius: 99px;
}
body.papier .held-kaart:hover .held-cta { box-shadow: 0 18px 30px -16px rgba(94, 43, 60, 0.7); }
body.papier .creed {
  background: linear-gradient(150deg, #3F2B30, #2E1E22 60%, #3F2B30);
  border-radius: 4px;
}
body.papier .creed-nr { color: var(--gold); }

body.papier .tool-kaart {
  border: 1px solid var(--line-diep);
  border-radius: 4px;
  box-shadow: none;
}
body.papier .tool-kaart.agenda {
  background: linear-gradient(150deg, var(--creme) 0%, var(--paper) 100%);
  --tk-accent: #8A6E52;
}
body.papier .tool-kaart.tracker {
  background: linear-gradient(150deg, #F0F2EA 0%, var(--paper) 100%);
  --tk-accent: #6E7F69;
}
body.papier .tool-kaart:hover { box-shadow: var(--schaduw-zacht); border-color: var(--zand); }
body.papier .editie-kaart { border: 1px solid var(--line-diep); border-radius: 4px; background: var(--paper); }

body.papier .quote-strip {
  border-radius: 4px;
  border: 1px solid var(--line-diep);
  background: linear-gradient(150deg, var(--creme), var(--paper));
}
body.papier .quote-strip .qs-mark { color: var(--zand); }

/* ══════════════════════════════════════════════════════════════════════════
   7 · De belofte
   Het commitment-moment bij aanmelden, en de herinnering eraan in het
   portaal en op de journalpagina.
   ══════════════════════════════════════════════════════════════════════════ */

.belofte-stap { display: none; }
.belofte-stap.actief { display: block; animation: belofteIn 0.5s ease both; }
/* De gegevensstap zit als extra <div> in het formulier, en .auth-form is een
   flexkolom met gap. Zonder deze regel valt die tussenruimte weg zodra de
   velden een laag dieper staan, en schuift het akkoordvinkje over de knop. */
.auth-form .belofte-stap.velden.actief { display: flex; flex-direction: column; gap: 1.1rem; }
@keyframes belofteIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.belofte-kop {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.7rem;
  color: var(--ink);
}
.belofte-kop em { font-style: italic; color: var(--diep); }
.belofte-uitleg { font-size: 0.9rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 46ch; }

.belofte-keuzes { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.belofte-keuze {
  display: block;
  position: relative;
  padding: 1rem 1.1rem 1rem 2.9rem;
  border: 1px solid var(--line-diep);
  border-radius: 3px;
  background: var(--paper);
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.belofte-keuze:hover { border-color: var(--zand); background: var(--creme); }
.belofte-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.belofte-keuze::before {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 1.15rem;
  width: 13px;
  height: 13px;
  border: 1px solid var(--line-diep);
  border-radius: 50%;
  background: var(--paper);
}
.belofte-keuze:has(input:checked) {
  border-color: var(--diep);
  background: linear-gradient(150deg, var(--creme), var(--paper));
  box-shadow: 0 0 0 2px rgba(94, 43, 60, 0.1);
}
.belofte-keuze:has(input:checked)::before { border-color: var(--diep); background: var(--diep); box-shadow: inset 0 0 0 3px var(--paper); }

.belofte-eigen {
  width: 100%;
  border: 1px solid var(--line-diep);
  border-radius: 3px;
  background: var(--paper);
  padding: 0.85rem 1rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
}
.belofte-eigen:focus { outline: none; border-color: var(--diep-zacht); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14); }
.belofte-eigen::placeholder { color: var(--ink-zacht); opacity: 0.7; }

.belofte-terug {
  background: none;
  border: 0;
  padding: 0.4rem 0;
  color: var(--ink-zacht);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.belofte-terug:hover { color: var(--diep); }

/* Het bezegelmoment: het bloemicoon dat je ingedrukt houdt. */
.zegel { text-align: center; padding: 0.6rem 0 0; }
.zegel-tekst {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 auto 1.8rem;
  max-width: 34ch;
  position: relative;
  padding: 0 1.4rem;
}
.zegel-tekst::before { content: '\201C'; }
.zegel-tekst::after { content: '\201D'; }
.zegel-tekst::before,
.zegel-tekst::after {
  font-size: 1.7rem;
  color: var(--zand);
  line-height: 0;
  position: relative;
  top: 0.4rem;
}

.zegel-knop {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line-diep), var(--schaduw-zacht);
  cursor: pointer;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.zegel-knop svg { width: 100%; height: 100%; display: block; }

/* De vullende ring is een SVG-cirkel; de voortgang zit in stroke-dashoffset,
   gezet door signup-belofte.js.

   LET OP bij het aanpassen: een CSS-transform op een SVG-element vervangt het
   transform-ATTRIBUUT van datzelfde element, hij komt er niet bovenop. De
   bloemblaadjes houden hun rotate() daarom in het attribuut op de losse
   ellipsen, en de CSS-transforms hieronder staan op de groepen eromheen. Die
   groepen hebben zelf geen transform-attribuut, en rekenen met
   transform-box: view-box zodat 60px 60px het midden van de viewBox is. */
.zegel-ring,
.zegel-bloem,
.zegel-blad { transform-box: view-box; transform-origin: 60px 60px; }
.zegel-ring { transform: rotate(-90deg); }
.zegel-ring circle { fill: none; stroke-linecap: round; }
.zegel-ring .zr-baan { stroke: var(--line); stroke-width: 3; }
.zegel-ring .zr-voort { stroke: var(--diep); stroke-width: 3; transition: stroke-dashoffset 0.08s linear; }

.zegel-bloem { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.zegel-knop.bezig .zegel-bloem { transform: scale(1.06); }
.zegel-knop.klaar .zegel-bloem { transform: scale(1.14); }
.zegel-blad { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.25); }
/* Dicht bij de start, open zodra de belofte bezegeld is: de bloem bloeit open. */
.zegel-knop .zegel-blad { transform: scale(0.42) rotate(-14deg); }
.zegel-knop.klaar .zegel-blad { transform: scale(1) rotate(0deg); }

.zegel-hint {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  margin: 1.3rem 0 0;
  min-height: 1.4em;
}
.zegel-knop.klaar + .zegel-hint { color: var(--diep); }

/* De belofte zoals hij later terugkomt */
.belofte-terugblik {
  position: relative;
  margin: 0 0 2.6rem;
  padding: 1.5rem 1.7rem 1.5rem 3.4rem;
  border: 1px solid var(--line-diep);
  border-left: 2px solid var(--gold);
  border-radius: 3px;
  background: linear-gradient(150deg, var(--creme), var(--paper));
}
.belofte-terugblik[hidden] { display: none; }
.belofte-terugblik .bt-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  margin: 0 0 0.5rem;
}
.belofte-terugblik .bt-tekst {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.belofte-terugblik .bt-bloem {
  position: absolute;
  left: 1.2rem;
  top: 1.5rem;
  width: 24px;
  height: 24px;
  opacity: 0.6;
}
.belofte-terugblik .bt-bloem svg { width: 100%; height: 100%; }
@media (max-width: 560px) {
  .belofte-terugblik { padding: 1.3rem 1.2rem 1.3rem 1.2rem; }
  /* display: block erbij. Een <span> is inline, en dan negeert de browser de
     width en height uit de basisregel; los van position: absolute groeide het
     bloemetje daardoor uit tot een halve telefoonhoogte. */
  .belofte-terugblik .bt-bloem { position: static; display: block; margin-bottom: 0.6rem; }
}

/* Op de journalpagina staat hij compacter, binnen het boek. */
.boek .belofte-terugblik { margin: 0 0 1.6rem; background: none; border: 0; border-left: 2px solid var(--gold); padding: 0.2rem 0 0.2rem 1rem; }
.boek .belofte-terugblik .bt-bloem { display: none; }
.boek .belofte-terugblik .bt-tekst { font-size: 0.94rem; }

/* ══════════════════════════════════════════════════════════════════════════
   8 · Aanmelden: de sfeerkant mee in het nieuwe palet
   ══════════════════════════════════════════════════════════════════════════ */

body.papier.auth-body { background: linear-gradient(180deg, #FDFAF5, #F7F1E7); }
body.papier .auth-sfeer {
  background:
    radial-gradient(700px 460px at 20% 0%, rgba(224, 196, 204, 0.4), transparent 62%),
    linear-gradient(165deg, var(--beige) 0%, var(--creme) 55%, var(--paper) 100%);
}
body.papier .sfeer-vink { color: var(--diep); }
body.papier .tier-kaart { border-color: var(--line-diep); background: var(--paper); border-radius: 3px; }
body.papier .field .tier-kaart:hover { border-color: var(--zand); }
body.papier .tk-badge { background: var(--gold); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .belofte-stap.actief { animation: none; }
  .zegel-bloem, .zegel-blad, .zegel-ring .zr-voort { transition: none; }
  body.papier::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · De editiecomponenten (editie.html en tool.html)
   Toegevoegd op 31-08-2026, één ronde na de rest van deze laag.

   edition-tools.css werkt met een eigen kleurenrijtje van zeven snoeppastels
   (k-roze, k-geel, k-groen, k-blauw, k-lila, k-perzik, k-mint) plus een
   crème voor de grote hartjestegels. Die zijn hier hertekend naar dezelfde
   familie als de rest van de ledenkant. De klassenamen blijven staan: de bot
   die de maandedities genereert (bot/src/editie.js) zet ze in de body_html,
   dus hernoemen zou elke bestaande editie breken.

   Twee sets, want ze doen verschillend werk: de pins en tegelvlakken zijn
   achtergronden onder tekst en mogen licht blijven, de grote hartjes zijn de
   vorm zelf en hebben iets meer body nodig om niet weg te vallen tegen het
   beige papier.

   Voorbereiding voor later: wil je een kleur bijstellen, doe dat hier en niet
   in edition-tools.css. Dat bestand wordt ook zonder deze laag geladen
   (bijvoorbeeld als iemand papier.css van een pagina afhaalt), en moet dus
   zijn eigen werkende waarden houden. */

body.papier {
  --k-roze: #E0C3CB;
  --k-geel: #E6D3A4;
  --k-groen: #C6D2BE;
  --k-blauw: #C2C9CC;
  --k-lila: #CFC5CB;
  --k-perzik: #E3C6B2;
  --k-mint: #BED2C8;
  --k-creme: #EFE6D2;

  --h-roze: #D7B2BE;
  --h-geel: #DCC492;
  --h-groen: #B9C9B2;
  --h-blauw: #B5BFC2;
  --h-lila: #C5B6BF;
  --h-perzik: #DCBBA4;
  --h-mint: #B2C8BE;
  --h-creme: #DFCFAF;
}

/* Vision board: de pins en het kleurenpalet waarmee je ze kiest */
body.papier .vision-pin.k-roze,   body.papier .pin-kleur.k-roze   { background: var(--k-roze); }
body.papier .vision-pin.k-geel,   body.papier .pin-kleur.k-geel   { background: var(--k-geel); }
body.papier .vision-pin.k-groen,  body.papier .pin-kleur.k-groen  { background: var(--k-groen); }
body.papier .vision-pin.k-blauw,  body.papier .pin-kleur.k-blauw  { background: var(--k-blauw); }
body.papier .vision-pin.k-lila,   body.papier .pin-kleur.k-lila   { background: var(--k-lila); }
body.papier .vision-pin.k-perzik, body.papier .pin-kleur.k-perzik { background: var(--k-perzik); }
body.papier .vision-pin.k-mint,   body.papier .pin-kleur.k-mint   { background: var(--k-mint); }
body.papier .vision-pin.k-creme,  body.papier .pin-kleur.k-creme  { background: var(--k-creme); }

/* Mini-journal: kaartjes met een verloop naar dezelfde tint */
body.papier .mj-item.k-roze   { background: linear-gradient(155deg, var(--paper), var(--k-roze)); }
body.papier .mj-item.k-geel   { background: linear-gradient(155deg, var(--paper), var(--k-geel)); }
body.papier .mj-item.k-groen  { background: linear-gradient(155deg, var(--paper), var(--k-groen)); }
body.papier .mj-item.k-blauw  { background: linear-gradient(155deg, var(--paper), var(--k-blauw)); }
body.papier .mj-item.k-lila   { background: linear-gradient(155deg, var(--paper), var(--k-lila)); }
body.papier .mj-item.k-perzik { background: linear-gradient(155deg, var(--paper), var(--k-perzik)); }
body.papier .mj-item.k-mint   { background: linear-gradient(155deg, var(--paper), var(--k-mint)); }

/* De grote hartjestegels: de hub van elke editie */
body.papier .heart-tile.k-roze   .heart-svg path { fill: var(--h-roze); }
body.papier .heart-tile.k-lila   .heart-svg path { fill: var(--h-lila); }
body.papier .heart-tile.k-geel   .heart-svg path { fill: var(--h-geel); }
body.papier .heart-tile.k-groen  .heart-svg path { fill: var(--h-groen); }
body.papier .heart-tile.k-blauw  .heart-svg path { fill: var(--h-blauw); }
body.papier .heart-tile.k-perzik .heart-svg path { fill: var(--h-perzik); }
body.papier .heart-tile.k-mint   .heart-svg path { fill: var(--h-mint); }
body.papier .heart-tile.k-creme  .heart-svg path { fill: var(--h-creme); }

/* Het icoontje in het hart was wit. Op de lichtere, gedempte vlakken valt wit
   weg; dezelfde inkt als de titel eronder leest beter en hangt beter samen. */
body.papier .heart-icon { color: #3C2731; opacity: 0.55; }

/* De koppen en verlopen die naar de oude snoepkleuren grepen */
body.papier .vip-welkom {
  background: linear-gradient(120deg, var(--creme) 0%, var(--beige) 50%, var(--k-roze) 100%);
  border-radius: 4px;
}
body.papier .vip-welkom::before,
body.papier .vip-welkom::after { color: var(--gold); opacity: 0.7; }
body.papier .vip-kicker { color: var(--accent-tekst); }

body.papier .rt-card.is-ochtend .rt-head { background: linear-gradient(100deg, var(--k-geel), var(--creme)); }
body.papier .rt-card.is-avond .rt-head { background: linear-gradient(100deg, var(--k-lila), var(--creme)); }

body.papier .ea-card { background: linear-gradient(100deg, var(--creme), var(--beige)); border-radius: 4px; }
body.papier .kt-voor { background: linear-gradient(140deg, var(--creme), var(--k-roze)); }
body.papier .ca-plan { background: linear-gradient(120deg, var(--creme), var(--k-geel)); }

/* ══════════════════════════════════════════════════════════════════════════
   10 · Contrast
   Nagemeten op 01-09-2026 met een script dat elk zichtbaar tekstelement langs
   de WCAG AA-eis legt (4,5:1 voor gewone tekst, 3:1 vanaf 24px of vanaf
   18,7px vet). Drie dingen kwamen daaruit, en alle drie hebben dezelfde
   oorzaak: het beige papier is lichter dan het oude roze, dus kleuren die
   dáár nog net haalden, halen het hier niet meer.

   Dit is dezelfde les als bij --ink-soft, dat eerder al van #8C7B80 naar
   #7A6A70 moest. Kies je hier een nieuwe kleur, meet dan opnieuw tegen
   --paper (#FBF7F1) én --creme (#F7F0E4); crème is de strengste van de twee
   die vaak onder tekst ligt.

   1 · --accent (#B0687F) haalt als tekst 3,8:1 en is dus alleen nog een
       vlakkleur. Overal waar de onderliggende stylesheets hem als
       tekstkleur inzetten, staat hieronder --accent-tekst (#8E4359, 6,4:1).
       Grote cursieve koppen (de <em>'s) blijven --accent houden: die zitten
       ruim boven 24px en hebben genoeg aan 3:1.
   2 · Wit op --accent haalde 3,3:1. De knoppen die dat deden staan nu op
       --diep (10,4:1 met papierwit).
   3 · --ink-zacht stond op #8B7B72 (3,8:1) en is nu #6F645D (5,4:1).
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · accent als tekstkleur */
body.papier .sfeer-kicker,
body.papier .vorm-onder a,
body.papier .held-badge,
body.papier .held-sub,
body.papier .editie-kaart .maand,
body.papier .editie-open,
body.papier .profiel-label,
body.papier .melding.goed,
body.papier .activeer-fout.goed,
body.papier .juich-kop,
body.papier .cm-vip-kicker,
body.papier .wp-label,
body.papier .box-label,
body.papier .vip-kicker { color: var(--accent-tekst); }

/* 2 · knoppen die wit op accent zetten */
body.papier .app-link .al-knop {
  background: var(--diep);
  border-color: var(--diep);
  color: #FBF7F1;
}
body.papier .avatar-mini { background-color: var(--diep); }
body.papier .auth-form .btn.hoofd {
  background: linear-gradient(115deg, var(--diep-zacht), var(--diep));
  color: #FBF7F1;
  box-shadow: 0 12px 26px -14px rgba(94, 43, 60, 0.8);
}

/* De uitlogknop staat in de header op --ink-soft; op het crème van de balk is
   dat 4,5:1 op de grens. Met --ink erin is het 12:1 en leest hij gewoon. */
body.papier .portal-header #logout-btn { color: var(--ink); }

/* De tagline onder het woordmerk mengde goud in --ink-soft en kwam daarmee op
   2,98:1 bij 9px. Dezelfde menging, maar vanuit het diepe goud en de volle
   inkt: 5,1:1 en nog steeds warm. */
body.papier .wordmark small { color: color-mix(in srgb, var(--gold-diep) 30%, var(--ink)); }

/* Lege sterren stonden op --zand (1,35:1) en waren daarmee vrijwel onzichtbaar,
   terwijl je er wel op moet kunnen klikken. Dit is een bedieningselement, dus
   3:1 is de norm die telt. */

/* De stemmingsrij en het dagcijfer stonden naast elkaar in .two-up met twee
   1fr-kolommen. 1fr is minmax(auto, 1fr), dus zo'n kolom krimpt niet onder de
   breedte van zijn inhoud: vijf knoppen van 44px plus de sterren pasten op een
   venster van ongeveer 900px niet meer naast elkaar, het raster werd breder dan
   de pagina en het dagcijfer viel rechts buiten beeld.

   min-width: 0 geeft de kolommen toestemming om wél te krimpen, en de rij mag
   dan afbreken in plaats van uit te steken. Onder 1150px staan ze bovendien
   gewoon onder elkaar: de rechterpagina heeft daar ruimte zat. */
body.papier .two-up > * { min-width: 0; }
body.papier .moods { flex-wrap: wrap; }
/* Binnen het boek staan stemming en dagcijfer altijd onder elkaar, ook op een
   breed scherm. Een bladzijde is ongeveer 380px breed, dus twee kolommen laten
   ruim 180px over terwijl vijf gezichtjes met tussenruimte er 255px vragen: ze
   braken dan af naar een tweede regel. De rechterbladzijde heeft die hoogte
   toch over. */
body.papier .boek .two-up { grid-template-columns: 1fr; gap: 1.2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   11 · Toetsenbord en printen
   ══════════════════════════════════════════════════════════════════════════ */

/* Er stond alleen een focusrand op de invoervelden van .field, dus wie met
   Tab door het portaal liep zag bij knoppen en links helemaal niets. Met
   :focus-visible verschijnt de rand alleen bij toetsenbordgebruik, dus voor
   wie klikt verandert er niets. */
body.papier a:focus-visible,
body.papier button:focus-visible,
body.papier input:focus-visible,
body.papier textarea:focus-visible,
body.papier select:focus-visible,
body.papier [tabindex]:focus-visible {
  outline: 2px solid var(--diep);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Ronde knoppen houden hun vorm, anders zit er een vierkante rand omheen. */
body.papier .zegel-knop:focus-visible,
body.papier .mood-btn:focus-visible,
body.papier .nav-btn:focus-visible,
body.papier .avatar-knop:focus-visible .avatar-mini { border-radius: 50%; }

/* style.css zet bij het printen `body { background: #fff }`, maar body.papier
   is specifieker en won dat. Zonder dit blok drukt een dagpagina de hele
   beige achtergrond plus de papierkorrel mee af. */
@media print {
  body.papier { background: #fff; }
  body.papier::before { display: none; }
  body.papier .boek {
    background: #fff;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  body.papier .boek::before,
  body.papier .boek::after { display: none; }
  body.papier .boek-blad {
    background-color: #fff;
    background-image: none;
  }
  body.papier .boek-blad.links::after,
  body.papier .boek-blad.rechts::after { display: none; }
  body.papier .boek-band { background: none; }
  body.papier .boek-lint,
  body.papier .zijquote,
  body.papier .blaadjes { display: none; }
}

/* Op een scherm van 320px (iPhone SE) werd de sfeerkant van het aanmeld- en
   inlogscherm 355px breed en schoof de hele pagina opzij. Een grid-item krimpt
   standaard niet onder zijn min-content, en dat is hier de langste kop; met
   min-width: 0 mag het wel, en dan mogen de lange woorden afbreken. */
body.papier .auth-split > * { min-width: 0; }
body.papier .sfeer-titel,
body.papier .sfeer-lead,
body.papier .sfeer-lijst li,
body.papier .sfeer-voet { overflow-wrap: break-word; }

/* De keuze maandelijks/jaarlijks is één pil met twee knoppen naast elkaar, en
   de badge "2 maanden gratis" maakt de rechterknop bijna 200px breed. Op 320px
   paste dat niet meer naast elkaar en liep het aanmeldscherm over. Onder 380px
   staan de twee knoppen daarom onder elkaar, over de volle breedte. */
@media (max-width: 380px) {
  body.papier .interval-toggle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 14px;
  }
  body.papier .interval-toggle button { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · De telefoonlaag
   Vrijwel alle leden openen Bloome op hun telefoon. Alles hieronder geldt
   daarom vanaf 860px naar beneden, en is geschreven vanuit de duim: wat je
   vaak doet hoort onderaan, wat je aanraakt is minstens 44px, en niets
   belangrijks verstopt zich achter horizontaal scrollen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- De vaste balk onderaan ---------- */

.mobiel-nav { display: none; }

@media (max-width: 860px) {
  .mobiel-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.35rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-diep);
    box-shadow: 0 -8px 24px -18px rgba(63, 43, 48, 0.5);
  }

  .mn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 50px;
    padding: 0.35rem 0.1rem 0.3rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink-zacht);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }
  .mn-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 26px;
    border-radius: 99px;
    transition: background 0.25s ease;
  }
  .mn-icoon svg { width: 21px; height: 21px; }
  .mn-label {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1;
  }
  .mn-item.actief { color: var(--diep); }
  .mn-item.actief .mn-icoon { background: color-mix(in srgb, var(--diep) 12%, transparent); }
  .mn-item:active { transform: scale(0.94); }

  /* Ruimte onder de inhoud, anders valt de laatste regel achter de balk. */
  body.heeft-onderbalk { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.heeft-onderbalk .tool-wrap,
  body.heeft-onderbalk .journal-wrap,
  body.heeft-onderbalk .portal-wrap { padding-bottom: 2.5rem; }

  /* De juich-pop-up en de app-meldingen moeten boven de balk blijven. */
  .juich { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
  body.heeft-onderbalk .app-melding,
  body.heeft-onderbalk .app-install { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* ---------- De kopbalk wordt smal ---------- */

@media (max-width: 860px) {
  body.papier .portal-header {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    gap: 0.6rem;
  }
  /* Wat nu onderaan staat, hoeft hierboven niet meer. */
  body.papier .portal-header .avatar-knop,
  body.papier .portal-header a[href="/portal.html"].btn { display: none; }
  body.papier .wordmark small { display: none; }
  body.papier .wordmark { font-size: 1.15rem; }
  body.papier .header-right { gap: 0.4rem; flex-wrap: nowrap; }
  body.papier .portal-header .tier-badge {
    font-size: 0.62rem;
    padding: 0.4em 0.75em;
    letter-spacing: 0.08em;
  }
  body.papier .btn.compact,
  body.papier .btn.mini { padding: 0.55em 0.9em; font-size: 0.78rem; }
  /* De zijquotes zijn sfeer voor een breed scherm en kosten hier alleen ruimte. */
  body.papier .zijquote { display: none; }
}

/* Op de allersmalste toestellen mag de kop tot het bot. */
@media (max-width: 400px) {
  body.papier .portal-header .tier-badge { display: none; }
}

/* ---------- Alles wat je aanraakt: minstens 44px ---------- */

@media (max-width: 860px) {
  body.papier .nav-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  body.papier .mood-btn { width: 52px; height: 52px; }
  body.papier .mood-btn svg { width: 32px; height: 32px; }
  body.papier .star-btn { font-size: 1.85rem; padding: 0.15rem 0.25rem; }
  body.papier .stars { gap: 0.5rem; }
  body.papier .day-box { min-height: 54px; }
  body.papier .todo-line input[type="checkbox"] { width: 22px; height: 22px; }
  body.papier .todo-line { gap: 0.7rem; margin-bottom: 0.7rem; }
  body.papier .todo-line input[type="text"] { font-size: 0.95rem; padding: 0.4rem 0; }
  body.papier .todo-add { padding: 0.7rem; font-size: 0.86rem; }
  body.papier .lines input { font-size: 1rem; padding: 0.55rem 0 0.4rem; }
  body.papier .checkin-box textarea,
  body.papier .review-area { font-size: 1rem; padding: 0.75rem 0.85rem; }
  /* iOS zoomt in op een veld met een lettergrootte onder 16px. Alles wat je
     hier invult staat daarom op minstens 1rem. */
  body.papier input[type="text"],
  body.papier input[type="date"],
  body.papier input[type="time"],
  body.papier input[type="email"],
  body.papier input[type="password"],
  body.papier textarea,
  body.papier select { font-size: max(1rem, 16px); }
}

/* Dezelfde regel, maar dan op de voorwaarde die er echt toe doet. Hierboven
   staat hij in een blok op `max-width: 860px`, en dat is een iPad in liggende
   stand niet: daar bleven de velden op 15,2px staan en zoomde Safari alsnog in
   zodra je ze aantikte. `pointer: coarse` vraagt naar het apparaat in plaats
   van naar de breedte. De specificiteit is bewust dezelfde als hierboven, zodat
   de smallere uitzonderingen in dat blok (`.todo-line`, `.lines`) op een
   telefoon blijven winnen en daar niets verschuift. */
@media (pointer: coarse) {
  body.papier input[type="text"],
  body.papier input[type="date"],
  body.papier input[type="time"],
  body.papier input[type="email"],
  body.papier input[type="password"],
  body.papier textarea,
  body.papier select { font-size: max(1rem, 16px); }
}

/* ---------- Journal ---------- */

@media (max-width: 860px) {
  body.papier .journal-wrap { padding: 1.6rem 1.1rem 3rem; }
  body.papier .journal-kop { margin-bottom: 1.4rem; }
  body.papier .page-lead { font-size: 0.9rem; }

  /* De dagenstrip: hiermee spring je naar een andere dag zonder helemaal naar
     de maandkalender te scrollen. Hij plakt onder de kopbalk. */
  .dagstrip {
    position: sticky;
    /* Onder de plakkende kopbalk, waarvan mobiel.js de gemeten hoogte zet. */
    top: var(--kop-hoogte, 62px);
    z-index: 30;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.6rem 1.1rem;
    margin: 0 -1.1rem 1rem;
    /* Dekkend, niet doorschijnend. Met blur zag je de dagpagina er dwars
       doorheen lopen en leek de strip half over de tekst te zweven. */
    background: var(--paper);
    border-bottom: 1px solid var(--line-diep);
    box-shadow: 0 8px 16px -14px rgba(63, 43, 48, 0.55);
    scrollbar-width: none;
  }
  .dagstrip::-webkit-scrollbar { display: none; }
  .ds-dag {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 46px;
    min-height: 56px;
    border: 1px solid var(--line-diep);
    border-radius: 12px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ds-dag .ds-naam {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-zacht);
  }
  .ds-dag .ds-nr {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1;
  }
  .ds-dag .ds-stip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zand);
  }
  .ds-dag.gevuld .ds-stip { background: var(--gold-diep); }
  .ds-dag.vandaag { border-color: var(--diep-zacht); }
  .ds-dag.actief {
    background: var(--diep);
    border-color: var(--diep);
  }
  .ds-dag.actief .ds-naam,
  .ds-dag.actief .ds-nr { color: #FBF7F1; }
  .ds-dag.actief .ds-stip { background: var(--gold); }
}
@media (min-width: 861px) { .dagstrip { display: none; } }

/* ---------- Weekagenda: één dag tegelijk ---------- */

.agenda-dag { display: none; }
@media (max-width: 860px) {
  body.papier .tool-wrap { padding: 1.6rem 1.1rem 3rem; }
  body.papier .tool-head { gap: 0.9rem; margin-bottom: 1rem; }
  body.papier .tool-head h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  body.papier .week-picker { width: 100%; justify-content: space-between; }
  body.papier .week-picker label { display: none; }
  body.papier .week-picker input[type="date"] { flex: 1; }

  /* Het weekraster van zeven kolommen is op een telefoon alleen te lezen door
     opzij te schuiven, en dat is precies wat niemand doet. Op telefoonformaat
     tekent agenda.js daarom één dag als lijst, met een dagenstrip erboven. */
  body.papier .agenda-grid,
  body.papier .todo-grid { display: none; }
  .agenda-dag { display: block; }

  .ad-rij {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
  }
  .ad-rij:last-child { border-bottom: 0; }
  .ad-uur {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.7rem;
    font-family: 'Playfair Display', serif;
    font-size: 0.78rem;
    color: var(--ink-zacht);
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--line-diep);
  }
  .ad-rij input {
    width: 100%;
    min-height: 46px;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.8rem;
    color: var(--ink);
  }
  .ad-rij input:focus {
    outline: none;
    background: var(--creme);
    box-shadow: inset 2px 0 0 var(--diep);
  }
  .ad-rij input.gevuld {
    background: linear-gradient(90deg, rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0.04));
    box-shadow: inset 2px 0 0 var(--gold);
  }
  /* De to-do's van de gekozen dag staan bóven het uurschema: dat is waar je
     op een telefoon voor binnenkomt. Het schema is het naslagwerk eronder. */
  .ad-todos { padding: 0.2rem 1.1rem 1.1rem; border-bottom: 1px solid var(--line-diep); }
  .ad-todos h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.7rem;
    color: var(--ink);
  }
}

/* ---------- Tracker: kaart per gewoonte ---------- */

.habit-kaarten { display: none; }
@media (max-width: 860px) {
  body.papier .habit-grid { display: none; }
  .habit-kaarten { display: block; padding: 0.4rem 0 0; }

  .hk-kaart {
    padding: 0.9rem 1.1rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .hk-kaart:last-child { border-bottom: 0; }
  .hk-kop { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
  .hk-kop .habit-icon { flex-shrink: 0; }
  .hk-kop input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    padding: 0.2rem 0;
  }
  .hk-kop input:focus { outline: none; border-bottom-color: var(--diep-zacht); }
  .hk-tel {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-zacht);
    border: 1px solid var(--line-diep);
    border-radius: 99px;
    padding: 0.2em 0.6em;
  }
  .hk-tel.vol { background: var(--gold); border-color: var(--gold-diep); color: var(--ink); }
  .hk-del {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--ink-zacht);
    font-size: 1rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
  .hk-dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
  .hk-dag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hk-dag .hk-letter {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-zacht);
  }
  .hk-dag .hk-bol {
    width: 100%;
    aspect-ratio: 1;
    max-width: 42px;
    min-height: 34px;
    border: 1px solid var(--line-diep);
    border-radius: 10px;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .hk-dag.vandaag .hk-letter { color: var(--diep); font-weight: 700; }
  .hk-dag.vandaag .hk-bol { border-color: var(--diep-zacht); }
  .hk-dag.aan .hk-bol {
    background: var(--diep);
    border-color: var(--diep);
    color: #FBF7F1;
  }
  .hk-dag.aan .hk-bol::after { content: '✓'; }

  /* Stemming: per dag één rij in plaats van zeven grote blokken onder elkaar. */
  body.papier .mood-row { grid-template-columns: 1fr; gap: 0; padding: 0.4rem 0 0.6rem; }
  body.papier .mood-day {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.55rem 1.1rem;
  }
  body.papier .mood-day:last-child { border-bottom: 0; }
  body.papier .mood-day.is-vandaag { background: var(--creme); }
  body.papier .mood-day .md-label { margin: 0; }
  body.papier .mood-dots { justify-content: space-between; gap: 0.3rem; }
  body.papier .mood-pick.face { width: 40px; height: 40px; }
  body.papier .mood-pick.face svg { width: 27px; height: 27px; }
  body.papier .mood-legend { padding: 0.9rem 1.1rem; }
  body.papier .habit-add { flex-wrap: wrap; }
  body.papier .habit-add input { flex: 1 1 100%; min-height: 46px; }
  body.papier .habit-add .btn { width: 100%; min-height: 46px; }
}

/* ---------- Portaal ---------- */

@media (max-width: 860px) {
  body.papier .portal-wrap { padding: 1.6rem 1.1rem 3rem; }
  body.papier .groet-blok { padding: 1.5rem 1.2rem 1.4rem; margin-bottom: 1.8rem; }
  body.papier .groet-titel { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  body.papier .groet-lead { font-size: 0.92rem; }
  body.papier .welkom-quote { padding: 1.1rem 1.1rem 1.1rem 2.6rem; margin-top: 1.3rem; }
  body.papier .held-kaart { padding: 1.5rem 1.3rem 1.6rem; }
  body.papier .held-titel { font-size: clamp(1.8rem, 8.5vw, 2.4rem); }
  body.papier .held-cta { width: 100%; justify-content: center; min-height: 50px; }
  body.papier .tool-duo { gap: 0.8rem; }
  body.papier .tool-kaart { padding: 1.2rem 1.1rem; min-height: 0; }
  body.papier .creed { padding: 1.6rem 1.2rem; }
  body.papier .editie-kaart { padding: 1.2rem 1.1rem; }
  body.papier .sectie-kop { font-size: 1.3rem; }
  body.papier .app-link { flex-wrap: wrap; }
  body.papier .app-link .al-knop { width: 100%; margin-left: 0; min-height: 46px; }
}

/* ---------- Volgorde op de telefoon ----------
   Op een laptop lees je van boven naar beneden en is sfeer bovenaan prima. Op
   een telefoon is elke regel boven de inhoud een regel die je wegscrolt, dus
   staat hier eerst waarvoor je kwam. .tool-wrap wordt een flexkolom zodat de
   volgorde kan verschillen van de HTML, die voor een breed scherm geschreven is. */
@media (max-width: 860px) {
  body.papier .tool-wrap { display: flex; flex-direction: column; }
  /* Eerst een basisvolgorde voor álles. Zonder deze regel houdt elk kind dat
     hieronder niet genoemd wordt order 0, en dat is vóór de kop: op de
     trackerpagina stonden de gewoontes daardoor bovenaan en de titel eronder. */
  body.papier .tool-wrap > * { order: 3; }
  body.papier .tool-head { order: 1; }
  body.papier .dagstrip { order: 2; margin-bottom: 0; }
  body.papier #panel-uren { order: 3; margin-top: 0.8rem; }
  body.papier #panel-herinnering { order: 4; }
  body.papier .quote-strip { order: 5; margin-top: 1.6rem; }
  body.papier .save-state { order: 6; }

  /* De to-do's staan op de telefoon in de dagweergave zelf, dus dit paneel is
     daar dubbelop. */
  body.papier #panel-todos { display: none; }

  /* De paneelkop hoorde bij het weekraster dat je hier niet ziet, en stond
     bovendien boven de to-do's, alsof die het uurschema wáren. De dagweergave
     zet zijn eigen koppen. */
  body.papier #panel-uren .panel-head { display: none; }
  .ad-kop {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding: 1rem 1.1rem 0.7rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line-diep);
  }
  body.papier .ics-balk { padding: 0.9rem 1.1rem; }
}

/* De taalkiezer toonde "Ned..." omdat "Nederlands" niet past naast de andere
   knoppen. Op de telefoon blijft alleen de wereldbol over: dat pictogram wordt
   overal als taalkeuze begrepen, en zodra je hem opent laat het toestel de
   volledige namen zien met de huidige keuze aangevinkt. Het aria-label op het
   veld blijft de volledige omschrijving houden. */
@media (max-width: 860px) {
  body.papier .portal-header .taal-kiezer select {
    width: 46px;
    min-height: 44px;
    padding: 0 0 0 1.75rem;
    color: transparent;
    background-position: 0.7rem center, right -2rem center;
  }
}

/* De kopbalk is op een telefoon puur overhead: hoe lager, hoe meer inhoud er
   in beeld staat. Van 82px naar ongeveer 60px. */
@media (max-width: 860px) {
  body.papier .portal-header { padding-top: 0.75rem; padding-bottom: 0.75rem; }

  /* De kicker herhaalt wat de balk onderaan al zegt, en de kop mag compacter:
     samen scheelt dat ruim honderd pixels voordat je bij je week bent. */
  body.papier .tool-head .kicker,
  body.papier .journal-kop .kicker { display: none; }
  body.papier .tool-head h1 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  body.papier .page-title { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  body.papier .tool-head .sub { font-size: 0.84rem; }
}

/* ---------- Telefoon: de maandkalender en het boek compacter ---------- */

@media (max-width: 860px) {
  /* De kalender stond op drie kolommen met vakjes van ruim 200px: eenendertig
     dagen werden zo tweeënhalf scherm scrollen, terwijl de dagenstrip bovenaan
     dezelfde sprong al maakt. Zeven kolommen leest bovendien als een echte
     maand, en dan zie je in één oogopslag welke dagen je hebt ingevuld. */
  body.papier .day-row { grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
  body.papier .day-box {
    min-height: 46px;
    padding: 0.3rem 0.1rem;
    gap: 0.15rem;
  }
  body.papier .day-box .d-number { font-size: 0.86rem; }
  /* Het potloodje en het sterretje zijn op deze maat alleen ruis. */
  body.papier .day-box .pencil { display: none; }
  body.papier .day-box .sparkle { top: 2px; left: 3px; font-size: 0.5rem; }
  body.papier .day-box .mood-dot { width: 5px; height: 5px; }
  body.papier .week-group { margin-bottom: 1.4rem; }
  body.papier .week-group-head { margin-bottom: 0.5rem; }

  /* Vier fasen onder elkaar is een heel scherm; twee naast elkaar niet. */
  body.papier .weekstrip { grid-template-columns: repeat(2, 1fr); }
  body.papier .ws-fase { padding: 0.85rem 0.9rem 0.95rem; }
  body.papier .ws-fase:nth-child(2n) { border-right: 0; }
  body.papier .ws-fase:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  body.papier .ws-fase:nth-child(n+3) { border-bottom: 0; }
  body.papier .ws-sub { display: none; }

  /* Schrijfregels: minder lucht, zodat een vraag met zijn drie regels in één
     blik past in plaats van over anderhalf scherm te lopen. */
  body.papier .field-block { margin-bottom: 1.3rem; }
  body.papier .lines { gap: 0.15rem; }
  body.papier .lines input { padding: 0.65rem 0 0.45rem; }
  body.papier .checkin { gap: 0.7rem; }
  body.papier .checkin-box textarea { min-height: 74px; }
  body.papier .review-area { min-height: 96px; }

  /* De twee bladzijden stapelen op een telefoon. Een harde streep ertussen
     leest als twee losse velletjes; een zachte vouwschaduw houdt het één boek. */
  body.papier .boek-blad.links {
    border-bottom: 0;
    box-shadow: 0 8px 10px -10px rgba(150, 126, 96, 0.55) inset,
                0 -8px 10px -10px rgba(150, 126, 96, 0.4);
  }
  body.papier .boek-blad.rechts { padding-top: 1.4rem; }
}

/* ---------- Telefoon: volgorde in het portaal ----------
   Op een laptop staat alles onder elkaar in beeld en maakt de volgorde weinig
   uit. Op een telefoon is elk blok boven de dagelijkse handeling een blok dat
   je eerst wegscrolt, en "open je journal" stond onder de vouw. Daarom eerst
   de groet, dan meteen het journal, en pas daarna de sfeer en de instellingen. */

@media (max-width: 860px) {
  body.papier .portal-wrap { display: flex; flex-direction: column; }
  body.papier .portal-wrap > * { order: 6; }
  body.papier .verwijder-banner { order: 1; }
  body.papier .activeer-blok { order: 2; }
  body.papier .groet-blok { order: 3; }
  body.papier .held { order: 4; }
  body.papier #belofte-portaal { order: 5; }
  body.papier .tools { order: 6; }
  body.papier .edities { order: 7; }
  body.papier .creed { order: 8; }
  body.papier .app-link { order: 9; }
  body.papier .slot { order: 10; }

  /* Leesbaarheid: lopende tekst mocht een tandje groter. */
  body.papier .groet-lead { font-size: 0.97rem; }
  body.papier .held-tekst,
  body.papier .tk-tekst,
  body.papier .editie-kaart .samenvatting { font-size: 0.9rem; line-height: 1.6; }
}

/* ---------- Aanraakgevoel ----------
   Zonder terugkoppeling voelt een tik op een telefoon als niets. Een korte
   indruk maakt het verschil tussen "een website" en "een app". Alleen op
   toestellen zonder muisaanwijzer, en niet bij prefers-reduced-motion. */
@media (hover: none) {
  body.papier .day-box,
  body.papier .ds-dag,
  body.papier .hk-dag,
  body.papier .mood-btn,
  body.papier .mood-pick,
  body.papier .star-btn,
  body.papier .tool-kaart,
  body.papier .editie-kaart,
  body.papier .btn { transition: transform 0.12s ease; }

  body.papier .day-box:active,
  body.papier .ds-dag:active,
  body.papier .hk-dag:active,
  body.papier .mood-btn:active,
  body.papier .mood-pick:active,
  body.papier .star-btn:active { transform: scale(0.92); }

  body.papier .tool-kaart:active,
  body.papier .editie-kaart:active,
  body.papier .held-kaart:active,
  body.papier .btn:active { transform: scale(0.985); }

  /* Het grijze vlak dat Android over een aangetikt element legt past niet bij
     de rest; de eigen indruk hierboven doet hetzelfde werk. */
  body.papier a,
  body.papier button { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  body.papier .day-box:active,
  body.papier .ds-dag:active,
  body.papier .hk-dag:active,
  body.papier .mood-btn:active,
  body.papier .mood-pick:active,
  body.papier .star-btn:active,
  body.papier .tool-kaart:active,
  body.papier .editie-kaart:active,
  body.papier .held-kaart:active,
  body.papier .btn:active { transform: none; }
}

/* De bloemkop in deze illustraties staat op y = -2 binnen een viewBox die bij
   0 begint, en de animatie schaalt hem nog iets op. SVG's snijden standaard af
   op hun viewBox, dus het bovenste blaadje kreeg een rechte rand alsof het
   afgeknipt was. Zichtbaar laten overlopen is genoeg; er staat toch niets
   omheen. */
body.papier .bp-bloem svg,
body.papier .juich-bloem svg,
body.papier .celebrate-flower > svg { overflow: visible; }

/* Acht regels gecentreerde tekst leest op een telefoon slecht: je oog moet elke
   regel opnieuw zoeken. De kop blijft gecentreerd, de lopende tekst niet. */
@media (max-width: 860px) {
  body.papier .vip-welkom { padding: 1.4rem 1.2rem; }
  body.papier .vip-welkom p:not(.vip-kicker) { text-align: left; }
}