/*
 * Account Setup card — Figma R2 Dashboard file VtSQbiEqtuaowkAOQhXmpI,
 * account_setup_layout set 335:8431. Values verbatim from the variant symbols
 * (see AccountSetupCard.tsx for the axis map). Every colour / radius / spacing
 * traces to a src/styles token except the flagged literals: the shadow-float /
 * shadow-back effects, the CTA hover glow gradient, and the 1px / 6px radii
 * that have no token (same precedent as ConsultationCheckInCard).
 */

/* ============================= Shared shell ============================= */
.card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    margin: 0;
    appearance: none;
    background: var(--color-bg-base-dark);
    border: var(--border-width-sm) solid var(--border-color-alpha-white-20);
    color: var(--color-text-primary-inverted);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.loading {
    cursor: default;
}

/* Display-only render (no onClick → plain div, see AccountSetupCard.tsx):
 * no pointer affordance on a card that does nothing. */
div.card {
    cursor: default;
}

/* =============================== Widget ================================ */
/* Shared widget shell (326:7355 / 1841:45987): black, p20, alpha-white-20
 * border, full-width column. */
.widget {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-20);
}

/* Desktop (326:7355): 280px floor, radius-small, content pinned top/bottom.
 * Fills the slot when the composed dashboard row sizes it (shared heights). */
.widget.desktop {
    min-height: 280px;
    height: 100%;
    justify-content: space-between;
    /* Designer revision (sasha, 2026-07-14): padding 20 -> 24, radius 12 -> 16 */
    padding: var(--spacing-24);
    border-radius: var(--border-radius-md);
}

/* Default-state gold glow (sasha, 2026-07-14). Figma radial: svg r=10,
 * gradientTransform matrix(0 23.65 -70.302 0 228 140) on a 456x280 card
 * -> ellipse 703.02x236.5px at center; rect opacity 0.9 baked into stops. */
.widget.desktop:not(.loading) {
    background:
        radial-gradient(
            154.17% 84.46% at 50% 50%,
            rgba(0, 0, 0, 0) 35.096%,
            rgba(64, 60, 26, 0.225) 51.322%,
            rgba(127, 120, 52, 0.45) 67.548%,
            rgba(191, 179, 77, 0.675) 83.774%,
            rgba(254, 239, 103, 0.9) 100%
        ),
        var(--color-bg-base-dark);
}

/* Desktop hover (985:27999): white-10 overlay lift + shadow-float; the arrow
 * button drops out (.iconSlot) and the filled step turns solar. Scoped to
 * `button` — a display-only div render (no onClick) gets no hover affordance,
 * same rule as `div.card` above. */
button.widget.desktop:not(.loading):hover {
    background:
        linear-gradient(var(--color-bg-fill-alpha-white-10), var(--color-bg-fill-alpha-white-10)),
        var(--color-bg-base-dark);
    box-shadow:
        0 8px 10px -6px rgba(0, 0, 0, 0.1),
        0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Desktop loading (1953:48593): the raised treatment is baked in — shadow-float
 * over the solid black shell. */
.widget.desktop.loading {
    box-shadow:
        0 8px 10px -6px rgba(0, 0, 0, 0.1),
        0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Mobile (1841:45987): radius-medium, 18px gap, height from content, no button. */
.widget.mobile {
    gap: var(--spacing-18);
    border-radius: var(--border-radius-md);
}

/* Mobile hover (1841:46809): white-10 overlay only — no shadow on mobile. */
button.widget.mobile:not(.loading):hover {
    background:
        linear-gradient(var(--color-bg-fill-alpha-white-10), var(--color-bg-fill-alpha-white-10)),
        var(--color-bg-base-dark);
}

/* ---- Copy ---- */
/* Desktop copy stack (326:7358): 12px between title and subtitle. */
.copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-14);
    width: 100%;
    word-break: break-word;
}

/* Mobile content (1841:45990): title row + subtitle, 12px apart. */
.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    width: 100%;
    word-break: break-word;
}

/* Mobile title row (1841:46752): reserved space-between row (title only here). */
.topRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Headline enables the cap-height variant (fontFeatureSettings "case"). */
.title {
    font-feature-settings: 'case' 1;
}

/* Mobile headline is a single line (1841:45991). */
.titleMobile {
    white-space: nowrap;
}

/* ---- Arrow button (desktop widget) ---- */
/* The circle IconButton stays visible on hover (985:27999) — only the shell
 * lifts and the filled step turns solar. */
.iconSlot {
    flex-shrink: 0;
}

/* Mobile top-right diagonal arrow (1841:46742): 20px, text-secondary-disabled.
 * The Icon svg is coloured via currentColor. */
.mobileArrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary-disabled);
}

/* ============================ Step indicator =========================== */
/* 1888:7592 / 1888:7909: equal 4px segments, 4px apart, 1px radius. */
.steps {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    flex-shrink: 0;
}

.step {
    flex: 1 0 0;
    /* Designer fix (sasha, 2026-07-15): segments keep a 4px floor so the CTA's
     * 20px bar (3 x 4px + two 4px gaps) never collapses. */
    min-width: 4px;
    height: 4px;
    border-radius: 1px; /* no radius token below xxs (4px) */
    background: var(--color-bg-fill-alpha-white-20);
}

/* Filled segment — brand-solar by default (mobile / CTA / hover). */
.stepFilled {
    background: var(--color-bg-fill-brand-solar);
}

/* Desktop widget at rest fills white (326:7355); hover flips it to solar. */
.widget.desktop .stepFilled {
    background: var(--color-bg-base-light);
}

button.widget.desktop:not(.loading):hover .stepFilled {
    background: var(--color-bg-fill-brand-solar);
}

/* Steps + label group, desktop widget (Figma 2666:17692, gap 16). */
.stepsBlock {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

/* "1 of 3 completed" — count in full white, rest 60% white (Figma 2666:17644/45;
 * 60% white is unbound rgba in Figma too). */
.stepsLabel {
    color: rgba(255, 255, 255, 0.6);
}

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

/* =============================== CTA pill ============================== */
/* 985:28084: black pill, 8px radius, 12px gap, py12/px16, content-width.
 * Height explicit (not content-derived) so the hover tighten can animate.
 * The hover treatment is animated (not in Figma — the symbols are static;
 * requested by product 2026-07-06): glow fades in, arrow slides over the
 * step-bar, shell eases 43→40. */
.cta {
    width: fit-content;
    height: 43px;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-16);
    /* Designer bump 8 -> 12 (sasha, 2026-07-15) */
    border-radius: var(--border-radius-sm);
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/*
 * Hover glow (985:28032) on its own layer: gradients can't transition, opacity
 * can. Inset by -border-width so it also fills under the 1px shell border —
 * painting it inside the padding box leaves the rest-state ring showing
 * through as grey/olive edge lines.
 *
 * Gradient values: the base is the design system's neutral gradient (identical
 * to Typography's `.neutral-gradient` — #666 → #4D4D4D → #262626 → #111016).
 * Figma's MCP export dropped the leading minus signs on stops in BOTH layers
 * (neutral: first two stops; solar: first stop — verbatim `44.845%` paints a
 * flat 40%-alpha block over the right half). Restored: soft solar sheen from
 * the right edge fading out by mid-pill, matching the 985:28032 raster.
 */
.cta::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--border-width-sm));
    border-radius: inherit;
    background:
        linear-gradient(-90deg, rgba(254, 239, 103, 0.4) -44.845%, rgba(77, 77, 77, 0) 49.165%),
        linear-gradient(270deg, #666 -59.62%, #4d4d4d -6.95%, #262626 45.73%, #111016 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Positioned so they paint above the ::before glow layer. */
.ctaLabel {
    position: relative;
    white-space: nowrap;
}

/* Fixed 20px slot where the step-bar and the forward arrow (985:28077)
 * cross-fade — constant footprint, so the pill never changes width. */
.ctaSlot {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* CTA step indicator is a fixed 20px mini-bar (not full-width). */
.ctaSteps {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 4px;
    transition: opacity 0.2s ease;
}

.ctaArrow {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    color: var(--color-text-primary-inverted);
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.2s ease,
        transform 0.3s ease;
}

/* CTA hover (985:28032): glow fades in, shadow-back. The symbol tightens to
 * py8/h40, but the pill keeps its rest geometry in every state — product call
 *The symbol also carries no stroke — the shell's
 * alpha-white-20 border would read as grey/olive edge lines over the
 * gradient. Transparent, not none: keeps the 1px of layout. */
button.cta:not(.loading):hover {
    border-color: transparent;
    box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}

button.cta:not(.loading):hover::before {
    opacity: 1;
}

button.cta:not(.loading):hover .ctaSteps {
    opacity: 0;
}

button.cta:not(.loading):hover .ctaArrow {
    opacity: 1;
    transform: none;
}

/* CTA loading (1953:48606): shadow-back, solid black (no glow), skeleton
 * label + dim steps. The symbol bakes in py8/h40, but the pill keeps its rest
 * geometry in every state (same product call as the hover rule) — no jump
 * when loading resolves. */
.cta.loading {
    box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}

/* ================================ Loading ============================== */
/* Skeleton fill — Figma "muted" style (rgba 229→173 at 20%); per-block angles
 * (168–178°) collapse to one, same precedent as ConsultationCheckInCard. */
.skel {
    display: block;
    border-radius: var(--border-radius-xxs);
    background: linear-gradient(176deg, rgba(229, 229, 229, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
}

/* ---- Desktop widget loading (1953:48594) ---- */
.skelCopy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    width: 100%;
}

/* Header row (1953:48651): centred 106×31 title bar. */
.skelHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 31px;
}

.skelTitle {
    flex-shrink: 0;
    width: 106px;
    height: 31px;
    border-radius: 6px; /* no radius token between xxs (4) and xs (8) */
}

/* Body group (1953:48667): two lines, 12px apart, right-inset 96px. */
.skelBodyGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    width: 100%;
    height: 44px;
    padding-right: var(--spacing-96);
    box-sizing: border-box;
}

.skelBodyLine {
    flex: 1 0 0;
    min-height: 1px;
    width: 100%;
}

/* Line 2 wrap (1953:48677): a further 96px right-inset. */
.skelBodyLine2Wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-right: var(--spacing-96);
    box-sizing: border-box;
}

.skelBodyLineShort {
    width: 100%;
    height: 16px;
}

/* Icon-button placeholder (1953:48673): plain 40px alpha-white-20 disc. */
.skelIconDisc {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    background: var(--color-bg-fill-alpha-white-20);
}

/* ---- Mobile widget loading (1953:48600) ---- */
.skelTitleWrapMobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-right: var(--spacing-80);
    box-sizing: border-box;
}

.skelTitleMobile {
    width: 100%;
    height: 20px;
    border-radius: 6px;
}

/* Body group (1953:48678): two equal lines in 38px, right-inset 96px. */
.skelBodyGroupMobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    width: 100%;
    height: 38px;
    padding-right: var(--spacing-96);
    box-sizing: border-box;
}

.skelBodyLine2WrapMobile {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    min-height: 1px;
    width: 100%;
    padding-right: var(--spacing-96);
    box-sizing: border-box;
}

/* ---- CTA loading (1953:48665) ---- */
.skelCtaLabel {
    flex-shrink: 0;
    width: 130px;
    height: 19px;
}