/* lakeshore-app-bar.css
   Vertical left sidebar shared across pages (converted from top bar
   2026-05-24). Brand at top, nav stacked vertically, auth pill at
   bottom of the column. Auto-refresh pill and asof timestamp are
   hidden — refresh happens silently in the background; surfacing it
   in the chrome only added noise. Body gets padding-left equal to
   the sidebar width so page content doesn't disappear underneath. */

:root {
  --app-bar-width: 200px;
}

body {
  padding-left: var(--app-bar-width);
}

.app-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px 12px;
  background: linear-gradient(180deg, var(--panel) 0%, rgba(15,17,20,0.94) 100%);
  border-right: 1px solid var(--line);
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--app-bar-width);
  z-index: 50;
  overflow-y: auto;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* --- Brand ---------------------------------------------------------- */
.app-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.app-brand-mark {
  width: 26px; height: 26px;
  color: var(--gold);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.25));
}
.app-brand-text {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1;
}

/* Legacy classes kept to avoid breaking older templates --------------- */
.app-brand-logo { display: none !important; }
.app-brand-name { font-weight: inherit; }
.app-brand-sub  { display: none !important; }

/* --- Nav ----------------------------------------------------------- */
.app-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  justify-content: flex-start;
  min-height: 0;
}
.app-nav-link {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}
.app-nav-link:hover {
  color: var(--ink);
  background: var(--panel-2);
}
body[data-page="forecasts"]    .app-nav-link[data-page="forecasts"],
body[data-page="no-bet"]       .app-nav-link[data-page="no-bet"],
body[data-page="model"]        .app-nav-link[data-page="model"],
body[data-page="recent-losses"] .app-nav-link[data-page="recent-losses"],
body[data-page="methodology"]  .app-nav-link[data-page="methodology"],
body[data-page="about"]        .app-nav-link[data-page="about"],
body[data-page="home"]         .app-nav-link[data-page="home"],
body[data-page="inplay"]       .app-nav-link[data-page="inplay"],
body[data-page="live"]         .app-nav-link[data-page="live"],
body[data-page="bankroll"]     .app-nav-link[data-page="bankroll"],
body[data-page="profile"]      .app-nav-link[data-page="profile"],
body[data-page="performance"]  .app-nav-link[data-page="performance"] {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--line);
  /* Left-edge gold accent for the vertical sidebar. Falls back to the
     legacy bottom-border accent inside the mobile breakpoint where the
     layout returns to a horizontal bar. */
  box-shadow: inset 3px 0 0 0 var(--gold);
}

@media (max-width: 900px) {
  body[data-page="forecasts"]    .app-nav-link[data-page="forecasts"],
  body[data-page="no-bet"]       .app-nav-link[data-page="no-bet"],
  body[data-page="model"]        .app-nav-link[data-page="model"],
  body[data-page="recent-losses"] .app-nav-link[data-page="recent-losses"],
  body[data-page="methodology"]  .app-nav-link[data-page="methodology"],
  body[data-page="about"]        .app-nav-link[data-page="about"],
  body[data-page="home"]         .app-nav-link[data-page="home"],
  body[data-page="inplay"]       .app-nav-link[data-page="inplay"],
  body[data-page="live"]         .app-nav-link[data-page="live"],
  body[data-page="bankroll"]     .app-nav-link[data-page="bankroll"],
  body[data-page="profile"]      .app-nav-link[data-page="profile"],
  body[data-page="performance"]  .app-nav-link[data-page="performance"] {
    box-shadow: inset 0 -2px 0 0 var(--gold);
  }
}

/* Anonymous-mode nav gating. Set by lakeshore-auth-pill.js after
   /auth/whoami resolves (or by the v2 dashboard's inline JS, which
   has the server-side is_authed flag and tags <body> immediately to
   avoid a flash). Auth-required nav links are HIDDEN entirely for
   anon — not dimmed-with-lock — so the cold-traffic top bar reads
   as a clean open-model product surface (Forecasts / Model) rather
   than a Discord-tout server with locked premium tabs.

   Previously: dim + 🔒 glyph, click still navigated to a redirect.
   That read as "sign up for premium access" — the exact tipster
   signal we're trying to remove from the funnel. */
body.lakeshore-anon .app-nav-link[data-auth-required] {
  display: none !important;
}

/* --- Tiered nav (2026-05-20) --------------------------------------
   Two visible tiers in the nav. Body classes are set by
   lakeshore-auth-pill.js after /auth/whoami:
     body.lakeshore-anon    — no session
     body.lakeshore-authed  — magic-link / Google OAuth session
   Admin tools are intentionally NOT exposed in the nav — they are a
   back door reachable by typing /api/health, /api/refresh, etc.

   Items + section dividers are hidden by default; body.lakeshore-authed
   reveals the authed-tier items and their divider. -------------- */
.app-nav-link[data-tier="authed"],
.app-nav-divider[data-tier-divider]      { display: none; }

body.lakeshore-authed .app-nav-link[data-tier="authed"] { display: block; }
body.lakeshore-authed .app-nav-divider[data-tier-divider="authed"] { display: block; }

/* --- Anon-only signup CTA -----------------------------------------
   Prominent gold pill at the top of the sidebar that pushes cold
   traffic toward /auth/signup. Hidden the instant the auth-pill
   script flips the body class to .lakeshore-authed. */
.app-signup-cta {
  display: block;
  text-align: center;
  padding: 10px 12px;
  background: var(--gold);
  color: #0a0d10;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--gold);
  box-shadow: 0 2px 6px rgba(47,128,237,0.18);
  transition: background 120ms ease, transform 120ms ease;
}
.app-signup-cta:hover {
  background: var(--gold-2);
  border-color: var(--gold-2);
  transform: translateY(-1px);
  text-decoration: none;
}
.app-signup-cta[data-tier="anon"] { display: none; }
body.lakeshore-anon .app-signup-cta[data-tier="anon"] { display: block; }

/* Horizontal hairline that visually marks where the authed section begins. */
.app-nav-divider {
  width: 100%; height: 1px;
  background: var(--line);
  margin: 8px 0;
  align-self: stretch;
}

/* --- Status (auth pill only — old asof + auto pill hidden) --------
   Pinned to the bottom of the sidebar column via margin-top:auto so
   the brand+nav stack natural at the top and the user identity sits
   visually anchored at the bottom of the rail. */
.app-status {
  display: flex; align-items: stretch; flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  margin-top: auto;
}
.app-as-of      { display: none !important; }
.app-fresh-pill { display: none !important; }
.app-fresh-dot  { display: none !important; }

/* --- Page subhead -------------------------------------------------- */
.page-subhead {
  padding: 14px 22px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.05);
}
.page-subhead h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.page-subhead h1 .small {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 8px;
  letter-spacing: 0.02em;
}
.page-subhead .tagline {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* --- Auth pill (top-right, injected by lakeshore-auth-pill.js) ---- */
.auth-pill { position: relative; display: inline-flex; }
.auth-pill-signin {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 6px;
  text-decoration: none;
  transition: background 120ms;
}
.auth-pill-signin:hover { background: rgba(212, 175, 55, 0.08); }

.auth-pill-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms;
}
.auth-pill-trigger:hover { border-color: var(--gold); }
.auth-pill-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel);
}
.auth-pill-avatar-fallback {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.auth-pill-name {
  /* Constrained to fit inside the sidebar column. Mobile breakpoint
     bumps this back up since the top bar has more horizontal room. */
  white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
}
.auth-pill-caret { color: var(--ink-soft); font-size: 10px; }

.auth-pill-menu {
  /* Sidebar layout: pill is at bottom-left of the screen, so the menu
     pops UPWARD and aligns with the pill's left edge so it doesn't
     bleed off the side of the viewport. */
  position: absolute; bottom: calc(100% + 6px); left: 0;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
  z-index: 100;
}
.auth-pill-menu[hidden] { display: none; }
.auth-pill-menu a, .auth-pill-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.auth-pill-menu a:hover, .auth-pill-menu button:hover { background: var(--panel-2); }
.auth-pill-menu .menu-divider {
  height: 1px; background: var(--line);
  margin: 4px 0;
}
.auth-pill-menu .menu-email {
  padding: 6px 12px 4px;
  font-size: 10.5px;
  color: var(--ink-soft);
  word-break: break-all;
}

/* --- Mobile ---------------------------------------------------------
   Collapse the sidebar back to a horizontal top bar below 900px.
   Vertical rails eat too much horizontal space on phones and tablets
   in portrait. */
@media (max-width: 900px) {
  :root { --app-bar-width: 0px; }
  body { padding-left: 0; }
  .app-bar {
    position: sticky; top: 0; left: auto; bottom: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 14px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-y: visible;
  }
  .app-nav {
    flex-direction: row; flex-wrap: wrap;
    order: 3; width: 100%;
    justify-content: flex-start;
    gap: 1px;
  }
  .app-nav-link { padding: 5px 9px; font-size: 11.5px; text-align: center; }
  .app-nav-divider {
    width: 1px; height: 18px; margin: 0 6px; align-self: center;
  }
  .app-status {
    flex-direction: row; align-items: center;
    margin-top: 0; margin-left: auto;
  }
  /* Menu pops downward again on mobile (pill is back at the top). */
  .auth-pill-menu { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; }
  .page-subhead { padding: 10px 16px 6px; }
  .auth-pill-name { max-width: 120px; }
}