@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,500..700,50&display=swap");
:root {
  /* 2026-09-04 Lantern refresh: mirrors tokens.css so the English app moves
     with the Thai app. This file loads after tokens.css and wins, so the
     values must match, not merely rhyme. */
  --bg: oklch(0.150 0.016 300);
  --bg-2: oklch(0.178 0.018 300);
  --panel: oklch(0.208 0.020 300);
  --panel-2: oklch(0.242 0.022 300);
  --line: oklch(0.32 0.020 300 / 0.6);
  --text: oklch(0.965 0.010 85);
  --muted: oklch(0.64 0.016 85);
  --accent: oklch(0.84 0.150 82);
  --accent-2: oklch(0.80 0.120 350);
  --danger: oklch(0.72 0.19 22);
  --good: oklch(0.80 0.14 150);
  --shadow: 0 18px 45px rgba(0,0,0,.32);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% -10%, oklch(0.84 0.150 82 / .10), transparent 34%),
    linear-gradient(180deg, oklch(0.165 0.018 300) 0%, var(--bg) 48%);
  color: var(--text);
  /* Noto Sans Thai Looped first among the Thai faces, matching --font-thai.
     The pages that load this file now also load the webfonts (the Thai study
     page's link), so Thai stops alternating between the system face and the
     brand face from heading to heading. */
  font-family: Inter, "Noto Sans Thai Looped", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
/* Thai takes no Latin tracking, and it needs leading for tone marks and
   upper vowels. Headings sit at 1.25 or more, body text at 1.6. */
h1, h2, h3, h4, p, small, span, strong, li, button, a { letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.en-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px calc(88px + env(safe-area-inset-bottom));
}
.en-topbar {
  position: sticky;
  z-index: 20;
  top: env(safe-area-inset-top, 0px);
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -16px;
  padding: 10px 16px;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.en-topbar-copy { min-width: 0; flex: 1; }
.en-topbar h1 { margin: 0; font: 600 20px/1.25 "Fraunces", "Inter Tight", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 50; }
.en-topbar p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.en-back, .en-icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.en-brand {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: linear-gradient(145deg, oklch(0.89 0.135 84), var(--accent));
  color: oklch(0.24 0.055 70);
  font: 800 20px/1 "Inter Tight", sans-serif;
  box-shadow: 0 8px 22px oklch(0.84 0.150 82 / .22);
}
.en-topbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.en-icon-button.tc-premium { border-color: oklch(0.80 0.120 350 / .5); color: var(--accent-2); }

/* Who is signed in. The Thai app shows name + tier in its side nav; the
   English home only had the avatar, so a signed-out learner never saw that
   there was anything to sign in for. settings.js fills [data-account-name]
   and [data-account-tier]; the static text is the signed-out default. */
.en-account-line {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 -6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.en-account-line .en-account-name { flex: 0 0 auto; font-weight: 800; white-space: nowrap; }
.en-account-line .en-account-tier { min-width: 0; flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-account-line .en-account-tier::before { content: "\00b7"; margin-right: 8px; }
.en-account-line .en-account-go { flex: 0 0 auto; color: var(--accent); font-weight: 800; }
.en-account-line.tc-premium { border-color: oklch(0.80 0.120 350 / .4); }
.en-account-line.tc-premium .en-account-tier { color: var(--accent-2); }

.en-home-hero { padding: 24px 2px 14px; }
/* Thai in all caps with .12em tracking is not a style, it is damage: Thai has
   no case and the extra space breaks the syllable clusters apart. */
.en-eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 14px; font-weight: 800; line-height: 1.5; }
.en-home-hero h1 { margin: 0; max-width: 540px; font: 750 clamp(30px, 9vw, 46px)/1.25 "Inter Tight", Inter, sans-serif; }
.en-home-hero p { margin: 13px 0 0; max-width: 560px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-summary-card {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  margin: 8px 0 24px;
  padding: 16px;
  border: 1px solid oklch(0.84 0.150 82 / .24);
  border-radius: var(--radius);
  background: linear-gradient(145deg, oklch(0.84 0.150 82 / .11), oklch(0.208 0.020 300 / .95));
  box-shadow: var(--shadow);
  /* It is an anchor, so every word in it was underlined. */
  text-decoration: none;
}
.en-summary-card strong { display: block; font: 750 18px/1.3 "Inter Tight", sans-serif; }
.en-summary-card span { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.en-summary-stat { align-self: center; text-align: right; }
.en-summary-stat b { display: block; min-height: 28px; color: var(--accent); font: 800 28px/1 "Inter Tight", sans-serif; }

.en-group { margin-top: 26px; }
.en-group-head { margin: 0 2px 10px; }
.en-group-head h2 { margin: 0; font: 700 17px/1.3 "Inter Tight", sans-serif; }
.en-group-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.en-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.en-module-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--panel), oklch(0.185 0.018 300));
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.en-module-card:active { transform: scale(.985); }
.en-module-card.featured { grid-column: 1 / -1; min-height: 108px; background: linear-gradient(145deg, oklch(0.80 0.120 350 / .14), var(--panel)); border-color: oklch(0.80 0.120 350 / .24); }
/* One inline SVG set across the nav and the tiles. The tiles used to carry
   two-letter monograms ("St", "Tu", "Wa") while music.html had real icons, so
   the app changed drawing style from tab to tab. */
.en-module-icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 11px; background: var(--panel-2); color: var(--accent); }
.en-module-icon svg { width: 19px; height: 19px; display: block; }
.en-module-card strong { font-size: 15px; line-height: 1.35; }
/* The English name under the Thai one, where the English word is part of what
   the tile teaches. */
.en-module-en { color: var(--accent); font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.3; }
.en-module-card small { color: var(--muted); font-size: 14px; line-height: 1.5; }
/* Rounds finished. The scores were saved from the first release and never
   shown, so every tile looked untouched. */
.en-module-progress { margin-top: auto; padding-top: 4px; color: var(--accent-2); font-size: 14px; font-weight: 700; line-height: 1.3; }
.en-module-progress[hidden] { display: none; }

.en-module-main { padding: 18px 0 8px; }
.en-intro { margin-bottom: 16px; }
.en-intro h2 { margin: 0; font: 750 27px/1.3 "Inter Tight", sans-serif; }
.en-intro p { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-toolbar { display: flex; gap: 8px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
.en-toolbar::-webkit-scrollbar { display: none; }
.en-search {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: var(--panel);
  color: var(--text);
}
.en-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.84 0.150 82 / .12); }
.en-chip, .en-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.en-chip.active, .en-button.primary { border-color: var(--accent); background: var(--accent); color: oklch(0.24 0.055 70); font-weight: 800; }
.en-button.warm { border-color: var(--accent-2); background: var(--accent-2); color: #271700; font-weight: 800; }
.en-button.ghost { background: transparent; color: var(--muted); }
/* A disabled button kept its filled marigold or lotus background at .45
   opacity, which still reads as the thing to press. It goes flat instead. */
.en-button:disabled, .en-button.primary:disabled, .en-button.warm:disabled {
  opacity: 1;
  border-color: var(--line);
  background: var(--panel);
  color: var(--text-3, var(--muted));
  font-weight: 600;
  cursor: default;
}
.en-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.en-list { display: grid; gap: 9px; }
.en-row, .en-card-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.en-row { padding: 13px 14px; }
.en-row-main { display: flex; align-items: center; gap: 12px; }
.en-row-copy { min-width: 0; flex: 1; }
.en-row-copy strong { display: block; font-size: 17px; line-height: 1.35; }
.en-row-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-row-details { display: none; padding-top: 11px; margin-top: 11px; border-top: 1px solid var(--line); }
.en-row.open .en-row-details { display: block; }
.en-row-details p { margin: 5px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-mini-button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.en-mini-button.saved { color: var(--accent-2); }
.en-mini-button svg { width: 18px; height: 18px; display: block; }
.en-premium-hint { margin: 0 2px 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-premium-hint a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; cursor: pointer; }
.en-premium-hint.is-alert { color: var(--accent-2); }
.en-premium-hint.is-alert a { text-decoration-color: currentColor; }
.en-scope-summary { display: flex; justify-content: space-between; gap: 10px; margin: 11px 2px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.en-scope-summary b { color: var(--text); }
.en-scope-row { position: relative; overflow: hidden; touch-action: pan-y; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.en-scope-row.swipe-study { border-color: var(--accent-2); background: oklch(0.80 0.120 350 / .1); }
.en-scope-row.swipe-known { border-color: var(--accent); background: oklch(0.84 0.150 82 / .1); }
.en-scope-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.en-scope-button { min-height: 38px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-weight: 700; }
.en-scope-button.study.active { border-color: var(--accent-2); color: var(--accent-2); background: oklch(0.80 0.120 350 / .1); }
.en-scope-button.known.active { border-color: var(--accent); color: var(--accent); background: oklch(0.84 0.150 82 / .1); }
.en-load-more { width: 100%; margin-top: 12px; }
.en-empty { padding: 30px 18px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }

.en-card-panel { padding: 18px; }
.en-card-panel + .en-card-panel { margin-top: 12px; }
/* Thai, so no uppercase and no tracking (see .en-eyebrow). */
.en-kicker { color: var(--accent); font-size: 14px; font-weight: 800; line-height: 1.5; }
/* Also carries Thai prompts (Talk, Tutor), so it takes Thai leading and no
   negative tracking. */
.en-large-prompt { margin: 12px 0 7px; font: 750 clamp(26px, 8vw, 40px)/1.3 "Inter Tight", sans-serif; }
.en-thai { color: var(--accent-2); font-size: 18px; line-height: 1.6; }
.en-muted { color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-answer { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.en-answer.show { display: block; }
.en-feedback { min-height: 24px; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-feedback.good { color: var(--good); }
.en-feedback.bad { color: var(--danger); }

.en-choice-grid { display: grid; gap: 8px; margin-top: 14px; }
.en-choice {
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.en-choice.correct { border-color: var(--good); background: rgba(117,213,141,.12); }
.en-choice.wrong { border-color: var(--danger); background: rgba(255,141,136,.1); }
.correct { border-color: var(--good) !important; background: rgba(117,213,141,.12) !important; }
.wrong { border-color: var(--danger) !important; background: rgba(255,141,136,.1) !important; }
.en-progress-track { height: 5px; margin: 12px 0 18px; overflow: hidden; border-radius: 99px; background: var(--panel-2); }
.en-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }

.en-dialogue { display: grid; gap: 8px; margin: 14px 0; }
.en-bubble { max-width: 88%; padding: 11px 13px; border-radius: 15px 15px 15px 5px; background: var(--panel-2); font-size: 15px; line-height: 1.6; }
.en-bubble:nth-child(even) { margin-left: auto; border-radius: 15px 15px 5px 15px; background: oklch(0.84 0.150 82 / .12); }
.en-bubble span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.en-transcript { display: none; }
.en-transcript.show { display: grid; }

.en-record-box { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(0,0,0,.12); }
.en-record-box textarea { width: 100%; min-height: 74px; resize: vertical; padding: 11px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--bg-2); color: var(--text); }
.en-recording { animation: en-pulse 1.1s infinite; }
@keyframes en-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,141,136,.08); } }

.en-watch-stage { min-height: 360px; display: grid; align-content: center; text-align: center; }
.en-watch-stage .en-large-prompt { font-size: clamp(40px, 13vw, 68px); }
.en-watch-stage .en-thai { opacity: 0; transform: translateY(5px); transition: .25s ease; }
.en-watch-stage.revealed .en-thai { opacity: 1; transform: none; }
.en-watch-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 12px; }

.en-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.en-pair button { min-height: 102px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.en-pair strong { display: block; font-size: 25px; line-height: 1.3; }
.en-pair span { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.en-chunks { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.en-chunk { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
.en-chunk.stress { border-color: var(--accent-2); color: var(--accent-2); font-weight: 800; }

.en-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #000; box-shadow: var(--shadow); }
.en-song-picks { display: flex; gap: 8px; margin: 12px 0 15px; overflow-x: auto; scrollbar-width: none; }
.en-song-picks::-webkit-scrollbar { display: none; }
.en-song-pick { min-width: 168px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.en-song-pick.active { border-color: var(--accent); background: oklch(0.84 0.150 82 / .1); }
.en-song-pick strong, .en-song-pick span { display: block; }
.en-song-pick span { margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.en-lyrics { display: grid; gap: 5px; margin-top: 16px; }
.en-lyric-line { width: 100%; padding: 13px 14px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: .2s ease; }
.en-lyric-line strong { display: block; font-size: 17px; line-height: 1.5; }
.en-lyric-line span { display: block; margin-top: 4px; color: var(--accent-2); font-size: 14px; line-height: 1.6; }
.en-lyric-line.active { border-color: oklch(0.84 0.150 82 / .3); background: oklch(0.84 0.150 82 / .1); transform: scale(1.01); }
.en-status-box { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.en-bottom-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 0;
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  transform: translateX(-50%);
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in oklch, var(--bg) 93%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.en-bottom-nav a { display: grid; place-items: center; gap: 3px; min-height: 48px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.25; white-space: nowrap; }
.en-bottom-nav a.active { color: var(--accent); background: oklch(0.84 0.150 82 / .08); }
.en-bottom-nav svg { width: 22px; height: 22px; display: block; }

.en-toast { position: fixed; z-index: 50; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; line-height: 1.5; opacity: 0; pointer-events: none; transition: .2s ease; }
.en-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 620px) {
  .en-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .en-module-card.featured { grid-column: span 2; }
}
@media (max-width: 360px) {
  .en-shell { padding-left: 12px; padding-right: 12px; }
  .en-topbar { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .en-module-card { min-height: 112px; padding: 13px; }
}
/* iOS zooms the page when a text field under 16px takes focus and never
   zooms back out (design-system.css has the full story; commit 8e42217).
   These pages load english-app.css instead of design-system.css, so that fix
   never reached them. Same rule, scoped to coarse pointers so desktop keeps
   its smaller fields, and to the field types that raise a keyboard.
   .en-filter / #en-filter are listed by id and class because
   learn-english.html styles that select at 12px inline; note that page only
   links tokens.css today, so the rule reaches it once it also links this
   file. Buttons (.en-segment) never trigger the zoom and are left alone. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  textarea,
  select,
  .en-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  .en-shell textarea,
  .en-shell select,
  .en-search,
  .en-record-box textarea,
  .en-filter,
  #en-filter {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- 14px type floor ------------------------------------------------------
   Same floor as design-system.css: nothing a user reads goes under 14px.
   These rules used to live in a `max-width: 768px` block, which left every
   one of them at 9 to 13px the moment the window was wider than a phone: a
   laptop got the small type and the phone got the readable type. The sizes
   are now in the rules themselves, above; only the bottom nav still needs a
   phone-specific tightening.

   Five columns of about 75px at 390px; the longest label (หน้าหลัก) is
   about 56px. */
@media (max-width: 768px) {
  .en-bottom-nav a { gap: 2px; }
}