/**
 * Start With My Healthcare Problem — assessment styles.
 *
 * INTEGRATION NOTE (read before shipping):
 * I do not have access to the site's actual theme CSS, so the values below
 * are FALLBACKS, not the real Patient Insider design system. Every color,
 * font, radius, and spacing value is expressed as a CSS custom property
 * with `--tpi-*` naming so a follow-up pass can either:
 *   (a) override these variables from the theme's stylesheet, or
 *   (b) replace the var() fallback values directly with the theme's real
 *       tokens (font stacks, hex values, existing button classes, etc).
 * Until that pass happens, do not treat this as visually matching the
 * live site — it is a neutral, accessible placeholder system only.
 *
 * All selectors are scoped under .tpi-haa to avoid colliding with existing
 * theme/plugin styles.
 */

.tpi-haa {
  --tpi-bg: #ffffff;
  --tpi-surface: #ffffff;
  --tpi-ink: #202b30;
  --tpi-ink-muted: #5c6b70;
  --tpi-ink-faint: #8a9598;
  --tpi-border: #dfe4e5;
  --tpi-border-strong: #c3cbcd;
  --tpi-brand: #0f6f6b;
  --tpi-brand-dark: #0b4f4c;
  --tpi-brand-tint: #e7f2f1;
  --tpi-amber: #b4790a;
  --tpi-amber-tint: #fbf1de;
  --tpi-high: #b3261e;
  --tpi-high-tint: #fbeae9;
  --tpi-med: #9a6b00;
  --tpi-med-tint: #fbf1de;
  --tpi-low: #1f7a4d;
  --tpi-low-tint: #e9f5ee;
  --tpi-radius: 10px;
  --tpi-font-heading: inherit;   /* inherit theme heading font by default */
  --tpi-font-body: inherit;      /* inherit theme body font by default */

  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  color: var(--tpi-ink);
  font-family: var(--tpi-font-body);
  box-sizing: border-box;
}
.tpi-haa *, .tpi-haa *::before, .tpi-haa *::after { box-sizing: inherit; }

.tpi-haa .tpi-haa-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Progress indicator */
.tpi-haa-tabs { display: flex; gap: 6px; margin-bottom: 28px; }
.tpi-haa-tab { flex: 1; }
.tpi-haa-tab .tpi-haa-bar { height: 6px; border-radius: 4px; background: var(--tpi-border); overflow: hidden; }
.tpi-haa-tab .tpi-haa-bar > span { display: block; height: 100%; width: 0%; background: var(--tpi-brand); transition: width .4s ease; }
.tpi-haa-tab.tpi-haa-done .tpi-haa-bar > span { width: 100%; }
.tpi-haa-tab.tpi-haa-active .tpi-haa-bar > span { width: 55%; }
.tpi-haa-tab label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tpi-ink-faint); margin-top: 6px; font-weight: 600; }
.tpi-haa-tab.tpi-haa-active label { color: var(--tpi-brand-dark); }
.tpi-haa-meta { font-size: 12px; color: var(--tpi-ink-faint); text-align: right; margin: -20px 0 24px; }

/* Steps */
.tpi-haa-step { display: none; }
.tpi-haa-step-active { display: block; }
.tpi-haa-h { font-family: var(--tpi-font-heading); font-size: 26px; line-height: 1.25; margin: 0 0 8px; }
.tpi-haa-sub { color: var(--tpi-ink-muted); font-size: 15px; margin: 0 0 24px; max-width: 56ch; }

/* Situation cards */
.tpi-haa-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .tpi-haa-card-grid { grid-template-columns: 1fr; } }
.tpi-haa-sit-card {
  text-align: left; background: var(--tpi-surface); border: 1.5px solid var(--tpi-border);
  border-radius: var(--tpi-radius); padding: 16px 16px 16px 44px; cursor: pointer; position: relative;
  font-family: inherit; color: inherit; width: 100%;
}
.tpi-haa-sit-card:hover { border-color: var(--tpi-brand); }
.tpi-haa-sit-card:focus-visible { outline: 2.5px solid var(--tpi-brand); outline-offset: 2px; }
.tpi-haa-sit-card .tpi-haa-radio { position: absolute; left: 16px; top: 19px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tpi-border-strong); }
.tpi-haa-sit-card[aria-checked="true"] { border-color: var(--tpi-brand); background: var(--tpi-brand-tint); }
.tpi-haa-sit-card[aria-checked="true"] .tpi-haa-radio { border-color: var(--tpi-brand); }
.tpi-haa-sit-card[aria-checked="true"] .tpi-haa-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--tpi-brand); }
.tpi-haa-sit-card .tpi-haa-t { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.tpi-haa-sit-card .tpi-haa-d { font-size: 13px; color: var(--tpi-ink-muted); line-height: 1.4; }

/* Questions */
.tpi-haa-q-block { margin-bottom: 24px; }
.tpi-haa-q-label { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.tpi-haa-opt-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tpi-haa-opt {
  background: var(--tpi-surface); border: 1.5px solid var(--tpi-border); border-radius: 100px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--tpi-ink); font-family: inherit;
}
.tpi-haa-opt:hover { border-color: var(--tpi-brand); }
.tpi-haa-opt[aria-pressed="true"] { background: var(--tpi-brand); border-color: var(--tpi-brand); color: #fff; }
.tpi-haa-opt:focus-visible { outline: 2.5px solid var(--tpi-brand-dark); outline-offset: 2px; }
.tpi-haa-input {
  width: 220px; max-width: 100%; padding: 9px 14px; border-radius: 8px; border: 1.5px solid var(--tpi-border);
  font-family: inherit; font-size: 14px; color: var(--tpi-ink);
}
.tpi-haa-textarea { width: 100%; min-height: 88px; padding: 12px 14px; border-radius: 8px; border: 1.5px solid var(--tpi-border); font-family: inherit; font-size: 14.5px; resize: vertical; }

/* Documents */
.tpi-haa-upload-note { background: var(--tpi-brand-tint); border: 1px solid var(--tpi-border); border-radius: var(--tpi-radius); padding: 14px 16px; font-size: 13.5px; color: var(--tpi-brand-dark); margin-bottom: 20px; }
.tpi-haa-doc-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tpi-haa-doc-chip {
  background: var(--tpi-surface); border: 1.5px dashed var(--tpi-border-strong); border-radius: 10px;
  padding: 14px 12px; width: 150px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--tpi-ink-muted); font-family: inherit;
}
.tpi-haa-doc-chip[aria-pressed="true"] { border-style: solid; border-color: var(--tpi-brand); background: var(--tpi-brand-tint); color: var(--tpi-brand-dark); }
.tpi-haa-file-list { font-size: 13px; color: var(--tpi-ink-muted); margin-bottom: 16px; }
.tpi-haa-file-list div { padding: 4px 0; border-bottom: 1px dashed var(--tpi-border); }

/* Buttons */
.tpi-haa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tpi-brand); color: #fff; border: none; border-radius: 8px; padding: 13px 22px;
  font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.tpi-haa-btn:hover { background: var(--tpi-brand-dark); }
.tpi-haa-btn:disabled { background: var(--tpi-border-strong); color: var(--tpi-ink-faint); cursor: not-allowed; }
.tpi-haa-btn-secondary { background: var(--tpi-surface); color: var(--tpi-ink); border: 1.5px solid var(--tpi-border-strong); }
.tpi-haa-btn-secondary:hover { border-color: var(--tpi-brand); color: var(--tpi-brand-dark); }
.tpi-haa-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; flex-wrap: wrap; }
.tpi-haa-nav-right { display: flex; gap: 10px; align-items: center; }
.tpi-haa-skip { background: none; border: none; color: var(--tpi-ink-muted); font-size: 13.5px; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 8px; }

/* Results */
.tpi-haa-res-block { background: var(--tpi-surface); border: 1px solid var(--tpi-border); border-radius: var(--tpi-radius); padding: 20px 22px; margin-bottom: 14px; }
.tpi-haa-res-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tpi-ink-faint); font-weight: 700; margin-bottom: 8px; }
.tpi-haa-res-situation { font-size: 18px; line-height: 1.4; margin-bottom: 16px; }
.tpi-haa-urgency-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.tpi-haa-urgency-pill.HIGH { background: var(--tpi-high-tint); color: var(--tpi-high); }
.tpi-haa-urgency-pill.MEDIUM { background: var(--tpi-med-tint); color: var(--tpi-med); }
.tpi-haa-urgency-pill.LOW { background: var(--tpi-low-tint); color: var(--tpi-low); }
.tpi-haa-urgency-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tpi-haa-res-reason { font-size: 14px; color: var(--tpi-ink-muted); }
.tpi-haa-found-list { margin: 0; padding-left: 20px; font-size: 14.5px; }
.tpi-haa-found-list li { margin-bottom: 6px; }

.tpi-haa-next-step { background: var(--tpi-brand-dark); color: #fff; border-radius: var(--tpi-radius); padding: 24px 22px; margin-bottom: 14px; }
.tpi-haa-next-step .tpi-haa-res-eyebrow { color: #bfe0dd; }
.tpi-haa-next-step h2 { color: #fff; font-size: 20px; margin: 0 0 10px; font-family: var(--tpi-font-heading); }
.tpi-haa-next-step .tpi-haa-why { font-size: 14px; color: #dceeec; margin-bottom: 16px; }
.tpi-haa-cta { background: #fff; color: var(--tpi-brand-dark); border: none; border-radius: 8px; padding: 14px 22px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; }
.tpi-haa-other-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tpi-haa-other-opts a, .tpi-haa-other-opts button { background: transparent; border: 1.5px solid rgba(255,255,255,.4); color: #fff; border-radius: 100px; padding: 8px 16px; font-size: 13.5px; font-family: inherit; cursor: pointer; text-decoration: none; }
.tpi-haa-other-opts a:hover, .tpi-haa-other-opts button:hover { border-color: #fff; }

.tpi-haa-tool-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--tpi-border); }
.tpi-haa-tool-row:last-child { border-bottom: none; }
.tpi-haa-tool-row .tpi-haa-name { font-weight: 600; font-size: 14.5px; }
.tpi-haa-tool-row .tpi-haa-desc { font-size: 13px; color: var(--tpi-ink-muted); }
.tpi-haa-tool-row .tpi-haa-go { font-size: 13px; font-weight: 600; color: var(--tpi-brand-dark); text-decoration: none; white-space: nowrap; padding: 8px 12px; border: 1.5px solid var(--tpi-brand); border-radius: 8px; }

.tpi-haa-paid-card { border: 1.5px solid var(--tpi-amber); background: var(--tpi-amber-tint); }
.tpi-haa-paid-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--tpi-amber); color: #fff; padding: 3px 8px; border-radius: 5px; margin-bottom: 10px; }

.tpi-haa-restart-row { text-align: center; margin-top: 24px; }
.tpi-haa-restart-row button { background: none; border: none; color: var(--tpi-brand-dark); font-weight: 600; font-size: 14px; text-decoration: underline; cursor: pointer; font-family: inherit; }

.tpi-haa-disclaimer { font-size: 12px; color: var(--tpi-ink-faint); margin-top: 22px; line-height: 1.6; border-top: 1px solid var(--tpi-border); padding-top: 14px; }
.tpi-haa-error { font-size: 13.5px; color: var(--tpi-high); background: var(--tpi-high-tint); border-radius: 8px; padding: 10px 14px; margin-top: 12px; }

/* "Coming soon" state for unresolved tool/product/resource destinations
   (approved final-QA pass, item 1) — never a clickable dead link. */
.tpi-haa-pending {
  cursor: default; opacity: 0.55; background: var(--tpi-border) !important;
  color: var(--tpi-ink-muted) !important; border-color: var(--tpi-border-strong) !important;
}
.tpi-haa-cta.tpi-haa-pending { background: rgba(255,255,255,0.5) !important; color: var(--tpi-brand-dark) !important; }