/* The gravitational-wave spectrum (explore/spectrum.html) */

.spec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.spec-hint { margin: 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--text-3); }
.spec-body { padding-bottom: clamp(36px, 5vw, 64px); }

/* ---------- diagram ---------- */
.spec-figure { margin: 0; }
.spec-scroll {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: 22px;
  background:
    radial-gradient(60% 80% at 75% 0%, rgb(var(--violet-rgb) / .07), transparent 70%),
    rgb(var(--surface-rgb) / .28);
  scrollbar-width: thin;
}
.spec-scroll:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.spec-svg { display: block; width: 100%; min-width: 1000px; height: auto; padding: 14px 6px 10px; box-sizing: content-box; touch-action: pan-x pan-y; }

.spec-grid line { stroke: var(--line); stroke-width: 1; }
.spec-grid line.major { stroke: var(--line-2); }
.spec-caption {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  fill: var(--text-3);
}
.spec-axis line { stroke: var(--line-2); stroke-width: 1.2; }
.spec-axis .tick.major { stroke: var(--text-3); }
.spec-axis text { font-family: var(--font-mono); text-anchor: middle; }
.tick-f { font-size: 12px; font-weight: 500; fill: var(--text-2); }
.tick-p { font-size: 10.5px; fill: var(--text-3); }

/* bands */
.sb { cursor: pointer; outline: none; }
.sb rect { stroke-width: 1.2; transition: fill .2s ease, stroke .2s ease, opacity .25s ease; }
.sb text {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  dominant-baseline: central; fill: var(--text); pointer-events: none; transition: fill .2s ease, opacity .25s ease;
}
.sb text.out { fill: var(--text-2); font-weight: 500; }
.sb--detector rect { fill: rgb(var(--cyan-rgb) / .13); stroke: rgb(var(--cyan-rgb) / .6); }
.sb--source rect { fill: rgb(var(--violet-rgb) / .14); stroke: rgb(var(--violet-rgb) / .6); }
.sb--primordial rect { fill: rgb(var(--amber-rgb) / .07); stroke: rgb(var(--amber-rgb) / .5); stroke-dasharray: 5 4; }
.sb--primordial text { fill: var(--text-2); font-weight: 500; }

.sb:hover rect, .sb.is-active rect { stroke-width: 1.8; }
.sb--detector:hover rect, .sb--detector.is-active rect { fill: rgb(var(--cyan-rgb) / .3); stroke: var(--cyan); filter: drop-shadow(0 0 6px rgb(var(--cyan-rgb) / .55)); }
.sb--source:hover rect, .sb--source.is-active rect { fill: rgb(var(--violet-rgb) / .32); stroke: var(--violet); filter: drop-shadow(0 0 6px rgb(var(--violet-rgb) / .55)); }
.sb--primordial:hover rect, .sb--primordial.is-active rect { fill: rgb(var(--amber-rgb) / .14); stroke: var(--amber); filter: none; }
.sb:hover text.out, .sb.is-active text.out { fill: var(--text); }
.sb:focus-visible rect { stroke-width: 2.6; }
.spec-svg.has-active .sb:not(.is-active) rect { opacity: .38; }
.spec-svg.has-active .sb:not(.is-active) text { opacity: .5; }

/* pointer readout */
.spec-cursor { stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.spec-cursor.is-on { opacity: .7; }
.spec-readout {
  position: absolute; z-index: 2; pointer-events: none; max-width: 260px;
  padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgb(var(--bg-rgb) / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--text-2);
  box-shadow: 0 10px 30px -14px rgb(0 0 0 / .6);
}
.spec-readout strong { color: var(--text); font-weight: 500; }

.spec-figcaption { margin: 12px 4px 0; font-size: .86rem; color: var(--text-3); }

/* ---------- info panel ---------- */
.spec-panel { margin-top: 22px; padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 34px); border-radius: 22px; min-height: 196px; }
.spec-panel .band-card { padding: 0; border: 0; }
.spec-panel .band-card > .band-blurb { font-size: 1.04rem; }
.spec-intro p { margin: 0 0 8px; color: var(--text-2); max-width: 70ch; }
.spec-intro p:first-child { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); letter-spacing: -.02em; }
.spec-tour-nav[hidden] { display: none; }
.spec-tour-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.spec-tour-nav .btn { padding: 9px 16px; font-size: 14px; }
.spec-tour-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); min-width: 4.5em; text-align: center; }
.spec-tour-end {
  margin-left: auto; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px;
}
.spec-tour-end:hover { color: var(--cyan); }
.spec-tour-end:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* ---------- band cards (panel + reference list) ---------- */
.band-card { padding: 22px 0 24px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.band-card:target { background: linear-gradient(90deg, rgb(var(--cyan-rgb) / .06), transparent 70%); }
.band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.band-status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--text-3); }
.band-name { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.025em; }
.band-range { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan); }
.band-period { color: var(--text-3); }
.band-blurb { margin: 0 0 12px; color: var(--text-2); max-width: 72ch; }
.band-example {
  margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 2px solid rgb(var(--amber-rgb) / .6);
  color: var(--text-2); font-size: .95rem; max-width: 72ch;
}
.band-detail { margin: 0 0 14px; max-width: 72ch; }
.band-detail summary {
  cursor: pointer; width: fit-content; font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan);
  list-style: none;
}
.band-detail summary::-webkit-details-marker { display: none; }
.band-detail summary::before { content: "+ "; }
.band-detail[open] summary::before { content: "− "; }
.band-detail summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.band-detail p { margin: 10px 0 0; color: var(--text-2); font-size: .95rem; }
.band-card a:not(.link-arrow) { color: var(--text); text-decoration-color: rgb(var(--cyan-rgb) / .5); text-underline-offset: 3px; }
.band-card a:not(.link-arrow):hover { color: var(--cyan); }
.band-card .link-arrow { margin-top: 2px; }

/* ---------- reference list ---------- */
.spec-all { padding-top: clamp(56px, 7vw, 96px); }
.spec-all .section-head { margin-bottom: 18px; }
.spec-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 72px); }
.spec-col-title {
  margin: 18px 0 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}

/* ---------- small screens ---------- */
.spec-swipe { display: none; margin: 0 4px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
@media (max-width: 1040px) {
  .spec-swipe { display: block; }
}
@media (max-width: 860px) {
  .spec-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sb rect, .sb text, .spec-cursor { transition: none; }
}