:root {
  /* Color Palette - Dark Celestial Observatory */
  --color-space-black: #0a0a0f;
  --color-midnight-blue: #1a2332;
  --color-deep-navy: #0f1620;
  --color-cream: #f4f1e8;
  --color-cream-dimmed: #c4c1b8;
  --color-copper: #c77d4b;
  --color-copper-bright: #e09664;
  --color-sage: #2d4a3e;
  --color-sage-light: #3d5a4e;

  /* Planet Colors */
  --planet-sun: #FFD700;
  --planet-moon: #FFFFFF;
  --planet-mercury: #87CEEB;
  --planet-venus: #90EE90;
  --planet-mars: #FF6347;
  --planet-jupiter: #9370DB;
  --planet-saturn: #696969;
  --planet-uranus: #40E0D0;
  --planet-neptune: #4169E1;
  --planet-pluto: #8B4513;

  /* Typography */
  --font-display: 'Crimson Pro', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-symbols: 'STIX Two Math', math;
  --font-kufic: 'Reem Kufi', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-space-black);
  color: var(--color-cream);
  position: relative;
}

/* Subtle constellation background pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--color-midnight-blue) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--color-deep-navy) 0%, transparent 50%);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* Subtle paper texture */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 1;
}

nav {
  background: linear-gradient(180deg, rgba(26, 35, 50, 0.8) 0%, rgba(10, 10, 15, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(199, 125, 75, 0.2);
  padding: 0.75rem 1.5rem;
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-copper) transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

nav::-webkit-scrollbar {
  height: 6px;
}

nav::-webkit-scrollbar-track {
  background: transparent;
}

nav::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 3px;
}

nav a {
  color: var(--color-cream-dimmed);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 auto;
  position: relative;
  border: 1px solid transparent;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 1px;
  background: var(--color-copper);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav a:hover {
  color: var(--color-cream);
  background: rgba(199, 125, 75, 0.08);
}

nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

nav a.active {
  color: var(--color-copper-bright);
  background: rgba(199, 125, 75, 0.15);
  border-color: rgba(199, 125, 75, 0.3);
  font-weight: 600;
}

nav .disabled {
  color: rgba(244, 241, 232, 0.25);
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: not-allowed;
  flex: 0 0 auto;
  font-style: italic;
}

main {
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: var(--color-copper) transparent;
}

main::-webkit-scrollbar {
  width: 8px;
}

main::-webkit-scrollbar-track {
  background: transparent;
}

main::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 4px;
}

h1 {
  color: var(--color-copper-bright);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(199, 125, 75, 0.3);
}

/* Wide screen layout: sidebar navigation */
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }

  nav {
    flex-direction: column;
    width: 220px;
    padding: 2.5rem 1.25rem;
    gap: 0.35rem;
    overflow: visible;
    border-bottom: none;
    border-right: 1px solid rgba(199, 125, 75, 0.2);
    background: linear-gradient(90deg, rgba(26, 35, 50, 0.8) 0%, rgba(10, 10, 15, 0.9) 100%);
  }

  nav a {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  nav a::after {
    left: 0;
    transform: translateX(0) scaleX(0);
    transform-origin: left;
    width: 3px;
    height: 70%;
    top: 15%;
    bottom: auto;
  }

  nav a:hover::after {
    transform: translateX(0) scaleX(1);
  }

  nav .disabled {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  main {
    padding: 1.5rem;
  }
}

/* ======================== */
/* Planet color utilities    */
/* ======================== */

.planet-color--sun { color: var(--planet-sun); }
.planet-color--moon { color: var(--planet-moon); }
.planet-color--mercury { color: var(--planet-mercury); }
.planet-color--venus { color: var(--planet-venus); }
.planet-color--mars { color: var(--planet-mars); }
.planet-color--jupiter { color: var(--planet-jupiter); }
.planet-color--saturn { color: var(--planet-saturn); }
.planet-color--uranus { color: var(--planet-uranus); }
.planet-color--neptune { color: var(--planet-neptune); }
.planet-color--pluto { color: var(--planet-pluto); }

.planet-bg--sun { background-color: var(--planet-sun); }
.planet-bg--moon { background-color: var(--planet-moon); }
.planet-bg--mercury { background-color: var(--planet-mercury); }
.planet-bg--venus { background-color: var(--planet-venus); }
.planet-bg--mars { background-color: var(--planet-mars); }
.planet-bg--jupiter { background-color: var(--planet-jupiter); }
.planet-bg--saturn { background-color: var(--planet-saturn); }
.planet-bg--uranus { background-color: var(--planet-uranus); }
.planet-bg--neptune { background-color: var(--planet-neptune); }
.planet-bg--pluto { background-color: var(--planet-pluto); }

/* Tile symbol part colors — planets reuse planet colors */
.tile-planet--sun { color: var(--planet-sun); }
.tile-planet--moon { color: var(--planet-moon); }
.tile-planet--mercury { color: var(--planet-mercury); }
.tile-planet--venus { color: var(--planet-venus); }
.tile-planet--mars { color: var(--planet-mars); }
.tile-planet--jupiter { color: var(--planet-jupiter); }
.tile-planet--saturn { color: var(--planet-saturn); }
.tile-planet--uranus { color: var(--planet-uranus); }
.tile-planet--neptune { color: var(--planet-neptune); }
.tile-planet--pluto { color: var(--planet-pluto); }
.tile-aspect { color: var(--color-cream); }

/* Golden Dawn King Scale zodiac sign colors */
.tile-sign--aries { --sign-color: #C00000; color: var(--sign-color); }
.tile-sign--taurus { --sign-color: #FF6600; color: var(--sign-color); }
.tile-sign--gemini { --sign-color: #FFCC00; color: var(--sign-color); }
.tile-sign--cancer { --sign-color: #FFB347; color: var(--sign-color); }
.tile-sign--leo { --sign-color: #FFDF00; color: var(--sign-color); }
.tile-sign--virgo { --sign-color: #99CC33; color: var(--sign-color); }
.tile-sign--libra { --sign-color: #33CC33; color: var(--sign-color); }
.tile-sign--scorpio { --sign-color: #009999; color: var(--sign-color); }
.tile-sign--sagittarius { --sign-color: #3366CC; color: var(--sign-color); }
.tile-sign--capricorn { --sign-color: #2B2B80; color: var(--sign-color); }
.tile-sign--aquarius { --sign-color: #7744AA; color: var(--sign-color); }
.tile-sign--pisces { --sign-color: #9966CC; color: var(--sign-color); }

/* ======================== */
/* Daily page               */
/* ======================== */

/* Override layout/main constraints for scrollable daily page.
   (body lock removed globally; body override no longer needed.) */
body:has(.daily-page) .layout {
  height: auto;
  min-height: 100vh;
}

body:has(.daily-page) main {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}

.daily-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

.daily-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .daily-header {
    flex-direction: row;
    align-items: stretch;
  }
}

/* Glassmorphic card base */
.moon-phase-card,
.daily-heading,
.location-card {
  flex: 1;
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Moon phase card */
.moon-phase-visual {
  width: 80px;
  height: 80px;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.moon-svg {
  width: 80px;
  height: 80px;
  display: block;
}

.moon-phase-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.moon-phase-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-cream);
}

.moon-age {
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.moon-manzil {
  font-size: 0.85rem;
  color: var(--color-copper-bright);
  font-style: italic;
}

.moon-manzil-number {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
}

/* Date heading card */
.daily-heading h1 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.daily-date-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.daily-date-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-nav-arrow {
  color: var(--color-copper);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
  line-height: 1;
}

.date-nav-arrow:hover {
  color: var(--color-copper-bright);
  background: rgba(199, 125, 75, 0.15);
}

.date-nav-relative {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  margin-top: 0.15rem;
}

.date-nav-relative--link {
  color: var(--color-copper);
  text-decoration: none;
}

.date-nav-relative--link:hover {
  color: var(--color-copper-bright);
  text-decoration: underline;
}

.daily-date {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-cream);
  margin: 0;
}

.daily-ruler {
  font-size: 1rem;
  color: var(--color-cream-dimmed);
  margin: 0;
  font-family: var(--font-symbols);
}

.daily-ruler span {
  font-size: 1.3rem;
  margin-right: 0.25rem;
}

/* Location card */
.location-card {
  position: relative;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.location-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-cream);
}

.location-coords {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.location-time {
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.location-birth {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.location-birth--prompt {
  color: var(--color-cream-dimmed);
  font-style: italic;
  opacity: 0.6;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.location-birth--prompt:hover {
  opacity: 0.9;
}

.location-change-btn {
  margin-top: 0.75rem;
  background: transparent;
  border: 1px solid rgba(199, 125, 75, 0.4);
  color: var(--color-copper-bright);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.location-change-btn:hover {
  background: rgba(199, 125, 75, 0.15);
  border-color: var(--color-copper-bright);
}

/* Location modal */
.location-modal {
  border: 1px solid rgba(199, 125, 75, 0.3);
  border-radius: 12px;
  background: var(--color-space-black);
  color: var(--color-cream);
  padding: 0;
  max-width: 400px;
  width: 90vw;
}

.location-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.location-modal-content {
  padding: 1.5rem;
}

.location-modal-content h3 {
  font-family: var(--font-display);
  color: var(--color-copper-bright);
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.location-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.location-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.location-form input {
  background: var(--color-deep-navy);
  border: 1px solid rgba(199, 125, 75, 0.3);
  border-radius: 4px;
  color: var(--color-cream);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.location-form input:focus {
  outline: none;
  border-color: var(--color-copper-bright);
}

.location-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.location-modal-actions button {
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.location-gps-btn {
  background: transparent;
  border-color: rgba(199, 125, 75, 0.3) !important;
  color: var(--color-copper-bright);
  margin-right: auto;
}

.location-gps-btn:hover {
  background: rgba(199, 125, 75, 0.1);
}

.location-save-btn {
  background: var(--color-sage);
  color: var(--color-cream);
  border-color: var(--color-sage-light) !important;
}

.location-save-btn:hover {
  background: var(--color-sage-light);
}

.location-cancel-btn {
  background: transparent;
  color: var(--color-cream-dimmed);
}

.location-cancel-btn:hover {
  color: var(--color-cream);
}

/* ======================== */
/* Moon Positions Bar        */
/* ======================== */

.moon-positions-bar {
  display: flex;
  gap: 1px;
  margin-bottom: 2rem;
  background: rgba(199, 125, 75, 0.1);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.moon-pos-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(8px);
  text-align: center;
}

.moon-pos-tradition {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper);
  margin-bottom: 0.25rem;
}

.moon-pos-name {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.moon-pos-translation {
  font-size: 0.65rem;
  color: var(--color-cream-dimmed);
  font-style: italic;
}

.moon-pos-detail {
  font-size: 0.7rem;
  color: var(--color-cream-dimmed);
}

@media (max-width: 767px) {
  .moon-positions-bar {
    flex-direction: column;
  }
}

/* ======================== */
/* Sun Decan Bar             */
/* ======================== */

.sign-bars-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.sun-decan-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sun-decan-bar:last-child {
  margin-bottom: 0;
}

.sun-decan-bar__flank {
  font-family: var(--font-symbols);
  font-size: 1.2rem;
  color: var(--color-cream-dimmed);
  flex-shrink: 0;
  opacity: 0.5;
  width: 1.5rem;
  text-align: center;
}

.sun-decan-bar__track {
  flex: 1;
  position: relative;
  height: 36px;
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 4px;
  overflow: visible;
}

.sun-decan-bar__glyph {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  color: var(--color-cream-dimmed);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.sun-decan-bar__tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--color-cream-dimmed);
}

.sun-decan-bar__tick--major {
  width: 1px;
  height: 14px;
  opacity: 0.5;
}

.sun-decan-bar__tick--minor {
  width: 1px;
  height: 6px;
  opacity: 0.2;
}

.sun-decan-bar__tick--edge {
  width: 1px;
  height: 10px;
  opacity: 0.35;
}

.sun-decan-bar__star {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
  cursor: default;
  /* Larger hit area for hover */
  padding: 6px;
}

.sun-decan-bar__star::after {
  content: '';
  display: block;
  width: var(--star-size, 4px);
  height: var(--star-size, 4px);
  background: var(--color-cream);
  border-radius: 50%;
  opacity: var(--star-opacity, 0.5);
}

.sun-decan-bar__star-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-space-black);
  border: 1px solid rgba(199, 125, 75, 0.3);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-cream);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.sun-decan-bar__star:hover .sun-decan-bar__star-tooltip {
  display: block;
}

.sun-decan-bar__moon-arc {
  position: absolute;
  top: 50%;
  height: 1px;
  background: #fff;
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}

.sun-decan-bar__moon-endpoint {
  color: #fff !important;
  opacity: 1;
  font-size: 0.9rem !important;
}

.sun-decan-bar__planet {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.sun-decan-bar__natal-planet {
  position: absolute;
  top: 75%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 0.8rem;
  opacity: 0.5;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.sun-decan-bar__sun {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.4rem;
  color: var(--planet-sun);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  z-index: 7;
  pointer-events: none;
}

.sun-decan-bar--moon .sun-decan-bar__track {
  border-color: rgba(192, 192, 192, 0.2);
}

.sign-bar-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  text-align: center;
  padding: 0.1rem 0;
}

.sign-bar-elision {
  text-align: center;
  font-family: var(--font-symbols);
  font-size: 0.9rem;
  color: var(--color-cream-dimmed);
  opacity: 0.4;
  padding: 0.4rem 0;
  letter-spacing: 0.5em;
}

/* ======================== */
/* Ongoing Events           */
/* ======================== */

.ongoing-events-section {
  margin-bottom: 2rem;
}

.ongoing-events-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-copper-bright);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.ongoing-events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.event-tile {
  background: rgba(26, 35, 50, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(199, 125, 75, 0.12);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 160px;
}

.event-tile-symbol {
  font-family: var(--font-symbols);
  font-size: 1.4rem;
}

.event-tile-label {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.event-tile-sign {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  margin-left: auto;
}

.event-tile-remaining {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-copper);
  white-space: nowrap;
}

.event-tile--natal_aspect {
  border: 1px solid rgba(199, 125, 75, 0.2);
}

/* ======================== */
/* Planetary Hours Timeline */
/* ======================== */

.planetary-hours-section {
  margin-bottom: 2rem;
}

.planetary-hours-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-copper-bright);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.planetary-hours-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.planetary-hours-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hour-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 4px;
  padding: 1px;
}

.hour-group--sun     { background: rgba(255, 215, 0, 0.15); }
.hour-group--moon    { background: rgba(192, 192, 192, 0.10); }
.hour-group--mercury { background: rgba(135, 206, 235, 0.12); }
.hour-group--venus   { background: rgba(144, 238, 144, 0.12); }
.hour-group--mars    { background: rgba(255, 99, 71, 0.12); }
.hour-group--jupiter { background: rgba(147, 112, 219, 0.12); }
.hour-group--saturn  { background: rgba(105, 105, 105, 0.10); }

.planetary-hour-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.hour-roman {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
  opacity: 0.6;
}

.hour-planet-symbol {
  font-family: var(--font-symbols);
  font-size: 1.2rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.hour-planet-name {
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.hour-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  min-width: 65px;
}

.hour-solar-label {
  font-size: 0.75rem;
  color: var(--color-copper);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Aspect rows in timeline */
.aspect-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.aspect-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  min-width: 80px;
}

.aspect-notation {
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.aspect-glyph {
  color: var(--color-cream-dimmed);
  font-size: 0.9rem;
}

.aspect-description {
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.timeline-empty {
  color: var(--color-cream-dimmed);
  font-style: italic;
  font-size: 0.9rem;
  padding: 1rem;
}

/* Ingress rows in timeline */
.ingress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

.ingress-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
  min-width: 80px;
}

.ingress-notation {
  font-family: var(--font-symbols);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.rise-set-svg {
  width: 18px;
  height: 14px;
  vertical-align: middle;
}

.ingress-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ingress-arrow {
  color: var(--color-cream-dimmed);
  font-size: 0.85rem;
}

.ingress-destination {
  font-size: 1.1rem;
  color: var(--color-cream);
}

.ingress-row--manzil .ingress-destination {
  font-family: var(--font-kufic);
  font-size: 1.2rem;
}

.ingress-description {
  font-size: 0.85rem;
  color: var(--color-cream);
}

.ingress-detail {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  margin-left: auto;
  text-align: right;
}

/* Rarity-based event sizing: rarer events get larger text */
.rarity-1 .ingress-description,
.rarity-1 .aspect-description { font-size: 0.6rem; }
.rarity-1 .ingress-notation,
.rarity-1 .aspect-notation { font-size: 0.75rem; }
.rarity-1 .ingress-detail { font-size: 0.55rem; }
.rarity-1.ingress-row,
.rarity-1.aspect-row { padding-top: 0.25rem; padding-bottom: 0.25rem; opacity: 0.7; }

.rarity-2 .ingress-description,
.rarity-2 .aspect-description { font-size: 0.72rem; }
.rarity-2 .ingress-notation,
.rarity-2 .aspect-notation { font-size: 0.95rem; }
.rarity-2 .ingress-detail { font-size: 0.65rem; }
.rarity-2.ingress-row,
.rarity-2.aspect-row { padding-top: 0.4rem; padding-bottom: 0.4rem; }

/* rarity-3 = base sizes (no override needed) */

.rarity-4 .ingress-description,
.rarity-4 .aspect-description { font-size: 1.3rem; font-weight: 500; }
.rarity-4 .ingress-notation,
.rarity-4 .aspect-notation { font-size: 1.75rem; }
.rarity-4 .ingress-detail { font-size: 1.0rem; }
.rarity-4.ingress-row,
.rarity-4.aspect-row { padding-top: 1.0rem; padding-bottom: 1.0rem; }

.rarity-5 .ingress-description,
.rarity-5 .aspect-description { font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.rarity-5 .ingress-notation,
.rarity-5 .aspect-notation { font-size: 2.5rem; }
.rarity-5 .ingress-detail { font-size: 1.2rem; }
.rarity-5.ingress-row,
.rarity-5.aspect-row { padding-top: 1.4rem; padding-bottom: 1.4rem; }

/* Expandable detail panels on timeline rows */
.timeline-panel {
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem 0.6rem;
  margin-left: calc(80px + 0.75rem);
  border-left: 2px solid var(--color-cream-dimmed);
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.is-open + .timeline-panel {
  display: flex;
}

.timeline-panel__keyword {
  color: var(--color-cream);
  font-size: 0.85rem;
  padding-left: 1.6em;
}

.timeline-panel__symbol {
  font-family: var(--font-symbols);
  display: inline-block;
  width: 1.3em;
  margin-left: -1.6em;
  margin-right: 0.3em;
  text-align: center;
  vertical-align: middle;
  transform-origin: center;
  letter-spacing: -0.05em;
}

.timeline-panel__symbol::after {
  content: " ";
  font-size: 0;
}


.bound-ruler {
  margin-bottom: 0.2rem;
}

.bound-ruler-inline {
  vertical-align: middle;
}

.timeline-panel__symbol--wide {
  width: auto;
  min-width: 1.3em;
  white-space: nowrap;
}

.timeline-panel__symbol--kufic {
  font-family: var(--font-kufic);
}

.timeline-panel__planet {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.timeline-panel__sign {
  font-size: 0.8rem;
  color: var(--color-cream-dimmed);
}

.now-marker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
}

.now-marker__time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-copper-bright);
  min-width: 80px;
  font-weight: 600;
}

.now-marker__line {
  flex: 1;
  height: 1px;
  background: var(--color-copper-bright);
}

.now-marker__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-copper-bright);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Moon mansion display in moon phase card */
.moon-mansion {
  font-size: 0.8rem;
  color: var(--color-copper-bright);
  font-style: italic;
}

.moon-mansion-script {
  font-size: 0.75rem;
  color: var(--color-cream-dimmed);
  font-style: normal;
}

.moon-mansion-translation {
  font-size: 0.65rem;
  color: var(--color-cream-dimmed);
  font-style: italic;
  margin-top: -0.15rem;
}

.moon-mansion-detail {
  font-size: 0.7rem;
  color: var(--color-cream-dimmed);
}

.pada-syllable {
  font-weight: 600;
  color: var(--color-copper-bright);
}

/* Ecliptic positions table (bottom of /daily) */
.positions-table-wrap {
  max-width: 640px;
  margin: 2.5rem auto 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.positions-table__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
  margin: 0 0 0.75rem;
}

.positions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.positions-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.positions-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.positions-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

.positions-row__body {
  font-weight: 500;
}

.positions-row__body .planet-color--sun,
.positions-row__body .planet-color--moon,
.positions-row__body .planet-color--mercury,
.positions-row__body .planet-color--venus,
.positions-row__body .planet-color--mars,
.positions-row__body .planet-color--jupiter,
.positions-row__body .planet-color--saturn,
.positions-row__body .planet-color--uranus,
.positions-row__body .planet-color--neptune,
.positions-row__body .planet-color--pluto {
  font-size: 1.15rem;
  margin-right: 0.4rem;
}

.positions-row__sign {
  margin-left: 0.5rem;
  color: var(--color-muted, #888);
}

.positions-row__missing {
  color: var(--color-muted, #888);
  opacity: 0.5;
}

/* Aspect-event permalink page (/aspects/<type>/<p1>/<p2>/<date>) */

/* main flex-centers its content; when the page is taller than the viewport
   that clips the top above the scroll origin (nav rows become unreachable).
   Opt out like the daily page does. Covers the old conjunction permalink
   page too — it shares the .conjunction-show root. */
body:has(.conjunction-show) .layout,
body:has(.home-show) .layout,
body:has(.aspects-index) .layout {
  height: auto;
  min-height: 100vh;
}

body:has(.conjunction-show) main,
body:has(.home-show) main,
body:has(.aspects-index) main {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}

.conjunction-show {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
}

.aspect-show {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aspect-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(196, 193, 184, 0.2);
  border-radius: 4px;
}

.aspect-nav-row__label {
  color: var(--color-cream-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
}

.aspect-nav-row__links {
  display: flex;
  gap: 1rem;
}

.aspect-nav-row__link {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.aspect-nav-row__link:hover {
  text-decoration: underline;
}

.aspect-info-panel {
  border-left: 2px solid var(--color-cream-dimmed);
  padding: 0.5rem 0.75rem 0.6rem;
}

.aspect-info-panel .timeline-panel {
  display: flex;
  margin-left: 0;
}

.aspect-info-panel__description {
  margin-top: 0.5rem;
  color: var(--color-cream);
  font-size: 0.9rem;
  line-height: 1.6;
}

.aspect-daily-link,
.aspect-gate-link {
  font-size: 0.9rem;
}

.aspect-daily-link a,
.aspect-gate-link a {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.aspect-daily-link a:hover,
.aspect-gate-link a:hover {
  text-decoration: underline;
}

.chart-wheel__aspect--primary {
  stroke-width: 2.5 !important;
  opacity: 1 !important;
}

/* Facts grid on aspect/conjunction show pages (Sign, Ecliptic longitude, etc.) */
.conjunction-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  margin: 0;
  align-items: baseline;
}

.conjunction-facts dt {
  color: var(--color-cream-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  margin: 0;
}

.conjunction-facts dd {
  color: inherit;
  margin: 0;
}


/* ======================== */
/* ======================== */
/* Modern Chart home page (planets.at /)   */
/* ======================== */

.home-show {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-title {
  margin: 0;
}

.home-date {
  margin: 0;
  color: var(--color-cream-dimmed);
  font-size: 0.95rem;
}

.home-time {
  font-family: var(--font-mono);
  color: var(--color-copper-bright);
}

.home-chart {
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
}

.home-section-label {
  margin: 0 0 0.75rem;
  color: var(--color-cream-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
}

.home-positions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1rem;
}

@media (min-width: 480px) {
  .home-positions-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 600px) {
  .home-positions-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-position {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(26, 35, 50, 0.4);
  border: 1px solid rgba(199, 125, 75, 0.15);
  border-radius: 6px;
  font-size: 0.85rem;
}

.home-position__glyph {
  font-size: 1.1rem;
}

.home-position__name {
  color: var(--color-cream);
  font-weight: 500;
  margin-right: auto;
}

.home-position__sign {
  color: var(--color-cream-dimmed);
  white-space: nowrap;
}

.home-position__degree {
  font-family: var(--font-mono);
  color: var(--color-copper-bright);
  white-space: nowrap;
}

.home-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-event {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(196, 193, 184, 0.2);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.home-event:hover {
  border-color: var(--color-copper-bright);
}

.home-event__time {
  font-family: var(--font-mono);
  color: var(--color-copper-bright);
  font-size: 0.85rem;
  white-space: nowrap;
}

.home-event__glyphs {
  font-size: 1.05rem;
  white-space: nowrap;
}

.home-event__aspect-glyph {
  color: var(--color-cream-dimmed);
  margin: 0 0.15rem;
}

.home-event__text {
  color: var(--color-cream-dimmed);
  font-size: 0.85rem;
}

.home-events-next {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-cream-dimmed);
}

.home-events-next__link,
.home-events-next a {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.home-events-next__link:hover,
.home-events-next a:hover {
  text-decoration: underline;
}

.home-footer-link {
  font-size: 0.9rem;
}

.home-footer-link a {
  color: var(--color-copper-bright);
  text-decoration: none;
}

.home-footer-link a:hover {
  text-decoration: underline;
}

/* ======================== */
/* Chart wheel refinements   */
/* ======================== */

/* STIX renders the astronomical glyphs as consistent line art; without an
   explicit family the browser falls back to whatever serif has coverage. */
.chart-wheel text {
  font-family: var(--font-symbols);
}

/* Sign glyphs tinted by classical element — reference ring, kept muted so
   the planets and aspect lines stay in front. Class fill wins over the
   SVG fill attribute, which remains as a fallback. */
.chart-wheel__sign--fire  { fill: #e08a5e; }
.chart-wheel__sign--earth { fill: #96b47c; }
.chart-wheel__sign--air   { fill: #8fbcd9; }
.chart-wheel__sign--water { fill: #6d8fc9; }
.chart-wheel__sign { opacity: 0.85; }

/* Elemental tints for text-presentation sign glyphs outside the wheel —
   same hues as the chart-wheel__sign--* fills. */
.sign-element--fire  { color: #e08a5e; }
.sign-element--earth { color: #96b47c; }
.sign-element--air   { color: #8fbcd9; }
.sign-element--water { color: #6d8fc9; }

/* ======================== */
/* Upcoming aspects index (planets.at /aspects) */
/* ======================== */

.aspects-index {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.aspects-index .home-section-label {
  margin-top: 0.5rem;
}

.aspects-index .home-events-list {
  margin-bottom: 0.5rem;
}

/* Daily-timeline permalink arrows — without this they render as default
   browser blue links. Dim until the row is hovered. */
.aspect-row__permalink {
  color: var(--color-copper-bright);
  text-decoration: none;
  opacity: 0.45;
  padding: 0 0.4rem;
}
.aspect-row:hover .aspect-row__permalink { opacity: 1; }
.aspect-row__permalink:hover { text-decoration: underline; }

/* Retrograde suffix on the aspect-facts sign rows (app/helpers/aspect_facts_helper.rb) */
.aspect-fact-retrograde {
  color: var(--color-cream-dimmed);
  font-size: 0.9em;
}

/* Today: the first slice of the new front page. */
.today-page {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 0 1.5rem 1.5rem;
}

/* Observer summary + "Change location": a line of text, not a button. */
.today-location-line {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-cream-dimmed);
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
}
.today-location-name { color: var(--color-cream); }
.today-location-coordinates,
.today-location-action { white-space: nowrap; }

.today-location-change {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0 0.15rem;
  border: 0;
  border-radius: 0.15rem;
  color: var(--color-copper-bright);
  background: none;
  font-size: inherit;
  line-height: 2.75rem;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(199, 125, 75, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.today-location-change:hover { color: var(--color-copper-bright); text-decoration-color: currentColor; }
.today-location-change:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.today-header {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  white-space: nowrap;
  overflow-x: auto;
}

.today-header h1 {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.today-band {
  display: flex;
  flex-basis: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.25em;
  align-items: baseline;
  font-size: clamp(0.5rem, 3.7cqw, 0.875rem);
  background-color: var(--day-color);
  color: var(--color-space-black);
  padding: 0.25rem 0.625rem;
}

.today-band--saturn {
  color: var(--color-cream);
}

body:has(.today-page) main {
  display: block;
  padding-top: 0;
}

.today-decan {
  width: 100%;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  background-color: var(--sign-color);
  color: var(--color-space-black);
}

.today-decan.tile-sign--aries,
.today-decan.tile-sign--sagittarius,
.today-decan.tile-sign--capricorn,
.today-decan.tile-sign--aquarius {
  color: var(--color-cream);
}

.today-solar-term {
  width: 100%;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  color: #000;
  background-color: #fff;
}

.today-zodiac-grid {
  --grid-line-color: #4d4d4d;
  border: 1px solid var(--grid-line-color);
  --grid-columns: repeating-linear-gradient(to right,
    transparent 0,
    transparent calc(100% / 12 - 1px),
    var(--grid-line-color) calc(100% / 12 - 1px),
    var(--grid-line-color) calc(100% / 12));
}

.today-zodiac-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  text-align: center;
  border-bottom: 1px solid var(--grid-line-color);
  background-image: var(--grid-columns);
}

.today-zodiac-header > span {
  padding: 0.25rem 0;
  font-family: var(--font-symbols);
  font-size: 1.25rem;
}

.today-zodiac-row {
  position: relative;
  height: 2rem;
  background-color: color-mix(in srgb, var(--row-color) 50%, #000);
  background-image: repeating-linear-gradient(to right,
    transparent calc(var(--planet-position) - 100% / 24 - 100% / 12),
    transparent calc(var(--planet-position) - 100% / 24 - 1px),
    var(--grid-line-color) calc(var(--planet-position) - 100% / 24 - 1px),
    var(--grid-line-color) calc(var(--planet-position) - 100% / 24));
  color: var(--color-cream);
}

.today-zodiac-planet,
.today-zodiac-aspect {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.25rem;
}

.today-zodiac-row + .today-zodiac-row {
  border-top: 1px solid var(--grid-line-color);
}

.today-zodiac-planet {
  font-weight: 700;
  -webkit-text-stroke: 0.35px currentColor;
}

.today-zodiac-aspect {
  color: #cccccc;
}

.today-zodiac-planet--retrograde {
  color: #ff0000;
}

.today-zodiac-station {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.today-zodiac-station--pre-shadow { background-color: #ff0000; }
.today-zodiac-station--retrograde { background-color: #0000ff; }
.today-zodiac-station--post-shadow { background-color: #000000; }

.today-zodiac-row + .today-zodiac-row .today-zodiac-station {
  top: calc(50% - 0.5px);
}

.today-zodiac-node {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-symbols);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
}

/* Today Moon/calendar card: keep the shared Moon SVG and zodiac coordinates. */
.today-moon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 1rem;
  padding: 0.5rem 0.625rem;
  align-items: stretch;
}

.today-moon-row .moon-phase-card {
  align-items: flex-start;
  justify-content: flex-start;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

.today-moon-row .moon-phase-name {
  font-size: clamp(1.1rem, 2.5vw, 2rem);
}

.today-calendar-dates {
  margin: 0;
  padding-left: 1rem;
  border-left: 1px solid #4d4d4d;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  min-width: 0;
}

.today-calendar-dates > div {
  padding: 0.25rem 0;
}

.today-calendar-dates > div + div {
  border-top: 1px solid #4d4d4d;
}

.today-calendar-dates time {
  display: grid;
  /* min-content floors: a column never gets narrower than its longest word. */
  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1.3fr);
  direction: ltr;
  gap: 0.75rem;
  align-items: baseline;
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.35;
}

.today-calendar-transliterated {
  text-align: left;
}

/* Day numbers and month-name words are atomic: wrap between words only.
   (overflow-wrap: anywhere here once let iOS Safari size the day track at
   one digit, splitting "10" into "1" / "0".) */
.today-calendar-day,
.today-calendar-word {
  white-space: nowrap;
}

.today-calendar-native {
  text-align: right;
}

@media (max-width: 600px) {
  .today-moon-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0.5rem;
    padding-inline: 0.25rem;
  }

  .today-calendar-dates {
    padding-left: 0.5rem;
  }

  .today-calendar-dates time {
    gap: 0.35rem;
    font-size: 0.875rem;
  }
}

.today-events { margin-top: 1rem; }
.today-events h2 { margin: 0; font-family: var(--font-display); }
.today-events-zone { margin: 0.25rem 0 0.75rem; color: var(--color-cream-dimmed); font-size: 0.8rem; }
.today-events ol { list-style: none; padding: 0; margin: 0; }
.today-event {
  display: grid;
  grid-template-columns: 5.5rem 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid #4d4d4d;
}
.today-event time { font-variant-numeric: tabular-nums; }
.today-event-symbol { font-family: var(--font-symbols); }
@media (max-width: 600px) {
  .today-event { grid-template-columns: 4.2rem 3.5rem minmax(0, 1fr); gap: 0.25rem; font-size: 0.8rem; }
}

.today-event[style] {
  background-color: var(--hour-color);
  color: var(--color-space-black);
}
.today-event[data-hour-ruler="saturn"] {
  color: var(--color-cream);
}

.today-event[data-nighttime="true"] {
  background-color: color-mix(in srgb, var(--hour-color) 50%, #000);
  color: var(--color-cream);
}
.today-event[data-nighttime="true"][data-hour-ruler="moon"] {
  color: var(--color-space-black);
}

.today-event { grid-template-columns: 7.5rem 4.5rem minmax(0, 1fr); }
@media (max-width: 600px) {
  .today-event { grid-template-columns: 6.2rem 3.5rem minmax(0, 1fr); }
}

.today-zodiac-grid { position: relative; }
.today-zodiac-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.today-zodiac-connectors line { stroke: #fff; stroke-width: 1; }

.today-moon-row .moon-svg text {
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.today-solar-illustration {
  overflow: hidden;
  grid-column: 1 / -1;
  display: block;
  width: min(calc(100% - 1rem), 404px);
  height: auto;
  justify-self: center;
  margin: 0.5rem auto;
  border-radius: 8px;
}

.today-zodiac-rulers {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  text-align: center;
  border-top: 1px solid var(--grid-line-color);
  background-color: #000;
  background-image: var(--grid-columns);
  color: #808080;
}
.today-zodiac-rulers > span {
  padding: 0.25rem 0;
  font-family: var(--font-symbols);
  font-size: 1.25rem;
}

.today-zodiac-phase--new_moon { background-color: #000; }
.today-zodiac-phase--full_moon { background-color: #fff; }

.today-graphics-row { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 0.75rem; row-gap: 0.75rem; }
.today-analemma { width: 112px; flex: 0 0 112px; margin: 0; text-align: center; }
.today-analemma svg { display: block; width: 112px; height: 128px; }
.today-analemma figcaption { font-size: 0.75rem; white-space: nowrap; }

.today-day-clock { width: 212px; max-width: 100%; flex: 0 0 212px; margin: 0 0 0 auto; text-align: center; }
.today-day-clock svg { display: block; width: 160px; height: 128px; margin: 0 auto; }
.today-day-clock figcaption { font-size: 0.65rem; white-space: nowrap; }

.today-day-clock-solar-times { display: block; white-space: normal; }

.today-day-clock-lunar-times { display: block; white-space: nowrap; }
.today-day-clock-lunar-times time { white-space: nowrap; }

.today-date-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; flex-basis: 100%; box-sizing: border-box; gap: 0.25rem 1rem; padding: 0.4rem 0; font-size: 0.8rem; }
.today-date-navigation a { color: inherit; font-size: inherit; padding: 0.25rem 0; white-space: nowrap; }
.today-date-navigation a[rel="prev"] { justify-self: start; }
.today-date-navigation a[rel="next"] { justify-self: end; }
.today-date-reset { justify-self: center; }

.today-date-offset { grid-column: 1 / -1; font-size: 0.8rem; text-align: center; }

@media (max-width: 480px) {
  .today-date-navigation { gap: 0.25rem; min-width: 0; font-size: clamp(0.625rem, 2.9vw, 0.8rem); }
  .today-date-navigation a { min-width: 0; letter-spacing: 0; padding: 0.35rem 0; }
}

.today-event { display: block; }
.today-event-summary { display: grid; grid-template-columns: 7.5rem 4.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; cursor: pointer; list-style: none; }
.today-event-summary::-webkit-details-marker { display: none; }
.today-event-summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.today-event-information { padding: 0.5rem 0.75rem; }
@media (max-width: 600px) {
  .today-event-summary { grid-template-columns: 6.2rem 3.5rem minmax(0, 1fr); gap: 0.25rem; }
}

.today-event-words { text-align: center; }

.today-graphics-zone { margin-top: 0.75rem; color: var(--color-cream-dimmed); font-size: 0.8rem; }
.today-graphics-zone p { margin: 0.25rem 0; }

.today-analemma-noon { font-size: 0.75rem; white-space: nowrap; }

/* Persistent aspect diagrams, loaded independently of event disclosures. */
.today-moon-venus { margin: 0.8rem auto; width: 100%; max-width: 640px; min-width: 0; text-align: center; }
/* Clip all four artwork corners without changing the SVG coordinate space. */
.today-moon-venus svg { display: block; width: 100%; height: auto; background: #080808; border-radius: 8px; overflow: hidden; }
.today-moon-venus figcaption { font-size: 0.8rem; margin-top: 0.4rem; }
.moon-venus-aspect-glyph { fill: white; stroke: black; stroke-width: 2.5px; paint-order: stroke fill; font-size: 17px; font-weight: bold; }

/* Keep each navigation destination's label and date in one clickable column. */
.today-date-navigation a > span,
.today-date-navigation a > time { display: block; }
.today-date-navigation a > time { font-size: 0.9em; line-height: 1.25; opacity: 0.8; }
.today-date-navigation a[rel="next"] { text-align: right; }
.today-date-navigation .today-date-reset { text-align: center; }

/* Reserve the final SVG footprint while either kind of aspect diagram loads. */
.today-aspect-loader { width: calc(100% - 1rem); max-width: 624px; min-width: 0; margin: 0.5rem auto; }
.today-aspect-diagram { width: 100%; aspect-ratio: 680 / 736; margin: 0; padding: 0; box-sizing: border-box; }
.today-aspect-diagram[data-state="loading"],
.today-aspect-diagram[data-state="error"] { display: grid; place-items: center; text-align: center; font-size: 0.8rem; line-height: 1.3; }
.today-aspect-loader .today-moon-venus { margin: 0; max-width: none; }

/* Same-hour events get an inset rule; retain original borders between hours. */
.today-event[data-hour-continuation="true"] { border-top: 0; }

/* The original .today-event 1px solid #4d4d4d border remains unchanged. */
.today-event { position: relative; }
.today-event[data-hour-continuation="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 1px;
  background: #999;
  pointer-events: none;
}

body:has(.ingress-art-review) .layout { display: block; width: 100%; max-width: none; }
body:has(.ingress-art-review) main { padding: 0.75rem; min-width: 0; }
.ingress-art-review nav { display: flex; flex-direction: row; width: auto; flex-wrap: wrap; gap: 0.25rem; margin-block: 1rem; padding: 0.25rem; }
.ingress-review-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.ingress-review-tile { min-width: 0; background: #222; padding: 0.5rem; border-radius: 8px; overflow-wrap: anywhere; }
.ingress-review-tile h2 { font-size: 1rem; }
.ingress-review-tile p { font-size: 0.8rem; margin-block: 0.5rem; }
.ingress-review-tile .today-solar-illustration { max-width: 404px; }
.ingress-art-review nav a { padding: 0.35rem; font-size: 0.8rem; }
.ingress-review-tile a { color: var(--color-cream); text-underline-offset: 0.15em; }

.today-conditions { width: 100%; margin: 0.75rem 0; }
.today-conditions h2 { font-size: 1rem; margin: 0.5rem; }
.today-condition { border-bottom: 1px solid #4d4d4d; }
.today-condition-summary { cursor: pointer; padding: 0.4rem 0.5rem; font-size: clamp(0.7rem, 2.7vw, 0.9rem); }
.today-condition-range { display: block; padding-top: 0.15rem; font-size: 0.85em; }
.today-condition-summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* Keep the date, weekday, and decan aligned; the longer solar-term line fits independently. */
.today-page { container-type: inline-size; --today-report-font-size: clamp(0.5rem, 3.7cqw, 0.875rem); --today-calendar-font-size: var(--today-report-font-size); }
.today-header { container-type: normal; }
.today-band,
.today-decan { font-size: var(--today-report-font-size); white-space: nowrap; }
.today-solar-term { font-size: var(--today-calendar-font-size); white-space: nowrap; }
.today-band > time,
.today-ruler,
.today-ruler > span,
.today-solar-term > span { font-size: inherit; }

/* Ongoing intervals reuse the moment-event disclosure with a whole colored box. */
.today-condition { background: linear-gradient(to right, var(--condition-left), var(--condition-right)); color: #000; margin: 0; border: 0; }
.today-condition[data-solid="true"] { background: var(--condition-left); }
.today-condition[data-solid="true"][data-color-left="saturn"] { color: #fff; }
.today-condition-summary { grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem; width: 100%; box-sizing: border-box; align-items: baseline; }
.today-condition-range { display: inline; padding: 0; font-size: inherit; white-space: nowrap; }
.today-condition-summary > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* Opaque black copy sits directly on canonical gradients, without effects. */
.today-condition[data-solid="false"] { color: #000; }

/* Grid and interval disclosures form one contiguous stack. */
.today-zodiac-grid { margin-bottom: 0; border-radius: 8px; overflow: hidden; }
.today-zodiac-grid:has(+ .today-conditions .today-condition) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.today-conditions { display: block; margin: 0; padding: 0; gap: 0; }
.today-conditions .today-condition { display: block; margin: 0; border: 0; border-radius: 0; }
.today-conditions .today-condition:last-child { border-radius: 0 0 8px 8px; overflow: hidden; }

.today-calendar-dates time { row-gap: 0.15rem; }
.today-calendar-translation { grid-column: 1 / -1; text-align: center; font-size: 0.75em; line-height: 1.2; white-space: normal; overflow-wrap: normal; }

.today-lunar-mansions { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); column-gap: 0.5rem; align-items: center; direction: ltr; width: 100%; padding: 0.25rem 0.625rem; box-sizing: border-box; font-size: 0.875rem; }
.today-lunar-mansion { min-width: 0; white-space: nowrap; text-align: left; }
.today-lunar-mansion[data-tradition="vedic"] { text-align: center; }
.today-lunar-mansion:last-child { text-align: right; }

.today-jupiter-ci { width: 100%; box-sizing: border-box; padding: 0.25rem 0.625rem; text-align: left; background: #000; font-size: clamp(0.75rem, 3.8cqw, 0.875rem); white-space: nowrap; }

/* Emphasize boundary labels without inheriting weight into solar artwork or details. */
.today-event[data-event-type="hour"][data-hour-continuation="false"] .today-event-summary > time,
.today-event[data-event-type="hour"][data-hour-continuation="false"] .today-event-summary > span {
  font-weight: 700;
}

/* Compact Today location line: screen-reader-only text. */
.today-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Today zodiac grid: explicit unavailable state when planet positions fail
   to load, instead of seven empty colour rows. */
.today-zodiac-unavailable {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-cream);
  border-bottom: 1px solid var(--grid-line-color);
}

/* Today: the poem line at the foot of an explicit-observer report
   (doc/today_poem_footer.md). One quiet, centered italic line per load. */
.today-poem-footer {
  margin: 3rem 0 0;
  padding: 0 0 0.5rem;
  text-align: center;
}
.today-poem {
  max-width: 28rem;
  margin: 0 auto;
  color: var(--color-cream-dimmed);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* planets.at page background: a seamless star-and-polygon tile (regular
   pentagons, decagons, pentagrams, double decagons), rebuilt geometrically by
   script/build_planets_background.rb into app/assets/images/planets-tile.svg.
   Copper lines at low opacity on the space-black ground. The tile rides on the
   fixed body::after layer (static, no background-attachment, so no iOS jank);
   content columns get the solid ground so text never sits on the lines.
   background-size must match the size the script prints. */
body::after {
  background-image:
    url("/assets/planets-tile-88d24883.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
  background-size: 168px 517.05px, 100px 100px;
  background-repeat: repeat;
  background-position: center top, 0 0;
  opacity: 1;
}

/* Solid grounds for everything that holds text. */
main > :where(:not(link, script, style, template, noscript)) {
  background-color: var(--color-space-black);
}
.layout > nav {
  background: linear-gradient(180deg, #171e2b 0%, var(--color-space-black) 100%);
  backdrop-filter: none;
}
@media (min-width: 768px) {
  .layout > nav { background: linear-gradient(90deg, #171e2b 0%, var(--color-space-black) 100%); }
}

/* No pattern where it would cost legibility or ink. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body::after { background-image: none; }
}
@media print {
  body::before,
  body::after { display: none; }
  body,
  main > :where(:not(link, script, style, template, noscript)),
  .layout > nav { background: none; }
}

/* Today: asynchronously loaded report sections (doc/today_async_sections.md).
   Each section is an eager Turbo Frame. While it loads (and if it fails) it
   reserves about the height its content takes, measured at 320, 390 and
   1280 px on a recorded Portland page, so arriving sections shift little. */
turbo-frame.today-section { display: block; }
.today-section:not([data-today-section-state="ready"]) { min-height: var(--today-section-reserve, 3rem); }
.today-section--solar { --today-section-reserve: 39px; }
.today-section--moon { --today-section-reserve: 252px; }
.today-section--sky { --today-section-reserve: 480px; }
.today-section--day { --today-section-reserve: 900px; }
@media (min-width: 375px) {
  .today-section--solar { --today-section-reserve: 44px; }
  .today-section--moon { --today-section-reserve: 202px; }
  .today-section--sky { --today-section-reserve: 465px; }
}
@media (min-width: 600px) {
  .today-section--solar { --today-section-reserve: 52px; }
  .today-section--moon { --today-section-reserve: 320px; }
  .today-section--sky { --today-section-reserve: 495px; }
}
.today-section-placeholder {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.25rem 0.75rem;
  min-height: var(--today-section-reserve, 3rem);
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-cream-dimmed);
  font-size: 0.8rem;
  text-align: center;
}
.today-section--day > .today-section-placeholder { min-height: calc(var(--today-section-reserve) - 12px); margin-top: 12px; }
.today-section-status { margin: 0; }
.today-section[data-today-section-state="loading"] .today-section-status { animation: today-section-pulse 1.6s ease-in-out infinite; }
@keyframes today-section-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .today-section[data-today-section-state="loading"] .today-section-status { animation: none; }
}
.today-section-unavailable { color: var(--color-cream); }
.today-section-retry {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--color-copper-bright);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(199, 125, 75, 0.45);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.today-section-retry:hover { text-decoration-color: currentColor; }
.today-section-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.today-sections-noscript { margin: 0.75rem 0; color: var(--color-cream); font-size: 0.875rem; }
.today-sections-noscript a { color: var(--color-copper-bright); }
@media print {
  .today-section-retry { display: none; }
  .today-section[data-today-section-state="loading"] .today-section-status { animation: none; }
}

/* Today report: one vertical scrolling region (the document), like /daily and
   the splash. The site layout otherwise makes <main> a 100vh inner scroller,
   which on phones nested inside a document that also scrolled. */
body:has(.today-page) .layout {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(.today-page) main {
  overflow: visible;
  min-width: 0;
}

/* Today: a section being prepared in the background (doc/today_background_fill.md) */
.today-section[data-today-section-state="pending"] .today-section-status { animation: today-section-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .today-section[data-today-section-state="pending"] .today-section-status { animation: none; }
}

/* Today day clock: live current-time hand (on every day's clock, shown only
   while it is that day for the observer; today_clock_hand_controller.js).
   Drawn inside the existing SVG, so no layout shift; no transitions, so
   nothing to reduce for reduced motion. The UA [hidden] rule does not
   apply to SVG elements, hence the explicit one. */
.today-day-clock-hand[hidden] {
  display: none;
}
.today-day-clock-hand-casing {
  stroke: #181818;
  stroke-width: 3;
  stroke-linecap: round;
}
.today-day-clock-hand-line {
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.today-day-clock-hand-hub {
  fill: #fff;
  stroke: #181818;
  stroke-width: 0.8;
}

/* Today events: the "now" bar (the planets/daily .now-marker as a
   decorative list item; today_now_bar_controller.js). The copper rule runs
   the full width of the row — flush with the left and right edges of the
   event rows above and below it — and sits behind the time and the NOW
   label, which carry the row's own opaque background so the rule breaks
   cleanly around them instead of striking through. Same reading order and
   same look as the planets/daily marker, only edge to edge. Geometry gated
   by test/browser/today_now_bar_geometry_test.mjs. */
.today-now-bar {
  background: var(--color-space-black);
}
.today-now-bar .now-marker {
  position: relative;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.today-now-bar .now-marker__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  flex: none;
}
.today-now-bar .now-marker__time,
.today-now-bar .now-marker__label {
  position: relative;
  z-index: 1; /* above the rule, which follows the time in the markup */
  background: var(--color-space-black);
}
.today-now-bar .now-marker__time {
  min-width: 0;
  padding-right: 0.5rem;
}
.today-now-bar .now-marker__label {
  padding-left: 0.5rem;
}
@media (max-width: 600px) {
  .today-now-bar .now-marker__time { padding-right: 0.35rem; }
  .today-now-bar .now-marker__label { padding-left: 0.35rem; }
}