/* The optional cosmic experience inherits Hushy's mobile frame, with its own palette. */
.cosmic-entry,.cosmic-dialog,.cosmic-chat { --cosmic-bg:#210b3b; --cosmic-panel:#362051; --cosmic-ink:#fff8ff; --cosmic-muted:#d4c0ec; --cosmic-line:#644780; color:var(--cosmic-ink); background:var(--cosmic-bg); }
.cosmic-entry { position:relative; overflow:hidden; border-radius:24px; margin:28px 0; text-align:center; }
.cosmic-entry-art { height:170px; background:linear-gradient(to bottom,transparent 65%,#210b3b 100%),url('assets/astrology/celestial-sky.png') center top / 100% auto no-repeat; }
.cosmic-entry-copy { position:relative; padding:0 22px 22px; }
.cosmic-entry h3 { font-size:25px; letter-spacing:-.025em; line-height:1.15; margin:0 0 10px; color:var(--cosmic-ink); }
.cosmic-entry p { font-size:14px; line-height:1.6; color:var(--cosmic-muted); margin:0 0 18px; }
.cosmic-entry .cosmic-entry-signs { color:#ffdfb7; font-size:13px; margin:0 0 16px; }
.cosmic-entry-signs:empty { display:none; }
.cosmic-entry small,.cosmic-chat small { display:block; margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--cosmic-muted); }
.cosmic-primary,.cosmic-secondary { width:100%; min-height:48px; padding:12px 18px; border-radius:999px; font-size:15px; line-height:1.4; font-weight:700; box-shadow:none; }
.cosmic-primary { background:#fff8ff; color:#29113f; border:1px solid #fff8ff; }
.cosmic-primary:enabled:hover { background:#eddaff; color:#29113f; border-color:#eddaff; }
.cosmic-secondary { background:var(--cosmic-panel); color:var(--cosmic-ink); border:1px solid var(--cosmic-line); }
.cosmic-secondary:enabled:hover { background:#493060; color:var(--cosmic-ink); border-color:#a386be; }
.cosmic-link { display:block; min-height:44px; width:auto; margin-inline:auto; padding:10px 4px; background:transparent; color:var(--cosmic-ink); border:0; border-radius:4px; font-size:14px; font-weight:600; text-underline-offset:4px; box-shadow:none; }
.cosmic-link:enabled:hover { background:transparent; color:#f1d5ff; text-decoration:underline; }
.cosmic-entry :focus-visible,.cosmic-dialog :focus-visible,.cosmic-chat :focus-visible { outline:2px solid #f7d4ff; outline-offset:3px; }
.cosmic-dialog { position:fixed; inset:0; width:min(430px,calc(100% - 32px)); max-width:none; height:min(900px,calc(100dvh - 48px)); max-height:none; padding:0; margin:auto; border:1px solid #785693; border-radius:32px; overflow:hidden; isolation:isolate; box-shadow:0 24px 80px rgb(17 5 28 / .4); color-scheme:dark; }
.cosmic-dialog[open] { display:flex; flex-direction:column; animation:cosmic-arrive .32s cubic-bezier(.16,1,.3,1); }
.cosmic-dialog::backdrop { background:rgb(16 5 26 / .7); }
.cosmic-dialog::before { content:''; pointer-events:none; position:absolute; inset:0 0 auto; height:310px; background:linear-gradient(to bottom,transparent 40%,#210b3b 100%),url('assets/astrology/celestial-sky.png') center top / 100% auto no-repeat; z-index:-1; }
.cosmic-dialog[data-view="details"]::before { height:160px; opacity:.23; }
.cosmic-dialog[data-view="welcome"]::before { display:none; }
.cosmic-dialog ::selection { background:#d4adf7; color:#210b3b; }
.cosmic-dialog { scrollbar-color:#806099 #210b3b; caret-color:#f4d3ff; }
body:has(.cosmic-dialog[open]) { overflow:hidden; }
.cosmic-topbar { display:flex; align-items:center; justify-content:space-between; flex:none; gap:8px; padding:12px 16px; min-height:68px; }
.cosmic-topbar > span { color:#f4ddff; font-size:13px; font-weight:600; }
.cosmic-icon-button { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:10px; border:1px solid #a484c1; border-radius:50%; color:#fff8ff; background:#2d1645; box-shadow:none; }
.cosmic-icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.cosmic-icon-button:enabled:hover { background:#493060; color:white; border-color:#ddc4ee; }
.cosmic-top-action { min-height:44px; padding:8px 0 8px 8px; background:transparent; color:#fff8ff; border:0; border-radius:4px; font-size:13px; text-decoration:underline; text-underline-offset:4px; box-shadow:none; }
.cosmic-top-action:enabled:hover { background:transparent; color:#eed1ff; }
.cosmic-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.cosmic-about,.cosmic-together { padding:95px 24px 28px; }
.cosmic-together { padding-top:64px; }
.cosmic-dialog h2 { margin:0; color:var(--cosmic-ink); font-size:31px; font-weight:750; letter-spacing:-.025em; line-height:1.15; overflow-wrap:anywhere; }
.cosmic-page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cosmic-visibility { font-size:11px; border:1px solid #a183bd; border-radius:999px; padding:5px 8px; white-space:nowrap; color:#ecd9ff; }
.cosmic-subtitle { margin:8px 0 30px; color:var(--cosmic-muted); font-size:14px; line-height:1.5; }
.cosmic-together .cosmic-subtitle { margin-bottom:20px; }
.cosmic-reading { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:0 0 30px; }
.cosmic-reading > svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-top:3px; }
.cosmic-reading[data-kind="sun"] { color:#ffbc9c; }
.cosmic-reading[data-kind="moon"] { color:#b6d9ff; }
.cosmic-reading[data-kind="rising"] { color:#edc0ff; }
.cosmic-reading .cosmic-sign-label { display:block; font-size:13px; font-weight:650; margin:0 0 4px; }
.cosmic-reading h3 { color:var(--cosmic-ink); font-size:17px; line-height:1.35; margin:0 0 8px; }
.cosmic-reading p { margin:0; color:var(--cosmic-muted); font-size:14px; line-height:1.6; }
.cosmic-note { color:var(--cosmic-muted); font-size:12px; line-height:1.6; margin:0 0 22px; }
.cosmic-note:empty { display:none; }
.cosmic-bottom { flex:none; padding:6px 20px max(14px,env(safe-area-inset-bottom)); border-top:1px solid #49305e; text-align:center; background:#210b3b; }
.cosmic-bottom > span { display:block; font-size:11px; color:var(--cosmic-muted); line-height:1.5; }
.cosmic-bottom .cosmic-link { padding-block:6px; }
.cosmic-welcome { padding:0 24px 28px; text-align:center; }
.cosmic-welcome-art { height:260px; margin:0 -24px; background:url('assets/astrology/celestial-sky.png') center top / 100% auto no-repeat; }
.cosmic-welcome h2 { margin:0 0 14px; }
.cosmic-welcome p { color:var(--cosmic-muted); font-size:15px; line-height:1.6; margin:0 0 28px; }
.cosmic-welcome small { display:block; color:var(--cosmic-muted); font-size:12px; line-height:1.6; margin-top:16px; }
/* Private editor: same controls and bindings, deliberately separate from the reading. */
.cosmic-dialog #astrologyEditor { margin:0; padding:24px; border:0; border-radius:0; background:transparent; --muted:#d4c0ec; --text:#fff8ff; --text-2:#fff8ff; --divider:#604477; --border:#80618e; --bad:#ffb4be; --good:#a6eed0; --accent:#dec1ff; --accent-ink:#edcfff; }
.cosmic-dialog #astrologyEditor .astro-heading { align-items:flex-start; }
.cosmic-dialog #astrologyEditor h3#astroTitle { color:#fff8ff; font-size:26px; }
.cosmic-dialog #astrologyEditor .astro-intro { margin:10px 0 20px; }
.cosmic-dialog #astrologyEditor .astro-text-button { color:#ecd3ff; }
.cosmic-dialog #astrologyEditor .astro-text-button:enabled:hover { color:#fff; }
.cosmic-dialog #astrologyEditor input:not([type="checkbox"]),.cosmic-dialog #astrologyEditor select { background:#35204c; color:#fff8ff; border:1px solid #8b6da0; caret-color:#f4d3ff; }
.cosmic-dialog #astrologyEditor input::placeholder { color:#d1bbdf; opacity:1; }
.cosmic-dialog #astrologyEditor input:focus,.cosmic-dialog #astrologyEditor select:focus { outline-color:#f7d4ff; border-color:#f7d4ff; box-shadow:none; }
.cosmic-dialog #astrologyEditor button.secondary { background:#513266; color:#fff8ff; border:1px solid #9a79ad; }
.cosmic-dialog #astrologyEditor .primary-btn { background:#fff8ff; color:#29113f; border-color:#fff8ff; }
.cosmic-dialog #astrologyEditor .primary-btn:enabled:hover { background:#eddaff; }
.cosmic-dialog #astroVisible:checked { background:#dec1ff; }
.cosmic-dialog #astrologyEditor .astro-details { margin-top:18px; }
.cosmic-dialog #astrologyEditor .astro-placement dd { font-size:15px; }
.cosmic-dialog #astrologyEditor .astro-placement dd.astro-unavailable { font-size:12px; }
.cosmic-dialog #astrologyEditor :disabled { opacity:.55; }
.cosmic-chat { border-radius:22px; padding:22px; margin:18px 0; background:#2c134b url('assets/astrology/celestial-sky.png') center top / 100% auto no-repeat; }
.cosmic-chat > strong { display:block; padding-top:105px; font-size:23px; letter-spacing:-.02em; }
.cosmic-chat p { font-size:14px; line-height:1.6; color:var(--cosmic-muted); margin:8px 0 18px; }
.cosmic-chat #astroStarterText { border-top:1px solid #806093; padding-top:18px; margin:22px 0 0; }
.cosmic-comparison-tabs { display:flex; gap:6px; margin-bottom:12px; }
.cosmic-comparison-tabs button { flex:1; min-height:44px; border-radius:999px; font-size:13px; background:#35204c; color:#e8d4f9; border:1px solid #806093; padding:8px; box-shadow:none; }
.cosmic-comparison-tabs button[aria-selected="true"] { background:#eddbff; color:#301548; border-color:#eddbff; }
.cosmic-comparison-card { padding:18px; border-radius:20px; background:#392055; min-height:160px; }
.cosmic-comparison-card h3 { display:flex; align-items:center; gap:10px; font-size:17px; color:#fff8ff; margin:0 0 10px; }
.cosmic-comparison-card h3 svg { width:24px; height:24px; fill:none; stroke:#ffd3af; stroke-width:1.6; stroke-linecap:round; }
.cosmic-pair-label { font-size:12px; line-height:1.5; color:#f1d0ff; margin:0 0 10px; }
.cosmic-comparison-card p:last-child { font-size:14px; line-height:1.6; color:var(--cosmic-muted); margin:0; }
.cosmic-section-heading { color:#fff8ff; font-size:19px; letter-spacing:-.01em; margin:30px 0 6px; }
.cosmic-section-description { color:var(--cosmic-muted); font-size:12px; line-height:1.6; margin:0 0 16px; }
.cosmic-sparks { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; background:#36204e; border-radius:20px; }
.cosmic-sparks strong { color:#ffe0ba; font-size:13px; }
.cosmic-sparks p { font-size:12px; line-height:1.5; color:var(--cosmic-muted); margin:5px 0 0; }
.cosmic-elements { display:grid; gap:18px; margin-bottom:24px; }
.cosmic-element-line { display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:6px; }
.cosmic-element-line span { color:var(--cosmic-muted); font-variant-numeric:tabular-nums; }
.cosmic-element-track { height:6px; background:#49305e; border-radius:999px; overflow:hidden; }
.cosmic-element-track > span { display:block; height:100%; background:var(--element-color); border-radius:inherit; }
.cosmic-dialog[data-view="together"] .cosmic-top-action,.cosmic-dialog[data-view="welcome"] .cosmic-top-action { visibility:hidden; }
.cosmic-dialog[data-view="together"] #astroBack,.cosmic-dialog[data-view="welcome"] #astroBack { display:none; }
.cosmic-dialog[data-view="together"] .cosmic-bottom,.cosmic-dialog[data-view="welcome"] .cosmic-bottom { padding-top:12px; }
@keyframes cosmic-arrive { from { transform:translateY(18px); } to { transform:translateY(0); } }
@media (max-width:559px) { .cosmic-dialog { width:100%; height:100dvh; border:0; border-radius:0; } .cosmic-topbar { padding-top:max(12px,env(safe-area-inset-top)); } }
@media (max-width:349px) { .cosmic-about,.cosmic-together { padding-inline:20px; padding-top:70px; } .cosmic-dialog #astrologyEditor { padding:20px; } .cosmic-dialog h2 { font-size:28px; } .cosmic-reading { gap:12px; grid-template-columns:30px minmax(0,1fr); } .cosmic-reading > svg { width:28px; } .cosmic-welcome-art { height:210px; } .cosmic-entry-copy { padding-inline:16px; } .cosmic-entry h3 { font-size:23px; } }
@media (prefers-reduced-motion:reduce) { .cosmic-dialog[open] { animation:none; } }