/* ============================================================
   Nova FX — postfx.css
   "Learn" article pack for the Nova Wallet site.

   Mount: article pages that render the .lx doc chrome
   (legalfx.css) with static markup — .lx-layout / .lx-rail /
   .lx-toc / .lx-doc / .lx-prog / .lx-dochead / .lx-tocm /
   .lx-body / .lx-sec / .lx-num / .lx-anchor are all provided
   by legalfx.css. This pack only adds the pieces an article
   needs on top. Runtime: postfx.js (progress, scrollspy,
   anchor copy). Load AFTER nova.css + legalfx.css.

   Components (all namespaced .pt-*):
     .pt-hero    compact article masthead (eyebrow+h1+meta)
     .pt-meta    meta chip row: author / dates / read / level
     .pt-chip    single meta chip  (+ .pt-chip-acc variant)
     .pt-dek     standfirst paragraph inside .lx-dochead
     .pt-keys    "Key takeaways" box
     .pt-stats   3-up stat band sized for the 720px paper
     .pt-twrap/.pt-table  threat-pattern table (mono cells)
     .pt-warn    amber red-flag callout
     .pt-limits  dashed honesty box ("what X can't do")
     .pt-cta     product CTA card closing the article
     .pt-rel     related-posts strip
     .pt-pn      prev / next article links
     .pt-src     source attribution line
     inline code mono chip for selectors/hashes/addresses

   Rules that live inside the paper are prefixed
   .lx-doc .lx-body so they beat legalfx base p/li/a styles.

   Motion: transform/opacity only, reduced-motion fallbacks.
   ============================================================ */

/* ------------------------------------------------------------
   1. .pt-hero — article masthead. Slimmer than the marketing
   hero, left-aligned, inner column matches the .lx-layout
   rail+paper width (238 + 56 + 720 = 1014px).
   ------------------------------------------------------------ */
.pt-hero{min-height:0;padding:126px 0 26px;text-align:left}
.pt-hero-in{max-width:1014px;margin:0 auto}
.pt-hero h1{
  font-size:clamp(28px,4vw,46px);font-weight:800;
  letter-spacing:-1.6px;line-height:1.12;margin-top:20px;
  max-width:800px;
}
.pt-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pt-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;
}
.pt-chip svg{width:13px;height:13px;opacity:.75;flex:none}
.pt-chip b{color:#d5e1fa;font-weight:650}
.pt-chip-acc{
  color:#8fc3ff;font-weight:650;
  background:rgba(56,140,255,.09);
  border-color:rgba(96,150,255,.3);
}
.pt-chip-acc svg{opacity:1;color:#38bdf8}

/* ------------------------------------------------------------
   2. .pt-dek — standfirst inside .lx-dochead, under the pill.
   ------------------------------------------------------------ */
.pt-dek{
  font-size:15.5px;line-height:1.75;color:#a8bbdf;
  margin:18px 0 0;max-width:58ch;
}

/* ------------------------------------------------------------
   3. .pt-keys — "Key takeaways" box, first block of .lx-body.
   Cool gradient fill + top hairline; reads as a summary card,
   not a warning.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-keys{
  position:relative;margin:0 0 10px;padding:20px 22px 15px;
  border-radius:16px;
  background:linear-gradient(165deg,rgba(47,107,255,.12),rgba(56,189,248,.05) 58%,rgba(148,178,255,.03));
  border:1px solid rgba(96,150,255,.3);
  box-shadow:inset 0 1px 0 rgba(190,215,255,.07);
}
.lx-doc .lx-body .pt-keys::before{
  content:'';position:absolute;top:-1px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.6),transparent);
  pointer-events:none;
}
.lx-doc .lx-body .pt-keys-t{
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8fc3ff;margin-bottom:12px;
}
.lx-doc .lx-body .pt-keys-t svg{width:14px;height:14px;flex:none}
.lx-doc .lx-body .pt-keys ul{margin:0;padding-left:20px}
.lx-doc .lx-body .pt-keys li{
  font-size:14px;line-height:1.7;color:#c4d4f4;margin-bottom:7px;
}
.lx-doc .lx-body .pt-keys li:last-child{margin-bottom:0}
.lx-doc .lx-body .pt-keys li::marker{color:#38bdf8}
.lx-doc .lx-body .pt-keys b,.lx-doc .lx-body .pt-keys strong{color:#eaf2ff;font-weight:650}

/* ------------------------------------------------------------
   4. .pt-stats — compact stat band for inside the paper.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 8px}
.lx-doc .lx-body .pt-stat{
  background:rgba(148,178,255,.045);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:14px;padding:16px 16px 14px;
}
.lx-doc .lx-body .pt-stat b{
  display:block;font-size:24px;font-weight:800;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;
  background:var(--grad,linear-gradient(135deg,#2f6bff,#38bdf8));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lx-doc .lx-body .pt-stat span{
  display:block;font-size:11.5px;color:var(--dim,#5f77a8);
  line-height:1.55;margin-top:6px;
}
@media (max-width:560px){
  .lx-doc .lx-body .pt-stats{grid-template-columns:1fr 1fr}
  .lx-doc .lx-body .pt-stat b{font-size:20px}
}

/* ------------------------------------------------------------
   5. .pt-src — small attribution line under stats/tables.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-src{
  font-size:11.5px;color:var(--dim,#5f77a8);
  letter-spacing:.01em;margin:0 0 18px;
}
.lx-doc .lx-body .pt-src b{color:var(--mut,#8ea3cc);font-weight:600}

/* ------------------------------------------------------------
   6. .pt-table — threat-pattern matrix inside a scrollable
   wrapper. Mono first column for selectors.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-twrap{
  overflow-x:auto;margin:18px 0 8px;
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:14px;background:rgba(148,178,255,.03);
}
.lx-doc .lx-body .pt-table{width:100%;min-width:540px;border-collapse:collapse;font-size:13px}
.lx-doc .lx-body .pt-table th{
  text-align:left;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim,#5f77a8);padding:12px 15px;
  border-bottom:1px solid var(--line,rgba(148,178,255,.14));
  background:rgba(148,178,255,.05);white-space:nowrap;
}
.lx-doc .lx-body .pt-table td{
  padding:12px 15px;vertical-align:top;line-height:1.6;
  color:#a8bbdf;
  border-bottom:1px solid rgba(148,178,255,.08);
}
.lx-doc .lx-body .pt-table tr:last-child td{border-bottom:0}
.lx-doc .lx-body .pt-table td:first-child{white-space:nowrap}
.lx-doc .lx-body .pt-table tbody tr{transition:background .15s ease}
.lx-doc .lx-body .pt-table tbody tr:hover{background:rgba(56,140,255,.045)}

/* ------------------------------------------------------------
   7. Inline code — mono chip for selectors, hashes, addresses.
   Scoped to the doc so global markup stays untouched.
   ------------------------------------------------------------ */
.lx-doc .lx-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.86em;font-weight:500;color:#a5d8ff;
  background:rgba(56,140,255,.1);
  border:1px solid rgba(96,150,255,.24);
  border-radius:6px;padding:1.5px 6px;
  white-space:nowrap;
}
/* long addresses must wrap on narrow screens */
.lx-doc .lx-body code.pt-br{white-space:normal;word-break:break-all}

/* ------------------------------------------------------------
   8. .pt-warn — amber callout for red flags / urgency cues.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-warn{
  position:relative;margin:18px 0;
  padding:15px 18px 15px 21px;border-radius:12px;
  border:1px solid rgba(255,201,77,.28);
  background:linear-gradient(165deg,rgba(255,201,77,.08),rgba(255,201,77,.02));
}
.lx-doc .lx-body .pt-warn::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,#ffc94d,rgba(255,201,77,.2));
}
.lx-doc .lx-body .pt-warn p{font-size:13.5px;line-height:1.7;color:#d8c79a;margin:0}
.lx-doc .lx-body .pt-warn b,.lx-doc .lx-body .pt-warn strong{color:#ffd98a;font-weight:650}
.lx-doc .lx-body .pt-warn p+p{margin-top:8px}

/* ------------------------------------------------------------
   9. .pt-limits — honesty box. Dashed edge = boundary, muted
   palette — deliberately quieter than .pt-keys.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-limits{
  margin:18px 0 6px;padding:17px 20px 13px;border-radius:14px;
  border:1px dashed rgba(148,178,255,.32);
  background:rgba(148,178,255,.028);
}
.lx-doc .lx-body .pt-limits-t{
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut,#8ea3cc);
  margin-bottom:11px;
}
.lx-doc .lx-body .pt-limits-t svg{width:14px;height:14px;flex:none;color:var(--dim,#5f77a8)}
.lx-doc .lx-body .pt-limits ul{margin:0;padding-left:20px}
.lx-doc .lx-body .pt-limits li{
  font-size:13.5px;line-height:1.7;color:#93a7d0;margin-bottom:7px;
}
.lx-doc .lx-body .pt-limits li:last-child{margin-bottom:0}
.lx-doc .lx-body .pt-limits li::marker{color:var(--dim,#5f77a8)}

/* ------------------------------------------------------------
   10. .pt-cta — closing product card. Uses .btn pri/gho from
   nova.css; adds its own glow so it reads as the article's
   final beat, not a banner ad.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-cta{
  position:relative;overflow:hidden;margin-top:36px;
  padding:26px 26px 24px;border-radius:18px;
  background:linear-gradient(165deg,#0d1e3d,#081327);
  border:1px solid rgba(96,150,255,.32);
  box-shadow:0 24px 60px rgba(2,8,25,.5),inset 0 1px 0 rgba(190,215,255,.07);
}
.lx-doc .lx-body .pt-cta::before{
  content:'';position:absolute;top:-1px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.65),transparent);
  pointer-events:none;
}
.lx-doc .lx-body .pt-cta::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 220px at 50% -60px,rgba(56,140,255,.15),transparent 65%);
}
.lx-doc .lx-body .pt-cta-t{
  position:relative;display:flex;align-items:center;gap:12px;
  font-size:18px;font-weight:750;letter-spacing:-.3px;color:#eef4ff;
}
.lx-doc .lx-body .pt-cta-ic{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(47,107,255,.25),rgba(56,189,248,.12));
  border:1px solid rgba(96,150,255,.32);color:#8db8ff;
}
.lx-doc .lx-body .pt-cta-ic svg{width:19px;height:19px}
.lx-doc .lx-body .pt-cta p{
  position:relative;font-size:13.5px;color:var(--mut,#8ea3cc);
  line-height:1.7;margin:12px 0 18px;max-width:54ch;
}
.lx-doc .lx-body .pt-cta-r{position:relative;display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------------------
   11. .pt-rel — related strip: label + one linked row card.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-rel{margin-top:32px;padding-top:24px;border-top:1px solid var(--line,rgba(148,178,255,.14))}
.lx-doc .lx-body .pt-rel-t{
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim,#5f77a8);
  margin-bottom:12px;display:flex;align-items:center;gap:9px;
}
.lx-doc .lx-body .pt-rel-t::before{content:'';width:16px;height:1px;flex:none;
  background:var(--grad,linear-gradient(135deg,#2f6bff,#38bdf8))}
.lx-doc .lx-body a.pt-rel-a{
  display:flex;align-items:center;gap:15px;
  padding:15px 17px;border-radius:14px;
  border:1px solid var(--line,rgba(148,178,255,.14));
  background:rgba(148,178,255,.035);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.lx-doc .lx-body a.pt-rel-a:hover{
  transform:translateY(-2px);
  border-color:var(--line2,rgba(148,178,255,.24));
  background:rgba(148,178,255,.06);
}
.lx-doc .lx-body .pt-rel-i{
  flex:none;width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(47,107,255,.2),rgba(56,189,248,.09));
  border:1px solid rgba(96,150,255,.26);color:#8db8ff;
}
.lx-doc .lx-body .pt-rel-i svg{width:19px;height:19px}
.lx-doc .lx-body .pt-rel-b{flex:1;min-width:0}
.lx-doc .lx-body .pt-rel-k{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#7fb0ff;
}
.lx-doc .lx-body .pt-rel-n{
  display:block;font-size:14.5px;font-weight:650;color:#dfe9ff;
  line-height:1.4;margin-top:3px;
}
.lx-doc .lx-body .pt-rel-m{font-size:11.5px;color:var(--dim,#5f77a8);margin-top:4px}
.lx-doc .lx-body .pt-rel-arrow{flex:none;color:var(--dim,#5f77a8);transition:transform .18s ease,color .18s ease}
.lx-doc .lx-body .pt-rel-arrow svg{width:16px;height:16px;display:block}
.lx-doc .lx-body a.pt-rel-a:hover .pt-rel-arrow{transform:translateX(3px);color:#38bdf8}

/* ------------------------------------------------------------
   12. .pt-pn — prev / next article navigation.
   ------------------------------------------------------------ */
.lx-doc .lx-body .pt-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.lx-doc .lx-body a.pt-pn-a{
  display:block;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line,rgba(148,178,255,.14));
  background:rgba(148,178,255,.03);min-width:0;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.lx-doc .lx-body a.pt-pn-a:hover{
  transform:translateY(-2px);
  border-color:var(--line2,rgba(148,178,255,.24));
  background:rgba(148,178,255,.06);
}
.lx-doc .lx-body .pt-pn-l{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim,#5f77a8);
}
.lx-doc .lx-body .pt-pn-l svg{width:12px;height:12px}
.lx-doc .lx-body .pt-pn-t{
  display:block;font-size:13.5px;font-weight:650;color:#d5e1fa;
  line-height:1.45;margin-top:6px;
}
.lx-doc .lx-body a.pt-pn-a.next{text-align:right}
.lx-doc .lx-body a.pt-pn-a.next .pt-pn-l{justify-content:flex-end}
@media (max-width:560px){.lx-doc .lx-body .pt-pn{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   13. Links inside the doc body — our nav/card rows must not
   pick up the underline that .lx-body gives plain <a>.
   ------------------------------------------------------------ */
.lx-doc .lx-body a.btn,.lx-doc .lx-body a.pt-rel-a,.lx-doc .lx-body a.pt-pn-a{
  text-decoration:none;color:inherit;
}
.lx-doc .lx-body a.pt-rel-a:hover,.lx-doc .lx-body a.pt-pn-a:hover{color:inherit}

/* ------------------------------------------------------------
   14. Reduced motion + print.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .lx-doc .lx-body a.pt-rel-a,.lx-doc .lx-body a.pt-pn-a,
  .lx-doc .lx-body .pt-table tbody tr,
  .lx-doc .lx-body .pt-rel-arrow{transition:none}
  .lx-doc .lx-body a.pt-rel-a:hover,.lx-doc .lx-body a.pt-pn-a:hover{transform:none}
  .lx-doc .lx-body a.pt-rel-a:hover .pt-rel-arrow{transform:none}
}
@media print{
  .pt-hero{padding-top:0}
  .lx-doc .lx-body .pt-chip,.lx-doc .lx-body .pt-keys,.lx-doc .lx-body .pt-stat,
  .lx-doc .lx-body .pt-limits,.lx-doc .lx-body .pt-warn,.lx-doc .lx-body .pt-cta,
  .lx-doc .lx-body .pt-twrap,.lx-doc .lx-body a.pt-rel-a,.lx-doc .lx-body a.pt-pn-a{
    border-color:#bbb;background:none;box-shadow:none;
  }
  .lx-doc .lx-body .pt-keys::before,.lx-doc .lx-body .pt-warn::before,
  .lx-doc .lx-body .pt-cta::before,.lx-doc .lx-body .pt-cta::after{display:none}
  .lx-doc .lx-body .pt-keys-t,.lx-doc .lx-body .pt-rel-k{color:#333}
  .lx-doc .lx-body .pt-keys li,.pt-dek,
  .lx-doc .lx-body .pt-warn p,.lx-doc .lx-body .pt-limits li,
  .lx-doc .lx-body .pt-table td{color:#111}
  .lx-doc .lx-body .pt-stat b{background:none;color:#000;-webkit-text-fill-color:#000}
  .lx-doc .lx-body .pt-cta-r{display:none}
  .lx-doc .lx-body code{color:#111;border-color:#bbb;background:none}
}