/* MV_MemorySheet — the printable one-page memory sheet (#432).

   Two surfaces in one file:
   1. SCREEN — a reading-overlay stage holding a real sheet of paper (laid out
      in millimetres, shrunk to fit with `zoom` so the preview *is* the print)
      beside a picker rail.
   2. PRINT — `@media print` strips the app and the chrome away and lets the
      page flow onto real paper at 1:1. The `@page` size + margin are injected
      by the JS (a `@page` rule can't read a custom property).

   Paper is white, ink is the heritage warm near-black; the accents are the
   terracotta/brass the rest of the app uses, forced through with
   `print-color-adjust: exact` so a printer doesn't drop them. */

.memory-sheet-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);
  --memory-sheet-scale: 1;
  --memory-sheet-page-w: 210mm;
  --memory-sheet-page-h: 297mm;
}

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

.memory-sheet__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);
}

.memory-sheet__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;
}

/* Coming back wears a bare chevron and muted text — never more weight than the
   content it leaves (#482 rule 2). */
.memory-sheet__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  flex: none;
  padding: var(--space-xxs) var(--space-xs);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.memory-sheet__back svg {
  width: 15px;
  height: 15px;
}

.memory-sheet__back:hover,
.memory-sheet__back:focus-visible {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

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

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

.memory-sheet__stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: var(--space-md);
  /* A faint warm field so the white page reads 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;
}

.memory-sheet__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 ---------------------------------------------------------------- */

.memory-sheet__page {
  /* `zoom` (not `transform`) so the shrunk page still takes the space it
     occupies — the stage scrolls correctly and an overflowing page grows the
     scroll height honestly. */
  zoom: var(--memory-sheet-scale);
  width: var(--memory-sheet-page-w);
  min-height: var(--memory-sheet-page-h);
  margin: 0 auto;
  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 panel and the tree cards already wear. */
.memory-sheet__page--memorial {
  border-top-color: var(--color-remembrance);
}

/* --- masthead ------------------------------------------------------------------ */

/* One wrapper for everything above the footer, so its natural height is the
   sheet's real content height (the page box is a full sheet by definition). */
.memory-sheet__page-body {
  flex: none;
}

.memory-sheet__masthead {
  display: flex;
  align-items: center;
  gap: 8mm;
  padding-bottom: 5mm;
  border-bottom: 0.4mm solid var(--color-border);
}

.memory-sheet__portrait {
  flex: none;
  width: 34mm;
  height: 34mm;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 78%, #1c1917);
  box-shadow: 0 0 0 0.8mm #fff, 0 0 0 1.2mm var(--color-border-strong);
}

.memory-sheet__page--memorial .memory-sheet__portrait {
  background: color-mix(in srgb, var(--color-remembrance-deep) 80%, #1c1917);
  box-shadow: 0 0 0 0.8mm #fff, 0 0 0 1.2mm var(--color-remembrance);
}

.memory-sheet__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-sheet__initials {
  font-family: var(--font-serif);
  font-size: 12mm;
  color: var(--color-bg);
  letter-spacing: 0.02em;
}

.memory-sheet__masthead-words {
  min-width: 0;
}

.memory-sheet__eyebrow {
  margin: 0 0 1mm;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4.6mm;
  color: var(--color-remembrance-deep);
  letter-spacing: 0.04em;
}

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

.memory-sheet__dates {
  margin: 1.5mm 0 0;
  font-family: var(--font-serif);
  font-size: 5mm;
  color: var(--color-highlight-deep);
}

.memory-sheet__page--memorial .memory-sheet__dates {
  color: var(--color-remembrance-deep);
}

.memory-sheet__beats {
  margin: 3mm 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8mm 3mm;
  font-size: 3.6mm;
  line-height: 1.35;
}

.memory-sheet__beats dt {
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-size: 2.8mm;
  padding-top: 0.4mm;
}

.memory-sheet__beats dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* --- the memories --------------------------------------------------------------- */

.memory-sheet__memories {
  padding-top: 5mm;
  display: flex;
  flex-direction: column;
  gap: 5mm;
}

.memory-sheet__memory {
  /* Never split a memory across the fold when the page does run over. */
  break-inside: avoid;
}

.memory-sheet__memory-head {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 1.2mm;
}

.memory-sheet__memory-head .mv-medallion {
  flex: none;
}

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

.memory-sheet__memory-title {
  margin: 0 0 1.5mm;
  font-family: var(--font-serif);
  font-size: 5.6mm;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  color: var(--color-text);
}

.memory-sheet__memory-photo {
  margin: 0 0 2.5mm;
  text-align: center;
}

/* Never crop the hero photo: a memorial page must not cut a face out of the
   frame. The picture shrinks to fit the column *and* a 62mm height cap, and a
   tall one simply sits narrower and centred. (The album strip below is
   thumbnails, where the usual cover crop is right.) */
.memory-sheet__photo-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 80mm;
  border-radius: 1mm;
}

.memory-sheet__memory-body {
  font-size: 3.8mm;
  line-height: 1.55;
  color: var(--color-text);
}

.memory-sheet__memory-body p {
  margin: 0 0 2mm;
}

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

.memory-sheet__memory-body h3,
.memory-sheet__memory-body h4 {
  font-family: var(--font-serif);
  font-size: 4.2mm;
  margin: 2mm 0 1mm;
}

.memory-sheet__memory-body ul,
.memory-sheet__memory-body ol {
  margin: 1.5mm 0;
  padding-left: 6mm;
}

.memory-sheet__memory-body ul { list-style: disc; }
.memory-sheet__memory-body ol { list-style: decimal; }

.memory-sheet__memory-body blockquote {
  margin: 2mm 0;
  padding-left: 3mm;
  border-left: 0.6mm solid var(--color-highlight);
  font-style: italic;
  color: var(--color-text-muted);
}

.memory-sheet__memory-body a {
  color: var(--color-accent);
}

/* --- the album strip -------------------------------------------------------------- */

.memory-sheet__strip {
  padding-top: 5mm;
  break-inside: avoid;
}

.memory-sheet__strip-heading {
  margin: 0 0 2mm;
  font-size: 3.2mm;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: var(--font-weight-medium);
}

.memory-sheet__strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
}

.memory-sheet__strip-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1mm;
  background: var(--color-surface-alt);
}

.memory-sheet__strip-photo .memory-sheet__photo-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: cover;
}

.memory-sheet__page-empty {
  margin: 8mm 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4.2mm;
  color: var(--color-text-faint);
}

/* A closing rule right under the last memory, 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 in a different place than the preview showed. The preview
   is the print or it is worth nothing. */
.memory-sheet__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 picker rail --------------------------------------------------------------- */

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

.memory-sheet__paper {
  flex: 1;
  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);
}

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

.memory-sheet__paper--selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.memory-sheet__paper-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.memory-sheet__paper-dim {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.memory-sheet__rail-heading {
  margin: var(--space-xs) 0 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);
}

.memory-sheet__rail-empty {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.memory-sheet__choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

/* One row grammar: surface + radius + soft edge, differentiated only by the
   medallion (HOUSE LOOK 8). */
.memory-sheet__choice {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.memory-sheet__choice:hover,
.memory-sheet__choice:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.memory-sheet__choice-box {
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.memory-sheet__choice .mv-medallion {
  flex: none;
}

.memory-sheet__choice-words {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.memory-sheet__choice-title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-sheet__choice-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

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

.memory-sheet__fill-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  overflow: hidden;
}

.memory-sheet__fill-bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--transition-base), background-color var(--transition-fast);
}

.memory-sheet__fill-bar--over .memory-sheet__fill-bar-fill {
  background: var(--color-warning);
}

.memory-sheet__fill {
  margin: var(--space-xxs) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.memory-sheet__fill-text--over {
  color: var(--color-warning);
}

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

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

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

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

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

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

@media (hover: none) and (pointer: coarse) {
  .memory-sheet__back,
  .memory-sheet__paper,
  .memory-sheet__choice {
    min-height: var(--touch-target-min);
    touch-action: manipulation;
  }

  .memory-sheet__choice-box {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-sheet__fill-bar-fill {
    transition: none;
  }
}

/* --- the panel's entry point ----------------------------------------------------------- */

/* Third of the panel heading's quiet italic links, under "Walk down memory
   lane" — same voice, same stacked medallion treatment (timeline.css). */
.panel__print-sheet-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-xxs);
  margin-top: var(--space-xxs);
  padding: 2px var(--space-xs);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-highlight-deep);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.panel__print-sheet-link:hover,
.panel__print-sheet-link:focus-visible {
  color: var(--color-highlight-deep);
  background-color: var(--color-highlight-soft);
}

@media (hover: none) and (pointer: coarse) {
  .panel__print-sheet-link {
    touch-action: manipulation;
    min-height: var(--touch-target-min);
  }
}

/* --- 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 sheet is here. */
@media print {
  /* Nothing but the sheet reaches the paper: the app, the panel, the toasts,
     and the overlay's own chrome all step aside. */
  body.mv-printing-sheet > *:not(.memory-sheet-overlay) {
    display: none !important;
  }

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

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

  /* The "nothing ticked yet" line is guidance for the picker, not content —
     it must never reach the paper. */
  .memory-sheet__chrome,
  .memory-sheet__rail,
  .memory-sheet__page-empty {
    display: none !important;
  }

  .memory-sheet__layout {
    display: block;
  }

  .memory-sheet__stage {
    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. */
  .memory-sheet__page {
    zoom: 1;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    /* The top accent survives — it's the page's one piece of colour. */
    border-top-width: 2mm;
  }
}