/* The Story Book (web/src/storybook/*.ts, spec v5 5 Oct 2026): questions and stories as the pages of a book.
   One page on a phone or tablet in portrait; an open book (two pages, a leaf turning over the spine) at 1100 px
   and wider in landscape. Colours are the palette's tokens (--ys-paper, --ys-ink, --ys-muted, --ys-line, --ys-btn,
   --ys-on-btn, --ys-focus), so the dark and high-contrast themes read as they do elsewhere; sizes are in em of
   the person's text size (--ys-scale). Reduced motion: the pages cross-fade instead of turning. */

dialog.sb-book-dialog {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--ys-paper); color: var(--ys-ink); overflow: hidden; box-sizing: border-box;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: calc(16px * var(--ys-scale, 1)); line-height: 1.5;
}
dialog.sb-book-dialog[open] { display: flex; flex-direction: column; }
dialog.sb-book-dialog::backdrop { background: rgba(8, 20, 16, .8); }
#sb-book [hidden], #sb-answer [hidden] { display: none !important; }
#sb-book :focus-visible, #sb-answer :focus-visible { outline: 3px solid var(--ys-focus, #0b3d91); outline-offset: 2px; }

/* Buttons: one compact family (the carried UI's dialog buttons are dark green everywhere). */
#sb-book button, #sb-answer button:not(.ys-capture-btn) {
  font: inherit; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .95em; font-weight: 600; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--ys-line); background: var(--ys-paper); color: var(--ys-ink); cursor: pointer; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
#sb-book button:hover, #sb-answer button:not(.ys-capture-btn):hover { background: color-mix(in srgb, var(--ys-ink) 8%, var(--ys-paper)); }
#sb-book button:disabled, #sb-answer button:not(.ys-capture-btn):disabled { opacity: .45; cursor: default; }
#sb-book button.ys-primary, #sb-answer button:not(.ys-capture-btn).ys-primary { background: var(--ys-btn); border-color: var(--ys-btn); color: var(--ys-on-btn); }
#sb-book button.ys-primary:hover, #sb-answer button:not(.ys-capture-btn).ys-primary:hover { background: var(--ys-btn-hover, var(--ys-btn)); }
#sb-book button.ys-danger, #sb-answer button:not(.ys-capture-btn).ys-danger { background: var(--ys-error, #8b0000); border-color: var(--ys-error, #8b0000); color: #fff; }
#sb-book button.sb-link { border-color: transparent; background: transparent; padding: 6px 10px; min-height: 40px; }
#sb-book button.sb-link:hover { border-color: var(--ys-line); }
#sb-book button[aria-pressed="true"], #sb-answer button:not(.ys-capture-btn)[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ys-ink); }
#sb-book .ys-ico, #sb-answer .ys-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
#sb-book select, #sb-book input[type="text"], #sb-book input[type="number"], #sb-answer select, #sb-answer input[type="text"], #sb-answer textarea {
  font: inherit; min-height: 44px; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--ys-line); border-radius: 8px;
  background: var(--ys-paper); color: var(--ys-ink); max-width: 100%; margin: 0;
}
#sb-book input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--ys-btn); }
.sb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.sb-muted { color: var(--ys-muted); }
.sb-check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.sb-badge { display: inline-block; font: 600 .78em/1.4 system-ui, sans-serif; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--ys-line); color: var(--ys-ink); margin: 0 4px 0 0; }

/* Head and foot */
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--ys-line); }
.sb-title { margin: 0; font: 600 1.1em/1.2 Literata, Georgia, serif; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tools { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
#sb-book .sb-close { border-radius: 50%; padding: 0; width: 44px; }
.sb-foot { border-top: 1px solid var(--ys-line); padding: 4px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
.sb-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sb-page-no { font-size: 1.07em; color: var(--ys-muted); font-variant-numeric: tabular-nums; text-align: center; }
.sb-toast { margin: 4px 0; font-weight: 600; }
.sb-toast[data-tone="error"] { color: var(--ys-error, #8b0000); }
.sb-toast[data-tone="warn"] { color: var(--ys-warn, #6b3200); }
.sb-guide { padding: 6px 0 2px; border-bottom: 1px solid var(--ys-line); margin-bottom: 4px; }
.sb-guide-text { margin: 0; font-weight: 700; }
.sb-guide .sb-row { margin-top: 6px; justify-content: flex-end; }
html[data-hand="left"] .sb-guide .sb-row { flex-direction: row-reverse; justify-content: flex-end; }

/* The desk, the book and its pages */
.sb-stage {
  flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: stretch; padding: 10px;
  perspective: 2400px; touch-action: pan-y; background: color-mix(in srgb, var(--ys-ink) 9%, var(--ys-paper));
}
.sb-stage[data-loading] { opacity: .6; }
.sb-spread { position: relative; display: flex; width: 100%; max-width: 760px; transform-style: preserve-3d; }
.sb-stage[data-layout="spread"] .sb-spread { max-width: 1400px; }
.sb-slot { flex: 1 1 0; min-width: 0; display: flex; }
.sb-page {
  flex: 1 1 auto; min-width: 0; position: relative; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  background: var(--ys-paper); color: var(--ys-ink); border: 1px solid var(--ys-line); border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.sb-stage[data-layout="spread"] .sb-slot-left .sb-page { border-radius: 8px 0 0 8px; border-right-color: transparent;
  background-image: linear-gradient(to left, rgba(0, 0, 0, .12), transparent 28px); }
.sb-stage[data-layout="spread"] .sb-slot-right .sb-page { border-radius: 0 8px 8px 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .12), transparent 28px); }
.sb-page-inner { position: relative; min-height: 100%; box-sizing: border-box; max-width: 64ch; margin: 0 auto;
  padding: clamp(16px, 4vw, 40px) clamp(16px, 4.5vw, 48px) 52px; font-family: Literata, Georgia, 'Times New Roman', serif; }
.sb-page-blank { background-image: none; }
.sb-folio { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font: .85em/1 Literata, Georgia, serif; color: var(--ys-muted); }
.sb-eyebrow { margin: 0 0 8px; font: 700 .76em/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ys-muted); }
.sb-page-title, .sb-chapter-title, .sb-cover-title, .sb-question, .sb-story-heading { font-family: Literata, Georgia, serif; font-weight: 500; margin: 0 0 14px; text-wrap: balance; }
.sb-page-title { font-size: 1.5em; }
.sb-question { font-size: 1.4em; line-height: 1.28; }
.sb-story-heading { font-size: 1.35em; }
.sb-chapter-no { margin: 18% 0 6px; font: 700 .8em/1.2 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ys-muted); text-align: center; }
.sb-chapter-title { font-size: 2em; line-height: 1.15; text-align: center; }
.sb-page-opener .sb-note, .sb-page-opener .sb-progress, .sb-page-opener .sb-always { text-align: center; color: var(--ys-muted); }
.sb-page-opener .sb-row { justify-content: center; }
.sb-page-opener .sb-badge-in { display: table; margin: 8px auto; }
.sb-include-choice { margin: 18px 0; padding: 12px; border: 1px solid var(--ys-line); border-radius: 10px; }
.sb-include-choice .sb-ask { margin: 0; font-weight: 700; text-align: center; font-family: system-ui, sans-serif; }
.sb-page-cover .sb-page-inner { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.sb-cover-title { font-size: clamp(1.8em, 5vw, 2.6em); line-height: 1.15; }
.sb-motto { font-family: 'BMSG Caveat', Caveat, cursive; font-size: 1.5em; color: var(--ys-muted); margin: 0 0 20px; }
.sb-cover-actions { display: grid; gap: 10px; justify-items: center; }
.sb-cover-actions button { min-width: min(18em, 100%); }

/* Contents */
.sb-toc { list-style: none; margin: 0; padding: 0; font-family: system-ui, sans-serif; }
.sb-toc li { display: flex; align-items: center; gap: 6px; border-bottom: 1px dotted var(--ys-line); padding: 2px 0; }
#sb-book .sb-toc-link { flex: 1 1 auto; justify-content: flex-start; text-align: left; border-color: transparent; background: transparent; padding: 6px 4px; min-height: 40px; font-weight: 600; }
.sb-toc-meta { font-size: .82em; color: var(--ys-muted); white-space: nowrap; }
.sb-toc-page { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; font-family: Literata, Georgia, serif; }
.sb-toc-out .sb-toc-title { flex: 1 1 auto; color: var(--ys-muted); text-decoration: line-through; padding: 6px 4px; }
.sb-toc-tools { justify-content: center; font-family: system-ui, sans-serif; }

/* Answers and stories on a page */
.sb-answers { display: grid; gap: 12px; margin: 0 0 8px; }
.sb-story { border-left: 3px solid var(--ys-line); padding: 2px 0 2px 14px; }
.sb-story-title { margin: 0 0 4px; font: 600 1.1em/1.3 Literata, Georgia, serif; }
.sb-words p { margin: 0 0 .7em; font-size: 1.05em; }
.sb-context { font-style: italic; color: var(--ys-muted); margin: 0 0 6px; }
.sb-answer-status { font-weight: 600; margin: 0 0 4px; }
.sb-story-meta { margin: 0; font: .85em/1.4 system-ui, sans-serif; color: var(--ys-muted); }
.sb-story-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: .9em/1.3 system-ui, sans-serif; }
.sb-more > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; padding: 0 10px; border-radius: 999px; }
.sb-more > summary:hover { background: color-mix(in srgb, var(--ys-ink) 8%, var(--ys-paper)); }
.sb-more[open] { flex-basis: 100%; }
.sb-more-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-when, .sb-cut, .sb-form { display: grid; gap: 6px; margin: 8px 0; padding: 10px; border: 1px dashed var(--ys-line); border-radius: 10px; font-family: system-ui, sans-serif; }
.sb-confirm { margin: 8px 0; padding: 10px 12px; border: 2px solid var(--ys-error, #8b0000); border-radius: 10px; font-family: system-ui, sans-serif; }
.sb-confirm p { margin: 0; }
.sb-pending { font-style: italic; color: var(--ys-muted); }
.sb-q-actions, .sb-q-later { font-family: system-ui, sans-serif; }
.sb-date { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.sb-date legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.sb-date-part { display: grid; gap: 2px; }
.sb-date input[type="number"] { width: 7em; }
.sb-label { font-weight: 700; margin: 4px 0 0; }
.sb-cats { display: flex; flex-wrap: wrap; gap: 0 14px; }

/* The leaf (a page turning) */
.sb-leaf { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-style: preserve-3d; transform-origin: left center; z-index: 5; pointer-events: none; will-change: transform; }
.sb-leaf[data-layout="spread"][data-dir="next"] { left: 50%; width: 50%; transform-origin: left center; }
.sb-leaf[data-layout="spread"][data-dir="prev"] { left: 0; width: 50%; transform-origin: right center; }
.sb-face { position: absolute; inset: 0; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sb-face-back { transform: rotateY(180deg); }
.sb-face .sb-page { box-shadow: 0 10px 34px rgba(0, 0, 0, .32); overflow: hidden; }
.sb-face-empty { flex: 1; }
.sb-stage.sb-fade .sb-spread { animation: sb-fade .2s ease-out; }
@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sb-stage.sb-fade .sb-spread { animation-duration: .12s; } }

/* Inboxes */
.sb-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 16px 20px; }
.sb-panel-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; max-width: 820px; margin: 0 auto; }
.sb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-panel-body { max-width: 820px; margin: 0 auto; }
.sb-panel-body h3 { font: 600 1.25em/1.3 Literata, Georgia, serif; margin: 16px 0 4px; }
.sb-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.sb-mem, .sb-story-row-item { border: 1px solid var(--ys-line); border-radius: 10px; padding: 8px 12px; }
.sb-mem-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9em; color: var(--ys-muted); }
.sb-mem-words { margin: 4px 0 0; }
.sb-story-row-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sb-story-row-item .sb-row { flex-basis: 100%; margin-top: 4px; }
.sb-story-name { flex: 1 1 10em; font-weight: 600; overflow-wrap: anywhere; }
#sb-book .sb-drag { touch-action: none; cursor: grab; border-radius: 10px; padding: 0; width: 44px; font-size: 1.2em; }
html[data-hand="left"] .sb-story-row-item { flex-direction: row-reverse; }
.sb-drop-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); align-items: start; }
.sb-drop-list > li { border: 1px solid var(--ys-line); border-radius: 10px; padding: 0 10px; }
.sb-drop-list summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.sb-drop-title { font-weight: 700; }
.sb-drop-inbox { border: 2px dashed var(--ys-line); border-radius: 12px; padding: 4px 8px; }
.sb-drop-over { outline: 3px dashed var(--ys-focus, #0b3d91); outline-offset: 2px; background: color-mix(in srgb, var(--ys-focus, #0b3d91) 10%, var(--ys-paper)); }
.sb-drag-ghost { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; max-width: 60vw; padding: 6px 12px; border-radius: 10px;
  background: var(--ys-btn); color: var(--ys-on-btn); font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-warn { border-left: 4px solid var(--ys-warn, #6b3200); padding: 6px 12px; }
.sb-ok { font-weight: 700; }

/* Sort my memories (sort.ts, Dave 6 Oct 2026): a card per memory - play, its words, then Context, Chapter,
   Categories in one row on a wide screen (stacked on a phone), one Save. Chapters and categories above. */
.sb-sort .sb-mem { display: grid; gap: 6px; padding: 10px 12px; }
.sb-mem-head time { flex: 1 1 auto; }
#sb-book .sb-play { min-height: 40px; padding: 4px 14px; }
.sb-mem-media:empty { display: none; }
.sb-mem-media video { max-width: 100%; max-height: 50vh; border-radius: 8px; }
.sb-sort .sb-mem-words { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow-y: auto; }
.sb-sort .sb-mem-words[data-state="pending"], .sb-sort .sb-mem-words[data-state="empty"], .sb-sort .sb-mem-words[data-state="failed"] { color: var(--ys-muted); font-style: italic; }
.sb-steps { display: grid; gap: 8px 12px; grid-template-columns: 1fr; margin: 2px 0; }
@media (min-width: 760px) { .sb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-step { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sb-step select, .sb-step input[type="text"] { width: 100%; }
.sb-step-label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }
.sb-step-no { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ys-btn); color: var(--ys-on-btn); font-size: .85em; flex: 0 0 auto; }
.sb-step-hint { margin: 0; font-size: .85em; }
.sb-step .sb-cats { gap: 0 12px; }
.sb-when-where > summary { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; }
.sb-when-where[open] { display: grid; gap: 6px; padding: 6px 10px 10px; border: 1px dashed var(--ys-line); border-radius: 10px; }
.sb-sort .sb-mem-actions { margin-top: 2px; }
html[data-hand="left"] .sb-sort .sb-mem-actions { flex-direction: row-reverse; justify-content: flex-end; }
.sb-manage { margin: 6px 0 10px; border: 1px solid var(--ys-line); border-radius: 10px; padding: 0 12px; }
.sb-manage > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.sb-manage-cols { display: grid; gap: 4px 20px; grid-template-columns: 1fr; padding-bottom: 10px; }
@media (min-width: 760px) { .sb-manage-cols { grid-template-columns: 1fr 1fr; } }
.sb-manage-sec h4 { margin: 6px 0 2px; font: 600 1.05em/1.3 Literata, Georgia, serif; }
.sb-manage-sec > .sb-muted { margin: 0 0 6px; font-size: .88em; }
.sb-manage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-manage-row { border-bottom: 1px dotted var(--ys-line); padding: 2px 0; }
.sb-manage-line { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.sb-manage-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.sb-manage-name .sb-badge { margin-left: 6px; font-weight: 600; }
.sb-manage-home { font-weight: 400; font-size: .88em; }
.sb-manage-tools { display: inline-flex; flex: 0 0 auto; gap: 2px; }
#sb-book .sb-m-btn { width: 44px; padding: 0; }
html[data-hand="left"] .sb-manage-line { flex-direction: row-reverse; }
.sb-manage-add input[type="text"] { flex: 1 1 10em; min-width: 0; }
.sb-manage-add select { flex: 1 1 8em; min-width: 0; }
.sb-manage-edit input[type="text"] { flex: 1 1 10em; min-width: 0; }

/* "Edit the words" on a page (story-card.ts): the box is resizable, the 🎙 sits in it. */
.sb-edit { display: grid; gap: 6px; margin: 4px 0 8px; font-family: system-ui, sans-serif; }
#sb-book .sb-edit textarea { font: inherit; font-family: Literata, Georgia, serif; width: 100%; min-height: 8em; resize: vertical; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--ys-line); border-radius: 8px; background: var(--ys-paper); color: var(--ys-ink); }

/* "Answer this" */
dialog.sb-answer-dialog {
  width: min(640px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); box-sizing: border-box; padding: 14px 18px 18px; margin: auto;
  border-radius: 14px; border: 2px solid var(--ys-line); background: var(--ys-paper); color: var(--ys-ink); overflow: auto;
  font-size: calc(16px * var(--ys-scale, 1)); line-height: 1.5;
}
dialog.sb-answer-dialog::backdrop { background: rgba(8, 20, 16, .7); }
#sb-answer .sb-answer-close { float: right; border-radius: 50%; padding: 0 12px; }
#sb-answer .sb-question { font: 500 1.3em/1.3 Literata, Georgia, serif; margin: 0 0 10px; }
#sb-answer .sb-answer-mode { display: grid; gap: 6px; margin-top: 10px; }
#sb-answer textarea { width: 100%; resize: vertical; min-height: 8em; }

/* Home: "My Story Book" beside My books and the Family button (index.ts). */
#welcome39 #ys-home-storybook { grid-column: 1 / -1; flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
#welcome39 #ys-home-storybook .ys-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* Make my book: the print check's warnings (book.ts). */
.ys-print-warn { border-left: 4px solid var(--ys-warn, #6b3200); padding: 4px 12px; margin: 8px 0; }
.ys-print-warn p, .ys-print-warn ul { margin: 4px 0; }

@media (max-width: 600px) {
  .sb-head { padding: 4px 8px; }
  #sb-book .sb-tool { padding: 6px 10px; font-size: .88em; }
  .sb-stage { padding: 6px; }
  .sb-turn { padding: 8px 12px; }
}

/* The carried UI paints every dialog button (with !important): the Story Book keeps its own quiet buttons. */
html body :is(#sb-book, #sb-answer) button:not(.ys-capture-btn) { background-color: var(--ys-paper) !important; color: var(--ys-ink) !important; border-color: var(--ys-line) !important; }
html body :is(#sb-book, #sb-answer) button:not(.ys-capture-btn):hover { background-color: color-mix(in srgb, var(--ys-ink) 8%, var(--ys-paper)) !important; }
html body :is(#sb-book, #sb-answer) button.ys-primary:not(.ys-capture-btn), html body :is(#sb-book, #sb-answer) button.ys-primary:not(.ys-capture-btn):hover { background-color: var(--ys-btn) !important; color: var(--ys-on-btn) !important; border-color: var(--ys-btn) !important; }
html body :is(#sb-book, #sb-answer) button.ys-danger, html body :is(#sb-book, #sb-answer) button.ys-danger:hover { background-color: var(--ys-error, #8b0000) !important; color: #fff !important; border-color: var(--ys-error, #8b0000) !important; }
html body #sb-book button.sb-link:not(:hover), html body #sb-book button.sb-toc-link:not(:hover) { background-color: transparent !important; border-color: transparent !important; }
.sb-list > li.sb-muted { color: var(--ys-ink); font-style: italic; }
.sb-drop-list summary .sb-muted { margin-left: .3em; }
/* A summary under the pointer or the keyboard focus (More, When and where, Chapters and categories): the
   Story Book's own quiet hover, readable in every theme (the carried UI's hover colour has no matching text
   colour in high-contrast dark). */
html body #sb-book details > summary:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ys-ink) 12%, var(--ys-paper)) !important; color: var(--ys-ink) !important; }

/* ---- Art on the pages (WS-E4-E6, 7 Oct 2026; web/scripts/gen-art.mjs draws every file) ------------------------------ */
/* E4: the paragraph bar under a page's heading - a thin line with a small ornament in the middle (vector: prints crisply). */
:is(.sb-page-opener .sb-chapter-title, .sb-page-question .sb-question, .sb-page-story .sb-story-heading, .sb-page-contents .sb-page-title, .sb-page-end .sb-page-title)::after {
  content: ''; display: block; height: 22px; margin: 10px auto 0; background: url(art/flourish.svg) center / min(240px, 80%) 22px no-repeat;
}
:is(.sb-page-question .sb-question, .sb-page-story .sb-story-heading)::after { margin-bottom: 4px; }

/* E5: a fern watermark behind the words - two pale fronds that sway very slowly. It sits under the text (z-index -1
   in the page's own stacking context), is only a tint of the page's ink, and is off for people who asked for less
   motion's movement (it then stays still), for high contrast and for forced colours. */
.sb-page-inner { isolation: isolate; }
.sb-fern { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sb-fern > span {
  position: absolute; display: block; aspect-ratio: 200 / 320; background: var(--ys-ink); opacity: .085;
  -webkit-mask: url(art/fern.svg) center / contain no-repeat; mask: url(art/fern.svg) center / contain no-repeat;
  transform-origin: 50% 100%; animation: sb-fern-sway 15s ease-in-out infinite alternate;
}
.sb-fern > span:first-child { width: min(46%, 250px); right: -4%; bottom: -3%; }
.sb-fern > span:last-child { width: min(26%, 150px); left: -2%; bottom: 8%; transform: scaleX(-1) rotate(-6deg); animation-name: sb-fern-sway-b; animation-duration: 19s; opacity: .06; }
@keyframes sb-fern-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.4deg); } }
@keyframes sb-fern-sway-b { from { transform: scaleX(-1) rotate(-9deg); } to { transform: scaleX(-1) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .sb-fern > span, .sb-fern > span:last-child { animation: none; } }
html[data-ys-motion="reduce"] .sb-fern > span, html[data-ys-motion="reduce"] .sb-fern > span:last-child, body.ys-reduce-motion45 .sb-fern > span, body.ys-reduce-motion45 .sb-fern > span:last-child { animation: none; }
html[data-ys-contrast="high"] .sb-fern { display: none; }
@media (forced-colors: active) { .sb-fern { display: none; } }
@media print { .sb-fern > span, .sb-fern > span:last-child { animation: none; } }

/* E6: the chapter's picture (a cream tile, so the dark-green line art reads on every theme). */
img.ys-chapter-art { background: #f6efdd; border-radius: 12px; padding: 3px; box-sizing: border-box; object-fit: contain; flex: 0 0 auto; }
.sb-opener-art { display: block; width: 128px; height: 128px; margin: 6px auto 0; }
.sb-opener-art + .sb-chapter-no { margin-top: 10px; }
.sb-story-art { float: right; width: 56px; height: 56px; margin: 0 0 6px 12px; }
.sb-toc-art { width: 36px; height: 36px; border-radius: 8px; }
.sb-toc-out .sb-toc-art { opacity: .5; }

/* The researched-background story (research.ts, WS-C): its mark, pictures with their credits, the birthplace and the
   sources. Tokens only, so every theme (AAA included) reads it; sizes in em. */
.sb-research-mark { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 2px 12px; border: 1px solid var(--ys-line); border-radius: 999px; font: 600 .8em/1.5 system-ui, sans-serif; color: var(--ys-ink); background: color-mix(in srgb, var(--ys-ink) 6%, var(--ys-paper)); }
.sb-research-h { margin: 1em 0 .3em; font: 600 1em/1.3 Literata, Georgia, serif; }
.sb-researched { border-left-style: dashed; }
.sb-research-extras { margin: 12px 0; display: grid; gap: 12px; }
.sb-research-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.sb-research-pic { margin: 0; }
.sb-research-pic img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ys-line); background: color-mix(in srgb, var(--ys-ink) 6%, var(--ys-paper)); }
.sb-research-pic figcaption { margin-top: 4px; font: .82em/1.4 system-ui, sans-serif; color: var(--ys-muted); }
.sb-research-pic figcaption a, .sb-research-map a, .sb-research-source-list a { color: var(--ys-ink); text-decoration: underline; text-underline-offset: 2px; }
.sb-research-map { padding: 8px 12px; border: 1px solid var(--ys-line); border-radius: 10px; }
.sb-research-map p { margin: 4px 0; }
.sb-research-coords { font-variant-numeric: tabular-nums; }
.sb-research-sources summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.sb-research-source-list { margin: 4px 0; padding-left: 1.2em; font: .9em/1.5 system-ui, sans-serif; }
.sb-research-note { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--ys-line); border-radius: 10px; font: .92em/1.4 system-ui, sans-serif; }
.sb-research-note p { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.sb-research-dot { width: .7em; height: .7em; border-radius: 50%; background: var(--ys-ink); flex: 0 0 auto; animation: sb-research-pulse 1.4s ease-in-out infinite; }
@keyframes sb-research-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
html[data-ys-motion="reduce"] .sb-research-dot { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sb-research-dot { animation: none; opacity: 1; } }
/* Sort card: the suggested title, "Suggest again", and "When was this recorded?" (sort.ts, WS-B B2/B3). */
.sb-ctx-title-box { display: grid; gap: 4px; margin-top: 6px; }
.sb-ctx-title-box[hidden], .sb-date-ask[hidden] { display: none; }
.sb-ctx-title-box input { width: 100%; box-sizing: border-box; min-height: 40px; }
.sb-date-ask { display: grid; gap: 6px; margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--ys-line); border-radius: 10px; }
.sb-date-ask p { margin: 0; font-size: .9em; }
.sb-suggest-again { justify-self: start; }

/* The book's structure (7 Oct 2026, WS-A; storybook/structure-ui.ts, undo.ts, library-dnd.ts): Undo / Redo and the
   Archive in the toolbar, the insert-a-chapter line (picture 05), drag handles, the Archive, a chapter's
   categories. Palette tokens only, so the dark and high-contrast themes read as elsewhere. */
#sb-book .sb-undo-tool, #sb-book #sb-tool-archive { padding: 8px 12px; }
@media (max-width: 760px) {
  #sb-book .sb-tools .ys-undo-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #sb-book .sb-undo-tool, #sb-book #sb-tool-archive { width: 44px; padding: 0; }
  .sb-tools { gap: 4px; }
}
.sb-toc li.sb-has-insert, .sb-manage-row.sb-has-insert { position: relative; }
/* A 16 px band across the boundary between two rows (pointing at it shows the line); the ⊕ overhangs it. */
.sb-insert { position: absolute; left: 0; right: 0; top: -8px; height: 16px; z-index: 3; display: flex; align-items: center; }
.sb-insert[data-where="bottom"] { top: auto; bottom: -8px; }
.sb-insert::before { content: ''; position: absolute; left: 28px; right: 0; top: 50%; margin-top: -2px; height: 1px;
  border-top: 1px solid var(--ys-focus, #0b3d91); border-bottom: 1px solid var(--ys-focus, #0b3d91); opacity: 0; transition: opacity .12s; }
html[data-hand="left"] .sb-insert { flex-direction: row-reverse; }
html[data-hand="left"] .sb-insert::before { left: 0; right: 28px; }
#sb-book .sb-insert-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 50%;
  border: 0; color: var(--ys-focus, #0b3d91); opacity: 0; transition: opacity .12s; }
#sb-book .sb-insert-btn .ys-ico { width: 24px; height: 24px; }
.sb-insert:hover::before, .sb-insert:focus-within::before { opacity: 1; }
/* Touch screens have no hover: the ⊕ stays faintly in view so a finger can find it. */
@media (hover: none) { #sb-book .sb-insert-btn { opacity: .55; } }
#sb-book .sb-insert:hover .sb-insert-btn, #sb-book .sb-insert-btn:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sb-insert::before, #sb-book .sb-insert-btn { transition: none; } }
.sb-insert-form { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px dotted var(--ys-line); }
.sb-insert-form input[type="text"] { flex: 1 1 12em; min-width: 0; }
.sb-insert-form .sb-row { margin: 0; }
#sb-book .sb-toc-grip, #sb-book .sb-m-grip { width: 40px; min-width: 40px; padding: 0; border-color: transparent; background: transparent; touch-action: none; cursor: grab; }
.sb-toc-hint { font: .85em/1.4 system-ui, sans-serif; margin: -6px 0 8px; }
.sb-toc li.ys-dragging, .sb-manage-row.ys-dragging, .sb-list > li.ys-dragging { opacity: .5; }
.sb-ch-cats { margin: 14px 0 6px; font-family: system-ui, sans-serif; }
.sb-ch-cats > summary { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; padding: 0 10px; border-radius: 999px; }
.sb-ch-cats .sb-cats { padding: 6px 10px; border: 1px dashed var(--ys-line); border-radius: 10px; }
.sb-archive-ask .sb-ask { margin: 8px 0 0; font-weight: 700; }
.sb-recs { display: grid; gap: 2px; margin: 6px 0 0; }
.sb-archive-h { margin: 14px 0 4px; font: 600 1.05em/1.3 Literata, Georgia, serif; }
.sb-archive-item { border: 1px solid var(--ys-line); border-radius: 10px; padding: 6px 12px; }
.sb-archive-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sb-archive-tools { margin: 0; }
html[data-hand="left"] .sb-archive-line { flex-direction: row-reverse; }
.sb-forever { border-color: var(--ys-error, #8b0000); }
/* My memories (quick.ts): Undo / Redo in its head. */
.ys-lib-undo { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 6px; }
.ys-lib-undo .ys-undo-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; }
.ys-lib-undo .ys-undo-btn .ys-ico { width: 18px; height: 18px; }
html[data-hand="left"] .ys-lib-undo { margin-left: 6px; margin-right: auto; }
@media (max-width: 600px) { .ys-lib-undo .ys-undo-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ys-lib-undo-msg { margin: 4px 12px; font-weight: 600; }
/* Large text on a narrow phone: the head wraps rather than scroll sideways. */
#ys-memories .ys-lib-head { flex-wrap: wrap; align-items: center; }
#ys-memories .ys-lib-head h2 { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
#ys-memories .ys-lib-undo { flex: 0 0 auto; }
/* Big text on a phone: the toolbar wraps under the title rather than push the book sideways. */
.sb-head { flex-wrap: wrap; }
#sb-book .sb-tools { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* ---- The book as it will print (WS-G, 7 Oct 2026; docs/PRINT-LAYOUT.md "The page templates") ------------------------
   Question = centred serif heading + flourish (above); the story's first letter is a drop cap; photos sit on the page
   with captions; a video is its still with a play overlay; voice is a compact player; both keep a "QR at print" place;
   the researched background is a boxed side panel. Tokens only (every theme, AAA included); sizes in em. */

/* Swipes: the browser's own back/forward swipe never starts inside the book (book-input.ts adds the wheel side). */
.sb-book-dialog, .sb-stage, .sb-page { overscroll-behavior-x: contain; }
.sb-stage { touch-action: pan-y pinch-zoom; }

.sb-page-question .sb-question, .sb-page-story .sb-story-heading { text-align: center; }
.sb-page-question .sb-answers .sb-story:first-child .sb-words:not(.sb-research-words) > p:first-child::first-letter,
.sb-page-story .sb-story .sb-words:not(.sb-research-words) > p:first-child::first-letter {
  float: left; font-size: 3.2em; line-height: .82; font-weight: 600; padding: .04em .1em 0 0; font-family: Literata, Georgia, serif;
}
.sb-continues { margin: 4px 0 8px; text-align: right; font: italic .85em/1.4 Literata, Georgia, serif; color: var(--ys-ink); }
.sb-continuation .sb-words-cont p { margin: 0 0 .7em; font-size: 1.05em; }
.sb-story-cont { margin-bottom: 14px; }

/* Photos with captions. */
.sb-media { display: grid; gap: 14px; margin: 14px 0; }
.sb-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; justify-items: center; }
.sb-photo { margin: 0; max-width: 100%; }
.sb-photo img { display: block; max-width: 100%; max-height: 340px; width: auto; height: auto; margin: 0 auto; border-radius: 3px; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); background: color-mix(in srgb, var(--ys-ink) 6%, var(--ys-paper)); }
.sb-photo-cap { margin-top: 6px; text-align: center; font: italic .88em/1.4 Literata, Georgia, serif; color: var(--ys-ink); }
.sb-photo-tools { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; font-family: system-ui, sans-serif; }
.sb-photo-tools .sb-link { font-size: .8em; min-height: 32px; padding: 2px 8px; }
.sb-photo-edit, .sb-photo-form { display: grid; gap: 6px; margin: 8px 0; padding: 10px; border: 1px dashed var(--ys-line); border-radius: 10px; font-family: system-ui, sans-serif; }
.sb-photo-preview { max-width: 100%; max-height: 220px; margin: 0 auto; border-radius: 4px; }
.sb-photo-caption { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; }
.sb-photo-control { margin: 6px 0; font-family: system-ui, sans-serif; }
.sb-photo-file { display: none; }
.sb-mem-photos { margin: 6px 0; }
.sb-mem-photos .sb-photos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.sb-mem-photos .sb-photo img { max-height: 140px; }

/* A video: its still with a play overlay (plays in the page), and a place for the QR code printed in the book. */
.sb-media-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.sb-video-stage { position: relative; min-width: 0; }
.sb-video-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 4px; overflow: hidden; min-height: 44px; }
.sb-video-still { display: block; width: 100%; max-height: 300px; object-fit: cover; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--ys-ink) 12%, var(--ys-paper)); }
.sb-video-overlay { position: absolute; inset: 0; display: grid; place-items: center; }
#sb-book .sb-video-overlay .ys-ico { width: 52px; height: 52px; padding: 12px; box-sizing: border-box; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; }
.sb-video-play:focus-visible { outline: 3px solid var(--ys-ink); outline-offset: 2px; }
.sb-video-el { display: block; width: 100%; max-height: 360px; border-radius: 4px; background: #000; }
.sb-voice-el { width: 100%; min-width: 0; height: 40px; }
.sb-qr { display: grid; justify-items: center; gap: 4px; width: 118px; text-align: center; }
.sb-qr-box { width: 96px; height: 96px; box-sizing: border-box; display: grid; place-items: center; border: 2px dashed var(--ys-ink); border-radius: 4px; font: 700 .72em/1.2 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--ys-ink); }
.sb-qr-line { margin: 0; font: italic .75em/1.3 Literata, Georgia, serif; color: var(--ys-ink); }
@media (max-width: 520px) { .sb-media-item { grid-template-columns: 1fr; justify-items: center; } .sb-qr { width: 100%; } }

/* The researched background is a boxed side panel. */
.sb-researched { border: 1px solid var(--ys-ink); border-left-width: 6px; border-radius: 6px; padding: 12px 14px; background: color-mix(in srgb, var(--ys-ink) 4%, var(--ys-paper)); }

/* Expandable contents (toc-expand.ts). */
.sb-toc li.sb-toc-x { flex-wrap: wrap; }
.sb-toc li.sb-toc-x > .sb-toc-link { flex: 1 1 0; min-width: 7em; }
#sb-book .sb-toc-chev { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; border-color: transparent; background: transparent; }
#sb-book .sb-toc-chev .ys-ico { width: 18px; height: 18px; transition: transform .18s ease; }
.sb-toc-chev[aria-expanded="true"] .ys-ico { transform: rotate(90deg); }
html[data-ys-motion="reduce"] .sb-toc-chev .ys-ico { transition: none; }
@media (prefers-reduced-motion: reduce) { .sb-toc-chev .ys-ico { transition: none; } }
.sb-toc-sub { flex: 1 1 100%; list-style: none; margin: 0 0 6px; padding: 0 0 0 44px; }
.sb-toc-sub[hidden] { display: none; }
.sb-toc li.sb-toc-sub-item { border-bottom: 0; padding: 0; }
#sb-book .sb-toc-sub-link { flex: 1 1 auto; justify-content: flex-start; text-align: left; border-color: transparent; background: transparent; padding: 4px 4px; min-height: 36px; font-weight: 400; font-family: Literata, Georgia, serif; }
.sb-toc-sub-item.sb-toc-done .sb-toc-sub-link { color: var(--ys-muted); }
/* Flat buttons inside the printed-looking pages (the page-wide button family above is for controls, not for a
   contents entry, a chevron or the picture of a video). */
html body #sb-book button:is(.sb-toc-sub-link, .sb-toc-chev, .sb-video-play):not(:hover) { background-color: transparent !important; border-color: transparent !important; }
html body #sb-book button.sb-toc-chev { border-radius: 50%; }
html body #sb-book button.sb-toc-sub-link, html body #sb-book button.sb-video-play { border-radius: 6px; }
html body #sb-book button.sb-video-play { padding: 0; border: 0 !important; background: transparent !important; }
html body #sb-book button.sb-video-play:hover { background: transparent !important; }
#sb-book button.sb-toc-sub-link { padding: 4px 6px; }