/* Dana Health Companion — the panes of the card (D). health-presenter.mjs and the health-cards-*.mjs modules
   build them with DOM calls inside #presentation-body: the ID keypad, the demo record with check-in, triage
   (one question at a time), care (level, fastest care, pharmacy, the red emergency card), guidance with the
   crisis card, and the three-panel vision. Loaded after health-display.css and uses only its tokens.
   The look: calm and clinical. White cards on the light green-grey page, MOH green for the one next step,
   clinical teal-blue for information, the gold only as thin hairlines around the demo labels. Level colours
   always come with an icon and a word. Everything fits the card at 720×1280 (about 29 × 24 rem of body);
   a pane may scroll vertically, never horizontally. Arabic mirrors through logical properties.
   WebView rules (HSD-215, Mali-G52, beside a WebRTC decode): no filter, backdrop-filter, mask, mix-blend-mode,
   clip-path or will-change; no animated box-shadow; only transform and opacity move, and only once when a
   new screen appears (.health-enter), never on every paint. Touch targets are at least --control-sm (49 px).
   Pitfalls from health-display.css: every <button> is position:relative + overflow:hidden and may get a
   .ripple <span> on press; svg is 1.2rem, stroked and unfilled; `.presentation h3` sets size and weight with
   specificity (0,1,1), so h3 rules here start with `.health-pane h3`. */

/* Shared ---------------------------------------------------------------------------------------------- */
.health-pane{min-width:0}
.health-pane h3,.health-pane p,.health-pane figure,.health-pane ul,.health-pane ol{margin:0}
.health-pane ul,.health-pane ol{padding:0;list-style:none}
.health-content{display:grid;gap:var(--s4);align-content:start;min-width:0}
.health-content.health-enter{animation:health-rise var(--normal) var(--ease) both}
@keyframes health-rise{from{opacity:0;transform:translateY(.5rem)}}
@keyframes health-pop{from{opacity:0;transform:scale(.97)}}
.health-icon{width:1.2rem;height:1.2rem}
[dir=rtl] .health-icon-dir{transform:scaleX(-1)}
.health-ltr{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.health-muted{font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.health-note{font-size:var(--fs-xs);line-height:1.45;color:var(--muted);text-align:center}
.health-label{font-size:var(--fs-xs);font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Every card says it is a demo: a quiet line framed by two gold hairlines. */
.health-demo-label{display:flex;align-items:center;justify-content:center;gap:var(--s3);font-size:var(--fs-xs);font-weight:500;line-height:1.4;color:var(--gold-text);text-align:center}
.health-demo-label::before,.health-demo-label::after{content:'';flex:0 1 2.4rem;height:1px;background:var(--gold)}
.health-empty{display:grid;justify-items:center;gap:var(--s3);padding:var(--s8) var(--s5);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);color:var(--muted);text-align:center;font-size:var(--fs-md);line-height:1.45}
.health-empty>.health-icon{width:1.6rem;height:1.6rem;color:var(--secondary)}
.health-empty .health-cta{margin-top:var(--s2)}
.health-pane h3.health-section-title{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:600;line-height:1.35;color:var(--primary-700)}
.health-section-title .health-icon{width:1.05rem;height:1.05rem}
.health-bullets{display:grid;gap:var(--s2)}
.health-bullets li{position:relative;padding-inline-start:var(--s6);font-size:var(--fs-md);line-height:1.4}
.health-bullets li::before{content:'';position:absolute;inset-inline-start:.25rem;top:.6em;width:.4rem;height:.4rem;border-radius:50%;background:var(--primary)}

/* Buttons: one green next step per screen; everything else quiet. */
.health-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control-sm);padding:0 var(--s5);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.health-button-small{padding:0 var(--s4)}
.health-cta{display:flex;align-items:center;justify-content:center;gap:var(--s3);width:100%;min-height:var(--control);padding:0 var(--s8);border:0;border-radius:var(--radius-pill);
  background:var(--primary);color:var(--surface);font-size:var(--fs-md);font-weight:600;line-height:1.2;box-shadow:var(--shadow-soft)}
.health-cta .health-icon{width:1.3rem;height:1.3rem;stroke-width:2}
.health-cta .ripple,.health-key-ok.is-ready .ripple,.health-deck-next .ripple{background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 70%)}
.health-cta-quiet{border:1px solid var(--primary);background:var(--primary-50);color:var(--primary-700);box-shadow:none}
.health-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--control-sm);padding:0 var(--s3);border:0;background:transparent;color:var(--primary-700);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.health-link .health-icon{width:1.05rem;height:1.05rem}
.health-finish{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--control-sm);margin-top:var(--s2);border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.health-finish .health-icon{width:1.05rem;height:1.05rem}
@media(hover:hover){
  .health-button:hover,.health-finish:hover{border-color:var(--primary);color:var(--primary-700)}
  .health-cta:hover{background:var(--primary-700)}
  .health-link:hover{color:var(--primary-900)}
}
/* Segmented control (person switch, care options). */
.health-segment{display:flex;gap:var(--s1);padding:var(--s1);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-2)}
.health-segment-button{display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;gap:var(--s2);min-width:0;min-height:var(--control-sm);padding:0 var(--s4);border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.health-segment-button .health-icon{width:1.05rem;height:1.05rem}
.health-segment-button[aria-pressed=true]{background:var(--surface);color:var(--primary-700);box-shadow:var(--shadow-soft)}
.health-tip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--radius-lg);background:var(--secondary-50);color:var(--secondary-700);font-size:var(--fs-sm);font-weight:500;line-height:1.4}
.health-tip>.health-icon{width:1.2rem;height:1.2rem}
.health-added{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:600;color:var(--success)}
.health-confirmed{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--radius-lg);background:var(--primary-50);color:var(--primary-900)}
.health-confirmed b{display:block;font-size:var(--fs-md);font-weight:600}
.health-confirmed small{display:block;font-size:var(--fs-sm);color:var(--primary-700)}
.health-confirmed-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--primary);color:var(--surface)}
.health-confirmed-mark .health-icon{stroke-width:2.4}

/* Identify: ten slots, a 3×4 keypad, demo chips ------------------------------------------------------- */
.health-identify{display:grid;gap:var(--s4)}
.health-say-name{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--primary);border-radius:var(--radius-lg);
  background:var(--primary-50);color:var(--primary-700);font-size:var(--fs-md);font-weight:600;line-height:1.3}
.health-say-name .health-icon{flex:none;width:1.5rem;height:1.5rem;color:var(--primary)}
.health-say-name>span{flex:1 1 auto;min-width:0}
.health-say-name .health-button-small{flex:none}
.health-say-name.is-pending{border-color:var(--secondary);background:var(--secondary-50);color:var(--secondary-700)}
.health-say-name.is-pending .health-icon{color:var(--secondary)}
.health-say-name.is-verified{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.health-say-name.is-verified .health-icon{color:var(--surface)}
.health-say-name.is-verified .health-button-small{background:var(--surface);color:var(--primary-700);border-color:var(--surface)}
.health-identify-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.health-slot-count{font-size:var(--fs-xs);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.health-slot-count.is-ready{color:var(--primary-700)}
.health-slots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--s2);margin-top:calc(-1 * var(--s2))}
.health-slot{display:grid;place-items:center;height:2.7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  font-size:var(--fs-xl);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.health-slot.is-filled{border-color:var(--line-strong);background:var(--surface)}
.health-slot.is-next{border-color:var(--primary);background:var(--surface);box-shadow:inset 0 -.2rem 0 var(--primary)}
.health-slot.is-error{border-color:var(--danger);background:var(--danger-50)}
.health-keypad-message{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:1.6rem;font-size:var(--fs-sm);line-height:1.35;color:var(--muted);text-align:center}
.health-keypad-message.is-error{color:var(--danger);font-weight:600}
.health-keypad-message .health-icon{width:1.1rem;height:1.1rem}
.health-identify-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:var(--s6)}
.health-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.health-key{display:grid;place-items:center;height:2.75rem;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);
  font-size:var(--fs-xl);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 .12rem 0 var(--line)}
.health-key:active:not(:disabled){background:var(--primary-50);border-color:var(--primary)}
.health-key .health-icon{width:1.5rem;height:1.5rem}
.health-key-erase{background:var(--surface-2);color:var(--muted)}
.health-key-ok{background:var(--surface-2);color:var(--muted)}
.health-key-ok.is-ready{border-color:var(--primary);background:var(--primary);color:var(--surface);box-shadow:0 .12rem 0 var(--primary-700)}
.health-key-ok.is-ready .health-icon{stroke-width:2.4}
.health-demo-ids{display:grid;align-content:start;gap:var(--s2)}
.health-chip-button{display:flex;align-items:center;gap:var(--s3);min-height:var(--control-sm);padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:600;text-align:start}
.health-chip-button .health-icon{width:1.05rem;height:1.05rem;color:var(--primary)}
.health-chip-button:active:not(:disabled){background:var(--primary-50);border-color:var(--primary)}
.health-privacy{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s2);font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.health-privacy .health-icon{width:1rem;height:1rem;margin-top:.1rem;color:var(--primary-700)}

/* Record ---------------------------------------------------------------------------------------------- */
.health-record-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.health-record-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--s4);padding:var(--s3) var(--s5)}
.health-avatar{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--primary);border-radius:50%;background:var(--primary-50);color:var(--primary-700);font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em}
.health-record-ident{display:grid;gap:.1rem;min-width:0}
.health-pane h3.health-record-name{font-size:var(--fs-md);font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.health-record-facts{font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.health-record-facts .health-ltr{color:var(--ink);font-weight:600}
.health-mask{letter-spacing:.04em}
.health-record-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.health-coverage,.health-allergy{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;line-height:1.3}
.health-coverage{background:var(--secondary-50);color:var(--secondary-700)}
.health-allergy{background:var(--primary-50);color:var(--flag-normal)}
.health-allergy.has-allergy{background:var(--danger-50);color:var(--danger)}
.health-coverage .health-icon,.health-allergy .health-icon{width:.95rem;height:.95rem}
/* The watermark band: quiet diagonal stripes under the header, never over the data. */
.health-watermark{padding:var(--s1) var(--s5);border-top:1px solid var(--line);background:repeating-linear-gradient(135deg,var(--surface-2) 0 .5rem,var(--surface) .5rem 1rem)}
/* The tabs stay at the top while a long section scrolls under them (an opaque band, no shadow). */
.health-tabs{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--surface)}
.health-tab{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-width:0;min-height:var(--control-sm);padding:0 var(--s1);border:0;border-radius:var(--radius) var(--radius) 0 0;
  background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:600;line-height:1.2;white-space:nowrap}
.health-tab .health-icon{width:1.05rem;height:1.05rem}
.health-tab[aria-selected=true]{color:var(--primary-700);box-shadow:inset 0 -.18rem 0 var(--primary)}
.health-tabpanel{display:grid;gap:var(--s4);min-width:0}
/* Today: the appointment, then the queue card after check-in. */
.health-appt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:var(--s4) var(--s5);padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.health-appt>.health-cta{grid-column:1/-1}
.health-appt-time{display:grid;align-content:center;justify-items:center;gap:var(--s1);min-width:5.6rem;padding:var(--s3);border-radius:var(--radius);background:var(--primary);color:var(--surface)}
.health-appt-time small{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.health-appt-time b{font-size:var(--fs-xl);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.health-appt-info{display:grid;align-content:center;gap:var(--s1);min-width:0;font-size:var(--fs-sm);line-height:1.35;color:var(--muted)}
.health-appt-clinic{font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.health-appt-where{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);color:var(--ink)}
.health-appt-where .health-icon{width:1rem;height:1rem;color:var(--primary-700)}
.health-queue{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 7rem;align-items:center;gap:var(--s5);padding:var(--s6) var(--s6) var(--s5);
  border-radius:var(--radius-lg);background:var(--primary);color:var(--surface);box-shadow:var(--shadow-card)}
.health-queue::before{content:'';position:absolute;inset:0 0 auto;height:.15rem;background:var(--gold)}
.health-queue-main{display:grid;gap:var(--s1);min-width:0}
.health-queue-kicker{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);font-size:var(--fs-sm);font-weight:600}
.health-queue-kicker .health-icon{width:1.1rem;height:1.1rem;stroke-width:2.4}
.health-queue-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.health-queue-code{display:block;font-size:var(--fs-title);font-weight:600;line-height:1;letter-spacing:.02em}
.health-queue-meta{margin-top:var(--s2);font-size:var(--fs-md)}
.health-queue-qr{display:grid;justify-items:center;gap:var(--s1);padding:var(--s2);border-radius:var(--radius);background:var(--surface);color:var(--muted)}
.health-queue-qr figcaption{font-size:var(--fs-xs);line-height:1.2}
.health-qr-code{display:block;width:100%;height:auto;aspect-ratio:1}
.health-queue-where{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.health-queue-where .health-icon{width:1rem;height:1rem;color:var(--primary-700)}
.health-content.health-enter .health-queue{animation:health-pop var(--slow) var(--ease) both}
/* Three steps on one green thread. */
.health-steps{position:relative;display:grid;gap:var(--s3)}
.health-steps::before{content:'';position:absolute;inset-inline-start:calc(1rem - 1px);top:1rem;bottom:1rem;width:2px;background:var(--primary-50)}
.health-steps li{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:var(--s4);font-size:var(--fs-md);line-height:1.4}
.health-step-number{display:grid;place-items:center;width:2rem;height:2rem;border:1.5px solid var(--primary);border-radius:50%;background:var(--surface);color:var(--primary-700);font-size:var(--fs-sm);font-weight:600}
/* Results, vaccines, medicines: one list card with hairlines. */
.health-results,.health-rows{display:grid;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.health-result,.health-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s1) var(--s4);padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
.health-result:first-child,.health-row:first-child{border-top:0}
.health-row-icon{grid-template-columns:auto minmax(0,1fr)}
.health-row-icon>.health-icon{color:var(--secondary)}
.health-result-main,.health-row-main{display:grid;gap:.1rem;min-width:0}
.health-result-main b,.health-row-main b{font-size:var(--fs-md);font-weight:600;line-height:1.3}
.health-result-main small,.health-row-main small{font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.health-result-note{font-size:var(--fs-sm);line-height:1.35;color:var(--muted)}
.health-result-value{display:grid;justify-items:end;gap:var(--s1);text-align:end}
.health-result-number{font-size:var(--fs-lg);font-weight:600;line-height:1.1;color:var(--ink)}
.health-result-alt{font-size:var(--fs-xs);color:var(--muted)}
.health-result-prev{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:var(--fs-xs);color:var(--muted)}
.health-result-prev .health-icon{width:.95rem;height:.95rem}
.health-flag,.health-status{display:inline-flex;align-items:center;gap:var(--s1);padding:.12rem var(--s3);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.health-flag .health-icon,.health-status .health-icon{width:.9rem;height:.9rem;stroke-width:2.2}
.health-flag-normal .health-flag{background:var(--primary-50);color:var(--flag-normal)}
.health-flag-borderline .health-flag{background:var(--level-3-bg);color:var(--flag-borderline)}
.health-flag-high .health-flag,.health-flag-low .health-flag{background:var(--danger-50);color:var(--flag-alert)}
.health-flag-high .health-flag .health-icon,.health-flag-low .health-flag .health-icon{fill:currentColor}
.health-vaccine-done .health-status{background:var(--primary-50);color:var(--flag-normal)}
.health-vaccine-due .health-status{background:var(--secondary-50);color:var(--secondary-700)}
.health-vaccine-overdue .health-status{background:var(--level-3-bg);color:var(--flag-borderline)}

/* Triage ---------------------------------------------------------------------------------------------- */
.health-triage-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.health-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-width:0}
.health-fact{display:inline-flex;align-items:center;gap:var(--s2);min-height:2rem;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-2);
  color:var(--ink);font-size:var(--fs-sm);font-weight:500;line-height:1.2;width:fit-content}
.health-fact .health-icon{width:1rem;height:1rem;color:var(--primary-700)}
.health-fact.is-danger{border-color:var(--danger);background:var(--danger-50);color:var(--danger)}
.health-fact.is-danger .health-icon{color:var(--danger)}
.health-progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4)}
.health-progress .health-link{margin-inline-end:calc(-1 * var(--s3))}
.health-progress-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-700);white-space:nowrap}
.health-progress-track{display:block;overflow:hidden;height:.3rem;border-radius:var(--radius-pill);background:var(--line)}
.health-progress-fill{display:block;width:100%;height:100%;background:var(--primary);transform:scaleX(var(--progress,0));transform-origin:left center}
[dir=rtl] .health-progress-fill{transform-origin:right center}
.health-question{display:grid;gap:var(--s5);padding:var(--s5) var(--s4) var(--s4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-soft)}
.health-question-text{padding-inline:var(--s2);font-size:var(--fs-xl);font-weight:500;line-height:1.25;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.health-question-text.is-long{font-size:var(--fs-lg);line-height:1.35}
.health-content.health-enter .health-question{animation:health-rise var(--normal) 60ms var(--ease) both}
.health-answers{display:grid;gap:var(--s3)}
.health-answers-tri,.health-answers-who{grid-template-columns:repeat(3,minmax(0,1fr))}
.health-answers-complaint,.health-answers-body_area,.health-answers-age{grid-template-columns:repeat(2,minmax(0,1fr))}
.health-answers-age .health-answer:last-child{grid-column:1/-1}
.health-answer{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-width:0;min-height:var(--control);padding:var(--s2) var(--s4);border:1.5px solid var(--line-strong);border-radius:var(--radius-lg);
  background:var(--surface);color:var(--ink);font-size:var(--fs-md);font-weight:600;line-height:1.2;text-align:center}
.health-answer:active:not(:disabled){border-color:var(--primary);background:var(--primary-50);color:var(--primary-700)}
@media(hover:hover){.health-answer:hover{border-color:var(--primary);color:var(--primary-700)}}
.health-answers-who .health-answer{flex-direction:column;min-height:4.4rem}
.health-answers-who .health-icon{width:1.5rem;height:1.5rem;color:var(--primary)}
/* 0–10: one joined scale (every number ≥ 48 px wide), a quiet green-to-red strip below it. */
.health-pain-scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));overflow:hidden;padding-bottom:.25rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-lg);
  background:linear-gradient(90deg,var(--level-5),var(--level-3-fill) 55%,var(--level-1)) bottom/100% .25rem no-repeat,var(--surface)}
.health-pain-scale[dir=rtl]{background-image:linear-gradient(270deg,var(--level-5),var(--level-3-fill) 55%,var(--level-1))}
.health-answer.health-pain{min-height:var(--control);padding:0;border:0;border-inline-start:1px solid var(--line);border-radius:0;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.health-answer.health-pain:first-child{border-inline-start:0}
.health-pain-ends{display:flex;justify-content:space-between;gap:var(--s4);padding-inline:var(--s1);font-size:var(--fs-xs);color:var(--muted)}
/* The red line sits in the flow under the question: a sticky line covered the answer buttons on long questions,
   and the footer's emergency line is on screen at all times anyway (integrator, 2026-10-03). */
/* A label, not a pill: it looks like what it is (information; the screen never dials). */
.health-danger-line{display:flex;align-items:center;gap:var(--s2);min-height:0;padding:var(--s1) 0;border-top:1px solid rgba(185,28,28,.2);
  background:transparent;color:var(--danger);font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.health-danger-line .health-icon{width:1.1rem;height:1.1rem}
.health-danger-line .health-ltr{font-weight:700}
.health-answered{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.health-answered>.health-label{flex:1 0 100%}
.health-answer-chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--control-sm);padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--ink);font-size:var(--fs-sm);font-weight:500}
.health-answer-chip .health-icon{width:.85rem;height:.85rem;color:var(--muted)}
.health-triage-done{display:grid;justify-items:start;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-2);font-size:var(--fs-md)}

/* Care ------------------------------------------------------------------------------------------------ */
/* The level badge: colour + icon + word. Level 3 fills in amber with dark text; level 4 text uses the darker teal for contrast. */
.health-level{--lv:var(--level-5);--lv-bg:var(--level-5-bg);--lv-ink:var(--level-5);--lv-mark:var(--surface);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-inline-start:.35rem solid var(--lv);border-radius:var(--radius-lg);background:var(--lv-bg)}
.health-level-1{--lv:var(--level-1);--lv-bg:var(--level-1-bg);--lv-ink:var(--level-1)}
.health-level-2{--lv:var(--level-2);--lv-bg:var(--level-2-bg);--lv-ink:var(--level-2)}
.health-level-3{--lv:var(--level-3-fill);--lv-bg:var(--level-3-bg);--lv-ink:var(--level-3);--lv-mark:var(--ink)}
.health-level-4{--lv:var(--level-4);--lv-bg:var(--level-4-bg);--lv-ink:var(--secondary-700)}
.health-level-mark{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--lv);color:var(--lv-mark)}
.health-level-mark .health-icon{width:1.6rem;height:1.6rem;stroke-width:2}
.health-level-text{display:grid;gap:.1rem;min-width:0}
.health-level-text small{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lv-ink)}
.health-level-text b{font-size:var(--fs-xl);font-weight:600;line-height:1.15;color:var(--lv-ink)}
.health-level.is-compact{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--s3) var(--s4)}
/* Fastest care and pharmacy: the compact badge stays whole at the top while the list scrolls (a confirmation
   scrolled into view never slices it). Opaque: its background is the level's own light colour. */
.health-pane-care .health-content>.health-level.is-compact{position:sticky;top:calc(-1 * var(--s2));z-index:1;box-shadow:0 0 0 var(--s2) var(--surface)}
.health-level .health-level-tag{padding-inline-start:var(--s2)}
.health-level .health-level-tag::before,.health-level .health-level-tag::after{display:none}
.health-level.is-compact .health-level-mark{width:2.4rem;height:2.4rem}
.health-level.is-compact .health-level-text b{font-size:var(--fs-lg)}
.health-content.health-enter .health-level{animation:health-pop var(--slow) var(--ease) both}
.health-care-top{display:grid;gap:var(--s2)}
.health-demo-label.health-level-tag{font-weight:600;color:var(--muted)}
.health-reason{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--fs-md);line-height:1.45;color:var(--ink)}
.health-reason>.health-icon{margin-top:.15rem;color:var(--secondary)}
.health-care-grid{display:grid;gap:var(--s3)}
.health-care-block{display:grid;gap:var(--s3);padding:var(--s5);border-radius:var(--radius-lg);background:var(--surface-2)}
.health-care-watch{border:1px solid var(--line);background:var(--surface)}
.health-pane .health-care-watch h3.health-section-title{color:var(--warning)}
.health-care-watch .health-bullets li::before{background:var(--warning)}
/* Fastest care: invented places, simulated waits, fastest first. */
.health-sim{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.health-sim>.health-icon{width:1.1rem;height:1.1rem;color:var(--secondary)}
.health-sim-tag{margin-inline-start:auto;padding:.12rem var(--s3);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.health-places{display:grid;gap:var(--s3)}
.health-place{display:grid;gap:var(--s3);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.health-place.is-fastest{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary),var(--shadow-soft)}
.health-place-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4)}
.health-place-mark{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--radius);background:var(--primary-50);color:var(--primary-700)}
.health-place-name{display:grid;gap:.1rem;min-width:0}
.health-place-name b{font-size:var(--fs-md);font-weight:600;line-height:1.25}
.health-place-name small{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.is-fastest .health-place-name small{color:var(--primary-700)}
.health-place-total{display:grid;justify-items:center;gap:.1rem;line-height:1}
.health-place-total b{font-size:var(--fs-2xl);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.is-fastest .health-place-total b{color:var(--primary-700)}
.health-place-total small{font-size:var(--fs-xs);color:var(--muted)}
.health-place-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font-size:var(--fs-sm);line-height:1.35;color:var(--ink)}
.health-place-meta .health-icon{width:1rem;height:1rem;color:var(--muted)}
.health-place-hours{font-size:var(--fs-xs);color:var(--muted)}
.health-place-dir{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.health-place-dir .health-icon{width:1rem;height:1rem;margin-top:.15rem}
/* Pharmacy delivery. */
.health-pharmacy{display:grid;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.health-pharmacy-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s4)}
.health-pharmacy-head .health-place-mark{background:var(--secondary-50);color:var(--secondary-700)}
.health-pharmacy-items{display:flex;flex-wrap:wrap;gap:var(--s2)}
.health-pharmacy-items li{display:inline-flex;align-items:center;gap:var(--s2);min-height:2rem;padding:0 var(--s4);border-radius:var(--radius-pill);background:var(--surface-2);font-size:var(--fs-sm);font-weight:500}
.health-pharmacy-items .health-icon{color:var(--primary);stroke-width:2.2}
.health-place-name small.health-pharmacy-eta{font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--secondary-700)}
/* Emergency: the whole card turns red; nothing competes with the numbers. */
.health-emergency{display:grid;gap:var(--s4);padding:var(--s6);border-radius:var(--radius-lg);background:var(--level-1);color:var(--surface);box-shadow:var(--shadow-card)}
.health-content.health-enter .health-emergency{animation:health-pop var(--normal) var(--ease) both}
.health-emergency-kicker{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.health-emergency-kicker .health-icon{width:1.4rem;height:1.4rem;stroke-width:2}
.health-emergency-call{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);font-size:var(--fs-xl);font-weight:500;line-height:1.1}
.health-emergency-number{font-size:var(--fs-title);font-weight:700;line-height:1;letter-spacing:.02em}
.health-emergency-text{font-size:var(--fs-md);line-height:1.45}
.health-emergency-place{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--s3);padding:var(--s4);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.health-emergency-place>.health-icon{width:1.4rem;height:1.4rem;color:var(--level-1)}
.health-emergency-place small{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--level-1)}
.health-emergency-place b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.3}
.health-emergency-place span{display:block;font-size:var(--fs-sm);color:var(--muted)}
.health-emergency-todo li{font-size:var(--fs-md)}
.health-emergency-todo li::before{background:var(--surface)}
.health-emergency-drive{display:grid;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--level-1-bg)}
.health-emergency-drive>b{font-size:var(--fs-md);font-weight:600}
.health-emergency-drive .health-emergency-todo li{font-size:var(--fs-sm)}
.health-emergency-why,.health-emergency-stop{font-size:var(--fs-sm);line-height:1.45}
.health-emergency .health-demo-label{color:var(--level-1-bg)}
.health-emergency .health-demo-label::before,.health-emergency .health-demo-label::after{background:var(--level-1-bg)}

/* Guidance and the crisis card ------------------------------------------------------------------------ */
.health-topics{display:grid;gap:var(--s3)}
.health-topic{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);width:100%;min-height:5rem;padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);color:var(--ink);text-align:start;box-shadow:var(--shadow-soft)}
.health-topic:active:not(:disabled){border-color:var(--primary);background:var(--primary-50)}
.health-topic-mark{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-lg);background:var(--primary-50);color:var(--primary-700)}
.health-topic-mark .health-icon{width:1.5rem;height:1.5rem}
.health-topic-text{display:grid;gap:.15rem;min-width:0}
.health-topic-text small{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-700)}
.health-topic-text b{font-size:var(--fs-lg);font-weight:600;line-height:1.2}
.health-topic-intro{display:-webkit-box;overflow:hidden;font-size:var(--fs-sm);line-height:1.35;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.health-topic-go{color:var(--muted)}
.health-back{justify-self:start;margin-inline-start:calc(-1 * var(--s3))}
.health-topic-page{display:grid;gap:var(--s5)}
.health-topic-kicker{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-700)}
.health-topic-lead{font-size:var(--fs-lg);line-height:1.4;color:var(--ink)}
.health-topic-section{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.health-watch{display:grid;gap:var(--s3);padding:var(--s5);border-inline-start:.3rem solid var(--level-3-fill);border-radius:var(--radius-lg);background:var(--level-3-bg)}
.health-pane .health-watch h3.health-section-title{color:var(--level-3)}
.health-watch .health-bullets li::before{background:var(--level-3-fill)}
.health-crisis{display:grid;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-2)}
.health-crisis.is-prominent{border-color:var(--danger);background:var(--danger-50)}
.health-content.health-enter .health-crisis.is-prominent{animation:health-pop var(--normal) var(--ease) both}
.health-crisis-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s3)}
.health-crisis-head>.health-icon{width:1.6rem;height:1.6rem;color:var(--secondary)}
.is-prominent .health-crisis-head>.health-icon{color:var(--danger)}
.health-crisis-head b{display:block;font-size:var(--fs-lg);font-weight:600;line-height:1.2}
.is-prominent .health-crisis-head b{color:var(--danger)}
.health-crisis-head small{display:block;font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.health-crisis-lines{display:grid;gap:var(--s2)}
.health-crisis-line{display:grid;grid-template-columns:8.6rem minmax(0,1fr);align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--radius);background:var(--surface)}
.health-crisis-number{font-size:var(--fs-lg);font-weight:700;line-height:1.1;color:var(--ink)}
.health-crisis-number .health-icon{width:1.5rem;height:1.5rem;color:var(--secondary)}
.health-crisis-emergency .health-crisis-number{color:var(--danger)}
.health-crisis-text{display:grid;gap:.1rem;min-width:0}
.health-crisis-text b{font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.health-crisis-text small{font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}

/* Vision: three panels ------------------------------------------------------------------------------- */
.health-vision{display:grid;align-content:start;gap:var(--s3)}
.health-vision-lead{font-size:var(--fs-md);line-height:1.45;color:var(--muted)}
.health-journey{position:relative;display:grid;gap:var(--s3)}
.health-journey::before{content:'';position:absolute;inset-inline-start:calc(1.4rem - 1px);top:1.4rem;bottom:1.4rem;width:2px;background:var(--primary-50)}
.health-journey-step{position:relative;display:grid;grid-template-columns:2.8rem minmax(0,1fr);align-items:center;gap:var(--s4)}
.health-journey-mark{display:grid;place-items:center;width:2.8rem;height:2.8rem;border:1.5px solid var(--primary);border-radius:50%;background:var(--surface);color:var(--primary-700)}
.health-journey-step:last-child .health-journey-mark{background:var(--primary);color:var(--surface)}
.health-journey-text{display:grid;gap:.1rem;min-width:0}
.health-journey-text b{font-size:var(--fs-md);font-weight:600;line-height:1.25}
.health-journey-text small{font-size:var(--fs-sm);line-height:1.35;color:var(--muted)}
.health-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:var(--s3);padding:var(--s3) var(--s4) var(--s2);border-radius:var(--radius-lg);background:var(--surface-2)}
.health-size{display:grid;justify-items:center;gap:var(--s2)}
.health-size-screen{display:grid;place-items:center;border:2px solid var(--ink);border-radius:.3rem;background:var(--primary-50);color:var(--primary-700);font-size:var(--fs-sm);font-weight:700}
.health-size-s .health-size-screen{width:1.5rem;height:2rem}
.health-size-m .health-size-screen{width:2rem;height:2.8rem}
.health-size-l .health-size-screen{width:2.5rem;height:3.6rem}
.health-size-xl .health-size-screen{width:3.6rem;height:4.4rem;background:var(--primary);color:var(--surface)}
.health-size small{font-size:var(--fs-xs);line-height:1.3;color:var(--muted);text-align:center}
.health-features{display:grid;gap:var(--s3)}
.health-vision .health-features{gap:var(--s2)}   /* panel 2 fits the card at 720×1280 without scrolling */
.health-features li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:center;gap:var(--s4)}
.health-vision .health-features li{gap:var(--s3)}
.health-feature-mark{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--radius);background:var(--secondary-50);color:var(--secondary-700)}
.health-feature-text{display:grid;gap:.1rem;min-width:0}
.health-feature-text b{font-size:var(--fs-md);font-weight:600;line-height:1.25}
.health-feature-text small{font-size:var(--fs-sm);line-height:1.35;color:var(--muted)}
.health-deck-nav{position:sticky;bottom:0;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding-block:var(--s3);border-top:1px solid var(--line);background:var(--surface)}
.health-deck-arrow{display:grid;place-items:center;width:var(--control-sm);height:var(--control-sm);padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink)}
.health-deck-arrow .health-icon{width:1.3rem;height:1.3rem;stroke-width:2}
.health-deck-next{border-color:var(--primary);background:var(--primary);color:var(--surface)}
.health-deck-dots{display:flex;justify-content:center;gap:var(--s1);min-width:0}
.health-deck-dot{display:grid;place-items:center;width:var(--control-sm);height:var(--control-sm);padding:0;border:0;background:transparent}
.health-deck-dot>span:not(.ripple){display:block;width:.5rem;height:.5rem;border-radius:var(--radius-pill);background:var(--line-strong)}
.health-deck-dot[aria-current=step]>span:not(.ripple){width:1.4rem;background:var(--primary)}

/* Arabic: no letter-spacing or capitals in Arabic labels ---------------------------------------------- */
[dir=rtl] .health-label,[dir=rtl] .health-progress-label,[dir=rtl] .health-level-text small,[dir=rtl] .health-place-name small,[dir=rtl] .health-topic-text small,
[dir=rtl] .health-topic-kicker,[dir=rtl] .health-queue-label,[dir=rtl] .health-appt-time small,[dir=rtl] .health-emergency-kicker,[dir=rtl] .health-emergency-place small{letter-spacing:0;text-transform:none}

/* Calm by request ------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .health-content.health-enter,.health-content.health-enter *{animation:none!important}
}

/* Review fixes (2026-10-03) */
.health-restart{justify-self:center;margin-top:var(--s2)}
.health-pharmacy .health-note{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);text-align:start}
.health-deck-try{min-width:0;padding-inline:var(--s5);white-space:nowrap}