/* Quantum Spirit Suite, shared stylesheet v2 (instrument-grade language).
   Same class + variable NAMES as qsa.css so it drops into existing markup,
   but the look is rebuilt: flat graphite surfaces, hairline rules, a monospace
   machine layer, Archivo display, orange as a surgical accent. No dot grid,
   no ambient glow, no glassmorphism, no animated rainbow, no staggered rise.
   Preview scope: home.html + engines/finance/run.html. */

:root{
  --bg:#08080A; --black:#000; --panel:#0E0E11; --panel-2:#141418;
  --orange:#FF6B35; --orange-lt:#FF9500; --red:#FF4500; --pink:#FF5C7A; --pink2:#FF2D87; --purple:#B24BF3; --purple-dk:#7C3AED; --cyan:#00D4FF;
  --amber:#F5A623; --green:#37C46F;
  --white:#F4F3F0; --g1:#D6D5D0; --g2:#A4A39E; --g3:#77766F; --g4:#54534D;
  /* solid surfaces, hairline borders: the instrument look */
  --card:#0E0E11; --card-2:#141418; --cbd:rgba(255,255,255,.08); --cbd-2:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.07);
  --grad:linear-gradient(135deg,#FF6B35,#FF4500,#FF2D55);   /* kept for back-compat only, not used for text */
  --grad-op:linear-gradient(90deg,#FF6B35,#B24BF3);
  --disp:"Archivo",-apple-system,sans-serif; --body:"DM Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); background:var(--bg); color:var(--g2); min-height:100vh;
  -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
}
/* blueprint surface: an ultra-faint engineering grid, no glow. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:64px 64px;
}
/* a single, still top-light for depth; nothing colored, nothing animated. */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 46% at 50% -12%,rgba(255,255,255,.035) 0%,transparent 62%);
}

/* static instrument rule: one hairline, a short orange lead segment. no animation. */
.toprule{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:5;
  background:linear-gradient(90deg,var(--orange) 0 96px,var(--cbd) 96px);
}

/* crest: monospace wordmark, flat mark, no glow */
.crest{ display:flex; align-items:center; gap:13px; }
.crest svg{ width:26px; height:26px; filter:none; flex:0 0 auto; }
.crest svg g{ stroke:var(--orange); }
.crest .nm{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--white); }

/* entrance: one quick uniform fade, no transform, NO stagger */
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.rise{ animation:fadein .45s ease forwards; }

/* small monospace kicker + doctrine, the through-line of the whole suite */
.kicker{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--orange); }
.doctrine{ font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--g3); }

/* readout: a mono status line, right of the masthead */
.readout{ display:flex; gap:22px; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--g4); }
.readout b{ color:var(--g2); font-weight:500; }
.readout .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:7px; box-shadow:0 0 0 3px rgba(55,196,111,.14); vertical-align:middle; }

/* ============ GATE (index.html) — kept close to v1, restyled flat ============ */
.gate-wrap{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; }
.gate-crest{ justify-content:center; margin-bottom:38px; }
.gate-card{ width:100%; max-width:420px; background:var(--panel); border:1px solid var(--cbd); border-radius:4px; padding:44px 38px 36px; }
.gate-title{ font-family:var(--disp); font-size:26px; font-weight:700; letter-spacing:-.4px; color:var(--white); width:fit-content; margin:0 auto 10px; }
.gate-sub{ font-family:var(--mono); font-size:12px; color:var(--g4); letter-spacing:.03em; line-height:1.6; margin-bottom:30px; }
.gate-form{ display:flex; flex-direction:column; gap:14px; }
.gate-form input[type="password"]{ width:100%; background:#0A0A0C; border:1px solid var(--cbd-2); border-radius:4px; padding:14px 16px; font-family:var(--mono); font-size:14px; color:var(--white); letter-spacing:.08em; outline:none; transition:border-color .2s; }
.gate-form input[type="password"]:focus{ border-color:var(--orange); }
.gate-form input[type="password"]::placeholder{ color:var(--g4); }
.gate-btn{ width:100%; border:none; border-radius:4px; padding:14px 16px; cursor:pointer; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--black); background:var(--orange); transition:filter .2s; }
.gate-btn:hover{ filter:brightness(1.08); }
.gate-error{ font-family:var(--mono); font-size:11px; color:var(--pink); letter-spacing:.03em; min-height:16px; margin-top:2px; }
.gate-error.show{ animation:shake .32s linear; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.gate-foot{ margin-top:32px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--g4); }

/* ============ HOME (home.html) ============ */
.wrap{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:34px 40px 72px; }

.hd{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:58px; padding-bottom:22px; border-bottom:1px solid var(--hair); }
.chip{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--g3); background:transparent; border:1px solid var(--cbd); border-radius:3px; padding:7px 13px; white-space:nowrap; }

.hero{ margin-bottom:62px; }
.hero .kicker{ display:block; margin-bottom:20px; }
.hero h1{ font-family:var(--disp); font-size:46px; font-weight:700; line-height:1.06; letter-spacing:-1.4px; color:var(--white); max-width:840px; }
.hero h1 .thin{ font-weight:300; color:var(--g2); }
.hero .doctrine{ margin-top:22px; padding-left:16px; border-left:2px solid var(--orange); }

.sec{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--g3); margin:0 0 20px; display:flex; align-items:center; gap:16px; }
.sec .ix{ color:var(--orange); }
.sec::after{ content:""; flex:1; height:1px; background:var(--hair); }

/* engine index: flat hairline cards, mono meta, index number, restrained hover */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:5px; overflow:hidden; margin-bottom:56px; }
.tile{ position:relative; background:var(--panel); padding:24px 22px 20px; display:flex; flex-direction:column; min-height:194px; transition:background .2s; }
.tile-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:13px; }
.tile h3{ font-family:var(--disp); font-size:19px; font-weight:600; letter-spacing:-.2px; color:var(--white); }
.tile p{ font-size:13px; line-height:1.62; color:var(--g2); flex:1; }
.tile-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--g4); margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); }
.tile-idx{ position:absolute; top:22px; right:22px; font-family:var(--mono); font-size:10px; color:var(--g4); letter-spacing:.1em; }
.status{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:3px; white-space:nowrap; }
.status.live{ color:var(--orange); background:transparent; border:1px solid rgba(255,107,53,.42); }
.status.live::before{ content:"● "; }
.status.dev{ color:var(--amber); background:transparent; border:1px solid rgba(245,166,35,.32); }
.status.prod{ color:var(--green); background:transparent; border:1px solid rgba(55,196,111,.4); }
.status.prod::before{ content:"● "; }

.tile.live{ cursor:pointer; text-decoration:none; }
.tile.live::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--orange); opacity:0; transition:opacity .2s; }
.tile.live:hover{ background:var(--panel-2); }
.tile.live:hover::before{ opacity:1; }
.tile.live:hover .tile-idx{ color:var(--orange); }
.tile.dev{ opacity:.5; cursor:default; }
.tile.tile-slot{ justify-content:center; background:transparent; }
.tile.tile-slot p{ font-family:var(--mono); font-size:11px; line-height:1.75; color:var(--g4); letter-spacing:.02em; flex:0 0 auto; }

.tile.prod{ cursor:pointer; text-decoration:none; }
.tile.prod::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--green); opacity:0; transition:opacity .2s; }
.tile.prod:hover{ background:var(--panel-2); }
.tile.prod:hover::before{ opacity:1; }

.sec-note{ font-family:var(--mono); font-size:12px; color:var(--g3); line-height:1.6; margin:-6px 0 22px; max-width:660px; }
.tiles-prod{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:5px; overflow:hidden; margin-bottom:56px; }
.tiles-prod .tile{ min-height:150px; }

/* provenance core: the named doctrine, rendered as a spec block */
.core{ border:1px solid var(--cbd); border-radius:5px; padding:0; margin-bottom:56px; overflow:hidden; }
.core-hd{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--white); padding:15px 22px; border-bottom:1px solid var(--hair); background:var(--panel); display:flex; align-items:center; gap:10px; }
.core-hd .tm{ color:var(--orange); }
.core-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.core-cell{ padding:18px 22px; border-right:1px solid var(--hair); }
.core-cell:last-child{ border-right:none; }
.core-cell b{ display:block; font-family:var(--disp); font-size:14px; font-weight:600; color:var(--g1); margin-bottom:5px; }
.core-cell span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--g4); line-height:1.5; }

.instance{ border:1px solid var(--cbd); border-radius:5px; padding:26px 24px; margin-bottom:58px; background:var(--panel); }
.instance h4{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--white); text-transform:uppercase; margin-bottom:16px; }
.instance ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.instance li{ font-size:13px; color:var(--g2); line-height:1.5; padding-left:18px; position:relative; }
.instance li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--orange); }

.foot{ border-top:1px solid var(--hair); padding-top:22px; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--g4); }

@media(max-width:960px){
  .tiles{ grid-template-columns:1fr 1fr; }
  .core-grid{ grid-template-columns:1fr 1fr; }
  .core-cell:nth-child(2){ border-right:none; }
  .core-cell:nth-child(1),.core-cell:nth-child(2){ border-bottom:1px solid var(--hair); }
  .hero h1{ font-size:38px; }
}
@media(max-width:640px){
  .wrap{ padding:26px 20px 52px; }
  .tiles{ grid-template-columns:1fr; }
  .tiles-prod{ grid-template-columns:1fr; }
  .core-grid{ grid-template-columns:1fr; }
  .core-cell{ border-right:none; border-bottom:1px solid var(--hair); }
  .core-cell:last-child{ border-bottom:none; }
  .hd{ flex-direction:column; align-items:flex-start; gap:16px; }
  .hero h1{ font-size:30px; letter-spacing:-1px; }
  .readout{ flex-wrap:wrap; gap:12px 20px; }
}