/* ============================================================
   .uk-features-checklist — proposed canonical features checklist (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the simple checkmark `<ul>` family scattered across legacy
   stylesheets:

     .feature-list                     in `style.css`
     .feature-list li                  ↪ checkmark svg + body
     .feature-list li svg              ↪ green primary tone, 20-px stroke
     .feature-list li strong           ↪ key word in --color-text

   Promotes the pattern to a multi-column grid for landing-page feature
   sweeps and pricing comparisons. The legacy `.feature-list` rendered
   single-column with no max-width. The canonical defaults to
   2-column auto-fit so the same markup tightens up for landing copy
   without forcing a separate flat list.

   Composes with: nothing — leaf primitive. The check / cross icons are
   author-provided inline svgs; the canonical only sizes and tints them.

   Distinct from `.feature-list` markdown lists rendered inside `.uk-prose`
   — those keep `.uk-prose`'s prose typography. This canonical is for hand-
   authored landing-page checklists where you want the green-check grid.
   ============================================================ */

/* ============================================
   Root — auto-fit 2-column grid (default)
   ============================================
   `auto-fit` + `minmax(260px, 1fr)` collapses cleanly to a single column
   below ~520 px without a media query. List bullets removed; padding is
   per-item rather than per-list so horizontal alignment matches the
   surrounding prose.
   ============================================ */
.uk-features-checklist {
    list-style: none;
    margin: var(--space-lg) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-sm) var(--space-xl);
}

/* ============================================
   Item — checkmark + body row
   ============================================
   Each item is a flex row: leading icon, body. Body wraps; icon stays
   pinned to the first text line via `align-items: flex-start` +
   `margin-top: 2px` to align with the cap height.
   ============================================ */
.uk-features-checklist > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
}

.uk-features-checklist > li > svg {
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    margin-top: 2px;
    color: var(--color-success);
    stroke: currentColor;
}

.uk-features-checklist > li > strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ============================================
   --xmark — negation variant (red cross + muted body)
   ============================================
   For "what we don't do" lists or comparison tables. Recolours the icon
   to error tone and dims the body so the negation reads quietly without
   stealing emphasis from the affirmative list above it.
   ============================================ */
.uk-features-checklist--xmark > li > svg {
    color: var(--color-error);
}

.uk-features-checklist--xmark > li {
    color: var(--color-text-muted);
}

/* ============================================
   Tone modifiers — recolour the checkmark
   ============================================
   Default check is success (green). Use these when the list lives next
   to a section in a different brand colour and the green check would
   break the colour story.
   ============================================ */
.uk-features-checklist--primary > li > svg { color: var(--color-primary-light); }
.uk-features-checklist--accent  > li > svg { color: var(--color-accent); }
.uk-features-checklist--success > li > svg { color: var(--color-success); }

/* ============================================
   Layout modifiers — column count overrides
   ============================================
   Default auto-fit gives 2 columns at desktop, 1 at mobile. Override
   when the page knows what layout it wants.
   ============================================ */
.uk-features-checklist--single {
    grid-template-columns: 1fr;
}

.uk-features-checklist--three {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ============================================
   --boxed — each item gets a card chrome
   ============================================
   For when the checklist is the centerpiece of a section rather than a
   supporting list. Adds card surface + border + radius per item, hover
   lift to match `.uk-card--hoverable`.
   ============================================ */
.uk-features-checklist--boxed > li {
    padding: var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.uk-features-checklist--boxed > li:hover {
    background: var(--color-bg-card-hover);
    border-color: rgba(var(--color-primary-rgb), 0.4);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .uk-features-checklist--boxed > li {
        transition: background-color var(--transition-base);
    }

    .uk-features-checklist--boxed > li:hover {
        transform: none;
    }
}