/* Living Brief — the Private Health Research page layer (LB Task 3).
   Rides on the canonical Pattern shell: same self-hosted Syne, Atkinson
   Hyperlegible and IBM Plex Mono, same chalk/aubergine/mineral tokens, and
   the five semantic aliases declared in assets/pattern-shell.css
   (--research-established, --research-uncertain, --research-changed,
   --research-paper, --research-rule).

   Contracts, frozen by tests/private-health-research-style.test.mjs:
   - every rule is scoped below .private-health-research;
   - components: .research-hero, .brief-folio, .brief-sheet,
     .evidence-spine, .evidence-node, .offer-path, .change-proof,
     .flagship-editorial, .method-strip, .fit-form, .final-action;
   - 680px reading measure, 1120px layout measure, 320px overflow safe;
   - display caps 34px phone / 48px tablet / 76px desktop;
   - 48px controls, visible focus, one linear document card on phones;
   - motion is 140ms colour and border feedback only, stilled entirely
     under prefers-reduced-motion: reduce;
   - no url(), no @import, no @font-face, no JavaScript, under 24KB. */

/* ============================ Scope root ============================ */

.private-health-research {
  min-width: 0;
  overflow-x: clip;
  overflow-wrap: anywhere;
}

/* ======================== Measures and frames ======================= */

.private-health-research .research-region {
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
}

.private-health-research .research-prose {
  margin: 0;
  max-width: 680px;
  font-size: 18px;
  line-height: 1.6;
  font-family: var(--pattern-body);
}

.private-health-research .research-section {
  padding-block: var(--pattern-space-5) var(--pattern-space-6);
}

/* Section codes, source marks and revision stamps: the tangible margins
   of a working document. Mono, quiet, measured. */
.private-health-research .research-section-code {
  display: block;
  margin-top: 0;
  margin-bottom: var(--pattern-space-2);
  color: var(--pattern-ink-66);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.private-health-research .source-mark {
  color: var(--research-established);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 400;
}

.private-health-research .research-stamp {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--research-rule);
  color: var(--pattern-ink-66);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ========================= Display headings ========================= */
/* Syne, capped 34px phone, 48px tablet, 76px desktop. Balanced lines
   keep the final word from sitting alone at the test widths. */

.private-health-research .research-display {
  margin: 0;
  color: var(--pattern-aubergine);
  font-family: var(--pattern-display);
  font-size: clamp(30px, 9vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

@media (min-width: 700px) {
  .private-health-research .research-display {
    font-size: clamp(38px, 6vw, 48px);
  }
}

@media (min-width: 1200px) {
  .private-health-research .research-display {
    font-size: clamp(56px, 5.4vw, 76px);
    line-height: 1.04;
  }
}

.private-health-research .research-heading {
  margin: 0 0 var(--pattern-space-3);
  color: var(--pattern-aubergine);
  font-family: var(--pattern-display);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

/* ============================== Hero ================================ */
/* Copy-led editorial grid. */

.private-health-research .research-hero {
  padding-block: var(--pattern-space-6) var(--pattern-space-5);
}

.private-health-research .research-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pattern-space-3);
  row-gap: var(--pattern-space-3);
}

.private-health-research .research-hero__eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--research-established);
  font-family: var(--pattern-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Display words wrap only at spaces, never mid-syllable. */
.private-health-research .research-hero h1 {
  grid-column: 1 / -1;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* One fluid measure, no column or size step. */
@media (min-width: 960px) {
  .private-health-research .research-hero h1 {
    grid-column: 1 / -1;
    font-size: clamp(48px, calc(4.583vw + 4px), 70px);
    line-height: 1.04;
  }
}

.private-health-research .research-hero__subhead {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 680px;
  color: var(--pattern-ink-82);
  font-size: 19px;
  line-height: 1.6;
}

.private-health-research .research-hero__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pattern-space-2) var(--pattern-space-3);
  margin-top: var(--pattern-space-1);
}

/* ============================= Actions ============================== */
/* One strong action; one quiet text link. Nothing competes. */

.private-health-research .research-action {
  display: inline-flex;
  min-height: 48px;
  min-width: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 2px solid var(--pattern-aubergine);
  border-radius: 4px;
  background: var(--pattern-aubergine);
  color: var(--pattern-chalk);
  font-family: var(--pattern-body);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.private-health-research .research-action:hover {
  border-color: var(--research-established);
  background: var(--research-established);
}

.private-health-research .research-action:active {
  border-color: var(--pattern-mineral);
  background: var(--pattern-mineral);
}

.private-health-research .research-action--quiet {
  display: inline-flex;
  width: auto;
  min-height: 48px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--pattern-aubergine);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.private-health-research .research-action--quiet:hover {
  color: var(--research-established);
}

/* =========================== Brief folio ============================ */
/* The signature object: a versioned Brief sheet holding its evidence
   spine, drawn from grid, borders and paper offsets. */

.private-health-research .brief-folio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

/* Typed as the article it is, which outranks the shell's generic
   article rule: that ties at (0,2,0) and is linked second. */
.private-health-research article.brief-sheet {
  position: relative;
  width: 100%;
  max-width: none;
  border: 1px solid var(--research-rule);
  background: var(--research-paper);
  padding: var(--pattern-space-4);
}

/* The sheet beneath: the previous version, made tangible as one offset
   paper edge. Decorative structure only, so it hides on phones. */
.private-health-research .brief-sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px -10px -10px 14px;
  border: 1px solid var(--research-rule);
  background: var(--research-paper);
}

.private-health-research .brief-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pattern-space-1) var(--pattern-space-2);
  margin-bottom: var(--pattern-space-3);
  padding-bottom: var(--pattern-space-2);
  border-bottom: 2px solid var(--pattern-aubergine);
}

.private-health-research .brief-sheet__code {
  color: var(--pattern-ink-66);
  font-family: var(--pattern-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.private-health-research .brief-sheet__question {
  margin: 0 0 var(--pattern-space-3);
  color: var(--pattern-aubergine);
  font-family: var(--pattern-display);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

/* ========================== Evidence spine ========================== */
/* A vertical line linking records, sources, uncertainty and the next
   useful questions. Node states carry the semantic inks. */

.private-health-research .evidence-spine {
  display: grid;
  row-gap: var(--pattern-space-3);
  margin: 0;
  padding: 0 0 0 var(--pattern-space-3);
  border-left: 2px solid var(--research-rule);
  list-style: none;
}

.private-health-research .evidence-node {
  position: relative;
  margin: 0;
}

.private-health-research .evidence-node::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(-1 * var(--pattern-space-3) - 7px);
  width: 12px;
  height: 12px;
  border: 3px solid var(--research-established);
  border-radius: 50%;
  background: var(--research-paper);
}

.private-health-research .evidence-node[data-state="uncertain"]::before {
  border-color: var(--research-uncertain);
}

.private-health-research .evidence-node[data-state="changed"]::before {
  border-color: var(--research-changed);
}

.private-health-research .evidence-node__label {
  display: block;
  margin-bottom: 4px;
  color: var(--research-established);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.private-health-research .evidence-node[data-state="uncertain"] .evidence-node__label {
  color: var(--research-uncertain);
}

.private-health-research .evidence-node[data-state="changed"] .evidence-node__label {
  color: var(--research-changed);
}

.private-health-research .evidence-node__body {
  margin: 0;
  max-width: 680px;
  color: var(--pattern-ink-82);
  font-size: 17px;
  line-height: 1.6;
}

/* =========================== Offer path ============================= */
/* One connected path, not two pricing cards: the complete Clarity Brief
   first, Monthly Follow-Through only if useful. Same spine language. */

.private-health-research .offer-path {
  display: grid;
  max-width: 680px;
  /* The spine dots are the markers; the native 1./2. must never render. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.private-health-research .offer-path__step {
  position: relative;
  padding: 0 0 var(--pattern-space-4) var(--pattern-space-4);
  border-left: 2px solid var(--research-rule);
}

.private-health-research .offer-path__step:last-child {
  padding-bottom: 0;
}

.private-health-research .offer-path__step::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -8px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--research-established);
  border-radius: 50%;
  background: var(--research-paper);
}

.private-health-research .offer-path__price {
  display: block;
  margin-bottom: 4px;
  color: var(--pattern-aubergine);
  font-family: var(--pattern-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* =========================== Change proof =========================== */
/* The one dramatic aubergine field on a page. Offset paper surfaces
   carry the four states; bright iodine and pulse only exist here, where
   they clear their measured floors on the dark ground. */

.private-health-research .change-proof {
  background: var(--pattern-aubergine);
  color: var(--pattern-chalk);
  padding-block: var(--pattern-space-5) var(--pattern-space-6);
}

/* The field bleeds; the content does not. The inner measure aligns the
   heading and cards with the editorial grid and keeps the cards' offset
   paper edges inside the band instead of past the viewport. */
.private-health-research .change-proof__inner {
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
}

.private-health-research .change-proof .research-section-code {
  color: var(--pattern-chalk-78);
}

.private-health-research .change-proof .research-heading {
  color: var(--pattern-chalk);
}

.private-health-research .change-proof__lede {
  max-width: 680px;
  margin: 0 0 var(--pattern-space-4);
  color: var(--pattern-chalk-78);
  font-size: 18px;
  line-height: 1.6;
}

.private-health-research .change-proof__states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pattern-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each state is an offset paper slip pulled from the folio. */
.private-health-research .change-proof__state {
  position: relative;
  margin: 0;
  border: 1px solid var(--research-rule);
  background: var(--research-paper);
  color: var(--pattern-aubergine);
  padding: var(--pattern-space-3);
}

.private-health-research .change-proof__state::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px -6px -6px 8px;
  border: 1px solid var(--pattern-chalk-16);
}

.private-health-research .change-proof__state-name {
  display: block;
  margin-bottom: 6px;
  font-family: var(--pattern-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pattern-aubergine);
}

.private-health-research .change-proof__state--new .change-proof__state-name {
  color: var(--research-established);
}

.private-health-research .change-proof__state--changed .change-proof__state-name {
  color: var(--research-changed);
}

.private-health-research .change-proof__state--unclear .change-proof__state-name {
  color: var(--research-uncertain);
}

.private-health-research .change-proof__state-body {
  margin: 0;
  color: var(--pattern-ink-82);
  font-size: 17px;
  line-height: 1.6;
}

/* On the dark ground itself, marginalia may use the bright signals. */
.private-health-research .change-proof .change-proof__margin-uncertain {
  color: var(--pattern-iodine);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 600;
}

.private-health-research .change-proof .change-proof__margin-changed {
  color: var(--pattern-pulse);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 600;
}

/* The shell's mineral focus ring disappears on aubergine; chalk shows. */
.private-health-research .change-proof :focus-visible {
  outline: 3px solid var(--pattern-chalk);
  outline-offset: 3px;
}

/* ======================== Flagship editorial ======================== */
/* Feature rows, not equal cards: subject, title, one-line relevance,
   separated by hairlines with generous air. */

.private-health-research .flagship-editorial {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--research-rule);
}

.private-health-research .flagship-editorial__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: var(--pattern-space-4);
  padding-block: var(--pattern-space-3);
  border-bottom: 1px solid var(--research-rule);
}

.private-health-research .flagship-editorial__subject {
  margin: 0;
  color: var(--pattern-ink-66);
  font-family: var(--pattern-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 5px;
}

.private-health-research .flagship-editorial__title {
  margin: 0 0 6px;
  font-family: var(--pattern-display);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.private-health-research .flagship-editorial__title a {
  color: var(--pattern-aubergine);
  text-decoration: none;
}

.private-health-research .flagship-editorial__title a:hover {
  color: var(--research-established);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.private-health-research .flagship-editorial__relevance {
  /* The relevance sentence stays in the reading column, under the title,
     never auto-placed beneath the subject rail. */
  grid-column: 2;
  margin: 0;
  max-width: 680px;
  color: var(--pattern-ink-72);
  font-size: 17px;
  line-height: 1.6;
}

/* ============= Research: evidence desk (LB Task 8a-2) ============== */
/* Rows, never cards: hairline, mono folio number, quiet arrow. */

.private-health-research .research-desk {
  padding-block: var(--pattern-space-6) var(--pattern-space-3);
}

.private-health-research .research-desk__lede {
  max-width: 62ch;
  margin-top: var(--pattern-space-3);
}

.private-health-research .desk-folio {
  margin-right: 12px;
  color: var(--pattern-ink-66);
  font-variant-numeric: tabular-nums;
}

.private-health-research .flagship-editorial__row {
  position: relative;
  padding-block: var(--pattern-space-4);
  border-top: 1px solid var(--research-rule);
}

.private-health-research .flagship-editorial__row:last-child {
  border-bottom: 1px solid var(--research-rule);
}

.private-health-research .flagship-editorial__row:hover,
.private-health-research .flagship-editorial__row:focus-within {
  background: var(--pattern-mist);
}

.private-health-research .flagship-editorial__title a {
  display: inline-block;
  padding-right: 28px;
}

.private-health-research .flagship-editorial__title a::after {
  content: "\2192";
  position: absolute;
  right: 0;
  color: var(--research-rule);
}

.private-health-research .flagship-editorial__row:hover .flagship-editorial__title a::after,
.private-health-research .flagship-editorial__row:focus-within .flagship-editorial__title a::after {
  color: var(--pattern-mineral);
}

.private-health-research .research-desk__archive {
  padding-block: var(--pattern-space-5) var(--pattern-space-6);
}

.private-health-research .desk-archive-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--pattern-aubergine);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .private-health-research .flagship-editorial__row {
    padding-block: var(--pattern-space-3);
  }

  .private-health-research .flagship-editorial__title a::after { content: none; }
  .private-health-research .flagship-editorial__title a { padding-right: 0; }
}

/* =========================== Method strip =========================== */
/* What matters. What's uncertain. What to ask next. Three quiet segments
   in the semantic inks, reading as one sentence of method. */

.private-health-research .method-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pattern-space-2) var(--pattern-space-4);
  margin: 0;
  padding: var(--pattern-space-3) 0;
  border-top: 2px solid var(--pattern-aubergine);
  border-bottom: 1px solid var(--research-rule);
}

.private-health-research .method-strip__part {
  margin: 0;
  font-family: var(--pattern-display);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
}

.private-health-research .method-strip__part--matters {
  color: var(--research-established);
}

.private-health-research .method-strip__part--uncertain {
  color: var(--research-uncertain);
}

.private-health-research .method-strip__part--ask {
  color: var(--pattern-aubergine);
}

/* ============================ Fit form ============================== */
/* One public start route. Large native controls, visible labels, an
   error summary target, nothing that competes. */

.private-health-research .fit-form {
  display: grid;
  row-gap: var(--pattern-space-3);
  max-width: 680px;
}

.private-health-research .fit-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--pattern-aubergine);
  font-size: 17px;
  font-weight: 700;
}

.private-health-research .fit-form .fit-form__hint {
  display: block;
  margin: 0 0 8px;
  color: var(--pattern-ink-72);
  font-size: 15px;
  line-height: 1.55;
}

.private-health-research .fit-form input,
.private-health-research .fit-form select,
.private-health-research .fit-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--pattern-aubergine);
  border-radius: 4px;
  background: var(--research-paper);
  color: var(--pattern-aubergine);
  font-family: var(--pattern-body);
  font-size: 17px;
  line-height: 1.55;
}

.private-health-research .fit-form textarea {
  min-height: 160px;
  resize: vertical;
}

.private-health-research .fit-form input:focus-visible,
.private-health-research .fit-form select:focus-visible,
.private-health-research .fit-form textarea:focus-visible {
  outline: 3px solid var(--pattern-mineral);
  outline-offset: 2px;
  border-color: var(--research-established);
}

.private-health-research .fit-form__errors {
  margin: 0;
  padding: var(--pattern-space-2) var(--pattern-space-3);
  border-left: 4px solid var(--research-changed);
  background: var(--research-paper);
  color: var(--research-changed);
  font-size: 17px;
  line-height: 1.6;
}

.private-health-research .fit-form__errors:empty {
  display: none;
}

/* =========================== Final action =========================== */
/* One question, one action. LB Task 12b: the field bleeds, the content does
   not. Its words started at x=0, so the padding puts them back on the
   shared grid without a wrapper the ledger record would own. */

.private-health-research .final-action {
  display: grid;
  justify-items: start;
  row-gap: var(--pattern-space-3);
  padding-top: var(--pattern-space-4);
  padding-inline: calc((100% - min(100% - 48px, 1120px)) / 2);
  border-top: 2px solid var(--pattern-aubergine);
}

.private-health-research .final-action > * { max-width: 680px; }

/* ========================= Motion language ========================== */
/* 140ms colour and border feedback only. Nothing moves, lifts or runs
   continuously; reduced-motion visitors get a perfectly still layer. */

@media (prefers-reduced-motion: no-preference) {
  /* The desk's only feedback: colour, stilled under reduced motion. */
  .private-health-research .flagship-editorial__row {
    transition: background-color 140ms ease;
  }

  .private-health-research .flagship-editorial__title a::after {
    transition: color 140ms ease;
  }

  .private-health-research .research-action,
  .private-health-research .research-action--quiet,
  .private-health-research .flagship-editorial__title a {
    transition: color 140ms ease-out, background-color 140ms ease-out,
      border-color 140ms ease-out, text-decoration-color 140ms ease-out;
  }

  .private-health-research .fit-form input,
  .private-health-research .fit-form select,
  .private-health-research .fit-form textarea {
    transition: border-color 140ms ease-out, outline-color 140ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .private-health-research,
  .private-health-research *,
  .private-health-research *::before,
  .private-health-research *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== Phones ============================== */
/* One linear document card, in reading order, no horizontal scroll.
   Matches the shell's 760px phone boundary. */

@media (max-width: 760px) {
  .private-health-research .change-proof__inner {
    width: calc(100% - 32px);
  }

  .private-health-research .final-action { padding-inline: 16px; }

  .private-health-research .flagship-editorial__relevance {
    grid-column: 1 / auto;
  }

  .private-health-research .research-hero {
    padding-block: var(--pattern-space-5) var(--pattern-space-4);
  }

  .private-health-research .research-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .private-health-research .research-hero h1,
  .private-health-research .research-hero__subhead {
    grid-column: auto;
  }

  .private-health-research article.brief-sheet {
    padding: var(--pattern-space-3);
  }

  /* The offset layers could push past 320px; the single card carries
     the story on its own. */
  .private-health-research .brief-sheet::before,
  .private-health-research .change-proof__state::after {
    display: none;
  }

  .private-health-research .change-proof__states {
    grid-template-columns: minmax(0, 1fr);
  }

  .private-health-research .flagship-editorial__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .private-health-research .flagship-editorial__subject {
    padding-top: 0;
  }

  .private-health-research .method-strip {
    flex-direction: column;
    gap: var(--pattern-space-1);
  }

  .private-health-research .research-action {
    width: 100%;
  }

  /* The quiet link never becomes a bar, even on phones. */
  .private-health-research .research-action--quiet {
    width: auto;
  }
}