/*
    urhema_plans.css — /plans page (Phase 7)

    Covers Plans.cshtml's own checkout-error banner and the Plans view component
    (Views/Shared/Components/Plans/Default.cshtml). GroupPlansBand's component view wasn't
    available when this was written — its section will need its own pass once that view is
    available, rather than guessing at classes that might not exist (see: the .ub-motion-*
    and .ub-studies__load-more lessons elsewhere in this project — a guessed class name is a
    silently-unstyled class name).

    Conventions (matches urhema_studies.css / urhema_today.css):
      - Page-scoped .ub-plans__* / .ub-plan-card__* names (house .ub- prefix).
      - Tokens only — no raw hex, no font stacks.
      - .ub-plan-card composes .ub-card (background/border/radius/shadow) rather than
        redeclaring those properties — same reasoning urhema_studies.css's own header comment
        gives for reusing .ub-card/.ub-chip/.ub-meter instead of redefining them per page.

    REWRITE, not a patch: the Plans component's original CSS lived inline in the .cshtml
    (not a real stylesheet) and referenced --color-ink/--color-muted/--color-surface/
    --color-rule/--color-accent throughout — the retired naming scheme urhema_tokens.css's
    own header comment says it superseded. None of those custom properties exist anywhere in
    the real token system, so every color on this component was resolving to nothing before
    this file existed. Not a case where a surgical patch made sense — see chat/WIRING for the
    full token-by-token reasoning, especially why --color-accent maps to three DIFFERENT real
    tokens depending on context (border vs. standalone text vs. text-on-solid-accent-fill).
*/

.ub-plans__error {
    display: flex;
    align-items: center;
    gap: var(--ub-space-3);
    max-width: var(--ub-width-reading);
    margin: var(--ub-space-5) auto;
    padding: var(--ub-space-4) var(--ub-space-5);
    background: var(--ub-accent-100);
    border: 1px solid var(--ub-accent-500);
    border-radius: var(--ub-radius-md);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-accent-700); /* accent-700 for text, not accent-500 — accent-500 fails contrast, same rule urhema_studies.css documents */
}
.ub-plans__error svg {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

/* ==================== Plans component (Views/Shared/Components/Plans/Default.cshtml) === */

.ub-plans {
    max-width: 56.25rem; /* ~900px — between --ub-width-reading (42rem) and --ub-width-shell
                             (80rem); neither fits a 2-card pricing grid, so this stays a
                             plain rem value rather than forcing an ill-fitting token */
    margin-inline: auto;
    padding-block: var(--ub-space-7);
    padding-inline: var(--ub-gutter); /* same fluid horizontal-padding token urhema_studies.css uses for its own outer wrapper */
}

.ub-plans__head {
    text-align: center;
    margin-bottom: var(--ub-space-6);
}
.ub-plans__head h1 {
    margin: 0 0 var(--ub-space-3);
    color: var(--ub-ink);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-2xl);
    line-height: var(--ub-leading-tight);
    letter-spacing: var(--ub-tracking-tight);
}
.ub-plans__sub {
    max-width: var(--ub-width-reading);
    margin: 0 auto;
    color: var(--ub-ink-soft); /* prominent secondary line — ink-soft, matching .ub-studies__lede's own weight */
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
}

.ub-plans__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ub-space-5);
    align-items: start;
}
@media (max-width: 640px) {
    .ub-plans__grid { grid-template-columns: 1fr; }
}

.ub-plan-card {
    /* Background/border/radius/shadow come from .ub-card, applied alongside this class in
       the view — this rule is layout/spacing only, specific to how a plan card is laid out
       on THIS page. */
    padding: var(--ub-space-6);
}
/* Color only — .ub-card's own `border: var(--ub-rule)` shorthand already sets width/style;
   redeclaring the full shorthand here would be redundant. Same pattern
   .ub-card--interactive:hover already uses for the identical reason. */
.ub-plan-card--featured {
    border-color: var(--ub-accent-500);
}

.ub-plan-card__name {
    margin: 0 0 var(--ub-space-2);
    color: var(--ub-ink);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
}
.ub-plan-card__blurb {
    margin: 0 0 var(--ub-space-4);
    color: var(--ub-ink-soft); /* same secondary-line weight as .ub-plans__sub/.ub-group-plans__lead */
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-body);
}
.ub-plan-card__price {
    margin: 0 0 var(--ub-space-4);
}
.ub-plan-card__amount {
    color: var(--ub-ink);
    font-size: var(--ub-text-2xl);
    font-weight: 700;
}
.ub-plan-card__interval {
    color: var(--ub-ink-muted);
}
.ub-plan-card__annual-note {
    margin: calc(var(--ub-space-2) * -1) 0 var(--ub-space-4);
    color: var(--ub-accent-700); /* standalone text, not a fill — accent-700 for contrast, not accent-500 */
    font-size: var(--ub-text-xs);
    font-weight: 600;
}

.ub-plan-card__toggle {
    display: inline-flex;
    margin-bottom: var(--ub-space-4);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-sm);
    overflow: hidden;
}
.ub-plan-card__toggle-btn {
    appearance: none;
    padding: var(--ub-space-2) var(--ub-space-4);
    border: 0;
    background: transparent;
    color: var(--ub-ink-muted);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ub-duration-fast) var(--ub-ease),
                color var(--ub-duration-fast) var(--ub-ease);
}
.ub-plan-card__toggle-btn.is-active {
    /* Solid accent fill needs accent-CONTRAST text (near-white), not accent-700 — a
       fundamentally different contrast situation from text sitting NEXT TO a neutral
       background. Same distinction .ub-plan-card__cta makes below. */
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
}

.ub-plan-card__features {
    margin: 0 0 var(--ub-space-6);
    padding: 0;
    list-style: none;
}
.ub-plan-card__features li {
    position: relative;
    padding: var(--ub-space-2) 0 var(--ub-space-2) var(--ub-space-6);
    color: var(--ub-ink);
}
.ub-plan-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ub-accent-700); /* checkmark glyph on the neutral card background — accent-700, same contrast reasoning as the annual note */
    font-weight: 700;
}

/* A planFeature block with Included switched off — "not in this plan," per the doctype's
   own description, rather than left off the list entirely so the two cards' lists stay
   the same length and are easy to compare row-for-row. */
.ub-plan-card__features li.ub-plan-card__feature--excluded {
    color: var(--ub-ink-muted);
    text-decoration: line-through;
}
.ub-plan-card__features li.ub-plan-card__feature--excluded::before {
    content: "\2715";
    color: var(--ub-ink-muted);
    font-weight: 400;
}

.ub-plan-card__cta {
    display: block;
    width: 100%;
    padding: var(--ub-space-3) var(--ub-space-4);
    border: 1px solid var(--ub-accent-500);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast); /* text ON a solid accent fill — contrast token, not accent-700 */
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-base);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition: background var(--ub-duration-fast) var(--ub-ease),
                border-color var(--ub-duration-fast) var(--ub-ease);
}
.ub-plan-card__cta:hover {
    background: var(--ub-accent-700);
    border-color: var(--ub-accent-700);
}
.ub-plan-card__cta--ghost {
    background: transparent;
    color: var(--ub-accent-700); /* text on the neutral card background, not a fill — accent-700 */
}
.ub-plan-card__cta--ghost:hover {
    background: var(--ub-accent-100);
}

.ub-plan-card__current {
    display: block;
    padding: var(--ub-space-3) 0;
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
    text-align: center;
}
.ub-plan-card__fineprint {
    margin: var(--ub-space-3) 0 0;
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-xs);
    text-align: center;
}

/* ==================== GroupPlansBand component ========================================= */
/* Views/Shared/Components/GroupPlansBand/Default.cshtml — a sibling section on /plans, not
   nested inside .ub-plans (Plans.cshtml invokes the two components separately), so this gets
   its own top-level block name rather than a .ub-plans__ descendant. */

.ub-group-plans {
    /* Background/border/radius/shadow come from .ub-card, composed in the view — same
       reasoning as .ub-plan-card above. */
    max-width: var(--ub-width-reading); /* narrow, text-centric content — the reading-width
                                            token is a genuine fit here, unlike .ub-plans'
                                            2-column grid which needed a wider, non-token value */
    margin: var(--ub-space-7) auto 0;
    padding: var(--ub-space-6);
    text-align: center;
}

.ub-group-plans__title {
    margin: 0 0 var(--ub-space-2);
    color: var(--ub-ink);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
}
.ub-group-plans__lead {
    max-width: 52ch; /* character-based readability constraint — not a token concern, left as-is */
    margin: 0 auto var(--ub-space-5);
    color: var(--ub-ink-soft); /* prominent lead line under a heading — same role as .ub-plans__sub, same token */
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-body);
}

.ub-group-plans__tiers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ub-space-3);
    margin: 0 0 var(--ub-space-5);
    padding: 0;
    list-style: none;
}
.ub-group-plans__tier {
    min-width: 9rem;
    padding: var(--ub-space-3) var(--ub-space-4);
    /* Not .ub-card here on purpose — a shadowed card-within-a-card would compete visually
       with the section's own .ub-card surface. A plain bordered box (same border/radius
       tokens .ub-card itself uses) reads as a lighter-weight tier chip instead. */
    border: var(--ub-rule);
    border-radius: var(--ub-radius-sm);
}
.ub-group-plans__tier-name {
    display: block;
    color: var(--ub-ink);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
}
.ub-group-plans__tier-seats {
    display: block;
    margin-top: var(--ub-space-1);
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-xs);
}

.ub-group-plans__cta {
    display: inline-block;
    color: var(--ub-accent-700); /* standalone text link, not a fill — accent-700 for contrast, same rule as .ub-plan-card__cta--ghost */
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-base);
    font-weight: 600;
    text-decoration: none;
}
.ub-group-plans__cta:hover {
    text-decoration: underline;
}
/* Small hover nudge on the arrow — a deliberately light touch, matching this component's own
   documented intent ("Informational, not a checkout card... a signpost, not a 'buy' button")
   — kept as a text link rather than upgraded to .ub-button for that same reason. */
.ub-group-plans__cta-arrow {
    display: inline-block;
    transition: transform var(--ub-duration-fast) var(--ub-ease);
}
.ub-group-plans__cta:hover .ub-group-plans__cta-arrow {
    transform: translateX(0.2em);
}

.ub-group-plans__note {
    margin: var(--ub-space-3) 0 0;
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-xs);
}