/* ============================================================================
   The neurotransmitter questionnaire: the scan page and its result page (T496).
   On the design system's tokens; the public shell and public-page.css give the
   frame, the buttons, the fields and the cards.
   ========================================================================== */
.pub-card.nq { max-width: 720px; }
.nq .pub-head h1, .nq-pagehead h1 { outline: none; }
.nq-pagehead { margin-top: var(--s-5); }
.nq-pagehead h1 { font-size: var(--t-h2); font-weight: var(--w-med); line-height: var(--lh-snug); }
.nq-pagehead .sub { margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }

.nq-points { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nq-points li { position: relative; padding-left: 26px; color: var(--ink-2); line-height: var(--lh-body); }
.nq-points li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--bp-lime); }

.nq-card { margin-top: var(--s-5); padding: 16px 18px; border-radius: var(--r-lg); background: var(--bp-teal-08); line-height: var(--lh-body); }
.nq-card b { display: block; font-weight: var(--w-semi); }
.nq-card p { margin-top: 6px; color: var(--ink-2); font-size: var(--t-sm); }
.nq-card .btn { margin-top: 6px; min-height: 44px; }
.nq-card--notice { background: var(--cx-warn-wash); }
.nq-card--choice .nq-actions { margin-top: 12px; }
.nq-card--choice .nq-actions .btn { margin-left: 0; }

.nq-consent { margin-top: var(--s-5); padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--paper); }
.nq-consent ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-consent li + li { margin-top: 4px; }

.nq-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }
.nq-actions .btn { min-height: 46px; }
.nq-actions [data-nq-next], .nq-actions [data-nq-start], .nq-actions [data-nq-go] { margin-left: auto; }
.nq-actions [data-nq-start]:first-child, .nq-actions [data-nq-go]:first-child { margin-left: 0; }

.nq-note { margin-top: 14px; color: var(--ink-3); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-note + .nq-note { margin-top: 6px; }
.nq-saved { margin-top: 10px; min-height: 1.4em; color: var(--ink-3); }
.nq-open, .nq-err { margin-top: 14px; color: var(--alert); font-size: var(--t-sm); font-weight: var(--w-semi); min-height: 1.4em; }
.nq-err[hidden] { display: none; }
.nq-gate { margin-top: var(--s-5); }
/* the two optional boxes: the box a keyboard stands on is ringed like every other control of the page */
.nq > .nq-help, [data-nq-help-slot] .nq-help { margin-top: var(--s-5); }

/* ---- the progress line --------------------------------------------------- */
.nq-progress__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.nq-progress__count { color: var(--ink-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.nq-progress__bar { margin-top: 8px; height: 8px; border-radius: var(--r-pill); background: var(--viz-track); overflow: hidden; }
.nq-progress__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--bp-teal); transition: width var(--dur-2) var(--ease); }

/* ---- a statement: its words, then True and False as two thumb-sized choices ---- */
.nq-list { margin-top: var(--s-5); display: grid; gap: 12px; }
.nq-st { margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--paper); min-width: 0; }
.nq-st.is-open { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }
.nq-st__text { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: var(--t-body); line-height: var(--lh-snug); color: var(--ink); overflow-wrap: anywhere; }
.nq-st__opts { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* T568: true and false are the standard's choice rows (components.css), two side by side */
.nq-opt { min-width: 0; }

.nq-help { margin-top: 12px; padding: 14px 16px; border-left: 4px solid var(--alert); border-radius: var(--r-md); background: var(--alert-08); line-height: var(--lh-body); }
.nq-help p { margin-top: 6px; font-size: var(--t-sm); }

/* ---- the result page ------------------------------------------------------ */
.nq--result .nq-date { margin-top: 6px; color: var(--ink-3); font-size: var(--t-sm); }
.nq-panel { margin-top: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--sh-1); }
.nq-panel h2 { margin-top: 6px; font-size: var(--t-h3); font-weight: var(--w-med); line-height: var(--lh-snug); }
.nq-panel > p { margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-panel--lead { background: var(--bp-teal-08); border-color: transparent; box-shadow: none; }
.nq-panel--lead h2 { font-size: var(--t-h2); }
.nq-bars { margin-top: var(--s-5); display: grid; gap: 14px; }
.nq-bar__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.nq-bar__name { font-weight: var(--w-semi); }
.nq-bar__num { color: var(--ink-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nq-bar__track { margin-top: 6px; height: 12px; border-radius: var(--r-pill); background: var(--viz-track); overflow: hidden; }
.nq-bar__track i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--bp-teal-60); }
.nq-bar.is-top .nq-bar__track i { background: var(--bp-teal); }
.nq-bar__what { margin-top: 6px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-now { margin-top: var(--s-5); display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .nq-now { grid-template-columns: 1fr; } }
.nq-now__card { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); min-width: 0; }
.nq-now__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.nq-now__name { font-weight: var(--w-semi); }
.nq-now__num { margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.nq-now__card p { margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-chip { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-semi); letter-spacing: .02em; }
.nq-chip--minor { background: var(--ok-08); color: var(--ok); }
.nq-chip--moderate { background: var(--cx-warn-wash); color: var(--cx-warn); }
.nq-chip--major { background: var(--alert-08); color: var(--alert); }
.nq-chip--top { background: var(--bp-teal); color: #fff; }
.nq-earlier { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }


/* ---- round 2 (Jesse 2026-10-02): the packages are a next step, so the shell's menu entry is drawn again. On the
        scan's two pages the shell's own small controls (the two language buttons, Log in) are a thumb high ---- */
body[data-nq-page] [data-lang-switch] .lang-btn, body[data-nq-page] [data-auth-login]:not([hidden]) { min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---- round 2: the first page says what the scan is ---------------------------------------------------------- */
.nq-sec { margin-top: var(--s-8); }
.nq-sec h2 { font-size: var(--t-h3); font-weight: var(--w-med); line-height: var(--lh-snug); }
.nq-sec > p { margin-top: 8px; color: var(--ink-2); line-height: var(--lh-body); }
.nq-sec > .nq-note { margin-top: 8px; }
.nq-four { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .nq-four { grid-template-columns: 1fr; } }
.nq-four__card { padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--paper); min-width: 0; }
.nq-four__card b { display: block; font-weight: var(--w-semi); }
.nq-four__card span { display: block; margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-steps { margin: 16px 0 0; padding-left: 24px; list-style: decimal; display: grid; gap: 8px; color: var(--ink-2); line-height: var(--lh-body); }
.nq-example { margin: 16px 0 0; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--paper); }
.nq-example .nq-bars { margin-top: 0; }
.nq-example figcaption { margin-top: 8px; color: var(--ink-3); font-size: var(--t-sm); }
.nq-actions--end { margin-top: var(--s-8); }

/* ---- round 2: the band of part 2, the "highest" chip in the head, never a dot at a line's end ---------------- */
.nq-now__chips { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.nq-nowrap { white-space: nowrap; }

/* ---- round 2: what is next, never a dead end ------------------------------------------------------------------ */
.nq-next__cards { margin-top: 16px; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .nq-next__cards { grid-template-columns: 1fr; } }
.nq-next__card { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid var(--line-2);
  border-radius: var(--r-lg); min-width: 0; }
.nq-next__card b { font-weight: var(--w-semi); }
.nq-next__card p { margin-top: 8px; flex: 1 1 auto; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.nq-next__card .btn { margin-top: 16px; min-height: 44px; max-width: 100%; white-space: normal; text-align: center; }


/* ---- round 2: the public name is one long Dutch word ("Neurotransmitterscan"); at 320 px it breaks inside the word
        (hyphenated where the browser can) instead of pushing the page sideways ---------------------------------- */
.nq h1, .nq .eyebrow { overflow-wrap: anywhere; hyphens: auto; }