/* ============================================================================
   Shared sidebar navigation — the single source of truth for every page.

   Loaded by profile.html, index.html, kundali.html and dasha.html. Each of
   those pages used to carry its own copy of these rules, which is how the
   landing page ended up a category short and the kundali page ended up with a
   different logo. Edit the nav here and nowhere else.

   The markup this styles is produced by nav.js:

     <aside class="sidebar" id="sidebar">
       <div class="logo">…<button class="sb-toggle" id="sbToggle"></button></div>
       <nav class="nav-menu" id="navMenu">…</nav>
     </aside>
   ========================================================================= */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

.sidebar {
  --nav-ease: cubic-bezier(.23, 1, .32, 1);
  --nav-accent: #f0abfc;
  width: 230px;
  /* above the preview bar, when there is one (nav.js measures it) */
  height: calc(100vh - var(--session-bar-h, 0px));
  position: sticky;
  top: 0;
  background: #12122a;
  border-right: 1px solid #1e1e3a;
  display: flex;
  flex-direction: column;
  padding: 16px 0 12px;
  flex-shrink: 0;
  overflow: hidden;
  transition: width .22s var(--nav-ease);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 14px 18px;
}
.logo-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(232, 178, 74, .28);   /* the badge's gold, glowing faintly */
}
.logo-img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.logo-text {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #fff;
}

.sb-toggle {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: none; border: none; border-radius: 8px; color: #8f8fb8;
  cursor: pointer; padding: 0; margin-left: auto;
  transition: color .15s, background-color .15s, transform 160ms var(--nav-ease);
  flex-shrink: 0;
}
.sb-toggle svg { width: 18px; height: 18px; display: block; }
.sb-toggle .sb-close { display: none; }
.sb-toggle:active { transform: scale(.94); }

/* The menu takes the height between the logo and the download action. It
   never hides an entry: the spacing tightens on shorter screens (below), and
   if a screen is shorter still the list scrolls inside its own column while
   the logo and the download action stay put. The 3px top and bottom padding
   leave room for an entry's 2px hover lift. */
.nav-menu {
  flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #2a2a50 transparent;
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px 10px;
}
.nav-menu::-webkit-scrollbar { width: 6px; }
.nav-menu::-webkit-scrollbar-thumb { background: #2a2a50; border-radius: 99px; }
.nav-menu > * { flex-shrink: 0; }

/* quiet group labels: what you scored, then your chart */
.nav-group {
  margin: 10px 10px 4px;
  font-size: 11.5px; font-weight: 600; color: #7c7ca6;
  white-space: nowrap;
}
.nav-group:first-child { margin-top: 2px; }

/* One rule for both renderings: the app page emits <button>, the other pages
   emit <a>, and they must be visually identical. */
.nav-cat-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #c7c4e4;
  background: transparent;
  border: none;
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, transform 160ms var(--nav-ease);
}
.nav-cat-btn:active { transform: scale(.98); }

.nav-icon {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex-shrink: 0;
  color: #9d9dc4;
  transition: color .15s;
}
.nav-icon svg { width: 18px; height: 18px; display: block; }
.cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* the longest label, "Past Life & Karma Analysis", set a hair tighter so it reads in full */
a.nav-cat-btn[href="/past-life/"] .cat-name { letter-spacing: -.015em; }

/* the page you are on: a tinted pill, the icon in the accent */
.nav-cat.current > .nav-cat-btn,
.nav-link.active {
  background: linear-gradient(90deg, rgba(168, 85, 247, .26), rgba(236, 72, 153, .10));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .28);
}
.nav-cat.current > .nav-cat-btn .nav-icon,
.nav-link.active .nav-icon { color: var(--nav-accent); }

@media (hover: hover) and (pointer: fine) {
  .sb-toggle:hover { color: #fff; background: rgba(255, 255, 255, .06); }
  .nav-cat-btn:hover { background: rgba(255, 255, 255, .05); color: #ffffff; }
  .nav-cat-btn:hover .nav-icon { color: #d8c7ff; }
  .nav-cat.current > .nav-cat-btn:hover,
  .nav-link.active:hover { background: linear-gradient(90deg, rgba(168, 85, 247, .32), rgba(236, 72, 153, .12)); }
}

.sb-toggle:focus-visible,
.nav-cat-btn:focus-visible,
.sb-download:focus-visible { outline: 2px solid #f0abfc; outline-offset: 2px; }

/* collapsed state — everything centred in the 52px rail */
.sidebar.collapsed { width: 52px; }
.sidebar.collapsed .logo-text { display: none !important; }
.sidebar.collapsed .logo {
  flex-direction: column;      /* the toggle sits under the mark instead of overflowing */
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
}

/* ── download action ────────────────────────────────────────────────────────
   Sits under the nav rather than inside it: it is an action on the current
   chart, not a destination, so it should not read as a tenth nav entry. */
.sb-download {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #e4dcff;
  text-decoration: none;
  background: rgba(168, 85, 247, .12);
  border: 1px solid rgba(168, 85, 247, .3);
  transition: background-color .16s, border-color .16s, color .16s, transform 160ms var(--nav-ease);
}
.sb-download:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .sb-download:hover {
    background: rgba(168, 85, 247, .22);
    border-color: rgba(168, 85, 247, .55);
    color: #ffffff;
  }
}
.sb-download .nav-icon { color: #d8c7ff; }
.sb-download .cat-name { white-space: normal; line-height: 1.35; }

/* while the report is being built, the arrow turns into a spinner */
.sb-download .sb-spin { display: none; }
.sb-download[aria-busy="true"] .sb-arrow { display: none; }
.sb-download[aria-busy="true"] .sb-spin { display: block; animation: sb-spin .7s linear infinite; }
.sb-download[aria-busy="true"] { cursor: progress; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* a failed download says so here, not in a browser alert */
.sb-msg {
  margin: 8px 14px 0;
  font-size: 12px; line-height: 1.45; font-weight: 500; color: #ff9db4;
}
.sb-msg[hidden] { display: none; }

/* in the 52px rail it becomes a square icon button */
.sidebar.collapsed .sb-download {
  margin: 10px 8px 0;
  padding: 9px 0;
  justify-content: center;
  gap: 0;
}
.sidebar.collapsed .sb-download .cat-name,
.sidebar.collapsed .sb-msg { display: none; }

/* The 52px rail has room for one control, and that is the toggle — the mark
   would only crowd it, so it is dropped until the sidebar reopens. */
.sidebar.collapsed .logo-icon { display: none; }
.sidebar.collapsed .sb-toggle { margin: 0; }
.sidebar.collapsed .nav-menu { padding: 0 8px; }
/* the group labels shrink to a thin rule between the two groups */
.sidebar.collapsed .nav-group {
  height: 1px; margin: 8px 6px; overflow: hidden; color: transparent;
  background: #262650;
}
.sidebar.collapsed .nav-group:first-child { display: none; }
.sidebar.collapsed .nav-cat-btn {
  justify-content: center;
  padding: 8px 0;
  gap: 0;                      /* no gap to an empty label */
}
.sidebar.collapsed .cat-name { display: none; }   /* flex:1 was shoving icons left */
/* Anything below the nav — the kundali page's help panel — is hidden in the
   52px rail. */
.sidebar.collapsed .sb-help { display: none !important; }

/* ── shorter screens: tighter spacing so every entry fits ───────────────────
   Fourteen entries, three group labels, the logo and the download action
   need ~755px at full spacing; a 1080p screen at 125% scaling gives ~720px.
   Two steps close the gaps (entries stay comfortably clickable); anything
   shorter than the second step scrolls the list instead of hiding entries. */
@media (max-height: 860px) {
  .sidebar { padding: 12px 0 10px; }
  .logo { padding-bottom: 10px; }
  .nav-cat-btn { min-height: 32px; padding: 5px 10px; }
  .nav-group { margin: 7px 10px 3px; }
  .nav-group:first-child { margin-top: 0; }
  .sb-download { margin-top: 8px; padding: 8px 12px; }
}
@media (max-height: 740px) {
  .sidebar { padding: 10px 0 8px; }
  .logo { padding-bottom: 8px; }
  .nav-menu { gap: 1px; }
  .nav-cat-btn { min-height: 29px; padding: 4px 10px; font-size: 13px; }
  .nav-icon svg { width: 17px; height: 17px; }
  .nav-group { margin: 5px 10px 2px; font-size: 11px; }
  .sb-download { margin-top: 6px; padding: 7px 12px; font-size: 13px; }
}

@media (max-height: 680px) {
  .sidebar { padding: 8px 0 6px; }
  .logo { padding-bottom: 6px; }
  .nav-cat-btn { min-height: 27px; padding: 3px 10px; }
  .nav-group { margin: 4px 10px 1px; }
  .sb-download { margin-top: 5px; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-cat-btn, .sb-download, .sb-toggle { transition: none; }
  .sb-download[aria-busy="true"] .sb-spin { animation-duration: 2s; }
}

/* ── phones: an app bar, a slide-in menu and a tab bar ─────────────────────
   Below 760px the 52px icon rail took a seventh of the screen and left every
   page squeezed beside it. On a phone the sidebar becomes a drawer instead,
   opened from the bar at the top (nav.js adds the bar, the scrim and the tab
   bar; above 760px they are never shown). The drawer is the same #sidebar
   with the same entries, labels included, so nothing is duplicated. */
.m-bar, .m-tabs, .m-scrim { display: none; }

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { --m-bar: 58px; --m-tabs: 64px; }
  body.m-shell { padding-top: var(--m-bar); padding-bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom)); }
  body.m-shell.m-bare { padding-bottom: env(safe-area-inset-bottom); }

  .m-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--m-bar); padding: 0 62px 0 10px;
    background: rgba(13, 12, 31, .86);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  }
  .m-menu {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px;
    background: rgba(255, 255, 255, .05); color: #e9e2ff; cursor: pointer;
    transition: background-color .15s, transform 160ms cubic-bezier(.23, 1, .32, 1);
  }
  .m-menu svg { width: 21px; height: 21px; }
  .m-menu:active { transform: scale(.94); background: rgba(255, 255, 255, .1); }
  .m-brand { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; color: #fff; text-decoration: none; }
  .m-brand .logo-icon { width: 32px; height: 32px; }
  .m-brand-t { display: grid; min-width: 0; line-height: 1.1; }
  .m-brand-t b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
  .m-brand-t span { font-size: 12px; color: #a9a3cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the page's own avatar sits at the right end of the bar */
  body.m-shell .user-chip { position: fixed !important; top: 11px !important; right: 12px !important; z-index: 950 !important;
    display: flex !important; align-items: center; gap: 8px; }
  /* Share beside the avatar: a round icon the avatar's size, and the bar
     keeps room for both so the page title shortens instead of running under */
  body.m-shell .user-chip .sh-btn { position: static !important; margin: 0 !important; width: 36px; min-width: 36px; max-width: none; height: 36px;
    padding: 0 !important; justify-content: center; border-radius: 50% !important; flex: none; }
  body.m-shell .user-chip .sh-btn span { display: none; }
  body.m-shell .user-chip .sh-btn svg { width: 17px; height: 17px; }
  body.m-shell:has(.user-chip .sh-btn) .m-bar { padding-right: 104px; }
  /* One avatar on every page. Each page drew its own (a dark disc on most, a
     gradient on the Overview and Kundali, 29 to 40px), which showed once they
     all sat in the same bar; these win over every page's own rule. */
  body.m-shell .user-chip .avatar-btn {
    display: grid !important; place-items: center; box-sizing: border-box;
    width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important;
    font: 700 12.5px/1 "Outfit", "Segoe UI", system-ui, sans-serif !important; letter-spacing: .03em !important;
    color: #fff !important; text-decoration: none;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    border: 2px solid rgba(255, 255, 255, .22) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, .28) !important;
    filter: none !important; transform: none;
  }
  body.m-shell .user-chip .avatar-btn:active { transform: scale(.94); }
  body.m-shell .user-chip .avatar-btn:focus-visible { outline: 2px solid #f0abfc !important; outline-offset: 2px; }

  /* the drawer */
  body.m-shell .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100;
    width: min(300px, 84vw) !important; height: 100vh; height: 100dvh;
    padding: 14px 0 calc(12px + env(safe-area-inset-bottom));
    border-right: 1px solid #2a2a50;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .55);
    transform: translateX(-104%); visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s .28s;
  }
  body.m-shell.m-open .sidebar { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.32, .72, 0, 1); }
  /* inside the drawer everything is shown in full, collapsed or not */
  body.m-shell .sidebar .logo { flex-direction: row; justify-content: flex-start; padding: 0 12px 12px 18px; gap: 10px; }
  body.m-shell .sidebar .logo-icon { display: flex; }
  body.m-shell .sidebar .logo-text { display: inline !important; }
  body.m-shell .sidebar .sb-toggle { display: grid; margin-left: auto; width: 38px; height: 38px; }
  body.m-shell .sidebar .sb-toggle .sb-panel { display: none; }
  body.m-shell .sidebar .sb-toggle .sb-close { display: block; }
  body.m-shell .sidebar .nav-menu { padding: 3px 12px; gap: 2px; }
  body.m-shell .sidebar .nav-group { height: auto; margin: 12px 10px 4px; overflow: visible; color: #7c7ca6; background: none; font-size: 12px; }
  body.m-shell .sidebar .nav-group:first-child { display: block; margin-top: 2px; }
  body.m-shell .sidebar .nav-cat-btn { justify-content: flex-start; gap: 12px; min-height: 44px; padding: 9px 12px; font-size: 15px; }
  body.m-shell .sidebar .cat-name { display: block; }
  body.m-shell .sidebar .nav-icon svg { width: 19px; height: 19px; }
  body.m-shell .sidebar .sb-download { margin: 10px 14px 0; padding: 12px 14px; justify-content: flex-start; gap: 10px; font-size: 14.5px; }
  body.m-shell .sidebar .sb-download .cat-name { display: block; }
  body.m-shell .sidebar .sb-msg { display: block; }
  body.m-shell .sidebar .sb-msg[hidden] { display: none; }
  body.m-shell .sidebar .sb-help { display: none !important; }

  .m-scrim {
    display: block; position: fixed; inset: 0; z-index: 1050;
    background: rgba(5, 4, 14, .6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.m-open .m-scrim { opacity: 1; pointer-events: auto; }
  body.m-open { overflow: hidden; }

  /* the tab bar */
  .m-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--m-tabs) + env(safe-area-inset-bottom));
    padding: 6px 6px env(safe-area-inset-bottom);
    background: rgba(13, 12, 31, .92);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  }
  .m-tab {
    display: grid; justify-items: center; align-content: center; gap: 4px;
    min-width: 0; padding: 0; border: 0; border-radius: 14px; background: none;
    color: #8f8bb8; font: inherit; font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, transform 160ms cubic-bezier(.23, 1, .32, 1);
  }
  .m-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-tab i { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px; transition: background-color .2s; }
  .m-tab svg { width: 21px; height: 21px; }
  .m-tab:active { transform: scale(.94); }
  .m-tab.on { color: #fff; }
  .m-tab.on i { background: linear-gradient(90deg, rgba(168, 85, 247, .45), rgba(236, 72, 153, .3)); color: #fff; }

  /* things pinned to the bottom of the window move up above the tab bar */
  /* the chat button: one round button on every page (pages restyle it for the desk) */
  body.m-shell .ac-launcher {
    bottom: calc(var(--m-tabs) + 14px + env(safe-area-inset-bottom)) !important; right: 14px !important;
    width: 50px; height: 50px; padding: 0 !important; justify-content: center; border-radius: 50% !important;
    transition: transform .25s cubic-bezier(.23, 1, .32, 1), opacity .2s ease;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    box-shadow: 0 8px 24px rgba(236, 72, 153, .35), 0 2px 6px rgba(0, 0, 0, .4) !important;
  }
  body.m-shell .ac-launcher svg { width: 23px; height: 23px; }
  body.m-shell .ac-launcher .ac-launcher-text { display: none !important; }
  body.m-shell #sessionBar { bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.m-shell .sidebar, .m-scrim, .m-tab, .m-menu { transition: none; }
}

/* ── the top-right group on a desk: Share and the profile icon ─────────────
   One place, one size, one line on every page (share.js moves the page's
   Share button in here). The pages' own .user-chip rules differed by a few
   pixels each, hence the !important. */
@media (min-width: 761px) {
  .user-chip { position: fixed !important; top: 16px !important; right: 22px !important; z-index: 70 !important;
    display: flex; align-items: center; gap: 12px; }
  .user-chip .avatar-btn { width: 40px !important; height: 40px !important; font-size: 13px !important; flex: none; }
  .user-chip .sh-btn { position: static !important; margin: 0 !important; height: 40px; padding: 0 18px; font-size: 14px; }
}

/* ── phones: the chat button steps aside while you scroll down to read, and
   comes back as soon as you scroll up (nav.js toggles .ac-away) ─────────── */
@media (max-width: 760px) {
  body.m-shell .ac-launcher.ac-away { transform: translateY(calc(100% + 90px)); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { body.m-shell .ac-launcher { transition: none; } }

/* ── anything that scrolls sideways fades at the edge that has more, so a
   cut-off column or label reads as "swipe for more" (nav.js sets the classes) */
.sx-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.sx-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.sx-fade-l.sx-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* the heading row under the fixed top-right buttons (nav.js measures it) */
@media (min-width: 761px) {
  .chip-clear { padding-right: var(--chip-room, 0px) !important; box-sizing: border-box; }
}