/* Proposal-only styling. Everything the proposal shares with the invoice and
   the contract — tokens, the sheet, letterhead, meta band, fields, parties,
   text blocks, the schedule card, totals, footer, editing affordances — lives
   in doc_core.css, which loads before this file. What's left here is the part
   of the document only a proposal has: its package cards, optional add-ons,
   event timeline, and the numbered section heads.

   Used by the vendor's editor (proposal_edit.html), the client-facing page
   (proposal_public.html) and the PDF (WeasyPrint renders proposal_public.html
   through core + this + doc_print.css + doc_pdf.css), so a proposal looks the
   same wherever it's rendered. */

/* Section visibility — the editor's sections panel and its per-section toggle
   set this native attribute directly on <section>; it round-trips through
   cloneNode/innerHTML with no extra bookkeeping. */
section[hidden] { display: none !important; }
section { border-bottom: 1px solid var(--rule); }
/* The letterhead section ends in the meta band, which bleeds to the edge of
   the sheet. This border stops at the content box, so it drew a hairline that
   ran out before the band it was sitting under did — the same mismatch the
   band's own border-bottom used to cause before it was dropped. The band is
   its own bottom edge; the section doesn't need to draw one. */
#s-letterhead, section:first-of-type { border-bottom: 0; }
/* Sections are hidden with the `hidden` attribute, not removed from the DOM
   (see section[hidden] above and proposal_editor.js's renumberSections), so
   whichever section is visually last isn't reliably :last-of-type — a vendor
   who excludes Timeline/Terms/Signature leaves Investment last on screen
   while it's still mid-DOM. Without this, that section keeps its
   divider-to-the-next-section hairline even though nothing follows it. */
section:not([hidden]):not(:has(~ section:not([hidden]))) { border-bottom: 0; }

/* ── Legacy letterhead (pre-redesign saved content) ──
   Proposals saved before the letterhead was rebuilt still carry .lh-meta in
   their snapshot, and nothing ever rewrites a saved document. New ones use
   .doc-type from doc_core.css. */
.lh-meta { text-align: right; font-size: 11.5px; color: var(--ink-mid); line-height: 1.7; }
.lh-meta b { color: var(--ink); font-weight: 500; }
.lh-status { margin-bottom: 6px; }
/* Same 640px point where doc_core.css stacks the letterhead into one column.
   Still right-aligned there, the status pill and email floated alone at the
   far edge under the vendor's name, unlike the contract and invoice, whose
   stacked headers read top to bottom from the left. */
@media (max-width: 640px) { .lh-meta { text-align: left; } }

/* ── Numbered section heads ── */
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
/* A one-line heading was breaking after every word in the PDF: as a flex item
   with an `auto` basis, WeasyPrint sized the h2 to its min-content width
   rather than the space available. Claiming the free space fixes both. */
.sec-head h2 { flex: 1 1 auto; min-width: 0; }
.sec-num { font-family: var(--font-serif); font-size: 12px; color: var(--brand); flex: none; padding-top: 2px; }
/* A lede belongs to the heading it answers, so it sits closer to it than the
   18px above buys. That 18px is the gap to a *block* of content (the package
   cards, the timeline), where it's right. Between two lines of type it reads
   as a rift, because the box gap isn't the gap you see: the h2's 25px line
   box and the lede's 22.5px one add ~11px of leading of their own on top of
   it, so 18px of margin lands as ~29px of visible air. Pulling the lede up
   10px puts the ink about 19px apart, which is the pairing readers expect.
   Adjacent-sibling + negative margin rather than `.sec-head:has(+ .lede)`
   on purpose: this file is also what WeasyPrint renders the PDF from, and a
   `:has()` it didn't support would silently tighten the web page while
   leaving the PDF at the old gap. */
.sec-head + .lede { margin-top: -10px; }
.lede.schedule-note { margin: 12px 0 0; }

/* ── Reference files from the inquiry ── */
.fact-files-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 8px; }
.fact-files-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fact-file {
  /* min-width: 0 — it's still a flex item of .fact-files-list even as
     display: inline-block (flex blockifies a child's outer display but
     doesn't remove it from the flex layout), and a flex item's default
     min-width: auto refuses to shrink below its content's natural width —
     which for nowrap text is the full untruncated string. That silently
     defeated max-width/ellipsis in WeasyPrint's PDF output (Chrome applies
     the same rule but happened to still truncate visually; WeasyPrint didn't). */
  display: inline-block; max-width: 190px; min-width: 0; vertical-align: top;
  font-size: 12px; color: var(--brand); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 6px; padding: 5px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fact-file:hover { background: var(--tint); }
.fact-file-ext {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .03em;
  color: var(--ink-light); background: var(--tint); border-radius: 4px; padding: 2px 5px;
  margin-right: 6px;
}

/* ── Package cards ──
   Block, not flex: WeasyPrint doesn't fragment flex containers across pages,
   so a flex .pkg-list forced the whole list to jump to the next page as one
   piece the moment it didn't fit, no matter what break-inside said on the
   cards inside it. Block boxes fragment normally, so margin stands in for
   the gap flex used to give free. */
.pkg-list { display: block; }
.package + .package, .pkg + .pkg { margin-top: 16px; }
/* No overflow:hidden here (it used to clip .package-head's corners to match) —
   the editor's per-package remove button sits just outside this box on
   purpose (see .package .rm-btn in proposal_edit.html), and overflow:hidden
   was clipping it. .package-head rounds its own top corners instead. */
.package, .pkg { border: 1px solid var(--brand); border-radius: 12px; box-shadow: 0 0 0 3px var(--tint); }
.package-head, .pkg-header { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 15px 18px; background: var(--tint); border-radius: 11px 11px 0 0; }
.package-head h3, .pkg-name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 0; }
.package-head .price, .pkg-price { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
.package-body, .pkg-body { padding: 15px 18px; }
.incl, .pkg-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.incl li, .pkg-items li { flex: 1 1 228px; position: relative; padding-left: 22px; font-size: 14px; }
.incl li::before, .pkg-items li::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 6px; border-left: 1.7px solid var(--brand); border-bottom: 1.7px solid var(--brand); transform: rotate(-45deg); }

/* ── Optional add-ons ── */
.addons { list-style: none; margin: 0; padding: 0; }
.addon { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--rule); }
.addon:last-child { border-bottom: 0; }
/* Box + tick come entirely from form-controls.css's shared checkbox (loaded
   after this file) — this used to redraw its own border/background/tick
   with a ::after, which rendered on top of the shared ::before tick and
   produced a doubled, crooked-looking checkmark when checked. */
.addon input[type="checkbox"] { margin-top: 2px; }
/* A saved, checked add-on's checkbox is replaced with this static glyph at
   save time (serialize()) — nothing resembling a live form control ever
   reaches the client page or a PDF. */
.addon-check { flex: none; margin-top: 2px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--brand); color: #fff; font-size: 11px; line-height: 1; }
.addon-copy { flex: 1; min-width: 0; }
.addon-copy b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.addon-copy span { font-size: 13px; color: var(--ink-mid); }
.addon-price { font-size: 14px; font-weight: 500; white-space: nowrap; }
/* Proposals saved before this element became a <span> still carry an <em>
   here, and DM Sans has no italic face — the engine synthesizes an oblique.
   The count was never emphasis; see _proposal_starter.html. */
#addon-count { font-style: normal; }

/* The proposal's grand total is the loudest figure in the set — it is the
   number the client is deciding on. Everything else about the row is
   doc_core.css's .tline.grand. */
.tline.grand b, .inv-row.grand .iv { font-size: 26px; }

/* ── Event timeline ── */
.tl, .timeline-list { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-item { position: relative; padding: 0 0 20px 44px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--sheet); border: 1.5px solid #c3cbd6; z-index: 1; }
.tl-item::after { content: ""; position: absolute; left: 8.5px; top: 14px; bottom: -4px; width: 2px; background: var(--rule); }
.tl-item:last-child::after { display: none; }
.tl-item.key::before { background: var(--brand); border-color: var(--brand); }
.tl-date { display: block; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--ink-mid); margin-bottom: 2px; }
.tl-item.key .tl-date { color: var(--brand); }
.tl-title { font-size: 13px; font-weight: 600; letter-spacing: -.005em; margin: 0 0 2px; }
.tl-desc { margin: 0; color: var(--ink-mid); font-size: 12.5px; line-height: 1.45; }

/* ── Acceptance / signature lines ── */
.sign-grid, .sig-grid { display: flex; flex-wrap: wrap; gap: 22px 34px; margin: 22px 0 24px; }
.sign, .sig-block { flex: 1 1 228px; min-width: 0; }
.sign label, .sig-role { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 7px; }
.sign-line, .sig-line { border-bottom: 1.5px solid #c3cbd6; padding-bottom: 7px; min-height: 34px; font-family: var(--font-serif); font-size: 18px; color: var(--ink-light); font-style: italic; }
.cta { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }

/* ── Legacy compat (pre-redesign saved content) ──
   Proposal.content is a frozen HTML snapshot and nothing ever rewrites one, so
   a proposal sent before the redesign still carries the old class names
   verbatim and keeps rendering through *this* file forever. Left alone it
   reaches the client as bare unstyled text: no package cards, no add-on table,
   no totals, no signature lines.

   What it must NOT do is come back looking like the old design. The client
   opening a proposal from last year should see the document this product
   makes today, so the retired names are aliased onto the current rules rather
   than given the retired rules back: `.pkg` is listed alongside `.package`,
   `.inv-row` alongside `.tline`, `.overview-grid` alongside `.facts`, and so
   on, here and in doc_core.css. That is the convention doc_core already
   follows for `.sec-label`, `.party-detail` and `.footer`, and it means the
   two can never drift apart.

   What is left below is only the shapes the current design has no name for,
   plus the places where the retired markup nests one level deeper than
   current markup does. Every selector names at least one retired class, so
   none of it can reach a proposal authored after the redesign. */

/* The retired band wraps its columns in .terms-grid, where current markup puts
   the flex row on .terms itself — so this .terms has to go back to being a
   plain band or doc_core's .terms rule lays the label out beside the columns. */
.terms.psection { display: block; }

/* Package tagline and price note: an extra line each, above and below the two
   the current card carries. */
.pkg-tagline { font-size: 13px; color: var(--ink-mid); margin-top: 3px; }
.pkg-price-area { text-align: right; }
.pkg-price-note { font-size: 11.5px; color: var(--ink-light); margin-top: 2px; }

/* Add-ons as a <table>, before they became the .addon list. Same ruled rows,
   same weights, through the markup that got saved. */
.alacarte-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.alacarte-table th {
  padding: 0 0 9px; text-align: left; border-bottom: 1px solid var(--rule);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light);
}
.alacarte-table th.right, .alacarte-table td.right { text-align: right; }
.alacarte-table td { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; vertical-align: top; }
.alacarte-table tbody tr:last-child td { border-bottom: 0; }
.alacarte-table td.muted { font-size: 13px; color: var(--ink-mid); }
.alacarte-table td.right { font-size: 14px; font-weight: 500; white-space: nowrap; }
.ac-name { font-weight: 600; letter-spacing: -.005em; }
.ac-desc { font-size: 13px; color: var(--ink-mid); margin-top: 2px; }

/* The totals sat in a 320px box pinned to the right margin. The current
   document runs them the full width of the band, like every other total. */
.investment-box { width: 100%; }

/* The greeting line that opened the old introduction ("Dear Renee,"). */
.intro-greeting { font-family: var(--font-serif); font-size: 18px; color: var(--ink); margin-bottom: 10px; }

/* The retired timeline puts a real .tl-dot element in each row; the current
   one draws the dot and its connecting rail as .tl-item pseudo-elements, which
   are already applying. Showing both gives every row two dots. */
.tl-dot { display: none; }

/* The caption under each signature rule; the current block has no equivalent. */
.sig-field-label { font-size: 11.5px; color: var(--ink-light); margin-top: 7px; }

/* ── Print ──
   The page box, and every component the three documents share, are handled by
   doc_print.css. What's left is the proposal's own type and pagination. */
@media print {
  /* Keep tints — engines drop them otherwise. */
  .package-head, .accept, .schedule-head, .terms-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* The head is a table on paper, not the flex row it is on screen.
     WeasyPrint measures a flex item's height at its *base* width and never
     re-measures it after growing it to fill the line. The h2's `auto` basis
     resolves to its min-content width (one word), so the engine measures a
     two-line heading, then widens it to the full column and keeps the
     two-line height: a 25px heading in a 50px box, with the spare half-line
     of dead air landing under the text. That is the rift between every
     section heading and its lede in the PDF — the margin below is right, the
     box above it is twice as tall as its own type. A table cell is measured
     at its used width, so the head is one line tall again. Same swap, same
     engine bug, as the meta band in doc_print.css. (Chrome 25.6px,
     WeasyPrint 50px before, 25px after.)

     `width: 100%` keeps the h2 claiming the rest of the column the way
     `flex: 1 1 auto` does on screen; the number cell shrinks to its digits
     (`width: 1%` + nowrap) and pays for the flex `gap` in padding, which
     table layout has no equivalent of. Cells align on their first baselines
     by default, which is what `align-items: baseline` gives above — so the
     screen's 2px optical nudge on the number would only add row height here,
     and is zeroed. */
  .sec-head { display: table; width: 100%; margin-bottom: 10pt; }
  .sec-head h2 { display: table-cell; }
  .sec-head .sec-num { display: table-cell; width: 1%; white-space: nowrap; padding: 0 9pt 0 0; font-size: 9pt; }
  /* Same correction as on screen, in the print block's own units — 10pt less
     4pt leaves the ~6pt gap that matches the 8px one above. */
  .sec-head + .lede { margin-top: -4pt; }
  .package-head h3 { font-size: 12pt; }
  .package-head .price { font-size: 12.5pt; }
  .incl li { font-size: 10pt; }
  .addon-copy b, .addon-price { font-size: 10.5pt; }
  .addon-copy span { font-size: 10pt; }
  .tline.grand b { font-size: 16pt; }
  .tl-date { font-size: 9.5pt; }
  .tl-title { font-size: 10.5pt; }
  .tl-desc { font-size: 9.5pt; }
  .sign label { font-size: 8pt; letter-spacing: .09em; }
  .sign-line { font-size: 14pt; }

  /* Pagination. */
  section { break-inside: auto; }
  .sec-head, h1, h2 { break-after: avoid; }
  .schedule, .term, .tl-item, .srow, .addon, .sign-grid, .facts { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  .package { box-shadow: none; }
}