/*
 * Art direction: Technical benchmark dashboard → precision / calm authority
 * Palette: Warm neutral (Nexus) + teal primary
 * Typography: Inter (body) + JetBrains Mono (numbers / code)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --sidebar-w: 220px;
  --header-h:  56px;
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
}

:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
}

:root {
  --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;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem;     --radius-full: 9999px;
  --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

:root, [data-theme="light"] {
  --color-bg:              #f7f6f2;
  --color-surface:         #fafaf7;
  --color-surface-2:       #fcfcfa;
  --color-surface-offset:  #f3f0ec;
  --color-surface-dynamic: #e6e4df;
  --color-divider:         #dcd9d5;
  --color-border:          #d4d1ca;
  --color-text:            #28251d;
  --color-text-muted:      #7a7974;
  --color-text-faint:      #bab9b4;
  --color-text-inverse:    #f9f8f4;
  --color-primary:         #01696f;
  --color-primary-hover:   #0c4e54;
  --color-primary-subtle:  color-mix(in oklch, #01696f 12%, #f7f6f2);
  --color-success:         #437a22;
  --color-success-bg:      color-mix(in oklch, #437a22 12%, #f7f6f2);
  --color-warning:         #964219;
  --color-warning-bg:      color-mix(in oklch, #964219 12%, #f7f6f2);
  --color-error:           #a12c7b;
  --color-error-bg:        color-mix(in oklch, #a12c7b 12%, #f7f6f2);
  --color-timeout:         #da7101;
  --color-timeout-bg:      color-mix(in oklch, #da7101 14%, #f7f6f2);
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
  --chart-1: #01696f; --chart-2: #da7101; --chart-3: #006494; --chart-4: #a12c7b;
  --chart-5: #437a22; --chart-6: #7a39bb; --chart-7: #964219; --chart-8: #a13544;
  --chart-9: #9a7c00;  --chart-10: #5f6671; /* neutral slate — empty/no-result */
}

[data-theme="dark"] {
  --color-bg:              #171614;
  --color-surface:         #1c1b19;
  --color-surface-2:       #201f1d;
  --color-surface-offset:  #242320;
  --color-surface-dynamic: #2d2c2a;
  --color-divider:         #2c2b28;
  --color-border:          #393836;
  --color-text:            #cdccca;
  --color-text-muted:      #797876;
  --color-text-faint:      #5a5957;
  --color-text-inverse:    #2b2a28;
  --color-primary:         #4f98a3;
  --color-primary-hover:   #227f8b;
  --color-primary-subtle:  color-mix(in oklch, #4f98a3 15%, #1c1b19);
  --color-success:         #6daa45;
  --color-success-bg:      color-mix(in oklch, #6daa45 14%, #1c1b19);
  --color-warning:         #bb653b;
  --color-warning-bg:      color-mix(in oklch, #bb653b 14%, #1c1b19);
  --color-error:           #d163a7;
  --color-error-bg:        color-mix(in oklch, #d163a7 14%, #1c1b19);
  --color-timeout:         #fdab43;
  --color-timeout-bg:      color-mix(in oklch, #fdab43 12%, #1c1b19);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
  --chart-1: #4f98a3; --chart-2: #fdab43; --chart-3: #5591c7; --chart-4: #d163a7;
  --chart-5: #6daa45; --chart-6: #a86fdf; --chart-7: #bb653b; --chart-8: #dd6974;
  --chart-9: #fcd34d;  --chart-10: #8b919b; /* neutral slate — empty/no-result */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d;
    --color-surface-offset: #242320; --color-surface-dynamic: #2d2c2a;
    --color-divider: #2c2b28; --color-border: #393836;
    --color-text: #cdccca; --color-text-muted: #797876; --color-text-faint: #5a5957;
    --color-text-inverse: #2b2a28; --color-primary: #4f98a3; --color-primary-hover: #227f8b;
    --color-primary-subtle: color-mix(in oklch, #4f98a3 15%, #1c1b19);
    --color-success: #6daa45; --color-success-bg: color-mix(in oklch, #6daa45 14%, #1c1b19);
    --color-warning: #bb653b; --color-warning-bg: color-mix(in oklch, #bb653b 14%, #1c1b19);
    --color-error: #d163a7; --color-error-bg: color-mix(in oklch, #d163a7 14%, #1c1b19);
    --color-timeout: #fdab43; --color-timeout-bg: color-mix(in oklch, #fdab43 12%, #1c1b19);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
    --chart-1: #4f98a3; --chart-2: #fdab43; --chart-3: #5591c7; --chart-4: #d163a7;
    --chart-5: #6daa45; --chart-6: #a86fdf; --chart-7: #bb653b; --chart-8: #dd6974;
    --chart-9: #fcd34d;  --chart-10: #8b919b; /* neutral slate — empty/no-result */
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  /* Reserve scrollbar space permanently. Without this, a chart's height settling can
     cross the viewport-height threshold and toggle the scrollbar, which changes the
     page's available width, which (via Chart.js maintainAspectRatio) recomputes every
     chart's height from that new width — feeding back into page height again. Fallback
     for browsers without scrollbar-gutter support. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.2; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

::selection { background: color-mix(in oklch, var(--color-primary) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

a, button, [role="button"], input, select {
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Legal pages (impressum, privacy) ───────────────────────────────────── */
.legal-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}
.legal-wrap h1 {
  font-size: var(--text-xl);
  margin: var(--space-2) 0 var(--space-10);
}
.legal-wrap h2 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: var(--space-8) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.legal-wrap h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.legal-wrap p, .legal-wrap address {
  font-style: normal;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.legal-wrap ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.legal-wrap li {
  line-height: 1.7;
  margin-bottom: var(--space-1);
}