:root {
  /* Dark theme: a dark-gray page background (not black) with a slightly
     lighter --surface for cards/panels that need to read as separate from
     the page, and a light --ink/--ink-muted pair for body text.

     --blue/--blue-dark are kept at their original (dark, saturated) values
     because they're also used as FILLED button/tile backgrounds with white
     text (.btn, .menu-item, .lang-btn's selected state) — that pairing
     already has great contrast and doesn't care what the page background
     is. --blue-light is the bright counterpart for every place blue is
     used bare (text, icons, markers, hairline borders, dark-tint-card text)
     directly against the dark page/surface, where the original dark blue
     would nearly disappear.

     Green and red are only ever used as bare accents (never as a filled
     button background), so their base variables were brightened directly.
     The four "-tint" card backgrounds went from a light pastel to a dark,
     desaturated version of the same hue, with their paired "-dark"/"-ink"
     text brightened to match — so text coloured with --ink or an accent
     colour still contrasts correctly inside them. Every new value here was
     checked against WCAG AA (>=4.5:1 for text) against --bg, --surface, and
     its own tint. */
  --bg: #1e1e1e;
  --surface: #2c2c2e;
  --ink: #f0f0f0;
  --ink-muted: #a9aeb4;
  --blue: #0b5fae;
  --blue-dark: #084a89;
  --blue-light: #5b9bd9;
  --blue-tint: #1c2c3d;
  --red: #ff6961;
  --amber: #b7791f;
  --amber-tint: #3a2a12;
  --amber-ink: #e6a83c;
  --green: #34c281;
  --green-tint: #14301f;
  --green-ink: #38cf8c;
  --red-tint: #3a1a1e;
  --red-ink: #f2707a;
  --border: #4a4d52;
  --frame: #1b1d1f;
  --frame-edge: #2c2f32;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* The kiosk fills whatever it is running on — a wide landscape touchscreen, a
   tablet in landscape, or a browser window. No device frame. */
.kiosk-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
}

.screen-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---------- Screen scaffold ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 56px 28px 28px;
  background: var(--bg);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen.is-active { opacity: 1; transform: translateX(0); }
.screen.is-leaving { opacity: 0; transform: translateX(-16px); }

.screen__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.screen__sub {
  color: var(--ink-muted);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.4;
}

.reset-btn {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 14px;
  z-index: 5;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.2s ease;
}
.btn:active { background: var(--blue-dark); }
.btn:disabled { opacity: 0.4; cursor: default; }

.btn--ghost {
  color: var(--blue-light);
  background: none;
  border: 1.5px solid var(--border);
}
.btn--link {
  color: var(--blue-light);
  background: none;
  border: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px;
  cursor: pointer;
}

/* ---------- MedAI logo mark ---------- */
/* Scales to font-size; the box is 1em square. Used big on Welcome and small as
   a brand mark elsewhere. See frontend/js/logoMark.js. */

.logo-mark {
  position: relative;
  width: 1em;
  height: 1em;
  flex: none;
}

/* Green pulse ring — beacons outward from the cross and fades, echoing the
   original radar/beacon mark (red -> green, dot -> the cross, same 2.8s
   ease-out pacing). Sits behind the capsule so it reads as radiating from the
   mark's centre rather than sitting on top of it. */
.logo-mark__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: max(1.5px, 0.018em) solid var(--green);
  transform: scale(0.36);
  opacity: 0;
  animation: logo-pulse 2.8s ease-out infinite;
}
@keyframes logo-pulse {
  0% { transform: scale(0.4); opacity: 0.6; }
  65% { opacity: 0.08; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* White capsule, thin blue outline, no seam — a single continuous shape. This
   is the part that spins on the opening screen; it stays inside the 1em box at
   every angle because its length (0.86em) is under 1em. The blue stays solid
   so the rotation reads against the white page. */
.logo-mark__capsule {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.86em;
  height: 0.5em;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--bg);
  border: max(2px, 0.022em) solid var(--blue-light);
  animation: logo-spin 3.6s linear infinite;
}
@keyframes logo-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Green medical cross — fixed dead centre, never rotates (sibling of the
   capsule, not a child). Small footprint, heavy arms so it reads bold. */
.logo-mark__cross {
  position: absolute;
  inset: 0;
}
.logo-mark__cross::before,
.logo-mark__cross::after {
  content: '';
  position: absolute;
  background: var(--green);
  border-radius: 0.02em;
}
.logo-mark__cross::before {
  left: 50%;
  top: 39%;
  bottom: 39%;
  width: max(3px, 0.082em);
  transform: translateX(-50%);
}
.logo-mark__cross::after {
  top: 50%;
  left: 39%;
  right: 39%;
  height: max(3px, 0.082em);
  transform: translateY(-50%);
}

/* Everywhere that isn't the opening screen: the same shape, no rotation, no
   pulse. */
.logo-mark--static .logo-mark__capsule { animation: none; }
.logo-mark--static .logo-mark__pulse { animation: none; opacity: 0; }

/* Opening screen only: no capsule, no rotation — the cross itself stays fixed
   and solid, and one or two ghost copies of it (see logoMark.js) scale up and
   fade out on a loop underneath it, like a radar ping. Each ghost is just
   another .logo-mark__cross, so scaling it scales both bars evenly and the
   cross shape holds as it grows. */
.logo-mark--welcome .logo-mark__cross--ghost {
  animation: logo-cross-ping 1.8s ease-out infinite;
}
.logo-mark--welcome .logo-mark__cross--ghost-2 {
  animation-delay: 0.8s;
}
@keyframes logo-cross-ping {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ---------- Welcome ---------- */

.welcome {
  /* .screen already gives this position: absolute; inset: 0. */
  align-items: center;
  /* Four flex children — wordmark, tagline, mark, tap-hint — with the gaps
     distributed evenly. Wordmark is pinned to the top by padding-top. */
  justify-content: space-between;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  padding-top: clamp(60px, 10.5vh, 140px);
  padding-bottom: clamp(30px, 4.5vh, 64px);
}

.wordmark {
  position: relative;
  font-size: clamp(66px, 28vw, 300px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 0.95;
}
.wordmark .ai { color: var(--blue-light); }

.tagline {
  position: relative;
  margin: 0;
  color: #d7dadd;
  font-size: clamp(19px, 5.6vw, 28px);
  font-weight: 600;
  max-width: 22ch;
  line-height: 1.35;
}

.welcome > .logo-mark {
  position: relative;
  font-size: 152px;
  /* Nudge the mark down a touch without disturbing the other three
     space-between children — purely visual, its flow slot is unchanged. */
  top: clamp(12px, 2.2vh, 22px);
}

.tap-hint {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  /* Pull it up toward the mark above — visual only (position: relative), so
     the wordmark / tagline / mark keep their space-between positions. */
  top: clamp(-56px, -6vh, -30px);
}

/* ---------- Brand lockup (small mark + wordmark) ---------- */
/* "MedAI" wordmark above the menu title — plain text, no mark. */
.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: clamp(10px, 2vh, 18px);
}
.brand-lockup__mark {
  font-size: 34px;
}
.brand-lockup__text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-lockup__text .ai { color: var(--blue-light); }

/* ---------- Language ---------- */

.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}
.lang-btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: start;
  min-height: 62px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lang-btn[aria-pressed='true'] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.lang-btn .sub { display: block; font-size: 11px; font-weight: 500; color: var(--ink-muted); margin-top: 2px; }
.lang-btn[aria-pressed='true'] .sub { color: rgba(255, 255, 255, 0.85); }

.screen__footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Privacy ---------- */

.privacy-head { text-align: center; margin-bottom: clamp(18px, 3vh, 30px); }
.privacy-icon { color: var(--blue-light); line-height: 0; margin-bottom: 12px; }
.privacy-head .screen__title {
  font-size: clamp(27px, 4vh, 34px);
  font-weight: 800;
  margin-bottom: 8px;
}
[data-screen='privacy'] .screen__sub {
  font-size: clamp(15px, 2vh, 17px);
  font-weight: 500;
  color: var(--ink-muted);
}

/* Reads as prose, not fine print: larger, a little heavier, near-full ink. */
.privacy-body {
  font-size: clamp(16px, 2.3vh, 19px);
  font-weight: 500;
  line-height: 1.6;
  color: #e6e8ea;
}
.privacy-body ul { padding-inline-start: 22px; margin: 4px 0 0; list-style: disc; }
.privacy-body li { margin-bottom: clamp(16px, 2.8vh, 26px); }
.privacy-body li::marker { color: var(--blue-light); }
.notice {
  background: var(--amber-tint);
  color: var(--amber-ink);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 14px 0;
}

/* ---------- Search ---------- */

.field {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.field input {
  flex: 1;
  font-family: inherit;
  font-size: 16px;
  padding: 14px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
}
.field input:focus { border-color: var(--blue-light); }

/* Type-ahead dropdown attached to a search field (see autocomplete.js). The
   input keeps its normal `.field input` styling; this wraps it so the
   suggestion list can be positioned directly beneath it. */
.autocomplete { position: relative; flex: 1; min-width: 0; }
/* The `display` below outranks the UA stylesheet's [hidden] { display: none },
   so the closed dropdown needs this or it shows as an empty box. */
.autocomplete-list[hidden] { display: none; }
.autocomplete-list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.autocomplete-item {
  text-align: start;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 12px 10px;
  cursor: pointer;
}
.autocomplete-item:hover,
.autocomplete-item.is-active { background: var(--blue-tint); color: var(--blue-light); }

.hint { font-size: 12px; color: var(--ink-muted); margin: 0 0 14px; }

.result-list { display: flex; flex-direction: column; gap: 8px; }
.result-item {
  text-align: start;
  font-family: inherit;
  /* A <button> doesn't inherit color — without this the product name falls
     back to the UA's black buttontext, invisible on the dark surface. */
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
}
.result-item:active { background: var(--blue-tint); }
.result-item strong { font-size: 15px; font-weight: 700; display: block; }
.result-item span { font-size: 13px; color: var(--ink-muted); }
.result-item__strength {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  margin-top: 1px;
}
.result-item .tag {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
}
/* Dietary-supplement result — a plain, non-green tag so it doesn't read as a
   "ready / cached" badge. */
.result-item .tag--supp { color: var(--ink-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  font-family: inherit;
  /* <button>: see .result-item. */
  color: var(--ink);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--surface);
  cursor: pointer;
}

/* ---------- Scan result ---------- */

/* Scan-result banner — the same colour language as the interaction results:
   ✅ exact barcode match, ⚠️ matched on drug name only. */
.scan-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.scan-result__symbol { font-size: 22px; line-height: 1.2; flex: none; }
.scan-result__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-result__text strong { font-size: 15px; font-weight: 800; line-height: 1.25; }
.scan-result__text span { font-size: 13px; line-height: 1.5; }
.scan-result--ok { background: var(--green-tint); color: var(--green-ink); }
.scan-result--caution { background: var(--amber-tint); color: var(--amber-ink); }

/* An unrecognized barcode is not a coloured state — plain neutral panel. */
.scan-note {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.scan-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.scan-photo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
  flex-shrink: 0;
}
.scan-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scan-card__body strong { font-size: 17px; font-weight: 800; line-height: 1.25; }
.scan-card__body span { font-size: 12.5px; color: var(--ink-muted); }

.scan-code { font-size: 12px; color: var(--ink-muted); margin: 4px 0 0; }
.scan-code span {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

.scan-links { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.scan-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* ---------- Medication detail ---------- */

/* Packaging photo on the leaflet — lets a customer check the box in their hand
   against what's on screen. Absent for plenty of products (and removed outright
   if the image fails to load), so nothing below it may depend on its height. */
.product-photo__frame {
  margin: 0 0 14px;
  padding: 10px;
  background: var(--surface);
  border-radius: 12px;
  display: flex;
  justify-content: center;
}
.product-photo {
  max-width: 100%;
  max-height: 190px;
  object-fit: contain;
  border-radius: 6px;
}

.med-head { margin-bottom: 14px; }
.med-head h2 { font-size: 22px; margin: 0; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.med-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-muted); }

/* Ask / Food / Add-another-OTC — stacked vertically with a small gap so each
   is its own clearly separated tap target, on the phone as well as wide. */
.med-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.section {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.section + .section { border-top-color: var(--border); }

/* "What is this?" intro — the lead block, no rule above it. */
.med-body > .section:first-child { border-top: none; padding-top: 0; }
.med-intro .content-body { font-size: 14.5px; }

/* ---------- Key points (grounded plain-language summary) -----------------
   The same quiet blue-tint treatment as a grounded Q&A answer — it signals
   "condensed from the sources", not a headline. Full sections follow below. */
.summary-card {
  background: var(--blue-tint);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.summary-card__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue-light);
}
.summary-card__list {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.summary-card__list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.summary-card__list li::marker { color: var(--blue-light); }
.summary-card__more { margin-top: 10px; }
.summary-card__more > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-light);
  cursor: pointer;
  list-style: none;
}
.summary-card__more > summary::-webkit-details-marker { display: none; }
.summary-card__more > summary::after {
  content: '+';
  flex: none;
  font-weight: 400;
}
.summary-card__more[open] > summary::after { content: '−'; }
.summary-card__more .summary-card__list { margin-top: 8px; }
.summary-card__note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---------- Estimated cost (NADAC) ----------------------------------------
   Deliberately quiet: an estimate, never styled like a headline price tag.
   Same typography scale as every other section; no new colours. */
.price-slot:empty { display: none; }
.price-amount {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.price-unit { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.price-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.price-basis {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink);
}
.price-note {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.price-source { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ink-muted); }
.price-block--compact .price-amount { font-size: 18px; }
.price-block--compact .price-basis,
.price-block--compact .price-note { font-size: 12px; }
.alt-price + .alt-price { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.price-for {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Ask ---------- */

.answer {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.6;
  margin-bottom: 12px;
}
.answer--grounded { background: var(--blue-tint); color: var(--ink); }
.answer--referral { background: var(--amber-tint); color: var(--amber-ink); }

/* Traffic-light states for interaction checks (Basic Scan add-on + Food & drink):
   green = nothing documented, yellow = possible/caution, red = documented. */
.answer--ok { background: var(--green-tint); color: var(--green-ink); }
.answer--caution { background: var(--amber-tint); color: var(--amber-ink); }
.answer--alert { background: var(--red-tint); color: var(--red-ink); }
.answer--ok .content-body, .answer--ok .content-subtitle, .answer--ok .content-list li,
.answer--caution .content-body, .answer--caution .content-subtitle, .answer--caution .content-list li,
.answer--alert .content-body, .answer--alert .content-subtitle, .answer--alert .content-list li { color: inherit; }
.answer--ok .answer__label { color: var(--green-ink); }
.answer--caution .answer__label { color: var(--amber-ink); }
.answer--alert .answer__label { color: var(--red-ink); }

/* Interaction result headline: a symbol (✅ / ⚠️ / 🛑) + a bold statement of the
   result, in the box's own colour. Green also carries the scoped
   "not the same as safe" line (.answer__support). */
.answer__result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.answer__result-symbol { font-size: 22px; line-height: 1; flex: none; }
.answer__result strong {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: inherit;
}
.answer__support {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: inherit;
}
.answer .content-body,
.answer .content-subtitle,
.answer .content-list li { color: inherit; }
.answer .content-body { margin-bottom: 8px; }
.answer .content-body:last-child { margin-bottom: 0; }
.answer__label {
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  opacity: 0.75;
}
/* kept for any old markup */
.answer__source {
  margin-top: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  opacity: 0.7;
}
.citation {
  border-inline-start: 3px solid var(--blue-light);
  padding: 6px 0;
  padding-inline-start: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.citation strong { display: block; color: var(--blue-light); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

.suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* Inline loading indicator — the MedAI logo-mark (logoMark.js) at a small
   size, spinning the same way it does on the opening screen. `.logo-mark`
   drives its own size off font-size, so this class only positions it. */
.spinner {
  display: block;
  font-size: 22px;
  margin: 20px auto;
}

/* Full-screen loading veil shown by the router while a screen's data (a
   first-time AI summary or translation can take a few seconds) is still
   loading — so the previous screen never just looks frozen, and a second tap
   is visibly a no-op. Fades in only after a short delay (see router.js) so
   instant transitions don't flash it. */
.route-loading {
  position: fixed;
  inset: 0;
  /* Below the Start Over / Help chrome (z-index 5) so they stay reachable as
     an escape hatch, above all screen content. */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(30, 30, 30, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.route-loading.is-visible { opacity: 1; visibility: visible; }
.route-loading .spinner { font-size: 30px; margin: 0 0 4px; }
.route-loading__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
  max-width: 30ch;
}
@media (prefers-reduced-motion: reduce) {
  .route-loading { transition: none; }
}

.error-text { color: var(--red); font-size: 13px; margin: 8px 0 0; }

/* ---------- Barcode scanner (browser camera) ---------- */
/* Only the web path uses this — in the native shell the plugin puts up its own
   full-screen camera UI and none of this is built. */

.scanner {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: #000;
}
.scanner__stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}
.scanner__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Aiming guide — a plain rectangle over the middle of the preview. */
.scanner__frame {
  position: absolute;
  inset: 18% 8%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}
.scanner__hint {
  margin: 0;
  max-width: 420px;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
}
.scanner__cancel { min-width: 200px; }

@media (prefers-reduced-motion: reduce) {
  .logo-mark__capsule { animation: none; }
  .logo-mark__pulse { animation: none; opacity: 0; }
  .logo-mark__cross--ghost { animation: none; opacity: 0; }
  .screen { transition: opacity 0.2s ease; transform: none !important; }
}

/* ---------- Standing disclaimer ---------- */
/* Required on every screen that shows medication information, interaction
   results, or an AI-generated answer. Small and muted, never blocking. */

/* Sits with the disclaimer beside machine-translated content. Same small,
   muted treatment — never a blocking dialog. */
.translation-note {
  margin: 18px 0 -8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-muted);
}
/* When both are present the disclaimer follows straight on, no second rule. */
.translation-note + .disclaimer {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

.disclaimer {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---------- FAQ ---------- */

.faq-btn {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 14px;
  z-index: 5;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
}

.faq-group { margin-bottom: 18px; }
.faq-group__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue-light);
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  font-weight: 400;
  color: var(--ink-muted);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ---------- FAQ ask box -------------------------------------------------- */
.faq-ask { margin: 4px 0 22px; }
.faq-ask__label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.faq-ask__input { flex: 1; }
.faq-ask__result:empty { display: none; }
.faq-ask__result { margin-top: 12px; }
.faq-ask__result .faq-group {
  margin-bottom: 0;
  background: var(--blue-tint);
  border-radius: 12px;
  padding: 4px 16px 8px;
}
.faq-ask__result .faq-item:first-child { border-top: none; }

/* ---------- Right-to-left (Arabic) ---------- */

[dir='rtl'] .screen { transform: translateX(-16px); }
[dir='rtl'] .screen.is-active { transform: translateX(0); }
[dir='rtl'] .screen.is-leaving { transform: translateX(16px); }
[dir='rtl'] .tagline,
[dir='rtl'] .screen__sub { text-align: start; }

@media (prefers-reduced-motion: reduce) {
  [dir='rtl'] .screen { transform: none !important; }
}

/* ---------- Main menu ---------- */
/* The three options fill the space below the header rather than sitting as a
   small centred cluster — see [data-screen='menu'] override below. */

.menu-list {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.6vh, 24px);
  flex: 1;
  min-height: 0;
}
.menu-item {
  font-family: inherit;
  text-align: start;
  /* Inverted so the three main options stand out clearly on the menu. */
  background: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 20px;
  padding: clamp(20px, 3vh, 34px) clamp(20px, 5vw, 28px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  /* Each button grows to share the available height — big, near-square blocks. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu-item:active { border-color: var(--blue-dark); background: var(--blue-dark); }
.menu-item strong { display: block; font-size: clamp(21px, 3vh, 30px); font-weight: 700; color: #fff; line-height: 1.2; }
.menu-item span { display: block; font-size: clamp(14px, 2vh, 18px); color: rgba(255, 255, 255, 0.85); margin-top: 7px; line-height: 1.35; }

/* ---------- Picker "selected" chip ---------- */

.picked-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--blue-tint);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}
.picked-chip strong { font-weight: 700; color: var(--blue-light); }

/* ---------- Compare ---------- */

.cmp-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
}
.cmp-head__col { min-width: 0; }
.cmp-head__col strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.cmp-head__col span { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.cmp-head__vs {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cmp-row { border-bottom: 1px solid var(--border); padding: 14px 0; }
.cmp-row__label {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cmp-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-cell { color: var(--ink); }
.cmp-cell > :first-child { margin-top: 0; }
.cmp-cell > :last-child { margin-bottom: 0; }

.cmp-section { padding: 16px 0 4px; }
.cmp-section .answer { margin-top: 6px; }

/* Warnings + interaction: the red accent, used sparingly. */
.cmp-row--warning {
  border-inline-start: 3px solid var(--red);
  padding-inline-start: 14px;
  margin-inline-start: -1px;
}
.cmp-row--warning .cmp-row__label { color: var(--red); }

/* ---------- Alternatives ---------- */

.alt-block { border-top: 1px solid var(--border); padding: 16px 0; }
.alt-block > :last-child { margin-bottom: 0; }

/* Nearby-pharmacy finder (Alternatives screen). The trigger button matches the
   primary blue buttons on the leaflet — full-width, same padding/type. */
.pharmacy-finder > div { display: flex; flex-direction: column; }
.pharmacy-finder .btn { width: 100%; }
.pharmacy-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pharmacy-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pharmacy-item strong { font-size: 14.5px; }
.pharmacy-item span { font-size: 12.5px; color: var(--ink-muted); }
.pharmacy-item .pharmacy-meta { margin-top: 4px; color: var(--ink); }
.pharmacy-maps-link { color: var(--blue-light); font-weight: 600; text-decoration: none; }
.pharmacy-maps-link:hover { text-decoration: underline; }
.content-list li.alt-more {
  list-style: none;
  margin-inline-start: -22px;
  color: var(--ink-muted);
  font-style: italic;
}

.notice--closing {
  background: var(--blue-tint);
  color: var(--blue-light);
  font-weight: 600;
}

/* ---------- Content typography (results screens) ----------------------------
   One hierarchy used by every results screen. Titles and sub-headings are
   noticeably larger and heavier than body copy so older customers can scan
   them at a glance. No new colours — titles use --ink, warnings use --red. */

.content-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.content-subtitle {
  margin: 16px 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.content-subtitle:first-child { margin-top: 0; }

.content-body {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--ink);
}
.content-body:last-child { margin-bottom: 0; }

.content-list {
  margin: 4px 0 12px;
  padding-inline-start: 22px;
  list-style: disc;
}
.content-list li {
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.55;
  color: var(--ink);
}
.content-list li::marker { color: var(--ink-muted); }

/* Warnings: the red accent, used sparingly — a left rule and a red title. */
.section--warning {
  border-inline-start: 3px solid var(--red);
  padding-inline-start: 14px;
  margin-inline-start: -1px;
}
.section--warning .content-title { color: var(--red); }
.section--warning .content-subtitle { color: var(--red); }

/* Section-header icons — the only icons in the app. Small, decorative (the
   heading text carries the meaning): a yellow triangle for Warnings, a red
   alert dot for Interactions. Same visual language, no emoji. */
.warn-icon,
.interact-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 7px;
  vertical-align: -0.13em;
  background: center / contain no-repeat;
}
.warn-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6a83c' d='M12 2 1 21h22L12 2z'/%3E%3Cpath fill='%23fff' d='M11 9h2v6h-2zm0 7h2v2h-2z'/%3E%3C/svg%3E");
}
.interact-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff6961'/%3E%3Cpath fill='%23fff' d='M11 6h2v8h-2zm0 10h2v2h-2z'/%3E%3C/svg%3E");
}
.cmp-row--warning .cmp-row__label .warn-icon,
.cmp-row--warning .cmp-row__label .interact-icon { width: 0.95em; height: 0.95em; }

/* "See all warnings / interactions" toggle under a condensed section. Reads as
   a link, sized for touch. Nothing is hidden permanently — this only expands. */
.see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  background: none;
  border: none;
  cursor: pointer;
}
.see-all::before {
  content: '';
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
}
.see-all[aria-expanded='true']::before { transform: rotate(180deg); }
.answer .see-all { color: inherit; text-decoration: underline; }
.cmp-cell .see-all { font-size: 12px; }

/* Compact variant for the narrow Compare columns. */
.content-title--compact { font-size: 13px; margin-bottom: 6px; }
.content-subtitle--compact { font-size: 12.5px; margin: 10px 0 3px; }
.content-body--compact { font-size: 12.5px; font-weight: 450; line-height: 1.5; margin-bottom: 7px; }
.content-list--compact { padding-inline-start: 18px; margin: 3px 0 8px; }
.content-list--compact li { font-size: 12.5px; line-height: 1.45; margin-bottom: 5px; }

/* ---------- Landscape layout -----------------------------------------------
   The kiosk fills the whole display — no device frame. Content is held to a
   comfortable reading measure and centred; the screens that genuinely benefit
   from the extra room (menu, leaflet, compare, Q&A, FAQ) spread into columns.
   Type and touch targets get BIGGER in landscape, never smaller: this is a
   physical touchscreen used by older customers. Below 900px everything falls
   back to the single-column stack, so a tablet in portrait still works. */

/* Short screens read better as one vertically centred block. `safe center`
   keeps the top reachable if the content ever overflows. */
[data-screen='privacy'],
[data-screen='language'] {
  justify-content: center;
  justify-content: safe center;
}

/* The menu fills the screen: header at the top, the three big option blocks
   growing to take the rest. */
[data-screen='menu'] {
  justify-content: flex-start;
}
[data-screen='menu'] .screen__title {
  font-size: clamp(24px, 3.4vh, 30px);
  margin-bottom: 6px;
}
[data-screen='menu'] .screen__sub {
  font-size: clamp(15px, 2vh, 18px);
  margin-bottom: clamp(14px, 3vh, 30px);
}

/* The menu spreads into a row as soon as there is room for it — a portrait
   tablet gets it too. */
@media (min-width: 640px) {
  /* Tablet / kiosk: back to a grid of cards that sizes to its content, not the
     full-height stack the phone uses. */
  .menu-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    flex: 0 1 auto;
    align-content: start;
  }
  .menu-item { flex: 0 1 auto; }
}

.screen { --content-max: 940px; }
[data-screen='privacy'] { --content-max: 780px; }
[data-screen='language'] { --content-max: 1040px; }
[data-screen='menu'] { --content-max: 1120px; }
[data-screen='medication'],
[data-screen='alternatives'],
[data-screen='faq'] { --content-max: 1180px; }
[data-screen='ask'],
[data-screen='food'] { --content-max: 1240px; }
[data-screen='compare'] { --content-max: 1320px; }

@media (min-width: 900px) {
  .screen { padding: 84px max(40px, calc((100% - var(--content-max)) / 2)) 44px; }

  /* Persistent chrome */
  .reset-btn,
  .faq-btn { font-size: 15px; padding: 11px 20px; inset-block-start: 20px; }
  .reset-btn { inset-inline-end: 26px; }
  .faq-btn { inset-inline-start: 26px; }

  /* Type + touch targets scale up */
  .screen__title { font-size: 30px; margin-bottom: 8px; }
  .screen__sub { font-size: 17px; margin-bottom: 28px; max-width: 72ch; }
  .btn { font-size: 18px; padding: 20px 28px; border-radius: 14px; }
  .btn--link { font-size: 16px; padding: 12px 8px; }
  .chip { font-size: 15px; padding: 11px 18px; }
  .field { gap: 12px; margin-bottom: 12px; }
  .field input { font-size: 18px; padding: 18px; }
  .hint { font-size: 14px; }
  .notice { font-size: 15px; padding: 16px 18px; border-radius: 12px; }
  .content-title { font-size: 19px; }
  .content-subtitle { font-size: 16px; }
  .content-body { font-size: 15.5px; }
  .content-list li { font-size: 15.5px; margin-bottom: 8px; }
  .answer { font-size: 15.5px; padding: 20px 22px; }
  .see-all { font-size: 15px; padding: 10px 2px; }
  .cmp-cell .see-all { font-size: 13px; }
  .price-amount { font-size: 26px; }
  .price-unit { font-size: 15.5px; }
  .price-basis { font-size: 14.5px; }
  .price-note { font-size: 14px; }
  .price-source { font-size: 12px; }
  .citation { font-size: 13.5px; }
  .disclaimer,
  .translation-note { font-size: 12.5px; padding-top: 16px; margin-top: 26px; }
  .translation-note { margin-bottom: -10px; }
  .translation-note + .disclaimer { margin-top: 10px; padding-top: 0; }

  /* Footer actions run along the bottom of the content instead of stacking
     full-width, and follow the content rather than being pinned to the very
     bottom of a tall display. */
  .screen__footer {
    margin-top: 40px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
  }

  /* Short screens read better as one vertically centred block.
     `safe center` keeps the top reachable if the content ever overflows. */
  [data-screen='menu'],
  [data-screen='privacy'],
  [data-screen='language'] {
    justify-content: center;
    justify-content: safe center;
  }
  .screen__footer .btn,
  .screen__footer .btn--ghost { min-width: 280px; }

  /* Welcome — a landscape kiosk / tablet has width to spare, so cap by height. */
  .wordmark { font-size: min(24vw, 32vh, 320px); }
  .tagline { font-size: clamp(26px, 3.6vw, 42px); max-width: 30ch; }
  .welcome > .logo-mark { font-size: min(19.5vh, 190px); }
  .tap-hint { font-size: 25px; }

  /* Language — a single row of wide targets */
  .lang-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .lang-btn { font-size: 20px; min-height: 94px; padding: 22px 20px; }
  .lang-btn .sub { font-size: 13px; margin-top: 4px; }

  /* Privacy */
  .privacy-head .screen__title { font-size: clamp(30px, 3.2vw, 40px); }
  .privacy-body { font-size: clamp(18px, 1.9vw, 21px); }
  .privacy-body li { margin-bottom: clamp(18px, 2.2vw, 26px); }
  .privacy-icon svg { width: 62px; height: 62px; }

  /* Main menu — a row of large cards */
  .menu-list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 172px;
    padding: 30px 26px;
  }
  .menu-item strong { font-size: 21px; line-height: 1.25; }
  .menu-item span { font-size: 15px; margin-top: 10px; }

  /* Search + pickers — results fill the width as a grid */
  .result-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    align-content: start;
  }
  .result-item { padding: 18px; }
  .result-item strong { font-size: 17px; }
  .result-item span { font-size: 14px; }
  .chips { gap: 10px; margin-top: 10px; }

  /* Leaflet — product identity + actions in a rail beside the label text */
  .med-layout {
    display: grid;
    /* Cap the reading column — a 1000px-wide line of label text is unreadable
       however much room the kiosk has. */
    grid-template-columns: 320px minmax(0, 760px);
    justify-content: center;
    gap: 48px;
    align-items: start;
  }
  .med-rail { position: sticky; top: 0; }
  .med-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
  .med-actions .btn,
  .med-actions .btn--ghost { width: 100%; padding: 18px; font-size: 17px; }
  .med-head h2 { font-size: 28px; }
  .med-head p { font-size: 15px; }
  .med-body .section:first-child { border-top: none; padding-top: 0; }
  .section { padding: 22px 0; }

  /* Compare — two real product columns with a dividing rule */
  /* Product names line up exactly with the two body columns; "vs" floats on
     the centre rule rather than taking a column of its own. */
  .cmp-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    padding: 14px 0 16px;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }
  .cmp-head__vs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .cmp-head__col strong { font-size: 20px; }
  .cmp-head__col span { font-size: 14px; }
  .cmp-head__vs { font-size: 14px; }
  .cmp-row { padding: 24px 0; }
  .cmp-row__label { font-size: 17px; margin-bottom: 14px; }
  .cmp-row__grid { gap: 44px; position: relative; }
  .cmp-row__grid::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(50% - 0.5px);
    width: 1px;
    background: var(--border);
  }
  .content-title--compact { font-size: 15px; }
  .content-subtitle--compact { font-size: 14.5px; }
  .content-body--compact { font-size: 14px; line-height: 1.55; }
  .content-list--compact li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }

  /* Q&A and Food & drink — ask on the left, answer on the right */
  .qa-layout {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .qa-ask { position: sticky; top: 0; }
  .qa-ask .screen__sub { margin-bottom: 18px; }
  .suggestions { gap: 10px; }

  /* Alternatives */
  .alt-block { padding: 22px 0; }
  .alt-block:first-of-type { border-top: none; }

  /* FAQ — two columns of question groups */
  .faq { columns: 2; column-gap: 52px; }
  .faq-group { break-inside: avoid; margin-bottom: 28px; }
  .faq-group__title { font-size: 13px; }
  .faq-item summary { font-size: 16px; }
  .faq-item p { font-size: 15px; }

  /* Scan result card */
  .scan-card { padding: 22px; gap: 22px; border-radius: 16px; }
  .scan-photo { width: 120px; height: 120px; }
  .scan-card__body strong { font-size: 22px; }
  .scan-card__body span { font-size: 15px; }
  .scan-code { font-size: 14px; }
  .scan-link { font-size: 15px; padding: 12px 0; }
}

/* Very wide kiosk displays — more breathing room, not smaller text. */
@media (min-width: 1500px) {
  .screen { padding-top: 96px; }
  [data-screen='menu'] { --content-max: 1280px; }
  [data-screen='compare'] { --content-max: 1500px; }
  [data-screen='medication'] { --content-max: 1280px; }
}

/* Short landscape (a laptop or tablet on its side): trim vertical padding so
   the primary action still lands above the fold. */
@media (min-width: 900px) and (max-height: 760px) {
  .screen { padding-top: 62px; padding-bottom: 28px; }
  .reset-btn,
  .faq-btn { font-size: 14px; padding: 9px 16px; inset-block-start: 14px; }
  .screen__title { font-size: 26px; }
  .menu-item { min-height: 148px; padding: 24px; }
  .lang-btn { min-height: 80px; }
  /* Short landscape — keep things compact. */
  .welcome { padding-top: clamp(32px, 6vh, 68px); padding-bottom: clamp(24px, 5vh, 52px); }
  .wordmark { font-size: min(18vw, 26vh, 240px); }
  .welcome > .logo-mark { font-size: min(15vh, 138px); }
}