/* ============================================================================
   agency-platform-power.css
   ----------------------------------------------------------------------------
   "Platform Power" — the Property Agency Command-scene right panel.

   Pairs with agency-platform-power.js, which renders the tier-specific
   capability breakdown into #pagPlatformPower on each plan-card click.

   Load order: property-agency.css → -alignment.css → -fixes.css → THIS FILE.
   Loading last lets the panel claim the full right column as a premium dark
   surface, overriding the generic light side-card treatment.

   Design intent:
     The Platform Power panel now OWNS the whole right column edge-to-edge
     (clipped to the shell's rounded corners) rather than floating as a card
     inside a grey wash. It's the one place we spend boldness — a charcoal
     "control room" with a cyan→orange accent — while the form stays calm and
     light. Capability groups are real structure (each tier adds named
     systems), rendered as bulleted lists, with the payoff pinned at the foot.

   All selectors are scoped to #propertyAgencyModule and the
   .pag-aside-power / .pag-power / .pag-pwr-* namespace, so nothing leaks into
   other scenes or modules.
   ============================================================================ */

/* ── Full-panel dark surface (replaces the inner card) ────────────────────── */
#propertyAgencyModule .pag-scene-aside.pag-aside-power {
    background: linear-gradient(165deg, #15151B 0%, var(--pag-charcoal) 55%, #0A0A0D 100%);
    border-left: 1px solid rgba(0, 0, 0, .45);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .04);
    padding: 18px 18px 18px;
    gap: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* inner .pag-pwr-scroll owns the scrolling */
    position: relative;
}

    /* Hairline brand accent down the panel's left edge — the "powered on" tell */
    #propertyAgencyModule .pag-scene-aside.pag-aside-power::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 2px;
        background: linear-gradient(180deg, var(--pag-cyan) 0%, var(--pag-orange) 100%);
        opacity: .9;
        pointer-events: none;
        z-index: 2;
    }

/* ── Pinned header ────────────────────────────────────────────────────────── */
#propertyAgencyModule .pag-power-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .7);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    #propertyAgencyModule .pag-power-header .pag-icon {
        color: var(--pag-cyan);
        width: 14px;
        height: 14px;
    }

/* ── Mount + rendered block fill the remaining height ─────────────────────── */
#propertyAgencyModule .pag-power,
#propertyAgencyModule .pag-pwr {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#propertyAgencyModule .pag-power-loading {
    margin: auto;
    font-size: .76rem;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .02em;
}

@keyframes pag-pwr-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#propertyAgencyModule .pag-pwr.is-entering {
    animation: pag-pwr-in .32s cubic-bezier(.2, .8, .2, 1) both;
}

/* ── Tier head: name + audience + price ───────────────────────────────────── */
#propertyAgencyModule .pag-pwr-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#propertyAgencyModule .pag-pwr-titles {
    min-width: 0;
}

#propertyAgencyModule .pag-pwr-name {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1.15;
}

#propertyAgencyModule .pag-pwr-aud {
    display: block;
    margin-top: 2px;
    font-size: .67rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .5);
}

#propertyAgencyModule .pag-pwr-price {
    flex: 0 0 auto;
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--pag-orange-light);
    white-space: nowrap;
    line-height: 1;
    padding-top: 1px;
}

    #propertyAgencyModule .pag-pwr-price small {
        font-size: .58rem;
        font-weight: 600;
        color: rgba(255, 255, 255, .4);
    }

/* ── Tagline ──────────────────────────────────────────────────────────────── */
#propertyAgencyModule .pag-pwr-tagline {
    flex: 0 0 auto;
    margin: 9px 0 0;
    padding-left: 9px;
    border-left: 2px solid var(--pag-cyan);
    font-size: .74rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
}

/* ── "Everything in X, plus" inheritance chip ─────────────────────────────── */
#propertyAgencyModule .pag-pwr-inherit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-top: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(86, 196, 248, .12);
    border: 1px solid rgba(86, 196, 248, .28);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pag-cyan);
    text-transform: uppercase;
}

    #propertyAgencyModule .pag-pwr-inherit .pag-icon {
        width: 11px;
        height: 11px;
    }

/* ── Scroll region: the only part that scrolls ────────────────────────────── */
#propertyAgencyModule .pag-pwr-scroll-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

    /* Fade hint so longer tiers read as scrollable */
    #propertyAgencyModule .pag-pwr-scroll-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        right: 6px;
        bottom: 0;
        height: 22px;
        background: linear-gradient(180deg, rgba(10, 10, 13, 0) 0%, #0A0A0D 100%);
        pointer-events: none;
    }

#propertyAgencyModule .pag-pwr-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -6px;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 196, 248, .5) transparent;
}

    #propertyAgencyModule .pag-pwr-scroll::-webkit-scrollbar {
        width: 5px;
    }

    #propertyAgencyModule .pag-pwr-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    #propertyAgencyModule .pag-pwr-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--pag-cyan) 0%, var(--pag-orange) 100%);
        border-radius: 999px;
    }

/* ── Capability group ─────────────────────────────────────────────────────── */
#propertyAgencyModule .pag-pwr-group {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

    #propertyAgencyModule .pag-pwr-group:first-child {
        border-top: none;
        padding-top: 2px;
    }

#propertyAgencyModule .pag-pwr-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    margin-bottom: 8px;
}

#propertyAgencyModule .pag-pwr-group-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(86, 196, 248, .14);
    color: var(--pag-cyan);
    border: 1px solid rgba(86, 196, 248, .22);
}

/* Alternate accent so groups don't read as one flat list */
#propertyAgencyModule .pag-pwr-group:nth-of-type(even) .pag-pwr-group-icon {
    background: rgba(245, 130, 32, .14);
    color: var(--pag-orange-light);
    border-color: rgba(245, 130, 32, .24);
}

#propertyAgencyModule .pag-pwr-group-icon .pag-icon {
    width: 12px;
    height: 12px;
}

/* ── Capability items — real bullets with hanging indent ──────────────────── */
#propertyAgencyModule .pag-pwr-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    #propertyAgencyModule .pag-pwr-list li {
        position: relative;
        padding-left: 15px; /* room for the marker; wrapped lines hang here */
        font-size: .73rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, .76);
    }

        /* The bullet — CSS-drawn so it never depends on the icon sprite */
        #propertyAgencyModule .pag-pwr-list li::before {
            content: "";
            position: absolute;
            left: 2px;
            top: .55em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--pag-cyan);
        }

#propertyAgencyModule .pag-pwr-group:nth-of-type(even) .pag-pwr-list li::before {
    background: var(--pag-orange-light);
}

/* ── Outcome footer: pinned, always visible ───────────────────────────────── */
#propertyAgencyModule .pag-pwr-outcome {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(86, 196, 248, .15) 0%, rgba(245, 130, 32, .15) 100%);
    border: 1px solid rgba(255, 255, 255, .12);
}

#propertyAgencyModule .pag-pwr-outcome-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .10);
    color: var(--pag-orange-light);
}

    #propertyAgencyModule .pag-pwr-outcome-icon .pag-icon {
        width: 14px;
        height: 14px;
    }

#propertyAgencyModule .pag-pwr-outcome-label {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 1px;
}

#propertyAgencyModule .pag-pwr-outcome p {
    margin: 0;
    font-size: .73rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}

/* ── Narrow desktop / tablet (aside shrinks to 300px at ≤1180px) ──────────── */
@media (max-width: 1180px) {
    #propertyAgencyModule .pag-scene-aside.pag-aside-power {
        padding: 16px 14px;
    }

    #propertyAgencyModule .pag-pwr-name {
        font-size: .94rem;
    }

    #propertyAgencyModule .pag-pwr-list li,
    #propertyAgencyModule .pag-pwr-tagline {
        font-size: .71rem;
    }
}

/* ── Accessibility: honour reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #propertyAgencyModule .pag-pwr.is-entering {
        animation: none;
    }
}

/* ── Today breakdown (bottom nav band) ────────────────────────────────────────
   Sits under the running "Today" total to explain it: plan fee + how many
   listing credits make up the figure. Lives here because this module also owns
   the removal of the old "Today's order" card, making the nav total the single
   source of truth. The nav summary is already a centered flex column. */
#propertyAgencyModule .pag-nav-summary-breakdown {
    font-size: .66rem;
    font-weight: 600;
    color: var(--pag-text-3);
    letter-spacing: .01em;
    margin-top: 1px;
    white-space: nowrap;
}

@media (max-width: 880px) {
    /* Keep the nav compact on phones — the total stays, the breakdown is a
       progressive nicety that can wrap out of the way if space is tight. */
    #propertyAgencyModule .pag-nav-summary-breakdown {
        font-size: .62rem;
    }
}