/* ============================================================
   ASTRO — <BirthChart> component styles
   Self-contained: scoped under .birth-chart so the chart can be
   embedded in any sized container. Wheel + panel internals keep
   their semantic class names.
   ============================================================ */

/* ---------------- LAYOUT ---------------- */
.birth-chart{display:flex; height:100%; overflow:hidden}
.bc-stage{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; padding:22px 26px 16px}
.bc-panel{flex:0 0 clamp(360px,33vw,468px); display:flex; flex-direction:column;
  min-height:0; border-left:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,13,38,.5), rgba(12,8,24,.62));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}

.bc-brand{display:flex; align-items:center; gap:13px; flex:0 0 auto}
.bc-brand-mark{font-size:22px; color:var(--accent); filter:drop-shadow(0 0 10px rgba(192,140,255,.6))}
.bc-brand-name{font-family:var(--font-serif); font-size:25px; font-weight:600; letter-spacing:.4px; line-height:1}
.bc-brand-sub{font-size:11.5px; color:var(--ink-faint); letter-spacing:.45px; margin-top:5px; text-transform:uppercase}

.bc-wheel-wrap{flex:1 1 auto; position:relative; min-height:0; padding:6px 0}
/* The SVG fills the available box; preserveAspectRatio="xMidYMid meet" keeps the
   drawing square and fully contained, so the wheel can never overflow its column. */
.wheel{position:absolute; inset:6px 0; margin:auto; max-width:100%; max-height:100%; display:block; overflow:visible}

.bc-toolbar{flex:0 0 auto; display:flex; align-items:center; gap:9px; padding-top:6px}
.bc-tool{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:12px;
  color:var(--ink-dim); background:var(--card); border:1px solid var(--card-bd);
  padding:7px 13px; border-radius:999px; cursor:pointer; letter-spacing:.3px;
  transition:.22s; -webkit-tap-highlight-color:transparent}
.bc-tool:hover{color:var(--ink); border-color:var(--accent)}
.bc-tool.on{color:#1a1030; background:linear-gradient(180deg,var(--accent),var(--accent-deep)); border-color:transparent; font-weight:600}
.bc-tool-glyph{font-size:13px; line-height:1}
.bc-toolbar-meta{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-ghost); letter-spacing:.5px; text-transform:uppercase}

/* ---------------- WHEEL SVG ---------------- */
.wheel text{text-anchor:middle; pointer-events:none; user-select:none}
.glyph{font-family:var(--font-glyph)}
.mono{font-family:var(--font-mono)}

.ring-outer{fill:none; stroke:var(--line); stroke-width:1}
.ring-inner{fill:none; stroke:var(--line); stroke-width:1}
.ring-inner-glow{stroke:none}
.ring-band-in{fill:none; stroke:var(--line-soft); stroke-width:1}

.seg{fill-opacity:.12; stroke:none; transition:fill-opacity .25s}
.seg-fire{fill:var(--el-fire)} .seg-earth{fill:var(--el-earth)}
.seg-air{fill:var(--el-air)} .seg-water{fill:var(--el-water)}
.seg-group{cursor:pointer}
.seg-group:hover .seg{fill-opacity:.26}
.seg-on{fill-opacity:.34!important}
.seg-dim{fill-opacity:.05}
.sign-glyph{font-size:33px; fill:#fff; opacity:.92}
.seg-divider{stroke:var(--line); stroke-width:1}

.tick{stroke:var(--ink-ghost); stroke-width:.7; opacity:.5}
.tick-med{stroke:var(--ink-faint); stroke-width:.8; opacity:.6}
.tick-maj{stroke:var(--ink-dim); stroke-width:1; opacity:.7}

.house-wedge{fill:#fff; fill-opacity:0; stroke:none; cursor:pointer; transition:fill-opacity .2s}
.house-wedge:hover{fill:var(--accent); fill-opacity:.06}
.house-on{fill:var(--accent)!important; fill-opacity:.12!important}
.cusp-line{stroke:var(--line); stroke-width:1}
.cusp-angle{stroke:var(--accent); stroke-width:1.4; opacity:.55}
.roman{font-family:var(--font-serif); font-size:21px; font-weight:500; fill:var(--ink-faint)}
.cusp-deg{font-family:var(--font-mono); font-size:12px; fill:var(--ink-ghost)}

.axis{stroke-width:1.3; opacity:.5}
.axis-horizon{stroke:var(--accent-2)} .axis-meridian{stroke:var(--accent)}

.asp{stroke-width:1.3; fill:none; opacity:calc(.34 + .42*var(--str,.5)); transition:opacity .2s,stroke-width .2s; cursor:pointer}
.asp-conjunction{stroke:var(--asp-conjunction)} .asp-sextile{stroke:var(--asp-sextile)}
.asp-square{stroke:var(--asp-square)} .asp-trine{stroke:var(--asp-trine)}
.asp-opposition{stroke:var(--asp-opposition)} .asp-quincunx{stroke:var(--asp-quincunx); stroke-dasharray:4 5}
.asp-semisextile{stroke:var(--asp-semisextile); stroke-dasharray:4 5}
.asp:hover{stroke-width:2.4; opacity:1}
.asp-on{stroke-width:2.6!important; opacity:1!important; filter:drop-shadow(0 0 5px currentColor)}
.asp-dim{opacity:.05!important}

.planet{cursor:pointer}
.planet-stem{stroke:var(--ink-ghost); stroke-width:1; opacity:.6}
.planet-dot{fill:var(--ink-dim)}
.planet-halo{fill:transparent; transition:.25s}
.planet-hit{fill:transparent}
.planet-glyph{font-size:30px; fill:var(--ink); transition:fill .2s}
.planet-deg{font-family:var(--font-mono); font-size:13px; fill:var(--ink-faint)}
.planet:hover .planet-glyph{fill:var(--accent)}
.planet-on .planet-halo{fill:var(--accent); fill-opacity:.16; filter:drop-shadow(0 0 8px var(--accent))}
.planet-on .planet-glyph{fill:#fff}
.planet-on .planet-dot{fill:var(--accent)}
.planet-on .planet-stem{stroke:var(--accent); opacity:.9}
.planet-dim{opacity:.28}

.angle-mark{cursor:pointer}
.angle-dot{fill:var(--accent); filter:drop-shadow(0 0 5px var(--accent))}
.angle-label{font-family:var(--font-sans); font-size:18px}
.angle-abbr{fill:var(--accent-2); font-weight:600; letter-spacing:.5px}
.angle-deg{fill:var(--ink-dim); font-family:var(--font-mono); font-size:14px}
.angle-sign{fill:var(--ink); font-size:18px}
.angle-mark:hover .angle-abbr,.angle-on .angle-abbr{fill:#fff}
.angle-on .angle-dot{r:6}

/* ---------------- PANEL ---------------- */
/* Fixed height + internal scroll: the detail region's outer size never
   changes on hover, so the list below it can't shift — this is what
   prevents the hover flicker (see the empty-state hint in DetailCard). */
.bc-detail-wrap{flex:0 0 auto; padding:20px 22px 16px; border-bottom:1px solid var(--line);
  height:clamp(244px,32vh,360px); overflow-y:auto}
.bc-scroll{flex:1 1 auto; overflow-y:auto; padding:16px 22px 22px}

.detail-kicker{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); font-weight:600}
.detail-title{font-family:var(--font-serif); font-size:32px; font-weight:600; line-height:1.04; margin:5px 0 0; letter-spacing:.3px}
.detail-head{display:flex; align-items:center; gap:14px}
.detail-glyph{font-family:var(--font-glyph); font-size:42px; color:var(--ink); line-height:1; filter:drop-shadow(0 0 12px rgba(192,140,255,.35))}
.detail-roman{font-family:var(--font-serif); font-size:40px; font-weight:600; color:var(--accent); line-height:1; min-width:30px; text-align:center}
.retro-pill{font-size:10px; letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:999px; font-weight:600; color:var(--accent-2); background:color-mix(in oklch,var(--accent-2) 16%,transparent)}
.detail-pos{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:13px 0 11px; font-size:14px; color:var(--ink-dim)}
.detail-pos strong{color:var(--ink); font-weight:600}
.detail-pos .sep{color:var(--ink-ghost)}
.detail-lead{font-size:14.5px; line-height:1.55; color:var(--ink-dim); margin:0; text-wrap:pretty}
.detail-section{margin-top:15px}
.detail-section p{font-size:13.5px; line-height:1.5; color:var(--ink-dim); margin:5px 0 0; text-wrap:pretty}
.ds-label{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.detail-note{margin-top:14px; padding:10px 13px; background:var(--card); border:1px solid var(--card-bd); border-radius:10px; font-size:12.5px; color:var(--ink-dim); line-height:1.45}
.detail-empty{display:flex; align-items:center; min-height:120px}
.detail-empty-hint{font-size:13.5px; line-height:1.55; color:var(--ink-faint); margin:0; max-width:36ch; text-wrap:pretty}
.detail-empty .legend{display:flex; gap:16px; margin-top:18px; flex-wrap:wrap}
.legend-row{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-faint)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block}

.postag{display:inline-flex; align-items:center; gap:5px; font-size:13px}
.postag .mono{font-size:12.5px; color:var(--ink)}
.postag .glyph{font-size:15px}
.retro{color:var(--accent-2); font-size:13px}

.el-fire{color:var(--el-fire)} .el-earth{color:var(--el-earth)} .el-air{color:var(--el-air)} .el-water{color:var(--el-water)}
.el-bg-fire{background:var(--el-fire)} .el-bg-earth{background:var(--el-earth)} .el-bg-air{background:var(--el-air)} .el-bg-water{background:var(--el-water)}
.dot.el-fire{background:var(--el-fire)} .dot.el-earth{background:var(--el-earth)} .dot.el-air{background:var(--el-air)} .dot.el-water{background:var(--el-water)}

.dignity{font-size:10px; letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:999px; font-weight:600}
.dignity-domicile{color:var(--dig-domicile); background:color-mix(in oklch,var(--dig-domicile) 15%,transparent)}
.dignity-exaltation{color:var(--dig-exaltation); background:color-mix(in oklch,var(--dig-exaltation) 15%,transparent)}
.dignity-detriment{color:var(--dig-detriment); background:color-mix(in oklch,var(--dig-detriment) 15%,transparent)}
.dignity-fall{color:var(--dig-fall); background:color-mix(in oklch,var(--dig-fall) 15%,transparent)}
.dignity-peregrine{color:var(--ink-faint); background:var(--card)}

.aspect-mini-list{display:flex; flex-direction:column; gap:5px; margin-top:7px}
.aspect-mini{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line-soft); border-radius:9px; padding:7px 11px;
  color:var(--ink-dim); cursor:pointer; transition:.18s; font-family:var(--font-sans); font-size:13px}
.aspect-mini:hover{border-color:var(--card-bd); background:var(--card-2); color:var(--ink)}
.aspect-mini .glyph{font-size:15px; color:var(--ink)}
.aspect-mini-name{flex:1}
.aspect-mini .orb{margin-left:auto; color:var(--ink-faint); font-size:11.5px}
.asp-glyph{font-family:var(--font-glyph); font-size:14px}
.asp-fg-conjunction{color:var(--asp-conjunction)} .asp-fg-sextile{color:var(--asp-sextile)}
.asp-fg-square{color:var(--asp-square)} .asp-fg-trine{color:var(--asp-trine)}
.asp-fg-opposition{color:var(--asp-opposition)} .asp-fg-quincunx{color:var(--asp-quincunx)} .asp-fg-semisextile{color:var(--asp-semisextile)}

.chip-grid{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px}
.bodychip{display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line-soft);
  border-radius:999px; padding:6px 12px 6px 10px; color:var(--ink-dim); cursor:pointer; transition:.18s; font-family:var(--font-sans); font-size:12.5px}
.bodychip:hover{border-color:var(--accent); color:var(--ink)}
.bodychip .glyph{font-size:16px; color:var(--ink)}
.bodychip-name{font-weight:500}

.aspect-pair{display:flex; align-items:center; gap:10px; margin:13px 0 4px; flex-wrap:wrap}
.pair-body{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--card-bd);
  border-radius:11px; padding:9px 13px; color:var(--ink); cursor:pointer; font-family:var(--font-sans); font-size:13.5px; transition:.18s}
.pair-body:hover{border-color:var(--accent)}
.pair-glyph{font-size:19px}
.pair-link{font-family:var(--font-glyph); font-size:20px}
.orb-meter{margin-top:14px; height:30px; border-radius:8px; background:var(--card); border:1px solid var(--line-soft); position:relative; overflow:hidden; display:flex; align-items:center}
.orb-fill{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--accent-deep),var(--accent)); opacity:.35}
.orb-meter-label{position:relative; padding-left:11px; font-size:11px; color:var(--ink-dim); font-family:var(--font-mono); letter-spacing:.3px}

/* angles row */
.angles-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.angle-card{display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 4px;
  background:var(--card); border:1px solid var(--line-soft); border-radius:11px; cursor:pointer; transition:.18s; color:var(--ink-dim)}
.angle-card:hover{border-color:var(--accent); color:var(--ink)}
.angle-card-on{border-color:var(--accent); background:var(--card-2)}
.angle-card-abbr{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--accent-2); font-weight:700}
.angle-card-pos{font-size:12px; color:var(--ink)}
.angle-card .glyph{font-size:16px; color:var(--ink)}

/* balance */
.balance{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0 6px}
.balance-h{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:9px}
.bar-row{display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:8px; row-gap:5px; margin-bottom:10px}
.bar-label{font-size:11.5px; color:var(--ink-dim); grid-column:1; grid-row:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{grid-column:1 / -1; grid-row:2; height:6px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden}
.bar-fill{height:100%; border-radius:6px; transition:width .6s; opacity:.85}
.mod-bg{background:linear-gradient(90deg,var(--accent-deep),var(--accent))}
.bar-num{font-size:11px; color:var(--ink-faint); grid-column:2; grid-row:1; text-align:right; font-variant-numeric:tabular-nums}

/* tabs */
.tabs{display:flex; gap:4px; margin:20px 0 14px; background:var(--card); padding:4px; border-radius:11px; border:1px solid var(--line-soft)}
.tab{flex:1; padding:8px; border:none; background:transparent; color:var(--ink-faint); font-family:var(--font-sans);
  font-size:12.5px; font-weight:600; letter-spacing:.3px; border-radius:8px; cursor:pointer; transition:.18s}
.tab:hover{color:var(--ink-dim)}
.tab-on{background:linear-gradient(180deg,rgba(192,140,255,.22),rgba(125,91,208,.16)); color:#fff}

/* planet table */
.ptable{display:flex; flex-direction:column; gap:3px}
.prow{display:flex; align-items:center; gap:11px; padding:9px 11px; background:transparent; border:1px solid transparent;
  border-radius:10px; cursor:pointer; transition:.16s; color:var(--ink-dim); font-family:var(--font-sans); text-align:left}
.prow:hover{background:var(--card); border-color:var(--line-soft)}
.prow-on{background:var(--card-2); border-color:var(--accent)}
.prow-glyph{font-size:19px; color:var(--ink); width:22px; text-align:center; flex:0 0 auto}
.prow-name{font-size:13.5px; color:var(--ink); width:88px; flex:0 0 auto}
.prow .postag{flex:1}
.prow-house{font-size:11px; color:var(--ink-faint); width:26px; text-align:right; flex:0 0 auto}
.dignity-tick{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:transparent}
.dignity-tick.dignity-domicile{background:var(--dig-domicile)} .dignity-tick.dignity-exaltation{background:var(--dig-exaltation)}
.dignity-tick.dignity-detriment{background:var(--dig-detriment)} .dignity-tick.dignity-fall{background:var(--dig-fall)}

/* aspect list */
.aspect-filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.afilter{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink-ghost); font-family:var(--font-sans); font-size:11.5px; transition:.16s}
.afilter:hover{color:var(--ink-dim)}
.afilter.on{color:var(--ink); border-color:currentColor}
.afilter.on .asp-glyph{filter:drop-shadow(0 0 5px currentColor)}
.asp-bd-conjunction.on{border-color:var(--asp-conjunction)} .asp-bd-sextile.on{border-color:var(--asp-sextile)}
.asp-bd-square.on{border-color:var(--asp-square)} .asp-bd-trine.on{border-color:var(--asp-trine)}
.asp-bd-opposition.on{border-color:var(--asp-opposition)} .asp-bd-quincunx.on{border-color:var(--asp-quincunx)} .asp-bd-semisextile.on{border-color:var(--asp-semisextile)}
.alist{display:flex; flex-direction:column; gap:3px}
.arow{display:flex; align-items:center; gap:9px; padding:9px 11px; background:transparent; border:1px solid transparent;
  border-radius:10px; cursor:pointer; transition:.16s; color:var(--ink-dim); font-family:var(--font-sans); text-align:left}
.arow:hover{background:var(--card); border-color:var(--line-soft)}
.arow-on{background:var(--card-2); border-color:var(--accent)}
.arow-g{font-size:17px; color:var(--ink); width:20px; text-align:center}
.arow-name{flex:1; font-size:13px}
.arow .orb{color:var(--ink-faint); font-size:11.5px}
.empty-note{font-size:12.5px; color:var(--ink-faint); padding:14px 4px; text-align:center}

/* house list */
.hlist{display:flex; flex-direction:column; gap:3px}
.hrow{display:flex; align-items:center; gap:12px; padding:9px 11px; background:transparent; border:1px solid transparent;
  border-radius:10px; cursor:pointer; transition:.16s; color:var(--ink-dim); font-family:var(--font-sans); text-align:left}
.hrow:hover{background:var(--card); border-color:var(--line-soft)}
.hrow-on{background:var(--card-2); border-color:var(--accent)}
.hrow-roman{font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--accent); width:36px; flex:0 0 auto}
.hrow .postag{width:96px; flex:0 0 auto}
.hrow-occ{display:flex; gap:5px; flex-wrap:wrap}
.hrow-occ .glyph{font-size:16px; color:var(--ink)}

.bc-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-ghost); letter-spacing:.4px; text-align:center}

/* ---------------- WHEEL ENTRANCE ANIMATIONS ---------------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes breatheIn{from{transform:scale(.99)} to{transform:scale(1)}}
  @keyframes settleIn{from{transform:scale(.8)} to{transform:scale(1)}}
  @keyframes aspIn{from{opacity:.45} to{opacity:1}}
  @keyframes angleIn{from{opacity:.25} to{opacity:1}}
  .wheel-animate .layer-zodiac,.wheel-animate .layer-ticks,.wheel-animate .layer-houses,
  .wheel-animate .layer-cusps,.wheel-animate .layer-axes{
    transform-box:view-box; transform-origin:center; animation:breatheIn .8s ease both}
  .wheel-animate .layer-ticks{animation-delay:.12s}
  .wheel-animate .planet{transform-box:fill-box; transform-origin:center; animation:settleIn .5s cubic-bezier(.34,1.56,.64,1) both}
  .wheel-animate .planet:nth-child(1){animation-delay:.32s} .wheel-animate .planet:nth-child(2){animation-delay:.38s}
  .wheel-animate .planet:nth-child(3){animation-delay:.44s} .wheel-animate .planet:nth-child(4){animation-delay:.5s}
  .wheel-animate .planet:nth-child(5){animation-delay:.56s} .wheel-animate .planet:nth-child(6){animation-delay:.62s}
  .wheel-animate .planet:nth-child(7){animation-delay:.68s} .wheel-animate .planet:nth-child(8){animation-delay:.74s}
  .wheel-animate .planet:nth-child(9){animation-delay:.8s} .wheel-animate .planet:nth-child(10){animation-delay:.86s}
  .wheel-animate .planet:nth-child(11){animation-delay:.92s} .wheel-animate .planet:nth-child(12){animation-delay:.98s}
  .wheel-animate .layer-angles{animation:angleIn .7s ease both; animation-delay:.9s}
  .wheel-animate .asp{animation:aspIn .9s ease both; animation-delay:1s}
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:880px){
  .birth-chart{flex-direction:column; height:auto; min-height:100%; overflow:visible}
  .bc-stage{flex:0 0 auto; padding:16px 14px 12px}
  .bc-wheel-wrap{padding:10px 0; text-align:center}
  .wheel{position:static; inset:auto; margin:0 auto; width:min(96vw,560px); height:auto; max-width:100%; max-height:none}
  .planet-deg,.cusp-deg{display:none}
  .sign-glyph{font-size:37px}
  .planet-glyph{font-size:34px}
  .planet-hit{r:32px}
  .roman{font-size:24px}
  .angle-label{font-size:23px}
  .angle-deg{font-size:18px} .angle-sign{font-size:22px}
  .bc-panel{flex:1 1 auto; border-left:none; border-top:1px solid var(--line); backdrop-filter:none}
  .bc-detail-wrap{position:sticky; top:0; z-index:5; height:auto; min-height:0; overflow:visible; padding:16px 16px 14px;
    background:linear-gradient(180deg, rgba(16,10,30,.96), rgba(14,9,26,.9)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .bc-scroll{overflow:visible; padding:14px 16px 30px}
  .detail-title{font-size:27px}
  .bc-toolbar{flex-wrap:wrap}
  .bc-toolbar-meta{display:none}
}
@media (max-width:420px){
  .balance{grid-template-columns:1fr}
  .prow-name{width:74px}
}