/* LofiDawn Astrology — page styles (2026 design system). Load after ld-tokens.css.
   UI colour comes only from the ld-tokens.css tokens. The one exception is the planet glyph palette
   below (chart artwork): light-dark() pairs, each ≥ 3:1 against the card background in both modes.
   Shell, topbar and components mirror sites/private/home/shared/ld.css, which public sites can't load. */

:root {
    --pl-sun: light-dark(#b98105, #facc15);
    --pl-moon: light-dark(#64748b, #cbd5e1);
    --pl-mercury: light-dark(#5b5fe0, #a5b4fc);
    --pl-venus: light-dark(#db2777, #f472b6);
    --pl-mars: light-dark(#dc2626, #f87171);
    --pl-jupiter: light-dark(#ea580c, #fb923c);
    --pl-saturn: light-dark(#8a6339, #d2a679);
    --pl-uranus: light-dark(#0e8fae, #22d3ee);
    --pl-neptune: light-dark(#2563eb, #60a5fa);
    --pl-pluto: light-dark(#9333ea, #c084fc);
    --font-glyph: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', var(--font-sans);
}

/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; min-height: 100vh; font-feature-settings: 'cv11', 'ss01'; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent-soft); color: var(--text-bright); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; }
.mono, .deg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.g { font-family: var(--font-glyph); font-variant-emoji: text; font-weight: 400; font-size: 1.2em; line-height: 1; }
.ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Sidebar (same look as the private LofiDawn shell) ── */
.ld-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 50; display: flex; flex-direction: column; background: var(--sb-bg); border-right: 1px solid var(--border); transition: transform .22s ease; }
.ld-sb-hdr { padding: 1rem 1rem .75rem; }
.ld-sb-logo { display: flex; align-items: center; gap: .55rem; }
.ld-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); position: relative; flex-shrink: 0; }
.ld-mark::after { content: ''; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--on-accent); }
.ld-sb-brand { font-size: .92rem; font-weight: 650; letter-spacing: -.01em; color: var(--text-bright); }
.ld-sb-sub { display: block; margin: .15rem 0 0 1.95rem; font-size: .72rem; color: var(--text-muted); }
.ld-sb-nav { flex: 1; overflow-y: auto; padding: .25rem .5rem 1rem; }
.ld-section { padding: 1rem .55rem .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ld-link { display: flex; align-items: center; gap: .6rem; min-height: 30px; margin-bottom: 1px; padding: .3rem .55rem; font-size: .84rem; color: var(--text-dim); border-radius: var(--radius-sm); }
.ld-link:hover { background: var(--sb-hover); color: var(--text-bright); }
.ld-link.ld-active { background: var(--sb-active); color: var(--text-bright); font-weight: 500; }
.ld-link.ld-active .ic { color: var(--accent); }
.ld-link span { flex: 1; }
.ld-count { flex: 0 0 auto !important; font: 500 .7rem var(--font-mono); color: var(--text-muted); }
.ld-ext { width: 13px; height: 13px; color: var(--text-muted); }
.ld-sb-ftr { padding: .75rem 1rem .9rem; border-top: 1px solid var(--border); }
.ld-ftr-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ld-ftr-note { font-size: .72rem; color: var(--text-muted); }
.ld-modes { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; }
.ld-modes button { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; color: var(--text-muted); }
.ld-modes button:hover { color: var(--text-bright); }
.ld-modes button[aria-pressed="true"] { background: var(--bg2); color: var(--text-bright); box-shadow: var(--shadow); }
.ld-overlay { display: none; position: fixed; inset: 0; z-index: 49; background: color-mix(in srgb, var(--code-bg) 55%, transparent); }
.ld-overlay.open { display: block; }
#ld-burger { display: none; place-items: center; width: 32px; height: 32px; margin-right: .1rem; border-radius: var(--radius-sm); color: var(--text-dim); }
#ld-burger:hover { background: var(--bg3); color: var(--text-bright); }

/* ── Skeleton: .main > .topbar + .content ── */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .6rem 1.5rem; position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--border); }
.topbar-left { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .9rem; }
.tri { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--accent); flex-shrink: 0; }
.topbar-brand { font-size: .82rem; font-weight: 500; color: var(--text-muted); }
.topbar-sub { font-size: .82rem; font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.topbar-sub::before { content: '/'; margin-right: .55rem; color: var(--text-muted); font-weight: 400; }
.topbar-date { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.topbar-time { font-size: .75rem; color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.content { width: 100%; max-width: 1240px; padding: 1.75rem 1.75rem 3rem; flex: 1; }

/* ── Shared components (ld.css) ── */
.panel, .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { margin-bottom: 1.25rem; overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border2); }
.panel-header h2 { font-size: .9rem; font-weight: 600; color: var(--text-bright); }
.panel-subtitle { font-size: .75rem; color: var(--text-muted); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.15rem; min-width: 0; }
.stat-label { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; margin: .3rem 0 .15rem; }
.stat-value small { font-size: .95rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.stat-change { font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-change .g { font-size: 1.05rem; margin-right: .25rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; line-height: 1; padding: .3rem .5rem; border-radius: 999px; white-space: nowrap; background: var(--bg3); color: var(--text-dim); }
.badge-accent { background: var(--accent-soft); color: var(--accent-text); }
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-error { background: var(--red-bg); color: var(--red); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Page header ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.025em; color: var(--text-bright); line-height: 1.2; }
.page-sub { margin-top: .35rem; font-size: .86rem; color: var(--text-dim); }

/* ── Current sky ── */
.sky-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.planet { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-right: 1px solid var(--border2); border-bottom: 1px solid var(--border2); min-width: 0; }
.planet:nth-child(5n) { border-right: 0; }
.planet:nth-last-child(-n+5) { border-bottom: 0; }
.planet-glyph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg3); font-size: 1.3rem; flex-shrink: 0; }
.planet-info { min-width: 0; flex: 1; }
.planet-name { font-size: .8rem; font-weight: 600; color: var(--text-bright); display: flex; align-items: center; gap: .4rem; }
.planet-pos { font-size: .76rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planet-pos .deg { font-size: .7rem; color: var(--text-muted); margin-left: .15rem; }
.retro-chip { font: 600 .6rem var(--font-sans); padding: .15rem .35rem; border-radius: 4px; background: var(--red-bg); color: var(--red); letter-spacing: .02em; }

/* ── Tabs ── */
.tab-bar { display: flex; gap: .25rem; margin: 1.75rem 0 1.25rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; scroll-margin-top: 64px; }
.tab-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .75rem; margin-bottom: -1px; font-size: .84rem; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.tab-btn:hover { color: var(--text-bright); }
.tab-btn.active { color: var(--text-bright); border-bottom-color: var(--accent); }
.tab-count { font: 500 .66rem var(--font-mono); padding: .1rem .38rem; border-radius: 999px; background: var(--bg3); color: var(--text-muted); }
.tab-btn.active .tab-count { background: var(--accent-soft); color: var(--accent-text); }
.tab-count:empty { display: none; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-title { font-size: 1rem; font-weight: 600; color: var(--text-bright); letter-spacing: -.01em; }
.section-sub { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }

/* ── Aspect type badges (status tokens) ── */
.aspect-type { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 600; line-height: 1; padding: .3rem .5rem; border-radius: 999px; white-space: nowrap; }
.aspect-type.conjunction { background: var(--amber-bg); color: var(--amber); }
.aspect-type.sextile { background: var(--blue-bg); color: var(--blue); }
.aspect-type.square { background: var(--purple-bg); color: var(--purple); }
.aspect-type.trine { background: var(--green-bg); color: var(--green); }
.aspect-type.opposition { background: var(--red-bg); color: var(--red); }

/* ── Current aspects ── */
.aspect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.aspect-card { display: flex; flex-direction: column; padding: 1rem 1.1rem; transition: border-color .15s; }
.aspect-card:hover { border-color: var(--bg4); }
.aspect-card.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
.aspect-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.aspect-planets { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .92rem; font-weight: 600; color: var(--text-bright); }
.aspect-planets .g { font-size: 1.2rem; }
.aspect-planets .asp-sym { color: var(--text-muted); margin: 0 .35rem; font-size: 1.1rem; }
.aspect-date { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .5rem; font-size: .76rem; color: var(--text-dim); }
.aspect-date .sep { color: var(--text-muted); }
.aspect-orb { font: 500 .7rem var(--font-mono); color: var(--text-muted); }
.aspect-mundane { margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--border2); font-size: .8rem; line-height: 1.6; color: var(--text); }
.mundane-label { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mundane-label .ic { width: 13px; height: 13px; color: var(--accent); }

/* ── Notable charts ── */
.cat-group { margin-bottom: .75rem; }
.cat-header { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .8rem 1.1rem; text-align: left; transition: background .15s; }
.cat-header:hover { background: var(--bg3); }
.cat-header .ic { width: 18px; height: 18px; color: var(--text-dim); }
.cat-label { flex: 1; font-size: .88rem; font-weight: 600; color: var(--text-bright); }
.cat-count { font: 500 .7rem var(--font-mono); color: var(--text-muted); }
.chev { width: 14px; height: 14px; color: var(--text-muted); transition: transform .15s; }
.cat-group.open > .cat-header .chev, .person.expanded > .person-head .chev { transform: rotate(90deg); }
.cat-body { display: none; border-top: 1px solid var(--border2); }
.cat-group.open .cat-body { display: block; }
.person { border-bottom: 1px solid var(--border2); }
.person:last-child { border-bottom: 0; }
.person-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .7rem 1.1rem; text-align: left; }
.person-head:hover { background: var(--bg3); }
.hot-dot { display: inline-block; width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.person-id { min-width: 0; }
.person-id > span { display: block; }
.notable-name { font-size: .86rem; font-weight: 600; color: var(--text-bright); }
.notable-role { font-size: .74rem; color: var(--text-muted); }
.person-meta { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.notable-sun { font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.card-body { display: none; padding: 0 1.1rem .9rem; }
.person.expanded .card-body { display: block; }
.notable-hits { border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
/* Hits table: Transit · Aspect · Natal · Orb · Meaning (meaning wraps under the row when narrow) */
.hit { display: grid; grid-template-columns: 8.5rem 8.5rem 8.75rem 2.75rem minmax(0, 1fr); align-items: baseline; gap: .25rem .9rem; padding: .55rem .85rem; border-bottom: 1px solid var(--border2); font-size: .78rem; color: var(--text); }
.hit:last-child { border-bottom: 0; }
.hit-head { padding: .45rem .85rem; background: var(--bg3); font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.hit .g { font-size: 1.1rem; }
.hit > span { white-space: nowrap; }
.hit-asp { font-weight: 600; }
.hit-asp small { font-size: .72rem; font-weight: 500; color: var(--text-dim); margin-left: .3rem; }
.hit .aspect-orb { text-align: right; }
.hit-label { color: var(--text-muted); font-size: .72rem; }
.hit > .hit-interp { white-space: normal; font-size: .76rem; line-height: 1.5; color: var(--text-dim); }
.no-hits { font-size: .76rem; color: var(--text-muted); }

/* ── 30-day forecast ── */
.timeline { padding: .35rem 0; }
.timeline-item { display: grid; grid-template-columns: 5.5rem 20px minmax(0, 1fr); gap: 0 .9rem; padding: 0 1.1rem; }
.timeline-date { padding: .85rem 0; text-align: right; font: 500 .74rem var(--font-mono); color: var(--text-bright); white-space: nowrap; }
.timeline-date span { display: block; font-size: .66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.timeline-rail { position: relative; display: flex; justify-content: center; }
.timeline-rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.timeline-item:first-child .timeline-rail::before { top: 1.15rem; }
.timeline-item:last-child .timeline-rail::before { bottom: auto; height: 1.15rem; }
.timeline-dot { position: relative; margin-top: 1rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg2); }
.timeline-body { padding: .8rem 0; border-bottom: 1px solid var(--border2); min-width: 0; }
.timeline-item:last-child .timeline-body { border-bottom: 0; }
.timeline-title { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .86rem; font-weight: 600; color: var(--text-bright); }
.timeline-title .g { font-size: 1.15rem; }
.timeline-title .asp-sym { color: var(--text-muted); margin: 0 .2rem; }
.timeline-title .aspect-type { margin-left: .35rem; }
.timeline-desc { margin-top: .2rem; font-size: .8rem; line-height: 1.6; color: var(--text-dim); }

/* ── Retrogrades ── */
.retro-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.retro-card { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.retro-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.retro-who { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.retro-sym { width: 40px; height: 40px; font-size: 1.45rem; }
.retro-name { font-size: .9rem; font-weight: 600; color: var(--text-bright); }
.retro-detail { font-size: .76rem; color: var(--text-dim); }
.retro-note { font-size: .8rem; line-height: 1.6; padding: .65rem .8rem; border-radius: var(--radius-sm); border-left: 2px solid var(--border); background: var(--bg3); color: var(--text-dim); }
.retro-note.is-retro { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber-bg) 70%, var(--bg2)); color: var(--text); }

/* ── States + footer ── */
.loading { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: .84rem; }
.loading.error { color: var(--red); }
.loading pre { margin: .75rem auto 0; max-width: 640px; text-align: left; font: .7rem/1.5 var(--font-mono); background: var(--code-bg); color: var(--code-text); padding: .8rem; border-radius: var(--radius-sm); overflow-x: auto; }
.page-footer { padding: 1.25rem 1.75rem 1.5rem; border-top: 1px solid var(--border); font-size: .74rem; color: var(--text-muted); }

/* ── Responsive ── */
@media (min-width: 801px) { body { margin-left: 248px; } }
@media (max-width: 1180px) {
    .sky-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .planet, .planet:nth-child(5n), .planet:nth-last-child(-n+5) { border-right: 0; border-bottom: 1px solid var(--border2); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
    .hit { grid-template-columns: 8.5rem 8.5rem minmax(8.75rem, 1fr) 2.75rem; }
    .hit > .hit-interp { grid-column: 1 / -1; }
    .hit-head span:last-child { display: none; }
}
@media (max-width: 1000px) {
    .aspect-grid, .retro-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
    .ld-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .ld-sidebar.open { transform: none; }
    #ld-burger { display: grid; }
    .topbar { padding: .55rem 1rem; }
    .content { padding: 1.25rem 1rem 2.5rem; }
    .page-footer { padding: 1.1rem 1rem 1.4rem; }
    .stats-grid { gap: .75rem; }
    .page-head h1 { font-size: 1.3rem; }
}
@media (max-width: 600px) {
    .topbar-date { display: none; }
    .sky-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planet { padding: .7rem .8rem; gap: .6rem; }
    .planet:nth-child(odd) { border-right: 1px solid var(--border2); }
    .planet-glyph { width: 30px; height: 30px; font-size: 1rem; }
    .stat-card { padding: .85rem .9rem; }
    .stat-value { font-size: 1.35rem; }
    .person-head { flex-wrap: wrap; gap: .35rem .75rem; }
    .hit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.6rem; gap: .2rem .6rem; padding: .6rem .75rem; }
    .hit-head { display: none; }
    .hit .hit-natal { grid-column: 1 / 3; grid-row: 2; }
    .hit .aspect-orb { grid-column: 3; grid-row: 1; }
    .hit > .hit-interp { grid-row: 3; }
    .timeline-item { grid-template-columns: 3.9rem 14px minmax(0, 1fr); gap: 0 .6rem; padding: 0 .8rem; }
}