:root {
  --bg: #07101d;
  --panel: #0d1828;
  --panel2: #111f32;
  --text: #f5efe1;
  --muted: #9fa9b8;
  --gold: #caa76a;
  --gold-soft: rgba(202, 167, 106, .13);
  --border: rgba(202, 167, 106, .22);
  --danger: #efb2aa;
  --success: #9fd6b4;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 50% -10%, #172c48 0, var(--bg) 48%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button:disabled { opacity: .55; cursor: wait; transform: none !important; }
.topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 5vw; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 14px; letter-spacing: .16em; font-size: 13px; white-space: nowrap; }
.mark { color: var(--gold); font-size: 20px; letter-spacing: normal; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.language-control { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }
.language-control select { border: 1px solid var(--border); background: rgba(7,16,29,.9); color: var(--text); border-radius: 999px; padding: 7px 28px 7px 10px; }
.privacy-pill { color: var(--gold); font-size: 13px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; background: var(--gold-soft); }
.shell { width: min(1500px, 94vw); margin: 0 auto; }
.hero { min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 1000px; padding: 8vh 0; }
.eyebrow { margin: 0 0 12px; color: var(--gold); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(42px, 6vw, 84px); line-height: 1.04; margin: 0 0 28px; }
h2 { margin: 0 0 18px; font-family: Georgia, serif; font-weight: 400; font-size: 28px; }
h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 20px; }
.subcopy { max-width: 800px; color: #c7cfda; font-size: 20px; line-height: 1.65; }
.primary, .secondary, .suggestions button, .feedback-actions button { border-radius: 10px; cursor: pointer; transition: .2s ease; }
.primary { border: 0; background: var(--gold); color: #11151b; padding: 14px 22px; font-weight: 700; }
.primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.secondary { border: 1px solid var(--border); background: var(--gold-soft); color: var(--text); padding: 12px 16px; }
.text-button { border: 0; background: none; color: var(--gold); cursor: pointer; padding: 4px; }
.privacy-copy { max-width: 800px; margin-top: 30px; color: var(--muted); line-height: 1.6; }
.workspace { display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px; gap: 18px; padding: 28px 0 60px; align-items: start; }
.panel { border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, rgba(17,31,50,.94), rgba(10,20,34,.94)); padding: 22px; min-width: 0; }
.ask-panel { min-height: 720px; }
.panel-heading-row, .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
label { display: grid; gap: 7px; margin-bottom: 14px; color: #c9d0da; font-size: 13px; }
input, textarea, select { width: 100%; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.18); color: var(--text); border-radius: 10px; padding: 12px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-birth { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; color: #d7dde6; line-height: 1.55; font-size: 13px; }
.chart-summary { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; line-height: 1.65; }
.chart-summary strong { color: var(--gold); }
.kundli-section { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; }
.tiny-note { font-size: 11px; color: var(--muted); }
.kundli-chart { margin-top: 14px; }
.kundli-chart svg { width: 100%; height: auto; display: block; color: var(--gold); }
.kundli-chart text { fill: var(--text); font-size: 8px; font-family: ui-sans-serif, system-ui, sans-serif; }
.kundli-chart .house-number { fill: var(--gold); font-size: 7px; }
.debug-details, .sources-panel { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
details summary { cursor: pointer; color: var(--gold); }
.debug-chart { margin-top: 12px; display: grid; gap: 6px; font-size: 12px; color: #cbd3de; }
.debug-row { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.suggestions button { border: 1px solid rgba(255,255,255,.11); color: #d8dee8; background: rgba(255,255,255,.04); padding: 9px 12px; }
.status { margin-top: 18px; }
.reading-progress { margin-top: 22px; display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: linear-gradient(135deg, rgba(202,167,106,.1), rgba(255,255,255,.02)); }
.orbital-loader { width: 54px; height: 54px; position: relative; border: 1px solid rgba(202,167,106,.25); border-radius: 50%; animation: rotate 7s linear infinite; }
.orbital-loader::before, .orbital-loader::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(202,167,106,.18); border-radius: 50%; }
.orbital-loader::after { inset: 16px; }
.orbital-loader span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(202,167,106,.8); }
.orbital-loader span:nth-child(1) { top: -3px; left: 23px; }
.orbital-loader span:nth-child(2) { bottom: 5px; left: 4px; }
.orbital-loader span:nth-child(3) { right: 2px; bottom: 12px; }
@keyframes rotate { to { transform: rotate(360deg); } }
.progress-title { margin: 0; font-family: Georgia, serif; font-size: 19px; color: var(--text); }
.progress-detail { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.progress-steps { grid-column: 1 / -1; display: flex; gap: 7px; }
.progress-step { height: 3px; flex: 1; border-radius: 999px; background: rgba(255,255,255,.08); transition: .4s ease; }
.progress-step.active, .progress-step.done { background: var(--gold); }
.answer { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 24px; line-height: 1.75; color: #e7e9ed; }
.answer h2 { margin-top: 30px; margin-bottom: 10px; font-size: 24px; color: var(--text); }
.answer h3 { margin-top: 24px; color: var(--gold); }
.answer p { margin: 0 0 16px; }
.answer ul { padding-left: 22px; }
.answer li { margin-bottom: 8px; }
.answer strong { color: #fff4d9; }
.answer .source-tag { display: inline-block; padding: 2px 6px; margin: 0 2px; border-radius: 999px; font-size: 11px; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--border); }
.sources-panel summary { display: flex; gap: 8px; align-items: center; }
.sources-list { display: grid; gap: 10px; margin-top: 14px; }
.source-card { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.source-card strong { color: var(--gold); }
.source-card p { margin: 7px 0 0; color: #c2cad5; font-size: 13px; line-height: 1.5; }
.feedback-panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.feedback-panel p { margin: 0 0 10px; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-actions button { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text); padding: 8px 12px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.event-list { display: grid; gap: 10px; margin-top: 18px; }
.event { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.03); }
.event small { color: var(--gold); }
.event button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.privacy-callout { display: grid; gap: 5px; margin-bottom: 18px; border-left: 2px solid var(--gold); padding: 10px 12px; background: var(--gold-soft); color: #cbd3de; font-size: 13px; line-height: 1.45; }
.privacy-callout strong { color: var(--gold); }
.future-connectors { margin-top: 28px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; }
.future-connectors > p:first-child { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
.connector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.connector-grid span { border: 1px dashed rgba(202,167,106,.22); border-radius: 9px; padding: 10px; color: #aeb7c3; font-size: 13px; }
.connector-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1050px) { .workspace { grid-template-columns: 1fr; } .ask-panel { order: 1; min-height: 0; } .birth-panel { order: 2; } .life-panel { order: 3; } }
@media (max-width: 700px) { .topbar { padding: 10px 4vw; align-items: flex-start; } .topbar-actions { align-items: flex-end; } .privacy-pill { display: none; } .language-control { flex-direction: column; align-items: flex-end; gap: 3px; } .language-control > span { display: none; } .hero { padding-top: 3vh; } .subcopy { font-size: 17px; } .two-col { grid-template-columns: 1fr; } .panel { padding: 18px; } .reading-progress { grid-template-columns: 48px 1fr; } .orbital-loader { width: 44px; height: 44px; } }


/* v0.6 — Conversation, chart exploration, and beginner-friendly UX */
.field-help { color: var(--muted); font-size: 11px; line-height: 1.4; font-weight: 400; }
.chart-reassurance { display: grid; gap: 5px; margin: 14px 0; padding: 12px 14px; border-left: 2px solid var(--gold); background: var(--gold-soft); border-radius: 0 10px 10px 0; color: #cbd3de; font-size: 12px; line-height: 1.5; }
.chart-reassurance strong { color: var(--gold); }
.chart-controls { display: grid; gap: 9px; margin: 14px 0; }
.segmented { display: flex; gap: 5px; padding: 4px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(0,0,0,.14); }
.segmented button { flex: 1; border: 0; border-radius: 7px; padding: 8px 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.segmented button.active { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px var(--border); }
.south-chart { display: grid; grid-template-columns: repeat(4, 1fr); aspect-ratio: 1; border: 1px solid var(--gold); color: var(--text); }
.south-cell { position: relative; min-width: 0; border: .5px solid rgba(202,167,106,.7); padding: 5px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; }
.south-cell .sign-number { position: absolute; top: 3px; left: 4px; color: var(--gold); font-size: 9px; }
.south-cell .lagna-mark { position: absolute; top: 3px; right: 4px; color: var(--gold); font-weight: 700; }
.south-empty { background: rgba(202,167,106,.035); }
.calculation-info { margin-top: 12px; color: #cbd3de; font-size: 12px; line-height: 1.65; }
.welcome-prompts { margin: 0 0 20px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg, rgba(202,167,106,.09), rgba(255,255,255,.02)); }
.welcome-title { margin: 0 0 12px; font-family: Georgia, serif; font-size: 18px; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prompt-grid button { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 11px; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; text-align: left; }
.prompt-grid button:hover { border-color: var(--border); background: var(--gold-soft); }
.conversation-thread { display: grid; gap: 16px; }
.conversation-turn { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 18px; }
.user-question { margin-left: auto; width: fit-content; max-width: 85%; padding: 10px 13px; border-radius: 14px 14px 4px 14px; background: var(--gold-soft); border: 1px solid var(--border); color: #fff4d9; }
.assistant-reading { margin-top: 14px; color: #dfe4eb; line-height: 1.7; }
.assistant-reading h2 { font-family: Georgia, serif; font-size: 20px; margin: 20px 0 8px; }
.assistant-reading p { margin: 0 0 12px; }
.composer { position: relative; }
.follow-up-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.follow-up-chips button { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); color: #dce2ea; padding: 9px 12px; border-radius: 999px; cursor: pointer; }
.follow-up-chips button:hover { border-color: var(--gold); color: var(--gold); }
.source-intro { margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); }
.source-intro strong { color: var(--gold); }
.source-intro p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.source-book-card { display: flex; gap: 11px; align-items: center; }
.source-book-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--gold); background: var(--gold-soft); }
.timeline-explainer { margin: -4px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.event-list { position: relative; padding-left: 12px; }
.event-list::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 1px; width: 1px; background: var(--border); }
.timeline-event::before { content: ""; position: absolute; left: -16px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.timeline-event { position: relative; }
@media (max-width: 700px) {
  .prompt-grid { grid-template-columns: 1fr; }
  .segmented { flex-wrap: wrap; }
  .segmented button { min-width: 44%; }
  .user-question { max-width: 95%; }
}


/* v0.7 — Life Map & Visual Intelligence */
.chart-control-group { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; }
.chart-control-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.life-map-section { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; }
.life-map { margin-top: 14px; }
.life-map-scroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.life-map-track { min-width: 650px; position: relative; padding: 22px 0 68px; }
.dasha-row { height: 58px; display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.15); }
.dasha-segment { min-width: 38px; border: 0; border-right: 1px solid rgba(7,16,29,.7); color: var(--text); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 7px 8px; cursor: pointer; background: rgba(202,167,106,.08); overflow: hidden; }
.dasha-segment:hover, .dasha-segment.active { background: rgba(202,167,106,.22); box-shadow: inset 0 -3px 0 var(--gold); }
.dasha-segment span { font-size: 11px; font-weight: 700; white-space: nowrap; }
.dasha-segment small { margin-top: 3px; color: #c1c9d4; font-size: 9px; }
.today-marker { position: absolute; top: 12px; bottom: 48px; width: 1px; background: var(--gold); z-index: 4; pointer-events: none; }
.today-marker::before { content: ""; position: absolute; top: -2px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(202,167,106,.8); }
.today-marker span { position: absolute; top: -20px; transform: translateX(-50%); white-space: nowrap; color: var(--gold); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.event-overlay { position: absolute; left: 0; right: 0; top: 88px; height: 42px; }
.life-map-event { position: absolute; transform: translateX(-50%); max-width: 110px; border: 0; background: transparent; color: var(--text); cursor: default; padding: 0; }
.life-map-event span { display: block; margin: 0 auto 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(202,167,106,.15); }
.life-map-event em { display: block; font-style: normal; font-size: 9px; color: #ccd4de; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dasha-detail { margin-top: 12px; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); font-size: 12px; line-height: 1.5; }
.dasha-detail strong { color: var(--gold); }
.dasha-detail p { margin: 6px 0 0; color: var(--muted); }
.active-dasha-pill { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 700px) {
  .chart-control-group { grid-template-columns: 1fr; gap: 4px; }
  .life-map-track { min-width: 560px; }
}


/* v0.8 — The Kaaladarshi Experience */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(circle at 20% 15%, rgba(202,167,106,.07), transparent 23%),
    radial-gradient(circle at 80% 5%, rgba(71,111,166,.12), transparent 28%),
    radial-gradient(circle at 50% 82%, rgba(202,167,106,.04), transparent 24%);
}
.account-button { border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,.035); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.user-menu { display:flex; align-items:center; gap:8px; font-size:12px; color:#dce2ea; }
.user-menu img { width:30px; height:30px; border-radius:50%; }
.intelligence-strip { margin: 44px 0 18px; width: 100%; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--border); }
.intelligence-strip > div { min-height:145px; padding:20px; background:rgba(7,16,29,.88); display:flex; flex-direction:column; gap:8px; }
.intelligence-strip span { color:var(--gold); font-size:10px; letter-spacing:.16em; }
.intelligence-strip strong { font-family:Georgia,serif; font-size:18px; font-weight:400; }
.intelligence-strip small { color:var(--muted); line-height:1.5; font-size:12px; }
.foundation-note { color:#d8dfE8; font-size:16px; max-width:800px; }
.experience { padding:28px 0 70px; }
.journey-hero { position:relative; border:1px solid var(--border); border-radius:24px; padding:28px; margin-bottom:20px; overflow:hidden; background:linear-gradient(145deg, rgba(17,31,50,.98), rgba(7,16,29,.98)); }
.journey-hero::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-180px; top:-260px; border:1px solid rgba(202,167,106,.08); box-shadow:0 0 80px rgba(202,167,106,.04) inset; }
.journey-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; position:relative; z-index:2; }
.journey-heading h2 { font-size:34px; margin-bottom:7px; }
.journey-heading p:not(.eyebrow) { color:var(--muted); margin:0; }
.journey-actions { display:flex; gap:10px; flex-wrap:wrap; }
.life-map-hero { margin-top:22px; }
.life-map-hero .life-map-track { min-width:900px; }
.life-map-hero .dasha-row { height:78px; }
.life-map-hero .dasha-segment span { font-size:13px; }
.life-map-hero .dasha-segment small { font-size:10px; }
.life-map-hero .event-overlay { top:112px; }
.life-map-hero .life-map-track { padding-bottom:90px; }
.life-map-section { display:none !important; } /* promoted to center-stage hero */
.workspace { grid-template-columns:300px minmax(0,1fr) 280px; }
.ask-panel { min-height:620px; }
.life-panel { max-height:760px; overflow:auto; }
.save-prompt { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); width:min(760px,calc(100vw - 32px)); z-index:30; border:1px solid var(--border); border-radius:18px; padding:16px 18px; background:rgba(10,20,34,.96); backdrop-filter:blur(18px); box-shadow:0 18px 60px rgba(0,0,0,.35); display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.save-prompt > div { display:grid; gap:5px; }
.save-prompt span { color:var(--muted); font-size:12px; }
.save-prompt-close { position:absolute; top:5px; right:8px; border:0; background:none; color:var(--muted); cursor:pointer; font-size:18px; }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(1,5,10,.74); backdrop-filter:blur(8px); display:grid; place-items:center; padding:20px; }
.event-modal { width:min(520px,100%); border:1px solid var(--border); border-radius:22px; background:#0d1828; padding:26px; position:relative; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.modal-close { position:absolute; right:14px; top:10px; border:0; background:none; color:var(--muted); font-size:24px; cursor:pointer; }
.event-category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.event-category-grid button { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--text); padding:10px; border-radius:10px; cursor:pointer; }
.event-category-grid button.active { border-color:var(--gold); background:var(--gold-soft); color:var(--gold); }
@media(max-width:1050px){
  .intelligence-strip { grid-template-columns:1fr 1fr; }
  .workspace { grid-template-columns:1fr; }
  .birth-panel,.life-panel { order:2; }
  .ask-panel { order:1; }
}
@media(max-width:700px){
  .topbar { align-items:flex-start; }
  .privacy-pill { display:none; }
  .account-button { font-size:11px; padding:8px 10px; }
  .intelligence-strip { grid-template-columns:1fr; }
  .intelligence-strip > div { min-height:0; }
  .journey-hero { padding:20px 16px; margin-left:-2vw; margin-right:-2vw; border-radius:18px; }
  .journey-heading { align-items:flex-start; flex-direction:column; }
  .journey-heading h2 { font-size:28px; }
  .journey-actions { width:100%; }
  .journey-actions button { flex:1; }
  .save-prompt { grid-template-columns:1fr; }
  .event-category-grid { grid-template-columns:1fr 1fr; }
}


/* v0.9 — The Living Life Map */
.app-nav { position:sticky; top:0; z-index:20; display:flex; justify-content:center; gap:5px; padding:8px 4vw; border-bottom:1px solid rgba(202,167,106,.12); background:rgba(7,16,29,.9); backdrop-filter:blur(18px); }
.app-nav button { border:0; background:transparent; color:var(--muted); padding:9px 13px; border-radius:999px; cursor:pointer; }
.app-nav button:hover,.app-nav button.active { color:var(--text); background:rgba(255,255,255,.055); }
.life-map-toolbar { display:flex; justify-content:space-between; gap:12px; margin:18px 0 5px; flex-wrap:wrap; }
.layer-toggle,.zoom-toggle { display:flex; gap:5px; flex-wrap:wrap; }
.layer-toggle button,.zoom-toggle button { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); color:var(--muted); border-radius:999px; padding:7px 10px; font-size:11px; cursor:pointer; }
.layer-toggle button.active,.zoom-toggle button.active { border-color:var(--border); color:var(--gold); background:var(--gold-soft); }
.time-axis-labels { display:grid; grid-template-columns:1fr auto 1fr; color:var(--muted); font-size:9px; letter-spacing:.12em; margin-top:15px; }
.time-axis-labels span:nth-child(2){color:var(--gold)}
.time-axis-labels span:last-child{text-align:right}
.climate-band { display:flex; height:18px; margin-top:8px; border-radius:999px; overflow:hidden; opacity:.88; }
.climate-segment { min-width:5px; height:100%; border-right:1px solid rgba(7,16,29,.25); }
.climate-growth{background:rgba(159,214,180,.55)!important}.climate-active{background:rgba(202,167,106,.68)!important}.climate-steady{background:rgba(110,153,194,.48)!important}.climate-transition{background:rgba(185,139,206,.50)!important}.climate-reflective{background:rgba(127,140,160,.48)!important}.climate-careful{background:rgba(220,151,130,.53)!important}
.climate-legend { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:10px; margin-top:14px; }
.climate-legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.contextual-ask { position:relative; border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:18px; background:linear-gradient(135deg,rgba(202,167,106,.1),rgba(255,255,255,.02)); }
.contextual-close { position:absolute; right:8px; top:7px; border:0; background:none; color:var(--muted); cursor:pointer; font-size:18px; }
.contextual-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.contextual-chips button { border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.15); color:var(--text); border-radius:999px; padding:8px 11px; cursor:pointer; }
.journey-panel { min-height:620px; }
.journey-mini-section { border-top:1px solid rgba(255,255,255,.07); padding-top:16px; margin-top:16px; }
.mini-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px; }
.mini-heading button { border:0; background:none; color:var(--gold); cursor:pointer; }
.profile-chips { display:flex; flex-wrap:wrap; gap:6px; }
.profile-chips button { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--muted); padding:7px 9px; border-radius:999px; }
.intention-card { border-left:2px solid var(--gold); padding:8px 10px; margin:7px 0; background:rgba(255,255,255,.025); border-radius:0 10px 10px 0; }
.intention-card strong { display:block; font-size:12px; }.intention-card small{color:var(--muted)}
.journey-profile-list { display:grid; gap:8px; }
.journey-profile { display:flex; gap:10px; align-items:center; padding:8px; border:1px solid rgba(255,255,255,.07); border-radius:12px; }
.profile-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--gold-soft); color:var(--gold); font-size:9px; font-weight:700; }
.journey-profile small { display:block; color:var(--muted); margin-top:3px; }
.full-width{width:100%;margin-top:16px}
.shared-journeys { margin:0 0 70px; }
.shared-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; }
.shared-preview { margin-top:18px; min-height:120px; border:1px dashed rgba(202,167,106,.25); border-radius:16px; display:grid; place-items:center; padding:20px; }
.shared-empty { color:var(--muted); text-align:center; max-width:600px; }
.history-drawer { position:fixed; z-index:60; top:0; right:0; bottom:0; width:min(430px,95vw); background:#0b1625; border-left:1px solid var(--border); box-shadow:-20px 0 70px rgba(0,0,0,.4); padding:22px; overflow:auto; }
.history-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.history-header button { border:0; background:none; color:var(--muted); font-size:24px; cursor:pointer; }
.history-list { display:grid; gap:9px; margin-top:18px; }
.history-item { border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); border-radius:12px; padding:12px; cursor:pointer; }
.history-item strong { display:block; font-size:13px; }.history-item p { color:var(--muted); font-size:11px; margin:6px 0 0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.life-map-intention { position:absolute; transform:translateX(-50%); top:42px; border:1px dashed var(--gold); background:rgba(7,16,29,.9); color:var(--gold); border-radius:999px; padding:4px 8px; font-size:9px; white-space:nowrap; }
@media(max-width:700px){.app-nav{justify-content:flex-start;overflow-x:auto}.app-nav button{white-space:nowrap}.shared-heading{align-items:flex-start;flex-direction:column}.climate-legend{display:grid;grid-template-columns:1fr 1fr}}


/* v0.10 — Living Journey Canvas */
.journey-hero { isolation:isolate; }
.journey-hero::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:.38;
  background-image:radial-gradient(circle at 12% 22%,rgba(255,255,255,.3) 0 1px,transparent 1.5px),radial-gradient(circle at 73% 17%,rgba(202,167,106,.28) 0 1px,transparent 1.5px),radial-gradient(circle at 42% 68%,rgba(255,255,255,.16) 0 1px,transparent 1.5px);
  background-size:210px 170px,310px 230px,260px 210px; animation:starDrift 28s linear infinite; }
@keyframes starDrift { to { background-position:40px 15px,-30px 20px,25px -30px; } }
.journey-canvas-controls { position:relative; margin-top:22px; z-index:12; }
.journey-path { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:28px; color:var(--muted); font-size:12px; }
.journey-path button { border:0; background:none; color:inherit; cursor:pointer; padding:2px 0; }
.journey-path button:hover,.journey-path>button:first-child { color:var(--gold); }
.canvas-control-row { display:grid; grid-template-columns:auto minmax(190px,280px) auto; gap:12px; align-items:end; margin-top:10px; }
.canvas-zoom-control { display:grid; grid-template-columns:40px minmax(130px,1fr) 40px; align-items:center; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.16); }
.canvas-zoom-control button { height:48px; border:0; background:rgba(255,255,255,.025); color:var(--gold); font-size:22px; cursor:pointer; }
.canvas-zoom-control button:hover { background:var(--gold-soft); }
.canvas-zoom-control>div { display:grid; justify-items:center; gap:2px; padding:5px 12px; }
.canvas-zoom-control small { font-size:8px; color:var(--muted); letter-spacing:.13em; }
.canvas-zoom-control strong { font-size:13px; }
.period-jump-control { margin:0; display:grid; gap:5px; font-size:10px; color:var(--muted); }
.period-jump-control select { min-height:48px; padding:9px 32px 9px 10px; }
.layers-button { min-height:48px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); color:var(--text); padding:0 14px; cursor:pointer; }
.layers-popover { position:absolute; right:0; top:76px; z-index:30; width:225px; border:1px solid var(--border); border-radius:14px; padding:12px; background:rgba(10,20,34,.98); box-shadow:0 18px 50px rgba(0,0,0,.36); }
.layers-popover label { display:flex; flex-direction:row; align-items:center; gap:9px; margin:0; padding:8px 4px; cursor:pointer; }
.layers-popover input { width:auto; }
.canvas-hint { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:10px; color:var(--muted); font-size:10px; }
.canvas-hint button { border:0; background:none; color:var(--gold); cursor:pointer; }
.mobile-hint { display:none; }
.life-map-hero { position:relative; padding-top:36px; overflow:visible; touch-action:pan-y; }
.life-map-scroll { overflow-x:auto; overflow-y:visible; padding:38px 0 12px; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain; }
.life-map-scroll::-webkit-scrollbar { display:none; }
.life-map-scroll.is-dragging { cursor:grabbing; user-select:none; }
.life-map-track { transition:min-width .46s cubic-bezier(.2,.7,.2,1),opacity .22s ease; }
.dasha-segment { transition:background .2s ease,transform .2s ease,box-shadow .2s ease; }
.dasha-segment:hover { transform:translateY(-2px); }
.dasha-segment.selected { background:rgba(202,167,106,.28); box-shadow:inset 0 -3px 0 var(--gold),0 0 22px rgba(202,167,106,.12); }
.today-marker { top:42px !important; z-index:9; animation:markerBreathe 2.8s ease-in-out infinite; }
.today-marker span { top:-31px !important; padding:3px 7px; border:1px solid rgba(202,167,106,.25); border-radius:999px; background:#0c1828; }
@keyframes markerBreathe { 50% { filter:drop-shadow(0 0 7px rgba(202,167,106,.65)); } }
.canvas-month-row { display:grid; grid-template-columns:repeat(12,1fr); min-height:100px; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.canvas-month { position:relative; border:0; border-right:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.018); color:var(--text); cursor:pointer; padding:12px 7px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:6px; }
.canvas-month:hover,.canvas-month.selected { background:var(--gold-soft); }
.canvas-month.current::before { content:""; position:absolute; top:8px; left:50%; width:7px; height:7px; transform:translateX(-50%); border-radius:50%; background:var(--gold); box-shadow:0 0 13px rgba(202,167,106,.8); }
.canvas-month small { color:var(--muted); font-size:9px; }.canvas-month strong { font-size:11px; }
.canvas-month .month-climate { width:100%; height:4px; border-radius:999px; }
.canvas-minimap { margin-top:16px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; color:var(--muted); font-size:9px; }
.minimap-track { position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.minimap-window { position:absolute; top:0; bottom:0; border-radius:999px; background:var(--gold); opacity:.66; transition:left .3s ease,width .3s ease; }
.month-focus { min-height:180px; border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; align-items:center; gap:26px; background:linear-gradient(135deg,rgba(202,167,106,.09),rgba(255,255,255,.018)); }
.month-focus-orbit { width:92px; height:92px; flex:0 0 92px; border:1px solid rgba(202,167,106,.25); border-radius:50%; position:relative; animation:rotate 10s linear infinite; }
.month-focus-orbit::before,.month-focus-orbit::after { content:""; position:absolute; border:1px solid rgba(202,167,106,.15); border-radius:50%; inset:14px; }.month-focus-orbit::after{inset:29px}
.month-focus-orbit span { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(202,167,106,.7); }
.month-focus-orbit span:nth-child(1){top:-4px;left:42px}.month-focus-orbit span:nth-child(2){right:5px;bottom:14px}.month-focus-orbit span:nth-child(3){left:7px;bottom:17px}
.journey-bottom-sheet { position:fixed; z-index:80; left:12px; right:12px; bottom:12px; border:1px solid var(--border); border-radius:22px; background:rgba(11,22,37,.98); backdrop-filter:blur(20px); padding:22px 18px 18px; box-shadow:0 -18px 70px rgba(0,0,0,.46); }
.bottom-sheet-handle { width:44px; height:4px; border-radius:999px; background:rgba(255,255,255,.2); margin:-10px auto 14px; }
.bottom-sheet-close { position:absolute; right:12px; top:8px; border:0; background:none; color:var(--muted); font-size:20px; cursor:pointer; }
.journey-sheet-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }.journey-sheet-actions button{flex:1;min-width:125px}
@media(min-width:701px){.journey-bottom-sheet{left:auto;right:32px;width:min(430px,calc(100vw - 64px));}}
@media(max-width:700px){
  .canvas-control-row { grid-template-columns:1fr auto; }
  .period-jump-control { grid-column:1/-1; grid-row:2; }
  .layers-button { grid-column:2; grid-row:1; }
  .desktop-hint { display:none; }.mobile-hint { display:inline; }
  .canvas-hint { align-items:flex-start; }
  .life-map-track,.canvas-month-row { min-width:780px; }
  .dasha-detail { display:none !important; }
  .month-focus { align-items:flex-start; }.month-focus-orbit{width:68px;height:68px;flex-basis:68px}
}


/* v0.11 — Discovery & Immersion */
:root{
  --bg:#06162d; --panel:#0b2140; --panel-2:#0d294d; --text:#f4f7fb; --muted:#9eb2cc;
  --gold:#f2c66d; --gold-soft:rgba(242,198,109,.13); --border:rgba(157,196,255,.18);
}
body{
  background:
    radial-gradient(circle at 18% 8%,rgba(37,100,185,.30),transparent 27%),
    radial-gradient(circle at 83% 14%,rgba(114,56,190,.18),transparent 25%),
    radial-gradient(circle at 48% 68%,rgba(13,89,151,.20),transparent 35%),
    linear-gradient(180deg,#06162d 0%,#071a35 42%,#041024 100%);
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.34;background-image:radial-gradient(circle,rgba(255,255,255,.65) 0 1px,transparent 1.3px);background-size:92px 92px}
.panel,.journey-hero{background:linear-gradient(165deg,rgba(13,41,77,.94),rgba(7,24,49,.94));box-shadow:0 22px 70px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)}
.landing-hero{position:relative;overflow:hidden;padding-top:7vh}
.hero-copy{position:relative;z-index:2;max-width:1050px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.landing-primary{font-size:15px;padding:16px 24px}.landing-secondary{padding:15px 20px}
.hero-trust-row{display:flex;gap:18px;flex-wrap:wrap;color:#abc3df;font-size:11px;margin-top:20px}
.landing-orbit{position:absolute;border:1px solid rgba(126,180,255,.14);border-radius:50%;pointer-events:none}
.landing-orbit-one{width:620px;height:620px;right:-240px;top:-310px;animation:slowSpin 34s linear infinite}
.landing-orbit-two{width:320px;height:320px;right:20px;top:-115px;border-color:rgba(242,198,109,.12);animation:slowSpin 19s linear infinite reverse}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero-life-map-demo{position:relative;z-index:2;margin:52px 0 70px;padding:22px;border:1px solid rgba(126,180,255,.2);border-radius:24px;background:linear-gradient(145deg,rgba(12,38,73,.92),rgba(7,23,47,.96));box-shadow:0 30px 90px rgba(0,0,0,.26)}
.demo-map-header,.demo-map-footer{display:flex;justify-content:space-between;gap:15px;align-items:center}.demo-map-header small{display:block;color:var(--muted);font-size:9px;letter-spacing:.16em}.demo-map-header strong{font-family:Georgia,serif;font-size:20px}.demo-live-pill{font-size:10px;color:#b8d3ee;border:1px solid rgba(126,180,255,.18);padding:7px 10px;border-radius:999px}.demo-live-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#63e6be;box-shadow:0 0 12px #63e6be;margin-right:5px}
.demo-breadcrumb{margin:18px 0 10px;color:var(--gold);font-size:11px}
.demo-timeline-stage{height:145px;display:flex;position:relative;overflow:hidden;border-radius:16px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06)}
.demo-phase{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:.45s ease;border-right:1px solid rgba(5,15,31,.6)}.demo-phase:hover,.demo-phase.selected{transform:translateY(-3px);filter:brightness(1.18);box-shadow:inset 0 -4px 0 rgba(255,255,255,.75)}
.demo-phase span{font-weight:700}.demo-phase small{margin-top:5px;color:rgba(255,255,255,.7);font-size:10px}.demo-jupiter{width:22%;background:linear-gradient(180deg,rgba(32,201,151,.55),rgba(32,201,151,.23))}.demo-saturn{width:28%;background:linear-gradient(180deg,rgba(70,143,230,.52),rgba(70,143,230,.22))}.demo-mercury{width:24%;background:linear-gradient(180deg,rgba(255,193,7,.58),rgba(255,193,7,.24))}.demo-venus{width:26%;background:linear-gradient(180deg,rgba(190,75,219,.58),rgba(190,75,219,.24))}
.demo-now{position:absolute;z-index:6;left:59%;top:0;bottom:0;width:1px;background:var(--gold)}.demo-now::before{content:"";position:absolute;top:18px;left:-5px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 20px rgba(242,198,109,.9)}.demo-now span{position:absolute;top:1px;left:0;transform:translateX(-50%);white-space:nowrap;color:var(--gold);font-size:8px}
.demo-events{position:absolute;bottom:10px;left:0;right:0;height:20px;pointer-events:none}.demo-events span{position:absolute;font-size:8px;color:#e4edf7}
.demo-map-footer{margin-top:10px;color:var(--muted);font-size:9px;letter-spacing:.05em}.demo-map-footer span:nth-child(2){color:#c2d5e9}
.landing-showcase{padding-bottom:80px}.landing-section-heading{max-width:820px;margin:0 auto 45px;text-align:center}.landing-section-heading h2{font-size:38px}.landing-section-heading p{color:var(--muted);line-height:1.7}
.feature-story,.shared-landing-demo,.chart-landing-demo{display:grid;grid-template-columns:1fr 1.25fr;gap:36px;align-items:center;margin:26px 0 70px;padding:30px;border:1px solid var(--border);border-radius:24px;background:rgba(9,31,61,.72)}
.feature-number{display:inline-block;color:var(--gold);font-size:10px;letter-spacing:.18em;margin-bottom:12px}.feature-copy h3{font-size:30px}.feature-copy p{color:#b6c9dd;line-height:1.7}.feature-copy small{color:var(--muted)}
.feature-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}.feature-pills span{border:1px solid var(--border);padding:7px 10px;border-radius:999px;font-size:11px}.feature-pills b{color:var(--gold)}
.landing-drilldown-demo{display:grid;gap:9px}.drilldown-level{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.14)}.drilldown-level small{color:var(--muted);font-size:9px}.drilldown-level>div{display:flex;margin-top:9px;height:30px;overflow:hidden;border-radius:8px}.drilldown-level i{flex:1;border-right:1px solid rgba(5,15,31,.5);background:rgba(70,143,230,.42)}.drill-life i:nth-child(2){background:rgba(32,201,151,.5)}.drill-life i:nth-child(3){background:rgba(255,193,7,.55)}.drill-life i:nth-child(4){background:rgba(190,75,219,.5)}.drill-phase i:nth-child(1){background:rgba(255,193,7,.58)}.drill-phase i:nth-child(2){background:rgba(32,201,151,.5)}.drill-phase i:nth-child(3){background:rgba(190,75,219,.52)}.drill-arrow{text-align:center;color:var(--gold)}.mini-months{display:grid!important;grid-template-columns:repeat(12,1fr);gap:2px;background:transparent!important}.mini-months i{border:0!important;border-radius:3px;background:rgba(80,160,245,.45)!important}.mini-months i:nth-child(5),.mini-months i:nth-child(6){background:rgba(32,201,151,.65)!important}.mini-months i:nth-child(8){background:rgba(255,193,7,.65)!important}
.landing-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:70px}.landing-feature-card{padding:24px;border:1px solid var(--border);border-radius:20px;background:rgba(9,31,61,.68)}.feature-icon{font-size:26px;color:var(--gold)}.landing-feature-card h3{margin-top:14px}.landing-feature-card p{color:var(--muted);line-height:1.6}.mini-event-map,.mini-intentions{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.mini-event-map span,.mini-intentions span{font-size:9px;border:1px solid rgba(255,255,255,.08);padding:6px 8px;border-radius:999px}.mini-event-map span{color:#7ce7c4}.mini-intentions span{color:#d8a7f3;border-style:dashed}.mini-ask{margin-top:16px;border:1px solid rgba(242,198,109,.18);border-radius:10px;padding:10px;color:#dbe8f5;font-size:11px}.mini-ask b{float:right;color:var(--gold)}
.dual-timeline-demo{position:relative;display:grid;grid-template-columns:70px 1fr;gap:10px 12px;padding:28px 15px}.dual-label{font-size:9px;color:var(--muted);align-self:center}.dual-track{display:flex;height:44px;border-radius:10px;overflow:hidden}.dual-track i{flex:1}.d-growth{background:rgba(32,201,151,.62)}.d-active{background:rgba(255,193,7,.65)}.d-transition{background:rgba(190,75,219,.58)}.d-steady{background:rgba(70,143,230,.58)}.dual-today{position:absolute;left:65%;top:8px;bottom:8px;border-left:1px solid var(--gold);font-size:8px;color:var(--gold);padding-left:5px}.dual-insight{position:absolute;right:20px;bottom:-8px;color:#7ce7c4;font-size:10px}
.chart-landing-demo{grid-template-columns:1.3fr 1fr}.sample-kundli{aspect-ratio:1;position:relative;max-width:420px;margin:auto;border:1px solid rgba(242,198,109,.55);background:radial-gradient(circle,rgba(30,100,180,.15),transparent 65%)}.sample-kundli-lines{position:absolute;inset:0;background:linear-gradient(45deg,transparent 49.7%,rgba(242,198,109,.45) 50%,transparent 50.3%),linear-gradient(-45deg,transparent 49.7%,rgba(242,198,109,.45) 50%,transparent 50.3%)}.sample-kundli button{position:absolute;transform:translate(-50%,-50%);border:0;background:none;color:#e7f0fb;font-size:24px;cursor:pointer}.sample-kundli button small{display:block;font-size:8px;color:var(--muted)}.sample-planet-active{color:var(--gold)!important;text-shadow:0 0 16px rgba(242,198,109,.9)}.sample-chart-callout{position:absolute;left:8%;right:8%;bottom:7%;padding:10px;border:1px solid rgba(126,180,255,.17);border-radius:10px;background:rgba(6,22,45,.9)}.sample-chart-callout strong{display:block;color:var(--gold);font-size:11px}.sample-chart-callout span{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.trust-landing{text-align:center;margin:80px 0 60px}.landing-privacy{max-width:680px;margin:24px auto 0;padding:18px;display:flex;gap:14px;text-align:left;border:1px solid rgba(126,180,255,.18);border-radius:16px;background:rgba(9,31,61,.62)}.landing-privacy span{font-size:22px}.landing-privacy p{margin:5px 0 0;color:var(--muted)}
.landing-final-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px;border:1px solid rgba(242,198,109,.22);border-radius:24px;background:linear-gradient(135deg,rgba(22,65,118,.7),rgba(54,35,91,.5))}
.climate-growth{background:#2dd4a5!important}.climate-active{background:#ffca4f!important}.climate-steady{background:#4c9df0!important}.climate-transition{background:#b96be2!important}.climate-reflective{background:#6d78e8!important}.climate-careful{background:#f08c7e!important}
.dasha-segment{color:#f8fbff}.dasha-segment.active,.dasha-segment.selected{filter:brightness(1.16);box-shadow:inset 0 -4px 0 #fff,0 0 28px rgba(105,177,255,.28)!important}
.follow-up-chips button{position:relative;padding-right:34px!important}.follow-up-chips button::after{content:"↗";position:absolute;right:12px;color:var(--gold)}
.floating-ask{position:fixed;right:24px;bottom:24px;z-index:45;border:1px solid rgba(242,198,109,.3);border-radius:999px;background:rgba(9,31,61,.92);backdrop-filter:blur(14px);color:var(--gold);padding:11px 16px;box-shadow:0 12px 35px rgba(0,0,0,.3);cursor:pointer}
.chart-explore-button{font-size:11px}.kundli-chart{position:relative;padding:8px;border-radius:14px;background:radial-gradient(circle at 50% 50%,rgba(65,140,220,.12),transparent 60%);animation:chartReveal .7s ease both}.kundli-chart svg,.south-chart{filter:drop-shadow(0 0 10px rgba(89,156,230,.12))}@keyframes chartReveal{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.kundli-chart .chart-planet,.south-cell[data-house],.south-cell[data-planet]{cursor:pointer;transition:.2s ease}.kundli-chart .chart-planet:hover,.kundli-chart .chart-planet.active{fill:var(--gold);filter:drop-shadow(0 0 5px rgba(242,198,109,.9))}.south-cell:hover,.south-cell.chart-cell-active{background:rgba(78,155,240,.14);box-shadow:inset 0 0 18px rgba(78,155,240,.12)}
.chart-insight{margin-top:12px;padding:12px;border:1px solid rgba(126,180,255,.16);border-radius:12px;background:rgba(7,26,52,.68)}.chart-insight strong{color:var(--gold)}.chart-insight p{color:var(--muted);font-size:11px;line-height:1.5}.chart-insight button{margin-top:5px}
.chart-explore-modal{position:fixed;inset:0;z-index:90;background:rgba(2,9,22,.84);backdrop-filter:blur(16px);padding:3vh 3vw;overflow:auto}.chart-explore-shell{max-width:1200px;margin:auto;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,#0c294d,#07182f);padding:24px}.chart-explore-header{display:flex;justify-content:space-between;gap:20px}.chart-explore-header>button{border:0;background:none;color:var(--muted);font-size:28px;cursor:pointer}.chart-explore-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:24px;align-items:start}.chart-explore-canvas{min-height:520px;display:grid;place-items:center}.chart-explore-canvas .kundli-chart{width:min(620px,100%)}.chart-explore-insight{border:1px solid rgba(126,180,255,.16);border-radius:16px;padding:18px;background:rgba(6,22,45,.65)}
@media(max-width:900px){.landing-feature-grid{grid-template-columns:1fr}.feature-story,.shared-landing-demo,.chart-landing-demo{grid-template-columns:1fr}.chart-explore-body{grid-template-columns:1fr}.landing-section-heading h2{font-size:30px}}
@media(max-width:700px){.hero-life-map-demo{margin-top:35px;padding:14px}.demo-timeline-stage{height:120px}.demo-events{display:none}.landing-final-cta{align-items:flex-start;flex-direction:column}.hero-trust-row{gap:9px}.landing-showcase{padding-bottom:40px}.feature-story,.shared-landing-demo,.chart-landing-demo{padding:18px}.floating-ask{right:14px;bottom:14px}.chart-explore-modal{padding:10px}.chart-explore-shell{padding:15px}.chart-explore-canvas{min-height:360px}}

.kundli-chart .chart-node-halo{fill:rgba(76,157,240,.04);stroke:rgba(126,180,255,.08);stroke-width:.35;transition:.2s ease}
.kundli-chart .chart-node:hover .chart-node-halo,.kundli-chart .chart-node.chart-cell-active .chart-node-halo{fill:rgba(242,198,109,.13);stroke:rgba(242,198,109,.55)}
.chart-insight-title{display:flex;gap:10px;align-items:center}.chart-insight-title>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-size:18px}.chart-insight-title small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.conversation-history-shortcut{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid rgba(126,180,255,.14);border-radius:12px;background:rgba(8,29,58,.55);color:var(--text);padding:10px 12px;cursor:pointer;margin-bottom:14px}.conversation-history-shortcut span,.conversation-history-shortcut b{color:var(--gold)}.conversation-history-shortcut small{display:block;color:var(--muted);margin-top:2px}
.follow-up-heading{grid-column:1/-1;color:var(--muted);font-size:11px;margin:0 0 2px}
button:disabled{opacity:.35;cursor:not-allowed}


/* v0.11.1 — Stacked Life Map exploration */
.overview-anchor{position:relative;padding:14px 0 6px}
.overview-anchor-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:9px}
.overview-anchor-head small{display:block;color:var(--gold);font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.overview-anchor-head strong{display:block;margin-top:3px;font-family:Georgia,serif;font-size:17px;font-weight:400}
.overview-anchor-head>span{color:var(--gold);font-size:9px;letter-spacing:.08em}
.overview-anchor-scroll{overflow-x:auto;overflow-y:visible;padding:30px 0 5px;scrollbar-width:none}
.overview-anchor-scroll::-webkit-scrollbar{display:none}
.overview-anchor-track{position:relative;min-width:1050px}
.overview-phase{min-height:58px}
.overview-phase.selected{transform:translateY(-3px);filter:brightness(1.2);box-shadow:inset 0 -4px 0 #fff,0 0 30px rgba(83,166,255,.34)!important}
.overview-today{top:18px!important}
.phase-expansion{margin-top:20px;padding:20px;border:1px solid rgba(126,180,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(14,48,88,.82),rgba(7,26,52,.82));animation:phaseExpand .38s ease both}
@keyframes phaseExpand{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.phase-expansion-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.phase-expansion-header h3{font-size:22px}.phase-expansion-header p:last-child{color:var(--muted);font-size:11px;margin:7px 0 0}
.phase-expansion-actions{display:flex;gap:8px;flex-wrap:wrap}
.subperiod-stack{display:flex;min-width:760px;margin-top:18px;border-radius:12px;overflow:hidden;min-height:72px;background:rgba(0,0,0,.13)}
.subperiod-stack button{position:relative;border:0;border-right:1px solid rgba(3,13,29,.55);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;transition:.22s ease}
.subperiod-stack button:hover,.subperiod-stack button.selected{filter:brightness(1.18);transform:translateY(-2px);box-shadow:inset 0 -4px 0 rgba(255,255,255,.9)}
.subperiod-stack button.active::before{content:"";position:absolute;top:7px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.subperiod-stack span{font-weight:700;font-size:11px}.subperiod-stack small{font-size:8px;color:rgba(255,255,255,.72)}
.inline-subperiod-detail{margin-top:12px;padding:12px 14px;border:1px solid rgba(242,198,109,.18);border-radius:12px;background:rgba(6,22,45,.58);display:flex;justify-content:space-between;gap:18px;align-items:center}
.inline-subperiod-detail>div:first-child{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline-subperiod-detail small{color:var(--gold);text-transform:uppercase;letter-spacing:.08em}.inline-subperiod-detail strong{font-size:12px}.inline-subperiod-detail span{color:var(--muted);font-size:10px}
.inline-subperiod-detail>div:last-child{display:flex;gap:7px;flex-wrap:wrap}
.drilldown-panel{margin-top:18px;padding:18px;border:1px solid rgba(126,180,255,.16);border-radius:18px;background:rgba(7,28,57,.56);animation:phaseExpand .35s ease both}
.drilldown-panel-head{margin-bottom:8px}.drilldown-panel-head h3{font-size:24px}
@media(max-width:700px){
  .phase-expansion-header{flex-direction:column}
  .phase-expansion-actions{width:100%}.phase-expansion-actions button{flex:1}
  .phase-expansion{padding:15px;overflow:hidden}
  .subperiod-stack{overflow-x:auto;min-width:680px}
  .inline-subperiod-detail{align-items:flex-start;flex-direction:column}
  .overview-anchor-track{min-width:850px}
}


/* v0.12 — Journey hierarchy and Life Map ↔ Ask bridge */

/* Landing chart preview sizing hotfix */
.chart-landing-demo {
  grid-template-columns:minmax(340px,1.2fr) minmax(280px,1fr) !important;
}
.chart-landing-demo .sample-kundli {
  width:min(100%,420px);
  min-width:320px;
  justify-self:center;
  align-self:center;
  flex:none;
}
.chart-landing-demo .feature-copy { min-width:0; }
.sample-chart-callout { overflow-wrap:normal; word-break:normal; }
.sample-chart-callout strong,.sample-chart-callout span { white-space:normal; }

@media(max-width:900px){
  .chart-landing-demo { grid-template-columns:1fr !important; }
  .chart-landing-demo .sample-kundli { min-width:0; width:min(100%,420px); }
}

/* Stronger Mahadasha selection hierarchy */
.overview-anchor.has-selection .overview-phase:not(.selected){
  opacity:.30;
  filter:saturate(.42) brightness(.78);
  transform:scale(.985);
}
.overview-anchor.has-selection .overview-phase.selected{
  opacity:1;
  filter:brightness(1.23) saturate(1.15);
  z-index:3;
}
.phase-link-connector{
  position:relative;
  height:34px;
  margin:-2px 0 -8px;
  pointer-events:none;
}
.phase-link-connector::before{
  content:"";
  position:absolute;
  left:var(--connector-left,50%);
  top:0;
  width:1px;
  height:23px;
  background:linear-gradient(var(--phase-accent,#f2c66d),rgba(242,198,109,.2));
  box-shadow:0 0 10px color-mix(in srgb,var(--phase-accent,#f2c66d) 60%,transparent);
}
.phase-link-connector::after{
  content:"";
  position:absolute;
  left:calc(var(--connector-left,50%) - 5px);
  top:20px;
  width:9px;
  height:9px;
  border-right:2px solid var(--phase-accent,#f2c66d);
  border-bottom:2px solid var(--phase-accent,#f2c66d);
  transform:rotate(45deg);
}
.phase-expansion{
  position:relative;
  border-color:color-mix(in srgb,var(--phase-accent,#f2c66d) 30%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--phase-accent,#f2c66d) 12%,transparent),0 18px 55px rgba(0,0,0,.16);
}
.phase-expansion::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--phase-accent,#f2c66d) 12%,transparent),transparent 42%);
}
.phase-theme-0{--phase-accent:#f08c7e}
.phase-theme-1{--phase-accent:#b96be2}
.phase-theme-2{--phase-accent:#ffca4f}
.phase-theme-3{--phase-accent:#6d78e8}
.phase-theme-4{--phase-accent:#f08c7e}
.phase-theme-5{--phase-accent:#9b6de3}
.phase-theme-6{--phase-accent:#2dd4a5}
.phase-theme-7{--phase-accent:#4c9df0}
.phase-theme-8{--phase-accent:#ffd166}

.phase-level-help{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:13px 0 0;
  padding:10px 12px;
  border:1px solid rgba(126,180,255,.13);
  border-radius:11px;
  background:rgba(5,19,40,.42);
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}
.phase-level-help b{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:0 0 20px;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--gold);
}
.phase-level-label{
  color:var(--gold);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:3px;
}
.subperiod-stack-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding-bottom:3px;
}
.subperiod-stack{
  border:1px solid color-mix(in srgb,var(--phase-accent,#f2c66d) 22%,transparent);
  background:color-mix(in srgb,var(--phase-accent,#f2c66d) 5%,rgba(0,0,0,.1));
}
.subperiod-segment{
  outline:1px solid color-mix(in srgb,var(--phase-accent,#f2c66d) 20%,transparent);
  outline-offset:-1px;
}
.subperiod-segment.selected{
  outline:2px solid var(--phase-accent,#f2c66d);
  outline-offset:-2px;
  box-shadow:inset 0 -4px 0 #fff,0 0 18px color-mix(in srgb,var(--phase-accent,#f2c66d) 38%,transparent);
}

/* Familiar calendar breakdown after selecting a sub-period */
.inline-period-calendar{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.07);
}
.inline-year-selector{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:7px;
}
.inline-year-selector button{
  border:1px solid rgba(126,180,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  padding:6px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.inline-year-selector button.active{
  color:#07172d;
  background:var(--gold);
  border-color:var(--gold);
}
.inline-month-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(52px,1fr));
  gap:5px;
  min-width:760px;
  margin-top:8px;
}
.inline-month-grid button{
  min-height:57px;
  border:1px solid rgba(126,180,255,.11);
  border-radius:9px;
  background:rgba(255,255,255,.018);
  color:var(--text);
  cursor:pointer;
  padding:7px 4px;
}
.inline-month-grid button:hover,.inline-month-grid button.active{
  border-color:var(--gold);
  background:var(--gold-soft);
}
.inline-month-grid small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:4px;
}
.inline-calendar-scroll{overflow-x:auto}
.calendar-help{margin-top:9px;color:var(--muted);font-size:9px;line-height:1.5}

/* Persistent Life Map ↔ Ask context bridge */
.journey-navigator{
  position:sticky;
  top:52px;
  z-index:26;
  margin:0 auto;
  width:min(1050px,calc(100% - 36px));
  min-height:48px;
  padding:7px 9px 7px 13px;
  border:1px solid rgba(242,198,109,.22);
  border-radius:0 0 15px 15px;
  background:rgba(7,25,50,.92);
  backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.journey-navigator.hidden{display:none}
.journey-navigator-context{display:flex;gap:9px;align-items:center;min-width:0}
.journey-navigator-dot{
  width:8px;height:8px;flex:0 0 8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 13px rgba(242,198,109,.8);
}
.journey-navigator-context small{display:block;color:var(--muted);font-size:7px;letter-spacing:.13em}
.journey-navigator-context strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;margin-top:2px}
.journey-navigator-actions{display:flex;gap:6px;flex:0 0 auto}
.journey-navigator-actions button{
  border:1px solid rgba(126,180,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:6px 9px;
  font-size:9px;
  cursor:pointer;
}
.journey-navigator-actions button:last-child{color:var(--gold);border-color:rgba(242,198,109,.2)}
.ask-journey-context{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin:12px 0 8px;
  padding:10px 12px;
  border:1px solid rgba(242,198,109,.2);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(242,198,109,.09),rgba(76,157,240,.06));
}
.ask-journey-context.hidden{display:none}
.ask-journey-context small{display:block;color:var(--gold);font-size:8px;letter-spacing:.12em}
.ask-journey-context strong{display:block;margin-top:3px;font-size:11px}
.ask-journey-context button,.ask-map-shortcut button{font-size:9px}
.ask-map-shortcut{display:flex;justify-content:flex-end;margin-bottom:5px}
.map-return-pulse{animation:mapReturnPulse 1.4s ease}
@keyframes mapReturnPulse{
  0%,100%{box-shadow:0 0 0 rgba(242,198,109,0)}
  40%{box-shadow:0 0 35px rgba(242,198,109,.5)}
}
@media(max-width:700px){
  .journey-navigator{top:0;width:calc(100% - 20px);border-radius:13px;margin-top:6px}
  .journey-navigator-actions button{padding:6px 8px}
  .journey-navigator-context strong{max-width:150px}
  .inline-month-grid{grid-template-columns:repeat(12,58px)}
}


/* v0.12.1 — Experience polish */
.brand-home{
  border:0;background:none;color:inherit;padding:0;cursor:pointer;
  font:inherit;
}
.brand-home:hover .mark{filter:brightness(1.16);text-shadow:0 0 14px rgba(242,198,109,.34)}
.brand-home:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:6px}

/* Truly centered landing canvas */
.landing-hero{
  width:100%!important;
  max-width:none!important;
  align-items:stretch!important;
  padding-left:0!important;
  padding-right:0!important;
}
.landing-hero > .hero-copy,
.landing-hero > .hero-life-map-demo,
.landing-hero > .landing-showcase{
  width:min(1180px,100%);
  margin-left:auto;
  margin-right:auto;
}
.landing-hero > .hero-copy{padding-top:1vh}
.landing-showcase{box-sizing:border-box}
.feature-story,.shared-landing-demo,.chart-landing-demo,.landing-feature-grid,.trust-landing,.landing-final-cta{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:1200px){
  .shell{width:min(1500px,96vw)}
  .landing-hero > .hero-copy,
  .landing-hero > .hero-life-map-demo,
  .landing-hero > .landing-showcase{width:min(1240px,86vw)}
}

/* Menu hierarchy */
.app-nav{gap:7px}
.app-nav button.active{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
  box-shadow:inset 0 -2px 0 var(--gold);
}
.app-nav .nav-secondary{margin-left:8px;color:rgba(158,178,204,.82)}
.app-nav .nav-secondary::before{content:"";display:inline-block;width:1px;height:16px;background:rgba(255,255,255,.10);margin-right:13px;vertical-align:middle}

/* Less intrusive current-context bridge */
.journey-navigator{
  min-height:38px;
  padding:5px 8px 5px 11px;
  width:min(980px,calc(100% - 44px));
  border-radius:0 0 12px 12px;
  background:rgba(7,25,50,.84);
  box-shadow:0 7px 18px rgba(0,0,0,.11);
}
.journey-navigator-dot{width:6px;height:6px;flex-basis:6px;box-shadow:0 0 8px rgba(242,198,109,.62)}
.journey-navigator-context small{font-size:6px}
.journey-navigator-context strong{font-size:9px}
.journey-navigator-actions button{font-size:8px;padding:4px 8px}

/* Generated-answer follow-up actions */
.answer-suggestion-heading{margin-top:24px!important}
.answer-suggestion-list{display:grid;gap:8px;margin:10px 0 0}
.answer-suggestion-button{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(126,180,255,.17);
  border-radius:11px;
  background:rgba(76,157,240,.055);
  color:var(--text);
  padding:11px 13px;
  cursor:pointer;
  transition:.18s ease;
}
.answer-suggestion-button:hover{
  border-color:rgba(242,198,109,.35);
  background:linear-gradient(90deg,rgba(242,198,109,.09),rgba(76,157,240,.07));
  transform:translateX(2px);
}
.answer-suggestion-button span:last-child{color:var(--gold);font-size:14px;flex:0 0 auto}

/* North Indian chart typography */
.kundli-chart svg text{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.kundli-chart .house-number{
  fill:var(--gold);
  font-size:6px;
  font-weight:600;
}
.kundli-chart .chart-planet{
  fill:var(--text);
  font-size:8px;
  font-weight:600;
  dominant-baseline:middle;
}
.kundli-chart .chart-node-halo{transform-box:fill-box;transform-origin:center}
.kundli-chart .chart-node text{dominant-baseline:middle}
.kundli-chart .chart-node.multi .chart-planet{font-size:6.7px}
.kundli-chart .chart-node.ascendant .chart-planet{fill:var(--gold)}

@media(max-width:700px){
  .app-nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .app-nav::-webkit-scrollbar{display:none}
  .app-nav .nav-secondary{margin-left:0}
  .app-nav .nav-secondary::before{display:none}
  .landing-hero > .hero-copy,
  .landing-hero > .hero-life-map-demo,
  .landing-hero > .landing-showcase{width:100%}
}


/* v0.12.2 — Jyotish visual identity */
.brand{gap:10px}
.regional-brand{
  color:#d9e6f4;
  font-size:15px;
  letter-spacing:.03em;
}
.brand-english{letter-spacing:.16em}
.graha-timeline-label,.graha-subperiod-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-wrap:wrap;
  line-height:1.05;
}
.graha-symbol{
  color:var(--gold);
  font-size:1.15em;
  text-shadow:0 0 9px rgba(242,198,109,.28);
}
.graha-primary{font-weight:700}
.graha-sanskrit,.graha-regional{
  display:block;
  width:100%;
  color:rgba(255,255,255,.70);
  font-size:.72em;
  font-weight:500;
  letter-spacing:0;
}
.graha-heading{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}
.graha-heading .graha-symbol{font-size:1.25em}
.graha-heading .graha-sanskrit,.graha-heading .graha-regional{
  display:inline;
  width:auto;
  font-size:.55em;
  color:var(--muted);
}
.graha-dates{
  color:var(--text);
  font-size:.72em;
  font-weight:400;
}
.chart-regional-name{
  color:var(--gold)!important;
  font-size:9px!important;
}
.demo-phase span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.demo-phase span em{
  font-style:normal;
  font-size:9px;
  color:rgba(255,255,255,.72);
  font-weight:500;
}
.demo-graha-symbol{
  color:#fff;
  font-size:19px;
  line-height:1;
}
.demo-phase:hover .demo-graha-symbol,.demo-phase.selected .demo-graha-symbol{
  color:var(--gold);
  text-shadow:0 0 12px rgba(242,198,109,.68);
}

/* Language-aware landing calibration */
.landing-hero > .hero-copy{
  max-width:980px;
}
html[lang="te"] .landing-hero h1,
html[lang="ta"] .landing-hero h1,
html[lang="kn"] .landing-hero h1,
html[lang="ml"] .landing-hero h1,
html[lang="hi"] .landing-hero h1{
  font-size:clamp(40px,5vw,70px);
  line-height:1.12;
  max-width:1050px;
}
html[lang="te"] .landing-hero .subcopy,
html[lang="ta"] .landing-hero .subcopy,
html[lang="kn"] .landing-hero .subcopy,
html[lang="ml"] .landing-hero .subcopy,
html[lang="hi"] .landing-hero .subcopy{
  font-size:18px;
  max-width:920px;
}
.hero-life-map-demo{
  width:min(1080px,100%)!important;
  min-height:210px;
}
.demo-timeline-stage{min-height:155px}

@media(max-width:760px){
  .regional-brand{display:none!important}
  .graha-sanskrit{display:none}
  .graha-regional{font-size:.68em}
  .hero-life-map-demo{min-height:0}
}


/* v0.13 — Life Map First & real application views */
.app-view-hidden{display:none!important}
#workspaceGrid{transition:.2s ease}
body[data-app-view="lifeMap"] #workspaceGrid,
body[data-app-view="ask"] #workspaceGrid,
body[data-app-view="myJourney"] #workspaceGrid{
  grid-template-columns:minmax(0,1fr);
}
body[data-app-view="ask"] #askPanel{width:min(900px,100%);margin:0 auto;min-height:620px}
body[data-app-view="myJourney"] #myJourney{width:min(880px,100%);margin:0 auto}
body[data-app-view="lifeMap"] #birthPanel.life-map-side-panel{width:min(1050px,100%);margin:0 auto}
body[data-app-view="shared"] #sharedJourneys{width:min(1180px,100%);margin:28px auto 70px}
body[data-app-view="shared"] #workspaceGrid{display:none}

.life-map-onboarding-intro{
  text-align:center;
  max-width:620px;
  margin:0 auto 28px;
}
.life-map-onboarding-intro h1{font-size:clamp(34px,6vw,58px);margin:8px 0 12px}
.life-map-onboarding-intro>p:last-of-type{color:var(--muted);line-height:1.7;font-size:15px}
body:not([data-has-life-map="true"]) #birthPanel{
  width:min(720px,100%);
  margin:32px auto 80px;
  padding:clamp(22px,4vw,42px);
}
body:not([data-has-life-map="true"]) #birthPanel .panel-heading-row h2{font-size:24px}
body:not([data-has-life-map="true"]) #chartSummary{display:none}
body:not([data-has-life-map="true"]) #accountButton{opacity:.38;pointer-events:none}
body:not([data-has-life-map="true"]) #savePrompt{display:none!important}

.onboarding-orbit{
  position:relative;
  width:74px;height:74px;margin:0 auto 15px;
  border:1px solid rgba(242,198,109,.24);border-radius:50%;
}
.onboarding-orbit:before{content:"";position:absolute;inset:12px;border:1px solid rgba(126,180,255,.18);border-radius:50%}
.onboarding-orbit span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--gold);font-size:24px}
.onboarding-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;top:4px;left:33px;box-shadow:0 0 11px #fff;animation:onboardingOrbit 7s linear infinite;transform-origin:4px 33px}
.onboarding-orbit b{position:absolute;right:-4px;bottom:11px;color:var(--gold);font-size:16px;font-weight:400}
@keyframes onboardingOrbit{to{transform:rotate(360deg)}}
.onboarding-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.onboarding-steps span{border:1px solid rgba(126,180,255,.14);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:10px}
.onboarding-steps .active{border-color:rgba(242,198,109,.28);color:var(--gold);background:var(--gold-soft)}

#appNav button.locked{opacity:.42;cursor:not-allowed}
#appNav button.locked:after{content:" ·";color:var(--gold)}
.nav-gate-message{
  position:sticky;top:88px;z-index:40;
  width:min(700px,calc(100% - 30px));margin:8px auto 0;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 13px;border:1px solid rgba(242,198,109,.24);
  border-radius:13px;background:rgba(7,25,50,.96);backdrop-filter:blur(16px);
}
.nav-gate-message.hidden{display:none}
.nav-gate-message strong{display:block;color:var(--gold);font-size:11px}
.nav-gate-message span{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.nav-gate-message button{border:0;border-radius:999px;background:var(--gold);color:#07172d;padding:7px 10px;font-weight:700;font-size:9px;white-space:nowrap}

.ask-context-header{display:flex;justify-content:space-between;gap:22px;align-items:flex-start}
.ask-context-select{min-width:210px;margin:0}
.ask-context-select span{font-size:9px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em}
.ask-scope-note{
  margin:12px 0 16px;padding:10px 12px;border-left:2px solid var(--gold);
  background:rgba(242,198,109,.06);color:var(--muted);font-size:10px;line-height:1.5
}

@media(max-width:700px){
  body[data-app-view] .shell{padding-bottom:76px}
  #appNav{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:55;
    justify-content:space-around;gap:0;padding:7px 6px max(7px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(126,180,255,.15);border-bottom:0;
    background:rgba(5,18,38,.96);backdrop-filter:blur(18px);
  }
  #appNav button{font-size:11px;padding:9px 8px;white-space:nowrap}
  #appNav button.active{box-shadow:inset 0 -2px 0 var(--gold)}
  #appNav .nav-secondary{display:none}
  .journey-navigator{top:82px}
  .ask-context-header{display:block}
  .ask-context-select{margin-top:14px;min-width:0}
  body:not([data-has-life-map="true"]) #birthPanel{margin-top:20px;padding:22px 18px}
  .nav-gate-message{top:82px}
}


/* v0.14 — Immersive Life Map & Progressive UI */
.life-map-mobile-toolbar{display:none}
.exploring-label{
  color:var(--gold);font-size:10px;letter-spacing:.03em;
  border:1px solid rgba(242,198,109,.18);background:rgba(242,198,109,.06);
  border-radius:999px;padding:6px 10px
}
.ask-context-actions{display:flex;align-items:center;gap:7px}
.ask-context-actions #clearAskContext{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.10);color:var(--muted)
}
body[data-app-view="ask"] .journey-navigator,
body[data-app-view="myJourney"] .journey-navigator,
body[data-app-view="shared"] .journey-navigator{display:none!important}
body[data-app-view="ask"] .ask-scope-note{margin-top:8px}
body[data-app-view="ask"] .welcome-prompts.has-conversation{display:none!important}

@media(max-width:700px){
  body[data-app-view="lifeMap"] .journey-heading{
    display:block;margin-bottom:8px
  }
  body[data-app-view="lifeMap"] .journey-heading>div:first-child p:last-child{
    font-size:13px;line-height:1.45
  }
  body[data-app-view="lifeMap"] .journey-actions{
    display:flex;gap:8px;margin-top:12px
  }
  body[data-app-view="lifeMap"] .journey-actions button{
    flex:1;padding:10px 9px;font-size:12px
  }
  .life-map-mobile-toolbar{
    display:flex;justify-content:space-between;gap:8px;align-items:center;
    margin:8px 0 10px
  }
  .life-map-mobile-toolbar button{
    padding:8px 10px;font-size:10px;border-radius:999px
  }
  .advanced-map-controls{
    display:none!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .advanced-map-controls.mobile-open{display:grid!important}
  .period-jump-control{margin:0}
  .journey-canvas-controls{
    margin-top:4px
  }
  .journey-path{margin-bottom:4px}
  .canvas-hint{
    font-size:8px;line-height:1.35;margin-top:6px
  }
  .overview-anchor-head{
    margin-bottom:2px
  }
  .overview-anchor-head strong{font-size:15px}
  .overview-anchor-scroll{
    padding-top:22px
  }
  .overview-anchor-track{
    min-width:980px
  }
  .overview-phase{
    min-height:76px!important
  }
  .overview-phase .graha-primary{font-size:11px}
  .overview-phase .graha-regional{font-size:7px}
  .phase-expansion{
    margin-top:12px;padding:13px
  }
  .phase-expansion-header h3{font-size:17px}
  .journey-hero{
    padding:18px 14px!important
  }
  .journey-heading h2{font-size:27px!important}
  .journey-heading .eyebrow{font-size:9px}
  #lifeMapHero{margin-top:4px}

  /* Ask: one context, one prompt, much less chrome */
  body[data-app-view="ask"] #askPanel{
    padding:18px 14px;min-height:auto
  }
  .ask-context-header{display:block}
  .ask-context-header h2{font-size:29px;line-height:1.08;margin-bottom:8px}
  .ask-context-select.hidden{display:none!important}
  .ask-scope-note{
    font-size:9px;padding:8px 10px;margin:6px 0 10px
  }
  .welcome-prompts{
    padding:10px!important;margin:8px 0 12px!important
  }
  .welcome-prompts .welcome-title{
    font-size:14px!important;margin-bottom:8px!important
  }
  .prompt-grid{
    display:flex!important;overflow-x:auto;gap:7px;padding-bottom:3px;
    scrollbar-width:none
  }
  .prompt-grid::-webkit-scrollbar{display:none}
  .prompt-grid button{
    min-width:max-content!important;padding:9px 11px!important;font-size:11px!important
  }
  .ask-journey-context{
    padding:8px 10px;margin:8px 0!important
  }
  .ask-journey-context strong{font-size:9px;line-height:1.35}
  .ask-journey-context button{font-size:8px;padding:5px 7px}
  .composer textarea{
    min-height:132px
  }
  .suggestions{
    display:flex;overflow-x:auto;gap:7px;scrollbar-width:none
  }
  .suggestions::-webkit-scrollbar{display:none}
  .suggestions button{white-space:nowrap;flex:0 0 auto}
  #askButton{
    width:auto;min-width:160px
  }

  /* Cleaner bottom navigation labels */
  #appNav button[data-app-view="myJourney"]{font-size:0}
  #appNav button[data-app-view="myJourney"]::after{content:"Journey";font-size:11px}
  #appNav button[data-app-view="shared"]{font-size:0}
  #appNav button[data-app-view="shared"]::after{content:"Together";font-size:11px}
}


/* v0.15 — Life Map Visual Exploration Lab */
.life-map-visual-lab{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  margin:14px 0 10px;padding:10px 12px;border:1px solid rgba(126,180,255,.12);
  border-radius:14px;background:rgba(7,25,50,.46)
}
.life-map-visual-lab small{display:block;color:var(--gold);font-size:7px;letter-spacing:.13em}
.life-map-visual-lab strong{display:block;margin-top:2px;font-size:11px}
.visual-style-switcher{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.visual-style-switcher button{
  border:1px solid rgba(126,180,255,.14);border-radius:999px;background:transparent;
  color:var(--muted);padding:6px 9px;font-size:8px;cursor:pointer
}
.visual-style-switcher button.active{color:#07172d;background:var(--gold);border-color:var(--gold)}

.life-path-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:30px 0 14px}
.life-path-scroll::-webkit-scrollbar{display:none}
.life-path-stage{position:relative;min-width:1150px;height:190px;padding:18px 28px}
.life-path-periods{position:relative;display:flex;align-items:center;height:140px;z-index:2}
.life-path-period{
  position:relative;border:0;color:#fff;cursor:pointer;transition:.3s ease;
  flex:calc(var(--duration) * 1) 0 82px;min-width:82px;height:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  overflow:hidden
}
.life-path-period .life-path-symbol{font-size:25px;line-height:1;text-shadow:0 0 14px rgba(255,255,255,.34)}
.life-path-period .life-path-name{font-size:11px;font-weight:700}
.life-path-period small{font-size:8px;color:rgba(255,255,255,.76)}
.life-path-period em{font-style:normal;font-size:7px;color:rgba(255,255,255,.60)}
.life-path-period:hover,.life-path-period.selected{filter:brightness(1.18) saturate(1.16);z-index:3}
.life-path-period.active{box-shadow:0 0 28px rgba(255,255,255,.13)}
.life-path-today{top:10px!important;bottom:5px!important;z-index:6}
.life-path-caption{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:8px;letter-spacing:.06em}

/* 1 — Celestial Ribbon */
.visual-ribbon .life-path-periods{align-items:center}
.visual-ribbon .life-path-period{
  height:94px;border-radius:34px 10px 34px 10px;margin:0 -3px;
  clip-path:polygon(0 13%,92% 0,100% 50%,92% 100%,0 87%,8% 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15)
}
.visual-ribbon .life-path-period:nth-child(even){transform:translateY(10px)}
.visual-ribbon .life-path-period.selected{transform:translateY(-8px) scale(1.04)}
.visual-ribbon .life-path-period:nth-child(even).selected{transform:translateY(2px) scale(1.04)}

/* 2 — Planetary Cards */
.visual-cards .life-path-stage{height:220px}
.visual-cards .life-path-periods{gap:10px;height:170px;align-items:center}
.visual-cards .life-path-period{
  min-width:150px;flex:0 0 150px;height:150px;border-radius:20px;
  border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transform:scale(.92);opacity:.82
}
.visual-cards .life-path-period.selected,.visual-cards .life-path-period.active{
  transform:scale(1);opacity:1
}

/* 3 — Orbital Journey */
.visual-orbit .life-path-stage{height:260px}
.visual-orbit .life-path-periods{height:210px;align-items:center;gap:4px}
.visual-orbit .life-path-period{
  flex:0 0 112px;min-width:112px;width:112px;height:112px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  transform:translateY(calc(sin(var(--period-index)) * 1px))
}
.visual-orbit .life-path-period:nth-child(3n+1){transform:translateY(-35px)}
.visual-orbit .life-path-period:nth-child(3n+2){transform:translateY(18px)}
.visual-orbit .life-path-period:nth-child(3n){transform:translateY(-8px)}
.visual-orbit .life-path-period:after{
  content:"";position:absolute;inset:-12px;border:1px solid currentColor;border-radius:50%;opacity:.13
}
.visual-orbit .life-path-period.selected{transform:scale(1.12)!important;box-shadow:0 0 34px rgba(255,255,255,.18)}

/* 4 — Constellation Path */
.visual-constellation .life-path-stage{height:250px}
.visual-constellation .life-path-periods{gap:28px;height:210px}
.visual-constellation .life-path-period{
  flex:0 0 90px;min-width:90px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.02) 55%,transparent 56%)!important;
  border:1px solid rgba(255,255,255,.16);overflow:visible
}
.visual-constellation .life-path-period:nth-child(odd){transform:translateY(-40px)}
.visual-constellation .life-path-period:nth-child(even){transform:translateY(32px)}
.visual-constellation .life-path-period.selected{box-shadow:0 0 0 7px rgba(242,198,109,.08),0 0 28px rgba(242,198,109,.3)}
.visual-constellation .constellation-lines{position:absolute;inset:0;pointer-events:none}
.visual-constellation .constellation-lines:before{
  content:"";position:absolute;left:5%;right:5%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,180,255,.3),transparent);
  transform:rotate(-2deg)
}

/* 5 — Enhanced Timeline */
.visual-timeline .life-path-stage{height:175px}
.visual-timeline .life-path-periods{height:125px;gap:2px}
.visual-timeline .life-path-period{
  height:100px;border-radius:12px;min-width:100px;
  border-bottom:4px solid rgba(255,255,255,.35)
}
.visual-timeline .life-path-period.selected{transform:translateY(-7px);box-shadow:0 12px 28px rgba(0,0,0,.25)}

/* Keep all periods colorful: fade only when a selection is deliberately active */
.overview-anchor:not(.has-selection) .life-path-period{opacity:1!important;filter:none!important}
.overview-anchor.has-selection .life-path-period:not(.selected){opacity:.58;filter:saturate(.72) brightness(.86)}
.overview-anchor.has-selection .life-path-period.active:not(.selected){opacity:.78}
.life-path-period.selected{opacity:1!important}

.save-prompt.save-prompt-compact{
  width:auto!important;left:auto!important;right:14px!important;bottom:14px!important;
  max-width:310px!important;padding:9px 10px!important;border-radius:999px!important;
  display:flex!important;gap:8px!important
}
.save-prompt.save-prompt-compact>div span{display:none}
.save-prompt.save-prompt-compact>div strong{font-size:10px}
.save-prompt.save-prompt-compact .save-prompt-close{display:none}
.save-prompt.save-prompt-compact .primary{padding:6px 9px;font-size:8px;border-radius:999px}

@media(max-width:700px){
  .life-map-visual-lab{display:block;padding:9px 10px}
  .visual-style-switcher{margin-top:8px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .visual-style-switcher::-webkit-scrollbar{display:none}
  .visual-style-switcher button{white-space:nowrap;flex:0 0 auto}
  .life-path-stage{min-width:980px;padding-left:34px;padding-right:34px}
  .visual-cards .life-path-stage{min-width:1250px}
  .visual-orbit .life-path-stage{min-width:1180px}
  .visual-constellation .life-path-stage{min-width:1250px}
  .life-path-period{min-width:100px}
  .life-path-caption span:nth-child(2){display:none}
}

/* v0.16 — Unified Perspective Life Path */
.life-map-visual-lab{display:none!important}
.journey-navigator{display:none!important}
.journey-hero{padding-top:18px!important}
.journey-heading{margin-bottom:8px!important}
.journey-heading>div:first-child p:last-child{max-width:720px}
.perspective-life-path{position:relative;margin-top:2px}
.perspective-map-topline{display:flex;justify-content:space-between;align-items:center;min-height:30px;margin-bottom:2px}
.perspective-map-topline>small{color:var(--gold);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.return-today-inline{border:1px solid rgba(242,198,109,.25);background:rgba(242,198,109,.07);color:var(--gold);border-radius:999px;padding:6px 10px;font-size:9px;cursor:pointer}
.perspective-scroll{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;padding:16px 0 20px;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.perspective-scroll::-webkit-scrollbar{display:none}
.perspective-stage{min-width:max(100%,1450px);height:215px;display:flex;align-items:center;padding:0 42vw}
.perspective-track{display:flex;align-items:center;gap:2px;width:max-content}
.perspective-period{position:relative;flex:0 0 158px;width:158px;height:142px;border:1px solid rgba(255,255,255,.12);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .35s ease,filter .35s ease,box-shadow .35s ease;transform-origin:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(0,0,0,.15);overflow:hidden}
.perspective-period:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.22),transparent 46%);pointer-events:none}
.perspective-period.depth-0{transform:scale(1);opacity:1;filter:saturate(1.12) brightness(1.08);z-index:5;box-shadow:0 0 0 2px rgba(255,255,255,.22),0 18px 48px rgba(0,0,0,.32),0 0 34px rgba(126,180,255,.18)}
.perspective-period.depth-1{transform:scale(.84);opacity:.88;filter:saturate(.92);z-index:4;margin:0 -10px}
.perspective-period.depth-2{transform:scale(.70);opacity:.72;filter:saturate(.76);z-index:3;margin:0 -22px}
.perspective-period.depth-3{transform:scale(.59);opacity:.56;filter:saturate(.60);z-index:2;margin:0 -31px}
.perspective-period.depth-4{transform:scale(.50);opacity:.40;filter:saturate(.48);z-index:1;margin:0 -38px}
.perspective-period:hover{filter:saturate(1.12) brightness(1.09)}
.perspective-period.selected{border-color:rgba(255,255,255,.50)}
.perspective-period.active:not(.selected){box-shadow:0 0 0 2px rgba(242,198,109,.40),0 0 22px rgba(242,198,109,.24)}
.period-today-badge{position:absolute;top:9px;color:inherit;font-size:7px;font-weight:800;letter-spacing:.10em;opacity:.9}
.perspective-symbol{font-size:30px;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.20)}
.perspective-period strong{font-size:14px}
.perspective-period small{max-width:130px;font-size:8px;text-align:center;opacity:.78}
.perspective-period em{font-size:8px;font-style:normal;opacity:.68}
.selected-period-caption{min-height:52px;display:flex;justify-content:center;align-items:baseline;gap:8px;flex-wrap:wrap;text-align:center;margin-top:-2px}
.selected-period-caption>span{color:var(--gold);font-size:8px;letter-spacing:.14em}
.selected-period-caption>strong{font-size:13px}
.selected-period-caption>small{color:var(--muted);font-size:9px}

.perspective-period.dasha-0,.subperiod-segment.dasha-0{background:#49556b!important;color:#f7f9fc!important}
.perspective-period.dasha-1,.subperiod-segment.dasha-1{background:#9a5bca!important;color:#fff!important}
.perspective-period.dasha-2,.subperiod-segment.dasha-2{background:#f3c44f!important;color:#102039!important}
.perspective-period.dasha-3,.subperiod-segment.dasha-3{background:#7668d8!important;color:#fff!important}
.perspective-period.dasha-4,.subperiod-segment.dasha-4{background:#df6f63!important;color:#fff!important}
.perspective-period.dasha-5,.subperiod-segment.dasha-5{background:#7951aa!important;color:#fff!important}
.perspective-period.dasha-6,.subperiod-segment.dasha-6{background:#55bf8f!important;color:#09263a!important}
.perspective-period.dasha-7,.subperiod-segment.dasha-7{background:#4c82bd!important;color:#fff!important}
.perspective-period.dasha-8,.subperiod-segment.dasha-8{background:#e8ab42!important;color:#142238!important}
.perspective-period[data-tone="light"] .perspective-symbol{text-shadow:none}
.subperiod-segment{color:inherit!important}
.subperiod-segment .graha-regional,.subperiod-segment small{color:currentColor!important;opacity:.72}
.phase-link-connector{--connector-left:50%!important}
.phase-expansion{margin-top:4px!important}
.phase-expansion-header{position:relative;z-index:2}
.canvas-minimap{display:none!important}
.life-map-mobile-toolbar{margin-top:2px!important}
.climate-legend{opacity:.72;margin-top:8px!important}
body[data-app-view="lifeMap"] #floatingAskButton{display:none!important}

@media(max-width:700px){
  .topbar{min-height:50px;padding:9px 14px!important;align-items:center!important}
  .topbar-actions{display:none!important}
  .brand{font-size:11px}
  .brand .mark{font-size:17px}
  .journey-hero{padding:8px 10px 72px!important;border-radius:0!important}
  .journey-heading{display:none!important}
  .journey-canvas-controls{margin:0!important}
  .journey-path,.canvas-hint{display:none!important}
  .life-map-mobile-toolbar{justify-content:flex-end!important;margin:0 0 2px!important;min-height:32px}
  .life-map-mobile-toolbar .exploring-label{margin-right:auto}
  .life-map-mobile-toolbar button{width:34px;height:34px;overflow:hidden;font-size:0!important;padding:0!important;border-radius:50%!important}
  .life-map-mobile-toolbar button:before{content:"⋯";font-size:20px}
  .perspective-map-topline{padding:0 4px}
  .perspective-scroll{padding:4px 0 12px;margin:0 -10px;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .perspective-stage{min-width:1220px;height:190px;padding:0 calc(50vw - 78px)}
  .perspective-period{flex-basis:156px;width:156px;height:140px}
  .perspective-period.depth-1{transform:scale(.80);margin:0 -16px}
  .perspective-period.depth-2{transform:scale(.65);margin:0 -32px}
  .perspective-period.depth-3{transform:scale(.53);margin:0 -43px}
  .perspective-period.depth-4{transform:scale(.44);margin:0 -51px}
  .perspective-symbol{font-size:28px}
  .perspective-period strong{font-size:13px}
  .selected-period-caption{min-height:44px;margin-top:-8px}
  .phase-expansion{margin-top:0!important;padding:12px!important;border-radius:16px!important}
  .phase-expansion-header{display:block!important}
  .phase-expansion-actions{margin-top:10px}
  .phase-level-help{display:none!important}
  .subperiod-stack-wrap{margin-top:4px}
  .subperiod-stack{min-width:760px!important;min-height:82px!important}
  .climate-legend{display:none!important}
}


/* v0.17 — Life Map interaction & drill-down polish */
.layers-button,.layers-popover,.time-axis-labels{display:none!important}

.advanced-map-controls{
  grid-template-columns:minmax(220px,1fr) minmax(220px,.8fr)!important;
}
.canvas-hint{
  justify-content:flex-end!important;
  min-height:24px;
}
.canvas-hint .desktop-hint,.canvas-hint .mobile-hint{display:none!important}

/* Antardasha row is its own horizontal exploration surface */
.subperiod-stack-wrap{
  overflow-x:auto!important;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:4px;
}
.subperiod-stack-wrap::-webkit-scrollbar{display:none}
.subperiod-stack{
  min-width:980px;
}

/* Once a subperiod is selected, compress the parent chapter controls */
.phase-expansion.has-subperiod-focus .phase-expansion-header{
  padding-bottom:8px;
  margin-bottom:8px;
}
.phase-expansion.has-subperiod-focus .phase-expansion-header>div:first-child p{
  margin-bottom:0;
}
.phase-expansion.has-subperiod-focus .phase-expansion-actions{
  transform:scale(.88);
  transform-origin:right center;
  opacity:.82;
}
.phase-expansion.has-subperiod-focus .phase-level-label{
  margin-top:8px!important;
}
.phase-expansion.has-subperiod-focus .subperiod-stack-wrap{
  border-radius:14px;
}
.inline-subperiod-detail{
  margin-top:12px!important;
  border-color:rgba(242,198,109,.2)!important;
}
.inline-subperiod-summary{
  align-items:flex-start!important;
}
.inline-subperiod-summary small{
  color:var(--gold)!important;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Exact selected subperiod gets unmistakable focus */
.subperiod-segment.selected{
  position:relative;
  z-index:3;
  transform:translateY(-4px);
  box-shadow:0 0 0 2px rgba(255,255,255,.34),0 10px 24px rgba(0,0,0,.26);
  filter:saturate(1.08) brightness(1.06);
}
.subperiod-segment:not(.selected){
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;
}
.phase-expansion.has-subperiod-focus .subperiod-segment:not(.selected){
  opacity:.72;
  filter:saturate(.78);
}

/* Cleaner compact mobile drill-down */
@media(max-width:700px){
  .advanced-map-controls{
    grid-template-columns:1fr!important;
  }
  .canvas-hint{
    display:none!important;
  }
  .subperiod-stack{
    min-width:820px!important;
  }
  .phase-expansion.has-subperiod-focus .phase-expansion-header{
    display:flex!important;
    align-items:flex-start;
    gap:8px;
  }
  .phase-expansion.has-subperiod-focus .phase-expansion-header h3{
    font-size:18px!important;
  }
  .phase-expansion.has-subperiod-focus .phase-expansion-actions{
    display:none!important;
  }
  .phase-expansion.has-subperiod-focus .phase-level-label{
    margin-top:6px!important;
  }
  .inline-subperiod-detail{
    margin-top:10px!important;
    padding:12px!important;
  }
  .inline-subperiod-summary{
    display:block!important;
  }
  .inline-subperiod-summary>div:last-child{
    display:flex;
    gap:8px;
    margin-top:10px;
  }
  .inline-period-calendar{
    margin-top:10px!important;
  }
}


/* v0.18 — Carousel, month-strip, and North chart polish */
.map-depth-controls{
  grid-template-columns:minmax(220px,420px)!important;
  justify-content:flex-end;
}
.period-jump-control{display:none!important}

/* Main Life Map behaves like a true cover-flow carousel */
.perspective-scroll{
  cursor:grab;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}
.perspective-scroll.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto!important;
  user-select:none;
}
.perspective-period{
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.perspective-period.depth-0{
  transform:scale(1.06);
}
.perspective-period.depth-1{
  transform:scale(.86) perspective(700px) rotateY(4deg);
}
.perspective-period.depth-2{
  transform:scale(.70) perspective(700px) rotateY(7deg);
}
.perspective-period.depth-3{
  transform:scale(.58) perspective(700px) rotateY(10deg);
}
.perspective-period.depth-4{
  transform:scale(.48) perspective(700px) rotateY(12deg);
}
.perspective-period:nth-child(n).depth-1:has(~ .selected),
.perspective-period:nth-child(n).depth-2:has(~ .selected),
.perspective-period:nth-child(n).depth-3:has(~ .selected),
.perspective-period:nth-child(n).depth-4:has(~ .selected){
  rotate:0deg;
}

/* Sub-periods now snap and select through swipe as well */
.subperiod-stack-wrap{
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
.subperiod-segment{
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

/* Month level is a real horizontal carousel instead of a clipped grid */
.inline-calendar-scroll{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:8px 38%;
  margin:0 -8px;
}
.inline-calendar-scroll::-webkit-scrollbar{display:none}
.inline-month-grid{
  display:flex!important;
  width:max-content!important;
  min-width:0!important;
  gap:8px!important;
  margin-top:0!important;
}
.inline-month-grid button{
  flex:0 0 92px!important;
  width:92px!important;
  min-height:68px!important;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease;
}
.inline-month-grid button.active{
  transform:scale(1.06);
  border-color:var(--gold)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
}
.inline-year-selector{
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
}
.inline-year-selector::-webkit-scrollbar{display:none}

/* North Indian chart: each planet owns a slot instead of sharing one text line */
.north-planet-label{
  pointer-events:none;
}
.north-planet-symbol{
  fill:var(--text);
  font-size:5.8px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
}
.north-planet-short{
  fill:var(--text);
  font-size:4.1px;
  font-family:Inter,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.2px;
}
.north-planet-label.compact .north-planet-symbol{font-size:5px}
.north-planet-label.compact .north-planet-short{font-size:3.6px}
.north-planet-label.dense .north-planet-symbol{font-size:4.4px}
.north-planet-label.dense .north-planet-short{font-size:3.1px}
.north-planet-overflow{
  fill:var(--gold);
  font-size:3.3px;
  font-weight:700;
}
.kundli-chart .chart-node:hover .north-planet-symbol,
.kundli-chart .chart-node:hover .north-planet-short,
.kundli-chart .chart-node:focus .north-planet-symbol,
.kundli-chart .chart-node:focus .north-planet-short{
  fill:var(--gold);
}

/* Make the chart house number quieter than the planet labels */
.kundli-chart .house-number{
  font-size:4.6px!important;
  opacity:.9;
}

@media(max-width:700px){
  .map-depth-controls{
    grid-template-columns:1fr!important;
  }
  .inline-calendar-scroll{
    padding-left:calc(50vw - 56px);
    padding-right:calc(50vw - 56px);
    margin-left:-12px;
    margin-right:-12px;
  }
  .inline-month-grid button{
    flex-basis:104px!important;
    width:104px!important;
  }
  .north-planet-symbol{font-size:5.4px}
  .north-planet-short{font-size:3.8px}
  .north-planet-label.compact .north-planet-symbol{font-size:4.8px}
  .north-planet-label.compact .north-planet-short{font-size:3.3px}
  .north-planet-label.dense .north-planet-symbol{font-size:4.1px}
  .north-planet-label.dense .north-planet-short{font-size:2.9px}
}


/* v0.19 — interaction stabilization + bounded North Indian chart geometry */

/* Programmatic centering should feel deliberate, never like a second user gesture. */
.perspective-scroll,
.subperiod-stack-wrap,
.inline-calendar-scroll{
  scroll-behavior:smooth;
}
.perspective-scroll.is-dragging{
  scroll-snap-type:none!important;
}

/* North Indian chart: labels live inside explicit safe boxes for each house. */
.north-house-hitbox{
  fill:transparent;
  stroke:transparent;
  pointer-events:all;
}
.north-house-planet-text{
  fill:var(--text);
  dominant-baseline:middle;
  font-family:Inter,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.15px;
  pointer-events:none;
}
.north-house-symbol{
  font-family:Georgia,"Times New Roman",serif;
  font-size:5.2px;
  font-weight:600;
}
.north-house-short{
  font-size:4.2px;
  font-weight:800;
}
.north-house-planet.compact .north-house-symbol{font-size:4.5px}
.north-house-planet.compact .north-house-short{font-size:3.6px}
.north-house-planet.dense .north-house-symbol{font-size:4px}
.north-house-planet.dense .north-house-short{font-size:3.1px}
.north-house-overflow{
  fill:var(--gold);
  font-size:3.1px;
  font-weight:800;
}
.north-house-node:hover .north-house-planet-text,
.north-house-node:focus .north-house-planet-text,
.north-house-node.chart-cell-active .north-house-planet-text{
  fill:var(--gold);
}
.kundli-chart .house-number{
  font-size:4.2px!important;
  font-weight:700;
  opacity:.78;
}

/* Keep chart labels readable on narrow mobile widths without crossing houses. */
@media(max-width:700px){
  .north-house-symbol{font-size:4.8px}
  .north-house-short{font-size:3.8px}
  .north-house-planet.compact .north-house-symbol{font-size:4.2px}
  .north-house-planet.compact .north-house-short{font-size:3.3px}
  .north-house-planet.dense .north-house-symbol{font-size:3.7px}
  .north-house-planet.dense .north-house-short{font-size:2.9px}
  .kundli-chart .house-number{font-size:4px!important}
}


/* v0.20 — deterministic index-driven journey navigation */

/* One interaction model for Mahadasha, Antardasha, and month navigation. */
.deterministic-carousel{
  position:relative;
  overflow:hidden!important;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  overscroll-behavior:contain;
}
.deterministic-carousel.is-dragging{cursor:grabbing}
.deterministic-track{
  display:flex!important;
  width:max-content!important;
  min-width:0!important;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* Main Life Map: visual position comes only from selected index. */
.perspective-carousel{
  height:220px;
  margin:0 -8px;
}
.perspective-carousel .perspective-track{
  height:100%;
  align-items:center;
  gap:2px;
  padding:0;
}
.perspective-period{
  flex:0 0 158px!important;
  width:158px!important;
  margin:0!important;
  scroll-snap-align:unset!important;
  scroll-snap-stop:normal!important;
}
.perspective-period.depth-0{
  transform:scale(1.06)!important;
  opacity:1!important;
  filter:saturate(1.12) brightness(1.08)!important;
}
.perspective-period.depth-1{
  transform:scale(.84)!important;
  opacity:.88!important;
  filter:saturate(.92)!important;
}
.perspective-period.depth-2{
  transform:scale(.68)!important;
  opacity:.70!important;
  filter:saturate(.76)!important;
}
.perspective-period.depth-3{
  transform:scale(.56)!important;
  opacity:.54!important;
  filter:saturate(.60)!important;
}
.perspective-period.depth-4{
  transform:scale(.46)!important;
  opacity:.38!important;
  filter:saturate(.48)!important;
}

/* Antardasha: stable equal navigation targets; one swipe advances one item. */
.subperiod-stack-wrap.deterministic-carousel{
  min-height:92px;
  padding:8px 0!important;
  overflow:hidden!important;
}
.subperiod-stack.deterministic-track{
  min-width:0!important;
  min-height:78px!important;
  margin:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  gap:7px;
  align-items:center;
}
.subperiod-segment{
  flex:0 0 118px!important;
  width:118px!important;
  min-height:72px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  scroll-snap-align:unset!important;
  scroll-snap-stop:normal!important;
}
.subperiod-segment.selected{
  transform:scale(1.06)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.26)!important;
}
.phase-expansion.has-subperiod-focus .subperiod-segment:not(.selected){
  opacity:.70!important;
  filter:saturate(.78)!important;
}

/* Month navigation: no native scrolling; selected month is always the logical center. */
.inline-calendar-scroll.deterministic-carousel{
  min-height:86px;
  padding:8px 0!important;
  margin:0!important;
  overflow:hidden!important;
}
.inline-month-grid.deterministic-track{
  display:flex!important;
  min-width:0!important;
  width:max-content!important;
  gap:9px!important;
  margin:0!important;
}
.inline-month-grid button{
  flex:0 0 104px!important;
  width:104px!important;
  min-height:68px!important;
  scroll-snap-align:unset!important;
  scroll-snap-stop:normal!important;
}
.inline-month-grid button.active{
  transform:scale(1.07)!important;
}

/* North Indian chart: compact, intentionally composed planet clusters. */
.north-cluster-halo{
  fill:rgba(61,130,206,.08);
  stroke:rgba(126,180,255,.08);
  stroke-width:.4;
  pointer-events:all;
}
.north-cluster-label{
  fill:var(--text);
  font-family:Inter,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.12px;
  pointer-events:none;
}
.north-cluster-symbol{
  font-family:Georgia,"Times New Roman",serif;
  font-size:5.8px;
  font-weight:600;
}
.north-cluster-short{
  font-size:4.4px;
  font-weight:800;
}
.north-cluster-item.compact .north-cluster-symbol{font-size:5.1px}
.north-cluster-item.compact .north-cluster-short{font-size:3.9px}
.north-cluster-item.dense .north-cluster-symbol{font-size:4.5px}
.north-cluster-item.dense .north-cluster-short{font-size:3.4px}
.north-cluster-overflow{
  fill:var(--gold);
  font-size:3.2px;
  font-weight:800;
}
.north-house-node:hover .north-cluster-label,
.north-house-node:focus .north-cluster-label{
  fill:var(--gold);
}
.kundli-chart .house-number{
  font-size:3.9px!important;
  opacity:.68!important;
  font-weight:700!important;
}

/* Neutralize legacy native-scroll rules from earlier experiments. */
.perspective-scroll,
.subperiod-stack-wrap,
.inline-calendar-scroll{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
}
.perspective-scroll{display:none!important}

@media(max-width:700px){
  .perspective-carousel{
    height:205px;
    margin:0 -10px;
  }
  .perspective-period{
    flex-basis:154px!important;
    width:154px!important;
  }
  .subperiod-stack-wrap.deterministic-carousel{min-height:88px}
  .subperiod-segment{
    flex-basis:112px!important;
    width:112px!important;
  }
  .inline-month-grid button{
    flex-basis:108px!important;
    width:108px!important;
  }
  .north-cluster-symbol{font-size:5.4px}
  .north-cluster-short{font-size:4.1px}
  .north-cluster-item.compact .north-cluster-symbol{font-size:4.8px}
  .north-cluster-item.compact .north-cluster-short{font-size:3.7px}
  .north-cluster-item.dense .north-cluster-symbol{font-size:4.2px}
  .north-cluster-item.dense .north-cluster-short{font-size:3.2px}
  .kundli-chart .house-number{font-size:3.7px!important}
}


/* v0.21 — interaction stabilization and partial-period month rendering */

/* Short Antardasha collections should look intentional, not like a truncated long strip. */
.subperiod-stack-wrap.short-carousel{
  max-width:430px;
  margin-left:auto;
  margin-right:auto;
}
.subperiod-stack-wrap.short-carousel .subperiod-stack{
  gap:12px!important;
}
.subperiod-stack-wrap.short-carousel .subperiod-segment{
  flex-basis:132px!important;
  width:132px!important;
}

/* Partial-year periods render only their valid months and stay visible on first paint. */
.inline-calendar-scroll.deterministic-carousel{
  min-height:92px!important;
  contain:layout paint;
}
.inline-calendar-scroll.short-carousel{
  max-width:360px;
  margin-left:auto!important;
  margin-right:auto!important;
}
.inline-month-grid.deterministic-track{
  align-items:center;
  min-height:80px;
}
.inline-month-grid button{
  opacity:.78;
}
.inline-month-grid button.active{
  opacity:1;
  z-index:2;
}

/* During horizontal journey gestures, preserve vertical page scrolling until intent is clear. */
.deterministic-carousel{
  touch-action:pan-y pinch-zoom!important;
}
.deterministic-carousel.is-dragging{
  cursor:grabbing;
}

/* Chart polish: only occupied houses get a grouping halo. */
.north-cluster-halo{
  fill:rgba(61,130,206,.055)!important;
  stroke:rgba(126,180,255,.06)!important;
}
.north-cluster-label{
  paint-order:stroke;
  stroke:rgba(5,21,43,.18);
  stroke-width:.2px;
}
.north-cluster-symbol{
  opacity:.96;
}
.north-cluster-short{
  opacity:.98;
}
.kundli-chart .house-number{
  fill:var(--gold)!important;
  opacity:.64!important;
}

@media(max-width:700px){
  .subperiod-stack-wrap.short-carousel{
    max-width:100%;
  }
  .subperiod-stack-wrap.short-carousel .subperiod-segment{
    flex-basis:126px!important;
    width:126px!important;
  }
  .inline-calendar-scroll.short-carousel{
    max-width:100%;
  }
}


/* v0.22 — native timeline UX simplification */

/* Primary navigation lives at the top on every screen. */
.topbar{
  position:sticky!important;
  top:0;
  z-index:80!important;
  min-height:54px;
  background:rgba(5,20,42,.94)!important;
  backdrop-filter:blur(18px);
}
.app-nav{
  position:sticky!important;
  top:54px!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:75!important;
  width:100%!important;
  max-width:none!important;
  min-height:42px!important;
  margin:0!important;
  padding:5px max(12px,calc((100vw - 1180px)/2))!important;
  display:flex!important;
  justify-content:flex-start!important;
  gap:5px!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  background:rgba(6,23,47,.94)!important;
  backdrop-filter:blur(18px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.app-nav.hidden{display:none!important}
.app-nav::-webkit-scrollbar{display:none}
.app-nav button{
  flex:0 0 auto!important;
  min-width:auto!important;
  padding:8px 13px!important;
  white-space:nowrap;
  border-radius:999px!important;
}
.app-nav .nav-history-hidden{display:none!important}

/* Header keeps language visible; save is compact and non-blocking. */
.topbar-actions{display:flex!important;align-items:center!important;gap:8px!important}
.topbar-actions .privacy-pill{display:none!important}
.language-control{
  display:flex!important;
  align-items:center;
  gap:5px;
}
.language-control>span{display:none!important}
.language-control select{
  max-width:112px;
  min-height:32px;
  padding:5px 25px 5px 9px!important;
  border-radius:999px!important;
}
.account-button{
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:10px!important;
  white-space:nowrap;
}
.save-prompt{display:none!important}

/* Life Map is a visual workspace. Old overflow/zoom chrome is removed. */
body[data-app-view="lifeMap"] .life-map-mobile-toolbar,
body[data-app-view="lifeMap"] .advanced-map-controls,
body[data-app-view="lifeMap"] .canvas-hint,
body[data-app-view="lifeMap"] .journey-path,
body[data-app-view="lifeMap"] .climate-legend{
  display:none!important;
}
body[data-app-view="lifeMap"] .journey-hero{
  padding-top:12px!important;
}
body[data-app-view="lifeMap"] .journey-canvas-controls{
  display:none!important;
}

/* Native whole-life timeline: browser scrolling, explicit tap selection. */
.native-life-path{margin-top:2px}
.native-timeline-scroll,
.native-subperiod-scroll,
.native-month-scroll,
.native-chip-scroll{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.native-timeline-scroll::-webkit-scrollbar,
.native-subperiod-scroll::-webkit-scrollbar,
.native-month-scroll::-webkit-scrollbar,
.native-chip-scroll::-webkit-scrollbar{display:none}

.native-timeline-scroll{
  margin:0 -8px;
  padding:15px 8px 20px;
}
.native-timeline-track{
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  min-width:100%;
}
.native-period{
  position:relative;
  flex:0 0 var(--native-width);
  width:var(--native-width);
  min-height:112px;
  padding:18px 10px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#fff;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.native-period.selected{
  transform:scale(1.07);
  z-index:3;
  filter:saturate(1.1) brightness(1.06);
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 10px 30px rgba(0,0,0,.28);
}
.native-period:not(.selected){opacity:.82}
.native-period.active:not(.selected){
  box-shadow:inset 0 0 0 2px rgba(242,198,109,.38);
  opacity:.95;
}
.native-period-symbol{font-size:25px;line-height:1}
.native-period strong{font-size:12px}
.native-period small{font-size:8px;opacity:.78;text-align:center}
.native-period em{font-size:8px;font-style:normal;opacity:.68}

/* Reuse the established Graha color identity with reliable foreground contrast. */
.native-period.dasha-0,.native-subperiod.dasha-0{background:#49556b!important;color:#f7f9fc!important}
.native-period.dasha-1,.native-subperiod.dasha-1{background:#9a5bca!important;color:#fff!important}
.native-period.dasha-2,.native-subperiod.dasha-2{background:#f3c44f!important;color:#102039!important}
.native-period.dasha-3,.native-subperiod.dasha-3{background:#7668d8!important;color:#fff!important}
.native-period.dasha-4,.native-subperiod.dasha-4{background:#df6f63!important;color:#fff!important}
.native-period.dasha-5,.native-subperiod.dasha-5{background:#7951aa!important;color:#fff!important}
.native-period.dasha-6,.native-subperiod.dasha-6{background:#55bf8f!important;color:#09263a!important}
.native-period.dasha-7,.native-subperiod.dasha-7{background:#4c82bd!important;color:#fff!important}
.native-period.dasha-8,.native-subperiod.dasha-8{background:#e8ab42!important;color:#142238!important}

/* Native Antardasha bar begins at its real start and never auto-centers. */
.native-subperiod-scroll{
  margin:4px -5px 0;
  padding:10px 5px 16px;
}
.native-subperiod-track{
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  min-width:100%;
}
.native-subperiod{
  flex:0 0 var(--sub-width);
  width:var(--sub-width);
  min-height:70px;
  padding:9px 7px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.native-subperiod.selected{
  transform:scale(1.06);
  z-index:2;
  filter:saturate(1.1) brightness(1.06);
  box-shadow:0 0 0 2px rgba(255,255,255,.32),0 8px 20px rgba(0,0,0,.24);
}
.native-subperiod:not(.selected){opacity:.78}

/* Native years and months: simple, tactile, and predictable. */
.native-chip-scroll{
  display:flex!important;
  gap:7px!important;
  padding:5px 1px 8px;
}
.native-chip-scroll button{flex:0 0 auto}
.native-month-scroll{
  margin:0 -5px;
  padding:8px 5px 12px;
}
.native-month-track{
  display:flex;
  gap:8px;
  width:max-content;
  min-width:100%;
}
.native-month-track button{
  flex:0 0 92px;
  min-height:64px;
  padding:8px 5px;
  border:1px solid rgba(126,180,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:var(--text);
}
.native-month-track button.active{
  transform:scale(1.06);
  border-color:var(--gold);
  background:var(--gold-soft);
  box-shadow:0 7px 18px rgba(0,0,0,.20);
}
.native-month-track small{display:block;margin-top:4px;color:var(--muted);font-size:8px}

/* One contextual Ask entry point for the entire selected map context. */
.map-explore-context{
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(242,198,109,.16);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(12,40,76,.72),rgba(7,24,48,.82));
}
.map-explore-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.map-explore-heading h3{margin:3px 0 0;font-size:18px}
.map-question-chips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:13px;
}
.map-question-chips button{
  min-height:48px;
  padding:9px 10px;
  border:1px solid rgba(126,180,255,.13);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  text-align:left;
  line-height:1.35;
}
.map-ask-own{
  width:100%;
  margin-top:9px;
  padding:10px;
  border:1px solid rgba(242,198,109,.20);
  border-radius:11px;
  background:rgba(242,198,109,.06);
  color:var(--gold);
}

/* Charts are a dedicated destination, not part of Life Map. */
body[data-app-view="charts"] #birthPanel{
  width:min(980px,100%)!important;
  max-width:980px!important;
  margin:0 auto!important;
}
body[data-app-view="charts"] #lifeMapSection{display:none!important}
body[data-app-view="charts"][data-has-life-map="true"] #birthForm{display:none!important}
body[data-app-view="charts"] #kundliSection,
body[data-app-view="charts"] #planetaryDetails,
body[data-app-view="charts"] #calculationDetails{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

/* The previous deterministic carousel machinery is no longer part of the visible map. */
.deterministic-carousel,
.perspective-carousel{}

/* Mobile: same architecture, compact header, top navigation, full content area. */
@media(max-width:700px){
  .topbar{
    min-height:50px!important;
    padding:7px 10px!important;
  }
  .brand{min-width:0}
  .brand .mark{font-size:15px!important}
  .brand-english{font-size:8px!important}
  .regional-brand{font-size:8px!important}
  .topbar-actions{
    display:flex!important;
    margin-left:auto;
    gap:5px!important;
  }
  .language-control select{
    width:74px;
    max-width:74px;
    font-size:9px;
    min-height:30px;
  }
  .account-button{
    font-size:9px!important;
    padding:6px 8px!important;
  }
  .app-nav{
    top:50px!important;
    padding:4px 8px!important;
    min-height:40px!important;
  }
  .app-nav button{
    padding:7px 11px!important;
    font-size:10px!important;
  }
  body[data-app-view="lifeMap"] .journey-hero{
    padding:8px 10px 28px!important;
  }
  .native-timeline-scroll{
    padding-top:11px;
    margin:0 -10px;
    padding-left:10px;
    padding-right:10px;
  }
  .native-period{
    min-height:105px;
  }
  .native-subperiod-scroll{
    margin-left:-10px;
    margin-right:-10px;
    padding-left:10px;
    padding-right:10px;
  }
  .map-question-chips{
    grid-template-columns:1fr;
  }
  .map-explore-context{
    padding:13px;
  }
  .map-explore-heading h3{font-size:16px}
  .inline-subperiod-summary{
    padding-bottom:8px;
  }
}

/* Content no longer needs bottom-nav clearance. */
@media(max-width:700px){
  .shell,.workspace,.journey-hero{padding-bottom:24px!important}
}


/* v0.23 — responsive density and post-selection stability */

/* Preserve native scroll position exactly after a tap. Selection should never make the strip move. */
.native-timeline-scroll,
.native-subperiod-scroll,
.native-month-scroll,
.native-chip-scroll{
  scroll-behavior:auto!important;
}

/* Give timelines breathing room at both ends so final periods can be fully revealed. */
.native-timeline-track,
.native-subperiod-track,
.native-month-track{
  padding-inline:clamp(8px,2vw,26px);
}

/* Calendar hierarchy is always vertical: summary -> years -> months. */
.inline-period-calendar{
  display:block!important;
}
.period-calendar-section{
  display:block;
  width:100%;
}
.period-year-section{
  margin-top:12px;
}
.period-month-section{
  margin-top:12px;
}
.period-calendar-section .phase-level-label{
  display:block;
  margin-bottom:7px;
}
.inline-year-selector.native-chip-scroll{
  width:100%;
  max-width:100%;
}
.native-month-scroll{
  width:100%;
  max-width:100%;
}

/* Base fluid sizing shared by phones, tablets and desktops. */
.native-period{
  flex-basis:clamp(98px,var(--native-width),220px)!important;
  width:clamp(98px,var(--native-width),220px)!important;
  min-height:clamp(88px,9vw,112px);
  padding:clamp(10px,1.2vw,18px) clamp(7px,1vw,10px);
}
.native-period.selected{
  transform:scale(1.045)!important;
}
.native-period-symbol{
  font-size:clamp(20px,2vw,25px);
}
.native-period strong{
  font-size:clamp(10px,1.1vw,12px);
}
.native-period small,
.native-period em{
  font-size:clamp(7px,.75vw,8px);
}

.native-subperiod{
  flex-basis:clamp(92px,var(--sub-width),180px)!important;
  width:clamp(92px,var(--sub-width),180px)!important;
  min-height:clamp(58px,6.4vw,70px);
  padding:clamp(7px,.8vw,9px);
}
.native-subperiod.selected{
  transform:scale(1.035)!important;
}

.phase-expansion{
  padding:clamp(14px,2vw,24px)!important;
}
.inline-subperiod-detail{
  padding:clamp(12px,1.6vw,20px)!important;
}
.inline-subperiod-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
}
.inline-subperiod-summary strong{
  font-size:clamp(12px,1.3vw,15px);
}

.native-chip-scroll button{
  min-height:38px;
  padding:7px 12px!important;
  font-size:clamp(11px,1vw,14px);
}
.native-month-track button{
  flex-basis:clamp(78px,8vw,92px);
  min-height:clamp(54px,6vw,64px);
  padding:7px 5px;
}
.native-month-track button.active{
  transform:scale(1.035)!important;
}

/* Contextual questions: compact without becoming cramped. */
.map-explore-context{
  padding:clamp(12px,1.5vw,16px);
}
.map-explore-heading h3{
  font-size:clamp(15px,1.7vw,18px);
}
.map-question-chips button{
  min-height:clamp(42px,4.4vw,48px);
  padding:8px 10px;
  font-size:clamp(11px,1vw,14px);
}
.map-ask-own{
  min-height:40px;
  padding:8px 10px;
  font-size:clamp(11px,1vw,14px);
}

/* Navigation uses short product labels and never wraps into duplicated-looking text. */
.app-nav button{
  white-space:nowrap!important;
  line-height:1!important;
  min-height:34px;
}

/* Small phones */
@media(max-width:430px){
  .topbar{
    min-height:46px!important;
    padding:5px 8px!important;
  }
  .brand{
    gap:5px!important;
  }
  .brand .mark{
    font-size:13px!important;
  }
  .brand-english,
  .regional-brand{
    font-size:7px!important;
    letter-spacing:.12em!important;
  }
  .topbar-actions{
    gap:4px!important;
  }
  .language-control select{
    width:68px!important;
    max-width:68px!important;
    min-height:28px!important;
    padding:4px 20px 4px 7px!important;
    font-size:8px!important;
  }
  .account-button{
    padding:5px 7px!important;
    font-size:8px!important;
  }

  .app-nav{
    top:46px!important;
    min-height:36px!important;
    padding:3px 6px!important;
    gap:2px!important;
  }
  .app-nav button{
    padding:6px 9px!important;
    font-size:9px!important;
    min-height:30px!important;
  }

  body[data-app-view="lifeMap"] .journey-hero{
    padding:6px 8px 20px!important;
  }

  .native-timeline-scroll{
    margin-inline:-8px!important;
    padding:8px 0 14px!important;
  }
  .native-timeline-track{
    gap:4px!important;
    padding-inline:10px!important;
  }
  .native-period{
    flex-basis:clamp(82px,var(--native-width),126px)!important;
    width:clamp(82px,var(--native-width),126px)!important;
    min-height:80px!important;
    border-radius:13px!important;
    padding:9px 6px!important;
  }
  .native-period.selected{
    transform:scale(1.03)!important;
  }
  .native-period-symbol{
    font-size:19px!important;
  }
  .native-period strong{
    font-size:10px!important;
  }
  .native-period small,
  .native-period em{
    font-size:7px!important;
  }
  .period-today-badge{
    font-size:6px!important;
    top:5px!important;
  }

  .selected-period-caption{
    gap:6px!important;
    flex-wrap:wrap;
    font-size:9px!important;
  }

  .phase-expansion{
    padding:12px!important;
    border-radius:15px!important;
  }
  .phase-expansion-header h3{
    font-size:18px!important;
    line-height:1.15!important;
  }
  .phase-expansion-header p{
    margin-top:5px!important;
    font-size:10px!important;
  }
  .phase-level-label{
    font-size:8px!important;
    letter-spacing:.12em!important;
  }

  .native-subperiod-scroll{
    margin-inline:-12px!important;
    padding:7px 0 12px!important;
  }
  .native-subperiod-track{
    gap:4px!important;
    padding-inline:12px!important;
  }
  .native-subperiod{
    flex-basis:clamp(82px,var(--sub-width),112px)!important;
    width:clamp(82px,var(--sub-width),112px)!important;
    min-height:58px!important;
    padding:7px 5px!important;
    border-radius:10px!important;
  }
  .native-subperiod.selected{
    transform:scale(1.025)!important;
  }
  .graha-subperiod-label{
    font-size:10px!important;
  }
  .native-subperiod small{
    font-size:8px!important;
  }

  .inline-subperiod-detail{
    padding:11px!important;
    margin-top:10px!important;
    border-radius:13px!important;
  }
  .inline-subperiod-summary small{
    font-size:9px!important;
  }
  .inline-subperiod-summary strong{
    font-size:12px!important;
    line-height:1.25!important;
  }
  .inline-subperiod-summary span{
    font-size:9px!important;
  }

  .period-calendar-section{
    margin-top:10px!important;
  }
  .native-chip-scroll{
    gap:5px!important;
    padding:3px 0 6px!important;
  }
  .native-chip-scroll button{
    min-height:34px!important;
    padding:5px 10px!important;
    font-size:11px!important;
  }
  .native-month-scroll{
    margin-inline:-11px!important;
    padding:5px 0 9px!important;
  }
  .native-month-track{
    gap:5px!important;
    padding-inline:11px!important;
  }
  .native-month-track button{
    flex-basis:74px!important;
    min-height:52px!important;
    padding:6px 4px!important;
    font-size:11px!important;
  }
  .native-month-track button.active{
    transform:scale(1.025)!important;
  }
  .native-month-track small{
    font-size:7px!important;
  }
  .calendar-help{
    font-size:8px!important;
    line-height:1.35!important;
    margin-top:7px!important;
  }

  .map-explore-context{
    margin-top:12px!important;
    padding:11px!important;
    border-radius:13px!important;
  }
  .map-explore-heading{
    gap:8px!important;
  }
  .map-explore-heading h3{
    font-size:15px!important;
    line-height:1.2!important;
  }
  .map-explore-heading .text-button{
    font-size:10px!important;
    padding:4px!important;
  }
  .map-question-chips{
    gap:6px!important;
    margin-top:9px!important;
  }
  .map-question-chips button{
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .map-ask-own{
    min-height:36px!important;
    margin-top:7px!important;
    padding:7px!important;
    font-size:11px!important;
  }
}

/* Large phones and tablets */
@media(min-width:431px) and (max-width:900px){
  .native-period{
    flex-basis:clamp(100px,var(--native-width),175px)!important;
    width:clamp(100px,var(--native-width),175px)!important;
    min-height:92px!important;
  }
  .native-subperiod{
    flex-basis:clamp(94px,var(--sub-width),150px)!important;
    width:clamp(94px,var(--sub-width),150px)!important;
    min-height:62px!important;
  }
  .map-question-chips{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Desktop */
@media(min-width:901px){
  .map-question-chips{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .period-calendar-section{
    max-width:100%;
  }
}


/* v0.24 — responsive foundation, temporal hierarchy, Charts & Insights */

/* Root responsive guard: horizontal exploration belongs inside explicit scrollers only. */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
body *,body *::before,body *::after{box-sizing:border-box}
.shell,.workspace,.workspace-grid,.journey-hero,.panel,.birth-panel,.chart-workspace,
.phase-expansion,.inline-subperiod-detail,.chart-focus-shell,.chart-focus-main,.chart-focus-insights{
  min-width:0!important;
  max-width:100%;
}
img,svg,canvas{max-width:100%}
.native-timeline-scroll,.native-subperiod-scroll,.native-month-scroll,.native-chip-scroll,.app-nav,.chart-view-selector{
  max-width:100vw;
}

/* ---------------- Charts & Insights workspace ---------------- */
body[data-app-view="charts"] #birthPanel{
  width:min(1240px,calc(100vw - 32px))!important;
  max-width:1240px!important;
}
.chart-workspace{
  width:100%;
  padding:clamp(14px,2.4vw,30px);
  border-radius:24px;
  background:
    radial-gradient(circle at 78% 16%,rgba(79,128,212,.12),transparent 32%),
    linear-gradient(145deg,rgba(8,28,55,.96),rgba(5,19,39,.98));
  border:1px solid rgba(126,180,255,.13);
}
.chart-workspace-header h2{
  margin:4px 0 6px;
  font-size:clamp(24px,3vw,38px);
}
.chart-workspace-intro{
  max-width:720px;
  color:var(--muted);
  line-height:1.6;
}
.chart-view-selector{
  display:flex;
  gap:8px;
  width:100%;
  overflow-x:auto;
  padding:12px 2px 16px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chart-view-selector::-webkit-scrollbar{display:none}
.chart-view-selector button{
  flex:0 0 auto;
  min-width:142px;
  min-height:66px;
  padding:10px 13px;
  text-align:left;
  border:1px solid rgba(126,180,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.chart-view-selector button strong{
  display:block;
  font-size:12px;
}
.chart-view-selector button small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
}
.chart-view-selector button.active{
  border-color:rgba(242,198,109,.7);
  background:linear-gradient(145deg,rgba(242,198,109,.16),rgba(79,128,212,.08));
  box-shadow:0 9px 28px rgba(0,0,0,.22),inset 0 0 0 1px rgba(242,198,109,.12);
  transform:translateY(-2px);
}
.chart-view-selector button.active strong{color:var(--gold)}

.chart-focus-shell{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.72fr);
  gap:clamp(14px,2vw,24px);
  align-items:start;
}
.chart-focus-main,.chart-focus-insights{
  border:1px solid rgba(126,180,255,.11);
  border-radius:20px;
  background:rgba(3,17,36,.58);
}
.chart-focus-main{
  padding:clamp(14px,2vw,24px);
}
.chart-focus-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.chart-focus-title h3{
  margin:3px 0 5px;
  font-size:clamp(22px,2.4vw,34px);
}
.chart-focus-title p:not(.eyebrow){
  margin:0;
  color:var(--muted);
  max-width:620px;
}
.chart-style-switch{
  display:flex;
  flex:0 0 auto;
  gap:4px;
  padding:3px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
}
.chart-style-switch button{
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  padding:7px 11px;
}
.chart-style-switch button.active{
  background:var(--gold-soft);
  color:var(--gold);
}
.chart-focus-canvas{
  width:min(100%,720px)!important;
  min-height:clamp(360px,52vw,680px)!important;
  margin:12px auto 0!important;
  display:grid;
  place-items:center;
}
.chart-focus-canvas svg{
  width:min(100%,640px)!important;
  height:auto!important;
  aspect-ratio:1;
}
.chart-focus-insights{
  padding:clamp(14px,1.7vw,20px);
  position:sticky;
  top:112px;
}
.chart-insight-block{
  padding:4px 0 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.chart-insight-block+.chart-insight-block{padding-top:16px}
.chart-insight-block h3{
  margin:4px 0 8px;
  font-size:17px;
}
.chart-insight-block p:not(.eyebrow){
  color:var(--muted);
  line-height:1.55;
}
.chart-key-placements{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.key-placement{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.key-placement strong{font-size:11px}
.key-placement span{
  color:var(--muted);
  font-size:10px;
  text-align:right;
}
.chart-context-ask{
  width:100%;
  margin-top:15px;
  padding:11px 12px;
  border:1px solid rgba(242,198,109,.22);
  border-radius:12px;
  background:rgba(242,198,109,.07);
  color:var(--gold);
}

/* Sade Sati is an insight visualization, not a horoscope diagram. */
.sade-sati-insight{
  min-height:clamp(360px,44vw,560px);
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,38px);
}
.sade-sati-visual{
  width:min(100%,700px);
  text-align:center;
}
.sade-moon-anchor{
  width:150px;
  height:150px;
  margin:0 auto 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(126,180,255,.28);
  background:radial-gradient(circle,rgba(126,180,255,.15),rgba(8,29,57,.7));
  box-shadow:0 0 55px rgba(93,145,224,.13);
}
.sade-moon-anchor span{font-size:38px}
.sade-moon-anchor strong{margin-top:5px}
.sade-moon-anchor small{margin-top:4px;color:var(--muted)}
.sade-phase-track{
  display:grid;
  grid-template-columns:1fr 40px 1fr 40px 1fr;
  align-items:center;
}
.sade-phase-track>div{
  min-height:130px;
  padding:16px 10px;
  border:1px solid rgba(126,180,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.sade-phase-track b{
  width:28px;height:28px;
  margin:0 auto 8px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--gold);
}
.sade-phase-track strong,.sade-phase-track small{display:block}
.sade-phase-track small{margin-top:7px;color:var(--muted);line-height:1.4}
.sade-phase-track i{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.sade-validation-note{
  margin:22px auto 0;
  max-width:650px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

/* ---------------- Life Map temporal hierarchy ---------------- */
.life-time-axis{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:8px;
  margin:7px 4px -2px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.11em;
}
.life-time-axis i{
  height:1px;
  background:linear-gradient(90deg,rgba(126,180,255,.08),rgba(126,180,255,.36),rgba(126,180,255,.08));
}
.native-period{
  overflow:visible!important;
}
.native-period.selected{
  transform:scale(1.09)!important;
  opacity:1!important;
  z-index:8!important;
  filter:saturate(1.18) brightness(1.1)!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:
    0 0 0 3px rgba(242,198,109,.55),
    0 0 32px rgba(242,198,109,.28),
    0 16px 34px rgba(0,0,0,.36)!important;
}
.native-period:not(.selected){opacity:.68!important}
.native-period.active:not(.selected){
  opacity:.92!important;
  box-shadow:inset 0 0 0 2px rgba(242,198,109,.52)!important;
}
.period-selected-badge,.sub-selected-badge{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  padding:3px 7px;
  border-radius:999px;
  background:#f0c764;
  color:#10203a;
  font-size:6px;
  font-weight:900;
  letter-spacing:.09em;
  white-space:nowrap;
}
.period-duration{
  margin-top:2px;
  font-size:7px;
  opacity:.72;
}
.selected-time-focus{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center!important;
  gap:16px!important;
  padding:12px 14px!important;
  border:1px solid rgba(242,198,109,.18);
  border-radius:14px;
  background:rgba(242,198,109,.045);
}
.selected-time-focus>div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.selected-time-focus>div:first-child>span{
  color:var(--gold);
  font-size:7px;
  letter-spacing:.12em;
}
.selected-time-range,.phase-temporal-focus,.sub-temporal-focus{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:7px 12px;
}
.temporal-years{
  color:var(--gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,2.5vw,34px);
  line-height:1;
  white-space:nowrap;
}
.temporal-dates{
  color:var(--text);
  font-size:clamp(9px,.9vw,12px);
}
.temporal-meta{
  color:var(--muted);
  font-size:clamp(8px,.8vw,10px);
}
.phase-temporal-focus{
  margin:7px 0 4px;
}
.sub-temporal-focus{
  margin-top:5px;
}
.sub-temporal-focus .temporal-years{
  font-size:clamp(17px,2vw,27px);
}

.native-subperiod{
  position:relative;
  overflow:visible!important;
}
.native-subperiod.selected{
  transform:scale(1.075)!important;
  opacity:1!important;
  z-index:7!important;
  border-color:rgba(255,255,255,.66)!important;
  box-shadow:
    0 0 0 2px rgba(242,198,109,.5),
    0 0 22px rgba(242,198,109,.2),
    0 10px 24px rgba(0,0,0,.3)!important;
}
.native-subperiod:not(.selected){opacity:.63!important}
.sub-today-badge{
  position:absolute;
  top:4px;
  right:5px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(12,28,52,.74);
  color:var(--gold);
  font-size:5px;
  font-weight:800;
}

/* Force the Antardasha summary, years and months into a stable vertical hierarchy everywhere. */
.inline-subperiod-detail,
.inline-period-calendar,
.period-calendar-section{
  display:block!important;
  width:100%!important;
}
.inline-subperiod-summary{
  width:100%!important;
  display:block!important;
}
.period-year-section,.period-month-section{
  clear:both;
  width:100%!important;
  margin-top:14px!important;
}

/* Responsive foundation: no page-level child can expand the viewport. */
@media(max-width:900px){
  .shell,.workspace{
    width:100%!important;
    max-width:100vw!important;
    padding-left:clamp(8px,2.5vw,18px)!important;
    padding-right:clamp(8px,2.5vw,18px)!important;
  }
  .workspace-grid{
    display:block!important;
    width:100%!important;
  }
  .chart-focus-shell{
    grid-template-columns:1fr;
  }
  .chart-focus-insights{
    position:static;
  }
  .chart-focus-canvas{
    min-height:clamp(320px,82vw,620px)!important;
  }
}

@media(max-width:600px){
  body[data-app-view="charts"] #birthPanel{
    width:calc(100vw - 12px)!important;
  }
  .chart-workspace{
    padding:11px;
    border-radius:17px;
  }
  .chart-workspace-header h2{
    font-size:23px;
  }
  .chart-workspace-intro{
    font-size:10px;
    line-height:1.45;
  }
  .chart-view-selector{
    margin-inline:-11px;
    width:calc(100% + 22px);
    padding-inline:11px;
  }
  .chart-view-selector button{
    min-width:118px;
    min-height:57px;
    padding:8px 10px;
  }
  .chart-view-selector button strong{font-size:10px}
  .chart-view-selector button small{font-size:8px}
  .chart-focus-main{
    padding:11px;
    border-radius:15px;
  }
  .chart-focus-title{
    display:block;
  }
  .chart-focus-title h3{font-size:22px}
  .chart-focus-title p:not(.eyebrow){font-size:10px}
  .chart-style-switch{
    width:max-content;
    margin-top:10px;
  }
  .chart-focus-canvas{
    min-height:320px!important;
  }
  .chart-focus-canvas svg{
    width:100%!important;
  }
  .chart-focus-insights{
    padding:12px;
    border-radius:15px;
  }
  .sade-phase-track{
    grid-template-columns:1fr;
    gap:8px;
  }
  .sade-phase-track i{
    width:1px;
    height:18px;
    margin:auto;
  }
  .sade-phase-track>div{
    min-height:96px;
  }

  .life-time-axis{
    font-size:6px;
    gap:5px;
  }
  .native-period.selected{
    transform:scale(1.055)!important;
    box-shadow:
      0 0 0 2px rgba(242,198,109,.58),
      0 0 20px rgba(242,198,109,.22),
      0 10px 24px rgba(0,0,0,.34)!important;
  }
  .native-subperiod.selected{
    transform:scale(1.045)!important;
  }
  .selected-time-focus{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
  }
  .temporal-years{
    font-size:21px;
  }
  .temporal-dates{
    font-size:9px;
  }
  .temporal-meta{
    width:100%;
    font-size:8px;
  }
}


/* v0.24.1 — responsive stability and interaction polish */

:root{
  --app-header-height:54px;
  --app-nav-height:42px;
  --app-sticky-offset:96px;
}
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
  scroll-padding-top:calc(var(--app-sticky-offset) + 10px);
}
body{
  width:100%;
  max-width:100%;
  min-width:0!important;
  margin:0;
  overflow-x:hidden!important;
}
body>*{
  max-width:100%;
}
.topbar{
  height:var(--app-header-height)!important;
  min-height:var(--app-header-height)!important;
}
.app-nav{
  top:var(--app-header-height)!important;
  min-height:var(--app-nav-height)!important;
}
#workspace,
.workspace,
.shell{
  max-width:100%!important;
  min-width:0!important;
}
.shell{
  width:min(1500px,100%)!important;
  padding-left:clamp(10px,3vw,46px);
  padding-right:clamp(10px,3vw,46px);
}
.hero,
.feature-showcase,
.journey-hero,
.birth-panel,
.ask-panel,
.journey-panel,
.shared-journeys{
  width:100%;
  min-width:0!important;
}
.hero *{
  min-width:0;
}
.hero h1,
.hero .subcopy,
.hero .hero-actions,
.hero .hero-proof{
  max-width:100%;
}

/* Prevent intentional horizontal strips from widening the document. */
.native-timeline-scroll,
.native-subperiod-scroll,
.native-month-scroll,
.native-chip-scroll,
.chart-view-selector,
.app-nav{
  width:100%;
  min-width:0;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  contain:inline-size;
}
.native-timeline-track,
.native-subperiod-track,
.native-month-track{
  max-width:none!important;
}

/* Sticky chrome must never obscure the start of a destination. */
#journeyHero,
#askPanel,
#myJourney,
#birthPanel,
#kundliSection,
#sharedJourneys{
  scroll-margin-top:calc(var(--app-sticky-offset) + 12px);
}

/* Charts is its own destination: hide legacy birth-summary chrome while browsing Charts. */
body[data-app-view="charts"] #birthPanel>.panel-heading-row,
body[data-app-view="charts"] #birthPanel>#compactBirth,
body[data-app-view="charts"] #birthPanel>#birthForm,
body[data-app-view="charts"] #birthPanel>#chartSummary,
body[data-app-view="charts"] #birthPanel>#lifeMapOnboardingIntro,
body[data-app-view="charts"] #birthPanel>#lifeMapSection{
  display:none!important;
}
body[data-app-view="charts"] #birthPanel{
  padding-top:0!important;
  border:0!important;
  background:transparent!important;
}
body[data-app-view="charts"] #kundliSection{
  margin-top:0!important;
  border-top:0!important;
  padding-top:0!important;
}

/* Selection emphasis must not change geometry: no scale, no layout shift. */
.native-period.selected{
  transform:none!important;
  outline:3px solid rgba(242,198,109,.74);
  outline-offset:2px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25),
    0 0 30px rgba(242,198,109,.30),
    0 15px 32px rgba(0,0,0,.34)!important;
}
.native-subperiod.selected{
  transform:none!important;
  outline:2px solid rgba(242,198,109,.76);
  outline-offset:2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.24),
    0 0 22px rgba(242,198,109,.24),
    0 10px 22px rgba(0,0,0,.28)!important;
}

/* Give edge items enough internal room to become fully visible. */
.native-timeline-track{
  padding-left:18px!important;
  padding-right:28px!important;
}
.native-subperiod-track{
  padding-left:18px!important;
  padding-right:28px!important;
}
.native-month-track{
  padding-left:12px!important;
  padding-right:24px!important;
}

/* Sade Sati remains an honest informational preview until transit timing is validated. */
.sade-sati-insight{
  min-height:0!important;
  display:block!important;
  padding:clamp(12px,2vw,24px)!important;
}
.sade-preview{
  width:min(100%,760px);
  margin:0 auto;
  display:grid;
  gap:18px;
}
.sade-preview-anchor{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(126,180,255,.18);
  border-radius:16px;
  background:rgba(126,180,255,.05);
}
.sade-preview-anchor>span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:28px;
  background:rgba(126,180,255,.08);
}
.sade-preview-anchor small,
.sade-preview-anchor strong{
  display:block;
}
.sade-preview-anchor small{
  color:var(--muted);
  font-size:8px;
  letter-spacing:.12em;
}
.sade-preview-anchor strong{
  margin-top:3px;
  font-size:20px;
}
.sade-preview-copy h3{
  margin:4px 0 7px;
  font-size:clamp(20px,2.2vw,29px);
}
.sade-preview-copy p:not(.eyebrow){
  color:var(--muted);
  line-height:1.55;
}
.sade-preview-phases{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.sade-preview-phases>div{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.sade-preview-phases b{
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--gold);
}
.sade-preview-phases strong,
.sade-preview-phases small{
  display:block;
}
.sade-preview-phases small{
  margin-top:4px;
  color:var(--muted);
  line-height:1.35;
}
.sade-preview-status{
  padding:13px 14px;
  border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;
  background:rgba(242,198,109,.06);
}
.sade-preview-status strong,
.sade-preview-status span{
  display:block;
}
.sade-preview-status span{
  margin-top:5px;
  color:var(--muted);
  line-height:1.45;
}

/* Mobile viewport stability */
@media(max-width:700px){
  :root{
    --app-header-height:48px;
    --app-nav-height:38px;
    --app-sticky-offset:86px;
  }
  .shell{
    width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .topbar{
    width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
    overflow:hidden;
  }
  .brand{
    min-width:0!important;
    overflow:hidden;
  }
  .brand .mark,
  .brand .brand-english,
  .brand .regional-brand{
    flex:0 0 auto;
  }
  .topbar-actions{
    flex:0 0 auto;
    min-width:0;
  }
  .app-nav{
    width:100%!important;
    max-width:100%!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .app-nav button{
    flex:0 0 auto!important;
  }
  .hero{
    min-height:calc(100svh - var(--app-header-height))!important;
    padding:clamp(34px,8vh,68px) 6px!important;
  }
  .hero h1{
    font-size:clamp(39px,12vw,58px)!important;
    line-height:1.02!important;
    overflow-wrap:anywhere;
  }
  .hero .subcopy{
    font-size:clamp(15px,4.5vw,19px)!important;
    line-height:1.55!important;
  }
  .hero-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .hero-actions button{
    width:100%;
    max-width:100%;
  }

  body[data-app-view="charts"] #birthPanel{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .chart-workspace{
    width:100%!important;
    max-width:100%!important;
  }

  .selected-time-focus,
  .phase-expansion,
  .inline-subperiod-detail{
    overflow:hidden;
  }
  .temporal-years{
    font-size:clamp(18px,7vw,25px)!important;
    white-space:normal!important;
  }
  .temporal-dates{
    overflow-wrap:anywhere;
  }

  .sade-preview-phases{
    grid-template-columns:1fr;
  }
}

@media(max-width:380px){
  .brand .regional-brand{
    display:none!important;
  }
  .brand{
    gap:5px!important;
  }
  .brand .mark{
    font-size:12px!important;
  }
  .brand .brand-english{
    font-size:7px!important;
  }
  .language-control select{
    width:64px!important;
    max-width:64px!important;
  }
  .account-button{
    padding-left:6px!important;
    padding-right:6px!important;
  }
}


/* v0.25 — timeline affordances and mobile detail polish */

/* Empty Antardasha detail must collapse completely. */
.inline-subperiod-detail.hidden{
  display:none!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

/* Reusable native timeline shell. */
.timeline-scroll-shell{
  position:relative;
  min-width:0;
}
.timeline-scroll-arrow{
  position:absolute;
  top:50%;
  z-index:12;
  width:34px;
  height:46px;
  transform:translateY(-50%);
  border:1px solid rgba(242,198,109,.24);
  border-radius:12px;
  background:rgba(5,20,42,.9);
  color:var(--gold);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease;
  backdrop-filter:blur(10px);
}
.timeline-scroll-prev{left:4px}
.timeline-scroll-next{right:4px}
.timeline-scroll-shell.has-overflow .timeline-scroll-arrow:not(:disabled){
  opacity:.92;
  pointer-events:auto;
}
.timeline-scroll-arrow:disabled{
  opacity:0!important;
  pointer-events:none!important;
}
.timeline-scroll-arrow:hover{
  background:rgba(12,37,70,.98);
  border-color:rgba(242,198,109,.58);
}
.timeline-scroll-shell::before,
.timeline-scroll-shell::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:42px;
  z-index:8;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}
.timeline-scroll-shell::before{
  left:0;
  background:linear-gradient(90deg,rgba(7,28,55,.96),rgba(7,28,55,0));
}
.timeline-scroll-shell::after{
  right:0;
  background:linear-gradient(270deg,rgba(7,28,55,.96),rgba(7,28,55,0));
}
.timeline-scroll-shell.can-scroll-left::before{opacity:1}
.timeline-scroll-shell.can-scroll-right::after{opacity:1}

/* Keep selected items strong without geometry changes. */
.native-period.selected,
.native-subperiod.selected{
  transform:none!important;
}

/* Mobile Antardasha detail hierarchy. */
.inline-subperiod-summary>div{
  display:block!important;
  width:100%;
}
.inline-subperiod-summary>div>small{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:9px;
}
.sub-temporal-focus{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px 14px!important;
  align-items:baseline!important;
  margin-top:8px!important;
}
.sub-temporal-focus .temporal-years{
  grid-column:1;
}
.sub-temporal-focus .temporal-dates{
  grid-column:2;
}
.sub-temporal-focus .temporal-meta{
  grid-column:1 / -1;
}
.inline-subperiod-summary>div>span:last-child{
  display:block;
  margin-top:6px;
  color:var(--muted);
}

/* Keep the Explore section visually connected to populated detail. */
.inline-subperiod-detail:not(.hidden)+.map-explore-context{
  margin-top:14px!important;
}

/* Desktop-only arrow affordances. Native touch remains primary on touch devices. */
@media(hover:hover) and (pointer:fine){
  .timeline-scroll-shell.has-overflow .timeline-scroll-arrow:not(:disabled){
    display:grid;
    place-items:center;
  }
}

@media(hover:none), (pointer:coarse){
  .timeline-scroll-arrow{
    display:none!important;
  }
  .timeline-scroll-shell::before,
  .timeline-scroll-shell::after{
    width:24px;
  }
}

/* Compact mobile phase hierarchy and avoid clipped dates/status. */
@media(max-width:600px){
  .phase-expansion{
    overflow:hidden;
  }
  .phase-expansion-header h3{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .phase-temporal-focus{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  .phase-temporal-focus .temporal-years,
  .phase-temporal-focus .temporal-dates,
  .phase-temporal-focus .temporal-meta{
    grid-column:1!important;
  }

  .inline-subperiod-summary{
    padding:0!important;
  }
  .sub-temporal-focus{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  .sub-temporal-focus .temporal-years,
  .sub-temporal-focus .temporal-dates,
  .sub-temporal-focus .temporal-meta{
    grid-column:1!important;
  }
  .sub-temporal-focus .temporal-years{
    font-size:23px!important;
  }
  .sub-temporal-focus .temporal-dates{
    font-size:10px!important;
    line-height:1.4;
  }
  .sub-temporal-focus .temporal-meta{
    font-size:9px!important;
  }

  .native-subperiod-track{
    padding-left:14px!important;
    padding-right:26px!important;
  }
  .native-timeline-track{
    padding-left:14px!important;
    padding-right:26px!important;
  }
  .map-explore-context{
    margin-top:12px!important;
  }
}

/* On wide screens, align the Antardasha summary cleanly instead of splitting into awkward columns. */
@media(min-width:901px){
  .inline-subperiod-summary{
    max-width:none!important;
  }
  .inline-subperiod-summary>div{
    display:grid!important;
    grid-template-columns:minmax(180px,.55fr) minmax(0,1.8fr);
    align-items:center;
    column-gap:26px;
  }
  .inline-subperiod-summary>div>small{
    grid-column:1;
    grid-row:1;
  }
  .sub-temporal-focus{
    grid-column:2;
    grid-row:1 / span 2;
    margin-top:0!important;
  }
  .inline-subperiod-summary>div>span:last-child{
    grid-column:1;
    grid-row:2;
  }
}


/* v0.26 — Charts consistency and Personal Journey */

/* North and South are two geometries inside the exact same visual frame. */
.chart-focus-canvas{
  width:min(100%,680px)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1;
  margin:18px auto 0!important;
  display:grid!important;
  place-items:center!important;
}
.chart-focus-canvas>svg,
.chart-focus-canvas>.south-chart{
  width:min(100%,620px)!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  margin:auto!important;
}
.chart-focus-canvas>.south-chart{
  align-self:center;
  justify-self:center;
}
.chart-focus-canvas.hidden{
  display:none!important;
}
.chart-technical-help{
  margin:8px 0 0!important;
  padding-left:10px;
  border-left:2px solid rgba(242,198,109,.55);
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.45;
}
.chart-focus-title .eyebrow{
  margin-bottom:5px;
}

/* Purpose is primary; technical chart identifier is supporting context. */
.chart-focus-title h3{
  font-size:clamp(25px,2.7vw,38px)!important;
}
.chart-focus-title .eyebrow{
  color:var(--gold);
  font-size:10px;
}

/* ---------------- Full My Journey workspace ---------------- */
.journey-workspace{
  width:min(1100px,100%)!important;
  max-width:1100px!important;
  margin:0 auto!important;
  padding:clamp(18px,2.5vw,30px)!important;
}
.journey-workspace-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.journey-workspace-header h2{
  margin:3px 0 8px;
  font-size:clamp(28px,3.3vw,42px);
}
.journey-workspace-header>div>p:last-child{
  max-width:720px;
  line-height:1.6;
}
.journey-add-event{
  flex:0 0 auto;
  margin-top:4px;
}
.journey-privacy-callout{
  margin-top:20px;
}
.journey-dashboard-grid,
.journey-lower-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.journey-context-card{
  min-width:0;
  padding:17px;
  border:1px solid rgba(126,180,255,.11);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.journey-context-card .mini-heading{
  margin-bottom:12px;
}
.journey-timeline-section{
  margin-top:24px;
  padding:20px;
  border:1px solid rgba(126,180,255,.12);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(8,32,63,.66),rgba(5,22,45,.72));
}
.journey-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.journey-section-heading .eyebrow{
  margin-bottom:5px;
}
.journey-section-heading h3{
  font-size:24px;
}
.journey-event-timeline{
  position:relative;
  display:grid;
  gap:9px;
}
.journey-event-timeline:not(:empty)::before{
  content:"";
  position:absolute;
  left:72px;
  top:15px;
  bottom:15px;
  width:1px;
  background:linear-gradient(180deg,rgba(242,198,109,.2),rgba(242,198,109,.75),rgba(242,198,109,.15));
}
.journey-event-card{
  position:relative;
  display:grid;
  grid-template-columns:58px 18px minmax(0,1fr) 28px;
  gap:8px;
  align-items:start;
  min-width:0;
  padding:11px 10px 11px 0;
  border-radius:13px;
  transition:background .15s ease;
}
.journey-event-card:hover{
  background:rgba(255,255,255,.025);
}
.journey-event-year{
  padding-top:8px;
  color:var(--gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  text-align:right;
}
.journey-event-marker{
  position:relative;
  z-index:2;
  width:10px;
  height:10px;
  margin:11px auto 0;
  border:2px solid #071c37;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 2px rgba(242,198,109,.28);
}
.journey-event-content{
  min-width:0;
  padding:9px 12px;
  border:1px solid rgba(126,180,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.journey-event-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.journey-event-category{
  color:var(--gold);
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.journey-event-topline small{
  color:var(--muted);
  font-size:9px;
}
.journey-event-content h4{
  margin:7px 0 5px;
  color:var(--text);
  font-size:14px;
}
.journey-event-content p{
  margin:0;
  color:var(--muted);
  font-size:10px;
}
.journey-event-remove{
  margin-top:8px;
  border:0;
  background:none;
  color:var(--muted);
  cursor:pointer;
  font-size:17px;
}
.journey-event-remove:hover{
  color:var(--gold);
}
.journey-empty-state{
  display:grid;
  place-items:center;
  gap:8px;
  padding:30px 20px;
  text-align:center;
  border:1px dashed rgba(242,198,109,.2);
  border-radius:14px;
}
.journey-empty-state>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gold);
  background:var(--gold-soft);
}
.journey-empty-state strong{
  max-width:600px;
}
.journey-empty-state p{
  max-width:650px;
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:11px;
}
.journey-empty-state button{
  margin-top:5px;
}
.journey-saved-placeholder{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  border-radius:11px;
  background:rgba(255,255,255,.02);
}
.journey-saved-placeholder span{
  color:var(--gold);
}
.journey-saved-placeholder p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  font-size:11px;
}

/* When Journey is the active destination it is no longer treated like a narrow side panel. */
body[data-app-view="myJourney"] #myJourney{
  grid-column:1 / -1!important;
}
body[data-app-view="myJourney"] .journey-panel{
  min-height:0!important;
}

/* Chart workspace stays balanced on all screen sizes. */
@media(max-width:900px){
  .chart-focus-canvas{
    width:min(100%,620px)!important;
  }
  .chart-focus-canvas>svg,
  .chart-focus-canvas>.south-chart{
    width:min(100%,560px)!important;
  }
}

@media(max-width:700px){
  .chart-focus-canvas{
    width:100%!important;
    aspect-ratio:1 / 1;
  }
  .chart-focus-canvas>svg,
  .chart-focus-canvas>.south-chart{
    width:min(100%,420px)!important;
  }
  .chart-technical-help{
    font-size:9px!important;
  }

  .journey-workspace{
    padding:14px!important;
  }
  .journey-workspace-header{
    display:block;
  }
  .journey-add-event{
    width:100%;
    margin-top:14px;
  }
  .journey-dashboard-grid,
  .journey-lower-grid{
    grid-template-columns:1fr;
  }
  .journey-timeline-section{
    padding:13px;
  }
  .journey-section-heading{
    align-items:flex-start;
  }
  .journey-section-heading h3{
    font-size:20px;
  }
  .journey-event-timeline:not(:empty)::before{
    left:45px;
  }
  .journey-event-card{
    grid-template-columns:34px 14px minmax(0,1fr) 22px;
    gap:5px;
  }
  .journey-event-year{
    font-size:13px;
  }
  .journey-event-content{
    padding:8px 9px;
  }
  .journey-event-topline{
    display:block;
  }
  .journey-event-topline small{
    display:block;
    margin-top:3px;
  }
}


/* v0.27 — Mobile Viewport & Responsive Integrity */

/* Document width is always the visual viewport. Internal rails own their overflow. */
html,
body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:clip!important;
}
body{
  position:relative;
}
body>*,
main,
section,
article,
aside,
header,
nav,
footer,
.shell,
.workspace,
.panel,
.journey-hero,
.ask-panel,
.journey-workspace,
.chart-workspace,
.shared-journeys,
.shared-preview,
.chart-focus-shell,
.chart-focus-main,
.chart-focus-insights{
  min-width:0!important;
  max-width:100%;
}
img,svg,canvas,video{
  max-width:100%;
}

/* Primary app shell must never use viewport-unit widths that can exceed mobile layout width. */
.shell{
  width:min(1500px,100%)!important;
  max-width:100%!important;
}
.workspace{
  width:100%!important;
  max-width:100%!important;
}
.app-view-hidden{
  display:none!important;
}

/* Only explicit rails are horizontally scrollable. */
.app-nav,
.native-timeline-scroll,
.native-subperiod-scroll,
.native-month-scroll,
.native-chip-scroll,
.chart-view-selector,
.suggestions{
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.native-timeline-scroll,
.native-subperiod-scroll,
.native-month-scroll,
.native-chip-scroll,
.chart-view-selector{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  contain:inline-size;
}

/* Remove the old mobile pseudo-label workaround that caused JourneyJourney/TogetherTogether. */
#appNav button[data-app-view="myJourney"],
#appNav button[data-app-view="shared"]{
  font-size:inherit!important;
}
#appNav button[data-app-view="myJourney"]::after,
#appNav button[data-app-view="shared"]::after{
  content:none!important;
  display:none!important;
}

/* Long localized labels and generated content can wrap; they may never define page width. */
h1,h2,h3,h4,p,li,strong,small,span,
.answer,
.answer *,
.assistant-reading,
.assistant-reading *,
.ask-panel,
.ask-panel *,
.journey-workspace,
.journey-workspace *,
.shared-journeys,
.shared-journeys *,
.chart-workspace,
.chart-workspace *{
  overflow-wrap:anywhere;
  min-width:0;
}
textarea,input,select,button{
  max-width:100%;
  min-width:0;
}

/* Floating Ask remains inside the safe visual viewport. */
.floating-ask{
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  max-width:calc(100% - 24px)!important;
}

/* Shared Journeys stacks cleanly and cannot expand the document. */
.shared-journeys{
  width:100%!important;
  max-width:100%!important;
}
.shared-heading{
  min-width:0;
}
.shared-heading>div{
  min-width:0;
}
.shared-heading h2{
  max-width:100%;
}
.shared-preview,
.shared-empty{
  width:100%;
  max-width:100%;
}

/* Ask context and question composer must stay inside the card. */
.ask-journey-context,
.composer,
#question,
.welcome-prompts,
.prompt-grid,
.reading-progress,
.answer,
.follow-up-chips,
.feedback-panel{
  width:100%;
  max-width:100%;
  min-width:0;
}

/* Charts: selector scrolls, workspace and canvas do not widen the page. */
.chart-workspace{
  width:100%!important;
  max-width:100%!important;
}
.chart-focus-shell{
  width:100%;
}
.chart-focus-title{
  min-width:0;
}
.chart-focus-title>div{
  min-width:0;
}
.chart-focus-canvas{
  max-width:100%!important;
  overflow:hidden;
}
.chart-focus-canvas>svg,
.chart-focus-canvas>.south-chart{
  max-width:100%!important;
}

/* Life Map card time hierarchy: make calendar time immediately readable. */
.native-period em{
  font-size:9px!important;
  line-height:1.2!important;
  opacity:.92!important;
  color:rgba(255,255,255,.88)!important;
}
.native-period .period-duration{
  font-size:8px!important;
  opacity:.78!important;
  line-height:1.2!important;
}

/* Header branding: retain primary + selected regional + English identity. */
.brand{
  min-width:0!important;
  max-width:100%;
  overflow:hidden;
  display:flex!important;
  align-items:center;
  white-space:nowrap;
}
.brand .mark,
.brand .regional-brand,
.brand .brand-english{
  display:inline-block;
  flex:0 1 auto;
  min-width:0;
}
.brand .regional-brand.hidden{
  display:none!important;
}

/* Navigation is its own rail and never makes the page wider. */
.app-nav{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.app-nav button{
  flex:0 0 auto!important;
  white-space:nowrap;
}

/* Mobile-specific hardening */
@media(max-width:700px){
  html,body{
    inline-size:100%!important;
    max-inline-size:100%!important;
  }

  .shell{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .workspace{
    display:block!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .panel,
  .journey-hero,
  .journey-workspace,
  .chart-workspace,
  .shared-journeys{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:7px 8px!important;
    align-items:center!important;
    gap:8px;
  }
  .brand{
    flex:1 1 auto!important;
    gap:5px!important;
  }
  .brand .mark{
    font-size:13px!important;
  }
  .brand .regional-brand{
    font-size:9px!important;
    opacity:.82;
  }
  .brand .brand-english{
    font-size:8px!important;
    letter-spacing:.12em!important;
  }
  .topbar-actions{
    flex:0 0 auto;
    min-width:0!important;
    gap:5px!important;
  }
  .language-control span{
    display:none!important;
  }
  .language-control select{
    width:76px!important;
    max-width:76px!important;
    padding:7px 20px 7px 8px!important;
    font-size:9px!important;
  }
  .account-button{
    max-width:54px!important;
    overflow:hidden;
    white-space:nowrap;
    padding:7px 8px!important;
    font-size:9px!important;
  }

  .app-nav{
    padding-left:8px!important;
    padding-right:8px!important;
    scroll-padding-inline:8px;
  }
  .app-nav button{
    padding:8px 10px!important;
    font-size:10px!important;
  }

  /* Landing hero must fit the viewport on first load and on return. */
  .hero{
    width:100%!important;
    max-width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
    overflow:hidden;
  }
  .hero h1{
    width:100%;
    max-width:100%;
    font-size:clamp(38px,11.5vw,56px)!important;
    line-height:1.04!important;
  }
  .hero .subcopy{
    width:100%;
    max-width:100%;
    font-size:clamp(15px,4.5vw,19px)!important;
  }
  .hero-actions,
  .hero-actions>*{
    width:100%!important;
    max-width:100%!important;
  }

  /* Life Map content can be wide only inside its own horizontal strips. */
  .journey-hero{
    overflow:hidden!important;
  }
  .timeline-scroll-shell,
  .native-timeline-scroll,
  .native-subperiod-scroll,
  .native-month-scroll{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Charts selector remains scrollable; everything below it wraps naturally. */
  .chart-view-selector{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .chart-focus-title{
    display:block!important;
  }
  .chart-focus-title h3{
    white-space:normal!important;
    font-size:clamp(27px,8vw,38px)!important;
  }
  .chart-style-switch{
    margin-top:12px;
  }

  /* Shared page */
  .shared-heading{
    display:block!important;
  }
  .shared-heading button{
    width:100%;
    margin-top:12px;
  }
  .shared-journeys h2{
    font-size:clamp(29px,8.5vw,40px)!important;
    line-height:1.08!important;
  }

  /* Ask and readings */
  .ask-panel{
    overflow:hidden!important;
  }
  .ask-panel h2{
    font-size:clamp(29px,8.5vw,42px)!important;
  }
  .ask-journey-context{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .ask-journey-context strong{
    overflow-wrap:anywhere;
  }
  .answer{
    font-size:clamp(16px,4.6vw,20px)!important;
    line-height:1.7!important;
  }
  .answer h2{
    font-size:clamp(27px,7.5vw,36px)!important;
    line-height:1.15!important;
  }

  /* Journey */
  .journey-workspace-header h2{
    font-size:clamp(30px,8.5vw,42px)!important;
    line-height:1.1!important;
  }
  .journey-workspace-header>div>p:last-child{
    font-size:15px;
  }

  /* No route can leave the body in an accidental sideways position. */
  body[data-app-view]{
    left:0!important;
    right:auto!important;
    transform:none!important;
  }
}

@media(max-width:380px){
  .brand{
    gap:3px!important;
  }
  .brand .mark{
    font-size:11px!important;
  }
  .brand .regional-brand{
    font-size:8px!important;
  }
  .brand .brand-english{
    font-size:7px!important;
    letter-spacing:.08em!important;
  }
  .language-control select{
    width:68px!important;
    max-width:68px!important;
  }
  .account-button{
    max-width:44px!important;
    font-size:0!important;
  }
  .account-button::before{
    content:"♡";
    font-size:12px;
  }
}


/* v0.27.1 — Navigation gating and chart renderer normalization */

/* Destination-specific pre-Life-Map gate */
.destination-gate{
  width:min(720px,calc(100% - 24px));
  margin:clamp(42px,8vh,90px) auto 80px!important;
  padding:clamp(26px,4vw,48px)!important;
  text-align:center;
  border:1px solid rgba(242,198,109,.26);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(242,198,109,.08),transparent 38%),
    linear-gradient(180deg,rgba(12,42,78,.96),rgba(7,28,55,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.destination-gate-icon{
  width:58px;
  height:58px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(242,198,109,.32);
  border-radius:50%;
  color:var(--gold);
  font-size:25px;
  background:rgba(242,198,109,.06);
}
.destination-gate .eyebrow{
  margin-bottom:9px;
}
.destination-gate h2{
  margin:0 auto 12px;
  max-width:620px;
  font-size:clamp(29px,4vw,46px);
  line-height:1.08;
}
.destination-gate>p:not(.eyebrow){
  max-width:610px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.65;
  font-size:clamp(14px,1.6vw,17px);
}
.destination-gate .primary{
  margin-top:24px;
}

/* Navigation remains interactive before Life Map creation. */
.app-nav button.locked{
  opacity:1!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* One typography system for every primary navigation item. */
#appNav button[data-app-view]{
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  padding:9px 13px!important;
}
#appNav button[data-app-view].active{
  font-size:14px!important;
  font-weight:500!important;
}

/* Both chart renderers use one identical SVG canvas. */
.chart-focus-canvas>svg,
.chart-focus-canvas>.south-chart-svg{
  width:min(100%,620px)!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  display:block!important;
  margin:auto!important;
}
.south-chart-svg{
  color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(89,156,230,.12));
}
.south-svg-cell rect{
  fill:rgba(5,23,47,.24);
  stroke:currentColor;
  stroke-width:.34;
}
.south-svg-cell:hover rect,
.south-svg-cell:focus rect,
.south-svg-cell.chart-cell-active rect{
  fill:rgba(78,155,240,.12);
}
.south-svg-planet,
.north-cluster-item{
  pointer-events:none;
}
.south-svg-symbol{
  fill:var(--text);
  font-size:4.8px;
  font-family:ui-sans-serif,system-ui,sans-serif;
  dominant-baseline:middle;
}
.south-svg-short{
  fill:var(--text);
  font-size:3.6px;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
}
.south-svg-lagna{
  fill:var(--gold);
  font-size:3.4px;
  font-weight:800;
}
.south-svg-overflow{
  fill:var(--muted);
  font-size:2.7px;
}
.south-sign-number{
  text-anchor:start!important;
  font-size:2.8px!important;
}

/* North chart: vertically stack symbol and abbreviation per planet to avoid collisions. */
.north-cluster-symbol{
  fill:var(--text);
  font-size:5.2px!important;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  dominant-baseline:middle;
}
.north-cluster-short{
  fill:var(--text);
  font-size:3.4px!important;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
}
.north-cluster-item.compact .north-cluster-symbol{
  font-size:4.5px!important;
}
.north-cluster-item.compact .north-cluster-short{
  font-size:3px!important;
}
.north-cluster-item.dense .north-cluster-symbol{
  font-size:4px!important;
}
.north-cluster-item.dense .north-cluster-short{
  font-size:2.7px!important;
}
.north-cluster-halo{
  opacity:.34!important;
}

/* Mobile */
@media(max-width:700px){
  #appNav button[data-app-view],
  #appNav button[data-app-view].active{
    font-size:11px!important;
    font-weight:500!important;
    line-height:1.2!important;
    padding:8px 10px!important;
  }

  .destination-gate{
    width:calc(100% - 20px);
    margin:30px auto 50px!important;
    padding:28px 18px!important;
  }
  .destination-gate h2{
    font-size:clamp(28px,8vw,38px);
  }

  .chart-focus-canvas>svg,
  .chart-focus-canvas>.south-chart-svg{
    width:min(100%,430px)!important;
  }

  .north-cluster-symbol{
    font-size:4.8px!important;
  }
  .north-cluster-short{
    font-size:3.2px!important;
  }
  .south-svg-symbol{
    font-size:4.5px;
  }
  .south-svg-short{
    font-size:3.3px;
  }
}


/* v0.27.2 — Gated destination responsive hotfix and release stabilization */

/*
 * The original .nav-gate-message was a compact horizontal banner.
 * v0.27.1 reused that element for a full destination gate, so the old
 * flex/button rules leaked into the new experience. Reset the component
 * completely here rather than layering on partial overrides.
 */
#navGateMessage.destination-gate{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:1!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  justify-items:center!important;
  align-items:start!important;
  justify-content:stretch!important;

  width:min(680px,calc(100% - 32px))!important;
  max-width:680px!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;

  margin:clamp(44px,8vh,88px) auto 72px!important;
  padding:clamp(30px,4vw,48px)!important;
  gap:0!important;

  text-align:center!important;
  overflow:visible!important;
}

#navGateMessage.destination-gate.hidden{
  display:none!important;
}

#navGateMessage.destination-gate > *{
  position:static!important;
  float:none!important;
  clear:both!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-column:1!important;
  transform:none!important;
}

#navGateMessage .destination-gate-icon{
  display:grid!important;
  width:58px!important;
  height:58px!important;
  margin:0 auto 18px!important;
}

#navGateMessage #navGateEyebrow{
  display:block!important;
  width:auto!important;
  margin:0 auto 10px!important;
  color:var(--gold)!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.25!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

#navGateMessage #navGateTitle{
  display:block!important;
  width:100%!important;
  max-width:590px!important;
  margin:0 auto 14px!important;
  font-size:clamp(34px,4.2vw,50px)!important;
  font-weight:500!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-wrap:balance;
}

#navGateMessage #navGateBody{
  display:block!important;
  width:100%!important;
  max-width:560px!important;
  margin:0 auto!important;
  color:var(--muted)!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.65!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-wrap:pretty;
}

#navGateMessage #navGateCreate{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:190px!important;
  max-width:100%!important;
  min-height:46px!important;
  margin:26px auto 0!important;
  padding:12px 22px!important;
  border:0!important;
  border-radius:12px!important;
  background:var(--gold)!important;
  color:#07172d!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}

/* Make the nav typography deterministic even against older release rules. */
#appNav.app-nav button[data-app-view],
#appNav.app-nav button[data-app-view].active,
#appNav.app-nav button[data-app-view]::after{
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}

/* Preserve the normalized SVG chart frame regardless of older South-grid rules. */
#kundliChart.chart-focus-canvas > svg{
  width:min(100%,620px)!important;
  max-width:620px!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  display:block!important;
  margin:auto!important;
}

/* Responsive gate: always one vertical reading flow. */
@media(max-width:700px){
  #navGateMessage.destination-gate{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:calc(100% - 20px)!important;
    max-width:560px!important;
    margin:24px auto 44px!important;
    padding:28px 20px 30px!important;
    border-radius:20px!important;
  }

  #navGateMessage .destination-gate-icon{
    width:52px!important;
    height:52px!important;
    margin-bottom:16px!important;
    font-size:22px!important;
  }

  #navGateMessage #navGateEyebrow{
    max-width:100%!important;
    margin-bottom:9px!important;
    font-size:9px!important;
    letter-spacing:.14em!important;
  }

  #navGateMessage #navGateTitle{
    max-width:430px!important;
    margin-bottom:13px!important;
    font-size:clamp(29px,8.4vw,40px)!important;
    line-height:1.09!important;
  }

  #navGateMessage #navGateBody{
    max-width:430px!important;
    font-size:15px!important;
    line-height:1.58!important;
  }

  #navGateMessage #navGateCreate{
    width:min(100%,300px)!important;
    min-width:0!important;
    min-height:48px!important;
    margin-top:23px!important;
    padding:13px 18px!important;
    font-size:14px!important;
  }

  #appNav.app-nav button[data-app-view],
  #appNav.app-nav button[data-app-view].active,
  #appNav.app-nav button[data-app-view]::after{
    font-size:11px!important;
    font-weight:500!important;
    line-height:1.2!important;
  }

  #kundliChart.chart-focus-canvas > svg{
    width:min(100%,430px)!important;
    max-width:430px!important;
  }
}

@media(max-width:380px){
  #navGateMessage.destination-gate{
    width:calc(100% - 16px)!important;
    padding:24px 16px 26px!important;
  }

  #navGateMessage #navGateTitle{
    font-size:clamp(27px,8.8vw,35px)!important;
  }

  #navGateMessage #navGateBody{
    font-size:14px!important;
  }
}


/* v0.28 — UI stabilization: density-aware charts, iOS form focus, localization */

/* ---------------- Density-aware chart rendering ----------------
   Normal houses keep the spacious treatment. Crowded houses compact
   deterministically into a 2x2 or 3x3 placement grid. */
.kundli-chart svg .chart-node,
.kundli-chart svg .chart-placement{
  outline:none!important;
}
.kundli-chart svg .chart-node:focus{
  outline:none!important;
}
.kundli-chart svg .chart-cell-active{
  background:none!important;
  box-shadow:none!important;
}

/* Selection stays inside the chart geometry rather than creating an escaping bubble. */
.south-svg-cell.chart-cell-active rect{
  fill:rgba(78,155,240,.16)!important;
  stroke:var(--gold)!important;
  stroke-width:.72!important;
}
.south-svg-cell.chart-cell-active .south-svg-symbol,
.south-svg-cell.chart-cell-active .south-svg-short,
.north-house-node.chart-cell-active .north-cluster-symbol,
.north-house-node.chart-cell-active .north-cluster-short{
  fill:var(--gold)!important;
}

/* Remove legacy cluster halos: the house/cell itself is now the interaction target. */
.north-cluster-halo{
  display:none!important;
}

/* Consistent symbol/name pairing. */
.chart-placement .north-cluster-symbol,
.chart-placement .south-svg-symbol{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:600!important;
}
.chart-placement .north-cluster-short,
.chart-placement .south-svg-short{
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-weight:800!important;
}

/* Density tiers shared by North and South renderers. */
.chart-placement.compact .north-cluster-symbol,
.chart-placement.compact .south-svg-symbol{
  font-size:4.1px!important;
}
.chart-placement.compact .north-cluster-short,
.chart-placement.compact .south-svg-short{
  font-size:2.8px!important;
}

.chart-placement.dense .north-cluster-symbol,
.chart-placement.dense .south-svg-symbol{
  font-size:3.5px!important;
}
.chart-placement.dense .north-cluster-short,
.chart-placement.dense .south-svg-short{
  font-size:2.35px!important;
}

.chart-placement.ultra-dense .north-cluster-symbol,
.chart-placement.ultra-dense .south-svg-symbol{
  font-size:3px!important;
}
.chart-placement.ultra-dense .north-cluster-short,
.chart-placement.ultra-dense .south-svg-short{
  font-size:2px!important;
}

/* Crowded cells emphasize readability over decorative scale. */
.south-svg-cell.density-5 .south-svg-planet,
.south-svg-cell.density-6 .south-svg-planet,
.south-svg-cell.density-7 .south-svg-planet,
.south-svg-cell.density-8 .south-svg-planet,
.south-svg-cell.density-9 .south-svg-planet{
  filter:none!important;
}

/* ---------------- iOS / WebKit form focus stabilization ----------------
   iOS auto-zooms focused controls whose computed font size is below 16px.
   Keep user zoom available; prevent the trigger instead of disabling scaling. */
@media(max-width:700px){
  input,
  textarea,
  select,
  #birthForm input,
  #birthForm textarea,
  #birthForm select,
  .composer textarea,
  .modal input,
  .modal textarea,
  .modal select{
    font-size:16px!important;
    line-height:1.35!important;
    transform:none!important;
  }

  input::placeholder,
  textarea::placeholder{
    font-size:16px!important;
    line-height:inherit!important;
  }

  input:focus,
  textarea:focus,
  select:focus{
    transform:none!important;
  }

  /* Keep the page backdrop continuous below short gated/onboarding content. */
  html,
  body,
  #app,
  main{
    min-height:100%;
    background-color:#06172f;
  }
}

/* Slightly smaller dense-chart typography on very narrow phones. */
@media(max-width:380px){
  .chart-placement.compact .north-cluster-symbol,
  .chart-placement.compact .south-svg-symbol{
    font-size:3.8px!important;
  }
  .chart-placement.compact .north-cluster-short,
  .chart-placement.compact .south-svg-short{
    font-size:2.6px!important;
  }
  .chart-placement.dense .north-cluster-symbol,
  .chart-placement.dense .south-svg-symbol{
    font-size:3.2px!important;
  }
  .chart-placement.dense .north-cluster-short,
  .chart-placement.dense .south-svg-short{
    font-size:2.15px!important;
  }
}


/* v0.29 — Shared Journeys */

/* Full-width Shared Journeys workspace */
.shared-journey-workspace{
  width:min(1180px,100%);
  max-width:1180px!important;
  margin:0 auto 70px!important;
  padding:clamp(18px,2.5vw,30px)!important;
}
.shared-journey-workspace .shared-heading{
  align-items:flex-start;
}
.shared-journey-workspace .shared-heading h2{
  max-width:780px;
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
}
.shared-intro{
  max-width:820px;
  margin-top:8px;
  line-height:1.6;
}
.shared-journey-workspace .shared-preview{
  display:block;
  min-height:0;
  margin-top:22px;
  padding:0;
  border:0;
  background:transparent;
}

/* Secondary Life Map form */
.shared-profile-modal{
  width:min(760px,calc(100% - 28px));
  max-width:760px;
}
.shared-profile-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;
  margin-top:18px;
}
.shared-profile-form-grid label{
  min-width:0;
}
.field-error{
  margin:5px 0 14px;
  padding:9px 11px;
  border-left:3px solid #e18e7a;
  border-radius:0 8px 8px 0;
  background:rgba(225,142,122,.08);
  color:#efb6aa;
  font-size:11px;
}

/* Empty / loading */
.shared-empty-action{
  min-height:280px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  padding:34px 24px;
  border:1px dashed rgba(242,198,109,.22);
  border-radius:18px;
  text-align:center;
  background:rgba(255,255,255,.015);
}
.shared-empty-action>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gold);
  background:var(--gold-soft);
  font-size:22px;
}
.shared-empty-action p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.shared-empty-action .primary{
  margin-top:6px;
}
.shared-loading{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  color:var(--muted);
}
.shared-loading span{
  color:var(--gold);
  font-size:30px;
  animation:sharedPulse 1.4s ease-in-out infinite;
}
@keyframes sharedPulse{50%{opacity:.35;transform:scale(.92)}}

/* Profile pair */
.shared-profile-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.shared-profile-pair{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.shared-profile-pair .journey-profile{
  min-width:190px;
  background:rgba(255,255,255,.022);
}
.shared-link-symbol{
  color:var(--gold);
  font-size:22px;
}
.shared-profile-actions{
  display:flex;
  gap:8px;
}

/* Combined Journey Rhythm */
.shared-rhythm-card,
.shared-timelines-card,
.shared-moment-card{
  border:1px solid rgba(126,180,255,.13);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(8,32,63,.78),rgba(5,22,45,.82));
}
.shared-rhythm-card{
  padding:clamp(16px,2.2vw,24px);
}
.shared-rhythm-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
}
.shared-rhythm-heading h3{
  margin-top:2px;
  font-size:clamp(23px,2.4vw,32px);
}
.shared-rhythm-heading>div:first-child>p:last-child{
  max-width:720px;
  margin:8px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.shared-rhythm-legend{
  flex:0 0 auto;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:9px;
  color:var(--muted);
}
.shared-rhythm-legend span{
  display:flex;
  align-items:center;
  gap:5px;
}
.shared-rhythm-legend i{
  width:18px;
  height:3px;
  border-radius:999px;
}
.legend-you{background:#7eb4ff}
.legend-other{background:#bd9be8}
.legend-combined{background:var(--gold)}
.shared-rhythm-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  margin-top:16px;
  border-radius:14px;
  background:rgba(2,14,30,.28);
}
.shared-rhythm-svg{
  display:block;
  width:100%;
  min-width:760px;
  height:auto;
}
.rhythm-grid{
  stroke:rgba(126,180,255,.08);
  stroke-width:1;
}
.rhythm-zero{
  stroke:rgba(255,255,255,.15);
  stroke-width:1;
  stroke-dasharray:6 6;
}
.rhythm-line{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rhythm-you{
  stroke:#7eb4ff;
  stroke-width:2.3;
  opacity:.78;
}
.rhythm-other{
  stroke:#bd9be8;
  stroke-width:2.3;
  opacity:.78;
}
.rhythm-combined{
  stroke:var(--gold);
  stroke-width:4;
  filter:drop-shadow(0 0 5px rgba(242,198,109,.22));
}
.rhythm-point{
  fill:#071c37;
  stroke:var(--gold);
  stroke-width:2;
  cursor:pointer;
}
.rhythm-point.selected{
  fill:var(--gold);
  stroke:#fff3d2;
}
.rhythm-selected-year{
  stroke:rgba(242,198,109,.45);
  stroke-width:1;
  stroke-dasharray:4 4;
}
.rhythm-year,
.rhythm-axis-label{
  fill:var(--muted);
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:10px;
}
.rhythm-year.today{
  fill:var(--gold);
  font-weight:800;
}
.rhythm-axis-label{
  font-size:8px;
  letter-spacing:.1em;
}
.shared-rhythm-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(242,198,109,.055);
}
.shared-rhythm-summary strong{
  color:var(--gold);
}
.shared-rhythm-summary span{
  color:var(--muted);
  font-size:10px;
}

/* Synchronized Life Maps */
.shared-timelines-card{
  margin-top:16px;
  padding:20px;
}
.shared-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:18px;
}
.shared-section-heading h3{
  font-size:22px;
}
.shared-section-heading>span{
  color:var(--muted);
  font-size:10px;
}
.shared-track-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin:13px 0;
}
.shared-track-label strong,
.shared-track-label small{
  display:block;
}
.shared-track-label small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.shared-track{
  position:relative;
  height:46px;
  overflow:hidden;
  border:1px solid rgba(126,180,255,.11);
  border-radius:12px;
  background:rgba(2,14,30,.32);
}
.shared-track-segment{
  position:absolute;
  top:0;
  bottom:0;
  display:grid;
  place-items:center;
  border-right:1px solid rgba(5,18,38,.45);
  overflow:hidden;
}
.shared-track-segment span{
  padding:0 5px;
  color:rgba(255,255,255,.9);
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}
.shared-track-selected{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:var(--gold);
  box-shadow:0 0 9px rgba(242,198,109,.8);
}

/* Selected shared year */
.shared-moment-card{
  margin-top:16px;
  padding:20px;
}
.shared-moment-heading{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.shared-moment-heading h3{
  font-size:32px;
  color:var(--gold);
}
.shared-moment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.shared-moment-grid article{
  padding:16px;
  border:1px solid rgba(126,180,255,.11);
  border-radius:14px;
  background:rgba(255,255,255,.022);
}
.shared-moment-grid small,
.shared-moment-grid strong,
.shared-moment-grid span{
  display:block;
}
.shared-moment-grid small{
  color:var(--muted);
  font-size:8px;
  letter-spacing:.12em;
}
.shared-moment-grid strong{
  margin-top:7px;
  font-size:18px;
}
.shared-moment-grid span{
  margin-top:5px;
  color:var(--gold);
  font-size:10px;
}
.shared-moment-actions{
  margin-top:14px;
}
.shared-method-note{
  margin:14px 4px 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}

/* Final close-out: remove accidental North chart polygon from v0.28. */
.north-house-hit{
  display:none!important;
}

@media(max-width:700px){
  .shared-journey-workspace{
    padding:14px!important;
  }
  .shared-journey-workspace .shared-heading{
    display:block!important;
  }
  .shared-journey-workspace .shared-heading .secondary{
    width:100%;
    margin-top:14px;
  }
  .shared-profile-form-grid{
    grid-template-columns:1fr;
  }
  .shared-profile-bar,
  .shared-rhythm-heading,
  .shared-rhythm-summary,
  .shared-section-heading{
    display:block;
  }
  .shared-profile-actions{
    margin-top:10px;
  }
  .shared-profile-pair{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    width:100%;
  }
  .shared-profile-pair .journey-profile{
    min-width:0;
  }
  .shared-rhythm-legend{
    margin-top:12px;
  }
  .shared-rhythm-svg{
    min-width:700px;
  }
  .shared-rhythm-summary span{
    display:block;
    margin-top:4px;
  }
  .shared-timelines-card,
  .shared-moment-card{
    padding:14px;
  }
  .shared-track-row{
    grid-template-columns:1fr;
    gap:7px;
  }
  .shared-track{
    height:42px;
  }
  .shared-moment-grid{
    grid-template-columns:1fr;
  }
  .shared-moment-actions .primary{
    width:100%;
  }
}

@media(max-width:390px){
  .shared-profile-pair{
    grid-template-columns:1fr;
  }
  .shared-link-symbol{
    justify-self:center;
  }
}


/* v0.30 — Shared Journeys expansion */

.optional-label{
  color:var(--muted);
  font-size:.72em;
  font-weight:400;
}

/* Range controls sit beside the graph legend without competing with the title. */
.shared-rhythm-tools{
  flex:0 0 auto;
  display:grid;
  justify-items:end;
  gap:12px;
}
.shared-range-selector{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(126,180,255,.15);
  border-radius:999px;
  background:rgba(2,14,30,.38);
}
.shared-range-selector button{
  min-height:32px;
  padding:6px 11px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  cursor:pointer;
}
.shared-range-selector button:hover{
  color:var(--text);
  background:rgba(255,255,255,.035);
}
.shared-range-selector button.active{
  color:#07172e;
  background:var(--gold);
  font-weight:800;
}

/* Explain the experimental graph without permanently occupying vertical space. */
.shared-how-read{
  margin-top:15px;
  border:1px solid rgba(242,198,109,.13);
  border-radius:13px;
  background:rgba(242,198,109,.035);
}
.shared-how-read summary{
  padding:11px 14px;
  color:var(--gold);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.shared-how-read summary::-webkit-details-marker{
  display:none;
}
.shared-how-read summary::after{
  content:'+';
  float:right;
  font-size:15px;
  font-weight:400;
}
.shared-how-read[open] summary::after{
  content:'−';
}
.shared-how-read>div{
  padding:0 14px 13px;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}
.shared-how-read p{
  margin:6px 0;
}
.shared-how-read strong{
  color:var(--text);
}

/* Long ranges scroll inside the graph only; the page never widens. */
.shared-rhythm-scroll{
  max-width:100%;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.shared-rhythm-svg{
  max-width:none;
}

/* Gender is context metadata only, so keep it visually understated. */
#birthGender,
#journeyProfileGender{
  color:var(--text);
}

@media(max-width:700px){
  .shared-rhythm-tools{
    width:100%;
    justify-items:start;
    margin-top:13px;
  }
  .shared-range-selector{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
  }
  .shared-range-selector button{
    flex:0 0 auto;
  }
  .shared-rhythm-legend{
    width:100%;
  }
}

@media(max-width:420px){
  .shared-range-selector button{
    padding-inline:9px;
    font-size:9px;
  }
}


/* v0.31 — Shared Journeys completion + mobile modal stabilization */

.required-label{
  display:inline-block;
  margin-left:6px;
  color:var(--gold);
  font-size:.72em;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* The Shared Journey profile editor owns its own vertical scroll.
   Do not depend on the page/body scroll while a fixed modal is open. */
#profileModal{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  align-items:flex-start;
  justify-items:center;
  padding-top:max(20px,env(safe-area-inset-top));
  padding-bottom:max(28px,env(safe-area-inset-bottom));
}
#profileModal .shared-profile-modal{
  flex:0 0 auto;
  margin:auto 0;
  overflow:visible;
}
#profileModal.hidden{
  display:none!important;
}

/* Long-range timeline segments remain useful as color bands without
   forcing unreadable planet text into very narrow periods. */
.shared-track-segment.compact span{
  display:none;
}
.shared-track-segment.compact{
  min-width:2px;
}
.shared-overview-note{
  max-width:520px;
  margin:5px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

@media(max-width:700px){
  #profileModal{
    display:block;
    padding:0;
    background:#07182f;
    backdrop-filter:none;
  }

  #profileModal .shared-profile-modal{
    width:100%;
    max-width:none;
    min-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:
      calc(28px + env(safe-area-inset-top))
      20px
      calc(48px + env(safe-area-inset-bottom));
  }

  #profileModal .modal-close{
    position:sticky;
    z-index:3;
    top:calc(8px + env(safe-area-inset-top));
    float:right;
    margin-top:-16px;
    margin-right:-8px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(3,15,31,.92);
  }

  #profileModal .shared-profile-form-grid{
    display:block;
  }

  #profileModal .shared-profile-form-grid label{
    display:block;
    margin-bottom:16px;
  }

  #profileModal input,
  #profileModal select,
  #profileModal textarea{
    width:100%;
    min-height:52px;
    font-size:16px!important;
  }

  #profileModal #saveJourneyProfileButton{
    width:100%;
    min-height:54px;
    margin-top:8px;
    margin-bottom:24px;
  }

  /* Keep enough breathing room above mobile browser chrome after the
     final field and action. */
  #profileModal .field-error{
    margin-bottom:12px;
  }

  .full-journey-overview .shared-track{
    height:34px;
  }
  .full-journey-overview .shared-track-segment span{
    display:none!important;
  }
}

@supports not (height:100dvh){
  @media(max-width:700px){
    #profileModal .shared-profile-modal{
      min-height:100vh;
    }
  }
}


/* v0.32 — Profile management and validation hardening */

.required-fields-note{
  margin:-4px 0 14px;
  color:var(--muted);
  font-size:10px;
}
.field-invalid{
  border-color:#e18e7a!important;
  box-shadow:0 0 0 2px rgba(225,142,122,.13)!important;
}
.profile-management-card{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.profile-management-copy{
  min-width:0;
}
.profile-management-copy strong,
.profile-management-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-edit-action{
  flex:0 0 auto;
  white-space:nowrap;
}
.shared-profile-pair .journey-profile{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.shared-profile-pair .journey-profile strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:700px){
  .profile-management-card{
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }
  .profile-edit-action{
    font-size:12px;
  }
  .shared-profile-pair .journey-profile{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
}


/* v0.33 — Primary profile editor + profile management completion */

.profile-editor-backdrop{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  align-items:flex-start;
  justify-items:center;
  padding-top:max(20px,env(safe-area-inset-top));
  padding-bottom:max(28px,env(safe-area-inset-bottom));
}
.profile-editor-backdrop.hidden{
  display:none!important;
}
.profile-editor-modal{
  width:min(760px,calc(100% - 28px));
  max-width:760px;
  flex:0 0 auto;
  margin:auto 0;
  overflow:visible;
}
.profile-editor-modal #savePrimaryProfileButton{
  margin-top:8px;
}
.primary-profile-modal-open,
.primary-profile-modal-open body{
  overscroll-behavior:none;
}

@media(max-width:700px){
  #primaryProfileModal{
    display:block;
    padding:0;
    background:#07182f;
    backdrop-filter:none;
  }
  #primaryProfileModal .profile-editor-modal{
    width:100%;
    max-width:none;
    min-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:
      calc(28px + env(safe-area-inset-top))
      20px
      calc(48px + env(safe-area-inset-bottom));
  }
  #primaryProfileModal .modal-close{
    position:sticky;
    z-index:3;
    top:calc(8px + env(safe-area-inset-top));
    float:right;
    margin-top:-16px;
    margin-right:-8px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(3,15,31,.92);
  }
  #primaryProfileModal .shared-profile-form-grid{
    display:block;
  }
  #primaryProfileModal .shared-profile-form-grid label{
    display:block;
    margin-bottom:16px;
  }
  #primaryProfileModal input,
  #primaryProfileModal select,
  #primaryProfileModal textarea{
    width:100%;
    min-height:52px;
    font-size:16px!important;
  }
  #primaryProfileModal #savePrimaryProfileButton{
    width:100%;
    min-height:54px;
    margin-top:8px;
    margin-bottom:24px;
  }
}

@supports not (height:100dvh){
  @media(max-width:700px){
    #primaryProfileModal .profile-editor-modal{
      min-height:100vh;
    }
  }
}


/* v0.34 — Localization, mobile polish and release readiness */

/* Earlier responsive rules hid the regional wordmark below 760px.
   Keep the selected regional identity visible on mobile as well. */
@media(max-width:760px){
  .brand .regional-brand:not(.hidden){
    display:inline-block!important;
  }
}

@media(max-width:430px){
  .brand{
    gap:4px!important;
  }
  .brand .mark{
    font-size:12px!important;
  }
  .brand .regional-brand:not(.hidden){
    display:inline-block!important;
    max-width:72px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:7px!important;
    letter-spacing:.03em!important;
  }
  .brand .brand-english{
    font-size:6.5px!important;
    letter-spacing:.08em!important;
  }
}

@media(max-width:380px){
  .brand .regional-brand:not(.hidden){
    display:inline-block!important;
    max-width:60px;
    font-size:6.5px!important;
  }
  .brand .brand-english{
    font-size:6px!important;
  }
}

/* Graceful account/auth feedback instead of native browser alerts. */
.app-notice{
  position:fixed;
  z-index:140;
  top:calc(var(--app-header-height,90px) + 14px);
  left:50%;
  width:min(520px,calc(100% - 28px));
  transform:translateX(-50%);
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(242,198,109,.34);
  border-radius:14px;
  background:rgba(5,25,49,.97);
  box-shadow:0 18px 55px rgba(0,0,0,.34);
}
.app-notice.hidden{
  display:none!important;
}
.app-notice>div{
  flex:1 1 auto;
  min-width:0;
}
.app-notice strong,
.app-notice span{
  display:block;
}
.app-notice strong{
  color:var(--gold);
  margin-bottom:4px;
  font-size:13px;
}
.app-notice span{
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.app-notice button{
  flex:0 0 auto;
  width:30px;
  height:30px;
  padding:0;
  border-radius:50%;
}

/* Leave breathing room below long Ask answers for the floating Ask action. */
body[data-app-view="ask"] #askPanel{
  padding-bottom:max(110px,calc(80px + env(safe-area-inset-bottom)))!important;
}
.answer{
  overflow-wrap:anywhere;
}

/* Long display names should truncate only where space is truly constrained. */
.shared-rhythm-legend span,
.shared-profile-pair strong,
.profile-management-copy strong{
  min-width:0;
}
.shared-rhythm-legend span{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:700px){
  .shared-rhythm-legend span{
    max-width:120px;
  }
}


/* v0.35 — Current priorities editor and RAG-facing status */
#priorityChips.priority-editing{
  padding:8px;
  border:1px dashed rgba(242,198,109,.28);
  border-radius:12px;
}
#priorityChips button{
  cursor:default;
}
#priorityChips.priority-editing button{
  cursor:pointer;
  opacity:.62;
}
#priorityChips.priority-editing button.active{
  opacity:1;
  border-color:rgba(242,198,109,.55);
  background:rgba(242,198,109,.12);
  color:var(--gold);
}
#status:not(:empty){
  margin-top:14px;
  padding:10px 12px;
  border-left:2px solid rgba(242,198,109,.45);
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}


/* v0.35.2 — Keep the submitted question visible with the reading. */
.ask-question-context{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid rgba(242,198,109,.18);
  border-radius:14px;
  background:rgba(242,198,109,.045);
}
.ask-question-context span{
  display:block;
  margin-bottom:5px;
  color:var(--gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ask-question-context strong{
  display:block;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}


/* v0.36.0 Trust & Identity */
.cookie-consent{position:fixed;left:18px;right:18px;bottom:18px;z-index:1000;display:flex;gap:24px;align-items:center;justify-content:space-between;max-width:980px;margin:auto;padding:18px 20px;background:#fff;border:1px solid rgba(60,45,37,.18);border-radius:16px;box-shadow:0 14px 44px rgba(45,32,25,.18)}
.cookie-consent p{margin:.35rem 0 0;max-width:680px}.cookie-actions{display:flex;gap:10px;flex-shrink:0}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(18px,4vw,60px);border-top:1px solid rgba(60,45,37,.12);font-size:.86rem}.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}.site-footer a{color:inherit}.user-menu{display:flex;align-items:center;gap:8px}.user-menu img{width:28px;height:28px;border-radius:50%}.user-menu-logout{border:0;background:transparent;text-decoration:underline;cursor:pointer}@media(max-width:700px){.cookie-consent,.site-footer{flex-direction:column;align-items:stretch}.cookie-actions{justify-content:flex-end}}


/* v0.36.1-cp2 — Intentional Google sign-in dialog. */
.auth-modal{z-index:180;}
.auth-dialog{
  width:min(460px,100%);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(126,180,255,.22);
  border-radius:24px;
  padding:32px;
  text-align:center;
  background:
    radial-gradient(circle at 85% 0%,rgba(84,151,232,.18),transparent 34%),
    linear-gradient(145deg,#0d294b,#07182e 70%);
  box-shadow:0 34px 110px rgba(0,0,0,.58);
}
.auth-dialog::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 40%);}
.auth-dialog>*{position:relative;z-index:1;}
.auth-brand-mark{font-family:Georgia,serif;color:var(--gold);font-size:24px;margin-bottom:12px;}
.auth-dialog h2{font-family:Georgia,serif;font-size:30px;margin:5px 0 10px;color:var(--text);}
.auth-dialog-copy{max-width:380px;margin:0 auto 18px;color:var(--muted);font-size:13px;line-height:1.65;}
.auth-trust-list{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.auth-trust-list span{border:1px solid rgba(126,180,255,.16);border-radius:999px;background:rgba(255,255,255,.035);padding:7px 10px;color:#b9cce3;font-size:10px;}
.google-signin-button{min-height:44px;width:min(360px,100%);margin:0 auto;display:flex;justify-content:center;align-items:center;}
.google-signin-button>div{margin:0 auto!important;}
.auth-status{min-height:20px;margin:10px 0 0;color:var(--gold);font-size:11px;}
.auth-legal{margin:10px auto 0;color:var(--muted);font-size:10px;line-height:1.5;}
.auth-legal a{color:#bcd7f5;}
.auth-modal-open{overflow:hidden;}
@media(max-width:600px){.auth-modal{padding:12px}.auth-dialog{padding:28px 18px 22px;border-radius:20px}.auth-dialog h2{font-size:25px}.auth-trust-list{gap:6px}.auth-trust-list span{font-size:9px;padding:6px 8px}}


/* v0.36.1-cp2.1 — launch-blocker account menu and reliable logout. */
.user-menu{position:relative;display:flex;align-items:center;}
.account-menu-shell{position:relative;}
.account-menu-button{display:flex;align-items:center;gap:9px;min-height:38px;max-width:250px;padding:4px 10px 4px 5px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--text);background:rgba(255,255,255,.035);cursor:pointer;}
.account-menu-button:hover,.account-menu-button:focus-visible{border-color:rgba(202,167,106,.42);background:rgba(255,255,255,.065);outline:none;}
.account-avatar{width:29px;height:29px;flex:0 0 29px;border-radius:50%;object-fit:cover;}
.account-avatar-fallback{display:grid;place-items:center;background:rgba(202,167,106,.24);color:#fff;font-weight:700;}
.account-menu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.account-menu-chevron{font-size:11px;color:var(--muted);}
.account-dropdown{position:absolute;z-index:220;top:calc(100% + 9px);right:0;width:min(280px,calc(100vw - 24px));overflow:hidden;border:1px solid rgba(126,180,255,.22);border-radius:15px;background:#0b1d35;box-shadow:0 18px 60px rgba(0,0,0,.52);}
.account-dropdown-identity{display:flex;flex-direction:column;gap:4px;padding:15px 16px 13px;border-bottom:1px solid rgba(255,255,255,.09);}
.account-dropdown-identity strong,.account-dropdown-identity span{overflow:hidden;text-overflow:ellipsis;}
.account-dropdown-identity strong{font-size:13px;}
.account-dropdown-identity span{color:var(--muted);font-size:11px;}
.account-dropdown-action{width:100%;padding:13px 16px;border:0;text-align:left;color:var(--text);background:transparent;cursor:pointer;}
.account-dropdown-action:hover,.account-dropdown-action:focus-visible{background:rgba(255,255,255,.07);outline:none;}
.account-dropdown-action:disabled{opacity:.55;cursor:wait;}
.account-dropdown-logout{color:#ffd0cc;}
.user-menu-logout{display:none!important;}
@media(max-width:700px){.account-menu-name{display:none}.account-menu-button{padding-right:7px}}

/* v0.37.0 launch footer */
.launch-footer{display:block!important;padding:46px max(24px,calc((100vw - 1180px)/2));border-top:1px solid rgba(126,180,255,.15);background:rgba(4,17,34,.78)}
.launch-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,.7fr);gap:34px;text-align:left}
.launch-footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.launch-footer-grid strong{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#eef5ff}
.launch-footer-grid a{text-decoration:none;color:#9fb2ca;font-size:12px}
.launch-footer-grid a:hover{color:#fff}
.launch-footer-brand strong{font-family:Georgia,serif;color:#f2c76b;font-size:15px;letter-spacing:.08em}
.launch-footer-brand p{color:#91a6bf;max-width:360px;font-size:12px;margin:4px 0 0}
.launch-footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(126,180,255,.12);margin-top:30px;padding-top:18px;color:#7f94ad;font-size:10px}
@media(max-width:800px){.launch-footer-grid{grid-template-columns:1fr 1fr}.launch-footer-brand{grid-column:1/-1}.launch-footer-bottom{flex-direction:column}}
@media(max-width:520px){.launch-footer-grid{grid-template-columns:1fr}}


/* v0.38.0 production experience */
:focus-visible{outline:3px solid rgba(242,199,107,.9)!important;outline-offset:3px!important}
button,a,input,select,textarea{scroll-margin:90px}
button:not(:disabled),a[href]{touch-action:manipulation}
.privacy-banner{left:24px!important;right:24px!important;bottom:20px!important;max-width:1160px!important;margin:auto!important;display:flex!important;align-items:center;justify-content:space-between;gap:28px;padding:20px 22px!important;border:1px solid rgba(125,181,244,.26)!important;border-radius:20px!important;background:rgba(5,22,43,.96)!important;box-shadow:0 28px 90px rgba(0,0,0,.45)!important;backdrop-filter:blur(18px);z-index:150}
.privacy-banner.hidden{display:none!important}.privacy-banner-copy{display:flex;gap:15px;align-items:flex-start;max-width:760px}.privacy-banner-copy strong{font-family:Georgia,serif;font-size:20px}.privacy-banner-copy p{margin:4px 0 5px;color:#b9c9dc;font-size:13px;line-height:1.55}.privacy-banner-copy a{color:#d6e9ff;font-size:12px}.privacy-banner-icon{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:rgba(242,199,107,.12);color:#f2c76b}
.cookie-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.production-modal{position:relative;width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid rgba(126,181,244,.22);border-radius:24px;padding:30px;background:linear-gradient(155deg,rgba(11,39,73,.98),rgba(5,21,42,.99));box-shadow:0 34px 120px rgba(0,0,0,.55)}
.production-modal h2{font-family:Georgia,serif;font-weight:500;font-size:30px;margin:4px 0 10px}.production-modal label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#c7d5e7}.production-modal input,.production-modal select,.production-modal textarea{width:100%;border:1px solid rgba(125,181,244,.19);border-radius:12px;background:rgba(255,255,255,.045);color:#eef5ff;padding:11px 12px;font:inherit}.production-modal option{color:#111}.production-modal-actions{display:flex;justify-content:flex-end;margin-top:22px}
.preference-row{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:18px 0;border-top:1px solid rgba(125,181,244,.13)}.preference-row strong{display:block}.preference-row p{margin:4px 0 0;color:#9fb2ca;font-size:12px}.switch-label{display:flex!important;align-items:center;gap:8px;white-space:nowrap}.switch-label input{width:20px!important;height:20px}
.settings-account-card{display:flex;align-items:center;gap:14px;border:1px solid rgba(125,181,244,.16);border-radius:16px;padding:16px;background:rgba(255,255,255,.035);margin:18px 0}.settings-account-card p{margin:3px 0 0}.settings-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f2c76b,#d69352);color:#14233a;font-weight:800;font-size:20px;overflow:hidden;background-size:cover;background-position:center}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.settings-links{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid rgba(125,181,244,.13)}.settings-links a,.settings-link-button{display:flex;flex-direction:column;align-items:flex-start!important;width:100%;padding:14px 4px;border:0;border-bottom:1px solid rgba(125,181,244,.1);background:transparent;color:#eaf2fd;text-decoration:none;text-align:left}.settings-links small{color:#91a6bf;margin-top:3px}
.floating-feedback-button{position:fixed;right:20px;bottom:20px;z-index:95;border:1px solid rgba(242,199,107,.3);border-radius:999px;padding:10px 15px;background:rgba(7,30,57,.94);color:#f3f7fd;box-shadow:0 12px 38px rgba(0,0,0,.32);font-weight:700}.floating-feedback-button span{color:#f2c76b;margin-right:5px}.feedback-modal textarea{resize:vertical}.feedback-modal label+label{margin-top:14px}
.onboarding-tour{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(1,10,21,.78);backdrop-filter:blur(12px)}.onboarding-tour.hidden{display:none}.onboarding-card{position:relative;width:min(570px,100%);border:1px solid rgba(126,181,244,.25);border-radius:26px;padding:34px;background:linear-gradient(145deg,#0b2b50,#071a33);box-shadow:0 35px 120px rgba(0,0,0,.58)}.onboarding-card h2{font-family:Georgia,serif;font-weight:500;font-size:32px;margin:7px 0 10px}.onboarding-card p{color:#b9c9dc}.onboarding-progress{display:flex;align-items:center;gap:12px;margin-bottom:27px;color:#92a9c2;font-size:11px}.onboarding-progress>div{height:4px;flex:1;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.onboarding-progress i{display:block;height:100%;width:33.33%;background:#f2c76b;transition:width .25s}.onboarding-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
.loading-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:9px}.loading-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:skeleton-slide 1.35s infinite}@keyframes skeleton-slide{to{transform:translateX(100%)}}
.empty-state{border:1px dashed rgba(126,181,244,.25);border-radius:18px;padding:27px;text-align:center;background:rgba(255,255,255,.025)}.empty-state strong{display:block;font-family:Georgia,serif;font-size:20px}.empty-state p{color:#9fb2ca;max-width:480px;margin:7px auto 0}
@media(max-width:760px){.privacy-banner{align-items:stretch;flex-direction:column;left:12px!important;right:12px!important;bottom:12px!important}.cookie-actions{justify-content:stretch}.cookie-actions button{flex:1}.settings-grid{grid-template-columns:1fr}.floating-feedback-button{right:12px;bottom:12px}.production-modal{padding:25px 18px}.onboarding-card{padding:30px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}



/* ============================================================
   v0.43 React bridge — preserve approved MVP visual language
   ============================================================ */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
main.shell{min-height:70vh}
.topbar{position:relative;z-index:30}
.brand{color:inherit;text-decoration:none}
.brand-english{font-weight:700;letter-spacing:.18em;font-size:11px;color:var(--text)}
.react-account-menu{display:flex;gap:7px;align-items:center}
.account-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--border);background:var(--gold-soft);color:var(--gold);border-radius:999px;padding:8px 12px;font-size:11px;cursor:pointer}
.app-nav a{border:0;background:transparent;color:var(--muted);padding:9px 13px;border-radius:999px;text-decoration:none;font-size:12px}
.app-nav a:hover,.app-nav a:focus-visible{color:var(--text);background:rgba(255,255,255,.055)}
.app-nav a.nav-secondary{margin-left:8px;color:rgba(158,178,204,.82)}
.app-nav a.nav-secondary::before{content:"";display:inline-block;width:1px;height:16px;background:rgba(255,255,255,.10);margin-right:13px;vertical-align:middle}
.landing-status{margin-top:20px}
.react-landing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.react-landing-grid article{padding:18px;border:1px solid rgba(126,180,255,.14);border-radius:16px;background:rgba(8,29,58,.48)}
.react-landing-grid article>span{color:var(--gold);font-size:9px;letter-spacing:.16em}.react-landing-grid h3{font-size:20px;margin:9px 0}.react-landing-grid p{color:var(--muted);font-size:12px;line-height:1.6;margin:0}

/* React workspace */
#life-map{padding:26px 0 70px}
.experience-workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
.journey-console,.conversation-console,.chart-facts,.reading-response{border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(17,31,50,.94),rgba(10,20,34,.94));padding:22px;min-width:0}
.journey-console{grid-column:1}.conversation-console{grid-column:2}.chart-facts,.reading-response{grid-column:1/-1}
.console-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}.console-heading h2{font-size:28px}.console-heading p{color:var(--muted);font-size:12px;line-height:1.55;margin:6px 0 0}
.ready-chip{color:var(--success);border:1px solid rgba(159,214,180,.2);background:rgba(159,214,180,.06);border-radius:999px;padding:6px 9px;font-size:9px;white-space:nowrap}
.birth-form label{display:block;margin:12px 0}.birth-form label>span{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.console-actions,.ask-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}.quiet-note{color:var(--muted);font-size:10px;line-height:1.5}.ask-form textarea{min-height:210px}
.primary-button,.secondary-button,.ghost-button{border-radius:10px;cursor:pointer;transition:.2s ease}.primary-button{border:0;background:var(--gold);color:#11151b;padding:12px 17px;font-weight:700}.secondary-button{border:1px solid var(--border);background:var(--gold-soft);color:var(--text);padding:11px 15px}.ghost-button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:var(--muted);padding:11px 15px}.primary-button:hover,.secondary-button:hover,.ghost-button:hover{transform:translateY(-1px)}
.error-banner{grid-column:1/-1;border:1px solid rgba(239,178,170,.28);background:rgba(239,178,170,.07);color:var(--danger);padding:12px 14px;border-radius:12px}

/* Chart foundation */
.chart-facts{margin-top:18px}.map-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.map-heading h2{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:0 0 6px}.map-heading p{color:var(--muted);font-size:11px;margin:0}.current-period{border:1px solid var(--border);border-radius:14px;background:var(--gold-soft);padding:12px;display:grid;gap:4px;min-width:170px}.current-period small{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.11em}.current-period strong{color:var(--gold);font-family:Georgia,serif;font-weight:400}.current-period span{font-size:10px;color:var(--muted)}
.map-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.map-summary article{border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px;background:rgba(255,255,255,.02)}.map-summary article span{color:var(--gold);font-size:8px}.map-summary article p{margin:6px 0 0;font-size:11px;line-height:1.5;color:#d8e0e9}
.planetary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.planet-card,.ascendant-card{border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px;background:rgba(255,255,255,.02);display:flex;gap:9px;align-items:center}.ascendant-card{display:grid}.planet-glyph{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);flex:0 0 30px}.planet-card strong,.ascendant-card strong{display:block;font-family:Georgia,serif;font-weight:400}.planet-card span,.planet-card small,.ascendant-card span,.ascendant-card small{display:block;color:var(--muted);font-size:9px;margin-top:2px}

/* MVP hierarchical timeline preservation */
.overview-anchor{grid-column:1/-1;margin-top:18px;padding:22px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(17,31,50,.96),rgba(8,22,39,.96))}
.overview-anchor .dasha-row{height:64px}.overview-phase{position:relative;color:#fff!important}.overview-phase.active::before{content:"";position:absolute;top:7px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}.overview-phase span{font-size:10px}.overview-phase small{font-size:8px;color:rgba(255,255,255,.78)}
.future-event span{background:#7eb4ff!important;box-shadow:0 0 0 3px rgba(126,180,255,.15)!important}.future-event em{color:#bdd8f7!important}
.phase-expansion>*{position:relative;z-index:1}
.subperiod-stack{width:100%}.subperiod-segment{min-width:72px!important}

/* Generated reading */
.reading-response{margin-top:18px}.reading-response-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.reading-response-head h2{font-size:28px}.grounding-badge{display:flex;gap:8px;align-items:center;border:1px solid rgba(126,180,255,.14);background:rgba(8,29,58,.45);padding:9px 11px;border-radius:12px}.grounding-badge>span{color:var(--gold)}.grounding-badge strong{display:block;font-size:10px}.grounding-badge small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.question-echo{margin:16px 0;padding:12px 14px;border-left:2px solid var(--gold);background:rgba(202,167,106,.05);font-family:Georgia,serif;color:#dfe6ee}.answer-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:10px}.answer-actions button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text);padding:7px 10px;border-radius:999px;cursor:pointer}.source-disclosure{margin-top:18px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px}.source-disclosure summary{color:var(--gold);cursor:pointer;font-size:11px}.source-grid{display:grid;gap:8px;margin-top:10px}.source-grid article{border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px;background:rgba(255,255,255,.02)}

/* General pages */
.content-page,.center-page{width:min(1080px,94vw);margin:0 auto;padding:58px 0 80px}.narrow-page{max-width:760px}.content-page h1,.center-page h1{font-family:Georgia,serif;font-size:46px;font-weight:400;margin:0 0 18px}.content-page>p,.center-page p{color:var(--muted);line-height:1.7}.prose{color:#cbd5df;line-height:1.8}.profile-form{max-width:650px}.reading-list{display:grid;gap:12px;margin-top:22px}.reading-card{border:1px solid var(--border);background:rgba(17,31,50,.86);border-radius:16px;padding:18px}.reading-card h2{font-size:21px}.reading-card p{color:#ccd4de;line-height:1.7}.auth-card{max-width:520px;margin:40px auto;border:1px solid var(--border);background:rgba(17,31,50,.94);border-radius:20px;padding:28px}

.react-footer{width:min(1500px,94vw);margin:20px auto 0}.react-footer .footer-links{display:flex;gap:12px;flex-wrap:wrap}.react-footer a{color:var(--muted);text-decoration:none}.react-footer a:hover{color:var(--gold)}.footer-brand-old{margin-bottom:8px}

@media(max-width:980px){.react-landing-grid{grid-template-columns:1fr 1fr}.experience-workspace{grid-template-columns:1fr}.journey-console,.conversation-console{grid-column:1}.planetary-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.topbar{align-items:flex-start}.topbar-actions{width:100%;flex-wrap:wrap}.privacy-pill{display:none}.language-control span{display:none}.app-nav{justify-content:flex-start;overflow-x:auto}.react-landing-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}.map-heading,.reading-response-head{flex-direction:column}.planetary-grid,.map-summary{grid-template-columns:1fr 1fr}.overview-anchor{padding:15px}.phase-expansion{padding:15px}.subperiod-stack{min-width:820px}.react-footer{flex-direction:column;align-items:flex-start}}


/* Secondary product areas carried into the approved MVP visual system */
.journey-columns,.together-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.journey-panel,.chart-detail-card{padding:24px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(17,31,50,.94),rgba(10,20,34,.94))}.panel-heading h2{margin:0 0 8px;font-family:Georgia,serif;font-weight:400}.panel-heading p{color:var(--muted);font-size:12px;line-height:1.6}.journey-form{margin-top:20px}.journey-list,.people-list{display:grid;gap:10px;margin-top:20px}.journey-list article,.people-list article{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(7,16,29,.35)}.journey-list strong,.journey-list small,.people-list strong,.people-list span{display:block}.journey-list small,.people-list span{color:var(--muted);font-size:9px;margin-bottom:4px}.journey-list p{color:var(--muted);font-size:11px;margin:6px 0 0}.journey-list article>button,.people-list article>button{border:0;background:transparent;color:var(--muted);cursor:pointer}.soft-note{padding:12px 14px;border:1px solid rgba(126,180,255,.13);border-radius:12px;background:rgba(8,29,58,.42);color:var(--muted);font-size:11px;line-height:1.6}
.charts-explorer{display:grid;gap:18px}.chart-overview{display:grid;grid-template-columns:.65fr 1.35fr;gap:34px;padding:28px;background:rgba(13,24,40,.76);border:1px solid var(--border);border-radius:16px}.chart-copy h2{font-size:36px;margin:0 0 10px;font-family:Georgia,serif;font-weight:400}.chart-copy>p{color:var(--muted)}.chart-summary-pills{display:grid;gap:8px;margin-top:22px}.chart-summary-pills span{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#d9e1ea;font-size:11px}.rasi-chart{min-height:540px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1px;background:rgba(202,167,106,.2);border:1px solid var(--border);position:relative}.house-cell{border:0;background:#0b1727;color:var(--text);padding:10px;text-align:left;cursor:pointer}.house-cell:hover,.house-cell.selected{background:#12243a}.house-cell small{color:var(--muted);font-size:9px}.house-cell div{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.house-cell div span{color:var(--gold);font-size:18px}.house-1{grid-column:2;grid-row:1}.house-2{grid-column:3;grid-row:1}.house-3{grid-column:4;grid-row:1}.house-4{grid-column:4;grid-row:2}.house-5{grid-column:4;grid-row:3}.house-6{grid-column:4;grid-row:4}.house-7{grid-column:3;grid-row:4}.house-8{grid-column:2;grid-row:4}.house-9{grid-column:1;grid-row:4}.house-10{grid-column:1;grid-row:3}.house-11{grid-column:1;grid-row:2}.house-12{grid-column:1;grid-row:1}.chart-center{grid-column:2/4;grid-row:2/4;background:#07101d;display:grid;place-items:center;align-content:center;border:1px solid var(--border)}.chart-center small,.chart-center span{color:var(--muted);font-size:10px}.chart-center strong{font-family:Georgia,serif;color:var(--gold);font-size:34px;font-weight:400;margin:7px 0}.chart-detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.chart-planet-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}.chart-planet-row b{color:var(--gold);font-size:22px}.chart-planet-row strong,.chart-planet-row span{display:block}.chart-planet-row span{margin-top:3px;color:var(--muted);font-size:10px}.compact-planet-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.compact-planet-list span{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:9px;color:var(--muted);font-size:9px}.compact-planet-list b{display:block;color:var(--text);font-size:10px;margin-bottom:4px}
.shared-journey-explainer{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;padding:28px;margin-bottom:18px;border:1px solid var(--border);border-radius:16px;background:rgba(13,24,40,.76)}.shared-journey-explainer h2{font-size:34px;font-family:Georgia,serif;font-weight:400}.shared-journey-explainer p{color:#c8d1dc;line-height:1.7}.shared-preview{min-height:220px;position:relative;display:grid;align-content:center;gap:36px}.shared-line{height:2px;position:relative;background:linear-gradient(90deg,transparent,#6c91c7 15%,#6c91c7 85%,transparent)}.line-b{background:linear-gradient(90deg,transparent,#caa76a 15%,#caa76a 85%,transparent)}.shared-line span,.shared-line i,.shared-line b{position:absolute;top:-5px;width:11px;height:11px;border-radius:50%;background:currentColor}.shared-line span{left:18%}.shared-line i{left:52%}.shared-line b{left:78%}.line-a{color:#6c91c7}.line-b{color:#caa76a}.shared-now{position:absolute;left:54%;top:30px;bottom:30px;width:1px;background:rgba(245,239,225,.5);color:#d7dfeb;font-size:8px;padding-top:4px}.person-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--border);color:var(--gold);flex:0 0 auto}.muted-copy{color:var(--muted);font-size:12px}
@media(max-width:980px){.journey-columns,.together-grid,.chart-overview,.chart-detail-grid,.shared-journey-explainer{grid-template-columns:1fr}}@media(max-width:700px){.rasi-chart{min-height:390px}.compact-planet-list{grid-template-columns:1fr 1fr}}


/* ========================================================================
   v0.44 — MVP fidelity reset
   The approved MVP is the visual source of truth. Do not redesign these
   primitives without an explicit product decision.
   ======================================================================== */

.regional-brand{
  color:var(--gold);
  font-size:13px;
  font-weight:700;
  margin-left:5px;
  letter-spacing:.02em;
}

/* Home introduces the product. Life Map is a separate application surface. */
.life-map-page,
.ask-page{
  padding-top:26px;
}

/* The Life Map is a vertical journey, never a two-column dashboard. */
.life-map-experience,
.ask-experience{
  display:block;
  width:100%;
}
.birth-coordinates-panel{
  width:min(100%,1050px);
  margin:0 auto 22px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(17,31,50,.94),rgba(10,20,34,.94));
  padding:20px 22px;
}
.compact-birth-form{
  display:grid;
  grid-template-columns:minmax(150px,.75fr) minmax(280px,1fr) minmax(220px,1fr);
  gap:10px 14px;
  align-items:end;
}
.compact-birth-form .field-row{margin:0}
.compact-birth-form>label,
.compact-birth-form .field-row label{margin:0}
.compact-birth-form .console-actions{
  grid-column:1/-1;
  margin-top:2px;
}
.life-map-empty-state{
  width:min(100%,1050px);
  margin:24px auto 70px;
  border:1px dashed rgba(126,180,255,.22);
  border-radius:18px;
  padding:42px;
  text-align:center;
  background:rgba(8,25,48,.55);
}
.life-map-empty-state h2{
  margin:6px 0 10px;
  font-family:var(--serif);
  font-size:34px;
}
.life-map-empty-state p{
  max-width:650px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.7;
}

.life-map-only{
  width:min(100%,1180px);
  margin:0 auto 28px;
}

/* Every period retains its planet identity. Selection is a boundary/focus,
   not a reason to black out the rest of the timeline. */
.native-period,
.native-period:not(.selected),
.native-subperiod,
.native-subperiod:not(.selected){
  opacity:1!important;
  filter:none!important;
}
.native-period.selected{
  transform:none!important;
  outline:3px solid rgba(255,255,255,.94);
  outline-offset:2px;
  box-shadow:0 0 0 2px rgba(242,198,109,.82),0 12px 28px rgba(0,0,0,.30)!important;
  z-index:3;
}
.native-period.active:not(.selected){
  box-shadow:inset 0 0 0 2px var(--gold),0 0 18px rgba(242,198,109,.18)!important;
}
.native-subperiod.selected{
  transform:none!important;
  outline:3px solid rgba(255,255,255,.92)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 2px var(--phase-accent,var(--gold)),0 8px 22px rgba(0,0,0,.28)!important;
}
.native-timeline-track,
.native-subperiod-track{
  padding:3px;
}

/* Old MVP hierarchical relationship between levels. */
.phase-expansion{
  margin-top:0!important;
  padding:22px!important;
}
.phase-expansion-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.phase-expansion-header h3{
  margin:4px 0 6px;
  font-family:var(--serif);
  font-size:29px;
}
.phase-expansion-header p{
  color:var(--muted);
}
.inline-subperiod-detail{
  margin-top:15px;
  border:1px solid rgba(126,180,255,.14);
  border-radius:13px;
  padding:16px;
  background:rgba(4,17,35,.45);
}
.inline-subperiod-summary small{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:5px;
}
.inline-subperiod-summary span{
  color:var(--muted);
  font-size:10px;
}
.period-calendar-section{margin-top:14px}
.native-chip-scroll button.active{
  color:#07172d!important;
  background:var(--gold)!important;
  border-color:var(--gold)!important;
}
.native-month-track button.active{
  color:var(--text);
  border-color:var(--gold)!important;
  background:rgba(202,167,106,.15)!important;
  box-shadow:0 0 0 1px var(--gold),0 7px 18px rgba(0,0,0,.20)!important;
}

/* Ask is its own experience and inherits the map; it is not paired with the
   birth form in a dashboard grid. */
.ask-context-strip{
  width:min(100%,980px);
  margin:8px auto 16px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:16px 18px;
  border:1px solid rgba(126,180,255,.15);
  border-radius:14px;
  background:rgba(9,29,55,.72);
}
.ask-context-strip h2{
  margin:3px 0 5px;
  font-family:var(--serif);
  font-size:24px;
}
.ask-context-strip p{margin:0;color:var(--muted)}
.ask-only-console{
  width:min(100%,980px);
  margin:0 auto 22px;
}
.ask-only-console .ask-form textarea{
  min-height:240px;
}

/* Birth-chart summary uses plain user language. */
.birth-chart-summary{
  width:min(100%,1180px);
  margin:0 auto 60px;
}
.chart-summary-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Charts are anonymous-first. */
.anonymous-chart-entry{
  max-width:880px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(9,27,50,.78);
  padding:24px;
}
.anonymous-chart-entry h2{
  font-family:var(--serif);
  font-size:31px;
  margin:5px 0 8px;
}
.anonymous-chart-entry>div>p{
  color:var(--muted);
  line-height:1.6;
}
.chart-birth-form{
  margin-top:18px;
  max-width:720px;
}

/* Ensure CTA anchors look like buttons in the restored landing experience. */
a.primary,
a.secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* The approved original wordmark remains the brand. */
.brand .mark{
  font-family:Georgia,"Noto Serif Devanagari",serif;
  color:var(--gold);
}
.brand-english{
  letter-spacing:.12em;
}

/* Small-screen hierarchy retains color and scroll behavior. */
@media(max-width:800px){
  .compact-birth-form{grid-template-columns:1fr}
  .compact-birth-form .console-actions{grid-column:auto}
  .ask-context-strip{align-items:flex-start;flex-direction:column}
  .native-period,.native-period:not(.selected),
  .native-subperiod,.native-subperiod:not(.selected){opacity:1!important}
}

.app-nav a.active{
  color:var(--gold);
  border-bottom-color:var(--gold);
}

/* v0.45 interaction restoration: every planetary period keeps its identity;
   current/selected state is a boundary/marker, not a dimming treatment. */
.native-period,
.native-period:not(.selected),
.native-subperiod,
.native-subperiod:not(.selected){opacity:1!important;filter:none!important}
.native-period.selected,.native-subperiod.selected{outline:2px solid #f5d77b!important;outline-offset:-3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 1px rgba(245,215,123,.35),0 10px 26px rgba(0,0,0,.18)!important}

.scroll-strip{position:relative}
.scroll-strip .native-timeline-scroll{scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.scroll-strip .native-timeline-scroll::-webkit-scrollbar{display:none}
.native-period,.native-subperiod{scroll-snap-align:start}
.timeline-arrow{position:absolute;z-index:16;top:50%;transform:translateY(-50%);width:36px;height:54px;border-radius:18px;border:1px solid rgba(245,215,123,.55);background:rgba(4,15,31,.92);color:var(--gold);font:34px/1 Georgia,serif;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.timeline-arrow:hover{background:#102845}
.timeline-arrow-left{left:-18px}.timeline-arrow-right{right:-18px}
.period-current-line,.sub-current-line{position:absolute;top:-22px;bottom:-2px;width:1px;background:#ffe083;z-index:12;pointer-events:none}
.period-current-line b{position:absolute;top:-3px;left:50%;transform:translate(-50%,-100%);white-space:nowrap;border:1px solid rgba(245,215,123,.55);border-radius:999px;background:#0a1c31;color:#f5d77b;padding:3px 7px;font-size:7px;letter-spacing:.06em}
.period-current-line i,.sub-current-line i{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#ffe083;box-shadow:0 0 0 4px rgba(255,224,131,.18)}
.period-current-line em,.sub-current-line em{position:absolute;top:28px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#0b1b2e;padding:2px 5px;border-radius:3px;font-size:7px;font-style:normal;font-weight:800}
.sub-current-line{top:-10px;bottom:0}.sub-current-line i{top:10px}.sub-current-line em{top:20px}
.month-focus-card{margin-top:14px;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 16px;border:1px solid rgba(245,215,123,.28);border-radius:11px;background:linear-gradient(90deg,rgba(202,167,106,.12),rgba(9,29,55,.35))}
.month-focus-card small,.month-focus-card span,.month-focus-card em{display:block}.month-focus-card small{color:var(--gold);font-size:8px;letter-spacing:.1em}.month-focus-card strong{font-family:var(--serif);font-size:20px}.month-focus-card span{color:var(--text);font-size:11px}.month-focus-card em{color:var(--muted);font-size:9px;font-style:normal;margin-top:3px}

/* Chart Explorer: retain the current D1 visual layout while adding classical
   divisional and focused lenses. */
.chart-lens-tabs{display:flex;gap:7px;overflow-x:auto;padding:3px 0 6px;scrollbar-width:none}.chart-lens-tabs::-webkit-scrollbar{display:none}.chart-lens-tabs button{white-space:nowrap;border:1px solid rgba(126,180,255,.17);border-radius:999px;background:#0b1a2d;color:var(--muted);padding:9px 14px;cursor:pointer}.chart-lens-tabs button.active{border-color:var(--gold);background:rgba(202,167,106,.15);color:#f6dc9a}.chart-lens-overview{margin-top:2px}.lens-facts{display:grid;gap:7px;margin:18px 0}.lens-facts span{border-left:2px solid var(--gold);padding:6px 9px;background:rgba(202,167,106,.06);font-size:10px;color:#d7e0ea}.sade-sati-view{padding:28px;border:1px solid var(--border);border-radius:16px;background:rgba(13,24,40,.76)}.sade-sati-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.sade-sati-header h2{font:400 36px/1.1 var(--serif);margin:5px 0 8px}.sade-sati-header p{color:var(--muted)}.sade-status{border:1px solid rgba(126,180,255,.18);border-radius:999px;padding:8px 12px;color:var(--muted);white-space:nowrap}.sade-status.active{border-color:var(--gold);color:var(--gold);background:rgba(202,167,106,.1)}.sade-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.sade-summary article{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:10px}.sade-summary small,.sade-summary strong{display:block}.sade-summary small{color:var(--muted);font-size:9px}.sade-summary strong{font:400 22px var(--serif);color:#f3d28a;margin-top:5px}.sade-timeline{display:flex;overflow-x:auto;gap:8px;padding:10px 0;scroll-snap-type:x proximity}.sade-segment{min-width:210px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px;background:#0b1a2d;position:relative}.sade-segment span,.sade-segment strong,.sade-segment small{display:block}.sade-segment span{color:var(--gold);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.sade-segment strong{font:400 19px var(--serif);margin:7px 0}.sade-segment small{color:var(--muted)}.sade-segment.active{outline:2px solid var(--gold);background:rgba(202,167,106,.12)}.sade-segment b{display:inline-block;margin-top:10px;font-size:8px;color:#07172d;background:var(--gold);border-radius:999px;padding:4px 7px}

/* Shared Journeys restored as a full two-profile comparison flow. */
.together-profile-grid{align-items:start}.together-person-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-action-row{display:flex;gap:8px;align-items:center}.expanded-people-list article{align-items:center}.expanded-people-list article.selected{border-color:rgba(245,215,123,.45);background:rgba(202,167,106,.08)}.person-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(202,167,106,.14);color:var(--gold);font-family:var(--serif);font-size:18px;flex:0 0 auto}.person-summary{flex:1}.person-summary small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.person-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.person-actions button{border:1px solid rgba(126,180,255,.14)!important;border-radius:999px!important;padding:6px 9px!important;background:transparent!important;color:var(--muted)!important;font-size:9px!important}.person-actions .compare-button{border-color:rgba(245,215,123,.4)!important;color:var(--gold)!important}.comparison-experience{margin-top:18px;padding:24px;border:1px solid var(--border);border-radius:18px;background:rgba(9,27,50,.78)}.comparison-heading{display:flex;justify-content:space-between;gap:18px;align-items:center}.comparison-heading h2{font:400 32px var(--serif);margin:4px 0}.comparison-heading p{color:var(--muted)}.comparison-periods,.comparison-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.comparison-periods article,.comparison-facts article{padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:10px}.comparison-periods small,.comparison-facts small{display:block;color:var(--gold);font-size:8px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.comparison-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compare-chart-card{border:1px solid rgba(126,180,255,.14);border-radius:14px;padding:14px;background:rgba(4,16,30,.48)}.compare-chart-head small,.compare-chart-head strong,.compare-chart-head span{display:block}.compare-chart-head small{color:var(--gold);text-transform:uppercase;font-size:8px}.compare-chart-head strong{font:400 23px var(--serif);margin:4px 0}.compare-chart-head span{color:var(--muted);font-size:9px}.mini-rasi-chart{margin-top:12px;aspect-ratio:1.35;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1px;background:rgba(202,167,106,.17)}.mini-house{background:#0b1727;padding:5px;font-size:8px;color:var(--gold)}.mini-house small{display:block;color:var(--muted);font-size:6px}.mini-house-1{grid-column:2;grid-row:1}.mini-house-2{grid-column:3;grid-row:1}.mini-house-3{grid-column:4;grid-row:1}.mini-house-4{grid-column:4;grid-row:2}.mini-house-5{grid-column:4;grid-row:3}.mini-house-6{grid-column:4;grid-row:4}.mini-house-7{grid-column:3;grid-row:4}.mini-house-8{grid-column:2;grid-row:4}.mini-house-9{grid-column:1;grid-row:4}.mini-house-10{grid-column:1;grid-row:3}.mini-house-11{grid-column:1;grid-row:2}.mini-house-12{grid-column:1;grid-row:1}.mini-center{grid-column:2/4;grid-row:2/4;background:#07101d;display:grid;place-items:center;align-content:center;text-align:center}.mini-center strong{color:var(--gold);font:400 18px var(--serif)}.mini-center span{font-size:7px;color:var(--muted)}

@media(max-width:800px){
  .timeline-arrow{display:none}
  .scroll-strip .native-timeline-scroll{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .month-focus-card,.comparison-heading{align-items:flex-start;flex-direction:column}
  .sade-summary,.comparison-periods,.comparison-facts,.comparison-charts,.together-person-form .field-row{grid-template-columns:1fr}
}

/* v0.46 — Life Map current marker, activity layer, Shared Journey, traditional charts */
.period-activity-band,
.sub-activity-band {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  height: 4px;
  border-radius: 999px;
  z-index: 3;
  opacity: .9;
  pointer-events: none;
}
.activity-supportive { --activity-color: #55c69a; }
.activity-active { --activity-color: #d9ae4e; }
.activity-mixed { --activity-color: #8392ad; }
.activity-caution { --activity-color: #db805a; }
.activity-heightened-caution { --activity-color: #ad5664; }
.period-activity-band,
.sub-activity-band { background: var(--activity-color, #8392ad); box-shadow: 0 0 12px color-mix(in srgb, var(--activity-color, #8392ad) 55%, transparent); }
.period-current-line b {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #0c1d33;
  border: 1px solid rgba(225,181,84,.48);
  border-radius: 999px;
  padding: 3px 6px;
}
.period-current-line em { top: -17px !important; color: #fff !important; background: rgba(19,48,83,.94); border-radius: 999px; padding: 2px 5px; }

.shared-journey-workspace { display: grid; gap: 18px; }
.shared-range-selector { display: flex; flex-wrap: wrap; gap: 7px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: rgba(3,14,29,.35); width: fit-content; }
.shared-range-selector button { border: 0; border-radius: 8px; padding: 9px 14px; color: var(--muted); background: transparent; cursor: pointer; }
.shared-range-selector button.active { color: #071220; background: var(--gold); font-weight: 800; }
.shared-rhythm-card,.shared-synchronized-card,.shared-moment-card { border: 1px solid var(--border); border-radius: 16px; background: rgba(8,28,50,.68); padding: 18px; }
.shared-rhythm-title,.shared-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.shared-rhythm-title h3,.shared-section-heading h3,.comparison-secondary-heading h3,.shared-moment-card h3 { font-family: Georgia,serif; font-size: 25px; margin: 3px 0 5px; }
.shared-rhythm-title p,.comparison-secondary-heading p { margin: 0; color: var(--muted); max-width: 680px; }
.shared-rhythm-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.shared-rhythm-legend span::before { content:""; display:inline-block; width:14px; height:3px; border-radius:99px; margin-right:6px; vertical-align:middle; }
.legend-you::before { background:#65a9e8; }.legend-other::before { background:#aa75dc; }.legend-combined::before { background:#e6b854; }
.activity-scale { display:grid; grid-template-columns:repeat(5,1fr); margin:16px 58px 0; border-radius:8px; overflow:hidden; font-size:9px; text-align:center; color:#d8e0eb; }
.activity-scale span { padding:5px 3px; }.activity-scale span:nth-child(1){background:#26795e}.activity-scale span:nth-child(2){background:#8f742f}.activity-scale span:nth-child(3){background:#48566d}.activity-scale span:nth-child(4){background:#874a35}.activity-scale span:nth-child(5){background:#6d3340}
.shared-rhythm-scroll { overflow-x:auto; overflow-y:hidden; margin-top:8px; scrollbar-width:thin; }
.shared-rhythm-svg { min-width:100%; height:320px; display:block; }
.shared-rhythm-svg .rhythm-zero { stroke:rgba(255,255,255,.12); stroke-width:1; stroke-dasharray:4 6; }
.shared-rhythm-svg .rhythm-grid { stroke:rgba(255,255,255,.055); stroke-width:1; }
.rhythm-year { fill:#7f90a7; font-size:10px; }.rhythm-year.today { fill:#e6b854; font-weight:800; }
.rhythm-line { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }.rhythm-you{stroke:#65a9e8}.rhythm-other{stroke:#aa75dc}.rhythm-combined{stroke:#e6b854;stroke-width:4}
.rhythm-point { fill:#e6b854; stroke:#0c1d33; stroke-width:2; cursor:pointer; }.rhythm-point.selected { fill:#fff2c0; stroke:#e6b854; stroke-width:4; }
.rhythm-selected-year { stroke:#f7d981; stroke-width:1.3; stroke-dasharray:4 4; }
.shared-rhythm-summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; border-left:4px solid var(--activity-color,#8392ad); background:rgba(255,255,255,.035); color:var(--muted); }
.shared-rhythm-summary strong { color:var(--text); }
.shared-track-row { display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; margin-top:14px; }
.shared-track-label { color:var(--text); font-size:12px; }
.shared-track { position:relative; height:42px; border:1px solid rgba(255,255,255,.08); border-radius:9px; overflow:hidden; background:rgba(0,0,0,.14); }
.shared-track-segment { position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; color:white; font-size:9px; border-right:1px solid rgba(255,255,255,.15); overflow:hidden; }
.shared-track-selected { position:absolute; top:0; bottom:0; width:2px; background:#fff3bd; box-shadow:0 0 10px #e6b854; z-index:5; }
.shared-moment-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.shared-moment-grid article { padding:13px; border:1px solid var(--border); border-radius:10px; }.shared-moment-grid small { display:block; color:var(--gold); letter-spacing:.1em; font-size:9px; margin-bottom:7px; }
.comparison-secondary-heading { margin-top:10px; padding-top:18px; border-top:1px solid var(--border); }

.chart-style-selector { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 18px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(5,20,37,.5); }
.chart-style-selector > span { color:var(--gold); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.chart-style-selector > div { display:flex; gap:5px; }.chart-style-selector button { border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:8px 12px; background:transparent; color:var(--muted); cursor:pointer; }.chart-style-selector button.active { background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }.chart-style-selector small { color:var(--muted); }
.chart-render-area { min-width:0; display:grid; place-items:center; }
.traditional-chart { width:min(100%,680px); aspect-ratio:1; color:var(--gold); }
.south-indian-chart { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); border:1px solid rgba(214,174,91,.75); position:relative; }
.south-sign-cell { border:1px solid rgba(214,174,91,.48); padding:9px; position:relative; min-width:0; color:var(--text); }.south-sign-cell small { color:#8ea0b9; font-size:9px; display:block; }.south-sign-cell > div { font-size:20px; margin-top:9px; color:var(--gold); letter-spacing:4px; }.lagna-badge { position:absolute; top:7px; right:7px; font-size:8px; color:#081423; background:var(--gold); border-radius:999px; padding:3px 6px; }
.south-center { grid-area:2/2/4/4; border:1px solid rgba(214,174,91,.38); display:grid; place-items:center; align-content:center; gap:7px; background:rgba(1,10,21,.25); }.south-center span,.south-center small { color:var(--muted); font-size:10px; }.south-center strong { font-family:Georgia,serif;font-size:28px;color:var(--gold); }
.north-indian-chart svg { width:100%; height:100%; }.north-indian-chart rect,.north-indian-chart path { fill:rgba(3,15,29,.2); stroke:rgba(214,174,91,.65); stroke-width:1.4; }.north-house text { fill:#8598b2; font-size:12px; }.north-house .north-planets { fill:var(--gold); font-size:22px; }.north-house .north-asc { fill:#e9d49b; font-size:10px; }

@media(max-width:760px){.shared-rhythm-title,.shared-section-heading{display:grid}.activity-scale{margin-inline:0;font-size:8px}.shared-track-row{grid-template-columns:1fr}.shared-moment-grid{grid-template-columns:1fr}.chart-style-selector{align-items:flex-start}.chart-style-selector > div{overflow-x:auto;max-width:100%}.traditional-chart{width:100%}}
.life-activity-legend { display:flex; justify-content:flex-end; align-items:center; gap:7px; flex-wrap:wrap; margin:5px 2px 9px; color:var(--muted); font-size:8px; }
.life-activity-legend small { margin-right:4px; text-transform:uppercase; letter-spacing:.08em; }
.life-activity-legend span { display:inline-flex; align-items:center; gap:4px; }
.life-activity-legend span::before { content:""; width:12px; height:3px; border-radius:999px; background:var(--activity-color); }
@media(max-width:760px){.life-activity-legend{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;padding-bottom:3px}}

/* v0.47 visual intelligence: preserve planet identity; show condition as a separate continuous layer. */
.period-activity-band,.sub-activity-band{display:none!important}
.timeline-character-band{margin:8px 4px 4px;padding:8px 10px 7px;border:1px solid rgba(209,171,85,.13);border-radius:11px;background:rgba(5,19,35,.38)}
.timeline-character-gradient{height:9px;border-radius:999px;box-shadow:0 0 18px rgba(112,144,176,.12);position:relative;overflow:hidden}
.timeline-character-gradient::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 18%,transparent 82%,rgba(255,255,255,.08));mix-blend-mode:soft-light}
.timeline-character-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:6px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.timeline-character-scale span:nth-child(2),.timeline-character-scale span:nth-child(3),.timeline-character-scale span:nth-child(4){text-align:center}.timeline-character-scale span:last-child{text-align:right}
.antardasha-character-band{margin-top:10px}.antardasha-character-band small{display:block;margin-top:6px;color:var(--muted);font-size:9px}

.chart-condition-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 18px;padding:10px 14px;border:1px solid rgba(208,171,87,.16);border-radius:12px;background:rgba(5,20,37,.45);font-size:10px;color:var(--muted)}
.chart-condition-legend>span{color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.chart-condition-legend i{font-style:normal;display:flex;align-items:center;gap:5px}.chart-condition-legend i::before{content:"";width:18px;height:7px;border-radius:999px;background:var(--legend-color)}
.legend-supportive{--legend-color:#43b98a}.legend-active{--legend-color:#d8ae52}.legend-mixed{--legend-color:#7586a5}.legend-caution{--legend-color:#d17652}.legend-heightened{--legend-color:#9f4b5d}.chart-condition-legend small{margin-left:auto;max-width:390px;line-height:1.45}
.condition-chart .house-cell,.condition-chart .south-sign-cell{position:relative;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.condition-chart .house-cell:hover,.condition-chart .south-sign-cell:hover{transform:translateY(-1px);filter:brightness(1.08)}
.house-condition-dot{position:absolute;right:7px;bottom:7px;width:6px;height:6px;border-radius:50%;background:#7586a5;box-shadow:0 0 9px currentColor}.condition-supportive .house-condition-dot{background:#43b98a}.condition-active .house-condition-dot{background:#d8ae52}.condition-mixed .house-condition-dot{background:#7586a5}.condition-caution .house-condition-dot{background:#d17652}.condition-heightened-caution .house-condition-dot{background:#9f4b5d}
.south-sign-cell{border:0;appearance:none;color:inherit;text-align:left;cursor:pointer}.south-sign-cell.selected{outline:2px solid var(--gold);outline-offset:-2px;z-index:2}.north-house{cursor:pointer}.north-house.selected .north-condition-halo{stroke:var(--gold);stroke-width:3}.north-condition-halo{transition:opacity .2s ease,stroke .2s ease}.north-house:hover .north-condition-halo{opacity:.95}
.house-condition-explainer{margin:12px 0 16px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}.house-condition-explainer>strong{display:block;color:var(--gold);font-family:var(--serif);font-size:18px}.house-condition-explainer>span{display:block;margin:4px 0 10px;color:var(--muted);font-size:10px}.house-condition-explainer ul{margin:0 0 12px;padding-left:18px;color:#bfd0df;font-size:11px;line-height:1.55}.context-ask-link{display:inline-flex;color:var(--gold);font-weight:800;font-size:11px;text-decoration:none;border-bottom:1px solid rgba(211,173,86,.4)}
.sade-character-band{margin:18px 0;padding:13px;border:1px solid rgba(211,173,86,.16);border-radius:12px;background:rgba(5,19,35,.4)}.sade-character-band>span{display:block;margin-bottom:8px;color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.sade-character-band>div{height:11px;border-radius:999px}.sade-character-band>small{display:block;margin-top:7px;color:var(--muted);line-height:1.45}
.ask-context-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media(max-width:760px){.timeline-character-scale{font-size:7px;gap:3px}.chart-condition-legend small{margin-left:0;max-width:none}.chart-condition-legend{gap:8px}.house-condition-explainer{padding:12px}}

/* v0.48 — Life Focus */
.life-focus-panel{margin:18px 0 26px;padding:24px;border:1px solid rgba(202,167,106,.16);border-radius:22px;background:linear-gradient(145deg,rgba(20,35,55,.78),rgba(8,19,34,.88));box-shadow:0 20px 60px rgba(0,0,0,.18)}
.life-focus-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}.life-focus-heading h2{margin:5px 0 4px;font-family:var(--font-display,serif);font-size:30px}.life-focus-heading p,.life-focus-soft-note{color:var(--muted)}.life-focus-soft-note{max-width:310px;font-size:12px;line-height:1.6;text-align:right}
.life-focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.life-focus-card{display:block;min-height:174px;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025);text-decoration:none;color:var(--text);transition:.18s ease}.life-focus-card:hover{transform:translateY(-2px);border-color:rgba(202,167,106,.28);background:rgba(255,255,255,.04)}
.life-focus-card-top{display:flex;justify-content:space-between;align-items:center}.life-focus-icon{font-size:20px;color:var(--gold)}.focus-pill{text-transform:uppercase;letter-spacing:.12em;font-size:8px;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--muted)}.focus-pill.strong{color:#e8d4a7;border-color:rgba(202,167,106,.34);background:rgba(202,167,106,.08)}.focus-pill.moderate{color:#c7d5e4}.focus-pill.light{opacity:.75}
.life-focus-card h3{margin:14px 0 4px;font-size:17px}.life-focus-card strong{font-size:12px;font-weight:600;color:#cbd8e5}.life-focus-card p{margin:11px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.life-focus-explore{display:block;margin-top:12px;color:var(--gold);font-size:10px}.life-focus-foot{display:flex;justify-content:space-between;gap:18px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:9px}
@media(max-width:800px){.life-focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.life-focus-heading{align-items:flex-start;flex-direction:column}.life-focus-soft-note{text-align:left}.life-focus-foot{flex-direction:column}}
@media(max-width:520px){.life-focus-panel{padding:17px}.life-focus-grid{grid-template-columns:1fr}.life-focus-card{min-height:0}.life-focus-heading h2{font-size:26px}}

/* v0.49 — Life Map → Focus separation */
.focus-experience{max-width:1180px;margin:0 auto;padding:26px 24px 70px}.focus-context-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:22px;align-items:stretch;margin-bottom:18px}.focus-context-hero>div:first-child,.focus-context-card,.focus-next-panel{border:1px solid rgba(202,167,106,.14);border-radius:20px;background:linear-gradient(145deg,rgba(20,35,55,.72),rgba(8,19,34,.88));padding:24px}.focus-context-hero h1{font-family:var(--font-display,serif);font-size:38px;margin:6px 0 10px}.focus-context-hero p,.focus-context-card span,.focus-next-panel p{color:var(--muted);line-height:1.65}.focus-context-card{display:flex;flex-direction:column;justify-content:center;gap:7px}.focus-context-card small{color:var(--gold);letter-spacing:.13em;font-size:9px}.focus-context-card strong{font-family:var(--font-display,serif);font-size:21px}.focus-context-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.focus-context-link{white-space:nowrap;margin-left:auto}.focus-next-panel{margin-top:16px}.focus-next-panel h2{font-family:var(--font-display,serif);margin:5px 0 7px}.life-map-page .life-map-experience{padding-top:18px}@media(max-width:800px){.focus-context-hero{grid-template-columns:1fr}.focus-experience{padding:18px 14px 54px}.focus-context-hero h1{font-size:31px}.focus-context-link{margin-left:0;width:100%;text-align:center}}

/* v0.50.0 — Focus Experience v2 */
.life-focus-card{position:relative;overflow:hidden}
.life-focus-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background:radial-gradient(circle at 12% 0%,rgba(202,167,106,.14),transparent 42%)}
.life-focus-card.focus-strong{border-color:rgba(229,183,79,.34);box-shadow:inset 0 1px 0 rgba(255,220,145,.035),0 12px 30px rgba(0,0,0,.12)}
.life-focus-card.focus-strong::before{opacity:.72;background:radial-gradient(circle at 10% 0%,rgba(238,183,69,.20),transparent 48%)}
.life-focus-card.focus-moderate{border-color:rgba(176,190,204,.16)}
.life-focus-card.focus-light{opacity:.88}
.life-focus-card.focus-light::before{background:radial-gradient(circle at 10% 0%,rgba(107,139,176,.11),transparent 45%)}
.life-focus-card.focus-strong .life-focus-icon{color:#f1bd55;text-shadow:0 0 16px rgba(241,189,85,.22)}
.life-focus-card.focus-moderate .life-focus-icon{color:#d6b66e}
.life-focus-card.focus-light .life-focus-icon{color:#8fa5bc}
.life-focus-signal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:3px}
.life-focus-signal-row strong{font-size:12px}.life-focus-signal-row span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.life-focus-meter{height:4px;margin-top:10px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden}
.life-focus-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(202,167,106,.35),#e8b74e);box-shadow:0 0 12px rgba(232,183,78,.16)}
.focus-light .life-focus-meter i{background:linear-gradient(90deg,rgba(112,139,169,.25),#8099b5);box-shadow:none}
.focus-moderate .life-focus-meter i{background:linear-gradient(90deg,rgba(202,167,106,.25),#cbb171)}
.focus-stands-out-panel,.focus-ahead-panel{margin:18px 0 26px;padding:22px 24px;border:1px solid rgba(202,167,106,.14);border-radius:20px;background:linear-gradient(145deg,rgba(15,31,50,.76),rgba(8,19,34,.84))}
.focus-stands-out-panel h2,.focus-ahead-panel h2{margin:6px 0 8px;font-family:var(--font-display,serif);font-size:25px}.focus-stands-out-panel p,.focus-ahead-panel p{margin:0;color:var(--muted);line-height:1.65}
.focus-ahead-panel{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(260px,1.4fr) auto;gap:22px;align-items:center}
.focus-ahead-changes{display:flex;flex-wrap:wrap;gap:8px}.focus-ahead-changes span{padding:8px 10px;border-radius:10px;border:1px solid rgba(202,167,106,.13);background:rgba(255,255,255,.025);font-size:11px;color:#cdd8e4}
.focus-detail-shell{width:min(1180px,calc(100% - 34px));margin:0 auto 54px}
.focus-detail-hero{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;padding:30px 28px;border:1px solid rgba(202,167,106,.2);border-radius:24px;background:linear-gradient(145deg,rgba(20,38,59,.88),rgba(8,19,34,.92));position:relative;overflow:hidden}
.focus-detail-hero::after{content:"";position:absolute;width:350px;height:350px;border-radius:50%;right:-110px;top:-210px;background:radial-gradient(circle,rgba(224,175,70,.14),transparent 68%);pointer-events:none}
.focus-detail-light .focus-detail-hero::after{background:radial-gradient(circle,rgba(112,139,169,.12),transparent 68%)}
.focus-detail-hero h1{font-family:var(--font-display,serif);font-size:46px;margin:7px 0 8px}.focus-detail-hero h1 span{color:var(--gold)}.focus-detail-hero p{max-width:720px;color:var(--muted);line-height:1.65}
.focus-detail-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.focus-detail-status>*{padding:6px 9px;border-radius:999px;border:1px solid rgba(202,167,106,.18);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.focus-detail-status b{color:#efc267;background:rgba(202,167,106,.08)}
.focus-detail-actions{display:flex;gap:8px;position:relative;z-index:1}
.focus-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.focus-detail-card,.focus-guidance-panel,.focus-why-panel,.focus-ask-panel{padding:24px;border:1px solid rgba(255,255,255,.075);border-radius:20px;background:rgba(11,27,45,.76)}
.focus-detail-card h2,.focus-guidance-panel h2,.focus-why-panel h2,.focus-ask-panel h2{font-family:var(--font-display,serif);font-size:25px;margin:6px 0 10px}.focus-detail-card p,.focus-guidance-panel p,.focus-why-panel p,.focus-ask-panel p{color:var(--muted);line-height:1.65}.focus-detail-card ul{margin:13px 0 0;padding-left:18px;color:#d7e0e8}.focus-detail-card li{margin:9px 0;line-height:1.5}
.focus-guidance-panel,.focus-why-panel,.focus-ask-panel{margin-top:14px}.focus-guidance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.focus-guidance-grid article{padding:16px;border:1px solid rgba(202,167,106,.12);border-radius:14px;background:rgba(255,255,255,.02)}.focus-guidance-grid small{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.09em}.focus-guidance-grid p{margin:8px 0}.focus-guidance-grid span{font-size:9px;color:var(--muted)}
.focus-driver-list{display:grid;gap:7px;margin:16px 0}.focus-driver-list>div{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.025);border-left:2px solid rgba(202,167,106,.4)}.focus-driver-list span{text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:var(--muted)}.focus-driver-list strong{font-size:11px;font-weight:500}.focus-driver-list em{font-style:normal;color:var(--gold);font-size:10px}.focus-why-panel details{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}.focus-why-panel summary{cursor:pointer;color:#d7e0e8;font-size:11px}
.focus-ask-panel{display:flex;align-items:center;justify-content:space-between;gap:24px}.focus-ask-panel p{margin-bottom:0}
@media(max-width:850px){.focus-ahead-panel{grid-template-columns:1fr}.focus-detail-hero{align-items:flex-start;flex-direction:column}.focus-detail-grid{grid-template-columns:1fr}.focus-guidance-grid{grid-template-columns:1fr}.focus-ask-panel{align-items:flex-start;flex-direction:column}.focus-driver-list>div{grid-template-columns:1fr auto}.focus-driver-list span{grid-column:1/-1}}
@media(max-width:520px){.focus-detail-shell{width:min(100% - 20px,1180px)}.focus-detail-hero{padding:21px}.focus-detail-hero h1{font-size:36px}.focus-detail-actions{flex-wrap:wrap}.focus-driver-list>div{grid-template-columns:1fr}.focus-driver-list span{grid-column:auto}}

/* v0.60.0 — knowledge → guidance visual system */
.landing-principles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px auto;max-width:1120px}.landing-principles-grid article{padding:22px;border:1px solid rgba(202,167,106,.14);border-radius:18px;background:linear-gradient(145deg,rgba(15,31,50,.72),rgba(8,19,34,.84))}.landing-principles-grid small{color:var(--gold);letter-spacing:.12em;font-size:9px}.landing-principles-grid h3{font-family:var(--font-display,serif);font-size:22px;margin:8px 0}.landing-principles-grid p{color:var(--muted);line-height:1.65;margin:0}.landing-methodology-cta{max-width:1120px;margin:18px auto 34px;padding:24px 26px;border:1px solid rgba(202,167,106,.17);border-radius:20px;background:rgba(9,23,39,.82);display:flex;align-items:center;justify-content:space-between;gap:24px}.landing-methodology-cta h3{font-family:var(--font-display,serif);font-size:25px;margin:6px 0}.landing-methodology-cta p{color:var(--muted);margin:0}.landing-methodology-cta>a{white-space:nowrap}

.focus-heatmap-panel{margin:18px 0 26px;padding:22px 24px;border:1px solid rgba(202,167,106,.14);border-radius:20px;background:linear-gradient(145deg,rgba(15,31,50,.78),rgba(8,19,34,.88))}.focus-heatmap-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:16px}.focus-heatmap-heading h2{font-family:var(--font-display,serif);font-size:26px;margin:6px 0 8px}.focus-heatmap-heading p{max-width:760px;color:var(--muted);line-height:1.6;margin:0}.focus-heatmap-key{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px;white-space:nowrap}.focus-heatmap-key i{display:inline-block;width:12px;height:12px;border-radius:3px}.heat-light{background:rgba(111,145,181,.34)}.heat-moderate{background:rgba(202,167,106,.58)}.heat-strong{background:linear-gradient(135deg,#d59d39,#f0c15e)}.focus-heatmap-scroll{overflow-x:auto;padding-bottom:6px}.focus-heatmap{display:grid;min-width:820px;gap:5px;align-items:stretch}.heatmap-corner,.heatmap-area-label{display:flex;align-items:center;padding:8px 10px;color:var(--muted);font-size:9px;letter-spacing:.08em}.heatmap-area-label strong{font-size:11px;color:#d6e0e9;letter-spacing:0}.heatmap-period,.heatmap-cell{border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;transition:.16s ease}.heatmap-period{padding:8px 4px}.heatmap-period strong{display:block;font-size:10px}.heatmap-period small{display:block;margin-top:3px;color:var(--muted);font-size:8px}.heatmap-period:hover,.heatmap-cell:hover{transform:translateY(-1px);border-color:rgba(236,187,82,.45)}.heatmap-cell{min-height:40px;position:relative}.heatmap-cell span{position:absolute;opacity:0}.heatmap-cell.heat-light{background:linear-gradient(145deg,rgba(98,133,171,.18),rgba(98,133,171,.3))}.heatmap-cell.heat-moderate{background:linear-gradient(145deg,rgba(181,145,77,.28),rgba(212,173,93,.47))}.heatmap-cell.heat-strong{background:linear-gradient(145deg,rgba(220,157,49,.48),rgba(243,193,84,.78));box-shadow:inset 0 0 0 1px rgba(255,220,139,.09)}

.guidance-card-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.guidance-card-top em{font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:7px;color:#8fa5bc;border:1px solid rgba(143,165,188,.18);border-radius:999px;padding:4px 6px}.guidance-learn{background:linear-gradient(145deg,rgba(83,116,154,.08),rgba(255,255,255,.018))!important}.focus-driver-list>div{grid-template-columns:110px 1fr!important}.focus-driver-list>div>p{grid-column:2;margin:3px 0 0!important;font-size:10px;line-height:1.55;color:var(--muted)}.focus-driver-list>div>span{align-self:start;padding-top:2px}.focus-score-debug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--muted);line-height:1.7}

.methodology-page{width:min(1120px,calc(100% - 34px));margin:28px auto 70px}.methodology-hero{padding:34px 36px;border:1px solid rgba(202,167,106,.18);border-radius:24px;background:radial-gradient(circle at 84% 0%,rgba(202,167,106,.11),transparent 34%),linear-gradient(145deg,rgba(18,35,55,.88),rgba(8,19,34,.94))}.methodology-hero h1{font-family:var(--font-display,serif);font-size:44px;margin:7px 0 12px}.methodology-hero p{max-width:820px;color:var(--muted);font-size:15px;line-height:1.75}.methodology-principle{display:inline-block;margin-top:12px;padding:10px 13px;border:1px solid rgba(202,167,106,.2);border-radius:12px;color:#ead5a9;background:rgba(202,167,106,.06);font-size:12px}.methodology-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.methodology-steps article{display:flex;gap:16px;padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(11,27,45,.73)}.methodology-steps article>span{color:var(--gold);font-family:var(--font-display,serif);font-size:21px}.methodology-steps h2{font-family:var(--font-display,serif);font-size:23px;margin:0 0 7px}.methodology-steps p{color:var(--muted);line-height:1.65;margin:0}.methodology-provenance{margin-top:18px;padding:24px;border:1px solid rgba(202,167,106,.13);border-radius:20px;background:rgba(10,24,41,.78)}.methodology-provenance h2{font-family:var(--font-display,serif);font-size:27px;margin:6px 0 14px}.provenance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.provenance-grid article{padding:15px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.02)}.provenance-grid b{color:#e7c579}.provenance-grid p{font-size:10px;color:var(--muted);line-height:1.55}.methodology-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:18px;padding:24px;border:1px solid rgba(202,167,106,.14);border-radius:20px;background:linear-gradient(145deg,rgba(16,32,50,.74),rgba(8,19,34,.85))}.methodology-cta h2{font-family:var(--font-display,serif);font-size:25px;margin:6px 0 0}.methodology-cta>div:last-child{display:flex;gap:9px;flex-wrap:wrap}

/* Graha color is identity, not favorability. */
.planet-glyph{font-weight:800!important}.planet-sun{color:#f2b84b!important}.planet-moon{color:#dce9f5!important}.planet-mars{color:#e16d58!important}.planet-mercury{color:#71c89a!important}.planet-jupiter{color:#e2c45f!important}.planet-venus{color:#e6a8cf!important}.planet-saturn{color:#8fa7c4!important}.planet-rahu{color:#a787d5!important}.planet-ketu{color:#cf8b6d!important}.house-cell .planet-glyph,.south-sign-cell .planet-glyph{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 5px;margin:2px;border-radius:999px;background:rgba(4,13,24,.52);border:1px solid currentColor;box-shadow:0 0 12px rgba(0,0,0,.22)}.planet-color-note{display:flex;gap:10px;align-items:center;margin:8px 0 10px;color:var(--muted);font-size:9px}.planet-color-note>span{color:#d6e1eb;text-transform:uppercase;letter-spacing:.09em;font-size:8px}.chart-planet-row .planet-glyph{font-size:23px}.compact-planet-list .planet-glyph{display:inline-block;min-width:88px}

/* The Life Map character strip remains contextual but is easier to read. */
.timeline-character-band{padding-top:8px}.timeline-character-gradient{height:12px!important;border-radius:999px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 3px 12px rgba(0,0,0,.16)}.antardasha-character-band .timeline-character-gradient{height:10px!important}.timeline-character-scale{margin-top:5px!important}

@media(max-width:850px){.landing-principles-grid{grid-template-columns:1fr}.landing-methodology-cta,.focus-heatmap-heading,.methodology-cta{align-items:flex-start;flex-direction:column}.methodology-steps{grid-template-columns:1fr}.provenance-grid{grid-template-columns:1fr 1fr}.focus-driver-list>div{grid-template-columns:1fr!important}.focus-driver-list>div>p{grid-column:auto}.focus-heatmap-key{white-space:normal;flex-wrap:wrap}}
@media(max-width:520px){.provenance-grid{grid-template-columns:1fr}.methodology-page{width:min(100% - 20px,1120px)}.methodology-hero{padding:24px}.methodology-hero h1{font-size:35px}.focus-heatmap-panel{padding:17px}}


/* v0.70 — Focus Intelligence v4: prominence, character, and time selection */
.character-tag{display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.08em;font-size:8px!important;font-style:normal;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.08);color:#cbd8e5}
.character-supportive{color:#8dd6b4!important;border-color:rgba(88,197,147,.24)!important;background:rgba(88,197,147,.07)}
.character-active{color:#e8c875!important;border-color:rgba(225,179,70,.22)!important;background:rgba(225,179,70,.06)}
.character-mixed{color:#b7c6db!important;border-color:rgba(144,166,196,.22)!important;background:rgba(144,166,196,.06)}
.character-caution{color:#e5a276!important;border-color:rgba(211,124,70,.24)!important;background:rgba(211,124,70,.07)}
.character-heightened_caution{color:#e79aa7!important;border-color:rgba(205,91,111,.26)!important;background:rgba(205,91,111,.07)}
.focus-character-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:26px;align-items:center;margin-top:16px;padding:24px;border:1px solid rgba(255,255,255,.075);border-radius:20px;background:rgba(11,27,45,.76)}
.focus-character-panel h2{font-family:var(--font-display,serif);font-size:25px;margin:6px 0 8px}.focus-character-panel p{color:var(--muted);line-height:1.65;margin:0}
.character-balance{display:grid;gap:13px}.character-balance>div{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px;color:var(--muted);font-size:10px}.character-balance i{height:7px;border-radius:999px;background:rgba(255,255,255,.055);overflow:hidden}.character-balance b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(102,163,189,.65),rgba(230,183,79,.88))}.character-balance>div:last-child b{background:linear-gradient(90deg,rgba(196,119,83,.55),rgba(204,92,111,.82))}
.heatmap-period{position:relative}.heatmap-period.is-now::before{content:"";position:absolute;left:50%;top:-7px;bottom:-302px;width:1px;background:rgba(244,199,91,.42);pointer-events:none;z-index:3}.heatmap-period.is-now em{position:absolute;top:-16px;left:50%;transform:translateX(-50%);padding:2px 5px;border-radius:999px;background:#f0bd55;color:#071425;font-size:6px;letter-spacing:.1em;font-style:normal;font-weight:800}.heatmap-period.is-selected,.heatmap-cell.is-selected{border-color:rgba(245,195,83,.72)!important;box-shadow:inset 0 0 0 1px rgba(245,195,83,.16)}.heatmap-cell.is-now{outline:1px solid rgba(245,195,83,.14);outline-offset:-3px}
@media(max-width:850px){.focus-character-panel{grid-template-columns:1fr}.character-balance>div{grid-template-columns:110px 1fr}}
/* 0.80 reasoning path: visual explanation without changing the approved visual language. */
.reasoning-path{margin:1.2rem 0;padding:1rem;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;background:rgba(255,255,255,.018)}
.reasoning-path>small{display:block;margin-bottom:.8rem;color:var(--gold,#f3c75f);font-weight:700;letter-spacing:.12em}.reasoning-path>div{display:flex;align-items:stretch;gap:.5rem;overflow-x:auto;padding-bottom:.2rem}.reasoning-node{display:flex;position:relative;min-width:118px;flex-direction:column;justify-content:center;padding:.7rem .8rem;border:1px solid rgba(243,199,95,.28);border-radius:10px;background:rgba(243,199,95,.055)}.reasoning-node i{position:absolute;left:-.55rem;font-style:normal;color:#f3c75f}.reasoning-node b{font-size:.88rem}.reasoning-node em{margin-top:.18rem;font-size:.62rem;font-style:normal;text-transform:uppercase;opacity:.55}.reasoning-house,.reasoning-house_lord{background:rgba(88,142,187,.07);border-color:rgba(88,142,187,.3)}
.profile-hub{max-width:1120px;margin:0 auto;padding:3rem 1.5rem 6rem}.profile-tabs{display:flex;gap:.55rem;margin:1.2rem 0 1.5rem}.profile-tabs button{border:1px solid rgba(255,255,255,.12);background:transparent;color:inherit;padding:.65rem 1rem;border-radius:999px}.profile-tabs button.active{border-color:#f3c75f;color:#f3c75f}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.settings-card{padding:1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.018)}.settings-card label{display:flex;flex-direction:column;gap:.5rem}.settings-card select{padding:.7rem;background:#0a1c32;color:inherit;border:1px solid rgba(255,255,255,.14);border-radius:8px}@media(max-width:760px){.settings-grid{grid-template-columns:1fr}.reasoning-node{min-width:105px}}

/* v0.81 — Understand & Remember */
.answer-depth-control{display:flex;align-items:center;gap:.55rem;margin-right:auto;color:var(--muted);font-size:10px}.answer-depth-control span{text-transform:uppercase;letter-spacing:.08em}.answer-depth-control select{border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#0a1c32;color:var(--text);padding:.58rem .75rem}.question-library-toolbar{display:flex;align-items:center;gap:12px;margin:22px 0 14px}.question-library-toolbar input{flex:1;min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(7,20,36,.75);color:var(--text)}.question-library-toolbar>span{color:var(--muted);font-size:10px;white-space:nowrap}.question-list{display:grid;gap:8px}.question-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 17px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(12,29,48,.72);text-decoration:none;color:inherit;transition:border-color .16s ease,transform .16s ease,background .16s ease}.question-row:hover{transform:translateY(-1px);border-color:rgba(236,187,82,.3);background:rgba(15,34,55,.84)}.question-row h2{font-family:var(--font-display,serif);font-size:19px;line-height:1.3;margin:0 0 6px}.question-row-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:9px}.question-row-meta span+span::before{content:"·";margin-right:8px;color:rgba(255,255,255,.25)}.question-row-open{color:var(--gold);font-size:10px;white-space:nowrap}.saved-reading-detail{max-width:980px}.saved-reading-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.saved-reading-nav>a{color:var(--muted);text-decoration:none}.saved-reading-header{padding:24px 0 18px;border-bottom:1px solid rgba(255,255,255,.07)}.saved-reading-header h1{font-family:var(--font-display,serif);font-size:38px;line-height:1.15;margin:7px 0 12px}.saved-answer-card{margin-top:18px;padding:26px;border:1px solid rgba(202,167,106,.16);border-radius:18px;background:linear-gradient(145deg,rgba(15,32,51,.9),rgba(8,20,35,.92))}.saved-answer-label{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}.saved-answer-label span{color:var(--gold);font-size:10px;letter-spacing:.11em}.saved-answer-label small{color:var(--muted)}.saved-reading-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}@media(max-width:700px){.question-row{align-items:flex-start}.question-row-open{display:none}.question-library-toolbar{align-items:stretch;flex-direction:column}.saved-reading-header h1{font-size:31px}.saved-answer-card{padding:19px}.answer-depth-control{width:100%;justify-content:space-between;margin-bottom:6px}}

/* v0.90 · Understand — chart literacy and reasoning explorer */
.chart-planet-row { width:100%; text-align:left; border:0; color:inherit; cursor:pointer; }
.chart-planet-row.selected,
.compact-planet-list button.selected { outline:1px solid rgba(232,187,77,.72); background:rgba(232,187,77,.08); }
.compact-planet-list button { appearance:none; border:1px solid rgba(135,157,184,.18); background:rgba(8,27,47,.48); color:inherit; border-radius:8px; padding:.65rem .75rem; text-align:left; display:flex; justify-content:space-between; gap:.75rem; cursor:pointer; }
.compact-planet-list button:hover { border-color:rgba(232,187,77,.48); }
.chart-understanding-panel { margin-top:1rem; border:1px solid rgba(228,181,70,.24); background:linear-gradient(145deg,rgba(9,31,54,.94),rgba(8,25,44,.92)); border-radius:14px; padding:1.25rem; }
.chart-understanding-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.chart-understanding-head h2 { margin:.25rem 0 0; }
.chart-reading-chain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:.7rem; align-items:stretch; margin-top:1rem; }
.chart-reading-chain article { min-width:0; border:1px solid rgba(132,154,181,.2); border-radius:10px; padding:.85rem; background:rgba(10,31,53,.65); }
.chart-reading-chain article small { display:block; color:#e6bb55; font-size:.66rem; letter-spacing:.12em; margin-bottom:.35rem; }
.chart-reading-chain article strong { display:block; margin-bottom:.35rem; }
.chart-reading-chain article p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.chart-reading-chain > i { align-self:center; color:#e6bb55; font-style:normal; }
.chart-understanding-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(132,154,181,.15); }
.chart-understanding-actions p { margin:0; max-width:65ch; color:var(--muted); }
@media (max-width: 900px) { .chart-reading-chain { grid-template-columns:1fr; } .chart-reading-chain > i { transform:rotate(90deg); justify-self:center; } .chart-understanding-actions { align-items:flex-start; flex-direction:column; } }
.together-reasoning-panel { margin:1rem 0 1.25rem; padding:1rem 1.1rem; border:1px solid rgba(230,187,82,.23); border-radius:12px; background:rgba(8,29,51,.7); }
.together-reasoning-panel h3 { max-width:52rem; margin:.3rem 0 1rem; }
.together-reasoning-chain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:.75rem; align-items:stretch; }
.together-reasoning-chain article { border:1px solid rgba(130,153,180,.18); border-radius:10px; padding:.8rem; background:rgba(8,26,45,.5); }
.together-reasoning-chain article small { color:#e5b94f; letter-spacing:.1em; font-size:.66rem; }
.together-reasoning-chain article strong { display:block; margin:.3rem 0; }
.together-reasoning-chain article p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.together-reasoning-chain > i { align-self:center; color:#e5b94f; font-style:normal; }
.together-reasoning-panel .context-ask-link { display:inline-flex; margin-top:.85rem; }
@media(max-width:900px){.together-reasoning-chain{grid-template-columns:1fr}.together-reasoning-chain>i{transform:rotate(90deg);justify-self:center}}