/* BenchmarkChart panel chrome — light only.
 * Theme via :root custom properties. Fonts: Geist + Geist Mono. */

:root {
  /* ---- BenchmarkChart theme: surfaces ---- */
  --bc-page: #f7f6f4;
  --bc-card: #ffffff;
  --bc-line: rgba(62, 59, 56, .12);
  --bc-ink: #111C2D;
  --bc-muted: #111C2D;
  --bc-warn: #c08a2e;

  /* ---- BenchmarkChart theme: type ---- */
  --bc-font-sans: "geist", "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bc-font-mono: "geist-mono", "Geist Mono", "SF Mono", ui-monospace, monospace;

  /* ---- BenchmarkChart theme: shape ---- */
  --bc-radius: 6px;
  --bc-radius-pill: 999px;
}

.bc-panel { color: var(--bc-ink); font-family: var(--bc-font-sans); }

.bc-card { background: transparent; margin-bottom: 20px;}
.bc-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bc-line); }
.bc-bar h2 { font-size: 32px; font-weight: 300; margin: 0 auto 0 0; white-space: nowrap; letter-spacing: -0.02em;
@media (max-width:978px){
  font-size: 28px;
  width: 100%;
  white-space: normal;
}
@media (max-width:479px){
  font-size: 24px;
}
}
.bc-fld { font-family: var(--bc-font-mono); font-size: 10px; color: var(--bc-muted); letter-spacing: .02em; display: flex; gap: 6px; align-items: center; }
.bc-fld svg { display: block; flex: none; }
.bc-bar select, .bc-bar button { font-family: var(--bc-font-mono); font-size: 11px; padding: 5px 8px; color: var(--bc-ink); background: transparent; border: 1px solid var(--bc-line); border-radius: 4px; cursor: pointer; box-shadow: none; margin: 0; }
.bc-bar select:hover, .bc-bar button:hover { border-color: var(--bc-muted); }
.bc-check { font-family: var(--bc-font-mono);
    font-size: 11px;
    padding: 5px 8px;
    color: var(--bc-ink);
    background: transparent;
    border: 1px solid var(--bc-line);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: none;
    margin: 0; }
.bc-check input[type="checkbox"] { accent-color: var(--bc-ink); width: 13px; height: 13px; margin: 0; cursor: pointer; }
/* Scale segmented control: Linear | Log button group (no "Scale" label) */
.bc-bar .bc-seg { display: inline-flex; gap: 0; padding: 0; border: 1px solid var(--bc-line); border-radius: 4px; overflow: hidden; }
.bc-bar .bc-seg button { font-family: var(--bc-font-mono); font-size: 11px; padding: 5px 10px; color: var(--bc-muted); background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0; cursor: pointer; }
.bc-bar .bc-seg button + button { border-left: 1px solid var(--bc-line); }
.bc-bar .bc-seg button:hover { color: var(--bc-ink); }
.bc-bar .bc-seg button.is-active { background: var(--bc-ink); color: #fff; }

.bc-legendrow { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 18px; border-bottom: 1px solid var(--bc-line); }
.bc-legendtools { display: flex; align-items: center; gap: 12px; }
.bc-modelcount { font-family: var(--bc-font-mono); text-transform: uppercase; font-size: 11px; font-weight: 500; color: var(--bc-ink); }
.bc-toolbtn { border: none; background: transparent; padding: 0; font-family: var(--bc-font-mono); font-size: 11px; color: var(--bc-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bc-toolbtn:hover { color: var(--bc-ink); }
.bc-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-gchip { display: inline-flex; align-items: center; gap: 6px; background: #fff; cursor: pointer; color: var(--bc-ink); font-family: var(--bc-font-mono); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: -.04em; border: 1px solid rgba(17, 28, 45, 0.08);
    padding: 6px 12px 6px 8px;
    border-radius: 100px; }
.bc-gchip:hover { border-color: var(--bc-line); background-color: #f5f3ee; }
.bc-gchip.is-off { opacity: .5; }
.bc-gdot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.bc-glogo {width: 14px;height: 14px;object-fit: contain;flex-shrink: 0;display: inline-block;box-sizing: border-box; border: none;}
img.bc-glogo { padding: 1px; }
.bc-glogo.bc-gfallback { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.bc-gname { white-space: nowrap; }
.bc-count { margin-left: auto; }
.bc-countbtn { font-family: var(--bc-font-mono); font-size: 11px; padding: 4px 8px; color: var(--bc-ink); background: transparent; border: 1px solid var(--bc-line); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.bc-countbtn:hover { border-color: var(--bc-muted); }
.bc-countbtn[aria-pressed="true"] { background: var(--bc-ink); border-color: var(--bc-ink); color: #fff; }

.bc-chartwrap { position: relative; width: 100%; min-height: 513px; }
.bc-chart { width: 100%; }
/* empty selection: engine still renders axes/ticks/grid/guides/logo from the
 * full rows — hide only markers, labels and frontier (all .pp-chip groups) */
.bc-chart.is-empty .pp-chip,
.bc-chart.is-empty .pp-frontier,
.bc-chart.is-empty .pp-labels,
.bc-chart.is-empty .pp-frontier-layer,
.bc-chart.is-empty .pp-guides,
.bc-chart.is-empty .pp-quad-label,
.bc-chart.is-empty .pp-quads { display: none; }
.bc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--bc-font-mono); font-size: 13px; line-height: 1.6; color: var(--bc-muted); background: transparent; pointer-events: none; padding: 0 20px; }
.bc-empty[hidden] { display: none; }

/* Hover dimming: hovered marker/label fully opaque, everything else at 0.4.
 * More specific than the engine's injected .2 rule; the dim lands on the
 * outer .pp-chip wrappers only (never the inner .pp-point as well), so
 * nested opacity can never multiply down to ~0. */
.bc-chart.pp-host.is-dimmed .pp-chip:not(.is-hot) { opacity: .4; }
.bc-chart.pp-host.is-dimmed .pp-chip.is-hot { opacity: 1; }
.bc-chart.pp-host.is-dimmed .pp-point:not(.is-hot) { opacity: 1; }
.bc-chart.pp-host.is-dimmed .pp-point.is-hot { opacity: 1; }
.bc-chart.pp-host .pp-chip { transition: opacity 150ms; }
.pp-svg{ outline: none;}
.bc-loading, .bc-error { padding: 48px 20px; text-align: center; color: var(--bc-muted); font-size: 14px; font-family: var(--bc-font-mono); }

/* ---- loading skeleton: shimmer blocks mirroring the loaded card ---- */
.bc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bc-sk { display: inline-block; border-radius: 4px; flex: none;
  background: linear-gradient(100deg, rgba(62, 59, 56, .07) 35%, rgba(62, 59, 56, .15) 50%, rgba(62, 59, 56, .07) 65%);
  background-size: 200% 100%; animation: bc-shimmer 1.4s ease-in-out infinite; }
@keyframes bc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.bc-sk-title { width: 220px; height: 14px; margin-right: auto; }
.bc-sk-ctl { height: 26px; }
.bc-sk-chip { height: 30px; }
.bc-skel-plot { position: relative; height: 513px; background-color: #f3f3f3;
  background-image: linear-gradient(100deg, rgba(62, 59, 56, 0) 35%, rgba(62, 59, 56, .06) 50%, rgba(62, 59, 56, 0) 65%);
  background-size: 200% 100%; animation: bc-shimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bc-sk, .bc-skel-plot { animation: none; } }
.bc-error { color: #8a1f1f; }
.bc-error strong { display: block; margin-bottom: 6px; }