/* atlas-list-viewer.css
   Layout for rocket-atlas.js's #atlas-list / #atlas-viewer, replacing the
   old constellation-map (#atlas-viewport/#svg-container) and separate
   pose-card panel (#pose-card-panel). Reuses .atlas-container's existing
   3-column grid (sidebar / center / right) from sequence.css - this file
   only styles what's new, it doesn't redefine the grid itself. */

/* Center column: the grouped list replaces #atlas-viewport's contents.
   #atlas-list keeps the .atlas-viewport CSS class (for the shared panel
   background/border from sequence.css) but must fully override its flex/
   cursor/user-select rules, which were built for a pannable constellation
   canvas - not a scrollable text list. Without this override the list's
   .atlas-group children get laid out as flex row items (columns) instead
   of stacking vertically, and text becomes unselectable/grab-cursor'd. */
#atlas-list {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.25rem;
  cursor: default !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

.atlas-list-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.atlas-group {
  margin-bottom: 1.5rem;
}

.atlas-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--lhc-cyan);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}

.atlas-group-count {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.atlas-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.atlas-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background: rgba(8, 14, 28, 0.5);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--text-color);
  text-align: left;
  transition: background var(--transition-speed), border-color var(--transition-speed);
}

.atlas-row:hover {
  background: rgba(0, 240, 255, 0.06);
  border-color: rgba(0, 240, 255, 0.2);
}

.atlas-row.is-active {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--lhc-cyan);
}

.atlas-row.is-complete .atlas-row-english {
  color: var(--text-muted);
}

.atlas-row-figure {
  flex: 0 0 auto;
  width: 40px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pose-number-fallback {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.atlas-row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.atlas-row-english {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-row-sanskrit {
  font-size: 0.7rem;
  color: var(--particle-violet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tap-target audit: this was 22x22px, well under the ~44x44px touch
   target guideline, and every row renders TWO of these side by side
   (the completion check + the add-to-flight-plan button, see
   rocket-atlas.js's renderRow) separated only by the row's 0.75rem
   (12px) flex gap. A full 44px box on each would make their hit areas
   overlap into that shared 12px gap and into each other, so a true
   44px target isn't safely achievable here without first reworking the
   row layout (flagging that for a future pass). Grown to 32x32px
   instead - a real, ~45% larger touch target - which stays within the
   available gap with no overlap risk. */
.atlas-row-check {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lhc-cyan);
  font-size: 0.85rem;
  cursor: pointer;
}

.atlas-row.is-complete .atlas-row-check {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--lhc-cyan);
}

/* Right column: detail viewer replaces #pose-card-panel's contents */
#atlas-viewer {
  height: 100%;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.atlas-viewer-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

/* PoseRenderer's 'detail' preset renders at 320x384 intrinsic size - this
   slot is sized to match that aspect ratio (5:6) at a width that fits the
   right-column panel, rather than forcing the SVG into a small icon box
   (which caused it to overflow at its native size and overlap the layer
   toggles). The SVG's width/height attrs are still overridden below so it
   scales down cleanly on narrower viewports instead of clipping. */
.atlas-viewer-figure-slot {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 5 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.atlas-viewer-figure-slot svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

.atlas-viewer-titles {
  width: 100%;
}

.atlas-viewer-titles h3 {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.atlas-viewer-titles h4 {
  font-weight: 400;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.pose-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.atlas-layer-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem;
  border-radius: 10px;
  /* Rainbow/chakra gradient border: a slim conic ring rather than a heavy
     background wash, so it reads as an accent frame around the toggle
     group (root->crown, red->violet) without fighting the dark theme or
     making inactive buttons hard to read against it. */
  background:
    linear-gradient(var(--surface-color), var(--surface-color)) padding-box,
    conic-gradient(from 180deg,
      #F72525, #FF8C1A, #FFD166, #3DDC84, #4EA8FF, #5B5BE8, #9D4EDD, #F72525
    ) border-box;
  border: 1px solid transparent;
}

/* Tap-target audit: was ~25px tall (0.3rem padding + 0.7rem text), under
   the ~44px guideline. Unlike .atlas-row-check these wrap freely with
   room around them (0.4rem gap, no fixed adjacent sibling), so a full
   44px min-height is safe here with no overlap risk. */
.layer-toggle {
  --layer-color: var(--lhc-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  background: rgba(8, 14, 28, 0.6);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.layer-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: 0.55;
  transition: opacity var(--transition-speed), box-shadow var(--transition-speed);
}

.layer-toggle:hover {
  border-color: var(--layer-color);
  color: var(--text-color);
}

.layer-toggle.is-active {
  border-color: var(--layer-color);
  color: var(--layer-color);
  background: color-mix(in srgb, var(--layer-color) 14%, rgba(8, 14, 28, 0.6));
}

.layer-toggle.is-active .layer-toggle-dot {
  opacity: 1;
  box-shadow: 0 0 6px 1px var(--layer-color);
}

.stage-trajectory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.stage-step {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.stage-step.active {
  color: var(--lhc-cyan);
  background: rgba(0, 240, 255, 0.12);
}

.stage-step.passed {
  color: var(--particle-violet);
}

.stage-arrow {
  opacity: 0.5;
}

.pose-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
}

.data-block h5 {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.why-here-block {
  border-left: 2px solid var(--plasma-magenta);
  padding-left: 0.7rem;
}

.clean-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.clean-list li::before {
  content: '› ';
  color: var(--lhc-cyan);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Tap-target audit: was ~25px tall, under the ~44px guideline. These
   wrap freely in .chip-row with 0.4rem gap around them (unlike
   .atlas-row-check's fixed neighbors), so growing to a 44px min-height
   is safe here. Applies to .chip-static too (non-clickable variant,
   cursor overridden separately below) - harmless since it only affects
   sizing/alignment, not interactivity. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: rgba(157, 78, 221, 0.15);
  border: 1px solid rgba(157, 78, 221, 0.4);
  color: var(--text-color);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.chip-static {
  cursor: default;
  opacity: 0.7;
}

.holistic-lens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.holistic-lens {
  border-left: 2px solid var(--lens-color);
  background: rgba(255, 255, 255, 0.035);
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.4;
}

.holistic-lens strong {
  color: var(--lens-color);
  display: block;
  font-family: 'Share Tech Mono', monospace;
  margin-bottom: 0.18rem;
  text-transform: uppercase;
}

.holistic-lens span {
  color: var(--text-muted);
}

.pose-navigation {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.pose-navigation .btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .holistic-lens-grid {
    grid-template-columns: 1fr;
  }
  .atlas-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #atlas-list, #atlas-viewer {
    height: auto;
    max-height: 70vh;
  }
}