@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 200 900; src: url(/static/fonts/literata-latin-opsz-normal.woff2) format('woff2'); }
@font-face { font-family: 'Literata'; font-style: italic; font-display: swap; font-weight: 200 900; src: url(/static/fonts/literata-latin-opsz-italic.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-display: swap; font-weight: 400; src: url(/static/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2'); }

/* Layout: Keepsake design system. Sky desk, birch paper, photo corners only on real photos, one garden button per screen, the elastic band down the right edge. Keeper tools are the same calm column, a little denser. */
:root {
  --desk: #dcebf7; --paper: #fcfaf6; --chrome: #f2f6fa; --pressed: #ccddea;
  --ink: #2f2a25; --ink-soft: #545049; --rule: #c9d5df; --border: #6e7884; --sheet-edge: #d6dee5;
  --garden: #3f6b4b; --garden-deep: #30553a; --on-garden: #ffffff;
  --garden-tint: #e3eee6; --garden-tint-hover: #d6e7da; --garden-tint-edge: #9fbfa8;
  --plain: #ffffff; --plain-hover: #f2f6fa;
  --ribbon: #a87443; --oak: #7a5530; --hilite: #fde98b; --focus: #1f5c99;
  --cover-garden: #3f6b4b; --cover-lake: #2f5d86; --cover-walnut: #6b4a33; --cover-rosewood: #84495a; --cover-slate: #4a5866; --cover-plum: #5f4a78; --on-cover: #fcfaf6;
  --shadow-sheet: 0 1px 2px rgba(47, 42, 37, 0.08), 0 10px 30px -18px rgba(47, 42, 37, 0.32);
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif;
  --radius-sm: 6px; --radius-md: 10px; --band: 10px; --corner: 18px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --desk: #121a21; --paper: #1b242c; --chrome: #162028; --pressed: #2a3743;
  --ink: #ede8e1; --ink-soft: #b5aea5; --rule: #34404b; --border: #7f8b97; --sheet-edge: #2c3742;
  --garden: #8cc39b; --garden-deep: #a6d4b3; --on-garden: #0f1e15;
  --garden-tint: #1e3326; --garden-tint-hover: #26402f; --garden-tint-edge: #4d7a5b;
  --plain: #2b3641; --plain-hover: #34404c;
  --ribbon: #c08a55; --oak: #d8a877; --hilite: #6b5a12; --focus: #8cbdeb;
  --cover-garden: #4f7f5c; --cover-lake: #3f6f99; --cover-walnut: #7d5940; --cover-rosewood: #96586a; --cover-slate: #5b6977; --cover-plum: #6f5a88; --on-cover: #fcfaf6;
  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --desk: #121a21; --paper: #1b242c; --chrome: #162028; --pressed: #2a3743;
  --ink: #ede8e1; --ink-soft: #b5aea5; --rule: #34404b; --border: #7f8b97; --sheet-edge: #2c3742;
  --garden: #8cc39b; --garden-deep: #a6d4b3; --on-garden: #0f1e15;
  --garden-tint: #1e3326; --garden-tint-hover: #26402f; --garden-tint-edge: #4d7a5b;
  --plain: #2b3641; --plain-hover: #34404c;
  --ribbon: #c08a55; --oak: #d8a877; --hilite: #6b5a12; --focus: #8cbdeb;
  --cover-garden: #4f7f5c; --cover-lake: #3f6f99; --cover-walnut: #7d5940; --cover-rosewood: #96586a; --cover-slate: #5b6977; --cover-plum: #6f5a88; --on-cover: #fcfaf6;
  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark; }

html { font-size: 18px; }
body { background: var(--desk); color: var(--ink); font-family: var(--serif); line-height: 1.6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--ink); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, select, input, textarea { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(72px, calc(env(safe-area-inset-right, 0px) + 72px)); }

.band { position: fixed; top: 0; bottom: 0; right: max(24px, calc(env(safe-area-inset-right, 0px) + 12px)); width: var(--band); background: var(--garden); pointer-events: none; z-index: 20; }

/* Prototype strip (for Max) */

/* Buttons */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--sans); font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 120ms ease; }
.k-btn--primary { background: var(--garden); color: var(--on-garden); }
.k-btn--primary:hover { background: var(--garden-deep); }
.k-btn--soft { background: var(--garden-tint); color: var(--garden); border-color: var(--garden-tint-edge); }
.k-btn--soft:hover { background: var(--garden-tint-hover); }
.k-btn--plain { background: var(--plain); color: var(--ink); }
.k-btn--plain:hover { background: var(--plain-hover); }
.k-btn--text { background: none; color: var(--garden); padding: 0 4px; min-height: 44px; }
.k-btn--text:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.k-btn--small { min-height: 42px; padding: 0 16px; font-size: 0.9rem; }
.k-arrow { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease; }
.k-btn:hover .k-arrow { transform: translateX(2px); }
.k-link { background: none; border: 0; padding: 4px 0; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.k-link:hover { color: var(--ink); }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--chrome); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Forms */
.field { display: grid; gap: 0.35rem; }
.field label, .field .label { font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.field .hint { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.input, .textarea, .select { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); padding: 0.6rem 0.8rem; font-family: var(--sans); font-size: 1rem; }
.textarea { min-height: 7rem; font-family: var(--serif); line-height: 1.5; resize: vertical; }
.select { width: auto; min-width: 10rem; }
.choice { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--garden); box-shadow: inset 0 0 0 1px var(--garden); }
.choice input { margin-top: 0.25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--garden); flex: none; }
.choice b { display: block; font-family: var(--sans); font-size: 1rem; color: var(--ink); }
.choice span { display: block; font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.choices { display: grid; gap: 0.7rem; }
.error { font-family: var(--sans); font-size: 0.85rem; color: var(--ink); margin: 0; }
.error::before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--ribbon); margin-right: 0.4em; vertical-align: 0.08em; }

/* Details */
/* A photo breaks the page: the paper stops, the photo sits on the desk in its corners, and the paper picks up again. */
.photo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  margin: 1.6em calc(-1 * var(--sx, 0px) - 1px); padding: 2.2rem var(--sx, 0px) 1.6rem;
  background: var(--desk); border-block: 1px solid var(--sheet-edge);
  box-shadow: inset 0 16px 16px -18px rgba(0, 0, 0, 0.35); }
.photo:first-child { margin-top: calc(-1 * var(--sy, 0px) - 1px); border-top: 0; box-shadow: none; }
.photo:last-child { margin-bottom: calc(-1 * var(--sy, 0px) - 1px); border-bottom: 0; }
.mount { position: relative; display: block; max-width: min(100%, 5.6in); }
.mount img { display: block; max-width: 100%; max-height: 7in; height: auto; margin: 0; }
.mount::after { content: ""; position: absolute; inset: -4px; pointer-events: none; background: var(--ribbon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M0 0H18L0 18Z%27/%3E%3C/svg%3E") top left / var(--corner) var(--corner) no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M0 0H18V18Z%27/%3E%3C/svg%3E") top right / var(--corner) var(--corner) no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M0 0V18H18Z%27/%3E%3C/svg%3E") bottom left / var(--corner) var(--corner) no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M18 0V18H0Z%27/%3E%3C/svg%3E") bottom right / var(--corner) var(--corner) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M0 0H18L0 18Z%27/%3E%3C/svg%3E") top left / var(--corner) var(--corner) no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M0 0H18V18Z%27/%3E%3C/svg%3E") top right / var(--corner) var(--corner) no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M0 0V18H18Z%27/%3E%3C/svg%3E") bottom left / var(--corner) var(--corner) no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Cpath d=%27M18 0V18H0Z%27/%3E%3C/svg%3E") bottom right / var(--corner) var(--corner) no-repeat; }
.k-keyhole { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); margin: 0; }
.k-keyhole svg { flex: none; width: 13px; height: 18px; }
.k-keyhole svg * { fill: var(--oak); }
.bookmark { position: absolute; top: -4px; width: 22px; height: 52px; background: var(--ribbon); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }

/* Status chips for questions */
.status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.status::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; border: 1.5px solid var(--border); }
.status.answered { color: var(--oak); } .status.answered::before { background: var(--ribbon); border-color: var(--ribbon); }
.status.progress::before { display: none; }
.status.progress svg { width: 11px; height: 15px; } .status.progress svg * { fill: var(--oak); }
.status.skipped { font-style: italic; } .status.skipped::before { border-style: dashed; }
.status.review::before { background: var(--hilite); border-color: var(--ribbon); }

/* Header */
.site-head { max-width: 46rem; margin: 0 auto; padding-block: 1.1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; box-sizing: content-box; }
.site-head.wide { max-width: 52rem; }
.lockup { display: inline-flex; align-items: flex-end; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-decoration: none; }
.lockup svg { width: 21px; height: 34px; flex: none; }
.lockup .cover { fill: var(--garden); } .lockup .strap, .lockup .tail { fill: var(--ribbon); }
.lockup span { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; font-variation-settings: 'opsz' 72; padding-bottom: 6px; }
.head-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.who { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }

/* Her pages */
.col { max-width: 46rem; margin: 0 auto; padding-block: 2.6rem 5rem; box-sizing: content-box; }
.col.wide { max-width: 52rem; }
.col.narrow { max-width: 26rem; }
.asker { font-family: var(--sans); color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.6rem; }
.question { font-weight: 500; font-size: 2.35rem; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 1.8rem; text-wrap: balance; max-width: 26ch; font-variation-settings: 'opsz' 60; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.section { margin-top: 3.2rem; display: grid; gap: 0.9rem; }
.section h2, .h-ui { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); margin: 0; }
.tile { position: relative; background: var(--paper); padding: 1.3rem 1.4rem; display: grid; gap: 0.7rem; }
.tile .t { margin: 0; font-size: 1.1rem; line-height: 1.4; max-width: 34ch; }
.tile .row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; justify-content: space-between; }
.tile.marked { padding-left: 3.2rem; }
.tile.marked .bookmark { left: 1.1rem; }
.waiting { background: var(--paper); padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.waiting p { margin: 0; flex: 1 1 18rem; min-width: 0; font-size: 1.05rem; line-height: 1.4; }
.quiet { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 2.6rem; }
.page-title { font-weight: 500; font-size: 1.9rem; line-height: 1.25; margin: 0 0 0.3rem; text-wrap: balance; }
.muted { color: var(--ink-soft); font-family: var(--sans); font-size: 0.85rem; margin: 0; }
.lede { font-family: var(--sans); color: var(--ink-soft); font-size: 1rem; margin: 0; max-width: 40ch; }

/* Shelf */
.shelf { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 2rem 1.6rem; }
.book-card { display: grid; align-content: start; gap: 0.3rem; }
.book-open { display: grid; gap: 0.7rem; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); }
.book-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.recolor { justify-self: start; font-size: 0.82rem; }
.cover-pick { display: grid; gap: 0.6rem; padding: 0.8rem; margin-top: 0.2rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.cover-pick .label { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.cover-pick .label b { color: var(--ink); font-weight: 700; }
.cover-pick .dots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dot { position: relative; }
.dot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dot span { display: block; width: 1.9rem; height: 2.5rem; border-radius: 2px 5px 5px 2px; background: var(--c); box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.14); }
.dot input:checked + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.dot input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.cover-pick .k-link { justify-self: start; padding: 0; }
.jcover { position: relative; aspect-ratio: 3 / 4; border-radius: 4px 8px 8px 4px; background: var(--c, var(--cover-garden)); box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.12); transition: transform 140ms ease; }
.book-open:hover .jcover { transform: translateY(-3px); }
.jcover .jstrap { position: absolute; top: 0; bottom: 0; right: 18%; width: 9%; background: var(--ribbon); }
.jcover .jtail { position: absolute; bottom: -14px; left: 22%; width: 13%; height: 30px; background: var(--ribbon); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.jcover .plate { position: absolute; left: 12%; right: 34%; top: 18%; background: var(--paper); color: var(--ink); padding: 0.6rem 0.7rem; border-radius: 3px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.book-card .meta { display: grid; gap: 0.25rem; padding-top: 0.6rem; }
.book-card .role { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }
.book-card .note { font-family: var(--sans); font-size: 0.88rem; color: var(--ink); }
.new-card { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1.5px dashed var(--border); border-radius: 4px 8px 8px 4px; background: none; cursor: pointer; color: var(--garden); font-family: var(--sans); font-size: 1rem; padding: 1rem; text-align: center; }
.new-card:hover { background: var(--garden-tint); }
.new-card .plus { display: block; font-size: 2rem; line-height: 1; margin-bottom: 0.4rem; }

/* Keeper tools */
.journal-head { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.6rem; }
.mini-cover { position: relative; width: 52px; height: 70px; flex: none; border-radius: 2px 5px 5px 2px; background: var(--c, var(--cover-garden)); }
.mini-cover::after { content: ''; position: absolute; top: 0; bottom: 0; right: 18%; width: 10%; background: var(--ribbon); }
.tabbar { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; flex-wrap: wrap; }
.tabbar button { background: none; border: 0; padding: 0.7rem 0; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabbar button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--garden); font-weight: 700; }
.tabbar .count { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; margin-left: 0.35rem; border-radius: 999px; background: var(--hilite); color: var(--ink); font-size: 0.75rem; text-align: center; font-weight: 700; }
.panel { background: var(--paper); padding: 1.2rem 1.4rem; display: grid; gap: 1rem; }
.stack { display: grid; gap: 2.4rem; }
.q-list { list-style: none; margin: 0; padding: 0; background: var(--paper); }
.q-item { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--rule); }
.q-item:last-child { border-bottom: 0; }
.q-item .q { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.q-item .by { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); margin: 0.2rem 0 0; }
.q-item .ctl { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.q-item .num { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-right: 0.3rem; }
.add-row { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; align-items: end; padding: 1rem 1.3rem; background: var(--paper); border-top: 1px solid var(--rule); }
.add-row .textarea { min-height: 3.2rem; }
.sched { display: grid; gap: 1.4rem; }
.sched .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.next-send { font-family: var(--sans); font-size: 1rem; margin: 0; }
.next-send b { font-weight: 700; }
.people { list-style: none; margin: 0; padding: 0; background: var(--paper); }
.people li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.people li:last-child { border-bottom: 0; }
.people .name { font-family: var(--sans); font-size: 1rem; }
.people .sub { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }
.swatches { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch span { display: grid; place-items: end center; width: 3.6rem; height: 4.6rem; border-radius: 2px 6px 6px 2px; background: var(--c); color: var(--on-cover); font-family: var(--sans); font-size: 0.7rem; padding-bottom: 0.3rem; box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.14); }
.swatch input:checked + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 0.9rem; padding: 0.7rem 1.1rem; border-radius: var(--radius-md); z-index: 30; max-width: calc(100% - 32px); }

/* Book with index tabs */
.book { position: relative; background: var(--paper); border: 1px solid var(--sheet-edge); margin-top: 1.6rem; margin-right: 3.6rem; padding: 1.2rem 1.6rem 1.6rem; min-height: 14rem; }
.tabs { position: absolute; top: 1.4rem; left: 100%; display: flex; flex-direction: column; gap: 6px; }
.tab { border: 0; background: var(--pressed); color: var(--ink); font-family: var(--sans); font-size: 0.85rem; font-variant-numeric: tabular-nums; padding: 0.5rem 0.8rem 0.5rem 0.7rem; cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tab:hover { background: var(--chrome); }
.tab[aria-selected="true"] { background: var(--garden); color: var(--on-garden); }
.year { font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 0.3rem; }
.list { list-style: none; margin: 0; padding: 0; }
.list button, .list a { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; font-family: var(--serif); font-size: 1rem; line-height: 1.4; }
.list li:last-child button, .list li:last-child a { border-bottom: 0; }
.list button:hover .t, .list a:hover .t { text-decoration: underline; }
.list .d { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.list .tag { font-family: var(--sans); font-size: 0.75rem; color: var(--oak); margin-left: 0.6rem; }
.list .k-keyhole { font-size: 0.8rem; }
.private-tag { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.7rem; font-family: var(--sans); font-size: 0.75rem; font-style: normal; font-weight: 400; color: var(--oak); white-space: nowrap; vertical-align: baseline; }
.private-tag svg { width: 9px; height: 13px; flex: none; }
.private-tag svg * { fill: var(--oak); }
.story-rows .d .private-tag { margin: 0 0.6rem 0 0; }
.empty { font-family: var(--sans); color: var(--ink-soft); margin: 0.6rem 0 0; }
.recent { background: var(--paper); border: 1px solid var(--sheet-edge); padding: 0.2rem 1.4rem; }
.recent .list button, .recent .list a { padding: 0.85rem 0; }
/* Story states */
.doc-status { font-family: var(--sans); font-size: 0.8rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); background: var(--pressed); color: var(--ink); white-space: nowrap; }
.doc-status.published { background: var(--garden-tint); color: var(--garden); }
.story-rows { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--sheet-edge); }
.story-rows li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.story-rows li:last-child { border-bottom: 0; }
.story-rows .t { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.story-rows .d { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); margin: 0.15rem 0 0; }
.story-rows .ctl { display: flex; gap: 0.8rem; align-items: center; }
/* Skipping a question */
.skip-panel { margin-top: 1.4rem; background: var(--paper); border: 1px solid var(--sheet-edge); border-radius: var(--radius-md); padding: 1.2rem 1.3rem; display: grid; gap: 0.9rem; max-width: 40rem; }
.skip-panel h2 { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink); }
.skip-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.7rem; }
.skip-opt { display: grid; gap: 0.25rem; text-align: left; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--plain); cursor: pointer; font-family: var(--sans); color: var(--ink); }
.skip-opt:hover { border-color: var(--garden); background: var(--garden-tint); }
.skip-opt b { font-size: 1rem; }
.skip-opt span { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.aside-box { margin-top: 2.4rem; }
.aside-box summary { cursor: pointer; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.2em; width: fit-content; }
.aside-box summary:hover { color: var(--ink); }
.aside-box[open] summary { margin-bottom: 0.8rem; }
.aside-box .q-list { background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-md); }
/* Her three home sections, each its own kind of object */
.left-off { position: relative; background: var(--paper); border: 1px solid var(--sheet-edge); box-shadow: var(--shadow-sheet); padding: 1.5rem 1.6rem 1.4rem 3.4rem; display: grid; gap: 0.9rem; }
.left-off .bookmark { left: 1.2rem; }
.left-off .q-small { margin: 0; font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; max-width: 52ch; }
.left-off .excerpt { margin: 0; font-size: 1.12rem; line-height: 1.7; font-style: italic; max-width: 44ch; }
.left-off .excerpt::after { content: '…'; }
.left-off .row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; justify-content: space-between; }
.slips { display: grid; gap: 0.7rem; }
.slip { background: var(--garden-tint); border: 1px solid var(--garden-tint-edge); border-radius: var(--radius-md); padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.slip .from { display: block; font-family: var(--sans); font-size: 0.8rem; color: var(--garden); margin-bottom: 0.2rem; }
.slip p { margin: 0; flex: 1 1 18rem; min-width: 0; font-size: 1.05rem; line-height: 1.4; }
.slip .k-btn--soft { background: var(--paper); }
.recent { box-shadow: 4px 4px 0 -1px var(--paper), 4px 4px 0 0 var(--sheet-edge), 8px 8px 0 -1px var(--paper), 8px 8px 0 0 var(--sheet-edge); margin-right: 8px; margin-bottom: 8px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* Reading */
.reading-sheet { --sx: 2.4rem; --sy: 2.2rem; background: var(--paper); border: 1px solid var(--sheet-edge); margin-top: 1.4rem; padding: var(--sy) var(--sx); box-shadow: var(--shadow-sheet); }
.reading { font-size: 1.05rem; line-height: 1.8; }
.reading p { margin: 0 0 1.1em; }

/* Writing screen */
.titlebar { background: var(--chrome); border-bottom: 1px solid var(--rule); }
.titlebar-inner { max-width: 72rem; margin: 0 auto; padding-block: 0.55rem; display: flex; align-items: center; gap: 0.6rem 1.2rem; flex-wrap: wrap; font-family: var(--sans); }
.titlebar .lockup svg { width: 15px; height: 24px; }
.titlebar .lockup span { font-size: 1.1rem; padding-bottom: 4px; }
.doc-name { font-family: var(--serif); font-size: 1rem; flex: 1 1 12rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.save-state { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }
.save-state.ok { color: var(--oak); }
.save-state.ok::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ribbon); margin-right: 0.45em; vertical-align: 0.06em; }
.titlebar .k-btn { min-height: 42px; padding: 0 16px; font-size: 0.9rem; }
.ribbon-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--chrome); border-bottom: 1px solid var(--rule); }
.ribbon-inner { max-width: 72rem; margin: 0 auto; padding-block: 0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.25rem; font-family: var(--sans); }
.group { display: flex; align-items: center; gap: 0.15rem; padding-right: 0.45rem; margin-right: 0.3rem; border-right: 1px solid var(--rule); }
.group:last-child { border-right: none; }
.tb { min-width: 2.4rem; height: 2.4rem; padding: 0 0.55rem; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.85rem; color: var(--ink); }
.tb:hover { background: var(--pressed); }
.tb[aria-pressed="true"] { background: var(--pressed); box-shadow: inset 0 -2px 0 var(--ink); }
.tb svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb .glyph { font-family: var(--serif); font-size: 1.1rem; line-height: 1; }
.tb .lbl { white-space: nowrap; }
.sel { height: 2.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); padding: 0 0.5rem; font-family: var(--sans); font-size: 0.85rem; cursor: pointer; color: var(--ink); }
#style { width: 9.5rem; } #size { width: 7.5rem; }
.hl-swatch { display: inline-block; width: 1.1rem; height: 0.35rem; background: var(--hilite); border-radius: 2px; }
.tb-hl { flex-direction: column; gap: 0.1rem; }
.desk { padding-block: 1.8rem 6rem; }
.prompt { max-width: 8.5in; margin: 0 auto 1.4rem; display: grid; gap: 0.8rem; }
.prompt .asker { margin: 0; }
.prompt .question { font-size: 1.55rem; margin: 0; max-width: 40ch; font-variation-settings: 'opsz' 36; }
.title-input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--rule); font-family: var(--serif); font-size: 1.55rem; font-weight: 500; color: var(--ink); padding: 0.2rem 0; }
.title-input:focus { outline: none; border-bottom-color: var(--garden); }
.sheet-wrap { max-width: 8.5in; margin: 0 auto; }
.sheet { --sx: 1in; --sy: 0.95in; background: var(--paper); min-height: 11in; padding: var(--sy) var(--sx); box-shadow: var(--shadow-sheet); border: 1px solid var(--sheet-edge); }
#editor { outline: none; min-height: 8in; font-family: var(--serif); font-size: 1.05rem; line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
#editor:empty::before { content: attr(data-placeholder); color: var(--ink-soft); font-style: italic; }
#editor p { margin: 0 0 1em; }
#editor h2 { font-size: 1.6em; font-weight: 600; line-height: 1.25; margin: 1.2em 0 0.5em; }
#editor h3 { font-size: 1.25em; font-weight: 600; line-height: 1.3; margin: 1.1em 0 0.4em; }
#editor h2:first-child, #editor h3:first-child { margin-top: 0; }
#editor blockquote { margin: 0 0 1em; padding-left: 1.2em; border-left: 3px solid var(--rule); font-style: italic; color: var(--ink-soft); }
#editor ul, #editor ol { margin: 0 0 1em; padding-left: 1.6em; }
#editor .photo { cursor: default; }
#editor .mount { cursor: grab; }
#editor .photo[data-dragging] { opacity: 0.45; }
#editor [data-drop="before"] { box-shadow: 0 -4px 0 -1px var(--garden); }
#editor [data-drop="after"] { box-shadow: 0 4px 0 -1px var(--garden); }
.photo-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.4rem; font-family: var(--sans); user-select: none; }
.photo-tools button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.4rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--plain); color: var(--ink); font-size: 0.85rem; cursor: pointer; }
.photo-tools button:hover { background: var(--plain-hover); }
.photo-tools button:disabled { opacity: 0.45; cursor: default; }
.photo-tools button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-tools svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.photo-tools button::after { content: attr(data-label); }
.photo-tools .hint { width: 100%; text-align: center; font-size: 0.78rem; color: var(--ink-soft); }
.photo-tools .hint::after { content: 'Or drag the photo to where it belongs.'; }
.toast button { margin-left: 0.8rem; background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
#editor font[size="2"] { font-size: 0.85em; } #editor font[size="5"] { font-size: 1.3em; } #editor font[size="6"] { font-size: 1.6em; }
.statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--chrome); border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); padding-bottom: env(safe-area-inset-bottom, 0px); }
.statusbar-inner { max-width: 72rem; margin: 0 auto; padding-block: 0.35rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.zoom { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.zoom button { width: 2rem; height: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--paper); cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink); }
.zoom input { width: 7rem; accent-color: var(--garden); }
.zoom output { min-width: 3.2em; text-align: right; }

/* Finish step */
.finish { max-width: 8.5in; margin: 0 auto 1.6rem; background: var(--paper); border: 1px solid var(--garden-tint-edge); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; display: grid; gap: 1.1rem; }
.finish h2 { margin: 0; font-weight: 500; font-size: 1.35rem; line-height: 1.3; }
.finish .choices { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (max-width: 760px) {
  html { font-size: 17px; }
  .gutter { padding-right: max(36px, calc(env(safe-area-inset-right, 0px) + 36px)); }
  .band { width: 6px; right: max(8px, env(safe-area-inset-right, 0px)); }
  .sheet { --sx: 1.2rem; --sy: 1.6rem; min-height: 60vh; }
  #editor { min-height: 50vh; }
  .question { font-size: 1.8rem; }
  .tb .lbl { display: none; }
  #style { width: 8rem; }
  .proto .note { display: none; }
  .book { margin-top: 3.4rem; margin-right: 0; padding: 1.2rem 1.2rem 1.4rem; }
  .tabs { top: auto; bottom: 100%; left: 1.2rem; flex-direction: row; }
  .tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .reading-sheet { --sx: 1.3rem; --sy: 1.6rem; }
  .doc-name { display: none; }
  .q-item { grid-template-columns: 1fr; }
  .q-item .ctl { justify-content: flex-start; }
  .add-row { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .k-btn, .k-arrow, .jcover { transition: none; } .k-btn:hover .k-arrow, .book-open:hover .jcover { transform: none; } }

/* ---------- Real app additions ---------- */
.notice { background: var(--paper); border: 1px solid var(--sheet-edge); border-left: 4px solid var(--ribbon); padding: 0.9rem 1.1rem; font-family: var(--sans); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1.4rem; }
.notice b { font-weight: 700; }
.linkbox { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.linkbox input { flex: 1 1 16rem; min-width: 0; font-size: 0.85rem; }
.lib-list { list-style: none; margin: 0.6rem 0 0; padding: 0; background: var(--paper); border: 1px solid var(--sheet-edge); max-height: 26rem; overflow: auto; }
.lib-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule); }
.lib-list li:last-child { border-bottom: 0; }
.lib-list p { margin: 0; font-size: 0.98rem; line-height: 1.4; }
.lib-list .group-label { background: var(--chrome); font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); padding: 0.5rem 1rem; }
.loading { min-height: 60vh; display: grid; place-items: center; font-family: var(--sans); color: var(--ink-soft); }
.sub-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.field .error { margin-top: 0.2rem; }
.book-open, .new-card, .list a { text-decoration: none; color: var(--ink); }
.new-card { color: var(--garden); }
a.k-btn { text-decoration: none; }
.who.k-link { color: var(--ink-soft); }
@media (max-width: 600px) { .tabbar { gap: 0 1.1rem; } .tabbar button { font-size: 0.9rem; } }