/* Shared styling for the Astronomy tools (eclipse, solar system, sky map).
   The charts are deliberately monochrome, following the convention of printed
   star atlases: dark marks on a light ground. Magnitude and size are encoded
   as mark size, and a bright mark on a dark ground reads visually larger than
   an identical dark mark on a light ground (irradiation), which would distort
   exactly the variable the chart encodes.

   Three palettes are available through data-mode on .astro-tool:
     chart (default) white ground, black marks, for reading and planning
     night             black ground, white marks, matches the real sky
     red               black ground, red marks, preserves dark adaptation

   Chart colors are meaning-carrying, not branding, so they stay hardcoded
   (same rule the chess board squares follow). Every interactive control uses
   the site accent tokens so it tracks the four site themes.

   The colored exception is the overhead markers. --sun and --moon mark the
   real bodies rather than chart furniture, and each palette restates them so
   the red mode can keep both long-wavelength and preserve dark adaptation.
   Every other body takes its color from the shared table in astro-core.js,
   which is what makes Mars the same rust on this page and on the
   planetarium; --planet and --dso only tint the two checkboxes that switch
   those overlays on, standing in for a group that is many colors on the
   map. */

.astro-tool {
  --sky: #ffffff;
  --ink: #000000;
  --ink-soft: #6b6b6b;
  --ink-faint: #c9c9c9;
  --ink-hair: #e6e6e6;
  --shade: rgba(0, 0, 0, 0.10);
  --band: rgba(0, 0, 0, 0.30);
  --frame: #000000;
  --sun: #e07b00;
  --moon: #76839a;
  /* Phase disc on the Moon mark: sunlit side warm yellow, shadowed side
     gray, so the bright part is the part facing the Sun. */
  --moon-lit: #f2c94c;
  --moon-dark: #8a94a4;
  --planet: #a8732c;
  --dso: #9550c8;
  /* Fills the article column. The site sets a wide body, and a map is the
     kind of content that earns every pixel of it. */
  width: 100%;
  margin: 0 auto;
}

.astro-tool[data-mode="night"] {
  --sky: #000000;
  --ink: #ffffff;
  --ink-soft: #9a9a9a;
  --ink-faint: #3d3d3d;
  --ink-hair: #242424;
  --shade: rgba(255, 255, 255, 0.13);
  --band: rgba(255, 255, 255, 0.38);
  --frame: #555555;
  --sun: #ffa733;
  --moon: #ccd4df;
  --moon-lit: #ffe08a;
  --moon-dark: #454c56;
  --planet: #c69145;
  --dso: #b06fe0;
}

.astro-tool[data-mode="red"] {
  --sky: #000000;
  --ink: #ff4438;
  --ink-soft: #b32a22;
  --ink-faint: #5c1712;
  --ink-hair: #33100d;
  --shade: rgba(255, 68, 56, 0.15);
  --band: rgba(255, 68, 56, 0.42);
  --frame: #5c1712;
  --sun: #ff7a2e;
  --moon: #b3402f;
  /* Red mode stays long-wavelength: a brighter red-orange stands in for the
     sunlit side, never yellow, so dark adaptation survives. */
  --moon-lit: #e8683a;
  --moon-dark: #4a1a14;
  /* Red mode flattens every body color to the ink, so the swatches follow */
  --planet: #ff4438;
  --dso: #ff4438;
}

/* ---- Hero countdown -------------------------------------------------- */

.astro-hero {
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  text-align: center;
}

.astro-hero-kind {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 2px;
}

.astro-hero-count {
  /* Sized to sit just under the page title rather than above it. The old
     display scale (up to 5rem) came out at two and a half times the h1. */
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--site-accent);
}

.astro-hero-count.is-past {
  color: #8a8a8a;
}

.astro-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 26px;
  margin-top: 8px;
  font-size: 16px;
}

.astro-hero-meta > span:first-child {
  font-weight: 700;
}

.astro-hero-meta > span:last-child {
  color: #666;
}

/* ---- Canvas frame ---------------------------------------------------- */

.astro-stage {
  position: relative;
  background: var(--sky);
  border: 1px solid var(--frame);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  /* A drag across the map must not start selecting the page instead */
  -webkit-user-select: none;
  user-select: none;
}

.astro-stage canvas:focus {
  outline: none;
}

.astro-stage canvas {
  display: block;
  /* Scale to the column, but never taller than the screen: a tall chart on a
     short display must shrink to fit rather than force the page to scroll. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  cursor: grab;
  touch-action: none;
}

.astro-stage canvas.is-dragging {
  cursor: grabbing;
}

/* Zoom readout and reset, bottom right of the stage */
.astro-zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sky);
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  padding: 3px 4px;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.astro-stage:hover .astro-zoom,
.astro-zoom:focus-within {
  opacity: 1;
}

.astro-zoom button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
}

.astro-zoom span {
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: center;
}

/* Palette switch sits inside the stage, top right, and stays quiet until
   hovered so it does not compete with the chart. */
.astro-palette {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
  background: var(--sky);
  opacity: 0.45;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.astro-stage:hover .astro-palette,
.astro-palette:focus-within {
  opacity: 1;
}

.astro-palette button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
}

.astro-palette button + button {
  border-left: 1px solid var(--ink-faint);
}

.astro-palette button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--sky);
}

/* ---- Controls -------------------------------------------------------- */

.astro-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin: 14px 0;
}

.astro-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.astro-field > label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
}

.astro-field select,
.astro-field input[type="text"],
.astro-field input[type="number"],
.astro-field input[type="date"],
.astro-field input[type="datetime-local"] {
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  min-width: 0;
}

.astro-field select:focus,
.astro-field input:focus {
  outline: none;
  border-color: var(--site-accent);
  box-shadow: 0 0 0 3px var(--site-accent-ring);
}

.astro-btn {
  padding: 7px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--site-accent);
  border-radius: 3px;
  background: transparent;
  color: var(--site-accent);
  cursor: pointer;
  white-space: nowrap;
}

.astro-btn:hover:not(:disabled) {
  background: var(--site-accent);
  color: var(--site-accent-contrast);
}

.astro-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.astro-btn.is-active {
  background: var(--site-accent);
  color: var(--site-accent-contrast);
}

/* Checkboxes for overlays that are off by default, where a toggle button
   would not say whether the thing is on. They sit in their own wrapper so
   the uppercase field-label rule above cannot reach them. */
.astro-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 2px;
}

.astro-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

.astro-check input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--site-accent);
  cursor: pointer;
}

.astro-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-accent-ring);
}

/* The swatch ties each row to its marker color on the map, which leaves the
   wording itself in the ordinary text color. */
.astro-check .astro-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ---- Time scrubber --------------------------------------------------- */

.astro-scrub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0;
}

.astro-scrub input[type="range"] {
  flex: 1;
  min-width: 120px;
  accent-color: var(--site-accent);
}

.astro-clock {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Readout table --------------------------------------------------- */

.astro-readout {
  margin: 16px 0;
  overflow-x: auto;
}

.astro-readout table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.astro-readout th,
.astro-readout td {
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.astro-readout th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
}

.astro-readout td.num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.astro-note {
  font-size: 13px;
  color: #666;
  margin: 8px 0 0;
}

@media (max-width: 640px) {
  .astro-controls {
    gap: 8px 10px;
  }
  .astro-field select,
  .astro-field input {
    font-size: 16px; /* stops iOS Safari zooming the page on focus */
  }
}

/* ---- App shell (full window mode) ------------------------------------- */

/* Skin for the generic /app-mode.css kit. The floating cards follow the
   chart palette rather than the site theme, because a card is furniture
   sitting on the chart. In night mode a white card would glare, and in red
   mode anything but red light would cost the reader their dark adaptation,
   the same reason the palettes exist at all. */

.astro-tool.app-shell {
  width: auto;
  margin: 0;
  background: var(--sky);
}

/* Wins the position tug-of-war with the base .astro-stage rule above, which
   would otherwise leave the stage sized by its canvas instead of the window.
   Scoped to the main stage only: a page may keep further astro-stage widgets
   inside its panels (the planetarium's observer globe among them), and those
   must keep the ordinary framed-widget behavior. */
.app-shell .astro-stage.app-stage {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.app-shell .app-stage canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

/* The site theme and font toggles sit fixed at the window's bottom right
   corner, so the map's own floating controls shift left of them. */
.app-shell .astro-zoom {
  right: 76px;
  bottom: 14px;
  opacity: 0.75;
}

/* The tile attribution is drawn on the canvas between these two, right
   aligned about 70 to 90 CSS pixels above the bottom edge, so the palette
   jumps over it rather than sitting on it. */
.app-shell .astro-palette {
  top: auto;
  right: 76px;
  bottom: 96px;
  opacity: 0.75;
}

/* The panel shares the right edge with those two controls, and the shared
   kit lets it grow until its bottom sits exactly where the palette does, so
   a long readout swallows the palette whole. Stopping the panel higher keeps
   both reachable; the panel body scrolls, so nothing is lost by the cap. */
.astro-tool.app-shell .app-panel {
  max-height: calc(100dvh - 200px);
}

/* Cards take the palette ground and ink. */
.astro-tool.app-shell .app-card,
.astro-tool.app-shell .app-edge-tab {
  background: color-mix(in srgb, var(--sky) 88%, transparent);
  color: var(--ink);
  border-color: var(--ink-faint);
}

.astro-tool.app-shell .app-pill-sep {
  background: var(--ink-faint);
}

.astro-tool.app-shell .app-pill-menu {
  background: var(--sky);
  border-color: var(--ink-faint);
}

/* The site colors every anchor site-accent with !important, which turns
   invisible on the night and red cards, so the pill and overlay links take
   the palette ink at matching priority. */
.astro-tool.app-shell .app-pill-home,
.astro-tool.app-shell .app-pill-menu a,
.astro-tool.app-shell .app-overlay-body a {
  color: var(--ink) !important;
}

.astro-tool.app-shell .app-overlay-body a {
  text-decoration: underline;
}

.astro-tool.app-shell .app-pill-home:hover,
.astro-tool.app-shell .app-pill-menu a:hover {
  color: var(--ink-soft) !important;
  text-decoration: none;
}

/* Quarto callouts adopted into the help overlay keep their light article
   styling, which would glare in the dark palettes. */
.astro-tool.app-shell[data-mode="night"] .app-overlay-body .callout,
.astro-tool.app-shell[data-mode="red"] .app-overlay-body .callout {
  background-color: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink-faint) !important;
}

.astro-tool.app-shell[data-mode="night"] .app-overlay-body .callout-header,
.astro-tool.app-shell[data-mode="red"] .app-overlay-body .callout-header {
  background-color: var(--shade) !important;
  color: var(--ink) !important;
}

/* Hero as a compact chip instead of a page banner. The padding lives here
   because the base .astro-hero rule above also sets padding and this sheet
   loads after the kit, so the kit's value would lose the tie. */
.app-shell .astro-hero {
  margin: 0;
  border-bottom: 0;
  padding: 9px 28px 11px;
}

.app-shell .astro-hero-kind {
  color: var(--ink-soft);
}

.app-shell .astro-hero-count {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.app-shell .astro-hero-meta {
  margin-top: 3px;
  font-size: 13px;
  gap: 2px 16px;
}

.app-shell .astro-hero-meta > span:last-child {
  color: var(--ink-soft);
}

/* The switch into the advertised eclipse, sitting under the countdown while
   the map shows the live sky. */
.astro-hero-go {
  margin-top: 8px;
  padding: 5px 14px;
  font-size: 13px;
}

.astro-hero-go[hidden] {
  display: none;
}

/* Controls stack vertically inside the left panel. */
.app-shell .astro-controls {
  flex-direction: column;
  align-items: stretch;
  margin: 0;
}

.app-shell .astro-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-shell .astro-field-row .astro-btn {
  flex: 1 1 auto;
}

.app-shell .astro-field > label,
.app-shell .astro-readout th,
.app-shell .astro-note {
  color: var(--ink-soft);
}

.app-shell .astro-field select,
.app-shell .astro-field input[type="text"],
.app-shell .astro-field input[type="number"],
.app-shell .astro-field input[type="date"],
.app-shell .astro-field input[type="datetime-local"] {
  border-color: var(--ink-faint);
  /* A select sizes itself to its longest option, and the eclipse picker's
     options would push the whole panel wide open. The card sets the width. */
  width: 100%;
  max-width: 100%;
}

.app-shell .astro-readout {
  margin: 0;
}

/* Panel tables are dense readouts on a narrow card, so they run smaller
   than the article-width tables the base size was chosen for. */
.app-shell .astro-readout table {
  font-size: 12.5px;
}

.app-shell .astro-readout td.num {
  font-size: 12px;
}

.app-shell .astro-readout th,
.app-shell .astro-readout td {
  border-bottom-color: var(--ink-hair);
}

/* The site paints every thead as a solid navy banner, with !important. On a
   floating palette card that banner is wrong in all three palettes, so these
   out-specify it and restate the quiet column headings. */
.app-shell .astro-readout thead {
  background-color: transparent !important;
  color: var(--ink-soft) !important;
}

.app-shell .astro-readout thead th {
  background-color: transparent;
  color: var(--ink-soft);
}

.app-shell .astro-readout tbody tr {
  background-color: transparent !important;
}

.app-shell .astro-readout td {
  background-color: transparent;
  color: var(--ink);
}

.app-shell .astro-note {
  margin: 10px 0 0;
}

.app-shell .astro-scrub {
  margin: 0;
  flex: 1;
  flex-wrap: nowrap;
}

/* The bundled legend is drawn on the canvas at the bottom left, so the
   controls panel stops short of that corner rather than covering it. The
   reserve fits the tallest legend, the solar one with the year paths on. */
.app-shell .app-panel-left {
  max-height: calc(100dvh - 400px);
}

/* Night and red palettes: the site accent tokens are tuned for the page
   background, not for a black card, so interactive controls fall back to
   the palette ink. Red mode stays long-wavelength throughout. */
.astro-tool.app-shell[data-mode="night"] .astro-btn,
.astro-tool.app-shell[data-mode="red"] .astro-btn {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.astro-tool.app-shell[data-mode="night"] .astro-btn:hover:not(:disabled),
.astro-tool.app-shell[data-mode="red"] .astro-btn:hover:not(:disabled),
.astro-tool.app-shell[data-mode="night"] .astro-btn.is-active,
.astro-tool.app-shell[data-mode="red"] .astro-btn.is-active {
  background: var(--ink);
  color: var(--sky);
}

.astro-tool.app-shell[data-mode="night"] .astro-field select:focus,
.astro-tool.app-shell[data-mode="night"] .astro-field input:focus,
.astro-tool.app-shell[data-mode="red"] .astro-field select:focus,
.astro-tool.app-shell[data-mode="red"] .astro-field input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--shade);
}

.astro-tool.app-shell[data-mode="night"] .astro-hero-count,
.astro-tool.app-shell[data-mode="red"] .astro-hero-count {
  color: var(--ink);
}

.astro-tool.app-shell[data-mode="night"] .astro-scrub input[type="range"],
.astro-tool.app-shell[data-mode="red"] .astro-scrub input[type="range"] {
  accent-color: var(--ink);
}

.astro-tool.app-shell[data-mode="night"] .app-tabs [role="tab"][aria-selected="true"],
.astro-tool.app-shell[data-mode="red"] .app-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--ink);
}

.astro-tool.app-shell[data-mode="night"] .app-pill-home:hover,
.astro-tool.app-shell[data-mode="red"] .app-pill-home:hover,
.astro-tool.app-shell[data-mode="night"] .app-pill button:hover,
.astro-tool.app-shell[data-mode="red"] .app-pill button:hover,
.astro-tool.app-shell[data-mode="night"] .app-pill-menu a:hover,
.astro-tool.app-shell[data-mode="red"] .app-pill-menu a:hover {
  color: var(--ink);
}

/* A pinned footer region at the bottom of a panel, outside its scrolling
   body, for widgets that must stay reachable (the planetarium's looking
   controls). */
.app-panel-foot {
  border-top: 1px solid var(--ink-hair);
  padding: 10px 14px 12px;
}

/* Planetarium: compass and tilt side by side under the controls, with the
   direction readout beneath them. */
#pl-lookfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

#pl-gazebox {
  flex: 1 1 46%;
  min-width: 0;
}

#pl-tiltbox {
  flex: 1 1 46%;
  min-width: 0;
}

/* The widget canvases fill their flex boxes; their natural pixel size would
   otherwise force the tilt onto its own row. */
#pl-lookfoot .astro-stage canvas {
  width: 100%;
  height: auto;
  max-height: none;
}

#pl-lookfoot .astro-note {
  flex-basis: 100%;
  margin: 4px 0 0;
}

/* The eclipse page reserves deep bottom-left space for its long legend; the
   planetarium legend is short, and its controls card carries the looking
   footer, so it may run taller. */
#planetarium .app-panel-left {
  max-height: calc(100dvh - 240px);
}

/* Dark scrim needs no change per palette; the overlay card follows .app-card. */

/* Between full desktop and phone widths the hero would run under the side
   panels, so it drops its detail lines and keeps only the countdown. */
@media (max-width: 1100px) {
  .app-shell .astro-hero-meta {
    display: none;
  }
}

@media (max-width: 760px) {
  /* The canvas legend would sit under the drawers on a phone; the panel cap
     matters less than reachability there, so it returns to the kit default. */
  .app-shell .app-panel-left {
    max-height: calc(100dvh - 190px);
  }
}