/* =====================================================================
   THE PARALLAX v10
   ===================================================================== */

/* ---- Ambient edge glow ---- */
.plx-ambient { position:fixed;top:0;bottom:0;width:120px;z-index:50;pointer-events:none;opacity:0;transition:opacity .8s }
.plx-ambient-left { left:0 }
.plx-ambient-right { right:0 }
.parallax-article.has-s .plx-ambient { opacity:1 }
.parallax-article.has-s .plx-ambient-left { background:radial-gradient(ellipse at left center,rgba(29,158,117,.06) 0%,transparent 70%) }
.parallax-article.has-s .plx-ambient-right { background:radial-gradient(ellipse at right center,rgba(29,158,117,.06) 0%,transparent 70%) }
.parallax-article.has-c .plx-ambient { opacity:1 }
.parallax-article.has-c .plx-ambient-left { background:radial-gradient(ellipse at left bottom,rgba(55,138,221,.05) 0%,transparent 70%) }
.parallax-article.has-c .plx-ambient-right { background:radial-gradient(ellipse at right bottom,rgba(55,138,221,.05) 0%,transparent 70%) }
.parallax-article.has-d .plx-ambient { opacity:1 }
.parallax-article.has-d .plx-ambient-left { background:radial-gradient(ellipse at left bottom,rgba(186,117,23,.05) 0%,transparent 70%) }
.parallax-article.has-d .plx-ambient-right { background:radial-gradient(ellipse at right bottom,rgba(186,117,23,.05) 0%,transparent 70%) }
.parallax-article.has-s.has-c .plx-ambient-left { background:radial-gradient(ellipse at left top,rgba(29,158,117,.05) 0%,transparent 50%),radial-gradient(ellipse at left bottom,rgba(55,138,221,.04) 0%,transparent 60%) }
.parallax-article.has-s.has-c .plx-ambient-right { background:radial-gradient(ellipse at right top,rgba(29,158,117,.05) 0%,transparent 50%),radial-gradient(ellipse at right bottom,rgba(55,138,221,.04) 0%,transparent 60%) }

/* ---- Device (right side, vertically centered) ---- */
.plx-device {
  position:fixed;top:50%;right:max(calc((100vw - 720px)/2 - 70px),16px);transform:translateY(-50%);
  z-index:200;display:flex;flex-direction:column;gap:7px;padding:9px;
  border-radius:22px;border:0.5px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.55);backdrop-filter:blur(16px);
  font-family:var(--font-mono);transition:border-color .4s,box-shadow .4s;
  box-shadow:0 0 20px rgba(255,255,255,.04),0 0 40px rgba(255,255,255,.02);
}
.plx-device.glow-s { border-color:rgba(29,158,117,.4);box-shadow:0 0 24px rgba(29,158,117,.08) }
.plx-device.glow-c { border-color:rgba(55,138,221,.4);box-shadow:0 0 24px rgba(55,138,221,.08) }
.plx-device.glow-d { border-color:rgba(186,117,23,.4);box-shadow:0 0 24px rgba(186,117,23,.08) }

.plx-dev-btn {
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .3s;position:relative;
}
.plx-dev-btn svg { width:16px;height:16px;fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;transition:stroke .3s }
.plx-dev-btn:hover { background:rgba(255,255,255,.05) }
.plx-dev-btn:hover svg { stroke:rgba(255,255,255,.4) }
.plx-dev-btn.on-c { border-color:rgba(55,138,221,.5);background:rgba(55,138,221,.1) }
.plx-dev-btn.on-c svg { stroke:#85B7EB }
.plx-dev-btn.on-s { border-color:rgba(29,158,117,.5);background:rgba(29,158,117,.1) }
.plx-dev-btn.on-s svg { stroke:#5DCAA5 }
.plx-dev-btn.on-d { border-color:rgba(186,117,23,.5);background:rgba(186,117,23,.1) }
.plx-dev-btn.on-d svg { stroke:#EF9F27 }

@keyframes plxPulse { 0%,100%{opacity:0} 50%{opacity:1} }
.plx-dev-btn.on-c::after,.plx-dev-btn.on-s::after,.plx-dev-btn.on-d::after {
  content:'';position:absolute;width:4px;height:4px;border-radius:50%;bottom:2px;right:2px;animation:plxPulse 2s infinite
}
.plx-dev-btn.on-c::after { background:#378ADD }
.plx-dev-btn.on-s::after { background:#1D9E75 }
.plx-dev-btn.on-d::after { background:#BA7517 }
.plx-dev-label { font-size:7px;color:rgba(255,255,255,.12);text-align:center;letter-spacing:.1em }

/* ---- Signal remote (left side, vertically centered) ---- */
.plx-sig-remote {
  position:fixed;left:max(calc((100vw - 720px)/2 - 160px),16px);top:50%;transform:translateY(-50%);
  z-index:200;display:none;flex-direction:column;gap:6px;padding:10px;
  border-radius:20px;border:0.5px solid rgba(29,158,117,.2);
  background:rgba(0,0,0,.5);backdrop-filter:blur(12px);
}
.parallax-article.has-s .plx-sig-remote { display:flex }

.plx-sig-btn {
  font-size:.6rem;padding:5px 10px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(29,158,117,.25);background:transparent;
  color:rgba(93,202,165,.6);font-family:var(--font-body);transition:all .2s;white-space:nowrap;
}
.plx-sig-btn.active { background:#1D9E75;color:#E1F5EE;border-color:#1D9E75 }
.plx-sig-btn:hover:not(.active) { border-color:rgba(29,158,117,.5);color:#5DCAA5 }
.plx-sig-peek-label { font-size:.5rem;color:rgba(29,158,117,.3);text-align:center;letter-spacing:.05em;margin-top:4px }

/* ---- Left-aligned article header ---- */
.parallax-article .article-header { text-align:left }
.parallax-article .article-header-inner { text-align:left }
.parallax-article .article-meta-top { justify-content:flex-start }
.parallax-article .article-header h1 { text-align:left }
.parallax-article .article-subtitle { text-align:left }
.parallax-article .article-byline { text-align:left }

/* ---- Tags ---- */
.plx-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem }
.plx-tag-link {
  font-size:.65rem;padding:3px 10px;border-radius:14px;
  border:0.5px solid var(--rule);color:var(--text-dim);
  text-decoration:none;transition:all .2s;font-family:var(--font-body);
  text-transform:capitalize;letter-spacing:.03em;
}
.plx-tag-link:hover { border-color:var(--accent-dim);color:var(--accent) }

/* ---- Article zone ---- */
.plx-art-zone { position:relative }

/* ---- Paragraph wrapper ---- */
.plx-pw { position:relative;margin-bottom:1.25rem;transition:background .4s;border-radius:2px;padding:2px 0 }
.plx-pw p { font-size:1.02rem;line-height:1.85;color:var(--text);margin:0;transition:filter .4s,opacity .4s,background .4s }
.parallax-article.has-s .plx-pw p { filter:blur(5px);opacity:.12 }
.parallax-article.has-s .plx-pw p.peek { filter:none;opacity:1;transition:filter .12s,opacity .12s }

/* Data highlight  - orange tint on paragraphs that have citation data */
/* Data highlight - specific citation text turns orange */
.plx-data-hl { color: #EF9F27; transition: color 0.3s; }

/* ---- Signal overlay (per paragraph, vertically centered) ---- */
.plx-sig-text {
  display:none;position:absolute;inset:0;z-index:5;
  font-family:var(--font-body);font-size:1.02rem;line-height:1.85;
  color:var(--text);padding-left:14px;border-left:2px solid rgba(29,158,117,.3);
  pointer-events:none;transition:opacity .2s;
  display:none;align-items:center;
}
.parallax-article.has-s .plx-sig-text { display:flex }
.plx-sig-text.faded { opacity:0 }
.plx-sig-text-inner { width:100% }

/* ---- Lower zone (FIXED to bottom 70% of viewport) ---- */
.plx-lower-fixed {
  display:none;position:fixed;bottom:0;left:0;right:0;height:45vh;z-index:100;
  background:rgba(8,8,12,.96);backdrop-filter:blur(12px);
  border-top:1px solid rgba(55,138,221,.15);
  flex-direction:column;overscroll-behavior:contain;
}
.parallax-article.has-bottom ~ .plx-lower-fixed, body.plx-bottom-active .plx-lower-fixed { display:flex }

.plx-lower-inner {
  max-width:720px;width:100%;margin:0 auto;display:flex;flex:1;min-height:0;
}

/* Contributors (left 70%) */
.plx-contrib {
  flex:7;display:flex;flex-direction:column;font-family:var(--font-body);min-height:0;
}

.plx-contrib-scroll {
  flex:1;overflow-y:auto;padding:12px 1.5rem;min-height:0;overscroll-behavior:contain;
}
.plx-contrib-scroll::-webkit-scrollbar { width:3px }
.plx-contrib-scroll::-webkit-scrollbar-thumb { background:rgba(55,138,221,.12);border-radius:2px }

.plx-ci-input-fixed {
  padding:10px 1.5rem;border-top:0.5px solid var(--rule-light);flex-shrink:0;
}

/* Data (right 30%, right-aligned text) */
.plx-data-panel {
  display:none;flex:3;overflow-y:auto;padding:16px 14px;
  border-left:1px solid rgba(186,117,23,.12);font-family:var(--font-mono);text-align:right;
}
body.plx-d-active .plx-data-panel { display:block }
body.plx-d-active:not(.plx-c-active) .plx-contrib { display:none }
body.plx-d-active:not(.plx-c-active) .plx-data-panel { flex:1 }
.plx-data-panel::-webkit-scrollbar { width:3px }
.plx-data-panel::-webkit-scrollbar-thumb { background:rgba(186,117,23,.12);border-radius:2px }

/* ---- Contributor items ---- */
.plx-ci { padding:10px 0;border-bottom:0.5px solid var(--rule-light) }
.plx-ci:last-of-type { border-bottom:none }
.plx-ci-head { display:flex;align-items:center;gap:7px;margin-bottom:5px }
.plx-ci-av { width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.56rem;font-weight:500;background:rgba(55,138,221,.15);color:#85B7EB }
.plx-ci-av.counter { background:rgba(186,117,23,.15);color:#EF9F27 }
.plx-ci-av.support { background:rgba(29,158,117,.15);color:#5DCAA5 }
.plx-ci-name { font-size:.7rem;font-weight:500;color:var(--text) }
.plx-ci-role { font-size:.56rem;color:var(--text-dim) }
.plx-ci-tag { font-size:.5rem;padding:2px 6px;border-radius:10px;margin-left:auto;font-weight:500;background:rgba(55,138,221,.12);color:#85B7EB }
.plx-ci-tag.counter { background:rgba(186,117,23,.12);color:#EF9F27 }
.plx-ci-tag.support { background:rgba(29,158,117,.12);color:#5DCAA5 }
.plx-ci-body { font-size:.78rem;line-height:1.65;color:var(--text-muted) }
.plx-ci-acts { display:flex;gap:10px;margin-top:7px }
.plx-ci-acts span { font-size:.6rem;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;gap:3px;transition:color .2s }
.plx-ci-acts span:hover { color:#85B7EB }
.plx-ci-acts svg { width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5 }

.plx-ci-input { padding:10px 0;border-top:0.5px solid var(--rule-light) }
.plx-ci-input textarea { width:100%;border:0.5px solid var(--rule-light);border-radius:8px;padding:6px 8px;font-size:.7rem;font-family:var(--font-body);resize:none;background:rgba(255,255,255,.03);color:var(--text) }
.plx-ci-input-acts { display:flex;gap:5px;margin-top:5px }
.plx-ci-input-acts button { font-size:.56rem;padding:3px 8px;border-radius:8px;cursor:pointer;border:0.5px solid var(--rule-light);background:transparent;color:var(--text-dim);font-family:var(--font-body) }
.plx-ci-input-acts button:hover { border-color:#378ADD;color:#85B7EB }

.plx-bottom-lenses { display:flex;gap:12px;margin-top:12px;padding-top:12px;border-top:0.5px solid var(--rule-light);justify-content:space-around }
.plx-bottom-lens { font-family:var(--font-body);font-size:.6rem;color:var(--text-dim);display:flex;align-items:center;gap:4px;cursor:pointer;transition:color .2s }
.plx-bottom-lens:hover { color:var(--text-muted) }
.plx-bottom-lens svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5 }

/* ---- Data items (right-aligned) ---- */
.plx-data-focus { font-family:var(--font-body);font-size:.56rem;color:rgba(186,117,23,.4);letter-spacing:.04em;margin-bottom:8px;font-style:italic }
.plx-di { padding:5px 0;border-bottom:0.5px solid rgba(186,117,23,.08);font-size:.6rem }
.plx-di:last-child { border-bottom:none }
.plx-di-label { color:#BA7517;font-weight:500;margin-bottom:1px;font-family:var(--font-body);font-size:.54rem }
.plx-di-value { color:var(--text-muted);font-size:.6rem }
.plx-di-link { color:#EF9F27;font-size:.6rem;text-decoration:underline;cursor:pointer;display:block;margin-top:1px }
.plx-di-link:hover { color:#FAC775 }

/* ---- Footer badge ---- */
.plx-footer-badge { display:flex;align-items:center;gap:8px;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule-light);font-size:.68rem;color:var(--text-dim);font-style:italic }
.plx-footer-badge svg { stroke:var(--accent-dim) }

/* ---- Responsive ---- */
@media (max-width:900px) {
  .plx-sig-remote { left:8px;padding:8px }
  .plx-device { right:8px }
  .plx-ambient { width:60px }
}
@media (max-width:768px) {
  .plx-device { top:auto;bottom:16px;right:50%;transform:translateX(50%);flex-direction:row }
  .plx-dev-btn { width:32px;height:32px }
  .plx-lower-fixed { height:60vh }
  .plx-lower-inner { flex-direction:column }
  .plx-data-panel { border-left:none;border-top:1px solid rgba(186,117,23,.12);flex:none;min-height:150px }
  .plx-sig-remote { display:none !important }
  .plx-ambient { display:none }
}