/* Shared lesson-page styles.
   Extracted from the 11 lesson pages, which each carried an identical copy inline.
   Page-specific rules and all @media blocks remain inline in each lesson so they
   still override this file. */

.lesson-hero {
      background: var(--teal-900);
      padding-block: 40px 80px;
      color: var(--on-accent);
      position: relative;
      overflow: hidden;
    }

.lesson-hero-inner {
      max-width: 1024px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 10;
    }

.back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255,255,255,.65);
      font-size: .875rem;
      font-weight: 700;
      text-decoration: none;
      margin-block-end: 28px;
      transition: color .2s;
    }

.back-link:hover { color: var(--surface); }

.back-link svg { flex-shrink: 0; }

.lesson-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-block-end: 20px;
    }

.level-badge, .series-badge {
      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 999px;
    }

.series-badge   { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }

.level-beginner { background: var(--tint-green); color: var(--tint-green-ink); }

.level-inter    { background: var(--tint-amber); color: var(--tint-amber-ink); }

.level-advanced { background: var(--tint-red); color: var(--tint-red-ink); }

.lesson-title {
      font-size: clamp(1.75rem, 4vw, 3rem);
      font-weight: 900;
      line-height: 1.3;
      margin-block-end: 12px;
    }

.lesson-subtitle {
      font-size: 1.15rem;
      font-weight: 600;
      color: rgba(255,255,255,.7);
      line-height: 1.7;
      margin-block-end: 32px;
    }

.lesson-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      font-size: .875rem;
      font-weight: 700;
      color: rgba(255,255,255,.6);
    }

.meta-author {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,.85);
    }

.meta-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: .85rem;
    }

.meta-item { display: flex; align-items: center; gap: 4px; }

.lesson-content { min-width: 0; }

.lesson-content p {
      font-size: 1.1rem;
      font-weight: 500;
      line-height: 2.1;
      color: var(--text-mid);
      margin-block-end: 1.5rem;
    }

.lesson-content h2 {
      font-size: 1.65rem;
      font-weight: 900;
      color: var(--text-strong);
      margin-block: 3rem 1rem;
      padding-block-end: .5rem;
      border-bottom: 3px solid var(--teal-100);
    }

.lesson-content h3 {
      font-size: 1.2rem;
      font-weight: 900;
      color: var(--teal-800);
      margin-block: 2rem .7rem;
    }

.lesson-content strong { color: var(--text-strong); font-weight: 900; }

.lesson-content ul {
      list-style: disc;
      padding-inline-start: 1.5rem;
      margin-block-end: 1.5rem;
    }

.lesson-content ol {
      list-style: decimal;
      padding-inline-start: 1.5rem;
      margin-block-end: 1.5rem;
    }

.lesson-content li {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 2.1;
      color: var(--text-mid);
    }

.lesson-content li strong { color: var(--text-strong); }

.lesson-content p code,
    .lesson-content li code,
    .lesson-content td code {
      background: var(--teal-50);
      color: var(--ink-on-teal);
      padding: 2px 8px;
      border-radius: 6px;
      font-size: .88em;
      direction: ltr;
      display: inline-block;
      font-family: "Courier New", Courier, monospace;
    }

.code-block {
      border-radius: 12px;
      overflow: hidden;
      margin: 1.75rem 0;
      border: 1px solid var(--teal-100);
    }

.code-header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background: var(--teal-900);
      padding: .5rem 1.2rem;
    }

.copy-btn {
      font-size: .7rem;
      font-weight: 800;
      color: var(--teal-200);
      cursor: pointer;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      padding: 3px 14px;
      border-radius: 999px;
      transition: background .2s, color .2s;
    }

.copy-btn:hover { background: rgba(255,255,255,.15); color: var(--surface); }

.copy-btn.copied { color: var(--teal-300); }

.code-block pre {
      margin: 0;
      padding: 1.4rem 1.6rem;
      overflow-x: auto;
      background: #0f0f18;
      color: var(--code-ink);
      line-height: 2;
      direction: ltr;
      text-align: left;
      font-family: "Courier New", Courier, monospace;
      white-space: pre;
      font-size: .88rem;
    }

.code-block code { font-family: "Courier New", Courier, monospace; }

.block-warn     { background: var(--tint-orange); border: 1.5px solid #fed7aa; }

.block-tip      { background: var(--tint-green); border: 1.5px solid #bbf7d0; }

.block-exercise { background: var(--tint-blue); border: 1.5px solid #bfdbfe; }

.block-resources{ background: var(--tint-purple); border: 1.5px solid #ddd6fe; }

.block-icon { font-size: 1.4rem; flex-shrink: 0; margin-block-start: .1rem; }

.block-warn     .block-title { color: var(--tint-orange-ink); }

.block-tip      .block-title { color: var(--tint-green-ink); }

.block-exercise .block-title { color: var(--tint-blue-ink); }

.block-resources .block-title{ color: var(--tint-purple-ink); }

.block-exercise ol, .block-exercise ul,
    .block-resources ul {
      margin: .6rem 0 0;
      padding-inline-start: 1.2rem;
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;
      color: var(--text-mid);
    }

.block-resources ul a { color: var(--tint-purple-ink); font-weight: 700; }

.block-resources ul a:hover { text-decoration: underline; }

.toc-sidebar {
      position: sticky;
      top: 90px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

.sidebar-card {
      background: var(--surface);
      border: 1px solid var(--teal-100);
      border-radius: 16px;
      padding: 20px;
    }

.sidebar-label {
      display: block;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--teal-500);
      margin-block-end: 16px;
    }

.toc-item {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      color: var(--teal-600);
      padding: .35rem .75rem;
      border-radius: 8px;
      border-inline-start: 2px solid transparent;
      text-decoration: none;
      transition: all .2s;
    }

.toc-item:hover { color: var(--ink-on-teal); background: var(--teal-50); }

.toc-item.active {
      color: var(--ink-on-teal);
      font-weight: 800;
      border-inline-start-color: var(--teal-600);
      background: var(--teal-50);
    }

.toc-item.h3-item { padding-inline-start: 1.75rem; font-size: .8rem; }

.related-lessons { display: flex; flex-direction: column; gap: 12px; }

.related-card {
      display: block;
      text-decoration: none;
      border-radius: 12px;
      border: 1px solid var(--teal-100);
      padding: .9rem 1.1rem;
      background: var(--surface);
      transition: border-color .25s, box-shadow .25s, transform .25s;
    }

.related-card:hover {
      border-color: var(--teal-400);
      box-shadow: 0 4px 16px rgba(0,150,136,.1);
      transform: translateY(-2px);
    }

.related-series {
      display: block;
      font-size: .75rem;
      font-weight: 700;
      color: var(--teal-600);
      margin-block-end: 4px;
    }

.related-title {
      display: block;
      font-size: .875rem;
      font-weight: 800;
      color: var(--text-strong);
      line-height: 1.4;
    }

.lesson-share {
      max-width: 1024px;
      margin: 0 auto;
      padding: 0 32px;
      margin-block-end: 32px;
    }

.share-inner {
      border: 1px solid var(--teal-100);
      border-radius: 16px;
      padding: 1.25rem 1.5rem;
      background: var(--surface);
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

.share-label {
      font-size: .875rem;
      font-weight: 700;
      color: var(--teal-600);
    }

.share-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .75rem;
      font-weight: 800;
      padding: 8px 20px;
      border-radius: 12px;
      text-decoration: none;
      transition: opacity .2s;
    }

.share-btn:hover { opacity: .85; }

.share-x  { background: #000; color: var(--on-accent); }

.share-wa { background: #25D366; color: var(--surface); }

.lesson-nav {
      max-width: 1024px;
      margin: 0 auto;
      padding: 0 32px 96px;
    }

.nav-divider {
      border: none;
      border-top: 1px solid var(--teal-100);
      margin: 0 0 48px;
    }

.nav-pair {
      display: flex;
      gap: 16px;
      margin-block-end: 32px;
    }

.nav-btn {
      flex: 1;
      display: block;
      text-decoration: none;
      border: 2px solid var(--teal-200);
      border-radius: 16px;
      padding: 1.2rem 1.5rem;
      background: var(--surface);
      transition: border-color .2s, box-shadow .2s;
    }

.nav-btn:hover {
      border-color: var(--teal-600);
      box-shadow: 0 4px 16px rgba(0,150,136,.1);
    }

.nav-btn-label {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--teal-500);
      margin-block-end: 6px;
    }

.nav-btn-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text-strong);
      line-height: 1.4;
    }

.nav-btn:hover .nav-btn-title { color: var(--teal-700); }

.nav-btn-next .nav-btn-label { justify-content: flex-end; }

.nav-all-lessons { text-align: center; }

.nav-all-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--teal-600);
      color: var(--on-teal);
      font-weight: 800;
      font-size: .875rem;
      padding: 12px 28px;
      border-radius: 12px;
      text-decoration: none;
      transition: background .2s;
    }

.nav-all-link:hover { background: var(--teal-700); }