/*
 * Quennell Hand & Wrist: the inner pages. Conditions (the register + one condition), Your visit
 * (the ruler, the steps on a rail, the booking form) and Refer (the form beside its live letter).
 * Values from assets/tokens.css only.
 */

.qh-page-title {
    font: var(--s-weight-display) var(--s-size-h1)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display);
    text-wrap: balance; max-width: 16ch;
}
.qh-back {
    display: inline-flex; align-items: center; gap: var(--s-space-xs);
    min-height: var(--s-hit); margin-bottom: var(--s-space-m);
    font-weight: var(--s-weight-strong); text-decoration: none;
}
.qh-back::before { content: ""; width: var(--s-space-m); height: var(--s-btn-border); background: currentColor; transition: width var(--s-dur-base) var(--s-ease-out); }
.qh-back:hover::before { width: var(--s-space-xl); background: var(--s-marker); }

/* Ticked lists: each item carries a short marker stroke, as if ticked off on the note. */
.qh-ticks { display: grid; gap: var(--s-space-xs); }
.qh-ticks li { position: relative; padding-left: var(--s-space-xl); }
.qh-ticks li::before {
    content: ""; position: absolute; left: 0; top: calc(var(--s-size-body) * var(--s-leading-body) / 2 - var(--s-space-2xs));
    width: var(--s-space-m); height: var(--s-space-xs);
    border-left: var(--s-mark-w) solid var(--s-marker); border-bottom: var(--s-mark-w) solid var(--s-marker);
    transform: rotate(-45deg) scale(0.7); transform-origin: left bottom;
}

/* ── one condition ────────────────────────────────────────────────────────────────────── */
.qh-cond { max-width: var(--s-max); margin-inline: auto; padding: 0 var(--s-gutter); }
.qh-cond__hero {
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-space-2xl); align-items: center;
    min-height: var(--s-first-h);
    padding-block: var(--s-space-xl);
}
.qh-cond__intro { display: grid; justify-items: start; gap: var(--s-space-s); }
.qh-cond__intro .qh-kicker { margin-bottom: 0; }
.qh-cond__intro .qh-back { margin-bottom: 0; }
.qh-cond__name {
    font: var(--s-weight-display) var(--s-size-h1)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display); text-wrap: balance; max-width: 14ch;
}
.qh-cond__also { font-style: italic; color: var(--s-muted); }
.qh-cond__summary { font-size: var(--s-size-lede); max-width: var(--s-measure-wide); text-wrap: pretty; }
.qh-cond__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-m) var(--s-space-xl); margin-top: var(--s-space-s); }
.qh-cond__plate {
    display: grid; gap: var(--s-space-xs);
    padding: var(--s-space-l);
    background: var(--s-paper); border: var(--s-rule-w) solid var(--s-rule);
}
.qh-cond__plate svg { width: 100%; height: auto; max-height: var(--s-plate-h); overflow: hidden; }
.qh-cond__plate--elbow svg { max-width: var(--s-plate-elbow); margin-inline: auto; }
.qh-cond__plate figcaption {
    padding-top: var(--s-space-xs); border-top: var(--s-rule-w) solid var(--s-ink);
    font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display);
}
.qh-cond__plate figcaption .qh-plate__num { margin-right: var(--s-space-xs); 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; }
/* The mark draws itself on when the page opens, the way it was drawn on the home plate. */
.qh-cond__mark { stroke-dasharray: 1 1; animation: qh-draw var(--s-dur-mark) var(--s-ease-pen) var(--s-dur-reveal) both; }
@keyframes qh-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* The record: three panels that read like the consultant's own notes, each composed differently. */
.qh-record {
    display: grid; grid-template-columns: 4fr 4fr 5fr; gap: var(--s-space-l);
    padding-block: var(--s-space-2xl);
    border-top: var(--s-btn-border) solid var(--s-ink);
}
.qh-record__h {
    display: flex; align-items: baseline; gap: var(--s-space-xs);
    margin-bottom: var(--s-space-m);
    font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display);
    letter-spacing: var(--s-track-h2);
}
.qh-record__no { font: italic var(--s-weight-body) var(--s-size-small)/var(--s-leading-snug) var(--s-font-body); color: var(--s-muted); }
.qh-record__look p {
    padding: var(--s-space-m);
    background: var(--s-wash);
    background-image: linear-gradient(90deg, transparent calc(var(--s-space-xs) - var(--s-rule-w)), var(--s-marker) calc(var(--s-space-xs) - var(--s-rule-w)), var(--s-marker) var(--s-space-xs), transparent var(--s-space-xs));
    padding-left: var(--s-space-l);
}
/* The ladder: mildest first, each rung a step further along. */
.qh-ladder { display: grid; gap: var(--s-space-2xs); counter-reset: qh-rung; }
.qh-ladder__rung {
    counter-increment: qh-rung;
    position: relative;
    margin-left: calc(var(--rung) * var(--s-space-m));
    padding: var(--s-space-s) var(--s-space-s) var(--s-space-s) var(--s-space-2xl);
    background: var(--s-paper); border: var(--s-rule-w) solid var(--s-rule);
}
.qh-ladder__rung::before {
    content: counter(qh-rung);
    position: absolute; left: var(--s-space-s); top: var(--s-space-s);
    display: grid; place-items: center;
    width: var(--s-space-l); height: var(--s-space-l); border-radius: 50%;
    border: var(--s-btn-border) solid var(--s-ink);
    font: var(--s-weight-display) var(--s-size-small)/var(--s-leading-display) var(--s-font-display);
}

.qh-recovery {
    display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-space-s) var(--s-space-2xl);
    padding-block: var(--s-space-2xl);
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.qh-recovery .qh-h2 { font-size: var(--s-size-h2-tap); }
.qh-recovery__line { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-space-m); }
.qh-recovery__line::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s-dot) / 2 - var(--s-rule-w));
    height: var(--s-btn-border); background: var(--s-ink);
}
.qh-recovery__line li { position: relative; display: grid; gap: var(--s-space-2xs); padding-top: var(--s-space-l); }
.qh-recovery__line li::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: var(--s-dot); height: var(--s-dot); border-radius: 50%; background: var(--s-marker);
}
.qh-recovery__when { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-recovery__text { color: var(--s-muted); }
.qh-recovery__note { grid-column: 2; font-size: var(--s-size-small); color: var(--s-muted); font-style: italic; }

.qh-whenbook {
    display: grid; grid-template-columns: 4fr 6fr auto; align-items: center; gap: var(--s-space-l) var(--s-space-2xl);
    padding: var(--s-space-xl);
    background: var(--s-ink); color: var(--s-on-ink);
}
.qh-whenbook__h { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); }
.qh-whenbook__text { color: var(--s-on-ink-muted); }
.qh-whenbook .qh-btn::before { border-color: var(--s-on-ink); }
.qh-whenbook .qh-btn:focus-visible { outline-color: var(--s-on-ink); }

.qh-nextcond {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-space-s);
    padding-block: var(--s-space-xl) var(--s-space-2xl);
}
.qh-nextcond__label { 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-nextcond__link {
    display: inline-flex; align-items: center; gap: var(--s-space-s);
    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;
}
.qh-nextcond__link:hover span { text-decoration: underline; text-decoration-color: var(--s-marker); text-decoration-thickness: var(--s-mark-w); }

/* ── the register (all conditions) ───────────────────────────────────────────────────── */
.qh-register { max-width: var(--s-max); margin-inline: auto; padding: var(--s-space-2xl) var(--s-gutter) var(--s-section); }
/* The head: the title on the left, Plate 2 on the right, so the index opens on the drawing. */
.qh-register__head {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--s-locator-col);
    align-items: center; gap: var(--s-space-l) var(--s-space-2xl); margin-bottom: var(--s-space-xl);
}
.qh-register__intro { display: grid; gap: var(--s-space-m); align-content: center; }
.qh-register__head .qh-kicker { margin-bottom: 0; }
.qh-register__hint {
    max-width: var(--s-measure); padding-top: var(--s-space-s);
    border-top: var(--s-rule-w) solid var(--s-rule); color: var(--s-muted); font-size: var(--s-size-small);
}

/* Plate 2: the locator. Each pin carries the register numbers that live at that place. */
.qh-locator { display: grid; gap: var(--s-space-xs); justify-items: center; }
.qh-locator__sheet { position: relative; height: var(--s-locator-h); max-width: 100%; aspect-ratio: var(--s-plate-ratio); }
.qh-locator__art { width: 100%; height: 100%; overflow: visible; }
.qh-locator__pins { position: absolute; inset: 0; }
.qh-locator__cap {
    width: 100%; padding-top: var(--s-space-xs); border-top: var(--s-rule-w) solid var(--s-ink);
    font: var(--s-weight-display) var(--s-size-small)/var(--s-leading-snug) var(--s-font-display);
}
.qh-locpin {
    position: absolute; left: var(--x); top: var(--y);
    display: flex; align-items: center; gap: var(--s-space-2xs);
    min-width: var(--s-hit); min-height: var(--s-hit); padding: 0;
    transform: translate(calc(var(--s-hit) / -2), -50%);
    border: 0; background: transparent; color: var(--s-ink); cursor: pointer;
}
.qh-locpin--end { flex-direction: row-reverse; transform: translate(calc(-100% + var(--s-hit) / 2), -50%); }
.qh-locpin__dot {
    flex: none; display: grid; place-items: center; width: var(--s-hit); height: var(--s-hit);
}
.qh-locpin__dot::before {
    content: ""; width: var(--s-spot-ring); height: var(--s-spot-ring); border-radius: 50%;
    border: var(--s-btn-border) solid var(--s-marker); background: var(--s-bone);
    transition: background-color var(--s-dur-fast) var(--s-ease-out), transform var(--s-dur-base) var(--s-ease-out);
}
.qh-locpin__nums {
    padding: var(--s-space-3xs) var(--s-space-2xs); background: var(--s-bone);
    font: var(--s-weight-display) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-display);
    font-feature-settings: var(--s-figures-features); letter-spacing: var(--s-track-label); white-space: nowrap;
    box-shadow: inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule-strong);
}
.qh-locpin:hover .qh-locpin__dot::before { transform: scale(1.25); }
.qh-locpin[aria-pressed="true"] .qh-locpin__dot::before { background: var(--s-marker); transform: scale(1.25); }
.qh-locpin[aria-pressed="true"] .qh-locpin__nums { color: var(--s-marker-ink); background: var(--s-marker); box-shadow: none; }
.qh-register__title {
    font: var(--s-weight-display) var(--s-size-h1)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display); max-width: 14ch;
}
.qh-register__filter { align-items: center; padding-bottom: var(--s-space-m); margin-bottom: var(--s-space-xs); }
.qh-register__filter legend { float: left; margin-right: var(--s-space-s); padding-top: var(--s-space-xs); }
.qh-nojs .qh-register__filter { display: none; }
.qh-register__count { margin-left: auto; font-size: var(--s-size-small); color: var(--s-muted); font-variant-numeric: tabular-nums; }
.qh-register__list { border-top: var(--s-btn-border) solid var(--s-ink); }
.qh-reg {
    display: grid; grid-template-columns: var(--s-space-xl) var(--s-glyph) 1fr var(--s-index-col-sm) auto;
    align-items: center; gap: var(--s-space-m);
    padding: var(--s-space-s) 0;
    border-bottom: var(--s-rule-w) solid var(--s-rule);
    transition: opacity var(--s-dur-base) var(--s-ease-out), transform var(--s-dur-base) var(--s-ease-out);
}
.qh-reg[hidden] { display: none; }
.qh-reg.is-entering { animation: qh-reg-in var(--s-dur-note) var(--s-ease-out) both; }
@keyframes qh-reg-in {
    from { opacity: 0; transform: translateY(var(--s-space-2xs)); }
    to { opacity: 1; transform: none; }
}
.qh-reg__no { font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); color: var(--s-muted); font-variant-numeric: tabular-nums; }
.qh-reg__text { display: grid; gap: var(--s-space-3xs); }
.qh-reg__name { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-reg__name a { display: inline-flex; align-items: center; min-height: var(--s-hit); text-decoration: none; }
.qh-reg__name a:hover { text-decoration: underline; text-decoration-color: var(--s-marker); text-decoration-thickness: var(--s-mark-w); }
.qh-reg__line { color: var(--s-muted); max-width: var(--s-measure-wide); }
.qh-reg__region { font-size: var(--s-size-small); color: var(--s-muted); }
.qh-reg__read {
    display: inline-flex; align-items: center; min-height: var(--s-hit); padding: 0 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; text-decoration: none;
    border: var(--s-btn-border) solid var(--s-ink); border-radius: var(--s-radius);
}
.qh-reg__read:hover { background: var(--s-wash); border-color: var(--s-marker); }
.qh-reg__nopage { font-size: var(--s-size-micro); color: var(--s-muted); font-style: italic; max-width: var(--s-nopage-w); text-align: right; }

/* ── your visit ───────────────────────────────────────────────────────────────────────── */
.qh-visit__head {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-space-2xl) var(--s-gutter) var(--s-space-xl);
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-space-m) var(--s-space-2xl); align-items: end;
}
.qh-visit__head .qh-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.qh-visit__head .qh-lede { padding-bottom: var(--s-space-2xs); }
/* The ruler: the six moments as graduations along one line, each a jump link. */
.qh-ruler {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(6, 1fr);
    margin-top: var(--s-space-l);
    border-top: var(--s-btn-border) solid var(--s-ink);
}
.qh-ruler li { position: relative; }
.qh-ruler li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--s-btn-border); height: var(--s-space-s); background: var(--s-ink); }
.qh-ruler a {
    display: grid; gap: var(--s-space-3xs);
    min-height: var(--s-hit); padding: var(--s-space-m) var(--s-space-s) var(--s-space-xs);
    text-decoration: none;
}
.qh-ruler a:hover .qh-ruler__when { text-decoration: underline; text-decoration-color: var(--s-marker); text-decoration-thickness: var(--s-mark-w); }
.qh-ruler__no { font: var(--s-weight-strong) var(--s-size-micro)/var(--s-leading-snug) var(--s-font-body); color: var(--s-muted); font-variant-numeric: tabular-nums; }
.qh-ruler__when { font: var(--s-weight-display) var(--s-size-body)/var(--s-leading-snug) var(--s-font-display); }

.qh-steps {
    position: relative;
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-space-xl) var(--s-gutter) var(--s-section);
}
.qh-steps__rail {
    position: absolute; top: var(--s-space-xl); bottom: var(--s-section);
    left: calc(var(--s-gutter) + var(--s-step-when) - var(--s-space-l));
    width: var(--s-mark-w); background: var(--s-rule);
}
.qh-steps__fill {
    position: absolute; inset: 0; background: var(--s-marker);
    transform-origin: center top; transform: scaleY(var(--qh-fill));
    --qh-fill: 1;
}
.qh-js .qh-steps__fill { --qh-fill: 0; transition: transform var(--s-dur-base) linear; }
.qh-steps__list { display: grid; gap: var(--s-space-xl); }
/* Each step: the moment and its drawn icon, what happens, and a pinned checklist that reaches the
   same depth as the words, so no step leaves a half-empty column. */
.qh-step {
    display: grid; grid-template-columns: var(--s-step-when) 6fr 4fr; gap: var(--s-space-m) var(--s-space-xl);
    align-items: stretch;
    padding-bottom: var(--s-space-xl); border-bottom: var(--s-rule-w) solid var(--s-rule);
}
.qh-step:last-child { border-bottom: 0; padding-bottom: 0; }
.qh-step__mark { display: grid; justify-items: start; align-content: start; gap: var(--s-space-s); }
.qh-step__icon {
    width: var(--s-step-icon); height: var(--s-step-icon); padding: var(--s-space-2xs);
    border: var(--s-rule-w) solid var(--s-ink); border-radius: 50%; background: var(--s-paper);
    fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-icon); stroke-linecap: round; stroke-linejoin: round;
}
.qh-step:nth-child(1) .qh-step__icon, .qh-step:last-child .qh-step__icon { border-color: var(--s-marker); }
.qh-step__when {
    display: grid; gap: var(--s-space-3xs);
    font: var(--s-weight-display) var(--s-size-h2-tap)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-h2);
}
.qh-step__no { 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-step__body { display: grid; gap: var(--s-space-s); }
.qh-step__title { font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2); }
.qh-step__text { color: var(--s-muted); max-width: var(--s-measure); }
.qh-step__list { align-self: stretch; display: grid; align-content: center; padding: var(--s-space-m); background: var(--s-paper); border: var(--s-rule-w) solid var(--s-rule); border-top: var(--s-btn-border) solid var(--s-ink); font-size: var(--s-size-small); }

/* ── forms: booking and referral ──────────────────────────────────────────────────────── */
.qh-book {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-section) var(--s-gutter);
    display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-space-2xl); align-items: start;
    border-top: var(--s-btn-border) solid var(--s-ink);
}
.qh-book__intro { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-xl)); display: grid; gap: var(--s-space-s); justify-items: start; }
.qh-book__intro .qh-kicker { margin-bottom: 0; }
.qh-book__intro .qh-find__small { margin: var(--s-space-m) 0 0; }
.qh-form { display: grid; gap: var(--s-space-l); justify-items: start; }
.qh-form__grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-space-l) var(--s-space-l); }
.qh-field--wide { grid-column: 1 / -1; }
.qh-form__from {
    padding: var(--s-space-xs) var(--s-space-s);
    border-left: var(--s-mark-w) solid var(--s-marker);
    font-weight: var(--s-weight-strong);
}
.qh-form-msg { width: 100%; }
.qh-form-msg a { font-weight: var(--s-weight-strong); }

/* ── refer ────────────────────────────────────────────────────────────────────────────── */
.qh-refer__head {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-space-2xl) var(--s-gutter) var(--s-space-xl);
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-space-2xl); align-items: end;
    border-bottom: var(--s-btn-border) solid var(--s-ink);
}
.qh-refer__head .qh-lede { margin-top: var(--s-space-m); }
.qh-refer__side { display: grid; gap: var(--s-space-3xs); justify-items: start; }
.qh-refer__promise-label { margin-top: var(--s-space-m); }
.qh-promise { display: grid; gap: var(--s-space-2xs); counter-reset: qh-promise; }
.qh-promise li { counter-increment: qh-promise; display: grid; grid-template-columns: var(--s-space-l) 1fr; font-size: var(--s-size-small); }
.qh-promise li::before { content: counter(qh-promise, decimal-leading-zero); color: var(--s-muted); font-variant-numeric: tabular-nums; }
.qh-refer {
    max-width: var(--s-max); margin-inline: auto;
    padding: var(--s-space-xl) var(--s-gutter) var(--s-section);
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-space-2xl); align-items: start;
}
.qh-part { border: 0; margin: 0; padding: 0 0 var(--s-space-l); min-width: 0; width: 100%; border-bottom: var(--s-rule-w) solid var(--s-rule); }
.qh-part__legend {
    display: flex; align-items: baseline; gap: var(--s-space-s);
    padding: 0; margin-bottom: var(--s-space-m);
    font: var(--s-weight-display) var(--s-size-h3)/var(--s-leading-snug) var(--s-font-display); letter-spacing: var(--s-track-h2);
}
.qh-part__no { 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-urgency-pick { flex-direction: column; align-items: stretch; }
.qh-urgency-pick .qh-choice > span { display: flex; gap: var(--s-space-xs); width: 100%; padding-block: var(--s-space-xs); }
.qh-urgency-pick .qh-urgency { display: block; }
.qh-urgency-pick strong { margin-right: var(--s-space-3xs); }
.qh-urgent-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-3xs) var(--s-space-s); border-left-color: var(--s-marker); }
.qh-urgent-note[hidden] { display: none; }
.qh-urgent-note a { display: inline-flex; align-items: center; min-height: var(--s-hit); }
.qh-refer__preview { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-l)); display: grid; gap: var(--s-space-xs); }
.qh-letter--live { padding: var(--s-space-l); }
.qh-letter--live .qh-letter__fields { grid-template-columns: 1fr; }
.qh-letter--live dd { transition: color var(--s-dur-base) var(--s-ease-out); }
.qh-letter--live dd.is-filled { color: var(--s-ink); font-style: normal; font-weight: var(--s-weight-strong); }
.qh-letter--live dd.is-new { animation: qh-ink-in var(--s-dur-note) var(--s-ease-out); }
@keyframes qh-ink-in {
    from { opacity: 0.35; }
    to { opacity: 1; }
}
.qh-letter--live [data-qh-slot="urgency"] dd { display: flex; align-items: center; gap: var(--s-space-xs); }
.qh-letter--live [data-qh-slot="urgency"] dd > span { display: inline-flex; }
.qh-urgency-pick .qh-urgency__mark { flex: none; }

/* ── narrower screens ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .qh-cond__hero { grid-template-columns: 1fr; min-height: 0; gap: var(--s-space-l); padding-top: var(--s-space-m); }
    .qh-cond__plate { order: -1; padding: var(--s-space-s); }
    .qh-cond__plate svg { max-height: var(--s-hand-crop-h); }
    .qh-record { grid-template-columns: 1fr; gap: var(--s-space-xl); padding-block: var(--s-space-xl); }
    .qh-recovery { grid-template-columns: 1fr; }
    .qh-recovery__note { grid-column: 1; }
    .qh-recovery__line { grid-template-columns: 1fr; padding-left: var(--s-space-l); }
    .qh-recovery__line::before { left: calc(var(--s-dot) / 2 - var(--s-rule-w)); right: auto; top: 0; bottom: 0; width: var(--s-btn-border); height: auto; }
    .qh-recovery__line li { padding-top: 0; }
    .qh-recovery__line li::before { left: calc(var(--s-space-l) * -1); top: var(--s-space-2xs); }
    .qh-whenbook { grid-template-columns: 1fr; padding: var(--s-space-l); }

    .qh-reg { grid-template-columns: var(--s-space-l) var(--s-glyph) 1fr; column-gap: var(--s-space-s); row-gap: var(--s-space-2xs); }
    .qh-register__head { grid-template-columns: 1fr; align-items: start; }
    .qh-register__intro { padding-bottom: 0; }
    .qh-locator__sheet { height: auto; width: 100%; }
    .qh-reg__region { display: none; }
    .qh-reg__read, .qh-reg__nopage { grid-column: 3; justify-self: start; text-align: left; max-width: none; }
    .qh-locator__sheet { max-height: var(--s-locator-h-phone); width: auto; max-width: 100%; }

    .qh-visit__head, .qh-refer__head { grid-template-columns: 1fr; }
    .qh-ruler { grid-template-columns: repeat(3, 1fr); }
    .qh-steps__rail { left: calc(var(--s-gutter) + var(--s-space-2xs)); }
    .qh-step { grid-template-columns: 1fr; gap: var(--s-space-s); padding-left: var(--s-space-xl); }
    .qh-step__mark { grid-template-columns: auto 1fr; align-items: center; }
    .qh-step__icon { grid-column: 1; grid-row: 1; width: var(--s-step-icon-sm); height: var(--s-step-icon-sm); }
    .qh-step__mark .qh-step__when { grid-column: 2; grid-row: 1; }
    .qh-step__when { font-size: var(--s-size-h3); }

    .qh-book, .qh-refer { grid-template-columns: 1fr; }
    .qh-book__intro { position: static; }
    .qh-refer__preview { position: static; }
}
@media (max-width: 599px) {
    .qh-form__grid { grid-template-columns: 1fr; }
    .qh-form .qh-btn { width: calc(100% - var(--s-btn-offset)); }
    .qh-ladder__rung { margin-left: calc(var(--rung) * var(--s-space-xs)); }
}

@media (prefers-reduced-motion: reduce) {
    .qh-cond__mark { animation: none; stroke-dashoffset: 0; }
    .qh-js .qh-steps__fill { --qh-fill: 1; }
}