/* ============================================================================
   Better Couple — shared UI design system (bc-ui.css)
   ONE stylesheet, used by every surface: the therapist app, the feedback board,
   and the dashboards. DRY: define a control once here; every surface inherits it.
   Built 29 Jun 2026 (JB's "modular, DRY, best-in-class, used by all components").

   Theme tokens (--bg/--panel/--ink/--mut/--line/--accent/--ok/--warn/--gold)
   are defined PER PAGE (each surface ships its own :root + body.dark), so this
   file styles components against those shared variable names and never hardcodes
   colour. Fallbacks keep it safe on a page that hasn't defined a token yet.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---- Form controls — generous, never crammed (the core fix) ---------------- */
.bcui input,
.bcui textarea,
.bcui select {
  width: 100%;
  background: var(--panel, #fff);
  color: var(--ink, #1a1d24);
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
  padding: 13px 14px;          /* roomy — was the crammed 11px/12px */
  font: inherit;
  font-size: 16px;             /* 16px stops iOS Safari auto-zoom on focus */
  line-height: 1.55;
}
.bcui textarea {
  display: block;
  min-height: 92px;            /* comfortable default, no clipped first line */
  resize: vertical;
}
.bcui input::placeholder,
.bcui textarea::placeholder { color: var(--mut, #8b93a7); opacity: 1; }
.bcui input:focus,
.bcui textarea:focus,
.bcui select:focus {
  outline: none;
  border-color: var(--accent, #3a6df0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3a6df0) 22%, transparent);
}
.bcui input[type=checkbox],
.bcui input[type=radio] {
  width: auto; margin: 0 9px 0 0; padding: 0;
  vertical-align: middle; accent-color: var(--accent, #3a6df0);
}
.bcui input[type=range] {
  width: 58%; padding: 0; vertical-align: middle; accent-color: var(--accent, #3a6df0);
}

/* ---- Buttons -------------------------------------------------------------- */
/* #186 T10: buttons are NEUTRAL by default and opt IN to the accent fill via .big/.primary/.cta/
   .uiok — so card-style buttons no longer need per-component overrides to undo an accent flood.
   The neutral base + explicit primary set replaces the three SPA override hacks. */
.bcui button,
.bcui .btn {
  font: inherit; font-weight: 650; border: 1px solid var(--line, #e2e5ea); border-radius: 11px;
  padding: 12px 18px; background: var(--panel, #fff); color: var(--ink, #1a1d24);
  cursor: pointer; line-height: 1.2;
}
/* primary / call-to-action buttons — filled with the accent */
.bcui button.big, .bcui .btn-big,
.bcui button.primary, .bcui .btn.primary,
.bcui button.cta, .bcui button.uiok {
  background: var(--accent, #3a6df0); color: var(--btnink, #fff); border: 0;
}
.bcui button.big,
.bcui .btn-big { font-size: 17px; padding: 15px 22px; width: 100%; }
/* secondary/icon come AFTER the primary rule so .sec always wins on a .big.sec button */
.bcui button.sec,
.bcui .btn-sec { background: var(--panel, #fff); color: var(--ink, #1a1d24); border: 1px solid var(--line, #e2e5ea); }
.bcui button.icon,
.bcui .btn-icon { background: var(--panel, #fff); color: var(--ink, #1a1d24); border: 1px solid var(--line, #e2e5ea); padding: 12px 14px; font-size: 17px; line-height: 1; }
.bcui button:disabled { opacity: .45; cursor: default; }

/* ---- Containers + helpers ------------------------------------------------- */
.bcui .card { background: var(--panel, #fff); border: 1px solid var(--line, #e2e5ea); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.bcui .step { color: var(--mut, #8b93a7); font-size: 13px; margin: 8px 0; line-height: 1.5; }
.bcui .field { margin-bottom: 14px; }            /* consistent vertical rhythm between inputs */
.bcui .field > label,
.bcui .field-label { display: block; margin: 0 0 6px; font-size: 14px; color: var(--gold, #b8741a); font-weight: 600; }

/* ---- utility / semantic helpers (replace the app's repeated inline styles; DRY).
   .bcui-scoped + !important — the standard utility-class pattern (cf. Bootstrap spacing
   utilities) so they faithfully reproduce the priority the inline styles had, regardless
   of a neighbouring rule's specificity. No other !important exists in this codebase. ---- */
.bcui .eyebrow{ font-size:13px !important; text-transform:uppercase !important; letter-spacing:.6px !important; color:var(--mut) !important; }
.bcui .muted{ color:var(--mut) !important; }
.bcui .muted-n{ color:var(--mut) !important; font-weight:400 !important; }
.bcui .lbl11{ font-size:11px !important; color:var(--mut) !important; margin-bottom:2px !important; }
.bcui .clr-ok{ color:var(--ok) !important; } .bcui .clr-gold{ color:var(--gold) !important; } .bcui .clr-accent{ color:var(--accent) !important; }
.bcui .cat-gold{ color:var(--gold) !important; margin:8px 0 2px !important; }
.bcui .bdr-accent{ border-color:var(--accent) !important; }
.bcui .flex1{ flex:1 !important; } .bcui .fw650{ font-weight:650 !important; } .bcui .clk{ cursor:pointer !important; }
.bcui .mt0{ margin-top:0 !important; } .bcui .mt3{ margin-top:3px !important; } .bcui .mt8{ margin-top:8px !important; }
.bcui .mt10{ margin-top:10px !important; } .bcui .mt12{ margin-top:12px !important; } .bcui .mt14{ margin-top:14px !important; }
.bcui .mb8{ margin-bottom:8px !important; } .bcui .mb10{ margin-bottom:10px !important; } .bcui .my2{ margin:2px 0 !important; }