/* ============================================================================
   Market-Sure — design tokens and Bootstrap 5.3 overrides.

   Bold UAE-flag green to the fore, pure-white canvas, flat surfaces with
   sharp shadows. Modern fintech aesthetic, not faded/sand.
   ============================================================================ */

:root {
    /* Brand palette — bold flag green */
    --pa-primary:        #009A44;
    --pa-primary-700:    #007A35;
    --pa-primary-500:    #00B852;
    --pa-primary-100:    #E3F7EC;
    --pa-primary-50:     #F0FCF5;

    /* Ink scale */
    --pa-ink:            #0A0A0A;
    --pa-ink-2:          #1F1F1F;
    --pa-text-soft:      #4A4A4A;
    --pa-text-fade:      #6B6B6B;

    /* Surfaces — pure white, no cream */
    --pa-canvas:         #FFFFFF;
    --pa-surface:        #FAFAFA;
    --pa-surface-2:      #F4F4F5;
    --pa-border:         #E5E7EB;
    --pa-border-strong:  #D4D4D8;

    /* Accent — bold flag red */
    --pa-accent:         #DC1A2E;
    --pa-accent-700:     #B6121F;
    --pa-accent-100:     #FEE8EB;

    /* Status — distinct from brand */
    --pa-success:        #15803D;
    --pa-success-100:    #DCFCE7;
    --pa-warning:        #C2772A;
    --pa-warning-100:    #FEF3C7;
    --pa-danger:         var(--pa-accent);
    --pa-danger-100:     var(--pa-accent-100);
    --pa-info:           #2563EB;

    /* Typography */
    --pa-font-sans:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pa-font-serif:     "Source Serif 4", Georgia, "Times New Roman", serif;
    --pa-font-arabic:    "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;

    /* Shadows — sharp, modern */
    --pa-shadow-sm:      0 1px 2px rgba(10, 10, 10, 0.05);
    --pa-shadow-md:      0 2px 8px rgba(10, 10, 10, 0.06);
    --pa-shadow-lg:      0 8px 24px rgba(10, 10, 10, 0.08);

    /* Bootstrap CSS variable overrides */
    --bs-primary:        var(--pa-primary);
    --bs-primary-rgb:    0, 154, 68;
    --bs-success:        var(--pa-success);
    --bs-warning:        var(--pa-warning);
    --bs-danger:         var(--pa-danger);
    --bs-info:           var(--pa-info);
    --bs-body-color:     var(--pa-ink);
    --bs-body-bg:        var(--pa-canvas);
    --bs-border-color:   var(--pa-border);
    --bs-link-color:     var(--pa-primary);
    --bs-link-hover-color: var(--pa-primary-700);
    --bs-font-sans-serif: var(--pa-font-sans);
}

[dir="rtl"] {
    --pa-font-sans: var(--pa-font-arabic);
    --bs-font-sans-serif: var(--pa-font-arabic);
}

html, body {
    background-color: var(--pa-canvas);
    color: var(--pa-ink);
    font-family: var(--pa-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   Brand mark + wordmark
   --------------------------------------------------------------------------- */

.brand-wordmark {
    font-family: var(--pa-font-serif);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    color: var(--pa-ink);
    line-height: 1;
}
.brand-wordmark__dash {
    color: var(--pa-accent);
    margin: 0 0.05em;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Navigation — clean white with bottom border
   --------------------------------------------------------------------------- */

.pa-navbar {
    background: var(--pa-canvas);
    border-bottom: 1px solid var(--pa-border);
}
/* Desktop: keep the full top nav pinned on scroll, so every destination and
   the primary CTA stay one click away (replaces the old bottom mini-nav).
   Mobile is left static to spare the small viewport — a bottom Check CTA
   (.pa-mobilecta) covers the thumb zone there instead. */
@media (min-width: 992px) {
    .pa-navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}
.pa-navbar .nav-link {
    color: var(--pa-ink);
    font-weight: 500;
    padding-inline: 0.85rem;
}
/* Kebab that opens the language/currency slide-out — quiet icon button. */
.pa-settings-toggle {
    color: var(--pa-ink);
    border: 1px solid transparent;
    padding: 0.3rem 0.5rem;
    line-height: 1;
}
.pa-settings-toggle:hover,
.pa-settings-toggle:focus-visible {
    color: var(--pa-primary);
    border-color: var(--pa-border);
}
.pa-navbar .nav-link:hover {
    color: var(--pa-primary);
}

/* B2B "For brokers" entry — sits by Sign in, styled distinctly (charcoal
   pill) so the broker audience reads as a separate door, not another
   consumer tool. */
.pa-nav-brokers {
    border: 1.5px solid var(--pa-ink, #1a1a1a);
    color: var(--pa-ink, #1a1a1a);
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 0.9rem;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.pa-nav-brokers:hover,
.pa-nav-brokers:focus-visible {
    background: var(--pa-ink, #1a1a1a);
    color: #fff;
}

/* Language/currency slide-out — active option reads on-brand, not Bootstrap blue. */
.pa-settings-canvas .list-group-item.active {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--pa-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Buttons — bold green primary, bold red accent
   --------------------------------------------------------------------------- */

.btn {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.btn-primary {
    --bs-btn-color:            #fff;
    --bs-btn-bg:               var(--pa-primary);
    --bs-btn-border-color:     var(--pa-primary);
    --bs-btn-hover-bg:         var(--pa-primary-700);
    --bs-btn-hover-border-color: var(--pa-primary-700);
    --bs-btn-active-bg:        var(--pa-primary-700);
    --bs-btn-active-border-color: var(--pa-primary-700);
}

.btn-accent {
    --bs-btn-color:            #fff;
    --bs-btn-bg:               var(--pa-accent);
    --bs-btn-border-color:     var(--pa-accent);
    --bs-btn-hover-bg:         var(--pa-accent-700);
    --bs-btn-hover-border-color: var(--pa-accent-700);
    --bs-btn-active-bg:        var(--pa-accent-700);
    --bs-btn-active-border-color: var(--pa-accent-700);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color:            var(--pa-primary);
    --bs-btn-border-color:     var(--pa-primary);
    --bs-btn-hover-bg:         var(--pa-primary);
    --bs-btn-hover-border-color: var(--pa-primary);
    --bs-btn-active-bg:        var(--pa-primary-700);
}

.btn-lg {
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   Surfaces — flat white cards, subtle borders, no gradients
   --------------------------------------------------------------------------- */

.surface-card {
    background-color: var(--pa-canvas);
    border: 1px solid var(--pa-border);
    border-radius: 12px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.surface-card:hover {
    border-color: var(--pa-primary);
    box-shadow: var(--pa-shadow-md);
}
.surface-elevated {
    background-color: var(--pa-canvas);
    border: 1px solid var(--pa-border);
    border-radius: 16px;
    box-shadow: var(--pa-shadow-lg);
}
.surface-tint {
    background-color: var(--pa-primary-50);
    border: 1px solid var(--pa-primary-100);
    border-radius: 12px;
}
.surface-muted {
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: 12px;
}
.text-soft { color: var(--pa-text-soft); }
.text-fade { color: var(--pa-text-fade); }

.brand-mark {
    font-family: var(--pa-font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pa-primary);
}

/* ---------------------------------------------------------------------------
   Pills / chips — flat, bold
   --------------------------------------------------------------------------- */

.pa-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--pa-surface-2);
    color: var(--pa-text-soft);
    line-height: 1;
}
.pa-pill--accent {
    background: var(--pa-accent-100);
    color: var(--pa-accent-700);
}
.pa-pill--primary {
    background: var(--pa-primary-100);
    color: var(--pa-primary-700);
}
/* Soft, non-uppercase chip for community feature tags (Area Analysis). */
.pa-pill--soft {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    background: var(--pa-surface-2);
    color: var(--pa-text-soft);
}
/* 1-3 star rating used in the Market-Sure Area Analysis. */
.pa-stars {
    color: var(--pa-primary);
    font-size: 0.72rem;
    white-space: nowrap;
    letter-spacing: 0.05em;
}
.pa-stars .bi-star { opacity: 0.35; }
/* Remove-community cross on the compare selector pills. Dark green (visible
   on the light-green pill), pinned to the top-right corner. Doubled-class
   selectors so nothing in the cascade can override the positioning. */
.pa-chip.pa-chip {
    position: relative;
    padding-right: 1.5rem;
}
.pa-chip .pa-chip-x {
    position: absolute;
    top: 3px;
    right: 5px;
    border: 0;
    background: transparent;
    color: var(--pa-primary-700);
    opacity: 0.85;
    cursor: pointer;
    padding: 0;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 800;
}
.pa-chip .pa-chip-x i { display: block; line-height: 1; }
.pa-chip .pa-chip-x:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   Deal-score ring — bold colors, sharp inner border
   --------------------------------------------------------------------------- */

.score-ring {
    --score-color: var(--pa-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(
        var(--score-color) calc(var(--score-pct, 0%) * 1),
        var(--pa-surface-2) 0
    );
    position: relative;
}
.score-ring__inner {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--pa-canvas);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pa-border);
}
.score-ring__value {
    font-family: var(--pa-font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--pa-ink);
    line-height: 1;
}
.score-ring__label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pa-text-fade);
    margin-top: 0.2rem;
    font-weight: 600;
}

.score-ring--good   { --score-color: var(--pa-primary); }
.score-ring--fair   { --score-color: var(--pa-warning); }
.score-ring--poor   { --score-color: var(--pa-accent); }
.score-ring--none   { --score-color: var(--pa-border-strong); }

.score-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.88rem;
}
.score-chip--good   { background: var(--pa-primary);     color: #fff; }
.score-chip--fair   { background: var(--pa-warning);     color: #fff; }
.score-chip--poor   { background: var(--pa-accent);      color: #fff; }
.score-chip--none   { background: var(--pa-surface-2);   color: var(--pa-text-soft); }

/* ---------------------------------------------------------------------------
   Valuation band — three flat segments, no gradient fades
   --------------------------------------------------------------------------- */

.value-band {
    position: relative;
    height: 14px;
    border-radius: 7px;
    margin-top: 0.5rem;
    overflow: hidden;
    background: var(--pa-surface-2);
    display: flex;
}
.value-band__segment {
    height: 100%;
    flex: 1 1 0;
}
.value-band__segment--good { background: var(--pa-primary); }
.value-band__segment--fair { background: var(--pa-warning); }
.value-band__segment--poor { background: var(--pa-accent); }

.value-band__wrap {
    position: relative;
    padding-top: 34px;
    padding-bottom: 8px;
}
.value-band__marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}
.value-band__marker::after {
    content: "";
    display: block;
    width: 3px;
    height: 38px;
    background: var(--pa-ink);
    margin-inline: auto;
    margin-top: 4px;
    border-radius: 2px;
}
.value-band__label {
    display: inline-block;
    background: var(--pa-ink);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.value-band__ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--pa-text-fade);
    padding-inline: 0.25rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Proportional layout — segments and tick labels positioned at their
   actual numeric position along band_min..band_max rather than
   evenly-spaced. Keeps the asking-marker visually consistent with
   the p25/median/p75 reference points. */
.value-band--proportional {
    display: block;
}
.value-band--proportional .value-band__segment {
    position: absolute;
    top: 0;
    height: 100%;
}
.value-band__ticks--proportional {
    display: block;
    position: relative;
    height: 2.6em;             /* one 2-line label row */
    padding-inline: 0;
}
.value-band__ticks--proportional > span {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
}
/* Median row sits ABOVE the bar (anchored to its bottom, against the bar). */
.value-band__ticks--above { margin-bottom: 0.35rem; }
.value-band__ticks--above > span { bottom: 0; }
/* p25 / p75 row sits BELOW the bar. */
.value-band__ticks--below { margin-top: 0.35rem; }
.value-band__ticks--below > span { top: 0; }

/* ---------------------------------------------------------------------------
   Hero — bold green eyebrow, big serif headline, no fades
   --------------------------------------------------------------------------- */

.hero {
    padding-block: 4.5rem;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pa-primary);
    background: var(--pa-primary-100);
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.hero__headline {
    font-family: var(--pa-font-serif);
    font-size: clamp(2.2rem, 4.8vw, 3.75rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--pa-ink);
    margin-bottom: 1.25rem;
}
.hero__headline .accent-dash {
    color: var(--pa-accent);
    font-weight: 700;
}
.hero__headline .accent-word {
    color: var(--pa-primary);
}
.hero__lede {
    font-size: 1.15rem;
    color: var(--pa-text-soft);
    line-height: 1.55;
    max-width: 38rem;
    margin-bottom: 1.75rem;
}

.hero-card {
    background: var(--pa-canvas);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--pa-shadow-lg);
    border: 1px solid var(--pa-border);
}
.hero-card__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pa-primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Mobile-first refinements
   --------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .display-5 { font-size: 1.75rem; }
    .lead      { font-size: 1.05rem; }
    .container { padding-inline: 1.25rem; }
    .hero      { padding-block: 2.5rem; }
}

a, button, [role="button"] {
    min-height: 44px;
}
a.inline, button.btn-link, .navbar-brand, .nav-link, .alert .btn-close, .pa-pill {
    min-height: auto;
}

/* ---------------------------------------------------------------------------
   RTL polish
   --------------------------------------------------------------------------- */

[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-chevron-left {
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
   Report layout
   --------------------------------------------------------------------------- */

.report-header {
    background: var(--pa-canvas);
    border-radius: 16px;
    padding: 1.75rem;
    border: 1px solid var(--pa-border);
}

.report-section + .report-section {
    margin-top: 2.75rem;
}
.report-section__title {
    font-family: var(--pa-font-serif);
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.85rem;
    color: var(--pa-ink);
    letter-spacing: -0.01em;
}
.report-section__subtitle {
    color: var(--pa-text-soft);
    margin-bottom: 1.25rem;
    max-width: 48rem;
}

.report-stat {
    border-left: 3px solid var(--pa-primary);
    padding-inline-start: 0.85rem;
}
.report-stat__label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pa-text-fade);
    margin-bottom: 0.2rem;
    font-weight: 600;
}
.report-stat__value {
    font-family: var(--pa-font-serif);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--pa-ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.report-stat__hint {
    font-size: 0.82rem;
    color: var(--pa-text-soft);
    margin-top: 0.3rem;
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.comp-table th, .comp-table td {
    text-align: start;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--pa-border);
}
.comp-table th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pa-text-fade);
    font-weight: 700;
    background: var(--pa-surface);
    border-bottom: 2px solid var(--pa-border-strong);
}
.comp-table tbody tr:hover {
    background: var(--pa-primary-50);
}

.draft-email {
    background: var(--pa-canvas);
    border: 1px solid var(--pa-border);
    border-left: 4px solid var(--pa-primary);
    border-radius: 8px;
    padding: 1.4rem;
    font-family: var(--pa-font-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--pa-ink);
    white-space: pre-wrap;
}
.draft-email__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pa-primary);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.risk-flag {
    display: flex;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: var(--pa-surface);
    border-left: 4px solid var(--pa-warning);
    margin-bottom: 0.65rem;
}
.risk-flag--high {
    border-left-color: var(--pa-accent);
    background: var(--pa-accent-100);
}
.risk-flag--low {
    border-left-color: var(--pa-primary);
    background: var(--pa-primary-50);
}

/* ---------------------------------------------------------------------------
   Floating mini-nav + back-to-top — appear after scrolling past the hero.
   --------------------------------------------------------------------------- */

/* Mobile-only floating "Check an offer" CTA. The top nav is sticky on lg+,
   so the desktop primary action is always reachable up top; on small screens
   the nav scrolls away, so this keeps Check in the thumb zone. Appears after
   the user scrolls past the hero (driven by floatnav.js). */
.pa-mobilecta {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    background: var(--pa-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 999px;
    box-shadow: var(--pa-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease, background 120ms ease;
}
.pa-mobilecta.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.pa-mobilecta:hover,
.pa-mobilecta:focus-visible {
    background: var(--pa-primary-700);
    color: #fff;
}
/* Desktop keeps the sticky top nav — no bottom CTA needed there. */
@media (min-width: 992px) {
    .pa-mobilecta { display: none !important; }
}

.pa-backtotop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1031;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pa-primary);
    color: #fff;
    border: none;
    box-shadow: var(--pa-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(80px);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease, background 120ms ease;
    font-size: 1.1rem;
    line-height: 1;
}
.pa-backtotop.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.pa-backtotop:hover {
    background: var(--pa-primary-700);
}

/* ---------------------------------------------------------------------------
   Dialogue generator widget (sample + real reports)
   --------------------------------------------------------------------------- */

.dialogue-widget {
    border-left: 4px solid var(--pa-primary);
}
.dialogue-controls {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.dialogue-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dialogue-control-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pa-text-fade);
    font-weight: 700;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.dialogue-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.dialogue-pills .btn {
    min-height: auto;
}
.dialogue-output {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
}
.dialogue-output__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.dialogue-output__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pa-primary);
    font-weight: 700;
}
.dialogue-output__text {
    margin: 0;
    font-family: var(--pa-font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pa-ink);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.dialogue-output__copy.is-copied {
    background: var(--pa-primary);
    color: #fff;
    border-color: var(--pa-primary);
}

/* ---------------------------------------------------------------------------
   Sample-report gating — locked rows show the SHAPE of the content but the
   text itself is frosted/blurred so it can't be read. Lets the user see
   there is more there without giving the playbook away.
   --------------------------------------------------------------------------- */

.dialogue-controls--compact { gap: 0.85rem; margin-bottom: 1rem; }
.dialogue-controls--compact .dialogue-control-group { gap: 0.35rem; }
.dialogue-controls--compact .dialogue-control-label { font-size: 0.7rem; }

/* Locked radio / checkbox controls — visibly disabled but still readable
   as labels (channel / tone / register), so the user understands what they'd
   unlock. */
.btn-check:disabled + .btn,
.btn-check[disabled] + .btn {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--pa-surface);
    color: var(--pa-text-fade);
    border-color: var(--pa-border);
    pointer-events: none;
}

/* Frosted negotiation-point detail. Title stays sharp; detail is blurred. */
.pa-locked__blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    pointer-events: none;
    color: var(--pa-ink);
}

/* Frosted dialogue email body. Container clips so the blur halo doesn't
   leak out of the card. The text is still painted in full so users can see
   shape, paragraph breaks, and length — they just can't read it. */
.dialogue-output--gated .dialogue-output__masked {
    position: relative;
    max-height: 11rem;
    overflow: hidden;
    border-radius: 4px;
}
.dialogue-output--gated .dialogue-output__masked .dialogue-output__text {
    margin: 0;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* Subtle frost lock badge centred over the blurred email */
.dialogue-output--gated .dialogue-output__masked::after {
    content: "\F47B"; /* bi-lock-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    color: var(--pa-primary);
    background: rgba(255, 255, 255, 0.85);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Unlock CTA bar */
.dialogue-output__unlock {
    margin-top: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: var(--pa-primary-50, #ecf7f1);
    border: 1px solid var(--pa-primary-100, #cfe9dc);
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Feature-refinement tier picker
   --------------------------------------------------------------------------- */
.feature-refiner__tier {
    display: block;
    position: relative;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--pa-border);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    height: 100%;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.feature-refiner__tier input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.feature-refiner__tier:hover {
    border-color: var(--pa-primary);
    background: var(--pa-primary-50, #F0FCF5);
}
/* The label highlights for the currently-checked radio. Uses :has()
   so the visual reflects the live radio state immediately on click,
   not just the initially-rendered server selection. */
.feature-refiner__tier:has(input[type="radio"]:checked),
.feature-refiner__tier--active {
    border-color: var(--pa-primary);
    background: var(--pa-primary-50, #F0FCF5);
    box-shadow: inset 0 0 0 1px var(--pa-primary);
}
.feature-refiner__tier-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.feature-refiner__tier-label {
    font-weight: 600;
    font-size: 0.9rem;
}
.feature-refiner__tier-delta {
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.feature-refiner__tier-blurb {
    font-size: 0.8rem;
    color: var(--pa-text-fade);
    line-height: 1.35;
}

/* Staged change indicator. When the user picks a tier different from
   the one the server rendered as current, JS marks the new pick with
   --staged (brightened green, "Moving to" pill) and the original with
   --from (greyed, "Currently" pill). Both stay visible until the form
   is submitted ("Re-score with these tiers"), so the customer sees the
   transition rather than instantly losing the previous reference. */
.feature-refiner__tier--staged {
    border-color: var(--pa-primary) !important;
    background: var(--pa-primary-50, #F0FCF5) !important;
    box-shadow: 0 0 0 2px var(--pa-primary),
                0 6px 12px -4px rgba(46, 168, 102, 0.28) !important;
    transform: translateY(-1px);
}
.feature-refiner__tier--staged::after {
    content: "Moving to";
    position: absolute;
    top: -10px;
    right: 10px;
    background: var(--pa-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.feature-refiner__tier--from {
    border-color: var(--pa-text-fade, #6c757d) !important;
    border-style: dashed !important;
    background: #F4F4F6 !important;
    box-shadow: inset 0 0 0 1px rgba(108, 117, 125, 0.4) !important;
    opacity: 0.72;
}
.feature-refiner__tier--from::after {
    content: "Currently";
    position: absolute;
    top: -10px;
    left: 10px;
    background: var(--pa-text-fade, #6c757d);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* Suppress the hover-green on the --from tier so it doesn't briefly
   re-skin like a normal candidate when the cursor passes over it. */
.feature-refiner__tier--from:hover {
    border-color: var(--pa-text-fade, #6c757d) !important;
    background: #ECECEF !important;
}

/* ---------------------------------------------------------------------------
   Dev-only floating admin nav (.pa-adminnav)
   Anchored bottom-LEFT so it never collides with the public .pa-floatnav
   that anchors centred. Visible only when ``config.DEBUG`` is True (the
   include site enforces this). Bottom-left rather than top-anything so it
   stays out of the way on small screens.
   --------------------------------------------------------------------------- */
.pa-adminnav {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 1040;          /* above pa-floatnav and back-to-top */
    font-family: var(--pa-font-mono, ui-monospace, "SFMono-Regular", monospace);
}
.pa-adminnav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1.5px solid var(--pa-accent, #DC1A2E);
    background: #fff;
    color: var(--pa-accent, #DC1A2E);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--pa-shadow-lg);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
.pa-adminnav__toggle:hover {
    background: var(--pa-accent, #DC1A2E);
    color: #fff;
    transform: translateY(-1px);
}
.pa-adminnav__toggle .bi {
    font-size: 1rem;
}
.pa-adminnav--open .pa-adminnav__toggle {
    background: var(--pa-accent, #DC1A2E);
    color: #fff;
}
.pa-adminnav__menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 0.45rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: 12px;
    box-shadow: var(--pa-shadow-lg);
    font-family: var(--pa-font-body, system-ui);
    font-size: 0.86rem;
    max-height: 70vh;
    overflow-y: auto;
}
.pa-adminnav__menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    color: var(--pa-ink);
    text-decoration: none;
    white-space: nowrap;
}
.pa-adminnav__menu a:hover {
    background: var(--pa-primary-50, #F0FCF5);
    color: var(--pa-primary);
}
.pa-adminnav__menu a .bi {
    color: var(--pa-text-fade);
    width: 1.1rem;
    flex-shrink: 0;
}
.pa-adminnav__menu a:hover .bi {
    color: var(--pa-primary);
}
/* Live report preview rows — label + inline Buy/Rent links. */
.pa-adminnav__preview-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.pa-adminnav__preview-row .bi {
    color: var(--pa-text-fade);
    width: 1.1rem;
    flex-shrink: 0;
}
.pa-adminnav__preview-label {
    color: var(--pa-text-fade);
    margin-right: auto;
}
.pa-adminnav__preview-row a {
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background: var(--pa-primary-50, #F0FCF5);
    color: var(--pa-primary);
    text-decoration: none;
    font-weight: 600;
}
.pa-adminnav__preview-row a:hover {
    background: var(--pa-primary);
    color: #fff;
}
.pa-adminnav__group-label {
    padding: 0.55rem 0.85rem 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pa-text-fade);
    border-top: 1px solid var(--pa-border);
}
.pa-adminnav__group-label:first-child {
    border-top: none;
    padding-top: 0.3rem;
}
.pa-adminnav__footer {
    border-top: 1px solid var(--pa-border);
    padding: 0.5rem 0.85rem;
    text-align: center;
}
@media (max-width: 575.98px) {
    .pa-adminnav {
        bottom: 12px;
        left: 12px;
    }
    .pa-adminnav__toggle-label { display: none; }
    .pa-adminnav__toggle { padding: 0.5rem; }
    .pa-adminnav__menu { min-width: 200px; }
}

/* ---------------------------------------------------------------------------
   Legal / policy markdown rendering
   Used by /terms/nwnf and any other markdown-driven canonical document.
   --------------------------------------------------------------------------- */
.terms-summary,
.terms-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pa-ink);
}
.terms-summary p,
.terms-body p {
    margin-bottom: 0.85rem;
}
.terms-summary ul,
.terms-body ul,
.terms-summary ol,
.terms-body ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.terms-summary li,
.terms-body li {
    margin-bottom: 0.4rem;
}
.terms-body h2 {
    font-family: var(--pa-font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1.5px solid var(--pa-border);
    letter-spacing: -0.01em;
}
.terms-body h2:first-child {
    margin-top: 0;
}
.terms-body h3 {
    font-family: var(--pa-font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
}
.terms-body strong {
    color: var(--pa-ink);
    font-weight: 700;
}
.terms-body blockquote {
    border-left: 3px solid var(--pa-primary);
    background: var(--pa-primary-50, #F0FCF5);
    padding: 0.6rem 1rem;
    margin: 0.75rem 0;
    font-family: var(--pa-font-mono, monospace);
    font-size: 0.88rem;
    border-radius: 0 6px 6px 0;
}
.terms-body code {
    background: #F4F4F6;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85rem;
    color: var(--pa-ink);
}
.terms-body a {
    color: var(--pa-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
@media (max-width: 575.98px) {
    .terms-body h2 { font-size: 1.2rem; }
    .terms-body h3 { font-size: 1rem; }
    .terms-summary,
    .terms-body { font-size: 0.92rem; }
    .terms-body blockquote { font-size: 0.82rem; }
}

/* Accent (negative-flex) variants. .text-accent / .pa-pill--accent. */
.text-accent { color: var(--pa-accent, #DC1A2E); }
.pa-pill--accent {
    background: rgba(220, 26, 46, 0.08);
    color: var(--pa-accent, #DC1A2E);
    border: 1px solid rgba(220, 26, 46, 0.18);
}

/* Global loading overlay (report generation + meaningful requests). */
.pa-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 42, 27, 0.55);
    backdrop-filter: blur(2px);
}
.pa-loading__box {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 2.25rem;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    max-width: 22rem;
}
.pa-loading__box .spinner-border { color: var(--pa-primary, #009A44); width: 2.4rem; height: 2.4rem; }
.pa-loading__msg { margin-top: 0.9rem; font-weight: 600; color: var(--pa-ink, #0d2a1b); }