/* RunViet Tools — design system
   navy ink + amber accent · Bricolage Grotesque / Instrument Sans / JetBrains Mono */

:root{
  /* neutrals tinted toward the navy brand hue (h≈262) */
  --bg:        oklch(98.2% 0.004 262);
  --bg-2:      oklch(96.4% 0.006 262);
  --panel:     oklch(99.4% 0.002 262);
  --line:      oklch(91%   0.008 262);
  --line-2:    oklch(86%   0.012 262);
  --ink:       oklch(24%   0.03  262);   /* #1f2433-ish */
  --ink-2:     oklch(38%   0.025 262);
  --mute:      oklch(52%   0.02  262);
  --dim:       oklch(66%   0.015 262);

  /* brand amber */
  --amber:     oklch(80%  0.17 84);      /* #f5b400-ish */
  --amber-2:   oklch(72%  0.17 80);
  --amber-ink: oklch(42%  0.12 78);      /* text-safe amber */
  --amber-bg:  oklch(96%  0.05 88);

  /* status */
  --ok:        oklch(58% 0.15 155);
  --ok-bg:     oklch(95% 0.04 155);
  --warn:      oklch(62% 0.16 62);
  --warn-bg:   oklch(95% 0.05 70);
  --bad:       oklch(56% 0.19 27);
  --bad-bg:    oklch(95% 0.04 27);
  --info:      oklch(55% 0.13 245);

  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --shadow-1: 0 1px 2px oklch(24% 0.03 262 / .06), 0 1px 3px oklch(24% 0.03 262 / .04);
  --shadow-2: 0 4px 14px oklch(24% 0.03 262 / .08), 0 1px 3px oklch(24% 0.03 262 / .05);
  --shadow-3: 0 18px 40px oklch(24% 0.03 262 / .12), 0 4px 10px oklch(24% 0.03 262 / .06);

  --f-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-ui:      "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);   /* expo-ish */
  --t-fast: 140ms; --t-med: 260ms; --t-slow: 520ms;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:     oklch(17% 0.015 262); --bg-2: oklch(20% 0.016 262); --panel: oklch(22% 0.018 262);
    --line:   oklch(29% 0.018 262); --line-2: oklch(35% 0.02 262);
    --ink:    oklch(94% 0.008 262); --ink-2: oklch(84% 0.01 262);
    --mute:   oklch(66% 0.015 262); --dim: oklch(52% 0.015 262);
    --amber-ink: oklch(82% 0.15 84); --amber-bg: oklch(30% 0.06 84);
    --ok-bg: oklch(28% 0.05 155); --warn-bg: oklch(30% 0.06 70); --bad-bg: oklch(30% 0.06 27);
    --shadow-1: 0 1px 2px oklch(0% 0 0 / .4); --shadow-2: 0 4px 14px oklch(0% 0 0 / .45);
    --shadow-3: 0 18px 40px oklch(0% 0 0 / .55);
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-ui);font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--f-mono);font-feature-settings:"zero"}
.display{font-family:var(--f-display);font-variation-settings:"opsz" 96,"wdth" 100}
.tabnum{font-variant-numeric:tabular-nums}

/* ── the trajectory motif ── */
.traj{position:absolute;pointer-events:none;overflow:visible}
.traj path{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s var(--ease-out) .15s forwards}
.traj .tip{fill:var(--amber);opacity:0;animation:pop .4s var(--ease-out) 1.35s forwards;transform-origin:center}
.traj .spark{fill:var(--amber);opacity:0;animation:pop .5s var(--ease-out) 1.55s forwards;transform-origin:center}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ── stagger reveal ── */
.rv{opacity:0;transform:translateY(10px);animation:rv var(--t-slow) var(--ease-out) forwards}
.rv:nth-child(1){animation-delay:.05s}.rv:nth-child(2){animation-delay:.11s}.rv:nth-child(3){animation-delay:.17s}
.rv:nth-child(4){animation-delay:.23s}.rv:nth-child(5){animation-delay:.29s}.rv:nth-child(6){animation-delay:.35s}
.rv:nth-child(7){animation-delay:.41s}.rv:nth-child(8){animation-delay:.47s}
@keyframes rv{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .rv{animation:none;opacity:1;transform:none}
  .traj path{animation:none;stroke-dashoffset:0}.traj .tip,.traj .spark{animation:none;opacity:1}
  *{transition-duration:0s!important}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line-2);
  border-radius:var(--r-s);background:var(--panel);color:var(--ink);font-weight:500;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.btn:hover:not(:disabled){border-color:var(--dim);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.42;cursor:default}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-primary:hover:not(:disabled){background:var(--ink-2);border-color:var(--ink-2)}
.btn-accent{background:var(--amber);color:oklch(20% 0.03 262);border-color:var(--amber);font-weight:600}
.btn-accent:hover:not(:disabled){background:var(--amber-2);border-color:var(--amber-2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--mute)}
.btn-ghost:hover:not(:disabled){background:var(--bg-2);color:var(--ink);box-shadow:none;transform:none;border-color:transparent}
.btn-sm{padding:4px 10px;font-size:12.5px;border-radius:6px}
.btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ── inputs ── */
.input,select.input,textarea.input{width:100%;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--panel);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input:focus{outline:none;border-color:var(--amber-2);box-shadow:0 0 0 3px oklch(80% 0.17 84 / .28)}
label.lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}

/* ── chips / status ── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--mute);border:1px solid var(--line)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.chip.live{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chip.live::before{animation:pulse 1.8s ease-in-out infinite}
.chip.amber{background:var(--amber-bg);color:var(--amber-ink);border-color:transparent}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.chip.plain::before{display:none}
@keyframes pulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.sev{font-family:var(--f-mono);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;letter-spacing:.02em}
.sev3{background:var(--bad-bg);color:var(--bad)}.sev2{background:var(--warn-bg);color:var(--warn)}.sev1{background:var(--bg-2);color:var(--info)}

/* ── surfaces ── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)}
.hr{height:1px;background:var(--line);border:0}

/* ── icon helper ── */
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ── toast ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,10px);background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:10px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;z-index:200;
  box-shadow:var(--shadow-3);transition:opacity var(--t-med),transform var(--t-med) var(--ease-out);display:flex;gap:8px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:15px;height:15px;stroke:var(--amber);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── top bar ── */
.topbar{display:flex;align-items:center;gap:10px;padding:0 clamp(12px,3vw,28px);height:54px;min-width:0;overflow:hidden;
  background:oklch(from var(--panel) l c h / .85);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;flex:0 0 auto}
.brand .mark{width:26px;height:26px}
.brand .sep{color:var(--dim);font-weight:400;margin:0 2px}
.brand .sub{font-family:var(--f-ui);font-weight:500;color:var(--mute);font-size:13.5px}
@media(max-width:640px){.brand .sub,.brand .sep:has(+ .sub){display:none}}