/* zodiakk — ASCII world map + active pin panel */

.atlas-frame {
  margin-top: 24px;
  border: 1px solid #23262a;
  background: #0b0c0d;
}

/* top bar */
.atlas-bar {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #23262a;
  font-family: "VCR OSD Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7f85;
}
.atlas-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #a6abb0; }
.atlas-bar .live i {
  width: 6px; height: 6px;
  background: #c9422b;
  display: inline-block;
  animation: at-blink 2.6s steps(2, end) infinite;
}
@keyframes at-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0.2 } }

/* body: map on the left, panel on the right */
.atlas-body {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr);
  gap: 0;
  border-bottom: 1px solid #23262a;
}

/* --- map grid --- */
.atlas-grid {
  position: relative;
  padding: 28px 24px;
  border-right: 1px solid #23262a;
  background:
    repeating-linear-gradient(to bottom, transparent 0 22px, rgba(122,127,133,0.035) 22px 23px),
    #0b0c0d;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
/* Wrapper shrinks to the ASCII text's rendered width so the pin overlay
   can align 1:1 with the rendered characters — previously pins were
   stretched across the full container width, mis-locating continents. */
.atlas-map-wrap {
  position: relative;
  display: inline-block;
}
.atlas-ascii {
  font-family: "VCR OSD Mono", ui-monospace, monospace;
  font-size: clamp(6px, 0.65vw, 10px);
  line-height: 1.02;
  color: #9aa0a6;
  letter-spacing: 0.01em;
  margin: 0;
  white-space: pre;
  user-select: none;
}
.atlas-ascii i { font-style: normal; }
.atlas-ascii .lf { color: #c4c7cc; }   /* inner fill ▓ — brightest */
.atlas-ascii .ls { color: #7e828a; }   /* shelf ▒ — mid */
.atlas-ascii .lc { color: #4e535a; }   /* coast ░ — darkest */

.atlas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.atlas-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
}
.atlas-dot-core {
  width: 5px; height: 5px;
  background: #a6abb0;
  display: block;
  transition: background 180ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.atlas-dot-ring {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(242, 242, 239, 0.4);
  opacity: 0;
  animation: at-ping 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.atlas-dot:nth-child(2n) .atlas-dot-ring { animation-delay: 0.9s; }
.atlas-dot:nth-child(3n) .atlas-dot-ring { animation-delay: 1.6s; }
.atlas-dot:nth-child(5n) .atlas-dot-ring { animation-delay: 2.3s; }
@keyframes at-ping {
  0%   { transform: scale(0.8); opacity: 0; }
  22%  { opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0; }
}
.atlas-dot.hov .atlas-dot-core {
  background: #f2f2ef;
  transform: scale(1.3);
}
.atlas-dot.on .atlas-dot-core {
  background: #c9422b;
  transform: scale(1.6);
  box-shadow: 0 0 0 2px #0b0c0d, 0 0 0 3px #c9422b;
}
.atlas-dot-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "VCR OSD Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #7a7f85;
  white-space: nowrap;
  transition: color 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.atlas-dot.hov .atlas-dot-label { color: #f2f2ef; }
.atlas-dot.on  .atlas-dot-label { color: #c9422b; }

/* --- right-side panel with image + note --- */
.atlas-panel {
  padding: 0;
  font-family: "VCR OSD Mono", ui-monospace, monospace;
  background: #0b0c0d;
  border-left: 1px solid #23262a;
}

.ap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 1px;
  background: #23262a;
}

.ap-cell {
  background: #0b0c0d;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

.ap-img-wrap {
  grid-column: 1 / -1;
  padding: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ap-img {
  position: absolute;
  inset: 0;
  filter: grayscale(0.3) contrast(1.05) brightness(0.9);
  transition: filter 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.atlas-panel.previewing .ap-img {
  filter: grayscale(0) contrast(1.1) brightness(1);
}

.ap-id-cell,
.ap-city-cell,
.ap-note-cell,
.ap-state-cell {
  grid-column: 1 / -1;
}
.ap-note-cell { grid-column: 1 / -1; }

/* on wider panels, inline id+city and nights/geo/last as 3-col */
.ap-grid .ap-id-cell   { grid-column: 1 / 2; }
.ap-grid .ap-city-cell { grid-column: 2 / -1; }

.ap-l {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a7f85;
  line-height: 1;
}
.ap-v {
  font-family: "VCR OSD Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #f2f2ef;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-transform: lowercase;
}
.ap-red { color: #c9422b; }

.ap-note-v {
  font-size: 11px;
  line-height: 1.4;
  color: #d8d9db;
  letter-spacing: 0.02em;
  text-transform: none;
}
.atlas-panel.previewing .ap-state-cell .ap-v { color: #c9422b; }

/* --- bottom readout: pill nodes --- */
.atlas-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.ar-pill {
  background: #0b0c0d;
  border: 0;
  border-right: 1px solid #23262a;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: "VCR OSD Mono", ui-monospace, monospace;
  cursor: pointer;
  color: #7a7f85;
  transition: background 180ms cubic-bezier(0.2, 0.7, 0.2, 1), color 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ar-pill:hover { background: #121315; color: #f2f2ef; }
.ar-pill.on { background: #f2f2ef; color: #0b0c0d; }
.ar-pill-id {
  font-size: 11px;
  letter-spacing: 0.2em;
}
.ar-pill-n {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* responsive */
@media (max-width: 900px) {
  .atlas-body { grid-template-columns: 1fr; }
  .atlas-grid { border-right: 0; border-bottom: 1px solid #23262a; }
  .atlas-ascii { font-size: 7px; }
}