/* Flow - book-native reader. Kindle-first baseline with minimal modern enhancements. */

/* ---------------------------------------------------------------
   Design tokens. Codified per the April 2026 design review so new
   code can reference one source of truth. Existing rules continue
   to use raw values; refactor opportunistically, not in a sweep.
   ---------------------------------------------------------------- */
:root {
  /* corner roundness — three values plus pill */
  --radius-s: 10px;   /* helpers, notices, captions */
  --radius-m: 14px;   /* inputs, sub-cards, image figures */
  --radius-l: 18px;   /* cards, composer, modals */
  --radius-pill: 999px;

  /* vertical rhythm — two siblings + page */
  --space-minor: 1rem;     /* between siblings inside a section */
  --space-major: 2rem;     /* between sections */
  --space-page: 3.5rem;    /* above page heads only */

  /* status palette — already in use, named here */
  --paper: #f8f4eb;
  --ink: #1e1b18;
  --ink-2: #4f473d;
  --ink-3: #6a6258;
  --live: #2f8f57;   /* TTS playing, "On" states */
  --warn: #7b2d22;   /* errors, destructive intent */
  --rule: rgba(30, 27, 24, 0.12);
  --rule-soft: rgba(30, 27, 24, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  height: 100%;
  background: #f8f4eb;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f8f4eb;
  color: #1e1b18;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1rem;
  line-height: 1.55;
}

::selection {
  background: rgba(49, 41, 32, 0.18);
  color: #1e1b18;
}

a {
  color: inherit;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 0.1em;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.94em;
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 0.75rem;
  background: #1d1812;
  color: #f8f4eb;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  font-size: 0.94rem;
  transform: translateY(-110%);
  transition: transform 120ms ease;
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #1d1812;
  outline-offset: 2px;
}

/* --- layout shell (Kindle baseline) --- */

.shell {
  --shell-space-y: 1.5rem;
  width: 100%;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  min-height: 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: calc(var(--shell-space-y) + env(safe-area-inset-top));
  padding-bottom: calc(var(--shell-space-y) + env(safe-area-inset-bottom));
}

.shell--home {
  align-items: center;
  justify-content: center;
}

.shell--page,
.shell--book {
  align-items: center;
}

.shell--home > * + * {
  margin-top: 1.75rem;
}

.shell--page,
.shell--book {
  width: 100%;
}

.shell--page > * + *,
.shell--book > * + * {
  margin-top: 1.25rem;
}

.shell--narrow {
  max-width: 44rem;
}

/* --- stack rhythm (gap fallback via margin) --- */

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: 1rem;
}

.stack--tight > * + * {
  margin-top: 0.5rem;
}

.hero {
  width: 100%;
  max-width: 42rem;
}

/* --- typography (book-coded, serif throughout) --- */

.kicker,
.eyebrow,
.source-line,
.status-line,
.footer-strip,
.aux-link,
.examples-line,
.page-intro,
.muted {
  color: #4f473d;
}

.kicker,
.eyebrow,
.source-line {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant: small-caps;
  font-feature-settings: "smcp" 1;
}

.wordmark,
.page-title,
.book-title,
.panel-title {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.page-title {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 2.35rem;
  line-height: 1.02;
  font-weight: 550;
  font-variation-settings: "SOFT" 35, "opsz" 72;
}

.wordmark {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 2.8rem;
  line-height: 0.98;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}

.lede {
  margin: 0;
  max-width: 38rem;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: #2f2924;
}

.page-intro {
  margin: 0;
  max-width: 38rem;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #433b33;
}

.status-line,
.examples-line,
.footer-strip p,
.footer-link-row,
.message {
  margin: 0;
}

.status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.status-line > * + * {
  margin-left: 0.72rem;
}

.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(30, 27, 24, 0.28);
  display: inline-block;
  flex: 0 0 auto;
}

.status-dot--live {
  background: #2f8f57;
}

.examples-block {
  width: 100%;
  max-width: 34rem;
}

.hero-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.hero-kicker {
  margin: 0 0 0.42rem;
}

.resume-link {
  width: 100%;
  max-width: 42rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.92rem 1rem;
  border: 1px solid rgba(30, 27, 24, 0.1);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.68);
  box-shadow: none;
  text-decoration: none;
}

.resume-link:hover {
  border-color: rgba(30, 27, 24, 0.16);
}

.resume-link__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.resume-title {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.12rem;
  line-height: 1.1;
  font-weight: 600;
}

.resume-meta {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #4f473d;
}

.resume-progress {
  font-size: 0.82rem;
  color: #6a6258;
}

.resume-link__icon {
  flex: 0 0 auto;
  color: #433b33;
}

.icon-button,
.back-link {
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(30, 27, 24, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #1e1b18;
  text-decoration: none;
  flex: 0 0 auto;
  position: relative;
}

.back-link--text {
  width: auto;
  height: auto;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem 0.6rem 0.75rem;
}

.back-link__label {
  font-size: 0.96rem;
  line-height: 1;
}

.icon-button:hover,
.back-link:hover {
  border-color: rgba(30, 27, 24, 0.36);
}

.icon-button:focus-visible,
.back-link:focus-visible {
  outline: none;
  border-color: rgba(30, 27, 24, 0.42);
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.08);
}

.resume-link:focus-visible {
  outline: none;
  border-color: rgba(30, 27, 24, 0.42);
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.08);
}

.icon-button--primary {
  background: #312920;
  border-color: #312920;
  color: #f5f0e6;
}

.icon-button--primary:hover {
  background: #1e1b18;
  border-color: #1e1b18;
}

.icon-button--quiet {
  background: rgba(255, 255, 255, 0.78);
}

.icon-button[disabled],
.icon-button[data-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}

.icon-button__busy {
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.page-head {
  width: 100%;
  max-width: 40rem;
}

.page-head > .back-link {
  align-self: flex-start;
  margin-bottom: 0.1rem;
}

.page-head--minimal {
  gap: 0.75rem;
}

/* --- panel (flat by default, frosted on modern browsers) --- */

.panel {
  width: 100%;
  max-width: 46rem;
  padding: 1.25rem;
  border: 1px solid rgba(30, 27, 24, 0.08);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 12px 30px rgba(49, 41, 32, 0.04);
}

.panel--quiet {
  background: rgba(255, 253, 249, 0.82);
  border-color: rgba(30, 27, 24, 0.06);
  box-shadow: none;
}

.panel-title {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.08;
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.library-item {
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid rgba(30, 27, 24, 0.14);
}

.library-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.library-item > * + * {
  margin-top: 0.8rem;
}

.library-toolbar {
  display: grid;
  gap: 0.85rem;
}

.library-toolbar .inline-field {
  width: 100%;
}

.book {
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.book-head {
  padding-top: 0.3rem;
}

.book-head > .back-link {
  align-self: flex-start;
  margin-bottom: 0.35rem;
}

.book-head .source-line {
  margin: 0 0 0.35rem;
}

.book-head .source-line + .book-title {
  margin-top: 0;
}

.book-title {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 2.4rem;
  line-height: 1.02;
  font-weight: 600;
}

.book-byline {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #433b33;
  font-weight: inherit;
}

.prose {
  max-width: 42rem;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.22rem;
  line-height: 1.78;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: pretty;
}

html[data-text-size="lg"] .prose {
  font-size: 1.34rem;
  line-height: 1.88;
}

.prose p {
  margin: 0 0 1.15em;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* --- story flow (papyrus) --- */

.story-flow {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 42rem;
  margin: 0;
  padding: 0;
}

.story-flow__turn {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(30, 27, 24, 0.08);
  padding-bottom: 1.75rem;
}

.story-flow__turn:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.story-flow__prose {
  width: 100%;
}

.story-flow__figure {
  margin: 0.5rem 0 0;
  padding: 0;
}

.story-flow__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(30, 27, 24, 0.1);
}

.story-steer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 3px solid rgba(93, 84, 73, 0.35);
  font-style: italic;
  color: rgba(30, 27, 24, 0.72);
  width: 100%;
  max-width: 42rem;
}

.story-steer--active {
  margin-top: 0.5rem;
}

.story-steer__lede {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(93, 84, 73, 0.65);
}

.story-steer__quote {
  quotes: '"' '"';
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(30, 27, 24, 0.78);
}

.story-steer__quote::before {
  content: open-quote;
}

.story-steer__quote::after {
  content: close-quote;
}

@media print {
  .story-flow__turn {
    border-bottom: 0;
    page-break-inside: avoid;
  }
  .story-steer__lede {
    display: none;
  }
}

/* --- v1 reader surfaces --- */

.reader-tools {
  width: 100%;
  max-width: 42rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(30, 27, 24, 0.1);
}

.reader-tools__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.55rem;
}

.reader-tool,
.next-action-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  border: 1px solid rgba(30, 27, 24, 0.16);
  background: rgba(255, 255, 255, 0.54);
  color: #1e1b18;
  text-decoration: none;
}

.reader-tool {
  gap: 0.42rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.88rem;
}

.reader-tool--read::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #2f8f57;
  flex: 0 0 auto;
}

.reader-tool[data-active="true"],
.reader-tool--active {
  border-color: rgba(47, 143, 87, 0.36);
  background: rgba(47, 143, 87, 0.1);
}

.next-actions {
  width: 100%;
  max-width: 42rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.next-action-button {
  flex: 1 1 12rem;
  justify-content: flex-start;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  text-align: left;
  white-space: normal;
}

.next-action-button:hover,
.reader-tool:hover {
  border-color: rgba(30, 27, 24, 0.34);
}

.next-actions--empty {
  display: block;
}

.next-actions__empty {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-3);
  font-style: italic;
}

.generated-media,
.generated-image,
.generated-audio {
  width: 100%;
  max-width: 42rem;
}

.generated-media {
  display: flex;
  flex-direction: column;
}

.generated-media > * + * {
  margin-top: 0.75rem;
}

.generated-image,
.generated-audio {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.generated-image img {
  width: 100%;
  border-radius: var(--radius-s, 10px);
}

.generated-image__download {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.generated-image__download:focus-visible {
  outline: 2px solid var(--ink, #1e1b18);
  outline-offset: 3px;
  border-radius: var(--radius-s, 10px);
}

.generated-image figcaption,
.generated-audio__caption {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  line-height: 1.42;
  color: #5d5449;
}

.generated-image figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-style: italic;
}

.generated-audio {
  padding: 0.75rem;
  border: 1px solid rgba(30, 27, 24, 0.1);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.76);
}

.image-replace-form {
  flex: 0 0 auto;
}

.image-replace {
  padding: 0;
  border: 0;
  background: transparent;
  color: #4f473d;
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.generated-audio audio {
  width: 100%;
}

.mic-panel,
.transcription-panel,
.stream-preview {
  width: 100%;
  max-width: 42rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(30, 27, 24, 0.1);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.72);
}

.mic-panel > * + *,
.transcription-panel > * + *,
.stream-preview > * + * {
  margin-top: 0.55rem;
}

.mic-status,
.transcription-status,
.stream-status {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #5d5449;
}

.mic-status--listening,
.stream-status--active {
  color: #2f6f46;
}

.mic-status--error,
.transcription-status--error,
.stream-status--error {
  color: #7b2d22;
}

.mic-control[data-state="recording"] {
  border-color: rgba(123, 45, 34, 0.32);
  background: rgba(123, 45, 34, 0.08);
}

.mic-control[disabled] {
  cursor: wait;
  opacity: 0.64;
}

.transcription-text,
.stream-preview__body {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: #2f2924;
}

.stream-preview {
  border-left-width: 3px;
  border-left-color: rgba(49, 41, 32, 0.24);
}

.stream-preview[data-state="active"] {
  border-left-color: rgba(47, 143, 87, 0.55);
}

.cost-display {
  position: fixed;
  left: calc(0.85rem + env(safe-area-inset-left));
  bottom: calc(0.85rem + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: 14rem;
  padding: 0.45rem 0.62rem;
  border: 1px solid rgba(30, 27, 24, 0.1);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 8px 22px rgba(49, 41, 32, 0.06);
  font-size: 0.78rem;
  line-height: 1.3;
  color: #5d5449;
}

html[data-cost-display="hidden"] .cost-display {
  display: none;
}

.report-control {
  margin: 1.4rem 0 0;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(49, 41, 32, 0.08);
  font-size: 0.85rem;
  color: #5d5449;
}

.report-control > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0;
  font-size: 0.82rem;
  color: #6b6155;
  text-decoration: underline;
  text-decoration-color: rgba(49, 41, 32, 0.25);
  text-underline-offset: 3px;
}

.report-control > summary::-webkit-details-marker {
  display: none;
}

.report-control[open] > summary {
  color: #312920;
}

.report-form {
  margin-top: 0.6rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(49, 41, 32, 0.12);
  border-radius: 6px;
  background: rgba(255, 253, 249, 0.7);
}

.report-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.report-form__label {
  font-size: 0.78rem;
  color: #5d5449;
}

.report-form select,
.report-form textarea {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(49, 41, 32, 0.2);
  border-radius: 4px;
  background: #fffdf7;
  color: #312920;
}

.report-form textarea {
  resize: vertical;
  min-height: 4.4rem;
}

.report-form__note {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #6b6155;
  line-height: 1.45;
}

.reader-tool--report {
  align-self: flex-start;
}

.reader-tools__connect {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #6b6155;
}

.reader-tools__connect a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.site-footer .report-control {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
}

.site-footer .report-control > summary {
  display: inline;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.site-footer .report-control > summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.site-footer .report-control[open] {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.45rem;
}

.site-footer .report-form {
  width: min(100%, 38rem);
  margin: 0.55rem auto 0;
  text-align: left;
  font-size: 0.85rem;
}

/* --- forms --- */

.field {
  display: flex;
  flex-direction: column;
}

.field > * + * {
  margin-top: 0.45rem;
}

.field-label,
.legend-label,
.fieldset-inline legend {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1e1b18;
}

.field-helper,
.settings-helper,
.settings-warning {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.42;
}

.field-helper,
.settings-helper {
  color: #5d5449;
}

.api-key-link {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(93, 84, 73, 0.65);
}

.api-key-link a {
  color: inherit;
  text-decoration: none;
}

.api-key-link a:hover,
.api-key-link a:focus {
  color: rgba(93, 84, 73, 0.95);
  text-decoration: none;
}

.settings-warning {
  padding: 0.68rem 0.78rem;
  border: 1px solid rgba(123, 45, 34, 0.18);
  border-radius: 12px;
  background: rgba(123, 45, 34, 0.07);
  color: #7b2d22;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.82rem 0.95rem;
  border: 1px solid rgba(30, 27, 24, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 7rem;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(30, 27, 24, 0.45);
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.08);
}

.fieldset-inline {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-row,
.actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Forms in actions-row are layout-transparent so their inner button is
   the direct flex item alongside bare anchors — same baseline, same
   alignment. Was causing 'Disconnect Google' and 'Open library' to
   sit on slightly different lines. */
.actions-row form {
  margin: 0;
  display: contents;
}

.choice-row > * + *,
.actions-row > * + * {
  margin-left: 0.75rem;
}

.choice-row > *,
.actions-row > * {
  margin-top: 0.4rem;
}

.choice-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(30, 27, 24, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
}

.choice-pill > * + * {
  margin-left: 0.5rem;
}

.choice-pill input {
  width: auto;
  margin: 0;
}

.key-sync-stack {
  display: grid;
  gap: 0.65rem;
}

.key-sync-row {
  margin: 0;
}

.key-sync-choice {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.key-sync-choice input {
  flex: 0 0 auto;
  width: auto;
  margin: 0.2rem 0 0;
}

.key-sync-choice span {
  min-width: 0;
  line-height: 1.45;
}

.classroom-confirm {
  flex: 0 0 auto;
  min-width: 11.5rem;
  margin-left: auto;
}

.classroom-confirm summary {
  list-style: none;
  cursor: pointer;
}

.classroom-confirm summary::-webkit-details-marker {
  display: none;
}

.classroom-confirm[open] {
  flex: 1 1 100%;
}

.classroom-confirm[open] summary {
  width: fit-content;
}

/* Flattened: was a sub-card with its own border/background, which
   read as a card-inside-the-card. Just give it breathing room. */
.classroom-confirm__panel {
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.classroom-confirm__panel > * + * {
  margin-top: 0.75rem;
}

.classroom-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid rgba(30, 27, 24, 0.12);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.82);
  font-size: 0.8rem;
  line-height: 1.1;
  color: #5d5449;
}

.classroom-status--on {
  border-color: rgba(47, 143, 87, 0.28);
  color: #2f6f46;
}

.classroom-status--off {
  color: #6a6258;
}

.card-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.58rem;
  border: 1px solid rgba(30, 27, 24, 0.16);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
  color: #6a6258;
  font-size: 0.74rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.card-status--on {
  color: #2f6f46;
  border-color: rgba(47, 143, 87, 0.3);
  background: rgba(47, 143, 87, 0.07);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
}

.button > * + * {
  margin-left: 0.5rem;
}

.button--primary {
  background: #312920;
  color: #f5f0e6;
}

.button--primary:hover {
  background: #1e1b18;
}

.button--primary:disabled {
  opacity: 0.55;
  cursor: wait;
}

.button--quiet {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(30, 27, 24, 0.2);
}

.button--quiet:hover {
  border-color: rgba(30, 27, 24, 0.4);
}

/* Plain paragraph flow — was a flex container which made each text run
   and inline link wrap onto its own visual line. */
.model-help-links,
.help-link-row {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #5d5449;
  text-align: left;
}

.model-help-link,
.help-link {
  color: inherit;
  text-decoration-thickness: 0.06em;
}

/* --- composer --- */

.composer-wrap {
  width: 100%;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  position: static;
}

.composer {
  padding: 0.55rem;
  border: 1px solid rgba(30, 27, 24, 0.08);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 12px 30px rgba(49, 41, 32, 0.04);
}

.composer-row {
  display: flex;
  align-items: center;
}

.composer-row > * + * {
  margin-left: 0.55rem;
}

.composer-main {
  flex: 1 1 auto;
  min-width: 0;
}

.composer-main input {
  margin: 0;
  background: rgba(255, 255, 255, 0.94);
}

.composer-submit {
  flex: 0 0 auto;
}

.composer-main input:focus {
  box-shadow: none;
}

.home-entry,
.home-form {
  width: 100%;
  max-width: 42rem;
}

.home-input-shell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid rgba(30, 27, 24, 0.1);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 10px 24px rgba(49, 41, 32, 0.045);
}

.home-input-shell:focus-within {
  border-color: rgba(30, 27, 24, 0.42);
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.06), 0 12px 28px rgba(49, 41, 32, 0.06);
}

.home-input-shell input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 0.86rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-input-shell input:focus {
  box-shadow: none;
}

.home-input-action {
  width: 2.75rem;
  height: 2.75rem;
}

.file-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.file-picker-control {
  position: relative;
  display: inline-flex;
}

.file-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-picker-control:focus-within .file-picker-button {
  border-color: rgba(30, 27, 24, 0.42);
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.08);
}

.file-picker-button {
  pointer-events: none;
  min-width: 8.8rem;
}

.file-picker-name {
  font-size: 0.96rem;
  line-height: 1.45;
  color: #4f473d;
  word-break: break-word;
  min-height: 1.45em;
}

.source-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.source-upload-group {
  display: grid;
  gap: 0.45rem;
}

.source-upload-group[hidden],
.source-panel-footer [hidden] {
  display: none;
}

.busy-status {
  display: none;
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  line-height: 1.2;
  color: #4f473d;
  text-align: right;
}

body[data-thinking="true"] .busy-status {
  display: block;
}

body[data-thinking="true"] .reader-tools,
body[data-thinking="true"] .next-actions,
body[data-thinking="true"] .generated-image .image-replace {
  opacity: 0.5;
  pointer-events: none;
}

.inline-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.35rem 0.35rem 0.95rem;
  border: 1px solid rgba(30, 27, 24, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.inline-field:focus-within {
  border-color: rgba(30, 27, 24, 0.45);
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.08);
}

.inline-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.8rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.inline-field input:focus {
  box-shadow: none;
}

.inline-field__action {
  width: 2.7rem;
  height: 2.7rem;
}

.inline-field__action--submit {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 2.55rem;
  min-width: 8.25rem;
  padding: 0.7rem 1.35rem;
  justify-content: center;
  white-space: nowrap;
}

.footer-strip {
  width: 100%;
  max-width: 42rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(30, 27, 24, 0.12);
  font-size: 0.92rem;
  color: #4f473d;
}

.footer-strip a {
  text-decoration: none;
}

.footer-strip a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.affiliate-line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #5d5449;
}

.affiliate-link {
  color: inherit;
}

.affiliate-link em {
  font-style: italic;
}

.footer-strip > * + * {
  margin-top: 0.55rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.footer-row > * + * {
  margin-left: 0.55rem;
}

.message {
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(30, 27, 24, 0.12);
}

.message--notice {
  background: rgba(49, 41, 32, 0.08);
}

.message--error {
  background: rgba(123, 45, 34, 0.08);
  border-color: rgba(123, 45, 34, 0.18);
  color: #7b2d22;
}

.message--error-detail {
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.88rem;
  color: #5d5449;
}

.quiet-link {
  color: inherit;
}

.turn-echo {
  margin: 0;
  font-size: 0.88rem;
  font-style: italic;
  color: #5d5449;
  opacity: 0.72;
}

.turn-marker {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: #5d5449;
  opacity: 0.55;
}

/* --- chat page: brought into the book world --- */

.shell--chat {
  max-width: 44rem;
}

.chat-thread {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 0.5rem 0;
}

.chat-thread > * + * {
  margin-top: 1.5rem;
}

.chat-message {
  padding: 0;
  background: transparent;
  border: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
}

.chat-message--user,
.chat-message--assistant {
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  border: 0;
}

.chat-message--system {
  background: rgba(49, 41, 32, 0.06);
  border: 1px solid rgba(30, 27, 24, 0.12);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  text-align: center;
  align-self: center;
  max-width: 32rem;
  font-size: 0.92rem;
  font-style: italic;
  color: #5d5449;
}

.chat-role {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant: small-caps;
  color: #5d5449;
  margin: 0 0 0.35rem;
  opacity: 0.65;
}

.chat-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #1e1b18;
}

.chat-body p {
  margin: 0.4em 0;
}

.chat-body p:first-child {
  margin-top: 0;
}

.chat-body p:last-child {
  margin-bottom: 0;
}

.chat-input-wrap {
  flex: 0 0 auto;
  border-top: 1px solid rgba(30, 27, 24, 0.12);
  padding-top: 0.9rem;
  margin-top: 1rem;
}

.chat-input-form {
  display: flex;
  align-items: flex-end;
}

.chat-input-form > * + * {
  margin-left: 0.5rem;
}

.chat-input-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 2.8rem;
  background: rgba(255, 255, 255, 0.9);
}

/* Legal-copy rhythm.
   `.legal-copy` is always rendered as `<section class="panel stack legal-copy">`,
   so `.stack > * + * { margin-top: 1rem }` already supplies the baseline gap
   between every direct child. We only override that baseline to give headings
   a section break above them. Type sizes still live here because legal pages
   read at a slightly larger size than the rest of the app. */

.legal-copy p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.65;
  color: #2f2924;
}

.legal-copy h2 {
  margin: 0;
  margin-top: var(--space-major);
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.32rem;
  line-height: 1.2;
  font-weight: 600;
  color: #1e1b18;
}

.legal-copy p + p {
  margin-top: 1.35rem;
}

.legal-copy h3 {
  margin: 0;
  margin-top: 1.5rem;
  font-size: 1.08rem;
  font-weight: 600;
  color: #1e1b18;
}

/* Title sits flush; the stack rule on the parent gives the gap to the
   first paragraph or heading below. */
.legal-copy .page-title {
  margin: 0;
}

/* Pages that go h1→p (safety, about) feel cramped on the stack-default 1rem.
   h2 already lifts itself with var(--space-major); match that cadence when
   the first sibling is a paragraph instead of a heading. */
.legal-copy .page-title + p {
  margin-top: var(--space-major);
}

.about-feature-list {
  display: grid;
  gap: 0.9rem 1.15rem;
  margin: 0;
}

.about-feature-list div {
  min-width: 0;
}

.about-feature-list dt {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #1e1b18;
}

.about-feature-list dd {
  margin: 0;
  color: #2f2924;
  line-height: 1.62;
}

.page-about .legal-copy,
.page-privacy .legal-copy,
.page-terms .legal-copy,
.page-safety .legal-copy {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.site-footer {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1rem calc(1.15rem + env(safe-area-inset-bottom));
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #6a6258;
  text-align: center;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.72rem;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.site-footer__copyright {
  white-space: nowrap;
}

.thinking-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(30, 27, 24, 0.44);
}

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

.thinking-card {
  width: 100%;
  max-width: 19rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(255, 253, 249, 0.22);
  border-radius: 18px;
  background: #fffdf9;
  color: #1e1b18;
  box-shadow: 0 18px 50px rgba(30, 27, 24, 0.24);
  text-align: left;
}

.thinking-card > * + * {
  margin-top: 0.5rem;
}

.thinking-spinner {
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0;
  margin-right: 0;
  display: block;
  border-radius: 999px;
  border: 2px solid rgba(49, 41, 32, 0.14);
  border-top-color: #312920;
  animation: thinking-spin 760ms linear infinite;
}

.thinking-title {
  display: block;
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, ui-serif, serif;
  font-size: 1.15rem;
  line-height: 1.1;
  font-weight: 600;
}

.thinking-time,
.thinking-note {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #4f473d;
}

.thinking-time {
  font-variant-numeric: tabular-nums;
}

@keyframes thinking-spin {
  to {
    transform: rotate(360deg);
  }
}

.button--small {
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  min-height: 2rem;
}

.page-settings .page-head,
.page-settings .panel,
.page-settings .settings-form {
  width: 100%;
  max-width: 38rem;
}

.page-settings .page-title {
  margin-top: 0;
}

.page-settings .shell--page > * + * {
  margin-top: 1.15rem;
}

.page-settings .source-panel textarea {
  min-height: 12rem;
}

.page-book .shell--book {
  justify-content: flex-start;
}

.page-book .shell--book > .composer-wrap {
  margin-top: 1rem;
}

.page-book .next-actions {
  margin-top: 1rem;
}

.page-book .reader-tools {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
}

.actions-row--settings-save {
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: -0.35rem;
  padding-right: 0.25rem;
}

.actions-row--settings-save .button {
  width: auto;
  max-width: none;
}

.autosave-status {
  font-size: 0.85rem;
  color: var(--muted, #5b6068);
  opacity: 0.85;
}
.autosave-status[hidden] {
  display: none;
}

.page-source .page-head,
.page-source .panel {
  max-width: 40rem;
}

.page-source .page-head {
  min-height: 2.9rem;
}

.page-source textarea[name="source_text"] {
  height: 18rem;
}

/* --- stepped responsive: Kindle-safe media queries replacing clamp() --- */

@media (min-width: 600px) {
  .shell {
    --shell-space-y: 2rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .shell--page > * + *,
  .shell--book > * + * {
    margin-top: 1.6rem;
  }
  .wordmark {
    font-size: 3.6rem;
  }
  .page-title {
    font-size: 2.8rem;
  }
  .book-title {
    font-size: 2.8rem;
  }
  .panel {
    padding: 1.5rem;
  }
  .panel-title {
    font-size: 1.7rem;
  }
  .field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
  }
}

/* About feature list: 2 columns at desktop. Default mode now has 8 items
   (4+4 balanced) since "Save and resume across devices" was added with
   Bucket B. Classroom mode has 4 items (2+2). Both wrap cleanly. */
@media (min-width: 720px) {
  .about-feature-list {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.6rem;
  }
}

@media (min-width: 900px) {
  .shell {
    --shell-space-y: 2.5rem;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
  }
  .shell--page > * + *,
  .shell--book > * + * {
    margin-top: 1.85rem;
  }
  .wordmark {
    font-size: 4.5rem;
  }
  .page-title {
    font-size: 3.15rem;
  }
  .book-title {
    font-size: 3.3rem;
  }
  .prose {
    line-height: 1.82;
  }
  .panel-title {
    font-size: 1.85rem;
  }
}

/* --- modern enhancement layers --- */

@supports (transition: transform 120ms ease) {
  .button,
  .icon-button,
  .back-link {
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  }
  .button:hover,
  .icon-button:hover,
  .back-link:hover {
    transform: translateY(-1px);
  }
  .button--primary:disabled,
  .icon-button[disabled],
  .icon-button[data-busy="true"] {
    transform: none;
  }
}

/* --- small viewports --- */

@media (max-width: 680px) {
  .composer {
    padding: 0.5rem;
    border-radius: 18px;
  }
  .panel {
    padding: 1rem;
    border-radius: 18px;
  }
  .page-title {
    font-size: 2rem;
  }
  .lede {
    font-size: 1.08rem;
    line-height: 1.46;
  }
  .wordmark {
    font-size: 2.4rem;
  }
  .hero-top {
    gap: 0.75rem;
  }
  .page-home .hero-top + .lede {
    margin-top: 1.1rem;
  }
  .resume-link {
    max-width: 100%;
    padding: 0.9rem 0.95rem;
  }
  .page-source textarea[name="source_text"] {
    height: 13rem;
  }
  .source-panel-footer {
    gap: 0.65rem;
  }
  .home-input-shell {
    padding-left: 0.45rem;
  }
  .home-input-action,
  .composer-submit,
  .composer-cog,
  .icon-button,
  .back-link {
    width: 2.7rem;
    height: 2.7rem;
  }
  /* Mobile: keep classroom Turn-on/Turn-off button anchored right
     so the Connect Google fallback isn't stranded mid-row. */
  .classroom-confirm,
  .panel-heading + .actions-row {
    margin-left: auto;
  }
  .panel-heading + .actions-row {
    width: 100%;
    justify-content: flex-end;
  }
  .back-link--text {
    width: auto;
    height: auto;
    padding: 0.58rem 0.82rem 0.58rem 0.68rem;
  }
  .actions-row > * {
    flex: 1 1 auto;
  }
  .actions-row form {
    flex: 1 1 auto;
  }
  .reader-tools,
  .reader-tools__group,
  .next-actions {
    display: flex;
  }
  .reader-tool,
  .next-action-button {
    flex: 1 1 auto;
  }
  .classroom-confirm {
    flex: 1 1 100%;
  }
  .classroom-confirm summary {
    width: 100%;
  }
  .classroom-status {
    max-width: 100%;
  }
  .cost-display {
    position: static;
    align-self: flex-start;
    margin-top: 0.5rem;
    max-width: 100%;
  }
  .inline-field {
    padding-left: 0.82rem;
  }
}

/* Phone-width: stack inline-field rows so input placeholders aren't truncated
   by an adjacent button on a single flex row. Applies to API-key rows on
   /settings, library rename, and the chat password row. */
@media (max-width: 480px) {
  .inline-field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem 0.82rem;
  }
  .inline-field input {
    padding: 0.5rem 0;
  }
  .inline-field__action--submit {
    min-width: 0;
    width: 100%;
  }
}

/* --- print --- */

@page {
  margin: 0.7in;
}

@media print {
  .composer-wrap,
  .footer-strip,
  .site-footer,
  .affiliate-line,
  .actions-row,
  .aux-link,
  .back-link,
  .icon-button,
  .reader-tools,
  .reader-tool,
  .next-actions,
  .next-action-button,
  .generated-audio,
  .mic-panel,
  .transcription-panel,
  .stream-preview,
  .stream-status,
  .cost-display,
  .thinking-overlay {
    display: none;
  }
  .generated-media,
  .generated-image,
  .story-flow__figure {
    display: block;
    max-width: 100%;
    page-break-inside: avoid;
    margin: 12pt 0;
  }
  .generated-image img,
  .story-flow__figure img {
    max-width: 100%;
    height: auto;
  }
  .generated-image figcaption,
  .image-replace-form {
    display: none;
  }
  html,
  body {
    background: #fff;
  }
  body {
    color: #111;
    font-size: 12pt;
    line-height: 1.55;
  }
  .shell,
  .shell--page,
  .shell--book,
  .book,
  .panel {
    display: block;
    max-width: none;
    min-height: auto;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .panel {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .book-head,
  .prose {
    max-width: none;
  }
  .book-title {
    font-size: 24pt;
    line-height: 1.1;
  }
  .book-byline,
  .page-intro,
  .turn-marker {
    color: #333;
  }
  .prose {
    font-size: 12.5pt;
    line-height: 1.65;
  }
  .prose p {
    margin: 0 0 0.9em;
    orphans: 3;
    widows: 3;
  }
  a {
    color: #111;
    text-decoration: none;
  }
}