/* ============================================================
   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");
@import url("/css-v2/components/hellobar.css");
@import url("/css-v2/components/cookie-consent.css");
@import url("/css-v2/components/pwa-install.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;
}

/* ============================================================
   Font-stack override — extend PM body/display tokens with
   Arabic + Simplified Chinese system fallbacks so the al/zh
   locales render in native OS fonts without any new web fonts
   to download. Inter / Fraunces stay first, so Latin and
   Cyrillic glyphs render identically to the rest of the site.
   ============================================================ */
:root {
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", "Segoe UI Arabic",
             "Geeza Pro", "Tahoma", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Noto Sans Arabic", "Noto Sans SC",
             Helvetica, Arial, sans-serif;
  --ff-display: "Fraunces", ui-serif, Georgia, "Segoe UI Arabic", "Geeza Pro",
                "PingFang SC", "Microsoft YaHei", "Noto Sans Arabic",
                "Noto Sans SC", "Times New Roman", serif;
}

/* ============================================================
   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: calc(var(--hellobar-h, 0px) + var(--pwa-install-h, 0px));
  z-index: 60;
}
/* Language switcher — replaces the static "Cosmogram" title in the topbar.
   Hidden multilanguage UI: globe icon + 2-letter active code in the corner;
   menu opens a small dropdown with the four supported languages. */
.lang-switcher { position: relative; margin-left: auto; }
.lang-switcher__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--astro-fg-dim); font-size: 13px; font-weight: 500;
  font-family: var(--ff-body);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.lang-switcher__btn:hover,
.lang-switcher__btn[aria-expanded="true"] {
  color: var(--astro-fg);
  background: rgba(255, 255, 255, 0.04);
}
.lang-switcher__btn:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}
.lang-switcher__icon { stroke: currentColor; flex: 0 0 auto; }
.lang-switcher__current { letter-spacing: 0.04em; }

.lang-switcher__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px; padding: 4px;
  background: rgba(20, 20, 24, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--astro-border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  list-style: none; margin: 0; z-index: 70;
}
.lang-switcher__menu[hidden] { display: none; }
.lang-switcher__menu li { margin: 0; }
.lang-switcher__menu button {
  width: 100%; padding: 8px 12px; text-align: left;
  background: transparent; border: 0; color: var(--astro-fg);
  font-family: var(--ff-body); font-size: 13px; cursor: pointer;
  border-radius: 4px;
}
.lang-switcher__menu button:hover,
.lang-switcher__menu button[aria-current="true"] {
  background: rgba(255, 255, 255, 0.06);
}
.lang-switcher__menu button[aria-current="true"] {
  color: var(--pm-purple-300);
}

/* 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, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 640px) {
  .astro-form .row { grid-template-columns: 1fr; }
}

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

.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%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--ff-body);
}

/* iOS Safari needs `-webkit-appearance: none` so CSS sizing applies (otherwise
   the input overflows its grid column). The flip side is that the input loses
   the implicit native chrome height that iOS gives text inputs, so the box
   ends up shorter than the Name field. `min-height` re-matches that height. */
.astro-form input[type="date"],
.astro-form input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  -webkit-min-logical-width: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 2.6rem;
}
.astro-form input[type="date"]::-webkit-date-and-time-value,
.astro-form input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}
.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 .5rem;
}
.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);
  scroll-margin-top: 72px;
}
.subtitle {
  margin: 0 0 .4rem;
  color: var(--astro-fg-dim);
  font-size: .9rem;
}
/* ISO-style subtitle. Every glyph is constant-width: digits via tabular-nums,
   3-letter weekday via monospace (Sun/Mon/Tue/Wed/Thu/Fri/Sat all = 3ch).
   No slot/min-width needed — the · separators sit at uniform distance from
   neighbouring content regardless of which value is showing. */
.subtitle .sub-field {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.subtitle .sub-weekday {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#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: .25rem 0 0;
  font-size: .85rem;
  color: var(--astro-warning);
}
.warnings:empty { display: none; }

/* 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; }
}

/* iOS standalone PWA — clear the translucent status bar.
   apple-mobile-web-app-status-bar-style: black-translucent draws the iOS
   status bar (clock, signal) over the page; extend the topbar by
   env(safe-area-inset-top) so its content sits below the clock. */
@media (display-mode: standalone) {
  .astro-topbar {
    height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
}