/* Base */
:root { --bg:#0c0f14; --panel:#121720; --text:#e8ecf3; --muted:#9fb3c8; --brand:#5aa7ff; --brand-2:#7bd389; --danger:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.container { max-width: 840px; margin: 40px auto; padding: 0 16px; }

h1 { margin: 0 0 14px; font-size: 28px; font-weight: 700; }
label { display:block; margin: 10px 0 6px; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--panel);
  border: 1px solid #222a36; color: var(--text); outline: none;
}
textarea { min-height: 90px; resize: vertical; }
.input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger), transparent 70%); }

.actions { display:flex; gap: 10px; margin-top: 14px; }
.btn { appearance: none; border: none; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.btn.primary { background: var(--brand); color: #04101e; }
.btn.secondary { background: #1a2230; color: var(--text); border: 1px solid #1f2937; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Result area (no JSON output anymore) */
#result { margin-top: 16px; }

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-backdrop.open { display:flex; }
.modal {
  width: min(560px, 92vw); background: #0f1520; border: 1px solid #263043; border-radius: 14px; padding: 14px 16px;
}
.modal-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
.modal-title { margin: 0; font-size: 18px; }
.modal-close { background: transparent; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-body { display:flex; align-items:center; gap: 10px; color: var(--muted); }

/* Spinner */
.spinner {
  width: 18px; height: 18px; border: 2px solid #3a4a63; border-top-color: var(--brand);
  border-radius: 50%; display:inline-block; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A11y helpers */
.visually-hidden {
  position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Status line */
#status { margin-top: 10px; color: var(--muted); font-size: 14px; }

/* ─────────────────────────────────────────────────────────────
   Desktop layout only: multi-column by section
   (Mobile stays single column with your existing markup)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
	/* Ensure section titles are always full-width in desktop grids */
  .card > h2 {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px;
  }
  /* General spacing / container width for desktop */
  .container { max-width: 1000px; }

  /* Section cards: tighten inner spacing a bit on desktop */
  .card { padding: 6px 0; }

  /* Any .grid inside a section becomes a 12-col grid */
  .card .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: start;
  }

  /* Default spans for fields in grid: 6 cols (2-up) */
  .card .grid .field,
  .card .grid fieldset.field {
    grid-column: span 6;
    margin: 0; /* condense vertical space */
  }

  /* Personal & Physical (Section 1): condense to 3-up where it fits */
  /* We don’t change markup; we select by input names to avoid structural edits */
  .card:nth-of-type(1) .grid .field:has([name="age"]),
  .card:nth-of-type(1) .grid fieldset.field:has([name="sex"]),
  .card:nth-of-type(1) .grid fieldset.field:has([name="height_ft"]),
  .card:nth-of-type(1) .grid .field:has([name="weight_lb"]),
  .card:nth-of-type(1) .grid .field:has([name="activity_level"]),
  .card:nth-of-type(1) .grid .field:has([name="goal"]) {
    grid-column: span 4; /* 3 columns across */
  }

  /* Keep the inner height feet/inches row tidy */
  .card:nth-of-type(1) .grid fieldset.field .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Dietary Preferences (Section 3): 2-up feels best */
  .card:nth-of-type(3) .grid .field { grid-column: span 6; }
  .card:nth-of-type(3) .grid .field:has([name="meals_per_day"]) { grid-column: span 4; }

  /* Lifestyle (Section 4): turn the whole section into a grid without changing HTML */
  .card:nth-of-type(4) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: start;
  }
  .card:nth-of-type(4) > .field {
    grid-column: span 6; /* 2-up for the three textareas */
    margin: 0;
  }

  /* Accountability (Section 5): put radio groups side-by-side */
  .card:nth-of-type(5) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: start;
  }
  .card:nth-of-type(5) > fieldset.field {
    grid-column: span 6;
    margin: 0;
  }

  /* Actions row: keep compact and aligned */
  .actions { justify-content: flex-start; gap: 12px; }
}
/* ──────────────────────────────────────────────
   RADIO CHOICES (Desktop + Mobile)
   Keep legends on their own line; align radios row-wise.
   ────────────────────────────────────────────── */
fieldset.field {
  /* allow choice labels to sit on one line and wrap gracefully */
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px; /* row gap, column gap */
}

fieldset.field legend {
  /* force legend/title to its own row above the choices */
  flex: 0 0 100%;
  margin-bottom: 6px;
}

fieldset.field .choice {
  /* align the radio and its label text */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0; /* tighten spacing */
}

fieldset.field .choice input[type="radio"] {
  /* ensure consistent vertical alignment across browsers */
  margin: 0;
  vertical-align: middle;
}

/* ──────────────────────────────────────────────
   MOBILE SELECT HEIGHT NORMALIZATION
   Make selects visually match text inputs on small screens.
   (Avoids UA quirks where <select> renders shorter.)
   ────────────────────────────────────────────── */
@media (max-width: 899px) {
  select {
    min-height: 44px;         /* touch-friendly; matches input visual height */
    padding-top: 10px;        /* match your input/textarea padding */
    padding-bottom: 10px;
    line-height: 1.25;        /* avoids clipped text */
  }
}

/* ──────────────────────────────────────────────
   DESKTOP REASSURANCE (optional; harmless elsewhere)
   Keep section titles on their own row in grid sections.
   ────────────────────────────────────────────── */
@media (min-width: 900px) {
  .card > h2 { grid-column: 1 / -1 !important; margin-bottom: 8px; }
}
/* iPhone/Safari fix: prevent radio/text overlap and align nicely on small screens */
@media (max-width: 480px) {
  /* Stack choices vertically so they never collide/wrap awkwardly */
  fieldset.field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;               /* smaller, vertical-friendly gap */
  }
  fieldset.field legend {
    flex: 0 0 100%;
    margin-bottom: 6px;
  }
  fieldset.field .choice {
    display: flex;
    align-items: center;       /* align circle with text baseline */
    gap: 10px;                 /* space between circle and text */
    line-height: 1.3;          /* avoid text touching the control */
    flex: 1 1 100%;            /* one choice per row on narrow screens */
    margin: 0;                 /* remove extra label margins */
  }
  fieldset.field .choice input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;               /* slightly larger tap target */
    height: 18px;
    margin: 0;
    vertical-align: middle;    /* iOS alignment quirk */
  }
}

/* Optional: Apply the same tap-target sizing on all mobile widths up to tablet */
@media (max-width: 899px) {
  fieldset.field .choice input[type="radio"] {
    width: 18px;
    height: 18px;
  }

  /* Keep selects visually consistent with inputs on mobile */
  select {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.25;
  }
}
/* iOS/mobile: make <select> the same visual height as text inputs */
@media (max-width: 899px) {
  /* Helps iOS avoid zoom/odd line heights */
  select { font-size: 16px; }
}

@media (max-width: 480px) {
  /* Enforce consistent box height + padding on iPhone */
  select {
    /* allow custom sizing to take effect */
    appearance: none;
    -webkit-appearance: none;

    height: 44px;              /* match input height */
    padding: 10px 40px 10px 12px; /* leave room for arrow on the right */
    line-height: 24px;

    /* match your existing input surface */
    background-color: var(--panel);
    border: 1px solid #222a36;
    border-radius: 10px;

    /* draw a chevron arrow so we don't need markup changes */
    background-image:
      linear-gradient(45deg, transparent 50%, var(--muted) 50%),
      linear-gradient(135deg, var(--muted) 50%, transparent 50%),
      linear-gradient(to right, #1a2230, #1a2230);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 12px) 50%,
      calc(100% - 2.3em) 50%;
    background-size: 6px 6px, 6px 6px, 1px 20px;
    background-repeat: no-repeat;
  }
}