/* =========================================================
   Free Contract Maker — what only the lease needs.
   The shared look (tokens, form, buttons, print, invitation) is in
   ../base.css, which the page must load FIRST.
   ========================================================= */

.tbm-lease { font-size: 14px; color: var(--tbm-slate-900); }
.tbm-lease-title {
    margin: 0 0 20px; text-align: center; font-size: 18px; font-weight: 700;
    color: var(--tbm-slate-900); border-bottom: 2px solid var(--tbm-brand-600); padding-bottom: 12px;
}

/* Thai is the binding half, so it leads; English follows in a lighter tone. */
.tbm-th { margin: 0 0 4px; line-height: 1.7; }
.tbm-en { margin: 0 0 4px; line-height: 1.6; color: var(--tbm-slate-500); font-size: 13px; }
.tbm-parties { margin-bottom: 16px; }
.tbm-clause { margin-bottom: 14px; }
.tbm-clause:last-of-type { margin-bottom: 0; }

/* A filled-in answer stands out from the lease's own words; an empty one is a
   dotted line somebody can write on. */
.tbm-filled { font-weight: 700; color: var(--tbm-brand-700); }
.tbm-blank { color: var(--tbm-slate-400); letter-spacing: 1px; }

.tbm-bank-line {
    margin: 16px 0 0; padding: 12px 16px; border-radius: 12px;
    background: var(--tbm-slate-50); border: 1px solid var(--tbm-slate-200); font-size: 13px;
}

.tbm-blank-hint { margin-top: 10px; text-align: center; }

/* ---------- printing a multi-page lease ---------- */
@media print {
    .tbm-print-root .tbm-lease { font-size: 12px; }
    .tbm-print-root .tbm-en { color: #475569; }
    /* Never split a clause or the bank line across two pages (signatures: base.css). */
    .tbm-print-root .tbm-clause,
    .tbm-print-root .tbm-parties,
    .tbm-print-root .tbm-bank-line { break-inside: avoid; page-break-inside: avoid; }
    .tbm-print-root .tbm-lease-title { break-after: avoid; page-break-after: avoid; }
    .tbm-print-root .tbm-filled { color: #000; }
    .tbm-print-root .tbm-blank { color: #64748b; }
}

/* ---------- the owner's own terms (form) ---------- */
.tbm-clauses-hint { margin-bottom: 12px; }
.tbm-clause-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 12px; align-items: start; margin-bottom: 16px; }
.tbm-clause-boxes { display: grid; gap: 12px; }
.tbm-clause-row .tbm-remove { margin-top: 27px; }