/* ==========================================================================
   Psychiatry Metrics — styles.css
   Hand-written. No framework, no CDN, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS

   Named by ROLE, not by colour, because a colour name cannot survive a theme.
   The old names (--navy, --slate, …) are kept as aliases so nothing downstream
   breaks; prefer the role names in new code.

   One role split was necessary. `--navy` was doing two incompatible jobs: the
   ink of every heading, AND the background of the coverage bar and skip link.
   Inverting it for dark mode would have turned that band white and left its
   white text invisible. Ink is now --ink; the band is --band.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* surfaces */
  --bg:           #ffffff;   /* page */
  --surface:      #ffffff;   /* cards, masthead, inputs, callouts */
  --tint:         #f5f7fb;   /* alternating sections, table stripes */
  --rule:         #d6dbe6;

  /* text */
  --ink:          #14243f;   /* headings, strong, emphasis */
  --muted:        #46536a;   /* body copy */
  --faint:        #8a94a6;   /* captions, hints, eyebrows */

  /* accent */
  --accent:       #1b3a6b;   /* links, primary button, focus ring */
  --accent-hover: #14243f;
  --on-accent:    #ffffff;   /* text ON the accent */

  /* the inverted band (coverage bar, skip link) */
  --band:         #14243f;
  --band-ink:     #c8d1e0;
  --band-strong:  #ffffff;
  --band-sep:     #4a5a78;

  /* Signal colors. Data only. Never decoration. */
  --alert:        #b4232a;
  --caution:      #c8791b;
  --better:       #2e7d46;

  /* Legacy aliases. Do not use in new rules. */
  --navy:        var(--ink);
  --slate:       var(--accent);
  --grey-blue:   var(--muted);
  --grey-light:  var(--faint);
  --worse:       var(--alert);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 1080px;
  --gutter: 24px;
}

/* --------------------------------------------------------------------------
   DARK

   Only the primitives are redefined. Every rule below this block is untouched,
   because every rule below this block reads a token.

   #1b3a6b and #b4232a are both unreadable on a dark ground, so accent and alert
   are lifted until they clear WCAG AA against --bg. The band goes DARKER than
   the page rather than lighter, so it still reads as a band.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #0f1620;
  --surface:      #16202e;
  --tint:         #182231;
  --rule:         #2a3648;

  --ink:          #e8edf5;   /* 15.4:1 on --bg */
  --muted:        #b3bfd2;   /* 10.1:1 */
  --faint:        #7f8da5;   /*  5.4:1 */

  --accent:       #86aae2;   /*  8.0:1 */
  --accent-hover: #a9c4ee;
  --on-accent:    #0f1620;

  --band:         #080d14;   /* darker than the page, not lighter */
  --band-ink:     #aab6c9;
  --band-strong:  #ffffff;
  --band-sep:     #4a5a78;

  --alert:        #e8737a;   /*  7.1:1 */
  --caution:      #e0a251;
  --better:       #63c184;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--grey-blue);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.011em;
  margin: 0 0 0.5em;
}

h1 { font-size: 2.5rem; letter-spacing: -0.021em; }
h2 { font-size: 1.75rem; margin-top: 0; }
h3 { font-size: 1.125rem; letter-spacing: -0.004em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--slate); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

strong { color: var(--navy); font-weight: 600; }

small { font-size: 0.8125rem; }

code, .mono { font-family: var(--mono); font-size: 0.875em; }

.eyebrow {
  display: block;
  margin: 0 0 0.9rem;
  color: var(--grey-light);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lede {
  font-size: 1.1875rem;
  color: var(--grey-blue);
  max-width: 62ch;
}

.note {
  font-size: 0.875rem;
  color: var(--grey-light);
}

.caption {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--grey-light);
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 72px 0; }
.section--tint { background: var(--tint); border-block: 1px solid var(--rule); }
.section--tight { padding: 48px 0; }

.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head p:last-child { margin-bottom: 0; }

.grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.grid > .cell { background: var(--surface); padding: 28px 26px; }
.section--tint .grid > .cell { background: var(--surface); }
.cell h3 { margin-bottom: 0.55em; }
.cell p { font-size: 0.9375rem; margin-bottom: 0; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; }

/* --- Skip link ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  /* --band, not --ink: this is an inverted chip, so it must stay dark in dark
     mode. Using the ink token would give a light chip with white text on it. */
  background: var(--band);
  color: var(--band-strong);
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 0; color: var(--band-strong); }

/* --- Header / nav --------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 84px;
  padding-block: 14px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand svg { display: block; height: 40px; width: auto; }

.nav-toggle { display: none; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--grey-blue);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav a:hover { color: var(--navy); background: var(--tint); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--slate); }

/* JS-enhanced mobile nav. Without JS the list simply stays visible. */
.js .nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--navy);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 719px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav { flex-basis: 100%; }
  .js .nav[data-open="false"] { display: none; }
  .js .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .js .nav a { border-top: 1px solid var(--rule); border-radius: 0; }
  .js .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--slate); }
}

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: 88px 0 72px; border-bottom: 1px solid var(--rule); }
.hero h1 { max-width: 17ch; margin-bottom: 0.4em; }
.hero .lede { max-width: 58ch; }

.page-head { padding: 64px 0 40px; border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: 2.125rem; max-width: 20ch; }

/* --- Buttons -------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--slate);
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { background: transparent; color: var(--slate); }
.btn--secondary:hover { background: var(--tint); color: var(--navy); border-color: var(--navy); }

/* --- Coverage bar --------------------------------------------------------- */

.coverage {
  background: var(--band);
  color: var(--band-ink);
  padding: 22px 0;
}
.coverage ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  text-align: center;
}
.coverage li { display: flex; align-items: baseline; gap: 8px; }
.coverage li + li::before { content: "·"; color: var(--band-sep); margin-right: 20px; }
.coverage b { color: var(--band-strong); font-weight: 600; }

/* --- Numbered rigor list -------------------------------------------------- */

.rigor { list-style: none; margin: 0; padding: 0; counter-reset: rigor; }
.rigor > li {
  counter-increment: rigor;
  position: relative;
  padding: 26px 0 26px 60px;
  border-top: 1px solid var(--rule);
}
.rigor > li:last-child { border-bottom: 1px solid var(--rule); }
.rigor > li::before {
  content: counter(rigor, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 27px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0.04em;
}
.rigor h3 { margin-bottom: 0.35em; }
.rigor p { margin-bottom: 0; font-size: 0.9375rem; }

/* --- Callout (mirrors the report flag card) ------------------------------- */

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 24px 26px;
}
.callout--worse { border-left-color: var(--alert); }
.callout--caution { border-left-color: var(--caution); }
.callout + .callout { margin-top: 16px; }
.callout h3 { font-size: 1rem; margin-bottom: 0.4em; }
.callout p { font-size: 0.9375rem; }
.callout p:last-child { margin-bottom: 0; }

.flag-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tag {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--high { color: var(--alert); }
.tag--medium { color: var(--caution); }
.tag--source { color: var(--grey-light); }

.basis {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--grey-light);
}
.basis .mono { color: var(--grey-blue); font-weight: 600; letter-spacing: 0.04em; }

/* --- Product blocks ------------------------------------------------------- */

.product { border-top: 1px solid var(--rule); padding-top: 40px; margin-top: 56px; }
.product:first-of-type { margin-top: 0; }

@media (min-width: 860px) {
  .product-inner { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
}

.price {
  border: 1px solid var(--rule);
  background: var(--tint);
  padding: 24px 24px 26px;
}
.price .amount {
  display: block;
  color: var(--navy);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.price .amount-note { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--grey-light); }
.price .btn { width: 100%; margin-top: 20px; }

.contents { list-style: none; margin: 0 0 8px; padding: 0; }
.contents li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.contents li:first-child { border-top: 0; }
.contents li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 1px;
  background: var(--grey-light);
}
.contents li b { color: var(--navy); font-weight: 600; }

/* --- Tables --------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); }

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
caption {
  caption-side: top;
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--grey-light);
  font-size: 0.8125rem;
}
th, td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
thead th {
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tint);
}
tbody tr:last-child td { border-bottom: 0; }
td .mono { color: var(--slate); }

/* --- Definition-style method blocks --------------------------------------- */

.method { border-top: 1px solid var(--rule); padding: 32px 0; }
.method:last-of-type { border-bottom: 1px solid var(--rule); }
.method h3 { margin-bottom: 0.6em; }
.method .body { max-width: 68ch; }

.plainlist { margin: 0 0 1.1em; padding-left: 1.15em; }
.plainlist li { margin-bottom: 0.5em; }
.plainlist li:last-child { margin-bottom: 0; }

/* --- Figure (inline SVG data graphic) ------------------------------------- */

.figure {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 24px;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption { margin-top: 16px; font-size: 0.8125rem; color: var(--grey-light); }

/* --- Form ----------------------------------------------------------------- */

.form { max-width: 560px; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 600;
}
.field .hint { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--grey-light); font-weight: 400; }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--grey-light); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }

.contact-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 320px; gap: 64px; } }

.aside-block { border-top: 2px solid var(--navy); padding-top: 20px; margin-bottom: 32px; }
.aside-block:last-child { margin-bottom: 0; }
.aside-block h3 { font-size: 0.9375rem; margin-bottom: 0.5em; }
.aside-block p { font-size: 0.9375rem; margin-bottom: 0.6em; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--tint);
  padding: 56px 0 48px;
  font-size: 0.875rem;
}
.footer-top { display: grid; gap: 32px; margin-bottom: 40px; }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.footer nav ul { list-style: none; margin: 0; padding: 0; }
.footer nav li { margin-bottom: 4px; }
.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--grey-blue);
  text-decoration: none;
}
.footer nav a:hover { color: var(--navy); text-decoration: underline; }
.footer .brand svg { height: 38px; }

.disclaimer {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  max-width: 80ch;
  color: var(--grey-light);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.disclaimer strong { color: var(--grey-blue); font-weight: 600; }
.colophon { margin-top: 16px; color: var(--grey-light); font-size: 0.8125rem; }

/* --- Accessibility -------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 2px;
  border-radius: 1px;
}
.btn:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 719px) {
  body { font-size: 16.5px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .hero { padding: 56px 0 48px; }
  .hero h1 { max-width: none; }
  .section { padding: 56px 0; }
  .page-head { padding: 44px 0 32px; }
  .page-head h1 { font-size: 1.75rem; }
  .rigor > li { padding-left: 44px; }
  .actions .btn { width: 100%; }
  .coverage ul { flex-direction: column; align-items: center; gap: 8px; }
  .coverage li + li::before { content: none; }
}

@media print {
  /* Print is always light. Force the light tokens back regardless of theme. */
  html[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --tint: #fff; --rule: #ccc;
    --ink: #000; --muted: #222; --faint: #444; --accent: #1b3a6b;
    --alert: #b4232a; --caution: #c8791b; --better: #2e7d46;
  }
  .masthead, .nav, .actions, .coverage, .theme-toggle { display: none; }
  body { font-size: 11pt; color: #000; }
  .figure svg { background: none; border: 0; padding: 0; }
}

/* --- Theme toggle --------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  margin-left: auto;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6;
                    stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* DOM order in the masthead is: brand, theme-toggle, nav-toggle, nav.
   `margin-left:auto` on the toggle pushes it and everything after it to the
   right. No `order` rules -- reordering here would put the collapsed nav above
   its own hamburger button on mobile. */
.masthead .wrap > .theme-toggle { margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  body, .masthead, .theme-toggle, .callout, .cell, input, select, textarea {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
}

/* --- The wordmark and the suppression figure ------------------------------

   Two places where a colour is baked into markup rather than CSS.

   The wordmark's <text> now uses fill="currentColor"; this supplies the colour.

   The figure's eleven fills are tuned for white paper and would go muddy on a
   dark ground. Recolouring each one is possible; keeping the chart on paper is
   better. A chart on paper is what it is. */

.brand svg { color: var(--ink); }
.brand svg .wordmark-sub { color: var(--muted); }

html[data-theme="dark"] .figure svg {
  background: #f5f7fb;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 12px;
}

/* --- Late additions -------------------------------------------------------- */

.footer-blurb { margin-top: 16px; max-width: 44ch; }
.figure--narrow { max-width: 640px; }
.figure--narrow svg { margin: 0 auto; }