/*
 * GoStargazing's WebSwift composition layer.
 *
 * WebSwift remains the material and control source of truth. This file only
 * maps the site's established DOM contracts onto those primitives so the
 * vanilla simulation code can keep its IDs, routes, and state classes.
 */

.sg-root {
  --sg-window-bg: var(--gs-surface);
  --sg-grouped-bg: var(--gs-void);
  --sg-grouped-bg-secondary: var(--gs-surface);
  --sg-grouped-bg-tertiary: var(--gs-surface-raised);
  --sg-sidebar-bg: rgb(11 16 32 / .82);
  --sg-control-bg: #242b3b;
  --sg-separator: rgb(169 177 199 / .18);
  --sg-glass-tint: rgb(18 24 40 / .64);
  --sg-glass-tint-strong: rgb(12 17 31 / .82);
  --sg-glass-rim: rgb(255 255 255 / .24);
  --sg-glass-rim-low: rgb(255 255 255 / .10);
  --sg-glass-sheen: rgb(255 255 255 / .30);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  letter-spacing: 0;
}

.sg-root .sg-glass {
  border: 0;
  box-shadow: var(--sg-shadow-glass);
}

.sg-root .sg-card,
.sg-root .sg-groupbox {
  border: 0;
  background: var(--panel-solid);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-card);
}

.sg-root .corner { display: none; }

.sg-root .top-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
}

.sg-root .top-nav-link,
.sg-root .top-nav-toggle {
  min-height: 30px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: transparent;
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-callout);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.sg-root .top-nav-link:hover,
.sg-root .top-nav-link:focus-visible,
.sg-root .top-nav-toggle:hover,
.sg-root .top-nav-toggle:focus-visible {
  border: 0;
  background: var(--sg-fill-quaternary);
  color: var(--sg-label);
}

.sg-root .top-nav-link.active,
.sg-root .top-nav-toggle[aria-pressed="true"] {
  border: 0;
  background: color-mix(in srgb, var(--sg-accent) 16%, transparent);
  color: var(--sg-accent);
}

.sg-root .top-nav-link.accent {
  background: transparent;
  color: var(--sg-accent);
}

.sg-root .brand {
  border: 0;
  border-radius: var(--sg-radius-lg);
  color: var(--sg-label);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.sg-root .brand .mark {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title3);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
}

.sg-root .brand .wordmark {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.sg-root .loading-progress {
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-fill);
}

.sg-root .loading-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--sg-accent);
}

.sg-root #loadingPanel {
  border: 0;
  border-radius: var(--sg-radius-xl);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-popover);
}

.sg-root .loading-header,
.sg-root .loading-header-label,
.sg-root .loading-header-location,
.sg-root .loading-phase {
  font-family: var(--font-ui);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.sg-root .loading-header {
  color: var(--sg-label-secondary);
  font-size: var(--sg-text-footnote);
}

.sg-root .loading-phase {
  color: var(--sg-label);
  font-size: var(--sg-text-title2);
  font-weight: var(--sg-weight-semibold);
}

/* ------------------------------------------------------------------
 * Map — a full content canvas with floating system chrome.
 * ------------------------------------------------------------------ */

.page-map .topbar {
  top: 16px;
  left: 16px;
  display: flex;
  width: min(620px, calc(100vw - 32px));
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint);
  box-shadow: var(--sg-shadow-glass);
}

.page-map .topbar .brand {
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  box-shadow: none;
}

.page-map .search-field {
  flex: 1 1 280px;
  min-width: 180px;
  min-height: 36px;
  padding: 4px 4px 4px 10px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-fill);
  box-shadow: none;
}

.page-map .search-field:focus-within {
  border: 0;
  background: var(--sg-control-bg);
  box-shadow:
    inset 0 0 0 1px var(--sg-accent),
    0 0 0 3px color-mix(in srgb, var(--sg-accent) 30%, transparent);
}

.page-map #searchInput {
  min-width: 0;
  padding: 0 4px;
  color: var(--sg-label);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  letter-spacing: 0;
}

.page-map #searchInput::placeholder {
  color: var(--sg-label-secondary);
  letter-spacing: 0;
}

.page-map #searchGo {
  min-width: 50px;
  min-height: 28px;
  padding: 5px 13px;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-accent);
  color: var(--sg-accent-text);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .top-nav {
  top: 16px;
  right: 16px;
}

.page-map .hint {
  bottom: 18px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-callout);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .leaflet-control-zoom {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--sg-radius-md) !important;
  background: var(--sg-glass-tint-strong) !important;
  box-shadow: var(--sg-shadow-glass) !important;
  -webkit-backdrop-filter: blur(var(--sg-glass-blur)) saturate(var(--sg-glass-saturation));
  backdrop-filter: blur(var(--sg-glass-blur)) saturate(var(--sg-glass-saturation));
}

.page-map .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  border-color: var(--sg-separator) !important;
  background: transparent !important;
  color: var(--sg-label) !important;
  font-family: var(--font-ui) !important;
  font-size: 18px !important;
  line-height: 34px !important;
}

.page-map .leaflet-control-attribution {
  border-radius: var(--sg-radius-sm) 0 0 0;
  background: rgb(2 4 10 / .72) !important;
  color: var(--sg-label-tertiary) !important;
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.page-map .overlay-scrim {
  z-index: 900;
  background: rgb(0 0 0 / .46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.page-map .choice-card {
  z-index: 910;
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px;
  border: 0;
  border-radius: var(--sg-radius-xl);
  background: var(--gs-surface);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-window);
  color: var(--sg-label);
  animation: none;
}

.page-map .choice-card:not(.visible) {
  opacity: 0;
  pointer-events: none;
}

.page-map .choice-card .eyebrow,
.page-map .choice-card .coords,
.page-map .choice-divider {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .choice-card .name {
  margin-top: 6px;
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-largetitle);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
}

.page-map .choice-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--sg-radius-md);
  background: var(--sg-bg-secondary);
  box-shadow: inset 0 0 0 var(--sg-hairline) var(--sg-separator);
}

.page-map .choice-snapshot .cell {
  min-width: 0;
  padding: 12px;
  border-right: var(--sg-hairline) solid var(--sg-separator);
}

.page-map .choice-snapshot .cell:last-child { border-right: 0; }

.page-map .choice-snapshot .label,
.page-map .choice-snapshot .value {
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-map .choice-option {
  display: grid;
  min-height: 178px;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px 10px;
  align-items: start;
  padding: 18px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow: inset 0 0 0 var(--sg-hairline) var(--sg-separator);
  color: var(--sg-label);
  text-align: left;
  text-transform: none;
}

.page-map .choice-option:hover {
  border: 0;
  background: var(--gs-surface-raised);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sg-accent) 46%, transparent),
    var(--sg-shadow-card);
  color: var(--sg-label);
}

.page-map .choice-option .icon {
  color: var(--sg-accent);
  font-family: var(--font-ui);
  font-size: 18px;
}

.page-map .choice-option .title {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title2);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
}

.page-map .choice-option .tag {
  align-self: center;
  color: var(--sg-label-secondary);
  font-size: var(--sg-text-caption);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .choice-option .desc {
  grid-column: 1 / -1;
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-style: normal;
  line-height: 1.45;
}

.page-map .choice-option .cta {
  grid-column: 1 / -1;
  color: var(--sg-accent);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .choice-card .actions-row { margin-top: 18px; }
.page-map .btn-ghost {
  margin: 0;
  padding: 6px 13px;
  color: var(--sg-label);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  letter-spacing: 0;
  text-transform: none;
}

.page-map .error-toast {
  right: 16px;
  bottom: 16px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--sg-radius-md);
  background: var(--sg-glass-tint-strong);
  color: var(--sg-red);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  letter-spacing: 0;
}

/* ------------------------------------------------------------------
 * Observatory — live sky canvas with instrument chrome.
 * ------------------------------------------------------------------ */

.page-observatory .hud {
  color: var(--sg-label);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .top-nav {
  top: 16px;
  right: 16px;
}

.page-observatory .topbar {
  top: 16px;
  right: auto;
  left: 16px;
  width: auto;
  max-width: min(680px, calc(100vw - 440px));
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint);
}

.page-observatory .hud.ready .topbar { transform: none; }

.page-observatory .topbar .meta {
  position: absolute;
  z-index: 20;
  top: calc(100vh - 232px);
  right: auto;
  bottom: auto;
  left: calc(50vw - 16px);
  width: min(620px, calc(100vw - 660px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 12px;
  transform: translateX(-50%);
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-card);
}

.page-observatory .hud:not(.details-on) .topbar .meta { display: none; }
.page-observatory .hud.details-on .topbar .meta { display: grid; }

/* Opacity alone still leaves backdrop-filter layers in the compositor.
 * Remove detail-only chrome from hit testing and paint until it is opened. */
.page-observatory .hud:not(.details-on) .compass,
.page-observatory .hud:not(.details-on) .condition-strip,
.page-observatory .hud:not(.details-on) .moon-slot,
.page-observatory .hud:not(.details-on) .observatory-right-rail {
  visibility: hidden;
}

.page-observatory .topbar .meta .label,
.page-observatory .topbar .meta .value {
  margin: 0;
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .topbar .meta .value {
  color: var(--sg-label);
  font-variant-numeric: tabular-nums;
}

.page-observatory .compass {
  top: 64px;
  gap: 10px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
}

.page-observatory .compass .bar { background: var(--sg-separator); }

.page-observatory .compass .tick span,
.page-observatory .telemetry,
.page-observatory .telemetry h3,
.page-observatory .row .k,
.page-observatory .row .v,
.page-observatory .bar-row .label {
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .telemetry {
  left: 16px;
  width: 270px;
  padding: 14px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-card);
}

.page-observatory .telemetry h3 {
  color: var(--sg-label);
  font-size: var(--sg-text-headline);
  font-weight: var(--sg-weight-semibold);
}

.page-observatory .telemetry h3::after { background: var(--sg-separator); }
.page-observatory .bar-row .track { height: 4px; border-radius: var(--sg-radius-capsule); background: var(--sg-fill); }
.page-observatory .bar-row .fill { border-radius: inherit; }

.page-observatory .legend {
  top: 112px;
  max-width: min(620px, calc(100vw - 720px));
  padding: 7px 12px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

.page-observatory .legend .header-name {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title3);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
}

.page-observatory .legend .header-meta {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  letter-spacing: 0;
}

.page-observatory .condition-strip {
  top: 152px;
  gap: 6px;
  padding: 5px 7px;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint);
}
.page-observatory .mode-selector-slot { top: 16px; bottom: auto; }

.page-observatory .condition-chip,
.page-observatory .gauge-mode-chip,
.page-observatory .trace-pill {
  min-height: 20px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-fill);
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-caption);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .mode-selector {
  gap: 0;
  padding: 2px;
  border: 0;
  border-radius: var(--sg-radius-md);
  background: var(--sg-glass-tint);
  box-shadow: var(--sg-shadow-glass);
}

.page-observatory .mode-btn {
  min-height: 28px;
  padding: 5px 14px;
  border: 0;
  border-radius: calc(var(--sg-radius-md) - 2px);
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-callout);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .mode-btn.active {
  background: var(--sg-control-bg);
  box-shadow: var(--sg-shadow-control), inset 0 0 0 var(--sg-hairline) var(--sg-separator);
  color: var(--sg-label);
}

.page-observatory .moon-slot {
  position: static;
  width: 100%;
}

.page-observatory .reasons-panel,
.page-observatory .physical-details,
.page-observatory .trace-details {
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-card);
}

.page-observatory .widget-moon,
.page-observatory .best-window-card {
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

.page-observatory .widget-moon .moon-head,
.page-observatory .widget-moon .moon-stats,
.page-observatory .bw-eyebrow,
.page-observatory .bw-headline,
.page-observatory .bw-sub,
.page-observatory .bw-detail,
.page-observatory .reasons-panel-title,
.page-observatory .reason-factor,
.page-observatory .reason-role-badge,
.page-observatory .reason-effect,
.page-observatory .reason-explanation,
.page-observatory .reasons-empty,
.page-observatory .reason-label,
.page-observatory .reason-value,
.page-observatory .physical-summary,
.page-observatory .trace-summary {
  font-family: var(--font-ui);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .widget-moon { padding: 14px; }
.page-observatory .widget-moon .moon-head {
  margin-bottom: 8px;
  color: var(--sg-label-secondary);
  font-size: var(--sg-text-footnote);
  font-weight: var(--sg-weight-medium);
}
.page-observatory .widget-moon .moon-stats {
  gap: 4px;
  font-size: var(--sg-text-callout);
}

.page-observatory .reason-role-badge {
  border: 0;
  border-radius: var(--sg-radius-capsule);
  padding: 2px 7px;
}

.page-observatory .observatory-right-rail {
  top: 130px;
  right: 16px;
  bottom: 16px;
  width: 300px;
  max-height: none;
  gap: 12px;
}

.page-observatory .hud.details-on .observatory-right-rail {
  top: 130px;
  bottom: 16px;
  max-height: none;
}

/* Details are requested content, not peripheral chrome. Keeping the rail at
 * full opacity also avoids multiplying the old moon-slot idle fade twice now
 * that Moon lives inside the rail. */
body.page-observatory.hud-idle .observatory-right-rail,
body.page-observatory.hud-idle .observatory-right-rail .moon-slot {
  opacity: 1;
}

body.page-observatory.hud-idle .top-nav,
body.page-observatory.hud-idle .brand,
body.page-observatory.hud-idle .topbar .meta,
body.page-observatory.hud-idle .compass,
body.page-observatory.hud-idle .condition-strip,
body.page-observatory.hud-idle .legend {
  opacity: .62;
}

.page-observatory .score-gauge {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  padding: 14px 14px 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

.page-observatory .gauge-frame {
  width: 100%;
  height: auto;
}

.page-observatory .gauge-header {
  position: relative;
  z-index: 2;
  min-height: 22px;
  margin-bottom: 0;
}

.page-observatory .gauge-title {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  font-weight: var(--sg-weight-medium);
}

.page-observatory .gauge-dial {
  width: 190px;
  height: 190px;
  margin: -2px auto -6px;
}

.page-observatory .gauge-score {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
}

.page-observatory .gauge-sub,
.page-observatory .gauge-pct {
  font-family: var(--font-mono);
  font-size: var(--sg-text-footnote);
  letter-spacing: 0;
}

.page-observatory .best-window-card { padding: 14px; }
.page-observatory .best-window-card::before { display: none; }
.page-observatory .reasons-panel { padding: 14px; }

.page-observatory .hud .bottombar {
  right: 16px;
  bottom: 16px;
  left: 16px;
  width: auto;
  padding: 0;
  background: transparent;
}

.page-observatory .reasoning-pane {
  width: min(820px, calc(100vw - 360px));
  margin: 0 auto;
  border: 0;
  border-radius: var(--sg-radius-xl);
  background: var(--panel-solid);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-card);
}

.page-observatory .hud.details-on .reasoning-pane {
  width: min(620px, calc(100vw - 660px));
}

.page-observatory .reasoning-frame {
  padding: 14px 16px;
  border: 0;
  background: transparent;
}

.page-observatory .reasoning-frame .corner-flourish { display: none; }

.page-observatory .big-index .label,
.page-observatory .big-index .sub,
.page-observatory .reasoning {
  font-family: var(--font-ui);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .big-index .score {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
}

.page-observatory .reasoning::before { display: none; }

.page-observatory .drag-hint {
  top: 68px;
  bottom: auto;
  padding: 5px 9px;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-caption);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .hud.details-on .drag-hint { display: none; }

.page-observatory #landing {
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 80px 24px 36px;
  background:
    linear-gradient(180deg, rgb(2 4 10 / .10), rgb(2 4 10 / .58)),
    radial-gradient(circle at 50% 38%, rgb(100 210 255 / .08), transparent 42%);
}

.page-observatory .landing-header {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.page-observatory .landing-eyebrow {
  margin-bottom: 8px;
  color: var(--sg-accent);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .landing-title {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-largetitle);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
  line-height: var(--sg-leading-largetitle);
}

.page-observatory .landing-sub {
  max-width: 500px;
  margin: 8px auto 0;
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-style: normal;
  line-height: 1.5;
}

.page-observatory .landing-cards {
  width: min(860px, 100%);
  gap: 12px;
}

.page-observatory .landing-card {
  min-height: 184px;
  padding: 18px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
  color: var(--sg-label);
  text-align: left;
  text-transform: none;
}

.page-observatory .landing-card:hover:not(:disabled) {
  border: 0;
  background: color-mix(in srgb, var(--sg-glass-tint-strong) 88%, var(--sg-accent));
  box-shadow: var(--sg-shadow-popover);
  transform: translateY(-2px);
}

.page-observatory .landing-card .card-icon {
  color: var(--sg-accent);
  font-family: var(--font-ui);
  font-size: 22px;
}

.page-observatory .landing-card .card-title {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title2);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.page-observatory .landing-card .card-desc {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-style: normal;
  line-height: 1.45;
}

.page-observatory .landing-card .card-cta {
  color: var(--sg-accent);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-observatory .landing-error {
  border-radius: var(--sg-radius-md);
  background: color-mix(in srgb, var(--sg-red) 12%, transparent);
  color: var(--sg-red);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.page-observatory:has(#landing.visible) .legend { display: none; }

.page-observatory #loadingPanel { width: min(430px, calc(100vw - 32px)); }

/* Share controls are inserted after the page stylesheet loads. */
.page-observatory .share-popover {
  border: 0 !important;
  border-radius: var(--sg-radius-lg) !important;
  background: var(--sg-glass-tint-strong) !important;
  box-shadow: var(--sg-shadow-popover) !important;
  color: var(--sg-label) !important;
  font-family: var(--font-ui) !important;
}

/* ------------------------------------------------------------------
 * Report — a quiet analytical window above the atmospheric backdrop.
 * ------------------------------------------------------------------ */

.page-report {
  background: var(--bg);
  font-family: var(--font-ui);
}

.page-report .backdrop-dim {
  background: rgb(2 4 10 / .72);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}

.page-report > .brand {
  top: 16px;
  left: 16px;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sg-glass-tint-strong);
}

.page-report .top-nav {
  top: 16px;
  right: 16px;
}

.page-report .report-window {
  display: flex;
  width: min(920px, calc(100vw - 32px));
  max-width: 920px;
  min-height: calc(100vh - 116px);
  margin: 84px auto 32px;
  padding: 32px;
  gap: 20px;
  overflow: visible;
  border: 0;
  border-radius: var(--sg-radius-xl);
  background: rgb(16 21 34 / .96);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-window);
}

.page-report .report-header {
  padding: 0 0 4px;
}

.page-report .report-header .eyebrow,
.page-report .report-header .meta {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-footnote);
  letter-spacing: 0;
  text-transform: none;
}

.page-report .report-header h1 {
  margin: 6px 0 8px;
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-largetitle);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
  line-height: var(--sg-leading-largetitle);
}

.page-report .scores-grid { gap: 12px; }

.page-report .score-panel {
  padding: 18px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

.page-report .score-panel .label,
.page-report .score-panel .sub {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

.page-report .score-panel .value {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: 44px;
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: -.02em;
}

.page-report .score-panel .value .pct {
  color: var(--sg-label-tertiary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-title2);
  font-weight: var(--sg-weight-regular);
}

.page-report .section {
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow: inset 0 0 0 var(--sg-hairline) var(--sg-separator);
}

.page-report .section-head {
  margin-bottom: 12px;
  color: var(--sg-label);
  font-family: var(--font-ui);
  font-size: var(--sg-text-headline);
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}

.page-report .section-head .rule { background: var(--sg-separator); }

.page-report .reasoning {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-style: normal;
  line-height: 1.55;
}

.page-report .comp-row .name,
.page-report .comp-row .name small,
.page-report .comp-row .value {
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.page-report .comp-row .bar,
.page-report .wn-bar-track {
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-fill);
}

.page-report .comp-row .bar-fill,
.page-report .wn-bar-fill { border-radius: inherit; }

.page-report .chip {
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-fill);
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-caption);
  letter-spacing: 0;
  text-transform: none;
}

.page-report .week-nights {
  overflow: hidden;
  border-radius: var(--sg-radius-md);
  background: var(--sg-bg-secondary);
}

.page-report .week-night {
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-bottom: var(--sg-hairline) solid var(--sg-separator);
  border-radius: 0;
  background: transparent;
}

.page-report .week-night.best { background: color-mix(in srgb, var(--sg-accent) 10%, transparent); }
.page-report .wn-date .day,
.page-report .wn-date .num,
.page-report .wn-score,
.page-report .best-banner {
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

.page-report .best-banner {
  border-radius: 0;
  background: color-mix(in srgb, var(--sg-green) 12%, transparent);
  color: var(--sg-green);
}

.page-report details.raw-drawer {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow: inset 0 0 0 var(--sg-hairline) var(--sg-separator);
}

.page-report details.raw-drawer summary {
  padding: 12px 14px;
  color: var(--sg-label);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-report details.raw-drawer .body {
  padding: 0 14px 14px;
  color: var(--sg-label-secondary);
  font-family: var(--font-mono);
}

.page-report .cta-row { padding-top: 0; }

.page-report .cta-link {
  min-height: 30px;
  padding: 6px 13px;
  border: 0;
  border-radius: var(--sg-radius-sm);
  background: var(--sg-accent);
  color: var(--sg-accent-text);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-report .cta-link:hover { border: 0; background: var(--sg-accent); color: var(--sg-accent-text); }
.page-report .cta-link.ghost { border: 0; background: var(--sg-control-bg); color: var(--sg-label); }
.page-report .cta-link.ghost:hover { border: 0; color: var(--sg-label); }

.page-report #landing {
  min-height: 360px;
  padding: 56px 24px;
  background: transparent;
}

.page-report #landing h2 {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
  line-height: var(--sg-leading-title);
}

.page-report #landing p {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-body);
}

/* ------------------------------------------------------------------
 * Bortle demo — one scene with refracting controls and summary.
 * ------------------------------------------------------------------ */

.page-demo .nav-back {
  top: 16px;
  left: 16px;
  min-height: 32px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
  color: var(--sg-label);
  font-family: var(--font-ui);
  font-size: var(--sg-text-callout);
  font-weight: var(--sg-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.page-demo .title-strip {
  top: 16px;
  min-width: 260px;
  padding: 8px 14px;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
}

.page-demo .title-mark {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title3);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
}

.page-demo .title-sub {
  margin-top: 1px;
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-caption);
  letter-spacing: 0;
  text-transform: none;
}

.page-demo .place-card {
  top: 50%;
  left: 24px;
  width: min(340px, calc(100vw - 48px));
  padding: 18px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-popover);
}

.page-demo .place-region,
.page-demo .place-meta,
.page-demo .place-desc {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.page-demo .place-name {
  color: var(--sg-label);
  font-family: var(--font-display);
  font-size: var(--sg-text-title);
  font-style: normal;
  font-weight: var(--sg-weight-semibold);
  letter-spacing: 0;
}

.page-demo .place-mpsas { font-family: var(--font-mono); font-size: var(--sg-text-title2); }
.page-demo .place-bortle { border-radius: var(--sg-radius-capsule); background: var(--sg-fill); font-family: var(--font-ui); letter-spacing: 0; text-transform: none; }
.page-demo .place-desc { font-size: var(--sg-text-body); line-height: 1.5; }

.page-demo .scale {
  right: auto;
  bottom: 54px;
  left: 50%;
  width: auto;
  min-width: min(500px, calc(100vw - 32px));
  padding: 10px;
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
}

.page-demo .scale-ladder {
  gap: 5px;
  padding: 4px;
  border: 0;
  background: transparent;
}

.page-demo .scale-step {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sg-control-bg);
  box-shadow: inset 0 0 0 var(--sg-hairline) var(--sg-separator);
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-callout);
}

.page-demo .scale-step::before {
  inset: 3px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 65%, var(--gs-surface));
}

.page-demo .scale-step.active {
  background: color-mix(in srgb, var(--sg-accent) 16%, var(--sg-control-bg));
  box-shadow:
    inset 0 0 0 2px var(--sg-accent),
    var(--sg-shadow-control);
  color: var(--sg-label);
}

.page-demo .scale-caps,
.page-demo .hint {
  color: var(--sg-label-secondary);
  font-family: var(--font-ui);
  font-size: var(--sg-text-caption);
  letter-spacing: 0;
  text-transform: none;
}

.page-demo .hint {
  bottom: 14px;
  padding: 5px 10px;
  border-radius: var(--sg-radius-capsule);
  background: var(--sg-glass-tint-strong);
}

/* Science keeps its document opaque; navigation surfaces carry the lens. */
.page-science .science-site-nav {
  border: 0;
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-popover);
}

.page-science .science-toc {
  border: 0;
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

/* Generic support for the design specimen, sandbox, and calibration pages. */

.page-design,
.page-calibration {
  background:
    radial-gradient(circle at 50% -10%, rgb(100 210 255 / .12), transparent 36%),
    var(--gs-void);
}

.page-design .comp-demo,
.page-design .swatch,
.page-calibration .panel {
  border-color: var(--sg-separator);
  border-radius: var(--sg-radius-lg);
  background: var(--panel-solid);
  box-shadow: inset 0 0 0 var(--sg-hairline) var(--sg-separator);
}

.page-design .section {
  border: 0;
  border-top: var(--sg-hairline) solid var(--sg-separator);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-design .glass-foundation-copy {
  max-width: 640px;
  margin: 0 0 18px;
  color: var(--sg-label-secondary);
  line-height: 1.55;
}

.page-design .glass-spectrum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 28px;
  overflow: hidden;
  border-radius: var(--sg-radius-xl);
  background:
    radial-gradient(circle at 15% 30%, rgb(100 210 255 / .30), transparent 24%),
    radial-gradient(circle at 84% 68%, rgb(111 84 255 / .28), transparent 28%),
    linear-gradient(135deg, #111a30, #060914 62%, #1b1024);
}

.page-design .glass-specimen {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 14px;
  border-radius: var(--sg-radius-lg);
}

.page-design .glass-specimen strong { color: var(--sg-label); font-size: var(--sg-text-title3); }
.page-design .glass-specimen span { color: var(--sg-label-secondary); font-size: var(--sg-text-footnote); }

.page-sandbox .toolbar {
  border: 0;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

.page-sandbox .sidebar-toggle,
.page-sandbox #status {
  background: var(--sg-glass-tint-strong);
  box-shadow: var(--sg-shadow-glass);
}

.page-sandbox .sidebar {
  border: 0;
  border-radius: var(--sg-radius-xl);
  background: var(--panel-solid);
  box-shadow:
    inset 0 0 0 var(--sg-hairline) var(--sg-separator),
    var(--sg-shadow-window);
}

@media (max-width: 920px) {
  .page-map .topbar {
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }

  .page-map .top-nav {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    justify-content: space-around;
  }

  .page-map .top-nav-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    font-size: var(--sg-text-caption);
  }

  .page-map .hint { display: none; }
  .page-map .error-toast { bottom: 62px; }
  .page-map .leaflet-control-attribution { margin-bottom: 50px !important; }
}

@media (max-width: 1100px) {
  .page-map .topbar { width: min(520px, calc(100vw - 32px)); }
  .page-map .topbar .wordmark { display: none; }
  .page-observatory .topbar { max-width: calc(100vw - 390px); }
  .page-observatory .legend { max-width: calc(100vw - 620px); }
  .page-observatory .reasoning-pane { width: min(720px, calc(100vw - 330px)); }
  .page-observatory .hud.details-on .topbar .meta { display: none; }
}

@media (max-width: 820px) {
  .page-map .topbar {
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }

  .page-map .top-nav {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    justify-content: space-around;
  }

  .page-map .top-nav-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    font-size: var(--sg-text-caption);
  }

  .page-map .hint { display: none; }
  .page-map .error-toast { bottom: 62px; }
  .page-map .leaflet-control-attribution { margin-bottom: 50px !important; }

  .page-observatory .topbar {
    top: 62px;
    right: 12px;
    left: 12px;
    max-width: none;
    padding: 8px 10px;
  }

  .page-observatory .top-nav {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
  }

  .page-observatory .top-nav-link,
  .page-observatory .top-nav-toggle {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 6px 3px;
    font-size: var(--sg-text-caption);
  }

  .page-observatory .hud.details-on .compass {
    top: 118px;
    right: 12px;
    left: 12px;
    width: auto;
    transform: none;
    justify-content: center;
  }

  .page-observatory .legend {
    top: 118px;
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-width: none;
    min-height: 30px;
    transform: none;
  }

  .page-observatory .hud.details-on .legend { top: 158px; }

  .page-observatory .condition-strip {
    top: 198px;
    right: 12px;
    left: 12px;
    max-width: none;
    transform: none;
  }

  .page-observatory .moon-slot { display: none; }
  .page-observatory .mode-selector-slot { top: auto; bottom: 120px; }
  .page-observatory .reasoning-pane { width: calc(100vw - 24px); }
  .page-observatory .hud.details-on .reasoning-pane { width: calc(100vw - 24px); }
  .page-observatory .hud .bottombar { right: 12px; bottom: 12px; left: 12px; }

  .page-observatory .indices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
  }

  .page-observatory .big-index { min-width: 0; gap: 2px; }
  .page-observatory .big-index .label { white-space: normal; }
  .page-observatory .big-index .score { font-size: 34px; }
  .page-observatory .big-index .score .pct { font-size: 11px; }
  .page-observatory .big-index .sub {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-observatory .reasoning-frame { padding: 10px 12px; }
  .page-observatory .drag-hint { display: none; }

  .page-observatory .observatory-right-rail {
    position: absolute;
    top: 250px !important;
    right: 12px;
    bottom: 164px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
  }

  .page-observatory .hud.details-on .observatory-right-rail { bottom: 164px; }

  .page-observatory .landing-cards {
    max-width: 420px;
    flex-direction: column;
  }

  .page-observatory .landing-card { max-width: 100%; min-height: 132px; }
  .page-observatory .landing-card { flex: 0 0 auto; }
  .page-observatory .hud.details-on .topbar .meta { display: none; }

  .page-report > .brand { display: none; }
  .page-report .top-nav { top: 12px; right: 12px; left: 12px; justify-content: space-around; }
  .page-report .top-nav-link { flex: 1 1 0; padding: 7px 4px; }
  .page-report .report-window {
    width: calc(100vw - 24px);
    min-height: calc(100vh - 88px);
    margin: 68px auto 20px;
    padding: 20px;
    border-radius: var(--sg-radius-lg);
  }

  .page-demo .place-card {
    top: auto;
    bottom: 166px;
    left: 12px;
    width: calc(100vw - 24px);
    max-width: none;
    transform: none;
  }

  .page-demo .scale {
    bottom: 48px;
    min-width: calc(100vw - 24px);
  }

  .page-design .glass-spectrum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .page-map .topbar .brand { display: none; }
  .page-map .search-field { flex-basis: 100%; }
  .page-map .choice-card { padding: 18px; }
  .page-map .choice-snapshot { grid-template-columns: 1fr; }
  .page-map .choice-snapshot .cell { border-right: 0; border-bottom: var(--sg-hairline) solid var(--sg-separator); }
  .page-map .choice-snapshot .cell:last-child { border-bottom: 0; }
  .page-map .choice-grid { grid-template-columns: 1fr; }
  .page-map .choice-option { min-height: 150px; }

  .page-observatory #landing { justify-content: flex-start; overflow-y: auto; padding: 84px 16px 24px; }
  .page-observatory .landing-title { font-size: var(--sg-text-title); line-height: var(--sg-leading-title); }
  .page-observatory .landing-card { min-height: 156px; }

  .page-report .scores-grid { grid-template-columns: 1fr; }
  .page-report .report-window { padding: 16px; }
  .page-report .score-panel .value { font-size: 38px; }
  .page-report .week-night { grid-template-columns: 60px 28px 1fr 42px; }

  .page-demo .title-strip {
    top: 58px;
    display: block;
    min-width: 0;
    max-width: calc(100vw - 24px);
    padding: 7px 12px;
  }
  .page-demo .title-sub { display: none; }
  .page-demo .place-card { bottom: 150px; padding: 14px; }
  .page-demo .place-desc { display: none; }
  .page-demo .scale {
    right: 12px;
    left: 12px;
    width: auto;
    min-width: 0;
    padding: 8px;
    transform: none;
  }
  .page-demo .scale-ladder {
    width: 100%;
    justify-content: space-between;
    gap: 3px;
    padding: 4px;
  }
  .page-demo .scale-step { width: 34px; height: 34px; }
  .page-demo .hint { display: none; }

  .page-design .glass-spectrum { grid-template-columns: 1fr; padding: 18px; }
}

@media (prefers-reduced-transparency: reduce) {
  .sg-root .sg-glass,
  .page-map .leaflet-control-zoom {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--gs-surface-raised) !important;
  }

  .page-map .overlay-scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(0 0 0 / .72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-root .sg-glass,
  .sg-root .sg-card,
  .sg-root .sg-button,
  .page-map .choice-option,
  .page-observatory .landing-card,
  .page-demo .place-card {
    transition: none !important;
    animation: none !important;
  }
}