/* Compatibility layer for the two custom LLM-test surfaces.
   Component geometry stays local; all color and type resolve through theme.css. */
body.tool-legacy {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-text) !important;
  font-size: var(--text-body);
  line-height: 1.65;
}
.tool-legacy .grid-bg { display: none !important; }
.tool-legacy .tool-shell { width: min(var(--measure-page), calc(100% - 2.5rem)); margin: 0 auto; }
.tool-legacy .tool-shell .site-header { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.tool-legacy main { width: min(var(--measure-page), calc(100% - 2.5rem)); max-width: none !important; padding: clamp(3rem, 9vh, 6rem) 0 var(--space-3xl) !important; }
.tool-legacy h1, .tool-legacy h2, .tool-legacy h3 { color: var(--color-ink) !important; font-family: var(--font-text) !important; letter-spacing: -0.01em !important; }
.tool-legacy h1 { font-size: var(--text-display) !important; font-weight: 500 !important; line-height: 1.08 !important; }
.tool-legacy h2 { font-size: 1.55rem !important; font-weight: 600 !important; }
.tool-legacy h3 { font-size: 1.2rem !important; font-weight: 600 !important; }
.tool-legacy .text-white, .tool-legacy .text-slate-200, .tool-legacy .text-slate-300 { color: var(--color-ink) !important; }
.tool-legacy .text-slate-400, .tool-legacy .text-slate-500, .tool-legacy .text-slate-600, .tool-legacy .text-slate-700 { color: var(--color-muted) !important; }
.tool-legacy .text-indigo-300, .tool-legacy .text-indigo-400, .tool-legacy .text-cyan-300, .tool-legacy .text-cyan-400, .tool-legacy .text-purple-300, .tool-legacy .text-purple-400 { color: var(--color-accent) !important; }
.tool-legacy .text-red-300, .tool-legacy .text-red-400, .tool-legacy .text-orange-400 { color: var(--color-danger) !important; }
.tool-legacy .text-emerald-300, .tool-legacy .text-emerald-400, .tool-legacy .text-green-400 { color: var(--color-success) !important; }
.tool-legacy .glass-panel, .tool-legacy [class*="bg-slate-900"], .tool-legacy [class*="bg-slate-950"] {
  background: var(--color-wash) !important;
  border-color: var(--color-rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.tool-legacy .glass-panel { border-top-color: var(--color-rule) !important; }
.tool-legacy [class*="border-slate"], .tool-legacy [class*="border-indigo"], .tool-legacy [class*="border-purple"] { border-color: var(--color-rule) !important; }
.tool-legacy [class*="bg-indigo-"], .tool-legacy [class*="bg-purple-"] { background: var(--color-accent) !important; color: var(--color-bg) !important; }
.tool-legacy [class*="bg-red-"], .tool-legacy [class*="bg-orange-"] { background: var(--color-danger) !important; color: var(--color-ink) !important; }
.tool-legacy [class*="bg-emerald-"], .tool-legacy [class*="bg-green-"] { background: var(--color-success) !important; color: var(--color-bg) !important; }
.tool-legacy button, .tool-legacy a[class*="px-"] { min-height: 2.75rem; border-radius: var(--radius) !important; box-shadow: none !important; }
.tool-legacy pre, .tool-legacy code { font-family: var(--font-code) !important; font-variant-ligatures: none; }
.tool-legacy pre { background: var(--color-wash) !important; color: var(--color-ink) !important; }
.tool-legacy input, .tool-legacy textarea, .tool-legacy select { background: var(--color-surface) !important; color: var(--color-ink) !important; border-color: var(--color-rule) !important; border-radius: var(--radius) !important; }
.tool-legacy input::placeholder, .tool-legacy textarea::placeholder { color: var(--color-muted) !important; opacity: 1; }
.tool-legacy .step-circle, .tool-legacy .float-step { background: var(--color-surface) !important; border-color: var(--color-rule) !important; }
.tool-legacy .progress-step.active .step-circle, .tool-legacy .float-step.active { border-color: var(--color-danger) !important; box-shadow: 0 0 0 4px oklch(72% 0.13 25 / 0.18) !important; }
.tool-legacy .progress-step.completed .step-circle, .tool-legacy .float-step.completed { background: var(--color-success) !important; border-color: var(--color-success) !important; }
.tool-legacy .progress-connector, .tool-legacy .float-connector { background: var(--color-rule) !important; }
.tool-legacy .progress-connector.completed, .tool-legacy .float-connector.completed { background: var(--color-success) !important; }
.tool-legacy .floating-header { background: var(--color-surface) !important; border-color: var(--color-rule) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
.tool-legacy .cta-bg { background: var(--color-surface) !important; }
.tool-legacy .cta-glow, .tool-legacy .glow-red, .tool-legacy .glow-amber, .tool-legacy .glow-green { box-shadow: none !important; border-color: var(--color-rule) !important; }
.tool-legacy footer { border-color: var(--color-rule) !important; background: transparent !important; }

@media (max-width: 35rem) {
  .tool-legacy .tool-shell, .tool-legacy main { width: min(100% - 1.5rem, var(--measure-page)); }
  .tool-legacy main { padding-top: 2.5rem !important; }
  .tool-legacy .glass-panel { padding: 1.1rem !important; }
  .tool-legacy .floating-header-wrapper { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-legacy *, .tool-legacy *::before, .tool-legacy *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}