/* SOSpeak - picture-board design system
 *
 * One stylesheet for every screen. It replaces the navy-and-red paper theme
 * and the picture-tile layer that had been appended on top of it.
 *
 * Colour has one job per family, same rule as before, new values:
 *
 *   red     emergency and only emergency. The Call 000 tile.
 *   peach   danger phrases - the urgent symptoms.
 *   mint    every other phrase about the body.
 *   white   everything neutral: rights phrases, places, settings, buttons.
 *   lime    the one action that moves things on: Play, Continue, Next.
 *   forest  "this one is chosen". Selected language, current section.
 *
 * No web fonts. The app is offline-first and read in five scripts, so the
 * system stack is the right one: SF / Helvetica for Latin and Vietnamese,
 * PingFang / Noto for Chinese. Weight does the work instead of a typeface.
 */

:root {
  color-scheme: light;

  --bg: #e9eae5;
  --surface: #ffffff;
  --surface-2: #f4f5f1;
  --ink: #111311;
  --ink-2: #3f433d;
  --ink-3: #6b7068;
  --line: #d6d8d1;

  --red: #c9403e;
  --red-press: #b53634;
  --icon-red: #b3261e;
  --peach: #f7c29a;
  --mint: #e2f4da;
  --lime: #a8e26b;
  --lime-press: #96d457;
  --forest: #1f3a15;
  --on-forest: #a8e26b;
  --tile-ink: #111311;
  --tile-ink-2: #3a2c22;
  --dot-peach: #f2a36b;
  --dot-green: #8ed86a;

  /* aliases the body chart and older markup still read */
  --brand-red: var(--red);
  --crimson: var(--red);
  --indigo: var(--forest);

  --radius-pill: 999px;
  --radius-sm: 16px;
  --radius-button: 22px;
  --radius-tile: 24px;
  --radius-hero: 28px;
  --shadow-float: 0 12px 32px -14px rgba(17, 19, 17, 0.35);

  --tap-size: 68px;
  --scale: 1;
  --board-measure: 36rem;
  --page-measure: 44rem;
  --cards-measure: 72rem;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial,
    "PingFang SC", "PingFang HK", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans TC",
    "Microsoft YaHei", sans-serif;
}

/* Dark: the page and neutral surfaces go dark; peach and lime stay bright with
 * dark ink on them, because they are the colours that carry meaning and they
 * read even better against a dark ground. Mint deepens so light text works. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121411;
    --surface: #1e211c;
    --surface-2: #262a24;
    --ink: #f1f2ee;
    --ink-2: #c9ccc4;
    --ink-3: #9a9e96;
    --line: #33372f;
    --mint: #28381f;
    --forest: #a8e26b;
    --on-forest: #142a0c;
    --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121411;
  --surface: #1e211c;
  --surface-2: #262a24;
  --ink: #f1f2ee;
  --ink-2: #c9ccc4;
  --ink-3: #9a9e96;
  --line: #33372f;
  --mint: #28381f;
  --forest: #a8e26b;
  --on-forest: #142a0c;
  --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
}

/* High contrast (Settings): white on black, every surface outlined, the
 * coloured tiles kept but given black ink and a hard white edge. */
body.high-contrast {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #000000;
  --ink: #ffffff;
  --ink-2: #ffffff;
  --ink-3: #e6e6e6;
  --line: #ffffff;
  --mint: #d8f5c8;
  --forest: #ffffff;
  --on-forest: #000000;
  --shadow-float: none;
}

/* ------------------------------------------------------------------------ */
/* base                                                                      */
/* ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(1rem * var(--scale));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.has-section-bar {
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.icon {
  flex-shrink: 0;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
}

body.high-contrast :focus-visible {
  outline-color: #ffff00;
}

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

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 50;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--forest);
  color: var(--on-forest);
  font-weight: 800;
}

.skip-link:focus {
  top: 12px;
}

/* ------------------------------------------------------------------------ */
/* header                                                                    */
/* ------------------------------------------------------------------------ */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--cards-measure);
  min-height: 56px;
  margin: 0 auto;
}

.brand {
  font-size: calc(1.6rem * var(--scale));
  font-weight: 800;
  letter-spacing: -0.02em;
}

.back-button,
.settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.language-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: calc(1.1rem * var(--scale));
  font-weight: 700;
}

body.high-contrast .back-button,
body.high-contrast .settings-link,
body.high-contrast .language-chip {
  border: 2px solid var(--line);
}

body.language-screen .brand,
body.show-screen .app-header,
body.welcome-screen .app-header {
  display: none;
}

/* ------------------------------------------------------------------------ */
/* page frame                                                                */
/* ------------------------------------------------------------------------ */

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

.page-wrap.board {
  max-width: var(--board-measure);
}

.page-wrap.wide {
  max-width: var(--page-measure);
}

.page-wrap.extra-wide {
  max-width: var(--cards-measure);
}

.page-wrap > * + * {
  margin-top: 14px;
}

.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.page-wrap h1,
.home-heading h1 {
  font-size: calc(2.1rem * var(--scale));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.english-subtitle {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: calc(1rem * var(--scale));
  font-weight: 700;
}

.english-interface .english-subtitle {
  display: none;
}

.page-hint,
.body-chart-hint {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: calc(1.1rem * var(--scale));
  font-weight: 600;
}

.body-chart-hint-small {
  color: var(--ink-3);
  font-size: calc(0.98rem * var(--scale));
}

.section-title {
  margin: 22px 0 12px;
  font-size: calc(1.2rem * var(--scale));
  font-weight: 800;
}

.note {
  color: var(--ink-2);
  font-size: calc(1rem * var(--scale));
  font-weight: 600;
}

/* voice search / concern-review, ported from the voice-review feature. The
   search field and its icon, the primary button and .back-link already exist
   above with the picture-board treatment, so only the pieces unique to this
   flow are added here. */
.search-tools {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.concern-review {
  display: grid;
  gap: 10px;
  width: 320px;
  max-width: 100%;
}

.concern-review label {
  font-weight: 700;
}

.concern-review input {
  width: 100%;
  min-height: var(--tap-size);
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: calc(1.1rem * var(--scale));
  font-weight: 600;
}

.concern-review input:focus {
  border-color: var(--forest);
  outline: none;
}

.concern-review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.concern-review-actions .primary-button {
  width: auto;
}

.search-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

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

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

.voice-search-button {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--tile-ink);
  box-shadow: 0 0 0 10px var(--surface-2);
  transition: transform 0.13s, background 0.13s;
}

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

.voice-search.listening .voice-search-button {
  background: var(--forest);
  color: var(--on-forest);
  box-shadow: 0 0 0 12px var(--mint);
}

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

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

.two-column-layout,
.single-column-layout {
  display: grid;
  gap: 8px 28px;
}

@media (min-width: 1000px) {
  .two-column-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.suggestion-action {
  margin-top: 16px;
  display: inline-block;
  color: var(--forest);
  font-weight: 700;
}

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

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

#pageFooter {
  max-width: var(--page-measure);
  margin: 0 auto;
  padding: 8px 24px 20px;
  color: var(--ink-3);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------------------------------ */
/* buttons                                                                   */
/* ------------------------------------------------------------------------ */

.lime-button,
.primary-button,
.white-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--tap-size);
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-button);
  font-size: calc(1.3rem * var(--scale));
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transition: transform 120ms ease, background-color 120ms ease;
}

.lime-button,
.primary-button {
  background: var(--lime);
  color: var(--tile-ink);
}

.lime-button:active,
.primary-button:active {
  background: var(--lime-press);
  transform: scale(0.985);
}

.white-button,
.secondary-button {
  background: var(--surface);
  color: var(--ink);
}

.white-button:active,
.secondary-button:active {
  background: var(--surface-2);
  transform: scale(0.985);
}

.secondary-button {
  min-height: 56px;
  font-size: calc(1.05rem * var(--scale));
}

body.high-contrast .lime-button,
body.high-contrast .primary-button {
  border: 3px solid #ffffff;
  background: #ffffff;
  color: #000000;
}

body.high-contrast .white-button,
body.high-contrast .secondary-button {
  border: 2px solid var(--line);
}

.lime-button:disabled,
.primary-button.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.action-row {
  justify-content: flex-start;
  width: 100%;
  padding: 0 22px;
}

.action-row .speaker-icon svg,
.action-row .icon {
  width: 30px;
  height: 30px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  color: var(--ink-2);
  font-size: calc(1.05rem * var(--scale));
  font-weight: 700;
}

.back-link,
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: calc(1rem * var(--scale));
  font-weight: 700;
}

/* ------------------------------------------------------------------------ */
/* the red Call 000 tile                                                     */
/* ------------------------------------------------------------------------ */

.call-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 16px 20px 16px 16px;
  border-radius: var(--radius-tile);
  background: var(--red);
  color: #ffffff;
}

.call-tile:active {
  background: var(--red-press);
}

.call-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--red);
  flex-shrink: 0;
}

.call-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.call-tile-title {
  font-size: calc(1.95rem * var(--scale));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.call-tile-note {
  font-size: calc(1rem * var(--scale));
  font-weight: 700;
  opacity: 0.95;
}

body.high-contrast .call-tile {
  border: 3px solid #ffffff;
  background: #c00000;
}

/* ------------------------------------------------------------------------ */
/* picture tiles                                                             */
/* ------------------------------------------------------------------------ */

.tile-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-wrap.extra-wide .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
}

@media (min-width: 700px) {
  .page-wrap.extra-wide .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.phrase-tile,
.communication-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 176px;
  padding: 16px 16px 18px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: transform 120ms ease;
}

.phrase-tile:active,
.communication-card:active {
  transform: scale(0.98);
}

.tone-peach {
  background: var(--peach);
  color: var(--tile-ink);
}

/* fixed light mint with dark ink, like peach: it no longer turns dark green
   in dark mode, so body tiles stay as bright as the urgent ones */
.tone-mint {
  background: #e2f4da;
  color: var(--tile-ink);
}

.tone-white {
  background: var(--surface);
  color: var(--ink);
}

body.high-contrast .phrase-tile,
body.high-contrast .communication-card {
  border: 3px solid #ffffff;
}

body.high-contrast .tone-peach,
body.high-contrast .tone-mint {
  color: #000000;
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--icon-red);
}


/* phrase cards on white (the Phrases page) use the same peach disc and red
   icon as the home buttons, fixed so they match in light and dark */
.tone-white .tile-icon {
  background: var(--peach);
  color: var(--icon-red);
}

.tile-native {
  font-size: calc(1.65rem * var(--scale));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.tile-english {
  color: inherit;
  opacity: 0.78;
  font-size: calc(0.95rem * var(--scale));
  font-weight: 700;
  line-height: 1.25;
}

.english-interface .tile-english,
.english-interface .card-english-text[lang="en"] {
  display: none;
}

/* playing and chosen, on the symptom cards that speak in place */
.tile-speaker {
  position: absolute;
  top: 14px;
  right: 14px;
  color: inherit;
  opacity: 0.7;
}

.speaker-icon {
  display: inline-flex;
}

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

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

.playing .sound-wave-two {
  animation-delay: 0.2s;
}

@keyframes sound-wave {
  50% {
    opacity: 0.2;
  }
}

.phrase-tile.playing,
.lime-button.playing,
.white-button.playing {
  box-shadow: inset 0 0 0 3px var(--forest);
}

.tile-chosen-mark {
  display: none;
}

.communication-card.is-chosen {
  box-shadow: inset 0 0 0 4px var(--forest);
}

.communication-card.is-chosen .tile-speaker {
  display: none;
}

.communication-card.is-chosen .tile-chosen-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-forest);
}

/* what appears under a card that has just been played */
.repeat-button,
.show-from-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap-size);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--ink);
  font-size: calc(1.2rem * var(--scale));
  font-weight: 800;
}

.repeat-button {
  background: var(--lime);
  color: var(--tile-ink);
}

/* hospital and aged-care cards reuse the card shell */
.card-top,
.card-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.card-kicker {
  color: var(--ink-3);
  font-size: calc(0.85rem * var(--scale));
  font-weight: 800;
  letter-spacing: 0.02em;
}

.card-distance {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--ink);
  font-size: calc(0.9rem * var(--scale));
  font-weight: 800;
  white-space: nowrap;
}

.card-native-text {
  font-size: calc(1.2rem * var(--scale));
  font-weight: 800;
  line-height: 1.2;
}

.card-english-text {
  color: var(--ink-2);
  font-size: calc(0.95rem * var(--scale));
  font-weight: 600;
}

.page-wrap.extra-wide .communication-card:not(.phrase-tile) {
  min-height: 132px;
  justify-content: space-between;
}

.wait-line {
  font-size: calc(0.95rem * var(--scale));
  font-weight: 700;
}

.wait-line-measured {
  color: var(--ink);
}

.wait-line-estimate,
.wait-line-none {
  color: var(--ink-3);
}

.language-need-badge {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--mint);
  font-size: calc(0.85rem * var(--scale));
  font-weight: 700;
}

/* ------------------------------------------------------------------------ */
/* home board                                                                */
/* ------------------------------------------------------------------------ */

.page-wrap h1.home-question {
  margin-top: 22px;
  font-size: calc(1.7rem * var(--scale));
}

.home-actions {
  display: grid;
  gap: 12px;
}

.home-action {
  min-height: 88px;
  padding: 14px 18px;
  gap: 14px;
  text-align: start;
}

.home-action-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* all three doors share the peach disc and red icon; fixed colours so they
     stay the same in light and dark */
  background: var(--peach);
  color: var(--icon-red);
}

.home-action-icon.home-action-icon-peach {
  background: var(--peach);
  color: var(--icon-red);
}

.home-action-icon svg {
  width: 28px;
  height: 28px;
}

.home-action-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.home-action-title {
  font-size: calc(1.15rem * var(--scale));
  font-weight: 800;
}

.home-action-note {
  color: var(--ink-2);
  font-size: calc(0.9rem * var(--scale));
  font-weight: 600;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: calc(1.05rem * var(--scale));
  font-weight: 800;
}

body.high-contrast .filter-chip {
  border: 2px solid var(--line);
}

.chip-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.chip-dot-peach {
  background: var(--dot-peach);
}

.chip-dot-green {
  background: var(--dot-green);
}

.chip-dot-hollow {
  border: 2px solid var(--ink-3);
}

/* ------------------------------------------------------------------------ */
/* phrase screen                                                             */
/* ------------------------------------------------------------------------ */

.phrase-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 18px 18px;
  border-radius: var(--radius-hero);
  text-align: center;
}

.phrase-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--icon-red);
}

.phrase-hero.tone-white .phrase-hero-icon {
  background: var(--peach);
}

.phrase-hero-native {
  font-size: calc(2.5rem * var(--scale));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.page-wrap h1.phrase-hero-native {
  font-size: calc(2.5rem * var(--scale));
}

.phrase-hero-english {
  width: 100%;
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: #ffffff;
  color: #111311;
}

.phrase-hero.tone-white .phrase-hero-english {
  background: var(--surface-2);
  color: var(--ink);
}

.phrase-hero-english-label {
  display: block;
  color: #555a52;
  font-size: calc(0.95rem * var(--scale));
  font-weight: 700;
}

.phrase-hero.tone-white .phrase-hero-english-label {
  color: var(--ink-3);
}

.phrase-hero-english-text {
  margin-top: 2px;
  font-size: calc(1.45rem * var(--scale));
  font-weight: 700;
  line-height: 1.25;
}

body.high-contrast .phrase-hero {
  border: 3px solid #ffffff;
  color: #000000;
}

.phrase-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------------------ */
/* show mode                                                                 */
/* ------------------------------------------------------------------------ */

body.show-screen {
  background: #ffffff;
  color: #111311;
}

.show-screen-body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  color: #111311;
}

.show-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(24px + env(safe-area-inset-top)) 22px 24px;
  border-bottom: 4px solid #111311;
  text-align: center;
}

.show-half-english {
  padding-top: 24px;
}

.show-label {
  font-size: calc(1.1rem * var(--scale));
  font-weight: 700;
}

.show-icon {
  color: #111311;
}

.show-native,
.show-english {
  font-size: clamp(2.6rem, 13vw, 5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.show-english-only .show-english {
  font-size: clamp(3rem, 15vw, 6rem);
}

.show-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: calc(1.6rem * var(--scale));
  font-weight: 800;
}

/* ------------------------------------------------------------------------ */
/* language screen                                                           */
/* ------------------------------------------------------------------------ */

.language-screen-body {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 76px);
  max-width: var(--board-measure);
  margin: 0 auto;
  padding: 18px 18px 0;
}

body.language-screen .app-header:has(.back-button[hidden]) {
  display: none;
}

body.language-screen .app-header:has(.back-button[hidden]) + main .language-screen-body {
  min-height: 100dvh;
  padding-top: calc(40px + env(safe-area-inset-top));
}

.language-heading {
  font-size: calc(2.7rem * var(--scale));
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.language-subheading {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: calc(1.15rem * var(--scale));
  font-weight: 700;
  line-height: 1.45;
}

.language-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.language-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 136px;
  padding: 16px 18px 18px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: transform 120ms ease, background-color 150ms ease;
}

.language-tile:active {
  transform: scale(0.98);
}

.language-tile-wide {
  grid-column: 1 / -1;
  min-height: 96px;
}

.language-tile-native {
  font-size: calc(2rem * var(--scale));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.language-tile-english {
  color: var(--ink-2);
  font-size: calc(1rem * var(--scale));
  font-weight: 700;
}

.language-tile.is-picked {
  background: var(--forest);
  color: var(--on-forest);
}

.language-tile.is-picked .language-tile-english {
  color: var(--on-forest);
  opacity: 0.85;
}

body.high-contrast .language-tile {
  border: 3px solid #ffffff;
}

.language-continue-bar {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 24px 0 calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}

.language-continue-bar .lime-button {
  width: 100%;
  font-size: calc(1.5rem * var(--scale));
}

/* ------------------------------------------------------------------------ */
/* bottom section bar                                                        */
/* ------------------------------------------------------------------------ */

.section-nav {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  gap: 4px;
  width: min(calc(100% - 24px), 520px);
  padding: 6px;
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}

body.high-contrast .section-nav {
  border: 2px solid var(--line);
}

.section-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 6px 4px;
  border-radius: 24px;
  color: var(--ink-2);
  text-align: center;
}

.section-nav-label {
  font-size: calc(0.8rem * var(--scale));
  font-weight: 700;
  line-height: 1.1;
}

.section-nav-item-active {
  background: var(--forest);
  color: var(--on-forest);
}

.section-nav-item-active .section-nav-label {
  font-weight: 800;
}

/* ------------------------------------------------------------------------ */
/* scroll hint                                                               */
/* ------------------------------------------------------------------------ */

/* right-aligned and small, so it points at more without sitting on a tile */
.scroll-hint {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--forest);
  color: var(--on-forest);
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: var(--shadow-float);
}

body:not(.has-section-bar) .scroll-hint {
  bottom: calc(18px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------------ */
/* symptoms, rights, next step                                               */
/* ------------------------------------------------------------------------ */

.next-step-bar {
  position: sticky;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 15;
  padding-top: 8px;
}

.next-step-bar .primary-button {
  width: 100%;
  box-shadow: var(--shadow-float);
}

.interpreter-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 26rem;
  padding: 18px 20px;
  border-radius: var(--radius-tile);
  background: var(--forest);
  color: var(--on-forest);
}

.interpreter-card-label,
.interpreter-card-note {
  font-size: calc(0.95rem * var(--scale));
  font-weight: 700;
}

.interpreter-number {
  font-size: calc(2.4rem * var(--scale));
  font-weight: 900;
  letter-spacing: 0.01em;
}

.free-translation {
  margin-top: 28px;
  padding: 18px;
  border-radius: var(--radius-tile);
  background: var(--surface);
}

.free-translation-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.free-translation-row .search-field {
  flex: 1 1 260px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  color: var(--ink-3);
}

.search-field input {
  width: 100%;
  min-height: 60px;
  padding: 0 18px 0 44px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: calc(1.1rem * var(--scale));
  font-weight: 600;
}

.search-field input:focus {
  border-color: var(--forest);
  outline: none;
}

.translation-result {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.translation-source {
  font-size: calc(1.2rem * var(--scale));
  font-weight: 800;
}

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

.translation-output {
  font-size: calc(1.1rem * var(--scale));
  font-weight: 600;
}

.translation-warning {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: calc(0.9rem * var(--scale));
  font-weight: 600;
}

.hospitals-location-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-tile);
  background: var(--surface);
  font-size: calc(1.05rem * var(--scale));
  font-weight: 700;
}

.hospitals-location-prompt .secondary-button {
  background: var(--lime);
  color: var(--tile-ink);
}

/* ------------------------------------------------------------------------ */
/* settings                                                                  */
/* ------------------------------------------------------------------------ */

.settings-row {
  display: block;
  padding: 18px;
  border-radius: var(--radius-tile);
  background: var(--surface);
}

body.high-contrast .settings-row {
  border: 2px solid var(--line);
}

.settings-label {
  font-size: calc(1.15rem * var(--scale));
  font-weight: 800;
}

.settings-hint {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: calc(0.95rem * var(--scale));
  font-weight: 600;
}

.settings-row input[type="range"] {
  flex: 1;
  accent-color: var(--forest);
  min-height: 44px;
}

.size-preview {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--mint);
  font-size: calc(1.15rem * var(--scale));
  font-weight: 700;
}

.toggle {
  position: relative;
  flex-shrink: 0;
  width: 76px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 150ms ease;
}

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

.toggle[aria-pressed="true"]::after {
  transform: translateX(32px);
  background: var(--on-forest);
}

.rate-options,
.detail-option-row,
.body-chart-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rate-option,
.detail-option,
.body-chart-figure-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-size);
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--surface-2);
  color: var(--ink);
  font-size: calc(1.1rem * var(--scale));
  font-weight: 800;
  text-align: center;
}

.detail-option,
.body-chart-figure-option {
  background: var(--surface);
}

body.high-contrast .rate-option,
body.high-contrast .detail-option,
body.high-contrast .body-chart-figure-option {
  border: 2px solid var(--line);
}

.rate-option[aria-pressed="true"],
.detail-option.is-chosen,
.body-chart-figure-option.is-chosen {
  background: var(--forest);
  color: var(--on-forest);
}

.detail-option-english {
  opacity: 0.75;
  font-size: calc(0.85rem * var(--scale));
  font-weight: 700;
}

.detail-section {
  margin-top: 22px;
}

/* ------------------------------------------------------------------------ */
/* body chart (US 6.1)                                                       */
/*                                                                           */
/* The drawing is public-domain artwork (frontend/assets/body/PROVENANCE.md);  */
/* the sizing rules below decide how big a tappable area ends up, and        */
/* project-tests/body-chart-tests.js measures them. Change with care.        */
/* ------------------------------------------------------------------------ */

.body-chart-figures {
  max-width: 22rem;
  margin: 16px 0 18px;
}

.body-chart-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.body-chart-figure {
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 400px;
  padding: 14px 6px;
  border-radius: var(--radius-hero);
  background: #ffffff;
}

.body-chart-side {
  flex: 1 1 300px;
  min-width: 260px;
}

.body-chart {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  max-height: 70vh;
  min-height: 320px;
}

/* multiply keeps the line work visible through the colour, and the blend sits
   on the group so two chosen areas that meet do not compound */
.body-chart-tints {
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.body-chart-tint {
  fill: var(--lime);
  opacity: 0;
}

.body-chart-tint.is-chosen {
  opacity: 1;
}

.body-chart-target {
  fill: transparent;
  cursor: pointer;
}

/* in screen pixels, not viewBox units */
.body-chart-target:focus-visible {
  outline: none;
  fill: rgba(31, 58, 21, 0.16);
  stroke: #1f3a15;
  stroke-width: 3;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}

.body-chart-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.body-chart-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 92px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--mint);
  color: var(--ink);
  text-align: left;
}

.body-chart-tile.is-chosen {
  background: var(--forest);
  color: var(--on-forest);
}

body.high-contrast .body-chart-tile {
  border: 3px solid #ffffff;
  color: #000000;
}

.body-chart-tile-native {
  font-size: calc(1.2rem * var(--scale));
  font-weight: 800;
  line-height: 1.2;
}

.body-chart-tile-english {
  opacity: 0.78;
  font-size: calc(0.9rem * var(--scale));
  font-weight: 700;
}

.english-interface .body-chart-tile-english,
.english-interface .body-chart-choice-english {
  display: none;
}

.body-chart-choices {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.body-chart-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap-size);
  padding: 8px 8px 8px 18px;
  border-radius: var(--radius-button);
  background: var(--surface);
}

.body-chart-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.body-chart-choice-native {
  font-size: calc(1.1rem * var(--scale));
  font-weight: 800;
}

.body-chart-choice-english {
  color: var(--ink-3);
  font-size: calc(0.9rem * var(--scale));
  font-weight: 700;
}

/* AC 6.1.2 - a full-size target for taking one area off */
.body-chart-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: calc(1.2rem * var(--scale));
  font-weight: 800;
  line-height: 1;
}

.body-chart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.body-chart-actions .primary-button {
  flex: 1 1 240px;
}

@media (max-width: 640px) {
  .body-chart-layout {
    gap: 18px;
  }

  .body-chart-figure,
  .body-chart-side {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ------------------------------------------------------------------------ */
/* summary (AC 6.3.1 / 6.3.2)                                                */
/* ------------------------------------------------------------------------ */

.summary-card {
  margin-top: 16px;
  padding: 6px 18px;
  border-radius: var(--radius-hero);
  background: var(--surface);
}

body.high-contrast .summary-card {
  border: 2px solid var(--line);
}

.summary-line {
  padding: 14px 0;
}

.summary-line + .summary-line {
  border-top: 1px solid var(--line);
}

.summary-label {
  color: var(--ink-3);
  font-size: calc(0.85rem * var(--scale));
  font-weight: 800;
}

.summary-line-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.summary-line-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-line .card-native-text {
  font-size: calc(1.35rem * var(--scale));
}

.summary-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-size);
  height: var(--tap-size);
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--tile-ink);
}

.summary-play.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------------ */
/* welcome                                                                   */
/* ------------------------------------------------------------------------ */

.landing {
  min-height: 100dvh;
}

.landing-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--board-measure);
  margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}

.landing-wordmark {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-hero h1 {
  margin-top: 6px;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.landing-lede {
  max-width: 30rem;
  color: var(--ink-2);
  font-size: 1.15rem;
  font-weight: 600;
}

.landing-preview .phrase-hero {
  padding: 20px 16px 16px;
}

.landing-preview .phrase-hero-icon {
  width: 84px;
  height: 84px;
}

.landing-preview .phrase-hero-native {
  font-size: 2.2rem;
}

.landing-preview .phrase-hero-english-text {
  font-size: 1.25rem;
}

.landing-cta {
  width: 100%;
  font-size: 1.45rem;
}

.landing-footer {
  color: var(--ink-3);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

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

/* ------------------------------------------------------------------------ */
/* body-first flow: tell us what's wrong, and did you mean                   */
/* ------------------------------------------------------------------------ */

.tell-card {
  padding: 20px 18px;
  border-radius: var(--radius-hero);
  background: var(--surface);
}

body.high-contrast .tell-card,
body.high-contrast .match-said {
  border: 2px solid var(--line);
}

.page-wrap .tell-heading {
  font-size: calc(1.35rem * var(--scale));
  font-weight: 800;
  line-height: 1.15;
}

.tell-card .note {
  margin-top: 4px;
}

.tell-card .search-tools {
  margin-top: 16px;
  justify-content: flex-start;
}

.tell-card .search-entry,
.tell-card .concern-review {
  flex: 1 1 260px;
  width: auto;
}

.tell-card .search-entry .search-field {
  flex: 1 1 220px;
  width: auto;
}

.tell-card .concern-review {
  margin-top: 16px;
}

.tell-card .body-chart-figures {
  margin-top: 14px;
}

.tell-card .body-chart-figure {
  background: var(--surface-2);
}

.tell-or {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
  font-size: calc(1rem * var(--scale));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tell-or::before,
.tell-or::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}

.match-said {
  padding: 16px 18px 8px;
  border-radius: var(--radius-tile);
  background: var(--surface);
}

.match-said-label {
  color: var(--ink-3);
  font-size: calc(0.9rem * var(--scale));
  font-weight: 700;
}

.match-said-text {
  margin-top: 2px;
  font-size: calc(1.3rem * var(--scale));
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.match-said .text-button {
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}

.match-label {
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.75);
  color: var(--tile-ink);
  font-size: calc(0.85rem * var(--scale));
  font-weight: 800;
}

.match-label.is-best {
  background: var(--forest);
  color: var(--on-forest);
}

.match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.summary-play-all {
  margin-top: 14px;
}

.summary-edit .section-title:first-child {
  margin-top: 6px;
}

/* saved details under the English in show mode: the screen stays white in
   every theme, so the panel carries its own colours */

/* a phrase Gemini wrote: dashed edge and its own label, never mistaken for a
   checked card */
.written-tile {
  border: 3px dashed var(--line);
}

.match-label.is-written {
  background: var(--surface-2);
  color: var(--ink);
}

.written-section .note {
  margin-top: 8px;
}

.written-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: calc(0.95rem * var(--scale));
  font-weight: 700;
}

.voice-search-message {
  max-width: 14rem;
  color: var(--ink-2);
  font-size: calc(0.9rem * var(--scale));
  font-weight: 700;
  text-align: center;
}

.voice-search-message:empty {
  display: none;
}

.voice-search.busy .voice-search-button {
  background: var(--surface-2);
  color: var(--ink);
}

/* one written phrase at a time, so it takes the full width, and the label
   keeps clear of the speaker in the corner */
.written-section .card-grid,
.page-wrap.extra-wide .written-section .card-grid {
  grid-template-columns: 1fr;
}

.match-tile .match-label {
  max-width: calc(100% - 44px);
}