/*
 * Het beginscherm (ONTWERP.md §15 en §17, referentie Vandaag.html).
 *
 * Alle maten letterlijk uit Vandaag.html. De inline stijlen uit dat bestand
 * staan hier als klasse: het CSP gooit een style-attribuut weg (§10).
 */

/* ---- De eventregel: één regel, geen halve pagina ----------------------- */

.evrow {
  display: flex;
  align-items: center;
  gap: var(--gap-row);
  padding: 11px 13px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 130% at 100% 0%, var(--gold-a16), rgba(180, 142, 71, 0) 62%), var(--surface);
  border: 1px solid var(--gold-a28);
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.evrow-wapen {
  position: absolute;
  right: -20px;
  top: -26px;
  width: 88px;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}

.evrow > .groei { position: relative; z-index: 1; }
.evrow-naam { display: block; font-size: var(--fs-body-sm); font-weight: 600; }
.evrow-sub { display: block; font-size: var(--fs-meta-sm); color: var(--muted); margin-top: 3px; }

/* De balk is hier smaller dan op een kaart: 4 hoog, 150 breed. */
.evrow-balk {
  display: block;
  height: 4px;
  border-radius: 2px;
  margin-top: 7px;
  width: 150px;
  max-width: 100%;
}

/* ---- De captiontegel (§15) --------------------------------------------- */

/*
 * Engels met emoji, en dat wijkt bewust af van de rest van de app (§14). Dit
 * tegeltje is het merk dat even meekijkt, geen onderdeel van het werk.
 */
.captie {
  position: relative;
  overflow: hidden;
  padding: 14px 15px;
  border-radius: 15px;
  background: radial-gradient(130% 130% at 0% 100%, var(--gold-a16), rgba(180, 142, 71, 0) 65%), var(--surface);
  border: 1px solid var(--white-a07);
}


/*
 * Schreefloos, 14 punten, regelafstand 1,5, gewicht 400 (§4).
 *
 * Er staat niets achter: het wapen hoort op de eventregel. Daarom ook geen
 * z-index en geen stapeling - er is niets om overheen te staan.
 */
.captie-tekst {
  font-size: calc(0.875rem * var(--tekstschaal));
  line-height: 1.5;
  font-weight: 400;
  color: var(--gold-light);
  margin: 0;
  /*
   * GEBALANCEERD BREKEN (§4, vastgesteld 26 augustus 2026).
   *
   * De twee regels zien er ongelijk uit en dat komt niet van de letter: gemeten
   * staan ze in hetzelfde element, met dezelfde `font-family`, `font-size` en
   * `font-weight`. Het verschil is de LENGTE - 288 punten tegen 143 - en op een
   * smal scherm valt regel 1 in tweeën met een rafelige afloop.
   *
   * `text-wrap: balance` verdeelt de woorden over de regels in plaats van de
   * eerste regel vol te maken. Alleen hier en bij koppen: bij langere tekst kost
   * het rekenwerk en oogt het juist onrustig. Browsers die het niet kennen,
   * breken zoals ze altijd al deden - er gaat niets stuk.
   */
  text-wrap: balance;
}

/* ---- Kopjes en regels --------------------------------------------------- */

.sec {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  margin-top: 16px;
}

/* "Eerst dit" is oranje: het is de enige plek waar iets vastzit. */
.sec-let-op { color: var(--warn); }

.aandacht { color: var(--warn); font-weight: 600; }

.item {
  display: flex;
  gap: var(--gap-row);
  padding: 10px 0;
  align-items: flex-start;
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: var(--lh-body);
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.mark { width: 30px; flex: 0 0 auto; display: flex; justify-content: center; padding-top: 1px; }
/* Het wapen in de kop: 30 x 30 met hoeken van 8 px (MERK-LOGO.md par. 3). */
.mark img, img.mark { width: 30px; height: 30px; border-radius: 8px; }

.tag {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-a13);
  border: 1px solid var(--gold-a26);
}
.tag.warn { background: var(--warn-a16); border-color: var(--warn-a32); }

.tm {
  width: 44px;
  flex: 0 0 auto;
  font-size: var(--fs-support);
  font-weight: 600;
  color: var(--ink);
  padding-top: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.it { display: block; font-size: var(--fs-list); font-weight: 500; line-height: 1.3; letter-spacing: var(--ls-tight); }
.is { display: block; font-size: var(--fs-meta); color: var(--muted-2); margin-top: 3px; }
.is-let-op { color: var(--warn); }

/* ---- Lege agenda: één regel, verder niets (§17.2c) ---------------------- */

.leeg-regel { padding: 12px 0 4px; }
.leeg-regel-zin { font-size: var(--fs-support); color: var(--muted); margin: 0; line-height: var(--lh-body); }

/* AANVULLING-30 §1: .onderruimte is verwijderd. Het was een tweede, groter
   getal (72 + veilige rand) bovenop de onderrand die .screen.met-tabbalk al
   draagt (var(--onderbalk)) - vandaar de dubbeltelling en het gat. De onderrand
   woont nu op één plek in tokens.css. */

/* "+2 meer": wat er van de agenda af moest toen het niet paste (krimp.js). */
.item-meer {
  justify-content: flex-start;
  padding-left: 56px;
  color: var(--gold-light);
  font-size: var(--fs-support);
  font-weight: 600;
}

/*
 * Het kopje VANDAAG gaat ergens heen, dus het ziet er ook zo uit (§17.4): een
 * pijltje erachter, en de volle breedte zodat het raakvlak niet alleen de vier
 * letters is.
 */
.sec-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  /* Het kopje zelf houdt zijn maten uit .sec; alleen de raakhoogte komt erbij. */
  min-height: var(--tap-min);
  color: inherit;
}
.sec-knop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Contact vastleggen, altijd bereikbaar (§6.2) ---------------------- */

/*
 * De brede knop in de vaste balk vult de balk. `.btn` is een flexvak en zonder
 * breedte krimpt hij om zijn tekst heen; dan staat er een gouden knop van 180
 * punten midden op een balk van 390.
 */
.dock .btn {
  width: 100%;
}

/*
 * De zwevende knop staat BOVEN de tabbalk, niet erop.
 *
 * AANVULLING-30 §1: deze scherm-eigen override is weg. De 78 was de OUDE
 * balkhoogte (AANVULLING-22 maakte hem 56) - precies de scheefstand die §18.58
 * beschrijft. De algemene .fab-regel staat nu op calc(var(--onderbalk) + 16px)
 * en klaart de tabbalk overal, dus hier hoeft niets meer.
 */

/* De regel "N dingen kwamen vandaag op jouw naam" (AANVULLING-14 §9.5) en het
   nieuwste uit Inspiratie (§6): één regel, aanklikbaar, verder niets. */
.vandaag-opjouwnaam .it { color: var(--warn); }
.vandaag-inspiratie { margin-top: 6px; }

/* AANVULLING-19 par. 3: Appelmoes van de dag - een blok, een ding. */
.vandaag-appelmoes .appelmoes-voet { font-size: 12px; margin-top: 2px; }
.appelmoes-inhoud { display: block; width: 100%; text-align: left; background: none;
  border: 0; color: inherit; font: inherit; padding: 6px 0 0; cursor: pointer; }
.appelmoes-inhoud .is { display: block; margin-top: 2px; }
.appelmoes-foto { margin-top: 8px; border-radius: 10px; overflow: hidden; }
.appelmoes-foto img { width: 100%; max-height: 220px; object-fit: cover; display: block; }

/* ---- Eerst dit: de schakelaar en de zonder-datum-regel (par. 6.4) ------- */

.sec.row { justify-content: space-between; align-items: baseline; }
.eerst-wie { font-size: var(--fs-micro); letter-spacing: normal; text-transform: none; }
.eerst-zonder-datum { display: block; padding: 8px 0 2px; font-size: var(--fs-support); }

/* ---- Berichten (BOUWOPDRACHT-8 par. 4.4) -------------------------------- */
.vandaag-melding { align-items: center; gap: 10px; }
.melding-open { text-align: left; }
.melding-open .is { display: block; }