/* Dana Health Companion: an AI health companion dressed as a nurse, on the HSD-215 portrait screen
   (1080×1920 at density 240 = 720×1280 CSS px, DPR 1.5, Mali-G52), read from one to two metres.
   Forked from the hotel display's stage (same root size, presenting tile and WebView rules), repainted
   as a calm, light clinical theme: white and a very light green-grey, MOH green #008755 as the one
   accent, clinical teal-blue #0A7EA4 for focus and secondary states, MOH gold #9B945F only as a thin line.
   WebView rules (CONTRACT 2.3): no filter, backdrop-filter, mask, mix-blend-mode, clip-path or will-change;
   no animated box-shadow; only transform and opacity move; nothing animates on every paint.
   This file owns the tokens, the stage, the top bar, the start cards, the card shell, the footer, the
   settings sheet, boot and access. The panes inside #presentation-body live in health-panels.css (D). */
:root{
  color-scheme:light;
  --bg:#F5F9F7; --bg-deep:#E8F1ED; --surface:#FFFFFF; --surface-2:#F0F5F3;
  --ink:#10261E; --muted:#4B5E57; --dim:#6B7C76; --line:#D9E5E0; --line-strong:#B9CCC4;
  --primary:#008755; --primary-700:#006B43; --primary-900:#00452B; --primary-50:#E6F4EE;
  --secondary:#0A7EA4; --secondary-700:#08607E; --secondary-50:#E7F3F8;
  --gold:#9B945F; --gold-text:#6F6A3D;
  --danger:#B91C1C; --danger-50:#FDECEC; --warning:#B45309; --success:#1E7B34;
  --level-1:#C62828; --level-1-bg:#FDECEC; --level-2:#C2410C; --level-2-bg:#FFF1E8;
  --level-3:#A16207; --level-3-bg:#FEF6E0; --level-3-fill:#F0B323;
  --level-4:#0A7EA4; --level-4-bg:#E7F3F8; --level-5:#2E7D32; --level-5-bg:#E9F5EA;
  --flag-normal:#1E7B34; --flag-borderline:#B45309; --flag-alert:#B91C1C;
  --font:'IBM Plex Sans','IBM Plex Sans Arabic',Arial,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','IBM Plex Sans',Tahoma,sans-serif;
  --s1:.2rem;--s2:.4rem;--s3:.6rem;--s4:.8rem;--s5:1rem;--s6:1.2rem;--s8:1.6rem;--s10:2rem;--s12:2.4rem;--s16:3.2rem;
  --fs-xs:.74rem;--fs-sm:.86rem;--fs-md:1rem;--fs-lg:1.22rem;--fs-xl:1.6rem;--fs-2xl:2rem;--fs-title:2.6rem;
  --gutter:1.6rem;--control:3rem;--control-sm:2.4rem;
  --radius:.5rem;--radius-lg:1rem;--radius-pill:999px;
  --shadow-card:0 .8rem 2rem -1.2rem rgba(16,38,30,.35); --shadow-soft:0 .3rem .9rem -.4rem rgba(16,38,30,.18);
  --fast:160ms;--normal:280ms;--slow:600ms;--ease:cubic-bezier(.2,.7,.2,1);
  --tile:38vw;                     /* Dana's tile while a card is open: 3:4, eye line anchored as in v10 (38 %, not v10's 44 %: the health cards need the height) */
  /* Stage only (this file). The page is always a 9:16 column: the full width on the kiosk and on phones,
     a centred column in a landscape preview window, so a Mac preview shows exactly what the HSD-215 shows. */
  --frame-w:min(100vw,calc(100dvh * 9 / 16));
  --lift:9.5%;                     /* Dana sits higher than a plain cover crop: room for the cards below her chin */
  --touch:3.4rem;                  /* the Talk button and the start cards: about 70 px at 720×1280 */
}
/* Same value as 38vw on the kiosk (a 9:16 screen), and the frame's 38 % in a wider preview window. */
:root{--tile:calc(var(--frame-w) * .38)}
html{font-size:calc(clamp(13px,1.6dvh,31px) * var(--text-scale,1))}   /* 20.48 px at 720×1280 */
[dir=rtl] body{font-family:var(--font-ar)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg-deep);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow:hidden}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;border-radius:var(--radius);
  transition:background-color var(--fast),border-color var(--fast),color var(--fast),transform var(--fast),opacity var(--fast)}
button:disabled,select:disabled{opacity:.45;cursor:not-allowed}
button:active:not(:disabled){transform:scale(.985)}
:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}
svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
/* Press feedback: a small bump (transform only) and a soft ripple from the touch point. */
button.pop{animation:pop .3s var(--ease)}@keyframes pop{40%{transform:scale(1.03)}}
.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,135,85,.16),rgba(0,135,85,0) 70%);transform:scale(0);animation:ripple .7s var(--ease) forwards;pointer-events:none}
.primary-button .ripple,.secondary-button .ripple{background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 70%)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(.8rem)}}
@keyframes fade{from{opacity:0}}

/* Stage ------------------------------------------------------------------------------------------------
   Home: Dana fills the column (the still, the idle loop and the live stream share one 768×1152 framing),
   lifted by --lift so her face sits in the upper half; a light veil carries the cards over her scrubs.
   The column is a grid: top bar · open space over her face · conversation · footer. */
.display{position:relative;isolation:isolate;width:100%;max-width:var(--frame-w);height:100svh;height:100dvh;margin-inline:auto;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;
  padding:0 var(--gutter) max(var(--s4),env(safe-area-inset-bottom));
  background:radial-gradient(ellipse 120% 70% at 50% 28%,#FFFFFF 0%,var(--bg) 52%,var(--bg-deep) 100%)}
.portrait{position:absolute;inset:0;z-index:0;overflow:hidden;background:#D9E2DF;pointer-events:none}
.portrait-still,.portrait-media{position:absolute;inset-inline:0;top:calc(-1 * var(--lift));width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Home: the 768×1152 frame fits the column's width (2:3), a little above the top: headroom under the top bar,
   her shoulders and teal scrubs show, and the 768 px stream is enlarged less (sharper). The eye anchor of the
   glide still holds: the box is exactly the frame's aspect, so cover scales both axes alike. */
body:not(.presenting) .portrait-still,body:not(.presenting) .portrait-media{inset-inline:-8%;width:116%;top:-1.5rem;height:auto;aspect-ratio:2/3}
.portrait-still{z-index:0}#idle-video{z-index:1}.live-video{z-index:2}
.live-video{opacity:0;transition:opacity var(--slow) var(--ease)}.live-video.playing{opacity:1}
.portrait:has(.live-video.playing) #idle-video{visibility:hidden}
.portrait>.shade{z-index:3}.portrait>.halo{display:none}
/* In the tile, a quiet tag says who (and what) she is; on the full stage the greeting does. */
.portrait-tag{display:none}
.presenting .portrait-tag{position:absolute;z-index:4;inset-inline-start:var(--s3);bottom:var(--s3);display:inline-flex;align-items:center;min-height:1.5rem;padding:0 var(--s3);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--primary-700);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;box-shadow:var(--shadow-soft)}
/* The veil: a whisper of white under the top bar, clear over her face, then the page colour over her scrubs.
   Its stops follow the text size, so larger text never sits on an unveiled picture. */
.shade{position:absolute;inset:0;pointer-events:none;
  --veil:calc((var(--text-scale,1) - 1) * 60%);
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 8%,rgba(245,249,247,0) calc(52% - var(--veil)),rgba(245,249,247,.74) calc(59% - var(--veil)),rgba(245,249,247,.93) calc(64% - var(--veil)),var(--bg) calc(69% - var(--veil)))}
/* The static khatam lattice (health-effects.mjs) is the stage's only canvas: a quiet gold hairline motif
   in the lower part of the page, behind the cards. */
.pattern{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.topbar,.conversation,.bottom-bar,.presentation{position:relative;z-index:3;min-width:0}
.topbar{grid-row:1}.presentation{grid-row:2}.conversation{grid-row:3}.bottom-bar{grid-row:4}

/* Top bar: the real MOH logo, small, a gold hairline, the product name; the "Concept demo" pill is never hidden. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:calc(var(--s5) + env(safe-area-inset-top)) 0 var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s4);min-width:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;cursor:default}
.brand-logo{display:block;height:1.5rem;width:auto;max-width:6rem;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.brand-rule{flex:none;width:1px;height:1.3rem;background:var(--gold)}
.brand-title{font-size:var(--fs-sm);font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
[dir=rtl] .brand-title{line-height:1.7}   /* the dots under ي fall below a 1.2 line box and were clipped */
.brand.pop{animation:pop .3s var(--ease)}
.top-actions{display:flex;align-items:center;gap:var(--s3);flex:none}
.demo-pill{display:inline-flex;align-items:center;min-height:1.9rem;padding:0 var(--s4);border:1px solid var(--gold);border-radius:var(--radius-pill);background:rgba(255,255,255,.88);
  color:var(--gold-text);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.lang-button,.icon-button{display:grid;place-items:center;width:var(--control-sm);height:var(--control-sm);padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-soft)}
.lang-button{font-family:var(--font-ar);font-size:var(--fs-md);font-weight:600;line-height:1}
.lang-button:lang(en){font-family:var(--font);font-size:var(--fs-sm);letter-spacing:.04em}
.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control-sm);padding:var(--s2) var(--s5);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:500}
@media(hover:hover){.lang-button:hover,.icon-button:hover,.quiet-button:hover{border-color:var(--primary);color:var(--primary-700)}}
/* The kiosk (html.kiosk: the app's WebView, app mode, ?kiosk=1): no fullscreen icon, and a left-to-right top
   bar in both languages, so the logo (the operator's hold) stays in the top-left corner. */
html.kiosk #fullscreen{display:none}
html.kiosk .topbar{direction:ltr}

/* Conversation ------------------------------------------------------------------------------------------ */
.conversation{padding-bottom:var(--s6)}
.status-line{display:flex;align-items:center;gap:var(--s3);min-height:1.2rem;margin-bottom:var(--s3);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-700)}
.status-dot{position:relative;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary)}
/* The live ring is its own circle that grows and fades (transform and opacity only), never an animated box-shadow. */
.status-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(0,135,85,.45);opacity:0;pointer-events:none}
body[data-state=connecting] .status-dot{animation:waiting 1s ease-in-out infinite alternate}
body[data-state=live] .status-dot::after{animation:dot-ring 2.4s ease-out infinite}body[data-speaking=true] .status-dot::after{animation:dot-ring 1.2s ease-out infinite}
body[data-state=error] .status-dot{background:var(--warning)}body[data-state=error] .status-line{color:var(--warning)}
@keyframes waiting{to{opacity:.3}}@keyframes dot-ring{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.status-line.flash{animation:flash .9s var(--ease)}@keyframes flash{25%{opacity:.35}}
.wave{display:inline-flex;gap:.15rem;align-items:flex-end;height:.9rem;margin-inline-start:var(--s1)}
.wave i{display:block;width:.15rem;height:.9rem;border-radius:2px;background:var(--primary);transform-origin:bottom;transform:scaleY(.12)}
.wave[data-state=idle],.wave[data-state=error]{display:none}.wave[data-state=muted] i{background:var(--dim)}
body[data-state=live] .wave{gap:.2rem;height:1.3rem}body[data-state=live] .wave i{width:.3rem;height:1.3rem}
h1{margin:0;font-size:1.8rem;font-weight:500;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
h1 em{font-style:normal;font-weight:600;color:var(--primary)}
.intro{margin:var(--s2) 0 0;max-width:44ch;font-size:var(--fs-md);line-height:1.35;color:var(--muted)}
/* Three large start cards: one tap opens the card; Talk starts the conversation (no minutes are spent before). */
.start-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5);animation:rise var(--normal) var(--ease) both}
.start-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;align-content:center;column-gap:var(--s3);row-gap:.1rem;
  min-height:calc(var(--touch) * 1.3);padding:var(--s3) var(--s4);text-align:start;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-soft)}
.start-icon{grid-row:1/span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--primary-50);color:var(--primary-700)}
.start-icon svg{width:1.1rem;height:1.1rem}
.start-card b{font-size:var(--fs-sm);font-weight:600;line-height:1.2;text-wrap:balance}
.start-card small{font-size:.7rem;line-height:1.3;color:var(--muted);text-wrap:balance}
@media(hover:hover){.start-card:hover{border-color:var(--primary)}}
.start-card:active:not(:disabled){background:var(--primary-50);border-color:var(--primary)}
.hint{min-height:1.4em;margin:var(--s4) 0 0;font-size:var(--fs-sm);line-height:1.4;color:var(--muted);opacity:0;transform:translateY(.3rem);transition:opacity var(--normal) var(--ease),transform var(--normal) var(--ease)}
.hint.show{opacity:1;transform:none}
.caption{margin:var(--s4) 0 0;max-width:52ch;max-height:6em;overflow:auto;padding:var(--s3) var(--s5);font-size:var(--fs-md);line-height:1.45;background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--primary);border-radius:var(--radius)}
.caption>span{display:block}.caption-user{font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.notice{margin:var(--s4) 0 0;max-width:48ch;padding:var(--s3) var(--s5);font-size:var(--fs-sm);line-height:1.45;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--warning);border-radius:var(--radius)}
.conversation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
/* Talk: the one filled button on the page. */
.primary-button{display:flex;align-items:center;justify-content:center;gap:var(--s4);flex:1 1 100%;min-height:var(--touch);padding:0 var(--s8);border:0;border-radius:var(--radius-pill);
  background:var(--primary);color:#FFFFFF;font-size:var(--fs-lg);font-weight:600;box-shadow:0 .7rem 1.4rem -.8rem rgba(0,107,67,.7)}
.primary-button svg{width:1.4rem;height:1.4rem}
.primary-button:active:not(:disabled){background:var(--primary-700)}
@media(hover:hover){.primary-button:hover{background:var(--primary-700)}}
.button-arrow{margin-inline-start:auto}
[dir=rtl] .button-arrow{transform:scaleX(-1)}
.end-button,.interrupt-button,.conversation-actions .quiet-button{flex:1 1 0;min-height:var(--control);padding:0 var(--s5);border-radius:var(--radius-pill);font-size:var(--fs-md);font-weight:600}
.end-button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
@media(hover:hover){.end-button:hover{border-color:var(--danger);color:var(--danger)}}
.interrupt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);border:0;background:var(--secondary);color:#FFFFFF;animation:rise var(--normal) var(--ease)}
.interrupt-button svg{width:.9rem;height:.9rem;fill:currentColor;stroke:none}
.conversation-actions .quiet-button[aria-pressed=true]{border-color:var(--warning);color:var(--warning)}
.privacy{margin:var(--s3) 0 0;font-size:var(--fs-xs);line-height:1.45;color:var(--muted);text-align:center}
body[data-state=live] h1{font-size:var(--fs-xl)}body[data-state=live] .intro{display:none}

/* Footer: the emergency line on every screen, the explore nav, the concept-demo line ------------------- */
.bottom-bar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"emergency nav" "footer footer";align-items:center;gap:var(--s3) var(--s4)}
.emergency-line{grid-area:emergency;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--control-sm);margin:0;padding:0 var(--s5);
  border:1px solid rgba(185,28,28,.28);border-radius:var(--radius-pill);background:var(--danger-50);color:var(--danger);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;justify-self:start}
.emergency-line:active:not(:disabled){background:#F9D9D9}
.emergency-line svg{width:1.1rem;height:1.1rem}
.explore-actions{grid-area:nav;display:flex;justify-content:flex-end;gap:var(--s2);min-width:0}
.nav-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control-sm);padding:0 var(--s4);border:1px solid transparent;border-radius:var(--radius-pill);
  background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.nav-button svg{width:1.1rem;height:1.1rem}
@media(hover:hover){.nav-button:hover{color:var(--ink)}}
.nav-button[aria-pressed=true]{background:var(--primary-50);border-color:rgba(0,135,85,.3);color:var(--primary-700)}
/* Home: the start cards are the way in, so only Vision and Settings sit in the footer. */
body:not(.presenting) #nav-checkin,body:not(.presenting) #nav-triage,body:not(.presenting) #nav-guidance{display:none}
body:not(.presenting) .nav-button{background:rgba(255,255,255,.7);border-color:var(--line)}
/* On the kiosk, Settings is reached by the operator gesture (five taps or a hold on the logo), never by visitors. */
html.kiosk .explore-actions #settings{display:none}
.footer-line{grid-area:footer;margin:0;font-size:var(--fs-xs);line-height:1.4;color:var(--muted);text-align:center;text-wrap:balance}

/* Card shell (CONTRACT 7.3; the panes inside #presentation-body belong to health-panels.css) ----------- */
body:not(.presenting) .presentation{display:none}
.presentation{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.presentation-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker close" "title close";column-gap:var(--s4);align-items:start;flex-shrink:0;padding:var(--s5) var(--s6) var(--s3)}
.presentation-head>.presentation-kicker{grid-area:kicker}.presentation-head>h2{grid-area:title}.presentation-head>#presentation-close{grid-area:close}
.presentation-head .icon-button{border:0;background:var(--surface-2);box-shadow:none}
.presentation-kicker{margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-700);overflow-wrap:anywhere}
.presentation-kicker:empty{display:none}
.presentation h2{margin:0;font-size:var(--fs-xl);font-weight:600;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.presentation h3{margin:0;font-size:var(--fs-md);font-weight:600;line-height:1.35}
.presentation-feedback{flex-shrink:0;margin:0 var(--s6) var(--s2);font-size:var(--fs-sm);line-height:1.4;color:var(--secondary-700)}.presentation-feedback:empty{display:none}
.presentation-body{position:relative;flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:var(--s2) var(--s6) var(--s6);font-size:var(--fs-md);line-height:1.45;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.presentation-body>*{min-width:0}
.presentation-body:focus-visible{outline-offset:-4px}
/* More below: a soft fade over the card's lower edge and a round chevron, never a band that hides content. */
.presentation{position:relative}
.presentation-more{position:absolute;z-index:2;inset-inline:0;bottom:var(--s3);display:grid;place-items:center;width:var(--control-sm);height:var(--control-sm);min-height:0;margin-inline:auto;padding:0;
  border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--primary-700);box-shadow:var(--shadow-card)}
.presentation-more svg{width:1.3rem;height:1.3rem;stroke-width:2}
.presentation:has(.presentation-more:not([hidden]))::after{content:'';position:absolute;z-index:1;inset:auto 0 0;height:3.2rem;border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:linear-gradient(rgba(255,255,255,0),var(--surface));pointer-events:none}
.presenter-button{min-height:var(--control-sm);padding:var(--s3) var(--s5);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:500;line-height:1.35}
@media(hover:hover){.presenter-button:hover{border-color:var(--primary);color:var(--primary-700)}}
.presenter-button[aria-pressed=true]{border-color:var(--primary);color:var(--primary-700);background:var(--primary-50)}
.presenter-button.small{min-height:2rem;padding:var(--s2) var(--s4);font-size:var(--fs-xs);border-radius:var(--radius-pill)}
.presentation-note{margin:var(--s2) 0 0;font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}

/* Presenting: Dana moves into a tile beside the conversation, the card takes the rest ---------------------
   The <video> elements never move in the DOM (that would interrupt playback); only .portrait and the media
   boxes are repositioned, anchored on Dana's eye line so the still, the idle loop and the live stream (all
   768×1152, one framing) stay aligned: --k is CSS px per image px, --ax/--ay place image point (383, 390)
   in the tile. The controller glides her between the two places (a FLIP on .portrait, transform only). */
.presenting .display{grid-template-columns:var(--tile) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:var(--s6);row-gap:var(--s4)}
.presenting .topbar{grid-column:1/-1;grid-row:1}
.presenting .portrait{grid-column:1;grid-row:2;position:relative;inset:auto;align-self:start;width:var(--tile);height:calc(var(--tile) * 4 / 3);
  border-radius:var(--radius-lg);background:#D9E2DF;
  --k:calc(var(--tile) / 476);--ax:50%;--ay:calc(var(--tile) * .52);
  box-shadow:0 0 0 1px var(--line),var(--shadow-card)}
.presenting .portrait-still,.presenting .portrait-media{inset:auto;left:calc(var(--ax) - 383 * var(--k));top:calc(var(--ay) - 390 * var(--k));width:calc(768 * var(--k));height:calc(1152 * var(--k));object-fit:cover;object-position:50% 50%}
.presenting .shade{background:linear-gradient(180deg,transparent 78%,rgba(16,38,30,.12))}
/* Live and speaking rings switch without a transition: an animated box-shadow repaints next to the video decode. */
body[data-state=live].presenting .portrait{box-shadow:0 0 0 1.5px var(--primary),var(--shadow-card)}
body[data-speaking=true].presenting .portrait{box-shadow:0 0 0 2.5px var(--primary),0 0 0 .5rem rgba(0,135,85,.14),var(--shadow-card)}
.presenting .conversation{grid-column:2;grid-row:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-bottom:0;animation:fade var(--normal) var(--ease) both}
/* Beside a card the home greeting is not repeated: the tile tag says who she is (Dana · AI); this column is for
   whose turn it is, Dana's words and the controls. */
.presenting .conversation h1,.presenting .intro,.presenting #start-menu{display:none}
.presenting .hint{min-height:0;margin:0 0 var(--s3);font-size:var(--fs-sm)}
body[data-state=idle].presenting .privacy,body[data-state=error].presenting .privacy,body[data-state=connecting].presenting .privacy,body[data-turn=listening].presenting .privacy{display:none}
.presenting .status-line{flex-wrap:wrap;row-gap:var(--s1)}
/* One row beside a card: Interrupt (while she speaks) takes the room, the microphone icon and End stay small. */
.presenting .conversation-actions{display:flex;flex-wrap:nowrap;gap:var(--s2)}
.presenting .conversation-actions>button{flex:0 0 auto;min-width:0}
.presenting .conversation-actions>#talk,.presenting .conversation-actions>#interrupt{flex:1 1 auto}
.presenting #mute,.presenting #end{min-width:var(--control);padding:0 var(--s4)}
.presenting .primary-button{min-height:var(--control);font-size:var(--fs-md);padding:0 var(--s5)}
/* Talk beside a card is an outline: each card has its own filled next step. */
.presenting .conversation .primary-button{background:var(--surface);color:var(--primary-700);border:1.5px solid var(--primary);box-shadow:none}
.presenting .conversation .primary-button:active:not(:disabled){background:var(--primary-50)}
.presenting .caption,.presenting .notice{font-size:var(--fs-sm);margin-top:var(--s3);padding:var(--s2) var(--s4)}
/* The newest words stay in view: the caption shows its last lines, not its first. */
.presenting .caption{display:flex;flex-direction:column;justify-content:flex-end;max-height:calc(5 * 1.45em + 2 * var(--s2));overflow:hidden}
.presenting .privacy{margin-top:var(--s2);text-align:start}
.presenting .presentation{grid-column:1/-1;grid-row:3;min-height:0;align-self:stretch;animation:rise var(--normal) 60ms var(--ease) both}
.presenting .bottom-bar{grid-column:1/-1;grid-row:4;grid-template-areas:"nav nav" "emergency footer"}
.presenting .explore-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1);padding:var(--s1);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-soft)}
html.kiosk .presenting .explore-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
.presenting .nav-button{min-width:0;gap:var(--s1);padding:0 var(--s1);font-size:var(--fs-xs)}
html.kiosk .presenting .nav-button{font-size:var(--fs-sm)}
.presenting .nav-button svg{width:1rem;height:1rem}
.presenting .nav-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.presenting .footer-line{text-align:start}
.presenting .pattern{opacity:.5}

/* Whose turn it is (body[data-turn], set by the controller) ---------------------------------------------------
   The microphone is closed while Dana speaks (touch interruption): a visitor at a metre must see when to talk. */
body[data-turn=listening].presenting .portrait-tag{background:var(--primary);color:#FFFFFF;font-size:var(--fs-sm);min-height:2.2rem;padding:0 var(--s4)}
body[data-turn=listening].presenting .portrait-tag::after{content:'';position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--primary);opacity:0;animation:tag-ring 1.8s ease-out infinite;pointer-events:none}
@keyframes tag-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12,1.45)}}
body[data-turn=speaking].presenting .portrait-tag{color:var(--secondary-700)}
body[data-turn=muted].presenting .portrait-tag{color:var(--warning)}
body[data-turn=listening] .status-line{align-self:flex-start;padding:var(--s2) var(--s4);border-radius:var(--radius-pill);background:var(--primary);color:#FFFFFF;font-size:var(--fs-sm)}
body[data-turn=listening] .status-line .status-dot{background:#FFFFFF}
body[data-turn=listening] .status-line .wave i{background:#FFFFFF}
/* Connecting: Talk stays put and turns busy; Cancel is a quiet link. */
.primary-button[aria-busy=true]{opacity:1;cursor:progress}
.primary-button[aria-busy=true] .button-arrow{animation:turn .9s linear infinite}
body[data-state=connecting] #end{border:0;background:transparent;color:var(--muted);font-weight:500;box-shadow:none}

/* The microphone button: an icon beside a card (the label stays for screen readers), the words on the stage. */
#mute .mic-off,#mute[aria-pressed=true] .mic-on{display:none}#mute[aria-pressed=true] .mic-off{display:block}
#mute svg{display:none}
.presenting #mute svg.mic-on{display:block}.presenting #mute[aria-pressed=true] svg.mic-on{display:none}.presenting #mute[aria-pressed=true] svg.mic-off{display:block}
.presenting #mute-label{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;opacity:0}
/* A crisis or an emergency on screen: no chatty "tap the next step" line beside it. */
body:has(.health-pane-guidance:not([hidden]) .health-crisis.is-prominent) .hint,body:has(.health-pane-care:not([hidden]) .health-emergency) .hint{display:none}
/* Emergency card open: no friendly greeting or green Talk over the red card. */
body:has(.health-pane-care:not([hidden]) .health-emergency) .status-line{color:var(--level-1)}
body:has(.health-pane-care:not([hidden]) .health-emergency).presenting .portrait{box-shadow:0 0 0 2px var(--level-1),var(--shadow-card)}
body:has(.health-pane-care:not([hidden]) .health-emergency) #talk{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}
/* The vision slides: larger words for a room. */
body[data-view=vision] .health-journey-text b{font-size:var(--fs-lg)}

/* Settings sheet --------------------------------------------------------------------------------------- */
.settings-sheet{position:fixed;inset:auto 0 0 0;width:min(100%,var(--frame-w));max-width:none;max-height:min(88dvh,54rem);margin:0 auto;padding:0;
  border:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -1.4rem 3rem -1rem rgba(16,38,30,.35);overflow:hidden}
.settings-sheet[open]{display:flex;flex-direction:column;animation:sheet var(--normal) var(--ease)}@keyframes sheet{from{transform:translateY(1.2rem);opacity:0}}
.settings-sheet::backdrop{background:rgba(16,38,30,.42)}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-shrink:0;padding:var(--s6) var(--gutter) var(--s4)}
.dialog-head .icon-button{box-shadow:none}
h2{margin:0;font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}
.sheet-body{display:grid;gap:var(--s4);min-height:0;overflow-y:auto;padding:0 var(--gutter) max(var(--s6),env(safe-area-inset-bottom));scrollbar-width:thin}
.sheet-section{display:grid;gap:var(--s3);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.sheet-section h3{margin:0;font-size:var(--fs-md);font-weight:600}
.muted{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}.small{font-size:var(--fs-xs)}
.segmented{display:grid;gap:var(--s2)}.segmented.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.segment{display:grid;gap:var(--s1);min-height:var(--control);padding:var(--s3) var(--s4);text-align:start;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.segment b{font-size:var(--fs-md);font-weight:500}.segment small{font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.segment[aria-checked=true]{border-color:var(--primary);background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--primary)}.segment[aria-checked=true] b{color:var(--primary-700)}
.segmented.compact .segment{justify-items:center;min-height:var(--control-sm);text-align:center}
.sheet-row{display:grid;gap:var(--s2)}.sheet-row>span{font-size:var(--fs-sm);color:var(--muted)}
label{display:block;font-size:var(--fs-sm);color:var(--muted)}
select{width:100%;min-height:var(--control-sm);padding:var(--s3);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:var(--fs-md)}
.mic-test-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s3)}
.secondary-button{min-height:var(--control-sm);padding:var(--s3) var(--s5);border:0;background:var(--secondary);color:#FFFFFF;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
meter{display:block;width:100%;height:.7rem;accent-color:var(--primary)}
.audio-result{margin:0;font-size:var(--fs-xs);line-height:1.5;overflow-wrap:anywhere;color:var(--muted)}.audio-result:empty{display:none}
.diagnostics{min-height:1.5em;margin:0;font:500 .66rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--secondary-700);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.audio-features{margin:0;font-size:var(--fs-sm)}.audio-features>div{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s2);border-bottom:1px solid var(--line)}.audio-features>div:last-child{border-bottom:0}
dd{margin:0;color:var(--primary-700);font-weight:500}
.check{display:flex;align-items:center;gap:var(--s3);min-height:var(--control-sm);font-size:var(--fs-md);color:var(--ink)}.check input{width:1.3rem;height:1.3rem;margin:0;accent-color:var(--primary)}
#room-reset,#reset-demo,#sheet-fullscreen,#sign-out{justify-self:start}
.about-list dd{font-variant-numeric:tabular-nums}
/* Operator only (the logo hold): first in the sheet, marked apart from the visitor settings by a gold hairline. */
.operator-section{border-color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)}
.operator-section .presentation-kicker{margin:0 0 var(--s1);color:var(--gold-text)}#operator-title{font-size:var(--fs-lg)}#operator-title:focus{outline:none}
.operator-section h4{margin:var(--s2) 0 0;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.operator-log{max-height:14rem;overflow:auto;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);font:500 .66rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr;text-align:left}
.operator-log p{margin:0;overflow-wrap:anywhere}.operator-log .log{color:var(--muted)}
#sign-out{min-width:12rem}
#sign-out.armed{border-color:var(--danger);background:var(--danger-50);color:var(--danger)}
#audio-title:focus{outline:none}
.setup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.setup-card{display:grid;align-content:start;justify-items:start;gap:var(--s2);min-height:8.5rem;padding:var(--s4);text-align:start;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink)}
.setup-card svg{width:1.8rem;height:1.8rem;color:var(--primary)}.setup-card b{font-size:var(--fs-md);font-weight:500;line-height:1.2}.setup-card small{font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.setup-card[aria-checked=true]{border-color:var(--primary);background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--primary)}.setup-card[aria-checked=true] b{color:var(--primary-700)}
.badge{display:inline-block;margin-inline-start:var(--s2);padding:.05rem .45rem;border-radius:var(--radius-pill);font:600 .6rem/1.5 var(--font);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#FFFFFF;background:var(--primary);vertical-align:.15em}
.badge.muted-badge{background:transparent;color:var(--muted);border:1px solid var(--line-strong)}
.slider-row{display:flex;justify-content:space-between;align-items:baseline}.slider-row label{margin:0}.slider-row output{color:var(--primary-700);font-weight:600;font-variant-numeric:tabular-nums}
.volume{width:100%;height:2rem;margin:0;accent-color:var(--primary)}
.diagnostics-panel{position:absolute;z-index:30;top:calc(4.5rem + env(safe-area-inset-top));inset-inline-end:var(--gutter);width:min(26rem,calc(100% - 2 * var(--gutter)));padding:var(--s3) var(--s4);
  border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(255,255,255,.94);font:500 .62rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);pointer-events:none}
.diagnostics-panel p{margin:0;overflow-wrap:anywhere}.diagnostics-panel .log{color:var(--muted)}
.no-script{position:fixed;inset:20% 10% auto;padding:var(--s8);background:var(--surface)}

/* Boot splash: shown until /status answers, so the access card never flashes on a cold start ------------- */
.boot-screen,.access-screen{min-height:100dvh;background:radial-gradient(ellipse 120% 80% at 50% 30%,#FFFFFF 0%,var(--bg) 55%,var(--bg-deep) 100%)}
.boot-screen{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:var(--s6);padding:var(--s8);text-align:center}
.boot-screen>*{animation:rise .6s .15s var(--ease) both}
.boot-mark,.access-brand{display:flex;align-items:center;gap:var(--s4)}
.boot-mark img{width:3.4rem;height:3.4rem}
.boot-mark>span,.access-brand>span{font-size:var(--fs-2xl);font-weight:600;line-height:1;letter-spacing:-.01em;text-align:start;color:var(--ink)}
.boot-mark small,.access-brand small{display:block;margin-top:var(--s2);font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;color:var(--primary-700)}
.boot-line{position:relative;width:10rem;height:2px;overflow:hidden;border-radius:2px;background:rgba(0,135,85,.14)}
.boot-line i{position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--primary),transparent);transform:translateX(-100%);animation:boot-glide 1.8s .8s var(--ease) infinite}
@keyframes boot-glide{to{transform:translateX(250%)}}
.boot-status{margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--primary-700)}
.boot-note{max-width:30ch;margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.boot-demo{margin:0}.boot-demo span{display:inline-block;padding:var(--s1) var(--s4);border:1px solid var(--gold);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}

/* Access card (not activated yet) ------------------------------------------------------------------------ */
.access-screen{display:grid;place-items:center;padding:var(--s8)}
.access-card{width:min(100%,30rem);padding:var(--s10) var(--s8) var(--s8);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.access-brand{margin-bottom:var(--s10)}.access-brand img{width:3rem;height:3rem}
.access-card h1{margin-bottom:var(--s3);font-size:var(--fs-2xl);line-height:1.1}
.access-card p{font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.access-card p.presentation-kicker{margin:0 0 var(--s3);font-size:var(--fs-xs);color:var(--primary-700)}
.access-card label{margin-top:var(--s6);margin-bottom:var(--s2)}
.access-card input{width:100%;min-height:var(--control);padding:var(--s4);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-lg)}
.access-card .primary-button{width:100%;margin-top:var(--s4)}
.access-card #login-error{min-height:1.5em;margin:var(--s4) 0 0;font-size:var(--fs-sm);color:var(--danger)}
.activate-panel{margin-top:var(--s10);animation:rise var(--normal) var(--ease)}.access-card .activate-panel .primary-button{margin-top:0}
.activate-panel .primary-button[aria-busy=true],.check-again[aria-busy=true]{opacity:1;cursor:progress}
.access-card .access-note{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 0;font-size:var(--fs-sm);line-height:1.4}.access-note svg{width:1.1rem;height:1.1rem;color:var(--primary)}
.access-waiting{margin-top:var(--s4)}.access-card .access-waiting p{max-width:34ch;margin:0}
.check-again{margin-top:var(--s6);border-radius:var(--radius-pill);color:var(--primary-700)}.check-again svg{width:1rem;height:1rem}
.check-again[aria-busy=true] svg{animation:turn .9s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}
.access-card .access-waiting .access-connection{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);font-size:var(--fs-sm);line-height:1.4}
.access-connection::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--warning)}
.access-card .access-connection[hidden]{display:none}
[dir=rtl] .check-again svg{transform:scaleX(-1)}[dir=rtl] .check-again[aria-busy=true] svg{animation:none}
.access-card #login-form{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.access-card .access-footer{margin:var(--s8) 0 0;padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}

/* Arabic ------------------------------------------------------------------------------------------------- */
[dir=rtl] h1,[dir=rtl] h2{letter-spacing:0;line-height:1.3}
[dir=rtl] .status-line,[dir=rtl] .presentation-kicker,[dir=rtl] .demo-pill,[dir=rtl] .boot-status,[dir=rtl] .boot-mark small,[dir=rtl] .access-brand small,[dir=rtl] .boot-demo span{letter-spacing:0}
/* The product name "Dana" in the boot and access marks is Latin in both languages. */
[dir=rtl] .boot-mark>span,[dir=rtl] .access-brand>span{text-align:end}

/* Landscape preview window: the page stays the kiosk's 9:16 column, centred, with a quiet frame. ---------- */
@media(orientation:landscape){
  html:not(.kiosk) .display{box-shadow:0 0 0 1px var(--line),0 1.6rem 3.2rem -1.6rem rgba(16,38,30,.3)}
  html:not(.kiosk) #fullscreen{display:none}  /* the column is narrow here; Settings keeps its Fullscreen button */
}
/* Phones and narrow windows (never the kiosk): the start cards stack as rows. ------------------------------ */
@media(max-width:520px){
  html:not(.kiosk){--gutter:1rem;--touch:3rem}
  html:not(.kiosk) .start-menu{grid-template-columns:minmax(0,1fr)}
  html:not(.kiosk) .start-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s4);row-gap:0;min-height:var(--touch);align-items:center;padding:var(--s3) var(--s4)}
  html:not(.kiosk) .start-icon{grid-row:1/span 2;margin:0}
  html:not(.kiosk) .brand-title,html:not(.kiosk) .brand-rule{display:none}
  /* Five nav items in a phone's width: icons only, the label stays for screen readers (and shows when pressed). */
  html:not(.kiosk) .presenting .nav-button:not([aria-pressed=true]) span{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;opacity:0}
  html:not(.kiosk) .presenting .primary-button{font-size:var(--fs-sm);white-space:nowrap}
  html:not(.kiosk) .presenting .primary-button .button-arrow{display:none}
  html:not(.kiosk) .setup-grid{grid-template-columns:minmax(0,1fr)}
  html:not(.kiosk) .setup-card{min-height:0;grid-template-columns:auto 1fr;align-items:center}html:not(.kiosk) .setup-card small{grid-column:2}
}
/* Reduced motion: the idle loop never plays, so the aligned still shows instead of a paused frame. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#idle-video{visibility:hidden}}