/* TASK-12 H5 page. Tokens and keyframes come from
   docs/design_handoff_h5/README.md and the artboards; nothing here is invented.
   No webfont is fetched from the network: Fraunces is self-hosted next to this
   file, and Georgia is the fallback if it ever fails to load. */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;   /* text shows in Georgia first, never a blank page */
}

:root {
  --paper: #F6F1E7;
  --card: #FFFDF8;
  --line: #E4DCCB;
  --rule: #EDE6D6;
  --ink: #1F2A2E;
  --ink-2: #3A4649;
  --ink-3: #5B6668;
  --teal: #1F5A57;
  --on-teal: #FFFDF8;
  --gold: #E9A23B;
  --gold-deep: #B9791C;
  --alert: #A8452F;
  --mint: #DDEBE4;
  --think: #EFEFE4;
  --grey-paper: #ECE7DC;
  --serif: 'Fraunces', Georgia, serif;
  --pad: 20px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

.serif { font-family: var(--serif); }

/* ---------------------------------------------------------------- screens */
.screen { display: none; }
.screen:not([hidden]) { display: block; }

.page {
  min-height: 100dvh;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    calc(var(--pad) + env(safe-area-inset-right, 0px))
    calc(32px + env(safe-area-inset-bottom, 0px))
    calc(var(--pad) + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
  margin: 0 auto;
}

.center-page { align-items: center; text-align: center; }
.self-start { align-self: flex-start; }

/* ---------------------------------------------------------------- bits */
.stack-4 { display: flex; flex-direction: column; gap: 4px; }
.stack-6 { display: flex; flex-direction: column; gap: 6px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-10 { display: flex; flex-direction: column; gap: 10px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-14 { display: flex; flex-direction: column; gap: 14px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-22 { display: flex; flex-direction: column; gap: 22px; }
.stack-26 { display: flex; flex-direction: column; gap: 26px; }

.muted-13 { font-size: 13px; color: var(--ink-3); }
.muted-14 { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.muted-15 { font-size: 15px; color: var(--ink-3); }
.section-title { margin: 0; font-size: 16px; font-weight: 600; }
.head-title { margin: 0; font-size: 20px; font-weight: 600; }
.card-title { font-size: 17px; font-weight: 600; }
.card-title-15 { font-size: 15px; font-weight: 600; }
.card-title-18 { font-size: 18px; font-weight: 600; }

.home-head { display: flex; flex-direction: column; gap: 6px; }
.home-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: .01em; }

.row-head { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 44px; height: 44px; margin-left: -10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}

.card {
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
}

.notice {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.notice-bad { border-color: var(--alert); color: var(--alert); }
.notice-bad .why { color: var(--ink-3); font-size: 13px; }

/* ---------------------------------------------------------------- buttons */
button { font-family: inherit; }

.btn-primary {
  min-height: 56px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 28px;
  background: var(--teal); color: var(--on-teal);
  font-size: 17px; font-weight: 600; cursor: pointer;
}
.btn-primary[disabled] { opacity: .45; }
.btn-52 { min-height: 52px; border-radius: 26px; font-size: 16px; }

.btn-outline {
  min-height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--teal); border-radius: 26px;
  background: transparent; color: var(--teal); font-size: 16px; cursor: pointer;
}

.btn-ghost {
  min-height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--teal); border-radius: 26px;
  background: transparent; color: var(--teal); font-size: 16px; font-weight: 600; cursor: pointer;
}

.btn-start {
  margin-top: auto; width: 100%; min-height: 72px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 36px;
  background: var(--teal); color: var(--on-teal);
  font-size: 19px; font-weight: 600; cursor: pointer;
}

/* ---------------------------------------------------------------- home list */
.lesson-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px; text-align: left;
  border-radius: 20px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
}
.lesson-card .grow { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lesson-card .name { font-family: var(--serif); font-size: 22px; font-weight: 600; word-break: break-word; }
.go-btn {
  flex: none; min-height: 44px; padding: 0 18px;
  display: flex; align-items: center; border: 0; border-radius: 22px;
  background: var(--gold); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer;
}

/* ---------------------------------------------------------------- upload */
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick-card {
  min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: 18px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 14px; cursor: pointer;
}
.pick-card[aria-pressed="true"] { border: 2px solid var(--teal); }

.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb {
  position: relative; width: 96px; height: 128px;
  border-radius: 12px; overflow: hidden;
  background: var(--rule); border: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .n {
  position: absolute; left: 8px; bottom: 8px; padding: 2px 8px;
  border-radius: 10px; background: var(--ink); color: var(--card); font-size: 12px;
}
.thumb .x {
  position: absolute; right: 4px; top: 4px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 14px; background: rgba(31,42,46,.62); color: #fff; cursor: pointer;
}

textarea, input[type="text"] {
  width: 100%; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 16px; line-height: 1.6;
}
textarea { resize: vertical; min-height: 140px; }

.bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.bar-fill { height: 6px; width: 8%; border-radius: 3px; background: var(--teal); transition: width .4s ease; }

.steps { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.step { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.step .dot {
  width: 18px; height: 18px; flex: none; border-radius: 9px;
  border: 1.5px solid #9AA3A1; background: transparent;
}
.step[data-done="now"] { color: var(--ink); font-weight: 600; }
.step[data-done="now"] .dot { border-color: var(--teal); box-shadow: inset 0 0 0 4px var(--teal); }
.step[data-done="yes"] { color: var(--ink); }
.step[data-done="yes"] .dot { border-color: var(--teal); background: var(--teal); }
.step[data-done="failed"] { color: var(--alert); }
.step[data-done="failed"] .dot { border-color: var(--alert); }

/* ---------------------------------------------------------------- plan */
.plan-title { margin: 0; font-family: var(--serif); font-size: 40px; line-height: 1.1; font-weight: 600; }
.obj-row { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; }
.obj-row .idx { font-family: var(--serif); color: var(--ink-3); width: 14px; flex: none; }

.kp { display: flex; flex-direction: column; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.kp-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 72px; padding: 14px 18px; text-align: left;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  border-radius: 20px;
}
.kp-head .grow { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-head .name { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.kp-head .chev { flex: none; transition: transform .2s ease; }
.kp-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.kp-body { display: none; flex-direction: column; gap: 18px; padding: 0 18px 18px; }
.kp-head[aria-expanded="true"] + .kp-body { display: flex; }

.kp-know { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #F1F5F2; }
.kp-know .label { font-size: 12px; color: #3F5B57; font-weight: 600; }
.kp-know li { font-size: 14px; line-height: 1.6; }
.kp-know ul { margin: 0; padding-left: 18px; }

.q-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.q-row { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--rule); }
.q-row:last-child { border-bottom: 0; }
.q-row .rung { width: 60px; flex: none; font-size: 12px; color: var(--ink-3); }
.q-row .q { flex: 1 1 auto; font-family: var(--serif); font-size: 16px; line-height: 1.35; }

.hint-row { display: flex; align-items: flex-start; gap: 12px; }
.hint-row .n {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-family: var(--serif); font-size: 13px;
}
.hint-row:nth-child(2) .n { background: #F6E3BF; }
.hint-row:nth-child(3) .n { background: #F0CE8C; }
.hint-row:nth-child(4) .n { background: var(--gold); }
.hint-row .h { flex: 1 1 auto; font-family: var(--serif); font-size: 16px; line-height: 1.4; }

.plan-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.plan-foot .btn-primary { min-height: 60px; border-radius: 30px; }
.plan-foot .hint { text-align: center; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- ready */
.ready-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.ready-title { margin: 0; font-size: 34px; font-weight: 600; }
.mascot-small svg { width: min(240px, 62vw); height: auto; }
.mascot-happy svg { width: min(300px, 78vw); height: auto; }
.check-card { width: 100%; padding: 6px 18px; text-align: left; }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; }
.check-icon {
  width: 18px; height: 18px; flex: none; border-radius: 9px;
  border: 1.5px solid #9AA3A1;
}
.check-icon.ok { border-color: var(--teal); background: var(--teal); }
.check-icon.warn { border-color: var(--gold-deep); background: var(--gold); }
.check-icon.bad { border-color: var(--alert); background: var(--alert); }
.ready-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* ---------------------------------------------------------------- live */
.live {
  position: relative;
  min-height: 100dvh;
  padding:
    calc(20px + env(safe-area-inset-top, 0px))
    calc(var(--pad) + env(safe-area-inset-right, 0px))
    calc(36px + env(safe-area-inset-bottom, 0px))
    calc(var(--pad) + env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  background: var(--paper);
  transition: background-color .4s ease;
}
#screen-live[data-state="listening"] .live,
#screen-live[data-state="your_turn"] .live { background: var(--mint); }
#screen-live[data-state="thinking"] .live { background: var(--think); }
#screen-live[data-state="offline"] .live { background: var(--grey-paper); }

.exit-btn {
  position: relative; align-self: flex-start;
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px; border: 1.5px solid rgba(31,42,46,.22);
  background: transparent; color: rgba(31,42,46,.45); cursor: pointer;
}
.exit-ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.exit-ring circle { stroke-dasharray: 100; stroke-dashoffset: 100; }

.mascot-wrap { margin-top: clamp(24px, 10vh, 96px); }
.mascot-wrap svg { width: min(340px, 88vw); height: auto; }

.live-foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.mic-holder { position: relative; width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; }
.mic-breathe { display: none; position: absolute; left: 8px; top: 8px; width: 112px; height: 112px; border-radius: 56px; background: var(--teal); animation: breathe 1.8s ease-out infinite; }
.mic-core {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 36px; border: 1.5px solid rgba(31,42,46,.18); color: rgba(31,42,46,.3);
  background: transparent;
  transition: width .25s ease, height .25s ease, background-color .25s ease, color .25s ease;
}
.mic-core svg { width: 30px; height: 30px; }
#screen-live[data-state="listening"] .mic-breathe,
#screen-live[data-state="your_turn"] .mic-breathe { display: block; }
#screen-live[data-state="listening"] .mic-core,
#screen-live[data-state="your_turn"] .mic-core {
  position: relative; width: 112px; height: 112px; border-radius: 56px;
  background: var(--teal); color: var(--on-teal); border-color: transparent;
}
#screen-live[data-state="listening"] .mic-core svg,
#screen-live[data-state="your_turn"] .mic-core svg { width: 48px; height: 48px; }
#screen-live[data-state="offline"] .mic-holder { display: none; }

.offline-card { width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left; }

.end-card { width: 100%; margin-top: auto; text-align: left; border-radius: 24px; padding: 20px 18px; }

/* ---------------------------------------------------------------- 报告 06
   Tokens and shapes from docs/design_handoff_h5/artboards/Report.dc.html.
   The artboard's 「没听清的部分」 block and its legend entry are deliberately
   not implemented: this page is about the child, never about the software. */
.report-head { display: flex; flex-direction: column; gap: 10px; }
.report-title { margin: 0; font-family: var(--serif); font-size: 40px; line-height: 1.1; font-weight: 600; word-break: break-word; }
.report-sub { font-size: 14px; color: var(--ink-3); }
.report-summary { font-size: 16px; line-height: 1.7; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 16px 6px 12px;
  border-radius: 20px; background: var(--card); border: 1px solid var(--line);
  font-size: 15px; line-height: 1.4; text-align: left;
}
.chip .mark { flex: none; }

.kp-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.kp-card .head { display: flex; align-items: center; gap: 10px; }
.kp-card .head .name { font-size: 18px; font-weight: 600; line-height: 1.35; }
.kp-card .said { font-size: 15px; line-height: 1.65; }
.evi { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.talk { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.talk .line { display: flex; align-items: flex-end; gap: 6px; }
.talk .line.tutor { justify-content: flex-start; }
.talk .line.child { justify-content: flex-end; }
.bubble { max-width: 74%; padding: 10px 14px; }
.line.tutor .bubble { border-radius: 16px 16px 16px 4px; background: #F1ECE0; }
.line.child .bubble { border-radius: 16px 16px 4px 16px; background: var(--mint); }
.bubble.en { font-family: var(--serif); }
/* a described question, not a quoted one: no bubble, so it never reads as speech */
.talk .line.note { justify-content: flex-start; }
.talk .aside {
  max-width: 100%; padding: 2px 0;
  font-size: 14px; font-style: italic; line-height: 1.6; color: var(--ink-3);
}
.play-btn {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--teal); cursor: pointer;
}
.play-btn[data-playing="1"] { opacity: .45; }

.facts { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.facts .label { font-size: 13px; color: var(--ink-3); }
.facts .en-list { font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.facts .rule { height: 1px; background: var(--rule); }
.fix-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--serif); font-size: 17px; }
.fix-row .was { color: var(--ink-3); }
.fix-row .now { font-weight: 600; }

.next-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; border-radius: 20px; background: var(--teal); color: var(--on-teal); }
.next-card .who { font-size: 13px; color: #CFE3DD; }
.next-card .what { font-size: 16px; line-height: 1.6; }

.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; font-size: 13px; color: var(--ink-2); }
.legend .item { display: flex; align-items: center; gap: 8px; }

.history-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; text-align: left;
  border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
}
.history-row .grow { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.history-row .name { font-size: 16px; font-weight: 600; }
.history-row .tag { flex: none; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- keyframes
   copied verbatim from the artboards' <helmet><style> block */
@keyframes talk { 0% { transform: scaleY(.3) } 100% { transform: scaleY(1) } }
@keyframes bob { 0% { transform: translateY(0) } 100% { transform: translateY(-6px) } }
@keyframes wave { 0%, 100% { opacity: .15 } 50% { opacity: .9 } }
@keyframes hear { 0% { transform: scale(1.6); opacity: 0 } 40% { opacity: .4 } 100% { transform: scale(1); opacity: 0 } }
@keyframes breathe { 0% { transform: scale(1); opacity: .35 } 100% { transform: scale(1.35); opacity: 0 } }
@keyframes ponder { 0%, 60%, 100% { transform: translateY(0); opacity: .35 } 30% { transform: translateY(-10px); opacity: 1 } }
@keyframes sway { 0% { transform: rotate(-2deg) } 100% { transform: rotate(2deg) } }
@keyframes drift { 0% { transform: translateY(0) } 100% { transform: translateY(-14px) } }
@keyframes doze { 0%, 100% { opacity: .25 } 50% { opacity: .8 } }
@keyframes reading { 0% { transform: translateX(-100%) } 100% { transform: translateX(260%) } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* iPad and anything wider: the design is a phone layout, just do not stretch it */
@media (min-width: 700px) {
  .live { max-width: 560px; margin: 0 auto; }
}

/* ------------------------------------------------------------------ 弹层
   Only shown when the server refuses to start a lesson (too many at once).
   Same tokens as .card. Not alert(): on iOS that blocks the audio context. */
.modal-back {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  background: rgba(31, 42, 46, .45);
}
.modal-back[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 340px;
  padding: 22px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
}