/* Learn library — терминальная эстетика, категории наследуют цвета чартов */
:root {
  --cat-flow: #4cc3ff;
  --cat-deriv: #a78bfa;
  --cat-struct: #2fbf71;
  --cat-risk: #ef5350;
}

/* ---------- каталог ---------- */
.lb-hero { padding: 40px 20px 8px; max-width: 980px; }
.lb-hero h1 { font: 600 27px/1.15 var(--mono); letter-spacing: .03em; color: #fff; margin: 0 0 12px; }
.lb-hero h1 .amber { color: var(--accent); }
.lb-hero > p { color: var(--dim); font-size: 14px; max-width: 620px; margin: 0; }
.lb-stats { display: flex; gap: 30px; margin: 22px 0 4px; }
.lb-stats .stat .v { font-size: 21px; color: var(--accent); }

.lb-track { padding: 10px 20px; max-width: 980px; }
.lb-track h2 { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 26px 0 4px; }
.lb-track > p { color: var(--dim); margin: 2px 0 12px; }
.rail { display: flex; gap: 8px; flex-wrap: wrap; }
.rail a, .rail span.step {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 14px 10px 10px; text-decoration: none;
  background: var(--panel); transition: border-color .15s;
}
.rail a:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.rail .n { font: 600 10px/1 var(--mono); color: var(--accent); }
.rail .t { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.rail span.step { opacity: .45; }

.lb-cat { padding: 6px 20px; max-width: 980px; }
.lb-cat h2 { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 30px 0 10px; }
.lb-cat h2::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.lb-cat h2 .cnt { color: var(--faint); font-weight: 500; letter-spacing: .08em; }
.lb-cat.flow h2 { color: var(--cat-flow); }
.lb-cat.deriv h2 { color: var(--cat-deriv); }
.lb-cat.struct h2 { color: var(--cat-struct); }
.lb-cat.risk h2 { color: var(--cat-risk); }

.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.scard {
  position: relative; display: block; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  border-left-width: 2px; padding: 14px 14px 12px; transition: border-color .15s;
}
.lb-cat.flow .scard { border-left-color: color-mix(in srgb, var(--cat-flow) 55%, var(--line)); }
.lb-cat.deriv .scard { border-left-color: color-mix(in srgb, var(--cat-deriv) 55%, var(--line)); }
.lb-cat.struct .scard { border-left-color: color-mix(in srgb, var(--cat-struct) 55%, var(--line)); }
.lb-cat.risk .scard { border-left-color: color-mix(in srgb, var(--cat-risk) 55%, var(--line)); }
.lb-cat.flow .scard:hover { border-color: var(--cat-flow); }
.lb-cat.deriv .scard:hover { border-color: var(--cat-deriv); }
.lb-cat.struct .scard:hover { border-color: var(--cat-struct); }
.lb-cat.risk .scard:hover { border-color: var(--cat-risk); }
.scard .eyebrow { font: 500 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.scard h3 { font: 600 14px/1.3 var(--mono); color: var(--text); margin: 8px 0 5px; }
.scard p { color: var(--dim); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.chips { display: flex; gap: 6px; }
.chip { font: 500 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--dim); }
.chip.beginner { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.chip.advanced { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.chip.soon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.scard.soon { opacity: .5; pointer-events: none; }

/* ---------- страница сессии ---------- */
.crumb { padding: 22px 20px 0; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.crumb a { color: var(--faint); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.sess-head { padding: 14px 20px 4px; max-width: 980px; }
.sess-head .eyebrow { font: 600 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.sess-head.flow .eyebrow { color: var(--cat-flow); }
.sess-head.deriv .eyebrow { color: var(--cat-deriv); }
.sess-head.struct .eyebrow { color: var(--cat-struct); }
.sess-head.risk .eyebrow { color: var(--cat-risk); }
.sess-head h1 { font: 600 24px/1.2 var(--mono); color: #fff; margin: 10px 0 8px; }
.sess-head .lede { color: var(--dim); font-size: 14px; line-height: 1.65; max-width: 640px; }
.sess-head .chips { margin-top: 12px; }

.patterns { padding: 14px 20px 10px; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pattern {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  transition: border-color .15s;
}
.pattern:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pattern-viz {
  position: relative; aspect-ratio: 5 / 3; padding: 10px 12px 6px;
  /* точечная сетка — как гридлайны чарта */
  background-image: radial-gradient(#161b24 1px, transparent 1px);
  background-size: 9px 9px;
  border-bottom: 1px solid var(--line);
}
.pattern-viz svg { width: 100%; height: 100%; display: block; }
.pattern .tag {
  /* номер паттерна — ценник с оси чарта */
  position: absolute; top: 10px; right: 0;
  font: 600 8.5px/1 var(--mono); letter-spacing: .08em;
  background: var(--accent); color: #0a0c10;
  padding: 4px 7px 4px 8px; border-radius: 3px 0 0 3px;
}
.pattern .body { padding: 12px 14px 13px; }
.pattern h3 { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 6px; }
.pattern .rule { color: var(--dim); font-size: 12.5px; line-height: 1.55; margin: 0 0 8px; }
.pattern .inv { font-size: 11px; line-height: 1.5; color: color-mix(in srgb, var(--down) 70%, var(--dim)); margin: 0; }
.pattern .inv::before { content: "✕ "; font-weight: 600; }

.sess-cta { padding: 8px 20px 20px; }
.sess-cta a { display: inline-block; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 6px; color: var(--accent); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.sess-cta a:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }

.lb-disclaimer { padding: 20px; max-width: 980px; color: var(--faint); font-size: 10.5px; line-height: 1.6; border-top: 1px solid var(--line); margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .scard, .pattern, .rail a { transition: none; }
}