/* MV_Book — the whole family as a printed book (#515).

   The book's own chrome only. The *ink* of a person's page is
   `css/memory-sheet.css`, because the page itself is
   `MV_MemorySheet.buildPageBody` — a relative's page must not look different
   depending on which artifact you printed it from.

   Two surfaces, like the memory sheet:
   1. SCREEN — a reading-overlay stage holding a stack of real sheets (laid out
      in millimetres, shrunk to fit with `zoom`) beside a rail: who's in it,
      paper size, the page count, Print.
   2. PRINT — `@media print` strips the app and the chrome away and lets the
      pages flow onto real paper at 1:1, one person per sheet. The `@page` size
      + margin are injected by the JS (a `@page` rule can't read a custom
      property). */

.book-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-reading-overlay); /* modals still open above, per #356 */
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  --book-scale: 1;
  --book-page-w: 210mm;
  --book-page-h: 297mm;
}

/* --- overlay chrome ---------------------------------------------------------- */

.book__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.book__chrome-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- stage + rail ------------------------------------------------------------- */

.book__layout {
  flex: 1;
  display: flex;
  min-height: 0;
}

.book__stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  /* A faint warm field so the white pages read as paper lying on a table. */
  background:
    radial-gradient(circle at 50% 0%, rgba(198, 121, 74, 0.07), transparent 60%),
    var(--color-bg-tint);
  scrollbar-width: thin;
}

.book__stage-empty {
  margin: var(--space-xl) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 34ch;
}

.book__rail {
  flex: none;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* --- the paper ---------------------------------------------------------------- */

.book__page {
  /* `zoom` (not `transform`) so a shrunk page still takes the space it
     occupies — the stage scrolls through the book honestly. */
  zoom: var(--book-scale);
  flex: none;
  width: var(--book-page-w);
  min-height: var(--book-page-h);
  padding: 14mm;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  border-top: 3mm solid var(--color-highlight);
  display: flex;
  flex-direction: column;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* The remembered get brass at the top edge instead of terracotta — the
   memorial treatment the sheet, the panel and the tree cards already wear
   (KIND DIALOG rule 6). Nothing else marks them: the book never greys anyone
   out. */
.book__page--memorial {
  border-top-color: var(--color-remembrance);
}

/* Everything above the running foot, so its natural height is the page's real
   content height (a page box is a full sheet tall by definition). */
.book__page-inner {
  flex: none;
}

/* A closing rule under the last of the page's content, NOT pinned to the
   paper's foot: in print the page box is only as tall as its content, so a
   bottom-pinned footer would sit somewhere the preview never showed. */
.book__foot {
  margin-top: 0;
  padding-top: 8mm;
  border-top: 0.3mm solid var(--color-border);
  font-size: 3mm;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: center;
}

/* --- the cover ------------------------------------------------------------------ */

.book__page--cover {
  justify-content: center;
}

.book__page--cover .book__page-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4mm;
  padding: 20mm 0;
}

.book__page--cover .mv-medallion {
  margin-bottom: 4mm;
}

.book__cover-eyebrow {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 5mm;
  color: var(--color-highlight-deep);
  letter-spacing: 0.06em;
}

.book__cover-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16mm;
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.book__cover-scope {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 6mm;
  color: var(--color-text-muted);
}

.book__cover-meta {
  margin: 2mm 0 0;
  font-size: 3.4mm;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* --- generation eyebrow ---------------------------------------------------------- */

/* The generation reads once, over the first person on it — words, not just a
   hue (THE HOUSE LOOK 9). */
.book__generation {
  margin: 0 0 4mm;
  padding-bottom: 2mm;
  border-bottom: 0.3mm solid var(--color-highlight);
  font-size: 3.2mm;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-highlight-deep);
}

/* --- the closing chronicle --------------------------------------------------------- */

.book__chronicle-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 11mm;
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  color: var(--color-text);
}

.book__chronicle-intro {
  margin: 2mm 0 6mm;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4.2mm;
  color: var(--color-text-muted);
}

.book__decade {
  margin-bottom: 6mm;
  break-inside: avoid;
}

.book__decade-heading {
  margin: 0 0 2.5mm;
  font-family: var(--font-serif);
  font-size: 6mm;
  font-weight: var(--font-weight-medium);
  color: var(--color-highlight-deep);
  border-bottom: 0.3mm solid var(--color-border);
  padding-bottom: 1mm;
}

.book__entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.book__entry {
  margin-bottom: 3mm;
  break-inside: avoid;
}

.book__entry-head {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 0.8mm;
}

.book__entry-head .mv-medallion {
  flex: none;
}

.book__entry-date {
  font-size: 3mm;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.book__entry-text {
  margin: 0;
  font-size: 3.8mm;
  line-height: 1.45;
  color: var(--color-text);
}

.book__entry-who {
  margin: 0.5mm 0 0;
  font-size: 3.2mm;
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- the rail's controls ------------------------------------------------------------- */

.book__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.book__field-label {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* One row grammar for both card rows — surface + radius + soft edge, the
   selected one carrying the accent (THE HOUSE LOOK 8). */
.book__scope,
.book__paper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.book__scope:hover,
.book__scope:focus-visible,
.book__paper:hover,
.book__paper:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.book__scope--selected,
.book__paper--selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.book__scopes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.book__scope-name,
.book__paper-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.book__scope-desc,
.book__paper-dim {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.book__papers {
  display: flex;
  gap: var(--space-xs);
}

.book__papers .book__paper {
  flex: 1;
}

.book__branch {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin-top: var(--space-xxs);
}

/* `display: flex` above outranks the UA sheet's `[hidden] { display: none }`,
   so the branch picker needs saying twice or it shows under "Whole tree". */
.book__branch[hidden] {
  display: none;
}

.book__branch-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.book__count-wrap {
  margin-top: auto;
  padding-top: var(--space-xs);
}

.book__count {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.book__status {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-accent);
}

.book__actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}

/* --- phone widths ------------------------------------------------------------------- */

@media (max-width: 860px) {
  .book__layout {
    flex-direction: column;
    overflow-y: auto;
  }

  .book__stage {
    flex: none;
    overflow: visible;
    padding: var(--space-sm);
  }

  .book__rail {
    width: auto;
    border-left: none;
    border-top: 1px solid var(--color-border);
    overflow: visible;
  }

  .book__count-wrap {
    margin-top: var(--space-xs);
  }
}

@media (hover: none) and (pointer: coarse) {
  .book__scope,
  .book__paper {
    min-height: var(--touch-target-min);
    touch-action: manipulation;
  }
}

/* --- print ------------------------------------------------------------------------------ */

/* The `@page { size; margin }` rule is injected by the JS (a @page rule can't
   read a custom property) — everything else about the printed book is here. */
@media print {
  /* Nothing but the book reaches the paper: the app, the panel, the toasts and
     the overlay's own chrome all step aside. */
  body.mv-printing-book > *:not(.book-overlay) {
    display: none !important;
  }

  body.mv-printing-book {
    background: #fff;
  }

  .book-overlay {
    position: static;
    display: block;
    background: none;
  }

  .book__chrome,
  .book__rail,
  .book__stage-empty {
    display: none !important;
  }

  .book__layout {
    display: block;
  }

  .book__stage {
    display: block;
    overflow: visible;
    padding: 0;
    background: none;
  }

  /* 1:1 on real paper: the @page margin supplies the edge, so the preview's
     own padding and paper-sized box get out of the way. */
  .book__page {
    zoom: 1;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    /* The top accent survives — it's each page's one piece of colour, and it's
       what tells a remembered page from a living one. */
    border-top-width: 2mm;
  }

  /* A new sheet per person. `break-before` on all but the first rather than
     `break-after` on every page, so the book doesn't end on a blank sheet. */
  .book__page + .book__page {
    break-before: page;
  }
}