/* ── TCR PM only ───────────────────────────────────────────────────────── Every rule is scoped to , and this file loads AFTER css/styles.css, so these overrides apply to the TCR PM tool ONLY. The other SkyHub tools (ATM PM especially) are never affected: their has no tcr-app class, so none of this matches them. Purpose: make the checklist lines read as obvious tap-to-complete controls (JJ feedback 2026-09-09). */ /* The checklist lives in a multi-column grid (#survey-fields-container) where only .field-block items span all columns. The instruction banner, the section banners, and the section sub-note are not field-blocks, so without this they would drop into single grid cells and pack into a row. Span them full width so they read as proper stacked banners (also addresses "widen it out"). */ .tcr-app .checklist-hint, .tcr-app .form-section-header, .tcr-app .form-section-note { grid-column: 1 / -1; } /* One-time instruction so it is obvious the lines are tap-to-complete. */ .tcr-app .checklist-hint { display: flex; align-items: center; gap: 8px; background: var(--gray-100, #f1f3f7); border: 1px solid var(--gray-200); border-left: 4px solid var(--brand); color: var(--gray-700); font-size: 0.9rem; line-height: 1.35; padding: 10px 12px; border-radius: 8px; margin: 4px 0 14px; } /* Lighter sub-note under a section banner (e.g. the manufacturer guideline), so a long instruction no longer has to live inside the navy banner. */ .tcr-app .form-section-note { font-size: 0.85rem; color: var(--gray-700); font-style: italic; line-height: 1.35; margin: -2px 0 8px; padding: 0 2px; } /* Each checklist line becomes an obvious, tappable card. */ .tcr-app .field-type-checkitem { position: relative; border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #fff; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .tcr-app .field-type-checkitem .field-label { cursor: pointer; margin-bottom: 8px; } /* Status chip: FLOATED right (not absolute) so the label text always wraps AROUND it and can never run into it, at any screen width or font size. */ .tcr-app .field-type-checkitem .field-label::before { content: "Tap to complete"; float: right; margin: 0 0 4px 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; color: var(--navy); opacity: 0.55; } /* Completed line: green wash + border + "Done" chip, so progress reads at a glance. */ .tcr-app .field-type-checkitem.is-checked { background: var(--green-light); border-color: var(--green); } .tcr-app .field-type-checkitem.is-checked .field-label::before { content: "\2713 Done"; color: var(--green); opacity: 1; } /* Bigger, clearly-an-empty-checkbox box. */ .tcr-app .checkitem-row { gap: 12px; align-items: center; } .tcr-app .checkitem-box { width: 32px; height: 32px; border-width: 2px; border-color: var(--navy); }