/* Mercury's landing page (Jes, Telegram #13818). */
:root {
  --mercury: #87CEEB;
  --cream: #f4f1e8;
  --cream-dimmed: #c4c1b8;
  --copper: #e09664;
  --space: #0a0a0f;
  --font-display: 'Crimson Pro', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--space); color: var(--cream); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.mercury-page { max-width: 32rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

.mercury-art { margin: 0 auto 1.5rem; }
.mercury-art img { display: block; width: 100%; height: auto; border-radius: 50%; }
.mercury-title { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.75rem; color: var(--copper); }
.mercury-copy { margin: 0 0 2rem; line-height: 1.6; color: var(--cream-dimmed); }

.mercury-orbits h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.6rem; }
.mercury-orbits canvas { display: block; width: 100%; background: #000; cursor: pointer; }
.mercury-orbit-top { aspect-ratio: 1; border-radius: 0.9rem 0.9rem 0 0; }
.mercury-orbit-strip { height: 110px; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 0.9rem 0.9rem; }

/* The current-or-next retrograde card and the retrograde pages (#13844). */
.mercury-retrograde-card { display: grid; justify-items: center; gap: 0.25rem; margin: 0 0 1.75rem; text-align: center; }
.mercury-retrograde-card-kind { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dimmed); }
.mercury-retrograde-card-dates { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.mercury-retrograde-card-shadow { font-size: 0.85rem; color: var(--cream-dimmed); }
.mercury-retrograde-card-link { margin-top: 0.15rem; color: var(--mercury); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mercury-back { margin: 0 0 1rem; font-size: 0.9rem; }
.mercury-back a, .mercury-retrograde-nav a { color: var(--copper); text-decoration: none; }
.mercury-retrograde-dates { margin: 0 0 2rem; display: grid; gap: 0.6rem; }
.mercury-retrograde-date { display: grid; gap: 0.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mercury-retrograde-date dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dimmed); }
.mercury-retrograde-date dd { margin: 0; font-size: 1rem; }
.mercury-degree { color: var(--mercury); margin-left: 0.4rem; }
.mercury-retrograde-nav { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.mercury-retrograde-next { margin-left: auto; text-align: right; }
.mercury-orbits .mercury-copy { margin-bottom: 1rem; }

/* "By year" (#13865), from the cycles mockup. */
:root { --font-symbols: 'STIX Two Math', math; }
.mercury-by-year { margin-top: 2.5rem; }
.mercury-by-year h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 0.6rem; }
.mercury-calendar-figure { margin: 0; padding: 0.6rem 0.4rem; background: #000; border-radius: 0.9rem; }
.mercury-calendar { display: block; width: 100%; height: auto; }
.mercury-cal-month { font-size: 9px; fill: var(--cream-dimmed); text-anchor: middle; }
.mercury-cal-year { font-size: 10px; fill: var(--cream-dimmed); text-anchor: end; font-variant-numeric: tabular-nums; }
.mercury-cal-year--now { fill: var(--copper); font-weight: 600; }
.mercury-cal-axis { stroke: rgba(255,255,255,0.1); }
.mercury-cal-shadow { opacity: 0.3; }
.mercury-cal-retro--hot { fill: none; stroke: var(--cream); stroke-width: 1.5; }
.mercury-cal-glyph { font-family: var(--font-symbols); font-size: 10px; text-anchor: middle; }
.mercury-cal-now line { stroke: var(--copper); stroke-width: 1; stroke-dasharray: 2 2; } /* dotted, like the first today marker (#13890) */
.mercury-cal-now text { font-size: 7px; font-weight: 600; fill: var(--copper); text-anchor: middle; }
.mercury-orbit-views { border-radius: 0.9rem; }
.mercury-orbit-views:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* The per-cycle page (#13878/#13880). */
.mercury-muted { color: var(--cream-dimmed); }
.mercury-sign { font-family: var(--font-symbols); }
.mercury-cycle-section { margin: 0 0 2rem; }
.mercury-cycle-section h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 0.5rem; }
.mercury-cycle-section h3 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dimmed); margin: 0.9rem 0 0.35rem; font-weight: 500; }
.mercury-cycle-figure { margin: 0; padding: 0.6rem 0.4rem; background: #000; border-radius: 0.9rem; }
.mercury-cycle-chart { display: block; width: 100%; height: auto; }
.mercury-cycle-chart text { font-family: var(--font-body); }
.mercury-chart-grid { stroke: rgba(255,255,255,0.09); }
.mercury-chart-grid-label { font-size: 8.5px; fill: var(--cream-dimmed); text-anchor: middle; }
.mercury-chart-axis { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--cream-dimmed); }
.mercury-chart-sun { font-size: 15px; fill: #FFD700; text-anchor: middle; }
.mercury-chart-sun-line { stroke: #FFD700; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.75; }
.mercury-chart-shadow { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.3); stroke-dasharray: 3 3; }
.mercury-chart-retro { fill: rgba(255,107,90,0.12); }
.mercury-chart-path { stroke: var(--mercury); stroke-width: 2.4; stroke-linecap: round; }
.mercury-chart-path--retro { stroke: #ff6b5a; }
.mercury-chart-today { stroke: var(--copper); stroke-dasharray: 2 2; }
.mercury-chart-today-label { font-size: 9px; fill: var(--copper); text-anchor: end; letter-spacing: 0.1em; text-transform: uppercase; }
.mercury-chart-leader { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 0.8; }
.mercury-chart-dot { fill: #000; stroke: var(--cream); stroke-width: 1.5; }
.mercury-chart-dot--superior, .mercury-chart-dot--superior-next, .mercury-chart-dot--inferior { fill: #FFD700; stroke: #000; }
.mercury-chart-dot--station-rx, .mercury-chart-dot--station-d { fill: #ff6b5a; stroke: #000; }
.mercury-chart-ingress { stroke-width: 2.5; stroke-linecap: round; }
.mercury-chart-title { font-size: 11px; fill: var(--cream); }
.mercury-chart-date { font-weight: 600; fill: var(--copper); }
.mercury-chart-note { font-size: 9.5px; fill: var(--cream-dimmed); }
/* Five tiles across without wrapping, even on a phone (Jes, Telegram #13972). */
.mercury-chips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
.mercury-chips a { display: grid; justify-items: center; gap: 0.1rem; min-width: 0; padding: 0.35rem 0.15rem; border-radius: 0.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--cream); text-decoration: none; white-space: nowrap; }
.mercury-chip-signs { font-size: 1.05rem; line-height: 1; }
.mercury-chip-date { font-size: 0.68rem; color: var(--cream-dimmed); }
.mercury-chip-year { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.mercury-chip-here a { background: rgba(135,206,235,0.16); border-color: var(--mercury); }
.mercury-cycle-section .mercury-copy { margin-bottom: 0.75rem; }
.mercury-title--retrograde { margin-bottom: 0.2rem; }
.mercury-retrograde-span { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: 1.35rem; color: var(--cream); }

/* The cycle on the zodiac (Jes, Telegram #13912). */
/* Three quarters of the column, centred (Jes, Telegram #13916). */
.mercury-cycle-figure--wheel { width: 75%; margin: 0 auto; }
.mercury-cycle-wheel { display: block; width: 100%; height: auto; }
.mercury-wheel-sector { opacity: 0.85; stroke: #000; stroke-width: 0.6; }
.mercury-wheel-glyph { font-family: var(--font-symbols); font-size: 14px; fill: #000; text-anchor: middle; }
.mercury-wheel-spoke { stroke: rgba(255,255,255,0.07); }
.mercury-wheel-shadow { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.35); stroke-dasharray: 3 3; }
.mercury-wheel-path { stroke: var(--mercury); stroke-width: 2.4; stroke-linecap: round; }
.mercury-wheel-path--retro { stroke: #ff6b5a; }
.mercury-wheel-earth { font-size: 16px; fill: var(--cream); text-anchor: middle; }
.mercury-wheel-date { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--copper); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.mercury-wheel-date--station-rx { fill: #ff6b5a; }
/* Station direct in the direct-motion blue, on every planet (Jes, Telegram #13973). */
.mercury-wheel-date--station-d { fill: #87CEEB; }

/* Local dates (Jes, Telegram #13921): the zone they are in, and the S-curve's labels as links to that day on planets.at. */
.mercury-zone { margin: -0.9rem 0 1.25rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--cream-dimmed); }
.mercury-retrograde-card .mercury-zone { margin: 0.35rem 0 0; }
.mercury-chart-link { cursor: pointer; }
.mercury-chart-link:hover .mercury-chart-title, .mercury-chart-link:focus .mercury-chart-title { text-decoration: underline; }

/* The opposition glyph above "opp." on an outer planet's S-curve (Jes, Telegram #14022). */
.mercury-chart-opposition { font-family: var(--font-symbols); font-size: 14px; fill: var(--cream); text-anchor: middle; }

/* The footer: a box per planet's site (Jes, Telegram #14033). */
.retrograde-sites { margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); }
/* Five across (Saturn, #14067), the type a size down to fit a phone. */
.retrograde-sites ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.retrograde-sites li { display: grid; } /* each box the row's full height */
.retrograde-sites a { display: grid; align-content: start; justify-items: center; gap: 0.1rem; padding: 0.55rem 0.1rem 0.5rem; border-radius: 0.6rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--cream); text-decoration: none; text-align: center; }
.retrograde-site--here a { border-color: var(--site); background: color-mix(in srgb, var(--site) 12%, transparent); }
.retrograde-site-symbol { font-family: var(--font-symbols); font-size: 1.35rem; line-height: 1.1; color: var(--site); }
.retrograde-site-name { font-family: var(--font-display); font-size: 0.85rem; }
.retrograde-site-kind { font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-dimmed); margin-top: 0.15rem; line-height: 1.2; }
.retrograde-site-dates { font-size: 0.62rem; line-height: 1.25; }
/* The ball that runs the cycle wheel's track (Jes, Telegram #14018). */
.mercury-wheel-ball { fill: var(--mercury); stroke: #000; stroke-width: 1.2; }
.mercury-wheel-ball--retro { fill: #ff6b5a; }

/* The signs as diagonal zones on the S-curve (Jes, Telegram #14063, #14066). */
.mercury-chart-zone { opacity: 0.16; }
.mercury-chart-zone-glyph { font-family: var(--font-symbols); font-size: 13px; text-anchor: middle; opacity: 0.8; }