/*
 * ACFC Wellness — application styles (vanilla port).
 * Mobile-first, on-brand, built on the custom properties in tokens.css.
 * Every class here mirrors one used by the ported screens/widgets:
 *   Login, Home, Settings, SurveyRunner, CycleCard, BodyMapList.
 * Tap targets are >= 44px. Selected ('on'/'active') states use the rose accent.
 */

/* ============================================================= *
 * App container
 * ============================================================= */
#app,
.acfcw-app {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space);
}

/* ============================================================= *
 * Card primitive
 * ============================================================= */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: var(--space);
  margin-bottom: var(--space);
}

/* ============================================================= *
 * Buttons + links
 * ============================================================= */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space-lg);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--accent-ink);
  color: #FFFFFF;
}

.btn-secondary {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid var(--hairline);
}

.btn-primary:active,
.btn-secondary:active {
  filter: brightness(0.95);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline text-style action (e.g. Settings link in the header) */
.link {
  background: none;
  border: none;
  padding: 8px 4px;
  min-height: 44px;
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================= *
 * Text helpers
 * ============================================================= */
.muted {
  color: var(--text-secondary);
}

.small {
  font-size: 13px;
  line-height: 1.35;
}

.error {
  color: var(--danger);
  font-size: 14px;
  font-weight: var(--weight-medium);
  margin: var(--space-sm) 0;
}

/* iOS section headers are an uppercased caption in the SYSTEM face (not rounded),
   secondary colour — not an 18px rounded title. */
.section-title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

/* ============================================================= *
 * Field block (shared by SurveyRunner + CycleCard)
 * ============================================================= */
.field {
  margin: 0 0 var(--space-lg);
}

.field:last-child {
  margin-bottom: var(--space);
}

.field-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  margin-bottom: var(--space-sm);
}

/* ============================================================= *
 * Chips (single_select / multi_select)
 * ============================================================= */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.chip.on {
  background: var(--accent-soft);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  font-weight: var(--weight-semibold);
}

/* ============================================================= *
 * Segmented controls (likert / cr10 / toggle cells)
 * ============================================================= */
.seg-row {
  display: flex;
  gap: 6px;
}

.seg {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.seg.on {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #FFFFFF;
}

/* Small segmented buttons (multiselect_severity) */
.seg-sm {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.seg-sm.on {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #FFFFFF;
}

/* Graded severity fill — the selected level tints by pain colour (iOS
   severityColor): yellow (dark text) -> orange -> red. The clear ('—') button
   has no data-sev, so it keeps the neutral rose .on fill above. */
.seg-sm.on[data-sev="1"] { background: var(--pain-lo); border-color: var(--pain-lo); color: #0A0A0A; }
.seg-sm.on[data-sev="2"] { background: var(--pain-mid); border-color: var(--pain-mid); color: #FFFFFF; }
.seg-sm.on[data-sev="3"] { background: var(--pain-hi); border-color: var(--pain-hi); color: #FFFFFF; }

/* ============================================================= *
 * Anchors + scale ends (likert / cr10 / vas)
 * ============================================================= */
.ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space);
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.anchor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space);
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.anchor b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ============================================================= *
 * Likert
 * ============================================================= */
.likert {
  display: flex;
  flex-direction: column;
}

/* ============================================================= *
 * CR-10
 * ============================================================= */
.cr10 {
  display: flex;
  flex-direction: column;
}

.cr10-readout {
  align-self: center;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 40px;
  line-height: 1;
  color: var(--accent-ink);
  margin-bottom: var(--space-sm);
}

.cr10-readout.muted {
  color: var(--text-secondary);
}

.cr10-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

/* ============================================================= *
 * VAS-10 (pain) — iOS heat strip: yellow lo, orange mid, red hi.
 * Pain is a severity GRADIENT, not a good/bad traffic light — low pain is
 * YELLOW, never green (matches iOS painColor). Unselected cells carry a faint
 * zone tint so the row reads as a gradient; the selected cell fills solid.
 * ============================================================= */
.vas {
  display: flex;
  flex-direction: column;
}

.vas-row {
  display: flex;
  gap: 4px;
}

.vas-cell {
  flex: 1 1 0;
  min-width: 32px;
  min-height: 48px;
  padding: 8px 2px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Unselected: faint zone tint (iOS base.opacity ~0.18) */
.vas-lo {
  background: color-mix(in srgb, var(--pain-lo) 18%, var(--bg-base));
}

.vas-mid {
  background: color-mix(in srgb, var(--pain-mid) 18%, var(--bg-base));
}

.vas-hi {
  background: color-mix(in srgb, var(--pain-hi) 18%, var(--bg-base));
}

/* Selected: fill solid with the zone's pain colour. Yellow needs dark text. */
.vas-cell.on {
  border-color: transparent;
}

.vas-lo.on {
  background: var(--pain-lo);
  color: #0A0A0A;
}

.vas-mid.on {
  background: var(--pain-mid);
  color: #FFFFFF;
}

.vas-hi.on {
  background: var(--pain-hi);
  color: #FFFFFF;
}

/* ============================================================= *
 * Toggle (No / Yes)
 * ============================================================= */
.toggle {
  display: flex;
  gap: var(--space-sm);
}

.toggle .seg {
  flex: 1 1 0;
}

/* ============================================================= *
 * Number input + unit
 * ============================================================= */
.num {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.num input {
  flex: 1 1 auto;
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font-body);
}

.unit {
  color: var(--text-secondary);
  font-size: 15px;
  white-space: nowrap;
}

/* ============================================================= *
 * Text input / textarea
 * ============================================================= */
.text-input {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font-body);
  line-height: 1.45;
  resize: vertical;
}

/* Bare number inputs (CycleCard number field has no wrapper) */
input[type="number"] {
  min-height: 48px;
  padding: 12px var(--space);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font-body);
}

.text-input:focus,
.num input:focus,
input[type="number"]:focus {
  outline: none;
  border-color: var(--accent-ink);
}

/* ============================================================= *
 * Multiselect severity
 * ============================================================= */
.msev {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.msev-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
}

.msev-row.active {
  border-color: var(--accent-ink);
  background: var(--accent-soft);
}

.msev-label {
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.msev-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================= *
 * Body map (tap-list)
 * ============================================================= */
.bodymap {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.bm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space);
  font-size: 12px;
  color: var(--text-secondary);
}

.bm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bm-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bm-group-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  margin: 0;
}

.bm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.bm-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bm-chip-label {
  font-weight: var(--weight-semibold);
}

.bm-chip-sev {
  font-size: 12px;
  text-transform: capitalize;
  opacity: 0.85;
}

/* Severity states for the tap-list chips only. The interactive silhouette and
   the legend dots are owned by bodymap.css off the single --sev-* token group;
   chips reuse the SAME tokens so there is no second severity palette. */
.bm-none {
  background: var(--bg-base);
}

.bm-chip.bm-mild {
  background: color-mix(in srgb, var(--sev-mild) 22%, var(--bg-base));
  border-color: var(--sev-mild);
}

.bm-chip.bm-moderate {
  background: color-mix(in srgb, var(--sev-mod) 55%, var(--bg-base));
  border-color: var(--sev-mod);
}

.bm-chip.bm-severe {
  background: var(--sev-severe);
  border-color: var(--sev-severe);
  color: #FFFFFF;
}

/* ============================================================= *
 * Login
 * ============================================================= */
.login {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.login-title {
  font-size: 28px;
  margin: 0;
}

.gsi-button {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

/* ============================================================= *
 * Home
 * ============================================================= */
.home {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}

.home-head h1 {
  margin: 0;
  font-size: 26px;
}

.status-pill {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

.status-pill.done {
  background: color-mix(in srgb, var(--success) 18%, var(--bg-base));
  color: var(--success);
}

.status-pill.pending {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Survey row (a tappable card button) */
.survey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.survey-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.survey-row-title {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.survey-row-state {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.survey-row-state.done {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* ============================================================= *
 * Survey runner
 * ============================================================= */
.runner {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.runner-head h1 {
  margin: 0 0 4px;
  font-size: 24px;
}

.runner-fields {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.runner-fields:disabled {
  opacity: 0.7;
}

.edit-banner {
  padding: 12px var(--space);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.edit-banner.locked {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-base));
  color: var(--danger);
}

/* ============================================================= *
 * Settings
 * ============================================================= */
.settings {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space);
}

.settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-row-title {
  font-size: 16px;
  font-weight: var(--weight-semibold);
}

/* Switch (consent toggle) */
.switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 52px;
  height: 32px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
}

.switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-track {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.switch input:checked + .switch-track::before {
  transform: translateX(20px);
}

.switch input:disabled + .switch-track {
  opacity: 0.5;
}

/* ============================================================= *
 * Cycle card (privacy-core female health)
 * ============================================================= */
.cycle-card {
  border: 1px solid var(--accent-ink);
}

.cycle-card form {
  display: flex;
  flex-direction: column;
}