/* public/css/formats/comprehensive.css
 *
 * Full Plan layout — 6-7 letter pages stacked, fixed letter-shape size,
 * unified interior chrome (header + footer + page numbers), brand-color
 * cover and closing, recs across 1-3 pages with shortest-column masonry.
 */

/* ─── Outer stack ──────────────────────────────────────────────────────── */
.fp-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}

/* All pages exactly the same letter shape */
.fp-page {
  width: 1080px;
  height: 1397px;
  background: #fff;
  color: #1a1a1a;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ─── Cover + Back Cover (full brand-color, white type) ───────────────── */
.fp-cover, .fp-back-cover {
  color: #fff;
  /* background gradient is set inline so it picks up the user's brand color */
}
.fp-cover-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 64px 80px;
}
.fp-cover-logo {
  flex-shrink: 0;
  min-height: 60px;  /* reserve space even when no logo, so layout is stable */
}
.fp-cover-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 40px 0;
}
.fp-cover-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: 24px;
}
.fp-cover-client {
  font-family: 'DM Serif Display', serif;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: 18px;
}
.fp-cover-date {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
.fp-cover-meta { flex-shrink: 0; }
.fp-cover-meta-rule {
  height: 2px;
  width: 60px;
  background: var(--brand-secondary);
  margin-bottom: 22px;
}
.fp-cover-meta-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.fp-cover-meta-firm {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.fp-cover-meta-advisor {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.fp-cover-meta-line {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-top: 3px;
}

/* Back cover: closing thought centered, slightly larger serif italic */
/* Cover KPI stat strip */
.fp-cover-stats {
  display: flex;
  gap: 56px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(127,127,127,0.25);
}
.fp-cover-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  line-height: 1;
  color: var(--on-brand-primary, #fff);
  margin-bottom: 8px;
}
.fp-cover-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-brand-primary-muted, rgba(255,255,255,0.7));
}
.fp-cover.fp-cover-white .fp-cover-stat-val { color: var(--brand-primary); }
.fp-cover.fp-cover-white .fp-cover-stat-lbl { color: #999; }

.fp-back-cover .fp-cover-main {
  justify-content: center;
}
.fp-back-cover-note {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 780px;
}
.fp-back-cover-note p { margin: 0 0 14px; }

/* ─── White cover variant ─────────────────────────────────────────────
   Cover only (back cover always renders the brand gradient regardless).
   White background with brand-color text + a vertical primary strip on
   the right edge + a horizontal primary band across the bottom carrying
   the Prepared-by / firm / advisor info in white. */
.fp-cover.fp-cover-white {
  color: var(--d1p-ink, #1a1a1a);
  position: relative;
}
.fp-cover.fp-cover-white .fp-cover-content {
  /* Make room for the right strip (88px) and bottom band (132px).
     The content's existing 64/80 padding stays; we add the accent
     footprint so text never overlaps the strip/band. */
  padding-right: 168px;
  padding-bottom: 196px;
}
.fp-cover.fp-cover-white .fp-cover-eyebrow {
  color: var(--brand-secondary);
  opacity: 1;
}
.fp-cover.fp-cover-white .fp-cover-client {
  color: var(--brand-primary);
}
.fp-cover.fp-cover-white .fp-cover-date {
  color: var(--d1p-ink-muted, #555);
}

/* Bottom band runs full width; right strip overlays the bottom-right
   corner. Both same color so the overlap is invisible — no white seam
   along their meeting edge (was happening with sub-pixel rounding when
   they shared an edge). DOM order: band first, strip after, so strip
   paints on top. */
.fp-cover-bottom-band {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 132px;
  display: flex;
  align-items: center;
  padding: 0 80px;
  color: #fff;
}
.fp-cover-right-strip {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 88px;
}
/* Stacked Prepared-by → Firm → Advisor on the left of the band */
.fp-band-stack {
  display: flex;
  flex-direction: column;
}
.fp-band-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}
.fp-band-firm {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  letter-spacing: -0.3px;
  color: #fff;
  line-height: 1.1;
}
.fp-band-advisor {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
}

/* ─── Unified interior page chrome ────────────────────────────────────── */
.fp-interior {
  display: flex;
  flex-direction: column;
}
.fp-int-header {
  flex-shrink: 0;
  padding: 28px 60px 18px;
  border-bottom: 2px solid var(--brand-secondary);
  background: #fff;
}
.fp-int-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--d1p-ink-faint, #999);
  margin-bottom: 6px;
}
.fp-int-title {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.4px;
  color: var(--d1p-ink, #1a1a1a);
}
.fp-int-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.fp-int-footer {
  flex-shrink: 0;
  padding: 14px 60px;
  border-top: 1px solid var(--d1p-rule, #e8e8e6);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  color: var(--d1p-ink-muted, #555);
  letter-spacing: 0.02em;
}
.fp-int-footer-l { font-weight: 600; }
.fp-int-footer-r { font-weight: 500; color: var(--d1p-ink-faint, #999); }

/* ─── At a Glance (= Two-Pager page 1) ────────────────────────────────── */
.fp-snapshot .fp-int-body { padding: 0; overflow: visible; display: flex; flex-direction: column; }
.fp-snap-body.plan-detailed-one-pager {
  width: 100%;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Layout rules (per Joe's spec):
   1. Story (Overview + NW Trend) + KPIs are glued together — no gap
      between them; KPIs always sit flush under Overview.
   2. Goals/Values has a fixed gap above it (from KPIs).
   3. Snapshot has the SAME fixed gap above it (from Goals/Values).
   4. Snapshot grows to fill the rest of the page so its light-shaded
      background runs all the way down to the footer. */
.fp-snap-body > .d1p-story-block    { flex: 0 0 auto; align-items: stretch; }
.fp-snap-body > .d1p-kpi-section    { flex: 0 0 auto; }
.fp-snap-body > .d1p-direction-row  { flex: 0 0 auto; margin-top: 20px; border-bottom: none; }
.fp-snap-body > .d1p-snapshot-section { flex: 1 1 auto; margin-top: 20px; }
/* When Direction is absent, Snapshot's gap-above stays consistent (its
   own margin-top), so spacing holds either way. */

/* NW chart in the story block: bounded height matching Two-Pager p1.
   Selector specificity bumped by including .plan-detailed-one-pager AND
   .d1p-story-block so it beats the base 110px rule from the shared
   detailed-one-pager styles. */
.fp-snap-body.plan-detailed-one-pager .d1p-story-block .d1p-nw-chart-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fp-snap-body.plan-detailed-one-pager .d1p-story-block .d1p-nw-chart-wrap {
  height: 180px;
  overflow: hidden;
}

/* Snapshot internal spacing — more breathing room between title,
   NW Breakdown, and the 3-chart row. */
.fp-snap-body .d1p-snapshot-section { padding: 30px 44px; }
.fp-snap-body .d1p-snapshot-section > .d1p-section-head { margin-bottom: 22px; }
.fp-snap-body .d1p-snapshot-section .d1p-nw-breakdown {
  margin-bottom: 32px;
  padding-bottom: 26px;
}

/* ─── Recommendations pages (cards via JS masonry) ────────────────────── */
.fp-recs-page .fp-int-body {
  padding: 22px 44px;
  background: var(--d1p-wash-primary, #f6f6f7);
  display: flex;
  flex-direction: column;
}
.fp-recs-grid {
  position: relative;
  flex: 1;
  margin-top: 4px;
}
/* Override .plan-detailed-one-pager class — that class enforces
   width:1080 + min-height:1397 which would force the grid to break
   out of its parent body's content area (was causing cards to flow
   off the right edge). */
.fp-recs-grid.plan-detailed-one-pager {
  width: 100%;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

/* ─── Free-form ───────────────────────────────────────────────────────── */
/* Padding on the .fp-int-body (not .fp-freeform-body) so summary block's
   negative-margin bleed math works against the body's padding edge. */
.fp-freeform .fp-int-body { padding: 50px 80px 40px; }
.fp-freeform-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--d1p-ink, #1a1a1a);
}
.fp-freeform-body p { margin: 0 0 16px; }
.fp-freeform-body p:last-child { margin-bottom: 0; }
/* Pasted images: cap at full content width, preserve aspect ratio, sit
   as block elements between paragraphs. Inline styles from the paste
   handler also set these; this is belt-and-suspenders in case a saved
   plan's stored HTML lacks them. */
.fp-freeform-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
  border-radius: 3px;
}

/* ─── Summary block (full-width brand-primary band) ──────────────────────
   Mirrors the .d1p-story-block treatment on the At a Glance page so the
   plan opens and closes with a brand-color editorial moment. Negative
   horizontal margin lets the band escape the body's content padding and
   span the full page width. */
.fp-summary-block {
  margin: 22px -44px 0;
  padding: 24px 60px 28px;
  background: var(--brand-primary);
  color: var(--on-brand-primary, #fff);
}
.fp-summary-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.fp-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.fp-summary-headline {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: #fff;
}
.fp-summary-headline em {
  font-style: italic;
  color: var(--brand-secondary);
}
.fp-summary-body {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.fp-summary-body p { margin: 0 0 10px; }
.fp-summary-body p:last-child { margin-bottom: 0; }
/* Freeform page has 80px horizontal padding instead of 44px — adjust
   the negative margin so the band still bleeds to the page edge. */
.fp-freeform .fp-summary-block { margin: 28px -80px 0; }

/* ─── Implementation Timeline (action roadmap) ────────────────────────── */
/* Light wash on the page body so the white phase cards pop. */
.fp-roadmap .fp-int-body {
  background: var(--d1p-wash-primary, #f6f6f7);
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
}
.fp-roadmap-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  min-height: 0;
}
.fp-roadmap-bucket {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* Colored top stripe — phase accent color */
.fp-roadmap-bucket-stripe {
  height: 6px;
  flex-shrink: 0;
}
.fp-roadmap-bucket-body {
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fp-roadmap-bucket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--d1p-rule, #e8e8e6);
}
.fp-roadmap-bucket-label {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  letter-spacing: -0.3px;
}
.fp-roadmap-bucket-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d1p-ink-faint, #999);
}
.fp-roadmap-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.fp-roadmap-list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--d1p-ink, #1a1a1a);
  padding-left: 22px;
  position: relative;
}
.fp-roadmap-list li::before {
  content: '☐';
  position: absolute;
  left: 0; top: -1px;
  color: var(--brand-secondary);
  font-weight: 700;
  font-size: 15px;
}
/* Empty phase placeholder text inside an empty card */
.fp-roadmap-empty-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--d1p-ink-faint, #bbb);
  font-style: italic;
  letter-spacing: 0.04em;
}
.fp-roadmap-bucket.is-empty {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}