/*
 * BioAge+ card — Figma R2: Dashboard file VtSQbiEqtuaowkAOQhXmpI, page
 * "🟢 bioage + []" (326:7352), layout set widget_bioage_layout 1878:8834.
 *
 * Four canonical layouts share one black shell (desktop 468px designs, r12,
 * p20; mobile 362px designs, r16, p18, 1px alpha-white-20 border):
 *   - hero    (1878:8835 / 8844) → no-data pitch + art
 *   - split   (1878:8863 / 8853) → score + upsell column (mobile stacks a
 *     frosted CTA panel under the score card)
 *   - partial (1878:8883 / 8872; renamed from "pending" per sasha's Figma
 *     comment — the layout axis label may still read pending) → calculating
 *     pill + copy + numbers strip
 *   - score   (1878:8891 / 8880) → title, timeline, count-up number(s)
 *
 * Mobile is driven by the card's own measured width (< 440px), same
 * pattern as BiomarkersOverviewCard.
 */

.card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding: var(--spacing-20);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-base-dark);
    color: var(--color-text-primary-inverted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile shell (Figma device=mobile variants). */
.cardMobile {
    flex-direction: column;
    gap: var(--spacing-24);
    height: auto;
    padding: var(--spacing-18);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color-alpha-white-20);
}

/* ============================ No-data hero ============================ */

/* Desktop shells: symbol height as a floor; fill the slot when a composed
 * layout (dashboard row) sizes the parent. Standalone, 100% of an auto parent
 * resolves to auto and the floor wins. Mobile combos override to auto. */
.cardHero {
    min-height: 287px;
    height: 100%;
    /* Stretch, not center: inner columns fill via flex stretch — a percentage
     * height dies whenever the card's own height is min-height-driven
     * (standalone, or tallest in the dashboard row). */
    align-items: stretch;
    gap: var(--spacing-12);
    overflow: hidden;
}

.heroColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    /* Copy keeps at least the width where the title wraps like the comps;
     * below the designed 468 the art column yields first. */
    min-width: 208px;
}

.heroHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-18);
}

.heroCopy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.heroCta {
    width: 100%;
}

.heroCta button {
    width: 100%;
}

/* Heatmap-pills art column (Figma image 1878:8843, 184px, contain). */
.heroArt {
    position: relative;
    /* 184 at the designed 468 width; yields to the copy column in narrower
     * slots (the 1100-1450 viewport band gives slot 2 ~342-456px) so the
     * title doesn't over-wrap and blow past the 287 floor. */
    flex: 0 1 184px;
    width: 184px;
    min-width: 108px;
}

.heroArt img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/*
 * Mobile hero: label, art strip, then per-segment copy + arrow (1878:9788 /
 * 1878:9841). Card height is content-driven — the use-case symbols land at
 * 238.81 / 262 depending on copy length, which both resolve the flexible
 * Figma image row to ~86px.
 */
.cardHeroMobile {
    align-items: flex-start;
    gap: var(--spacing-12);
}

.heroMobileArt {
    position: relative;
    width: 326px;
    height: 86px;
    flex-shrink: 0;
    align-self: center;
}

.heroMobileArt img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.heroMobileBottom {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-18);
    width: 100%;
}

.heroMobileCopy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    flex: 1;
    min-width: 0;
}

/* ========================= Partial pipeline hero ========================= */

.cardPartial {
    min-height: 282px;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.cardMobile.cardPartial {
    height: auto;
    justify-content: flex-start;
    gap: var(--spacing-24);
}

/* Large calculating pill (Figma 312:7776): 40px gif, glass chrome. */
.partialPill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: 4px var(--spacing-16) 4px 4px;
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid var(--border-color-alpha-white-10);
    border-radius: var(--border-radius-xs);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    box-shadow:
        0 20px 25px 0 rgba(0, 0, 0, 0.1),
        0 8px 10px 0 rgba(0, 0, 0, 0.1);
}

.partialPillIcon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.partialPillIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.partialPillLabel {
    text-transform: uppercase;
}

/* Figma pr-64 keeps the headline off the right edge (1878:8884). */
.partialCopy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
    padding-right: var(--spacing-64);
    box-sizing: border-box;
}

.cardMobile .partialCopy {
    gap: var(--spacing-8);
    padding-right: 0;
}

.partialStrip {
    display: block;
    width: 100%;
    aspect-ratio: 1230 / 237;
    object-fit: cover;
    pointer-events: none;
}

/* =============================== Score view =============================== */

.cardScore {
    min-height: 282px;
    height: 100%;
    align-items: stretch;
}

.cardMobile.cardScore {
    height: auto;
}

.scoreView {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

.scoreViewMobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    width: 100%;
}

.scoreTop {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
}

.scoreHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    width: 100%;
}

.scoreHeaderLeft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-14);
}

/* Mobile open-arrow affordance (Figma 1800:9903, 20px). */
.linkArrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-primary-inverted);
}

.currentNumber {
    white-space: nowrap;
}

/* ------------------------------- Timeline ------------------------------- */

.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Desktop multi-history rows sit tighter (Figma 272:17899). */
.timelineTight {
    gap: 9px; /* no --spacing-9 token */
}

.timelineRow {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    width: 100%;
}

.line {
    flex: 1;
    height: 1px;
    min-width: 0;
}

/* Row tints from the Figma line/label svg + text fills — the alpha steps on
 * #adadad / white and the #81B1E2 current line have no tokens. */
.lineCurrent {
    background: #81b1e2;
}

.lineAdjacent {
    background: rgba(255, 255, 255, 0.2);
}

.lineMuted {
    background: rgba(255, 255, 255, 0.1);
}

.lineFuture {
    height: 0;
    background: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Figma mixes 69/70px on these labels; 69 matches the score master and the
 * portal PR. */
.rowLabel {
    flex: none;
    width: 69px;
    text-transform: uppercase;
    white-space: nowrap;
}

.rowLabelCurrent {
    color: var(--color-text-secondary-disabled);
}

.rowLabelAdjacent {
    color: rgba(173, 173, 173, 0.5);
}

.rowLabelMuted {
    color: rgba(173, 173, 173, 0.2);
}

/* ------------------------- Numbers + footers ------------------------- */

.dataPointRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

/* Previous reading (Figma 272:17912): muted stack beside the big number. */
.previousPoint {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
    opacity: 0.6;
    color: var(--color-text-secondary);
}

.previousPoint span {
    text-transform: uppercase;
}

.chronoFooter {
    display: flex;
    flex-direction: column;
}

.deltaRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.deltaEmphasis {
    color: var(--color-text-primary-inverted);
}

/* "-3.9%" change badge — text-only on mobile (1800:12219), arrow + text on
 * the desktop multi-result views (312:7568). */
.deltaPercent {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    opacity: 0.7;
    text-transform: uppercase;
    white-space: nowrap;
}

.deltaPercentIcon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary-disabled);
}

/* ========================= Split (score + upsell) ========================= */

.cardSplit {
    min-height: 287px;
    height: 100%;
    align-items: stretch;
    gap: var(--spacing-20);
}

.splitDivider {
    width: 1px;
    align-self: stretch;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
}

.upsellColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.upsellHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-18);
}

.upsellCopy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

/*
 * Mobile split: the score card floats over a frosted CTA panel that peeks
 * out below it (Figma 1878:8853 — outer clip wrapper, inner card z2 with a
 * -12px overlap, CTA container z1).
 */
.splitStack {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color-alpha-white-20);
    background: var(--color-bg-base-dark);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

.splitScoreCard {
    z-index: 2;
    margin-bottom: -12px;
    width: 100%;
}

.splitCta {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
    width: 100%;
    padding: var(--spacing-32) var(--spacing-18) var(--spacing-18);
    box-sizing: border-box;
    background: var(--color-bg-fill-alpha-white-10);
    border: 1px solid var(--border-color-alpha-white-10);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        0 20px 25px 0 rgba(0, 0, 0, 0.1),
        0 8px 10px 0 rgba(0, 0, 0, 0.1);
}

.splitCtaBottom {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-18);
    width: 100%;
}

.splitCtaBottom .upsellCopy {
    flex: 1;
    min-width: 0;
    gap: var(--spacing-8);
}

/* =============================== Loading =============================== */

/*
 * Figma layout=loading variants (1953:48368 desktop / 1953:48370 mobile) —
 * "muted" gradient blocks; the per-block angles differ by a few degrees in
 * the file and collapse to one here.
 */
.skel {
    display: block;
    border-radius: 6px; /* no radius token between xxs (4) and xs (8) */
    background: linear-gradient(176deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
}

.skelTitle {
    width: 106px;
    height: 26px;
}

.skelNumber {
    width: 52px;
    height: 48px;
}

.skelFooter {
    width: 100%;
    height: 19px;
    border-radius: var(--border-radius-xxs);
}

.skelLines {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
}

/* Desktop timeline rows sit at 9px, same as the score view (no token). */
.skelLinesTight {
    gap: 9px;
}

.skelLine {
    width: 100%;
    height: 10px;
    border-radius: 2px;
}

.skelGroup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.skelTitleMobile {
    width: 77px;
    height: 22px;
    border-radius: var(--border-radius-xxs);
}

.skelNumberMobile {
    width: 43px;
    height: 44px;
}

.skelBottomMobile {
    width: 133px;
    height: 38px;
}

/* The desktop row-alignment floors must not inflate the content-driven
 * mobile variants (widget_bioage_use_cases mobile combos run 213-383 tall
 * by state) — min-height would beat the mobile height: auto. */
.cardMobile.cardHero,
.cardMobile.cardPartial,
.cardMobile.cardScore,
.cardMobile.cardSplit {
    min-height: 0;
}