:root {
  --sj-green: #0f6f4c;
  --sj-green-dark: #0c4d3d;
  --turquoise: #28b6a9;
  --warm-orange: #f79b58;
  --surface: #ffffff;
  --surface-soft: #fbf5ed;
  --bg: #f7f2e8;
  --text: #24342f;
  --muted: #5c6b66;
  --border: #d9cec3;
  --shadow: 0 18px 36px rgba(36, 52, 47, 0.08);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 108px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  min-height: 86px;
  background: #fbf5ed;
  border-bottom: 1px solid rgba(36, 52, 47, 0.08);
  box-shadow: 0 1px 6px rgba(36, 52, 47, 0.08);
}
.brand-block { display: flex; align-items: center; gap: 16px; }
.logo-shell {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(36, 52, 47, 0.08);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logo-shell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 16px;
}

.login-logo {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,111,76,.10);
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-copy { display: flex; flex-direction: column; justify-content: center; }
.brand { font-size: 1rem; font-weight: 700; color: var(--sj-green-dark); }
.subtitle { font-size: 0.86rem; color: #8a8a8a; margin-top: 4px; }
.lang-pill {
  border: none;
  background: rgba(15, 111, 76, 0.12);
  color: var(--sj-green-dark);
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 700;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
main { padding: 20px 20px 24px; }
h1 { font-size: 1.5rem; margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 1rem; margin: 0 0 12px; color: var(--sj-green-dark); }
p { line-height: 1.65; margin: 0 0 12px; }
.muted { color: var(--muted); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.hero-card {
  background: #f3faf4;
  color: var(--text);
  padding: 20px 18px 22px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero-greeting {
  font-size: 0.98rem;
  color: var(--sj-green-dark);
  font-weight: 600;
  margin: 0;
}
.hero-copy h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
}
.hero-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
}
.hero-list li {
  position: relative;
  padding-left: 16px;
}
.hero-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--turquoise);
}
.hero-action {
  max-width: 280px;
}
.home-section {
  padding-top: 24px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-heading.between { justify-content: space-between; }
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tile-card {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 24px;
  padding: 18px;
  display: grid;
  gap: 14px;
  text-align: left;
  min-height: 132px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tile-card:hover { transform: translateY(-2px); box-shadow: 0 14px 24px rgba(36, 52, 47, 0.08); }
.tile-illustration {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(40, 182, 169, 0.14);
  color: var(--turquoise);
}
.tile-card strong { font-size: 1rem; color: var(--text); }
.tile-card .muted { margin-top: 6px; }
.for-you-grid {
  display: grid;
  gap: 12px;
}
.for-you-card {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 24px;
  padding: 16px;
}
.text-link {
  border: 0;
  background: none;
  color: var(--sj-green-dark);
  font-weight: 700;
  padding: 0;
}
.quick {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 22px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 128px;
}
.quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(40, 182, 169, 0.18);
  color: var(--turquoise);
  margin-bottom: 10px;
}
.quick-icon svg { width: 24px; height: 24px; fill: currentColor; }
.quick strong { display: block; font-size: 0.95rem; color: var(--text); margin-bottom: 6px; }
.quick .muted { color: var(--muted); font-size: 0.92rem; }
.child-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(36, 52, 47, 0.07);
  border-radius: 24px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(36, 52, 47, 0.05);
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(247,242,232,0.95), rgba(234,221,207,0.95));
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid rgba(92, 107, 102, 0.16);
}
.child-details { flex: 1; }
.child-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.child-name span { font-weight: 400; color: var(--text); }
.child-name strong { font-weight: 700; color: var(--sj-green-dark); }
.child-meta { font-size: 0.92rem; color: var(--muted); margin-top: 6px; }
.child-status {
  display: inline-flex;
  margin-top: 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 111, 76, 0.12);
  color: var(--sj-green-dark);
  font-size: 0.85rem;
  font-weight: 700;
}
.child-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sj-green);
}
.btn {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--sj-green), var(--turquoise));
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(15, 111, 76, 0.18);
}
.btn-secondary {
  background: var(--surface);
  color: var(--sj-green-dark);
  border: 1px solid var(--border);
}
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}
.option.selected {
  border-color: var(--sj-green);
  background: rgba(15, 111, 76, 0.08);
}
.option svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--sj-green-dark); }
label { display: block; font-weight: 700; margin: 16px 0 8px; color: var(--sj-green-dark); }
input, select, textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #ffffff;
  color: var(--text);
}
textarea { min-height: 110px; resize: vertical; }
.notice {
  background: rgba(247, 155, 88, 0.12);
  border: 1px solid rgba(247, 155, 88, 0.28);
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
  color: var(--text);
}
.notice strong { display: block; margin-bottom: 8px; }
.success {
  text-align: center;
  padding: 24px 18px;
}
.success .check {
  font-size: 3rem;
  color: var(--turquoise);
  margin-bottom: 8px;
}
.timeline {
  margin: 18px 0 0;
  padding: 0;
  list-style: none !important;
  color: var(--muted);
}
.timeline li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  list-style: none !important;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm-orange);
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(36, 52, 47, 0.12);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(255, 252, 246, 0.98);
  box-shadow: 0 -10px 30px rgba(36, 52, 47, 0.12);
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
  backdrop-filter: blur(12px);
}
.bottom-nav button {
  min-width: 0;
  min-height: 60px;
  border: 1px solid rgba(15, 111, 76, 0.18);
  border-radius: 16px;
  background: #eef5f1;
  color: #314b43;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 7px rgba(36, 52, 47, 0.06);
  transition: background-color .16s ease, color .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bottom-nav button:hover {
  background: #dfeee7;
  color: var(--sj-green-dark);
  border-color: rgba(15, 111, 76, 0.34);
  box-shadow: 0 4px 10px rgba(36, 52, 47, 0.10);
}
.bottom-nav button:active { transform: translateY(1px) scale(.98); }
.bottom-nav button svg { width: 25px; height: 25px; fill: currentColor; opacity: 1; }
.bottom-nav button span { font-size: 0.79rem; line-height: 1; font-weight: 750; white-space: nowrap; }
.bottom-nav button.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--sj-green-dark), var(--turquoise));
  border-color: var(--sj-green-dark);
  box-shadow: 0 6px 14px rgba(15, 111, 76, 0.26);
  font-weight: 850;
}
.bottom-nav button.active svg { opacity: 1; }
.bottom-nav button:focus-visible { outline: 3px solid rgba(15, 111, 76, 0.42); outline-offset: 2px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.hidden { display: none; }
@media (max-width: 460px) {
  .topbar { padding: 16px 16px 14px; }
  .brand-block { gap: 10px; }
  .hero-header { flex-direction: column; align-items: stretch; }
  .illustration-placeholder { max-width: 100%; }
  .bottom-nav { padding: 7px 6px calc(9px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .bottom-nav button { min-height: 60px; }
  .bottom-nav button span { font-size: 0.74rem; }
}
@media (max-width: 350px) {
  .quick-grid { grid-template-columns: 1fr; }
}

/* Technische pagina's — Sprint 1, ontwikkelblok 2 */
.technical-shell {
  width: min(760px, calc(100% - 32px));
  margin: 48px auto;
}
.technical-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(22px, 5vw, 40px);
  box-shadow: var(--shadow);
}
.technical-kicker {
  color: var(--sj-green);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.health-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.health-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: var(--surface-soft);
}
.health-item p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.health-item > span { white-space: nowrap; border-radius: 999px; padding: 5px 10px; font-size: 0.76rem; font-weight: 800; }
.health-item.ok > span { background: rgba(15,111,76,.12); color: var(--sj-green-dark); }
.health-item.error > span { background: rgba(190,50,50,.12); color: #8e2525; }
.health-item.pending > span { background: rgba(247,155,88,.18); color: #7a461e; }
.technical-action { display: inline-flex; width: auto; text-decoration: none; }
@media (max-width: 560px) {
  .health-item { flex-direction: column; gap: 10px; }
}

/* Sprint 1 - ontwikkelblok 3A correctie v0.2.2 */
.quick-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}
.quick-grid > .quick {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}
@media (max-width: 520px) {
  .quick-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Sprint 1 · Ontwikkelblok 4 — authenticatie */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-page .technical-shell { width: min(520px, 100%); margin: 0; }
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: clamp(24px, 6vw, 42px);
  box-shadow: var(--shadow);
}
.login-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.login-logo { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; }
.login-brand h1 { margin: 3px 0 4px; }
.login-form { display: grid; }
.login-form .btn { margin-top: 22px; }
.form-error { border: 1px solid rgba(190,50,50,.25); background: rgba(190,50,50,.08); color: #842828; border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
.login-help { margin: 22px 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions form { margin: 0; }
.logout-button { min-height: 44px; padding: 0 16px; border: 1px solid rgba(36,52,47,.12); border-radius: 999px; background: #fff; color: var(--sj-green-dark); font: inherit; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.logout-button svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.logout-button:hover { background: rgba(15,111,76,.08); }
.logout-button:focus-visible { outline: 3px solid rgba(37,183,168,.35); outline-offset: 2px; }
.profile-card { display: grid; gap: 24px; }
.profile-summary { display: flex; gap: 16px; align-items: center; }
.profile-avatar { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: rgba(15,111,76,.12); color: var(--sj-green-dark); font-size: 1.5rem; font-weight: 900; }
.profile-summary h2 { margin: 0 0 3px; }
.profile-summary p { margin: 0; }
.profile-primary-role { margin-top: 7px !important; font-weight: 800; color: var(--sj-green-dark); }
.profile-section { display: grid; gap: 10px; }
.profile-section h3 { margin: 0; }
.role-list { display: flex; flex-wrap: wrap; gap: 8px; }
.role-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 11px; border-radius: 999px; background: rgba(36,52,47,.07); color: var(--text); font-size: .88rem; font-weight: 700; }
.role-badge.primary { background: rgba(15,111,76,.12); color: var(--sj-green-dark); }
@media (max-width: 620px) {
  .logout-button span { display: none; }
  .logout-button { width: 44px; padding: 0; justify-content: center; }
}

/* Sprint 1 · Ontwikkelblok 8 — meldingenoverzichten */
.absence-overview-section { display: grid; gap: 18px; }
.absence-list { display: grid; gap: 12px; }
.absence-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  background: var(--surface-soft);
  display: grid;
  gap: 8px;
}
.absence-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.absence-card h3 { margin: 4px 0 0; font-size: 1rem; }
.absence-number { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.absence-class { color: var(--muted); font-weight: 600; font-size: .86rem; }
.absence-period, .absence-reason, .absence-meta, .absence-note, .absence-created { margin: 0; }
.absence-period { font-weight: 750; }
.absence-reason { color: var(--sj-green-dark); font-weight: 800; }
.absence-meta, .absence-created { color: var(--muted); font-size: .83rem; overflow-wrap: anywhere; }
.absence-note { padding: 10px 12px; border-radius: 14px; background: #fff; color: var(--text); white-space: pre-wrap; }
.status-badge { flex: 0 0 auto; border-radius: 999px; padding: 6px 10px; font-size: .72rem; font-weight: 850; }
.status-received { background: rgba(37,183,168,.14); color: #0a6a61; }
.status-pending_director { background: rgba(247,155,88,.20); color: #7a461e; }
.status-approved { background: rgba(15,111,76,.13); color: var(--sj-green-dark); }
.status-rejected { background: rgba(190,50,50,.12); color: #8e2525; }
.status-processed, .status-closed { background: rgba(36,52,47,.09); color: var(--text); }
.empty-state { border: 1px dashed var(--border); border-radius: 18px; padding: 18px; text-align: center; }
.empty-state p { margin: 6px 0 0; }
@media (max-width: 460px) {
  .absence-card-head { flex-direction: column; }
  .status-badge { align-self: flex-start; }
  .section-heading.between { align-items: flex-start; gap: 10px; }
  .logout-button span { display: inline; }
  .logout-button { width: auto; padding: 0 12px; }
}
@media (max-width: 620px) {
  .logout-button span { display: inline; }
  .logout-button { width: auto; padding: 0 12px; justify-content: center; }
}

/* Sprint 1 · Ontwikkelblok 9 — behandelen en historiek */
.absence-treatment { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 9px; }
.absence-treatment label { margin: 0; font-size: .84rem; }
.absence-treatment textarea { margin: 0; min-height: 74px; background: #fff; }
.absence-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-small { width: auto; min-height: 42px; padding: 9px 14px; font-size: .86rem; }
.btn-danger { background: #fff; color: #8e2525; border: 1px solid rgba(190,50,50,.30); }
.btn-danger:hover { background: rgba(190,50,50,.08); }
.absence-decision { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(247,155,88,.12); color: var(--text); white-space: pre-wrap; }
.absence-history { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.absence-history summary { cursor: pointer; color: var(--sj-green-dark); font-weight: 800; }
.absence-history ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.absence-history li { padding-left: 3px; }
.absence-history li strong, .absence-history li span { display: block; }
.absence-history li span { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.absence-history li p { margin: 4px 0 0; font-size: .88rem; white-space: pre-wrap; }
@media (max-width: 460px) {
  .absence-actions { display: grid; }
  .absence-actions .btn-small { width: 100%; }
}


/* Ontwikkelblok 10: duidelijke directieflow en ouderterugkoppeling */
.director-review-section{border-top:4px solid var(--orange,#e9783a)}
.absence-decision{margin-top:12px;padding:12px 14px;border-radius:14px;background:#fff4e8;border:1px solid #f2c393}
.absence-decision p{margin:6px 0 0}
.absence-decision-meta{font-size:.85rem;color:#667085}
.subsection-title{margin:24px 0 10px;font-size:1rem}

/* v0.5.6 - officieel schoollogo in app en login */
.welcome-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), rgba(247,242,232,.88) 50%, var(--bg) 100%);
}
.welcome-page .technical-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 28px 18px;
}
.welcome-card {
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(36,52,47,.08);
  border-radius: 34px;
  box-shadow: 0 24px 60px rgba(36,52,47,.12);
}
.welcome-scene {
  position: relative;
  min-height: 310px;
  padding: 30px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fbffff 0%, #f5fbf7 100%);
}
.welcome-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(82%, 440px);
  max-height: 250px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 22px rgba(36,52,47,.08));
}
.welcome-sun {
  position: absolute;
  top: 34px;
  right: 14%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffe598;
  box-shadow: 0 0 34px rgba(255,229,152,.45);
}
.welcome-cloud {
  position: absolute;
  width: 92px;
  height: 28px;
  border-radius: 999px;
  background: #e8f6f4;
}
.welcome-cloud::before,
.welcome-cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}
.welcome-cloud::before { left: 17px; width: 36px; height: 36px; }
.welcome-cloud::after { right: 16px; width: 44px; height: 44px; }
.welcome-cloud-left { top: 52px; left: 12%; }
.welcome-cloud-right { top: 94px; right: 9%; transform: scale(.75); }
.welcome-copy {
  padding: 34px 34px 28px;
  text-align: center;
}
.welcome-copy h1 {
  margin: 0;
  color: #29404a;
  font-size: clamp(2.25rem, 7vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.welcome-motto {
  position: relative;
  width: fit-content;
  margin: 24px auto 14px;
  color: var(--turquoise);
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-style: italic;
}
.welcome-motto::before,
.welcome-motto::after {
  content: "";
  display: inline-block;
  width: 52px;
  height: 2px;
  margin: 0 14px 6px;
  background: #9fca35;
}
.welcome-intro {
  max-width: 620px;
  margin: 0 auto 24px;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
}
.welcome-start {
  width: min(100%, 360px);
  min-height: 70px;
  margin: 0 auto;
  padding: 16px 28px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(90deg, #12906b, var(--turquoise));
  box-shadow: 0 16px 28px rgba(40,182,169,.24);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.welcome-start:hover { transform: translateY(-2px); box-shadow: 0 20px 32px rgba(40,182,169,.30); }
.welcome-start:focus-visible { outline: 4px solid rgba(40,182,169,.28); outline-offset: 4px; }
.welcome-benefits {
  margin: 0 22px 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-radius: 24px;
  background: #effaf8;
}
.welcome-benefit {
  min-width: 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #38504a;
  font-weight: 650;
  line-height: 1.35;
}
.welcome-benefit + .welcome-benefit { border-left: 1px solid rgba(40,182,169,.22); }
.welcome-benefit-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--turquoise);
  box-shadow: 0 8px 18px rgba(36,52,47,.08);
  font-weight: 900;
}
@media (max-width: 640px) {
  .welcome-page .technical-shell { padding: 12px; }
  .welcome-card { border-radius: 26px; }
  .welcome-scene { min-height: 235px; padding: 24px 14px; }
  .welcome-logo { width: min(88%, 330px); max-height: 205px; }
  .welcome-sun { width: 48px; height: 48px; top: 22px; }
  .welcome-cloud { transform: scale(.72); }
  .welcome-copy { padding: 26px 20px 22px; }
  .welcome-copy h1 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .welcome-motto::before,
  .welcome-motto::after { width: 22px; margin-inline: 7px; }
  .welcome-benefits { grid-template-columns: 1fr; margin: 0 14px 14px; }
  .welcome-benefit + .welcome-benefit { border-left: 0; border-top: 1px solid rgba(40,182,169,.22); }
}


/* Welcome hub redesign v0.4.4 */
.welcome-page .technical-shell {
  max-width: 760px;
  padding: 22px 16px 34px;
}
.welcome-hub {
  padding: 30px 22px 24px;
}
.welcome-hub .welcome-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 8px 8px 22px;
}
.welcome-hub .welcome-logo {
  width: min(86%, 280px);
  max-height: 180px;
  object-fit: contain;
  filter: none;
}
.welcome-hub h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.08;
  color: #223531;
}
.welcome-actions {
  display: grid;
  gap: 14px;
}
.welcome-action-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
  border-radius: 24px;
  text-decoration: none;
  color: #223531;
  box-shadow: 0 14px 28px rgba(34,53,49,.08);
  border: 1px solid rgba(36,52,47,.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.welcome-action-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(34,53,49,.12); }
.welcome-action-card:focus-visible,
.welcome-secondary-button:focus-visible {
  outline: 4px solid rgba(40,182,169,.28);
  outline-offset: 4px;
}
.welcome-action-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  flex: 0 0 58px;
}
.welcome-action-copy { display: flex; flex-direction: column; gap: 4px; }
.welcome-action-copy strong {
  font-size: 1.2rem;
  line-height: 1.2;
}
.welcome-action-copy small {
  font-size: .96rem;
  color: #37534d;
  line-height: 1.35;
}
.welcome-action-absence { background: linear-gradient(135deg, #dbf4eb 0%, #c8efe2 100%); }
.welcome-action-messages { background: linear-gradient(135deg, #dff3f7 0%, #cfeef5 100%); }
.welcome-action-info { background: linear-gradient(135deg, #fff0d8 0%, #ffe7c5 100%); }
.welcome-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-top: 18px;
}
.welcome-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #28b6a9;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 14px 24px rgba(40,182,169,.24);
}
.welcome-secondary-outline {
  background: #fff;
  color: #256a61;
  border: 1px solid rgba(40,182,169,.28);
  box-shadow: none;
}
@media (max-width: 640px) {
  .welcome-page .technical-shell { padding: 14px 12px 24px; }
  .welcome-hub { padding: 24px 16px 18px; border-radius: 26px; }
  .welcome-hub .welcome-logo { width: min(90%, 240px); max-height: 154px; }
  .welcome-action-card { padding: 16px 14px; border-radius: 20px; }
  .welcome-action-icon { width: 52px; height: 52px; font-size: 1.5rem; flex-basis: 52px; }
  .welcome-action-copy strong { font-size: 1.08rem; }
  .welcome-action-copy small { font-size: .9rem; }
  .welcome-secondary-actions { flex-direction: column; }
  .welcome-secondary-button { width: 100%; }
}


/* Welcome page refresh v0.4.5 */
.welcome-page .technical-shell {
  max-width: 860px;
  padding: 20px 16px 34px;
}
.welcome-hub-v045 {
  padding: 28px 22px 24px;
  border-radius: 34px;
  background: linear-gradient(180deg, #fffdf9 0%, #ffffff 100%);
}
.welcome-hub-v045 .welcome-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 4px 6px 22px;
}
.welcome-hub-v045 .welcome-logo {
  width: min(88%, 310px);
  max-height: 190px;
  object-fit: contain;
}
.welcome-wordmark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  color: #203833;
  text-align: center;
}
.welcome-wordmark-school,
.welcome-wordmark-connect {
  font-size: clamp(2rem, 5.8vw, 3.1rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.welcome-wordmark-connect {
  color: #1f6b62;
}
.welcome-connect-node {
  display: inline-block;
  position: relative;
  width: .85em;
  height: .85em;
  margin: 0 .02em;
  border: .12em solid #28b6a9;
  border-radius: 50%;
  vertical-align: -0.07em;
  box-sizing: border-box;
  background: radial-gradient(circle at center, #f7b45e 0 22%, transparent 23% 100%), #dff7f3;
  box-shadow: 0 .05em .12em rgba(36,52,47,.08);
}
.welcome-connect-node::before,
.welcome-connect-node::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #28b6a9;
}
.welcome-connect-node::before {
  width: .16em; height: .16em; top: .12em; left: .12em;
}
.welcome-connect-node::after {
  width: .14em; height: .14em; bottom: .14em; right: .13em; background: #5c7c76;
}
.welcome-slogan {
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.24rem);
  line-height: 1.35;
  color: #2c7b72;
  font-weight: 700;
}
.welcome-hub-v045 .welcome-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.welcome-hub-v045 .welcome-action-card {
  align-items: center;
  min-height: 132px;
  padding: 18px 18px;
  border-radius: 26px;
}
.welcome-hub-v045 .welcome-action-icon {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 8px 16px rgba(36,52,47,.06);
  flex: 0 0 66px;
  color: #1f6b62;
}
.welcome-hub-v045 .welcome-action-icon svg {
  width: 40px; height: 40px; display: block;
}
.welcome-hub-v045 .welcome-action-copy strong {
  font-size: 1.22rem;
}
.welcome-hub-v045 .welcome-action-copy small {
  font-size: .95rem;
}
.welcome-hub-v045 .welcome-action-absence {
  background: linear-gradient(135deg, #dcf3e8 0%, #c8ebdc 100%);
}
.welcome-hub-v045 .welcome-action-messages {
  background: linear-gradient(135deg, #e1f2fb 0%, #d2ecf8 100%);
}
.welcome-hub-v045 .welcome-action-info {
  background: linear-gradient(135deg, #fff1d9 0%, #fee5be 100%);
}
.welcome-hub-v045 .welcome-action-website {
  background: linear-gradient(135deg, #efe9fb 0%, #e6dcfb 100%);
}
.welcome-hub-v045 .welcome-secondary-actions {
  justify-content: center;
  padding-top: 18px;
}
.welcome-hub-v045 .welcome-secondary-button {
  min-width: 220px;
}
@media (max-width: 720px) {
  .welcome-hub-v045 .welcome-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .welcome-page .technical-shell {
    padding: 14px 12px 24px;
  }
  .welcome-hub-v045 {
    padding: 24px 16px 18px;
    border-radius: 28px;
  }
  .welcome-hub-v045 .welcome-logo {
    width: min(92%, 250px);
    max-height: 160px;
  }
  .welcome-wordmark-school,
  .welcome-wordmark-connect {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }
  .welcome-hub-v045 .welcome-action-card {
    min-height: 116px;
    padding: 16px 14px;
    border-radius: 22px;
  }
  .welcome-hub-v045 .welcome-action-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
  .welcome-hub-v045 .welcome-action-icon svg {
    width: 34px; height: 34px;
  }
}


/* Definitieve welkomspagina v0.4.6 */
.welcome-page .technical-shell {
  width: 100%;
  max-width: 590px;
  padding: 18px 12px 28px;
}
.welcome-final {
  overflow: hidden;
  padding: 34px 24px 22px;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(36,52,47,.12);
}
.welcome-final-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 28px;
}
.welcome-symbol-wrap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.welcome-symbol {
  width: 112px;
  height: 108px;
  object-fit: contain;
}
.welcome-rsl {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #187a5f, #16a87d);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.welcome-final-wordmark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .22em;
  margin: 0;
  color: #143c34;
  font-size: clamp(2.05rem, 7.2vw, 3.35rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.045em;
}
.welcome-final-connect {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.welcome-final-connect::first-letter {
  color: #22aaa1;
}

.welcome-final-connect-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .92em;
  height: .92em;
  border: .08em solid #22aaa1;
  border-radius: 50%;
  margin: 0 .035em;
  transform: translateY(.04em);
  box-sizing: border-box;
}
.welcome-final-connect-o .welcome-final-dots {
  margin: 0;
  gap: .06em;
  transform: none;
}
.welcome-final-connect-o .welcome-final-dots i {
  width: .16em;
  height: .16em;
}
.welcome-final-dots {
  display: inline-flex;
  align-items: center;
  gap: .08em;
  margin: 0 .04em 0 -.02em;
  transform: translateY(-.03em);
}
.welcome-final-dots i {
  display: block;
  width: .17em;
  height: .17em;
  border-radius: 50%;
  background: #f7b51d;
}
.welcome-final-dots i:nth-child(2) { background: #f6a91a; }
.welcome-final-dots i:nth-child(3) { background: #2eb9b1; }
.welcome-final-slogan {
  margin: 0;
  color: #118d77;
  font-size: clamp(1.55rem, 5.5vw, 2.25rem);
  line-height: 1.2;
  font-weight: 800;
}
.welcome-final-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.welcome-final-card {
  display: grid;
  grid-template-columns: 76px 1fr 28px;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 22px 22px;
  border-radius: 28px;
  color: #143c34;
  text-decoration: none;
  border: 1px solid rgba(36,52,47,.06);
  box-shadow: 0 10px 24px rgba(36,52,47,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.welcome-final-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(36,52,47,.09);
}
.welcome-final-card:focus-visible,
.welcome-final-login:focus-visible,
.welcome-language:focus-visible {
  outline: 4px solid rgba(40,182,169,.25);
  outline-offset: 4px;
}
.welcome-final-absence { background: linear-gradient(135deg, #effaf6 0%, #e2f5ed 100%); }
.welcome-final-messages { background: linear-gradient(135deg, #edf8fd 0%, #e1f2fa 100%); }
.welcome-final-info { background: linear-gradient(135deg, #fff8ec 0%, #fff0d9 100%); }
.welcome-final-icon {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  color: #099070;
  box-shadow: 0 8px 18px rgba(36,52,47,.05);
}
.welcome-final-icon svg { width: 45px; height: 45px; }
.welcome-final-icon-info::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f8b620;
}
.welcome-final-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.welcome-final-copy strong {
  font-size: 1.35rem;
  line-height: 1.15;
}
.welcome-final-copy small {
  font-size: 1rem;
  line-height: 1.45;
  color: #394f49;
}
.welcome-final-chevron {
  justify-self: end;
  color: #0b967a;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
}
.welcome-final-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(78%, 360px);
  min-height: 62px;
  margin: 22px auto 0;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #21aaa2 0%, #27c2b2 100%);
  color: #fff;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(39,194,178,.22);
}
.welcome-language {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  margin: 16px auto 0;
  padding: 0 14px;
  border: 1px solid rgba(36,52,47,.16);
  border-radius: 12px;
  background: #fff;
  color: #226b63;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.welcome-language-sep { color: #a9b2af; }
@media (max-width: 520px) {
  .welcome-page .technical-shell { padding: 10px 8px 18px; }
  .welcome-final {
    padding: 28px 14px 18px;
    border-radius: 26px;
  }
  .welcome-final-branding { gap: 14px; margin-bottom: 22px; }
  .welcome-symbol { width: 92px; height: 89px; }
  .welcome-rsl { min-height: 28px; padding-inline: 11px; font-size: .9rem; margin-bottom: 7px; }
  .welcome-final-card {
    grid-template-columns: 62px 1fr 22px;
    gap: 14px;
    min-height: 126px;
    padding: 18px 14px;
    border-radius: 22px;
  }
  .welcome-final-icon { width: 62px; height: 62px; border-radius: 18px; }
  .welcome-final-icon svg { width: 38px; height: 38px; }
  .welcome-final-copy strong { font-size: 1.12rem; }
  .welcome-final-copy small { font-size: .91rem; line-height: 1.35; }
  .welcome-final-chevron { font-size: 2.4rem; }
  .welcome-final-login { width: 82%; min-height: 56px; font-size: 1.16rem; }
}


/* Contact card and centered language v0.4.7 */
.welcome-final-contact { background: linear-gradient(135deg, #f7f2fb 0%, #efe8f8 100%); }
.welcome-language { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.welcome-final-icon-info::after { display: none; }
.contact-card { display: grid; gap: 18px; }
.contact-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-group legend { font-weight: 800; margin-bottom: 8px; color: #143c34; }
.contact-option { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 14px; border: 1px solid rgba(36,52,47,.12); border-radius: 18px; background: #fff; cursor: pointer; }
.contact-option input { margin-top: 4px; accent-color: #16a085; }
.contact-option span { display: grid; gap: 3px; }
.contact-option strong { color: #143c34; }
.contact-option small { color: #5c6d68; line-height: 1.35; }
.contact-option.compact { align-items: center; }
.contact-confirm { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.contact-confirm input { accent-color: #16a085; }


/* Speelsere doorklikpagina's v0.5.0 */
#app { padding-top: 18px; }
.screen-intro {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 22px 20px;
  border-radius: 26px;
  border: 1px solid rgba(36,52,47,.06);
  box-shadow: 0 14px 28px rgba(36,52,47,.07);
}
.screen-intro::after {
  content: '';
  position: absolute;
  right: -28px;
  top: -32px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
}
.screen-intro h1 { margin: 4px 0 8px; font-size: 1.75rem; color: #143c34; }
.screen-intro p { margin: 0; max-width: 38ch; color: #3d5750; line-height: 1.45; }
.screen-kicker {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #176e5d;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.screen-intro-absence { background: linear-gradient(135deg,#e8f8f1,#d7f1e6); }
.screen-intro-messages { background: linear-gradient(135deg,#eaf6fd,#d9eef9); }
.screen-intro-children { background: linear-gradient(135deg,#fff7e8,#ffedcf); }
.screen-intro-contact { background: linear-gradient(135deg,#f6f0fb,#ece2f7); }
.screen-intro-profile { background: linear-gradient(135deg,#ecf7f5,#e4f0ff); }
.playful-card { border-color: rgba(36,52,47,.07); box-shadow: 0 14px 28px rgba(36,52,47,.07); }
.child-picker { background: linear-gradient(180deg,#ffffff,#fbfffd); }
.reason-grid { display: grid; gap: 14px; }
.reason-card.option {
  display: grid;
  grid-template-columns: 88px 1fr 22px;
  gap: 16px;
  align-items: center;
  min-height: 118px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(36,52,47,.07);
  border-radius: 24px;
  box-shadow: 0 10px 22px rgba(36,52,47,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.reason-card.option:hover { transform: translateY(-2px); box-shadow: 0 15px 28px rgba(36,52,47,.09); }
.reason-sick { background: linear-gradient(135deg,#e8f9f5,#dff4f0); }
.reason-medical { background: linear-gradient(135deg,#edf6fd,#e3f1fa); }
.reason-dentist { background: linear-gradient(135deg,#fff7e9,#ffedcf); }
.reason-other { background: linear-gradient(135deg,#f6f0fb,#ede6f8); }
.reason-visual {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  color: #0d9276;
}
.reason-visual svg { width: 36px !important; height: 36px !important; }
.reason-visual-image { width: 88px; height: 88px; overflow: hidden; background: #fff; }
.reason-visual-image img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); }
.reason-copy { display: grid; gap: 6px; }
.reason-copy strong { color: #143c34; font-size: 1.12rem; }
.reason-copy small { color: #536760; font-size: .9rem; line-height: 1.35; }
.reason-chevron { color: #0c967b; font-size: 2.35rem; font-weight: 300; }
.absence-detail-card { background: linear-gradient(180deg,#fff,#fbfffd); }
.sick-detail-visual {
  width: min(100%, 320px);
  height: 190px;
  margin: -2px auto 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg,#e9fbf8,#e3f4fb);
}
.sick-detail-visual img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.08); }
.contact-card { background: linear-gradient(180deg,#fff,#fcfaff); }
.contact-option:nth-of-type(4n+1) { background: #effaf6; }
.contact-option:nth-of-type(4n+2) { background: #edf8fd; }
.contact-option:nth-of-type(4n+3) { background: #fff7e9; }
.contact-option:nth-of-type(4n+4) { background: #f6f0fb; }
.contact-option { border-color: rgba(36,52,47,.08); transition: transform .16s ease, border-color .16s ease; }
.contact-option:hover { transform: translateY(-1px); border-color: rgba(22,160,133,.35); }
.children-page-card { background: linear-gradient(180deg,#fff,#fffaf2); }
.profile-card { background: linear-gradient(180deg,#fff,#f5fbfa); }
.absence-overview-section { background: linear-gradient(180deg,#fff,#f8fcff); }
@media (max-width: 520px) {
  .screen-intro { padding: 18px 16px; border-radius: 22px; }
  .screen-intro h1 { font-size: 1.45rem; }
  .reason-card.option { grid-template-columns: 70px 1fr 18px; gap: 12px; min-height: 104px; padding: 12px; border-radius: 21px; }
  .reason-visual { width: 60px; height: 60px; border-radius: 17px; }
  .reason-visual-image { width: 70px; height: 70px; }
  .reason-copy strong { font-size: 1rem; }
  .reason-copy small { font-size: .84rem; }
  .sick-detail-visual { height: 160px; }
}


/* Beeldintegratie v0.5.2 */
.welcome-community-visual {
  width: min(100%, 520px);
  margin: 4px auto 10px;
  display: flex;
  justify-content: center;
}
.welcome-community-visual img {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
}
.reason-hospital { background: linear-gradient(135deg,#eef9f1,#e3f3e8); }
.reason-visual-image img { transform: none; }
.sick-detail-visual { height: 220px; }
.sick-detail-visual img { transform: none; padding: 8px; box-sizing: border-box; }
@media (max-width: 520px) {
  .welcome-community-visual { margin-top: 2px; margin-bottom: 8px; }
  .welcome-community-visual img { max-height: 145px; }
  .sick-detail-visual { height: 175px; }
}


/* v0.5.3 navigation and visual contact refinements */
.screen-intro-main-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  color: #0c967b;
  box-shadow: 0 10px 22px rgba(36,52,47,.08);
}
.screen-intro-main-icon svg { width: 32px; height: 32px; fill: currentColor; }
.contact-option-visual {
  grid-template-columns: auto auto 1fr;
  align-items: center;
}
.contact-person-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid !important;
  place-items: center;
  background: rgba(255,255,255,.86);
  color: #0c967b;
  box-shadow: inset 0 0 0 1px rgba(12,150,123,.1);
}
.contact-person-icon svg { width: 34px; height: 34px; display: block; }
@media (max-width: 640px) {
  .contact-option-visual { grid-template-columns: auto auto 1fr; gap: 10px; padding: 12px; }
  .contact-person-icon { width: 46px; height: 46px; border-radius: 14px; }
  .contact-person-icon svg { width: 30px; height: 30px; }
}


/* Gebundelde UX-aanpassingen v0.5.4 */
.screen-intro { text-align: center; }
.screen-intro .screen-intro-main-icon { margin-left: auto; margin-right: auto; }
.screen-intro-absence { background: linear-gradient(135deg,#e7f8f1,#d8f2e8); }
.screen-intro-messages { background: linear-gradient(135deg,#e8f5fc,#dcedf8); }
.screen-intro-children { background: linear-gradient(135deg,#fff5e4,#ffebcb); }
.screen-intro-contact { background: linear-gradient(135deg,#f6effb,#eadff6); }
.child-card-visual { grid-template-columns: 86px 1fr; align-items: center; }
.child-illustration { width: 78px; height: 94px; display:grid; place-items:center; overflow:hidden; border-radius:18px; background:#fff; }
.child-illustration img { width:100%; height:100%; object-fit:contain; }
.page-home-actions { display:grid; gap:12px; margin:20px 0 10px; }
.page-home-action { display:grid; grid-template-columns:56px 1fr 20px; gap:14px; align-items:center; width:100%; min-height:96px; padding:14px; border:1px solid rgba(36,52,47,.07); border-radius:22px; text-align:left; color:#143c34; cursor:pointer; }
.page-home-action span:nth-child(2){display:grid;gap:4px}.page-home-action strong{font-size:1.05rem}.page-home-action small{color:#536760}.page-home-action b{font-size:2rem;color:#0c967b}
.page-home-icon { width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#fff; }
.page-home-icon svg { width:30px;height:30px;fill:currentColor;color:#0c967b; }
.action-absence{background:#e7f8f1}.action-messages{background:#e6f4fb}.action-info{background:#fff2dc}.action-contact{background:#f3ebfa}
.contact-child-picker { margin-bottom:14px; }
.contact-role-grid,.extra-contact-grid { display:grid; gap:12px; }
.contact-hint { margin:-4px 0 4px; }
.contact-role-option.selected { border-color:#18a98c; box-shadow:0 0 0 3px rgba(24,169,140,.12); }
.contact-person-icon { overflow:hidden; }
.contact-person-icon img { width:100%;height:100%;object-fit:contain; }
.contact-person-pair { display:flex!important; padding:3px; }
.contact-person-pair img { width:50%;height:100%;object-fit:contain; }
.contact-selected-summary { padding:12px 14px; border-radius:16px; background:#edf9f5; color:#24564c; }
.contact-methods { margin-top:4px; }
.contact-add-toggle { padding:12px 14px; border-radius:16px; background:#fff7e8; }
.contact-empty-note { padding:18px; border-radius:18px; background:#f7f8f7; color:#5c6d68; text-align:center; }
@media(max-width:520px){.child-card-visual{grid-template-columns:70px 1fr}.child-illustration{width:64px;height:78px}.page-home-action{grid-template-columns:50px 1fr 16px}.page-home-icon{width:48px;height:48px}.contact-person-icon{width:54px;height:60px}}


/* v0.5.7 refinements */
.screen-banner-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.screen-mini-logo { width:42px; height:42px; border-radius:14px; background:#fff; display:grid; place-items:center; box-shadow:0 8px 18px rgba(36,52,47,.08); overflow:hidden; }
.screen-mini-logo img { width:100%; height:100%; object-fit:contain; }
.screen-kicker { margin-left:auto; }
.inline-meta { color:#55726a; font-size:.9rem; font-weight:600; }
.inline-value-box { padding:12px 14px; border-radius:16px; background:#f8fbfa; border:1px solid rgba(36,52,47,.08); margin-bottom:12px; color:#143c34; font-weight:700; }
.action-home { background:#eef5f1; }
.action-home .page-home-icon svg { color:#0f6f4c; }
.page-home-actions.compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.page-home-action.compact { grid-template-columns:1fr; justify-items:center; text-align:center; min-height:154px; padding:16px 12px; gap:10px; }
.page-home-action.compact span:nth-child(2){ justify-items:center; }
.page-home-action.compact small { line-height:1.35; }
.message-stream-card { background:linear-gradient(180deg,#fff,#f9fcfb); }
.message-stream { display:grid; gap:12px; }
.message-thread-card { border:1px solid rgba(36,52,47,.08); border-radius:20px; padding:14px; background:#fff; box-shadow:0 10px 20px rgba(36,52,47,.04); }
.message-thread-head { display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; margin-bottom:10px; }
.message-thread-head small { color:#5c6d68; display:block; margin-top:2px; }
.message-actor-icon { width:58px; height:58px; border-radius:18px; background:#f7fbfa; display:grid; place-items:center; overflow:hidden; }
.message-actor-icon img { width:100%; height:100%; object-fit:contain; }
.message-thread-body { margin:0; color:#3d5750; }
.message-role-chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:.78rem; font-weight:800; }
.message-role-chip.child { background:#fff2dc; color:#8a5d00; }
.message-role-chip.secretariat { background:#e8f5fc; color:#195d85; }
.message-role-chip.coordinator { background:#effaf6; color:#0f6f4c; }
.message-share-line { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.88rem; color:#446059; }
.message-share-line b { padding:5px 10px; border-radius:999px; background:#f2f7f5; font-size:.8rem; color:#174d43; }
.contact-selected-people { display:flex; flex-wrap:wrap; gap:10px; }
.contact-selected-summary.info { background:#eaf6fd; color:#1f5d7d; }
.contact-sharing-note { padding:12px 14px; border-radius:16px; background:#edf8fd; color:#27556a; font-weight:600; }
@media(max-width:520px){ .page-home-actions.compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .page-home-action.compact{min-height:144px;} .message-thread-head{grid-template-columns:50px 1fr;}.message-role-chip{grid-column:1 / -1; justify-self:start;} }

/* v0.5.9 rolgerichte werkruimte */
.welcome-session-bar {
  width: min(920px, calc(100% - 28px));
  margin: 14px auto -2px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.welcome-session-bar form { margin: 0; }
.welcome-session-back,
.welcome-session-logout {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(20,60,52,.14);
  border-radius: 999px;
  background: #fff;
  color: #0f6f5c;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.welcome-session-logout { background: #f5fbf9; }
.staff-dashboard-grid { display: grid; gap: 14px; margin: 18px 0; }
.staff-dashboard-card,
.staff-quick-link {
  width: 100%;
  display: grid;
  grid-template-columns: 62px 1fr 24px;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(36,52,47,.09);
  border-radius: 22px;
  background: linear-gradient(135deg,#eef9f5,#e4f5ef);
  color: #143c34;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(36,52,47,.05);
}
.staff-dashboard-card:nth-child(2) { background: linear-gradient(135deg,#eef7fd,#e4f0fa); }
.staff-quick-link { background: linear-gradient(135deg,#fff7e9,#ffefda); }
.staff-dashboard-card strong,
.staff-quick-link strong { display:block; font-size:1.08rem; margin-bottom:4px; }
.staff-dashboard-card small,
.staff-quick-link small { display:block; color:#526760; line-height:1.4; }
.staff-dashboard-card b,
.staff-quick-link span:last-child { font-size:2rem; color:#0c967b; }
.staff-dashboard-icon {
  width: 58px; height: 58px; border-radius: 18px; background:#fff;
  display:grid; place-items:center; color:#0c967b;
}
.staff-dashboard-icon svg { width:32px; height:32px; fill:currentColor; }
.staff-safety-card { background: linear-gradient(180deg,#fff,#f8fbfa); }
.staff-nav { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) {
  .welcome-session-bar { justify-content: center; flex-wrap: wrap; }
  .staff-dashboard-card,.staff-quick-link { grid-template-columns:54px 1fr 18px; padding:14px; }
  .staff-dashboard-icon { width:50px;height:50px;border-radius:15px; }
}

/* v0.6.1 backoffice basis */
.staff-nav { grid-template-columns: repeat(4, 1fr); }
.staff-dashboard-card:nth-child(3) { background: linear-gradient(135deg,#fff7e9,#ffefda); }
.backoffice-shell { background: linear-gradient(180deg,#fff,#f8fbfa); }
.backoffice-toolbar { display:grid; gap:14px; margin-bottom:14px; }
.backoffice-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.backoffice-tabs button { border:1px solid rgba(20,60,52,.13); border-radius:999px; padding:9px 13px; background:#fff; color:#31574f; font:inherit; font-weight:800; cursor:pointer; }
.backoffice-tabs button.active { background:#0f8f75; color:#fff; border-color:#0f8f75; }
.backoffice-search { display:grid; gap:6px; color:#31574f; font-weight:800; }
.backoffice-search input { width:100%; min-height:46px; border:1px solid rgba(20,60,52,.16); border-radius:15px; padding:0 14px; font:inherit; color:#183f37; background:#fff; }
.backoffice-summary { display:flex; flex-wrap:wrap; gap:9px; margin:2px 0 15px; }
.backoffice-summary span { padding:8px 11px; border-radius:13px; background:#eef7f4; color:#45615b; font-size:.88rem; }
.backoffice-summary strong { color:#0c715e; }
.backoffice-results { display:grid; gap:12px; }
.backoffice-record { border:1px solid rgba(20,60,52,.10); border-radius:20px; padding:15px; background:#fff; box-shadow:0 9px 22px rgba(36,52,47,.04); }
.backoffice-record-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.backoffice-record h3 { margin:3px 0 3px; font-size:1.08rem; color:#193f37; }
.backoffice-record p { margin:0; color:#5c6f69; font-size:.9rem; }
.backoffice-eyebrow { display:block; color:#657a74; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.status-chip,.count-chip { display:inline-flex; flex:none; align-items:center; padding:6px 9px; border-radius:999px; font-size:.75rem; font-weight:900; }
.status-chip.active { background:#e5f4ed; color:#176a54; }
.status-chip.inactive { background:#f5eeee; color:#8a4b4b; }
.count-chip { background:#e9f5fb; color:#225f7e; }
.backoffice-meta { display:grid; grid-template-columns:1fr auto; gap:12px; margin-top:13px; padding-top:12px; border-top:1px solid rgba(20,60,52,.08); color:#60736e; font-size:.87rem; }
.backoffice-meta strong { color:#284f46; }
.backoffice-links { margin-top:13px; padding-top:12px; border-top:1px solid rgba(20,60,52,.08); }
.backoffice-links > strong { color:#215247; font-size:.9rem; }
.backoffice-links ul { list-style:none; padding:0; margin:9px 0 0; display:grid; gap:8px; }
.backoffice-links li { display:grid; gap:2px; padding:9px 11px; border-radius:14px; background:#f6faf8; color:#46615a; font-size:.85rem; }
.backoffice-links li strong { color:#173f36; }
.backoffice-links li small { color:#72827e; }
.compact-record { padding:14px 15px; }
.backoffice-safety-note { margin-top:16px; display:grid; gap:4px; padding:13px 14px; border-radius:16px; background:#fff5e7; color:#6e5637; font-size:.86rem; }
@media (max-width: 520px) {
  .staff-nav { grid-template-columns: repeat(4, 1fr); }
  .staff-nav span { font-size:.68rem; }
  .backoffice-record-head { gap:8px; }
  .backoffice-meta { grid-template-columns:1fr; gap:3px; }
}

/* v0.6.2 backoffice fase 2 */
.topbar-actions { margin-left:auto; }
.record-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.record-avatar { width:54px; height:54px; object-fit:contain; flex:0 0 54px; border-radius:15px; background:#f4faf8; padding:3px; }
.child-avatar { background:#f6fbf9; }
.staff-avatar { width:64px; height:64px; flex-basis:64px; background:#f3f9f7; }
.parent-avatar-pair { position:relative; width:66px; height:54px; display:block; flex:0 0 66px; }
.parent-avatar-pair img { position:absolute; width:46px; height:46px; object-fit:contain; border-radius:50%; background:#f6faf8; padding:2px; }
.parent-avatar-pair img:first-child { left:0; top:1px; }
.parent-avatar-pair img:last-child { right:0; bottom:0; }
.child-link-row { grid-template-columns:38px 1fr !important; align-items:center; gap:9px !important; }
.child-link-row .record-avatar { width:38px; height:38px; flex-basis:38px; border-radius:11px; padding:1px; }
.child-link-row > span { display:grid; gap:2px; }
.backoffice-summary .summary-focus { background:#e5f5ef; box-shadow:inset 0 0 0 1px rgba(15,143,117,.10); }
.backoffice-results.class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.class-record { min-height:130px; }
.class-record h3 { font-size:1.28rem; }
.class-branch { display:block; margin-top:10px; color:#71827d; line-height:1.35; }
.staff-role-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; padding-top:12px; border-top:1px solid rgba(20,60,52,.08); }
.role-chip, .class-chip { display:inline-flex; align-items:center; min-height:30px; padding:6px 9px; border-radius:999px; background:#eaf7f3; color:#176752; font-size:.78rem; font-weight:800; }
.staff-class-list { margin-top:12px; display:grid; gap:7px; }
.staff-class-list > strong { color:#215247; font-size:.88rem; }
.staff-class-list > div { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.class-chip { background:#eef4fb; color:#275d74; }
.tiny { font-size:.78rem; }
.staff-role-visual { display:flex; justify-content:center; margin:-22px auto 10px; position:relative; z-index:2; pointer-events:none; }
.staff-role-visual img { width:min(190px,42vw); max-height:180px; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(36,52,47,.08)); }
@media (max-width:560px) {
  .backoffice-results.class-grid { grid-template-columns:1fr 1fr; }
  .class-record { padding:12px; min-height:118px; }
  .class-record .backoffice-record-head { display:grid; }
  .class-record .count-chip { justify-self:start; }
  .record-avatar { width:48px; height:48px; flex-basis:48px; }
  .staff-avatar { width:56px; height:56px; flex-basis:56px; }
  .parent-avatar-pair { width:58px; height:49px; flex-basis:58px; }
  .parent-avatar-pair img { width:41px; height:41px; }
}

/* v0.6.3 correcties en schaalbare backoffice */
.build-version { display:block; margin-top:10px; color:#70817c; font-size:.76rem; font-weight:700; }
.backoffice-safety-note small { margin-top:4px; opacity:.78; font-weight:700; }
.backoffice-summary .summary-context { flex-basis:100%; background:transparent; padding:2px 1px 0; color:#72827e; font-size:.78rem; }
.backoffice-results.class-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }
.parent-avatar { background:#fff7ee; }
.parent-link-row { grid-template-columns:38px 1fr !important; align-items:center; gap:9px !important; }
.parent-link-row .record-avatar { width:38px; height:38px; flex-basis:38px; border-radius:11px; padding:1px; }
.parent-link-row .parent-avatar-pair { width:42px; height:36px; flex-basis:42px; }
.parent-link-row .parent-avatar-pair img { width:30px; height:30px; }
.parent-link-row > span { display:grid; gap:2px; }
.staff-role-visual { margin-top:-30px; margin-bottom:12px; }
.staff-role-visual img { width:min(230px,48vw); max-height:210px; }
@media (max-width:560px) {
  .backoffice-results.class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .staff-role-visual img { width:min(200px,52vw); max-height:185px; }
}

/* v0.6.4 UI-consistentie, avatars en documentupload */
.logo-shell {
  width: 82px;
  height: 82px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.logo-shell img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}
.topbar { min-height: 94px; }
.brand-block { gap: 14px; min-width: 0; }
.brand-copy { min-width: 0; }
.brand, .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-banner-top { justify-content: flex-end; min-height: 30px; }
.screen-intro > h1,
.screen-intro > p { max-width: 420px; margin-left: auto; margin-right: auto; text-align: center; }
.staff-dashboard-card > span:nth-child(2) { align-self: center; }
.staff-dashboard-card strong,
.staff-dashboard-card small { text-align: left; }

.absence-child-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.absence-child-avatar {
  width: 56px; height: 62px; flex: 0 0 56px; object-fit: contain;
  border-radius: 15px; background: #fff; padding: 3px;
  border: 1px solid rgba(36,52,47,.06);
}
.absence-card-head { align-items: center; }
.absence-card-head h3 { overflow-wrap:anywhere; }
.absence-reporter {
  display:grid; grid-template-columns: 42px 1fr; align-items:center; gap:10px;
  padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.72);
}
.absence-reporter .record-avatar { width:42px; height:42px; flex-basis:42px; border-radius:12px; padding:1px; }
.absence-reporter .parent-avatar-pair { width:42px; height:38px; flex-basis:42px; }
.absence-reporter .parent-avatar-pair img { width:31px; height:31px; }
.absence-reporter .absence-meta { display:grid; gap:2px; min-width:0; }
.absence-reporter .absence-meta strong { color:var(--text); font-size:.83rem; }
.absence-reporter .absence-meta span { color:var(--muted); font-size:.78rem; overflow-wrap:anywhere; }
.absence-document-chip {
  display:flex; align-items:center; gap:9px; width:max-content; max-width:100%;
  padding:8px 11px; border-radius:13px; background:rgba(40,182,169,.10); color:var(--sj-green-dark);
}
.absence-document-chip > span:last-child { display:grid; gap:1px; min-width:0; }
.absence-document-chip small { color:var(--muted); overflow-wrap:anywhere; }

.attachment-choice-group { border:0; padding:0; margin:4px 0 0; display:grid; gap:9px; }
.attachment-choice-group legend { font-weight:800; color:var(--sj-green-dark); margin-bottom:3px; }
.attachment-option {
  display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start;
  padding:12px; border:1px solid var(--border); border-radius:16px; background:#fff;
  font-weight:400;
}
.attachment-option input { margin-top:3px; accent-color:var(--sj-green); }
.attachment-option span { display:grid; gap:2px; }
.attachment-option strong { color:var(--text); }
.attachment-option small { color:var(--muted); line-height:1.35; }
.attachment-upload-box { display:grid; gap:7px; padding:12px; border-radius:16px; background:#f5faf8; border:1px dashed rgba(15,111,76,.25); }
.attachment-upload-box label { margin:0; }
.attachment-upload-box input[type="file"] { width:100%; padding:10px; border-radius:12px; border:1px solid var(--border); background:#fff; }
.attachment-upload-box small { color:var(--muted); line-height:1.35; }
.selected-file { color:var(--sj-green-dark)!important; font-weight:750; }
.success-document { padding:10px 12px; border-radius:14px; background:rgba(40,182,169,.10); }

@media (max-width: 460px) {
  .logo-shell { width:70px; height:70px; }
  .topbar { min-height:84px; padding-left:12px; padding-right:12px; }
  .brand-block { gap:10px; }
  .brand { font-size:.94rem; }
  .subtitle { font-size:.78rem; }
  .absence-card-head { flex-direction:row; align-items:flex-start; }
  .absence-child-avatar { width:50px; height:56px; flex-basis:50px; }
}


/* v0.6.7-alpha — aanmelden onmiddellijk zichtbaar op welkomstscherm */
.welcome-final-login-top {
  width: min(88%, 390px);
  min-height: 58px;
  margin: 14px auto 18px;
  font-size: 1.28rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 640px) {
  .welcome-final-login-top {
    width: 92%;
    min-height: 56px;
    margin-top: 10px;
  }
}

/* v0.6.9-alpha — rolzichtbaarheid, uniforme kindbeelden en contact per afdeling */
.topbar-actions { display:flex; align-items:center; gap:10px; }
.active-role-chip {
  display:grid;
  gap:1px;
  min-width:108px;
  padding:8px 11px;
  border-radius:16px;
  background:rgba(15,111,76,.10);
  color:var(--sj-green-dark);
  text-align:right;
  line-height:1.15;
}
.active-role-chip span { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.72; }
.active-role-chip strong { font-size:.86rem; }

.screen-banner-top { justify-content:center; }
.screen-kicker { margin:0 auto; text-align:center; }

.child-illustration { width:82px; height:96px; }
.child-illustration img { transform-origin:center; }
.child-illustration img[src*="P01jongenbasis"],
.child-illustration img[src*="P02meisjebasis"],
.child-illustration img[src*="P03meisjetweestaartjes"] { transform:scale(1.62); }

.profile-avatar-image { overflow:hidden; padding:2px; background:#f5fbf8; }
.profile-avatar-image img { width:100%; height:100%; object-fit:contain; }

.contact-hint-centered { text-align:center; margin:0 0 4px; }
.contact-department-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.contact-department {
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(36,52,47,.08);
}
.contact-department-preschool { background:#fff8e9; }
.contact-department-primary { background:#eef8f5; }
.contact-department legend,
.contact-common-roles legend { width:100%; text-align:center; font-size:1.03rem; color:#0c4d3d; }
.contact-department .contact-option { grid-template-columns:auto 1fr; padding:10px; gap:9px; }
.contact-department .contact-option > input { grid-row:1; }
.contact-department .contact-person-icon { grid-row:1 / span 2; width:48px; height:54px; }
.contact-department .contact-option > span:last-child { grid-column:1 / -1; text-align:center; }
.contact-department .contact-option small { display:block; }
.contact-common-roles { margin-top:6px; }
.contact-common-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.contact-common-grid .contact-option { min-width:0; }
.contact-person-pair-large { width:70px; height:62px; }

@media(max-width:520px) {
  .topbar { gap:8px; padding:0 10px; }
  .brand-block { gap:8px; }
  .logo-shell { width:58px; height:58px; }
  .brand-copy { display:none; }
  .active-role-chip { min-width:96px; padding:7px 9px; }
  .active-role-chip strong { font-size:.8rem; }
  .child-illustration { width:68px; height:80px; }
  .contact-department-grid { gap:8px; }
  .contact-department { padding:9px; border-radius:18px; }
  .contact-department .contact-option { padding:8px; }
  .contact-department .contact-person-icon { width:42px; height:48px; }
  .contact-department .contact-option small { font-size:.72rem; }
  .contact-common-grid { grid-template-columns:1fr 1fr; gap:8px; }
}
.child-status.is-absent { background:rgba(202,94,65,.12); color:#8a3f2d; }
.child-status.is-absent::before { background:#c75d43; }
\n\n/* v0.7.0-alpha — één Mijn profiel-fiche + kinddetail */\n.welcome-active-role { display:grid; gap:1px; margin-right:auto; padding:7px 11px; border-radius:14px; background:rgba(15,111,76,.10); color:var(--sj-green-dark); line-height:1.15; }\n.welcome-active-role span { font-size:.68rem; font-weight:700; text-transform:uppercase; opacity:.72; }\n.welcome-active-role strong { font-size:.86rem; }\n.profile-unified-card { gap:28px; }\n.profile-summary-large .profile-avatar { width:82px; height:82px; border-radius:24px; }\n.profile-family-section { border-top:1px solid rgba(36,52,47,.08); padding-top:22px; }\n.profile-family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }\n.child-card-button { width:100%; border:1px solid rgba(36,52,47,.07); text-align:left; color:inherit; cursor:pointer; font:inherit; min-height:142px; margin:0; display:grid; grid-template-columns:96px minmax(0,1fr); }\n.child-card-button:hover { border-color:rgba(15,111,76,.28); box-shadow:0 12px 28px rgba(36,52,47,.09); transform:translateY(-1px); }\n.child-card-button .child-illustration { width:88px; height:108px; padding:2px; }\n.child-card-button .child-illustration img { width:100%; height:100%; object-fit:contain; transform:none !important; }\n.child-card-link { margin-top:10px; color:var(--sj-green-dark); font-weight:800; font-size:.86rem; }\n.profile-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid rgba(36,52,47,.08); padding-top:22px; }\n.child-detail-card { display:grid; gap:22px; }\n.child-detail-hero { display:grid; grid-template-columns:132px 1fr; gap:22px; align-items:center; }\n.child-detail-image { width:128px; height:150px; display:grid; place-items:center; overflow:hidden; border-radius:24px; background:#fff; border:1px solid rgba(36,52,47,.07); }\n.child-detail-image img { width:100%; height:100%; object-fit:contain; }\n.child-detail-hero h2 { margin:0 0 5px; }\n.child-detail-action { width:100%; }\n.child-history-section { border-top:1px solid rgba(36,52,47,.08); padding-top:18px; }\n@media(max-width:700px){\n  .profile-family-grid,.profile-settings-grid{grid-template-columns:1fr;}\n  .child-card-button{grid-template-columns:88px minmax(0,1fr);}\n  .child-card-button .child-illustration{width:80px;height:100px;}\n}\n@media(max-width:520px){\n  .welcome-session-bar{flex-wrap:wrap;}\n  .welcome-active-role{order:-1;width:100%;margin:0 0 4px;text-align:center;}\n  .child-detail-hero{grid-template-columns:96px 1fr;gap:14px;}\n  .child-detail-image{width:94px;height:116px;border-radius:18px;}\n  .profile-summary-large .profile-avatar{width:72px;height:72px;}\n}\n
/* v0.7.4-alpha — compact profiel, rolwissel en genormaliseerde kindfiguren */
.welcome-session-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.welcome-active-role {
  grid-column: 2;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: center;
  color: var(--sj-green-dark);
  white-space: nowrap;
}
.welcome-active-role span {
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
  opacity: 1;
}
.welcome-active-role strong { font-size: inherit; font-weight: 850; margin-left: .22em; }
.welcome-session-bar form { grid-column: 3; justify-self: end; }

.profile-compact-card { gap: 20px; }
.profile-summary-compact { align-items: center; gap: 18px; }
.profile-identity { min-width: 0; display: grid; gap: 10px; }
.profile-identity h2 { margin: 0; }
.profile-role-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-role-choice {
  border: 1px solid rgba(36,52,47,.14);
  border-radius: 999px;
  background: #edf1ef;
  color: #52645f;
  min-height: 38px;
  padding: 0 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.profile-role-choice:hover { border-color: rgba(15,111,76,.32); color: var(--sj-green-dark); }
.profile-role-choice.active {
  background: var(--sj-green-dark);
  color: #fff;
  border-color: var(--sj-green-dark);
  cursor: default;
}
.profile-role-empty { color: var(--muted); font-weight: 700; }
.profile-family-section { padding-top: 18px; }
.profile-personal-settings { border-top: 1px solid rgba(36,52,47,.08); padding-top: 16px; gap: 8px; }
.profile-language-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-language-row > span { font-weight: 750; }
.profile-language-row select { width: min(280px, 52%); }

.child-card-button .child-illustration,
.child-detail-image { overflow: hidden; }
.child-card-button .child-illustration img,
.child-detail-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

@media(max-width:520px) {
  .welcome-session-bar { grid-template-columns: 1fr auto; }
  .welcome-active-role { grid-column: 1; width: auto; margin: 0; text-align: left; justify-self: start; }
  .welcome-session-bar form { grid-column: 2; }
  .welcome-active-role span { font-size: .88rem; }
  .profile-summary-compact { align-items: flex-start; }
  .profile-language-row { align-items: stretch; flex-direction: column; }
  .profile-language-row select { width: 100%; }
}

/* v0.7.5-alpha — sessiebalk geïntegreerd in de witte homekaart */
.welcome-final > .welcome-session-bar {
  width: 100%;
  margin: 0;
  padding: 18px 28px 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}
.welcome-final > .welcome-session-bar .welcome-active-role {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: center;
  white-space: nowrap;
}
.welcome-final > .welcome-session-bar .welcome-active-role span {
  display: inline-flex;
  align-items: baseline;
  gap: .38em;
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
  opacity: 1;
}
.welcome-final > .welcome-session-bar .welcome-active-role strong {
  margin: 0;
  font-size: inherit;
  font-weight: 850;
}
.welcome-final > .welcome-session-bar form {
  grid-column: 3;
  justify-self: end;
  margin: 0;
}
@media (max-width: 620px) {
  .welcome-final > .welcome-session-bar {
    padding: 14px 16px 6px;
    grid-template-columns: 1fr auto;
  }
  .welcome-final > .welcome-session-bar .welcome-active-role {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .welcome-final > .welcome-session-bar form { grid-column: 2; }
  .welcome-final > .welcome-session-bar .welcome-active-role span { font-size: .88rem; }
}


/* v0.7.6-alpha — compacte home: acties sneller zichtbaar */
.welcome-page .technical-shell {
  max-width: 920px;
  padding-top: 12px;
}
.welcome-final {
  padding: 0 26px 20px;
}
.welcome-final > .welcome-session-bar {
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(36,52,47,.08);
}
.welcome-session-logout {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
}
.welcome-compact-branding {
  margin: 0;
  padding: 20px 12px 16px;
  gap: 14px;
}
.welcome-compact-logo-line {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.welcome-compact-logo-line .welcome-symbol-wrap {
  flex: 0 0 auto;
  align-items: center;
}
.welcome-compact-logo-line .welcome-symbol {
  width: 78px;
  height: 76px;
}
.welcome-compact-logo-line .welcome-rsl {
  min-height: 27px;
  padding: 0 10px;
  margin: 0 0 0 -2px;
  font-size: .82rem;
}
.welcome-compact-brand-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  text-align: left;
}
.welcome-compact-brand-copy .welcome-final-wordmark {
  justify-content: flex-start;
  font-size: clamp(1.75rem, 4.6vw, 2.55rem);
  line-height: 1;
}
.welcome-compact-brand-copy .welcome-final-slogan {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  text-align: left;
}
.welcome-final-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.welcome-final-card {
  grid-template-columns: 58px minmax(0,1fr) 18px;
  gap: 12px;
  min-height: 116px;
  padding: 16px;
  border-radius: 22px;
}
.welcome-final-icon {
  width: 58px;
  height: 58px;
  border-radius: 17px;
}
.welcome-final-icon svg { width: 34px; height: 34px; }
.welcome-final-copy { gap: 5px; }
.welcome-final-copy strong { font-size: 1.05rem; }
.welcome-final-copy small { font-size: .82rem; line-height: 1.3; }
.welcome-final-chevron { font-size: 2rem; }
.welcome-compact-footer {
  margin-top: 14px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.welcome-community-visual-compact {
  width: min(100%, 390px);
  height: 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.welcome-community-visual-compact img {
  max-width: 100%;
  max-height: 112px;
  object-fit: contain;
}
.welcome-school-link {
  color: #147e69;
  font-weight: 800;
  text-decoration: none;
  font-size: .9rem;
}
.welcome-school-link:hover { text-decoration: underline; }
.welcome-language { margin-top: 10px; }

@media (max-width: 700px) {
  .welcome-page .technical-shell { max-width: 590px; padding-top: 8px; }
  .welcome-final { padding: 0 14px 16px; }
  .welcome-final > .welcome-session-bar { min-height: 58px; padding: 10px 4px; }
  .welcome-compact-branding { padding: 14px 4px 12px; }
  .welcome-compact-logo-line { gap: 10px; }
  .welcome-compact-logo-line .welcome-symbol { width: 62px; height: 60px; }
  .welcome-compact-logo-line .welcome-rsl { min-height: 23px; padding: 0 8px; font-size: .72rem; }
  .welcome-compact-brand-copy .welcome-final-wordmark { font-size: clamp(1.45rem, 7vw, 2rem); }
  .welcome-compact-brand-copy .welcome-final-slogan { font-size: .95rem; }
  .welcome-final-actions { grid-template-columns: 1fr; gap: 9px; }
  .welcome-final-card {
    min-height: 92px;
    grid-template-columns: 50px minmax(0,1fr) 18px;
    padding: 12px;
    border-radius: 18px;
  }
  .welcome-final-icon { width: 50px; height: 50px; border-radius: 15px; }
  .welcome-final-icon svg { width: 30px; height: 30px; }
  .welcome-final-copy strong { font-size: 1rem; }
  .welcome-final-copy small { font-size: .78rem; }
  .welcome-community-visual-compact { height: 92px; }
  .welcome-community-visual-compact img { max-height: 88px; }
}

@media (max-width: 430px) {
  .welcome-final > .welcome-session-bar .welcome-active-role span { font-size: .8rem; }
  .welcome-session-logout { min-height: 38px; padding-inline: 13px; font-size: .86rem; }
  .welcome-compact-logo-line { align-items: center; }
  .welcome-compact-logo-line .welcome-symbol { width: 54px; height: 52px; }
  .welcome-compact-brand-copy .welcome-final-wordmark { font-size: 1.36rem; gap: .12em; }
  .welcome-compact-brand-copy .welcome-final-slogan { font-size: .85rem; }
  .welcome-final-copy small { display: none; }
  .welcome-final-card { min-height: 76px; }
}

/* v0.7.7-alpha — compactere header, homogene rol/afmeldbediening en minder staff-witruimte */
.topbar {
  min-height: 74px;
  padding: 7px 14px;
  gap: 12px;
}
.logo-shell { width: 58px; height: 58px; border-radius: 14px; }
.brand-block { gap: 11px; min-width: 0; }
.brand-copy { min-width: 0; }
.brand { font-size: .92rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtitle { margin-top: 3px; color: #55736a; font-size: .76rem; font-weight: 700; line-height: 1.15; }
.topbar-actions { gap: 7px; }
.topbar-role-control,
.logout-button {
  min-height: 42px;
  border: 1px solid rgba(15,111,76,.17);
  border-radius: 14px;
  background: #f3f9f6;
  color: var(--sj-green-dark);
  box-shadow: none;
}
.topbar-role-control {
  min-width: 90px;
  padding: 6px 11px;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.05;
}
.topbar-role-control span { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .68; }
.topbar-role-control strong { margin-top: 2px; font-size: .82rem; }
.logout-button { padding: 8px 11px; gap: 6px; font-weight: 800; }
.logout-button svg { width: 18px; height: 18px; }
.staff-shell { padding-bottom: 86px; }
.staff-shell main { padding-bottom: 8px; }
.staff-shell .card:last-child { margin-bottom: 6px; }

@media(max-width:520px) {
  .topbar { min-height: 66px; padding: 6px 9px; }
  .logo-shell { width: 50px; height: 50px; }
  .brand-block { gap: 8px; }
  .brand { font-size: .82rem; }
  .subtitle { font-size: .68rem; }
  .topbar-role-control { min-width: 74px; padding: 5px 8px; }
  .topbar-role-control strong { font-size: .75rem; }
  .logout-button { min-height: 40px; padding: 7px 9px; }
  .logout-button span { font-size: .76rem; }
}


/* v0.7.8-alpha — klasleerkracht: eigen klas, registreren en afspraak */
.teacher-dashboard-grid .staff-dashboard-card { min-height: 118px; }
.teacher-absence-card,.teacher-register-card,.appointment-card { max-width: 940px; margin-inline:auto; }
.teacher-absence-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid rgba(36,52,47,.09); }
.teacher-absence-row:last-child { border-bottom:0; }
.teacher-absence-row > div { display:grid; gap:4px; }
.teacher-absence-row > div:last-child { justify-items:end; }
.teacher-absence-row small { color:var(--muted); }
.teacher-register-card label { display:grid; gap:7px; margin:0 0 16px; font-weight:750; color:var(--sj-green-dark); }
.teacher-register-card select,.teacher-register-card input,.teacher-register-card textarea { width:100%; padding:13px 14px; border:1px solid rgba(36,52,47,.18); border-radius:14px; background:#fff; font:inherit; color:var(--text); }
.appointment-role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.appointment-role-grid .contact-option { min-height:122px; }
@media(max-width:700px){.teacher-absence-row{grid-template-columns:1fr}.teacher-absence-row>div:last-child{justify-items:start}.appointment-role-grid{grid-template-columns:1fr}}

/* v0.8.1-alpha — responsive teamruimte, Dreambord en Klusjes */
@media (min-width: 900px) {
  .app-shell { max-width: 1240px; width: min(1240px, calc(100% - 40px)); padding-bottom: 112px; }
  .topbar { border-radius: 0 0 22px 22px; position: sticky; display:grid; grid-template-columns:1fr auto 1fr; min-height:84px; padding:8px 20px; }
  .brand-block { grid-column:2; justify-self:center; text-align:center; }
  .brand-copy { text-align:left; }
  .topbar-actions { grid-column:3; justify-self:end; margin-left:0; }
  .staff-shell main { max-width: 1160px; margin: 0 auto; padding: 18px 24px 18px; }
  .staff-dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
  .staff-dashboard-card { min-height:118px; }
  .screen-intro { max-width: 1160px; margin: 0 auto 16px; padding:16px 22px; }
  .screen-intro-main-icon { width:46px; height:46px; }
  .screen-intro h1 { font-size:1.55rem; margin:2px 0 5px; }
  .screen-intro p { font-size:.95rem; }
  .card { max-width:1160px; margin-left:auto; margin-right:auto; }
  .appointment-role-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .appointment-role-grid .contact-option:last-child:nth-child(3n+2) { grid-column:2; }
  .bottom-nav { width:min(980px,calc(100% - 48px)); bottom:14px; border:1px solid rgba(36,52,47,.12); border-radius:20px; padding:8px; }
  .bottom-nav button { min-height:54px; flex-direction:row; gap:8px; }
  .bottom-nav button svg { width:21px; height:21px; }
}
@media (min-width: 1400px) {
  .app-shell { max-width: 1360px; }
  .staff-shell main { max-width:1240px; }
  .card,.screen-intro { max-width:1240px; }
  .staff-dashboard-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width: 700px) and (max-width: 899px) {
  .app-shell { max-width:820px; width:calc(100% - 24px); }
  .staff-shell main { padding-inline:16px; }
  .staff-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .appointment-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.dream-card { background:linear-gradient(135deg,#fff8d9,#f2f5d8)!important; }
.dreamboard-intro { display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#fff7ce,#ecf6dc); border:1px solid rgba(215,174,52,.2); }
.dreamboard-spark { width:68px; height:68px; border-radius:22px; background:#fff; display:grid; place-items:center; font-size:2rem; box-shadow:0 10px 24px rgba(87,76,34,.08); flex:0 0 auto; }
.dreamboard-intro h2 { margin:0 0 4px; color:#405d38; }
.dreamboard-intro p { margin:0; color:#5d6b54; }
.dreamboard-compose label,.chore-form-card label { display:grid; gap:7px; margin:0 0 14px; font-weight:750; color:var(--sj-green-dark); }
.dreamboard-compose input,.dreamboard-compose textarea,.chore-form-card select,.chore-form-card textarea { width:100%; padding:13px 14px; border:1px solid rgba(36,52,47,.18); border-radius:14px; background:#fff; font:inherit; color:var(--text); }
.dreamboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:16px 0; }
.dream-note { position:relative; min-height:190px; padding:22px; border-radius:20px; background:#fffbe7; border:1px solid rgba(203,177,72,.22); box-shadow:0 10px 24px rgba(60,58,34,.06); transform:rotate(-.3deg); }
.dream-note:nth-child(even) { background:#eef9f4; transform:rotate(.25deg); }
.dream-note h3 { margin:0 0 10px; color:#234d42; }
.dream-note p { white-space:pre-wrap; line-height:1.5; }
.dream-note footer { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:18px; font-size:.78rem; color:#607069; }
.dream-note footer span { padding:3px 8px; border-radius:999px; background:rgba(15,111,76,.08); }
.dream-note-pin { position:absolute; top:10px; right:13px; color:#e0a623; }

.chore-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.chore-locations { margin:8px 0 16px; border:1px solid rgba(36,52,47,.12); border-radius:18px; padding:14px; }
.chore-locations legend { padding:0 8px; font-weight:800; color:var(--sj-green-dark); }
.chore-locations { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:9px; }
.chore-locations label { display:flex; align-items:center; gap:8px; margin:0; padding:9px 10px; border-radius:12px; background:#f7faf8; font-weight:650; }
.chore-card { padding:16px 0; border-bottom:1px solid rgba(36,52,47,.1); }
.chore-card:last-child { border-bottom:0; }
.chore-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.chore-head h3 { margin:4px 0 8px; }
.chore-branch { font-size:.76rem; font-weight:850; text-transform:uppercase; letter-spacing:.04em; color:#0f6f4c; }
.chore-card p { margin:6px 0; }
.chore-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.appointment-inbox-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; padding:14px 0; border-bottom:1px solid rgba(36,52,47,.09); }
.appointment-inbox-row:last-child { border-bottom:0; }
.appointment-inbox-row > div { display:grid; gap:4px; }
.appointment-inbox-row > div:nth-child(2) { text-align:right; }
.appointment-inbox-row p { grid-column:1/-1; margin:0; }
.appointment-inbox-row small,.appointment-inbox-row time { color:var(--muted); }

@media(max-width:699px){
  .chore-form-grid { grid-template-columns:1fr; }
  .dreamboard-intro { align-items:flex-start; }
  .dreamboard-spark { width:54px; height:54px; border-radius:17px; }
  .appointment-inbox-row { grid-template-columns:1fr; }
  .appointment-inbox-row > div:nth-child(2) { text-align:left; }
}

/* v0.8.1-alpha — responsive kwaliteitsronde */
.chore-hero{display:flex;align-items:center;gap:18px;max-width:1160px;margin:0 auto 14px;padding:16px 20px;border-radius:22px;background:linear-gradient(135deg,#e9f9f4,#eef6ff);border:1px solid rgba(15,111,76,.12)}
.chore-hero img{width:92px;height:92px;object-fit:contain;flex:0 0 auto}.chore-hero h2{margin:0 0 5px;color:var(--sj-green-dark)}.chore-hero p{margin:0;color:var(--muted)}
@media (min-width:640px){
  .app-shell.staff-shell{max-width:none;width:100%;margin:0 auto;padding-left:clamp(12px,2vw,30px);padding-right:clamp(12px,2vw,30px)}
  .staff-shell main{width:min(1180px,100%);margin:0 auto;padding:18px clamp(12px,2vw,24px) 28px}
  .staff-shell .screen-intro,.staff-shell .card,.staff-shell .dreamboard-grid,.staff-shell .chore-hero{width:min(1120px,100%);max-width:none;margin-left:auto;margin-right:auto}
  .staff-shell .bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:min(980px,calc(100% - 32px))}
  .appointment-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.appointment-role-grid .contact-option{min-height:112px}
}
@media (min-width:1000px){
  .staff-shell .topbar{width:min(1180px,calc(100% - 40px));margin:0 auto;border-radius:0 0 22px 22px}
  .staff-shell .screen-intro{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;gap:16px}
  .staff-shell .screen-intro-main-icon{margin:0}.staff-shell .screen-intro-copy{text-align:left}
  .appointment-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .appointment-role-grid .contact-option:last-child:nth-child(3n+2){grid-column:auto}
  .chore-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1450px){
  .staff-shell main,.staff-shell .topbar{width:min(1320px,calc(100% - 64px))}
  .staff-shell .screen-intro,.staff-shell .card,.staff-shell .dreamboard-grid,.staff-shell .chore-hero{width:min(1240px,100%)}
}
@media(max-width:639px){.chore-hero{align-items:flex-start}.chore-hero img{width:70px;height:70px}.staff-shell .bottom-nav{width:calc(100% - 20px)}}

.welcome-version {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: #9a9a9a;
}