/* ============================================================
   LedgerWise AI — insights styles
   Extends styles.css. Loaded on /insights pages and the home page teaser.
   ============================================================ */

/* ---------- reading progress ---------- */
.read-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),var(--accent-dk));
  transition:transform .1s linear;
  pointer-events:none;
}

/* ---------- insights masthead ---------- */
.blog-hero{padding:clamp(52px,7vw,92px) 0 clamp(34px,4vw,52px);}
.blog-hero .h2{margin-top:18px;}
.blog-hero .lead{margin-top:20px;max-width:620px;}

/* filter chips */
.blog-filters{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:38px;padding-top:28px;border-top:1px solid var(--line);
}
.chip{
  font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--muted);
  background:transparent;border:1.5px solid var(--line);border-radius:999px;
  padding:.5em 1.05em;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.chip:hover{color:var(--brand-700);border-color:var(--accent-line);}
.chip.active{color:#fff;background:var(--brand);border-color:var(--brand);}

/* ---------- shared card visual ---------- */
.pc-visual{
  position:relative;overflow:hidden;
  background:var(--paper-2);
  border-bottom:1px solid var(--line-2);
  /* faint blueprint grid */
  background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:26px 26px;
}
.pc-visual img{width:100%;height:100%;object-fit:cover;}
.pc-visual .pixel-motif{position:absolute;right:22px;bottom:20px;gap:5px;}
.pc-cat{
  position:absolute;top:18px;left:20px;
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-deep);
  background:var(--card);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;
}

/* ---------- featured post ---------- */
.post-featured{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .3s ease;
}
.post-featured:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.post-featured .pc-visual{
  min-height:340px;border-bottom:none;border-right:1px solid var(--line-2);
  background-image:none;background:linear-gradient(155deg,var(--ink),var(--ink-700));
}
/* motif moves to the top-right so it can never collide with the headline */
.post-featured .pc-visual .pixel-motif{top:22px;bottom:auto;right:22px;}
.post-featured .pc-visual .pixel-motif i{background:var(--accent-dk);}
.post-featured .pc-visual .pc-cat{
  color:var(--accent-dk2);background:rgba(255,255,255,.08);border-color:var(--line-dark);
}
.post-featured .pf-title{
  position:absolute;left:clamp(26px,3vw,38px);right:clamp(26px,3vw,38px);bottom:clamp(26px,3vw,38px);
  color:#fff;font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.14;font-weight:600;
  max-width:21ch;
}
.pf-body{padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center;}
.pf-flag{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px;
}
.pf-body .pf-ex{
  font-family:var(--serif);font-size:clamp(1.12rem,1.5vw,1.28rem);
  line-height:1.55;color:var(--text);
}
.pf-body .pc-meta{padding:22px 0 0;margin-top:22px;border-top:1px solid var(--line-2);}
.pf-body .linklike{margin-top:22px;}
.post-featured:hover .linklike .arr{transform:translateX(3px);}

/* ---------- post grid ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;}
.post-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;position:relative;
  transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease;
}
.post-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:2;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.post-card:hover::before{transform:scaleX(1);}
.post-card .pc-visual{height:172px;}
.pc-body{padding:26px 26px 0;flex:1;}
.pc-body h3{font-size:1.24rem;line-height:1.2;}
.post-card:hover .pc-body h3{color:var(--brand-700);}
.pc-body p{margin-top:12px;color:var(--muted);font-size:.96rem;line-height:1.6;}
.pc-meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:22px 26px 24px;margin-top:20px;
  font-family:var(--sans);font-size:.82rem;color:var(--muted-2);
}
.pc-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2);opacity:.6;}

/* home page teaser section */
.insights-grid{margin-top:54px;}
.insights-more{margin-top:44px;text-align:center;}

.blog-empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius);
}

/* ---------- article ---------- */
.article-head{padding:clamp(38px,5vw,66px) 0 clamp(28px,3.4vw,44px);}
.crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.85rem;color:var(--muted);
}
.crumbs a{color:var(--muted);transition:color .2s ease;}
.crumbs a:hover{color:var(--brand-700);}
.crumbs .sl{color:var(--muted-2);opacity:.7;}
.crumbs .cur{color:var(--text);font-weight:500;}

.article-head h1{
  margin-top:22px;max-width:22ch;
  font-size:clamp(2.15rem,4.1vw,3.3rem);line-height:1.06;letter-spacing:-.018em;
}
.article-head .standfirst{
  margin-top:22px;max-width:660px;
  font-size:clamp(1.1rem,1.4vw,1.28rem);line-height:1.58;color:var(--muted);
}
.article-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.88rem;color:var(--muted);
}
.article-meta .avatar{width:38px;height:38px;font-size:.82rem;}
.article-meta .who{font-weight:600;color:var(--text);}
.article-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2);opacity:.6;}
.article-meta .tag-pill{
  margin-left:auto;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent-soft);
  padding:6px 13px;border-radius:999px;
}

/* layout: content column + sticky contents rail */
.article-layout{
  display:grid;grid-template-columns:minmax(0,720px) 232px;
  gap:clamp(40px,5vw,72px);justify-content:start;
  padding-bottom:clamp(56px,7vw,96px);
}
.toc{position:sticky;top:104px;align-self:start;}
.toc .toc-label,.toc h4{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;line-height:1.4;
}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1.5px solid var(--line);}
.toc a{
  display:block;padding:8px 0 8px 16px;margin-left:-1.5px;
  border-left:1.5px solid transparent;
  font-size:.88rem;line-height:1.4;color:var(--muted);
  transition:color .2s ease,border-color .2s ease;
}
.toc a:hover{color:var(--brand-700);}
.toc a.active{color:var(--brand-700);font-weight:600;border-left-color:var(--accent);}

/* ---------- article prose ---------- */
.article-body{font-family:var(--serif);font-size:1.16rem;line-height:1.72;color:var(--text);}
.article-body > * + *{margin-top:1.35em;}
.article-body p{text-wrap:pretty;}
/* prose links only — buttons inside the body keep their own styling */
.article-body a:not(.btn){
  color:var(--brand-700);text-decoration:underline;
  text-decoration-color:var(--accent-line);text-underline-offset:3px;
  transition:text-decoration-color .2s ease;
}
.article-body a:not(.btn):hover{text-decoration-color:var(--brand);}
.article-body strong{font-weight:700;}
.article-body h2{
  font-size:clamp(1.5rem,2.3vw,1.92rem);line-height:1.16;
  margin-top:2.1em;scroll-margin-top:96px;
}
.article-body h3{
  font-size:clamp(1.18rem,1.6vw,1.34rem);line-height:1.22;
  margin-top:1.7em;scroll-margin-top:96px;
}
.article-body h4{
  font-family:var(--sans);font-size:1.02rem;font-weight:600;line-height:1.3;
  margin-top:1.5em;
}
.article-body h2 + p,.article-body h3 + p,.article-body h4 + p{margin-top:.7em;}
.article-body ul,.article-body ol{padding-left:1.3em;display:grid;gap:.6em;}
.article-body li{padding-left:.25em;}
.article-body li::marker{color:var(--brand);}
.article-body hr{
  border:none;height:1px;background:var(--line);
  margin-top:2.4em;margin-bottom:2.4em;
}
.article-body img{border-radius:var(--radius);border:1px solid var(--line);}
.article-body figure{margin-left:0;margin-right:0;}
.article-body figcaption{
  margin-top:12px;font-family:var(--sans);font-size:.85rem;color:var(--muted-2);line-height:1.5;
}
.article-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--paper-2);border:1px solid var(--line-2);
  padding:.14em .42em;border-radius:6px;
}

/* pull quote */
.article-body blockquote{
  margin:2.2em 0;padding:4px 0 4px 28px;border-left:3px solid var(--accent);
  font-size:1.28rem;line-height:1.5;font-weight:500;letter-spacing:-.005em;color:var(--text);
}
.article-body blockquote p{margin:0;}
.article-body blockquote cite{
  display:block;margin-top:14px;font-family:var(--sans);font-size:.86rem;
  font-style:normal;font-weight:600;color:var(--muted);
}

/* callout box */
.callout{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:26px 28px;box-shadow:var(--shadow-sm);
}
/* The label is a <p>, not a heading: a callout is an aside, not a document
   section, and the "Short answer" box sits above the first h2 — an <h4> there
   would skip heading levels on every post. <h4> still styles, just in case. */
.callout > .callout-label,.callout > h4{
  font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px;
}
.callout p,.callout ul,.callout ol{font-size:1.02rem;line-height:1.62;}
.callout > .callout-label{font-size:.75rem;line-height:1.4;}
.callout > * + *{margin-top:.9em;}

/* key-numbers strip */
.stat-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat-strip .n{font-family:var(--serif);font-size:2.1rem;font-weight:700;line-height:1;color:var(--brand-700);}
.stat-strip .l{
  margin-top:10px;font-family:var(--sans);font-size:.86rem;line-height:1.45;color:var(--muted);
}

/* table */
.article-body table{
  width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.94rem;
}
.article-body th,.article-body td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:top;
}
.article-body th{
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
.table-scroll{overflow-x:auto;}

/* ---------- copyable document block (e.g. a policy template) ---------- */
.doc-template{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-sm);
  margin-top:2em;
}
.doc-template > * + *{margin-top:1.2em;}
.doc-template > h3:first-child{margin-top:0;}
.doc-template h3{
  font-size:1.3rem;padding-bottom:16px;border-bottom:1px solid var(--line-2);
}
.doc-template h4{
  margin-top:1.9em;padding-top:2px;
  font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--text);
}
.doc-template .doc-front{
  display:grid;gap:6px;font-family:var(--sans);font-size:.9rem;color:var(--muted);
}
.doc-template .doc-front b{color:var(--text);font-weight:600;}
.doc-template table{font-size:.88rem;}
.doc-template p,.doc-template li{font-size:1.04rem;}

/* ---------- in-article FAQ (reuses the site accordion) ---------- */
.article-faq{margin-top:2.2em;}
.article-faq .faq{margin:26px 0 0;max-width:none;}
.article-faq .faq-q{font-size:1.06rem;padding:22px 2px;gap:16px;}
.article-faq .faq-q .qn{font-size:.8rem;width:26px;}
.article-faq .faq-a-inner{
  padding:0 2px 24px 42px;font-family:var(--sans);font-size:.98rem;color:var(--muted);
}

/* ---------- sources / disclaimer small print ---------- */
.article-note{
  margin-top:2.4em;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--muted-2);
}
.article-note > * + *{margin-top:.8em;}
.article-note a{color:var(--muted);}

/* ---------- share + author foot ---------- */
.article-foot{
  margin-top:56px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.share-label{
  font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);
}
.share-row{display:flex;gap:10px;margin-left:auto;}
.share-btn{
  width:42px;height:42px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;
}
.share-btn:hover{color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-2px);}
.share-btn svg{width:18px;height:18px;}
.share-btn.copied{color:#fff;background:var(--brand-700);border-color:var(--brand-700);}

/* ---------- article CTA ---------- */
.article-cta{
  margin-top:44px;background:var(--ink);color:var(--on-dark);
  border-radius:18px;padding:clamp(30px,3.6vw,46px);
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.article-cta h3{color:#fff;font-size:clamp(1.4rem,2vw,1.8rem);max-width:18ch;}
.article-cta p{margin-top:14px;color:var(--on-dark-mut);font-size:1.02rem;max-width:52ch;}
.article-cta .btn{margin-top:26px;}
.article-cta .pixel-motif{position:absolute;right:30px;top:30px;opacity:.5;}
.article-cta .pixel-motif i{background:var(--accent-dk);}

/* ---------- related ---------- */
.related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.related-head h2{font-size:clamp(1.6rem,2.4vw,2.1rem);}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .article-layout{grid-template-columns:minmax(0,720px);}
  .toc{display:none;}
}
@media (max-width:960px){
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .post-featured{grid-template-columns:1fr;}
  .post-featured .pc-visual{min-height:250px;border-right:none;border-bottom:1px solid var(--line-2);}
  .post-featured .pf-title{max-width:none;}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr;gap:22px;}
  .article-body{font-size:1.1rem;}
  .article-body blockquote{font-size:1.15rem;padding-left:20px;}
  .article-meta .tag-pill{margin-left:0;}
  .share-row{margin-left:0;}
}