/* ==============================================================================================
   OPPORTUNITY VERIFICATION BADGES AND THE "HOW VERIFICATION WORKS" PANEL

   The colour scale is the message. Read left to right on a card, or top to bottom in the panel,
   the badges run from "a machine picked this property" to "a person spoke to the homeowner", and
   the palette climbs with them: neutral slate for the ranking, blue for a completed check, green
   for the full compliance gate, purple for a human conversation.

   That is why AI-Ranked is deliberately the QUIETEST badge on the card. It is true of every record
   on the page, so making it loud would spend the agent's attention on the one thing that does not
   distinguish anything -- and would put the same visual weight on "an algorithm scored this" as on
   "the homeowner agreed to a call".
   ============================================================================================== */

/* ---------- The link under the page subtitle ---------- */

.wr-so__verifylink {
    margin: -6px 0 18px;
}

.wr-so__verifybtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 999px;
    background: var(--wr3-surface, #fff);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.wr-so__verifybtn i {
    font-size: 0.82rem;
    color: var(--wr3-blue, #1d5ff5);
}

.wr-so__verifybtn:hover {
    border-color: var(--wr3-blue, #1d5ff5);
    color: var(--wr3-ink, #0f172a);
}

.wr-so__verifybtn:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
}

/* ---------- The market line ---------- */

.wr-somkt__markets-note {
    margin: 6px 0 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--wr-ink-600, #5b6472);
}

/* ---------- Badges ---------- */

.wr-so-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.wr-so-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The floor. Quiet on purpose: every card has it. */
.wr-so-badge--ranked {
    background: var(--wr3-surface-2, #f1f5f9);
    border-color: var(--wr3-border, #e4e8f0);
    color: var(--wr3-ink-2, #475569);
}

/* A completed check on the contact details. */
.wr-so-badge--verified {
    background: #e8f0ff;
    border-color: rgba(29, 95, 245, 0.28);
    color: #12408f;
}

/* The full compliance gate. */
.wr-so-badge--ready {
    background: #dcfce7;
    border-color: rgba(21, 128, 61, 0.3);
    color: #15803d;
}

/* A human conversation happened. The strongest claims, and the only ones in the accent hue. */
.wr-so-badge--isa,
.wr-so-badge--appointment,
.wr-so-badge--transfer {
    background: #f1ecfe;
    border-color: rgba(109, 56, 221, 0.3);
    color: #4a2394;
}

/* The single badge over the card image uses the same scale. */
.wr-opp__badge--ranked {
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
}

.wr-opp__badge--verified {
    background: #e8f0ff;
    color: #12408f;
}

.wr-opp__badge--isa,
.wr-opp__badge--appointment,
.wr-opp__badge--transfer {
    background: #f1ecfe;
    color: #4a2394;
}

/* ---------- The panel ---------- */

.wr-verify-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(12, 26, 58, 0.5);
}

.wr-verify {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 32px));
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--wr3-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(12, 26, 58, 0.24);
    overflow: hidden;
}

.wr-verify__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wr3-border, #e4e8f0);
}

.wr-verify__head h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--wr3-ink, #0f172a);
}

.wr-verify__close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 50%;
    background: none;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
}

.wr-verify__close:hover {
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-verify__close:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
}

.wr-verify__body {
    overflow-y: auto;
    padding: 18px 20px 20px;
}

.wr-verify__lead {
    margin: 0 0 16px;
    font-size: 0.89rem;
    line-height: 1.62;
    color: var(--wr3-ink-2, #475569);
    max-width: 62ch;
}

.wr-verify__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wr-verify__list li {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 11px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-verify__list .wr-so-badge {
    justify-self: start;
}

.wr-verify__meaning {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--wr3-ink, #0f172a);
}

/* Where the fact comes from, set quieter than the meaning: it is the supporting detail for an
   agent deciding how much to trust a badge, not the definition itself. */
.wr-verify__evidence {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-verify__foot {
    margin: 16px 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--wr3-ink-2, #475569);
}

@media (max-width: 640px) {
    .wr-verify {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
}