/* Учебная демонстрация RAG внутри статьи */
.rag-demo { --g-delivery: var(--r-arch); --g-service: var(--r-back); --g-people: var(--r-front); --g-contract: var(--r-mobile); margin: 28px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: .92rem; line-height: 1.5; box-shadow: var(--shadow); }
.article-body .rag-demo p { margin: 0; }
.rag-label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--ink); }
.rag-field { display: flex; gap: 10px; }
.rag-field input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.rag-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rag-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; transition: color .15s, border-color .15s; }
.rag-chip:hover { color: var(--ink); border-color: var(--muted); }
.article-body .rag-demo ol.rag-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 14px; padding: 0; list-style: none; counter-reset: rag; }
.rag-steps li { counter-increment: rag; margin: 0; padding-top: 8px; border-top: 2px solid var(--line); color: var(--muted); font-size: .84rem; line-height: 1.35; transition: color .3s, border-color .3s; }
.rag-steps li b::before { content: counter(rag) ". "; font-weight: 600; }
.rag-steps li.is-active, .rag-steps li.is-done { color: var(--ink); border-top-color: var(--accent); }
.rag-stage { display: grid; gap: 14px; }
.rag-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); opacity: .4; transition: opacity .4s; }
.rag-card.is-on { opacity: 1; }
.rag-card h4 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rag-hint { min-height: 2.8em; margin-bottom: 12px !important; color: var(--muted); }
.rag-cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.rag-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rag-track { position: relative; width: 100%; max-width: 44px; height: 92px; border-radius: 6px; background: var(--bg-alt); overflow: hidden; }
.rag-track i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transition: height .7s cubic-bezier(.2, .8, .2, 1); }
.rag-q { background: var(--accent); border-radius: 6px 6px 0 0; }
.rag-d { border: 2px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--ink) 10%, transparent); box-sizing: border-box; }
.rag-colname { font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.2; }
.rag-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; min-height: 1.5em; margin-top: 12px !important; font-size: .82rem; color: var(--muted); }
.rag-key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; }
.rag-key-q::before { background: var(--accent); }
.rag-key-d::before { border: 2px solid var(--ink); box-sizing: border-box; }
.rag-sim { margin-left: auto; font-weight: 600; color: var(--ink); }
.rag-find { display: grid; gap: 12px; }
.rag-map { display: block; width: 100%; height: auto; max-height: 420px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.g-delivery { fill: var(--g-delivery); }
.g-service { fill: var(--g-service); }
.g-people { fill: var(--g-people); }
.g-contract { fill: var(--g-contract); }
.rag-dot { stroke: var(--card); stroke-width: .7; transition: r .4s, opacity .4s; }
.rag-dot.is-top { r: 2.7; }
.rag-dot.is-far { opacity: .3; }
.rag-dot.is-picked { r: 3.1; }
.rag-dot.is-archive { fill: var(--muted); }
.rag-dname { font-size: 2.5px; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: .9px; stroke-linejoin: round; transition: opacity .4s; }
.rag-dname.is-top, .rag-dname.is-picked { fill: var(--ink); font-weight: 700; }
.rag-dname.is-far { opacity: .45; }
.rag-star { transform: translate(50px, 50px); opacity: 0; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.rag-star.is-on { opacity: 1; }
.rag-core { fill: var(--accent); stroke: var(--card); stroke-width: .9; }
.rag-core-dot { fill: var(--card); }
.rag-stop.g-delivery { stop-color: var(--g-delivery); }
.rag-stop.g-service { stop-color: var(--g-service); }
.rag-stop.g-people { stop-color: var(--g-people); }
.rag-stop.g-contract { stop-color: var(--g-contract); }
.rag-pulse { fill: var(--accent); opacity: .18; animation: rag-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.rag-line { stroke: var(--accent); stroke-width: .5; stroke-linecap: round; opacity: .7; transition: stroke-dashoffset .7s ease; }
.rag-line.is-archive { stroke: var(--muted); stroke-dasharray: 1.5 1.5 !important; stroke-dashoffset: 0 !important; }
@keyframes rag-pulse { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }
.rag-d { transition: height .7s cubic-bezier(.2, .8, .2, 1), opacity .3s; }

.rag-chip-status { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 600; }
.article-body .rag-demo .rag-answer-text { margin-top: 10px; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.article-body .rag-demo ul.rag-sources { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rag-sources li { display: flex; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.rag-ref { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
.rag-sources b { color: var(--ink); }
.rag-sources small { color: var(--muted); }
.article-body .rag-demo .rag-sources p { margin-top: 4px; color: var(--muted); font-size: .85rem; }
.article-body .rag-demo .rag-skip { margin-top: 12px; color: var(--muted); font-size: .84rem; }
.rag-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) {
  .rag-demo { padding: 16px 14px; }
  .rag-find { grid-template-columns: 1fr; }
  .rag-field { flex-direction: column; }
  .rag-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .rag-track { height: 64px; max-width: 56px; }
  .rag-colname { font-size: .72rem; }
  .article-body .rag-demo ol.rag-steps { grid-template-columns: 1fr; gap: 6px; }
  .rag-steps li { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rag-pulse { animation: none; }
  .rag-track i, .rag-star, .rag-line { transition: none; }
}
.rag-badge { transition: opacity .35s; pointer-events: none; }
.rag-badge rect { fill: var(--accent); }
.rag-badge.is-archive rect { fill: var(--muted); }
.rag-badge text { font-size: 2.6px; font-weight: 700; fill: var(--accent-ink); }
.rag-groups { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .8rem; color: var(--muted); }
.rag-groups span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--g-delivery); }
.rag-groups .k-service::before { background: var(--g-service); }
.rag-groups .k-people::before { background: var(--g-people); }
.rag-groups .k-contract::before { background: var(--g-contract); }