/*
 * Meridian widget gallery styles — ADR-026 Phase B.
 * Applies uniformly to every rendered gallery widget preview.
 * All colours via meridian-tokens.css variables — no raw hex literals.
 */

/* Shared wrapper applied by every gallery widget */
.meridian-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.meridian-widget-metric {
    font-family: var(--meridian-font-sans);
    font-size: 12px;
    color: var(--meridian-text);
}

/* Stat widgets (Phase B3) — same baseline as metric */
.meridian-widget-stat {
    font-family: var(--meridian-font-sans);
    font-size: 12px;
    color: var(--meridian-text);
}

/* Widget header row (title + optional subtitle) */
.mw-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.mw-title {
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--meridian-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */
}

.mw-subtitle {
    font-size: 10px;
    font-family: var(--meridian-font-mono);
    color: var(--meridian-text-mid); /* I-audit: text-faint on bg = 2.11:1 → text-mid */
}

/* Body flex region — grows to fill the preview cell */
.mw-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Legend row at the bottom of SVG widgets */
.mw-legend {
    display: flex;
    gap: 10px;
    font-size: 9.5px;
    font-family: var(--meridian-font-mono);
    color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mw-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    vertical-align: middle;
    margin-right: 3px;
}

/* ── Phase B4 — §4 Named components ────────────────────────────── */

/* Named components share the same baseline as stat widgets */
.meridian-widget-named {
    font-family: var(--meridian-font-sans);
    font-size: 12px;
    color: var(--meridian-text);
}

/* ── Phase B4 — Small multiples facet grid ──────────────────────── */

.mw-small-multiples-grid {
    flex: 1;
    display: grid;
    gap: 6px;
    min-height: 0;
    align-content: start;
}

.mw-small-multiples-grid--compact {
    grid-template-columns: repeat(2, 1fr);
}

.mw-small-multiples-grid--standard {
    grid-template-columns: repeat(4, 1fr);
}

.mw-facet-cell {
    background: var(--meridian-bg-sunk);
    padding: 4px;
    border: 1px solid var(--meridian-border-hair);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

/* I-audit: widget inline styles reference base tone tokens (fail, pass, warn, info, text-faint,
   text-dim) which fail WCAG 2.1 AA on bg (#f3f5f8) and bg-sunk (#e7eaef) backgrounds.
   Re-scope all failing tokens to AA-passing variants within all widget types. Dark theme aliases
   -strong back to base so no dark theme override needed (dark surfaces already pass AA).
   Also covers .mw-facet-cell which uses bg-sunk. */
:root .meridian-widget-chart,
[data-theme="light"] .meridian-widget-chart,
:root .meridian-widget-metric,
[data-theme="light"] .meridian-widget-metric,
:root .meridian-widget-stat,
[data-theme="light"] .meridian-widget-stat,
:root .meridian-widget-named,
[data-theme="light"] .meridian-widget-named,
:root .mw-facet-cell,
[data-theme="light"] .mw-facet-cell {
    --meridian-fail: var(--meridian-fail-strong);
    --meridian-pass: var(--meridian-pass-strong);
    --meridian-warn: var(--meridian-warn-strong);
    --meridian-info: var(--meridian-info-strong);
    --meridian-accent: var(--meridian-accent-strong);
    --meridian-text-faint: var(--meridian-text-mid);
    --meridian-text-dim: var(--meridian-text-mid);
}

.mw-facet-header {
    display: flex;
    justify-content: space-between;
}

/* ── CoverageDepthWidget ─────────────────────────────────────────────────── */
/* Snapshot-page widget: outer ring = coverage breadth, inner = effectiveness */

.coverage-depth-widget {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.coverage-depth-widget__empty {
    min-height: 180px;
    text-align: center;
}

/* Rings area: SVG + legend side-by-side */
.coverage-depth-widget__rings {
    display: flex;
    align-items: center;
    gap: 18px;
}

.coverage-depth-widget__svg {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

/* Legend column */
.coverage-depth-widget__legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.coverage-depth-widget__legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Colour swatch circle next to legend labels */
.coverage-depth-widget__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coverage-depth-widget__swatch--outer {
    background: var(--meridian-accent);
}

/* --swatch--inner and --swatch--crit backgrounds are set inline (tone-keyed) */

.coverage-depth-widget__swatch--crit {
    background: var(--meridian-info);
}

/* Criticality bar section */
.coverage-depth-widget__crit-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

/* Sparkline section */
.coverage-depth-widget__spark {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--meridian-border-hair);
}

.coverage-depth-widget__sparkline {
    width: 100%;
    height: 24px;
    display: block;
}