/* The bedtime story page (P2-76, story.html + js/story.js): a reading room under the site's bar.
   Warm and dark by default; a light page on request (the "Light page" button, remembered as nx_story_light).

   Contrast, WCAG 2.x, measured (relative luminance; 4.5:1 is AA for text, 3:1 for borders and large text):
   dark page   #efe6d8 text on #1d1a17 14.01:1 · #f0c98a links on #1d1a17 11.07:1 · #c4b8a6 quiet text on #1d1a17 8.87:1
               the parent panel #2a2622: text 12.14:1, links 9.60:1, quiet text 7.69:1
               #1d1a17 on a #f0c98a main button 11.07:1 · #8a7a66 borders on #1d1a17 4.17:1, on #2a2622 3.61:1
   light page  #2b241c text on #faf5ec 14.10:1 · #8a4a12 links on #faf5ec 6.30:1 · #5e5246 quiet text on #faf5ec 6.98:1
               the parent panel #f1e8d8: text 12.59:1, links 5.63:1, quiet text 6.23:1
               #faf5ec on a #8a4a12 main button 6.30:1 · #857360 borders on #faf5ec 4.19:1
   print       #000 on #fff 21:1

   Sizes are in rem and em, so the browser's own font size scales the page (the owner reads at 20 px).
   Motion: nothing moves. The only change over time is an opacity fade (300 ms), the same with Reduce Motion. */

:root {
  --st-bg: #1d1a17;
  --st-ink: #efe6d8;
  --st-link: #f0c98a;
  --st-quiet: #c4b8a6;
  --st-panel: #2a2622;
  --st-line: #8a7a66;
  --st-main-bg: #f0c98a;
  --st-main-ink: #1d1a17;
  --st-focus: #f0c98a;
  --st-serif: "RS Emoji", "Iowan Old Style", Charter, "Bitstream Charter", Georgia, Cambria, "Times New Roman", serif;
  --st-sans: Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.st-light {
  --st-bg: #faf5ec;
  --st-ink: #2b241c;
  --st-link: #8a4a12;
  --st-quiet: #5e5246;
  --st-panel: #f1e8d8;
  --st-line: #857360;
  --st-main-bg: #8a4a12;
  --st-main-ink: #faf5ec;
  --st-focus: #8a4a12;
}

/* the reading room: full width under the bar, the column about 60 characters wide (34em of the 1.2rem text) */
.st-page {
  background: var(--st-bg);
  color: var(--st-ink);
  padding: 24px 16px 64px;
  transition: background-color 300ms ease, color 300ms ease;
}
.st-wrap { max-width: 40.8rem; margin: 0 auto; min-width: 0; }
.st-page a { color: var(--st-link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.st-page a:hover { text-decoration-thickness: 2px; }
.st-page :focus-visible { outline: 3px solid var(--st-focus); outline-offset: 3px; border-radius: 4px; }

.st-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 28px; font-family: var(--st-sans); font-size: 1rem; }
.st-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* buttons: at least 44 px tall at any font size */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0.5em 1.1em;
  border: 2px solid var(--st-line); border-radius: 999px;
  background: transparent; color: var(--st-ink);
  font: 600 1rem/1.3 var(--st-sans); text-align: center; cursor: pointer;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.st-page a.st-btn { text-decoration: none; color: var(--st-ink); }
.st-btn:hover { border-color: var(--st-link); }
.st-btn-main, .st-page a.st-btn-main { background: var(--st-main-bg); border-color: var(--st-main-bg); color: var(--st-main-ink); }
.st-mode[aria-pressed="true"] { border-color: var(--st-link); }

/* the story */
.st-story { font-family: var(--st-serif); }
.st-title { margin: 0 0 0.4em; font-family: var(--st-serif); font-size: 2rem; line-height: 1.2; font-weight: 700; color: var(--st-ink); overflow-wrap: break-word; }
.st-meta { margin: 0 0 1.25em; font-family: var(--st-sans); font-size: 1rem; line-height: 1.5; color: var(--st-quiet); }
.st-status { font-family: var(--st-sans); font-size: 1.1rem; line-height: 1.6; color: var(--st-ink); }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 1.75em; }
.st-page [hidden] { display: none !important; }

/* Softer · Fuller: two buttons, the pressed one filled */
.st-switch { display: inline-flex; flex-wrap: wrap; gap: 0; border: 2px solid var(--st-line); border-radius: 999px; padding: 2px; max-width: 100%; }
.st-switch-btn {
  min-height: 44px; padding: 0.4em 0.9em; border: 0; border-radius: 999px;
  background: transparent; color: var(--st-ink); font: 600 0.95rem/1.3 var(--st-sans); cursor: pointer; text-align: center;
}
.st-switch-btn[aria-pressed="true"] { background: var(--st-main-bg); color: var(--st-main-ink); }

.st-text { font-size: 1.2rem; line-height: 1.6; }
.st-text p { margin: 0 0 1em; overflow-wrap: break-word; }
.st-end { margin: 2em 0 0; font-size: 1.2rem; line-height: 1.6; font-style: italic; text-align: center; color: var(--st-quiet); }

/* opacity only: no transforms, the same timing with Reduce Motion */
.st-fade { opacity: 0; transition: opacity 300ms ease; }
.st-fade.is-in { opacity: 1; }

/* the page for the parent */
.st-parent { margin-top: 3rem; padding: 1.5rem 1.25rem; background: var(--st-panel); border-radius: 16px; font-family: var(--st-sans); font-size: 1rem; line-height: 1.6; }
.st-parent-h { margin: 0 0 1rem; font-family: var(--st-serif); font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: var(--st-ink); }
.st-parent-list { margin: 0; }
.st-parent-list dt { margin: 1.1em 0 0.2em; font-weight: 700; font-size: 0.95rem; color: var(--st-ink); }
.st-parent-list dt:first-child { margin-top: 0; }
.st-parent-list dd { margin: 0; overflow-wrap: break-word; }
.st-source { margin: 1.4em 0 0; font-size: 0.95rem; font-style: italic; color: var(--st-quiet); }
.st-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }

/* the lock card for a members' story (words from js/nx-access.js) */
.st-lock { margin: 0 0 1.5rem; padding: 1.5rem 1.25rem; background: var(--st-panel); border: 2px solid var(--st-line); border-radius: 16px; font-family: var(--st-sans); font-size: 1rem; line-height: 1.6; }
.st-lock-h { margin: 0 0 0.5rem; font-family: var(--st-sans); font-size: 1.15rem; line-height: 1.3; font-weight: 700; color: var(--st-ink); }
.st-lock-text, .st-lock-price { margin: 0 0 0.6rem; }
.st-lock-price { color: var(--st-quiet); }
.st-lock .st-actions { margin-top: 1rem; }
.st-lock .nx-signin-lead { margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--st-ink); }
.st-lock .nx-signin-open { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.st-lock-or { margin: 1.25rem 0 0.5rem; font-weight: 700; }

@media (max-width: 479px) {
  .st-title { font-size: 1.7rem; }
  .st-parent, .st-lock { padding: 1.25rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* the same fades and colour changes, the same timing; nothing slides or grows */
  .st-page *, .st-page *::before, .st-page *::after { animation: none !important; transform: none !important; }
}

/* Print: the title, the story and the page for the parent, black on white, 12 pt; no bar, buttons or audio */
@media print {
  @page { size: auto; margin: 14mm 16mm; }
  html, body, .body { background: #fff !important; }
  .nav, .w-nav, .footer-section, .st-top, .st-tools, .st-actions, .st-btn, .st-lock, audio, .nx-lang { display: none !important; }
  .st-page { background: #fff !important; color: #000 !important; padding: 0 !important; transition: none !important; }
  .st-wrap { max-width: none; }
  .st-page a { color: #000 !important; text-decoration: none; }
  .st-title { font-size: 18pt; margin: 0 0 4pt; color: #000; }
  .st-meta { font-size: 10pt; margin: 0 0 10pt; color: #000; }
  .st-text, .st-end { font-size: 12pt; line-height: 1.4; }
  .st-text p { margin: 0 0 6pt; orphans: 2; widows: 2; }
  .st-end { margin: 8pt 0 0; color: #000; }
  .st-fade { opacity: 1 !important; transition: none !important; }
  .st-parent { margin-top: 14pt; padding: 10pt 0 0; background: none; border-top: 1px solid #000; border-radius: 0; font-size: 11pt; line-height: 1.4; break-inside: auto; }
  .st-parent-h { font-size: 14pt; margin: 0 0 6pt; color: #000; break-after: avoid; }
  .st-parent-list dt { font-size: 11pt; margin-top: 6pt; color: #000; break-after: avoid; }
  .st-source { font-size: 10pt; color: #000; }
}

/* The parent page's Practise it and Check it: the sentence as a line, the games and the quiz as chips under it (step 7:
   separate units for the translation engine) */
.st-links { display: block; }
.st-links .st-line { margin: 0 0 0.45em; }
.st-links .st-chip { display: inline-block; margin: 0 0.5em 0.4em 0; padding: 0.2em 0.75em; border: 2px solid var(--st-line); border-radius: 999px; text-decoration: none; font-size: 0.95em; }
.st-links .st-chip:hover, .st-links .st-chip:focus-visible { border-color: currentColor; }
@media print { .st-links .st-chip { border: 1px solid #999; } }