/*
  styles.css
  Palette and card interaction lifted directly from the reference mockup
  (checkupdesignmockup.html, reproduced in build context Appendix A).
  Mobile-first: base rules target a phone viewport, the min-width query
  near the bottom adapts the same layout for desktop.
*/

:root {
  --bg: #EDE6D4;
  --panel: #F6F1E3;
  --panel-alt: #F0E9D8;
  --ink: #3A2E22;
  --ink-muted: #7A6C58;
  /* Deepened, near-black warm brown for the two results statement boxes
     -- distinct from and a step darker than --ink, so they read as
     emphasized without using pure black anywhere on the page. */
  --ink-deep: #2A1F16;
  --olive: #6E7A4F;
  --olive-deep: #55603C;
  --tan: #B08D57;
  --card-border: #DFD4BB;
  --card-selected-fill: #E4E8D2;
  --shadow: 0 6px 18px rgba(61, 47, 26, 0.08);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.panel {
  background: var(--panel);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------------- */
/* Top bar (question + results slides)                                    */
/* ---------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 6px 18px;
  gap: 10px;
}

.back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.back-btn:hover { border-color: var(--olive); }

.back-btn[hidden] { visibility: hidden; }

.progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.dots {
  display: flex;
  gap: 6px;
}

/* Spec: "a slide position number, such as 2/6... in the same dark olive
   color as the primary button." Numeric only -- identical in both
   languages, never a score or percentage. */
.progress-num {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--olive-deep);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-border);
  transition: none;
}

.dot.done { background: var(--tan); }

.dot.active {
  background: var(--olive-deep);
  width: 16px;
  border-radius: 5px;
}

.lang-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--card-border);
  background: var(--panel-alt);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
}

.lang-toggle:hover { border-color: var(--olive); color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Privacy notice banner (persistent across question slides)              */
/* ---------------------------------------------------------------------- */

.privacy-banner {
  margin: 4px 22px 0 22px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--panel-alt);
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.privacy-banner a {
  color: var(--olive-deep);
  font-weight: 600;
  text-decoration: none;
}

.privacy-banner a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/* Main content area                                                       */
/* ---------------------------------------------------------------------- */

.content {
  padding: 6px 22px 24px 22px;
  flex: 1;
  overflow-y: auto;
}

.section-label {
  margin: 14px 0 2px 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.question {
  margin: 0 0 18px 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stmt-card {
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--panel-alt);
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 13px 40px 13px 14px;
  position: relative;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.stmt-card::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--card-border);
  background: var(--panel);
}

.stmt-card.selected {
  background: var(--card-selected-fill);
  border-color: var(--olive);
}

.stmt-card.selected::after {
  background: var(--olive);
  border-color: var(--olive);
}

.stmt-card.selected::before {
  content: "\2713";
  position: absolute;
  right: 16.5px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 11px;
  z-index: 2;
}

/* ---------------------------------------------------------------------- */
/* Bottom bar                                                             */
/* ---------------------------------------------------------------------- */

.bottombar {
  display: flex;
  gap: 10px;
  padding: 16px 22px 26px 22px;
}

.nav-btn {
  flex: 1;
  padding: 13px 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.nav-btn.ghost {
  background: transparent;
  border: 1.5px solid var(--card-border);
  color: var(--ink);
}

.nav-btn.ghost:hover { border-color: var(--olive); }

.nav-btn.primary {
  background: var(--olive-deep);
  color: #FBF8F0;
}

.nav-btn.primary:hover { background: var(--olive); }

.nav-btn.full { width: 100%; }

.nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nav-btn.primary:disabled:hover { background: var(--olive-deep); }

/* ---------------------------------------------------------------------- */
/* Opening slide                                                          */
/* ---------------------------------------------------------------------- */

/* Confirmed "Option A" layout, per opening-and-results-updated.html:
   compact title, then a large dominant photo, then her name, then the
   prominent (but not bold) subtitle, then the start button, then nothing
   else until the credit line pinned near the bottom via the spacer. */
.opening {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 34px 24px 26px 24px;
}

.opening-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 22px 0;
}

.opening-photo {
  width: 190px;
  height: 190px;
  max-width: 60vw;
  max-height: 60vw;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 5px var(--panel-alt), 0 0 0 6px var(--card-border);
}

/* Name under the photo -- same italic/bold/ink treatment as the credit
   line at the bottom (spec, opening page section). */
.opening-name {
  text-align: center;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  margin: 10px 0 20px 0;
}

.opening-subtitle {
  font-weight: 500;
  color: var(--olive-deep);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 26px 0;
}

.start-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #FBF8F0;
  background: var(--olive-deep);
  border: none;
  border-radius: 14px;
  padding: 14px 0;
  width: 100%;
  cursor: pointer;
}

.start-btn:hover { background: var(--olive); }

.opening-spacer { flex: 1; }

.opening-credit {
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  margin: 14px 0 0 0;
}

/* ---------------------------------------------------------------------- */
/* Results slide                                                          */
/* ---------------------------------------------------------------------- */

.results-back {
  background: none;
  border: none;
  font-family: inherit;
  color: var(--ink-muted);
  font-size: 12.5px;
  cursor: pointer;
  padding: 18px 22px 0 22px;
  align-self: flex-start;
}

.results-back:hover { color: var(--ink); }

.results-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 22px 26px 22px;
  flex: 1;
  overflow-y: auto;
}

.score-wrap {
  text-align: center;
  margin-bottom: 22px;
}

.score-num {
  font-size: 52px;
  font-weight: 700;
  color: var(--olive-deep);
  font-variant-numeric: tabular-nums;
}

.score-label {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Two independent, separately labeled statements (spec: never blended
   into one paragraph, never joined by a connecting sentence). */
.result-heading {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 6px 0;
}

.result-text {
  font-size: 13.5px;
  line-height: 1.6;
  /* Medium weight + deepened near-black brown, per spec: distinct from
     and a step darker than ordinary body text, so it reads as
     emphasized without ever using pure black. */
  font-weight: 600;
  color: var(--ink-deep);
  background: var(--panel-alt);
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 16px 0;
}

/* CTA row: a small photo of Katarina next to the CTA text, since this is
   the one place on the page written in her own first-person voice. */
.cta-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 8px 0;
}

.cta-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--panel-alt), 0 0 0 4px var(--card-border);
}

.cta-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* The spam-folder aside, merged into the same paragraph as a quieter,
   smaller note rather than a separate announcement. */
.spam-inline {
  color: var(--ink-muted);
  font-size: 12px;
}

.email-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--card-border);
  background: var(--panel);
  font-family: inherit;
  font-size: 13.5px;
  margin-bottom: 10px;
  color: var(--ink);
}

.email-input::placeholder { color: var(--ink-muted); }

.form-error {
  font-size: 12px;
  color: #9A4B3A;
  margin: -4px 0 10px 0;
  min-height: 14px;
}

.consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-bottom: 16px;
  cursor: pointer;
}

.consent input { margin-top: 2px; }

.submitted-block {
  text-align: center;
  padding: 12px 4px;
}

.submitted-headline {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.submitted-body {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Smaller version of the opening page's credit line, sized down to fit
   this more crowded slide -- same italic treatment otherwise. Shown in
   both the form and submitted states. */
.results-credit {
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  font-size: 11px;
  margin: 10px 0 0 0;
}

/* ---------------------------------------------------------------------- */
/* Desktop adaptation                                                     */
/* ---------------------------------------------------------------------- */

@media (min-width: 640px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
  }

  #app {
    min-height: 0;
    width: 420px;
  }

  .panel {
    min-height: 680px;
    max-height: 86dvh;
    border-radius: 28px;
    box-shadow: var(--shadow), 0 0 0 8px #FFFDF7, 0 0 0 9px var(--card-border);
    /* overflow-y (not hidden): this breakpoint isn't desktop-only in
       practice -- a phone in landscape, or a larger phone, crosses this
       width and hits max-height too. With overflow:hidden, any slide
       whose content exceeds that height (the opening slide's photo, or a
       question slide with many cards) got silently cut off with no way
       to reach the rest. overflow-x stays hidden so the rounded corners
       still clip cleanly; overflow-y falls back to scrolling instead of
       clipping, on top of the per-slide internal scroll (.content /
       .results-content) that already handles the common case. */
    overflow-x: hidden;
    overflow-y: auto;
  }
}