/* ===========================================================================
   private-agent.css   (v4 — STRUCTURAL PARITY + CYAN THEME)
   ---------------------------------------------------------------------------
   WHAT CHANGED IN v4 vs v3:

   CORE GOAL: Every agent journey view now uses the SAME two-column layout
   architecture as the private seller:

       ┌──────────────────────────────────┬──────────────┐
       │ .ps-left                         │ .ps-right    │
       │ ┌────────────────────────────┐   │              │
       │ │ .pa-sticky-header (sticky) │   │  Intel /     │
       │ │ breadcrumb + dots + label  │   │  twin card   │
       │ │ + h2 question              │   │  + tips      │
       │ └────────────────────────────┘   │              │
       │ [fluid scrollable body]          │              │
       │ ┌────────────────────────────┐   │              │
       │ │ .ps-nav (sticky bottom)    │   │              │
       │ │ ← Back    Continue →      │   │              │
       │ └────────────────────────────┘   │              │
       └──────────────────────────────────┴──────────────┘

   The .ps-left is SPLIT into three zones:
     1. Sticky header   — breadcrumb pill + progress dots + scene-label + h2
     2. Fluid body      — scrollable form / cards / content (flex: 1 1 auto)
     3. Sticky footer   — Back / Continue nav bar (position:sticky bottom:0)

   The .ps-right is a full-height sidebar (flex: 0 0 36%) with its own
   internal scroll — matching the seller's design exactly.

   THEME: Private Seller uses ORANGE (#F58220). Property Agent uses CYAN
   (#56c4f8). Every orange-tinted seller variable is overridden inside
   .pa-host to use the brand-cyan palette. The shell chrome (white
   backgrounds, soft borders, light shadows) is IDENTICAL between the two
   journeys so they feel like siblings, not strangers.

   WHAT THIS FILE PROVIDES:
     1. Shell + stage / slot machinery (unchanged from v3)
     2. .pa-host two-column structural enforcement
     3. .pa-sticky-header (sticky top) — the shared header zone
     4. .pa-host .ps-left structural layout rules
     5. .pa-host .ps-right structural layout rules
     6. All accent overrides (orange → cyan) inside .pa-host
     7. Hub / Profile / Mandate / Commission / Listing view chrome
     8. Mobile responsive behaviour mirroring the seller's breakpoints
   =========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-module-shell {
    width: 100%;
    height: 100%;
    background: var(--pa-bg);
    color: var(--pa-ink);
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    position: relative;
    box-shadow: var(--pa-shadow-card);
}

.pa-page-wrapper {
    width: 100%;
    height: calc(100vh - 60px);
    padding: 12px;
    display: flex;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .pa-page-wrapper {
        padding: 0;
        height: 100vh;
    }

    .pa-module-shell {
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CORNER CHANGE-ROLE PILL
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-change-role {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--pa-line);
    color: var(--pa-ink-soft);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .02em;
    transition: all .18s ease;
}

    .pa-change-role:hover {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
    }

    .pa-change-role i,
    .pa-change-role .pa-icon {
        font-size: 12px;
        width: 12px;
        height: 12px;
    }

@media (max-width: 540px) {
    .pa-change-role {
        top: 8px;
        right: 8px;
        padding: 5px 10px;
        font-size: 11px;
    }

        .pa-change-role span {
            display: none;
        }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. STAGE / SLOTS
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-stage {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.pa-slot {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
}

    .pa-slot.is-visible {
        display: block;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   4. .pa-host WRAPPER — two-column structural enforcement
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host {
    display: none;
    width: 100%;
    height: 100%;
}

    .pa-host.pa-host-active {
        display: block;
    }

    /* Every scene inside the agent host is a flex ROW —
       left column (content) + right column (intel/twin) */
    .pa-host > .ps-scene {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
   5. .ps-left — LEFT COLUMN (structured as seller: header + body + nav)
   ═══════════════════════════════════════════════════════════════════════════ */

    .pa-host .ps-left {
        flex: 1 1 64%;
        min-width: 0;
        min-height: 0;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important; /* padding is handled by child zones */
        position: relative !important;
    }

    /* ─── STICKY HEADER ZONE ─────────────────────────────────────────────────── */
    /* The .pa-sticky-header div wraps: breadcrumb pill + progress dots +
   .ps-scene-label + .ps-question. It pins to the top of .ps-left so those
   elements remain visible even when the body content is long and scrolled.
   All per-element sticky rules from seller-additions.css are neutralised
   inside this wrapper so only the wrapper sticks (see v7 of
   private-agent-profile.css — extended here to all agent partials). */

    .pa-host .pa-sticky-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        flex-shrink: 0 !important;
        background: var(--pa-bg) !important;
        margin: 0 !important;
        padding: 14px 22px 12px !important;
        border-bottom: 1px solid var(--pa-line) !important;
        box-shadow: 0 4px 12px -8px rgba(14, 14, 17, 0.10) !important;
    }

    /* Kill per-element stickiness inside the wrapper */
    .pa-host .ps-left .pa-sticky-header > .ps-breadcrumb,
    .pa-host .ps-left .pa-sticky-header > [id*="paBreadcrumb"],
    .pa-host .ps-left .pa-sticky-header .ps-progress,
    .pa-host .ps-left .pa-sticky-header .ps-scene-label,
    .pa-host .ps-left .pa-sticky-header .ps-question,
    .pa-host .ps-left .pa-sticky-header .ps-subtitle {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        background: transparent !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Also suppress the seller-additions.css v4 fade pseudo-element when our
   wrapper is present — it was anchored at a stacked-sticky position */
    .pa-host .ps-left:has(.pa-sticky-header)::before {
        display: none !important;
    }

    /* Vertical rhythm inside sticky header */
    .pa-host .pa-sticky-header .ps-breadcrumb,
    .pa-host .pa-sticky-header [id*="paBreadcrumb"] {
        margin-bottom: 6px;
    }

    .pa-host .pa-sticky-header .ps-progress {
        margin: 4px 0 !important;
        padding-left: 0 !important;
    }

    .pa-host .pa-sticky-header .ps-scene-label {
        margin: 6px 0 2px;
    }

    .pa-host .pa-sticky-header .ps-question {
        margin: 4px 0 0;
        font-size: clamp(1.1rem, 1.9vw, 1.55rem) !important;
        line-height: 1.2 !important;
    }

    .pa-host .pa-sticky-header .ps-subtitle {
        margin: 4px 0 0;
        font-size: clamp(0.72rem, 0.95vw, 0.82rem);
        color: var(--pa-ink-soft);
        line-height: 1.45;
    }

    /* ─── FLUID BODY ZONE ────────────────────────────────────────────────────── */
    /* The scrollable zone between the sticky header and the sticky nav.
   Padding matches the seller: 0 18px left body, 22px from the sticky header. */

    .pa-host .pa-left-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 18px 12px 22px !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(86, 196, 248, 0.25) transparent;
    }

        .pa-host .pa-left-body::-webkit-scrollbar {
            width: 4px;
        }

        .pa-host .pa-left-body::-webkit-scrollbar-thumb {
            background: rgba(86, 196, 248, 0.25);
            border-radius: 2px;
        }

    /* ─── STICKY NAV (FOOTER) ZONE ───────────────────────────────────────────── */
    /* Mirrors private-agent-profile.css v7 but extended globally to ALL
   agent partials. Back / Continue buttons are pinned to the bottom of
   .ps-left regardless of body content height. */

    .pa-host .ps-left .ps-nav,
    .pa-host .ps-left .ps-nav-dna {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 25 !important;
        flex-shrink: 0 !important;
        background: var(--pa-bg) !important;
        margin: 0 !important;
        padding: 12px 22px !important;
        border-top: 1px solid var(--pa-line) !important;
        box-shadow: 0 -4px 12px -8px rgba(14, 14, 17, 0.10) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Ensure nav is always visible — override any margin-top:auto that might
   push it out of view when inside the flex column */
    .pa-host .ps-left .ps-nav {
        margin-top: 0 !important;
    }

    /* When a scene has no .pa-left-body wrapper (legacy partials that render
   content directly), give their form element the fluid behaviour */
    .pa-host .ps-left > form {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
   6. .ps-right — RIGHT COLUMN (intel panel, mirrors seller)
   ═══════════════════════════════════════════════════════════════════════════ */

    .pa-host .ps-right {
        flex: 0 0 36% !important;
        min-width: 280px !important;
        max-width: 360px !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
        padding: 18px 18px 18px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%) !important;
        border-left: 1px solid var(--pa-line) !important;
        scrollbar-width: none !important;
    }

        .pa-host .ps-right::-webkit-scrollbar {
            display: none !important;
        }

        .pa-host .ps-right > * {
            flex-shrink: 0;
        }

        /* First intel card can be sticky within the right rail */
        .pa-host .ps-right > .pa-intel-card:first-child {
            position: sticky;
            top: 0;
        }

    /* ═══════════════════════════════════════════════════════════════════════════
   7. ACCENT OVERRIDES — orange → cyan inside .pa-host
   Every seller-orange token is replaced with the brand-cyan palette.
   This keeps the two journeys visually parallel but chromatically distinct.
   ═══════════════════════════════════════════════════════════════════════════ */

    /* Continue / Next button */
    .pa-host .ps-btn-next {
        background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%) !important;
        box-shadow: 0 8px 18px -8px rgba(86,196,248,0.45) !important;
        color: var(--brand-charcoal) !important;
    }

        .pa-host .ps-btn-next:hover:not(:disabled) {
            box-shadow: 0 12px 24px -10px rgba(86,196,248,0.55) !important;
        }

    /* Question em accent */
    .pa-host .ps-question em {
        color: var(--brand-cyan-deep) !important;
    }

    /* Progress dots */
    .pa-host .ps-dot.active {
        background: var(--brand-cyan) !important;
    }

    /* Scene label icon */
    .pa-host .ps-scene-label {
        color: var(--pa-ink-mute);
    }

        .pa-host .ps-scene-label i,
        .pa-host .ps-scene-label .pa-icon {
            color: var(--brand-cyan-deep);
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }

    /* Category / selection cards */
    .pa-host .ps-cat-card.selected,
    .pa-host .ps-card.selected,
    .pa-host [class*="card"].is-selected {
        border-color: var(--brand-cyan) !important;
        box-shadow: 0 0 0 3px rgba(86,196,248,0.2) !important;
    }

    /* Focus rings on inputs */
    .pa-host input:focus,
    .pa-host select:focus,
    .pa-host textarea:focus {
        outline: none;
        border-color: var(--brand-cyan) !important;
        box-shadow: 0 0 0 3px rgba(86,196,248,0.18) !important;
    }

    /* Disabled Continue state */
    .pa-host .ps-btn-next:disabled,
    .pa-host .ps-btn-next.is-locked {
        background: #e2e8f0 !important;
        color: #94a3b8 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        border-color: transparent !important;
        transform: none !important;
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
    }

        .pa-host .ps-btn-next:disabled:hover,
        .pa-host .ps-btn-next.is-locked:hover {
            transform: none !important;
            box-shadow: none !important;
        }

        /* Tooltip for disabled Continue */
        .pa-host .ps-btn-next:disabled[data-hint],
        .pa-host .ps-btn-next.is-locked[data-hint] {
            position: relative;
        }

            .pa-host .ps-btn-next:disabled[data-hint]::after,
            .pa-host .ps-btn-next.is-locked[data-hint]::after {
                content: attr(data-hint);
                position: absolute;
                bottom: calc(100% + 9px);
                right: 0;
                left: auto;
                transform: none;
                white-space: normal;
                max-width: 280px;
                min-width: 180px;
                text-align: left;
                background: var(--brand-charcoal, #0e0e11);
                color: #fff;
                font-size: 11.5px;
                line-height: 1.35;
                font-weight: 500;
                letter-spacing: .01em;
                padding: 7px 11px;
                border-radius: 8px;
                box-shadow: 0 6px 18px -6px rgba(14,14,17,0.35);
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.18s ease;
                z-index: 9999;
            }

            .pa-host .ps-btn-next:disabled[data-hint]::before,
            .pa-host .ps-btn-next.is-locked[data-hint]::before {
                content: '';
                position: absolute;
                bottom: calc(100% + 3px);
                right: 16px;
                left: auto;
                transform: none;
                border: 5px solid transparent;
                border-top-color: var(--brand-charcoal, #0e0e11);
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.18s ease;
                z-index: 9999;
            }

            .pa-host .ps-btn-next:disabled[data-hint]:hover::after,
            .pa-host .ps-btn-next:disabled[data-hint]:hover::before,
            .pa-host .ps-btn-next.is-locked[data-hint]:hover::after,
            .pa-host .ps-btn-next.is-locked[data-hint]:hover::before {
                opacity: 1;
            }

    /* Smooth unlock transition */
    .pa-host .ps-btn-next:not(:disabled):not(.is-locked) {
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.25s ease, transform 0.18s ease !important;
    }

/* Shake animation for click on disabled */
@keyframes pa-btn-shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(0);
    }
}

.pa-host .ps-btn-next.is-shaking {
    animation: pa-btn-shake 0.38s ease;
}

/* Overflow fix for tooltip (must paint above .ps-right) */
body[data-pa-flow="agent"] .pa-host .ps-nav,
body[data-pa-flow="agent"] .pa-host .ps-nav-dna {
    overflow: visible !important;
}

body[data-pa-flow="agent"] .pa-host .ps-btn-next:disabled[data-hint],
body[data-pa-flow="agent"] .pa-host .ps-btn-next.is-locked[data-hint] {
    z-index: 50;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. BREADCRUMB PILL — cyan tint in agent flow
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .ps-breadcrumb {
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.10) 0%, rgba(86, 196, 248, 0.04) 100%) !important;
    border: 1px solid rgba(86, 196, 248, 0.22) !important;
    color: var(--brand-cyan-deep) !important;
}

.pa-host .ps-breadcrumb-icon {
    background: var(--brand-cyan) !important;
    color: var(--brand-charcoal) !important;
}

.pa-host .ps-breadcrumb-chevron {
    color: rgba(86, 196, 248, 0.55) !important;
}

.pa-host .ps-breadcrumb-text {
    color: var(--brand-cyan-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. REQUIRED PILL
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .pa-required-pill {
    display: inline-block;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(86,196,248,0.14);
    color: var(--brand-cyan-deep);
    border: 1px solid rgba(86,196,248,0.32);
    font-size: 9.5px;
    letter-spacing: .14em;
    font-weight: 700;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. HUB SCENE — Listing Command Centre
   The Hub is a full-width centred layout (no left/right split).
   It sits in its own .pa-slot so it uses the pa-hub container directly.
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .pa-hub {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 32px 24px;
    overflow-y: auto;
}

.pa-host .pa-hub-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 16px;
    position: relative;
    z-index: 2;
}

.pa-host .pa-hub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    letter-spacing: .22em;
    color: var(--pa-ink-mute);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.pa-host .pa-eyebrow-rule {
    width: 28px;
    height: 1px;
    background: var(--pa-line-strong);
}

.pa-host .pa-hub-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 3.6vw, 38px);
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--pa-ink);
    line-height: 1.1;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--pa-ink) !important;
    position: relative;
    z-index: 3;
    padding-top: 4px;
}

    .pa-host .pa-hub-title em {
        font-style: normal;
        color: var(--brand-cyan-deep) !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: var(--brand-cyan-deep) !important;
    }

.pa-host .pa-hub-sub {
    color: var(--pa-ink-soft);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 540px;
}

.pa-host .pa-hub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 18px auto 14px;
}

@media (max-width: 1100px) {
    .pa-host .pa-hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .pa-host .pa-hub-grid {
        grid-template-columns: 1fr;
    }
}

.pa-host .pa-hub-card {
    position: relative;
    background: var(--pa-bg);
    border: 1.5px solid var(--pa-line);
    border-radius: 14px;
    padding: 18px;
    text-align: left;
    color: var(--pa-ink);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .pa-host .pa-hub-card:hover {
        transform: translateY(-2px);
        border-color: var(--pa-line-strong);
        box-shadow: var(--pa-shadow-soft);
    }

.pa-host .pa-hub-card--primary {
    background: linear-gradient(140deg, rgba(86,196,248,0.10) 0%, var(--pa-bg) 60%);
    border-color: rgba(86,196,248,0.35);
}

    .pa-host .pa-hub-card--primary:hover {
        border-color: var(--brand-cyan);
    }

.pa-host .pa-hub-card--locked {
    opacity: .68;
    cursor: not-allowed;
    background: var(--pa-bg-soft);
}

    .pa-host .pa-hub-card--locked::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(14,14,17,0.025) 12px 13px);
        pointer-events: none;
    }

.pa-host .pa-hub-card-glyph {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--pa-bg-tint);
    border: 1px solid var(--pa-line);
    color: var(--brand-cyan-deep);
    flex-shrink: 0;
}

.pa-host .pa-hub-card--locked .pa-hub-card-glyph {
    color: var(--pa-ink-mute);
    background: rgba(14,14,17,0.04);
}

.pa-host .pa-hub-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pa-host .pa-hub-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    letter-spacing: .15em;
    font-weight: 700;
    color: var(--brand-cyan-deep);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.pa-host .pa-tag-locked {
    color: var(--pa-ink-mute);
}

    .pa-host .pa-tag-locked i,
    .pa-host .pa-tag-locked .pa-icon {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }

.pa-host .pa-hub-card-title {
    font-size: 15.5px;
    font-weight: 700;
    margin: 0 0 5px;
    color: var(--pa-ink);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pa-host .pa-hub-card-desc {
    color: var(--pa-ink-soft);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.pa-host .pa-hub-card-cta {
    margin-top: auto;
    padding-top: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-cyan-deep);
}

.pa-host .pa-hub-card:not(.pa-hub-card--locked):hover .pa-hub-card-cta i,
.pa-host .pa-hub-card:not(.pa-hub-card--locked):hover .pa-hub-card-cta .pa-icon {
    transform: translateX(3px);
}

.pa-host .pa-hub-card-cta i,
.pa-host .pa-hub-card-cta .pa-icon {
    transition: transform .18s ease;
    width: 12px;
    height: 12px;
}

.pa-host .pa-hub-card--locked .pa-hub-card-cta {
    color: var(--pa-ink-mute);
    font-weight: 500;
    font-size: 11px;
}

.pa-host .pa-hub-foot {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--pa-line);
    width: 100%;
    max-width: 720px;
}

.pa-host .pa-hub-foot-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.pa-host .pa-foot-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-cyan-deep);
    letter-spacing: -.01em;
}

.pa-host .pa-foot-label {
    font-size: 11px;
    color: var(--pa-ink-mute);
    max-width: 140px;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. FORM CHROME — shared across Profile / Mandate / Commission
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .pa-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px;
    margin-bottom: 12px;
}

@media (max-width: 720px) {
    .pa-host .pa-form-grid {
        grid-template-columns: 1fr;
    }
}

.pa-host .pa-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pa-host .pa-field--full {
    grid-column: 1 / -1;
}

.pa-host .pa-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pa-ink-soft);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pa-host .pa-req {
    color: var(--brand-cyan-deep);
    margin-left: 2px;
}

.pa-host .pa-optional {
    color: var(--pa-ink-mute);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.pa-host .pa-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pa-host .pa-input-icon {
    position: absolute;
    left: 12px;
    color: var(--pa-ink-mute);
    font-size: 14px;
    pointer-events: none;
    width: 14px;
    height: 14px;
}

.pa-host .pa-input-prefix {
    position: absolute;
    left: 12px;
    color: var(--pa-ink-soft);
    font-weight: 600;
    pointer-events: none;
}

.pa-host .pa-input,
.pa-host .pa-textarea {
    width: 100%;
    padding: 9px 12px 9px 34px;
    font-family: inherit;
    font-size: 13px;
    background: var(--pa-bg);
    border: 1px solid var(--pa-line-strong);
    border-radius: 9px;
    color: var(--pa-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pa-host .pa-textarea {
    padding: 9px 12px;
    resize: vertical;
    min-height: 56px;
    line-height: 1.5;
}

.pa-host .pa-input--currency {
    padding-left: 26px;
}

.pa-host .pa-input--ppra {
    padding-right: 116px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pa-host .pa-textarea-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
}

.pa-host .pa-char-count {
    font-size: 10.5px;
    color: var(--pa-ink-mute);
}

.pa-host .pa-field-error {
    color: var(--pa-danger);
    font-size: 11px;
    min-height: 13px;
}

/* Logo upload zone */
.pa-host .pa-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    background: var(--pa-bg-soft);
    border: 1.5px dashed var(--pa-line-strong);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
    min-height: 76px;
    text-align: center;
    position: relative;
}

    .pa-host .pa-upload-zone:hover {
        border-color: var(--brand-cyan);
        background: var(--pa-bg-tint);
    }

.pa-host .pa-upload-icon {
    font-size: 20px;
    color: var(--brand-cyan-deep);
    width: 20px;
    height: 20px;
}

.pa-host .pa-upload-label {
    font-size: 12px;
    color: var(--pa-ink-soft);
}

    .pa-host .pa-upload-label em {
        color: var(--brand-cyan-deep);
        font-style: normal;
        font-weight: 600;
    }

.pa-host .pa-upload-hint {
    font-size: 10px;
    color: var(--pa-ink-mute);
}

.pa-host .pa-logo-preview {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
    border-radius: 7px;
    background: var(--pa-bg);
    display: none;
}

    .pa-host .pa-logo-preview.is-visible {
        display: block;
    }

/* PPRA block */
.pa-host .pa-ppra-block {
    background: var(--pa-bg-tint);
    border: 1px solid var(--pa-line-cyan);
    border-radius: 12px;
    padding: 13px 14px;
    margin-top: 4px;
}

.pa-host .pa-ppra-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.pa-host .pa-ppra-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(86,196,248,0.18);
    border: 1px solid var(--pa-line-cyan);
    color: var(--brand-cyan-deep);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .pa-host .pa-ppra-icon .pa-icon {
        width: 16px;
        height: 16px;
    }

.pa-host .pa-ppra-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pa-host .pa-ppra-eyebrow {
    font-size: 9.5px;
    letter-spacing: .18em;
    color: var(--pa-ink-mute);
    font-weight: 700;
    text-transform: uppercase;
}

.pa-host .pa-ppra-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pa-ink);
}

.pa-host .pa-ppra-input-wrap {
    position: relative;
}

.pa-host .pa-ppra-status {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pa-bg);
    border: 1px solid var(--pa-line-strong);
    color: var(--pa-ink-mute);
    font-size: 10.5px;
    font-weight: 600;
}

    .pa-host .pa-ppra-status.is-checking {
        color: var(--pa-warn);
        border-color: rgba(245,158,11,0.4);
    }

    .pa-host .pa-ppra-status.is-valid {
        color: var(--pa-success);
        border-color: rgba(16,185,129,0.4);
        background: rgba(16,185,129,0.08);
    }

    .pa-host .pa-ppra-status.is-invalid {
        color: var(--pa-danger);
        border-color: rgba(239,68,68,0.4);
    }

.pa-host .pa-ppra-help {
    font-size: 11.5px;
    color: var(--pa-ink-soft);
    line-height: 1.5;
    margin: 8px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .pa-host .pa-ppra-help i,
    .pa-host .pa-ppra-help .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        margin-top: 2px;
        width: 13px;
        height: 13px;
    }

    .pa-host .pa-ppra-help strong {
        color: var(--pa-ink);
    }

/* ═══════════════════════════════════════════════════════════════════════════
   12. INTEL / TWIN CARDS (right rail)
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .pa-intel-card {
    background: var(--pa-bg);
    border: 1px solid var(--pa-line);
    border-radius: 12px;
    padding: 13px 15px;
    box-shadow: var(--pa-shadow-soft);
}

.pa-host .pa-intel-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: .15em;
    color: var(--pa-ink-mute);
    font-weight: 700;
    padding-bottom: 9px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--pa-line);
    text-transform: uppercase;
}

    .pa-host .pa-intel-header i,
    .pa-host .pa-intel-header .pa-icon {
        color: var(--brand-cyan-deep);
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

.pa-host .pa-twin-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pa-success);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    animation: pa-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pa-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16,185,129,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0);
    }
}

.pa-host .pa-twin-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.pa-host .pa-twin-avatar-wrap {
    position: relative;
}

.pa-host .pa-twin-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--pa-bg-tint) center/cover no-repeat;
    border: 2px solid var(--pa-line);
    display: grid;
    place-items: center;
    color: var(--pa-ink-mute);
    font-size: 24px;
}

    .pa-host .pa-twin-avatar .pa-icon {
        width: 24px;
        height: 24px;
    }

.pa-host .pa-twin-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pa-warn);
    color: #fff;
    border: 2px solid var(--pa-bg);
    display: grid;
    place-items: center;
    font-size: 10px;
}

    .pa-host .pa-twin-badge .pa-icon {
        width: 10px;
        height: 10px;
    }

    .pa-host .pa-twin-badge.is-verified {
        background: var(--pa-success);
    }

    .pa-host .pa-twin-badge.is-invalid {
        background: var(--pa-danger);
    }

.pa-host .pa-twin-name-block {
    text-align: center;
}

.pa-host .pa-twin-name {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--pa-ink);
}

.pa-host .pa-twin-agency {
    display: block;
    font-size: 11px;
    color: var(--pa-ink-mute);
    margin-top: 1px;
}

.pa-host .pa-twin-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 3px;
    padding-top: 9px;
    border-top: 1px solid var(--pa-line);
}

.pa-host .pa-twin-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.pa-host .pa-twin-stat-label {
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--pa-ink-mute);
    font-weight: 700;
    text-transform: uppercase;
}

.pa-host .pa-twin-stat-value {
    font-size: 12px;
    color: var(--pa-ink);
    font-weight: 600;
}

.pa-host .pa-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .pa-host .pa-tip-list li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 12px;
        color: var(--pa-ink-soft);
        line-height: 1.5;
    }

    .pa-host .pa-tip-list i,
    .pa-host .pa-tip-list .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 12px;
        width: 12px;
        height: 12px;
    }

    .pa-host .pa-tip-list strong {
        color: var(--pa-ink);
        font-weight: 600;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   13. MANDATE VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .pa-mandate-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-bottom: 12px;
}

@media (max-width: 720px) {
    .pa-host .pa-mandate-cards {
        grid-template-columns: 1fr;
    }
}

.pa-host .pa-mandate-card {
    position: relative;
    cursor: pointer;
    display: block;
    margin: 0;
}

.pa-host .pa-mandate-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pa-host .pa-mandate-card-inner {
    background: var(--pa-bg);
    border: 1.5px solid var(--pa-line);
    border-radius: 12px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    height: 100%;
    transition: all .18s ease;
}

.pa-host .pa-mandate-card:hover .pa-mandate-card-inner {
    border-color: var(--pa-line-strong);
}

.pa-host .pa-mandate-card.is-selected .pa-mandate-card-inner {
    border-color: var(--brand-cyan);
    background: var(--pa-bg-tint);
    box-shadow: 0 0 0 3px rgba(86,196,248,0.16);
}

.pa-host .pa-mandate-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--pa-bg-tint);
    border: 1px solid var(--pa-line);
    color: var(--brand-cyan-deep);
}

    .pa-host .pa-mandate-icon .pa-icon {
        width: 16px;
        height: 16px;
    }

.pa-host .pa-mandate-card-label {
    font-size: 9.5px;
    letter-spacing: .16em;
    color: var(--pa-ink-mute);
    font-weight: 700;
    text-transform: uppercase;
}

.pa-host .pa-mandate-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--pa-ink);
}

.pa-host .pa-mandate-card-desc {
    color: var(--pa-ink-soft);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.pa-host .pa-mandate-card-pros {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .pa-host .pa-mandate-card-pros li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        color: var(--pa-ink-soft);
    }

        .pa-host .pa-mandate-card-pros li i,
        .pa-host .pa-mandate-card-pros li .pa-icon {
            color: var(--pa-success);
            font-size: 12px;
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

.pa-host .pa-mandate-card-tick {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pa-bg);
    border: 1.5px solid var(--pa-line-strong);
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 12px;
    transition: all .18s ease;
}

    .pa-host .pa-mandate-card-tick .pa-icon {
        width: 11px;
        height: 11px;
    }

.pa-host .pa-mandate-card.is-selected .pa-mandate-card-tick {
    background: var(--brand-cyan);
    color: #fff;
    border-color: var(--brand-cyan);
}

.pa-host .pa-authorize-card {
    display: flex;
    gap: 11px;
    padding: 12px 13px;
    background: var(--pa-bg);
    border: 1.5px solid var(--pa-line);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .18s ease;
    margin: 12px 0 0;
}

    .pa-host .pa-authorize-card:hover {
        border-color: var(--pa-line-strong);
    }

.pa-host .pa-authorize-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pa-host .pa-authorize-tick {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--pa-bg);
    border: 1.5px solid var(--pa-line-strong);
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 14px;
    transition: all .18s ease;
    margin-top: 2px;
}

    .pa-host .pa-authorize-tick .pa-icon {
        width: 12px;
        height: 12px;
    }

.pa-host .pa-authorize-input:checked ~ .pa-authorize-tick {
    background: var(--pa-success);
    color: #fff;
    border-color: var(--pa-success);
}

.pa-host .pa-authorize-input:checked ~ .pa-authorize-text strong {
    color: var(--pa-success);
}

.pa-host .pa-authorize-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

    .pa-host .pa-authorize-text strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--pa-ink);
    }

    .pa-host .pa-authorize-text span {
        color: var(--pa-ink-soft);
        line-height: 1.45;
    }

.pa-host .pa-mandate-summary {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pa-host .pa-mandate-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.pa-host .pa-mandate-summary-label {
    color: var(--pa-ink-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 700;
}

.pa-host .pa-mandate-summary-value {
    color: var(--pa-ink);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. COMMISSION VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-host .pa-commission-tabs {
    display: flex;
    gap: 5px;
    padding: 4px;
    background: var(--pa-bg-soft);
    border: 1px solid var(--pa-line);
    border-radius: 10px;
    margin-bottom: 12px;
}

.pa-host .pa-commission-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--pa-ink-soft);
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .18s ease, color .18s ease;
}

    .pa-host .pa-commission-tab i,
    .pa-host .pa-commission-tab .pa-icon {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    .pa-host .pa-commission-tab:hover {
        color: var(--pa-ink);
    }

    .pa-host .pa-commission-tab.active {
        background: var(--brand-cyan);
        color: var(--brand-charcoal);
    }

.pa-host .pa-commission-pane {
    margin-bottom: 12px;
}

.pa-host .pa-pct-slider-wrap {
    background: var(--pa-bg-soft);
    border: 1px solid var(--pa-line);
    border-radius: 11px;
    padding: 13px 15px;
    margin-bottom: 11px;
}

.pa-host .pa-pct-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 9px;
}

.pa-host .pa-pct-display-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--brand-cyan-deep);
    line-height: 1;
}

.pa-host .pa-pct-display-unit {
    font-size: 17px;
    color: var(--pa-ink-soft);
    font-weight: 500;
}

.pa-host .pa-pct-slider {
    width: 100%;
    height: 5px;
    appearance: none;
    background: var(--pa-line);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 6px 0;
}

    .pa-host .pa-pct-slider::-webkit-slider-thumb {
        appearance: none;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: var(--brand-cyan);
        cursor: grab;
        border: 2px solid var(--pa-bg);
        box-shadow: 0 3px 8px rgba(14,14,17,0.18);
    }

    .pa-host .pa-pct-slider::-moz-range-thumb {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: var(--brand-cyan);
        cursor: grab;
        border: 2px solid var(--pa-bg);
    }

.pa-host .pa-pct-slider-axis {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--pa-ink-mute);
    margin-top: 5px;
}

.pa-host .pa-pct-axis-suggested {
    color: var(--brand-cyan-deep);
    font-weight: 600;
}

.pa-host .pa-pct-quick,
.pa-host .pa-fixed-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pa-host .pa-pct-chip,
.pa-host .pa-fixed-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pa-bg);
    border: 1px solid var(--pa-line-strong);
    color: var(--pa-ink-soft);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
}

    .pa-host .pa-pct-chip:hover,
    .pa-host .pa-fixed-chip:hover {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
    }

    .pa-host .pa-pct-chip.is-selected,
    .pa-host .pa-fixed-chip.is-selected {
        background: var(--brand-cyan);
        color: var(--brand-charcoal);
        border-color: var(--brand-cyan);
    }

.pa-host .pa-pct-chip--popular {
    position: relative;
}

    .pa-host .pa-pct-chip--popular::after {
        content: "Popular";
        position: absolute;
        top: -7px;
        right: -4px;
        background: var(--brand-cyan-deep);
        color: #fff;
        font-size: 8.5px;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 6px;
        letter-spacing: .04em;
    }

.pa-host .pa-vat-toggle {
    display: flex;
    gap: 11px;
    padding: 10px 13px;
    background: var(--pa-bg-soft);
    border: 1px solid var(--pa-line);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 11px;
}

    .pa-host .pa-vat-toggle input {
        display: none;
    }

.pa-host .pa-vat-track {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--pa-line-strong);
    position: relative;
    flex-shrink: 0;
    transition: background .18s ease;
    margin-top: 1px;
}

.pa-host .pa-vat-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}

.pa-host .pa-vat-toggle input:checked + .pa-vat-track {
    background: var(--brand-cyan);
}

    .pa-host .pa-vat-toggle input:checked + .pa-vat-track .pa-vat-thumb {
        transform: translateX(16px);
    }

.pa-host .pa-vat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
}

    .pa-host .pa-vat-text strong {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pa-ink);
    }

    .pa-host .pa-vat-text span {
        color: var(--pa-ink-soft);
        line-height: 1.45;
    }

.pa-host .pa-commission-calc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-host .pa-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.pa-host .pa-calc-label {
    color: var(--pa-ink-mute);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}

.pa-host .pa-calc-value {
    color: var(--pa-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pa-host .pa-calc-divider {
    height: 1px;
    background: var(--pa-line);
    margin: 4px 0;
}

.pa-host .pa-calc-row--total .pa-calc-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-cyan-deep);
}

.pa-host .pa-calc-row--total .pa-calc-label {
    font-size: 11px;
    color: var(--pa-ink-soft);
}

.pa-host .pa-calc-row--secondary .pa-calc-value {
    color: var(--pa-ink-soft);
    font-size: 12.5px;
}

.pa-host .pa-calc-help {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--pa-line);
    font-size: 11.5px;
    color: var(--pa-ink-mute);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .pa-host .pa-calc-help i,
    .pa-host .pa-calc-help .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        margin-top: 2px;
        width: 12px;
        height: 12px;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   15. SELLER SLOT — the embedded private-seller carousel
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-seller-slot {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .pa-seller-slot #psModuleRoot {
        width: 100%;
        height: 100%;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   16. EXTENDED BREADCRUMB / PROGRESS DOTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Agent dots use cyan instead of orange */
.ps-dot[data-pa-kind="agent"] {
    background: rgba(86,196,248,0.25);
}

    .ps-dot[data-pa-kind="agent"].active {
        background: var(--brand-cyan) !important;
    }

    .ps-dot[data-pa-kind="agent"].done {
        background: var(--brand-cyan-deep);
    }

/* When agent flow is active, ALL dot states go cyan */
body[data-pa-flow="agent"] .ps-dot.active {
    background: var(--brand-cyan) !important;
}

body[data-pa-flow="agent"] .ps-dot.done {
    background: var(--brand-cyan-deep) !important;
}

/* All dots clickable */
.ps-dot {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. CLICK-THROUGH / POINTER EVENT FIX
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-stage .pa-host {
    pointer-events: none;
}

    .pa-stage .pa-host.pa-host-active {
        pointer-events: auto;
    }

/* Change-role pill must always sit above the stage */
#privateAgentModule .pa-change-role {
    position: absolute;
    z-index: 50;
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. PROFILE VIEW SPECIFICS
   (The profile view has its own detailed CSS in private-agent-profile.css;
    these rules are shared structural utilities that work alongside it.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Profile-slot left column sizing override */
#paAgentSlot .ps-left {
    flex: 1 1 64%;
    /* body padding is now delegated to .pa-left-body inside */
}

#paAgentSlot .ps-right {
    flex: 0 0 36%;
    min-width: 280px;
    max-width: 360px;
}

/* Completeness meter accent */
.pa-host .pa-completeness-fill {
    background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%);
}

.pa-host .pa-completeness-value {
    color: var(--brand-cyan-deep);
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Scene becomes a vertical flex column on mobile */
    .pa-host > .ps-scene {
        flex-direction: column !important;
    }

    /* Full-width left, right slides below */
    .pa-host .ps-left {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .pa-host .ps-right {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        border-left: 0 !important;
        border-top: 1px solid var(--pa-line) !important;
        max-height: 38vh !important;
        padding: 14px !important;
    }

    /* Sticky header: tighter bleed on mobile */
    .pa-host .pa-sticky-header {
        margin: 0 !important;
        padding: 10px 14px 10px !important;
    }

    /* Nav: spans full-width, absolute to scene bottom */
    .pa-host .ps-left .ps-nav,
    .pa-host .ps-left .ps-nav-dna {
        margin: 0 !important;
        padding: 10px 14px !important;
    }

    /* Hub on mobile */
    .pa-host .pa-hub {
        padding: 16px 14px 20px;
    }

    .pa-host .pa-hub-grid {
        grid-template-columns: 1fr;
    }

    .pa-host .pa-hub-foot {
        gap: 16px;
    }
}

@media (max-width: 540px) {
    .pa-host .pa-mandate-cards {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. ISOLATION GUARD — prevent sell-journey/hub heading overlap
   ═══════════════════════════════════════════════════════════════════════════ */

#privateAgentModule {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.pa-hub-header {
    position: relative;
    z-index: 2;
    background: transparent;
}

.pa-hub-title {
    position: relative;
    z-index: 3;
    padding-top: 4px;
}

/* Hide the kinetic timeline when in agent flow — it belongs to the seller */
body[data-pa-flow="agent"] #sjKineticTimeline {
    display: none !important;
}