/* ===== Stockcue NEW_UI app shell (Phase 1) =====
   EVERYTHING here is scoped under `body.nui` so it only activates when the
   server injects the shell (NEW_UI=true). When off, this file's rules match
   nothing and the legacy layout is untouched. Uses the existing design tokens
   from styles.css; adds a few shell-only tokens. */

body.nui {
  --nui-sidebar-w: 248px;
  --nui-rail-w: 64px;
  --nui-bottomnav-h: 60px;
}

/* ---------- Sidebar (desktop) ---------- */
.nui-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--nui-sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 6px;
  z-index: 40;
  overflow-y: auto;
}
.nui-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 14px;
  text-decoration: none;
}
.nui-brand svg { width: 26px; height: 26px; flex: 0 0 26px; }
.nui-brand-name { font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--text); letter-spacing: -0.01em; }
.nui-brand-name .b2 { color: var(--accent); }

.nui-navgroup { margin-top: 10px; }
.nui-navgroup-label {
  font-family: var(--sans);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  padding: 6px 10px;
}
.nui-navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.nui-navlink svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2; }
.nui-navlink:hover { background: var(--hover); color: var(--text); }
.nui-navlink.active { background: var(--accent); color: #fff; }
:root[data-theme="light"] .nui-navlink.active { color: #fff; }

.nui-sidefoot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 8px; }
.nui-side-note { font-family: var(--sans); font-size: 10.5px; color: var(--muted-2); padding: 0 10px; line-height: 1.5; }
.nui-side-theme {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 13px; text-align: left;
}
.nui-side-theme:hover { background: var(--hover); color: var(--text); }
.nui-side-theme svg { width: 17px; height: 17px; }

/* ---------- Main content offset ---------- */
body.nui .nui-main { padding-left: var(--nui-sidebar-w); min-height: 100vh; }

/* ---------- Mobile bottom nav (hidden on desktop) ---------- */
.nui-bottomnav { display: none; }
.nui-scrim { display: none; }

/* ---------- Tablet: icon rail ---------- */
@media (max-width: 1024px) and (min-width: 641px) {
  body.nui { --nui-sidebar-w: var(--nui-rail-w); }
  .nui-sidebar { padding: 18px 8px; align-items: center; }
  .nui-brand-name, .nui-navgroup-label, .nui-navlink span, .nui-side-note, .nui-side-theme span { display: none; }
  .nui-navlink { justify-content: center; padding: 11px; }
  .nui-side-theme { justify-content: center; padding: 11px; }
  .nui-brand { justify-content: center; padding: 6px 0 14px; }
}

/* ---------- Mobile: sidebar -> bottom tab bar ---------- */
@media (max-width: 640px) {
  .nui-sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: 80vw; max-width: 300px;
    padding: 18px 14px;
  }
  body.nui.nui-drawer-open .nui-sidebar { transform: translateX(0); }
  body.nui .nui-main { padding-left: 0; padding-bottom: calc(var(--nui-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

  .nui-scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 39; opacity: 0; pointer-events: none; transition: opacity 0.22s;
  }
  body.nui.nui-drawer-open .nui-scrim { opacity: 1; pointer-events: auto; }

  .nui-bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--nui-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel);
    border-top: 1px solid var(--border);
    z-index: 38;
    justify-content: space-around;
    align-items: stretch;
  }
  .nui-bn-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none;
    color: var(--muted-2);
    font-family: var(--sans); font-size: 10px; font-weight: 500;
    border: none; background: none; cursor: pointer;
  }
  .nui-bn-item svg { width: 20px; height: 20px; stroke-width: 2; }
  .nui-bn-item.active { color: var(--accent); }
}

/* ---------- Top bar (mobile gets a slim header w/ hamburger) ---------- */
.nui-topbar { display: none; }
@media (max-width: 640px) {
  .nui-topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 30;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
  }
  .nui-hamburger {
    background: none; border: none; color: var(--text); cursor: pointer;
    display: flex; padding: 4px;
  }
  .nui-hamburger svg { width: 22px; height: 22px; }
  .nui-topbar-brand { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--text); }
  .nui-topbar-brand .b2 { color: var(--accent); }
}

/* ---------- Print / PDF: hide the shell entirely ---------- */
@media print {
  body.nui .nui-sidebar,
  body.nui .nui-bottomnav,
  body.nui .nui-topbar,
  body.nui .nui-scrim { display: none !important; }
  body.nui .nui-main { padding-left: 0 !important; padding-bottom: 0 !important; }
}
/* The PDF renderer adds body.printing — belt-and-braces alongside @media print. */
body.printing.nui .nui-sidebar,
body.printing.nui .nui-bottomnav,
body.printing.nui .nui-topbar,
body.printing.nui .nui-scrim { display: none !important; }
body.printing.nui .nui-main { padding-left: 0 !important; padding-bottom: 0 !important; }


/* ===== Phase 2 (polished): home dashboard reskin (all under body.nui) ===== */

/* The home column becomes a true dashboard: one centered content canvas with
   balanced gutters, and EVERY block (cards, hero, ask, lists) shares the exact
   same left/right edges so nothing reads as misaligned. */
body.nui .nui-main .search-wrap {
  max-width: 1320px;
  margin: 0 auto;            /* centered canvas — balanced gutters on wide screens */
  padding: 36px 40px 72px;
  align-items: stretch;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 26px;                  /* uniform vertical rhythm between every block */
}

/* Dashboard mode owns its own brand (the sidebar). Hide the legacy centered
   hero brand + tagline so it doesn't float between the cards and the search. */
body.nui .search-wrap .brand,
body.nui .search-wrap .brand-tagline { display: none; }

/* Section header */
.nui-dash-head { margin: 0; }
.nui-dash-title { font-family: var(--sans); font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 3px; letter-spacing: -0.02em; }
.nui-dash-sub { font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---- Market Summary cards ---- */
.nui-market {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
}
.nui-mkt-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 168px;
}
.nui-mkt-top { display: flex; align-items: center; justify-content: space-between; }
.nui-mkt-id { display: inline-flex; align-items: center; gap: 9px; }
.nui-mkt-badge {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; font-weight: 700; color: #fff;
  flex: 0 0 24px;
}
.nui-mkt-badge.sp { background: #e0a800; }
.nui-mkt-badge.dj { background: #3b6fe0; }
.nui-mkt-badge.nq { background: #e0a800; }
.nui-mkt-name { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text); }
.nui-mkt-range { font-family: var(--sans); font-size: 11px; color: var(--muted-2); }

/* sparkline fills the middle and grows to push price to the bottom */
.nui-mkt-sparkwrap { flex: 1; display: flex; align-items: stretch; margin: 10px 0 6px; }
.nui-mkt-spark { width: 100%; height: 56px; display: block; }

.nui-mkt-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.nui-mkt-level { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.nui-mkt-chg { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.nui-mkt-chg.up { color: var(--green); }
.nui-mkt-chg.down { color: var(--red); }

/* ---- Unified dashboard cards: hero, ask, watchlist and discoveries all share
       the same panel, radius, padding and full-width edges so the page reads as
       one cohesive, balanced dashboard (no floating bare-text sections). ---- */
.nui-hero { display: contents; }          /* legacy / non-nui: no-op wrapper */
body.nui .nui-hero,
body.nui .ask-wrap,
body.nui .watch-widget,
body.nui .disc-widget {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  max-width: none;
  width: 100%;
  margin: 0;
}
body.nui .nui-hero .search-title { font-size: 18px; text-align: left; margin: 0 0 4px; }
body.nui .nui-hero .search-sub { text-align: left; max-width: 640px; margin: 0 0 16px; }
body.nui .nui-hero .search-box { margin: 0; max-width: none; width: 100%; }
body.nui .nui-hero .recent-row { margin: 14px 0 0; justify-content: flex-start; }
body.nui .ask-wrap .ask-form { max-width: none; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  /* Tablet / icon-rail: keep the 3-up grid but make the cards shorter so the
     market summary doesn't dominate the viewport. */
  .nui-mkt-card { min-height: 0; padding: 14px 16px 13px; }
  .nui-mkt-spark { height: 44px; }
  .nui-mkt-sparkwrap { margin: 8px 0 6px; }
  .nui-mkt-level { font-size: 21px; }
}
@media (max-width: 860px) {
  body.nui .nui-main .search-wrap { padding: 24px 18px 48px; gap: 20px; }
  body.nui .nui-hero { padding: 20px 18px; }
}
@media (max-width: 640px) {
  body.nui .nui-main .search-wrap { padding: 18px 14px 36px; gap: 16px; }
  .nui-dash-title { font-size: 22px; }

  /* Mobile hierarchy: lead with the dashboard title + SEARCH (the core action),
     then demote the market summary to a compact, swipeable strip — so it reads
     as a glanceable market pulse, not three full-screen charts, and users see
     the "search a stock" value first. (Re-orders the search-wrap flex column.) */
  .nui-dash-head { order: 0; }
  body.nui .nui-hero { order: 1; }
  .nui-market { order: 2; }
  body.nui .ask-wrap { order: 3; }
  body.nui .watch-widget { order: 4; }
  body.nui .disc-widget { order: 5; }

  .nui-market {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;            /* bleed the strip to the screen edges */
    padding: 2px 14px 10px;
    scrollbar-width: none;
  }
  .nui-market::-webkit-scrollbar { display: none; }
  .nui-mkt-card {
    flex: 0 0 60%;
    max-width: 240px;
    min-height: 0;
    padding: 13px 15px 12px;
    scroll-snap-align: start;
  }
  .nui-mkt-range { display: none; }        /* drop "Last 30 days" to save height */
  .nui-mkt-sparkwrap { margin: 8px 0; }
  .nui-mkt-spark { height: 34px; }
  .nui-mkt-name { font-size: 13px; }
  .nui-mkt-level { font-size: 20px; }
  .nui-mkt-chg { font-size: 12px; }
}

/* ===== Round 24 (additive): account / sign-in UI in the sidebar footer ===== */
.nui-account { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.nui-acc-out { display: flex; flex-direction: column; gap: 9px; }
.nui-acc-cta { font-family: var(--sans); font-size: 11px; line-height: 1.45; color: var(--muted-2); padding: 0 2px; }
.nui-acc-gbtn { min-height: 40px; display: flex; }
.nui-acc-user { display: flex; align-items: center; gap: 9px; padding: 2px; }
.nui-acc-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; object-fit: cover; }
.nui-acc-initial { background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 14px; }
.nui-acc-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.nui-acc-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.nui-acc-signout { background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.nui-acc-signout:hover { color: var(--text); text-decoration: underline; }

/* Tablet icon-rail: keep the account reachable (avatar / circular Google icon),
   just drop the text so it fits the ~64px rail. (Previously hidden entirely,
   which left no way to sign in or out at this width.) */
@media (max-width: 1024px) and (min-width: 641px) {
  .nui-account { padding-bottom: 8px; }
  .nui-acc-cta, .nui-acc-name { display: none; }
  .nui-acc-user { flex-direction: column; gap: 6px; }
  .nui-acc-out { align-items: center; }
  .nui-acc-signout { font-size: 10px; text-align: center; }
}

/* ===== Round 26: cookie-consent banner (GA4) ===== */
.sc-consent {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 1200;
  width: calc(100% - 32px); max-width: 640px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35); padding: 14px 18px;
}
.sc-consent-text { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); flex: 1 1 280px; }
.sc-consent-text a { color: var(--accent); text-decoration: none; }
.sc-consent-text a:hover { text-decoration: underline; }
.sc-consent-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.sc-consent-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.sc-consent-decline { background: none; border-color: var(--border); color: var(--muted); }
.sc-consent-decline:hover { color: var(--text); border-color: var(--muted-2); }
.sc-consent-accept { background: var(--accent); color: #fff; }
.sc-consent-accept:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  .sc-consent { bottom: calc(var(--nui-bottomnav-h, 60px) + 12px); flex-direction: column; align-items: stretch; }
  .sc-consent-btns { justify-content: flex-end; }
}
/* Never show the banner in generated PDFs / print. */
@media print { .sc-consent { display: none !important; } }
body.printing .sc-consent { display: none !important; }