: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,
.today-date-jump-link {
  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, .today-date-jump-link:hover { color: var(--color-copper-bright); text-decoration-color: currentColor; }
.today-location-change:focus-visible, .today-date-jump-link: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-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.
   It follows .today-page directly in <main> and, unlike the report, has no
   solid ground: from the bottom date navigation down, the page pattern shows
   through (Telegram #13538). Same column as the report above it. */
.today-poem-footer {
  width: 100%;
  max-width: 44rem;
  margin: 3rem auto 0;
  padding: 0 1.5rem 0.5rem;
  text-align: center;
}
main > .today-poem-footer { background-color: transparent; }
.today-page:has(+ .today-poem-footer) { padding-bottom: 0; }
.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;
}
/* Gold, reaching the hour numerals (Jes, Telegram #13710/#13711). */
.today-day-clock-hand-line {
  stroke: #FFD700;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.today-day-clock-hand-hub {
  fill: #FFD700;
  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; }
}

/* Natal transit rows (TODAY_NATAL, doc/natal_design.md): a quiet "natal"
   marker after the label, in the location line's muted italic. */
.today-natal-transit figcaption { font-size: 0.75rem; opacity: 0.75; text-align: center; }

/* An opened aspect row's positions at the exact moment, degrees and minutes
   around the sign glyph, either side of the row's symbol (Jes, Telegram
   #13626, #13630): "0♓︎11 ☽ ⚹ ♃ 3♋︎07", one quiet line above the keywords,
   each part kept whole. */
.today-event-positions {
  margin-bottom: 0.3rem;
  font-family: var(--font-symbols);
  font-variant-numeric: tabular-nums;
  text-align: center;
  opacity: 0.85;
}
.today-event-positions > span { white-space: nowrap; }

/* The ongoing-aspects grid's natal row (TODAY_NATAL; Jes, Telegram #13638):
   the visitor's natal bodies as beads on a string at the grid's scale,
   styled as the natal station line's natal stations (NatalTransitIllustration:
   dark fill, cream ring, cream text-presentation glyph), each at its true
   longitude (#13679); overlapping beads stack in DOM order, the Moon on top.
   Beads sit above the connectors, so an in-orb
   transit's line stops at the bead's ring. */
.today-zodiac-natal {
  position: relative;
  height: 2rem;
  background-color: #111116;
  background-image: var(--grid-columns);
  border-bottom: 1px solid var(--grid-line-color);
}
.today-zodiac-natal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.6px);
  height: 1.2px;
  background-color: #c4c1b8;
  opacity: 0.85;
}
.today-zodiac-natal-bead {
  position: absolute;
  z-index: 1;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.6px solid #f4f1e8;
  background-color: #111116;
  color: #f4f1e8;
  font-family: var(--font-symbols);
  font-size: 0.8125rem;
  line-height: 1;
}
.today-zodiac-natal-bead--angle {
  font-family: inherit;
  font-size: 0.5rem;
  letter-spacing: -0.02em;
}

/* Dignity bars (Jes, Telegram #13655, #13657, #13664): a planet in its
   domicile, exaltation, detriment or fall (ZodiacDignity) gets a thin bar
   spanning that sign's 30° (offset from the row's aspect dividers) along the
   bottom edge of its own row, entirely inside it, with no border: domicile
   green, exaltation gold, detriment grey, fall black (it reads on the rows'
   own lighter, planet-coloured backgrounds). The title names the dignity. */
.today-zodiac-dignity {
  position: absolute;
  left: var(--dignity-left);
  width: var(--dignity-width);
  bottom: 0;
  height: 2px;
}
.today-zodiac-dignity--domicile { background-color: #2fbf4a; }
.today-zodiac-dignity--exaltation { background-color: #ffd700; }
.today-zodiac-dignity--detriment { background-color: #9a9a9a; }
.today-zodiac-dignity--fall { background-color: #000; }

/* The zodiac's direction of motion on the grid's header (Jes, Telegram
   #13658): a grey leftward chevron, as the natal station line's, left of
   Pisces and right of Aries inside their boxes. Absolutely positioned in the
   (now positioned) box: the glyphs' centring, the boxes and the rows are
   untouched. */
.today-zodiac-header > span { position: relative; }
.today-zodiac-chevron {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 1rem;
  transform: translateY(-50%);
  overflow: visible;
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.today-zodiac-chevron path { vector-effect: non-scaling-stroke; }
/* Tall and light (Jes, Telegram #13668): about the sign glyph's height, a
   1px stroke, 1px inside Pisces' left edge and Aries' right edge. */
.today-zodiac-chevron--pisces { left: 1px; }
.today-zodiac-chevron--aries { right: 1px; }

/* In-orb lines to the visitor's natal beads at half opacity (Jes, Telegram
   #13671, an experiment); the mundane lines are unchanged. */
.today-zodiac-connectors line.today-zodiac-connector--natal { opacity: 0.5; }

/* Natal beads are buttons (Jes, Telegram #13691): tap to bring a covered
   bead to the front of its overlap stack, or send the front one to the back
   (bead_stack_controller.js). Reset the button chrome; show keyboard focus. */
button.today-zodiac-natal-bead {
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  font-weight: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.today-zodiac-natal-bead:focus { outline: none; }
button.today-zodiac-natal-bead:focus-visible { outline: 2px solid #ffd700; outline-offset: 1px; }

/* Natal beads may overhang the grid's edges (Jes, Telegram #13693): the grid
   no longer clips; each header and planet row clips itself instead, and the
   header and the last row carry the rounded corners the grid's clip drew
   (inside its 1px border: 7px), so only the natal row's beads overhang. */
.today-zodiac-grid { overflow: visible; }
.today-zodiac-header, .today-zodiac-row { overflow: hidden; }
.today-zodiac-header { border-radius: 7px 7px 0 0; }
.today-zodiac-grid > .today-zodiac-row:last-of-type { border-radius: 0 0 7px 7px; }
.today-zodiac-grid:has(+ .today-conditions .today-condition) > .today-zodiac-row:last-of-type { border-radius: 0; }

/* Ongoing conditions as columns (Jes, Telegram #13695): date range, symbol
   cluster and description line up across every row, so each description
   starts at the same x. The list is a three-column grid; each row (details,
   keeping its own background) and its summary are subgrids of it. The
   description wraps within its column. */
/* Elsewhere each row lays out on its own, as before: date, then the
   symbols and the description (not aligned across rows). */
.today-condition-summary { grid-template-columns: max-content max-content minmax(0, 1fr); }
.today-condition-symbol { white-space: nowrap; }
.today-condition-label { min-width: 0; overflow-wrap: anywhere; }
/* Aligned only where <details> can be a grid with a ::details-content box
   (Chromium, Safari 18.4+). */
@supports selector(::details-content) {
  .today-conditions:has(.today-condition) {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    column-gap: 0.5rem;
  }
  .today-conditions > p { grid-column: 1 / -1; }
  .today-conditions .today-condition { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .today-conditions .today-condition::details-content { grid-column: 1 / -1; }
  .today-conditions .today-condition > .today-event-information { grid-column: 1 / -1; }
  .today-conditions .today-condition-summary { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 0.5rem; }
}

/* A little space between the Jupiter mansion line (the Moon section's last
   line) and the aspects grid (Jes, Telegram #13699). On the sky section's
   frame, so its loading placeholder carries it too (no shift on load); on
   the synchronous page, on the grid after the line. */
.today-section--sky { margin-top: 0.5rem; }
.today-jupiter-ci + .today-zodiac-grid { margin-top: 0.5rem; }

/* The date line's "jump" date picker (Jes, Telegram #13700, #13727): a wide
   sheet toward the bottom of the viewport on phones, a large date field, a
   full-width Go button at the bottom (easy for a thumb once iOS's calendar
   closes), and a 44px × close target at the top right. */
/* "jump" renders like the header's "change" (Jes, Telegram #13739): the
   shared .today-location-change rule above, at the location line's size and
   weight; only its tap-target height stays the date line's own. */
.today-date-navigation a.today-date-jump-link { color: var(--color-copper-bright); margin-left: 0.35rem; padding: 0 0.15rem; font-size: 0.875rem; font-weight: 400; line-height: 1.4; min-height: 0; }
.today-date-jump-dialog {
  width: min(92vw, 28rem);
  max-width: none;
  box-sizing: border-box;
  margin: auto auto max(1.5rem, env(safe-area-inset-bottom));
  padding: 3rem 1.25rem 1.25rem;
  border: 1px solid #4d4d4d;
  border-radius: 14px;
  background: #111116;
  color: var(--color-cream);
  font-size: 1.125rem;
}
@media (min-width: 600px) { .today-date-jump-dialog { margin: auto; } }
.today-date-jump-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.today-date-jump-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 50%;
}
.today-date-jump-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.today-date-jump-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.today-date-jump-label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; font-size: 1rem; }
/* iOS gives a date input an intrinsic minimum width and ignores width: 100%
   until its native appearance is reset (Jes, Telegram #13742): reset it and
   draw the field ourselves, so it never runs past the dialog's padding. */
.today-date-jump-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 1.25rem;
  line-height: 3.25rem;
  color-scheme: dark;
  border: 1px solid #777;
  border-radius: 8px;
  background: #1b1b22;
  color: inherit;
}
.today-date-jump-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.today-date-jump-go {
  width: 100%;
  min-height: 3.25rem;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  background: var(--color-cream);
  color: #111;
  cursor: pointer;
}
/* Without JavaScript the link targets the dialog: shown inline, not modal. */
.today-date-jump-dialog:target:not([open]) { display: block; position: relative; margin: 0.75rem auto 0; }