/* Solar System Orrery: the artifact.
   A found object, not AppZoo: an engraved brass almanac from an observatory whose tables know one more planet.
   Cream-vellum plates and sepia ink by day; a lamplit observatory by night (its own design, not an inversion).
   Copperplate labels, brass rules, a dial-plate date. Its one nod to the Zoo is its title type (Ultra).
   Scope (decisions/032): everything here sits under [data-artifact="solar-system-orrery"], and nothing reaches the cabinet.
   The palette is the artifact's own, defined once per theme at the scope root (the only place colour literals are allowed).
   The sky stays dark in both themes, so the body colours (--ao-gold and friends) are chosen for a dark ground. */

[data-artifact="solar-system-orrery"] {
  --ao-vellum: #f3ead7;         /* plates */
  --ao-vellum-deep: #e6d9bb;    /* controls, table heads */
  --ao-ink: #2a2118;            /* sepia-black ink */
  --ao-ink-soft: #55452f;       /* secondary text */
  --ao-brass-ink: #6e4f0c;      /* brass as text and rules on a plate */
  --ao-brass-strong: #4f3706;
  --ao-on-brass: #f3ead7;
  --ao-rule: #8a6b2c;           /* engraved rules and control edges */
  --ao-danger: #8a1f1f;
  --ao-focus-in: #f3ead7;
  --ao-focus-out: #1b2a6b;
  --ao-sky: #1b2350;            /* the sky plate */
  --ao-sky-deep: #0e1331;
  --ao-chalk: #efe6cf;          /* text and lines on the sky */
  --ao-chalk-soft: #c9cfe8;
  --ao-muted: #aab4d8;          /* sky: orbit lines, belt, stars, Mercury, Pluto */
  --ao-gold: #f0cd78;           /* sky: Sun, Saturn, Psyche */
  --ao-brass: #d9aa4a;          /* sky: Venus, Jupiter, the ninth orbit */
  --ao-blue: #8fa8ee;           /* sky: Earth, Neptune, interstellar visitors */
  --ao-blue-deep: #b9c6f6;      /* sky: Uranus, comets */
  --ao-red: #f4917a;            /* sky: Mars, Apophis */
  --ao-face: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ao-plate: "IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  --ao-title: "Ultra", Georgia, serif; /* the nod: AppZoo's title type */
  --ao-tile: 256px;
  --ao-fs-xs: 0.8rem;
  --ao-fs-s: 0.9rem;
  --ao-fs-m: 0.95rem;
  --ao-fs-l: 1rem;
  --ao-fs-xl: 1.05rem;
  --ao-fs-base: 1.125rem;
  --ao-fs-h: 1.5rem;

  display: block;
  color: var(--ao-ink);
  font-family: var(--ao-face);
  font-weight: 500;
  font-size: var(--ao-fs-base);
  line-height: 1.45;
}
:root[data-theme="dark"] [data-artifact="solar-system-orrery"] {
  --ao-vellum: #1d1812;
  --ao-vellum-deep: #2b2418;
  --ao-ink: #f1e7cf;
  --ao-ink-soft: #cdbd98;
  --ao-brass-ink: #e8c264;
  --ao-brass-strong: #f4d98c;
  --ao-on-brass: #1d1812;
  --ao-rule: #a98a45;
  --ao-danger: #ff9d8a;
  --ao-focus-in: #1d1812;
  --ao-focus-out: #f4d98c;
  --ao-sky: #0b0f27;
  --ao-sky-deep: #05071a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="solar-system-orrery"] {
    --ao-vellum: #1d1812;
    --ao-vellum-deep: #2b2418;
    --ao-ink: #f1e7cf;
    --ao-ink-soft: #cdbd98;
    --ao-brass-ink: #e8c264;
    --ao-brass-strong: #f4d98c;
    --ao-on-brass: #1d1812;
    --ao-rule: #a98a45;
    --ao-danger: #ff9d8a;
    --ao-focus-in: #1d1812;
    --ao-focus-out: #f4d98c;
    --ao-sky: #0b0f27;
    --ao-sky-deep: #05071a;
  }
}

/* The instrument case: the stage and its overlay sit in a brass-bound frame as wide as the page's column. */
[data-artifact="solar-system-orrery"] .orrery {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--space-8, 2rem);
  border: 4px double var(--ao-rule);
  background: var(--ao-sky-deep);
}

[data-artifact="solar-system-orrery"] .orrery-stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100svh - 15rem);
  min-height: 28rem;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--ao-sky), var(--ao-sky-deep));
  touch-action: none;
  isolation: isolate;
  color: var(--ao-chalk);
}
/* Starfield: an SVG mask filled with a chalk colour, drifting slowly (compositor-only transform). */
[data-artifact="solar-system-orrery"] .orrery-stage::before {
  content: "";
  position: absolute;
  inset: calc(var(--ao-tile) * -1) 0 0 calc(var(--ao-tile) * -1);
  background: var(--ao-chalk);
  opacity: 0.55;
  -webkit-mask: url(../../orrery/starfield.svg) 0 0 / var(--ao-tile) var(--ao-tile) repeat;
  mask: url(../../orrery/starfield.svg) 0 0 / var(--ao-tile) var(--ao-tile) repeat;
  pointer-events: none;
  z-index: -1;
}
/* Engraved orbit rings behind the start prompt, until the 3D view replaces them. */
[data-artifact="solar-system-orrery"] .orrery-stage:not(:has(canvas))::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28rem;
  height: 28rem;
  max-width: 90%;
  max-height: 90%;
  translate: -50% -50%;
  background: var(--ao-brass);
  opacity: 0.45;
  -webkit-mask: url(../../orrery/orbit-rings.svg) center / contain no-repeat;
  mask: url(../../orrery/orbit-rings.svg) center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  [data-artifact="solar-system-orrery"] .orrery:not([data-offscreen]) .orrery-stage::before { animation: ao-drift 240s linear infinite; }
  [data-artifact="solar-system-orrery"] .orrery:not([data-offscreen]) .orrery-stage:not(:has(canvas))::after { animation: ao-turn 180s linear infinite; }
}
@keyframes ao-drift { to { transform: translate(var(--ao-tile), var(--ao-tile)); } }
@keyframes ao-turn { to { rotate: 360deg; } }

[data-artifact="solar-system-orrery"] .orrery-sky { position: absolute; inset: 0; color: var(--ao-chalk); }
[data-artifact="solar-system-orrery"] .orrery-sky canvas { display: block; width: 100%; height: 100%; outline: none; }
[data-artifact="solar-system-orrery"] .orrery-sky canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--ao-gold); }
[data-artifact="solar-system-orrery"] .orrery-probe { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Start prompt and the no-WebGL / no-JavaScript message, on a vellum card over the sky. */
[data-artifact="solar-system-orrery"] .orrery-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  box-sizing: border-box;
  width: min(calc(100% - 1.5rem), 24rem);
  display: none;
  gap: 0.75rem;
  justify-items: center;
  padding: 1.5rem;
  text-align: center;
  background: var(--ao-vellum);
  border: 2px solid var(--ao-rule);
  outline: 1px solid var(--ao-rule);
  outline-offset: 3px;
}
[data-artifact="solar-system-orrery"] .orrery-prompt:has(.orrery-message:not(:empty)),
[data-artifact="solar-system-orrery"] .orrery-prompt:has([data-orrery-start]:not([hidden])) { display: grid; }
[data-artifact="solar-system-orrery"] .orrery-message { margin: 0; color: var(--ao-ink); }
[data-artifact="solar-system-orrery"] .orrery-message:empty { display: none; }
/* Without scripting the noscript message says it; the pending one would repeat it. */
@media (scripting: none) { [data-artifact="solar-system-orrery"] [data-orrery-message] { display: none; } }
[data-artifact="solar-system-orrery"] .orrery-message[data-kind="error"] { color: var(--ao-danger); font-weight: 700; }
[data-artifact="solar-system-orrery"] .orrery-start { margin: 0; }
[data-artifact="solar-system-orrery"] .orrery-start[hidden],
[data-artifact="solar-system-orrery"] .orrery-start:has([hidden]) { display: none; }

[data-artifact="solar-system-orrery"] .orrery-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-artifact="solar-system-orrery"] .orrery-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-family: var(--ao-plate);
  font-size: var(--ao-fs-m);
  color: var(--ao-chalk);
  background: transparent;
  border: 0;
  text-shadow: 0 0 4px var(--ao-sky-deep), 0 0 8px var(--ao-sky-deep);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
[data-artifact="solar-system-orrery"] .orrery-label:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ao-sky-deep), 0 0 0 5px var(--ao-gold); }
[data-artifact="solar-system-orrery"] .orrery-label[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; color: var(--ao-gold); }
[data-artifact="solar-system-orrery"] .orrery-ninth {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ao-plate);
  font-size: var(--ao-fs-s, 0.75rem);
  color: var(--ao-brass);
  opacity: 0.45;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
[data-artifact="solar-system-orrery"] .orrery-ninth[hidden] { display: none; }
[data-artifact="solar-system-orrery"] .orrery-ninth.is-offscreen { visibility: hidden; }
[data-artifact="solar-system-orrery"] .orrery-label[hidden] { display: none; }
[data-artifact="solar-system-orrery"] .orrery-label.is-offscreen { visibility: hidden; }

[data-artifact="solar-system-orrery"] .orrery-date {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--ao-plate);
  font-size: var(--ao-fs-l);
  color: var(--ao-gold);
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* Legend: engraved tags over the top-left of the sky. */
[data-artifact="solar-system-orrery"] .orrery-legend-box {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  max-width: calc(100% - 8rem);
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}
[data-artifact="solar-system-orrery"] .orrery-legend-box[hidden] { display: none; }
[data-artifact="solar-system-orrery"] .orrery-legend-h { margin: 0; font-family: var(--ao-plate); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--ao-fs-s); color: var(--ao-gold); }
[data-artifact="solar-system-orrery"] .orrery-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
[data-artifact="solar-system-orrery"] .orrery-legend li { margin: 0; max-width: none; pointer-events: auto; }
[data-artifact="solar-system-orrery"] .orrery-tag-kind { margin-left: 0.5rem; font-family: var(--ao-plate); font-size: var(--ao-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }

/* Overlay: info card and Controls panel above the dock. The layer itself ignores the pointer so drag and pinch reach the canvas. */
[data-artifact="solar-system-orrery"] .orrery-overlay {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  top: 6rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  pointer-events: none;
}
[data-artifact="solar-system-orrery"] .orrery-overlay[hidden] { display: none; }
[data-artifact="solar-system-orrery"] .orrery-overlay > *,
[data-artifact="solar-system-orrery"] .orrery-cards > * { pointer-events: auto; }
[data-artifact="solar-system-orrery"] .orrery-cards { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0.75rem; min-height: 0; pointer-events: none; }

[data-artifact="solar-system-orrery"] .orrery-panel,
[data-artifact="solar-system-orrery"] .orrery-dock,
[data-artifact="solar-system-orrery"] .orrery-info:not(:empty) {
  box-sizing: border-box;
  background: var(--ao-vellum);
  color: var(--ao-ink);
  border: 2px solid var(--ao-rule);
  outline: 1px solid var(--ao-rule);
  outline-offset: -6px;
}
/* Engraved scale ticks along the top edge of each plate. */
[data-artifact="solar-system-orrery"] .orrery-panel::before,
[data-artifact="solar-system-orrery"] .orrery-dock::before {
  content: "";
  display: block;
  height: 0.5rem;
  margin: -0.25rem 0 0.5rem;
  background: var(--ao-brass-ink);
  -webkit-mask: url(../../orrery/brass-tick.svg) 0 0 / 2rem 0.5rem repeat-x;
  mask: url(../../orrery/brass-tick.svg) 0 0 / 2rem 0.5rem repeat-x;
}
[data-artifact="solar-system-orrery"] .orrery-panel { display: grid; gap: 0.75rem; padding: 0.75rem 1rem 1rem; overflow-y: auto; min-height: 0; max-height: 100%; max-width: 24rem; align-self: flex-end; margin-left: auto; width: 100%; }
[data-artifact="solar-system-orrery"] .orrery-panel[hidden] { display: none; }
[data-artifact="solar-system-orrery"] .orrery-dock { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; }
[data-artifact="solar-system-orrery"] .orrery-dock .orrery-speed { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }

[data-artifact="solar-system-orrery"] .orrery-field { display: grid; gap: 0.25rem; }
[data-artifact="solar-system-orrery"] .orrery-field label,
[data-artifact="solar-system-orrery"] .orrery-share label { font-family: var(--ao-plate); font-size: var(--ao-fs-l); letter-spacing: 0.04em; color: var(--ao-ink); }

/* The dial-plate date: still the native date input, set in a ruled well. */
[data-artifact="solar-system-orrery"] .orrery-overlay input[type="date"],
[data-artifact="solar-system-orrery"] .orrery-overlay input[type="text"] {
  font: inherit;
  font-weight: 700;
  color: var(--ao-ink);
  background: var(--ao-vellum-deep);
  border: 2px solid var(--ao-rule);
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;
  box-sizing: border-box;
  width: 100%;
  letter-spacing: 0.03em;
}
[data-artifact="solar-system-orrery"] .orrery-overlay input[type="range"] { width: 100%; accent-color: var(--ao-brass-ink); min-height: 2.75rem; }
[data-artifact="solar-system-orrery"] .orrery-overlay :is(input, button):focus-visible,
[data-artifact="solar-system-orrery"] .ao-btn:focus-visible,
[data-artifact="solar-system-orrery"] .orrery-scroll:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ao-focus-in), 0 0 0 5px var(--ao-focus-out); }
[data-artifact="solar-system-orrery"] .orrery-readout { font-family: var(--ao-plate); font-size: var(--ao-fs-l); color: var(--ao-brass-ink); letter-spacing: 0.04em; }
[data-artifact="solar-system-orrery"] .orrery-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
[data-artifact="solar-system-orrery"] .orrery-checks { display: grid; gap: 0.25rem; }
[data-artifact="solar-system-orrery"] .orrery-check { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
[data-artifact="solar-system-orrery"] .orrery-check input { width: 1.5rem; height: 1.5rem; accent-color: var(--ao-brass-ink); }
[data-artifact="solar-system-orrery"] .orrery-note { margin: 0; font-size: var(--ao-fs-l); color: var(--ao-ink-soft); }
[data-artifact="solar-system-orrery"] .orrery-note:empty { display: none; }
[data-artifact="solar-system-orrery"] .orrery-share { display: grid; gap: 0.25rem; margin: 0; }
[data-artifact="solar-system-orrery"] .orrery-share[hidden] { display: none; }

/* The almanac's buttons: engraved brass plates. Pressed is aria-pressed, drawn here. */
[data-artifact="solar-system-orrery"] .ao-btn {
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-family: var(--ao-plate);
  font-size: var(--ao-fs-l);
  letter-spacing: 0.05em;
  color: var(--ao-ink);
  background: var(--ao-vellum-deep);
  border: 2px solid var(--ao-rule);
  border-radius: 0;
  cursor: pointer;
}
[data-artifact="solar-system-orrery"] .ao-btn:hover { border-color: var(--ao-brass-ink); }
[data-artifact="solar-system-orrery"] .ao-btn[aria-pressed="true"],
[data-artifact="solar-system-orrery"] .ao-btn[aria-expanded="true"] { background: var(--ao-brass-ink); color: var(--ao-on-brass); border-color: var(--ao-brass-strong); }
[data-artifact="solar-system-orrery"] .orrery-tag { min-height: 2.75rem; }

[data-artifact="solar-system-orrery"] .orrery-info:empty { display: none; }
[data-artifact="solar-system-orrery"] .orrery-info:not(:empty) { padding: 0.75rem 1rem; overflow-y: auto; max-height: 40%; }
[data-artifact="solar-system-orrery"] .ao-info-card { margin: 0; padding: 0; border: 0; box-shadow: none; max-width: none; }
[data-artifact="solar-system-orrery"] .ao-info-name { margin: 0; font-family: var(--ao-plate); font-size: var(--ao-fs-h); font-weight: 400; letter-spacing: 0.04em; color: var(--ao-ink); }
[data-artifact="solar-system-orrery"] .ao-info-kind { margin: 0 0 0.5rem; font-family: var(--ao-plate); font-size: var(--ao-fs-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ao-brass-ink); }
[data-artifact="solar-system-orrery"] .ao-info-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0 0 0.5rem; }
[data-artifact="solar-system-orrery"] .ao-info-fields dt { color: var(--ao-ink-soft); }
[data-artifact="solar-system-orrery"] .ao-info-fields dd { margin: 0; font-weight: 700; color: var(--ao-ink); }
[data-artifact="solar-system-orrery"] .ao-info-note { margin: 0 0 0.75rem; color: var(--ao-ink); }

@media (min-width: 48rem) {
  [data-artifact="solar-system-orrery"] .orrery-stage { height: calc(100svh - 15rem); }
  [data-artifact="solar-system-orrery"] .orrery-cards { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  [data-artifact="solar-system-orrery"] .orrery-info:not(:empty) { width: 22rem; max-height: none; }
  [data-artifact="solar-system-orrery"] .orrery-dock { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.5rem; }
  [data-artifact="solar-system-orrery"] .orrery-dock::before { grid-column: 1 / -1; }
  [data-artifact="solar-system-orrery"] .orrery-dock .orrery-note { grid-column: 1 / -1; }
}
/* On a phone an open panel takes the whole card row, so the info card waits. */
@media (max-width: 47.99rem) {
  [data-artifact="solar-system-orrery"] .orrery[data-panel-open] .orrery-info { display: none; }
}

/* The almanac's tables: ruled plates under the instrument. */
[data-artifact="solar-system-orrery"] > section {
  box-sizing: border-box;
  margin: 0 0 var(--space-8, 2rem);
  padding: 1.25rem 1.5rem 0.5rem;
  background: var(--ao-vellum);
  color: var(--ao-ink);
  border: 2px solid var(--ao-rule);
  outline: 1px solid var(--ao-rule);
  outline-offset: -6px;
}
[data-artifact="solar-system-orrery"] > section > h2 {
  margin: 0 0 0.5rem;
  font-family: var(--ao-title);
  font-weight: 400;
  font-size: var(--ao-fs-h);
  line-height: 1.2;
  color: var(--ao-ink);
}
[data-artifact="solar-system-orrery"] > section > p { margin: 0 0 1rem; max-width: 40rem; color: var(--ao-ink); }
[data-artifact="solar-system-orrery"] .orrery-scroll { overflow-x: auto; }
[data-artifact="solar-system-orrery"] .orrery-table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: var(--ao-fs-xl); }
[data-artifact="solar-system-orrery"] .orrery-table caption { text-align: left; color: var(--ao-ink-soft); padding-bottom: 0.5rem; }
[data-artifact="solar-system-orrery"] .orrery-table :is(th, td) { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ao-rule); color: var(--ao-ink); }
[data-artifact="solar-system-orrery"] .orrery-table thead th { font-family: var(--ao-plate); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--ao-fs-m); color: var(--ao-brass-ink); background: var(--ao-vellum-deep); }