/*
   Pricing cards — P9-13, C4 pass P9-15.

   The storefront's plan grid: one card per catalog tier, equal-height columns, the
   featured tier lifted by a border and a chip in its head bar. Each card is the house
   card component - head bar plus stacked body - so the pricing row reads as the same
   family as every other card in the panel instead of as plain boxes. The C4 pass moved
   the featured badge from an overhang on the card border into the head, and replaced the
   full-bleed CTA with a house-sized btn, because both read as foreign against the rest
   of the product.

   Every colour, radius, spacing and elevation here comes from tokens.css with no
   exception at all - unlike lightbox.css, which owns one deliberate scrim colour, this
   file owns none, so ImageViewerTest's "exactly one literal colour" rule has exactly one
   owner and this file must stay at zero. Nothing in this file is positioned: the badge
   sits in the head's flex row and the check marks are inline prefixes, so a source-level
   pin can forbid absolute positioning outright. Do not restate that rule here using the
   function-call spelling; a source-level count matches prose as readily as code.

   Loaded through an is_file-guarded link tag in layout.php, the same staging guard
   lightbox.css uses: a deployment that has not received this file yet renders the page
   unstyled rather than 404ing a stylesheet. The classes themselves are only ever emitted
   by templates/plans.php, so no other page pays for them.
*/

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s-4);
    align-items: stretch;
}

/* Column-flexed so the body can grow and pin every CTA to the foot of its card however
   long the copy above it is; the head bar and body padding come from the house card. */
.plan {
    display: flex;
    flex-direction: column;
}

.plan--featured {
    border-color: var(--primary);
    box-shadow: var(--e-3);
}

.plan__body {
    flex: 1 1 auto;
}

/* The head is a flex row, so pushing the chip to the far edge is a margin, not a
   position: it sits ON the head bar, never across the card border. */
.plan__badge {
    margin-inline-start: auto;
}

/* Fixed minimum height so a one-line tagline and a two-line tagline leave the price
   row at the same height across the row of cards. */
.plan__tagline {
    color: var(--on-surface-variant);
    font-size: var(--fs-body);
    min-block-size: 2.5em;
}

/* One stack child, so the price and its per-unit line travel together and the stack gap
   separates the whole pricing block from the tagline above and the list below - the C4
   complaint was these lines crowding the price. */
.plan__pricing {
    display: grid;
    gap: var(--s-1);
}

.plan__price {
    font-size: var(--fs-display);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.plan__per {
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    color: var(--on-surface-variant);
}

.plan__unit {
    font-size: var(--fs-label);
    color: var(--on-surface-variant);
}

.plan__features {
    list-style: none;
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    font-size: var(--fs-body);
}

.plan__features li::before {
    content: "✓ ";
    color: var(--primary);
    font-weight: var(--fw-semibold);
}

/* margin-block-start:auto absorbs the body's leftover height and pins the CTA to the
   foot of the card. align-self:start keeps it a house-sized btn: in a flex column the
   default stretch would full-bleed it, which is exactly what C4 rejected. */
.plan__cta {
    margin-block-start: auto;
    align-self: start;
}

/* The page body is one .stack (P9-16), so the rhythm between the balance card, the
   banners, the grid and this note comes from the stack gap; a margin here doubled it. */

/* P9-23: the credit trail inside the balance card. Three columns - reason chip, verbatim
   timestamp, signed delta - so a glance answers "why is my balance what it is". */
.planledger__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.planledger__list {
    list-style: none;
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
}

.planledger__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-3);
    align-items: center;
    font-size: var(--fs-body);
}

.planledger__when {
    color: var(--on-surface-variant);
    font-size: var(--fs-label);
}

.planledger__delta {
    font-weight: var(--fw-semibold);
}

/* P9-29: a quote whose payment window closed is still a row, but it reads as history
   rather than as something to act on - dimmed, status instead of action. */
.planquotes tr.is-closed {
    opacity: 0.65;
}

/* Below this width two 15rem columns would fit but read cramped; one column per row is
   the honest phone layout, and the featured tier leads it - on a phone the comparison
   row is a scroll, so the tier worth recommending should be the first card seen. */
@media (max-width: 640px) {
    .plans {
        grid-template-columns: 1fr;
    }

    .plan--featured {
        order: -1;
    }
}