/* ============ System detail page — shares tokens/components from style.css ============ */

body.detail-page {
  min-height: 100%;
  /* style.css sets body{overflow-x:hidden}, which per spec forces the OTHER
     axis's computed overflow to 'auto' too (a lone 'visible' axis isn't
     honored once its sibling axis is constrained) — body silently becomes
     ITS OWN scroll container, nested inside html's (overflow-y:scroll).
     Two independent scroll containers breaks position:sticky (it sticks to
     the wrong one). Detail pages scroll normally through html alone, so
     reset BOTH axes here to fully cancel body as a scroll container. */
  overflow: visible;
}

/* ── Warm ambient wash: pure CSS, no WebGL cost — softens the flat-black
   canvas now that the nebula glow shader is gone, without reintroducing
   the "silk" particle flow the homepage has. Sits above the canvas
   (z-index:0, same layer, later in DOM) but below page content (z-index:1). */
.detail-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% -6%, rgba(255, 154, 60, .16), transparent 60%),
    radial-gradient(700px 500px at 88% 30%, rgba(255, 107, 26, .08), transparent 65%);
}

.detail-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  background: rgba(3,3,3,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.detail-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--txt-dim); text-decoration: none;
  transition: color .25s;
}
.detail-back:hover { color: var(--amber-hi); }

.detail-wrap {
  position: relative; z-index: 1; /* canvas#bg is position:fixed z-index:0 — without
    this, .detail-wrap is a plain static block and paints BEHIND the (opaque) canvas
    per CSS stacking rules, making all hero/section text invisible */
  max-width: 980px; margin: 0 auto;
  padding: clamp(20px, 3.5vh, 40px) clamp(20px, 5vw, 24px) clamp(80px, 12vh, 140px);
}

/* ── Hero ── */
.detail-hero { margin-bottom: clamp(36px, 7vh, 64px); }
.detail-hero .sys-id {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; color: var(--amber);
}
.detail-hero h1 {
  margin: clamp(10px, 2vh, 18px) 0 clamp(10px, 2vh, 16px);
  font-family: var(--font-en); font-size: clamp(28px, 5vw, 44px); font-weight: 500; letter-spacing: .02em;
}
.detail-hero h1 span {
  display: block; margin-top: 6px;
  font-size: clamp(13px, 2vw, 16px); font-weight: 400; color: var(--txt-dim);
}
.detail-hero .detail-lede {
  color: var(--txt-dim); font-size: 15px; line-height: 1.9;
  margin-bottom: clamp(16px, 3vh, 26px);
}

/* ── Gallery: single carousel holds every screenshot now — no more separate
   static shot boxes duplicating what the carousel already covers ── */
.detail-gallery { margin-bottom: clamp(40px, 7vh, 64px); }
.detail-gallery .shot-carousel {
  position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, rgba(255,170,80,.08), rgba(255,255,255,.02) 42%, rgba(255,110,25,.05)), rgba(8,5,3,.6);
}

/* ── Hero carousel: manual arrows + dots, no auto-advance.
   object-fit:contain (not cover) — these are real UI screenshots at varying
   native aspect ratios; cover would crop/zoom into the edges of the actual
   dashboard content. contain always shows the whole screenshot un-cropped,
   letterboxed against the card's own background if the ratio doesn't match. ── */
.shot-carousel .carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .5s ease;
}
.shot-carousel .carousel-slide.active { opacity: 1; }
.shot-carousel .carousel-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 9px; z-index: 2;
}
.shot-carousel .carousel-dots .dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: rgba(243,234,217,.35);
  transition: background .25s, transform .25s;
}
.shot-carousel .carousel-dots .dot.active { background: var(--amber); transform: scale(1.3); }
.shot-carousel .carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(8,5,3,.55); backdrop-filter: blur(6px);
  color: var(--txt); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, color .25s, background .25s;
}
.shot-carousel .carousel-arrow:hover { border-color: var(--amber); color: var(--amber-hi); background: rgba(8,5,3,.8); }
.shot-carousel .carousel-arrow.prev { left: 14px; }
.shot-carousel .carousel-arrow.next { right: 14px; }

/* ── Content sections ── */
.detail-section { margin-bottom: clamp(32px, 6vh, 56px); }
.detail-section h2 {
  font-family: var(--font-en); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: clamp(14px, 2.5vh, 20px);
}
.detail-section .glass {
  padding: clamp(20px, 3.5vh, 30px);
}
.quant-diagram-card { padding: clamp(14px, 3vh, 24px); margin-bottom: clamp(14px, 2.5vh, 20px); }
.quant-diagram-card svg { width: 100%; height: auto; display: block; }
.detail-section p { color: var(--txt-dim); font-size: 14px; line-height: 1.9; }
.detail-section p + p { margin-top: 10px; }

.detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vh, 22px); }

.detail-meta-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.detail-meta-list li {
  display: flex; gap: 14px; font-size: 13px; color: var(--txt-dim); line-height: 1.7;
}
.detail-meta-list li b {
  flex: 0 0 auto; min-width: 84px; color: var(--txt); font-weight: 500; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding-top: 2px;
}
.detail-meta-list .stat-note {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--amber);
  opacity: .75; white-space: nowrap;
}

/* ── Footer CTA ── */
.detail-cta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: clamp(20px, 3.5vh, 30px);
  border-top: 1px solid var(--line); margin-top: clamp(32px, 6vh, 56px); padding-top: clamp(24px, 4vh, 36px);
}
.detail-cta p { color: var(--txt-dim); font-size: 13px; }

@media (max-width: 720px) {
  .detail-grid-2 { grid-template-columns: 1fr; }
}