/* main/retail_report/assets/retail.css — standalone CoreGIS retail storefront.
   STRUCTURE owns layout. COLOUR = a vibrant CoreGIS palette sampled from the logo
   (bright globe BLUE primary + globe GREEN accent on clean WHITE cards with deep-blue
   ink). TOKEN-LAYER FIX: the deployed Styles theme is the DARK theme (it sets every
   --client-* on :root → white text, dark surfaces). retail.css loads AFTER it, so we
   OVERRIDE the whole --client-* set here on :root (equal specificity, later wins) — the
   dark theme can no longer bleed white-on-white. We also repoint the legacy --rr-navy/
   --rr-teal vars to the new palette so every existing reference re-themes for free. */
:root {
    /* CoreGIS logo palette */
    --rr-blue:      #1574d6;   /* PRIMARY — bright globe blue */
    --rr-blue-dark: #0d56a8;   /* primary hover / pressed */
    --rr-green:     #1fa64a;   /* ACCENT — globe green (hits count, success, highlights) */
    --rr-green-dark:#16823a;
    --rr-ink:       #0c2b4e;   /* deep-blue text on white */
    /* legacy vars repointed → every var(--rr-navy)/var(--rr-teal) now uses the palette */
    --rr-navy: #0c2b4e;
    --rr-teal: #1574d6;
    /* OVERRIDE the deployed DARK theme's --client-* tokens with the bright CoreGIS set */
    --client-text:        #0c2b4e;
    --client-text-muted:  #5b7088;
    --client-bg:          #eef4fb;
    --client-bg-card:     #ffffff;
    --client-bg-input:    #ffffff;
    --client-bg-elevated: #0c2b4e;   /* header colour behind background.png */
    --client-border:      #d6e2f2;
    --client-accent:      #1574d6;   /* primary blue */
    --client-accent-ink:  #ffffff;
    --client-success:     #1fa64a;   /* green */
    --client-error:       #d6453d;
    --client-radius-md:   10px;
    --client-radius-lg:   16px;
}
* { box-sizing: border-box; }
.rr-body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--client-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
    background: var(--client-bg, #eef2f7); color: var(--client-text, #0f172a);
}

/* PART B: full-width header background — background.png COVERS the header bar at any
   viewport width (fills by width or height, anchored centre, no gaps). Relative url
   (resolved from this CSS file in /assets/). The navy colour stays as a fallback
   layer behind the image. Applies to BOTH the hero (front page) and compact headers
   (they share .rr-top). */
/* HEADER AREA: both variants live OVERLAPPING inside .rr-head and CROSS-FADE via
   opacity; the head's min-height transitions between the hero and compact heights over
   the same ~.7s as the card swipe, so the header changes IN SYNC with the card (no
   instant flip / snap). Driven by body[data-step] (set by showStep). */
.rr-head { position: relative; overflow: hidden; min-height: 92px; transition: min-height .7s cubic-bezier(.22, .61, .36, 1); }
body[data-step="address"] .rr-head { min-height: 250px; }
.rr-top {
    /* both headers stacked in the SAME place; opacity decides which is shown */
    position: absolute; top: 0; left: 0; right: 0;
    transition: opacity .7s ease;
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--client-bg-elevated, var(--rr-navy));
    color: #fff; padding: 14px 22px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
/* Brand/title block centered on the page (B). */
/* Header lockup: CoreGIS logo (~60px) on the left, "Your Property Reports" beside it,
   vertically centred. (rr-brand-mark wordmark is replaced by the logo.) */
.rr-brand { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; flex-wrap: wrap; }
.rr-brand-logo { height: 60px; width: auto; display: block; }
.rr-brand-mark { font-size: 30px; font-weight: 800; letter-spacing: .4px; color: var(--client-accent, var(--rr-teal)); }
/* "Your Property Reports" — matched to the front-page hero tagline so the header
   text reads identically across front + internal steps: same size (16px), weight
   (700) and colour (#000). Both headers share the .rr-top background image, so the
   tagline's light shadow is reused here for legibility. */
.rr-brand-sub { font-size: 16px; color: #000; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,.55); }

/* PART A: FRONT-PAGE distinct header — big centred CoreGIS logo (~3× the compact
   60px → 180px) + a tagline beneath. The header swap is driven by the body's
   data-step (set by showStep): the address step shows the hero, every other step
   shows the compact header. Default (page load / no-JS) = address → hero. */
/* Both variants are ALWAYS rendered (opacity-gated) so they can cross-fade. Default
   (offer/pay/done) = compact visible, hero faded out. */
.rr-top--hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 22px 8px; opacity: 0; pointer-events: none; }
.rr-hero-logo { height: 132px; width: auto; max-width: 100%; display: block; filter: drop-shadow(0 3px 6px rgba(8,16,28,.5)); }
/* PART C: front-page tagline — BLACK + BOLD. The tagline is DARK text on a light banner,
   so its legibility shadow is a light HALO (mirrors the account header's darker shadow on
   WHITE text) — strengthened bigger/more opaque so it reads clearly over the header image. */
.rr-hero-tagline { margin: 0; font-family: var(--client-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif); font-size: 13px; color: #000; font-weight: 700; max-width: 580px; line-height: 1.4; text-align: center; text-shadow: 0 1px 4px rgba(255,255,255,.9), 0 1px 8px rgba(255,255,255,.65); }
.rr-top--compact { display: block; opacity: 1; }
/* Address step → hero visible, compact faded out (the cross-fade is the opacity delta). */
body[data-step="address"] .rr-top--hero    { opacity: 1; pointer-events: auto; }
body[data-step="address"] .rr-top--compact { opacity: 0; pointer-events: none; }
@media (max-width: 520px) {
    .rr-hero-logo { height: 90px; }
    body[data-step="address"] .rr-head { min-height: 210px; }
}

/* (Legacy) inline CoreGIS wordmark class — the inline-in-text logos were reverted to
   plain "CoreGIS" text; rule kept harmless in case of reuse. */
.rr-logo-inline { height: 1.05em; width: auto; display: inline-block; vertical-align: -0.18em; }

/* A2: centre the active card both axes in the dark page area below the header.
   .rr-main fills the space below the header (flex:1) and centres its single visible
   card horizontally + vertically. */
/* PART F: bottom padding reconciled to match the top (was 48px → 28px) so it doesn't
   compound with the footer into an oversized gap. */
.rr-main { flex: 1 1 auto; width: 100%; max-width: 880px; margin: 0 auto; padding: 0 16px 8px;
    position: relative;   /* positioning context for the absolutely-overlaid swiping cards */
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* ISSUE 3 ROOT CAUSE + FIX: on the OFFER step the (tall) card was vertical-centred by
   justify-content:center, which split main's surplus height above AND below the card —
   pushing the footer strapline ~22px below the card. The earlier padding reduction
   (padding-bottom 28→8) served correctly but could NOT close that centring gap because
   the gap is centring, not padding. Aligning the offer card to the TOP makes the footer
   sit tight beneath it (surplus goes to the page bottom). The ADDRESS/DONE steps keep
   their centred layout — this is scoped to the offer step only. */
body[data-step="offer"] .rr-main { flex: 0 0 auto; justify-content: flex-start; padding-top: 16px; }
/* PART F: footer TOP padding removed (it stacked with .rr-main's bottom padding into
   an oversized gap); bottom padding zeroed too so the final block doesn't accumulate.
   Only horizontal padding remains. */
.rr-foot { text-align: center; color: var(--client-text-muted, #64748b); font-size: 12px; padding: 0 16px; }

/* A3: every step card shares ONE standard height (~650px) so the flow never jumps
   between steps. The card is a flex column; steps with a bottom action bar push it to
   the base (margin-top:auto), barless steps (address/done) centre their content. */
.rr-card {
    background: var(--client-bg-card, #fff); border: 1px solid var(--client-border, #dbe2ee);
    border-radius: var(--client-radius-lg, 16px); padding: 26px; box-shadow: 0 6px 24px rgba(15,39,64,.06);
    /* C1: ~30% narrower (820 → 574px) — a tighter, more focused card. Centred both
       axes by .rr-main (unchanged). Shared by every step.
       PART B: the old min-height:650px forced EVERY card to 650px, leaving a big
       white VOID inside shorter cards (e.g. the address card centring space + the
       offer card's empty space under the $25 block). Dropped to a content-fit floor
       (480px) so the card hugs its content — no dead void — while keeping a sensible
       consistent minimum across steps. Still centred both axes by .rr-main. */
    width: 100%; max-width: 574px; min-height: 480px;
}
.rr-step { display: none; }
.rr-step.is-active { display: flex; flex-direction: column; }
.rr-step[data-step="address"].is-active,
.rr-step[data-step="done"].is-active { justify-content: center; }
/* HORIZONTAL CARD SWIPE: on a step change BOTH cards are briefly visible — the outgoing
   slides OUT to the left while the incoming slides IN from the right (reversed on back).
   During the swipe each participating card is absolutely OVERLAID + centred in .rr-main
   (top/left 50% + a base translate(-50%,-50%)); the keyframes add the horizontal slide
   on top of that centring. ~.7s ease — the slide IS the paced transition (no 2s hold,
   no loading overlay). .rr-main.is-swiping clips the off-screen cards so no page
   scrollbar appears. showStep() applies/cleans these classes. */
.rr-main.is-swiping { overflow: hidden; }
/* No max-width here — each card keeps its OWN width (offer is 880px, others 574px) via
   .rr-card / .rr-card[data-step="offer"]; we only overlay + centre it during the slide. */
.rr-step.rr-swipe { position: absolute; top: 50%; left: 50%; width: 100%; margin: 0; }
.rr-step.rr-swipe-out-l { animation: rr-swipe-out-l .7s cubic-bezier(.22, .61, .36, 1) both; }
.rr-step.rr-swipe-in-r  { animation: rr-swipe-in-r  .7s cubic-bezier(.22, .61, .36, 1) both; }
.rr-step.rr-swipe-out-r { animation: rr-swipe-out-r .7s cubic-bezier(.22, .61, .36, 1) both; }
.rr-step.rr-swipe-in-l  { animation: rr-swipe-in-l  .7s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes rr-swipe-out-l { from { transform: translate(-50%, -50%) translateX(0); }    to { transform: translate(-50%, -50%) translateX(-120%); } }
@keyframes rr-swipe-in-r  { from { transform: translate(-50%, -50%) translateX(120%); } to { transform: translate(-50%, -50%) translateX(0); } }
@keyframes rr-swipe-out-r { from { transform: translate(-50%, -50%) translateX(0); }    to { transform: translate(-50%, -50%) translateX(120%); } }
@keyframes rr-swipe-in-l  { from { transform: translate(-50%, -50%) translateX(-120%); } to { transform: translate(-50%, -50%) translateX(0); } }
/* DROPDOWN BEHAVIOUR (no per-keystroke flash): the panel stays MOUNTED while typing and
   its rows are RECONCILED IN PLACE by render() (no innerHTML wipe), so there is never an
   empty frame between keystrokes. .rr-anim-in (rr-sug-panel) is the panel ENTRANCE only —
   fresh open / first-results-after-spinner. Steady-state typing updates are silent
   in-place edits with NO animation (nothing to cross-fade, because nothing is wiped).
   The old .rr-sug-xfade cross-fade was a band-aid over the wipe and has been removed. */
.rr-suggest.rr-anim-in { animation: rr-sug-panel .45s ease; }
@keyframes rr-sug-panel { from { opacity: .2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Respect reduced-motion — no swipe / header cross-fade / dropdown entrance motion for
   users who request it (showStep also does an instant swap; this is belt-and-braces). */
@media (prefers-reduced-motion: reduce) {
    .rr-step.rr-swipe-out-l, .rr-step.rr-swipe-in-r,
    .rr-step.rr-swipe-out-r, .rr-step.rr-swipe-in-l { animation: none; }
    .rr-head, .rr-top { transition: none; }
    .rr-suggest { transition: none; }
    .rr-suggest.rr-anim-in { animation: none; }
}

/* Headings sit on the storefront's WHITE .rr-card. The deployed dark Styles theme
   defines --client-text:#fff for ITS dark surfaces, so reading it here rendered the
   headings white-on-white (the "highlighted/invisible" bug). Pin every step heading
   to the storefront's own readable navy ink; body copy to a readable slate. */
.rr-h1 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 8px; color: var(--rr-navy); }
.rr-h2 { font-size: 20px; margin: 0 0 6px; color: var(--rr-navy); }
.rr-lede { color: #475569; margin: 0 0 18px; line-height: 1.5; }
/* Light "few easy steps" framing under the hero lede (C). */
.rr-steps { color: var(--rr-navy); font-weight: 600; margin: 0 0 18px; line-height: 1.5; }
.rr-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--client-text-muted, #64748b); margin: 10px 0 5px; }

.rr-input {
    width: 100%; padding: 11px 13px; font: inherit;
    background: var(--client-bg-input, #fff); color: var(--client-text, #0f172a);
    border: 1px solid var(--client-border, #cbd5e1); border-radius: var(--client-radius-md, 10px); outline: none;
}
.rr-input:focus { border-color: var(--client-accent, var(--rr-blue)); box-shadow: 0 0 0 3px rgba(21,116,214,.20); }

/* PART A: hero centred (address step only — offer/checkout/done keep their own
   alignment). Heading, intro, steps line, the Property-address label + input + the
   full-width button all centre in the narrowed card. */
.rr-step[data-step="address"] .rr-h1,
.rr-step[data-step="address"] .rr-lede,
.rr-step[data-step="address"] .rr-steps,
.rr-step[data-step="address"] .rr-label { text-align: center; }
/* Gap below the whole input+button block to the "Know your property's risks" heading,
   so the form is visually separated from the hero copy. */
.rr-addr-form { display: block; margin-bottom: 12px; }
/* The input STACKS above its button (own rows) — a flex column. align-items:stretch
   keeps the input full-width (the dropdown anchors to it); the button breaks out to a
   compact content width, centred under the input. Reflows cleanly on mobile (it's a
   single column at every width — no side-by-side to break). */
.rr-addr-row { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 5px; }
/* A4: positioning context for the floating suggestions; full input width so the
   dropdown anchors under the INPUT. */
.rr-addr-field { position: relative; width: 100%; min-width: 0; }
/* Confirmed-address LOCK state (rr_typeahead.js): the chosen suggestion sits read-only in
   the input with a round X to clear it. Single source — applies to the storefront, account
   runner + account landing boxes (all use .rr-addr-field + .rr-input). */
.rr-addr-field.is-locked .rr-input { padding-right: 42px; background: #f1f5f9; cursor: default; font-weight: 600; }
.rr-addr-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: none;
    width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
    background: var(--client-border, #cbd5e1); color: var(--rr-navy, #0f2740);
    font-size: 18px; line-height: 1; align-items: center; justify-content: center; }
.rr-addr-field.is-locked .rr-addr-clear { display: inline-flex; }
.rr-addr-clear:hover { background: #94a3b8; color: #fff; }
/* "Check my property" — NOT full-width: a compact, content-sized button centred on its
   own row UNDER the input. Size-only now: it is a .rr-btn--primary, so the shared
   white-on-blue darken+lift+shadow hover (CHANGE 3, above) drives it — no bespoke hover
   here, keeping the blue-button style single-sourced. */
.rr-addr-go { display: inline-flex; align-self: center; width: auto; margin: 0; padding: 10px 22px; font-size: 14px; white-space: nowrap; }

.rr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
    border: 1px solid transparent; border-radius: var(--client-radius-md, 10px);
    background: var(--client-bg-input, #eef2f7); color: var(--client-text, #0f172a);
    /* Shared transition so EVERY button (primary + secondary) animates its hover. */
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* CHANGE 3: the SINGLE shared blue-button style — white text on blue with the same
   clear darken+lift+shadow hover as "Check my property" (.rr-addr-go below now defers
   to this). Applies system-wide to EVERY .rr-btn--primary: Get my report, Continue to
   payment / Pay now, Check another property, Request a callback, the mock-pay buttons. */
.rr-btn--primary { background: var(--client-accent, var(--rr-blue)); color: var(--client-accent-ink, #fff); }
.rr-btn--primary:hover:not(:disabled) { background: var(--rr-blue-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,86,168,.34); }
.rr-btn--primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 12px rgba(15,39,64,.24); }
.rr-btn--ghost { background: transparent; border-color: var(--client-border, #cbd5e1); color: var(--rr-navy); }
/* B3: secondary "Start again" — a neutral grey, clearly distinct from the blue primary.
   CHANGE 4: AGGRESSIVE hover — the grey flips clean to deep navy with white text (+ a
   lift + shadow), a clear colour change rather than the old faint grey shift. Applies
   everywhere "Start again" appears (offer / checkout / pay). */
.rr-btn--secondary { background: #eef2f7; color: var(--rr-navy); border-color: #cbd5e1; }
.rr-btn--secondary:hover:not(:disabled) { background: var(--rr-navy); color: #fff; border-color: var(--rr-navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(12,43,78,.30); }
.rr-btn--secondary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 3px 10px rgba(12,43,78,.24); }
.rr-btn--lg { padding: 13px 24px; font-size: 16px; }
.rr-btn:disabled { opacity: .5; cursor: default; }
.rr-back { background: none; border: 0; color: var(--client-accent, var(--rr-teal)); font: inherit; cursor: pointer; padding: 0 0 12px; }

/* Collapses to ZERO height when empty (no reserved gap under the button); takes its
   natural height + top margin only when it actually holds a message. */
.rr-msg { font-size: 13px; margin-top: 10px; }
.rr-msg:empty { margin-top: 0; height: 0; overflow: hidden; }
.rr-msg.is-err { color: var(--client-error, #d6453d); }
.rr-msg.is-ok { color: var(--client-success, #2f9e63); }

/* PART B: floating suggestions panel — absolutely positioned UNDER the input and OUT
   OF DOCUMENT FLOW, so it never pushes or resizes the card; it floats over the page.
   Matches the input width (left/right:0 within .rr-addr-field). A clean floating list,
   not a boxed in-card area. */
.rr-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
    /* Capped + internally scrollable so the panel itself never grows unbounded; with
       the input now at the TOP of the card it opens DOWN into the card body (not off
       the bottom), so it cannot bleed into the footer or add page-scroll height.
       z-index 200 keeps it above the footer (< the pill 900 / modal 1000). */
    max-height: 264px; overflow-y: auto; overflow-x: hidden;
    background: #fff; border: 1px solid var(--client-border, #dbe2ee); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .20); text-align: left;
    /* B3: scrollable but NO visible scrollbar (cross-browser). */
    scrollbar-width: none; -ms-overflow-style: none;
    /* A1: soft ease in/out. It stays display:block when hidden (it's an ABSOLUTE
       overlay → keeping it in the box causes NO layout shift) and fades+slides via
       opacity/visibility/transform rather than snapping. */
    opacity: 1; visibility: visible; transform: translateY(0);
    /* E1: dropdown appear/disappear slowed ~2.5× (.17s → .42s) — a soft fade+slide. */
    transition: opacity .42s ease, transform .42s ease, visibility .42s;
}
.rr-suggest::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Hidden = eased OUT (NOT display:none, so the fade can play). The :empty hide rule
   is dropped — the [hidden] attr (toggled by JS) is the single show/hide gate. */
.rr-suggest[hidden] { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }
/* B2: every UNSELECTED row renders readable navy-on-white (was color:inherit = the
   dark theme's white token → white-on-white "empty" rows). Hover/active distinct. */
.rr-sug { display: block; width: 100%; text-align: left; padding: 11px 14px; background: #fff; border: 0; border-bottom: 1px solid #eef1f6; font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; color: var(--rr-navy); }
.rr-sug:last-child { border-bottom: 0; }
.rr-sug:hover, .rr-sug.is-active { background: #eef4fb; color: var(--rr-navy); }

/* Suggestion-fallback rows: a letter-suffix search (e.g. 2115A) with NO exact LINZ
   match, offering the base/nearest address as a NUDGE. Lighter-grey italic text, reinforcing the trailing "?" the engine appends so it is
   never read as a confirmed match. (Matches the CoreGIS map suggestion styling.) */
.rr-sug--suggest { font-style: italic; color: #7a7a7a; }

.rr-suggest-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px; background: var(--client-bg-card, #fff); color: var(--rr-navy); font-size: 13px; }

/* Offer step.
   PART D: the offer card is WIDER than the rest of the flow (the address/checkout
   cards stay at the focused 574px) so the right-hand details panel has real room.
   Targeted by the step attribute so only this card widens. */
.rr-card[data-step="offer"] { max-width: 880px; }
/* Two columns: LEFT = aerial (fixed-ish) with the $25 offer text stacked under it at
   the SAME width as the aerial; RIGHT = the fine-details panel (flexible, gets the
   extra room). Top-aligned so the panel starts level with the aerial. */
.rr-offer-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .rr-offer-grid { grid-template-columns: 1fr; } }
/* LEFT column is a flex stack: aerial then offer text, both full column width (= the
   aerial's width), so the offer text is locked to the aerial width beneath it. */
.rr-offer-left { display: flex; flex-direction: column; gap: 14px; }
.rr-snap { border-radius: 12px; overflow: hidden; border: 1px solid var(--client-border, #cbd5e1); background: #0b1626; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.rr-snap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-snap-ph { color: #94a3b8; font-size: 13px; }
/* Snapshot panel typography. These rows sit on the storefront's WHITE .rr-card,
   but the deployed Styles theme defines a DARK --client-text (#fff) for its own dark
   surfaces — inheriting it rendered the address heading + the four values
   white-on-white (the "boxed" look was selecting invisible text). Pin them to the
   storefront's own navy ink + a clean slate label (its intended light-card look),
   and inherit the body sans font (no serif fallback). */
#rr_prop_addr { color: var(--rr-navy); font-family: inherit; }
.rr-details { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; font-family: inherit; }
.rr-details dt { color: #5b6b7f; font-weight: 500; }
.rr-details dd { margin: 0; color: var(--rr-navy); font-weight: 600; }
.rr-found { margin-top: 14px; font-size: 15px; color: var(--rr-navy); }
/* Hits count uses the GREEN accent (the headline highlight) — pops against the blue UI. */
.rr-found strong { color: var(--rr-green); font-size: 18px; }
/* Intro / sub / closing copy around the hits list. The intro keeps the .rr-found
   15px + teal <strong> count; sub + closing are quieter muted lines. */
.rr-found-intro { margin: 0; }
.rr-found-sub { margin: 8px 0 0; font-size: 14px; color: #5b6b7f; }
/* CHANGE 1: 14px below the closing summary (matching the photo↔note gap) so it has the
   same breathing room above the offer-bar divider as the offer note. */
.rr-found-close { margin: 10px 0 14px; font-size: 13.5px; line-height: 1.5; color: #5b6b7f; }
/* Feature hits: ONE feature name per row — a clean COMPACT list. No border, no
   scrollbar, no fixed height (the full list renders); just a single separator line
   ACROSS THE TOP of the list. */
.rr-found-list { margin-top: 6px; padding: 6px 0 0; list-style: none; border-top: 1px solid var(--client-border, #e6e9ef); }
/* De-emphasised vs the summary lines: ~2px smaller + a lighter slate grey. */
.rr-feat { padding: 3px 0; font-size: 11px; line-height: 1.35; color: #94a3b8; font-family: inherit; }

/* ── Live per-layer check animation on the offer card (scaled PORT of the account
   runner scan; reuses the shared .rr-scan-* rows). ── */
/* Condensed single-line running count — smaller than the old two-line intro. */
.rr-found-intro--live { margin: 0 0 2px; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-found-intro--live strong { font-size: 16px; }
/* Capped scan area: overflow HIDDEN during the run (rows fall off the bottom, no
   scrollbar while running); once finished (.is-finished) it becomes scrollable only
   if the settled found-list exceeds the cap. */
.rr-found-scan-wrap { max-height: 300px; overflow: hidden; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--client-border, #e6e9ef); }
.rr-found-scan-wrap.is-finished { overflow-y: auto; }
/* Themed scrollbar for the finished summary list — brand blue thumb on a faint track
   (the offer palette --rr-blue / --rr-blue-dark), replacing the default browser grey.
   Standard (Firefox) + WebKit properties, single CSS source. */
.rr-found-scan-wrap { scrollbar-width: thin; scrollbar-color: var(--rr-blue, #1574d6) rgba(21,116,214,.10); }
.rr-found-scan-wrap::-webkit-scrollbar { width: 9px; }
.rr-found-scan-wrap::-webkit-scrollbar-track { background: rgba(21,116,214,.08); border-radius: 8px; }
.rr-found-scan-wrap::-webkit-scrollbar-thumb { background: var(--rr-blue, #1574d6); border-radius: 8px; border: 2px solid var(--client-bg-card, #fff); }
.rr-found-scan-wrap::-webkit-scrollbar-thumb:hover { background: var(--rr-blue-dark, #0d56a8); }
/* Gentle feel on the compact rows as they resolve/drop (rows themselves are .rr-scan-row). */
.rr-found-scan .rr-scan-row { transition: background .18s ease; }
/* FULL-WIDTH ITALIC condensed bottom disclaimer — spans the whole card (out of the
   narrow right column); tighter line-height saves a line vs the old wrapping. */
.rr-found-close--full { width: 100%; margin: 12px 0 0; font-style: italic; font-size: 12.5px; line-height: 1.4; color: #5b6b7f; }

/* Bottom action bar (B): Start again bottom-LEFT, primary action bottom-RIGHT.
   margin-top:auto pins it to the base of the standardised 650px card. */
.rr-offer-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--client-border, #e6e9ef); flex-wrap: wrap; }
.rr-offer-bar-right { display: flex; align-items: center; gap: 14px; }
.rr-price { font-size: 16px; color: var(--rr-navy); } .rr-price strong { font-size: 22px; color: var(--rr-navy); }
/* PART D: lives in the LEFT flex column now (gap owned by .rr-offer-left) — no own
   margin-top; full column width = locked to the aerial above it. */
/* CHANGE 1: 14px below the note (matching the .rr-offer-left photo↔note gap) so it
   doesn't touch the offer-bar divider line. */
.rr-offer-note { margin: 0 0 14px; padding: 14px 16px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; color: var(--rr-navy); font-size: 13.5px; line-height: 1.5; }
.rr-offer-note strong { color: var(--rr-navy); }
/* Gentle inline line shown in the details panel when nothing matched / on a fault. */
.rr-found-empty { margin-top: 4px; padding: 10px 12px; border: 1px dashed var(--client-border, #cbd5e1); border-radius: 10px; background: #f8fafc; color: #5b6b7f; font-size: 13px; line-height: 1.4; }

/* Checkout step (merged name+email+payment) */
.rr-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 6px; }
@media (max-width: 640px) { .rr-checkout-grid { grid-template-columns: 1fr; } }
/* CHANGE 5A: pull Full name (left col) + the amount (right col) UP directly under the
   intro line — tighten the intro's bottom gap and the grid/first-row top spacing so
   they don't sit spaced down. (Card min-height keeps the box height unchanged.) */
.rr-step[data-step="pay"] .rr-lede { margin-bottom: 6px; }
.rr-step[data-step="pay"] .rr-checkout-grid { margin-top: 2px; }
.rr-checkout-fields > .rr-label:first-child { margin-top: 2px; }
.rr-checkout-pay > .rr-pay-amount:first-child { margin-top: 2px; }
.rr-pay-incl { color: #475569; font-size: 13px; margin: 2px 0 12px; }
.rr-pay-amount { color: var(--rr-navy); font-size: 15px; margin-bottom: 6px; } .rr-pay-amount strong { font-size: 20px; color: var(--rr-navy); }
.rr-pay-methods { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rr-paymethod { flex: 1 1 140px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 13px 15px; border: 2px solid #cbd5e1; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.rr-paymethod:hover { border-color: var(--client-accent, var(--rr-teal)); }
.rr-paymethod.is-done { border-color: #2f9e63; background: #f0fdf4; }
.rr-paymethod-mark { font-weight: 800; font-size: 16px; color: #3c4043; display: inline-flex; align-items: center; }
.rr-gpay-g { color: #4285F4; }                                  /* Google-blue G (brand mark only) */
.rr-paymethod--pp .rr-paymethod-mark { color: #003087; }        /* PayPal navy */
.rr-paymethod--pp .rr-paymethod-mark em { color: #0070ba; font-style: normal; }   /* PayPal blue */
.rr-paymethod-state { font-size: 12px; color: #2f9e63; font-weight: 700; white-space: nowrap; }

/* Done actions */
.rr-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* Pay step */
.rr-paynote { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.rr-pay-card { max-width: 420px; }
.rr-pay-amount { font-size: 15px; margin-bottom: 10px; } .rr-pay-amount strong { font-size: 20px; }
.rr-pay-row { display: flex; gap: 12px; } .rr-pay-row > div { flex: 1; }
.rr-pay-card .rr-btn { margin-top: 16px; width: 100%; }

/* Done step */
.rr-done { text-align: center; }
.rr-check { width: 60px; height: 60px; margin: 4px auto 12px; border-radius: 50%; background: var(--client-success, #2f9e63); color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; }

/* ── Canonical NextJob dual-ring spinner (blue-and-orange) ───────────────────
   Reused VERBATIM from control/art/nextjob.css (.nj-spinner). The deployed stack
   does not load nextjob.css, so the brand colour vars are provided here. Outer
   ring teal, inner ring orange, opposite spin. Sized up (--xl) for a prominent,
   centred report loader; --lg/--md for tighter contexts. .nj-spinner is
   display:none by default — the loader wrappers below reveal it. */
:root { --nj-teal: #10A1AA; --nj-orange: #F6592A; }
.nj-spinner { position: relative; display: none; vertical-align: middle; }
.nj-spinner--md { width: 26px; height: 26px; }
.nj-spinner--lg { width: 48px; height: 48px; }
.nj-spinner--xl { width: 64px; height: 64px; }
.nj-spinner-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; }
.nj-spinner--lg .nj-spinner-ring, .nj-spinner--xl .nj-spinner-ring { border-width: 4px; }
.nj-spinner-ring--outer { border-top-color: var(--nj-teal); border-right-color: var(--nj-teal); animation: nj-spin-cw 1s linear infinite; }
.nj-spinner-ring--inner { inset: 4px; border-top-color: var(--nj-orange); border-left-color: var(--nj-orange); animation: nj-spin-ccw 1s linear infinite; }
.nj-spinner--lg .nj-spinner-ring--inner { inset: 8px; }
.nj-spinner--xl .nj-spinner-ring--inner { inset: 12px; }
@keyframes nj-spin-cw  { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes nj-spin-ccw { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
/* Loader contexts — centre the spinner + reveal it (override .nj-spinner display:none). */
.rr-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: var(--rr-navy); text-align: center; font-size: 14px; }
.rr-loading .nj-spinner,
.rr-snap .nj-spinner,
.rr-suggest-loading .nj-spinner,
.rr-run-compiling .nj-spinner,
.rr-scan-ico .nj-spinner,
.rr-msg .nj-spinner,
.rr-run-foot-finalising .nj-spinner,
.rr-btn .nj-spinner { display: inline-block; }
/* Finalising status spinner — visible + sized (the reveal above turns display on). */
.rr-run-foot-finalising .nj-spinner { width: 18px; height: 18px; }
/* Scan-row icon is a small 18px slot — size the spinner to fit inside it. */
.rr-scan-ico .nj-spinner { width: 15px; height: 15px; }

/* In-app modal */
.rr-modal-overlay { position: fixed; inset: 0; background: rgba(8,16,28,.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.rr-modal-overlay[hidden] { display: none; }
.rr-modal { position: relative; background: var(--client-bg-card, #fff); border-radius: var(--client-radius-lg, 16px); padding: 22px; max-width: 440px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.4); text-align: left; }
.rr-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 4px 6px; }
.rr-modal-close:hover { color: var(--rr-navy); }
.rr-modal-body { color: var(--rr-navy); line-height: 1.5; }
.rr-modal-body h3 { margin: 4px 28px 10px 0; font-size: 17px; color: var(--rr-navy); }
.rr-modal-body .rr-label { margin-top: 12px; }
.rr-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.rr-modal-foot .rr-btn { min-width: 110px; }
.rr-modal-sub { margin: 8px 0 0; font-size: 13px; color: #64748b; }
/* PART B: SLOW, soft modal fade-in. openModal() reflow-restarts .rr-modal-in so the
   keyframes replay on every open (display:none→flex can't be transitioned). The
   overlay fades and the panel rises gently — consistent with the step/dropdown easing. */
.rr-modal-overlay.rr-modal-in { animation: rr-modal-ov .55s ease both; }
.rr-modal-overlay.rr-modal-in .rr-modal { animation: rr-modal-rise .6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes rr-modal-ov { from { opacity: 0; } to { opacity: 1; } }
@keyframes rr-modal-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .rr-modal-overlay.rr-modal-in { animation: none; }
    .rr-modal-overlay.rr-modal-in .rr-modal { animation: none; }
}

/* ── Commercial upsell ("Need more?") ──────────────────────────────────────────
   Fixed top-right of the page (sits in the empty top-right corner — the header
   content is centred so it never overlaps it), BELOW the modal layer (z 1000). */
.rr-need-wrap { position: fixed; top: 14px; right: 16px; z-index: 900; }
/* Top-right pill CLUSTER (Part A): holds "My Login" + "Need more?" side by side in the
   same fixed corner. When the need-wrap is nested here it becomes the tooltip anchor
   (relative) instead of its own fixed pin, so the two pills sit in one row, not stacked. */
.rr-topright { position: fixed; top: 14px; right: 16px; z-index: 900; display: flex; align-items: center; gap: 10px; }
.rr-topright .rr-need-wrap { position: relative; top: auto; right: auto; }
/* "My Login" pill pinned to the LEFT of the header (mirror of .rr-topright). */
.rr-topleft { position: fixed; top: 14px; left: 16px; z-index: 900; display: flex; align-items: center; }
/* "My Login" toggle-styled pill — same .rr-btn family, teal-fill (the "on/primary"
   look) with a little switch knob, inverting to the white chip on hover/focus. Links
   to /account/login.php. */
.rr-login-pill { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: var(--client-accent, var(--rr-teal)); color: #fff; border: 1px solid var(--client-accent, var(--rr-teal));
    box-shadow: 0 4px 14px rgba(15,39,64,.14); }
.rr-login-pill:hover, .rr-login-pill:focus-visible { background: #fff; color: var(--client-accent, var(--rr-teal)); }
.rr-login-knob { width: 26px; height: 15px; border-radius: 999px; background: rgba(255,255,255,.5);
    position: relative; flex: 0 0 auto; transition: background .2s ease; }
.rr-login-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s ease, background .2s ease; }
.rr-login-pill:hover .rr-login-knob, .rr-login-pill:focus-visible .rr-login-knob { background: rgba(16,161,170,.3); }
.rr-login-pill:hover .rr-login-knob::after, .rr-login-pill:focus-visible .rr-login-knob::after { left: 13px; background: var(--client-accent, var(--rr-teal)); }
/* The pill reuses the .rr-btn family (same shape/size/font/radius as Start again /
   Get my report); styled as an on-brand white chip with teal ink + a soft float
   shadow, inverting to a teal fill on hover/focus. */
.rr-need { background: #fff; color: var(--client-accent, var(--rr-teal)); border: 1px solid var(--client-accent, var(--rr-teal)); box-shadow: 0 4px 14px rgba(15,39,64,.14); }
.rr-need:hover, .rr-need:focus-visible { background: var(--client-accent, var(--rr-teal)); color: #fff; }
/* Tooltip-style mini-popup — rounded, navy, on-brand; soft gentle fade in/out on
   hover or keyboard-focus of the pill (display stays so the fade can play). */
.rr-need-tip {
    position: absolute; top: calc(100% + 10px); right: 0; width: 250px;
    background: var(--rr-navy); color: #fff; border-radius: 12px; padding: 11px 14px;
    font-size: 12.5px; line-height: 1.45; font-weight: 500; text-align: left;
    box-shadow: 0 12px 30px rgba(8,16,28,.28);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity .38s ease, transform .38s ease, visibility .38s;
}
/* small caret pointing up at the pill */
.rr-need-tip::before { content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.rr-need-wrap:hover .rr-need-tip,
.rr-need:focus-visible ~ .rr-need-tip { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .rr-need-tip { transition: none; } }
@media (max-width: 520px) { .rr-need-tip { width: 210px; } }

/* Upsell modal content (rendered inside the shared rr-modal — gentle fade reused). */
.rr-up-modal { text-align: center; }
/* 2A: enlarged CoreGIS logo in the modal (was 44px) for more presence. */
.rr-up-logo { height: 68px; width: auto; max-width: 80%; display: block; margin: 2px auto 16px; }
.rr-up-modal h3 { margin: 0 0 10px; font-size: 18px; color: var(--rr-navy); }
.rr-up-modal p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--rr-navy); }
/* Email-only enquiry form (replaces the old mailto button). Fields LEFT-aligned inside
   the otherwise-centred upsell; the send button keeps the full-width CTA shape. */
.rr-up-form { text-align: left; margin-top: 6px; }
.rr-up-cta { width: 100%; margin-top: 12px; text-decoration: none; }
/* In-modal success state (swapped in by JS on a successful send — no native dialog). */
.rr-up-success { text-align: center; padding: 6px 0 2px; }
.rr-up-check { width: 48px; height: 48px; margin: 4px auto 10px; font-size: 26px; }
.rr-up-success-msg { margin: 0; font-size: 15px; color: var(--rr-navy); }
/* When the modal foot holds no buttons (e.g. the upsell — close via × / Esc only),
   collapse it so it adds no dead gap under the content. */
.rr-modal-foot:empty { margin: 0; }
/* Mock-pay modal accents */
.rr-paychip { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.rr-paychip .rr-gpay-g { color: #4285F4; } .rr-paychip--pp { color: #003087; } .rr-paychip--pp em { color: #0070ba; font-style: normal; }
.rr-mock-note { font-size: 12px; color: #64748b; margin-top: 12px; }

/* ── Session access gate (A) ── bare full-page centered single input, nothing else. */
.rr-gate-body { align-items: center; justify-content: center; padding: 24px; }
.rr-gate { width: 100%; max-width: 320px; }
.rr-gate-input { text-align: center; letter-spacing: 2px; }

/* ── Footer ── generic CoreGIS supporting line + "[CoreGIS logo] , a division of
   [NextJob logo]" lockup + a "© 2026 CoreGIS" copyright line. NO Core Engineering anywhere. */
.rr-foot p { margin: 2px auto; }
/* F2: the final footer text block adds NO bottom space (was stacking cumulatively). */
.rr-foot p:last-child { margin-bottom: 0; }
.rr-foot-lead { max-width: 600px; line-height: 1.5; }
/* D1+D3: lockup = [CoreGIS logo] , a division of [NextJob logo] — three cells on
   ONE baseline. Center-aligned inline-flex row, then each cell is nudged
   vertically and INDEPENDENTLY via its own CSS var so the line can be dialled in
   by hand. negative value = up. Starting nudges: text up a little, NextJob ~2x
   that, CoreGIS at rest — tweak the three vars below to fine-tune the baseline. */
.rr-foot-credit {
    font-weight: 700; color: var(--client-text-muted, #64748b);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap; margin-top: 3px;
    --rr-foot-coregis-y: 0px;   /* CoreGIS logo vertical nudge (negative = up) */
    --rr-foot-text-y: 0px;      /* connecting text vertical nudge */
    --rr-foot-nextjob-y: -5px;  /* NextJob logo vertical nudge */
}
.rr-foot-text { transform: translateY(var(--rr-foot-text-y)); white-space: nowrap; }
/* D2: CoreGIS stays at the current footer size (40px); NextJob reduced to ~30px. */
.rr-foot-logo { width: auto; display: inline-block; }
.rr-foot-logo--coregis { height: 40px; transform: translateY(var(--rr-foot-coregis-y)); }
.rr-foot-logo--nextjob { height: 30px; transform: translateY(var(--rr-foot-nextjob-y)); }
/* D4: copyright on its own line — CoreGIS (NOT Core Engineering). */
.rr-foot-copy { margin-top: 2px; color: var(--client-text-muted, #64748b); }

/* ── MOBILE RESPONSIVENESS ──────────────────────────────────────────────────────
   The flow is single-column-friendly already (addr-row stacks; offer-grid collapses
   at 720px, checkout at 640px; footer + action bars wrap). These breakpoints tighten
   the remaining desktop-sized chrome so the whole storefront reflows cleanly on a
   phone with NO horizontal scroll, overflow or overlap — and, per the brief, SHRINK
   and reposition the fixed "Need more?" pill so it can never overrun the header. */
@media (max-width: 600px) {
    /* Pill cluster: smaller chips + tighter to the corner so it clears the centred header. */
    .rr-topright { top: 10px; right: 10px; gap: 7px; }
    .rr-need-wrap { top: 10px; right: 10px; }
    .rr-need, .rr-login-pill { padding: 7px 12px; font-size: 13px; }
    .rr-login-txt { display: none; }   /* space-tight: knob-only "My Login" on phones */
    .rr-need-tip { width: 220px; }
    /* Cards + page gutters: more of the narrow viewport goes to content. */
    .rr-main { padding: 0 12px 6px; }
    .rr-card { padding: 18px; }
    .rr-top { padding: 12px 14px; }
    .rr-top--hero { padding: 10px 14px 8px; }
    /* Offer/checkout action bars: let the right-hand price+button group take the full
       row and space out, so the primary button never gets squeezed off-edge. */
    .rr-offer-bar-right { width: 100%; justify-content: space-between; }
    .rr-modal { padding: 18px; }
}
@media (max-width: 380px) {
    /* Very small phones: pill smaller again, hero/brand logos down a notch, big
       buttons trimmed — everything stays within the viewport width. */
    .rr-topright { top: 8px; right: 8px; gap: 6px; }
    .rr-need-wrap { top: 8px; right: 8px; }
    .rr-need, .rr-login-pill { padding: 6px 10px; font-size: 12px; }
    .rr-need-tip { width: 188px; }
    .rr-hero-logo { height: 76px; }
    .rr-brand-logo { height: 46px; }
    .rr-btn--lg { padding: 12px 18px; font-size: 15px; }
    .rr-up-logo { height: 58px; }
}

/* ═══ ACCOUNT-AREA CHROME (shared by /account/ landing + /account/reports.php) ══════
   CONDENSED top band that REPLACES the tall storefront hero on the signed-in pages:
   a small CoreGIS logo + tagline on the same cyan map texture, in a short horizontal
   band, plus a LARGE top-right cog whose in-app dropdown menu carries the user
   identity, the Your-property-reports / Account-home links, and Sign out. rr-acc-*
   namespace; retail.css tokens only. Rendered by account/account_chrome.php. */
.rr-acc-appbar {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 20px; color: #fff;
    background-image: url('background.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: var(--client-bg-elevated, var(--rr-navy)); box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.rr-acc-appbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rr-acc-appbar-logo { height: 44px; width: auto; display: block; flex: 0 0 auto; }
.rr-acc-appbar-tag {
    font-size: 13.5px; color: #000; font-weight: 700; line-height: 1.3;
    text-shadow: 0 1px 2px rgba(255,255,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Brand SCRIPT line ("Your Property Report") — shared across the storefront front
   page hero, the account app-bar, and the report PDF cover (retail_lib.php inlines the
   SAME font so the cover matches). Self-hosted Dancing Script 600 (tasteful, legible)
   so it renders offline in the headless-Chromium PDF engine too. Single CSS source. ── */
@font-face {
    font-family: 'RR Script';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/rr_script.woff2') format('woff2');
}
/* Self-hosted HANDWRITING face (Caveat 700, Google OFL) for the LANDING hero tagline —
   a casual handwritten script, distinct from the formal 'RR Script' cursive still used on
   the account app-bar + PDF cover. Bundled woff2 (fonts/rr_hand.woff2) so it renders on the
   served page with no external CDN dependency. */
@font-face {
    font-family: 'RR Hand';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/rr_hand.woff2') format('woff2');
}
.rr-script { font-family: 'RR Script', 'Segoe Script', 'Brush Script MT', cursive; font-weight: 600; color: var(--rr-navy); line-height: 1.1; }
/* Front-page hero: sits BETWEEN the big logo and the tagline. Handwriting face ('RR Hand'),
   overriding the shared .rr-script cursive on the landing only. */
.rr-hero-script { font-family: 'RR Hand', 'Segoe Script', 'Brush Script MT', cursive; font-size: 46px; margin: 4px 0 2px; text-shadow: 0 1px 4px rgba(255,255,255,.9), 0 1px 8px rgba(255,255,255,.65); }
/* Account app-bar: script is the KEY line; the checks tagline is its supporting sub-line
   stacked directly beneath it (logo stays to the left). */
.rr-acc-appbar-text { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.rr-acc-appbar-script { font-family: 'RR Hand', 'Segoe Script', 'Brush Script MT', cursive; font-size: 33px; }
@media (max-width: 560px) {
    .rr-hero-script { font-size: 32px; }
    .rr-acc-appbar-script { font-size: 26px; }
}

/* Large, prominent top-right cog (client-size) + its in-app menu. */
.rr-acc-cog-wrap { position: relative; flex: 0 0 auto; }
.rr-acc-cog {
    display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0;
    border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.92);
    color: var(--client-accent, var(--rr-teal)); box-shadow: 0 4px 14px rgba(15,39,64,.18);
    transition: background .18s ease;
}
.rr-acc-cog:hover, .rr-acc-cog:focus-visible { background: #fff; }
.rr-acc-cog svg { width: 30px; height: 30px; display: block; transition: transform .5s ease; }
.rr-acc-cog[aria-expanded="true"] svg { transform: rotate(90deg); }

.rr-acc-menu {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 240px; z-index: 1000;
    background: #fff; color: var(--rr-navy); border-radius: 14px; padding: 8px;
    box-shadow: 0 16px 40px rgba(8,16,28,.28); border: 1px solid var(--rr-line, #e6e9ef);
}
.rr-acc-menu[hidden] { display: none; }   /* explicit — beats the default display over [hidden] */
.rr-acc-menu::before {
    content: ''; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px; background: #fff;
    border-left: 1px solid var(--rr-line, #e6e9ef); border-top: 1px solid var(--rr-line, #e6e9ef);
    transform: rotate(45deg); border-radius: 2px;
}
.rr-acc-menu-user { padding: 10px 12px 12px; border-bottom: 1px solid var(--rr-line, #eef1f6); margin-bottom: 6px; }
.rr-acc-menu-name { display: block; font-weight: 800; font-size: 15px; color: var(--rr-navy); }
.rr-acc-menu-biz  { display: block; font-size: 12.5px; color: var(--client-text-muted, #64748b); margin-top: 2px; }
.rr-acc-menu-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
    font-size: 14px; font-weight: 600; color: var(--rr-navy); text-decoration: none; cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.rr-acc-menu-item svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
.rr-acc-menu-item:hover, .rr-acc-menu-item:focus-visible { background: #eef7f8; color: var(--client-accent, var(--rr-teal)); }
.rr-acc-menu-signout { color: #b4231d; }
.rr-acc-menu-signout:hover, .rr-acc-menu-signout:focus-visible { background: #fdecea; color: #b4231d; }

@media (max-width: 520px) {
    .rr-acc-appbar-tag { display: none; }
    .rr-acc-appbar-logo { height: 36px; }
    .rr-acc-cog { width: 46px; height: 46px; }
    .rr-acc-cog svg { width: 26px; height: 26px; }
    .rr-acc-menu { min-width: 220px; }
}

/* ── Top-right account IDENTITY block (username bold + company logo + company name) ──
   ADDED beside the CoreGIS/NextJob product brand, never replacing it. Base sizes here are
   the COMPACT (running) sizes; the idle overrides below make it bigger. */
.rr-acc-appbar-right { display: flex; align-items: flex-start; gap: 14px; flex: 0 0 auto; }
.rr-acc-identity { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 3px; min-width: 0; }
.rr-acc-identity-name { font-weight: 800; color: #fff; line-height: 1.1; font-size: 15px; word-break: break-word; text-shadow: 0 2px 6px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.55); }
/* Light plate so a dark-ink company logo stays visible on the cyan/navy band. */
.rr-acc-identity-logo { height: 28px; width: auto; max-width: 190px; display: block; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 6px; padding: 3px 6px; box-shadow: 0 3px 10px rgba(8,16,28,.42); filter: drop-shadow(0 3px 6px rgba(8,16,28,.5)); }
.rr-acc-identity-biz { font-size: 10.5px; color: #fff; opacity: .95; line-height: 1.15; max-width: 200px; text-shadow: 0 2px 5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); }

/* IDLE (no report running) — TALL band + bigger CoreGIS logo + bigger identity. Both account
   pages start idle; the runner CONDENSES to the compact base on run (body[data-acc-hdr="run"]
   is set by runner.js::goSplit). The landing has no runner.js → stays tall. */
.rr-acc-appbar        { transition: padding .45s ease; }
.rr-acc-appbar-logo   { transition: height .45s ease; }
.rr-acc-identity-name { transition: font-size .45s ease; }
.rr-acc-identity-logo { transition: height .45s ease; }
.rr-acc-identity-biz  { transition: font-size .45s ease; }
body:not([data-acc-hdr="run"]) .rr-acc-appbar        { padding: 22px 24px; }
body:not([data-acc-hdr="run"]) .rr-acc-appbar-logo   { height: 68px; }
body:not([data-acc-hdr="run"]) .rr-acc-identity-name { font-size: 22px; }
body:not([data-acc-hdr="run"]) .rr-acc-identity-logo { height: 48px; }
body:not([data-acc-hdr="run"]) .rr-acc-identity-biz  { font-size: 12.5px; }
@media (max-width: 520px) {
    body:not([data-acc-hdr="run"]) .rr-acc-appbar-logo   { height: 46px; }
    body:not([data-acc-hdr="run"]) .rr-acc-identity-name { font-size: 17px; }
    body:not([data-acc-hdr="run"]) .rr-acc-identity-logo { height: 34px; }
}
/* Reduced-motion — snap between idle/compact, no size transition. */
@media (prefers-reduced-motion: reduce) {
    .rr-acc-appbar, .rr-acc-appbar-logo, .rr-acc-identity-name, .rr-acc-identity-logo, .rr-acc-identity-biz { transition: none; }
}

/* ═══ ACCOUNT SPLIT-VIEW REPORT RUNNER (account/runner.php) ════════════════════════
   Left = live GIS map (NZ → the property, aerial + property-only LINZ boundary) with
   the address input overlaid initially; Right = paced per-layer check animation that
   swaps to the deduped truth-engine breakdown + Export PDF. rr-run-* namespace,
   retail.css tokens, canonical .nj-spinner. Mobile: columns stack. */
/* width:100% + box-sizing: the runner is a flex-column child of body.rr-body; its
   `margin: 0 auto` would otherwise disable flex-stretch and shrink the main to its
   content width — which then changes as the right-panel content swaps (a whole-layout
   reflow). An explicit width pins it to a stable box so nothing below reflows on swap. */
.rr-runner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 16px 22px; box-sizing: border-box; }
/* flex-start (NOT stretch): the right panel is a FIXED-height box, decoupled from the left
   column, so its content swapping (scan → compiling → breakdown) never stretches the row or
   reflows the layout. */
.rr-run-split { display: flex; gap: 18px; align-items: flex-start; width: 100%; box-sizing: border-box; }
.rr-run-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* Right panel is collapsed (width 0) until a run starts, then slides in. */
.rr-run-right { flex: 0 0 0; width: 0; min-width: 0; overflow: hidden; opacity: 0;
    transition: flex-basis .6s cubic-bezier(.22,.61,.36,1), width .6s cubic-bezier(.22,.61,.36,1), opacity .45s .15s; }
.rr-run-split.is-split .rr-run-left  { flex: 0 0 42%; }
/* Slightly WIDER than before (54%). Outer HEIGHT is set by JS (syncPanelHeight) to EXACTLY
   the left column's full height (map box + Property details box); the panel body scrolls
   internally. Fallback height keeps a sane box before JS runs / if it's unavailable. */
/* overflow:visible ONCE EXPANDED so the .rr-run-panel box-shadow renders on ALL sides
   (matching the left map card). The idle state keeps overflow:hidden for the width:0
   slide-in; once open the panel FILLS this box, so the only thing that escaped it was the
   shadow — the square overflow:hidden was clipping it (only the rounded-corner gaps leaked
   faint fragments). The panel's OWN overflow:hidden still clips its content; the list still
   scrolls inside .rr-run-panel-body. */
.rr-run-split.is-split .rr-run-right { flex: 0 0 56%; width: 56%; opacity: 1; height: 480px; overflow: visible; }

/* Map card — rounded, padded framing. Height trimmed a little (was 540/460) so the
   one-line copyright footer is no longer pushed off the bottom of the page. */
.rr-run-mapwrap { position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--rr-line, #e6e9ef); box-shadow: 0 10px 30px rgba(15,39,64,.10); background: #0c2b4e; }
.rr-run-map { width: 100%; height: 480px; transition: height .6s; }
.rr-run-split.is-split .rr-run-map { height: 410px; }
/* Leaflet attribution toned down to fit the brand. */
.rr-run-map .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); }
.rr-run-boundary { }   /* styled inline via L.geoJSON options */

/* Address input overlaid on the NZ map (initial state). */
.rr-run-overlay { position: absolute; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    padding: 22px; background: linear-gradient(180deg, rgba(8,20,36,.30), rgba(8,20,36,.55));
    transition: opacity .45s ease; }
.rr-run-overlay.is-hidden { opacity: 0; pointer-events: none; }
.rr-run-addr-card { width: 100%; max-width: 520px; background: #fff; border-radius: 16px; padding: 20px 22px;
    box-shadow: 0 22px 55px rgba(8,16,28,.40); }
.rr-run-addr-card .rr-label { display: block; text-align: center; margin: 0 0 10px; }
.rr-run-addr-card .rr-addr-field { position: relative; }
.rr-run-addr-card .rr-msg { text-align: center; }

/* LEFT property detail card (shown on resolve). Tightened — reduced padding + row spacing. */
.rr-run-details { background: #fff; border: 1px solid var(--rr-line, #e6e9ef); border-radius: 16px; padding: 11px 14px;
    box-shadow: 0 8px 24px rgba(15,39,64,.08); }
.rr-run-details[hidden] { display: none; }
.rr-run-details h3 { margin: 0 0 3px; font-size: 15px; color: var(--rr-navy, #0f2740); }
.rr-run-addr-line { margin: 0 0 7px; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--rr-navy, #0f2740); }
.rr-run-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 13px; line-height: 1.25; }
.rr-run-kv dt { color: var(--client-text-muted, #64748b); }
.rr-run-kv dd { margin: 0; font-weight: 600; color: var(--rr-navy, #0f2740); word-break: break-word; }

/* RIGHT panel shell. */
.rr-run-panel { background: #fff; border: 1px solid var(--rr-line, #e6e9ef); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15,39,64,.10); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.rr-run-panel-head { padding: 14px 18px; border-bottom: 1px solid var(--rr-line, #eef1f6); }
.rr-run-panel-head h2 { margin: 0; font-size: 16px; color: var(--rr-navy, #0f2740); }
.rr-run-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--client-text-muted, #64748b); }
/* Fills the fixed-height panel and scrolls INTERNALLY (min-height:0 lets a flex child
   scroll) — content swaps here without changing the panel/column height. */
.rr-run-panel-body { padding: 12px 14px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
/* Themed scrollbar — SAME treatment as the retail summary list (.rr-found-scan-wrap):
   brand-blue thumb on a faint blue track, replacing the default grey. Single CSS source. */
.rr-run-panel-body { scrollbar-width: thin; scrollbar-color: var(--rr-blue, #1574d6) rgba(21,116,214,.10); }
.rr-run-panel-body::-webkit-scrollbar { width: 9px; }
.rr-run-panel-body::-webkit-scrollbar-track { background: rgba(21,116,214,.08); border-radius: 8px; }
.rr-run-panel-body::-webkit-scrollbar-thumb { background: var(--rr-blue, #1574d6); border-radius: 8px; border: 2px solid var(--client-bg-card, #fff); }
.rr-run-panel-body::-webkit-scrollbar-thumb:hover { background: var(--rr-blue-dark, #0d56a8); }

/* Scan (paced per-layer check) list. */
/* COMPACT list — tighter rows so the whole checklist reads at a glance while it reorders. */
.rr-scan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rr-scan-row { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; font-size: 12px;
    color: var(--rr-navy, #0f2740); transition: background .2s; }
.rr-scan-row.is-active { background: #eef7f8; }
.rr-scan-row.is-done { }
/* Live-reorder groups: FOUND (hits) get a faint warm tint; CLEAR rows sink to the bottom,
   de-emphasised. TO-DO (pending) stay plain at the top. */
.rr-scan-row.is-hit { background: transparent; }
.rr-scan-row.is-clear { opacity: .6; }
.rr-scan-ico { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.rr-scan-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-scan-pending .rr-scan-name { color: var(--client-text-muted, #94a3b8); }
.rr-scan-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.rr-scan-badge--found { background: #fff4e6; color: #b45309; }
.rr-scan-badge--clear { background: #eef4ff; color: #64748b; }
.rr-scan-tick { color: #1fa64a; font-weight: 800; }
.rr-scan-dot { color: #cbd5e1; }
.rr-scan-progress { font-size: 12px; color: var(--client-text-muted, #64748b); margin: 0 0 8px; text-align: center; }

/* Compiling state (between scan and breakdown). */
.rr-run-compiling { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 10px; text-align: center;
    color: var(--rr-navy, #0f2740); font-size: 13.5px; }

/* Breakdown (deduped truth-engine output). */
.rr-bd-summary { display: flex; align-items: baseline; gap: 8px; padding: 4px 4px 12px; flex-wrap: wrap; }
.rr-bd-n { font-size: 30px; font-weight: 800; color: #1fa64a; line-height: 1; }
.rr-bd-of { font-size: 13px; color: var(--client-text-muted, #64748b); }
.rr-bd-list { list-style: none; margin: 0; padding: 0; }
.rr-bd-item { border: 1px solid var(--rr-line, #eef1f6); border-radius: 10px; margin: 0 0 8px; overflow: hidden; }
.rr-bd-sum { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.rr-bd-sum::-webkit-details-marker { display: none; }
.rr-bd-caret { flex: 0 0 auto; transition: transform .2s; color: #94a3b8; font-size: 12px; }
details[open] .rr-bd-caret { transform: rotate(90deg); }
.rr-bd-lname { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--rr-navy, #0f2740); }
.rr-bd-counts { flex: 0 0 auto; display: flex; gap: 6px; }
.rr-bd-chip { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.rr-bd-chip--exact { background: #e9f7ef; color: #1a7f4b; }
.rr-bd-chip--prox { background: #fff4e6; color: #b45309; }
.rr-bd-detail { padding: 4px 12px 12px; border-top: 1px solid var(--rr-line, #f1f4f9); }
.rr-bd-detail-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1574d6; margin: 10px 0 4px; }
.rr-bd-rec { border: 1px solid var(--rr-line, #eef1f6); border-radius: 8px; padding: 6px 8px; margin: 0 0 6px; font-size: 12px; }
.rr-bd-rec dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.rr-bd-rec dt { color: #64748b; } .rr-bd-rec dd { margin: 0; color: var(--rr-navy, #0f2740); word-break: break-word; }
.rr-bd-empty { color: var(--client-text-muted, #64748b); font-size: 13px; padding: 12px 4px; }
.rr-run-panel-foot { padding: 10px 14px; border-top: 1px solid var(--rr-line, #eef1f6); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rr-run-panel-foot .rr-btn { flex: 0 0 auto; }
/* "Run new" pinned to the RIGHT of the bottom row (across from Open PDF on the left). */
.rr-run-foot-newbtn { margin-left: auto; }
.rr-run-foot-note { font-size: 11.5px; color: var(--client-text-muted, #64748b); }
/* Bottom-of-block status line (progress while checking) + finalising spinner. */
.rr-run-foot-status { font-size: 12px; color: var(--client-text-muted, #64748b); }
.rr-run-foot-finalising { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--rr-navy, #0f2740); }

/* ── UNIFIED FINAL LIST — the compact scan line IS the final line ──────────────
   Compact summary line (found N of total), tight found lines with a collapse toggle
   revealing the truth-engine property table (collapsed by default). No larger-card swap. */
.rr-run-sum { font-size: 12px; color: var(--client-text-muted, #64748b); padding: 2px 4px 7px; }
.rr-run-sum-n { font-weight: 800; color: #1fa64a; font-size: 15px; }
.rr-scan-counts { flex: 0 0 auto; display: flex; gap: 5px; }
.rr-scan-chip { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.rr-scan-chip--exact { background: #e9f7ef; color: #1a7f4b; }
.rr-scan-chip--prox  { background: #fff4e6; color: #b45309; }
/* Found (expandable) line — the <li> is a plain container; its <summary> is the compact line. */
.rr-scan-row--exp { display: block; padding: 0; background: transparent; }
/* Hit rows are clean/white (no warm cream) — on BOTH the account runner AND the retail
   storefront summary; the base .rr-scan-row.is-hit is transparent. Kept as an explicit
   override for the runner's expandable rows. */
.rr-scan-row--exp.is-hit { background: transparent; }
.rr-scan-row--exp > details > summary.rr-scan-sum {
    display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; font-size: 12px;
    color: var(--rr-navy, #0f2740); cursor: pointer; list-style: none; transition: background .2s;
}
.rr-scan-row--exp > details > summary.rr-scan-sum::-webkit-details-marker { display: none; }
.rr-scan-row--exp > details > summary.rr-scan-sum:hover { background: #f4f7fb; }
.rr-scan-row--exp > details[open] > summary.rr-scan-sum { background: transparent; }
.rr-scan-caret { flex: 0 0 auto; color: #b45309; font-size: 10px; transition: transform .2s; }
.rr-scan-row--exp > details[open] .rr-scan-caret { transform: rotate(90deg); }
/* Collapsed table — indented under the line, compact (reuses .rr-bd-detail-h / .rr-bd-rec). */
.rr-scan-detail { padding: 2px 8px 8px 30px; }
.rr-scan-detail .rr-bd-detail-h { margin: 8px 0 3px; }
.rr-scan-detail .rr-bd-rec { margin: 0 0 5px; }

/* Saved-report PDF link — SHARED (single CSS source) by /account/reports (per-row) and the
   account landing "Recent addresses" list. Opens the stored truth-engine PDF in a new tab. */
.rr-pdf-link { color: var(--client-accent, #1574d6); font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.rr-pdf-link:hover { text-decoration: underline; }
.rr-pdf-none { color: #94a3b8; }

/* Mobile: stack the split into one column. */
@media (max-width: 860px) {
    .rr-run-split, .rr-run-split.is-split { flex-direction: column; }
    .rr-run-split.is-split .rr-run-left, .rr-run-split.is-split .rr-run-right { flex: 1 1 auto; width: 100%; max-width: none; height: auto; }
    .rr-run-right { transition: opacity .4s; }
    .rr-run-map, .rr-run-split.is-split .rr-run-map { height: 340px; }
    .rr-run-panel-body { max-height: none; overflow: visible; }
}

/* ── Terms & Conditions gate (shared by the retail "Get my report" step + the
   account runner "Check my property" step; markup from tc_gate.php, behaviour from
   tc_gate.js). Required tick box sits directly ABOVE the run button; the "Terms and
   Conditions" opener is a link-styled button that opens the in-portal summary modal. */
.rr-tc-row { margin: 0 0 12px; }
.rr-tc-label { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--rr-navy); cursor: pointer; line-height: 1.45; }
.rr-tc-check { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--client-accent, var(--rr-blue)); cursor: pointer; }
.rr-tc-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--client-accent, var(--rr-blue));
    text-decoration: underline; cursor: pointer; }
.rr-tc-link:hover, .rr-tc-link:focus-visible { color: var(--rr-blue-dark); }
/* The summary-terms modal reuses .rr-modal-overlay / .rr-modal; just size the body. */
.rr-tc-modal .rr-modal { max-width: 560px; }
.rr-tc-body { max-height: 62vh; overflow-y: auto; }
.rr-tc-body .rr-tc-h { margin: 2px 28px 12px 0; font-size: 17px; color: var(--rr-navy); }
.rr-tc-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--rr-navy); }
.rr-tc-body a { color: var(--client-accent, var(--rr-blue)); word-break: break-word; }