/* this file is shared by both landing and dashboard */
/* its also the only styles loaded for dashboard */

@layer reset, base, theme, components, utilities;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
}

:root {
  color-scheme: light dark;
  --color-surface: light-dark(#f8f9fa, #111418);
  --color-surface-container-lowest: light-dark(#ffffff, #1b1f25);
  --color-surface-container-low: light-dark(#f3f4f5, #1f242b);
  --color-surface-container: light-dark(#edeeef, #272d35);
  --color-on-surface: light-dark(#191c1d, #e4e7ec);
  --color-on-surface-variant: light-dark(#434654, #aeb4c0);
  --color-primary: light-dark(#003cb2, #a9c4ff);
  --color-primary-container: light-dark(#2454d4, #2e62e0);
  --color-on-primary: light-dark(#ffffff, #0b1a3f);
  --color-outline: light-dark(#656878, #8b8f9c);
  --color-outline-variant: light-dark(rgba(196, 197, 215, 0.4), rgba(196, 197, 215, 0.18));
  --color-accent-success: light-dark(#166534, #5fd38a);
  --color-accent-success-bg: light-dark(rgba(22, 163, 74, 0.14), rgba(95, 211, 138, 0.16));
  --color-accent-failure: light-dark(#ba1a1a, #ff8a80);
  --color-accent-failure-bg: light-dark(rgba(186, 26, 26, 0.12), rgba(255, 138, 128, 0.16));
  --color-accent-warning: light-dark(#7c5200, #d29922);
  --color-accent-warning-bg: light-dark(rgba(124, 82, 0, 0.12), rgba(210, 153, 34, 0.16));
  --color-accent-leak: light-dark(#6d28d9, #c4b5fd);
  --color-accent-leak-bg: light-dark(rgba(109, 40, 217, 0.12), rgba(196, 181, 253, 0.16));
  --color-shadow: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
  --color-grid-dot: light-dark(rgba(196, 197, 215, 0.3), rgba(196, 197, 215, 0.08));

  /* Border Radius */
  --radius-default: 6px;

  /* Legacy Mapping for Smooth Transition */
  --bg-color: var(--color-surface);
  --bg-primary: var(--color-surface);
  --bg-secondary: var(--color-surface-container-low);
  --bg-tertiary: var(--color-surface-container);
  --card-bg: var(--color-surface-container-lowest);
  --text-primary: var(--color-on-surface);
  --text-secondary: var(--color-on-surface-variant);
  --accent-color: var(--color-primary);
  --accent-primary: var(--color-primary);
  --accent-success: var(--color-accent-success);
  --accent-failure: var(--color-accent-failure);
  --accent-warning: var(--color-accent-warning);
  --border-color: var(--color-outline-variant);
  --color-field-border: var(--color-outline);
  --hover-bg: var(--color-surface-container-low);
  --glass-bg: light-dark(rgba(255, 255, 255, 0.7), rgba(27, 31, 37, 0.7));

  /* Typography Fallbacks */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;

  /* Spacing Primitives */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Spacing Tokens Mapping */
  --spacing-xxs: var(--space-1);
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-2);
  --spacing-lg: var(--space-3);
  --spacing-xl: var(--space-3);
  --spacing-xxl: var(--space-4);
  --spacing-xxxl: var(--space-5);
  --spacing-giant: var(--space-8);

  /* Font Size Tokens */
  --font-xs: 0.75rem;
  --font-sm: 0.75rem;
  --font-base: 0.8rem;
  --font-md: 0.85rem;
  --font-lg: 0.9rem;
  --font-xl: 1rem;
}

@supports not (color: light-dark(#000, #fff)) {
:root { --color-surface: #f8f9fa; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f3f4f5; --color-surface-container: #edeeef; --color-on-surface: #191c1d; --color-on-surface-variant: #434654; --color-primary: #003cb2; --color-primary-container: #2454d4; --color-on-primary: #ffffff; --color-outline: #656878; --color-outline-variant: rgba(196, 197, 215, 0.4); --color-accent-success: #166534; --color-accent-success-bg: rgba(22, 163, 74, 0.14); --color-accent-failure: #ba1a1a; --color-accent-failure-bg: rgba(186, 26, 26, 0.12); --color-accent-warning: #7c5200; --color-accent-warning-bg: rgba(124, 82, 0, 0.12); --color-accent-leak: #6d28d9; --color-accent-leak-bg: rgba(109, 40, 217, 0.12); --color-shadow: rgba(0, 0, 0, 0.15); --color-grid-dot: rgba(196, 197, 215, 0.3); --glass-bg: rgba(255, 255, 255, 0.7); }
  @media (prefers-color-scheme: dark) {
:root { --color-surface: #111418; --color-surface-container-lowest: #1b1f25; --color-surface-container-low: #1f242b; --color-surface-container: #272d35; --color-on-surface: #e4e7ec; --color-on-surface-variant: #aeb4c0; --color-primary: #a9c4ff; --color-primary-container: #2e62e0; --color-on-primary: #0b1a3f; --color-outline: #8b8f9c; --color-outline-variant: rgba(196, 197, 215, 0.18); --color-accent-success: #5fd38a; --color-accent-success-bg: rgba(95, 211, 138, 0.16); --color-accent-failure: #ff8a80; --color-accent-failure-bg: rgba(255, 138, 128, 0.16); --color-accent-warning: #d29922; --color-accent-warning-bg: rgba(210, 153, 34, 0.16); --color-accent-leak: #c4b5fd; --color-accent-leak-bg: rgba(196, 181, 253, 0.16); --color-shadow: rgba(0, 0, 0, 0.55); --color-grid-dot: rgba(196, 197, 215, 0.08); --glass-bg: rgba(27, 31, 37, 0.7); }
  }
}
::selection { background: color-mix(in oklch, var(--color-primary) 22%, transparent); color: var(--color-on-surface); }
@media (prefers-reduced-motion: reduce) {
.secondary-btn, .stat-card, .test-card, .pass-rate-fill, .task-accordion, .task-accordion-header, .dog-ear-card, .hint-popover, .mode-toggle-btn, .metric-mode-btn, .suite-table-row, .suite-table-row th, .insights-table tr, .pivot-filter-btn, .sort-btn, .header-filter-select, .tooltip-container, .sort-direction-btn, button.effort-chip, .insights-effort-split-btn, #dumbbell-chart text { transition: none !important; animation: none !important; transform: none !important; }
}
body {
  font-family: var(--font-sans);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  min-block-size: 100dvh;
  margin: 0;
  padding: 20px;
  background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  line-height: 1.5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

header {

}

header > div > div {
  flex-grow: 1;
}

h1, h2 {
  font-family: var(--font-serif);
  text-wrap: balance;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

#summary-stats {
  display: flex;
  gap: 20px;
}

.stat-card {
  background: var(--color-surface-container-lowest);
  padding: 1.5rem;
  border-radius: var(--radius-default);
  border: 1px solid var(--color-outline-variant);
  position: relative;
  flex: 1;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  pointer-events: none;
}

.stat-value {
  font-size: 3rem;
  font-weight: bold;
  display: block;
}

.stat-label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem;
}

.chart-container {
  position: relative;
  margin-bottom: 1rem;
}

.dog-ear-card {
  position: relative;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
}

.discipline-chart-segment {
  break-inside: avoid;
  margin-bottom: 32px;
  background: var(--color-surface-container-lowest);
  padding-bottom: 8px;
  /* i have no idea why the 'hidden auto' inline style is there but whatever */
  overflow: visible !important
}

.dog-ear-card::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  pointer-events: none;
  z-index: 100;
}

.chart-container.hidden {
  display: none;
}

#dumbbell-chart {
  width: 100%;
  height: 100%;
  margin: 4px 0;
}

#dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.test-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.test-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  background: var(--hover-bg);
}

.test-card h3 {
  margin-top: 0;
  color: var(--text-primary);
}

.pass-rate-bar {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.pass-rate-fill {
  height: 100%;
  transition: width 0.5s ease;
}

.details-btn {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 8px;
  font-size: 0.9rem;
}

dialog#modal {
  background: transparent;
  border: none;
  padding: 0;
  max-inline-size: 900px;
  inline-size: 90%;
  max-block-size: 90dvh;
  border-radius: 12px;
  color: var(--text-primary);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

dialog#modal:modal {
  overscroll-behavior: contain;
}

dialog#modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);

@starting-style { opacity: 0; transform: translateY(12px) scale(0.98); }
}

dialog#modal::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(2px);
  transition-property: background-color, display, overlay;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

dialog#modal[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.75);

  @starting-style {
    background-color: rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog#modal,
  dialog#modal::backdrop {
    transform: none;
    transition-duration: 0.05s;
  }

  @starting-style {
dialog#modal[open] { transform: none; }
  }
}

.modal-content {
  background-color: var(--card-bg);
  outline: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  max-block-size: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  box-shadow: 0 20px 50px var(--color-shadow);
}
.close-modal-form {
  margin: 0;
}

.close-modal {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
  font-size: 1.75rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
}

.close-modal:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.close-modal:focus-visible {
  background: var(--hover-bg);
  color: var(--text-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Run Details in Modal */
.run-detail {
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.run-header {
  background: var(--hover-bg);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.run-header a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-item {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.check-item:last-child {
  border-bottom: none;
}

.check-status {
  font-size: 1.2rem;
}

.check-message {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.color-green {
  color: var(--accent-success);
}

.color-red {
  color: var(--accent-failure);
}

.bg-green {
  background-color: var(--accent-success);
}

.matching-guide {
  background-color: var(--color-accent-success-bg);
  color: var(--accent-success);
  border: 1px solid var(--color-accent-success);
}

.default-guide {
  background-color: var(--color-surface-container-low);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.bg-red {
  background-color: var(--accent-failure);
}

.dashboard-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.secondary-btn {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-default);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2rem;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--font-md);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.secondary-btn svg { display: block; flex-shrink: 0; }

.secondary-btn:hover {
  background-color: var(--hover-bg);
  border-color: var(--text-secondary);
}

/* Log Modal Content */
.log-content {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  padding: 16px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-x: auto;
  border: 1px solid var(--border-color);
}

/* Diff View Styles */
.diff-container {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  line-height: 1.4;
}

.diff-added {
  background-color: var(--color-accent-success-bg);
  color: var(--color-accent-success);
  display: block;
}

.diff-removed {
  background-color: var(--color-accent-failure-bg);
  color: var(--color-accent-failure);
  display: block;
  text-decoration: line-through;
}

.diff-unchanged {
  color: var(--color-on-surface-variant);
  display: block;
}

/* Widening the dialog for diff view */
dialog#modal.diff-modal {
  max-inline-size: 1200px;
  inline-size: 95dvw;
}

.modal-content.diff-modal {
  width: 100%;
  padding: 20px;
}

.diff-separator {
  background-color: var(--color-surface-container);
  color: var(--text-secondary);
  padding: 4px;
  text-align: center;
  font-size: 0.85em;
  user-select: none;
}
:is(.log-content, .diff-container, .diff-fallback-pre) :is(code, samp) { font: inherit; }
dialog#modal.frame-modal { max-inline-size: 1200px; inline-size: 95dvw; }
.modal-content.frame-modal { padding: 20px; }
.frame-esc-hint { margin: 8px 0 0; font-size: var(--font-sm); color: var(--text-secondary); }
.artifact-frame {
  display: block;
  inline-size: 100%;
  block-size: min(75dvh, 900px);
  margin-block-start: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
}

/* Dumbbell Chart & Tooltip */
.chart-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  border: none;
  max-inline-size: min(460px, calc(100dvw - 16px));
  box-sizing: border-box;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  pointer-events: auto;
  overflow: visible;
  outline: 1px solid var(--color-outline-variant);
  box-shadow: 0 8px 24px var(--color-shadow);
  line-height: 1.4;
  margin-inline-end: 8px;
  position-anchor: --dumbbell-row;
  top: calc(anchor(bottom) + 6px);
  left: anchor(left);
  position-visibility: anchors-visible;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --dc-edge-below, --dc-edge-above;
}
@position-try --dc-edge-below { top: calc(anchor(bottom) + 6px); bottom: auto; left: 8px; right: auto; }
@position-try --dc-edge-above { top: auto; bottom: calc(anchor(top) + 6px); left: 8px; right: auto; }
.dc-anchor {
  position: absolute;
  pointer-events: none;
  anchor-name: --dumbbell-row;
}

#dumbbell-chart text {
  transition: fill 0.2s ease, filter 0.2s ease;
  user-select: none;
}

/* Accordion Task List */
.task-accordion {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-bottom: 0;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  content-visibility: auto;
  contain-intrinsic-block-size: auto 3.5rem;
}
@media (width < 48rem) {
.task-accordion { contain-intrinsic-block-size: auto 5.5rem; }
}

.task-accordion:last-child {
  border-bottom-width: 1px;
}

.task-accordion.open {
  box-shadow: inset 2px 0 0 0 var(--color-primary);
}

.feature-chip {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--color-surface-container-low);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  text-transform: none;
}

.task-app-tag {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.row-category-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--color-surface-container-low);
  border: 1px solid var(--border-color);
  padding: 1px 6px;
  border-radius: 4px;
}

.dashboard-grid:not(.is-sorted-flat) .row-category-tag {
  display: none;
}

.dashboard-grid:not(.is-sorted-flat) .task-badges-row:not(:has(> :not(.row-category-tag))) {
  display: none;
}

.dashboard-grid {
  --evals-cols: minmax(0, 1fr) 72px 72px 84px 190px 88px;
}

.dashboard-grid.is-a11y-mode {
  --evals-cols: minmax(0, 1fr) 72px 84px 190px 88px;
}

.evals-table-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: var(--evals-cols);
  align-items: end;
  gap: 10px 20px;
  padding: 10px 16px;
  background: var(--color-surface-container-low);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.evals-table-header + .task-accordion {
  border-top: 0;
}

.eval-col-a11y,
.eval-col-time,
.eval-col-tokens,
.eval-col-uplift {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.eval-col-dumbbell {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eval-col-sub {
  display: block;
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
  opacity: 0.85;
}

.eval-col-sort-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.eval-col-sort-btn:hover,
.eval-col-sort-btn.active {
  color: var(--color-primary);
}

.eval-category-section {
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
}

.eval-category-section.collapsed .eval-category-body {
  display: none;
}

.eval-category-section.collapsed .eval-category-header .chevron {
  transform: rotate(-90deg);
}

.eval-category-header {
  width: 100%;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: var(--color-surface-container-low);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
}

.eval-category-section.collapsed .eval-category-header {
  border-bottom: 0;
}

.eval-category-header:hover {
  background: var(--color-surface-container);
}

.eval-category-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eval-category-title .chevron {
  font-size: 0.7rem;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .eval-category-title .chevron {
    transition: none;
  }
}

.eval-category-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.eval-category-meta strong.positive {
  color: var(--color-success, #137333);
}

.eval-category-meta strong.negative {
  color: var(--color-error, #c5221f);
}

.eval-category-body .task-accordion {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}

.eval-category-body .task-accordion:last-child {
  border-bottom: 0;
}

.evals-empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--card-bg);
}

.task-accordion-header {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: var(--evals-cols);
  align-items: center;
  gap: 10px 20px;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--text-secondary);
  transition: color 0.1s ease;
}

.task-accordion-header:hover {
  background: var(--color-surface-container-low);
}

.task-accordion-header:hover,
.task-accordion.open .task-accordion-header {
  color: var(--text-primary);
}

.task-title {
  font-weight: 600;
  font-size: 0.92rem;
}

.task-accordion-header .left-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-inline-size: 0;
}

.task-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}

.task-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-inline-start: 24px;
}

.task-accordion-header h3 {
  margin: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
}

.task-a11y-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
}

.task-a11y-col .metric-before {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.task-a11y-col .metric-after {
  color: var(--text-primary);
  font-weight: 600;
}

.task-a11y-col .metric-after.positive {
  color: var(--color-success, #137333);
}

.task-a11y-col .metric-after.negative {
  color: var(--color-error, #c5221f);
}

.metric-empty {
  color: var(--text-secondary);
  opacity: 0.5;
}

@media (width < 56rem) {
  .evals-table-header {
    display: none;
  }
  .task-accordion-header {
    grid-template-columns: 1fr auto;
  }
  .task-a11y-col,
  .task-metric-stack {
    display: none;
  }
}

.task-accordion-content {
  padding: 0;
  border: 0;
  background: none;
}
.task-accordion-body {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  background: var(--color-surface-container-lowest);
}

.task-accordion:not(.open) .task-accordion-content:not([hidden="until-found"]) { display: none; }
.task-accordion.open .task-accordion-content {
  display: block;
}

/* Mini Dumbbell Slider Track */
.mini-dumbbell-track {
  inline-size: 250px;
  max-inline-size: 100%;
  min-inline-size: 80px;
  block-size: 4px;
  background: var(--color-surface-container);
  border-radius: 2px;
  position: relative;
}

.mini-dumbbell-track .dot {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  border-radius: 0;
  box-sizing: border-box;
}

.mini-dumbbell-track .dot.unguided {
  inline-size: 2px;
  block-size: 10px;
  border: none;
  background: var(--color-outline);
  z-index: 1;
}

.mini-dumbbell-track .dot.guided {
  inline-size: 2.5px;
  block-size: 12px;
  border: none;
  background: var(--color-primary);
  z-index: 2;
}

.mini-dumbbell-track .connector {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  block-size: 4px;
  background: var(--color-primary);
}

.mini-dumbbell-track .connector.regressed { background: repeating-linear-gradient(90deg, var(--color-accent-failure) 0 4px, transparent 4px 6px); }
/* Uplift Score */
.uplift-score {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-accent-success);
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.uplift-score.negative {
  color: var(--color-accent-failure);
}

.uplift-score.flat { color: var(--text-secondary); }
.task-toggle { appearance: none; background: none; border: 0; padding: 2px 4px; margin: -2px -4px; font: inherit; color: inherit; text-align: left; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 4px; }
.expand-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; font-family: monospace; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); opacity: 0.65; }
.expand-icon::before { content: "+"; }
.task-accordion.open .expand-icon::before { content: "\2212"; }
.task-accordion-header:hover .expand-icon,
.task-accordion.open .expand-icon { opacity: 1; color: var(--color-primary); }
.task-title.has-failure { color: var(--color-accent-failure); }
:where(.hint-trigger) { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; }
.hint-trigger { position: relative; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.hint-trigger::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: max(100%, 24px); block-size: max(100%, 24px); }
@media (pointer: coarse) {
.hint-trigger::after { inline-size: max(100%, 44px); block-size: max(100%, 44px); }
}
.generation-failed-badge { font-size: var(--font-base); color: var(--color-accent-failure); border: 1px solid currentColor; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.expansion-loading { color: var(--text-secondary); }
.trend-link { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 24px; min-block-size: 24px; border-radius: 4px; color: var(--color-primary); text-decoration: none; }
/* Assertion Truth Matrix */
.truth-matrix-wrap { margin-bottom: 16px; max-inline-size: 100%; overflow-x: auto; }
.truth-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-container-lowest);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
}

.truth-matrix th, .truth-matrix td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-outline-variant);
}

.truth-matrix tbody tr:nth-child(even) {
  background: var(--color-surface-container-low);
}

.truth-matrix th {
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.truth-matrix td.center, .truth-matrix th.center {
  text-align: center;
}

.truth-matrix th:last-child, .truth-matrix td:last-child { overflow-wrap: anywhere; }
@media (width < 40rem) {
.truth-matrix th, .truth-matrix td { padding: 6px; }
.truth-matrix th.center, .truth-matrix td.center { padding-inline: 4px; font-size: 0.75rem; letter-spacing: 0; }
}
.truth-matrix tr:last-child td {
  border-bottom: none;
}

.truth-matrix tr:hover td {
  background: var(--hover-bg);
}

.truth-matrix td.pass {
  color: var(--color-accent-success);
  font-weight: bold;
}

.truth-matrix td.fail {
  color: var(--color-accent-failure);
  font-weight: bold;
}

/* Per-check failure diagnostics in the assertion column */
.assertion-error,
.assertion-diagnostic {
  margin-top: 4px;
  font-family: monospace;
  font-size: 0.72rem;
}

.assertion-error {
  color: var(--color-accent-failure);
  white-space: pre-wrap;
  max-height: 56px;
  overflow-y: auto;
  background: rgb(218 54 51 / 0.08);
  padding: 4px 6px;
  border-radius: 4px;
}

.assertion-error-loc {
  color: var(--color-on-surface-variant);
  font-size: 0.68rem;
}

.assertion-diagnostic summary {
  cursor: pointer;
  user-select: none;
  color: var(--color-primary);
}

.assertion-diagnostic pre {
  margin: 4px 0 0;
  padding: 6px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.70rem;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: 4px;
}

.assertion-diagnostic.browser-errors summary,
.assertion-diagnostic.browser-errors pre {
  color: var(--color-accent-failure);
}

.summary-subgrid meter {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  background: transparent;
}

.summary-subgrid meter::-webkit-meter-bar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  height: 12px;
}

.summary-subgrid meter::-webkit-meter-optimum-value {
  background: #00d2ff; /* Cool blue */
  border-radius: 6px;
}

.custom-progress-bar {
  width: 100%;
  height: 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

.custom-progress-fill {
  height: 100%;
  border: 1.5px solid var(--color-primary);
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
}

/* Header Meta Grid */
.suite-page-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.header-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  max-inline-size: 100%;
}
.header-meta-grid .header-meta-item { min-inline-size: 0; width: auto; padding: 4px 0; }
.header-meta-grid .meta-value { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (width < 40rem) {
.header-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.suite-header-actions { order: -1; }
}
.narrative-note span {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.summary-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.header-summary-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 32px;
  width: 100%;
  margin-top: 16px;
  background: var(--color-surface-container-low);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  align-items: flex-start;
}

.header-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  width: 100%;
}

.meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.meta-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.meta-value + .meta-value {
  font-size: 0.72rem;
}

.tfoot-action-btn {
  font-size: 0.75rem;
  padding: 2px 4px;
  display: flex !important;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  flex-direction: row;
  align-items: center;
  gap: 4px;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
}

.tfoot-action-btn:hover {
  color: var(--text-primary);
  border: 1px solid var(--color-outline);
}

.tfoot-action-btn svg {
  color: var(--text-secondary);
}


.run-card {
  background: var(--color-surface-container-low);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: min(250px, 100%);
}

.run-card-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-primary);
}

.run-card-row {
  font-size: 0.75rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.run-card-label {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Responsive styles for chart-section */
#dumbbell-chart svg {
  width: 100%;
  height: auto;
}

/* Sparkline / Stat Card Styles */
.meta-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-value-highlight {
  font-weight: bold;
  color: var(--text-primary);
  font-size: var(--font-xl);
}

.sparkline-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.sparkline-bar {
  block-size: 6px;
  background: var(--color-surface-container);
  border-radius: 3px;
  position: relative;
  margin: 5px 0;
}

.sparkline-bar.small {
  block-size: 4px;
  border-radius: 2px;
  margin: 3px 0;
}

.sparkline-dot {
  position: absolute;
  border-radius: 0;
  top: 50%;
  translate: -50% -50%;
  box-sizing: border-box;
}

.sparkline-dot.unguided {
  inline-size: 2px;
  block-size: 12px;
  border: none;
  background: var(--color-outline);
  z-index: 1;
}

.sparkline-dot.guided {
  inline-size: 2.5px;
  block-size: 14px;
  border: none;
  background: var(--color-primary);
  z-index: 2;
}

.sparkline-dot.unguided.small {
  inline-size: 2px;
  block-size: 8px;
}

.sparkline-dot.guided.small {
  inline-size: 2.5px;
  block-size: 10px;
}

.sparkline-range {
  position: absolute;
  block-size: 4px;
  background: var(--color-primary);
  top: 50%;
  translate: 0 -50%;
}

.sparkline-range.small {
  block-size: 3px;
}
.sparkline-range.regressed {
  background: repeating-linear-gradient(90deg, var(--color-accent-failure) 0 4px, transparent 4px 6px);
}

.sparkline-labels {
  font-size: var(--font-md);
  color: var(--text-secondary);
}

.sparkline-labels-small {
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.error-message,
.error-banner {
  text-align: center;
  padding: 48px;
  color: var(--accent-failure);
}

.error-subtitle,
.error-subtext {
  text-align: center;
  color: var(--text-secondary);
  margin-top: -20px;
}

/* Blueprint Grid Design - Expanded Details */
.task-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.blueprint-framed {
  background: var(--color-surface-container-low);
  padding: 1.5rem;
  border-radius: var(--radius-default);
  position: relative;
  border: 1px solid var(--color-outline-variant);
}

.blueprint-framed::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  pointer-events: none;
}

.task-prompt-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}

.task-prompt-meta {
  background: var(--color-surface-container-lowest);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  border: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

.task-prompt-meta-label {
  color: var(--text-secondary);
  white-space: nowrap;
  display: block;
}

.task-prompt-meta-value {
  color: var(--text-primary);
  font-weight: bold;
  white-space: nowrap;
}

.task-prompt-quote {
  flex: 1;
  background: var(--color-surface-container-lowest);
  padding: 4px;
  border-radius: 8px;
  position: relative;
}

.quote-icon {
  font-size: 4rem;
  position: absolute;
  top: -16px;
  left: 4px;
  opacity: 0.15;
  font-family: Georgia, serif;
  color: var(--color-primary);
  user-select: none;
  pointer-events: none;
}

.task-prompt-text {
  white-space: pre-wrap;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0;
  margin-left: 32px;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.diff-file-details {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 6px;
  padding: 8px 12px;
}

.diff-file-summary {
  font-weight: bold;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.diff-file-pre {
  background: transparent !important;
  border: none !important;
  margin-top: 8px;
}
.visually-hidden:where(:not(:focus-within, :active)) { clip-path: inset(50%); height: 1px; overflow: clip; position: absolute; white-space: nowrap; width: 1px; }
.skip-link:focus-visible { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 9999; padding: 8px 16px; background: var(--color-primary); color: var(--color-on-primary); border-radius: 6px; font-weight: 600; text-decoration: none; }
:is(a, button, select, input, summary, [tabindex="0"], [role="button"]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
:is(#main-content, #demos):focus-visible { outline: none; }
.hidden, [hidden]:not([hidden="until-found"]) { display: none !important; }
.text-warning { color: var(--color-accent-warning); }
.text-success { color: var(--color-accent-success); }
.text-failure { color: var(--color-accent-failure); }
.infra-error-badge { color: var(--color-accent-warning); border-color: var(--color-accent-warning); background: var(--color-accent-warning-bg); }
.text-leak { color: var(--color-accent-leak); }
.leak-badge { background: var(--color-accent-leak-bg); color: var(--color-accent-leak); border-color: color-mix(in oklch, var(--color-accent-leak) 40%, transparent); }
.run-chip-leak { font-size: 0.7rem; color: var(--color-accent-leak); background: var(--color-accent-leak-bg); border: 1px solid color-mix(in oklch, var(--color-accent-leak) 45%, transparent); padding: 1px 4px; border-radius: 4px; }
.uplift-score.invalid { color: var(--color-accent-warning); font-size: 0.75rem; letter-spacing: 0.04em; }
.tfoot-chip, .tfoot-chip-cell { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 4px; }
.tfoot-chip-error { font-weight: bold; font-size: 0.75rem; color: var(--color-accent-warning); border: 1px solid var(--color-accent-warning); padding: 1px 5px; border-radius: 4px; }
.tfoot-chip-rate { font-weight: bold; font-size: 0.85rem; color: var(--rate-color, var(--text-primary)); }
.tfoot-chip-build-failed { font-size: 0.7rem; color: var(--color-accent-failure); }
.tfoot-chip-details { display: flex; flex-direction: column; align-items: center; max-inline-size: 16rem; }
.tfoot-chip-details > summary { cursor: pointer; }
.tfoot-chip-msg { margin: 4px 0 0; max-block-size: 8rem; overflow: auto; font-size: 0.7rem; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); }
.tfoot-chip-actions { display: flex; flex-direction: column; gap: 2px; inline-size: 100%; }
.guide-chip-link { padding: 2px 4px; border-radius: 4px; font-family: monospace; text-decoration: none; }
.tfoot-run-cards-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.modal-back-btn { margin-block-end: 20px; padding: 5px 15px; font-size: 0.9em; }
.modal-status-msg, .modal-loading-state { text-align: center; padding: 20px; }
.modal-error-msg, .modal-error-state { color: var(--color-accent-failure); padding: 20px; }
.diff-missing-banner { background-color: var(--color-accent-warning-bg); border-inline-start: 4px solid var(--color-accent-warning); padding: 15px; margin-block-end: 20px; border-radius: 4px; }
.diff-missing-title { font-weight: bold; color: var(--color-accent-warning); }
.diff-fallback-pre, .diff-raw-pre { white-space: pre-wrap; margin: 0; color: var(--text-primary); font-family: monospace; }
.dumbbell-tooltip { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; justify-content: space-between; min-inline-size: min(310px, calc(100dvw - 40px)); color: var(--color-on-surface); }
.dumbbell-tooltip-left { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; flex: 1 1 180px; }
.dumbbell-tooltip-title { font-weight: 700; font-size: 0.875rem; overflow-wrap: anywhere; }
.dumbbell-tooltip-feature { font-size: 0.72rem; color: var(--color-on-surface-variant); }
.dumbbell-tooltip-metrics { font-size: 0.72rem; color: var(--color-on-surface-variant); margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.dumbbell-tooltip-metrics .text-success { font-weight: 600; }
.dumbbell-tooltip-right { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-size: 0.75rem; }
.dumbbell-tooltip-uplift { font-weight: 700; font-size: 0.875rem; white-space: nowrap; }
.dumbbell-tooltip-uplift.positive { color: var(--color-accent-success); }
.dumbbell-tooltip-uplift.negative { color: var(--color-accent-failure); }
.dumbbell-tooltip-rate { white-space: nowrap; }
.narrative-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
@media (width < 46rem) {
.narrative-summary-grid { grid-template-columns: 1fr; }
}
.narrative-card { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; justify-content: flex-start; min-inline-size: 0; }
.narrative-card .meta-item-header { gap: 6px 12px; align-items: center; flex-wrap: wrap; min-block-size: 24px; }
.narrative-card::before { content: none; }
.meta-value-highlight.negative { color: var(--color-accent-failure); }
.narrative-subtext { font-size: 0.75rem; color: var(--text-secondary); font-weight: normal; }
.narrative-hero-pair { display: flex; align-items: baseline; gap: 8px; font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; color: var(--text-primary); margin: 2px 0 4px; }
.narrative-hero-pair .pair-arrow { color: var(--text-secondary); font-size: 1.05rem; }
.narrative-metrics-list { display: flex; flex-direction: column; gap: 6px; margin-block-start: auto; padding-top: 10px; border-top: 1px solid var(--color-outline-variant); font-size: 0.8rem; }
.narrative-metric-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; color: var(--text-secondary); }
.narrative-metric-row strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; margin-inline-start: auto; white-space: nowrap; }
.efficiency-delta-pill { font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 16px; background: var(--color-surface-container); color: var(--text-secondary); white-space: nowrap; }
.efficiency-delta-pill.positive { background: var(--color-accent-success-bg); color: var(--color-accent-success); }
.efficiency-delta-pill.negative { background: var(--color-accent-failure-bg); color: var(--color-accent-failure); }
.a11y-dimensions-grid { display: grid; grid-template-columns: 1fr; gap: 8px 20px; padding-top: 10px; border-top: 1px solid var(--color-outline-variant); }
.a11y-dimensions-grid:empty { display: none; }
@container (inline-size >= 26.25rem) {
.a11y-dimensions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.a11y-dim-row { display: flex; flex-direction: column; gap: 2px; }
.a11y-dim-header { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; }
.a11y-dim-label { color: var(--text-secondary); font-weight: 500; }
.a11y-dim-values { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.a11y-dim-delta { color: var(--color-accent-success); font-weight: 600; }
.a11y-dim-delta.negative { color: var(--color-accent-failure); }
.chart-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-default); }
.chart-toolbar-left, .chart-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.metric-mode-toggle { position: relative; display: inline-flex; margin: 0; min-inline-size: 0; background: var(--color-surface-container); border: 1px solid var(--color-outline-variant); border-radius: 6px; padding: 2px; gap: 2px; }
.mode-toggle-btn { position: relative; display: inline-flex; align-items: center; appearance: none; border: none; background: transparent; color: var(--color-on-surface-variant); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.mode-toggle-btn:has(> input[type="radio"]:checked) { background: var(--color-primary); color: var(--color-on-primary); }
.mode-toggle-btn:hover:not(:has(> input[type="radio"]:checked)) { background: var(--color-surface-container-lowest); color: var(--color-on-surface); }
:is(.mode-toggle-btn, .metric-mode-btn, .window-pill-btn, .ab-agent-pill, .ab-task-pill) > input[type="radio"] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
:is(.mode-toggle-btn, .metric-mode-btn, .window-pill-btn):has(> input[type="radio"]:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.guide-section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.guide-title-group { display: flex; align-items: baseline; gap: 10px; }
.evals-count { font-size: 0.82rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.guide-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-inline-size: 0; }
.eval-filter-input { font-family: var(--font-sans); font-size: 0.84rem; padding: 6px 10px; border: 1px solid var(--color-field-border); border-radius: 6px; background: var(--color-surface-container-lowest); color: var(--color-on-surface); min-inline-size: 300px; }
.eval-filter-input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.eval-sort-reset { font-size: 0.8rem; }
.eval-category-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.category-pill { appearance: none; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--color-surface-container-lowest); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.category-pill:hover { border-color: var(--color-outline); color: var(--text-primary); }
.category-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary, #fff); font-weight: 600; }
.category-pill .pill-count { opacity: 0.75; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.task-metric-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; font-size: 0.78rem; line-height: 1.25; white-space: nowrap; }
.task-metric-stack .metric-before { color: var(--text-secondary); }
.task-metric-stack .metric-after { color: var(--text-primary); font-weight: 600; }
.a11y-check-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 16px; background: color-mix(in oklch, var(--color-primary) 12%, transparent); color: var(--color-primary); border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent); vertical-align: middle; }
[interestfor] { --interest-delay-start: 0.2s; interest-delay-start: var(--interest-delay-start); --interest-delay-end: 0.15s; interest-delay-end: var(--interest-delay-end); }
:root:has(:is(:interest-source, .interest-source)) [interestfor] { --interest-delay-start: 0s; interest-delay-start: 0s; }
.info-hint-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-outline); background: var(--color-surface-container-lowest); color: var(--color-on-surface-variant); font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 0; cursor: help; }
.info-hint-btn:is(:hover, :focus-visible, :interest-source, .interest-source) { border-color: var(--color-primary); color: var(--color-primary); }
.anchor-dash-a11y { anchor-name: --anchor-dash-a11y; }
.anchor-dash-tokens { anchor-name: --anchor-dash-tokens; }
.hint-popover[popover] { position: fixed; inset: auto; margin: 0; max-width: min(340px, calc(100dvw - 32px)); min-inline-size: min(16rem, calc(100dvw - 32px)); padding: 8px 12px; border: none; outline: 1px solid var(--color-outline-variant); border-radius: 6px; background: var(--color-surface-container-lowest); color: var(--color-on-surface); box-shadow: 0 8px 24px var(--color-shadow); font-family: var(--font-sans); font-size: 0.76rem; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.45; top: calc(anchor(bottom) + 6px); left: anchor(left); position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
#dash-tooltip-a11y { position-anchor: --anchor-dash-a11y; }
#dash-tooltip-tokens { position-anchor: --anchor-dash-tokens; left: auto; right: anchor(right); }
#effort-tooltip { position-anchor: --effort-anchor; }
:where(button.effort-chip) { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; }
.effort-sep { color: var(--color-on-surface-variant); opacity: 0.55; font-weight: 400; user-select: none; }
.effort-chip { display: inline-flex; align-items: center; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; padding: 0; border: 0; border-radius: 0; background: none; white-space: nowrap; text-decoration: none; box-sizing: border-box; }
.effort-chip--explicit { color: var(--color-on-surface-variant); font-weight: 400; }
.effort-chip--default { color: color-mix(in srgb, var(--color-on-surface-variant) 68%, transparent); font-weight: 400; }
.guide-card-title .effort-chip, .guide-card-title .effort-sep { font-size: 0.85em; }
button.effort-chip { position: relative; z-index: 2; cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--color-on-surface-variant) 42%, transparent); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
button.effort-chip::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: max(100%, 24px); block-size: max(100%, 24px); }
button.effort-chip:is(:hover, :focus-visible, :interest-source, .interest-source) { color: var(--color-on-surface); text-decoration-color: var(--color-on-surface-variant); }
.meta-value.meta-value-model, .pivot-model-label, .guide-card-model-row, .ab-prov-model { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.model-cell-inner { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.trajectory-modal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block-end: 12px; }
.trajectory-modal-toolbar .modal-back-btn { margin-block-end: 0; }
.trajectory-meta-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: var(--font-sm); color: var(--text-secondary); padding: 0; background: none; border: 0; }
.trajectory-meta-model { font-weight: 600; color: var(--text-primary); }
.hint-popover[popover]:is(:popover-open, .\:popover-open) { display: block; }
@media (prefers-reduced-motion: no-preference) {
.hint-popover[popover] { opacity: 0; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s allow-discrete, overlay 0.15s allow-discrete; }
.hint-popover[popover]:is(:popover-open, .\:popover-open) { opacity: 1; transform: none; }
  @starting-style {
.hint-popover[popover]:is(:popover-open, .\:popover-open) { opacity: 0; transform: translateY(-4px); }
  }
}
.run-chip-meta { font-size: var(--font-sm); color: var(--text-secondary); }
.run-chip-meta.small { font-size: var(--font-xs); }
.suite-header-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 25px; }
.suite-header-row > div:first-child { flex: 1 1 auto; min-inline-size: 0; }
@media (width < 40rem) {
.suite-header-row > div:first-child { flex-basis: 100%; }
}
.suite-test-header { font-size: var(--font-lg); color: var(--text-secondary); }
.suite-header-actions { flex: 0 0 auto; display: flex; gap: 12px; justify-content: flex-end; }
.suite-header-actions .secondary-btn, .dashboard-footer .secondary-btn { text-decoration: none; }
.suite-chart-section { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.suite-chart-section.hidden { display: none; }
#test-header[aria-busy="true"] { min-block-size: 4rem; }
#chart-section[aria-busy="true"] #summary-side-panel { min-block-size: 26.5rem; }
#chart-section[aria-busy="true"] #dumbbell-chart { min-block-size: 6rem; }
#guide-grid[aria-busy="true"] { min-block-size: 100dvh; }
@media (width < 80rem) {
#test-header[aria-busy="true"] { min-block-size: 7.5rem; }
}
@media (width < 50rem) {
#test-header[aria-busy="true"] { min-block-size: 11rem; }
#chart-section[aria-busy="true"] #summary-side-panel { min-block-size: 27.5rem; }
}
@media (width < 46rem) {
#chart-section[aria-busy="true"] #summary-side-panel { min-block-size: 47.5rem; }
}
@media (width < 25rem) {
#chart-section[aria-busy="true"] #summary-side-panel { min-block-size: 51rem; }
}
@media (width < 22rem) {
#chart-section[aria-busy="true"] #summary-side-panel { min-block-size: 59rem; }
}
.suite-dumbbell-chart { width: 100%; }
.empty-chart-msg { padding: 16px; margin: 0; color: var(--color-on-surface-variant); }
.guide-evals-heading { margin: 16px 0; color: var(--text-primary); }
.dumbbell-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--font-md); color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-note { white-space: normal; }
.legend-dot { display: inline-block; inline-size: 2.5px; block-size: 11px; border-radius: 0; box-sizing: border-box; vertical-align: middle; }
.legend-dot.unguided { border: none; background: var(--color-outline); }
.legend-dot.guided { inline-size: 3px; block-size: 13px; background: var(--color-primary); }
.legend-line { display: inline-block; inline-size: 18px; block-size: 3px; border-radius: 2px; }
.legend-line.improved { background: var(--color-primary); }
.legend-line.regressed { block-size: 0; border-radius: 0; background: none; border-block-start: 3px dashed var(--color-accent-failure); }
.legend-glyph { color: var(--color-accent-warning); font-weight: 700; }
@media (forced-colors: active) {
:root:root :is(.suite-dumbbell-track, .insight-dumbbell-track, .mini-dumbbell-track, .takeaway-track, .sparkline-bar) { background: Canvas; outline: 1px solid GrayText; }
:root:root :is(.suite-dumbbell-track, .insight-dumbbell-track, .mini-dumbbell-track, .takeaway-track) .dot.unguided, :root:root .sparkline-bar .sparkline-dot.unguided, :root:root .legend-dot.unguided, :root:root .guide-legend-swatch.unguided .guide-legend-tick { background: CanvasText; }
:root:root :is(.suite-dumbbell-track, .insight-dumbbell-track, .mini-dumbbell-track, .takeaway-track) :is(.dot.guided, .connector), :root:root .sparkline-bar :is(.sparkline-dot.guided, .sparkline-range), :root:root :is(.legend-dot.guided, .legend-line.improved), :root:root .guide-legend-swatch.guided .guide-legend-tick { background: Highlight; }
:root:root :is(.suite-dumbbell-track, .insight-dumbbell-track, .mini-dumbbell-track, .takeaway-track) .connector.regressed, :root:root .sparkline-bar .sparkline-range.regressed, :root:root .legend-line.regressed { background: transparent; block-size: 0; border: 0; border-block-start: 3px dashed CanvasText; border-radius: 0; }
:root:root .guide-legend-swatch:is(.unguided, .guided)::before { background: GrayText; opacity: 1; }
:root:root .ab-meter-seg.pass { background: CanvasText; }
:root:root .ab-meter-seg.fail { background: Canvas; outline: 1px solid CanvasText; outline-offset: -1px; }
:root:root :is(.mode-toggle-btn, .metric-mode-btn, .window-pill-btn):has(> input[type="radio"]:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; text-decoration: underline 2px; text-underline-offset: 3px; }
:root:root :is(.mode-toggle-btn, .metric-mode-btn, .window-pill-btn):has(> input[type="radio"]:checked:focus-visible) { outline: 2px solid CanvasText; outline-offset: 2px; }
:root:root :is(.mode-toggle-btn, .metric-mode-btn, .window-pill-btn) { border: 1px solid ButtonText; }
:root:root :is(.insight-dumbbell-track, .suite-dumbbell-track) .variance-band[class] { background: GrayText; opacity: 1; }
#dumbbell-chart :is(.dc-connector, .dc-gtick) { stroke: Highlight; }
#dumbbell-chart :is(.dc-connector.regressed, .dc-utick) { stroke: CanvasText; }
#dumbbell-chart .dc-track { stroke: GrayText; }
#dumbbell-chart .dc-band { fill: GrayText; }
:is(#dumbbell-chart, .guide-chart-wrapper) text { fill: CanvasText; }
.guide-chart-wrapper line { stroke: GrayText; }
.guide-chart-wrapper .timeline-marker line { stroke: Highlight; }
.guide-chart-wrapper .timeline-marker :is(circle:not([stroke]), polygon) { fill: Highlight; }
.guide-chart-wrapper .timeline-marker circle[stroke] { fill: Canvas; stroke: CanvasText; }
:root:root .effort-chip--explicit { border: 0; color: CanvasText; background: transparent; }
:root:root .effort-chip--default { border: 0; color: GrayText; background: transparent; }
:root:root .insights-effort-split-btn[aria-pressed="true"] { forced-color-adjust: none; background: transparent; color: CanvasText; text-decoration: underline 2px; text-underline-offset: 3px; }
}
@media (pointer: coarse) {
button.effort-chip::after { inline-size: max(100%, 44px); block-size: max(100%, 44px); }
.info-hint-btn { inline-size: 44px; block-size: 44px; border: 10px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--color-outline); }
.trend-link, .sort-direction-btn { min-inline-size: 44px; min-block-size: 44px; }
.header-link, .ab-prov-link, .takeaway-action-link, .show-all-rows-btn, .text-btn, .mode-toggle-btn, .metric-mode-btn, .window-pill-btn, .ab-agent-pill, .ab-task-pill, .ab-checks-toggle, .ab-score-a11y, .agent-rate-trigger, .insights-uplift-sort-btn, .insights-effort-split-btn, .insights-expand-btn, .insights-panel-title-btn, .pivot-filter-btn, .pivot-link, .sort-combined-control, .autocomplete-item, .task-toggle, .secondary-btn, .sort-select, .tfoot-action-btn, .hero-drawers > details > summary, .toggle-label, .site-legal-link, body .glue-cookie-notification-bar__accept { min-block-size: 44px; }
.header-link, .ab-prov-link, .show-all-rows-btn, .text-btn, .mode-toggle-btn, .metric-mode-btn, .window-pill-btn, .ab-checks-toggle, .ab-score-a11y, .insights-uplift-sort-btn, .insights-effort-split-btn, .insights-expand-btn, .insights-panel-title-btn, .pivot-filter-btn, .pivot-link, .sort-combined-control, .autocomplete-item, .secondary-btn, .site-legal-link { display: inline-flex; align-items: center; }
.takeaway-action-link { display: inline-block; padding-block: 10px; }
.guide-nav-controls .secondary-btn { min-inline-size: 44px; justify-content: center; }
.toggle-label input[type="checkbox"], .filter-item input[type="checkbox"] { inline-size: 24px; block-size: 24px; }
input, select, textarea, .sort-select { font-size: max(1rem, 1em); }
}

/* Legal footer & cookie notification bar theme overrides */
.site-legal-footer {
  margin-block-start: var(--space-8);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-outline-variant);
  text-align: center;
}
.site-legal-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--color-on-surface-variant);
}
.dashboard-footer .site-legal-nav {
  display: flex;
  margin-block-start: var(--space-2);
}
.site-legal-link {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-legal-link:hover {
  color: var(--color-on-surface);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-legal-link:focus-visible {
  color: var(--color-on-surface);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.site-legal-sep {
  color: var(--color-outline);
  user-select: none;
}

body .glue-cookie-notification-bar {
  background-color: var(--color-surface-container-lowest);
  background-color: color-mix(in oklab, var(--color-surface-container-lowest) 94%, transparent);
  backdrop-filter: blur(10px);
  color: var(--color-on-surface);
  border-block-start: 1px solid var(--color-outline-variant);
  box-shadow: 0 -8px 24px var(--color-shadow);
  font-family: var(--font-sans);
  font-size: var(--font-md);
  padding: 10px max(20px, calc((100% - 1200px) / 2));
  grid-template-columns: 1fr auto;
  justify-items: start;
  gap: 10px 16px;
  align-items: center;
}
body .glue-cookie-notification-bar__text {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-sans);
  font-size: var(--font-md);
  line-height: 1.45;
  color: var(--color-on-surface-variant);
  padding: 2px 0;
}
body .glue-cookie-notification-bar__more,
body .glue-cookie-notification-bar__more:visited {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body .glue-cookie-notification-bar__more:is(:hover, :active) {
  color: var(--color-on-surface);
  background-color: transparent;
}
body .glue-cookie-notification-bar__more:focus,
body .glue-cookie-notification-bar__more:focus-visible {
  color: var(--color-on-surface);
  background-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
body .glue-cookie-notification-bar__accept,
body .glue-cookie-notification-bar__accept:last-child,
body .glue-cookie-notification-bar__reject {
  grid-column: 2;
  justify-self: end;
  font-family: var(--font-sans);
  font-size: var(--font-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  min-height: 34px;
  min-width: 72px;
  padding: 6px 16px;
  margin: 0;
  border-radius: var(--radius-default);
  background: var(--color-primary-container);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: none;
}
body .glue-cookie-notification-bar__accept:is(:hover, :active),
body .glue-cookie-notification-bar__reject:is(:hover, :active) {
  background: color-mix(in oklab, var(--color-primary-container) 86%, #000000);
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
}
body .glue-cookie-notification-bar__accept:focus,
body .glue-cookie-notification-bar__reject:focus {
  background: var(--color-primary-container);
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}
body .glue-cookie-notification-bar__accept:focus-visible,
body .glue-cookie-notification-bar__reject:focus-visible {
  background: var(--color-primary-container);
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .site-legal-link,
  body .glue-cookie-notification-bar__more,
  body .glue-cookie-notification-bar__accept,
  body .glue-cookie-notification-bar__reject {
    transition: none !important;
  }
}