@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Inter:wght@400;500;600&display=swap');

/* The app's own look: a quiet workspace (white surfaces, hairlines, one blue). The marketing site
   (docs/) keeps its palette; only the sign-in page's photograph is shared with it. */
:root {
  --ink: #101828;
  --ink-soft: #344054;
  --muted: #667085;
  --faint: #98a2b3;
  --bg: #ffffff;
  --surface: #ffffff;
  --sunken: #f5f7fa;
  --track: #e8ecf2;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --primary: #1f4e9c;
  --primary-dark: #183e7d;
  --primary-soft: #e9f0fb;
  --primary-line: #a9c0e8;
  --ok: #17794a;
  --ok-soft: #e4f4ea;
  --warn: #b25e09;                     /* something waits for the author */
  --warn-strong: #d97706;
  --warn-soft: #fdf0d9;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --mark: #fdecb0;                     /* what is being read aloud */
  --mark-strong: #f8d457;
  --night: #101c30;                    /* the dark surfaces: the player, the toolbars over the text */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 16px 40px rgba(16,24,40,.14), 0 2px 8px rgba(16,24,40,.06);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --side: 248px;                       /* the sidebar's width */
  --bar: 0px;                          /* the height of what sticks to the top (the sidebar, on a narrow screen) */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i .fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { background: var(--sunken); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary, .btn.dark { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover, .btn.dark:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn.primary:disabled:hover, .btn.dark:disabled:hover { background: var(--primary); border-color: var(--primary); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--sunken); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #912018; border-color: #912018; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn svg.i { width: 16px; height: 16px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 500; text-align: left; cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn:disabled { opacity: .5; cursor: default; text-decoration: none; }
.link-btn.danger { color: var(--danger); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.field input, .field select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; outline: none; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.hint { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); font-size: 13.5px; min-height: 20px; margin: 6px 0 0; }

/* ---------- auth ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); min-height: 100vh; }
.auth-art { position: relative; overflow: hidden; background: #172923 url("/assets/books-and-headphones-background.webp") center 54% / cover no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 44px 48px; }
.auth-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,18,15,.78), rgba(9,18,15,.05) 58%), linear-gradient(90deg, rgba(12,24,20,.25), transparent 60%); }
.auth-art > * { position: relative; }
.auth-art .brand { color: #f4efe6; padding: 0; font-weight: 500; font-size: 20px; }
.auth-art .brand svg { width: 22px; height: 22px; }
.auth-art blockquote { margin: 0; max-width: 520px; font-family: var(--serif); font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.01em; }
.auth-art blockquote em { color: #ffd4c4; }
.auth-art p { max-width: 460px; color: rgba(255,255,255,.82); margin: 16px 0 0; font-size: 15px; }
.auth-panel { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.05; margin: 0 0 8px; letter-spacing: -.015em; }
.auth-card .lede { color: var(--muted); margin: 0 0 28px; font-size: 15px; }
.auth-card .btn.primary { width: 100%; min-height: 44px; margin-top: 6px; }
.auth-switch { margin-top: 22px; color: var(--muted); font-size: 14px; text-align: center; }
.auth-switch a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-foot { margin-top: 28px; display: flex; gap: 12px; justify-content: center; color: var(--muted); font-size: 13px; }
.auth-foot span { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- the workspace: a sidebar, and the page beside it ---------- */
.brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; text-decoration: none; font: 600 21px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.brand svg { width: 26px; height: 26px; flex: none; color: var(--primary); }
.side { position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--side); display: flex; flex-direction: column; padding: 22px 12px 12px; background: linear-gradient(180deg, #f8fafd 0%, #eef3fa 100%); border-right: 1px solid var(--line); }
.side-label { margin: 30px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.side-nav { display: grid; gap: 2px; }
.side-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 500; text-decoration: none; white-space: nowrap; }
.side-link svg.i { width: 20px; height: 20px; color: var(--muted); }
.side-link:hover { background: rgba(31,78,156,.07); color: var(--ink); }
.side-link.here { background: #dfe9f8; color: var(--primary-dark); font-weight: 600; }
.side-link.here svg.i { color: var(--primary); }
.side-foot { margin-top: auto; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
button.side-link { position: relative; width: 100%; border: 0; background: none; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.side-link .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn-strong); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; }
.worker-note { display: flex; gap: 8px; align-items: center; padding: 0 12px; font-size: 12.5px; color: var(--muted); }
.side-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.side-user:hover { background: rgba(31,78,156,.07); }
.avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.side-who { flex: 1; min-width: 0; display: grid; }
.side-who b { font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-who small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user > svg.i { width: 16px; height: 16px; color: var(--faint); }
.workspace { margin-left: var(--side); min-height: 100vh; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 36px clamp(16px, 3vw, 40px) 90px; }

/* Inside a book the sidebar steps aside: the page is for the book. */
@media (min-width: 1024px) {
  body.in-book { --side: 68px; }
  body.in-book .side { padding-inline: 10px; }
  body.in-book .brand { padding: 0; justify-content: center; }
  body.in-book .brand span, body.in-book .side-label, body.in-book .side-link span,
  body.in-book .side-who, body.in-book .side-user > svg.i { display: none; }
  body.in-book .side-nav { margin-top: 30px; }
  body.in-book .side-link { justify-content: center; padding: 0; }
  body.in-book .side-user { justify-content: center; padding: 6px 0; }
  body.in-book .side-link .count { position: absolute; top: 3px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  body.in-book .worker-note { justify-content: center; padding: 0; font-size: 0; gap: 0; }    /* just the status dot */
}
@media (max-width: 1023px) {
  :root { --side: 0px; --bar: 56px; }
  .side { position: sticky; inset: 0 0 auto 0; width: auto; height: var(--bar); flex-direction: row; align-items: center; gap: 4px; padding: 0 clamp(10px, 3vw, 24px); border-right: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
  .brand { padding: 0; font-size: 19px; }
  .brand svg { width: 22px; height: 22px; }
  .side-label, .side-who, .side-user > svg.i { display: none; }
  .side-nav { display: flex; gap: 2px; margin-left: auto; }
  .side-link { min-height: 36px; padding: 0 10px; gap: 8px; }
  .side-link svg.i { width: 18px; height: 18px; }
  .side-foot { display: flex; align-items: center; gap: 2px; margin: 0 0 0 2px; padding: 0; border: 0; }
  .side-foot .side-link { width: auto; }
  .side-foot .side-link span { display: none; }
  .side-link .count { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  .side-user { width: auto; padding: 4px; }
  .avatar { width: 32px; height: 32px; font-size: 12px; }
  .worker-note { padding: 0; font-size: 0; gap: 0; }            /* just the status dot */
  .workspace { margin-left: 0; }
  .wrap { padding-top: 24px; }
}
@media (max-width: 640px) {
  .brand span, .side-link span { display: none; }
  .side-link { padding: 0 9px; }
}

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 0 22px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }
.notice.ok { background: var(--ok-soft); color: var(--ok); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-title { margin: 0; font: 500 22px/1.2 var(--serif); letter-spacing: -.01em; }

/* ---------- bringing a book in ---------- */
.sheet { width: min(900px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--ink); box-shadow: var(--shadow); }
.sheet::backdrop, .account::backdrop { background: rgba(16, 24, 40, .45); }
.sheet .upload { margin: 0; border: 0; box-shadow: none; border-radius: 14px; }
.upload { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; overflow: hidden; margin-bottom: 30px; }
.drop { position: relative; display: grid; place-items: center; text-align: center; gap: 10px; min-height: 300px; margin: 20px; padding: 28px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: var(--sunken); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-soft); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--primary); display: grid; place-items: center; margin: 0 auto 10px; box-shadow: var(--shadow-sm); }
.drop .icon svg { width: 22px; height: 22px; }
.drop strong { font-size: 15.5px; font-weight: 600; }
.drop .hint { margin: 4px 0 0; }
.drop .file-chosen { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.upload-side { padding: 24px 24px 22px 6px; display: flex; flex-direction: column; }
.upload-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upload-side h3 { margin: 0 0 4px; font: 500 24px/1.2 var(--serif); letter-spacing: -.01em; }
.upload-side > p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.voices { display: grid; gap: 8px; margin-bottom: 18px; }
.voice { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.voice:hover { border-color: var(--line-strong); }
.voice.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.voice input { accent-color: var(--primary); }
.voice div { flex: 1; min-width: 0; }
.voice strong { display: block; font-size: 14px; font-weight: 600; }
.voice small { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.voice-head .link-btn { font-size: 13px; }
.voice-group { margin: 6px 2px -2px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.voice-group:first-child { margin-top: 0; }
.upload-side .voices, .voice-list { max-height: min(46vh, 380px); overflow-y: auto; padding: 3px; margin-inline: -3px; scrollbar-width: thin; }   /* (a dozen narrators still fit) */
.account-foot.between { justify-content: space-between; align-items: center; gap: 14px; }
.upload-side .btn.primary { margin-top: auto; }
.price-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.play { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #e9eef6; color: var(--primary-dark); display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color .15s; }
.play:hover { background: #dbe4f2; }
.play svg { width: 14px; height: 14px; }

/* ---- Narrators: ours, the author's own, and making one ---- */
.narrators-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 6px; }
.narrators h2 { margin: 0; font: 500 22px/1.2 var(--serif); letter-spacing: -.01em; }
.maker { display: grid; gap: 14px; padding: 24px; }
.maker .hint { margin: 0; font-size: 13.5px; }
.maker textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font: inherit; line-height: 1.5; resize: vertical; box-shadow: var(--shadow-sm); }
.maker textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.maker-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.maker-starts .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.maker-starts .chip { min-height: 30px; padding: 0 10px; font-size: 13px; }
.maker-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.maker .error:empty { display: none; }
.audition { display: grid; gap: 10px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.audition-told { margin: 0; font: 400 17px/1.45 var(--serif); color: var(--ink-soft); }
.audition .bar { height: 6px; }
.take-row, .narrator { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.take-row strong { font-size: 14px; font-weight: 600; }
.take-row.kept { border-color: #a8d5bc; background: #f6fbf8; }
.kept-as { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.kept-as svg { width: 16px; height: 16px; }
.name-form { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.name-form input { flex: 1; min-width: 140px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font: inherit; }
.name-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.narrator-lists { display: grid; gap: 28px; }
.narrator-lists section { display: grid; gap: 12px; }
.narrator-list { display: grid; gap: 8px; }
.narrator-list .none { margin: 0; padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.narrator { align-items: start; box-shadow: var(--shadow-sm); transition: border-color .4s, box-shadow .4s; }
.narrator.fresh { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.narrator-who { display: grid; gap: 3px; min-width: 0; }
.narrator-who strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.narrator-who p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.narrator-who small { color: var(--ink-soft); font-size: 12.5px; }
.narrator-who .error:empty { display: none; }
.narrator-who .name-form { grid-column: auto; }
.narrator-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 13px; }
.narrator-acts .link-btn { font-size: 13px; }
.narrator-acts .confirm { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; color: var(--muted); }
@media (max-width: 899px) {
  .narrators-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .maker { padding: 20px 18px 22px; }
}
@media (max-width: 560px) {
  .take-row, .narrator { grid-template-columns: auto minmax(0, 1fr); }
  .take-row > .btn, .take-row > .kept-as, .narrator-acts { grid-column: 2; justify-self: start; align-items: flex-start; }
  .narrator-acts { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
}

/* ---------- where a book stands ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; justify-self: start; white-space: nowrap; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.5; background: var(--sunken); color: var(--ink-soft); }
.pill svg.i { width: 14px; height: 14px; stroke-width: 2; }
.pill.work { background: var(--primary-soft); color: var(--primary); }
.pill.ready { background: var(--ok-soft); color: var(--ok); }
.pill.need, .pill.action { background: var(--warn-soft); color: var(--warn); }
.pill.fail { background: var(--danger-soft); color: var(--danger); }
.pill.action { padding-left: 10px; }
@keyframes pulse { 50% { opacity: .3; } }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); }
.dot.need { background: var(--warn-strong); }
.dot.work { background: var(--primary); animation: pulse 1.4s ease-in-out infinite; }
.dot.ready { background: var(--ok); }
.dot.fail { background: var(--danger); }
.dot.off { background: var(--faint); }
.bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar span { display: block; height: 100%; min-width: 4%; border-radius: inherit; background: var(--primary); transition: width .6s ease; }
/* How much of the book is audio yet. */
.meter { height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .6s ease; }

/* ---------- test checkout ---------- */
.center { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--sunken); }
.checkout { width: 100%; max-width: 420px; padding: 32px; text-align: center; }
.checkout h1 { font: 500 30px/1.1 var(--serif); letter-spacing: -.015em; margin: 14px 0 6px; }
.checkout .amount { font: 500 48px/1 var(--serif); margin: 22px 0 6px; }
.checkout .btn { width: 100%; margin-top: 12px; }
.checkout .btn.primary { margin-top: 22px; min-height: 44px; }
.checkout code { font-size: 12px; background: var(--sunken); padding: 1px 5px; border-radius: 5px; }

/* ---------- account and the other dialogs ---------- */
.account { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 26px 26px 22px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.account h2 { margin: 0 0 4px; font: 500 24px/1.15 var(--serif); letter-spacing: -.012em; }
.account h3 { margin: 22px 0 12px; font: 600 14.5px/1.3 var(--sans); }
.account code { font-size: 12px; background: var(--sunken); padding: 1px 5px; border-radius: 5px; }
.account-close { position: absolute; top: 20px; right: 24px; margin: 0; }
.account-close .link-btn { color: var(--muted); }
.account-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.account .notice { margin: 12px 0 0; }
.confirm p { margin: 12px 0 0; }
.confirm .warn { padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.rename-form { display: grid; gap: 14px; margin-top: 14px; }
.rename-form input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.rename-form input:focus, .rename-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.rename-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font: inherit; line-height: 1.5; resize: vertical; }
.rename-form .link-btn { justify-self: start; }
.rename-form .hint, .rename-form .error { margin: 0; }
.rename-form .error:empty { display: none; }
.voice-list { display: grid; gap: 8px; margin: 14px 0 0; }
/* Help: what the customer wrote to us, and our answers */
.help { width: min(520px, calc(100vw - 32px)); }
.help-said { display: grid; gap: 10px; max-height: min(44vh, 380px); margin-top: 14px; overflow-y: auto; }
.help-said:empty { display: none; }
.help-said .bubble { max-width: 88%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; background: var(--sunken); justify-self: end; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.help-said .bubble.us { justify-self: start; border-color: var(--primary-line); border-radius: 12px 12px 12px 4px; background: var(--primary-soft); }
.help-said .bubble small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; white-space: normal; }

/* ---------- the overview and the shelf: every book the author has brought ---------- */
.empty { padding: 42px 24px; text-align: center; color: var(--muted); }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 28px; }
.page-head h1 { margin: 0; font: 500 clamp(30px, 3.2vw, 40px)/1.1 var(--serif); letter-spacing: -.018em; }
.summary { margin: 8px 0 0; max-width: 68ch; color: var(--muted); font-size: 15px; }
.tools { display: flex; align-items: center; gap: 10px; }
.search { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--muted); box-shadow: var(--shadow-sm); }
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.search svg { width: 16px; height: 16px; }
.search input { width: 190px; border: 0; outline: none; background: transparent; font-size: 14px; color: var(--ink); }

.overview { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(250px, 1fr); gap: 20px; margin-bottom: 40px; }
/* The book to go on with. */
.continue { padding: 22px 24px 24px; }
.continue-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.continue-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.continue-top h3 { margin: 0 0 6px; font: 500 24px/1.15 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.continue-top h3 a { color: inherit; text-decoration: none; }
.continue-top h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.voice-line { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.voice-line svg.i { width: 16px; height: 16px; color: var(--muted); }
.progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 8px; font-size: 14px; color: var(--ink-soft); }
.progress-row b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.continue .meter { height: 8px; }
/* What there is to hear of it, without opening it. */
.mini-player { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.mini-player .play { width: 40px; height: 40px; }
.mini-player .play svg { width: 16px; height: 16px; }
.wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 34px; cursor: pointer; }
.wave i { flex: 1 1 0; min-width: 1px; max-width: 3px; height: var(--h, 40%); border-radius: 2px; background: #c3ccd9; }
.wave i.on { background: var(--primary); }
.mini-player .time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The library in three numbers. */
.stats { display: grid; align-content: start; gap: 20px; padding: 22px 24px 24px; }
.stat-list { display: grid; gap: 18px; }
.stat { display: flex; align-items: center; gap: 14px; }
.stat-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sunken); border: 1px solid var(--line); color: var(--ink-soft); }
.stat-icon svg.i { width: 20px; height: 20px; }
.stat b { display: block; font: 500 22px/1.15 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.stat span { color: var(--muted); font-size: 13.5px; }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.list-head h2 { margin: 0; font: 500 28px/1.15 var(--serif); letter-spacing: -.015em; }
.tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { position: relative; padding: 12px 14px 13px; border: 0; background: none; color: var(--muted); font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.tabs small { margin-left: 6px; color: var(--faint); font-size: 12.5px; font-weight: 500; }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.shelf .empty { grid-column: 1 / -1; }
.tile { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "cover body" "foot foot"; gap: 14px 16px; padding: 16px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.tile:hover { border-color: var(--line-strong); box-shadow: 0 8px 24px rgba(16,24,40,.08); }
.tile:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tile .cover { grid-area: cover; }
.tile-body { grid-area: body; display: grid; align-content: start; gap: 8px; min-width: 0; }
.tile-body h3 { margin: 0; font: 500 18px/1.2 var(--serif); letter-spacing: -.008em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { margin: 0; color: var(--muted); font-size: 13px; }
.meter-row { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.meter-row .meter { flex: 1; }
.meter-row b { min-width: 30px; text-align: right; color: var(--muted); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.meter-row b:empty { display: none; }
.tile .voice-line { margin: 0; font-size: 13px; color: var(--muted); }
.tile-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.tile-foot [data-line] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile:hover .btn:not(.primary) { background: var(--sunken); color: var(--ink); }
.tile:hover .btn.primary { background: var(--primary-dark); border-color: var(--primary-dark); }
/* A book without cover art has a cover set in type, in a colour it keeps. */
.cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-self: start; width: 100%; aspect-ratio: 2 / 3; padding: 16% 13% 12%; overflow: hidden; border-radius: 4px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%), linear-gradient(0deg, rgba(0,0,0,.26), rgba(0,0,0,0) 55%), var(--cloth, #1f3a5f); color: #f8f5ee; text-align: center; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.22), 0 8px 18px rgba(16,24,40,.14); }
.cover::after { content: ""; position: absolute; inset: 6.5%; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; pointer-events: none; }
.cover-title { font: 500 var(--cover-size, 15px)/1.14 var(--serif); letter-spacing: -.005em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cover-by { font: 600 max(6.5px, calc(var(--cover-size, 15px) * .44))/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover.lg { --cover-size: 21px; }
.cover.md { --cover-size: 14.5px; }

.choice { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--track); }
.choice button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.choice button:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,.6); }
.choice button:disabled { opacity: .45; cursor: default; }
.choice button[data-choice="accept"][aria-pressed="true"] { background: var(--ok); color: #fff; }
.choice button[data-choice="retry"][aria-pressed="true"] { background: var(--primary); color: #fff; }
.chip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink-soft); font-weight: 500; font-size: 13.5px; cursor: pointer; }
.chip:hover { border-color: var(--faint); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- a book: its chapters, its text, its audio, and the notes beside it ---------- */
body.in-book .wrap { max-width: 1440px; padding-top: 14px; }
.bookpage { --strip: 60px; --crumb: 40px; }      /* --crumb: the height of the way back, which sticks above the strip */
.book-bar { position: sticky; top: var(--bar); z-index: 10; display: flex; align-items: center; gap: 10px; height: var(--crumb); margin: 0 -4px 2px; padding: 0 4px; background: var(--bg); }
.book-bar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; opacity: 0; transition: opacity .15s ease; }
.book-bar-title::before { content: "/"; margin-right: 10px; color: var(--faint); font-weight: 400; }
.book-bar.stuck .book-bar-title { opacity: 1; }
.book-head { display: grid; gap: 8px; margin-bottom: 18px; }
.back { display: inline-flex; flex: none; align-items: center; gap: 6px; justify-self: start; color: var(--muted); font-size: 13.5px; text-decoration: none; }
.back:hover { color: var(--ink); text-decoration: none; }
.back svg { width: 15px; height: 15px; }
@media (max-width: 1023px) {      /* the bar across the top has the way back: this one scrolls with the page */
  .bookpage { --crumb: 12px; }
  .book-bar { position: static; height: auto; min-height: 28px; }
  .book-bar-title { display: none; }
}
.book-title-row { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.book-title-row h1 { margin: 0; font: 500 clamp(28px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.book-head .summary { margin: 2px 0 0; font-size: 14px; }
.book-tools { display: flex; flex: none; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; box-shadow: var(--shadow-sm); }
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); min-width: 230px; display: grid; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); animation: pop .14s ease-out; }
.menu button, .menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 9px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); text-align: left; text-decoration: none; font: 500 14px/1.3 var(--sans); cursor: pointer; }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--sunken); outline: none; }
.menu small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.menu .danger { color: var(--danger); }
.menu-wrap { position: relative; }

/* What the book needs now, and the one thing to do about it: always in reach while reading. */
.strip { position: sticky; top: calc(var(--bar) + var(--crumb)); z-index: 9; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.05); }
.strip::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: 100%; height: 13px; background: var(--bg); }   /* nothing shows between it and the top */
.strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 11px 12px 11px 16px; }
.strip-say { display: flex; align-items: center; gap: 12px; flex: 1 1 340px; min-width: 0; }
.strip-say p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.strip-say b { font-weight: 600; color: var(--ink); }
.strip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.strip .meter { height: 3px; margin: 0 14px; border-radius: 3px; }
.strip .meter + .review-row, .strip .meter:last-child { margin-bottom: 0; }
.strip > .meter { margin-bottom: 10px; }
/* Stepping from one passage that needs the author's ear to the next. */
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--sunken); font-size: 13.5px; font-weight: 500; }
.bar-nav { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--night); color: #fff; }
.nav-arrow { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.nav-arrow:hover, .nav-where:hover { background: rgba(255, 255, 255, .16); }
.nav-where { min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 600 13px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.bar-left { flex: 1; min-width: 0; color: var(--muted); font-weight: 400; }
.review-row .buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.book-hint { margin: -6px 0 20px; color: var(--muted); font-size: 14px; }
.book-hint .link-btn { font-size: 14px; }
.book-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 32px; align-items: start; }
.book-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }

/* The rail: the book's chapters (a line runs down them as far as the audio reaches), its voices, its files. */
.rail { position: sticky; top: calc(var(--bar) + var(--crumb) + var(--strip) + 18px); max-height: calc(100vh - var(--bar) - var(--crumb) - var(--strip) - 110px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.rail-toggle { display: none; }
.rail-label { margin: 0 0 8px 2px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rail-find { display: flex; margin: 0 0 20px; }
.rail-find .search { flex: 1; min-width: 0; min-height: 36px; }
.rail-find .search input { width: 100%; min-width: 0; }
.rail-found { display: block; min-height: 18px; margin: -14px 0 14px 4px; }
.chapters { list-style: none; margin: 0 0 24px; padding: 0; }
.ch { position: relative; display: flex; align-items: center; border-radius: 0 7px 7px 0; color: var(--muted); }
.ch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--primary), var(--primary)) no-repeat 0 0 / 100% var(--fill, 0%), var(--line); }
.ch:first-child::before { border-radius: 2px 2px 0 0; }
.ch:last-child::before { border-radius: 0 0 2px 2px; }
.ch.some, .ch.all { color: var(--ink-soft); }
.ch-go { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 7px 4px 7px 14px; border: 0; background: none; color: inherit; text-align: left; font: 400 14px/1.3 var(--sans); cursor: pointer; }
.ch-go span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ch-go small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ch-go small b { color: var(--warn); font-weight: 600; }
.ch:hover { background: var(--sunken); }
.ch.here { background: var(--primary-soft); color: var(--ink); }
.ch.here .ch-go { font-weight: 500; }
.ch-play { width: 28px; height: 28px; flex: none; margin-right: 5px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--primary-dark); cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s; }
.ch-play svg { width: 13px; height: 13px; }
.ch:hover .ch-play, .ch-play:focus-visible, .ch.sounding .ch-play { opacity: 1; }
.ch-play:hover { background: var(--primary); color: #fff; }
.ch.sounding .ch-play { background: var(--primary); color: #fff; }
.ch.none .ch-play { display: none; }
@media (pointer: coarse) { .ch-play { opacity: 1; } }
.cast { display: grid; gap: 8px; margin: 0 0 24px; }
.voice-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
.voice-row strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.voice-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.voice-row .link-btn { grid-column: 2; justify-self: start; font-size: 13px; }
.voice-told { grid-column: 1 / -1; display: grid; gap: 5px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.voice-told small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.voice-told p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.voice-told .link-btn { grid-column: auto; }
.files { display: grid; gap: 6px; margin: 0 0 24px; }
.file { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.3; box-shadow: var(--shadow-sm); }
.file:hover { border-color: var(--line-strong); background: var(--sunken); }
.file small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.file svg { color: var(--primary); }

/* The player: what is being read, wherever the reader is. */
.playbar { position: fixed; left: calc(50% + var(--side) / 2); bottom: 20px; z-index: 26; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; width: min(640px, calc(100vw - var(--side) - 24px)); padding: 7px 8px; border-radius: 14px; background: var(--night); color: #fff; box-shadow: var(--shadow); overflow: hidden; animation: playbar-in .2s ease-out; }
@keyframes playbar-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.playbar button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: #fff; cursor: pointer; }
.playbar button:hover { background: rgba(255, 255, 255, .14); }
.playbar button svg { width: 17px; height: 17px; }
.playbar .main { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--night); }
.playbar .main:hover { background: #dbe6f8; }
.playbar .main svg { width: 18px; height: 18px; }
.playbar .what { flex: 1; min-width: 0; width: auto; height: auto; display: grid; justify-items: start; gap: 1px; padding: 4px 12px; border-radius: 10px; text-align: left; font: 500 13px/1.3 var(--sans); }
.playbar .what b, .playbar .what span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playbar .what b { font-weight: 600; font-size: 13.5px; }
.playbar .what span { color: rgba(255, 255, 255, .68); font-weight: 400; }
.playbar .speed { width: auto; min-width: 46px; padding: 0 10px; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.playbar-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .14); pointer-events: none; }
.playbar-progress i { display: block; height: 100%; width: 0; background: #8fb2ee; transition: width .4s ease; }
body.with-player .wrap { padding-bottom: 130px; }

/* the first visit: a demonstration, not a manual */
.book-tip { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin: 0 0 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.tip-demo { display: grid; place-items: center; padding: 74px 32px 34px; background: var(--sunken); border-right: 1px solid var(--line); }
.demo-page { margin: 0; max-width: 32ch; font: 400 20px/1.75 var(--serif); color: var(--faint); }
.demo-words { position: relative; display: inline-block; padding: 0 2px; border-radius: 3px; color: var(--ink); background: linear-gradient(#cfe0fb, #cfe0fb) no-repeat 0 0 / 0% 100%; }
.demo-bar { position: absolute; left: 50%; bottom: calc(100% + 14px); display: inline-flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--night); color: #fff; font: 600 12.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 10px 26px rgba(16,24,40,.24); opacity: 0; transform: translate(-50%, 6px); }
.demo-bar::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: var(--night); border-radius: 2px; transform: translate(-50%, -5px) rotate(45deg); }
.demo-bar > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 6px; }
.demo-bar svg { width: 14px; height: 14px; color: #a9c4f2; }
.tip-demo.demo-running .demo-words { animation: demo-select 6s ease-in-out 3; }
.tip-demo.demo-running .demo-bar { animation: demo-bar 6s ease-in-out 3; }
.tip-demo.demo-running .demo-sing { animation: demo-press 6s ease-in-out 3; }
.tip-demo.demo-done .demo-words { background-size: 100% 100%; }
.tip-demo.demo-done .demo-bar { opacity: 1; transform: translate(-50%, 0); }
.tip-demo.demo-done .demo-sing { background: rgba(255,255,255,.16); }
@keyframes demo-select { 0%, 10% { background-size: 0% 100%; } 32%, 88% { background-size: 100% 100%; } 97%, 100% { background-size: 0% 100%; } }
@keyframes demo-bar { 0%, 34% { opacity: 0; transform: translate(-50%, 6px); } 42%, 86% { opacity: 1; transform: translate(-50%, 0); } 93%, 100% { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes demo-press { 0%, 56% { background: transparent; } 61%, 86% { background: rgba(255,255,255,.16); } 93%, 100% { background: transparent; } }
.tip-copy { display: grid; align-content: center; gap: 10px; padding: 28px 32px; }
.tip-copy h2 { margin: 0; font: 500 24px/1.15 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.tip-copy p { margin: 0; color: var(--ink-soft); }
.tip-copy p.hint { color: var(--muted); }
.tip-copy .btn { justify-self: start; margin-top: 8px; }

/* the book */
.book-text { position: relative; min-width: 0; padding: clamp(26px, 4.5vw, 64px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font: 400 19.5px/1.75 var(--serif); color: var(--ink); }
.book-text .para { margin: 0 0 1.05em; }
.book-text h3.para { margin: 1.6em 0 .7em; font: 500 23px/1.3 var(--serif); }
.book-text > .para:first-child { margin-top: 0; }
.book-text > .hint, .book-text > .error { font-family: var(--sans); }
.book-text ::selection { background: #cfe0fb; }
.bp { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .25s ease, opacity .5s ease; }
.bp.hover { background-color: rgba(16, 24, 40, .045); }
.bp.left-out { color: #a4acb9; }
.bp.held { background-image: linear-gradient(transparent 7%, rgba(217, 119, 6, .13) 7%, rgba(217, 119, 6, .13) 93%, transparent 93%); box-shadow: inset 0 -1.5px 0 rgba(178, 94, 9, .45); }
.bp.held.ok { background-image: linear-gradient(transparent 7%, rgba(23, 121, 74, .08) 7%, rgba(23, 121, 74, .08) 93%, transparent 93%); box-shadow: inset 0 -1.5px 0 rgba(23, 121, 74, .35); }
.book-text .bp.lit { background-image: linear-gradient(transparent 4%, rgba(217, 119, 6, .24) 4%, rgba(217, 119, 6, .24) 96%, transparent 96%); background-repeat: no-repeat; background-size: 100% 100%; animation: marker .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes marker { from { background-size: 0% 100%; } }
@property --kept { syntax: "<number>"; inherits: false; initial-value: 0; }
.book-text .bp.just-kept { background-image: linear-gradient(transparent 4%, rgb(23 121 74 / calc(var(--kept) * .2)) 4%, rgb(23 121 74 / calc(var(--kept) * .2)) 96%, transparent 96%); background-repeat: no-repeat; animation: kept 2.3s ease both; }
@keyframes kept { 0% { --kept: 1; background-size: 0% 100%; } 30%, 65% { --kept: 1; background-size: 100% 100%; } 100% { --kept: 0; background-size: 100% 100%; } }
.book-text mark.hl { padding: 0 1px; border-radius: 3px; color: inherit; background: linear-gradient(transparent 5%, var(--primary-soft) 5%, var(--primary-soft) 95%, transparent 95%); box-shadow: inset 0 -2px 0 var(--primary-line); cursor: pointer; transition: background-color .15s; }
.book-text mark.hl.in { background: linear-gradient(transparent 5%, #d6e3f8 5%, #d6e3f8 95%, transparent 95%); box-shadow: inset 0 -2px 0 var(--primary); }   /* a spelling inside words that are sung, whispered… */
.book-text mark.hl:hover, .book-text mark.hl.on { background: linear-gradient(transparent 5%, #cfdef6 5%, #cfdef6 95%, transparent 95%); box-shadow: inset 0 -2px 0 var(--primary); }
.book-text mark.hl.draft { cursor: text; box-shadow: none; background: linear-gradient(var(--primary), var(--primary)) no-repeat 0 100% / 100% 2px, linear-gradient(#d6e3f8, #d6e3f8) no-repeat 0 0 / 100% 100%; animation: draw .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes draw { from { background-size: 0% 2px, 0% 100%; } }

/* a mark in the gutter at each passage that needs the author's ear */
.held-badge { position: absolute; left: calc(clamp(26px, 4.5vw, 64px) / 2 - 13px); width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--warn-strong); color: #fff; box-shadow: 0 2px 8px rgba(178, 94, 9, .3); cursor: pointer; transition: transform .15s ease, opacity .5s ease; }
.held-badge svg { width: 14px; height: 14px; stroke-width: 2; }
.held-badge:hover { transform: scale(1.08); }
.held-badge.ok { background: var(--ok); box-shadow: 0 2px 8px rgba(23, 121, 74, .25); }

/* hovering the text: a way in beside the line */
.handle { position: absolute; z-index: 6; display: inline-flex; align-items: center; height: 32px; border-radius: var(--radius-sm); background: var(--night); color: #fff; box-shadow: var(--shadow-sm); animation: pop .16s ease-out; transition: box-shadow .2s ease; }
.handle button { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: 600 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: gap .2s ease, padding .2s ease, background-color .15s; }
.handle svg { width: 16px; height: 16px; color: #a9c4f2; }
.handle .bars { stroke-width: 2.2; }
.handle span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .25s ease, opacity .2s ease; }
.handle [data-handle="listen"] { display: none; }
.handle:hover, .handle:focus-within { box-shadow: var(--shadow); }
.handle:hover [data-handle="listen"], .handle:focus-within [data-handle="listen"] { display: inline-flex; }
.handle:hover button, .handle:focus-within button { gap: 7px; padding: 0 12px 0 10px; }
.handle:hover span, .handle:focus-within span { max-width: 220px; opacity: 1; }
.handle button:hover, .handle button:focus-visible { background: rgba(255, 255, 255, .13); outline: none; }

/* listening: the passage playing, and a way to stop it wherever the reader is */
.book-text .bp.playing { background-image: linear-gradient(transparent 5%, rgba(248, 212, 87, .34) 5%, rgba(248, 212, 87, .34) 95%, transparent 95%); box-shadow: inset 0 -2px 0 #e0b93a; }
.book-text .bp.playing mark.hl { background: transparent; box-shadow: none; }   /* (what plays shows over its notes) */
::highlight(holding) { background-color: #cfe0fb; color: var(--ink); }   /* selected words, while they play */
::highlight(speaking) { background-color: var(--mark-strong); color: var(--ink); }   /* the word being read, as it's read */
.mcard .listen-now { display: inline-flex; align-items: center; gap: 6px; justify-self: start; text-decoration: none; color: var(--ink-soft); }
.mcard .listen-now svg { width: 13px; height: 13px; color: var(--primary); }

/* selecting words: what can be done with them, at a glance */
.selbar { position: absolute; z-index: 40; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; max-width: calc(100vw - 24px); padding: 4px; border-radius: 10px; background: var(--night); color: #fff; font: 500 13.5px/1 var(--sans); box-shadow: 0 14px 34px rgba(16, 24, 40, .28); }
.selbar.in { animation: pop .16s ease-out; }
.selbar button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.selbar button:hover, .selbar button:focus-visible { background: rgba(255, 255, 255, .13); outline: none; }
.selbar button svg { width: 16px; height: 16px; color: #a9c4f2; }
.selbar .sep { width: 1px; align-self: stretch; margin: 6px 3px; background: rgba(255, 255, 255, .18); }
.selbar [data-quick="more"] svg { color: #fff; stroke-width: 3.2; }
.selbar::after { content: ""; position: absolute; left: var(--arrow, 50%); top: 100%; width: 12px; height: 12px; background: var(--night); border-radius: 2px; transform: translate(-50%, -6px) rotate(45deg); }
.selbar.below::after { top: auto; bottom: 100%; transform: translate(-50%, 6px) rotate(45deg); }
.hl-tip { position: absolute; z-index: 35; max-width: 300px; padding: 6px 10px; border-radius: 7px; background: var(--night); color: #fff; font: 500 12.5px/1.35 var(--sans); box-shadow: var(--shadow-sm); pointer-events: none; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.97); } }

/* the notes beside the book */
.margin { position: relative; min-width: 0; }
.margin-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.mcard { position: absolute; left: 0; right: 0; display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); font: 400 14px/1.5 var(--sans); color: var(--ink); transition: top .25s ease, opacity .5s ease, border-color .15s, box-shadow .15s; }
.mcard > * { margin: 0; }
.mcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mcard-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mcard-label svg { width: 14px; height: 14px; }
.mcard .quote { font: 400 17px/1.4 var(--serif); }
.mcard .quote .reach { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 500 11.5px/1.7 var(--sans); vertical-align: 2px; }
.mcard .how { color: var(--ink-soft); }
.mcard .actions { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mcard .link-btn { justify-self: start; font-size: 13.5px; }
.mcard audio { width: 100%; height: 36px; }
.mcard.note { cursor: pointer; }
.mcard.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-sm); }
.mcard.compose { z-index: 2; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow); animation: pop .2s ease-out; }
.mcard.held { border-left: 3px solid var(--warn-strong); }
.mcard.held .mcard-label { color: var(--warn); }
.mcard.held.chosen-accept, .mcard.held.chosen-kept, .mcard.held.chosen-reshaped { border-left-color: var(--ok); }
.mcard.held.chosen-accept .mcard-label, .mcard.held.chosen-kept .mcard-label, .mcard.held.chosen-reshaped .mcard-label { color: var(--ok); }
.mcard.lit { z-index: 3; border-color: var(--warn-strong); box-shadow: 0 0 0 4px var(--warn-soft), var(--shadow); animation: rise .6s cubic-bezier(.2, .7, .2, 1) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.mcard .heard { color: var(--ink-soft); }
.mcard .heard b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mcard .heard mark { padding: 0 3px; border-radius: 4px; background: var(--warn-soft); color: var(--ink); }
.mcard .done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 500; }
.mcard .choice { justify-self: start; }
.mcard .choice button { padding: 0 12px; }
.mcard .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mcard .chip { min-height: 30px; padding: 0 10px; font-size: 13px; }
.mcard input.own, .mcard .say input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font-size: 14px; }
.mcard input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mcard .say { display: grid; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mcard .say em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; }
.mcard .where { display: grid; gap: 4px; font-size: 14px; }
.mcard .where label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mcard .where input { accent-color: var(--primary); }
.mcard .go { display: flex; flex-wrap: wrap; gap: 8px; }
.mcard .takes { display: grid; gap: 10px; }
.mcard .takes:empty, .mcard .error:empty { display: none; }
.take-round { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
.take-round > .hint { margin: 0; }
.take-round.busy .bar { height: 6px; }
.take { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label keep" "audio audio"; align-items: center; gap: 6px 10px; }
.take .label { grid-area: label; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.take audio { grid-area: audio; }
.take [data-keep] { grid-area: keep; min-height: 30px; }
.slot { display: grid; gap: 10px; margin: -2px 0 22px; }
.slot .mcard { position: static; }

/* chapters in the text, and how far the audio reaches: a line in the page's margin beside what can be heard */
.book-text h2.para.chapter { margin: 2.8em 0 .9em; font: 500 clamp(24px, 2.4vw, 30px)/1.15 var(--serif); letter-spacing: -.012em; scroll-margin-top: calc(var(--bar) + var(--crumb) + var(--strip) + 24px); }
.book-text > h2.para.chapter:first-child, .book-text > .book-note + h2.para.chapter { margin-top: 0; }
.book-text .para { position: relative; scroll-margin-top: calc(var(--bar) + var(--crumb) + var(--strip) + 24px); }
.book-text.partly .para.voiced::before { content: ""; position: absolute; left: calc(11px - clamp(26px, 4.5vw, 64px)); top: .3em; bottom: -1.35em; width: 2px; background: var(--primary); opacity: .55; }
.book-text.partly .para.voiced.last::before { bottom: .3em; }
.book-note { margin: 0 0 1.6em; font: 400 13px/1.4 var(--sans); color: var(--faint); }
.book-text .bp.reading { background-color: rgba(253, 236, 176, .55); }
.book-toast { position: fixed; left: calc(50% + var(--side) / 2); bottom: 24px; z-index: 27; transform: translateX(-50%); width: min(560px, calc(100vw - var(--side) - 32px)); padding: 12px 16px; border: 1px solid #bfe3cd; border-radius: 10px; background: var(--ok-soft); color: #0f5132; box-shadow: var(--shadow); font-size: 14px; }
.book-toast.warn { border-color: #f3d19a; background: var(--warn-soft); color: #7a3f04; }
body.with-player .book-toast { bottom: 96px; }
.bookpage.readonly .mcard .actions, .bookpage.readonly .mcard [data-shape], .bookpage.readonly .mcard.compose, .bookpage.readonly .handle [data-handle="shape"] { display: none; }
.bookpage.spotlight .book-text .bp:not(.lit), .bookpage.spotlight .held-badge:not(.lit) { opacity: .24; }
.bookpage.spotlight .margin .mcard:not(.lit) { opacity: .35; }
.handle [data-handle="listen"] { display: inline-flex; }
.handle:not(.can-play) [data-handle="listen"] { display: none; }
.handle.can-play [data-handle="shape"] { display: none; }
.handle.can-play:hover [data-handle="shape"], .handle.can-play:focus-within [data-handle="shape"] { display: inline-flex; }
.handle [data-handle="more"], .handle [data-handle="back"] { display: none; }
.handle:hover [data-handle="more"], .handle:focus-within [data-handle="more"] { display: inline-flex; padding: 0 8px; }
.handle [data-handle="more"] svg { color: #fff; stroke-width: 3.2; }
.handle.gone [data-handle] { display: none; }               /* a part the author left out: one thing to do */
.handle.gone [data-handle="back"] { display: inline-flex; }
.bookpage.readonly .handle [data-handle="back"] { display: none; }
/* the menu beside a passage: how it's read, leaving it out */
.pmenu { right: auto; min-width: 240px; }
.pmenu button { display: grid; justify-content: start; gap: 1px; }
.pmenu small { font-weight: 400; }
.mcard.gone { border-style: dashed; background: var(--sunken); box-shadow: none; }
.mcard.gone .mcard-label svg { stroke-width: 2; }
.mcard.reading { z-index: 2; border-color: var(--line-strong); box-shadow: var(--shadow); animation: pop .2s ease-out; }
.mcard .told { display: grid; gap: 4px; }
.mcard .told b { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mcard .told p { margin: 0; }
.mcard .told ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.mcard .told li span { color: var(--muted); }

@media (max-width: 1180px) {
  .book-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rail { position: static; max-height: none; overflow: visible; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
  .rail-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: none; font: 600 14px/1.3 var(--sans); cursor: pointer; }
  .rail-toggle svg { transition: transform .2s ease; }
  .rail-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .rail-toggle small { margin-left: auto; color: var(--muted); font-weight: 400; }
  .rail-body { padding: 4px 14px 2px; }
  .rail:not(.open) .rail-body { display: none; }
  .chapters { max-height: 46vh; overflow-y: auto; }
}
@media (max-width: 1100px) {
  .overview { grid-template-columns: minmax(0, 1fr); }
  .stat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .strip { position: static; }                       /* a phone's screen is for the book */
  .strip::before { display: none; }
  .book-body { grid-template-columns: minmax(0, 1fr); }
  .margin, .handle { display: none; }
  .book-text { padding: 24px 20px; font-size: 18.5px; }
  .book-tip { grid-template-columns: 1fr; }
  .tip-demo { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { min-height: 300px; padding: 26px 24px 30px; }
  .upload { grid-template-columns: 1fr; }
  .upload-side { padding: 0 20px 20px; }
  .drop { min-height: 200px; }
}
@media (max-width: 640px) {
  .continue { padding: 18px; }
  .continue-body { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .continue .cover.lg { --cover-size: 14px; }
  .continue-top { flex-direction: column; gap: 10px; }
  .continue-top h3 { font-size: 20px; }
  .stat-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .shelf { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile { grid-template-columns: 84px minmax(0, 1fr); }
  .tile .cover.md { --cover-size: 12.5px; }
  .page-head { align-items: stretch; flex-direction: column; }
  .tools { justify-content: space-between; }
  .search { flex: 1; }
  .search input { width: 100%; min-width: 0; }
  .strip-row { padding: 10px 10px 10px 14px; }
  .strip-actions { width: 100%; }
  .strip-actions .btn { flex: 1; }
  .review-row .buttons { width: 100%; }
  .review-row .buttons .btn { flex: 1; }
  .book-text { margin: 0 -8px; padding: 20px 16px; font-size: 18px; }
  .tip-demo { padding: 70px 16px 26px; }
  .demo-page { font-size: 18px; }
  .demo-bar > span:nth-child(n + 3) { display: none; }
  .tip-copy { padding: 22px 20px; }
  .playbar .speed { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .meter span, .playbar, .playbar-progress i { transition: none; animation: none; }
  .tip-demo .demo-words, .tip-demo .demo-bar, .tip-demo .demo-sing, .book-text .bp.lit, .book-text mark.hl.draft,
  .mcard.lit, .mcard.compose, .selbar.in, .handle, .menu { animation: none !important; }
  .tip-demo .demo-words { background-size: 100% 100%; }
  .tip-demo .demo-bar { opacity: 1; transform: translate(-50%, 0); }
}