/* Storybook v1. Tokens from the approved mocks (AGENTS.md): ground, ink, teal, muted, error, success; 17px body. Serif faces from the Calmer mock (11 Nov). */
:root {
  --ground: #F6F5F2; --paper: #FFFFFF; --ink: #1D1D1B; --muted: #5C5A55; --faint: #6E6C66; --line: #E4E1DA; --line-strong: #D6D2C9;
  --teal: #0F5F5C; --teal-dark: #0A4644; --teal-wash: #E3EFEE; --error: #B42318; --error-wash: #FDECEA; --success: #1F6B3A; --chip: #ECEAE4;
  --display: "Libre Caslon Text", Georgia, serif; --headline: "Libre Caslon Display", Georgia, serif; --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 17px/1.45 var(--ui); }
a { color: var(--teal); } a:hover { color: var(--teal-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidebar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* top bar, as in the Calmer mock: a link on the left, one label over three segments in the middle; colours are the mock's own */
.top { height: 72px; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 48px; color: #1D1D1B; }
.top:not(:has(.progress)) { display: flex; justify-content: space-between; }
.top-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  font: 400 16px var(--ui); color: #1D1D1B; text-decoration: underline; white-space: nowrap; cursor: pointer; }
.top-link:hover { color: #0F5F5C; }
.top-note { font-size: 16px; font-weight: 600; color: #0F5F5C; text-decoration: none; }
.top-note:hover { text-decoration: underline; }
.top-links { justify-self: start; display: flex; align-items: center; gap: 24px; }
.top-end { justify-self: end; display: flex; align-items: center; gap: 24px; }
.brand { font: 400 22px var(--headline); color: #1D1D1B; text-decoration: none; }
.progress { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.segs { display: flex; gap: 6px; }
.seg { width: 56px; height: 4px; border-radius: 2px; background: #E2DFD8; }
.seg.half { background: #8FB5B2; }
.seg.on { background: #0F5F5C; }

main.wrap { max-width: 1120px; margin: 0 auto; padding: 40px max(16px, 28px) 96px; }
h1 { margin: 0; font-family: var(--headline); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h2 { margin: 0; font-size: 20px; font-weight: 600; }
.muted { color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); font-size: 15px; cursor: pointer; text-decoration: none; color: var(--ink); }
.btn-primary { min-height: 52px; padding: 0 36px; border: none; border-radius: 12px; background: var(--teal); color: #FFFFFF; font-weight: 600; font-size: 17px; }
.btn-primary:hover { background: var(--teal-dark); color: #FFFFFF; }
a.btn-primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary:disabled { background: var(--line); color: var(--faint); cursor: not-allowed; }
.link-btn { min-height: 44px; padding: 0 16px; border: none; background: transparent; color: var(--teal); text-decoration: underline; cursor: pointer; }

/* story screen */
.story { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.story > section { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0 auto; flex: 1 1 100%; max-width: 760px; transition: max-width .55s cubic-bezier(.2,.8,.2,1); }
.story.done > section { flex: 999 1 560px; max-width: none; }
main.wrap:has(.story.done) { max-width: 1400px; }
#scenes-panel { flex: 1 1 100%; min-width: 0; order: 3; }
/* the next step sits after the storyboard, where she finishes */
.story-foot { flex: 1 1 100%; order: 5; display: flex; justify-content: flex-end; }
.story-foot .btn-primary { display: inline-flex; align-items: center; text-decoration: none; }
/* one column (phone, tablet): the book's details right under the story's card, before the characters and the storyboard,
   so the title and her name are near the top however long the cast is */
@media (max-width: 960px) {
  .story.done { gap: 20px; }
  .story.done > section { display: contents; }
  .story.done > section > * { flex: 1 1 100%; min-width: 0; }
  .story.done > aside.side { order: 1; }
  .story.done > section > #manuscript { order: 2; }
}
/* before a story is in, the drop box takes the screen; after, her story is read back as a page beside the details */
.story:not(.done) .box:not(.compact) { min-height: max(340px, calc(100dvh - 440px)); }
@media (min-width: 961px) { .story.done > aside.side { position: sticky; top: 92px; } }
.manuscript { padding: 48px 56px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow);
  font-family: var(--display); font-size: 18px; line-height: 1.7; animation: rise .55s cubic-bezier(.2,.8,.2,1) .1s both; }
.manuscript > * { max-width: 38em; margin: 0 auto; }
.manuscript p + p { text-indent: 1.5em; }
.manuscript h3 { font-size: 24px; font-weight: 600; margin: 40px auto 16px; text-align: center; }
.manuscript h3:first-child { margin-top: 0; }
.manuscript h3 + p { text-indent: 0; }
@media (max-width: 600px) { .manuscript { padding: 24px 20px; font-size: 17px; } }
.toggle { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 360px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--chip); }
.toggle .pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--paper); box-shadow: 0 1px 3px rgba(29,29,27,.15); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.toggle.paste .pill { transform: translateX(100%); }
.toggle button { position: relative; z-index: 1; min-height: 44px; border: none; border-radius: 999px; background: transparent; font-size: 16px; color: var(--muted); cursor: pointer; }
.toggle button[aria-pressed="true"] { color: var(--teal); font-weight: 600; }
.box { position: relative; display: flex; overflow: hidden; border-radius: 20px; min-height: 340px; background: var(--paper); border: 2px solid var(--line-strong); }
.box.upload { border: 2px dashed #B9B5AC; }
.box.upload.drag { border-color: var(--teal); background: #F2F8F7; }
.box.upload.bad { border-color: var(--error); }
.box.compact { min-height: 76px; border: 1px solid var(--line); }
.drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; cursor: pointer; }
.drop:hover { background: #F2F8F7; }
.drop .icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--teal-wash); }
.drop .icon.bad { background: var(--error-wash); }
.drop .big { font-size: 22px; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.filecard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ok { display: flex; align-items: center; gap: 4px; color: var(--success); font-size: 15px; }
textarea.paste { flex: 1; min-height: 336px; padding: 28px; border: none; background: transparent; font-family: var(--display); font-size: 18px; line-height: 1.6; resize: none; outline: none; }
.reading { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; }
.reading .label { display: flex; flex-direction: column; }
.reading .actions { margin-left: auto; display: flex; gap: 8px; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal-wash); overflow: hidden; }
.bar span { display: block; width: 40%; height: 100%; background: var(--teal); animation: slidebar 1.1s ease-in-out infinite; }
/* reading: the bar fills against the expected time instead of sliding */
.bar.fill span { width: 0; animation: none; transition: width 1s linear; }
.done-row { align-self: flex-end; display: flex; align-items: center; gap: 8px; }
.alert { padding: 12px 16px; border-radius: 12px; background: var(--error-wash); color: var(--error); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
/* one row per character: whole sheet on the left, name and role beside it */
ol.scenes { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
ol.scenes li { color: var(--ink); }
aside.side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; animation: rise .55s cubic-bezier(.2,.8,.2,1) .2s both; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.field input, .field select { min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 17px; }
.density { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.density button { min-height: 48px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper); font-size: 15px; cursor: pointer; }
.density button[aria-pressed="true"] { border: 1.5px solid var(--teal); background: var(--teal-wash); color: var(--teal); font-weight: 600; }
.count { font-weight: 600; text-align: center; }

/* notes from whoever is trying the app: "Leave a note" sits at the right of the header on every screen, the dialog opens from it */
dialog.notes { border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(480px, calc(100vw - 32px)); }
dialog.notes::backdrop { background: rgba(29,29,27,.35); }
dialog.notes form { display: flex; flex-direction: column; gap: 12px; }
dialog.notes textarea { min-height: 120px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; resize: vertical; }
dialog.notes .row { display: flex; gap: 8px; justify-content: flex-end; }
dialog.notes .notes-tools { justify-content: flex-start; flex-wrap: wrap; }
#notes-mic.on { background: #B42318; color: #fff; border-color: #B42318; }
#notes-shot { max-height: 200px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; }
.ink { position: fixed; inset: 0; z-index: 1000; cursor: crosshair; touch-action: none; }
.ink-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1001; display: flex; gap: 8px; align-items: center;
  background: #fff; padding: 8px 12px; border-radius: 999px; box-shadow: 0 4px 20px rgba(0,0,0,.2); }

/* phone */
@media (max-width: 640px) {
  .top { padding: 0 16px; column-gap: 12px; }
  .top-links { gap: 16px; }
  .seg { width: 40px; }
  main.wrap { padding-top: 24px; }
  .panel, aside.side { padding: 16px; }
}

/* Your books, as in the Calmer mock: a cover per book (its first picture, the title on it), its line under it, and a dashed New book card */
main.wrap:has(.books) { max-width: 936px; padding-top: 48px; }
.books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 36px; }
.shelf-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.shelf-row:nth-child(2) { animation-delay: .06s; } .shelf-row:nth-child(3) { animation-delay: .12s; } .shelf-row:nth-child(4) { animation-delay: .18s; }
.shelf-row > a { display: flex; flex-direction: column; gap: 12px; width: 100%; color: var(--ink); text-decoration: none; }
.cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px 14px 14px 4px; background: var(--chip); box-shadow: 0 12px 30px rgba(29,29,27,.14); }
.cover img, .cover .thumb-empty { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--chip); }
.cover b { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 18px; background: linear-gradient(to top, rgba(20,20,18,.72), rgba(20,20,18,0));
  color: #FFFFFF; font: 400 22px/1.2 var(--headline); }
.shelf-line { font-size: 16px; }
.shelf-row .shelf-remove { padding: 0; font-size: 15px; }
.new-book { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 4 / 5; border: 2px dashed #CFCBC2; border-radius: 14px;
  background: #FBFAF7; color: var(--ink); font: 400 20px var(--headline); text-decoration: none; }
@media (max-width: 640px) {
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cover b { padding: 36px 12px 12px; font-size: 18px; }
}
.btn-danger { background: var(--error); border-color: var(--error); color: #FFFFFF; font-weight: 600; }
.btn-danger:hover { background: #8F1C13; }
/* signed out: what the app makes beside the way in */
.signin { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 16px; }
.signin .stack { gap: 14px; }
.signin p { font-size: 17px; max-width: 46ch; }
.landing-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.landing-pics img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.signin-box h2 { margin: 0; font-family: var(--headline); font-weight: 400; }
.signin-box .or { text-align: center; margin: 0; }
.signout { margin: 0; }
@media (max-width: 760px) { .signin { grid-template-columns: minmax(0, 1fr); } }
/* Unlock: price lines like a receipt, questions beside them */
.unlock-page { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.unlock-page .card.stack { gap: 16px; }
.price-lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.price-lines .pl { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.price-lines .total { font-weight: 600; font-size: 19px; border-bottom: none; }
.code-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.code-chip button { min-width: 32px; min-height: 32px; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.faq h2 { margin: 0; font-family: var(--headline); font-weight: 400; }
.faq p { margin: 0 0 8px; max-width: 46ch; }
@media (max-width: 760px) { .unlock-page { grid-template-columns: minmax(0, 1fr); } }