/* 英雄故事书 (spec §43.9–§43.12): the 故事书 card on 我的英雄, the story book (#/heroes/stories), the reader
   (#/heroes/story) with its read-aloud bar, the hero wall's book mark, 「听我的故事」 in the big picture,
   「听英雄的故事」 on the unlock show's end card, and the parents' 「故事里的名字」. Tokens only (light and dark
   come from tokens.css and heroes.css). §12: the chapter cards are one class on one grid with equal rows; the
   bar's two buttons, the end's two buttons and the picture's two buttons are equal halves. Phone < 600px,
   iPad portrait 600–899px, iPad landscape ≥ 900px. */

/* ======================= 我的英雄: the 故事书 card ======================= */
.st-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 76px;
  margin-top: var(--gap);
  padding: 0 14px 0 var(--card-pad);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out);
}
.st-entry:active { transform: scale(0.98); }
.st-entry-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: var(--cta-text);
  background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2));
}
.st-entry-icon svg { width: 60%; height: 60%; }
.st-entry-main { display: grid; gap: 2px; min-width: 0; }
.st-entry-title { font-size: 20px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-entry-line { font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-entry-go { display: grid; place-items: center; width: 28px; color: var(--text-3); }
.st-entry-go svg { width: 22px; height: 22px; }
/* 「新故事」: a pill on the card's top right edge (its height does not change). */
.st-entry-new {
  position: absolute;
  top: -9px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--cta-text);
  background: linear-gradient(135deg, var(--cta-1), var(--hr-gold));
  box-shadow: var(--shadow-1);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
@media (min-width: 600px) {
  .st-entry { height: 88px; gap: 16px; padding: 0 18px 0 20px; }
  .st-entry-icon { width: 56px; height: 56px; border-radius: 17px; }
  .st-entry-title { font-size: 24px; }
  .st-entry-line { font-size: 16px; }
}

/* The hero wall: a small book on a finished hero's picture that has a chapter (the card keeps its size). */
.hr-card-book {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--cta-text);
  background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2));
  box-shadow: var(--shadow-1);
}
.hr-card-book svg { width: 19px; height: 19px; }

/* The big picture: 「读给我听」 and 「听我的故事」 side by side, one width. */
.hv-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 440px); margin-top: 8px; }
.hv-buttons .btn { width: 100%; min-width: 0; margin-top: 0; padding: 0 12px; }
.hv-buttons .btn span, .hv-story span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hv-story { margin-top: 8px; }

/* The unlock show's end card: 「听英雄的故事」 a whole row over the two buttons, as tall as they are. */
.hu-actions.has-story .hu-story { grid-column: 1 / -1; }
.hu-story { box-shadow: inset 0 0 0 2px var(--hr-gold); color: var(--hr-gold); }
.hu-story svg { color: var(--hr-gold); }

/* ======================= Both pages ======================= */
.page--st .page-body { width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }
.page--st .hero {
  padding-left: max(var(--gutter), var(--safe-left), calc((100% - 1100px) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), var(--safe-right), calc((100% - 1100px) / 2 + var(--gutter)));
}
.st-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--hero-text-2); }
.st-ph svg { width: 38%; max-width: 64px; height: auto; }
.st-ph--lock { color: var(--hr-gold); }
.st-ph--q { font-family: var(--font-rounded); font-size: 44px; font-weight: 900; line-height: 1; }

/* Empty, gone and failed: one card. */
.st-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  padding: 36px 20px 30px;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: center;
}
.st-state-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--accent); background: var(--accent-soft); }
.st-state-icon svg { width: 32px; height: 32px; }
.st-state-title { font-size: 20px; font-weight: 800; }
.st-state-text { max-width: 22em; font-size: 15px; color: var(--text-2); text-wrap: balance; }
.st-state-btn { margin-top: 8px; min-width: 220px; }
button.st-state:active { transform: scale(0.98); }

/* ======================= The story book ======================= */
.st-switcher { margin: 6px 0 14px; }
.st-seg .seg-item { min-width: 0; }
.st-seg .seg-item span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-book-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 28px; }
.st-book-line { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--hero-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-book-version { margin-top: 2px; font-size: 13px; color: var(--hero-text-2); }
@media (min-width: 600px) {
  .st-book-title { font-size: 34px; }
  .st-book-line { font-size: 18px; }
}

.st-notes { display: grid; gap: 8px; margin-bottom: var(--gap); }
.st-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-s);
  font-size: 14px;
  line-height: 1.5;
  color: var(--warning-text);
  background: var(--warning-soft);
}
.st-note svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }

/* The chapter cards: one class, one size on a grid of equal rows. */
.st-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--gap);
}
.st-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  height: 108px;
  min-width: 0;
  padding: 12px;
  border: 0;
  border-radius: var(--r-l);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font: inherit;
  text-align: left;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
button.st-card:active { transform: scale(0.97); }
.st-card.is-locked { box-shadow: var(--shadow-1); }
.st-card.is-speaking { box-shadow: 0 0 0 4px var(--hr-gold-soft), var(--shadow-2); }
.st-card > .tts-spin { position: absolute; top: 10px; right: 10px; z-index: 1; color: var(--hr-gold-2); }
.st-card-pic {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--hr-night-3), var(--hr-night-2) 45%, var(--hr-night-1));
}
.st-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-card-new {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  color: var(--cta-text);
  background: linear-gradient(135deg, var(--cta-1), var(--hr-gold));
  font-size: 13px;
  font-weight: 800;
}
.st-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden; }
.st-card-kicker { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text-3); white-space: nowrap; }
.st-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.st-card-sub { font-size: 14px; line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-card-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 20px;
  margin-top: auto;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.st-tag--next { color: var(--warning-text); background: var(--hr-gold-soft); }
.st-tag--ready, .st-tag--open { color: var(--positive-text); background: var(--positive-soft); }
.st-tag--locked { color: var(--text-3); background: var(--surface-3); }
.st-tag--warn { color: var(--danger); background: var(--danger-soft); }
/* A phone's card is 108px tall: a title with a teaser or a tag keeps one line. */
.st-card.has-tag .st-card-title { -webkit-line-clamp: 1; }
.st-card.is-locked .st-card-title { font-family: var(--font-rounded); color: var(--text-3); }
.st-card.is-skel { box-shadow: var(--shadow-1); }
.st-card.is-skel .st-card-kicker { width: 40%; height: 14px; border-radius: 7px; }
.st-card.is-skel .st-card-title { width: 80%; height: 20px; margin-top: 6px; border-radius: 8px; }

/* iPad: cards stand up (the picture on top), two columns, three when sideways. */
@media (min-width: 600px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; height: 100%; padding: 10px; }
  .st-card-pic { width: 100%; border-radius: 16px; }
  /* Every card's words keep the room of the tallest kind (a next chapter: the kicker, a 2-line title, a
     2-line teaser and its tag), so the loading placeholders and every kind of book have one card height. */
  .st-card-body { gap: 4px; min-height: calc(12px + 4px + 15px * 1.3 + 20px * 1.3 * 2 + 16px * 1.35 * 2 + 28px + 3 * 4px); padding: 12px 6px 4px; }
  .st-card-kicker { font-size: 15px; }
  .st-card-title, .st-card.has-tag .st-card-title { -webkit-line-clamp: 2; min-height: calc(2em * 1.3); font-size: 20px; }
  .st-card-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: calc(2em * 1.35); font-size: 16px; white-space: normal; }
  .st-card-tag { height: 28px; margin-top: auto; padding: 0 12px; font-size: 14px; }
  .st-card-new { top: 10px; left: 10px; height: 28px; padding: 0 12px; font-size: 15px; }
  .st-ph--q { font-size: 72px; }
  .st-card > .tts-spin { top: 18px; right: 18px; }
}
@media (min-width: 900px) {
  .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* An unlocked card's hero name sits at the bottom, where the other cards have their tag (one line). */
.st-card.is-unlocked .st-card-sub { margin-top: auto; min-height: 0; -webkit-line-clamp: 1; }
.st-card.is-unlocked .st-card-sub + .st-card-tag { margin-top: 4px; }

/* ======================= The reader ======================= */
.st-reader-story { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--hero-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }
.st-figure { min-width: 0; }
.st-figure-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: linear-gradient(160deg, var(--hr-night-3), var(--hr-night-2) 45%, var(--hr-night-1));
  box-shadow: var(--shadow-2);
}
.st-figure-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.st-figure-broken { display: none; }
.st-figure-box.is-broken .st-figure-img { visibility: hidden; }
.st-figure-box.is-broken .st-figure-broken { display: grid; }
.st-text { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; }
.st-title { font-size: 26px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.st-hero-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 15px;
  font-weight: 700;
}
.st-hero-tag svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--hr-gold-2); }
.st-hero-tag span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-paras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.st-para {
  margin: 0 -12px;
  padding: 8px 12px;
  border-radius: var(--r-s);
  font-size: 18px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.st-para[role="button"] { cursor: pointer; }
.st-para[role="button"]:active { background: var(--surface-3); }
/* The line being read. */
.st-para.is-reading, .st-title.is-reading { background: var(--hr-gold-soft); box-shadow: inset 4px 0 0 var(--hr-gold); }
.st-title { margin: 0 -12px; padding: 4px 12px; border-radius: var(--r-s); transition: background-color var(--dur-2) var(--ease-out); }
.st-end-card.is-reading { box-shadow: 0 0 0 4px var(--hr-gold-soft), var(--shadow-2); }
.page--st-kid .st-para { font-size: 20px; }
@media (min-width: 600px) {
  .st-title { font-size: 32px; }
  .page--st-kid .st-para { font-size: 24px; }
}

/* Loading: the boxes of their final size. */
.st-reader.is-loading .st-figure-box { box-shadow: none; }
.st-title-skel { display: block; width: 60%; height: 34px; border-radius: 12px; }
.st-line-skel { display: block; width: 100%; height: 22px; border-radius: 10px; }
.st-line-skel:last-child { width: 70%; }
.st-reader.is-state { display: block; }

/* After the words. */
.st-end { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.st-end-label { margin-bottom: 10px; font-size: 16px; font-weight: 800; color: var(--text-2); }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  color: var(--warning-text);
  background: var(--hr-gold-soft);
  font-size: 17px;
  font-weight: 800;
}
.st-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.st-nav.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-nav-btn { width: 100%; min-width: 0; min-height: 64px; padding: 0 16px; font-size: 19px; }
.st-nav-btn span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-nav-note { margin-top: -6px; font-size: 14px; color: var(--text-3); text-align: center; }
.st-end-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 22px 18px; text-align: center; transition: box-shadow var(--dur-2) var(--ease-out); }
.st-end-card .st-nav { width: 100%; margin-top: 6px; }
.st-end-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--cta-text); background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-2)); }
.st-end-icon svg { width: 30px; height: 30px; }
.st-end-title { font-size: 24px; font-weight: 900; }
/* The next chapter's title is the hook: on a phone it wraps (the lock goes along with the words) rather than
   being cut. */
.st-end-kicker { display: block; max-width: 100%; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; text-wrap: balance; }
.st-end-kicker svg { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: var(--hr-gold-2); }
.st-teaser-text { font-size: 18px; line-height: 1.7; text-wrap: balance; }
.st-teaser-need { font-size: 16px; font-weight: 800; color: var(--warning-text); }
.st-collect { margin-top: 6px; }
.page--st-kid .st-teaser-text { font-size: 20px; }

/* The read-aloud bar at the bottom (above the home indicator). */
.st-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px max(var(--gutter), var(--safe-right)) calc(10px + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--line), var(--shadow-2);
}
.st-bar-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); width: 100%; max-width: 560px; margin: 0 auto; }
.st-bar-inner.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-bar-btn { width: 100%; min-width: 0; min-height: 64px; padding: 0 16px; border-radius: var(--r-m); font-size: 21px; gap: 10px; }
.st-bar-btn svg { width: 26px; height: 26px; }
.st-bar-btn span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.page--st-reader .page-body { padding-bottom: 28px; }

/* An iPad held sideways: the picture on the left, held in place; the words on the right. */
@media (min-width: 900px) {
  .st-reader { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: start; column-gap: 40px; max-width: 1100px; }
  .st-figure { position: sticky; top: calc(var(--safe-top) + 72px); }
  /* The words start under the header (the picture, a card, may overlap its edge like every card does). */
  .st-text { padding-top: 40px; }
  .st-reader.is-state { max-width: 760px; }
}

/* ======================= 设置 → 家庭成员: 故事里的名字 ======================= */
.member-story-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.member-story-icon svg { width: 22px; height: 22px; }
.member-story-go { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.member-story .row-sub { white-space: nowrap; }
.stn-example { padding: 14px 16px; border-radius: var(--r-s); background: var(--surface-2); }
.stn-example-label { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.stn-example-text { font-size: 17px; line-height: 1.7; }
.stn-filled { font-weight: 800; color: var(--text); }
.stn-empty { color: var(--text-3); }
.stn-note { margin-top: -6px; }

@media (prefers-reduced-motion: reduce) {
  .st-entry, .st-card, .st-para, .st-title, .st-end-card { transition: none; }
}