/* Milky Way map on the Galactic archaeology guide page (_includes/mw-demo.html). The chrome
   takes the site tokens in both themes; the stage itself stays dark in both, like the plates,
   because the stars are drawn by adding light. The figure takes the article column's full
   width while the paragraphs around it keep their measure. */

.article-layout .prose:has(> .mw) { max-inline-size: none; }
.article-layout .prose:has(> .mw) > :not(.mw) { max-inline-size: 72ch; }

.mw {
  --mw-bg: #0c0b0a;
  container: mw / inline-size;
  margin-block: 6px 4px;
  display: grid;
  gap: 10px;
  font: 400 0.9rem/1.45 var(--sans);
  color: var(--ink-2);
}
.mw-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mw-views { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }

/* The canvas fills the stage; the stage sets the height. */
.mw-stage {
  position: relative;
  min-inline-size: 0;
  block-size: 560px;
  border-radius: var(--radius-sm);
  background: var(--mw-bg);
  overflow: hidden;
  touch-action: none;
}
@media (max-width: 600px) { .mw-stage { block-size: 440px; } .mw-tag { display: none; } }
.mw-stage canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; cursor: grab; }
.mw-stage canvas:active { cursor: grabbing; }
.mw-stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mw-play { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; min-inline-size: 62px; }
.mw-tag, .mw-load {
  position: absolute;
  font: 500 0.8125rem/1.3 var(--mono);
  letter-spacing: 0.02em;
  color: #95928d;
  pointer-events: none;
}
.mw-tag { inset-block-end: 10px; inset-inline-start: 12px; }
.mw-load { inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; }
.mw--ready .mw-load { display: none; }
.mw--nogl .mw-tag, .mw--nogl .mw-play { display: none; }

/* Marks for the Sun, the Galactic centre direction and two rings, placed by the script. */
.mw-marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mw-mark, .mw-ring {
  position: absolute;
  inset: 0 auto auto 0;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
  will-change: transform;
}
.mw-mark { display: inline-flex; align-items: center; gap: 7px; color: #e8e6e2; transform: translate(-5px, -50%); }
.mw-mark i { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.mw-mark--sun i { background: #ffd27a; border-color: #ffd27a; }
.mw-mark--gc { color: #cdc9c3; }
.mw-mark--gc i { inline-size: 8px; block-size: 8px; }
.mw-ring { color: #7d7a75; transform: translate(-50%, 4px); }

/* Colour scale beside the stage. */
.mw-scale {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px;
  justify-items: center;
  inline-size: 46px;
  font: 500 0.8125rem/1.2 var(--mono);
  color: var(--muted);
  text-align: center;
}
.mw-scale-title { color: var(--ink-2); }
.mw-scale-bar {
  inline-size: 12px;
  border-radius: 999px;
  background: linear-gradient(to top, rgb(107 158 255), rgb(255 173 82));
  border: 1px solid var(--line);
}

/* controls */
.mw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.mw-group { display: inline-flex; align-items: center; gap: 8px; }
.mw-lab { font: 500 0.8125rem/1.3 var(--mono); color: var(--muted); }
.mw-seg { display: inline-flex; gap: 4px; }
.mw-seg button {
  min-block-size: 32px;
  padding: 4px 11px;
  font: 500 0.8125rem/1.2 var(--sans);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.mw-seg button:not([aria-pressed="true"]):hover { background: var(--surface-2); color: var(--ink); }
.mw .btn[aria-pressed="true"], .mw-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mw-read { display: flex; margin: 0 0 0 auto; }
.mw-read div { display: flex; align-items: baseline; gap: 8px; }
.mw-read dt { font: 500 0.8125rem/1.3 var(--mono); color: var(--muted); }
.mw-read dd { margin: 0; font: 620 0.95rem/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* caption */
.mw-cap { display: grid; gap: 4px; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.mw-cap i { font-style: italic; }
.mw-cap .credit { font: 0.8125rem/1.5 var(--sans); }
.mw-noscript { padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .mw-seg button, .mw .btn { transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); }
}