/* ============================================================
   Nova FX — updfx.css · changelog/release-notes pack (.up-*)
   Page: updates.html. Runtime: updfx.js (vanilla, zero deps).

   Anatomy:
     .up-bar        sticky filter toolbar (chips + verify link)
     .up-f          filter chip (.on = active), colored per group
     .up-list       release column; hosts the drawing rail
     .up-line       rail track; <i> fills top→down via --up-p
     .up-rel        one release row: grid [.up-side | .up-card]
     .up-side       left meta: .up-dot on the rail, .up-ver pill,
                    .up-date ISO, .up-kind chips
     .up-card       release card; .up-title + .up-group blocks
     .up-group      keep-a-changelog bucket (data-g: new/improved/
                    fixed/security), icon + label + .up-g-l list
     .up-sha        mono sha-256 teaser chip → verify.html

   JS contract (updfx.js):
     · sets --up-p on .up-line i (scroll draw)
     · toggles .on on .up-rel in view (scrollspy → rail glow)
     · .up-dim on releases without the filtered group,
       .up-g-off on non-matching groups
     · .up-flash on the anchor target after a rail/pill jump
     · fills .up-f i count badges; scrambles .up-sha-h once

   Motion: transform/opacity only, IO-gated, reduced-motion safe.
   Load AFTER nova.css/b-learn.css — palette uses its tokens.
   ============================================================ */

:root{
  --up-new:#38bdf8;
  --up-imp:#7c8cff;
  --up-fix:#ffc94d;
  --up-sec:#35d08a;
  --up-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --up-line-x:218px;          /* rail x inside .up-list */
  --up-col:190px;             /* side column width */
  --up-gap:56px;              /* column gap (rail sits mid-gap) */
}

/* ------------------------------------------------------------
   1 · toolbar — group filters, sticky under the fixed nav (66px)
   ------------------------------------------------------------ */
.up-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:74px;z-index:60;
  padding:10px 12px;margin-bottom:38px;
  background:rgba(6,13,31,.72);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:15px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 34px -18px rgba(2,8,25,.8);
}
.up-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.up-f{
  display:inline-flex;align-items:center;gap:7px;
  font:600 12.5px/1 Inter,sans-serif;letter-spacing:.01em;
  color:var(--mut,#8ea3cc);background:rgba(148,178,255,.05);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.up-f:hover{color:#e9f0ff;border-color:var(--line2,rgba(148,178,255,.24));transform:translateY(-1px)}
.up-f i{
  font:700 9.5px/1 var(--up-mono);font-style:normal;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(148,178,255,.1);color:var(--dim,#5f77a8);
}
.up-f:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}

/* active chip takes its group's color */
.up-f.on{color:#fff;border-color:rgba(143,195,255,.5);background:rgba(56,140,255,.14)}
.up-f.on i{background:rgba(255,255,255,.12);color:#cfe3ff}
.up-f.f-new.on{color:#bfeaff;border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.13);box-shadow:0 0 18px -4px rgba(56,189,248,.4)}
.up-f.f-improved.on{color:#ccd2ff;border-color:rgba(124,140,255,.55);background:rgba(124,140,255,.13);box-shadow:0 0 18px -4px rgba(124,140,255,.4)}
.up-f.f-fixed.on{color:#ffe6ae;border-color:rgba(255,201,77,.55);background:rgba(255,201,77,.11);box-shadow:0 0 18px -4px rgba(255,201,77,.35)}
.up-f.f-security.on{color:#bdf0d8;border-color:rgba(53,208,138,.55);background:rgba(53,208,138,.12);box-shadow:0 0 18px -4px rgba(53,208,138,.4)}
.up-f.f-new.on i{background:rgba(56,189,248,.18);color:#bfeaff}
.up-f.f-improved.on i{background:rgba(124,140,255,.2);color:#ccd2ff}
.up-f.f-fixed.on i{background:rgba(255,201,77,.18);color:#ffe6ae}
.up-f.f-security.on i{background:rgba(53,208,138,.18);color:#bdf0d8}

.up-bar-note{
  margin-left:auto;font-size:12px;color:var(--dim,#5f77a8);
  white-space:nowrap;transition:color .15s ease;
}
.up-bar-note:hover{color:#9cc8ff}
.up-bar-note span{transition:transform .15s ease;display:inline-block}
.up-bar-note:hover span{transform:translateX(3px)}

/* ------------------------------------------------------------
   2 · the rail — one continuous track down the release column;
   fill draws with scroll progress (--up-p, set by updfx.js)
   ------------------------------------------------------------ */
.up-list{position:relative;display:flex;flex-direction:column;gap:30px}
.up-line{
  position:absolute;top:10px;bottom:24px;left:var(--up-line-x);
  width:2px;border-radius:2px;
  background:rgba(148,178,255,.1);
}
.up-line i{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,#2f6bff 0%,#38bdf8 60%,#7c8cff 100%);
  box-shadow:0 0 14px rgba(56,189,248,.45);
  transform:scaleY(var(--up-p,0));transform-origin:top center;
  will-change:transform;
}

/* ------------------------------------------------------------
   3 · release row — side meta + card
   ------------------------------------------------------------ */
.up-rel{
  display:grid;grid-template-columns:var(--up-col) minmax(0,1fr);
  column-gap:var(--up-gap);position:relative;
  scroll-margin-top:150px;
}
.up-side{
  position:relative;align-self:start;text-align:right;
  padding-top:26px;min-width:0;
}
/* pin on the rail — right edge lands mid-gap at --up-line-x +1 */
.up-dot{
  position:absolute;top:42px;right:-36px;width:14px;height:14px;
  border-radius:50%;box-sizing:border-box;
  background:var(--bg2,#071228);
  border:2px solid rgba(148,178,255,.4);
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.up-dot::after{ /* halo ring, only when the row is the "current" spy target */
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(56,189,248,.5);
  opacity:0;transform:scale(.6);
  transition:opacity .3s ease,transform .3s ease;
}
.up-rel.on .up-dot{
  background:var(--acc2,#38bdf8);border-color:#9fd8ff;
  box-shadow:0 0 14px rgba(56,189,248,.85),0 0 34px rgba(56,189,248,.35);
}
.up-rel.on .up-dot::after{opacity:1;transform:scale(1);animation:up-ping 2.6s ease-out infinite}
@keyframes up-ping{0%{opacity:.8;transform:scale(.7)}70%,100%{opacity:0;transform:scale(1.5)}}
/* the newest release keeps a soft glow even when not spied */
.up-rel.up-cur .up-dot{border-color:rgba(56,189,248,.85);box-shadow:0 0 10px rgba(56,189,248,.5)}

.up-ver{
  display:inline-flex;align-items:center;
  font:700 13px/1 var(--up-mono);letter-spacing:.02em;
  color:#cfe3ff;background:rgba(56,140,255,.09);
  border:1px solid rgba(96,150,255,.32);border-radius:8px;
  padding:6px 10px;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.up-ver:hover{border-color:rgba(56,189,248,.6);background:rgba(56,189,248,.14);transform:translateY(-1px)}
.up-rel.up-cur .up-ver{
  background:var(--grad,linear-gradient(135deg,#2f6bff,#38bdf8));
  border-color:transparent;color:#fff;
  box-shadow:0 8px 22px -6px rgba(47,107,255,.55),inset 0 1px 0 rgba(255,255,255,.22);
}
.up-date{
  display:block;margin-top:10px;
  font:500 11.5px/1 var(--up-mono);letter-spacing:.06em;
  color:var(--dim,#5f77a8);
  font-variant-numeric:tabular-nums;
}
.up-rel.on .up-date{color:#8ea9d8}
.up-kinds{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;margin-top:10px}
.up-kind{
  font:700 9px/1 var(--up-mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim,#5f77a8);
  border:1px solid var(--line,rgba(148,178,255,.16));
  border-radius:5px;padding:3.5px 7px;
}
.up-kind.k-cur{
  color:#9fe8c6;border-color:rgba(53,208,138,.45);background:rgba(53,208,138,.09);
}

/* ------------------------------------------------------------
   4 · release card
   ------------------------------------------------------------ */
.up-card{
  position:relative;min-width:0;
  background:linear-gradient(165deg,var(--card,#0a1830),#081327);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:var(--r,18px);
  padding:26px 28px 22px;
  transition:border-color .22s ease,box-shadow .28s ease,opacity .3s ease,transform .22s ease;
  overflow:hidden;
}
.up-card::before{ /* hairline top light */
  content:'';position:absolute;top:-1px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,195,255,.4),transparent);
  pointer-events:none;
}
.up-rel:hover .up-card{border-color:var(--line2,rgba(148,178,255,.26));box-shadow:0 18px 46px -18px rgba(2,8,25,.7)}
.up-rel.up-cur .up-card{
  border-color:rgba(56,189,248,.38);
  box-shadow:0 0 0 1px rgba(56,189,248,.14),0 22px 54px -20px rgba(47,107,255,.35);
}
/* anchor-target flash (added by JS on rail/pill jumps) */
.up-card.up-flash{animation:up-flash 1.4s ease-out}
@keyframes up-flash{
  0%{box-shadow:0 0 0 1px rgba(56,189,248,.7),0 0 44px rgba(56,189,248,.3)}
  100%{box-shadow:0 0 0 1px rgba(56,189,248,.14),0 22px 54px -20px rgba(47,107,255,.35)}
}
/* filter dim: release lacks the selected group */
.up-rel.up-dim .up-card{opacity:.34}
.up-rel.up-dim .up-side{opacity:.45}
.up-rel.up-dim .up-dot{border-color:rgba(148,178,255,.25);box-shadow:none;background:var(--bg2,#071228)}

.up-title{
  font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.3;
  color:#eef4ff;margin:0 0 4px;
}

/* ------------------------------------------------------------
   5 · grouped bullets — New / Improved / Fixed / Security
   ------------------------------------------------------------ */
.up-group{margin-top:18px}
.up-g-h{
  display:flex;align-items:center;gap:8px;
  font:700 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gc,#8ea3cc);margin-bottom:9px;
}
.up-g-h svg{width:12px;height:12px;flex:none}
.up-g-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--gc,#8ea3cc) 26%,transparent),transparent);margin-left:4px}
.g-new{--gc:var(--up-new)} .g-improved{--gc:var(--up-imp)}
.g-fixed{--gc:var(--up-fix)} .g-security{--gc:var(--up-sec)}

.up-g-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.up-g-l li{
  position:relative;padding-left:20px;
  font-size:13.5px;line-height:1.65;color:#a8bbdf;
}
.up-g-l li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:8px;height:2px;border-radius:1px;
  background:var(--gc,#8ea3cc);opacity:.75;
}
.g-security .up-g-l li::before{top:.56em;height:6px;width:6px;border-radius:50%;
  box-shadow:0 0 8px color-mix(in srgb,var(--gc) 65%,transparent)}
.up-g-l code{
  font:500 .86em/1 var(--up-mono);color:#cfe0ff;
  background:rgba(148,178,255,.09);border:1px solid rgba(148,178,255,.16);
  border-radius:5px;padding:1.5px 5px;
}
.up-g-off{display:none} /* hidden by the group filter */

/* ------------------------------------------------------------
   6 · card foot — sha-256 teaser chip → verify.html
   ------------------------------------------------------------ */
.up-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding-top:14px;
  border-top:1px solid rgba(148,178,255,.09);
}
.up-sha{
  display:inline-flex;align-items:center;gap:8px;
  font:600 10.5px/1 var(--up-mono);letter-spacing:.05em;
  color:#9db8e8;
  background:rgba(148,178,255,.05);
  border:1px solid rgba(148,178,255,.18);
  border-radius:8px;padding:7px 11px;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease,transform .18s ease;
}
.up-sha svg{width:11px;height:11px;color:var(--dim,#5f77a8);flex:none;transition:color .18s ease}
.up-sha:hover{
  color:#dff0ff;border-color:rgba(56,189,248,.5);
  background:rgba(56,189,248,.09);transform:translateY(-1px);
}
.up-sha:hover svg{color:#38bdf8}
.up-sha-h{color:var(--dim,#5f77a8);font-variant-numeric:tabular-nums;transition:color .18s ease}
.up-sha:hover .up-sha-h{color:#8fd8ff}
.up-sha:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}
.up-foot-v{ /* tiny "verified" note that fades in beside the chip */
  font:500 10px/1 var(--up-mono);letter-spacing:.05em;color:var(--dim,#5f77a8);
  display:inline-flex;align-items:center;gap:5px;
}
.up-foot-v i{width:5px;height:5px;border-radius:50%;background:var(--grn,#35d08a);
  box-shadow:0 0 7px rgba(53,208,138,.8);font-style:normal}

/* ------------------------------------------------------------
   7 · responsive — rail collapses to a simple left border feel
   ------------------------------------------------------------ */
@media (max-width:900px){
  .up-rel{grid-template-columns:minmax(0,1fr);gap:12px}
  .up-line{display:none}
  .up-side{
    text-align:left;display:flex;align-items:center;flex-wrap:wrap;
    gap:10px;padding-top:0;padding-left:14px;
  }
  .up-dot{
    position:static;order:-1;width:10px;height:10px;flex:none;
    margin-left:-14px; /* dot replaces the missing rail: sits on card edge */
  }
  .up-kinds{justify-content:flex-start;margin-top:0}
  .up-date{margin-top:0}
  .up-card{margin-left:0}
  .up-rel{border-left:1px solid rgba(148,178,255,.14);padding-left:18px}
  .up-rel.on{border-left-color:rgba(56,189,248,.6)}
  .up-bar{top:66px}
}
@media (max-width:560px){
  .up-bar{padding:9px 10px}
  .up-bar-note{display:none}
  .up-card{padding:22px 18px 18px}
}

/* ------------------------------------------------------------
   8 · reduced motion — state still applies; animation does not
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .up-line i{transition:none}
  .up-dot,.up-dot::after,.up-ver,.up-f,.up-sha,.up-bar-note span,
  .up-sha svg,.up-sha-h,.up-card,.up-side{transition:none}
  .up-rel.on .up-dot::after{animation:none;opacity:.6;transform:scale(1)}
  .up-card.up-flash{animation:none}
  .up-f:hover,.up-ver:hover,.up-sha:hover{transform:none}
}

/* ------------------------------------------------------------
   9 · print — a changelog should print clean
   ------------------------------------------------------------ */
@media print{
  .nav,.foot,.up-bar,.up-line,.ax-grain,.ax-aurora,.stars,
  .ifx-progress,.nconn{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  .hero{min-height:0!important;padding:20px 0!important}
  .hero h1,.lx-title{color:#000!important}
  .lead,.sect-lead,.up-date,.up-bar-note{color:#333!important}
  .stat b{background:none;color:#000;-webkit-text-fill-color:#000}
  .up-rel{grid-template-columns:120px 1fr;break-inside:avoid;page-break-inside:avoid}
  .up-side{text-align:left;padding-top:0}
  .up-dot{display:none}
  .up-ver{color:#000;border-color:#999;background:none}
  .up-kind{color:#333;border-color:#bbb}
  .up-card{border:1px solid #ccc;background:none;box-shadow:none;padding:14px 0 0;border:0;border-top:1px solid #ccc;border-radius:0}
  .up-card::before{display:none}
  .up-title{color:#000}
  .up-g-h{color:#333}
  .up-g-h::after{background:#ddd}
  .up-g-l li{color:#111}
  .up-g-l li::before{background:#666;box-shadow:none}
  .up-g-l code{color:#000;border-color:#bbb;background:none}
  .up-sha{color:#333;border-color:#bbb}
  .up-rel.up-dim .up-card,.up-rel.up-dim .up-side{opacity:1}
}