/* ============================================================
   FACET — Design System / Base
   Light-first, spectrum-accented, motion-rich.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --paper:        #ffffff;
  --bg:           #f7f7fb;
  --bg-2:         #f0f0f7;
  --sunk:         #ebebf4;
  --line:         #e6e6f0;
  --line-strong:  #d5d5e4;

  /* Ink */
  --ink:          #0c0c14;
  --ink-2:        #35354a;
  --ink-3:        #6b6b85;
  --ink-4:        #9a9ab2;

  /* Spectrum — the brand refraction */
  --violet:  #6b4dfb;
  --indigo:  #3d63ff;
  --azure:   #0aa2ef;
  --cyan:    #16c8d8;
  --mint:    #17c98c;
  --lime:    #8cd117;
  --amber:   #ffa424;
  --coral:   #ff6b4a;
  --rose:    #f5407e;
  --plum:    #a83bd6;

  --brand:   var(--violet);
  --brand-2: var(--indigo);
  --brand-ink:#3b23c9;
  --brand-wash:#f0ecff;

  --pos: #0fa971;
  --neg: #e5385a;
  --warn:#c77700;

  --spectrum: linear-gradient(90deg,#6b4dfb 0%,#3d63ff 18%,#0aa2ef 34%,#16c8d8 48%,#17c98c 62%,#ffa424 78%,#ff6b4a 89%,#f5407e 100%);
  --spectrum-soft: linear-gradient(90deg,#efeaff 0%,#e8efff 20%,#e3f5ff 40%,#e2fbf4 60%,#fff4e0 80%,#ffe9ee 100%);

  /* Elevation */
  --sh-1: 0 1px 2px rgba(12,12,20,.05), 0 1px 1px rgba(12,12,20,.03);
  --sh-2: 0 2px 6px rgba(12,12,20,.05), 0 8px 24px -12px rgba(12,12,20,.14);
  --sh-3: 0 4px 12px rgba(12,12,20,.06), 0 24px 56px -20px rgba(24,16,72,.22);
  --sh-4: 0 8px 20px rgba(12,12,20,.07), 0 48px 96px -32px rgba(24,16,72,.30);
  --sh-brand: 0 10px 30px -10px rgba(107,77,251,.5);

  /* Geometry */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  --gut: clamp(18px, 4.2vw, 56px);
  --maxw: 1320px;

  /* Motion */
  --e-out:   cubic-bezier(.22,1,.36,1);
  --e-inout: cubic-bezier(.65,.02,.24,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s;  --t: .32s;  --t-slow: .6s;

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

html[data-theme="dark"]{
  --paper:#12121b; --bg:#0b0b12; --bg-2:#15151f; --sunk:#1b1b27;
  --line:#242433; --line-strong:#33334a;
  --ink:#f4f4fa; --ink-2:#cfcfe0; --ink-3:#9a9ab8; --ink-4:#6e6e8c;
  --brand-wash:#1d1840;
  --pos:#2fd69a; --neg:#ff6182; --warn:#f0a93a;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
  --sh-3: 0 4px 12px rgba(0,0,0,.4), 0 24px 56px -20px rgba(0,0,0,.7);
  --sh-4: 0 8px 20px rgba(0,0,0,.45), 0 48px 96px -32px rgba(0,0,0,.8);
  --spectrum-soft: linear-gradient(90deg,#221c4a 0%,#1a2450 20%,#12303f 40%,#123a34 60%,#3a2c12 80%,#3d1626 100%);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.55; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
  transition: background-color .5s var(--e-out), color .5s var(--e-out);
}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--brand); color:#fff }

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* ---------- Typography ---------- */
.display{
  font-weight:600; letter-spacing:-.045em; line-height:.92;
  font-size:clamp(2.6rem, 8.2vw, 7.4rem);
}
.h1{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.038em;line-height:1.02}
.h2{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:600;letter-spacing:-.032em;line-height:1.1}
.h3{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.024em;line-height:1.2}
.lede{font-size:clamp(1rem,1.35vw,1.2rem);color:var(--ink-3);line-height:1.62;letter-spacing:-.012em}
.small{font-size:.8125rem;line-height:1.5}
.mono{font-family:var(--mono);font-variant-ligatures:none;letter-spacing:-.02em}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-4);
}
.grad-text{
  background:var(--spectrum); -webkit-background-clip:text; background-clip:text;
  color:transparent; background-size:200% 100%;
  animation: hue-drift 9s ease-in-out infinite alternate;
}
/* Stops at 100% — the image's right edge flush with the box — so the
   gradient never wraps and never shows a seam. */
@keyframes hue-drift{ to{ background-position:100% 0 } }

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1560px}
.wrap-narrow{max-width:940px}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stack{display:flex;flex-direction:column}
.spacer{flex:1}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-bd:var(--line-strong);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-bd), var(--sh-1);
  font-size:.9375rem; font-weight:500; letter-spacing:-.015em;
  white-space:nowrap; isolation:isolate; overflow:hidden;
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out),
              background-color var(--t) var(--e-out), color var(--t) var(--e-out), opacity var(--t);
}
.btn:hover{ transform:translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-2) }
.btn:active{ transform:translateY(0) scale(.985) }
.btn:disabled{ opacity:.45; pointer-events:none }
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:transparent;
  box-shadow: var(--sh-2);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--spectrum); background-size:200% 100%;
  transition:opacity var(--t) var(--e-out);
  animation: hue-drift 6s ease-in-out infinite alternate;
}
.btn-primary:hover::before{ opacity:1 }
.btn-primary:hover{ box-shadow: var(--sh-brand) }

.btn-brand{ --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:transparent; box-shadow:var(--sh-brand) }
.btn-brand:hover{ --btn-bg:var(--brand-ink) }
.btn-ghost{ --btn-bg:transparent; --btn-bd:transparent; box-shadow:none }
.btn-ghost:hover{ --btn-bg:var(--sunk); box-shadow:none }
.btn-sm{ height:36px; padding:0 15px; font-size:.8438rem; gap:7px }
.btn-sm svg{width:15px;height:15px}
.btn-lg{ height:54px; padding:0 30px; font-size:1rem }
.btn-block{ width:100%; }
.btn-icon{ width:38px; height:38px; padding:0; border-radius:var(--r-pill) }
.btn-icon svg{width:17px;height:17px}

/* Arrow nudge */
.btn .arr{ transition: transform var(--t) var(--e-spring) }
.btn:hover .arr{ transform: translate(3px,-3px) }

/* ---------- Surfaces ---------- */
.card{
  background:var(--paper); border-radius:var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.card-pad{ padding:clamp(16px,2vw,26px) }
.card-hover:hover{ transform:translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3) }

.panel{
  background:var(--paper); border-radius:var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}

/* ---------- Chips / pills / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  height:28px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--sunk); color:var(--ink-2);
  font-size:.75rem;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
}
.chip-brand{ background:var(--brand-wash); color:var(--brand-ink) }
.chip-pos{ background:color-mix(in srgb, var(--pos) 13%, transparent); color:var(--pos) }
.chip-neg{ background:color-mix(in srgb, var(--neg) 13%, transparent); color:var(--neg) }
.chip-warn{ background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn) }

.dot{ width:6px;height:6px;border-radius:99px;background:currentColor;flex:none }
.dot-live{ position:relative;background:var(--pos) }
.dot-live::after{
  content:"";position:absolute;inset:-4px;border-radius:99px;
  background:var(--pos);opacity:.35;animation:ping 1.9s var(--e-out) infinite;
}
@keyframes ping{ 0%{transform:scale(.55);opacity:.5} 70%,100%{transform:scale(1.9);opacity:0} }

/* ---------- Form controls ---------- */
.field{
  display:flex;align-items:center;gap:10px;
  height:46px;padding:0 15px;border-radius:var(--r-md);
  background:var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--t) var(--e-out), background-color var(--t);
}
.field:focus-within{ box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px var(--brand-wash) }
.field input,.field select{ width:100%;min-width:0;background:none }
.field input::placeholder{ color:var(--ink-4) }

.select{
  appearance:none; height:40px; padding:0 34px 0 13px; border-radius:var(--r-sm);
  background:var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  font-size:.875rem; font-weight:500; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:15px;
  transition: box-shadow var(--t) var(--e-out);
}
.select:hover{ box-shadow: inset 0 0 0 1px var(--line-strong) }

.switch{
  width:42px;height:24px;border-radius:99px;background:var(--line-strong);
  position:relative;transition:background-color var(--t) var(--e-out);flex:none;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;
  background:#fff;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--e-spring);
}
.switch[aria-checked="true"]{ background:var(--brand) }
.switch[aria-checked="true"]::after{ transform:translateX(18px) }

/* Segmented control */
.seg{
  position:relative; display:inline-flex; padding:4px; gap:2px;
  background:var(--sunk); border-radius:var(--r-pill);
}
.seg-ind{
  position:absolute; top:4px; left:0; height:calc(100% - 8px);
  background:var(--paper); border-radius:var(--r-pill); box-shadow:var(--sh-1);
  transition: transform .42s var(--e-out), width .42s var(--e-out);
  z-index:0;
}
.seg button{
  position:relative; z-index:1; height:32px; padding:0 16px; border-radius:var(--r-pill);
  font-size:.8438rem; font-weight:500; color:var(--ink-3); white-space:nowrap;
  transition:color var(--t) var(--e-out);
}
.seg button[aria-selected="true"]{ color:var(--ink) }

/* ---------- Tooltip ---------- */
.tip{position:relative;cursor:help;border-bottom:1px dotted var(--ink-4)}
.tip::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translate(-50%,4px) scale(.96); transform-origin:bottom center;
  width:max-content; max-width:250px; padding:8px 11px; border-radius:var(--r-sm);
  background:var(--ink); color:var(--paper); font-size:.75rem; line-height:1.45;
  letter-spacing:-.005em; text-align:left;
  opacity:0; pointer-events:none; z-index:60; box-shadow:var(--sh-3);
  transition: opacity .2s var(--e-out), transform .2s var(--e-out);
}
.tip:hover::after{ opacity:1; transform:translate(-50%,0) scale(1) }

/* ---------- Scroll reveal ---------- */
[data-rise]{ opacity:0; transform:translateY(26px); }
[data-rise].in{
  opacity:1; transform:none;
  transition: opacity .8s var(--e-out), transform .9s var(--e-out);
  transition-delay: var(--d, 0ms);
}
[data-fade]{ opacity:0 }
[data-fade].in{ opacity:1; transition:opacity 1s var(--e-out); transition-delay:var(--d,0ms) }
[data-scale]{ opacity:0; transform:scale(.94) }
[data-scale].in{ opacity:1; transform:none; transition: opacity .7s var(--e-out), transform .8s var(--e-spring); transition-delay:var(--d,0ms) }
[data-clip]{ clip-path:inset(0 100% 0 0) }
[data-clip].in{ clip-path:inset(0 0 0 0); transition: clip-path 1.1s var(--e-inout); transition-delay:var(--d,0ms) }

@media (prefers-reduced-motion:reduce){
  [data-rise],[data-fade],[data-scale],[data-clip]{opacity:1!important;transform:none!important;clip-path:none!important}
  .grad-text,.btn-primary::before{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.muted{color:var(--ink-3)} .faint{color:var(--ink-4)}
.hairline{height:1px;background:var(--line);border:0}
.spectrum-rule{height:2px;border-radius:2px;background:var(--spectrum);background-size:200% 100%;animation:hue-drift 7s ease-in-out infinite alternate}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none!important}
@media (max-width:860px){ .hide-md{display:none!important} }
@media (max-width:640px){ .hide-sm{display:none!important} }

/* ---------- Toasts ---------- */
#toasts{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:11px;
  min-width:270px; max-width:370px; padding:13px 15px;
  background:var(--paper); border-radius:var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
  pointer-events:auto; position:relative; overflow:hidden;
  animation: toast-in .5s var(--e-spring) both;
}
.toast.out{ animation: toast-out .35s var(--e-inout) both }
.toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand) }
.toast.ok::before{ background:var(--pos) } .toast.err::before{ background:var(--neg) }
.toast-ico{ width:20px;height:20px;flex:none;margin-top:1px;color:var(--brand) }
.toast.ok .toast-ico{color:var(--pos)} .toast.err .toast-ico{color:var(--neg)}
.toast b{ display:block; font-size:.875rem; font-weight:600; letter-spacing:-.015em }
.toast span{ display:block; font-size:.8125rem; color:var(--ink-3); line-height:1.45 }
@keyframes toast-in{ from{opacity:0;transform:translateX(30px) scale(.94)} to{opacity:1;transform:none} }
@keyframes toast-out{ to{opacity:0;transform:translateX(24px) scale(.96);margin-bottom:-56px} }
@media (max-width:640px){ #toasts{left:14px;right:14px;align-items:stretch} .toast{max-width:none;min-width:0} }

/* ---------- Modal ---------- */
.scrim{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:18px;
  background:color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  animation: fade-in .3s var(--e-out) both;
}
.scrim.out{ animation: fade-out .25s var(--e-out) both }
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{to{opacity:0}}
.modal{
  width:min(440px,100%); background:var(--paper); border-radius:var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-4);
  overflow:hidden; animation: modal-in .5s var(--e-spring) both;
  max-height:90vh; display:flex; flex-direction:column;
}
.modal-lg{ width:min(760px,100%) }
.scrim.out .modal{ animation: modal-out .25s var(--e-inout) both }
@keyframes modal-in{ from{opacity:0;transform:translateY(22px) scale(.96)} to{opacity:1;transform:none} }
@keyframes modal-out{ to{opacity:0;transform:translateY(10px) scale(.98)} }
.modal-head{ display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0 }
.modal-body{ padding:18px 22px 22px; overflow:auto }

/* ---------- Skeleton ---------- */
.sk{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--sunk) 25%,var(--bg-2) 37%,var(--sunk) 63%);
  background-size:400% 100%; animation: sk 1.5s ease-in-out infinite;
}
@keyframes sk{ from{background-position:100% 0} to{background-position:-100% 0} }

/* ---------- Noise + glow decor ---------- */
.noise::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.028; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.5; z-index:0 }

/* ---------- Charts ---------- */
.chart-wrap{ position:relative }
.grid-line{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 4 }
.axis-lbl{ font-family:var(--mono); font-size:10px; fill:var(--ink-4) }
.cross-line{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3 }
.cross-dot{ stroke:var(--paper); stroke-width:2.5 }
.chart-tip{
  position:absolute; pointer-events:none; z-index:5;
  padding:7px 10px; border-radius:var(--r-sm); background:var(--ink); color:var(--paper);
  box-shadow:var(--sh-3); white-space:nowrap;
}
.chart-tip b{ display:block; font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums }
.chart-tip span{ display:block; font-size:.6875rem; opacity:.66; font-family:var(--mono) }
.chart-empty{ display:grid; place-items:center; height:180px; color:var(--ink-4); font-size:.875rem }
.ch-line{ stroke-dasharray:4000; stroke-dashoffset:4000; animation: ch-draw 1.5s var(--e-out) forwards }
@keyframes ch-draw{ to{ stroke-dashoffset:0 } }
.ch-area{ opacity:0; animation: ch-fade .9s var(--e-out) .45s forwards }
@keyframes ch-fade{ to{ opacity:1 } }

/* Ranked bars */
.rank-row{ padding:9px 0; opacity:0; animation: rank-in .6s var(--e-out) forwards; animation-delay:var(--d,0ms) }
@keyframes rank-in{ from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none} }
.rank-head{ display:flex; align-items:center; gap:10px; margin-bottom:7px }
.rank-head .mark{ border-radius:7px; flex:none }
.rank-name{ font-size:.875rem; font-weight:500; letter-spacing:-.015em }
.rank-val{ margin-left:auto; font-size:.8125rem; color:var(--ink-2); font-variant-numeric:tabular-nums }
.rank-track{ height:5px; border-radius:99px; background:var(--sunk); overflow:hidden }
.rank-track i{ display:block; height:100%; width:0; background:var(--c); border-radius:99px; animation: rank-grow 1s var(--e-out) forwards; animation-delay:var(--d,0ms) }
@keyframes rank-grow{ to{ width:var(--w) } }

/* Live value flash: a brief highlight, not a recolour — a big
   headline number turning red every two seconds reads as an error. */
.flash-up,.flash-dn{ animation: fl .85s var(--e-out); border-radius:5px }
.flash-up{ --fl: color-mix(in srgb, var(--pos) 24%, transparent) }
.flash-dn{ --fl: color-mix(in srgb, var(--neg) 24%, transparent) }
@keyframes fl{ 0%{ background-color:var(--fl); box-shadow:0 0 0 3px var(--fl) }
               100%{ background-color:transparent; box-shadow:0 0 0 3px transparent } }