/* ============================================================
   .uk-aside-card — proposed canonical sidebar info card (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the sidebar info-card pair on `/tools/*` pages in
   `public/css/tools.css`:

     .tools-content-aside-card           -> .uk-aside-card               (card chrome on elevated surface)
     .tools-content-aside-card h4        -> .uk-aside-card-title         (icon + title row)
     .tools-content-aside-card h4 svg    -> .uk-aside-card-title > svg
     .tools-content-aside-card p         -> .uk-aside-card > p           (default body styling)
     .tools-content-aside-steps          -> .uk-aside-card-steps         (numbered ol with circle counters)
     .tools-content-aside-steps li::before -> CSS counter-based bubble

   Also collapses the `.tools-info-box` family (same shape — title row +
   body) since the two only differ in name and one's used in the right
   sidebar while the other sits inline in the left column. Both are the
   same "elevated surface info-card with icon + title + body" pattern.

   Composes with: nothing strict — but the title icon expects an inline
   `<svg>` direct child (sized + tinted by the canonical via
   `currentColor`). Numbered steps use a CSS counter — no manual
   numbering in the markup.

   Distinct from `.uk-alert` (alerts.css) and `.uk-alert-banner`:
     – Alerts ship with a tone-tinted surface and "this is a notice"
       framing (icon column on the side).
     – `.uk-aside-card` is a quiet *informational* card — title row
       on top with a small icon, body below. Reads as "here's some
       supporting context", not "here's a warning".
   ============================================================ */

/* ============================================
   Root — elevated surface info card
   ============================================
   `--color-bg-elevated` rather than `--color-bg-card` so the card
   reads as one step "raised" from the surrounding content — exactly
   the role a sidebar info card should fill.
   ============================================ */
.uk-aside-card {
    padding: var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* ============================================
   Title row — small icon + label
   ============================================
   Icon stays inline on the same line as the label. Default tone is
   primary-light; override on the consumer (`color: var(--color-warning)`
   etc.) when the card is signalling something specific.
   ============================================ */
.uk-aside-card-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    font-size: var(--font-md);
    font-weight: 600;
    line-height: var(--line-snug);
}

.uk-aside-card-title > svg {
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    color: var(--color-primary-light);
    stroke: currentColor;
}

/* ============================================
   Default body — plain `<p>` direct children
   ============================================
   Minimal opinion: paragraph rhythm with a quiet body colour. Multiple
   paragraphs get `--space-sm` between them.
   ============================================ */
.uk-aside-card > p {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-normal);
}

.uk-aside-card > p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Numbered steps — CSS counter-driven ol
   ============================================
   The signature "how it works" pattern. CSS counter increments on each
   `<li>` so consumers don't write numbers in the markup — and reordering
   steps stays a markup-only operation. Counter pill is a 1.4 em circle
   with primary-tinted bg + border, lifted ~0.15 em to align with the
   first text line.
   ============================================ */
.uk-aside-card-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: uk-aside-card-step;
}

.uk-aside-card-steps > li {
    position: relative;
    padding-left: 2em;
    margin-bottom: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-normal);
    counter-increment: uk-aside-card-step;
}

.uk-aside-card-steps > li:last-child {
    margin-bottom: 0;
}

.uk-aside-card-steps > li::before {
    content: counter(uk-aside-card-step);
    position: absolute;
    top: 0.15em;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    background: rgba(var(--color-primary-rgb), 0.15);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: 50%;
    color: var(--color-primary-light);
    font-size: var(--font-xs);
    font-weight: 600;
}

/* ============================================
   Tone modifiers — recolour the title icon and step bubbles
   ============================================
   Title icon and step counter bubbles share a tone story — when the
   card is signalling caution / success the icon and the numbers
   should match. Default is primary.
   ============================================ */
.uk-aside-card--accent .uk-aside-card-title > svg { color: var(--color-accent); }
.uk-aside-card--accent .uk-aside-card-steps > li::before {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    color: var(--color-accent);
}

.uk-aside-card--success .uk-aside-card-title > svg { color: var(--color-success); }
.uk-aside-card--success .uk-aside-card-steps > li::before {
    background: rgba(var(--color-success-rgb), 0.15);
    border-color: rgba(var(--color-success-rgb), 0.25);
    color: var(--color-success);
}

.uk-aside-card--warning .uk-aside-card-title > svg { color: var(--color-warning); }
.uk-aside-card--warning .uk-aside-card-steps > li::before {
    background: rgba(var(--color-warning-rgb), 0.15);
    border-color: rgba(var(--color-warning-rgb), 0.3);
    color: var(--color-warning);
}

/* ============================================
   --inline — inline placement (in-content) variant
   ============================================
   When the card sits inside the main column rather than a right sidebar,
   it tends to want a slightly smaller font for the body so it doesn't
   overpower the surrounding prose. `--inline` also drops the elevated
   surface back to the flat card surface so it doesn't read as
   "popping out" of an already-in-content context.
   ============================================ */
.uk-aside-card--inline {
    background: var(--color-bg-card);
}

.uk-aside-card--inline > p {
    font-size: var(--font-sm);
}