/* AiB Platform — paper documents: the invoice sheet and its BG requisites,
   the offer from /make-offer, the generated official document, and their
   print rules. */

.paper-stage { display: flex; justify-content: center; padding: clamp(16px, 3vh, 32px) 0; }
.paper {
  width: min(760px, 100%);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-paper);
  padding: clamp(28px, 4vw, 56px);
}
/* wraps on narrow paper: the mark keeps the first line, the doc type drops
   under it without pushing the sheet wide */
.paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 34px; }
.doc-type {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(26px, 4.5vw, 34px);
  letter-spacing: -0.02em;
  text-align: right;
}
.doc-meta { margin-top: 6px; text-align: right; color: var(--grey); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; }
.paper h3 { font-family: var(--font-display); font-weight: 640; font-size: 15px; margin: 0 0 8px; }
.paper .addr { color: var(--grey); font-size: 13.5px; line-height: 1.5; margin: 0; }
table.doc-items { width: 100%; border-collapse: collapse; margin: 28px 0 8px; }
table.doc-items th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 9px 10px;
  border-bottom: 1px solid var(--hairline-strong);
}
table.doc-items td { padding: 11px 10px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
table.doc-items .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-totals { margin-left: auto; width: min(300px, 100%); margin-top: 12px; }
.doc-totals .row { display: flex; justify-content: space-between; padding: 7px 10px; font-size: 13.5px; }
.doc-totals .row.grand { border-top: 1px solid var(--hairline-strong); font-weight: 600; margin-top: 4px; padding-top: 11px; }
/* ---------- invoice requisites (BG-standard paper) ---------- */
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.doc-parties .party-name { margin: 2px 0 6px; font-weight: 600; font-size: 14px; }
dl.req { margin: 0; }
dl.req > div { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.7; }
dl.req dt { color: var(--grey); min-width: 92px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding-top: 2px; }
dl.req dd { margin: 0; overflow-wrap: anywhere; }
.doc-parties .addr { margin-top: 6px; }
.doc-note { margin: 14px 0 0; color: var(--grey); font-size: 12.5px; }
.doc-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hairline); }
@media (max-width: 560px) { .doc-parties { grid-template-columns: 1fr; } }

/* ---------- the offer (from /make-offer) ---------- */
/* An editorial sheet: hanging headings on the left, content on the right,
   hairline rules between sections, mono only for labels and figures. The
   same partial renders on the staff page, the client's page, the public
   accept page and the PDF. */
.offer { width: min(860px, 100%); }
.offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; }
.offer-head .mark { font-size: 24px; }
.offer-meta { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; }
.offer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.offer-title {
  margin: 38px 0 10px;
  max-width: 620px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.offer-lead { margin: 0 0 28px; max-width: 620px; color: var(--grey-label); font-size: 15px; line-height: 1.6; }
.offer-sec {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 24px 0;
  border-top: 1px solid var(--hairline-strong);
}
.offer-sec > h2, .offer-sec > summary {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.offer-sec p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; }
.offer-sec h3 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 500; }
.offer-sec h3:first-child { margin-top: 0; }
.offer-sec ul { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
/* A collapsed section folds its body under the heading; print opens it. */
details.offer-sec { display: block; }
details.offer-sec > summary { cursor: pointer; list-style-position: outside; }
details.offer-sec > .offer-body { margin-top: 14px; }
.offer-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; font-size: 13px; line-height: 1.6; }
.offer-parties .offer-label { display: block; margin-bottom: 6px; }
.offer-figure { font-family: var(--font-mono); font-size: 12.5px; }
table.offer-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
table.offer-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--hairline-strong);
}
table.offer-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
/* Figures sit right in mono; only money refuses to wrap — a long phrase in a
   comparison or table column wraps like any text. */
table.offer-table .num { text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
table.offer-table .money { white-space: nowrap; }
table.offer-table tr.total td { font-weight: 500; border-bottom-color: var(--hairline-strong); }
/* The tier comparison: the attribute column, then equal columns per tier. */
table.offer-tiers { table-layout: fixed; }
table.offer-tiers th:first-child { width: 34%; }
table.offer-tiers th.is-chosen { color: var(--ink); }
.offer-note { margin: 0; color: var(--grey); font-size: 12.5px; }
.offer-accepted { margin: 0; padding-top: 22px; border-top: 1px solid var(--hairline-strong); font-size: 13.5px; }
.offer-colophon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
/* The offer page: the paper, and beside it the staff rail or the client's
   answer panel; the side column drops under the paper on narrow screens. */
.offer-page { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.offer-page > .paper { flex: 999 1 600px; min-width: 0; }
.offer-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.offer-side .card-title { margin-bottom: 12px; }
.offer-figures { margin: 0; }
.offer-figures > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.offer-figures dd { margin: 0; }
.offer-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.offer-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.offer-history .offer-figure { display: block; color: var(--grey); font-size: 11.5px; }
.tier-options { margin: 0 0 16px; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.tier-options legend { margin-bottom: 8px; }
.tier-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tier-option:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.tier-option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tier-option-name { font-weight: 500; font-size: 14px; }
.tier-option-summary { color: var(--grey); font-size: 12.5px; }
.offer-agree { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 6px; font-size: 13px; line-height: 1.5; }
.offer-agree input { margin-top: 3px; }
.offer-decline { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.offer-decline summary { cursor: pointer; color: var(--danger); font-size: 13px; }
.offer-decline form { margin-top: 12px; }

@media (max-width: 719px) {
  .offer-sec { grid-template-columns: 1fr; }
  .offer-sec > div, .offer-body { overflow-x: auto; }
  .offer-parties { grid-template-columns: 1fr; }
  .offer-meta { text-align: left; }
}
@media print {
  .offer-sec { break-inside: avoid-page; }
  details.offer-sec > summary { list-style: none; }
  details.offer-sec > summary::-webkit-details-marker { display: none; }
}

/* ---------- generated official document (document generator) ---------- */
/* The finished document as a paper sheet: serif, pre-wrap (templates carry
   their own line breaks), reads as print. */
.doc-sheet {
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: clamp(22px, 3vw, 40px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-x: auto;
}
/* The Print button stamps body.print-doc, prints, removes it — only the
   sheet is visible on paper (visibility, not display: the ancestor chain
   must keep its boxes). */
@media print {
  body.print-doc * { visibility: hidden; }
  body.print-doc .doc-sheet, body.print-doc .doc-sheet * { visibility: visible; }
  body.print-doc .doc-sheet {
    position: absolute; left: 0; top: 0; width: 100%;
    border: 0; background: var(--white); color: var(--print-ink);
  }
}