/* Narrative reading uses the same published text as the learning screens. */
.story-library, .story-reader { max-width: 800px; margin: 0 auto; padding-block: 28px; }
.story-library svg, .story-reader svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.story-library > header p:last-child { margin: 10px 0 22px; color: #626262; line-height: 1.65; }
.story-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #222; margin-bottom: 24px; }
.story-shortcuts a { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 16px 8px; min-height: 52px; font-weight: 700; font-size: 14px; }
.story-shortcuts a + a { border-left: 1px solid #ddd; }
.story-shortcuts svg, .story-library-row > svg, .story-reader-pager svg, .story-reader-heading svg { flex: none; width: 18px; height: 18px; }
.story-library-group { border-bottom: 1px solid #ccc; }
.story-library-group summary { display: flex; align-items: center; gap: 16px; cursor: pointer; min-height: 64px; list-style: none; }
.story-library-group summary::-webkit-details-marker { display: none; }
.story-library-group summary::after { content: "+"; margin-left: auto; font-size: 24px; }
.story-library-group[open] summary::after { content: "−"; }
.story-library-group summary h2 { margin: 0; font-size: 23px; }
.story-library-group summary > span { color: #666; font-size: 13px; }
.story-library-group ol { list-style: none; margin: 0; padding: 0; }
.story-library-group li + li { border-top: 1px solid #e8e8e8; }
.story-library-row { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 14px 0; }
.story-library-row > img, .story-row-icon { width: 60px; height: 72px; object-fit: cover; flex: none; background: #f1f1f1; }
.story-row-icon { display: grid; place-items: center; }
.story-row-icon svg { width: 25px; height: 25px; }
.story-library-row > span:not(.story-row-icon) { flex: 1; min-width: 0; }
.story-library-row strong { display: block; line-height: 1.5; overflow-wrap: anywhere; font-size: 17px; }
.story-library-row small { display: block; margin-bottom: 4px; font-size: 12px; color: #666; }
.story-library-row.is-locked { color: #737373; min-height: 68px; }
.story-library-row.is-locked strong { font-size: 14px; font-weight: 500; }
.story-library-note { font-size: 13px; color: #666; margin-top: 24px; line-height: 1.7; }
.story-reader-heading > a { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.story-reader-heading > a svg { transform: rotate(180deg); }
.story-reader-heading .eyebrow { margin-top: 20px; }
.story-reader-heading h1 { margin: 8px 0 24px; font-size: clamp(24px, 4vw, 36px); line-height: 1.35; overflow-wrap: anywhere; }
.story-reader-image { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #f3f3f3; }
.story-reader-body > section { padding: 24px 4px; }
.story-reader-body h2 { font-size: 23px; line-height: 1.4; }
.story-reader-original { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 18px; line-height: 1.95; margin: 18px 0; }
.story-reader-intro, .story-reader-note { color: #555; }
.story-reader-body blockquote { border-left: 3px solid #222; padding-left: 20px; margin: 24px 0; }
.story-reader-body cite { font-style: normal; font-size: 14px; font-weight: 700; }
.story-reader-pager { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #ccc; padding-block: 12px; }
.story-reader-pager a { min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  .story-library-row, .story-shortcuts a { transition: background-color 140ms ease; }
  .story-library-row:hover, .story-shortcuts a:hover { background: #f4f4f4; }
  .story-reader-body { animation: story-reveal 160ms ease-out; }
  @keyframes story-reveal { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
}
html[data-platform="ios"] .story-library { padding-top: 24px; }
html[data-platform="ios"] .story-shortcuts a { font-size: 12px; padding-inline: 6px; }
html[data-platform="ios"][data-ios-screen="story-reader"] .story-reader { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; padding: 0 16px; }
html[data-platform="ios"] .story-reader-heading { flex: none; }
html[data-platform="ios"] .story-reader-heading .eyebrow { margin-top: 4px; font-size: 12px; }
html[data-platform="ios"] .story-reader-heading h1 { font-size: 23px; margin: 6px 0 16px; }
html[data-platform="ios"] .story-reader-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html[data-platform="ios"] .story-reader-image { max-height: 180px; }
html[data-platform="ios"] .story-reader-original { font-size: 17px; line-height: 1.9; }
html[data-platform="ios"] .story-reader-pager { flex: none; padding-block: 4px; }
@media (forced-colors: active) {
  .story-library-group, .story-shortcuts, .story-reader-pager { border-color: CanvasText; }
}