/* Observatory layout — presentation only; astronomy and renderer logic stay in their modules. */
:root {
  --bg: #080d18;
  --glass: rgba(13, 21, 36, .96);
  --glass-border: rgba(174, 198, 237, .13);
  --text: #e5ecf8;
  --muted: #94a5c0;
  --accent: #a8c5ff;
  --select: #bfd2ff;
}
.sky-root { --left-rail: 276px; --right-rail: 324px; --header-height: 70px; background: #080d18; }
.sky-root.panel-settings-collapsed { --left-rail: 0px; }
.sky-root.panel-workbench-collapsed { --right-rail: 0px; }
.sky-root[data-mode="planetarium"] { --right-rail: 308px; }
.sky-root.ui-hidden { --left-rail: 0px; --right-rail: 0px; --header-height: 0px; }
.observatory-header { position: absolute; z-index: 10; inset: 0 0 auto; height: 70px; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: #0b1220; border-bottom: 1px solid var(--glass-border); }
.observatory-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 232px; }
.observatory-brand img { width: 34px; height: 34px; border-radius: 10px; }
.observatory-brand__kicker { display: block; color: #92a7c9; font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; }
.observatory-brand h1 { margin: 3px 0 0; font: 600 15px/1.2 var(--font); letter-spacing: -.3px; }
.observatory-header .view-toggle--modes { display: flex; gap: 4px; padding: 4px; border-radius: 10px; margin-right: auto; }
.observatory-header .view-toggle__btn { min-width: 86px; min-height: 32px; padding: 5px 12px; font-size: 11px; }
.observatory-header .view-toggle__btn.is-active { color: #dfeaff; background: #a8c5ff1f; box-shadow: inset 0 0 0 1px #a8c5ff30; }
.observatory-actions { display: flex; align-items: center; gap: 8px; }
.observatory-guide { text-decoration: none; color: #9eafc9; font-size: 11px; margin-right: 12px; white-space: nowrap; }
.observatory-guide:hover { color: #e5ecf8; }
.sky-root .observatory-header .panel-handle { position: static; transform: none; writing-mode: horizontal-tb; text-orientation: initial; border-radius: 8px; min-height: 34px; padding: 7px 12px; opacity: 1; color: #bdcbe1; font-size: 11px; letter-spacing: 0; white-space: nowrap; background: #ffffff04; box-shadow: none; transition: background .15s; }
.observatory-header .panel-handle[aria-expanded="true"] { border-color: #a8c5ff38; color: #cbdcff; background: #a8c5ff0d; }
.observatory-header .panel-handle:hover { background: #a8c5ff20; }
.sky-root.ui-hidden .observatory-header { visibility: hidden; pointer-events: none; }
.sky-stage, .sky-labels { top: calc(var(--header-height) + 12px); right: calc(var(--right-rail) + 12px); bottom: 144px; left: calc(var(--left-rail) + 12px); width: auto; height: auto; }
.sky-stage { border: 1px solid #a8c5ff14; border-radius: 14px; overflow: hidden; background: #04070e; }
.sky-labels { overflow: hidden; border-radius: 14px; }
.hud, .sky-root.is-idle .hud, .sky-root.is-idle .hud--timeline { --hud-opacity: 1; opacity: 1; box-shadow: 0 8px 32px #0002; transition: none; }
.hud--toolbar { top: 82px; bottom: 14px; left: 12px; width: 252px; max-height: none; border-radius: 12px; padding: 16px 14px 12px; gap: 15px; }
.hud__brand { gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--glass-border); }
.hud__kicker { font-size: 9px; color: #90a3c1; letter-spacing: 1px; }
.hud__title { margin-top: 5px; font-size: 17px; font-weight: 500; }
.hud__orb { width: 7px; height: 7px; }
.hud__top { gap: 10px; }
.view-toggle__hint { margin: 0; font-size: 10px; line-height: 1.5; color: #8a9dbb; }
.obs-center { padding: 9px 10px; border-color: #a8c5ff26; border-radius: 9px; gap: 7px; }
.obs-center select { min-height: 30px; }
.obs-center__badge { color: #c8d7ed; }
.hud__fields { gap: 10px; align-content: start; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #a8c5ff33 transparent; }
.hud__fields::-webkit-scrollbar, .wb-body::-webkit-scrollbar { display: block; width: 3px; }
.hud__fields::-webkit-scrollbar-thumb, .wb-body::-webkit-scrollbar-thumb { background: #a8c5ff33; border-radius: 8px; }
.hud__group-label { margin: 6px 0 0; color: #b1c1db; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; font-weight: 500; line-height: 1.4; }
.hud__group-label:first-child { margin-top: 0; }
.hud__row { gap: 10px; }
.hud__field { gap: 5px; font-size: 9px; letter-spacing: .35px; min-width: 0; }
.hud__field input, .hud__field select { min-width: 0; width: 100%; min-height: 33px; padding: 7px 9px; font-size: 12px; background: #070d1880; border-radius: 7px; color: #d5e1f4; }
.hud__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; }
.hud__checks--grid { padding-top: 0; border-top: 0; }
.hud__check { font-size: 10px; color: #a5b6d0; gap: 6px; min-height: 20px; }
.hud__check input { width: 13px; height: 13px; }
.hud__footer { gap: 8px; padding-top: 12px; }
.hud__footer-row { gap: 8px; }
.hud__actions { gap: 4px; }
.hud__btn { min-width: 29px; min-height: 33px; padding: 6px; font-size: 10px; background: #a8c5ff0c; }
.hud__btn--play { background: #a8c5ff25; }
.hud__hint { font-size: 9px; line-height: 1.5; color: #7e91af; }
.hud--workbench { top: 82px; bottom: 14px; right: 12px; left: auto; width: 300px; max-height: none; border-radius: 12px; padding: 16px 14px 12px; gap: 14px; display: flex; }
.wb-head { padding: 0 0 13px; margin: 0; align-items: center; border-bottom: 1px solid var(--glass-border); }
.wb-head__title { font-size: 17px; font-weight: 500; margin-top: 5px; }
.snap-btn { min-height: 30px; padding: 6px 9px; border-radius: 7px; font-size: 10px; background: #a8c5ff0c; }
.info__badge { border-radius: 6px; font-size: 9px; padding: 6px; align-self: center; }
.wb-main-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wb-main-tab { min-height: 29px; padding: 5px 2px; font-size: 9px; border-radius: 6px; }
.wb-main-tab.is-active { background: #a8c5ff1a; color: #d1e1ff; border-color: #a8c5ff40; }
.wb-body { flex: 1; gap: 14px; scrollbar-width: thin; scrollbar-color: #a8c5ff33 transparent; padding-right: 3px; }
.wb-sec { padding-top: 13px; }
.wb-sec__title { font-size: 9px; font-weight: 500; letter-spacing: 1px; color: #a3b6d4; margin-bottom: 7px; }
.wb-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; padding: 4px 0; line-height: 1.5; }
.wb-row dt { font-size: 10px; color: #8fa2bf; }
.wb-row dd { font-size: 11px; color: #dce6f7; font-weight: 400; overflow-wrap: anywhere; }
.wb-formula { font-size: 10px; line-height: 1.6; padding: 8px; border-radius: 7px; background: #a8c5ff06; margin-top: 6px; }
.wb-sec--han .wb-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.obs-bar { top: 96px; left: calc(var(--left-rail) + (100% - var(--left-rail) - var(--right-rail)) / 2); max-width: calc(100% - var(--left-rail) - var(--right-rail) - 60px); flex-wrap: nowrap; padding: 4px; gap: 2px; border-radius: 10px; background: #0c1424ed; }
.obs-bar__btn { font-size: 10px; padding: 7px 8px; min-height: 30px; border-radius: 7px; }
.hud--timeline { bottom: 14px; left: calc(var(--left-rail) + 12px); right: calc(var(--right-rail) + 12px); width: auto; transform: none; border-radius: 12px; min-height: 92px; padding: 12px; }
.tl-btn { width: 32px; height: 32px; border-radius: 8px; }
.tl-btn--ghost { width: auto; height: auto; }
.tl-meta { font-size: 10px; }
.tl-seasons { font-size: 9px; letter-spacing: .5px; }
.tl-today { font-size: 10px; }
.hud--status { bottom: 125px; left: calc(var(--left-rail) + 12px); right: calc(var(--right-rail) + 12px); width: auto; max-width: none; transform: none; padding: 3px 4px; font-size: 9px; background: transparent; border: 0; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-bar { bottom: 156px; left: calc(var(--left-rail) + (100% - var(--left-rail) - var(--right-rail)) / 2); background: #0c1424e8; border-radius: 9px; max-width: calc(100% - var(--left-rail) - var(--right-rail) - 120px); overflow-x: auto; }
.preset-bar button { min-width: 26px; font-size: 9px; padding: 5px; }
.compass { left: calc(var(--left-rail) + 25px); bottom: 147px; width: 66px; opacity: .9; }
.compass__ring { width: 66px; height: 66px; }
.compass__meta { font-size: 9px; }
.compass__n, .compass__e, .compass__s, .compass__w { font-size: 9px; }
.compass__needle { height: 22px; margin-top: -22px; }
.sky-root .zoom-cluster, .sky-root:not(.panel-workbench-collapsed) .zoom-cluster { right: calc(var(--right-rail) + 23px); bottom: 147px; gap: 4px; width: 36px; }
.zoom-cluster button { width: 32px; min-height: 28px; font-size: 10px; padding: 4px; border-radius: 8px; background: #0c1424eb; }
.zoom-slider-wrap { width: 32px; height: 90px; border-radius: 8px; }
.zoom-slider { width: 78px; }
.fov-badge { width: 36px; font-size: 8px; }
.object-card { top: 146px; right: calc(var(--right-rail) + 24px); width: min(240px, calc(100% - var(--left-rail) - var(--right-rail) - 48px)); }
.search-overlay { top: 144px; left: calc(var(--left-rail) + (100% - var(--left-rail) - var(--right-rail)) / 2); max-width: calc(100% - var(--left-rail) - var(--right-rail) - 48px); background: #101a2cee; }
.hud--teach { top: 82px; right: 12px; width: 284px; height: calc((100% - 110px) * .59); max-height: none; border-radius: 12px; padding: 12px; gap: 8px; scrollbar-width: thin; scrollbar-color: #a8c5ff33 transparent; }
.hud--teach > * { flex-shrink: 0; }
.hud--teach .compass-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hud--teach .ecl-compass { width: 90px; height: 90px; margin: 0; object-fit: contain; }
.hud--info { right: 12px; bottom: 14px; width: 284px; height: calc((100% - 110px) * .41); overflow: auto; border-radius: 12px; padding: 14px; }
.hud--info .info__metrics dd { font-size: 12px; }
.hud--info .info__head h2 { font-size: 16px; }
.pz--v { right: calc(var(--right-rail) + 24px); top: 46%; width: 40px; }
.pz__btn { width: 28px; height: 28px; }
.pz__track--v { height: 105px; }
.pz__slider--v { width: 100px; }
.pz--h { bottom: 164px; left: calc(var(--left-rail) + (100% - var(--left-rail) - var(--right-rail)) / 2); width: min(340px, calc(100% - var(--left-rail) - var(--right-rail) - 52px)); }
.pp { bottom: 198px; left: calc(var(--left-rail) + 24px); border-radius: 10px; }
.pp__hint { display: none; }
.sky-root[data-mode="planetarium"] .hud__group-label { display: none; }
.sky-root[data-mode="planetarium"] .hud__group-label:first-child { display: block; }
.sky-root[data-mode="planetarium"] .hud__fields .hud__row:nth-child(3) { display: grid; }
.sky-root[data-mode="planetarium"] .sky-stage, .sky-root[data-mode="planetarium"] .sky-labels { bottom: 156px; }
.sky-root.ui-hidden .sky-stage, .sky-root.ui-hidden .sky-labels { inset: 0; border: 0; border-radius: 0; }
.sky-root.ui-hidden .hud--teach, .sky-root.ui-hidden .hud--info { visibility: hidden; pointer-events: none; }
.sky-root.ui-hidden .compass { left: 16px; bottom: 50px; }
.sky-root.ui-hidden .hud--status { left: 50%; right: auto; bottom: 12px; width: min(600px, calc(100% - 40px)); }
.snap__panel { background: #0d1524; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #bfd2ff; outline-offset: 3px; }
@media (max-width: 1250px) and (min-width: 721px) {
  .sky-root { --left-rail: 252px; --right-rail: 292px; }
  .sky-root[data-mode="planetarium"] { --right-rail: 284px; }
  .hud--toolbar { width: 228px; padding: 14px 12px 12px; }
  .hud--workbench { width: 268px; padding: 14px 12px 12px; }
  .hud--teach, .hud--info { width: 260px; }
  .observatory-header { gap: 16px; padding: 0 16px; }
  .observatory-brand { min-width: 220px; }
  .observatory-header .view-toggle__btn { min-width: 68px; padding: 5px 9px; }
  .observatory-guide { display: none; }
  .obs-bar { max-width: calc(100% - var(--left-rail) - var(--right-rail) - 40px); }
  .obs-bar__btn { padding: 7px 5px; font-size: 9px; }
  .obs-bar [data-obs="rotate"], .obs-bar [data-obs="fullscreen"] { display: none; }
  .compass { display: none; }
  .preset-bar { max-width: calc(100% - var(--left-rail) - var(--right-rail) - 80px); }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .sky-root { --right-rail: 0px; }
  .sky-root[data-mode="planetarium"] { --right-rail: 0px; }
  .hud--workbench, .hud--teach, .hud--info { z-index: 8; box-shadow: -12px 0 60px #0008; }
  .hud--workbench, .hud--workbench.is-open { top: 82px; bottom: 14px; left: auto; right: 12px; max-height: none; display: flex; }
  .sky-root.panel-workbench-collapsed .hud--workbench { display: none; }
  .observatory-brand { min-width: 150px; }
  .observatory-header { gap: 12px; }
  .observatory-header .view-toggle__btn { min-width: 55px; padding: 5px 7px; font-size: 10px; }
  .observatory-header .panel-handle { padding: 7px 8px; font-size: 10px; }
  .observatory-brand__kicker { font-size: 8px; }
}
@media (min-width: 721px) and (max-height: 720px) {
  .hud--toolbar { gap: 10px; padding-top: 12px; }
  .hud__brand { padding-bottom: 10px; }
  .hud__fields { gap: 7px; }
  .hud__field input, .hud__field select { min-height: 30px; padding: 5px 8px; }
  .hud__checks { gap: 4px 8px; }
  .hud--teach .ecl-compass { max-height: 100px; }
}
/* Keep the existing phone parameters view, with clear navigation and grouped data. */
@media (max-width: 720px) {
  .observatory-header { height: 70px; padding: 0 18px; justify-content: space-between; gap: 10px; }
  .observatory-brand { min-width: 0; }
  .observatory-header .view-toggle--modes, .observatory-header .panel-handle { display: none !important; }
  .observatory-guide { display: block; margin: 0; padding: 10px 0 10px 12px; font-size: 11px; }
  .sky-root.ui-hidden .observatory-header { visibility: visible; pointer-events: auto; }
  .hud--workbench, .sky-root.panel-workbench-collapsed .hud--workbench, .sky-root.ui-hidden .hud--workbench, .sky-root[data-mode="planetarium"] .hud--workbench { top: 70px; bottom: 0; left: 0; right: 0; height: calc(100% - 70px); padding: 20px 18px max(18px, env(safe-area-inset-bottom)); background: #080d18; border: 0; border-radius: 0; gap: 16px; box-shadow: none; }
  .wb-head { padding: 0 0 17px; }
  .wb-head__title { font-size: 22px; }
  .wb-head .hud__kicker { font-size: 9px; }
  .wb-main-tabs { display: none; }
  .wb-body { padding: 0 2px 24px; gap: 14px; }
  .wb-sec { padding: 16px 14px 10px; border: 1px solid var(--glass-border); border-radius: 11px; background: #0e1727; }
  .wb-sec:first-child { border-top: 1px solid var(--glass-border); padding-top: 16px; }
  .wb-sec__title { font-size: 10px; margin-bottom: 10px; color: #b4c8e8; letter-spacing: 1px; }
  .wb-row, .wb-sec--han .wb-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid #ffffff08; }
  .wb-row:last-child { border-bottom: 0; }
  .wb-row dt { font-size: 12px; color: #8fa5c6; line-height: 1.5; }
  .wb-row dd { font-size: 12px; line-height: 1.5; font-weight: 400; padding: 0; word-break: normal; overflow-wrap: anywhere; }
  .wb-formula { font-size: 10px; line-height: 1.7; margin: 10px 0 4px; padding: 9px; background: #a8c5ff08; }
  .snap-btn { min-height: 34px; font-size: 11px; padding: 7px 11px; }
  .info__badge { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }