/* ============================================================================
   agency-plan-cards.css
   ----------------------------------------------------------------------------
   Per-tier colour identity + "digital jewelry" icons + bulleted features for
   the four agency-size plan cards on the Property Agency Command scene.

   Load order: property-agency.css → -alignment.css → -fixes.css →
   agency-platform-power.css → THIS FILE (last among agency styles), so the
   per-tier selected state cleanly overrides the single cyan treatment in
   -fixes.css.

   Colour identities (from the Ikhayalami wordmark palette) form a tier ladder:
     Solo        → graphite/cloud-grey   (understated entry)
     Small       → sky cyan              (#56C4F8)
     Growing     → sunset orange         (#F58220)
     Enterprise  → charcoal black        (#1A1A1F, the premium top tier)

   Each card exposes three custom properties consumed below and by the jewel
   sprite (var(--pag-jewel)): --pag-jewel (icon accent), --pag-accent (lines &
   selected border) and --pag-accent-tint / --pag-accent-ring (fills & glow).
   All selectors are scoped to #propertyAgencyModule .pag-plan-card.
   ============================================================================ */

/* ── Per-tier tokens ──────────────────────────────────────────────────────── */
#propertyAgencyModule .pag-plan-card[data-pag-tier="solo"] {
    --pag-jewel: #5B6577;
    --pag-accent: #5B6577;
    --pag-accent-tint: rgba(91, 101, 119, .10);
    --pag-accent-ring: rgba(91, 101, 119, .28);
}

#propertyAgencyModule .pag-plan-card[data-pag-tier="small"] {
    --pag-jewel: #56C4F8;
    --pag-accent: #3FA9D9;
    --pag-accent-tint: rgba(86, 196, 248, .12);
    --pag-accent-ring: rgba(86, 196, 248, .30);
}

#propertyAgencyModule .pag-plan-card[data-pag-tier="growing"] {
    --pag-jewel: #F58220;
    --pag-accent: #DA6A00;
    --pag-accent-tint: rgba(245, 130, 32, .12);
    --pag-accent-ring: rgba(245, 130, 32, .30);
}

#propertyAgencyModule .pag-plan-card[data-pag-tier="enterprise"] {
    --pag-jewel: #1A1A1F;
    --pag-accent: #1A1A1F;
    --pag-accent-tint: rgba(14, 14, 17, .07);
    --pag-accent-ring: rgba(14, 14, 17, .22);
}

/* ── Always-visible colour identity: a slim accent cap on each card ───────── */
#propertyAgencyModule .pag-plan-card {
    position: relative;
    isolation: isolate;
}

    #propertyAgencyModule .pag-plan-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--pag-accent);
        border-radius: 10px 10px 0 0;
        opacity: .9;
        transition: opacity .18s ease, height .18s ease;
    }

    #propertyAgencyModule .pag-plan-card:hover {
        border-color: var(--pag-accent);
        box-shadow: 0 0 0 2px var(--pag-accent-tint), 0 4px 12px rgba(14, 14, 17, .08);
    }

        #propertyAgencyModule .pag-plan-card:hover::after {
            height: 4px;
            opacity: 1;
        }

/* ── Selected state — per-tier (overrides the single cyan rule) ───────────── */
#propertyAgencyModule .pag-plan-card.is-selected,
#propertyAgencyModule .pag-plan-card[aria-checked="true"] {
    border-color: var(--pag-accent);
    background: linear-gradient(180deg, #fff 0%, var(--pag-accent-tint) 100%);
    box-shadow: 0 0 0 2px var(--pag-accent-ring), 0 6px 14px var(--pag-accent-tint);
}

    #propertyAgencyModule .pag-plan-card[aria-checked="true"]::after,
    #propertyAgencyModule .pag-plan-card.is-selected::after {
        height: 4px;
        opacity: 1;
    }

/* ── Jewel icon ───────────────────────────────────────────────────────────── */
#propertyAgencyModule .pag-plan-icon {
    margin-bottom: 3px;
    line-height: 0;
}

#propertyAgencyModule .pag-jewel-icon {
    width: 32px;
    height: 32px;
    /* Override the generic 16–18px .pag-plan-icon .pag-icon sizing from the
       base/alignment sheets — the jewel needs room to read. */
    flex: 0 0 auto;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

#propertyAgencyModule .pag-plan-card:hover .pag-jewel-icon,
#propertyAgencyModule .pag-plan-card[aria-checked="true"] .pag-jewel-icon {
    transform: translateY(-1px) scale(1.04);
}

/* ── Feature bullets — coloured dot per tier, hanging indent ──────────────── */
#propertyAgencyModule .pag-plan-bullets {
    list-style: none;
}

    #propertyAgencyModule .pag-plan-bullets li {
        position: relative;
        display: block;
        padding-left: 13px;
        line-height: 1.3;
    }

        #propertyAgencyModule .pag-plan-bullets li::before {
            content: "";
            position: absolute;
            left: 1px;
            top: .5em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--pag-accent);
        }

    /* The "Everything in …" lead bullet reads as a value-stacking marker:
       give it a touch more weight so the ladder is legible at a glance. */
    #propertyAgencyModule .pag-plan-bullets li:first-child {
        font-weight: 700;
        color: var(--pag-text-2);
    }

/* ── Enterprise legibility: graphite/charcoal accents need slightly stronger
      dots & cap so they don't disappear against the white card ───────────── */
#propertyAgencyModule .pag-plan-card[data-pag-tier="enterprise"]::after {
    background: linear-gradient(90deg, #1A1A1F 0%, #2C2C34 100%);
}