/* Hala English — one page, three screens. The page loads nothing from other sites: the lesson
   screen's font is served from /m/fonts/. */
:root{
  --bg:#FFF7E8;--card:#FFFFFF;--text:#2B2A33;--muted:#7A7686;--line:#F0E3CC;
  --go:#2FA36B;--go-dk:#1E7B4E;--stop:#E2574C;--sun:#FFB627;--sky:#4C8DF6;
  --safe-t:max(env(safe-area-inset-top),12px);--safe-b:max(env(safe-area-inset-bottom),16px)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:18px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer}
[hidden]{display:none!important}

.top{flex:none;display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 4px) 18px 10px}
.brand{width:36px;height:36px;border-radius:11px;background:var(--sun);color:#fff;display:grid;place-items:center;font-weight:800}
.title{font-weight:700}
main{flex:1;min-height:0;overflow-y:auto;padding:8px 18px var(--safe-b);display:flex;flex-direction:column}
section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
h1{margin:0;font-size:34px}
.note{margin:0;min-height:26px;color:var(--muted)}
.detail{flex:none;margin:8px 0 0;min-height:16px;font-size:12px;color:var(--muted);text-align:center;word-break:break-word}

.learners{display:grid;gap:16px;width:100%;max-width:440px}
/* Scoped to the picker: a learner's chat bubble is also called .learner. */
.learners .learner{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:26px;background:var(--card);
  border:2px solid var(--line);box-shadow:0 6px 18px rgba(120,90,20,.08);font-size:26px;font-weight:700;text-align:left}
.learners .learner:active{transform:scale(.98)}
.learners .learner.blocked{opacity:.45;box-shadow:none}
.stale{margin:0;width:100%;max-width:440px;padding:12px 16px;border-radius:16px;background:#FFF1C9;border:2px solid var(--sun);font-size:16px;font-weight:700}
.avatar{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:36px;background:var(--sky)}
.learners .learner.kids .avatar{background:var(--sun)}
.learners .learner.kids:nth-child(odd) .avatar{background:#F2709C}

.big{width:100%;max-width:440px;min-height:84px;border-radius:42px;color:#fff;font-size:28px;font-weight:800}
.big:active{transform:scale(.98)}
.start{background:linear-gradient(135deg,var(--go),var(--go-dk));box-shadow:0 10px 26px rgba(47,163,107,.35)}
.link{background:none;color:var(--muted);text-decoration:underline;padding:12px}

/* Be Vietnam Pro (SIL OFL 1.1, fonts/LICENSE-be-vietnam-pro.txt). */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-800-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/be-vietnam-pro-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Lesson screen (docs/specs/2026-11-13-lesson-screen-design.md). Light only. ---- */
.lesson{
  --ground:#F5F6F8;--surface:#FFFFFF;--l-line:#E3E6EC;--line-strong:#C9CED8;
  --ink:#14171F;--ink-2:#2B303B;--ink-3:#4A5160;--l-muted:#6B7280;--mark:#FFE45C;
  --accent:#2447D6;--accent-soft:#EEF1FB;--accent-on-soft:#1E3BB8;--accent-ring:#DCE3FA;
  --k:1; /* every size below is the phone's, times this */
  position:fixed;inset:0;z-index:1;flex:none;align-items:stretch;justify-content:flex-start;gap:0;text-align:left;
  background:var(--ground);color:var(--ink);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.3
}
body.in-lesson .top,body.in-lesson #detail{display:none}
.lesson .ic{flex:none;width:calc(20px*var(--k));height:calc(20px*var(--k))}

.l-head{flex:none;display:flex;align-items:center;gap:12px;background:var(--surface);border-bottom:1px solid var(--l-line);
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px}
.l-avatar{flex:none;width:calc(40px*var(--k));height:calc(40px*var(--k));border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:calc(17px*var(--k));font-weight:700}
.l-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.l-name{font-size:calc(17px*var(--k));font-weight:700;line-height:1.2}
.l-topic{font-size:calc(13px*var(--k));color:var(--ink-3);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-round{flex:none;width:calc(44px*var(--k));height:calc(44px*var(--k));border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0}

.l-body{flex:1;min-height:0;display:flex;flex-direction:column}
.stage{flex:none;margin:12px 16px 0;background:var(--surface);border:1px solid var(--l-line);border-radius:24px;padding:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.stage.learner_turn{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stage-label{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:16px;
  background:var(--accent-soft);color:var(--accent-on-soft);font-size:calc(13px*var(--k));font-weight:600}
.stage-label .ic{width:calc(16px*var(--k));height:calc(16px*var(--k))}
.stage.learner_turn .stage-label{background:var(--accent);color:#fff}
.stage.tutor_speaking .ic-mic,.stage.learner_turn .ic-speaker{display:none}
.stage-dots{display:flex;flex-wrap:wrap;gap:10px}
.stage-dots span{width:28px;height:28px;border-radius:50%;background:var(--accent)}
/* font-size comes from hala-view.js; 1.12 is HALA_STAGE_LINE and .12em is HALA_MARK_PAD there. */
.stage-text{align-self:stretch;font-size:46px;font-weight:800;line-height:1.12;letter-spacing:-.02em}
.stage-text .said{border-radius:.17em;padding:0 .12em;margin:0 -.12em;transition:background-color .4s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.stage-text.marking .said{background:var(--mark)}
.stage-text.marking .unsaid{color:var(--l-muted)}
.stage-line{margin:0;font-size:calc(18px*var(--k));color:var(--ink-3);line-height:1.35}
.stage.notice .stage-line{font-size:calc(20px*var(--k));font-weight:600;color:var(--ink)}
.l-retry{height:calc(48px*var(--k));padding:0 calc(24px*var(--k));border-radius:calc(24px*var(--k));
  background:var(--accent);color:#fff;font-size:calc(17px*var(--k));font-weight:700}

/* The chat scrolls. Its first bubble takes the free space above it, so a short chat sits at the
   bottom and a long one can still be scrolled to its start (justify-content:flex-end cannot). */
.chat-box{flex:1;min-height:0;margin-top:6px;position:relative;display:flex;flex-direction:column}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px;overflow-y:auto;overscroll-behavior:contain}
.chat>:first-child{margin-top:auto}
.chat-end{position:absolute;right:16px;bottom:10px;height:calc(36px*var(--k));padding:0 calc(16px*var(--k));border-radius:calc(18px*var(--k));
  background:var(--ink);color:#fff;font-size:calc(14px*var(--k));font-weight:600;box-shadow:0 4px 12px rgba(20,23,31,.25)}
.bubble{flex:none;max-width:82%;border-radius:16px;padding:10px 14px;font-size:calc(17px*var(--k));line-height:1.3;overflow-wrap:anywhere}
.bubble.tutor{align-self:flex-start;background:var(--surface);border:1px solid var(--l-line)}
.bubble.tutor.en{font-weight:600}
.bubble.tutor.vi{color:var(--ink-2);line-height:1.4}
.bubble.learner{align-self:flex-end;background:var(--accent);color:#fff}
.bubble.wave{display:flex;align-items:center;gap:6px;height:calc(52px*var(--k));padding:0 18px}
.bubble.wave span{width:6px;border-radius:3px;background:#fff;transform:scaleY(.8)}
.bubble.wave.live span{animation:hala-wave 1s ease-in-out infinite}
.bubble.wave.live span:nth-child(2n){animation-delay:-.33s}
.bubble.wave.live span:nth-child(3n){animation-delay:-.66s}
.chat .note{flex:none;align-self:center;margin:0;min-height:0;font-size:calc(13px*var(--k));color:var(--ink-3)}

.l-foot{flex:none;display:flex;flex-direction:column;gap:14px;background:var(--surface);border-top:1px solid var(--l-line);
  padding:12px 16px calc(18px + env(safe-area-inset-bottom))}
.help{display:flex;gap:8px}
.help-btn{flex:1;height:calc(44px*var(--k));border-radius:calc(22px*var(--k));border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);font-size:calc(15px*var(--k));font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
.help-btn:active,.l-round:active,.l-retry:active,.sheet-btn:active,.chat-end:active{transform:scale(.97)}
.help-btn:disabled{opacity:.45}
.mic-row{display:flex;align-items:center;gap:22px;padding-left:8px}
.mic{flex:none;width:calc(64px*var(--k));height:calc(64px*var(--k));border-radius:50%;border:2px solid var(--line-strong);color:var(--ink-3);
  display:grid;place-items:center}
.mic .ic{width:calc(28px*var(--k));height:calc(28px*var(--k))}
.mic.listening{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 8px var(--accent-ring);
  animation:hala-ring 1.6s ease-in-out infinite}
.mic.connecting{animation:hala-wait 1.6s ease-in-out infinite}
.mic.ended{border-color:var(--l-line);color:var(--l-muted)}
.mic-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.mic-title{font-size:calc(17px*var(--k));font-weight:700;line-height:1.25}
.mic-sub{font-size:calc(14px*var(--k));color:var(--ink-3);line-height:1.3}

.sheet{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,23,31,.45)}
.sheet-card{width:100%;max-width:520px;background:var(--surface);border-radius:24px 24px 0 0;display:flex;flex-direction:column;gap:12px;
  padding:24px 16px calc(20px + env(safe-area-inset-bottom))}
.sheet-title{margin:0 0 4px;font-size:calc(20px*var(--k));font-weight:700;text-align:center}
.sheet-btn{height:calc(56px*var(--k));border-radius:calc(28px*var(--k));font-size:calc(17px*var(--k));font-weight:700}
.sheet-btn.stay{background:var(--accent);color:#fff}
.sheet-btn.leave{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.lesson button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@keyframes hala-ring{0%,100%{box-shadow:0 0 0 8px var(--accent-ring)}50%{box-shadow:0 0 0 13px rgba(220,227,250,.55)}}
@keyframes hala-wait{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes hala-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

@media (min-width:600px){
  .lesson{--k:1.2}
  .l-head{padding-left:24px;padding-right:24px}
  .stage{margin:16px 24px 0;padding:24px}
  .chat{padding:16px 24px}
  .chat-end{right:24px}
  .l-foot{padding-left:24px;padding-right:24px}
  .stage-dots span{width:40px;height:40px}
}
/* A tablet on its side: the sentence on the left, the talk on the right. */
@media (min-width:900px){
  .l-body{flex-direction:row;gap:24px;padding:24px 28px}
  .stage{flex:3 1 0;min-width:0;min-height:0;margin:0;justify-content:center;overflow:hidden}
  .chat-box{flex:2 1 0;min-width:0;margin-top:0}
  .chat{padding:0}
  .chat-end{right:0;bottom:0}
  .bubble{max-width:100%}
  .l-foot{flex-direction:row-reverse;align-items:center;gap:28px;padding:16px 28px calc(20px + env(safe-area-inset-bottom))}
  .mic-row{flex:1;min-width:0}
  .help-btn{flex:none;padding:0 22px}
}
/* A child's sizes go with the child (learner.kid), on every tablet from 600px, upright or on its
   side. They stand after the layout blocks and name .lesson.kid, so they win over both. */
@media (min-width:600px){
  .lesson.kid .l-head{gap:16px;padding:calc(16px + env(safe-area-inset-top)) 28px 16px}
  .lesson.kid .l-avatar{width:52px;height:52px;font-size:22px}
  .lesson.kid .l-name{font-size:22px}
  .lesson.kid .l-topic{font-size:16px}
  .lesson.kid .l-round{width:52px;height:52px}
  .lesson.kid .l-round .ic{width:22px;height:22px}
  .lesson.kid .stage{border-radius:32px;padding:28px;align-items:center;gap:20px;text-align:center}
  .lesson.kid .stage-label{gap:10px;padding:8px 18px;border-radius:22px;font-size:18px}
  .lesson.kid .stage-label .ic{width:20px;height:20px}
  .lesson.kid .stage-dots{gap:20px;justify-content:center}
  .lesson.kid .stage-dots span{width:64px;height:64px}
  /* The padding keeps the mark, which sticks out .12em past the words, clear of the stage's edge. */
  .lesson.kid .stage-text{letter-spacing:-.03em;padding:0 .12em}
  .lesson.kid .stage-line{font-size:32px}
  .lesson.kid .chat{gap:14px}
  .lesson.kid .bubble{border-radius:22px;padding:14px 20px;font-size:24px;line-height:1.35}
  /* Only a lone English word is large (spec §3). A whole sentence that size would shout over the stage. */
  .lesson.kid .bubble.tutor.en{line-height:1.3}
  .lesson.kid .bubble.tutor.en.word{font-size:30px;font-weight:700;line-height:1.2}
  .lesson.kid .bubble.wave{height:64px;padding:0 22px}
  .lesson.kid .chat .note{font-size:16px}
  .lesson.kid .l-foot{padding:20px 36px calc(24px + env(safe-area-inset-bottom))}
  .lesson.kid .mic-row{gap:28px;padding-left:10px}
  .lesson.kid .mic{width:84px;height:84px}
  .lesson.kid .mic .ic{width:38px;height:38px}
  .lesson.kid .mic.listening{box-shadow:0 0 0 10px var(--accent-ring)}
  .lesson.kid .mic-text{gap:4px}
  .lesson.kid .mic-title{font-size:26px;line-height:1.2}
  .lesson.kid .mic-sub{font-size:20px}
  .lesson.kid .help-btn{height:60px;padding:0 28px;border-radius:30px;font-size:20px;gap:10px}
  .lesson.kid .help-btn .ic{width:24px;height:24px}
  .lesson.kid .l-retry{height:60px;padding:0 32px;border-radius:30px;font-size:20px}
}
/* Upright, the stage is not held by a column: it may take about half the screen, so the fit in
   hala-view.js picks a smaller size before the sentence pushes the chat away. The fit lifts this
   limit when even the smallest size is too tall. */
@media (min-width:600px) and (max-width:899px){
  .lesson.kid .stage{max-height:52vh;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .mic.listening,.mic.connecting,.bubble.wave.live span{animation:none}
  .stage-text .said{transition:none}
}