/* Mirror — shared shell for template-rendered pages (landing, leaderboard, tape).
   Does not touch app.py's inline BASE_CSS used by the trader report / /go / error pages. */

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent-purple); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 16px; top: 16px; }

body[data-mirror] {
  margin: 0;
  background: var(--bg-0);
  background-image:
    radial-gradient(1200px 600px at 15% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(79,168,255,.07), transparent 55%);
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--border-1);
  background: rgba(5,7,13,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); height: 64px;
}
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-dim));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  box-shadow: var(--shadow-sm);
}
.brand-word { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }

.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav a {
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; transition: color var(--t-fast) var(--ease-out);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text-primary); }

.header-search { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.header-search input {
  width: 200px; padding: 8px 12px; font-size: 13px;
  background: var(--surf-1); border: 1px solid var(--border-1); border-radius: var(--r-sm);
  color: var(--text-primary); transition: border-color var(--t-fast) var(--ease-out);
}
.header-search input::placeholder { color: var(--text-quiet); }
.header-search input:focus { outline: none; border-color: var(--accent-purple); }
.header-search button {
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent-purple); border: none; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.header-search button:hover { background: var(--accent-purple-dim); }

/* focus visibility, everywhere on this page */
body[data-mirror] a:focus-visible,
body[data-mirror] button:focus-visible,
body[data-mirror] input:focus-visible {
  outline: 2px solid var(--accent-purple); outline-offset: 2px; border-radius: var(--r-sm);
}

@media (max-width: 860px) {
  .header-search { display: none; }
}
@media (max-width: 640px) {
  .site-header .container { height: 58px; }
  .brand-word { display: none; }
  .site-nav { gap: var(--sp-4); }
  .site-nav .nav-analyze { display: none; }
}
@media (max-width: 380px) {
  .site-nav { gap: var(--sp-3); }
  .site-nav a { font-size: 12.5px; }
}

/* ---------- shared footer (every templated page) ---------- */
.site-footer { padding: var(--sp-6) 0 var(--sp-8); text-align: center; }
.site-footer p { font-size: 11.5px; color: var(--text-quiet); }