/* Subscription management page — token-driven, modern stack.
   Used by the SubscriptionPage view component (Areas/Commerce). */

@layer components {

    /* ============================================================
       State banner — top of the subscription page.
       Severity variants control color; layout is constant.
       ============================================================ */

    .c-sub-banner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "head    actions"
            "body    actions";
        align-items: center;
        column-gap: var(--space-5);
        row-gap: var(--space-2);
        padding: var(--space-5) var(--space-6);
        border: 1px solid var(--color-line);
        border-left-width: 4px;
        border-radius: var(--radius-md, 0.5rem);
        background: var(--color-surface);
        margin-block-end: var(--space-6);
    }

    .c-sub-banner__head {
        grid-area: head;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .c-sub-banner__title {
        margin: 0;
        font-size: var(--fs-subheading);
        font-weight: 600;
        color: var(--color-ink-h2);
        line-height: 1.2;
    }

    .c-sub-banner__pill {
        display: inline-block;
        padding: var(--space-1) var(--space-3);
        border-radius: 999px;
        font-size: var(--fs-ui-xs, 0.8125rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .c-sub-banner__body {
        grid-area: body;
        margin: 0;
        font-size: var(--fs-body, 1rem);
        color: var(--color-ink-soft);
        max-width: 65ch;
    }

    .c-sub-banner__actions {
        grid-area: actions;
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
        align-self: center;
        justify-self: end;
    }

    /* ---- Severity variants. Border-left + pill background carry the signal. ---- */

    .c-sub-banner--success {
        border-left-color: var(--color-info);
    }
    .c-sub-banner--success .c-sub-banner__pill {
        background: var(--color-info-soft);
        color: var(--color-info-deep);
    }

    .c-sub-banner--info {
        border-left-color: var(--color-info);
        background: var(--color-info-soft);
    }
    .c-sub-banner--info .c-sub-banner__pill {
        background: var(--color-info);
        color: var(--color-on-dark);
    }

    .c-sub-banner--warn {
        border-left-color: var(--color-warn);
        background: var(--color-warn-soft);
    }
    .c-sub-banner--warn .c-sub-banner__pill {
        background: var(--color-warn);
        color: var(--color-on-dark);
    }

    .c-sub-banner--error {
        border-left-color: var(--color-error);
        background: var(--color-error-soft);
    }
    .c-sub-banner--error .c-sub-banner__pill {
        background: var(--color-error);
        color: var(--color-on-dark);
    }

    .c-sub-banner--neutral {
        border-left-color: var(--color-line);
        background: var(--color-surface-alt);
    }
    .c-sub-banner--neutral .c-sub-banner__pill {
        background: var(--color-ink-mute);
        color: var(--color-on-dark);
    }

    /* Stack on narrow widths: actions wrap below the body. */
    @media (max-width: 720px) {
        .c-sub-banner {
            grid-template-columns: 1fr;
            grid-template-areas:
                "head"
                "body"
                "actions";
        }
        .c-sub-banner__actions {
            justify-self: start;
        }
    }

    /* ============================================================
       Page-level subscription chrome
       ============================================================ */

    .c-sub-page {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        max-width: 60rem;
    }

    /* Plan-details card mute treatment for Cancelled/Expired/Suspended/TrialExpired. */
    .c-sub-page__plan--muted {
        opacity: 0.7;
        filter: grayscale(0.2);
    }

    /* ============================================================
       Feature list groups
       ============================================================ */

    .c-sub-features__group {
        margin-block-end: var(--space-4);
    }
    .c-sub-features__group:last-child {
        margin-block-end: 0;
    }

    .c-sub-features__heading {
        margin: 0 0 var(--space-2) 0;
        font-size: var(--fs-ui-sm, 0.875rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-ink-mute);
    }

    .c-sub-features__list {
        margin: 0;
        padding-left: var(--space-5);
        color: var(--color-ink-soft);
        font-size: var(--fs-body, 1rem);
    }

    .c-sub-features__list li {
        margin-block-end: var(--space-1);
    }

    /* ============================================================
       Inline plan comparison
       ============================================================ */

    .c-sub-compare {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: var(--space-4);
        align-items: stretch;
    }

    .c-sub-compare__col {
        padding: var(--space-5);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md, 0.5rem);
        background: var(--color-surface);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .c-sub-compare__col--upgrade {
        border-color: var(--color-info);
        background: var(--color-info-soft);
    }

    .c-sub-compare__plan-name {
        margin: 0;
        font-size: var(--fs-display-xs, 1.25rem);
        font-weight: 700;
        color: var(--color-ink);
    }

    .c-sub-compare__plan-tag {
        font-size: var(--fs-ui-xs, 0.8125rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-ink-mute);
    }

    .c-sub-compare__diffs {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .c-sub-compare__diff-label {
        font-size: var(--fs-ui-xs, 0.8125rem);
        color: var(--color-ink-mute);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .c-sub-compare__diff-value {
        font-size: var(--fs-body, 1rem);
        color: var(--color-ink);
    }

    .c-sub-compare__arrow {
        align-self: center;
        font-size: var(--fs-display-md, 2rem);
        color: var(--color-ink-mute);
    }

    @media (max-width: 720px) {
        .c-sub-compare {
            grid-template-columns: 1fr;
        }
        .c-sub-compare__arrow {
            transform: rotate(90deg);
        }
    }

    /* ============================================================
       Add-ons — card grid (attached + available)
       ============================================================ */

    .c-sub-addons {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: var(--space-4);
    }

    .c-sub-addon {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md, 0.5rem);
        background: var(--color-surface);
    }

    /* Attached cards: subtle "you own this" tint via accent border-left. */
    .c-sub-addon--attached {
        border-left: 4px solid var(--color-info);
    }

    /* Available cards: same baseline, badge does the differentiation. */
    .c-sub-addon--available {
        background: var(--color-surface);
    }

    .c-sub-addon__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .c-sub-addon__name {
        margin: 0;
        font-size: var(--fs-display-xs, 1.125rem);
        font-weight: 700;
        color: var(--color-ink);
        line-height: 1.25;
    }

    .c-sub-addon__price {
        font-size: var(--fs-ui-sm, 0.875rem);
        font-weight: 600;
        color: var(--color-ink);
        white-space: nowrap;
    }

    .c-sub-addon__kind-badge {
        display: inline-block;
        padding: 0.125rem var(--space-2);
        margin-block-end: var(--space-1);
        border-radius: 999px;
        font-size: var(--fs-ui-xs, 0.75rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: var(--color-surface-alt);
        color: var(--color-ink-mute);
    }

    .c-sub-addon__kind-badge--capacity {
        background: var(--color-info-soft);
        color: var(--color-info-deep);
    }
    .c-sub-addon__kind-badge--feature {
        background: var(--color-warn-soft);
        color: var(--color-warn-deep);
    }
    .c-sub-addon__kind-badge--service {
        background: var(--color-surface-alt);
        color: var(--color-ink-soft);
    }

    .c-sub-addon__desc {
        margin: 0;
        font-size: var(--fs-body-sm, 0.9375rem);
        color: var(--color-ink-soft);
        flex: 1;
    }

    /* ---- Usage bar for capacity add-ons ---- */

    .c-sub-addon__usage {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .c-sub-addon__usage-bar {
        position: relative;
        height: 0.5rem;
        background: var(--color-surface-alt);
        border-radius: 999px;
        overflow: hidden;
    }

    .c-sub-addon__usage-fill {
        position: absolute;
        inset: 0 auto 0 0;
        background: var(--color-info);
        border-radius: 999px;
        transition: width 200ms ease;
    }

    /* Severity escalates as the user nears their cap. */
    .c-sub-addon__usage-fill--info {
        background: var(--color-info);
    }
    .c-sub-addon__usage-fill--warn {
        background: var(--color-warn);
    }

    .c-sub-addon__usage-text {
        font-size: var(--fs-ui-xs, 0.8125rem);
        color: var(--color-ink-mute);
        font-variant-numeric: tabular-nums;
    }

    .c-sub-addon__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        margin-block-start: auto;
    }

    .c-sub-addon__since {
        font-size: var(--fs-ui-xs, 0.8125rem);
        color: var(--color-ink-mute);
    }

    /* ============================================================
       Recent invoices — lightweight table
       ============================================================ */

    .c-sub-invoices {
        width: 100%;
        border-collapse: collapse;
    }

    .c-sub-invoices th,
    .c-sub-invoices td {
        padding: var(--space-3) var(--space-3);
        border-bottom: 1px solid var(--color-line);
        text-align: left;
        font-size: var(--fs-body, 1rem);
    }

    .c-sub-invoices th {
        font-size: var(--fs-ui-xs, 0.8125rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-ink-mute);
    }

    .c-sub-invoices__amount {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* ============================================================
       Cancel block — intentionally subtle
       ============================================================ */

    .c-sub-cancel {
        margin-block-start: var(--space-6);
        padding-block-start: var(--space-5);
        border-top: 1px solid var(--color-line);
    }

    .c-sub-cancel summary {
        cursor: pointer;
        font-size: var(--fs-ui-sm, 0.875rem);
        color: var(--color-ink-mute);
        list-style: none;
    }

    .c-sub-cancel summary::-webkit-details-marker {
        display: none;
    }

    .c-sub-cancel__body {
        margin-block-start: var(--space-3);
        padding: var(--space-4);
        background: var(--color-surface-alt);
        border-radius: var(--radius-md, 0.5rem);
        font-size: var(--fs-body, 1rem);
        color: var(--color-ink-soft);
    }

    .c-sub-cancel__body p {
        margin: 0 0 var(--space-3) 0;
    }

    /* ============================================================
       State preview switcher — design-time only.
       Removed when production data is wired and the ?state= toggle is gone.
       ============================================================ */

    .c-sub-preview {
        margin-block-end: var(--space-5);
        padding: var(--space-3) var(--space-4);
        background: var(--color-surface-alt);
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-md, 0.5rem);
        font-size: var(--fs-ui-sm, 0.875rem);
    }

    .c-sub-preview__label {
        font-weight: 600;
        color: var(--color-ink-mute);
        margin-right: var(--space-3);
    }

    .c-sub-preview__links {
        display: inline-flex;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .c-sub-preview__links a {
        color: var(--color-ink-soft);
    }

    .c-sub-preview__links a[aria-current="true"] {
        color: var(--color-ink);
        font-weight: 700;
    }
}