/* ══════════════════════════════════════════════════════════
   TradesOnSmash — gallery.css   Ed. 04
   The Arsenal: rotating spotlight + expanding lightbox.

   Six equal tabs feed one stage, so every indicator gets the star
   slot in turn and none of them reads as a supporting act.

   Accent colour is passed down as --ac from [data-accent], so a
   tab, its panel, its chips and its creed all glow as one without
   six near-identical rule blocks.
   ══════════════════════════════════════════════════════════ */

[data-accent="green"]   { --ac: var(--green);       --ac-rgb: 95,212,163; }
[data-accent="purple"]  { --ac: var(--purple-lift); --ac-rgb: 166,122,198; }
[data-accent="magenta"] { --ac: var(--magenta);     --ac-rgb: 216,127,240; }

/* ─── SPOTLIGHT ────────────────────────────────────────────
   Six equal tabs feeding one stage. The rail is the only
   navigation; the stage is the only star slot -- so every tool
   gets the same treatment, just at a different moment.        */

.spot { margin-top: 2.4rem; }

.spot__rail {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.spot__tabs { display: flex; flex-wrap: wrap; gap: .5rem; }

.spot__tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .5rem .9rem;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hair);
  color: var(--text-dim);
  font: inherit; cursor: pointer; text-align: left;
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, box-shadow .25s ease;
}
.spot__tab b {
  font-family: var(--f-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.spot__tab span {
  font-family: var(--f-mono); font-size: .54rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint);
}
.spot__tab:hover { border-color: rgba(var(--ac-rgb), .5); background: rgba(var(--ac-rgb), .07); }
.spot__tab[aria-selected="true"] {
  background: rgba(var(--ac-rgb), .13);
  border-color: var(--ac);
  box-shadow: 0 0 18px -4px rgba(var(--ac-rgb), .55);
}
.spot__tab[aria-selected="true"] b    { color: var(--ac); text-shadow: 0 0 12px rgba(var(--ac-rgb), .5); }
.spot__tab[aria-selected="true"] span { color: var(--ac); opacity: .8; }

/* ─── AUTOPLAY CONTROL (WCAG 2.2.2) ───────────────────────
   Anything that moves for more than five seconds needs a
   visible, keyboard-reachable stop. This is that stop.       */

.spot__ctrl { display: flex; align-items: center; gap: .7rem; }

.spot__pause {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--hair);
  color: var(--text-dim); cursor: pointer;
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.spot__pause:hover { border-color: var(--green); color: var(--green); background: rgba(95,212,163,.08); }
/* while paused the control is the way back, so let it read as live */
.spot__pause[aria-pressed="true"] { border-color: rgba(95,212,163,.5); color: var(--green); }

/* pause glyph -> play triangle when paused; drawn, never typed */
.spot__pauseIcon {
  width: 8px; height: 9px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.spot__pause[aria-pressed="true"] .spot__pauseIcon {
  width: 0; height: 0;
  border-left: 8px solid currentColor; border-right: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* The progress bar is the only always-on signal that the rotation is
   live, so it has to be legible at a glance -- a 2px hairline was not.
   The rail keeps its width when idle so pausing does not shift the
   controls sideways. */
.spot__progress {
  width: 110px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.14); overflow: hidden;
  transition: opacity .25s ease;
}
.spot__progress i {
  display: block; height: 100%; width: 0%;
  border-radius: 3px;
  background: var(--ac, var(--green));
  box-shadow: 0 0 12px rgba(var(--ac-rgb, 95,212,163), .9);
}
.spot__pause[aria-pressed="true"] + .spot__progress { opacity: .4; }

/* ─── STAGE ────────────────────────────────────────────── */

.spot__stage { position: relative; }

.spot__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  /* A floor keeps the stage from collapsing as you rotate between a
     tall capture and a short one, but too high a floor pads the
     shorter panels with dead space. 400 is just above the tallest
     info column, so nothing is stretched to reach it. */
  min-height: 400px;
  max-height: 620px;
  border-color: rgba(var(--ac-rgb), .34);
  box-shadow:
    0 30px 70px -34px rgba(0,0,0,.9),
    0 0 46px -14px rgba(var(--ac-rgb), .42),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.spot__panel[hidden] { display: none; }

/* The panel's height is set by whichever column is taller -- usually the
   copy. Centre the chart in whatever space that leaves instead of
   pinning it to the top, so wide captures sit balanced rather than
   stranded above a band of dead space. */
.spot__view {
  position: relative; display: grid; place-items: center;
  padding: 0; border: 0; width: 100%;
  background: #05050A; cursor: pointer; font: inherit; color: inherit;
  border-right: 1px solid var(--hair);
  overflow: hidden;
}
/* contain, not cover: these are charts, and cropping the axis or the
   oscillator pane off the bottom loses the actual evidence */
.spot__img {
  width: 100%; height: auto;
  max-height: 100%;
  object-fit: contain;
  align-self: center; justify-self: center;
  grid-area: 1 / 1;
  filter: saturate(.95) contrast(1.04);
  transition: transform .6s cubic-bezier(.2,.8,.3,1), filter .4s ease;
}
.spot__view:hover .spot__img,
.spot__view:focus-visible .spot__img { transform: scale(1.03); filter: saturate(1.1) contrast(1.08); }

.spot__scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(var(--ac-rgb), .06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, transparent 62%, rgba(5,5,10,.7) 100%);
  opacity: .8; transition: opacity .4s ease;
}
.spot__view:hover .spot__scan { opacity: .45; }

.spot__expand {
  position: absolute; right: .8rem; bottom: .8rem;
  display: flex; align-items: center; gap: .4rem;
  padding: .36rem .75rem; border-radius: 999px;
  background: rgba(7,7,10,.82);
  border: 1px solid rgba(var(--ac-rgb), .55);
  color: var(--ac);
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  transform: translateY(6px); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease, box-shadow .35s ease;
}
.spot__expand::before {
  content: ""; width: 9px; height: 9px;
  border: 1px solid currentColor; border-radius: 2px;
  box-shadow: 3px -3px 0 -1px currentColor;
}
.spot__view:hover .spot__expand,
.spot__view:focus-visible .spot__expand {
  transform: translateY(0); opacity: 1;
  box-shadow: 0 0 18px rgba(var(--ac-rgb), .45);
}

/* ─── STAGE COPY ───────────────────────────────────────── */

/* The chart column sets the panel height, so the copy column often has
   spare room below the creed. The prose takes that slack and the creed
   pins to the bottom, so the copy spans the full panel and reads as a
   deliberate column rather than stopping in a ragged hole. */
.spot__info {
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  overflow-y: auto;
}
.spot__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1;
  text-transform: uppercase; margin: 0 0 .35rem;
  color: var(--ac); text-shadow: 0 0 20px rgba(var(--ac-rgb), .45);
}
.spot__role {
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 1.1rem;
}
.spot__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.spot__chips li {
  padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid rgba(var(--ac-rgb), .4);
  background: rgba(var(--ac-rgb), .07);
  color: var(--ac);
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.spot__prose { flex: 1; }
.spot__prose p { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.62; color: var(--text-dim); }
.spot__prose p:last-child { margin-bottom: 0; }

.spot__creed {
  /* auto top margin pins the creed to the bottom of whatever room the
     chart column leaves, so the copy fills the panel evenly */
  margin: auto 0 0; padding: .8rem 1rem;
  border-left: 3px solid var(--ac); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(var(--ac-rgb), .08);
  color: var(--ac);
  font-size: .95rem; font-weight: 500; line-height: 1.45;
}

/* ─── LIGHTBOX ─────────────────────────────────────────── */

.lb {
  width: min(1180px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid rgba(var(--ac-rgb, 166,122,198), .45);
  border-radius: var(--r-lg);
  background: var(--void-2);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 40px 120px -30px #000, 0 0 60px -20px rgba(var(--ac-rgb, 166,122,198), .5);
}
.lb::backdrop { background: rgba(4,4,8,.88); backdrop-filter: blur(6px); }

.lb__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .9rem;
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid var(--hair);
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
}
.lb__bar b { color: var(--ac); text-shadow: 0 0 10px rgba(var(--ac-rgb), .5); }
.lb__nav { display: flex; align-items: center; gap: .4rem; }
.lb__btn {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--hair);
  color: var(--text); font: inherit; font-size: .8rem; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lb__btn:hover { background: rgba(var(--ac-rgb), .18); border-color: var(--ac); color: var(--ac); }
/* the X is drawn, not typed: no glyph to go missing or mis-render */
#lbClose { position: relative; }
#lbClose::before, #lbClose::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.5px; background: currentColor; border-radius: 1px;
}
#lbClose::before { transform: translate(-50%, -50%) rotate(45deg); }
#lbClose::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.lb__count { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }

.lb__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  max-height: calc(92vh - 46px);
}

.lb__stage {
  position: relative; display: grid; place-items: center;
  padding: 1rem; min-height: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(var(--ac-rgb), .14), transparent 68%),
    #05050A;
  border-right: 1px solid var(--hair);
}
.lb__img {
  max-width: 100%; max-height: calc(92vh - 82px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 0 40px -10px rgba(var(--ac-rgb), .4);
}

.lb__side { padding: clamp(1.2rem, 2.4vw, 1.9rem); overflow-y: auto; min-height: 0; }
.lb__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1;
  text-transform: uppercase; margin: 0 0 .4rem;
  color: var(--ac); text-shadow: 0 0 20px rgba(var(--ac-rgb), .45);
}
.lb__role {
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 1.2rem;
}
.lb__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.lb__chips li {
  padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid rgba(var(--ac-rgb), .4);
  background: rgba(var(--ac-rgb), .07);
  color: var(--ac);
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.lb__prose p { margin: 0 0 1rem; font-size: .93rem; line-height: 1.68; color: var(--text-dim); }
.lb__prose p:last-child { margin-bottom: 0; }

.lb__creed {
  margin: 1.4rem 0 0; padding: .9rem 1.1rem;
  border-left: 3px solid var(--ac); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(var(--ac-rgb), .08);
  color: var(--ac);
  font-size: 1rem; font-weight: 500; line-height: 1.45;
}

/* ─── RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 980px) {
  /* stack the stage: chart on top, copy beneath */
  .spot__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; }
  .spot__view { border-right: 0; border-bottom: 1px solid var(--hair); }
  .spot__img { max-height: 340px; }
}
@media (max-width: 900px) {
  .lb__grid { grid-template-columns: minmax(0, 1fr); max-height: none; }
  .lb__stage { border-right: 0; border-bottom: 1px solid var(--hair); }
  .lb__img { max-height: 46vh; }
}
@media (max-width: 640px) {
  .lb { width: 96vw; }
  .spot__rail { gap: .7rem; }
  .spot__tabs { width: 100%; }
  .spot__tab { flex: 1 1 calc(50% - .5rem); }
}

/* Touch has no hover, so a hover-only affordance is invisible. */
@media (hover: none), (pointer: coarse) {
  .spot__expand { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .spot__img, .spot__scan, .spot__expand { transition: none !important; }
  .spot__view:hover .spot__img,
  .spot__view:focus-visible .spot__img { transform: none; }
  .spot__expand { transform: none; opacity: 1; }
}