:root {
  color-scheme: light dark;
  --paper: #faf8f3;
  --raised: #ffffff;
  --ink: #1f1d1a;
  --muted: #6a655c;
  --rule: #e2ddd2;
  --accent: #a83a29;
  --second: #1f6a78;
  --current: #f6e6c8;
  --pressed: #efe9dc;
  --zh: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16171a;
    --raised: #24262b;
    --ink: #ebe8e1;
    --muted: #a39e94;
    --rule: #33353b;
    --accent: #ef9483;
    --second: #79c5d3;
    --current: #3b3321;
    --pressed: #2a2c31;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--latin);
  font-size: 17px;
  line-height: 1.5;
}

/* #app holds the delegated click handler, which makes iOS treat the whole page
   as tappable. Without this every tap flashes grey. */
#app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[lang="zh-Hans"] { font-family: var(--zh); }

.page {
  flex: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

/* Home */

.home-title {
  margin: 0;
  padding: calc(28px + env(safe-area-inset-top)) 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}

.conversations { margin: 0; padding: 0; list-style: none; }
.conversations li { border-top: 1px solid var(--rule); }

.conversations a {
  display: block;
  padding: 16px 0;
  text-decoration: none;
}

.conversations a:active { background: var(--pressed); }

.conversation-title { display: block; font-size: 1.6rem; line-height: 1.3; }
.conversation-meta { display: block; margin-top: 2px; color: var(--muted); font-size: .94rem; }

.message { padding: 28px 0; color: var(--muted); }
.message code { font-size: .9em; }

/* Conversation chrome */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.back {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  text-decoration: none;
  color: var(--muted);
}

.toggles { display: flex; gap: 4px; }

.toggle {
  min-height: 44px;
  padding: 0 10px;
  color: var(--muted);
  font-size: .94rem;
  text-decoration: line-through;
}

.toggle[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.conversation-head { padding: 22px 0 10px; }
.conversation-head h1 { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.25; }
.conversation-head p { margin: 2px 0 0; color: var(--muted); }

.playbar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.playbar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 40rem;
  margin: 0 auto;
}

.play-all {
  min-height: 44px;
  min-width: 92px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
}

.speeds { display: flex; }

.speed {
  min-width: 46px;
  min-height: 44px;
  padding: 0 4px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}

.speed[aria-pressed="true"] {
  background: var(--pressed);
  color: var(--ink);
  font-weight: 600;
}

.status {
  max-width: 40rem;
  margin: 0 auto 6px;
  color: var(--accent);
  font-size: .9rem;
}

.status:empty { display: none; }

/* Dialogue */

.line {
  margin: 0 -10px;
  padding: 12px 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  scroll-margin: 64px 0 96px;
  transition: background-color .15s;
}

.line:active { background: var(--pressed); }
.line.current { background: var(--current); }

.speaker {
  margin-bottom: 2px;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 600;
}

.line[data-speaker="1"] .speaker { color: var(--second); }

.zh {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.75;
}

.chunk {
  display: inline-block;
  white-space: nowrap;
}

.word {
  display: inline-block;
  padding: 0 .1em;
  border-radius: 5px;
  line-height: inherit;
  text-align: center;
  vertical-align: baseline;
}

button.word.active { background: var(--current); }
button.word:active { background: var(--pressed); }

@media (hover: hover) {
  button.word:hover { background: var(--pressed); }
}

/* Centered, because the default spreads a word's characters apart under wide pinyin. */
ruby { ruby-position: over; ruby-align: center; }

rt {
  padding-bottom: 1px;
  color: var(--muted);
  font-family: var(--latin);
  font-size: .5em;
  line-height: 1.2;
}

.hide-pinyin rt { display: none; }
.hide-pinyin .word { padding: 0; }
.hide-pinyin .zh { line-height: 1.7; }

.en {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.hide-english .en { display: none; }

/* Word popover */

.popover {
  position: absolute;
  z-index: 20;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 14px 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: 0 6px 24px rgb(0 0 0 / .22);
}

.popover-hz { font-size: 1.7rem; line-height: 1.3; }
.popover-py { color: var(--muted); }
.popover-gloss { margin-top: 2px; }

/* Vocabulary */

.vocab { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 18px; }
.vocab h2 { margin: 0 0 6px; color: var(--muted); font-size: 1.05rem; font-weight: 600; }
.vocab dl { margin: 0; }
.vocab-entry { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.vocab-entry:last-child { border-bottom: 0; }
.vocab-entry dt { font-size: 1.4rem; line-height: 1.35; }
.vocab-py { margin-left: 8px; color: var(--muted); font-family: var(--latin); font-size: .98rem; }
.vocab-entry dd { margin: 2px 0 0; }
.vocab-note { display: block; margin-top: 2px; color: var(--muted); font-size: .94rem; }

@media (prefers-reduced-motion: reduce) {
  .line { transition: none; }
}