/* Condition report form (condition-form.js) — shared by the tenant portal and the landlord's common-areas page. Sized for thumbs on a phone. */
.cr-section { font-family: var(--font-heading); font-weight: 500; font-size: 1.05rem; margin: 1.2rem 0 0.2rem; }
.cr-item { border-top: 1px solid var(--rule); padding: 0.8rem 0; min-width: 0; overflow-wrap: anywhere; } /* a long word or pasted link wraps instead of widening the page */
.cr-label { font-weight: 600; margin-bottom: 0.45rem; }
.cr-status { font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); margin-left: 0.3rem; }
.cr-status.err { color: #b3261e; }
.rating-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.3rem; }
.rating-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 7rem)); }
button.rating {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-height: 3rem; padding: 0.35rem 0.1rem;
  border-radius: 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); font-weight: 600;
}
button.rating .code { font-size: 1rem; }
button.rating { overflow: hidden; }
button.rating .word { font-size: 0.58rem; font-weight: 400; color: var(--ink-soft); line-height: 1.1; text-align: center; white-space: nowrap; overflow-wrap: normal; }
/* Smallest phones (iPhone SE/mini): the words don't fit — show just the letters (the ratings key explains them). */
@media (max-width: 370px) { button.rating .word { display: none; } button.rating { min-height: 2.6rem; justify-content: center; } }
button.rating.selected { background: var(--accent-strong); color: var(--paper); border-color: var(--accent-strong); }
button.rating.selected .word { color: var(--paper); }
button.rating:hover { filter: none; background: var(--panel); }
button.rating.selected:hover { background: var(--accent-strong); }
/* 16px text in boxes: anything smaller makes iPhone Safari zoom the whole page in when you tap a box. */
.cr-item textarea, .cr-item input.answer {
  width: 100%; margin-top: 0.45rem; padding: 0.45rem 0.6rem; font: inherit; font-size: 16px; line-height: 1.35;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink);
}
/* Text boxes grow with what's typed (condition-form.js), up to about 4 lines, then scroll inside themselves. */
.cr-item textarea { resize: none; overflow-y: auto; max-height: calc(4 * 1.35em + 0.9rem); }
.cr-item input.answer { width: 6rem; }
/* Long read-only notes show 2 lines with "…more" to expand. */
.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.clamp.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
button.more-toggle { background: none; border: none; padding: 0.1rem 0; color: var(--accent-strong); font-size: 0.8rem; font-weight: 600; border-radius: 0; }
button.more-toggle:hover { filter: none; text-decoration: underline; }
.photos { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; align-items: center; }
.thumb { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 6px; overflow: hidden; background: var(--panel); border: 1px solid var(--rule); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-del { position: absolute; top: 2px; right: 2px; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; background: rgba(0,0,0,0.6); color: #fff; }
.add-photo { flex-direction: row; display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 0.9rem; border: 1px dashed var(--rule); border-radius: 8px; color: var(--ink); font-size: 0.88rem; cursor: pointer; }
details.legend { font-size: 0.85rem; margin: 0.5rem 0; }
details.legend summary { cursor: pointer; color: var(--ink-soft); }
details.legend ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.cr-submit { border-top: 1px solid var(--rule); margin-top: 0.5rem; padding-top: 0.6rem; }
.cr-submit ul.missing { margin: 0.2rem 0 0.8rem; padding-left: 1.1rem; font-size: 0.88rem; }
.cr-submit ul.missing a { color: var(--accent-strong); }
.landlord-record { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.88rem; }
.landlord-record .flabel, .cr-summary .flabel { display: inline-block; width: auto; margin-right: 0.4rem; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); }
.landlord-record .photos { margin-top: 0.4rem; }
/* Landlord review comment under an item (tenant sees it once the landlord has signed). */
.landlord-comment { border-left: 3px solid var(--accent-strong); padding: 0.1rem 0 0.1rem 0.55rem; margin-top: 0.45rem; font-size: 0.88rem; }
.landlord-comment .flabel { display: inline-block; width: auto; margin-right: 0.4rem; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-strong); }
.sign-done { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.6rem 0; font-size: 0.9rem; }
.sign-done .fingerprint, .sign-panel .consent { overflow-wrap: anywhere; }
/* Section headings stay pinned at the top while scrolling through a section; tap to fold it away. */
.cr-section { position: sticky; top: 0; z-index: 2; background: var(--paper); margin: 1rem 0 0.2rem; padding: 0.15rem 0; border-bottom: 1px solid var(--rule); }
button.cr-sec-toggle {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.4rem; width: 100%; min-height: 2.4rem; cursor: pointer;
  font-family: var(--font-heading); font-weight: 500; font-size: 1.05rem; color: var(--ink);
}
button.cr-sec-toggle:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.cr-sec-arrow { color: var(--accent-strong); width: 1rem; display: inline-block; }