/* TNFund // Trading desk — the trading world. Layers over batcave.css (shared components),
   re-skinned to TNFund: near-black, lime accent, Inter 900 headlines, JetBrains Mono data. */
:root {
  --void: #000008;
  --cave: #07070e;
  --plate: #0c0c14;
  --plate-2: #11111b;
  --plate-3: #181824;
  --edge: rgba(255, 255, 255, 0.06);
  --edge-2: rgba(255, 255, 255, 0.12);
  --ink: #f0f0f5;
  --ink-2: #8b8b9e;
  --muted: #55556a;
  --hud: #22d3ee;                 /* info, data lines */
  --hud-dim: rgba(34, 211, 238, 0.12);
  --signal: #c8ff00;              /* lime: goals, selection, actions */
  --signal-glow: rgba(200, 255, 0, 0.28);
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.12);
  --boot: rgba(34, 197, 94, 0.45);

  --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --r-md: 8px;
  --r-lg: 10px;
}
@property --iris { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }

body.trade {
  background:
    radial-gradient(70% 40% at 50% -5%, rgba(34, 197, 94, 0.07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 48px 100%,
    var(--void);
  background-attachment: fixed;
}
body.trade :focus-visible { outline-color: var(--signal); }

/* =================== ENTRY =================== */
.entry { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--void); cursor: pointer; user-select: none; overflow: hidden; outline: none; }
.entry-scan { position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 4px); }
.entry-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(34, 197, 94, 0.07), transparent 70%); }
.entry.s1 .entry-glow { opacity: 1; }

.entry-bar { position: absolute; left: 0; right: 0; height: 0; z-index: 6; display: flex; align-items: center; overflow: hidden;
  background: var(--void); transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 40px;
  font: 400 0.56rem var(--font-mono); letter-spacing: 0.2em; color: rgba(34, 197, 94, 0.4); }
.entry-bar.top { top: 0; justify-content: space-between; }
.entry-bar.bottom { bottom: 0; justify-content: center; }
.entry.s1 .entry-bar { height: 80px; }
.entry.s1 .entry-bar.top { border-bottom: 1px solid rgba(34, 197, 94, 0.12); }
.entry.s1 .entry-bar.bottom { border-top: 1px solid rgba(34, 197, 94, 0.12); }
.entry-bar.top span { opacity: 0; transition: opacity 0.5s ease 0.3s; }
.entry.s2 .entry-bar.top span { opacity: 1; }
.entry-cta { display: inline-flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.5s ease;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.entry-cta i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: dot-blink 1.1s ease-in-out infinite; }
.entry.s3 .entry-cta { opacity: 1; animation: breathe 2.2s ease-in-out infinite; }

.entry-center { position: relative; z-index: 7; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.entry-welcome { margin: 0 0 10px; font: 300 clamp(0.7rem, 2vw, 0.95rem) var(--font-ui); letter-spacing: 0.7em; padding-left: 0.7em;
  text-transform: uppercase; color: rgba(34, 197, 94, 0.7); opacity: 0; transform: translateY(-10px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s; }
.entry-trader { position: relative; margin: 0; font: 900 clamp(4rem, 11vw, 8rem)/1 var(--font-ui); letter-spacing: -0.04em; color: var(--ink);
  opacity: 0; transform: translateY(16px) scale(0.97);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.entry-trader span { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.entry-trader .g1 { color: #22d3ee; }
.entry-trader .g2 { color: #ef4444; }
.entry-rule { width: 0; height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, rgba(200, 255, 0, 0.6), transparent);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s; }
.entry-brand { margin: 0; font: 900 clamp(1.1rem, 2.5vw, 1.6rem) var(--font-ui); letter-spacing: -0.02em; color: rgba(240, 240, 245, 0.5);
  opacity: 0; transform: translateY(10px); transition: opacity 0.7s ease 0.5s, transform 0.7s ease 0.5s; }
.entry-brand b { color: var(--signal); font-weight: 900; }
.entry-tag { margin: 12px 0 0; font: 400 0.65rem var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(139, 139, 158, 0.6); opacity: 0; transition: opacity 0.6s ease; }

.entry.s2 .entry-welcome, .entry.s2 .entry-brand { opacity: 1; transform: none; }
.entry.s2 .entry-trader { opacity: 1; transform: none; }
.entry.s2 .entry-rule { width: 180px; }
.entry.s3 .entry-tag { opacity: 1; }
.entry.s3 .entry-trader { animation: glitch-main 5s ease-in-out infinite; }
.entry.s3 .entry-trader .g1 { animation: glitch-a 5s ease-in-out infinite; }
.entry.s3 .entry-trader .g2 { animation: glitch-b 5s ease-in-out infinite; }

/* access code, shown in place of the tagline when not signed in */
.entry-gate { margin-top: 26px; cursor: default; animation: rise 500ms var(--ease); }
.entry.gating .entry-tag { display: none; }
.entry-prompt { margin: 0 0 12px; font: 600 0.62rem var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); }
.entry-foot { margin: 14px 0 0; font: 400 0.6rem var(--font-mono); letter-spacing: 0.16em; color: var(--muted); }
body.trade .code-cells input { width: 44px; height: 54px; background: rgba(12, 12, 20, 0.9); color: var(--ink); font: 700 1.5rem var(--font-mono);
  border-radius: 6px; box-shadow: inset 0 0 0 1px var(--edge-2); caret-color: var(--signal); }
body.trade .code-cells input:focus { box-shadow: inset 0 0 0 1px var(--signal), 0 0 22px -6px var(--signal-glow); }

/* iris opens from the centre to reveal the desk */
.entry.leaving { animation: iris 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px)); }
@keyframes iris { to { --iris: 150%; } }

@keyframes glitch-main { 0%, 88%, 100% { transform: none; } 89% { transform: translate(-2px, 0) skew(-0.4deg); }
  90% { transform: translate(2px, 0) skew(0.4deg); } 91% { transform: none; } 94% { transform: translateX(-1px); } 95% { transform: translateX(1px); } }
@keyframes glitch-a { 0%, 88%, 100% { opacity: 0; transform: none; } 89% { opacity: 0.5; transform: translate(-4px, 1px); clip-path: inset(10% 0 60% 0); }
  90% { opacity: 0; } 94% { opacity: 0.3; transform: translate(3px, -1px); clip-path: inset(50% 0 10% 0); } 95% { opacity: 0; } }
@keyframes glitch-b { 0%, 89%, 100% { opacity: 0; transform: none; } 90% { opacity: 0.4; transform: translate(4px, -1px); clip-path: inset(30% 0 40% 0); }
  91% { opacity: 0; } 95% { opacity: 0.25; transform: translate(-3px, 1px); clip-path: inset(60% 0 5% 0); } 96% { opacity: 0; } }
@keyframes dot-blink { 50% { opacity: 0.3; } }
@keyframes breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* =================== DESK =================== */
#desk { position: relative; z-index: 1; min-height: 100%; }
.t-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 14px max(var(--pad), calc((100% - 1320px) / 2 + var(--pad)));   /* full-bleed bar, aligned to content */
  background: rgba(0, 0, 8, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge); }
.t-brand { text-decoration: none; color: rgba(240, 240, 245, 0.55); font: 900 1.15rem var(--font-ui); letter-spacing: -0.02em; white-space: nowrap; }
.t-brand b { color: var(--signal); font-weight: 900; }
.t-brand small { font: 600 0.58rem var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.t-clock { margin-left: auto; font: 400 0.72rem var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.t-actions { display: flex; align-items: center; gap: 8px; }
.life-door, .t-lock { font: 600 0.6rem var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 7px 12px; border-radius: 999px; border: 0; cursor: pointer; background: none; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--edge-2); transition: color var(--fast), box-shadow var(--fast), background var(--fast); }
.life-door { color: #efe6d2; box-shadow: inset 0 0 0 1px rgba(239, 230, 210, 0.3); }   /* a hint of the paper world */
.life-door:hover { background: rgba(239, 230, 210, 0.08); box-shadow: inset 0 0 0 1px rgba(239, 230, 210, 0.6); }
.t-lock:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }

body.trade .tabs { position: sticky; top: 59px; z-index: 19; background: rgba(0, 0, 8, 0.8); border-bottom: 1px solid var(--edge); gap: 4px;
  padding: 0 max(calc(var(--pad) - 14px), calc((100% - 1320px) / 2 + var(--pad) - 14px)); }
body.trade .tab { font: 600 0.7rem var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; padding: 15px 14px 14px; }
body.trade .tab .tab-num { color: var(--muted); }
body.trade .tab[aria-selected="true"] .tab-num { color: var(--signal); }
body.trade .tab::after { background: var(--signal); box-shadow: 0 0 10px var(--signal-glow); }
body.trade .stale { max-width: 1320px; margin: 12px auto 0; }

/* page furniture */
body.trade .eyebrow { font: 600 0.6rem var(--font-mono); letter-spacing: 0.24em; color: var(--muted); }
body.trade .eyebrow b { color: var(--signal); }
body.trade h1.title { font: 900 clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem)/1.05 var(--font-ui); letter-spacing: -0.03em; }
body.trade .lede { color: var(--ink-2); font-size: var(--text-sm); }
body.trade h2.sect { font: 700 0.62rem var(--font-mono); letter-spacing: 0.14em; color: var(--ink-2); }
body.trade .card { background: var(--plate); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--edge); }
body.trade .card.hud::before { background:
  linear-gradient(90deg, rgba(200, 255, 0, 0.35), transparent 30%) top left / 100% 1px no-repeat; }
body.trade .card.alert { background: #160b0e; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35); }
body.trade .kpi-label { font: 600 0.56rem var(--font-mono); letter-spacing: 0.14em; color: var(--muted); }
body.trade .kpi-value { font: 700 1.6rem/1.1 var(--font-mono); }
body.trade .kpi-value.hero { font: 900 var(--text-hero)/1 var(--font-ui); letter-spacing: -0.04em; text-shadow: 0 0 40px rgba(200, 255, 0, 0.12); }
body.trade .roi-hero.win { box-shadow: 0 0 0 1px rgba(200, 255, 0, 0.45), 0 0 60px -22px var(--signal-glow); }
body.trade .btn { color: #000; }
body.trade th { font: 600 0.56rem var(--font-mono); color: var(--muted); }
body.trade td { font-size: 0.8rem; }
body.trade tbody tr:hover { background: rgba(200, 255, 0, 0.03); }
body.trade .chart-note { background: var(--plate); }
body.trade .tv-tf[aria-pressed="true"] { background: var(--signal); }
body.trade .source:hover { background: rgba(200, 255, 0, 0.05); box-shadow: inset 0 0 0 1px rgba(200, 255, 0, 0.4); }
body.trade .empty { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }

/* fund + journal */
.kpi-card .card-head { margin-bottom: 8px; }
.fund-row { margin: var(--gap) 0; }
.month-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.month-cell { display: grid; gap: 4px; padding: 10px 14px; border-radius: 8px; background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--edge); }
.month-cell strong { font: 700 1.1rem var(--font-mono); }
.jr-summary { margin: 0 0 14px; font-size: 0.75rem; color: var(--ink-2); letter-spacing: 0.04em; }
.journal { display: grid; gap: 8px; }
.jr { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; grid-template-areas: "main prices pnl" "reason reason reason";
  gap: 6px 22px; align-items: center; padding: 12px 16px; border-radius: 8px; background: var(--plate-2);
  box-shadow: inset 0 0 0 1px var(--edge), inset 2px 0 0 var(--danger); transition: background var(--fast), transform var(--fast) var(--ease); }
.jr.won { box-shadow: inset 0 0 0 1px var(--edge), inset 2px 0 0 var(--ok); }
.jr:hover { background: var(--plate-3); transform: translateX(2px); }
.jr-main { grid-area: main; min-width: 0; }
.jr-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jr-title strong { font: 800 0.95rem var(--font-ui); letter-spacing: 0.01em; }
.jr-title .tag { font-size: 0.56rem; padding: 1px 7px; }
.jr-meta { font: 400 0.68rem var(--font-mono); color: var(--muted); }
.jr-when { font: 400 0.68rem var(--font-mono); color: var(--ink-2); margin-top: 3px; }
.jr-prices { grid-area: prices; font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.jr-pnl { grid-area: pnl; display: grid; justify-items: end; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.jr-pnl small { font-size: 0.68rem; font-weight: 600; }
.jr-reason { grid-area: reason; margin: 4px 0 0; padding: 8px 12px; border-radius: 6px; font-size: 0.82rem; line-height: 1.5;
  color: var(--ink); background: rgba(200, 255, 0, 0.05); box-shadow: inset 2px 0 0 var(--signal); }
.jr-reason.none { color: var(--muted); background: none; box-shadow: none; padding: 0; font: italic 400 0.72rem var(--font-ui); }

@media (max-width: 760px) {
  body.trade .kpi-value { font-size: 1.25rem; }
  .t-brand small, .t-clock { display: none; }
  .t-actions { margin-left: auto; }
  body.trade .tabs { top: 55px; }
  .jr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main pnl" "prices prices" "reason reason"; }
  .entry-bar { padding: 0 18px; }
}
@media (max-width: 420px) { body.trade .code-cells input { width: 38px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .entry *, .entry { transition: none !important; animation: none !important; }
  .jr:hover { transform: none; }
}