/* Same paper/ink, monospace and fine-rule vocabulary as the live visualizer. */
.hud-baseline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hud-scorecard { width: auto; height: auto; max-width: none; max-height: none; margin: 0; }
.coretex-dialog-open { overflow: hidden; }
.hud-scorecard::backdrop, .comparison-window::backdrop {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(3px);
}
.comparison-window {
  position: fixed;
  inset: 40px 20px;
  width: min(100% - 40px, 1010px);
  height: fit-content;
  max-height: calc(100dvh - 80px);
  max-width: none;
  margin: auto;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .16);
  overflow: auto;
  overscroll-behavior: contain;
  font: inherit;
}
.comparison-window[hidden], .comparison-window [hidden] { display: none !important; }
.comparison-window h2 { font-size: clamp(23px, 3vw, 32px); }
.comparison-window .scorecard-close { min-width: 32px; min-height: 32px; margin: -5px -8px 0 0; }
.comparison-window :focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.comparison-intro { font-size: 12px; color: var(--mute); line-height: 1.6; margin: 14px 0 24px; }
.comparison-tabs { padding-bottom: 18px; border-bottom: 1px solid var(--fg); }
.comparison-tabs button { min-height: 32px; }
.comparison-benchmark-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.comparison-benchmark-head h3 { font-weight: 400; letter-spacing: -.04em; font-size: 21px; margin: 0 0 6px; }
.comparison-benchmark-head p { color: var(--mute); font-size: 11px; line-height: 1.5; margin: 0; }
.comparison-window a { text-underline-offset: 4px; }
.comparison-benchmark-head a { flex-shrink: 0; font-size: 10px; }
.comparison-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 19px 0 24px; }
.comparison-toolbar label { font-size: 10px; color: var(--mute); }
.comparison-toolbar select {
  font: inherit; font-size: 11px; padding: 7px 27px 7px 8px; margin-left: 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 38%, transparent);
  border-radius: 0; background: var(--bg); color: var(--fg); max-width: 100%;
}
.comparison-checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.comparison-checkbox input { accent-color: var(--fg); }
.comparison-chart-heading { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--mute); }
.comparison-chart { width: 100%; margin-top: 12px; }
.comparison-plot { display: block; width: 100%; height: auto; overflow: visible; }
.comparison-grid { stroke: color-mix(in srgb, var(--fg) 13%, transparent); stroke-width: 1; }
.comparison-axis { font: 10px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; fill: var(--mute); }
.comparison-plot circle { cursor: help; }
.comparison-plot circle:hover, .comparison-plot circle:focus { stroke-width: 4; }
html[data-theme="dark"] .comparison-key, html[data-theme="dark"] .comparison-plot circle,
html[data-theme="dark"] .comparison-plot polyline { filter: brightness(1.35); }
.comparison-point-detail { min-height: 16px; font-size: 10px; color: var(--mute); margin: 3px 0 18px; line-height: 1.5; }
.comparison-values { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; }
.comparison-value-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; border-top: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); padding: 9px 0; }
.comparison-value-row dt { display: flex; align-items: center; gap: 8px; }
.comparison-value-row dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comparison-key { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); }
.comparison-caveat { margin: 20px 0 0; font-size: 11px; line-height: 1.65; max-width: 850px; }
.comparison-offset-note { font-size: 10px; line-height: 1.5; color: var(--mute); margin: 8px 0 0; }
.comparison-study { margin: 20px 0 16px; color: var(--mute); font-size: 10px; }
.comparison-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--fg); padding-top: 16px; font-size: 10px; line-height: 1.6; color: var(--mute); }
.comparison-footer a { color: var(--fg); }
.comparison-empty { border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); padding: 24px; font-size: 12px; line-height: 1.7; margin: 25px 0; }
@media (max-width: 620px) {
  .comparison-window { inset: 14px 10px; width: calc(100% - 20px); max-height: calc(100dvh - 28px); padding: 20px 16px; }
  .comparison-values { grid-template-columns: 1fr; }
  .comparison-benchmark-head { align-items: flex-start; }
  .comparison-benchmark-head a { font-size: 9px; }
  .comparison-toolbar select { margin-left: 0; display: block; margin-top: 5px; }
  .comparison-tabs { gap: 5px; }
  .comparison-tabs button { padding: 6px 7px; font-size: 9px; }
  .hud-baseline-actions { max-width: 230px; }
  .hud-scorecard { inset: 14px 10px; padding: 20px 16px; }
}