/* Kraamlink · beheerpagina, /maken and the birth preview. Every class is prefixed a-.
   Colours, fonts and radii come from the design tokens in style.css; each alias carries the spec value as a
   fallback, so the page also renders right while a token is still missing. */
.a-page {
  --a-bg: var(--bg, #f8f3ec); --a-surface: var(--surface, #fffdf9); --a-surface-2: var(--surface-2, #f1e8dc);
  --a-ink: var(--ink, #2a2420); --a-soft: var(--ink-soft, #5f564e); --a-faint: var(--ink-faint, #776c62);
  --a-line: var(--line, #e6dccf); --a-line-strong: var(--line-strong, #8f7f70);
  --a-salie: var(--salie, #4c6b51); --a-salie-soft: var(--salie-soft, #e3ebe1);
  --a-boter: var(--boter, #f3d98b); --a-boter-soft: var(--boter-soft, #fbf1cf); --a-oker: var(--oker, #7a5a0a);
  --a-theme: var(--theme, #a24f2b); --a-theme-on: var(--theme-on, #fff); --a-theme-soft: var(--theme-soft, #f5e3d8);
  --a-theme-ink: var(--theme-ink, #8a3f20); --a-theme-edge: var(--theme-edge, transparent);
  --a-error: var(--error, #b3261e); --a-focus: var(--focus, #2a2420);
  --a-display: var(--font-display, "Fraunces", Georgia, "Times New Roman", serif);
  --a-body: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --a-r-sm: var(--r-sm, 10px); --a-r-md: var(--r-md, 16px); --a-r-lg: var(--r-lg, 28px); --a-pill: var(--r-pill, 999px);
  --a-shadow-1: var(--shadow-1, 0 1px 2px rgb(42 36 32 / .06));
  --a-shadow-2: var(--shadow-2, 0 2px 4px rgb(42 36 32 / .04), 0 14px 34px -10px rgb(122 70 40 / .22));
  --a-ease: var(--ease, cubic-bezier(.2, .7, .2, 1)); --a-dur: var(--dur, 200ms);
}

/* --- small shared bits ------------------------------------------------------- */
.a-opt { font-weight: 400; color: var(--a-soft); }
.a-h3 { margin: 26px 0 8px; }
.a-meta { margin: 0 0 8px; color: var(--a-soft); font-size: .95rem; }
.a-empty { color: var(--a-soft); }
.a-row-tight { margin: 6px 0 0; }
.a-section, .a-check, .a-head { scroll-margin-top: 76px; }
.a-chip { display: inline-block; padding: 3px 10px; border-radius: var(--a-pill); background: var(--a-theme-soft); color: var(--a-theme-ink); font-weight: 600; font-size: .85rem; }
.a-inline { align-items: flex-start; }
.a-inline > span { display: block; }
.a-inline .hint { display: block; margin-top: 2px; }
.a-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.a-details { margin: 14px 0 0; }
.a-details > summary { display: flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--a-theme-ink); cursor: pointer; }
.a-details[open] > summary { margin-bottom: 8px; }
.a-details-btn { margin: 4px 0 0; }
.a-details-btn > summary { display: inline-flex; }
.a-details-btn[open] > summary { margin-bottom: 16px; }
.a-page .btn > svg { flex: none; }
.a-art { position: absolute; top: 12px; right: 8px; width: 108px; height: 72px; color: var(--a-theme-ink); pointer-events: none; }
.a-art-ster, .a-kaart-ster { fill: var(--a-boter); }

/* --- header card --------------------------------------------------------------- */
.a-head { position: relative; overflow: hidden; }
.a-head > .eyebrow { margin-top: 4px; padding-right: 100px; }
.a-head h1 { margin: 6px 0 8px; padding-right: 84px; }
.a-head .lead { margin-bottom: 18px; }

/* --- sticky anchor nav ----------------------------------------------------------- */
.a-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--gutter, 16px)) 20px; padding: 10px var(--gutter, 16px);
  background: var(--a-bg); border-bottom: 1px solid var(--a-line);
}
.a-nav::-webkit-scrollbar { display: none; }
.a-nav a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--a-pill); background: var(--a-surface); border: 1px solid var(--a-line);
  color: var(--a-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease);
}
.a-nav a:hover { background: var(--a-theme-soft); color: var(--a-theme-ink); border-color: var(--a-theme-soft); }

/* --- onboarding checklist ---------------------------------------------------------- */
.a-check { background: var(--a-boter-soft); border-color: transparent; }
.a-check-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.a-check-head h2 { margin: 0; font-size: 1.4rem; }
.a-check-count { margin: 0; color: var(--a-oker); font-weight: 700; font-size: .9rem; }
.a-progress {
  display: block; width: 100%; height: 8px; margin: 12px 0 18px; border: 0; border-radius: var(--a-pill); overflow: hidden;
  background: rgb(42 36 32 / .1); accent-color: var(--a-salie); color: var(--a-salie);
}
.a-progress::-webkit-progress-bar { background: rgb(42 36 32 / .1); border-radius: 999px; }
.a-progress::-webkit-progress-value { background: var(--a-salie); border-radius: 999px; transition: width var(--a-dur) var(--a-ease); }
.a-progress::-moz-progress-bar { background: var(--a-salie); border-radius: 999px; }
.a-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.a-check-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.a-check-mark {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--a-line-strong); background: var(--a-surface); color: var(--a-soft); font-weight: 700; font-size: .9rem;
}
.is-done > .a-check-mark { background: var(--a-salie); border-color: var(--a-salie); color: #fff; }
.a-check-title { margin: 4px 0 2px; font-weight: 700; }
.is-done .a-check-title { color: var(--a-soft); font-weight: 600; }
.a-check-hint { margin: 0 0 6px; color: var(--a-soft); font-size: .95rem; }
.a-check-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--a-theme-ink); font-weight: 650; text-decoration: none; }
.a-check-link:hover { text-decoration: underline; }
.a-check-actions { display: grid; gap: 8px; }
.a-mail { display: flex; flex-wrap: wrap; gap: 8px; }
.a-mail input { flex: 1 1 180px; min-width: 0; }

/* --- share tabs with a WhatsApp-style preview ------------------------------------------- */
.a-tablist { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: 0 -3px 14px; }
.a-tablist::-webkit-scrollbar { display: none; }
.a-tab-in { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-tab {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--a-pill); border: 1.5px solid var(--a-line-strong); background: var(--a-surface); color: var(--a-ink);
  font-weight: 600; cursor: pointer; transition: background var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease);
}
.a-tab-in:checked + .a-tab { background: var(--a-theme); color: var(--a-theme-on); border-color: var(--a-theme-edge); }
.a-tab-in:focus-visible + .a-tab { outline: 3px solid var(--a-focus); outline-offset: 2px; }
.a-tabs:has(#t-familie:checked) .a-panel:not([data-tab="familie"]),
.a-tabs:has(#t-vrienden:checked) .a-panel:not([data-tab="vrienden"]),
.a-tabs:has(#t-collegas:checked) .a-panel:not([data-tab="collegas"]),
.a-tabs:has(#t-herinnering:checked) .a-panel:not([data-tab="herinnering"]),
.a-tabs:has(#t-geboren:checked) .a-panel:not([data-tab="geboren"]) { display: none; }
.a-bubble {
  position: relative; max-width: 440px; margin: 0 0 6px 10px; padding: 12px 14px;
  background: var(--a-salie-soft); border-radius: 18px 18px 18px 4px; box-shadow: var(--a-shadow-1);
}
.a-bubble::before { content: ""; position: absolute; left: -9px; bottom: 0; border-left: 10px solid transparent; border-bottom: 12px solid var(--a-salie-soft); }
.a-bubble p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .98rem; line-height: 1.5; }
.a-panel .row > *, .a-step .row > * { flex: 1 1 150px; }
.a-qr-row { margin-top: 18px; }

/* --- colour swatches and the live preview ----------------------------------------------- */
.a-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 0; padding: 0; margin: 0; }
.a-swatches legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.a-swatch {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 48px; padding: 5px 8px 5px 5px;
  border: 1.5px solid var(--a-line); border-radius: var(--a-pill); background: var(--a-surface); cursor: pointer; font-weight: 600; font-size: .92rem;
  transition: border-color var(--a-dur) var(--a-ease), box-shadow var(--a-dur) var(--a-ease);
}
.a-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.a-swatch-dot {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sw); color: var(--sw-on); box-shadow: inset 0 0 0 1px rgb(42 36 32 / .12);
}
.a-swatch-dot svg { opacity: 0; transform: scale(.6); transition: opacity var(--a-dur) var(--a-ease), transform var(--a-dur) var(--a-ease); }
.a-swatch input:checked + .a-swatch-dot svg { opacity: 1; transform: none; }
.a-swatch:has(input:checked) { border-color: var(--a-ink); box-shadow: 0 0 0 1px var(--a-ink); }
.a-swatch:has(input:focus-visible) { outline: 3px solid var(--a-focus); outline-offset: 2px; }
.a-swatches-small .a-swatch { min-height: 44px; }
.a-swatches-small .a-swatch-dot { width: 30px; height: 30px; }
@media (min-width: 520px) {
  .a-swatches { grid-template-columns: repeat(6, 1fr); }
  .a-swatch { flex-direction: column; gap: 6px; padding: 10px 6px 8px; border-radius: var(--a-r-md); }
  .a-swatch-dot { width: 44px; height: 44px; }
  .a-swatches-small .a-swatch { flex-direction: row; padding: 5px 8px 5px 5px; border-radius: var(--a-pill); }
}
.a-preview { padding: 18px 16px; border-radius: var(--a-r-md); background: var(--a-surface-2); }
.a-preview-card {
  position: relative; overflow: hidden; max-width: 300px; margin: 0 auto; padding: 16px;
  border-radius: 18px; background: var(--a-surface); outline: 1px solid var(--a-line); outline-offset: -6px; box-shadow: var(--a-shadow-2);
  font-size: 13px; line-height: 1.35;
}
.a-preview-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 50px; background: var(--a-theme-soft); }
.a-preview-card .a-art { top: 2px; right: 6px; width: 84px; height: 56px; }
.a-preview-eyebrow { position: relative; margin: 0 0 20px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-theme-ink); }
.a-preview-title { position: relative; margin: 10px 0 8px; font: 600 19px/1.15 var(--a-display); color: var(--a-ink); letter-spacing: -.01em; }
.a-preview-chip { display: inline-block; padding: 4px 10px; border-radius: var(--a-pill); background: var(--a-theme-soft); color: var(--a-theme-ink); font-weight: 600; }
.a-preview-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin: 12px 0; border-bottom: 1px solid var(--a-line-strong); }
.a-preview-bars i { flex: 1; height: var(--h); background: var(--a-theme-ink); border-radius: 3px 3px 0 0; }
.a-preview-btn { display: block; text-align: center; padding: 9px; border-radius: var(--a-pill); background: var(--a-theme); color: var(--a-theme-on); border: 1.5px solid var(--a-theme-edge); font-weight: 700; }
/* The theme colours from the spec (§7.3), so the preview follows the radios without JavaScript. */
.a-stijl:has([name="theme"][value="klei"]:checked) .a-preview { --a-theme: #a24f2b; --a-theme-on: #fff; --a-theme-soft: #f5e3d8; --a-theme-ink: #8a3f20; --a-theme-edge: transparent; }
.a-stijl:has([name="theme"][value="salie"]:checked) .a-preview { --a-theme: #4c6b51; --a-theme-on: #fff; --a-theme-soft: #e3ebe1; --a-theme-ink: #4c6b51; --a-theme-edge: transparent; }
.a-stijl:has([name="theme"][value="zand"]:checked) .a-preview { --a-theme: #7a5c3e; --a-theme-on: #fff; --a-theme-soft: #efe4d6; --a-theme-ink: #7a5c3e; --a-theme-edge: transparent; }
.a-stijl:has([name="theme"][value="lila"]:checked) .a-preview { --a-theme: #6b4f8a; --a-theme-on: #fff; --a-theme-soft: #ece5f3; --a-theme-ink: #6b4f8a; --a-theme-edge: transparent; }
.a-stijl:has([name="theme"][value="oceaan"]:checked) .a-preview { --a-theme: #2f5f7a; --a-theme-on: #fff; --a-theme-soft: #e1ecf1; --a-theme-ink: #2f5f7a; --a-theme-edge: transparent; }
.a-stijl:has([name="theme"][value="boter"]:checked) .a-preview { --a-theme: #f0cf6e; --a-theme-on: #2a2420; --a-theme-soft: #fbf1cf; --a-theme-ink: #7a5a0a; --a-theme-edge: #2a2420; }

/* --- house rules ------------------------------------------------------------------------- */
.a-rules { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.a-rules legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.a-rule {
  display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 10px;
  border: 1.5px solid var(--a-line); border-radius: var(--a-r-sm); background: var(--a-surface); font-weight: 500; cursor: pointer;
  transition: background var(--a-dur) var(--a-ease), border-color var(--a-dur) var(--a-ease);
}
.a-rule input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--a-theme); }
.a-rule-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--a-salie-soft); color: var(--a-salie); }
.a-rule:has(input:checked) { border-color: var(--a-salie); background: var(--a-salie-soft); }
@media (min-width: 600px) { .a-rules { grid-template-columns: 1fr 1fr; } }
.a-blocks { display: grid; gap: 8px; }

/* --- slots per day --------------------------------------------------------------------------- */
.a-day { margin-top: 18px; }
.a-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.a-day-head h4 { margin: 0; flex: 1 1 100%; font-size: 1rem; }
.a-day-head h4::first-letter { text-transform: uppercase; }
.a-cap { flex: 1 1 120px; height: 8px; border-radius: var(--a-pill); background: var(--a-surface-2); overflow: hidden; }
.a-cap i { display: block; height: 100%; width: var(--p); background: var(--a-theme-ink); border-radius: var(--a-pill); }
.a-cap-text { font-size: .85rem; color: var(--a-soft); }

/* --- birth form: segmented gender, design picker --------------------------------------------- */
.a-seg { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.a-seg legend { width: 100%; font-weight: 600; padding: 0; margin-bottom: 8px; }
.a-seg-opt {
  flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 14px;
  border: 1.5px solid var(--a-line-strong); border-radius: var(--a-pill); background: var(--a-surface); font-weight: 600; cursor: pointer;
  transition: background var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease);
}
.a-seg-opt input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--a-theme); }
.a-seg-opt:has(input:checked) { background: var(--a-theme-soft); color: var(--a-theme-ink); border-color: var(--a-theme-ink); }
.a-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; }
.a-designs legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.a-design {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  border: 1.5px solid var(--a-line); border-radius: var(--a-r-md); background: var(--a-surface); cursor: pointer;
  font-weight: 600; font-size: .92rem; text-align: center; transition: border-color var(--a-dur) var(--a-ease);
}
.a-design input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.a-design-thumb { position: relative; width: 60px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--a-bg); box-shadow: 0 0 0 1px var(--a-line); transition: box-shadow var(--a-dur) var(--a-ease); }
.a-design input:checked + .a-design-thumb { box-shadow: 0 0 0 2.5px var(--a-ink); }
.a-design:has(input:checked) { border-color: var(--a-ink); }
.a-design:has(input:focus-visible) { outline: 3px solid var(--a-focus); outline-offset: 2px; }
.a-design-hint { font-weight: 400; color: var(--a-soft); font-size: .78rem; line-height: 1.25; }
.a-design-thumb i, .a-design-thumb b, .a-design-thumb u { position: absolute; display: block; }
.a-design-maan i { inset: 5px; border: 1.5px solid var(--a-theme-ink); border-radius: 6px; }
.a-design-maan b { top: 13px; left: 21px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset -5px 3px 0 0 var(--a-theme-ink); }
.a-design-maan u { bottom: 16px; left: 15px; right: 15px; height: 3px; border-radius: 2px; background: var(--a-ink); }
.a-design-takje { background: var(--a-theme-soft); }
.a-design-takje i { inset: 7px; border-radius: 8px; background: var(--a-surface); }
.a-design-takje b { top: 10px; left: 10px; width: 12px; height: 12px; border-radius: 0 100% 0 100%; background: var(--a-salie); }
.a-design-takje u { bottom: 10px; right: 10px; width: 12px; height: 12px; border-radius: 0 100% 0 100%; background: var(--a-salie); }
.a-design-kraamnieuws { background: #fbf8f2; }
.a-design-kraamnieuws i { top: 9px; left: 8px; right: 8px; height: 6px; background: var(--a-ink); border-radius: 1px; }
.a-design-kraamnieuws b { top: 19px; left: 8px; right: 8px; height: 2px; border-top: 1px solid var(--a-ink); border-bottom: 1px solid var(--a-ink); }
.a-design-kraamnieuws u { top: 30px; left: 8px; right: 8px; bottom: 10px; opacity: .55; background: repeating-linear-gradient(var(--a-line-strong) 0 2px, transparent 2px 6px); }

/* --- the kaartje (HTML/CSS). The three designs share one markup; the chosen radio switches it live. --- */
.a-kaart {
  position: relative; aspect-ratio: 4 / 5; width: min(100%, 340px); margin: 0 auto; overflow: hidden;
  border-radius: var(--a-r-lg); box-shadow: var(--a-shadow-2); background: var(--a-bg); color: var(--a-ink);
  text-align: center; font-family: var(--a-body);
}
.a-kaart-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14% 12%; }
.a-kaart::before { content: ""; position: absolute; inset: 18px; border: 2px solid var(--a-theme-ink); border-radius: 18px; pointer-events: none; }
.a-kaart::after { content: ""; position: absolute; inset: 24px; border: 1px solid var(--a-theme-ink); border-radius: 14px; opacity: .45; pointer-events: none; }
.a-kaart-maanart { width: 96px; height: 64px; color: var(--a-theme-ink); margin-bottom: 4px; }
.a-kaart-dot { fill: var(--a-boter); }
.a-kaart-sprig { display: none; position: absolute; color: var(--a-salie); }
.a-kaart-sprig-tl { top: 28px; left: 24px; transform: rotate(-20deg); }
.a-kaart-sprig-br { bottom: 28px; right: 24px; transform: rotate(160deg); }
.a-kaart-mast { display: none; width: 100%; margin-bottom: 10px; }
.a-kaart-mast-title { margin: 0; padding-bottom: 4px; border-bottom: 4px solid var(--a-ink); font: 700 clamp(1.25rem, 7.5vw, 1.7rem)/1.1 var(--a-display); letter-spacing: .02em; text-transform: uppercase; }
.a-kaart-dateline { margin: 2px 0 0; padding-top: 5px; border-top: 1px solid var(--a-ink); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.a-kaart-eyebrow { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-theme-ink); }
.a-kaart-name { margin: 2px 0; font: 600 clamp(1.7rem, 9vw, 2.3rem)/1.1 var(--a-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.a-kaart-name-news { display: none; }
.a-kaart-date { margin: 0; font: italic 400 1rem/1.3 var(--a-display); color: var(--a-soft); }
.a-kaart-facts { margin: 2px 0 0; font-size: .9rem; font-weight: 500; }
.a-kaart-msg { margin: 8px 0 0; max-width: 92%; font: italic 400 .95rem/1.4 var(--a-display); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.a-kaart-sign { margin: 10px 0 0; font: 600 1rem/1.2 var(--a-display); }
.a-kaart-sign::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 8px; border-radius: 50%; background: var(--a-theme-ink); }
.a-kaart-winner { margin: 6px 0 0; font-size: .78rem; font-weight: 600; color: var(--a-theme-ink); }

/* Takje */
.a-kaart-takje, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart { background: var(--a-theme-soft); color: var(--a-ink); }
.a-kaart-takje::before, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart::before { display: block; inset: 16px; border: 0; border-radius: 22px; background: var(--a-surface); }
.a-kaart-takje::after, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart::after { display: none; }
.a-kaart-takje .a-kaart-maanart, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-maanart { display: none; }
.a-kaart-takje .a-kaart-sprig, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-sprig { display: block; }
.a-kaart-takje .a-kaart-mast, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-mast { display: none; }
.a-kaart-takje .a-kaart-eyebrow, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-eyebrow { display: block; }
.a-kaart-takje .a-kaart-name, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-name { color: var(--a-theme-ink); font-weight: 600; }
.a-kaart-takje .a-kaart-name-plain, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-name-plain { display: inline; }
.a-kaart-takje .a-kaart-name-news, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-name-news { display: none; }
.a-kaart-takje .a-kaart-date, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-date { display: block; }
.a-kaart-takje .a-kaart-in, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-in { justify-content: center; padding: 16% 13%; }
.a-kaart-takje .a-kaart-sign::before, .a-birth:has([name="card_style"][value="takje"]:checked) .a-kaart .a-kaart-sign::before { display: block; }

/* Kraamnieuws */
.a-kaart-kraamnieuws, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart { background: #fbf8f2; color: var(--a-ink); }
.a-kaart-kraamnieuws::before, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart::before,
.a-kaart-kraamnieuws::after, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart::after { display: none; }
.a-kaart-kraamnieuws .a-kaart-maanart, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-maanart,
.a-kaart-kraamnieuws .a-kaart-sprig, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-sprig,
.a-kaart-kraamnieuws .a-kaart-eyebrow, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-eyebrow,
.a-kaart-kraamnieuws .a-kaart-name-plain, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-name-plain,
.a-kaart-kraamnieuws .a-kaart-date, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-date,
.a-kaart-kraamnieuws .a-kaart-sign::before, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-sign::before { display: none; }
.a-kaart-kraamnieuws .a-kaart-mast, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-mast { display: block; }
.a-kaart-kraamnieuws .a-kaart-name-news, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-name-news { display: inline; }
.a-kaart-kraamnieuws .a-kaart-name, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-name { color: var(--a-ink); font-weight: 700; }
.a-kaart-kraamnieuws .a-kaart-in, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-in { justify-content: flex-start; padding: 9% 9%; }
.a-kaart-kraamnieuws .a-kaart-sign, .a-birth:has([name="card_style"][value="kraamnieuws"]:checked) .a-kaart .a-kaart-sign { margin-top: auto; }

/* Maan (restated, so switching back from a server-rendered takje or kraamnieuws works) */
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart { background: var(--a-bg); color: var(--a-ink); }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart::before { display: block; inset: 18px; border: 2px solid var(--a-theme-ink); border-radius: 18px; background: transparent; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart::after { display: block; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-maanart { display: block; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-sprig,
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-mast,
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-name-news { display: none; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-eyebrow,
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-date,
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-sign::before { display: block; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-name-plain { display: inline; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-name { color: var(--a-ink); font-weight: 600; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-in { justify-content: center; padding: 14% 12%; }
.a-birth:has([name="card_style"][value="maan"]:checked) .a-kaart .a-kaart-sign { margin-top: 10px; }

/* With JavaScript the canvas kaartje (announce.js) takes over; the HTML one is the no-JS fallback. */
html.js .a-kaart-nojs, .a-step:has(.g-kaart-html) .a-kaart-nojs { display: none; }

/* --- birth preview page and the after-birth steps -------------------------------------------- */
.a-prev-head { text-align: center; padding: 8px 0 18px; }
.a-prev-head h1 { margin: 6px 0 10px; }
.a-prev-head .lead { margin: 0 auto; max-width: 34ch; }
.a-prev-form { gap: 18px; }
.a-prev-actions { display: grid; gap: 10px; margin-top: 4px; }
.a-prev-back { margin-top: 24px; }
.a-born { position: relative; overflow: hidden; }
.a-born > .eyebrow { margin-top: 4px; }
.a-born h2 { padding-right: 84px; }
.a-winner { margin: 0 0 6px; color: var(--a-theme-ink); }
.a-winner svg { vertical-align: -4px; margin-right: 2px; }
.a-steps { list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.a-step { counter-increment: s; position: relative; padding: 16px 16px 16px 58px; border: 1px solid var(--a-line); border-radius: var(--a-r-md); background: var(--a-surface); }
.a-step::before {
  content: counter(s); position: absolute; left: 14px; top: 16px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--a-theme); color: var(--a-theme-on); border: 1.5px solid var(--a-theme-edge); font-weight: 700;
}
.a-step.is-done::before {
  content: ""; background: var(--a-salie) no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  border-color: var(--a-salie);
}
.a-step h3 { margin: 3px 0 4px; font-size: 1.05rem; }
.a-step p { margin: 0 0 10px; }
.a-step .a-bubble { margin-top: 12px; }
.a-step .a-kaart { margin: 8px auto 12px; }

/* --- settings: stil zetten, danger ---------------------------------------------------------- */
.a-stil { margin: 22px 0 8px; padding: 18px 16px; border-radius: var(--a-r-md); background: var(--a-surface-2); }
.a-stil h3 { margin-top: 0; }
.a-stil-off { margin-top: 12px; }
.a-danger > summary { color: var(--a-error); }

/* --- create page ------------------------------------------------------------------------------ */
.a-create-form { margin-top: 20px; }
.a-create-note { margin: 18px 8px 0; color: var(--a-soft); text-align: center; font-size: .95rem; }

/* --- QR cards page ------------------------------------------------------------------------------ */
.a-qr-top { margin: 0 0 12px; }
.qr-card-hint { margin: 6px 0 0; color: var(--a-soft); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) { .a-page * { transition: none !important; } }
@media print { .a-nav { display: none; } }

/* Van/Tot time pairs stay side by side on phones: two short inputs fit easily. */
.a-pair.grid-2{grid-template-columns:1fr 1fr}