/* HealThyRam Wellness — mobile-first, usable at 375px (Section 22.1).
   v1.1 — staging feedback build: brand theming + energy pre-loader. */

/* v1.4.1 — values come from the HealThyRam Design System bundle
   (ht-tokens.css, generated from design-system/tokens/). Alias mapping only. */
:root {
	--ht-radius: var(--radius-default);
	--ht-radius-sm: var(--radius-control); /* v2.14.0: 4 px on controls, chips, buttons, badges (was --radius-sm 5 px) */
	--ht-ease: var(--ease-default);
}

.ht-app { max-width: 980px; margin: 0 auto; font-size: 16px; color: var(--ht-ink); font-family: var(--ht-font-body); -webkit-font-smoothing: antialiased; }

/* Type scale sits below the site header hierarchy. */
.ht-app h1, .ht-app h2, .ht-app h3 { font-family: var(--ht-font-head); letter-spacing: -.2px; line-height: 1.3; }
.ht-app h1 { font-size: var(--type-h1); }
.ht-app h2 { font-size: var(--type-h2); color: var(--ht-green-dark); }
.ht-app h3 { font-size: var(--type-h3); }

/* Subtle GPU-only entrance motion; disabled for reduced-motion users. */
@keyframes ht-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ht-card, .ht-fade { animation: ht-fade-up .42s var(--ht-ease) both; will-change: opacity, transform; }
.ht-card:nth-child(2) { animation-delay: .06s; }
.ht-card:nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
	.ht-card, .ht-fade { animation: none; }
}

/* Lab test list & chips (round-3 findings #11/#12). */
.ht-test-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ht-test-chip { background: var(--ht-green-soft); color: var(--ht-green-dark); border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); padding: 4px 10px; font-size: 13px; }
/* Test checklist in responsive columns instead of one per line (finding #12). */
.ht-biomarkers .ht-check { display: inline-block; width: 100%; margin: 3px 0; vertical-align: top; box-sizing: border-box; padding-right: 12px; }
@media (min-width: 560px)  { .ht-biomarkers .ht-check { width: 49%; } }
@media (min-width: 900px)  { .ht-biomarkers .ht-check { width: 32%; } }

.ht-tnc { margin: 10px 0; }
.ht-tnc summary { color: var(--ht-green-dark); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ht-req { color: #C62828; font-style: normal; }
.ht-concern-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 1px solid var(--ht-line); padding: 8px 0; }
.ht-status-tags label { margin-left: 10px; font-size: 13px; }
.ht-intake-view dt { font-weight: 700; text-transform: capitalize; margin-top: 8px; }
.ht-intake-view dd { margin: 2px 0 0; color: #444; }
.qori-note-row { border-bottom: 1px solid #eee; padding: 8px 0; }
.qori-note-text { background: #fbfdfb; border-radius: 5px; padding: 8px 10px; margin: 6px 0 0; }
.ht-field-missing textarea, .ht-field-missing input { border-color: #C62828 !important; background: #fff7f6; }

/* Energy pre-loader — concentric pulsing circles (logo motif). Applies to
   every .ht-loading element automatically. */
.ht-loading { position: relative; text-align: center; color: var(--ht-muted); padding: 96px 0 28px; font-size: 14px; }
.ht-loading::before, .ht-loading::after { content: ''; position: absolute; left: 50%; top: 34px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--ht-green); opacity: 0; animation: ht-energy 2.1s cubic-bezier(.22,.61,.36,1) infinite; }
.ht-loading::after { border-color: var(--ht-orange); animation-delay: .8s; }
@keyframes ht-energy {
	0%   { transform: scale(.4); opacity: 0; }
	15%  { opacity: .85; }
	100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ht-loading::before, .ht-loading::after { animation: none; opacity: .5; transform: scale(1.6); }
}

.ht-header { display: flex; justify-content: space-between; align-items: center; }
.ht-header h1 { color: var(--ht-green); }
.ht-bell { position: relative; font-size: 22px; cursor: default; }
.ht-bell-count { position: absolute; top: -6px; right: -10px; background: #D32F2F; color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 6px; }

.ht-card { background: #fff; border: 1px solid var(--ht-line); border-radius: var(--ht-radius); padding: 20px; margin: 0 0 24px; box-shadow: var(--shadow-card); }
/* July-18: section titles were reading too small next to the page H1 — promote
   card headings to the H1 scale (26px, Roboto Slab, accent-dark). */
.ht-card h2 { color: var(--ht-green-dark); font-family: var(--ht-font-display, 'Roboto Slab', serif); font-size: 26px; line-height: 1.25; margin-top: 0; }
.ht-card h3 { color: var(--ht-green); font-size: 19px; margin-bottom: 6px; }

.ht-loading { text-align: center; color: #777; padding: 30px 0; }
.ht-muted { color: #999; }
.ht-error-text { color: #B71C1C; }

.ht-message { background: var(--ht-green-soft); border-left: 4px solid var(--ht-green); padding: 10px 14px; border-radius: 6px; margin: 8px 0; }
.ht-message.ht-error { border-left-color: #D32F2F; color: #B71C1C; }
.ht-prompt { background: var(--ht-orange-soft); border-left: 4px solid var(--ht-orange); padding: 12px 16px; border-radius: 6px; margin: 12px 0; }

.ht-tabs, .ht-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0; padding: 4px; background: var(--ht-green-soft); border-radius: var(--ht-radius); width: fit-content; max-width: 100%; }
.ht-tabs button, .ht-subtabs button { border: 0; background: transparent; color: var(--ht-green-dark); border-radius: var(--ht-radius-sm); padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: var(--ht-font-body); transition: background .18s var(--ht-ease), color .18s, box-shadow .18s; }
.ht-tabs button:hover, .ht-subtabs button:hover { background: rgba(255,255,255,.75); }
.ht-tabs button.active, .ht-subtabs button.active { background: var(--ht-green); color: #fff; box-shadow: 0 2px 6px rgba(101,154,65,.3); }
.ht-tabs button:focus-visible, .ht-subtabs button:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 1px; }

.ht-btn { border: 0; border-radius: var(--ht-radius-sm); padding: 11px 20px; cursor: pointer; background: #f2f5ef; color: var(--ht-ink); font-size: 14px; font-weight: 600; font-family: var(--ht-font-body); text-decoration: none; display: inline-block; transition: transform .16s var(--ht-ease), box-shadow .16s var(--ht-ease), background .16s; }
.ht-btn:active { transform: translateY(1px); }
.ht-btn:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 2px; }
.ht-btn-primary { background: var(--ht-green); color: #fff; box-shadow: 0 2px 8px rgba(101,154,65,.28); }
.ht-btn-primary:hover { background: var(--ht-green-dark); box-shadow: 0 4px 12px rgba(101,154,65,.34); }
.ht-btn-sm { padding: 5px 12px; font-size: 13px; border: 1px solid var(--ht-green); background: #fff; color: var(--ht-green-dark); }
.ht-btn-sm:hover { background: var(--ht-green); color: #fff; }
.ht-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.ht-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
.ht-table th, .ht-table td { border: 1px solid #eee; padding: 8px 10px; text-align: left; vertical-align: top; }
.ht-table th { background: var(--ht-green-soft); color: var(--ht-green); }
.ht-table input, .ht-table select { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; padding: 4px 6px; }
.ht-table tr.ht-flag { background: #fff8e6; }

.ht-upload-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ht-upload-row input[type="text"], .ht-upload-row input[type="date"] { padding: 8px; border: 1px solid #ccc; border-radius: 6px; }

.ht-product-card, .ht-content-card { border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.ht-product-card span { display: block; color: #777; font-size: 13px; margin: 4px 0; }
.ht-content-card em { color: #999; font-size: 12px; }
.ht-mandala-img { max-width: 220px; border-radius: 8px; margin-top: 8px; }

.ht-notification { border-bottom: 1px solid #eee; padding: 10px 4px; }
.ht-notification.unread { background: var(--ht-green-soft); font-weight: 600; }
.ht-notification small { display: block; color: #999; font-weight: 400; }

.ht-consent-text { background: #faf9fd; border: 1px solid var(--ht-line); border-radius: 8px; padding: 14px; font-size: 14px; max-height: 240px; overflow-y: auto; margin: 12px 0; }
.ht-check { display: block; margin: 8px 0; }
.ht-intake-field { display: block; margin: 10px 0; }
.ht-intake-field textarea, .ht-intake-field input, #ht-tabnote { width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; padding: 8px; }

.ht-field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ht-field-row label { display: flex; flex-direction: column; font-size: 13px; gap: 4px; flex: 1 1 200px; }
.ht-field-row input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; }

.ht-biomarkers details { border: 1px solid #eee; border-radius: 8px; margin: 6px 0; padding: 8px 12px; }
.ht-biomarkers summary { color: var(--ht-green); font-weight: 600; cursor: pointer; text-transform: capitalize; }

.ht-intake pre { background: #faf9fd; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.ht-plan-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- July-18 (v1.6.0) ------------------------------------------------- */

/* Labelled two-column upload forms (labs + documents). */
.ht-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 0; }
.ht-upload-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ht-ink); }
.ht-upload-grid input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-weight: 400; }
.ht-upload-grid .ht-span-2 { grid-column: 1 / -1; }
.ht-info-note { font-size: 13px; margin-top: 2px; }

/* Row action icons (rename / replace / delete). */
.ht-icon-btn { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 3px 5px; border-radius: var(--ht-radius-sm); transition: background .16s var(--ht-ease); }
.ht-icon-btn:hover { background: var(--ht-green-soft); }
.ht-icon-btn:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 1px; }
.ht-row-actions { white-space: nowrap; }

/* External-product marker in the recommendations table. */
.ht-chip-external { display: inline-block; background: var(--ht-orange-soft); color: #8a5410; border-radius: var(--radius-control); padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: help; }

/* Store search dropdown in the plan builder. */
.ht-prod-search { position: relative; margin: 8px 0 12px; max-width: 420px; }
.ht-prod-search label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.ht-prod-search input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-weight: 400; }
.ht-search-results { position: absolute; z-index: 30; left: 0; right: 0; background: #fff; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); box-shadow: 0 4px 14px rgba(26,26,46,.12); max-height: 260px; overflow-y: auto; padding: 4px; }
.ht-search-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.ht-search-item:hover { background: var(--ht-green-soft); }
.ht-search-item small { color: #999; margin-left: 6px; }

/* Wide tables stay usable on small screens: scroll wrapper on tablets,
   stacked card rows on phones (uses the data-th cell labels). */
.ht-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 480px) {
	.ht-upload-row, .ht-plan-actions { flex-direction: column; align-items: stretch; }
	.ht-btn { width: 100%; box-sizing: border-box; text-align: center; }
	.ht-table { display: block; overflow-x: auto; }
	.ht-upload-grid { grid-template-columns: 1fr; }
	.ht-icon-btn { font-size: 18px; padding: 6px 8px; }

	/* Card layout for consultation/report tables. */
	.ht-table-cards, .ht-table-cards tbody, .ht-table-cards tr, .ht-table-cards td { display: block; width: 100%; box-sizing: border-box; }
	.ht-table-cards thead { display: none; }
	.ht-table-cards tr { border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); margin: 0 0 10px; padding: 6px 0; background: #fff; }
	.ht-table-cards td { border: 0; border-bottom: 1px solid #f2f2f2; padding: 6px 12px; }
	.ht-table-cards td:last-child { border-bottom: 0; }
	.ht-table-cards td[data-th]::before { content: attr(data-th); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ht-green-dark); margin-bottom: 2px; }

	/* Add Note / textareas fill the viewport width (July-18). */
	.ht-card textarea, .ht-intake-field textarea, #ht-tabnote { width: 100%; box-sizing: border-box; }
}

/* ---- July-22 (v1.7.1) -------------------------------------------------- */
/* Buttons: text vertically centred, consistent height (July-22 finding). */
.ht-btn, .ht-btn-sm { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
.ht-btn { min-height: 40px; } .ht-btn-sm { min-height: 30px; }
/* Notification panel: scrollable after the first 10. */
#ht-pr-notif, .ht-notif-list { max-height: 430px; overflow-y: auto; }
/* v2.7.3 (team finding): the Wellness Seekers list stays compact and scrolls inside;
   the header row stays visible; the opened record is scrolled into view by JS. */
.ht-patient-list { max-height: 460px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); margin: 10px 0; }
.ht-patient-list .ht-table { margin: 0; }
.ht-patient-list .ht-table th { position: sticky; top: 0; z-index: 1; }
#ht-detail { scroll-margin-top: 16px; }

/* v2.6.0: deep-linked consultation row (#consultation-{id}) — token-only, respects reduced motion. */
.ht-row-highlight { background: var(--ht-green-soft); box-shadow: inset 3px 0 0 var(--ht-green-dark); }

/* v2.7.4 — Health Intake v2: MCQs and checklists as selectable chips (green-tinted per the Chip pattern). */
.ht-intake-field .ht-field-label { display: block; font-weight: 600; margin: 0 0 4px; }
.ht-intake-field .ht-hint { display: block; color: var(--ht-muted); font-size: 12.5px; margin: 0 0 6px; }
.ht-section-intro { margin: -4px 0 8px !important; font-size: 13.5px; }
/* v2.7.6 — team finding 12 Oct: the chips "spread randomly" on phones and desktop. One grid per question: equal-width option
   cards, one column on phones, two to three on desktop; a two-option list (Yes/No) sits side by side everywhere. */
.ht-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; margin: 4px 0 2px; }
.ht-choices:has(> .ht-choice:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-choice { display: flex; align-items: flex-start; gap: 8px; width: 100%; box-sizing: border-box; margin: 0; padding: 9px 12px; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); background: #fff; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; transition: background var(--duration-fast, .15s) var(--ht-ease, ease), border-color var(--duration-fast, .15s) var(--ht-ease, ease); }
.ht-choice input { flex: 0 0 auto; width: auto; margin: 2px 0 0; accent-color: var(--ht-green-dark); }
.ht-choice span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) { .ht-choices { grid-template-columns: 1fr; } .ht-choices:has(> .ht-choice:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ht-choice:hover { border-color: var(--ht-green); }
.ht-choice:has(input:checked) { background: var(--ht-green-soft); border-color: var(--ht-green-dark); color: var(--ht-green-dark); font-weight: 600; }
.ht-choice:has(input:focus-visible) { outline: 2px solid var(--ht-green-bright); outline-offset: 2px; }
.ht-intake-field .ht-other, .ht-intake-field .ht-detail { display: block; margin: 8px 0 0; }
.ht-intake-field .ht-detail textarea, .ht-intake-field .ht-other { width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: var(--ht-radius-sm); padding: 8px; }
.ht-intake-field[hidden], .ht-other[hidden], .ht-detail[hidden] { display: none !important; }
.ht-field-missing { border-left: 3px solid var(--ht-error-border); padding-left: 10px; }
.ht-chip { display: inline-block; background: var(--ht-green-soft); color: var(--ht-green-dark); border: 1px solid var(--ht-line); border-radius: var(--radius-control); padding: 2px 10px; font-size: 12.5px; font-weight: 600; margin: 2px 4px 2px 0; }
@media (prefers-reduced-motion: reduce) { .ht-choice { transition: none; } }

/* ── v2.9.0 Functional lab report (.ht-fl-*) — tokens only; one zone colour language; desktop rows, phone cards ── */
.ht-fl { --fl-crit: var(--ht-error-dark); --fl-lab: var(--ht-error); --fl-opt: var(--ht-orange); --fl-ok: var(--ht-green); --fl-okl: var(--ht-green-dark); --fl-none: var(--ht-muted);
	--fl-crit-bg: color-mix(in srgb, var(--ht-error-dark) 12%, var(--ht-white)); --fl-lab-bg: color-mix(in srgb, var(--ht-error) 11%, var(--ht-white)); --fl-opt-bg: var(--ht-orange-soft); --fl-ok-bg: var(--ht-green-soft); --fl-okl-bg: color-mix(in srgb, var(--ht-green) 7%, var(--ht-white)); --fl-none-bg: color-mix(in srgb, var(--ht-ink) 5%, var(--ht-white));
	--fl-labband: color-mix(in srgb, var(--dataviz-band-high) 26%, var(--ht-white)); --fl-optband: var(--dataviz-band-good); }
.ht-fl .ht-fl-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ht-fl .ht-fl-head h2 { margin: 0 0 var(--space-1); }
.ht-fl .ht-fl-who { font-family: var(--ht-font-head); font-size: var(--text-h2-size); color: var(--ht-ink); margin: 0 0 var(--space-1); }
.ht-fl .ht-fl-sub { color: var(--ht-muted); font-size: var(--text-small-size); margin: 0; line-height: 1.5; }
.ht-fl .ht-fl-meta { color: var(--ht-muted); font-size: var(--text-micro-size); font-weight: 400; }
.ht-fl .ht-fl-back { border: 0; background: transparent; color: var(--ht-green-dark); font-weight: 600; font-size: var(--text-small-size); padding: 0; cursor: pointer; margin-bottom: var(--space-2); }
.ht-fl .ht-fl-back:hover { text-decoration: underline; }
.ht-fl-head__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ht-fl-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-control); font-size: var(--text-micro-size); font-weight: 700; letter-spacing: .2px; text-transform: capitalize; background: var(--fl-none-bg); color: var(--ht-ink); border: 1px solid var(--ht-line); }
.ht-fl-pill--shadow { background: var(--ht-orange-soft); border-color: var(--ht-orange); color: var(--ht-ink); text-transform: none; }
.ht-fl-pill--received { background: var(--fl-okl-bg); color: var(--ht-green-dark); border-color: var(--ht-green); }
.ht-fl-pill--reviewed { background: var(--ht-green-soft); color: var(--ht-green-dark); border-color: var(--ht-green); }
.ht-fl-pill--released, .ht-fl-pill--ok { background: var(--ht-green); color: var(--ht-white); border-color: var(--ht-green); }
.ht-fl-pill--bad { background: var(--fl-lab); color: var(--ht-white); border-color: var(--fl-lab); }
.ht-fl-msg { padding: var(--space-3) var(--space-4); border-radius: var(--ht-radius-sm); margin: 0 0 var(--space-3); font-size: var(--text-small-size); border: 1px solid var(--ht-line); }
.ht-fl-msg--ok { background: var(--ht-green-soft); border-color: var(--ht-green); color: var(--ht-green-dark); }
.ht-fl-msg--error { background: var(--fl-lab-bg); border-color: var(--ht-error-border); color: var(--ht-error-dark); }
.ht-fl-banner { padding: var(--space-3) var(--space-4); border-radius: var(--ht-radius-sm); margin: 0 0 var(--space-4); border: 1px solid var(--ht-line); background: var(--ht-green-soft); line-height: 1.5; }
.ht-fl-banner--critical { background: var(--fl-crit-bg); border-color: var(--ht-error-border); color: var(--ht-ink); }
.ht-fl-banner--confirm { background: var(--ht-orange-soft); border-color: var(--ht-orange); }
.ht-fl-empty { padding: var(--space-6); text-align: center; color: var(--ht-muted); background: var(--ht-bg); border-radius: var(--ht-radius); }

/* queue */
.ht-fl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ht-fl-item { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--ht-line); border-radius: var(--ht-radius); background: var(--ht-white); cursor: pointer; transition: box-shadow var(--duration-medium) var(--ease-default), transform var(--duration-medium) var(--ease-default); }
.ht-fl-item:hover, .ht-fl-item:focus-visible { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); outline: none; border-color: var(--ht-green); }
.ht-fl-item__who strong { font-size: var(--text-body-size); }
.ht-fl-item__when { display: grid; gap: 2px; font-size: var(--text-small-size); }
.ht-fl-item__flags { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.ht-fl-item__status { display: flex; align-items: center; gap: var(--space-2); }
.ht-fl-chev { color: var(--ht-muted); font-size: 22px; line-height: 1; }

/* person & sample */
.ht-fl-person { border: 1px solid var(--ht-line); border-radius: var(--ht-radius); padding: var(--space-4); margin: var(--space-4) 0; background: var(--ht-bg); }
.ht-fl-person__head h3 { margin: 0 0 var(--space-1); color: var(--ht-ink); }
.ht-fl-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.ht-fl-field { display: grid; gap: 4px; min-width: 0; }
.ht-fl-field label { font-size: var(--text-micro-size); font-weight: 700; color: var(--ht-muted); text-transform: uppercase; letter-spacing: .4px; }
.ht-fl-field select, .ht-fl-field input { width: 100%; min-height: 40px; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); padding: 6px 10px; font: inherit; font-size: var(--text-small-size); background: var(--ht-white); color: var(--ht-ink); }
.ht-fl-field select:focus-visible, .ht-fl-field input:focus-visible, .ht-fl-notes textarea:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 1px; border-color: var(--ht-green); }
.ht-fl-field .ht-fl-static { min-height: 40px; display: flex; align-items: center; font-weight: 600; }
.ht-fl-field .ht-fl-src { color: var(--ht-muted); font-size: var(--text-micro-size); line-height: 1.35; }
.ht-fl-field--confirm select { border-color: var(--ht-orange); box-shadow: 0 0 0 3px var(--ht-orange-soft); }
.ht-fl-assume { margin: var(--space-3) 0 0; padding: 0 0 0 1.1em; color: var(--ht-ink); font-size: var(--text-small-size); line-height: 1.5; }
.ht-fl-person__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* tiles + legend + filters */
.ht-fl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
.ht-fl-tile { border: 1px solid var(--ht-line); border-radius: var(--ht-radius); padding: var(--space-3) var(--space-4); background: var(--ht-white); display: grid; gap: 2px; border-top: 3px solid var(--ht-line); }
.ht-fl-tile b { font-family: var(--ht-font-head); font-size: 28px; line-height: 1.1; color: var(--ht-ink); font-variant-numeric: tabular-nums; }
.ht-fl-tile span { font-size: var(--text-micro-size); color: var(--ht-muted); line-height: 1.35; }
.ht-fl-tile--ok { border-top-color: var(--fl-ok); } .ht-fl-tile--opt { border-top-color: var(--fl-opt); } .ht-fl-tile--lab { border-top-color: var(--fl-lab); } .ht-fl-tile--crit { border-top-color: var(--fl-crit); background: var(--fl-crit-bg); }
.ht-fl-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-micro-size); color: var(--ht-muted); margin: 0 0 var(--space-3); }
.ht-fl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ht-fl-sw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.ht-fl-sw--labband { background: var(--fl-labband); } .ht-fl-sw--optband { background: var(--fl-optband); } .ht-fl-sw--ok { background: var(--fl-ok); } .ht-fl-sw--opt { background: var(--fl-opt); } .ht-fl-sw--lab { background: var(--fl-lab); } .ht-fl-sw--crit { background: var(--fl-crit); }
.ht-fl-filters { display: flex; gap: var(--space-1); flex-wrap: wrap; padding: 4px; background: var(--ht-green-soft); border-radius: var(--ht-radius); width: fit-content; max-width: 100%; margin: 0 0 var(--space-4); }
.ht-fl-filter { border: 0; background: transparent; color: var(--ht-green-dark); border-radius: var(--ht-radius-sm); padding: 7px 12px; cursor: pointer; font: inherit; font-size: var(--text-small-size); font-weight: 600; }
.ht-fl-filter.active { background: var(--ht-green); color: var(--ht-white); box-shadow: var(--shadow-active); }
.ht-fl-filter:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 1px; }

/* groups + rows */
.ht-fl-group { border: 1px solid var(--ht-line); border-radius: var(--ht-radius); margin: 0 0 var(--space-3); background: var(--ht-white); overflow: hidden; }
.ht-fl-group > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 120px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--ht-bg); font-family: var(--ht-font-head); font-size: var(--text-h3-size); color: var(--ht-ink); }
.ht-fl-group > summary::-webkit-details-marker { display: none; }
.ht-fl-group__name::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform var(--duration-medium) var(--ease-default); color: var(--ht-muted); }
.ht-fl-group[open] > summary .ht-fl-group__name::before { transform: rotate(90deg); }
.ht-fl-group__count { font-family: var(--ht-font-body); font-size: var(--text-small-size); color: var(--ht-muted); font-weight: 600; white-space: nowrap; }
.ht-fl-group__mini { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--ht-line); }
.ht-fl-mini { display: block; height: 100%; }
.ht-fl-mini--crit { background: var(--fl-crit); } .ht-fl-mini--lab { background: var(--fl-lab); } .ht-fl-mini--opt { background: var(--fl-opt); } .ht-fl-mini--ok { background: var(--fl-ok); } .ht-fl-mini--okl { background: var(--ht-green-bright); } .ht-fl-mini--none { background: var(--fl-none); }
.ht-fl-rows { display: grid; }
.ht-fl-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) 120px 150px minmax(220px, 1.6fr); grid-template-areas: 'name value zone bar' 'source source source source'; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--ht-line); border-left: 4px solid transparent; align-items: start; }
.ht-fl-row[hidden] { display: none; }
.ht-fl-row--crit { border-left-color: var(--fl-crit); background: var(--fl-crit-bg); } .ht-fl-row--lab { border-left-color: var(--fl-lab); } .ht-fl-row--opt { border-left-color: var(--fl-opt); } .ht-fl-row--ok { border-left-color: var(--fl-ok); } .ht-fl-row--okl { border-left-color: var(--ht-green-bright); }
.ht-fl-row__name { grid-area: name; min-width: 0; }
.ht-fl-row__name h4 { margin: 0; font-family: var(--ht-font-body); font-size: var(--text-body-size); font-weight: 700; color: var(--ht-ink); line-height: 1.3; }
.ht-fl-note { margin: 4px 0 0; font-size: var(--text-micro-size); color: var(--ht-muted); line-height: 1.4; }
.ht-fl-row__value { grid-area: value; display: grid; gap: 1px; }
.ht-fl-row__value b { font-family: var(--ht-font-head); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ht-ink); }
.ht-fl-row__value span { font-size: var(--text-micro-size); color: var(--ht-muted); }
.ht-fl-row__value small { font-size: var(--text-micro-size); color: var(--ht-muted); }
.ht-fl-row__value abbr { text-decoration: none; border-bottom: 1px dotted var(--ht-muted); cursor: help; }
.ht-fl-row__zone { grid-area: zone; display: grid; gap: 6px; justify-items: start; }
.ht-fl-chip { display: inline-block; padding: 4px 11px; border-radius: var(--radius-control); font-size: var(--text-micro-size); font-weight: 700; line-height: 1.4; border: 1px solid; white-space: nowrap; }
.ht-fl-chip--crit { background: var(--fl-crit); border-color: var(--fl-crit); color: var(--ht-white); }
.ht-fl-chip--lab { background: var(--fl-lab-bg); border-color: var(--fl-lab); color: var(--ht-error-dark); }
.ht-fl-chip--opt { background: var(--fl-opt-bg); border-color: var(--fl-opt); color: var(--ht-ink); }
.ht-fl-chip--ok { background: var(--fl-ok-bg); border-color: var(--fl-ok); color: var(--ht-green-dark); }
.ht-fl-chip--okl { background: var(--fl-okl-bg); border-color: var(--ht-green-bright); color: var(--ht-green-dark); }
.ht-fl-chip--none { background: var(--fl-none-bg); border-color: var(--ht-line); color: var(--ht-muted); }
.ht-fl-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.ht-fl-flag { display: inline-block; font-size: var(--text-micro-size); padding: 1px 7px; border-radius: 4px; border: 1px solid var(--ht-line); color: var(--ht-muted); background: var(--ht-white); }
.ht-fl-flag--critical { border-color: var(--fl-crit); color: var(--fl-crit); font-weight: 700; }
.ht-fl-flag--referral { border-color: var(--fl-lab); color: var(--ht-error-dark); font-weight: 700; }
.ht-fl-flag--attention { border-color: var(--fl-opt); color: var(--ht-ink); font-weight: 600; }
.ht-fl-row__bar { grid-area: bar; min-width: 0; }
.ht-fl-bar { position: relative; padding-bottom: 16px; }
.ht-fl-bar--empty { height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--ht-line) 0 6px, transparent 6px 10px); padding: 0; margin: 10px 0; }
.ht-fl-bar__track { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ht-ink) 7%, var(--ht-white)); }
.ht-fl-bar__lab { position: absolute; top: 0; bottom: 0; background: var(--fl-labband); border-radius: 5px; }
.ht-fl-bar__opt { position: absolute; top: 2px; bottom: 2px; background: var(--fl-optband); border-radius: 3px; }
.ht-fl-bar__val { position: absolute; top: -4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--ht-ink); border: 3px solid var(--ht-white); box-shadow: 0 1px 4px rgba(26, 26, 46, .25); }
.ht-fl-bar__val--crit { background: var(--fl-crit); } .ht-fl-bar__val--lab { background: var(--fl-lab); } .ht-fl-bar__val--opt { background: var(--fl-opt); } .ht-fl-bar__val--ok { background: var(--fl-ok); } .ht-fl-bar__val--okl { background: var(--ht-green-dark); }
.ht-fl-bar__ticks { position: relative; height: 14px; }
.ht-fl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--ht-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-fl-tick i { display: block; width: 1px; height: 4px; margin: 0 auto 1px; background: var(--ht-muted); }
.ht-fl-tick--opt { color: var(--ht-green-dark); font-weight: 700; } .ht-fl-tick--opt i { background: var(--ht-green-dark); }
.ht-fl-row__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-micro-size); color: var(--ht-muted); margin-top: 2px; }
.ht-fl-prompts { margin: 6px 0 0; padding: 0 0 0 1.1em; font-size: var(--text-micro-size); color: var(--ht-ink); line-height: 1.45; }
.ht-fl-row__source { grid-area: source; font-size: var(--text-micro-size); color: var(--ht-muted); }
.ht-fl-row__source summary { cursor: pointer; color: var(--ht-green-dark); font-weight: 600; width: fit-content; }
.ht-fl-row__source dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; }
.ht-fl-row__source dt { font-weight: 600; } .ht-fl-row__source dd { margin: 0; color: var(--ht-ink); }

/* reconciliation, notes, actions */
.ht-fl-recon { margin: var(--space-2) 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--ht-line); border-radius: var(--ht-radius); font-size: var(--text-small-size); line-height: 1.5; }
.ht-fl-recon--bad { border-color: var(--ht-error-border); background: var(--fl-lab-bg); }
.ht-fl-recon summary { cursor: pointer; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ht-fl-notes textarea { width: 100%; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); padding: 10px 12px; font: inherit; font-size: var(--text-small-size); min-height: 84px; }
.ht-fl-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: var(--space-3) 0; }
.ht-fl-why { font-size: var(--text-micro-size); color: var(--ht-muted); margin: var(--space-2) 0 0; line-height: 1.5; }
.ht-fl-foot { margin: var(--space-3) 0 0; line-height: 1.5; }

/* phones */
@media (max-width: 760px) {
	.ht-fl .ht-fl-head { flex-direction: column; }
	.ht-fl-item { grid-template-columns: 1fr auto; grid-template-areas: 'who status' 'when status' 'flags status'; }
	.ht-fl-item__who { grid-area: who; } .ht-fl-item__when { grid-area: when; } .ht-fl-item__flags { grid-area: flags; } .ht-fl-item__status { grid-area: status; flex-direction: column; align-items: flex-end; }
	.ht-fl-tiles { grid-template-columns: 1fr 1fr; }
	.ht-fl-group > summary { grid-template-columns: 1fr auto; }
	.ht-fl-group__mini { grid-column: 1 / -1; }
	.ht-fl-row { grid-template-columns: 1fr auto; grid-template-areas: 'name value' 'zone zone' 'bar bar' 'source source'; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
	.ht-fl-row__value { text-align: right; justify-items: end; }
	.ht-fl-tick b { display: none; }
	.ht-fl-bar { padding-bottom: 8px; } .ht-fl-bar__ticks { height: 6px; }
	.ht-fl-actions { position: sticky; bottom: 0; background: var(--ht-white); padding: var(--space-2) 0; border-top: 1px solid var(--ht-line); z-index: 2; flex-wrap: nowrap; }
	.ht-fl-actions .ht-btn { flex: 1 1 0; padding: 11px 8px; text-align: center; white-space: nowrap; }
	.ht-fl-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-3); }
	.ht-fl-field--wide { grid-column: 1 / -1; }
	.ht-fl-field label { font-size: 10px; letter-spacing: .3px; }
	.ht-fl-filters { overflow-x: auto; flex-wrap: nowrap; width: 100%; -webkit-overflow-scrolling: touch; }
	.ht-fl-filter { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ht-fl-item, .ht-fl-group__name::before { transition: none; } }
@media print { .ht-fl-actions, .ht-fl-filters, .ht-fl-back, .ht-fl-person__actions, #ht-fl-nav { display: none !important; } .ht-fl-group { break-inside: avoid; } .ht-fl-row { break-inside: avoid; } .ht-fl-group:not([open]) > .ht-fl-rows { display: block; } }

/* ── v2.11.0 Functional lab report — interpretation layer (practitioner only; tokens only) ── */
.ht-fl-interp { border: 1px solid var(--ht-green); border-radius: var(--ht-radius); padding: var(--space-4); margin: 0 0 var(--space-4); background: var(--ht-white); }
.ht-fl-interp__head h3 { margin: 0 0 var(--space-1); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ht-fl-interp__none { margin: var(--space-2) 0 0; color: var(--ht-muted); font-size: var(--text-small-size); }
.ht-fl-pats { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.ht-fl-pat { border: 1px solid var(--ht-line); border-left: 4px solid var(--ht-line); border-radius: var(--ht-radius-sm); background: var(--ht-bg); }
.ht-fl-pat--strong { border-left-color: var(--fl-ok); } .ht-fl-pat--moderate { border-left-color: var(--fl-opt); } .ht-fl-pat--possible { border-left-color: var(--ht-line); }
.ht-fl-pat > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'sys tags' 'name tags'; gap: 2px var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); }
.ht-fl-pat > summary::-webkit-details-marker { display: none; }
.ht-fl-pat__sys { grid-area: sys; font-size: var(--text-micro-size); color: var(--ht-muted); text-transform: uppercase; letter-spacing: .4px; }
.ht-fl-pat__name { grid-area: name; font-family: var(--ht-font-head); font-size: var(--text-h3-size); color: var(--ht-ink); }
.ht-fl-pat__tags { grid-area: tags; display: flex; gap: var(--space-1); align-items: center; }
.ht-fl-pat__body { padding: 0 var(--space-3) var(--space-3); font-size: var(--text-small-size); line-height: 1.5; color: var(--ht-ink); }
.ht-fl-pat__body h5, .ht-fl-card h5 { margin: var(--space-2) 0 2px; font-size: var(--text-micro-size); text-transform: uppercase; letter-spacing: .4px; color: var(--ht-green-dark); }
.ht-fl-pat__body ul, .ht-fl-card ul { margin: 0; padding: 0 0 0 1.1em; }
.ht-fl-pat__body p, .ht-fl-card p { margin: 0 0 var(--space-1); }
.ht-fl-pat__cw { font-weight: 600; }
.ht-fl-pat__mk { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.ht-fl-mk { display: inline-block; padding: 2px 8px; border-radius: var(--radius-control); background: var(--ht-white); border: 1px solid var(--ht-line); font-size: var(--text-micro-size); white-space: nowrap; }
.ht-fl-mk i { font-style: normal; color: var(--ht-muted); }
.ht-fl-grade { display: inline-block; min-width: 1.6em; text-align: center; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ht-line); font-size: var(--text-micro-size); font-weight: 700; text-decoration: none; cursor: help; color: var(--ht-ink); background: var(--ht-white); }
.ht-fl-grade--A { border-color: var(--ht-green-dark); color: var(--ht-green-dark); } .ht-fl-grade--B { border-color: var(--ht-green); } .ht-fl-grade--C { color: var(--ht-muted); border-style: dashed; }
.ht-fl-row__card { grid-area: card; font-size: var(--text-micro-size); color: var(--ht-muted); }
.ht-fl-row__card summary { cursor: pointer; color: var(--ht-green-dark); font-weight: 600; width: fit-content; }
.ht-fl-card { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); background: var(--ht-bg); color: var(--ht-ink); font-size: var(--text-small-size); line-height: 1.5; }
.ht-fl-card__origin { color: var(--ht-ink); }
.ht-fl-row { grid-template-areas: 'name value zone bar' 'card card card card' 'source source source source'; }
@media (max-width: 760px) {
	.ht-fl-row { grid-template-areas: 'name value' 'zone zone' 'bar bar' 'card card' 'source source'; }
	.ht-fl-pat > summary { grid-template-columns: 1fr; grid-template-areas: 'sys' 'name' 'tags'; }
}
@media print { .ht-fl-pat, .ht-fl-row__card { break-inside: avoid; } }

/* ── v2.11.1 Functional lab report — busy states on action buttons (UX standard §8.3; tokens only) ── */
.ht-btn[aria-busy="true"], .ht-btn--busy { cursor: progress; opacity: .85; }
.ht-spin { display: inline-block; width: .9em; height: .9em; margin-right: var(--space-1); vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ht-spin .8s linear infinite; }
@keyframes ht-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ht-spin { animation: none; border-right-color: currentColor; opacity: .5; } }

/* ── v2.12.0 Practitioner portal UX pass (docs/WELLNESS-PLAN-ENGINE-BRIEF.md §8) — tokens only; phone layout kept ── */
/* help layer: one floating tooltip for every [data-help] (ht-ui.js) */
/* v2.15.0: the tooltip card (.ht-tip, .ht-i) lives in the shared kit, assets/css/ht-kit.css (UX round 2, A12). */
.ht-app [data-help]:not(button):not(a):not(summary):not(label):not(input):not(select):not([role="button"]):not(.ht-fl-field):not(.ht-fl-notes) { cursor: help; }
.ht-app summary [data-help], .ht-app button [data-help] { cursor: inherit; }
.ht-app [data-help][tabindex="0"]:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 2px; border-radius: var(--ht-radius-sm); }
.ht-help-panel { margin: var(--space-3) 0 0; border-top: 1px solid var(--ht-line); padding-top: var(--space-2); font-size: var(--text-small-size); }
.ht-help-panel__toggle { cursor: pointer; color: var(--ht-green-dark); font-weight: 600; width: fit-content; }
.ht-help-panel__list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; color: var(--ht-ink); line-height: 1.45; }
.ht-help-panel__list dt { font-weight: 700; } .ht-help-panel__list dd { margin: 0; color: var(--ht-muted); }
/* feedback on every action: toasts, progress line, skeleton rows */
.ht-toasts { position: fixed; left: 50%; bottom: var(--space-4); transform: translateX(-50%); display: grid; gap: var(--space-2); z-index: 99997; width: min(92vw, 440px); pointer-events: none; }
.ht-toast { pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--ht-radius); background: var(--ht-ink); color: var(--ht-white); font-family: var(--ht-font-body); font-size: var(--text-small-size); line-height: 1.45; box-shadow: var(--shadow-card-hover); border-left: 4px solid var(--ht-green); animation: ht-toast-in var(--duration-entrance) var(--ease-default) both; cursor: pointer; }
.ht-toast--error { border-left-color: var(--ht-error); }
.ht-toast--out { opacity: 0; transition: opacity var(--duration-medium) var(--ease-default); }
@keyframes ht-toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
.ht-progress { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--text-small-size); color: var(--ht-green-dark); }
.ht-progress__bar { display: block; position: relative; height: var(--space-1); border-radius: var(--space-1); background: var(--ht-green-soft); overflow: hidden; }
.ht-progress__bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: var(--space-1); background: var(--ht-green); animation: ht-progress 1.2s var(--ease-default) infinite; }
@keyframes ht-progress { to { left: 100%; } }
.ht-skel { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.ht-skel__row { display: flex; gap: var(--space-3); }
.ht-skel__line { display: block; height: var(--space-3); border-radius: var(--space-2); background: linear-gradient(90deg, var(--ht-line), var(--ht-green-soft), var(--ht-line)); background-size: 200% 100%; animation: ht-shimmer 1.4s linear infinite; flex: 1 1 0; min-width: 0; }
.ht-skel__line--title { height: var(--space-4); max-width: 40%; }
@keyframes ht-shimmer { to { background-position: -200% 0; } }
.ht-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ht-fl-item--busy { opacity: .6; cursor: progress; }
/* in-app dialogs (the portal's own styles — no dependency on the QORI stylesheet) */
.ht-modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--ht-ink) 45%, transparent); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: var(--space-4); }
.ht-modal { background: var(--ht-white); color: var(--ht-ink); border-radius: var(--ht-radius); padding: var(--space-5) var(--space-6); max-width: 440px; width: 100%; box-shadow: var(--shadow-card-hover); font-family: var(--ht-font-body); font-size: var(--text-body-size); animation: ht-fade-up var(--duration-entrance) var(--ease-default) both; }
.ht-modal p { margin: 0 0 var(--space-4); line-height: 1.5; }
.ht-modal-label { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); font-weight: 600; }
.ht-modal-input { width: 100%; box-sizing: border-box; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); padding: var(--space-2) var(--space-3); font: inherit; font-weight: 400; }
.ht-modal-input:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 1px; border-color: var(--ht-green); }
.ht-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
/* badges + small utilities that replace inline styles */
.ht-badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-control); font-size: var(--text-micro-size); font-weight: 700; line-height: 1.7; border: 1px solid var(--ht-line); white-space: nowrap; }
.ht-badge--done { background: var(--ht-green-soft); color: var(--ht-green-dark); border-color: var(--ht-green); }
.ht-badge--pending { background: var(--ht-orange-soft); color: var(--ht-ink); border-color: var(--ht-orange); }
.ht-badge--engine { background: var(--surface-card); color: var(--ht-green-dark); border-color: var(--ht-green); font-weight: 600; } /* v2.16.0: intake answers the plan engine reads */
.ht-version { text-align: right; font-size: var(--text-micro-size); margin: var(--space-2) 0 0; }
.ht-bell-count--inline { position: static; margin-left: var(--space-1); }
.ht-full { width: 100%; box-sizing: border-box; }
.ht-inline-input { font-size: var(--text-small-size); padding: var(--space-1) var(--space-2); border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); }
.ht-note { font-size: var(--text-micro-size); margin: 0 0 var(--space-2); }
.ht-plan-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ht-plan-new { margin: var(--space-2) 0; }
/* density — practitioner portal only (the patient dashboard keeps its spacing) */
#ht-practitioner-portal .ht-card { padding: var(--space-4); margin: 0 0 var(--space-4); }
#ht-practitioner-portal .ht-card h2 { font-size: var(--text-h2-size); margin: 0 0 var(--space-2); }
#ht-practitioner-portal .ht-card h3 { font-size: var(--text-h3-size); margin: var(--space-4) 0 var(--space-2); }
#ht-practitioner-portal .ht-card h3:first-child { margin-top: 0; }
#ht-practitioner-portal .ht-card > p { margin: 0 0 var(--space-2); }
#ht-practitioner-portal .ht-header h1 { margin: var(--space-3) 0 var(--space-2); }
#ht-practitioner-portal .ht-tabs, #ht-practitioner-portal .ht-subtabs { margin: var(--space-3) 0; }
#ht-practitioner-portal .ht-tabs button, #ht-practitioner-portal .ht-subtabs button { padding: var(--space-2) var(--space-3); }
#ht-practitioner-portal .ht-table { margin: var(--space-2) 0; font-size: var(--text-small-size); }
#ht-practitioner-portal .ht-table th, #ht-practitioner-portal .ht-table td { padding: var(--space-1) var(--space-2); line-height: 1.35; }
#ht-practitioner-portal .ht-table input, #ht-practitioner-portal .ht-table select { padding: var(--space-1) var(--space-1); font-size: var(--text-small-size); }
#ht-practitioner-portal .ht-btn { min-height: 36px; padding: var(--space-2) var(--space-4); }
#ht-practitioner-portal .ht-btn-sm { min-height: 28px; padding: var(--space-1) var(--space-3); }
#ht-practitioner-portal .ht-message { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); }
#ht-practitioner-portal .ht-prompt { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); }
#ht-practitioner-portal .ht-plan-actions, #ht-practitioner-portal .ht-upload-row { gap: var(--space-2); margin: var(--space-2) 0; }
#ht-practitioner-portal .ht-field-row { gap: var(--space-2) var(--space-3); }
#ht-practitioner-portal .ht-patient-list { margin: var(--space-2) 0; }
#ht-practitioner-portal #ht-patient-search { width: 100%; box-sizing: border-box; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-small-size); margin: 0 0 var(--space-2); }
#ht-practitioner-portal .ht-intake-view dt { margin-top: var(--space-2); }
#ht-practitioner-portal .ht-intake { margin: var(--space-1) 0; }
#ht-practitioner-portal .ht-prod-search { margin: var(--space-2) 0; }
#ht-practitioner-portal .ht-biomarkers details { margin: var(--space-1) 0; padding: var(--space-1) var(--space-3); }
#ht-practitioner-portal .ht-check { margin: var(--space-1) 0; }
#ht-practitioner-portal #ht-detail:empty, #ht-practitioner-portal #ht-sub-detail:empty { display: none; }
/* functional report + queue: compact rows, consistent gaps, no empty bands */
.ht-fl-list { gap: var(--space-1); }
.ht-fl-item { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); }
.ht-fl .ht-fl-head { margin-bottom: var(--space-3); gap: var(--space-3); }
.ht-fl-person { padding: var(--space-3); margin: var(--space-3) 0; }
.ht-fl-fields { gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.ht-fl-field select, .ht-fl-field input, .ht-fl-field .ht-fl-static { min-height: 34px; }
.ht-fl-person__actions { margin-top: var(--space-3); }
.ht-fl-tiles { gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.ht-fl-tile { padding: var(--space-2) var(--space-3); }
.ht-fl-tile b { font-size: 24px; }
.ht-fl-legend { margin: 0 0 var(--space-2); gap: var(--space-1) var(--space-3); }
.ht-fl-sw--okl { background: var(--fl-okl); } .ht-fl-sw--none { background: var(--fl-none); }
.ht-fl-filters { margin: 0 0 var(--space-3); }
.ht-fl-interp { padding: var(--space-3); margin: 0 0 var(--space-3); }
.ht-fl-pats { gap: var(--space-1); margin-top: var(--space-2); }
.ht-fl-group { margin: 0 0 var(--space-2); }
.ht-fl-group > summary { padding: var(--space-2) var(--space-3); font-size: var(--text-body-size); }
.ht-fl-row { padding: var(--space-2) var(--space-3); gap: var(--space-1) var(--space-3); grid-template-areas: 'name value zone bar' 'card card source source'; }
.ht-fl-row__value b { font-size: 18px; }
.ht-fl-row__zone { gap: var(--space-1); }
.ht-fl-chip { padding: 0 var(--space-2); line-height: 1.7; }
.ht-fl-bar { padding-bottom: var(--space-3); }
.ht-fl-row__meta { margin-top: 0; gap: var(--space-2); }
.ht-fl-prompts { margin: var(--space-1) 0 0; }
.ht-fl-row__card, .ht-fl-row__source { margin: 0; line-height: 1.4; }
.ht-fl-row__source { justify-self: end; }
.ht-fl-flags:empty, .ht-fl-row__meta:empty, .ht-fl-head__pills:empty { display: none; }
.ht-fl-recon { margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) var(--space-3); }
.ht-fl-notes h3 { margin: 0 0 var(--space-1); }
.ht-fl-notes textarea { min-height: 72px; }
.ht-fl-actions { margin: var(--space-2) 0; }
.ht-fl-foot { margin: var(--space-2) 0 0; }
@media (max-width: 760px) {
	.ht-fl-row { grid-template-areas: 'name value' 'zone zone' 'bar bar' 'card card' 'source source'; padding: var(--space-2) var(--space-3); }
	.ht-fl-row__source { justify-self: start; }
	.ht-fl-tiles { gap: var(--space-2); }
	.ht-fl-fields { gap: var(--space-2) var(--space-2); }
	#ht-practitioner-portal .ht-card { padding: var(--space-3); }
	.ht-help-panel__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ht-tip, .ht-toast, .ht-toast--out, .ht-modal { transition: none; animation: none; }
	.ht-progress__bar::after { animation: none; left: 0; width: 100%; opacity: .5; }
	.ht-skel__line { animation: none; background: var(--ht-line); }
}
@media print { .ht-tip, .ht-toasts, .ht-progress, .ht-help-panel { display: none !important; } }
/* ── v2.13.0 Plan engine (docs/WELLNESS-PLAN-ENGINE-BRIEF.md §2 layers 2–5) — consult note on the functional report; the generated draft in the plan builder; tokens only ── */
.ht-fl-consult { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--ht-radius); background: var(--ht-bg); }
.ht-fl-consult__head h3 { margin: 0 0 var(--space-1); }
.ht-fl-consult__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.ht-fl-consult__field { display: grid; gap: var(--space-1); font-size: var(--text-small-size); }
.ht-fl-consult__field > span { font-weight: 600; color: var(--ht-ink); }
.ht-fl-consult__field--req > span { color: var(--ht-green-dark); }
.ht-fl-consult__field textarea, .ht-fl-consult__field select { width: 100%; box-sizing: border-box; border: 1px solid var(--ht-line); border-radius: var(--ht-radius-sm); padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--text-small-size); background: var(--ht-white); }
.ht-fl-consult__field textarea:focus-visible, .ht-fl-consult__field select:focus-visible { outline: 2px solid var(--ht-green-bright); outline-offset: 1px; border-color: var(--ht-green); }
.ht-fl-consult__field--tick { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); }
.ht-fl-consult__field--tick > span { font-weight: 400; }
.ht-fl-consult__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.ht-fl-consult__plans { margin-top: var(--space-2); }
.ht-fl-consult__plans:empty { display: none; }
.ht-engine { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--ht-green); border-radius: var(--ht-radius); background: var(--ht-green-soft); font-size: var(--text-small-size); }
#ht-practitioner-portal .ht-engine h3 { margin: 0 0 var(--space-1); }
#ht-practitioner-portal .ht-engine h4 { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-body-size); }
.ht-engine__row { margin: var(--space-1) 0; line-height: 1.45; }
.ht-engine__held { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--ht-orange); border-radius: var(--ht-radius-sm); background: var(--ht-white); }
.ht-engine__helditem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-2) 0; border-top: 1px solid var(--ht-line); }
.ht-engine__helditem:first-of-type { border-top: 0; }
.ht-engine__helditem ul { margin: var(--space-1) 0 0 var(--space-4); padding: 0; }
.ht-engine__more { margin-top: var(--space-2); }
.ht-engine__more > summary { cursor: pointer; font-weight: 600; color: var(--ht-green-dark); }
.ht-engine__more ul { margin: var(--space-1) 0 0 var(--space-4); padding: 0; }
#ht-practitioner-portal .ht-engine__log { font-size: var(--text-micro-size); }
#ht-practitioner-portal .ht-engine__log td { vertical-align: top; }
.ht-engine-item td { background: var(--ht-bg); border-bottom: 1px solid var(--ht-line); }
.ht-engine-item__why { font-size: var(--text-small-size); color: var(--ht-ink); }
.ht-engine-item__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; margin-top: var(--space-1); font-size: var(--text-small-size); }
.ht-engine-item__cautions { margin: var(--space-1) 0 0 var(--space-4); padding: 0; font-size: var(--text-small-size); color: var(--ht-ink); }
.ht-engine-item__cands { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin: var(--space-1) 0 0; font-size: var(--text-small-size); }
@media (max-width: 760px) {
	.ht-fl-consult__grid { grid-template-columns: 1fr; }
	.ht-engine__helditem { grid-template-columns: 1fr; }
}

/* ── v2.13.1 Functional lab report — magnitude chip + echo rows (ranges review 18 Oct 2026, option A; tokens only) ── */
.ht-fl-dist, .ht-fl-echo { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-control); font-size: var(--text-micro-size); line-height: 1.5; white-space: nowrap; border: 1px solid var(--ht-line); background: var(--ht-white); color: var(--ht-ink); }
.ht-fl-dist--noise { color: var(--ht-muted); border-style: dashed; }
.ht-fl-echo { color: var(--ht-muted); font-style: italic; }
.ht-fl-tile i { font-style: normal; color: var(--ht-muted); font-size: var(--text-micro-size); }
@media (max-width: 760px) { .ht-fl-dist, .ht-fl-echo { white-space: normal; margin-left: 0; margin-top: var(--space-1); } }

/* ── v2.16.0 (UX round 2, A3) — the intake in eight steps. Tokens only; every rule inside .ht-app. ───────────────────── */
.ht-app .ht-steps-head { margin: 0 0 var(--space-4); }
.ht-app .ht-steps-count { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--type-small); color: var(--ht-green-dark); }
.ht-app .ht-steps-bar { height: 6px; border-radius: var(--radius-track); background: var(--surface-tint-green); overflow: hidden; }
.ht-app .ht-steps-bar > i { display: block; height: 100%; width: 0; background: var(--ht-green); border-radius: var(--radius-track); }
@media (prefers-reduced-motion: no-preference) { .ht-app .ht-steps-bar > i { transition: width var(--duration-medium) var(--ease-default); } }
.ht-app .ht-steps-saved { margin: var(--space-1) 0 0; min-height: 1.4em; font-size: var(--type-micro); }
.ht-app .ht-step > h3 { margin: 0 0 var(--space-3); }
.ht-app .ht-step > h3:focus { outline: none; }
.ht-app .ht-step .ht-intake-field { margin: 0 0 var(--space-5); }
.ht-app .ht-dob { max-width: 220px; }
.ht-app .ht-measure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ht-app .ht-measure__group { display: inline-flex; align-items: center; gap: var(--space-2); }
.ht-app .ht-measure__group[hidden] { display: none; }
.ht-app .ht-measure__n { width: 88px; }
.ht-app .ht-measure__check { flex: 1 0 100%; margin: var(--space-1) 0 0; font-size: var(--type-small); color: var(--text-body); }
.ht-app .ht-measure__check .ht-btn { margin: 0 0 0 var(--space-2); }
.ht-app .ht-step-msg:empty { display: none; }
.ht-app .ht-review__step { padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.ht-app .ht-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ht-app .ht-review__head h4 { margin: 0; font-size: var(--type-body); }
.ht-app .ht-review .ht-intake-view { margin: var(--space-2) 0 0; }
@media (max-width: 767px) { .ht-app .ht-intake-steps { padding-bottom: var(--space-2); } }

/* ── v2.17.0 (UX round 2, A6): the practitioner's Person page — header chips, tabs, at a glance, intake by step, QORI bars,
      timeline. Tokens only; a missing safety fact is red (text + inset bar + "!" so colour is never the only signal). ── */
.ht-person__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
#ht-practitioner-portal .ht-person__head h2 { margin: 0; }
.ht-person__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.ht-person__chips .ht-chip { margin: 0; font-size: var(--type-micro); overflow-wrap: anywhere; }
.ht-chip--warn { background: var(--ht-orange-soft); border-color: var(--ht-orange); color: var(--ht-ink); }
.ht-chip--fail { background: var(--surface-card); border-color: var(--ht-error-border); color: var(--ht-error-dark); cursor: pointer; font-family: inherit; line-height: inherit; }
.ht-chip--fail:hover { background: var(--ht-error-border); color: var(--ht-white); }
.ht-badge--fail { background: var(--surface-card); color: var(--ht-error-dark); border-color: var(--ht-error-border); }
#ht-practitioner-portal .ht-person__tabs { width: auto; max-width: 100%; } /* tabs wrap on a phone: none is ever hidden off-screen */
#ht-practitioner-portal .ht-person__tabs button { white-space: nowrap; min-height: var(--target-min, 44px); }
.ht-ppanel { min-width: 0; }
.ht-ppanel:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--ht-green-bright); outline-offset: 2px; }

.ht-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--space-4); border: 1px solid var(--ht-line); border-radius: var(--radius-control); overflow: hidden; background: var(--surface-card); }
@media (min-width: 900px) { .ht-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ht-glance__cell { padding: var(--space-2) var(--space-3); border-right: 1px solid var(--ht-line); border-bottom: 1px solid var(--ht-line); min-width: 0; }
.ht-glance dt { font-size: var(--type-micro); color: var(--text-muted); font-weight: 600; margin: 0; text-transform: none; }
.ht-glance dd { margin: calc(var(--space-1) / 2) 0 0; font-size: var(--type-small); font-weight: 600; color: var(--text-body); overflow-wrap: anywhere; }
.ht-glance dd small { display: block; font-size: var(--type-micro); font-weight: 400; color: var(--text-muted); margin-top: calc(var(--space-1) / 2); }
.ht-glance__cell.is-warn { box-shadow: inset 3px 0 0 var(--ht-error); }
.ht-glance__cell.is-warn dd { color: var(--ht-error-dark); }
.ht-glance__flag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ht-error); color: var(--ht-white); font-size: var(--type-micro); font-weight: 700; line-height: 1; }

.ht-card--inset { box-shadow: none; margin: 0; padding: var(--space-3); }
#ht-practitioner-portal .ht-card--inset { padding: var(--space-3); margin: 0; }
#ht-practitioner-portal .ht-card--inset h3, #ht-practitioner-portal .ht-card--inset h4 { margin: 0 0 var(--space-2); font-size: var(--type-small); color: var(--ht-green-dark); }
.ht-card--inset p { margin: 0 0 var(--space-2); font-size: var(--type-small); }
.ht-person__cards, .ht-person-steps { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--space-3); }
@media (min-width: 900px) { .ht-person__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ht-person-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ht-person-steps .ht-intake-view dt:first-child { margin-top: 0; }
.ht-person-steps .ht-intake-view dt { text-transform: none; font-size: var(--type-small); } /* labels are the real questions here (the capitalise rule is for v1 raw keys) */
.ht-person-steps .ht-intake-view dd { font-size: var(--type-small); }

.ht-qbars { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.ht-qbar { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 56px; gap: var(--space-2); align-items: center; font-size: var(--type-small); }
.ht-qbar__track { height: 8px; border-radius: var(--radius-control); background: var(--ht-line); overflow: hidden; }
.ht-qbar__fill { display: block; height: 100%; border-radius: var(--radius-control); }
.ht-qbar b { text-align: right; font-variant-numeric: tabular-nums; }

.ht-tl-filters { flex-wrap: wrap; }
.ht-tl { list-style: none; margin: 0 0 var(--space-3); padding: 0; border: 1px solid var(--ht-line); border-radius: var(--radius-control); background: var(--surface-card); }
.ht-tl__item { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ht-line); font-size: var(--type-small); }
.ht-tl__item:last-child { border-bottom: 0; }
.ht-tl__when { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--type-micro); padding-top: calc(var(--space-1) / 2); }
.ht-tl__title { font-weight: 600; overflow-wrap: anywhere; }
.ht-tl__meta { color: var(--text-muted); font-size: var(--type-micro); margin-top: calc(var(--space-1) / 2); }
.ht-tl__text summary { cursor: pointer; color: var(--ht-green-dark); font-size: var(--type-micro); margin-top: var(--space-1); }
.ht-tl__text p { margin: var(--space-1) 0 0; padding: var(--space-2); background: var(--ht-green-soft); border-radius: var(--radius-control); white-space: pre-line; }
@media (max-width: 599px) {
	.ht-tl__item { grid-template-columns: minmax(0, 1fr); gap: calc(var(--space-1) / 2); }
	.ht-qbar { grid-template-columns: minmax(0, 1fr) 56px; }
	.ht-qbar__track { grid-column: 1 / -1; order: 3; }
}
/* v2.18.0 (A6 part 2): the timeline heading carries "Export record". */
.ht-tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
#ht-practitioner-portal .ht-tl-head h3 { margin: 0; }

/* ── v2.19.0 (UX round 2 design, screens p2 / p3): the practitioner frame, the People list and the Person header.
      Frame = top bar + shadow band + rail + main. The rail is a column on desktop and a scrolling row on phones (the site's own
      bottom menu stays the only bottom bar). Tokens only; spacing from --space-*. ── */
#ht-practitioner-portal { font-family: var(--font-body); color: var(--text-body); }
.ht-pf { border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-card); position: relative; }
.ht-pf__top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ht-line); }
.ht-pf__brand { font-family: var(--font-display); font-size: var(--type-h3); color: var(--ht-green-dark); font-weight: 700; }
.ht-pf__sp { flex: 1; }
.ht-pf__bell { position: relative; }
.ht-pf__count { position: absolute; top: calc(var(--space-1) / 2); right: calc(var(--space-1) / 2); min-width: 18px; height: 18px; border-radius: 9px; background: var(--ht-error); color: var(--ht-white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 var(--space-1); }
.ht-pf__me { display: inline-flex; align-items: center; gap: var(--space-2); }
.ht-pf__me b { display: block; font-size: var(--type-small); line-height: 1.2; }
.ht-pf__me small { display: block; font-size: var(--type-micro); color: var(--text-muted); }
#ht-practitioner-portal .ht-pf__notif { position: absolute; right: var(--space-4); top: calc(var(--space-12) + var(--space-2)); width: min(420px, calc(100% - var(--space-8))); max-height: 70vh; overflow: auto; z-index: 20; box-shadow: var(--shadow-card-hover); }
.ht-pf__band { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--ht-orange-soft); border-left: 4px solid var(--ht-orange); font-size: var(--type-small); }
.ht-pf__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 480px; }
.ht-pf__nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-2); border-right: 1px solid var(--ht-line); }
#ht-practitioner-portal .ht-pf__nav button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-body); font: inherit; font-size: var(--type-small); font-weight: 600; text-align: left; cursor: pointer; margin: 0; }
#ht-practitioner-portal .ht-pf__nav button:hover { background: var(--ht-green-soft); }
#ht-practitioner-portal .ht-pf__nav button.is-on { background: var(--ht-green-soft); color: var(--ht-green-dark); }
#ht-practitioner-portal .ht-pf__nav button small { font-weight: 400; color: var(--text-muted); }
.ht-pf__main { min-width: 0; padding: var(--space-6); background: var(--surface-page); }
.ht-ic { flex: none; vertical-align: middle; }
#ht-practitioner-portal .ht-iconbtn { display: inline-grid; place-items: center; width: var(--target-min); height: var(--target-min); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-body); cursor: pointer; margin: 0; padding: 0; }
#ht-practitioner-portal .ht-iconbtn:hover { background: var(--ht-green-soft); color: var(--ht-green-dark); }
.ht-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page head (p2) */
.ht-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-4); }
#ht-practitioner-portal .ht-pagehead h1 { font-family: var(--font-display); font-size: var(--type-h1); color: var(--text-body); margin: 0 0 var(--space-1); }
.ht-purpose { margin: 0; color: var(--text-muted); font-size: var(--type-small); }
.ht-pagehead__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
#ht-practitioner-portal .ht-pagehead__tools .ht-input { width: auto; }
#ht-practitioner-portal #ht-people-filter { min-width: 200px; }
#ht-practitioner-portal .ht-input { min-height: var(--target-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--radius-control); background: var(--surface-card); font: inherit; font-size: var(--type-small); color: var(--text-body); margin: 0; }
#ht-practitioner-portal #ht-patient-search { width: 260px; max-width: 100%; }
#ht-practitioner-portal .ht-card--flush { padding: var(--space-1) var(--space-3); }

/* People table (p2): avatar + name, account, stage chip, last activity, chevron; the whole row opens the person */
#ht-practitioner-portal .ht-people { margin: 0; font-size: var(--type-small); }
#ht-practitioner-portal .ht-people th { background: transparent; color: var(--text-muted); font-size: var(--type-micro); font-weight: 600; border: 0; border-bottom: 1px solid var(--ht-line); padding: var(--space-3) var(--space-2); }
#ht-practitioner-portal .ht-people td { border: 0; border-bottom: 1px solid var(--ht-line); padding: var(--space-3) var(--space-2); vertical-align: middle; }
#ht-practitioner-portal .ht-people tr:last-child td { border-bottom: 0; }
.ht-people__row { cursor: pointer; transition: background var(--duration-fast) var(--ease-default); }
.ht-people__row:hover { background: var(--ht-green-soft); }
.ht-person-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ht-person-cell b { font-weight: 700; }
.ht-person-cell small, .ht-people__acct small, .ht-people__when small { display: block; font-size: var(--type-micro); color: var(--text-muted); margin-top: calc(var(--space-1) / 2); }
.ht-people__acct small { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-people__when { color: var(--text-muted); white-space: nowrap; }
.ht-people__go { width: var(--target-min); text-align: right; }
.ht-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ht-green-soft); color: var(--ht-green-dark); font-size: var(--type-micro); font-weight: 700; letter-spacing: 0.3px; }
.ht-avatar--lg { width: 56px; height: 56px; font-size: var(--type-small); }
.ht-stage { display: inline-block; padding: calc(var(--space-1) / 2) var(--space-2); border-radius: var(--radius-control); border: 1px solid transparent; font-size: var(--type-micro); font-weight: 600; white-space: nowrap; }
.ht-stage--ok { background: var(--ht-green-soft); color: var(--ht-green-dark); border-color: var(--ht-green-soft); }
.ht-stage--warn { background: var(--ht-orange-soft); color: var(--text-body); border-color: var(--ht-orange); }
.ht-stage--neutral { background: var(--surface-page); color: var(--text-muted); border-color: var(--ht-line); }

/* Person header (p3) */
.ht-crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--text-muted); margin: 0 0 var(--space-3); }
#ht-practitioner-portal .ht-linkbtn { border: 0; background: none; padding: 0; margin: 0; color: var(--ht-green-dark); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ht-phead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); margin: 0 0 var(--space-4); }
.ht-phead__main { flex: 1; min-width: 0; }
#ht-practitioner-portal .ht-phead__name { font-family: var(--font-display); font-size: var(--type-h1); color: var(--text-body); margin: 0 0 var(--space-2); line-height: 1.2; }
#ht-practitioner-portal .ht-phead__msg { display: inline-flex; align-items: center; gap: var(--space-2); }
#ht-practitioner-portal .ht-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.ht-progress__label b { display: block; font-size: var(--type-small); }
.ht-progress__label small { color: var(--text-muted); font-size: var(--type-micro); }
.ht-progress__steps { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; min-width: 280px; }
.ht-progress__steps li { position: relative; display: grid; justify-items: center; gap: calc(var(--space-1) / 2); text-align: center; font-size: var(--type-micro); color: var(--text-muted); }
.ht-progress__steps li::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--ht-line); z-index: 0; }
.ht-progress__steps li:first-child::before { display: none; }
.ht-progress__steps li.is-done::before, .ht-progress__steps li.is-now::before { background: var(--ht-green); }
.ht-progress__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ht-line); background: var(--surface-card); font-weight: 700; color: var(--text-muted); }
.ht-progress__steps li.is-done .ht-progress__dot { background: var(--ht-green); border-color: var(--ht-green); color: var(--ht-white); }
.ht-progress__steps li.is-now .ht-progress__dot { border-color: var(--ht-orange); color: var(--text-body); }
.ht-progress__steps li.is-done .ht-progress__name, .ht-progress__steps li.is-now .ht-progress__name { color: var(--text-body); font-weight: 600; }
#ht-practitioner-portal .ht-person__tabs { display: flex; width: 100%; margin: 0 0 var(--space-4); }
.ht-person .ht-ppanel:not(#ht-ppanel-overview) { background: var(--surface-card); border: 1px solid var(--ht-line); border-radius: var(--radius-card); padding: var(--space-4); }
.ht-person .ht-person__cards .ht-card--inset { background: var(--surface-card); }

@media (max-width: 899px) {
	.ht-pf__body { grid-template-columns: minmax(0, 1fr); }
	.ht-pf__nav { flex-direction: row; overflow-x: auto; padding: var(--space-2); border-right: 0; border-bottom: 1px solid var(--ht-line); -webkit-overflow-scrolling: touch; }
	#ht-practitioner-portal .ht-pf__nav button { width: auto; white-space: nowrap; }
	.ht-pf__main { padding: var(--space-4); }
	.ht-pf__brand { font-size: var(--type-small); }
	.ht-pf__me span { display: none; }
}
@media (max-width: 599px) {
	#ht-practitioner-portal .ht-people thead { display: none; }
	#ht-practitioner-portal .ht-people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--ht-line); }
	#ht-practitioner-portal .ht-people td { display: block; border: 0; padding: 0; }
	#ht-practitioner-portal .ht-people td:first-child { grid-column: 1; }
	#ht-practitioner-portal .ht-people .ht-people__go { grid-column: 2; grid-row: 1; }
	#ht-practitioner-portal .ht-people .ht-people__acct { display: none; }
	#ht-practitioner-portal .ht-people td:nth-child(3), #ht-practitioner-portal .ht-people .ht-people__when { grid-column: 1 / -1; padding-left: calc(var(--space-8) + var(--space-1) + var(--space-3)); white-space: normal; }
	.ht-progress__steps { min-width: 0; }
	.ht-progress__name, .ht-progress__steps small { display: none; } /* dots only; the label names the current step */
}
@media (prefers-reduced-motion: reduce) { .ht-people__row { transition: none; } }

/* ===== v2.21.0 — zone trend (the founder, 19 Oct 2026): lanes, time on the x-axis, no values on the chart ===== */
.ht-zt { margin-top: var(--space-2); border-top: 1px solid var(--ht-line); padding-top: var(--space-2); grid-column: 1 / -1; }
.ht-zt > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; font-size: var(--type-small); font-weight: 600; color: var(--chart-on-target); min-height: var(--target-min); list-style: none; }
.ht-zt > summary::-webkit-details-marker { display: none; }
.ht-zt > summary:focus-visible { outline: 2px solid var(--chart-on-target); outline-offset: 2px; }
.ht-zt__chip { font-size: var(--type-small); font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); white-space: nowrap; }
.ht-zt__chip--up { background: var(--chart-target-band); color: var(--chart-on-target); }
.ht-zt__chip--same, .ht-zt__chip--base { background: var(--ht-bg); color: var(--ht-muted); }
.ht-zt__chip--down { background: var(--ht-bg); color: var(--chart-outside-lab); }
.ht-zt__plot { width: 100%; margin-top: var(--space-2); }
.ht-zt__svg { display: block; overflow: visible; }
.ht-zt__band { fill: var(--chart-target-band); }
.ht-zt__band--lab { fill: var(--ht-bg); }
.ht-zt__rail { fill: var(--chart-outside-target); opacity: .55; }
.ht-zt__rail--mid { fill: var(--ht-white); stroke: var(--chart-on-target); opacity: 1; }
.ht-zt__lane { font-family: var(--font-body); font-size: var(--type-micro); letter-spacing: 0.3px; text-transform: uppercase; fill: var(--ht-ink); }
.ht-zt__date { font-family: var(--font-body); font-size: var(--type-micro); fill: var(--ht-muted); }
.ht-zt__sep { stroke: var(--chart-grid); stroke-dasharray: 4 4; }
.ht-zt__drop { stroke: var(--chart-grid); }
.ht-zt__line { fill: none; stroke: var(--chart-line); stroke-width: 1.5; }
.ht-zt__dot { stroke: var(--ht-white); stroke-width: 2; }
.ht-zt__dot--ok { fill: var(--chart-on-target); }
.ht-zt__dot--opt { fill: var(--chart-outside-target); }
.ht-zt__dot--lab { fill: var(--chart-outside-lab); }
.ht-zt__dot--other { fill: var(--ht-white); stroke: var(--chart-not-tested); }
.ht-zt__pulse { fill: none; stroke-width: 1.5; opacity: .35; }
.ht-zt__pulse--ok { stroke: var(--chart-on-target); }
.ht-zt__pulse--opt { stroke: var(--chart-outside-target); }
.ht-zt__pulse--lab { stroke: var(--chart-outside-lab); }
.ht-zt__toggle { background: none; border: 0; margin: 0; padding: 0; color: var(--chart-on-target); font: inherit; font-size: var(--type-small); font-weight: 600; cursor: pointer; min-height: var(--target-min); }
.ht-zt__table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); font-size: var(--type-small); }
.ht-zt__table th, .ht-zt__table td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--ht-line); }
.ht-zt__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* motion: the line draws, the dots appear in date order, then the "now" ring pulses */
.ht-zt__svg.is-anim .ht-zt__line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.ht-zt__svg.is-in .ht-zt__line { transition: stroke-dashoffset calc(var(--duration-entrance) * var(--n)) var(--ease-default); stroke-dashoffset: 0; }
.ht-zt__svg.is-anim .ht-zt__dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.ht-zt__svg.is-in .ht-zt__dot { transition: opacity var(--duration-entrance) var(--ease-default), transform var(--duration-entrance) var(--ease-default); transition-delay: calc(var(--duration-entrance) * var(--i)); opacity: 1; transform: none; }
.ht-zt__svg.is-in .ht-zt__pulse { animation: ht-zt-pulse 2.4s var(--ease-default) calc(var(--duration-entrance) * var(--n)) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ht-zt-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.ht-zt__svg.is-anim .ht-zt__line { stroke-dashoffset: 0; transition: none; }
	.ht-zt__svg.is-anim .ht-zt__dot { opacity: 1; transform: none; transition: none; }
	.ht-zt__svg.is-in .ht-zt__pulse { animation: none; }
}

/* ===== v2.22.0 (A9, screens p4–p6): the functional report in four tabs + the consult note beside it ===== */
.ht-fl-head--r2 .ht-fl-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.ht-fl-head__menus { display: flex; gap: var(--space-2); align-items: flex-start; }
.ht-fl-menu { position: relative; }
.ht-fl-menu > summary { list-style: none; cursor: pointer; }
.ht-fl-menu > summary::-webkit-details-marker { display: none; }
.ht-fl-menu__list { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20; min-width: 240px; display: grid; gap: var(--space-1); padding: var(--space-2); background: var(--ht-white); border: 1px solid var(--ht-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ht-fl-menu__list .ht-btn { width: 100%; justify-content: flex-start; }
.ht-fl-menu__list .ht-fl-why { margin: 0; font-size: var(--type-micro); color: var(--ht-muted); }
.ht-fl-chipline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); margin: 0 0 var(--space-3); }
.ht-fl-chipline__chip { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--fl-okl-bg); border: 1px solid var(--ht-line); font-size: var(--type-small); color: var(--ht-ink); }
.ht-fl-chipline__chip small { font-size: var(--type-micro); color: var(--ht-muted); }
.ht-fl-chipline__chip.is-assumed { background: var(--fl-opt-bg); border-color: var(--ht-orange); }
.ht-fl-chipline__chip.is-missing { background: var(--ht-bg); border-style: dashed; color: var(--ht-muted); }
.ht-fl-r2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.ht-fl-r2__main { min-width: 0; }
.ht-fl-r2__side { display: grid; gap: var(--space-3); position: sticky; top: var(--space-4); }
.ht-fl-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-card); background: var(--fl-okl-bg); margin-bottom: var(--space-3); }
.ht-fl-tab { border: 0; margin: 0; background: transparent; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font: inherit; font-size: var(--type-small); font-weight: 600; color: var(--ht-green-dark); cursor: pointer; min-height: var(--target-min); }
.ht-fl-tab small { font-weight: 400; color: var(--ht-muted); }
.ht-fl-tab[aria-selected="true"] { background: var(--ht-green-dark); color: var(--ht-white); }
.ht-fl-tab[aria-selected="true"] small { color: var(--ht-white); }
.ht-fl-tab:focus-visible { outline: 2px solid var(--ht-green-dark); outline-offset: 2px; }
.ht-fl-tab--narrow { display: none; }
.ht-fl-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.ht-fl-tile--btn { font: inherit; text-align: left; cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-default); }
.ht-fl-tile--btn:hover, .ht-fl-tile--btn:focus-visible { box-shadow: var(--shadow-card-hover); outline: none; }
.ht-fl-tiles__foot { margin: 0 0 var(--space-3); }
.ht-fl-lookat { border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); padding: var(--space-4); margin: var(--space-3) 0; }
.ht-fl-lookat h3 { margin: 0 0 var(--space-2); font-size: var(--type-h3); }
.ht-fl-lookat__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.ht-fl-lookat__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto minmax(0, 2fr); gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--ht-line); border-bottom: 1px solid var(--ht-line); font-size: var(--type-small); }
.ht-fl-lookat__row--lab, .ht-fl-lookat__row--crit { border-left-color: var(--fl-lab); }
.ht-fl-lookat__row--opt { border-left-color: var(--fl-opt); }
.ht-fl-lookat__name { font-weight: 600; }
.ht-fl-lookat__row .ht-fl-chip { justify-self: start; }
.ht-fl-lookat__dist { color: var(--ht-muted); font-size: var(--type-micro); }
.ht-fl-patsum { border-left: 4px solid var(--ht-green-dark); background: var(--fl-okl-bg); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.ht-fl-patsum p { margin: 0 0 var(--space-1); }
.ht-fl-checks { margin-top: var(--space-3); }
.ht-fl-checks__table td.is-assumed { color: var(--ht-orange); font-weight: 600; }
.ht-fl-consult--side { margin: 0; border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); padding: var(--space-4); }
.ht-fl-consult--side .ht-fl-consult__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ht-fl-cnfield { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--type-small); }
.ht-fl-cnfield__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ht-fl-cnfield__head label { font-weight: 600; }
.ht-fl-cnfield textarea, .ht-fl-cnfield select { width: 100%; margin: 0; box-sizing: border-box; }
.ht-fl-cnfield--tick { display: flex; gap: var(--space-2); align-items: flex-start; }
.ht-fl-cnrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ht-fl-cnchip { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-control); font-size: var(--type-micro); font-weight: 600; line-height: 1.8; border: 1px solid; }
.ht-fl-cnchip.is-drafted { background: var(--fl-opt-bg); border-color: var(--ht-orange); color: var(--ht-ink); }
.ht-fl-cnchip.is-ok { background: var(--fl-okl-bg); border-color: var(--ht-green); color: var(--ht-green-dark); }
.ht-fl-cnchip.is-edited { background: var(--ht-bg); border-color: var(--ht-line); color: var(--ht-muted); }
.ht-fl-consult__gen { border-top: 1px solid var(--ht-line); padding-top: var(--space-3); margin-top: var(--space-2); display: grid; gap: var(--space-2); }
.ht-fl-consult__gen .ht-btn { width: 100%; justify-content: center; }
.ht-fl-notes--side { border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); padding: var(--space-4); margin: 0; display: grid; gap: var(--space-2); }
.ht-fl-notes--side h3 { margin: 0; }
.ht-fl-notes--side textarea { width: 100%; margin: 0; box-sizing: border-box; }
.ht-fl-genmodal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--ht-ink) 45%, transparent); }
.ht-fl-genmodal__box { width: min(520px, 100%); background: var(--ht-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); padding: var(--space-6); }
.ht-fl-genmodal__box h3 { margin: 0 0 var(--space-3); }
.ht-fl-genmodal__steps { margin: 0 0 var(--space-3); padding: 0 0 0 var(--space-6); display: grid; gap: var(--space-2); color: var(--ht-muted); font-size: var(--type-small); }
.ht-fl-genmodal__steps li.is-now { color: var(--ht-ink); font-weight: 600; }
.ht-fl-genmodal__steps li.is-done { color: var(--ht-green-dark); }
.ht-fl-genmodal__steps li.is-error { color: var(--ht-error); }
.ht-fl-genmodal__msg { margin: 0 0 var(--space-3); font-size: var(--type-small); }
.ht-fl-genmodal__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 1099px) {
	.ht-fl-r2 { grid-template-columns: minmax(0, 1fr); }
	.ht-fl-r2__side { position: static; display: none; }
	.ht-fl-r2.is-tab-note .ht-fl-r2__side { display: grid; }
	.ht-fl-tab--narrow { display: inline-block; }
	.ht-fl-tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.ht-fl-tabs { flex-wrap: nowrap; overflow-x: auto; }
	.ht-fl-tab { white-space: nowrap; }
	.ht-fl-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ht-fl-lookat__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ht-fl-lookat__dist { grid-column: 1 / -1; }
	.ht-fl-cnrow { grid-template-columns: 1fr; }
	.ht-fl-head__menus { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ht-fl-tile--btn { transition: none; } }
/* v2.22.1: the portal caps its content at 980 px, so the report card is ~730 px even on a large screen.
   Lay the report out by the card's own width (container queries); the screen-width rules above stay as the fallback. */
.ht-fl-report { container: fl-report / inline-size; }
@container fl-report (max-width: 899px) {
	.ht-fl-r2 { grid-template-columns: minmax(0, 1fr); }
	.ht-fl-r2__side { position: static; display: none; }
	.ht-fl-r2.is-tab-note .ht-fl-r2__side { display: grid; }
	.ht-fl-tab--narrow { display: inline-block; }
}
@container fl-report (max-width: 559px) {
	.ht-fl-tabs { flex-wrap: nowrap; overflow-x: auto; }
	.ht-fl-tab { white-space: nowrap; }
	.ht-fl-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ht-fl-lookat__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ht-fl-lookat__dist { grid-column: 1 / -1; }
	.ht-fl-cnrow { grid-template-columns: 1fr; }
	.ht-fl-head__menus { width: 100%; }
}

/* ===== v2.23.0 (A9 part 2, screen p7): the plan builder — items + detail, decisions, budget, patterns, six tabs, phone item screens ===== */
/* the practitioner portal uses the page's full content width (it was capped at 980 px beside a 200 px nav, leaving a ~730 px card): the builder's list + detail need ~820 px */
#ht-practitioner-portal.ht-app { max-width: none; }
.ht-pb { container: pb / inline-size; position: relative; padding-bottom: var(--space-2); }
.ht-pb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.ht-pb-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--type-h2); }
.ht-pb-status { font-size: var(--type-micro); font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--fl-none-bg); color: var(--ht-ink); }
.ht-pb-status--published { background: var(--ht-green-soft); color: var(--ht-green-dark); }
.ht-pb-purpose { margin: var(--space-1) 0 0; color: var(--ht-muted); font-size: var(--type-small); }
.ht-pb-head__side { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ht-pb-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); border: 1px solid var(--ht-line); background: var(--ht-white); font-size: var(--type-micro); font-weight: 600; color: var(--ht-ink); }
.ht-pb-chip--bad { border-color: var(--ht-error); color: var(--ht-error-dark); background: var(--fl-lab-bg); }
.ht-pb-micro { font-size: var(--type-micro); }
.ht-pb-muted { color: var(--ht-muted); }
.ht-pb-bad { color: var(--ht-error-dark); }
.ht-pb-budget { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); margin-bottom: var(--space-3); }
.ht-pb-track { flex: 1 1 120px; height: 8px; border-radius: var(--radius-control); background: var(--fl-none-bg); overflow: hidden; }
.ht-pb-fill { display: block; height: 100%; background: var(--ht-green); border-radius: var(--radius-control); }
.ht-pb-fill.is-over { background: var(--ht-error); }
.ht-pb-ok { padding: var(--space-3); border-radius: var(--radius-card); background: var(--fl-okl-bg); border: 1px solid var(--ht-line); font-size: var(--type-small); margin-bottom: var(--space-3); }
.ht-pb-decide { border: 1px solid var(--ht-orange); background: var(--ht-orange-soft); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); display: grid; gap: var(--space-2); }
.ht-pb-decide h3 { margin: 0; font-size: var(--type-h3); }
.ht-pb-preg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--ht-line); font-size: var(--type-small); }
.ht-pb-preg__btns, .ht-pb-drow__act, .ht-pb-dl__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ht-pb-drow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; font-size: var(--type-small); }
.ht-pb-ovr { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
.ht-pb-ovr[hidden] { display: none; }
.ht-pb-ovr input { flex: 1; margin: 0; }
.ht-pb-state { display: inline-block; text-transform: uppercase; font-size: var(--type-micro); font-weight: 700; letter-spacing: 0.2px; padding: 0 var(--space-1); border-radius: var(--radius-control); border: 1px solid var(--ht-line); background: var(--ht-white); color: var(--ht-ink); white-space: nowrap; }
.ht-pb-state--held { background: var(--fl-lab-bg); border-color: var(--ht-error); color: var(--ht-error-dark); }
.ht-pb-state--confirm { background: var(--fl-opt-bg); border-color: var(--ht-orange); color: var(--ht-ink); }
.ht-pb-state--check { background: var(--fl-none-bg); color: var(--ht-ink); }
.ht-pb-state--ok { background: var(--ht-green-soft); border-color: var(--ht-green); color: var(--ht-green-dark); }
.ht-pb-state--swap { background: var(--fl-okl-bg); border-color: var(--ht-green); color: var(--ht-green-dark); }
.ht-pb-state--removed { background: var(--ht-bg); color: var(--ht-muted); text-decoration: line-through; }
.ht-pb-pfilter { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); margin-bottom: var(--space-3); }
.ht-pb-pfilter button { flex: none; min-height: 36px; margin: 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--radius-control); background: var(--ht-white); font: inherit; font-size: var(--type-small); color: var(--ht-ink); cursor: pointer; white-space: nowrap; }
.ht-pb-pfilter button.is-on { border-color: var(--ht-green); background: var(--ht-green-soft); font-weight: 600; }
.ht-pb-tabsrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ht-pb-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-card); background: var(--fl-okl-bg); }
.ht-pb-tabs button { border: 0; margin: 0; background: transparent; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font: inherit; font-size: var(--type-small); font-weight: 600; color: var(--ht-green-dark); cursor: pointer; min-height: var(--target-min); }
.ht-pb-tabs button small { font-weight: 400; color: var(--ht-muted); }
.ht-pb-tabs button[aria-selected="true"] { background: var(--ht-green-dark); color: var(--ht-white); }
.ht-pb-tabs button[aria-selected="true"] small { color: var(--ht-white); }
.ht-pb-tabs button:focus-visible, .ht-pb-item:focus-visible, .ht-pb-pfilter button:focus-visible { outline: 2px solid var(--ht-green-dark); outline-offset: 2px; }
.ht-pb-x { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.ht-pb-x__side { position: sticky; top: var(--space-4); border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); padding: var(--space-4); }
.ht-pb-items { border: 1px solid var(--ht-line); border-radius: var(--radius-card); background: var(--ht-white); overflow: hidden; }
.ht-pb-ihead, .ht-pb-item { display: grid; grid-template-columns: 1.5fr 1.7fr 1fr 78px; gap: var(--space-2); padding: var(--space-2) var(--space-3); align-items: start; }
.ht-pb-ihead { font-size: var(--type-micro); font-weight: 600; color: var(--ht-muted); border-bottom: 1px solid var(--ht-line); text-transform: uppercase; }
.ht-pb-item { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--ht-line); border-left: 3px solid transparent; background: var(--ht-white); font: inherit; font-size: var(--type-small); color: var(--ht-ink); text-align: left; cursor: pointer; }
.ht-pb-item:hover { background: var(--ht-bg); }
.ht-pb-item.is-sel { border-left-color: var(--ht-green); background: var(--ht-green-soft); }
.ht-pb-item.is-dim { opacity: .4; }
.ht-pb-item.is-removed .ht-pb-i-n b { text-decoration: line-through; color: var(--ht-muted); }
.ht-pb-item--static { cursor: default; }
.ht-pb-i-n small, .ht-pb-i-d small, .ht-pb-i-p small { display: block; color: var(--ht-muted); font-size: var(--type-micro); margin-top: var(--space-1); }
.ht-pb-i-s { text-align: right; }
.ht-pb-how { margin-top: var(--space-3); font-size: var(--type-small); }
.ht-pb-how summary { cursor: pointer; color: var(--ht-green-dark); font-weight: 600; }
.ht-pb-howtbl th { width: 120px; text-align: left; }
.ht-pb-dl { display: grid; gap: var(--space-2); font-size: var(--type-small); }
.ht-pb-dl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.ht-pb-dl h3 { margin: 0; font-size: var(--type-h3); }
.ht-pb-dl h4 { margin: var(--space-2) 0 0; font-size: var(--type-micro); text-transform: uppercase; letter-spacing: 0.5px; color: var(--ht-muted); }
.ht-pb-dl p { margin: 0; }
.ht-pb-mks { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ht-pb-mk { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--ht-line); border-radius: var(--radius-control); font-size: var(--type-micro); }
.ht-pb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fl-none-bg); }
.ht-pb-dot--lab { background: var(--fl-lab); }
.ht-pb-dot--opt { background: var(--fl-opt); }
.ht-pb-dot--ok { background: var(--fl-ok); }
.ht-pb-field { display: grid; gap: var(--space-1); }
.ht-pb-field > span { font-weight: 600; font-size: var(--type-micro); }
.ht-pb-field input, .ht-pb-field textarea, .ht-pb-field select { width: 100%; margin: 0; box-sizing: border-box; }
.ht-pb-field--short input { max-width: 120px; }
.ht-pb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ht-pb-check { display: flex; gap: var(--space-2); align-items: center; }
.ht-pb-check input { margin: 0; }
.ht-pb-cline { border-left: 3px solid var(--ht-line); padding-left: var(--space-2); }
.ht-pb-hint { color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-prod { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); border: 1px solid var(--ht-line); border-radius: var(--radius-control); }
.ht-pb-prod__img { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fl-okl-bg); }
.ht-pb-prod small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-tabbody { display: grid; gap: var(--space-3); }
.ht-pb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ht-pb-card { margin: 0; }
.ht-pb-card h3 { margin: 0 0 var(--space-2); font-size: var(--type-h3); }
.ht-pb-content h4 { margin: 0 0 var(--space-2); font-size: var(--type-small); }
.ht-pb-actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--ht-line); background: var(--surface-card); box-shadow: var(--shadow-card); border-radius: var(--radius-card); }
.ht-pb-actionbar__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ht-pb-more .ht-fl-menu__list { top: auto; bottom: calc(100% + var(--space-1)); }
.ht-pb-classicnote { margin: 0 0 var(--space-2); font-size: var(--type-small); color: var(--ht-muted); }
.ht-pb-veil { position: fixed; inset: 0; z-index: 100000; background: color-mix(in srgb, var(--ht-ink) 45%, transparent); display: flex; justify-content: flex-end; }
.ht-pb-drawer { width: min(640px, 100%); height: 100%; background: var(--ht-white); box-shadow: var(--shadow-card-hover); display: grid; grid-template-rows: auto 1fr auto; }
.ht-pb-drawer__h, .ht-pb-drawer__f { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ht-line); }
.ht-pb-drawer__f { border-bottom: 0; border-top: 1px solid var(--ht-line); justify-content: flex-end; }
.ht-pb-drawer__h small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-drawer__b { overflow-y: auto; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.ht-pb-prow { width: 100%; margin: 0 0 var(--space-1); display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--ht-line); border-radius: var(--radius-control); background: var(--ht-white); font: inherit; font-size: var(--type-small); text-align: left; cursor: pointer; color: var(--ht-ink); }
.ht-pb-prow small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-prow[aria-checked="true"] { border-color: var(--ht-green); background: var(--ht-green-soft); }
.ht-pb-ext summary { cursor: pointer; font-size: var(--type-small); color: var(--ht-green-dark); }
.ht-pb-push { margin-bottom: var(--space-2); }
.ht-pb-pushcard { margin: 0; }
@container pb (max-width: 820px) {
	.ht-pb-x { grid-template-columns: minmax(0, 1fr); }
	.ht-pb-x__side { display: none; }
	.ht-pb-ihead { display: none; }
	.ht-pb-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "d d" "p p"; }
	.ht-pb-i-n { grid-area: n; }
	.ht-pb-i-s { grid-area: s; }
	.ht-pb-i-d { grid-area: d; }
	.ht-pb-i-p { grid-area: p; }
	.ht-pb-tabsrow > .ht-btn { width: 100%; justify-content: center; }
	.ht-pb-drow { grid-template-columns: minmax(0, 1fr); }
	.ht-pb-grid2, .ht-pb-row2 { grid-template-columns: minmax(0, 1fr); }
	.ht-pb.is-item-screen .ht-pb-actionbar { display: none; }
	.ht-pb.is-item-screen .ht-pb-dl__btns { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--surface-card); box-shadow: var(--shadow-card-hover); }
	.ht-pb.is-item-screen .ht-pb-dl__btns .ht-btn { flex: 1; justify-content: center; min-height: var(--target-min); }
	.ht-pb.is-item-screen .ht-pb-pushcard { padding-bottom: var(--space-6); margin-bottom: var(--space-6); }
	.ht-pb-more .ht-fl-menu__list { left: 0; right: auto; } /* 2.27.0 (review): on a narrow builder "…" is the first button of the row, so its menu opens rightwards from it, not off the left edge */
}
@container pb (max-width: 480px) {
	.ht-pb-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
	.ht-pb-tabs button { white-space: nowrap; }
	.ht-pb-head__side { width: 100%; }
	.ht-pb-more { position: static; } /* 2.27.0 (review): the menu then spans the sticky action bar, just above it */
	.ht-pb-more .ht-fl-menu__list { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .ht-pb-item, .ht-pb-prow { transition: none; } }

/* ===== v2.24.0 (A9 part 3, screens p8 / p9): member preview & publish, the checklist, the schedule, the delivery record ===== */
.ht-pb-pubhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.ht-pb-pubhead h2 { margin: 0; font-size: var(--type-h2); }
.ht-pb-steps { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: var(--space-1); border-radius: var(--radius-card); background: var(--fl-okl-bg); font-size: var(--type-small); }
.ht-pb-steps li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-control); color: var(--ht-muted); font-weight: 600; }
.ht-pb-steps li.is-on { background: var(--ht-green-dark); color: var(--ht-white); }
.ht-pb-steps .ht-linkbtn { font-weight: 600; }
.ht-pb-pub { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.ht-pb-pub__doc, .ht-pb-pub__side { margin: 0; }
.ht-pb-pub__side { position: sticky; top: var(--space-4); display: grid; gap: var(--space-2); font-size: var(--type-small); }
.ht-pb-pub__side h3 { margin: 0; font-size: var(--type-h3); }
.ht-pb-pub__side hr { border: 0; border-top: 1px solid var(--ht-line); margin: var(--space-2) 0; width: 100%; }
.ht-pb-docbar { display: flex; justify-content: flex-end; margin: 0 0 var(--space-2); }
.ht-pb-doc { display: grid; gap: var(--space-3); font-size: var(--type-small); color: var(--ht-ink); }
.ht-pb-doc h2 { margin: 0; font-size: var(--type-h2); }
.ht-pb-doc h3 { margin: 0 0 var(--space-2); font-size: var(--type-h3); }
.ht-pb-doc section { border-top: 1px solid var(--ht-line); padding-top: var(--space-3); }
.ht-pb-doc p { margin: 0 0 var(--space-2); }
.ht-pb-lead { color: var(--ht-ink); }
.ht-pb-docitem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--ht-line); }
.ht-pb-docitem small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-docnote { border-left: 3px solid var(--ht-orange); padding-left: var(--space-2); }
.ht-pb-docabout p { color: var(--ht-muted); }
.ht-pb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ht-pb-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.ht-pb-checks small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: var(--type-micro); font-weight: 700; color: var(--ht-white); background: var(--ht-green); }
.ht-pb-ck--fail { background: var(--ht-error); }
.ht-pb-ck--info { background: var(--ht-orange); }
.ht-pb-diethits { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.ht-pb-diethits li { display: block; border-left: 3px solid var(--ht-error); padding-left: var(--space-2); }
.ht-pb-date { width: 100%; margin: 0 0 var(--space-1); box-sizing: border-box; }
.ht-pb-pubbtns { margin: 0; }
.ht-pb-confirm { border-left: 3px solid var(--ht-orange); background: var(--ht-orange-soft); border-radius: var(--radius-control); padding: var(--space-3); }
.ht-pb-confirm p { margin: 0 0 var(--space-2); }
.ht-pb-deliv { margin: 0; display: grid; gap: var(--space-3); }
.ht-pb-delivhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: flex-start; }
.ht-pb-delivtbl td small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-ds { display: inline-block; text-transform: uppercase; font-size: var(--type-micro); font-weight: 700; padding: 0 var(--space-1); border-radius: var(--radius-control); border: 1px solid var(--ht-line); background: var(--ht-white); color: var(--ht-ink); white-space: nowrap; }
.ht-pb-ds--sent { background: var(--ht-green-soft); border-color: var(--ht-green); color: var(--ht-green-dark); }
.ht-pb-ds--failed { background: var(--ht-error); border-color: var(--ht-error); color: var(--ht-white); }
.ht-pb-ds--held, .ht-pb-ds--cancelled { background: var(--fl-none-bg); color: var(--ht-muted); }
.ht-pb-ds--scheduled { border-color: var(--fl-lab); color: var(--ht-ink); }
.ht-next-steps { border-left: 4px solid var(--ht-green-dark); background: var(--fl-okl-bg); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.ht-next-steps p { margin: 0 0 var(--space-1); }
@container pb (max-width: 820px) {
	.ht-pb-pub { grid-template-columns: minmax(0, 1fr); }
	.ht-pb-pub__side { position: static; }
	.ht-pb-docitem { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ===== v2.25.0 (founder feedback round 3): calmer type in the practitioner portal — titles, count tiles and section heads ===== */
#ht-practitioner-portal .ht-fl .ht-fl-head h2, #ht-practitioner-portal .ht-fl-head__title { font-size: var(--type-h2); line-height: 1.3; }
#ht-practitioner-portal .ht-fl-tile b { font-size: var(--type-h2); }
#ht-practitioner-portal .ht-fl h3, #ht-practitioner-portal .ht-fl-lookat h3 { font-size: var(--type-body); }
#ht-practitioner-portal .ht-pb-title, #ht-practitioner-portal .ht-pb-pubhead h2 { font-size: var(--type-h3); }
#ht-practitioner-portal .ht-pb h3, #ht-practitioner-portal .ht-pb-doc h2 { font-size: var(--type-body); }
.ht-fl-qbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0 0 var(--space-2); }
.ht-fl-qbar__q { flex: 1 1 220px; }
.ht-fl-qbar input { width: 100%; margin: 0; box-sizing: border-box; }
.ht-fl-qbar__d { display: grid; gap: var(--space-1); font-size: var(--type-micro); color: var(--ht-muted); }
.ht-fl-qsort { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-2); font-size: var(--type-micro); }
.ht-fl-qsort button { border: 1px solid var(--ht-line); background: var(--ht-white); border-radius: var(--radius-control); padding: var(--space-1) var(--space-2); margin: 0; font: inherit; font-size: var(--type-micro); color: var(--ht-ink); cursor: pointer; }
.ht-fl-qsort button[aria-pressed="true"] { border-color: var(--ht-green); background: var(--ht-green-soft); font-weight: 600; }
.ht-fl-item--deleted { opacity: .75; cursor: default; }
.ht-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ht-pb-tabsrow__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ht-pb-veil--center { justify-content: center; align-items: center; }
.ht-pb-dialog { width: min(480px, 100%); background: var(--ht-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); padding: var(--space-4); display: grid; gap: var(--space-2); }
.ht-pb-dialog h3 { margin: 0; font-size: var(--type-h3); }

/* ===================================================================== v2.26.0: add a person, invite & book, earlier reports */
.ht-sheet { width: min(560px, calc(100vw - var(--space-6))); max-height: calc(100vh - var(--space-8)); overflow: auto; }
.ht-sheet h3 { margin: 0 0 var(--space-3); font-size: var(--type-h3); }
.ht-sheet .ht-field { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--type-small); }
.ht-sheet .ht-field input, .ht-sheet .ht-field select { margin: 0; width: 100%; box-sizing: border-box; }
.ht-sheet__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); }
.ht-sheet .ht-check { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); font-size: var(--type-small); }
.ht-sheet .ht-check input { margin: 0; }
.ht-ap-matches { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.ht-ap-matches li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); }
.ht-ap-matches small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-share__text { width: 100%; box-sizing: border-box; margin: 0 0 var(--space-3); font-size: var(--type-small); resize: vertical; }
.ht-share__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.ht-share__btns > * { margin: 0; display: inline-flex; align-items: center; }
.ht-start__btns > .ht-btn, .ht-sheet .ht-modal-actions .ht-btn { margin: 0; }
.ht-share__biz { margin-top: var(--space-2); font-size: var(--type-micro); }
.ht-start { margin-top: var(--space-3); }
.ht-start__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ht-start__head h3 { margin: 0; }
.ht-start .ht-check { display: flex; gap: var(--space-1); align-items: center; font-size: var(--type-small); }
.ht-start .ht-check input { margin: 0; }
.ht-start__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.ht-fm__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.ht-fm__head h2 { margin: 0; font-size: var(--type-h3); }
.ht-fm__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.ht-fm__facts .ht-field { display: grid; gap: var(--space-1); font-size: var(--type-small); }
.ht-fm__facts input, .ht-fm__facts select { margin: 0; width: 100%; box-sizing: border-box; }
.ht-fm__table input, .ht-fm__table select { margin: 0; width: 100%; box-sizing: border-box; font-size: var(--type-small); }
.ht-fm__table [data-k="test_name"] { min-width: 200px; }
.ht-fm__table .ht-fm__num { min-width: 64px; max-width: 96px; }
.ht-fm__table .ht-fm__unit { min-width: 72px; max-width: 104px; }
.ht-fm__table select { min-width: 220px; }
.ht-fm__table tr.is-unmatched td { background: var(--surface-tint-orange); }
.ht-fm__pick { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-fm__go { display: flex; justify-content: flex-end; margin-top: var(--space-3); }

/* ===================================================================== v2.27.0: Summary member copy, practices library */
.ht-pb-copyview, .ht-plan-views { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.ht-pb-copyview .ht-btn, .ht-plan-views .ht-btn { margin: 0; }
.ht-pb-copyview [aria-pressed="true"], .ht-plan-views [aria-pressed="true"] { background: var(--surface-tint-green); border-color: var(--ht-green); }
.ht-plan-views__pdf { margin-left: auto; font-size: var(--type-small); }
.ht-pb-sumtbl { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.ht-pb-sumtbl th { text-align: left; color: var(--ht-muted); font-weight: 600; border-bottom: 1px solid var(--border-default); padding: var(--space-1) var(--space-2); }
.ht-pb-sumtbl td { border-bottom: 1px solid var(--border-default); padding: var(--space-1) var(--space-2); vertical-align: top; }
.ht-pb-sumtbl__k, .ht-sum__k { font-weight: 600; }
.ht-pb-flag, .ht-sum__flag { color: var(--ht-error-border); }
.ht-pb-sumadd select { margin: 0; }
.ht-pb-sumpending { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-tint-orange); border-radius: var(--radius-control); font-size: var(--type-small); }
.ht-pb-sumpending ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.ht-pb-doc { grid-template-columns: minmax(0, 1fr); } /* 2.27.0 (review): the member copy never grows wider than its card (a wide table scrolls inside its own box) */
@container pb (max-width: 480px) { /* 2.27.0 (review): the Summary preview on a phone — one line per row, each value after its column's label, as the member's own Summary (after the base rules, so they win) */
	.ht-pb-sumtbl, .ht-pb-sumtbl tbody { display: block; }
	.ht-pb-sumtbl thead { display: none; }
	.ht-pb-sumtbl tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }
	.ht-pb-sumtbl td { display: inline; border: 0; padding: 0; }
	.ht-pb-sumtbl td + td::before { content: " · "; color: var(--ht-muted); }
	.ht-pb-sumtbl td[data-th] + td[data-th]::before { content: " · " attr(data-th) ": "; }
	.ht-pb-sumtbl td:empty { display: none; }
}
.ht-plan-for { margin: 0 0 var(--space-3); padding-left: var(--space-2); border-left: 3px solid var(--ht-green-dark); font-size: var(--type-small); color: var(--ht-ink); } /* 2.27.0 (review, K1): whose plan it is — a family member booked from this account */
.ht-pb-prac__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ht-pb-prac__head h3 { margin: 0; }
.ht-pb-prac__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ht-pb-prac__item { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); }
.ht-pb-prac__item.is-suggested { background: var(--surface-tint-orange); }
.ht-pb-prac__main { display: grid; gap: var(--space-1); flex: 1 1 auto; }
.ht-pb-prac__main .ht-chip { justify-self: start; }
.ht-pb-prac__main small { color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-prac__main input { margin: 0; }
.ht-pb-prac__sugg { color: var(--ht-ink); font-size: var(--type-micro); font-weight: 600; }
.ht-pb-prac__btns { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: flex-start; }
.ht-pb-prac__btns .ht-btn { margin: 0; }
.ht-pb-dialog--wide { width: min(640px, calc(100vw - var(--space-6))); }
/* 2.27.0 (review): a centred dialog is never wider or taller than the screen, so its heading is always in view; what does
   not fit scrolls inside it. In "Add a practice" the library list is the part that gives way. */
.ht-pb-veil--center > .ht-pb-dialog { box-sizing: border-box; max-width: calc(100% - var(--space-6)); max-height: calc(100% - var(--space-6)); overflow-y: auto; }
.ht-pb-dialog--wide { display: flex; flex-direction: column; }
.ht-pb-dialog--wide > * { flex: none; }
.ht-pb-dialog--wide > .ht-pb-prac__lib { flex: 0 1 auto; min-height: 0; }
.ht-pb-prac__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-3); }
.ht-pb-prac__tags .ht-btn { margin: 0; width: auto; } /* 2.27.0 (review): the five filters stay one wrapping row on a phone (not five full-width rows) */
.ht-pb-prac__tags [aria-pressed="true"] { background: var(--surface-tint-green); border-color: var(--ht-green); }
.ht-pb-prac__lib { display: grid; gap: var(--space-2); max-height: 60vh; overflow: auto; }
.ht-pb-prac__row { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }
.ht-pb-prac__row small { display: block; color: var(--ht-muted); font-size: var(--type-micro); }
.ht-pb-prac__row .ht-btn { margin: 0; width: auto; flex: none; } /* 2.27.0 (review): Add stays a compact button on a phone, so the practice text keeps the room */
.ht-sum__sec { margin: 0 0 var(--space-4); }
.ht-sum__sec h4 { margin: 0 0 var(--space-2); }
@media (max-width: 600px) { /* phones: one compact line per row, not a card per cell */
	.ht-sum__tbl thead { display: none; }
	.ht-sum__tbl tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }
	.ht-sum__tbl td { display: inline; border: 0; padding: 0; }
	.ht-sum__tbl td + td::before { content: " · "; color: var(--ht-muted); }
	.ht-sum__tbl td[data-th] + td[data-th]::before { content: " · " attr(data-th) ": "; } /* 2.27.0 (review): each value after its column's label (the hidden header), so "Your target" never reads as the lab range */
	.ht-sum__tbl td:empty { display: none; }
}
.ht-practice ol { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.ht-practice__caution { color: var(--ht-muted); font-size: var(--type-small); }
.ht-cautions { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: var(--type-small); color: var(--ht-muted); }
.ht-sum__tbl td { white-space: pre-line; } /* a practitioner's note keeps its line breaks */
.ht-sum__note { display: block; margin: var(--space-1) 0 0; padding-left: var(--space-2); border-left: 3px solid var(--ht-orange); font-size: var(--type-small); color: var(--ht-ink); } /* 2.27.0 (review): "Please note: …" under the Why text, as the builder's member preview shows it */

/* ===================================================================== v2.28.0: names, not numbers (W4-2); older drafts (§4); the seller on every line (§5) */
/* line 1 names the person and the thing, line 2 (smaller) carries the details: test · version · generated date and time · status */
.ht-fl-item__meta { margin-top: var(--space-1); line-height: 1.4; }
.ht-fl-head__name { min-width: 0; overflow-wrap: anywhere; }
.ht-fl .ht-fl-cardmeta { margin: 0 0 var(--space-3); }
.ht-pb-meta { margin: var(--space-1) 0 0; color: var(--ht-muted); font-size: var(--type-micro); }
/* "Generated from this report": each plan by its name with its details under it; drafts other than the current one fold away */
.ht-fl-planbtn { flex-direction: column; align-items: flex-start; gap: var(--space-1); text-align: left; max-width: 100%; }
.ht-fl-planbtn span { font-weight: 600; overflow-wrap: anywhere; }
.ht-fl-planbtn small { display: block; font-weight: 400; font-size: var(--type-micro); overflow-wrap: anywhere; }
.ht-fl-older { margin-top: var(--space-2); font-size: var(--type-small); }
.ht-fl-older > summary { cursor: pointer; color: var(--ht-green-dark); font-weight: 600; }
.ht-fl-older > .ht-plan-list { margin-top: var(--space-2); }
/* the seller on every line; "Not {first-choice seller}" when that seller has a product for the line, with a one-tap swap */
.ht-pb-notfirst { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-1); border: 1px solid var(--ht-orange); border-radius: var(--radius-control); background: var(--ht-orange-soft); color: var(--ht-ink); font-size: var(--type-micro); font-weight: 700; white-space: nowrap; }
.ht-pb-firstpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2); border-left: 3px solid var(--ht-orange); border-radius: var(--radius-control); background: var(--surface-tint-orange); }
.ht-pb-firstpick .ht-pb-notfirst { margin-left: 0; }
.ht-pb-firstpick .ht-btn { margin: 0; }
.ht-pb-refresh { font-size: var(--type-micro); }

/* ===================================================================== v2.28.0 part B: the Person page (W4-4, W4-5) */
/* At a glance folds into one line the height of a tap target. Closed, it keeps only the missing safety facts (red, each with "!"
   and words) or a muted all-clear; open, the sixteen facts. The chevron turns only when motion is welcome. */
.ht-glance-box { margin: 0 0 var(--space-4); border: 1px solid var(--ht-line); border-radius: var(--radius-control); background: var(--surface-card); }
.ht-glance-box__sum { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-2) var(--space-3); box-sizing: border-box; list-style: none; cursor: pointer; font-size: var(--type-small); }
.ht-glance-box__sum::-webkit-details-marker { display: none; }
.ht-glance-box__sum:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.ht-glance-box__title { flex: none; font-weight: 600; color: var(--ht-green-dark); }
.ht-glance-box__flags { flex: 1 1 auto; min-width: 0; color: var(--ht-error-dark); font-weight: 600; overflow-wrap: anywhere; }
.ht-glance-box__flags.is-clear { color: var(--text-muted); font-weight: 400; }
.ht-glance-box__flag b { color: var(--ht-error); }
.ht-glance-box__chev { flex: none; display: inline-grid; place-items: center; margin-left: auto; color: var(--text-muted); transform: rotate(90deg); transition: transform var(--duration-fast) var(--ease-default); }
.ht-glance-box[open] .ht-glance-box__chev { transform: rotate(-90deg); }
.ht-glance-box[open] .ht-glance-box__flags { display: none; }
.ht-glance-box .ht-glance { margin: 0; border: 0; border-top: 1px solid var(--ht-line); border-radius: 0; }
@media (max-width: 599px) { .ht-glance-box__sum { flex-wrap: wrap; } .ht-glance-box__flags { order: 3; flex-basis: 100%; } } /* phones: the warnings on their own line under the title */
@media (prefers-reduced-motion: reduce) { .ht-glance-box__chev { transition: none; } }
/* The tabs sit above the tracker, where the eye looks for them. From 768 wide they stay in view just under the admin bar or the
   theme's sticky header (--ht-stick, measured by ht-practitioner.js), below the bell panel and every tooltip; phones keep the
   wrapping bar in the flow. Type and spacing as the design system's Tabs; each tab stays a full tap target. */
.ht-person__tabbar { margin: 0 0 var(--space-3); }
#ht-practitioner-portal .ht-person__tabs { margin: 0; }
#ht-practitioner-portal .ht-person__tabs button { padding: var(--space-2) var(--space-4); font-size: var(--type-small); font-weight: 600; min-height: var(--target-min); }
@media (min-width: 768px) { .ht-person__tabbar { position: sticky; top: var(--ht-stick, 0px); z-index: 15; background: var(--surface-page); padding: var(--space-2) 0; margin: calc(-1 * var(--space-2)) 0 var(--space-1); } }
/* A control that takes the keyboard focus in a panel, or in the tracker under the bar (its "i"), scrolls clear of the sticky bar
   (WCAG 2.4.11); both lengths come from ht-practitioner.js, and without them the rule falls back to no offset. */
@media (min-width: 768px) { .ht-person :is(.ht-ppanel, .ht-progress) :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: calc(var(--ht-stick) + var(--ht-tabbar-h) + var(--space-2)); } }
/* Counts on the tabs, as the report's own tabs show theirs; a red count (the design system's Badge) marks a report to review or
   an urgent result, and failed messages. */
#ht-practitioner-portal .ht-person__tabs .ht-tabcount { margin-left: var(--space-1); font-size: var(--type-micro); font-weight: 400; color: var(--ht-muted); }
#ht-practitioner-portal .ht-person__tabs button.active .ht-tabcount { color: var(--ht-white); }
#ht-practitioner-portal .ht-person__tabs .ht-tabcount--alert, #ht-practitioner-portal .ht-person__tabs .ht-tabcount--fail { display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1); box-sizing: border-box; border-radius: var(--radius-control); background: var(--ht-error); color: var(--ht-white); font-weight: 700; line-height: 1; vertical-align: middle; }
/* The tracker's help is an "i" beside "Where … is" (no tooltip over the whole card, so it never covers the tabs). */
.ht-progress__title { display: flex; align-items: center; }
/* Assessments & plans: one Lab reports table (each row's actions in one wrapping line), the consult notes as named buttons (the
   name over its details), an empty section as one line beside its action. */
.ht-row-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 150px; }
.ht-row-acts .ht-btn { margin: 0; width: auto; }
.ht-labrep td:first-child { min-width: 180px; } /* on a phone the table scrolls sideways; the report's name keeps a readable column */
.ht-row-acts small { font-size: var(--type-micro); }
.ht-cnotes { margin: var(--space-2) 0; }
.ht-cnote { flex-direction: column; align-items: flex-start; gap: var(--space-1); text-align: left; max-width: 100%; }
.ht-cnote span { font-weight: 600; overflow-wrap: anywhere; }
.ht-cnote small { display: block; font-weight: 400; font-size: var(--type-micro); overflow-wrap: anywhere; }
.ht-cnote.ht-btn--busy { flex-direction: row; align-items: center; } /* "Opening…" beside its spinner, the button keeping its width */
.ht-person__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ht-person__empty p { margin: 0; }
.ht-person__empty .ht-btn { margin: 0; width: auto; }
/* A table's visually hidden header text (the Lab reports "Actions" column) stays inside its sideways scroller: with no positioned
   scroller it escaped it and widened the whole page on a phone (461 px wide at 390). */
#ht-practitioner-portal .ht-table-scroll { position: relative; }
/* …and inside its own header cell, so it never adds a second, empty sideways scroll to the wrapper (only this table: other
   tables keep their sticky header cells). */
#ht-practitioner-portal .ht-labrep th { position: relative; }
/* The "+ New Plan" title field stays hidden until the button opens it (the row's display: flex outranked the hidden attribute,
   so the field always showed beside the button); so does a button with the hidden attribute (a consultation's "Update" until its
   status is changed — .ht-btn's display: inline-flex outranked it too). */
#ht-practitioner-portal .ht-upload-row[hidden], #ht-practitioner-portal .ht-btn[hidden] { display: none; }

/* ===================================================================== v2.29.0: Buy my plan — the bar on My Plan; why a plan line has no cart button */
/* The bar sits above the Summary and the full plan alike: what one tap does, the button beside it (under it on a phone). */
.ht-buybar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--ht-line); border-left: 4px solid var(--ht-green); border-radius: var(--radius-control); background: var(--surface-tint-green); }
.ht-buybar__text { flex: 1 1 240px; min-width: 0; }
.ht-buybar__text p { margin: 0; color: var(--ht-ink); font-size: var(--type-small); }
.ht-buybar__text .ht-buybar__title { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); font-size: var(--type-body); }
.ht-buybar .ht-btn { flex: none; margin: 0; min-height: var(--target-min); }
.ht-buybar__msg { flex-basis: 100%; margin: 0; color: var(--ht-error-dark); font-size: var(--type-small); }
.ht-buybar__msg[hidden] { display: none; }
/* A line without a cart button says why, with where to go instead; a refusal from the cart shows under its button; "Add All to
   Cart" says what it did. Muted words take the token (the older .ht-muted grey is too faint for a reason the member must read). */
.ht-cartwhy { display: block; color: var(--text-muted); font-size: var(--type-small); }
.ht-cartwhy + .ht-btn { margin-top: var(--space-1); white-space: nowrap; } /* "Buy from the seller ↗" keeps its arrow on its line */
.ht-cartwhy__go { display: inline-block; padding: var(--space-1) 0; color: var(--ht-green-dark); font-size: var(--type-small); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ht-cart-err { display: block; margin-top: var(--space-1); color: var(--ht-error-dark); font-size: var(--type-small); }
.ht-cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ht-cart-actions .ht-btn { margin: 0; box-sizing: border-box; } /* "Go to Cart" (a link) as tall as "Add All to Cart" (a button) */
.ht-cart-note { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--ht-green); border-radius: var(--radius-control); background: var(--surface-tint-green); color: var(--ht-ink); font-size: var(--type-small); }
.ht-cart-note--warn { border-left-color: var(--ht-orange); background: var(--surface-tint-orange); }
.ht-cart-foot { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--type-small); }
/* The plan's delivery record (practitioner): "Cart filled (x of y)" and "Ordered #n" read as done, like Sent; "Link opened"
   (logged out — maybe an e-mail scanner — or nothing went in) reads as not done, like Not sent. */
.ht-pb-ds--filled, .ht-pb-ds--ordered { background: var(--ht-green-soft); border-color: var(--ht-green); color: var(--ht-green-dark); }
.ht-pb-ds--opened { background: var(--fl-none-bg); color: var(--ht-muted); }
/* My Wellness → Settings: a number or e-mail waiting to be confirmed (review REG-1, REG-3, REG-4). */
#ht-patient-dashboard .ht-pending { margin: 0 0 var(--space-3); }
#ht-patient-dashboard .ht-pending p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-1); }
#ht-patient-dashboard .ht-pending .ht-btn { margin: 0; }
/* My Wellness → Settings: "Confirm it's you" before the WhatsApp number changes (spec §6.1) — the code sent to the number on file,
   a new code, or the account password (Message pattern: the green tint with a 4 px green left border, as on My Account). */
#ht-patient-dashboard .ht-stepup { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--ht-green); border-radius: var(--radius-control); background: var(--surface-tint-green); color: var(--text-body); font-size: var(--type-small); }
#ht-patient-dashboard .ht-stepup[hidden] { display: none; }
#ht-patient-dashboard .ht-stepup p { margin: 0 0 var(--space-3); }
#ht-patient-dashboard .ht-stepup .ht-stepup__title { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); color: var(--ht-ink); font-size: var(--type-body); }
#ht-patient-dashboard .ht-stepup__msg:empty { display: none; }
#ht-patient-dashboard .ht-stepup__msg.is-error { color: var(--ht-error-dark); }
#ht-patient-dashboard .ht-stepup .ht-field { margin: 0 0 var(--space-3); }
#ht-patient-dashboard .ht-stepup .ht-stepup__code { max-width: 12ch; letter-spacing: var(--space-1); text-align: center; font-size: var(--type-h3); }
#ht-patient-dashboard .ht-stepup__alt { margin: 0 0 var(--space-3); }
#ht-patient-dashboard .ht-stepup__alt summary { display: flex; align-items: center; min-height: var(--target-min); color: var(--ht-green-dark); font-weight: 600; cursor: pointer; }
#ht-patient-dashboard .ht-stepup .ht-stepup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; }
#ht-patient-dashboard .ht-stepup__actions .ht-btn { margin: 0; }
#ht-patient-dashboard .ht-stepup__link { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0; background: none; box-shadow: none; color: var(--ht-green-dark); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#ht-patient-dashboard .ht-stepup__link[aria-busy="true"] { cursor: progress; text-decoration: none; }
/* 2.29.1 (RR3-3 "One-tap code", RR3-1): the e-mail waiting is confirmed in Settings — its status line after the code box. */
#ht-patient-dashboard #ht-pe-status { margin: 0 0 var(--space-3); color: var(--text-body); font-size: var(--type-small); }
#ht-patient-dashboard #ht-pe-status:empty { display: none; }