/* Night Sky Live. Layout: full-screen sky canvas; a slim top bar (place, actions), a time bar at the bottom,
   panels slide in from the right (bottom sheet on phones); a details card appears for the selected object. */
/* Fonts, bundled (SIL Open Font License 1.1, see OFL.txt in each folder under fonts/): subset to Latin and the symbols the app uses */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond/CormorantGaramond-Medium.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond/CormorantGaramond-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/manrope/Manrope-400-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono/JetBrainsMono-400-500.woff2") format("woff2"); }
:root {
  --sky: #05070d;
  --ink: #e9ecf3;
  --ink-dim: #8e97ab;
  --ink-faint: #7a8296;  /* 4.5:1 on the panels, for small print */
  --glass: rgba(10, 14, 26, 0.72);
  --glass-solid: #0c1120;
  --line: rgba(170, 186, 222, 0.16);
  --star: #f2e6c8;      /* warm starlight: the accent */
  --cool: #9cc3ff;      /* constellation and grid blue */
  --ok: #7fd6a0;
  --warn: #f0a868;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--sky); color: var(--ink); font: 14px/1.45 var(--ui); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }

/* Red night mode keeps your eyes dark-adapted */
html.red body { filter: grayscale(1) sepia(1) saturate(9) hue-rotate(-48deg) brightness(0.72); }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#sky.dragging { cursor: grabbing; }

/* Labels drawn over the sky */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; transform-origin: 0 0; will-change: transform; font-size: 12px; color: var(--ink-dim); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); transition: opacity .25s; }
.lbl.planet { color: var(--star); font-weight: 600; letter-spacing: 0.01em; }
.lbl.star { color: #cfd6e6; }
.lbl.con { font: italic 500 15px/1 var(--display); color: rgba(156, 195, 255, 0.62); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; font-size: 11px; font-family: var(--ui); }
.lbl.sat { color: #a8f0c6; font-size: 11px; }
.lbl.comet { color: #b8f3e4; font-size: 11.5px; font-style: italic; }
.lbl.dso { color: #c9b6ff; font-size: 11px; }
.lbl.dir { font: 600 13px/1 var(--mono); color: var(--star); letter-spacing: 0.08em; }
.lbl.dir.minor { font-weight: 400; color: var(--ink-faint); font-size: 11px; }
.lbl.sel { color: #fff; font-weight: 600; }
#labels.day .lbl { color: rgba(10, 24, 48, 0.82); text-shadow: 0 0 4px rgba(255, 255, 255, 0.35); }
#labels.day .lbl.con { color: rgba(10, 30, 70, 0.55); }
#labels.day .lbl.dir { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }

#pointer-arrow { position: fixed; z-index: 3; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--star); font-size: 12px; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#pointer-arrow svg { width: 18px; height: 18px; }

/* Loader */
#loader { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--sky); transition: opacity .9s ease; }
#loader.hide { opacity: 0; pointer-events: none; }
#loader .ring { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); border-top-color: var(--star); animation: spin 1.6s linear infinite; }
#loader p { margin: 0; font: italic 500 18px var(--display); color: var(--ink-dim); max-width: 32ch; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Shared controls */
.chip, .icon, .fab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; color: var(--ink); }
.chip { height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 500; }
.chip svg, .icon svg, .fab svg { width: 18px; height: 18px; flex: none; }
.icon { width: 40px; height: 40px; border-radius: 50%; }
.chip:hover, .icon:hover, .fab:hover { border-color: rgba(242, 230, 200, 0.4); }
.chip.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.icon.sm { width: auto; height: 32px; border-radius: 999px; padding: 0 10px; font: 500 12px var(--mono); }
.chip[aria-pressed="true"] { background: rgba(242, 230, 200, 0.16); border-color: rgba(242, 230, 200, 0.45); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.seg button { all: unset; cursor: pointer; padding: 0 11px; height: 30px; display: grid; place-items: center; font: 500 12px var(--mono); color: var(--ink-dim); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { color: var(--sky); background: var(--star); }
.seg button:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }

/* Top bar */
#top { position: fixed; z-index: 5; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
#top > * { pointer-events: auto; }
#place { max-width: min(60vw, 420px); }
#place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#top-actions { display: flex; gap: 8px; }

#compass { position: fixed; z-index: 4; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(8, 11, 20, 0.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 12px var(--mono); color: var(--ink-dim); pointer-events: none; }
#compass #heading { color: var(--star); }

.fab { position: fixed; z-index: 5; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); height: 46px; padding: 0 16px; border-radius: 999px; font-weight: 600; }
.fab[aria-pressed="true"] { background: var(--star); color: var(--sky); border-color: var(--star); }

/* Time bar */
#timebar { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: calc(100vw - 20px); }
#timebar .icon.sm, #timebar .chip.sm { background: transparent; }
#t-display { display: grid; text-align: center; min-width: 116px; padding: 0 4px; line-height: 1.15; }
#t-time { font: 500 17px var(--mono); font-variant-numeric: tabular-nums; }
#t-date { font-size: 11px; color: var(--ink-dim); }
#timebar.shifted #t-time { color: var(--warn); }
#t-rate .seg, #t-rate { background: transparent; backdrop-filter: none; }

/* Side panel / bottom sheet */
.sheet { position: fixed; z-index: 8; top: calc(64px + env(safe-area-inset-top, 0px)); right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 360px; display: flex; flex-direction: column; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font: italic 500 24px/1 var(--display); letter-spacing: 0.01em; }
.close { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-dim); font-size: 20px; }
.close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.close:focus-visible { outline: 2px solid var(--star); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 14px; scrollbar-width: thin; }
.sec { padding: 10px 16px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec h4 { margin: 0 0 8px; font: 600 10.5px var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.kv span { color: var(--ink-dim); white-space: nowrap; }
.kv b { font: 500 13px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.list { display: grid; gap: 2px; margin: 0 -8px; }
.item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.item:hover, .item:focus-visible { background: rgba(255, 255, 255, 0.05); }
.item i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.item .t { min-width: 0; }
.item .t b { display: block; font-weight: 600; }
.item .t small { color: var(--ink-dim); font-size: 12px; }
.item .v { font: 500 12px var(--mono); color: var(--ink-dim); text-align: right; }
.empty { color: var(--ink-dim); font-size: 13px; padding: 4px 0; }
.row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.row span small { display: block; color: var(--ink-dim); font-size: 12px; }
.switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: rgba(170, 186, 222, 0.22); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-dim); transition: transform .2s, background .2s; }
.row[aria-pressed="true"] .switch { background: rgba(242, 230, 200, 0.5); }
.row[aria-pressed="true"] .switch::after { transform: translateX(14px); background: #fff; }
.field { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); }
.field input { all: unset; flex: 1; min-width: 0; font-size: 15px; }
.field:focus-within { border-color: var(--star); }
.field input::placeholder { color: var(--ink-faint); }
.field svg { width: 18px; height: 18px; color: var(--ink-dim); flex: none; }
input[type="range"] { width: 100%; accent-color: var(--star); }
.note { color: var(--ink-faint); font-size: 12px; line-height: 1.55; }
.note a { color: var(--ink-dim); }

/* Details card */
.card { position: fixed; z-index: 7; left: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 340px; max-width: calc(100vw - 28px); max-height: 58vh; overflow-y: auto; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.card-head { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.card-head h3 { margin: 0; font: 500 26px/1.05 var(--display); }
.card-head p { margin: 4px 0 0; color: var(--ink-dim); font-size: 13px; }
#card-body { padding: 4px 16px 6px; }
#card-body .kv { margin-bottom: 2px; }
.kv-sec { padding: 8px 0 6px; border-top: 1px solid var(--line); }
.kv-sec:first-child { border-top: 0; padding-top: 2px; }
.kv-sec h5 { margin: 0 0 6px; font: 600 10px var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
#card-body .card-note { margin: 8px 0 6px; color: var(--ink-dim); font-size: 12.5px; line-height: 1.55; }
#card-body p { margin: 6px 0 8px; color: var(--ink-dim); font-size: 13px; }
.card-actions { display: flex; gap: 8px; padding: 6px 16px 14px; }

#toast { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); padding: 9px 14px; border-radius: 18px; width: max-content; max-width: min(92vw, 460px); text-align: center; line-height: 1.4; background: var(--glass-solid); border: 1px solid var(--line); font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }

@media (max-width: 720px) {
  #compass { top: calc(62px + env(safe-area-inset-top, 0px)); }
  .sheet { left: 8px; right: 8px; top: auto; width: auto; height: 70vh; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 18px; }
  .card { left: 8px; right: 8px; width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: 46vh; }
  #timebar { gap: 4px; padding: 5px; }
  #t-rate button { padding: 0 8px; }
  #t-display { min-width: 92px; }
  #t-time { font-size: 15px; }
  .fab { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) { #t-rate button[data-rate="300"] { display: none; } }
@media (prefers-reduced-motion: reduce) { #loader .ring { animation: none; } .lbl { transition: none; } }

/* Visible image credit, as the ESO licence requires whenever the photographic Milky Way is shown */
#mw-credit { position: fixed; z-index: 4; right: 12px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font: 500 10.5px var(--ui); color: var(--ink-faint); text-decoration: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); letter-spacing: 0.02em; }
#mw-credit a { color: inherit; text-decoration: none; }
#mw-credit a:hover, #mw-credit a:focus-visible { color: var(--ink-dim); text-decoration: underline; }
#loader .loader-credit a { color: inherit; }
#loader .loader-credit { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-size: 11px; color: var(--ink-faint); }
@media (max-width: 720px) { #mw-credit { right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } body:has(#btn-gyro:not([hidden])) #mw-credit { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); } }