/*
 * Quennell Hand & Wrist: the shared layer of every page. Base, type, the marker-outline button,
 * the nav and its phone sheet, the drawing's stroke styles, forms, reveals and the footer.
 * Every value comes from assets/tokens.css (--s-*). Page layouts: home.css, pages.css.
 * Namespace: .qh-*
 */

/* ── base ─────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-nav-h); }
body {
    margin: 0;
    background: var(--s-bone);
    color: var(--s-ink);
    font: var(--s-weight-body) var(--s-size-body)/var(--s-leading-body) var(--s-font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* Paper grain, at 3% at most: felt, never seen. Fixed so it never scrolls in bands. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--s-grain); opacity: var(--s-grain-alpha);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: var(--s-rule-w); text-underline-offset: var(--s-space-3xs); }
a:hover { text-decoration-color: var(--s-marker); }
p, h1, h2, h3, dl, dd, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
abbr[title] { text-decoration: none; }
::selection { background: var(--s-wash); color: var(--s-ink); }
main { position: relative; z-index: 1; }

/* Focus: the marker, everywhere. */
:focus-visible { outline: var(--s-focus-ring) solid var(--s-marker); outline-offset: var(--s-space-3xs); border-radius: var(--s-radius); }

.qh-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-space-2xs); z-index: var(--s-z-sheet);
    padding: var(--s-space-xs) var(--s-space-s); background: var(--s-ink); color: var(--s-on-ink);
    transform: translateY(-200%); transition: transform var(--s-dur-fast) var(--s-ease-out);
}
.qh-skip:focus { transform: none; }
.qh-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── type ─────────────────────────────────────────────────────────────────────────────── */
.qh-kicker {
    display: flex; align-items: center; gap: var(--s-space-xs);
    margin-bottom: var(--s-space-s);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}
/* The kicker is preceded by a short marker tick: the clinic's one recurring mark. */
.qh-kicker::before {
    content: ""; width: var(--s-space-m); height: var(--s-mark-w);
    background: var(--s-marker); border-radius: var(--s-radius);
}
.qh-kicker--on-ink { color: var(--s-on-ink-muted); }
.qh-kicker--on-ink::before { background: var(--s-marker-on-ink); }
.qh-h2 {
    font: var(--s-weight-display) var(--s-size-h2)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-h2);
    text-wrap: balance;
    max-width: 18ch;
}
.qh-h3 { font: var(--s-weight-semi) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); }
.qh-lede { font-size: var(--s-size-lede); color: var(--s-muted); max-width: var(--s-measure); text-wrap: pretty; }

/* ── the wordmark (nav + footer + sheet) ─────────────────────────────────────────────── */
.qh-mark {
    display: inline-flex; flex-direction: column; justify-content: center;
    min-height: var(--s-hit); text-decoration: none; color: var(--s-ink);
    line-height: var(--s-leading-display);
}
.qh-mark__a { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-display) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-mark__b {
    margin-top: var(--s-space-3xs);
    font: var(--s-weight-semi) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}

/* ── the marker-outline button ────────────────────────────────────────────────────────
   A violet fill with a 2px ink outline offset 4px behind it, like a marker line drawn
   slightly off its box. Hover closes the offset; press sinks the fill into it. */
.qh-btn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-space-xs);
    min-height: var(--s-hit);
    margin: 0 var(--s-btn-offset) var(--s-btn-offset) 0;
    padding: var(--s-btn-pad-y) var(--s-btn-pad-x);
    border: 0; border-radius: var(--s-radius);
    background: var(--s-marker); color: var(--s-marker-ink);
    font: var(--s-weight-strong) var(--s-size-body)/var(--s-leading-snug) var(--s-font-body);
    text-decoration: none; cursor: pointer;
    transition: background-color var(--s-dur-fast) var(--s-ease-out), transform var(--s-dur-base) var(--s-ease-out);
}
.qh-btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border: var(--s-btn-border) solid var(--s-ink); border-radius: var(--s-radius);
    transform: translate(var(--s-btn-offset), var(--s-btn-offset));
    transition: transform var(--s-dur-base) var(--s-ease-out);
}
.qh-btn:hover { text-decoration: none; }
.qh-btn:hover::before { transform: translate(0, 0); }
.qh-btn:active { background: var(--s-marker-deep); transform: translate(var(--s-btn-press), var(--s-btn-press)); }
.qh-btn:focus-visible { outline-color: var(--s-ink); outline-offset: calc(var(--s-btn-offset) + var(--s-space-3xs)); }
.qh-btn--small { padding: var(--s-space-2xs) var(--s-space-s); font-size: var(--s-size-small); }
.qh-btn--wide { width: calc(100% - var(--s-btn-offset)); }
.qh-btn--on-ink::before { border-color: var(--s-on-ink); }

/* The secondary action: an ink link with a ruled arrow, never a second button. */
.qh-link-btn {
    display: inline-flex; align-items: center; gap: var(--s-space-xs);
    min-height: var(--s-hit);
    font-weight: var(--s-weight-strong); text-decoration: none;
    border-bottom: var(--s-btn-border) solid var(--s-ink);
}
.qh-link-btn::after {
    content: ""; width: var(--s-space-m); height: var(--s-btn-border);
    background: currentColor;
    transition: width var(--s-dur-base) var(--s-ease-out);
}
.qh-link-btn:hover::after { width: var(--s-space-xl); }
.qh-link-btn:hover { border-bottom-color: var(--s-marker); }

.qh-phone {
    display: inline-flex; align-items: center; min-height: var(--s-hit);
    font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display);
    letter-spacing: var(--s-track-h2); text-decoration: none; font-variant-numeric: tabular-nums;
}
.qh-phone:hover { text-decoration: underline; text-decoration-color: var(--s-marker); }
.qh-phone--big { font-size: var(--s-size-h2); }

/* ── nav ──────────────────────────────────────────────────────────────────────────────── */
.qh-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-space-m);
    height: var(--s-nav-h); padding: 0 var(--s-gutter);
    background: var(--s-nav-bg);
    border-bottom: var(--s-rule-w) solid var(--s-rule);
}
.qh-nav .qh-mark { flex-direction: row; align-items: center; gap: var(--s-space-2xs); min-height: var(--s-hit); padding-block: var(--s-space-xs); }
.qh-nav .qh-mark__b { margin-top: 0; }
.qh-nav__links { margin-left: auto; }
.qh-nav__links ul { display: flex; gap: var(--s-space-2xs); }
.qh-nav__links a {
    display: inline-flex; align-items: center; min-height: var(--s-hit);
    padding: 0 var(--s-space-xs); text-decoration: none; color: var(--s-ink);
    font-weight: var(--s-weight-semi);
    background: linear-gradient(var(--s-marker), var(--s-marker)) no-repeat left calc(100% - var(--s-space-xs)) / 0% var(--s-mark-w);
    background-origin: content-box;
    transition: background-size var(--s-dur-base) var(--s-ease-pen);
}
.qh-nav__links a:hover, .qh-nav__links a[aria-current="page"] { background-size: 100% var(--s-mark-w); }
.qh-nav__phone {
    display: inline-flex; align-items: center; min-height: var(--s-hit);
    padding: 0 var(--s-space-xs) 0 var(--s-space-m);
    font-weight: var(--s-weight-strong); font-variant-numeric: tabular-nums; text-decoration: none;
    border-left: var(--s-rule-w) solid var(--s-rule);
}
.qh-nav__menu {
    display: none; min-height: var(--s-hit); min-width: var(--s-hit);
    padding: 0 var(--s-space-s);
    border: var(--s-btn-border) solid var(--s-ink); border-radius: var(--s-radius);
    background: transparent; color: var(--s-ink); cursor: pointer;
    font: var(--s-weight-strong) var(--s-size-small)/var(--s-leading-snug) var(--s-font-body);
}

/* The phone menu: a full sheet of paper, the page list set large. */
.qh-sheet {
    position: fixed; inset: 0; z-index: var(--s-z-sheet);
    display: flex; flex-direction: column; gap: var(--s-space-l);
    padding: 0 var(--s-gutter) var(--s-space-xl);
    background: var(--s-bone); overflow-y: auto;
    animation: qh-sheet-in var(--s-dur-note) var(--s-ease-out);
}
.qh-sheet[hidden] { display: none; }
.qh-sheet__top {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--s-nav-h-sm); border-bottom: var(--s-rule-w) solid var(--s-rule);
}
.qh-sheet__top .qh-mark { flex-direction: row; align-items: baseline; gap: var(--s-space-2xs); }
.qh-sheet__close {
    min-height: var(--s-hit); min-width: var(--s-hit); padding: 0 var(--s-space-s);
    border: var(--s-btn-border) solid var(--s-ink); border-radius: var(--s-radius);
    background: transparent; color: var(--s-ink); cursor: pointer;
    font: var(--s-weight-strong) var(--s-size-small)/var(--s-leading-snug) var(--s-font-body);
}
.qh-sheet__pages { counter-reset: qh-page; }
.qh-sheet__pages li { counter-increment: qh-page; border-bottom: var(--s-rule-w) solid var(--s-rule); }
.qh-sheet__pages a {
    display: flex; align-items: baseline; gap: var(--s-space-s);
    min-height: var(--s-hit); padding: var(--s-space-s) 0;
    font: var(--s-weight-display) var(--s-size-h2)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-h2); text-decoration: none;
}
.qh-sheet__pages a::before {
    content: counter(qh-page, decimal-leading-zero);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    color: var(--s-muted); letter-spacing: var(--s-track-label);
}
.qh-sheet__pages a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--s-marker); text-decoration-thickness: var(--s-mark-w); }
.qh-sheet__phone {
    align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--s-hit);
    font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display);
}
html.qh-locked { overflow: hidden; }

@keyframes qh-sheet-in {
    from { opacity: 0; transform: translateY(var(--s-reveal-shift)); }
    to { opacity: 1; transform: none; }
}

/* ── the drawing's strokes (inherit into every <use>) ─────────────────────────────────── */
.qh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.qh-art-contour { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-contour); stroke-linecap: round; stroke-linejoin: round; }
.qh-art-creases path { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-crease); stroke-linecap: round; }
.qh-art-bones path { fill: none; stroke: var(--s-rule-strong); stroke-width: var(--s-stroke-bone); stroke-linecap: round; stroke-linejoin: round; }
.qh-art-roundel { fill: var(--s-bone); stroke: var(--s-ink); stroke-width: var(--s-stroke-roundel); }

/* A finished marker stroke (condition pages, and the home plate's final state). */
.qh-markpath {
    fill: none; stroke: var(--s-marker); stroke-width: var(--s-stroke-mark);
    stroke-linecap: round; stroke-linejoin: round;
}

/* ── the index glyphs (home index, conditions page) ───────────────────────────────────── */
.qh-glyph { flex: none; width: var(--s-glyph); height: var(--s-glyph); }
.qh-glyph .qh-art-contour { stroke-width: var(--s-stroke-glyph); stroke: var(--s-muted); }
.qh-glyph--elbow .qh-art-roundel,
.qh-glyph--elbow .qh-art-contour,
.qh-glyph--elbow .qh-art-bones path,
.qh-glyph--elbow .qh-art-creases path { stroke-width: var(--s-stroke-icon); }
.qh-glyph--elbow .qh-art-bones path { stroke: var(--s-rule-strong); }
.qh-glyph__dot { fill: var(--s-marker); }

/* ── reveal on scroll (only with JS; without it nothing is ever hidden) ───────────────── */
.qh-js [data-qh-reveal] {
    opacity: 0; transform: translateY(var(--s-reveal-shift));
    transition: opacity var(--s-dur-reveal) var(--s-ease-out), transform var(--s-dur-reveal) var(--s-ease-out);
}
.qh-js [data-qh-reveal].is-in { opacity: 1; transform: none; }

/* ── forms (visit + refer) ───────────────────────────────────────────────────────────── */
.qh-field { display: grid; gap: var(--s-space-2xs); align-content: start; }
.qh-label { font-weight: var(--s-weight-strong); font-size: var(--s-size-small); }
.qh-hint { font-size: var(--s-size-small); color: var(--s-muted); }
.qh-input, .qh-select, .qh-textarea {
    width: 100%; min-height: var(--s-hit);
    padding: var(--s-space-xs) var(--s-space-s);
    border: 0; border-bottom: var(--s-btn-border) solid var(--s-ink); border-radius: 0;
    background: var(--s-paper); color: var(--s-ink);
    font: var(--s-weight-body) var(--s-size-body)/var(--s-leading-snug) var(--s-font-body);
    transition: border-color var(--s-dur-fast) var(--s-ease-out), background-color var(--s-dur-fast) var(--s-ease-out);
}
.qh-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--s-ink) 50%), linear-gradient(-45deg, transparent 50%, var(--s-ink) 50%); background-size: var(--s-space-2xs) var(--s-space-2xs); background-position: calc(100% - var(--s-space-m)) 55%, calc(100% - var(--s-space-s)) 55%; background-repeat: no-repeat; padding-right: var(--s-space-xl); }
.qh-textarea { min-height: calc(var(--s-hit) * 3); resize: vertical; line-height: var(--s-leading-body); }
.qh-input:focus-visible, .qh-select:focus-visible, .qh-textarea:focus-visible {
    outline: none; border-bottom-color: var(--s-marker); background-color: var(--s-wash);
}
.qh-field.is-invalid .qh-input,
.qh-field.is-invalid .qh-select,
.qh-field.is-invalid .qh-textarea { border-bottom-color: var(--s-error); }
.qh-error { color: var(--s-error); font-size: var(--s-size-small); font-weight: var(--s-weight-strong); }
.qh-error:empty { display: none; }
/* Choice chips: real radios, drawn as ruled tickets with a marker underline when chosen. */
.qh-choices { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); border: 0; margin: 0; padding: 0; min-width: 0; }
.qh-choices legend { padding: 0; margin-bottom: var(--s-space-2xs); }
.qh-choice { position: relative; }
.qh-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qh-choice > span {
    display: inline-flex; align-items: center; min-height: var(--s-hit);
    padding: 0 var(--s-space-s);
    border: var(--s-rule-w) solid var(--s-rule-strong); border-radius: var(--s-radius);
    background: var(--s-paper);
    transition: border-color var(--s-dur-fast) var(--s-ease-out), background-color var(--s-dur-fast) var(--s-ease-out);
}
.qh-choice input:checked + span { border-color: var(--s-ink); background: var(--s-wash); box-shadow: inset 0 calc(var(--s-mark-w) * -1) 0 var(--s-marker); }
.qh-choice input:focus-visible + span { outline: var(--s-focus-ring) solid var(--s-marker); outline-offset: var(--s-space-3xs); }
.qh-check { display: flex; align-items: flex-start; gap: var(--s-space-xs); min-height: var(--s-hit); cursor: pointer; }
.qh-check input { flex: none; width: var(--s-space-m); height: var(--s-space-m); margin: var(--s-space-3xs) 0 0; accent-color: var(--s-marker); }
.qh-form-msg {
    padding: var(--s-space-s) var(--s-space-m);
    border-left: var(--s-mark-w) solid var(--s-marker); background: var(--s-wash);
}
.qh-form-msg[hidden] { display: none; }
.qh-form-msg--bad { border-left-color: var(--s-error); background: var(--s-paper); }

/* ── the referral letter (home "For GPs", and the live preview on the refer page) ───── */
.qh-letter {
    position: relative;
    padding: var(--s-space-xl);
    background: var(--s-paper);
    border: var(--s-rule-w) solid var(--s-rule-strong);
    display: grid; gap: var(--s-space-l);
}
.qh-letter__head {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-space-s);
    padding-bottom: var(--s-space-s);
    border-bottom: var(--s-btn-border) double var(--s-ink);
    border-bottom-width: calc(var(--s-btn-border) * 2);
}
.qh-letter__mark { width: var(--s-space-2xl); height: var(--s-space-2xl); }
.qh-letter__mark .qh-art-contour { stroke-width: var(--s-stroke-glyph); stroke: var(--s-ink); }
.qh-letter__to { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-letter__ref { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--s-weight-strong); }
.qh-letter__ref span { display: block; font-size: var(--s-size-micro); font-weight: var(--s-weight-body); color: var(--s-muted); letter-spacing: var(--s-track-label); text-transform: uppercase; }
.qh-letter__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-space-s) var(--s-space-l); }
.qh-letter__fields div { display: grid; gap: var(--s-space-3xs); padding-bottom: var(--s-space-2xs); border-bottom: var(--s-rule-w) solid var(--s-rule-strong); }
.qh-letter__fields dt { font-size: var(--s-size-micro); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted); }
.qh-letter__fields dd { color: var(--s-muted); font-style: italic; }
.qh-letter__keylabel { font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted); margin-bottom: var(--s-space-xs); }
.qh-letter__key ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-space-s); }
.qh-urgency { display: grid; grid-template-columns: auto 1fr; gap: var(--s-space-3xs) var(--s-space-xs); align-items: center; font-size: var(--s-size-small); }
.qh-urgency span:last-child { grid-column: 2; color: var(--s-muted); }
/* The urgency key is three marks of rising weight: an open ring, a half, a solid dot. */
.qh-urgency__mark {
    width: var(--s-space-m); height: var(--s-space-m); border-radius: 50%;
    border: var(--s-btn-border) solid var(--s-marker);
}
.qh-urgency--soon .qh-urgency__mark { background: linear-gradient(90deg, var(--s-marker) 50%, transparent 50%); }
.qh-urgency--urgent .qh-urgency__mark { background: var(--s-marker); }
.qh-letter__concept { font-size: var(--s-size-micro); color: var(--s-muted); font-style: italic; }

/* ── footer ───────────────────────────────────────────────────────────────────────────── */
.qh-foot {
    position: relative; z-index: 1;
    padding: var(--s-space-2xl) var(--s-gutter) var(--s-space-xl);
    background: var(--s-bone-deep);
    border-top: var(--s-rule-w) solid var(--s-rule);
    font-size: var(--s-size-small);
}
.qh-foot__inner {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: 1.2fr 0.8fr 2fr; gap: var(--s-space-xl);
}
.qh-mark--foot { flex-direction: column; align-items: flex-start; }
.qh-mark--foot .qh-mark__a { font-size: var(--s-size-h2); }
.qh-foot__tag { margin: var(--s-space-s) 0; color: var(--s-muted); }
.qh-foot__address { display: grid; font-style: normal; margin-bottom: var(--s-space-xs); }
.qh-foot__pages a { display: inline-flex; align-items: center; min-height: var(--s-hit); font-weight: var(--s-weight-semi); text-decoration: none; }
.qh-foot__pages a:hover { text-decoration: underline; text-decoration-color: var(--s-marker); }
.qh-foot__small {
    margin-bottom: var(--s-space-s);
    font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}
.qh-foot__credits { display: grid; gap: var(--s-space-xs); align-content: start; color: var(--s-muted); max-width: var(--s-measure-wide); }
.qh-foot__credits a { display: inline-flex; align-items: center; min-height: var(--s-hit); color: var(--s-ink); }
.qh-foot__copy { margin-top: var(--s-space-s); padding-top: var(--s-space-s); border-top: var(--s-rule-w) solid var(--s-rule); }

/* ── narrow screens ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .qh-nav__phone { display: none; }
}
@media (max-width: 1023px) {
    .qh-nav { height: var(--s-nav-h-sm); gap: var(--s-space-xs); }
    .qh-nav__links { display: none; }
    .qh-nav__book { margin-left: auto; }
    .qh-nav__menu { display: inline-flex; align-items: center; }
    .qh-nav .qh-mark__b { display: none; }
    .qh-foot__inner { grid-template-columns: 1fr 1fr; }
    .qh-foot__credits { grid-column: 1 / -1; }
    .qh-letter { padding: var(--s-space-m); }
    .qh-letter__fields, .qh-letter__key ul { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
    .qh-foot__inner { grid-template-columns: 1fr; gap: var(--s-space-l); }
}

/* ── reduced motion: every moving thing has a designed final state ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
    .qh-js [data-qh-reveal] { opacity: 1; transform: none; }
}