/* The firm map: trades page, firm account, homeowners' map, firm profile and review screen.
   Sizes in rem so text grows with the reader's setting; every control at least 44px tall. */
.firms-shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 110px 0 72px; overflow-wrap: anywhere; }
.account.firms-shell, .admin.firms-shell { width: min(880px, calc(100% - 32px)); }
.firms-shell [hidden], .guide-shell [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.firms-shell h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.12; margin: 0.5rem 0 1rem; }
.firms-shell h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.22; margin: 0 0 0.75rem; }
.firms-shell h3 { font-size: 1.125rem; margin: 1.25rem 0 0.5rem; }
.firms-shell p, .firms-shell li { line-height: 1.6; color: var(--body); }
.firms-shell a:not(.button) { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.sample-note { margin: 0 0 1.25rem; padding: 0.875rem 1rem; border: 2px dashed #b25d00; border-radius: 12px; background: #fff6e8; color: #5a3200; font-size: 0.9375rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Links and buttons that look like links */
.link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; border: 0; background: none; color: var(--teal); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.button-danger { color: #fff; background: #a3261b; border: 0; }
.button-outline { width: auto; }
button.button { border: 0; font-family: inherit; cursor: pointer; }
button.button-outline { border: 1px solid var(--border); }
.button:disabled { opacity: 0.6; cursor: progress; transform: none; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* --- forms --- */
.stack-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 34rem; margin: 0 0 1.25rem; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; margin: 0 0 1rem; min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.stack-form .field { margin: 0; }
.field label, .label-like, fieldset.field legend, .pick-legend { color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.4; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.field-hint { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url], .field input[type=number], .field input[type=date], .field input[type=search],
.field input[type=password], .field select, .field textarea, .password-wrap input {
  width: 100%; min-height: 48px; padding: 0.625rem 0.75rem; border: 1px solid #8b958f; border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input[aria-invalid=true], .field select[aria-invalid=true], .field textarea[aria-invalid=true] { border: 2px solid #a3261b; }
.field-error, .form-error { margin: 0; color: #a3261b; font-size: 0.9375rem; font-weight: 700; line-height: 1.45; }
.form-error { padding: 0.75rem 0.875rem; border-left: 4px solid #a3261b; background: #fbecea; }
.code-input { max-width: 12rem; letter-spacing: 0.2em; font-size: 1.25rem !important; }
.password-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.password-wrap input { flex: 1 1 12rem; min-width: 0; }
.show-password { flex: 0 0 auto; min-width: 4.5rem; min-height: 48px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.choice { display: flex; align-items: flex-start; gap: 0.625rem; min-height: 44px; padding: 0.375rem 0; }
.choice input { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; margin: 0.125rem 0 0; accent-color: var(--teal); }
.choice label { flex: 1 1 auto; min-width: 0; font-weight: 500; line-height: 1.5; cursor: pointer; }
.yesno { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-button { width: fit-content; cursor: pointer; }
.file-input:focus-visible + .upload-progress, .file-button:focus-within { outline: 3px solid var(--teal); }
.field:focus-within > .file-button { outline: 3px solid var(--teal); outline-offset: 3px; }
.upload-progress { margin: 0.25rem 0; color: var(--muted); font-size: 0.9375rem; }
progress { width: 100%; max-width: 20rem; height: 0.75rem; accent-color: var(--teal); }
.switch-view, .resend-line { margin: 0.25rem 0; }
.char-count { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* --- the trades page --- */
.offer-box { margin: 1.5rem 0 0; padding: 1.5rem; border: 1px solid var(--teal); border-radius: 18px; background: #e7eee8; }
.offer-box h2 { margin: 0 0 0.5rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; }
.offer-box p { margin: 0 0 0.75rem; }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.check-list { padding-left: 1.25rem; }
.check-list li { margin: 0.75rem 0; }
.check-why { color: var(--body); }
.check-need { color: var(--muted); font-size: 0.9375rem; }
.check-source { margin-left: 0.25rem; font-size: 0.9375rem; }
.example-listing { margin: 1.5rem 0; max-width: 34rem; }
.example-listing > figcaption { display: inline-block; margin-bottom: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: #fff3d6; color: #5a3200; font-size: 0.875rem; font-weight: 800; }
.fake-link { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.trade-needs-tool { display: grid; gap: 1.25rem; margin: 1rem 0 1.5rem; }
@media (min-width: 760px) { .trade-needs-tool { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } .trade-needs-tool .needs-panel { position: sticky; top: 88px; } }
.needs-panel { padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; font-size: 1rem; line-height: 1.6; }
.needs-panel h3 { margin-top: 0; }
.needs-panel ul { padding-left: 1.25rem; margin: 0.25rem 0 0.75rem; }
.needs-panel li { margin: 0.375rem 0; }
.needs-empty { margin: 0; color: var(--muted); }
.every-trade { margin: 1rem 0; padding: 0.25rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.every-trade summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.every-trade li { font-size: 0.9375rem; }
.how-steps li { margin: 0.75rem 0; }
.source-list { font-size: 0.9375rem; }

/* The trade picker */
.trade-picker { min-width: 0; margin-bottom: 1rem; }
.pick-search { max-width: 26rem; margin-top: 0.75rem; }
.pick-count { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9375rem; min-height: 1.5em; }
.pick-groups { display: grid; gap: 0.75rem; max-height: 28rem; overflow-y: auto; padding: 0.25rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.pick-group { margin: 0; padding: 0.5rem 0.75rem; border: 0; min-width: 0; }
.pick-group legend { padding: 0; color: var(--teal); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pick-group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0 1rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.pick-item { display: flex; align-items: center; gap: 0.625rem; min-height: 44px; margin: 0; }
.pick-item input { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--teal); }
.pick-item label { flex: 1 1 auto; min-width: 0; padding: 0.5rem 0; font-weight: 500; line-height: 1.35; cursor: pointer; }
.pick-item.filtered-out, .pick-group.filtered-out { display: none; }
.pick-none { color: var(--muted); }

/* --- the listing card (shared by the map, the profile, the preview and the trades page) --- */
.firm-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.firm-card:hover, .firm-card:focus-within, .firm-card.flash { border-color: var(--teal); box-shadow: 0 8px 22px rgba(11, 23, 29, .1); }
.card-body { padding: 0.875rem 1rem 1rem; }
.firm-card-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.firm-card-name { margin: 0 !important; font-size: 1.25rem !important; line-height: 1.3; }
.firm-card-meta { margin: 0.125rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.firm-number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border-radius: 999px; background: var(--teal); color: #fff; font-weight: 800; font-size: 0.9375rem; }
.firm-logo { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.firm-logo-large { width: 6rem; height: 6rem; }
.firm-card-trades { margin: 0.75rem 0 0.25rem; color: var(--text); font-weight: 700; }
.firm-card-area { margin: 0 0 0.5rem; }
.firm-card .firm-contact, .firm-profile .firm-contact, .firm-contact { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.firm-card .firm-contact li, .firm-contact li { margin: 0; }
.firm-contact a, .firm-contact .fake-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.firm-checks-title { margin: 0.5rem 0 0.25rem; color: var(--text); font-weight: 800; font-size: 0.9375rem; }
.firm-card .firm-checks, .firm-profile .firm-checks, .firm-checks { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.firm-card .firm-checks li, .firm-profile .firm-checks li, .firm-checks li { position: relative; margin: 0.375rem 0; padding-left: 1.625rem; font-size: 0.9375rem; line-height: 1.5; }
.firm-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 900; }
.firm-card-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0.25rem 0 0; }
.firm-card-links a, .firm-card-links .fake-link { display: inline-flex; align-items: center; min-height: 44px; }
.firm-profile-link { font-weight: 800; }
.firm-report { font-size: 0.875rem; }
.firm-disclaimer { color: var(--muted); font-size: 0.9375rem; }

/* --- the homeowners' map --- */
.map-lede { max-width: 44rem; font-size: 1.125rem; }
.firm-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: start; gap: 0 1rem; margin: 1.5rem 0 0.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 18px; background: #fff; }
.firm-search .field { margin-bottom: 0.5rem; }
.search-go { padding-top: 1.875rem; }
.search-go .button { min-width: 9rem; }
.privacy-line { grid-column: 1 / -1; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); max-height: 20rem; overflow-y: auto; padding: 0.25rem 0; border: 1px solid #8b958f; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(11, 23, 29, .14); }
.combo-group { padding: 0.5rem 0.75rem 0.25rem; color: var(--teal); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.combo-option { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; padding: 0.5rem 0.75rem; color: var(--text); line-height: 1.35; cursor: pointer; }
.combo-option[aria-selected=true], .combo-option:hover { background: #e7eee8; }
.combo-option[aria-selected=true] { box-shadow: inset 4px 0 0 var(--teal); }
.combo-sub { color: var(--muted); }
.job-field .combo, .job-label-js { display: none; }
.job-field.enhanced .combo { display: block; }
.job-field.enhanced .job-label-js { display: block; }
.job-field.enhanced .job-label-plain, .job-field.enhanced select { display: none; }
.map-uk { fill: #f8f6f0; stroke: #45545b; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.map-other { fill: #e6e9e6; stroke: #a5afb0; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.pin circle { fill: var(--teal); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pin text { fill: #fff; font-weight: 800; font-family: inherit; pointer-events: none; }
.pin-home { fill: none; stroke: #b25d00; stroke-width: 3; vector-effect: non-scaling-stroke; }
.map-label { fill: #0b171d; font-weight: 700; font-family: inherit; paint-order: stroke; stroke: #f8f6f0; stroke-width: 0.2em; stroke-linejoin: round; pointer-events: none; }
.map-label-home { fill: #7a3e00; }
.pin text.map-label { fill: #0b171d; font-weight: 700; }
.map-scale { fill: none; stroke: #0b171d; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-tip { margin: 0.375rem 0.25rem 0; color: var(--muted); font-size: 0.875rem; }
.results h2:focus { outline: none; }
.results-summary { margin: 0 0 1rem; }
.firm-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.firm-list > li { margin: 0; }
.place-choices { display: grid; gap: 0.5rem; margin: 0.75rem 0; padding: 0; list-style: none; }
.place-choices .button { width: 100%; justify-content: flex-start; text-align: left; }
.trades-link { font-size: 0.9375rem; }
.map-attribution { margin-top: 1.5rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }

/* --- a firm's profile --- */
.profile-page { max-width: 880px; }
.firm-profile-head { display: flex; align-items: center; gap: 1rem; }
.firm-profile-sub { margin-top: 1.5rem !important; }
.firm-description { white-space: pre-line; font-size: 1.0625rem; }
.firm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; margin: 1rem 0; padding: 0; list-style: none; }
.firm-photos figure { margin: 0; }
.firm-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--navy-2); }
.firm-photos figcaption { margin-top: 0.375rem; color: var(--muted); font-size: 0.9375rem; }
.back-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- the firm's dashboard --- */
.view-loading { min-height: 50vh; }
.dash-head { margin-bottom: 1rem; }
.status-line { margin: 0 0 0.5rem; padding: 0.875rem 1rem; border-radius: 12px; background: #e7eee8; color: var(--text) !important; font-size: 1.0625rem; font-weight: 700; }
.status-message { padding: 0.75rem 1rem; border-left: 4px solid #b25d00; background: #fff6e8; }
.dash-saved { min-height: 1.6em; margin: 0; color: var(--muted); font-size: 0.9375rem; }
.listed-note { font-weight: 600; }
.profile-steps { margin: 1rem 0 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
/* Round 8 (Mark): the steps read down each column, in order, never across rows. */
.profile-steps ol { columns: 2 16rem; column-gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.profile-steps li { margin: 0; break-inside: avoid; }
.profile-steps a { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--text) !important; text-decoration: none !important; font-weight: 700; }
.profile-steps a::before { content: ""; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border: 2px solid #8b958f; border-radius: 999px; }
.profile-steps li.done a::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; border-color: var(--teal); background: var(--teal); color: #fff; font-size: 0.8125rem; }
.dash-section { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.dash-section .field { max-width: 34rem; }
.section-empty { color: var(--muted); }
.reg-item, .ins-item { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--navy); }
.reg-item h3, .ins-item h3 { margin-top: 0; }
.reg-why { margin: 0 0 0.5rem; }
/* Round 9: why a check is needed (Joanne), the badges folded under "Add another badge" (Joanne), the company's name back
   from Companies House (Mark). */
.reg-because { margin: 0 0 0.5rem; color: var(--text); font-weight: 700; }
.more-badges { margin: 0 0 1rem; }
.more-badges > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-weight: 800; cursor: pointer; list-style: none; }
.more-badges > summary::-webkit-details-marker { display: none; }
.more-badges > summary::before { content: ""; width: 0.5rem; height: 0.5rem; margin: 0 0.625rem 0 0.125rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.more-badges[open] > summary::before { transform: rotate(45deg); }
.more-badges[open] > summary { margin-bottom: 0.5rem; }
.company-found { margin: -0.25rem 0 1rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #e7eee8; color: #0b4a3e; font-weight: 700; overflow-wrap: anywhere; }
.question { margin: 0 0 0.75rem; padding: 0; border: 0; }
.question legend { font-weight: 700; color: var(--text); line-height: 1.45; padding: 0; }
.cert-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0.25rem 0; }
.logo-box { margin: 0.25rem 0; }
.logo-box img { width: 6rem; height: 6rem; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.photo-list li { display: grid; gap: 0.375rem; padding: 0.625rem; border: 1px solid var(--border); border-radius: 12px; background: var(--navy); }
.photo-list img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.photo-list .field { margin: 0; }
.show-choice { margin: -0.5rem 0 1rem; }
.remove-note, .remove-line { margin: 0; color: var(--teal); font-weight: 700; }
.preview-card { max-width: 34rem; margin-bottom: 1.25rem; }   /* "Your profile page" below reads as its own heading, not the card's */
.preview-label { margin-top: 0 !important; }
.preview-profile-wrap { margin-top: 1rem; }
.preview-profile-wrap summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.preview-profile { padding: 1rem; border: 1px dashed var(--border); border-radius: 12px; }
.sent-box { padding: 1rem; border-radius: 12px; background: #e7eee8; }
.sent-box:focus { outline: 3px solid var(--teal); }
.missing-list li a { display: inline-flex; align-items: center; min-height: 44px; }
.danger-zone { margin-top: 1.5rem; padding: 1rem; border: 1px solid #e3b4ae; border-radius: 12px; background: #fdf3f1; }
.danger-zone h3 { margin-top: 0; }
.settings-done { min-height: 1.6em; color: var(--teal); font-weight: 700; }

/* --- the review screen --- */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.qr-box img { width: 12.5rem; height: 12.5rem; padding: 0.5rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.secret { padding: 0.125rem 0.375rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; word-break: break-all; font-size: 1rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.tabs [role=tab] { min-height: 44px; padding: 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.tabs [role=tab][aria-selected=true] { border-color: var(--teal); background: var(--teal); color: #fff; }
.queue { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.queue li { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.queue .open-firm { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-size: 1.125rem; font-weight: 800; text-decoration: underline; cursor: pointer; text-align: left; }
.queue-meta { margin: 0.125rem 0 0; color: var(--muted); font-size: 0.9375rem; }
/* Flags graded by severity: blocker (red), check (amber), note (grey); the word in front says it too, not only the colour */
.flags { display: grid; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.flags li, .flag { display: block; margin: 0; padding: 0.375rem 0.625rem; border-left: 4px solid #b3261e; border-radius: 6px; background: #fbecea; color: #5c140e; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.flags li.flag-check, .flag.flag-check { border-left-color: #b25d00; background: #fff3d6; color: #4a2a00; }
/* "No problems found" reads as good news, not with a blocker's red edge (round 10). */
.flag.ok-flag { border-left-color: #2e7d4f; }
.flags li.flag-info, .flag.flag-info { border-left-color: #8b958f; background: #f1f3f1; color: var(--text); font-weight: 500; }
.flag-sev { font-weight: 800; }
.item-status { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-radius: 8px; background: #e7eee8; color: #0b4a3e; font-weight: 700; }
.item-status.is-problem { background: #fbecea; color: #7a1d14; }
.problem-picker { margin: 0.5rem 0 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.problem-picker legend { font-weight: 800; }
.email-preview { margin: 0.75rem 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.email-preview-title { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.875rem; font-weight: 700; }
.email-subject { margin: 0 0 0.5rem; font-weight: 800; }
.email-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.9375rem; }
.queue-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1.5rem; margin: 0 0 0.75rem; }
.queue-tools .field { flex: 1 1 18rem; margin: 0; }
.queue-count { margin: 0 0 0.5rem; color: var(--muted); }
.due-reasons { margin: 0.375rem 0 0; color: var(--text); font-weight: 700; }
.new-tag { display: inline-block; margin: 0 0 0.375rem; padding: 0.125rem 0.5rem; border-radius: 6px; background: #fff3d6; color: #4a2a00; font-size: 0.875rem; font-weight: 800; }
.review-photos li.is-new figure { outline: 3px solid #b25d00; outline-offset: 4px; border-radius: 10px; }
.changed-tag { color: #5a3200; font-weight: 800; }
.review-request { margin: 0.5rem 0; }
.lookup-result { margin-top: 0.75rem; }
.business-list { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.ok-flag { background: #e7eee8; color: #0b4a3e; }
.review-block { margin: 0 0 1.25rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.review-block h2 { margin-top: 0; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; table-layout: fixed; }
.compare th, .compare td { padding: 0.5rem; border-top: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.compare thead th { background: var(--navy-2); }
.compare tr.changed td, .compare tr.changed th { background: #fff3d6; }
/* The admin's field table: stacked on phones, so a phone number never splits across a narrow column */
@media (max-width: 640px) {
  .admin-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .admin-compare, .admin-compare tbody, .admin-compare tr, .admin-compare th, .admin-compare td { display: block; width: 100%; }
  .admin-compare tr { padding: 0.375rem 0; border-top: 1px solid var(--border); }
  .admin-compare th, .admin-compare td { padding: 0.125rem 0.25rem; border: 0; }
  .admin-compare td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 700; }
  .admin-compare td:empty { display: none; }
}
.reg-check { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; }
.reg-check h3 { margin-top: 0; }
.reg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.reg-actions .button { width: auto; min-height: 44px; }
.review-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.review-photos img { width: 100%; height: auto; border-radius: 10px; }
.decision { display: grid; gap: 0.75rem; }
.decision-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.decision-buttons .button { width: auto; }
.confirm-box, .sure-box { padding: 1rem; border: 2px solid var(--teal); border-radius: 12px; background: #e7eee8; }
.sure-box { margin: 0.5rem 0; }
/* Round 9 (admin tester): removing asks in its own box, below the note, with what it can't undo. */
.remove-sure { margin-top: 1rem; border-color: #a3271b; background: #fbecea; }
.remove-sure p { margin: 0 0 0.75rem; color: var(--text); }
/* Round 9 (admin tester): the header's "Firm sign in" is for firms, not a reviewer signed in to the review screen. */
.reviewer-hidden { display: none !important; }
.result-box { padding: 1rem; border-radius: 12px; background: #e7eee8; font-weight: 700; }
.events { margin: 0; padding-left: 1.25rem; font-size: 0.9375rem; }

@media (max-width: 860px) {
  .firm-search { grid-template-columns: minmax(0, 1fr); }
  .search-go { padding-top: 0; }
  .search-go .button { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  .firms-shell { width: calc(100% - 24px); padding-top: 96px; }
  .dash-section, .review-block, .firm-search { padding: 1rem 0.875rem; }
}

/* --- the homeowners' search: list of photo-led cards, sticky map beside it (wide) or behind a toggle (phones) --- */
.search-results { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; margin-top: 1.25rem; }
.results { min-width: 0; }
.results-summary { margin: 0 0 0.75rem; }
.map-box { position: sticky; top: 88px; display: flex; flex-direction: column; height: calc(100vh - 110px); min-height: 22rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 18px; background: #dfe9ee; }
.firm-map-svg { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; cursor: crosshair; }
.firm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.firm-list > li { display: flex; margin: 0; }
.firm-list > li > .firm-card { flex: 1 1 auto; }
.no-match { grid-column: 1 / -1; color: var(--muted); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0.375rem 0.875rem; border: 1px solid #8b958f; border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; cursor: pointer; }
.chip[aria-pressed=true] { border-color: var(--teal); background: var(--teal); color: #fff; }
.chip[aria-pressed=true]::before { content: "✓ "; }
.chip-action { margin-left: 0.25rem; color: var(--teal); font-weight: 600; text-decoration: underline; }
.chip-select { padding: 0 0.25rem 0 0.75rem; cursor: default; }
.chip-select select { min-height: 42px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.pin { cursor: pointer; }
.pin .pin-hit { fill: transparent; stroke: none; }
.pin .pin-dot { fill: var(--teal); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .15s ease; }
.pin.active .pin-dot, .pin:hover .pin-dot { fill: #b25d00; stroke-width: 3; }
/* Phones: the list or the map, switched by a button in the page, never one floating over the cards */
.map-toggle-line, .list-toggle-line { margin: 0 0 0.75rem; }
.map-toggle-line .button, .list-toggle-line .button { width: auto; }
.list-toggle-line { flex: 0 0 auto; margin: 0 0 0.5rem; }
@media (min-width: 900px) { .map-toggle-line, .list-toggle-line { display: none; } }
@media (max-width: 899px) {
  .search-results { grid-template-columns: minmax(0, 1fr); }
  .search-results[data-view=list] .map-box { display: none; }
  .search-results[data-view=map] .results { display: none; }
  .search-results[data-view=map] .map-box { position: static; height: calc(100vh - 120px); }
}
#results-heading { scroll-margin-top: 6rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
.chip-text { min-width: 0; }
.chip-action { white-space: nowrap; }
.badge-filter { width: 100%; }
.badge-filter > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-weight: 800; cursor: pointer; }
.badge-filter[open] > summary { margin-bottom: 0.25rem; }
.combo-none { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; }
.results-after { display: grid; gap: 1rem; margin: 0 0 1.25rem; }
.share-box .button { width: auto; }
.share-box .field-hint, .share-note { margin: 0.375rem 0 0; }
.share-copy { display: block; width: 100%; margin-top: 0.5rem; font: inherit; font-size: 0.875rem; }
.design-box { padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.design-box p { margin: 0 0 0.5rem; }
.design-title { color: var(--text); font-weight: 800; }
.design-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0 !important; }
.design-links .link-button { min-height: 44px; text-align: left; }
.map-label-town { fill: #3d4a50; font-weight: 600; }
.map-label-major { fill: #0b171d; font-weight: 800; }
.town-dot { fill: #3d4a50; }
.pin text.pin-count { fill: #fff; font-weight: 800; }

/* Photos on a card: one at a time, arrows and a count */
.card-photos { position: relative; aspect-ratio: 4 / 3; background: var(--navy-2); overflow: hidden; touch-action: pan-y; }
.card-photos img { display: none; width: 100%; height: 100%; object-fit: cover; }
.card-photos img.current { display: block; }
/* No photos: a slim line that says so, not an empty box where photos were promised */
.card-photos-empty { margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: #f3f5f2; color: var(--muted); font-size: 0.875rem; }
.gallery-empty { margin: 0 0 1rem; color: var(--muted); }
.placeholder-trade { color: var(--teal); font-size: 1.125rem; font-weight: 800; text-align: center; }
.card-photo-wrap { display: flex; flex-direction: column; }
.photo-caption { margin: 0; padding: 0.375rem 1rem; border-bottom: 1px solid var(--border); background: #f3f5f2; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--text); font: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); cursor: pointer; }
.photo-prev { left: 0.5rem; }
.photo-next { right: 0.5rem; }
.firm-card-link { color: var(--text) !important; text-decoration: none !important; }
.firm-card-link:hover { text-decoration: underline !important; }
.firm-card-link::after { content: ""; }
.firm-card .firm-card-trades { margin: 0.25rem 0; }
.firm-card .firm-card-area { margin: 0 0 0.5rem; color: var(--body); }
.firm-card-distance { margin: 0; color: var(--text); font-weight: 700; font-size: 0.9375rem; }
.firm-card .firm-card-meta { margin: 0.5rem 0 0; }

/* Badges */
/* Badges: one plain line each ("NAPIT: registered for electrical work") under "Checked by Estiquote on [date]:" */
.firm-badges, .firm-card .firm-badges, .firm-profile .firm-badges { display: grid; gap: 0.25rem; margin: 0.25rem 0; padding: 0; list-style: none; }
.badge, .firm-card .badge, .guide-body .badge { position: relative; margin: 0; padding: 0 0 0 1.375rem; color: #0b4a3e; font-size: 0.875rem; font-weight: 700; line-height: 1.4; }
.badge::before { content: "✓"; position: absolute; left: 0.125rem; top: 0; color: var(--teal); font-weight: 900; }
.no-scheme { margin: 0.375rem 0 0; padding: 0.375rem 0.625rem; border-left: 3px solid #8b958f; background: #f3f5f2; color: var(--text); font-size: 0.875rem; line-height: 1.4; }
.check-plain-line { display: block; color: var(--text); }
.check-detail { color: var(--body); font-size: 0.875rem; }
.checks-explained { margin: 0.75rem 0 1rem; }
.checks-explained > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-weight: 800; cursor: pointer; }
.checks-explained dl { margin: 0.25rem 0 0.5rem; }
.checks-explained dt { margin-top: 0.5rem; color: var(--text); font-weight: 800; }
.checks-explained dd { margin: 0.125rem 0 0; }
.example-note { color: var(--muted); font-size: 0.9375rem; }

/* --- a firm's listing page --- */
.profile-page { max-width: 1160px; }
.gallery { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; border-radius: 16px; overflow: hidden; }
.gallery li { margin: 0; min-width: 0; }
.gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--navy-2); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 760px) {
  .gallery-2 { grid-template-columns: 1fr 1fr; }
  .gallery-3, .gallery-4, .gallery-5 { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
  .gallery-3 li:first-child, .gallery-4 li:first-child, .gallery-5 li:first-child { grid-row: span 2; }
  .gallery-3 li:first-child img, .gallery-4 li:first-child img, .gallery-5 li:first-child img { aspect-ratio: auto; }
  .gallery-5 li:nth-child(n+6) { display: none; }
}
@media (max-width: 759px) {
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 12px; }
  .gallery li { flex: 0 0 88%; scroll-snap-align: start; }
}
.listing-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.contact-panel { position: sticky; top: 92px; padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(11, 23, 29, .06); }
.contact-panel h2, .contact-panel h3 { margin-top: 0; font-size: 1.25rem; }
.contact-list { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.contact-list li { margin: 0; }
.contact-button { width: 100%; justify-content: flex-start; overflow-wrap: anywhere; }
.contact-note { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 899px) { .listing-layout { grid-template-columns: minmax(0, 1fr); } .contact-panel { position: static; } }
.area-map { max-width: 22rem; margin: 0.5rem 0 1rem; padding: 0.375rem; border: 1px solid var(--border); border-radius: 12px; background: #dfe9ee; }
.area-map-svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.area-circle { fill: rgba(7, 89, 92, .12); stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.area-pin { fill: var(--teal); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.photo-viewer { width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1rem; border: 0; border-radius: 16px; background: #fff; }
.photo-viewer::backdrop { background: rgba(11, 23, 29, .8); }
.photo-viewer img { width: 100%; height: auto; max-height: calc(100vh - 14rem); object-fit: contain; }
.viewer-count { margin: 0 0 0.5rem; font-weight: 800; }
.viewer-caption { color: var(--muted); }
.viewer-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.viewer-buttons .button { width: auto; }

/* --- signing up and the dashboard's progress --- */
.terms-line { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.picked-note { padding: 0.75rem 1rem; border-radius: 12px; background: #e7eee8; color: var(--text) !important; font-weight: 600; }
.oauth-box { display: grid; gap: 0.5rem; max-width: 34rem; margin: 0 0 1.25rem; }
.oauth-or { margin: 0; color: var(--muted); }
.oauth-button { width: 100%; }
.dash-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; }
.progress-line { margin: 0.25rem 0; font-weight: 700; color: var(--text) !important; }
.next-step { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.next-step a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.contact-fields { margin-top: 1rem; }

/* --- checks: "Checked by Estiquote on [date]:" and the list (never a bare "Checked" badge) --- */
.checked-by { margin: 0.25rem 0; }
.checked-by-line { margin: 0.375rem 0 0.125rem; color: var(--text) !important; font-size: 0.875rem; font-weight: 700; }
.firm-card .checked-by-line { font-size: 0.8125rem; }
/* Round 7, homeowner side: a small picture beside the name, who runs it, checks folded into one line ("Show checks") */
.card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; }
.card-head { min-width: 0; }
.card-thumb { width: min(6.5rem, 26vw); margin: 0; }
.card-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--navy-2); }
.card-thumb figcaption { margin-top: 0.25rem; color: var(--muted); font-size: 0.75rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
@media (min-width: 900px) { .card-thumb { width: 8rem; } }
.firm-who { margin: 0.5rem 0; padding: 0.25rem 0 0.25rem 0.75rem; border-left: 3px solid var(--teal); }
.who-line { margin: 0.125rem 0; color: var(--text) !important; font-size: 0.9375rem; line-height: 1.45; }
.who-line.who-runs { font-weight: 700; }
.who-line.who-none, .who-line.who-override { color: #5a3200 !important; }
.firm-who.is-pending { border-left-color: #8b958f; }
.firm-who.is-pending .who-line { color: var(--muted) !important; font-weight: 600; }
.card-checks { margin: 0.25rem 0 0; }
.card-checks > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-weight: 800; cursor: pointer; list-style: none; }
.card-checks > summary::-webkit-details-marker { display: none; }
.card-checks > summary::before { content: ""; width: 0.5rem; height: 0.5rem; margin: 0 0.625rem 0 0.125rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.card-checks[open] > summary::before { transform: rotate(45deg); }
.card-checks .checks-hide, .card-checks[open] .checks-show { display: none; }
.card-checks[open] .checks-hide { display: inline; }
.card-checks .checked-by { margin: 0 0 0.25rem; }
.badge-name, .badge-means { display: block; }
.badge-means { color: var(--text); font-size: 0.875rem; font-weight: 400; }
.badge.badge-pending { color: var(--text); }
.badge.badge-pending::before { content: "\2022"; color: #8b958f; }
.firm-checks .check-means { color: var(--text); }
.firm-checks li.is-pending::before { content: "\2022"; color: #8b958f; }
.firm-profile .firm-who { margin: 0.25rem 0 0.75rem; }
.contact-panel .contact-website { margin: 0.875rem 0 0; }
.gallery li { position: relative; }
.results-summary p { margin: 0 0 0.375rem; }
.results-summary .few-firms { color: var(--text); font-weight: 700; }
.reviews-other { margin: 1.25rem 0 0.5rem; color: var(--muted); font-weight: 800; }
/* The clear button sits inside the box it clears (round 8, Margaret: at 125% text it covered the words, and while the list
   was open on a phone it floated down into the list): the box keeps room for it at any text size, and a long job name
   ends in an ellipsis instead of running under it. */
.combo-field { position: relative; }
.field .job-combo input[type=text] { padding-right: calc(44px + 0.75rem); text-overflow: ellipsis; }   /* beats .field input[type=text], which hid it before */
.combo-clear { position: absolute; top: 50%; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 1.5rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.combo-clear:hover, .combo-clear:focus-visible { background: #e7eee8; color: var(--text); }
.select-wrap { position: relative; }
.select-shown { position: relative; display: block; min-height: 48px; padding: 0.625rem 2.5rem 0.625rem 0.75rem; border: 1px solid #8b958f; border-radius: 10px; background: #fff; color: var(--text); font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.select-shown::after { content: ""; position: absolute; top: 50%; right: 1rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.field .select-wrap select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.select-wrap:focus-within .select-shown { outline: 3px solid var(--teal); outline-offset: 2px; }
.select-wrap:has(select[aria-invalid=true]) .select-shown { border: 2px solid #a3261b; }
.rq-postcode-from { margin-top: 0.375rem; color: var(--text); }
.sent-names { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--text); font-size: 1.125rem; font-weight: 700; }
.sent-names li { margin: 0.25rem 0; }
.check-plain { margin: 0.375rem 0; font-size: 0.9375rem; }
.checked-lists .firm-checks { margin-bottom: 0.75rem; }

/* --- stars and ratings: drawn from classes, so nothing needs an inline style --- */
.stars { position: relative; display: inline-block; flex: 0 0 auto; color: #c3cbc7; font-size: 1.125rem; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; vertical-align: -0.08em; }
.stars::before { content: "★★★★★"; }
.stars::after { content: "★★★★★"; position: absolute; top: 0; left: 0; width: 0; overflow: hidden; color: #b25d00; }
.stars-5::after { width: 10%; } .stars-10::after { width: 20%; } .stars-15::after { width: 30%; } .stars-20::after { width: 40%; } .stars-25::after { width: 50%; }
.stars-30::after { width: 60%; } .stars-35::after { width: 70%; } .stars-40::after { width: 80%; } .stars-45::after { width: 90%; } .stars-50::after { width: 100%; }
.rating-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.375rem; margin: 0.25rem 0; color: var(--text) !important; font-size: 0.9375rem; }
.rating-line .stars { margin-right: 0.125rem; }
.rating-none { color: var(--muted) !important; }
.rating-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.375rem; min-height: 44px; color: var(--text) !important; }
.card-slot:empty { display: none; }

/* --- reviews --- */
.reviews-section { margin-top: 1.5rem; padding-top: 0.25rem; border-top: 1px solid var(--border); }
.reviews-policy { color: var(--muted); font-size: 0.9375rem; }
.review-list { display: grid; gap: 1rem; margin: 1rem 0; }
.review { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin: 0 0 0.375rem; }
.review-score { color: var(--text); font-size: 0.9375rem; }
.review-route { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; background: #e7eee8; color: #0b4a3e; font-size: 0.8125rem; font-weight: 700; }
.review-aspects { margin: 0 0 0.375rem; color: var(--muted); font-size: 0.875rem; }
.review-body { margin: 0.25rem 0 0.5rem; white-space: pre-line; }
.review-meta { margin: 0; color: var(--muted); font-size: 0.875rem; }
.firm-reply { margin: 0.75rem 0 0; padding: 0.625rem 0.875rem; border-left: 3px solid var(--teal); background: var(--navy); }
.reply-label { margin: 0; color: var(--text) !important; font-size: 0.875rem; font-weight: 800; }
.reply-body { margin: 0.25rem 0 0; white-space: pre-line; }
.review-cta .button { width: auto; }

/* --- the shortlist: the button on cards and listings, and the tray --- */
.shortlist-button { width: 100%; margin-top: 0.625rem; }
.contact-panel .shortlist-button { margin-top: 0; }
.shortlist-button.is-added { border: 2px solid var(--teal); background: #e7eee8; color: var(--text); }
.shortlist-button.is-added::before { content: "✓" / ""; font-weight: 900; }
.shortlist-note { margin: 0.375rem 0 0; font-size: 0.875rem; }
.shortlist-note:empty { display: none; }
.shortlist-note.is-problem { color: #7a1d14 !important; font-weight: 700; }
.quote-tray { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: #fff; box-shadow: 0 -8px 24px rgba(11, 23, 29, .14); }
.tray-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; max-width: 1160px; margin: 0 auto; }
.tray-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.25rem 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.tray-toggle::after { content: "▾" / ""; color: var(--teal); }
.tray-toggle[aria-expanded=true]::after { content: "▴" / ""; }
.tray-go { width: auto; min-width: 10rem; }
.tray-list { display: grid; gap: 0.125rem; max-width: 1160px; margin: 0.375rem auto 0; padding: 0; list-style: none; }
.tray-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; margin: 0; border-top: 1px solid var(--border); }
.tray-name { font-weight: 700; color: var(--text); }
body.has-tray { padding-bottom: var(--tray-h, 5rem); }


/* --- /local-firms/request/ --- */
.request-page, .my-requests { width: min(880px, calc(100% - 32px)); }
.rq-lede { max-width: 44rem; font-size: 1.0625rem; }
.rq-firms { display: grid; gap: 0.75rem; margin: 0.5rem 0 0.75rem; padding: 0; list-style: none; }
.rq-firm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.rq-firm.has-problem { border: 2px solid #a3261b; background: #fdf3f1; }
.rq-firm-text { flex: 1 1 16rem; min-width: 0; }
.rq-firm-name { margin: 0; color: var(--text) !important; font-size: 1.125rem; font-weight: 800; }
.rq-firm-area { margin: 0.125rem 0 0; color: var(--muted) !important; font-size: 0.9375rem; }
.rq-firm-problem { margin-top: 0.375rem; }
.rq-remove { width: auto; min-height: 44px; }
.rq-form { display: grid; gap: 1.25rem; margin-top: 1rem; }
.rq-group { display: grid; gap: 0; min-width: 0; margin: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.rq-group > legend { padding: 0 0.375rem; color: var(--text); font-size: 1.25rem; font-weight: 800; }
.rq-group .field { max-width: 36rem; }
.calc-box { margin: 0 0 1rem; padding: 0.875rem 1rem; border-left: 4px solid var(--teal); border-radius: 8px; background: #e7eee8; }
.calc-box p { margin: 0.25rem 0; }
.calc-box-title { color: var(--text) !important; font-weight: 800; }
.budget-box { padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.budget-box .field-hint { margin-left: 2rem; }
.rq-consents { display: grid; gap: 0.25rem; }
.rq-form > .button { width: auto; justify-self: start; }
.sent-firms { display: grid; gap: 0.75rem; margin: 0.5rem 0 1.5rem; padding: 0; list-style: none; }
.sent-firm { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.sent-firm h3 { margin-top: 0; }

/* --- /my-requests/ --- */
.request-card { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.request-card > h2 { margin-bottom: 0.25rem; }
.request-card > h2:focus { outline: none; }
.request-meta { margin: 0 0 0.5rem; color: var(--muted) !important; font-size: 0.9375rem; }
.sent-details { margin: 0 0 0.75rem; }
.sent-details summary, .inbox-item > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--teal); font-weight: 800; cursor: pointer; }
.request-firms { display: grid; gap: 0.75rem; margin: 0.5rem 0 0.75rem; padding: 0; list-style: none; }
.request-firm { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--navy); }
.request-firm h3 { margin-top: 0; }
.firm-status { margin: 0 0 0.5rem; font-weight: 700; color: var(--text) !important; }
.firm-status.status-declined { color: #7a1d14 !important; }
.firm-message { margin: 0 0 0.5rem; padding: 0.5rem 0.875rem; border-left: 3px solid var(--border); background: #fff; }
.firm-message p { margin: 0; }
.hire-box, .review-box { display: grid; gap: 0.75rem; justify-items: start; margin-top: 0.5rem; }
.hire-box > .button, .review-box > .button, .reply-box > .button { width: auto; }
.hire-form, .review-form { justify-self: stretch; max-width: 40rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.star-field legend { margin-bottom: 0.25rem; }
.star-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.star-pick { position: relative; }
.star-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-label { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #c3cbc7; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.star-input:focus-visible + .star-label { outline: 3px solid var(--teal); outline-offset: 2px; }
.rated-1 .star-1, .rated-2 .star-1, .rated-2 .star-2, .rated-3 .star-1, .rated-3 .star-2, .rated-3 .star-3,
.rated-4 .star-1, .rated-4 .star-2, .rated-4 .star-3, .rated-4 .star-4, .rated-5 .star-label { color: #b25d00; border-color: #b25d00; }
.star-text { margin-left: 0.5rem; color: var(--text); font-weight: 800; }
.aspect-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.aspect-field > legend { padding: 0; color: var(--text); font-weight: 700; }
.aspect-grid, .name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 0 1rem; }
.aspect-grid .field, .name-grid .field { margin: 0.25rem 0; }
.preview-wrap { padding: 0.875rem; border: 1px dashed var(--border); border-radius: 12px; background: var(--navy); }
.my-review { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.review-state { margin: 0; font-weight: 700; color: var(--text) !important; }
.my-review.status-rejected .review-state { color: #7a1d14 !important; }
.delete-block { margin-top: 0.5rem; }
.danger-link { color: #a3261b; }
.mr-section { margin: 2rem 0 0; }
.mr-section > h2:focus { outline: none; }
.review-card { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.review-card h3 { margin-top: 0; }
.proof-review { margin-top: 1rem; }
.proof-review > h3:focus { outline: none; }
.proof-field .file-button { margin-top: 0.25rem; }
#pf-pick { max-width: 34rem; margin-top: 0.75rem; }

/* --- the firm dashboard's tabs: quote requests and reviews --- */
.dash-tabs { margin: 0 0 1rem; }
.dash-panel:focus { outline: none; }
.dash-panel > h2 { margin-top: 0.5rem; }
.inbox { display: grid; gap: 0.75rem; margin: 1rem 0; padding: 0; list-style: none; }
.inbox > li { margin: 0; }
.inbox-item { border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.inbox-item > summary { padding: 0.5rem 1rem; color: var(--text); font-weight: 700; }
.inbox-item.status-sent { border: 2px solid var(--teal); }
.inbox-summary { min-width: 0; }
.inbox-badge { flex: 0 0 auto; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--teal); color: #fff; font-size: 0.8125rem; font-weight: 800; white-space: nowrap; }
/* Round 9 (Sam): every request's status on its folded line, not only "New". */
.inbox-badge-viewed { background: #e7eee8; color: var(--text); }
.inbox-badge-quoted { background: #dcefe0; color: #1d5a2c; }
.inbox-badge-declined { background: #efeee8; color: var(--body); }
.inbox-badge-hired { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.inbox-body { padding: 0 1rem 1rem; }
.inbox-status { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: #e7eee8; color: var(--text) !important; font-weight: 700; }
.inbox-facts { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.inbox-facts dt { color: var(--muted); font-weight: 700; }
.inbox-facts dd { margin: 0; color: var(--text); }
.inbox-facts a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 560px) { .inbox-facts { grid-template-columns: minmax(0, 1fr); } .inbox-facts dd { margin-bottom: 0.375rem; } }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.inbox-actions .button { width: auto; }
.decline-form { flex: 1 1 100%; max-width: 36rem; }
.inbox-message { padding: 0.5rem 0.75rem; border-left: 3px solid var(--border); }
.inbox-review { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.reply-box, .report-box { display: grid; gap: 0.5rem; justify-items: start; }
.reply-form, .report-form { justify-self: stretch; max-width: 36rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.reply-pending { padding: 0.625rem 0.875rem; border-left: 3px solid #b25d00; background: #fff6e8; }
.reply-pending p { margin: 0.125rem 0; }

/* --- the review screen: reviews to check and the requests overview --- */
.review-check .review { margin: 0.5rem 0; }
.proof-preview { margin: 0.75rem 0; }
.proof-preview .button { width: auto; }
.proof-image { display: block; width: 100%; max-width: 40rem; height: auto; margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 8px; }
.reject-reasons { margin: 0.75rem 0; }
.overview-table { max-width: 30rem; margin: 0 0 1.25rem; }
.overview-table caption { padding: 0.5rem 0; color: var(--text); font-weight: 800; text-align: left; }
.overview-flags li { margin: 0.25rem 0; }
/* One-column grids never grow wider than their box, whatever a long email address or word inside them needs. */
.request-firms, .rq-firms, .sent-firms, .inbox, .review-list, .tray-list, .my-review, .hire-box, .review-box, .reply-box, .report-box, .inbox-review, .rq-consents, .rq-form, .rq-group { grid-template-columns: minmax(0, 1fr); }
.firm-contact a, .firm-contact li { min-width: 0; max-width: 100%; }
.stars { font-size: min(1.125rem, 6vw); }
@media (max-width: 480px) {
  .request-card { padding: 14px 12px; }
  .request-firm, .review, .review-form, .hire-form, .reply-form, .report-form, .inbox-body { padding-left: 10px; padding-right: 10px; }
}
.submit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
.no-card { color: var(--muted); font-size: 0.9375rem; font-weight: 700; }
.shown-as { margin: 0; }
.my-requests .reviews-policy { margin-top: 1.75rem; }
.request-firm > p > a:only-child, .review-cta a, .my-review > p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.shown-as strong { white-space: nowrap; }
.star-pick .star-label { color: #7a847f; }
.star-pick.rated-1 .star-1, .star-pick.rated-2 .star-1, .star-pick.rated-2 .star-2, .star-pick.rated-3 .star-1, .star-pick.rated-3 .star-2, .star-pick.rated-3 .star-3,
.star-pick.rated-4 .star-1, .star-pick.rated-4 .star-2, .star-pick.rated-4 .star-3, .star-pick.rated-4 .star-4, .star-pick.rated-5 .star-label { color: #b25d00; border-color: #b25d00; }
@media (min-width: 900px) { .firm-profile > .reviews-section { max-width: calc((100% - 2rem) * 2 / 3); } }
.firm-profile > .firm-disclaimer { margin-top: 1.5rem; }
.combo-loading { margin: 0.35rem 0 0; }

/* Links that used to sit inside consent labels: outside them, so tapping the words ticks the box */
.consent-links { margin: -0.25rem 0 0.75rem 2.25rem; font-size: 0.9375rem; }
.consent-links a { display: inline-flex; align-items: center; min-height: 44px; }
.tray-share-item { display: block !important; }
.tray-share-row { padding-top: 0.25rem; }
.tray-share-row .link-button { min-height: 44px; }
.tray-share-row .field-hint { font-size: 0.875rem; }
#sent-share { margin: 1rem 0; }
#sent-share .button { width: auto; }
.not-company-note { margin: 0 0 1rem; }
.untick-hint { display: block; margin: 0.125rem 0 0.25rem; color: var(--text); font-size: 0.9375rem; }
.consent-intro { margin: 0 0 0.5rem; }

/* Focus never hides under the fixed header: css/site.css sets the header as the page's scroll padding and each target's own
   margin below it (round 10), so these pages add no padding of their own. The quote tray's height is added as
   scroll-padding-bottom by js/quote-request.js while it shows. */
/* Short screens (400% zoom, or large text on a phone): the tray sits at the end of the page instead of over it */
@media (max-height: 34rem) {
  .quote-tray { position: static; max-height: none; margin-top: 1rem; box-shadow: none; border: 1px solid var(--border); border-radius: 12px; }
  body.has-tray { padding-bottom: 0; }
}
/* Phones: the job list pushes "Find firms" down instead of covering it, and never covers the field's error */
@media (max-width: 860px) {
  .job-combo .combo-list { position: static; margin-top: 4px; max-height: 16rem; }
}
.firm-search .field-error { margin: 0.25rem 0; }
.form-error p { margin: 0; }
.form-error ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.form-error li { margin: 0.25rem 0; }
.form-error a { color: inherit; font-weight: 700; }

/* Who runs the business (package IDV): the account step, the confirm page and the review screen */
.account-holder-line { margin: 0.5rem 0 0.75rem; }
.confirm-intro-note { margin-bottom: 0.75rem; }
.confirm-state { margin: 0 0 1rem; }
.confirm-state > p { margin: 0 0 0.75rem; }
.confirm-who { margin: 0 0 0.5rem; }
.confirm-done { font-weight: 700; color: #0b4a3e; }
.confirm-note { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #e7eee8; color: #0b4a3e; font-weight: 700; }
.confirm-note.is-problem { background: #fbecea; color: #7a1d14; }
.confirm-note:focus { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Round 9 (Rhys): the ID check's result at the top of the confirm page. */
.confirm-result { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 10px; border-left: 4px solid var(--teal); background: #e7eee8; color: #0b4a3e; font-weight: 700; }
.confirm-result.is-problem { border-left-color: #a3271b; background: #fbecea; color: #7a1d14; }
.confirm-result:focus { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Headings that take focus after a step (for screen readers) don't need a ring. */
.confirm-page h1[tabindex="-1"]:focus, .confirm-step h2[tabindex="-1"]:focus, #h-confirm:focus { outline: none; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.confirm-actions .button { width: auto; min-height: 44px; }
.confirmer-form { max-width: 36rem; }
.officer-pick .field { max-width: 36rem; }
.officer-lookup-line { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.officer-lookup-line .button { width: auto; min-height: 44px; }
.confirm-page .view { max-width: 46rem; }
/* Space between "They don't see this page." and the checks below it (round 10, Rhys). */
.confirm-page .holder-note { margin-bottom: 1.5rem; }
.confirm-page #h-needed { margin-top: 1.5rem; }
.confirm-details { margin: 0 0 1.25rem; }
.confirm-facts { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.375rem 1rem; margin: 0 0 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.confirm-facts dt { font-weight: 700; color: var(--ink, #1d2b2a); }
.confirm-facts dd { margin: 0; }
@media (max-width: 30rem) { .confirm-facts { grid-template-columns: 1fr; } .confirm-facts dd { margin-bottom: 0.375rem; } }
.confirm-step { margin: 0 0 1.5rem; }
.confirm-step .confirm-box { margin: 0.75rem 0; }
.confirm-meaning { padding: 1rem 1.25rem; border-radius: 12px; background: #f4f1ea; }
.confirm-meaning ul { padding-left: 1.25rem; }
.confirmer-block dl { margin-bottom: 0.75rem; }
/* Every facts list on the review screen reads the same: the Companies House box, who runs it, a request looked up (round 10,
   admin tester: the Companies House box was an unstyled indented list). */
.admin .ch-facts { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.admin .ch-facts dt { font-weight: 700; }
.admin .ch-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .admin .ch-facts { grid-template-columns: 1fr; gap: 0; } .admin .ch-facts dd { margin-bottom: 0.375rem; } }
/* A heading the review screen focuses as a view loads (so a screen reader starts there) isn't drawn inside a dark focus box
   (round 10, admin tester: "headings load inside a dark box"). Keyboard focus on controls keeps its outline. */
.admin h1[tabindex="-1"]:focus, .admin h2[tabindex="-1"]:focus, .admin .result-box[tabindex="-1"]:focus { outline: none; }
/* The firms a flag names, linked; a shared office's officers (round 10). */
.flags .flag-firms { margin: 0.375rem 0 0; padding-left: 1.25rem; list-style: disc; font-weight: 500; }
.flags .flag-firms li { display: list-item; margin: 0.25rem 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-weight: 500; }
.flag-firms a { color: inherit; font-weight: 700; }
.flag-officers { display: block; }
.unchecked-note { margin: 0.75rem 0; padding: 0.75rem 1rem; border-left: 4px solid #b25d00; border-radius: 8px; background: #fff3d6; color: #4a2a00; }
.unchecked-note p { margin: 0 0 0.375rem; color: inherit; }
.unchecked-note p:last-child { margin-bottom: 0; }
.firm-reviews .firm-review { margin: 0.75rem 0; }
.firm-reviews .review { margin: 0.5rem 0; }
.publish-note textarea { width: 100%; }
.due-help { margin: 0 0 1rem; }
.due-help ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.due-help li { margin: 0.25rem 0; }
.confirm-form-box { margin: 0.75rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; }
.confirm-form-box .field { max-width: 34rem; }
.confirm-more { margin-top: 1rem; }
.confirm-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.letter-view .letter-tools { max-width: 46rem; }
.letter { max-width: 42rem; margin: 1.5rem 0; padding: 2.5rem; border: 1px solid var(--border); background: #fff; color: #111; font-size: 1.0625rem; }
.letter p { color: #111; }
.letter-from { text-align: right; line-height: 1.5; }
.letter-date { margin: 1.5rem 0; }
.letter-to { font-style: normal; line-height: 1.5; margin: 0 0 2rem; }
.letter-subject { font-size: 1.25rem; margin: 0 0 1rem; }
.letter .letter-company { margin: 2.5rem 0 0; font-size: 0.875rem; color: #333; }
.letter-code { margin: 1rem 0; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.15em; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .letter { padding: 1.25rem; } .letter-code { font-size: 1.375rem; } }
@media print {
  .site-header, .site-footer, .skip-link, .sample-note, .letter-tools, #view-firm, #view-queue { display: none !important; }
  .firms-shell { width: auto; padding: 0; }
  .letter { border: 0; margin: 0; padding: 0; max-width: none; font-size: 12pt; }
}

/* Round 7: the account's confirm step (numbered required steps, checking it's them, a letter's address, a bill) */
.profile-steps .step-n { font-variant-numeric: tabular-nums; }
.idcheck-title { margin: 1.25rem 0 0.5rem; font-size: 1.125rem; scroll-margin-top: 96px; }
.idcheck-title:focus { outline: none; }
.letter-dest { margin: 0 0 0.5rem; }
.officer-warning { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #fbecea; color: #7a1d14; }
.letter-address-form { max-width: 34rem; margin: 0.5rem 0 1rem; }
.letter-address-form .field input { width: 100%; }
.bill-upload { max-width: 36rem; margin: 0.5rem 0 1rem; }
.bill-upload .file-button { width: auto; min-height: 44px; }
.or-line { margin: 0.75rem 0 0.25rem; font-weight: 700; }
/* IDV2: the ID check with or without a selfie, explained before it starts; the two choices look the same. */
.idcheck-intro, .idcheck-choose, .idcheck-equal { margin: 0 0 0.75rem; max-width: 40rem; }
.idcheck-choose { margin-bottom: 0.25rem; }
.idcheck-options { margin: 0 0 0.75rem; padding-left: 1.25rem; max-width: 40rem; }
.idcheck-options li { margin: 0 0 0.375rem; }
.idcheck-buttons .button { flex: 1 1 14rem; max-width: 20rem; }
.idcheck-after-face { margin: 0 0 0.75rem; max-width: 40rem; }
/* The preview: nothing looks checked until it is. */
.preview-card .to-check::before, .preview-profile .to-check::before { content: "\25CB"; display: inline-block; margin-right: 0.4em; color: var(--muted, #5b6662); }
.to-check-note { color: var(--muted, #5b6662); font-weight: 400; font-style: italic; }
.sent-box h3 { overflow-wrap: anywhere; }
/* Round 7: the review screen */
.cant-yet { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #fbecea; color: #7a1d14; }
.decision-buttons .button[disabled] { opacity: 0.55; cursor: not-allowed; }
.proof-date-check { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-left: 4px solid var(--teal); background: #f4f1ea; }
.stripe-ref p { overflow-wrap: anywhere; }
.review-cross .plain-list { list-style: none; padding: 0; margin: 0; }
.review-cross .plain-list li { margin: 0 0 0.75rem; }

/* Round 8: the searched job's own registrations on the card face and first on a listing; insurance running out; what
   "Not VAT registered", a sole trader, a partnership and an LLP mean; badge filters that name the scheme. */
.job-badges { margin: 0.375rem 0 0; padding: 0.25rem 0.625rem 0.375rem; border-radius: 10px; background: #eef5f1; }
.job-badges .checked-by-line { margin-top: 0.125rem; }
.job-badges .firm-badges { margin: 0; padding: 0; list-style: none; }
.job-checks { margin: 0 0 0.25rem; padding: 0.125rem 0.75rem 0.375rem; border-radius: 10px; background: #eef5f1; }
.badge-alert, .check-alert { display: block; margin-top: 0.125rem; color: #5a3200; font-size: 0.875rem; font-weight: 700; }
.check-alert { display: inline; }
.badge.badge-warn::before { content: "!"; color: #8a4b00; }
.firm-card-vat { margin: 0.25rem 0 0; color: var(--text); font-size: 0.9375rem; line-height: 1.45; }
.who-explain { display: block; margin-top: 0.125rem; color: var(--muted); font-size: 0.875rem; font-weight: 400; }
.chip.chip-badge { flex-direction: column; align-items: flex-start; border-radius: 14px; text-align: left; }
.chip-name { display: block; }
.chip-means { display: block; font-size: 0.8125rem; font-weight: 400; }
.chip[aria-pressed=true].chip-badge::before { content: none; }
.chip[aria-pressed=true] .chip-name::before { content: "✓ "; }
.badge-filter-hint { margin: 0 0 0.5rem; }
.code-note { margin: 0 0 1rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--teal); background: #eef5f1; }
.sent-budget { margin: 0.5rem 0 0; }
/* The who-runs-it lines and the VAT line at 1.5: ".firms-shell p" (1.6) outranked their own line height, and with decision
   A's longer "Run by" line a sole trader's card no longer fitted on about one screen at 360 px with 125% text. */
.firms-shell .who-line, .firms-shell .firm-card-vat { line-height: 1.5; }

/* Round 9, homeowner side: what the "Run by" check means (rule C3), one "Last checked" date, no insurance shown, why a badge
   leads, the unvented and building warrant lines, cards about half as tall on a phone, a slim quote request bar that can be
   closed, and the estimate the request form sends. */
.firms-shell .who-how { margin: 0.125rem 0 0; color: var(--text); font-size: 0.875rem; line-height: 1.45; }
/* An inline link whose padding gives it a 44 px tap area without opening a gap in the line. */
.who-how .how-link { display: inline; padding: 0.875rem 0; font-weight: 700; }
.firm-card .firm-who { margin: 0.375rem 0; padding: 0.125rem 0 0.125rem 0.625rem; }
.firms-shell .firm-card .who-line { font-size: 0.875rem; line-height: 1.4; }
.firms-shell .firm-card .who-how { line-height: 1.4; }
.firm-card .badge-means { font-size: 0.8125rem; line-height: 1.35; }
.firm-card .badge { line-height: 1.35; }
.firms-shell .firm-card .firm-card-vat { line-height: 1.4; }
.firm-card .card-checks { margin: 0; }
.firm-card .no-scheme, .firm-card .no-insurance { margin-top: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.8125rem; }
.firm-card .no-scheme + .no-insurance { margin-top: 0; border-top: 1px solid #e3e7e4; }
.firm-card .job-badges { padding: 0.125rem 0.5rem; }
.firm-card .job-badges .badge { font-size: 0.875rem; }
.firm-card .card-body { padding: 0.75rem 0.875rem 0.875rem; }
.firm-card .firm-card-trades { margin: 0.125rem 0; font-size: 0.9375rem; line-height: 1.4; }
.firm-card .firm-card-area { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.firm-card .firm-card-distance { line-height: 1.4; }
.firm-card .rating-line { margin: 0.125rem 0; font-size: 0.875rem; }
.firm-card .firm-card-vat, .firm-card .firm-card-meta { font-size: 0.875rem; }
.firm-card .card-checks > summary { min-height: 44px; }
.firm-card .shortlist-button { margin-top: 0.375rem; }
.firm-card .job-badges { margin-top: 0.125rem; }
.firm-card .checked-by-line { margin: 0.375rem 0 0.125rem; }
.no-insurance { margin: 0.375rem 0 0; padding: 0.25rem 0.625rem; border-left: 3px solid #8b958f; background: #f3f5f2; color: var(--text); font-size: 0.875rem; line-height: 1.4; }
.badge-reason { margin: 0.125rem 0 0 1.375rem; color: var(--text); font-size: 0.8125rem; line-height: 1.4; }
.job-checks .badge-reason { margin: 0 0 0.25rem 1.625rem; font-size: 0.875rem; }
.fold-explain { margin: 0 0 0.375rem; }
.fold-explain .who-explain { color: var(--text); }
.firm-checks li.is-warn::before { content: "!"; color: #8a4b00; }
.results-note { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--teal); background: #eef5f1; color: var(--text); }
.results-note a { display: inline; }
.listing-main .gallery-empty { margin: 0.75rem 0 0; font-size: 0.875rem; }
.firm-contact { row-gap: 0.5rem; }
.quote-tray { padding: 0.375rem 0.75rem calc(0.375rem + env(safe-area-inset-bottom)); }
.tray-inner { flex-wrap: nowrap; gap: 0.375rem; font-size: 0.8125rem; }
.tray-toggle { flex: 1 1 auto; gap: 0.25rem; min-width: 0; font-size: inherit; line-height: 1.3; }
.tray-go { flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 0.375rem 0.625rem; font-size: inherit; }
.tray-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: 1.25rem; cursor: pointer; }
@media (max-width: 40rem) {
  .tray-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.quote-tray.is-closed { position: static; max-height: none; margin-top: 1rem; box-shadow: none; border: 1px solid var(--border); border-radius: 12px; }
.quote-tray.is-closed .tray-close { display: none; }
.tray-list li.tray-firm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 0.75rem; }
.tray-firm .tray-name { min-width: 0; overflow-wrap: anywhere; }
.calc-box-line { margin: 0.25rem 0; color: var(--text); }
.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin: 0.25rem 0 0; }
.calc-actions a, .calc-actions .link-button { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.rq-warrant { margin: 0.75rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--teal); background: #eef5f1; color: var(--text); }

/* Round 10, homeowner side: insurance on the card face; "How we check" beside the "Run by" line, once above the results,
   and the "How we check firms" section under them; the job search hint whole at large text; the estimate box headed, on
   the form and the code step; when a review opens; a review search that finds no firm. */
.firm-card .ins-badges { margin: 0.25rem 0 0; }
.firm-card .ins-badges .badge { font-size: 0.875rem; }
.ins-badges li.no-insurance { margin: 0; }
/* Inline links whose padding gives them a 44 px tap area without opening a gap in the line. */
.who-line .how-link, .results-how .how-link { display: inline; padding: 0.875rem 0; font-weight: 700; }
.results-summary .results-how { color: var(--text); font-size: 0.9375rem; }
/* The jump from "How we check firms" stops 1rem below the header (css/site.css's padding), within the 1.5rem above the section. */
.how-we-check { margin: 1.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); scroll-margin-top: 1rem; }
.how-we-check h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.how-we-check p { color: var(--text); font-size: 0.9375rem; }
.how-we-check .firm-disclaimer { color: var(--muted); }
/* No clear button shows while the box is empty, so the hint has the box's whole width (round 10, Margaret). */
.field .job-combo input[type=text]:placeholder-shown { padding-right: 0.75rem; }
.calc-box .calc-box-title { margin-bottom: 0; }
.calc-box .calc-box-line { margin-top: 0.125rem; font-weight: 700; overflow-wrap: anywhere; }
#rq-code-calc { margin: 0 0 1rem; }
.sent-job { margin: 0.5rem 0 0; color: var(--text); }
.review-opens { margin: 0.5rem 0 0; }
.review-opens a, .pf-none a { display: inline; }
.pf-none { margin: 0.5rem 0 0; }
.request-firm h3 a { display: inline; overflow-wrap: anywhere; }

/* Round 8: new quote requests in the first screen, Undo after "I've sent a quote", the badges on the confirm page */
.new-requests { margin: 0.5rem 0; }
.new-requests .button { min-height: 44px; }
.undo-button { min-height: 44px; }
.claimed-badges { margin: 0 0 1rem; padding-left: 1.25rem; }
.claimed-badges li { margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.confirm-details #h-claimed { margin: 1.5rem 0 0.5rem; font-size: 1.25rem; }
/* A registration hint for the firm's own nation, the others folded (round 10, Sam). */
.nation-notes p { margin: 0 0 0.25rem; }
.other-nations summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--teal); }
.other-nations ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.other-nations li { margin: 0.25rem 0; }
/* Pausing the listing, in Account settings (round 10, Sam). */
.pause-zone { margin: 1.5rem 0; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.pause-zone .sure-box { max-width: 36rem; }