/* Dafne — Official page
   Mobile-first stylesheet. Zero external dependencies: no @import, no web
   fonts, no CDN. All design tokens below are WCAG-verified — if any hex is
   re-tinted later, recompute the contrast ratio with the official WCAG
   relative-luminance formula (see tests/verify-landing.sh check 11), never
   "by eye".
*/

:root {
  /* Palette (verified pairs, see 02-RESEARCH.md / 02-UI-SPEC.md) */
  --bg-gradient: linear-gradient(160deg, #FDEBF3 0%, #FDF0E6 55%, #FFF8F0 100%);
  --card-bg: #FFFFFF;

  --text-heading: #3B2A35; /* 13.4:1 on white — AAA */
  --text-body: #6B4C57;    /* 7.5:1 on white — AAA */
  --text-muted: #6E5A63;   /* 6.35:1 on white — AA (microtext, iOS note, footer) */

  --btn-primary-bg: #C2255C;   /* 5.7:1 with white text — AA */
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: #F7C6D9; /* text #3B2A35 => 8.9:1 — AAA */
  --btn-secondary-text: #3B2A35;
  --btn-tertiary-bg: #F3E7DC;  /* text #6B4C57 => 6.18:1 — AA */
  --btn-tertiary-text: #6B4C57;

  /* Spacing scale */
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Debug-only monospace stack (Phase 3, JS-05) — zero web-font dependency */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Debug panel micro-palette (Phase 3) — self-contained, exempt from the
     public 60/30/10 card palette above; never mixed with --btn-primary-bg. */
  --debug-bg: #1F2933;
  --debug-text: #E4E7EB;      /* 11.9:1 on --debug-bg — AAA */
  --debug-tag-bg: #F2C14E;
  --debug-tag-text: #1F2933;
  --debug-border: rgba(228, 231, 235, 0.16);
}

* {
  box-sizing: border-box;
}

/* No fixed height here: with only min-height the body grows with its content,
   so flex centering never clips the top of the card on short viewports
   (mobile portrait/landscape). */
html, body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* stack .card and #debug-panel instead of placing them side by side (CR-01) */
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  background: var(--bg-gradient);
  font-family: var(--font-stack);
  font-weight: 400;
  color: var(--text-body);
}

/* Card — all real text lives inside this white surface, never directly on
   the gradient (contrast ratios above only hold true on --card-bg). */
.card {
  width: 100%;
  max-width: 420px;
  /* margin auto (not align-items alone): when the card is taller than the
     viewport, auto margins keep the top edge reachable by scrolling. */
  margin: auto;
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(59, 42, 53, 0.16);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.photo {
  width: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.photo--main {
  aspect-ratio: 4 / 5;
}

.photo--secondary {
  width: 78%;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
}

h1 {
  margin: var(--space-2) 0 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-heading);
}

.subtitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-body);
}

.bio {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-body);
}

/* Buttons — pill, full width, touch-friendly, hierarchy D-09 */
.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  font-family: var(--font-stack);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  line-height: 48px;
  box-shadow: none;
  border: none;
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.btn--tertiary {
  background: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-text);
  font-size: 16px;
}

.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--text-heading);
  outline-offset: 2px;
}

.microtext,
.ios-note {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
}

/* iOS-note visual emphasis (Phase 3, D-01/D-04) — copy unchanged, weight/color
   darken and a cream pill background reuses --btn-tertiary-bg (no new hex). */
.ios-note--emphasis {
  font-weight: 600;
  color: var(--text-heading);
  background: var(--btn-tertiary-bg);
  border-radius: 8px;
  padding: var(--space-2) 12px;
  margin: 4px calc(-1 * 12px);
}

/* Fallback message (Phase 3, BTN-03) — typography identical to
   .microtext/.ios-note (Label role, 13px/400). Absent from the DOM until
   armFallbackTimer() fires; once inserted it persists (D-06, no auto-dismiss). */
.fallback-message {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
}

/* Continue-button emphasis (Phase 3, D-05) — reuses the exact outline token
   already shipped for :focus-visible on every button (--text-heading);
   never the accent (--btn-primary-bg/#C2255C), which stays reserved for
   "Open in Browser" only. A brief pulse draws the eye once, then settles
   into a persistent outline. */
.btn--emphasis {
  outline: 3px solid var(--text-heading);
  outline-offset: 2px;
  animation: btn-emphasis-pulse 1.6s ease-in-out 2;
}

@keyframes btn-emphasis-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 42, 53, 0.22);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 42, 53, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--emphasis {
    animation: none;
  }
}

/* Debug panel (Phase 3, JS-05) — dev-facing diagnostic surface, deliberately
   styled as a console/log block, visually unmistakable from the brand card.
   Never uses --btn-primary-bg/#C2255C (accent lock). */
.debug-panel {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--debug-text);
  background: var(--debug-bg);
  max-width: 420px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
  border-radius: 12px;
}

.debug-panel__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--debug-tag-text);
  background: var(--debug-tag-bg);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: var(--space-2);
}

.debug-panel__meta {
  margin: 0 0 var(--space-2);
}

.debug-panel__meta dt {
  font-weight: 400;
  opacity: 0.7;
}

.debug-panel__meta dd {
  margin: 0 0 4px;
  word-break: break-all;
}

.debug-panel__events {
  list-style: none;
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--debug-border);
}

footer {
  text-align: center;
}

footer p {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Mobile-first: widen comfortably on larger viewports, never the reverse. */
@media (min-width: 600px) {
  .card {
    padding: var(--space-5);
    gap: var(--space-4);
  }

  h1 {
    font-size: 32px;
  }
}