/* ============================================================
   Metric — LSH-ds (Heilsugátt DS)
   ============================================================
   Stat/KPI card: optional header icon + label + optional Tag
   pill + optional .lsh-menu kebab, timestamp line, big value
   with a stacked trend block beside it, and optional Highcharts
   slots (side fill or full-width bottom strip).
   Spec: docs/specs/2026-07-09-metric-design.md (v1.0, Figma
   2558:13439) revised by docs/specs/2026-07-10-metric-v1.1-
   reconcile-design.md (Figma 6126:694 — whole-family anatomy).

   - Base .metric = neutral. State modifiers (.metric-warning,
     .metric-error) set the surface and the element-scoped
     --metric-accent hook (Alert-sibling pattern).
   - Trend valence is decoupled from arrow direction: the consumer
     picks the arrow icon; .is-positive / .is-negative / .is-neutral
     set --metric-trend-color (spec D6 — clinically, up is not
     always good).
   - .metric-chart in the body is a fixed 120×56 mini (Figma
     _Chart mini default), right-aligned; .metric-chart--wide is
     a full-width bottom strip (56px). Both sized by the
     --metric-chart-width/-height hooks. js/metric.js renders
     Highcharts into either; without Highcharts the slot stays
     empty and the card is unaffected.
   - Dark overrides are keyed to [data-theme="dark"] ONLY (main.js
     always stamps the attribute; a media-query block would break
     the CodePen light wrapper).
   - Zero new :root tokens.
   ============================================================ */

.metric {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);                     /* 8px */
    padding: var(--spacing-3);                 /* 12px */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);           /* 8px (v1.1 — Figma 6126:694) */
    --metric-accent: var(--brand-600);
    /* Viðmiðunarmörk hook — metricChart's dotted plotLines and the HTML
       legend's band swatch both ride this. One step darker than the Figma
       vector's warning-500 (LSH-157): 500 was invisible on the tinted
       warning/error card surfaces in light mode. */
    --metric-band: var(--warning-600);
}

/* ── Header: [icon] label [Tag pill] [kebab] row, meta below ── */

.metric-header {
    display: flex;
    flex-direction: column;
    gap: 2px;                                  /* Figma header -> sub-title */
}

.metric-header-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);                     /* 4px */
}

.metric-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-primary);
}

.metric-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-sm);            /* 14px (v1.1) */
    line-height: var(--line-height-sm);        /* 20px */
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.metric-meta {
    margin: 0;
    font-size: var(--font-size-xs);            /* 12px */
    line-height: var(--line-height-xs);        /* 16px */
    font-weight: 400;
    color: var(--text-quaternary);             /* v1.1 — was tertiary */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Status pill — a composed .tag (tag-secondary-*), no metric-
   specific paint. Kebab — trigger + .lsh-menu in the menu
   component's anchor; both sit in-flow at the row's right. */
.metric-header-row > .tag,
.metric-header-row > .badge,
.metric-header-row > .lsh-menu-anchor {
    flex-shrink: 0;
}

.metric-menu-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);           /* 8px per Figma ClearButton */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--fg-quinary);
    font-size: 14px;                           /* 18px glyph box in Figma; FA at 14px fills it */
    transition: background-color 100ms, color 100ms;
}

.metric-menu-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.metric-menu-btn:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
}

/* The kebab sits at the card's right edge — right-align the menu
   so it opens inward (mirrors the tables toolbar-anchor override). */
.metric-header-row .lsh-menu {
    left: auto;
    right: 0;
    min-width: 200px;
}

/* ── Body: figures cluster left, side chart fills the rest ──── */

.metric-body {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-2);                     /* 8px */
}

.metric-figures {
    flex: 0 1 auto;                            /* may shrink — the trend context
                                                  truncates before the card overflows */
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                     /* 8px value -> trend block */
    min-width: 0;
}

.metric-value {
    margin: 0;
    font-size: var(--font-size-display-md);    /* 36px (v1.1 — was 30) */
    line-height: var(--line-height-display-md);/* 44px */
    font-weight: 600;
    letter-spacing: -0.02em;                   /* Figma display-md tracking */
    color: var(--text-primary);
    white-space: nowrap;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.metric-unit {
    font-size: var(--font-size-xl);            /* 20px */
    line-height: 1;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--text-tertiary);
}

/* ── Trend — stacked block beside the value (v1.1) ──────────── */

.metric-trend {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    --metric-trend-color: var(--text-tertiary);
}

.metric-trend-line {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);            /* 14px */
    line-height: var(--line-height-sm);        /* 20px */
    font-weight: 500;
    color: var(--metric-trend-color);
    white-space: nowrap;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.metric-trend-line i {
    font-size: 14px;                           /* 20px glyph box in Figma */
    width: 20px;
    line-height: 1;
    text-align: center;
    color: var(--metric-trend-color);
}

.metric-delta {
    color: var(--metric-trend-color);
}

.metric-context {
    margin: 0;
    max-width: 120px;                          /* consistency cap — same rhythm as the
                                                  chart width; long copy ellipsizes.
                                                  Keep context to ~2 short words. */
    font-size: var(--font-size-xs);            /* 12px */
    line-height: var(--line-height-xs);        /* 16px */
    font-weight: 400;
    color: var(--text-quaternary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Valence — color only; the consumer picks the arrow icon (D6).
   --text-success-secondary and --text-error-primary are semantic
   tokens, so both flip in dark mode with no override here. */
.metric-trend.is-positive { --metric-trend-color: var(--text-success-secondary); } /* #00581D light */
.metric-trend.is-negative { --metric-trend-color: var(--text-error-primary); }
.metric-trend.is-neutral  { --metric-trend-color: var(--text-tertiary); }

/* ── Chart slots ─────────────────────────────────────────────── */

/* Side chart: fixed mini (Figma _Chart mini default 3764:2150),
   right-aligned in the body row */
.metric-body .metric-chart {
    flex-shrink: 0;
    margin-left: auto;
    width: var(--metric-chart-width, 120px);
    height: var(--metric-chart-height, 56px);
}

/* Full-width bottom strip: a direct card child after the body */
.metric-chart--wide {
    width: 100%;
    height: var(--metric-chart-height, 56px);
}

/* ── States (Alert-sibling; exact 800/900 tiers per spec §6) ── */

.metric-warning {
    background-color: var(--bg-warning-primary);
    border-color: var(--border-warning);
    --metric-accent: var(--warning-800);       /* #874401 */
}

.metric-error {
    background-color: var(--bg-error-primary); /* #FFF7F7 exact */
    border-color: var(--border-error);
    --metric-accent: var(--error-800);         /* #8C0000 exact */
}

.metric-warning .metric-label { color: var(--warning-900); }   /* #612A01 */
.metric-error   .metric-label { color: var(--error-900); }     /* #660000 exact */

.metric-warning .metric-icon,
.metric-warning .metric-value,
.metric-warning .metric-meta,
.metric-error   .metric-icon,
.metric-error   .metric-value,
.metric-error   .metric-meta {
    color: var(--metric-accent);
}

.metric-warning .metric-trend,
.metric-error   .metric-trend {
    --metric-trend-color: var(--metric-accent);
}

/* The gray context anchor is deliberate in Figma — keeps tinted
   cards readable. */
.metric-warning .metric-context,
.metric-error   .metric-context {
    color: var(--text-quaternary);
}

/* Dark states — surfaces ride the --bg-*-primary dark flips
   (*-950 tier) untouched. The former Alert-D1 "one step louder"
   *-900 override was reversed 2026-07-13 (LSH-156): full-saturation
   surfaces overwhelmed the v1.2 chart cards and made the neutral
   chart axis text unreadable. Accents stay at the *-200 text tier,
   meta one step down at *-300 — both gain contrast on the darker
   ground. Borders flip free via --border-warning / --border-error. */
[data-theme="dark"] .metric {
    /* Band flips brighter on dark surfaces (LSH-157) — 600 sinks there. */
    --metric-band: var(--warning-500);
}

[data-theme="dark"] .metric-warning {
    --metric-accent: var(--warning-200);
}

[data-theme="dark"] .metric-error {
    --metric-accent: var(--error-200);
}

[data-theme="dark"] .metric-warning .metric-label { color: var(--warning-200); }
[data-theme="dark"] .metric-error   .metric-label { color: var(--error-200); }

[data-theme="dark"] .metric-warning .metric-meta { color: var(--warning-300); }
[data-theme="dark"] .metric-error   .metric-meta { color: var(--error-300); }

/* ── Size: sm (compact) ─────────────────────────────────────── */

.metric-sm .metric-value {
    font-size: var(--font-size-display-xs);    /* 24px */
    line-height: var(--line-height-display-xs);/* 32px */
}

.metric-sm .metric-trend-line {
    font-size: var(--font-size-xs);            /* 12px */
    line-height: var(--line-height-xs);        /* 16px */
}

.metric-sm .metric-trend-line i {
    font-size: 12px;
    width: 16px;
}

.metric-sm .metric-body .metric-chart {
    width: var(--metric-chart-width, 96px);
    height: var(--metric-chart-height, 40px);
}

.metric-sm .metric-chart--wide {
    height: var(--metric-chart-height, 40px);
}

/* ============================================================
   Docs helpers — used only by pages/components/metric.html
   ============================================================ */

.metric-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-4);
    width: 100%;
    max-width: 760px;
}

.metric-demo-grid--narrow {
    max-width: 360px;
}

/* Full-width demo card — .component-example is a centering flex
   container, so a lone card shrink-wraps without this (LSH-137
   gate catch: the wide-strip chart card rendered 125px wide). */
.metric-demo-wide {
    width: 100%;
}

/* ============================================================
   CHART CARD (v1.2, LSH-137) — .metric-chart-card
   Figma 6116 Content frames on the v1.1 chrome (spec D2).
   Chrome, header row, meta and the warning/error tiers all
   come from the shipped .metric rules above — this section
   only adds the chart area, controls slot and legend row.
   ============================================================ */

/* Axes chart slot — fluid width, fixed height (Figma plot region
   338×168 in the 370 card). metricChart() renders into it. */
.metric-chart-card .metric-chart-area {
    width: 100%;
    height: var(--metric-chart-height, 168px);
    overflow: hidden;
}

/* Optional range-switcher slot (composed Button Group, untouched) */
.metric-chart-controls {
    display: flex;
}

/* Legend row — CSS-only HTML legend (spec D6). Rejoined the type
   scale at xs/tertiary 2026-07-13 (LSH-156): the Figma-exact
   10px/quaternary was too small and too faint to read on card
   surfaces in either mode. padding-left aligns with the plot area
   past the y-axis gutter (Figma pl-24). */
.metric-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 24px;
    font-size: var(--font-size-xs);      /* 12px */
    line-height: var(--line-height-xs);  /* 16px */
    color: var(--text-tertiary);
}

.metric-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.metric-legend-swatch {
    display: inline-block;
    width: 16px;
}

/* Band swatch rides the same --metric-band hook metricChart reads —
   chart and legend can never disagree (LSH-157; formerly a hardcoded
   warning-500 while the chart drew 1px of the same, both too faint). */
.metric-legend-swatch--band {
    border-top: 2px dotted var(--metric-band, var(--warning-500));
}

/* Series swatch rides the same accent hook metricChart's
   color:'auto' resolves — tier cards recolor both together. */
.metric-legend-swatch--series {
    border-top: 2px solid var(--metric-accent, var(--brand-600));
}

/* Secondary-series swatch (multi-line cards, LSH-160) — dashed to
   match the engine's 'Dash' default for series after the first. */
.metric-legend-swatch--series-dash {
    border-top: 2px dashed var(--metric-accent, var(--brand-600));
}