/* KeyVex member-area LAYOUT (v2, 2026-10-03, Derek): the old capital-edge dashboard's layout in the
 * current site's style. Every page inside the signed-in area loads this AFTER its own <style>, so these
 * rules win over the page's older floating-bar rules:
 *
 *   top bar  pinned to the top edge, full width            height --nav-h
 *   tape     pinned under it, full width (member-shell.js)  height --tape-h
 *   sidebar  flush on the left edge, tape to bottom         width  --sb-w
 *   .page    everything right of the sidebar, under the tape
 *
 * A page opts in with:  <link rel="stylesheet" href="member-shell.css"> after its <style>,
 * <script src="member-shell.js"></script> right after its </header>, and the shared sidebar
 * (<aside id="sidebar-mount" class="sidebar"> + sidebar.js). */
:root{--nav-h:64px;--tape-h:40px;--sb-w:236px;--chrome:rgba(7,13,15,.82);--line:rgba(255,255,255,.08)}

/* ── top bar ── */
.nav{position:fixed;top:0;left:0;right:0;width:auto;height:var(--nav-h);transform:none;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 20px 0 24px;background:var(--chrome);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;z-index:50}
.nav-search{flex:0 1 380px;min-width:0}
.nav .menu{right:16px}

/* ── ticker tape (rules from the landing's .tape) ── */
.tape{position:fixed;top:var(--nav-h);left:0;right:0;height:var(--tape-h);z-index:45;
  background:rgba(5,10,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);font-size:13px}
.tape-view{position:relative;overflow:hidden;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.tape-run{display:flex;width:max-content;height:100%;animation:tape-roll var(--tape-dur,60s) linear infinite}
.tape:hover .tape-run,.tape:focus-within .tape-run{animation-play-state:paused}
.tape-set{display:flex;flex:none}
.tape-i{display:inline-flex;align-items:center;gap:9px;padding:0 24px;border-right:1px solid rgba(255,255,255,.07);
  color:var(--ink,#eef5f3);text-decoration:none;white-space:nowrap}
.tape-i:hover .tape-t{color:var(--green,#4dff20)}
.tape-t{font-weight:700;letter-spacing:.04em;transition:color .15s}
.tape-n{font-size:12px;color:var(--faint,#6f8488)}
.tape-p{font-variant-numeric:tabular-nums}
.tape-c{font-variant-numeric:tabular-nums;font-weight:600}
.tape-c.up{color:#34d399}.tape-c.dn{color:#f87171}.tape-c.fl{color:var(--muted,#8ba0a4)}
.tape-wait{display:flex;align-items:center;height:100%;padding:0 24px;color:var(--faint,#6f8488);font-size:12.5px}
@keyframes tape-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape-run{animation:none}.tape-view{overflow-x:auto}}

/* ── sidebar ── */
.sidebar{position:fixed;top:calc(var(--nav-h) + var(--tape-h));bottom:0;left:0;width:var(--sb-w);z-index:40;
  background:var(--chrome);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;
  padding:16px 12px 14px;display:flex;flex-direction:column}

/* ── page content: right of the sidebar, under the tape ── */
.page{position:relative;z-index:10;min-height:100vh;width:auto;max-width:none;
  margin:0 0 0 var(--sb-w);padding:calc(var(--nav-h) + var(--tape-h) + 28px) 32px 64px}
/* anything a page keeps "sticky" sits below the pinned bars, not under them */
.col-side{top:calc(var(--nav-h) + var(--tape-h) + 20px)}

/* 12-column grid for cards; a card picks its width with .span-N */
.dgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:26px}
.dgrid > *{grid-column:span 12;min-width:0;margin-top:0}
.dgrid > .span-8{grid-column:span 8}.dgrid > .span-6{grid-column:span 6}.dgrid > .span-4{grid-column:span 4}
@media (max-width:1200px){.dgrid > .span-4,.dgrid > .span-6,.dgrid > .span-8{grid-column:span 12}}

/* ── mobile (≤820px): sidebar hides (the hamburger menu carries it), tape stays ── */
@media (max-width:820px){
  .nav-search{display:none}
  .tape-n{display:none}
  .tape-i{padding:0 16px}
  .sidebar{display:none}
  .page{margin-left:0;padding:calc(var(--nav-h) + var(--tape-h) + 22px) 18px 64px}
}