/* child-edit-redesign-v1 — W-71-1 — Phase D parent child-edit redesign. */
/*
 * Planning: .archon/queued-builds/WAVE-71-child-edit-redesign.md
 *
 * Targets the markup rendered by src/views/dashboard/child-edit.ejs:
 *   .child-edit                         — <section> wrapper
 *   .child-edit__header                 — eyebrow + heading + lead row
 *   .child-edit__eyebrow                — uppercase "Edit child" label
 *   .child-edit__heading                — serif page heading
 *   .child-edit__lead                   — supporting copy + URL preview
 *   .child-edit__url-example            — inline <code> mimic of the URL
 *   .child-edit__back                   — "Back to your children" link row
 *   .child-edit__banner                 — success / error flash
 *   .child-edit__panel                  — card-shaped sub-form panel
 *                                          (photo, details, slug, theme)
 *   .child-edit__panel-heading          — panel <h3>
 *   .child-edit__panel-copy             — panel supporting copy
 *   .child-edit__form                   — the main details form
 *   .child-edit__photo-form             — the multipart photo form
 *   .child-edit__slug-row               — slug input + indicator row
 *   .child-edit__slug-status            — inline availability indicator
 *   .child-edit__slug-status-icon       — leading icon (✓ / ✗ / …)
 *   .child-edit__slug-status-text       — copy beside the icon
 *   .child-edit__theme-swatches         — palette row wrapper
 *   .child-edit__actions                — Save + Cancel row
 *   .child-edit__danger-zone            — "delete this child" panel
 *   .child-edit__delete-form            — soft-delete form
 *
 * WHY a NEW stylesheet (not appended to dashboard.css): Phase D of the
 * redesign system carves each parent-facing surface into a focused
 * stylesheet that sits cleanly on the W56-W67 token + primitive
 * layers. The legacy dashboard.css still hosts the manage-children
 * list rules; this file is the dedicated child-edit layer.
 *
 * WHY no raw hex / rgba in this file: ANTI-RAW-VALUE proof-gate (W56)
 * rejects raw colour literals in any non-token file. Every colour
 * goes through var(--color-*), every shape via var(--radius-*) /
 * var(--shadow-*), every spacing via var(--space-*), every duration /
 * easing via the compound --transition-* presets.
 *
 * WHY mobile-first stack: the W26 mobile-responsiveness baseline (and
 * the W83 R-t11 slow-3G audit) target 320-414px Android viewports
 * first. The page stacks header → photo panel → details panel →
 * slug panel → theme panel → actions → danger zone as a single
 * column on mobile; tablet+ widens the panels and turns the swatch
 * grid into a wider row.
 *
 * WHY each section is wrapped in its own .child-edit__panel "card":
 * grouping related fields into a card makes the edit page scannable
 * — the parent sees four clear sub-jobs (photo, details, URL, look
 * & feel) rather than one flat list of seven fields. This mirrors
 * the W63 card primitive without inheriting its .card class (the
 * panel needs slightly different padding rhythms; sharing the class
 * would force a specificity battle on every override).
 *
 * WHY the theme-colour picker renders as 12 swatches (not 12 hex
 * input fields): the W71 spec literally specifies "color picker
 * (palette of 12 swatches matching Saadjie brand)". A visual radio
 * group is more discoverable on mobile than a colour-picker
 * widget and avoids the platform-specific input[type=color] UA
 * styling that we cannot theme.
 *
 * FLOW: tokens/* → reset.css → cards.css → motion.css → radius-shadow.css
 *       → dashboard.css → child-edit.css (this file).
 *
 * CONSTRAINT: WCAG 1.4.11 — every coloured text + background pair below
 * stays above the 4.5:1 AA floor by composing only token pairs that
 * have been pre-audited (the W58 contrast audit pinned the safe
 * pairings).
 */

/* ============================================================
 * Page-level wrapper
 * ============================================================ */

.child-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-5);
  padding-inline: var(--content-padding-x);
  max-width: var(--container-max);
  margin-inline: auto;
  color: var(--color-text);
  font-family: var(--font-family-base);
  background-color: var(--color-bg);
}

/* ============================================================
 * Header (eyebrow + heading + lead + back link)
 * WHY a soft brand-lighter tint: matches the W70 home hero pattern
 * so the parent surfaces feel like one designed system.
 * ============================================================ */

.child-edit__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-brand-lighter);
  border: 1px solid var(--color-brand-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.child-edit__eyebrow {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.child-edit__heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  word-break: break-word;
}

.child-edit__lead {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.child-edit__url-example {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}

.child-edit__back {
  margin: 0;
  font-size: var(--font-size-sm);
}

.child-edit__back a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: var(--transition-color);
}

.child-edit__back a:hover,
.child-edit__back a:focus {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* ============================================================
 * Flash banners
 * ============================================================ */

.child-edit__banner {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.child-edit__banner--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.child-edit__banner--error {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* ============================================================
 * Section panels (photo, details, slug/url, theme)
 * WHY a soft card per logical section: groups related fields and
 * makes the page scannable. Padding matches the cards.css rhythm
 * but the class is .child-edit__panel so a future cards.css
 * rotation doesn't accidentally restyle these.
 * ============================================================ */

.child-edit__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.child-edit__panel-heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.child-edit__panel-copy {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ============================================================
 * Slug input + inline availability indicator
 * WHY the indicator sits as a small status block below the input
 * (not a tooltip): screen readers announce role="status" content
 * automatically, and visually-impaired users on zoom can keep the
 * indicator in view without losing the input.
 * ============================================================ */

.child-edit__slug-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.child-edit__slug-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  /* WHY transition the colour/background pair: a debounced check
     flips the indicator from "checking" → "available"/"taken" and
     a smooth swap reads as "the system is responding to me". */
  transition: var(--transition-color);
  align-self: flex-start;
  max-width: 100%;
}

.child-edit__slug-status[data-status="available"] {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.child-edit__slug-status[data-status="taken"],
.child-edit__slug-status[data-status="reserved"],
.child-edit__slug-status[data-status="invalid"] {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.child-edit__slug-status[data-status="same"] {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

.child-edit__slug-status[data-status="checking"] {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.child-edit__slug-status-icon {
  font-size: var(--font-size-base);
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

.child-edit__slug-status-text {
  line-height: var(--line-height-snug);
}

/* ============================================================
 * Theme-colour swatch picker
 * WHY a wrap-flex of large-ish square swatches (not a tight pill
 * row): each swatch doubles as a colour preview AND a radio target.
 * The hidden native radio + label-wrapper pattern (set up in the
 * EJS) means the visible square IS the touch target — making it
 * comfortably-sized matters more than packing 12 into one line.
 *
 * WHY 48px squares: --touch-target-comfortable (token, 48px) is
 * the recommended minimum for primary touch targets per the W26
 * mobile guidance. 44px squares would still pass --touch-target-min
 * but feel tight when grouped 12-wide.
 * ============================================================ */

.child-edit__theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

/* Swatch styling lives on the radio primitive's row class — the
   selector below targets the .form-field__radio-row that the
   radio.ejs partial emits, scoped to .child-edit__theme-swatches
   so it doesn't affect other radio groups in the dashboard. */

.child-edit__theme-swatches .form-field__radio-row {
  margin: 0;
}

.child-edit__theme-swatches .form-field__radio-row label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WHY min-width + min-height (not fixed width): if a future
     palette adds a swatch with a longer accessible name, the
     visually-hidden label text wraps inside the square without
     blowing out the layout. */
  min-width: var(--touch-target-comfortable);
  min-height: var(--touch-target-comfortable);
  width: var(--touch-target-comfortable);
  height: var(--touch-target-comfortable);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background-color: var(--color-bg-raised);
  cursor: pointer;
  position: relative;
  transition: var(--transition-color);
  box-shadow: var(--shadow-sm);
}

.child-edit__theme-swatches .form-field__radio-row label:hover,
.child-edit__theme-swatches .form-field__radio-row label:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-md);
}

.child-edit__theme-swatches .form-field__radio-row input[type="radio"] {
  /* Visually hide the native radio dot while keeping the input in
     the tab order. The label is the visible/clickable swatch. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.child-edit__theme-swatches .form-field__radio-row input[type="radio"]:checked + span,
.child-edit__theme-swatches .form-field__radio-row label:has(input[type="radio"]:checked) {
  /* WHY :has selector: the checked-state outline reads through the
     enclosing label so the "selected" cue lands on the visible
     square. Browsers without :has gracefully fall back to the
     focus-within style above. */
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.child-edit__theme-swatches .form-field__radio-row label span {
  /* The label's text span is the visible name of the swatch —
     visually hidden behind the colour fill but still announced
     by screen readers + visible to AT keyboard users. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Per-swatch colour ----------
   WHY data-swatch on each .form-field__radio-row: the EJS stamps
   data-swatch="<token-name>" so we can colour the visible square
   without leaking raw hex into this file. Twelve squares = twelve
   token-name keys. */

.child-edit__theme-swatches .form-field__radio-row[data-swatch="brand"] label {
  background-color: var(--color-brand);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="brand-dark"] label {
  background-color: var(--color-brand-dark);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="brand-light"] label {
  background-color: var(--color-brand-light);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="sand"] label {
  background-color: var(--color-sand);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="sand-dark"] label {
  background-color: var(--color-sand-dark);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="sand-light"] label {
  background-color: var(--color-sand-light);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="sage"] label {
  background-color: var(--color-sage);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="sage-dark"] label {
  background-color: var(--color-sage-dark);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="sage-light"] label {
  background-color: var(--color-sage-light);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="info"] label {
  background-color: var(--color-info);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="warning"] label {
  background-color: var(--color-warning);
}
.child-edit__theme-swatches .form-field__radio-row[data-swatch="danger"] label {
  background-color: var(--color-danger);
}

/* ============================================================
 * Actions row (Save + Cancel)
 * WHY stack-on-mobile / inline-on-tablet: a 320px viewport can't
 * fit two thumb-sized primary actions side-by-side without
 * squashing copy. Tablet+ flips horizontal.
 * ============================================================ */

.child-edit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ============================================================
 * Danger zone (soft-delete)
 * WHY a separate panel with danger framing: putting the delete
 * button next to Save invites accidental clicks. The danger zone
 * sits below the main form with its own visual treatment so the
 * intent is unmistakable.
 * ============================================================ */

.child-edit__danger-zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.child-edit__danger-zone .child-edit__panel-heading {
  color: var(--color-danger);
}

.child-edit__delete-form {
  margin: 0;
}

/* ============================================================
 * Tablet + desktop overrides
 * ============================================================ */

@media (min-width: 640px) {
  .child-edit__actions {
    flex-direction: row;
    align-items: center;
  }

  .child-edit__header {
    padding: var(--space-6);
  }

  .child-edit__heading {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 960px) {
  .child-edit {
    max-width: var(--container-max-wide);
  }
}

/* ============================================================
 * Print override — collapse decorative chrome on print.
 * ============================================================ */

@media print {
  .child-edit__header,
  .child-edit__panel,
  .child-edit__danger-zone {
    background-color: var(--color-bg);
    box-shadow: none;
    border-color: var(--color-border);
    color: var(--color-text);
  }
}