/* Host tokens the page expects. On claude.ai these came from the dashboard runtime; here we define them. */
:root {
  color-scheme: dark;
  --color-bg: #0b0c10;
  --color-panel: #13151b;
  --color-fg: #eceef3;
  --color-fg-muted: #9aa1ad;
  --color-border-line: #252933;
  --color-ok: #3ecf8e;
  --color-warn: #f5b84a;
  --color-bad: #f2665e;

  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 14px;
  --cds-gap-lg: 20px;
  --cds-gap-xl: 28px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 14px;
  --cds-pad-lg: 18px;
  --cds-pad-xl: 28px;
  --cds-radius: 10px;
  --cds-font-size-caption: 12.5px;
  --cds-font-size-body: 14.5px;
  --cds-font-size-heading: 16.5px;
  --cds-font-size-title: 26px;
  --cds-font-weight-medium: 500;
  --cds-dur-slow: 320ms;
  --cds-ease-out: cubic-bezier(.2, .8, .2, 1);

  --font-anthropic-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
}

html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; }
#dash-root { padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); box-sizing: border-box; }
.dash-skeleton { color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--color-border-line) 20%, color-mix(in srgb, var(--color-border-line) 35%, var(--color-panel)) 50%, var(--color-border-line) 80%); background-size: 220% 100%; animation: jv-shimmer 1.3s linear infinite; }
@keyframes jv-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* App chrome: sign-in screen, reconnect chip, demo banner */
.jv-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: radial-gradient(80% 60% at 50% 0%, #1a2240 0%, transparent 70%), var(--color-bg); }
.jv-gate[hidden] { display: none; }
.jv-gate .box { width: min(24rem, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; font-family: var(--font-anthropic-sans); }
.jv-gate .orb { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #7aa2ff 35%, #1c2b66 75%); box-shadow: 0 0 60px #7aa2ff66; }
.jv-gate h1 { margin: 6px 0 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 34px; }
.jv-gate p { margin: 0; color: var(--color-fg-muted); line-height: 1.5; }
.jv-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #eceef3; color: #0b0c10; font: 500 15px var(--font-anthropic-sans); }
.jv-btn.ghost { background: transparent; color: var(--color-fg); border: 1px solid var(--color-border-line); }
.jv-btn:focus-visible { outline: 2px solid #7aa2ff; outline-offset: 2px; }
.jv-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 14px; border-radius: 999px; background: #1b1e27ee; border: 1px solid var(--color-border-line); font: 13px var(--font-anthropic-sans); color: var(--color-fg); backdrop-filter: blur(10px); box-shadow: 0 10px 30px #0008; }
.jv-chip[hidden] { display: none; }
.jv-chip .jv-btn { min-height: 32px; padding: 0 14px; font-size: 13px; }
.jv-demo { font: 12px var(--font-anthropic-sans); color: #0b0c10; background: var(--color-warn); text-align: center; padding: 6px 12px; }
.jv-demo[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dash-skeleton { animation: none; } }