/*
 * SC-02 星座詳細（固定星座図）専用のスタイル。`base.css` を読み込んだうえで追加する。
 * スマホ（375px）を基準に1カラムで組み、広い画面でだけ図と情報を横に並べる。
 */

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.constellation-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  color: #cbd6ed;
  list-style: none;
  font-size: 0.95rem;
}

.constellation-names .name-code {
  color: #9fb5df;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.constellation-layout {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.constellation-layout > .panel {
  margin-top: 0;
}

.constellation-chart-frame {
  width: 100%;
  margin-top: 1rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #2f426a;
  border-radius: 1rem;
  background: #01030a;
}

#constellation-chart {
  display: block;
  width: 100%;
  height: 100%;
  /* 図の上でのスクロールは許す。ドラッグ操作を持たない固定図なので奪う必要がない。 */
  touch-action: manipulation;
  user-select: none;
}

.line-toggle {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 0.6rem;
  margin-top: 0.75rem;
  cursor: pointer;
}

.line-toggle input {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  accent-color: #8fb8ff;
}

.line-toggle input:disabled {
  cursor: not-allowed;
}

.line-toggle:has(input:disabled) {
  color: #94a3c2;
  cursor: not-allowed;
}

.line-status {
  margin: 0.35rem 0 0;
  color: #b8c5df;
  font-size: 0.9rem;
}

.selected-star-name {
  margin-block: 0.5rem 0;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
}

.selected-star-magnitude {
  color: #cbd6ed;
  font-variant-numeric: tabular-nums;
}

.star-list {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.star-list--scroll {
  max-height: 22rem;
  overflow: auto;
}

.star-list button {
  width: 100%;
  border-width: 0 0 1px;
  border-radius: 0;
  color: #dce6fa;
  background: transparent;
  text-align: left;
}

.star-list button:hover,
.star-list button:focus-visible {
  background: #172440;
}

.constellation-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.constellation-index-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #2a3858;
  border-radius: 0.65rem;
  background: rgb(13 20 40 / 78%);
  text-decoration: none;
}

.constellation-index-list a:hover,
.constellation-index-list a:focus-visible {
  border-color: #8fb8ff;
  background: #172440;
}

.constellation-index-list .index-code {
  color: #9fb5df;
  font-size: 0.8rem;
  text-transform: uppercase;
}

@media (min-width: 60rem) {
  .constellation-layout {
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    align-items: start;
  }

  .constellation-layout > .chart-panel {
    grid-row: span 3;
  }
}