/*
 * Print-tuned typography for the subscription agreement preview.
 *
 * Single source of truth for cert styling: linked by the application
 * layout for browser preview AND read directly by PackageDocumentRenderer
 * to inline into the HTML before Grover renders it to PDF. Both paths
 * use the same CSS rules, so what the browser shows matches what the
 * PDF prints.
 *
 * All rules are scoped to the `.agreement-preview` class so cert styling
 * never bleeds into the rest of the app UI (which uses Tailwind's default
 * sans-serif system font stack). Inside this scope we approximate a
 * legal document layout: serif typeface, dense line-height typical of
 * legal prose.
 *
 * Type scale (canonical — partials should not override unless documenting
 * a specific exception):
 *
 *  12.5pt  page titles (h1, h2)
 *  10.5pt  section headings (h3) — e.g. "MANDATORY INFORMATION:"
 *   9.5pt  body prose, form-field values (default)
 *   8.5pt  field labels, page-N markers
 *   7.5pt  fine print, conditional sub-block intros
 *
 * Line-height 1.25 is the body default — tighter than narrative prose
 * (1.5+) because cert text is scanned, not read sequentially, and because
 * every card has to fit US Letter dimensions exactly (no overflow).
 * Adjacent paragraphs use a tight `margin-block: 0.35em`; the `.cert-caption`
 * class drives smaller italic gray captions (section attributions, fine
 * print) with a 1.2 line-height.
 *
 * Visual model: `.agreement-preview` is a light-gray "canvas" that holds one
 * or more `.agreement-page` cards. Each card is sized to US Letter (8.5in
 * wide, 11in min-height), padded for a 1-inch margin, and separated by
 * vertical space so page boundaries are visible at a glance — no dashed
 * dividers needed, the gap between cards IS the boundary. In PDF rendering,
 * `break-before: page` on every card after the first translates the same
 * structure into real page breaks.
 *
 * Section headings use letter-spacing and uppercase to mirror cert
 * conventions ("SUBSCRIPTION FOR UNITS", "ACCEPTANCE", "INSTRUCTIONS").
 */
.agreement-preview {
  font-family: "Times New Roman", "Times", "Liberation Serif", serif;
  font-size: 9.5pt;
  line-height: 1.25;
  color: #111;
  background: #e5e7eb;
  padding-block: 2rem;
  padding-inline: 1rem;
}

.agreement-preview .agreement-page {
  position: relative;
  background: #fff;
  width: 8.5in;
  height: 11in;
  max-width: 100%;
  margin-inline: auto;
  margin-block-end: 2rem;
  padding: 1in;
  /* Exact US Letter dimensions + overflow hidden = print-faithful preview.
   * Content that doesn't fit gets clipped (visually obvious in preview)
   * rather than spilling onto the gray canvas and silently breaking
   * pagination at PDF render time. When content is clipped, the fix is
   * always to compress the content (smaller fonts, tighter spacing,
   * fewer rows) — never to relax the dimension. */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.agreement-preview .agreement-page:last-child {
  margin-block-end: 0;
}

/*
 * Force a real page break before each card except the first when the
 * document is rendered to PDF. Using `break-before` (rather than
 * `break-after` on the previous sibling) keeps the page-break semantics
 * co-located with the page they introduce.
 */
.agreement-preview .agreement-page + .agreement-page {
  break-before: page;
}

.agreement-preview .agreement-page::before {
  content: "Page " attr(data-page);
  position: absolute;
  top: 0.5in;
  left: 50%;
  transform: translateX(-50%);
  color: #94a3b8;
  font-size: 8.5pt;
  font-style: italic;
}

.agreement-preview h1,
.agreement-preview h2 {
  font-size: 12.5pt;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  margin-block: 0.6em 0.5em;
}

.agreement-preview h3 {
  font-size: 10.5pt;
  font-weight: 700;
  line-height: 1.2;
  margin-block: 0.75em 0.35em;
  text-transform: none;
}

/*
 * Sub-headings within sections (e.g. "Registration Instructions" /
 * "Delivery Instructions" inside the OPTIONAL INFORMATION box on page 3).
 * Stays at body 9.5pt — distinguished from body via weight + tight leading,
 * not size. line-height: 1.2 so a two-line h4 (rare) doesn't blow out the
 * row above the qualifier caption that typically follows.
 */
.agreement-preview h4 {
  font-size: 9.5pt;
  font-weight: 700;
  margin-block: 0.25em 0;
  line-height: 1.2;
}

.agreement-preview p {
  margin-block: 0.35em;
  text-align: justify;
  text-justify: inter-word;
}

/*
 * Fine-print caption. Used for section attributions ("SECTIONS 2 TO 4 TO
 * BE COMPLETED BY THE PURCHASER"), instruction notes, and other small
 * italic captions that orient the reader without competing with body
 * prose for attention. Tight line-height (1.2) so multi-line captions
 * don't waste vertical space.
 */
.agreement-preview .cert-caption {
  font-size: 8.5pt;
  font-style: italic;
  color: #94a3b8;
  line-height: 1.2;
  margin-block: 0 0.4em;
  text-align: start;
}

/*
 * Legal-numbering layout classes for cert paragraphs and sub-items.
 * Three nesting levels mirror standard legal-document outline format:
 *
 *   .cert-numbered-paragraph  — top-level "N.M body" (e.g., "2.1 ...")
 *   .cert-sub-item            — lettered sub-item "(a) body" under a paragraph
 *   .cert-sub-sub-item        — roman sub-sub-item "(i) body" under a sub-item
 *
 * Each layer is a flex row with a fixed-width marker column on the
 * left and a flexible body column on the right. Fixed-width markers
 * guarantee body text starts at the same x position across all rows
 * within a layer, regardless of marker text (the (a)/(p)/(ff)
 * inconsistency the old text-indent approach suffered from).
 *
 * Indentation depth increases per nesting level — sub-items indent
 * 2.5em, sub-sub-items 4.5em — so the outline hierarchy is visible
 * at a glance.
 */
.agreement-preview .cert-numbered-paragraph {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-block: 0.45em 0;
  line-height: 1.3;
}

.agreement-preview .cert-numbered-marker {
  font-weight: 700;
  min-width: 2em;
  flex-shrink: 0;
}

.agreement-preview .cert-numbered-body {
  flex: 1;
  min-width: 0;
}

.agreement-preview .cert-sub-item {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-block: 0.3em 0;
  line-height: 1.3;
  padding-inline-start: 2.5em;
}

.agreement-preview .cert-sub-item-marker {
  min-width: 1.5em;
  flex-shrink: 0;
}

.agreement-preview .cert-sub-item-body {
  flex: 1;
  min-width: 0;
}

.agreement-preview .cert-sub-sub-item {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-block: 0.25em 0;
  line-height: 1.3;
  padding-inline-start: 4.5em;
}

.agreement-preview .cert-sub-sub-item-marker {
  min-width: 1.5em;
  flex-shrink: 0;
  font-style: italic;
}

.agreement-preview .cert-sub-sub-item-body {
  flex: 1;
  min-width: 0;
}

/*
 * Section heading for Additional Terms sections (h3 inside a
 * .cert-section-heading wrapper). Tightens the default h3 top margin
 * to sit closer to the section content beneath without the extra
 * breathing room a stand-alone heading would want.
 */
.agreement-preview .cert-section-heading {
  margin-block: 1em 0.4em;
}

/*
 * Definition list item used in Additional Terms § 1 — Definitions.
 * Same flex idiom as .cert-sub-item but without the nested padding
 * (definitions are top-level lettered entries, not nested under a
 * parent paragraph) and with a slightly wider marker column to fit
 * "(ff)" — the widest marker reached when 32 terms span (a) through (ff).
 */
.agreement-preview .cert-definition {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-block: 0.4em 0;
  line-height: 1.3;
}

.agreement-preview .cert-definition-marker {
  min-width: 2.5em;
  flex-shrink: 0;
}

.agreement-preview .cert-definition-body {
  flex: 1;
  min-width: 0;
}

.agreement-preview ol,
.agreement-preview ul {
  padding-inline-start: 2em;
  margin-block: 0.5em;
}

.agreement-preview li {
  margin-block: 0.25em;
}

.agreement-preview .agreement-section {
  margin-block: 0.5em;
}

/*
 * Declaration block (page 4/5): each numbered section ("1. Security
 * Holdings", "2. Insider/Consultant Status", etc.) renders as a bordered
 * box. Options inside the box are visually separated by a light grey
 * divider so a row of multi-line option text doesn't blur into the next
 * option. The last option in a box has no trailing divider — pseudo-class
 * `:not(:last-child)` handles this without manual per-option overrides.
 */
.agreement-preview .declaration-section {
  border: 1px solid #444;
  padding: 0.4em 0.6em;
  margin-block: 0;
}

/*
 * Adjacent declaration sections touch with no gap — they read as one
 * continuous stack of sections rather than separate floating boxes.
 * Negative margin-top equal to the border width pulls the next section
 * up by 1px so the borders overlap into a single 1px line at the
 * junction rather than doubling to 2px.
 */
.agreement-preview .declaration-section + .declaration-section {
  margin-block-start: -1px;
}

.agreement-preview .declaration-section > h3 {
  margin-block-start: 0.2em;
}

.agreement-preview .declaration-option:not(:last-child) {
  border-block-end: 1px solid #e5e7eb;
  padding-block-end: 0.4em;
  margin-block-end: 0.4em;
}

/*
 * Print rules — applied only when rendering to PDF (or when the user
 * prints the browser preview). Strips screen-only chrome that would
 * otherwise bleed into the PDF: the gray canvas backdrop, the page
 * card's screen sizing and shadow, and the preview-only header banner.
 * Each `.agreement-page` then flows naturally onto its own printed
 * page via the `break-before: page` rule already set above, with
 * `padding: 1in` from `.agreement-page` providing the visual margins.
 *
 * The `Page N` marker (rendered via the `.agreement-page::before`
 * pseudo-element) is intentionally retained so signed copies can be
 * referenced unambiguously ("see page 3"). With `@page { margin: 0 }`
 * and `padding: 1in` on the card, the marker's `top: 0.5in` positions
 * it inside the top margin area on every printed page.
 *
 * `@page { margin: 0 }` makes the cert padding the sole source of
 * page margins — without it, Chrome's default print margins compound
 * with the card padding and content overflows the printable area.
 */
@media print {
  .preview-banner {
    display: none;
  }

  .agreement-preview {
    background: transparent;
    padding: 0;
  }

  .agreement-preview .agreement-page {
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    box-shadow: none;
    overflow: visible;
  }

  @page {
    size: letter;
    margin: 0;
  }
}