/* ============================================================
   Scout — design tokens & base
   Infrastructure-grade, trust-forward, light primary.
   ============================================================ */

:root {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* neutrals — cool gray */
  --bg:          oklch(0.984 0.002 255);
  --bg-grad:     oklch(0.972 0.003 255);
  --surface:     #ffffff;
  --surface-2:   oklch(0.978 0.003 255);
  --surface-3:   oklch(0.965 0.004 255);
  --border:      oklch(0.912 0.004 255);
  --border-2:    oklch(0.872 0.006 255);
  --border-strong: oklch(0.80 0.008 255);

  --text:    oklch(0.255 0.012 262);
  --text-2:  oklch(0.46 0.012 262);
  --text-3:  oklch(0.60 0.010 262);
  --text-4:  oklch(0.72 0.008 262);

  /* accent — sharp blue */
  --accent:        oklch(0.55 0.185 256);
  --accent-hover:  oklch(0.50 0.185 256);
  --accent-fg:     #ffffff;
  --accent-subtle: oklch(0.96 0.028 256);
  --accent-2:      oklch(0.92 0.05 256);
  --accent-border: oklch(0.84 0.075 256);
  --accent-text:   oklch(0.48 0.16 256);
  --ring:          oklch(0.55 0.185 256 / 0.32);

  /* severity / status — used ONLY for states */
  --high:        oklch(0.555 0.205 25);
  --high-subtle: oklch(0.962 0.028 25);
  --high-border: oklch(0.86 0.07 25);
  --high-text:   oklch(0.50 0.18 25);

  --med:        oklch(0.64 0.135 62);
  --med-subtle: oklch(0.962 0.045 75);
  --med-border: oklch(0.85 0.08 70);
  --med-text:   oklch(0.50 0.11 58);

  --low:        oklch(0.58 0.02 262);
  --low-subtle: oklch(0.965 0.004 262);
  --low-border: oklch(0.88 0.006 262);
  --low-text:   oklch(0.50 0.015 262);

  --pass:        oklch(0.585 0.13 152);
  --pass-subtle: oklch(0.955 0.045 152);
  --pass-border: oklch(0.84 0.08 152);
  --pass-text:   oklch(0.46 0.11 152);

  --fail:        oklch(0.555 0.205 25);

  --radius:    9px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  --shadow-xs: 0 1px 1.5px oklch(0.2 0.02 262 / 0.05);
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 262 / 0.06), 0 1px 1px oklch(0.2 0.02 262 / 0.04);
  --shadow:    0 1px 3px oklch(0.2 0.02 262 / 0.07), 0 6px 16px oklch(0.2 0.02 262 / 0.05);
  --shadow-lg: 0 2px 6px oklch(0.2 0.02 262 / 0.08), 0 18px 40px oklch(0.2 0.02 262 / 0.10);

  /* density scale (overridden by [data-density]) */
  --d1: 4px;  --d2: 8px;  --d3: 12px; --d4: 16px;
  --d5: 20px; --d6: 24px; --d7: 32px; --d8: 44px;
  --card-pad: 20px;
  --row-pad: 14px;
}

[data-density="compact"] {
  --d3: 9px;  --d4: 12px; --d5: 15px; --d6: 18px; --d7: 24px; --d8: 34px;
  --card-pad: 15px;
  --row-pad: 10px;
}

[data-theme="dark"] {
  --bg:          oklch(0.185 0.008 262);
  --bg-grad:     oklch(0.165 0.009 262);
  --surface:     oklch(0.225 0.010 262);
  --surface-2:   oklch(0.245 0.011 262);
  --surface-3:   oklch(0.275 0.012 262);
  --border:      oklch(0.315 0.012 262);
  --border-2:    oklch(0.365 0.014 262);
  --border-strong: oklch(0.45 0.016 262);

  --text:    oklch(0.955 0.004 262);
  --text-2:  oklch(0.78 0.010 262);
  --text-3:  oklch(0.64 0.012 262);
  --text-4:  oklch(0.52 0.012 262);

  --accent:        oklch(0.66 0.16 256);
  --accent-hover:  oklch(0.72 0.16 256);
  --accent-subtle: oklch(0.30 0.06 256);
  --accent-2:      oklch(0.36 0.08 256);
  --accent-border: oklch(0.44 0.10 256);
  --accent-text:   oklch(0.80 0.12 256);

  --high-subtle: oklch(0.32 0.08 25);
  --high-border: oklch(0.45 0.12 25);
  --high-text:   oklch(0.80 0.13 25);

  --med-subtle: oklch(0.33 0.06 70);
  --med-border: oklch(0.46 0.09 70);
  --med-text:   oklch(0.82 0.11 75);

  --low-subtle: oklch(0.28 0.008 262);
  --low-border: oklch(0.40 0.010 262);
  --low-text:   oklch(0.72 0.012 262);

  --pass-subtle: oklch(0.30 0.07 152);
  --pass-border: oklch(0.42 0.10 152);
  --pass-text:   oklch(0.80 0.12 152);

  --accent-fg: oklch(0.18 0.01 262);

  --shadow-xs: 0 1px 1.5px oklch(0 0 0 / 0.20);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow:    0 1px 3px oklch(0 0 0 / 0.34), 0 6px 16px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 2px 6px oklch(0 0 0 / 0.40), 0 18px 40px oklch(0 0 0 / 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

::selection { background: var(--accent-2); color: var(--text); }

button { font-family: inherit; cursor: pointer; }
code, pre, .mono { font-family: var(--font-mono); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; border: 2px solid var(--surface); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------- shared atoms ---------- */
.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-3);
}

.mono-sha {
  font-family: var(--font-mono);
  font-size: 0.82em;
  letter-spacing: -0.01em;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes barfill { from { width: 0; } }
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

.rise { animation: rise 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.fade { animation: fade 0.3s ease both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; }
}

/* Highlights view of a deep-scout report (deep-report.jsx) */
.story-code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 0.5px 5px;
  border-radius: 4px;
  word-break: break-all;
}

.probe-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  font-family: var(--font-mono);
}
.probe-table th {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  background: var(--surface-2);
  text-align: left;
}
.probe-table th, .probe-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  vertical-align: top;
  word-break: break-word;
}
.probe-table tr.probe-flip td { background: var(--med-subtle); }
.probe-table tr.probe-flip td:last-child { color: var(--high-text); font-weight: 600; }
.probe-flag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--high-text);
  background: var(--high-subtle);
  border: 1px solid var(--high-border);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: 1px;
}

/* Rendered deep-scout report (DeepReport screen) */
.md-report h1 { font-size: 20px; margin: 4px 0 10px; letter-spacing: -0.01em; }
.md-report h2 { font-size: 15px; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.md-report h3 { font-size: 13.5px; margin: 16px 0 6px; }
.md-report h4 { font-size: 13px; margin: 12px 0 6px; }
.md-report p { margin: 6px 0; }
.md-report ul { margin: 6px 0; padding-left: 20px; }
.md-report li { margin: 3px 0; }
.md-report code { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; background: var(--surface-2, rgba(0,0,0,0.045)); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.md-report pre { background: var(--surface-2, rgba(0,0,0,0.045)); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.md-report pre code { background: none; padding: 0; }
.md-report table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12.5px; }
.md-report th, .md-report td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
.md-report th { background: var(--surface-2, rgba(0,0,0,0.03)); font-weight: 600; }
.md-report blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--accent); color: var(--text-3, #555); background: var(--surface-2, rgba(0,0,0,0.02)); border-radius: 0 6px 6px 0; }
.md-report hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.md-report em { color: var(--text-3, #666); }