/* ============================================================================
   sigma.css — Americana Crypto "terminal" design system for the SIGMA app.
   Source of truth: projects/website/index.html <style> block.
   VISUAL ONLY. No layout/ID/DOM assumptions here that scripts depend on.
   ============================================================================ */

:root{
  --red:#E34343; --red-bright:#ff5555; --red-dark:#c22e2e;
  --red-dim:rgba(227,67,67,.55); --red-glow:rgba(227,67,67,.4);

  --abyss:#050507; --carbon:#0a0a0c; --surface:#101012;
  --card:#0d0d10; --card-hi:#141418;

  --border:#3d3a39; --border-hi:#5a5250; --border-red:rgba(227,67,67,.4);

  --snow:#f2f2f2; --parchment:#b8b3b0; --steel:#8b949e; --dim:#55504e; --void:#2a2826;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --body:'Inter',-apple-system,system-ui,sans-serif;

  /* ── Re-map legacy SIGMA palette vars onto the Americana tokens so existing
        page rules "just work" in the new aesthetic. Data-semantic colors
        (green/blue/amber) stay intact — those carry meaning, not chrome. ── */
  --bg:#050507;                 /* was #0d1117  -> abyss  */
  --panel:#0d0d10;              /* was #161b22  -> card   */
  --grid:#3d3a39;               /* was #21262d  -> warm border */
  --text:#b8b3b0;              /* was #c9d1d9  -> parchment */
  --mut:#8b949e;               /* steel (unchanged) */

  --green:#00C853; --green2:#7ee787; --blue:#58a6ff; --amber:#e3b341;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--abyss);
  color:var(--parchment);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Background atmosphere (copied verbatim from the website) ─────────────── */
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}

.bg-glow{
  background:
    radial-gradient(ellipse 75% 55% at 50% -5%, rgba(227,67,67,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 45%, rgba(227,67,67,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 15% 95%, rgba(227,67,67,0.06) 0%, transparent 65%);
}

.bg-grid{
  background-image:
    linear-gradient(to right, rgba(61,58,57,0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61,58,57,0.25) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
  opacity:0.7;
}

.bg-noise{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.5;
  mix-blend-mode:overlay;
}

.bg-scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(227,67,67,0.015) 0px,
    rgba(227,67,67,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:screen;
}

.bg-flicker{
  background:rgba(227,67,67,0.01);
  animation:crt-flicker 7s infinite;
}

@keyframes crt-flicker{
  0%,98%{opacity:0}
  98.5%{opacity:0.8}
  99%{opacity:0}
  99.5%{opacity:0.5}
  100%{opacity:0}
}

/* lift real content above the background layers */
header, main, nav, footer, .chips{position:relative;z-index:2}

/* ── Nav / header (terminal chrome) ──────────────────────────────────────── */
header{
  display:flex;align-items:center;gap:20px;
  padding:14px 28px;
  border-bottom:1px solid var(--border);
  background:rgba(5,5,7,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:100;
}

.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--snow);
}
.brand b{color:var(--red);text-shadow:0 0 18px var(--red-glow);font-weight:800}

/* pulsing red live dot injected before the brand text */
.brand::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px var(--red),0 0 2px var(--red);
  animation:sig-pulse 1.6s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes sig-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

.tag{
  /* F27: the header subtitle carries real information (what the page does) —
     steel (>=4.5:1 on the abyss); --dim stays for decorative chrome only */
  color:var(--steel);
  font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;
}

/* nav links — mono, uppercase, //-prefixed like the website */
nav{display:flex;gap:22px;align-items:center}
header nav{margin-left:auto}
nav a{
  color:var(--steel);
  text-decoration:none;
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;
  padding:0;border-radius:0;background:none;border:0;
  position:relative;transition:color .15s;
}
nav a::before{content:'//';color:var(--dim);margin-right:6px}
nav a:hover{color:var(--snow)}
nav a.on{color:var(--snow);background:none;border:0}
nav a.on::before{color:var(--red)}

/* search box — mono input + red bracketed primary button */
.search{margin-left:auto;display:flex;gap:8px}
.search input{
  background:var(--card);border:1px solid var(--border-hi);color:var(--snow);
  font-family:var(--mono);font-size:13px;
  padding:9px 12px;border-radius:0;width:200px;text-transform:uppercase;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.search input:focus{border-color:var(--red);box-shadow:0 0 16px rgba(227,67,67,.15)}
.search input::placeholder{color:var(--dim)}
.search button{
  background:var(--red);border:1px solid var(--red-bright);color:var(--snow);
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  padding:9px 16px;border-radius:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background .15s,box-shadow .15s;
}
.search button:hover{background:var(--red-bright);box-shadow:0 0 20px var(--red-glow)}

/* ── Chips (ticker quick-picks) ──────────────────────────────────────────── */
.chips .chip, .chip{
  background:var(--card);border:1px solid var(--border);color:var(--steel);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  border-radius:0;padding:4px 12px;cursor:pointer;text-transform:uppercase;
  transition:color .15s,border-color .15s;
}
.chip:hover{color:var(--red);border-color:var(--red)}

/* ── Panels / cards → terminal cards ─────────────────────────────────────── */
.panel,.tfcard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
}
.panel:hover{border-color:var(--border-hi)}

/* ── Headings / labels ───────────────────────────────────────────────────── */
h1{
  font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--snow);font-weight:700;
}
.projttl{
  font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--snow);font-weight:700;
}
.plabel{
  font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--snow);font-weight:700;
}

/* ── HYPOTHETICAL chip → mono / warm ─────────────────────────────────────── */
.hyp{
  display:inline-block;
  background:rgba(227,179,65,.08);
  border:1px solid rgba(227,179,65,.4);
  color:var(--amber);
  font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.1em;
  padding:3px 8px;border-radius:0;margin-left:10px;
  vertical-align:middle;text-transform:uppercase;
}

/* ── Footer disclaimer → mono / dim ──────────────────────────────────────── */
footer.disc{
  /* owner ruling: compliance-weight text must READ — sentence case, 12px,
     steel (>=4.5:1 on the abyss), still mono so it stays terminal chrome */
  color:var(--steel);
  font-family:var(--mono);
  font-size:12px;line-height:1.65;letter-spacing:.02em;
  border-top:1px solid var(--border);
}

/* expert-panel a11y bundle */
:focus-visible{outline:2px solid #ff5555;outline-offset:2px}
table{font-variant-numeric:tabular-nums}

/* ── Generic inputs / range accents (portfolio composer, sizer) ──────────── */
input[type=range]{accent-color:var(--red)}


/* ── mobile pass (owner GO 2026-08-06): the shared header was forcing every page wide
   (8 nav links in one row = 641px -> 833px+ documents on a 390px phone). On small screens
   the nav becomes one horizontally-scrollable row and the header wraps. Desktop untouched. ── */
@media (max-width: 700px) {
  header{flex-wrap:wrap;gap:6px 12px;padding:10px 14px}
  header .brand{font-size:15px}
  header .tag{font-size:10.5px;line-height:1.4}
  header nav{width:100%;margin-left:0;display:flex;gap:14px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;white-space:nowrap}
  header nav::-webkit-scrollbar{display:none}
  header nav a{flex:0 0 auto}
}