/* Sherlock - Evening (dark) design tokens - matched to Figma eV8nyKti74N96VQIt91To6 */
:root {
  /* ── Evening theme surfaces (Figma exact) ── */
  --bg:             #22243a;   /* page/header background */
  --panel:          #272a42;   /* card/panel background */
  --panel-deep:     #251d34;   /* hypothesis cards, subject chart bg */
  --panel-border:   rgba(239,231,210,0.10);
  --panel-border-hi:#463854;   /* active/highlighted card border */
  --alert-bg:       #412223;   /* new-device alert card background */

  /* ── Ink / text on dark ── */
  --fg:             #efe7d2;   /* primary text, parchment cream */
  --fg-soft:        #bdb6a2;   /* secondary text */
  --fg-mute:        #807a8c;   /* tertiary text, timestamps, codes */
  --fg-faint:       #4f4b66;   /* dividers, breadcrumb slash */
  --rule:           rgba(239,231,210,0.07);
  --rule-soft:      rgba(239,231,210,0.04);

  /* ── Accent colors (Figma exact) ── */
  --plum:           #9f8aa6;   /* section headers, Watson accent */
  --plum-deep:      #463854;   /* card border highlight */
  --plum-bar:       #1b1d31;   /* confidence bar track */

  --wax:            #c9826f;   /* brick-orange, alerts, delta text */
  --wax-soft:       #bc6e5e;   /* softer brick for new-device label */

  --critical:       #952711;   /* CRITICAL badge bg, critical dot */
  --critical-text:  #f2c0b6;   /* CRITICAL badge text */
  --critical-dot:   #952711;

  --mustard:        #c9a86a;   /* warn severity dot, session-hijack badge */
  --mustard-bar:    #8aa9a6;   /* declining delta (teal-ish) */

  --live-green:     #6fde15;   /* LIVE dot */
  --avatar-green:   #5eb480;   /* avatar bg */

  /* ── Cmd bar ── */
  --cmd-bg:         #141628;
  --cmd-border:     rgba(103,112,209,0.40);

  /* ── Typography ── */
  --serif:  'Spectral', Georgia, 'Times New Roman', serif;
  --sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* ── Root sherlock class (canvas artboard wrapper) ── */
.sherlock,
.sherlock * { box-sizing: border-box; }
.sherlock {
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.sherlock .serif { font-family: var(--serif); font-feature-settings: "onum"; }
.sherlock .mono  { font-family: var(--mono); font-feature-settings: "tnum","ss02"; }
.sherlock .num   { font-variant-numeric: tabular-nums; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(239,231,210,0.15); border-radius: 2px; }
.sherlock ::-webkit-scrollbar { width: 4px; height: 4px; }
.sherlock ::-webkit-scrollbar-thumb { background: rgba(239,231,210,0.12); border-radius: 2px; }

/* ── Section label (SIGNAL VOLUME, ALERTS etc.) ── */
.section-kicker {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--plum);
}

/* ── smallcaps label variant ── */
.sherlock .smallcaps,
.smallcaps {
  font-family: var(--sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute);
}

/* ── Animated writing cursor ── */
@keyframes cursor-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── Live dot pulse ── */
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(111,222,21,.4); }
  50%     { box-shadow: 0 0 0 5px rgba(111,222,21,0); }
}
.live-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--live-green);
  animation: live-pulse 2s ease-out infinite;
  flex-shrink: 0;
}

/* ── Pin-in animation for clue cards ── */
@keyframes pin-in {
  0%   { opacity: 0; transform: translateX(-8px) scale(.97); }
  40%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}