/* An engagement letter, on screen and on paper.

   letters/_document draws every letter — the template preview, the
   request pages, the signing ceremony — and LetterPdf prints that same
   partial with this same file in headless Chrome. So this is plain CSS:
   no Tailwind (the PDF has no Tailwind build; app/assets/builds is absent
   in CI), and every rule sets what it needs itself, because on screen
   Tailwind's preflight has reset margins, list markers and heading sizes,
   and in the PDF nothing has. These rules are unlayered, so they win over
   Tailwind's layered base and utilities without fighting specificity.

   Sizes are in px: a CSS px is 1/96 in on paper too, so 14px body text is
   10.5pt in the PDF and the two read the same. The only difference is the
   frame: a card on screen, a US Letter page in the PDF. That page box
   (@page) is set by LetterPdf in its own document, not here: this file is
   linked on every app page (stylesheet_link_tag :app), and an @page rule
   here would force Letter paper and its margins on printing anything.

   Fonts: Onest for text, Plus Jakarta Sans for headings, Urbanist for the
   firm-name mark — the app's own faces (@font-face in the Tailwind build on
   screen; LetterPdf inlines them as data: URIs). They are Latin subsets;
   anything else falls back to the system sans (DejaVu in the container). */

.letter,
.letter-editor .lexxy-editor__content {
  box-sizing: border-box;
  color: #1f2937;
  font-family: "Onest", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.letter *,
.letter *::before,
.letter *::after {
  box-sizing: border-box;
}

/* ── Letterhead ─────────────────────────────────────────────────────────
   The logo (or, without one, the firm name set large) on one side, the
   firm name and address on the other, a rule beneath. Logo on the left by
   default; --logo-right mirrors it. On a phone the two stack, mark first. */

.letter-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-bottom: 1px solid #d1d5db;
}

.letter-head__mark {
  flex-shrink: 0;
  min-width: 0;
}

.letter-head__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 48px;
  object-fit: contain;
}

.letter-head__name {
  margin: 0;
  color: #111827;
  font-family: "Urbanist", "Onest", ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.letter-head__address {
  min-width: 0;
  margin: 0;
  color: #4b5563;
  font-size: 12px;
  font-style: normal;
  line-height: 1.625;
  overflow-wrap: anywhere;
}

.letter-head__firm {
  display: block;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

.letter-head__line {
  display: block;
}

/* Side by side from a small tablet up — and always on paper (a Letter
   page's text block is 7in = 672px wide). */
@media (min-width: 640px), print {
  .letter-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .letter-head--logo-right {
    flex-direction: row-reverse;
  }

  .letter-head__mark {
    max-width: 50%;
  }

  .letter-head:not(.letter-head--logo-right) .letter-head__address {
    text-align: right;
  }
}

/* ── Body ────────────────────────────────────────────────────────────────
   The tags LetterHtml.clean lets through: p div br h1–h6 ul ol li
   blockquote strong b em i sub sup span pre code hr section. (Tables arrive as
   paragraphs, one per row; links arrive as plain text; <del>/<s> as
   plain text.) Rules for <u>, <s> and <table> are here for completeness.

   Each rule also styles the letter editors' text (founder, 2026-10-01):
   the Terms & Conditions editor and a template's letter body carry
   `letter-editor`, and what the firm types there looks the way the letter
   prints it. Scoped to Lexxy's content element (.lexxy-editor__content),
   never the editor element: its toolbar, dialogs and prompt menus are
   divs, lists and paragraphs too. Lexxy's own content styles (the editors
   keep `lexxy-content`) are zero-specificity :where() rules, so these
   win; the few declarations below that only restate a browser default
   (hyphens, text-wrap, font-style, width) undo what Lexxy adds. */

.letter-body > :first-child,
.letter-editor .lexxy-editor__content > :first-child {
  margin-top: 0;
}

.letter-body > :last-child,
.letter-editor .lexxy-editor__content > :last-child {
  margin-bottom: 0;
}

.letter-body p,
.letter-body div,
.letter-editor .lexxy-editor__content p,
.letter-editor .lexxy-editor__content div {
  margin: 0 0 12px;
}

.letter-body div:empty,
.letter-editor .lexxy-editor__content div:empty {
  margin: 0;
}

/* Lexxy's placeholder paragraph for the caret beside a table or divider:
   it keeps its own collapsed size, not a paragraph's margin. */
.letter-editor .lexxy-editor__content p.provisional-paragraph.hidden {
  margin: 0;
}

.letter-body h1,
.letter-body h2,
.letter-body h3,
.letter-body h4,
.letter-body h5,
.letter-body h6,
.letter-editor .lexxy-editor__content h1,
.letter-editor .lexxy-editor__content h2,
.letter-editor .lexxy-editor__content h3,
.letter-editor .lexxy-editor__content h4,
.letter-editor .lexxy-editor__content h5,
.letter-editor .lexxy-editor__content h6 {
  color: #111827;
  font-family: "Plus Jakarta Sans", "Onest", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  hyphens: manual;
  text-wrap: wrap;
  break-after: avoid;
  break-inside: avoid;
}

.letter-body h1,
.letter-editor .lexxy-editor__content h1 {
  margin: 28px 0 12px;
  font-size: 22px;
}

.letter-body h2,
.letter-editor .lexxy-editor__content h2 {
  margin: 24px 0 10px;
  font-size: 18px;
}

.letter-body h3,
.letter-editor .lexxy-editor__content h3 {
  margin: 20px 0 8px;
  font-size: 16px;
}

.letter-body h4,
.letter-body h5,
.letter-body h6,
.letter-editor .lexxy-editor__content h4,
.letter-editor .lexxy-editor__content h5,
.letter-editor .lexxy-editor__content h6 {
  margin: 16px 0 6px;
  font-size: 14px;
}

.letter-body ul,
.letter-body ol,
.letter-editor .lexxy-editor__content ul,
.letter-editor .lexxy-editor__content ol {
  margin: 0 0 12px;
  padding: 0 0 0 24px;
}

.letter-body ul,
.letter-editor .lexxy-editor__content ul {
  list-style: disc outside;
}

.letter-body ol,
.letter-editor .lexxy-editor__content ol {
  list-style: decimal outside;
}

.letter-body ul ul,
.letter-editor .lexxy-editor__content ul ul {
  list-style-type: circle;
}

.letter-body ol ol,
.letter-editor .lexxy-editor__content ol ol {
  list-style-type: lower-alpha;
}

.letter-body li,
.letter-editor .lexxy-editor__content li {
  margin: 0 0 4px;
  padding: 0;
}

.letter-body li > ul,
.letter-body li > ol,
.letter-editor .lexxy-editor__content li > ul,
.letter-editor .lexxy-editor__content li > ol {
  margin: 4px 0 0;
}

.letter-body blockquote,
.letter-editor .lexxy-editor__content blockquote {
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  border-left: 3px solid #d1d5db;
  color: #4b5563;
  font-style: normal;
}

.letter-body strong,
.letter-body b,
.letter-editor .lexxy-editor__content strong,
.letter-editor .lexxy-editor__content b {
  font-weight: 600;
}

.letter-body em,
.letter-body i,
.letter-editor .lexxy-editor__content em,
.letter-editor .lexxy-editor__content i {
  font-style: italic;
}

.letter-body u,
.letter-editor .lexxy-editor__content u {
  text-decoration: underline;
}

.letter-body s,
.letter-editor .lexxy-editor__content s {
  text-decoration: line-through;
}

.letter-body sub,
.letter-body sup,
.letter-editor .lexxy-editor__content sub,
.letter-editor .lexxy-editor__content sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

.letter-body sup,
.letter-editor .lexxy-editor__content sup {
  top: -0.5em;
}

.letter-body sub,
.letter-editor .lexxy-editor__content sub {
  bottom: -0.25em;
}

.letter-body code,
.letter-body pre,
.letter-editor .lexxy-editor__content code,
.letter-editor .lexxy-editor__content pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 13px;
}

.letter-body pre,
.letter-editor .lexxy-editor__content pre {
  margin: 0 0 12px;
  padding: 12px;
  background: #f3f4f6;
  border-radius: 4px;
  white-space: pre-wrap;
}

/* The attached Terms & Conditions (EngagementTemplate.terms_section):
   set apart from the letter by a rule and room on screen, and started on a
   new page in the PDF, so they read as an attached document. In the Terms
   preview the section comes first: no rule, no break. */
.letter-body section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #d1d5db;
  break-before: page;
}

.letter-body section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  break-before: auto;
}

/* The Terms' own first heading, whether it sits right in the section or
   inside the editor's wrapping <div>. */
.letter-body section > h1:first-child,
.letter-body section > h2:first-child,
.letter-body section > h3:first-child,
.letter-body section > div:first-child > h1:first-child,
.letter-body section > div:first-child > h2:first-child,
.letter-body section > div:first-child > h3:first-child {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.letter-body hr,
.letter-editor .lexxy-editor__content hr {
  width: auto;
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #d1d5db;
}

.letter-body table,
.letter-editor .lexxy-editor__content table {
  width: 100%;
  margin: 0 0 12px;
  border-collapse: collapse;
}

.letter-body th,
.letter-body td,
.letter-editor .lexxy-editor__content th,
.letter-editor .lexxy-editor__content td {
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

.letter-body th,
.letter-editor .lexxy-editor__content th {
  font-weight: 600;
}

/* ── Paper ─────────────────────────────────────────────────────────────
   Scoped to the letter, so harmless on other pages. The page size and
   margins are LetterPdf::PAGE_CSS. */

@media print {
  .letter-body p,
  .letter-body li,
  .letter-body blockquote {
    orphans: 3;
    widows: 3;
  }

  .letter-head {
    break-inside: avoid;
  }

  .letter-body section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}