@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Instrument+Serif:ital@0;1&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap");

/* Two brand colours, taken from the logo, and a neutral ground.
 *
 * The palette used to carry eight hues, and four of them - navy, forest,
 * saffron, crimson - all meant "this one is selected". A screen cannot teach
 * someone what a colour means if the colour changes on the next screen, so
 * each one now has exactly one job:
 *
 *   red    emergency, and only emergency. Call 000, urgent symptoms.
 *   navy   every other primary action, selected state and heading.
 *   paper  the ground. Nothing else is coloured.
 *
 * Anything that needs to stand out and is not an emergency uses navy. If that
 * ever feels too quiet, the answer is size or weight, not a fifth hue: on this
 * app red has to keep meaning "now".
 */
:root {
  /* brand, straight off the logo */
  --brand-red: #d42b3c;
  --brand-navy: #16264a;

  /* ground and ink */
  --paper: #eae8e1;
  --paper-2: #dedbd2;
  --card: #ffffff;
  --ink: #16130f;
  --ink-2: #463f35;
  --ink-3: #6e6558;

  /* roles, all pointing at the two brand colours */
  --indigo: var(--brand-navy);
  --indigo-2: #2b3e6b;
  --indigo-muted: #e9edf6;
  --navy: var(--brand-navy);
  --crimson: var(--brand-red);
  --crimson-muted: #fdeaee;

  /* kept as aliases so nothing breaks while the last uses are migrated */
  --saffron: var(--brand-navy);
  --saffron-muted: var(--indigo-muted);
  --forest: var(--brand-navy);
  --forest-muted: var(--indigo-muted);

  --border: #cfc9bd;
  --border-2: #b5ad9e;
  --scale: 1;
  --card-radius: 16px;
  --button-radius: 14px;
  --tap-size: 68px;

  /* How wide the content column is allowed to get.
   *
   * This was a fixed 34rem, which is a phone. On a laptop the whole site sat
   * in a narrow strip with two thirds of the screen empty, and the app looked
   * like a phone screenshot rather than a website.
   *
   * It widens in steps instead. Reading measure still governs paragraphs -
   * long lines are hard to read at any screen size - but the cards, the
   * language grid and the symptom list use the room they are given. */
  --page-measure: 34rem;
  --cards-measure: 34rem;
}

/* tablet and up */
@media (min-width: 700px) {
  :root {
    --page-measure: 44rem;
    --cards-measure: 62rem;
  }
}

/* laptop and up */
@media (min-width: 1100px) {
  :root {
    --page-measure: 52rem;
    --cards-measure: 76rem;
  }
}

/* White on black. The brand colours are overridden here too: navy on black is
 * barely visible, and the logo has to stay legible for the people most likely
 * to have this setting on. Red is lightened rather than dropped, because it is
 * the one colour in the app that carries meaning on its own. */
body.high-contrast {
  --brand-red: #ff5c5c;
  --brand-navy: #ffffff;

  --paper: #000000;
  --paper-2: #000000;
  --card: #000000;
  --navy: #000000;
  --ink: #ffffff;
  --ink-2: #ffffff;
  --ink-3: #d8d8d8;
  --indigo: #ffffff;
  --indigo-muted: #000000;
  --saffron: #ffffff;
  --saffron-muted: #000000;
  --forest: #ffffff;
  --forest-muted: #000000;
  --crimson: #ff5c5c;
  --crimson-muted: #000000;
  --border: #ffffff;
  --border-2: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Noto Sans", "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
a,
input {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 4px solid #2b6be0;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Every screen shows the chosen language first and the English underneath, so
 * staff can read it over the user's shoulder. When the chosen language IS
 * English both lines are the same words, and the page reads as if it stutters:
 * "What do you need? / What do you need?".
 *
 * This rule existed for card bodies but not for the page headings, the home
 * screen descriptions or the settings preview, which is why the titles were
 * still doubling up. */
.english-interface .card-english-text[lang="en"],
.english-interface .english-subtitle,
.english-interface .english-reference {
  display: none;
}

.zh,
.yue {
  font-family: "Noto Sans SC", "Atkinson Hyperlegible", sans-serif;
}

.vi,
.it {
  font-family: "Noto Sans", "Atkinson Hyperlegible", sans-serif;
}

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 99;
  padding: 14px 20px;
  border-radius: 0 0 10px 0;
  background: var(--indigo);
  color: #ffffff;
}

.skip-link:focus {
  left: 0;
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1.5px solid var(--border);
  background: var(--card);
}

.header-bar {
  max-width: var(--page-measure);
  min-height: 76px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(18px * var(--scale));
  font-weight: 700;
}

/* The old mark was a navy tile with the letter S, unrelated to the logo.
 * brand-logo.js draws the wordmark: S, heart, S, peak. These rules only size
 * and align it. --brand-size is set inline per instance and everything else
 * follows from it, so one number scales the whole lockup. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.02em;
  font-size: calc(var(--brand-size, 24px) * 1.5);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.brand-heart {
  flex-shrink: 0;
  /* Height only. The heart is wider than it is tall, so pinning both would
     squash it; width follows from the viewBox. Cap height of the letters is
     about 1.04 x --brand-size, and the heart reads best a touch taller than
     the S it sits between. */
  height: calc(var(--brand-size, 24px) * 1.12);
  width: auto;
  margin-inline: calc(var(--brand-size, 24px) * -0.04);
}

.brand-word-sos { color: var(--brand-red); }
.brand-word-peak { color: var(--brand-navy); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.settings-link {
  min-height: 44px;
  padding: 9px 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--border-2);
  border-radius: 100px;
  font-size: calc(14px * var(--scale));
  font-weight: 700;
}

.clock {
  text-align: end;
  line-height: 1;
}

.clock-time {
  color: var(--ink);
  font-size: calc(29px * var(--scale));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.clock-date {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: calc(13px * var(--scale));
}

body.language-screen {
  background: var(--paper);
}

body.language-screen header {
  border-bottom-color: var(--border);
  background: var(--card);
}

body.language-screen .header-bar {
  max-width: 66rem;
  min-height: 92px;
  padding: 20px 22px;
}

body.language-screen .brand {
  color: var(--ink);
  font-size: calc(20px * var(--scale));
}

body.language-screen .brand-lockup {
  --brand-size: 26px;
}

body.wide-screen .header-bar {
  max-width: none;
  padding-inline: clamp(20px, 2.4vw, 44px);
}

main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-wrap {
  width: 100%;
  max-width: var(--page-measure);
  margin: 0 auto;
  padding: 18px 18px 44px;
}

.page-wrap.wide {
  max-width: var(--cards-measure);
  padding: 18px 22px 52px;
}

.page-wrap.extra-wide {
  max-width: none;
  padding: 20px clamp(20px, 2.4vw, 44px) 56px;
}

.back-link {
  min-height: 48px;
  margin-bottom: 2px;
  padding: 12px 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: calc(16px * var(--scale));
}

h1 {
  font-size: calc(27px * var(--scale));
  font-weight: 700;
  line-height: 1.32;
}

.english-subtitle {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: calc(17px * var(--scale));
  line-height: 1.4;
}

.note {
  margin: 14px 0;
  color: var(--ink-3);
  font-size: calc(14px * var(--scale));
  line-height: 1.6;
}

.primary-button {
  width: 100%;
  min-height: var(--tap-size);
  padding: 14px 18px;
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--forest);
  color: #ffffff;
  font-size: calc(19px * var(--scale));
  font-weight: 700;
}

/* one big target under the phrase that just played, so being misheard is one
   tap to fix and nothing else. sized off --tap-size, so it grows with the
   text-size setting the way the rest of the app does. */
.repeat-button {
  width: 100%;
  min-height: var(--tap-size);
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--indigo-muted);
  color: var(--indigo);
  border: 3px solid var(--indigo);
  font-size: calc(19px * var(--scale));
  font-weight: 700;
  grid-column: 1 / -1;
}

.repeat-icon {
  font-size: calc(24px * var(--scale));
  line-height: 1;
}

.primary-button:active,
.feature-card:active,
.communication-card:active,
.repeat-button:active {
  transform: scale(0.99);
}

.page-heading {
  margin-bottom: 30px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--border-2);
}

.search-tools {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.voice-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.voice-search-button {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--indigo);
  color: #ffffff;
  box-shadow: 0 0 0 12px rgba(22, 38, 74, 0.05);
  transition: transform 0.13s, background 0.13s;
}

.voice-search-button:hover {
  transform: scale(1.04);
}

.voice-search.listening .voice-search-button {
  background: var(--crimson);
  box-shadow: 0 0 0 14px rgba(158, 34, 34, 0.13);
}

.voice-search-button svg {
  width: 37px;
  height: 37px;
}

.voice-search-label {
  color: var(--ink-3);
  font-size: calc(14.5px * var(--scale));
  font-weight: 700;
}

.search-field {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.search-field input {
  width: 100%;
  min-height: var(--tap-size);
  padding: 14px 16px;
  padding-inline-start: 50px;
  border: 1.5px solid var(--border-2);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: calc(17px * var(--scale));
}

.search-icon {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 19px;
  pointer-events: none;
}

.two-column-layout {
  display: grid;
  gap: 40px;
}

.section-title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
  font-size: calc(14.5px * var(--scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}

.communication-card {
  padding: 20px 18px 22px;
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  text-align: start;
  transition: border-color 0.13s, transform 0.1s;
}

.communication-card:hover {
  border-color: var(--indigo-2);
}

.card-top {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-style: normal;
}

.speaker-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--border-2);
  transition: color 0.13s;
}

.speaker-icon svg {
  width: 26px;
  height: 26px;
}

.communication-card.playing {
  border-color: var(--crimson);
  background: var(--crimson-muted);
}

.communication-card.playing .speaker-icon {
  color: var(--crimson);
}

.communication-card.playing .sound-wave-one {
  animation: sound-wave 0.9s ease-in-out infinite;
}

.communication-card.playing .sound-wave-two {
  animation: sound-wave 0.9s ease-in-out 0.18s infinite;
}

@keyframes sound-wave {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.card-kicker {
  margin-bottom: 6px;
  display: block;
  font-size: calc(11px * var(--scale));
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.card-native-text {
  display: block;
  font-size: calc(20px * var(--scale));
  font-weight: 700;
  line-height: 1.28;
}

.card-english-text {
  margin-top: 8px;
  display: block;
  color: var(--ink-3);
  font-size: calc(14px * var(--scale));
  line-height: 1.48;
}

.interpreter-card {
  max-width: 400px;
  padding: 16px 22px;
  border-radius: 16px;
  background: var(--indigo-muted);
}

.interpreter-card-label {
  color: var(--ink-3);
  font-size: calc(13px * var(--scale));
}

/* each interpreter number is a full tap-to-dial button, sized off --tap-size */
.interpreter-number {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap-size);
  margin: 8px 0;
  padding: 10px 16px;
  justify-content: center;
  border-radius: var(--button-radius);
  background: var(--card);
  border: 2px solid var(--indigo);
  color: var(--indigo);
}

.interpreter-number-line {
  font-size: calc(14px * var(--scale));
  font-weight: 700;
  color: var(--ink-3);
}

.interpreter-number strong {
  font-size: calc(26px * var(--scale));
  font-weight: 700;
  letter-spacing: 0.5px;
}

.interpreter-number:active {
  transform: scale(0.99);
}

.interpreter-card-note {
  color: var(--ink-2);
  font-size: calc(13.5px * var(--scale));
  line-height: 1.5;
}

.free-translation {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px dashed var(--border-2);
}

.free-translation-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.free-translation-row .search-field {
  width: auto;
  min-width: min(100%, 280px);
  flex: 1;
}

.free-translation-row .primary-button {
  width: auto;
  min-width: 190px;
}

.translation-result {
  max-width: 760px;
  margin-top: 20px;
  padding: 24px 26px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.translation-source {
  color: var(--saffron);
  font-size: calc(20px * var(--scale));
  font-weight: 700;
}

.translation-divider {
  height: 1px;
  margin: 16px 0;
  background: var(--border);
}

.translation-output {
  color: var(--ink-3);
  font-size: calc(26px * var(--scale));
  font-weight: 700;
  line-height: 1.3;
}

.translation-warning {
  max-width: 760px;
  margin-top: 18px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--saffron);
  color: var(--ink-3);
  font-size: calc(13.5px * var(--scale));
  line-height: 1.6;
}

.feature-cards {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}

.feature-card {
  padding: 34px 32px 38px;
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  text-align: start;
  transition: border-color 0.13s, transform 0.1s;
}

.feature-card:hover {
  border-color: var(--indigo-2);
}

.feature-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-style: normal;
}

.feature-kicker {
  margin-bottom: 10px;
  display: block;
  font-size: calc(13.5px * var(--scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feature-title {
  display: block;
  font-size: calc(29px * var(--scale));
  font-weight: 700;
  line-height: 1.28;
}

.feature-description {
  margin-top: 16px;
  display: block;
  color: var(--ink-2);
  font-size: calc(17.5px * var(--scale));
  line-height: 1.68;
}

.feature-english-description {
  margin-top: 14px;
  padding-top: 16px;
  display: block;
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-size: calc(15.5px * var(--scale));
  line-height: 1.62;
}

.language-hero {
  position: relative;
  flex: 1;
  padding: 52px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.language-hero::after {
  content: "";
  position: absolute;
  top: -20%;
  inset-inline-end: -14%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 43, 60, 0.07), transparent 68%);
  pointer-events: none;
}

.language-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  align-items: start;
  gap: 38px;
}

/* The hero used to be an italic serif wordmark in orange, which matched
 * nothing else in the app or the logo. It is now the same lockup as the
 * header, just larger, so the app has one wordmark instead of three. */
.hero-title {
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.language-prompts {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--ink-2);
  font-size: calc(15.5px * var(--scale));
  line-height: 1.7;
}

.language-prompts b {
  font-weight: 400;
}

.language-prompts b::after {
  content: "·";
  margin-inline-start: 14px;
  color: var(--ink-3);
}

.language-prompts b:last-child::after {
  content: "";
}

.language-options,
.emergency-actions {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  /* one column on a phone, and as many as fit on anything larger, so the
     buttons stay a comfortable size instead of stretching across a laptop */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.emergency-actions {
  margin-top: 12px;
}

.language-option,
.emergency-action {
  width: 100%;
  min-height: 92px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 15px;
  text-align: start;
}

.language-option {
  border: 1.5px solid var(--border);
  background: var(--card);
  transition: background 0.13s, border-color 0.13s;
}

.language-option:hover {
  border-color: var(--brand-navy);
  background: var(--card);
}

.language-initial {
  background: var(--indigo-muted);
  color: var(--brand-navy);
}

.language-initial,
.emergency-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-style: normal;
  font-weight: 700;
}

.language-native-name {
  display: block;
  font-size: calc(20px * var(--scale));
  font-weight: 700;
  line-height: 1.3;
}

.language-english-name,
.emergency-action-description {
  margin-top: 3px;
  display: block;
  color: var(--ink-3);
  font-size: calc(14px * var(--scale));
  line-height: 1.35;
}

.emergency-action {
  border: 1.5px solid;
}

.emergency-action-title {
  display: block;
  color: var(--ink);
  font-size: calc(19px * var(--scale));
  font-weight: 700;
  line-height: 1.3;
}

/* The one red thing on the screen. Solid rather than tinted, because on a
   light ground a wash of red reads as decoration and this is the button
   somebody presses when they cannot speak. */
.emergency-call {
  border-color: var(--brand-red);
  background: var(--brand-red);
}

.emergency-call .emergency-action-title,
.emergency-call .emergency-action-description {
  color: #ffffff;
}

.emergency-call .emergency-action-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Not an emergency action, so not red: finding a hospital is a decision, not
   a call for help. */
.hospital-map {
  border-color: var(--border-2);
  background: var(--card);
}

.hospital-map .emergency-action-icon {
  background: var(--indigo-muted);
  color: var(--brand-navy);
}

.profile-summary {
  justify-self: center;
  text-align: center;
}

.profile-circle {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 46px auto 66px;
  border: 2px solid #c8862a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(224, 152, 48, 0.18) 0%, rgba(255, 255, 255, 0.06) 55%, transparent 76%);
  box-shadow: inset 0 0 38px rgba(224, 152, 48, 0.12), 0 0 34px rgba(224, 152, 48, 0.08);
}

.profile-circle::before,
.profile-circle::after {
  content: "";
  position: absolute;
  border: 1px solid #c8862a;
  border-radius: 50%;
}

.profile-circle::before {
  inset: -24px;
  opacity: 0.34;
}

.profile-circle::after {
  inset: -50px;
  opacity: 0.15;
}

.profile-circle svg {
  width: 76px;
  height: 76px;
  color: rgba(255, 255, 255, 0.55);
  filter: drop-shadow(0 0 14px rgba(224, 152, 48, 0.28));
}

.home-profile-avatar {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 8px rgba(224, 152, 48, 0.1), 0 0 28px rgba(224, 152, 48, 0.24);
}

.profile-badge {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #233459;
  font-size: 18px;
}

.profile-badge.one { top: -34px; inset-inline-end: -10px; }
.profile-badge.two { bottom: -4px; inset-inline-start: -32px; }
.profile-badge.three { bottom: -4px; inset-inline-end: -32px; }

.account-access-section {
  margin: 18px 0 14px;
  padding: 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card);
}

.account-access-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.account-access-button {
  min-height: 54px;
  padding: 12px 18px;
  border: 1.5px solid var(--indigo);
  border-radius: var(--button-radius);
  display: grid;
  place-items: center;
  font-size: calc(16px * var(--scale));
  font-weight: 700;
}

.account-access-button.register {
  background: var(--card);
  color: var(--indigo);
}

.account-access-button.sign-in {
  background: var(--indigo);
  color: #ffffff;
}

.account-access-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.account-access-error {
  margin-top: 12px;
  color: var(--crimson);
  font-size: calc(13px * var(--scale));
  line-height: 1.45;
}

.registered-user-section {
  margin: 18px 0 14px;
  padding: 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card);
}

.registered-user-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.registered-user-badge {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--forest-muted);
  color: var(--forest);
  font-size: calc(12px * var(--scale));
  font-weight: 700;
}

.registered-user-card {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  background: var(--paper-2);
}

.registered-user-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
}

.registered-user-avatar {
  width: 100%;
  height: 100%;
  border: 3px solid var(--card);
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.registered-user-online-dot {
  position: absolute;
  inset-inline-end: 0;
  bottom: 2px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--forest);
}

.registered-user-identity h2 {
  font-size: calc(21px * var(--scale));
  line-height: 1.2;
}

.registered-user-status {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: calc(14px * var(--scale));
  line-height: 1.4;
}

.registered-user-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}

.registered-user-updated {
  min-width: 96px;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--border);
  text-align: end;
}

.registered-user-updated span,
.registered-user-updated strong {
  display: block;
}

.registered-user-updated span {
  color: var(--ink-3);
  font-size: calc(12px * var(--scale));
  line-height: 1.35;
}

.registered-user-updated strong {
  margin-top: 4px;
  font-size: calc(15px * var(--scale));
  line-height: 1.3;
}

.registered-user-message {
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: calc(14px * var(--scale));
  line-height: 1.5;
}

.settings-row {
  margin-bottom: 10px;
  padding: 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  display: block;
  background: var(--card);
}

.settings-label {
  font-size: calc(18px * var(--scale));
  font-weight: 700;
}

.settings-hint {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: calc(14px * var(--scale));
  line-height: 1.45;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.size-preview {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: var(--paper-2);
  font-size: calc(18px * var(--scale));
  line-height: 1.45;
}

input[type="range"] {
  min-width: 0;
  height: 44px;
  flex: 1;
  accent-color: var(--indigo);
}

.toggle {
  position: relative;
  width: 62px;
  height: 36px;
  border-radius: 100px;
  flex-shrink: 0;
  background: var(--border-2);
}

.toggle[aria-pressed="true"] {
  background: var(--forest);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s;
}

.toggle[aria-pressed="true"]::after {
  transform: translateX(26px);
}

.rate-options {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rate-option {
  min-height: 48px;
  padding: 8px;
  border: 1.5px solid var(--border-2);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 700;
}

.rate-option[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: #ffffff;
}

footer {
  padding: 18px;
  border-top: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink-3);
  font-size: calc(13px * var(--scale));
  line-height: 1.6;
  text-align: center;
}

body.language-screen footer {
  border-top-color: rgba(255, 255, 255, 0.13);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.5);
}

body.high-contrast .brand-mark,
body.high-contrast .card-icon,
body.high-contrast .feature-icon,
body.high-contrast .language-initial,
body.high-contrast .profile-circle,
body.high-contrast .profile-badge,
body.high-contrast .registered-user-avatar,
body.high-contrast .registered-user-card,
body.high-contrast .registered-user-badge,
body.high-contrast .account-access-button,
body.high-contrast .interpreter-card,
body.high-contrast .toggle,
body.high-contrast .size-preview {
  border: 1.5px solid #ffffff;
}

body.high-contrast .language-hero::after {
  display: none;
}

body.high-contrast .primary-button,
body.high-contrast .account-access-button.sign-in,
body.high-contrast .rate-option[aria-pressed="true"] {
  color: #000000;
}

@media (min-width: 560px) {
  .feature-cards,
  .language-options,
  .emergency-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .language-hero-content {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 60px;
  }
}

@media (min-width: 1100px) {
  .two-column-layout {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .two-column-layout > .column {
    padding-inline-end: clamp(26px, 3vw, 52px);
  }

  .two-column-layout > .column + .column {
    padding-inline-start: clamp(26px, 3vw, 52px);
    padding-inline-end: 0;
    border-inline-start: 1px dashed var(--border-2);
  }

  .two-column-layout > .full-width {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .registered-user-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
  }

  .registered-user-avatar-wrap {
    width: 68px;
    height: 68px;
  }

  .registered-user-updated {
    grid-column: 2;
    min-width: 0;
    padding: 10px 0 0;
    border-inline-start: 0;
    border-top: 1px solid var(--border);
    text-align: start;
  }

  .search-tools {
    width: 100%;
  }

  .search-field {
    width: auto;
    flex: 1;
  }

  .voice-search-button {
    width: 76px;
    height: 76px;
  }
}


/* ---------------------------------------------------------------------------
 * Welcome screen (#/)
 *
 * The first thing a new visitor sees. Adapted from the standalone landing
 * page, which carried its own palette (old gold and forest colours) and its
 * own serif wordmark. The copy is unchanged; the colours and the logo now come
 * from the shared tokens, so this screen cannot drift from the rest of the app.
 * ------------------------------------------------------------------------- */
/* Landing page layout only. Every colour comes from the shared tokens. */
    .landing-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 0;
    }

    .landing-open {
      padding: 12px 20px;
      border-radius: 11px;
      background: var(--brand-navy);
      color: #ffffff;
      font-weight: 700;
      font-size: calc(15px * var(--scale));
    }

    .landing-hero { padding: 22px 0 8px; }

    .eyebrow {
      display: inline-block;
      padding: 7px 13px;
      border-radius: 999px;
      background: var(--crimson-muted);
      color: var(--brand-red);
      font-size: calc(12px * var(--scale));
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .landing h1 {
      margin: 18px 0 0;
      color: var(--brand-navy);
      font-size: clamp(2.6rem, 7vw, 4rem);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    .landing h1 span { color: var(--brand-red); }

    .landing-lede {
      margin: 16px 0 0;
      max-width: 34ch;
      color: var(--ink-2);
      font-size: calc(19px * var(--scale));
      line-height: 1.45;
    }

    /* The red button is the emergency colour, so it is used once, on the action
       the whole page is asking for. */
    .landing-cta {
      min-height: var(--tap-size);
      margin-top: 26px;
      padding: 16px 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 13px;
      background: var(--brand-red);
      color: #ffffff;
      font-size: calc(18px * var(--scale));
      font-weight: 700;
    }

    /* A phone showing the app, so a visitor sees what they are opening. */
    .phone-frame {
      width: 250px;
      margin: 34px auto 0;
      padding: 13px;
      border-radius: 30px;
      background: var(--brand-navy);
      box-shadow: 0 24px 50px -18px rgba(22, 38, 74, 0.5);
    }

    .phone-screen {
      border-radius: 20px;
      overflow: hidden;
      background: var(--paper);
    }

    .phone-header {
      padding: 13px 15px;
      background: var(--card);
      border-bottom: 1px solid var(--border);
    }

    .phone-body {
      padding: 13px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .phone-card {
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--card);
    }

    .phone-card .tag {
      color: var(--brand-red);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .phone-card .native {
      margin: 5px 0 2px;
      font-size: 19px;
      font-weight: 700;
    }

    .phone-card .english { margin: 0; color: var(--ink-3); font-size: 13px; }

    .phone-play {
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 11px;
      background: var(--brand-navy);
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
    }

    .numbers {
      margin-top: 40px;
      padding: 26px 16px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      border-radius: 16px;
      background: var(--brand-navy);
      text-align: center;
    }

    .numbers b {
      display: block;
      color: #ffffff;
      font-size: calc(38px * var(--scale));
      line-height: 1;
    }

    .numbers span {
      display: block;
      margin-top: 6px;
      color: rgba(255, 255, 255, 0.8);
      font-size: calc(12px * var(--scale));
    }

    .landing h2 {
      margin: 0 0 26px;
      color: var(--brand-navy);
      font-size: clamp(1.8rem, 4vw, 2.2rem);
      font-weight: 700;
      letter-spacing: -0.015em;
      text-align: center;
    }

    .steps {
      margin-top: 50px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .step {
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 16px;
      border: 1.5px solid var(--border);
      border-radius: 15px;
      background: var(--card);
    }

    .step-icon {
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: var(--indigo-muted);
      color: var(--brand-navy);
    }

    .step h3 { margin: 0 0 2px; font-size: calc(18px * var(--scale)); }
    .step p { margin: 0; color: var(--ink-3); font-size: calc(14px * var(--scale)); line-height: 1.4; }

    .closing {
      margin-top: 54px;
      padding: 38px 24px;
      border-radius: 18px;
      background: var(--paper-2);
      text-align: center;
    }

    .closing h2 { margin: 0; }

    .landing-footer {
      margin-top: 36px;
      padding-top: 22px;
      border-top: 1px solid var(--border);
      text-align: center;
    }

    .landing-footer p { margin: 10px 0 0; color: var(--ink-3); font-size: calc(13px * var(--scale)); }

    @media (min-width: 760px) {
      .hero-grid {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 48px;
        align-items: center;
      }
      .phone-frame { margin-top: 0; }
      .steps { grid-template-columns: repeat(3, 1fr); }
      .step { flex-direction: column; align-items: flex-start; }
    }

/* The welcome screen renders outside page-wrap, so it carries its own width
   and gutters - the same measure the card pages use. */
.landing {
  width: 100%;
  max-width: var(--cards-measure);
  margin: 0 auto;
  padding: 8px 22px 56px;
}

/* Was an inline style attribute on the landing page. */
.closing-note {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: calc(13px * var(--scale));
}

/* The welcome screen carries the app header already, so the wordmark is not
   repeated in its footer - only the disclaimer that belongs there. */
.landing-footer p {
  margin: 0;
}

/* --- hospitals: the distance the Python service worked out, and the prompt
   that asks for a position in the first place -------------------------------- */

/* sits opposite the public/private label in .card-top, so the eye runs down one
   column of distances rather than hunting for them inside each card.
   --indigo-muted rather than a literal tint, so body.high-contrast still swaps
   it to black behind white text. */
.card-distance {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--indigo-muted);
  color: var(--indigo);
  font-size: calc(13px * var(--scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hospitals-location-prompt {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  color: var(--ink-2);
  font-size: calc(16px * var(--scale));
}

/* a real offer, not a warning: the list is usable without it, so this stays
   quieter than .primary-button and never turns red. */
.secondary-button {
  flex: none;
  min-height: var(--tap-size);
  padding: 10px 20px;
  border: 2px solid var(--indigo);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--indigo);
  font-size: calc(16px * var(--scale));
  font-weight: 700;
}

.secondary-button:hover {
  background: var(--indigo-muted);
}