.guide-table { margin-block: 1.25rem; overflow-x: auto; }
.guide-table table { width: 100%; border-collapse: collapse; text-align: left; }
.guide-table caption { text-align: left; color: var(--lm-color-fg-muted); margin-bottom: var(--lm-space-2); }
.guide-table th, .guide-table td { padding: var(--lm-space-3); border-bottom: 1px solid var(--lm-color-border-default); vertical-align: top; }
.guide-table th { font-weight: 600; }
.guide-table thead th { border-top: 1px solid var(--lm-color-border-default); }
.guide-table th:first-child { padding-left: 0; }
.guide-table td:last-child, .guide-table thead th:last-child { padding-right: 0; }
[aria-disabled="true"] { pointer-events: none; opacity: .55; }

/* The skip link waits wholly above the page with no shadow, so nothing marks the top-left corner, and drops in as a
   real control when the keyboard reaches it, covering the LabRuns lockup at every header width. */
.site-page .skip-link {
  top: 0;
  left: var(--lm-space-2);
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 var(--lm-space-5);
  border: 1px solid var(--lm-color-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-color-bg-surface);
  box-shadow: none;
  color: var(--lm-color-fg-default);
  font: 600 var(--lm-font-size-md) / 1 var(--lm-font-family-ui);
  text-decoration: none;
  transform: none;
  translate: 0 calc(-100% - 2rem);
  transition: translate calc(var(--lm-duration-4) / 2) var(--ease-out);
}

.site-page .skip-link:focus {
  translate: 0 0.5rem;
  box-shadow: var(--lm-shadow-popover);
}

@media (prefers-reduced-motion: reduce) {
  .site-page .skip-link {
    transition: none;
  }
}

/* ---------- The public pages in the homepage's language (pricing, the study pages) ----------
   These pages share the homepage's header, buttons, type and footer (home.css, scoped by .home-landing on <body>) and
   its pieces: .hp-section-head, .hp-window in an indigo .hp-feature-field, .hp-sheet, .hp-feature-grid and
   .hp-closing. What follows lays out each page's own sections. Green, amber and red stay with Met, Undecided and
   Not met, so the marks here are ink-indigo. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----- Pricing ----- */

.pr-hero { padding: clamp(3.5rem, 6vw, var(--lm-space-9)) 0 0; text-align: center; }
.pr-hero h1 { max-width: 20ch; margin-inline: auto; }

.pr-plan { padding-top: clamp(var(--lm-space-7), 5vw, 4.5rem); }
.pr-field { padding: clamp(var(--lm-space-5), 4.5vw, 4.5rem) clamp(var(--lm-space-4), 6vw, 6.5rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }

/* The price sheet: the plan, its billing choice and actions on the left, what every member gets on the right. */
.pr-sheet { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); overflow: hidden; border-radius: var(--lm-radius-frame); background: var(--lm-color-bg-surface); box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far); }
.pr-price, .pr-included { padding: clamp(1.75rem, 3.5vw, 3.25rem); }
.pr-price { display: flex; flex-direction: column; border-right: 1px solid var(--lm-color-border-default); }
.home-redesign .pr-price h2 { font-size: clamp(var(--lm-font-size-4xl), 3vw, 2.625rem); }

/* Monthly or yearly: two radio buttons drawn as one segmented control. */
.pr-cycle { position: relative; display: inline-flex; align-self: start; gap: var(--lm-space-1); margin: var(--lm-space-6) 0 0; padding: var(--lm-space-1); border: 1px solid var(--lm-color-border-default); border-radius: var(--lm-radius-frame); background: var(--lm-color-bg-sunken); }
.pr-cycle input { position: absolute; opacity: 0; pointer-events: none; }
.pr-cycle label { display: inline-flex; align-items: center; gap: var(--lm-space-2); min-height: 2.75rem; padding: 0 1.125rem; white-space: nowrap; border-radius: var(--lm-radius-control); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); font-weight: 500; cursor: pointer; transition: color var(--lm-duration-2) var(--ease-out), background-color var(--lm-duration-2) var(--ease-out), box-shadow var(--lm-duration-2) var(--ease-out); }
.pr-cycle label:hover { color: var(--lm-color-fg-default); }
.pr-cycle input:checked + label { background: var(--lm-color-bg-surface); color: var(--lm-color-fg-default); box-shadow: 0 0 0 1px var(--lm-color-border-default), 0 1px 3px light-dark(rgb(22 25 31 / 10%), rgb(0 0 0 / 40%)); }
.pr-cycle input:focus-visible + label { outline: var(--lm-focus-width) solid var(--lm-color-focus-ring); outline-offset: 2px; }
.pr-save { padding: 0.125rem var(--lm-space-2); border-radius: var(--lm-radius-control); background: var(--lm-color-bg-accent-wash); color: var(--lm-color-fg-accent); font: var(--lm-type-label); }
/* On a phone the saving leaves the control and reads beneath it while Yearly is chosen, so the control holds one line. */
.pr-save-note { display: none; margin-top: 0.625rem; color: var(--lm-color-fg-accent); font-size: var(--lm-font-size-xs); font-weight: 500; }

.pr-amounts { display: grid; gap: var(--lm-space-5); margin-top: 1.75rem; }
.pr-figure { display: flex; align-items: baseline; gap: 0.625rem; }
.pr-figure strong { color: var(--lm-color-fg-default); font-size: clamp(3.5rem, 5.4vw, 4.75rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-figure span { color: var(--lm-color-fg-muted); font-size: 1.0625rem; }
.pr-terms { margin-top: var(--lm-space-3); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }
/* The chosen period's amount alone; a browser without :has() shows both, each with its own terms. */
.pr-sheet:has(#cycle-month:checked) .pr-amount[data-cycle="year"],
.pr-sheet:has(#cycle-year:checked) .pr-amount[data-cycle="month"] { display: none; }
.pr-price .actions { flex-direction: column; margin-top: auto; padding-top: 2.25rem; }
.pr-price .actions .btn { flex: none; width: 100%; }
.pr-note { margin-top: var(--lm-space-4); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-xs); }

.pr-included { background: var(--lm-color-bg-canvas); }
.home-redesign .pr-included h3 { padding-bottom: 0.875rem; border-bottom: 1px solid var(--lm-color-border-rule); color: var(--lm-color-fg-muted); font: var(--lm-type-label); letter-spacing: var(--lm-tracking-label); }
.pr-list { margin: 0; padding: 0; list-style: none; }
.pr-list li { position: relative; padding: 0.9375rem 0 0.9375rem 2.125rem; border-bottom: 1px solid var(--lm-color-border-default); color: var(--lm-color-fg-body); font-size: var(--lm-font-size-md); line-height: 1.6; }
.pr-list li:last-child { border-bottom: 0; }
/* An ink-indigo tick in a soft disc. */
.pr-list li::before { content: ""; position: absolute; left: 0; top: 1.0625rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--lm-color-bg-accent-wash); }
.pr-list li::after { content: ""; position: absolute; left: 0.4375rem; top: 1.25rem; width: 0.375rem; height: 0.6875rem; border: solid var(--lm-color-fg-accent); border-width: 0 1.75px 1.75px 0; rotate: 40deg; }

/* Who the license covers: the heading row, then in the indigo field the contents page of the binder the plan's work
   files into, printed on paper over its cover, beside the four facts of the license as ruled rows. */
.pr-coverage, .pr-billing { padding-block: var(--lm-space-section); }
.pr-binder-field { display: grid; grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); gap: clamp(var(--lm-space-7), 6vw, var(--lm-space-9)); align-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(var(--lm-space-5), 5vw, 5rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }
.pr-binder { position: relative; margin: 0 0 0 var(--lm-space-4); aspect-ratio: 600 / 777; }
.pr-binder img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0.1875rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 22px 44px -22px rgb(22 25 31 / 45%); }
.pr-binder-cover { translate: -1rem 0.75rem; rotate: -2.25deg; }
.pr-roles { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-color-border-rule); }
.pr-roles li { padding-block: var(--lm-space-5); border-bottom: 1px solid var(--lm-color-border-default); }
.home-redesign .pr-roles h3 { font: 600 1.0625rem / 1.35 var(--lm-font-family-ui); letter-spacing: -0.01em; }
.pr-roles p { max-width: 34rem; margin-top: var(--lm-space-2); color: var(--lm-color-fg-body); font-size: var(--lm-font-size-md); line-height: 1.65; }

/* The free week as a run of days: a solid track through the week and a dashed one after it. */
.pr-week { padding-block: var(--lm-space-section); background: var(--lm-color-bg-sunken); }
.pr-run { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 2.75rem 0 0; list-style: none; }
.pr-run::before, .pr-run::after { content: ""; position: absolute; top: 0.5625rem; height: 0; }
.pr-run::before { left: var(--lm-space-2); width: calc(75% - 0.5rem); border-top: 2px solid var(--lm-color-bg-accent); }
.pr-run::after { left: 75%; right: 0; border-top: 2px dashed var(--lm-color-border-rule); }
.pr-run li { position: relative; padding-right: 2.5rem; }
.pr-run li::before { content: ""; position: absolute; top: -2.75rem; left: 0; width: 1.125rem; height: 1.125rem; box-sizing: border-box; border: 2px solid var(--lm-color-bg-accent); border-radius: 50%; background: var(--lm-color-bg-sunken); }
.pr-run .pr-run-start::before { background: var(--lm-color-bg-accent); }
.pr-run .pr-run-after::before { border-color: var(--lm-color-border-rule); }
.pr-day { display: block; color: var(--lm-color-fg-accent); font: var(--lm-type-label); }
.pr-run-after .pr-day { color: var(--lm-color-fg-muted); }
.home-redesign .pr-run h3 { margin-top: var(--lm-space-3); font-size: var(--lm-font-size-xl); }
.pr-run p { margin-top: 0.625rem; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); line-height: 1.65; }

/* Billing details: the heading beside a ruled list. */
.pr-billing-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--lm-space-7), 7vw, 7rem); align-items: start; }
.home-redesign .pr-billing-intro h2 { font-size: clamp(var(--lm-font-size-4xl), 3.4vw, 2.75rem); }
.pr-billing-intro p { max-width: 24rem; margin-top: 1.25rem; color: var(--lm-color-fg-muted); }
.pr-details { border-top: 1px solid var(--lm-color-border-rule); }
.pr-details > div { padding-block: var(--lm-space-5); border-bottom: 1px solid var(--lm-color-border-default); }
.pr-details dt { color: var(--lm-color-fg-default); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.pr-details dd { max-width: 40rem; margin: var(--lm-space-2) 0 0; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); line-height: 1.7; }
.pricing .hp-closing { border-top: 1px solid var(--lm-color-border-default); }

@media (max-width: 70rem) {
  .pr-sheet { grid-template-columns: minmax(0, 1fr); }
  .pr-binder-field { grid-template-columns: minmax(0, 1fr); }
  .pr-binder { width: min(100% - 1rem, 30rem); margin-inline: auto; }
  .pr-price { border-right: 0; border-bottom: 1px solid var(--lm-color-border-default); }
  .pr-run { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
  .pr-run::before, .pr-run::after { display: none; }
  .pr-run li::before { top: -1.75rem; }
  .pr-run { padding-top: 1.75rem; }
}
@media (max-width: 44rem) {
  .pr-hero { padding-top: 2.75rem; }
  .pr-field { padding: var(--lm-space-3); }
  .pr-run { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; padding: 0 0 0 var(--lm-space-6); }
  .pr-run li { padding-right: 0; }
  .pr-run li::before { top: 0.0625rem; left: -2rem; }
  .pr-billing-inner { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-6); }
  .pr-binder-field { padding: var(--lm-space-6) 1.25rem var(--lm-space-4); }
}
@media (max-width: 30rem) {
  .pr-cycle { align-self: stretch; }
  .pr-cycle label { flex: 1; justify-content: center; }
  .pr-cycle .pr-save { display: none; }
  .pr-price:has(#cycle-year:checked) .pr-save-note { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-cycle label { transition: none; }
}

/* ----- Study pages: the study beside page 1 of its signed report, its Results window, ruled detail rows ----- */

.lp-hero { padding: clamp(3.5rem, 6vw, var(--lm-space-9)) 0 clamp(var(--lm-space-8), 7vw, 7rem); }
.lp-hero-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(var(--lm-space-7), 6vw, 6.5rem); align-items: center; }
.lp-hero:has(.lp-hero-solo) { padding-bottom: clamp(var(--lm-space-4), 2vw, var(--lm-space-6)); }
.home-redesign .lp-hero h1 { max-width: 13ch; }
.lp-hero .hp-lede { max-width: 38rem; margin: 1.75rem 0 0; }
.lp-hero .actions { margin-top: 2.25rem; }
/* A study page without an example report (reference interval verification) centres its text over the ruled rows, as
   the homepage and Pricing do, so no empty column is left beside it. */
.lp-hero-solo { grid-template-columns: minmax(0, 1fr); text-align: center; }
.home-redesign .lp-hero-solo h1 { margin-inline: auto; }
.lp-hero-solo .hp-lede { max-width: 46rem; margin-inline: auto; }
.lp-hero-solo .actions { justify-content: center; }
.lp-hero .hp-access a { color: inherit; }
.lp-hero .hp-access a:hover { color: var(--lm-color-fg-accent); }

/* Page 1 as a printed sheet, tilted a little in the indigo field, the rest of the report stacked behind it. */
.lp-report { margin: 0; }
.lp-report-field { display: grid; place-items: center; padding: clamp(2.25rem, 4.5vw, var(--lm-space-8)) clamp(var(--lm-space-6), 5vw, 4.5rem) clamp(var(--lm-space-7), 5vw, 4.75rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }
.lp-report .hp-sheet { width: min(100%, 25rem); rotate: 1.75deg; }

.lp-screen { padding-block: var(--lm-space-section); background: var(--lm-color-bg-sunken); }

/* Collection plan, limits, report and records: each heading beside its text, the rows ruled like a printed form. */
.lp-details { padding-block: var(--lm-space-section); }
.lp-row { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(var(--lm-space-6), 6vw, var(--lm-space-9)); padding-block: clamp(2.25rem, 3.5vw, var(--lm-space-7)); border-top: 1px solid var(--lm-color-border-default); }
.lp-row:first-child { border-top-color: var(--lm-color-border-rule); }
.lp-row:last-child { border-bottom: 1px solid var(--lm-color-border-default); }
.home-redesign .lp-row h2 { font-size: clamp(var(--lm-font-size-3xl), 2.6vw, 2.25rem); line-height: 1.12; }
.lp-body { max-width: 44rem; color: var(--lm-color-fg-body); }
.lp-body > * + * { margin-top: var(--lm-space-4); }
.lp-body :is(ul, ol) { margin-block: 0; padding-left: 1.25rem; }
.lp-body li + li { margin-top: var(--lm-space-2); }
.lp-body li::marker { color: var(--lm-color-fg-muted); }
.lp-body a { color: var(--lm-color-fg-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.lp-body a > svg { width: 1rem; height: 1rem; }
.lp-body .guide-table { overflow-x: auto; }
.lp-body table { width: 100%; border-collapse: collapse; font-size: var(--lm-font-size-md); }
.lp-body :is(th, td) { padding: var(--lm-space-3) var(--lm-space-4) var(--lm-space-3) 0; border-bottom: 1px solid var(--lm-color-border-default); text-align: left; vertical-align: top; }
.lp-body thead th { border-bottom-color: var(--lm-color-border-rule); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-xs); font-weight: 600; }
.lp-body tbody th { color: var(--lm-color-fg-default); font-weight: 500; }

/* Guides: a short introduction beside a ruled list of links. */
.lp-guides { padding-block: var(--lm-space-section); background: var(--lm-color-bg-sunken); }
.lp-guides-inner { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(var(--lm-space-6), 6vw, var(--lm-space-9)); align-items: start; }
.home-redesign .lp-guides h2 { font-size: clamp(var(--lm-font-size-4xl), 3.4vw, 2.75rem); }
.lp-guides-intro p { max-width: 24rem; margin-top: 1.25rem; color: var(--lm-color-fg-muted); }
.lp-links { margin: 0; padding: 0; border-top: 1px solid var(--lm-color-border-rule); list-style: none; }
.lp-links li { border-bottom: 1px solid var(--lm-color-border-default); }
.home-redesign .lp-links a { display: flex; justify-content: space-between; gap: var(--lm-space-5); padding: 1.125rem 0; color: var(--lm-color-fg-default); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; }
.lp-links a:hover { color: var(--lm-color-fg-accent); }
.lp-links a > svg { color: var(--lm-color-fg-muted); }
.lp-links a:hover > svg { color: currentColor; }
.study-page .hp-closing p a { color: inherit; }
.study-page .hp-closing p + p { margin-top: var(--lm-space-3); }

@media (max-width: 70rem) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .lp-report .hp-sheet { width: min(100%, 22rem); }
}
@media (max-width: 44rem) {
  .lp-hero { padding: 2.75rem 0 3.5rem; }
  .lp-hero .hp-lede { margin-top: 1.25rem; }
  .lp-hero .actions { gap: var(--lm-space-3); margin-top: 1.75rem; }
  .lp-hero .btn { width: 100%; }
  .lp-report-field { padding: 1.75rem var(--lm-space-5) 2.25rem; }
  .lp-report .hp-sheet { width: min(100%, 17rem); }
  .lp-row, .lp-guides-inner { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-4); }
  .lp-guides-inner { gap: var(--lm-space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-report .hp-sheet { transition: none; }
}

/* ---------- Supporting public pages (walkthrough, example, records, data & security, institutional review, about, CAP guides, policies) ---------- */
/* Every page opens with an eyebrow, a literal headline in Archivo and a lede (.pg-hero). Reading pages then set each
   section as a ruled row: its heading on the left, a column of text at a comfortable measure on the right (.pg-row).
   The walkthrough and the live example set whole application windows and report pages in the homepage's indigo
   field; the indigo evidence band (.hp-evidence) carries the routes into the published evidence. */

/* ----- The opening ----- */

.pg-hero { padding: clamp(3.5rem, 6vw, var(--lm-space-9)) 0 clamp(3.5rem, 5.5vw, 5.5rem); }
.home-redesign .pg-hero h1 { max-width: 21ch; }
.pg-hero .hp-lede { max-width: 46rem; margin: 1.75rem 0 0; }
.pg-hero .actions { margin-top: 2.25rem; }
.pg-hero-center { padding-bottom: clamp(var(--lm-space-7), 4.5vw, var(--lm-space-8)); text-align: center; }
.pg-hero-center h1, .pg-hero-center .hp-lede { margin-inline: auto; }
.pg-hero-center .actions { justify-content: center; }
.pg-effective { margin-top: 1.25rem; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }
.hp-eyebrow a { color: inherit; text-decoration: none; }
.hp-eyebrow a:hover { color: var(--lm-color-fg-accent-hover); text-decoration: underline; }

/* ----- Reading pages: ruled rows, the heading beside its text ----- */

.pg-doc { padding-bottom: var(--lm-space-section); }
.pg-feature + .pg-doc { padding-top: var(--lm-space-section); }
.pg-rows { border-top: 1px solid var(--lm-color-border-rule); }
.pg-row { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); column-gap: clamp(var(--lm-space-6), 6vw, var(--lm-space-9)); padding-block: clamp(2.25rem, 3.2vw, var(--lm-space-7)); border-bottom: 1px solid var(--lm-color-border-default); }
.home-redesign .pg-row > h2 { position: sticky; top: 7rem; align-self: start; font-size: clamp(var(--lm-font-size-3xl), 2.6vw, 2.25rem); line-height: 1.12; scroll-margin-top: 7rem; }
.pg-body { max-width: 42rem; color: var(--lm-color-fg-body); line-height: 1.7; }
.pg-body > * + * { margin-top: var(--lm-space-4); }
.pg-body ul, .pg-body ol { padding-left: 1.25rem; }
.pg-body li + li { margin-top: 0.625rem; }
.pg-body li::marker { color: var(--lm-color-fg-muted); }
.pg-more { font-size: var(--lm-font-size-md); }
.pg-more a { text-decoration: none; }
.pg-more a svg { width: 1rem; height: 1rem; }

/* A closing section after a ruled page sits on its own rule. */
.pg .hp-closing { border-top: 1px solid var(--lm-color-border-default); }
.pg .hp-evidence + .hp-closing { border-top: 0; }
.pg .hp-closing p a { color: inherit; }
.pg .hp-closing p a:hover { color: var(--lm-color-fg-accent); }
.pg .hp-closing p + p { margin-top: 0.875rem; }
.hp-evidence-intro p a { text-decoration-color: rgb(246 247 255 / 45%); }

/* A section beside page 1 of a real report, drawn as the printed sheet on the indigo field. */
.pg-feature { padding-block: var(--lm-space-section); background: var(--lm-color-bg-sunken); }
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--lm-space-7), 6vw, 6.5rem); align-items: center; }
.home-redesign .pg-split-copy h2 { font-size: clamp(var(--lm-font-size-4xl), 3.4vw, 2.75rem); }
.pg-split-copy p { max-width: 34rem; margin-top: 1.25rem; color: var(--lm-color-fg-muted); }
.pg-split-copy .pg-more { margin-top: 1.75rem; }
.pg-sheet-field { margin: 0; padding: clamp(var(--lm-space-6), 4.5vw, var(--lm-space-8)) clamp(var(--lm-space-6), 5vw, 4.5rem) clamp(var(--lm-space-6), 4vw, 3.5rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }
.pg-sheet-field .hp-sheet { max-width: 25rem; margin-inline: auto; }

/* The page's parts as one ruled line of links above the rows. */
.pg-toc { display: flex; flex-wrap: wrap; gap: 0.625rem var(--lm-space-6); margin-bottom: var(--lm-space-7); font-size: var(--lm-font-size-md); }
.pg-toc a { color: var(--lm-color-fg-muted); text-decoration: none; }
.pg-toc a:hover { color: var(--lm-color-fg-accent); text-decoration: underline; }
.pg-note { color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }
.pg-body .pg-links { padding: 0; list-style: none; border-top: 1px solid var(--lm-color-border-default); }
.pg-body .pg-links li { margin: 0; border-bottom: 1px solid var(--lm-color-border-default); }
.pg-body .pg-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-4); padding-block: 0.875rem; text-decoration: none; }
.pg-body .pg-links a svg { width: 1rem; height: 1rem; }

/* The CAP guides' table, at the reading column's width. */
.pg-body .guide-table { margin-block: 1.75rem; }
.pg-body .guide-table table { font-size: var(--lm-font-size-md); line-height: 1.55; }
.pg-body .guide-table thead th { border-top: 0; border-bottom-color: var(--lm-color-border-rule); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-xs); font-weight: 600; }
.pg-body .guide-table tbody th { color: var(--lm-color-fg-default); white-space: nowrap; }

/* Records to keep: the table and its text beside page 1 of the guide's example report, which stays in view while the
   row scrolls. Each part a checklist item asks for has a number in the table and the same number on an indigo ring
   round that part of the page; pointing at a table row draws its rings again and quiets the others. */
.pg-records { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); grid-template-rows: auto 1fr; row-gap: var(--lm-space-5); }
.home-redesign .pg-records > h2 { position: static; grid-column: 1; }
.pg-records > .pg-body { grid-column: 1; max-width: 46rem; }
.guide-sheet { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: var(--lm-space-9); margin: 0; }
.guide-page { position: relative; aspect-ratio: 600 / 776; border-radius: 0.1875rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 22px 44px -22px rgb(22 25 31 / 45%), 0 0 0 1px var(--lm-paper-edge, transparent); }
.guide-page img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.home-redesign .guide-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.guide-rings rect { fill: none; stroke: var(--lm-color-bg-accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity var(--lm-duration-2) var(--ease-out); }
.guide-badge { position: absolute; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--lm-color-bg-accent); color: var(--lm-color-fg-on-accent); font: 600 var(--lm-font-size-2xs) / 1 var(--lm-font-family-ui); font-variant-numeric: tabular-nums; translate: calc(-100% - 0.3125rem) -0.125rem; transition: opacity var(--lm-duration-2) var(--ease-out); }
.guide-sheet figcaption { margin-top: 1.25rem; font-size: var(--lm-font-size-md); }
.home-redesign .guide-sheet figcaption a { color: var(--lm-color-fg-accent); text-decoration: none; }
.guide-sheet figcaption svg { width: 1rem; height: 1rem; }
.guide-parts { margin: 0; padding: 0; list-style: none; }
.pg-body .guide-parts li + li { margin-top: var(--lm-space-1); }
.guide-key { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: var(--lm-space-2); border-radius: 50%; background: var(--lm-color-bg-accent); color: var(--lm-color-fg-on-accent); font: 600 0.6875rem / 1 var(--lm-font-family-ui); font-variant-numeric: tabular-nums; vertical-align: 0.0625rem; }
.pg-records tbody tr { transition: background-color var(--lm-duration-1) var(--ease-out); }
.pg-records tbody tr:hover { background: var(--lm-color-bg-hover); }
.pg-records:has(tbody tr:hover) :is(.guide-rings rect, .guide-badge) { opacity: 0.2; }
.pg-records:has(tr[data-rings~="1"]:hover) :is(rect, .guide-badge)[data-n="1"],
.pg-records:has(tr[data-rings~="2"]:hover) :is(rect, .guide-badge)[data-n="2"],
.pg-records:has(tr[data-rings~="3"]:hover) :is(rect, .guide-badge)[data-n="3"],
.pg-records:has(tr[data-rings~="4"]:hover) :is(rect, .guide-badge)[data-n="4"] { opacity: 1; }

/* The guides directory: four guides in a ruled two-column grid, each whole card a link. */
.pg-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-color-border-rule); }
.pg-guide-grid li { position: relative; display: grid; grid-template-columns: 11.25rem minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: var(--lm-space-6); padding: 2.5rem 2.5rem 2.5rem 0; border-bottom: 1px solid var(--lm-color-border-default); }
.pg-guide-sheet { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; border-radius: 0.125rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 14px 28px -16px rgb(22 25 31 / 45%); transition: translate var(--lm-duration-2) var(--ease-out), box-shadow var(--lm-duration-2) var(--ease-out); }
.pg-guide-grid li:hover .pg-guide-sheet { box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 20px 34px -16px rgb(22 25 31 / 50%); }
.pg-guide-grid li:nth-child(2n) { padding-left: 2.5rem; border-left: 1px solid var(--lm-color-border-default); }
.home-redesign .pg-guide-grid h2 { grid-column: 2; font-size: clamp(1.375rem, 1.8vw, var(--lm-font-size-3xl)); line-height: 1.2; }
.pg-guide-grid h2 a { color: var(--lm-color-fg-default); text-decoration: none; }
.pg-guide-grid h2 a::after { content: ""; position: absolute; inset: 0; }
.pg-guide-grid li:hover h2 a { color: var(--lm-color-fg-accent); }
.pg-guide-grid h2 a:focus-visible { outline: none; }
.pg-guide-grid li:has(h2 a:focus-visible) { outline: var(--lm-focus-width) solid var(--lm-color-focus-ring); outline-offset: -2px; }
.pg-guide-grid p { grid-column: 2; max-width: 34rem; margin-top: 0.875rem; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-base); line-height: 1.7; }
.pg-guide-arrow { grid-column: 3; grid-row: 1; align-self: start; padding-top: var(--lm-space-1); color: var(--lm-color-fg-accent); transition: translate var(--lm-duration-3) var(--ease-out); }
.pg-guide-grid li:hover .pg-guide-arrow { translate: 3px 0; }
.pg-rows-after { margin-top: var(--lm-space-8); }

/* The Privacy Policy: a document control strip under the title, the ledger of what LabRuns keeps, then its handling
   as a ruled grid of short statements. */
.pv-control { display: flex; flex-wrap: wrap; gap: var(--lm-space-4) clamp(var(--lm-space-6), 4.5vw, 4.5rem); margin: 2.25rem 0 0; padding-block: 1.125rem; border-block: 1px solid var(--lm-color-border-default); }
.pv-control dt { color: var(--lm-color-fg-muted); font: 600 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); }
.pv-control dd { margin: 0.3rem 0 0; color: var(--lm-color-fg-default); font: 500 var(--lm-font-size-md) / 1.4 var(--lm-font-family-ui); }
.pv-section + .pv-section { margin-top: clamp(var(--lm-space-8), 6vw, 5.5rem); }
.home-redesign .pv-section h2 { font-size: clamp(var(--lm-font-size-3xl), 2.6vw, 2.25rem); line-height: 1.12; scroll-margin-top: 7rem; }
.pv-ledger { margin-top: 1.75rem; overflow-x: auto; }
.pv-ledger table { width: 100%; border-collapse: collapse; line-height: 1.55; }
.pv-ledger :is(th, td) { padding: 1.0625rem 0; border-bottom: 1px solid var(--lm-color-border-default); text-align: left; vertical-align: top; }
.pv-ledger thead th { padding-block: 0 var(--lm-space-3); border-bottom-color: var(--lm-color-border-rule); color: var(--lm-color-fg-muted); font: 600 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); }
.pv-ledger tbody th { padding-right: clamp(var(--lm-space-6), 6vw, var(--lm-space-9)); color: var(--lm-color-fg-default); font-weight: 500; }
.pv-ledger td { width: 36%; color: var(--lm-color-fg-body); }
.pv-notes { margin: var(--lm-space-5) 0 0; padding: 0; list-style: none; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); line-height: 1.6; }
.pv-notes li + li { margin-top: 0.375rem; }
.pv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.75rem 0 0; border-top: 1px solid var(--lm-color-border-rule); }
.pv-facts > div { padding: 1.75rem 2.25rem var(--lm-space-6) 0; border-bottom: 1px solid var(--lm-color-border-default); }
.pv-facts > div:not(:nth-child(3n + 1)) { padding-left: 2.25rem; border-left: 1px solid var(--lm-color-border-default); }
.pv-facts dt { color: var(--lm-color-fg-default); font: 600 var(--lm-font-size-base) / 1.4 var(--lm-font-family-ui); }
.pv-facts dd { margin: 0.625rem 0 0; color: var(--lm-color-fg-body); line-height: 1.65; }
.pv-address { margin-top: clamp(3.5rem, 5vw, 4.5rem); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); font-style: normal; line-height: 1.7; }

.pg-missing { min-height: 50vh; }

/* ----- Institutional review: the reviewer's packet. A document control strip under the title, then numbered sections
   in the Terms format: one ruled table of facts, each row pointing to the Data & security row that explains it, the
   evaluation package as a download, and the policies. ----- */

.ir-hero { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.ir-control { max-width: none; }
.ir-control a { color: inherit; text-decoration-color: var(--lm-color-border-rule); text-underline-offset: 0.2em; }
.ir-control a:hover { color: var(--lm-color-fg-accent); }
.home-redesign .ir-section { display: flex; align-items: baseline; gap: var(--lm-space-4); margin-top: clamp(var(--lm-space-8), 6vw, 5.5rem); font-size: clamp(var(--lm-font-size-3xl), 2.6vw, 2.25rem); line-height: 1.12; scroll-margin-top: 7rem; }
.home-redesign .ir-section:first-child { margin-top: 0; }
.ir-number { min-width: 1.5rem; color: var(--lm-color-fg-muted); font: 500 var(--lm-font-size-base) / 1 var(--lm-font-family-ui); font-variant-numeric: tabular-nums; }
.ir-intro { max-width: 40rem; margin: var(--lm-space-4) 0 0 2.5rem; color: var(--lm-color-fg-body); line-height: 1.7; }

.ir-facts { margin-top: 1.75rem; overflow-x: auto; }
.ir-facts table { width: 100%; border-collapse: collapse; font-size: var(--lm-font-size-md); line-height: 1.55; }
.ir-facts :is(th, td) { padding: 0.9375rem var(--lm-space-5) 0.9375rem 0; border-bottom: 1px solid var(--lm-color-border-default); text-align: left; vertical-align: top; }
.ir-facts thead th { padding-block: 0 var(--lm-space-3); border-bottom-color: var(--lm-color-border-rule); color: var(--lm-color-fg-muted); font: 600 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); }
.ir-facts tbody th { width: 12rem; color: var(--lm-color-fg-default); font-weight: 600; }
.ir-facts td { color: var(--lm-color-fg-body); }
.ir-facts td:last-child { width: 15rem; padding-right: 0; }
.ir-facts tbody tr { transition: background-color var(--lm-duration-1) var(--ease-out); }
.ir-facts tbody tr:has(.ir-see:hover) { background: var(--lm-color-bg-hover); }
.ir-facts tbody tr:target { background: var(--lm-color-bg-accent-wash); }
.home-redesign .ir-see { display: inline-flex; align-items: baseline; gap: 0.375rem; color: var(--lm-color-fg-accent); font-size: var(--lm-font-size-sm); font-weight: 500; text-decoration: none; }
.ir-see:hover { color: var(--lm-color-fg-accent-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.ir-see svg { flex: none; width: 0.875rem; height: 0.875rem; translate: 0 0.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* The package: a file tile, its name and what it holds, an arrow into the file. */
.home-redesign .ir-file { display: grid; max-width: 52rem; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 1.25rem; row-gap: var(--lm-space-1); align-items: center; margin-top: 1.75rem; padding: 1.25rem var(--lm-space-5); border: 1px solid var(--lm-color-border-default); border-radius: var(--lm-radius-frame); background: var(--lm-color-bg-surface); color: var(--lm-color-fg-default); text-decoration: none; transition: border-color var(--lm-duration-1) var(--ease-out); }
.ir-file:hover { border-color: var(--lm-color-border-accent); }
.ir-file-type { grid-row: 1 / span 2; display: grid; place-items: center; width: 3rem; height: 3.5rem; border-radius: var(--lm-radius-control); background: var(--lm-color-bg-accent-wash); color: var(--lm-color-fg-accent); font: 700 var(--lm-font-size-2xs) / 1 var(--lm-font-family-ui); letter-spacing: 0.04em; }
.ir-file-name { font: 600 1.0625rem / 1.3 var(--lm-font-family-ui); }
.ir-file-meta { grid-column: 2; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-sm); }
.ir-file svg { grid-column: 3; grid-row: 1 / span 2; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--lm-color-fg-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--lm-duration-2) var(--ease-out); }
.ir-file:hover .ir-down { translate: 0 2px; }
.ir-links { margin: var(--lm-space-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-color-border-rule); }
.ir-links li { border-bottom: 1px solid var(--lm-color-border-default); }
.home-redesign .ir-links a { display: grid; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr) auto; gap: var(--lm-space-5); align-items: baseline; padding-block: var(--lm-space-4); color: var(--lm-color-fg-default); text-decoration: none; }
.ir-link-name { font-weight: 600; }
.ir-link-meta { color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }
.ir-links a:hover .ir-link-name { color: var(--lm-color-fg-accent); }
.ir-links a > svg { width: 1rem; height: 1rem; translate: 0 0.1875rem; color: var(--lm-color-fg-muted); transition: translate var(--lm-duration-2) var(--ease-out); }
.ir-links a:hover > svg { translate: 3px 0.1875rem; color: var(--lm-color-fg-accent); }

/* A report page printed on paper, on the indigo field. */
.pg-paper-field { display: grid; justify-items: center; padding: clamp(var(--lm-space-5), 4vw, 3.5rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }
.pg-paper-field iframe { display: block; width: 100%; max-width: 51rem; height: 52rem; padding: 1.25rem; border: 0; border-radius: 0.1875rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 22px 44px -22px rgb(22 25 31 / 45%); }

/* ----- The sample study walkthrough ----- */

.wt-stages { margin: 0; padding: 0; list-style: none; }
.wt-stage { padding-block: var(--lm-space-section); }
.wt-stage:first-child { padding-top: 0; }
.wt-stage:nth-child(even) { background: var(--lm-color-bg-sunken); }
.wt-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--lm-space-3) 5rem; align-items: end; margin-bottom: 2.5rem; }
.wt-copy .hp-eyebrow { grid-column: 1; margin-bottom: 0; }
.home-redesign .wt-copy h2 { grid-column: 1; max-width: 18ch; font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.1; }
.wt-text { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 31rem; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-base); line-height: 1.7; }
.wt-text p + p { margin-top: 0.875rem; }
.wt-text strong { color: var(--lm-color-fg-default); }
/* The captures are the application at 1176 × 900, so the frame keeps that shape. */
.wt-field .hp-window :is(img, picture) { aspect-ratio: 1800 / 1378; }

.wt-report { padding-block: var(--lm-space-section); }
.wt-report-copy { display: grid; justify-items: start; gap: 1.25rem; max-width: 31rem; }
.wt-report-copy p { color: var(--lm-color-fg-muted); }
.wt-report-copy a { font-size: var(--lm-font-size-md); text-decoration: none; }
.wt-report-copy a svg { width: 1rem; height: 1rem; }

/* ----- The live example: one sheet on the indigo field, the run-order plot large on the left with the readings under
   it and the calculated results beside it, then page 1 of the report at its own size. example.js rebuilds
   .example-verdict and .example-metrics with these classes, and arms readings 19 and 20 on the plot. ----- */

.example-page .wrap { width: min(90rem, 100% - 5rem); }
.ex-hero { padding-block: clamp(var(--lm-space-7), 4vw, 4.5rem) clamp(var(--lm-space-6), 3vw, var(--lm-space-7)); }
.home-redesign .ex-hero h1 { max-width: none; }
.ex-hero .hp-lede { margin-top: var(--lm-space-4); }
.ex-field { padding: clamp(var(--lm-space-3), 2.2vw, 2.5rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }
.example-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); overflow: hidden; border-radius: var(--lm-radius-frame); background: var(--lm-color-bg-surface); box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far); }
.example-inputs, .example-output { padding: clamp(var(--lm-space-5), 2.5vw, 2.5rem); }
.example-inputs { min-width: 0; border-right: 1px solid var(--lm-color-border-default); }
.example-output { display: flex; flex-direction: column; background: light-dark(#fcfcfd, #222429); }
.ex-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lm-space-2) var(--lm-space-6); padding-bottom: var(--lm-space-4); border-bottom: 1px solid var(--lm-color-border-rule); }
.home-redesign .example-workbench h2 { font-size: var(--lm-font-size-3xl); line-height: 1.15; }
.example-context { color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }

/* The run-order plot: the report's Figure 1, drawn twice by the server (wide for a desktop, narrow for a phone) in the
   figure's own units, so its 8-unit text reads at about 13 px across 880 px and 11 px across a phone. */
.ex-plot { margin: var(--lm-space-5) 0 0; }
.ex-plot-narrow { display: none; }
.ex-plot svg.fig { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-x pan-y; }
.ex-plot .fig text { font: 400 8px / 1 var(--lm-font-family-ui); font-variant-numeric: tabular-nums; fill: var(--lm-color-fg-muted); stroke: none; }
.ex-plot .fig :is(.f-title, .f-label, .f-legend) { fill: var(--lm-color-fg-default); }
.ex-plot .fig .f-title { font-weight: 500; }
.ex-plot .fig .f-legend { font-size: 7.5px; }
.ex-plot .fig .f-grid { stroke: var(--lm-color-border-default); stroke-width: 0.5; }
.ex-plot .fig .f-axis { stroke: var(--lm-color-border-strong); stroke-width: 0.75; }
.ex-plot .fig .f-mean { stroke: var(--lm-color-fg-default); stroke-width: 1; stroke-dasharray: 4 2.5; }
.ex-plot .fig .f-limitdash { fill: none; stroke: var(--lm-color-fg-muted); stroke-width: 0.9; stroke-dasharray: 6 2 1.2 2; }
.ex-plot .fig .f-observed { stroke: var(--lm-color-fg-default); stroke-width: 0.7; stroke-dasharray: 0.9 1.9; stroke-linecap: round; }
.ex-plot .fig .f-pt { fill: var(--lm-color-fg-default); stroke: var(--lm-color-bg-surface); stroke-width: 0.75; }
/* Readings 19 and 20: accent points with a wide clear rim to catch the pointer, a soft ring on hover and a firm one
   with the keyboard; the faint rings are their other values. */
.ex-plot .fig [role="slider"] { r: 4px; fill: var(--lm-color-bg-accent); stroke: transparent; stroke-width: 10; cursor: grab; touch-action: none; outline: none; transition: transform var(--lm-duration-2) var(--ease-out), stroke var(--lm-duration-1) var(--ease-out); }
.ex-plot .fig [role="slider"]:hover { stroke: color-mix(in srgb, var(--lm-color-bg-accent) 18%, transparent); }
.ex-plot .fig [role="slider"]:focus-visible { stroke: color-mix(in srgb, var(--lm-color-bg-accent) 40%, transparent); stroke-width: 6; }
.ex-plot .fig [role="slider"].is-dragging { cursor: grabbing; transition: none; stroke: color-mix(in srgb, var(--lm-color-bg-accent) 18%, transparent); }
.ex-plot .fig .ex-stop { r: 3.2px; fill: none; stroke: var(--lm-color-bg-accent); stroke-width: 0.9; stroke-dasharray: 1.6 1.4; opacity: 0.7; pointer-events: none; }
.ex-plot .fig path.ex-stop { stroke-dasharray: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ex-plot .fig text.ex-tag { font-weight: 600; fill: var(--lm-color-fg-default); paint-order: stroke; stroke: var(--lm-color-bg-surface); stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
.ex-plot figcaption { margin-top: var(--lm-space-3); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-sm); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ex-plot .fig [role="slider"] { transition: stroke var(--lm-duration-1) var(--ease-out); } }

/* The two readings as plain choices under the plot, for anyone who prefers a list of values. */
.ex-readings { display: flex; flex-wrap: wrap; align-items: end; gap: var(--lm-space-4) var(--lm-space-5); margin-top: var(--lm-space-5); padding-top: var(--lm-space-5); border-top: 1px solid var(--lm-color-border-default); }
.example-inputs fieldset { display: flex; flex-wrap: wrap; gap: var(--lm-space-4) var(--lm-space-5); margin: 0; padding: 0; border: 0; }
.example-inputs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.example-inputs label { display: flex; align-items: center; gap: var(--lm-space-3); color: var(--lm-color-fg-default); font-size: var(--lm-font-size-sm); font-weight: 600; }
/* A plain select with its own chevron, drawn in the theme's muted ink. */
.example-inputs select { min-width: 7.5rem; min-height: 2.75rem; padding: 0 2.75rem 0 var(--lm-space-4); border: 1px solid var(--lm-color-border-strong); border-radius: var(--lm-radius-control); background: linear-gradient(45deg, transparent 50%, var(--lm-color-fg-muted) 50%) no-repeat calc(100% - 1.3rem) 52% / 0.375rem 0.375rem, linear-gradient(135deg, var(--lm-color-fg-muted) 50%, transparent 50%) no-repeat calc(100% - 0.925rem) 52% / 0.375rem 0.375rem, var(--lm-color-bg-surface); color: var(--lm-color-fg-default); font: 500 var(--lm-font-size-base) / 1.2 var(--lm-font-family-ui); font-variant-numeric: tabular-nums; appearance: none; cursor: pointer; transition: border-color var(--lm-duration-2) var(--ease-out); }
.example-inputs select:hover { border-color: var(--lm-color-fg-muted); }
.example-inputs select:focus-visible { outline: var(--lm-focus-width) solid var(--lm-color-focus-ring); outline-offset: 2px; }
.example-inputs fieldset:disabled select { cursor: default; }
.example-page .btn { cursor: pointer; }
.example-page button:disabled { opacity: 0.55; cursor: wait; }
.ex-noscript { margin-top: var(--lm-space-3); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-sm); }

.example-readings { margin-top: var(--lm-space-5); border-top: 1px solid var(--lm-color-border-default); }
.example-readings summary { display: flex; align-items: center; gap: var(--lm-space-3); padding-block: var(--lm-space-4) var(--lm-space-1); color: var(--lm-color-fg-default); font-size: var(--lm-font-size-md); font-weight: 600; cursor: pointer; list-style: none; }
.example-readings summary::-webkit-details-marker { display: none; }
/* A chevron that turns as the list opens. */
.example-readings summary::before { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; margin-inline: 0.125rem var(--lm-space-1); border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: -45deg; transition: rotate var(--lm-duration-2) var(--ease-out); }
.example-readings[open] > summary::before { rotate: 45deg; }
.example-readings summary:hover { color: var(--lm-color-fg-accent); }
.example-readings table { width: min(100%, 22rem); margin-top: var(--lm-space-3); border-collapse: collapse; font-size: var(--lm-font-size-md); font-variant-numeric: tabular-nums; }
.example-readings th, .example-readings td { padding: 0.4375rem 0; border-bottom: 1px solid var(--lm-color-border-default); text-align: left; }
.example-readings thead th { color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-xs); font-weight: 600; }
.example-readings tbody th { color: var(--lm-color-fg-muted); font-weight: 400; }
.example-readings td { color: var(--lm-color-fg-default); text-align: right; }
.example-readings thead th:last-child { text-align: right; }

/* The results: the verdict, then each figure on its own ruled line, value and unit at the right. */
.example-output h2 { padding-bottom: var(--lm-space-4); }
.example-verdict { display: flex; align-items: center; gap: 0.625rem; margin-top: var(--lm-space-5); padding: 0.875rem var(--lm-space-4); border-radius: var(--lm-radius-control); font-weight: 600; }
.example-verdict::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.example-verdict.met { background: var(--lm-color-status-ok-bg); color: var(--lm-color-status-ok-fg); }
.example-verdict.not-met { background: var(--ui-fail-solid); color: var(--ui-on-fail-solid); }
.example-metrics { margin-top: var(--lm-space-5); border-top: 1px solid var(--lm-color-border-rule); font-variant-numeric: tabular-nums; }
.example-metrics > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lm-space-1) var(--lm-space-4); padding-block: var(--lm-space-4); border-bottom: 1px solid var(--lm-color-border-default); }
.example-metrics dt { color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-sm); }
.example-metrics dd { margin: 0 0 0 auto; color: var(--lm-color-fg-default); font-size: var(--lm-font-size-xl); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; text-align: right; }
.example-metrics dd span { color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-sm); font-weight: 400; letter-spacing: 0; }
#example-feedback:not(:empty) { margin-top: var(--lm-space-4); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }
.example-output .actions { padding-top: var(--lm-space-6); }

/* Page 1 of the report at its own size, beside what it holds and how to print it. */
.ex-report { padding-block: var(--lm-space-section); }
.ex-report-grid { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--lm-space-8); align-items: start; }
.ex-report-copy { position: sticky; top: 7rem; }
.ex-report-copy > p:not(:empty) { margin-top: var(--lm-space-4); color: var(--lm-color-fg-muted); }
.example-report-actions { display: flex; flex-wrap: wrap; gap: var(--lm-space-4) var(--lm-space-5); align-items: center; margin-top: var(--lm-space-6); font-size: var(--lm-font-size-md); }
.example-report-actions a { text-decoration: none; }
.example-report-actions a svg { width: 1rem; height: 1rem; }
.ex-report-copy #example-report-feedback:not(:empty) { margin-top: var(--lm-space-4); }
.ex-report-copy .example-walkthrough { margin-top: var(--lm-space-7); padding-top: var(--lm-space-5); border-top: 1px solid var(--lm-color-border-default); font-size: var(--lm-font-size-md); }
.ex-paper { padding: clamp(var(--lm-space-4), 2.2vw, var(--lm-space-6)); }
.ex-paper iframe { max-width: 54rem; height: 69rem; padding: 0; }
.ex-paper iframe[hidden] { display: block; visibility: hidden; }

/* ----- Motion: the opening settles in, and each screen rises into its field as it scrolls into view. With reduced
   motion everything rests in place (04-hero.css). ----- */

@media (prefers-reduced-motion: no-preference) {
  .pg-guide-grid li:hover .pg-guide-sheet { translate: 0 -0.1875rem; }
  .pg-hero .wrap > * { animation: pg-rise var(--lm-duration-5) var(--ease-out) both; }
  .pg-hero .wrap > :nth-child(2) { animation-delay: 70ms; }
  .pg-hero .wrap > :nth-child(3) { animation-delay: 140ms; }
  .pg-hero .wrap > :nth-child(n + 4) { animation-delay: 210ms; }

  @supports (animation-timeline: view()) {
    .wt-field .hp-window, .pg-sheet-field .hp-sheet { animation: pg-lift linear both; animation-timing-function: var(--ease-out); animation-timeline: view(); animation-range: cover 25vh cover 55vh; }
  }
  /* The rings draw round their parts one after another when the page opens, and again for the row you point at. */
  .guide-rings rect { animation: guide-ring-draw calc(var(--lm-duration-5) * 2) var(--ease-out) both; animation-delay: calc(var(--lm-duration-3) * attr(data-n type(<number>), 1)); }
  .pg-records:has(tr[data-rings~="1"]:hover) rect[data-n="1"],
  .pg-records:has(tr[data-rings~="2"]:hover) rect[data-n="2"],
  .pg-records:has(tr[data-rings~="3"]:hover) rect[data-n="3"],
  .pg-records:has(tr[data-rings~="4"]:hover) rect[data-n="4"] { animation: guide-ring-redraw var(--lm-duration-5) var(--ease-out) both; }
}
@keyframes pg-rise { from { opacity: 0; translate: 0 0.875rem; } }
@keyframes guide-ring-draw { from { stroke-dashoffset: 1; } }
@keyframes guide-ring-redraw { from { stroke-dashoffset: 1; } }
@keyframes pg-lift { from { translate: 0 3.5rem; } }

/* ----- Narrower screens ----- */

@media (max-width: 62rem) {
  .pg-split { grid-template-columns: minmax(0, 1fr); }
  .pg-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-guide-grid li:nth-child(n) { padding: var(--lm-space-6) 0; border-left: 0; }
  .pg-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--lm-space-4); }
  .guide-sheet { grid-column: 1; grid-row: auto; position: static; width: min(100%, 26rem); margin-top: var(--lm-space-4); }
  .home-redesign .pg-row > h2 { position: static; max-width: none; }
  .pv-facts { grid-template-columns: minmax(0, 1fr); }
  .pv-facts > div:nth-child(n) { padding: var(--lm-space-5) 0; border-left: 0; }
  .home-redesign .ir-links a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--lm-space-1) var(--lm-space-4); }
  .ir-link-meta { grid-column: 1; }
  .ir-links a > svg { grid-column: 2; grid-row: 1; }
  .wt-copy { grid-template-columns: minmax(0, 1fr); }
  .wt-copy :is(.hp-eyebrow, h2), .wt-text { grid-column: 1; grid-row: auto; }
  .example-workbench { grid-template-columns: minmax(0, 1fr); }
  .example-inputs { border-right: 0; border-bottom: 1px solid var(--lm-color-border-default); }
  .ex-report-grid { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-6); }
  .ex-report-copy { position: static; }
}
@media (max-width: 44rem) {
  .pg-guide-grid li { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.25rem; }
  .pg-guide-arrow { display: none; }
  .pg-hero { padding-top: 2.75rem; }
  /* The facts as stacked entries: the item, its line, then where it is explained. */
  .ir-facts thead { display: none; }
  .ir-facts :is(table, tbody, tr, th, td) { display: block; width: auto; }
  .ir-facts tbody tr { padding-block: var(--lm-space-4); border-bottom: 1px solid var(--lm-color-border-default); }
  .ir-facts tbody tr:first-child { border-top: 1px solid var(--lm-color-border-rule); }
  .ir-facts :is(th, td) { padding: 0; border: 0; }
  .ir-facts tbody th { width: auto; }
  .ir-facts td { margin-top: var(--lm-space-1); }
  .ir-facts td:last-child { width: auto; margin-top: var(--lm-space-2); }
  .ir-intro { margin-left: 0; }
  .ir-file { padding: var(--lm-space-4); column-gap: var(--lm-space-4); }
  .pg-hero .hp-lede { font-size: var(--lm-font-size-base); }
  .pg-hero .actions .btn { width: 100%; }
  .wt-copy { margin-bottom: 1.75rem; }
  .pg-paper-field { padding: var(--lm-space-3); }
  /* On a phone the report opens in its own tab: a framed page there would hold the page's scrolling and crop its tables. */
  .wt-report .pg-paper-field { display: none; }
  .example-page .wrap { width: calc(100% - 2rem); }
  .ex-field { padding: var(--lm-space-2); }
  .example-inputs, .example-output { padding: var(--lm-space-5) var(--lm-space-4); }
  .home-redesign .example-workbench h2 { font-size: var(--lm-font-size-2xl); }
  /* The narrow drawing runs the sheet's full width, so its text reads at about 11 px. */
  .ex-plot { margin-inline: calc(-1 * var(--lm-space-4)); }
  .ex-plot-wide { display: none; }
  .ex-plot-narrow { display: block; }
  .ex-plot figcaption { margin-inline: var(--lm-space-4); }
  .example-inputs fieldset { gap: var(--lm-space-3) var(--lm-space-4); }
  .example-inputs select { min-width: 6.5rem; }
  /* On a phone the report opens in its own tab: a framed page there would hold the page's scrolling and crop its tables. */
  .ex-paper, .example-report-actions #example-print { display: none; }
}

/* Information for institutional review prints on one or two pages: no site chrome, the rows as one compact column and
   the evaluation band as plain text. */
@media print {
  body:has(.review-page) .site-header, body:has(.review-page) .site-footer, body:has(.review-page) .skip-link, body:has(.review-page) .site-menu-backdrop { display: none; }
  .review-page { font-size: 10.5pt; line-height: 1.4; }
  .review-page .wrap { width: auto; }
  .review-page :is(.pg-hero, .pg-doc, .hp-evidence) { padding: 0; background: none; color: inherit; }
  .review-page .pg-hero .wrap > * { animation: none; }
  .review-page .hp-eyebrow { display: none; }
  .home-redesign.review-page .pg-hero h1 { max-width: none; margin-bottom: var(--lm-space-1); font-size: 20pt; letter-spacing: -0.02em; }
  .review-page .pg-hero .hp-lede { max-width: none; margin: 0 0 var(--lm-space-2); font-size: inherit; }
  .review-page .pg-rows { border: 0; }
  .review-page .ir-control { margin-top: var(--lm-space-2); padding-block: 0.4rem; }
  .home-redesign.review-page .ir-section { margin-top: var(--lm-space-4); font-size: 13pt; break-after: avoid; }
  .review-page .ir-facts table { font-size: 9pt; line-height: 1.35; }
  .review-page .ir-facts :is(th, td) { padding: var(--lm-space-1) var(--lm-space-3) var(--lm-space-1) 0; }
  .review-page .ir-facts tr { break-inside: avoid; }
  .review-page .ir-see svg, .review-page .ir-file svg, .review-page .ir-links svg { display: none; }
  .review-page :is(.ir-file, .ir-links a) { padding-block: 0.3rem; border: 0; }
  .review-page .pg-row { display: block; padding: 0; margin-top: 0.85rem; border: 0; break-inside: avoid; }
  .home-redesign.review-page :is(.pg-row > h2, .hp-evidence-intro h2) { position: static; max-width: none; margin-bottom: 0.2rem; color: inherit; font-size: 12.5pt; letter-spacing: -0.01em; }
  .review-page .pg-body { max-width: none; line-height: inherit; }
  .review-page .pg-body > * + * { margin-top: 0.4rem; }
  .review-page .hp-evidence { margin-top: 0.85rem; break-inside: avoid; }
  .review-page .hp-evidence-inner { display: block; }
  .review-page .hp-evidence :is(p, dt, dd) { font-size: inherit; line-height: inherit; }
  .review-page .hp-evidence-intro p { max-width: none; margin-top: 0; }
  .review-page .hp-evidence-list > div { padding: 0.3rem 0 0; border: 0; }
  .review-page .hp-evidence-list dt { font-size: inherit; font-weight: 600; }
  .review-page .hp-evidence-list dt svg { display: none; }
  .review-page .hp-evidence-list dd { max-width: none; margin-top: 0; font-size: inherit; }
  .review-page a { color: inherit; text-decoration: none; }
}
/* ----- Features: every study and feature as ruled tables beside a sticky rail -----
   The page reads like a methods binder's specification sheet. The headline sits beside its lede, then one strong rule
   opens the index: on the left a rail that stays in view with the filter and every group with its count, on the right
   the studies, each one's statistics and plots as short ruled lines under column labels that stay below the header
   while their family scrolls, then the features in two ruled columns. features.js marks the words that match in ink-indigo and slides the rail's marker to
   the group in view. Printed, the rail and site chrome drop away and every row prints. */

.ft { --ft-top: 5.0625rem; }   /* the site header's height */
.ft-wide { width: min(86rem, 100% - 2.5rem); }

.ft-hero { padding: clamp(3.5rem, 6vw, var(--lm-space-9)) 0 clamp(var(--lm-space-7), 4.5vw, 4.5rem); }
.ft-hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--lm-space-6), 6vw, 7rem); align-items: end; }
.home-redesign .ft-hero h1 { max-width: 14ch; }
.ft-hero .hp-lede { max-width: 36rem; margin: 0; padding-bottom: 0.5rem; }

.ft-index { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(var(--lm-space-6), 5vw, 5.5rem); align-items: start; padding-block: var(--lm-space-7) var(--lm-space-section); border-top: 1px solid var(--lm-color-border-rule); }

/* ----- The rail: the filter, then the groups with their counts ----- */

/* The rail's padding keeps the filter's focus ring inside its scrolling box. */
.ft-rail { position: sticky; top: calc(var(--ft-top) + var(--lm-space-5)); max-height: calc(100vh - var(--ft-top) - var(--lm-space-7)); margin: -0.375rem; padding: 0.375rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lm-color-border-strong) transparent; }
.ft-find { margin-bottom: var(--lm-space-6); }
.ft-find label { display: block; margin-bottom: var(--lm-space-2); color: var(--lm-color-fg-default); font: 600 var(--lm-font-size-sm) / 1.4 var(--lm-font-family-ui); }
.ft-field { position: relative; display: flex; align-items: center; }
.ft-field svg { position: absolute; left: 0.75rem; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--lm-color-fg-muted); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
.ft-field input { width: 100%; min-height: 2.75rem; padding: 0 2.5rem; border: 1px solid var(--lm-color-border-strong); border-radius: var(--lm-radius-control); background: var(--lm-color-bg-surface); color: var(--lm-color-fg-default); font: 400 var(--lm-font-size-md) / 1.4 var(--lm-font-family-ui); caret-color: var(--lm-color-fg-accent); transition: border-color var(--lm-duration-2) var(--ease-out); }
.ft-field input::placeholder { color: var(--lm-color-fg-muted); opacity: 1; }
.ft-field input:hover { border-color: var(--lm-color-fg-muted); }
.ft-field input:focus-visible { outline: var(--lm-focus-width) solid var(--lm-color-focus-ring); outline-offset: 2px; border-color: var(--lm-color-border-accent); }
/* The browser's clear button, drawn in the field's own stroke. */
.ft-field input::-webkit-search-cancel-button { -webkit-appearance: none; width: 1rem; height: 1rem; margin-right: -1.75rem; background: var(--lm-color-fg-muted); cursor: pointer; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ft-field input::-webkit-search-cancel-button:hover { background: var(--lm-color-fg-default); }
.ft-field kbd { position: absolute; right: 0.625rem; min-width: 1.375rem; padding: 0.0625rem 0.375rem; border: 1px solid var(--lm-color-border-default); border-radius: var(--lm-radius-control); background: var(--lm-color-bg-sunken); color: var(--lm-color-fg-muted); font: 500 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); text-align: center; pointer-events: none; }
.ft-field:focus-within kbd, .ft-field input:not(:placeholder-shown) ~ kbd { display: none; }
.ft-count { margin-top: var(--lm-space-2); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-xs); font-variant-numeric: tabular-nums; }

.ft-nav { position: relative; }
.ft-nav-title { margin: var(--lm-space-5) 0 var(--lm-space-2); font: 600 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); }
.ft-nav-title:first-child { margin-top: 0; }
.ft-nav-title a { color: var(--lm-color-fg-default); text-decoration: none; }
.ft-nav-title a:hover { color: var(--lm-color-fg-accent); }
.ft-nav ul { margin: 0; padding: 0; border-left: 1px solid var(--lm-color-border-default); list-style: none; }
.ft-nav li a { display: flex; justify-content: space-between; gap: var(--lm-space-3); padding: 0.3125rem 0 0.3125rem var(--lm-space-4); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-sm); line-height: 1.4; text-decoration: none; transition: color var(--lm-duration-2) var(--ease-out); }
.ft-nav li a:hover, .ft-nav li a[aria-current="true"] { color: var(--lm-color-fg-default); }
.ft-nav li a[aria-current="true"] > span:first-child { font-weight: 600; }
.ft-tally { color: var(--lm-color-fg-muted); font-variant-numeric: tabular-nums; }
.ft-nav li a.is-empty { color: var(--lm-color-fg-disabled); pointer-events: none; }
.ft-nav li a.is-empty .ft-tally { color: inherit; }
/* The marker rides the rule beside the group in view. */
.ft-mark { position: absolute; top: 0; left: -0.5px; width: 2px; height: var(--mark-h, 0); border-radius: 1px; background: var(--lm-color-bg-accent); opacity: 0; translate: 0 var(--mark-y, 0); transition: translate var(--lm-duration-4) var(--ease-out), opacity var(--lm-duration-2) var(--ease-out); pointer-events: none; }
.ft-mark.is-shown { opacity: 1; }

/* ----- The tables ----- */

.ft-part + .ft-part { margin-top: var(--lm-space-9); }
.home-redesign .ft-part > h2 { font-size: clamp(var(--lm-font-size-4xl), 3vw, 2.75rem); line-height: 1.1; scroll-margin-top: calc(var(--ft-top) + var(--lm-space-5)); }
/* The first group shown sits close under its part's heading, whichever groups the filter has hidden. */
.ft-group { margin-top: var(--lm-space-6); scroll-margin-top: calc(var(--ft-top) + var(--lm-space-4)); }
.ft-group:not([hidden]) ~ .ft-group { margin-top: var(--lm-space-8); }
.home-redesign .ft-group h3 { padding-bottom: var(--lm-space-3); font: 500 var(--lm-font-size-2xl) / 1.25 var(--lm-font-family-display); letter-spacing: var(--lm-tracking-heading); }

.ft-table { width: 100%; border-collapse: collapse; }
.ft-table :is(th, td) { padding: var(--lm-space-4) var(--lm-space-6) var(--lm-space-4) 0; border-bottom: 1px solid var(--lm-color-border-default); text-align: left; vertical-align: top; }
.ft-table :is(th, td):last-child { padding-right: 0; }
.ft-table tbody th { width: 19%; line-height: 1.45; }
:is(.ft-table th[scope="row"], .ft-grid dt) a { color: var(--lm-color-fg-default); font: 600 var(--lm-font-size-md) / 1.45 var(--lm-font-family-ui); text-decoration: none; }
:is(.ft-table th[scope="row"], .ft-grid dt) a:hover { color: var(--lm-color-fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Column labels under a strong rule, held below the site header while their family scrolls. */
.ft-studies thead th { position: sticky; top: var(--ft-top); z-index: 1; padding-block: var(--lm-space-2); border-top: 1px solid var(--lm-color-border-strong); border-bottom-color: var(--lm-color-border-rule); background: var(--lm-color-bg-canvas); color: var(--lm-color-fg-muted); font: 500 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); }
.ft-studies td:last-child { width: 24%; }

/* The features: two ruled columns of name and detail under one strong rule. */
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lm-space-7); margin: 0; border-top: 1px solid var(--lm-color-border-strong); }
.ft-grid > div { padding-block: var(--lm-space-4) 1.125rem; border-bottom: 1px solid var(--lm-color-border-default); }
.ft-grid dt { line-height: 1.45; }
.ft-grid dd { max-width: 36rem; margin: 0.25rem 0 0; color: var(--lm-color-fg-body); font-size: var(--lm-font-size-md); line-height: 1.6; }

/* Each statistic and plot on its own short line, after a dash. */
.ft-terms { margin: 0; padding: 0; color: var(--lm-color-fg-body); font-size: var(--lm-font-size-sm); line-height: 1.5; list-style: none; }
.ft-terms li { position: relative; padding: 0.125rem 0 0.125rem 1rem; break-inside: avoid; }
.ft-terms li::before { content: ""; position: absolute; top: calc(0.125rem + 0.75em); left: 0; width: 0.375rem; border-top: 1px solid var(--lm-color-fg-muted); }
.ft-stats { columns: 2; column-gap: var(--lm-space-6); }

.ft mark { padding: 0 0.0625em; border-radius: 2px; background: var(--lm-color-bg-accent-wash); color: var(--lm-color-fg-accent); box-shadow: inset 0 -1px var(--lm-color-border-accent); }
.ft-empty { padding-block: var(--lm-space-6); border-top: 1px solid var(--lm-color-border-rule); color: var(--lm-color-fg-muted); }
.ft-empty a { color: var(--lm-color-fg-accent); }

@media (max-width: 70rem) {
  .ft-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-5); }
  .ft-index { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-7); }
  .ft-rail { position: static; max-height: none; overflow: visible; }
  .ft-nav { columns: 2; column-gap: var(--lm-space-6); }
  .ft-nav ul { break-inside: avoid; }
  .ft-mark { display: none; }
}
@media (max-width: 44rem) {
  .ft-nav { columns: 1; }
  .ft-studies thead { display: none; }
  .ft-table tbody tr { display: block; padding-block: var(--lm-space-4); border-bottom: 1px solid var(--lm-color-border-default); }
  .ft-table tbody :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
  .ft-table tbody td { margin-top: var(--lm-space-2); }
  .ft-studies td:last-child:not(:empty)::before { content: "Plots"; display: block; margin-bottom: var(--lm-space-1); color: var(--lm-color-fg-muted); font: 500 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); }
  .ft-stats { columns: 1; }
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ft-mark, .ft-field input, .ft-nav li a { transition: none; }
}
@media print {
  .ft-rail, .ft .hp-closing { display: none !important; }
  .ft-wide { width: 100%; }
  .ft-hero { padding: 0 0 var(--lm-space-5); }
  .ft-index { display: block; padding: var(--lm-space-5) 0 0; }
  .ft [data-part][hidden], .ft [data-group][hidden] { display: block !important; }
  .ft tr[data-row][hidden] { display: table-row !important; }
  .ft div[data-row][hidden] { display: block !important; }
  .ft-grid > div { break-inside: avoid; }
  .ft-studies thead th { position: static; }
  .ft-table tr { break-inside: avoid; }
  .home-redesign .ft-group h3 { break-after: avoid; }
  .ft mark { padding: 0; background: none; color: inherit; box-shadow: none; }
}