/* =============================================================
   Emma · Data Viz — Chart library (split-card matrix)
   Lives in the Brand Guide "Data Viz" tab as § 11.1, mirroring
   the "foundational shapes" split-card pattern: a chart stage on
   the left, an info panel on the right. Each card carries its own
   S/M/L and Light/Dark tabs — independent of the page register.
   Hover lives on the chart geometry (ECharts emphasis), never the
   card. Requires ECharts (CDN, loaded in the brand guide head).
   ============================================================= */

.dvm-foundations { display: flex; flex-direction: column; gap: 20px; }

/* ---- the split card ---------------------------------------- */
.dvm-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--border-default, #26262B);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface, #131316);
}
/* Dark page: blue-toned frame to sit on the #050818 brand canvas, not flat grey */
[data-theme="dark"] .dvm-card {
  background: #0B0E20;
  border-color: #1C2140;
}

/* ── chart STAGE (left). Per-card light/dark via data-mode ── */
.dvm-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  min-height: 320px;
  /* token defaults = Dark — blue-toned to match the brand canvas (#050818) */
  --dvm-surface: #0E1124;  --dvm-fg: #FFFFFF;       --dvm-muted: #8E90A6;
  --dvm-faint: #5C5E78;    --dvm-border: #23284A;   --dvm-border-strong: #2F3559;
  --dvm-bg-muted: #181C33; --dvm-ac: #6F8DFF;       --dvm-ac-strong: #ADC2FF;
  --dvm-col-1: #4658FF;    --dvm-col-2: #6F8DFF;     --dvm-col-3: #B3C7FF;
  --dvm-actual: #85A0FF;   --dvm-plan: #2E3358;   --dvm-range: #3A4170;
  --dvm-track: rgba(255,255,255,0.06);
  --dvm-py: #4658FF;       --dvm-fc: #6F8DFF;        --dvm-good: #8BEA9D;
  --dvm-good-bg: #0F2D17;  --dvm-bad: #FF9494;       --dvm-bad-bg: #2C0F0F;
  --dvm-grid: #222845;     --dvm-axis: #3D4569;
  --dvm-tip-bg: #FFFFFF;   --dvm-tip-fg: #1B1D26;    --dvm-cat2: #C2B3FF;
  background: var(--dvm-surface);
  transition: background 200ms ease;
}
.dvm-stage[data-mode="light"] {
  --dvm-surface: #FFFFFF;  --dvm-fg: #000000;       --dvm-muted: #767781;
  --dvm-faint: #93949D;    --dvm-border: #E9E9EC;   --dvm-border-strong: #DADADD;
  --dvm-bg-muted: #F7F7F8; --dvm-ac: #2F37FF;       --dvm-ac-strong: #1644D0;
  --dvm-col-1: #2F37FF;    --dvm-col-2: #566AFF;     --dvm-col-3: #85A0FF;
  --dvm-actual: #85A0FF;   --dvm-plan: #D5E1FF;   --dvm-range: #C7D5FF;
  --dvm-track: rgba(0,0,0,0.05);
  --dvm-py: #85A0FF;       --dvm-fc: #85A0FF;        --dvm-good: #29BE47;
  --dvm-good-bg: #DDFBE2;  --dvm-bad: #FF2323;       --dvm-bad-bg: #FFDDDD;
  --dvm-grid: #E9E9EC;     --dvm-axis: #B9BAC0;
  --dvm-tip-bg: #1B1D26;   --dvm-tip-fg: #FFFFFF;    --dvm-cat2: #8452FF;
}

/* tab rows */
.dvm-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.dvm-tabset {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px;
  border: 1px solid var(--dvm-border); background: var(--dvm-bg-muted);
}
.dvm-tabset button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font-family: var(--font-mono, "DM Mono", monospace); font-size: 11px;
  letter-spacing: 0.04em; color: var(--dvm-muted);
  padding: 5px 12px; border-radius: 6px; line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}
.dvm-tabset button:hover { color: var(--dvm-fg); }
.dvm-tabset button.active { background: var(--dvm-ac); color: #FFFFFF; }
.dvm-stage[data-mode="light"] .dvm-tabset button.active { color: #FFFFFF; }

/* the KPI card preview sits centred in the remaining space */
.dvm-preview { flex: 1; display: flex; align-items: center; justify-content: center; }

/* the actual KPI card (the thing being demoed) */
.dvm-kpi {
  background: var(--dvm-surface);
  border: 1px solid var(--dvm-border);
  border-radius: 8px;
  display: flex; flex-direction: column;
  transition: border-color 160ms ease;
}
.dvm-kpi:hover { border-color: var(--dvm-border-strong); }
.dvm-khead { display: flex; align-items: center; justify-content: space-between; }
.dvm-ktitle { font-family: var(--font-sans, "DM Sans", sans-serif); color: var(--dvm-muted); line-height: 1.5; }
.dvm-kglyph { color: var(--dvm-muted); display: grid; place-items: center; }
.dvm-kglyph .material-icons { font-size: 20px; }
.dvm-kmetric { font-family: var(--font-mono, "DM Mono", monospace); color: var(--dvm-fg); line-height: 1; letter-spacing: -0.01em; }
.dvm-kind {
  display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px 1px 2px;
  border-radius: 4px; font-family: var(--font-sans, "DM Sans", sans-serif);
  font-weight: 500; font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.dvm-kind .material-icons { font-size: 16px; }
.dvm-kind.up { background: var(--dvm-good-bg); color: var(--dvm-good); }
.dvm-kcap { font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 12px; color: var(--dvm-faint); line-height: 1.5; }
.dvm-kchart { width: 100%; }

/* sizing per density — the demoed card matches the Figma spec */
.dvm-kpi.s  { width: 257px; padding: 18px 18px 12px; gap: 10px; }
.dvm-kpi.s .dvm-ktitle { font-size: 14px; }
.dvm-kpi.s .dvm-kbody  { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dvm-kpi.s .dvm-kfigs  { display: flex; flex-direction: column; gap: 6px; }
.dvm-kpi.s .dvm-krow   { display: flex; align-items: center; gap: 6px; }
.dvm-kpi.s .dvm-kmetric { font-size: 28px; }
.dvm-kpi.s .dvm-kchart { width: 94px; height: 52px; flex: 0 0 94px; }
/* the trellis micro-chart benefits from a little more room */
.dvm-card[data-key="trellis"] .dvm-kpi.s .dvm-kchart { width: 110px; height: 62px; flex: 0 0 110px; }

.dvm-kpi.m  { width: 257px; padding: 18px; gap: 6px; }
.dvm-kpi.m .dvm-ktitle { font-size: 16px; }
.dvm-kpi.m .dvm-kchart { height: 132px; }
.dvm-kpi.m .dvm-kfoot  { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 10px; }
.dvm-kpi.m .dvm-kfigs  { display: flex; align-items: flex-end; gap: 6px; }
.dvm-kpi.m .dvm-kmetric { font-size: 34px; }
.dvm-kpi.m .dvm-ksub   { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 13px; color: var(--dvm-faint); line-height: 1; }
.dvm-kpi.m .dvm-kside  { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.dvm-kpi.l  { width: 100%; max-width: 526px; padding: 18px; gap: 10px; }
.dvm-kpi.l .dvm-ktitle { font-size: 16px; }
.dvm-kpi.l .dvm-kchart { height: 118px; }
/* charts that carry a legend need extra room so it clears the axis */
.dvm-card[data-key="barvar"] .dvm-kpi.l .dvm-kchart,
.dvm-card[data-key="colvar"] .dvm-kpi.l .dvm-kchart,
.dvm-card[data-key="line"] .dvm-kpi.l .dvm-kchart { height: 156px; }
/* speedometer L renders bigger — give it room */
.dvm-card[data-key="gauge"] .dvm-kpi.l .dvm-kchart { height: 176px; }
/* the IBCS table is taller than a chart — give it room at M and L */
.dvm-card[data-key="ibcs"] .dvm-kpi.m .dvm-kchart { height: 188px; }
.dvm-card[data-key="ibcs"] .dvm-kpi.l .dvm-kchart { height: 196px; }
.dvm-kpi.l .dvm-kfoot  { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dvm-kpi.l .dvm-kpair  { display: flex; align-items: center; gap: 0; }
.dvm-kpi.l .dvm-kstat  { display: flex; align-items: flex-end; gap: 8px; padding-right: 24px; }
.dvm-kpi.l .dvm-kstat + .dvm-kstat { padding-left: 24px; border-left: 1px solid var(--dvm-border); }
.dvm-kpi.l .dvm-kmetric { font-size: 24px; }
.dvm-kpi.l .dvm-kratio { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono, "DM Mono", monospace); font-size: 11px; line-height: 1.1; color: var(--dvm-muted); }
.dvm-kpi.l .dvm-kratio b { color: var(--dvm-fg); font-weight: 500; }
.dvm-kpi.l .dvm-kside  { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ── IBCS table (HTML widget, not a chart) ─────────────────── */
.ib { width: 100%; font-family: var(--font-sans, "DM Sans", sans-serif); }
.ib-mono { font-family: var(--font-mono, "DM Mono", monospace); }
.ib .ib-row { display: grid; align-items: center; }
.ib-head { display: grid; align-items: center; font-family: var(--font-mono, "DM Mono", monospace); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dvm-muted); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--dvm-border); }
.ib-head span, .ib-row > span { text-align: right; }
.ib-row .ib-label, .ib-head span:first-child { text-align: left; }

/* Medium: AC PL PY Δ % bar  (no row label) */
.ib-m .ib-head, .ib-m .ib-row { grid-template-columns: 1fr 1fr 1fr 0.9fr 1.1fr 1.4fr; gap: 6px; }
.ib-m .ib-row { font-size: 11px; padding: 5px 0; }
/* Large: + row label */
.ib-l .ib-head, .ib-l .ib-row { grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 0.8fr 1fr 1.6fr; gap: 8px; }
.ib-l .ib-row { font-size: 12px; padding: 6px 0; }

.ib-row .ib-ac { color: var(--dvm-fg); font-family: var(--font-mono, "DM Mono", monospace); font-weight: 500; }
.ib-row .ib-mut { color: var(--dvm-muted); font-family: var(--font-mono, "DM Mono", monospace); }
.ib-row .ib-label { color: var(--dvm-muted); font-family: var(--font-sans, "DM Sans", sans-serif); white-space: nowrap; }
.ib-total { border-top: 1px solid var(--dvm-border); }
.ib-total .ib-label, .ib-total .ib-ac { color: var(--dvm-fg); font-weight: 600; }

/* the inline value bar */
.ib-bar { position: relative; height: 9px; border-radius: 3px; background: transparent; display: flex; align-items: center; }
.ib-bar > span { display: block; height: 100%; border-radius: 3px; }
.ib-bar .ib-dot { position: absolute; right: 18%; width: 7px; height: 7px; border-radius: 9999px; }

/* Small: bars only, taller, fill the micro slot */
.ib-s { display: flex; flex-direction: column; gap: 6px; justify-content: center; height: 100%; }
.ib-s .ib-row { display: block; }
.ib-s .ib-bar { height: 8px; }

/* ── INFO panel (right) — matches the foundations card prose ── */
.dvm-info { padding: 26px 28px; display: flex; flex-direction: column; }
.dvm-info .ix { font-family: var(--font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-300, #85A0FF); margin-bottom: 14px; }
.dvm-info h3 { font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-default, #FFF); margin: 0 0 12px; }
.dvm-info .gloss { font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 14.5px; line-height: 1.55; color: var(--fg-secondary, #B9BAC0); margin: 0 0 20px; }
.dvm-info .rules { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dvm-info .rules li { position: relative; padding-left: 28px; font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 13.5px; line-height: 1.4; color: var(--fg-secondary, #B9BAC0); }
.dvm-info .rules li::before { content: "→"; position: absolute; left: 0; color: var(--blue-300, #85A0FF); font-family: var(--font-mono, "DM Mono", monospace); }
.dvm-info .where { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-subtle, #1B1B1F); font-family: var(--font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted, #767781); display: flex; flex-direction: column; gap: 7px; }
.dvm-info .where b { font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--fg-default, #FFF); }

@media (max-width: 900px) {
  .dvm-card { grid-template-columns: 1fr; }
  .dvm-stage { min-height: 280px; }
}