/* Hallmark · macrostructure: component-form · component: adult access form · genre: playful
 * tone: warm and reassuring · palette anchor: strawberry red · theme: StrawberryChat tokens
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (1–58) · mobile: pass (320–1920)
 */

:root {
  --adult-surface: oklch(99% 0.008 35);
  --adult-surface-hover: oklch(97% 0.016 35);
  --adult-error: oklch(49% 0.19 25);
  --adult-success: oklch(45% 0.12 150);
  --adult-shadow: oklch(28% 0.04 25 / 0.1);
  --adult-disabled: oklch(67% 0.025 30);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 0;
  min-height: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
}

a {
  color: var(--color-accent);
  text-underline-offset: var(--space-2xs);
  text-decoration-thickness: var(--rule-hair);
}

a:hover {
  text-decoration-thickness: var(--rule-strong);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.adult-access {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: max(var(--space-lg), env(safe-area-inset-top))
    max(var(--space-md), env(safe-area-inset-right))
    max(var(--space-lg), env(safe-area-inset-bottom))
    max(var(--space-md), env(safe-area-inset-left));
}

.adult-access__panel {
  width: min(100%, 47rem);
  display: grid;
  gap: var(--space-xl);
  justify-self: center;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--adult-surface);
  box-shadow: 0 var(--space-sm) var(--space-xl) var(--adult-shadow);
}

.adult-access__brand {
  width: fit-content;
  min-height: var(--size-hit);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.adult-access__brand img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.adult-access__intro {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.adult-access__kicker {
  width: fit-content;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 999px;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.adult-access h1 {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
  font-style: normal;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.adult-access__lead {
  max-width: var(--measure-copy);
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: 1.65;
}

.adult-access__form,
.adult-access__field {
  display: grid;
}

.adult-access__form {
  gap: var(--space-lg);
}

.adult-access__field {
  gap: var(--space-xs);
}

.adult-access__field > label {
  color: var(--color-ink);
  font-weight: 700;
}

.adult-access__date {
  width: 100%;
  min-height: 3.5rem;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  outline: var(--rule-strong) solid transparent;
  outline-offset: var(--space-2xs);
  background: var(--adult-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .adult-access__date:hover {
    background: var(--adult-surface-hover);
  }

  .adult-access__submit:hover:not(:disabled) {
    transform: translateY(-1px);
  }
}

.adult-access__date:focus-visible {
  border-color: var(--color-ink-2);
  outline-color: var(--color-focus);
}

.adult-access__date[aria-invalid="true"] {
  border-color: var(--adult-error);
}

.adult-access__date[data-state="success"] {
  border-color: var(--adult-success);
}

.adult-access__date:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.adult-access__hint,
.adult-access__error {
  min-height: 1.5em;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.adult-access__hint {
  color: var(--color-muted);
}

.adult-access__error {
  color: var(--adult-error);
  font-weight: 700;
}

.adult-access__error::before {
  content: "!";
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  margin-inline-end: var(--space-xs);
  border: var(--rule-hair) solid currentColor;
  border-radius: 50%;
  font-size: var(--text-xs);
}

.adult-access__consent {
  display: grid;
  grid-template-columns: var(--size-hit) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  line-height: 1.55;
}

.adult-access__consent input {
  width: 1.25rem;
  height: 1.25rem;
  margin: calc((var(--size-hit) - 1.25rem) / 2);
  accent-color: var(--color-accent);
}

.adult-access__consent input[aria-invalid="true"] {
  outline: var(--rule-strong) solid var(--adult-error);
  outline-offset: var(--space-2xs);
}

.adult-access__submit {
  min-width: 0;
  min-height: 3.5rem;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

.adult-access__submit:active:not(:disabled) {
  transform: translateY(1px);
}

.adult-access__submit:disabled,
.adult-access__submit[aria-disabled="true"] {
  background: var(--adult-disabled);
  border-color: var(--adult-disabled);
  opacity: 0.65;
  cursor: not-allowed;
}

.adult-access__submit[data-state="loading"] span::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-inline-end: var(--space-xs);
  border: var(--rule-strong) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: adult-access-spin 800ms linear infinite;
}

.adult-access__submit[data-state="success"] {
  background: var(--adult-success);
  border-color: var(--adult-success);
}

.adult-access__submit[data-state="error"] {
  border-color: var(--adult-error);
  background: var(--adult-surface);
  color: var(--adult-error);
}

.adult-access__back {
  width: fit-content;
  min-height: var(--size-hit);
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-2);
  white-space: nowrap;
}

@keyframes adult-access-spin {
  to { transform: rotate(1turn); }
}

@media (min-width: 40rem) {
  .adult-access {
    justify-items: start;
    padding-inline: max(var(--space-xl), 8vw);
  }

  .adult-access__panel {
    justify-self: start;
    padding: var(--space-xl);
  }
}

@media (pointer: coarse) {
  .adult-access__submit,
  .adult-access__date {
    min-height: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}