/* Scoped styles for the multidim comparison when it's inlined into the landing
   page's second panel (the .mdf-* tree built by examples/multidim/main.js).
   examples/multidim/index.css can't be linked here directly — it has global
   body/*/a/footer rules that would wreck the page. The .mdf-* classes are
   already namespaced, so we mirror just those rules, scoped under
   .race-multidim, referencing the v2 tokens directly. Keep in sync with
   examples/multidim/index.css. */

/* NB: the multidim source uses its own token names (--fg/--fg-dim/--fg-faint).
   Rather than alias them here (`--fg: var(--ink)` computed to EMPTY — an
   aliased custom property whose value is only a var() reference didn't
   substitute, leaving SVG axis text, whose fill doesn't inherit color, falling
   back to black), we reference the v2 tokens (--ink/--dim/--faint) directly in
   the mirrored rules below. */

.race-multidim .mdf-rows { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0.6rem 1.2rem; }

/* tighter side columns than the standalone's 130/140/90 so the four
   fixed-width charts (630px + gaps) fit on one line inside the narrower
   landing-page panel instead of wrapping the date chart to a second row */
.race-multidim .mdf-row { display: grid; grid-template-columns: 116px 1fr 124px 78px; gap: 0.75rem; align-items: center; padding: 0.75rem 0.7rem; border: 1px solid var(--rule); background: var(--bg-2); border-radius: 6px; }
.race-multidim .mdf-row[hidden] { display: none; } /* cached-but-inactive rows (grid display would otherwise override [hidden]) */
.race-multidim .mdf-row.mdf-failed { opacity: 0.5; }
.race-multidim .mdf-meta { min-width: 0; }
.race-multidim .mdf-name { font: 500 0.95rem var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-multidim .mdf-version { color: var(--faint); font-weight: 400; font-size: 0.8em; margin-left: 0.3em; }
.race-multidim .mdf-tag { font: 0.75rem var(--mono); color: var(--dim); margin-top: 0.25rem; line-height: 1.3; }

/* flex-wrap + non-shrinking charts: the chart SVGs have fixed width attributes,
   so letting the flex items shrink made the SVGs overflow their boxes and run
   under the top-5 / stats text on the right. Keep each chart at its natural
   size and wrap to a second line when the column is too narrow instead. */
.race-multidim .mdf-charts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.5rem; min-width: 0; }
.race-multidim .mdf-chart { flex: 0 0 auto; }

.race-multidim .mdf-top { font: 0.7rem var(--mono); font-variant-numeric: tabular-nums; min-width: 0; }
.race-multidim .mdf-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.race-multidim .mdf-top-flight { display: flex; justify-content: space-between; gap: 0.4rem; white-space: nowrap; line-height: 1.25; }
.race-multidim .mdf-tf-od { color: var(--ink); }
.race-multidim .mdf-tf-d { color: var(--accent); }
.race-multidim .mdf-tf-d.mdf-tf-early { color: var(--pos); }

.race-multidim .mdf-stats { font: 0.75rem var(--mono); font-variant-numeric: tabular-nums; }
.race-multidim .mdf-count { color: var(--dim); font-size: 0.7rem; margin-bottom: 0.4rem; text-align: right; }
.race-multidim .mdf-count [data-stat=active] { color: var(--accent); font-weight: 500; }
.race-multidim .mdf-count .mdf-dim { color: var(--faint); }
.race-multidim .mdf-latency { display: flex; flex-direction: column; gap: 0.15rem; }
.race-multidim .mdf-lat-row { display: flex; justify-content: space-between; gap: 0.5rem; }
.race-multidim .mdf-lat-k { color: var(--faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.race-multidim .mdf-lat-v { color: var(--dim); }
.race-multidim .mdf-lat-v b { color: var(--ink); font-weight: 500; }
.race-multidim .mdf-lat-u { color: var(--faint); margin-left: 0.15em; font-size: 0.7rem; }

.race-multidim .mdf-chart { min-width: 0; }
.race-multidim .mdf-title { font: 500 0.65rem/1 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 0.3rem; display: flex; align-items: baseline; gap: 0.4em; }
.race-multidim .mdf-reset { color: var(--accent); font-size: 0.65rem; border-bottom: 0; text-transform: lowercase; letter-spacing: 0; cursor: pointer; }
.race-multidim .mdf-reset:hover { color: var(--accent); border-bottom: 0; }
.race-multidim .mdf-chart svg { display: block; touch-action: none; user-select: none; }

.race-multidim .mdf-bg { fill: var(--rule); }
.race-multidim .mdf-fg { fill: var(--accent); }
.race-multidim .mdf-axis path, .race-multidim .mdf-axis line { fill: none; stroke: var(--faint); shape-rendering: crispEdges; }
.race-multidim .mdf-axis text { font: 9px var(--mono); fill: var(--faint); }
.race-multidim .mdf-brush { pointer-events: all; }
.race-multidim .mdf-bg-hit { fill: transparent; cursor: crosshair; }
.race-multidim .mdf-extent { cursor: move; fill: var(--accent); fill-opacity: 0.18; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 1; }
.race-multidim .mdf-resize { cursor: ew-resize; }
.race-multidim .mdf-resize rect { fill: transparent; }
.race-multidim .mdf-resize path { fill: var(--accent); stroke: var(--bg); stroke-width: 0.5; }

@media (max-width: 760px) {
  .race-multidim .mdf-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .race-multidim .mdf-charts { flex-wrap: wrap; }
  .race-multidim .mdf-stats { display: flex; justify-content: space-between; align-items: center; }
  .race-multidim .mdf-count { text-align: left; }
  .race-multidim .mdf-latency { flex-direction: row; gap: 0.75rem; }
}