@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Frank Ruhl";
  src: url("fonts/frank-ruhl-hebrew.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* Every language is a room with its own paint. A new language with no block here
   falls back to these defaults. The two band colors are the two speakers. */
:root {
  color-scheme: light dark;
  --ink: #131a3a;
  --bar: #131a3a;
  --on-bar: #f4f6ff;
  --ground: #f4f6ff;
  --band-a: #d9ece3;
  --band-b: #f8dce0;
  --band-a-live: #a5d8c1;
  --band-b-live: #f3afbb;
  --mark: #ffc83d;
  --on-mark: #131a3a;
  --latin: "Bricolage", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pinyin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --zh: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
  --he: "Frank Ruhl", "Arial Hebrew", "Noto Serif Hebrew", serif;
}

[data-lang="he"] {
  --ink: #2a1650;
  --bar: #2a1650;
  --ground: #fbf7ff;
  --band-a: #cfe4f7;
  --band-b: #fbd9ad;
  --band-a-live: #9ccbf0;
  --band-b-live: #f7bb6c;
  --mark: #ff8fb1;
  --on-mark: #2a1650;
}

[data-lang="es"] {
  --ink: #3b1020;
  --bar: #3b1020;
  --ground: #fff8f2;
  --band-a: #fde3a7;
  --band-b: #f6c6b4;
  --band-a-live: #f9cd69;
  --band-b-live: #ee9f85;
  --mark: #27c4b4;
  --on-mark: #3b1020;
}

[data-lang="ca"] {
  --ink: #0f2c3d;
  --bar: #0f2c3d;
  --ground: #f5fbfb;
  --band-a: #c9e8e8;
  --band-b: #eee6a0;
  --band-a-live: #93d3d3;
  --band-b-live: #e0d25e;
  --mark: #ff7a59;
  --on-mark: #0f2c3d;
}

[data-lang="fr"] {
  --ink: #1d2a5b;
  --bar: #1d2a5b;
  --ground: #fbfaff;
  --band-a: #dde3ff;
  --band-b: #ffd9e8;
  --band-a-live: #b5c1fb;
  --band-b-live: #fbaecb;
  --mark: #7ce0b8;
  --on-mark: #1d2a5b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef3f8;
    --bar: #d9ece3;
    --on-bar: #131a3a;
    --ground: #101733;
    --band-a: #123a33;
    --band-b: #47192f;
    --band-a-live: #1d6655;
    --band-b-live: #80294f;
  }

  [data-lang="he"] {
    --ink: #f4eeff;
    --bar: #cfe4f7;
    --on-bar: #2a1650;
    --ground: #1c1138;
    --band-a: #17345a;
    --band-b: #553112;
    --band-a-live: #245b98;
    --band-b-live: #91541b;
  }

  [data-lang="es"] {
    --ink: #fff0e6;
    --bar: #fde3a7;
    --on-bar: #3b1020;
    --ground: #2a0c17;
    --band-a: #5a3f0d;
    --band-b: #66261a;
    --band-a-live: #8c6315;
    --band-b-live: #9c3b27;
  }

  [data-lang="ca"] {
    --ink: #eaf7f7;
    --bar: #c9e8e8;
    --on-bar: #0f2c3d;
    --ground: #0b2230;
    --band-a: #124449;
    --band-b: #4a4510;
    --band-a-live: #1c6c73;
    --band-b-live: #7a711a;
  }

  [data-lang="fr"] {
    --ink: #eef0ff;
    --bar: #dde3ff;
    --on-bar: #1d2a5b;
    --ground: #141d44;
    --band-a: #27346e;
    --band-b: #5a2342;
    --band-a-live: #3d4fa3;
    --band-b-live: #8b3566;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bar);
  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;
  background: var(--ground);
  -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: 3px solid var(--mark);
  outline-offset: 2px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Home: one full-bleed band per language, named in its own script. */

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  background: var(--band-a);
}

.language-band {
  flex: 0 0 auto;
  color: var(--ink);
  background: var(--band-a);
}

.language-band:nth-of-type(even) { background: var(--band-b); }
.language-band:last-child { flex: 1 0 auto; padding-bottom: env(safe-area-inset-bottom); }

.language {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 20px max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left));
  text-align: start;
}

.language-name {
  font-size: clamp(4.5rem, 24vw, 8rem);
  font-weight: 700;
  line-height: 1.05;
}

.language-name:not([lang="zh-Hans"], [lang="he"]) { font-size: clamp(3rem, 15vw, 6rem); }

.language-english { font-size: 1.05rem; font-weight: 500; }

.conversations {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 18px 28px;
  list-style: none;
}

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

.conversations a:active { opacity: .6; }

.conversation-title { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.25; }

.conversation-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
  font-size: 1rem;
}

.level {
  flex: none;
  padding: 0 8px;
  background: var(--ink);
  color: var(--ground);
  font-size: .85rem;
  font-weight: 600;
}

.message { padding: 28px 18px; }

/* Conversation chrome: solid bars bookend the page. */

.topbar,
.playbar {
  position: sticky;
  z-index: 10;
  background: var(--bar);
  color: var(--on-bar);
}

.topbar {
  top: 0;
  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));
}

.back {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 600;
  text-decoration: none;
}

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

.toggle {
  min-height: 32px;
  padding: 0 11px;
  border: 1.5px solid currentColor;
  font-size: .94rem;
  font-weight: 500;
}

.toggle[aria-pressed="true"] {
  border-color: var(--mark);
  background: var(--mark);
  color: var(--on-mark);
  font-weight: 700;
}

.conversation-head {
  padding: 26px max(18px, calc((100% - 42rem) / 2)) 22px;
}

.conversation-head h1 {
  margin: 0;
  font-size: clamp(3rem, 15vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
}

.page { flex: 1; width: 100%; padding-bottom: 32px; }

.playbar {
  bottom: 0;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

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

.play-all {
  flex: none;
  min-height: 46px;
  min-width: 96px;
  padding: 0 18px;
  border-radius: 23px;
  background: var(--mark);
  color: var(--on-mark);
  font-weight: 700;
}

.speeds { display: flex; }

.speed {
  min-width: 48px;
  min-height: 44px;
  padding: 0 3px;
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}

.speed[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 var(--mark);
  font-weight: 700;
}

.status {
  max-width: 42rem;
  margin: 0 auto 8px;
  font-size: .9rem;
}

.status:empty { display: none; }

/* Dialogue: each speaker is a color, each turn a full-bleed band. */

.line {
  padding: 16px max(18px, calc((100% - 42rem) / 2)) 20px;
  background: var(--band-a);
  cursor: pointer;
  scroll-margin: 56px 0 84px;
  transition: background-color .18s;
}

.line[data-speaker="1"] { background: var(--band-b); }
.line.current { background: var(--band-a-live); }
.line[data-speaker="1"].current { background: var(--band-b-live); }

.line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}

.speaker { font-size: 1rem; font-weight: 700; }

.from-here {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 44px;
  min-height: 44px;
  margin: -6px 0;
  padding: 0;
}

/* Drawn rather than typed, because iOS can render the play character as an emoji. */
.from-here::before {
  content: "";
  width: 15px;
  height: 17px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.from-here:active { opacity: .6; }

.target {
  margin: 2px 0 0;
  font-size: 1.65rem;
  line-height: 1.75;
}

.target[lang="he"] { font-size: 1.75rem; line-height: 1.6; }
.target:not([lang="zh-Hans"], [lang="he"]) { font-size: 1.4rem; line-height: 1.55; }

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

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

[data-reading="replace"] .word { padding: 0; }

button.word.active { background: var(--ink); color: var(--ground); }
button.word.active rt { color: inherit; }
button.word:active { opacity: .6; }

.word.speaking { background: var(--mark); color: var(--on-mark); }
.word.speaking rt { color: inherit; }

@media (hover: hover) {
  button.word:hover { text-decoration: underline; text-underline-offset: 4px; }
}

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

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

.hide-reading rt { display: none; }
.hide-reading .word { padding: 0; }
.hide-reading .pointed { display: none; }
html:not(.hide-reading) .unpointed { display: none; }

.en {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
}

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

/* Word popover */

.popover {
  position: absolute;
  z-index: 20;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px 14px 12px;
  border: 2px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.popover-text { font-size: 1.8rem; font-weight: 600; line-height: 1.35; }
.popover-reading { font-family: var(--pinyin); }
.popover-gloss { margin-top: 2px; }

/* Vocabulary */

.vocab {
  max-width: 46rem;
  margin: 18px auto 0;
  padding: 10px 18px 0;
}

.vocab h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.vocab dl { margin: 0; }
.vocab-entry { padding: 12px 0; }
.vocab-entry dt { font-size: 1.55rem; font-weight: 600; line-height: 1.35; }
.vocab-reading { margin-inline-start: 8px; font-family: var(--pinyin); font-size: 1rem; font-weight: 400; }
.vocab-entry dd { margin: 2px 0 0; }
.vocab-note { display: block; margin-top: 2px; font-size: .94rem; opacity: .8; }

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