/* Timestral accuracy-vs-size widget.
 *
 * Every colour is a token from /assets/widget-shared.css, so light, dark and the host's theme sync work
 * without anything in this file knowing about them. The one hue is the brand orange: it is Timestral, the
 * front it draws and the area it gains. Everything public is neutral ink, from the models that were on the
 * earlier front (dark) to the rest (faint).
 *
 * Just the chart: a white card with the benchmark tabs on the left and the legend on the right (below the
 * tabs when the card is narrow), then the two lanes.
 */
.pb-frame {
  box-sizing: border-box;
  width: 100%;
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--widget-radius);
  overflow: hidden;
  font-family: var(--widget-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

/* ---- controls ------------------------------------------------------------------------------- */
.pb-plot { background: var(--color-surface-card); }
/* tabs left, legend right; when they do not fit side by side the legend drops under the tabs */
.pb-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 12px 12px 4px; }
/* the segmented selector of CTF Speedrun and the Timeseries widget */
.pb-chips {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--widget-border);
  border-radius: 0.5rem;
  background: var(--widget-surface);
}
.pb-chip {
  appearance: none; cursor: pointer;
  height: 1.75rem; padding: 0 0.75rem;
  border: 0; border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text-primary);
  font: 500 0.875rem/1.25rem var(--widget-font);
  letter-spacing: 0.02em;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.pb-chip:hover { opacity: 0.75; }
.pb-chip[aria-pressed="true"] { opacity: 1; background: var(--color-surface-card); outline: 1px solid var(--widget-border); }
.pb-chip:focus-visible { outline: 2px solid var(--widget-orange); outline-offset: 2px; }

/* ---- chart ---------------------------------------------------------------------------------- */
.pb-chart { position: relative; min-height: 360px; user-select: none; -webkit-user-select: none; }
.pb-svg { display: block; width: 100%; height: auto; overflow: visible; }

.pb-lane-title { font: 500 13px var(--widget-font); fill: var(--color-text-primary); }
.pb-lane-title .sub { font-weight: 400; fill: var(--color-text-muted); }
.pb-hint { font: 400 11px var(--widget-font); fill: var(--color-text-muted); }
.pb-tick { font: 400 11px var(--widget-font); fill: var(--color-text-muted); }
.pb-ytick { paint-order: stroke; stroke: var(--color-surface-card); stroke-width: 4px; stroke-linejoin: round; }
.pb-grid { stroke: var(--color-border-primary); stroke-width: 1; }
.pb-lane-rule { stroke: var(--color-border-primary); stroke-width: 1; }
.pb-axis-line { stroke: var(--color-border-secondary); stroke-width: 1; }
.pb-axis-tick { stroke: var(--color-border-secondary); stroke-width: 1; }

/* the two fronts and what lies between them */
.pb-gain { fill: var(--widget-orange); opacity: 0.14; stroke: none; }
.pb-front-old { fill: none; stroke: var(--color-text-faint); stroke-width: 1.25; stroke-dasharray: 4 3; stroke-linejoin: round; }
.pb-front-new { fill: none; stroke: var(--widget-orange); stroke-width: 2; stroke-linejoin: round; }
.pb-family { fill: none; stroke: var(--color-border-secondary); stroke-width: 1; }

/* models: dark where on the earlier public front, faint otherwise, hollow where not zero-shot */
.pb-dot { stroke: var(--color-surface-card); stroke-width: 1; transition: opacity 0.15s ease; }
.pb-dot.others { fill: var(--color-text-faint); }
.pb-dot.front { fill: var(--color-text-secondary); }
.pb-dot.hollow { fill: var(--color-surface-card); stroke-width: 1.5; }
.pb-dot.hollow.others { stroke: var(--color-text-faint); }
.pb-dot.hollow.front { stroke: var(--color-text-secondary); }
.pb-dot.ours { fill: var(--widget-orange); stroke: var(--color-surface-card); stroke-width: 1.5; }
.pb-ring { fill: none; stroke: var(--color-text-primary); stroke-width: 1.25; pointer-events: none; }
.pb-svg.hovering .pb-dot:not(.hot), .pb-svg.hovering .pb-label:not(.hot), .pb-svg.hovering .pb-leader:not(.hot) { opacity: 0.3; }

/* labels carry a halo in the panel colour so they stay legible over lines and each other */
.pb-label { font: 400 10.5px var(--widget-font); fill: var(--color-text-muted); paint-order: stroke; stroke: var(--color-surface-card); stroke-width: 3.5px; stroke-linejoin: round; transition: opacity 0.15s ease; }
.pb-label.front { fill: var(--color-text-secondary); }
.pb-label.ours { font: 600 12px var(--widget-font); fill: var(--color-text-primary); }
.pb-leader { stroke: var(--color-border-secondary); stroke-width: 0.8; transition: opacity 0.15s ease; }
.pb-svg.animate :is(.pb-ours-g, .pb-label.ours) { animation: pb-fade 0.5s ease 0.3s both; }
@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }

/* tooltip: small, flat, as on the Timeseries widget */
.pb-tip {
  position: absolute; z-index: 2; box-sizing: border-box; min-width: 10rem; padding: 8px 10px;
  font: 400 12px/1.45 var(--widget-font);
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  pointer-events: none;
  visibility: hidden;
}
.pb-tip-name { font-weight: 500; }
.pb-tip-sub { margin-bottom: 4px; color: var(--color-text-muted); }
.pb-tip-row { display: flex; justify-content: space-between; gap: 16px; }
.pb-tip-row .k { color: var(--color-text-muted); }
.pb-tip-row .v { font-variant-numeric: tabular-nums; }
.pb-tip-row .v em { font-style: normal; color: var(--color-text-muted); }
.pb-tip-flag { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border-primary); color: var(--color-text-muted); }
.pb-tip.ours .pb-tip-name, .pb-tip.ours .pb-tip-row .v { color: var(--widget-orange); }

/* ---- legend --------------------------------------------------------------------------------- */
/* Two rows of four, filled down each column. The marks are the ones the chart uses. */
.pb-legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 20px); column-gap: 18px; row-gap: 2px;
  font: 400 12px/20px var(--widget-font); color: var(--color-text-muted); white-space: nowrap;
}
.pb-legend li { display: flex; align-items: center; gap: 6px; cursor: default; }
#pb-legend-hollow.off { visibility: hidden; }
.pb-k { display: block; flex: none; width: 16px; }
.pb-k-ours, .pb-k-pub-front, .pb-k-pub, .pb-k-hollow { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; box-sizing: border-box; }
.pb-k-ours { width: 11px; height: 11px; margin: 0 2.5px; background: var(--widget-orange); }
.pb-k-pub-front { background: var(--color-text-secondary); }
.pb-k-pub { background: var(--color-text-faint); }
.pb-k-hollow { border: 1.5px solid var(--color-text-secondary); }
.pb-k-front-new { border-top: 2px solid var(--widget-orange); }
.pb-k-front-old { border-top: 1.5px dashed var(--color-text-faint); }
.pb-k-gain { height: 9px; background: color-mix(in srgb, var(--widget-orange) 14%, transparent); }
.pb-k-family { border-top: 1px solid var(--color-border-secondary); }

@media (max-width: 520px) {
  .pb-chip { padding: 0 0.625rem; }
  /* two columns of four under the tabs */
  .pb-legend { grid-template-rows: repeat(4, 20px); }
}