/* Модель Галактики (milky-way.html) поверх общего оформления 3D-страниц (style.css): слева внизу — легенда (она же
   слои), внизу — часы (шкала времени, как на карте неба), справа — карточка объекта. Сцена всегда тёмная: значки
   легенды — тех же цветов, что на ней. */

body[data-page="galaxy"] #app { --dock-h: 62px; }       /* высоту шкалы уточняет скрипт */
#viewport canvas { position: absolute; inset: 0; }

/* ── легенда ── */
#legend {
  left: var(--edge); bottom: var(--edge-b); width: 264px;
  max-height: calc(100% - var(--top) - 64px - var(--edge-b)); display: flex; flex-direction: column; overflow: hidden;
}
#legend.collapsed { width: auto; }
#legend.collapsed #legend-list { display: none; }
#legend-list { list-style: none; margin: 0; padding: 0 12px 8px; overflow: auto; overscroll-behavior: contain; }
#legend-list li { margin: 0; }
#legend label.check { gap: 9px; padding: 5px 0; font-size: 14px; line-height: 1.25; align-items: center; }
#legend label.check input { flex: none; margin: 0; }
#legend small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.lg-row { display: flex; align-items: center; gap: 9px; padding: 5px 0 5px 26px; font-size: 14px; font-weight: 700; }
/* значок — на кусочке тёмной сцены: цвета те же, что на ней, и в светлой теме видны */
.lg-i { flex: none; width: 22px; height: 22px; padding: 1px; fill: none; stroke-width: 1.4; background: #03050c; border-radius: 6px; }
.lg-sun { stroke: var(--accent); stroke-width: 1.8; }
.lg-sun circle + circle { fill: var(--accent); stroke: none; }
.lg-arm { stroke: rgb(170, 255, 190); stroke-width: 1.6; }
.lg-dot { stroke-dasharray: 1.5 3; opacity: .7; }
.lg-dir { stroke: rgb(255, 196, 140); }
.lg-gc { stroke: rgb(232, 204, 150); }
.lg-oc { stroke: rgb(226, 210, 160); stroke-dasharray: 2.6 2.2; }
.lg-neb3 { display: inline-flex; width: auto; gap: 0; padding: 1px 2px; }
.lg-neb3 svg { width: 15px; height: 20px; fill: none; stroke-width: 1.4; }
.lg-neb { stroke: rgb(170, 210, 176); }
.lg-pn { stroke: rgb(160, 206, 206); }
.lg-snr { stroke: rgb(196, 182, 226); stroke-dasharray: 2.6 2.2; }
.lg-star { fill: rgb(255, 236, 214); stroke: none; }
.lg-glow circle { stroke: none; }
.lg-glow .g-young { fill: rgb(176, 204, 255); }
.lg-glow .g-old { fill: rgb(255, 222, 172); }
.lg-glow .g-hii { fill: rgb(255, 124, 164); }

/* ── карточка объекта ── */
#info .info-sub { margin: -4px 0 10px; font: 700 13px/1.3 var(--mono); color: var(--muted); }
#info-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 6px; }
#info-links:empty { display: none; }
#info dd { white-space: normal; }
#info dd.txt { font: 600 12.5px/1.35 var(--body); color: var(--muted); }

/* ── «Об этой модели» ── */
#about .about-body h3 { font: 800 15px/1.25 var(--display); color: var(--fg); margin: 14px 0 6px; }
#about .credits { font-size: 13px; }
#about h2.pop-h { margin-bottom: 8px; }

/* ── часы ── на широком экране шкала — между легендой (264 px) и масштабом, подсказка — над ней, по её середине */
body[data-page="galaxy"] .tm-dock { left: calc(var(--edge) + 276px); right: calc(var(--edge-r) + 168px); max-width: 640px; }
body[data-page="galaxy"] .app-hint { left: calc(50% + 54px); max-width: min(760px, calc(100% - 500px)); }
body[data-page="galaxy"] .tm-shuttle { min-width: 100px; }
/* счётчик лет: ширина — под «−12,345 Myr», чтобы шкала не дёргалась, пока он растёт */
.gx-when { justify-items: start; min-width: 112px; }
.gx-when .tm-speed-v { font-size: 17px; }

/* до 1040 px шкала — во всю ширину внизу; над ней свёрнутая легенда и масштаб, ещё выше — подсказка */
@media (max-width: 1040px) {
  body[data-page="galaxy"] .tm-dock { left: var(--edge); right: var(--edge-r); max-width: 760px; }
  body[data-page="galaxy"] #legend { bottom: var(--above-dock); }
  body[data-page="galaxy"] .app-hint { display: block; left: 50%; max-width: calc(100% - 32px); bottom: calc(var(--above-dock) + 52px); }
}
/* шкала короткая — одной строкой и на средних экранах (style.css там делит её на две) */
@media (min-width: 561px) and (max-width: 1000px) {
  body[data-page="galaxy"] .tm-bar { flex-wrap: nowrap; }
  body[data-page="galaxy"] .tm-br { display: none; }
  body[data-page="galaxy"] .tm-shuttle, body[data-page="galaxy"] .tm-speed-read { order: 0; flex-basis: auto; }
}
@media (max-width: 760px) {
  /* карточка — над свёрнутой легендой */
  body[data-page="galaxy"] #info { bottom: calc(var(--above-dock) + 52px); }
  #legend { width: min(264px, calc(100% - 2 * var(--edge))); }
}
/* телефон: годы, скорость и «Now» — первой строкой, пуск и челнок — второй */
@media (max-width: 560px) {
  body[data-page="galaxy"] .tm-dock { left: 8px; right: 8px; }
  body[data-page="galaxy"] .gx-when { flex: 1 1 auto; min-width: 0; }
  body[data-page="galaxy"] .tm-speed-lab { display: block; }
}
@media (max-height: 560px) and (min-width: 520px) {
  #legend { width: 240px; }
}