/* Components from docs/DESIGN.md section 6.
   Rules: tokens only (two named hex exceptions below), hard print shadows only,
   no gradients of our own (halftones come from the --halftone-* tokens).
   Press = translate(2px, 2px) and the shadow shrinks to 2px.
   Focus = the global 3px sky ring from tokens/base.css, except inputs (shadow). */

/* ---------- Helpers ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Icons: inline SVG from site/assets/icons. Size and stroke are set by custom properties. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  stroke-width: var(--icon-sw, 2.25);
  vertical-align: middle;
}
.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* Pinyin: <span class="pinyin" lang="zh"><ruby>字<rt>zì</rt></ruby></span> */
.pinyin {
  font-family: var(--font-cjk);
  font-weight: var(--fw-bold);
  line-height: 1.85;
}
.pinyin ruby {
  ruby-align: center;
  ruby-position: over;
}
.pinyin rt {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: calc(var(--rt-scale, 0.42) * 1em);
  line-height: 1;
  letter-spacing: 0;
  color: var(--rt-color, var(--pinyin));
}

/* ---------- Type ---------- */
.t-eyebrow {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--orange-press);
}
.t-hero {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.t-h2 {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--fw-black);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.t-h3 {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--fw-black);
  line-height: 1.1;
}
.t-lead {
  margin: 0;
  max-width: 34em;
  font-size: var(--text-lead);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.t-small {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--ink-3);
}
/* One emphasised phrase per headline. */
.em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

/* ---------- Button ---------- */
.btn {
  --btn-h: 48px;
  --btn-px: 22px;
  --btn-fs: 18px;
  --btn-gap: 10px;
  --btn-bg: var(--orange);
  --btn-hover: var(--orange-press);
  --btn-fg: var(--white);
  --icon-size: 18px;
  --icon-sw: 2.75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-print);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover {
  background: var(--btn-hover);
  color: var(--btn-fg);
}
.btn:active {
  transform: var(--press-shift);
  box-shadow: var(--shadow-print-sm);
}
.btn--sm {
  --btn-h: 40px;
  --btn-px: 16px;
  --btn-fs: 16px;
  --btn-gap: 8px;
  --icon-size: 16px;
}
.btn--lg {
  --btn-h: 60px;
  --btn-px: 30px;
  --btn-fs: 21px;
  --btn-gap: 12px;
  --icon-size: 22px;
}
.btn--full {
  display: flex;
  width: 100%;
}
.btn--secondary {
  --btn-bg: var(--navy);
  --btn-hover: var(--uniform);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-hover: var(--paper-2);
  --btn-fg: var(--ink);
  box-shadow: none;
}
.btn--ghost:active {
  box-shadow: none;
}
.btn--ghost.btn--onwhite {
  --btn-bg: var(--white);
}
.btn--ondark {
  --btn-bg: var(--yellow);
  --btn-hover: var(--white);
  --btn-fg: var(--ink);
}
.btn--whatsapp {
  --btn-bg: var(--whatsapp);
  --btn-hover: #1ebe5b; /* named in DESIGN.md section 5 */
  --btn-fg: var(--ink);
}
/* Left-aligned label, for the "Want more?" list. */
.btn--left {
  justify-content: flex-start;
  text-align: left;
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[aria-disabled='true']:hover {
  background: var(--btn-bg);
}
.btn:disabled:active,
.btn[aria-disabled='true']:active {
  transform: none;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-chip);
  --icon-size: 14px;
  --icon-sw: 2.75;
}
.badge--level {
  color: var(--white);
  background: var(--navy);
}
.badge--locked {
  color: var(--yellow);
  background: var(--ink);
}
.badge--free {
  color: var(--white);
  background: var(--orange);
}
.badge--new {
  background: var(--yellow);
}
/* .badge with no tone class is the "streak" tone: white, ink text. */

/* ---------- TopBar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 2.5px solid var(--ink);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-h);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.topbar__mark {
  display: inline-flex;
  align-items: center;
  min-height: 48px; /* tap target */
  font-size: 24px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px; /* tap target */
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.topbar__link:hover {
  color: var(--orange-press);
}
.topbar .btn {
  white-space: nowrap;
}
/* Below 480px the wordmark, link and button need about 400px and only 350 fit.
   The "I'm a parent" tile in the hero covers the link, so the link goes. */
@media (max-width: 479px) {
  .topbar__link:not(.topbar__link--day2) {
    display: none;
  }
}

/* ---------- TabletFrame ---------- */
.tablet {
  position: relative;
  max-width: var(--tablet-max, 760px);
  margin: 0 auto;
  padding: 22px 14px;
  background: var(--ink);
  border-radius: 30px;
  box-shadow: var(--shadow-print-lg);
}
.tablet__cam {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #3a3946; /* named in DESIGN.md section 6 */
}
.tablet__screen {
  overflow: hidden;
  background: var(--paper-2);
  border-radius: 10px;
}
.tablet__screen--scroll {
  height: var(--screen-h, min(78vh, 900px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- SpeechBubble ---------- */
.bubble {
  --bubble-bg: var(--white);
  --bubble-border: var(--ink);
  --bubble-fg: var(--ink);
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.bubble__body {
  padding: 8px 16px 10px;
  font-family: var(--font-cjk);
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--bubble-fg);
  background: var(--bubble-bg);
  border: 3px solid var(--bubble-border);
  border-radius: var(--r-bubble);
}
.bubble__speaker {
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.7;
}
.bubble__text-en {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-black);
}
.bubble__tail {
  position: absolute;
  top: calc(100% - 3px);
  left: 28px;
  display: block;
  width: 24px;
  height: 22px;
}
.bubble__tail path {
  fill: var(--bubble-bg);
  stroke: var(--bubble-border);
  stroke-width: 3;
  stroke-linejoin: round;
}
.bubble--tail-right .bubble__tail {
  left: auto;
  right: 28px;
}
.bubble--tail-center .bubble__tail {
  left: 50%;
  margin-left: -12px;
}
.bubble--tail-none .bubble__tail {
  display: none;
}
.bubble--night {
  --bubble-bg: var(--night);
  --bubble-border: var(--lilac);
  --bubble-fg: var(--white);
}
.bubble--shout {
  --bubble-bg: var(--yellow);
}

/* ---------- CaptionBox ---------- */
.caption {
  display: inline-block;
  padding: 4px 12px 6px;
  font-family: var(--font-cjk);
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--white);
  background: var(--ink);
  --rt-color: var(--yellow);
}
.caption--strip {
  color: var(--ink);
  background: var(--strip);
  border: 2px solid var(--ink);
  --rt-color: var(--pinyin);
}

/* ---------- WordCard and WordStrip ---------- */
.word {
  padding: 8px 16px 10px;
  text-align: center;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-card);
}
.word__pinyin {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--pinyin);
}
.word__hanzi {
  font-family: var(--font-cjk);
  font-size: 32px;
  font-weight: var(--fw-black);
  line-height: 1.15;
  color: var(--ink);
}
.word--found {
  background: var(--yellow);
  box-shadow: var(--shadow-print-sm);
}
.word--sm {
  padding: 6px 12px 8px;
}
.word--sm .word__pinyin {
  font-size: 13px;
}
.word--sm .word__hanzi {
  font-size: 24px;
}
.word--lg {
  padding: 10px 20px 12px;
}
.word--lg .word__pinyin {
  font-size: 20px;
}
.word--lg .word__hanzi {
  font-size: 44px;
}
.wordstrip {
  padding: 12px 16px 16px;
  background: var(--strip);
  border: 3px solid var(--ink);
  border-radius: 14px;
}
.wordstrip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
}
.wordstrip__title {
  font-size: 28px;
  font-weight: var(--fw-black);
}
.wordstrip__sub {
  padding-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
.wordstrip__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 10px;
}

/* ---------- ComicPanel ---------- */
.panel {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  border: var(--bw-panel) solid var(--ink);
  border-radius: var(--r-panel);
  aspect-ratio: var(--panel-ratio, auto);
}
.panel > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--panel-pos, center);
}
/* Add .panel--ratio together with --panel-ratio so the image fills the box. */
.panel--ratio > img {
  height: 100%;
}
.panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- ToBeContinued ---------- */
.tbc {
  --tbc-size: 58px;
  --rt-color: var(--white);
  --rt-scale: 0.36;
  text-align: center;
}
.tbc__zh {
  font-family: var(--font-cjk);
  font-size: var(--tbc-size);
  font-weight: var(--fw-black);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--yellow);
  -webkit-text-stroke: max(3px, calc(var(--tbc-size) / 14)) var(--purple-deep);
  paint-order: stroke fill;
}
.tbc__en {
  margin-top: -4px;
  font-size: calc(var(--tbc-size) * 0.38);
  font-weight: var(--fw-black);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.tbc--day2 {
  --tbc-size: 50px;
}

/* ---------- LockedEpisodeCard ---------- */
.locked {
  overflow: hidden;
  color: var(--white);
  background: var(--halftone-night), var(--night);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-print-lg);
}
.locked__media {
  position: relative;
  border-bottom: 3px solid var(--ink);
}
.locked__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.8);
}
.locked__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--ink);
  --icon-size: 16px;
  --icon-sw: 2.75;
}
.locked__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 22px;
  --rt-color: var(--lilac);
}
.locked__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--yellow);
  --icon-size: 16px;
  --icon-sw: 2.75;
}
.locked__title-zh {
  font-size: 30px;
  font-weight: var(--fw-black);
}
.locked__title-en {
  margin-top: 2px;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--lilac);
}
.locked__teaser {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}
.locked__note {
  margin: 0;
  font-size: 16px;
  color: var(--lilac);
}
.locked__cta {
  margin-top: 6px;
}
.locked--unlocked .locked__img {
  filter: none;
}
.locked--unlocked .locked__tag {
  color: var(--ink);
  background: var(--yellow);
}

/* ---------- AudienceSplit ---------- */
.audience {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.tile {
  display: flex;
  flex: 1 1 240px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-print);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.tile:active {
  transform: var(--press-shift);
  box-shadow: var(--shadow-print-sm);
}
.tile--kid {
  background: var(--halftone-yellow), var(--yellow);
}
.tile__img {
  display: block;
  width: 38%;
  object-fit: cover;
  border-right: 3px solid var(--ink);
}
.tile__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  --icon-size: 16px;
  --icon-sw: 2.75;
}
.tile__title {
  font-size: 26px;
  font-weight: var(--fw-black);
  line-height: 1.05;
}
.tile__sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- TextField and SelectField ---------- */
.field {
  display: flex;
  flex-direction: column;
}
.field__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.field__optional {
  font-size: 14px;
  font-weight: var(--fw-regular);
  color: var(--ink-3);
}
.field__input,
.field__select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-chip);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.field__input:hover,
.field__select:hover {
  background: var(--paper-2);
}
.field__input:focus,
.field__input:focus-visible,
.field__select:focus,
.field__select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-print-sm);
}
.field__input::placeholder {
  color: var(--ink-3);
}
.field--error .field__input,
.field--error .field__select {
  border-color: var(--red);
}
.field__hint {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-3);
}
.field__error {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
}
.field__select-wrap {
  position: relative;
}
.field__select {
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
}
.field__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -10px;
  pointer-events: none;
}

/* ---------- Switch (role="switch" aria-checked) ---------- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch__track {
  position: relative;
  width: 56px;
  height: 32px;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease-out);
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 23px;
  height: 23px;
  background: var(--ink);
  border-radius: 50%;
  transition: left var(--dur-base) var(--ease-out);
}
.switch__state {
  min-width: 28px;
  font-size: 14px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.switch[aria-checked='true'] .switch__track {
  background: var(--yellow);
}
.switch[aria-checked='true'] .switch__knob {
  left: 26px;
}

/* ---------- ChoiceGroup (role="radiogroup" with role="radio" buttons) ---------- */
.choices {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}
.choices--row {
  flex-direction: row;
}
.choices--row .choice {
  flex: 1 1 0;
}
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--fw-bold);
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.choice:hover {
  background: var(--paper-2);
}
.choice__dot {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--yellow);
  --icon-size: 14px;
  --icon-sw: 3.5;
}
.choice__dot .icon {
  display: none;
}
.choice[aria-checked='true'] {
  background: var(--yellow);
  box-shadow: var(--shadow-print-sm);
}
.choice[aria-checked='true'] .choice__dot {
  background: var(--ink);
}
.choice[aria-checked='true'] .choice__dot .icon {
  display: block;
}

/* ---------- ReaderProgress (inline, "Page n of N") ---------- */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.progress__track {
  flex: 1;
  height: 10px;
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
}
.progress__fill {
  width: var(--value, 0%);
  height: 100%;
  background: var(--orange);
  transition: width var(--dur-slow) var(--ease-out);
}
.progress__label {
  font-size: 14px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ---------- QuoteCard (render nothing until a real quote exists) ---------- */
.quote {
  margin: 0;
  padding: 18px 22px 20px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-print);
}
.quote__text {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.quote__cap {
  margin-top: 12px;
  font-size: 15px;
}
.quote__cap b {
  font-weight: var(--fw-bold);
}
.quote__role {
  color: var(--ink-3);
}

/* ---------- WhatsAppFab ---------- */
.fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: var(--ink);
  background: var(--whatsapp);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-print);
  --icon-size: 28px;
}
.fab:hover {
  background: #1ebe5b; /* named in DESIGN.md section 5 */
}
.fab:active {
  transform: var(--press-shift);
  box-shadow: var(--shadow-print-sm);
}

/* ---------- Photo (real photos only; no dashed placeholder ships) ---------- */
.photo {
  margin: 0;
}
.photo > img {
  display: block;
  width: 100%;
  aspect-ratio: var(--photo-ratio, 4 / 3);
  object-fit: cover;
  border: 3px solid var(--ink);
}
.photo > figcaption {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-3);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .tile,
  .field__input,
  .field__select,
  .switch__track,
  .switch__knob,
  .choice,
  .progress__fill {
    transition: none;
  }
}