/* Brickell Alpha Group — site styles.
   Dark ground (#0c0e12), the deck's own mint-green accent (#30c48d — sampled
   from the deck's own dark-panel dashboard mockups, not guessed) as the
   single accent. A basketball half-court line motif sits fixed in the
   background on every page — a persistent corner watermark, the same way
   the deck itself carries a geometric line motif in the corner of every
   slide — rather than being confined to just the home page hero.
   Type system: Instrument Sans for everything you read — nav, labels,
   headings, body copy — and IBM Plex Mono reserved ONLY for numeric
   figures (stat values, table cells, tooltip amounts). Sans for words
   reads as a real firm's site rather than a terminal; mono for numbers is
   a standard, legible convention in finance product design. */

:root {
  --bg: #0c0e12;
  --panel: #14171d;
  --line: #1a1e26;
  --line2: #262b34;
  --t1: #e8ebf0;
  --t2: #aab2bf;
  --t3: #7b8492;
  --t4: #475569;
  --accent: #30c48d;
  --accent-hover: #5ed4a8;
  --pos: #30c48d;
  --neg: #d64b45;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(1100px 560px at 50% -14%, #171b22, var(--bg));
  background-attachment: fixed;
  color: var(--t1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Sitewide basketball-court watermark — fixed, behind all content, present
   on every page (added in base.html, not per-template). No z-index needed:
   it's the first element after <body>, so normal paint order already puts
   every later, non-positioned sibling above it. */
.bg-motif {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 130vmin; height: 130vmin;
  color: var(--accent); opacity: .075; pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: var(--accent); color: var(--bg); }

.wrap {
  max-width: 1140px; margin: 0 auto; padding: 0 40px;
  flex: 1; width: 100%; display: flex; flex-direction: column;
}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 24px; height: 24px; display: block; }
.brand span {
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  letter-spacing: 1.4px; color: var(--t1);
}
.nav-links { display: flex; align-items: center; gap: 32px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; }
.nav-links a { color: var(--t3); }
.nav-links a:hover, .nav-links a.on { color: var(--accent); }

/* ── shared type ─────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
}
h1.display {
  margin: 44px 0 0; font-size: clamp(38px, 6vw, 78px); font-weight: 500;
  line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance;
  color: var(--t1);
}
h1.display .mark {
  display: inline-block; width: .17em; height: .17em;
  margin-left: .2em; vertical-align: .16em; background: var(--accent);
  animation: markPulse 2.6s ease-in-out infinite;
}
@keyframes markPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.2); }
}
.tagline { margin: 18px 0 0; font-style: italic; font-size: 18px; color: var(--accent); }

/* Hero content rises in on load, staggered — home page only (.hero is not
   used elsewhere) — rather than appearing fully formed. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1.display { animation: heroRise .7s ease-out both; }
.hero .tagline { animation: heroRise .7s ease-out .12s both; }
.hero .cta { animation: heroRise .7s ease-out .24s both; }
.lead { margin: 34px 0 0; max-width: 58ch; font-size: 17px; color: var(--t2); }

/* Waiting states (no stake yet, no figures published yet) used to be a
   bare left-aligned paragraph floating on the page background — reads as
   broken rather than intentional. A centered panel, matching the chart's
   own border/background treatment, with a slow pulse (reusing the
   headline's own accent-dot animation) reads as "this is expected,
   something is coming" instead. */
.state-panel {
  margin-top: 40px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 10px; padding: 56px 32px; text-align: center;
}
.state-panel .state-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-bottom: 20px; animation: markPulse 2.6s ease-in-out infinite;
}
.state-panel p {
  margin: 0 auto; max-width: 46ch; font-size: 15px; line-height: 1.7; color: var(--t2);
}
.section-head {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line2);
}

.cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 52px;
  font-family: var(--sans); font-weight: 600; font-size: 14.5px; letter-spacing: 0.2px;
  color: var(--bg); background: var(--accent); border-radius: 999px;
  padding: 15px 26px; box-shadow: 0 10px 24px rgba(48, 196, 141, .18);
}
.cta:hover { background: var(--accent-hover); color: var(--bg); }

/* ── layout blocks ───────────────────────────────────────────────────── */
/* flex: 1 + centered content, not top-anchored padding — on a tall
   viewport the old fixed padding left a large dead band below the button;
   this lets the hero fill whatever space is actually between the nav and
   the footer, wherever that ends up. */
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; padding: 64px 0; min-height: 0; }
.page { padding: 96px 0 120px; }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 96px 168px minmax(0, 1fr);
  gap: 56px; padding: 34px 0; border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row .n { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; color: var(--accent); }
.row .k { font-size: 15px; font-weight: 600; color: var(--t1); }
.row p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--t2); max-width: 62ch; }

.spec { font-family: var(--sans); font-size: 13px; letter-spacing: 0.2px;
  border-top: 1px solid var(--accent); padding-top: 26px; }
.spec div { display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec div:last-child { border-bottom: 0; }
.spec .lbl { color: var(--t3); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; font-size: 11px; }
.spec .val { color: var(--t1); font-weight: 500; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 56px; margin-top: 88px; }
.col { border-top: 1px solid var(--line); padding-top: 24px; }
.col.mark { border-top-color: var(--accent); }
.col .lbl { font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--t3); margin-bottom: 16px; }
.col .big { font-size: 20px; letter-spacing: -0.01em; color: var(--t1); }
.col p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--t2); }

.fine { margin: 112px 0 0; max-width: 78ch; font-size: 12.5px; line-height: 1.78; color: var(--t3); }

footer.site {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; height: 74px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.3px; color: var(--t4);
}

/* ── metric cards ────────────────────────────────────────────────────── */
/* Fixed track counts, not auto-fit: there are eight cards, and an auto-fit row
   that comes up short leaves the container's hairline background showing as a
   lighter empty block. 4 / 2 / 1 columns all divide eight exactly. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stats { grid-template-columns: minmax(0, 1fr); } }
/* Personal-view stat block: 3 cards, so the fixed-4 layout above doesn't apply. */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .stats-3 { grid-template-columns: minmax(0, 1fr); } }
.stat { background: var(--bg); padding: 26px 24px; transition: background-color .15s ease; }
.stat:hover { background: var(--panel); }
.stat .lbl { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3); margin-bottom: 12px; }
.stat .v { font-family: var(--mono); font-size: 27px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--t1); }
.stat .sub { font-size: 12.5px; color: var(--t3); margin-top: 8px; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ── personal-view hero figure ───────────────────────────────────────── */
/* One dominant number (current value) instead of three equal-weight
   boxes — what an investor actually opens this page to check should read
   as the headline, the way a banking app leads with your balance. */
.perf-hero { margin-top: 44px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 10px; padding: 32px 28px; }
.perf-hero .lbl { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--t3); }
.perf-hero .v { font-family: var(--mono); font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--t1); margin-top: 10px; line-height: 1; }
.perf-hero .delta { font-family: var(--mono); font-size: 18px; margin-top: 14px;
  font-variant-numeric: tabular-nums; }
.perf-hero .sub { font-size: 13.5px; color: var(--t3); margin-top: 14px; }

.chart { margin-top: 20px; border: 1px solid var(--line); padding: 26px 24px 30px; position: relative;
  background: var(--panel); border-radius: 10px; }
.chart svg { width: 100%; height: 260px; display: block; cursor: crosshair;
  transition: opacity .16s ease; }
/* Toggled briefly by the range/mode buttons so a redraw reads as a soft
   cross-fade instead of the line snapping to its new shape mid-frame. */
.chart.chart-fade svg { opacity: 0; }
/* Fill under the line, not just a bare stroke — reads as a statement rather
   than a spreadsheet chart. Shared by both the personal and fund-wide charts. */
.chart stop.grad-top { stop-color: var(--accent); stop-opacity: .22; }
.chart stop.grad-bottom { stop-color: var(--accent); stop-opacity: 0; }
.stamp { font-family: var(--sans); font-size: 12px; letter-spacing: 0.3px;
  color: var(--t3); margin-top: 18px; }

.chart-controls { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.chart-controls .group { display: flex; gap: 8px; flex-wrap: wrap; }
.chart-controls button {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px; letter-spacing: 0.2px;
  background: transparent; border: 1px solid var(--line2); color: var(--t2);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease,
    color .15s ease, transform .12s ease;
}
.chart-controls button:hover { border-color: var(--accent); color: var(--t1); }
.chart-controls button:active { transform: scale(.94); }
.chart-controls button.on { background: var(--accent); border-color: var(--accent); color: var(--bg);
  box-shadow: 0 0 0 4px rgba(48, 196, 141, .16); }

.chart-axis { height: 260px; position: absolute; top: 26px; left: 24px; right: 24px; pointer-events: none; }
/* Each span is positioned individually via inline style, set in
   positionAxisLabel() to sit right at the peak/trough point it labels — see
   the comment there for why a fixed corner doesn't work. Background chip,
   not bare text: without a solid backing the line could cut straight
   through the label and make it unreadable. */
.chart-axis span { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px;
  color: var(--t2); font-weight: 500; white-space: nowrap;
  background: var(--bg); padding: 2px 6px; border-radius: 4px; }
/* The three reference gridlines between hi and lo — created by JS as plain
   spans, so this rule only needs to override color/weight to read as
   secondary marks rather than compete with the hi/lo highlights. */
.chart-axis span:not(#pc-hi):not(#pc-lo) { color: var(--t3); font-weight: 400; }
.chart-gridline { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke; }

/* In normal flow, not absolute: with a fixed pixel offset this used to land
   right on top of the "N TRADING DAYS" stamp that follows it, so the two
   rows of text visually collided. */
/* 36px, not a tighter value: the lo-value chip above can drop as far as
   ~26px below the plot's baseline when its point sits at the chart's own
   left or right edge (see positionAxisLabel), which is exactly where these
   date labels sit too. Anything tighter and the two can overlap. */
.chart-xaxis { display: flex; justify-content: space-between; margin-top: 36px; }
.chart-xaxis span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px; color: var(--t3); }

.chart-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); transform: translate(-50%, -50%);
  pointer-events: none; display: none; }
.chart-tooltip {
  position: absolute; pointer-events: none; transform: translate(-50%, -130%);
  background: var(--panel); border: 1px solid var(--line2); border-radius: 7px;
  padding: 7px 12px; font-family: var(--mono); font-size: 12px; color: var(--t1);
  white-space: nowrap; display: none; z-index: 5; box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.chart-tooltip .pct { font-weight: 600; }

/* ── data table ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: 32px; }
table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13px; }
th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--t3); padding: 0 18px 10px 0;
  border-bottom: 1px solid var(--line2); white-space: nowrap; }
td { padding: 10px 18px 10px 0; border-bottom: 1px solid var(--line);
  color: var(--t2); font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── auth card ───────────────────────────────────────────────────────── */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.card { background: var(--panel); border: 1px solid var(--line2); border-radius: 16px;
  padding: 44px 42px 36px; width: 420px; max-width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.card img.crest { display: block; margin: 0 auto 18px; width: 96px; }
.card .title { text-align: center; font-size: 21px; font-weight: 600; margin: 0; color: var(--t1); }
.card .rule { height: 1px; background: var(--line2); margin: 24px 0 20px; }
.card .hint { font-size: 13px; color: var(--t2); text-align: center; line-height: 1.6; margin: 0 0 20px; }
label { display: block; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--t3); margin: 16px 0 7px 2px; }
input { width: 100%; background: var(--bg); border: 1px solid var(--line2); border-radius: 9px;
  color: var(--t1); font-family: var(--sans); font-size: 15px; padding: 12px 14px; }
input:focus { outline: none; border-color: var(--accent); }
input.code { text-align: center; letter-spacing: 8px; font-size: 21px; font-family: var(--mono); }
button.go { width: 100%; margin-top: 24px; border: 0; border-radius: 9px; color: var(--bg);
  background: var(--accent); font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.3px; padding: 13px; cursor: pointer; }
button.go:hover { background: var(--accent-hover); }
.err { background: rgba(214, 75, 69, .12); border: 1px solid var(--neg); color: #f0a9a5;
  font-size: 12.5px; border-radius: 9px; padding: 10px 12px; margin-top: 16px; text-align: center; }

.flash { font-family: var(--sans); font-size: 13.5px; border-radius: 9px;
  padding: 12px 16px; margin-bottom: 4px; }
.flash-ok { background: rgba(48, 196, 141, .12); border: 1px solid var(--accent); color: var(--t1); }
.flash-err { background: rgba(214, 75, 69, .12); border: 1px solid var(--neg); color: #f0a9a5; }
.qr { background: #fff; padding: 12px; border-radius: 12px; width: 196px; height: 196px;
  margin: 0 auto 14px; display: block; }
.secret { font-family: var(--mono); font-size: 11px; color: var(--t2); text-align: center;
  word-break: break-all; margin: 0 0 6px; }
.back { display: block; text-align: center; margin-top: 22px;
  font-family: var(--sans); font-weight: 500; font-size: 12.5px; color: var(--t4); }

/* ── inline admin stake form ─────────────────────────────────────────── */
.admin-stake { display: flex; gap: 6px; align-items: center; }
.admin-stake input { width: auto; padding: 6px 8px; font-size: 12.5px; border-radius: 6px; }
.admin-stake input[type="number"] { width: 90px; }
.admin-stake input[type="date"] { width: 138px; }
.admin-stake button {
  font-family: var(--sans); font-weight: 600; font-size: 12px; white-space: nowrap;
  background: var(--accent); color: var(--bg); border: 0; border-radius: 6px;
  padding: 6px 12px; cursor: pointer;
}
.admin-stake button:hover { background: var(--accent-hover); }

.admin-create { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-create input, .admin-create select {
  width: auto; padding: 8px 10px; font-size: 13px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line2); color: var(--t1);
  font-family: var(--sans);
}
.admin-create input[type="email"] { width: 240px; }
.admin-create input[type="text"] { width: 180px; }
.admin-create select:focus, .admin-create input:focus { outline: none; border-color: var(--accent); }
.admin-create button {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; white-space: nowrap;
  background: var(--accent); color: var(--bg); border: 0; border-radius: 6px;
  padding: 8px 14px; cursor: pointer;
}
.admin-create button:hover { background: var(--accent-hover); }

.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-actions button {
  font-family: var(--sans); font-weight: 600; font-size: 12px; white-space: nowrap;
  background: transparent; border: 1px solid var(--line2); color: var(--t2);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.admin-actions button:hover { border-color: var(--t2); color: var(--t1); }
.admin-actions button.danger { border-color: var(--neg); color: var(--neg); }
.admin-actions button.danger:hover { background: var(--neg); color: var(--bg); }

@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  .nav { height: auto; flex-wrap: wrap; padding: 18px 0 12px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-size: 15px; }

  /* Plain small text was cramped and hard to tap accurately. Pills — the
     same shape already used for the chart-range toggles — give each link a
     real ~40px tap target and a bit more visual presence; the sign-in
     link gets the same solid-fill treatment as the site's CTA button
     so the one actionable item on the nav actually reads as one. */
  .nav-links { flex: 1 1 100%; gap: 10px; font-size: 12.5px; margin-top: 14px; }
  .nav-links a {
    display: inline-flex; align-items: center;
    padding: 9px 15px; border: 1px solid var(--line2); border-radius: 999px;
  }
  .nav-links a:hover, .nav-links a.on { border-color: var(--accent); color: var(--accent); }
  .nav-links a.nav-cta {
    background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600;
  }
  .nav-links a.nav-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .hero { padding: 72px 0 88px; }
  .page { padding: 56px 0 72px; }
  .row { grid-template-columns: 1fr; gap: 10px; }
  .cols { gap: 34px; margin-top: 56px; }
  .fine { margin-top: 64px; }
}