/* Hallmark · macrostructure: Workbench · genre: modern-minimal · theme: Plain · tone: utilitarian · anchor hue: ink-blue
 * audience: API users · use: discover callable models · enrichment: none · nav: N9 · footer: Ft2
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
@import url("./tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-base)/1.6 var(--font-body); }
button, input { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: var(--color-transparent); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* The inner light ring separates focus from the filled primary button. */
.button-primary:focus-visible { box-shadow: 0 0 0 3px var(--color-surface); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-style: normal; min-width: 0; overflow-wrap: anywhere; }
.workspace { width: min(1120px, 100%); padding: var(--space-xl) var(--space-lg) var(--space-xl); margin-inline: auto; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); }
.wordmark { display: flex; align-items: center; gap: var(--space-md); font-weight: 650; letter-spacing: -0.02em; }
.brand-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-lg)/1 var(--font-mono); }
.header-note { color: var(--color-muted); font-size: var(--text-xs); text-align: right; }
.intro { margin-block: var(--space-3xl) var(--space-xl); }
.intro h1 { font-size: var(--text-display); font-weight: 650; letter-spacing: -0.045em; line-height: 1.25; }
.intro p { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-base); max-width: 65ch; }
.connection-panel { border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); padding: var(--space-xl) var(--space-lg); }
.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.field { min-width: 0; }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-sm); }
input { width: 100%; min-width: 0; min-height: 48px; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); padding: var(--space-md); line-height: 22px; }
input::placeholder { color: var(--color-placeholder); opacity: 1; }
input[aria-invalid="true"] { border-color: var(--color-error); }
input[data-state="success"] { border-color: var(--color-success); }
.field-help { min-height: 1.6em; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.field-help.is-error { color: var(--color-error); }
#base-url, #api-key { font-family: var(--font-mono); font-size: var(--text-sm); }
.key-field { position: relative; }
.key-field input { padding-inline-end: 65px; }
.key-toggle { position: absolute; inset-block-start: 2px; inset-inline-end: 3px; min-width: 54px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.form-bottom { display: flex; flex-direction: column; gap: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule-light); padding-top: var(--space-xl); margin-top: var(--space-xl); }
.cost-note { font-size: var(--text-xs); color: var(--color-muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-md); padding: 10px var(--space-lg); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; line-height: 22px; }
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); flex: 1; }
.button-primary span { font-size: var(--text-lg); font-weight: 400; }
.button-secondary { background: var(--color-surface); color: var(--color-ink); }
.button-quiet { background: var(--color-transparent); color: var(--color-muted); border-color: var(--color-transparent); }
.button[data-state="loading"] { opacity: 0.75; }
.button[data-state="success"] { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.button[data-state="error"] { color: var(--color-error); border-color: var(--color-error); }
button:active:not(:disabled) { transform: translateY(1px); }
.feedback { margin-top: var(--space-xl); padding: var(--space-md) var(--space-lg); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-neutral-soft); color: var(--color-ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
.feedback[data-tone="error"] { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }
.feedback[data-tone="success"] { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.progress-panel { margin-top: var(--space-xl); padding: var(--space-lg) 0; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-md); }
.progress-top h2 { font-size: var(--text-base); font-weight: 650; }
.progress-top p { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); overflow-wrap: anywhere; }
.progress-number { font: 500 var(--text-sm)/1.4 var(--font-mono); color: var(--color-muted); white-space: nowrap; }
progress { display: block; width: 100%; height: 5px; border: 0; border-radius: var(--radius-pill); accent-color: var(--color-accent); overflow: clip; background: var(--color-rule-light); color: var(--color-accent); }
progress::-webkit-progress-bar { background: var(--color-rule-light); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--color-accent); border-radius: var(--radius-pill); }
progress::-moz-progress-bar { background: var(--color-accent); border-radius: var(--radius-pill); }
.results { margin-top: var(--space-2xl); }
.results-heading { display: flex; flex-direction: column; gap: var(--space-lg); }
.results-heading h2 { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.02em; }
.results-heading p { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-xl); padding: var(--space-lg) 0; border-top: var(--rule-width) solid var(--color-rule); border-bottom: var(--rule-width) solid var(--color-rule); row-gap: var(--space-lg); }
.stat { display: flex; flex-direction: column; gap: var(--space-xs); padding-inline: var(--space-lg); border-inline-start: var(--rule-width) solid var(--color-rule-light); }
.stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
.stat span { font-size: var(--text-xs); color: var(--color-muted); }
.stat strong { font: 500 1.7rem/1.25 var(--font-mono); }
#count-available { color: var(--color-success); }
.results-toolbar { display: flex; flex-direction: column; gap: var(--space-md); margin-block: var(--space-xl) var(--space-lg); }
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.filter { padding: 7px var(--space-xs); min-height: 44px; border: var(--rule-width) solid var(--color-transparent); border-radius: var(--radius-sm); background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.filter span { font: 400 var(--text-xs)/1 var(--font-mono); margin-inline-start: 2px; }
.filter.is-active { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent-soft); }
.search-field { min-width: 0; }
.search-field input { min-height: 44px; font-size: var(--text-sm); }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-sm); border-radius: var(--radius-sm); background: var(--color-neutral-soft); color: var(--color-muted); white-space: nowrap; font-size: var(--text-xs); line-height: 1.4; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: var(--radius-pill); background: currentColor; }
.status[data-status="available"] { background: var(--color-success-soft); color: var(--color-success); }
.status[data-status="unavailable"] { background: var(--color-error-soft); color: var(--color-error); }
.status[data-status="limited"] { background: var(--color-limited-soft); color: var(--color-limited); }
.status[data-status="pending"] { background: var(--color-accent-soft); color: var(--color-accent); }
.empty-results { text-align: center; padding: var(--space-2xl) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.empty-results .button { margin-top: var(--space-sm); }
.result-note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); max-width: 75ch; }
.response-check { display: block; min-height: 44px; margin-top: var(--space-xs); padding: var(--space-sm) 0; border: 0; background: var(--color-transparent); color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.consistency-panel { margin-top: var(--space-2xl); padding: var(--space-xl) 0; border-top: var(--rule-width) solid var(--color-rule); }
.consistency-status { margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; }
.consistency-status[data-tone="success"] { color: var(--color-success); }
.consistency-status[data-tone="limited"] { color: var(--color-limited); }
.consistency-status[data-tone="error"] { color: var(--color-error); }
.consistency-samples { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.consistency-sample { padding: var(--space-lg); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); min-width: 0; overflow-wrap: anywhere; }
.consistency-sample h3 { margin: 0; font-size: var(--text-sm); font-style: normal; font-weight: 600; }
.consistency-sample p { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.consistency-sample p:last-child { color: var(--color-ink); }
.consistency-reasons { padding-inline-start: var(--space-xl); margin-block: var(--space-lg) 0; color: var(--color-muted); font-size: var(--text-xs); }
.page-footer { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { margin-top: var(--space-xl); color: var(--color-error); }
@media (hover: hover) and (pointer: fine) {
  input:hover { background: var(--color-surface-hover); color: var(--color-ink); }
  .button-primary:hover:not(:disabled) { background: var(--color-accent-hover); color: var(--color-accent-ink); }
  .button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled), .key-toggle:hover { background: var(--color-surface-hover); color: var(--color-ink); }
  .filter:hover { background: var(--color-neutral-soft); color: var(--color-ink); }
  .response-check:hover:not(:disabled) { color: var(--color-accent-hover); text-decoration: underline; }
}
@media (min-width: 40rem) {
  .workspace { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
  .connection-panel { padding: var(--space-xl); }
  .fields { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .form-bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-md); }
  .button-primary { flex: none; min-width: 136px; }
  .results-heading { flex-direction: row; align-items: center; justify-content: space-between; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-inline-start: var(--rule-width) solid var(--color-rule-light); padding-inline-start: var(--space-lg); }
  .stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .results-toolbar { flex-direction: row; justify-content: space-between; align-items: center; }
  .filters { display: flex; }
  .filter { padding-inline: var(--space-md); }
  .search-field { width: 240px; }
  .page-footer { flex-direction: row; justify-content: space-between; }
  .consistency-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .intro { margin-top: var(--space-4xl); margin-bottom: var(--space-2xl); }
  .connection-panel { padding: var(--space-2xl); }
  .fields { gap: var(--space-2xl); }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .filter, .key-toggle { transition: transform var(--dur-short) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none; }
}

/* Automatic evidence extends the existing Plain workbench tokens and layout. */
h3, h4 { font-family: var(--font-display); font-style: normal; min-width: 0; overflow-wrap: anywhere; }
summary { cursor: pointer; }
summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.results-heading > div:first-child { min-width: 0; }
.purity-overview { margin-top: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: var(--rule-width) solid var(--color-rule); }
.purity-overview-title h3 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.purity-overview-title p { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.purity-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); margin: var(--space-lg) 0 0; }
.purity-counts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.purity-counts dt { font-size: var(--text-xs); color: var(--color-muted); }
.purity-counts dd { margin: 0; font: 500 var(--text-base)/1.4 var(--font-mono); }
#count-suspicious { color: var(--color-limited); }
.purity-badge { display: inline-block; padding: 3px var(--space-sm); border-radius: var(--radius-sm); background: var(--color-neutral-soft); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.4; white-space: nowrap; }
.purity-badge[data-verdict="consistent"] { background: var(--color-success-soft); color: var(--color-success); }
.purity-badge[data-verdict="suspicious"] { background: var(--color-limited-soft); color: var(--color-limited); }
.task-rate { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.evidence-details { margin-top: var(--space-xs); min-width: 0; }
.evidence-details summary { width: fit-content; min-height: 44px; padding-block: var(--space-md); color: var(--color-accent); font-weight: 600; white-space: nowrap; }
.evidence-body { padding-block: var(--space-sm); min-width: 0; color: var(--color-muted); }
.evidence-summary { color: var(--color-ink); margin-bottom: var(--space-sm); }
.evidence-signals { padding-inline-start: var(--space-lg); margin-block: var(--space-md); }
.evidence-signals li + li { margin-top: var(--space-sm); }
.evidence-signals [data-level="high"], .evidence-signals [data-level="medium"] { color: var(--color-limited); }
.probe-evidence { padding: var(--space-md); margin-top: var(--space-md); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface-hover); min-width: 0; }
.probe-evidence h4 { margin: 0; color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; }
.evidence-facts { margin-block: var(--space-md) 0; }
.evidence-facts > div { margin-top: var(--space-sm); }
.evidence-facts dt { color: var(--color-muted); }
.evidence-facts dd { margin: 0; color: var(--color-ink); font-family: var(--font-mono); overflow-wrap: anywhere; }
.evidence-output { margin: var(--space-md) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink); font: 400 var(--text-xs)/1.6 var(--font-mono); }
.evidence-error { margin-top: var(--space-md); color: var(--color-error); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .evidence-details summary:hover { color: var(--color-accent-hover); text-decoration: underline; }
}
@media (min-width: 40rem) {
  .purity-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
  .result-actions { justify-content: flex-end; }
  .cost-note { max-width: 42ch; }
}
@media (min-width: 60rem) {
  .task-rate { margin-top: var(--space-sm); }
}

/* Apple-inspired refinement · existing workbench retained · P5 H5 E4 S5 R5 V4
 * neutral surfaces · one blue action accent · task-first hierarchy · reduced motion supported */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.workspace { width: min(1184px, 100%); padding: var(--space-xl) 20px var(--space-2xl); }
.page-header { gap: var(--space-md); }
.wordmark { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-base); font-weight: 600; letter-spacing: -0.025em; }
.brand-mark { display: block; width: 26px; height: 26px; flex-shrink: 0; }
.header-note { font-size: var(--text-xs); white-space: nowrap; }
.intro { margin-block: var(--space-3xl) var(--space-2xl); }
.intro h1 { font-size: var(--text-display); font-weight: 600; letter-spacing: -0.055em; line-height: 1.12; text-wrap: balance; }
.intro p { max-width: 65ch; text-wrap: pretty; }
.intro .intro-lead { margin-top: var(--space-lg); color: var(--color-ink); font-size: var(--text-lg); font-weight: 400; letter-spacing: -0.025em; }
.intro .intro-detail { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.75; }
.desktop-break { display: none; }
.connection-panel { padding: var(--space-xl) 20px; border-color: var(--color-transparent); box-shadow: var(--shadow-panel); }
.connection-heading { margin-bottom: var(--space-xl); }
.connection-heading h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.025em; }
.connection-heading p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.fields { gap: var(--space-xl); }
.field label { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-sm); }
input { min-height: 52px; padding: var(--space-md) var(--space-lg); background: var(--color-surface-hover); border-color: var(--color-rule-light); }
input:focus { background: var(--color-surface); border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
input[aria-invalid="true"] { border-color: var(--color-error); }
.field-help { margin-top: var(--space-sm); font-size: var(--text-xs); line-height: 1.6; }
.key-toggle { top: 3px; right: 4px; min-height: 46px; }
.form-bottom { padding-top: var(--space-xl); margin-top: var(--space-xl); border-top-color: var(--color-rule-light); gap: var(--space-xl); }
.cost-note { font-size: var(--text-xs); line-height: 1.65; }
.form-actions { gap: var(--space-sm); }
.button { min-height: 44px; padding: 10px 20px; border-color: var(--color-transparent); font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.01em; }
.button-primary { min-height: 48px; border-color: var(--color-accent); gap: var(--space-sm); }
.button-primary span { font-size: var(--text-base); }
.button-secondary { background: var(--color-neutral-soft); color: var(--color-ink); }
.button-quiet { background: var(--color-transparent); border-color: var(--color-transparent); color: var(--color-muted); }
button:disabled { opacity: 0.46; }
.feedback { padding: var(--space-lg); border-radius: var(--radius-md); border-color: var(--color-transparent); line-height: 1.65; }
.progress-panel { padding-block: var(--space-xl); margin-top: var(--space-lg); }
.progress-top h2 { font-weight: 500; }
.progress-top p { font-size: var(--text-xs); }
progress { height: 4px; }
.results { margin-top: var(--space-3xl); }
.results-heading { gap: var(--space-xl); align-items: stretch; }
.results-heading h2 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.035em; }
.results-heading p { max-width: 54ch; font-size: var(--text-xs); line-height: 1.65; }
.result-actions { gap: var(--space-sm); align-items: center; }
.result-actions .button { padding-inline: var(--space-md); font-size: var(--text-xs); }
.stats { margin-top: var(--space-xl); padding-block: var(--space-xl); border-top: 0; row-gap: var(--space-xl); }
.stat { gap: var(--space-sm); padding-inline: var(--space-lg); }
.stat strong { font-family: var(--font-body); font-size: var(--text-stat); font-weight: 500; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--text-xs); }
#count-available { color: var(--color-ink); }
.results-toolbar { gap: var(--space-lg); margin-block: var(--space-xl); }
.filters { background: var(--color-neutral-soft); border-radius: var(--radius-sm); padding: var(--space-xs); gap: var(--space-xs); }
.filter { min-width: 0; padding-inline: 2px; font-size: 0.75rem; font-weight: 500; }
.filter span { font-size: 0.6875rem; }
.filter.is-active { background: var(--color-surface); border-color: var(--color-transparent); color: var(--color-ink); box-shadow: 0 1px 3px var(--color-shadow-contact); }
.search-field input { min-height: 44px; background: var(--color-surface); border-color: var(--color-rule-light); border-radius: var(--radius-sm); }
.status { padding: 3px var(--space-sm); border-radius: 6px; font-size: var(--text-xs); font-weight: 500; }
.purity-badge { padding: 0; background: var(--color-transparent); font-size: var(--text-xs); font-weight: 500; }
.purity-badge[data-verdict="consistent"] { background: var(--color-transparent); color: var(--color-success); }
.purity-badge[data-verdict="suspicious"] { background: var(--color-transparent); color: var(--color-limited); }
.purity-badge[data-verdict="not_tested"] { color: var(--color-muted); }
.purity-badge[data-verdict="checking"] { color: var(--color-accent); }
.purity-check-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-sm) var(--space-md); margin: 0; border: var(--rule-width) solid var(--color-transparent); border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.purity-check-action[data-state="loading"] { opacity: 0.66; }
.purity-check-action[data-state="error"] { color: var(--color-error); background: var(--color-error-soft); }
.purity-check-action[data-state="success"] { color: var(--color-success); background: var(--color-success-soft); }
.purity-state-note { margin-top: var(--space-sm); color: var(--color-muted); }
.purity-state-note[data-state="error"] { color: var(--color-error); }
.purity-state-note[data-state="loading"] { color: var(--color-accent); }
.task-rate { margin: 0; font-variant-numeric: tabular-nums; }
.evidence-details { margin-top: var(--space-xs); }
.evidence-details summary { min-height: 44px; padding-block: var(--space-md); font-weight: 500; }
.evidence-body { padding-top: var(--space-md); }
.probe-evidence { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-surface); border-color: var(--color-rule-light); border-radius: var(--radius-md); }
.probe-evidence h4 { font-weight: 600; }
.evidence-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); font-size: var(--text-xs); }
.evidence-facts > div { min-width: 0; margin-top: 0; }
.evidence-fact-wide { grid-column: 1 / -1; }
.evidence-facts dd { margin-top: var(--space-xs); }
.evidence-output { font-size: var(--text-xs); line-height: 1.7; }
.purity-panel { padding: var(--space-xl); margin-top: var(--space-xl); background: var(--color-accent-soft); border-radius: var(--radius-md); }
.purity-panel-top { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.purity-panel-top > div:first-child { min-width: 0; }
.purity-panel h3 { margin: 0; color: var(--color-ink); font-size: var(--text-base); font-weight: 500; }
.purity-panel p { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); overflow-wrap: anywhere; }
.purity-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.purity-panel .button-secondary { background: var(--color-surface); }
.purity-overview { margin-top: var(--space-lg); padding-block: var(--space-md) var(--space-lg); border-top: var(--rule-width) solid var(--color-rule); border-bottom: 0; }
.purity-overview summary { min-height: 44px; padding-block: var(--space-md); width: fit-content; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.purity-overview-note { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.65; }
.purity-counts { margin-top: var(--space-lg); }
.result-note { margin-top: var(--space-lg); font-size: var(--text-xs); line-height: 1.75; max-width: 78ch; }
.empty-results { padding-block: var(--space-3xl); }
/* Compact model list · one aligned summary per model; evidence appears on demand.
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
.model-table { border: var(--rule-width) solid var(--color-rule-light); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); overflow: clip; }
.table-head { display: none; }
.model-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); padding: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule-light); align-items: center; min-width: 0; }
.model-row:first-child { border-top: 0; }
.model-name { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: baseline; gap: var(--space-md); min-width: 0; }
.model-name-text { display: block; min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink); font: 500 var(--text-sm)/1.5 var(--font-mono); letter-spacing: -0.015em; }
.model-latency { flex-shrink: 0; color: var(--color-muted); font: 400 0.6875rem/1.4 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-category { grid-column: 1; grid-row: 2; min-width: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.model-status { grid-column: 2; grid-row: 2; justify-self: end; }
.model-purity { grid-column: 1; grid-row: 3; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xs); }
.purity-badge { font-size: var(--text-xs); line-height: 1.4; }
.row-purity-progress { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.row-purity-progress progress { flex: 1; min-width: 24px; height: 4px; }
.row-purity-percent { color: var(--color-muted); font-size: 0.6875rem; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-purity-progress[data-state="running"] .row-purity-percent { color: var(--color-accent); }
.row-purity-progress[data-state="cancelled"] progress { accent-color: var(--color-muted); color: var(--color-muted); }
.row-purity-progress[data-state="cancelled"] progress::-webkit-progress-value { background: var(--color-muted); }
.row-purity-progress[data-state="cancelled"] progress::-moz-progress-bar { background: var(--color-muted); }
.task-rate { color: var(--color-muted); font-size: 0.6875rem; line-height: 1.4; }
.model-actions { grid-column: 2; grid-row: 3; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-xs); min-width: 0; }
.model-actions .purity-check-action { padding-inline: var(--space-sm); }
.model-detail-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-sm); border: var(--rule-width) solid var(--color-transparent); border-radius: var(--radius-sm); background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.model-detail-toggle::after { content: ""; width: 5px; height: 5px; border-right: var(--rule-width) solid currentColor; border-bottom: var(--rule-width) solid currentColor; transform: translateY(-2px) rotate(45deg); }
.model-detail-toggle[aria-expanded="true"] { color: var(--color-accent); background: var(--color-accent-soft); }
.model-detail-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.model-detail-panel { grid-column: 1 / -1; grid-row: 4; min-width: 0; padding-top: var(--space-lg); margin-top: var(--space-sm); border-top: var(--rule-width) solid var(--color-rule-light); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.65; overflow-wrap: anywhere; }
.model-detail-summary { min-width: 0; }
.model-detail-panel .evidence-details { margin-top: var(--space-sm); }
.model-detail-panel .evidence-body { min-width: 0; }
.model-detail-panel .probe-evidence { background: var(--color-surface-hover); }
.purity-panel .purity-progress-caption { margin-top: var(--space-md); font-size: 0.6875rem; line-height: 1.6; }
#purity-completed-count { color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.page-footer { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top-color: var(--color-rule); font-size: var(--text-xs); }
.skip-link { position: fixed; inset-block-start: var(--space-md); inset-inline-start: var(--space-md); z-index: 2; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-accent); transform: translateY(-200%); white-space: nowrap; }
.skip-link:not(:focus) { clip-path: inset(50%); }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover:not(:disabled) { background: var(--color-accent-hover); color: var(--color-accent-ink); transform: translateY(-1px); }
  .button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled), .key-toggle:hover:not(:disabled) { background: var(--color-rule-light); color: var(--color-ink); }
  .filter:hover:not(.is-active) { background: var(--color-rule-light); }
  .purity-check-action:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent-hover); transform: translateY(-1px); }
  .model-detail-toggle:hover:not(:disabled) { background: var(--color-neutral-soft); color: var(--color-ink); }
  .model-detail-toggle[aria-expanded="true"]:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent-hover); }
}
@media (min-width: 40rem) {
  .workspace { padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); }
  .intro { margin-block: var(--space-4xl) var(--space-3xl); }
  .intro .intro-lead { font-size: var(--text-xl); }
  .intro .intro-detail { font-size: var(--text-base); }
  .desktop-break { display: inline; }
  .connection-panel { padding: var(--space-2xl); }
  .connection-heading { margin-bottom: var(--space-2xl); }
  .connection-heading h2 { font-size: var(--text-lg); }
  .form-bottom { gap: var(--space-xl); }
  .cost-note { max-width: 44ch; }
  .button-primary { min-width: 156px; }
  .results-heading { align-items: center; }
  .result-actions .button { font-size: var(--text-xs); }
  .filter { padding-inline: var(--space-md); font-size: var(--text-xs); }
  .search-field { width: 256px; flex-shrink: 1; }
  .stats { padding-block: var(--space-2xl); }
  .stat { padding-inline: var(--space-2xl); }
  .stat:nth-child(odd) { padding-inline-start: var(--space-2xl); }
  .stat:first-child { padding-inline-start: 0; }
  .purity-panel-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .purity-panel-actions { flex-shrink: 0; }
}
@media (min-width: 60rem) {
  .workspace { padding-inline: var(--space-3xl); }
  .intro { margin-top: var(--space-4xl); }
  .connection-panel { padding: var(--space-2xl) var(--space-3xl); }
  .fields { gap: var(--space-2xl); }
  .connection-heading h2 { font-size: 1.25rem; }
  .results { margin-top: var(--space-4xl); }
  .results-toolbar { margin-block: var(--space-2xl) var(--space-xl); }
  .table-head, .model-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 84px 152px 156px; column-gap: var(--space-lg); }
  .table-head { min-height: 44px; align-items: center; padding: var(--space-md) var(--space-xl); background: var(--color-surface-hover); color: var(--color-muted); border-bottom: var(--rule-width) solid var(--color-rule-light); font-size: 0.75rem; line-height: 1.4; }
  .table-head span:last-child { text-align: right; }
  .model-row { min-height: 80px; padding: var(--space-md) var(--space-xl); row-gap: 0; }
  .model-name { grid-column: 1; grid-row: 1; flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .model-name-text { font-size: var(--text-xs); }
  .model-category { grid-column: 2; grid-row: 1; }
  .model-status { grid-column: 3; grid-row: 1; justify-self: start; }
  .model-purity { grid-column: 4; grid-row: 1; gap: var(--space-xs); }
  .model-actions { grid-column: 5; grid-row: 1; }
  .model-actions .purity-check-action { padding-inline: var(--space-md); }
  .model-detail-panel { grid-row: 2; padding-block: var(--space-xl) var(--space-md); margin-top: var(--space-md); }
  .model-detail-panel .evidence-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .model-detail-panel .evidence-body > p, .model-detail-panel .evidence-body > ul { grid-column: 1 / -1; margin: 0; }
  .model-detail-panel .probe-evidence { margin-top: 0; }
  .task-rate { margin-top: var(--space-xs); }
  .page-footer { margin-top: var(--space-4xl); }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .filter, .key-toggle, .purity-check-action { transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
  .model-detail-toggle { transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
  input { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
  .intro, .connection-panel { animation: workspace-enter var(--dur-medium) var(--ease-out) both; }
  .connection-panel { animation-delay: 60ms; }
  .purity-panel { animation: workspace-enter var(--dur-short) var(--ease-out) both; }
  button:active:not(:disabled), .purity-check-action:active:not(:disabled) { transform: scale(0.985); }
  @keyframes workspace-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .intro, .connection-panel, .purity-panel { animation: none; }
  .button, .filter, .key-toggle, .purity-check-action, .model-detail-toggle, input { transition: none; }
  button:hover:not(:disabled), button:active:not(:disabled), .purity-check-action:hover:not(:disabled) { transform: none; }
}