/* ═══════════════════════════════════════════════════════════════════════════
   The Vedic Catalyst — Design Tokens
   Single source of truth for the platform's visual language.
   Every consumer + astrologer surface should include this file BEFORE any
   page-specific CSS. Ships 2026-07-29 in response to UX audit "five visual
   universes coexist" finding.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --bg:              #fafaf7;
  --bg-elev:         #ffffff;
  --bg-sunk:         #f4f0e6;

  --fg:              #1a1a1a;
  --fg-muted:        #6b6b6b;
  --fg-quiet:        #9a978c;

  --border:          #d9d5c8;
  --border-strong:   #b8b3a3;

  /* ── Brand accent — warm amber ─────────────────────────────────────────── */
  --accent:          #c9822f;
  --accent-deep:     #7a5c3e;
  --accent-soft:     #f4ead9;

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --strength:        #5a7f4a;
  --strength-soft:   #e7efe0;
  --awareness:       #a06414;
  --awareness-soft:  #fff2d4;
  --timing-fav:      #4a6b7f;
  --timing-fav-soft: #e0ebf0;
  --timing-chal:     #7f5a4a;
  --timing-chal-soft:#f0e5df;
  --error:           #a93030;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-serif:      Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;

  /* ── Spacing (t-shirt sizes) ──────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;

  /* ── Layout widths ────────────────────────────────────────────────────── */
  --width-narrow:  640px;
  --width-default: 780px;
  --width-wide:    960px;

  /* ── Chart wheel — planet palette (2026-08-02, Finding 2 fix) ─────────────
     Single source of truth for planet coloring in every SVG chart wheel
     (North Indian, South Indian, bi-wheel, Chart Viewer, Compat report).
     Values chosen for contrast on light background + traditional associations:
       Sun    = ruby/amber  (fire, royalty)
       Moon   = slate       (silver-ish on light bg — pure silver is invisible)
       Mars   = deep red    (blood, war)
       Mercury= emerald     (green — Buddh)
       Jupiter= gold        (guru, wisdom)
       Venus  = magenta     (Shukra — pink/rose spectrum)
       Saturn = indigo      (dark blue-purple — Shani)
       Rahu   = slate-grey  (smoky)
       Ketu   = maroon      (dark brown-red — flag)
     Used by buildNorthIndianSVG + buildSouthIndianSVG + buildBiWheelSVG. */
  --planet-sun:     #B45309;
  --planet-moon:    #475569;
  --planet-mars:    #DC2626;
  --planet-mercury: #059669;
  --planet-jupiter: #B8860B;
  --planet-venus:   #DB2777;
  --planet-saturn:  #4338CA;
  --planet-rahu:    #6B7280;
  --planet-ketu:    #78350F;
  --planet-lagna:   #4F46E5;
  --planet-default: #374151;
  /* Chart backgrounds — reused across styles */
  --chart-bg:          #FAFAF9;
  --chart-cell-empty:  #FFFFFF;
  --chart-cell-kendra: #F5F3FF;
  --chart-cell-lagna:  #EEF2FF;
  --chart-stroke:      #6B7280;
  --chart-sign-num:    #9CA3AF;
  --chart-sign-label:  #374151;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ── Utility containers ────────────────────────────────────────────────── */
.tvc-container-narrow  { max-width: var(--width-narrow);  margin: 0 auto; padding: 0 var(--sp-5); }
.tvc-container-default { max-width: var(--width-default); margin: 0 auto; padding: 0 var(--sp-5); }
.tvc-container-wide    { max-width: var(--width-wide);    margin: 0 auto; padding: 0 var(--sp-5); }

/* ── Shared consumer header ────────────────────────────────────────────── */
.tvc-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-5);
  max-width: var(--width-wide);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  background: var(--bg);
}
.tvc-header-brand {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 400;
  color: var(--accent-deep); text-decoration: none;
  letter-spacing: -0.01em;
  /* 2026-08-09: the brand was wrapping to two lines and colliding with the
     first nav item. `.tvc-header` is a flex row and neither child declared
     nowrap or a shrink floor, so with 9 signed-in nav items flexbox shrank
     BOTH — "The Vedic Catalyst" broke across two lines with no gap before
     "Match your chart", and "My hub" / "Sign out" wrapped inside themselves.
     Verified in a browser at 1512px, a standard laptop width, on every page
     using this partial — including the PUBLIC /community page. */
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: var(--sp-5);
}
.tvc-header-brand:hover { color: var(--accent); }
.tvc-header-nav {
  display: flex; gap: var(--sp-5); align-items: center;
  /* Let the nav wrap as a whole rather than letting individual labels break
     mid-phrase. A second row of links is legible; "My / hub" is not. */
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Tighter than --sp-5: at 1512px the signed-in nav is 9 items and the wide
     gap forced a second row. row-gap keeps a wrapped state readable if a
     narrower viewport still needs one. */
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  font-size: 14px;
}
.tvc-header-nav > * { white-space: nowrap; }
.tvc-header-nav a {
  color: var(--fg-muted); text-decoration: none; font-size: 14.5px;
}
.tvc-header-nav a:hover { color: var(--accent-deep); }
.tvc-header-nav .tvc-header-cta {
  background: var(--accent); color: white;
  padding: 8px 16px; border-radius: var(--r-sm);
  font-weight: 500;
}
.tvc-header-nav .tvc-header-cta:hover { background: var(--accent-deep); color: white; }

/* 2026-08-10: unread-notification count on "My hub". Small white pill on
   the amber CTA button so it reads as "count", not as a second button. */
.tvc-header-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  background: white;
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
/* `display` set above outranks the browser's default `[hidden]{display:none}`
   (author normal beats user-agent normal at equal specificity) — without
   this override the badge stays visible even with the `hidden` attribute set. */
.tvc-header-badge[hidden] { display: none; }

/* 2026-07-29: signed-in-as indicator + sign-out link. Both muted so they
   don't compete with the primary nav; signed-in email is not a link,
   sign-out is a very small text link. */
.tvc-header-nav .tvc-header-user {
  color: var(--fg-quiet);
  font-size: 12.5px;
  font-family: var(--font-sans);
  padding: 6px 4px;
  border-right: 1px solid var(--border);
  margin-right: var(--sp-2);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tvc-header-nav .tvc-header-signout {
  color: var(--fg-quiet);
  font-size: 12.5px;
  padding: 6px 4px;
}
.tvc-header-nav .tvc-header-signout:hover { color: var(--accent-deep); }

@media (max-width: 640px) {
  .tvc-header {
    padding: var(--sp-3) var(--sp-4);
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: flex-start;
  }
  .tvc-header-brand { font-size: 17px; }

  /* Show the navigation on phones.

     This used to be `.tvc-header-nav a:not(.tvc-header-cta) { display: none }`
     with no hamburger anywhere, so six of seven links — Panchang, Samples,
     Journal, Community, Publications, My hub — were reachable from no visible
     control on any page. Measured before the fix: 1 of 7 visible at 390px on
     /community and /kundli, 1 of 3 on /publications, 0 menu toggles. Most
     Indian astrologers arrive on a phone, so that is the whole product hidden
     from most of the audience.

     Wrapping rather than a hamburger is deliberate: a toggle needs JavaScript
     and markup in the shared header partial, which other sessions hold, and it
     would hide the navigation behind an extra tap. Wrapped links cost vertical
     space and nothing else, and they work with JS disabled. */
  .tvc-header-nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--sp-3);
    row-gap: 6px;
    font-size: 13.5px;
    line-height: 1.9;          /* taps land on the right link, not its neighbour */
  }
  .tvc-header-nav > * { white-space: nowrap; }

  /* 2026-08-10 — tap targets, refining c9f46b91 rather than changing it.
     That commit made the links VISIBLE on phones (7/7 at 390px, up from 1)
     and reasoned about spacing via line-height:1.9 so "taps land on the right
     link, not its neighbour". Measured after it landed: 6 of 7 links render
     under 32px tall. Apple HIG and Material both put the minimum thumb target
     near 44px, so the links were reachable but fiddly — a real improvement
     still short of comfortable on the device most Indian astrologers arrive on.

     Vertical padding only. It does not touch the visibility rule above, the
     wrap behaviour, or the font size, so the mutation test guarding c9f46b91
     (reintroduce display:none -> must fail naming the link) keeps working
     unchanged. min-height carries the target for short labels like "Journal"
     where padding alone would not reach 44. */
  .tvc-header-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
  }

  /* The account email is the widest item and the least useful on a small
     screen — it is context, not navigation. Cap it so it cannot push the
     links onto extra rows. */
  .tvc-header-nav .tvc-header-user {
    max-width: 42vw;
    border-right: none;
    margin-right: 0;
  }
  /* Keep the primary action visually first among the wrapped links. */
  .tvc-header-nav .tvc-header-cta { order: -1; }
}

/* ── Reusable buttons ──────────────────────────────────────────────────── */
.tvc-btn {
  display: inline-block; font-family: var(--font-sans);
  padding: 12px 22px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: none;
  transition: background 120ms ease, color 120ms ease;
}
.tvc-btn-primary   { background: var(--accent); color: white; }
.tvc-btn-primary:hover { background: var(--accent-deep); }
.tvc-btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.tvc-btn-secondary:hover { border-color: var(--accent-deep); color: var(--accent-deep); }