/* The Movement Clinic — loaded per-page via $extra_head, not globally. */

.tk-clinic-hero {
  background: var(--tk-ink, #14110f);
  color: #f5f2ee;
  padding-block: var(--tk-space-12, 5rem) var(--tk-space-8, 3rem);
}
.tk-clinic-hero__title {
  font-family: var(--tk-font-display, serif);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.1;
  margin-block: var(--tk-space-3, 1rem);
  max-width: 20ch;
}
.tk-clinic-hero__sub {
  max-width: 60ch;
  color: rgba(245, 242, 238, .78);
  font-size: 1.05rem;
}

/* --- Filter --- */
.tk-clinic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block: var(--tk-space-4, 1.5rem);
}
.tk-clinic-filter__btn {
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .95rem;
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  background: transparent;
  color: var(--tk-text, #1a1a1a);
  font: inherit;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  min-height: 44px; /* touch target */
}
.tk-clinic-filter__btn small { color: var(--tk-text-muted, #6b6b6b); font-size: .75rem; }
.tk-clinic-filter__btn.is-active {
  background: var(--tk-burgundy, #6b1d2a);
  border-color: var(--tk-burgundy, #6b1d2a);
  color: #fff;
}
.tk-clinic-filter__btn.is-active small { color: rgba(255, 255, 255, .8); }

/* --- Cards --- */
.tk-clinic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tk-space-4, 1.5rem);
}
@media (min-width: 700px)  { .tk-clinic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tk-clinic-grid { grid-template-columns: repeat(3, 1fr); } }

.tk-clinic-card {
  display: flex;
  gap: var(--tk-space-3, 1rem);
  padding: var(--tk-space-4, 1.5rem);
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  background: var(--tk-page, #fff);
}
.tk-clinic-card[hidden] { display: none; }
.tk-clinic-card__num {
  font-family: var(--tk-font-display, serif);
  font-size: 1.5rem;
  color: var(--tk-text-muted, #6b6b6b);
  line-height: 1;
  flex: 0 0 auto;
}
.tk-clinic-card__body { min-width: 0; }
.tk-clinic-card__title { font-size: 1.1rem; line-height: 1.3; margin: .35rem 0 .5rem; }
.tk-clinic-card__title a { color: inherit; text-decoration: none; }
.tk-clinic-card__title a:hover { text-decoration: underline; }
.tk-clinic-card__desc { color: var(--tk-text-muted, #6b6b6b); font-size: .92rem; margin-bottom: .6rem; }
.tk-clinic-card__more { font-size: .88rem; font-weight: 600; text-decoration: none; }

.tk-clinic-card__sev {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  vertical-align: middle;
}
.tk-clinic-card__sev--red   { background: #b3261e; }
.tk-clinic-card__sev--amber { background: #b26b00; }
.tk-clinic-card__sev--green { background: #2e6b3f; }

.tk-clinic-card--featured {
  border-width: 2px;
  border-color: var(--tk-burgundy, #6b1d2a);
}
.tk-clinic-card--featured .tk-clinic-card__title { font-size: 1.45rem; }

/* --- Spec strip --- */
.tk-clinic-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3, 1rem);
  padding: var(--tk-space-4, 1.5rem);
  margin-block: var(--tk-space-5, 2rem);
  border-left: 3px solid var(--tk-burgundy, #6b1d2a);
  background: rgba(0, 0, 0, .03);
  border-radius: 0 var(--tk-radius, 8px) var(--tk-radius, 8px) 0;
}
.tk-clinic-spec__head {
  flex: 1 0 100%;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tk-text-muted, #6b6b6b);
  margin: 0;
}
.tk-clinic-spec__item { display: flex; flex-direction: column; gap: .15rem; min-width: 12rem; }
.tk-clinic-spec__name { font-weight: 700; font-size: 1.05rem; }
.tk-clinic-spec__base,
.tk-clinic-spec__fact,
.tk-clinic-spec__cert { font-size: .86rem; color: var(--tk-text-muted, #6b6b6b); }
.tk-clinic-spec__cert { font-weight: 600; color: var(--tk-text, #1a1a1a); }

/* --- Red lines --- */
.tk-clinic-redlines {
  background: #14110f;
  color: #f5f2ee;
  padding-block: var(--tk-space-10, 4rem);
}
.tk-clinic-redlines .tk-section-head__title,
.tk-clinic-redlines .tk-eyebrow { color: #f5f2ee; }
.tk-clinic-redlines__intro { max-width: 60ch; color: rgba(245, 242, 238, .78); }
/* .tk-btn--ghost draws its border and label colour from --tk-text, which this page's body
   class (tk-light, so the article prose stays dark-on-cream) resolves to near-black — the
   same "invisible ghost button" failure mode components.css documents for the ButtonFace
   default, just from the opposite direction. Every page that nests .tk-clinic-redlines
   inside a tk-light body (diagnose.php's red-line panel; the hub itself is tk-dark and never
   hits this) needs its own override so a ghost button inside this dark strip stays legible. */
.tk-clinic-redlines .tk-btn--ghost { color: #f5f2ee; border-color: rgba(245, 242, 238, .4); }
.tk-clinic-redlines .tk-btn--ghost:hover { border-color: var(--tk-lume, #e8dcc0); color: var(--tk-lume, #e8dcc0); }
.tk-clinic-redlines__scroll { overflow-x: auto; margin-block: var(--tk-space-4, 1.5rem); }
.tk-clinic-redlines__table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tk-clinic-redlines__table th,
.tk-clinic-redlines__table td {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(245, 242, 238, .16);
  font-size: .93rem;
  vertical-align: top;
}
.tk-clinic-redlines__table thead th {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245, 242, 238, .6);
}
.tk-clinic-redlines__table tbody th { font-weight: 600; width: 42%; }

/* --- Article --- */
.tk-clinic-article { max-width: 46rem; margin-inline: auto; }
.tk-clinic-cta {
  margin-block: var(--tk-space-8, 3rem);
  padding: var(--tk-space-5, 2rem);
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  text-align: center;
}
.tk-clinic-cta__title { font-size: 1.2rem; margin-bottom: .4rem; }

.tk-clinic-disclaimer {
  font-size: .82rem;
  color: var(--tk-text-muted, #6b6b6b);
  max-width: 60ch;
  margin-block: var(--tk-space-6, 2.5rem) 0;
}
.tk-clinic-empty { color: var(--tk-text-muted, #6b6b6b); padding-block: var(--tk-space-6, 2.5rem); }

/* Wide content inside articles must scroll in its own box, never the page.
   display: block + overflow-x: auto on the <table> itself (rather than a
   wrapper div, which the markdown renderer doesn't emit) turns the table
   into its own scroll container. The min-width that stops columns crushing
   deliberately lives on th/td, NOT on this table rule: overflow-x only
   clips/scrolls a box's DESCENDANTS, it has no effect on how the box's own
   size relates to ITS parent. A min-width set here, on the same element as
   overflow-x, forces this box itself wider than .tk-prose with nothing left
   to clip that overflow — it escapes to the page and defeats the whole
   point (verified: it reproduced exactly the page-level horizontal scroll
   this rule exists to prevent). Putting the min-width on the cells instead
   widens the table's *content*, which this box's own overflow-x correctly
   contains. */
.tk-clinic-article .tk-prose table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin-block: 1.5em;
  font-size: .92rem;
}
.tk-clinic-article .tk-prose th,
.tk-clinic-article .tk-prose td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--tk-border, #ddd);
  vertical-align: top;
  min-width: 6.5rem;
}
.tk-clinic-article .tk-prose thead th {
  font-weight: 700;
  border-bottom: 2px solid var(--tk-text, #1a1a1a);
}
.tk-clinic-article .tk-prose tbody tr:last-child td { border-bottom: none; }

/* --- Calibre lookup --- */
.tk-clinic-lookup-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--tk-space-6, 2rem);
  align-items: start;
}
@media (max-width: 900px) { .tk-clinic-lookup-layout { grid-template-columns: 1fr; } }

.tk-clinic-lookup__hint {
  font-size: .8rem;
  color: var(--tk-text-muted, #6b6b6b);
  margin: .5rem 0 0;
}

/* "I don't know my reference" — a native <details>, so it opens on Enter/Space with no JS
   and is reachable purely by keyboard, per the section's accessibility requirement. */
.tk-clinic-helper { margin-top: var(--tk-space-4, 1.5rem); font-size: .85rem; }
.tk-clinic-helper summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--tk-text, #1a1a1a);
  padding: .3rem 0;
}
.tk-clinic-helper ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--tk-text-muted, #6b6b6b); }
.tk-clinic-helper li { margin-bottom: .3rem; }

.tk-clinic-era-picker__title { font-size: 1rem; margin: 0 0 .75rem; }
.tk-clinic-era-picker__panel {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: var(--tk-space-4, 1.5rem);
}
.tk-clinic-era-picker__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.tk-clinic-era-picker__row:hover,
.tk-clinic-era-picker__row:focus-visible { border-color: var(--tk-burgundy, #6b1d2a); }
.tk-clinic-era-picker__row span:first-child { font-weight: 700; }
.tk-clinic-era-picker__row span:last-child { color: var(--tk-text-muted, #6b6b6b); font-size: .85rem; text-align: right; }

.tk-clinic-lookup__empty {
  color: var(--tk-text-muted, #6b6b6b);
  text-align: center;
  padding-block: var(--tk-space-6, 2.5rem);
  margin: 0;
}

.tk-clinic-lookup__name { font-family: var(--tk-font-display, serif); font-size: 1.6rem; margin: .25rem 0 0; }
.tk-clinic-lookup__found { font-size: .92rem; margin: var(--tk-space-3, 1rem) 0 0; }

/* The per-calibre spec card reuses tk_clinic_spec_strip()'s markup, so its heading
   ("This applies to") is written for an article's context, not this one — hidden here
   in favour of the eyebrow + name pair rendered above it. */
.tk-clinic-lookup__card .tk-clinic-spec { margin-block: var(--tk-space-3, 1rem); }
.tk-clinic-lookup__card .tk-clinic-spec__head { display: none; }

.tk-clinic-lookup__articles { margin-top: var(--tk-space-5, 2rem); }
.tk-clinic-lookup__articles h3 { font-size: .95rem; margin: 0 0 .6rem; }
.tk-clinic-lookup__articles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tk-clinic-lookup__articles li a {
  display: block;
  padding: .6rem .8rem;
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  text-decoration: none;
  color: inherit;
}
.tk-clinic-lookup__articles li a:hover,
.tk-clinic-lookup__articles li a:focus-visible { border-color: var(--tk-burgundy, #6b1d2a); }
.tk-clinic-lookup__articles li small { display: block; color: var(--tk-text-muted, #6b6b6b); font-size: .8rem; margin-top: .15rem; }

.tk-clinic-choice__list { display: flex; flex-direction: column; gap: .6rem; margin-top: var(--tk-space-4, 1.5rem); }
.tk-clinic-choice__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  width: 100%;
}
.tk-clinic-choice__btn:hover,
.tk-clinic-choice__btn:focus-visible { border-color: var(--tk-burgundy, #6b1d2a); }
.tk-clinic-choice__name { font-weight: 700; }
.tk-clinic-choice__meta { font-size: .82rem; color: var(--tk-text-muted, #6b6b6b); }

.tk-clinic-myths ul { list-style: none; margin: var(--tk-space-3, 1rem) 0 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.tk-clinic-myths li { font-size: .88rem; line-height: 1.55; color: var(--tk-text-muted, #6b6b6b); }
.tk-clinic-myths li strong { display: block; color: var(--tk-text, #1a1a1a); margin-bottom: .2rem; }

/* --- Symptom triage (diagnose.php) --- */

/* Step 4's "Your movement" card reuses tk_clinic_spec_strip()'s markup, exactly like the
   calibre lookup card does, so its own "This applies to" heading is redundant with the "Your
   movement" heading this page renders above it. */
.tk-clinic-diag__movement .tk-clinic-spec__head { display: none; }
.tk-clinic-diag__movement .tk-clinic-spec { margin-block: var(--tk-space-3, 1rem) var(--tk-space-5, 2rem); }

/* Full-width red-line panel. Sits inside .tk-clinic-redlines (dark, edge-to-edge — the same
   treatment the hub's "Stop wearing it now" table gets), so text colour follows that context;
   only the CTA row needs its own spacing here. */
.tk-clinic-diag__redline { max-width: 46rem; }
.tk-clinic-diag__redline .tk-actions { margin-block: var(--tk-space-5, 2rem) var(--tk-space-4, 1.5rem); }

/* One result per matched issue. A rule between issues when more than one renders (e.g. the
   Black Bay GMT date wheel alongside the general date-setting danger zone), so two full
   result blocks don't visually run together. */
.tk-clinic-diag__issue { margin-top: var(--tk-space-8, 3rem); padding-top: var(--tk-space-8, 3rem);
  border-top: 1px solid var(--tk-border, #ddd); }
.tk-clinic-diag__issue:first-of-type { margin-top: var(--tk-space-6, 2rem); padding-top: 0; border-top: 0; }
.tk-clinic-diag__issue h3 { font-family: var(--tk-font-display); font-size: 1.3rem; margin: 0 0 var(--tk-space-4, 1.5rem); }
.tk-clinic-diag__issue h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tk-text-muted, #6b6b6b); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tk-clinic-diag__issue > div { margin-top: var(--tk-space-5, 2rem); }
.tk-clinic-diag__issue > div:first-of-type { margin-top: 0; }
.tk-clinic-diag__issue p { margin: 0; }

/* "Rule this out first" — the confounder — on .tk-callout--warning so it reads as something to
   stop and check, not as more diagnosis prose. Deliberately the first child rendered inside an
   issue block: see renderIssueBlock() in movement-clinic.js. */
.tk-clinic-diag__confounder h4 { color: inherit; text-transform: none; letter-spacing: normal; font-size: 1rem; }

/* Confidence rating, on .tk-badge. Colour tracks how much weight the finding should carry —
   A settles into the page's own success green, C leans on the gold-ink token already used for
   .tk-callout--warning, so "treat as a lead" reads as a caution, not a shrug.
   B sat on --tk-raised, which on this page's tk-light body (see body.tk-light in tokens.css)
   resolves to #ffffff — identical to --tk-surface, the panel this badge sits on — with no
   border to fall back on, so it rendered as bold grey text with no badge shape at all
   (confirmed via getComputedStyle: background rgb(255,255,255) on a panel of the same
   rgb(255,255,255)). --tk-lume is this system's established "quiet, neutral" chip tone
   (.tk-badge--cond, .tk-coll__days use it the same way) — reaching for it here, with an
   explicit border, gives B a fill AND an outline distinct from the white panel, while sitting
   visually quieter than both A's green and C's gold, which is the middle weight "reported and
   plausible" is supposed to read as. */
.tk-clinic-diag__confidence { text-transform: none; letter-spacing: normal; font-weight: 600; }
.tk-clinic-diag__confidence--a { background: color-mix(in srgb, var(--tk-success) 18%, transparent); color: var(--tk-success); }
.tk-clinic-diag__confidence--b { background: color-mix(in srgb, var(--tk-lume) 28%, transparent); color: var(--tk-text, #1a1a1a);
  border-color: color-mix(in srgb, var(--tk-lume) 55%, var(--tk-border)); }
.tk-clinic-diag__confidence--c { background: color-mix(in srgb, var(--tk-gold-ink, #7d5f22) 16%, transparent); color: var(--tk-gold-ink, #7d5f22); }

.tk-clinic-diag__action-badge { font-weight: 700; color: var(--tk-text, #1a1a1a); margin-bottom: .35rem !important; }

/* The self-test's linked protocol — steps, what to log, the interpretation table — set apart
   from the plain self-test paragraph above it with the same left-border-strip language
   .tk-clinic-spec already uses elsewhere in this section. */
.tk-clinic-diag__protocol { margin-top: var(--tk-space-4, 1.5rem); padding: var(--tk-space-4, 1.5rem);
  border-left: 3px solid var(--tk-burgundy, #6b1d2a); background: rgba(0, 0, 0, .03);
  border-radius: 0 var(--tk-radius, 8px) var(--tk-radius, 8px) 0; }
.tk-clinic-diag__protocol p,
.tk-clinic-diag__protocol ol,
.tk-clinic-diag__protocol ul { font-size: .92rem; }
.tk-clinic-diag__protocol ol,
.tk-clinic-diag__protocol ul { margin: 0 0 var(--tk-space-3, 1rem); padding-left: 1.2rem; }
.tk-clinic-diag__protocol li { margin-bottom: .35rem; }
.tk-clinic-diag__protocol-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tk-text-muted, #6b6b6b); margin: var(--tk-space-3, 1rem) 0 .4rem !important; font-weight: 700; }
.tk-clinic-diag__protocol-label:first-child { margin-top: 0 !important; }

/* Same scroll-safe recipe as .tk-clinic-article .tk-prose table: overflow-x lives on the table
   itself so wide content scrolls inside its own box instead of the page. */
.tk-clinic-diag__tablewrap { overflow-x: auto; }
.tk-clinic-diag__table { width: 100%; border-collapse: collapse; min-width: 30rem; font-size: .88rem; }
.tk-clinic-diag__table th,
.tk-clinic-diag__table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--tk-border, #ddd); vertical-align: top; }
.tk-clinic-diag__table thead th { font-weight: 700; border-bottom: 2px solid var(--tk-text, #1a1a1a); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tk-text-muted, #6b6b6b); }
.tk-clinic-diag__table tbody th { font-weight: 600; width: 38%; }
.tk-clinic-diag__table tbody tr:last-child th,
.tk-clinic-diag__table tbody tr:last-child td { border-bottom: none; }

/* --- Hub tool doors (index.php) --- */
/* The section's primary calls to action, sitting on the tk-dark hub body between the hero and
   the article list — deliberately raised off the page background (--tk-raised, one step
   lighter than --tk-page on this theme) rather than borrow the plain-outline treatment
   .tk-clinic-card uses below, so these four read as the main event, not more of the list.
   Four doors as of Phase 3 Task 3 (self-tests joined diagnose/calibre-lookup/rate-test) —
   a flat 3-column breakpoint would strand the fourth door alone on its own row with two
   empty cells beside it, so this steps through 2 columns (a clean 2x2) before jumping to 4
   (a single row) instead of reusing the 3-column step the rest of this file uses at 1040px. */
.tk-clinic-tools__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tk-space-4, 1.5rem);
  margin-block: var(--tk-space-4, 1.5rem) 0;
}
@media (min-width: 700px)  { .tk-clinic-tools__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tk-clinic-tools__grid { grid-template-columns: repeat(4, 1fr); } }

.tk-clinic-tool {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: var(--tk-space-5, 2rem) var(--tk-space-4, 1.5rem);
  border: 1px solid var(--tk-border, rgba(232, 220, 192, .12));
  border-radius: var(--tk-radius-lg, .875rem);
  background: var(--tk-raised, #262324);
  color: inherit;
  text-decoration: none;
}
.tk-clinic-tool:hover,
.tk-clinic-tool:focus-visible { border-color: var(--tk-burgundy, #7b1e2b); }
.tk-clinic-tool__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--tk-radius-pill, 999px);
  background: color-mix(in srgb, var(--tk-burgundy, #7b1e2b) 22%, transparent);
  color: var(--tk-accent-text, var(--tk-burgundy-soft, #c98a94));
}
.tk-clinic-tool__title {
  font-family: var(--tk-font-display, serif);
  font-size: 1.25rem;
  margin: 0;
  color: var(--tk-text, #f5f2ee);
}
.tk-clinic-tool__desc { color: var(--tk-text-muted, #a69e95); font-size: .92rem; margin: 0; }
.tk-clinic-tool__cta {
  margin-top: auto;
  padding-top: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--tk-accent-text, var(--tk-burgundy-soft, #c98a94));
}

/* --- Rate-test logger (rate-test.php) --- */
/* Moved here from a page-scoped <style> block the implementer added deliberately to avoid
   colliding with another agent editing this file at the same time — that reason no longer
   applies. Every rule below is scoped under a .tk-rate-* class the rate-test template alone
   emits, so nothing here can leak onto another page in the section. */
.tk-rate-tests { display: flex; flex-direction: column; gap: var(--tk-space-3, 1rem); margin-bottom: var(--tk-space-4, 1.5rem); }
.tk-rate-test-row { display: flex; align-items: center; justify-content: space-between; gap: var(--tk-space-3, 1rem);
  padding: var(--tk-space-3, 1rem); border: 1px solid var(--tk-border, #ddd); border-radius: var(--tk-radius, 8px);
  background: var(--tk-page, transparent); text-align: left; width: 100%; }
.tk-rate-test-row[data-active="true"] { border-color: var(--tk-burgundy, #6b1d2a); }
.tk-rate-test-row__main { background: transparent; border: 0; padding: 0; text-align: left; flex: 1; cursor: pointer; font: inherit; color: inherit; }
.tk-rate-test-row__name { font-weight: 700; display: block; }
.tk-rate-test-row__meta { font-size: .82rem; color: var(--tk-text-muted, #6b6b6b); display: block; margin-top: .15rem; }
.tk-rate-empty { color: var(--tk-text-muted, #6b6b6b); font-size: .92rem; }

.tk-rate-grid { display: grid; grid-template-columns: 1fr; gap: var(--tk-space-3, 1rem); }
@media (min-width: 640px) { .tk-rate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tk-rate-grid { grid-template-columns: repeat(4, 1fr); } }

.tk-rate-chart-wrap { max-width: 44rem; }
.tk-rate-chart-wrap svg { display: block; width: 100%; height: auto; }
.tk-rate-chart-summary { font-size: .88rem; color: var(--tk-text-muted, #6b6b6b); margin-top: var(--tk-space-2, .5rem); }

.tk-rate-verdict { border: 1px solid var(--tk-border, #ddd); border-left: 4px solid var(--tk-text-muted, #6b6b6b);
  border-radius: 0 var(--tk-radius, 8px) var(--tk-radius, 8px) 0; padding: var(--tk-space-4, 1.5rem);
  margin-top: var(--tk-space-4, 1.5rem); }
.tk-rate-verdict--success { border-left-color: var(--tk-success, #2e7850); }
.tk-rate-verdict--warn    { border-left-color: var(--tk-gold-ink, #7d5f22); }
.tk-rate-verdict--danger  { border-left-color: var(--tk-burgundy, #6b1d2a); }
.tk-rate-verdict--neutral { border-left-color: var(--tk-text-muted, #6b6b6b); }
.tk-rate-verdict h3 { margin: 0 0 .5rem; font-family: var(--tk-font-display, serif); }
.tk-rate-verdict p { margin: .5rem 0 0; }
.tk-rate-verdict .tk-clinic-diag__protocol { margin-top: var(--tk-space-4, 1.5rem); }

.tk-rate-mean { font-size: .95rem; }

/* --- Protocol pages (self-test spokes: templates/movement-clinic/protocol.php) ---
   Scoped under .tk-protocol, which only that template's outer <article> carries, so
   none of this can leak onto an article page even though both share .tk-clinic-article
   for the 46rem centred column. */
.tk-protocol__lede { color: var(--tk-text-muted, #6b6b6b); font-size: .92rem; margin-top: .35rem; }
.tk-protocol ul,
.tk-protocol ol { padding-left: 1.3rem; margin: 0; }
.tk-protocol li + li { margin-top: .4rem; }
/* Specificity fix: plain ".tk-protocol__related-list" is (0,1,0), which loses to
   ".tk-protocol ul" above (0,1,1) regardless of source order, so the related list was
   rendering indented with no top margin and doubled item spacing. Scoping this selector
   under ".tk-protocol ul" too — (0,2,1) — is what actually wins. */
.tk-protocol ul.tk-protocol__related-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .4rem; }

/* Wide interpretation table (pattern -> means) scrolls inside its own box, never the
   page. The wrapper carries overflow-x; the min-width that stops the "pattern" and
   "means" columns crushing on a narrow phone lives on th/td, NOT on this element's own
   table — putting it on the same element as overflow-x would size that box by its own
   content rather than by .tk-clinic-article's measure, and the overflow would escape to
   the page instead of staying inside this scroll box (documented at length above, next
   to .tk-clinic-article .tk-prose table, the same failure mode from the opposite angle). */
.tk-protocol__tablewrap { overflow-x: auto; margin-top: .5rem; }
.tk-protocol__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tk-protocol__table th,
.tk-protocol__table td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--tk-border, #ddd);
  vertical-align: top;
  min-width: 10rem;
}
.tk-protocol__table thead th { font-weight: 700; border-bottom: 2px solid var(--tk-text, #1a1a1a); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tk-text-muted, #6b6b6b); }
.tk-protocol__table tbody th { font-weight: 600; width: 34%; }
.tk-protocol__table tbody tr:last-child th,
.tk-protocol__table tbody tr:last-child td { border-bottom: none; }

/* --- Self-tests index (self-tests.php) ---
   Same 700px/1040px step as .tk-clinic-grid above: 1 column, then 2, then 3. Seven cards
   don't divide evenly into 3 (a 3/3/1 last row), which is the same shape .tk-clinic-grid
   already accepts for the 13-article list below the featured post, so no special-casing
   here either. tk-light-themed like the protocol pages these cards link to (plain
   .tk-page/.tk-border surface), unlike the tk-dark hub-door treatment above. */
.tk-clinic-protocols__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tk-space-4, 1.5rem);
  margin-top: var(--tk-space-4, 1.5rem);
}
@media (min-width: 700px)  { .tk-clinic-protocols__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tk-clinic-protocols__grid { grid-template-columns: repeat(3, 1fr); } }

.tk-clinic-protocol-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--tk-space-4, 1.5rem);
  border: 1px solid var(--tk-border, #ddd);
  border-radius: var(--tk-radius, 8px);
  background: var(--tk-page, #fff);
  color: inherit;
  text-decoration: none;
}
.tk-clinic-protocol-card:hover,
.tk-clinic-protocol-card:focus-visible { border-color: var(--tk-burgundy, #6b1d2a); }
.tk-clinic-protocol-card__eyebrow {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tk-text-muted, #6b6b6b);
}
.tk-clinic-protocol-card__title {
  font-family: var(--tk-font-display, serif);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
  color: var(--tk-text, #1a1a1a);
}
.tk-clinic-protocol-card__desc { color: var(--tk-text-muted, #6b6b6b); font-size: .9rem; margin: 0; }
.tk-clinic-protocol-card__cta {
  margin-top: auto;
  padding-top: .3rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--tk-burgundy, #6b1d2a);
}
.tk-rate-mean strong { font-size: 1.3rem; font-family: var(--tk-font-display, serif); }