/* ============================================================
   Cosmogram — Powerful Matter skin
   Imports the PM design system; adds astro-specific styles below.
   Dark-only by design.
   ============================================================ */

@import url("/css-v2/tokens.css");
@import url("/css-v2/reset.css");
@import url("/css-v2/base.css");
@import url("/css-v2/components/button.css");

/* ============================================================
   Astro-local tokens — semantic colours we add on top of the
   PM palette. Element hues preserve "Fire=red, Earth=brown,
   Air=gray, Water=blue" identity but are re-toned to sit
   alongside PM purple without fighting it.
   ============================================================ */

:root {
  /* Element palette — calibrated for legibility on --pm-black */
  --astro-fire:    #D85A4A;
  --astro-fire-2:  #F09A8B;
  --astro-earth:   #B58463;
  --astro-earth-2: #D9B093;
  --astro-air:     #9CA4B0;
  --astro-air-2:   #C0C6CF;
  --astro-water:   #6FA0CC;
  --astro-water-2: #A2C2DE;

  /* Aspects — re-toned to align with PM rather than GitHub greens */
  --astro-aspect-major: #B89BC9;   /* dusty lavender (conjunction)   */
  --astro-aspect-soft:  #8AAE8A;   /* muted sage (trine, sextile)    */
  --astro-aspect-hard:  #D67C6E;   /* terracotta-blush (opp/square)  */

  /* Astro warnings — soft amber, scoped to this tool. */
  --astro-warning: #E5A85A;

  /* Retrograde marker — pull toward purple-300 */
  --astro-retro: var(--pm-purple-300);

  /* Surfaces (mapped from PM tokens for local convenience) */
  --astro-bg:        var(--pm-black);
  --astro-bg-elev:   var(--pm-ink);
  --astro-bg-elev-2: var(--pm-gray-900);
  --astro-fg:        var(--pm-white);
  --astro-fg-dim:    var(--pm-gray-400);
  --astro-fg-dimmer: var(--pm-gray-500);
  --astro-border:    var(--border-color-base);
  --astro-error:     var(--astro-aspect-hard);

  --astro-radius: var(--radius-md);
  --astro-maxw: 1240px;
}

/* ============================================================
   Page chrome — body, topbar, brand-back, page header, footer.
   ============================================================ */

html, body {
  background: var(--astro-bg);
  color: var(--astro-fg);
  font-family: var(--ff-body);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Topbar — sticky, blurred, mirrors the translator pattern. */
.astro-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--astro-border);
  background: rgba(15, 15, 18, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky; top: 0;
  z-index: 60;
}
.astro-topbar__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--astro-fg-dim);
  margin-left: auto;
}

/* Brand back-link — mirrors the translator/aichat shell. */
.brand-back {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  color: var(--astro-fg);
  text-decoration: none;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast) var(--ease-out-expo);
}
.brand-back:hover {
  color: var(--pm-white);
  background: rgba(255, 255, 255, 0.04);
}
.brand-back__mark { display: inline-flex; align-items: center; justify-content: center; }
.brand-back__mark img { display: block; }
.brand-back__text { white-space: nowrap; }
.brand-back__arrow {
  width: 14px; height: 14px;
  color: var(--astro-fg-dim);
  transition: transform var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo);
}
.brand-back:hover .brand-back__arrow {
  color: var(--pm-purple-300);
  transform: translateX(-3px);
}

/* Page-level layout */
main {
  max-width: var(--astro-maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

.astro-page-header {
  margin: 0 0 1.5rem;
}
.astro-page-header .eyebrow {
  display: inline-block;
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--pm-purple-300);
  margin-bottom: var(--sp-3);
}
.astro-page-header h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--pm-white);
}
.astro-tagline {
  margin: 0;
  color: var(--astro-fg-dim);
  font-size: var(--fs-300);
}

.astro-footer {
  max-width: var(--astro-maxw);
  margin: 2rem auto 0;
  padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid var(--astro-border);
  color: var(--astro-fg-dim);
  font-size: var(--fs-100);
}
.astro-footer p { margin: 0 0 0.4rem; }
.astro-footer p:last-child { margin: 0; }
.astro-footer a { color: var(--pm-gray-300); }
.astro-footer a:hover { color: var(--pm-purple-300); }
.astro-footer__pm { color: var(--pm-gray-500); }

/* ============================================================
   Form — single card, PM tokens, dark.
   Original IDs preserved so main.js keeps wiring up.
   ============================================================ */

.astro-form {
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.astro-form .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 540px) {
  .astro-form .row { grid-template-columns: 1fr; }
}

.astro-form .field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: relative;
}

.astro-form label {
  font-size: .85rem;
  color: var(--astro-fg-dim);
  font-weight: 500;
}
.astro-form label .optional,
.astro-form label .hint {
  font-weight: 400;
  font-size: .8rem;
  color: var(--astro-fg-dimmer);
}

.astro-form input[type="text"],
.astro-form input[type="date"],
.astro-form input[type="time"],
.astro-form input[type="number"],
.astro-form select {
  background: var(--astro-bg-elev-2);
  border: 1px solid var(--astro-border);
  border-radius: 6px;
  padding: .55rem .65rem;
  color: var(--astro-fg);
  font: inherit;
  font-size: .95rem;
  width: 100%;
  font-family: var(--ff-body);
}
.astro-form input::placeholder { color: var(--pm-gray-500); }

.astro-form input:focus,
.astro-form select:focus,
.astro-form button:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

.astro-form .checkbox {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--astro-fg-dim);
  cursor: pointer;
  user-select: none;
}
.astro-form .checkbox.inline {
  font-weight: 400;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: .75rem;
}
.astro-form .checkbox input[type="checkbox"] {
  accent-color: var(--pm-purple-400);
}

.astro-form .actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Submit button — uses the design-system .btn pill. */
.astro-form .btn {
  padding: 14px 22px;
  font-size: var(--fs-200);
}
.astro-form .btn[disabled] { opacity: .5; cursor: progress; }

.astro-form .error {
  color: var(--astro-error);
  margin: 0;
  font-size: .9rem;
}

/* Advanced details */
.astro-form details.advanced > summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--astro-fg-dim);
  padding: .25rem 0;
  list-style: none;
}
.astro-form details.advanced > summary::-webkit-details-marker { display: none; }
.astro-form details.advanced > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .4rem;
  color: var(--astro-fg-dimmer);
  transition: transform .15s ease;
}
.astro-form details.advanced[open] > summary::before { transform: rotate(90deg); }
.astro-form details.advanced > div { margin-top: .75rem; }

/* Birth-location section: City / Coordinates toggle */
.location-section { display: grid; gap: .5rem; }
.location-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.location-section__label {
  font-size: .85rem;
  color: var(--astro-fg-dim);
  font-weight: 500;
}
.location-toggle {
  display: inline-flex;
  background: var(--astro-bg-elev-2);
  border: 1px solid var(--astro-border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.location-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--astro-fg-dim);
  font: inherit;
  font-family: var(--ff-body);
  font-size: .8rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo);
}
.location-toggle__btn:hover { color: var(--astro-fg); }
.location-toggle__btn.is-active {
  background: var(--pm-purple-700);
  color: var(--pm-white);
}
.coords-pane { display: grid; gap: .5rem; }
.coords-pane__intro {
  margin: 0;
  color: var(--astro-fg-dim);
  font-size: .85rem;
  line-height: 1.45;
}
.tz-field label {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tz-badge {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 .4rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--pm-purple-700);
  color: var(--pm-white);
  user-select: none;
}
.tz-badge[data-state="manual"] {
  background: var(--astro-bg-elev-2);
  color: var(--astro-fg-dim);
  border: 1px solid var(--astro-border);
}
.tz-status {
  margin: 0;
  min-height: 1.1em;
  font-size: .78rem;
  color: var(--astro-fg-dim);
}
.tz-status .tz-status__action {
  background: none;
  border: 0;
  padding: 0;
  margin-left: .35rem;
  color: var(--pm-purple-300);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.tz-status .tz-status__action:hover { color: var(--pm-white); }

/* City autocomplete dropdown */
.astro-form .city-field { position: relative; }
.astro-form .autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--astro-bg-elev-2);
  border: 1px solid var(--astro-border);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: var(--shadow-md);
}
.astro-form .autocomplete li {
  padding: .5rem .65rem;
  cursor: pointer;
  font-size: .9rem;
  border-bottom: 1px solid var(--astro-border);
  color: var(--astro-fg);
}
.astro-form .autocomplete li:last-child { border-bottom: none; }
.astro-form .autocomplete li:hover,
.astro-form .autocomplete li[aria-selected="true"] {
  background: rgba(196, 0, 173, 0.18);
  color: var(--pm-white);
}
.astro-form .autocomplete .meta {
  display: block;
  font-size: .75rem;
  color: var(--astro-fg-dim);
}
.astro-form .autocomplete li:hover .meta,
.astro-form .autocomplete li[aria-selected="true"] .meta {
  color: var(--pm-purple-200);
}
#city-resolved {
  margin: .25rem 0 0;
  font-size: .8rem;
  color: var(--astro-fg-dim);
  min-height: 1.1em;
}

/* ============================================================
   Result section — chart pane, tables, analysis.
   ============================================================ */

#result {
  margin-top: 1.5rem;
}

.chart-pane {
  max-width: 760px;
  margin: 0 auto 1.25rem;
}
.chart-pane h2 {
  margin: 0 0 .25rem;
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pm-white);
}
.subtitle {
  margin: 0 0 1rem;
  color: var(--astro-fg-dim);
  font-size: .9rem;
}

#chart {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 760px;
  margin-inline: auto;
  /* No square panel — only the chart wheel itself is visible. House-number
     text outlines still use the opaque --astro-bg-elev token, so glyph
     legibility holds against the WebGL planet behind. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart svg { width: 100%; height: 100%; }

/* The homepage hero's WebGL planet sits behind the chart as a faded backdrop.
   The bg container extends past the chart's square so the planet's halo and
   lightning radiate visibly around the wheel. Pointer-events stay disabled so
   the chart on top owns all interaction. Module is lazy-loaded from
   js/main.js once the result panel becomes visible. */
.chart-stage {
  position: relative;
  isolation: isolate;
}
.chart-stage > #chart {
  position: relative;
  z-index: 1;
}
.chart-stage__bg {
  position: absolute;
  inset: 4%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    #000 0%, #000 32%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%,
    #000 0%, #000 32%, transparent 66%);
}
.chart-stage__bg canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .chart-stage__bg { display: none; }
}

#chart .house-number {
  fill: var(--astro-fg-dim);
  font-family: var(--ff-body);
  font-weight: 600;
  paint-order: stroke fill;
  stroke: var(--astro-bg-elev);
  stroke-width: 3px;
  stroke-linejoin: round;
}
#chart .house-number.elem-fire  { fill: var(--astro-fire); }
#chart .house-number.elem-earth { fill: var(--astro-earth); }
#chart .house-number.elem-air   { fill: var(--astro-air); }
#chart .house-number.elem-water { fill: var(--astro-water); }

/* Astrochart's drawSigns() paints each zodiac wedge as a <path> segment with
   COLORS_SIGNS[i] as fill and stroke="none" by default. We override the fill
   to "none" via ELEMENT_SETTINGS in chart.js, which leaves the radial dividers
   between signs invisible. Restore them here so the 12 wedges are visibly
   bounded; #3F3D47 matches STRUCTURE_COLOR used for the chart's circles and
   cusp lines. The selector targets only direct <path> children of the signs
   group — sign-glyph subpaths live inside per-sign <g> wrappers and are
   unaffected. */
#chart [id$="-radix-signs"] > path {
  fill: none;
  stroke: #3F3D47;
  stroke-width: 1;
}

/* Chart wheel — element colours for sign glyphs and planet glyphs. CSS rules
   override the inline `stroke` attribute astrochart sets on each path
   (presentation attributes have lowest CSS specificity). Sign-element pairings
   match SIGN_ELEMENT in tables.js; planet-element pairings match PLANET_ELEMENT
   (each planet inherits the element of its primary ruling sign). */
#chart [id$="-radix-signs-Aries"] path,
#chart [id$="-radix-signs-Leo"] path,
#chart [id$="-radix-signs-Sagittarius"] path,
#chart [id$="-radix-planets-Sun"] path,
#chart [id$="-radix-planets-Sun"] circle,
#chart [id$="-radix-planets-Mars"] path,
#chart [id$="-radix-planets-Mars"] circle,
#chart [id$="-radix-planets-Jupiter"] path,
#chart [id$="-radix-planets-Jupiter"] circle { stroke: var(--astro-fire); }
#chart [id$="-radix-signs-Taurus"] path,
#chart [id$="-radix-signs-Virgo"] path,
#chart [id$="-radix-signs-Capricorn"] path,
#chart [id$="-radix-planets-Venus"] path,
#chart [id$="-radix-planets-Venus"] circle,
#chart [id$="-radix-planets-Saturn"] path,
#chart [id$="-radix-planets-Saturn"] circle { stroke: var(--astro-earth); }
#chart [id$="-radix-signs-Gemini"] path,
#chart [id$="-radix-signs-Libra"] path,
#chart [id$="-radix-signs-Aquarius"] path,
#chart [id$="-radix-planets-Mercury"] path,
#chart [id$="-radix-planets-Mercury"] circle,
#chart [id$="-radix-planets-Uranus"] path,
#chart [id$="-radix-planets-Uranus"] circle { stroke: var(--astro-air); }
#chart [id$="-radix-signs-Cancer"] path,
#chart [id$="-radix-signs-Scorpio"] path,
#chart [id$="-radix-signs-Pisces"] path,
#chart [id$="-radix-planets-Moon"] path,
#chart [id$="-radix-planets-Moon"] circle,
#chart [id$="-radix-planets-Neptune"] path,
#chart [id$="-radix-planets-Neptune"] circle,
#chart [id$="-radix-planets-Pluto"] path,
#chart [id$="-radix-planets-Pluto"] circle { stroke: var(--astro-water); }

.warnings {
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--astro-warning);
  min-height: 1.2em;
}

/* Tables grid */
.tables-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .tables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .tables-grid { grid-template-columns: 1fr; }
}

.tables-grid table { font-size: .78rem; }
.tables-grid th, .tables-grid td { padding: .18rem .45rem; }
.tables-grid thead th { padding-block: .22rem; font-size: .65rem; }

.table-section {
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  padding: 0 1rem;
  overflow: hidden;
}
.table-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 0;
}
.table-section > summary::-webkit-details-marker { display: none; }
.table-section > summary::before {
  content: '▸';
  color: var(--astro-fg-dim);
  display: inline-block;
  font-size: .85rem;
  flex: 0 0 auto;
  transition: transform .15s ease;
}
.table-section[open] > summary::before { transform: rotate(90deg); }
.table-section > summary h3 {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--astro-fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table-section > summary .checkbox.inline { margin-left: auto; }

.table-section > table {
  margin: 0 -1rem;
  width: calc(100% + 2rem);
  border: none;
  border-top: 1px solid var(--astro-border);
  border-radius: 0;
  margin-bottom: 0;
}
.table-section > table thead th { background: transparent; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: .22rem .5rem;
  border-bottom: 1px solid var(--astro-border);
  white-space: nowrap;
  color: var(--astro-fg);
}
thead th {
  background: var(--astro-bg-elev-2);
  font-weight: 600;
  color: var(--astro-fg-dim);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-block: .25rem;
}
tbody tr:last-child td { border-bottom: none; }

td.pos { font-variant-numeric: tabular-nums; }

#planets-table th:last-child,
#planets-table td.hs,
#points-table th:last-child,
#points-table td.hs,
#houses-table th:first-child,
#houses-table td.hs {
  text-align: right;
  padding-inline: .55rem;
}
#planets-table th:last-child,
#points-table th:last-child,
#houses-table th:first-child {
  color: var(--astro-fg-dim);
}
td.hs { color: var(--astro-fg-dim); }

#aspects-table td.glyph { padding-inline: .35rem; text-align: center; }
#aspects-table th:last-child,
#aspects-table td.orb {
  text-align: right;
  color: var(--astro-fg-dim);
  font-variant-numeric: tabular-nums;
}

/* Aspects can run long (60+ rows with minor on). Cap the table at roughly the
   Houses-table height (12 rows + header ≈ 17rem) and scroll inside. Sticky
   thead keeps column labels visible while scrolling. */
#aspects-table {
  display: block;
  max-height: 17rem;
  overflow-y: auto;
}
#aspects-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--astro-bg-elev-2);
}

.glyph {
  font-weight: 600;
  color: var(--astro-fg);
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols2", "DejaVu Sans", sans-serif;
  font-variant-emoji: text;
}

/* Element & aspect colour utilities — applied to glyph cells. */
.elem-fire,  td.elem-fire  { color: var(--astro-fire); }
.elem-earth, td.elem-earth { color: var(--astro-earth); }
.elem-air,   td.elem-air   { color: var(--astro-air); }
.elem-water, td.elem-water { color: var(--astro-water); }

.aspect-major { color: var(--astro-aspect-major); }
.aspect-soft  { color: var(--astro-aspect-soft); }
.aspect-hard  { color: var(--astro-aspect-hard); }

.retro {
  color: var(--astro-retro);
  font-weight: 700;
  margin-left: .15em;
}

/* ============================================================
   Legend — collapsible reference panel.
   ============================================================ */

.legend {
  margin-top: 1.5rem;
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  padding: 0 1.25rem;
}
.legend > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  color: var(--astro-fg);
  padding: 1rem 0;
  list-style: none;
}
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .5rem;
  color: var(--astro-fg-dim);
  transition: transform .15s ease;
}
.legend[open] > summary::before { transform: rotate(90deg); }

.legend-section {
  border-top: 1px solid var(--astro-border);
  padding: 1rem 0;
}
.legend-section:last-child { padding-bottom: 1.25rem; }

.legend-section h4 {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--astro-fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.legend-note {
  margin: 0 0 .6rem;
  color: var(--astro-fg-dim);
  font-size: .9rem;
}
.legend-note + .legend-note { margin-top: .6rem; margin-bottom: 0; }

.legend-list, .legend-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .9rem;
}
.legend-list { display: grid; gap: .35rem; }
.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .9rem;
}
@media (max-width: 540px) {
  .legend-grid { grid-template-columns: 1fr; }
}
.legend-list li,
.legend-grid li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.legend-swatch {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
  align-self: center;
}
.legend .glyph {
  display: inline-block;
  width: 1.3rem;
  text-align: center;
  flex: 0 0 auto;
  font-size: 1.05rem;
}

/* ============================================================
   Analysis section — bars, groups, synthetic cards.
   ============================================================ */

.analysis-section {
  margin-top: 1rem;
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  padding: 0 1.25rem;
}
.analysis-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 0;
}
.analysis-section > summary::-webkit-details-marker { display: none; }
.analysis-section > summary::before {
  content: '▸';
  color: var(--astro-fg-dim);
  display: inline-block;
  font-size: .85rem;
  transition: transform .15s ease;
}
.analysis-section[open] > summary::before { transform: rotate(90deg); }
.analysis-section > summary h3 {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--astro-fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.analysis-text-btn {
  margin-left: auto;
  background: var(--astro-bg-elev-2);
  color: var(--astro-fg);
  border: 1px solid var(--astro-border);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .75rem;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.analysis-text-btn:hover {
  border-color: var(--pm-purple-400);
  color: var(--pm-white);
}
.analysis-text-btn:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

.analysis-intro {
  margin: 0 0 .75rem;
  color: var(--astro-fg-dim);
  font-size: .85rem;
  border-top: 1px solid var(--astro-border);
  padding-top: .9rem;
}

.analysis-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-bottom: 1.25rem;
}
@media (max-width: 720px) {
  .analysis-body { grid-template-columns: 1fr; }
}

.analysis-block {
  background: var(--astro-bg-elev-2);
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  padding: .85rem 1rem;
}
.analysis-block h4 {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--astro-fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.analysis-subhead {
  margin: .9rem 0 .35rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--astro-fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.analysis-note {
  margin: 0 0 .55rem;
  color: var(--astro-fg-dim);
  font-size: .82rem;
}

.analysis-total {
  margin: .55rem 0 0;
  color: var(--astro-fg-dimmer);
  font-size: .75rem;
  text-align: right;
}

/* Bars */
.analysis-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.analysis-bars li {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.analysis-bars .bar-label { font-weight: 600; }
.analysis-bars .bar {
  height: 8px;
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.analysis-bars .bar-fill {
  display: block;
  height: 100%;
  background: var(--astro-fg-dimmer);
  border-radius: 3px;
  transition: width .25s ease;
}
.analysis-bars .bar-count {
  font-weight: 600;
  min-width: 1.25rem;
  text-align: right;
}
.analysis-bars .bar-blurb {
  grid-column: 1 / -1;
  color: var(--astro-fg-dim);
  font-size: .76rem;
}
.analysis-bars li.elem-fire  .bar-fill { background: var(--astro-fire);  }
.analysis-bars li.elem-earth .bar-fill { background: var(--astro-earth); }
.analysis-bars li.elem-air   .bar-fill { background: var(--astro-air);   }
.analysis-bars li.elem-water .bar-fill { background: var(--astro-water); }

/* Group rows */
.analysis-groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.analysis-groups li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .6rem;
  font-size: .85rem;
  padding: .35rem .55rem;
  border-radius: 6px;
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
}
.analysis-groups li.dominant {
  border-color: var(--pm-purple-500);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-purple-400) 40%, transparent);
}
.analysis-groups .group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .55rem;
}
.analysis-groups .group-range { color: var(--astro-fg-dim); font-size: .78rem; }
.analysis-groups .group-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.analysis-groups .group-blurb {
  grid-column: 1 / -1;
  color: var(--astro-fg-dim);
  font-size: .8rem;
  margin-top: .25rem;
}
.analysis-groups.compact li { padding: .25rem .55rem; }

.analysis-houses {
  list-style: none;
  margin: 0 0 .25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  font-size: .85rem;
}
.analysis-houses li {
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: 999px;
  padding: .15rem .55rem;
  font-variant-numeric: tabular-nums;
  color: var(--astro-fg);
}
.analysis-houses .house-num { font-weight: 700; margin-right: .15rem; }

/* Synthetic cards */
.analysis-block.synthetic-block { grid-column: 1 / -1; }
.synthetic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .5rem;
}
@media (max-width: 720px) {
  .synthetic-grid { grid-template-columns: 1fr; }
}
.synthetic-card {
  background: var(--astro-bg-elev);
  border: 1px solid var(--astro-border);
  border-radius: .5rem;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.synthetic-card.synthetic-tied { border-color: var(--pm-purple-500); }
.synthetic-card h5 {
  margin: 0;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--astro-fg-dim);
}
.synthetic-source { margin: 0; font-size: .8rem; color: var(--astro-fg-dim); }
.synthetic-signs {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.synthetic-signs li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .65rem;
  align-items: center;
}
.synthetic-glyph {
  grid-row: 1 / 3;
  font-size: 2.4rem;
  line-height: 1;
}
.synthetic-name { font-size: 1.15rem; font-weight: 700; align-self: end; color: var(--pm-white); }
.synthetic-blurb { font-size: .85rem; color: var(--astro-fg-dim); align-self: start; }
.synthetic-meta {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: var(--astro-fg-dim);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: baseline;
}
.synthetic-meta .glyph { font-weight: 600; }
.synthetic-sep { opacity: .5; }
.synthetic-tied-note {
  margin-left: auto;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pm-purple-300);
}
.synthetic-empty { justify-content: flex-start; }

/* ============================================================
   Analysis dialog (native <dialog>, skinned to PM tokens).
   ============================================================ */

.analysis-dialog {
  width: min(720px, calc(100vw - 2rem));
  max-height: min(80vh, 800px);
  padding: 0;
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-radius);
  background: var(--astro-bg-elev);
  color: var(--astro-fg);
  box-shadow: var(--shadow-lg);
}
.analysis-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.analysis-dialog-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--astro-border);
  background: var(--astro-bg-elev-2);
}
.analysis-dialog-head h3 {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.analysis-dialog-actions {
  margin-left: auto;
  display: flex;
  gap: .5rem;
}

.dialog-btn {
  background: var(--pm-purple-500);
  color: var(--pm-white);
  border: 1px solid transparent;
  border-radius: .35rem;
  padding: .35rem .8rem;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
.dialog-btn:hover { background: var(--pm-purple-400); }
.dialog-btn.copied { background: var(--pm-purple-700); }
.dialog-btn-secondary {
  background: var(--astro-bg-elev);
  color: var(--astro-fg);
  border-color: var(--astro-border);
  font-weight: 500;
}
.dialog-btn-secondary:hover {
  background: var(--astro-bg-elev-2);
  border-color: var(--pm-purple-400);
}
.dialog-btn:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

/* Pull astrological / zodiac glyphs from a monochrome symbol font so they
   render as text instead of color emoji. unicode-range scopes the fallback. */
@font-face {
  font-family: 'AstroSymbolsText';
  src: local('Apple Symbols'),
       local('Segoe UI Symbol'),
       local('Noto Sans Symbols 2'),
       local('Noto Sans Symbols'),
       local('Symbola');
  unicode-range: U+2600-26FF, U+2640-265F, U+FE0E;
}

.analysis-md-rendered {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(80vh - 3.5rem);
  overflow: auto;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--astro-bg-elev);
  color: var(--astro-fg);
  font-size: .9rem;
  line-height: 1.55;
  outline: none;
  font-variant-emoji: text;
  font-family: 'AstroSymbolsText', var(--ff-body);
}
.analysis-md-rendered :first-child { margin-top: 0; }
.analysis-md-rendered :last-child { margin-bottom: 0; }
.analysis-md-rendered h1 {
  margin: 0 0 .5rem;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pm-white);
}
.analysis-md-rendered h2 {
  margin: 1.25rem 0 .4rem;
  padding-bottom: .25rem;
  font-size: 1rem;
  border-bottom: 1px solid var(--astro-border);
  color: var(--pm-white);
}
.analysis-md-rendered h3 {
  margin: .9rem 0 .35rem;
  font-size: .9rem;
  color: var(--astro-fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.analysis-md-rendered p { margin: 0 0 .65rem; color: var(--astro-fg); }
.analysis-md-rendered p em { color: var(--astro-fg-dim); font-style: italic; }
.analysis-md-rendered ul { margin: 0 0 .65rem; padding-left: 1.2rem; }
.analysis-md-rendered li { margin: .15rem 0; }
.analysis-md-rendered strong { color: var(--pm-white); font-weight: 700; }
.analysis-md-rendered table {
  width: 100%;
  border-collapse: collapse;
  margin: .25rem 0 .9rem;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.analysis-md-rendered th,
.analysis-md-rendered td {
  text-align: left;
  padding: .3rem .55rem;
  border-bottom: 1px solid var(--astro-border);
}
.analysis-md-rendered thead th {
  font-weight: 600;
  color: var(--astro-fg-dim);
  border-bottom: 1px solid var(--astro-border);
  background: var(--astro-bg-elev-2);
}
.analysis-md-rendered tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   Mobile tweaks.
   ============================================================ */

@media (max-width: 540px) {
  main { padding: 1rem 0.85rem 1.5rem; }
  .astro-page-header h1 { font-size: 1.75rem; }
  .astro-form { padding: 1rem; }
  .astro-topbar { padding: 0 10px; }
}