/* ============================================================
   .uk-definition-list — proposed canonical styled `<dl>` (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the privacy `<ul class="data-list">` lists in
   `public/css/privacy.css`:

     ul.data-list                -> dl.uk-definition-list
     ul.data-list li             -> .uk-definition-list-pair (group wrapper, dt + dd)
     ul.data-list li strong      -> dt   (the key — `<dt>` is the semantic match)
     plain text inside li        -> dd   (the value)

   Promotes the layout from a `<ul>` of `<strong>Key:</strong> value` lines
   to a proper HTML5 `<dl>` with `<dt>` / `<dd>` pairs (grouped via `<div>`
   wrappers, which HTML5 allows inside `<dl>`). Same visual treatment as
   the legacy — quiet card row with a left accent bar — but the markup is
   now semantically correct for definition data.

   Composes with: nothing — leaf primitive used inside privacy sections,
   future legal / docs / FAQ pages, and any meta block that lists
   key → value pairs (server identity stats, plan comparisons).

   Three layout modes:
     – default          : each pair is its own card row, key + value on
                          the same visual line via inline display.
     – `--stacked`      : key on one line, value below — for longer values
                          where inline reads cramped.
     – `--grid`         : two-column grid (keys left, values right) for
                          dense reference tables.
   ============================================================ */

/* ============================================
   Root — vertical stack of pair-rows
   ============================================ */
.uk-definition-list {
    margin: var(--space-md) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ============================================
   Pair — one dt + dd group with card chrome and left accent bar
   ============================================
   Wrap each <dt>+<dd> pair in `.uk-definition-list-pair` (a `<div>` is
   valid inside `<dl>` per HTML5). The accent bar uses
   `border-left: 3px solid` so the colour is overridable per-pair via tone
   modifiers below.
   ============================================ */
.uk-definition-list-pair {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   Default — inline display: dt + ': ' + dd on one line
   ============================================
   Browsers render `<dt>` and `<dd>` as block by default. Switching both
   to inline puts the key and value on the same visual line with a
   colon separator (added via `dt::after`).
   ============================================ */
.uk-definition-list dt {
    margin: 0;
    color: var(--color-primary-light);
    font-size: var(--font-md);
    font-weight: 600;
    line-height: var(--line-relaxed);
    display: inline;
}

.uk-definition-list dt::after {
    content: ':';
    margin-right: 0.4em;
}

.uk-definition-list dd {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
    display: inline;
}

/* ============================================
   --stacked — key on its own line, value below
   ============================================
   For longer values (paragraphs, multi-line lists) where inline reads
   cramped. Key stays uppercase-eyebrow-style; value flows beneath.
   ============================================ */
.uk-definition-list--stacked .uk-definition-list dt,
.uk-definition-list--stacked dt {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.uk-definition-list--stacked .uk-definition-list dt::after,
.uk-definition-list--stacked dt::after {
    content: '';
    margin: 0;
}

.uk-definition-list--stacked .uk-definition-list dd,
.uk-definition-list--stacked dd {
    display: block;
    color: var(--color-text);
}

/* ============================================
   --grid — two-column layout (key left, value right)
   ============================================
   Dense reference table style. Each pair becomes a 2-col grid; rows
   stack vertically. The accent bar stays on the pair wrapper. Useful
   for plan-spec comparisons, server identity tables, capability lists.
   ============================================ */
.uk-definition-list--grid .uk-definition-list-pair {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr;
    gap: var(--space-md);
    align-items: baseline;
}

.uk-definition-list--grid .uk-definition-list-pair dt {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: var(--line-snug);
}

.uk-definition-list--grid .uk-definition-list-pair dt::after {
    content: '';
    margin: 0;
}

.uk-definition-list--grid .uk-definition-list-pair dd {
    display: block;
    color: var(--color-text);
}

@media (max-width: 640px) {
    .uk-definition-list--grid .uk-definition-list-pair {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============================================
   Pair tones — recolour the accent bar + key
   ============================================
   Apply per-pair when a row needs to read at a different semantic weight
   (warning, success, neutral). Defaults to primary.
   ============================================ */
.uk-definition-list-pair--accent {
    border-left-color: var(--color-accent);
}
.uk-definition-list-pair--accent dt {
    color: var(--color-accent);
}

.uk-definition-list-pair--success {
    border-left-color: var(--color-success);
}
.uk-definition-list-pair--success dt {
    color: var(--color-success);
}

.uk-definition-list-pair--warning {
    border-left-color: var(--color-warning);
}
.uk-definition-list-pair--warning dt {
    color: var(--color-warning);
}

.uk-definition-list-pair--muted {
    border-left-color: var(--color-border);
}
.uk-definition-list-pair--muted dt {
    color: var(--color-text-muted);
}