/* The book maker, laid out like a studio: the conversation on the left, the book on the right, filling in as it’s written. */
.studio { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); min-height: 100svh; }
.thread { padding: 96px 32px 48px 40px; }
.thread h1 { font-size: clamp(34px, 3.4vw, 44px); }
.thread .lead { margin: 12px 0 28px; max-width: 40ch; font-size: 18px; }
.canvas { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 84px 16px 16px 0; }
.canvas-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 12px 8px 24px; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); border-bottom: 1px solid var(--rule); }
.canvas-title { font: 500 17px/1.25 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools { display: flex; align-items: center; gap: 8px; }
.tools select { width: auto; min-height: 40px; padding: 8px 40px 8px 16px; font-size: 15px; }
.canvas-body { flex: 1; overflow-y: auto; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface-2); padding: 40px 32px; scrollbar-width: thin; box-shadow: inset 0 1px 0 var(--rule); }

/* Before anything is written: a faint page. */
.empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.ghost { width: 220px; aspect-ratio: 148 / 210; margin-bottom: 20px; padding: 34px 26px; border-radius: 4px; background: var(--paper); box-shadow: var(--e2); display: flex; flex-direction: column; gap: 12px; opacity: .8; }
.ghost span { height: 8px; border-radius: 4px; background: #EDE2D2; }
.ghost span:first-child { height: 14px; width: 70%; margin: 0 auto 18px; background: #E3D5C1; }
.ghost .short { width: 60%; }
.empty-title { font: 500 21px/1.3 var(--serif); }

/* The steps, in the middle of the menu. */
.stepper { list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; counter-reset: step; }
.stepper li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 8px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--faint); counter-increment: step; }
.stepper li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper li[data-done] { color: var(--muted); }
.stepper li[data-done]::before { content: ""; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1700' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.stepper li[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--e1); }
.stepper li[aria-current]::before { background: var(--ink); color: var(--on-ink); }

/* Groups: white blocks a step off the page, with hairlines between rows. */
.group { display: block; margin: 0 0 16px; padding: 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--e1); }
.group-title { display: block; margin: 0 0 12px; font: 600 15px/1.3 var(--sans); color: var(--text); letter-spacing: 0; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.group-head .group-title { margin: 0; }
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.group > .row:first-child { padding-top: 0; }
.group > .row:last-child { padding-bottom: 0; border-bottom: 0; }
.row label { font-size: 16px; color: var(--muted); }
.thread .row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
.thread .row label { font-size: 14px; font-weight: 500; }
.note { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--faint); }
.note.top { margin: -4px 0 12px; }
.small.after { margin-top: 16px; }
.small-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.small-btn svg { width: 17px; height: 17px; }
.error { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-s); background: var(--wash); color: var(--alert); font-size: 15px; font-weight: 500; }
.actions { display: grid; gap: 10px; margin-top: 8px; }

/* Photos and their captions. */
.captions:not(:empty) { margin-top: 14px; display: grid; gap: 10px; }
.caption-row { display: flex; gap: 12px; align-items: center; }
.caption-row img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: var(--field); }
.caption-row input { flex: 1; min-width: 0; }
.remove { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.remove:hover { background: var(--field); color: var(--text); }
.remove svg { width: 18px; height: 18px; }

/* The consent tick. */
.consent { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--muted); }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--field-line); background: var(--surface); transition: background .15s, border-color .15s; }
.consent input:checked + .tick { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1700' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--ink); }
.consent input:focus-visible + .tick { outline: 3px solid var(--link); outline-offset: 2px; }
#plan { margin-top: 8px; }

/* The outline. */
.chapters { margin: 0; padding: 0; list-style: none; counter-reset: chapter; }
.chapters li { counter-increment: chapter; display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 500 19px/1.3 var(--serif); }
.chapters li:last-child { border-bottom: 0; padding-bottom: 0; }
.chapters li:first-child { padding-top: 0; }
.chapters li::before { content: counter(chapter); min-width: 1.4em; font: 600 14px/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.found p { font-size: 16px; color: var(--muted); }
.found p + p { margin-top: 8px; }
.found b { color: var(--text); font-weight: 600; }
.question + .question { margin-top: 16px; }
.question label { display: block; margin-bottom: 8px; font: 500 17px/1.35 var(--serif); color: var(--text); }
.question textarea { min-height: 0; }

/* Writing. */
#writing { padding-top: 40px; text-align: center; }
#writing .lead { margin-left: auto; margin-right: auto; }
.writing-mark { width: 64px; height: 64px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: 20px; background: var(--surface); box-shadow: var(--e2); color: var(--ink); }
.writing-mark svg { width: 32px; height: 32px; }
progress { display: block; width: 100%; max-width: 420px; height: 6px; margin: 0 auto 16px; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--ink); border-radius: 999px; transition: width .6s var(--ease); }
progress::-moz-progress-bar { background: var(--ink); border-radius: 999px; }
#resume { margin-top: 24px; }

/* Review: on wide screens, the checks on the left and the book on the right. */
.list { margin: 0; padding: 0; list-style: none; }
.list li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.list li:first-child { border-top: 0; padding-top: 0; }
.list button { display: inline-flex; align-items: center; min-height: 34px; margin: 8px 0 0; padding: 0 14px; border: 0; border-radius: 999px; background: var(--wash); color: var(--link); font: 600 14px/1 var(--sans); cursor: pointer; }
.list button:hover { background: var(--wash-pressed); }
.status { font-size: 15px; color: var(--muted); }
.status + .list:not(:empty) { margin-top: 12px; }
.group.warn { box-shadow: var(--e1), inset 0 0 0 1px var(--wash-pressed); }
#reproof { margin-top: 8px; padding: 0; min-height: 36px; }
#save { margin-top: 8px; }

/* Writing: each chapter’s state. */
.chapter-status { list-style: none; margin: 8px auto 20px; padding: 0; max-width: 420px; text-align: left; border-radius: var(--radius); background: var(--surface); box-shadow: var(--e1); }
.chapter-status li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.chapter-status li:last-child { border-bottom: 0; }
.status-title { font-family: var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-label { flex: none; color: var(--faint); }
.chapter-status .busy .status-label { color: var(--link); font-weight: 600; }
.chapter-status .done .status-label { color: var(--text); }
.chapter-status .done .status-label::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* A chapter not written yet, on the canvas. */
#book .pending { opacity: .62; }
#book .pending-note { font-style: italic; color: var(--quiet); }

@media (max-width: 1040px) {
  .studio { display: block; }
  .thread { max-width: 720px; margin: 0 auto; padding: 88px var(--gutter) 32px; }
  .canvas { position: static; height: auto; padding: 0 var(--gutter) 96px; max-width: 760px; margin: 0 auto; }
  .canvas-body { overflow: visible; padding: 24px 16px; }
  body[data-screen=start] .canvas { display: none; }
}
@media (max-width: 820px) {
  .thread { padding-top: 76px; }
  .stepper { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); justify-content: space-between; }
  .stepper li { padding: 0 10px 0 6px; font-size: 13px; gap: 6px; }
  .stepper li:not([aria-current]) { font-size: 0; gap: 0; padding: 0 6px; }
  body { padding-bottom: 72px; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .group { padding: 16px; }
  .canvas-bar { flex-wrap: wrap; padding: 10px 12px 10px 16px; }
}
@media (prefers-contrast: more) {
  .group { box-shadow: inset 0 0 0 1px var(--rule); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stepper li[data-done]::before, :root:not([data-theme="light"]) .consent input:checked + .tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A110A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .stepper li[data-done]::before, :root[data-theme="dark"] .consent input:checked + .tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A110A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }