/* Self Check-In for OSCAR - the touchscreen check-in screen */
:root {
  --bg: #edf2f0;
  --surface: #ffffff;
  --ink: #15302e;
  --muted: #5b6f6c;
  --line: #cfdcd8;
  --primary: #0d6b6f;
  --primary-ink: #ffffff;
  --primary-press: #0a5357;
  --key: #ffffff;
  --key-press: #d9e9e6;
  --ok: #1d8049;
  --ok-soft: #e3f3e8;
  --warn: #a35f00;
  --warn-soft: #fbf0dc;
  --info: #2c5d8a;
  --info-soft: #e5eef7;
  --u: min(1vh, 0.62vw);          /* one unit that scales with the screen */
  --radius: calc(var(--u) * 1.6);
  font-family: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.top {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 4); font-size: calc(var(--u) * 3.2); color: var(--muted);
}
.clinic { font-weight: 600; color: var(--primary); letter-spacing: .01em; }
.clock { font-variant-numeric: tabular-nums; }
#corner { position: fixed; left: 0; top: 0; width: 90px; height: 90px; z-index: 5; }

.screen {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 3); min-height: 0;
}
.step { font-size: calc(var(--u) * 2.6); color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.q { font-size: calc(var(--u) * 5.6); font-weight: 700; margin: calc(var(--u) * 1) 0 calc(var(--u) * 2.6); text-align: center; letter-spacing: -.01em; }

/* welcome */
.welcome-card {
  width: min(78vw, calc(var(--u) * 120)); padding: calc(var(--u) * 7) calc(var(--u) * 5);
  background: var(--primary); color: var(--primary-ink); border-radius: calc(var(--u) * 3.2);
  text-align: center; cursor: pointer; box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgba(13, 80, 82, .28);
  transition: transform .12s ease, background .12s ease;
}
.welcome-card:active { transform: scale(.985); background: var(--primary-press); }
.welcome-mark svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #bfe6e2; }
.welcome-title { font-size: calc(var(--u) * 7); margin: calc(var(--u) * 2.4) 0 calc(var(--u) * 1.4); line-height: 1.1; }
.welcome-sub { font-size: calc(var(--u) * 3.8); margin: 0; color: #cdeeea; }
.welcome-note { font-size: calc(var(--u) * 3); color: var(--muted); margin-top: calc(var(--u) * 4.5); }

/* first name */
.entry {
  width: min(88vw, calc(var(--u) * 130)); min-height: calc(var(--u) * 11); background: var(--surface);
  border: 3px solid var(--primary); border-radius: var(--radius); display: flex; align-items: center;
  padding: 0 calc(var(--u) * 3); font-size: calc(var(--u) * 6.4); font-weight: 600; letter-spacing: .02em;
  margin-bottom: calc(var(--u) * 2.6); white-space: nowrap; overflow: hidden;
}
.caret { display: inline-block; width: 3px; height: calc(var(--u) * 6.6); background: var(--primary); margin-left: 4px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.keyboard { width: min(94vw, calc(var(--u) * 150)); display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.krow { display: flex; gap: calc(var(--u) * 1); justify-content: center; }
.key {
  flex: 1 1 0; max-width: calc(var(--u) * 13.6); height: calc(var(--u) * 10); border: 1px solid var(--line);
  background: var(--key); border-radius: var(--radius); font-size: calc(var(--u) * 4.4); font-weight: 600;
  box-shadow: 0 2px 0 var(--line); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.key:active, .key.pressed { background: var(--key-press); transform: translateY(1px); box-shadow: none; }
.key.wide { max-width: calc(var(--u) * 26); flex-grow: 2; font-size: calc(var(--u) * 3.2); }
.key.space { max-width: calc(var(--u) * 52); flex-grow: 5; font-size: calc(var(--u) * 3); color: var(--muted); }
.key svg { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }

/* date of birth */
.dobrow { display: flex; gap: calc(var(--u) * 2); }
.dobbox {
  width: calc(var(--u) * 30); min-height: calc(var(--u) * 13); background: var(--surface); border: 3px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: calc(var(--u) * 1) calc(var(--u) * 2);
}
.dobbox.wide { width: calc(var(--u) * 34); }
.dobbox .lbl { font-size: calc(var(--u) * 2.4); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.dobbox .val { font-size: calc(var(--u) * 5.6); font-weight: 700; min-height: calc(var(--u) * 7); line-height: calc(var(--u) * 7); font-variant-numeric: tabular-nums; }
.dobbox.active { border-color: var(--primary); box-shadow: 0 0 0 calc(var(--u) * .6) rgba(13, 107, 111, .16); }
.dobbox.bad { border-color: var(--warn); }
.dobhint { min-height: calc(var(--u) * 4.4); font-size: calc(var(--u) * 2.8); color: var(--warn); margin: calc(var(--u) * 1.2) 0 calc(var(--u) * .6); text-align: center; }
.pad { display: grid; gap: calc(var(--u) * 1.2); grid-template-columns: repeat(4, calc(var(--u) * 24)); }
.pad.num { grid-template-columns: repeat(3, calc(var(--u) * 21)); }
.pad .key { max-width: none; height: calc(var(--u) * 9.4); }
.pad .key.month { font-size: calc(var(--u) * 3.6); }
.pad .key.sel { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.pad.small { grid-template-columns: repeat(3, calc(var(--u) * 15)); }
.pad.small .key { height: calc(var(--u) * 8); }

.actions { display: flex; justify-content: space-between; width: min(94vw, calc(var(--u) * 150)); margin-top: calc(var(--u) * 3); gap: calc(var(--u) * 2); }
.actions.tight { width: 100%; margin-top: calc(var(--u) * 2.4); justify-content: center; }
.btn {
  min-width: calc(var(--u) * 30); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 5); font-size: calc(var(--u) * 3.8);
  font-weight: 700; cursor: pointer; padding: 0 calc(var(--u) * 4); border: 3px solid var(--primary);
}
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.primary:active { background: var(--primary-press); }
.btn.primary:disabled { background: #a9c3c1; border-color: #a9c3c1; color: #eef5f4; }
.btn.ghost { background: transparent; color: var(--primary); }
.btn.ghost:active { background: var(--key-press); }

/* checking */
.spinner { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; border: calc(var(--u) * 1.3) solid #cfe3e0; border-top-color: var(--primary); animation: spin .9s linear infinite; }
.spinner.small { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-width: calc(var(--u) * .8); margin: calc(var(--u) * 2) auto 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* result */
.result-card {
  width: min(84vw, calc(var(--u) * 124)); background: var(--surface); border-radius: calc(var(--u) * 3.2); text-align: center;
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 4) rgba(20, 50, 48, .12);
  position: relative; overflow: hidden;
}
.result-icon {
  width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; margin: 0 auto calc(var(--u) * 2.6);
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 8); font-weight: 700;
  background: var(--ok-soft); color: var(--ok);
}
.result-icon svg { width: 62%; height: 62%; }
.result-icon.warn { background: var(--warn-soft); color: var(--warn); }
.result-icon.info { background: var(--info-soft); color: var(--info); font-family: Georgia, serif; font-style: italic; }
.result-title { font-size: calc(var(--u) * 6.4); margin: 0 0 calc(var(--u) * 1.6); line-height: 1.15; }
.result-text { font-size: calc(var(--u) * 3.8); color: var(--muted); margin: 0 auto; line-height: 1.4; max-width: calc(var(--u) * 100); }
.result-text b { color: var(--ink); }
.result-actions { display: flex; justify-content: center; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 4.4); }
.timer { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * .8); background: #e6eeec; }
.timer-bar { height: 100%; width: 100%; background: var(--primary); transform-origin: left; }
.result-card.quiet { box-shadow: none; background: transparent; }
.staff-hint { font-size: calc(var(--u) * 2.2); color: #8a9b98; margin-top: calc(var(--u) * 5); }

/* staff */
#staff { position: fixed; inset: 0; background: rgba(12, 32, 31, .55); display: flex; align-items: center; justify-content: center; z-index: 10; }
.staff-card {
  background: var(--surface); border-radius: calc(var(--u) * 2.4); padding: calc(var(--u) * 3.6) calc(var(--u) * 4.4);
  width: min(92vw, calc(var(--u) * 78)); text-align: center; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .3);
}
.staff-card h2 { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 4.2); }
.staff-sub { margin: 0 0 calc(var(--u) * 2); color: var(--muted); font-size: calc(var(--u) * 2.8); }
.pin-dots { display: flex; justify-content: center; gap: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 2.4); min-height: calc(var(--u) * 3); }
.pin-dots span { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; background: var(--primary); }
.pin-dots.bad span { background: var(--warn); }
.pad.small { justify-content: center; margin: 0 auto; }
.staff-state { font-size: calc(var(--u) * 3); font-weight: 600; margin-bottom: calc(var(--u) * 1); }
.staff-state.ok { color: var(--ok); } .staff-state.bad { color: var(--warn); }
.staff-counts { font-size: calc(var(--u) * 2.5); color: var(--muted); margin-bottom: calc(var(--u) * 2.4); line-height: 1.5; }
.staff-buttons { display: grid; gap: calc(var(--u) * 1.4); }
.staff-buttons .btn { width: 100%; height: calc(var(--u) * 8.4); font-size: calc(var(--u) * 3.2); }

/* languages */
.langbtn {
  margin-top: calc(var(--u) * 3.4); display: flex; align-items: center; gap: calc(var(--u) * 1.6); max-width: min(86vw, calc(var(--u) * 132));
  background: var(--surface); border: 2px solid var(--line); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 1.6) calc(var(--u) * 3.4);
  cursor: pointer; color: var(--primary); box-shadow: 0 2px 0 var(--line);
}
.langbtn:active { background: var(--key-press); }
.langbtn svg { width: calc(var(--u) * 5); height: calc(var(--u) * 5); flex: 0 0 auto; }
.langbtn-main { font-size: calc(var(--u) * 3.6); font-weight: 700; white-space: nowrap; }
.langbtn-more { font-size: calc(var(--u) * 2.8); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); width: min(94vw, calc(var(--u) * 150)); }
.langkey {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 0 var(--line);
  min-height: calc(var(--u) * 10.5); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .3);
}
.langkey:active { background: var(--key-press); }
.langkey .nat { font-size: calc(var(--u) * 3.6); font-weight: 700; color: var(--ink); line-height: 1.15; }
.langkey .eng { font-size: calc(var(--u) * 2.2); color: var(--muted); }
.langkey.cur { border-color: var(--primary); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(13, 107, 111, .2); }
.q.tight { margin-bottom: calc(var(--u) * .6); }
.qhint { font-size: calc(var(--u) * 3); color: var(--muted); margin: 0 0 calc(var(--u) * 2.2); text-align: center; max-width: min(90vw, calc(var(--u) * 140)); }
.actions.center { justify-content: center; }
.pad .key.month { flex-direction: column; gap: 0; line-height: 1.1; font-size: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * .6); text-align: center; }
.pad .key.month small { font-size: calc(var(--u) * 2); color: var(--muted); font-weight: 600; }
.pad .key.month.sel small { color: #cdeeea; }

/* last-name letter */
.letters { display: grid; grid-template-columns: repeat(9, calc(var(--u) * 13)); gap: calc(var(--u) * 1.2); justify-content: center; }
.letters .key { max-width: none; height: calc(var(--u) * 11); font-size: calc(var(--u) * 5); }

/* yes / no */
.ask-card { width: min(88vw, calc(var(--u) * 130)); text-align: center; }
.askrow { display: flex; justify-content: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 3); }
.btn.askbtn { min-width: calc(var(--u) * 40); height: calc(var(--u) * 14); font-size: calc(var(--u) * 5.2); border-radius: calc(var(--u) * 7); }

/* after checking in */
.result-notes { list-style: none; padding: 0; margin: calc(var(--u) * 3) auto 0; max-width: calc(var(--u) * 104); text-align: start; display: grid; gap: calc(var(--u) * 1.4); }
.result-notes li { font-size: calc(var(--u) * 3.4); line-height: 1.4; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); border-radius: var(--radius); }
.result-notes li.wait { background: var(--info-soft); color: var(--info); }
.result-notes li.see { background: var(--warn-soft); color: #6d4000; font-weight: 600; }
.result-notes li b { white-space: nowrap; }

/* right-to-left languages: the screen (and the month buttons) read right to left; the name keyboard and number pads stay left to right */
[dir=rtl] .keyboard, [dir=rtl] .entry, [dir=rtl] .pad.num, [dir=rtl] .letters, [dir=rtl] .clock { direction: ltr; }
[dir=rtl] .caret { margin-left: 4px; }

/* ---------- 1.2: contact details, concerns, another appointment ---------- */
.btn.wide { min-width: calc(var(--u) * 56); }
.result-text.strong { color: var(--ink); font-weight: 600; margin-top: calc(var(--u) * 2.4); }
.result-notes li.info { background: var(--info-soft); color: var(--info); }
.result-notes li.book { background: var(--ok-soft); color: #145c34; font-weight: 600; }
.result-actions { flex-wrap: wrap; }

/* contact rows */
.crows { width: min(92vw, calc(var(--u) * 132)); display: grid; gap: calc(var(--u) * 1.6); }
.crow {
  display: grid; grid-template-columns: calc(var(--u) * 9) 1fr auto; align-items: center; gap: calc(var(--u) * 2.4);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: calc(var(--u) * 2) calc(var(--u) * 2.8);
}
.crow.changed { border-color: var(--ok); background: #f4fbf6; }
.cico { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--info-soft); color: var(--info); display: flex; align-items: center; justify-content: center; }
.cico svg { width: 55%; height: 55%; }
.crow.changed .cico { background: var(--ok-soft); color: var(--ok); }
.clbl { font-size: calc(var(--u) * 2.6); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cval { font-size: calc(var(--u) * 4); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cval.none { color: var(--muted); font-weight: 600; }
.crow .btn { min-width: calc(var(--u) * 24); height: calc(var(--u) * 9); font-size: calc(var(--u) * 3.4); }

/* phone entry */
.seg { display: flex; gap: 0; border: 3px solid var(--primary); border-radius: calc(var(--u) * 5); overflow: hidden; margin-bottom: calc(var(--u) * 2.2); }
.seg button { border: 0; background: var(--surface); color: var(--primary); font-size: calc(var(--u) * 3.4); font-weight: 700; padding: calc(var(--u) * 1.8) calc(var(--u) * 5); cursor: pointer; min-width: calc(var(--u) * 30); }
.seg button.on { background: var(--primary); color: var(--primary-ink); }
.entry.short { width: min(70vw, calc(var(--u) * 80)); justify-content: center; font-variant-numeric: tabular-nums; margin-bottom: 0; }

/* email / address entry */
.tfields { display: flex; gap: calc(var(--u) * 1.6); width: min(94vw, calc(var(--u) * 150)); justify-content: center; }
.tbox {
  flex: 1 1 0; min-width: 0; min-height: calc(var(--u) * 12); background: var(--surface); border: 3px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; cursor: pointer; padding: calc(var(--u) * .8) calc(var(--u) * 2.4); text-align: start;
}
.tbox.postal { flex: 0 0 calc(var(--u) * 30); }
.tbox.active { border-color: var(--primary); box-shadow: 0 0 0 calc(var(--u) * .6) rgba(13, 107, 111, .16); }
.tbox.bad { border-color: var(--warn); }
.tbox .lbl { font-size: calc(var(--u) * 2.2); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.tbox .val { font-size: calc(var(--u) * 4.2); font-weight: 700; min-height: calc(var(--u) * 5.6); line-height: calc(var(--u) * 5.6); white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; direction: ltr; }
.tbox.active .val::after { content: ""; display: inline-block; width: 3px; height: calc(var(--u) * 4.6); background: var(--primary); margin-left: 3px; vertical-align: middle; animation: blink 1.1s steps(1) infinite; }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); justify-content: center; min-height: 0; margin-bottom: calc(var(--u) * 1.2); max-width: min(94vw, calc(var(--u) * 150)); }
.chip { background: var(--info-soft); color: var(--info); border: 0; border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.9); font-weight: 700; cursor: pointer; }
.chip:active { background: #cfe0f0; }
.keyboard.compact .key { height: calc(var(--u) * 8.2); font-size: calc(var(--u) * 3.8); }
.keyboard.compact { gap: calc(var(--u) * .8); }
.keyboard.compact .krow { gap: calc(var(--u) * .8); }

/* how many concerns */
.countrow { display: flex; justify-content: center; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 3); flex-wrap: wrap; }
.countrow .btn { min-width: calc(var(--u) * 20); height: calc(var(--u) * 16); font-size: calc(var(--u) * 6.4); border-radius: calc(var(--u) * 3); }

/* times to choose from */
.slotgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); width: min(92vw, calc(var(--u) * 132)); }
.slot {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 0 var(--line); cursor: pointer;
  min-height: calc(var(--u) * 13); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: start;
}
.slot:active { background: var(--key-press); }
.slot .d { font-size: calc(var(--u) * 3.2); color: var(--muted); font-weight: 600; }
.slot .t { font-size: calc(var(--u) * 4.8); font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
#slotsNote:empty { display: none; }
#slotsNote { color: var(--warn); font-weight: 600; }

[dir=rtl] .entry.short, [dir=rtl] .tfields .val, [dir=rtl] .keyboard.compact, [dir=rtl] .slot .t { direction: ltr; }

/* fit the email / address screen on 768-pixel-high screens too */
#textEdit > * { flex-shrink: 0; }
#textEdit .dobhint { min-height: calc(var(--u) * 3.4); margin: calc(var(--u) * .8) 0 calc(var(--u) * .4); }
#textEdit .actions { margin-top: calc(var(--u) * 2); }
.keyboard.compact .key { height: calc(var(--u) * 7.4); }
.chips { flex-wrap: nowrap; justify-content: safe center; overflow: hidden; direction: ltr; }
.chip { flex: 0 0 auto; font-size: calc(var(--u) * 2.6); padding: calc(var(--u) * 1) calc(var(--u) * 1.8); unicode-bidi: isolate; }
[dir=rtl] .cval { text-align: right; }
[dir=rtl] .tbox { align-items: flex-end; }
.countrow .btn.ghost { background: var(--surface); box-shadow: 0 2px 0 var(--line); }
.countrow .btn.ghost:active { background: var(--key-press); }

/* in person or by phone */
.moderow { display: flex; justify-content: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 3); flex-wrap: wrap; }
.modebtn {
  width: calc(var(--u) * 52); min-height: calc(var(--u) * 30); background: var(--surface); border: 3px solid var(--primary); border-radius: calc(var(--u) * 3);
  color: var(--primary); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 4.4); font-weight: 700; padding: calc(var(--u) * 2.4); box-shadow: 0 2px 0 var(--line);
}
.modebtn:active { background: var(--key-press); }
.modebtn svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }

/* a result with several notes: smaller, so it always fits (and the timer bar stays at the bottom) */
#result .result-card { flex-shrink: 0; }
.result-card.dense { padding: calc(var(--u) * 3.4) calc(var(--u) * 5) calc(var(--u) * 3.6); }
.result-card.dense .result-icon { width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin-bottom: calc(var(--u) * 1.4); font-size: calc(var(--u) * 5); }
.result-card.dense .result-title { font-size: calc(var(--u) * 5); margin-bottom: calc(var(--u) * 1); }
.result-card.dense .result-text { font-size: calc(var(--u) * 3.2); }
.result-card.dense .result-notes { margin-top: calc(var(--u) * 2); gap: calc(var(--u) * 1); }
.result-card.dense .result-notes li { font-size: calc(var(--u) * 2.9); padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2); }
.result-card.dense .result-actions { margin-top: calc(var(--u) * 2.6); }
.result-card.dense .btn { height: calc(var(--u) * 8.6); font-size: calc(var(--u) * 3.4); }

/* ---------- booking from the first screen ---------- */
.homecards { display: flex; gap: calc(var(--u) * 4); justify-content: center; align-items: stretch; }
#welcome.two .welcome-card { width: min(44vw, calc(var(--u) * 74)); padding: calc(var(--u) * 6) calc(var(--u) * 3.6); }
#welcome.two .welcome-title { font-size: calc(var(--u) * 6.2); }
#welcome.two .welcome-card.book { background: var(--surface); color: var(--primary); border: 3px solid var(--primary); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 4) rgba(13, 80, 82, .14); }
#welcome.two .welcome-card.book .welcome-mark svg { color: var(--primary); }
#welcome.two .welcome-card.book .welcome-sub { color: var(--muted); }
#welcome.two .welcome-card.book:active { background: var(--key-press); }
#welcome:not(.two) .two, #welcome.two .one { display: none; }
.choices { display: grid; gap: calc(var(--u) * 1.8); width: min(90vw, calc(var(--u) * 110)); }
.choices.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(92vw, calc(var(--u) * 132)); }
.choice {
  background: var(--surface); border: 3px solid var(--primary); border-radius: var(--radius); color: var(--primary); cursor: pointer; text-align: start;
  min-height: calc(var(--u) * 14); padding: calc(var(--u) * 2) calc(var(--u) * 3.6); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 2px 0 var(--line);
}
.choice:active { background: var(--key-press); }
.choice .t { font-size: calc(var(--u) * 4.6); font-weight: 800; }
.choice .s { font-size: calc(var(--u) * 3.2); color: var(--muted); font-weight: 600; margin-top: calc(var(--u) * .4); }
/* the earliest phone / in-person time under a choice */
.choice .e, .modebtn .e .e { display: block; font-size: calc(var(--u) * 3.1); color: var(--ink); font-weight: 600; margin-top: calc(var(--u) * .5); }
.choice .e::before { content: ""; display: inline-block; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; background: var(--primary); margin-inline-end: calc(var(--u) * 1.2); vertical-align: middle; }
.modebtn .e { display: block; font-size: calc(var(--u) * 3.1); color: var(--ink); font-weight: 600; text-align: center; }
.modebtn .e:empty { display: none; }
.slot .doc { font-size: calc(var(--u) * 2.9); color: var(--ink); font-weight: 700; }
.dobhint.muted { color: var(--muted); }
.dobhint.muted.bad { color: var(--warn); }
#phn .entry.short { margin-bottom: 0; }

/* three cards on the first screen */
#welcome.n3 .welcome-card { width: min(30vw, calc(var(--u) * 58)); padding: calc(var(--u) * 5) calc(var(--u) * 2.6); }
#welcome.n3 .welcome-title { font-size: calc(var(--u) * 5.2); }
#welcome.n3 .welcome-sub { font-size: calc(var(--u) * 3.2); }
#welcome.n3 .welcome-mark svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }

/* ---------- clinic agreement ---------- */
.agreebody, .consentlist {
  width: min(92vw, calc(var(--u) * 140)); flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  user-select: none; -webkit-user-select: none;
}
.agreebody h2 { font-size: calc(var(--u) * 3.8); color: var(--primary); margin: calc(var(--u) * 2.6) 0 calc(var(--u) * 1); }
.agreebody h2:first-child { margin-top: 0; }
.agreebody p, .agreebody li { font-size: calc(var(--u) * 3.1); line-height: 1.5; margin: 0 0 calc(var(--u) * 1); }
.agreebody ul { margin: 0 0 calc(var(--u) * 1); padding-left: calc(var(--u) * 4); }
[dir=rtl] .agreebody, [dir=rtl] .consentlist { direction: ltr; text-align: left; }
.consentlist { display: grid; gap: calc(var(--u) * 1.6); align-content: start; background: transparent; border: 0; padding: 0; }
.consent { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: calc(var(--u) * 2) calc(var(--u) * 3); display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 1) calc(var(--u) * 3); align-items: center; }
.consent.on { border-color: var(--ok); background: #f4fbf6; }
.consent .ct { font-size: calc(var(--u) * 3.6); font-weight: 800; grid-column: 1; }
.consent .ct .req { font-size: calc(var(--u) * 2.3); font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: calc(var(--u) * 2); padding: calc(var(--u) * .3) calc(var(--u) * 1.4); margin-left: calc(var(--u) * 1.2); vertical-align: middle; }
.consent .cx { font-size: calc(var(--u) * 2.8); line-height: 1.45; color: #3b4f4d; grid-column: 1; }
.consent .tick { grid-column: 2; grid-row: 1 / span 2; min-width: calc(var(--u) * 26); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 5.5); border: 3px solid var(--primary); background: var(--surface); color: var(--primary);
  font-size: calc(var(--u) * 3.4); font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); padding: 0 calc(var(--u) * 2.4); }
.consent .tick .box { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border: 3px solid currentColor; border-radius: calc(var(--u) * .8); display: inline-flex; align-items: center; justify-content: center; }
.consent.on .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.consent.on .tick .box::after { content: "✓"; font-size: calc(var(--u) * 3.4); line-height: 1; }
.sigwrap { position: relative; width: min(88vw, calc(var(--u) * 130)); height: calc(var(--u) * 34); background: var(--surface); border: 3px solid var(--primary); border-radius: var(--radius); }
#sigPad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; }
.sigline { position: absolute; left: 7%; right: 7%; bottom: 26%; border-bottom: 2px dashed #b9cbc7; }
.sigx { position: absolute; left: 3%; bottom: 25%; font-size: calc(var(--u) * 4); color: #b9cbc7; }
#agree .actions, #consents .actions, #sign .actions { margin-top: calc(var(--u) * 2); }

/* 1.3: the patient's other appointments */
.uplist { display: grid; gap: calc(var(--u) * 1.6); width: min(92vw, calc(var(--u) * 130)); margin-top: calc(var(--u) * 1.4); }
.uprow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius); padding: calc(var(--u) * 2) calc(var(--u) * 3); box-shadow: 0 2px 0 var(--line); }
.uprow .upwhen { display: flex; flex-direction: column; gap: calc(var(--u) * .4); font-size: calc(var(--u) * 3.4); color: var(--muted); font-weight: 600; }
.uprow .upwhen b { font-size: calc(var(--u) * 4.2); color: var(--ink); }
.uprow .uptag { color: var(--primary); font-weight: 800; }
.uprow.cancelled .upwhen b { text-decoration: line-through; color: var(--muted); }
.uprow.failed .uptag { color: #a35f00; }
.uprow .upbtns { display: flex; gap: calc(var(--u) * 1.4); flex-shrink: 0; }
.uprow .upbtns .btn { min-width: 0; padding-inline: calc(var(--u) * 3); }
.uprow .upnote { font-size: calc(var(--u) * 3); color: var(--muted); max-width: calc(var(--u) * 46); text-align: end; }

/* 1.3: blood pressure / weight */
.vhint { max-width: min(92vw, calc(var(--u) * 140)); }
.vrow { display: flex; gap: calc(var(--u) * 5); align-items: center; justify-content: center; margin-top: calc(var(--u) * 1.4); flex-wrap: wrap; }
.vfields { display: grid; gap: calc(var(--u) * 1.4); width: calc(var(--u) * 62); }
.vfields .tbox { min-height: calc(var(--u) * 11); }
.vfields .tbox .val { font-size: calc(var(--u) * 5.4); font-variant-numeric: tabular-nums; }

/* 1.3: questionnaires */
.qprog { font-size: calc(var(--u) * 3.2); color: var(--muted); font-weight: 700; margin: 0; }
.qstem { font-size: calc(var(--u) * 3.6); color: var(--muted); margin: calc(var(--u) * 1) 0 0; text-align: center; max-width: min(92vw, calc(var(--u) * 140)); }
.q.qtext { max-width: min(92vw, calc(var(--u) * 140)); text-align: center; }
.qans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.8); width: min(92vw, calc(var(--u) * 132)); margin-top: calc(var(--u) * 2); }
.qans .choice { min-height: calc(var(--u) * 13); align-items: center; text-align: center; }
.qans .choice.sel { background: var(--primary); color: #fff; }