/* Stories — Spec 3. Tokens and components come from ui.css. */

/* ------------------------------------------------------------ stories list */
.stories-page { padding: 12px 16px 20px; }
.stories-top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stories-head-text { flex: 1; min-width: 0; text-align: center; }
.stories-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.stories-scope {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stories-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 16px;
}
.stories-list { display: flex; flex-direction: column; gap: 10px; }
.story-row {
  width: 100%;
  display: block;
  text-align: left;
  padding: 12px 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink);
}
.story-row:active { transform: scale(.99); filter: brightness(.98); background: #FFFAF0; }
.story-row-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-row-line {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-row-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.stories-empty {
  padding: 44px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.stories-footer { flex: none; padding-top: 12px; }

/* --------------------------------------------------------------- all stories */
.all-stories-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink);
  text-align: left;
}
.all-stories-row:active { transform: scale(.99); filter: brightness(.98); background: #FFFAF0; }
.all-stories-icon { width: 26px; height: 26px; flex: none; color: var(--muted); }
.all-stories-icon svg { width: 26px; height: 26px; display: block; }
.all-stories-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.all-stories-label { font-size: 16px; font-weight: 700; line-height: 1.15; }
.all-stories-count { font-size: 12px; color: var(--muted); }
.all-stories-row .deck-chevron { color: var(--muted); }

/* ---------------------------------------------------------------- new story */
.story-scope-note { font-size: 12px; color: var(--muted); line-height: 1.3; }
.story-scope-note.warn { color: var(--red); }
.story-segmented { align-self: stretch; display: flex; }
.story-segmented button { flex: 1; height: 44px; }
.story-form-error { margin: 0 0 10px; text-align: center; }
.story-form-error[hidden] { display: none; }

/* ----------------------------------------------------------------- reader */
.reader-top {
  flex: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
}
.reader-title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.reader-size { display: flex; justify-content: flex-end; gap: 5px; }
.reader-size button {
  width: 39px;
  height: 38px;
  padding: 0;
  border: 1.5px solid var(--line2);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  font: 800 13px/1 var(--ui-font);
  box-shadow: 0 2px 0 var(--line);
}
.reader-size button:active { transform: scale(.96); filter: brightness(.94); }
.reader-size button:disabled { opacity: .4; }
.reader-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
.reader-body {
  font-family: "LXGW WenKai", "KaiTi", "STKaiti", serif;
  font-size: 34px;
  line-height: 1.7;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.reader-body p { margin: 0; }
.reader-body p + p { margin-top: .08em; }
.reader-body.v2 p + p { margin-top: .55em; }
.story-char {
  cursor: pointer;
  border-radius: 3px;
  -webkit-tap-highlight-color: transparent;
}
.story-char.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
.story-outside { color: var(--muted); }
.story-outside rt {
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
}
.reader-footer {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reader-made { font-size: 12px; color: var(--muted); line-height: 1.4; }
.reader-actions { display: flex; gap: 10px; }
.reader-actions button {
  flex: 1;
  height: 48px;
  padding: 0 10px;
  font-size: 14px;
  white-space: nowrap;
}

/* --------------------------------------------------------- character sheet */
.story-char-sheet {
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.story-hotlist-sheet {
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.story-sheet-title { margin-bottom: 10px; }
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--line);
}
.story-card .lv-badge { position: absolute; top: 14px; left: 14px; }
.story-card .tianzige { width: 200px; height: 200px; margin-top: 14px; }
.story-card-char {
  position: relative;
  z-index: 1;
  font: 130px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
}
.story-card-speaker {
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--l0s);
  background: var(--l0t);
  color: var(--l0k);
  display: grid;
  place-items: center;
}
.story-card-speaker svg { width: 28px; height: 28px; }
.story-card-speaker.level-0 { border-color: var(--l0s); background: var(--l0t); color: var(--l0k); }
.story-card-speaker.level-1 { border-color: var(--l1s); background: var(--l1t); color: var(--l1k); }
.story-card-speaker.level-2 { border-color: var(--l2s); background: var(--l2t); color: var(--l2k); }
.story-card-speaker.level-3 { border-color: var(--l3s); background: var(--l3t); color: var(--l3k); }
.story-card-speaker.level-4 { border-color: var(--l4s); background: var(--l4t); color: var(--l4k); }
.story-card-speaker.level-5 { border-color: var(--l5s); background: var(--l5t); color: var(--l5k); }
.story-card-speaker:active { transform: scale(.96); filter: brightness(.95); }
.story-card-speaker.playing { animation: story-speaker-pulse 900ms ease-in-out infinite; }
@keyframes story-speaker-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.story-card-pinyin {
  margin-top: 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.story-card-decks {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.story-hotlist-btn {
  width: 100%;
  height: 48px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2.5px solid var(--red);
  border-radius: 16px;
  background: transparent;
  color: var(--red);
  font: 700 15px/1.2 var(--ui-font);
}
.story-hotlist-btn:active { transform: scale(.98); filter: brightness(.95); }
.story-hotlist-btn:disabled { opacity: .45; }
.story-deck-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.story-deck-icon svg { width: 20px; height: 20px; display: block; }

/* ----------------------------------------------------------- hot list sheet */
/* The shared picker lives in ui.css; the old story-only sheet is gone. */

@media (max-width: 380px) {
  .reader-top { grid-template-columns: 40px minmax(0, 1fr) auto; padding-left: 12px; padding-right: 12px; }
  .reader-scroll { padding-left: 14px; padding-right: 14px; }
  .reader-body { font-size: 32px; }
  .stories-page { padding-left: 14px; padding-right: 14px; }
}
/* ============================================================ story v2 (7) */
.story-create { padding: 12px 16px 20px; }
.story-create-top {
  flex: none;
  height: 48px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.story-create-head { min-width: 0; text-align: center; }
.story-create-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-create-step {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.story-create-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0 16px;
  -webkit-overflow-scrolling: touch;
}
.story-create-footer { flex: none; padding-top: 10px; }
.story-pane[hidden] { display: none; }

/* Source button */
.story-source-btn {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  border: 1.5px solid var(--line2);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
  text-align: left;
}
.story-source-btn:active { transform: scale(.99); filter: brightness(.98); }
.story-source-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.story-source-kicker { font-size: 12px; color: var(--muted); }
.story-source-name {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-source-name.smart { color: #1F5FA8; }
.story-source-chevron { width: 20px; height: 20px; color: var(--muted); flex: none; }
.story-source-chevron svg { width: 20px; height: 20px; display: block; }

/* Picker tools */
.story-pick-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.story-stepper { display: inline-flex; align-items: center; gap: 6px; }
.story-stepper-label { font-size: 14px; font-weight: 700; }
.story-stepper-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.story-stepper-btn:active:not(:disabled) { transform: scale(.94); filter: brightness(.94); }
.story-stepper-btn:disabled { opacity: .35; }
.story-stepper-count {
  min-width: 26px;
  text-align: center;
  font: 800 17px/1 var(--ui-font);
}
.story-clear {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--red);
  font: 700 14px/1 var(--ui-font);
}
.story-clear:disabled { opacity: .4; }
.story-clear { white-space: nowrap; }
.story-pick-note { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* 5-column grid */
.story-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.story-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1 / 1;
  padding: 4px 2px 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
  overflow: hidden;
}
.story-tile:active { transform: scale(.96); }
.story-tile.selected {
  border-color: var(--red);
  box-shadow: 0 2px 0 var(--red-edge), 0 0 0 2px var(--red-tint) inset;
  background: #FFFAF0;
}
.story-tile-char {
  font-family: "LXGW WenKai", "KaiTi", "STKaiti", serif;
  font-size: 30px;
  line-height: 1;
}
.story-tile-bar {
  width: 100%;
  height: 4px;
  flex: none;
  opacity: .85;
}
.story-tile.selected .story-tile-bar { opacity: 1; }
.story-tile.small { border-radius: 10px; }
.story-tile.small .story-tile-char { font-size: 24px; }
.story-tile.small .story-tile-bar { height: 3px; }
.story-add-tile {
  border-style: dashed;
  border-color: var(--line2);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  gap: 0;
}
.story-add-glyph { font: 800 22px/1 var(--ui-font); }
.story-add-label { font-size: 11px; font-weight: 700; }
.story-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* Character rows inside a card use the card's horizontal padding. */
.story-block .character-row { padding-left: 0; padding-right: 0; }

/* Settings blocks */
.story-block {
  padding: 14px;
  margin-bottom: 12px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
}
.story-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.story-block-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
}
.story-link {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--red);
  font: 700 14px/1 var(--ui-font);
}
.story-link-danger { color: var(--red-edge); }
.story-hint { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 6px 0 0; }
.story-focus-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.story-focus-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  padding: 2px 4px 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.story-focus-chip-char {
  font-family: "LXGW WenKai", "KaiTi", "STKaiti", serif;
  font-size: 20px;
  line-height: 1.15;
}
.story-focus-chip-bar { width: 100%; height: 3px; border-radius: 2px; }
.story-length-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.story-round {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
  font: 800 22px/1 var(--ui-font);
  display: grid;
  place-items: center;
}
.story-round:active:not(:disabled) { transform: scale(.95); filter: brightness(.94); }
.story-round:disabled { opacity: .35; }
.story-round-sm { width: 36px; height: 36px; font-size: 16px; }
.story-round-sm svg { width: 20px; height: 20px; display: block; }
.story-length-value {
  min-width: 72px;
  text-align: center;
  font: 800 30px/1.1 var(--ui-font);
}
.story-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--l3t);
  color: var(--l3k);
  font: 800 11px/1.3 var(--ui-font);
}
.story-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.story-chip {
  min-height: 38px;
  padding: 0 13px;
  border: 1.5px solid var(--line2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 14px/1.2 var(--ui-font);
}
.story-chip:active { transform: scale(.97); filter: brightness(.96); }
.story-chip.selected {
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red-edge);
  box-shadow: 0 0 0 1.5px var(--red) inset;
}
.story-idea-input, .story-field {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  margin-top: 10px;
  border: 1.5px solid var(--line2);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 600 15px/1.3 var(--ui-font);
}
.story-idea-input:focus, .story-field:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.story-textarea {
  min-height: 150px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
  font-weight: 500;
}
.story-info-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.story-info-btn svg { width: 18px; height: 18px; display: block; }

/* About patterns */
.story-about-intro {
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.story-about-card, .story-pattern-card {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
}
.story-about-name, .story-pattern-name { font-size: 15px; font-weight: 800; }
.story-about-text, .story-pattern-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  user-select: text;
  -webkit-user-select: text;
}
.story-about-meta { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.story-about-meta strong { color: var(--ink); }
.story-pattern-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.story-pattern-actions { display: inline-flex; gap: 8px; flex: none; }
.story-pattern-actions .story-link { min-height: 28px; font-size: 13px; }

/* Source sheet */
.story-source-sheet {
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.story-source-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.story-source-sheet .story-sheet-close { flex: none; }
.story-source-group {
  margin: 10px 2px 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.story-source-row {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.story-source-row:active { background: #FFFAF0; }
.story-source-row.selected { border-color: var(--line2); background: var(--seg); }
.story-source-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.story-source-row-name { font-size: 15px; font-weight: 700; }
.story-source-row-name.smart { color: #1F5FA8; }
.story-source-row-sub { font-size: 12px; color: var(--muted); }
.story-source-check { width: 22px; height: 22px; color: var(--red); flex: none; }
.story-source-check svg { width: 22px; height: 22px; display: block; }
.story-sheet-close { width: 100%; margin-top: 14px; }

/* Add sheet */
.story-add-sheet { max-height: 90dvh; display: flex; flex-direction: column; }
.story-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--seg);
  flex: none;
}
.story-tab {
  flex: 1;
  height: 38px;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #5E5345;
  font: 700 14px/1 var(--ui-font);
}
.story-tab.selected {
  background: var(--paper);
  border-color: var(--line2);
  box-shadow: 0 1px 3px rgba(76, 55, 30, .18);
  color: var(--ink);
}
.story-add-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.story-add-pane[hidden] { display: none; }
.story-add-results {
  flex: 1;
  min-height: 120px;
  max-height: 48dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 10px;
}
.story-add-heading {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 2px 8px;
}
.story-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.story-add-row .story-tile { width: 46px; height: 46px; aspect-ratio: auto; flex: none; }
.story-add-row .story-tile-char { font-size: 26px; }
.story-add-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.story-add-row-sub { font-size: 13px; color: var(--muted); }
.story-add-btn {
  min-width: 62px;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--red);
  border-radius: 999px;
  background: transparent;
  color: var(--red);
  font: 700 13px/1 var(--ui-font);
}
.story-add-btn:active:not(:disabled) { transform: scale(.96); }
.story-add-btn.added { border-color: var(--line2); color: var(--muted); }
.story-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  flex: none;
}
.story-crumb {
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--red);
  font: 700 13px/1 var(--ui-font);
}
.story-crumb-sep { color: var(--muted); font-size: 13px; }
.story-browse-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex: none;
}
.story-browse-controls .story-hint { margin: 0; }
.story-sort button { height: 30px; }
.story-browse-body {
  flex: 1;
  min-height: 140px;
  max-height: 46dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}
.story-browse-section { margin-top: 14px; }
.story-browse-section-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 2px 6px;
}
.story-browse-item { margin-bottom: 6px; }
.story-browse-row {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
.story-browse-row:active { transform: scale(.99); filter: brightness(.98); }
.story-browse-name {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
}
.story-browse-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.story-browse-name .smart-tag,
.story-browse-name .story-current-tag { flex: none; }
.story-browse-meta { font-size: 11px; color: var(--muted); flex: none; }
.story-browse-chevron { width: 16px; color: var(--muted); flex: none; transition: transform .15s ease; }
.story-browse-chevron.open { transform: rotate(90deg); }
.story-current-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--red-tint);
  color: var(--red-edge);
  font: 800 10px/1.3 var(--ui-font);
  text-transform: uppercase;
}
.story-browse-folder .story-browse-name { font-weight: 800; }
.story-browse-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 2px 4px;
}

/* Story details */
.story-details-sheet { max-height: 92dvh; display: flex; flex-direction: column; }
.story-details-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}
.story-detail-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.story-detail-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.story-detail-value { font-size: 17px; font-weight: 800; line-height: 1.15; }
.story-detail-label { font-size: 11px; color: var(--muted); line-height: 1.25; }
.story-detail-sub { font-size: 11px; font-weight: 700; color: var(--l3k); }
.story-detail-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.story-detail-heading { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.story-detail-subheading {
  margin: 10px 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.story-focus-details { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.story-focus-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 3px 4px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.story-focus-detail.once { opacity: .55; }
.story-focus-detail.unused { border-style: dashed; opacity: .7; }
.story-focus-detail-char {
  font-family: "LXGW WenKai", "KaiTi", "STKaiti", serif;
  font-size: 22px;
  line-height: 1;
}
.story-focus-detail-bar { width: 100%; height: 3px; border-radius: 2px; }
.story-focus-detail-count { font-size: 10px; font-weight: 700; color: var(--muted); }
.story-bar-block { margin-bottom: 6px; }
.story-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--seg);
}
.story-bar-empty { flex: 1; }
.story-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
}
.story-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.story-legend-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.story-legend-value { font-weight: 700; color: var(--ink); }
.story-pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.story-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
}
.story-pill strong { font-family: "LXGW WenKai", "KaiTi", "STKaiti", serif; font-size: 15px; }
.story-pill-pinyin { font-size: 11px; color: var(--muted); }
.story-pill-count { font-size: 11px; font-weight: 700; color: var(--muted); }
.story-made { display: flex; flex-direction: column; gap: 6px; }
.story-detail-field { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; }
.story-detail-field-label {
  flex: none;
  width: 78px;
  color: var(--muted);
  font-weight: 700;
}
.story-detail-field-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Reader: details button and Ask after reading card */
.reader-info {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1.5px solid var(--line2);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  display: grid;
  place-items: center;
  flex: none;
}
.reader-info[hidden] { display: none; }
.reader-info svg { width: 20px; height: 20px; display: block; }
.reader-info:active { transform: scale(.96); }
.reader-ask {
  margin-top: 28px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.reader-ask[hidden] { display: none; }
.reader-ask-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}
.reader-ask-title { font: 800 14px/1.2 var(--ui-font); }
.reader-ask-glyph { width: 18px; height: 18px; color: var(--muted); transition: transform .15s ease; }
.reader-ask-glyph svg { width: 18px; height: 18px; display: block; }
.reader-ask.collapsed .reader-ask-glyph { transform: rotate(-90deg); }
.reader-ask.collapsed .reader-ask-body { display: none; }
.reader-ask-body { padding-top: 8px; }
.reader-ask-point {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.reader-ask-questions {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.reader-ask-questions li + li { margin-top: 4px; }
.settings-reset { width: 100%; margin-top: 14px; }

@media (max-width: 380px) {
  .story-create { padding-left: 14px; padding-right: 14px; }
  .story-grid { gap: 6px; }
  .story-tile-char { font-size: 27px; }
  .story-tile.small .story-tile-char { font-size: 22px; }
  .story-browse-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .story-focus-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reader-top { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .reader-size button { width: 35px; }
  .reader-info { width: 34px; height: 34px; }
}

/* Reader menu (C1) */
.reader-top { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.reader-menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: none;
}
.reader-menu-btn svg { width: 24px; height: 24px; display: block; }
.reader-menu-btn:active { transform: scale(.96); }
.reader-menu {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 70;
  width: min(300px, calc(100vw - 32px));
  padding: 4px 0;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}
.reader-menu[hidden] { display: none; }
.reader-menu-item {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--seg);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font: 800 15px/1.2 var(--ui-font);
}
.reader-menu-item svg { width: 20px; height: 20px; flex: none; }
.reader-menu-item:active { background: var(--hover); }
.reader-menu-size {
  min-height: 56px;
  padding: 6px 12px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 800 15px/1.2 var(--ui-font);
  color: var(--ink);
}
.reader-menu-size-buttons { display: flex; gap: 8px; }
.reader-menu-size-buttons button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--line2);
  border-radius: 50%;
  background: var(--seg);
  color: var(--ink);
  font: 800 14px/1 var(--ui-font);
}
.reader-menu-size-buttons button:disabled { opacity: .4; }
.reader-menu-size-buttons button:active { transform: scale(.96); }

/* Reader forgotten marks (C2-C4) */
.story-char.forgot {
  background: var(--red-tint);
  border-radius: 3px;
  box-shadow: inset 0 calc(-1 * 3px) 0 var(--red);
  color: var(--ink);
  text-decoration: none;
  padding: 0 .03em;
}
.story-level-change {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.story-level-change .lv-badge { position: static; }
.story-level-old {
  opacity: .65;
  text-decoration: line-through;
}
.story-level-arrow { color: var(--muted); font-weight: 800; }
.story-char-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.story-char-actions > * { flex: 1; min-width: 0; }
.story-forgot-btn,
.story-forgot-undo {
  min-height: 48px;
  border-radius: 14px;
  font: 800 15px/1.2 var(--ui-font);
  padding: 0 12px;
}
.story-forgot-btn {
  border: 1.5px solid var(--red);
  background: var(--red);
  color: var(--on-red);
}
.story-forgot-btn:active { filter: brightness(.95); }
.story-forgot-btn:disabled { opacity: .6; }
.story-forgot-status {
  min-height: 48px;
  padding: 0 4px 0 10px;
  border: 1.5px solid var(--red);
  border-radius: 14px;
  background: var(--red-tint);
  color: var(--red-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font: 800 13px/1.2 var(--ui-font);
}
.story-forgot-status span { padding-left: 4px; white-space: nowrap; }
.story-forgot-undo {
  border: 1.5px solid var(--red-edge);
  background: var(--paper);
  color: var(--red-edge);
  min-height: 38px;
  min-width: 54px;
  border-radius: 11px;
}
.story-char-actions .story-hotlist-btn {
  width: auto;
  margin-top: 0;
  flex: 1;
}
.reader-practice-forgot {
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--red);
  color: var(--on-red);
  font: 800 17px/1.2 var(--ui-font);
}
.reader-practice-forgot[hidden] { display: none; }
.reader-practice-play { display: grid; place-items: center; }
.reader-practice-play svg { width: 20px; height: 20px; }
.reader-practice-chars {
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .22);
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 370px) {
  .reader-top { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .reader-menu-btn { width: 40px; height: 40px; }
}

/* The reader fills wide windows (see page-shell.css), so give the text a
   gutter and keep the controls at a comfortable width instead of letting
   them stretch edge to edge. */
@media (min-width: 720px) {
  .story-reader .reader-scroll { padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }
  .story-reader .reader-actions,
  .story-reader .reader-practice-forgot { max-width: 560px; }
}