/* Roof referrals (1.37.0): Refer homeowner, the Insurance referrals view, the refer sheet and status card, Tray's Roofers tab.
   Mobile and tablet first: a roofer's rep uses this standing at a front door, so type is large, every target is 44 px or
   more, and the sheet fills a phone. CSP is style-src 'self': no inline style attributes anywhere (auth.css makes [hidden]
   win over every display rule). */

/* Header button (tablet and desktop) and the sticky bottom button (phones) */
.rr-refer-button { flex-shrink: 0; min-height: 44px; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 800; white-space: nowrap; background: #15803d; border-color: #15803d; box-shadow: 0 6px 18px rgba(21,128,61,.28); }
.rr-refer-button:hover { background: #166534; }
.rr-sticky-refer { display: none; }
@media (max-width: 650px) {
  .rr-refer-button { display: none; }
  .rr-sticky-refer { display: flex; align-items: center; justify-content: center; position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; min-height: 58px; border-radius: 16px; font-size: 19px; font-weight: 800; background: #15803d; border-color: #15803d; box-shadow: 0 12px 30px rgba(16,33,59,.28); }
  .rr-sticky-refer:hover { background: #166534; }
  /* Room for the sticky button at the bottom of every page, and the status toast sits above it. */
  body.rr-on main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* 1.41.0 field test: on the canvass map the bottom bar (shift, Next door, locate) owns the bottom edge; a Sold door's
     sheet has its own Refer homeowner. */
  body.cv-active .rr-sticky-refer { display: none; }
  body.rr-on.cv-active main { padding-bottom: 0; }
  body.rr-on #status { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Insurance referrals view */
.rr-hero { display: grid; gap: 16px; background: linear-gradient(120deg,#10213b,#183b68); color: #fff; }
.rr-hero .eyebrow { color: #86efac; }
.rr-hero h2 { margin: 0 0 6px; font-size: 24px; }
.rr-hero p:not(.eyebrow) { margin: 0; color: #c8d5e6; font-size: 16px; }
.rr-big { width: 100%; min-height: 60px; border-radius: 14px; font-size: 20px; font-weight: 800; background: #16a34a; border-color: #16a34a; }
.rr-big:hover { background: #15803d; }
.rr-list-head { display: grid; gap: 10px; margin-bottom: 12px; }
.rr-list-head h3 { margin: 0; }
.rr-tools { display: grid; gap: 10px; }
.rr-range { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rr-range button { flex-shrink: 0; min-height: 44px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.rr-range button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.rr-rep-filter { margin: 0; font-size: 13px; }
.rr-rep-filter select { min-height: 44px; font-size: 16px; }
.rr-counts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.rr-count { display: grid; gap: 2px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; text-align: center; }
.rr-count strong { font-size: 24px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.rr-count span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.rr-list { display: grid; gap: 8px; }
.rr-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left; font-weight: 500; }
.rr-row-main { display: grid; gap: 2px; min-width: 0; }
.rr-row-main strong { font-size: 16px; }
.rr-row-main small, .rr-row-main > span, .rr-row-side small { color: var(--muted); font-size: 13px; font-weight: 500; }
.rr-row-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-row-main > .rr-row-line { color: var(--ink); white-space: normal; }
.rr-row-side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; text-align: right; }
.rr-pill { display: inline-block; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 750; white-space: nowrap; background: #eef4ff; color: #174ea6; }
.rr-pill[data-tone="good"] { background: var(--mint); color: #176348; }
.rr-pill[data-tone="closed"] { background: #f1f5f9; color: #475569; }
.rr-permit-tag { border-radius: 6px; padding: 1px 6px; background: #fff7ed; color: #9a3412 !important; font-weight: 700 !important; }
.rr-empty { margin: 0; }
.rr-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: end; margin: 12px 0; }
.rr-filters label { display: grid; gap: 5px; margin: 0; font-size: 12px; font-weight: 700; }
.rr-filters button { grid-column: 1 / -1; min-height: 44px; }
.rr-funnel-org td { background: #f8fafc; }
.rr-funnel-rep td:first-child { padding-left: 26px; color: var(--muted); }
.rr-permits-note { margin: 0 0 8px; font-size: 13px; }

/* The refer sheet: full screen on a phone, a centered sheet on a tablet or desktop */
.rr-sheet { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; padding: 0; background: #fff; color: var(--ink); }
.rr-sheet::backdrop { background: rgba(9,20,37,.62); }
.rr-sheet-shell { display: grid; align-content: start; gap: 16px; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
.rr-sheet-head { position: sticky; top: calc(-14px - env(safe-area-inset-top, 0px)); z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: calc(-14px - env(safe-area-inset-top, 0px)) -16px 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.rr-sheet-head .eyebrow { margin-bottom: 2px; }
.rr-sheet-head h2 { margin: 0; font-size: 22px; }
.rr-close { min-height: 44px; min-width: 76px; }
.rr-confirm { display: grid; gap: 10px; padding: 14px; border: 1px solid #f0c36d; border-radius: 14px; background: #fff8e6; color: #5c3d00; }
.rr-confirm p { margin: 0; font-weight: 700; font-size: 16px; }
.rr-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rr-confirm-actions button { min-height: 48px; }
.rr-danger { background: #b42318; border-color: #b42318; color: #fff; }
.rr-danger:hover { background: #912018; }
.rr-form { display: grid; gap: 18px; }
.rr-form input:not([type=radio]):not([type=checkbox]), .rr-form select, .rr-form textarea { min-height: 50px; font-size: 17px; } /* 16 px+ stops iOS zooming on focus */
.rr-form textarea { min-height: 88px; }
.rr-script { border: 2px solid #86efac; border-radius: 16px; background: #f0fdf4; }
.rr-script summary { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #166534; }
.rr-script-text { margin: 0; padding: 0 16px 16px; font-size: 20px; line-height: 1.45; font-weight: 650; color: #052e16; }
.rr-section { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rr-section > legend { margin-bottom: 4px; padding: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #6a7890; }
.rr-grid { display: grid; gap: 12px; min-width: 0; }
.rr-field { display: grid; gap: 6px; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; }
fieldset.rr-field { padding: 0; border: 0; }
fieldset.rr-field > legend { margin-bottom: 6px; padding: 0; font-weight: 650; }
.rr-hint { color: var(--muted); font-size: 13px; font-weight: 500; }
.rr-error { color: var(--danger); font-size: 14px; font-weight: 650; }
.rr-error:empty { display: none; }
.rr-form [aria-invalid="true"]:not([type=radio]):not([type=checkbox]) { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(180,35,24,.12); }
.rr-form input[type=radio][aria-invalid="true"] + span { border-color: var(--danger); }
/* Segmented buttons (radio inputs) */
.rr-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-seg label { position: relative; flex: 1 1 0; min-width: 92px; margin: 0; }
.rr-seg input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.rr-seg span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 12px; border: 1px solid #cfd8e3; border-radius: 12px; background: #fff; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; }
.rr-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.rr-seg input:focus-visible + span { outline: 3px solid rgba(23,105,255,.45); outline-offset: 2px; }
.rr-more { border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.rr-more > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px; cursor: pointer; font-size: 16px; font-weight: 750; }
.rr-optional { color: var(--muted); font-size: 13px; font-weight: 600; }
.rr-more-body { display: grid; gap: 14px; padding: 4px 16px 16px; }
.rr-consent { display: grid; gap: 10px; padding: 16px; border: 2px solid #f0c36d; border-radius: 16px; background: #fffbeb; }
.rr-consent .eyebrow { margin: 0; color: #92400e; }
.rr-consent-text { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 600; color: #1f2937; }
.rr-readback { margin: 0; font-size: 15px; color: #5c3d00; }
.rr-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; min-height: 48px; padding: 10px 0 0; font-size: 17px; font-weight: 700; cursor: pointer; }
.rr-check input { flex-shrink: 0; width: 30px; height: 30px; margin: 0; accent-color: #15803d; }
.rr-form-error { margin: 0; color: var(--danger); font-weight: 700; }
.rr-submit { width: 100%; min-height: 60px; border-radius: 14px; font-size: 20px; font-weight: 800; background: #15803d; border-color: #15803d; }
.rr-submit:hover { background: #166534; }
.rr-submit-help { display: grid; gap: 12px; padding: 14px; border: 1px solid #f0c36d; border-radius: 14px; background: #fff8e6; }
.rr-submit-help p { margin: 0; font-weight: 650; color: #5c3d00; }

/* Status card */
.rr-status { display: grid; gap: 12px; }
.rr-status h2 { margin: 0; font-size: 26px; }
.rr-status > .muted { margin: 0; }
.rr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rr-steps li { border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 700; background: #f1f5f9; color: #64748b; }
.rr-steps li.done { background: var(--mint); color: #176348; }
.rr-steps li.active { background: #eef4ff; color: #174ea6; box-shadow: inset 0 0 0 2px #93b4f5; }
.rr-status-line { margin: 0; padding: 16px; border-radius: 14px; background: #eef4ff; color: #10213b; font-size: 21px; line-height: 1.35; font-weight: 800; }
.rr-status-line[data-tone="good"] { background: var(--mint); color: #14532d; }
.rr-status-line[data-tone="closed"] { background: #f1f5f9; color: #334155; }
.rr-status-note { margin: 0; padding: 0 4px; font-size: 16px; color: var(--ink); }
.rr-permit { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-weight: 700; }
.rr-poll-note { margin: 0; color: var(--muted); font-size: 14px; }
.rr-show { display: grid; gap: 8px; }
.rr-show .eyebrow { margin: 0; }
.rr-status-actions { display: grid; gap: 10px; }
.rr-status-actions button { min-height: 52px; font-size: 17px; }

/* Tray's card (Show the homeowner) */
.rr-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 900; font-size: 17px; letter-spacing: -1px; }
.rr-tray { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px 14px; align-items: center; padding: 18px; border-radius: 18px; background: linear-gradient(120deg,#10213b,#183b68); color: #fff; box-shadow: var(--shadow); }
.rr-tray-body { display: grid; gap: 2px; min-width: 0; }
.rr-tray-body strong { font-size: 22px; }
.rr-tray-body span, .rr-tray-body small { color: #c8d5e6; font-size: 15px; }
.rr-tray-phone { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 60px; border-radius: 14px; background: #fff; color: var(--navy); font-weight: 800; font-size: 26px; text-decoration: none; font-variant-numeric: tabular-nums; }
.rr-tray-phone:hover { background: #e9f1ff; }

/* Tray's Roofers tab */
.rr-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.rr-switch input { position: static; width: 22px; height: 22px; opacity: 1; accent-color: #15803d; }
.rr-name-tag, .rr-name-chip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; border-radius: 999px; padding: 3px 10px; background: #eef4ff; color: #174ea6; font-size: 12px; font-weight: 700; }
.rr-name-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rr-name-chips .muted { margin: 0; }
.rr-name-chip button { min-height: 28px; min-width: 28px; padding: 0 6px; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; }
.rr-admin-names { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.rr-admin-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.rr-admin-search button { min-height: 44px; }
.rr-contractor-results { display: grid; gap: 6px; }
.rr-contractor-results .muted { margin: 0; }
.rr-contractor { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; }
.rr-contractor small { color: var(--muted); font-weight: 500; }

/* Tablets and up */
@media (min-width: 700px) {
  .rr-hero { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .rr-big { width: auto; padding: 0 32px; }
  .rr-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
  .rr-rep-filter { min-width: 200px; }
  .rr-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rr-place { grid-template-columns: minmax(0,1fr) 130px 96px; }
  .rr-sheet { width: min(720px, calc(100% - 32px)); height: auto; max-height: calc(100% - 32px); margin: auto; border-radius: 22px; box-shadow: 0 30px 80px rgba(9,20,37,.35); }
  .rr-sheet-shell { max-height: calc(100vh - 32px); padding: 18px 24px 28px; }
  .rr-sheet-head { top: -18px; margin: -18px -24px 0; padding: 16px 24px 12px; }
  .rr-status-actions { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
  .rr-filters { grid-template-columns: repeat(2,minmax(0,180px)) auto; }
  .rr-filters button { grid-column: auto; }
}
@media (max-width: 420px) {
  .rr-counts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rr-count:nth-child(n+4) { grid-column: span 1; }
  .rr-place { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .rr-place .rr-city { grid-column: 1 / -1; }
  .rr-row { flex-direction: column; }
  .rr-row-side { justify-items: start; text-align: left; }
}
@media (min-width: 421px) and (max-width: 699px) {
  .rr-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rr-place { grid-template-columns: minmax(0,1fr) 120px 92px; }
}