/* ==========================================================
   Ascent Learn v2 — Article Page Stylesheet
   Scope: .learn-v2-page (loaded once by show_v2.blade.php)
   Article `content` field only needs the markup — every class
   used below (callout, table-wrap, card-grid, stepper, acc,
   case-card, capgrid, mid-cta, author-card, takeaways, quickbar,
   badge) is already styled here, globally, once.
   ========================================================== */

.bannhead {
  overflow: unset;
}

.learn-v2-page {
  --ink:#14213D; --ink-soft:#5A6685; --ink-faint:#8B93AC;
  --paper:#F4F5F7; --paper-card:#FFFFFF;
  --line:#E1E4EA;
  --teal:#147D6F; --teal-deep:#0D5A50; --teal-soft:#E4F1EE;
  --red:#C1442D; --red-soft:#FBEAE6;
  --amber:#B9760A; --amber-soft:#FBF0DE;
  --blue:#5B7B9A; --blue-soft:#E9EFF4;
  --green:#3E8E5A; --green-soft:#E7F3EA;
  --violet:#6E5AA8; --violet-soft:#EEEAF7;
  --radius:12px; --maxw:760px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  line-height: 1.68;
  font-size: 16.5px;
}
.learn-v2-page * { box-sizing: border-box; }
.learn-v2-page h1, .learn-v2-page h2, .learn-v2-page h3, .learn-v2-page h4 {
  font-family: 'Inter', 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.learn-v2-page a { color: var(--teal); }

#learn-v2-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--teal), #4FB3A2);
  z-index: 1000;
}

/* ---------- Layout shell ---------- */
.learn-v2-page .shell {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 100px;
  display: grid; grid-template-columns: 248px 1fr; gap: 60px; align-items: start;
}

/* ---------- Hero ---------- */
.learn-v2-page .hero {
  grid-column: 1 / -1; padding: 52px 0 40px; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
}
.learn-v2-page .hero-tag {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--teal);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.learn-v2-page .hero-tag::before { content: ""; width: 16px; height: 1px; background: var(--teal); }
.learn-v2-page h1.title { font-size: 2.2rem; margin: 0 0 16px; max-width: 600px; }
.learn-v2-page .lede { font-size: 16.5px; color: var(--ink-soft); max-width: 520px; margin: 0 0 22px; }
.learn-v2-page .meta { color: var(--ink-faint); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; font-family: 'Inter', sans-serif; }

.learn-v2-page .flow-card { background: var(--ink); border-radius: 16px; padding: 22px 18px; color: #fff; position: relative; overflow: hidden; }
.learn-v2-page .flow-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(20,125,111,.35), transparent 55%); pointer-events: none; }
.learn-v2-page .flow-card .label { font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #9BA8C7; margin-bottom: 16px; }
.learn-v2-page .flow { display: flex; flex-direction: column; gap: 0; position: relative; }
.learn-v2-page .flow-node { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 500; position: relative; z-index: 1; }
.learn-v2-page .flow-arrow { width: 2px; height: 16px; background: linear-gradient(var(--teal),transparent); margin: 0 0 0 20px; position: relative; }
.learn-v2-page .flow-arrow::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: var(--teal); border-radius: 50%; animation: pulse-down 2.4s infinite; }
@keyframes pulse-down { 0%{top:-16px; opacity:0;} 15%{opacity:1;} 100%{top:0; opacity:0;} }

/* ---------- Sidebar TOC ---------- */
.learn-v2-page nav.toc { position: sticky; top: 0px; overflow-y: auto; padding-right: 6px; padding-top: 38px; }
.learn-v2-page nav.toc .eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 12px; display: block; }
.learn-v2-page nav.toc ol {max-height: calc(100vh - 200px); overflow: auto; list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); counter-reset: toc; }
.learn-v2-page nav.toc li { margin: 0; counter-increment: toc; }
.learn-v2-page nav.toc a { display: flex; gap: 8px; align-items: baseline; padding: 6px 0 6px 14px; text-decoration: none; color: var(--ink-soft); font-size: 13px; border-left: 2px solid transparent; margin-left: -2px; transition: all .15s; }
.learn-v2-page nav.toc a::before { content: counter(toc,decimal-leading-zero); font-family: 'Inter', sans-serif; font-size: 10px; color: var(--ink-faint); }
.learn-v2-page nav.toc a:hover { color: var(--ink); }
.learn-v2-page nav.toc a.active { color: var(--teal); border-left-color: var(--teal); font-weight: 600; }
.learn-v2-page nav.toc a.active::before { color: var(--teal); }
.learn-v2-page .toc-progress { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: 'Inter', sans-serif; font-size: 11px; color: var(--ink-faint); }
.learn-v2-page .toc-progress .bar-track { height: 4px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.learn-v2-page .toc-progress .bar-fill { height: 100%; width: 0%; background: var(--teal); transition: width .1s; }

/* ---------- Article body base ---------- */
.learn-v2-page main { max-width: auto; padding-top: 38px; }
.learn-v2-page section { margin-bottom: 56px; scroll-margin-top: 84px; }
.learn-v2-page h2 { font-size: 1.45rem; margin: 32px 0 18px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; scroll-margin-top: 84px; }
.learn-v2-page h2:first-child, .learn-v2-page section:first-of-type h2 { border-top: none; padding-top: 0; margin-top: 0; }
.learn-v2-page h2 .idx { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--teal); font-weight: 600; }
.learn-v2-page h3 { font-size: 1.08rem; margin: 26px 0 10px; color: #000000; }
.learn-v2-page h4 { font-size: 0.98rem; margin: 18px 0 6px; }
.author-card .learn-v2-page h4 { margin: 0 }
.learn-v2-page p { margin: 0 0 16px; color: #2A344F; }
.learn-v2-page ul { margin: 0 0 16px; padding-left: 20px; }
.learn-v2-page li { margin-bottom: 6px; color: #2A344F; }

/* ---------- Mobile TOC ---------- */
.learn-v2-page .mobile-toc { display: none; }
@media (max-width: 920px) {
  .learn-v2-page .shell { grid-template-columns: 1fr; }
  .learn-v2-page .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .learn-v2-page nav.toc { display: none; }
  .learn-v2-page main { padding-top: 0; }
  .learn-v2-page .mobile-toc { display: none; position: sticky; top: 70px; z-index: 800; background: var(--paper-card); border-bottom: 1px solid var(--line); padding: 10px 20px; margin: 0 -24px 30px; }
  .learn-v2-page .mobile-toc select { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--line); font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); background: #fff; }
}

/* ==========================================================
   COMPONENT LIBRARY — everything an article's `content` field
   is allowed to use. See references/component-guide.md in the
   ascent-learn-builder skill for markup examples of each.
   ========================================================== */

/* Key Takeaways box */
.learn-v2-page .takeaways { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px 26px; margin: 24px 0; position: relative; overflow: hidden; }
.learn-v2-page .takeaways .eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8FB6AD; margin-bottom: 12px; display: block; }
.learn-v2-page .takeaways ul { margin: 0; padding: 0; list-style: none; }
.learn-v2-page .takeaways li { display: flex; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #EAEDF3; }
.learn-v2-page .takeaways li::before { content: "✓"; color: #5FC9B4; font-weight: 700; flex-shrink: 0; }

/* Quickbar */
.learn-v2-page .quickbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.learn-v2-page .quickbar span { background: var(--teal-soft); color: var(--teal-deep); font-size: 12.5px; padding: 6px 12px; border-radius: 20px; font-weight: 500; }

/* Badges */
.learn-v2-page .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.learn-v2-page .badge { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 5px 11px; border-radius: 6px; text-transform: uppercase; }
.learn-v2-page .badge.b-teal { background: var(--teal-soft); color: var(--teal-deep); }
.learn-v2-page .badge.b-blue { background: var(--blue-soft); color: #33506B; }
.learn-v2-page .badge.b-amber { background: var(--amber-soft); color: #8C5A05; }
.learn-v2-page .badge.b-violet { background: var(--violet-soft); color: #4E3E85; }
.learn-v2-page .badge.b-green { background: var(--green-soft); color: #2E6B44; }
.learn-v2-page .badge.b-red { background: var(--red-soft); color: #94341F; }

/* Callouts */
.learn-v2-page .callout { border-radius: var(--radius); padding: 16px 18px; margin: 20px 0; background: var(--paper-card); box-shadow: 0 1px 2px rgba(20,33,61,.04); display: flex; gap: 12px; border: 1px solid var(--line); border-left-width: 4px; }
.learn-v2-page .callout .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.learn-v2-page .callout .content .tag { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 5px; display: block; }
.learn-v2-page .callout .content p { margin: 0; font-size: 14.5px; }
.learn-v2-page .callout.example { border-left-color: var(--teal); }
.learn-v2-page .callout.example .icon, .learn-v2-page .callout.example .tag { color: var(--teal); }
.learn-v2-page .callout.tip { border-left-color: var(--blue); }
.learn-v2-page .callout.tip .icon, .learn-v2-page .callout.tip .tag { color: var(--blue); }
.learn-v2-page .callout.mistake { border-left-color: var(--red); }
.learn-v2-page .callout.mistake .icon, .learn-v2-page .callout.mistake .tag { color: var(--red); }
.learn-v2-page .callout.fact { border-left-color: var(--amber); }
.learn-v2-page .callout.fact .icon, .learn-v2-page .callout.fact .tag { color: var(--amber); }
.learn-v2-page .callout.practice { border-left-color: var(--green); }
.learn-v2-page .callout.practice .icon, .learn-v2-page .callout.practice .tag { color: var(--green); }

/* Tables */
.learn-v2-page .table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20,33,61,.04); }
.learn-v2-page table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 14px; }
.learn-v2-page th { background: var(--ink); color: #fff; text-align: left; padding: 10px 14px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.learn-v2-page td { padding: 10px 14px; border-top: 1px solid var(--line); color: #2A344F; }
.learn-v2-page tr:nth-child(even) td { background: #FAFBFC; }
@media (max-width: 640px) {
  .learn-v2-page .table-wrap table { min-width: 0; }
  .learn-v2-page .table-wrap thead { display: none; }
  .learn-v2-page .table-wrap tr { display: block; border-top: 1px solid var(--line); padding: 10px 0; }
  .learn-v2-page .table-wrap tr:first-child { border-top: none; }
  .learn-v2-page .table-wrap td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 5px 14px; text-align: right; }
  .learn-v2-page .table-wrap td::before { content: attr(data-label); font-weight: 600; color: var(--ink-soft); font-size: 12px; text-align: left; }
}

/* Card grid */
.learn-v2-page .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 22px 0; }
.learn-v2-page .icard { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: 0 1px 2px rgba(20,33,61,.04); }
.learn-v2-page .icard .num { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--teal); font-weight: 600; margin-bottom: 6px; display: block; }
.learn-v2-page .icard h4 { margin: 0 0 6px; font-size: 1rem; }
.learn-v2-page .icard p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* Stepper */
.learn-v2-page .stepper { position: relative; margin: 24px 0; padding-left: 8px; }
.learn-v2-page .step { position: relative; padding: 2px 0 30px 44px; border-left: 2px solid var(--line); margin-left: 15px; }
.learn-v2-page .step:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
.learn-v2-page .step .num { position: absolute; left: -18px; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; }
.learn-v2-page .step.active .num { background: var(--teal); box-shadow: 0 0 0 5px var(--teal-soft); }
.learn-v2-page .step h4 { margin: 2px 0 6px 4px; font-size: 1.03rem; }
.learn-v2-page .step .body { margin-left: 4px; }

/* Accordion */
.learn-v2-page details.acc { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.learn-v2-page details.acc summary { padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.learn-v2-page details.acc summary::-webkit-details-marker { display: none; }
.learn-v2-page details.acc summary::after { content: "+"; font-family: 'Inter', sans-serif; color: var(--teal); font-size: 18px; }
.learn-v2-page details.acc[open] summary::after { content: "–"; }
.learn-v2-page details.acc .acc-body { padding: 0 16px 15px; font-size: 14.5px; color: var(--ink-soft); }

/* Case cards */
.learn-v2-page .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
@media (max-width: 700px) { .learn-v2-page .case-grid { grid-template-columns: 1fr; } }
.learn-v2-page .case-card:only-child {grid-column: span 2;}
.learn-v2-page .case-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.learn-v2-page .case-card .cs-tag { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--violet); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: block; }
.learn-v2-page .case-card .row { margin-bottom: 8px; margin-inline: 0px; }
.learn-v2-page .case-card .row b { font-size: 12.5px; color: var(--ink-soft); display: block; margin-bottom: 2px; }

/* Capgrid */
.learn-v2-page .capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.learn-v2-page .capcard { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; }
.learn-v2-page .capcard h4 { margin: 0 0 6px; font-size: .98rem; color: var(--teal-deep); }

/* Mid-article CTA */
.learn-v2-page .mid-cta { background: linear-gradient(135deg, #14213D, #1C3059); color: #fff; border-radius: var(--radius); padding: 30px 28px; margin: 36px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; position: relative; overflow: hidden; }
.learn-v2-page .mid-cta p { color: #D6DCEA; margin: 0; max-width: 420px; font-size: 14px; }
.learn-v2-page .mid-cta h3 { color: #fff; margin: 0 0 6px; font-size: 1.15rem; }
.learn-v2-page .mid-cta a { background: var(--teal); color: #fff; text-decoration: none; padding: 11px 20px; border-radius: 7px; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Author card */
.learn-v2-page .author-card { display: flex; gap: 16px; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; align-items: flex-start; }
.learn-v2-page .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; flex-shrink: 0; }
.learn-v2-page .author-card .role { font-size: 13px; color: var(--teal); font-weight: 600; margin-bottom: 8px; }

.takeaways .learn-v2-page h3, .learn-v2-page .takeaways h3 { color: #ffffff; margin-top: 0px; }
.author-card .learn-v2-page h4, .learn-v2-page .author-card h4 { margin: 0; }