/* MediKiosk design system
   Ground: deep neem green. Surfaces: mineral chalk. Accent: turmeric.
   Jade is reserved for anything the machine says. Vermilion only for red flags. */

:root{
  /* warm pastels: eggshell ground, cream card, sand lines, warm ink */
  --ground:#F4EFE6; --ground2:#2C2622; --ground3:#453C36;
  --surface:#FBF8F3; --surface2:#F1EBE1; --line:#E5DCCD;
  --text:#2C2622; --muted:#6B615A; --ink:#2C2622;
  --jade:#5F8A72; --jade-soft:#E6ECE3;
  --haldi:#E9A15F; --haldi-soft:#FBEBDD;
  --vermilion:#C0392B; --vermilion-soft:#F9E3DF;
  --on-dark:#FBF8F3; --on-dark-muted:#CFC6BB;
  --blush:#F2D9CF; --blush-soft:#F9ECE6; --sage:#CBD8C8; --sage-soft:#E6ECE3;
  --shadow:0 24px 48px -24px rgba(60,40,20,.28);
  --head:"Plus Jakarta Sans",Mukta,"Noto Sans Devanagari","Noto Sans Gujarati","Noto Sans Gurmukhi","Noto Sans Tamil","Noto Sans Telugu",system-ui,sans-serif;
  --body:"DM Sans",Mukta,"Noto Sans Devanagari","Noto Sans Gujarati","Noto Sans Gurmukhi","Noto Sans Tamil","Noto Sans Telugu",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--text);
  font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);letter-spacing:-.015em}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea{font:inherit;color:var(--text)}
:focus-visible{outline:3px solid var(--haldi);outline-offset:3px;border-radius:12px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.dev{font-family:"Tiro Devanagari Hindi",Mukta,serif}
[hidden]{display:none !important}

.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(900px 560px at 8% -6%,var(--blush) 0%,transparent 62%),
             radial-gradient(820px 640px at 102% 104%,var(--sage) 0%,transparent 58%),var(--ground)}
.stage.top{align-items:flex-start;padding-top:32px}
.leafbg{display:none}

/* ── kiosk ─────────────────────────────────────────── */
.kiosk{position:relative;z-index:1;width:100%;max-width:560px;height:min(93vh,1020px);
  background:var(--surface);border-radius:32px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(60,40,20,.08)}
.kbar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);color:var(--text);flex:none;
  border-bottom:1px solid var(--line)}
.kbar .pill{background:var(--blush);color:var(--text);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700}
.kbar .spacer{flex:1}
.kbar button{width:44px;height:44px;border-radius:50%;background:var(--surface2);color:var(--text);display:grid;place-items:center;font-size:17px}
.kbar button:hover{background:var(--sage)}
.kbody{flex:1;overflow-y:auto;padding:30px 28px 14px;display:flex;flex-direction:column}
.kfoot{flex:none;padding:14px 28px 24px;display:flex;flex-direction:column;gap:12px}

/* Read-aloud, floating clear of the crowded icon row instead of buried in
   it — its own amber circle over the top-right of the card. The rail and
   the dashboard header are the only things that ever reach that corner
   themselves (below, .rail-clear / .dashhead gives them room to stop short
   of it); everything else on a screen starts further down or stays left. */
.speakfab{position:absolute;top:80px;right:20px;z-index:5;width:52px;height:52px;border-radius:50%;
  background:var(--haldi);color:#2C2622;display:grid;place-items:center;
  box-shadow:0 12px 24px -10px rgba(60,40,20,.45);border:none}
.speakfab:hover{background:#D98E4A}
.speakfab:active{transform:scale(.94)}
html.a11y-large .speakfab{width:60px;height:60px;top:86px;right:22px}
html.a11y-contrast .speakfab{border:3px solid #000}

.steps{display:flex;gap:6px;align-items:center;justify-content:center;padding-bottom:12px}
.steps i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.steps i.on{background:var(--text);width:26px;border-radius:999px}
.steps i.done{background:var(--sage)}

.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jade)}
h1.q{font-size:clamp(28px,6vw,40px);line-height:1.12;font-weight:800;margin:10px 0 6px;text-wrap:balance;letter-spacing:-.02em}
.q-en{font-size:17px;color:var(--muted);font-weight:500;margin:0 0 18px}
.lede{font-size:16.5px;color:var(--muted);line-height:1.55;margin:0 0 20px;max-width:52ch}

.chips{display:grid;gap:12px}
.chips.two{grid-template-columns:1fr 1fr}
.chip{display:flex;align-items:center;gap:14px;padding:17px 18px;min-height:56px;background:#fff;border:2px solid var(--line);
  border-radius:20px;text-align:left;font-size:18px;font-weight:600;transition:.12s;width:100%}
.chip .ic{font-size:26px;line-height:1;flex:none;width:34px;text-align:center}
.chip small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.chip:hover{border-color:#DCC7B8;background:var(--blush-soft);transform:translateY(-1px)}
.chip.sel{border-color:var(--text);background:var(--blush)}
.chip.sel::after{content:"✓";margin-left:auto;color:var(--text);font-weight:800;font-size:20px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 22px;min-height:56px;
  border-radius:999px;font-size:18px;font-weight:700;background:var(--ground2);color:var(--on-dark);transition:.12s;letter-spacing:.01em}
.btn:hover{background:var(--ground3)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--text);font-weight:600;font-size:17px}
.btn.ghost:hover{background:var(--surface2)}
.btn.haldi{background:var(--haldi);color:#2C2622}
.row{display:flex;gap:10px}
.row .btn{flex:1}
.dbody .btn{min-height:0}

.mic{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--jade);
  color:#fff;font-size:32px;margin:0 auto;box-shadow:0 12px 28px -12px rgba(95,138,114,.8);transition:.15s}
.mic.live{background:var(--vermilion);animation:pulse 1.3s ease-in-out infinite}
.minimic{flex:none;width:54px;height:54px;border-radius:50%;background:var(--jade);color:#fff;font-size:22px;display:grid;place-items:center}
.minimic.live{background:var(--vermilion);animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 18px rgba(192,57,43,0)}}
@media (prefers-reduced-motion:reduce){.mic.live,.minimic.live{animation:none}}

.field{width:100%;padding:16px 18px;border:2px solid var(--line);border-radius:18px;background:#fff;font-size:18px}
.field:focus{border-color:var(--text);outline:none}
.transcript{background:#fff;border:2px dashed var(--line);border-radius:18px;padding:16px;min-height:64px;font-size:18px;line-height:1.45}
.transcript .ph{color:#A89E94}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.keypad button{padding:16px 0;border-radius:18px;background:#fff;border:2px solid var(--line);font-size:24px;font-weight:700}
.keypad button:hover{background:var(--surface2)}
.otp{display:flex;gap:9px;justify-content:center}
.otp span{width:46px;height:58px;border:2px solid var(--line);border-radius:14px;background:#fff;display:grid;place-items:center;font-size:26px;font-weight:700}
.otp span.f{border-color:var(--text)}

.consent-card{background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px;display:flex;gap:14px;
  align-items:flex-start;margin-bottom:12px;width:100%;text-align:left}
.consent-card.on{border-color:var(--jade);background:var(--sage-soft)}
.toggle{flex:none;width:56px;height:32px;border-radius:999px;background:#D9CFC3;position:relative;transition:.15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
  transition:.15s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.consent-card.on .toggle{background:var(--jade)}
.consent-card.on .toggle::after{transform:translateX(24px)}

.faces{display:flex;gap:8px}
.faces button{flex:1;padding:12px 4px;border-radius:18px;border:2px solid var(--line);background:#fff;font-size:30px;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.faces button small{font-size:12px;font-weight:700;color:var(--muted)}
.faces button.sel{border-color:var(--haldi);background:var(--haldi-soft)}

/* ── drawn icons ── */
svg.ic{flex:none;display:block}
.chip > svg.ic{width:26px;height:26px;color:var(--jade)}
.chip.sel > svg.ic{color:var(--jade)}
.chip .glyph{font-size:26px;line-height:1;flex:none;width:34px;text-align:center;font-weight:700}
.chip.soon{opacity:.42;cursor:default;border-style:dashed}
.chip.soon:hover{transform:none;border-color:var(--line)}
.cic{flex:none;display:grid;place-items:center;color:var(--jade)}
.hic{display:grid;place-items:center;color:var(--on-dark)}
.bigmark{display:grid;place-items:center;color:var(--jade);margin-bottom:12px}
.bigmark.ok{color:var(--jade)}
.docline{display:flex;align-items:flex-start;gap:7px;margin-bottom:4px}
.docline svg{flex:none;margin-top:3px;color:var(--muted)}
.faces button svg.face-svg{color:var(--muted)}
.faces button.sel svg.face-svg{color:var(--haldi)}
.prov svg{vertical-align:-2px;margin-right:2px}
.mic svg.ic,.minimic svg.ic{color:#fff}
.notice svg.ic{vertical-align:-3px;color:currentColor}
.adddoc svg.ic{color:var(--muted)}
.alert b svg.ic{vertical-align:-3px}

/* ── one verification, not ten ── */
.verified{display:flex;align-items:center;gap:9px;margin-top:14px;padding:12px 14px;border-radius:12px;
  font-size:15px;font-weight:700;background:var(--sage-soft);color:#2F5E45;border:1px solid #C3D4C2}
.verified.amended{background:var(--haldi-soft);color:#7A4A1C;border-color:#F0D2B0}
.verified svg{flex:none}
textarea.amend{width:100%;min-height:56px;padding:10px 12px;border:2px solid var(--jade);border-radius:10px;
  background:#fff;font:inherit;font-size:15.5px;line-height:1.5;resize:vertical}
textarea.amend:focus{outline:none;border-color:var(--haldi)}

.flabel{display:block;font-size:14px;font-weight:700;color:var(--muted);margin:0 0 6px}
.measure{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}

/* journey rail — where she is, what is left, how long */
.rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 60px 14px 0;border-bottom:1px solid var(--surface2);margin-bottom:16px}
.railitem{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#A89E94}
.railitem i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block;flex:none}
.railitem.done{color:var(--muted)}
.railitem.done i{background:var(--sage)}
.railitem.on{color:var(--jade)}
.railitem.on i{background:var(--jade);width:20px;border-radius:4px}
.railtime{margin-left:auto;font-size:13px;font-weight:700;color:#B5702F;white-space:nowrap}

/* accessibility modes — named in the SIH26047 architecture table */
/* Large text. The type scale is in fixed pixels so the whole content area is
   zoomed instead — that catches inline styles too, which a root font-size
   change silently misses. The frame widens so nothing is squeezed. */
html.a11y-large .kiosk{max-width:720px;height:min(96vh,1240px)}
html.a11y-large .kbody,
html.a11y-large .kfoot{zoom:1.35}
@supports not (zoom: 1){
  html.a11y-large .kbody,
  html.a11y-large .kfoot{transform:scale(1.35);transform-origin:top left;width:74%}
}
html.a11y-large .kbar button{width:48px;height:48px}
html.a11y-large .kbar .emgbtn{width:auto;min-height:48px;border-radius:999px}

html.a11y-contrast{--surface:#FFFFFF;--surface2:#F0F0F0;--line:#000000;--text:#000000;--muted:#1A1A1A;
  --ground:#000000;--ground2:#000000;--ground3:#1A1A1A;--on-dark:#FFFFFF;--on-dark-muted:#E0E0E0;
  --jade:#005F3F;--jade-soft:#DFF5EC;--haldi:#7A4E00;--haldi-soft:#FFF3D6;--vermilion:#A00000;--vermilion-soft:#FFE4E4}
html.a11y-contrast .stage{background:#000}
html.a11y-contrast .kbar{background:#fff;color:#000;border-bottom:3px solid #000}
html.a11y-contrast .kbar button{background:#fff;color:#000;border:2px solid #000}
html.a11y-contrast .kbar .pill{background:#fff;color:#000;border:2px solid #000}
html.a11y-contrast .chip.sel{background:#fff;border-color:#000}
html.a11y-contrast .btn.ghost{border-color:#000;color:#000}
html.a11y-contrast .leafbg{display:none}
html.a11y-contrast .chip,html.a11y-contrast .field,html.a11y-contrast .consent-card,
html.a11y-contrast .keypad button{border-width:3px;border-color:#000}
html.a11y-contrast .kiosk,html.a11y-contrast .dcard{box-shadow:none;border:3px solid #000}

.othbox{margin-top:16px;background:#fff;border:2px dashed var(--line);border-radius:20px;padding:14px}
.othbox p{margin:0 0 9px;font-size:14.5px;font-weight:700;color:var(--muted)}
.othbox .rowin{display:flex;gap:9px;align-items:center}
.othbox .field{flex:1;padding:13px;font-size:17px}

.docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.docthumb{position:relative;border-radius:18px;overflow:hidden;border:2px solid var(--line);background:#fff;aspect-ratio:3/4}
.docthumb img{width:100%;height:100%;object-fit:cover;display:block}
.docthumb b{position:absolute;left:0;right:0;bottom:0;background:rgba(44,38,34,.82);color:#fff;font-size:10px;
  padding:4px 5px;font-weight:600;line-height:1.25}
.adddoc{border:2px dashed var(--line);border-radius:18px;display:grid;place-items:center;aspect-ratio:3/4;background:var(--blush-soft);
  font-size:13px;font-weight:700;color:var(--muted);text-align:center;padding:8px;gap:4px}

.alert{border-radius:22px;padding:22px;background:var(--vermilion-soft);border:2px solid var(--vermilion)}
.alert h2{margin:0 0 8px;font-size:26px;color:var(--vermilion)}
.token{font-family:"IBM Plex Mono",monospace;font-size:74px;font-weight:600;line-height:1;letter-spacing:-.02em}
.notice{background:var(--haldi-soft);border:1px solid #F0D2B0;border-radius:16px;padding:12px 14px;font-size:13.5px;color:#7A4A1C;line-height:1.45}
.notice.jade{background:var(--sage-soft);border-color:#C3D4C2;color:#2F5E45}
.summary-sec{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-bottom:12px}
.summary-sec h4{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.summary-sec p{margin:0;font-size:16px;line-height:1.5}
.thinking{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:17px}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--jade);border-radius:50%;
  animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

.bodymap{display:flex;justify-content:center}

/* ── doctor console ────────────────────────────────── */
.doc{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto}
.dcard{background:var(--surface);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(60,40,20,.08)}
.dhead{background:var(--ground2);color:var(--on-dark);padding:16px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dhead h2{margin:0;font-size:20px;font-weight:700}
.dhead .sub{font-size:13px;color:var(--on-dark-muted)}
.dhead .spacer{flex:1}
.dbody{padding:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.stat b{display:block;font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:600;line-height:1.1}
.stat span{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.03em}

.qrow{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-left:5px solid var(--line);border-radius:18px;padding:13px 16px;margin-bottom:9px;text-align:left;width:100%;transition:.12s}
.qrow:hover{border-color:#DCC7B8;background:var(--blush-soft);transform:translateX(2px)}
.qrow.flag{border-left-color:var(--vermilion);background:var(--vermilion-soft)}
.qrow.done{opacity:.72}
.qrow .tok{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600}
.qrow .nm{font-size:18px;font-weight:700;margin:0}
.qrow .mt{font-size:13.5px;color:var(--muted);margin:2px 0 0}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.badge.red{background:var(--vermilion);color:#fff}
.badge.jade{background:var(--sage-soft);color:#2F5E45}
.badge.haldi{background:var(--haldi-soft);color:#7A4A1C}
.badge.grey{background:var(--surface2);color:var(--muted)}

.split{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}
.panel h3{margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hline{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--surface2);align-items:start}
.hline:first-of-type{border-top:0}
.hline dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 0}
.hline dd{margin:0;font-size:16px;line-height:1.5}
.prov{display:inline-block;font-size:11px;margin-left:6px;padding:1px 7px;border-radius:6px;background:var(--surface2);
  color:var(--muted);font-weight:700;vertical-align:2px}
.prov.voice{background:var(--sage-soft);color:#2F5E45}
.prov.doc{background:var(--haldi-soft);color:#7A4A1C}

/* per-line verification */
.hline dd{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.hline .lval{flex:1;min-width:220px}
.hline .lact{display:inline-flex;gap:6px;align-items:center;flex:none}
.lbtn{font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--surface2);
  color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.lbtn:hover{background:var(--sage-soft);color:#2F5E45;border-color:#C3D4C2}
.hline.accepted{background:linear-gradient(90deg,var(--jade-soft),transparent 60%)}
.hline.amended{background:linear-gradient(90deg,var(--haldi-soft),transparent 60%)}

/* Dashavidha Pariksha — all ten, with what was and was not elicited */
.dvtable{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.dvtable th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 0 6px;border-bottom:1px solid var(--line)}
.dvtable td{padding:7px 0;border-bottom:1px solid var(--surface2);vertical-align:top}
.dvtable td:first-child{font-weight:700;width:38%;padding-right:10px}
.dvtable tr.miss td{color:#A89E94;font-style:italic}

.assess{background:var(--sage-soft);border:1px solid #C3D4C2;border-radius:20px;padding:18px;margin-top:16px}
.assess h3{margin:0 0 4px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#2F5E45}
.assess .dis{font-size:12.5px;color:#3E6B52;margin:0 0 12px;font-weight:600}
.assess ul{margin:0;padding-left:19px;font-size:15.5px;line-height:1.65}
.dxrow{background:#fff;border:1px solid #C3D4C2;border-radius:14px;padding:10px 12px;margin-bottom:7px}
.dxrow b{font-size:15.5px;display:block}
.dxrow small{font-size:13.5px;color:var(--muted);line-height:1.45;display:block;margin-top:2px}
.actionbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:var(--surface2);border-radius:18px;
  padding:11px 13px;margin-bottom:16px}
.actionbar .btn{width:auto;flex:none;padding:11px 18px;min-height:0;font-size:15.5px;border-radius:999px}
.dosha{display:flex;height:34px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.dosha div{display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.doclist{display:grid;gap:9px}
.docitem{display:grid;grid-template-columns:54px 1fr;gap:11px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:9px;text-align:left;width:100%}
.docitem img{width:54px;height:54px;object-fit:cover;border-radius:8px;display:block;background:#fff}
.docitem b{font-size:14.5px;display:block}
.docitem small{font-size:12.5px;color:var(--muted)}
.rx textarea{width:100%;min-height:88px;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff;
  font-size:15.5px;resize:vertical;font-family:inherit}
.modal{position:fixed;inset:0;background:rgba(44,38,34,.6);display:grid;place-items:center;padding:20px;z-index:50}
.modal .inner{background:var(--surface);border-radius:24px;max-width:940px;width:100%;max-height:90vh;overflow:auto;padding:20px}

/* ── role select ───────────────────────────────────── */
.roles{position:relative;z-index:1;width:100%;max-width:980px;text-align:center;color:var(--text)}
.roles h1{font-size:clamp(38px,7vw,62px);margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.roles .tag{color:var(--muted);font-size:17px;margin:0 auto 34px;max-width:58ch;line-height:1.55}
.rolegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.role{background:var(--surface);color:var(--text);border-radius:22px;padding:28px 24px;text-align:left;transition:.15s;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-height:200px;text-decoration:none}
.role:hover{transform:translateY(-4px)}
.role .ic{display:block;color:var(--jade)}
.role .ic svg{display:block}
.role b{font-size:23px;font-weight:800;color:var(--text)}
.role span.d{font-size:15px;color:var(--muted);line-height:1.5}
.role em{margin-top:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--jade);letter-spacing:.04em}
.demo-tag{position:fixed;left:12px;bottom:12px;z-index:60;background:rgba(44,38,34,.85);color:var(--on-dark);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px}

/* ── document timeline · Module B ────────────────────
   Every list of documents carries the date printed on the paper. A document
   whose date could not be read says so, in the same place, rather than sitting
   silently at the end of a list where it would read as the most recent one. */
.datechip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--sage-soft);
  color:#2F5E45;font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
.datechip svg{flex:none}
.datechip.undated{background:var(--surface2);color:var(--muted);border:1px dashed var(--line);text-transform:uppercase;letter-spacing:.06em}
.docline .datechip{margin-right:5px}

.docthumb .thumbdate{position:absolute;top:5px;left:5px;background:rgba(95,138,114,.94);color:#fff;font-size:9.5px;
  font-weight:700;padding:2px 6px;border-radius:999px;letter-spacing:.02em}
.docthumb.nodate{border-style:dashed}
.docthumb.nodate .thumbdate{background:rgba(107,97,90,.94)}
/* A paper that came back without a reading: the label band grows to say why. */
.docthumb.unread b{background:rgba(107,97,90,.9)}
.docthumb .thumbnote{position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);display:none}
.docthumb.unread b{padding-bottom:4px}
.docthumb.unread .thumbnote{display:block;position:static;transform:none;background:var(--haldi-soft,#fff4d6);color:var(--ink,#2C2622);
  font-size:9.5px;line-height:1.3;padding:4px 5px;border-top:1px solid var(--line)}
.docthumb.unread{display:flex;flex-direction:column;aspect-ratio:auto}
.docthumb.unread img{aspect-ratio:3/4;height:auto}
.docthumb.unread b{position:static}

.docitem.nodate{border-style:dashed}
.docitem .datechip{margin-bottom:3px}

/* ── patient dashboard ──────────────────────────────
   Named in the SIH26047 architecture table: where a patient signs in with
   their own ID and finds their visits, their documents and their summaries.
   Read-only throughout. */
.dashhead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;background:#fff;border:2px solid var(--line);margin-right:60px;
  border-radius:22px;padding:16px 18px;margin:10px 0 12px}
.dashwho b{display:block;font-size:21px;font-weight:800;line-height:1.2}
.dashwho span{font-size:14px;color:var(--muted)}
.dashids{margin-left:auto;display:flex;flex-direction:column;gap:3px;text-align:right;font-size:12px;color:var(--muted)}
@media (max-width:420px){.dashids{margin-left:0;text-align:left}}

.dashstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:6px}
.dstat{background:var(--blush-soft);border:1px solid var(--line);border-radius:16px;padding:10px 12px;text-align:center}
.dstat b{display:block;font-family:"IBM Plex Mono",monospace;font-size:24px;font-weight:600;line-height:1.15}
.dstat span{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.04em}

.dashsec{margin:20px 0 9px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.dempty{font-size:15px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:13px;
  padding:14px;margin:0;line-height:1.5}

.visitcard{background:#fff;border:2px solid var(--line);border-radius:20px;margin-bottom:10px;overflow:hidden}
.visitcard.flag{border-color:#E3B4AC}
.visithead{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;text-align:left;background:none}
.visithead:hover{background:var(--surface)}
.visithead .vtok{font-size:17px;font-weight:600;flex:none;min-width:52px}
.visithead .vmain{flex:1;min-width:0}
.visithead .vmain b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.visithead .vmain small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.visithead .vchev{flex:none;color:var(--muted);font-size:14px}
.dbadge{flex:none;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.dbadge.jade{background:var(--sage-soft);color:#2F5E45}
.dbadge.haldi{background:var(--haldi-soft);color:#7A4A1C}
.dbadge.grey{background:var(--surface2);color:var(--muted)}

.visitbody{border-top:1px solid var(--surface2);padding:12px 14px;background:var(--surface)}
.dsec{margin-bottom:10px}
.dsec h5{margin:0 0 3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--jade);font-weight:700}
.dsec p{margin:0;font-size:15px;line-height:1.5}
.dsec.dx{background:#fff;border:1px solid #C3D4C2;border-radius:14px;padding:10px 12px}
.dsec .code{display:inline-block;font-size:11.5px;background:var(--surface2);color:var(--muted);padding:1px 7px;
  border-radius:6px;margin-left:4px;font-weight:600}
.dline{font-size:14.5px;line-height:1.5;padding:4px 0;border-top:1px solid var(--surface2)}
.dline:first-of-type{border-top:0}
.dnote{font-size:12.5px;color:var(--muted);line-height:1.5;margin:10px 0 0}

.timeline{position:relative;padding-left:14px}
.timeline::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tlrow{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 13px;margin-bottom:8px}
.tlrow::before{content:"";position:absolute;left:-15px;top:17px;width:9px;height:9px;border-radius:50%;
  background:var(--jade);border:2px solid #fff}
.tlrow.nodate{border-style:dashed}
.tlrow.nodate::before{background:var(--muted)}
.tlbody b{display:block;font-size:15px;font-weight:700;margin-top:5px}
.tlbody p{margin:3px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.tlbody .tlabn{color:var(--vermilion);font-weight:600}

/* ── account: sign-in door and the ID card ────────── */
.signinrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--surface2);font-size:14.5px;color:var(--muted)}
.linkbtn{display:inline-flex;align-items:center;gap:5px;background:none;padding:0;font-size:14.5px;font-weight:700;
  color:var(--jade);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ground3)}
.idcard{background:var(--blush-soft);border:2px solid var(--text);border-radius:22px;padding:20px;margin:14px 0}
.idlabel{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.idval{font-size:38px;font-weight:600;line-height:1.15;letter-spacing:.04em;color:var(--text)}
.idsub{font-size:13px;color:var(--muted);margin-top:4px}

/* The new surfaces follow the existing accessibility modes rather than opting
   out of them: heavier outlines in high contrast, and the same 1.35 zoom on
   the kiosk body applies to the dashboard because it lives inside .kbody. */
html.a11y-contrast .visitcard,html.a11y-contrast .tlrow,
html.a11y-contrast .dashhead,html.a11y-contrast .idcard{border-width:3px;border-color:#000}
html.a11y-contrast .datechip{border:2px solid #000}
html.a11y-contrast .datechip.undated{border-style:dashed}

/* ── department routing ───────────────────────────────────────────────
   A queue split by clinic needs three things to be legible at a glance: which
   department a patient belongs to, when you are looking outside your own, and
   what the filter is currently hiding from you. */

.badge.dept{background:#EEE8F3;color:#5A4A73;border:1px solid #D8CCE6}
.badge.dept.cross{background:var(--haldi-soft);color:#7A4A1C;border-color:#F0D2B0}

.scopebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;margin:0 0 16px;border-radius:14px;
  background:#EEE8F3;border:1px solid #D8CCE6;color:#5A4A73;font-size:14px;line-height:1.45}
.scopebar span{flex:1;min-width:200px}
.scopebar b{font-weight:800}
.scopebar.gen{background:var(--sage-soft);border-color:#C3D4C2;color:#2F5E45}
.scopebar.all{background:var(--haldi-soft);border-color:#F0D2B0;color:#7A4A1C}

.panel.routing{border-left:3px solid #5A4A73}
.deptpick{margin-bottom:10px}
.deptnow{display:flex;align-items:center;gap:11px;padding:12px 14px;
  background:#EEE8F3;border:1px solid #D8CCE6;border-radius:16px;color:#5A4A73}
.deptnow b{display:block;font-size:17px;font-weight:800;line-height:1.25}
.deptnow small{display:block;font-size:12.5px;font-weight:600;opacity:.82;margin-top:2px}

.deptwhy{font-size:14.5px;line-height:1.55;margin:0 0 10px}
.deptalt{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 12px}
.deptalt b{font-weight:700;background:var(--surface2);border-radius:999px;padding:3px 9px;color:var(--muted)}
.deptlbl{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px}

select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;font-size:16px}

html.a11y-contrast .badge.dept,html.a11y-contrast .scopebar,
html.a11y-contrast .deptnow{border:2px solid #000;color:#000}

/* ── scripts ──────────────────────────────────────────────────────────
   A script with no font loaded renders as boxes, which looks like a broken
   kiosk rather than a missing font. Each language stamps its script onto
   <html> (and onto its own button on the language screen, so every option is
   legible before anything has been chosen). Devanagari covers Hindi and
   Marathi and is already the page default. */

html.script-gujr, .chip.script-gujr, [lang="gu"]{font-family:"Noto Sans Gujarati",Mukta,system-ui,sans-serif}
html.script-guru, .chip.script-guru, [lang="pa"]{font-family:"Noto Sans Gurmukhi",Mukta,system-ui,sans-serif}
html.script-taml, .chip.script-taml, [lang="ta"]{font-family:"Noto Sans Tamil",Mukta,system-ui,sans-serif}
html.script-telu, .chip.script-telu, [lang="te"]{font-family:"Noto Sans Telugu",Mukta,system-ui,sans-serif}

/* Tamil and Telugu set taller glyphs than Devanagari at the same point size,
   and the question headings are already large. A little extra leading stops
   descenders colliding with the line below at kiosk sizes. */
html.script-taml .q, html.script-telu .q{line-height:1.42}
html.script-taml .chip small, html.script-telu .chip small,
html.script-gujr .chip small, html.script-guru .chip small{line-height:1.45}

/* The Sanskrit terms keep the Devanagari serif only where the script is
   Devanagari; elsewhere they are transliterated and must use that script's
   own family, or they fall back to boxes. */
html.script-gujr .dev{font-family:"Noto Sans Gujarati",serif}
html.script-guru .dev{font-family:"Noto Sans Gurmukhi",serif}
html.script-taml .dev{font-family:"Noto Sans Tamil",serif}
html.script-telu .dev{font-family:"Noto Sans Telugu",serif}
.badge.lang{background:#F0EAF6;color:#553B7A;border:1px solid #DACDE8}
html.a11y-contrast .badge.lang{border:2px solid #000;color:#000}

/* ── the token slip ───────────────────────────────────────────────────
   On screen it is the card the patient reads before walking to the desk.
   On paper it is the only thing that prints. */

.slip{background:#fff;border:2px solid var(--line);border-radius:24px;
  padding:18px 20px;margin:16px 0;text-align:left}
.sliphead{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.sliphead span:first-child{flex:1;letter-spacing:.02em}
.slipdate{font-weight:600;white-space:nowrap}
.slipbody{display:flex;align-items:center;gap:18px}
.slipbody > div:first-child{flex:1;min-width:0}
.sliplabel{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.slip .token{font-size:56px;line-height:1.05;margin-top:2px}
.slip .token.pri{color:var(--vermilion)}
.slipdept{font-size:19px;font-weight:700;line-height:1.3;margin-top:1px}
.slippri{display:inline-block;margin-top:9px;padding:3px 10px;border-radius:999px;
  background:var(--vermilion);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.slipqr{flex:none;text-align:center}
.slipqr svg{display:block;border:1px solid var(--line);border-radius:8px}
.slipscan{font-size:11px;color:var(--muted);margin-top:5px;max-width:150px;line-height:1.35}

/* Printing.
   `visibility:hidden` is the usual trick for print-only content and it is the
   wrong one here: hidden elements keep their boxes, so the kiosk frame still
   pushes the slip onto a second sheet. Instead the slip is CLONED into a
   print root at body level and everything else is display:none — no ghost
   layout, one sheet, predictable on an 80mm thermal roll and on A4.

   Black, not the jade from the screen palette: a cheap reader hesitates over
   a dark-green QR, and the one at a registration desk is always cheap. */
@media print{
  @page{margin:6mm}
  html,body{background:#fff!important;height:auto!important}
  body > *{display:none!important}
  body > .printroot{display:block!important}

  .printroot .slip{width:100%;max-width:100%;margin:0;padding:0;border:0;
    border-radius:0;box-shadow:none;background:#fff;color:#000}
  .printroot .sliphead{border-bottom:1px solid #000;color:#000;font-size:10pt;
    padding-bottom:6pt;margin-bottom:8pt;gap:6pt}
  .printroot .slipdate{font-size:9pt}
  /* Receipt layout on paper: the QR gets the full width of the roll rather
     than half of it. The box below includes the four-module quiet zone the
     spec requires, so the symbol itself ends up around 36mm — roughly 1.2mm
     per module, which is what survives a thermal head and a desk scanner.
     Beside the token it was 26mm, and that is where scans start failing. */
  .printroot .slipbody{gap:8pt;flex-direction:column;align-items:center;text-align:center}
  .printroot .slipbody > div:first-child{width:100%}
  .printroot .sliplabel,.printroot .slipscan{color:#000}
  .printroot .sliplabel{font-size:7.5pt;letter-spacing:.1em}
  .printroot .slip .token,.printroot .slip .token.pri{color:#000;font-size:32pt;
    white-space:nowrap;letter-spacing:-.02em}
  .printroot .slipdept{font-size:13pt}
  .printroot .slippri{background:#000;color:#fff;font-size:7.5pt;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .printroot .slipqr{flex:none}
  .printroot .slipqr{margin-top:2pt}
  .printroot .slipqr svg{border:0;width:46mm;height:46mm}
  .printroot .slipcode{color:#000;font-size:10pt;letter-spacing:.14em;margin-top:3pt}
  .printroot .slipqr svg path{fill:#000!important}
  .printroot .slipqr svg rect{fill:#fff!important}
  .printroot .slipscan{font-size:8pt;max-width:60mm;margin-top:3pt}
}
.slipcode{font-size:15px;font-weight:600;letter-spacing:.16em;margin-top:6px;color:var(--text)}

/* ── login screens: phone entry & OTP ───────────────
   Orientation taken from the supplied reference — content at the top, the
   action low on the screen, and a real keypad tray welded to the bottom
   edge. Colours stay on the house palette. */

.kfoot:empty{display:none}

.login{flex:1;display:flex;flex-direction:column;margin:-26px -24px -12px;
  background:var(--surface);color:var(--text)}
.login .top{padding:20px 22px 0}
.login .grow{flex:1;min-height:12px}
.login .acts{padding:0 22px 12px}

.brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800;font-family:var(--head);
  color:var(--text);margin-bottom:18px}
.brand svg{width:22px;height:22px;color:var(--jade)}

.login h1{font-size:27px;line-height:1.2;font-weight:800;margin:0 0 7px;letter-spacing:-.01em}
.login .sub{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.login .sub b{color:var(--jade);font-weight:700}

/* one box, country code and number sharing it, divided by a hairline */
.numbox{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:16px;
  background:#fff;overflow:hidden;height:56px}
.numbox.on{border-color:var(--text);box-shadow:0 0 0 3px var(--blush)}
.numbox .cc{display:flex;align-items:center;gap:6px;padding:0 13px;font-size:16px;font-weight:700;
  border-right:1.5px solid var(--line);flex:none}
.numbox .cc svg{opacity:.5}
.numbox .num{flex:1;display:flex;align-items:center;padding:0 14px;font-size:18px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;min-width:0}
.numbox .num .ghost{color:#A89E94;font-weight:500}

.gobtn{display:block;width:100%;padding:17px;border-radius:999px;background:var(--ground2);
  color:var(--on-dark);font-size:17px;font-weight:700;text-align:center}
.gobtn:hover{background:var(--ground3)}
.gobtn:disabled{opacity:.35;cursor:not-allowed}

.fineprint{font-size:12px;line-height:1.55;color:var(--muted);text-align:center;margin:9px 0 0}
.fineprint a{color:var(--jade);font-weight:600}
.altlink{display:block;width:100%;text-align:center;font-size:14px;color:var(--muted);
  font-weight:700;margin-top:8px;padding:8px;border-radius:999px}
.altlink:hover{color:var(--jade);background:var(--surface2)}

.cells{display:flex;gap:9px}
.cells span{flex:1;height:56px;border:1.5px solid var(--line);border-radius:14px;background:#fff;
  display:grid;place-items:center;font-size:23px;font-weight:700}
.cells span.f{border-color:var(--text);box-shadow:0 0 0 3px var(--blush)}

.autov{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;
  font-weight:700;color:var(--jade);margin-top:9px}
.autov .sp{width:12px;height:12px;border:2px solid var(--jade-soft);border-top-color:var(--jade);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.retryline{text-align:center;font-size:13.5px;color:var(--text);margin-top:5px;min-height:20px}
.retryline button{font-size:13.5px;font-weight:700;color:var(--jade);padding:3px 6px;border-radius:6px}
.retryline button:hover{background:var(--jade-soft)}

/* Keypad tray: flat keys on a tinted ground, not twelve bordered cards. */
/* The keyboard owns the lower half of the screen, as it does on a phone. */
.pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  gap:7px;padding:9px 6px 11px;background:var(--surface2);
  border-top:1px solid var(--line);flex:0 0 46%}
.pad button{height:auto;min-height:0;border-radius:12px;background:#fff;box-shadow:0 1px 0 rgba(60,40,20,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.pad button:active{background:var(--surface);box-shadow:none}
.pad .d{font-size:25px;font-weight:500}
.pad .l{font-size:9px;font-weight:700;letter-spacing:.14em;margin-top:2px;color:var(--muted)}
.pad .blank{background:none;box-shadow:none;pointer-events:none}
.pad .del{background:#D9CFC3;box-shadow:none;font-size:19px}
.pad .del:active{background:#C9BDAE}

/* ── emergency signalling (doctor console) ──────────
   A waiting emergency has to survive a tired clinician glancing at a busy
   screen. Loud on purpose: full width, vermilion, alert glyph, and a
   standing call to action. */

.emgbar{display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  padding:16px 20px;margin:0 0 14px;border-radius:16px;
  background:var(--vermilion);color:#fff;border:0;
  box-shadow:0 10px 26px -10px rgba(192,57,43,.75);
  animation:emgpulse 2.4s ease-in-out infinite}
.emgbar:hover{background:#9E3325}
.emgbar .emgic{flex:none;display:grid;place-items:center;width:52px;height:52px;
  border-radius:14px;background:rgba(255,255,255,.18)}
.emgbar .emgic svg{color:#fff}
.emgbar .emgtxt{flex:1;min-width:0;display:block}
.emgbar .emgtxt b{display:block;font-size:20px;font-weight:800;letter-spacing:.04em}
.emgbar .emgtxt small{display:block;font-size:13.5px;opacity:.9;margin-top:3px;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.emgbar .emgcta{flex:none;font-size:15px;font-weight:700;
  background:rgba(255,255,255,.2);padding:10px 16px;border-radius:10px}

@keyframes emgpulse{
  0%,100%{box-shadow:0 10px 26px -10px rgba(192,57,43,.75)}
  50%    {box-shadow:0 10px 30px -6px rgba(192,57,43,.95)}
}
/* Some people get motion sick, and an emergency banner is the last thing
   that should make a clinician look away from the screen. */
@media (prefers-reduced-motion:reduce){ .emgbar{animation:none} }

/* the EMERGENCY pill, in the queue row and on the case header */
.badge.red.big{font-size:14px;font-weight:800;letter-spacing:.06em;padding:7px 12px;
  display:inline-flex;align-items:center;gap:6px}
.badge.red.big svg{color:#fff}

/* an emergency row should be readable as such from across the room */
.qrow.flag{border-left:6px solid var(--vermilion);background:var(--vermilion-soft)}
.qrow.flag .nm{color:#8E2D20}

/* the intake-flag panel inside a case */
.alert.emg{border-width:3px}
.alert.emg .emghd{display:flex;align-items:center;gap:10px;color:var(--vermilion)}
.alert.emg .emghd b{font-size:19px;font-weight:800;letter-spacing:.05em}
.alert.emg .emghd svg{flex:none}

/* ── patient-side emergency button ─────────────────
   Sits in the kiosk bar, so it is on screen at the language chooser, through
   the login, and on every question. Red and labelled, matching the alert the
   clinician sees on the other side, so both ends of the system call the same
   thing by the same name. */
.kbar .emgbtn{width:auto;min-height:44px;padding:0 16px;gap:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--vermilion);color:#fff;border-radius:999px;
  font-size:13px;font-weight:800;letter-spacing:.07em;
  box-shadow:0 0 0 0 rgba(192,57,43,.55);animation:kemg 2.6s ease-in-out infinite}
.kbar .emgbtn:hover{background:#9E3325}
.kbar .emgbtn svg{flex:none}
.kbar .emgbtn .emglbl{white-space:nowrap}

@keyframes kemg{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.55)}
  50%    {box-shadow:0 0 0 7px rgba(192,57,43,0)}
}
@media (prefers-reduced-motion:reduce){ .kbar .emgbtn{animation:none} }

/* Narrow kiosk: keep the glyph, drop the word rather than wrap the bar. */
@media (max-width:430px){ .kbar .emgbtn .emglbl{display:none} .kbar .emgbtn{padding:0 11px} }

/* The patient's own copy of the summary, in their language, with a Listen button. */
.summary-sec.forpatient{background:var(--haldi-soft);border-color:var(--haldi)}
.summary-sec.forpatient p{font-size:17px}
.btn.listen{width:auto;margin-top:10px;padding:10px 18px;min-height:0;font-size:15px;border-radius:999px}
.btn.listen.on{background:var(--haldi);color:#2C2622}

/* Drug-interaction notice on the doctor console: amber, one step below the emergency red. */
.alert.ixn{background:var(--haldi-soft);border:2px solid var(--haldi)}
.alert.ixn .emghd{display:flex;align-items:center;gap:10px;color:#7A4A1C}
.alert.ixn .emghd b{font-size:16px;font-weight:800;letter-spacing:.05em}
.alert.ixn .emghd svg{flex:none}
.badge.vermilion{background:#F8DDD7;color:var(--vermilion)}

/* "Are you still there?" — the idle prompt before the screen clears itself. */
.idlebox{position:fixed;inset:0;background:rgba(44,38,34,.6);display:grid;place-items:center;z-index:50;padding:16px}
.idlecard{background:#fff;border-radius:28px;padding:28px 26px;max-width:420px;width:100%;text-align:center}
.idlecard h2{margin:0 0 8px;font-size:26px}
.idlecard p{margin:0 0 18px;font-size:16px;line-height:1.5;color:var(--muted)}

.btn.consentbtn{width:auto;margin-top:10px;padding:10px 18px;min-height:0;font-size:14.5px;border-radius:999px}

/* Doctor console: banner for an emergency that arrived while looking elsewhere. */
.emgbanner{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:60;width:min(720px,calc(100% - 24px));display:flex;flex-direction:column;gap:6px}
.emgbanner button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:14px 18px;border-radius:14px;border:3px solid var(--vermilion);background:var(--vermilion-soft);color:#7A2A1E;font-size:16px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.emgbanner button.dismiss{border:0;background:rgba(44,38,34,.85);color:#fff;font-size:13px;padding:8px 14px;width:auto;align-self:flex-end;box-shadow:none}

/* Height / weight strip on the doctor console. */
.panel.vitals{padding:12px 16px}
.vrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.vrow label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.vrow .field{width:92px;padding:8px 10px;font-size:15px}
.vrow .bmi{font-size:15px}
.vrow .bmi b{font-size:17px}
.vrow .vsrc{font-size:12.5px;color:var(--muted)}
.vrow .btn{width:auto;min-height:0}

/* Doctor console: Home / Queue navigation and the home layout. */
.dnav{display:flex;gap:6px;align-items:center;padding:10px 22px 0;flex-wrap:wrap}
.dnav button,.dnav a{font:inherit;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.dnav button.on{background:var(--ground2);color:var(--on-dark);border-color:var(--ground2)}
.dnav .cnt{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--haldi);color:#2C2622;font-size:12px;text-align:center;margin-left:4px}
.dnav a{color:var(--muted);font-weight:600;margin-left:auto}
.dnav a + a{margin-left:0}
.split.home{align-items:start}
@media (max-width:760px){.split.home{grid-template-columns:1fr}}

.kbar #btn-full.on{background:var(--haldi);color:#2C2622}

/* The body figure wherever it is shown small and read-only. */
.bodymini{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bodymini .bodyfig{width:88px;flex:none}
.bodymini .bodyfig2{width:96px;flex:none}
.bodymini p{flex:1;min-width:120px}

/* ── the body map, on the illustrations ── */
.bodyfig2{width:100%;max-width:300px;height:auto;display:block;overflow:visible}
.bodyfig2 .side{font:700 12px "DM Sans",system-ui;fill:#8A7E74;letter-spacing:.1em}
.bodyfig2 .zone{fill:var(--jade);fill-opacity:0;stroke:#fff;stroke-opacity:0;stroke-width:2;cursor:pointer;
  transition:fill-opacity .18s,stroke-opacity .18s,transform .18s;transform-box:fill-box;transform-origin:center}
.bodyfig2 .zone:hover,.bodyfig2 .zone:focus-visible{fill-opacity:.45;stroke-opacity:.9;outline:none;transform:scale(1.08)}
.bodyfig2 .zone.sel{fill-opacity:.6;stroke-opacity:1}
.bodyfig2 .zone.sel.main{fill:var(--haldi);fill-opacity:.85}
.bodyfig2 .zone.static{cursor:default}
.bodyfig2 .zone.static:hover{transform:none;fill-opacity:0}
.bodyfig2 .zone.static.sel{fill-opacity:.6}
.bodyfig2 .zone.static.sel.main{fill-opacity:.85}
.bodyfig2 .pinbox{overflow:visible;pointer-events:none;text-align:center}
.bodyfig2 .pin{display:inline-block;max-width:150px;font:700 12px/1.2 var(--body);padding:6px 11px;border-radius:999px;background:var(--text);color:var(--surface);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 16px -6px rgba(0,0,0,.45);animation:pinpop .25s cubic-bezier(.2,.7,.2,1)}
.bodyfig2 .pin.main{background:var(--haldi);color:#2C2622}
@keyframes pinpop{from{transform:scale(.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.bodyfig2 .pin{animation:none}.bodyfig2 .zone{transition:none}}
.bodymap .bodyfig2{max-width:300px;margin:0 auto}
.bodyctl{display:flex;justify-content:center;margin-top:12px}
.bodyctl .flipbtn{width:auto;min-height:44px;padding:10px 20px;font-size:15px}
.bodypick span{color:var(--muted)}
html.a11y-contrast .bodyfig2 .zone.sel{stroke:#000;stroke-width:3}
html.a11y-contrast .bodyfig2 .pin{border:2px solid #000}
.bodymini p{margin:0;font-size:16px}
.bodyfig .figure{fill:#F3EDE4;stroke:#D8C6B8;stroke-width:2}
.bodyfig .zone{fill:var(--sage-soft);stroke:#fff;stroke-width:2}
.bodyfig .zone.static{cursor:default}
.bodyfig .zone.sel{fill:var(--haldi)}
.bodymap .bodyfig{width:100%;max-width:232px;height:auto}
.bodymap .zone{cursor:pointer;transition:.12s}
.bodymap .zone:hover{fill:var(--sage)}
.bodymap .zone.sel{fill:var(--haldi)}
.panel.bodypanel{margin-bottom:16px}
/* "Asked because you mentioned…" on a model-written question. */
.lede.aibecause{font-size:14px;color:var(--jade);margin-top:-4px;display:flex;align-items:center;gap:6px}
/* summary read aloud (doctor console) */
.actionbar .readbtn{display:inline-flex;align-items:center;gap:7px}
.actionbar .readbtn.on{background:var(--jade);color:#fff;border-color:var(--jade)}
.actionbar .readrate{padding:11px 13px;font-variant-numeric:tabular-nums;min-width:58px}
/* structured prescription */
.rx .rxhead{display:flex;align-items:center;gap:10px;margin:4px 0 8px;font-size:14px}
.rxgrid{font-size:14px}
.rxlabels,.rxrow{display:grid;grid-template-columns:2.2fr 1fr 1.5fr 1fr 1.2fr 30px;gap:6px;align-items:center}
.rxlabels span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 2px 3px}
.rxrow{margin-bottom:6px}
.rxrow .field{font-size:14px;padding:9px 10px;margin:0;min-width:0}
.rxdel{border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;padding:4px}
.rxdel:hover{color:var(--vermilion)}
.rxbtns{gap:8px;margin:6px 0 10px;flex-wrap:wrap}
.rxbtns .btn{width:auto;flex:none;font-size:14px;padding:9px 14px}
.rxsafe{border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:10px;background:var(--surface);font-size:14px;line-height:1.5}
.rxsafe.clear{border-color:#BFD8CB;background:var(--jade-soft)}
.rxsafe.quiet,.quiet{color:var(--muted);font-size:13.5px}
.rxsafe ul{margin:0;padding-left:0;list-style:none}
.rxsafe li{padding:6px 0;border-bottom:1px dashed var(--line)}
.rxsafe li:last-child{border-bottom:0}
.rxsafe li.sv-high{color:#7A2A1E}
.rxsafe .rxkind{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.rxsafe p{margin:4px 0}
.rxsafe .unrec{color:#7A4A1C}
.rxsafe .foot,#recpanel .foot{font-size:12px;color:var(--muted);margin-top:6px}
small.src{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.rxhist{margin-top:10px;font-size:13.5px}
.rxhist summary,.timeline summary{cursor:pointer;font-weight:600;color:var(--muted)}
.rxhist ol,.timeline ol{margin:8px 0 0;padding-left:20px;line-height:1.5}
.rxhist li,.timeline li{margin-bottom:7px}
#rxadv{min-height:60px}
/* continuous record */
.recsec{margin-bottom:12px}
.recsh{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.linkbtn{border:0;background:none;color:var(--jade);font-weight:700;cursor:pointer;font-size:13px}
.facts{list-style:none;margin:0;padding:0}
.fact{padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.fact.removed .fval{text-decoration:line-through;color:var(--muted)}
.fact.earlier .fval{color:var(--muted)}
.fnote{display:block;font-size:12px;color:#7A4A1C;margin-top:2px}
.factbtns{display:flex;gap:10px;margin-top:3px}
.factbtns button{border:0;background:none;padding:0;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline}
.factbtns button:hover{color:var(--text)}
.timeline{font-size:13.5px;margin-top:6px}
.timeline li.cur{color:var(--jade)}
/* since last visit */
.since{margin-bottom:16px;border-left:4px solid var(--haldi)}
.since h3{margin-bottom:6px}
.sprev{margin:0 0 8px;font-size:14.5px}
.sitems{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.5}
.sitems li{padding:4px 0}
.sitems li.sv-high{color:#7A2A1E;font-weight:600}
.snote{font-size:13.5px;color:var(--muted);margin:8px 0 0}
@media (max-width:720px){.rxlabels{display:none}.rxrow{grid-template-columns:1fr 1fr;}.rxrow .rx-drug{grid-column:1/-1}}
small.src svg,.rxsafe svg{display:inline-block;vertical-align:-2px}
/* AI treatment options */
.txpanel{margin-top:16px;border:1px dashed #9DBBA9}
.txpanel .dis{font-size:12.5px;color:var(--muted);margin:-2px 0 10px;line-height:1.5}
.txask{display:flex;gap:8px}
.txask .field{margin:0;flex:1;font-size:15px;padding:11px 13px}
.txask .btn{width:auto;flex:none;font-size:15px;padding:11px 18px}
.txhint{font-size:12px;color:var(--muted);margin:6px 0 10px}
.txbased{font-size:13.5px;color:var(--muted);margin:10px 0 6px}
.txconf{font-size:14px;background:var(--haldi-soft);border-radius:10px;padding:8px 11px;margin:6px 0 10px}
.txopt{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;background:#fff}
.txopt.risky{border-color:#E8B4AA}
.txopt.st-dismissed{opacity:.55}
.txopt.st-adopted{border-color:#9DBBA9;background:var(--jade-soft)}
.txh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;margin-bottom:6px}
.txmeds{margin:4px 0 6px;padding-left:20px;font-size:14.5px;line-height:1.55}
.txmeds small{color:var(--muted)}
.txnd,.txwhy,.txcau,.txmisc{font-size:13.5px;margin:4px 0;line-height:1.5}
.txwhy{color:var(--text)}
.txcau{color:#7A4A1C}
.txmisc{color:var(--muted)}
.txsafe{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px;font-size:13.5px}
.txsafe ul{list-style:none;margin:4px 0 0;padding:0}
.txsafe li{padding:3px 0}
.txsafe li.sv-high{color:#7A2A1E}
.txok{font-size:13px;color:#14604D;margin:8px 0 0}
.txbtns{gap:8px;margin-top:8px}
.txbtns .btn{width:auto;flex:none;font-size:14px;padding:8px 14px}
.fromai{color:#14604D}
.txopt svg,.txsafe svg,.txok svg,.fromai svg{display:inline-block;vertical-align:-2px}
/* the patient's AI health summary (kiosk) */
.rep-dis{font-size:13.5px;color:var(--muted);background:var(--surface2);border-radius:12px;padding:9px 12px;margin:8px 0 12px;line-height:1.5}
.rep-dis svg,.rep-urg svg{display:inline-block;vertical-align:-3px}
.rep-urg{display:flex;gap:12px;align-items:flex-start;border-radius:18px;padding:14px 16px;margin-bottom:12px;background:var(--haldi-soft);border:1px solid #F0D2B0;color:#7A4A1C}
.rep-urg.routine{background:var(--sage-soft);border-color:#C3D4C2;color:#2F5E45}
.rep-urg.emg{background:var(--vermilion-soft);border:2px solid var(--vermilion);color:#7A2A1E}
.rep-urg b{font-size:18px}
.rep-urg p{margin:4px 0 8px;font-size:15px;line-height:1.45}
.rep-urg .btn{display:inline-block;width:auto;text-decoration:none;background:var(--vermilion);border-color:var(--vermilion)}
.rep-sum{font-size:17px;line-height:1.55;margin:0 0 12px}
.summary-sec.rep ul{margin:4px 0 0;padding-left:20px;font-size:15.5px;line-height:1.6}
.summary-sec.rep li{margin-bottom:4px}
.summary-sec.rep p{margin:4px 0;font-size:15.5px}
.rep-cond{list-style:none;padding-left:0 !important}
.lk{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 9px;margin-right:4px;vertical-align:1px}
.lk-more-likely{background:var(--jade-soft);color:#14604D}
.lk-possible{background:var(--haldi-soft);color:#7A4A1C}
.lk-less-likely{background:var(--surface2);color:var(--muted)}
.rep-meds .dose{font-weight:600;color:#14604D}
.rep-meds .rxonly{font-size:13.5px;color:#7A4A1C}
.rep-note{background:var(--haldi-soft);border-radius:10px;padding:8px 11px;font-size:14.5px !important}
.rep-small{font-size:13px !important;color:var(--muted);margin:8px 0 0}
.rep-avoid{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;color:#7A2A1E}
.rep-warn li{color:#7A2A1E;font-weight:600}
.near-ask{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
.near-ask .btn{width:auto;flex:none}
.near-ask .field{width:130px;margin:0}
.near-ask .or{color:var(--muted);font-size:14px}
.near-list{list-style:none;margin:0;padding:0}
.near-list li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;font-size:15.5px}
.near-list small{color:var(--muted)}
.near-list .addr{display:block;margin-top:3px;font-size:13px}
.near-list .lk{margin-top:5px}
.near-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.near-btns .btn{width:auto;flex:none;font-size:14px;padding:8px 13px;text-decoration:none}
.prpanel{margin-top:16px}
.prline{font-size:14px;margin:4px 0;line-height:1.5}
.prline.muted{color:var(--muted);font-size:13px}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px}
.buylbl{font-size:12.5px;font-weight:700;color:var(--muted)}
.buybtn{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--text);text-decoration:none}
.buybtn:hover{border-color:var(--jade);color:#14604D}
.buyrx{flex-basis:100%;color:#7A4A1C;font-size:12.5px}
.jan{margin-top:10px;background:var(--sage-soft);border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.5}
.kbar #btn-mute.on{background:var(--vermilion-soft);color:#A33A2B}