/* Draftly — see DESIGN-PRINCIPLES.md. Every value here comes from a token defined below. */

/* ---------------------------------------------------------------- fonts */
/* Bricolage Grotesque and Literata, SIL Open Font License 1.1.
   Licenses ship alongside the files in public/fonts/. Variable, self-hosted, no external request. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/literata-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* surfaces */
  --paper: #f6f2e9;
  --cream: #fffdf8;
  --ink: #18322d;

  /* brand */
  --accent: #db5d3f;       /* large text and graphic marks only — 3.33:1 on paper */
  --accent-ink: #b8431f;   /* small text, buttons, links — 4.87:1 on paper, 5.44:1 vs white */
  --accent-deep: #9e3618;  /* button active state */
  --accent-wash: #fdeee8;

  /* text */
  --muted: #626861;        /* 5.12:1 on paper */

  /* lines */
  --line: #d9d4c8;         /* decorative dividers only */
  --line-strong: #938a72;  /* interactive boundaries — 3.07:1 on paper */

  /* Amazon review-star amber. Deliberately outside the brand palette: review stars are a
     recognised convention and readers expect this exact colour. Decorative only, always
     paired with a visually hidden text rating. */
  --star: #ffa41c;

  /* status */
  --ok: #356c57;
  --warn-ink: #8e2d19;
  --warn-bg: #fee5df;
  --err: #9d3a22;

  /* type */
  --font-ui: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-book: 'Literata', Georgia, 'Times New Roman', serif;

  --text-display-1: clamp(2.35rem, 4.6vw, 3.5rem);
  --text-display-2: clamp(2rem, 4vw, 3rem);
  --text-h1: 1.75rem;
  --text-h2: 1.3125rem;
  --text-h3: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-label: 0.75rem;

  --book-body: 1.1875rem;
  --book-h1: clamp(2.5rem, 7vw, 4.8rem);
  --book-h2: 1.75rem;
  --book-h3: 1.25rem;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  /* Applied top AND bottom, so a boundary between two sections is twice this. */
  --section-y: clamp(var(--space-6), 3.5vw, var(--space-7));

  /* containers */
  --container-wide: min(1120px, calc(100% - var(--space-5) * 2));
  --container-form: min(720px, calc(100% - var(--space-5) * 2));
  --container-read: min(68ch, 100%);
  --measure-ui: 62ch;

  /* radius — varied by role, never uniform */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* ----------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.35;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure-ui);
}

a {
  color: var(--accent-ink);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--motion-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-deep);
}

img {
  max-width: 100%;
  height: auto;
}

/* Focus: one visible treatment everywhere. Never removed without replacement. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--motion-base) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--cream);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ typography */

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.lede {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--muted);
}

.muted {
  color: var(--muted);
  font-size: var(--text-sm);
}

.caption {
  font-size: var(--text-caption);
  color: var(--muted);
}

.page-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-display-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.form-footnote {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
}

/* Book-surface label. Distinct from the UI .eyebrow so the reading surface
   keeps its own voice and the one-eyebrow-per-screen rule still holds. */
.book-label {
  margin: 0;
  max-width: none;
  font-family: var(--font-book);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted);
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: var(--container-wide);
  margin-inline: auto;
}

.narrow {
  width: var(--container-form);
  margin-inline: auto;
}

.page {
  padding-block: var(--space-8) var(--space-9);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brand {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--accent-ink);
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
}

.site-header form {
  display: flex;
  margin: 0;
}

.credit-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* A traffic-light dot on the credit balance: green comfortable, amber tight, red cannot make a
   cover. Meaning never rests on colour alone, the meter carries the same words in its title. */
.credit-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.credit-dot-ok {
  background: var(--ok);
}

.credit-dot-low {
  background: var(--star);
}

.credit-dot-empty {
  background: var(--err);
}

.credit-meter strong {
  font-weight: 650;
  color: var(--ink);
}

/* ------------------------------------------------------ header account menu */
/* The account controls are one circular avatar that opens a dropdown, rather than a row of quiet
   links that grows every time the account gains a page. See D-070. */
.account-menu {
  position: relative;
  display: flex;
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
}

.account-avatar:hover {
  border-color: var(--ink);
  background: var(--cream);
  color: var(--accent-ink);
}

.account-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Anchored under the avatar's right edge, so it opens inward from the corner of the page. */
.account-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 50;
  width: min(264px, calc(100vw - var(--space-6)));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(24, 50, 45, 0.05), 0 14px 34px rgba(24, 50, 45, 0.12);
  text-align: left;
}

.account-panel[hidden] {
  display: none;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.account-avatar-lg {
  width: 42px;
  height: 42px;
  border-color: var(--line);
  background: var(--paper);
}

.account-avatar-lg .account-icon {
  width: 24px;
  height: 24px;
}

.account-identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-identity-text strong {
  font-weight: 650;
  color: var(--ink);
}

/* The name and the email both have to survive being long without widening the panel. */
.account-identity-text strong,
.account-identity-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity-sub {
  font-size: var(--text-caption);
  color: var(--muted);
}

/* Groups are separated by a rule, in the order they matter: account, then money, then leaving.
   Scoped to the panel so it outweighs `.site-header form`, which would otherwise make the logout
   group a flex row. */
.account-panel .account-group {
  display: block;
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.account-panel .account-group:last-child {
  border-bottom: 0;
}

/* One row treatment for both the links and the logout submit button, so the form disappears into
   the list instead of announcing itself as a form. */
.account-item,
button.account-item {
  display: flex;
  align-items: center;
  /* The global button rule centres its content; a menu row reads from the left. */
  justify-content: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}

.account-item:hover,
button.account-item:hover {
  background: var(--paper);
  color: var(--accent-ink);
}

.account-item:focus-visible {
  outline-offset: -2px;
}

@media (max-width: 600px) {
  .site-header nav {
    gap: var(--space-4);
  }
}

.back {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
}

.back:hover {
  color: var(--ink);
}

/* ------------------------------------------------------------- controls */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent-ink);
  color: #fff;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

button:hover,
.button:hover {
  background: var(--accent-deep);
  color: #fff;
}

button:active,
.button:active {
  background: #8f3115;
}

button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Waiting on a model is the longest thing this product does, so a control that is working must
   never look like a control that is dead. A busy button keeps full contrast and carries a pulsing
   dot: the base state is fully opaque, so the reduced-motion freeze in section 6 still reads as a
   present indicator rather than a vanished one. */
button[aria-busy='true'] {
  cursor: default;
}

button:disabled[aria-busy='true'] {
  opacity: 1;
}

button[aria-busy='true']::after {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.55em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: busy-pulse 1.1s ease-in-out infinite;
}

@keyframes busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.button-secondary,
button.button-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.button-secondary:hover,
button.button-secondary:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button-secondary:active,
button.button-secondary:active {
  background: var(--accent-wash);
}

.button-quiet,
button.button-quiet {
  min-height: 24px;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button-quiet:hover,
button.button-quiet:hover {
  background: none;
  color: var(--accent-deep);
}

.button-danger,
button.button-danger {
  background: var(--err);
}

.button-danger:hover,
button.button-danger:hover {
  background: #83301c;
}

/* ------------------------------------------------------------------ forms */

form {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}

label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 650;
}

input,
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}

textarea {
  resize: vertical;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field-hint {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
}

.field-error {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--err);
}

.field-error:empty {
  display: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.alert {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 0;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--text-sm);
  max-width: none;
}

/* ------------------------------------------------------------- surfaces */

.panel {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.panel-tight {
  padding: var(--space-5);
}

/* ---------------------------------------------------------------- landing */

.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-6) var(--space-5);
}

.hero h1 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-display-1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero p {
  max-width: 46ch;
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.hero-copy > p:not(.eyebrow) {
  margin-bottom: 0;
}

/* Scoped to the form so it outranks `.hero p { max-width: 46ch }`, which was
   capping the box and pulling the centred text off-axis. */
.hero-quickstart .hero-note {
  /* pulls it up against the button, past the form's own row gap */
  margin: calc(var(--space-2) - var(--space-4)) 0 0;
  max-width: none;
  font-size: var(--text-caption) !important;
  color: var(--muted);
  text-align: center;
}

.hero-quickstart {
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.hero-quickstart > label {
  font-size: var(--text-h3);
}

.hero-quickstart textarea {
  min-height: calc(var(--space-8) + var(--space-7));
  background: var(--paper);
  font-size: var(--text-body-lg);
}

.hero-quickstart .field-error {
  max-width: none;
  font-size: var(--text-caption);
  color: var(--err);
}

.quickstart-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quickstart-pill {
  flex: 0 0 auto;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border-color: var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.quickstart-pill:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.quickstart-pill:active,
.quickstart-pill[aria-pressed='true'] {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
  color: var(--ink);
}

.quickstart-submit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.quickstart-submit button {
  width: 100%;
}

.hero-book {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
}

/* This is the one permitted shadow: a physical book cover resting above a page. */
.sample-cover {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 2 / 3;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 24px 65px rgba(24, 50, 45, 0.18);
}

.sample-cover span {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sample-cover strong {
  font-family: var(--font-book);
  font-size: var(--text-display-2);
  font-weight: 650;
  line-height: 1.06;
}

.sample-cover small {
  font-family: var(--font-book);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.sample-page {
  margin-left: calc(var(--space-5) * -1);
  padding: var(--space-7) var(--space-5) var(--space-7) var(--space-7);
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-book);
}

.sample-page h2 {
  margin-bottom: var(--space-5);
  font-family: var(--font-book);
  font-size: var(--book-h2);
}

.sample-page p {
  font-family: var(--font-book);
  font-size: var(--text-sm);
  color: var(--ink);
}

.sample-page .sample-page-label,
.sample-page > span {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--muted);
}

.trust-strip {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 650;
}

.transformation,
.control-proof,
.output-proof,
.sample-library,
.trust-answers {
  padding-block: var(--section-y);
}

/* A heading and its supporting line are one unit. Side by side they read as two
   separate columns and leave the heading row half empty, so they stack at every width. */
.section-intro {
  margin-bottom: var(--space-7);
}

.section-intro > p {
  max-width: 68ch;
}

.section-intro h2,
.output-lead h2,
.trust-answers > h2 {
  font-size: var(--text-display-2);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.output-lead p {
  margin: 0;
  color: var(--muted);
}

.section-intro > p {
  margin: var(--space-3) 0 0;
  color: var(--muted);
}

.transformation-flow {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: var(--space-8);
  align-items: start;
}

.idea-proof {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}

.idea-proof figcaption,
.proof-label {
  margin-bottom: var(--space-4);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--muted);
}

.idea-proof blockquote {
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--text-h2);
  line-height: 1.5;
}

.output-lead h2 {
  margin-bottom: var(--space-5);
}

.output-proof {
  display: grid;
  grid-template-columns: 5fr 5fr;
  gap: var(--space-9);
}

.format-details {
  margin: 0;
}

.format-details div {
  display: grid;
  grid-template-columns: var(--space-9) 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-strong);
}

.format-details dt {
  font-weight: 700;
}

.format-details dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.sample-downloads {
  border-top: 2px solid var(--ink);
}

.sample-downloads article {
  display: grid;
  grid-template-columns: 4fr 4fr 2fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}

.sample-downloads span {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--muted);
}

.sample-downloads h3,
.sample-downloads p {
  margin: 0;
}

.sample-downloads h3 {
  font-family: var(--font-book);
  font-size: var(--text-h2);
}

.sample-downloads p {
  color: var(--muted);
}

.sample-downloads a {
  justify-self: end;
  font-weight: 650;
}

.credit-proof {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-items: center;
  gap: var(--space-8);
  margin-block: var(--section-y);
  padding: var(--space-7);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.credit-proof h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h1);
}

.credit-proof p {
  margin: 0;
  color: var(--cream);
}

.credit-proof .button {
  justify-self: start;
  border-color: var(--cream);
}

.answer-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--space-7) var(--space-9);
}

.answer-grid article {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-strong);
}

.answer-grid h3 {
  margin-bottom: var(--space-2);
}

.answer-grid p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.closing {
  padding-block: var(--section-y);
}

.site-footer {
  border-top: 1px solid var(--line);
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

.site-footer p {
  margin: 0;
  font-size: var(--text-sm);
}

.site-footer p span {
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  gap: var(--space-5);
}

.legal-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.auth-context {
  margin-bottom: var(--space-5);
  color: var(--muted);
}

.guest-outline {
  padding-block: var(--space-9);
}

.guest-outline-intro {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-8);
}

.guest-outline-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: calc(var(--space-8) * -1);
}

.guest-outline-intro h1 {
  font-size: var(--text-display-2);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.guest-outline-intro > p:last-child {
  margin: 0;
  color: var(--muted);
}

.guest-chapters {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
  counter-reset: guest-chapter;
}

.guest-chapters li {
  display: grid;
  grid-template-columns: var(--space-8) 4fr 5fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  counter-increment: guest-chapter;
}

.guest-chapters li::before {
  content: counter(guest-chapter, decimal-leading-zero);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--muted);
}

.guest-chapters h2 {
  font-family: var(--font-book);
  font-size: var(--text-h2);
}

.guest-chapters p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.guest-next {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-7);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.guest-next h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h1);
}

.guest-next p {
  margin: 0;
}

.guest-next-actions {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.guest-next-actions a:not(.button) {
  color: var(--cream);
}

.guest-next-actions form {
  margin: 0;
}

.button-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button-link:hover,
.button-link:active {
  background: none;
  color: var(--cream);
}

.legal-page {
  width: var(--container-form);
  padding-block: var(--space-9);
}

.legal-page h1 {
  margin-bottom: var(--space-3);
  font-size: var(--text-display-2);
}

.legal-page h2 {
  margin: var(--space-7) 0 var(--space-3);
}

.legal-page p,
.legal-page li {
  max-width: 68ch;
}

.legal-updated {
  font-size: var(--text-caption);
  color: var(--muted);
}

/* ------------------------------------------------------------------ auth */

.auth-card {
  width: min(440px, 100%);
  margin: var(--space-9) auto;
}

.auth-card h1 {
  margin-bottom: var(--space-6);
  font-size: var(--text-display-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.auth-card .muted {
  margin: var(--space-5) 0 0;
}

/* Google sign-in. Deliberately not the accent button: a federated sign-in control is a third
   party's affordance, so it stays neutral and lets the account form keep the primary emphasis.
   The mark is inline SVG because no external asset request is allowed. */
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.google-button:hover {
  background: #fff;
  border-color: var(--ink);
}

.google-mark {
  flex: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--muted);
  font-size: var(--text-caption);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ------------------------------------------------------------- dashboard */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.page-head h1 {
  font-size: var(--text-display-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* Four across on desktop, two on a phone: a shelf, not a list (D-046). */
/* The library search, sort and filter bar. Revealed by JavaScript, so a no-script shelf shows all. */
.library-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.library-search-wrap {
  flex: 1 1 18rem;
}

.library-search-wrap input {
  width: 100%;
}

.library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.filter-chip:hover {
  border-color: var(--ink);
}

.filter-chip.is-active {
  background: var(--accent-wash);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  font-weight: 650;
}

.library-empty {
  margin: var(--space-5) 0 var(--space-7);
  color: var(--muted);
  font-size: var(--text-sm);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card sets its own display, which would beat the hidden attribute, so filtering opts back out. */
.book-card[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.book-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(24, 50, 45, 0.05), 0 10px 24px rgba(24, 50, 45, 0.06);
  transition: border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

/* A shelf you are pleased to look at: the books lift slightly under the cursor. */
.book-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 4px rgba(24, 50, 45, 0.06), 0 18px 40px rgba(24, 50, 45, 0.12);
  transform: translateY(-2px);
}

/* Covers are 2:3. This box used to be 3:2 — landscape — so every cover was cropped to a sliver of
   its own top and the title was cut in half. The library is where an author looks at what they
   made, so the whole cover shows, at the shape it was drawn. See D-046. */
.book-cover-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-caption);
  text-decoration: none;
}

.book-cover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-base) var(--ease-out);
}

.book-card:hover .book-cover-thumb img {
  transform: scale(1.02);
}

.book-card-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.book-card-body h2 {
  margin: 0;
}

.book-card-body h2 a {
  color: var(--ink);
  text-decoration: none;
}

.book-card-body h2 a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

.book-card-body p {
  margin: 0;
  max-width: none;
}

.book-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.book-card-actions form {
  display: block;
}

.book-card-actions .delete {
  margin-left: auto;
  color: var(--err);
}

.status {
  display: inline-block;
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: 650;
  line-height: 1.2;
  color: var(--muted);
}

.status-complete,
.status-edited,
.status-written {
  border-color: var(--ok);
  color: var(--ok);
}

.status-failed {
  border-color: var(--err);
  color: var(--err);
}

.empty {
  padding: var(--space-9) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.empty h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h1);
}

.delete-confirm {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--err);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
}

.delete-confirm h2 {
  margin-bottom: var(--space-2);
}

.delete-confirm p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--warn-ink);
}

.delete-confirm form {
  display: block;
}

/* ---------------------------------------------------------------- editor */

.editor-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.title-input {
  width: 100%;
  min-height: 0;
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--text-display-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.title-input:hover,
.chapter-heading:hover {
  border-bottom-color: var(--line-strong);
}

.title-input:focus-visible,
.chapter-heading:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

/* The outline's first arrival — the moment the author sees their idea given a shape. */
.arrival {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-wash);
}

.arrival h2 {
  margin-bottom: var(--space-3);
  max-width: 34ch;
  font-size: var(--text-h1);
}

.arrival p {
  margin: 0;
  color: var(--ink);
}

.byline-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.byline-row label {
  font-family: var(--font-book);
  font-size: var(--text-body-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.byline-row input {
  flex: 1;
  min-height: 36px;
  max-width: 32ch;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-book);
  font-size: var(--text-body-lg);
}

.byline-row input:hover {
  border-bottom-color: var(--line-strong);
}

/* The quick start has already supplied the idea and title, so this context keeps the longer
   brief connected to the decision the visitor just made. */
.start-draft-context {
  margin: var(--space-6) 0;
  padding: var(--space-5) 0;
  border-block: 1px solid var(--line-strong);
}

.start-draft-context p {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.start-draft-context h2 {
  margin: var(--space-2) 0;
  font-family: var(--font-book);
  font-size: var(--text-h1);
}

.title-idea {
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--line-strong);
  font-family: var(--font-book);
  font-size: var(--text-h3);
  line-height: 1.55;
}

.title-choice-form {
  margin-top: var(--space-6);
}

.title-options {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.title-options legend {
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 650;
}

.title-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.title-option:hover {
  border-color: var(--ink);
}

.title-option input {
  width: auto;
  min-height: 0;
  margin: 0.2em 0 0;
  accent-color: var(--accent-ink);
}

.title-option span {
  font-family: var(--font-book);
  font-size: var(--text-body-lg);
  font-weight: 500;
}

.title-option:has(input:checked) {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
}

.title-option:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.title-option-custom span {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 650;
}

.custom-title {
  margin-top: var(--space-2);
}

.title-choice-submit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.title-choice-submit .form-footnote {
  margin: 0;
}

/* Book-type picker: the first decision, so it gets the most room on the form. */
.type-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.type-picker legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 650;
}

.type-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.type-option:hover {
  border-color: var(--ink);
}

.type-option input {
  width: auto;
  min-height: 0;
  margin: 0.15em 0 0;
  accent-color: var(--accent-ink);
}

.type-option strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 650;
}

.type-blurb {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
}

.type-option:has(input:checked) {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
}

.type-option:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.style-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

.style-row label {
  display: inline;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
}

.style-row select {
  width: auto;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.style-row .field-hint {
  flex-basis: 100%;
}

.editor-head-action {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  text-align: right;
}

.label-line {
  display: block;
}

.label-optional {
  font-weight: 400;
  font-size: var(--text-caption);
  color: var(--muted);
}

.regen-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.regen-row input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  font-size: var(--text-sm);
}

.regen-row button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.editor-status {
  margin: 0 0 var(--space-7);
  max-width: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

.chapter-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.chapter-number {
  font-size: var(--text-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--accent);
}

.chapter-heading {
  width: 100%;
  min-height: 0;
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--text-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.chapter-summary {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Chapters read as typeset prose in the book's own face, not as markdown in a form field. */
.chapter-read {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.chapter-prose {
  max-width: 62ch;
  font-family: var(--font-book);
  font-size: var(--book-body);
  line-height: 1.75;
}

.chapter-prose p {
  max-width: none;
  margin: 0 0 1em;
}

/* The renderer emits real lists rather than paragraphs starting with a dash (D-040). */
.chapter-prose ul,
.chapter-prose ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.chapter-prose li {
  margin: 0 0 0.4em;
}

.chapter-prose code {
  font-family: inherit;
}

.chapter-prose h2,
.chapter-prose h3 {
  margin: 1.6em 0 0.5em;
  font-family: var(--font-book);
  font-weight: 600;
}

.chapter-prose h2 {
  font-size: var(--book-h2);
}

.chapter-prose h3 {
  font-size: var(--book-h3);
}

/* Markdown tables render on every reading surface, so they share one treatment (D-054). Bordered
   with the structural line token, header row on the paper tone, scrolling if a table runs wide. */
.chapter-prose table,
.preview-chapter table,
.live-page-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: var(--text-sm);
}

.chapter-prose th,
.chapter-prose td,
.preview-chapter th,
.preview-chapter td,
.live-page-text th,
.live-page-text td {
  border: 1px solid var(--line-strong);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.chapter-prose th,
.preview-chapter th,
.live-page-text th {
  font-weight: 700;
  background: var(--paper);
}

.chapter-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.chapter-edit {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.chapter-side {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  justify-items: end;
}

.chapter-arrange {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.icon-button {
  flex: 0 0 auto;
  height: 32px;
  width: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1;
}

.icon-button:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.icon-button.delete-chapter:hover {
  border-color: var(--err);
  color: var(--err);
}

.icon-button[data-confirm='1'] {
  width: auto;
  min-width: 64px;
  padding-inline: var(--space-2);
  border-color: var(--err);
  color: var(--err);
}

.chapter-body {
  display: block;
  min-height: 340px;
  margin-top: var(--space-4);
  padding: var(--space-4);
  font-family: var(--font-book);
  font-size: var(--book-body);
  line-height: 1.75;
}

.chapter-message {
  min-height: 1.4em;
  margin: var(--space-3) 0 0;
  max-width: none;
  font-size: var(--text-caption);
  color: var(--muted);
}

.chapter-message[data-tone='error'] {
  color: var(--err);
}

.chapter-message[data-tone='ok'] {
  color: var(--ok);
}

.chapter-status {
  align-self: start;
}

.word-count {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.editor-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.editor-actions h2 {
  margin-bottom: var(--space-2);
}

.editor-actions p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* The cover reveal. Shown in the editor the moment it exists, at a size worth looking at. */
.cover-preview {
  width: 220px;
  margin: 0;
}

.cover-preview img {
  display: block;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(24, 50, 45, 0.18);
}

.cover-arrived img {
  animation: cover-in var(--motion-slow) var(--ease-out);
}

@keyframes cover-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.cover-controls .button {
  margin-top: var(--space-5);
}

.cover-state {
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* --------------------------------------------------------------- preview */
/* The reading surface. Serif, book-like, deliberately different from the UI. */

.book-preview {
  width: var(--container-wide);
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-9);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.preview-toolbar p {
  margin: 0;
}

.preview-toolbar strong {
  font-size: var(--text-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.export-bar {
  display: flex;
  gap: var(--space-2);
}

.export-bar .button {
  min-width: 84px;
}

/* This used to sit directly under the toolbar and pulled itself up with a negative top margin.
   It now follows the reader, where that negative margin dragged it over the page controls. */
.export-guide {
  width: var(--container-read);
  margin: var(--space-6) auto var(--space-8);
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: var(--container-read);
  text-align: center;
}

.preview-byline {
  max-width: none;
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-lg);
  color: var(--ink);
}

.preview-contents {
  width: var(--container-read);
  margin: 0 auto;
  padding: var(--space-9) 0 var(--space-7);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-book);
}

.preview-contents h2 {
  margin-bottom: var(--space-5);
  font-family: var(--font-book);
  font-size: var(--book-h2);
  font-weight: 600;
}

.preview-contents ol {
  margin: 0;
  /* Wide enough to hold a three-digit chapter number: at the old space-5 the leading digit of "10."
     and up spilled left of the padding box and the column overflow clipped it. */
  padding-left: var(--space-7);
  font-size: var(--text-body-lg);
  line-height: 2;
}

.preview-contents a {
  color: var(--ink);
  text-decoration: none;
}

.preview-contents a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

.preview-cover {
  width: min(440px, 100%);
  margin: 0 auto var(--space-10);
}

/* The one permitted shadow: a physical object resting on a surface,
   consistent downward light source, ink-tinted rather than pure black. */
.preview-cover img {
  display: block;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 24px 65px rgba(24, 50, 45, 0.18);
}

.preview-title,
.preview-chapter {
  width: var(--container-read);
  margin-inline: auto;
  font-family: var(--font-book);
}

.preview-title {
  min-height: 60vh;
  display: grid;
  place-content: center;
  padding: var(--space-9) var(--space-5);
  border-block: 1px solid var(--line);
  text-align: center;
}

.preview-title h1 {
  font-family: var(--font-book);
  /* The type scale assigns the preview title page --text-display-2, not the chapter opener's larger
     --book-h1. A book title can run long (the model often folds a subtitle into it), and at --book-h1
     a long title overflowed the title page and clipped. This is the intended size and it fits. */
  font-size: var(--text-display-2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.preview-title p {
  max-width: none;
  margin: var(--space-5) 0 0;
  font-style: italic;
  color: var(--muted);
}

/* The last page of a finished book: where to go next, in the book's own face. */
.preview-end {
  width: var(--container-read);
  margin-inline: auto;
  padding: var(--space-9) 0;
  font-family: var(--font-book);
  text-align: center;
}

.preview-end h2 {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-book);
  font-size: var(--book-h2);
  font-weight: 600;
}

.preview-end-lede {
  max-width: none;
  margin: 0 0 var(--space-6);
  color: var(--muted);
}

.preview-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.preview-chapter {
  padding: var(--space-10) 0 var(--space-6);
  font-size: var(--book-body);
  line-height: 1.75;
}

/* The 18ch measure is for the chapter title only. Section headings are direct children too, and
   were inheriting it, which broke short headings across three cramped lines. */
.preview-chapter > h2:first-of-type {
  max-width: 18ch;
  margin: var(--space-2) 0 var(--space-8);
  font-family: var(--font-book);
  font-size: var(--book-h1);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.preview-chapter h2:not(:first-of-type),
.preview-chapter h3 {
  margin: 2em 0 0.6em;
  font-family: var(--font-book);
  font-weight: 600;
}

.preview-chapter h2:not(:first-of-type) {
  font-size: var(--book-h2);
  letter-spacing: -0.01em;
}

.preview-chapter h3 {
  font-size: var(--book-h3);
}

.preview-chapter p {
  max-width: none;
  margin: 0 0 1.2em;
}

/* Real lists, matching the exports (D-040). */
.preview-chapter ul,
.preview-chapter ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.preview-chapter li {
  margin: 0 0 0.5em;
}

.preview-chapter code {
  font-family: inherit;
}

/* ==========================================================================
   The paged reader. A book is read a page at a time, not scrolled for ten
   minutes, so the preview paginates into columns and steps through them.
   Every paging rule is scoped to `.reader-paged`, which JavaScript adds: with
   JavaScript off this is the plain scrolling document it has always been.
   ========================================================================== */

.reader-paged {
  display: grid;
  grid-template-columns: var(--reader-zone) minmax(0, 1fr) var(--reader-zone);
  align-items: stretch;
  margin-top: var(--space-5);
  --reader-zone: 76px;
}

.reader-zone {
  display: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}

/* The page turn must look like something you can click, not a hidden hot zone. The control keeps
   a visible resting state and the whole column is the target, so the click is forgiving. */
.reader-paged .reader-zone {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reader-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  /* A page-turn chevron glyph sized to its button, not prose: outside the text scale by design. */
  font-size: 1.5rem;
  line-height: 1;
  transition: background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.reader-zone:hover:not(:disabled) .reader-chevron {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.reader-zone:disabled {
  cursor: default;
}

.reader-zone:disabled .reader-chevron {
  opacity: 0.3;
}

/* The reader is a physical object, not a region of the page: paper-white, bordered and lifted off
   the warm site background so the book reads as something you are holding. */
.reader-paged .reader-frame {
  position: relative;
  overflow: hidden;
  height: min(66vh, 720px);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(24, 50, 45, 0.05), 0 18px 44px rgba(24, 50, 45, 0.09);
}

/* Flush, so the page either side is clipped at the text edge instead of peeking into the margin.
   Pages are turned by setting scrollLeft on this box (see app.js render). It must be a real scroll
   container for that to take — overflow:hidden clamps a programmatic scrollLeft to 0 in Chrome — so it
   scrolls on x with the scrollbar hidden. Scrolling, not transforming, is what makes the flip-book
   work in Safari (a transformed multi-column element loses its off-screen columns there). See D-063. */
.reader-paged .reader-viewport {
  position: relative;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.reader-paged .reader-viewport::-webkit-scrollbar {
  display: none;
}

/* The gutter between a two-page spread, as faint as the crease of an open book. */
.reader-paged.reader-spread .reader-frame::after {
  content: '';
  position: absolute;
  top: var(--space-7);
  bottom: var(--space-7);
  left: 50%;
  width: 1px;
  background: var(--line);
  opacity: 0.7;
  pointer-events: none;
}

/* The unlock page sits over the spread, so the gutter crease would otherwise run straight down the
   middle of the offer card. Drop it while the gate is showing. */
.reader-paged.reader-spread .reader-frame:has(.reader-viewport-gated)::after {
  display: none;
}

@media (max-width: 760px) {
  .reader-paged .reader-frame {
    padding: var(--space-6) var(--space-5);
  }
}

.reader-paged .reader-flow {
  height: 100%;
  column-gap: var(--space-9);
  column-fill: auto;
}

/* Each front-matter block and chapter opens its own page, as in a real book. */
.reader-paged .reader-break {
  break-before: column;
  padding-top: 0;
}

.reader-paged .reader-flow > :first-child {
  break-before: auto;
}

/* The measurement marker: no size, no forced break, just a position at the end of the last column. */
.reader-end {
  display: inline-block;
  width: 0;
  height: 0;
  break-before: avoid;
}

.reader-paged .reader-page-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

.reader-paged .reader-page-cover img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.reader-paged .preview-chapter {
  padding: 0;
}

.reader-paged .preview-title {
  padding: 0;
}

/* The unlock page. It sits over a blur of the spread the reader just left, so what is being held
   back is visibly real pages rather than an abstract promise. See D-041. */
.reader-viewport-gated .reader-flow {
  filter: blur(7px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* A full-screen overlay, not a box inside the reader frame: on a short screen a frame-bound gate got
   clipped. Fixed positioning escapes the reader's overflow, so it always sits on top and fits. */
.reader-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(24, 50, 45, 0.5);
}

.reader-gate[hidden] {
  display: none;
}

/* A close control on the offer, so the reader can dismiss it and go back to the preview. */
.pay-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1;
  cursor: pointer;
}

.pay-close:hover {
  border-color: var(--ink);
}

/* The payment offer is a two-panel card: a terracotta promo side and a cream action side. White text
   sits on --accent-ink, never --accent, so it clears WCAG contrast (see DESIGN-PRINCIPLES section 3).
   Shared by the unlock gate and the out-of-credits modal. See D-057. */
.pay-modal-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(860px, 100%);
  max-height: 100%;
  overflow: auto;
  border-radius: var(--radius-md);
  background: var(--cream);
  box-shadow: 0 24px 65px rgba(24, 50, 45, 0.22);
}

.pay-promo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--accent-ink);
  color: #fff;
}

.pay-promo-badge {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 650;
}

.pay-promo-title {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
}

.pay-promo-lede,
.pay-promo-note {
  margin: 0;
  max-width: none;
}

.pay-promo-note {
  font-weight: 650;
}

.pay-trust {
  display: grid;
  gap: var(--space-2);
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.pay-trust li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.pay-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
}

.pay-action-kicker {
  margin: 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.pay-action-title {
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--text-h1);
  font-weight: 650;
  line-height: 1.15;
}

.pay-action-lede {
  margin: 0;
  color: var(--muted);
}

.pay-action-form {
  margin: var(--space-3) 0 0;
}

.pay-action-button {
  width: 100%;
}

.pay-action-note {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* The split card screen: labelled Card number / Expiry / Security code fields, then a Country select.
   Each Stripe element mounts into a .pay-input, which carries the input chrome and reflects
   focus/error via the classes Stripe adds to it. The Country select reuses the same chrome. */
.pay-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pay-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.pay-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pay-input {
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: #fff;
}

.pay-input.StripeElement--focus,
.pay-select:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-ink);
  outline: none;
}

.pay-input.StripeElement--invalid {
  border-color: var(--err);
}

.pay-select {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}

/* The header of the card screen: a bold plan line over a muted price/terms subline. */
.pay-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pay-head-title {
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--text-h2);
  font-weight: 650;
}

.pay-head-sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.pay-error {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  color: var(--err);
}

.pay-error:empty {
  display: none;
}

/* The two steps of the action panel. Each is a plain flow column; app.js toggles [hidden]. */
.pay-review,
.pay-checkout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pay-review[hidden],
.pay-checkout[hidden] {
  display: none;
}

/* The honest feature list on the offer step (checkmarks on the cream action side). */
.pay-plan-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.pay-plan-features li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.pay-plan-features span {
  color: var(--accent-ink);
  font-weight: 700;
}

/* A centred "Most popular" pill at the top of the pack card. */
.pay-ribbon {
  align-self: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* A selected pack gets the accent ring, so the pick is obvious before "Continue". */
.pay-pack.is-selected button {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent-ink) inset;
}

/* The checkout step: back link, summary line, express wallets, card form, legal line. */
.pay-back {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-weight: 600;
  cursor: pointer;
}

.pay-summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.pay-express {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pay-express-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Stripe recommends keeping the Express Checkout mount in layout while it determines wallet
   eligibility. Visibility avoids flashing an empty or imitation wallet button. */
.pay-express-mount {
  visibility: hidden;
}

.pay-express-mount.is-available {
  visibility: visible;
}

.pay-express-mount.is-unavailable {
  height: 0;
  overflow: hidden;
}

.pay-express-status {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* "or pay with card", a centred label between two rules. */
.pay-or {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.pay-or::before,
.pay-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.pay-legal {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* The credits modal is a full-screen overlay (the unlock one lives inside the reader frame). */
.pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(24, 50, 45, 0.45);
}

.pay-overlay[hidden] {
  display: none;
}

.pay-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.pay-pack {
  margin: 0;
}

.pay-pack button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 68px;
  padding: var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.pay-pack button:hover {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
}

.pay-pack.is-popular button {
  border-color: var(--accent-ink);
}

.pay-pack-tag {
  position: absolute;
  top: -9px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 700;
}

.pay-pack-price {
  font-size: var(--text-h3);
  font-weight: 700;
}

.pay-pack-credits {
  font-size: var(--text-caption);
  color: var(--muted);
}

.pay-pack-books {
  font-size: var(--text-caption);
  color: var(--accent-ink);
  font-weight: 600;
}

#credits-modal-close {
  align-self: center;
}

@media (max-width: 700px) {
  .pay-modal-card {
    grid-template-columns: 1fr;
  }
}

.reader-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.reader-bar[hidden] {
  display: none;
}

.reader-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.reader-step {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  cursor: pointer;
}

.reader-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.reader-count {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}

.reader-where {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--ink);
}

.reader-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.reader-track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--motion-base) var(--ease-out);
}

.reader-hint {
  margin: 0;
  text-align: center;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* No room for side zones on a phone: the bar's buttons and a swipe do the work. */
@media (max-width: 760px) {
  .reader-paged {
    grid-template-columns: minmax(0, 1fr);
    --reader-zone: 0px;
  }

  .reader-paged .reader-zone {
    display: none;
  }

  .reader-paged .reader-frame {
    height: min(68vh, 620px);
  }
}

.preview-no-cover {
  width: var(--container-read);
  /* A clear gap from the reader bar above, which it used to butt straight up against. */
  margin: var(--space-8) auto var(--space-9);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}

.preview-no-cover p {
  max-width: none;
}

.preview-pending {
  max-width: none;
  font-style: italic;
  color: var(--muted);
}

/* Drop cap on the chapter's opening paragraph only: the paragraph directly after the
   chapter title, never after an in-chapter subhead, and never on the placeholder. */
.preview-chapter > h2:first-of-type + p:not(.preview-pending)::first-letter {
  float: left;
  padding: 0.1em 0.1em 0 0;
  color: var(--accent);
  font-size: 4.6rem;
  line-height: 0.72;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 700px) {
  .hero,
  .transformation-flow,
  .output-proof,
  .credit-proof,
  .answer-grid,
  .guest-outline-intro,
  .guest-chapters li,
  .guest-next {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .hero-book {
    min-height: 0;
  }

  .hero {
    align-items: start;
    gap: var(--space-5);
  }

  .hero-copy {
    display: contents;
  }

  .hero-copy .eyebrow {
    order: 0;
  }

  .hero-copy h1 {
    order: 1;
    /* display:contents makes the grid row-gap the only spacing needed here */
    margin-bottom: 0;
  }

  /* The subline reads as part of the headline, so it stays with it rather than
     being stranded below the form. */
  .hero-copy > p:not(.eyebrow):not(.hero-note) {
    order: 2;
    margin-bottom: var(--space-2);
  }

  .hero-quickstart {
    order: 3;
  }

  .sample-downloads article {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .sample-downloads a {
    justify-self: start;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero-quickstart {
    padding: var(--space-5);
  }

  .quickstart-examples {
    order: 2;
  }

  .quickstart-submit {
    grid-template-columns: 1fr;
    order: 1;
  }

  /* same order value as the button and later in the DOM, so it follows it */
  .hero-quickstart .hero-note {
    order: 1;
  }

  .quickstart-submit button {
    width: 100%;
  }

  .title-choice-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .trust-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .credit-proof {
    padding: var(--space-5);
  }

  .site-footer .wrap {
    flex-direction: column;
  }

  .guest-outline-intro .eyebrow {
    margin-bottom: calc(var(--space-7) * -1);
  }

  .type-picker,
  .form-row,
  .page-head,
  .editor-head,
  .editor-actions,
  .delete-confirm,
  .preview-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .page-head,
  .preview-toolbar {
    align-items: flex-start;
  }

  .chapter {
    grid-template-columns: 32px 1fr;
  }

  .chapter-side {
    grid-column: 2;
    justify-items: start;
  }

  .editor-actions {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .editor-head-action {
    justify-items: stretch;
    text-align: left;
  }

  .chapter-body {
    min-height: 260px;
  }

  .export-bar .button {
    flex: 1;
    min-width: 0;
    padding-inline: var(--space-3);
  }

  .preview-chapter {
    padding-top: var(--space-8);
  }

  .preview-cover {
    margin-bottom: var(--space-8);
  }
}

/* Mandatory. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Landing page: social proof, problem, how-it-works, testimonials, pricing.
   The proof and pricing blocks render placeholder content while
   src/placeholder_proof.php is active. See that file before shipping.
   ========================================================================== */

/* --- 2. social proof bar --- */


/* Sample output sits beside placeholder proof, but is explicitly qualified. */
/* Tight to the hero on purpose: the covers are the first real proof and should
   be reachable without a scroll on a laptop. */
.cover-showcase {
  padding: var(--space-5) 0 var(--space-4);
}

.cover-showcase-intro {
  margin-bottom: var(--space-5);
}

.cover-showcase-intro h2 {
  max-width: 22ch;
  font-size: var(--text-display-2);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.cover-showcase-intro > p {
  max-width: 48ch;
  margin: var(--space-3) 0 0;
  color: var(--muted);
}

.cover-showcase-shelf {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
}

.cover-showcase-frame {
  position: relative;
}

.cover-showcase-next {
  display: none;
}

.showcase-cover {
  min-width: 0;
  margin: 0;
}

.showcase-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}

.showcase-cover figcaption {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
}

.showcase-cover figcaption span {
  font-size: var(--text-caption);
  color: var(--muted);
}

.showcase-cover figcaption strong {
  font-size: var(--text-sm);
  line-height: 1.25;
}

.book-cta-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.book-cta-form input {
  min-width: 0;
  margin: 0;
  background: var(--cream);
}

.book-cta-form button {
  white-space: nowrap;
}

.output-proof,
.sample-library {
  padding-bottom: var(--space-4);
  border-bottom: 0;
}

.book-cta-form + .problem,
.book-cta-form + .objection,
.book-cta-form + .pricing {
  padding-top: var(--space-4);
  border-top: 0;
}

/* --- 3. problem --- */
.problem {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: start;
  gap: var(--space-8);
  padding-block: var(--section-y);
}

.problem-copy h2 {
  margin-bottom: var(--space-5);
  max-width: 20ch;
  font-size: var(--text-display-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.problem-copy p {
  font-size: var(--text-body-lg);
  color: var(--muted);
}

.problem-costs {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.problem-costs li {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent);
  background: var(--cream);
  font-size: var(--text-sm);
  color: var(--muted);
}

.problem-costs span {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--ink);
}

/* --- 4. how it works --- */
.how {
  padding-block: var(--section-y);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.how-steps li {
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}

.how-number {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-h1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}

.how-steps h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h2);
}

.how-steps p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* --- 5. testimonials --- */
.testimonials {
  padding-block: var(--section-y);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.testimonial blockquote {
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--text-h3);
  line-height: 1.6;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.testimonial figcaption strong {
  display: block;
  font-size: var(--text-sm);
}

.testimonial-role {
  display: block;
  font-size: var(--text-caption);
  color: var(--muted);
}

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: var(--text-caption);
  font-weight: 700;
}

.testimonial-result {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
  font-weight: 650;
  color: var(--ok);
}

/* --- 6. pricing --- */
.pricing {
  padding-block: var(--section-y);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.plan-popular {
  border-color: var(--accent-ink);
  padding-top: var(--space-5);
}

.plan-flag {
  margin: 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.plan h3 {
  font-size: var(--text-h2);
}

.plan-price {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.plan-price strong {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.plan-credits {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 650;
}

.plan ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

.plan ul li::before {
  content: '\2713';
  margin-right: var(--space-2);
  color: var(--ok);
  font-weight: 700;
}

.plan .button {
  margin-top: auto;
  text-align: center;
}

.plan-note {
  margin: var(--space-5) 0 0;
  max-width: none;
  font-size: var(--text-caption);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .problem,
  .how-steps,
  .plan-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  

  

  .cover-showcase-intro {
    display: block;
  }

  .cover-showcase-intro > p {
    margin-top: var(--space-3);
    text-align: left;
  }

  .cover-showcase-shelf {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(var(--page-pad) * -1);
    padding-inline: var(--page-pad);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--page-pad);
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .showcase-cover {
    flex: 0 0 40vw;
    scroll-snap-align: start;
  }

  .cover-showcase-next {
    position: absolute;
    top: 30%;
    right: calc(0px - var(--space-3));
    z-index: 1;
    display: grid;
    width: var(--space-7);
    min-height: var(--space-7);
    padding: 0;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper);
  }

  .cover-showcase-next svg {
    width: var(--space-5);
    height: var(--space-5);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cover-showcase-next:disabled {
    border-color: var(--line-strong);
    background: var(--paper);
    color: var(--muted);
    cursor: default;
  }

  .book-cta-form {
    gap: var(--space-2);
  }

  .book-cta-form input,
  .book-cta-form button {
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }
}

/* --- 4b. objection buster: "why not just use ChatGPT?" --- */
.objection {
  padding-block: var(--section-y);
}

/* Stacked, like the section intros: a headline and the line that answers it are one
   unit, and side by side they leave the headline row half empty. */
.objection-lead > p {
  max-width: 68ch;
  margin: var(--space-3) 0 0;
}

.objection-lead h2 {
  font-size: var(--text-display-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.objection-concede {
  margin: 0;
  font-size: var(--text-body-lg);
  color: var(--muted);
}

.objection-story {
  max-width: 62ch;
  margin-top: var(--space-6);
  font-size: var(--text-body-lg);
  line-height: 1.65;
}

.objection-story p:last-child {
  margin-bottom: 0;
  font-weight: 650;
  color: var(--ink);
}

/* Deliberately unequal: the pile of work is wider than the alternative. */
.objection-compare {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: start;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.stack-diy,
.stack-draftly {
  padding: var(--space-6);
  border-radius: var(--radius-md);
}

.stack-diy {
  border: 1px solid var(--line);
  background: transparent;
}

.stack-diy h3,
.stack-draftly h3 {
  margin-bottom: var(--space-5);
  font-size: var(--text-h2);
}

.stack-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
}

.stack-list strong {
  color: var(--ink);
}

.stack-list::marker,
.stack-list li::marker {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stack-verdict {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  max-width: none;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--err);
}

.stack-draftly {
  border: 1px solid var(--accent-ink);
  background: var(--accent-wash);
}

.stack-draftly-lead {
  margin-bottom: var(--space-5);
  max-width: none;
  font-size: var(--text-body-lg);
  font-weight: 650;
}

.stack-included {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.stack-included li::before {
  content: '\2713';
  margin-right: var(--space-2);
  color: var(--ok);
  font-weight: 700;
}

.stack-close {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-strong);
  max-width: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (max-width: 700px) {
  .objection-compare {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* A headline and its own supporting line are one unit, not two blocks. When the intro
   grid stacks, the generic section row gap is far too loose between them. */
/* --- publish and sell on --- */
.publish-on { padding-block: var(--section-y); text-align: center; }
.publish-on-title {
  margin-bottom: var(--space-6); font-size: var(--text-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.publish-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--space-5) var(--space-6); margin: 0; padding: 0; list-style: none;
}
.publish-logos li { display: grid; justify-items: center; gap: var(--space-2); width: 84px; }
.publish-logos svg { width: 28px; height: 28px; fill: var(--muted); }
.publish-logos span { font-size: var(--text-caption); color: var(--muted); }

/* --- pricing assurances --- */
.assurances {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  margin: var(--space-6) 0 0; padding: var(--space-5) 0 0;
  list-style: none;
}
.assurances li { display: grid; justify-items: start; gap: var(--space-2); }
.assurances svg {
  width: 22px; height: 22px; fill: none; stroke: var(--accent-ink);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.assurances strong { font-size: var(--text-sm); }
.assurances span { font-size: var(--text-caption); color: var(--muted); }
.quick-math {
  margin: var(--space-5) 0 var(--space-3); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm); background: var(--accent-wash);
  max-width: none; font-size: var(--text-sm);
}
.quick-math strong { color: var(--accent-ink); }

@media (max-width: 700px) {
  .assurances { grid-template-columns: 1fr 1fr; }
}

/* --- testimonial star ratings --- */
.review-stars {
  margin: 0;
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--star);
}

.review-stars .star-empty {
  color: var(--line-strong);
}

/* --- mobile sticky CTA --- */
.book-cta-sticky { display: none; }

@media (max-width: 700px) {
  /* the repeated inline forms give way to the one sticky bar */
  .book-cta-form { display: none; }

  .book-cta-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line-strong);
    background: var(--cream);
    box-shadow: 0 -6px 20px rgba(24, 50, 45, 0.1);
    transform: translateY(110%);
    transition: transform var(--motion-base) var(--ease-out);
  }

  .hero-gone .book-cta-sticky { transform: translateY(0); }

  .book-cta-sticky input { flex: 1; min-width: 0; }
  .book-cta-sticky button { flex: 0 0 auto; }

  /* room so the bar never covers the footer */
  .hero-gone { padding-bottom: 76px; }
}

/* ==========================================================================
   Onboarding chat: the first screen after a visitor submits their idea.
   ========================================================================== */
.chat-shell {
  width: min(760px, calc(100% - var(--space-5) * 2));
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-8);
}

.chat-window {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.chat-who { margin: 0; font-size: var(--text-sm); }
.chat-who span { color: var(--muted); }
.chat-state {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font-size: var(--text-caption); color: var(--muted);
}
.chat-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: chat-pulse 1.8s ease-in-out infinite;
}
@keyframes chat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.chat-log { display: grid; gap: var(--space-5); padding: var(--space-5); }

.chat-turn-you { display: flex; justify-content: flex-end; gap: var(--space-3); }

.chat-turn-you .chat-bubble {
  max-width: 32rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.chat-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-caption);
  color: var(--muted);
}

.chat-idea { margin: 0; max-width: none; font-weight: 650; }

.chat-edit {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-caption);
}

.chat-avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: var(--paper);
  font-size: var(--text-caption); font-weight: 650; color: var(--muted);
}

.chat-from {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: 650;
  color: var(--muted);
}

.chat-card {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.chat-card h1 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.chat-lede { color: var(--muted); }

.chat-change {
  margin: var(--space-5) 0;
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
}

.chat-change summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}
.chat-change summary::-webkit-details-marker { display: none; }

.chat-current { font-weight: 650; }
.chat-change-link {
  font-size: var(--text-sm);
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.chat-types {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

.chat-type {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-weight: 400;
  cursor: pointer;
}
.chat-type input { width: auto; min-height: 0; margin: 0.2em 0 0; accent-color: var(--accent-ink); }
.chat-type strong { display: block; font-size: var(--text-sm); }
.chat-type span span { font-size: var(--text-caption); color: var(--muted); }
.chat-type:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-wash); }

.chat-card button[type="submit"] { width: 100%; }

.chat-foot {
  margin: var(--space-5) 0 0;
  max-width: none;
  font-size: var(--text-caption);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .chat-types { grid-template-columns: 1fr; }
  .chat-change summary { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

/* --- onboarding: settled step + title choice --- */
.chat-settled {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); font-size: var(--text-sm);
}
.chat-settled > span[aria-hidden] { color: var(--ok); font-weight: 700; }
.chat-settled > span:last-child { color: var(--muted); font-size: var(--text-caption); }

.title-options { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }

.title-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--cream); font-weight: 400; cursor: pointer;
}
.title-option input[type="radio"] { width: auto; min-height: 0; margin: 0.3em 0 0; accent-color: var(--accent-ink); }
.title-option > span { font-family: var(--font-book); font-size: var(--text-h3); line-height: 1.4; }
.title-option:has(input[type="radio"]:checked) { border-color: var(--accent-ink); background: var(--accent-wash); }

.title-option-own > span { display: grid; gap: var(--space-2); width: 100%; font-family: var(--font-ui); }
.title-option-own strong { font-size: var(--text-sm); }
.title-option-own input[type="text"] { min-height: 40px; }

.title-actions button { width: 100%; }

.title-reroll {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.title-reroll button { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.title-cost {
  font-size: var(--text-caption); font-weight: 650; color: var(--accent-ink);
}

/* --- transformation sample: one sentence in, a finished book out --- */
/* The sample now follows the three steps directly with no heading of its own, so it reads
   as the same thought continuing. Two full section paddings between them is too much. */
.transformation {
  padding-top: 0;
}

.transformation-card {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

/* Two steps on a single continuous rail. The rail is what makes the sentence and the
   book read as one movement rather than two stacked blocks. */
.flow { margin: 0; padding: 0; list-style: none; }

.flow-step {
  position: relative;
  padding-left: 2.75rem;
  padding-bottom: var(--space-6);
}
.flow-step:last-child { padding-bottom: 0; }

.flow-step::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28rem;
  width: 13px; height: 13px;
  border: 2px solid var(--accent-ink);
  border-radius: 50%;
  background: var(--cream);
}
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px; top: 1.5rem; bottom: -0.1rem;
  width: 1px;
  background: var(--line-strong);
}

.flow-label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

/* Overrides the global `p { max-width: var(--measure-ui) }`, which otherwise stops both
   of these short of the card edge and makes the block look ragged. */
.typed-idea {
  margin: 0;
  max-width: none;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-family: var(--font-book);
  font-size: var(--text-h3);
  line-height: 1.45;
}

.built-head {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding-top: var(--space-1); padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.outline-cover {
  width: 150px; height: auto; flex: 0 0 150px;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(24, 50, 45, 0.2);
}
.built-head h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-book);
  font-size: var(--text-h1);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.built-synopsis {
  margin: var(--space-3) 0 0;
  max-width: none;
  font-family: var(--font-book);
  font-size: var(--text-h3);
  line-height: 1.6;
}
.built-meta { margin: 0; font-size: var(--text-caption); color: var(--muted); }

.built-written {
  margin: var(--space-5) 0 0;
  max-width: none;
  font-size: var(--text-body);
  font-weight: 600;
}

.built-chapters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.built-chapters li {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
  font-family: var(--font-book);
  font-size: var(--text-body);
  line-height: 1.45;
}
.built-chapters li span {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.built-resources {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.built-resources-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.built-resources ul {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6); row-gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-book); font-size: var(--text-body); color: var(--muted);
}

@media (max-width: 760px) {
  .transformation-card { padding: var(--space-5) var(--space-4); }
  .flow-step { padding-left: 1.9rem; }
  .flow-step::before { width: 11px; height: 11px; }
  .flow-step:not(:last-child)::after { left: 5px; }
  .typed-idea { padding: var(--space-3) var(--space-4); font-size: var(--text-h3); }
  .built-head { gap: var(--space-4); }
  .outline-cover { width: 96px; flex-basis: 96px; }
  .built-chapters,
  .built-resources ul { grid-template-columns: 1fr; }
  .built-chapters li { grid-template-columns: 5.25rem 1fr; }
}

/* --- commercial rights --------------------------------------------------
   Given its own section because ownership is the objection that actually blocks
   payment for an AI writing tool. Buried in a four-up assurance strip it reads as
   boilerplate; alone with a seal it reads as a promise. */
.rights {
  padding-block: var(--section-y);
}

.rights-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius-md);
  background: var(--accent-wash);
  text-align: center;
}

.rights-seal {
  width: 76px; height: 76px;
  margin-bottom: var(--space-4);
  fill: none; stroke: var(--accent-ink);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.rights-eyebrow {
  margin: 0 0 var(--space-3);
  max-width: none;
  font-size: var(--text-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-ink);
}

.rights h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-display-2);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.rights-lead {
  max-width: 44ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}

.rights-list {
  display: inline-grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  text-align: left;
}
.rights-list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.rights-list li::before {
  content: "\2713";
  color: var(--accent-ink);
  font-weight: 700;
}

.rights-close {
  margin: 0;
  max-width: none;
  font-weight: 700;
  color: var(--accent-ink);
}

@media (max-width: 700px) {
  .rights-inner { padding: var(--space-6) var(--space-4); }
  .rights-seal { width: 60px; height: 60px; }
}

/* --- what you control ---------------------------------------------------
   Three plain statements, no mock interface. A fake screenshot of a product the
   visitor has not used yet asks them to evaluate a UI instead of a promise. */
.control-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.control-points li {
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}

.control-points h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
}

.control-points p {
  margin: 0;
  max-width: none;
  color: var(--muted);
}

@media (max-width: 860px) {
  .control-points { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- onboarding flow: stages 1 to 6 --------------------------------------
   Reuses the existing .chat-* frame. Only what the flow genuinely adds is new. */

.flow-progress {
  height: 3px;
  background: var(--line);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-5);
}

.flow-progress span {
  display: block;
  height: 100%;
  background: var(--accent-ink);
  border-radius: var(--radius-sm);
  transition: width var(--motion-slow) var(--ease-out);
}

.chat-language {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-sm);
}

.chat-language select { width: auto; min-height: 44px; }

.chat-settled-title { font-family: var(--font-book); }

.chat-settled-change { margin-left: auto; }

.link-button {
  background: none;
  border: 0;
  padding: var(--space-1) var(--space-2);
  min-height: 0;
  color: var(--accent-ink);
  font-size: var(--text-caption);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover { color: var(--ink); }

.gate-form .field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }

.gate-form button[type="submit"] { width: 100%; }

.chat-foot-inline {
  margin: var(--space-4) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* A working state names what is happening and what follows it, so the wait is legible. */
.working-next {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
}

.working-next-label {
  flex: none;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.working-retry { margin-top: var(--space-4); }

/* The live line. A model call runs for seconds with nothing to show, so this states that work is
   in flight and, once the wait gets long enough to worry about, roughly how long it takes. */
.working-live {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--ink);
}

.working-spark {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: busy-pulse 1.1s ease-in-out infinite;
}

.working-live-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.working-noscript {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* The subtitle is part of the book's title, so it stays in the book's face, not the interface's. */
.title-subtitle {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* The chapter list is the book's spine, so it is numbered manuscript structure, not cards. */
.flow-outline {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.flow-outline li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.flow-outline-number {
  flex: none;
  width: 2ch;
  font-size: var(--text-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.flow-outline-text strong {
  display: block;
  font-family: var(--font-book);
  font-size: var(--text-h3);
  line-height: 1.35;
}

.flow-outline-text > span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  color: var(--muted);
}

.outline-start button[type="submit"] { width: 100%; }

.outline-replan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.chat-settled-change { margin-left: auto; }

.title-reroll .title-cost { white-space: nowrap; }

/* --- onboarding stage 7: the writing screen ------------------------------
   The run sheet reuses the .flow rail from the landing page. Only the step states are new. */

.chat-turn-wide .chat-card { max-width: none; }

.writing-head { margin-bottom: var(--space-6); }

.onboarding-stage .writing-head h1 {
  max-width: none;
  margin-bottom: var(--space-4);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
}

.writing-bar {
  height: 6px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.writing-bar span {
  display: block;
  height: 100%;
  background: var(--accent-ink);
  transition: width var(--motion-slow) var(--ease-out);
}

.writing-panes { display: grid; gap: var(--space-6); margin-top: var(--space-6); }

@media (min-width: 700px) {
  .writing-panes { grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: start; }
}

.run-step { padding-bottom: var(--space-5); }

.run-step-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 650;
}

.run-step-tick { color: var(--ok); }

/* State is never colour alone: done carries a tick, current carries the word "now". */
.run-step-now {
  padding: 0 var(--space-2);
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--accent-ink);
}

.run-step-detail {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  color: var(--muted);
}

.run-step-ahead { opacity: 0.55; }

.run-step-ahead::before { border-color: var(--line-strong); }

.run-step-current::before { background: var(--accent-ink); }

/* The page the author is watching arrive. Book typography, because it is the book. */
.live-page {
  padding: var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.live-page-number {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-page-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-book);
  font-size: var(--book-h2);
  line-height: 1.3;
}

.live-page-text {
  position: relative;
  margin: 0;
  max-width: none;
  max-height: 20em;
  overflow: hidden;
  font-family: var(--font-book);
  font-size: var(--book-body);
  line-height: 1.75;
  color: var(--ink);
  /* A soft fade at the foot, so the clipped preview reads as "more to come" rather than a hard cut. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

/* The live page renders the chapter as prose now, so its blocks need the reader's spacing. */
.live-page-text p {
  margin: 0 0 1em;
  max-width: none;
}

.live-page-text h2,
.live-page-text h3 {
  margin: 1.4em 0 0.4em;
  font-family: var(--font-book);
  font-weight: 600;
}

.live-page-text h2 {
  font-size: var(--book-h3);
}

.live-page-text h3 {
  font-size: var(--book-body);
}

.live-page-text ul,
.live-page-text ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

/* Position through the book, one mark per chapter. */
.page-rail {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.page-rail-mark {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-sm);
  background: var(--line);
}

.page-rail-done { background: var(--accent-ink); }

/* --- onboarding stage 10: choosing the cover ----------------------------- */

.cover-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
}

.cover-choice { display: grid; gap: var(--space-3); cursor: pointer; }

.cover-choice img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.cover-choice input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent-ink); }

.cover-choice-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--muted);
}

/* Selection is a border and a word, never colour on its own. */
.cover-choice:has(input:checked) img {
  border-color: var(--accent-ink);
  border-width: 2px;
}

.cover-choice:has(input:checked) .cover-choice-label {
  color: var(--accent-ink);
  font-weight: 650;
}

.cover-choice:has(input:focus-visible) img {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- onboarding stages 11 and 12: reading and handover ------------------- */

/* One page of the book at a time, on the reading surface rather than the interface one. */
.book-page {
  margin: var(--space-5) 0;
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
}

/* Inside a single page the chapter opener needs no run-in space: the page border is the break. */
.book-page .preview-chapter,
.book-page .preview-title { margin: 0; padding: 0; min-height: 0; }

.book-page h2 {
  font-family: var(--font-book);
  font-size: var(--book-h2);
  line-height: 1.3;
  margin: 0 0 var(--space-5);
}

.page-cover { margin: 0 auto var(--space-6); max-width: 260px; }

.page-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-none);
  /* The one permitted shadow: a physical cover resting on the page. */
  box-shadow: 0 24px 65px rgba(24, 50, 45, 0.18);
}

.page-gate-reason {
  max-width: var(--measure-ui);
  margin-bottom: var(--space-5);
  color: var(--muted);
}

.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-count {
  font-size: var(--text-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.unlock-list {
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.unlock-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.unlock-exports { margin-bottom: var(--space-6); }

/* A chapter held behind the unlock: present and accounted for, but not readable (D-041). */
.chapter-held {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.chapter-held-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* The byline field on the title stage (D-042). */
.title-byline {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.title-byline label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.title-byline input {
  width: 100%;
}

/* Editing is the second thing anyone wants from a preview, so it sits with the book's own actions
   rather than in the site header where it read as navigation. */
.button-edit {
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink);
}

.button-edit:hover {
  /* It is a bordered secondary button, so hover must not inherit the primary button's dark fill,
     which left dark accent-ink text on a dark background. Keep the ghost look, deepen the edge. */
  background: var(--accent-wash);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

.export-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* The unlock form sits in the toolbar as one more button, with no form margin of its own. */
.toolbar-unlock {
  margin: 0;
  display: flex;
}

/* Chapters listed in the contents but not readable yet (D-041). */
.preview-contents-held {
  color: var(--muted);
}

/* ==========================================================================
   Collapsible chapters in the editor. Twelve chapters open at once meant
   scrolling for a minute to reach chapter nine.
   ========================================================================== */

.chapter-fold-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.chapter-fold-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
}

.chapter-fold-summary::-webkit-details-marker {
  display: none;
}

.chapter-fold-title {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-book);
  font-size: var(--text-h3);
  font-weight: 600;
}

/* The disclosure triangle, drawn rather than borrowed, so it turns with the fold. */
.chapter-fold-title::before {
  content: '';
  position: absolute;
  top: 0.45em;
  left: 0;
  border: 5px solid transparent;
  border-left-color: var(--muted);
  transition: transform var(--motion-fast) var(--ease-out);
}

.chapter-fold[open] > .chapter-fold-summary .chapter-fold-title::before {
  transform: rotate(90deg) translateX(-1px);
}

.chapter-fold-summary:hover .chapter-fold-title {
  color: var(--accent-ink);
}

.chapter-fold-meta {
  flex: none;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* Open, the heading becomes editable and the static title in the summary is redundant. */
.chapter-fold[open] > .chapter-fold-summary .chapter-fold-title {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

/* ==========================================================================
   Editor header (D-043). Two blocks — the book's details, and the one action
   that costs money — on a single grid spine, with one label style throughout.
   ========================================================================== */

.editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.editor-head-main {
  min-width: 0;
}

.editor-head .title-input {
  width: 100%;
}

/* Every field is labelled the same way, so nothing competes for attention. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: start;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.field {
  min-width: 0;
}

.field > label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field > input,
.field > select {
  width: 100%;
}

.field-inline {
  display: flex;
  gap: var(--space-2);
}

.field-inline input {
  min-width: 0;
  flex: 1;
}

.field-inline button {
  flex: none;
  white-space: nowrap;
}

/* One caption size, always directly under the control it explains. */
.field-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--muted);
}

.editor-head-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 260px;
}

.editor-head-action button {
  width: 100%;
}

.editor-head .editor-status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.chapter-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-7) 0 var(--space-4);
}

.chapter-list-title {
  margin: 0;
  font-size: var(--text-h3);
}

@media (max-width: 760px) {
  .editor-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .editor-head-action {
    max-width: none;
  }
}

/* ==========================================================================
   Chapter rows (D-043). Collapsed, a chapter is one line on one baseline:
   number, title, length, status, controls. It was three type sizes stacked
   across two rows, which made a single line of text 200px tall.
   ========================================================================== */

.chapter {
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

/* The number is an index, not a headline. */
.chapter-number {
  align-self: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

/* Status and controls share the title's line instead of stacking beside it. */
.chapter-side {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chapter-status {
  align-self: center;
}

.chapter-arrange {
  align-items: center;
}

/* Quiet until wanted: four bordered boxes per row competed with the titles. */
.chapter-arrange .icon-button {
  height: 28px;
  width: 28px;
  min-height: 28px;
  min-width: 28px;
  border-color: transparent;
}

.chapter:hover .chapter-arrange .icon-button,
.chapter-arrange .icon-button:focus-visible {
  border-color: var(--line);
}

.chapter-fold-summary {
  padding: 0;
}

.chapter-fold-title {
  font-size: var(--text-body);
  line-height: 1.35;
}

.chapter-fold[open] > .chapter-fold-summary {
  margin-bottom: var(--space-4);
}

/* Open, the editable heading takes over, so the summary title steps back. */
.chapter-fold[open] > .chapter-fold-summary .chapter-fold-title {
  font-size: var(--text-caption);
}

@media (max-width: 760px) {
  .chapter {
    grid-template-columns: 2rem minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .chapter-side {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* The title is a textarea so a long one wraps instead of being clipped mid-word (D-043). */
textarea.title-input {
  display: block;
  overflow: hidden;
  resize: none;
  line-height: 1.1;
}

/* Give the retitle field room; the button drops below rather than crushing the input. */
.field-inline {
  flex-wrap: wrap;
}

.field-inline input {
  flex: 1 1 11rem;
}

/* The cover belongs with the book's identity, above the chapters, not stranded at the bottom of a
   long list (D-043). Same label and caption discipline as the header fields. */
.editor-actions {
  margin: var(--space-7) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.editor-actions .cover-controls h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
}

.editor-actions .cover-controls > .field-hint:first-of-type {
  margin-bottom: var(--space-4);
}

.editor-actions .cover-controls .button {
  margin-top: var(--space-4);
}

/* The session-ended page (D-045). */
.notice-panel {
  max-width: 46ch;
  margin: var(--space-9) auto;
  text-align: left;
}

.notice-panel h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h1);
}

.notice-panel p {
  margin: 0 0 var(--space-5);
  color: var(--muted);
}

/* ==========================================================================
   Editor alignment pass (D-047). One spine; nothing floating; the action that
   writes the chapters sits under the chapters.
   ========================================================================== */

/* The header is a single column now that the action has moved below the list. */
.editor-head-full {
  grid-column: 1 / -1;
}

.write-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* The explicit display above would otherwise beat the `hidden` attribute, so the bar has to opt
   back out when there is nothing left to write. */
.write-bar[hidden] {
  display: none;
}

.write-bar #generate-cost {
  margin: 0;
}

/* The cover block. The slot on the left is a fixed 2:3 whether it holds a cover or a placeholder,
   so the layout never changes shape between the two states, and the controls always occupy the
   column that was sized for them. See D-050. */
.editor-actions {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.cover-slot {
  aspect-ratio: 2 / 3;
}

.editor-actions .cover-preview {
  width: 100%;
  height: 100%;
  margin: 0;
}

.editor-actions .cover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-caption);
}

.cover-placeholder[hidden] {
  display: none;
}

.cover-placeholder-mark {
  /* A glyph mark sized to its slot, not prose: outside the text scale by design. */
  font-size: 1.75rem;
  line-height: 1;
}

.editor-actions .cover-controls {
  min-width: 0;
}

.editor-actions .cover-controls h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
}

/* `.editor-actions p` zeroes every paragraph margin in this block, so this has to match it on
   specificity to keep the intro from sitting on the first field label. */
.editor-actions .cover-lede {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted);
}

.editor-actions .field-hint {
  margin: var(--space-2) 0 0;
}

.editor-actions .cover-controls .field-inline input {
  flex: 1 1 16rem;
}

.editor-actions .cover-state:empty {
  display: none;
}

.editor-actions .cover-state {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
}

.cover-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .editor-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .cover-slot {
    max-width: 180px;
  }
}

/* A chapter row that has to wrap aligns its second line to the title, not to the number. */
@media (max-width: 900px) {
  .chapter {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .chapter-side {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

/* The arrange controls kept a border only while hovered, so rows looked inconsistent side by side.
   One resting state for all of them; hover changes colour, not presence. */
.chapter-arrange .icon-button {
  border-color: var(--line);
}

.chapter:hover .chapter-arrange .icon-button,
.chapter-arrange .icon-button:focus-visible {
  border-color: var(--line-strong);
}

/* Two cards across a phone leaves ~160px per card, which the 24px body padding and the three
   actions in a row could not fit. Tighten the padding and let the actions wrap (D-046). */
@media (max-width: 760px) {
  .book-card-body {
    padding: var(--space-4) var(--space-3);
    gap: var(--space-2);
  }

  .book-card-actions {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }

  .book-card-body h2 {
    font-size: var(--text-body);
  }
}

/* The last tile on the shelf is always the next book (D-046). It matches a book card's footprint
   so the grid stays even whether it lands beside the last cover or starts the next row. */
.book-card-new {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--cream);
  box-shadow: none;
}

.book-card-new:hover {
  border-color: var(--accent-ink);
  background: var(--cream);
  box-shadow: none;
}

.book-card-new a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  min-height: 320px;
  padding: var(--space-5);
  color: var(--accent-ink);
  text-align: center;
  text-decoration: none;
}

.book-card-new-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 50%;
  /* A glyph mark sized to its circle, not prose: outside the text scale by design. */
  font-size: 1.75rem;
  line-height: 1;
}

.book-card-new-label {
  font-weight: 600;
}

.book-card-new-hint {
  font-size: var(--text-caption);
  color: var(--muted);
}

/* The "Something else" description, shown only with that type selected (D-049). */
.custom-type[hidden],
.chat-custom-type[hidden] {
  display: none;
}

.chat-custom-type {
  margin-top: var(--space-4);
}

.chat-custom-type label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.chat-custom-type input {
  width: 100%;
}

/* ------------------------------------------------------------- account settings */
/* D-068. Borders and the paper/cream step do the separating, as everywhere else — the mock's drop
   shadows and tinted hero card are not reproduced (DESIGN-PRINCIPLES §5: one shadow in the product,
   and white on --accent fails contrast at body size). */

.page-lede {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

/* Stacked panels only. Scoped to direct children so the two side-by-side panels inside
   .settings-pair stay top-aligned instead of the second one being pushed down a row. */
.settings > .panel + .panel,
.settings > .settings-pair + .panel {
  margin-top: var(--space-5);
}

.panel-note {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.panel-note + .settings-figure,
.panel-note + .settings-form,
.settings-figure + .panel-note {
  margin-top: var(--space-4);
}

/* Tabs are links, so each one is a URL you can bookmark and the back button works. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.settings-tab {
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 650;
  text-decoration: none;
}

.settings-tab:hover {
  color: var(--ink);
}

.settings-tab-on {
  border-bottom-color: var(--accent-ink);
  color: var(--accent-ink);
}

.settings-note {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.settings-note-ok {
  border-color: var(--ok);
  color: var(--ok);
}

.settings-note-bad {
  border-color: var(--err);
  color: var(--err);
}

.payment-success h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.payment-success p {
  max-width: 72ch;
  margin: var(--space-2) 0 0;
  color: var(--ink);
}

.settings-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.settings-form {
  margin-top: var(--space-4);
}

.settings-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 650;
}

.settings-form input + label {
  margin-top: var(--space-4);
}

.settings-form .field-hint {
  margin-top: var(--space-2);
}

/* Forms are display:grid app-wide, which stretches a button across the column. Size it to its
   label and sit it at the end of the row, as the reference layout does. */
.settings-form button {
  justify-self: end;
  margin-top: var(--space-5);
}

.settings-figure {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-lg);
}

.settings-figure strong {
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.billing-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.billing-balance,
.billing-summary {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.billing-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--accent-wash);
}

.billing-balance .eyebrow,
.billing-section-head .eyebrow {
  margin: 0 0 var(--space-2);
}

.billing-balance-number {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body-lg);
}

.billing-balance-number strong {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.billing-balance > p:not(.eyebrow):not(.billing-balance-number) {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.billing-balance .buy-credits-form {
  margin-top: var(--space-5);
}

.billing-summary {
  background: var(--paper);
}

.billing-summary h2 {
  margin: 0;
  font-size: var(--text-h2);
}

.billing-facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.billing-facts li {
  position: relative;
  padding-left: calc(var(--space-4) + 12px);
}

.billing-facts li::before {
  position: absolute;
  top: 0.38em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-ink);
  content: '';
}

.billing-facts strong,
.billing-facts span {
  display: block;
}

.billing-facts span {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.billing-section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}

.billing-section-head h2 {
  margin: 0;
}

.billing-empty {
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  text-align: center;
}

.billing-empty p {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.billing-table-wrap {
  overflow-x: auto;
}

.billing-table td:first-child strong {
  display: block;
  font-weight: 650;
}

.billing-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
}

.billing-status {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 700;
}

.billing-receipt-cell {
  padding-left: var(--space-5) !important;
  text-align: right !important;
  white-space: nowrap;
}

.billing-receipt-link {
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Progress, not decoration: the fill is how much of the granted credit is gone. */
.settings-meter {
  display: block;
  height: 6px;
  margin-top: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  overflow: hidden;
}

.settings-meter span {
  display: block;
  height: 100%;
  background: var(--accent-ink);
}

.settings-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

/* No border on a tile: a bordered box inside a bordered panel is banned (DESIGN-PRINCIPLES §5). */
.settings-tiles li {
  font-size: var(--text-sm);
  color: var(--muted);
}

.settings-tiles strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.settings-table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.settings-table th,
.settings-table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.settings-table th {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 650;
}

.settings-right {
  text-align: right;
}

.settings-quiet {
  color: var(--muted);
}

.settings-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.settings-switch {
  display: inline-flex;
  gap: var(--space-1);
}

.settings-chip {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--text-caption);
  text-decoration: none;
}

.settings-chip:hover {
  border-color: var(--ink);
}

.settings-chip-on {
  border-color: var(--accent-ink);
  background: var(--accent-ink);
  color: #fff;
}

.settings-chart {
  display: block;
  width: 100%;
  height: 180px;
  margin-top: var(--space-4);
  color: var(--accent-ink);
}

.settings-axis {
  display: flex;
  justify-content: space-between;
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

@media (max-width: 700px) {
  .settings-pair {
    grid-template-columns: 1fr;
  }

  .settings-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .settings-tabs {
    gap: var(--space-4);
  }

  .billing-overview {
    grid-template-columns: 1fr;
  }

  .billing-table thead {
    display: none;
  }

  .billing-table,
  .billing-table tbody,
  .billing-table tr,
  .billing-table td {
    display: block;
    width: 100%;
  }

  .billing-table tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
  }

  .billing-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border: 0;
    text-align: right;
  }

  .billing-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: var(--text-caption);
    font-weight: 650;
  }

  .billing-table td:first-child {
    display: block;
    text-align: left;
  }

  .billing-table td:first-child::before,
  .billing-receipt-cell::before {
    content: none;
  }

  .billing-receipt-cell {
    justify-content: flex-end !important;
    padding-left: 0 !important;
  }
}

/* Account settings follow the familiar split-section pattern: context stays on the left and the
   field it describes sits immediately under its label on the right. */
.account-profile-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.account-profile-avatar {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: var(--text-h3);
  font-weight: 750;
}

.account-profile-summary > div {
  display: grid;
  gap: 2px;
}

.account-profile-summary > div span,
.account-member-since {
  color: var(--muted);
  font-size: var(--text-sm);
}

.account-member-since {
  margin-left: auto;
}

.account-settings-stack {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.account-settings-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(var(--space-6), 7vw, 88px);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--line);
}

.account-section-copy h2 {
  margin: var(--space-2) 0 0;
}

.account-section-copy > p:last-child {
  max-width: 34ch;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.account-settings-form {
  width: 100%;
  max-width: 560px;
  margin: 0;
  gap: var(--space-5);
}

.settings-field {
  display: grid;
  gap: var(--space-2);
}

.settings-field label {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
}

.settings-field label span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 450;
}

.settings-field input {
  width: 100%;
  margin: 0;
}

.settings-field-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
}

.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.account-settings-form .settings-form-actions button {
  margin: 0;
  justify-self: auto;
}

/* Usage is a dashboard, not a stack of generic form panels. */
.usage-credit-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  margin-top: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}

.usage-credit-main,
.usage-credit-detail {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.usage-credit-main {
  background: var(--accent-wash);
}

.usage-credit-main h2 {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.usage-credit-main h2 strong {
  display: block;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.usage-credit-main > p:not(.eyebrow) {
  max-width: 34ch;
  margin: var(--space-4) 0;
  color: var(--muted);
}

.usage-credit-main .text-link {
  color: var(--accent-ink);
  font-weight: 700;
}

.usage-meter-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}

.usage-meter-label strong {
  color: var(--ink);
}

.usage-credit-detail .settings-meter {
  margin-top: var(--space-2);
}

.usage-credit-totals,
.usage-chart-metrics,
.usage-kpi-grid {
  margin: 0;
}

.usage-credit-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.usage-credit-totals dt,
.usage-chart-metrics dt,
.usage-kpi-grid dt {
  color: var(--muted);
  font-size: var(--text-caption);
}

.usage-credit-totals dd,
.usage-chart-metrics dd,
.usage-kpi-grid dd {
  margin: var(--space-1) 0 0;
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: 750;
}

.usage-ledger-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-caption);
}

.usage-ledger-note summary {
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.usage-ledger-note p {
  margin: var(--space-2) 0 0;
}

.usage-output {
  margin-top: var(--space-8);
}

.usage-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
}

.usage-section-head h2 {
  margin: var(--space-2) 0 0;
}

.usage-section-head > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.usage-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.usage-kpi-grid > div {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.usage-kpi-grid dd {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  letter-spacing: -0.035em;
}

.usage-kpi-grid span {
  color: var(--muted);
  font-size: var(--text-caption);
}

.usage-activity {
  margin-top: var(--space-8);
}

.usage-activity-head {
  align-items: flex-start;
}

.usage-activity-head .settings-controls {
  display: grid;
  justify-items: end;
  margin-top: 0;
}

.usage-chart-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.usage-chart-frame {
  position: relative;
  margin: var(--space-6) 0 0;
  padding-left: 30px;
}

.usage-chart-peak,
.usage-chart-zero {
  position: absolute;
  left: 0;
  color: var(--muted);
  font-size: var(--text-caption);
}

.usage-chart-peak { top: -7px; }
.usage-chart-zero { bottom: -7px; }

.usage-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.usage-chart-area {
  fill: var(--accent-wash);
}

.usage-chart-line {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.usage-chart-dot {
  fill: var(--paper);
  stroke: var(--accent-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.usage-chart-empty {
  margin-top: var(--space-6);
  padding: var(--space-7);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  text-align: center;
}

.usage-chart-empty p,
.usage-chart-note {
  color: var(--muted);
  font-size: var(--text-caption);
}

.usage-chart-empty p {
  margin: var(--space-2) 0 0;
}

.usage-chart-note {
  margin: var(--space-4) 0 0;
}

.usage-activity .settings-axis {
  max-width: none;
  margin-left: 30px;
}

@media (max-width: 760px) {
  .account-settings-section,
  .usage-credit-hero {
    grid-template-columns: 1fr;
  }

  .account-settings-section {
    gap: var(--space-5);
  }

  .usage-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usage-section-head {
    display: block;
  }

  .usage-section-head > p {
    margin-top: var(--space-2);
  }

  .usage-activity-head .settings-controls {
    justify-items: start;
    margin-top: var(--space-5);
  }
}

@media (max-width: 480px) {
  .account-profile-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .account-member-since {
    width: 100%;
    margin: 0;
    padding-left: 64px;
  }

  .usage-credit-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usage-credit-totals > div:last-child {
    grid-column: 1 / -1;
  }

  .usage-kpi-grid {
    gap: var(--space-3);
  }

  .usage-kpi-grid > div {
    padding: var(--space-4);
  }
}

/* ==========================================================================
   Book onboarding workspace
   The book brief remains visible while the active decision changes. This gives every
   stage the same information hierarchy as Account and Usage: context, task, action.
   ========================================================================== */
.onboarding-page {
  background: var(--paper);
}

.onboarding-shell {
  width: min(1120px, calc(100% - var(--space-5) * 2));
  padding-block: var(--space-6) var(--space-8);
}

.onboarding-shell .chat-window {
  overflow: visible;
  border-color: var(--line-strong);
  background: var(--cream);
}

.onboarding-shell .chat-head {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border: 0;
}

.onboarding-stage-identity .eyebrow,
.onboarding-summary-head .eyebrow {
  margin-bottom: var(--space-1);
}

.onboarding-stage-identity .chat-who {
  font-size: var(--text-h3);
}

.onboarding-shell .chat-state {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
}

.onboarding-shell .flow-progress {
  height: 4px;
  margin: 0 var(--space-6);
  overflow: hidden;
}

.onboarding-layout {
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.7fr);
  align-items: start;
  gap: 0;
  margin-top: var(--space-5);
  padding: 0;
  border-top: 1px solid var(--line);
}

.onboarding-summary {
  position: sticky;
  top: var(--space-5);
  padding: var(--space-6);
}

.onboarding-summary h2 {
  margin: 0;
  font-size: var(--text-h2);
}

.onboarding-brief {
  display: grid;
  gap: 0;
  margin: var(--space-5) 0 0;
}

.onboarding-brief > div {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.onboarding-brief dt {
  margin-bottom: var(--space-1);
  font-size: var(--text-caption);
  color: var(--muted);
}

.onboarding-brief dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.45;
}

.onboarding-brief > div:first-child dd,
.onboarding-brief > div:nth-child(3) dd {
  font-family: var(--font-book);
  font-size: var(--text-body);
  font-weight: 500;
}

.onboarding-summary-action {
  padding-top: var(--space-2);
}

.onboarding-stage {
  min-width: 0;
  padding: var(--space-6);
  border-left: 1px solid var(--line);
  background: var(--paper);
}

.onboarding-stage > .chat-turn,
.onboarding-stage .chat-turn-agent {
  margin: 0;
}

.onboarding-stage .chat-from {
  display: none;
}

.onboarding-stage .chat-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.onboarding-stage .chat-card h1 {
  max-width: 28ch;
  margin-bottom: var(--space-3);
  font-size: var(--text-display-2);
  line-height: 1.08;
}

.onboarding-stage .chat-lede {
  max-width: 62ch;
  margin-bottom: var(--space-5);
  font-size: var(--text-body);
  line-height: 1.6;
}

.onboarding-stage form {
  gap: var(--space-4);
}

.onboarding-stage .gate-form {
  max-width: 34rem;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.onboarding-assurance {
  display: grid;
  gap: var(--space-1);
  max-width: 34rem;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-left: 3px solid var(--accent-ink);
  background: var(--accent-wash);
  font-size: var(--text-sm);
}

.onboarding-assurance span {
  color: var(--muted);
  font-size: var(--text-caption);
}

.onboarding-ready-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-5) 0;
  border-top: 1px solid var(--line);
}

.onboarding-ready-summary > div {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.onboarding-ready-summary > div:nth-child(odd) {
  padding-right: var(--space-5);
}

.onboarding-ready-summary dt {
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
}

.onboarding-ready-summary dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 650;
}

.onboarding-stage .gate-form .field {
  gap: var(--space-2);
  margin: 0;
}

.onboarding-stage .chat-language {
  display: grid;
  gap: var(--space-2);
  max-width: 22rem;
}

.onboarding-stage .chat-language label {
  margin: 0;
}

.onboarding-stage .chat-language select {
  width: 100%;
}

.onboarding-stage .chat-change {
  margin-block: var(--space-5);
}

.onboarding-stage .title-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-stage .title-option-own {
  grid-column: 1 / -1;
}

.onboarding-stage .title-byline {
  max-width: 34rem;
}

.onboarding-stage .title-actions,
.onboarding-stage .outline-start {
  max-width: 34rem;
}

.onboarding-stage .title-reroll,
.onboarding-stage .outline-replan {
  justify-content: space-between;
  max-width: 34rem;
}

.onboarding-stage .title-reroll button,
.onboarding-stage .outline-replan button {
  width: auto;
}

.onboarding-stage .flow-outline {
  margin-top: var(--space-5);
}

.onboarding-stage .flow-outline li {
  padding-block: var(--space-4);
}

.onboarding-stage .cover-choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.onboarding-stage .writing-card .writing-panes {
  gap: var(--space-6);
}

.onboarding-stage .book-page {
  background: var(--cream);
}

/* The initial brief uses progressive grouping, with one sticky truthful cost summary. */
.onboarding-start {
  width: min(1120px, calc(100% - var(--space-5) * 2));
  max-width: none;
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-8);
}

.onboarding-start-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: end;
  gap: var(--space-7);
  margin: var(--space-5) 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.onboarding-start-head .page-title {
  max-width: 16ch;
  margin-bottom: 0;
}

.onboarding-start-head .lede {
  margin: 0;
  max-width: 48ch;
}

.onboarding-start-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.68fr) minmax(0, 1.55fr);
  align-items: start;
  gap: var(--space-7);
}

.onboarding-start-summary {
  position: sticky;
  top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.onboarding-start-summary h2 {
  margin: 0;
  font-size: var(--text-h2);
}

.onboarding-build-facts {
  margin: var(--space-5) 0 0;
}

.onboarding-build-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
}

.onboarding-build-facts dt {
  color: var(--muted);
}

.onboarding-build-facts dd {
  margin: 0;
  max-width: 12rem;
  font-weight: 650;
  text-align: right;
}

.onboarding-summary-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  font-size: var(--text-caption);
  line-height: 1.55;
}

.onboarding-start-form {
  gap: var(--space-5);
}

.onboarding-form-section {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.onboarding-form-section-head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.onboarding-form-section-head h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h2);
}

.onboarding-form-section-head > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.onboarding-field {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.onboarding-field label {
  margin: 0;
}

.onboarding-field .field-hint {
  margin: 0;
}

.onboarding-advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.onboarding-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
}

.onboarding-advanced summary::-webkit-details-marker {
  display: none;
}

.onboarding-advanced summary span:first-child {
  display: grid;
  gap: var(--space-1);
}

.onboarding-advanced summary small {
  color: var(--muted);
  font-size: var(--text-caption);
}

.onboarding-advanced-action {
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: 650;
}

.onboarding-advanced-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--line);
}

.onboarding-start-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-2);
}

.onboarding-start-actions p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
}

@media (max-width: 860px) {
  .onboarding-layout,
  .onboarding-start-layout,
  .onboarding-start-head {
    grid-template-columns: 1fr;
  }

  .onboarding-summary,
  .onboarding-start-summary {
    position: static;
  }

  .onboarding-summary {
    order: 2;
    padding: var(--space-5) var(--space-6);
  }

  .onboarding-stage {
    order: 1;
  }

  .onboarding-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-5);
  }

  .onboarding-stage {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .onboarding-start-summary {
    order: 2;
  }

  .onboarding-start-form {
    order: 1;
  }
}

@media (max-width: 620px) {
  .onboarding-shell,
  .onboarding-start {
    width: min(100% - var(--space-4) * 2, 1120px);
  }

  .onboarding-shell .chat-head,
  .onboarding-summary,
  .onboarding-stage,
  .onboarding-form-section {
    padding: var(--space-4);
  }

  .onboarding-shell .flow-progress {
    margin-inline: var(--space-4);
  }

  .onboarding-brief,
  .onboarding-stage .title-options,
  .onboarding-stage .cover-choices,
  .onboarding-advanced-fields,
  .onboarding-ready-summary {
    grid-template-columns: 1fr;
  }

  .onboarding-ready-summary > div:nth-child(odd) {
    padding-right: 0;
  }

  .onboarding-stage .title-option-own {
    grid-column: auto;
  }

  .onboarding-start-head {
    gap: var(--space-4);
  }

  .onboarding-advanced summary,
  .onboarding-advanced-fields {
    padding-inline: var(--space-4);
  }

  .onboarding-start-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .onboarding-start-actions button {
    width: 100%;
  }
}

/* ------------------------------------------------ polished book reader
   The book remains the visual centre. Account-style identity, action and
   guidance sections frame it without changing the paginator or manuscript. */

.book-preview > .back {
  display: inline-flex;
  margin-bottom: var(--space-5);
}

.book-preview .payment-success {
  margin: 0 0 var(--space-5);
}

.book-preview .preview-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.preview-identity {
  min-width: 0;
}

.preview-identity h1 {
  max-width: 22ch;
  margin: var(--space-1) 0 var(--space-3);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.preview-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.preview-book-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.preview-book-meta span + span::before {
  content: '';
  width: 3px;
  height: 3px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--line-strong);
}

.preview-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-3);
}

.preview-actions .toolbar-unlock {
  display: block;
  margin: 0;
}

.preview-actions .toolbar-unlock .button {
  width: auto;
}

.preview-downloads {
  display: grid;
  gap: var(--space-2);
}

.preview-download-label {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.book-preview .export-bar {
  display: flex;
  gap: var(--space-2);
}

.book-preview .export-bar .button {
  min-width: 72px;
  padding-inline: var(--space-4);
}

.reader-stage {
  margin: 0;
}

.reader-stage-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.reader-stage-head .eyebrow {
  margin: 0 0 var(--space-1);
}

.reader-stage-head h2 {
  margin: 0;
  font-size: var(--text-h2);
}

.reader-stage-head > p {
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.book-preview .reader-paged {
  margin-top: 0;
}

.book-preview .reader-paged .reader-frame {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(24, 50, 45, 0.04), 0 18px 44px rgba(24, 50, 45, 0.08);
}

.book-preview .reader-chevron {
  width: 42px;
  height: 42px;
  background: var(--cream);
  box-shadow: 0 2px 8px rgba(24, 50, 45, 0.06);
}

.book-preview .reader-bar {
  gap: var(--space-3);
  width: calc(100% - (var(--space-8) * 2));
  margin: var(--space-4) auto 0;
}

.book-preview .reader-track {
  height: 4px;
  background: var(--line);
}

.book-preview .reader-bar-row {
  gap: var(--space-3);
}

.book-preview .reader-step {
  min-width: 92px;
  background: var(--cream);
  font-weight: 650;
}

.book-preview .reader-step:hover:not(:disabled) {
  border-color: var(--accent-ink);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.book-preview .reader-count {
  color: var(--ink);
  font-weight: 650;
}

.book-preview .reader-where {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-preview .reader-hint {
  margin-top: calc(var(--space-1) * -1);
}

.preview-export-guide {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding-block: var(--space-7);
  border-block: 1px solid var(--line);
}

.preview-export-guide h2 {
  margin: var(--space-1) 0 0;
  font-size: var(--text-h2);
}

.preview-export-guide dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.preview-export-guide dl > div {
  padding-left: var(--space-4);
  border-left: 2px solid var(--line);
}

.preview-export-guide dt {
  margin-bottom: var(--space-2);
  color: var(--accent-ink);
  font-weight: 750;
}

.preview-export-guide dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .book-preview .preview-toolbar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-5);
  }

  .preview-actions {
    align-items: flex-end;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .book-preview {
    width: min(100% - var(--space-4) * 2, 1120px);
    padding-top: var(--space-5);
  }

  .book-preview .preview-toolbar {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
  }

  .preview-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .preview-actions > .button,
  .preview-actions .toolbar-unlock .button,
  .preview-downloads {
    width: 100%;
  }

  .reader-stage-head {
    display: block;
  }

  .reader-stage-head > p {
    margin-top: var(--space-2);
  }

  .book-preview .reader-bar {
    width: 100%;
  }

  .preview-export-guide {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .preview-export-guide dl {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 430px) {
  .preview-book-meta {
    display: grid;
    gap: var(--space-1);
  }

  .preview-book-meta span + span::before {
    display: none;
  }

  .book-preview .export-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .book-preview .export-bar .button {
    min-width: 0;
    padding-inline: var(--space-2);
  }

  .book-preview .reader-step {
    min-width: 76px;
    padding-inline: var(--space-3);
  }

  .book-preview .reader-where {
    max-width: 22ch;
  }
}

/* ==========================================================================
   Book editor workspace

   Mirrors the calm, split-section account pattern: an identity summary first,
   then short contextual copy beside compact controls. Everything is explicitly
   allowed to shrink so long titles and action rows never create page overflow.
   ========================================================================== */

.editor-page-intro {
  max-width: 720px;
  margin: var(--space-5) 0 var(--space-6);
}

.editor-page-intro h1 {
  font-size: var(--text-display-2);
}

.editor-page-intro > p:last-child {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-body-lg);
}

.editor-identity {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  overflow: hidden;
  margin-bottom: var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.editor-identity-main,
.editor-identity-facts {
  min-width: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.editor-identity-main {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: center;
  background: var(--accent-wash);
}

.editor-identity-copy {
  min-width: 0;
}

.editor-identity-has-cover .editor-identity-main {
  display: grid;
  grid-template-columns: clamp(130px, 14vw, 190px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  min-height: 360px;
}

.editor-identity-cover {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border: 1px solid rgb(28 53 47 / 18%);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 0 16px 36px rgb(28 53 47 / 16%);
}

.editor-identity-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-identity .title-input {
  max-width: 100%;
  padding: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.editor-identity .editor-status {
  margin: var(--space-3) 0 0;
}

.editor-identity-moment {
  max-width: 42ch;
  margin: var(--space-4) 0 0;
  color: var(--ink);
  font-family: var(--font-book);
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

.editor-identity-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0;
  margin: 0;
  background: var(--paper);
}

.editor-identity-facts div {
  min-width: 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.editor-identity-facts div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.editor-identity-facts div:nth-child(even) {
  border-left: 1px solid var(--line);
}

.editor-identity-facts dt {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 650;
}

.editor-identity-facts dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.editor-summary-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.editor-summary-status::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  content: '';
}

.editor-section,
.editor-chapters-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(var(--space-6), 6vw, var(--space-9));
  margin: 0;
  padding: clamp(var(--space-6), 5vw, var(--space-8)) 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}

.editor-section-intro,
.editor-section-body,
.editor-chapters-main,
.editor-cover-workspace,
.cover-controls {
  min-width: 0;
}

.editor-section-intro h2 {
  margin: 0;
  font-size: var(--text-h2);
}

.editor-cover-section .editor-section-intro .eyebrow {
  color: var(--accent-ink);
}

.editor-section-intro > p:last-child {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.editor-details-section .field-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 620px;
  margin: 0;
}

.editor-section .field > label,
.editor-chapters-section .field > label {
  margin-bottom: var(--space-2);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.editor-section .field-hint,
.editor-chapters-section .field-hint {
  margin-top: var(--space-2);
}

.editor-section .field-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.editor-section .field-inline > * {
  min-width: 0;
}

.editor-cover-section.editor-actions {
  grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
}

.editor-cover-workspace {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.editor-cover-workspace .cover-slot {
  width: 100%;
  min-width: 0;
}

.editor-cover-workspace .cover-placeholder {
  background: var(--paper);
}

.editor-cover-workspace .cover-placeholder-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-family: var(--font-book);
  font-size: var(--text-h3);
  font-weight: 700;
}

.editor-cover-workspace .cover-foot {
  display: flex;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
}

.editor-cover-workspace .cover-foot .button {
  margin: 0;
}

.editor-chapters-section {
  border-bottom: 1px solid var(--line-strong);
}

.editor-chapters-section .chapter-list-head {
  align-items: flex-end;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.chapter-list-progress {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.editor-chapters-section .chapter-list-title {
  font-size: var(--text-h2);
}

.editor-chapters-section .chapter-list {
  gap: var(--space-3);
}

.editor-chapters-section .chapter {
  min-width: 0;
  border-color: var(--line);
  background: var(--cream);
  box-shadow: none;
}

.editor-chapters-section .chapter-main,
.editor-chapters-section .chapter-fold,
.editor-chapters-section .chapter-fold-summary,
.editor-chapters-section .chapter-fold-title {
  min-width: 0;
}

.editor-chapters-section .chapter-fold-title {
  overflow-wrap: anywhere;
}

.editor-chapters-section .chapter-fold-meta {
  white-space: nowrap;
}

.editor-chapters-section .chapter-status {
  background: var(--paper);
  text-transform: capitalize;
}

.editor-chapters-section .regen-row {
  flex-wrap: wrap;
}

.editor-chapters-section .regen-row input {
  flex: 1 1 260px;
}

.editor-chapters-section .chapter-body {
  max-width: 100%;
}

.editor-chapters-section .write-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-wash);
}

.editor-chapters-section .write-bar[hidden] {
  display: none;
}

.write-bar-copy {
  min-width: 0;
}

.write-bar-copy .eyebrow {
  margin-bottom: var(--space-2);
}

.write-bar-copy h3 {
  margin: 0;
}

.write-bar-copy #generate-cost {
  max-width: 70ch;
  margin: var(--space-2) 0 0;
  color: var(--ink);
}

.editor-chapters-section #generate-book {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .editor-identity {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-identity-main {
    min-height: 220px;
  }

  .editor-section,
  .editor-chapters-section,
  .editor-cover-section.editor-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .editor-section-intro {
    max-width: 620px;
  }
}

@media (max-width: 680px) {
  .editor-page-intro h1 {
    font-size: var(--text-h1);
  }

  .editor-page-intro > p:last-child {
    font-size: var(--text-body);
  }

  .editor-identity-main,
  .editor-identity-facts {
    padding: var(--space-5);
  }

  .editor-identity-has-cover .editor-identity-main {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-4);
    min-height: 240px;
  }

  .editor-identity-has-cover .title-input {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }

  .editor-identity-moment {
    margin-top: var(--space-3);
    font-size: var(--text-body);
  }

  .editor-cover-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-cover-workspace .cover-slot {
    max-width: 160px;
  }

  .editor-chapters-section .chapter {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .editor-chapters-section .chapter-number {
    display: none;
  }

  .editor-chapters-section .chapter-side {
    grid-column: 1;
    flex-wrap: wrap;
  }

  .editor-chapters-section .chapter-fold-summary {
    align-items: flex-start;
  }

  .editor-chapters-section .write-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-chapters-section #generate-book {
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .editor-identity-has-cover .editor-identity-main {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .editor-identity-has-cover .editor-status {
    font-size: var(--text-caption);
  }

  .editor-identity-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-identity-facts div,
  .editor-identity-facts div:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .editor-identity-facts div:last-child {
    border-bottom: 0;
  }

  .editor-identity-facts div:nth-child(even) {
    border-left: 0;
  }

  .editor-section .field-inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-section .field-inline button,
  .editor-cover-workspace .cover-foot .button {
    width: 100%;
  }

  .editor-chapters-section .chapter-list-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-chapters-section .chapter-fold-summary {
    flex-direction: column;
    gap: var(--space-1);
  }

  .editor-chapters-section .chapter-arrange {
    flex-wrap: wrap;
  }

  .editor-chapters-section .regen-row > input,
  .editor-chapters-section .regen-row > button {
    width: 100%;
  }
}

/* --------------------------------------------------------- consent banner */

/* Shown only to visitors in the UK and the EU/EEA (D-081). It is a bar at the foot rather than a
   modal: nothing here blocks the page, because the site works identically whichever button is
   pressed and an interstitial over a paid landing page costs conversions for no legal gain. */
.consent-banner {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
  box-shadow: 0 6px 28px rgb(24 50 45 / 18%);
}

.consent-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.consent-actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

/* Reject must be as easy to press as accept. A hidden or greyed refusal is a dark pattern and is
   not lawful consent in the regions this banner exists for. */
.consent-banner button {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.consent-reject {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.consent-reject:hover {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 620px) {
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-actions button {
    flex: 1;
  }
}