/* Ascend Portal (parent self-service) -- layered on top of /style.css's
   shared tokens/components (buttons, form fields, modal, toast, cards,
   empty-state) so the portal looks like one family with the Staff Portal
   rather than a second design system. Only portal-specific bits live here. */

/* Decorative art on the signed-out screen's blank space -- purely
   ornamental (aria-hidden, no pointer events), original flat-shape SVGs in
   the app's own palette so they read as "friendly childcare brand" rather
   than clip-art. Hidden below a certain viewport width so they never crowd
   the actual form on phones/tablets. */
/* Reskins the shared tokens from /style.css (brand color, page background)
   for the portal specifically -- everything downstream that already keys
   off these variables (buttons, active nav tab, badges, links) picks this
   up automatically, no per-component overrides needed. Matches the actual
   Ascend Academy brand mark (navy + gold) instead of the Staff Portal's
   generic admin blue, and warms the page background to feel more like a
   family-facing space than a back-office tool. Scoped here rather than in
   /style.css itself since only the portal should look this way -- staff
   pages keep the original palette. */
:root {
  --brand: #d99a3e;
  --brand-dark: #b87a28;
  --brand-soft: #fbeed9;
  --bg: #fdf8f2;

  --decor-brand: var(--brand);
  --decor-amber: #f2a541;
  --decor-green: #34a373;
  --decor-line: #b8c0cc;
}
.signed-out { position: relative; overflow: hidden; }
.portal-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.decor { position: absolute; opacity: 0.9; }
.decor-kite { width: 90px; top: 6%; left: 8%; transform: rotate(-8deg); }
.decor-blocks { width: 150px; bottom: 8%; left: 6%; }
.decor-balloons { width: 110px; top: 8%; right: 7%; }
.decor-sun { width: 70px; bottom: 10%; right: 9%; }
@media (max-width: 1100px) {
  .decor { display: none; }
}
.portal-auth-card { position: relative; z-index: 1; width: 400px; text-align: left; }
.portal-auth-card h1 { text-align: center; }
.portal-auth-card > div > p:first-of-type { text-align: center; }
.portal-auth-card .field { margin-bottom: 10px; }
.portal-auth-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 12.5px;
}
.portal-auth-links a { color: var(--brand); text-decoration: none; }
.portal-auth-links a:hover { text-decoration: underline; }

/* .checkbox-field's label had no styling of its own in the shared
   stylesheet (only .field label does), so it was rendering as plain body
   text -- different size/weight/color than every other label in the form
   (First name, Last name, Email, ...). Match it here, scoped to the portal
   only so the Staff Portal's own checkboxes (e.g. the child form's photo
   release, which wants to read as a normal sentence) are unaffected. */
.checkbox-field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.portal-auth-card .eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 14px 0 6px;
}
.portal-auth-card .guardian-block { margin-top: 4px; }
.hint-inline { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 11px; }

/* Password fields with a show/hide toggle -- used on signup, the
   verify/reset/invite token screen, and Account's change-password form. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 56px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: none; color: var(--brand); font-size: 11.5px; font-weight: 700;
  padding: 4px 8px;
}
.pw-toggle:hover { text-decoration: underline; }

/* Shown when a password field is left incomplete/invalid (blurred without
   meeting the rules) or a confirm field doesn't match -- red border on the
   input plus a short message, cleared again as soon as it's fixed. */
input.input-invalid { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.field-error { color: var(--red); font-size: 12px; margin-top: 4px; }

.portal-section { margin-bottom: 26px; }
.portal-section h3 { margin: 0 0 4px; font-size: 15px; }
.portal-section .hint { margin: 0 0 12px; }

.guardian-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.guardian-status-active { background: var(--green-soft); color: var(--green); }
.guardian-status-pending { background: var(--amber-soft); color: var(--amber); }
.guardian-status-you { background: var(--brand-soft); color: var(--brand-dark); }
/* A finished program isn't a "pending" state (amber implies waiting on
   something) -- its own calm blue reads as "done", distinct from active
   (green) and withdrawn (amber, reusing guardian-status-pending above). */
.enrollment-status-completed { background: #e3effa; color: #2563a8; }

/* Child cards on the Household tab are clickable (opens program history);
   guardian cards aren't -- only the former gets a pointer + hover lift. */
.child-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.child-card:hover, .child-card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(217, 154, 62, 0.18); outline: none; }
.child-card:focus-visible { box-shadow: 0 6px 16px rgba(217, 154, 62, 0.18), 0 0 0 2px var(--brand); }
/* The card's own "View ->" button re-triggers the same click handler as the
   card -- stop it from also registering as a card-body click underneath it. */
.child-card .rc-actions { position: relative; z-index: 1; }

.guardian-card .rc-top h4 { display: flex; align-items: center; gap: 4px; }

.coming-soon-panel {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  max-width: 560px;
  margin: 24px auto;
}
.coming-soon-panel h2 { color: var(--text); font-size: 17px; margin: 0 0 8px; }
.coming-soon-panel p { margin: 0; }