/* v18.7 semantic typography and control sizing.
   The visual scale is increased through readable type and touch targets,
   without CSS zoom that would reduce the usable phone viewport. */
:root {
  --type-caption: 13px;
  --type-meta: 14px;
  --type-body-small: 15px;
  --type-body: 17px;
  --type-button: 16px;
  --type-card-title: 20px;
  --type-section-title: 26px;
  --type-page-title: 40px;
  --control-small: 44px;
  --control-regular: 52px;
  --control-primary: 56px;
}

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

body {
  font-size: var(--type-body);
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1,
.page-head h1 {
  font-size: var(--type-page-title);
  line-height: 1.18;
}

h2,
.section-head h2 {
  font-size: var(--type-section-title);
  line-height: 1.3;
}

h3 {
  font-size: var(--type-card-title);
  line-height: 1.4;
}

.eyebrow,
.block-label,
.section-kicker,
.lesson-number,
.word-stage-label,
.sentence-meta,
.meal-name,
.benefit-status,
.show-label {
  font-size: var(--type-caption);
  line-height: 1.45;
}

.page-head p,
.section-head p {
  font-size: var(--type-body);
  line-height: 1.6;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.rating-btn,
.choice-btn,
.reveal-word-btn,
.ear-controls button,
.prep-panel a.primary-btn {
  min-height: var(--control-regular);
  padding-inline: 20px;
  font-size: var(--type-button);
  line-height: 1.2;
  white-space: nowrap;
}

.primary-btn,
.reveal-word-btn,
.ear-play-btn {
  min-height: var(--control-primary);
}

.chip,
.speak-mini,
.audio-speed-pair button,
.speed-control button,
.ear-segmented button,
.guide-tabs button {
  min-height: var(--control-small);
  font-size: var(--type-button);
  line-height: 1.2;
  white-space: nowrap;
}

.icon-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex: 0 0 48px;
}

.icon-btn svg,
.primary-btn svg,
.secondary-btn svg,
.ghost-btn svg {
  width: 21px;
  height: 21px;
}

/* Navigation */
.sidebar .brand b {
  font-size: 22px;
}

.sidebar .brand small,
.sidebar-foot small,
.offline-dot {
  font-size: var(--type-caption);
}

.side-nav .nav-btn {
  min-height: 56px;
  font-size: var(--type-button);
}

.side-nav .nav-btn svg {
  width: 22px;
  height: 22px;
}

/* Today */
.hero-copy h1 {
  font-size: 42px;
  line-height: 1.18;
}

.hero-copy > p {
  font-size: var(--type-body);
  line-height: 1.65;
}

.hero-kicker > span,
.hero-stamp {
  font-size: var(--type-caption);
}

.hero-trip-line span {
  font-size: var(--type-meta);
  line-height: 1.5;
}

.hero-trip-line b {
  font-size: var(--type-button);
}

.reserve-strip-title b,
.progress-copy b {
  font-size: var(--type-body);
}

.reserve-strip-title small,
.progress-copy small,
.reserve-pill,
.streak {
  font-size: var(--type-meta);
  line-height: 1.45;
}

.scene-card h3 {
  font-size: var(--type-card-title);
}

.scene-card p {
  font-size: var(--type-body-small);
  line-height: 1.55;
}

.scene-card .count {
  font-size: var(--type-caption);
}

.progress-ring span,
.side-nav .nav-btn em,
.recall-prompt {
  font-size: var(--type-caption);
}

/* Word and sentence learning */
.learn-mode-tabs button,
.listen-mode-tabs button {
  min-height: var(--control-regular);
  font-size: var(--type-button);
}

.learn-mode-tabs button b,
.listen-mode-tabs button b {
  font-size: var(--type-button);
}

.learn-mode-tabs button small,
.listen-mode-tabs button small {
  font-size: var(--type-caption);
}

.mobile-scene-select > span,
.mobile-scene-select select {
  font-size: var(--type-button);
}

.mobile-scene-select {
  min-height: var(--control-regular);
}

.word-scene-progress > div:first-child > span,
.sentence-scene-progress > div:first-child > span,
.word-scene-progress > small,
.sentence-scene-progress > small {
  font-size: var(--type-meta);
}

.word-scene-progress b,
.sentence-scene-progress b {
  font-size: 26px;
}

.word-scene-progress b small,
.sentence-scene-progress b small {
  font-size: var(--type-meta);
}

.word-ipa {
  font-size: 20px;
}

.word-ipa small {
  font-size: var(--type-caption);
}

.word-sound {
  font-size: var(--type-button);
}

.word-audio-controls .primary-btn,
.word-audio-controls .ghost-btn {
  min-height: var(--control-regular);
  padding-inline: 18px;
  font-size: var(--type-button);
}

.word-meaning {
  font-size: 22px;
  line-height: 1.45;
}

.word-hook span {
  font-size: var(--type-caption);
}

.word-hook p,
.word-example-zh,
.memory-tip {
  font-size: var(--type-body);
  line-height: 1.6;
}

.word-example-en {
  font-size: 24px;
  line-height: 1.5;
}

.english-main {
  font-size: 34px;
  line-height: 1.38;
}

.chinese-main {
  font-size: var(--type-body);
  line-height: 1.65;
}

.english-reply {
  font-size: 25px;
  line-height: 1.5;
}

.chinese-reply {
  font-size: var(--type-body);
  line-height: 1.6;
}

.practice-result,
.stepper span,
.aside-panel p {
  font-size: var(--type-body-small);
  line-height: 1.55;
}

.rating-btn,
.speak-mini {
  font-size: var(--type-button);
}

.aside-panel h3 {
  font-size: var(--type-card-title);
}

.key-list span {
  font-size: var(--type-meta);
}

/* Listening */
.listen-quiz-meta,
.ear-setting > span,
.ear-scene-select > span,
.ear-player-top,
.ear-player-meta {
  font-size: var(--type-meta);
}

.listen-stage > p,
.listen-reveal p,
.ear-player > p {
  font-size: var(--type-body);
  line-height: 1.6;
}

.choice-btn {
  width: 100%;
  min-width: 0;
  font-size: var(--type-body);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

.choice-btn > span:last-child {
  min-width: 0;
}

.choice-btn .letter {
  font-size: var(--type-meta);
}

.listen-reveal b {
  font-size: 24px;
}

.ear-segmented button,
.ear-scene-select select,
.ear-option,
.ear-controls button {
  font-size: var(--type-button);
}

.ear-scene-select select {
  min-height: var(--control-regular);
}

.ear-option {
  min-height: var(--control-regular);
}

.ear-player h2 {
  font-size: 32px;
  line-height: 1.3;
}

.ear-player-meta b {
  font-size: var(--type-body);
}

/* Rescue */
.search-box {
  min-height: 58px;
}

.search-box input {
  font-size: var(--type-body);
}

.urgent-strip button {
  min-height: var(--control-primary);
  font-size: var(--type-button);
  line-height: 1.25;
}

.rescue-item h3 {
  font-size: 22px;
  line-height: 1.4;
}

.rescue-item p {
  font-size: var(--type-body);
  line-height: 1.55;
}

.rescue-actions .show-btn span {
  font-size: var(--type-button);
  white-space: nowrap;
}

.rescue-actions .show-btn {
  width: auto;
  min-width: 150px;
  height: var(--control-regular);
  flex: 0 0 auto;
  padding-inline: 18px;
}

.rescue-actions .icon-btn:not(.show-btn) {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex: 0 0 48px;
}

/* Travel guide */
.trip-fact {
  min-height: 136px;
  padding: 20px;
}

.trip-fact span {
  font-size: var(--type-caption);
}

.trip-fact b {
  margin-block: 10px 7px;
  font-size: var(--type-body);
  line-height: 1.45;
}

.trip-fact small {
  font-size: var(--type-body-small);
  line-height: 1.5;
}

.guide-tabs button {
  min-height: var(--control-regular);
  font-size: var(--type-button);
}

.guide-risk-grid b,
.guide-note-grid b {
  font-size: var(--type-card-title);
  line-height: 1.4;
}

.guide-risk-grid p,
.guide-note-grid p,
.confirm-grid p,
.guide-callout p,
.prep-check span,
.guide-schedule-row p,
.guide-tip-list p {
  font-size: var(--type-body);
  line-height: 1.6;
}

.confirm-grid span,
.guide-schedule-row > span {
  font-size: var(--type-caption);
}

.guide-callout span {
  font-size: var(--type-caption);
}

.guide-callout h2 {
  font-size: var(--type-section-title);
}

.guide-callout strong small {
  font-size: var(--type-caption);
}

.checklist-group h3,
.guide-schedule-row h3 {
  font-size: var(--type-card-title);
}

.prep-check {
  min-height: 58px;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
}

.prep-check input {
  width: 21px;
  height: 21px;
}

.guide-schedule-row {
  min-height: 104px;
  grid-template-columns: 38px 132px minmax(0, 1fr);
}

.guide-schedule-row time {
  font-size: var(--type-meta);
}

.section-kicker,
.reservation-score span,
.reservation-check small {
  font-size: var(--type-meta);
}

.reservation-head h2 {
  font-size: var(--type-section-title);
}

.reservation-head p {
  font-size: var(--type-body);
  line-height: 1.6;
}

.reservation-score b {
  font-size: 34px;
}

.reservation-check {
  min-height: 82px;
  padding: 14px;
}

.reservation-check b {
  font-size: var(--type-body);
  line-height: 1.4;
}

.reservation-desk > .primary-btn {
  min-height: var(--control-primary);
  font-size: var(--type-button);
}

.timeline-marker span {
  font-size: var(--type-meta);
}

.timeline-meta,
.timeline-meta b {
  font-size: var(--type-meta);
}

.timeline-body h3 {
  font-size: var(--type-card-title);
}

.timeline-body p,
.timeline-action {
  font-size: var(--type-body);
  line-height: 1.6;
}

.resort-figure figcaption b {
  font-size: var(--type-body);
}

.resort-figure figcaption span {
  font-size: var(--type-body-small);
  line-height: 1.5;
}

.benefit-card {
  min-height: 280px;
  padding: 20px;
}

.benefit-card h3,
.paid-row h3,
.warning-list h3,
.prep-panel h3 {
  font-size: var(--type-card-title);
}

.benefit-card > b,
.benefit-card p,
.dining-row p,
.paid-row p,
.paid-row small,
.warning-list p,
.prep-panel p,
.source-link span {
  font-size: var(--type-body);
  line-height: 1.6;
}

.dining-row {
  min-height: 88px;
}

.dining-row b,
.dining-row time,
.source-link b {
  font-size: var(--type-body);
}

.paid-row {
  min-height: 108px;
}

.warning-list article > span {
  font-size: var(--type-body);
}

.prep-tools details summary {
  font-size: var(--type-body);
}

/* Full-screen communication and transient feedback */
.show-label {
  font-size: var(--type-meta);
}

.show-card > div {
  font-size: var(--type-body);
}

.toast {
  min-height: var(--control-small);
  display: flex;
  align-items: center;
  font-size: var(--type-body-small);
  line-height: 1.4;
}

@media (max-width: 720px), (min-width: 721px) and (max-width: 960px) and (max-aspect-ratio: 1.2) {
  :root {
    --type-page-title: 36px;
    --type-section-title: 24px;
  }

  .mobile-header {
    height: 72px;
    padding-inline: 16px;
  }

  .brand.compact .brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .brand.compact b {
    font-size: 20px;
  }

  .mobile-header .icon-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .bottom-nav {
    height: calc(76px + env(safe-area-inset-bottom));
    padding-top: 7px;
  }

  .bottom-nav .nav-btn,
  .bottom-nav .nav-btn[data-nav="rescue"] {
    min-width: 0;
    min-height: 60px;
    padding: 4px 2px;
    font-size: var(--type-meta);
    line-height: 1.1;
  }

  .bottom-nav .nav-btn span,
  .bottom-nav .nav-btn[data-nav="rescue"] span {
    font-size: var(--type-meta);
    white-space: nowrap;
  }

  .bottom-nav .nav-btn svg {
    width: 24px;
    height: 24px;
  }

  .view {
    padding-top: 94px;
    padding-bottom: 116px;
  }

  .hero-copy h1 {
    font-size: 36px;
  }

  .scene-card {
    min-height: 164px;
  }

  .word-mode-view > .word-page-head,
  .word-mode-view > .learn-mode-tabs,
  .word-mode-view > .mobile-scene-select,
  .sentence-mode-view > .sentence-page-head,
  .sentence-mode-view > .learn-mode-tabs,
  .sentence-mode-view > .mobile-scene-select,
  .word-mode-view .rating-row,
  .sentence-mode-view .rating-row,
  .word-mode-view .word-aside,
  .sentence-mode-view .lesson-aside {
    margin-right: 16px;
    margin-left: 16px;
  }

  .word-mode-view .learn-mode-tabs button,
  .sentence-mode-view .learn-mode-tabs button {
    min-height: var(--control-regular);
  }

  .word-mode-view .learn-mode-tabs b,
  .sentence-mode-view .learn-mode-tabs b {
    font-size: var(--type-button);
  }

  .word-mode-view .learn-mode-tabs small,
  .sentence-mode-view .learn-mode-tabs small {
    font-size: var(--type-caption);
  }

  .word-mode-view .word-audio-controls button {
    min-height: var(--control-regular);
    padding-inline: 16px;
    font-size: var(--type-button);
  }

  .sentence-mode-view .english-main {
    font-size: 30px;
  }

  .sentence-mode-view .chinese-main,
  .sentence-mode-view .chinese-reply {
    font-size: var(--type-body);
  }

  .sentence-mode-view .english-reply {
    font-size: 24px;
  }

  .guide-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .guide-tabs button {
    min-height: var(--control-regular);
    padding: 8px 5px;
    font-size: var(--type-button);
  }

  .trip-fact {
    min-height: 154px;
    padding: 16px;
  }

  .reservation-desk {
    margin-right: -15px;
    margin-left: -15px;
    padding: 24px 16px;
  }

  .benefit-card {
    min-height: 330px;
    padding: 18px;
  }

  .guide-schedule-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px 12px;
  }

  .guide-schedule-row time {
    grid-column: 2;
    padding-top: 2px;
  }

  .guide-schedule-row > div {
    grid-column: 2;
  }

  #view-rescue .scene-chips .chip {
    min-height: var(--control-regular);
    font-size: var(--type-button);
  }

  #view-rescue .rescue-actions .show-btn {
    width: 100%;
    min-width: 140px;
    height: var(--control-regular);
  }

  #view-rescue .rescue-actions .show-btn span,
  #view-listen .ear-controls button,
  #view-listen .ear-option,
  #view-listen .ear-player-top,
  #view-listen .ear-player-meta,
  #view-listen .ear-player > p,
  #view-listen .ear-player-meta b {
    font-size: var(--type-button);
  }

  .toast {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .trip-page-head p {
    font-size: var(--type-body);
  }

  .trip-overview {
    grid-template-columns: 1fr 1fr;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .benefit-card {
    min-height: 0;
  }
}

@media (max-width: 360px) {
  :root {
    --type-body: 16px;
    --type-button: 15px;
    --type-card-title: 19px;
    --type-section-title: 23px;
    --type-page-title: 34px;
  }

  .view {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hero-copy h1 {
    font-size: 34px;
  }

  .guide-tabs {
    gap: 6px;
  }

  .guide-tabs button {
    font-size: 14px;
  }

  .trip-fact {
    min-height: 150px;
    padding: 13px;
  }

  .reservation-desk {
    margin-right: -12px;
    margin-left: -12px;
  }

  #view-rescue .rescue-actions {
    grid-template-columns: 48px 48px minmax(122px, 1fr);
  }

  #view-rescue .rescue-actions .icon-btn:not(.show-btn) {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  #view-rescue .rescue-actions .show-btn {
    width: 100%;
    min-width: 122px;
  }
}