/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Foyl Learn — Interior FX layer (tools, labs,
   scenarios, concepts, interview, reports).

   Companion to learn-fx-app.js. Deliberately lighter
   than the landing-page layer: no three.js, no orbs.
   Tools must stay snappy and readable — the motion
   here is dashboard choreography, not spectacle.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Brand signal line under the tool topbar ──
   A slow gradient sweep that ties every mock tool
   back to the foyl brand without touching the UI. */
#topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  pointer-events:none;opacity:.55;
  background:linear-gradient(90deg,
    transparent 0%, rgba(0,212,255,.0) 20%,
    rgba(0,212,255,.55) 35%, rgba(0,174,239,.45) 45%,
    rgba(0,137,123,.4) 55%, rgba(0,212,255,.0) 80%, transparent 100%);
  background-size:220% 100%;
  animation:fxa-sweep 9s linear infinite;
}
@keyframes fxa-sweep{
  from{background-position:220% 0}
  to{background-position:-120% 0}
}

/* ── Platform nav inside tool topbars ──
   Tools keep their own #topbar (tool functionality lives there),
   but the brand block and platform links are shared. Scoped under
   #topbar so tool sidebars (<nav id="sidebar">) are untouched.
   :where() keeps zero specificity so tools with position:fixed
   topbars keep it; static ones become the ::after/dropdown anchor. */
:where(#topbar){position:relative}
#topbar .tb-product{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
#topbar .nav-sep{width:1px;height:16px;background:var(--border2);margin:0 10px;flex-shrink:0}
#topbar .nav-links{display:flex;gap:2px;margin:0 auto 0 8px;flex:0 0 auto;overflow:visible}
#topbar .nav-link{font-family:var(--font);font-size:12.5px;font-weight:300;color:var(--tx3);text-decoration:none;
  padding:5px 11px;border-radius:5px;transition:color .12s,background .12s;white-space:nowrap}
#topbar .nav-link:hover{color:var(--tx2);background:var(--surf)}
#topbar .nav-link.here{color:var(--tx);background:var(--surf)}
#topbar .nav-more{position:relative}
#topbar .nav-more-btn{font-family:var(--font);font-size:12.5px;font-weight:300;color:var(--tx3);padding:5px 11px;
  border-radius:5px;transition:color .12s,background .12s;cursor:pointer;display:flex;align-items:center;gap:5px;
  user-select:none;white-space:nowrap;border:1px solid var(--border);background:var(--surf)}
#topbar .nav-more-btn:hover,#topbar .nav-more.open .nav-more-btn{color:var(--tx2);background:var(--surf)}
#topbar .nav-more-caret{font-size:10px;opacity:.5;transition:transform .15s}
#topbar .nav-more.open .nav-more-caret{transform:rotate(180deg)}
#topbar .nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:9px;
  padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s,transform .15s;z-index:500}
#topbar .nav-more.open .nav-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
#topbar .nd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  text-decoration:none;color:var(--tx3);font-size:12.5px;transition:color .1s,background .1s}
#topbar .nd-item:hover{background:var(--surf);color:var(--tx2)}
#topbar .nd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
#topbar .nd-sep{height:1px;background:var(--border);margin:4px 0}
#topbar .nd-ext{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--tx4)}
#topbar .tb-right{margin-left:auto}
#topbar .tb-right:empty{display:none}
/* the instance chip absorbs the squeeze: truncate, never wrap the bar */
#topbar .tb-instance{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
/* make room progressively on narrower screens (links sized like the
   platform nav need a little more width than the old condensed set) */
@media(max-width:1360px){#topbar .tb-instance,#topbar .tb-context,#topbar .tb-ctx-chip{display:none}}
@media(max-width:1060px){#topbar .nav-links{display:none}}

/* ── Scroll progress bar (content pages, injected) ── */
.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:900;
  pointer-events:none;
  background:linear-gradient(90deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  transform-origin:0 50%;transform:scaleX(0);
}

/* ── Cursor glow on tool panels / content cards ──
   learn-fx-app.js adds .fxa-glow and drives --mx/--my. */
.fxa-glow{position:relative}
.fxa-glow::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(0,212,255,.06), rgba(0,174,239,.025) 40%, transparent 65%);
  z-index:1;
}
.fxa-glow:hover::after{opacity:1}

/* ── Guards: projector mode — no decoration, no motion ── */
[data-theme="projector"] #topbar::after{display:none}
[data-theme="projector"] .fx-progress{display:none}
[data-theme="projector"] .fxa-glow::after{display:none}

/* ── Guards: reduced motion ── */
@media (prefers-reduced-motion: reduce){
  #topbar::after{animation:none;opacity:.3}
  .fx-progress{display:none!important}
  .fxa-glow::after{display:none}
}