/* TARK 24, страница «Подход»: схемы сделок. Цвета только из переменных темы сайта (светлый низ по умолчанию,
   в варианте t24-inv переменные меняются сами), шрифт наследуется от страницы (Onest).
   Карточка .ap-fig держит фон var(--bg-hi): под этот же цвет подложены обводки подписей, чтобы линия под словом
   не читалась. Подписи растут на узком экране: схема сжимается целиком, и без этого на телефоне текст мельче 10 px. */

.ap-fig { margin: 20px 0 0; padding: 14px 14px 10px; background: var(--bg-hi); border: 1px solid var(--line); border-radius: 12px; }
.ap-fig figcaption { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--mute); }
.ap-svg { display: block; width: 100%; height: auto; font-family: inherit; }

/* цена */
.ap-svg path.ap-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* вход: закрашенная точка; выход: кольцо; обводка фоном отделяет точку от линии цены */
.ap-svg circle.ap-entry { fill: var(--accent); stroke: var(--bg-hi); stroke-width: 3; }
.ap-svg circle.ap-exit { fill: var(--bg-hi); stroke: var(--accent); stroke-width: 2.6; }

/* стоп: пунктир уровня и точка, где он сработал */
.ap-svg path.ap-stop, .ap-svg line.ap-stop { fill: none; stroke: var(--down-ink); stroke-width: 1.6; stroke-dasharray: 7 5; }
.ap-svg circle.ap-stop { fill: var(--down-ink); stroke: var(--bg-hi); stroke-width: 3; }

/* диапазон: заливка и границы */
.ap-svg rect.ap-band, .ap-svg path.ap-band { fill: var(--line); fill-opacity: .6; stroke: none; }
.ap-svg line.ap-band { stroke: var(--mute); stroke-opacity: .55; stroke-width: 1; }

/* линия тренда, середина диапазона */
.ap-svg path.ap-guide, .ap-svg line.ap-guide { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 1.5 5; stroke-linecap: round; }

/* вспомогательное: объём торгов, размер позиции, разделитель */
.ap-svg rect.ap-mute, .ap-svg path.ap-mute { fill: var(--mute); fill-opacity: .28; stroke: none; }
.ap-svg line.ap-mute { stroke: var(--mute); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 2 4; }

/* подписи */
.ap-svg text.ap-label { font-size: 16px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--bg-hi);
  stroke-width: 5px; stroke-linejoin: round; }
.ap-svg text.ap-label.ap-stop, .ap-svg .ap-label tspan.ap-stop { fill: var(--down-ink); }
.ap-svg text.ap-label.ap-guide { fill: var(--accent); }
.ap-svg text.ap-label.ap-mute, .ap-svg .ap-label tspan.ap-mute { fill: var(--mute); font-weight: 400; }

@media (max-width: 760px) {
  .ap-svg text.ap-label { font-size: 20px; }
}
@media (max-width: 480px) {
  .ap-fig { padding: 10px 8px 8px; }
  .ap-svg text.ap-label { font-size: 24px; stroke-width: 6px; }
}

/* Раскладка страницы «Подход» (сборка t24_approach.py): схема рядом с текстом на компьютере, друг под другом на телефоне;
   правила риска карточками, оговорка про индивидуальный режим объёма выделенным блоком. */
.ap-sec .sec-head, .ap-sec .sec-head .lead, .ap-head .lead { max-width: none; text-wrap: pretty; }
.ap-rows { display: grid; gap: 36px; margin-top: 8px; }
.ap-item.has-fig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center;
  padding-top: 32px; border-top: 1px solid var(--line); }
.ap-item.has-fig .ap-fig { margin: 0; }
.ap-item h3 { margin: 0 0 10px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.ap-item p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2, var(--ink)); }
.ap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ap-cards .ap-item { padding-top: 22px; border-top: 1px solid var(--line); }
.ap-cards + .ap-rows { margin-top: 36px; }
.ap-caveat { margin: 32px 0 0; padding: 22px 26px; border-left: 2px solid var(--accent); background: var(--bg-hi); }
.ap-caveat p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2, var(--ink)); }
.ap-caveat + .ap-rows { margin-top: 36px; }
.ap-note { margin-top: 32px; color: var(--mute); font-size: 15px; line-height: 1.6; }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ap-list li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.6; }
.ap-list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); }
.ap-cta p { margin: 0; max-width: none; font-size: 18px; line-height: 1.6; }
.ap-cta .ap-cta-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 20px; }
@media (max-width: 900px) {
  .ap-item.has-fig { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; }
  .ap-cards { grid-template-columns: 1fr; gap: 20px; }
  .ap-item h3 { font-size: 20px; }
}

/* «Без искусственного интеллекта»: плашка с акцентной чертой сразу после вводного абзаца */
.ap-sec-callout { padding-top: 0; }
.ap-callout { padding: 30px 34px; border-left: 2px solid var(--accent); background: var(--bg-hi); }
.ap-callout h2 { margin: 0 0 14px; font-size: 28px; }
.ap-callout p { margin: 0 0 12px; max-width: none; font-size: 17px; line-height: 1.65; color: var(--ink-2, var(--ink)); text-wrap: pretty; }
.ap-callout p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .ap-callout { padding: 22px 18px; } .ap-callout h2 { font-size: 23px; } .ap-callout p { font-size: 16px; } }