/* ting — "practice paper".
 * Cool green-white paper, jade for action, cinnabar only for the goal seal
 * and "Again". Display hanzi in kaiti; the tapped word sits in 田字格 cells.
 * See docs/superpowers/specs/2026-10-19-reskin-design.md.
 */
:root {
  --bg: #f6f8f6;
  --panel: #e9eeea;
  --surface: #ffffff;
  --ink: #17201c;
  --muted: #8d9792;
  --muted-dark: #5d6863;
  --accent: #127a63;
  --accent-ink: #0d5f4d;
  --accent-soft: #dcefe7;
  --seal: #c9402c;
  --seal-soft: #fbe6e1;
  --grid: #9cc9b6;
  --line: #dde4df;
  --r-chip: 8px;
  --r-ctl: 12px;
  --r-sheet: 20px;
  --radius: var(--r-sheet);
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "AR PL UKai CN", "Noto Serif CJK SC",
         "Source Han Serif SC", serif;

  /* familiarity, warm (unknown) -> cool (known) */
  --lv-ignored: #a3aba7;
  --lv-new: #d9573b;
  --lv-recognised: #e09a2b;
  --lv-familiar: #8fa33a;
  --lv-known: #3f8f9c;
  --lv-learned: #127a63;

}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, system-ui, "Inter", "Noto Sans SC", "PingFang SC", sans-serif;
  display: flex; flex-direction: column;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#sprite { display: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---- daily goal ---- */
#goal {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}
/* The seal: 听 in a square chop, outlined until the day's goal is met. */
#goal-trophy {
  width: 34px; height: 34px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--seal); color: var(--seal);
  font: 400 21px/1 var(--kai); display: grid; place-items: center;
  transition: background .25s, color .25s;
}
#goal-trophy.hit { background: var(--seal); color: #fff; }
#goal-track {
  flex: 1; height: 4px; border-radius: 2px; background: var(--line); position: relative;
}
#goal-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; min-width: 4px;
  border-radius: 2px; background: var(--accent); transition: width .5s ease;
}
#goal-label {
  font-size: 13px; font-weight: 600; color: var(--muted-dark);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---- stage ---- */
#stage { flex: none; background: #000; }
#clip-meta {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff;
}
#meta-thumb {
  width: 36px; height: 36px; border-radius: var(--r-chip); flex: none;
  object-fit: cover; background: #222;
}
#meta-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
#meta-title {
  font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#meta-channel {
  font-size: 13px; font-style: normal; color: #a9b3ae;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#flag { color: #fff; font-size: 22px; padding: 4px; opacity: .9; }
#flag.on { color: var(--seal); }
#player-wrap { position: relative; width: 100%; aspect-ratio: 16/9; }
#player, #player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Tap-to-play overlay. Most mobile browsers block autoplay with sound, so a
   freshly loaded clip sits paused behind this; one tap starts it. It hides
   once the player is actually playing (see onStateChange in app.js). */
#play-hint {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(10,10,14,.32); color: #fff; font-size: 58px;
}
#play-hint[hidden] { display: none; }
#play-hint svg { width: 58px; height: 58px; stroke-width: 1.6; }
#play-hint:active { transform: scale(.96); }
#clip-progress { height: 2px; background: rgba(255,255,255,.16); }
#clip-progress i { display: block; height: 100%; width: 0; background: #5fd0a8; }

/* ---- captions ---- */
#captions { flex: 1; overflow: hidden; }
#transcript { height: 100%; overflow-y: auto; padding: 12px 16px 120px;
              scroll-behavior: smooth; }
#transcript::-webkit-scrollbar { width: 0; }
/* The active line is marked by a jade rule down its left edge, the way a
   finger follows a line on the page; the others recede but stay legible. */
.tline { padding: 10px 10px 10px 14px; opacity: .5; cursor: pointer;
         border-left: 3px solid transparent;
         transition: opacity .2s, border-color .2s; }
.tline.on { opacity: 1; border-left-color: var(--accent); }
.tline .en { font: 400 14px/1.45 system-ui; color: var(--muted-dark); margin-top: 8px; }
.tline.on .en { color: var(--ink); }
.strip {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 2px;
}
/* Words sit inline like ruby text: pinyin above, hanzi below. Colour on a
   word means one thing only -- how well you know it -- and is the same
   colour as that level's badge. Untracked, ignored (0) and learned (5)
   words carry no mark. Part of speech is text in the word card. */
.word {
  display: grid; gap: 1px; justify-items: center; text-align: center;
  padding: 2px 2px 0; border-radius: var(--r-chip);
}
.word .py { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.word .hz {
  font-size: 25px; line-height: 1.15; font-weight: 400;
  border-bottom: 3px solid var(--lv, transparent);
  padding: 1px 2px 2px;
}
/* Latin tokens (MBTI, brand names) have no pinyin. Keep the empty row so
   every word still sits on the same baseline in a flex-end strip. */
.word .py:empty::after { content: "\00a0"; }
.word.punct { pointer-events: none; padding-inline: 0; }
.word.k-new        { --lv: var(--lv-new); }
.word.k-recognised { --lv: var(--lv-recognised); }
.word.k-familiar   { --lv: var(--lv-familiar); }
.word.k-known      { --lv: var(--lv-known); }
.word.active { background: var(--accent-soft); }
.word.active .py { color: var(--accent-ink); }

/* ---- tap card: a bottom sheet ---- */
#card-back {
  position: fixed; inset: 0; z-index: 30; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(14,24,20,.32);
}
#card-back[hidden] { display: none; }
#card {
  width: 100%; max-width: 520px; background: var(--surface); color: var(--ink);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 10px 20px max(18px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(14,24,20,.18);
  animation: rise .2s ease-out;
  /* A long definition or the "uses" pane can outgrow a phone screen; cap the
     sheet and scroll inside instead of clipping it. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
#card::before {
  content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 14px;
  border-radius: 2px; background: var(--line);
}
@keyframes rise { from { transform: translateY(24px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  #card { animation: none; }
  #goal-fill, #goal-trophy { transition: none; }
}
#card-head { display: flex; align-items: center; gap: 14px; }
/* 田字格: each character in a practice-paper cell, the outer square solid,
   the cross-hairs dashed, exactly as on a learner's exercise sheet. */
#card-hz { display: flex; flex-wrap: wrap; gap: 4px; font: 400 40px/1 var(--kai); }
#card-hz i {
  position: relative; font-style: normal; width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 1.5px solid var(--grid); background: #fbfdfc;
}
#card-hz i::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 4px, transparent 4px 8px) center / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, var(--grid) 0 4px, transparent 4px 8px) center / 1px 100% no-repeat;
}
#card-hz i span { position: relative; }
#card-py { font-size: 20px; color: var(--muted-dark); flex: 1; }
#card-head .lvl { align-self: flex-start; flex: none; }
#card-sub { display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; }
#card-pos {
  margin-right: auto; font-size: 13px; color: var(--muted-dark);
  background: var(--panel); border-radius: var(--r-chip); padding: 4px 10px; justify-self: start;
}
#card-pos:empty { display: none; }
.ghost { font-size: 23px; color: var(--muted); padding: 2px; }
.ghost.on { color: var(--accent); }
#card-tabs {
  display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ctab {
  width: 44px; height: 40px; border-radius: var(--r-ctl); font-size: 21px;
  color: var(--muted); display: grid; place-items: center;
}
.ctab.on { background: var(--accent-soft); color: var(--accent); }
#card-body {
  background: var(--panel); border-radius: var(--r-ctl); padding: 14px;
  margin-top: 14px; font-size: 16px; line-height: 1.45;
}
.sense { display: flex; gap: 10px; align-items: baseline; }
.sense .n { color: var(--muted); font-size: 14px; }
#card-body .use { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); }
#card-body .use:last-child { border-bottom: 0; }
#card-body .use em { display: block; font-style: normal; color: var(--muted); font-size: 14px; }
.none { color: var(--muted); font-size: 15px; }
#dots { display: flex; gap: 7px; justify-content: center; padding-top: 14px; }
#dots:empty { padding: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); padding: 0; }
.dot.on { background: var(--accent); }

/* ---- nav: docked, hairline above, active tab marked by a bar ---- */
#nav {
  flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0 8px max(6px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.tab {
  position: relative; display: grid; gap: 2px; justify-items: center;
  padding: 9px 0 4px; font-size: 11px; font-weight: 600; color: var(--muted);
}
.tab::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px;
  margin-left: -14px; border-radius: 0 0 3px 3px; background: transparent;
}
.tab .ic { font-size: 23px; height: 26px; display: grid; place-items: center; }
.tab.on { color: var(--accent); }
.tab.on::before { background: var(--accent); }
.badge[hidden] { display: none; }
.badge {
  position: absolute; top: 4px; left: calc(50% + 6px); background: var(--seal); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 5px;
}

/* ---- other views ---- */
.view { display: none; }
.view.on { display: block; }
#feed.on { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#vocab.on, #profile.on, #settings.on {
  flex: 1; overflow-y: auto; padding: 4px 18px 16px;
}
/* Clear the floating nav: without this the last row of Settings sits
   underneath Delete account's own neighbour and cannot be tapped. */
#profile.on, #settings.on { padding-bottom: 120px; }
h2 { font-size: 24px; letter-spacing: -.015em; margin: 8px 0 16px; }
#vocab-head { padding: 18px 20px 8px; }
#vocab-head b { display: block; font: 700 48px/1 system-ui; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
#vocab-head span { font: 500 14px system-ui; color: var(--muted-dark); display: block; margin-top: 4px; }
.vocab-day { font: 600 12px system-ui; color: var(--muted);
             padding: 16px 20px 6px; }
.vocab-row { display: flex; align-items: center; gap: 14px;
             padding: 10px 20px; border-bottom: 1px solid var(--line); }
.vocab-row .meta { flex: 1; min-width: 0; }
.vocab-row .hz { font: 400 21px/1.2 var(--kai); }
.vocab-row .py { font: 400 12px system-ui; color: var(--muted); }
.vocab-row .df { font: 400 13px system-ui; color: var(--muted-dark);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vocab-row button { background: none; border: 0; }
.vocab-row button svg { width: 20px; height: 20px; stroke: var(--muted);
                        fill: none; stroke-width: 1.8; }
.empty { color: var(--muted); text-align: center; padding: 48px 20px; line-height: 1.6; font-size: 15px; }

/* ---------- profile ---------- */
#pf-top { display: flex; justify-content: flex-end;
          padding: max(6px, env(safe-area-inset-top)) 0 0; }
#pf-settings { width: 40px; height: 40px; display: grid; place-items: center;
               color: var(--muted-dark); font-size: 22px; }
#pf-id { display: grid; justify-items: center; gap: 10px; padding: 4px 0 22px; }
#pf-avatar {
  width: 76px; height: 76px; border-radius: var(--r-sheet);
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font: 700 34px/1 system-ui;
}
#pf-name { font-size: 21px; letter-spacing: -.02em; }

#pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.pf-tile { display: grid; justify-items: center; gap: 3px; padding: 4px 0 18px; }
.pf-tile + .pf-tile { border-left: 1px solid var(--line); }
.pf-tile b { font: 700 27px/1.1 system-ui; letter-spacing: -.02em; }
.pf-glyph { font-size: 17px; }
.pf-label { font-size: 12px; color: var(--muted); }

#pf-cards { display: grid; gap: 10px; padding-top: 6px; }
.pf-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 10px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: var(--r-ctl); background: var(--surface);
  border: 1px solid var(--line);
}
.pf-card b { font-size: 16px; }
.pf-card .pf-hint { grid-column: 1; font-size: 13px; color: var(--muted-dark); }
.pf-card svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px;
               color: var(--muted); }

/* ---------- settings ---------- */
#set-top { display: flex; align-items: center; gap: 10px;
           padding: max(6px, env(safe-area-inset-top)) 0 10px; }
#set-back { width: 36px; height: 36px; display: grid; place-items: center;
            border-radius: 50%; background: var(--panel); font-size: 20px; }
#set-top b { font-size: 20px; letter-spacing: -.02em; }
.set-h { font-size: 17px; margin: 22px 0 4px; letter-spacing: -.01em; }
.set-row { display: flex; align-items: center; gap: 16px;
           padding: 14px 0; border-bottom: 1px solid var(--line); }
.set-row.stack { flex-wrap: wrap; }
.set-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.set-text b { font-size: 16px; font-weight: 500; }
.set-hint { font-size: 13px; color: var(--muted-dark); line-height: 1.35; }

/* switch */
.sw { width: 50px; height: 30px; flex: none; border-radius: 99px;
      background: #ccd5d0; position: relative; transition: background .18s; }
.sw.on { background: var(--accent); }
.sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
        border-radius: 50%; background: #fff; transition: transform .18s;
        box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sw.on i { transform: translateX(20px); }

/* segmented control */
.seg { display: flex; width: 100%; gap: 6px; }
.seg-b { flex: 1; padding: 9px 0; border-radius: var(--r-ctl); background: var(--panel);
         font-size: 14px; color: var(--muted-dark); }
.seg-b.on { background: var(--accent); color: #fff; font-weight: 600; }

.slider { width: 100%; accent-color: var(--accent); margin: 2px 0 0; height: 26px; }

#account-actions { display: grid; gap: 10px; padding-top: 4px; }
#reset { padding: 12px 18px; border-radius: var(--r-ctl); background: var(--panel); font-size: 15px; }

/* ---------- familiarity ---------- */
.lvl { width: 28px; height: 28px; border-radius: 50%; border: 0;
       display: grid; place-items: center; font: 600 13px/1 system-ui;
       color: #fff; background: var(--lv-ignored); }
.lvl svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.4; }
.lvl.untracked { background: none; color: var(--muted); border: 1.5px dashed var(--lv-ignored); }
.lvl.ignored    { background: var(--lv-ignored); }
.lvl.new        { background: var(--lv-new); }
.lvl.recognised { background: var(--lv-recognised); }
.lvl.familiar   { background: var(--lv-familiar); }
.lvl.known      { background: var(--lv-known); }
.lvl.learned    { background: var(--lv-learned); }

#level-menu { position: absolute; right: 18px; bottom: 90px; z-index: 30;
              background: var(--surface); border-radius: var(--r-ctl); padding: 6px;
              box-shadow: 0 12px 40px rgba(14,24,20,.22); min-width: 210px; }
.lvl-row { display: flex; align-items: center; gap: 12px; width: 100%;
           padding: 9px 10px; border: 0; background: none; border-radius: 10px;
           font: 500 15px system-ui; color: var(--ink); text-align: left; }
.lvl-row.on { color: var(--accent); font-weight: 700; }
.lvl-row:hover { background: var(--bg); }
.lvl-row.your-words { border-top: 1px solid var(--line); margin-top: 4px; }
.lvl-row .chev { width: 16px; height: 16px; margin-left: auto;
                 stroke: var(--muted); fill: none; stroke-width: 2; }
.lvl-row .ic svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; }

#controls { display: flex; align-items: center; gap: 18px;
            padding: 8px 16px; background: #000; color: #d8dade; }
#time { font: 500 12px/1 ui-monospace, monospace; color: var(--muted); margin-right: auto; }
#controls button { background: none; border: 0; color: #d8dade;
                   font: 600 13px system-ui; padding: 4px; }
#controls button svg { width: 20px; height: 20px; stroke: currentColor;
                       fill: none; stroke-width: 1.8; }
#controls button.on { color: #5fd0a8; }
#controls button.on svg { fill: currentColor; }

/* ---------- Your Words panel ---------- */
#words-panel { padding: 6px 20px 4px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 12px 6px;
  display: grid; justify-items: center; gap: 2px;
}
.tile b { font: 700 20px/1 system-ui; }
.tile span { font: 500 11px system-ui; color: var(--muted-dark); }

.lvl-bar-wrap { margin: 18px 0 10px; }
.lvl-bar-label { font: 600 11px system-ui; color: var(--muted); margin-bottom: 6px; }
.lvl-bar {
  display: flex; height: 8px; border-radius: 2px; overflow: hidden; gap: 2px;
  background: var(--panel);
}
.lvl-bar i { display: block; height: 100%; }
.lvl-bar i.new        { background: var(--lv-new); }
.lvl-bar i.recognised { background: var(--lv-recognised); }
.lvl-bar i.familiar   { background: var(--lv-familiar); }
.lvl-bar i.known      { background: var(--lv-known); }
.lvl-bar i.learned    { background: var(--lv-learned); }
.lvl-bar i.ignored    { background: var(--lv-ignored); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px;
               font: 500 11px system-ui; color: var(--muted-dark); }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.legend .dot.new        { background: var(--lv-new); }
.legend .dot.recognised { background: var(--lv-recognised); }
.legend .dot.familiar   { background: var(--lv-familiar); }
.legend .dot.known      { background: var(--lv-known); }
.legend .dot.learned    { background: var(--lv-learned); }
.legend .dot.ignored    { background: var(--lv-ignored); }

.actions { display: grid; gap: 10px; }
.cta {
  width: 100%; padding: 15px; border-radius: var(--r-ctl); background: var(--accent);
  color: #fff; font: 700 16px system-ui; display: grid; gap: 2px; justify-items: center;
}
.cta.off { background: var(--panel); color: var(--muted-dark); }
.cta small { font: 400 11px system-ui; opacity: .8; }
.ghost-btn {
  width: 100%; padding: 13px; border-radius: var(--r-ctl); background: var(--panel);
  font: 600 15px system-ui;
}
.ghost-btn:disabled { opacity: .45; }

#vocab-search-wrap {
  display: flex; align-items: center; gap: 8px; margin: 16px 20px 4px;
  padding: 9px 13px; border-radius: var(--r-ctl); background: var(--panel);
}
#vocab-search-wrap svg { width: 17px; height: 17px; stroke: var(--muted); flex: none; }
#vocab-search {
  flex: 1; border: 0; background: none; font: 400 15px system-ui; color: var(--ink);
  outline: none; min-width: 0;
}

/* ---------- review session ---------- */
#review[hidden] { display: none; }
#review {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
}
#rv-top { display: flex; align-items: center; gap: 12px; position: relative; padding: 6px 2px 14px; }
#rv-top button { color: var(--muted-dark); font-size: 21px; display: grid; place-items: center; }
#rv-track { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
#rv-fill { display: block; height: 100%; width: 0; border-radius: 2px;
           background: var(--accent); transition: width .3s ease; }
#rv-count { font: 600 12px system-ui; color: var(--muted-dark); min-width: 34px; text-align: right; }
#rv-menu-pop { position: absolute; top: 40px; right: 0; z-index: 5; background: var(--surface);
               border-radius: 14px; padding: 6px; min-width: 190px;
               box-shadow: 0 12px 40px rgba(0,0,0,.22); }
#rv-menu-pop[hidden] { display: none; }

#rv-card {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 18px;
}
.rv-front { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; }
.rv-hz { font: 400 52px/1.2 var(--kai); letter-spacing: .04em; }
.rv-hint { font: 400 14px system-ui; color: var(--muted); }
.rv-back { display: grid; gap: 4px; }
.rv-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rv-say { color: var(--muted-dark); font-size: 20px; }
.rv-py { text-align: center; font: 400 16px system-ui; color: var(--muted-dark); }
.rv-pills { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 14px; }
.rv-pills .pill { background: var(--panel); color: var(--muted-dark); border-radius: 99px;
                  padding: 3px 10px; font: 600 11px system-ui; }
.rv-label { font: 600 11px system-ui; color: var(--muted); margin-top: 12px; }
.rv-defs { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
.rv-defs .sense { display: flex; gap: 10px; padding: 3px 0; font: 400 15px/1.45 system-ui; }
.rv-defs .sense .n { color: var(--muted); font-size: 12px; padding-top: 3px; }
.rv-defs .none { color: var(--muted); font-size: 14px; }

.rv-ctx { background: var(--panel); border-radius: 12px; overflow: hidden; margin-top: 6px; cursor: pointer; }
.rv-shot { position: relative; aspect-ratio: 16 / 9; background: #000; }
.rv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 30px;
  display: grid; place-items: center;
}
.rv-line { display: flex; align-items: center; gap: 10px; width: 100%;
           padding: 12px 14px 4px; text-align: left; }
.rv-line .zh { flex: 1; font: 500 16px/1.5 system-ui; }
.rv-line .zh .hit { color: var(--accent); font-weight: 700; }
.rv-line .chev { color: var(--muted); font-size: 17px; display: grid; place-items: center; }
.rv-en { padding: 0 14px 12px; font: 400 13px/1.5 system-ui; color: var(--muted-dark); }

#rv-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; }
#rv-answers[hidden] { display: none; }
#rv-answers button { border-radius: var(--r-ctl); padding: 13px; display: grid; gap: 1px; justify-items: center; }
#rv-answers b { font: 700 16px system-ui; }
#rv-answers small { font: 500 11px system-ui; opacity: .85; }
#rv-again { background: var(--seal-soft); color: var(--seal); }
#rv-good  { background: var(--accent); color: #fff; }
#rv-done { display: grid; gap: 14px; justify-items: center; padding: 28px 0 12px; }
#rv-done[hidden] { display: none; }
#rv-done b { font: 700 19px system-ui; }
#rv-done button { padding: 12px 20px; border-radius: var(--r-ctl); background: var(--panel); font: 600 15px system-ui; }

/* ---------- sign in ---------- */

/* Covers everything, including the goal header and the tab bar: there is no
 * app to look at until there is a user, and a half-visible feed behind the
 * form invites tapping at it. */
#auth {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: var(--bg);
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 24px
           max(24px, env(safe-area-inset-bottom));
}
/* margin:auto on the box, not align-items:center: centred flex content that
   is taller than the screen (a short phone, or the keyboard up) overflows
   upward past the scroll origin and the top can never be scrolled back to. */
#auth.on { display: flex; }
#auth.busy { opacity: .7; pointer-events: none; }

#auth-box { width: 100%; max-width: 380px; margin: auto; }

#auth-mark {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 10px;
  background: var(--seal); color: #fff; font: 400 40px/1 var(--kai);
  display: grid; place-items: center;
}
#auth-title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -.02em;
}
#auth-sub {
  margin: 0 0 36px;
  text-align: center;
  color: var(--muted-dark);
  font-size: 15px;
}

.auth-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
}
.auth-field:focus-within { border-color: var(--accent); }
.auth-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  /* 16px minimum: anything smaller makes iOS Safari zoom the whole page on
     focus, and the layout never recovers. */
  font-size: 16px;
  color: var(--ink);
  padding: 17px 0;
}
#auth-show {
  border: 0;
  background: none;
  color: var(--muted-dark);
  font-size: 15px;
  padding: 8px;
  cursor: pointer;
}

#auth-error {
  display: none;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fdeaea;
  color: #b42318;
  font-size: 14px;
}
#auth-error.on { display: block; }

.auth-cta {
  width: 100%;
  padding: 17px;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.auth-cta:disabled { opacity: .6; cursor: default; }

#auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  color: var(--muted);
  font-size: 14px;
}
#auth-or::before, #auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-provider {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.auth-provider.apple { background: #000; border-color: #000; color: #fff; }
.auth-provider:disabled { opacity: .45; cursor: default; }

#auth-legal, #set-legal {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 28px 0 0;
  font-size: 14px;
}
#auth-legal a, #set-legal a { color: var(--muted-dark); }
#set-legal { margin: 20px 0 32px; }

#auth-swap {
  margin: 20px 0 0;
  text-align: center;
  color: var(--muted-dark);
  font-size: 15px;
}
#auth-swap-btn {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  z-index: 50;
  max-width: calc(100vw - 48px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(23, 32, 28, .92);
  color: #fff;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

#signout {
  display: block;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--muted-dark);
  font-size: 15px;
  cursor: pointer;
}

/* Destructive, and it sits next to Sign out. It should not look like a
   neighbour you can tap by accident. */
#delete-account {
  display: block;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid #f3c9c4;
  border-radius: 12px;
  background: none;
  color: #b42318;
  font-size: 15px;
  cursor: pointer;
}


/* ---------- display settings ---------- */
/* Toggles are pure CSS: the markup always carries pinyin and the English
   line, so hiding them cannot desynchronise anything. */
body.no-pinyin .word .py { display: none; }
body.no-en .tline .en { display: none; }
/* Card size is width, not type size: the card's own type is a deliberate
   scale, and scaling it wholesale makes the pinyin unreadable before the
   card gets meaningfully smaller. */
body.card-s #card { max-width: 340px; }
body.card-l #card { max-width: 100%; }