/* KahunaCart Subscriptions — the storefront.

   This file styles nothing on its own. Every colour, radius and easing here
   reads a --kc-* token declared by the base plugin's stylesheet, which resolves
   --kahunacart-* (a site's override) → --grav-* (a theme's design tokens) → a
   neutral derived from --kahunacart-fg. See the base plugin's docs/theming.md
   for the full chain and the variable reference.

   Two consequences worth knowing. A theme that already colours KahunaCart
   colours the subscription cards for nothing — there is no second set of
   variables to configure. And with the base plugin's `builtin_css` switched off
   this file is not enqueued either, because with the tokens gone it would paint
   subscription cards in a palette nothing else on the page is using.

   Every rule is scoped to .kahunacart-subscription or .kahunacart-subscriptions,
   and the outer selector is wrapped in :where() wherever it is not load-bearing,
   so a theme's own plain class selector wins on its own weight. Nothing in this
   file forces a value past a theme's, and nothing in it ever should. */

/* ── the list ───────────────────────────────────────────────────────────────
   One wrapper, three destinations: the account tab, the detail page and the
   receipt panel. They differ in spacing and nothing else. */

.kahunacart-subscriptions {
    display: grid;
    gap: 1rem;
}
.kahunacart-subscriptions--account {
    margin-block: 1.5rem;
}
.kahunacart-subscriptions--order {
    margin-block: 1rem;
}
.kahunacart-subscriptions--detail {
    margin-block: 1.5rem;
}

/* ── one subscription ───────────────────────────────────────────────────────
   A card rather than a table row. A subscription carries facts of very
   different lengths — a product name, a status, an interval, an amount and two
   dates — and a table that fits all of them on a phone does not exist. */

.kahunacart-subscription {
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-subscription + .kahunacart-subscription {
    margin-block-start: 0.75rem;
}

/* The same class wraps the buy button's terms, and on a mixed product — plan
   variants and plain one-off variants behind one button — that wrapper is
   hidden whenever the chosen variant sells no plan. The browser's own
   [hidden] rule carries no specificity at all, so any theme rule that gives
   .kahunacart-subscription a display value would leave an empty bordered box
   on the product page. This one is deliberately not wrapped in :where(): it is
   load-bearing, and it is the one place in this file where losing to a theme
   would be a bug rather than a courtesy. The descendant half covers the two
   sentences inside, which are hidden the same way. */
.kahunacart-subscription[hidden],
.kahunacart-subscription [hidden] {
    display: none;
}

/* A cancelled or expired subscription is still shown — the customer needs to
   know it existed and when it ended — but faded, so the live ones above it are
   what the eye lands on. */
.kahunacart-subscription--cancelled,
.kahunacart-subscription--expired {
    opacity: 0.75;
}

.kahunacart-subscription-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-block-end: 0.6rem;
}

.kahunacart-subscription-plan {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.kahunacart-subscription-plan :where(a) {
    color: inherit;
}

/* ── the status chip ────────────────────────────────────────────────────────
   Four tones, not seven colours. A customer needs to know whether something is
   fine, needs attention, or is over; seven colours say none of that, and the
   exact status is spelled out in words inside the chip anyway.

   All four pair a *background* token with a *foreground* token, which sounds
   obvious and is the thing this block previously got wrong: --kc-subtle and
   --kc-muted are both ink, two points on the same neutral ramp, and a theme is
   perfectly entitled to resolve them to the same colour — Kahuna maps both onto
   its --k-muted — at which point the chip's text is invisible against its own
   fill. So the neutral chip now sits on --kc-surface-2 nudged one step away
   from the card it is on, and carries --kc-fg, the page's own ink.

   The three tonal chips had the milder version of the same problem: the tint is
   16–20% of a token that is already a mid-tone, and a mid-tone read at 12px bold
   against a 16% wash of itself lands around 2.4–3.9:1 in the base palette —
   under AA either way. Mixing the tone toward --kc-fg fixes it in both modes at
   once and without a media query: on a light page the ink is dark and the tone
   deepens, on a dark page the ink is light and the tone lifts, and the hue is
   still plainly green, amber or red. The plain `color` above each mix is what an
   engine without color-mix() falls back to. */

.kahunacart-subscription-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--kc-surface-2, var(--kc-surface));
    background: color-mix(in srgb, var(--kc-fg) 10%, var(--kc-surface-2, var(--kc-surface)));
    color: var(--kc-fg);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.kahunacart-subscription-chip--ok {
    background: color-mix(in srgb, var(--kc-success) 16%, transparent);
    color: var(--kc-success);
    color: color-mix(in srgb, var(--kc-success) 65%, var(--kc-fg));
}
.kahunacart-subscription-chip--warn {
    background: color-mix(in srgb, var(--kc-warning) 20%, transparent);
    color: var(--kc-warning);
    color: color-mix(in srgb, var(--kc-warning) 65%, var(--kc-fg));
}
.kahunacart-subscription-chip--bad {
    background: color-mix(in srgb, var(--kc-danger) 16%, transparent);
    color: var(--kc-danger);
    color: color-mix(in srgb, var(--kc-danger) 65%, var(--kc-fg));
}
.kahunacart-subscription-chip + .kahunacart-subscription-chip {
    margin-inline-start: 0.35rem;
}

/* ── the facts ──────────────────────────────────────────────────────────────
   A definition list rather than a table: these are label/value pairs, they wrap
   independently, and a screen reader reads them as pairs for nothing. */

.kahunacart-subscription-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.6rem 1rem;
    margin: 0;
}
.kahunacart-subscription-facts > div {
    min-inline-size: 0;
}
.kahunacart-subscription-facts dt {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kahunacart-subscription-facts dd {
    margin: 0.1rem 0 0;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
.kahunacart-subscription-interval {
    color: var(--kc-muted);
    font-size: 0.85rem;
}

.kahunacart-subscription-note,
.kahunacart-subscription-hint {
    margin-block: 0.5rem 0;
    color: var(--kc-muted);
    font-size: 0.85rem;
}

/* ── the actions ────────────────────────────────────────────────────────────
   Each button is its own form, so they are laid out as a row of forms rather
   than as a row of buttons. Wrapping is the point: on a phone each action gets
   its own line with its own explanation under it. */

.kahunacart-subscription-actions {
    display: grid;
    gap: 0.85rem;
    margin-block: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--kc-border);
}
.kahunacart-subscription-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0;
}
.kahunacart-subscription-action .kahunacart-subscription-hint {
    margin: 0;
}
.kahunacart-subscription-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.kahunacart-subscription-confirm input {
    margin-block-start: 0.25rem;
}

/* Ending a subscription is the one destructive thing on this page, so it reads
   as one — but quietly, because the customer chose to be here. */
:where(.kahunacart-subscription-cancel) {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, var(--kc-border));
    color: var(--kc-danger);
}

/* ── the orders table ───────────────────────────────────────────────────────
   The one place a table earns its keep: four short, comparable columns that a
   customer scans down rather than reads across. It scrolls inside its own box
   so a narrow screen never scrolls the page sideways. */

.kahunacart-subscription-orders {
    overflow-x: auto;
    margin-block: 0.75rem 1.5rem;
}
.kahunacart-subscription-orders table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.kahunacart-subscription-orders th {
    text-align: start;
    padding: 0.4rem 0.55rem;
    border-block-end: 1px solid var(--kc-border);
    color: var(--kc-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.kahunacart-subscription-orders td {
    padding: 0.45rem 0.55rem;
    border-block-end: 1px solid color-mix(in srgb, var(--kc-border) 60%, transparent);
    vertical-align: middle;
}

/* ── the timeline ───────────────────────────────────────────────────────────
   An ordered list, newest first, because that is the order somebody reading a
   support ticket wants and the markup should say so. */

.kahunacart-subscription-timeline {
    margin: 0.75rem 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}
.kahunacart-subscription-event {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-block-end: 0.4rem;
    border-block-end: 1px solid color-mix(in srgb, var(--kc-border) 55%, transparent);
    font-size: 0.9rem;
}
.kahunacart-subscription-event time {
    min-inline-size: 6.5rem;
    color: var(--kc-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.kahunacart-subscription-event-what {
    font-weight: 600;
}
.kahunacart-subscription-event-who {
    margin-inline-start: auto;
    color: var(--kc-muted);
    font-size: 0.78rem;
}
/* The two entries a customer actually goes looking for. */
.kahunacart-subscription-event--payment_failed .kahunacart-subscription-event-what,
.kahunacart-subscription-event--past_due .kahunacart-subscription-event-what {
    color: var(--kc-danger);
}

.kahunacart-subscription-back {
    margin-block-start: 1.5rem;
}

/* ── the receipt panel ──────────────────────────────────────────────────────
   Two sentences and a link. Deliberately quiet: the customer came to the
   receipt for the order, and this is a signpost rather than a headline. */

.kahunacart-subscriptions--order .kahunacart-subscription-headline {
    margin-block-end: 0.35rem;
    font-weight: 600;
}
.kahunacart-subscriptions--order .kahunacart-subscription-covered {
    margin-block-end: 0.5rem;
    color: var(--kc-muted);
    font-size: 0.9rem;
}
.kahunacart-subscriptions--order .kahunacart-subscription-manage {
    margin: 0;
}

.kahunacart-account-empty {
    color: var(--kc-muted);
}