/**
 * ============================================================
 *  CSS / PAGES / TESTS
 *  /depression-test, /anxiety-test, /personality-test (prefix tp-,
 *  tq-) and /test-results (prefix tr-). Reuses .cp-breadcrumb,
 *  .cp-hero and .cp-section from conditions.css, plus the button
 *  and .footer-cta styles from components.css. This file only adds
 *  what those don't cover.
 * ============================================================
 */

/* ── PAGE HERO (tighter than a condition page: the test is the point) ── */
.tp-hero { padding-bottom: 2.25rem; border-bottom: none; max-width: 820px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tp-chip {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--teal-dark); background: var(--teal-soft);
  border: 1px solid var(--teal-20); border-radius: 100px; padding: 0.38rem 0.85rem;
}
.tp-privacy { font-size: 0.82rem; color: var(--muted); line-height: 1.7; max-width: 620px; }
.tp-privacy strong { color: var(--ink); font-weight: 500; }

.tp-crisis-line {
  font-size: 0.8rem; color: var(--muted); line-height: 1.65; max-width: 620px;
  border-left: 3px solid var(--border); padding-left: 1rem;
}
.tp-crisis-line a { color: var(--ink); font-weight: 500; }

/* ── TEST CARD ── */
.tp-test { padding: 0.5rem 2.5rem 5rem; scroll-margin-top: 5rem; }
.tp-card {
  max-width: 820px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 2rem 2.25rem 2.25rem;
  box-shadow: var(--shadow-card); scroll-margin-top: 5.5rem; outline: none;
}
.tp-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.tp-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; }
.tp-progress-fill { height: 100%; width: 0; background: var(--teal); border-radius: 4px; transition: width 0.3s ease; }
.tp-progress-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.tp-instructions { font-size: 0.92rem; line-height: 1.75; color: var(--ink); margin-bottom: 1.25rem; }

.tp-scale-legend {
  display: grid; gap: 0.35rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  background: var(--teal-soft); border-radius: 1rem; font-size: 0.78rem; line-height: 1.55;
}
.tp-scale-legend div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tp-scale-legend dt { font-weight: 500; color: var(--teal-dark); }
.tp-scale-legend dd { color: var(--muted); }
.tp-scale-legend dd::before { content: '\2014\00a0'; }

/* ── QUESTIONS ── */
.tq { border: none; padding: 1.5rem 0.75rem; margin: 0 -0.75rem; border-bottom: 1px solid var(--border); border-radius: 0.75rem; transition: background 0.2s; }
.tq:last-of-type { border-bottom: none; }
.tq.missing { background: rgba(212,106,69,0.08); box-shadow: inset 3px 0 0 #d46a45; }
.tq-legend { display: flex; align-items: baseline; gap: 0.85rem; padding: 0; margin-bottom: 0.9rem; float: left; width: 100%; }
.tq-legend + .tq-opts { clear: both; }
.tq-num {
  flex-shrink: 0; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 500; color: var(--teal-dark); background: var(--teal-soft);
}
.tq-text { font-size: 1.02rem; line-height: 1.5; color: var(--ink); font-weight: 400; }

.tq-opts { display: grid; gap: 0.5rem; }
.tq-opt {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.85rem;
  background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  font-size: 0.86rem; line-height: 1.45; color: var(--ink);
}
.tq-opt:hover { border-color: var(--teal-20); background: hsl(176,30%,98%); }
/* visually hidden but still keyboard- and screen-reader-reachable */
.tq-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tq-dot {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--muted); background: #fff; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tq-opt:has(input:checked) { border-color: var(--teal); background: hsl(176,30%,96%); }
.tq-opt input:checked + .tq-dot { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3.5px #fff; }
.tq-opt input:focus-visible + .tq-dot { outline: 2px solid var(--teal); outline-offset: 3px; }

/* four short severity labels in a row (anxiety) */
.tq-row4 { grid-template-columns: repeat(4, 1fr); }
.tq-row4 .tq-opt { flex-direction: column; justify-content: center; gap: 0.5rem; padding: 0.8rem 0.4rem; text-align: center; font-size: 0.78rem; }
/* five-point agree / disagree scale (personality) */
.tq-likert { grid-template-columns: repeat(5, 1fr); }
.tq-likert .tq-opt { flex-direction: column; justify-content: flex-start; gap: 0.55rem; padding: 0.8rem 0.3rem; text-align: center; font-size: 0.7rem; line-height: 1.3; color: var(--muted); }
.tq-likert .tq-opt:has(input:checked) { color: var(--ink); }

.tp-error { margin-top: 0.75rem; font-size: 0.82rem; font-weight: 500; color: #8b3a2a; }
.tp-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.tp-btn {
  font-family: var(--body); font-size: 0.875rem; font-weight: 500; padding: 0.85rem 1.75rem;
  border-radius: var(--radius-btn); border: 1px solid var(--border); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.tp-btn-ghost { background: transparent; color: var(--ink); }
.tp-btn-ghost:not(:disabled):hover { border-color: var(--teal); color: var(--teal); }
.tp-btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.tp-btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; margin-left: auto; padding: 0.85rem 2.25rem; }
.tp-btn-primary:hover:not(:disabled) { background: var(--teal-dark); border-color: var(--teal-dark); }
.tp-btn-primary:disabled { opacity: 0.6; cursor: wait; }
.tp-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.tp-noscript { max-width: 820px; padding: 1.5rem 1.75rem; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--card); font-size: 0.9rem; line-height: 1.7; }
.tp-noscript a { color: var(--teal); font-weight: 500; }

/* ── ABOUT / SCORING / TRAITS (SEO copy) ── */
.tp-prose { max-width: 720px; }
.tp-prose p { font-size: 0.95rem; line-height: 1.85; color: var(--ink); margin-bottom: 1.1rem; }
.tp-prose p.tp-muted { color: var(--muted); }
.tp-prose a { color: var(--teal); text-decoration: underline; text-decoration-color: var(--teal-20); text-underline-offset: 3px; }
.tp-prose a:hover { text-decoration-color: var(--teal); }
.tp-prose ul { margin: 0 0 1.25rem 1.25rem; }
.tp-prose li { font-size: 0.95rem; line-height: 1.8; color: var(--ink); margin-bottom: 0.4rem; }

.tp-table-wrap { max-width: 720px; overflow-x: auto; margin: 0.5rem 0 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); }
.tp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tp-table th, .tp-table td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); line-height: 1.55; vertical-align: top; }
.tp-table tr:last-child td { border-bottom: none; }
.tp-table th { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.tp-table td:first-child { white-space: nowrap; font-weight: 500; }
.tp-table td:nth-child(2) { color: var(--ink); }
.tp-table td:last-child { color: var(--muted); }
.tp-swatch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.5rem; vertical-align: 0; }

.tp-traits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 900px; }
.tp-trait-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.35rem 1.5rem; }
.tp-trait-card h3 { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.tp-trait-card p { font-size: 0.84rem; line-height: 1.7; color: var(--muted); }
.tp-trait-card:last-child:nth-child(odd) { grid-column: span 2; }

/* ── FAQ (native <details>, works without JS) ── */
.tp-faq { display: flex; flex-direction: column; gap: 0.75rem; max-width: 760px; }
.tp-faq details { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); overflow: hidden; }
.tp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; font-size: 0.92rem; font-weight: 500; color: var(--ink);
  cursor: pointer; list-style: none; user-select: none;
}
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary::after {
  content: ''; flex-shrink: 0; width: 9px; height: 9px; margin-right: 0.15rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.tp-faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--teal); }
.tp-faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.tp-faq .tp-faq-a { padding: 0 1.4rem 1.3rem; font-size: 0.88rem; color: var(--muted); line-height: 1.8; }
.tp-faq .tp-faq-a a { color: var(--teal); }

/* ── OTHER TESTS (shared by test pages and the result page) ── */
.tp-more, .tr-more { padding: 5rem 2.5rem; border-top: 1px solid var(--border); }
.tr-more h2, .tp-more h2 { font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 400; letter-spacing: -0.03em; margin: 0.75rem 0 1.75rem; }
.tr-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 760px; }
.tr-more-card {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; transition: border-color 0.2s, transform 0.2s;
}
.tr-more-card:hover { border-color: var(--teal-20); transform: translateY(-3px); }
.tr-more-title { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.tr-more-teaser { font-size: 0.8rem; color: var(--muted); line-height: 1.65; }
.tr-more-link { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; color: var(--teal); transition: gap 0.2s; }
.tr-more-card:hover .tr-more-link { gap: 0.6rem; }
.tr-more-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── RESULT PAGE ── */
.tr-hero { max-width: 820px; border-bottom: none; padding-bottom: 2rem; }
.tr-hero h1 em { font-style: italic; color: var(--teal); }
.tr-pdf-msg { font-size: 0.82rem; color: #8b3a2a; }
.tr-link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; cursor: pointer; }
.btn-secondary:disabled { opacity: 0.6; cursor: wait; }

.tr-body { padding: 0 2.5rem 4.5rem; max-width: 900px; display: flex; flex-direction: column; gap: 2.25rem; }
.tr-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tr-score-card { display: flex; align-items: center; gap: 2.5rem; padding: 2.25rem 2.5rem; }
.tr-ring { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.tr-ring svg { width: 100%; height: 100%; }
#trRing { transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); }
.tr-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tr-ring-num { font-family: var(--display); font-size: 2.6rem; font-style: italic; line-height: 1; color: var(--ink); }
.tr-ring-den { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }
.tr-score-body { flex: 1; min-width: 0; }
.tr-level { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-style: italic; letter-spacing: -0.02em; line-height: 1.15; }
.tr-desc { font-size: 0.92rem; line-height: 1.75; color: var(--ink); margin: 0.6rem 0 1.25rem; }
.tr-scale-track { position: relative; display: flex; height: 10px; border-radius: 10px; overflow: visible; gap: 2px; }
.tr-seg { display: block; height: 100%; }
.tr-seg:first-child { border-radius: 10px 0 0 10px; }
.tr-seg:last-of-type { border-radius: 0 10px 10px 0; }
.tr-marker {
  position: absolute; top: -7px; width: 4px; height: 24px; margin-left: -2px; border-radius: 3px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--card);
}
.tr-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.9rem; font-size: 0.74rem; color: var(--muted); }
.tr-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.tr-legend li.is-current { color: var(--ink); font-weight: 500; }
.tr-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tr-leg-range { opacity: 0.8; }

.tr-crisis {
  display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.25rem 1.5rem;
  border-radius: 1.25rem; background: #faece7; border: 1px solid #ecc9bd; color: #6e2c1f;
  font-size: 0.9rem; line-height: 1.65;
}
.tr-crisis svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.tr-crisis p + p { margin-top: 0.4rem; }
.tr-crisis a { color: #8b3a2a; font-weight: 600; }
.tr-crisis-num span { opacity: 0.75; font-size: 0.82rem; }

.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.tr-two .eyebrow { margin-bottom: 1rem; }
.tr-meaning { font-size: 0.95rem; line-height: 1.85; color: var(--ink); }
.tr-steps { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.tr-steps li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.7; color: var(--ink); }
.tr-steps li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.tr-disclaimer { font-size: 0.78rem; line-height: 1.7; color: var(--muted); padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 1rem; }

/* Big Five trait cards */
.tr-traits { display: flex; flex-direction: column; gap: 1rem; }
.tr-trait { background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 1.5rem 1.75rem; box-shadow: var(--shadow-card); }
.tr-trait-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.tr-trait h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.tr-trait-badge { font-size: 0.74rem; font-weight: 500; color: var(--teal-dark); background: var(--teal-soft); border: 1px solid var(--teal-20); padding: 0.28rem 0.75rem; border-radius: 100px; white-space: nowrap; }
.tr-trait-about { font-size: 0.78rem; font-style: italic; color: var(--muted); margin: 0.2rem 0 1rem; }
.tr-bar { position: relative; height: 10px; border-radius: 10px; background: var(--teal-soft); overflow: hidden; }
.tr-bar-fill { height: 100%; width: 0; border-radius: 10px; background: var(--teal); transition: width 1s cubic-bezier(.2,.7,.2,1); }
.tr-bar-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--card); }
.tr-bar-ends { display: flex; justify-content: space-between; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }
.tr-trait-text { font-size: 0.9rem; line-height: 1.8; color: var(--ink); margin-top: 0.9rem; }

.tr-cta .tr-cta-h { font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 400; font-style: italic; line-height: 1.08; letter-spacing: -0.035em; color: var(--cream); margin-bottom: 1rem; position: relative; z-index: 1; }
.tr-cta .fcta-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
.tr-cta-sub { position: relative; z-index: 1; margin-top: 2rem; font-size: 0.8rem; color: rgba(249,244,235,0.45); }
.tr-cta-sub a { color: rgba(249,244,235,0.75); }

/* ── MOBILE ── */
@media (max-width: 900px) {
  .tp-test { padding: 0.25rem 1.25rem 3.5rem; }
  .tp-card { padding: 1.5rem 1.15rem 1.75rem; border-radius: 1.25rem; }
  .tp-more, .tr-more { padding: 3.5rem 1.25rem; }
  .tr-more-grid { grid-template-columns: 1fr; }
  .tp-traits { grid-template-columns: 1fr; }
  .tp-trait-card:last-child:nth-child(odd) { grid-column: auto; }
  .tr-body { padding: 0 1.25rem 3.5rem; }
  .tr-score-card { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.75rem 1.4rem; }
  .tr-two { grid-template-columns: 1fr; gap: 2rem; }
  .tr-trait { padding: 1.25rem 1.25rem; }
}
@media (max-width: 520px) {
  .tp-nav .tp-btn { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tq-row4 { grid-template-columns: repeat(2, 1fr); }
  .tq-likert .tq-opt { font-size: 0.62rem; padding: 0.7rem 0.1rem; }
  .tq-text { font-size: 0.98rem; }
  .tp-progress { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .tr-top-actions .btn-primary, .tr-top-actions .btn-secondary { width: 100%; justify-content: center; }
  .tr-cta .fcta-actions { flex-direction: column; align-items: stretch; }
  .tr-cta .fcta-actions a { justify-content: center; }
}

/* ── PRINT (fallback when the PDF can't be generated) ── */
@media print {
  #mw-sticky-bar, #mw-nav, #mw-mobile-menu, .cp-breadcrumb, .tr-top-actions, .tr-cta, .tr-more, .tr-pdf-msg, footer, .f-bottom { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .tr-card, .tr-trait { box-shadow: none; break-inside: avoid; }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #trRing, .tr-bar-fill, .tp-progress-fill { transition: none; }
}

/* Keep the first question close to the top on phones: the test is the point. */
@media (max-width: 600px) {
  .tp-hero { gap: 1rem; padding-bottom: 1.5rem; }
  .tp-hero .cp-hero-intro { font-size: 0.92rem; line-height: 1.7; }
  .tp-hero h1 { font-size: 2.2rem; }
}

/* Result-page CTA: the site's default footer-CTA text is faint; this is the conversion block, so lift it. */
.tr-cta .fcta-eyebrow { color: rgba(249,244,235,0.55); }
.tr-cta .fcta-sub { color: rgba(249,244,235,0.75); }