/* Стили страницы functionality.php — подробный разбор функционала по разделам.
   Переиспользует токены и часть компонентов css/blog.css + css/landing.css (.insight-flow,
   .help-list/.help-item, .btn, section-*) — здесь только то, чего там ещё нет. */

.func-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.func-intro { padding: 44px 0 6px; max-width: 780px; }
.func-crosslink { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.func-crosslink a { color: var(--text-muted); }
.func-intro h1 { font-family: var(--font-heading); font-size: 32px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 14px; }
.func-intro .lead { color: var(--text-secondary); font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.func-intro .lead a { color: var(--primary); font-weight: 700; }
.func-note { font-size: 13px; color: var(--text-muted); background: var(--primary-light); border-radius: var(--r); padding: 10px 14px; margin: 0; }

.func-arch { padding: 30px 0 20px; }
.func-arch .insight-flow { margin-bottom: 14px; }
.func-arch-note { font-size: 13.5px; color: var(--text-secondary); max-width: 78ch; margin: 0; line-height: 1.6; }

.func-body { display: grid; grid-template-columns: 250px 1fr; gap: 48px; padding: 20px 0 80px; align-items: start; }

.func-toc { position: sticky; top: 86px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; }
.func-toc-group { margin-bottom: 20px; }
.func-toc-phase { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 8px; }
.func-toc a { display: block; font-size: 13.5px; color: var(--text-secondary); padding: 5px 10px; border-radius: var(--r-xs); text-decoration: none; }
.func-toc a:hover, .func-toc a.is-active { background: var(--primary-light); color: var(--primary); font-weight: 700; }

.func-main { min-width: 0; }

.func-phase-divider { margin: 8px 0 26px; padding-top: 10px; border-top: 2px solid var(--border); }
.func-phase-title { font-family: var(--font-heading); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--primary); margin: 0; }
.func-phase-divider p { color: var(--text-secondary); font-size: 14px; max-width: 74ch; margin: 6px 0 0; line-height: 1.55; }

.func-module { padding: 34px 0; border-bottom: 1px dashed var(--border); scroll-margin-top: 90px; }
.func-module:last-of-type { border-bottom: none; }

.func-module-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; }
.func-module-icon { width: 40px; height: 40px; border-radius: var(--r); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.func-module-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.func-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.func-badge.base { background: var(--success-light); color: var(--success); }
.func-badge.paid { background: var(--orange-light); color: var(--orange); }
.func-badge.dev { background: var(--bg); color: var(--text-muted); border: 1px dashed var(--border); }
.func-crumb { font-size: 12px; color: var(--text-muted); }
.func-module h2 { font-family: var(--font-heading); font-size: 21px; font-weight: 800; margin: 0; }
.func-summary { color: var(--text-secondary); font-size: 14.5px; max-width: 76ch; margin: 0 0 4px; line-height: 1.62; }

.func-example {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; margin: 18px 0 20px;
}
.func-example .fe-tag { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.func-example .fe-before .fe-tag { color: var(--danger); }
.func-example .fe-after .fe-tag { color: var(--success); }
.func-example p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.func-example .fe-arrow { display: flex; align-items: center; color: var(--text-muted); }

.func-controls.help-list { max-width: none; box-shadow: none; margin: 4px 0 16px; }
.ctrl-list { list-style: none; margin: 0; padding: 0; }
.ctrl-list li { font-size: 13px; color: var(--text-secondary); padding: 7px 0; border-bottom: 1px dashed var(--border); line-height: 1.55; }
.ctrl-list li:last-child { border-bottom: none; }
.ctrl-list li b { color: var(--text); font-weight: 700; }
.ctrl-tag { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--orange); background: var(--orange-light); padding: 1px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }

.func-rel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.func-rel-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.func-rel-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 20px; background: var(--primary-light); color: var(--primary); text-decoration: none; }
.func-rel-chip.is-future { background: var(--bg); color: var(--text-muted); font-weight: 500; border: 1px dashed var(--border); }

.func-connections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 12px; }
.func-conn-scenario { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
.func-conn-scenario h3 { font-family: var(--font-heading); font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.func-conn-scenario p { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.55; }
.func-conn-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.func-conn-arrow { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; }

.func-monetization { max-width: 78ch; }
.func-monetization p { font-size: 14px; color: var(--text-secondary); line-height: 1.62; margin: 0 0 12px; }
.func-monetization a { color: var(--primary); font-weight: 700; }

.func-final-cta { text-align: center; padding: 48px 24px; margin: 36px 0 0; background: var(--primary-light); border-radius: var(--r-lg); }
.func-final-cta h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.func-final-cta p { color: var(--text-secondary); font-size: 14.5px; margin: 0 0 18px; }

@media (max-width: 900px) {
  .func-body { grid-template-columns: 1fr; gap: 20px; }
  .func-toc { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 20px 32px; }
  .func-toc-group { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .func-intro h1 { font-size: 25px; }
  .func-example { grid-template-columns: 1fr; }
  .func-example .fe-arrow { display: none; }
  .func-module-head { gap: 10px; }
}