/* ==========================================================================
   astrolab.css: Skywatch + Chart Calculator

   Plain CSS on the site's own tokens (main.css): ivory / copper / burgundy /
   navy / cream, Fraunces + Public Sans, light surfaces only. Loaded by the
   two tool pages, which now extend the project's base.html, so the site's
   navbar, footer, fonts and reset are already on the page. Nothing here
   restyles them.

   Contents
     1  Page shell + hero
     2  Cards, buttons, form controls
     3  The wheel
     4  Skywatch: time bar, timeline popover, events
     5  Chart: toolbar, chart panel, details line, empty state
     6  Chart insights: collapsible panels
     7  Modals (new chart, settings, download)
     8  Bottom dock (tool switcher)
     9  About + FAQ (readable copy under each tool)
    10  Small screens, toast offset, reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Page shell + hero
   ========================================================================== */

/* A component class that sets `display` (every button, card and modal here does) beats the
   browser's own [hidden] rule, which would leave "hidden" things showing. This makes the
   hidden attribute always win on these pages. */
.astrolab-body [hidden] {
  display: none !important;
}

.astrolab-body main {
  padding-bottom: var(--space-7);
}

.astrolab-page {
  padding-top: var(--space-4);
}

.astrolab-hero {
  text-align: center;
  padding-block: var(--space-5) var(--space-4);
}

.astrolab-hero h1 {
  margin-top: var(--space-2);
  font-size: var(--step-3);
}

.astrolab-hero .lead {
  margin: var(--space-2) auto 0;
  max-width: 58ch;
  font-size: var(--step-0);
  color: var(--text-muted);
}

.astrolab-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1000px) {
  .astrolab-layout--sky   { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--space-5); }
  .astrolab-layout--chart { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: var(--space-5); }
  .astrolab-layout--chart.astrolab-layout--single { grid-template-columns: minmax(0, 560px); }
}

/* The wheel card stays in view while you read the panels beside it, but only
   when the screen is tall enough to hold it. (Two classes on purpose: .astrolab-sky
   sets position: relative later in this file, and a sticky card must beat it.) */
@media (min-width: 1000px) and (min-height: 780px) {
  .astrolab-card.astrolab-sticky {
    position: sticky;
    top: 88px;
  }
}

.astrolab-layout--single {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.astrolab-notice {
  margin: 0 auto var(--space-3);
  max-width: 560px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-hairline);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius-sm);
  background: var(--soft-white);
  font-size: var(--step--1);
  color: var(--navy);
}


/* ==========================================================================
   2. Cards, buttons, form controls
   ========================================================================== */

.astrolab-card {
  background: var(--soft-white);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.astrolab-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}

.astrolab-card__head h2 {
  font-size: var(--step-1);
}

.astrolab-card__sub {
  margin: 0;
  padding: 0.15rem var(--space-4) 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.astrolab-icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.astrolab-icon--fill {
  fill: currentColor;
  stroke-width: 1;
}

.astrolab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 var(--step--1) / 1.1 var(--font-body);
  white-space: nowrap;
  transition: transform var(--transition-base), background var(--transition-base),
              border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.astrolab-btn--primary {
  background: var(--copper);
  color: var(--soft-white);
  box-shadow: 0 4px 14px rgba(200, 124, 65, 0.32);
}
.astrolab-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.astrolab-btn--secondary {
  border-color: var(--burgundy);
  background: transparent;
  color: var(--burgundy);
}
.astrolab-btn--secondary:hover {
  background: var(--burgundy);
  color: var(--soft-white);
}

.astrolab-btn--ghost {
  border-color: var(--line-hairline);
  background: var(--soft-white);
  color: var(--navy);
}
.astrolab-btn--ghost:hover {
  border-color: var(--copper);
  color: var(--copper-dark);
}

.astrolab-btn--block { width: 100%; }
.astrolab-btn--lg    { padding: 0.85rem 1.4rem; font-size: var(--step-0); }

.astrolab-btn[disabled],
.astrolab-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.astrolab-iconbtn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-hairline);
  border-radius: 50%;
  background: var(--soft-white);
  color: var(--navy);
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.astrolab-iconbtn:hover,
.astrolab-iconbtn[aria-expanded="true"] {
  border-color: var(--copper);
  color: var(--copper-dark);
}
.astrolab-iconbtn--plain {
  border-color: transparent;
  background: transparent;
}
.astrolab-iconbtn[hidden] { display: none; }

.astrolab-linkbtn {
  padding: 0.25rem 0.4rem;
  border: 0;
  background: none;
  color: var(--copper-dark);
  font: 600 var(--step--1) / 1.2 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.astrolab-linkbtn:hover { color: var(--burgundy); }

.astrolab-field {
  display: block;
  margin: 0 0 var(--space-3);
}

.astrolab-label {
  display: block;
  margin-bottom: 0.35rem;
  font: 700 0.72rem / 1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 16px on purpose: anything smaller makes iOS zoom the page when you tap in. */
.astrolab-input,
.astrolab-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy);
  font: 400 1rem / 1.3 var(--font-body);
}
.astrolab-input:focus,
.astrolab-select:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(200, 124, 65, 0.22);
}

.astrolab-help {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.astrolab-row {
  display: grid;
  gap: 0.6rem;
}
.astrolab-row--2 { grid-template-columns: 1fr 1fr; }
.astrolab-row--date { grid-template-columns: 1fr 1fr auto; align-items: end; }

.astrolab-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--step--1);
  color: var(--navy);
  cursor: pointer;
}
.astrolab-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.1rem 0 0;
  accent-color: var(--copper);
}
.astrolab-check + .astrolab-check { margin-top: 0.5rem; }

/* Segmented radio group: real radios underneath, so it is keyboard- and
   screen-reader-correct, drawn as pills. */
.astrolab-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.astrolab-seg label { position: relative; cursor: pointer; }
.astrolab-seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.astrolab-seg span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font: 600 var(--step--1) / 1.15 var(--font-body);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.astrolab-seg--row span {
  flex-direction: row;
  gap: 0.35rem;
}
.astrolab-seg small {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.75;
}
.astrolab-seg label:hover span { border-color: var(--copper); }
.astrolab-seg input:checked + span {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--soft-white);
}
.astrolab-seg input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.astrolab-seg input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

.astrolab-spin { animation: astrolab-spin 0.8s linear infinite; }
@keyframes astrolab-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   3. The wheel (replaces the two Tailwind width classes; same sizing)
   ========================================================================== */

.astrolab-wheel {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-inline: auto;
}


/* ==========================================================================
   4. Skywatch: time bar, timeline popover, events
   ========================================================================== */

.astrolab-sky {
  position: relative;
  padding-top: var(--space-4);
}

.astrolab-sky .astrolab-wheel {
  padding-inline: var(--space-3);
}

.astrolab-timebar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.astrolab-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(200, 124, 65, 0.14);
  color: var(--copper-dark);
  font: 700 0.7rem / 1.2 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.astrolab-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
}
.astrolab-status[data-mode="live"]::before { animation: live-pulse 1.8s ease-out infinite; }
.astrolab-status[data-mode="custom"],
.astrolab-status[data-mode="animating"] {
  background: rgba(72, 12, 5, 0.08);
  color: var(--burgundy);
}
.astrolab-status[data-mode="custom"]::before,
.astrolab-status[data-mode="animating"]::before { background: var(--burgundy); }

.astrolab-clock {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

/* The Timeline & animate controls: a small popover instead of a panel of its
   own, so the page is just the wheel and the events. */
.astrolab-popover {
  position: absolute;
  left: 50%;
  bottom: 3.9rem;
  z-index: 20;
  width: min(340px, calc(100% - 24px));
  padding: var(--space-3);
  transform: translateX(-50%);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background: var(--soft-white);
  box-shadow: var(--shadow-lift);
}
.astrolab-popover[hidden] { display: none; }

.astrolab-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.astrolab-popover__title {
  margin: 0;
  font: 600 var(--step-0) / 1.2 var(--font-display);
  color: var(--burgundy);
}
.astrolab-popover__section + .astrolab-popover__section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-hairline);
}
.astrolab-popover__line {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.astrolab-popover__line + .astrolab-popover__line { margin-top: 0.5rem; }
.astrolab-popover .astrolab-input,
.astrolab-popover .astrolab-select { padding: 0.5rem 0.6rem; font-size: 0.95rem; }
.astrolab-popover .astrolab-btn { padding: 0.55rem 0.85rem; }

ul.astrolab-events__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  list-style: none;
}
.astrolab-events__more {
  margin: 0 var(--space-4) var(--space-4);
  width: calc(100% - 2 * var(--space-4));
}
.astrolab-events__more[hidden] { display: none; }

.astrolab-event {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: var(--ivory);
  font-size: var(--step--1);
  color: var(--navy);
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
a.astrolab-event:hover {
  border-color: var(--copper);
  background: #fff;
  transform: translateX(2px);
}
.astrolab-event.is-ingress { border-left: 3px solid var(--copper); }

.astrolab-event__glyph {
  flex: none;
  width: 1.5rem;
  text-align: center;
  font: 1.1rem / 1 "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", sans-serif;
}
.astrolab-event__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-inline: 0.3rem;
  border-radius: 50%;
}
.astrolab-event__text { flex: 1; min-width: 0; }
.astrolab-event__main { font-weight: 500; }
.astrolab-event__meta { color: var(--text-muted); }
.astrolab-event__sign {
  flex: none;
  width: 14px;
  height: 14px;
}
.astrolab-event__soon {
  flex: none;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--text-muted);
}


/* ==========================================================================
   5. Chart: toolbar, chart panel, details line, empty state
   ========================================================================== */

.astrolab-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: var(--space-2);
  border-bottom: 1px solid var(--line-hairline);
}
.astrolab-toolbar .astrolab-btn { padding-inline: 0.5rem; }

.astrolab-chart-panel {
  padding: var(--space-3) var(--space-3) var(--space-4);
}

/* The small "who / where / when" caption under the wheel. */
.astrolab-info {
  margin-top: var(--space-2);
  text-align: center;
}
.astrolab-info__place {
  margin: 0;
  font: 600 var(--step-0) / 1.25 var(--font-display);
  color: var(--burgundy);
}
ul.astrolab-info__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.5rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.astrolab-info__meta li + li::before {
  content: "\00b7";
  margin-right: 0.5rem;
  opacity: 0.7;
}

.astrolab-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.astrolab-empty__art {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-3);
  color: var(--copper);
}
.astrolab-empty h2 {
  margin-bottom: var(--space-1);
  font-size: var(--step-2);
}
.astrolab-empty p {
  margin: 0 auto var(--space-4);
  max-width: 34ch;
  font-size: var(--step--1);
  color: var(--text-muted);
}


/* ==========================================================================
   6. Chart insights: collapsible panels
   ========================================================================== */

.astrolab-insights__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.astrolab-insights__head h2 { font-size: var(--step-2); }
.astrolab-insights__actions { display: flex; gap: 0.25rem; }

.astrolab-panel {
  margin-bottom: var(--space-2);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background: var(--soft-white);
  box-shadow: var(--shadow-soft);
}
.astrolab-panel > summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}
.astrolab-panel > summary::-webkit-details-marker { display: none; }
.astrolab-panel > summary:hover .astrolab-panel__title { color: var(--copper-dark); }
.astrolab-panel > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.astrolab-panel__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--copper-dark);
}
.astrolab-panel__title {
  margin: 0;
  font: 600 var(--step-0) / 1.2 var(--font-display);
  color: var(--burgundy);
  transition: color var(--transition-base);
}
.astrolab-panel__hint {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.astrolab-panel__chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--copper);
  transition: transform var(--transition-base);
}
.astrolab-panel[open] > summary .astrolab-panel__chev { transform: rotate(180deg); }
.astrolab-panel__body {
  padding: 1rem 1.1rem 1.1rem;
  border-top: 1px solid var(--line-hairline);
}
.astrolab-panel__note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Element-tinted medallion: Fire / Earth / Air / Water use the same four
   colours as the sign glyphs on the wheel. Set inline as --el. */
.astrolab-medal {
  --el: var(--copper);
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border: 2px solid var(--el);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  background: color-mix(in srgb, var(--el) 14%, #fff);
  color: var(--el);
}
.astrolab-medal svg { width: 30px; height: 30px; }
.astrolab-medal--sm { width: 44px; height: 44px; border-width: 1.5px; }
.astrolab-medal--sm svg { width: 22px; height: 22px; }

.astrolab-glyph {
  font-family: "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", sans-serif;
  font-weight: 700;
  line-height: 1;
}

/* Big Three */
.astrolab-big3 {
  display: grid;
  gap: 0.75rem;
}
.astrolab-big3__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background: #fff;
}
.astrolab-big3__label {
  margin: 0;
  font: 700 0.78rem / 1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.astrolab-big3__label a:hover { color: var(--copper-dark); }
.astrolab-big3__deg {
  margin: 0.15rem 0 0.2rem;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.astrolab-big3__keys {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .astrolab-big3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .astrolab-big3__card {
    flex-direction: column;
    padding: 1.1rem 0.75rem;
    text-align: center;
  }
}

/* Planetary positions table */
.astrolab-tablewrap { overflow-x: auto; }
.astrolab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.astrolab-table th {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line-hairline);
  text-align: left;
  font: 700 0.7rem / 1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.astrolab-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(217, 207, 174, 0.55);
  vertical-align: middle;
  color: var(--navy);
}
.astrolab-table tr:last-child td { border-bottom: 0; }
.astrolab-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.astrolab-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.astrolab-cell .astrolab-glyph { width: 1.2rem; text-align: center; font-size: 1.15rem; }
.astrolab-cell svg { flex: none; width: 16px; height: 16px; }
.astrolab-retro {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(72, 12, 5, 0.09);
  color: var(--burgundy);
  font: 700 0.65rem / 1.3 var(--font-body);
  letter-spacing: 0.04em;
}

ul.astrolab-angles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.astrolab-angles li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.82rem;
  color: var(--navy);
}
.astrolab-angles strong {
  min-width: 2.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--burgundy);
}
.astrolab-angles svg { flex: none; width: 15px; height: 15px; }
.astrolab-angles span { font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .astrolab-angles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Influences + aspects rows */
ul.astrolab-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.astrolab-row-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(217, 207, 174, 0.6);
}
.astrolab-row-item:first-child { padding-top: 0; }
.astrolab-row-item:last-child { padding-bottom: 0; border-bottom: 0; }

.astrolab-row-item__glyphs {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem;
  width: 4.4rem;              /* one column width for every row, so titles line up */
  padding-top: 0.1rem;
  font-size: 1.2rem;
}
.astrolab-row-item__body { min-width: 0; flex: 1; }
.astrolab-row-item__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  margin: 0;
  font: 600 1rem / 1.3 var(--font-display);
  color: var(--burgundy);
}
a.astrolab-row-item__title:hover,
.astrolab-row-item__title a:hover { color: var(--copper-dark); }
.astrolab-row-item__sub {
  font: 400 0.82rem / 1.3 var(--font-body);
  color: var(--text-muted);
}
.astrolab-row-item__text {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--navy);
}
.astrolab-row-item__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.astrolab-tag {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--burgundy-tint);
  font: 600 0.68rem / 1.5 var(--font-body);
}
.astrolab-tag--flowing { background: rgba(46, 204, 113, 0.16); color: #1c6b3e; }
.astrolab-tag--dynamic { background: rgba(231, 76, 60, 0.13); color: #8f2a20; }
.astrolab-tag--blended { background: rgba(52, 152, 219, 0.14); color: #1f5f8f; }

.astrolab-more {
  margin-top: 0.9rem;
  border-top: 1px dashed var(--line-hairline);
  padding-top: 0.6rem;
}
.astrolab-more > summary {
  cursor: pointer;
  list-style: none;
  font: 600 var(--step--1) / 1.2 var(--font-body);
  color: var(--copper-dark);
}
.astrolab-more > summary::-webkit-details-marker { display: none; }
.astrolab-more > summary::after { content: " \25be"; }
.astrolab-more[open] > summary::after { content: " \25b4"; }
.astrolab-more .astrolab-rows { margin-top: 0.8rem; }

/* Overall themes */
ul.astrolab-themes {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.astrolab-theme {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.85rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background: #fff;
}
.astrolab-theme h4 {
  margin: 0 0 0.2rem;
  font: 600 1rem / 1.25 var(--font-display);
  color: var(--burgundy);
}
.astrolab-theme p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--navy);
}
@media (min-width: 640px) { .astrolab-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ==========================================================================
   7. Modals (new chart, settings, download)
   ========================================================================== */

.astrolab-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--space-3);
}
.astrolab-modal[hidden] { display: none; }

.astrolab-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.astrolab-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: min(90vh, 780px);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-lift);
  animation: astrolab-rise 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.astrolab-modal__panel--wide { max-width: 580px; }

@keyframes astrolab-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.astrolab-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-hairline);
}
.astrolab-modal__head h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--step-1);
}
.astrolab-modal__head h2 .astrolab-icon { color: var(--copper); }

.astrolab-modal__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.astrolab-modal__body {
  flex: 1;
  min-height: 0;
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.astrolab-modal__foot {
  display: flex;
  gap: 0.6rem;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line-hairline);
}
.astrolab-modal__foot .astrolab-btn { flex: 1; }

.astrolab-form-error {
  margin: 0 0 var(--space-3);
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(143, 42, 32, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(231, 76, 60, 0.08);
  font-size: var(--step--1);
  color: #8f2a20;
}
.astrolab-form-error[hidden] { display: none; }

.astrolab-place {
  position: relative;
}
.astrolab-place__actions {
  margin-top: 0.35rem;
}
.astrolab-place__actions .astrolab-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 0;
}

ul.astrolab-suggest {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 210px;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-lift);
  list-style: none;
}
.astrolab-suggest[hidden] { display: none; }
.astrolab-suggest button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  font-size: 0.92rem;
  color: var(--navy);
}
.astrolab-suggest button:hover,
.astrolab-suggest button:focus-visible { background: var(--cream); }

.astrolab-manual {
  margin-top: 0.6rem;
  border: 1px dashed var(--line-hairline);
  border-radius: var(--radius-sm);
  background: rgba(233, 224, 194, 0.28);
}
.astrolab-manual > summary {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font: 600 var(--step--1) / 1.2 var(--font-body);
  color: var(--copper-dark);
}
.astrolab-manual > summary::-webkit-details-marker { display: none; }
.astrolab-manual__body { padding: 0 0.75rem 0.75rem; }
.astrolab-manual__body .astrolab-select,
.astrolab-manual__body .astrolab-input { margin-bottom: 0.5rem; }

.astrolab-chosen {
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--navy);
}
.astrolab-chosen[hidden] { display: none; }
.astrolab-chosen strong { color: var(--burgundy); }

/* Download modal */
.astrolab-export {
  display: grid;
  gap: var(--space-3);
}
.astrolab-export__preview {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: var(--space-2);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #efeadb 25%, transparent 25%, transparent 75%, #efeadb 75%),
    linear-gradient(45deg, #efeadb 25%, transparent 25%, transparent 75%, #efeadb 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.astrolab-export__preview img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 230px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(72, 12, 5, 0.18);
}
.astrolab-export__meta {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.astrolab-export__status {
  min-height: 1.4em;
  margin: 0;
  text-align: center;
  font-size: var(--step--1);
  font-weight: 600;
  color: #1c6b3e;
}
.astrolab-export__status[data-error="true"] { color: #8f2a20; }
.astrolab-export__group[hidden] { display: none; }

.astrolab-share {
  display: grid;
  gap: 0.5rem;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-hairline);
}
.astrolab-share__link {
  display: flex;
  gap: 0.5rem;
}
.astrolab-share__link .astrolab-input {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.astrolab-share__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.astrolab-share__actions .astrolab-btn { flex: 1; }


/* ==========================================================================
   8. Bottom dock: switch between the two tools
   ========================================================================== */

.astrolab-dock {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 80;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  background: rgba(249, 248, 245, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lift);
  transform: translateX(-50%);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
/* Fades away once the site footer scrolls into view, so it never covers it. */
.astrolab-dock.is-tucked {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}

.astrolab-dock__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  color: var(--navy);
  font: 600 var(--step--1) / 1 var(--font-body);
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.astrolab-dock__tab:hover { background: var(--cream); color: var(--burgundy); }
.astrolab-dock__tab[aria-current="page"] {
  background: var(--burgundy);
  color: var(--soft-white);
}
.astrolab-dock__tab .astrolab-icon { width: 1.25em; height: 1.25em; }


/* ==========================================================================
   9. About + FAQ
   ========================================================================== */

.astrolab-about {
  max-width: var(--content-narrow);
  margin: var(--space-7) auto 0;
}
.astrolab-about h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--step-2);
}
.astrolab-about h2:first-child { margin-top: 0; }
.astrolab-about h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--step-1);
}
.astrolab-about p,
.astrolab-about li {
  color: var(--navy);
  line-height: 1.7;
}
.astrolab-about p + p { margin-top: var(--space-2); }
.astrolab-about ul,
.astrolab-about ol {
  margin: var(--space-2) 0 0;
  padding-left: 1.3rem;
}
.astrolab-about li { margin-bottom: 0.35rem; }
.astrolab-about a {
  color: var(--copper-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.astrolab-about a:hover { color: var(--burgundy); }

.astrolab-faq {
  margin-top: var(--space-2);
  border-top: 1px solid var(--line-hairline);
}
.astrolab-faq details { border-bottom: 1px solid var(--line-hairline); }
.astrolab-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  list-style: none;
  cursor: pointer;
  font: 600 var(--step-0) / 1.35 var(--font-display);
  color: var(--burgundy);
}
.astrolab-faq summary::-webkit-details-marker { display: none; }
.astrolab-faq summary::after {
  content: "+";
  flex: none;
  font: 400 1.5rem / 1 var(--font-body);
  color: var(--copper);
}
.astrolab-faq details[open] summary::after { content: "\2212"; }
.astrolab-faq summary:hover { color: var(--copper-dark); }
.astrolab-faq p {
  margin: 0 0 var(--space-3);
  max-width: none;
}

.astrolab-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-4);
}


/* ==========================================================================
   10. Small screens, toast offset, reduced motion
   ========================================================================== */

/* The site toast sits at the bottom centre: lift it clear of the dock. */
.astrolab-body .toast {
  bottom: calc(var(--space-5) + 3.6rem);
}

@media (max-width: 640px) {
  .astrolab-hero { padding-block: var(--space-4) var(--space-3); }

  .astrolab-dock {
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
  }
  .astrolab-dock.is-tucked { transform: translateY(16px); }
  .astrolab-dock__tab {
    flex: 1;
    min-width: 0;
    padding-inline: 0.5rem;
    font-size: 0.85rem;
  }

  .astrolab-toolbar .astrolab-btn {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.25rem;
    border-radius: var(--radius-md);
    font-size: 0.76rem;
  }

  .astrolab-panel__hint { display: none; }
  .astrolab-panel__chev { margin-left: auto; }
  .astrolab-panel > summary { padding: 0.8rem 0.9rem; }
  .astrolab-panel__body { padding-inline: 0.9rem; }

  /* Modals become bottom sheets */
  .astrolab-modal { align-items: end; padding: 0; }
  .astrolab-modal__panel,
  .astrolab-modal__panel--wide {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
  .astrolab-row--date { grid-template-columns: 1fr 1fr; }
  .astrolab-row--date > :last-child { grid-column: 1 / -1; }
}

@media print {
  .astrolab-dock,
  .astrolab-toolbar,
  .astrolab-modal,
  .astrolab-insights__actions { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .astrolab-modal__panel { animation: none; }
  .astrolab-spin { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}