/* ==========================================================================
   STILLMIND MENTAL HEALTH · SELF-CHECK

   Styles for the one page that carries the questionnaires. Everything here
   is built from tokens.css and reuses the existing grammar: .card-grid,
   .btn, .eyebrow, .container.

   The design job on this page is different from every other page on the
   site. Elsewhere the reader is browsing. Here they are answering nine
   questions about how bad the last fortnight has been, and the interface
   should get out of the way: one question per block, generous targets, no
   decoration competing for attention, and a result that is legible at a
   glance because it may be read through tears.
   ========================================================================== */

#assess,
.assess-anchor {
  scroll-margin-top: 7rem;
}

.assess-intro {
  max-width: var(--measure);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--c-text-2);
}

/* --------------------------------------------------------------------
   The chooser
   -------------------------------------------------------------------- */

.assess-choices { max-width: none; }

@media (min-width: 720px) {
  .assess-choices { grid-template-columns: repeat(2, 1fr); }
}

/* The card IS the button. A card with a small "start" link inside it gives
   a 40px target inside a 200px card that looks tappable everywhere, which
   is the arrangement people mis-tap. */
.assess-choice {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.assess-choice__sub {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.assess-choice__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--c-text);
  margin: 0;
}

.assess-choice__go {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-brand);
}

@media (hover: hover) {
  .assess-choice:hover .assess-choice__go { text-decoration: underline; }
}

/* --------------------------------------------------------------------
   The questionnaire
   -------------------------------------------------------------------- */

.assess-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.assess-head h2 {
  margin: 0;
  font-size: var(--t-h3);
}

.assess-head h2:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; }

.assess-head__sub {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.assess-stem {
  max-width: var(--measure);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  color: var(--c-text-2);
}

.assess-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: var(--measure);
}

.assess-item {
  margin: 0;
  padding: var(--s-5);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline);
}

.assess-item__label {
  display: flex;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}

.assess-item__n {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--c-sage);
}

.assess-item__q {
  font-weight: 600;
  line-height: var(--lh-body);
}

.assess-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* One option per row, the whole row tappable. Four of these stacked is
   taller than a row of pills, and on a phone a row of pills wraps into
   something you have to aim at. */
.assess-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* 44px of target at every pointer type, not only coarse: this is the
     control the entire page exists to operate. */
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-text-2);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out-expo);
}

@media (hover: hover) {
  .assess-option:hover { background: var(--c-paper-sunk); }
}

.assess-option input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--c-brand);
}

.assess-option:has(input:checked) {
  background: var(--c-brand-soft);
  color: var(--c-text);
  font-weight: 600;
}

.assess-option:has(input:focus-visible) {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------- */

.assess-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: var(--measure);
}

.assess-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.assess-progress {
  margin: 0;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-3);
}

.assess-restart {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.assess-restart:hover { color: var(--c-brand-hover); }

.assess-privacy {
  max-width: var(--measure);
  margin: var(--s-6) 0 0;
  font-size: var(--t-xs);
  line-height: var(--lh-relaxed);
  color: var(--c-text-3);
}

/* --------------------------------------------------------------------
   The result
   -------------------------------------------------------------------- */

.assess-result {
  max-width: var(--measure);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline), var(--e-1);
}

.assess-result:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; }

.assess-result h2 {
  margin: 0 0 var(--s-2);
  color: var(--c-text-3);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.assess-score {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--c-text-3);
}

.assess-score strong {
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 400;
  color: var(--c-forest);
}

.assess-score span { font-size: var(--t-h4); }

.assess-band {
  margin: var(--s-4) 0 var(--s-4);
  padding-bottom: var(--s-4);
  box-shadow: inset 0 -1px 0 var(--c-stone);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  color: var(--c-text);
}

.assess-result p { color: var(--c-text-2); }

.assess-caveat {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-paper-sunk);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
}

.assess-credit {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  box-shadow: inset 0 1px 0 var(--c-stone);
  font-size: var(--t-xs);
  line-height: var(--lh-relaxed);
  color: var(--c-text-3);
}

.assess-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

/* The self-harm block. It sits above the score, it uses the crisis palette
   the rest of the site uses, and it is never collapsed behind anything. */
.assess-alert {
  margin: 0 0 var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-crisis-bg);
  box-shadow: inset 0 0 0 1px var(--c-crisis-border);
}

.assess-alert h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-h4);
  color: var(--c-crisis);
}

.assess-alert p { margin: 0 0 var(--s-3); font-size: var(--t-sm); line-height: var(--lh-relaxed); }
.assess-alert p:last-of-type { margin-bottom: 0; }

.assess-alert .btn {
  --btn-bg: var(--c-crisis);
  --btn-fg: #FFFFFF;
}

/* --------------------------------------------------------------------
   The disclaimer

   Present in all three states, and bold in all three, because someone
   working through nine questions about how bad the last fortnight has
   been is being asked something that feels clinical. The result already
   carried a caveat; what was missing was anything visible BEFORE and
   DURING, which is when a person forms their idea of what this page is.
   -------------------------------------------------------------------- */

.assess-disclaimer,
.assess-caveat {
  max-width: var(--measure);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: #FEF2F2;
  border: 1.5px solid #EF4444;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-relaxed);
  color: #991B1B;
  animation: disclaimer-beacon 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes disclaimer-beacon {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4), 0 2px 8px rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0), 0 4px 16px rgba(220, 38, 38, 0.16);
    border-color: rgba(220, 38, 38, 1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 2px 8px rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.6);
  }
}

.assess-disclaimer::before,
.assess-caveat::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background-color: #DC2626;
  animation: disclaimer-dot 1.8s infinite ease-in-out;
}

@keyframes disclaimer-dot {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* While answering, it sticks just under the fixed header, so it stays on
   screen through all nine questions rather than scrolling away after the
   first. 7rem is the same offset the service sidebar uses. */
.assess-form__disclaimer {
  position: sticky;
  top: 7rem;
  z-index: 10;
  margin-bottom: var(--s-4);
  background: #FFF5F5;
}

@media (prefers-reduced-motion: reduce) {
  .assess-disclaimer,
  .assess-disclaimer::before,
  .assess-caveat,
  .assess-caveat::before {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------
   Modal Dialog (for click-to-open popups on service pages)
   -------------------------------------------------------------------- */

body.has-dialog-open {
  overflow: hidden;
}

.assess-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 44rem);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg, 1rem);
  background: var(--c-paper);
  color: var(--c-text);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--c-stone);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.assess-dialog:not([open]) {
  display: none;
}

.assess-dialog::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.assess-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-stone);
  background: var(--c-paper-raised);
  flex-shrink: 0;
}

.assess-dialog__eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-brand);
}

.assess-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.625rem -0.625rem -0.625rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background var(--d-fast) ease, color var(--d-fast) ease;
}

.assess-dialog__close:hover {
  background: var(--c-paper-sunk);
  color: var(--c-text);
}

.assess-dialog__close:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.assess-dialog__body {
  padding: clamp(var(--s-4), 3vw, var(--s-6));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.assess-dialog .assess-form__disclaimer {
  position: static;
  top: auto;
  margin-bottom: var(--s-4);
}

.assess-dialog .assess-form,
.assess-dialog .assess-stem,
.assess-dialog .assess-intro,
.assess-dialog .assess-disclaimer,
.assess-dialog .assess-caveat,
.assess-dialog .assess-result,
.assess-dialog .assess-actions,
.assess-dialog .assess-privacy {
  max-width: 100%;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .assess-dialog[open] {
    animation: dialog-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
}