/* =====================================================================
   Agreements as a stamp-paper deed (js/core/bond.js): on screen inside a dialog or a public page, and printed.
   Plus the signature pads and the ID-proof tiles used wherever an agreement is signed.
   ===================================================================== */

.bond { --ink: #1b2430; --line: #b9c3cc; --stamp: #2f6b3a; --stamp-bg: #eef6ea; --seal: #5b3fb0;
    display: flex; flex-direction: column; gap: 18px; color: var(--ink);
    /* the format Indian courts prescribe for typed documents: Times New Roman, 1.5 line spacing, A4 */
    font-family: "Times New Roman", Times, "Liberation Serif", Tinos, serif; font-size: 14.5px; line-height: 1.5; }
.bond-page { position: relative; background: #fffdf6; border: 1px solid #d9d3c0; box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(20, 40, 60, 0.08);
    padding: 22px 30px 26px; border-radius: 4px; }
.bond-page::before { content: ""; position: absolute; inset: 8px; border: 1.5px double #c9bf9f; pointer-events: none; border-radius: 2px; }

/* the stamp band: a guilloche-like green panel with the value, as on a non-judicial stamp paper */
.bond-stamp { margin: -6px -10px 14px; }
.bond-stamp-band { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px 16px;
    border: 2px solid var(--stamp); border-radius: 6px; color: var(--stamp);
    background:
        repeating-radial-gradient(circle at 20% 50%, transparent 0 6px, rgba(47, 107, 58, 0.08) 6px 7px),
        repeating-radial-gradient(circle at 80% 50%, transparent 0 6px, rgba(47, 107, 58, 0.08) 6px 7px),
        repeating-linear-gradient(45deg, var(--stamp-bg) 0 4px, #f6fbf3 4px 8px); }
.bond-stamp-left b { display: block; font-size: 19px; letter-spacing: 0.12em; }
.bond-stamp-left small, .bond-stamp-right small { display: block; font-family: system-ui, sans-serif; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.bond-stamp-value { text-align: center; padding: 6px 18px; border: 1.5px dashed var(--stamp); border-radius: 50% / 40%; background: rgba(255, 255, 255, 0.7); }
.bond-stamp-value small { display: block; font-family: system-ui, sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; }
.bond-stamp-value b { display: block; font-size: 26px; line-height: 1.1; }
.bond-stamp-value em { display: block; font-size: 10.5px; }
.bond-stamp-right { text-align: right; }
.bond-stamp-right b { display: block; font-family: "Courier New", monospace; font-size: 14px; letter-spacing: 0.06em; }
.bond-stamp-note { margin: 6px 4px 0; font-family: system-ui, sans-serif; font-size: 10px; color: #5c6b5e; }
.bond-blank-top { height: 240px; margin: -6px -10px 14px; border: 1.5px dashed #c5c0ad; border-radius: 6px; display: grid; place-items: end center; padding: 8px;
    font-family: system-ui, sans-serif; font-size: 10px; color: #9b9480; }

.bond-title { margin: 6px 0 2px; text-align: center; font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.bond-no { margin: 0 0 12px; text-align: center; font-family: system-ui, sans-serif; font-size: 11px; color: #5f6b77; }
.bond-intro, .bond-sub, .bond-witness-line { font-size: 13.5px; line-height: 1.65; margin: 8px 0; text-align: justify; }
.bond-sub { font-weight: 700; }
.bond-parties { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 10px 0; }
.bond-parties > i { font-style: italic; color: #7a858f; }
.bond-party { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; min-width: 0; }
.bond-party small { font-family: system-ui, sans-serif; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #6c7884; }
.bond-party b { font-size: 15px; }
.bond-party span { font-size: 12px; color: #4b5560; }
.bond-facts { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.bond-facts th, .bond-facts td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.bond-facts th { width: 36%; background: #f6f3e8; font-weight: 600; font-family: system-ui, sans-serif; font-size: 11.5px; }
.bond-facts.ev td code, .bond-foot code { font-size: 10.5px; word-break: break-all; }
.bond-terms { margin: 6px 0 10px; padding-left: 22px; font-size: 13.5px; line-height: 1.65; text-align: justify; }
.bond-terms li { margin: 3px 0; }

.bond-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }
.bond-signs.one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bond-signbox { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bond-signspace { position: relative; height: 82px; display: flex; align-items: flex-end; }
.bond-signspace .bond-sign { width: 100%; max-width: 260px; height: 78px; }
.bond-seal-wrap { position: absolute; right: 4px; top: -10px; width: 92px; height: 92px; color: var(--seal); opacity: 0.85; transform: rotate(-12deg); mix-blend-mode: multiply; }
.bond-seal { width: 100%; height: 100%; }
.bond-signline { border-top: 1px solid var(--ink); padding-top: 3px; display: flex; flex-direction: column; }
.bond-signline b { font-size: 13px; }
.bond-signline small, .bond-signaddr { font-family: system-ui, sans-serif; font-size: 10.5px; color: #5f6b77; }
.bond-thumb { margin-top: 6px; width: 92px; height: 70px; border: 1px dashed #a3acb5; border-radius: 6px; display: grid; place-items: end center; padding: 3px;
    font-family: system-ui, sans-serif; font-size: 8.5px; color: #8b95a0; text-align: center; }
.bond-foot { margin: 16px 0 0; font-family: system-ui, sans-serif; font-size: 10px; color: #66727e; border-top: 1px dotted var(--line); padding-top: 6px; }

.bond-annex h2 { margin: 0 0 6px; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.bond-annex-note { margin: 0 0 8px; font-size: 12px; color: #4b5560; }
.bond-annex-imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bond-annex-imgs figure { margin: 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #fff; text-align: center; }
.bond-annex-imgs img { max-width: 100%; max-height: 300px; object-fit: contain; display: block; margin: 0 auto; }
.bond-annex-imgs figcaption { font-family: system-ui, sans-serif; font-size: 10.5px; color: #4b5560; margin-top: 4px; }
.bond-annex-imgs figcaption code { font-size: 9px; color: #7a858f; }
.bond-annex-pdf { padding: 40px 10px; font-family: system-ui, sans-serif; font-size: 12px; color: #4b5560; background: #f5f7f9; border-radius: 4px; }
.bond-annex-sign { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-end; }
.bond-annex-sign .bond-sign { width: 170px; height: 52px; }
.bond-annex-sign small { font-family: system-ui, sans-serif; font-size: 10px; color: #5f6b77; }

/* the deed inside a dialog: a scaled page you can scroll */
.bond-preview { max-height: 62vh; overflow: auto; padding: 12px; background: #e9ecef; border-radius: 10px; }
.bond-preview .bond { max-width: 780px; margin: 0 auto; }

/* printed: one page per section, the paper as it is */
.bond-print { margin: 0; background: #fff; }
/* the print window lays the deed out as it prints (172 mm of text, print sizes) so the stamp sheet can be fitted */
.bond-print .bond { width: 172mm; margin: 0 auto; gap: 0; font-size: 13pt; }
.bond-print .bond-page { box-shadow: none; border: 0; border-radius: 0; padding: 4mm 6mm; }
.bond-print .bond-terms, .bond-print .bond-intro, .bond-print .bond-sub, .bond-print .bond-witness-line { font-size: 13pt; }
.bond-print .bond.real .bond-page.first .bond-blank-top { height: 118mm; margin: 0; }
@page { size: A4; margin: 12mm; }
@media print {
    .bond { gap: 0; }
    .bond-page { box-shadow: none; border: 0; border-radius: 0; padding: 4mm 6mm; page-break-after: always; background: #fff; }
    .bond-page:last-child { page-break-after: auto; }
    .bond-page::before { inset: 0; }
    .bond-stamp-band, .bond-seal-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bond-preview { max-height: none; overflow: visible; background: none; padding: 0; }
}
@media (max-width: 640px) {
    .bond-page { padding: 16px 14px 18px; }
    .bond-stamp-band { grid-template-columns: 1fr; text-align: center; }
    .bond-stamp-right { text-align: center; }
    .bond-parties, .bond-signs, .bond-signs.one { grid-template-columns: minmax(0, 1fr); }
    .bond-parties > i { text-align: center; }
}

/* ---------------------------------------------------------------- signature pads */
.bond-pad { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bond-pad-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--text-secondary, #4b5560); }
.bond-pad-head small { font-weight: 500; color: var(--text-muted, #7a858f); }
.bond-pad-head button { margin-left: auto; border: 0; background: none; color: var(--ocean-600, #0b7cbd); font: inherit; font-size: 12px; cursor: pointer; }
.bond-pad canvas { width: 100%; aspect-ratio: 10 / 3; border: 1.5px dashed #9fb6c8; border-radius: 10px; background: #fbfdff; touch-action: none; cursor: crosshair; }

/* ---------------------------------------------------------------- ID proof tiles */
.kyc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kyc-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1.5px dashed #b8c7d4;
    background: #f8fbfd; min-height: 120px; min-width: 0; }
.kyc-tile.done { border-style: solid; border-color: #13a89a; background: #f2fbf9; }
.kyc-tile.need::after { content: "required"; position: absolute; top: 6px; right: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: #c0392b; letter-spacing: 0.05em; }
.kyc-tile.done.need::after { content: "✓"; color: #0b6f66; font-size: 13px; }
.kyc-tile b { font-size: 12.5px; }
.kyc-tile small { font-size: 10.5px; color: var(--text-muted, #7a858f); }
.kyc-tile img { width: 100%; height: 86px; object-fit: cover; border-radius: 8px; background: #fff; }
.kyc-tile .kyc-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.kyc-tile .kyc-acts button, .kyc-tile .kyc-acts label { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 6px; border-radius: 8px;
    border: 1px solid #c9d6e2; background: #fff; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--ocean-700, #0a5a8c); }
.kyc-tile .kyc-acts input[type=file] { display: none; }
.kyc-cam { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.kyc-cam video { width: 100%; max-width: 420px; border-radius: 14px; background: #000; transform: scaleX(-1); aspect-ratio: 4 / 3; object-fit: cover; }
.kyc-cam .kyc-frame { position: relative; width: 100%; max-width: 420px; }
.kyc-cam .kyc-frame::after { content: ""; position: absolute; inset: 12% 22%; border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: none; }

/* ---------------------------------------------------------------- the camera layer (selfie, a photo of a card) */
.kyc-layer { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(5, 20, 35, 0.72); padding: 16px; }
.kyc-cam-card { width: min(460px, 100%); padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.kyc-cam-tip { margin: 0; font-size: 13px; color: #4b5560; text-align: center; }
.kyc-cam-acts { display: flex; gap: 8px; justify-content: center; }
.kyc-cam .kyc-frame.card::after { inset: 14% 8%; border-radius: 12px; }
.kyc-cam .form-error { margin: 0; color: #c0392b; font-size: 12.5px; text-align: center; }
.kyc-cam .form-error:empty { display: none; }

/* the check of a digital signature (agreements, payment details): waiting, verified, does not match */
.cs-sig-status { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid; font-size: 12px; line-height: 1.45; }
.cs-sig-status b { font-size: 13px; }
.cs-sig-status code { font-size: 11px; font-weight: 700; }
.cs-sig-status.wait { background: #f2f7fb; border-color: #cfe0ee; color: #335b7a; }
.cs-sig-status.ok { background: #f0f8f3; border-color: rgba(12, 163, 12, 0.3); color: #0a6b2c; }
.cs-sig-status.ok small { color: #2d5a3c; }
.cs-sig-status.bad { background: #fdf1f1; border-color: #efb8b8; color: #a12828; }
.kyc-cam[hidden] { display: none; }
.kyc-tile.need > b { padding-right: 58px; }
.kyc-tile.done.need > b { padding-right: 18px; }

/* ---------------------------------------------------------------- the stamp-paper style sheet: green, as non-judicial paper */
.bond-sheet { --sp: #1f5f33; --sp-soft: #4f8a5c; margin: -6px -10px 14px; }
.bond-sheet-frame { position: relative; padding: 10px 14px 8px; border: 3px double var(--sp); border-radius: 4px; color: var(--sp); overflow: hidden;
    background:
        repeating-radial-gradient(circle at 50% 120%, transparent 0 9px, rgba(31, 95, 51, 0.07) 9px 10px),
        repeating-linear-gradient(115deg, transparent 0 6px, rgba(79, 138, 92, 0.09) 6px 7px),
        repeating-linear-gradient(65deg, transparent 0 6px, rgba(79, 138, 92, 0.09) 6px 7px),
        linear-gradient(180deg, #f1f9ef, #e2f1df); }
.bond-sheet-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.bond-sheet-top b { text-align: center; font-size: 26px; letter-spacing: 0.32em; font-weight: 700; text-shadow: 0 1px 0 #fff; }
.bond-sheet-top .d, .bond-sheet-foot { font-size: 13px; font-weight: 700; }
.bond-sheet-top .d { padding: 2px 8px; border: 1.5px solid var(--sp); border-radius: 3px; background: #f8fdf6; }
.bond-sheet-mid { display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; gap: 12px; margin: 6px 0 4px; }
.bond-rosette { width: 96px; height: 96px; color: var(--sp); }
.bond-rosette circle { fill: #f8fdf6; }
.bond-sheet-value { text-align: center; padding: 6px 10px; border: 1.5px solid var(--sp); border-radius: 50% / 34%; background: rgba(248, 253, 246, 0.88); }
.bond-sheet-value small { display: block; font-size: 10px; letter-spacing: 0.3em; }
.bond-sheet-value b { display: block; font-size: 30px; line-height: 1.1; }
.bond-sheet-value em { display: block; font-style: normal; font-size: 11px; letter-spacing: 0.08em; font-weight: 700; }
.bond-sheet-micro { font-size: 5.5px; line-height: 1.2; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; color: var(--sp-soft); border-top: 1px solid rgba(31, 95, 51, 0.3);
    border-bottom: 1px solid rgba(31, 95, 51, 0.3); padding: 1px 0; }
.bond-sheet-foot { display: flex; justify-content: space-between; margin-top: 5px; }
.bond-sheet-foot .serial b { color: #c0141c; font-family: "Courier New", monospace; letter-spacing: 0.12em; font-size: 15px; }

/* every page: the parties' and the witness's initials at its foot */
.bond-initials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.bond-initials span { border-top: 1px solid #8a94a0; padding-top: 2px; text-align: center; font-family: system-ui, sans-serif; font-size: 9.5px; color: #6c7884; }

@media print {
    /* A4 and the stamp sheet share one text width (172 mm), so the deed reads the same on both */
    @page { size: A4; margin: 18mm 19mm 16mm; }
    /* real non-judicial stamp paper is legal size (8.5" x 14"); its top third is printed by the treasury */
    @page stampsheet { size: 216mm 356mm; margin: 0 22mm 16mm; }
    .bond { font-size: 13pt; line-height: 1.5; }
    .bond-terms, .bond-intro, .bond-sub, .bond-witness-line { font-size: 13pt; line-height: 1.5; }
    .bond-sheet-frame { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bond p, .bond li { orphans: 3; widows: 3; }
    /* nothing is cut in two: a clause, the parties, a row of figures, the signatures with the line above them */
    .bond-terms li, .bond-parties, .bond-party, .bond-facts tr, .bond-sheet, .bond-annex figure, .bond-annex-imgs, .bond-closing, .bond-signs, .bond-signbox { break-inside: avoid; page-break-inside: avoid; }
    .bond-title, .bond-sub, .bond-annex h2 { break-after: avoid; page-break-after: avoid; }
    .bond-closing { break-before: auto; }
    .bond.real .bond-page.first { page: stampsheet; }
    .bond.real .bond-page.first .bond-blank-top { height: 118mm; margin: 0; border: 0; }
    .bond.real .bond-page.first .bond-blank-top span { visibility: hidden; }
    .bond.real .bond-page.first::before { display: none; }
}

/* ID proof in the deed: a "for this agreement only" watermark over every copy, so a print cannot be reused for
   anything else; a file whose stored bytes no longer match the fingerprint is flagged in red */
.bond-annex-shot { position: relative; overflow: hidden; }
.bond-annex-wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    transform: rotate(-24deg); font: 700 13px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(176, 22, 30, .30); text-align: center; white-space: nowrap; }
.bond-annex-imgs figcaption small { color: #7a858f; }
.bond-annex-imgs figure.tampered { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198, 40, 40, .2); }
.bond-tamper { color: #c62828; font-weight: 700; }
@media print { .bond-annex-wm { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.kyc-seal { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 5px; border-radius: 999px; font-weight: 600; font-size: 10px; vertical-align: middle; }
.kyc-seal svg { width: 11px; height: 11px; }
.kyc-seal.ok { color: #1b7f4b; background: rgba(27, 127, 75, .1); }
.kyc-seal.bad { color: #c62828; background: rgba(198, 40, 40, .1); }

/* an ID card taken from a PDF: zoomed (the server cuts the blank margins), across the whole width, and on paper it
   always fits one A4 page whole: never cut off, never split */
.bond-annex-imgs figure.full { grid-column: 1 / -1; }
.bond-annex-imgs figure.full img { width: 100%; max-height: 900px; }
@media print {
    .bond-annex-imgs figure.full { break-inside: avoid; page-break-inside: avoid; }
    .bond-annex-imgs figure.full img { width: auto; max-width: 100%; max-height: 205mm; }
    .bond-annex-imgs figure.full + figure.full { break-before: page; page-break-before: always; }
    .bond-annex-imgs figure.full .bond-annex-wm { font-size: 20px; }
}

/* ---------------------------------------------------------------- the formal deed (preamble, clause headings) */
.bond-pre { margin: 6px 0; text-align: justify; font-size: 13.5px; line-height: 1.65; }
.bond-pre-c { margin: 6px 0; text-align: center; font-weight: 700; letter-spacing: 0.12em; font-size: 13.5px; }
.bond-cl-h { font-weight: 700; }
.bond-sign-lead { display: block; font-family: system-ui, sans-serif; font-size: 10px; color: #5f6b77; margin-bottom: 2px; }
.bond-annex-h { margin: 0 0 6px; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.bond-annex-h.cont { font-size: 12px; color: #5f6b77; }
.bond-facts.ev.cont { margin-top: -1px; }
.bond-fig { margin: 0; border: 1px solid var(--line, #b9c3cc); border-radius: 6px; padding: 6px; background: #fff; text-align: center; }
.bond-fig img { display: block; margin: 0 auto; }

/* ---------------------------------------------------------------- the print view (js/core/bond-print.js)
   Sheets of a fixed size, laid out before printing: what is on the screen is what prints. */
.bp-layer { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; background: #dfe5ea; font-family: system-ui, sans-serif; }
.bp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; background: #0a2e4f; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.bp-bar-title { display: flex; flex-direction: column; margin-right: 6px; }
.bp-bar-title b { font-size: 15px; }
.bp-bar-title small { font-size: 11px; color: #b9d5ea; }
.bp-bar label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #b9d5ea; }
.bp-bar select { min-width: 0; padding: 4px 6px; border-radius: 6px; border: 1px solid #3c6a8f; background: #fff; color: #10324f; font: inherit; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.bp-bar label.bp-check { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; text-transform: none; letter-spacing: 0; color: #fff; }
.bp-bar-acts { display: flex; gap: 6px; margin-left: auto; }
.bp-bar button { padding: 7px 12px; border-radius: 8px; border: 1px solid #3c6a8f; background: #12406a; color: #fff; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bp-bar button.primary { background: #13a89a; border-color: #13a89a; font-weight: 650; }
.bp-tip { margin: 0; padding: 6px 14px; font-size: 11.5px; color: #34495e; background: #eef3f7; border-bottom: 1px solid #cfd8e0; }
.bp-warn { color: #b3261e; }
.bp-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px 12px 40px; }
.bp-pages { width: max-content; margin: 0 auto; }

.bp-sheet { position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1b2430;
    margin: 0 auto 18px; box-shadow: 0 4px 18px rgba(10, 30, 50, 0.22); }
.bp-sheet.over { outline: 3px solid #e0a106; }
.bp-blank { position: absolute; left: 10mm; right: 10mm; top: 4mm; display: grid; place-items: end center; border: 1.5px dashed #c5c0ad; border-radius: 6px;
    padding: 6px; font-size: 10px; color: #9b9480; }
.bp-head { flex: none; height: 7mm; display: flex; justify-content: space-between; align-items: flex-start; font-size: 8.5pt; color: #6c7884;
    border-bottom: 0.3mm solid #c9bf9f; box-sizing: border-box; }
.bp-body { flex: none; overflow: hidden; padding-top: 2mm; box-sizing: border-box; font-family: "Times New Roman", Times, "Liberation Serif", Tinos, serif;
    font-size: var(--bp-pt, 12pt); line-height: var(--bp-lh, 1.5); color: #1b2430; }
.bp-measure { padding-top: 0; }
.bp-foot { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1mm; box-sizing: border-box; border-top: 0.3mm solid #c9bf9f; padding-top: 1.5mm; }
.bp-foot.plain { border-top: 0; }
.bp-pno { align-self: center; font-size: 8pt; color: #7a858f; }
.bp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6mm; }
.bp-sg { display: flex; flex-direction: column; min-width: 0; }
.bp-sg-ink { position: relative; height: 12mm; border-bottom: 0.3mm solid #8a94a0; display: flex; align-items: flex-end; }
.bp-sg-ink .bond-sign { width: auto; max-width: 70%; height: 11mm; }
.bp-seal { position: absolute; right: 0; bottom: -3mm; width: 15mm; height: 15mm; color: #5b3fb0; opacity: 0.85; transform: rotate(-12deg); }
.bp-sg small { font-size: 7.5pt; color: #6c7884; padding-top: 0.6mm; }

/* blocks: one paragraph, clause, table or image each; never cut in two (the view moves them whole) */
.bp-blk { position: relative; display: flow-root; padding-bottom: 0.45em; }
.bp-blk > :first-child { margin-top: 0 !important; }
.bp-blk > :last-child { margin-bottom: 0 !important; }
.bp-body .bond-intro, .bp-body .bond-sub, .bp-body .bond-witness-line, .bp-body .bond-pre, .bp-body .bond-pre-c, .bp-body .bond-terms {
    font-size: 1em; line-height: inherit; margin: 0; }
.bp-body .bond-terms { padding-left: 2em; text-align: justify; }
.bp-body .bond-terms li { margin: 0; }
.bp-body .bond-sub { font-weight: 700; }
.bp-body .bond-title { font-size: 1.4em; margin: 1mm 0 0; }
.bp-body .bond-no { margin: 0; font-size: 0.75em; }
.bp-body .bond-facts { margin: 0; font-size: 0.88em; }
.bp-body .bond-sheet { margin: 0; }
.bp-body .bond-parties { margin: 0; }
.bp-body .bond-signs { margin-top: 2mm; }
.bp-body .bond-foot { margin: 0; }
.bp-body .bond-annex-sign { margin-top: 0; }
.bp-body .bond-annex-h { margin: 0; font-size: 1.05em; }
.bp-body .bond-annex-note { margin: 1mm 0 0; font-size: 0.85em; }
.bp-body .bond-fig { margin: 0 auto; padding: 1.2mm; }
.bp-body .bond-fig figcaption { font-family: system-ui, sans-serif; font-size: 8pt; line-height: 1.35; color: #4b5560; margin-top: 1mm; }
.bp-body .bond-fig figcaption code { font-size: 7pt; color: #7a858f; }
.bp-body .bond-annex-wm { font-size: 4.2mm; }

/* the page-break handle, on the screen only */
.bp-brk { position: absolute; z-index: 2; top: -1px; right: 0; display: none; padding: 2px 8px; border-radius: 0 0 6px 6px; border: 0; background: #0b7cbd; color: #fff;
    font: 600 11px system-ui, sans-serif; cursor: pointer; }
.bp-brk.on { display: block; background: #b3261e; }
.bp-layer .bp-blk:hover { outline: 1px dashed #0b7cbd; outline-offset: 1px; }
.bp-layer .bp-blk:hover > .bp-brk { display: block; }

/* the window that prints: the sheets only, one per page, at their own size */
.bp-print .bp-sheet { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
.bp-print .bp-sheet:last-child { break-after: auto; page-break-after: auto; }
.bp-print .bp-blank { visibility: hidden; }
@media print {
    .bp-print .bp-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 700px) {
    .bp-bar { gap: 6px 8px; padding: 8px 10px; }
    .bp-bar label { flex: 1 1 40%; }
    .bp-bar select { width: 100%; }
    .bp-bar-acts { width: 100%; }
    .bp-bar-acts button { flex: 1; }
    .bp-tip { font-size: 10.5px; }
}
/* touch screens cannot hover: the page-break handles show on every block */
@media (hover: none) {
    .bp-layer .bp-blk > .bp-brk { display: block; opacity: 0.85; font-size: 10px; padding: 1px 6px; }
}

/* a tripartite deed: four signatures at the foot of each sheet */
.bp-strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; }