/* ============================================================
   .uk-calculator-card — proposed canonical dark calculator/showcase card (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the pricing calculator's outer chrome in `public/css/pricing.css`:

     .calculator-card                  -> .uk-calculator-card                (dark gradient surface + radius-2xl + 56-px padding)
     .calculator-card::before          -> .uk-calculator-card::before        (top-right dot-pattern decoration, elliptically masked)
     .calculator-card::after           -> .uk-calculator-card::after         (bottom-left warm radial glow)

   The two decoration layers (dot-pattern + radial glow) are the visual
   signature of this card chrome — that's what makes a "calculator card"
   read different from a generic dark surface. Both are decorative
   (`pointer-events: none`) and clip into the rounded corners via the
   root's `overflow: hidden`.

   Composes with: nothing — leaf primitive. This canonical owns the
   *frame*; the inner calculator grid (inputs panel + output panel +
   divider) is page-specific business logic and lives outside.

   Distinct from `.uk-card` (cards.css):
     – `.uk-card` is the standard light-on-dark card surface, no
       decorations. Used for content cards, feature cards, plan cards.
     – `.uk-calculator-card` is the marketing "look at this thing"
       chrome — deeper gradient, decorative layers, larger padding,
       larger radius. Reserve for landing-page calculators or any
       similar showcase card that wants the "premium tool" feel.
   ============================================================ */

/* ============================================
   Root — dark gradient surface, generous padding, radius-2xl
   ============================================
   `position: relative` for the ::before / ::after decorations to anchor
   against. `overflow: hidden` clips both into the radius. The deeper
   gradient (rgba(22,34,46) → rgba(28,42,56) at 92–94% alpha) sits one
   step darker than `--color-bg-card` so the card reads as "elevated
   above the page" rather than "matching the page surface".
   ============================================ */
.uk-calculator-card {
    position: relative;
    padding: var(--space-3xl);
    background: linear-gradient(
        135deg,
        rgba(22, 34, 46, 0.94) 0%,
        rgba(28, 42, 56, 0.92) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* ============================================
   Top-right dot-pattern decoration
   ============================================
   400-px square of radial-gradient dots (one dot per 16-px cell, primary
   tint at 8% alpha), masked through an elliptical gradient so the dots
   fade inward as they approach the centre of the card. Negative offset
   (-40 px from each edge) bleeds the pattern outside the visible area
   so the densest part lives just at the corner rather than in the
   middle of the visible region.
   ============================================ */
.uk-calculator-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 400px;
    height: 400px;
    background-image: radial-gradient(
        circle,
        rgba(var(--color-primary-rgb), 0.08) 1px,
        transparent 1px
    );
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black, transparent 70%);
    pointer-events: none;
}

/* ============================================
   Bottom-left warm radial glow
   ============================================
   300-px circle of accent-tinted radial gradient at 6% alpha, offset
   so the brightest spot lives just at the bottom-left corner. Reads
   as a soft, warm halo from a notional light source — pairs with the
   cool primary-tinted dot-pattern on the opposite corner for depth.
   ============================================ */
.uk-calculator-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(var(--color-accent-rgb), 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* ============================================
   Modifier — --no-dots
   ============================================
   Strips the dot-pattern decoration. For cases where the inner content
   already carries enough visual texture and the dots would compete
   (a dense chart, a grid of small tiles).
   ============================================ */
.uk-calculator-card--no-dots::before {
    display: none;
}

/* ============================================
   Modifier — --no-glow
   ============================================
   Strips the warm corner glow. For cases where the card sits next to
   a hero or another element that already carries warm tones and the
   glow would over-saturate the corner.
   ============================================ */
.uk-calculator-card--no-glow::after {
    display: none;
}

/* ============================================
   Modifier — --compact
   ============================================
   Pulls padding down from `--space-3xl` to `--space-xl` for narrower
   contexts (sidebar embeds, secondary calculators). Decoration sizes
   stay the same — the elliptical mask handles the smaller surface
   gracefully.
   ============================================ */
.uk-calculator-card--compact {
    padding: var(--space-xl);
}

/* ============================================
   Mobile — pull decorations in
   ============================================
   Below 768 px the original 400-px / 300-px decorations are too big
   for the smaller card surface and dominate the inner content. Shrink
   both proportionally so they stay quiet at narrow widths.
   ============================================ */
@media (max-width: 768px) {
    .uk-calculator-card {
        padding: var(--space-xl);
    }

    .uk-calculator-card::before {
        top: -20px;
        right: -20px;
        width: 240px;
        height: 240px;
    }

    .uk-calculator-card::after {
        bottom: -40px;
        left: -40px;
        width: 200px;
        height: 200px;
    }
}