/**
 * Pricing surfaces: modal chrome + plan-picker / plan-card properties.
 * Requires care-app-shell-tokens.css, care-surfaces.css, care-btn.css.
 *
 * Property (paint): .care-plan-picker, .care-plan-card, .care-pricing-lightbox, .care-pricing-gate-layout
 * Entity (identity / JS only): .care-pricing-tier, .care-pricing-enterprise-compact, data-care-tier, data-care-page
 */

/* —— Modal chrome (layout role) —— */
.care-pricing-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.care-pricing-lightbox[hidden] {
    display: none !important;
}

.care-pricing-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: var(--care-app-overlay-backdrop);
    backdrop-filter: blur(var(--care-app-overlay-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--care-app-overlay-backdrop-blur));
}

.care-pricing-lightbox__sheet {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(100%, 72rem);
    /* Grow with content; only scroll when the viewport itself is the limit. */
    max-height: 92dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: var(--care-app-radius-lg, 12px);
    border: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
    background: var(--care-app-color-surface-default, #fff);
    box-shadow: var(--care-app-shadow-floating, 0 20px 50px rgba(0, 0, 0, 0.18));
}

.care-pricing-lightbox__toolbar {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 3;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.care-pricing-lightbox__close {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--care-app-radius-md, 8px);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--care-app-color-ink-secondary, #64748b);
    background: var(--care-app-color-surface-muted, #f1f5f9);
    cursor: pointer;
}

.care-pricing-lightbox__close:hover {
    color: var(--care-app-color-ink-primary, #0f172a);
    background: var(--care-app-color-border-subtle, #e2e8f0);
}

.care-pricing-lightbox__close:focus-visible {
    outline: 2px solid var(--care-app-color-focus-ring, #2563eb);
    outline-offset: 2px;
}

.care-plan-picker__loading {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--care-app-color-ink-secondary, #64748b);
}

/* —— Plan picker (stack + intro + grid) —— */
.care-plan-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.care-pricing-fragment-root {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.care-plan-picker__header {
    margin: 0;
    padding-right: 2.75rem;
}

.care-plan-picker__title {
    margin: 0;
    font-size: var(--care-app-type-size-heading-1, 1.5rem);
    font-weight: var(--care-app-type-weight-heading, 600);
    line-height: 1.25;
    color: var(--care-app-color-ink-primary, #0f172a);
}

.care-plan-picker__intro {
    margin-top: 0.4rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--care-app-color-ink-secondary, #64748b);
}

.care-plan-picker__intro p {
    margin: 0;
}

.care-plan-picker__intro p + p {
    margin-top: 0.45rem;
}

.care-plan-picker__intro-lead {
    color: var(--care-app-color-ink-primary, #0f172a);
    font-size: 1.02rem;
    line-height: 1.4;
}

.care-plan-matrix-wrap {
    margin-block-end: 0;
    overflow-x: auto;
}

/* —— Plan comparison matrix —— */
table.care-tabular-view.care-plan-matrix {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
    border-radius: var(--care-app-radius-md, 8px);
    overflow: hidden;
    background: var(--care-app-color-surface-default, #fff);
}

table.care-tabular-view.care-plan-matrix thead th {
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: start;
    color: var(--care-app-color-ink-primary, #0f172a);
    background: #f3f6fa;
    border-bottom: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
    border-right: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
    vertical-align: bottom;
    white-space: normal;
}

table.care-tabular-view.care-plan-matrix thead th:last-child,
table.care-tabular-view.care-plan-matrix tbody :is(th, td):last-child {
    border-right: none;
}

table.care-tabular-view.care-plan-matrix tbody :is(th, td) {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
    border-right: 1px solid #e8eef5;
    vertical-align: middle;
    text-align: start;
}

table.care-tabular-view.care-plan-matrix tbody tr:last-child > :is(th, td) {
    border-bottom: none;
}

table.care-tabular-view.care-plan-matrix tbody tr:nth-child(even) > :is(th, td) {
    background: #f7f9fc;
}

table.care-tabular-view.care-plan-matrix tbody tr:nth-child(odd) > :is(th, td) {
    background: #fff;
}

table.care-tabular-view.care-plan-matrix tbody tr[aria-current='true'] > :is(th, td),
table.care-tabular-view.care-plan-matrix tbody tr.care-plan-matrix__row--current > :is(th, td) {
    background: #eef4ff;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__col-tier {
    width: 18%;
    font-weight: 650;
    color: var(--care-app-color-ink-primary, #0f172a);
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__col-weekly {
    width: 16%;
    white-space: normal;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__th-label {
    display: block;
    line-height: 1.25;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__capacity {
    display: block;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--care-app-color-ink-primary, #0f172a);
    line-height: 1.35;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__col-service {
    width: 28%;
    white-space: normal;
    overflow-wrap: break-word;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__col-price {
    width: 14%;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__price-free {
    font-style: italic;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--care-app-color-ink-secondary, #64748b);
}

table.care-tabular-view.care-plan-matrix:has(.care-tabular-actions) :is(th, td).care-tabular-view__col-actions,
table.care-tabular-view.care-plan-matrix .care-plan-matrix__col-action {
    width: 24%;
    min-width: 10.5rem;
    max-width: none;
    text-align: start;
    vertical-align: middle;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions {
    display: block;
    width: 100%;
    max-width: 10.5rem;
}

table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions > .care-btn,
table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions .care-btn,
table.care-tabular-view.care-plan-matrix .care-pricing-gate__free-form,
table.care-tabular-view.care-plan-matrix .care-pricing-gate__free-form .care-btn,
table.care-tabular-view.care-plan-matrix .care-mp-switch-plan-form,
table.care-tabular-view.care-plan-matrix .care-mp-switch-plan-form .care-btn {
    display: flex;
    width: 100%;
    max-width: 10.5rem;
    min-width: 10.5rem;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    flex: none;
}

.care-plan-matrix__note {
    margin: 0.85rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--care-app-color-ink-secondary, #64748b);
}

.care-plan-card--enterprise + .care-plan-matrix__note,
.care-pricing-enterprise-compact + .care-plan-matrix__note {
    margin-top: 1rem;
}

.care-plan-matrix__note + .care-plan-matrix__note {
    margin-top: 0.35rem;
}

.care-plan-matrix__tax {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--care-app-color-ink-secondary, #64748b);
    opacity: 0.9;
}

.care-plan-picker__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* —— Plan card (shared offer chrome) —— */
.care-plan-card__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    transition:
        box-shadow var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-plan-card--highlight .care-plan-card__inner {
    border-color: var(--care-app-color-accent, #1d4ed8);
    outline: 1px solid var(--care-app-color-accent, #1d4ed8);
}

/* Strong focus lift — do not use the weak shell floating token here. */
.care-plan-card:is(:hover, :focus-within) .care-plan-card__inner {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--care-app-color-accent, #1d4ed8) 45%, transparent),
        0 12px 28px rgb(15 23 42 / 0.22),
        0 28px 56px rgb(29 78 216 / 0.35);
}

/* Emit .care-plan-card__ink on copy that should lift — one color knob, no h3 twin rules. */
.care-plan-card__ink {
    color: var(--care-plan-card-ink, var(--care-app-color-ink-secondary));
    transition: color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-plan-card__title.care-plan-card__ink,
.care-plan-card__price.care-plan-card__ink {
    --care-plan-card-ink: var(--care-app-color-ink-primary);
}

.care-plan-card:is(:hover, :focus-within) .care-plan-card__ink,
.care-plan-card__ink--accent {
    --care-plan-card-ink: var(--care-app-color-accent);
}

.care-plan-card__head {
    margin: 0 0 0.35rem;
}

/* Beat html.care-app h3 margin/type — color stays on .care-plan-card__ink. */
html.care-app h3.care-plan-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--care-app-type-weight-heading, 600);
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.care-plan-card__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.care-plan-card__price {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    font-weight: var(--care-app-type-weight-heading, 600);
    line-height: 1.3;
}

.care-plan-card__price--muted {
    font-weight: 500;
    --care-plan-card-ink: var(--care-app-color-ink-secondary);
}

.care-plan-card__features {
    flex: 1 1 auto;
    margin: 0 0 0.5rem;
    padding: 0 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

.care-plan-card__feature {
    margin: 0 0 0.2rem;
}

.care-plan-card__feature:last-child {
    margin-bottom: 0;
}

.care-plan-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
}

.care-plan-card__actions .care-btn {
    width: 100%;
    text-align: center;
}

/* Compact / Enterprise block: stacked copy, CTA below. */
.care-plan-card--compact .care-plan-card__inner,
.care-plan-card--enterprise .care-plan-card__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    border-left: 3px solid var(--care-app-color-accent, #1d4ed8);
}

.care-plan-card--compact .care-plan-card__copy,
.care-plan-card--enterprise .care-plan-card__copy {
    min-width: 0;
}

.care-plan-card--compact .care-plan-card__actions,
.care-plan-card--enterprise .care-plan-card__actions {
    width: 10.5rem;
    max-width: 100%;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.care-plan-card--compact .care-plan-card__actions .care-btn,
.care-plan-card--enterprise .care-plan-card__actions .care-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
}

html.care-app .care-plan-card--compact h3.care-plan-card__title,
.care-plan-card--compact h3.care-plan-card__title,
.care-plan-card--enterprise h3.care-plan-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--care-app-type-weight-heading, 600);
    letter-spacing: normal;
    line-height: 1.25;
}

.care-plan-card__headline {
    margin: 0.4rem 0 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--care-app-color-ink-primary, #0f172a);
}

.care-plan-card__body,
.care-plan-card__lead {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.care-plan-card__more {
    margin: 0.55rem 0 0;
}

.care-plan-card__more > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--care-app-color-accent, #1d4ed8);
}

.care-plan-card__more > summary::-webkit-details-marker {
    display: none;
}

.care-plan-card__more > summary::before {
    content: '▸ ';
    font-weight: 700;
}

.care-plan-card__more[open] > summary::before {
    content: '▾ ';
}

.care-plan-card__includes {
    margin: 0.55rem 0 0;
    padding: 0 0 0 1.1rem;
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--care-app-color-ink-secondary, #64748b);
}

.care-plan-card__closing {
    margin: 0.7rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--care-app-color-ink-primary, #0f172a);
}

.care-plan-card__extras {
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.care-plan-card__plus {
    position: relative;
    display: block;
    margin: 0;
    padding-left: 1.05rem;
}

.care-plan-card__plus::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '+';
    font-weight: 700;
    color: var(--care-app-color-accent, #1d4ed8);
}

.care-plan-card__plus-text {
    display: inline;
}

/* —— Gate layout roles (emit on the element; not data-care-page) —— */
.care-pricing-gate-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    min-height: 100dvh;
    box-sizing: border-box;
}

.care-pricing-gate-card.care-auth-card {
    width: min(100%, 72rem);
    max-width: 100%;
    padding: 1rem;
}

.care-pricing-gate-card > h1 {
    margin: 0 0 0.35rem;
}

.care-pricing-gate__explain {
    margin: 0 0 1rem;
    line-height: 1.4;
    color: var(--care-app-color-ink-secondary, #64748b);
}

.care-pricing-gate__explain a {
    color: var(--care-app-color-accent, #1d4ed8);
}

.care-pricing-gate__free-form {
    margin: 0;
}

/* —— Host spacing / route —— */
.care-manage-payments-plans {
    margin-block-start: 1.25rem;
}

.care-pricing-route-fallback {
    min-height: 0;
}

/* Compact offer layout + stacked plan matrix (half-shell). */
@media (max-width: 47.99rem) {
    .care-plan-picker__grid {
        grid-template-columns: 1fr;
    }

    .care-plan-card--compact .care-plan-card__actions,
    .care-plan-card--enterprise .care-plan-card__actions {
        width: 10.5rem;
        max-width: 100%;
    }

    .care-plan-matrix-wrap {
        overflow-x: visible;
    }

    table.care-tabular-view.care-plan-matrix {
        width: 100%;
        table-layout: auto;
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    table.care-tabular-view.care-plan-matrix thead {
        display: none;
    }

    table.care-tabular-view.care-plan-matrix tbody {
        display: grid;
        gap: 0.75rem;
    }

    table.care-tabular-view.care-plan-matrix tbody tr {
        display: block;
        width: 100%;
        border: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
        border-radius: var(--care-app-radius-md, 8px);
        overflow: hidden;
        background: #fff;
    }

    table.care-tabular-view.care-plan-matrix tbody tr:nth-child(even) > :is(th, td),
    table.care-tabular-view.care-plan-matrix tbody tr:nth-child(odd) > :is(th, td) {
        background: transparent;
    }

    table.care-tabular-view.care-plan-matrix tbody tr[aria-current='true'],
    table.care-tabular-view.care-plan-matrix tbody tr.care-plan-matrix__row--current {
        border-color: color-mix(in srgb, var(--care-app-color-accent, #1d4ed8) 35%, #e2e8f0);
        box-shadow: inset 3px 0 0 var(--care-app-color-accent, #1d4ed8);
    }

    table.care-tabular-view.care-plan-matrix tbody tr[aria-current='true'] > :is(th, td),
    table.care-tabular-view.care-plan-matrix tbody tr.care-plan-matrix__row--current > :is(th, td) {
        background: transparent;
    }

    /*
     * Beat desktop column width rules (.care-plan-matrix__col-* { width: 12–22% })
     * that otherwise leave a thin strip and wrap values character-by-character.
     */
    table.care-tabular-view.care-plan-matrix tbody :is(th, td),
    table.care-tabular-view.care-plan-matrix tbody .care-plan-matrix__col-tier,
    table.care-tabular-view.care-plan-matrix tbody .care-plan-matrix__col-weekly,
    table.care-tabular-view.care-plan-matrix tbody .care-plan-matrix__col-service,
    table.care-tabular-view.care-plan-matrix tbody .care-plan-matrix__col-price,
    table.care-tabular-view.care-plan-matrix tbody .care-plan-matrix__col-action,
    table.care-tabular-view.care-plan-matrix:has(.care-tabular-actions) tbody :is(th, td).care-tabular-view__col-actions {
        display: grid;
        /* Labels wrap first (cap ~33%); values keep the usable width. */
        grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
        align-items: baseline;
        column-gap: 0.75rem;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 0.7rem 0.85rem;
        border-right: none;
        border-bottom: 1px solid #e8eef5;
        text-align: start;
        overflow: visible;
        overflow-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }

    table.care-tabular-view.care-plan-matrix tbody :is(th, td):last-child {
        border-bottom: none;
    }

    table.care-tabular-view.care-plan-matrix tbody th.care-plan-matrix__col-tier {
        display: block;
        padding: 0.8rem 0.85rem;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        text-align: start;
        background: #f3f6fa;
        border-bottom: 1px solid var(--care-app-color-border-subtle, #e2e8f0);
    }

    table.care-tabular-view.care-plan-matrix tbody td::before {
        content: attr(data-label);
        min-width: 0;
        font-size: 0.75rem;
        font-weight: 650;
        line-height: 1.3;
        color: var(--care-app-color-ink-secondary, #64748b);
        overflow-wrap: break-word;
        hyphens: auto;
    }

    table.care-tabular-view.care-plan-matrix tbody td.care-plan-matrix__col-action,
    table.care-tabular-view.care-plan-matrix:has(.care-tabular-actions) tbody td.care-tabular-view__col-actions {
        display: block;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0.85rem;
    }

    table.care-tabular-view.care-plan-matrix tbody td.care-plan-matrix__col-action::before {
        display: none;
    }

    table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions,
    table.care-tabular-view.care-plan-matrix .care-mp-plan-picker__actions {
        display: block;
        max-width: none;
        width: 100%;
    }

    table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions > .care-btn,
    table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions .care-btn,
    table.care-tabular-view.care-plan-matrix .care-mp-plan-picker__actions > .care-btn,
    table.care-tabular-view.care-plan-matrix .care-mp-plan-picker__actions .care-btn,
    table.care-tabular-view.care-plan-matrix .care-pricing-gate__free-form,
    table.care-tabular-view.care-plan-matrix .care-pricing-gate__free-form .care-btn,
    table.care-tabular-view.care-plan-matrix .care-mp-switch-plan-form,
    table.care-tabular-view.care-plan-matrix .care-mp-switch-plan-form .care-btn {
        display: flex;
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        justify-content: center;
    }

    /* Desktop equal-width CTA lock must not shrink mobile buttons. */
    table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions > .care-btn,
    table.care-tabular-view.care-plan-matrix .care-plan-matrix__actions .care-btn {
        min-width: 0;
    }
}