/* Parent pages: intake, privacy, public documents. Designed at 390px,
   one column, one primary action per screen. The page opens on an ink
   band with a chalk center circle; the card floats on top. */

.ing-area-ouder,
.ing-area-ouder-intake {
  background: var(--ing-color-bg);
  position: relative;
}

.ing-area-ouder::before,
.ing-area-ouder-intake::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: var(--ing-ink);
  z-index: 0;
}

/* Chalk center circle on the pitch, pure decoration. */
.ing-area-ouder::after,
.ing-area-ouder-intake::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -70px;
  width: 260px;
  height: 260px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  z-index: 0;
}

.ing-area-ouder .ing-topbar-simple,
.ing-area-ouder-intake .ing-topbar-simple {
  background: transparent;
  position: relative;
  z-index: 1;
  text-align: center;
}

.ing-area-ouder .ing-main,
.ing-area-ouder-intake .ing-main {
  position: relative;
  z-index: 1;
}

.ing-ouder-card {
  max-width: 640px;
  margin: var(--ing-space-2) auto var(--ing-space-5);
  box-shadow: var(--ing-shadow-lg);
  animation: ing-rise 250ms ease both;
}

@keyframes ing-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Consent styling lives in the club style; the old green frame
   from sprint 2 is gone. */

.ing-privacy-link {
  text-align: center;
  margin-top: var(--ing-space-4);
  font-size: var(--ing-text-sm);
}

/* Done screen: the ball gets its moment. */

.ing-done {
  text-align: center;
  padding: var(--ing-space-7) var(--ing-space-5);
}

.ing-done-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--ing-space-4);
  border-radius: 50%;
  background: var(--ing-color-primary);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ing-doc {
  max-width: 560px;
  margin: var(--ing-space-4) auto;
}

.ing-car-details {
  margin-top: var(--ing-space-3);
  padding: var(--ing-space-3);
  background: var(--ing-color-bg);
  border-radius: var(--ing-radius);
}

@media (prefers-reduced-motion: reduce) {
  .ing-ouder-card,
  .ing-cheer.is-cheering {
    animation: none;
  }
}

/* Sprint 3: status page, mini match cards, attendance and confetti. */
.ing-minimatch-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ing-minimatch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--ing-color-border);
  border-radius: var(--ing-radius-sm);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}

.ing-minimatch:hover {
  border-color: var(--ing-color-primary);
}

.ing-status-head h1 {
  margin-bottom: 4px;
}

.ing-status-when {
  font-weight: 600;
  margin: 0 0 4px;
}

.ing-teambar {
  background: var(--ing-color-primary-soft);
  color: var(--ing-color-primary-deep);
  border-radius: var(--ing-radius-sm);
  padding: 12px 14px;
  margin: 0 0 16px;
  font-weight: 600;
}

.ing-own-tasks {
  border-inline-start: 4px solid var(--ing-color-primary);
}

.ing-slot-group h3 {
  margin: 14px 0 8px;
  font-size: 15px;
}

.ing-slot-open {
  border-style: dashed;
}

.ing-attendance-count {
  font-weight: 600;
  margin: 0 0 10px;
}

.ing-ouder-footlink {
  text-align: center;
  margin: 18px 0 6px;
}

.ing-complete {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  padding: 18px 14px;
  margin: 0 0 14px;
  border-radius: var(--ing-radius-sm);
  background: var(--ing-color-primary-soft);
}

.ing-confetti-piece {
  position: absolute;
  top: -12px;
  inset-inline-start: var(--ing-confetti-x, 50%);
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--ing-color-primary);
  opacity: 0;
  animation: ing-confetti-fall 2.4s ease-in var(--ing-confetti-delay, 0s) 1 forwards;
}

.ing-confetti-piece:nth-child(3n) {
  background: var(--ing-color-warn);
  height: 9px;
}

.ing-confetti-piece:nth-child(4n) {
  background: var(--ing-ok, var(--ing-color-primary));
  width: 6px;
}

@keyframes ing-confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateY(130px) rotate(300deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ing-confetti-piece {
    animation: none;
    opacity: 0;
  }
}

/* Sprint 4a: calendar block. */
.ing-agenda-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Intake in de referentiecomponenttaal ---------- */

/* Wit vel onder de blokken van intake en wedstrijdpagina. Bewust
   niet .ing-sheet: die klasse is de fly-in-overlay uit ing-base. */
.ing-vel,
.ing-intake {
  background: var(--ing-surface);
  box-shadow: var(--ing-shadow);
  margin-block-end: var(--ing-space-5);
}

/* Zonder JS volgt de actieve stijl de aangevinkte radio. */
.ing-choice:has(> input:checked) {
  background: var(--ing-ink);
  color: #fff;
}
.ing-tri-btn:has(> input:checked) {
  background: var(--ing-red);
  color: #fff;
}

.ing-block--ink a { color: #fff; }
.ing-block--ink .ing-consent__text { color: rgba(255, 255, 255, 0.85); }
.ing-block--ink .ing-consent { margin-block: var(--ing-space-3); }
.ing-block--ink .ing-flyin__title { margin-block-start: var(--ing-space-2); }
.ing-block--ink .ing-meta { margin-block-start: var(--ing-space-2); }
.ing-panel .ing-check { margin-block-start: var(--ing-space-3); }

/* Taken: op brede schermen twee of drie kolommen met leesbare
   drieknops rijen; de standaard 280px-minmax gaf op een breed scherm
   zes smalle kolommen met omvallende knoplabels. */
.ing-intake .ing-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}

/* ---------- Scorebordkop met clubbadges ---------- */
.ing-matchhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ing-space-2);
  margin: var(--ing-space-2) 0 var(--ing-space-3);
}
.ing-matchhead__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.ing-matchhead__club {
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  overflow-wrap: anywhere;
}
.ing-matchhead__time {
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 31px;
  font-variant-numeric: tabular-nums;
  padding: 0 var(--ing-space-2);
}
.ing-badge {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ing-badge__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ing-badge--crest {
  background: var(--ing-ink);
  color: #fff;
  transform: skewX(var(--ing-skew));
  border-bottom: 4px solid var(--ing-red);
}
.ing-badge--crest > span {
  display: block;
  transform: skewX(var(--ing-unskew));
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.04em;
}

/* ---------- Reacties op de wedstrijdpagina ---------- */
.ing-comment-list { list-style: none; margin: 0 0 var(--ing-space-3); padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ing-comment { border-inline-start: 3px solid var(--ing-line); padding-inline-start: 12px; }
.ing-comment__author { font-family: var(--ing-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-inline-end: 8px; }
.ing-comment__time { color: var(--ing-ink-3); font-size: var(--ing-text-sm); }
.ing-comment__body { margin: 4px 0 0; }
.ing-comment-form textarea { width: 100%; }


/* Kritische melding: open taken */
.ing-notice--open {
  background: var(--ing-red);
  color: #fff;
  padding: var(--ing-space-3);
}
.ing-notice--open p { margin: 0; font-weight: 500; }

.ing-langgrid { display: flex; gap: 10px; flex-wrap: wrap; }