/* checkup.css — The Couples Check-Up
   Mobile-first. Every horizontal property is logical (inline-start/end) so the
   Hebrew RTL flip is free. Colours come from the tokens in styles.css;
   --accent-gold is decorative only, so readable text uses --link-on-cream. */

.checkup-body {
  background: var(--bg-cream);
  color: var(--text);
  /* The check-up is short by design, so the footer has to be pinned or the
     tan body background shows through beneath it on tall screens. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.checkup-body > main { flex: 1 0 auto; }
.checkup-body > .footer { flex-shrink: 0; }

.cu {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1.15rem calc(3rem + env(safe-area-inset-bottom));
  min-height: 60vh;
}

.cu[data-state="loading"] { opacity: 0; }
.cu[data-state="ready"]   { opacity: 1; transition: opacity .25s var(--ease); }

/* ── Shared bits ─────────────────────────────────────────────── */
.cu-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--link-on-cream);
  margin: 0 0 .6rem;
}
.cu h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 .8rem; }
.cu h2 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 .7rem; }
.cu-sub { font-size: 1.02rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 1.5rem; }
.cu-fine { font-size: .85rem; line-height: 1.55; color: var(--text-muted); opacity: .8; }

.cu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 54px;
  padding: .9rem 1.4rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-pink);
  color: var(--text-light);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease);
}
.cu-btn:hover  { background: var(--accent-pink-dark); }
.cu-btn:active { transform: scale(.98); }
.cu-btn[disabled] { opacity: .4; cursor: not-allowed; }

.cu-btn-ghost {
  background: transparent;
  color: var(--link-on-cream);
  border: 1.5px solid var(--border-strong);
}
.cu-btn-ghost:hover { background: rgba(184, 137, 58, .08); }

/* ── Intro ───────────────────────────────────────────────────── */
.cu-intro { padding-block: 1.5rem 1rem; text-align: center; }
.cu-intro .cu-sub { max-width: 32rem; margin-inline: auto; margin-bottom: 1.8rem; }
.cu-intro .cu-btn { max-width: 22rem; margin-inline: auto; }
.cu-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.1rem;
  margin-top: 1rem;
  font-size: .86rem;
  color: var(--text-muted);
}
.cu-privacy {
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  background: var(--bg-cream-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: .86rem;
  line-height: 1.55;
  text-align: start;
}

/* ── Progress ────────────────────────────────────────────────── */
.cu-progress { margin-bottom: 1.6rem; }
.cu-progress-track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(184, 137, 58, .18);
  overflow: hidden;
}
.cu-progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-pink);
  transition: width .35s var(--ease);
}
.cu-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
  font-size: .82rem;
  color: var(--text-muted);
}
.cu-back {
  background: none;
  border: none;
  padding: .3rem 0;
  font: inherit;
  font-size: .86rem;
  color: var(--link-on-cream);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cu-back[hidden] { display: none; }

/* ── Question ────────────────────────────────────────────────── */
.cu-q { animation: cu-in .32s var(--ease); }
@keyframes cu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cu-q { animation: none; }
  .cu-progress-fill { transition: none; }
}

.cu-stem { font-size: .92rem; font-weight: 600; color: var(--link-on-cream); margin: 0 0 .35rem; }
.cu-title { font-size: 1.38rem; line-height: 1.32; margin: 0 0 .4rem; }
.cu-hint  { font-size: .9rem; color: var(--text-muted); margin: 0 0 1.1rem; }

.cu-opts { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.4rem; }

.cu-opt {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  min-height: 56px;
  padding: .85rem 1.05rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.cu-opt:hover { border-color: var(--border-strong); background: var(--bg-cream-alt); }
.cu-opt:active { transform: scale(.99); }
.cu-opt[aria-pressed="true"] {
  border-color: var(--accent-pink);
  background: var(--accent-pink-soft);
  font-weight: 600;
}
.cu-opt-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: transparent;
}
.cu-opt[aria-pressed="true"] .cu-opt-mark {
  border-color: var(--accent-pink);
  background: var(--accent-pink);
  color: #fff;
}

/* Colour chips */
.cu-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
.cu-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.05rem .6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s var(--ease), transform .12s var(--ease);
}
.cu-chip:active { transform: scale(.98); }
.cu-chip[aria-pressed="true"] { border-color: var(--accent-pink); border-width: 2px; font-weight: 600; }
.cu-swatch { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }

/* The Me / Them / Both / Neither grid */
.cu-matrix { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.cu-mrow-label { font-size: .98rem; font-weight: 600; margin-bottom: .45rem; }
.cu-mopts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.cu-mopt {
  min-height: 48px;
  padding: .5rem .2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.cu-mopt[aria-pressed="true"] {
  border-color: var(--accent-pink);
  background: var(--accent-pink-soft);
  font-weight: 700;
}

/* ── Result ──────────────────────────────────────────────────── */
.cu-result { animation: cu-in .4s var(--ease); }
.cu-badge {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: var(--radius-pill);
  background: var(--accent-pink-soft);
  color: var(--accent-pink-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .9rem;
}
.cu-hook {
  font-size: 1.16rem;
  line-height: 1.55;
  font-weight: 600;
  padding: 1.1rem 1.2rem;
  margin: 1.2rem 0 1.6rem;
  border-inline-start: 3px solid var(--accent-pink);
  background: var(--bg-cream-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
[dir="rtl"] .cu-hook { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.cu-body p { font-size: 1.02rem; line-height: 1.68; margin: 0 0 1.05rem; }

.cu-section { margin-top: 2.4rem; }
.cu-section > h2 { margin-bottom: 1rem; }

/* The shape — hexagonal radar */
.cu-radar {
  margin: .4rem -.4rem 0;
  padding: .6rem 0 .2rem;
  background: var(--bg-cream-alt);
  border-radius: var(--radius-lg);
}
.cu-radar svg { display: block; width: 100%; height: auto; overflow: visible; }

.cu-ring  { fill: none; stroke: rgba(184, 137, 58, .22); stroke-width: 1; }
.cu-ring:last-of-type { stroke: rgba(184, 137, 58, .42); }
.cu-spoke { stroke: rgba(184, 137, 58, .22); stroke-width: 1; }

.cu-shape {
  fill: rgba(184, 137, 58, .30);
  stroke: var(--accent-gold);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.cu-dot { fill: var(--accent-gold); stroke: var(--bg-cream-alt); stroke-width: 2; }
.cu-dot.is-low { fill: var(--accent-pink); }

.cu-axis {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-muted);
}
.cu-axis.is-low { fill: var(--accent-pink-dark); }
.cu-axis-n { font-size: 11px; font-weight: 700; opacity: .55; }

/* Grow the shape out of the middle once it's on screen. */
.cu-radar-shape {
  transform-origin: 210px 150px;
  animation: cu-grow .75s var(--ease) both;
}
@keyframes cu-grow { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cu-radar-shape { animation: none; } }

/* Strongest / thinnest */
.cu-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.cu-callout {
  padding: .85rem .95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}
.cu-callout.is-high { border-color: var(--accent-gold-border); }
.cu-callout.is-low  { border-color: rgba(232, 86, 127, .35); }
.cu-callout-k {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .25rem;
  color: var(--text-muted);
  opacity: .75;
}
.cu-callout strong { font-size: 1rem; line-height: 1.3; }
.cu-callout.is-high strong { color: var(--link-on-cream); }
.cu-callout.is-low strong  { color: var(--accent-pink-dark); }
.cu-caption {
  margin-top: 1.1rem;
  font-size: .96rem;
  line-height: 1.6;
  padding: .95rem 1.1rem;
  background: var(--bg-cream-alt);
  border-radius: var(--radius-md);
}

/* 7-day plan */
.cu-days { display: flex; flex-direction: column; gap: .7rem; counter-reset: cuday; }
.cu-day {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.cu-day summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
}
.cu-day summary::-webkit-details-marker { display: none; }
.cu-day-n {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-pink-soft);
  color: var(--accent-pink-dark);
  font-size: .85rem;
  font-weight: 700;
}
.cu-day-body { padding: 0 1.1rem 1.1rem; }
.cu-day-body p { font-size: .98rem; line-height: 1.62; margin: 0 0 .7rem; }
.cu-day-note {
  font-size: .9rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-muted);
  padding-inline-start: .85rem;
  border-inline-start: 2px solid var(--border-strong);
}

/* Email capture */
.cu-email {
  margin-top: 2.4rem;
  padding: 1.4rem 1.2rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.cu-email h2 { margin-bottom: .5rem; }
.cu-email input[type="email"] {
  width: 100%;
  min-height: 54px;
  padding: .85rem 1.1rem;
  margin-bottom: .8rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-cream);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
}
.cu-email input[type="email"]:focus-visible { outline: 2px solid var(--accent-pink); outline-offset: 1px; }
.cu-consent { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .7rem; font-size: .85rem; line-height: 1.5; cursor: pointer; }
.cu-consent:last-of-type { margin-bottom: .5rem; }
.cu-consent-note { font-size: .78rem; line-height: 1.5; color: var(--text-muted); opacity: .75; margin: 0 0 .3rem; }
.cu-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--accent-pink); }
.cu-consent a { color: var(--link-on-cream); }
.cu-msg { margin-top: .8rem; font-size: .92rem; font-weight: 600; }
.cu-msg.is-ok  { color: #2E6B3E; }
.cu-msg.is-err { color: var(--accent-pink-dark); }

/* Next steps */
.cu-next { display: flex; flex-direction: column; gap: .75rem; }
.cu-nextcard {
  display: block;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s var(--ease), transform .15s var(--ease);
}
.cu-nextcard:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cu-nextcard strong { display: block; font-size: 1.02rem; margin-bottom: .25rem; color: var(--link-on-cream); }
.cu-nextcard span { font-size: .93rem; line-height: 1.55; color: var(--text-muted); }

.cu-foot { margin-top: 2.6rem; text-align: center; }
.cu-foot .cu-fine { margin-bottom: 1rem; }

/* ── Exit path ───────────────────────────────────────────────── */
.cu-exit { padding-block: 1.5rem; }
.cu-exit h1 { font-size: 1.5rem; }
.cu-exit p { font-size: 1.02rem; line-height: 1.68; margin: 0 0 1.05rem; }
.cu-help { margin: 1.5rem 0; }
.cu-help a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  max-width: 20rem;
  padding: .9rem 1.4rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--link-on-cream);
  font-weight: 600;
  text-decoration: none;
  transition: background .18s var(--ease);
}
.cu-help a:hover { background: var(--bg-cream-alt); }

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .cu { padding: 2.5rem 2rem 4rem; }
  .cu h1 { font-size: 2.25rem; }
  .cu h2 { font-size: 1.5rem; }
  .cu-title { font-size: 1.75rem; }
  .cu-intro { padding-block: 3rem 1.5rem; }
  .cu-chips { grid-template-columns: repeat(3, 1fr); }
  .cu-hook { font-size: 1.3rem; padding: 1.4rem 1.6rem; }
  .cu-body p { font-size: 1.08rem; }
  .cu-opt { font-size: 1.04rem; }
  .cu-mopt { font-size: .9rem; min-height: 44px; }
  .cu-email { padding: 1.9rem 1.8rem; }
  .cu-email form { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: start; }
  .cu-email input[type="email"] { margin-bottom: 0; }
  .cu-email .cu-btn { width: auto; padding-inline: 1.9rem; }
  .cu-consent { grid-column: 1 / -1; margin: .2rem 0 .5rem; }
  .cu-consent-note { grid-column: 1 / -1; }
}

/* Wider still: let the result breathe without becoming a wall of text */
@media (min-width: 1100px) {
  .cu { max-width: 700px; }
}