/* ============================================================
   Nova FX — legalfx.css
   Legal/document page craft for the Nova Wallet site.
   Runtime: legalfx.js (vanilla IIFE, zero deps, zero requests).

   Mount: add class "lx" to <body> and keep a .legal (or .lx-doc /
   [data-lx-doc]) column of h1 + h2/h3 + content. JS upgrades it:
     .lx-layout  grid: sticky TOC rail + paper column
     .lx-doc     the "paper" card (~720px)
     .lx-prog    article-scoped reading rule pinned under the nav
     .lx-dochead title, last-updated chip, reading-time chip
     .lx-toc     scrollspy table of contents (desktop rail)
     .lx-tocm    collapsible "On this page" <details> (mobile)
     .lx-num     auto "01." section numbers, .lx-anchor § links
   Everything namespaced .lx-*. Load AFTER nova.css / interact.css.
   Palette mirrors nova.css tokens (--line, --mut, --dim, accents).
   ============================================================ */

/* ------------------------------------------------------------
   0. Layout — left rail + centered paper column.
   238 + 56 + 720 = 1014px, centered inside the 1140px container.
   ------------------------------------------------------------ */
.lx-layout{
  display:grid;
  grid-template-columns:238px minmax(0,720px);
  gap:56px;
  justify-content:center;
  align-items:start;
}
.lx-rail{position:relative;min-width:0}

/* ------------------------------------------------------------
   1. .lx-doc — the paper. Deep-navy card, hairline edge light,
   soft top glow (::after sits under content via z-index).
   ------------------------------------------------------------ */
.lx-doc{
  position:relative;
  width:100%;
  max-width:720px;
  margin:0;
  background:linear-gradient(180deg,#0a1732 0%,#08132a 34%,#071026 100%);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:22px;
  box-shadow:0 34px 90px rgba(2,8,25,.55),
             inset 0 1px 0 rgba(190,215,255,.05);
}
.lx-doc::before{ /* hairline light across the top edge */
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,195,255,.55),transparent);
  opacity:.7;pointer-events:none;z-index:2;
}
.lx-doc::after{ /* faint cool glow bleeding from the top edge */
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;
  background:radial-gradient(120% 360px at 50% -70px,
    rgba(56,140,255,.10),rgba(56,140,255,0) 62%);
}
.lx-dochead,.lx-body,.lx-tocm{position:relative;z-index:1}
.lx-doc ::selection{background:rgba(56,189,248,.28);color:#eaf4ff}

/* ------------------------------------------------------------
   2. .lx-prog — 3px reading rule, first child of the paper.
   position:sticky pins it under the fixed .nav (66px) while the
   article scrolls; fill is a scaleX transform (GPU-only).
   .lx-stuck is toggled by JS to deepen the track when floating.
   ------------------------------------------------------------ */
.lx-prog{
  position:sticky;top:66px;z-index:90;
  height:3px;border-radius:22px 22px 0 0;
  background:rgba(148,178,255,.09);
  overflow:hidden;
}
.lx-prog>i{
  display:block;height:100%;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#2f6bff 0%,#38bdf8 55%,#7c5cff 100%);
  box-shadow:0 0 12px rgba(56,189,248,.55);
  will-change:transform;
}
.lx-prog.lx-stuck{
  background:rgba(20,36,70,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 12px 28px -8px rgba(2,8,25,.75);
}

/* ------------------------------------------------------------
   3. .lx-dochead — document masthead inside the paper.
   ------------------------------------------------------------ */
.lx-dochead{
  padding:clamp(32px,4.6vw,48px) clamp(24px,5vw,54px) clamp(24px,3vw,32px);
  border-bottom:1px solid var(--line,rgba(148,178,255,.14));
}
.lx-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#8fc3ff;background:rgba(56,140,255,.08);
  border:1px solid rgba(96,150,255,.28);border-radius:999px;
  padding:6px 13px;
}
.lx-pill svg{width:12px;height:12px;flex:none}
.lx-title{
  font-size:clamp(32px,4.4vw,46px);font-weight:800;
  letter-spacing:-1.6px;line-height:1.1;
  margin:20px 0 0;color:#f2f7ff;
}
.lx-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lx-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--mut,#8ea3cc);
  background:rgba(148,178,255,.05);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:999px;padding:7px 13px;white-space:nowrap;
}
.lx-chip svg{width:13px;height:13px;opacity:.75;flex:none}

/* ------------------------------------------------------------
   4. .lx-toc — rail TOC. Sticky, self-scrolling, hairline rail
   with a 2px active notch + gradient wash on the current link.
   ------------------------------------------------------------ */
.lx-toc{
  position:sticky;top:104px;
  max-height:calc(100vh - 140px);
  overflow-y:auto;overflow-x:hidden;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,178,255,.25) transparent;
}
.lx-toc::-webkit-scrollbar{width:4px}
.lx-toc::-webkit-scrollbar-thumb{background:rgba(148,178,255,.22);border-radius:4px}
.lx-toc::-webkit-scrollbar-track{background:transparent}
.lx-toc-t{
  display:flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim,#5f77a8);
  margin-bottom:13px;
}
.lx-toc-t::before{content:'';width:16px;height:1px;flex:none;
  background:var(--grad,linear-gradient(135deg,#2f6bff,#38bdf8))}
.lx-toc-l{border-left:1px solid rgba(148,178,255,.13)}
.lx-jump{
  display:block;
  margin-left:-1px;padding:7px 14px 7px 15px;
  font-size:13px;line-height:1.45;
  color:var(--dim,#5f77a8);
  border-left:2px solid transparent;
  border-radius:0 6px 6px 0;
  transition:color .15s ease,border-color .15s ease,background-color .2s ease;
}
.lx-jump:hover{color:#d5e4ff}
.lx-jump.on{
  color:#fff;border-left-color:#38bdf8;
  background:linear-gradient(90deg,rgba(56,189,248,.13),rgba(56,189,248,0) 75%);
}
.lx-jump.lx-sub{padding-left:29px;font-size:12.5px}
.lx-jump:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:-2px}

/* ------------------------------------------------------------
   5. .lx-tocm — mobile TOC (<details>, hidden on desktop).
   ------------------------------------------------------------ */
.lx-tocm{display:none}

/* ------------------------------------------------------------
   6. .lx-body — reading typography inside the paper.
   Beats .legal rules via .lx-doc scope + load order.
   ------------------------------------------------------------ */
.lx-body{
  padding:clamp(26px,4vw,40px) clamp(24px,5vw,54px) clamp(38px,5vw,56px);
}
.lx-body>*:first-child{margin-top:0}
.lx-doc .lx-body p{
  font-size:14.5px;line-height:1.8;color:#a8bbdf;margin-bottom:14px;
}
.lx-doc .lx-body ul{margin:0 0 16px;padding-left:22px}
.lx-doc .lx-body li{
  font-size:14px;line-height:1.75;color:#a8bbdf;margin-bottom:7px;
}
.lx-body li::marker{color:#38bdf8}
.lx-body a:not(.lx-anchor){
  color:#9cc8ff;
  text-decoration:underline;
  text-decoration-color:rgba(124,170,255,.35);
  text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.lx-body a:not(.lx-anchor):hover{color:#d8ecff;text-decoration-color:#38bdf8}

/* ------------------------------------------------------------
   7. .lx-sec + .lx-num — section headings w/ gradient numbers.
   ------------------------------------------------------------ */
.lx-doc .lx-sec{
  font-size:19px;font-weight:700;letter-spacing:-.3px;
  line-height:1.35;color:#eef4ff;
  margin:38px 0 12px;
  padding-top:30px;
  border-top:1px solid rgba(148,178,255,.10);
  border-radius:6px;
  scroll-margin-top:112px;
}
.lx-doc .lx-sec.lx-first{margin-top:0;padding-top:0;border-top-color:transparent}
.lx-num{
  display:inline-block;margin-right:.6em;
  font-size:.76em;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:linear-gradient(120deg,#38bdf8 10%,#7c5cff 90%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transform:translateY(-.04em);
}

/* ------------------------------------------------------------
   8. .lx-anchor — hover-reveal § link; click copies the URL.
   ------------------------------------------------------------ */
.lx-anchor{
  display:inline-block;
  margin-left:.55em;
  font-size:.82em;font-weight:500;line-height:1;
  color:var(--dim,#5f77a8);
  text-decoration:none;
  opacity:0;transform:translateX(-3px);
  transition:opacity .18s ease,transform .18s ease,color .18s ease;
}
.lx-sec:hover .lx-anchor,.lx-anchor:focus-visible{opacity:1;transform:none}
.lx-anchor:hover{color:#38bdf8}
.lx-anchor:focus-visible{outline:2px solid rgba(56,189,248,.55);outline-offset:2px;border-radius:4px}
@media (hover:none),(pointer:coarse){
  .lx-anchor{opacity:.4;transform:none}
}
/* section target flash after a TOC jump */
.lx-sec.lx-flash{animation:lx-flash 1.5s ease-out}
@keyframes lx-flash{
  0%{background-color:rgba(56,189,248,.16)}
  100%{background-color:rgba(56,189,248,0)}
}

/* ------------------------------------------------------------
   9. .lx-toast — copy feedback pill (JS-owned singleton).
   ------------------------------------------------------------ */
.lx-toast{
  position:fixed;left:50%;bottom:26px;z-index:1200;
  display:flex;align-items:center;gap:9px;
  max-width:min(430px,90vw);
  padding:11px 18px;
  font-size:13px;font-weight:500;color:#eaf3ff;
  background:rgba(8,18,40,.92);
  border:1px solid rgba(124,170,255,.3);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(2,8,25,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.3,1.1);
}
.lx-toast.on{opacity:1;transform:translate(-50%,0)}
.lx-toast svg{width:14px;height:14px;color:#38bdf8;flex:none}

/* ------------------------------------------------------------
   10. Collapse — rail TOC hides under 1080px; paper re-centers;
   the <details> TOC appears inside the doc head instead.
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .lx-layout{display:block}
  .lx-rail{display:none}
  .lx-doc{margin:0 auto}
  .lx-tocm{
    display:block;
    margin:20px clamp(24px,5vw,54px) 0;
    background:rgba(148,178,255,.04);
    border:1px solid var(--line,rgba(148,178,255,.14));
    border-radius:14px;overflow:hidden;
  }
  .lx-tocm>summary{
    display:flex;align-items:center;gap:9px;
    padding:13px 16px;cursor:pointer;list-style:none;
    font-size:13px;font-weight:600;color:#c7d6f5;
  }
  .lx-tocm>summary::-webkit-details-marker{display:none}
  .lx-tocm>summary svg{width:14px;height:14px;color:#38bdf8;flex:none}
  .lx-tocm>summary::after{
    content:'+';margin-left:auto;font-size:18px;font-weight:400;
    color:var(--dim,#5f77a8);transition:transform .2s ease;
  }
  .lx-tocm[open]>summary::after{transform:rotate(45deg)}
  .lx-tocm>summary:focus-visible{outline:2px solid rgba(56,189,248,.55);outline-offset:-2px}
  .lx-tocm-n{font-size:11px;font-weight:500;color:var(--dim,#5f77a8)}
  .lx-tocm .lx-toc-l{border-left:0;border-top:1px solid var(--line,rgba(148,178,255,.14));padding:8px 0 10px}
  .lx-tocm .lx-jump{
    margin-left:0;border-left:3px solid transparent;border-radius:0;
    padding:8px 18px 8px 15px;
  }
  .lx-tocm .lx-jump.on{border-left-color:#38bdf8;background:rgba(56,189,248,.10)}
  .lx-tocm .lx-jump.lx-sub{padding-left:32px}
}

/* ------------------------------------------------------------
   11. Reduced motion — no flash, no slide/fade transitions.
   Progress + scrollspy still work (state, not motion).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .lx-anchor,.lx-jump,.lx-toast,
  .lx-body a:not(.lx-anchor),
  .lx-tocm>summary::after{transition:none}
  .lx-sec.lx-flash{animation:none}
}

/* ------------------------------------------------------------
   12. Print — clean legal document on paper: light theme,
   no chrome, no TOC/anchors/progress, sane breaks.
   ------------------------------------------------------------ */
@media print{
  .nav,.foot,.lx-rail,.lx-prog,.lx-anchor,.lx-tocm,.lx-toast,
  div.ifx-progress,.nconn{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  .container{max-width:none!important;padding:0!important}
  .lx-layout{display:block}
  .lx-doc{
    max-width:none;width:100%;margin:0;
    border:0;border-radius:0;
    background:none;box-shadow:none;
  }
  .lx-doc::before,.lx-doc::after{display:none}
  .lx-dochead{padding:0 0 16px;border-bottom:2px solid #111}
  .lx-pill{color:#333;background:none;border-color:#999}
  .lx-title{color:#000}
  .lx-chip{color:#333;border-color:#bbb}
  .lx-body{padding:18px 0 0}
  .lx-doc .lx-sec{
    color:#000;border-top-color:#bbb;border-radius:0;
    page-break-after:avoid;break-after:avoid;
  }
  .lx-num{background:none;color:#444;-webkit-text-fill-color:#444}
  .lx-doc .lx-body p,.lx-doc .lx-body li{color:#111}
  .lx-body a:not(.lx-anchor){color:#111;text-decoration-color:#888}
  .lx-body p,.lx-body li{orphans:3;widows:3}
  @page{margin:18mm 15mm}
}