/* The surrounding page, toolbar and stage are owned by the app shell. */
.sky-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  outline: none;
  background: #070c12;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sky-canvas.has-sky-target {
  cursor: pointer;
}

.sky-canvas.is-dragging {
  cursor: grabbing;
}

.sky-canvas:focus-visible {
  outline: 2px solid #b6d9e8;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px rgba(9, 19, 32, 0.7);
}

.sky-fullscreen {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid #59727d;
  border-radius: 6px;
  background: #09131ee6;
  color: #d6e6e3;
  font-size: 12px;
  box-shadow: 0 3px 15px #0003;
}
.sky-fullscreen svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sky-fullscreen:hover { background: #1b303c; }
.sky-screen-actions { position: absolute; z-index: 2; top: 16px; right: 16px; display: flex; gap: 8px; }
.sky-screen-actions .sky-fullscreen { position: static; }
.sky-settings { min-height: 42px; padding: 10px 13px; border: 1px solid #59727d; border-radius: 6px; background: #09131ee6; color: #d6e6e3; font-size: 12px; box-shadow: 0 3px 15px #0003; }
.sky-settings:hover { background: #1b303c; }
.sky-dot-host { border-color: #9aa8b8; border-radius: 50%; transform: none; }
.sky-editorial-badge { display: inline-flex; align-items: flex-start; gap: 6px; color: #9aa8b8; font: 500 10px/1.6 var(--sans, sans-serif); }
.sky-editorial-symbol { font-size: 16px; line-height: 1; flex: none; padding-top: 1px; }
.sky-editorial-tony { color: #edc77e; }
.sky-editorial-assistant { color: #77d9d0; }
.sky-editorial-mixed { color: #b4d7b7; }
.sky-editorial-catalog { color: #9aa8b8; }
.sky-summary-badge { display: inline-flex; align-items: flex-start; gap: 6px; color: #c3d8f0; font: 500 11px/1.6 var(--sans, sans-serif); }
.sky-has-summary { color: #c3d8f0; }
.sky-object-button .sky-summary-badge { display: flex; margin-top: 5px; }
.sky-legend > .sky-summary-badge { margin: 0 18px 5px 0; }
.catalog-summary-back { min-height: 44px; margin: 0 0 20px; padding: 8px 12px; border: 1px solid #526d78; border-radius: 5px; font-size: 13px; color: #c3d8f0; }
.catalog-summary-list { display: grid; gap: 10px; }
.catalog-summary-choice { display: grid; justify-items: start; gap: 5px; min-height: 76px; padding: 14px 16px; border: 1px solid #435967; border-radius: 6px; background: #14232d; text-align: left; }
.catalog-summary-choice strong { font-size: 17px; font-weight: 500; }
.catalog-summary-choice small { color: #aabcc8; font-size: 12px; }
#info-content .catalog-summary-text { color: #d8e4e3; font: 20px/1.8 var(--serif); }
#info-content .catalog-summary-status, #info-content .catalog-summary-boundary { font-size: 12px; line-height: 1.7; color: #a5bac8; }
.catalog-summary-facts { display: grid; gap: 18px; }
.catalog-summary-facts > div { padding-bottom: 14px; border-bottom: 1px solid #354753; }
.catalog-summary-facts dt { font-size: 12px; color: #a7bdc9; }
.catalog-summary-facts dd { margin: 8px 0; font-size: 18px; }
.catalog-summary-facts a, .catalog-summary-sources a { font-size: 13px; line-height: 1.8; }
.catalog-summary-unknowns, .catalog-summary-sources { padding-left: 20px; font-size: 14px; line-height: 1.8; }
.catalog-summary h3 { margin-top: 26px; font: 24px var(--serif); }
.catalog-treatment-badge { display: inline-flex; align-items: flex-start; gap: 7px; color: #c3d8f0; font: 500 12px/1.6 var(--sans, sans-serif); }
.catalog-treatment-facts { color: #a6b7c5; }
.catalog-treatment-book-profile { color: #dcc389; }
.catalog-treatment-journey { color: #a6d6c4; }
.sky-object-button .catalog-treatment-badge { display: flex; margin-top: 5px; }
.sky-legend > .catalog-treatment-badge { margin: 0 18px 5px 0; }
.sky-catalog-planet { padding: 16px 0; border-top: 1px solid #3a4d5b; }
.sky-catalog-planet h4 { margin: 0 0 7px; font-size: 15px; }
.sky-catalog-planet .sky-visit { margin-top: 9px; }
.sky-catalog-planet .sky-fact-open, .sky-catalog-planet .sky-model-visit { padding: 9px 11px; font-size: 11px; background: #13222c; }
.catalog-search-label { display: block; margin: 22px 0 8px; color: #c8d8df; font-size: 13px; }
.catalog-search-input { width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid #66808e; border-radius: 6px; background: #10212d; color: #e0ece7; font: inherit; }
.catalog-search-filters, .catalog-search-paging { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.catalog-search-filters .catalog-summary-back { margin-bottom: 0; }
.catalog-search-filters [aria-pressed="true"] { border-color: #b7d8c5; background: #214137; color: #e0eee3; }
.catalog-search-row { display: flex; align-items: stretch; gap: 8px; }
.catalog-search-row .catalog-summary-choice { flex: 1; min-width: 0; }
.catalog-search-facts { padding: 12px; border: 1px solid #435967; border-radius: 6px; color: #b9d0e0; font-size: 12px; }
.catalog-fact-window h3 { font: 24px var(--serif); }
#info-content .catalog-fact-credit { margin: 14px 0 7px; color: #c3d8f0; font-size: 12px; }
#info-content .catalog-fact-note { font-size: 13px; line-height: 1.8; color: #bdd0d8; }
.catalog-fact-source { display: block; margin: 15px 0; font-size: 13px; line-height: 1.8; }
.sky-object-button .sky-editorial-badge { display: flex; margin-top: 5px; }
.sky-object-symbol.sky-editorial-mixed { font-size: 17px; }
.sky-visit .sky-editorial-badge { display: flex; margin-top: 4px; }
.sky-legend > .sky-editorial-badge { margin: 0 18px 5px 0; }
.sky-editorial-explainer { display: block; }
@media (min-width: 1600px) { .sky-editorial-badge { font-size: 12px; } }
.sky-viewing-settings { margin: 20px 0; padding: 16px; border: 1px solid #38544d; border-radius: 6px; background: #12231f; }
.sky-viewing-settings > strong { display: block; font-size: 13px; color: #cfe3d7; line-height: 1.6; }
.sky-viewing-settings label { display: block; margin: 12px 0 8px; font-size: 12px; color: #c0d7d2; }
.sky-viewing-settings input { width: 100%; margin-bottom: 14px; min-height: 46px; padding: 11px; border: 1px solid #496571; border-radius: 4px; background: #101f2b; color: #e0ebe5; color-scheme: dark; font: inherit; }
.sky-viewing-settings .button { width: 100%; }

body.sky-immersive { overflow: hidden; }
.sky-immersive .header { display: none; }
.sky-immersive .sky-page {
  position: fixed;
  z-index: 100;
  inset: 0;
  padding: 0;
  background: #030916;
}
.sky-immersive .sky-page > :not(.sky-layout):not(.sky-view-controls):not(.sky-layers):not(.sky-fullscreen-bar),
.sky-immersive .sky-highlights { display: none; }
.sky-immersive .sky-layout { display: block; height: 100%; }
.sky-immersive .sky-stage {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
}
.sky-immersive .sky-view-controls {
  position: absolute;
  z-index: 3;
  bottom: 62px;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #354a56;
  border-radius: 10px;
  background: #09131ee8;
  box-shadow: 0 6px 28px #0005;
}
.sky-immersive .sky-view-controls > span {
  width: 100%;
  margin: 3px 0 0;
  text-align: center;
  font-size: 11px;
}
.sky-immersive .sky-selection {
  bottom: 185px;
  max-height: calc(100% - 260px);
}
@media (max-width: 600px) {
  .sky-screen-actions { top: 12px; right: 12px; }
  .sky-settings { padding: 9px; }
  .sky-fullscreen { top: 12px; right: 12px; padding: 9px; }
  .sky-immersive .sky-view-controls { bottom: 60px; padding: 9px; gap: 7px; }
  .sky-immersive .sky-view-controls > span { max-width: 300px; line-height: 1.6; }
  .sky-immersive .sky-selection { bottom: 195px; max-height: calc(100% - 255px); }
}

@media (prefers-reduced-motion: reduce) {
  .sky-canvas {
    scroll-behavior: auto;
  }
}

/* Approved catalog reading layout requested by Tony, 28 October 2026. */
.catalog-fact-back { display: none; }
#info-dialog:has(.catalog-fact-reading) .catalog-fact-back { display: inline-flex; padding: 9px 12px; border: 1px solid #52675f; border-radius: 5px; font-size: 12px; }
#info-dialog:has(.catalog-fact-reading) #info-content [data-summary-back] { display: none; }
.reading-facts { grid-template-columns: 1fr; gap: 22px; }
.reading-facts > div { background: none; border: 0; border-radius: 0; padding: 0; }
#info-content .reading-facts p { margin-bottom: 0; }
.catalog-fact-footnotes { border-top: 1px solid #354753; margin-top: 28px; padding-top: 14px; }
@media(max-width:600px) { .reading-facts { grid-template-columns: 1fr; } #info-dialog:has(.catalog-fact-reading) .dialog-top { flex-wrap: wrap; } }


/* Reuse the same layer controls and state in expanded sky viewing. */
.sky-immersive .sky-layers {
  position: absolute;
  z-index: 3;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #354a56;
  border-radius: 10px;
  background: #09131ef2;
}
.sky-immersive .sky-layers > button,
.sky-immersive .sky-layers select { min-height: 44px; }
@media(max-width:600px) {
  .sky-immersive .sky-layers { top: 68px; padding: 8px; gap: 6px; }
  .sky-immersive .sky-layers > button { padding: 8px 10px; font-size: 11px; }
}

/* Solar System reading pages share the pictured learning rail and immersive dialog. */
.solar-profile { max-width: 860px; }
.solar-profile h2 { margin-bottom: 8px; }
.solar-subtitle { color: var(--mint); font-size: 20px; }
.solar-intro { font-size: 20px; line-height: 1.65; }
.solar-profile h3 { margin-top: 32px; font-size: 21px; }
.solar-profile p { line-height: 1.75; }
.solar-facts { display: grid; grid-template-columns: minmax(135px, .6fr) 1.5fr; gap: 14px 24px; margin: 28px 0; }
.solar-facts dt { color: #a8b8b5; }
.solar-facts dd { margin: 0; }
.solar-diagram { margin: 24px 0; background: #101f2b; border-radius: 12px; padding: 12px; }
.solar-diagram svg { display: block; width: 100%; max-height: 280px; }
.solar-diagram figcaption { color: #a8b8b5; font-size: 12px; text-align: center; }
.solar-link { display: inline-block; min-height: 44px; padding: 12px 14px; text-align: left; color: var(--mint); border-bottom: 1px solid #33434a; }
.solar-profile > .solar-link { display: block; width: 100%; }
.solar-moon-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 20px; }
.solar-profile label { display: grid; gap: 8px; margin-top: 16px; }
.solar-profile input { width: 100%; background: #101f2b; color: white; border: 1px solid #52675f; border-radius: 4px; padding: 12px; }
.solar-sources { border-top: 1px solid #33434a; margin-top: 35px; font-size: 13px; color: #a8b8b5; }
.solar-sources a { display: block; padding: 5px 0; }
.solar-profile pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.solar-back { display: none; }
#info-dialog:has(.solar-profile) .solar-back { display: inline-flex; padding: 9px 12px; border: 1px solid #52675f; border-radius: 5px; }
@media(max-width:600px) { .solar-facts { grid-template-columns: 1fr; gap: 6px; } .solar-facts dd { margin-bottom:12px; } .solar-moon-list { grid-template-columns: 1fr; } #info-dialog:has(.solar-profile) .dialog-top { flex-wrap: wrap; } }

/* Observed moon portraits retain their full frame and natural irregular shapes. */
.solar-moon-portrait { margin: 1.2rem 0 1.8rem; }
.solar-moon-portrait img { display: block; width: 100%; height: clamp(240px, 44vh, 480px); object-fit: contain; background: #020407; border-radius: 6px; }
.solar-moon-portrait figcaption { margin-top: .65rem; color: var(--muted, #c1c6ce); line-height: 1.5; }

/* One shared control bar; existing controls keep their listeners and focus IDs. */
.sky-fullscreen-bar { display: none; }
.sky-immersive .sky-page > .sky-fullscreen-bar {
  display: flex; position: absolute; z-index: 4; top: 12px; left: 16px; right: 16px;
  flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px;
  border: 1px solid #526775; border-radius: 10px; background: #09131ef2;
}
.sky-immersive .sky-fullscreen-bar > div {
  position: static; transform: none; width: auto; max-width: none; margin: 0;
  padding: 0; border: 0; background: none; box-shadow: none; justify-content: flex-start;
  gap: 8px;
}
.sky-immersive .sky-fullscreen-bar .sky-view-controls > span { display: none; }
.sky-immersive .sky-fullscreen-bar button, .sky-immersive .sky-fullscreen-bar select { min-height: 44px; }
.sky-immersive .sky-highlights {
  display: block; position: absolute; z-index: 2; right: 16px; top: 172px; bottom: 62px;
  width: 280px; height: auto; max-height: none; background: #09131ee8; padding: 16px;
}
.sky-immersive .sky-selection { bottom: 65px; max-height: calc(100% - 245px); max-width: calc(100% - 340px); }
.sky-object-button.sky-aimed-object { border: 2px solid #f4d58c; background: #334032; border-radius: 6px; }
@media(max-width:800px) {
  .sky-immersive .sky-highlights { top: 230px; width: 220px; }
  .sky-immersive .sky-selection { max-width: calc(100% - 260px); }
}

/* Keep camera controls in the bottom dock, per Tony’s preference. */
.sky-immersive .sky-view-controls { z-index: 3; max-width: calc(100% - 340px); left: calc((100% - 300px) / 2); }
.sky-immersive .sky-selection { bottom: 185px; max-height: calc(100% - 350px); }

.celestial-portrait { margin: 22px 0 28px; }
.celestial-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: #050b13; border-radius: 10px; }
.celestial-portrait figcaption { color: #aebfc8; font: 13px/1.7 var(--sans, sans-serif); padding: 10px 2px; }
.sky-selection .celestial-portrait { margin: 12px 0; }
.sky-selection .celestial-portrait img { max-height: 190px; }
.sky-selection .celestial-portrait figcaption { font-size: 11px; line-height: 1.6; }

.planet-viewer-stage { position: relative; background: #050b13; border-radius: 10px; overflow: hidden; }
.planet-viewer-stage canvas { display: block; width: 100%; aspect-ratio: 16/9; touch-action: none; }
.planet-viewer-stage canvas:focus { outline: 3px solid #e6c777; outline-offset: -4px; }
.planet-viewer-star { position: absolute; top: 6px; left: 12px; max-width: 42%; color: #ffedb8; font-size: 14px; pointer-events: none; text-shadow: 0 1px 3px black; }
.planet-viewer-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.planet-viewer-note, .planet-viewer [role=status] { font-size: 13px; line-height: 1.6; color: #b9cbd4; }
.celestial-portrait img[hidden] { display: none; }
.planet-viewer-sun { display: block; width: 34px; height: 34px; border-radius: 50%; margin: 8px 0 14px; background: radial-gradient(circle at 40% 35%, #fffef2, #ffe2a0 65%, #dca650); box-shadow: 0 0 22px 6px #ffd68b66; }
.planet-viewer-controls button, .celestial-portrait > button, .catalog-summary-actions > button { min-height: 44px; border: 1px solid #63777d; border-radius: 6px; padding: 8px 12px; background: #17252c; color: #edf0e7; }
.planet-viewer-controls button:focus-visible, .celestial-portrait > button:focus-visible, .catalog-summary-actions > button:focus-visible { outline: 3px solid #efd078; outline-offset: 2px; }
.planet-viewer-star { font-size: 11px; line-height: 1.4; max-width: 30%; }
.planet-viewer-stage canvas { max-height: 42vh; object-fit: contain; }

/* Asteroid symbols and labels follow the white-outline sky reference. */
.sky-object-button[data-sky-object-key^="asteroid:"] { color: #fff; }
.sky-object-button[data-sky-object-key^="asteroid:"] strong,
.sky-object-button[data-sky-object-key^="asteroid:"] small,
.sky-object-button[data-sky-object-key^="asteroid:"] .sky-object-arrow { color: #fff; }