/* ============================================================================================
   WC26 Console — design tokens & component classes.
   Source of truth: docs/design_handoff_wc26_console/README.md (Ohms.WorldCup spec v2).
   Trading-terminal density — do NOT air out the spacing.
   ============================================================================================ */

:root {
  --bg-page:#070B09; --bg-rail:#0A0F0C; --bg-card:#0E1411; --bg-inset:#0B100D;
  --bg-chip:#131B16; --bg-track:#0A0F0C;
  --border:#1E2A23; --border-hairline:#131B16;
  --text-primary:#E9F2EC; --text-secondary:#9DB3A6; --text-muted:#5E7568;
  --text-faint:#46584D; --text-faint2:#37453D;
  --green:#43D17C; --green-mid:#2E9E5B; --green-deep:#1E5C3B; --green-idle:#243129;
  --gold:#E0B64E; --gold-dim:#A8842F; --gold-text:#C9B677;
  --red:#E5564D; --on-green:#06130B;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ui:'Barlow',system-ui,sans-serif;
  --sc:'Barlow Semi Condensed',system-ui,sans-serif;
}

html, body { margin:0; padding:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--ui); height:100%; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#1E2A23; border-radius:5px; border:2px solid #070B09; }
::-webkit-scrollbar-track { background:transparent; }
::selection { background:rgba(67,209,124,0.25); }
@keyframes wcPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
input[type="range"] { accent-color:#43D17C; }

/* ---- App shell ---------------------------------------------------------------------------- */
.wc-app { display:flex; width:100%; height:100vh; min-width:1280px; overflow:hidden; }
.wc-rail { width:210px; min-width:210px; display:flex; flex-direction:column;
  border-right:1px solid var(--border); background:var(--bg-rail); }
.wc-rail-head { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.wc-eyebrow { font-family:var(--mono); font-size:9.5px; letter-spacing:3px; color:var(--gold); }
.wc-brand { font-size:22px; font-weight:800; letter-spacing:0.5px; line-height:1.2; margin-top:2px; }
.wc-brand-sub { font-size:10.5px; color:var(--text-muted); letter-spacing:0.4px; }
.wc-nav { display:flex; flex-direction:column; gap:2px; padding:10px 8px; }
.wc-nav a { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px; }
.wc-nav a:hover { background:rgba(67,209,124,0.06); }
.wc-nav a.active { background:rgba(67,209,124,0.10); }
.wc-nav .dot { width:6px; height:6px; border-radius:2px; background:var(--green-idle); }
.wc-nav a.active .dot { background:var(--green); }
.wc-nav .label { font-size:13px; font-weight:600; color:var(--text-secondary); flex:1; }
.wc-nav a.active .label { color:var(--text-primary); }
.wc-nav .route { font-family:var(--mono); font-size:9px; color:var(--text-faint); }
.wc-rail-spacer { flex:1; }
.wc-status { margin:10px; padding:10px 12px; border:1px solid var(--border); border-radius:7px;
  background:var(--bg-card); }
.wc-status-row { display:flex; align-items:center; gap:7px; }
.wc-livedot { width:7px; height:7px; border-radius:50%; background:var(--green);
  animation:wcPulse 2.2s infinite; }
.wc-rail-foot { padding:0 16px 14px; font-family:var(--mono); font-size:9px; color:var(--text-faint);
  letter-spacing:0.5px; }

.wc-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.wc-topbar { height:52px; min-height:52px; display:flex; align-items:center; gap:12px;
  padding:0 20px; border-bottom:1px solid var(--border); background:var(--bg-rail); }
.wc-topbar .title { font-size:16px; font-weight:700; letter-spacing:0.2px; }
.wc-content { flex:1; overflow:auto; padding:14px 20px 20px; }

/* ---- Cards & sections --------------------------------------------------------------------- */
.wc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:13px 15px; }
.wc-card-prose { padding:18px 20px; }
.wc-card-gold { border-color:rgba(224,182,78,0.3); }
.wc-inset { background:var(--bg-inset); border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; }
.wc-sech { font-family:var(--sc); font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--text-secondary); }
.wc-sech.gold { color:var(--gold); }
.wc-sech-note { font-family:var(--mono); font-size:9.5px; color:var(--text-muted); }
.wc-sech-row { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }

/* ---- Chips, mono, bars -------------------------------------------------------------------- */
.wc-mono { font-family:var(--mono); }
.wc-code { font-family:var(--mono); font-size:10.5px; font-weight:600; text-align:center;
  background:var(--bg-chip); border:1px solid var(--border); border-radius:3px; padding:1.5px 0; }
.wc-chip { font-family:var(--mono); font-size:10.5px; padding:5px 13px; border-radius:5px;
  cursor:pointer; border:1px solid var(--border); color:var(--text-secondary); background:var(--bg-card); }
.wc-chip.active { background:rgba(67,209,124,0.12); border-color:rgba(67,209,124,0.4); color:var(--green); }
.wc-typechip { font-family:var(--mono); font-size:8.5px; letter-spacing:0.5px; color:var(--text-secondary);
  border:1px solid var(--border); border-radius:3px; padding:1.5px 6px; }
.wc-track { background:var(--bg-track); border-radius:3px; overflow:hidden; }
.wc-track .fill { height:100%; border-radius:3px; }
.wc-bar-green { background:linear-gradient(90deg,#1E5C3B,#43D17C); }

/* ---- Buttons ------------------------------------------------------------------------------ */
.wc-btn-green { font-family:var(--mono); font-weight:600; color:var(--on-green);
  background:linear-gradient(180deg,#4FDB87,#2E9E5B); border:none; border-radius:5px; cursor:pointer; }
.wc-btn-green:hover { filter:brightness(1.1); }
.wc-btn-ghost { font-family:var(--mono); font-weight:600; color:var(--text-secondary);
  border:1px solid var(--border); background:transparent; border-radius:4px; cursor:pointer; }
.wc-btn-ghost:hover { color:var(--red); border-color:rgba(229,86,77,0.4); }
.wc-btn-green:disabled { filter:grayscale(0.6) brightness(0.7); cursor:not-allowed; }
.wc-input { background:var(--bg-track); border:1px solid var(--border); border-radius:5px;
  color:var(--text-primary); font-family:var(--mono); font-size:10.5px; padding:7px 10px; outline:none; }

.wc-seg { display:flex; gap:4px; border:1px solid var(--border); border-radius:6px; padding:3px;
  background:var(--bg-card); }
.wc-seg > div { font-family:var(--mono); font-size:10.5px; padding:4px 11px; border-radius:4px; cursor:pointer;
  color:var(--text-muted); }
.wc-seg > div.active { background:rgba(67,209,124,0.12); color:var(--green); }

/* ---- Toggle switch (lab) ------------------------------------------------------------------ */
.wc-toggle { width:32px; height:17px; border-radius:9px; cursor:pointer; position:relative;
  transition:background 0.15s; background:var(--green-idle); }
.wc-toggle.on { background:var(--green); }
.wc-toggle .knob { position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--text-primary); transition:left 0.15s; }
.wc-toggle.on .knob { left:17px; }

.wc-tooltip { position:relative; }
.wc-tooltip[data-tip]:hover::after { content:attr(data-tip); position:absolute; bottom:115%; left:50%;
  transform:translateX(-50%); background:#0A0F0C; border:1px solid var(--border); color:var(--text-secondary);
  font-family:var(--mono); font-size:9px; white-space:nowrap; padding:4px 8px; border-radius:4px; z-index:10; }

/* tone helpers */
.t-green { color:var(--green); } .t-gold { color:var(--gold); } .t-red { color:var(--red); }
.t-muted { color:var(--text-muted); } .t-faint { color:var(--text-faint); } .t-sec { color:var(--text-secondary); }

/* error ui (framework) */
#blazor-error-ui { background:#13160E; color:var(--gold); bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,0.2);
  display:none; left:0; padding:0.6rem 1.25rem 0.7rem; position:fixed; width:100%; z-index:1000;
  font-family:var(--mono); font-size:12px; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; }
.blazor-error-boundary { background:#b32121; padding:1rem; color:white; }