/* ============================================================
   Nova FX — postfx3.css
   Article/post chrome for the Nova Wallet "Learn" hub.
   Companion to legalfx.css (.lx-*) — these blocks assume the doc
   column is upgraded by legalfx.js. All classes namespaced .pt3-*.

   Blocks:
     .pt3-bc     breadcrumb row above the doc layout
     .pt3-lede   standfirst paragraph (intro, larger)
     .pt3-take   "Key takeaways" box + check list
     .pt3-flag   warning callout (red-flag list)
     .pt3-twrap  scroll wrapper + .pt3-table comparison table
     .pt3-note   fine print / footnote line
     .pt3-cta    product CTA card inside the doc
     .pt3-lvl    difficulty-level chip variant (in .lx-meta)
     .pt3-rel    related-reading card helpers
   Static only — no animation; reduced-motion safe by default.
   ============================================================ */

/* ------------------------------------------------------------
   1. .pt3-bc — breadcrumb over the lx-layout block.
   Mirrors the grid: centered column aligned to the paper rail.
   ------------------------------------------------------------ */
.pt3-bc{
  display:flex;align-items:center;gap:9px;
  max-width:1014px;margin:0 auto 22px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--dim,#5f77a8);
}
.pt3-bc a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--mut,#8ea3cc);transition:color .15s ease;
}
.pt3-bc a:hover{color:#9cc8ff}
.pt3-bc a svg{width:12px;height:12px}
.pt3-bc>span::before{content:'/';margin-right:9px;color:rgba(148,178,255,.3)}
@media (max-width:1080px){.pt3-bc{max-width:720px}}

/* ------------------------------------------------------------
   2. .pt3-lede — standfirst. First body element of the doc.
   ------------------------------------------------------------ */
.lx-doc .lx-body p.pt3-lede{
  font-size:16px;line-height:1.75;color:#c3d3f2;
  margin-bottom:22px;
}

/* ------------------------------------------------------------
   3. .pt3-take — key-takeaways panel.
   ------------------------------------------------------------ */
.pt3-take{
  position:relative;margin:6px 0 8px;
  padding:22px 24px 18px;
  background:linear-gradient(165deg,rgba(47,107,255,.10),rgba(56,189,248,.04) 55%,rgba(56,189,248,.02));
  border:1px solid rgba(96,150,255,.30);
  border-radius:16px;
  overflow:hidden;
}
.pt3-take::before{ /* accent rule across the top */
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#2f6bff,#38bdf8 60%,transparent);
}
.pt3-take-t{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#8fc3ff;margin-bottom:13px;
}
.pt3-take-t svg{width:13px;height:13px;flex:none}
.pt3-take ul{margin:0;padding:0;list-style:none}
.pt3-take li{
  position:relative;
  font-size:13.5px;line-height:1.65;color:#b9c9ec;
  padding-left:24px;margin-bottom:9px;
}
.pt3-take li:last-child{margin-bottom:0}
.pt3-take li::before{
  content:'';position:absolute;left:2px;top:5px;
  width:11px;height:6px;
  border-left:2px solid #38bdf8;border-bottom:2px solid #38bdf8;
  transform:rotate(-45deg);
}
.pt3-take li b{color:#e6efff;font-weight:650}

/* ------------------------------------------------------------
   4. .pt3-flag — warning callout ("red flags", watch-outs).
   Amber edge, warm tint. .pt3-flag-t = label row.
   ------------------------------------------------------------ */
.pt3-flag{
  margin:16px 0 18px;padding:18px 20px 14px;
  background:linear-gradient(165deg,rgba(255,201,77,.08),rgba(255,201,77,.02));
  border:1px solid rgba(255,201,77,.30);
  border-left:3px solid var(--amber,#ffc94d);
  border-radius:12px;
}
.pt3-flag-t{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber,#ffc94d);
  margin-bottom:10px;
}
.pt3-flag-t svg{width:13px;height:13px;flex:none}
.pt3-flag ul{margin:0;padding-left:20px}
.pt3-flag li{
  font-size:13.5px;line-height:1.65;
  color:#cfc2a0;margin-bottom:7px;
}
.pt3-flag li:last-child{margin-bottom:0}
.pt3-flag li::marker{color:var(--amber,#ffc94d)}
.pt3-flag li b{color:#f0e6c8;font-weight:650}
.pt3-flag p{font-size:13.5px;color:#cfc2a0;margin:0}

/* ------------------------------------------------------------
   5. .pt3-twrap + .pt3-table — comparison table.
   Scrolls horizontally under ~560px content width.
   ------------------------------------------------------------ */
.pt3-twrap{
  margin:16px 0 8px;overflow-x:auto;
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:14px;
  background:rgba(148,178,255,.03);
}
.pt3-table{
  width:100%;min-width:520px;border-collapse:collapse;
  font-size:13px;line-height:1.5;
}
.pt3-table th,.pt3-table td{
  padding:12px 16px;text-align:left;vertical-align:top;
}
.pt3-table thead th{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim,#5f77a8);
  border-bottom:1px solid var(--line,rgba(148,178,255,.14));
  background:rgba(148,178,255,.05);
  white-space:nowrap;
}
.pt3-table tbody tr{border-top:1px solid rgba(148,178,255,.08)}
.pt3-table tbody tr:first-child{border-top:0}
.pt3-table tbody tr:hover{background:rgba(148,178,255,.045)}
.pt3-table td{color:#a8bbdf}
.pt3-table td.pt3-fee{font-variant-numeric:tabular-nums;font-weight:650;color:#dbe7ff;white-space:nowrap}
.pt3-table td b{color:#e8f0ff;font-weight:650}
/* highlighted Nova row */
.pt3-table tr.pt3-hi{
  background:linear-gradient(90deg,rgba(56,189,248,.10),rgba(47,107,255,.05));
}
.pt3-table tr.pt3-hi:hover{background:linear-gradient(90deg,rgba(56,189,248,.15),rgba(47,107,255,.08))}
.pt3-table tr.pt3-hi td:first-child{
  box-shadow:inset 3px 0 0 #38bdf8;
}
.pt3-tag{
  display:inline-block;margin-left:8px;padding:2px 8px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#8fc3ff;background:rgba(56,140,255,.12);
  border:1px solid rgba(96,150,255,.35);border-radius:999px;
  vertical-align:1px;white-space:nowrap;
}

/* ------------------------------------------------------------
   6. .pt3-note — table footnote / fine print.
   ------------------------------------------------------------ */
.lx-doc .lx-body p.pt3-note{
  font-size:12px;line-height:1.6;color:var(--dim,#5f77a8);
  margin:6px 0 18px;
}

/* ------------------------------------------------------------
   7. .pt3-cta — product CTA card at doc end.
   Extends .card; tighter inside the paper.
   ------------------------------------------------------------ */
.lx-doc .lx-body .card.pt3-cta{
  margin-top:34px;padding:26px 26px 24px;
  border-color:rgba(96,150,255,.30);
  background:linear-gradient(165deg,#0d1e3d,#081327 60%);
}
.lx-doc .lx-body .card.pt3-cta::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad,linear-gradient(135deg,#2f6bff,#38bdf8));
}
.pt3-cta .pt3-cta-t{
  font-size:16.5px;font-weight:700;letter-spacing:-.2px;
  color:#eef4ff;margin:0 0 7px;
}
.pt3-cta p{font-size:13.5px;color:var(--mut,#8ea3cc);line-height:1.65;margin-bottom:16px}
.pt3-cta .pt3-cta-r{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pt3-cta .btn{padding:11px 22px;font-size:13.5px}

/* ------------------------------------------------------------
   8. .pt3-lvl — difficulty chip inside .lx-meta (JS-injected).
   ------------------------------------------------------------ */
.lx-chip.pt3-lvl{
  color:#9ff0c8;background:rgba(53,208,138,.08);
  border-color:rgba(53,208,138,.30);
}
.lx-chip.pt3-lvl svg{color:var(--grn,#35d08a);opacity:1}

/* ------------------------------------------------------------
   9. Related-reading cards — reuse .cards/.card, add helpers.
   ------------------------------------------------------------ */
.pt3-rel-k{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#7fb0ff;
  margin-bottom:12px;
}
.pt3-rel-k svg{width:11px;height:11px}
.card a.pt3-rel-go{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;font-size:13px;font-weight:600;color:#8fc3ff;
  transition:color .15s ease,gap .2s ease;
}
.card a.pt3-rel-go:hover{color:#d8ecff;gap:9px}
.card a.pt3-rel-go svg{width:13px;height:13px}
.card.pt3-rel{transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease}

/* ------------------------------------------------------------
   9b. Inline code inside the doc — hex, function names.
   ------------------------------------------------------------ */
.lx-doc .lx-body code{
  font-family:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  font-size:.86em;color:#a8d8ff;
  background:rgba(56,140,255,.10);
  border:1px solid rgba(96,150,255,.22);
  border-radius:5px;padding:1px 6px;
  word-break:break-word;
}
.lx-doc .lx-body b{color:#d9e6ff}

/* ------------------------------------------------------------
   10. Disclosure line (end of doc, tiny).
   ------------------------------------------------------------ */
.lx-doc .lx-body p.pt3-disc{
  font-size:11.5px;color:var(--dim,#5f77a8);
  border-top:1px solid rgba(148,178,255,.10);
  padding-top:16px;margin-top:30px;
}

/* ------------------------------------------------------------
   11. Print — keep boxes legible on paper (light theme).
   ------------------------------------------------------------ */
@media print{
  .pt3-bc,.pt3-cta .btn{display:none!important}
  .pt3-take,.pt3-flag,.pt3-twrap,.card.pt3-cta{
    background:none!important;border-color:#bbb!important;
    box-shadow:none!important;
  }
  .pt3-take::before,.card.pt3-cta::before,.pt3-table tr.pt3-hi td:first-child{box-shadow:none;background:none}
  .pt3-take-t,.pt3-flag-t{color:#333}
  .pt3-take li,.pt3-flag li,.pt3-flag p,
  .lx-doc .lx-body p.pt3-lede,.pt3-table td,.pt3-table td.pt3-fee{color:#111}
  .pt3-table thead th{color:#333;border-bottom-color:#999}
  .pt3-table tr.pt3-hi{background:none}
  .pt3-tag{color:#333;border-color:#999;background:none}
  .lx-doc .lx-body p.pt3-note,.lx-doc .lx-body p.pt3-disc{color:#444}
  .lx-doc .lx-body code{color:#111;background:none;border-color:#bbb}
  .lx-doc .lx-body b{color:#000}
  .pt3-take li::before{border-color:#333}
  .pt3-twrap{overflow:visible}
}