/* Vintage Cockpit — Design System + App Shell
   Canonical tokens from colors_and_type.css + app.css */
@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Mozilla Headline — self-hosted */
@font-face{font-family:'Mozilla Headline';font-weight:200;src:url('/static/fonts/MozillaHeadline-ExtraLight.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Mozilla Headline';font-weight:300;src:url('/static/fonts/MozillaHeadline-Light.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Mozilla Headline';font-weight:400;src:url('/static/fonts/MozillaHeadline-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Mozilla Headline';font-weight:500;src:url('/static/fonts/MozillaHeadline-Medium.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Mozilla Headline';font-weight:600;src:url('/static/fonts/MozillaHeadline-SemiBold.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Mozilla Headline';font-weight:700;src:url('/static/fonts/MozillaHeadline-Bold.ttf') format('truetype');font-display:swap}

:root{
  --vtg-base:#1F2747;--vtg-dark:#1F2937;
  --vtg-ink:#0B1027;--vtg-ink-2:#141A36;--vtg-ink-3:#1B2345;
  --vtg-bg:#F5F7FB;--vtg-bg2:#FFFFFF;--vtg-bg3:#EBEFF7;
  --vtg-rule:#E8ECF4;--vtg-rule-strong:#D2D8E6;
  --vtg-text:#1F2747;--vtg-text2:#5C6582;--vtg-text3:#9098B4;
  --vtg-t1:#16A34A;--vtg-t1-bg:rgba(22,163,74,.08);
  --vtg-t2:#D97706;--vtg-t2-bg:rgba(217,119,6,.08);
  --vtg-t3:#DC2626;--vtg-t3-bg:rgba(220,38,38,.06);
  --vtg-accent-bg:rgba(31,39,71,0.06);
  --vtg-note-bg:#FFFBEB;--vtg-note-border:#FDE68A;
  --vtg-font:'Inter',system-ui,-apple-system,sans-serif;
  --vtg-serif:'Hedvig Letters Serif',Georgia,serif;
  --vtg-brand:'Mozilla Headline','Inter',system-ui,sans-serif;
  --vtg-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --vtg-ease:cubic-bezier(.2,.8,.2,1);
  --motion-scale:1;
}
html,body,#root{margin:0;padding:0;height:100%;font-family:var(--vtg-font);color:var(--vtg-text);background:var(--vtg-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
button,input,textarea,select{font-family:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;padding:0}
a{color:inherit}
::selection{background:rgba(31,39,71,0.14)}

/* App shell */
.app-shell{position:fixed;inset:0;display:grid;grid-template-columns:64px 1fr;grid-template-rows:48px 1fr;background:var(--vtg-bg);overflow:hidden}
.topbar{grid-column:1/-1;height:48px;display:flex;align-items:center;padding:0 16px;background:var(--vtg-ink);color:#fff;border-bottom:1px solid rgba(255,255,255,0.06);z-index:20;font-size:12px}
.topbar-brand{display:flex;align-items:center;gap:10px;width:48px;margin-right:12px}
.topbar-brand img{width:22px;height:22px}
.topbar-ctx{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.6);font-family:var(--vtg-mono);font-size:11px;letter-spacing:0.04em}
.topbar-ctx .slash{color:rgba(255,255,255,0.25)}
.topbar-ctx .here{color:#fff}
.topbar-spacer{flex:1}
.topbar-right{display:flex;align-items:center;gap:14px;font-family:var(--vtg-mono);font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.04em}
.topbar-right .dot{width:6px;height:6px;border-radius:50%;background:#16A34A;box-shadow:0 0 8px rgba(22,163,74,0.6);animation:vtg-pulse 2.4s ease-in-out infinite}
.topbar-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3D4770,#141A36);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;letter-spacing:0.05em;cursor:pointer}

.rail{grid-row:2;background:var(--vtg-ink-2);border-right:1px solid rgba(255,255,255,0.04);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;z-index:10}
.rail-btn{width:40px;height:40px;border-radius:8px;color:rgba(255,255,255,0.45);display:flex;align-items:center;justify-content:center;transition:all calc(180ms * var(--motion-scale)) var(--vtg-ease);position:relative}
.rail-btn:hover{color:#fff;background:rgba(255,255,255,0.05)}
.rail-btn.active{color:#fff;background:rgba(255,255,255,0.08)}
.rail-btn.active::before{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:2px;background:#fff;border-radius:0 2px 2px 0}
.rail-spacer{flex:1}
.rail-sep{width:24px;height:1px;background:rgba(255,255,255,0.08);margin:6px 0}

.stage{grid-column:2;grid-row:2;overflow:hidden;position:relative}
.scene{position:absolute;inset:0;overflow:auto}
.scene-enter{animation:scene-in calc(320ms * var(--motion-scale)) var(--vtg-ease) both}
@keyframes scene-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;font-size:13px;font-weight:500;border:1px solid var(--vtg-rule);border-radius:8px;background:#fff;color:var(--vtg-text);transition:all calc(180ms * var(--motion-scale)) var(--vtg-ease);white-space:nowrap}
.btn:hover{border-color:var(--vtg-rule-strong);box-shadow:0 1px 2px rgba(11,16,39,0.04);transform:translateY(-0.5px)}
.btn:active{transform:translateY(0) scale(0.99)}
.btn-primary{background:var(--vtg-ink);color:#fff;border-color:var(--vtg-ink);font-weight:600}
.btn-primary:hover{background:var(--vtg-ink-3);border-color:var(--vtg-ink-3);box-shadow:0 2px 8px rgba(11,16,39,0.2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--vtg-text2)}
.btn-ghost:hover{background:var(--vtg-accent-bg);color:var(--vtg-text);border-color:transparent;box-shadow:none;transform:none}
.btn-lg{height:44px;padding:0 22px;font-size:14px}

/* Inputs */
.inp{width:100%;height:40px;padding:0 12px;border:1px solid var(--vtg-rule);border-radius:8px;background:#fff;color:var(--vtg-text);font-size:14px;outline:none;transition:all calc(180ms * var(--motion-scale)) var(--vtg-ease)}
.inp:focus{border-color:var(--vtg-base);box-shadow:0 0 0 3px rgba(31,39,71,0.08)}
.inp::placeholder{color:var(--vtg-text3)}
.inp.changed{border-color:var(--vtg-base);background:rgba(31,39,71,0.03)}

/* Cards */
.card{background:#fff;border:1px solid var(--vtg-rule);border-radius:12px;transition:all calc(220ms * var(--motion-scale)) var(--vtg-ease)}
.card-hover:hover{border-color:var(--vtg-rule-strong);box-shadow:0 8px 24px -12px rgba(11,16,39,0.12),0 2px 6px rgba(11,16,39,0.04);transform:translateY(-2px)}

/* Tier chips */
.tier{display:inline-flex;align-items:center;gap:4px;font-family:var(--vtg-mono);font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
.tier::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.tier-1{background:var(--vtg-t1-bg);color:var(--vtg-t1)}
.tier-2{background:var(--vtg-t2-bg);color:var(--vtg-t2)}
.tier-3{background:var(--vtg-t3-bg);color:var(--vtg-t3)}

/* Type helpers */
.mono{font-family:var(--vtg-mono);font-variant-numeric:tabular-nums;letter-spacing:0.01em}
.serif{font-family:var(--vtg-serif)}
.eyebrow{font-family:var(--vtg-mono);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--vtg-text3)}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;font-family:var(--vtg-mono);font-size:10px;font-weight:500;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:4px;color:rgba(255,255,255,0.7)}

/* Animations */
@keyframes vtg-spin{to{transform:rotate(360deg)}}
@keyframes vtg-fade-in{from{opacity:0}to{opacity:1}}
@keyframes vtg-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes vtg-pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.stagger>*{opacity:0;animation:vtg-slide-up 420ms var(--vtg-ease) forwards}
.stagger>*:nth-child(1){animation-delay:40ms}
.stagger>*:nth-child(2){animation-delay:100ms}
.stagger>*:nth-child(3){animation-delay:160ms}
.stagger>*:nth-child(4){animation-delay:220ms}
.stagger>*:nth-child(5){animation-delay:280ms}
.stagger>*:nth-child(6){animation-delay:340ms}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(11,16,39,0.12);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(11,16,39,0.22);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* Focus ring */
button:focus-visible,a:focus-visible{outline:2px solid var(--vtg-base);outline-offset:2px;border-radius:6px}

@media(prefers-reduced-motion:reduce){:root{--motion-scale:0}}