/* Jupito design system — vanilla-CSS build for the Big Money web app.
   Tokens transcribed from "Jupito Design System/tokens/*"; fonts self-hosted (no CDN).
   Light, ink-on-white with a single gold accent; green/red reserved for gain/loss. */

/* ---- self-hosted variable fonts ---- */
@font-face { font-family:'Sora'; src:url('../fonts/Sora-var.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-var.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap; }

:root{
  /* gold (primary accent) */
  --gold-50:#fdf6e8; --gold-100:#fbe9c2; --gold-200:#f7d78c; --gold-300:#f3c256;
  --gold-400:#efac2a; --gold-500:#ef9e00; --gold-600:#cf8700; --gold-700:#a86c00;
  --gold-800:#7d5100; --gold-900:#523500;
  /* ink neutrals */
  --ink-0:#fff; --ink-50:#f6f6f5; --ink-100:#ececea; --ink-200:#dcdbd8; --ink-300:#c1bfba;
  --ink-400:#95928c; --ink-500:#6d6a63; --ink-600:#4c4a44; --ink-700:#33322e;
  --ink-800:#1f1e1b; --ink-900:#0f0f0d; --ink-950:#000;
  /* semantic (trading) */
  --up-500:#1a8f4c; --up-100:#e3f5ea; --down-500:#d1382b; --down-100:#fbe7e4;
  --warn-500:#ef9e00; --info-500:#2b6cb0;
  /* surfaces & text */
  --surface-page:var(--ink-0); --surface-canvas:var(--ink-50); --surface-card:var(--ink-0);
  --surface-sunken:var(--ink-100); --surface-inverse:var(--ink-950);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-500); --text-tertiary:var(--ink-400);
  --text-on-brand:var(--ink-950); --text-link:var(--gold-700);
  --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-900);
  --focus-ring:var(--gold-500);
  /* type */
  --font-display:'Sora',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --tracking-tight:-0.02em; --tracking-caps:0.08em;
  /* spacing / radius / effects */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(15,15,13,.06); --shadow-sm:0 2px 6px rgba(15,15,13,.08);
  --shadow-md:0 6px 16px rgba(15,15,13,.10); --shadow-gold:0 8px 20px rgba(239,158,0,.25);
  --ease-out:cubic-bezier(0,0,.2,1); --dur-fast:120ms; --dur:200ms;
  --container-max:1200px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--surface-canvas); color:var(--text-primary);
  font:var(--text-body-md,400 15px/1.55 var(--font-body)); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; }
a{ color:var(--text-link); text-decoration:none; }
a:hover{ color:var(--gold-800); }

/* ---- app shell: top bar with logo + tabs ---- */
.appbar{ position:sticky; top:0; z-index:20; background:var(--surface-page);
  border-bottom:1px solid var(--border-subtle); }
.appbar-inner{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-6);
  display:flex; align-items:center; gap:var(--space-8); height:60px; }
.brand{ display:flex; align-items:center; gap:var(--space-2); }
.brand img{ height:26px; width:auto; display:block; }
.brand .wordmark{ font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:var(--tracking-tight); color:var(--text-primary); }
.tabs{ display:flex; gap:var(--space-1); height:100%; }
.tab{ display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-4); height:100%;
  font:600 14px/1 var(--font-body); color:var(--text-secondary); border:0; background:none;
  cursor:pointer; position:relative; letter-spacing:-.01em; }
.tab:hover{ color:var(--text-primary); }
.tab.active{ color:var(--text-primary); }
.tab.active::after{ content:""; position:absolute; left:var(--space-4); right:var(--space-4);
  bottom:0; height:2px; background:var(--gold-500); border-radius:2px 2px 0 0; }
.tab svg{ width:16px; height:16px; }
.appbar-meta{ margin-left:auto; display:flex; align-items:center; gap:var(--space-3);
  font-size:12px; color:var(--text-tertiary); }
.health{ display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--font-body);
  padding:5px 10px; border-radius:var(--radius-pill); border:1px solid var(--border-subtle);
  color:var(--up-500); text-decoration:none; white-space:nowrap; }
.health:hover{ border-color:var(--up-500); }
.health .hdot{ width:7px; height:7px; border-radius:50%; background:var(--up-500); }
.health.bad{ color:var(--down-500); border-color:var(--down-100); }
.health.bad .hdot{ background:var(--down-500); }

.page{ max-width:var(--container-max); margin:0 auto; padding:var(--space-6) var(--space-6) var(--space-16); }
.page-head{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-2); }
h1.title{ font:var(--text-heading-lg,600 24px/1.25 var(--font-display)); font-family:var(--font-display);
  margin:0; letter-spacing:var(--tracking-tight); }
.subtitle{ color:var(--text-secondary); font-size:13px; }

/* ---- eyebrow / section headings ---- */
.eyebrow{ font:600 11px/1.2 var(--font-body); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-tertiary); margin:0 0 var(--space-3); }
section{ margin-top:var(--space-8); }

/* ---- cards & stat tiles (flat; hairline; shadow on hover only — no accent strips) ---- */
.card{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); }
.card.hoverable{ transition:box-shadow var(--dur) var(--ease-out), border-color var(--dur); }
.card.hoverable:hover{ box-shadow:var(--shadow-sm); }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-3); margin:var(--space-5) 0; }
.stat{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); cursor:default; }
.stat.click{ cursor:pointer; transition:border-color var(--dur); }
.stat.click:hover{ border-color:var(--border-default); }
.stat.active{ border-color:var(--gold-500); box-shadow:inset 0 0 0 1px var(--gold-500); }
.stat .k{ font:600 10px/1.2 var(--font-body); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-tertiary); }
.stat .v{ font:var(--text-mono-lg,600 22px/1.2 var(--font-mono)); font-family:var(--font-mono);
  margin-top:var(--space-1); color:var(--text-primary); letter-spacing:-.01em; }

/* ---- tables ---- */
.scroll{ overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-card); }
table{ border-collapse:collapse; width:100%; font-size:13px; }
th,td{ text-align:left; padding:var(--space-2) var(--space-3); white-space:nowrap;
  border-bottom:1px solid var(--border-subtle); vertical-align:top; }
thead th{ font:600 10.5px/1.2 var(--font-body); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-tertiary); background:var(--ink-50); }
tbody tr:last-child td{ border-bottom:0; }
td.num,th.num{ text-align:right; font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums; }
tbody tr.row{ cursor:pointer; }
tbody tr.row:hover{ background:var(--ink-50); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.sym{ font-weight:600; }

/* ---- direction (semantic green/red; gold never used for gain/loss) ---- */
.up,.dir-Bullish,.dir-BUY{ color:var(--up-500); font-weight:600; }
.down,.dir-Bearish,.dir-SELL{ color:var(--down-500); font-weight:600; }
.dir-Mixed{ color:var(--ink-600); font-weight:600; }
.dir-Context{ color:var(--info-500); font-weight:600; }
.dir-Neutral{ color:var(--text-tertiary); font-weight:600; }
.dot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:middle; background:currentColor; }

/* ---- badges & tags ---- */
.badge{ display:inline-flex; align-items:center; gap:4px; font:700 10.5px/1 var(--font-body);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:3px 7px; border-radius:var(--radius-sm); }
.badge.gold{ background:var(--gold-500); color:var(--text-on-brand); }
.badge.up{ background:var(--up-100); color:var(--up-500); }
.badge.down{ background:var(--down-100); color:var(--down-500); }
.badge.ink{ background:var(--ink-900); color:var(--ink-0); }
.badge.neutral{ background:var(--ink-100); color:var(--ink-600); }
.badge.subtle{ background:transparent; color:var(--text-tertiary); border:1px solid var(--border-subtle); }
.tag{ display:inline-block; font:500 11px/1.4 var(--font-body); padding:1px 8px;
  border-radius:var(--radius-pill); border:1px solid var(--border-subtle); color:var(--text-secondary); }
.tag.gold{ border-color:var(--gold-300); color:var(--gold-700); background:var(--gold-50); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:6px; font:600 13px/1 var(--font-body);
  padding:8px 14px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.btn:active{ transform:scale(.98); }
.btn.primary{ background:var(--gold-500); color:var(--text-on-brand); }
.btn.primary:hover{ background:var(--gold-600); }
.btn.outline{ background:none; border-color:var(--border-default); color:var(--text-primary); }
.btn.outline:hover{ background:var(--ink-50); }
.btn.ghost{ background:none; color:var(--text-secondary); }
.btn.ghost:hover{ background:var(--ink-50); color:var(--text-primary); }

/* ---- form controls ---- */
input[type=text],input[type=date],select{ font:400 13px/1.4 var(--font-body);
  background:var(--surface-card); color:var(--text-primary); border:1px solid var(--border-default);
  border-radius:var(--radius-sm); padding:7px 9px; }
input:focus,select:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-100); }
label.field{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.switch{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); cursor:pointer; }

/* ---- toolbar row ---- */
.toolbar{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap;
  margin:var(--space-4) 0 var(--space-2); }
.toolbar .spacer{ flex:1; }

/* ---- misc ---- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
@media (max-width:860px){ .grid2{ grid-template-columns:1fr; } }
.empty{ color:var(--text-tertiary); padding:var(--space-4); font-size:13px; }
.qitem{ display:flex; justify-content:space-between; gap:var(--space-3); align-items:center;
  padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border-subtle); }
.qitem:last-child{ border-bottom:0; }
.qitem .s{ font-weight:600; }
.qitem .d{ color:var(--text-secondary); font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.pdf{ font-weight:600; color:var(--gold-700); white-space:nowrap; }
.pdf.none{ color:var(--text-tertiary); font-weight:400; pointer-events:none; }
.src-pill{ font:600 10.5px/1 var(--font-body); text-transform:uppercase; letter-spacing:var(--tracking-caps);
  padding:3px 8px; border-radius:var(--radius-pill); border:1px solid var(--border-subtle); color:var(--text-tertiary); }
.src-pill.live{ color:var(--up-500); border-color:var(--up-500); }
.src-pill.offline{ color:var(--gold-700); border-color:var(--gold-300); background:var(--gold-50); }
footer.note{ margin-top:var(--space-10); color:var(--text-tertiary); font-size:12px;
  border-top:1px solid var(--border-subtle); padding-top:var(--space-4); }

/* ---- site footer: data-integrity panel (published at the bottom) ---- */
.site-footer{ border-top:1px solid var(--border-subtle); background:var(--surface-page); margin-top:var(--space-10); }
.site-footer-inner{ max-width:var(--container-max); margin:0 auto; padding:var(--space-4) var(--space-6);
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; font-size:12px; color:var(--text-tertiary); }
.integrity-toggle{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font:600 12px/1 var(--font-body); color:var(--up-500); padding:0; }
.integrity-toggle.bad{ color:var(--down-500); }
.integrity-toggle .hdot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.int-caret{ font-size:9px; color:var(--text-tertiary); transition:transform var(--dur) var(--ease-out); }
.integrity-toggle.open .int-caret{ transform:rotate(180deg); }
.int-asof{ color:var(--text-tertiary); }
.int-link{ color:var(--text-tertiary); text-decoration:underline; margin-left:auto; }
.integrity-detail{ flex-basis:100%; margin-top:var(--space-3); border-top:1px solid var(--border-subtle);
  padding-top:var(--space-3); display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px 24px; }
.int-row{ display:flex; align-items:baseline; gap:8px; padding:3px 0; }
.int-ic{ width:12px; text-align:center; font-weight:700; flex:none; }
.int-row.ok .int-ic{ color:var(--up-500); } .int-row.warn .int-ic{ color:var(--warn-500); }
.int-row.err .int-ic{ color:var(--down-500); } .int-row.ack .int-ic{ color:var(--text-tertiary); }
.int-id{ font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); flex:none; min-width:150px; }
.int-msg{ color:var(--text-tertiary); }
.detail{ background:var(--ink-50); color:var(--text-secondary); font-size:12px; }
.detail b{ color:var(--text-primary); font-weight:600; }

/* ---- delivery signals tab ---- */
.segbar{ display:flex; border-bottom:1px solid var(--border-subtle); }
.seg{ flex:1; background:none; border:0; padding:9px 8px; font:600 12px/1 var(--font-body);
  color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; }
.seg:hover{ color:var(--text-primary); }
.seg.active{ color:var(--text-primary); border-bottom-color:var(--gold-500); }
.seg span{ color:var(--text-tertiary); font-weight:500; }
.scrolly{ max-height:372px; overflow-y:auto; }
.sigrow{ padding:8px 12px; border-bottom:1px solid var(--border-subtle); cursor:pointer; }
.sigrow:last-child{ border-bottom:0; }
.sigrow:hover{ background:var(--ink-50); }
.sigrow .d{ color:var(--text-tertiary); font-size:11.5px; margin-top:2px; }
input[type=range]{ accent-color:var(--gold-500); }