/**
 * pass-offer.css — the offer block emitted by renderPassOffer()
 * (common/js/pass-offer.js).
 *
 * ONE block, two hosts: the 107Live hub card (inside .ranking-card-passoffer,
 * whose padding and top rule live in ranking-card.css) and the account page's
 * billing card. The hosts style their own container; this file styles only
 * what goes inside it, which is why the same markup can sit in both without
 * either page knowing about the other.
 *
 * Every colour reads a page-local alias first and falls back to the --t7-*
 * token, because the two hosts name their locals differently (the hub uses
 * the ranking-card family --text/--text-muted/--border/--accent, the account
 * page uses --ink/--ink-soft/--rule/--primary). The token is the shared floor;
 * no colour literal appears here.
 *
 * Quiet register (PRODUCT.md): this sits under a card's CTA and must not
 * compete with it. The price is the only thing set in the display face.
 */

.pass-offer-price {
    font-family: var(--t7-font-numeric), system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0 0 0.15rem;
    color: var(--text, var(--t7-text));
}

.pass-offer-price strong { font-weight: 700; }

.pass-offer-price-note {
    font-family: var(--t7-font-body), system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, var(--t7-text-muted));
    margin-left: 0.25rem;
}

.pass-offer-sub,
.pass-offer-meta {
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0 0 0.15rem;
    color: var(--text-muted, var(--t7-text-muted));
}

.pass-offer-meta { margin-bottom: 0.7rem; }

/* The purchase control.
 *
 * It wears the DIM VARIANT of the ranking-card CTA (DESIGN.md §5 "Ranking
 * Card CTAs"): soft result-blue tint, action-hover text, weight 600, no
 * shadow, no hover lift, radius 12px. Three reasons, all deliberate:
 *
 *  - Result-blue, never athletic-orange. The orange belongs to the brand and
 *    never appears on a control (DESIGN.md §2 and §6, stated three times).
 *    The account page's own .account-btn is orange; that is a page-local
 *    exception predating this file, not a licence to copy.
 *  - The DIM variant, not the filled primary, because the card's one CTA
 *    ("View results" / "View stats" / "View forecast") is the filled primary
 *    directly above, and a second filled blue button would read as a rival
 *    destination rather than a subordinate purchase. Quiet register: this is
 *    an upsell under a results card, not a landing-page hero.
 *  - Copied rather than reused: .ranking-link's dim rule is scoped to
 *    `.ranking-card-footer` (it computes the hierarchy from visible siblings
 *    there), and this button is deliberately outside that wrapper and also
 *    renders on /account/, which loads neither stylesheet.
 *
 * The text colour flips per theme HERE rather than reading --action-hover,
 * because only the ranking-card hosts define that alias. The pairing is the
 * documented one: result-blue-hover on light, result-blue-light on dark, the
 * only combination that clears WCAG AA 4.5:1 on the tint in both themes
 * (mid-blue fails at 2.4:1 in dark).
 */
.pass-offer-buy {
    --po-tint: var(--t7-result-blue);
    --po-ink: var(--t7-result-blue-hover);
    display: inline-block;
    border: none;
    cursor: pointer;
    background: color-mix(in srgb, var(--po-tint) 12%, transparent);
    color: var(--po-ink);
    padding: 0.55rem 1.25rem;
    border-radius: 12px;
    font-family: var(--t7-font-display), system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    transition: background 0.2s ease;
}

/* [data-theme] only, no prefers-color-scheme companion: navigation.js always
   stamps the attribute (reading the media query itself when nothing is
   saved), and NOTHING else in the system carries a prefers-color-scheme
   rule. A media query here would be the one element on the page able to
   disagree with the theme around it. */
[data-theme="dark"] .pass-offer-buy { --po-ink: var(--t7-result-blue-light); }

/* Deepen the tint only. No lift: that motion is reserved for the filled
   primary, and borrowing it here would undo the subordination above. */
.pass-offer-buy:hover {
    background: color-mix(in srgb, var(--po-tint) 20%, transparent);
}

.pass-offer-buy[disabled] { opacity: 0.6; cursor: wait; }

/* The quiet second affordance, and the only one an anonymous visitor gets.
   It carries its own colour rather than inheriting .ranking-card-passoffer-cta
   from ranking-card.css, because /account/ renders the same link and does not
   load that file. */
.pass-offer-about {
    font-family: var(--t7-font-display), system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--action-hover, var(--accent, var(--t7-result-blue)));
    text-decoration: none;
}

.pass-offer-about:hover { text-decoration: underline; }

/* The About link always follows the button, and needs a line of its own. */
.pass-offer-buy + .pass-offer-about,
.pass-offer-error + .pass-offer-about {
    display: block;
    margin-top: 0.6rem;
}

/* Same treatment as .report-row__error (report-list.css): the system's
   existing JS-only per-row failure state, at the same size and colour. */
.pass-offer-error {
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0.5rem 0 0;
    color: var(--t7-behind-red);
}

/* The account page has no .ranking-card-passoffer wrapper, so the block
   supplies its own separation from the billing rows above it. */
.pass-offer-mount:not(:empty) {
    border-top: 1px solid var(--rule, var(--border, var(--t7-border)));
    margin-top: 1rem;
    padding-top: 1rem;
}