/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · act-commitment.css
   Act V — The Commitment.
   Question heading, three discs, intake form reveal, textareas, submit
   button, status message, revisit link.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Act V outer — full viewport, centred
   -------------------------------------------------------------------------- */

:where([data-act="V"] .act-commitment) {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-agency);
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-9);
  padding-inline: var(--space-5);
}

/* --------------------------------------------------------------------------
   Heading — eyebrow + question
   -------------------------------------------------------------------------- */

:where(.act-commitment__heading) {
  text-align: center;
  margin-block-end: var(--space-9);
  width: 100%;
  max-inline-size: 42rem;
}

:where(.act-commitment__eyebrow) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block-end: var(--space-5);
}

:where(.act-commitment__question) {
  font-family: var(--font-agency);
  font-size: clamp(2rem, 5vw, var(--fs-display-act));
  font-style: italic;
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-act);
  color: var(--ink);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Disc choice container — three discs horizontal
   -------------------------------------------------------------------------- */

:where(.act-commitment__choice) {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  align-items: stretch;
  margin-block-end: var(--space-5);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Individual disc — 160px square, 2px border-radius (spec exception)
   -------------------------------------------------------------------------- */

:where(.act-commitment__disc) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 160px;
  block-size: 160px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 2px;          /* one of two permitted 2px border-radius in whole site */
  background-color: var(--paper-recessed);
  padding: var(--space-6);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-transition) var(--ease-reveal),
              transform var(--dur-transition) var(--ease-reveal);
  position: relative;
}

:where(.act-commitment__disc:hover,
       .act-commitment__disc:focus-visible) {
  border-color: var(--ink);
  background-color: var(--paper);
}

/* Underline draws under label on hover — rendered via ::after */
:where(.act-commitment__disc:hover .act-commitment__disc-label,
       .act-commitment__disc:focus-visible .act-commitment__disc-label) {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink);
}

/* Picked state — border thickens, checkmark appears */
:where(.act-commitment__disc[aria-checked="true"]) {
  border-width: 2px;
  border-color: var(--ink);
  background-color: var(--paper);
}

:where(.act-commitment__disc[aria-checked="true"])::after {
  content: "✓";
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ink);
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  line-height: 1;
}

/* is-picked state (JS-driven complement to aria-checked="true") */
:where(.act-commitment__disc.is-picked) {
  border-width: 2px;
  border-color: var(--ink);
  background-color: var(--paper);
}

/* Unchosen discs fade out after a pick */
:where(.act-commitment__disc[aria-checked="false"].is-dimmed),
:where(.act-commitment__disc.is-dimmed) {
  opacity: 0.35;
  transform: scale(0.8);
}

:where(.act-commitment__disc-label) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-standard);
}

/* --------------------------------------------------------------------------
   Confirmation line — shown after pick, before intake
   -------------------------------------------------------------------------- */

:where(.act-commitment__confirmation) {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  font-style: italic;
  text-align: center;
  margin-block-end: var(--space-5);
  max-inline-size: 32rem;
}

/* --------------------------------------------------------------------------
   Intake form — hidden until ACT_V_PICKED
   Slides in from below when .is-open is applied by JS
   -------------------------------------------------------------------------- */

:where(.act-commitment__intake) {
  width: 100%;
  max-inline-size: 42rem;
  /* Hidden initial state via HTML inert + aria-hidden.
     The transition is triggered when JS removes [inert] and adds .is-open */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 720ms var(--ease-settle),
              transform 720ms var(--ease-settle);
}

:where(.act-commitment__intake.is-open) {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Fieldset — no visual styling; legend shows as label
   -------------------------------------------------------------------------- */

:where(.act-commitment__fieldset) {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

:where(.act-commitment__fieldset-legend) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block-end: var(--space-5);
  float: left; /* correct legend placement inside fieldset */
  width: 100%;
}

/* --------------------------------------------------------------------------
   Individual intake fields
   -------------------------------------------------------------------------- */

:where(.intake__field) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

:where(.act-commitment__label,
       .intake__label) {
  font-family: var(--font-agency);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-surface);
  color: var(--ink);
}

:where(.intake__hint) {
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

/* Textarea — 18px minimum, generous line-height, max 2px border-radius */
:where(.act-commitment__textarea) {
  font-family: var(--font-agency);
  font-size: var(--fs-body); /* 1.125rem = 18px minimum enforced */
  line-height: var(--lh-reading);
  color: var(--ink);
  background-color: var(--paper-recessed);
  border: 1px solid var(--hairline);
  border-radius: 0; /* banned patterns: no radius on textareas */
  padding: var(--space-5);
  width: 100%;
  min-block-size: 7rem;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

:where(.act-commitment__textarea:focus) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--ink);
}

:where(.intake__warn) {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  font-style: italic;
}

:where(.intake__warn[hidden]) {
  display: none;
}

/* --------------------------------------------------------------------------
   Submit button — large, paper text on ink bg
   -------------------------------------------------------------------------- */

:where(.act-commitment__submit) {
  display: block;
  width: 100%;
  margin-block-start: var(--space-7);
  padding-block: var(--space-5);
  padding-inline: var(--space-7);
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-agency);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}

:where(.act-commitment__submit:hover:not(:disabled)) {
  background-color: var(--ink-muted);
  border-color: var(--ink-muted);
}

:where(.act-commitment__submit:disabled) {
  opacity: 0.35;
  cursor: not-allowed;
}

:where(.act-commitment__submit:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Status message
   -------------------------------------------------------------------------- */

:where(.act-commitment__status) {
  margin-block-start: var(--space-4);
  font-size: var(--fs-body);
  color: var(--ink-muted);
  font-style: italic;
  line-height: var(--lh-normal);
  min-block-size: 1.5em;
}

/* --------------------------------------------------------------------------
   Confirmation block — after successful submission
   -------------------------------------------------------------------------- */

:where(.act-commitment__confirmation-block) {
  max-inline-size: 36rem;
  text-align: center;
  margin-block-start: var(--space-7);
}

:where(.act-commitment__confirmation-block p) {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--ink);
  margin-block-end: var(--space-4);
}

:where(.act-commitment__confirmation-block[hidden]) {
  display: none;
}

/* --------------------------------------------------------------------------
   Revisit link
   -------------------------------------------------------------------------- */

:where(.act-commitment__revisit) {
  margin-block-start: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  border-block-end: 1px solid var(--hairline);
  padding-block-end: var(--space-1);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.act-commitment__revisit:hover,
       .act-commitment__revisit:focus-visible) {
  color: var(--ink);
  border-color: var(--ink);
}

:where(.act-commitment__revisit[hidden]) {
  display: none;
}

/* --------------------------------------------------------------------------
   Responsive — mobile: discs stack vertically
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.act-commitment__choice) {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  :where(.act-commitment__disc) {
    inline-size: 200px;
    block-size: 120px;
  }
}

@media (min-width: 768px) {
  :where(.act-commitment__choice) {
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :where(.act-commitment__intake) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  :where(.act-commitment__disc) {
    transition: border-color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard) !important;
  }

  :where(.act-commitment__disc[aria-checked="false"].is-dimmed) {
    opacity: 0.35;
    transform: none !important;
  }
}

:where(html.motion-reduced .act-commitment__intake) {
  opacity: 1 !important;
  transform: none !important;
}