/* =========================================================
   Free House & Condo Lease Maker — what only this tool needs.
   Load ../base.css, then ../contract/contract.css (the lease document's look),
   then this file.
   ========================================================= */

.tlm-hint { margin-bottom: 12px; }

/* ---------- the standard clauses: one row each, edit in place ---------- */
.tlm-row { border-top: 1px solid var(--tbm-slate-200); padding: 12px 0; }
.tlm-row:first-of-type { border-top: 0; }
.tlm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tlm-use { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tbm-slate-900); }
.tlm-use input { width: 18px; height: 18px; accent-color: var(--tbm-brand-600); flex: none; }
.tlm-off .tlm-use { color: var(--tbm-slate-400); font-weight: 400; }
.tlm-badge { font-size: 12px; font-weight: 600; color: var(--tbm-brand-700); background: var(--tbm-brand-50); border-radius: 999px; padding: 2px 10px; }
.tlm-badge[hidden] { display: none; }
.tlm-badge-off { color: var(--tbm-slate-500); background: var(--tbm-slate-50); }
.tlm-link {
    font: inherit; font-size: 14px; font-weight: 600; color: var(--tbm-brand-700); background: none;
    border: 1px solid var(--tbm-brand-200); border-radius: 10px; padding: 6px 14px; cursor: pointer;
}
.tlm-link:hover { background: var(--tbm-brand-50); }
.tlm-link:focus-visible { outline: 2px solid var(--tbm-brand-500); outline-offset: 2px; }
.tlm-link[hidden] { display: none; }
.tlm-editor { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--tbm-slate-50); }
.tlm-editor .tbm-hint { margin: 0; }
.tlm-editor-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tlm-warn { margin: 0; font-size: 13px; color: var(--tbm-red-700); }
.tlm-warn[hidden] { display: none; }

/* ---------- the furniture list (form) ---------- */
.tlm-item { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 0.8fr) 46px; align-items: end; margin-bottom: 12px; }
.tlm-annex-actions { display: flex; flex-wrap: wrap; gap: 0 10px; }
@media (max-width: 480px) {
    .tlm-item { grid-template-columns: minmax(0, 1fr) 72px; }
    .tlm-item-cond { grid-column: 1 / 2; }
    .tlm-item .tbm-remove { grid-column: 2 / 3; }
}

/* ---------- the annex (document) ---------- */
.tlm-annex { margin-top: 36px; padding-top: 24px; border-top: 2px dashed var(--tbm-slate-200); }
.tlm-annex .tbm-lease-title { font-size: 16px; }
.tlm-annex-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.tlm-annex-table th, .tlm-annex-table td { border: 1px solid var(--tbm-slate-200); padding: 6px 8px; text-align: left; vertical-align: top; }
.tlm-annex-table th { background: var(--tbm-slate-50); font-weight: 600; }
.tlm-annex-table td:first-child, .tlm-annex-table th:first-child { width: 44px; text-align: center; }
.tlm-en-head { display: block; font-weight: 400; color: var(--tbm-slate-500); font-size: 12px; }

@media print {
    /* The closing words and the signatures stay together, never a signature page on its own. */
    .tbm-print-root .tlm-closing { break-inside: avoid; page-break-inside: avoid; }
    .tbm-print-root .tlm-annex { break-before: page; page-break-before: always; border-top: 0; margin-top: 0; padding-top: 0; }
    .tbm-print-root .tlm-annex-table tr { break-inside: avoid; page-break-inside: avoid; }
}