/* Full-screen sky view (DESIGN §7.11). Tokens and shared components come from mockup.css. */
.sky-app { height: 100dvh; overflow: hidden; background: var(--bc-abismo); }

.sky-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bc-abismo);
  cursor: grab; touch-action: none; outline-offset: -4px; }
.sky-canvas:active { cursor: grabbing; }
.sky-fallback { position: fixed; inset: 0; margin: 0; padding: var(--bc-sp-m); display: grid; place-content: center;
  text-align: center; font-size: var(--bc-fs-sm); color: var(--bc-texto); pointer-events: none; }
.sky-fallback[hidden] { display: none; }

/* Surfaces that float over the sky */
.glass { background: rgba(8, 12, 20, 0.78); border: 1px solid rgba(123, 168, 212, 0.23);
  border-radius: 16px; backdrop-filter: blur(14px); box-shadow: 0 18px 40px #03060acc; }

.sky-header { position: fixed; left: 0; right: 0; top: 0; background: rgba(8, 12, 20, 0.6); }
.sky-header .header-row { padding-inline: 24px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.link-btn { min-height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer;
  color: var(--bc-texto); font: 500 var(--bc-fs-ui)/1 var(--bc-font); border-radius: var(--bc-radius-sm); }
.link-btn:hover { color: var(--bc-blanco); }

/* Layer switch, readout and caption (top left) */
.sky-layers { position: fixed; left: 24px; top: calc(var(--bc-header-h) + 16px); z-index: 3;
  max-width: min(520px, calc(100vw - 110px)); pointer-events: none; }
.layer-row { display: flex; align-items: center; gap: 8px; }
.layer-row .select { flex: 1; max-width: 280px; }
.layer-row select, .layer-row button { pointer-events: auto; }
.sky-layers .select select, .info-toggle { background: rgba(8, 12, 20, 0.78); }
.info-toggle { display: none; font: italic 600 18px/1 Georgia, "Times New Roman", serif; }
.sky-readout, .sky-pointer { margin-top: 8px; padding: 4px 8px; background: rgba(4, 7, 11, 0.7);
  border-radius: var(--bc-radius-sm); font-variant-numeric: tabular-nums; }
.sky-readout { display: inline-block; }
.sky-pointer { width: fit-content; }
.sky-app .sky-caption { display: inline-block; margin: 8px 0 0; padding: 4px 8px; min-height: 0;
  background: rgba(4, 7, 11, 0.7); border-radius: var(--bc-radius-sm); color: var(--bc-texto); }

/* Sky controls (right edge) */
.sky-tools { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; gap: 12px; }
.sky-tools .icon-btn { background: rgba(8, 12, 20, 0.7); }
/* Their tooltips open to the left, into the sky, because the column sits on the right edge */
.sky-tools [data-tip]::after { left: auto; right: calc(100% + 10px); bottom: auto; top: 50%; transform: translate(4px, -50%); }
.sky-tools [data-tip]:hover::after, .sky-tools [data-tip]:focus-visible::after { transform: translate(0, -50%); }
.sky-tools .icon-btn[aria-pressed="true"] { background: var(--bc-noche); }
#grid-toggle:disabled { opacity: 0.45; cursor: not-allowed; }

/* The marked position */
.reticle { position: fixed; left: 0; top: 0; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  pointer-events: none; }
.reticle svg { width: 100%; height: 100%; overflow: visible; }
.reticle-ring, .reticle-halo, .reticle-ping { fill: none; }
.reticle-ping { stroke: var(--bc-estrella); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* On arrival the ring lands with a small overshoot and sends out three slow pings, then rests:
   nothing here moves for more than five seconds (WCAG 2.2.2). */
.reticle.is-arriving svg { animation: reticle-land 0.6s cubic-bezier(.2, .9, .3, 1.25) both; }
.reticle.is-arriving .reticle-ping { animation: reticle-ping 1.4s cubic-bezier(.2, .6, .4, 1) 0.35s 3; }
.reticle.is-arriving .reticle-label { animation: note-in 0.4s ease 0.3s both; }
@keyframes reticle-land { from { opacity: 0; transform: scale(1.9); } to { opacity: 1; transform: scale(1); } }
@keyframes reticle-ping { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes note-in { from { opacity: 0; } to { opacity: 1; } }
.reticle-halo { stroke: var(--viz-halo); stroke-width: 4; }
.reticle-ring { stroke: var(--bc-estrella); stroke-width: 2; stroke-dasharray: 26 8.56; }
.reticle-label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 8px; background: rgba(4, 7, 11, 0.7); border-radius: var(--bc-radius-sm);
  font-size: var(--bc-fs-xs); color: var(--bc-blanco); }

/* Search panel (bottom centre) */
.journey { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 4;
  width: min(880px, calc(100vw - 32px)); padding: 16px 24px 20px; }
.journey-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.journey-head .eyebrow { margin: 0; }
.pill-btn { min-height: 44px; padding: 0 16px; border-radius: var(--bc-radius-pill); cursor: pointer;
  background: rgba(13, 22, 37, 0.6); border: 1px solid var(--bc-border); color: var(--bc-texto);
  font: 500 var(--bc-fs-sm)/1 var(--bc-font); }
.pill-btn:hover { border-color: var(--bc-acento); color: var(--bc-blanco); }
.journey-title { margin: 4px 0 12px; font-size: var(--bc-fs-lg); font-weight: 500; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--bc-blanco); }
/* Two rows: what to look for (a test object or a name), then where (RA and Dec) and the button */
.journey-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: end; }
.journey-form .field-name { grid-column: 3 / -1; }
.journey-form .field-dec { grid-column: 3; }
.journey-or { align-self: end; padding-bottom: 14px; font-size: var(--bc-fs-sm); color: var(--bc-muted); }
.journey .field-error { margin: 8px 0 0; }
.journey .search-msg { margin-top: 10px; }
.journey.is-collapsed { width: auto; padding: 8px 8px 8px 20px; }

/* Dialogs */
.modal { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; overflow: auto;
  background: var(--bc-cosmos); color: var(--bc-texto); border: 1px solid var(--bc-border);
  border-radius: 16px; box-shadow: 0 18px 40px #03060acc; }
.modal::backdrop { background: rgba(4, 7, 11, 0.72); }
/* Dialogs ease in (the frames inside still change with a hard cut, DESIGN §6) */
.modal[open] { animation: modal-in 0.28s cubic-bezier(.2, .8, .3, 1) both; }
.modal[open]::backdrop { animation: note-in 0.28s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-small { width: min(640px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-head > div { min-width: 0; }
.modal-actions { flex: none; display: flex; align-items: center; gap: 12px; }
/* Detail level (DESIGN §7.13): two options in a pill; the lit thumb slides to the chosen one */
.mode-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px;
  border: 1px solid var(--bc-border); border-radius: var(--bc-radius-pill); background: rgba(13, 22, 37, 0.6); }
.mode-switch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: var(--bc-radius-pill); background: var(--bc-estrella); transition: transform 0.2s ease; }
.mode-switch.is-advanced::before { transform: translateX(100%); }
.mode-switch button { position: relative; min-height: 36px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  border-radius: var(--bc-radius-pill); color: var(--bc-texto); font: 500 var(--bc-fs-sm)/1 var(--bc-font);
  transition: color var(--bc-transition); }
.mode-switch button:hover { color: var(--bc-blanco); }
.mode-switch button[aria-checked="true"] { color: var(--bc-cosmos); }
.mode-switch button:focus-visible { outline-offset: 2px; }
.modal-title { margin: 0 0 4px; font-size: var(--bc-fs-lg); font-weight: 500; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--bc-blanco); }
.modal-empty { max-width: 640px; padding: var(--bc-sp-s) 0; font-size: var(--bc-fs-base); line-height: 1.6; }
.modal-empty strong { color: var(--bc-blanco); font-weight: 500; }
.modal .viewer { padding: var(--bc-sp-s) 0 0; }
.modal .stage { width: min(100%, calc(100dvh - 330px), 640px); }
.modal-how { margin-top: var(--bc-sp-s); padding-top: var(--bc-sp-s); border-top: 1px solid var(--bc-border-soft);
  font-size: var(--bc-fs-base); line-height: 1.6; }
.modal-how summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--bc-estrella);
  font-weight: 500; }
.modal-how ol { max-width: 820px; margin: 0; padding-left: 1.2em; }
.credits-body { font-size: var(--bc-fs-sm); color: var(--bc-texto); line-height: 1.6; }
.credits-body p { margin: 12px 0 0; }

@media (max-width: 900px) {
  .journey-form { grid-template-columns: 1fr 1fr; }
  .journey-form .field-name, .journey-form .field-dec { grid-column: auto; }
  .journey-go { grid-column: 1 / -1; }
  .journey-or { display: none; }
}
@media (max-width: 760px) {
  .sky-header .header-row { padding-inline: 16px; }
  /* A fixed width, so the layer select does not change size when the note comes and goes */
  .sky-layers { left: 16px; top: calc(var(--bc-header-h) + 8px); width: calc(100vw - 32px - 56px); max-width: none; }
  /* Phones: the note about the layer and the coordinates open from the info button. The note also
     shows by itself for a few seconds when the page loads and when the layer changes. */
  .info-toggle { display: inline-grid; }
  .sky-readout, .sky-app .sky-caption { display: none; }
  .sky-layers.show-coords .sky-readout, .sky-layers.show-note .sky-caption { display: inline-block; }
  .sky-layers.show-note .sky-caption { animation: note-in 0.2s ease both; }
  /* Collapsed search: a bar across the screen, like the bottom bar of a phone app */
  .journey.is-collapsed { width: calc(100vw - 16px); padding: 8px 8px 8px 16px; }
  .journey.is-collapsed .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sky-tools { right: 16px; top: calc(var(--bc-header-h) + 8px); transform: none; gap: 8px; }
  .journey { bottom: 8px; width: calc(100vw - 16px); padding: 12px 16px 16px; }
  .journey-title { font-size: var(--bc-fs-md); }
  .modal { padding: 16px; }
  .mode-switch button { padding: 0 12px; }
}
@media (max-width: 520px) {
  /* The left column is wider, so the longest test object name fits its select on a 360 px phone */
  .journey-form { grid-template-columns: 1.5fr 1fr; }
  /* The header has room for the team name and Credits, not for the project name too */
  .brand-sep, .brand-project { display: none; }
  /* The title gives way to the detail switch and the close button; it wraps underneath */
  .modal-head { flex-wrap: wrap; }
  .modal-head > div { order: 2; flex: 1 0 100%; }
  .modal-actions { order: 1; width: 100%; justify-content: space-between; }
}