/* msk.css v1.3 (2026-10-05) — one grammar for the ortho/MSK suite, each site in its own voice.
 *
 * jointcoach.com · jointclass.com · surgeryprocess.com · surgicaltrack.com · arthritisrisk.com
 * doesyourbackhurt.com · healthgait.com · mskvalue.com · kinematicjoint.com · orthoharness.com
 * (surgeonvalue.com is the reference: navy field, cream paper, Manrope + Inter, teal accent.)
 *
 * SHARED (the grammar, never changed per site): the nav shape (logo · 3–5 links · one call to action, same
 * height), the reading as the hero number with a tag that says measured / estimate / on this device, one
 * primary button per screen, the punch line followed by the honesty line, the footer band, the type scale.
 *
 * PER SITE (the voice, set once in the site's own :root AFTER this file, then the same on every page):
 *   --msk-accent / --msk-accent-deep / --msk-accent-soft   the one colour that is allowed to be loud
 *   --msk-paper                                            the page tint (warm paper, cream, cool white)
 *   --msk-display                                          the headline face (Manrope, Newsreader, Fraunces…)
 *   --msk-navy / --msk-ink                                 only when the site's ink is not navy
 * JointCoach: teal #0D7377, paper #FAFAF8, Manrope, mono kickers. JointClass: deep green, cream, Newsreader.
 * Everything else inherits the defaults below. The drift scanner's per-site design.json declares the voice,
 * and checks that every page of that site wears it.
 *
 * Copy this file into the repo as /msk.css and link it before the page's own <style>. Static sites copy;
 * Next.js sites import it from app/layout. Edit only the canonical file (estate-tests/msk-design/msk.css),
 * bump the version line, and re-copy; design-drift.mjs --baseline compares the copy with it.
 */

:root {
  --msk-navy: #1B2A4A;
  --msk-ink: #111A2C;
  --msk-teal: #0D7377;
  --msk-teal-deep: #0A5C5F;
  --msk-mint: #E2F4F2;
  --msk-paper: #FAFAF8;
  --msk-cream: #F8F6F2;
  --msk-white: #FFFFFF;
  --msk-line: #E3E6E1;
  --msk-muted: #5B6675;
  --msk-amber: #B45309;
  --msk-amber-bg: #FEF3C7;
  --msk-red: #B91C1C;
  --msk-green: #15803D;
  /* the voice: each site overrides these three families once, in its own :root, after this file */
  --msk-accent: var(--msk-teal);
  --msk-accent-deep: var(--msk-teal-deep);
  --msk-accent-soft: var(--msk-mint);
  --msk-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --msk-display: 'Manrope', var(--msk-sans);
  --msk-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --msk-radius: 14px;
  --msk-radius-sm: 8px;
  --msk-max: 1080px;
  --msk-gutter: 16px;
  --msk-nav-h: 60px;
}

/* ---------- nav: the same bar on every page ---------- */
.msk-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--msk-paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--msk-line); font-family: var(--msk-sans); }
.msk-nav-in { max-width: var(--msk-max); margin: 0 auto; padding: 0 var(--msk-gutter); height: var(--msk-nav-h); display: flex; align-items: center; gap: 18px; min-width: 0; }
.msk-logo { font-family: var(--msk-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--msk-navy); text-decoration: none; white-space: nowrap; margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.msk-logo b { color: var(--msk-accent); font-weight: 800; }
.msk-links { display: flex; align-items: center; gap: 4px; }
.msk-links a { color: var(--msk-muted); text-decoration: none; font-size: 0.93rem; font-weight: 500; padding: 8px 10px; border-radius: var(--msk-radius-sm); min-height: 40px; display: inline-flex; align-items: center; }
.msk-links a:hover, .msk-links a[aria-current="page"] { color: var(--msk-navy); background: rgba(27, 42, 74, 0.06); }
.msk-cta { background: var(--msk-accent); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 0.93rem; padding: 0 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; }
.msk-cta:hover { background: var(--msk-accent-deep); }
.msk-tool { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--msk-muted); }
.msk-tool .msk-timer { font-family: var(--msk-mono); font-weight: 600; color: var(--msk-navy); font-variant-numeric: tabular-nums; }
.msk-menu { display: none; position: relative; }
.msk-menu summary { list-style: none; cursor: pointer; color: var(--msk-navy); font-weight: 600; font-size: 0.93rem; padding: 8px 10px; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--msk-radius-sm); border: 1px solid var(--msk-line); }
.msk-menu summary::-webkit-details-marker { display: none; }
.msk-menu[open] summary { background: rgba(27, 42, 74, 0.06); }
.msk-menu-list { position: absolute; right: 0; top: calc(100% + 8px); background: var(--msk-white); border: 1px solid var(--msk-line); border-radius: var(--msk-radius); box-shadow: 0 12px 32px rgba(17, 26, 44, 0.12); padding: 8px; min-width: 220px; display: flex; flex-direction: column; }
.msk-menu-list a { color: var(--msk-navy); text-decoration: none; font-weight: 500; padding: 12px 12px; border-radius: var(--msk-radius-sm); min-height: 44px; display: flex; align-items: center; }
.msk-menu-list a:hover { background: var(--msk-accent-soft); }
@media (max-width: 760px) {
  .msk-links { display: none; }
  .msk-menu { display: block; }
  .msk-nav-in { gap: 10px; }
  .msk-cta { padding: 0 14px; }
  .msk-tool > :not(.msk-timer):not(.msk-tag) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .msk-logo { font-size: 1.1rem; }
}
.msk-nav--dark { background: rgba(10, 18, 32, 0.9); border-bottom-color: #1f2d45; }
.msk-nav--dark .msk-logo, .msk-nav--dark .msk-menu summary, .msk-nav--dark .msk-tool .msk-timer { color: #eef2f8; }
.msk-nav--dark .msk-links a { color: #a7b3c6; }
.msk-nav--dark .msk-links a:hover { color: #eef2f8; background: rgba(255, 255, 255, 0.08); }
.msk-nav--dark .msk-menu summary { border-color: #1f2d45; }
.msk-nav--dark .msk-menu-list { background: #111d33; border-color: #1f2d45; }
.msk-nav--dark .msk-menu-list a { color: #eef2f8; }
.msk-nav--dark .msk-menu-list a:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- the reading: a measured number is the hero ---------- */
.msk-reading { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.msk-reading-n { font-family: var(--msk-display); font-weight: 800; font-size: clamp(3.4rem, 14vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--msk-navy); font-variant-numeric: tabular-nums; }
.msk-reading-n .u { font-size: 0.45em; font-weight: 700; color: var(--msk-accent); margin-left: 2px; vertical-align: top; }
.msk-reading-l { font-size: 1rem; color: var(--msk-muted); }
.msk-reading--sm .msk-reading-n { font-size: clamp(2rem, 8vw, 2.8rem); }

/* ---------- tags: every number says what kind of number it is ---------- */
.msk-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--msk-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; line-height: 1.3; }
.msk-tag--measured { color: var(--msk-accent-deep); background: var(--msk-accent-soft); }
.msk-tag--estimate { color: var(--msk-amber); background: var(--msk-amber-bg); }
.msk-tag--device { color: var(--msk-navy); background: transparent; border: 1px solid var(--msk-line); }
.msk-tag--alert { color: var(--msk-red); background: #FEE2E2; }

/* ---------- punch, then honesty ---------- */
.msk-kicker { font-family: var(--msk-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--msk-accent); }
.msk-h1 { font-family: var(--msk-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--msk-navy); font-size: clamp(2rem, 6vw, 3.4rem); margin: 10px 0 14px; }
.msk-h1 em { font-style: normal; color: var(--msk-accent); }
.msk-honest { font-size: 0.95rem; color: var(--msk-muted); max-width: 60ch; line-height: 1.55; }

/* ---------- buttons: one primary per screen ---------- */
.msk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; font-family: var(--msk-sans); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; background: var(--msk-accent); color: #fff; transition: background 0.15s, transform 0.08s; }
.msk-btn:hover { background: var(--msk-accent-deep); }
.msk-btn:active { transform: translateY(1px); }
.msk-btn:disabled { opacity: 0.55; cursor: default; }
.msk-btn--ghost { background: transparent; color: var(--msk-navy); border-color: var(--msk-line); }
.msk-btn--ghost:hover { background: rgba(27, 42, 74, 0.05); border-color: var(--msk-navy); }
.msk-btn--big { min-height: 64px; font-size: 1.15rem; width: 100%; border-radius: 14px; }

/* ---------- cards, device box, steps ---------- */
.msk-card { background: var(--msk-white); border: 1px solid var(--msk-line); border-radius: var(--msk-radius); padding: 22px; }
.msk-card h2 { font-family: var(--msk-display); font-weight: 700; letter-spacing: -0.02em; color: var(--msk-navy); font-size: 1.25rem; margin: 0 0 10px; }
.msk-device { display: flex; gap: 12px; align-items: flex-start; background: var(--msk-accent-soft); border: 1px solid #CDE7E4; border-radius: var(--msk-radius); padding: 14px 16px; font-size: 0.93rem; color: var(--msk-ink); line-height: 1.5; }
.msk-device svg { flex: none; color: var(--msk-accent); margin-top: 2px; }
.msk-steps { list-style: none; counter-reset: msk; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.msk-steps li { counter-increment: msk; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.msk-steps li::before { content: counter(msk); width: 32px; height: 32px; border-radius: 50%; background: var(--msk-navy); color: #fff; font-family: var(--msk-display); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }

/* ---------- footer: the same band on every page ---------- */
.msk-foot { background: var(--msk-navy); color: rgba(255, 255, 255, 0.72); font-family: var(--msk-sans); margin-top: 56px; }
.msk-foot-in { max-width: var(--msk-max); margin: 0 auto; padding: 36px var(--msk-gutter) 28px; display: grid; gap: 18px; }
.msk-foot .msk-logo { color: #fff; }
.msk-foot p { margin: 0; font-size: 0.9rem; line-height: 1.55; max-width: 70ch; }
.msk-foot-links { display: flex; flex-wrap: wrap; gap: 0 10px; margin-left: -6px; }
.msk-foot-links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.9rem; min-height: 44px; min-width: 44px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
.msk-foot-links a:hover { color: #fff; text-decoration: underline; }
.msk-foot-sib { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); }
.msk-foot-sib a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.msk-foot-sib a:hover { color: #fff; }

/* ---------- small things ---------- */
.msk-skip { position: absolute; left: -9999px; top: 8px; background: var(--msk-navy); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.msk-skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { .msk-btn { transition: none; } }