/* ===================== HOME / STARTSCHERM =====================
   De rustige mobiele ouder-landing (design-handoff "Blinco Startscherm"). Draait
   full-bleed: geen WhatsApp-topbar, het scherm draagt zijn eigen kop. Op de tokens
   uit application.css (accent/bg/surface + de redesign-tints). Apart bestand zodat
   application.css ongemoeid blijft (zelfde patroon als bottom_nav.css). */

.home {
  max-width: 520px; /* op desktop niet eindeloos breed uitlopen */
  margin: 0 auto;
  /* Geen safe-area-top: de gedeelde .app-topbar (eerste kind) draagt die. */
  padding: 0 18px 24px;
  color: var(--color-text);
}

/* ----- Datum-eyebrow boven de begroeting (de bel/avatar staan in de gedeelde app-topbar) ----- */
.home__eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-faint);
}

/* ----- Begroeting ----- */
.home__greeting {
  font-family: var(--font-display);
  font-size: var(--text-32);
  line-height: 1.12;
  font-weight: 600; /* dichtst bij de ontwerp-500; app self-host = 600/700 */
  letter-spacing: -0.2px;
  color: var(--color-text);
}
.home__greeting-sub {
  margin: 9px 0 18px;
  font-size: var(--text-15);
  line-height: 1.45;
  color: var(--color-text-muted);
}


/* ----- Zelf-oplossende taak-kaarten (design §1; géén voortgangsmeter) ----- */
.home__task {
  width: 100%;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 15px 16px;
  box-shadow: var(--shadow-4);
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--curve-decel);
}
.home__task:active { transform: scale(0.985); }
/* Opener-rij ín de uitnodig-kaart: de kaart-chrome zit op .home__invite. */
.home__task--flush {
  margin-top: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.home__task--flush:active { transform: none; background: var(--color-softer); }
.home__task-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home__task-icon svg { width: 23px; height: 23px; }
.home__task-icon--kids,
.home__task-icon--plan { background: var(--color-soft); color: var(--color-accent); }
.home__task-icon--security { background: var(--color-soft); color: var(--color-accent); }
/* Security-taakkaart (design): zelfde kaartvorm als de invite-kaart, met "Niet nu". */
.home__security { margin-top: 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 10px; }
.home__security-dismiss { display: block; width: 100%; padding: 11px 16px 13px; background: none; border: none; border-top: 1px solid var(--color-line); color: var(--color-text-muted); font: inherit; font-size: var(--text-13); font-weight: 700; cursor: pointer; text-align: center; }
.home__task-icon--invite { background: var(--color-coparent-soft); color: var(--color-coparent); }
/* Openstaande-acties-kaart: amber-accent (wacht-op-jou, gelijk aan de Meldingen-toon). */
.home__task--actions { margin-top: 14px; }
.home__task-icon--actions { background: var(--color-amber-soft); color: var(--color-amber); }
.home__task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home__task-title { font-size: var(--text-base); font-weight: 700; }
.home__task-sub { font-size: var(--text-13); color: var(--color-text-muted); margin-top: 1px; }
.home__task-chevron { flex: none; width: 20px; height: 20px; color: var(--color-faint); }
.home__task-chevron--plan { color: var(--color-on-accent); opacity: 0.85; }

/* Uitnodig-kaart: opener-rij + gevouwen "voorlopig alleen"-keuze in één kaart. */
.home__invite {
  margin-top: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.home__invite-solo-form { margin: 0; border-top: 1px solid var(--color-line); }
.home__invite-solo {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  padding: 13px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
}
.home__invite-solo:active { background: var(--color-softer); }

/* ----- Ouderschapsplan-voortgangstegel (terracotta) ----- */
.home__plan {
  display: block;
  margin-top: 12px;
  border-radius: 20px;
  padding: 16px 18px;
  color: var(--color-on-accent);
  text-decoration: none;
  background: var(--gradient-accent);
  box-shadow: 0 10px 24px rgba(140, 55, 30, 0.26);
  transition: transform var(--dur-fast) var(--curve-decel);
}
.home__plan:active { transform: scale(0.985); }
.home__plan-row { display: flex; align-items: center; gap: 13px; }
.home__plan-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home__plan-icon svg { width: 23px; height: 23px; color: var(--color-on-accent); }
.home__plan-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home__plan-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home__plan-title { font-size: var(--text-base); font-weight: 700; margin-top: 2px; }
.home__plan-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.home__plan-bar-track {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.home__plan-bar-fill { display: block; height: 100%; background: var(--color-surface); border-radius: 4px; transition: width 0.3s var(--curve-decel); }
.home__plan-bar-label { flex: none; font-size: var(--text-xs); font-weight: 700; }

/* ----- Onboarding-instap-sheets (kinderen / uitnodigen) ----- */
/* .sheet__lede is generiek — definitie bij de sheet-basis in application.css. */
.onb-form { display: flex; flex-direction: column; gap: 14px; }
.onb-submit { width: 100%; margin-top: 4px; }

/* ----- Plan-keuze-sheet: twee instap-rijen (design ouderschapsplan-onboarding) ----- */
.plan-choices { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.plan-choice-form { margin: 0; }
.plan-choice {
  width: 100%; display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px;
  padding: 16px; box-shadow: var(--shadow-4); cursor: pointer; font: inherit; color: var(--color-text);
  transition: transform var(--dur-fast, 0.14s) ease;
}
.plan-choice:active { transform: scale(0.98); }
.plan-choice__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.plan-choice__icon svg { width: 22px; height: 22px; }
.plan-choice__icon--have { background: var(--color-green-soft); color: var(--color-green); }
.plan-choice__icon--build { background: var(--color-soft); color: var(--color-accent); }
.plan-choice__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plan-choice__title { font-size: var(--text-base); font-weight: 700; }
.plan-choice__sub { font-size: var(--text-13); color: var(--color-text-muted); }
/* Primair (samen opstellen): terracotta gradient + witte tekst. */
.plan-choice--primary {
  border: none; color: var(--color-on-accent);
  background: var(--gradient-accent);
  box-shadow: 0 10px 24px rgba(140, 55, 30, 0.24);
}
.plan-choice--primary .plan-choice__icon--build { background: rgba(255, 255, 255, 0.2); color: var(--color-on-accent); }
.plan-choice--primary .plan-choice__sub { color: rgba(255, 255, 255, 0.9); }

/* ----- Vandaag-blok (eerstvolgende afspraak) ----- */
.home__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 4px 12px;
}
.home__section-title { font-size: var(--text-15); font-weight: 800; }
.home__section-link { font-size: var(--text-13); font-weight: 700; color: var(--color-accent); text-decoration: none; }
.home__today {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 13px 14px;
  box-shadow: var(--shadow-4);
  color: var(--color-text);
  text-decoration: none;
}
.home__today-time { flex: none; width: 46px; text-align: center; }
.home__today-hour { display: block; font-size: var(--text-base); font-weight: 800; line-height: 1; }
.home__today-when { display: block; font-size: var(--text-11); color: var(--color-faint); font-weight: 600; margin-top: 2px; }
.home__today-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-coparent); flex: none; }
.home__today-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home__today-title { font-size: var(--text-15); font-weight: 700; }
.home__today-sub { font-size: var(--text-13); color: var(--color-text-muted); margin-top: 1px; }

/* ----- Feedback ----- */
.home__feedback {
  margin-top: 24px;
  background: var(--color-softer);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}
.home__feedback-title { display: block; font-size: var(--text-base); font-weight: 800; }
.home__feedback-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }
.home__feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 11px 20px;
  border-radius: 13px;
  text-decoration: none;
}
.home__feedback-btn svg { width: 16px; height: 16px; color: var(--color-accent); }