/* ══════════════════════════════════════════════════════
   AURORA BOREALIS THEME — Astrobserve
   Night sky · flowing greens · violet · cyan · glow
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Inter:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Night sky base — deep cobalt-navy from photo */
  --bg:          #050d18;
  --bg2:         #060f1e;
  --bg3:         #071222;
  --bg-glass:    rgba(5, 10, 22, 0.72);

  /* Aurora borders */
  --border:      rgba(0, 255, 136, 0.10);
  --border2:     rgba(0, 232, 184, 0.22);
  --border-glow: rgba(0, 255, 136, 0.42);

  /* Aurora palette — matched to photo */
  --aurora-green:   #00ff88;   /* electric lime-green curtains */
  --aurora-teal:    #00e8b8;   /* green-teal transition */
  --aurora-cyan:    #00d8ff;
  --aurora-blue:    #0a60f0;   /* cobalt blue sky */
  --aurora-indigo:  #3a1a88;   /* deep indigo band */
  --aurora-violet:  #7830dd;   /* violet-purple aurora */
  --aurora-purple:  #aa40ee;
  --aurora-magenta: #dd40f8;   /* electric magenta edge */
  --aurora-amber:   #ff8822;   /* warm amber horizon glow */

  /* Venetian blue — rich historical cerulean */
  --venetian-blue:       #1a6fdc;
  --venetian-blue-light: #4d9aff;
  --venetian-blue-glow:  rgba(26, 111, 220, 0.35);

  /* Semantic */
  --accent:   var(--aurora-green);
  --accent2:  var(--aurora-teal);

  /* Text */
  --text:       #d0f8ee;
  --text-dim:   #86aeaa;   /* 7.6:1 on the cards (was #5a9090, 5.2:1) */
  --text-muted: #5f9393;   /* 4.8:1, WCAG AA (was #1e4040, 1.7:1: citations and degrees were near invisible) */

  /* Gradients — electric green → cobalt → deep violet */
  --aurora-grad: linear-gradient(135deg,
    #00ff88 0%, #00e8b8 18%, #1a6fdc 40%, #0a60f0 55%, #7830dd 75%, #dd40f8 100%);
  --aurora-grad-soft: linear-gradient(135deg,
    rgba(0,255,136,0.15) 0%, rgba(0,232,184,0.14) 25%,
    rgba(26,111,220,0.18) 50%, rgba(120,48,221,0.12) 80%,
    rgba(221,64,248,0.10) 100%);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

/* ── AURORA ANIMATED BACKGROUND ── */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;  /* isolate aurora from page layout recalcs */
}

.aurora-layer {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Layer 1 — electric green curtain (main aurora, top-left sweep) */
.al1 {
  width: 110vw;
  height: 38vh;
  top: -12vh;
  left: -10vw;
  background: radial-gradient(ellipse 75% 60% at 38% 55%,
    rgba(0,255,136,0.42) 0%,
    rgba(0,232,184,0.22) 45%,
    transparent 70%);
  filter: blur(44px);
  animation: al1move 18s ease-in-out infinite alternate;
}

/* Layer 2 — violet/purple band (upper right) */
.al2 {
  width: 90vw;
  height: 48vh;
  top: -18vh;
  right: -12vw;
  background: radial-gradient(ellipse 65% 55% at 58% 42%,
    rgba(120,48,221,0.32) 0%,
    rgba(221,64,248,0.16) 50%,
    transparent 70%);
  filter: blur(52px);
  animation: al2move 23s ease-in-out infinite alternate;
}

/* Layer 3 — cobalt blue mid-sky */
.al3 {
  width: 85vw;
  height: 42vh;
  top: -2vh;
  left: 8vw;
  background: radial-gradient(ellipse 58% 52% at 50% 58%,
    rgba(26,111,220,0.28) 0%,
    rgba(10,96,240,0.16) 50%,
    transparent 70%);
  filter: blur(62px);
  animation: al3move 15s ease-in-out infinite alternate;
}

/* Layer 4 — warm amber horizon glow (subtle, lower) */
.al4 {
  width: 70vw;
  height: 28vh;
  bottom: 12vh;
  left: 15vw;
  background: radial-gradient(ellipse 55% 55% at 50% 50%,
    rgba(255,136,34,0.14) 0%,
    rgba(255,80,20,0.07) 55%,
    transparent 72%);
  filter: blur(72px);
  animation: al4move 26s ease-in-out infinite alternate;
}

@keyframes al1move {
  0%   { transform: translateX(-8vw)  translateY(4vh);  opacity: 0.60; }
  28%  { transform: translateX(5vw)   translateY(-6vh); opacity: 0.92; }
  62%  { transform: translateX(12vw)  translateY(7vh);  opacity: 0.72; }
  100% { transform: translateX(-3vw)  translateY(-3vh); opacity: 0.80; }
}

@keyframes al2move {
  0%   { transform: translateX(7vw)   translateY(-4vh); opacity: 0.48; }
  38%  { transform: translateX(-9vw)  translateY(6vh);  opacity: 0.76; }
  72%  { transform: translateX(5vw)   translateY(-9vh); opacity: 0.54; }
  100% { transform: translateX(-2vw)  translateY(4vh);  opacity: 0.62; }
}

@keyframes al3move {
  0%   { transform: translateX(0)     translateY(0);    opacity: 0.38; }
  50%  { transform: translateX(-7vw)  translateY(5vh);  opacity: 0.64; }
  100% { transform: translateX(6vw)   translateY(-4vh); opacity: 0.44; }
}

@keyframes al4move {
  0%   { transform: translateX(5vw)   translateY(3vh);  opacity: 0.28; }
  48%  { transform: translateX(-6vw)  translateY(-6vh); opacity: 0.50; }
  100% { transform: translateX(4vw)   translateY(5vh);  opacity: 0.32; }
}

.hidden { display: none !important; }

/* ── CONTENT Z-INDEX (above aurora layers) ── */
.site-header,
.input-section,
.results-section,
.loading-overlay,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ── AURORA HEADER ── */
.site-header {
  padding: 36px 0 28px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Animated aurora curtain — new photo palette */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,255,136,0.12) 0%,
    rgba(0,232,184,0.10) 20%,
    rgba(26,111,220,0.13) 40%,
    rgba(120,48,221,0.08) 65%,
    rgba(221,64,248,0.05) 85%,
    transparent 100%);
  animation: auroraShift 8s ease-in-out infinite alternate;
}
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--aurora-green) 25%,
    var(--aurora-cyan) 50%, var(--aurora-violet) 75%, transparent 100%);
  opacity: 0.6;
}

@keyframes shlokGlow {
  0%   { filter: drop-shadow(0 0 8px rgba(0,255,136,0.70)) drop-shadow(0 0 20px rgba(0,232,184,0.40)) drop-shadow(0 0 40px rgba(0,255,136,0.15)); }
  25%  { filter: drop-shadow(0 0 10px rgba(77,154,255,0.75)) drop-shadow(0 0 26px rgba(26,111,220,0.45)) drop-shadow(0 0 50px rgba(77,154,255,0.18)); }
  55%  { filter: drop-shadow(0 0 12px rgba(170,64,238,0.80)) drop-shadow(0 0 30px rgba(120,48,221,0.50)) drop-shadow(0 0 55px rgba(170,64,238,0.20)); }
  80%  { filter: drop-shadow(0 0 10px rgba(221,64,248,0.75)) drop-shadow(0 0 28px rgba(200,40,220,0.48)) drop-shadow(0 0 52px rgba(221,64,248,0.18)); }
  100% { filter: drop-shadow(0 0 8px rgba(0,255,136,0.70)) drop-shadow(0 0 20px rgba(0,232,184,0.40)) drop-shadow(0 0 40px rgba(0,255,136,0.15)); }
}

@keyframes shlokShimmer {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

@keyframes auroraShift {
  0%   { opacity: 0.7; transform: skewX(-1deg) scaleX(1.02); }
  50%  { opacity: 1;   transform: skewX(0.5deg) scaleX(1); }
  100% { opacity: 0.8; transform: skewX(1deg) scaleX(0.98); }
}

.header-inner { position: relative; z-index: 1; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.logo-star {
  font-size: 30px;
  background: var(--aurora-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: starPulse 4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(0,255,136,0.6));
}
@keyframes starPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0,255,136,0.5)); }
  50%       { filter: drop-shadow(0 0 22px rgba(0,255,136,0.9)); }
}

.logo-text {
  font-family: 'Cinzel', serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 4px;
  background: var(--aurora-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0,201,212,0.4));
}
.tagline {
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.shlok {
  margin-top: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.5px;
  animation: shlokGlow 7s ease-in-out infinite;
}
.shlok-line {
  display: inline-block;
  background: linear-gradient(270deg,
    #00ff88, #00e8b8, #4d9aff, #aa40ee, #dd40f8, #ff6eb4, #4d9aff, #00e8b8, #00ff88);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shlokShimmer 8s ease-in-out infinite;
}
.shlok-line:last-child {
  animation-delay: 1s;
}

/* ── FORM ── */
.input-section {
  max-width: 760px;
  margin: 44px auto;
  padding: 0 20px;
}

.form-card {
  background: rgba(5, 10, 22, 0.88);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 36px;
  box-shadow:
    0 0 0 1px rgba(0,255,136,0.05),
    0 4px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(0,255,136,0.08);
}

.form-title {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--aurora-teal);
  margin-bottom: 28px;
  letter-spacing: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.span-2 { grid-column: 1 / -1; }

label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aurora-green);
  opacity: 0.7;
}

input[type="date"],
input[type="time"],
input[type="text"],
.form-group input[type="search"] {
  background: rgba(0,30,40,0.7);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 11px 15px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
input:focus {
  border-color: var(--aurora-green);
  box-shadow: 0 0 0 3px rgba(0,255,136,0.12), 0 0 20px rgba(0,255,136,0.08);
}
input::placeholder { color: var(--text-muted); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5) sepia(1) saturate(3) hue-rotate(130deg);
  cursor: pointer;
}

/* ── Birth date and time in parts (lib/birth-datetime.js, 2026-10-09) ──
   Day · Month · Year and Hour : Minute AM|PM, with a line under them that
   reads the whole thing back in words, or says what is missing. */
/* Boxes never shrink below what they show ("30", "Sep", "1994", "12"): a row
   too narrow for them wraps — the year, or the AM|PM switch — rather than
   squeezing them or running past its box. The minimums (with 8px gaps,
   ~205px at 16px) fit Matching's half-width person box on a 360px phone. */
.bdt-date { display: flex; flex-wrap: wrap; gap: 8px; }
.bdt-date .bdt-day { flex: 0 0 3em; }
.bdt-date .bdt-month { flex: 1 1 4.6em; }
.bdt-date .bdt-year { flex: 0 0 4.2em; }
.bdt-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bdt-date input, .bdt-time input { min-width: 0; padding: 11px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.bdt-time input { flex: 0 0 3.6em; width: 3.6em; }
.bdt-date .bdt-month { min-width: 4.6em; padding-left: 9px; padding-right: 22px; background-position: right 8px center; }
.bdt-colon { color: var(--text-dim); font-weight: 600; }
.bdt-ampm { display: inline-flex; flex: 0 0 auto; margin-left: 6px; border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; }
.bdt-ap {
  min-width: 46px; min-height: 42px; padding: 0 10px; border: 0; background: rgba(0,30,40,0.7);
  color: var(--text-dim); font: 600 13px 'Inter', sans-serif; letter-spacing: 0.5px; cursor: pointer;
}
.bdt-ap + .bdt-ap { border-left: 1px solid var(--border2); }
.bdt-ap[aria-checked="true"] { background: rgba(0,232,184,0.18); color: var(--aurora-teal); }
.bdt-ap:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: -2px; }
.bdt-invalid input, .bdt-invalid select { border-color: rgba(255,140,120,0.55); }
.bdt-readback { grid-column: 1 / -1; margin: -8px 0 0; min-height: 1.3em; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.bdt-readback.bdt-err { color: #ffab9c; }

/* The form's error box (app.js showFormError). */
.form-error-msg {
  margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: 13px; line-height: 1.6; text-align: center;
  background: rgba(255,85,85,0.12); border: 1px solid rgba(255,85,85,0.35); color: #fca5a5;
}

.calculate-btn {
  width: 100%;
  background: var(--aurora-grad);
  border: none;
  border-radius: 12px;
  color: #050d18;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  padding: 16px 24px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  box-shadow: 0 0 24px rgba(0,255,136,0.22), 0 0 48px rgba(26,111,220,0.12);
}
.calculate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(0,255,136,0.38), 0 0 70px rgba(120,48,221,0.22);
  filter: brightness(1.08);
}
.calculate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-icon { font-size: 18px; }

/* ── label hint ── */
.label-hint {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* ── SAVED PROFILES ── */
.saved-profiles-section {
  margin-top: 14px;
  background: rgba(5, 10, 22, 0.88);
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
}
.saved-profiles-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.saved-profiles-header:hover { background: rgba(0,232,184,0.05); border-bottom-color: var(--border); }
.saved-icon { font-size: 14px; color: var(--aurora-teal); }
.saved-title { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--aurora-teal); }
.saved-count { font-size: 11px; color: var(--text-dim); }
.saved-chevron { margin-left: auto; font-size: 12px; color: var(--text-dim); transition: transform 0.25s; }

.saved-profiles-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease, opacity 0.25s;
  opacity: 1;
  overflow: visible;
}
.saved-profiles-body.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.saved-profiles-body > * { overflow: visible; min-height: 0; }

.saved-profiles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  overflow: visible;
}
.saved-profiles-body { overflow: visible !important; }
.saved-profiles-section { overflow: visible; }
.saved-profiles-table thead th {
  padding: 8px 16px;
  text-align: left;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}
.profile-row {
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(0,232,184,0.06);
}
.profile-row:last-child { border-bottom: none; }
.profile-row:hover { background: rgba(0,232,184,0.07); }
.profile-row td { padding: 9px 16px; }
.profile-row .pname { font-weight: 600; color: var(--text); }
.profile-row .pplace { color: var(--text-dim); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-row .psaved { color: var(--text-dim); font-size: 11px; }

/* Kundali stacking: search, sort, five at a time (renderSavedProfiles) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.sp-tools[hidden], .sp-foot[hidden] { display: none; }
.sp-search, .sp-sort {
  font: inherit; font-size: 12px; color: var(--text);
  background: rgba(0,0,0,0.25); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 10px;
}
.sp-search { flex: 1 1 200px; min-width: 0; }
.sp-search:focus-visible, .sp-sort:focus-visible, .sp-more:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: 1px; }
.sp-sortwrap { display: inline-flex; align-items: center; gap: 8px; }
.sp-sort-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }
.sp-more { font: inherit; font-size: 12px; color: var(--aurora-teal); background: none; border: 1px solid var(--border2); border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.sp-more:hover { background: rgba(0,232,184,0.07); }
.sp-empty td { padding: 14px 16px; color: var(--text-dim); font-size: 12px; }

.pmenu-cell { width: 36px; text-align: center; }

.profile-menu-wrap { position: relative; display: inline-block; }

.profile-menu-btn {
  background: none;
  border: 1px solid rgba(0,232,184,0.18);
  color: rgba(0,232,184,0.55);
  width: 26px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.profile-menu-btn:hover { background: rgba(0,232,184,0.08); color: var(--aurora-teal); border-color: rgba(0,232,184,0.4); }

.profile-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100;
  background: #0a1a2e;
  border: 1px solid rgba(0,232,184,0.25);
  border-radius: 8px;
  overflow: hidden;
  min-width: 110px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.profile-menu-dropdown.open { display: block; }

.profile-menu-dropdown button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.pmenu-edit  { color: rgba(0,232,184,0.85); }
.pmenu-edit:hover  { background: rgba(0,232,184,0.10); }
.profile-menu-dropdown { min-width: 200px; }
.profile-menu-dropdown button { white-space: nowrap; }
.pmenu-bday  { color: rgba(255,215,0,0.85); }
.pmenu-bday:hover  { background: rgba(255,215,0,0.08); }
.pmenu-share { color: rgba(122,184,255,0.9); }
.pmenu-share:hover { background: rgba(122,184,255,0.10); }
.flash-msg { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: #0b1a2a; color: var(--text); border: 1px solid var(--border2); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: opacity .25s, transform .25s; z-index: 10000; }
.flash-msg.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .flash-msg { transition: none; } }
.flash-msg.has-action { pointer-events: auto; }
.flash-act { margin-left: 8px; font: 600 13px 'Inter', sans-serif; color: var(--aurora-teal); background: none;
  border: 1px solid var(--border2); border-radius: 8px; padding: 4px 12px; min-height: 32px; cursor: pointer; }
.flash-act:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 2px; }
/* Leaving an edit without saving (exitEditMode). */
.edit-cancel { display: block; margin: 10px auto 0; font: 500 13px 'Inter', sans-serif; color: var(--text-dim);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 36px; }
.edit-cancel[hidden] { display: none; }
.edit-cancel:hover { color: var(--text); }
.pmenu-delete { color: rgba(255,100,100,0.8); border-top: 1px solid rgba(255,255,255,0.06) !important; }
.pmenu-delete:hover { background: rgba(255,60,60,0.12); }

/* Edit mode button state */
.calculate-btn.edit-mode {
  background: linear-gradient(135deg, #00e8b8 0%, #1a6fdc 50%, #7830dd 100%);
  box-shadow: 0 0 24px rgba(0,232,184,0.28), 0 0 48px rgba(26,111,220,0.15);
}

/* ── LOADING ── */
.loading-overlay {
  display: flex;
  justify-content: center;
  padding: 48px 20px;
}
.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.loading-spinner {
  width: 52px; height: 52px;
  border: 2px solid rgba(0,255,136,0.15);
  border-top-color: var(--aurora-green);
  border-right-color: var(--aurora-teal);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 20px rgba(0,255,136,0.22);
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text {
  color: var(--aurora-teal);
  font-size: 13px;
  letter-spacing: 2px;
  font-family: 'Inter', sans-serif;
}
/* The steps behind it (loadSteps in app.js) */
.loading-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; color: var(--text-muted); min-width: 260px; }
.loading-steps li { display: flex; align-items: center; gap: 8px; opacity: .45; }
.loading-steps li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.loading-steps li.now { opacity: 1; color: var(--aurora-teal); }
.loading-steps li.now::before { background: var(--aurora-teal); border-color: var(--aurora-teal); box-shadow: 0 0 8px var(--aurora-teal); }
.loading-steps li.done { opacity: .8; color: var(--text-dim); }
.loading-steps li.done::before { content: '✓'; border: 0; width: auto; height: auto; font-size: 10px; color: var(--aurora-green); }
@media (prefers-reduced-motion: reduce) { .loading-steps li.now::before { box-shadow: none; } }

/* ── RESULTS LAYOUT ── */
.results-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.location-badge {
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 28px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.top-row {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}

/* ── CARDS ── */
.card {
  background: rgba(5, 10, 22, 0.88);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 2px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(0,255,136,0.06);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
  border-color: var(--border2);
  box-shadow:
    0 4px 40px rgba(0,0,0,0.55),
    0 0 30px rgba(0,255,136,0.04),
    inset 0 1px 0 rgba(0,255,136,0.08);
}

.card-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--aurora-teal);
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  text-shadow: 0 0 20px rgba(0,201,212,0.3);
}
.card-title .subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0;
  font-weight: 400;
}

/* ── CHART CARD HEADER (title + Vedic/Western tabs) ── */
.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.chart-card-header .card-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.chart-type-tabs {
  display: flex;
  gap: 3px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.chart-tab {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}
.chart-tab:hover:not(.active) { color: var(--aurora-teal); }
.chart-tab.active {
  background: rgba(26,111,220,0.22);
  border-color: rgba(26,111,220,0.35);
  color: var(--venetian-blue-light);
}

/* ── KUNDALI / WESTERN CHART WRAPPERS ── */
.chart-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart-wrapper svg {
  max-width: 460px;
  width: 100%;
  height: auto;
}

/* ── INFLUENTIAL PLANETS ── */
.influential-list { display: flex; flex-direction: column; gap: 12px; }

.inf-card {
  display: grid;
  grid-template-columns: 28px 38px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: rgba(0,20,30,0.5);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.inf-card:hover {
  border-color: var(--border2);
  box-shadow: 0 0 20px rgba(0,229,160,0.06);
}
.inf-rank {
  font-size: 10px;
  color: var(--venetian-blue-light);
  text-align: center;
  background: rgba(26,111,220,0.12);
  border: 1px solid rgba(26,111,220,0.3);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.inf-symbol { font-size: 22px; text-align: center; }
.inf-name   { font-size: 14px; font-weight: 500; }
.inf-meta   { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.inf-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.badge-pct {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(0,229,160,0.10);
  color: var(--aurora-green);
  border: 1px solid rgba(0,229,160,0.2);
}
.badge-ff { font-size: 11px; padding: 2px 9px; border-radius: 20px; }
.ff-friend  { background: rgba(0,229,160,0.10); color: var(--aurora-green); border: 1px solid rgba(0,229,160,0.2); }
.ff-neutral { background: rgba(90,144,144,0.10); color: var(--text-dim); border: 1px solid var(--border); }
.ff-enemy   { background: rgba(255,80,80,0.10);  color: #ff6b6b; border: 1px solid rgba(255,80,80,0.2); }

.no-data { color: var(--text-muted); font-size: 13px; padding: 20px 0; font-style: italic; }

/* ── PLANET TABLE ── */
.table-card { margin-bottom: 24px; }
.table-scroll { overflow-x: auto; }

table.pt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
table.pt thead th {
  text-align: left;
  padding: 9px 14px;
  color: var(--aurora-green);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border2);
  white-space: nowrap;
  opacity: 0.8;
}
table.pt tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text);
}
table.pt tbody tr:last-child td { border-bottom: none; }
table.pt tbody tr:hover td {
  background: rgba(0,229,160,0.03);
}
table.pt tbody tr.influential-row td {
  background: rgba(0,229,160,0.04);
}
table.pt tbody tr.influential-row:hover td {
  background: rgba(0,229,160,0.08);
}

.planet-cell { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.planet-sym  { font-size: 16px; }

.retro-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,80,80,0.12);
  color: #ff6b6b;
  letter-spacing: 1px;
  border: 1px solid rgba(255,80,80,0.2);
}
.str-strong { color: var(--aurora-green); }
.str-weak   { color: #ff6b6b; }
.str-ok     { color: var(--text-dim); }

.pct-bar-wrap { display: flex; align-items: center; gap: 8px; }
.pct-bar {
  width: 60px; height: 4px;
  background: rgba(0,229,160,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.pct-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aurora-green), var(--aurora-cyan));
  box-shadow: 0 0 6px rgba(0,255,136,0.5);
}

.ff-val { font-weight: 500; font-size: 11px; white-space: nowrap; padding: 2px 5px; border-radius: 4px; }
.ff-pos { color: var(--aurora-green); background: rgba(0,255,136,0.08); }
.ff-neg { color: #ff6b6b; background: rgba(255,107,107,0.10); }
.ff-neu { color: var(--text-muted); background: rgba(255,255,255,0.05); }

/* ── PLANET TABLE — table unit sub-label ── */
.th-unit {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0;
  font-weight: 400;
  text-transform: none;
}

/* ── INFO TIP (hover tooltip on table header) ── */
.info-tip {
  cursor: help;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: rgba(0,255,136,0.10);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 50%;
  font-size: 9px;
  color: var(--aurora-green);
  vertical-align: middle;
  margin-left: 4px;
  transition: background 0.2s;
}
.info-tip:hover { background: rgba(0,255,136,0.20); }
/* Headings set small caps and tracking; the "i" keeps its own face. */
.info-tip { text-transform: none; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0; font-style: normal; }

/* ── STRENGTH EXPLAINER PANEL ── */
.strength-explainer {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.se-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(0,0,0,0.20);
  user-select: none;
  transition: background 0.2s, color 0.2s;
}
.se-toggle:hover { background: rgba(0,255,136,0.05); color: var(--aurora-teal); }
.se-icon { color: var(--aurora-green); font-size: 13px; }
.se-chevron { margin-left: auto; font-size: 11px; transition: transform 0.25s; }
.strength-explainer.open .se-chevron { transform: rotate(180deg); }

.se-body {
  display: none;
  padding: 18px 18px 16px;
  background: rgba(0,10,18,0.4);
  border-top: 1px solid var(--border);
}
.strength-explainer.open .se-body { display: block; }

.se-formula {
  font-size: 13px;
  color: var(--text);
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.12);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}
.se-hi { color: var(--aurora-green); font-weight: 600; }

.se-steps { display: flex; flex-direction: column; gap: 12px; }
.se-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.65;
}
.se-num {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(26,111,220,0.18);
  border: 1px solid rgba(26,111,220,0.35);
  color: var(--venetian-blue-light);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.se-req {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* ── PLANET STRENGTH — Shadbala + Vimsopaka (app.js PlanetStrength) ──
   Designed in design/shadbala.html. Everything is under ps-/vg-/band-. */
.ps-card       { margin-bottom: 24px; }
.ps-lede       { font-size: 12.5px; color: var(--text-dim); margin: 4px 0 16px; max-width: 760px; }
.ps-empty      { font-size: 12.5px; color: var(--text-dim); padding: 26px 8px; text-align: center; }
.ps-summary    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-web        { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 6px; }
.ps-web header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.ps-web h4     { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--text); margin: 0; }
.ps-web header p { flex-basis: 100%; margin: 2px 0 0; font-size: 11.5px; color: var(--text-dim); }
.ps-web svg    { display: block; width: 100%; max-width: 400px; margin: 4px auto 0; overflow: visible; }
.ps-ring       { fill: none; stroke: var(--border2); stroke-width: 1; }
.ps-ring.key   { stroke: var(--text); stroke-opacity: .55; stroke-dasharray: 4 3; }
.ps-ringlbl    { fill: var(--text-dim); font-size: 9px; letter-spacing: .06em; }
.ps-ringlbl.key { fill: var(--text); opacity: .8; }
.ps-spoke      { stroke: var(--border); stroke-width: 1; }
.ps-area       { stroke-width: 1.6; stroke-linejoin: round; }
.ps-area.shad  { fill: rgba(0,232,184,.16); stroke: var(--aurora-teal); }
.ps-area.vims  { fill: rgba(120,48,221,.22); stroke: var(--aurora-purple); }
.ps-dot        { stroke: var(--bg); stroke-width: 1.5; }
.ps-axis       { cursor: pointer; outline: none; }
.ps-axis rect  { fill: transparent; rx: 6; }
.ps-axis:hover rect, .ps-axis:focus-visible rect { fill: rgba(0,255,136,.08); stroke: var(--border-glow); }
.ps-axis text  { font-size: 11.5px; fill: var(--text); }
.ps-axis .val  { font-size: 11px; font-variant-numeric: tabular-nums; }
.ps-seg        { display: inline-flex; border: 1px solid var(--border2); border-radius: 7px; overflow: hidden; }
.ps-seg button { background: transparent; border: none; color: var(--text-dim); font: inherit; font-size: 10.5px;
                 letter-spacing: .05em; padding: 5px 9px; min-height: 26px; cursor: pointer; }
.ps-seg button + button { border-left: 1px solid var(--border2); }
.ps-seg button[aria-pressed="true"] { background: rgba(120,48,221,.28); color: var(--text); }
.ps-seg button:focus-visible { outline: 2px solid var(--border-glow); outline-offset: -2px; }

.ps-block      { margin-top: 34px; }
.ps-h          { font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--text); margin: 0; }
.ps-sub        { font-size: 12px; color: var(--text-dim); margin: 5px 0 12px; max-width: 760px; }
.ps-key        { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 11.5px; color: var(--text-dim); }
.ps-key span   { display: inline-flex; align-items: center; gap: 6px; }
.ps-key i      { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* one row per planet: label · stacked bar · verdict */
.ps-rows       { display: flex; flex-direction: column; gap: 2px; }
.ps-row        { display: grid; grid-template-columns: 236px 1fr 104px; align-items: center; gap: 12px;
                 border: 1px solid transparent; border-radius: 10px; padding: 11px 12px; outline: none; }
.ps-row:hover  { background: var(--bg3); border-color: var(--border2); }
.ps-row.ps-flash { animation: psFlash 1.6s ease-out; }
@keyframes psFlash { 0%, 35% { background: rgba(0,232,184,.12); border-color: var(--border-glow); } 100% { background: transparent; } }
.ps-lab        { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ps-gl         { font-size: 19px; width: 22px; text-align: center; }
.ps-nm         { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .04em; color: var(--text); }
.ps-pos        { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ps-flag       { font-size: 9.5px; letter-spacing: .08em; border: 1px solid currentColor; border-radius: 3px;
                 padding: 0 4px; margin-left: 5px; opacity: .85; }
.ps-track      { position: relative; height: 40px; }
.ps-stack      { display: flex; height: 26px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.03); }
.ps-seg-bar    { height: 100%; border: none; padding: 0; cursor: pointer; min-width: 14px; transition: filter .12s; }
/* Components the chart service supplies are hatched faintly: a total, not a working. */
.ps-seg-bar.up { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.16) 0 2px, transparent 2px 7px) !important;
                 background-blend-mode: multiply; }
.ps-seg-bar:hover, .ps-seg-bar:focus-visible { filter: brightness(1.45); outline: none; }
.ps-neg        { position: absolute; top: 27px; height: 10px; min-width: 14px; border-radius: 0 0 3px 3px; border: none;
                 padding: 0; cursor: pointer;
                 background: repeating-linear-gradient(45deg, var(--aurora-amber) 0 3px, rgba(255,136,34,.45) 3px 6px); }
.ps-req        { position: absolute; top: -3px; height: 32px; width: 2px; background: var(--text); opacity: .55; }
.ps-req.lbl::after { content: 'required'; position: absolute; top: -12px; left: 4px; font-size: 8.5px;
                 letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.ps-ratio      { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.ps-ratio b    { font-weight: 500; }
.ps-ratio small { display: block; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .8; }
.ps-ratio u    { display: block; text-decoration: none; font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.ps-strong     { color: var(--aurora-green); }
/* the chart-wide inputs the Kala parts share */
.ps-cond       { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ps-cond dl    { display: flex; align-items: baseline; gap: 7px; margin: 0; background: var(--bg3);
                 border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; }
.ps-cond dt    { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-dim); }
.ps-cond dd    { margin: 0; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
/* rows whose Kala is computed here open to its nine parts */
button.ps-open { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit;
                 color: inherit; text-align: left; width: 100%; min-height: 26px; }
button.ps-open:focus-visible { outline: 2px solid var(--border-glow); outline-offset: 3px; border-radius: 6px; }
.ps-chev       { color: var(--text-dim); transition: transform .15s; flex: none; }
.ps-open[aria-expanded="true"] .ps-chev { transform: rotate(90deg); }
.ps-row.open   { background: var(--bg3); border-color: var(--border-glow); }
.ps-panel      { display: none; padding: 2px 12px 18px 46px; }
.ps-panel.open { display: block; }
.ps-subh       { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 8px; }
.ps-parts      { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-chip       { display: inline-flex; align-items: baseline; gap: 6px; background: var(--bg2); border: 1px solid var(--border);
                 border-radius: 6px; padding: 5px 9px; min-height: 28px; cursor: pointer; font: inherit; font-size: 12px; color: var(--text); }
.ps-chip:hover, .ps-chip:focus-visible { border-color: var(--border-glow); outline: none; }
.ps-chip u     { text-decoration: none; color: var(--text-dim); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.ps-chip b     { font-weight: 500; font-variant-numeric: tabular-nums; }
.ps-chip.zero  { opacity: .62; }
.ps-weak       { color: var(--aurora-amber); }
.ps-edge       { color: var(--aurora-cyan); }

/* Vimsopaka: planets x schemes */
.vg            { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.vg th         { font-weight: 400; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                 color: var(--text-dim); text-align: left; padding: 0 8px 4px; }
.vg th button  { all: unset; cursor: pointer; border-bottom: 1px dashed transparent; }
.vg th button:hover, .vg th button:focus-visible { color: var(--text); border-bottom-color: var(--border-glow); }
.vg th.sel     { color: #c27bff; }   /* aurora-purple was 4.4:1 */
.vg th small   { display: block; letter-spacing: .04em; text-transform: none; font-size: 10px; color: var(--text-dim); }
.vg th .s      { display: none; }
.vg td         { padding: 0 4px; }
.vg td.pl      { white-space: nowrap; padding: 0 8px; font-family: 'Cinzel', serif; font-size: 13px; color: var(--text); }
.vg td.pl span { display: inline-block; width: 22px; text-align: center; }
.vg-cell       { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; width: 100%;
                 min-height: 34px; background: var(--bg2); border: 1px solid var(--border); border-radius: 7px;
                 padding: 5px 9px; cursor: pointer; font: inherit; }
.vg-cell:hover, .vg-cell:focus-visible { border-color: var(--border-glow); outline: none; }
.vg-cell b     { font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: left; color: currentColor; }
.vg-cell i     { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.05); position: relative; }
.vg-cell i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px;
                 background: currentColor; opacity: .8; }
.vg td.sel .vg-cell { border-color: rgba(170,64,238,.55); }
.band-wf       { color: var(--aurora-green); }
.band-md       { color: var(--aurora-cyan); }
.band-sg       { color: var(--aurora-amber); }
.band-in       { color: var(--text-dim); }
.vg-legend     { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11px; color: var(--text-dim); }
.vg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vg-legend i   { width: 10px; height: 10px; border-radius: 2px; background: currentColor; display: inline-block; }

/* tooltip: method in words, then the arithmetic */
.ps-tip        { position: absolute; z-index: 60; max-width: 340px; max-height: calc(100vh - 20px); overflow-y: auto;
                 background: var(--bg-glass); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border: 1px solid var(--border-glow);
                 border-radius: 10px; padding: 13px 15px; box-shadow: 0 12px 34px rgba(0,0,0,.6);
                 font-size: 12.5px; line-height: 1.55; color: var(--text); }
.ps-tip.wide   { max-width: min(392px, calc(100vw - 20px)); }
.ps-tip h4     { font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: .05em; margin: 0 0 2px;
                 display: flex; justify-content: space-between; gap: 12px; }
.ps-tip h4 em  { font-style: normal; font-variant-numeric: tabular-nums; color: var(--aurora-teal); }
.ps-tip .method { color: var(--text-dim); margin: 7px 0; }
.ps-tip .method strong { color: var(--aurora-amber); font-weight: 500; }
.ps-tip .calc  { font-family: ui-monospace, 'SFMono-Regular', monospace; font-size: 11.5px; background: rgba(0,0,0,.34);
                 border-radius: 5px; padding: 7px 9px; margin: 7px 0; white-space: pre-wrap; color: var(--aurora-cyan); }
.ps-tip .cite  { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.ps-tip .badge { display: inline-block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--aurora-amber); border: 1px solid var(--aurora-amber); border-radius: 3px;
                 padding: 0 4px; margin-bottom: 6px; }

@media (max-width: 860px) {
  .ps-summary  { grid-template-columns: 1fr; }
  .ps-row      { grid-template-columns: 1fr auto; row-gap: 9px; padding: 13px 10px; }
  .ps-lab      { grid-column: 1; grid-row: 1; }
  .ps-ratio    { grid-column: 2; grid-row: 1; }
  .ps-track    { grid-column: 1 / 3; grid-row: 2; height: 38px; }
  .ps-ratio small { display: inline; margin-left: 6px; }
  .ps-nm       { font-size: 13px; }
  .ps-key      { gap: 9px; font-size: 10.5px; }
  .ps-cond     { gap: 5px; margin: 2px 0 12px; }
  .ps-cond dl  { padding: 4px 8px; gap: 5px; }
  .ps-cond dt  { font-size: 8.5px; letter-spacing: .07em; }
  .ps-cond dd  { font-size: 11.5px; }
  .ps-panel    { padding-left: 10px; }
  .vg th small { display: none; }
  /* The grid must fit a phone inside the card: short scheme names, fixed columns. */
  .vg          { table-layout: fixed; }
  .vg th:first-child { width: 30px; font-size: 0; }   /* glyph column: header kept for screen readers */
  .vg th .l    { display: none; }
  .vg th .s    { display: inline; }
  .vg th       { padding: 0 4px 4px; letter-spacing: .04em; }
  .vg td       { padding: 0 2px; }
  .vg-cell b   { min-width: 0; font-size: 12.5px; }
  .vg-cell     { grid-template-columns: 1fr; gap: 3px; padding: 5px 7px; }
  .vg td.pl    { padding: 0 4px; font-size: 0; }        /* glyph only on phones */
  .vg td.pl span { font-size: 17px; }
}

/* ── TAB NAVIGATION ── */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.tab-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* Phones: the actions on their own row above the tabs, the tabs the full width. */
@media (max-width: 600px) {
  .tab-bar { flex-wrap: wrap; row-gap: 0; }
  .tab-actions { order: -1; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 10px; }
  .tab-nav { flex-basis: 100%; }
}
.tab-nav {
  display: flex;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* On a phone the five tabs are wider than the screen: scroll the bar
     sideways instead of widening the page (it used to zoom the whole page out). */
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
/* More tabs off to one side: fade that edge so the bar reads as scrollable
   (insights.js sets the classes). */
.tab-nav.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.tab-nav.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.tab-nav.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.tab-nav .tab-btn, .tab-actions .fr-open { flex: none; white-space: nowrap; }
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 12px 24px 14px;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--aurora-teal); }
.tab-btn.active {
  color: var(--venetian-blue-light);
  border-bottom-color: var(--venetian-blue);
  text-shadow: 0 0 16px var(--venetian-blue-glow);
}
.tab-icon { font-size: 16px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── INSIGHTS ── */
.insights-card { margin-bottom: 24px; }
.insights-loading {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 0;
  font-style: italic;
}

/* ── YOGA STYLES ── */
.yoga-summary {
  margin-bottom: 24px;
  padding: 12px 16px;
  background: rgba(0,229,160,0.05);
  border: 1px solid rgba(0,229,160,0.15);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-dim);
}
.yoga-count {
  font-size: 24px;
  font-weight: 600;
  color: var(--aurora-green);
  margin-right: 6px;
  text-shadow: 0 0 16px rgba(0,229,160,0.6);
}
.yoga-group { margin-bottom: 30px; }
.yoga-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 400;
  font-family: 'Cinzel', serif;
}
.yoga-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.yoga-card {
  background: rgba(0,15,25,0.6);
  border: 1px solid var(--border);
  border-left: 2px solid var(--aurora-green);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.yoga-card:hover {
  border-color: var(--border2);
  box-shadow: 0 0 24px rgba(0,229,160,0.06);
}
.yoga-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px;
}
.yoga-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.yoga-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.75;
  white-space: nowrap;
  margin-top: 2px;
}
.yoga-planets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.planet-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(0,229,160,0.06);
  border: 1px solid var(--border);
}
.sign-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(68,136,255,0.10);
  color: #88aaff;
  border: 1px solid rgba(68,136,255,0.2);
}
.yoga-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 10px;
}
.yoga-source {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  font-style: italic;
}

/* ── ASHTAKAVARGA ── */
table.av-table td { font-variant-numeric: tabular-nums; min-width: 26px; }
table.av-table thead th { line-height: 1.25; }
.av-h { display: block; font-size: 10px; color: var(--text-muted); letter-spacing: 0; font-weight: 400; }
table.pt tbody td.av-hi  { color: #44ff88; background: rgba(68,255,136,0.07); }
table.pt tbody td.av-mid { color: var(--text-dim); }
table.pt tbody td.av-lo  { color: #ff8a8a; }
.av-natal { box-shadow: inset 0 0 0 1.5px rgba(255,215,0,0.75); border-radius: 3px; }
.av-total { color: var(--text-muted); font-size: 10.5px; }
/* mt-table pins its last header to the right; pin the totals under it */
table.av-table td.av-total { position: sticky; right: 0; background: #071016; border-left: 1px solid var(--border2); z-index: 2; }
.av-sav > th, .av-sav > td { border-top: 1px solid var(--border-strong, rgba(255,255,255,0.18)); font-weight: 600; }

/* ── MATCHING (lib/matching-view.js) ── */
.mx-err { grid-column: 1 / -1; color: #fca5a5; font-size: 13px; margin: 0; }
.mx-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; font-size: 13.5px; color: var(--text-dim); }
.mx-summary b { color: var(--text); font-weight: 500; }
.match-results { margin-bottom: 36px; }
.mx-basis { color: var(--text); font-weight: 500; }
.mx-open { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.mx-open p { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.mx-open-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-open-btns .tr-btn { min-height: 44px; padding: 0 18px; }
.mx-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.mx-who { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; color: var(--text-dim); }
.mx-who b { color: var(--text); font-size: 14px; font-weight: 500; }
.mx-role { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.mx-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 16px; }
.mx-total > b { font-family: 'Cinzel', serif; font-size: 40px; font-weight: 400; line-height: 1; }
.mx-total > span { color: var(--text-dim); font-size: 15px; }
.mx-total p { flex-basis: 100%; margin: 4px 0 0; font-size: 13.5px; color: var(--text-dim); }
.mx-total.good > b { color: #44ff88; } .mx-total.mid > b { color: #e0a458; } .mx-total.bad > b { color: #ff7a7a; }
table.mx-table th[scope="row"] { text-align: left; font-family: 'Cinzel', serif; font-size: 12.5px; white-space: nowrap; vertical-align: top; }
.mx-shows { display: block; font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--text-dim); white-space: normal; max-width: 18ch; }
table.mx-table td.mx-detail { text-align: left; white-space: normal; font-size: 13px; line-height: 1.5; min-width: 22ch; }
table.mx-table td.mx-score { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: top; }
.mx-score span { font-size: 11.5px; color: var(--text-dim); }
table.pt tbody td.mx-score.good { color: #44ff88; } table.pt tbody td.mx-score.mid { color: #e0a458; } table.pt tbody td.mx-score.bad { color: #ff7a7a; }
.mx-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #9ec5ff;
  border: 1px solid rgba(158,197,255,0.45); background: rgba(158,197,255,0.08); vertical-align: 1px; }
.mx-why { margin-top: 6px; }
.mx-why summary, .mx-more summary { cursor: pointer; font-size: 12px; color: var(--aurora-green); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.mx-why summary::before, .mx-more summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
.mx-why[open] summary::before, .mx-more[open] summary::before { transform: rotate(90deg); }
.mx-why summary::-webkit-details-marker, .mx-more summary::-webkit-details-marker { display: none; }
.mx-why p { margin: 4px 0 2px; font-size: 13px; line-height: 1.6; color: var(--text); max-width: 72ch; }
.mx-cite { display: inline-block; margin-left: 4px; font-size: 11.5px; color: var(--text-dim); font-style: italic; }
.mx-cancel { display: block; margin-top: 4px; color: #9ec5ff; font-size: 12.5px; }
.mx-st { display: inline-block; min-width: 0; padding: 0 7px; margin-right: 6px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
.mx-st.ok { color: #3ddc97; background: rgba(61,220,151,0.12); } .mx-st.no { color: #ff8a8a; background: rgba(255,122,122,0.12); }
.mx-st.mid { color: #9ec5ff; background: rgba(158,197,255,0.12); }
.mx-sec { margin-top: 22px; }
.mx-sec h4 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; margin: 0 0 8px; color: var(--text); }
.mx-sec h4 span:not(.info-tip) { font-family: 'Inter', sans-serif; font-size: 11.5px; font-style: italic; color: var(--text-dim); letter-spacing: 0; }
.mx-list { list-style: none; margin: 0; padding: 0; }
.mx-list li, .mx-mg li { padding: 5px 0 5px 10px; border-left: 2px solid rgba(255,255,255,.12); margin: 4px 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.mx-list li.good, .mx-mg li.good { border-left-color: #3ddc97; } .mx-list li.bad, .mx-mg li.bad { border-left-color: #ff7a7a; } .mx-list li.mid { border-left-color: #9ec5ff; }
.mx-grp { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.mx-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); font-family: 'Inter', sans-serif; letter-spacing: 0; }
.mx-cols, .mx-mgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mx-cols h5, .mx-mg h5 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.mx-mg h6 { margin: 12px 0 2px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.mx-mg ul { list-style: none; margin: 0; padding: 0; }
.mx-more { margin: 2px 0 6px; }
.mx-span { grid-column: 1 / -1; }
.mx-points { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,0.18); }
.mx-points h4 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; margin: 0 0 6px; color: var(--text); }
.mx-wcite { display: inline-block; margin-left: 6px; font-size: 11px; color: #c8a96a; font-family: 'Inter', sans-serif; }
#tab-matching .info-tip { min-width: 18px; min-height: 18px; }
/* A finger needs more than 14px; the tap area grows, the circle does not. */
.info-tip[role="button"]::after { content: ""; position: absolute; inset: -8px; }
.mt-title .info-tip { margin-left: 8px; }
/* The "i"'s toggletip (Toggletip in app.js, 2026-10-10): one box, fixed to
   the viewport at its "i", the arrow at --ax; .up when it opens above. */
.tip-pop { position: fixed; z-index: 10000; top: 0; left: 0; box-sizing: border-box; padding: 10px 12px;
  background: #0b1a2c; border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.55; font-weight: 400; letter-spacing: 0;
  text-transform: none; font-style: normal; color: var(--text); text-align: left; animation: tip-in .12s ease-out; }
.tip-pop[hidden] { display: none; }
.tip-pop-text { white-space: pre-line; max-height: min(55vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.tip-pop-arrow { position: absolute; left: var(--ax, 50%); top: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); }
.tip-pop.up .tip-pop-arrow { top: auto; bottom: -6px; transform: rotate(225deg); }
@keyframes tip-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.tip-pop.up { animation-name: tip-in-up; }
@keyframes tip-in-up { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tip-pop { animation: none; } }
.info-tip[aria-expanded="true"] { background: rgba(0,255,136,0.28); border-color: var(--border-glow); }
.mx-varga { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.mx-varga label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-dim); }
#mx-varga-out p { font-size: 13px; line-height: 1.6; margin: 4px 0; color: var(--text); }
table.mx-papa { width: auto; } table.mx-papa td { text-align: center; font-variant-numeric: tabular-nums; }
.mx-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 8px 0 0; }
.mx-foot { margin-top: 22px; font-style: italic; }
@media (max-width: 640px) {
  .mx-head, .mx-mgs, .mx-cols, .mx-varga { grid-template-columns: minmax(0, 1fr); }
  .mx-total > b { font-size: 34px; }
  /* the score column must stay on screen: drop the gloss, let names wrap */
  table.mx-table th[scope="row"] { white-space: normal; padding-left: 0; }
  table.mx-table .mx-shows { display: none; }
  table.mx-table td.mx-detail { min-width: 0; }
  table.mx-table th, table.mx-table td { padding-left: 6px; padding-right: 6px; }
}

/* ── PANCHADHA MAITRI MATRICES ── */
.mt-lead {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 76ch;
}
.mt-lead b { color: var(--text-dim); font-weight: 500; }

.mt-section { margin-bottom: 30px; }
.mt-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 1.4px;
  color: var(--text);
  font-weight: 400;
  margin: 0 0 5px;
}
.mt-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  font-style: italic;
}
.mt-note {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 78ch;
}
.mt-note b { color: var(--text-dim); font-weight: 500; }
.mt-caveat { margin-top: 12px; margin-bottom: 0; font-style: italic; }

table.mt-table { font-size: 11.5px; }
table.mt-table th,
table.mt-table td {
  padding: 7px 9px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.mt-table thead th {
  font-size: 10px;
  letter-spacing: 0.6px;
  position: sticky;
  top: 0;
  background: #071016;
  z-index: 1;
}
table.mt-table th[scope="row"] {
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.4px;
  position: sticky;
  left: 0;
  background: #071016;
  z-index: 2;
}
.mt-corner {
  text-align: left !important;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0 !important;
  position: sticky;
  left: 0;
  z-index: 3;
}
.mt-pos { color: #44ff88; }
.mt-neg { color: #ff6b6b; }
.mt-neu { color: var(--text-muted); }
.mt-self { color: rgba(200,200,200,0.18); }
/* The score is the point of the third table, so it stays pinned while the
   nine columns scroll under it. */
.mt-score,
table.mt-table thead th:last-child {
  position: sticky;
  right: 0;
  background: #071016;
  border-left: 1px solid var(--border2);
  z-index: 2;
}
.mt-score {
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.mt-table thead th:last-child { z-index: 3; }

/* Row highlights: lagnesh always, plus the best and worst scores. */
.mt-table tr.mt-lagnesh > th[scope="row"] { box-shadow: inset 2px 0 0 var(--aurora-green); }
.mt-table tr.mt-lagnesh > td,
.mt-table tr.mt-lagnesh > th { background: rgba(0,229,160,0.07); }
.mt-table tr.mt-best > td,
.mt-table tr.mt-best > th { background: rgba(255,215,0,0.09); }
.mt-table tr.mt-worst > td,
.mt-table tr.mt-worst > th { background: rgba(255,85,85,0.09); }
.mt-table tr.mt-lagnesh.mt-best > td,
.mt-table tr.mt-lagnesh.mt-best > th { background: rgba(255,215,0,0.13); }
.mt-table tr.mt-lagnesh.mt-worst > td,
.mt-table tr.mt-lagnesh.mt-worst > th { background: rgba(255,85,85,0.13); }
.mt-table tr.mt-lagnesh > th[scope="row"],
.mt-table tr.mt-lagnesh > td.mt-score { background: #0a201c; }
.mt-table tr.mt-best > th[scope="row"],
.mt-table tr.mt-best > td.mt-score { background: #1a1708; }
.mt-table tr.mt-worst > th[scope="row"],
.mt-table tr.mt-worst > td.mt-score { background: #1d0d0d; }

.mt-tag {
  display: inline-block;
  margin-left: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--aurora-green);
  border: 1px solid rgba(0,229,160,0.35);
  border-radius: 6px;
  padding: 1px 5px;
  vertical-align: middle;
}

.mt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-muted);
  align-items: center;
}
.mt-key {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.mt-lagnesh-key { background: rgba(0,229,160,0.35); border: 1px solid var(--aurora-green); }
.mt-best-key    { background: rgba(255,215,0,0.3);  border: 1px solid #ffd700; }
.mt-worst-key   { background: rgba(255,85,85,0.3);  border: 1px solid #ff5555; }

/* ── INSIGHTS SUB-TABS ── */
.subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab-btn {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 12px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.subtab-btn:hover { color: var(--aurora-teal); }
.subtab-btn.active {
  color: var(--aurora-green);
  border-bottom-color: var(--aurora-green);
}
.subtab-btn:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: -2px; }
.subtab-count {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--text-dim);
  background: rgba(0,229,160,0.07);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.subtab-btn.active .subtab-count { color: var(--aurora-green); }
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }

/* ── SUMMARY: chart header ── */
.pva-asc-verse { flex-basis: 100%; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.65; color: var(--text); }
.pva-asc-verse p { margin: 0 0 6px; max-width: 75ch; }
.pva-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 30px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--aurora-green);
  border-radius: 14px;
  background: rgba(0,15,25,0.6);
}
.pva-header-main { display: flex; align-items: center; gap: 14px; }
.pva-lagna-sym { font-size: 30px; color: var(--aurora-green); line-height: 1; }
.pva-lagna-name {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.5px;
}
.pva-lagna-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.pva-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pva-fact { display: flex; flex-direction: column; gap: 2px; }
.pva-fact-k {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pva-fact-v { font-size: 12.5px; color: var(--text-dim); }

/* ── SUMMARY: sections ── */
.pva-section { margin-bottom: 34px; }
.pva-section-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--text);
  margin: 0 0 6px;
  font-weight: 400;
}
.pva-anticipated {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-style: italic;
}
.pva-section-lead {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
  max-width: 68ch;
  line-height: 1.6;
}

/* ── SUMMARY: planet behaviour cards ── */
.pva-planets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));   /* one column on a 320 px phone */
  gap: 12px;
  align-items: start;
}
.pva-planet {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,15,25,0.6);
  overflow: hidden;
  transition: border-color 0.25s;
}
.pva-planet.open { border-color: var(--border2); }
.pva-planet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 13px 15px 9px;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.pva-planet-head:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: -2px; }
.pva-planet-id { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pva-planet-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.5px;
}
.pva-chevron { color: var(--text-muted); font-size: 11px; transition: transform 0.25s; }
.pva-planet.open .pva-chevron { transform: rotate(180deg); }
.pva-planet-guna {
  padding: 0 15px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pva-planet-essence {
  padding: 7px 15px 14px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}
.pva-ref { border-top: 1px solid var(--border); padding: 4px 15px 14px; }
.pva-ref-block { margin-top: 12px; }
.pva-ref-label {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aurora-green);
  margin-bottom: 5px;
}
.pva-ref-block p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); }

/* ── SUMMARY: filter bar ── */
.pva-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0,15,25,0.5);
}
.pva-filter-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pva-select {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text);
  background: rgba(0,25,35,0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
  flex: 1 1 190px;
  max-width: 300px;
}
.pva-select:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 1px; }
.pva-tiers { display: flex; gap: 5px; margin-left: auto; }
.pva-tier {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 7px 12px;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pva-tier:hover { color: var(--text-dim); border-color: var(--border2); }
.pva-tier[aria-pressed="true"] { color: var(--aurora-green); border-color: var(--aurora-green); }
.pva-tier:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 1px; }

@media (max-width: 560px) {
  .pva-header { flex-direction: column; align-items: flex-start; }
  .pva-tiers { margin-left: 0; width: 100%; }
  .pva-tier { flex: 1; }
  .pva-select { max-width: none; }
}

/* ── PVA RULE FINDINGS ── */
.pva-count {
  font-size: 24px;
  font-weight: 600;
  color: var(--aurora-green);
  margin-right: 6px;
  text-shadow: 0 0 16px rgba(0,229,160,0.6);
}
.pva-dormant-note { color: var(--text-muted); margin-left: 6px; }

.pva-group { margin-bottom: 28px; }
.pva-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 400;
  font-family: 'Cinzel', serif;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pva-group-count {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 6px;
}

.pva-profile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.pva-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(0,15,25,0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}
.pva-roles { display: flex; gap: 8px; align-items: baseline; }
.pva-role { font-size: 11px; letter-spacing: 0.5px; }

.pva-findings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.pva-finding {
  background: rgba(0,15,25,0.6);
  border: 1px solid var(--border);
  border-left: 2px solid var(--aurora-green);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.pva-finding:hover {
  border-color: var(--border2);
  box-shadow: 0 0 24px rgba(0,229,160,0.06);
}
.pva-finding-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.pva-subject {
  font-size: 13px;
  color: var(--text);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}
.pva-conf {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: help;
  white-space: nowrap;
}
.pva-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.pva-timing {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: #ffb347;
  border: 1px solid rgba(255,179,71,0.3);
  border-radius: 7px;
  padding: 3px 9px;
  margin: 0 0 9px;
}
.pva-caveat {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 8px;
}
.pva-cite {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  font-style: italic;
}
/* Sources beside a finding (pvaSources in insights.js) */
.pva-differs { margin-top: 6px; font-size: 10.5px; letter-spacing: .3px; color: #ffb347; }
.pva-also { margin-top: 8px; padding: 8px 10px; border-left: 2px solid rgba(255,179,71,0.5); background: rgba(255,179,71,0.05); border-radius: 0 6px 6px 0; }
.pva-also p, .pva-note p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.pva-note { margin-top: 8px; padding: 8px 10px; border-left: 2px solid rgba(0,232,184,0.5); background: rgba(0,232,184,0.05); border-radius: 0 6px 6px 0; }

.pva-more-btn {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.pva-more-btn:hover { border-color: var(--border2); color: var(--aurora-green); }

/* ── Kundali Insights: Guided view (insights.js paintGuided) ── */
.pva-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
.pva-viewbar-note { font-size: 12px; color: var(--cal-dim); }
.pva-viewbar .pva-tier, .gd-area { color: var(--cal-dim); }
.pva-viewbar .pva-tier[aria-pressed="true"], .gd-area[aria-pressed="true"] { color: var(--aurora-green); }
.gd-section .pva-findings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* shrinks to a 320 px phone */
.gd-why { font-size: 11.5px; letter-spacing: .3px; color: var(--aurora-teal); margin: 2px 0 6px; }
.gd-line { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.gd-book { margin-top: 8px; }
.gd-book summary { cursor: pointer; font-size: 12px; color: var(--venetian-blue-light); list-style: none; }
.gd-book summary::-webkit-details-marker { display: none; }
.gd-book summary::before { content: '▸ '; }
.gd-book[open] summary::before { content: '▾ '; }
.gd-book p { margin: 8px 0 4px; padding: 8px 12px; border-left: 2px solid var(--border2);
             background: rgba(0,15,25,0.5); border-radius: 0 8px 8px 0; color: var(--text-dim); font-size: 13.5px; }
.gd-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.gd-area .pva-group-count { margin-left: 4px; }
.gd-sensitive { border: 1px dashed rgba(255,136,102,0.35); border-radius: 12px; padding: 14px 16px; }
.gd-lib { display: grid; gap: 10px; }
.gd-lib .pva-more-btn { justify-self: start; }


.pva-dormant-lead { margin: 10px 0; line-height: 1.6; }

/* "All N rules evaluated" (pvaEvaluatedBlock in insights.js) */
.pva-evaluated { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 14px; font-size: 12px; color: var(--text-dim); }
.pva-evaluated > summary { cursor: pointer; color: var(--text-muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Cinzel', serif; }
.pva-eval-sec { margin: 6px 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; }
.pva-eval-sec > summary { cursor: pointer; color: var(--text); font-size: 12px; }
.pva-eval-n { color: var(--text-muted); font-size: 11px; margin-left: 6px; }
.pva-eval-sec ul { margin: 8px 0 4px; padding-left: 18px; line-height: 1.75; max-height: 320px; overflow-y: auto; }
.pva-eval-sec li.hit { color: var(--aurora-teal); }

.pva-houses {
  margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(0,15,25,0.4);
}
.pva-houses summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
}
.pva-house-list { margin-top: 14px; display: grid; gap: 8px; }
.pva-house-row {
  display: grid;
  grid-template-columns: 34px 130px 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}
.pva-house-num {
  font-family: 'Cinzel', serif;
  color: var(--aurora-green);
  font-size: 12px;
}
.pva-house-text { color: var(--text-dim); }

@media (max-width: 640px) {
  .pva-house-row { grid-template-columns: 30px 1fr; }
  .pva-house-row .sign-badge { grid-column: 2; }
  .pva-house-text { grid-column: 1 / -1; }
}

/* ── RAG / PHALADEEPIKA ── */
.rag-planet-section {
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.rag-planet-section:last-child { border-bottom: none; margin-bottom: 0; }
.rag-planet-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.rag-planet-sym  { font-size: 28px; }
.rag-planet-name {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
  text-shadow: 0 0 20px currentColor;
  opacity: 0.9;
}
.rag-planet-meta { font-size: 12px; color: var(--text-dim); }
.rag-passages    { display: flex; flex-direction: column; gap: 10px; }
.rag-passage {
  background: rgba(0,20,30,0.5);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(26,111,220,0.5);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.rag-passage:hover {
  border-left-color: var(--venetian-blue-light);
  box-shadow: 0 0 16px rgba(26,111,220,0.08);
}
.rag-quote {
  font-size: 13px;
  color: var(--text);
  line-height: 1.75;
  font-style: italic;
}
.rag-quote::before {
  content: '\201C';
  color: var(--venetian-blue-light);
  font-size: 18px;
  font-style: normal;
  line-height: 0;
  vertical-align: -4px;
  margin-right: 2px;
  text-shadow: 0 0 10px var(--venetian-blue-glow);
}
.rag-quote::after {
  content: '\201D';
  color: var(--venetian-blue-light);
  font-size: 18px;
  font-style: normal;
  line-height: 0;
  vertical-align: -4px;
  margin-left: 2px;
  text-shadow: 0 0 10px var(--venetian-blue-glow);
}
.rag-score { display: none; }

/* ── RAG subsections ── */
.rag-subsection {
  margin-bottom: 18px;
}
.rag-subsection-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-left: 3px solid;
  padding: 4px 0 4px 10px;
  margin-bottom: 10px;
  opacity: 0.85;
}
.rag-cite {
  font-size: 11px;
  color: var(--venetian-blue-light);
  margin-top: 6px;
  opacity: 0.75;
  font-style: italic;
  letter-spacing: 0.02em;
}
.rag-no-passages {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* ── TRANSIT TIMELINE ── */
.transit-card { margin-bottom: 24px; }
.transit-wrap { display: flex; flex-direction: column; gap: 24px; }

/* ── Zoom control bar ── */
.transit-zoom-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.transit-zoom-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0,220,184,0.60);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.transit-zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(0,220,184,0.30);
  background: rgba(0,220,184,0.06);
  color: var(--aurora-teal);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
}
.transit-zoom-btn:hover:not(:disabled) {
  background: rgba(0,220,184,0.14);
  border-color: rgba(0,220,184,0.55);
}
.transit-zoom-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.transit-zoom-scale {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(0,220,184,0.55);
  min-width: 70px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── Auto-revealed inner planet panel (zoom-triggered) ── */
.transit-inner-zoom-panel {
  margin-top: 0;
  border: 1px solid rgba(0,220,184,0.22);
  border-top: 2px solid rgba(0,220,184,0.35);
  border-radius: 0 0 8px 8px;
  background: rgba(3,12,30,0.60);
  overflow: hidden;
}
.transit-inner-zoom-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: rgba(0,220,184,0.04);
  border-bottom: 1px solid rgba(0,220,184,0.12);
  flex-wrap: wrap;
}
.transit-inner-zoom-title {
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--aurora-teal);
  letter-spacing: 0.03em;
  flex: 1;
}
.transit-inner-zoom-note {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(0,220,184,0.40);
}
.transit-inner-zoom-btn {
  background: rgba(0,220,184,0.07);
  border: 1px solid rgba(0,220,184,0.28);
  border-radius: 5px;
  color: var(--aurora-teal);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.transit-inner-zoom-btn:hover { background: rgba(0,220,184,0.13); }

/* ── Collapsible body of inner panel ── */
.transit-inner-zoom-body {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.transit-inner-zoom-body.transit-inner-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.transit-section-hd {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--aurora-teal);
  letter-spacing: 0.04em;
  margin: 0 0 10px 0;
  opacity: 0.85;
}
.transit-section-note {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(0,220,184,0.45);
  margin-left: 10px;
  letter-spacing: 0;
}

.transit-svg-wrap {
  position: relative;
  background: rgba(5,18,44,0.55);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 14px 10px 10px;
}
/* When the inner panel is open it sits flush below the slow chart — no border gap */
.transit-inner-zoom-panel .transit-svg-wrap {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(0,220,184,0.10);
  padding: 10px 10px 6px;
}
/* Inner scroll container — SVG is fixed-width, wrapper scrolls */
.transit-svg-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 4px;
  /* subtle inset shadow as scroll hint */
  box-shadow: inset -8px 0 16px rgba(0,0,0,0.18);
}
.transit-svg-scroll::-webkit-scrollbar { height: 5px; }
.transit-svg-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); border-radius: 3px; }
.transit-svg-scroll::-webkit-scrollbar-thumb { background: rgba(0,232,184,0.25); border-radius: 3px; }
.transit-svg-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,232,184,0.45); }

.transit-tooltip {
  position: fixed;
  z-index: 9900;
  background: rgba(4,12,28,0.97);
  border: 1px solid rgba(0,232,184,0.35);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text);
  pointer-events: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  max-width: 340px;
  white-space: normal;
}
/* Transit type badge colours */
.tt-type {
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(0,220,184,0.75);
  text-transform: uppercase;
}
.tt-natal  { color: rgba(0,220,184,0.80); }
.tt-moola  { color: rgba(168,100,255,0.85); }
.tt-own    { color: rgba(255,215,80,0.85); }
.tt-friend { color: rgba(100,210,100,0.85); }
.tt-enemy  { color: rgba(255,100,100,0.82); }
.tt-retro  { color: #ff9955; font-weight: 600; }
.tt-direct { color: #00e8b8; font-weight: 600; }
.tt-moon-h {
  font-size: 11px;
  color: rgba(160,180,255,0.80);
  font-style: italic;
}

/* ── Collapsible table toggle ── */
.transit-table-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 10px 14px;
  border: 1px solid var(--border2);
  border-radius: 8px 8px 0 0;
  background: rgba(0,232,184,0.04);
  margin-top: 18px;
  transition: background 0.2s;
}
.transit-table-toggle:hover { background: rgba(0,232,184,0.08); }
.ttog-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(0,220,184,0.80);
  text-transform: uppercase;
}
.ttog-count {
  font-size: 11px;
  color: rgba(200,200,200,0.45);
}
.ttog-chevron {
  margin-left: auto;
  font-size: 13px;
  color: rgba(0,220,184,0.55);
  transition: transform 0.25s;
}

/* Transit table */
.transit-table-wrap {
  overflow-x: auto;
  border-radius: 0 0 8px 8px;
  border: 1px solid var(--border2);
  border-top: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.transit-table-wrap.ttbl-open {
  max-height: 8000px;
  overflow-x: auto;
  overflow-y: auto;
}
.transit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}
.transit-table thead tr {
  background: rgba(0,232,184,0.06);
}
.transit-table th {
  padding: 10px 14px;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(0,220,184,0.70);
  border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}
.transit-table td {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,255,136,0.05);
  color: var(--text);
  vertical-align: middle;
}
.transit-table td.td-age { white-space: nowrap; }
.transit-table td.td-effect {
  font-size: 11.5px;
  color: rgba(255,220,140,0.82);
  font-style: italic;
  max-width: 240px;
}
/* Asc effect column — blue tint to distinguish from Moon column */
.transit-table td.td-effect-asc {
  color: rgba(140,195,255,0.82);
}
.transit-table tbody tr:hover td { background: rgba(0,255,136,0.03); }
.transit-table tbody tr:last-child td { border-bottom: none; }
.transit-table tbody tr.tr-now td { background: rgba(255,200,80,0.05); }
.transit-table tbody tr.tr-now td:first-child { border-left: 2px solid rgba(255,200,80,0.55); }
.transit-table tbody tr.tr-past td { opacity: 0.48; }

/* ── Planet-level collapsible rows ── */
.plt-header { cursor: pointer; user-select: none; }
.plt-header td {
  padding: 10px 14px;
  background: rgba(0,232,184,0.07);
  border-top: 1px solid rgba(0,255,136,0.12);
  border-bottom: 1px solid rgba(0,255,136,0.08);
}
.plt-header:hover td { background: rgba(0,232,184,0.12); }
.plt-symbol  { font-size: 15px; font-family: serif; margin-right: 6px; }
.plt-name    { font-size: 12px; font-family: 'Cinzel', serif; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 8px; }
.plt-count   { font-size: 11px; color: rgba(200,200,200,0.45); }
.plt-chevron { float: right; font-size: 12px; color: rgba(200,200,200,0.55); }
.plt-tbody:not(.plt-open) tr:not(.plt-header) { display: none; }

/* ── FOOTER ── */
.site-footer {
  text-align: center;
  padding: 28px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 2px;
  border-top: 1px solid var(--border);
  font-family: 'Cinzel', serif;
  font-weight: 400;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  /* minmax(0, …) lets the column shrink below the chart-style tabs' width;
     plain 1fr kept it at min-content and widened the page on phones. */
  .top-row { grid-template-columns: minmax(0, 1fr); }
  .chart-card-header { flex-wrap: wrap; gap: 10px; }
  .chart-type-tabs { flex-shrink: 1; min-width: 0; max-width: 100%; }
  .chart-tab { flex: 1 1 auto; min-width: 0; padding: 5px 8px; letter-spacing: .5px; }
  .chart-card { order: 1; }
  .influential-card { order: 2; }
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-group.span-2 { grid-column: 1; }
  .logo-text { font-size: 26px; }
  /* iOS Safari zooms the page into any field under 16px when it takes the
     focus, and leaves it zoomed (2026-10-09). */
  input[type="text"], input[type="search"], input[type="date"], input[type="time"], textarea,
  .form-group select, .form-group .form-select { font-size: 16px; }   /* .form-select is set later, so outrank it */
}

/* ══════════════════════════════════════════════════
   DASHA TAB — Gantt + Re-anchored Chart
══════════════════════════════════════════════════ */

.dasha-gantt-card { margin-bottom: 0; }

/* ── Scroll wrapper ── */
.dg-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}
/* A period's name is a button too (2026-10-13): on a phone its bar is a few
   pixels wide, so the name was the only thing big enough to tap. */
.dg-pinfo.dg-open { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.dg-pinfo.dg-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dg-pinfo.dg-open:hover .dg-pname { text-decoration: underline; text-underline-offset: 3px; }
.dg-scroll::-webkit-scrollbar { height: 4px; }
.dg-scroll::-webkit-scrollbar-track { background: rgba(0,255,136,0.04); border-radius: 2px; }
.dg-scroll::-webkit-scrollbar-thumb { background: rgba(0,232,184,0.25); border-radius: 2px; }

.dg-inner { min-width: 920px; }

/* ── Generic row ── */
.dg-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(0,255,136,0.04);
}

/* ── Label column (sticky left) ── */
.dg-lcol {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 0;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(0,255,136,0.07);
}
.dg-lcol-antar {
  padding-left: 22px;
  background: rgba(5,10,22,0.85);
}

/* ── Toggle button ── */
.dg-toggle {
  background: none;
  border: 1px solid rgba(0,255,136,0.15);
  color: rgba(0,232,184,0.55);
  font-size: 9px;
  border-radius: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s, border-color 0.2s;
}
.dg-toggle:hover { color: var(--aurora-teal); border-color: rgba(0,232,184,0.4); }

/* ── Planet symbol & info in label ── */
.dg-sym {
  font-size: 16px;
  font-family: serif;
  flex-shrink: 0;
  line-height: 1;
}
.dg-sym-sm { font-size: 13px; }
.dg-pinfo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dg-pname {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dg-pname-sm { font-size: 10px; }
.dg-pdates {
  font-size: 9px;
  color: rgba(200,200,200,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* ── Track column (flexible, bars live here) ── */
.dg-rcol {
  flex: 1;
  min-width: 0;
}
.dg-track {
  position: relative;
  height: 46px;
  width: 100%;
}
.dg-antar-track { height: 30px; }
.dg-axis-track  { height: 28px; }

/* ── Tick marks (axis header only) ── */
.dg-tick {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.dg-tick-line {
  width: 1px;
  height: 6px;
  background: rgba(0,255,136,0.30);
  position: absolute;
  bottom: 0;
}
.dg-tick-year {
  font-size: 9px;
  color: rgba(0,220,184,0.55);
  white-space: nowrap;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* ── Now marker (axis header label) ── */
.dg-now {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.dg-now-line {
  width: 1.5px;
  height: 6px;
  background: rgba(255,200,80,0.9);
  position: absolute;
  bottom: 0;
}
.dg-now-lbl {
  font-size: 9px;
  color: rgba(255,200,80,0.95);
  font-weight: 700;
  white-space: nowrap;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

/* ── Spanning "Now" line — single element that covers all rows ── */
.dg-axis-row .dg-rcol { position: relative; overflow: visible; }
.dg-now-span {
  position: absolute;
  top: 0;
  width: 1.5px;
  height: 4000px;           /* tall enough to cover all expanded rows */
  background: rgba(255,200,80,0.22);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

/* ── Mahadasha bar ── */
.dg-mbar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 2px;
  transition: filter 0.15s;
  z-index: 1;
}
.dg-mbar:hover { filter: brightness(1.35); }

/* ── Antardasha bar ── */
.dg-abar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 1px;
  transition: filter 0.15s;
  z-index: 1;
}
.dg-abar:hover { filter: brightness(1.4); }

/* ── Bar label text ── */
.dg-bar-lbl {
  padding: 0 6px;
  font-size: 10px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ── Selected state ── */
.dg-selected {
  outline: 2px solid rgba(0,255,136,0.75) !important;
  outline-offset: 1px;
  filter: brightness(1.3) !important;
}

/* ── Active maha block highlight ── */
.dg-is-active > .dg-maha-row > .dg-lcol {
  background: rgba(0,232,184,0.06);
  border-right-color: rgba(0,232,184,0.18);
}
.dg-is-active-antar > .dg-lcol {
  background: rgba(0,232,184,0.04);
}

/* ── Dasha chart section ── */
.dasha-chart-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.dasha-chart-hd {
  text-align: center;
  margin-bottom: 20px;
}
.dasha-chart-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--aurora-teal);
  letter-spacing: 1.5px;
  text-shadow: 0 0 20px rgba(0,201,212,0.35);
}
.dasha-chart-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 5px;
  letter-spacing: 0.5px;
}
.dasha-chart-wrap {
  display: flex;
  justify-content: center;
}
.dasha-chart-wrap svg {
  max-width: 480px;
  width: 100%;
  height: auto;
}

/* ── Auth widget ─────────────────────────────────────────────── */
.auth-widget {
  position: absolute;
  top: 18px;
  right: 24px;
}
@media (max-width: 600px) {
  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header-inner .logo  { order: 1; }
  .header-inner .tagline { order: 2; }
  .header-inner .shlok   { order: 3; }
  .auth-widget {
    order: 4;
    position: static;
    margin-top: 16px;
  }
}
.auth-signin-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: #e2d9f3;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.auth-signin-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(196,181,253,0.45);
}
.auth-google-icon { flex-shrink: 0; }
.auth-user {
  display: flex;
  align-items: center;
  gap: 9px;
}
.auth-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(196,181,253,0.35);
  object-fit: cover;
}
.auth-avatar-fallback {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(136,85,255,0.4);
  border: 1px solid rgba(196,181,253,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #e2d9f3;
}
.auth-name {
  font-size: 13px;
  color: #c4b5fd;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-signout-btn {
  background: none;
  border: 1px solid rgba(196,181,253,0.25);
  border-radius: 6px;
  color: #9ca3af;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.auth-signout-btn:hover {
  color: #f87171;
  border-color: rgba(248,113,113,0.4);
}
.site-header .header-inner { position: relative; }

/* ── Active profile row ── */
.profile-row--active {
  background: rgba(0,232,184,0.10) !important;
  border-left: 3px solid var(--aurora-teal);
}
.profile-row--active .pname { color: var(--aurora-teal); }

/* ── Kundali Insights toast (inline, above the cards) ── */
.insights-toast {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 28px 20px;
  margin-bottom: 20px;
  background: linear-gradient(160deg, rgba(8,18,42,0.95) 0%, rgba(5,12,30,0.95) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0,232,184,0.28);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,232,184,0.06),
              inset 0 1px 0 rgba(255,255,255,0.04);
  text-align: center;
  animation: toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes toastIn {
  from { opacity:0; transform: translateY(-10px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)      scale(1);   }
}
.it-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s;
  line-height: 1;
}
.it-close:hover { color: var(--text); }
.it-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.it-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--aurora-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.it-star {
  font-size: 10px;
  color: var(--aurora-teal);
  opacity: 0.7;
}
.it-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  max-width: 340px;
  opacity: 0.88;
}
.it-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 9px 20px;
  background: linear-gradient(135deg, rgba(0,232,184,0.15), rgba(0,100,220,0.15));
  border: 1px solid rgba(0,232,184,0.40);
  border-radius: 8px;
  color: var(--aurora-teal);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.it-signin:hover {
  background: linear-gradient(135deg, rgba(0,232,184,0.22), rgba(0,100,220,0.22));
  border-color: rgba(0,232,184,0.65);
  box-shadow: 0 0 16px rgba(0,232,184,0.18);
}

/* ── Observation point form select ── */
.form-select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(5, 15, 35, 0.85);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300e8b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-select:focus {
  outline: none;
  border-color: var(--aurora-teal);
  box-shadow: 0 0 0 3px rgba(0,232,184,0.12);
}
.form-select option {
  background: #060f1e;
  color: var(--text);
}

/* ── Dasha tab observation point selector ── */
.dasha-obs-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  font-size: 12px;
  color: var(--text-dim);
  vertical-align: middle;
}
.dasha-obs-label {
  white-space: nowrap;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-dim);
}
.dasha-obs-select {
  padding: 4px 28px 4px 10px;
  background: rgba(5, 15, 35, 0.85);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300e8b8' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dasha-obs-select:focus {
  outline: none;
  border-color: var(--aurora-teal);
  box-shadow: 0 0 0 2px rgba(0,232,184,0.12);
}
.dasha-obs-select option {
  background: #060f1e;
  color: var(--text);
}
@media (max-width: 600px) {
  .dasha-obs-wrap { margin-left: 0; margin-top: 8px; display: flex; }
}

/* ══════════════════════════════════════════════════
   GENDER TOGGLE
══════════════════════════════════════════════════ */

.gender-toggle {
  display: flex;
  background: rgba(0,30,40,0.7);
  border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden;
  height: 44px;
}
.gender-opt {
  flex: 1;
  position: relative;
  cursor: pointer;
  display: block;      /* ensure block inside flex container */
  opacity: 1;          /* override global label { opacity: 0.7 } */
}
.gender-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gender-opt > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-dim);
  opacity: 1;
  border-right: 1px solid var(--border2);
  transition: background 0.18s, color 0.18s;
  padding: 0 4px;
}
.gender-opt:last-child > span { border-right: none; }
.gender-opt input:checked + span {
  background: rgba(0,232,184,0.13);
  color: var(--aurora-teal);
}
.gender-opt > span:hover { background: rgba(0,232,184,0.06); }
.gender-opt input:focus-visible + span { outline: 2px solid var(--aurora-teal); outline-offset: -2px; }

/* ── Individual / Matching on the birth form (lib/match-entry.js) ── */
.form-card [hidden] { display: none !important; }
.form-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 28px; }
.form-head .form-title { margin-bottom: 0; }
.entry-mode { flex: 0 1 320px; height: 42px; }
.entry-mode .gender-opt > span { font-size: 13.5px; gap: 6px; }
.entry-mode small { font-size: 11px; color: var(--text-dim); letter-spacing: 0.3px; }
.entry-mode input:checked + span small { color: inherit; opacity: 0.75; }
@media (max-width: 420px) { .entry-mode { flex-basis: 100%; } .entry-mode small { display: none; } }
.me-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; margin-bottom: 28px; }
.me-person { border: 1px solid var(--border2); border-radius: 14px; padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Faint ♀ and ♂ behind the bride's and groom's fields (B12): which side is
   which at a glance. Generated content with empty alt text, so a screen
   reader reads the legend, not the symbol. */
.me-bride, .me-groom { position: relative; isolation: isolate; overflow: hidden; }
.me-bride::after, .me-groom::after {
  position: absolute; right: -6px; bottom: -34px; z-index: -1; pointer-events: none;
  font: 400 190px/1 'Inter', sans-serif; opacity: .07;
}
.me-bride::after { content: "\2640"; content: "\2640" / ""; color: #dd40f8; }
.me-groom::after { content: "\2642"; content: "\2642" / ""; color: #4d9aff; }
@media (max-width: 480px) { .me-bride::after, .me-groom::after { font-size: 150px; bottom: -26px; } }
.me-person legend { padding: 0 8px; font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 2px; color: var(--aurora-teal); }
/* Date over time, not side by side (2026-10-09): each person has half the
   card, and the date's three boxes and the time's AM|PM need its width. */
.me-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (max-width: 640px) { .me-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .me-person { padding: 4px 14px 16px; } }
/* one result at a time: the chart for Individual, the match for Matching */
body.mode-match #results, body.mode-match #charts-sidebar,
body:not(.mode-match) #match-results { display: none !important; }
.match-results[hidden] { display: none; }
.me-err {
  margin-top: 14px; padding: 12px 16px; border-radius: 10px;
  background: rgba(255,85,85,0.12); border: 1px solid rgba(255,85,85,0.35);
  color: #fca5a5; font-size: 13px; line-height: 1.6; text-align: center;
}

/* ══════════════════════════════════════════════════
   PLANET CARDS  (Kundali Insights tab)
══════════════════════════════════════════════════ */

.planet-card {
  background: rgba(0,15,25,0.65);
  border: 1px solid var(--border);
  border-left: 3px solid var(--planet-color, #888);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.planet-card:last-child { margin-bottom: 0; }
.planet-card:hover {
  border-color: var(--border2);
  box-shadow: 0 0 28px rgba(0,229,160,0.05);
}

.planet-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.planet-card-sym {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px currentColor);
}
.planet-card-meta { flex: 1; min-width: 0; }
.planet-card-name {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
  text-shadow: 0 0 16px currentColor;
  opacity: 0.92;
}
.planet-card-position {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.planet-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* ── Dignity & status chips ── */
.dignity-chip {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  font-weight: 500;
  white-space: nowrap;
}
.dignity--exalted {
  background: rgba(255,215,0,0.12);
  color: #ffd700;
  border: 1px solid rgba(255,215,0,0.30);
}
.dignity--debilitated {
  background: rgba(255,80,80,0.12);
  color: #ff6b6b;
  border: 1px solid rgba(255,80,80,0.25);
}
.dignity--own {
  background: rgba(0,229,160,0.10);
  color: var(--aurora-green);
  border: 1px solid rgba(0,229,160,0.25);
}
.dignity--retro {
  background: rgba(255,120,40,0.12);
  color: #ff9955;
  border: 1px solid rgba(255,120,40,0.25);
}

/* ── Passage sections ── */
.passage-section {
  margin-bottom: 14px;
}
.passage-section--primary {
  background: rgba(0,232,184,0.03);
  border: 1px solid rgba(0,232,184,0.12);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.passage-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.section-icon { font-size: 14px; }
.passage-source-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(26,111,220,0.14);
  color: var(--venetian-blue-light);
  border: 1px solid rgba(26,111,220,0.24);
  letter-spacing: 0.5px;
  font-weight: 400;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Individual passage block ── */
.passage-block {
  background: rgba(0,20,30,0.45);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.passage-block:last-child { margin-bottom: 0; }
.passage-block--primary {
  background: rgba(0,20,35,0.65);
  border-color: rgba(0,232,184,0.15);
}
.passage-block--primary:hover { border-color: rgba(0,232,184,0.32); }
.passage-block--structured {
  border-left: 2px solid rgba(0,232,184,0.40);
}

/* ── Connected passage: house lord is actually conjunct in this chart ── */
.passage-block--connected {
  border-left: 2px solid rgba(255, 210, 60, 0.55);
  background: rgba(255, 210, 60, 0.04);
}
.passage-block--connected:hover { border-color: rgba(255, 210, 60, 0.75); }
.conn-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffd23c;
  background: rgba(255, 210, 60, 0.12);
  border: 1px solid rgba(255, 210, 60, 0.28);
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 6px;
}

/* ── Section source note (chapter subtitle inside collapsibles) ── */
.section-source-note {
  font-size: 10.5px;
  color: var(--text-dim);
  opacity: 0.65;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
  font-style: italic;
}
.passage-quote {
  font-size: 13px;
  color: var(--text);
  line-height: 1.78;
  font-style: italic;
  margin-bottom: 8px;
}
.passage-cite {
  font-size: 11px;
  color: var(--venetian-blue-light);
  opacity: 0.78;
  letter-spacing: 0.02em;
}

/* ── Collapsible sections (uses <details>/<summary>) ── */
.collapsible-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.collapsible-section:last-child { margin-bottom: 0; }
.collapsible-section[open] { border-color: var(--border2); }

.collapsible-title {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  border-left: 3px solid;
  list-style: none;
  user-select: none;
  transition: background 0.18s, color 0.18s;
}
.collapsible-title::-webkit-details-marker { display: none; }
.collapsible-title::before {
  content: '▶';
  font-size: 9px;
  margin-right: 9px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
details[open] > .collapsible-title::before { transform: rotate(90deg); }
.collapsible-title:hover { background: rgba(255,255,255,0.03); color: var(--text); }
.collapsible-body {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}

/* ── Conjunction entries ── */
.conj-entry { margin-bottom: 14px; }
.conj-entry:last-child { margin-bottom: 0; }
.conj-partner {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
  display: block;
}

/* ── RAG toolbar ── */
.rag-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
}
.ch1-ref-btn {
  background: rgba(0,232,184,0.06);
  border: 1px solid rgba(0,232,184,0.22);
  border-radius: 8px;
  color: var(--aurora-teal);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ch1-ref-btn:hover {
  background: rgba(0,232,184,0.13);
  border-color: rgba(0,232,184,0.45);
  box-shadow: 0 0 12px rgba(0,232,184,0.10);
}

/* ── Female Horoscopy Card ── */
/* ── Ascendant card (shared, above planet cards) ── */
.ascendant-card {
  margin-bottom: 20px;
  background: rgba(10,10,30,0.65);
  border: 1px solid rgba(136,136,255,0.20);
  border-left: 3px solid #8888ff;
  border-radius: 14px;
  padding: 20px;
}
.ascendant-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(136,136,255,0.15);
}
.ascendant-card-sym {
  font-size: 28px;
  color: #8888ff;
  filter: drop-shadow(0 0 8px rgba(136,136,255,0.5));
  flex-shrink: 0;
}
.ascendant-card-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 600;
  color: #8888ff;
  display: block;
  letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(136,136,255,0.35);
}
.ascendant-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  display: block;
}
.ascendant-passages { display: flex; flex-direction: column; gap: 10px; }

.female-horoscopy-card {
  margin-top: 24px;
  background: rgba(20,5,30,0.65);
  border: 1px solid rgba(221,64,248,0.20);
  border-left: 3px solid var(--aurora-magenta);
  border-radius: 14px;
  padding: 20px;
}
.female-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(221,64,248,0.15);
}
.female-card-icon {
  font-size: 28px;
  color: var(--aurora-magenta);
  filter: drop-shadow(0 0 8px rgba(221,64,248,0.5));
  flex-shrink: 0;
}
.female-card-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--aurora-magenta);
  display: block;
  letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(221,64,248,0.35);
}
.female-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  display: block;
}
.female-passages { display: flex; flex-direction: column; gap: 10px; }

/* ══════════════════════════════════════════════════
   CH 1 QUICK-REFERENCE SIDE DRAWER
══════════════════════════════════════════════════ */

.side-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.side-drawer-overlay.open { display: block; }

.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9001;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg2);
  border-left: 1px solid var(--border2);
  box-shadow: -12px 0 56px rgba(0,0,0,0.65);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.side-drawer.open { transform: translateX(0); }

/* Mobile: slide up from bottom */
@media (max-width: 520px) {
  .side-drawer {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 88vh;
    border-left: none;
    border-top: 1px solid var(--border2);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .side-drawer.open { transform: translateY(0); }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
}
.drawer-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--aurora-teal);
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px rgba(0,232,184,0.3);
}
.drawer-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.drawer-close:hover { color: var(--text); border-color: var(--border2); }

.drawer-body { padding: 20px 20px 32px; flex: 1; }
.drawer-section-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--aurora-green);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 28px 0 12px;
  opacity: 0.85;
}
.drawer-section-title:first-child { margin-top: 0; }

.drawer-table-wrap { overflow-x: auto; border-radius: 6px; }
.drawer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}
.drawer-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  white-space: nowrap;
}
.drawer-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,232,184,0.05);
  vertical-align: top;
  color: var(--text);
  line-height: 1.55;
}
.drawer-table tbody tr:last-child td { border-bottom: none; }
.drawer-table tbody tr:hover td { background: rgba(0,232,184,0.03); }

.drawer-source {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ══════════════════════════════════════════════════════
   CHARTS SIDEBAR — fixed left panel, independent scroll
══════════════════════════════════════════════════════ */

.charts-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 50;
  display: flex;
  flex-direction: row;
  /* Hidden until charts are rendered */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.charts-sidebar.csb-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Flag tabs (always visible, act as toggle + tab switcher) ── */
.csb-flags {
  width: 36px;
  min-width: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 0 20px;
  gap: 0;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border2);
  box-shadow: 2px 0 12px rgba(0,0,0,0.35);
}
.csb-flag {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 18px 6px;
  cursor: pointer;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(180,160,255,0.3);
  transition: color 0.2s, background 0.2s, text-shadow 0.2s;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.csb-flag:first-child {
  border-bottom: 1px solid rgba(160,127,255,0.08);
}
.csb-flag:hover {
  color: rgba(200,185,255,0.65);
  background: rgba(160,127,255,0.06);
}
.csb-flag.csb-flag-active {
  color: var(--aurora-teal);
  text-shadow: 0 0 10px rgba(0,232,184,0.4);
}
.csb-flag-label { pointer-events: none; }

/* ── Sliding panel ── */
.csb-panel {
  width: 0;
  overflow: hidden;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.32s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  /* Independent scroll — does not follow page */
  overscroll-behavior: contain;
}
.charts-sidebar.csb-open .csb-panel {
  width: 422px;
}

.csb-panel-header {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--aurora-teal);
  text-shadow: 0 0 12px rgba(0,232,184,0.25);
  flex-shrink: 0;
}

.csb-chart-group {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 46vh;
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
}
.csb-chart-group:last-child { border-bottom: none; }

.csb-chart-title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--aurora-green);
  opacity: 0.72;
  margin-bottom: 3px;
  text-align: left;
  padding-left: 2px;
  flex-shrink: 0;
}

.csb-chart-wrap {
  flex: 1;
  min-height: 0;
  display: block;
}
.csb-chart-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Tab panes inside the panel ── */
.csb-tab-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.csb-tab-pane.hidden {
  display: none;
}

/* Shodashvarga header accent */
.csb-shodash-hdr {
  color: rgba(140,180,255,0.8);
  text-shadow: 0 0 12px rgba(100,160,255,0.25);
}

/* Domain suffix in chart titles */
.csb-varga-domain {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  opacity: 0.7;
  font-weight: 400;
}

/* D2 Hora — two-cell visual instead of a kundali */
.csb-d2-group { height: auto; min-height: 100px; }
.csb-hora-wrap {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  flex: 1;
}
.csb-hora-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 80px;
}
.csb-hora-cell-title {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-align: center;
}
.csb-hora-cell-title.sun  { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.35); }
.csb-hora-cell-title.moon { color: #88ccff; text-shadow: 0 0 8px rgba(136,204,255,0.3); }
.csb-hora-planets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.csb-hora-planet {
  font-size: 8px;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

/* Expand / collapse extended charts */
.csb-varga-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 6px 10px;
  padding: 9px 12px;
  background: rgba(160,127,255,0.06);
  border: 1px dashed rgba(160,127,255,0.22);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.csb-varga-more:hover {
  background: rgba(160,127,255,0.11);
  border-color: rgba(160,127,255,0.38);
}
.csb-varga-more-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(160,127,255,0.55);
  font-weight: 600;
}
.csb-varga-more-arrow {
  font-size: 11px;
  color: rgba(160,127,255,0.45);
  transition: transform 0.25s;
  display: inline-block;
}
.csb-varga-more[aria-expanded="true"] .csb-varga-more-arrow {
  transform: rotate(180deg);
}
.csb-varga-more[aria-expanded="true"] .csb-varga-more-label::before {
  content: '− ';
}
.csb-varga-more[aria-expanded="true"] .csb-varga-more-label {
  /* replace "+ 9 more" with "− show less" via JS */
}

/* Extended charts container */
.csb-varga-extended {
  display: none;
  flex-direction: column;
}
.csb-varga-extended.csb-extended-open {
  display: flex;
}

/* Cross-planet highlight */
.csb-panel[data-hl] .csb-planet-glyph { opacity: 0.22; transition: opacity 0.15s; }
.csb-panel[data-hl] .csb-planet-glyph[data-planet] { opacity: 0.22; }
.csb-panel[data-hl] .csb-planet-glyph.csb-hl-match { opacity: 1 !important; }

/* ── Body offset — pushes all content right on desktop ── */
body.csb-visible {
  padding-left: 36px;
}
body.csb-open {
  padding-left: 458px; /* 36px strip + 422px panel */
}
body.csb-visible,
body.csb-open {
  transition: padding-left 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* ── Phones and tablets (≤ 900px): a full-screen sheet (2026-10-09) ──
   It used to be hidden here outright, and nothing else on the page shows
   the Sudarshan chakra or the vargas, so below 900px they could not be
   reached at all. "◈ Charts" (#csb-launch) opens the sheet; the two flags
   become its tabs, ✕ closes it; each chart is a full-width square. */
.csb-launch, .csb-close, .csb-inline { display: none; }
@media (max-width: 900px) {
  .charts-sidebar {
    inset: 0; width: 100%; height: 100%; z-index: 1000;
    flex-direction: column; background: var(--bg2);
    opacity: 1; visibility: hidden; transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.3s;
  }
  .charts-sidebar.csb-open {
    visibility: visible; transform: none; pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .csb-flags {
    width: auto; min-width: 0; height: auto; flex-direction: row; padding: env(safe-area-inset-top, 0px) 0 0;
    border-right: 0; border-bottom: 1px solid var(--border2); box-shadow: none;
  }
  .csb-flag {
    writing-mode: horizontal-tb; transform: none; flex: 1 1 0; min-height: 48px; padding: 14px 8px;
    font-size: 11px; letter-spacing: 1.5px; color: rgba(200,185,255,0.55);
  }
  .csb-flag:first-child { border-bottom: 0; border-right: 1px solid rgba(160,127,255,0.12); }
  .csb-flag.csb-flag-active { box-shadow: inset 0 -2px 0 var(--aurora-teal); }
  .csb-close {
    display: block; flex: 0 0 52px; min-height: 48px; border: 0; border-left: 1px solid var(--border2);
    background: transparent; color: var(--text); font-size: 18px; cursor: pointer;
  }
  .csb-close:focus-visible, .csb-flag:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: -2px; }
  .csb-panel, .charts-sidebar.csb-open .csb-panel {
    width: 100%; flex: 1 1 auto; min-height: 0; border-right: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .csb-chart-group { height: auto; }
  .csb-chart-wrap { flex: none; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; }
  body.csb-visible,
  body.csb-open {
    padding-left: 0 !important;
  }
  body.csb-open { overflow: hidden; }       /* the page stays put under the sheet */
  /* "◈ Charts" lives in the chart's actions row (#csb-launch-inline); the
     floating one appears only while the reader scrolls back up with that
     row out of sight, so it never sits over what is being read (2026-10-13). */
  body.csb-visible .csb-inline { display: inline-flex; }
  .charts-sidebar.csb-visible ~ .csb-launch { display: inline-flex; transform: translateY(160%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s; }
  body.csb-peek .charts-sidebar.csb-visible ~ .csb-launch { transform: none; visibility: visible; transition: transform .25s ease; }
  .charts-sidebar.csb-open ~ .csb-launch { display: none; }
  .csb-launch {
    position: fixed; z-index: 850; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--border-glow); background: var(--bg-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--aurora-teal); font: 600 13px 'Inter', sans-serif; letter-spacing: 0.5px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45); cursor: pointer;
  }
  .csb-launch:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 2px; }
}
body.mode-match .csb-launch { display: none !important; }

/* ══════════════════════════════════════════════════
   GEMSTONES TAB
══════════════════════════════════════════════════ */

#gemstones-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Section headers (Recommended / Avoid) ── */
.gem-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.gem-section-title.rec   { color: #00e8b8; border-bottom-color: rgba(0,232,184,0.25); }
.gem-section-title.avoid { color: #ff7c7c; border-bottom-color: rgba(255,80,80,0.2); }

/* ── Card grid ── */
.gem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ── Individual gemstone card ── */
.gem-card {
  background: rgba(0,16,28,0.55);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gem-card.gem-recommend { border-left: 3px solid #00e8b8; }
.gem-card.gem-avoid     { border-left: 3px solid #ff5555; }

/* ── Card header: gem dot + name + planet ── */
.gem-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gem-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,255,255,0.25);
}
.gem-names {
  flex: 1;
  min-width: 0;
}
.gem-name-en {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.gem-name-hi {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.gem-planet-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 3px 9px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Card body ── */
.gem-card-body {
  padding: 12px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Reason line */
.gem-reason {
  font-size: 11.5px;
  color: rgba(200,220,230,0.85);
  line-height: 1.55;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border-left: 2px solid rgba(0,232,184,0.3);
}
.gem-card.gem-avoid .gem-reason {
  border-left-color: rgba(255,85,85,0.35);
}

/* Two-column wearing details grid */
.gem-wearing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}
.gem-wearing-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gem-wearing-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.gem-wearing-val {
  font-size: 11px;
  color: var(--text);
}

/* Mantra pill */
.gem-mantra {
  font-size: 10.5px;
  color: rgba(180,220,200,0.8);
  background: rgba(0,232,184,0.05);
  border: 1px solid rgba(0,232,184,0.12);
  border-radius: 6px;
  padding: 7px 10px;
  line-height: 1.5;
}
.gem-mantra-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 3px;
}

/* Caution banner */
.gem-caution {
  font-size: 11px;
  color: #ffd97d;
  background: rgba(255,185,0,0.07);
  border: 1px solid rgba(255,185,0,0.2);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.gem-caution::before {
  content: '⚠';
  flex-shrink: 0;
  font-size: 12px;
}

/* ── Rudraksha alternative block ── */
.gem-rudraksha {
  background: rgba(0,12,22,0.4);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px 16px 13px;
}
.gem-rudraksha-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.gem-rudraksha-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.gem-rudraksha-mukhi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #a07850, #5a3a18);
  border: 1px solid rgba(180,130,80,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #f5d090;
  flex-shrink: 0;
}
.gem-rudraksha-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.gem-rudraksha-deity {
  font-size: 10px;
  color: var(--muted);
}
.gem-rudraksha-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 10.5px;
  color: rgba(180,210,200,0.75);
}
.gem-rarity-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
.gem-rarity-badge.rare      { color: #ffd97d; background: rgba(255,200,0,0.1); }
.gem-rarity-badge.very-rare { color: #ff9a5c; background: rgba(255,140,0,0.1); }
.gem-rarity-badge.uncommon  { color: #9ab4ff; background: rgba(100,130,255,0.1); }

/* ── Avoid card simplified body ── */
.gem-avoid-body {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Disclaimer block ── */
.gem-disclaimer {
  font-size: 11px;
  color: var(--muted);
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.6;
  margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .gem-grid { grid-template-columns: 1fr; }
  .gem-wearing { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   CALENDAR EXPORT (.ics) + WhatsApp share  — drawer, trigger, states
══════════════════════════════════════════════════════════════════ */
:root{
  --cal-dim:  #8fb9b0;   /* secondary text — AA on dark */
  --cal-dim2: #6a9a92;   /* uppercase labels */
  --cal-hair: #33534f;
  --cal-aurora: linear-gradient(100deg,#00ff88 0%,#00e8b8 20%,#1a6fdc 44%,#0a60f0 58%,#7830dd 78%,#dd40f8 100%);
}
.cal-ic{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; flex:none; }

/* trigger button (secondary/ghost — never out-ranks the timeline) */
.cal-trigger{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.01em;
  color:var(--accent2); background:rgba(0,232,184,.06); border:1px solid rgba(0,232,184,.34);
  border-radius:9px; padding:8px 13px; margin-left:10px; transition:.18s;
}
.cal-trigger .cal-ic{ width:15px; height:15px; }
.cal-trigger:hover{ background:rgba(0,232,184,.14); color:var(--text); }
.cal-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* drawer shell (extends .side-drawer) */
.cal-drawer{ padding:0; background:linear-gradient(180deg,#081120,#060d1a); }
.cal-h{ display:flex; align-items:flex-start; gap:11px; padding:16px 15px 14px;
  border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(0,232,184,.05),transparent); }
.cal-dhic{ color:var(--accent2); width:19px; height:19px; margin-top:1px; }
.cal-htx{ flex:1; }
.cal-title{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:15px; color:var(--text); }
.cal-sub{ font-size:11.5px; color:var(--cal-dim); margin-top:3px; line-height:1.45; }
.cal-xbtn{ width:26px; height:26px; border-radius:7px; border:1px solid var(--border); background:var(--bg3);
  color:var(--cal-dim); display:grid; place-items:center; cursor:pointer; flex:none; }
.cal-xbtn .cal-ic{ width:13px; height:13px; }
.cal-xbtn:hover{ color:var(--text); }
.cal-body{ padding:16px; display:flex; flex-direction:column; gap:15px; overflow-y:auto; }

.cal-lbl{ font-family:'Inter',sans-serif; font-weight:600; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cal-dim2); display:flex; align-items:center; justify-content:space-between; }
.cal-cnt{ color:var(--accent2); letter-spacing:.05em; }

/* segmented window control */
.cal-seg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.cal-opt{ font-family:'Inter',sans-serif; font-size:11.5px; color:#bfe9df; cursor:pointer;
  border:1px solid var(--border2); background:rgba(0,232,184,.05); border-radius:8px; padding:6px 11px; }
.cal-opt.on{ color:#03110b; background:var(--accent2); border-color:transparent; font-weight:600; }
.cal-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.cal-daterow{ display:flex; gap:9px; margin-top:9px; }
.cal-fld{ flex:1; }
.cal-fld label{ display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cal-dim2); margin-bottom:5px; }
.cal-fld input[type=date]{ width:100%; background:var(--bg3); border:1px solid var(--border2); border-radius:8px;
  padding:7px 10px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text); }

/* planet toggles */
.cal-ptog{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.cal-pchip{ display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:11.5px;
  border-radius:20px; padding:5px 10px 5px 8px; cursor:pointer; border:1px solid var(--border2);
  color:var(--cal-dim); background:transparent; }
.cal-pchip .cal-pd{ width:9px; height:9px; border-radius:50%; flex:none; }
.cal-pchip.on{ color:var(--text); background:rgba(0,232,184,.08); border-color:rgba(0,232,184,.34); }
.cal-pchip.off{ opacity:.55; }
.cal-pchip .cal-pn{ font-size:10.5px; color:var(--text-dim); margin-left:2px; font-variant-numeric:tabular-nums; }
.cal-pchip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cal-subnote{ font-size:10.5px; color:var(--cal-dim2); margin-top:7px; line-height:1.4; }

/* preview event cards */
.cal-evts{ display:flex; flex-direction:column; gap:8px; margin-top:9px; }
.cal-evt{ position:relative; border-radius:10px; padding:10px 12px 10px 15px; overflow:hidden;
  background:rgba(255,255,255,.02); border:1px solid var(--border); }
.cal-evt::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rail,#888); }
.cal-et{ font-size:12px; font-weight:500; color:#f2fbf8; line-height:1.35; }
.cal-em{ font-size:10.5px; color:var(--cal-dim); margin-top:4px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cal-dot{ width:3px; height:3px; border-radius:50%; background:var(--cal-hair); }
.cal-ad{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent2);
  border:1px solid var(--border2); border-radius:4px; padding:1px 5px; }
.cal-eff{ font-size:10px; color:#8fb7ae; font-style:italic; margin-top:5px; line-height:1.4; }
.cal-more{ font-size:11px; color:var(--cal-dim2); text-align:center; padding:2px; }

/* actions */
.cal-actions{ display:flex; gap:9px; }
.cal-dl{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; color:#03110b; letter-spacing:.01em;
  border:none; border-radius:11px; padding:13px; background:var(--cal-aurora); background-size:170% 100%;
  background-position:18% 0; box-shadow:0 12px 28px -12px rgba(0,232,184,.7), inset 0 0 0 1px rgba(255,255,255,.16); }
.cal-dl .cal-ic{ width:16px; height:16px; }
.cal-sh{ display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; padding:13px 16px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; color:var(--accent2); letter-spacing:.01em;
  background:rgba(0,232,184,.07); border:1px solid rgba(0,232,184,.34); border-radius:11px; }
.cal-sh .cal-ic{ width:15px; height:15px; }
.cal-sh:hover{ background:rgba(0,232,184,.14); color:var(--text); }
.cal-dl:focus-visible, .cal-sh:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cal-dl.disabled, .cal-sh.disabled{ background:var(--bg3); color:var(--cal-dim2); box-shadow:none;
  border:1px solid var(--border); cursor:not-allowed; }
.cal-foot{ font-size:10.5px; color:var(--cal-dim2); text-align:center; margin-top:-4px; }

/* import accordion */
.cal-acc{ border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.cal-accrow{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:11.5px; color:var(--cal-dim); cursor:pointer;
  background:rgba(255,255,255,.012); border:none; text-align:left; }
.cal-accrow .cal-ic{ width:13px; height:13px; color:var(--accent2); transition:transform .2s; }
.cal-accrow.open .cal-ic{ transform:rotate(180deg); }
.cal-accrow:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.cal-accpanel{ padding:0 12px 12px; font-size:11px; color:#a7cfc7; line-height:1.6; }
.cal-accpanel ol{ margin:8px 0 0; padding-left:18px; }
.cal-accpanel li{ margin-bottom:4px; }
.cal-accpanel b{ color:var(--accent2); font-weight:600; }
.cal-caveat{ display:flex; gap:8px; margin-top:10px; padding:8px 10px; border-radius:8px;
  background:rgba(255,179,71,.07); border:1px solid rgba(255,179,71,.28); }
.cal-caveat .cal-ic{ color:#FFB347; width:14px; height:14px; flex:none; margin-top:1px; }
.cal-caveat p{ margin:0; font-size:10.5px; color:#e7cfa6; line-height:1.45; }

/* states: gated / empty / success */
.cal-state{ align-items:center; text-align:center; padding:26px 18px 22px; gap:12px; }
.cal-stateic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--border2); background:rgba(0,232,184,.05); color:var(--cal-dim); }
.cal-stateic .cal-ic{ width:22px; height:22px; }
.cal-stateic.ok{ border-color:rgba(0,224,138,.4); background:rgba(0,224,138,.1); color:#00e08a; }
.cal-state-t{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:15px; color:var(--text); }
.cal-state-p{ font-size:11.5px; color:var(--cal-dim); max-width:30ch; line-height:1.5; margin:0 auto; }
.cal-state-p b{ color:var(--text); font-weight:500; }
.cal-empty{ text-align:center; padding:16px 6px; display:flex; flex-direction:column; gap:6px; }
.cal-successmeta{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--cal-dim); flex-wrap:wrap; justify-content:center; }
.cal-filepill{ font-family:ui-monospace,monospace; font-size:11px; color:var(--accent2); background:rgba(0,232,184,.08);
  border:1px solid var(--border2); border-radius:6px; padding:3px 8px; }
.cal-btnrow{ display:flex; gap:8px; width:100%; margin-top:4px; }
.cal-secbtn{ flex:1; text-align:center; font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  color:var(--accent2); border:1px solid rgba(0,232,184,.34); background:rgba(0,232,184,.06);
  border-radius:9px; padding:10px; cursor:pointer; }
.cal-secbtn.solid{ color:#03110b; background:var(--accent2); border-color:transparent; }
.cal-secbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* desktop share fallback popover */
.cal-pop{ background:linear-gradient(180deg,#0b1626,#081120); border:1px solid rgba(0,232,184,.34);
  border-radius:13px; padding:15px 16px; }
.cal-pt{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:14px; color:var(--text);
  display:flex; align-items:center; gap:8px; }
.cal-pt .cal-ic{ width:16px; height:16px; color:var(--accent2); }
.cal-steps{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cal-steps li{ display:flex; gap:10px; font-size:11.5px; color:#a7cfc7; line-height:1.45; }
.cal-sn{ width:19px; height:19px; border-radius:50%; border:1px solid var(--border2); color:var(--accent2);
  display:grid; place-items:center; font-size:10px; font-weight:600; flex:none; }
.cal-sn.done{ background:rgba(0,224,138,.12); border-color:rgba(0,224,138,.4); color:#00e08a; }
.cal-sn.done .cal-ic{ width:11px; height:11px; }
.cal-note{ font-size:10.5px; color:var(--cal-dim2); margin:12px 0 0; line-height:1.45; }

/* creating-link spinner */
.cal-spin{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,232,184,.25);
  border-top-color:var(--accent2); display:inline-block; animation:cal-spin .8s linear infinite; }
@keyframes cal-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cal-spin{ animation-duration:2s; } }

/* share-link row */
.cal-linkrow{ display:flex; gap:8px; }
.cal-linkinput{ flex:1; min-width:0; background:var(--bg3); border:1px solid var(--border2); border-radius:9px;
  padding:9px 11px; font-family:ui-monospace,monospace; font-size:11.5px; color:var(--accent2); }
.cal-linkinput:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.cal-copybtn{ flex:none; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; color:#03110b;
  background:var(--accent2); border:none; border-radius:9px; padding:9px 14px; cursor:pointer; }
.cal-copybtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cal-btnrow .cal-secbtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.cal-btnrow .cal-secbtn .cal-ic{ width:14px; height:14px; }

@media (max-width:520px){
  .cal-trigger{ margin-left:0; margin-top:8px; }
}

/* Source credit under a transit table — the Moon's row draws on a different
   book to the other eight, so the table names every source it actually uses. */
.ttbl-src{
  margin: 6px 12px 10px;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: rgba(160,190,185,.55);
}

/* ══════════════════════════════════════════════════════
   TRANSITS — calendar view, vedha toggle
   A month grid in the Google-Calendar idiom: one continuous
   bar per planet per sign-residence, spanning the week row.

   Vedha is drawn as a diagonal hatch on the days it is active,
   never as a change of colour. A transit is a state that lasts;
   vedha is a property that varies day to day as faster planets
   cross the vedha house. Recolouring would assert a different
   verdict — the caveat in the popover says what vedha would do,
   and leaves the gochara reading standing.
══════════════════════════════════════════════════════ */

.tr-bar { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.tr-bar .card-title { flex:1 1 auto; }

.tr-toggle {
  display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-dim);
  background:var(--bg); border:1px solid var(--border); border-radius:20px;
  padding:4px 12px 4px 6px; flex:none;
}
.tr-toggle b { color:var(--text); font-weight:500; }
.tr-sw-state { font-size:10.5px; color:var(--text-dim); letter-spacing:.04em; }
.tr-sw {
  position:relative; width:36px; height:20px; border-radius:20px; flex:none;
  border:1px solid var(--border2); background:#0d1a2c; cursor:pointer; padding:0;
  transition:background .15s, border-color .15s;
}
.tr-sw::after {
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--text-dim); transition:transform .15s, background .15s;
}
.tr-sw[aria-checked="true"] { background:rgba(120,48,221,.28); border-color:var(--aurora-violet); }
.tr-sw[aria-checked="true"]::after { transform:translateX(16px); background:var(--aurora-purple); }
@media (prefers-reduced-motion:reduce) { .tr-sw, .tr-sw::after { transition:none; } }

.tr-secs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:14px 0 0; overflow-x:auto; }
.tr-secs button {
  background:none; border:none; border-bottom:2px solid transparent; color:var(--text-dim);
  font:inherit; font-size:12.5px; font-weight:500; letter-spacing:.05em;
  padding:10px 14px; cursor:pointer; white-space:nowrap;
}
.tr-secs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.tr-pane { padding-top:14px; }
.tr-pane[hidden] { display:none; }

.tr-cal-nav { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
/* The view picker — Week, Month, or a run of months, as calendar apps offer. */
.tr-view { appearance:none; -webkit-appearance:none; padding-right:26px; background-color:transparent;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%, calc(100% - 9px) 50%; background-size:4px 4px; background-repeat:no-repeat; }
.tr-view option { background:var(--bg2); color:var(--text); }
/* Several months: one block each, its readings folded under a summary. */
.tr-mblock { margin-bottom:18px; }
.tr-mb-h { font-family:'Cinzel', Georgia, serif; font-size:14px; font-weight:600; margin:4px 0 8px; color:var(--text); }
.tr-mb-notes { margin:0 0 8px; }
.tr-mb-notes > summary { font-size:11.5px; color:var(--text-dim); cursor:pointer; padding:2px 0; }
.tr-mb-notes > summary:hover { color:var(--accent); }
.tr-mb-nlist { display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
/* A week has room to spare: taller day cells, unclipped bar text. */
.tr-grid-week .tr-day { min-height:30px; }
.tr-grid-week .tr-lane { min-height:21px; }
.tr-grid-week .tr-ev { font-size:11px; padding:3px 7px; }
.tr-cal-nav h4 {
  font-family:'Cinzel', Georgia, serif; font-size:16px; font-weight:600; margin:0; flex:1;
}
.tr-btn {
  background:transparent; border:1px solid var(--border2); color:var(--text-dim);
  border-radius:7px; padding:5px 11px; font:inherit; font-size:12px; cursor:pointer;
}
.tr-btn:hover { color:var(--accent); border-color:var(--accent); }
.tr-btn:focus-visible, .tr-sw:focus-visible, .tr-secs button:focus-visible, .tr-ev:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

.tr-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:3px; }
.tr-dow[hidden] { display:none; }
.tr-dow span {
  font-size:10px; color:var(--text-dim); text-align:center;
  letter-spacing:.09em; padding-bottom:3px;
}

.tr-week {
  margin-bottom:3px; border-radius:7px; overflow:hidden; background:var(--border);
  display:flex; flex-direction:column; gap:1px;
}
.tr-days { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.tr-day { background:var(--bg3); padding:4px 6px 2px; min-height:24px; }
.tr-day.pad { background:var(--bg2); }
.tr-day .n { font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.tr-day.today .n {
  background:var(--accent); color:#03110b; border-radius:11px;
  padding:1px 6px; font-weight:600;
}
/* Chandrashtama — the Moon in the 8th from its natal position. */
.tr-day.ca { background:rgba(255,107,107,.13); }

.tr-lanes { display:flex; flex-direction:column; gap:2px; background:var(--bg3); padding:2px 0 5px; }
.tr-lane { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; min-height:17px; }
.tr-ev {
  border-radius:4px; font-size:10px; line-height:1.35; padding:2px 6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; cursor:pointer; border:none;
  font-family:inherit; text-align:left; display:flex; align-items:center; gap:5px;
}
.tr-ev .eg { font-size:11px; }
/* Dignity ring. Shape carries the tier, never colour — colour is already spent
   on the gochara verdict, and a shape stays readable without colour vision.
   currentColor means the ring inherits the bar's verdict hue rather than
   introducing a fifth palette. */
.tr-ev .eg.dg-strong, .tr-ev .eg.dg-good, .tr-ev .eg.dg-weak,
.tr-legend i.eg {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; box-sizing:border-box;
  flex:none; font-size:10px; line-height:1;
}
.tr-ev .eg.dg-strong { border:1.5px solid currentColor; background:rgba(255,255,255,.20); }
.tr-ev .eg.dg-good   { border:1.5px solid currentColor; }
.tr-ev .eg.dg-weak   { border:1.5px solid currentColor;
  background-image:linear-gradient(115deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%); }
/* The word, when the bar is four days or wider. */
.tr-ev .dgc {
  font-size:9px; font-weight:600; letter-spacing:.2px; padding:0 5px; border-radius:3px;
  background:rgba(255,255,255,.12); opacity:.9; flex:none;
}
.tr-legend i.eg { width:15px; height:15px; border-radius:50%; background:none; color:var(--fg2); }
.tr-legend i.eg.dg-strong { border:1.5px solid currentColor; background:rgba(255,255,255,.20); }
.tr-legend i.eg.dg-good   { border:1.5px solid currentColor; }
.tr-legend i.eg.dg-weak   { border:1.5px solid currentColor;
  background-image:linear-gradient(115deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%); }
.tr-leg-br { flex-basis:100%; height:0; }
/* Chart-level Saturn readings for the displayed month — sadhe sati and any
   degree-wise crossing. Shown only when there is something to say, so an
   ordinary month carries no chrome at all. */
#tr-notes { display:flex; flex-direction:column; gap:8px; margin:0 0 10px; }
#tr-notes:empty { display:none; }
.tr-note {
  border:1px solid rgba(170,170,204,.22); border-left:3px solid #aaaacc;
  border-radius:7px; background:rgba(170,170,204,.06); padding:10px 13px;
}
.tr-note-k {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:#c3c3e0; margin-bottom:5px;
}
.tr-note p { margin:0 0 5px; font-size:12.5px; line-height:1.5; color:var(--fg); }
.tr-note p.tr-note-sub { color:var(--fg2); font-size:11.5px; }
.tr-note-src { display:block; font-size:10.5px; color:var(--fg3, rgba(200,214,230,.45)); margin-top:4px; }
/* The period headline and the relief note are the two that change a reading
   rather than add to it, so they carry their own edge colour. */
.tr-note.tr-note-hd { border-left-color:#ff8844; background:rgba(255,136,68,.07); }
.tr-note.tr-note-ok { border-left-color:#00e8b8; background:rgba(0,232,184,.06); }
.tr-note-k.warn { color:#ffc79c; }
.tr-note-k.good { color:#7ff0d8; }
/* Popover: readings that name this planet, under the gochara chain. */
.tr-pn { border-top:1px solid rgba(255,255,255,.09); margin-top:11px; padding-top:10px; }
.tr-pn p { margin:5px 0 0; font-size:12.5px; line-height:1.5; }
.tr-pn-t {
  display:inline-block; font-size:8.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  border-radius:3px; padding:2px 6px; border:1px solid currentColor;
}
.tr-pn-t.obs  { color:#ffc06b; }
.tr-pn-t.mut  { color:#ff9e9e; }
.tr-pn-t.surg { color:#c3c3e0; }
.tr-note-days {
  font-size:9.5px; color:rgba(200,214,230,.5); margin-left:7px;
  font-family:ui-monospace,monospace;
}
/* Combustion and the natal return get their own chips; the return also gets a
   ringed dot, so it still reads when the bar is too narrow for words. */
.tr-ev .dgc.cmb { background:rgba(255,140,60,.26); color:#ffc79c; }
.tr-ev .dgc.rtnc { background:rgba(127,216,255,.24); color:#bfe8ff; }
.tr-ev .rtn, .tr-legend i.rtn {
  width:9px; height:9px; border-radius:50%; border:1.5px solid #7fd8ff;
  box-sizing:border-box; flex:none; display:inline-block; position:relative;
}
.tr-ev .rtn::after, .tr-legend i.rtn::after {
  content:''; position:absolute; inset:1.5px; border-radius:50%; background:#7fd8ff;
}
.tr-legend i.rtn { background:none; }
/* Same-sign continuation. Quiet on purpose: it says "this is not a new
   residence", it is not a finding of its own. */
.tr-ev .seam { color:rgba(255,255,255,.4); font-weight:700; margin-right:-2px; flex:none; }
.tr-legend .seam { color:var(--fg2); font-weight:700; }
/* Popover: the dignity line and the two tatkalika layers under it. */
.tr-dig { margin:8px 0 0; font-size:12.5px; }
.tr-dig.tr-sub { color:rgba(200,214,230,.6); font-size:11.5px; margin-top:4px; }
.dg-strong-t { color:#7ff0d8; } .dg-good-t { color:#cfd8e3; }
.dg-plain-t  { color:rgba(200,214,230,.75); } .dg-weak-t { color:#ffa8a8; }
.tr-ext {
  font-size:8.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  border:1px solid rgba(255,192,107,.45); color:#ffc06b; border-radius:3px; padding:1px 4px; margin-left:4px;
}
.tr-ev.good { background:rgba(0,232,184,.18); color:#7ff0d8; box-shadow:inset 2px 0 0 #00e8b8; }
.tr-ev.bad  { background:rgba(255,107,107,.16); color:#ffa8a8; box-shadow:inset 2px 0 0 #ff6b6b; }
/* Vedha, hatched over exactly the time it holds (see _trVedhaIntervals).
   The strips sit under the bar's text; the bar keeps its verdict colour. */
/* isolation + z-index:-1 puts the strips above the bar's fill and under
   its text, including bare text nodes, which cannot take a z-index. */
.tr-ev.hatched { position:relative; isolation:isolate; }
.tr-ev .vh {
  position:absolute; top:0; bottom:0; min-width:2px; pointer-events:none; z-index:-1;
  background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.16) 5px 10px);
}
/* Vipreeta vedha — Agarwal's reversal, not in Phaladeepika — dotted, not hatched. */
.tr-ev .vh.rev { background-image:radial-gradient(rgba(255,255,255,.30) 1.1px, transparent 1.3px); background-size:5px 5px; }
.tr-ev.mid { border-radius:0; box-shadow:none; padding-left:8px; }
.tr-ev.contl { border-top-left-radius:0; border-bottom-left-radius:0; box-shadow:none; }
.tr-ev.contr { border-top-right-radius:0; border-bottom-right-radius:0; }

.tr-legend {
  display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); margin-top:12px;
}
.tr-legend span { display:flex; align-items:center; gap:6px; }
.tr-legend i { width:16px; height:9px; border-radius:3px; flex:none; }

.tr-tz { font-size:11px; color:var(--text-dim); margin-left:4px; }
.tr-pop {
  position:fixed; inset:auto 16px 16px; max-width:520px; margin-inline:auto;
  max-height:min(80vh, 760px); overflow:auto; overscroll-behavior:contain;
  background:var(--bg2); border:1px solid var(--border2); border-radius:11px;
  padding:14px 16px; z-index:60; box-shadow:0 22px 50px -18px #000;
  font-size:12.5px; line-height:1.6; color:var(--text-dim);
}
.tr-pop[hidden] { display:none; }
.tr-pop h5 {
  font-family:'Cinzel', Georgia, serif; font-size:14px; margin:0 0 3px;
  color:var(--text); font-weight:600; padding-right:22px;
}
.tr-pop-meta { font-size:11px; color:var(--text-dim); margin-bottom:8px; }
.tr-pop p { margin:0 0 8px; }
.tr-pop p:last-child { margin-bottom:0; }
.tr-pop .tr-caveat { color:#cbb8ff; }
.tr-pop .tr-src { display:block; margin-top:8px; font-size:10.5px; color:var(--text-muted); }
/* every result for one transit, grouped by trigger (_trResultsFor) */
.tr-pop .tr-signin { margin:8px 0 0; font-size:11.5px; color:var(--aurora-teal); }
.tr-pop .tr-rg-sum { font-size:11px; color:var(--cal-dim, #8fb9b0); margin:2px 0 4px; }
.tr-pop .tr-rg-sum b { font-weight:600; }
.tr-pop .tr-rg-sum .good { color:#3ddc97; } .tr-pop .tr-rg-sum .bad { color:#ff7a7a; } .tr-pop .tr-rg-sum .mixed { color:#e0a458; }
.tr-rg { border-top:1px solid rgba(255,255,255,.09); margin-top:10px; padding-top:8px; }
.tr-rg h6 { margin:0 0 4px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cal-dim2, #6a9a92); font-weight:600; }
.tr-ri { padding:5px 0 5px 9px; border-left:2px solid rgba(255,255,255,.1); margin:4px 0; }
.tr-ri p { margin:0; color:var(--text); font-size:12.5px; line-height:1.5; }
.tr-ri .tr-src { margin-top:2px; }
.tr-ri.good { border-left-color:#3ddc97; }
.tr-ri.bad  { border-left-color:#ff7a7a; }
.tr-ri.mixed{ border-left-color:#e0a458; }
.tr-ri .tr-dig { margin:0 0 3px; }
.tr-pop #tr-pop-x {
  position:absolute; top:9px; right:11px; background:none; border:none;
  color:var(--text-dim); font-size:18px; cursor:pointer; line-height:1;
}

@media (max-width:640px) {
  .tr-ev { font-size:9px; padding:2px 3px; }
  /* The glyph stays: it is the dignity encoding. The word goes instead. */
  .tr-ev .dgc { display:none; }
  .tr-cal-nav h4 { font-size:14px; }
  .tr-cal-nav h4 { flex-basis:100%; order:-1; }
}

/* ══════════════════════════════════════════════════════
   SADE SATI — top of the Transits tab (lib/sadesati-view.js)
   Saturn's 12th-1st-2nd passage over the natal Moon, as a timeline with
   one card per phase. The design prototype (design/sade-sati.html) loads
   these same rules.
══════════════════════════════════════════════════════ */
.ss             { --ss-sat: #7ab8d4; --ss-rise: #e0a458; --ss-peak: #c77dff; --ss-set: #4fd1c5; margin-bottom: 20px; }
.ss[hidden]     { display: none; }
.ss-title       { margin-bottom: 10px; }
.ss-status      { font-size: 15px; color: var(--text); line-height: 1.5; margin: 4px 0 14px; }
.ss-status .dim { color: var(--cal-dim, #8fb9b0); font-size: 13px; }
.ss-tl          { display: block; margin: 6px 0 4px; overflow: visible; max-width: 100%; }
.ss-tl text     { font-family: inherit; }
.ss-key         { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--cal-dim, #8fb9b0); margin: 4px 0 18px; }
.ss-key span    { display: inline-flex; align-items: center; gap: 6px; }
.ss-key i       { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.ss-key i.ss-key-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; }

.ss-phases      { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ss-ph          { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ss-ph.now      { border-color: var(--ph); box-shadow: 0 0 0 1px var(--ph) inset, 0 0 22px -8px var(--ph); }
.ss-ph > button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; padding: 12px 14px;
                  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.ss-ph > button:focus-visible { outline: 2px solid var(--border-glow); outline-offset: -2px; }
.ss-ph-name     { font-family: 'Cinzel', serif; letter-spacing: .06em; color: var(--ph); font-size: 14px; }
.ss-ph-when     { grid-column: 1 / -1; font-size: 12px; color: var(--cal-dim, #8fb9b0); font-variant-numeric: tabular-nums; }
.ss-badge       { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; align-self: start; }
.ss-badge.now   { background: var(--ph); color: #041018; font-weight: 700; }
.ss-badge.past  { color: var(--text-dim); border: 1px solid var(--border); }
.ss-badge.next  { color: var(--text); border: 1px solid var(--border2); }
.ss-ph-body     { padding: 0 14px 14px; display: none; }
.ss-ph.open .ss-ph-body { display: block; }
.ss-chips       { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ss-chip        { font-size: 11.5px; padding: 4px 8px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--border); color: var(--text); }
.ss-chip.good   { border-color: rgba(0,255,136,.35); }
.ss-chip.bad    { border-color: rgba(255,120,120,.4); }
.ss-chip.mid    { border-color: rgba(224,164,88,.45); }
.ss-note        { font-size: 12.5px; line-height: 1.55; color: var(--text); padding: 8px 10px; border-radius: 8px;
                  margin: 8px 0; background: var(--bg2); border-left: 3px solid var(--border2); }
.ss-note.relief { border-left-color: #3ddc97; }
.ss-note.caution{ border-left-color: #ff9a6a; }
.ss-note .src, .ss-src { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 4px; }
.ss-read        { font-size: 12.5px; line-height: 1.55; color: var(--text); margin: 8px 0; }
.ss-read em     { font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); display: block; }
.ss-h4          { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cal-dim2, #6a9a92);
                  margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); font-weight: 600; }
/* other transits, grouped: one block per planet, one line per sign */
.ss-op          { padding: 6px 0 8px; border-bottom: 1px dashed rgba(90,144,144,.18); }
.ss-op:last-child { border-bottom: 0; }
.ss-op-p        { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.ss-os          { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 4px 10px; border-left: 2px solid var(--border); margin-top: 4px; }
.ss-os-h        { font-size: 12px; color: var(--text); }
.ss-os-when     { font-size: 11.5px; color: var(--cal-dim, #8fb9b0); font-variant-numeric: tabular-nums; }
.ss-os-fx       { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.ss-dot         { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.ss-dot.good    { background: #3ddc97; }
.ss-dot.bad     { background: #ff7a7a; }
.ss-rel         { font-size: 10.5px; color: #3ddc97; border: 1px solid rgba(61,220,151,.4); border-radius: 999px;
                  padding: 1px 6px; margin-left: 4px; display: inline-block; max-width: 100%; }
.ss-das         { font-size: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; color: var(--text); }
.ss-das.sat     { color: var(--ss-sat); font-weight: 600; }
.ss-grid        { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 14px; }
.ss-box         { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.ss-box h4      { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cal-dim2, #6a9a92); margin: 0 0 8px; font-weight: 600; }
.ss-div         { display: grid; grid-template-columns: 18px 150px 1fr; gap: 8px; font-size: 12px; padding: 5px 6px; border-radius: 6px; color: var(--text); }
.ss-div.now     { background: rgba(122,184,212,.12); outline: 1px solid rgba(122,184,212,.4); }
.ss-div .n      { color: var(--text-dim); }
.ss-div .d      { color: var(--cal-dim, #8fb9b0); font-variant-numeric: tabular-nums; }
.ss-up          { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 4px 0 2px; }
.ss-up .big     { font-family: 'Cinzel', serif; font-size: 28px; color: var(--ss-sat); letter-spacing: .02em; }
.ss-up .when    { font-size: 14px; color: var(--text); }
.ss-up .why     { flex-basis: 100%; font-size: 12.5px; color: var(--cal-dim, #8fb9b0); }
.ss-foot        { font-size: 11px; color: var(--text-dim); margin-top: 16px; line-height: 1.6; }
@media (max-width: 860px) {
  .ss-phases, .ss-grid { grid-template-columns: minmax(0, 1fr); }
  .ss-div         { grid-template-columns: 18px 1fr; }
  .ss-div .t      { grid-column: 2; }
}

/* ═══ FIRST READ — coach panel (lib/first-read.js) ═══
   Non-modal: the page stays usable, and the spotlight is an outline on the
   real element, never a dark overlay. Desktop: a panel at the right edge.
   Phone: a bottom sheet. */
.fr-open {
  margin-left: auto; align-self: center;
  font: 600 12px/1 'Inter', sans-serif; letter-spacing: .3px;
  color: var(--aurora-teal); background: rgba(0,232,184,.06);
  border: 1px solid rgba(0,232,184,.34); border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.fr-open:hover { border-color: var(--aurora-green); color: var(--aurora-green); }
.fr-open:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 2px; }
/* Share chart sits beside First read, in .tab-actions. */
.tab-actions .fr-open { margin-left: 0; }
.shared-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--border2); border-radius: 10px; background: rgba(0,232,184,0.06); font-size: 13px; color: var(--text); }
.shared-banner[hidden] { display: none; }
.shared-banner > span { flex: 1 1 260px; line-height: 1.5; }
.shared-save { font: 600 12.5px 'Inter', sans-serif; color: #03110b; background: var(--aurora-teal); border: 0; border-radius: 999px;
  padding: 8px 14px; cursor: pointer; }
.shared-save[hidden] { display: none; }
.shared-x { background: none; border: 0; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 4px 6px; }
.shared-save:focus-visible, .shared-x:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 2px; }
/* The share panel (app.js _sharePanel): under its button; a bottom sheet on phones. */
.share-panel { position: fixed; z-index: 9500; top: 0; left: 0; width: min(420px, calc(100vw - 16px)); box-sizing: border-box;
  padding: 14px 16px 12px; background: #0b1a2c; border: 1px solid var(--border2); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6); font-family: 'Inter', sans-serif; color: var(--text); }
.share-panel[hidden] { display: none; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.share-head h4 { margin: 0; font: 600 14px 'Inter', sans-serif; color: var(--text); }
.share-x { background: none; border: 0; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 4px 6px; }
.share-row { display: flex; gap: 8px; }
.share-url { flex: 1; min-width: 0; padding: 8px 10px; font: 12.5px 'Inter', sans-serif; color: var(--text); background: rgba(0,0,0,0.3);
  border: 1px solid var(--border2); border-radius: 8px; }
.share-btn { flex: none; font: 600 12.5px 'Inter', sans-serif; color: #03110b; background: var(--aurora-teal); border: 0;
  border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.share-more { margin-top: 8px; background: none; color: var(--aurora-teal); border: 1px solid var(--border2); }
.share-status { margin: 6px 0 0; min-height: 1.2em; font-size: 12px; color: var(--aurora-teal); }
.share-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.share-x:focus-visible, .share-btn:focus-visible, .share-url:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 2px; }
@media (max-width: 600px) {
  .share-panel { top: auto !important; left: 0 !important; right: 0; bottom: 0; width: 100%; border-radius: 14px 14px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .share-url { font-size: 16px; }
}

.fr-panel {
  position: fixed; z-index: 900; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 360px; max-height: min(72vh, 620px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0b1d2e, #071524);
  border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  color: var(--text); font-family: 'Inter', sans-serif;
}
.fr-panel[hidden] { display: none; }
.fr-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.fr-kicker { font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--aurora-teal); }
.fr-ix { margin-left: auto; font-size: 12px; color: var(--cal-dim); font-variant-numeric: tabular-nums; }
.fr-x { margin-left: 8px; background: none; border: 1px solid var(--border); color: var(--cal-dim);
        border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }
.fr-head .fr-kicker + .fr-x { margin-left: auto; }
.fr-dots { display: flex; gap: 4px; padding: 0 16px; }
.fr-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(0,232,184,.12); }
.fr-dots i.on { background: var(--aurora-teal); }
.fr-body { padding: 12px 16px 6px; overflow-y: auto; }
.fr-body h3 { margin: 0 0 8px; font: 600 18px/1.3 'Cinzel', serif; letter-spacing: .04em; color: var(--text); }
.fr-body p { margin: 8px 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.fr-mine { margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.6;
           background: rgba(0,232,184,.07); border: 1px solid var(--border); }
.fr-mine b, .fr-aha b, .fr-sum b { color: #fff; font-weight: 600; }
.fr-aha { margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.55;
          border: 1px solid rgba(0,255,136,.45); background: rgba(0,255,136,.08); }
.fr-src { font-size: 11.5px !important; color: var(--cal-dim2) !important; }
.fr-note { margin-top: 10px; padding: 9px 11px; border-left: 2px solid var(--aurora-amber); background: rgba(255,136,34,0.06); border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.55; }
.fr-sum { margin: 6px 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.fr-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.fr-link { margin-right: auto; background: none; border: 0; color: var(--cal-dim); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 0; }
.fr-btn { border: 1px solid var(--border2); background: rgba(0,15,25,.6); color: var(--text);
          border-radius: 9px; padding: 8px 14px; font: 600 13px/1 'Inter', sans-serif; cursor: pointer; min-height: 36px; }
.fr-btn.primary { background: var(--aurora-teal); border-color: var(--aurora-teal); color: #032a22; }
.fr-btn:focus-visible, .fr-link:focus-visible, .fr-x:focus-visible { outline: 2px solid var(--aurora-green); outline-offset: 2px; }
.fr-body .fr-btn { margin-top: 4px; }
/* the judging steps: a planet's nine factors, a house's checks, the four determinants */
.fr-panel { width: 400px; }
.fr-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0; font-size: 13.5px; line-height: 1.5; }
.fr-dl dt { color: var(--cal-dim); }
.fr-dl dd { margin: 0; color: var(--text); }
.fr-checks, .fr-dets { list-style: none; margin: 8px 0; padding: 0; font-size: 13.5px; line-height: 1.55; }
.fr-checks li, .fr-dets li { padding: 5px 0; border-top: 1px solid var(--border); }
.fr-checks li:first-child, .fr-dets li:first-child { border-top: 0; }
.fr-tk { display: inline-block; width: 1.2em; font-weight: 700; }
.fr-checks li.ok .fr-tk, .fr-ok { color: var(--aurora-green); }
.fr-checks li.no .fr-tk { color: #ff8a80; }
.fr-vs { font-size: 11.5px; color: var(--cal-dim2); white-space: nowrap; }
.fr-wcite { color: #d6b56a; }
.fr-pick { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--text); }
.fr-pick select { flex: 1; min-height: 36px; background: rgba(0,15,25,.6); color: var(--text); border: 1px solid var(--border2); border-radius: 8px; padding: 4px 8px; font: inherit; }

.fr-spot { outline: 2px solid var(--aurora-green) !important; outline-offset: 4px; border-radius: 12px;
           box-shadow: 0 0 0 8px rgba(0,255,136,.10); transition: outline-color .2s, box-shadow .2s; }
@media (prefers-reduced-motion: no-preference) {
  .fr-spot { animation: frPulse 1.8s ease-in-out 2; }
  @keyframes frPulse { 50% { box-shadow: 0 0 0 14px rgba(0,255,136,.03); } }
}

@media (max-width: 640px) {
  .fr-panel { left: 0; right: 0; bottom: 0; width: auto; max-height: 56vh;
              border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fr-open { margin-left: 0; }
}

/* ── BHAVA BALA (app.js renderBhavaBala) ── */
.bb-table th[scope="row"] { text-align: left; white-space: nowrap; }
.bb-mean { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.bb-madhya { display: block; font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.bb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bb-total { position: relative; min-width: 110px; }
.bb-total span { color: var(--text-dim); font-size: 11px; }
.bb-bar { display: block; height: 3px; margin-top: 4px; margin-left: auto; border-radius: 2px; background: var(--aurora-teal); opacity: .7; }
.bb-rank.top { color: var(--aurora-green); font-weight: 600; }
.bb-rank.low { color: var(--text-dim); }
.bb-note { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.bb-cite { display: block; margin-top: 2px; font-size: 11.5px; color: var(--cal-dim2); }

/* ── ASHTOTTARI & YOGINI (app.js renderNakDashas) ── */
.nd-card { margin-top: 20px; }
.nd-toggle { max-width: 420px; margin-bottom: 14px; }
.nd-apply { font-size: 13.5px; line-height: 1.6; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; }
.nd-apply.yes { border-color: rgba(0,255,136,.4); background: rgba(0,255,136,.06); }
.nd-apply.no { border-color: rgba(255,179,71,.4); background: rgba(255,179,71,.06); }
.nd-list { display: flex; flex-direction: column; gap: 4px; }
.nd-row { border: 1px solid var(--border); border-radius: 8px; background: rgba(0,15,25,.35); }
.nd-row > summary, .nd-row.nd-flat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 12px; cursor: pointer; font-size: 13.5px; }
.nd-row.nd-flat { cursor: default; }
.nd-row b { min-width: 76px; color: var(--text); }
.nd-lord { color: var(--text-dim); min-width: 60px; }
.nd-dates { color: var(--text); font-variant-numeric: tabular-nums; }
.nd-len { color: var(--text-dim); font-size: 12px; margin-left: auto; }
.nd-now { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #032a22; background: var(--aurora-teal); border-radius: 6px; padding: 2px 7px; }
.nd-row.now { border-color: var(--aurora-teal); background: rgba(0,232,184,.07); }
.nd-antar { list-style: none; margin: 0; padding: 4px 12px 10px 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; font-size: 12.5px; }
.nd-antar li { display: flex; justify-content: space-between; gap: 10px; color: var(--text-dim); padding: 2px 0; }
.nd-antar li span:first-child { color: var(--text); }
.nd-antar li.now { color: var(--aurora-teal); }
.nd-antar li.now span:first-child { color: var(--aurora-teal); font-weight: 600; }
.nd-note { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.nd-cite { display: block; font-size: 11.5px; color: var(--cal-dim2); margin-top: 2px; }
@media (max-width: 640px) { .nd-len { margin-left: 0; } }

/* Saved Profiles on a phone: the six columns ran 524px wide inside a
   335px card and widened the whole page. Time and Saved give way; the
   row still opens the chart, and Edit shows the full details. */
@media (max-width: 640px) {
  .saved-profiles-table th:nth-child(3), .saved-profiles-table td:nth-child(3),
  .saved-profiles-table th:nth-child(5), .saved-profiles-table td:nth-child(5) { display: none; }
  .saved-profiles-table thead th, .profile-row td { padding-left: 8px; padding-right: 8px; }
  .profile-row .pplace { max-width: 96px; }
  .profile-row td:nth-child(2) { white-space: nowrap; }
  .sp-tools, .sp-foot { padding-left: 10px; padding-right: 10px; }
  .sp-empty td { white-space: normal; }
}

/* ── Help & feedback (lib/help.js) ── */
.site-footer { padding: 28px 16px 40px; }
.footer-inner { font-family: 'Inter', sans-serif; letter-spacing: .3px; max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; color: var(--text-muted); font-size: 12.5px; }
.footer-link { font: inherit; color: var(--aurora-teal); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }
.footer-note { flex-basis: 100%; text-align: center; margin: 4px 0 0; font-size: 11.5px; color: var(--text-muted); }
.help-dialog { margin: auto; inset: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 18px 22px 22px;
  background: #07111f; color: var(--text); border: 1px solid var(--border2); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.help-dialog::backdrop { background: rgba(2,6,14,.7); }
.help-close-row { display: flex; justify-content: flex-end; margin: 0; }
.help-x { background: none; border: 0; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.help-title { margin: 0 0 6px; font-family: 'Cinzel', serif; font-size: 20px; color: var(--aurora-teal); letter-spacing: 1.5px; }
.help-sec { padding: 14px 0; border-top: 1px solid var(--border); }
.help-sec h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .5px; color: var(--text); }
.help-sec p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.help-sec a { color: var(--aurora-teal); }
.help-sec label { display: block; margin: 8px 0 4px; font-size: 10px; letter-spacing: 1.5px; }
.help-sec select, .help-sec textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--text);
  background: rgba(0,30,40,0.7); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 10px; }
.help-sec textarea { resize: vertical; }
.help-btn { font: inherit; font-size: 13px; color: var(--aurora-teal); background: none; border: 1px solid var(--border2); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.help-btn.primary { background: var(--aurora-teal); color: #04121a; border-color: var(--aurora-teal); font-weight: 600; }
.help-btn:disabled { opacity: .45; cursor: not-allowed; }
.help-fb-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.help-status { font-size: 12.5px; color: var(--text-dim); }
.help-hint { font-size: 12px !important; }
.help-dialog :focus-visible, .footer-link:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: 2px; }

/* Help beside sign-in, top right (lib/help.js) */
.header-actions { position: absolute; top: 18px; right: 24px; display: flex; align-items: center; gap: 10px; }
.header-actions .auth-widget { position: static; }
/* One row (2026-10-06): photo and name, then Help and Sign out (or Sign in)
   together. The widget's wrappers dissolve into the row (display: contents)
   so Help can sit between the name and Sign out without moving it in the DOM. */
.header-actions .auth-widget, .header-actions .auth-user { display: contents; }
.header-actions .auth-avatar, .header-actions .auth-avatar-fallback { order: 1; }
.header-actions .auth-name { order: 2; margin-right: 6px; }
.header-actions .header-help { order: 3; }
/* Dark | Lite (lib/theme.js, 2026-10-09): first in the row. */
.header-actions .theme-switch { order: 0; }
.theme-switch { display: inline-flex; height: 28px; border: 1px solid rgba(196,181,253,0.25); border-radius: 7px; overflow: hidden; }
.theme-switch button { padding: 0 10px; font: 500 12px 'Inter', sans-serif; color: #a8b3c4; background: none; border: 0; cursor: pointer; }
.theme-switch button + button { border-left: 1px solid rgba(196,181,253,0.25); }
/* The selected one follows <html data-theme>, so it is right from the first paint. */
:root:not([data-theme="lite"]) .theme-switch [data-theme-set="dark"] { color: var(--aurora-teal); background: rgba(0,232,184,0.12); }
.theme-switch button:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: -2px; }
.header-actions .auth-signout-btn, .header-actions .auth-signin-btn { order: 4; }
/* Help and Sign out are one pair: the same quiet outlined button. */
.header-help, .header-actions .auth-signout-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  font: 500 12px 'Inter', sans-serif; color: #a8b3c4; background: none; border: 1px solid rgba(196,181,253,0.25);
  border-radius: 7px; cursor: pointer; transition: color .2s, border-color .2s; }
.header-help:hover { color: var(--aurora-teal); border-color: var(--border2); }
.header-actions .auth-signout-btn:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }
.header-help:focus-visible, .header-actions .auth-signout-btn:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: 2px; }
@media (max-width: 600px) {
  .header-actions { order: 4; position: static; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
}
/* Wide screens (2026-10-14): the header is three columns, the logo in the
   middle and the actions in the right one, so they can never reach the logo
   (pinned top right, a long name and a photo ran them into it, as wide as
   1390 px). Where the column is narrow the actions wrap inside it, and below
   1500 px the name goes (the avatar's title gives it; screen readers keep it). */
@media (min-width: 1181px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .header-inner > .logo { grid-column: 2; grid-row: 1; }
  .header-inner > .tagline, .header-inner > .shlok { grid-column: 1 / -1; }
  .header-actions { position: static; grid-column: 3; grid-row: 1; justify-self: end; align-self: start;
    flex-wrap: wrap; justify-content: flex-end; margin: -18px 24px 0 0; }
}
@media (min-width: 1181px) and (max-width: 1500px) {
  .header-actions .auth-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
}
/* Between phone and wide desktop the row (theme, account, Help) would run
   into the centred logo: it gets its own line above it, to the right. */
@media (min-width: 601px) and (max-width: 1180px) {
  .header-inner { display: flex; flex-direction: column; align-items: center; }
  .header-actions { position: static; order: -1; align-self: flex-end; flex-wrap: wrap; justify-content: flex-end; margin: -14px 20px 12px; }
}

/* Signed-out Insights preview (C22): the three findings, then the way in. */
.gd-preview-cta { margin-top: 18px; padding: 16px; border: 1px solid rgba(0,232,184,.28); border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,232,184,.06), rgba(77,154,255,.06)); text-align: center; }
.gd-preview-cta p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.gd-preview-cta b { color: var(--text); }
.gd-preview-signin { font: 600 14px 'Inter', sans-serif; color: #04121c; background: var(--aurora-teal, #00e8b8);
  border: 0; border-radius: 999px; padding: 10px 20px; min-height: 44px; cursor: pointer; }
.gd-preview-signin:hover { filter: brightness(1.08); }
.gd-preview-signin:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.gd-preview-cta .gd-preview-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }

/* How this period reads (C23): the dasha rules under the Dashas chart. */
.dr-title { font-family: 'Cinzel', serif; font-weight: 400; font-size: 15px; letter-spacing: 1.4px; color: var(--text); margin: 0 0 4px; }
.dr-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.dr-btn { font: 500 13px 'Inter', sans-serif; padding: 8px 14px; min-height: 40px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--aurora-teal); background: none; color: var(--aurora-teal); }
.dr-btn:hover { background: rgba(0, 255, 204, .08); }
.dr-lords { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .dr-lords { grid-template-columns: minmax(0, 1fr); } }
.dr-lord, .dr-together { border: 1px solid var(--border); border-left: 3px solid var(--pc, var(--aurora-teal)); border-radius: 10px; padding: 12px 14px; background: rgba(0,0,0,.14); min-width: 0; }
.dr-together { margin-top: 16px; --pc: var(--aurora-teal); }
.dr-lord h5, .dr-together h5 { margin: 0 0 8px; font-family: 'Cinzel', serif; font-weight: 400; font-size: 14px; letter-spacing: 1px; color: var(--pc, var(--text)); }
.dr-role { font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.dr-facts { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.dr-rules { list-style: none; margin: 0; padding: 0; }
.dr-rule { padding: 8px 0; border-top: 1px solid var(--border); }
.dr-rule:first-child { border-top: 0; }
.dr-why { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; }
.dr-quote { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); font-style: italic; line-height: 1.55; }
.dr-cite { font-size: 11px; color: #c8a96a; margin-left: 4px; white-space: nowrap; }
.dr-none, .dr-signin { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 0; }
.dr-signin { margin-top: 14px; }
.dr-every { margin-top: 14px; font-size: 13px; }
.dr-every summary, .dr-sens summary { cursor: pointer; color: var(--aurora-teal); }
.dr-sens { margin-top: 10px; font-size: 13px; }

/* Matching: the book's marriage rules from its other sections (B13). */
.mx-elsewhere { margin-top: 12px; }
.mx-elsewhere summary { cursor: pointer; color: var(--aurora-teal); font-size: 13px; }
.mx-asw { margin: 4px 0 0; font-size: 12px; }
.mx-asw summary { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.mx-asw p { margin: 4px 0 0; color: var(--text-dim); font-style: italic; }

/* ═══ Birth Chart page (2026-10-04 revamp) ═══
   Five sections on one scroll, a sticky bar to jump between them, and the
   Strength details one tab at a time. */
.bc-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 18px; padding: 10px 2px;
  background: linear-gradient(var(--bg, #050d18) 70%, rgba(5,13,24,0));
}
.bc-nav::-webkit-scrollbar { display: none; }
.bc-nav a {
  flex: none; padding: 7px 14px; min-height: 36px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  font: 500 13px 'Inter', sans-serif; color: var(--text-dim); text-decoration: none; white-space: nowrap;
}
.bc-nav a:hover { color: var(--text); border-color: rgba(0,232,184,.35); }
.bc-nav a.active { color: #04121c; background: var(--aurora-teal); border-color: var(--aurora-teal); }
.bc-nav a:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: 2px; }
.bc-sec { scroll-margin-top: 64px; }
#bc-overview > .top-row { margin-bottom: 0; }
.bc-sec + .bc-sec { margin-top: 22px; }

/* Planets */
.pd-deg { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: 2px; }
.pt .num, .pt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-asc td { color: var(--text-dim); }

/* Strength */
.st-note { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; max-width: 80ch; }
.str-na { color: var(--text-muted); }
.bc-subtabs { display: flex; gap: 4px; margin: 26px 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.bc-subtabs::-webkit-scrollbar { display: none; }
.bc-subtabs [role="tab"] {
  flex: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 16px; min-height: 44px; cursor: pointer;
  font: 500 14px 'Inter', sans-serif; color: var(--text-muted);
}
.bc-subtabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--aurora-teal); }
.bc-subtabs [role="tab"]:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: -2px; }
.bc-pane { padding-top: 16px; }
.bc-pane-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); }
.ps-summary.ps-one { grid-template-columns: minmax(0, 440px); justify-content: center; margin: 8px 0 14px; }
.ik-table { max-width: 420px; }

/* Friendship */
.mt-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin: 0 0 12px; }
.mt-seg button { background: none; border: 0; border-radius: 999px; padding: 7px 16px; min-height: 36px; cursor: pointer;
  font: 500 13px 'Inter', sans-serif; color: var(--text-muted); }
.mt-seg button[aria-pressed="true"] { background: rgba(0,232,184,.16); color: var(--text); }
.mt-seg button:focus-visible { outline: 2px solid var(--aurora-teal); outline-offset: 1px; }
.mt-sub-line { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }

.st-table th.st-final { color: var(--text); }
/* Phones: numbers without bars, and the planet column pinned while the table scrolls. */
@media (max-width: 640px) {
  .st-table .pct-bar { display: none; }
  .st-table .pct-bar-wrap { min-width: 0; }
  .pd-table th:first-child, .pd-table td:first-child,
  .st-table th:first-child, .st-table td:first-child { position: sticky; left: 0; z-index: 1; background: #071016; }
}
.st-note { position: sticky; left: 0; max-width: min(80ch, calc(100vw - 72px)); }

/* Strength tabs: the radar on the left, its table on the right (2026-10-04). */
.ps-split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start; margin: 8px 0 16px; }
.ps-side { min-width: 0; }
.ps-side .ps-subh { margin-top: 0; }
.ps-side .ik-table { max-width: none; }
@media (max-width: 860px) { .ps-split { grid-template-columns: minmax(0, 1fr); } }

.pd-dig { font-weight: 900; margin-left: 2px; cursor: help; }
.pd-up { color: #aaffaa; }  .pd-up.deep { color: #FFD700; text-shadow: 0 0 6px #FFD700; }
.pd-down { color: #ffaaaa; } .pd-down.deep { color: #ff4444; text-shadow: 0 0 6px #ff4444; }

/* Shadbala rows: the position on its own line, so the house and ℞ are never cut (was ellipsised). */
.ps-lab { flex-wrap: wrap; row-gap: 2px; }
.ps-lab .ps-pos { flex: 1 0 100%; white-space: normal; overflow: visible; padding-left: 26px; }
/* Vimshopak beside its radar: short scheme names, so the four columns fit. */
.ps-side .vg th .l { display: none; }
.ps-side .vg th .s { display: inline; }

/* Saved Profiles: charts on this device offered to the account (2026-10-05). */
.sp-import { margin: 0 0 12px; padding: 12px 14px; border: 1px solid rgba(0,232,184,.3); border-radius: 10px; background: rgba(0,232,184,.06); }
.sp-import p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.sp-import b { color: var(--text); font-weight: 600; }
.sp-import-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-btn { font: 500 13px 'Inter', sans-serif; padding: 8px 14px; min-height: 36px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border2); background: none; color: var(--text-dim); }
.sp-btn.primary { background: var(--aurora-teal); border-color: var(--aurora-teal); color: #04121c; }
.sp-btn:disabled { opacity: .6; cursor: progress; }

/* ═══ The dasha drawer — one period at a glance (2026-10-06) ═══
   Extends .side-drawer and the calendar drawer's header (.cal-h). Modeless:
   no overlay, the timeline behind stays clickable. The body scrolls and the
   calendar button stays at the foot. */
.dd-drawer { overflow: hidden; }
.dd-title { margin: 0; outline: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dd-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.dd-sep { color: var(--cal-dim2); }
.dd-now { font: 600 10px 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #03110b;
  background: var(--aurora-teal); border-radius: 10px; padding: 2px 8px; }
.dd-nav { display: flex; justify-content: space-between; gap: 8px; padding: 8px 15px; border-bottom: 1px solid var(--border); }
.dd-step { font: 12px 'Inter', sans-serif; color: var(--cal-dim); background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; min-height: 36px; cursor: pointer; max-width: 48%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.dd-step:hover:not(:disabled) { color: var(--text); border-color: var(--border2); }
.dd-step:disabled { opacity: .4; cursor: default; }
.dd-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-body { flex: 1; min-height: 0; gap: 18px; }
.dd-sec .cal-lbl { margin: 0 0 10px; justify-content: flex-start; gap: 6px; }

.dd-houses { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.dd-houses li { display: grid; grid-template-columns: 38px 1fr; column-gap: 4px; font-size: 13px; color: var(--text);
  line-height: 1.4; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.dd-houses b { grid-row: span 2; font-weight: 600; color: var(--accent2); }
.dd-who { font-size: 11.5px; color: var(--cal-dim); }

.dd-glance { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dd-g { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 10px;
  border-radius: 8px; border: 1px solid var(--border); border-left: 3px solid var(--tc); background: rgba(0, 0, 0, .14); }
.dd-g.good  { --tc: var(--aurora-teal); }
.dd-g.watch { --tc: var(--aurora-amber); }
.dd-tag { font: 600 10px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tc);
  border: 1px solid var(--tc); border-radius: 10px; padding: 2px 7px; margin-top: 1px; white-space: nowrap; }
.dd-g b { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.dd-plain { display: block; font-size: 13px; color: var(--text); line-height: 1.5; margin-top: 3px; }
.dd-fact { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-top: 2px; }
.dd-g .dr-cite { display: inline-block; margin-top: 3px; }

.dd-more { border-top: 1px solid var(--border); padding-top: 12px; }
.dd-more > summary { cursor: pointer; font: 600 12.5px 'Inter', sans-serif; color: var(--cal-dim); padding: 4px 0; min-height: 32px; }
.dd-more > summary:hover { color: var(--text); }
.dd-more[open] > summary { margin-bottom: 10px; }
.dd-lords { display: grid; gap: 10px; }
.dd-lord { border-left: 3px solid var(--pc); padding: 2px 0 2px 10px; }
.dd-lord h5 { margin: 0 0 6px; font-family: 'Cinzel', serif; font-weight: 400; font-size: 13.5px; color: var(--pc); }
.dd-foot { flex: none; padding: 12px 15px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg3); }
.dd-foot .dr-btn { width: 100%; }

/* The running period under the timeline */
.dd-nowstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 4px;
  padding: 10px 12px; border: 1px solid var(--border2); border-radius: 10px; font-size: 13px; color: var(--text); }
.dd-nowlbl { font: 600 10px 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #03110b;
  background: var(--aurora-teal); border-radius: 10px; padding: 2px 8px; }
.dd-until { color: var(--text-dim); }
.dd-nowstrip .dr-btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .dd-drawer { transition: none; } }

/* The Dasha tab on phones (after its base rules, so these win). */
@media (max-width: 600px) {
  /* Phones: the periods as a list; the time axis (923 px wide) is left out. */
  .dg-inner { min-width: 0; }
  .dg-axis-row, .dg-rcol { display: none; }
  .dg-lcol { width: auto; flex: 1; position: static; border-right: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    min-height: 48px; padding-right: 4px; }
  .dg-pinfo.dg-open { flex: 1; max-width: none; min-height: 40px; justify-content: center; }
  .dg-lcol::after { content: '›'; margin-left: auto; padding: 0 4px; color: var(--text-muted); font-size: 18px; }
  .dg-toggle { width: 32px; height: 32px; font-size: 11px; }
  .dg-lcol-antar { padding-left: 40px; }
}

/* ── Planet states (Birth Chart › Planets, 2026-10-10): a table to scan,
   each planet's working in #pst-drawer (the dasha drawer's shell). ── */
.pst-hint { margin: -2px 0 8px; font-size: 12px; color: var(--text-muted); }
.ps-table .pst-row { cursor: pointer; }
.ps-table .pst-row:hover > * { background: rgba(0,255,136,0.04); }
.ps-table .pst-row.pst-sel > * { background: rgba(0,255,136,0.09); }
.pst-open { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 500; color: var(--text);
  cursor: pointer; text-align: left; white-space: nowrap; }
.pst-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ps-table .pst-go { width: 18px; padding-left: 0; color: var(--text-muted); font-size: 16px; text-align: right; }
.pst-chip, .pst-av { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  line-height: 1.6; white-space: nowrap; }
.pst-chip { border: 1px solid var(--border2); color: var(--text); }
.pst-av { font-weight: 600; }
.pst-av.good, .pst-tag.good { color: #4fe3b0; background: rgba(79,227,176,0.12); }
.pst-av.bad, .pst-tag.bad { color: #ffb36b; background: rgba(255,179,107,0.12); }
.pst-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pst-item { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,0.18); }
.pst-ih { font-size: 13.5px; color: var(--text); line-height: 1.45; }
.pst-ih b { font-weight: 600; }
.pst-il { display: inline-block; min-width: 104px; font: 600 10px 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pst-eff { font-size: 11.5px; color: var(--text-dim); margin-left: 4px; }
.pst-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 4px; font-weight: 600; white-space: nowrap; }
.pst-why { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.pst-item .dr-quote, .pst-item .dr-none { margin-top: 6px; }
/* Phones: each planet a card, the column names beside the values. */
@media (max-width: 600px) {
  .ps-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.pt.ps-table, .ps-table tbody, .ps-table tr, .ps-table th, .ps-table td { display: block; width: auto; }
  .ps-table .pst-row { position: relative; padding: 10px 30px 10px 10px; border-bottom: 1px solid var(--border); }
  table.pt.ps-table .pst-row > th, table.pt.ps-table .pst-row > td { padding: 2px 0; border: 0; background: none; white-space: normal; }
  .ps-table .pst-row.pst-sel { background: rgba(0,255,136,0.09); }
  table.pt.ps-table tbody .pst-row > th[scope="row"] { padding: 0 0 6px; }
  .ps-table .pst-empty { display: none; }
  .ps-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 96px; font-size: 10.5px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .ps-table .pst-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: auto; }
}
.dg-mbar:focus-visible, .dg-abar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═══ Jaimini section (Birth Chart, 2026-10-07) ═══ */
.jm-h { font-family: 'Cinzel', serif; font-weight: 400; font-size: 14px; letter-spacing: 1px; color: var(--text);
  margin: 18px 0 8px; display: flex; align-items: center; gap: 6px; }
.jm-h:first-child { margin-top: 4px; }
.jm-table th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; }
.jm-table td, .jm-table th { text-align: left; }
.jm-dim { color: var(--text-muted); font-weight: 400; }
.jm-key th[scope="row"] { color: var(--aurora-teal); }
@media (max-width: 600px) {
  table.pt.jm-table { font-size: 12px; }
  table.pt.jm-table tbody td, table.pt.jm-table tbody th[scope="row"] { white-space: normal; padding: 8px 6px; }
  table.pt.jm-table thead th { padding: 8px 6px; white-space: normal; }
  .jm-pl { white-space: nowrap; }
  .jm-table th[scope="row"] .jm-dim { display: block; }
  table.pt.ps-table { font-size: 11.5px; }
  table.pt.ps-table .jm-pl { white-space: normal; }
  table.pt.ps-table thead th { letter-spacing: 0; padding: 8px 3px; }
  table.pt.ps-table tbody td, table.pt.ps-table tbody th[scope="row"] { padding: 8px 3px; }
}
.jm-line { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.jm-line b { color: var(--text); font-weight: 500; }

/* ══════════════════════════════════════════════════
   PHONES (≤ 600px) — the mobile review's P1s (2026-10-13)
   At the end of the file so these follow the rules they adjust.
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Less padding on the cards: tables and grids get the room they need. */
  .card { padding: 18px 14px; }

  /* The tabs: the decorative face kept, tighter, so more than one shows. */
  .tab-btn { font-size: 12px; letter-spacing: .6px; padding: 10px 12px 12px; gap: 6px; }

  /* Potentially influential planets: the badges under the details. */
  .inf-card { grid-template-columns: 24px 30px minmax(0, 1fr); gap: 6px 10px; padding: 12px; }
  .inf-badges { grid-column: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }

  /* Tables that are lists of rows (class .m-cards): each row a card, its
     name across the top and every value under its column's name, two to a
     line. Nothing hidden, nothing scrolled sideways. */
  table.pt.m-cards { display: block; width: 100%; min-width: 0; }
  table.m-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.m-cards tbody { display: block; }
  table.m-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
    padding: 12px 2px; border-bottom: 1px solid var(--border); }
  table.pt.m-cards tbody td, table.pt.m-cards tbody th { display: block; padding: 0; border: 0; text-align: left;
    white-space: normal; position: static; min-width: 0; }
  table.m-cards tr > :first-child { grid-column: 1 / -1; }
  table.m-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font: 600 10px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
  table.m-cards .pct-bar-wrap { min-width: 0; }
  table.pt.m-cards tbody td.pd-asc-none { display: none; }
  /* An influential planet: the whole card tinted, not each value's box. */
  table.pt.m-cards tbody tr.influential-row td, table.pt.m-cards tbody tr.influential-row:hover td { background: none; }
  table.pt.m-cards tbody tr.influential-row { background: rgba(157,146,230,0.07); border-radius: 8px; }
  .table-scroll:has(> table.m-cards) { overflow: visible; }

  /* Friendship: short codes and planet glyphs, so the grid fits the screen. */
  table.mt-table:not(.av-table) th, table.mt-table:not(.av-table) td { padding: 6px 3px; }
  .mt-w, .mt-nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mt-tag { display: none; }
  table.mt-table th[scope="row"] { font-size: 15px; letter-spacing: 0; }
  table.mt-table thead th { font-size: 14px; letter-spacing: 0; }
  .mt-corner { font-size: 9px !important; }

  /* Ashtakavarga: sign glyphs over the columns and planet glyphs down the side. */
  table.pt.mt-table.av-table th, table.pt.mt-table.av-table td { padding: 5px 1px; min-width: 0; font-size: 11px; }
  .av-sn { display: none; }
  .av-h { font-size: 9px; }
  table.pt.mt-table.av-table th[scope="row"] { font-size: 15px; padding: 5px 4px 5px 0; }
  table.pt.mt-table.av-table .av-total { font-size: 10.5px; padding-left: 4px; }
  table.pt.mt-table.av-table thead th:last-child { font-size: 9px; padding-left: 4px; }
}
/* ══════════════════════════════════════════════════
   PHONES — the mobile review's P2s (2026-10-14)
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* The header in one line: the account's name goes (the avatar stays; the
     name is kept for screen readers), and its buttons are tall enough to tap. */
  .header-actions .auth-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .header-actions { gap: 8px; }
  .theme-switch, .header-help, .header-actions .auth-signout-btn, .header-actions .auth-signin-btn { height: 36px; }

  /* The birth form: less padding, so Matching's time and AM/PM share a line. */
  .form-card { padding: 22px 16px; }
  .me-person .bdt-time input { flex-basis: 3.2em; width: 3.2em; }
  .me-person .bdt-ampm { margin-left: 2px; }

  /* Text at least 11 px: field labels, table headings, hints. */
  label { font-size: 11px; letter-spacing: 1.5px; }
  .label-hint { font-size: 10.5px; }
  table.pt thead th { font-size: 11px; letter-spacing: .06em; }
  .th-unit { font-size: 11px; }

  /* Tap targets of at least 44 px: the footer's links, the saved-profile menu. */
  .footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .profile-menu-btn { min-width: 40px; min-height: 36px; }
  .profile-menu-dropdown button { min-height: 44px; font-size: 13px; }

  /* First read: a smaller sheet, so the chart it points at stays in view. */
  .fr-panel { max-height: 42vh; }
}

/* The narrowest phones (320-360 px): a little more room for the grids. */
@media (max-width: 360px) {
  .card { padding: 16px 10px; }
  table.pt.mt-table.av-table th, table.pt.mt-table.av-table td { font-size: 10px; padding: 4px 0; }
  table.pt.mt-table.av-table th[scope="row"] { font-size: 13px; padding-right: 2px; }
  .av-sg { font-size: 11px !important; }
}
.mt-s, .av-sg, .mt-shortkey { display: none; }
@media (max-width: 600px) {
  .mt-s { display: inline; font-weight: 700; letter-spacing: .5px; }
  .av-sg { display: block; font-size: 13px; }
  .mt-shortkey { display: block; margin: 0 0 8px; font-size: 12px; color: var(--text-dim); }
}