/* ============================================================================
   Таро-Нейро — LESSON PAGE styles (поверх /assets/design.css)
   Тёмная iridescent-система. Читательский layout: sticky-TOC + проза + density.
   ============================================================================ */

/* ── Reading-progress (вверху страницы) ── */
.progress-rail{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:transparent}
.progress-rail .bar{height:100%; width:0; background:var(--irid); background-size:220% auto; animation:irid 7s linear infinite; box-shadow:0 0 12px var(--accent-soft)}

/* ── Хедер-бар урока (breadcrumb) ── */
.lbar{position:fixed; top:0; left:0; right:0; z-index:40; padding:10px 0}
.lbar .inner{display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:9px 18px; border-radius:14px;
  background:rgba(10,9,22,.66); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.lbar .logo{font-size:1.02rem; gap:9px; white-space:nowrap}
.crumb{display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--muted); min-width:0}
.crumb a{color:var(--soft); text-decoration:none; transition:color .2s; white-space:nowrap}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── Layout ── */
.lesson-layout{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:118px 24px 40px;
  display:grid; grid-template-columns:248px minmax(0,1fr); gap:48px; align-items:start}

/* ── Sidebar / TOC ── */
.sidebar{position:sticky; top:104px; align-self:start}
.toc-title{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--muted); margin-bottom:14px}
.toc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;
  border-left:1px solid var(--line)}
.toc-list a{display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent;
  color:var(--muted); text-decoration:none; font-size:.88rem; line-height:1.35; transition:color .2s, border-color .2s}
.toc-list a:hover{color:var(--soft)}
.toc-list a.active{color:var(--ink); border-left-color:var(--gold)}
.toc-cta{margin-top:22px; display:flex; flex-direction:column; gap:8px;
  padding:16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line)}
.toc-cta b{font-family:var(--font-display); font-size:.95rem}
.toc-cta span{font-size:.82rem; color:var(--muted)}
.toc-cta a{margin-top:4px; text-align:center; font-size:.86rem}

/* ── Content / проза ── */
.content{min-width:0}
.lesson-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.lesson-badge{display:inline-flex; align-items:center; gap:.5em; padding:6px 13px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-family:var(--mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.7rem; color:var(--soft)}
.reading-time{font-size:.84rem; color:var(--muted)}
.lesson-title{font-size:clamp(2rem,4.6vw,3.1rem); margin:0 0 .5em}
.lesson-title span{background-image:var(--irid); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:irid 7s linear infinite}

.content p{color:var(--soft); font-size:1.045rem; line-height:1.72; margin:0 0 1.05em}
.content .lead{font-size:1.18rem; color:var(--ink); line-height:1.6}
.content h2{font-size:clamp(1.5rem,3vw,2rem); margin:1.9em 0 .55em; scroll-margin-top:104px}
.content h3{font-size:1.18rem; margin:1.5em 0 .4em; color:var(--ink)}
.content strong,.content b{color:var(--ink); font-weight:600}
.content em{color:var(--moon); font-style:italic}
.content a:not(.btn){color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-soft); text-underline-offset:3px}
.content ul,.content ol{color:var(--soft); font-size:1.04rem; line-height:1.7; padding-left:1.3em; margin:0 0 1.15em}
.content li{margin-bottom:.5em}
.content hr{border:0; height:1px; background:var(--line); margin:2.4em 0}

/* ── Figure: карты таро ── */
.card-figure{margin:1.6em 0; text-align:center}
.card-figure img{border-radius:12px; border:1px solid var(--gold-soft);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset; max-width:230px; width:100%; height:auto}
.card-row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:1.7em 0}
.card-row figure{margin:0; flex:0 1 160px; text-align:center}
.card-row img{width:100%; height:auto; border-radius:11px; border:1px solid var(--gold-soft);
  box-shadow:0 22px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset}
.card-figure figcaption,.card-row figcaption{margin-top:10px; font-size:.84rem; color:var(--muted); line-height:1.45}
.card-row figcaption{margin-top:8px}
.card-row figcaption b{color:var(--gold); font-weight:600}

/* ── Decision / сравнительные таблицы ── */
.table-wrap{margin:1.6em 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--surface)}
.table-wrap table{width:100%; border-collapse:collapse; font-size:.95rem}
.table-wrap thead th{position:relative; text-align:left; padding:14px 16px; font-family:var(--font-display);
  font-weight:600; color:var(--ink); background:rgba(255,255,255,.04); border-bottom:1px solid var(--line)}
.table-wrap thead tr{position:relative}
.table-wrap thead::after{content:""; display:block}
.table-wrap th:first-child{box-shadow:none}
.table-wrap td{padding:13px 16px; color:var(--soft); border-bottom:1px solid var(--line-soft); vertical-align:top; line-height:1.55}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td:first-child{color:var(--ink); font-weight:500}
.table-wrap tbody tr:hover{background:rgba(255,255,255,.022)}

/* ── Колбэк-блоки ── */
.note,.success-block,.try-block{margin:1.6em 0; padding:18px 20px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); position:relative}
.note{border-left:3px solid var(--accent)}
.success-block{border-left:3px solid var(--gold)}
.try-block{border-left:3px solid var(--cyn)}
.note-title,.success-block-title,.try-block-title{font-family:var(--font-display); font-weight:600;
  color:var(--ink); font-size:1rem; margin-bottom:.5em; display:flex; align-items:center; gap:.5em}
.success-block-title{color:var(--gold)}
.note p:last-child,.success-block p:last-child{margin-bottom:0}
.note ul,.success-block ul,.try-block ul{margin:.3em 0 0; padding-left:1.25em}

/* чек-лист с галочками */
.checklist{list-style:none!important; padding-left:0!important; margin:.4em 0 0}
.checklist li{position:relative; padding-left:30px; margin-bottom:.7em; color:var(--soft)}
.checklist li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:6px;
  background:var(--gold-soft); border:1px solid var(--gold-soft)}
.checklist li::after{content:""; position:absolute; left:6px; top:6px; width:5px; height:9px;
  border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(42deg)}

/* нумерованные шаги */
.steps{list-style:none!important; counter-reset:st; padding-left:0!important; margin:1.3em 0}
.steps li{position:relative; padding-left:44px; margin-bottom:1em; color:var(--soft)}
.steps li::before{counter-increment:st; content:counter(st); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--line)}

/* ── Key-takeaway (iridescent-рамка) ── */
.keybox{position:relative; margin:1.8em 0; padding:20px 22px; border-radius:var(--radius); background:var(--bg-soft)}
.keybox::before{content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:var(--irid); background-size:220% auto; animation:irid 7s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask-composite:exclude; pointer-events:none}
.keybox .k-label{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--gold); margin-bottom:.45em}
.keybox p{margin:0; color:var(--ink); font-size:1.08rem; line-height:1.55}

/* ── Warning / «чего НЕ делать» ── */
.warning-block{margin:1.6em 0; padding:18px 20px; border-radius:var(--radius); background:rgba(244,114,122,.06); border:1px solid rgba(244,114,122,.22); border-left:3px solid #F4727A}
.warning-block-title{font-family:var(--font-display); font-weight:600; color:#F4979D; font-size:1rem; margin-bottom:.5em; display:flex; align-items:center; gap:.5em}
.warning-block ul{margin:.3em 0 0; padding-left:1.25em}
.warning-block li{margin-bottom:.5em; color:var(--soft)}
.warning-block li:last-child{margin-bottom:0}

/* ── Troubleshooting (симптом → что делать) ── */
.fix{margin:1.6em 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.fix-row{display:grid; grid-template-columns:1fr 1.4fr; gap:0; border-bottom:1px solid var(--line-soft)}
.fix-row:last-child{border-bottom:0}
.fix-row>div{padding:13px 16px}
.fix-row .sym{color:var(--ink); font-weight:500; border-right:1px solid var(--line-soft); background:rgba(255,255,255,.02)}
.fix-row .sol{color:var(--soft)}
.fix-head{display:grid; grid-template-columns:1fr 1.4fr; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line)}
.fix-head>div{padding:12px 16px; font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:.92rem}
@media(max-width:560px){.fix-row,.fix-head{grid-template-columns:1fr} .fix-row .sym{border-right:0; border-bottom:1px solid var(--line-soft)} .fix-head>div:last-child{display:none}}

/* ── Mini-FAQ ── */
.faq-block{margin:1.6em 0; display:flex; flex-direction:column; gap:10px}
.faq-item{padding:15px 18px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line)}
.faq-item .faq-q{font-family:var(--font-display); font-weight:600; color:var(--ink); margin-bottom:.35em}
.faq-item .faq-a{color:var(--soft); margin:0; font-size:1rem; line-height:1.6}

/* ── Навигация урок→урок ── */
.lesson-nav{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line)}
.lesson-nav a{display:flex; flex-direction:column; gap:4px; padding:16px 20px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); text-decoration:none; transition:transform .25s, border-color .25s, background .25s}
.lesson-nav a:hover{transform:translateY(-2px); border-color:var(--accent); background:var(--accent-soft)}
.lesson-nav .nav-prev{align-items:flex-start; text-align:left}
.lesson-nav .nav-next{align-items:flex-end; text-align:right}
.lesson-nav .nav-label{font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--muted)}
.lesson-nav .nav-title{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.02rem}

/* ── Footer ── */
.lfooter{position:relative; z-index:2; border-top:1px solid var(--line); margin-top:40px; padding:30px 0}
.lfooter .frow{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:.86rem}
.lfooter a{color:var(--soft); text-decoration:none; margin-left:16px}
.lfooter a:hover{color:var(--ink)}

/* ── Адаптив ── */
@media(max-width:900px){
  .lesson-layout{grid-template-columns:1fr; gap:0; padding-top:96px}
  .sidebar{display:none}
  .lesson-nav{grid-template-columns:1fr}
  .crumb .cur{display:none}
}