/* FLOW-508: the one stylesheet for contract wording presentation.
 *
 * Loaded by every browser view of a contract (playbook preview and editor,
 * review workspace, lawyer queue, final review, generated contract, public
 * embed) and inlined, unchanged, into every PDF by get_pdf_html_wrapper. The
 * class names and values come from contract_content/schema.json; a test pins
 * the two together.
 *
 * These are bounded author choices from the editor toolbar, so they must beat
 * whatever paragraph defaults a host page has (including Vue scoped rules).
 * That is the only reason for !important here. A document with none of these
 * classes renders exactly as it did before.
 *
 * Keep the structure simple: plain rules plus "@media screen" blocks. The
 * public embed re-scopes every selector under its own root.
 */

/* Alignment: changes text alignment only, never margin or indentation. */
.cc-align-left { text-align: left !important; }
.cc-align-center { text-align: center !important; }
.cc-align-right { text-align: right !important; }
.cc-align-justify { text-align: justify !important; }

/* Line spacing. No class = the document's established default. */
.cc-line-1 { line-height: 1 !important; }
.cc-line-115 { line-height: 1.15 !important; }
.cc-line-15 { line-height: 1.5 !important; }
.cc-line-2 { line-height: 2 !important; }

/* Paragraph spacing, in points so screen and PDF agree. */
.cc-space-before-0 { margin-top: 0 !important; }
.cc-space-before-6 { margin-top: 6pt !important; }
.cc-space-before-12 { margin-top: 12pt !important; }
.cc-space-before-24 { margin-top: 24pt !important; }
.cc-space-after-0 { margin-bottom: 0 !important; }
.cc-space-after-6 { margin-bottom: 6pt !important; }
.cc-space-after-12 { margin-bottom: 12pt !important; }
.cc-space-after-24 { margin-bottom: 24pt !important; }

/* Embedded images: width is a share of the text column; height follows. */
img.cc-img-w-15 { width: 15% !important; height: auto !important; }
img.cc-img-w-25 { width: 25% !important; height: auto !important; }
img.cc-img-w-33 { width: 33% !important; height: auto !important; }
img.cc-img-w-50 { width: 50% !important; height: auto !important; }
img.cc-img-w-75 { width: 75% !important; height: auto !important; }
img.cc-img-w-100 { width: 100% !important; height: auto !important; }
img.cc-img-left { display: block !important; margin-left: 0 !important; margin-right: auto !important; }
img.cc-img-center { display: block !important; margin-left: auto !important; margin-right: auto !important; }
img.cc-img-right { display: block !important; margin-left: auto !important; margin-right: 0 !important; }

/* Customer-logo slot: the template places it, the document owner fills it. */
.customer-logo-slot { display: block; margin-top: 0; margin-bottom: 12pt; text-indent: 0; }
.customer-logo-slot.cc-img-w-15 { width: 15%; }
.customer-logo-slot.cc-img-w-25 { width: 25%; }
.customer-logo-slot.cc-img-w-33 { width: 33%; }
.customer-logo-slot.cc-img-w-50 { width: 50%; }
.customer-logo-slot.cc-img-w-75 { width: 75%; }
.customer-logo-slot.cc-img-w-100 { width: 100%; }
.customer-logo-slot.cc-img-left { margin-left: 0; margin-right: auto; }
.customer-logo-slot.cc-img-center { margin-left: auto; margin-right: auto; }
.customer-logo-slot.cc-img-right { margin-left: auto; margin-right: 0; }
.customer-logo-slot img.customer-logo { display: block; width: 100%; height: auto; max-width: 100%; }
/* No logo chosen: no placeholder text and no reserved height, on screen or in print. */
.customer-logo-slot:empty { display: none; }

/* Numbering section (a schedule whose clauses start at 1 again). */
.numbering-scope { display: block; margin-top: 2em; }
.numbering-scope-heading { text-align: center; margin-top: 0; margin-bottom: 1em; }

/* Explicit page break. In print and PDF it is a real break with no rule. */
hr.page-break { break-before: page; page-break-before: always; border: none; height: 0; margin: 0; }

@media screen {
  /* On screen the break is a labelled boundary. CSS-generated, so the label
     can never enter saved HTML, an export or a PDF. */
  hr.page-break { position: relative; height: auto; margin: 1.75em 0; border-top: 1px dashed #94a3b8; overflow: visible; }
  hr.page-break::after { content: "Page break"; position: absolute; top: -0.75em; left: 50%; transform: translateX(-50%); padding: 0 0.6em; background: #ffffff; color: #64748b; font: 600 0.7rem/1.5 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
  /* Template preview only: a clearly labelled stand-in for the customer's logo. */
  .customer-logo-slot.customer-logo-slot--preview { display: block; min-height: 3.5em; border: 1px dashed #94a3b8; border-radius: 6px; background: #f8fafc; }
  .customer-logo-slot--preview .customer-logo-placeholder { display: block; padding: 1em 0.75em; text-align: center; color: #64748b; font: 500 0.8rem/1.4 system-ui, sans-serif; text-indent: 0; }

  /* Template preview only: the renderer emits these branch markers in PREVIEW mode
     and never in a generated contract, so they cannot reach a document or a PDF.
     They must read as the preview's own annotations, not as contract wording. */
  .condition-marker, .loop-marker {
    display: block; margin: 1em 0 0.4em; padding: 0.2em 0.6em;
    border-left: 3px solid #6366f1; background: #eef2ff; color: #3730a3;
    font: 600 0.72rem/1.6 system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .condition-marker.condition-else, .loop-marker.loop-empty { border-left-color: #94a3b8; background: #f1f5f9; color: #475569; }
  .condition-block, .loop-block { border-left: 1px dashed #c7d2fe; padding-left: 0.9em; margin: 0.25em 0 0.75em; }
}