* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  background: #050814;
  color: #e8ecf5;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1a2138;
  z-index: 2;
}

header h1 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #c9d2ee;
}

#info {
  flex: 1;
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #8d9ab8;
  margin-left: 24px;
}

#calendar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#calendar-controls label {
  font-size: 10px;
  color: #5b6fa5;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#calendar-select {
  background: #1a2138;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.5px;
}

#calendar-select:hover {
  background: #2a355c;
}

#calendar-select:focus {
  border-color: #4a5a8c;
}

#calendar-select option {
  background: #050814;
  color: #c9d2ee;
}

.icon-btn {
  background: transparent;
  border: 1px solid #2a355c;
  color: #c9d2ee;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  font-family: inherit;
  padding: 0;
}

.icon-btn:hover {
  background: #1a2138;
  border-color: #4a5a8c;
  color: #f4d57a;
}

body.edit-mode #settings-btn {
  display: none;
}

#file-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #2a355c;
}

#file-controls button {
  background: #1a2138;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.5px;
  cursor: pointer;
}

#file-controls button:hover {
  background: #2a355c;
}

#current-config-name {
  font-size: 11px;
  color: #8d9ab8;
  font-style: italic;
  margin-left: 4px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#current-config-name.dirty::after {
  content: " •";
  color: #f4d57a;
  font-style: normal;
}

#edit-toggle {
  background: #1a2138;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  letter-spacing: 1px;
  cursor: pointer;
  margin-left: 12px;
}

#edit-toggle:hover {
  background: #2a355c;
}

#edit-toggle.active {
  background: #f4d57a;
  color: #050814;
  border-color: #f4d57a;
  font-weight: bold;
}

#edit-panel {
  width: 300px;
  flex-shrink: 0;
  background: #08102099;
  border-left: 1px solid #2a355c;
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 12px;
}

#edit-panel[hidden] {
  display: none;
}

#edit-panel h2 {
  font-size: 13px;
  letter-spacing: 3px;
  color: #c9d2ee;
  text-transform: uppercase;
  font-weight: 500;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #5b6fa5;
  color: #5b6fa5;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.info-btn:hover {
  border-color: #c9d2ee;
  color: #c9d2ee;
  background: #1a2138;
}

.modal-shortcuts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-shortcuts li {
  font-size: 12px;
  color: #c9d2ee;
  line-height: 1.4;
}

.modal-shortcuts strong {
  color: #f4d57a;
  font-weight: 500;
  letter-spacing: 0.5px;
}

#edit-panel h3 {
  font-size: 10px;
  letter-spacing: 2px;
  color: #5b6fa5;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 6px;
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1a2138;
}

.panel-section[hidden] {
  display: none;
}

.panel-section:last-child {
  border-bottom: none;
}

.panel-section.collapsible > h3.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.panel-section.collapsible > h3.collapsible-header::after {
  content: "▾";
  font-size: 10px;
  color: #5b6fa5;
  transition: transform 0.15s;
}

.panel-section.collapsible.collapsed > h3.collapsible-header::after {
  content: "▸";
}

.panel-section.collapsible.collapsed > *:not(h3.collapsible-header) {
  display: none;
}

/* View-only mode (?view=1): every admin / editor affordance is hidden
   so a non-authenticated viewer can only browse the sky and tweak day,
   hour and calendar. */
body.view-only #settings-btn,
body.view-only #file-controls,
body.view-only #edit-toggle,
body.view-only #edit-panel,
body.view-only #toast,
body.view-only #modal-backdrop,
body.view-only #save-backdrop,
body.view-only #load-backdrop,
body.view-only #settings-backdrop,
body.view-only #map-size-backdrop,
body.view-only #export-backdrop,
body.view-only #login-backdrop,
body.view-only #modifier-hint {
  display: none !important;
}

/* Multi-selection mode: hide most controls so the panel makes clear that
   only bulk actions apply. Allowed children: heading, danger buttons, and
   anything explicitly tagged as multi-only (e.g. the rotation slider). */
.panel-section .multi-only {
  display: none;
}
.panel-section.multi-mode .multi-only {
  display: flex;
}
.panel-section.multi-mode > *:not(h3):not(button.danger):not(.multi-only) {
  display: none;
}

.label-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label-controls[hidden] {
  display: none;
}

.panel-section h3.subhead {
  font-size: 10px;
  letter-spacing: 2px;
  color: #5b6fa5;
  text-transform: uppercase;
  font-weight: normal;
  margin-top: 8px;
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px dashed #1a2138;
}

.panel-section h3.subhead:first-of-type {
  border-top: none;
  padding-top: 0;
}

.grid-circle-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid #1a2138;
  border-radius: 4px;
  background: #0a1124;
}

.grid-circle-card .field,
.grid-circle-card .field-row {
  margin: 0;
}

.grid-circle-card .row-actions {
  display: flex;
  justify-content: flex-end;
}

#grid-circles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#edit-panel button {
  background: #1a2138;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  padding: 7px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

#edit-panel button:hover {
  background: #2a355c;
}

#edit-panel button.danger {
  border-color: #6b2a3a;
  color: #e8a0a8;
}

#edit-panel button.danger:hover {
  background: #2a1018;
  border-color: #8b3a4a;
}

.panel-row {
  display: flex;
  gap: 6px;
}

.panel-row > button {
  flex: 1;
}

#new-constellation-btn {
  border-color: #4a5a8c !important;
  color: #f4d57a !important;
}

#new-constellation-btn:hover {
  background: #2a355c !important;
}

#new-nebula-btn {
  border-color: #5a4a8c !important;
  color: #c8a8ff !important;
}

#new-nebula-btn:hover {
  background: #3a2a5c !important;
}

#constellation-list li .item-type {
  display: inline-block;
  width: 14px;
  text-align: center;
  margin-right: 4px;
  opacity: 0.7;
}

.help-inline {
  font-size: 11px;
  color: #8d9ab8;
  font-style: italic;
  line-height: 1.4;
  margin: 4px 0;
}

.nebula-segment {
  cursor: pointer;
}

.nebula-segment-ghost {
  pointer-events: none;
  fill: none;
  stroke: #ffe45a;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px #ffe45a);
}

.nebula-endpoint-handle {
  fill: #ffe45a;
  stroke: #050814;
  stroke-width: 1;
  cursor: move;
  filter: drop-shadow(0 0 3px #ffe45a);
  vector-effect: non-scaling-stroke;
}

body.edit-mode .nebula-segment-ghost {
  cursor: move;
  pointer-events: stroke;
}

.celestial-grid {
  pointer-events: none;
}
.grid-circle, .grid-equinox-line, .grid-ascension-line {
  fill: none;
}
.grid-circle-label, .grid-equinox-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-anchor: middle;
}

.marquee-rect {
  fill: #ffe45a22;
  stroke: #ffe45a;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.nebula-pending-marker {
  fill: #ffe45a;
  stroke: #050814;
  stroke-width: 1;
  filter: drop-shadow(0 0 4px #ffe45a);
  pointer-events: none;
}

#constellation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#constellation-list li {
  padding: 6px 9px;
  cursor: pointer;
  border-radius: 3px;
  color: #c9d2ee;
  border: 1px solid transparent;
  transition: background 0.15s;
}

#constellation-list li:hover {
  background: #1a2138;
}

#constellation-list li.active {
  background: #2a355c;
  border-color: #4a5a8c;
  color: #f4d57a;
}

#constellation-list li.empty {
  color: #5b6fa5;
  font-style: italic;
  cursor: default;
}

#constellation-list li.out-of-map {
  opacity: 0.55;
}

#constellation-list li.out-of-map .out-of-map-tag {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d88b8b;
  margin-left: 4px;
}

.map-size-btn {
  background: #1a2138 !important;
  border: 1px dashed #4a5a8c !important;
  color: #c9d2ee !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
}

.map-size-btn:hover {
  background: #2a355c !important;
  border-style: solid !important;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #8d9ab8;
}

.field span {
  letter-spacing: 0.5px;
}

.field input[type="text"],
.field textarea {
  background: #0e1530;
  color: #e8ecf5;
  border: 1px solid #2a355c;
  padding: 5px 7px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  resize: vertical;
}

.field input[type="text"]:focus,
.field textarea:focus {
  border-color: #4a5a8c;
}

.field select {
  background: #0e1530;
  color: #e8ecf5;
  border: 1px solid #2a355c;
  padding: 5px 7px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.field select:focus {
  border-color: #4a5a8c;
}

.field input[type="range"] {
  width: 100%;
}

.help p {
  font-size: 11px;
  color: #8d9ab8;
  margin: 2px 0;
  line-height: 1.4;
}

body.edit-mode #section-sky {
  cursor: crosshair;
}

body.edit-mode.no-active-item #section-sky {
  cursor: default;
}

body.edit-mode .star {
  cursor: pointer;
}

.star.selected {
  fill: #ff1a1a !important;
  stroke: #ffe45a;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 4px #ff1a1a)
    drop-shadow(0 0 10px #ff1a1a)
    drop-shadow(0 0 18px #ff4040)
    drop-shadow(0 0 28px #ff0000) !important;
  animation: selected-pulse 1.2s ease-in-out infinite !important;
}

@keyframes selected-pulse {
  0%, 100% {
    stroke-width: 2;
  }
  50% {
    stroke-width: 4;
  }
}

.panel-section.disabled {
  opacity: 0.4;
}

.panel-section.disabled input,
.panel-section.disabled textarea,
.panel-section.disabled button {
  pointer-events: none;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #8d9ab8;
}

.field-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.field-row input[type="color"] {
  width: 36px;
  height: 24px;
  padding: 0;
  border: 1px solid #2a355c;
  background: #0e1530;
  border-radius: 3px;
  cursor: pointer;
}

.constellation-fill {
  pointer-events: none;
}

#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 12, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  animation: modal-fade-in 0.15s ease-out;
}

#modal-backdrop[hidden] {
  display: none;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#modal-card {
  background: linear-gradient(180deg, #131a3a 0%, #0a1024 100%);
  border: 1px solid #3a4a7c;
  border-radius: 8px;
  padding: 22px 26px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 213, 122, 0.1);
  animation: modal-pop-in 0.18s ease-out;
}

@keyframes modal-pop-in {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#modal-card h3 {
  font-size: 14px;
  letter-spacing: 2px;
  color: #f4d57a;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 10px;
}

#modal-card p {
  font-size: 13px;
  color: #c9d2ee;
  line-height: 1.5;
  margin-bottom: 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  background: #1a2138;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: background 0.15s, border-color 0.15s;
}

.modal-actions button:hover {
  background: #2a355c;
}

.modal-actions button.danger {
  border-color: #6b2a3a;
  color: #ffb0b8;
}

.modal-actions button.danger:hover {
  background: #3a1822;
  border-color: #9b3a4a;
}

/* Login / Save / Load modals share the same layout as the confirm modal. */
#login-backdrop,
#save-backdrop,
#load-backdrop,
#settings-backdrop,
#map-size-backdrop,
#export-backdrop,
#csv-export-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 12, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  animation: modal-fade-in 0.15s ease-out;
}

#login-backdrop[hidden],
#save-backdrop[hidden],
#load-backdrop[hidden],
#settings-backdrop[hidden],
#map-size-backdrop[hidden],
#export-backdrop[hidden],
#csv-export-backdrop[hidden] {
  display: none;
}

#export-card {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

#export-card h3.subhead {
  font-size: 10px;
  letter-spacing: 2px;
  color: #5b6fa5;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 0;
  padding-top: 6px;
  border-top: 1px dashed #1a2138;
  font-weight: normal;
}
#export-card h3.subhead:first-of-type {
  border-top: none;
  padding-top: 0;
}

#login-card,
#save-card,
#load-card,
#settings-card,
#map-size-card,
#export-card,
#csv-export-card {
  background: linear-gradient(180deg, #131a3a 0%, #0a1024 100%);
  border: 1px solid #3a4a7c;
  border-radius: 8px;
  padding: 22px 26px;
  max-width: 460px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 213, 122, 0.1);
  animation: modal-pop-in 0.18s ease-out;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#login-card h3,
#save-card h3,
#load-card h3,
#settings-card h3,
#map-size-card h3,
#export-card h3,
#csv-export-card h3 {
  font-size: 14px;
  letter-spacing: 2px;
  color: #f4d57a;
  text-transform: uppercase;
  font-weight: 500;
}

#login-card p,
#save-card p {
  font-size: 13px;
  color: #c9d2ee;
  line-height: 1.5;
}

#login-card .field input,
#save-card .field input {
  background: #0e1530;
  color: #e8ecf5;
  border: 1px solid #2a355c;
  padding: 7px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

#login-card .field input:focus,
#save-card .field input:focus {
  border-color: #4a5a8c;
}

#login-card .modal-actions,
#save-card .modal-actions,
#load-card .modal-actions {
  margin-top: 6px;
}

#login-submit,
#save-confirm {
  background: #1a2138;
  color: #f4d57a;
  border: 1px solid #4a5a8c;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.5px;
}

#login-submit:hover,
#save-confirm:hover {
  background: #2a355c;
}

.form-error {
  color: #ffb0b8;
  font-size: 12px;
  background: #2a1018;
  border: 1px solid #6b2a3a;
  border-radius: 3px;
  padding: 6px 8px;
}

#load-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#load-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #0e1530;
  border: 1px solid #2a355c;
}

#load-list li .config-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#load-list li .config-name {
  font-size: 13px;
  color: #c9d2ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#load-list li .config-meta {
  font-size: 10px;
  color: #5b6fa5;
  letter-spacing: 0.5px;
}

#load-list li button {
  background: #1a2138;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  padding: 5px 9px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

#load-list li button:hover {
  background: #2a355c;
}

#load-list li button.danger {
  border-color: #6b2a3a;
  color: #ffb0b8;
}

#load-list li button.danger:hover {
  background: #2a1018;
}

#load-empty {
  font-size: 12px;
  color: #5b6fa5;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #131a3a;
  color: #c9d2ee;
  border: 1px solid #3a4a7c;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 12px;
  z-index: 105;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: toast-in 0.2s ease-out;
}

#toast[hidden] {
  display: none;
}

#toast.error {
  border-color: #6b2a3a;
  color: #ffb0b8;
}

#modifier-hint {
  position: fixed;
  bottom: 96px;
  right: 24px;
  background: linear-gradient(180deg, #131a3a 0%, #0a1024 100%);
  color: #c9d2ee;
  border: 1px solid #4a5a8c;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.5px;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

#modifier-hint[hidden] {
  display: none;
}

.star-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#constellation-label {
  color: #f4d57a;
  font-style: italic;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

.map-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.map-panel h2 {
  font-size: 11px;
  letter-spacing: 3px;
  color: #5b6fa5;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
}

.map-frame {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.map-frame svg {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

#section-sky {
  cursor: grab;
}

.zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}

.zoom-controls button {
  width: 36px;
  height: 36px;
  font-size: 18px;
  background: #1a2138cc;
  color: #c9d2ee;
  border: 1px solid #2a355c;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}

.zoom-controls button:hover {
  background: #2a355c;
}

.zoom-controls button:active {
  background: #3a4a7c;
}

#zoom-level {
  font-size: 11px;
  color: #c9d2ee;
  text-align: center;
  letter-spacing: 0.5px;
  background: #1a2138cc;
  border: 1px solid #2a355c;
  border-radius: 4px;
  padding: 2px 0;
  min-width: 36px;
  user-select: none;
  backdrop-filter: blur(4px);
}

.pole-label-mark {
  font-size: 10px;
  letter-spacing: 3px;
  text-anchor: middle;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.polaris-wrapper.hover-only .pole-label-mark {
  opacity: 0;
}

.polaris-wrapper.hover-only:hover .pole-label-mark {
  opacity: 1;
}

#default-view-circle {
  fill: none;
  stroke: #5b6fa5;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.55;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

#zoom-view-circle {
  fill: none;
  stroke: #f4d57a;
  stroke-width: 1.2;
  opacity: 0.85;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

body.hide-section-view-circle #zoom-view-circle,
body.hide-section-view-circle #default-view-circle {
  display: none;
}

.cardinal {
  fill: #f4d57a;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0.85;
}

footer {
  padding: 14px 24px 18px;
  border-top: 1px solid #1a2138;
  background: #08102099;
  backdrop-filter: blur(6px);
}

.slider-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.hour-display {
  color: #f4d57a;
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 78px;
  text-align: right;
}

#hour-display {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.hour-slider-container {
  flex: 0 0 180px;
}

.hour-slider-container input[type="range"] {
  width: 100%;
}

/* Hour-control mode: only one of [clock, slider] visible at a time. The
   other still exists in the DOM so its events keep working should the
   user flip the preference live. */
body:not(.hour-as-slider) .hour-display,
body:not(.hour-as-slider) .hour-slider-container {
  display: none;
}
body.hour-as-slider .hour-clock {
  display: none;
}

.hour-clock {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 170px;
  height: 170px;
  user-select: none;
  cursor: grab;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hour-clock:active { cursor: grabbing; }

.hour-clock svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.hour-clock-rim {
  fill: rgba(10, 16, 36, 0.7);
  stroke: #2a355c;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

#hour-clock-hand {
  stroke: #f4d57a;
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-origin: 0 0;
  transition: transform 0.15s ease;
}

.hour-clock-tick {
  stroke: #5b6fa5;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hour-clock-tick.major {
  stroke: #c9d2ee;
  stroke-width: 1.5;
}

.hour-clock-num {
  fill: #8d9ab8;
  font-size: 7.5px;
  text-anchor: middle;
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

#hour-clock-display {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: bold;
  color: #f4f8ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(8, 12, 30, 0.95), 0 0 2px rgba(8, 12, 30, 0.95);
}

/* Daytime tint: --day-factor (0..1) interpolates from full night to a
   softer twilight blue. Ramps smoothly via JS at dawn/dusk. Only takes
   effect when body.daytime-active is set (i.e. the user enabled the
   shading preference) — otherwise the bg gradient SVG attribute shows
   through untouched. */
body {
  --day-factor: 0;
}
body.daytime-active #global-sky-bg-circle,
body.daytime-active #section-sky-bg-circle {
  fill: color-mix(in srgb, #02040c, #2c3a6e calc(var(--day-factor) * 100%));
  transition: fill 0.25s ease;
}
body.daytime-active .background-stars-layer {
  opacity: calc(1 - var(--day-factor) * 0.75);
  transition: opacity 0.25s ease;
}

/* The daytime veil sits above the constellation fills (rendered as part
   of redrawConstellations) so the fills don't read darker than the sky
   while the day factor is on. Its opacity scales with --day-factor; at
   factor 0 it's fully transparent. */
.daytime-overlay {
  pointer-events: none;
  opacity: 0;
}
body.daytime-active .daytime-overlay {
  opacity: calc(var(--day-factor) * 0.65);
  transition: opacity 0.25s ease;
}

.day-display {
  color: #f4d57a;
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#day-number {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.date-display {
  font-size: 11px;
  color: #8d9ab8;
  letter-spacing: 0.5px;
  font-style: italic;
}

.slider-container {
  flex: 1;
  position: relative;
}

#month-bar {
  position: relative;
  height: 18px;
  margin-top: 4px;
}

.month-tick-bar {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: #5b6fa5;
  opacity: 0.5;
}

.festival-tick-bar {
  position: absolute;
  top: 0;
  width: 2px;
  height: 7px;
  background: #f4d57a;
  opacity: 0.75;
  margin-left: -0.5px;
}

.month-label-bar {
  position: absolute;
  top: 6px;
  font-size: 10px;
  color: #8d9ab8;
  letter-spacing: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}

#day-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, #2a355c, #4a5a8c);
  border-radius: 2px;
  outline: none;
}

#day-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4d57a;
  border: 2px solid #050814;
  cursor: pointer;
  box-shadow: 0 0 8px #f4d57a88;
}

#day-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4d57a;
  border: 2px solid #050814;
  cursor: pointer;
}

.star {
  --glow-color: #ffffff;
  filter:
    drop-shadow(0 0 3px var(--glow-color))
    drop-shadow(0 0 8px var(--glow-color))
    drop-shadow(0 0 14px var(--glow-color));
  transition: fill 0.2s;
}

@keyframes star-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px var(--glow-color))
      drop-shadow(0 0 3px var(--glow-color))
      drop-shadow(0 0 6px var(--glow-color));
  }
  50% {
    filter:
      drop-shadow(0 0 6px var(--glow-color))
      drop-shadow(0 0 16px var(--glow-color))
      drop-shadow(0 0 28px var(--glow-color));
  }
}

/* Edit mode permanently drops the heavy filters on stars, fills, polaris and
   the bg gradient — those are the dominant paint cost when many items are on
   screen. Nebulae keep their blur in edit mode so the sky still looks like
   it does in view mode; their filter is only stripped during an active
   drag/slider gesture (body.dragging). */
body.edit-mode .star,
body.edit-mode .pole-star-mark,
body.edit-mode .constellation-fill,
body.edit-mode #global-sky-bg-circle,
body.edit-mode #section-sky-bg-circle,
body.dragging .star,
body.dragging .pole-star-mark,
body.dragging .constellation-fill,
body.dragging .nebula-segment,
body.dragging #global-sky-bg-circle,
body.dragging #section-sky-bg-circle,
body.no-star-glow .star,
body.no-star-glow .pole-star-mark,
body.no-star-glow #global-sky-bg-circle,
body.no-star-glow #section-sky-bg-circle {
  filter: none !important;
}
body.edit-mode .star.pulse,
body.dragging .star.pulse,
body.no-star-glow .star.pulse {
  animation: none !important;
}

.star.pulse {
  animation: star-pulse 2.4s ease-in-out infinite;
}

.star:hover {
  fill: #f4d57a;
  cursor: pointer;
}

.constellation-line {
  stroke: #5b6fa5;
  stroke-width: 1;
  opacity: 0.4;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.3s, stroke 0.3s;
}

.constellation-group:hover .constellation-line {
  stroke: #f4d57a;
  opacity: 0.9;
}

.constellation-group:hover .star {
  fill: #f4d57a;
}

/* With an active selectable item, foreign groups do not respond to hover —
   their lines/stars/labels do not change colour or opacity, mirroring the
   click filter applied in JS. */
body.has-active-item .constellation-group:not(.active-edit):hover .constellation-line {
  stroke: #5b6fa5;
  opacity: 0.4;
}
body.has-active-item .constellation-group:not(.active-edit):hover .star {
  fill: revert;
}
body.has-active-item .constellation-group:not(.active-edit):hover .constellation-name,
body.has-active-item .constellation-group:not(.active-edit):hover .star-label,
body.has-active-item .nebula-group:not(.active-edit):hover .nebula-name {
  opacity: 0;
}

.constellation-name {
  fill: #c9d2ee;
  font-size: 11px;
  letter-spacing: 2px;
  text-anchor: middle;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.constellation-group:hover .constellation-name {
  opacity: 1;
}

.constellation-group.active-edit .constellation-name {
  opacity: 1;
  pointer-events: auto;
  cursor: move;
}

.trajectory-ellipse {
  fill: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.trajectory-center-handle {
  fill: #f4d57a;
  stroke: #050814;
  stroke-width: 1;
  cursor: move;
  filter: drop-shadow(0 0 3px #f4d57a);
}

.trajectory-name {
  fill: #c9d2ee;
  font-size: 11px;
  letter-spacing: 2px;
  text-anchor: middle;
  pointer-events: none;
  /* Trajectory labels are always visible when present — the JS only adds
     them to the DOM if the trajectory has showName=true, so there's no
     need for a hover gate. */
  opacity: 1;
}

.trajectory-group.active-edit .trajectory-name {
  pointer-events: auto;
  cursor: move;
}

body.view-only .trajectory-center-handle {
  display: none;
}

.nebula-name {
  fill: #c9d2ee;
  font-size: 11px;
  letter-spacing: 2px;
  text-anchor: middle;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.nebula-group:hover .nebula-name {
  opacity: 1;
}

.nebula-group.active-edit .nebula-name {
  opacity: 1;
  pointer-events: auto;
  cursor: move;
}

.star-label {
  fill: #c9d2ee;
  font-size: 9px;
  letter-spacing: 1px;
  text-anchor: middle;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

/* In view mode (and edit mode without that star selected): only on hover. */
.star-group:hover .star-label {
  opacity: 1;
}

/* In edit mode, all star labels of the active constellation are visible. */
body.edit-mode .constellation-group.active-edit .star-label {
  opacity: 1;
}

/* And the selected star's label is also draggable. */
body.edit-mode .star-group.selected .star-label {
  opacity: 1;
  pointer-events: auto;
  cursor: move;
}

/* Polaris label always visible; draggable when polaris is the active selection. */
.polaris-wrapper.active-edit .pole-label-mark {
  pointer-events: auto;
  cursor: move;
}

.month-tick {
  stroke: #2a355c;
  stroke-width: 1;
}

.month-label {
  fill: #5b6fa5;
  font-size: 10px;
  letter-spacing: 1px;
  text-anchor: middle;
  pointer-events: none;
}