/* Our Story (public/story.js) on the shared tokens (public/ui/tokens.css) and ui- components: the
   shelf, starting a story, writing a page, the drawing pad, the book and printing. The story pages
   and the book keep their paper look (they are the content). Loaded from index.html. */

.st-screen { display: grid; gap: var(--space-5); }
.st-inline { display: flex; gap: var(--space-2); }
.st-inline > .ui-input { flex: 1; min-width: 0; }
.st-textarea { min-height: 120px; resize: vertical; line-height: 1.5; font-size: var(--text-md); }
.st-under { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.st-under > :only-child { margin-left: auto; }
.st-speak-hint { text-align: right; }
.st-check { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-strong); cursor: pointer; min-height: var(--tap); }
.st-check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.btn-ico { display: inline-block; width: 22px; height: 22px; flex: none; }
.btn-ico svg { width: 100%; height: 100%; display: block; }
.st-helper { display: grid; gap: 2px; padding: var(--space-3) var(--space-1); }
.st-helper + .st-helper { border-top: 1px solid var(--line); }

/* ---------- shelf ---------- */
.st-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: var(--space-3); }
:where([data-skin="little"]) .st-shelf { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
/* each finished book shows its keepsake cover (design and color, public/story-art.js coverArtSvg) */
a.st-spine {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 6px var(--radius-md) var(--radius-md) 6px; padding: 12px 10px 10px 16px; aspect-ratio: 3 / 4; min-height: 170px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 6px; justify-items: center; align-items: center; text-align: center;
  color: #1C2233; text-decoration: none; box-shadow: inset 8px 0 0 rgba(0, 0, 0, 0.18), var(--shadow-1);
}
a.st-spine.is-dark { color: #FFF6E3; }
.st-spine:active { transform: scale(var(--press-scale)); }
.st-spine-bg { position: absolute; inset: 0; z-index: -1; }
.st-spine-bg svg { width: 100%; height: 100%; display: block; }
.st-spine img { width: 76%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); transform: rotate(-2deg); }
.st-spine b { font: var(--weight-display) 16px / 1.15 var(--font-display); overflow-wrap: anywhere; align-self: start; }
.st-spine small { font-weight: 700; }
/* plates behind the words, so they read on every cover design */
.st-spine b, .st-spine small { background: rgba(255, 255, 255, 0.78); padding: 3px 8px; border-radius: 8px; }
.st-spine.is-dark b, .st-spine.is-dark small { background: rgba(20, 26, 46, 0.6); }

/* ---------- people picker (ui-chip with an avatar) ---------- */
.st-pick-group { display: grid; gap: var(--space-2); }
.st-person > span { gap: 8px; padding-left: 4px; }
.st-person > span .ui-avatar { --av: 30px; }
:where([data-skin="little"]) .st-person > span .ui-avatar { --av: 40px; }

/* ---------- story cards: tap to pick from a list, the dice spins one ---------- */
.story-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-3); }
.story-card { position: relative; border-radius: var(--radius-md); min-height: 96px; border: 2px dashed var(--line-strong); background: var(--surface-sunken); }
.story-card .card-main {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 92px; padding: 10px 48px 10px 10px;
  border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit; border-radius: inherit;
}
.story-card .card-pic { flex: none; width: 60px; height: 60px; }
:where([data-skin="little"]) .story-card .card-pic { width: 76px; height: 76px; }
.story-card .card-pic svg, .opt-pic svg, .starter-pic svg { width: 100%; height: 100%; display: block; }
.story-card .card-words { display: grid; gap: 2px; min-width: 0; }
.story-card small { font-weight: var(--weight-strong); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.story-card .card-text { font: 700 20px/1.1 var(--font-hand); color: var(--ink); overflow-wrap: anywhere; }
.story-card .card-spin, .story-card .card-x {
  position: absolute; right: 2px; width: var(--tap); height: var(--tap); border: 0; background: none; cursor: pointer; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--ink-muted);
}
.story-card .card-spin { bottom: 2px; }
.story-card .card-x { top: 2px; }
.story-card .card-spin .btn-ico { width: 26px; height: 26px; }
.story-card.set { border-style: solid; }
.story-card.set.c-character { background: #FFE7C2; border-color: #F2A93B; }
.story-card.set.c-place { background: #DCEBFA; border-color: #2F86C4; }
.story-card.set.c-problem { background: #EBE3FA; border-color: #7B5DBE; }
.story-card.set.c-twist { background: #D6F1EE; border-color: #2A9D8F; }
.story-card[hidden] { display: none; }
.story-card .card-tag { position: absolute; left: 12px; bottom: 4px; font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--ink-muted); }
.story-card.set .card-tag { display: none; }
.story-card.set .card-text, .story-card.set small, .story-card.set .card-x, .story-card.set .card-main { color: #1C2233; }
.story-card.spinning .card-text { opacity: 0.6; }

/* the card picker (inside the sheet) */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: var(--space-2); }
.pick-list { display: grid; gap: 6px; }
.pick-opt {
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-md); cursor: pointer;
  font: var(--weight-strong) var(--text-sm) / 1.2 var(--font-body); text-align: center;
}
.pick-grid .pick-opt { display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; }
.pick-grid .opt-pic { width: 96px; height: 96px; }
.pick-list .pick-opt { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; text-align: left; min-height: 48px; }
.pick-list .opt-pic { flex: none; width: 40px; height: 40px; }
.pick-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-opt:active { transform: scale(var(--press-scale)); }

/* title ideas */
.title-ideas:empty { display: none; }
.title-ideas { display: grid; gap: var(--space-2); }
.idea-list { display: grid; gap: var(--space-2); }
.idea {
  border: 2px dashed var(--accent); background: var(--surface); color: var(--ink); border-radius: var(--radius-md); padding: 10px 14px;
  font: 700 20px/1.2 var(--font-hand); text-align: left; cursor: pointer; min-height: 48px;
}
.idea[aria-pressed="true"] { border-style: solid; background: var(--accent-soft); }

/* how long: radio cards */
.st-lengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.st-len { position: relative; cursor: pointer; display: grid; }
.st-len input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.st-len > span {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface);
  min-height: 56px; align-content: center;
}
.st-len small { font-weight: 600; color: var(--ink-muted); font-size: var(--text-xs); }
.st-len input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.st-len input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.st-len.wide { grid-column: 1 / -1; }
.st-stepper { display: flex; }

/* ---------- a story in progress ---------- */
.st-head { display: grid; gap: var(--space-3); }
.st-writers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-writer {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: var(--radius-full);
  background: var(--surface-sunken); font-weight: var(--weight-strong); font-size: var(--text-sm);
}
.st-writer.is-turn { background: var(--accent); color: var(--accent-ink); }
.st-writer.is-gone { opacity: 0.45; text-decoration: line-through; }
.st-progress { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); font-weight: var(--weight-strong); }
.st-progress .ui-streetlights { flex-wrap: wrap; row-gap: 4px; }
.st-progress--many .ui-streetlight { width: 13px; height: 25px; }
.st-progress--many .ui-streetlights { gap: 4px; }
.st-progress--count { align-items: center; color: var(--ink-muted); }
.st-write .ui-card { border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.st-cards-shown { gap: 6px; }
.story-pages { display: grid; gap: var(--space-3); }
.story-page {
  background: #FFFDF6; color: #1C2233; border: 1px solid #EADFC6; border-radius: var(--radius-md); padding: 14px 16px; display: grid; gap: 10px;
  box-shadow: var(--shadow-1);
}
.page-by { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.page-by small { color: #6B6455; }
.page-text { font-size: 19px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.page-pic { width: 100%; max-width: 520px; justify-self: center; border-radius: 12px; border: 1px solid #EADFC6; background: #fff; }
.st-actions { justify-content: center; }

/* writing a page: picture starters for little ones */
.starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2); }
.starter { aspect-ratio: 1; min-height: 64px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface); cursor: pointer; padding: 4px; }
.starter:active { transform: scale(var(--press-scale)); }
.starter-pic { display: block; width: 100%; height: 100%; }

/* drawing pad */
.pad-box { display: grid; gap: var(--space-2); }
.pad {
  width: 100%; height: auto; aspect-ratio: 4 / 3; background: #fff; border: 2px solid var(--line); border-radius: var(--radius-md);
  touch-action: none; cursor: crosshair; display: block;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* [ios] no loupe or callout on a long press */
}
.st-colors { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-swatch { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--line-strong); cursor: pointer; padding: 0; }
.st-swatch::after { content: ""; position: absolute; inset: -5px; }
.st-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px var(--surface); }
:where([data-skin="little"]) .st-swatch { width: 44px; height: 44px; }
.st-tool { background: var(--surface-sunken); }
.st-tool[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* ---------- the book: the keepsake pages (.kp), on screen and on paper ---------- */
/* Every size inside a page follows the page's width (container units), so the same page fits a phone,
   a letter sheet or half of one (the folded booklet). */
.st-book { display: grid; gap: var(--space-3); }
.book-stage { display: grid; justify-items: center; overflow: hidden; touch-action: pan-y; }
.book-leaf { width: min(100%, 520px); }
.book-leaf.from-right { animation: flip-in-right 0.35s ease; }
.book-leaf.from-left { animation: flip-in-left 0.35s ease; }
@keyframes flip-in-right { from { transform: translateX(30px) rotateY(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flip-in-left { from { transform: translateX(-30px) rotateY(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .book-leaf.from-right, .book-leaf.from-left { animation: none; } }
:where([data-motion="reduce"]) .book-leaf { animation: none !important; }
.book-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.book-count { font-weight: var(--weight-strong); font-size: var(--text-sm); }
.book-next { min-width: 64px; }
:where([data-skin="little"]) .book-turn { min-width: 72px; min-height: 64px; }
.book-tools { justify-content: center; }

.kp {
  container-type: inline-size; position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 8.5 / 11; background: #FFFDF6; color: #1C2233;
  border-radius: 6px 14px 14px 6px; box-shadow: inset 10px 0 12px -10px rgba(0, 0, 0, 0.25), var(--shadow-2);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.kp h1, .kp p { color: inherit; margin: 0; }
.kp-in { position: absolute; inset: 0; padding: 7cqw 7cqw 5cqw; display: flex; flex-direction: column; align-items: center; gap: 3cqw; text-align: center; }
.kp.is-dark { color: #FFF6E3; }

/* cover */
.kp-cover-art { position: absolute; inset: 0; z-index: -1; }
.kp-cover-art svg { width: 100%; height: 100%; display: block; }
.kp-cover .kp-in { padding-top: 17cqw; padding-bottom: 50cqw; }
.kp-title { font-family: var(--font-display); font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; letter-spacing: -0.01em; text-wrap: balance; }
.kp-title--xl { font-size: 11.5cqw; }
.kp-title--lg { font-size: 9cqw; }
.kp-title--md { font-size: 7cqw; }
.kp-window { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.kp-window img { width: 78%; height: auto; max-height: 100%; object-fit: contain; background: #fff; border: 2.2cqw solid #fff; border-radius: 1.5cqw; box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.3); transform: rotate(-2deg); }
.kp-gap { flex: 1 1 auto; }
.kp-by { font-family: var(--font-hand); font-size: 7.5cqw; line-height: 1.1; font-weight: 700; text-wrap: balance; }
.kp-cover .kp-by { position: absolute; left: 7cqw; right: 7cqw; bottom: 36cqw; }
.kp-cover.no-pic .kp-title { margin-top: 14cqw; }

/* dedication */
.kp-dedication .kp-in { justify-content: center; gap: 5cqw; padding: 14cqw; }
.kp-heart { width: 14cqw; height: 14cqw; display: block; }
.kp-heart svg { width: 100%; height: 100%; display: block; }
.kp-ded { font-family: var(--font-hand); font-size: 8cqw; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: balance; }

/* a story page: picture on top, words below, page number at the bottom */
.kp-story .kp-in { gap: 4cqw; }
.kp-pic { flex: 0 1 66cqw; min-height: 22cqw; width: 100%; display: flex; justify-content: center; }
.kp-pic img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 2cqw; }
.kp-text { flex: 0 0 auto; width: 100%; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-weight: 600; line-height: 1.45; }
.kp-text--xl { font-size: 8cqw; line-height: 1.3; text-align: center; }
.kp-text--lg { font-size: 6.2cqw; line-height: 1.35; }
.kp-text--md { font-size: 4.8cqw; }
.kp-text--sm { font-size: 3.8cqw; }
.kp-text--xs { font-size: 3.1cqw; }
.kp-story.no-pic .kp-text { margin-block: auto; }
.kp-foot { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; font-size: 3.2cqw; font-weight: 700; color: #6B6455; }
.kp-foot > :first-child { text-align: left; }
.kp-story.no-pic .kp-foot { margin-top: 0; }
.kp-num { font-family: var(--font-display); font-size: 4cqw; min-width: 8cqw; }

/* The End and the back page */
.kp-end .kp-in { justify-content: center; gap: 5cqw; }
.kp-the-end { font-family: var(--font-hand); font-size: 18cqw; line-height: 1; font-weight: 700; }
.kp-end-art { width: 60cqw; display: block; }
.kp-end-art svg { width: 100%; display: block; }
.kp-end .kp-by { font-size: 6cqw; color: #4B5366; }
.kp-back .kp-in { justify-content: flex-end; gap: 4cqw; padding-bottom: 12cqw; }
.kp-back-mark svg { width: 16cqw; height: 16cqw; display: block; border-radius: 4cqw; }
.kp-written { font-family: var(--font-body); font-weight: 700; font-size: 4cqw; opacity: 0.9; }
.kp-blank { background: #fff; box-shadow: none; }

/* the keepsake choices under the book */
.kp-designs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.kp-design {
  display: grid; gap: 6px; justify-items: center; padding: 6px 4px 8px; border-radius: var(--radius-md); border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; font: var(--weight-strong) var(--text-xs) / 1.2 var(--font-body);
}
.kp-design[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.kp-design:disabled { cursor: default; opacity: 0.8; }
.kp-design-art { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; }
.kp-design-art svg { width: 100%; height: 100%; display: block; }
.kp-colors .st-swatch:disabled { cursor: default; }
.kp-name-row { display: grid; gap: 6px; }
.kp-howto p + p { margin-top: 6px; }
.kp-print { display: none; }

/* ---------- printing: only the keepsake pages, sized to the chosen paper ---------- */
/* Named pages give each paper and layout its size and orientation. A 12mm margin keeps everything
   inside what home printers can print (and no larger than the portal's other page margins, which
   Chrome uses when it splits landscape pages). The booklet's fold stays in the middle of the sheet. */
@page kp-letter-pages { size: letter portrait; margin: 12mm; }
@page kp-letter-booklet { size: letter landscape; margin: 12mm; }
@page kp-a4-pages { size: A4 portrait; margin: 12mm; }
@page kp-a4-booklet { size: A4 landscape; margin: 12mm; }
@media print {
  body:has(.kp-print) { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body:has(.kp-print) :is(#top, #tabs, #offline, .ui-toasts, .no-print, .ui-burst) { display: none !important; }
  body:has(.kp-print) main { max-width: none !important; padding: 0 !important; margin: 0 !important; display: block !important; }
  .kp-print { display: block !important; }
  .kp-print { --sheet-w: 8.5in; --sheet-h: 11in; }
  .kp-print.kp-paper--a4 { --sheet-w: 210mm; --sheet-h: 297mm; }
  .kp-print--booklet { --sheet-w: 11in; --sheet-h: 8.5in; }
  .kp-print--booklet.kp-paper--a4 { --sheet-w: 297mm; --sheet-h: 210mm; }
  /* inside the 12mm margins, a hair under, so nothing spills onto an extra page */
  .kp-sheet { width: calc(var(--sheet-w) - 24.6mm); height: calc(var(--sheet-h) - 24.6mm); display: flex; overflow: hidden; break-after: page; page-break-after: always; break-inside: avoid; }
  .kp-sheet:last-child { break-after: auto; page-break-after: auto; }
  .kp-print--pages.kp-paper--letter .kp-sheet { page: kp-letter-pages; }
  .kp-print--booklet.kp-paper--letter .kp-sheet { page: kp-letter-booklet; }
  .kp-print--pages.kp-paper--a4 .kp-sheet { page: kp-a4-pages; }
  .kp-print--booklet.kp-paper--a4 .kp-sheet { page: kp-a4-booklet; }
  .kp-sheet .kp { width: 100%; height: 100%; aspect-ratio: auto; flex: none; border-radius: 0; box-shadow: none; }
  .kp-sheet--booklet .kp { width: 50%; }
  .kp-sheet .kp:not(.kp-cover):not(.kp-back) { background: #fff; }
  .kp-sheet--booklet .kp + .kp { border-left: 0.2mm dashed #E4E4E4; } /* the fold */
}