html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}


body {
  padding-top: 20px;
  padding-bottom: 32px;
  /* Lovable port: dark "brain" background image + Heebo font removed —
     background and typography now come from lovable-theme.css. */
}

/* Lovable port: legacy input drop-shadow removed (theme uses flat inputs). */

input[type='radio'] {
  height: 20px;
  width: 20px;
  border: 0 !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;

}

.fa-question-circle:hover {
  cursor: pointer;
}

.badInput {
  border: 1px solid red;
}

/* Lovable port: .title color (was white-on-dark) now set by lovable-theme.css. */

.btn-col {
  text-align: center;
  margin-top: 20px;
}

/* Lovable port: .btn-light heavy drop-shadow removed — theme styles the CTA. */

.form-warning {
  color: #ff0000;
}

.inputWarning {
  background-color: #ffdddd;
}

.hide {
  display: none;
}

/* Lovable port: .form-section card surface (background, padding, heavy
   drop-shadow) now comes from lovable-theme.css; only layout margins kept.
   The display:none toggle further down remains (functional — JS reveals it). */
.form-section {
  margin-top: 16px;
  margin-bottom: 24px;
}

.intro-section {
  color: black;
  width: 50%;
}

#nav {
/*  position: fixed;
*/  top: 20px; /* Position the navbar at the top of the page */
}

.low-o {
  background-color: rgba(255,255,255,.9);
}

#birthday {
  margin-top: 15px;
}

#intro {
  margin-top: 40px;
}

#logo-img {
  width: 100%;
  max-width: 400px;
}

#questionsTitle {
  margin-bottom: 10px;
}

.likert {
  list-style:none;
  width:100%;
  margin:0;
  padding:0 0 35px;
  display:block;
  border-bottom:2px solid #ddd;
}
.likert:last-of-type {border-bottom:0;}
.likert:before {
  content: '';
  position:relative;
  top:11px;
  left:9.5%;
  display:block;
  background-color:#ddd;
  height:4px;
  width:78%;
}
.likert li {
  display:inline-block;
  width:19%;
  text-align:center;
  vertical-align: top;
}
.likert li input[type=radio] {
  display:block;
  position:relative;
  top:0;
  left:50%;
  margin-left:-6px;
  
}
.likert li label {width:100%;}
/* Callout #5: even-height option cards even when a label wraps to two lines. The grid stretches
   each cell to the row height; making the <li> a flex box lets its label fill that height. */
.likert li { display: flex; }
.likert li label { height: 100%; }

/* Childhood History block — 3 tiles (Yes / No / I'm not sure): phone-first full width, 3 across on wide. */
@media (min-width: 640px) { .childhood-likert { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.childhood-count { font-size: 0.95rem; color: #6b7885; margin: 0 0 8px; }
.childhood-example { font-size: 0.875rem; margin: 6px 0 12px; }
.childhood-freetext-prompt { font-size: 1.05rem; margin-bottom: 12px; }
/* Current-symptoms checklists — full width on phones, 2 across on wide screens. */
@media (min-width: 640px) { .symptoms-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

.req {
  color: red;
}

.warning-link:hover {
  text-decoration: none;
  border-bottom: 1px solid var(--danger);
}

/* Lovable port: .btn-primary / .btn-success colors (was blue/green) now come
   from lovable-theme.css (solid teal --primary). Removed to defer to theme. */





.form-check {
  margin-top: 12px;
}

.form-check-label {
  margin-left: 7px;
}


.select2.select2-container {
  width: 100% !important;
}

/* Lovable port: keep the Select2 medication picker on the app font (its CDN CSS can fall back). */
.select2-container,
.select2-dropdown,
.select2-container .select2-selection__rendered,
.select2-container .select2-search__field {
  font-family: var(--lv-font);
}



.form-section,
#loader {
  display: none;
}

/* Preview mode (admin Intake Content editor) — a slim fixed banner + locked controls so a
   previewed questionnaire screen can never navigate or submit (no DB writes). */
.q-preview-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background: #2c3e50;
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}
body.q-preview { padding-bottom: 48px; }
body.q-preview [data-next],
body.q-preview [data-back],
body.q-preview button,
body.q-preview input[type="submit"] {
  pointer-events: none !important;
  opacity: 0.45 !important;
}

/* ==========================================================================
   Lovable port — legacy assessment.ejs (#allContent) only.
   Scoped so the not-yet-converted questionnaire screens that also use .likert
   are left untouched until their own day. Centers the step cards at the
   Lovable 672px measure and renders the rating scales as option tiles.
   ========================================================================== */
#allContent .form-section {
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
}

#questionDivs .likert {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  border-bottom: 0;
  display: grid;
  grid-template-columns: 1fr; /* phone-first: tiles stack full width; wide screens go to a row (below) */
  gap: 0.5rem;
}
#questionDivs .likert::before { content: none; }
@media (min-width: 640px) {
  #questionDivs .likert { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
#questionDivs .likert li {
  display: block;
  width: auto;
  text-align: center;
  vertical-align: top;
}
#questionDivs .likert li input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
#questionDivs .likert li label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 8px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#questionDivs .likert li input[type="radio"]:checked + label {
  border-color: var(--primary);
  background: var(--tag-teal);
  color: var(--primary);
  font-weight: 600;
}

/* ==========================================================================
   Lovable port — questionnaire (main.ejs) SHELL.
   Shell-level rules apply to the whole questionnaire so every step shares the
   same frame; per-component conversions below are scoped to the batch already
   migrated so later sections keep their current look until their own day.
   ========================================================================== */

/* Brand header / logo treatment (shared with the legacy assessment too).
   The Lovable logo is a near-square stacked mark, so it is sized by height
   (the old rule sized the wide white strip by width). */
#nav { padding: 20px 0; }
#logo-img {
  width: auto;
  height: 64px;
  max-width: 100%;
}
@media (min-width: 640px) {
  #logo-img { height: 80px; }
}

/* Center each step card at the Lovable reading measure. */
#questionnaire .form-section {
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
}

/* Intro / welcome + q-error cards use the same 672px measure as every step card
   (they're not .form-section, so cap them directly) to keep width consistent. */
#intro .lv-card {
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
}

/* Soften the in-card dividers. */
#questionnaire hr { border-top-color: var(--card-border); }

/* Back actions render as the outlined secondary button so they read as
   distinct from the solid teal Continue (uses the existing data-back hook). */
#questionnaire [data-back].btn,
#questionnaire #wursPrev.btn,
#questionnaire .scr-prev.btn {
  background: #fff;
  border: 2px solid var(--primary);
  color: var(--primary);
  box-shadow: none;
}
#questionnaire [data-back].btn:hover,
#questionnaire [data-back].btn:focus,
#questionnaire #wursPrev.btn:hover,
#questionnaire #wursPrev.btn:focus,
#questionnaire .scr-prev.btn:hover,
#questionnaire .scr-prev.btn:focus {
  background: var(--tag-teal);
  color: var(--primary);
  border-color: var(--primary);
}
/* Disabled Previous (first item) reads as inactive, not a live action. */
#questionnaire #wursPrev.btn:disabled,
#questionnaire .scr-prev.btn:disabled {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Lovable port — option cards (all questionnaire choice groups).
   By the end of the migration every questionnaire section is converted, so
   every yes/no and select-all-that-apply .form-check renders as a Lovable
   selectable option card. CSS-only — the native input is preserved so all
   field names, values, and JS hooks are unchanged. This also covers the
   medication-review choices injected into [data-section="medReview"].
   -------------------------------------------------------------------------- */
#questionnaire .form-check {
  position: relative;
  display: block;
  margin-bottom: 0.5rem;
  /* No padding here — it lives on the label below so the ENTIRE box is the
     click target (a <div> isn't associated with the input, so padding on the
     div would be a dead zone). */
  padding: 0;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#questionnaire .form-check:hover {
  border-color: var(--muted-foreground);
  background: var(--muted);
}
/* Selected state — strong and unmistakable: teal fill, teal border with an
   inset ring, and a checkmark on the right. Driven by :has() (modern browsers)
   and .is-selected (toggled by lovable-optioncards.js) as the fallback. */
#questionnaire .form-check:has(input:checked),
#questionnaire .form-check.is-selected {
  border-color: var(--primary);
  background: var(--tag-teal);
  box-shadow: inset 0 0 0 1px var(--primary);
}
#questionnaire .form-check:has(input:checked)::after,
#questionnaire .form-check.is-selected::after {
  content: "\2713"; /* ✓ */
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}
/* Lovable has no visible radio/checkbox control — selection is shown by the
   card + checkmark. Hide the native control but keep it accessible and toggled
   by clicking the card (the label is associated with the input). */
#questionnaire .form-check .form-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
#questionnaire .form-check .form-check-label {
  cursor: pointer;
  font-weight: 500;
  color: var(--heading);
  display: block;
  width: 100%;
  /* Padding on the label (the click target) so clicking anywhere in the card,
     including the edges and the checkmark gutter, toggles the input. */
  padding: 0.875rem 2.75rem 0.875rem 1rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Lovable port — WURS childhood screen (Day 3).
   -------------------------------------------------------------------------- */
.wurs-progress { margin: 8px 0 16px; }
.wurs-progress-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 4px;
}
.wurs-progress-bar {
  height: 8px;
  background: var(--card-border);
  border-radius: 9999px;
  overflow: hidden;
}
.wurs-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
  transition: width 0.2s ease;
}
.wurs-header {
  font-weight: 600;
  color: var(--heading);
  margin: 8px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.wurs-item { border: 0; padding: 0; margin: 0; }
.wurs-timeframe {
  margin-bottom: 12px;
}
.wurs-question {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.4;
  margin-bottom: 16px;
}

/* WURS rating scale as Lovable option tiles (2 per row mobile, 5 desktop). */
.wurs-likert {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
  display: grid;
  grid-template-columns: 1fr; /* phone-first: tiles stack full width; wide screens go to a row (below) */
  gap: 0.5rem;
}
.wurs-likert::before { content: none; }
@media (min-width: 640px) {
  /* minmax(0,1fr) — not bare 1fr — so a long label ("Not at all or very slightly")
     can't stretch its column past its share; every option box stays equal width. */
  .wurs-likert { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.wurs-likert li { display: block; width: auto; text-align: center; }
.wurs-likert li input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.wurs-likert li label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 8px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wurs-likert li input[type="radio"]:checked + label {
  border-color: var(--primary);
  background: var(--tag-teal);
  color: var(--primary);
  font-weight: 600;
}

/* Retint the inline-styled nested follow-up panels (the old #eee boxes) to the
   warm muted palette and the standard corner radius, so conditional follow-ups
   match the rest of the theme without editing each inline style. */
#questionnaire [style*="background-color: #eee"] {
  background-color: var(--muted) !important;
  border-radius: var(--radius) !important;
}

/* Nested follow-up panels were authored with inline `width:90%` + left-flush
   margins, so they sat off-centre inside the 672px card. Make them full-width
   with symmetric spacing so they line up with the rest of the card content. */
#questionnaire [style*="width: 90%"] {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   Lovable port — BATCH 3 (Day 5): meds, substance, mental health, medication
   review, and terminal screens. Option cards for these sections are already
   covered by the global #questionnaire .form-check rule above.
   ========================================================================== */

/* PHQ-2, PHQ-9, and GAD-7 mood/anxiety scales as Lovable option tiles
   (2 per row on mobile, 4 across on desktop for the four-point scale). */
.phq-likert,
.gad-likert {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
  display: grid;
  grid-template-columns: 1fr; /* phone-first: tiles stack full width; wide screens go to a row (below) */
  gap: 0.5rem;
}
.phq-likert::before,
.gad-likert::before { content: none; }
@media (min-width: 640px) {
  /* minmax(0,1fr) keeps every option box equal width regardless of label length. */
  .phq-likert,
  .gad-likert { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.phq-likert li,
.gad-likert li { display: block; width: auto; text-align: center; }
.phq-likert li input[type="radio"],
.gad-likert li input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.phq-likert li label,
.gad-likert li label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 8px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.phq-likert li input[type="radio"]:checked + label,
.gad-likert li input[type="radio"]:checked + label {
  border-color: var(--primary);
  background: var(--tag-teal);
  color: var(--primary);
  font-weight: 600;
}
/* Check-all-that-apply tiles (current-symptoms): hide the native checkbox and let the
   label render as a tile exactly like the radio likert above, with a checked state. */
.symptoms-checklist li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.symptoms-checklist li input[type="checkbox"]:checked + label {
  border-color: var(--primary);
  background: var(--tag-teal);
  color: var(--primary);
  font-weight: 600;
}
.phq-question,
.gad-question {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.4;
  margin-bottom: 12px;
}
/* The Q9 self-harm safety note reads as an alert. */
.phq9-safety-warning { display: block; margin-top: 8px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Select2 medication picker — restyled to the Lovable combobox and teal chips.
   Only the active-medications screen uses Select2, so these overrides are safe.
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  background: #fff;
  min-height: 46px;
  padding: 2px 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 2px rgba(13, 79, 79, 0.25);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--tag-teal);
  color: var(--primary);
  border: none;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary);
  margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: transparent;
  color: var(--primary);
  opacity: 0.7;
}
.select2-container--default .select2-search--inline .select2-search__field {
  color: var(--foreground);
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--muted-foreground);
}
.select2-dropdown {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--lv-shadow-pop);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--tag-teal);
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   Medication review (JS-injected per-medication blocks) + terminal screens.
   -------------------------------------------------------------------------- */
#medHtmlWrapper h5 {
  color: var(--heading);
  margin-bottom: 12px;
}

/* Completion + reassessment-scheduling screens center their call to action. */
[data-section="questionnaire-complete"] .btn,
[data-section="calendly"] { text-align: center; }

/* Disqualification message inherits the card; keep its copy readable. */
[data-section="DISQUALIFIED"] #dqMessage { color: var(--body); }
/* --------------------------------------------------------------------------
   Feedback 3 (Josh) — questionnaire polish
   -------------------------------------------------------------------------- */
/* "Optional" hint on the free-text prompts (childhood free text, symptoms routines).
   av3-hint lives in assessment-v3.css, which the questionnaire doesn't load, so it was
   rendering as plain text running into the prompt. Give it the same muted treatment here. */
.av3-hint {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--muted-foreground, #6b7885);
  margin-left: 6px;
  white-space: nowrap;
}
/* On phones the questionnaire card sat flush against the screen edges (it inherits the
   full-width Bootstrap .container). Inset it so the card reads as a card. */
@media (max-width: 639px) {
  #questionnaire .form-section {
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }
}