/* Quark Instrument design system (Direction C) — canonical shared stylesheet.
   Extracted 2026-08-02 from the index_c override layer. Pages link this AFTER
   their legacy styles; it wins the cascade and re-themes through the tokens. */

/* Direction C (The Instrument) re-theme, 2026-08-02. The legacy component CSS
   above consumes these tokens; overriding the tokens re-themes every panel,
   including the live-data sections, without touching their markup or JS. */
:root {
  --bg-primary: #fafafa; --bg-card: #ffffff; --bg-card-hover: #f2f3f5;
  --bg-elevated: #ffffff;
  --border: #17181a; --border-subtle: #e3e4e7;
  --text-primary: #45474b; --text-bright: #17181a;
  --text-secondary: #77797e; --text-dim: #9a9ca1;
  --accent-primary: #2245d6; --accent-secondary: #2245d6;
  --accent-green: #1a7f4b; --accent-gold: #8a6d1f; --accent-red: #b42318;
  --accent-orange: #a05a00;
  --glow-primary: transparent; --glow-green: transparent;
  --gradient-hero: none;
  --font-sans: "Space Grotesk", "Segoe UI", sans-serif;
  --font-serif: "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
}
body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); }
.hero-canvas { display: none; }
.hero { background: var(--bg-primary); }
.gradient-text { background: none; -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor; background-clip: initial; color: var(--text-bright); }
h1, h2, h3, .section-title { font-family: var(--font-sans); font-weight: 500; letter-spacing: -.3px; }
.section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim); }
nav { background: rgba(250,250,250,0.92); border-bottom: 1px solid var(--border); }
[class*="card"] { box-shadow: none !important; border-radius: 4px; }
.btn-primary { background: var(--accent-primary); border-radius: 3px; }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-bright); border-radius: 3px; }
a { color: inherit; }
.instr-stat { display: flex; gap: 42px; margin-top: 30px; flex-wrap: wrap; }
.instr-stat b { display: block; font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--text-bright); }
.instr-stat span { font-size: 12px; color: var(--text-secondary); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-table th { text-align: left; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-dim); font-weight: 500; padding: 7px 18px 7px 0; border-bottom: 1px solid var(--border); }
.doc-table td { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: baseline; color: var(--text-primary); }
.doc-table td a { color: var(--text-bright); text-decoration: none; border-bottom: 1px solid var(--text-dim); }
.doc-table td a:hover { border-bottom-color: var(--text-bright); }
.doc-table td.m { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; color: var(--text-secondary); }

/* Grammar hardening 2026-08-02: the card anatomy itself (bordered boxes, icon
   +pill+title+metric stacks, rounded corners, hover lifts) is the generated-
   site signature. Remaining live panels keep function, lose the costume. */
* { border-radius: 0 !important; }
[class*="card"] { background: transparent !important; border: none !important;
  border-top: 1px solid var(--border-subtle) !important; transform: none !important; }
[class*="card"]:hover { transform: none !important; box-shadow: none !important; }
.signal-icon, .signal-tag, .insight-tag, [class*="badge"], [class*="pill"] { display: none !important; }
.section-title { color: var(--text-bright); }
.section-title span, .section-title em { color: inherit !important; background: none !important;
  -webkit-text-fill-color: currentColor !important; }

/* In-practice exhibits (2026-08-02): graphs stay, dashboard costume goes. */
#in-practice .io-scan { display: none !important; }
#in-practice .io-live { display: none !important; }
#in-practice .io-inst { background: #ffffff !important; border: 1px solid var(--border-subtle) !important;
  border-top: 1px solid var(--border) !important; box-shadow: none !important; }
#in-practice .io-inst::before, #in-practice .io-inst::after { display: none !important; }
#in-practice .io-chip { background: none !important; border: none !important;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; }
#in-practice .io-k { font-family: var(--font-sans); font-weight: 600; color: var(--text-bright); }
#in-practice .io-d, #in-practice .io-u { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
#in-practice .io-v { font-family: var(--font-mono); font-weight: 500; }
#in-practice .io-act { border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-primary); }

/* Contrast repair 2026-08-02: rules that set white/pale text for dark-card
   hovers become unreadable on the light surface. Buttons on accent
   backgrounds are untouched -- white belongs there. */
.ideas-banner-title, .ideas-banner-stat-val,
.ideas-banner:hover .ideas-banner-cta,
.ideas-banner-stats > div:hover .ideas-banner-stat-val,
.demo-panel:hover h3, .signal-card:hover h3 { color: var(--text-bright) !important; }
.stats-grid > div:hover .stat-value,
.signal-card.tier-1:hover .signal-metric strong { color: var(--accent-primary) !important; }
#in-practice .io-d, #in-practice .io-u { color: #595b60; }

/* The io-* variable layer (2026-08-02): the output-section panels take their
   entire palette from --io-* custom properties defined in the legacy styles,
   a third color path beside the style block and the chart script. Overridden
   here as a set so the panels are light-surface-correct everywhere they load. */
#in-practice, .io-inst {
  --io-tx: #17181a; --io-tx2: #45474b; --io-tx3: #595b60;
  --io-data: #45474b; --io-line: #e3e4e7;
  --io-pos: #1a7f4b; --io-warn: #8a6d1f; --io-crit: #b42318;
  --io-brand: #2245d6;
}

/* Article figures (2026-08-02): the 12 insight articles carry 24 inline SVG
   diagrams whose internal colors are dark-theme literals with NO self
   background -- unreadable on the light surface. Until each is redrawn to the
   light figure standard (papers/figures workstream), they render as framed
   dark exhibit plates: internally exactly as designed, deliberately presented. */
article svg { background: #ffffff; padding: 12px; border: 1px solid var(--border-subtle); display: block; }

/* Alternate token vocabularies (2026-08-02): several pages carry their own
   token names (--text/--bright/--txt/--green/--amber/--gold/--up/--neutral)
   the standard override never reached -- the "light text on most pages". */
:root {
  --text: #45474b; --bright: #17181a; --txt: #45474b; --txt-h: #17181a;
  --green: #1a7f4b; --amber: #a05a00; --gold: #8a6d1f;
  --up: #1a7f4b; --neutral: #a05a00; --down: #b42318; --red: #b42318;
}

/* Ideas banner + remaining dark-literal components on index (2026-08-02).
   The banner was a black cinematic band (#000 + dark gradient + white text);
   earlier contrast rules turned its text to ink while the background stayed
   dark. Full light restatement here -- one flat band, hairline-ruled. */
.ideas-banner { background: #ffffff !important; border-top: 1px solid #17181a !important;
  border-bottom: 1px solid #e3e4e7 !important; }
.ideas-banner-bg, .ideas-banner-bg::after, .ideas-banner-grid, .ideas-banner-pulse { display: none !important; }
.ideas-banner-label { color: #9a9ca1 !important; }
.ideas-banner-title { color: #17181a !important; font-family: "Space Grotesk", "Segoe UI", sans-serif !important; }
.ideas-banner-sub { color: #595b60 !important; }
.ideas-banner-cta { border: 1px solid #17181a !important; color: #17181a !important; }
.ideas-banner:hover .ideas-banner-cta { border-color: #2245d6 !important; color: #2245d6 !important;
  background: transparent !important; }
.ideas-banner-stat-val { color: #17181a !important; text-shadow: none !important; }
.ideas-banner-stat-lbl { color: #77797e !important; }
.ideas-banner-stats > div:hover { transform: none !important; background: transparent !important; }
.ideas-banner-stats > div:hover .ideas-banner-stat-val { color: #2245d6 !important; text-shadow: none !important; }
.login-dropdown { background: #ffffff !important; border: 1px solid #e3e4e7 !important; }
.login-dropdown input { background: #fafafa !important; color: #17181a !important; border: 1px solid #d9dadd !important; }
.demo-panel { background: #ffffff !important; border: 1px solid #e3e4e7 !important; }